From 6915bbf6919b810cf62cfad542972bbf76e71f09 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Sun, 3 May 2026 20:23:01 +0100
Subject: [PATCH 01/39] build: remove linux deb and rpm release artifacts

---
 .github/workflows/build-and-upload.yml | 70 ++------------------------
 1 file changed, 5 insertions(+), 65 deletions(-)

diff --git a/.github/workflows/build-and-upload.yml b/.github/workflows/build-and-upload.yml
index 9121c5f7..92c0c471 100644
--- a/.github/workflows/build-and-upload.yml
+++ b/.github/workflows/build-and-upload.yml
@@ -667,17 +667,15 @@ jobs:
           }
 
           appimage=$(find_one "*.AppImage")
-          deb=$(find_one "*.deb")
-          rpm=$(find_one "*.rpm")
+          fallback_bin="$SEARCH_ROOT/release/codenomad-tauri"
 
-          if [ -z "$appimage" ] || [ -z "$deb" ] || [ -z "$rpm" ]; then
-            echo "Missing bundle(s): appimage=${appimage:-none} deb=${deb:-none} rpm=${rpm:-none}" >&2
+          if [ -z "$appimage" ] || [ ! -f "$fallback_bin" ]; then
+            echo "Missing bundle(s): appimage=${appimage:-none} binary=$fallback_bin" >&2
             exit 1
           fi
 
           cp "$appimage" "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-linux-x64.AppImage"
-          cp "$deb" "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-linux-x64.deb"
-          cp "$rpm" "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-linux-x64.rpm"
+          zip -j "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-linux-x64.zip" "$fallback_bin"
 
       - name: Upload Actions artifacts (Tauri Linux)
         if: ${{ inputs.upload_actions_artifacts }}
@@ -776,7 +774,7 @@ jobs:
           rm -rf "$ARTIFACT_DIR"
           mkdir -p "$ARTIFACT_DIR"
           shopt -s nullglob globstar
-          first_artifact=$(find "$SEARCH_ROOT" -type f \( -name "*.AppImage" -o -name "*.deb" -o -name "*.rpm" -o -name "*.tar.gz" \) | head -n1)
+          first_artifact=$(find "$SEARCH_ROOT" -type f \( -name "*.AppImage" -o -name "*.tar.gz" \) | head -n1)
           fallback_bin="$SEARCH_ROOT/release/codenomad-tauri"
           if [ -n "$first_artifact" ]; then
             zip -j "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-linux-x64.zip" "$first_artifact"
@@ -797,61 +795,3 @@ jobs:
             echo "Uploading $file"
             gh release upload "$TAG" "$file" --clobber
           done
-
-
-  build-linux-rpm:
-    runs-on: ubuntu-24.04
-    env:
-      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      VERSION: ${{ inputs.version }}
-      TAG: ${{ inputs.tag }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ inputs.ref || github.ref }}
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: npm
-
-      - name: Install rpm packaging dependencies
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y rpm ruby ruby-dev build-essential
-          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 --include=optional
-
-      - name: Ensure rollup native binary
-        run: npm install @rollup/rollup-linux-x64-gnu --no-save
-
-      - name: Build Linux RPM binaries
-        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
-          for file in packages/electron-app/release/*.rpm; do
-            [ -f "$file" ] || continue
-            echo "Uploading $file"
-            gh release upload "$TAG" "$file" --clobber
-          done
-
-      - name: Upload Actions artifacts (Electron Linux RPM)
-        if: ${{ inputs.upload_actions_artifacts }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: ${{ inputs.actions_artifacts_name_prefix }}electron-linux-rpm
-          path: packages/electron-app/release/*.rpm
-          retention-days: ${{ inputs.actions_artifacts_retention_days }}
-          if-no-files-found: error

From 3e9c152046381b54675fdd89fafa6273c49d0ec5 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Sun, 3 May 2026 20:29:42 +0100
Subject: [PATCH 02/39] build: normalize release artifact filenames

---
 .github/workflows/build-and-upload.yml | 18 +++++++++---------
 packages/electron-app/package.json     |  6 +++---
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/.github/workflows/build-and-upload.yml b/.github/workflows/build-and-upload.yml
index 92c0c471..5ad815eb 100644
--- a/.github/workflows/build-and-upload.yml
+++ b/.github/workflows/build-and-upload.yml
@@ -162,7 +162,7 @@ jobs:
               arch="arm64"
             fi
 
-            out_zip="$release_root/CodeNomad-${VERSION_TO_USE}-mac-${arch}.zip"
+            out_zip="$release_root/CodeNomad-Electron-macos-${arch}-${VERSION_TO_USE}.zip"
             rm -f "$out_zip"
             echo "ditto -ck: $app -> $out_zip"
             ditto -ck --sequesterRsrc --keepParent "$app" "$out_zip"
@@ -177,7 +177,7 @@ jobs:
           tmp_dir=$(mktemp -d)
           trap 'rm -rf "$tmp_dir"' EXIT
 
-          zips=(packages/electron-app/release/CodeNomad-*-mac-*.zip)
+          zips=(packages/electron-app/release/CodeNomad-Electron-macos-*.zip)
           if [ "${#zips[@]}" -eq 0 ]; then
             echo "No Electron macOS zip artifacts found to validate" >&2
             exit 1
@@ -391,7 +391,7 @@ jobs:
           rm -rf "$ARTIFACT_DIR"
           mkdir -p "$ARTIFACT_DIR"
           if [ -d "$BUNDLE_ROOT/macos/CodeNomad.app" ]; then
-            ditto -ck --sequesterRsrc --keepParent "$BUNDLE_ROOT/macos/CodeNomad.app" "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-macos-x64.zip"
+            ditto -ck --sequesterRsrc --keepParent "$BUNDLE_ROOT/macos/CodeNomad.app" "$ARTIFACT_DIR/CodeNomad-Tauri-macos-x64-${VERSION}.zip"
           fi
 
       - name: Upload Actions artifacts (Tauri macOS)
@@ -475,7 +475,7 @@ jobs:
           rm -rf "$ARTIFACT_DIR"
           mkdir -p "$ARTIFACT_DIR"
           if [ -d "$BUNDLE_ROOT/macos/CodeNomad.app" ]; then
-            ditto -ck --sequesterRsrc --keepParent "$BUNDLE_ROOT/macos/CodeNomad.app" "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-macos-arm64.zip"
+            ditto -ck --sequesterRsrc --keepParent "$BUNDLE_ROOT/macos/CodeNomad.app" "$ARTIFACT_DIR/CodeNomad-Tauri-macos-arm64-${VERSION}.zip"
           fi
 
       - name: Upload Actions artifacts (Tauri macOS arm64)
@@ -563,7 +563,7 @@ jobs:
           New-Item -ItemType Directory -Path $artifactDir | Out-Null
           $exe = Get-ChildItem -Path $bundleRoot -Recurse -File -Filter *.exe | Select-Object -First 1
           if ($null -ne $exe) {
-            $dest = Join-Path $artifactDir ("CodeNomad-Tauri-$env:VERSION-windows-x64.zip")
+            $dest = Join-Path $artifactDir ("CodeNomad-Tauri-windows-x64-$env:VERSION.zip")
             Compress-Archive -Path $exe.Directory.FullName -DestinationPath $dest -Force
           }
 
@@ -674,8 +674,8 @@ jobs:
             exit 1
           fi
 
-          cp "$appimage" "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-linux-x64.AppImage"
-          zip -j "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-linux-x64.zip" "$fallback_bin"
+          cp "$appimage" "$ARTIFACT_DIR/CodeNomad-Tauri-linux-x64-${VERSION}.AppImage"
+          zip -j "$ARTIFACT_DIR/CodeNomad-Tauri-linux-x64-${VERSION}.zip" "$fallback_bin"
 
       - name: Upload Actions artifacts (Tauri Linux)
         if: ${{ inputs.upload_actions_artifacts }}
@@ -777,9 +777,9 @@ jobs:
           first_artifact=$(find "$SEARCH_ROOT" -type f \( -name "*.AppImage" -o -name "*.tar.gz" \) | head -n1)
           fallback_bin="$SEARCH_ROOT/release/codenomad-tauri"
           if [ -n "$first_artifact" ]; then
-            zip -j "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-linux-x64.zip" "$first_artifact"
+            zip -j "$ARTIFACT_DIR/CodeNomad-Tauri-linux-arm64-${VERSION}.zip" "$first_artifact"
           elif [ -f "$fallback_bin" ]; then
-            zip -j "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-linux-x64.zip" "$fallback_bin"
+            zip -j "$ARTIFACT_DIR/CodeNomad-Tauri-linux-arm64-${VERSION}.zip" "$fallback_bin"
           else
             echo "No bundled artifact found under $SEARCH_ROOT and no binary at $fallback_bin" >&2
             exit 1
diff --git a/packages/electron-app/package.json b/packages/electron-app/package.json
index 4311124f..79b96a53 100644
--- a/packages/electron-app/package.json
+++ b/packages/electron-app/package.json
@@ -103,7 +103,7 @@
           ]
         }
       ],
-      "artifactName": "CodeNomad-${version}-${os}-${arch}.${ext}",
+      "artifactName": "CodeNomad-Electron-macos-${arch}-${version}.${ext}",
       "icon": "electron/resources/icon.icns"
     },
     "dmg": {
@@ -130,7 +130,7 @@
           ]
         }
       ],
-      "artifactName": "CodeNomad-${version}-${os}-${arch}.${ext}",
+      "artifactName": "CodeNomad-Electron-windows-${arch}-${version}.${ext}",
       "icon": "electron/resources/icon.ico"
     },
     "nsis": {
@@ -156,7 +156,7 @@
           ]
         }
       ],
-      "artifactName": "CodeNomad-${version}-${os}-${arch}.${ext}",
+      "artifactName": "CodeNomad-Electron-linux-${arch}-${version}.${ext}",
       "category": "Development",
       "icon": "electron/resources/icon.png"
     }

From 0168703d4fcc4e971139eb25b73ce6e46fdf1d64 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Sun, 3 May 2026 22:00:05 +0100
Subject: [PATCH 03/39] fix(ui): make idle session badges transient

Keep idle status visible only briefly after active work finishes so the session list and headers emphasize meaningful state changes instead of permanent idle noise.
---
 packages/ui/src/components/instance-tab.tsx   | 41 ++++++++++------
 .../components/instance/instance-shell2.tsx   |  6 ++-
 packages/ui/src/components/session-list.tsx   | 21 +++++----
 packages/ui/src/stores/session-api.ts         | 17 ++++---
 packages/ui/src/stores/session-events.ts      |  9 ++++
 packages/ui/src/stores/session-state.ts       |  3 +-
 packages/ui/src/stores/session-status.test.ts | 27 +++++++++++
 packages/ui/src/stores/session-status.ts      | 47 ++++++++++++++++++-
 packages/ui/src/types/session.ts              | 19 ++++++++
 9 files changed, 156 insertions(+), 34 deletions(-)

diff --git a/packages/ui/src/components/instance-tab.tsx b/packages/ui/src/components/instance-tab.tsx
index f345f637..a2c80299 100644
--- a/packages/ui/src/components/instance-tab.tsx
+++ b/packages/ui/src/components/instance-tab.tsx
@@ -1,4 +1,4 @@
-import { Component, createMemo } from "solid-js"
+import { Component, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 import type { Instance } from "../types/instance"
 import { getInstanceSessionIndicatorStatus } from "../stores/session-status"
 import { FolderOpen, ShieldAlert, X } from "lucide-solid"
@@ -20,9 +20,18 @@ function getPathBasename(path: string): string {
 
 const InstanceTab: Component<InstanceTabProps> = (props) => {
   const { t } = useI18n()
-  const aggregatedStatus = createMemo(() => getInstanceSessionIndicatorStatus(props.instance.id))
+  const [now, setNow] = createSignal(Date.now())
+
+  createEffect(() => {
+    if (typeof window === "undefined") return
+    const timer = window.setInterval(() => setNow(Date.now()), 1000)
+    onCleanup(() => window.clearInterval(timer))
+  })
+
+  const aggregatedStatus = createMemo(() => getInstanceSessionIndicatorStatus(props.instance.id, now()))
   const statusClassName = createMemo(() => {
     const status = aggregatedStatus()
+    if (!status) return null
     return status === "permission" ? "session-permission" : `session-${status}`
   })
   const statusTitle = createMemo(() => {
@@ -33,8 +42,10 @@ const InstanceTab: Component<InstanceTabProps> = (props) => {
         return t("instanceTab.status.compacting")
       case "working":
         return t("instanceTab.status.working")
-      default:
+      case "idle":
         return t("instanceTab.status.idle")
+      default:
+        return null
     }
   })
 
@@ -51,17 +62,19 @@ const InstanceTab: Component<InstanceTabProps> = (props) => {
         <span class="tab-label">
           {getPathBasename(props.instance.folder)}
         </span>
-        <span
-          class={`status-indicator session-status ml-auto ${statusClassName()}`}
-          title={statusTitle()}
-          aria-label={t("instanceTab.status.ariaLabel", { status: statusTitle() })}
-        >
-          {aggregatedStatus() === "permission" ? (
-            <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" />
-          ) : (
-            <span class="status-dot" />
-          )}
-        </span>
+        <Show when={statusClassName() && statusTitle()}>
+          <span
+            class={`status-indicator session-status ml-auto ${statusClassName()}`}
+            title={statusTitle() ?? undefined}
+            aria-label={t("instanceTab.status.ariaLabel", { status: statusTitle() ?? "" })}
+          >
+            {aggregatedStatus() === "permission" ? (
+              <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" />
+            ) : (
+              <span class="status-dot" />
+            )}
+          </span>
+        </Show>
         <span
           class="tab-close"
           onClick={(e) => {
diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index e940b43d..eaa231cc 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -41,7 +41,7 @@ import SessionSidebar from "./shell/SessionSidebar"
 import { useSessionSidebarRequests } from "./shell/useSessionSidebarRequests"
 import RightPanel from "./shell/right-panel/RightPanel"
 import { useDrawerChrome } from "./shell/useDrawerChrome"
-import { getRetrySeconds, getSessionRetry, getSessionStatus } from "../../stores/session-status"
+import { getRetrySeconds, getSessionRetry, getSessionStatus, shouldShowSessionStatus } from "../../stores/session-status"
 import { Maximize2, ShieldAlert } from "lucide-solid"
 import type { PromptInputApi } from "../prompt-input/types"
 
@@ -329,6 +329,10 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
 
     const status = getSessionStatus(props.instance.id, activeSessionId)
     const retry = getSessionRetry(props.instance.id, activeSessionId)
+    const showStatus = shouldShowSessionStatus(props.instance.id, activeSessionId, now())
+    if (!showStatus) {
+      return null
+    }
     const text = retry
       ? (() => {
           const seconds = getRetrySeconds(retry.next, now())
diff --git a/packages/ui/src/components/session-list.tsx b/packages/ui/src/components/session-list.tsx
index a3c94ea9..8408a3ef 100644
--- a/packages/ui/src/components/session-list.tsx
+++ b/packages/ui/src/components/session-list.tsx
@@ -1,7 +1,7 @@
 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 { getRetrySeconds, getSessionRetry, getSessionStatus } from "../stores/session-status"
+import { getRetrySeconds, getSessionRetry, getSessionStatus, shouldShowSessionStatus } from "../stores/session-status"
 import { Bot, User, Copy, Trash2, Pencil, ShieldAlert, ChevronDown, Search, Square, CheckSquare, MinusSquare, Split, RotateCw } from "lucide-solid"
 import KeyboardHint from "./keyboard-hint"
 import SessionRenameDialog from "./session-rename-dialog"
@@ -427,6 +427,7 @@ const SessionList: Component<SessionListProps> = (props) => {
     const needsQuestion = () => Boolean((session() as any)?.pendingQuestion)
     const needsInput = () => needsPermission() || needsQuestion()
     const statusClassName = () => (needsInput() ? "session-permission" : `session-${retry() ? "retrying" : status()}`)
+    const showStatus = () => needsInput() || shouldShowSessionStatus(props.instanceId, rowProps.sessionId, now())
     const statusText = () =>
       needsPermission()
         ? t("sessionList.status.needsPermission")
@@ -520,14 +521,16 @@ const SessionList: Component<SessionListProps> = (props) => {
                   <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()} notranslate`}
-                title={statusTooltip()}
-                translate="no"
-              >
-                {needsInput() ? <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" /> : <span class="status-dot" />}
-                {statusText()}
-              </span>
+              <Show when={showStatus()}>
+                <span
+                  class={`status-indicator session-status session-status-list ${statusClassName()} notranslate`}
+                  title={statusTooltip()}
+                  translate="no"
+                >
+                  {needsInput() ? <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" /> : <span class="status-dot" />}
+                  {statusText()}
+                </span>
+              </Show>
               <Show when={showWorktreeBadge()}>
                 <span class="status-indicator session-status-list worktree-indicator" title={`Worktree: ${worktreeSlug()}`}>
                   <Split class="w-3.5 h-3.5" aria-hidden="true" />
diff --git a/packages/ui/src/stores/session-api.ts b/packages/ui/src/stores/session-api.ts
index 9c3520b9..9771aba1 100644
--- a/packages/ui/src/stores/session-api.ts
+++ b/packages/ui/src/stores/session-api.ts
@@ -1,4 +1,4 @@
-import { mapSdkSessionRetry, mapSdkSessionStatus, type Session, type SessionStatus } from "../types/session"
+import { getIdleSinceForStatusTransition, mapSdkSessionRetry, mapSdkSessionStatus, type Session, type SessionStatus } from "../types/session"
 import type { Message } from "../types/message"
 import type { FileDiff } from "@opencode-ai/sdk/v2/client"
 
@@ -175,6 +175,7 @@ async function fetchSessions(instanceId: string): Promise<void> {
         model: existingSession?.model ?? { providerId: "", modelId: "" },
         status,
         retry,
+        idleSince: getIdleSinceForStatusTransition(existingStatus, status, existingSession?.idleSince),
         version: apiSession.version,
         time: {
           ...apiSession.time,
@@ -273,6 +274,7 @@ async function createSession(instanceId: string, agent?: string): Promise<Sessio
       agent: selectedAgent,
       model: defaultModel,
       status: "idle",
+      idleSince: null,
       version: response.data.version,
       time: {
         ...response.data.time,
@@ -378,12 +380,13 @@ async function forkSession(
     title: info.title || "Forked Session",
     parentId: info.parentID || null,
     agent: info.agent || "",
-    model: {
-      providerId: info.model?.providerID || "",
-      modelId: info.model?.modelID || "",
-    },
-    status: "idle",
-    version: "0",
+     model: {
+       providerId: info.model?.providerID || "",
+       modelId: info.model?.modelID || "",
+     },
+     status: "idle",
+     idleSince: null,
+     version: "0",
     time: info.time ? { ...info.time } : { created: Date.now(), updated: Date.now() },
     revert: info.revert
       ? {
diff --git a/packages/ui/src/stores/session-events.ts b/packages/ui/src/stores/session-events.ts
index 1068636c..ef4764b0 100644
--- a/packages/ui/src/stores/session-events.ts
+++ b/packages/ui/src/stores/session-events.ts
@@ -41,6 +41,7 @@ import {
 import { showAlertDialog } from "./alerts"
 import {
   createClientSession,
+  getIdleSinceForStatusTransition,
   mapSdkSessionRetry,
   mapSdkSessionStatus,
   type Session,
@@ -161,6 +162,7 @@ function applySessionStatus(instanceId: string, sessionId: string, status: Sessi
 
     session.status = status
     session.retry = status === "working" ? nextRetry : null
+    session.idleSince = getIdleSinceForStatusTransition(current, status, session.idleSince)
 
     // Auto-expand the parent thread when a child session starts working.
     // Users can still collapse it; we only expand on the transition.
@@ -227,6 +229,11 @@ async function fetchSessionInfo(instanceId: string, sessionId: string, directory
         model: existing?.model ?? fetched.model,
         status: existing?.status === "compacting" ? "compacting" : fetched.status,
         retry: existing?.status === "compacting" ? null : fetched.retry,
+        idleSince: getIdleSinceForStatusTransition(
+          existing?.status,
+          existing?.status === "compacting" ? "compacting" : fetched.status,
+          existing?.idleSince,
+        ),
         pendingPermission: existing?.pendingPermission ?? fetched.pendingPermission,
         pendingQuestion: existing?.pendingQuestion ?? false,
       }
@@ -458,6 +465,7 @@ function handleSessionUpdate(instanceId: string, event: EventSessionUpdated): vo
       },
       status: "idle",
       retry: null,
+      idleSince: null,
       version: info.version || "0",
       time: info.time
         ? { ...info.time }
@@ -600,6 +608,7 @@ function handleSessionCompacted(instanceId: string, event: EventSessionCompacted
     withSession(instanceId, sessionID, (session) => {
       session.status = "working"
       session.retry = null
+      session.idleSince = null
     })
   } else {
     ensureSessionStatus(instanceId, sessionID, "working", (event as any)?.directory)
diff --git a/packages/ui/src/stores/session-state.ts b/packages/ui/src/stores/session-state.ts
index c4703e0b..79e600bf 100644
--- a/packages/ui/src/stores/session-state.ts
+++ b/packages/ui/src/stores/session-state.ts
@@ -1,6 +1,6 @@
 import { batch, createSignal } from "solid-js"
 
-import type { Session, SessionStatus, Agent, Provider } from "../types/session"
+import { getIdleSinceForStatusTransition, type Session, type SessionStatus, type Agent, type Provider } from "../types/session"
 import { deleteSession, loadMessages } from "./session-api"
 import { showToastNotification } from "../lib/notifications"
 import { messageStoreBus } from "./message-v2/bus"
@@ -353,6 +353,7 @@ function setSessionStatus(instanceId: string, sessionId: string, status: Session
     if (session.status === status) return false
     const previous = session.status
     session.status = status
+    session.idleSince = getIdleSinceForStatusTransition(previous, status, session.idleSince)
     if (status !== "working") {
       session.retry = null
     }
diff --git a/packages/ui/src/stores/session-status.test.ts b/packages/ui/src/stores/session-status.test.ts
index 2413743d..1d674e1f 100644
--- a/packages/ui/src/stores/session-status.test.ts
+++ b/packages/ui/src/stores/session-status.test.ts
@@ -1,6 +1,8 @@
 import assert from "node:assert/strict"
 import { describe, it } from "node:test"
 
+import { getIdleSinceForStatusTransition } from "../types/session.ts"
+import { IDLE_STATUS_VISIBILITY_MS, shouldShowIdleStatus } from "./session-status.ts"
 import { shouldSessionHoldWakeLock } from "./wake-lock-eligibility.ts"
 
 describe("shouldSessionHoldWakeLock", () => {
@@ -18,3 +20,28 @@ describe("shouldSessionHoldWakeLock", () => {
     assert.equal(shouldSessionHoldWakeLock({ status: "working", pendingPermission: false, pendingQuestion: true }), false)
   })
 })
+
+describe("idle status visibility", () => {
+  it("shows idle briefly after transitioning from active work", () => {
+    const idleSince = getIdleSinceForStatusTransition("working", "idle", null, 1_000)
+
+    assert.equal(idleSince, 1_000)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince }, 1_000), true)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince }, 1_000 + IDLE_STATUS_VISIBILITY_MS - 1), true)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince }, 1_000 + IDLE_STATUS_VISIBILITY_MS), false)
+  })
+
+  it("does not show idle for sessions that started idle", () => {
+    const idleSince = getIdleSinceForStatusTransition(undefined, "idle", null, 1_000)
+
+    assert.equal(idleSince, null)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince }, 1_000), false)
+  })
+
+  it("clears idle visibility when work resumes", () => {
+    const idleSince = getIdleSinceForStatusTransition("idle", "working", 1_000, 2_000)
+
+    assert.equal(idleSince, null)
+    assert.equal(shouldShowIdleStatus({ status: "working", idleSince }, 2_000), false)
+  })
+})
diff --git a/packages/ui/src/stores/session-status.ts b/packages/ui/src/stores/session-status.ts
index 7ce17fac..5238cfaf 100644
--- a/packages/ui/src/stores/session-status.ts
+++ b/packages/ui/src/stores/session-status.ts
@@ -2,6 +2,8 @@ import type { Session, SessionRetryState, SessionStatus } from "../types/session
 import { getInstanceSessionIndicatorStatusCached, sessions } from "./session-state"
 import { shouldSessionHoldWakeLock } from "./wake-lock-eligibility"
 
+export const IDLE_STATUS_VISIBILITY_MS = 5000
+
 function getSession(instanceId: string, sessionId: string): Session | null {
   const instanceSessions = sessions().get(instanceId)
   return instanceSessions?.get(sessionId) ?? null
@@ -35,14 +37,55 @@ export function getSessionRetry(instanceId: string, sessionId: string): SessionR
   return session?.retry ?? null
 }
 
+export function shouldShowIdleStatus(session: Pick<Session, "status" | "idleSince"> | null | undefined, now = Date.now()): boolean {
+  if (!session || session.status !== "idle") {
+    return false
+  }
+
+  if (typeof session.idleSince !== "number") {
+    return false
+  }
+
+  return now - session.idleSince < IDLE_STATUS_VISIBILITY_MS
+}
+
+export function shouldShowSessionStatus(instanceId: string, sessionId: string, now = Date.now()): boolean {
+  const session = getSession(instanceId, sessionId)
+  if (!session) {
+    return false
+  }
+
+  if (session.pendingPermission || session.pendingQuestion || session.retry) {
+    return true
+  }
+
+  return session.status !== "idle" || shouldShowIdleStatus(session, now)
+}
+
 export function getRetrySeconds(next: number, now = Date.now()): number {
   return Math.max(0, Math.round((next - now) / 1000))
 }
 
 export type InstanceSessionIndicatorStatus = "permission" | SessionStatus
 
-export function getInstanceSessionIndicatorStatus(instanceId: string): InstanceSessionIndicatorStatus {
-  return getInstanceSessionIndicatorStatusCached(instanceId)
+export function getInstanceSessionIndicatorStatus(instanceId: string, now = Date.now()): InstanceSessionIndicatorStatus | null {
+  const aggregated = getInstanceSessionIndicatorStatusCached(instanceId)
+  if (aggregated !== "idle") {
+    return aggregated
+  }
+
+  const instanceSessions = sessions().get(instanceId)
+  if (!instanceSessions) {
+    return null
+  }
+
+  for (const session of instanceSessions.values()) {
+    if (shouldShowIdleStatus(session, now)) {
+      return "idle"
+    }
+  }
+
+  return null
 }
 
 export function isSessionBusy(instanceId: string, sessionId: string): boolean {
diff --git a/packages/ui/src/types/session.ts b/packages/ui/src/types/session.ts
index de1a6e8d..9b5e736e 100644
--- a/packages/ui/src/types/session.ts
+++ b/packages/ui/src/types/session.ts
@@ -22,6 +22,23 @@ export interface SessionRetryState {
   next: number
 }
 
+export function getIdleSinceForStatusTransition(
+  previousStatus: SessionStatus | null | undefined,
+  nextStatus: SessionStatus,
+  previousIdleSince: number | null | undefined,
+  now = Date.now(),
+): number | null {
+  if (nextStatus !== "idle") {
+    return null
+  }
+
+  if (previousStatus && previousStatus !== "idle") {
+    return now
+  }
+
+  return previousIdleSince ?? null
+}
+
 export function mapSdkSessionStatus(status: SDKSessionStatus | null | undefined): SessionStatus {
   if (!status || status.type === "idle") {
     return "idle"
@@ -58,6 +75,7 @@ export interface Session
   pendingQuestion?: boolean // Indicates if session is waiting on user input
   status: SessionStatus // Single source of truth for session status
   retry?: SessionRetryState | null // Retry metadata for transient backoff states
+  idleSince?: number | null // Timestamp for short-lived idle badge visibility after active work completes
   diff?: FileDiff[] // Session-level file diffs (hydrated via session.diff)
 }
 
@@ -76,6 +94,7 @@ export function createClientSession(
     agent,
     model,
     status,
+    idleSince: null,
   }
 }
 

From 1f46092f4d8387a3adb1a75e8af3f981f1d43404 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Mon, 4 May 2026 20:08:04 +0100
Subject: [PATCH 04/39] build: bundle node runtime for desktop packages

---
 .github/workflows/build-and-upload.yml        |  21 ++
 packages/electron-app/.gitignore              |   1 +
 .../electron/main/managed-node.ts             | 278 ++--------------
 .../electron/main/process-manager.ts          |   7 +-
 packages/electron-app/package.json            |  33 +-
 packages/electron-app/scripts/build.js        |  52 ++-
 .../electron-app/scripts/prepare-resources.js |   4 +
 packages/tauri-app/Cargo.lock                 | 107 +-----
 packages/tauri-app/scripts/prebuild.js        |   3 +
 packages/tauri-app/src-tauri/Cargo.toml       |   4 -
 packages/tauri-app/src-tauri/build.rs         |   3 +
 .../tauri-app/src-tauri/src/cli_manager.rs    |   4 +-
 .../tauri-app/src-tauri/src/managed_node.rs   | 304 +++---------------
 packages/tauri-app/src-tauri/tauri.conf.json  |   1 +
 scripts/prepare-node-runtime.cjs              | 200 ++++++++++++
 scripts/verify-bundled-node.cjs               |  31 ++
 16 files changed, 376 insertions(+), 677 deletions(-)
 create mode 100644 scripts/prepare-node-runtime.cjs
 create mode 100644 scripts/verify-bundled-node.cjs

diff --git a/.github/workflows/build-and-upload.yml b/.github/workflows/build-and-upload.yml
index 5ad815eb..2dd97162 100644
--- a/.github/workflows/build-and-upload.yml
+++ b/.github/workflows/build-and-upload.yml
@@ -101,6 +101,9 @@ jobs:
       - name: Build macOS binaries (Electron)
         run: npm run build:mac --workspace @neuralnomads/codenomad-electron-app
 
+      - name: Verify bundled Node resource (Electron macOS)
+        run: node scripts/verify-bundled-node.cjs packages/electron-app/release/mac/CodeNomad.app/Contents/Resources@darwin-x64 packages/electron-app/release/mac-arm64/CodeNomad.app/Contents/Resources@darwin-arm64
+
       - name: Ad-hoc sign Electron macOS app bundles (seal resources)
         shell: bash
         run: |
@@ -259,6 +262,9 @@ jobs:
       - name: Build Windows binaries (Electron)
         run: npm run build:win --workspace @neuralnomads/codenomad-electron-app
 
+      - name: Verify bundled Node resource (Electron Windows)
+        run: node scripts/verify-bundled-node.cjs packages/electron-app/electron/resources@win32-x64
+
       - name: Upload release assets
         if: ${{ inputs.upload && inputs.tag != '' }}
         shell: pwsh
@@ -308,6 +314,9 @@ jobs:
       - name: Build Linux binaries (Electron)
         run: npm run build:linux --workspace @neuralnomads/codenomad-electron-app
 
+      - name: Verify bundled Node resource (Electron Linux)
+        run: node scripts/verify-bundled-node.cjs packages/electron-app/electron/resources@linux-x64
+
       - name: Upload release assets
         if: ${{ inputs.upload && inputs.tag != '' }}
         run: |
@@ -364,6 +373,9 @@ jobs:
       - name: Prebuild (Tauri)
         run: npm run prebuild --workspace @codenomad/tauri-app
 
+      - name: Verify bundled Node resource (Tauri macOS x64)
+        run: node scripts/verify-bundled-node.cjs packages/tauri-app/src-tauri/resources@darwin-x64
+
       - name: Ensure tauri native binary
         working-directory: packages/tauri-app
         run: |
@@ -448,6 +460,9 @@ jobs:
       - name: Prebuild (Tauri)
         run: npm run prebuild --workspace @codenomad/tauri-app
 
+      - name: Verify bundled Node resource (Tauri macOS arm64)
+        run: node scripts/verify-bundled-node.cjs packages/tauri-app/src-tauri/resources@darwin-arm64
+
       - name: Ensure tauri native binary
         working-directory: packages/tauri-app
         run: |
@@ -533,6 +548,9 @@ jobs:
       - name: Prebuild (Tauri)
         run: npm run prebuild --workspace @codenomad/tauri-app
 
+      - name: Verify bundled Node resource (Tauri Windows)
+        run: node scripts/verify-bundled-node.cjs packages/tauri-app/src-tauri/resources@win32-x64
+
       - name: Ensure tauri native binary
         shell: bash
         working-directory: packages/tauri-app
@@ -634,6 +652,9 @@ jobs:
       - name: Prebuild (Tauri)
         run: npm run prebuild --workspace @codenomad/tauri-app
 
+      - name: Verify bundled Node resource (Tauri Linux)
+        run: node scripts/verify-bundled-node.cjs packages/tauri-app/src-tauri/resources@linux-x64
+
       - name: Ensure tauri native binary
         working-directory: packages/tauri-app
         run: |
diff --git a/packages/electron-app/.gitignore b/packages/electron-app/.gitignore
index 3b43e35f..c0c6679f 100644
--- a/packages/electron-app/.gitignore
+++ b/packages/electron-app/.gitignore
@@ -3,3 +3,4 @@ dist/
 release/
 .vite/
 electron/resources/server/
+electron/resources/node/
diff --git a/packages/electron-app/electron/main/managed-node.ts b/packages/electron-app/electron/main/managed-node.ts
index 700aa9ad..31110e46 100644
--- a/packages/electron-app/electron/main/managed-node.ts
+++ b/packages/electron-app/electron/main/managed-node.ts
@@ -1,283 +1,53 @@
-import { dialog, app } from "electron"
-import { createHash } from "node:crypto"
-import fs from "node:fs"
-import { createWriteStream } from "node:fs"
-import { mkdir, mkdtemp, rename, rm, stat } from "node:fs/promises"
-import https from "node:https"
-import os from "node:os"
+import { app } from "electron"
+import { existsSync, statSync } from "node:fs"
 import path from "node:path"
-import { pipeline } from "node:stream/promises"
-import { spawn } from "node:child_process"
-
-const MANAGED_NODE_VERSION = "v22.22.2"
-const CONFIG_DIR = path.join(app.getPath("home"), ".config", "codenomad")
 
 interface NodeArtifactSpec {
-  archiveName: string
-  archiveRoot: string
   binaryRelativePath: string
-  url: string
 }
 
 function getNodeArtifactSpec(): NodeArtifactSpec {
-  const platform = process.platform
-  const arch = process.arch
-
-  if (platform === "darwin" && arch === "x64") {
-    return buildTarGzSpec("darwin-x64")
-  }
-  if (platform === "darwin" && arch === "arm64") {
-    return buildTarGzSpec("darwin-arm64")
-  }
-  if (platform === "linux" && arch === "x64") {
-    return buildTarGzSpec("linux-x64")
-  }
-  if (platform === "linux" && arch === "arm64") {
-    return buildTarGzSpec("linux-arm64")
-  }
-  if (platform === "win32" && arch === "x64") {
-    return buildZipSpec("win-x64", "node.exe")
-  }
-  if (platform === "win32" && arch === "arm64") {
-    return buildZipSpec("win-arm64", "node.exe")
+  if (process.platform === "win32") {
+    return { binaryRelativePath: "node.exe" }
   }
 
-  throw new Error(`Managed Node runtime is not supported on ${platform}-${arch}.`)
-}
-
-function buildTarGzSpec(target: string): NodeArtifactSpec {
-  const archiveName = `node-${MANAGED_NODE_VERSION}-${target}.tar.gz`
-  return {
-    archiveName,
-    archiveRoot: archiveName.replace(/\.tar\.gz$/, ""),
-    binaryRelativePath: path.join("bin", "node"),
-    url: `https://nodejs.org/dist/${MANAGED_NODE_VERSION}/${archiveName}`,
-  }
-}
-
-function buildZipSpec(target: string, binaryName: string): NodeArtifactSpec {
-  const archiveName = `node-${MANAGED_NODE_VERSION}-${target}.zip`
-  return {
-    archiveName,
-    archiveRoot: archiveName.replace(/\.zip$/, ""),
-    binaryRelativePath: binaryName,
-    url: `https://nodejs.org/dist/${MANAGED_NODE_VERSION}/${archiveName}`,
-  }
+  return { binaryRelativePath: path.join("bin", "node") }
 }
 
 function getRuntimePlatformDir(): string {
   return `${process.platform}-${process.arch}`
 }
 
-function getManagedNodeRoot(): string {
-  return path.join(CONFIG_DIR, "node", MANAGED_NODE_VERSION, getRuntimePlatformDir())
-}
+function getCandidateRoots(): string[] {
+  const platformDir = getRuntimePlatformDir()
+  const roots: string[] = []
 
-function getManagedNodeBinaryPath(): string {
-  return path.join(getManagedNodeRoot(), getNodeArtifactSpec().binaryRelativePath)
-}
-
-function fileExists(filePath: string): boolean {
-  try {
-    return fs.existsSync(filePath)
-  } catch {
-    return false
+  if (app.isPackaged) {
+    roots.push(path.join(process.resourcesPath, "node", platformDir))
   }
-}
-
-async function fetchText(url: string): Promise<string> {
-  const response = await request(url)
-  return response.toString("utf-8")
-}
-
-function request(url: string): Promise<Buffer> {
-  return new Promise((resolve, reject) => {
-    const doRequest = (target: string) => {
-      https
-        .get(target, (response) => {
-          const statusCode = response.statusCode ?? 0
-          const redirect = response.headers.location
-
-          if (statusCode >= 300 && statusCode < 400 && redirect) {
-            response.resume()
-            doRequest(new URL(redirect, target).toString())
-            return
-          }
-
-          if (statusCode < 200 || statusCode >= 300) {
-            response.resume()
-            reject(new Error(`Request failed for ${target} with status ${statusCode}`))
-            return
-          }
 
-          const chunks: Buffer[] = []
-          response.on("data", (chunk) => chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk)))
-          response.on("end", () => resolve(Buffer.concat(chunks)))
-          response.on("error", reject)
-        })
-        .on("error", reject)
-    }
+  // Development fallback for local packaged-resource smoke tests.
+  roots.push(path.join(app.getAppPath(), "electron", "resources", "node", platformDir))
 
-    doRequest(url)
-  })
+  return roots
 }
 
-function downloadFile(url: string, destination: string): Promise<void> {
-  return new Promise((resolve, reject) => {
-    const doDownload = (target: string) => {
-      https
-        .get(target, (response) => {
-          const statusCode = response.statusCode ?? 0
-          const redirect = response.headers.location
-
-          if (statusCode >= 300 && statusCode < 400 && redirect) {
-            response.resume()
-            doDownload(new URL(redirect, target).toString())
-            return
-          }
-
-          if (statusCode < 200 || statusCode >= 300) {
-            response.resume()
-            reject(new Error(`Download failed for ${target} with status ${statusCode}`))
-            return
-          }
-
-          const output = createWriteStream(destination)
-          pipeline(response, output).then(() => resolve()).catch(reject)
-        })
-        .on("error", reject)
-    }
-
-    doDownload(url)
-  })
-}
-
-async function sha256File(filePath: string): Promise<string> {
-  const hash = createHash("sha256")
-  await new Promise<void>((resolve, reject) => {
-    const stream = fs.createReadStream(filePath)
-    stream.on("data", (chunk) => hash.update(chunk))
-    stream.on("end", () => resolve())
-    stream.on("error", reject)
-  })
-  return hash.digest("hex")
-}
-
-async function fetchExpectedSha256(archiveName: string): Promise<string> {
-  const checksums = await fetchText(`https://nodejs.org/dist/${MANAGED_NODE_VERSION}/SHASUMS256.txt`)
-  for (const line of checksums.split(/\r?\n/)) {
-    const trimmed = line.trim()
-    if (!trimmed) continue
-    const [checksum, fileName] = trimmed.split(/\s+/, 2)
-    if (fileName === archiveName) {
-      return checksum
-    }
-  }
-  throw new Error(`Unable to find checksum for ${archiveName}.`)
-}
-
-function runCommand(command: string, args: string[]): Promise<void> {
-  return new Promise((resolve, reject) => {
-    const child = spawn(command, args, { stdio: "ignore", shell: false })
-    child.on("error", reject)
-    child.on("exit", (code) => {
-      if (code === 0) {
-        resolve()
-      } else {
-        reject(new Error(`${command} ${args.join(" ")} exited with code ${code ?? 1}`))
-      }
-    })
-  })
-}
-
-async function extractArchive(archivePath: string, destination: string): Promise<void> {
-  if (archivePath.endsWith(".zip")) {
-    const command = process.platform === "win32" ? "powershell.exe" : "powershell"
-    await runCommand(command, [
-      "-NoProfile",
-      "-NonInteractive",
-      "-Command",
-      "Expand-Archive",
-      "-LiteralPath",
-      archivePath,
-      "-DestinationPath",
-      destination,
-      "-Force",
-    ])
-    return
-  }
-
-  await runCommand("tar", ["-xzf", archivePath, "-C", destination])
-}
-
-async function promptForManagedNodeDownload(): Promise<boolean> {
-  const result = await dialog.showMessageBox({
-    type: "question",
-    buttons: ["Download", "Cancel"],
-    defaultId: 0,
-    cancelId: 1,
-    noLink: true,
-    title: "Download Node Runtime",
-    message: "CodeNomad needs its managed Node.js runtime to start the server.",
-    detail: `Download ${MANAGED_NODE_VERSION} for ${process.platform}-${process.arch} into ~/.config/codenomad?`,
-  })
-
-  return result.response === 0
-}
-
-async function installManagedNodeRuntime(): Promise<string> {
+export function ensureManagedNodeBinary(): string {
   const spec = getNodeArtifactSpec()
-  const runtimeRoot = getManagedNodeRoot()
-  const runtimeParent = path.dirname(runtimeRoot)
-  await mkdir(runtimeParent, { recursive: true })
-  const tempRoot = await mkdtemp(path.join(runtimeParent, ".download-"))
-  const archivePath = path.join(tempRoot, spec.archiveName)
-  const extractRoot = path.join(tempRoot, "extract")
-
-  try {
-    await mkdir(extractRoot, { recursive: true })
-
-    const expectedSha = await fetchExpectedSha256(spec.archiveName)
-    await downloadFile(spec.url, archivePath)
 
-    const actualSha = await sha256File(archivePath)
-    if (actualSha !== expectedSha) {
-      throw new Error(`Checksum mismatch for ${spec.archiveName}.`)
+  for (const root of getCandidateRoots()) {
+    const binaryPath = path.join(root, spec.binaryRelativePath)
+    if (!existsSync(binaryPath)) {
+      continue
     }
 
-    await extractArchive(archivePath, extractRoot)
-
-    const extractedRoot = path.join(extractRoot, spec.archiveRoot)
-    const extractedBinary = path.join(extractedRoot, spec.binaryRelativePath)
-    if (!fileExists(extractedBinary)) {
-      throw new Error(`Managed Node binary missing after extraction: ${extractedBinary}`)
+    const stats = statSync(binaryPath)
+    if (stats.isFile()) {
+      return binaryPath
     }
-
-    await rm(runtimeRoot, { recursive: true, force: true })
-    await rename(extractedRoot, runtimeRoot)
-
-    return path.join(runtimeRoot, spec.binaryRelativePath)
-  } finally {
-    await rm(tempRoot, { recursive: true, force: true }).catch(() => undefined)
-  }
-}
-
-export async function ensureManagedNodeBinary(): Promise<string> {
-  const binaryPath = getManagedNodeBinaryPath()
-  if (fileExists(binaryPath)) {
-    return binaryPath
-  }
-
-  const confirmed = await promptForManagedNodeDownload()
-  if (!confirmed) {
-    throw new Error("CodeNomad requires the managed Node.js runtime to start. Download was cancelled.")
-  }
-
-  const installedBinary = await installManagedNodeRuntime()
-  const installedStats = await stat(installedBinary)
-  if (!installedStats.isFile()) {
-    throw new Error(`Managed Node binary is invalid: ${installedBinary}`)
   }
 
-  return installedBinary
+  throw new Error(
+    `Bundled Node runtime is missing for ${process.platform}-${process.arch}. Rebuild the desktop bundle with packaged Node resources.`,
+  )
 }
diff --git a/packages/electron-app/electron/main/process-manager.ts b/packages/electron-app/electron/main/process-manager.ts
index 236d6fc5..a1cd35e0 100644
--- a/packages/electron-app/electron/main/process-manager.ts
+++ b/packages/electron-app/electron/main/process-manager.ts
@@ -212,11 +212,14 @@ export class CliProcessManager extends EventEmitter {
     this.child = child
     this.updateStatus({ pid: child.pid ?? undefined })
 
-    child.stdout?.on("data", (data: Buffer) => {
+    const stdout = child.stdout as NodeJS.ReadableStream | undefined
+    const stderr = child.stderr as NodeJS.ReadableStream | undefined
+
+    stdout?.on("data", (data: Buffer) => {
       this.handleStream(data.toString(), "stdout")
     })
 
-    child.stderr?.on("data", (data: Buffer) => {
+    stderr?.on("data", (data: Buffer) => {
       this.handleStream(data.toString(), "stderr")
     })
 
diff --git a/packages/electron-app/package.json b/packages/electron-app/package.json
index 79b96a53..9fca6f98 100644
--- a/packages/electron-app/package.json
+++ b/packages/electron-app/package.json
@@ -35,12 +35,9 @@
     "build:linux-arm64": "node scripts/build.js linux-arm64",
     "build:linux-rpm": "node scripts/build.js linux-rpm",
     "build:all": "node scripts/build.js all",
-    "prepackage:mac": "npm run prepare:resources",
-    "package:mac": "electron-builder --mac",
-    "prepackage:win": "npm run prepare:resources",
-    "package:win": "electron-builder --win",
-    "prepackage:linux": "npm run prepare:resources",
-    "package:linux": "electron-builder --linux"
+    "package:mac": "node scripts/build.js mac",
+    "package:win": "node scripts/build.js win",
+    "package:linux": "node scripts/build.js linux"
   },
   "dependencies": {
     "@neuralnomads/codenomad": "file:../server",
@@ -96,11 +93,7 @@
       "category": "public.app-category.developer-tools",
       "target": [
         {
-          "target": "zip",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
+          "target": "zip"
         }
       ],
       "artifactName": "CodeNomad-Electron-macos-${arch}-${version}.${ext}",
@@ -123,11 +116,7 @@
     "win": {
       "target": [
         {
-          "target": "zip",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
+          "target": "zip"
         }
       ],
       "artifactName": "CodeNomad-Electron-windows-${arch}-${version}.${ext}",
@@ -142,18 +131,10 @@
     "linux": {
       "target": [
         {
-          "target": "zip",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
+          "target": "zip"
         },
         {
-          "target": "AppImage",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
+          "target": "AppImage"
         }
       ],
       "artifactName": "CodeNomad-Electron-linux-${arch}-${version}.${ext}",
diff --git a/packages/electron-app/scripts/build.js b/packages/electron-app/scripts/build.js
index 636170d8..1621ce1a 100644
--- a/packages/electron-app/scripts/build.js
+++ b/packages/electron-app/scripts/build.js
@@ -16,39 +16,52 @@ const workspaceNodeModulesPath = join(workspaceRoot, "node_modules")
 
 const platforms = {
   mac: {
-    args: ["--mac", "--x64", "--arm64"],
+    jobs: [
+      { args: ["--mac", "--x64"], nodeTarget: "darwin-x64" },
+      { args: ["--mac", "--arm64"], nodeTarget: "darwin-arm64" },
+    ],
     description: "macOS (Intel & Apple Silicon)",
   },
   "mac-x64": {
-    args: ["--mac", "--x64"],
+    jobs: [{ args: ["--mac", "--x64"], nodeTarget: "darwin-x64" }],
     description: "macOS (Intel only)",
   },
   "mac-arm64": {
-    args: ["--mac", "--arm64"],
+    jobs: [{ args: ["--mac", "--arm64"], nodeTarget: "darwin-arm64" }],
     description: "macOS (Apple Silicon only)",
   },
   win: {
-    args: ["--win", "--x64"],
+    jobs: [{ args: ["--win", "--x64"], nodeTarget: "win32-x64" }],
     description: "Windows (x64)",
   },
   "win-arm64": {
-    args: ["--win", "--arm64"],
+    jobs: [{ args: ["--win", "--arm64"], nodeTarget: "win32-arm64" }],
     description: "Windows (ARM64)",
   },
   linux: {
-    args: ["--linux", "--x64"],
+    jobs: [{ args: ["--linux", "--x64"], nodeTarget: "linux-x64" }],
     description: "Linux (x64)",
   },
   "linux-arm64": {
-    args: ["--linux", "--arm64"],
+    jobs: [{ args: ["--linux", "--arm64"], nodeTarget: "linux-arm64" }],
     description: "Linux (ARM64)",
   },
   "linux-rpm": {
-    args: ["--linux", "rpm", "--x64", "--arm64"],
+    jobs: [
+      { args: ["--linux", "rpm", "--x64"], nodeTarget: "linux-x64" },
+      { args: ["--linux", "rpm", "--arm64"], nodeTarget: "linux-arm64" },
+    ],
     description: "Linux RPM packages (x64 & ARM64)",
   },
   all: {
-    args: ["--mac", "--win", "--linux", "--x64", "--arm64"],
+    jobs: [
+      { args: ["--mac", "--x64"], nodeTarget: "darwin-x64" },
+      { args: ["--mac", "--arm64"], nodeTarget: "darwin-arm64" },
+      { args: ["--win", "--x64"], nodeTarget: "win32-x64" },
+      { args: ["--win", "--arm64"], nodeTarget: "win32-arm64" },
+      { args: ["--linux", "--x64"], nodeTarget: "linux-x64" },
+      { args: ["--linux", "--arm64"], nodeTarget: "linux-arm64" },
+    ],
     description: "All platforms (macOS, Windows, Linux)",
   },
 }
@@ -111,14 +124,8 @@ async function build(platform) {
       env: { NODE_PATH: workspaceNodeModulesPath },
     })
 
-    console.log("\n📦 Step 1.5/3: Preparing packaged server resources...\n")
-    await run(process.execPath, [join(appDir, "scripts", "prepare-resources.js")], {
-      cwd: workspaceRoot,
-      env: { NODE_PATH: workspaceNodeModulesPath },
-    })
-
     console.log("\n📦 Step 2/3: Building Electron app...\n")
-    await run(npmCmd, ["run", "build"])
+    await run(npxCmd, ["electron-vite", "build"])
 
     console.log("\n📦 Step 3/3: Packaging binaries...\n")
     const distPath = join(appDir, "dist")
@@ -126,7 +133,18 @@ async function build(platform) {
       throw new Error("dist/ directory not found. Build failed.")
     }
 
-    await run(npxCmd, ["electron-builder", "--publish=never", ...config.args])
+    for (const job of config.jobs) {
+      console.log(`\n📦 Preparing resources for ${job.nodeTarget}...\n`)
+      await run(process.execPath, [join(appDir, "scripts", "prepare-resources.js")], {
+        cwd: workspaceRoot,
+        env: { NODE_PATH: workspaceNodeModulesPath, CODENOMAD_NODE_TARGET: job.nodeTarget },
+      })
+
+      console.log(`\n📦 Packaging ${job.nodeTarget}...\n`)
+      await run(npxCmd, ["electron-builder", "--publish=never", ...job.args], {
+        env: { CODENOMAD_NODE_TARGET: job.nodeTarget },
+      })
+    }
 
     console.log("\n✅ Build complete!")
     console.log(`📁 Binaries available in: ${join(appDir, "release")}\n`)
diff --git a/packages/electron-app/scripts/prepare-resources.js b/packages/electron-app/scripts/prepare-resources.js
index d44a4508..27cbd58b 100644
--- a/packages/electron-app/scripts/prepare-resources.js
+++ b/packages/electron-app/scripts/prepare-resources.js
@@ -3,9 +3,11 @@
 import fs from "fs"
 import path, { join } from "path"
 import { spawnSync } from "child_process"
+import { createRequire } from "module"
 import { fileURLToPath } from "url"
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url))
+const require = createRequire(import.meta.url)
 const appDir = join(__dirname, "..")
 const workspaceRoot = join(appDir, "..", "..")
 const serverRoot = join(appDir, "..", "server")
@@ -13,6 +15,7 @@ const resourcesRoot = join(appDir, "electron", "resources")
 const serverDest = join(resourcesRoot, "server")
 const npmExecPath = process.env.npm_execpath
 const npmNodeExecPath = process.env.npm_node_execpath
+const { prepareBundledNodeRuntime } = require(join(workspaceRoot, "scripts", "prepare-node-runtime.cjs"))
 
 const serverSources = ["dist", "public", "node_modules", "package.json"]
 const serverDepsMarker = join(serverRoot, "node_modules", "fastify", "package.json")
@@ -124,6 +127,7 @@ async function main() {
   ensureServerDependencies()
   copyServerArtifacts()
   stripNodeModuleBins()
+  await prepareBundledNodeRuntime({ resourcesRoot })
 }
 
 main().catch((error) => {
diff --git a/packages/tauri-app/Cargo.lock b/packages/tauri-app/Cargo.lock
index 372789d3..4024304e 100644
--- a/packages/tauri-app/Cargo.lock
+++ b/packages/tauri-app/Cargo.lock
@@ -47,15 +47,6 @@ version = "1.0.102"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7f202df86484c868dbad7eaa557ef785d5c66295e41b460ef922eca0723b842c"
 
-[[package]]
-name = "arbitrary"
-version = "1.4.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c3d036a3c4ab069c7b410a2ce876bd74808d2d0888a82667669f8e783a898bf1"
-dependencies = [
- "derive_arbitrary",
-]
-
 [[package]]
 name = "async-broadcast"
 version = "0.7.2"
@@ -511,7 +502,6 @@ dependencies = [
  "anyhow",
  "base64 0.22.1",
  "dirs 5.0.1",
- "flate2",
  "keepawake",
  "libc",
  "parking_lot",
@@ -521,8 +511,6 @@ dependencies = [
  "serde",
  "serde_json",
  "serde_yaml",
- "sha2",
- "tar",
  "tauri",
  "tauri-build",
  "tauri-plugin-dialog",
@@ -533,7 +521,6 @@ dependencies = [
  "webkit2gtk",
  "which",
  "windows-sys 0.59.0",
- "zip",
 ]
 
 [[package]]
@@ -783,17 +770,6 @@ dependencies = [
  "serde_core",
 ]
 
-[[package]]
-name = "derive_arbitrary"
-version = "1.4.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1e567bd82dcff979e4b03460c307b3cdc9e96fde3d73bed1496d2bc75d9dd62a"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn 2.0.117",
-]
-
 [[package]]
 name = "derive_builder"
 version = "0.20.2"
@@ -1143,17 +1119,6 @@ dependencies = [
  "rustc_version",
 ]
 
-[[package]]
-name = "filetime"
-version = "0.2.27"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f98844151eee8917efc50bd9e8318cb963ae8b297431495d3f758616ea5c57db"
-dependencies = [
- "cfg-if",
- "libc",
- "libredox",
-]
-
 [[package]]
 name = "find-msvc-tools"
 version = "0.1.9"
@@ -2264,10 +2229,7 @@ version = "0.1.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1744e39d1d6a9948f4f388969627434e31128196de472883b39f148769bfe30a"
 dependencies = [
- "bitflags 2.11.0",
  "libc",
- "plain",
- "redox_syscall 0.7.4",
 ]
 
 [[package]]
@@ -2748,7 +2710,7 @@ checksum = "2621685985a2ebf1c516881c026032ac7deafcda1a2c9b7850dc81e3dfcb64c1"
 dependencies = [
  "cfg-if",
  "libc",
- "redox_syscall 0.5.18",
+ "redox_syscall",
  "smallvec",
  "windows-link 0.2.1",
 ]
@@ -2981,12 +2943,6 @@ version = "0.3.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7edddbd0b52d732b21ad9a5fab5c704c14cd949e5e9a1ec5929a24fded1b904c"
 
-[[package]]
-name = "plain"
-version = "0.2.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b4596b6d070b27117e987119b4dac604f3c58cfb0b191112e24771b2faeac1a6"
-
 [[package]]
 name = "plist"
 version = "1.8.0"
@@ -3354,15 +3310,6 @@ dependencies = [
  "bitflags 2.11.0",
 ]
 
-[[package]]
-name = "redox_syscall"
-version = "0.7.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f450ad9c3b1da563fb6948a8e0fb0fb9269711c9c73d9ea1de5058c79c8d643a"
-dependencies = [
- "bitflags 2.11.0",
-]
-
 [[package]]
 name = "redox_users"
 version = "0.4.6"
@@ -4029,7 +3976,7 @@ dependencies = [
  "objc2-foundation",
  "objc2-quartz-core",
  "raw-window-handle",
- "redox_syscall 0.5.18",
+ "redox_syscall",
  "tracing",
  "wasm-bindgen",
  "web-sys",
@@ -4244,17 +4191,6 @@ dependencies = [
  "syn 2.0.117",
 ]
 
-[[package]]
-name = "tar"
-version = "0.4.45"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "22692a6476a21fa75fdfc11d452fda482af402c008cdbaf3476414e122040973"
-dependencies = [
- "filetime",
- "libc",
- "xattr",
-]
-
 [[package]]
 name = "target-lexicon"
 version = "0.12.16"
@@ -6216,16 +6152,6 @@ version = "0.13.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ea6fc2961e4ef194dcbfe56bb845534d0dc8098940c7e5c012a258bfec6701bd"
 
-[[package]]
-name = "xattr"
-version = "1.6.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "32e45ad4206f6d2479085147f02bc2ef834ac85886624a23575ae137c8aa8156"
-dependencies = [
- "libc",
- "rustix 1.1.4",
-]
-
 [[package]]
 name = "xkeysym"
 version = "0.2.1"
@@ -6396,41 +6322,12 @@ dependencies = [
  "syn 2.0.117",
 ]
 
-[[package]]
-name = "zip"
-version = "2.4.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fabe6324e908f85a1c52063ce7aa26b68dcb7eb6dbc83a2d148403c9bc3eba50"
-dependencies = [
- "arbitrary",
- "crc32fast",
- "crossbeam-utils",
- "displaydoc",
- "flate2",
- "indexmap 2.13.0",
- "memchr",
- "thiserror 2.0.18",
- "zopfli",
-]
-
 [[package]]
 name = "zmij"
 version = "1.0.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b8848ee67ecc8aedbaf3e4122217aff892639231befc6a1b58d29fff4c2cabaa"
 
-[[package]]
-name = "zopfli"
-version = "0.8.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f05cd8797d63865425ff89b5c4a48804f35ba0ce8d125800027ad6017d2b5249"
-dependencies = [
- "bumpalo",
- "crc32fast",
- "log",
- "simd-adler32",
-]
-
 [[package]]
 name = "zvariant"
 version = "5.10.0"
diff --git a/packages/tauri-app/scripts/prebuild.js b/packages/tauri-app/scripts/prebuild.js
index 8afe2b79..ba2a119c 100644
--- a/packages/tauri-app/scripts/prebuild.js
+++ b/packages/tauri-app/scripts/prebuild.js
@@ -11,6 +11,8 @@ const uiRoot = path.resolve(root, "..", "ui")
 const uiDist = path.resolve(uiRoot, "src", "renderer", "dist")
 const serverDest = path.resolve(root, "src-tauri", "resources", "server")
 const uiLoadingDest = path.resolve(root, "src-tauri", "resources", "ui-loading")
+const resourcesRoot = path.resolve(root, "src-tauri", "resources")
+const { prepareBundledNodeRuntime } = require(path.join(workspaceRoot, "scripts", "prepare-node-runtime.cjs"))
 
 const sources = ["dist", "public", "node_modules", "package.json"]
 
@@ -311,6 +313,7 @@ function copyUiLoadingAssets() {
   copyServerArtifacts()
   stripNodeModuleBins()
   copyUiLoadingAssets()
+  await prepareBundledNodeRuntime({ resourcesRoot })
 })().catch((err) => {
   console.error("[prebuild] failed:", err)
   process.exit(1)
diff --git a/packages/tauri-app/src-tauri/Cargo.toml b/packages/tauri-app/src-tauri/Cargo.toml
index 30d0b660..188c8723 100644
--- a/packages/tauri-app/src-tauri/Cargo.toml
+++ b/packages/tauri-app/src-tauri/Cargo.toml
@@ -27,10 +27,6 @@ tauri-plugin-opener = "2"
 tauri-plugin-global-shortcut = "2"
 url = "2"
 tauri-plugin-notification = "2"
-flate2 = "1"
-sha2 = "0.10"
-tar = "0.4"
-zip = { version = "2", default-features = false, features = ["deflate"] }
 
 [target.'cfg(windows)'.dependencies]
 windows-sys = { version = "0.59", features = ["Win32_Foundation", "Win32_Security_Cryptography", "Win32_UI_Shell", "Win32_Security", "Win32_System_JobObjects"] }
diff --git a/packages/tauri-app/src-tauri/build.rs b/packages/tauri-app/src-tauri/build.rs
index d860e1e6..6b9dd06a 100644
--- a/packages/tauri-app/src-tauri/build.rs
+++ b/packages/tauri-app/src-tauri/build.rs
@@ -1,3 +1,6 @@
 fn main() {
+    let manifest_dir = std::env::var("CARGO_MANIFEST_DIR").expect("CARGO_MANIFEST_DIR is set by Cargo");
+    let resources_node = std::path::Path::new(&manifest_dir).join("resources/node");
+    std::fs::create_dir_all(resources_node).expect("create resources/node placeholder");
     tauri_build::build()
 }
diff --git a/packages/tauri-app/src-tauri/src/cli_manager.rs b/packages/tauri-app/src-tauri/src/cli_manager.rs
index 50e9b0fe..d051821d 100644
--- a/packages/tauri-app/src-tauri/src/cli_manager.rs
+++ b/packages/tauri-app/src-tauri/src/cli_manager.rs
@@ -1,4 +1,4 @@
-use crate::managed_node::ensure_managed_node_binary;
+use crate::managed_node::resolve_bundled_node_binary;
 use dirs::home_dir;
 use parking_lot::Mutex;
 use regex::Regex;
@@ -1079,7 +1079,7 @@ impl CliEntry {
                 entry,
                 runner: Runner::Node,
                 runner_path: None,
-                node_binary: ensure_managed_node_binary(app)?,
+                node_binary: resolve_bundled_node_binary()?,
                 node_args: vec!["--experimental-specifier-resolution=node".to_string()],
             });
         }
diff --git a/packages/tauri-app/src-tauri/src/managed_node.rs b/packages/tauri-app/src-tauri/src/managed_node.rs
index 6329a813..091f8dd6 100644
--- a/packages/tauri-app/src-tauri/src/managed_node.rs
+++ b/packages/tauri-app/src-tauri/src/managed_node.rs
@@ -1,90 +1,49 @@
 use anyhow::anyhow;
-use dirs::home_dir;
-use flate2::read::GzDecoder;
-use reqwest::blocking::Client;
-use sha2::{Digest, Sha256};
-use std::fs::{self, File};
-use std::io::{self, Read};
-#[cfg(unix)]
-use std::os::unix::fs::PermissionsExt;
 use std::path::{Path, PathBuf};
-use std::thread;
-use std::time::{SystemTime, UNIX_EPOCH};
-use tar::Archive;
-use tauri::{AppHandle, Runtime};
-use tauri_plugin_dialog::{DialogExt, MessageDialogButtons, MessageDialogKind};
-use zip::ZipArchive;
 
-const MANAGED_NODE_VERSION: &str = "v22.22.2";
+pub fn resolve_bundled_node_binary() -> anyhow::Result<String> {
+    let relative_binary = binary_relative_path();
+    let platform_dir = platform_dir_name()?;
 
-struct NodeArtifactSpec {
-    archive_name: &'static str,
-    archive_root: &'static str,
-    binary_relative_path: &'static str,
-}
-
-pub fn ensure_managed_node_binary<R: Runtime>(app: &AppHandle<R>) -> anyhow::Result<String> {
-    let runtime_root = managed_node_root()?;
-    let spec = artifact_spec()?;
-    let binary_path = runtime_root.join(spec.binary_relative_path);
-    if binary_path.is_file() {
-        return Ok(binary_path.to_string_lossy().into_owned());
-    }
-
-    if !prompt_to_download(app) {
-        return Err(anyhow!(
-            "CodeNomad requires the managed Node.js runtime to start. Download was cancelled."
-        ));
+    for root in candidate_resource_roots() {
+        let binary_path = root.join("node").join(&platform_dir).join(relative_binary);
+        if binary_path.is_file() {
+            return Ok(binary_path.to_string_lossy().into_owned());
+        }
     }
 
-    install_managed_node_runtime(&runtime_root, &spec)?;
-
-    if !binary_path.is_file() {
-        return Err(anyhow!(
-            "Managed Node binary missing after installation: {}",
-            binary_path.display()
-        ));
-    }
+    Err(anyhow!(
+        "Bundled Node runtime is missing for {}. Rebuild the desktop bundle with packaged Node resources.",
+        platform_dir
+    ))
+}
 
-    #[cfg(unix)]
-    {
-        let mut permissions = fs::metadata(&binary_path)?.permissions();
-        permissions.set_mode(0o755);
-        fs::set_permissions(&binary_path, permissions)?;
+fn binary_relative_path() -> &'static Path {
+    if cfg!(target_os = "windows") {
+        Path::new("node.exe")
+    } else {
+        Path::new("bin/node")
     }
-
-    Ok(binary_path.to_string_lossy().into_owned())
 }
 
-fn prompt_to_download<R: Runtime>(app: &AppHandle<R>) -> bool {
-    let app = app.clone();
-    thread::spawn(move || {
-        app.dialog()
-            .message(format!(
-                "CodeNomad needs its managed Node.js runtime to start the server. Download {} for {}-{} into ~/.config/codenomad?",
-                MANAGED_NODE_VERSION,
-                platform_label(),
-                rust_arch_label().unwrap_or("unknown")
-            ))
-            .title("Download Node Runtime")
-            .buttons(MessageDialogButtons::OkCancelCustom(
-                "Download".into(),
-                "Cancel".into(),
-            ))
-            .kind(MessageDialogKind::Info)
-            .blocking_show()
-    })
-    .join()
-    .unwrap_or(false)
-}
+fn candidate_resource_roots() -> Vec<PathBuf> {
+    let mut candidates = Vec::new();
 
-fn managed_node_root() -> anyhow::Result<PathBuf> {
-    Ok(config_dir()?.join("node").join(MANAGED_NODE_VERSION).join(platform_dir_name()?))
-}
+    if let Ok(exe) = std::env::current_exe() {
+        if let Some(dir) = exe.parent() {
+            candidates.push(dir.join("resources"));
+            candidates.push(dir.join("../Resources"));
+            candidates.push(dir.join("../Resources/resources"));
+
+            let linux_resource_roots = [dir.join("../lib/CodeNomad"), dir.join("../lib/codenomad")];
+            for root in linux_resource_roots {
+                candidates.push(root.clone());
+                candidates.push(root.join("resources"));
+            }
+        }
+    }
 
-fn config_dir() -> anyhow::Result<PathBuf> {
-    let home = home_dir().ok_or_else(|| anyhow!("Unable to resolve the user home directory."))?;
-    Ok(home.join(".config").join("codenomad"))
+    candidates
 }
 
 fn platform_dir_name() -> anyhow::Result<String> {
@@ -103,197 +62,8 @@ fn rust_arch_label() -> anyhow::Result<&'static str> {
     match std::env::consts::ARCH {
         "x86_64" => Ok("x64"),
         "aarch64" => Ok("arm64"),
-        other => Err(anyhow!("Managed Node runtime is not supported on architecture '{other}'.")),
-    }
-}
-
-fn artifact_spec() -> anyhow::Result<NodeArtifactSpec> {
-    let arch = rust_arch_label()?;
-    match (std::env::consts::OS, arch) {
-        ("macos", "x64") => Ok(NodeArtifactSpec {
-            archive_name: "node-v22.22.2-darwin-x64.tar.gz",
-            archive_root: "node-v22.22.2-darwin-x64",
-            binary_relative_path: "bin/node",
-        }),
-        ("macos", "arm64") => Ok(NodeArtifactSpec {
-            archive_name: "node-v22.22.2-darwin-arm64.tar.gz",
-            archive_root: "node-v22.22.2-darwin-arm64",
-            binary_relative_path: "bin/node",
-        }),
-        ("linux", "x64") => Ok(NodeArtifactSpec {
-            archive_name: "node-v22.22.2-linux-x64.tar.gz",
-            archive_root: "node-v22.22.2-linux-x64",
-            binary_relative_path: "bin/node",
-        }),
-        ("linux", "arm64") => Ok(NodeArtifactSpec {
-            archive_name: "node-v22.22.2-linux-arm64.tar.gz",
-            archive_root: "node-v22.22.2-linux-arm64",
-            binary_relative_path: "bin/node",
-        }),
-        ("windows", "x64") => Ok(NodeArtifactSpec {
-            archive_name: "node-v22.22.2-win-x64.zip",
-            archive_root: "node-v22.22.2-win-x64",
-            binary_relative_path: "node.exe",
-        }),
-        ("windows", "arm64") => Ok(NodeArtifactSpec {
-            archive_name: "node-v22.22.2-win-arm64.zip",
-            archive_root: "node-v22.22.2-win-arm64",
-            binary_relative_path: "node.exe",
-        }),
-        (os, arch) => Err(anyhow!("Managed Node runtime is not supported on {os}-{arch}.")),
-    }
-}
-
-fn install_managed_node_runtime(runtime_root: &Path, spec: &NodeArtifactSpec) -> anyhow::Result<()> {
-    let runtime_parent = runtime_root
-        .parent()
-        .ok_or_else(|| anyhow!("Managed Node runtime path is invalid."))?;
-    fs::create_dir_all(runtime_parent)?;
-
-    let temp_root = runtime_parent.join(format!(
-        ".download-{}-{}",
-        std::process::id(),
-        SystemTime::now()
-            .duration_since(UNIX_EPOCH)
-            .map(|duration| duration.as_millis())
-            .unwrap_or(0)
-    ));
-
-    if temp_root.exists() {
-        fs::remove_dir_all(&temp_root).ok();
-    }
-    fs::create_dir_all(&temp_root)?;
-
-    let archive_path = temp_root.join(spec.archive_name);
-    let extract_root = temp_root.join("extract");
-    fs::create_dir_all(&extract_root)?;
-
-    let result = (|| {
-        let expected_sha = fetch_expected_sha(spec.archive_name)?;
-        download_file(spec.archive_name, &archive_path)?;
-
-        let actual_sha = sha256_file(&archive_path)?;
-        if actual_sha != expected_sha {
-            return Err(anyhow!("Checksum mismatch for {}.", spec.archive_name));
-        }
-
-        extract_archive(&archive_path, &extract_root)?;
-
-        let extracted_root = extract_root.join(spec.archive_root);
-        let extracted_binary = extracted_root.join(spec.binary_relative_path);
-        if !extracted_binary.is_file() {
-            return Err(anyhow!(
-                "Managed Node binary missing after extraction: {}",
-                extracted_binary.display()
-            ));
-        }
-
-        if runtime_root.exists() {
-            fs::remove_dir_all(runtime_root)?;
-        }
-        fs::rename(&extracted_root, runtime_root)?;
-        Ok(())
-    })();
-
-    fs::remove_dir_all(&temp_root).ok();
-    result
-}
-
-fn fetch_expected_sha(archive_name: &str) -> anyhow::Result<String> {
-    let url = format!("https://nodejs.org/dist/{MANAGED_NODE_VERSION}/SHASUMS256.txt");
-    let response = Client::builder()
-        .build()?
-        .get(url)
-        .send()?
-        .error_for_status()?;
-    let body = response.text()?;
-
-    for line in body.lines() {
-        let trimmed = line.trim();
-        if trimmed.is_empty() {
-            continue;
-        }
-        let mut parts = trimmed.split_whitespace();
-        let checksum = parts.next();
-        let file_name = parts.next();
-        if let (Some(checksum), Some(file_name)) = (checksum, file_name) {
-            if file_name == archive_name {
-                return Ok(checksum.to_string());
-            }
-        }
+        other => Err(anyhow!(
+            "Bundled Node runtime is not supported on architecture '{other}'."
+        )),
     }
-
-    Err(anyhow!("Unable to find checksum for {archive_name}."))
-}
-
-fn download_file(archive_name: &str, destination: &Path) -> anyhow::Result<()> {
-    let url = format!("https://nodejs.org/dist/{MANAGED_NODE_VERSION}/{archive_name}");
-    let mut response = Client::builder()
-        .build()?
-        .get(url)
-        .send()?
-        .error_for_status()?;
-    let mut output = File::create(destination)?;
-    io::copy(&mut response, &mut output)?;
-    Ok(())
-}
-
-fn sha256_file(path: &Path) -> anyhow::Result<String> {
-    let mut file = File::open(path)?;
-    let mut hasher = Sha256::new();
-    let mut buffer = [0_u8; 8192];
-
-    loop {
-        let read = file.read(&mut buffer)?;
-        if read == 0 {
-            break;
-        }
-        hasher.update(&buffer[..read]);
-    }
-
-    Ok(format!("{:x}", hasher.finalize()))
-}
-
-fn extract_archive(archive_path: &Path, destination: &Path) -> anyhow::Result<()> {
-    if archive_path.extension().and_then(|value| value.to_str()) == Some("zip") {
-        extract_zip(archive_path, destination)
-    } else {
-        extract_tar_gz(archive_path, destination)
-    }
-}
-
-fn extract_tar_gz(archive_path: &Path, destination: &Path) -> anyhow::Result<()> {
-    let file = File::open(archive_path)?;
-    let decoder = GzDecoder::new(file);
-    let mut archive = Archive::new(decoder);
-    archive.unpack(destination)?;
-    Ok(())
-}
-
-fn extract_zip(archive_path: &Path, destination: &Path) -> anyhow::Result<()> {
-    let file = File::open(archive_path)?;
-    let mut archive = ZipArchive::new(file)?;
-
-    for index in 0..archive.len() {
-        let mut entry = archive.by_index(index)?;
-        let relative_path = entry
-            .enclosed_name()
-            .map(|path| path.to_path_buf())
-            .ok_or_else(|| anyhow!("Zip archive contains an invalid path."))?;
-        let output_path = destination.join(relative_path);
-
-        if entry.is_dir() {
-            fs::create_dir_all(&output_path)?;
-            continue;
-        }
-
-        if let Some(parent) = output_path.parent() {
-            fs::create_dir_all(parent)?;
-        }
-
-        let mut output = File::create(&output_path)?;
-        io::copy(&mut entry, &mut output)?;
-    }
-
-    Ok(())
 }
diff --git a/packages/tauri-app/src-tauri/tauri.conf.json b/packages/tauri-app/src-tauri/tauri.conf.json
index f059b0f1..09b0da16 100644
--- a/packages/tauri-app/src-tauri/tauri.conf.json
+++ b/packages/tauri-app/src-tauri/tauri.conf.json
@@ -72,6 +72,7 @@
       }
     },
     "resources": [
+      "resources/node",
       "resources/server",
       "resources/ui-loading"
     ],
diff --git a/scripts/prepare-node-runtime.cjs b/scripts/prepare-node-runtime.cjs
new file mode 100644
index 00000000..4fcd1a09
--- /dev/null
+++ b/scripts/prepare-node-runtime.cjs
@@ -0,0 +1,200 @@
+const fs = require("fs")
+const https = require("https")
+const os = require("os")
+const path = require("path")
+const { spawnSync } = require("child_process")
+
+const MANAGED_NODE_VERSION = "v22.22.2"
+
+const ARTIFACTS = {
+  "darwin-x64": { archive: `node-${MANAGED_NODE_VERSION}-darwin-x64.tar.gz`, root: `node-${MANAGED_NODE_VERSION}-darwin-x64`, binary: path.join("bin", "node") },
+  "darwin-arm64": { archive: `node-${MANAGED_NODE_VERSION}-darwin-arm64.tar.gz`, root: `node-${MANAGED_NODE_VERSION}-darwin-arm64`, binary: path.join("bin", "node") },
+  "linux-x64": { archive: `node-${MANAGED_NODE_VERSION}-linux-x64.tar.gz`, root: `node-${MANAGED_NODE_VERSION}-linux-x64`, binary: path.join("bin", "node") },
+  "linux-arm64": { archive: `node-${MANAGED_NODE_VERSION}-linux-arm64.tar.gz`, root: `node-${MANAGED_NODE_VERSION}-linux-arm64`, binary: path.join("bin", "node") },
+  "win32-x64": { archive: `node-${MANAGED_NODE_VERSION}-win-x64.zip`, root: `node-${MANAGED_NODE_VERSION}-win-x64`, binary: "node.exe" },
+  "win32-arm64": { archive: `node-${MANAGED_NODE_VERSION}-win-arm64.zip`, root: `node-${MANAGED_NODE_VERSION}-win-arm64`, binary: "node.exe" },
+}
+
+function normalizeTarget(platform, arch) {
+  const normalizedPlatform = platform === "mac" || platform === "macos" ? "darwin" : platform === "win" || platform === "windows" ? "win32" : platform
+  const normalizedArch = arch === "x86_64" ? "x64" : arch === "aarch64" ? "arm64" : arch
+  return `${normalizedPlatform}-${normalizedArch}`
+}
+
+function currentTarget() {
+  return normalizeTarget(process.platform, process.arch)
+}
+
+function targetFromTriple(triple) {
+  if (!triple) return null
+  const value = String(triple).toLowerCase()
+  const arch = value.startsWith("x86_64") ? "x64" : value.startsWith("aarch64") ? "arm64" : null
+  if (!arch) return null
+  if (value.includes("apple-darwin")) return `darwin-${arch}`
+  if (value.includes("pc-windows") || value.includes("windows-msvc") || value.includes("windows-gnu")) return `win32-${arch}`
+  if (value.includes("unknown-linux") || value.includes("linux-gnu") || value.includes("linux-musl")) return `linux-${arch}`
+  return null
+}
+
+function resolveTarget(explicitTarget) {
+  return (
+    explicitTarget ||
+    process.env.CODENOMAD_NODE_TARGET ||
+    targetFromTriple(process.env.TAURI_ENV_TARGET_TRIPLE) ||
+    targetFromTriple(process.env.TAURI_TARGET_TRIPLE) ||
+    targetFromTriple(process.env.CARGO_BUILD_TARGET) ||
+    targetFromTriple(process.env.TARGET) ||
+    targetFromTriple(process.env.npm_config_target) ||
+    currentTarget()
+  )
+}
+
+function request(url) {
+  return new Promise((resolve, reject) => {
+    const run = (target) => {
+      https
+        .get(target, (response) => {
+          const status = response.statusCode || 0
+          const redirect = response.headers.location
+          if (status >= 300 && status < 400 && redirect) {
+            response.resume()
+            run(new URL(redirect, target).toString())
+            return
+          }
+          if (status < 200 || status >= 300) {
+            response.resume()
+            reject(new Error(`Request failed for ${target} with status ${status}`))
+            return
+          }
+          const chunks = []
+          response.on("data", (chunk) => chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk)))
+          response.on("end", () => resolve(Buffer.concat(chunks)))
+          response.on("error", reject)
+        })
+        .on("error", reject)
+    }
+    run(url)
+  })
+}
+
+async function downloadFile(url, destination) {
+  const body = await request(url)
+  fs.writeFileSync(destination, body)
+}
+
+async function fetchExpectedSha(archiveName) {
+  const checksums = (await request(`https://nodejs.org/dist/${MANAGED_NODE_VERSION}/SHASUMS256.txt`)).toString("utf8")
+  for (const line of checksums.split(/\r?\n/)) {
+    const [checksum, filename] = line.trim().split(/\s+/, 2)
+    if (filename === archiveName) return checksum
+  }
+  throw new Error(`Unable to find checksum for ${archiveName}`)
+}
+
+function sha256File(filePath) {
+  const crypto = require("crypto")
+  const hash = crypto.createHash("sha256")
+  hash.update(fs.readFileSync(filePath))
+  return hash.digest("hex")
+}
+
+function find7zip() {
+  try {
+    return require("7zip-bin").path7za
+  } catch {
+    return process.platform === "win32" ? "7z.exe" : "7z"
+  }
+}
+
+function run(command, args) {
+  const result = spawnSync(command, args, { stdio: "inherit" })
+  if (result.status !== 0) {
+    if (result.error) throw result.error
+    throw new Error(`${command} ${args.join(" ")} exited with code ${result.status || 1}`)
+  }
+}
+
+function extractArchive(archivePath, destination) {
+  fs.mkdirSync(destination, { recursive: true })
+  if (archivePath.endsWith(".zip")) {
+    const sevenZip = find7zip()
+    if (fs.existsSync(sevenZip)) {
+      fs.chmodSync(sevenZip, 0o755)
+    }
+    run(sevenZip, ["x", archivePath, `-o${destination}`, "-y"])
+    return
+  }
+  run("tar", ["-xzf", archivePath, "-C", destination])
+}
+
+function pruneForRuntime(sourceRoot, destinationRoot) {
+  fs.cpSync(sourceRoot, destinationRoot, { recursive: true, dereference: true })
+  for (const name of ["CHANGELOG.md", "LICENSE", "README.md", "corepack", "npm", "npx"]) {
+    fs.rmSync(path.join(destinationRoot, "bin", name), { recursive: true, force: true })
+  }
+  fs.rmSync(path.join(destinationRoot, "lib", "node_modules", "npm"), { recursive: true, force: true })
+  fs.rmSync(path.join(destinationRoot, "lib", "node_modules", "corepack"), { recursive: true, force: true })
+  fs.rmSync(path.join(destinationRoot, "node_modules", "npm"), { recursive: true, force: true })
+  fs.rmSync(path.join(destinationRoot, "node_modules", "corepack"), { recursive: true, force: true })
+}
+
+async function prepareBundledNodeRuntime(options) {
+  const target = resolveTarget(options && options.target)
+  const spec = ARTIFACTS[target]
+  if (!spec) {
+    throw new Error(`Bundled Node runtime is not supported for target ${target}`)
+  }
+
+  const resourcesRoot = options.resourcesRoot
+  if (!resourcesRoot) {
+    throw new Error("resourcesRoot is required")
+  }
+
+  const nodeRoot = path.join(resourcesRoot, "node")
+  const runtimeRoot = path.join(nodeRoot, target)
+  const runtimeBinary = path.join(runtimeRoot, spec.binary)
+  const tempRoot = fs.mkdtempSync(path.join(os.tmpdir(), `codenomad-node-${target}-`))
+  const archivePath = path.join(tempRoot, spec.archive)
+  const extractRoot = path.join(tempRoot, "extract")
+
+  try {
+    fs.rmSync(nodeRoot, { recursive: true, force: true })
+    fs.mkdirSync(nodeRoot, { recursive: true })
+
+    console.log(`[node-runtime] downloading ${spec.archive}`)
+    const expectedSha = await fetchExpectedSha(spec.archive)
+    await downloadFile(`https://nodejs.org/dist/${MANAGED_NODE_VERSION}/${spec.archive}`, archivePath)
+    const actualSha = sha256File(archivePath)
+    if (actualSha !== expectedSha) {
+      throw new Error(`Checksum mismatch for ${spec.archive}`)
+    }
+
+    extractArchive(archivePath, extractRoot)
+    const extractedRoot = path.join(extractRoot, spec.root)
+    if (!fs.existsSync(path.join(extractedRoot, spec.binary))) {
+      throw new Error(`Node binary missing after extraction: ${path.join(extractedRoot, spec.binary)}`)
+    }
+
+    pruneForRuntime(extractedRoot, runtimeRoot)
+    if (!target.startsWith("win32-")) {
+      fs.chmodSync(runtimeBinary, 0o755)
+    }
+
+    if (target === currentTarget()) {
+      run(runtimeBinary, ["--version"])
+    } else {
+      console.log(`[node-runtime] skipped ${target} execution check on ${currentTarget()} build host`)
+    }
+    console.log(`[node-runtime] prepared ${target} at ${runtimeRoot}`)
+    return { target, runtimeRoot, runtimeBinary }
+  } finally {
+    fs.rmSync(tempRoot, { recursive: true, force: true })
+  }
+}
+
+module.exports = {
+  MANAGED_NODE_VERSION,
+  prepareBundledNodeRuntime,
+  normalizeTarget,
+  currentTarget,
+}
diff --git a/scripts/verify-bundled-node.cjs b/scripts/verify-bundled-node.cjs
new file mode 100644
index 00000000..dfa219ec
--- /dev/null
+++ b/scripts/verify-bundled-node.cjs
@@ -0,0 +1,31 @@
+const fs = require("fs")
+const path = require("path")
+
+const targets = process.argv.slice(2)
+
+if (targets.length === 0) {
+  console.error("Usage: node scripts/verify-bundled-node.cjs <root>[@<target>] [...]")
+  process.exit(1)
+}
+
+function expectedBinary(target) {
+  return target.startsWith("win32-") ? "node.exe" : path.join("bin", "node")
+}
+
+function verify(spec) {
+  const [root, target] = spec.split("@")
+  if (!root || !target) {
+    throw new Error(`Invalid verification spec: ${spec}`)
+  }
+
+  const binary = path.join(root, "node", target, expectedBinary(target))
+  if (!fs.existsSync(binary) || !fs.statSync(binary).isFile()) {
+    throw new Error(`Missing bundled Node binary: ${binary}`)
+  }
+
+  console.log(`[verify-bundled-node] ${binary}`)
+}
+
+for (const target of targets) {
+  verify(target)
+}

From ecfbc9e5d153afe43f3f5cfdc3a8a8ea65fc1cef Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Mon, 4 May 2026 21:44:53 +0100
Subject: [PATCH 05/39] fix(electron): isolate packaged session storage

---
 packages/electron-app/electron/main/main.ts | 48 ++++++++++++++++++++-
 1 file changed, 46 insertions(+), 2 deletions(-)

diff --git a/packages/electron-app/electron/main/main.ts b/packages/electron-app/electron/main/main.ts
index 09263b6a..4b31cc9a 100644
--- a/packages/electron-app/electron/main/main.ts
+++ b/packages/electron-app/electron/main/main.ts
@@ -1,7 +1,7 @@
 import { app, BrowserView, BrowserWindow, nativeImage, session, shell } from "electron"
 import http from "node:http"
 import https from "node:https"
-import { existsSync, mkdirSync } from "fs"
+import { existsSync, mkdirSync, rmSync } from "fs"
 import { dirname, join } from "path"
 import { fileURLToPath } from "url"
 import { createApplicationMenu } from "./menu"
@@ -39,6 +39,49 @@ function configureDevStoragePaths() {
 
 configureDevStoragePaths()
 
+function configurePackagedStoragePaths() {
+  if (!app.isPackaged) {
+    return
+  }
+
+  try {
+    const sessionDataPath = join(app.getPath("userData"), "session-data-v2")
+    mkdirSync(sessionDataPath, { recursive: true })
+    app.setPath("sessionData", sessionDataPath)
+  } catch (error) {
+    console.warn("[electron-startup] failed to configure packaged session data path", error)
+  }
+}
+
+configurePackagedStoragePaths()
+
+function cleanupPackagedChromiumStorage() {
+  if (!app.isPackaged) {
+    return
+  }
+
+  const roots = [app.getPath("sessionData"), app.getPath("userData"), join(app.getPath("userData"), "session-data")]
+  const names = ["Service Worker", "QuotaManager", "QuotaManager-journal"]
+
+  for (const root of roots) {
+    for (const name of names) {
+      const candidate = join(root, name)
+      if (!existsSync(candidate)) {
+        continue
+      }
+
+      try {
+        rmSync(candidate, { recursive: true, force: true })
+        console.info("[electron-startup] removed stale Chromium storage", candidate)
+      } catch (error) {
+        console.warn("[electron-startup] failed to remove stale Chromium storage", candidate, error)
+      }
+    }
+  }
+}
+
+cleanupPackagedChromiumStorage()
+
 const cliManager = new CliProcessManager()
 let mainWindow: BrowserWindow | null = null
 let currentCliUrl: string | null = null
@@ -129,7 +172,8 @@ function isIgnorableNavigationError(error: unknown): boolean {
   }
 
   const code = "code" in error ? String((error as { code?: unknown }).code ?? "") : ""
-  return code === "ERR_ABORTED" || code === "ERR_FAILED"
+  const message = "message" in error ? String((error as { message?: unknown }).message ?? "") : ""
+  return code === "ERR_ABORTED" || code === "ERR_FAILED" || message.includes("ERR_ABORTED") || message.includes("ERR_FAILED")
 }
 
 function getAllowedRendererOrigins(window?: BrowserWindow | null): string[] {

From 0f7267743e383925e49bb91ffca38565516b1c8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Thu, 7 May 2026 10:26:33 +0200
Subject: [PATCH 06/39] fix(tauri): refresh bundled resources on rebuild (#394)

## Summary
- Re-run the Tauri build script when bundled desktop resources change.
- Clear stale `target/<profile>/resources` output before Tauri recopies
resources.
- Keeps raw Tauri release builds from launching stale server/UI
resources after `bundle:server`.

## Verification
- `npm run bundle:server --workspace @codenomad/tauri-app && cargo build
--release --manifest-path "packages/tauri-app/src-tauri/Cargo.toml"`
- Verified `target/release/resources/server/package.json` and
`server/public/ui-version.json` report `0.15.0`.
- Verified `target/release/resources/node/win32-x64/node.exe` is
present.
- Performed incremental add/update/delete checks under
`src-tauri/resources` and confirmed `target/release/resources` resyncs
without manual clean.
---
 packages/tauri-app/src-tauri/build.rs | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/tauri-app/src-tauri/build.rs b/packages/tauri-app/src-tauri/build.rs
index 6b9dd06a..8c4baa63 100644
--- a/packages/tauri-app/src-tauri/build.rs
+++ b/packages/tauri-app/src-tauri/build.rs
@@ -1,6 +1,25 @@
 fn main() {
     let manifest_dir = std::env::var("CARGO_MANIFEST_DIR").expect("CARGO_MANIFEST_DIR is set by Cargo");
-    let resources_node = std::path::Path::new(&manifest_dir).join("resources/node");
-    std::fs::create_dir_all(resources_node).expect("create resources/node placeholder");
+    let out_dir = std::env::var("OUT_DIR").expect("OUT_DIR is set by Cargo");
+    let manifest_path = std::path::Path::new(&manifest_dir);
+    let bundled_resources = std::path::Path::new(&out_dir)
+        .ancestors()
+        .nth(3)
+        .expect("OUT_DIR points inside target/<profile>/build/<pkg>/out")
+        .join("resources");
+    let resources_root = manifest_path.join("resources");
+    let resources_node = resources_root.join("node");
+    std::fs::create_dir_all(&resources_node).expect("create resources/node placeholder");
+
+    // Tauri copies resources additively, so clear the old output first.
+    if bundled_resources.exists() {
+        std::fs::remove_dir_all(&bundled_resources).expect("clean bundled resources output");
+    }
+
+    println!("cargo:rerun-if-changed={}", manifest_path.join("tauri.conf.json").display());
+    println!("cargo:rerun-if-changed={}", resources_root.join("node").display());
+    println!("cargo:rerun-if-changed={}", resources_root.join("server").display());
+    println!("cargo:rerun-if-changed={}", resources_root.join("ui-loading").display());
+
     tauri_build::build()
 }

From dd72c8a8d6121902749cbe7b5c31d4ddddb3ca94 Mon Sep 17 00:00:00 2001
From: Yao Jianxuan <1378319314@qq.com>
Date: Thu, 7 May 2026 17:25:43 +0800
Subject: [PATCH 07/39] Fix(ui): Support Markdown Math Rendering (#381)

Add `KaTeX` extension for math formula rendering

It solves the issue #379 .

Now the interface acts like this when processing formulas:

`$\mathbb{R}$`:
<img width="1016" height="83" alt="image"
src="https://github.com/user-attachments/assets/7a7534c0-3128-4a98-a01f-336db42e0f26"
/>

`$$ \mathbb{R} $$`:
<img width="1016" height="89" alt="image"
src="https://github.com/user-attachments/assets/9da7d2e4-06cc-41e8-b598-eab8b3be7677"
/>

```markdown
$$
\mathbb{R}
$$
```
:
<img width="1016" height="88" alt="image"
src="https://github.com/user-attachments/assets/a1be91e3-7ff1-4cf9-8982-c2657348317d"
/>


Closes #379

---------

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 package-lock.json                       | 37 +++++++++++++++++++++++++
 packages/ui/package.json                |  2 ++
 packages/ui/src/components/markdown.tsx | 16 +++++++++--
 packages/ui/src/lib/markdown.ts         | 12 ++++++++
 packages/ui/src/styles/markdown.css     | 26 +++++++++++++++--
 5 files changed, 89 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4bbddcbb..91aaed6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8306,6 +8306,31 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/katex": {
+      "version": "0.16.45",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.45.tgz",
+      "integrity": "sha512-pQpZbdBu7wCTmQUh7ufPmLr0pFoObnGUoL/yhtwJDgmmQpbkg/0HSVti25Fu4rmd1oCR6NGWe9vqTWuWv3GcNA==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "dev": true,
@@ -8514,6 +8539,16 @@
         "node": ">= 18"
       }
     },
+    "node_modules/marked-katex-extension": {
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/marked-katex-extension/-/marked-katex-extension-5.1.8.tgz",
+      "integrity": "sha512-TsV9OCHHDjVBf4IH0RSjLs4Eqsjj8HGfmVCKlimrS391EtBBxzXj2gBYdF9tY7f7oXu9tb1kHV86ExJsG3iMhw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "katex": ">=0.16 <0.17",
+        "marked": ">=4 <19"
+      }
+    },
     "node_modules/matcher": {
       "version": "3.0.0",
       "dev": true,
@@ -13309,8 +13344,10 @@
         "ansi-sequence-parser": "^1.1.3",
         "debug": "^4.4.3",
         "github-markdown-css": "^5.8.1",
+        "katex": "^0.16.45",
         "lucide-solid": "^0.300.0",
         "marked": "^12.0.0",
+        "marked-katex-extension": "^5.1.8",
         "monaco-editor": "^0.52.2",
         "qrcode": "^1.5.3",
         "shiki": "^3.13.0",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index b96c7e01..69233307 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -25,8 +25,10 @@
     "ansi-sequence-parser": "^1.1.3",
     "debug": "^4.4.3",
     "github-markdown-css": "^5.8.1",
+    "katex": "^0.16.45",
     "lucide-solid": "^0.300.0",
     "marked": "^12.0.0",
+    "marked-katex-extension": "^5.1.8",
     "monaco-editor": "^0.52.2",
     "qrcode": "^1.5.3",
     "shiki": "^3.13.0",
diff --git a/packages/ui/src/components/markdown.tsx b/packages/ui/src/components/markdown.tsx
index 56889ca3..4ec0c5d7 100644
--- a/packages/ui/src/components/markdown.tsx
+++ b/packages/ui/src/components/markdown.tsx
@@ -9,6 +9,18 @@ const log = getLogger("session")
 
 type MarkdownModule = typeof import("../lib/markdown")
 
+interface ResolvedMarkdownSnapshot {
+  part: TextPart
+  text: string
+  themeKey: string
+  highlightEnabled: boolean
+  escapeRawHtml: boolean
+  partId: string | undefined
+  cacheId: string
+  version: string
+  requestKey: string
+}
+
 let markdownModulePromise: Promise<MarkdownModule> | null = null
 
 function loadMarkdownModule(): Promise<MarkdownModule> {
@@ -124,7 +136,7 @@ export function Markdown(props: MarkdownProps) {
   })
 
   const commitCacheEntry = (
-    snapshot: ReturnType<typeof resolved>,
+    snapshot: ResolvedMarkdownSnapshot,
     renderedHtml: string,
     options?: { cache?: boolean },
   ) => {
@@ -141,7 +153,7 @@ export function Markdown(props: MarkdownProps) {
     notifyRendered()
   }
 
-  const renderSnapshot = async (snapshot: ReturnType<typeof resolved>) => {
+  const renderSnapshot = async (snapshot: ResolvedMarkdownSnapshot): Promise<void> => {
     const markdown = await loadMarkdownModule()
     markdown.setMarkdownTheme(snapshot.themeKey === "dark")
     const rendered = await markdown.renderMarkdown(snapshot.text, {
diff --git a/packages/ui/src/lib/markdown.ts b/packages/ui/src/lib/markdown.ts
index 86bc09e3..70bec0a5 100644
--- a/packages/ui/src/lib/markdown.ts
+++ b/packages/ui/src/lib/markdown.ts
@@ -1,4 +1,5 @@
 import { marked } from "marked"
+import markedKatex from "marked-katex-extension"
 import { getLogger } from "./logger"
 import { tGlobal } from "./i18n"
 import type { Highlighter } from "shiki/bundle/full"
@@ -16,6 +17,11 @@ let rendererSetup = false
 let shikiModulePromise: Promise<typeof import("shiki/bundle/full")> | null = null
 let bundledLanguagesCache: typeof import("shiki/bundle/full")["bundledLanguages"] | null = null
 
+// Math rendering is handled by marked-katex-extension (registered in setupRenderer).
+// Delimiter rules, boundaries, CJK punctuation, and block/inline rendering are
+// all delegated to the maintained extension so we avoid ~200 lines of fragile
+// hand-rolled tokenizer code.
+
 const ALLOWED_RAW_HTML_TAGS = new Set([
   "a",
   "blockquote",
@@ -374,6 +380,12 @@ function setupRenderer(isDark: boolean) {
     gfm: true,
   })
 
+  marked.use(markedKatex({
+    throwOnError: false,
+    nonStandard: true,
+    strict: "ignore",
+  }))
+
   const renderer = new marked.Renderer()
 
   renderer.code = (code: string, lang: string | undefined) => {
diff --git a/packages/ui/src/styles/markdown.css b/packages/ui/src/styles/markdown.css
index bbb4d70f..752182c1 100644
--- a/packages/ui/src/styles/markdown.css
+++ b/packages/ui/src/styles/markdown.css
@@ -1,4 +1,23 @@
-@import "github-markdown-css/github-markdown-light.css" layer(github-markdown-base);
+@import "github-markdown-css/github-markdown-light.css"
+  layer(github-markdown-base);
+@import "katex/dist/katex.min.css" layer(katex-base);
+
+@layer katex-overrides {
+  .markdown-body .katex-display {
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 0.25rem 0;
+  }
+
+  .markdown-body .katex {
+    font-size: 1.05em;
+  }
+
+  .markdown-body .katex .frac-line {
+    border-bottom-width: 0.1em !important;
+    border-color: currentColor !important;
+  }
+}
 
 @layer components {
   .markdown-body {
@@ -239,7 +258,10 @@
     border-radius: 4px;
     cursor: pointer;
     color: var(--text-secondary);
-    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
+    transition:
+      background-color 150ms ease,
+      color 150ms ease,
+      border-color 150ms ease;
     margin-inline-start: auto;
     font-size: var(--font-size-sm);
   }

From 3be5af47694d1ce0c013385dd7be20a99379bb1a Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Thu, 7 May 2026 13:52:12 +0100
Subject: [PATCH 08/39] feat(ui): allow tab reordering (#399)

---
 package-lock.json                            |  14 +++
 packages/ui/package.json                     |   1 +
 packages/ui/src/App.tsx                      |   2 +
 packages/ui/src/components/instance-tab.tsx  |   1 +
 packages/ui/src/components/instance-tabs.tsx | 116 +++++++++++++++----
 packages/ui/src/stores/app-tabs.ts           |  16 +++
 packages/ui/src/styles/panels/tabs.css       |  33 ++++++
 7 files changed, 163 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 91aaed6f..83d6dd28 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4057,6 +4057,19 @@
         "@tauri-apps/api": "^2.8.0"
       }
     },
+    "node_modules/@thisbeyond/solid-dnd": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@thisbeyond/solid-dnd/-/solid-dnd-0.7.5.tgz",
+      "integrity": "sha512-DfI5ff+yYGpK9M21LhYwIPlbP2msKxN2ARwuu6GF8tT1GgNVDTI8VCQvH4TJFoVApP9d44izmAcTh/iTCH2UUw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0",
+        "pnpm": ">=8.6.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.5"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "dev": true,
@@ -13341,6 +13354,7 @@
         "@tauri-apps/plugin-dialog": "^2.6.0",
         "@tauri-apps/plugin-notification": "^2.3.3",
         "@tauri-apps/plugin-opener": "^2.5.3",
+        "@thisbeyond/solid-dnd": "^0.7.5",
         "ansi-sequence-parser": "^1.1.3",
         "debug": "^4.4.3",
         "github-markdown-css": "^5.8.1",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 69233307..c87a652a 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -22,6 +22,7 @@
     "@tauri-apps/plugin-dialog": "^2.6.0",
     "@tauri-apps/plugin-notification": "^2.3.3",
     "@tauri-apps/plugin-opener": "^2.5.3",
+    "@thisbeyond/solid-dnd": "^0.7.5",
     "ansi-sequence-parser": "^1.1.3",
     "debug": "^4.4.3",
     "github-markdown-css": "^5.8.1",
diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index a93c5e6c..774d16b8 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -64,6 +64,7 @@ import {
   ensureActiveAppTab,
   getAdjacentAppTabId,
   getAppTabById,
+  moveAppTab,
   selectAppTab,
   selectInstanceTab,
   selectSidecarTab,
@@ -541,6 +542,7 @@ const App: Component = () => {
                   onSelect={selectAppTab}
                   onClose={(tabId) => void handleCloseAppTab(tabId)}
                   onNew={handleNewInstanceRequest}
+                  onMoveTab={moveAppTab}
                 />
               </Show>
 
diff --git a/packages/ui/src/components/instance-tab.tsx b/packages/ui/src/components/instance-tab.tsx
index a2c80299..c2cd3747 100644
--- a/packages/ui/src/components/instance-tab.tsx
+++ b/packages/ui/src/components/instance-tab.tsx
@@ -81,6 +81,7 @@ const InstanceTab: Component<InstanceTabProps> = (props) => {
             e.stopPropagation()
             props.onClose()
           }}
+          onPointerDown={(e) => e.stopPropagation()}
           role="button"
           tabIndex={0}
           aria-label={t("instanceTab.actions.close.ariaLabel")}
diff --git a/packages/ui/src/components/instance-tabs.tsx b/packages/ui/src/components/instance-tabs.tsx
index 884f8fb5..44528cc8 100644
--- a/packages/ui/src/components/instance-tabs.tsx
+++ b/packages/ui/src/components/instance-tabs.tsx
@@ -1,5 +1,13 @@
 import { Component, For, Show, createMemo } from "solid-js"
 import { Dynamic } from "solid-js/web"
+import {
+  DragDropProvider,
+  DragDropSensors,
+  SortableProvider,
+  closestCenter,
+  createSortable,
+  type DragEvent as SolidDndDragEvent,
+} from "@thisbeyond/solid-dnd"
 import InstanceTab from "./instance-tab"
 import KeyboardHint from "./keyboard-hint"
 import { Plus, MonitorUp, Bell, BellOff, Settings } from "lucide-solid"
@@ -17,11 +25,69 @@ interface InstanceTabsProps {
   onSelect: (tabId: string) => void
   onClose: (tabId: string) => void
   onNew: () => void
+  onMoveTab: (tabId: string, targetTabId: string, placement: "before" | "after") => void
+}
+
+interface SortableAppTabProps {
+  tab: AppTabRecord
+  activeTabId: string | null
+  onSelect: (tabId: string) => void
+  onClose: (tabId: string) => void
+}
+
+const SortableAppTab: Component<SortableAppTabProps> = (props) => {
+  const sortable = createSortable(props.tab.id)
+
+  return (
+    <div
+      ref={sortable}
+      class={`tab-draggable ${sortable.isActiveDraggable ? "tab-draggable-active" : ""}`}
+      data-app-tab-id={props.tab.id}
+    >
+      {props.tab.kind === "instance" ? (
+        <InstanceTab
+          instance={props.tab.instance}
+          active={props.tab.id === props.activeTabId}
+          onSelect={() => props.onSelect(props.tab.id)}
+          onClose={() => props.onClose(props.tab.id)}
+        />
+      ) : (
+        <div
+          class={`tab-pill ${props.tab.id === props.activeTabId ? "tab-pill-active" : ""}`}
+          role="tab"
+          tabIndex={0}
+          aria-selected={props.tab.id === props.activeTabId}
+          onClick={() => props.onSelect(props.tab.id)}
+          onKeyDown={(event) => {
+            if (event.key !== "Enter" && event.key !== " ") return
+            event.preventDefault()
+            props.onSelect(props.tab.id)
+          }}
+        >
+          <span class="tab-pill-button">
+            <span class="truncate max-w-[180px]">{props.tab.sidecarTab.name}</span>
+          </span>
+          <button
+            class="tab-pill-close"
+            onPointerDown={(event) => event.stopPropagation()}
+            onClick={(event) => {
+              event.stopPropagation()
+              props.onClose(props.tab.id)
+            }}
+            aria-label={props.tab.sidecarTab.name}
+          >
+            ×
+          </button>
+        </div>
+      )}
+    </div>
+  )
 }
 
 const InstanceTabs: Component<InstanceTabsProps> = (props) => {
   const { t } = useI18n()
   const { preferences } = useConfig()
+  const tabIds = createMemo(() => props.tabs.map((tab) => tab.id))
 
   const notificationsSupported = createMemo(() => isOsNotificationSupportedSync())
   const notificationsEnabled = createMemo(() => Boolean(preferences().osNotificationsEnabled))
@@ -37,32 +103,42 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
       : t("settings.notifications.status.disabled")
   })
 
+  const handleDragEnd = ({ draggable, droppable }: SolidDndDragEvent) => {
+    if (!droppable) return
+
+    const tabId = String(draggable.id)
+    const targetTabId = String(droppable.id)
+    if (tabId === targetTabId) return
+
+    const fromIndex = props.tabs.findIndex((tab) => tab.id === tabId)
+    const toIndex = props.tabs.findIndex((tab) => tab.id === targetTabId)
+    if (fromIndex < 0 || toIndex < 0) return
+
+    props.onMoveTab(tabId, targetTabId, fromIndex < toIndex ? "after" : "before")
+  }
+
   return (
     <div class="tab-bar tab-bar-instance">
       <div class="tab-container" role="tablist">
         <div class="tab-scroll">
           <div class="tab-strip">
             <div class="tab-strip-tabs">
-              <For each={props.tabs}>
-                {(tab) =>
-                  tab.kind === "instance" ? (
-                    <InstanceTab
-                      instance={tab.instance}
-                      active={tab.id === props.activeTabId}
-                      onSelect={() => props.onSelect(tab.id)}
-                      onClose={() => props.onClose(tab.id)}
-                    />
-                  ) : (
-                    <div class={`tab-pill ${tab.id === props.activeTabId ? "tab-pill-active" : ""}`}>
-                      <button class="tab-pill-button" onClick={() => props.onSelect(tab.id)}>
-                        <span class="truncate max-w-[180px]">{tab.sidecarTab.name}</span>
-                      </button>
-                      <button class="tab-pill-close" onClick={() => props.onClose(tab.id)} aria-label={tab.sidecarTab.name}>
-                        ×
-                      </button>
-                    </div>
-                  )}
-              </For>
+              <DragDropProvider collisionDetector={closestCenter} onDragEnd={handleDragEnd}>
+                <DragDropSensors>
+                  <SortableProvider ids={tabIds()}>
+                    <For each={props.tabs}>
+                      {(tab) => (
+                        <SortableAppTab
+                          tab={tab}
+                          activeTabId={props.activeTabId}
+                          onSelect={props.onSelect}
+                          onClose={props.onClose}
+                        />
+                      )}
+                    </For>
+                  </SortableProvider>
+                </DragDropSensors>
+              </DragDropProvider>
               <button
                 class="new-tab-button"
                 onClick={props.onNew}
diff --git a/packages/ui/src/stores/app-tabs.ts b/packages/ui/src/stores/app-tabs.ts
index 3ead0ccf..3b76627b 100644
--- a/packages/ui/src/stores/app-tabs.ts
+++ b/packages/ui/src/stores/app-tabs.ts
@@ -112,6 +112,21 @@ function selectSidecarTab(token: string) {
   selectAppTab(getSidecarAppTabId(token))
 }
 
+function moveAppTab(tabId: string, targetTabId: string, placement: "before" | "after") {
+  if (tabId === targetTabId) return
+
+  const tabs = appTabs()
+  const ids = tabs.map((tab) => tab.id)
+  if (!ids.includes(tabId) || !ids.includes(targetTabId)) return
+
+  const reorderedIds = ids.filter((id) => id !== tabId)
+  const targetIndex = reorderedIds.indexOf(targetTabId)
+  if (targetIndex < 0) return
+
+  reorderedIds.splice(placement === "after" ? targetIndex + 1 : targetIndex, 0, tabId)
+  setTabOrder(reorderedIds)
+}
+
 function selectNextAppTab() {
   const tabs = appTabs()
   if (tabs.length <= 1) return
@@ -163,6 +178,7 @@ export {
   getAppTabById,
   getInstanceAppTabId,
   getSidecarAppTabId,
+  moveAppTab,
   selectAppTab,
   selectAppTabByIndex,
   selectInstanceTab,
diff --git a/packages/ui/src/styles/panels/tabs.css b/packages/ui/src/styles/panels/tabs.css
index 3d6c251f..4f80b8c0 100644
--- a/packages/ui/src/styles/panels/tabs.css
+++ b/packages/ui/src/styles/panels/tabs.css
@@ -30,6 +30,32 @@
   @apply flex items-center gap-1 flex-shrink-0;
 }
 
+.tab-draggable {
+  @apply flex-shrink-0;
+  user-select: none;
+  transition: transform 140ms ease, opacity 140ms ease;
+  will-change: transform;
+}
+
+.tab-draggable-active {
+  opacity: 0.72;
+  position: relative;
+  z-index: 20;
+  transition: none;
+}
+
+.tab-draggable .tab-base,
+.tab-draggable .tab-pill,
+.tab-draggable .tab-pill-button {
+  cursor: grab;
+}
+
+.tab-draggable .tab-base:active,
+.tab-draggable .tab-pill:active,
+.tab-draggable .tab-pill-button:active {
+  cursor: grabbing;
+}
+
 .tab-strip-spacer {
   @apply flex-1;
   min-width: 1px;
@@ -159,6 +185,13 @@
   background-color: var(--tab-inactive-bg);
   color: var(--tab-inactive-text);
   border-bottom: 2px solid var(--tab-active-bg);
+  outline: none;
+}
+
+.tab-pill:focus-visible {
+  @apply ring-2 ring-offset-1;
+  ring-color: var(--accent-primary);
+  ring-offset-color: var(--surface-base);
 }
 
 .tab-pill-active {

From 58ccdae220709c104d572f7d52a8979e509d6a38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Thu, 7 May 2026 14:54:59 +0200
Subject: [PATCH 09/39] fix(ui): keep idle badges visible until viewed (#395)

## Summary
- Implements the requested three-state session tab behavior without
introducing a new blue indicator.
- Uses the existing yellow/working indicator while a session is actively
running, the existing green/idle indicator when work finished in a
non-viewed session, and no indicator once that completed session has
been viewed.
- Keeps the green completed-but-unseen indicator visible for 2.5 seconds
after the session becomes active, preserving the previous transient
feedback instead of clearing it instantly.

Fixes #376

## Verification
- `npm run typecheck --workspace @codenomad/ui`
- `npm run build --workspace @codenomad/ui`
---
 packages/ui/src/components/instance-tab.tsx   | 13 ++++---
 .../components/instance/instance-shell2.tsx   |  9 ++++-
 packages/ui/src/components/session-list.tsx   | 11 +++++-
 .../src/components/session/session-view.tsx   | 24 +++++++++++--
 .../ui/src/lib/i18n/messages/en/settings.ts   |  2 ++
 .../ui/src/lib/i18n/messages/es/settings.ts   |  2 ++
 .../ui/src/lib/i18n/messages/fr/settings.ts   |  2 ++
 .../ui/src/lib/i18n/messages/he/settings.ts   |  2 ++
 .../ui/src/lib/i18n/messages/ja/settings.ts   |  2 ++
 .../ui/src/lib/i18n/messages/ru/settings.ts   |  2 ++
 .../src/lib/i18n/messages/zh-Hans/settings.ts |  2 ++
 .../ui/src/lib/settings/behavior-registry.ts  | 12 +++++++
 packages/ui/src/stores/preferences.tsx        |  4 +++
 packages/ui/src/stores/session-state.ts       |  9 +++++
 packages/ui/src/stores/session-status.test.ts | 34 +++++++++++++++----
 packages/ui/src/stores/session-status.ts      | 29 ++++++++++++----
 packages/ui/src/stores/sessions.ts            |  2 ++
 packages/ui/src/types/session.ts              |  2 +-
 18 files changed, 140 insertions(+), 23 deletions(-)

diff --git a/packages/ui/src/components/instance-tab.tsx b/packages/ui/src/components/instance-tab.tsx
index c2cd3747..24852a4a 100644
--- a/packages/ui/src/components/instance-tab.tsx
+++ b/packages/ui/src/components/instance-tab.tsx
@@ -1,8 +1,9 @@
-import { Component, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
+import { Component, Show, createMemo, createSignal, onCleanup } from "solid-js"
 import type { Instance } from "../types/instance"
 import { getInstanceSessionIndicatorStatus } from "../stores/session-status"
 import { FolderOpen, ShieldAlert, X } from "lucide-solid"
 import { useI18n } from "../lib/i18n"
+import { useConfig } from "../stores/preferences"
 
 interface InstanceTabProps {
   instance: Instance
@@ -20,15 +21,17 @@ function getPathBasename(path: string): string {
 
 const InstanceTab: Component<InstanceTabProps> = (props) => {
   const { t } = useI18n()
+  const { preferences } = useConfig()
   const [now, setNow] = createSignal(Date.now())
 
-  createEffect(() => {
-    if (typeof window === "undefined") return
+  if (typeof window !== "undefined") {
     const timer = window.setInterval(() => setNow(Date.now()), 1000)
     onCleanup(() => window.clearInterval(timer))
-  })
+  }
 
-  const aggregatedStatus = createMemo(() => getInstanceSessionIndicatorStatus(props.instance.id, now()))
+  const aggregatedStatus = createMemo(() =>
+    getInstanceSessionIndicatorStatus(props.instance.id, now(), preferences().keepUnseenSubagentIdleStatus),
+  )
   const statusClassName = createMemo(() => {
     const status = aggregatedStatus()
     if (!status) return null
diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index eaa231cc..badb76ac 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -44,6 +44,7 @@ import { useDrawerChrome } from "./shell/useDrawerChrome"
 import { getRetrySeconds, getSessionRetry, getSessionStatus, shouldShowSessionStatus } from "../../stores/session-status"
 import { Maximize2, ShieldAlert } from "lucide-solid"
 import type { PromptInputApi } from "../prompt-input/types"
+import { useConfig } from "../../stores/preferences"
 
 import type { LayoutMode } from "./shell/types"
 import {
@@ -90,6 +91,7 @@ interface InstanceShellProps {
 
 const InstanceShell2: Component<InstanceShellProps> = (props) => {
   const { t, locale } = useI18n()
+  const { preferences } = useConfig()
   const isRTL = () => locale() === "he"
 
   const [sessionSidebarWidth, setSessionSidebarWidth] = createSignal(DEFAULT_SESSION_SIDEBAR_WIDTH)
@@ -329,7 +331,12 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
 
     const status = getSessionStatus(props.instance.id, activeSessionId)
     const retry = getSessionRetry(props.instance.id, activeSessionId)
-    const showStatus = shouldShowSessionStatus(props.instance.id, activeSessionId, now())
+    const showStatus = shouldShowSessionStatus(
+      props.instance.id,
+      activeSessionId,
+      now(),
+      preferences().keepUnseenSubagentIdleStatus,
+    )
     if (!showStatus) {
       return null
     }
diff --git a/packages/ui/src/components/session-list.tsx b/packages/ui/src/components/session-list.tsx
index 8408a3ef..6d229520 100644
--- a/packages/ui/src/components/session-list.tsx
+++ b/packages/ui/src/components/session-list.tsx
@@ -24,6 +24,7 @@ import {
 import { getGitRepoStatus, getWorktreeSlugForParentSession } from "../stores/worktrees"
 import { getLogger } from "../lib/logger"
 import { copyToClipboard } from "../lib/clipboard"
+import { useConfig } from "../stores/preferences"
 const log = getLogger("session")
 
 
@@ -47,6 +48,7 @@ function formatSessionStatus(status: SessionStatus): string {
 
 const SessionList: Component<SessionListProps> = (props) => {
   const { t } = useI18n()
+  const { preferences } = useConfig()
   const [renameTarget, setRenameTarget] = createSignal<{ id: string; title: string; label: string } | null>(null)
   const [isRenaming, setIsRenaming] = createSignal(false)
 
@@ -427,7 +429,14 @@ const SessionList: Component<SessionListProps> = (props) => {
     const needsQuestion = () => Boolean((session() as any)?.pendingQuestion)
     const needsInput = () => needsPermission() || needsQuestion()
     const statusClassName = () => (needsInput() ? "session-permission" : `session-${retry() ? "retrying" : status()}`)
-    const showStatus = () => needsInput() || shouldShowSessionStatus(props.instanceId, rowProps.sessionId, now())
+    const showStatus = () =>
+      needsInput() ||
+      shouldShowSessionStatus(
+        props.instanceId,
+        rowProps.sessionId,
+        now(),
+        preferences().keepUnseenSubagentIdleStatus,
+      )
     const statusText = () =>
       needsPermission()
         ? t("sessionList.status.needsPermission")
diff --git a/packages/ui/src/components/session/session-view.tsx b/packages/ui/src/components/session/session-view.tsx
index efa2f5ff..3efbd542 100644
--- a/packages/ui/src/components/session/session-view.tsx
+++ b/packages/ui/src/components/session/session-view.tsx
@@ -1,4 +1,4 @@
-import { Show, createMemo, createEffect, on, type Component } from "solid-js"
+import { Show, createMemo, createEffect, on, onCleanup, type Component } from "solid-js"
 import type { Session } from "../../types/session"
 import type { Attachment } from "../../types/attachment"
 import type { ClientPart } from "../../types/message"
@@ -8,8 +8,8 @@ import PromptInput from "../prompt-input"
 import PromptAttachmentsBar from "../prompt-input/PromptAttachmentsBar"
 import { getAttachments, removeAttachment } from "../../stores/attachments"
 import { instances } from "../../stores/instances"
-import { loadMessages, sendMessage, forkSession, renameSession, isSessionMessagesLoading, setActiveParentSession, setActiveSession, runShellCommand, abortSession } from "../../stores/sessions"
-import { isSessionBusy as getSessionBusyStatus } from "../../stores/session-status"
+import { loadMessages, sendMessage, forkSession, renameSession, isSessionMessagesLoading, markSessionIdleSeen, setActiveParentSession, setActiveSession, runShellCommand, abortSession } from "../../stores/sessions"
+import { IDLE_STATUS_VISIBILITY_MS, isSessionBusy as getSessionBusyStatus } from "../../stores/session-status"
 import { deleteMessage } from "../../stores/session-actions"
 import { showAlertDialog } from "../../stores/alerts"
 import { getLogger } from "../../lib/logger"
@@ -92,6 +92,24 @@ export const SessionView: Component<SessionViewProps> = (props) => {
     ),
   )
 
+  createEffect(() => {
+    const currentSession = session()
+    if (!props.isActive || !currentSession) return
+    if (currentSession.status !== "idle") return
+    if (typeof currentSession.idleSince !== "number") return
+
+    const idleSince = currentSession.idleSince
+    const timeout = window.setTimeout(() => {
+      const latestSession = session()
+      if (!props.isActive || !latestSession) return
+      if (latestSession.status !== "idle") return
+      if (latestSession.idleSince !== idleSince) return
+      markSessionIdleSeen(props.instanceId, latestSession.id)
+    }, IDLE_STATUS_VISIBILITY_MS)
+
+    onCleanup(() => window.clearTimeout(timeout))
+  })
+
   createEffect(
     on(
       () => props.isActive,
diff --git a/packages/ui/src/lib/i18n/messages/en/settings.ts b/packages/ui/src/lib/i18n/messages/en/settings.ts
index f77b7b48..53a11319 100644
--- a/packages/ui/src/lib/i18n/messages/en/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/en/settings.ts
@@ -147,6 +147,8 @@ export const settingsMessages = {
   "settings.behavior.usageMetrics.subtitle": "Show or hide token and cost stats for assistant messages.",
   "settings.behavior.autoCleanup.title": "Auto-cleanup blank sessions",
   "settings.behavior.autoCleanup.subtitle": "Automatically clean up blank sessions when creating new ones.",
+  "settings.behavior.keepUnseenSubagentIdle.title": "Keep subagent idle markers",
+  "settings.behavior.keepUnseenSubagentIdle.subtitle": "Keep subagent idle markers visible until viewed instead of hiding them after 5 seconds.",
   "settings.behavior.promptVoiceInput.title": "Prompt voice input",
   "settings.behavior.promptVoiceInput.subtitle": "Show the microphone control for speech-to-text prompt input when speech is configured.",
   "settings.behavior.promptSubmit.title": "Enter to submit",
diff --git a/packages/ui/src/lib/i18n/messages/es/settings.ts b/packages/ui/src/lib/i18n/messages/es/settings.ts
index 37bca7ae..7cc84509 100644
--- a/packages/ui/src/lib/i18n/messages/es/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/es/settings.ts
@@ -146,6 +146,8 @@ export const settingsMessages = {
   "settings.behavior.usageMetrics.subtitle": "Muestra u oculta estadisticas de tokens y costo en mensajes del asistente.",
   "settings.behavior.autoCleanup.title": "Limpieza automatica de sesiones en blanco",
   "settings.behavior.autoCleanup.subtitle": "Limpia automaticamente las sesiones en blanco al crear nuevas.",
+  "settings.behavior.keepUnseenSubagentIdle.title": "Mantener marcadores idle de subagentes",
+  "settings.behavior.keepUnseenSubagentIdle.subtitle": "Mantiene visibles los marcadores idle de subagentes hasta verlos, en lugar de ocultarlos despues de 5 segundos.",
   "settings.behavior.promptVoiceInput.title": "Prompt voice input",
   "settings.behavior.promptVoiceInput.subtitle": "Show the microphone control for speech-to-text prompt input when speech is configured.",
   "settings.behavior.promptSubmit.title": "Enter para enviar",
diff --git a/packages/ui/src/lib/i18n/messages/fr/settings.ts b/packages/ui/src/lib/i18n/messages/fr/settings.ts
index bd44a3fa..dcb4ef6e 100644
--- a/packages/ui/src/lib/i18n/messages/fr/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/settings.ts
@@ -146,6 +146,8 @@ export const settingsMessages = {
   "settings.behavior.usageMetrics.subtitle": "Afficher ou masquer les stats de tokens et de cout pour les messages de l'assistant.",
   "settings.behavior.autoCleanup.title": "Nettoyage auto des sessions vides",
   "settings.behavior.autoCleanup.subtitle": "Nettoyer automatiquement les sessions vides lors de la creation de nouvelles.",
+  "settings.behavior.keepUnseenSubagentIdle.title": "Garder les marqueurs inactifs des sous-agents",
+  "settings.behavior.keepUnseenSubagentIdle.subtitle": "Garde les marqueurs inactifs des sous-agents visibles jusqu'a consultation au lieu de les masquer apres 5 secondes.",
   "settings.behavior.promptVoiceInput.title": "Prompt voice input",
   "settings.behavior.promptVoiceInput.subtitle": "Show the microphone control for speech-to-text prompt input when speech is configured.",
   "settings.behavior.promptSubmit.title": "Entrer pour envoyer",
diff --git a/packages/ui/src/lib/i18n/messages/he/settings.ts b/packages/ui/src/lib/i18n/messages/he/settings.ts
index b59f4490..58657d0b 100644
--- a/packages/ui/src/lib/i18n/messages/he/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/he/settings.ts
@@ -145,6 +145,8 @@ export const settingsMessages = {
   "settings.behavior.usageMetrics.subtitle": "הצג או הסתר נתוני טוקנים ועלות להודעות הסוכן.",
   "settings.behavior.autoCleanup.title": "ניקוי אוטומטי של סשנים ריקים",
   "settings.behavior.autoCleanup.subtitle": "נקה אוטומטית סשנים ריקים בעת יצירת סשנים חדשים.",
+  "settings.behavior.keepUnseenSubagentIdle.title": "השאר סמני idle של תתי-סוכנים",
+  "settings.behavior.keepUnseenSubagentIdle.subtitle": "השאר סמני idle של תתי-סוכנים גלויים עד צפייה במקום להסתיר אותם אחרי 5 שניות.",
   "settings.behavior.promptVoiceInput.title": "קלט קולי לפרומפט",
   "settings.behavior.promptVoiceInput.subtitle": "הצג את כפתור המיקרופון לקלט דיבור-לטקסט כאשר תכונת הקול מוגדרת.",
   "settings.behavior.promptSubmit.title": "Enter לשליחה",
diff --git a/packages/ui/src/lib/i18n/messages/ja/settings.ts b/packages/ui/src/lib/i18n/messages/ja/settings.ts
index 756cbf81..7cec7f3f 100644
--- a/packages/ui/src/lib/i18n/messages/ja/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/settings.ts
@@ -146,6 +146,8 @@ export const settingsMessages = {
   "settings.behavior.usageMetrics.subtitle": "アシスタントのメッセージにトークン数とコストの統計を表示/非表示にします。",
   "settings.behavior.autoCleanup.title": "空のセッションを自動クリーンアップ",
   "settings.behavior.autoCleanup.subtitle": "新しいセッション作成時に空のセッションを自動的にクリーンアップします。",
+  "settings.behavior.keepUnseenSubagentIdle.title": "サブエージェントの idle マーカーを保持",
+  "settings.behavior.keepUnseenSubagentIdle.subtitle": "サブエージェントの idle マーカーを 5 秒後に隠さず、表示するまで残します。",
   "settings.behavior.promptVoiceInput.title": "Prompt voice input",
   "settings.behavior.promptVoiceInput.subtitle": "Show the microphone control for speech-to-text prompt input when speech is configured.",
   "settings.behavior.promptSubmit.title": "Enterで送信",
diff --git a/packages/ui/src/lib/i18n/messages/ru/settings.ts b/packages/ui/src/lib/i18n/messages/ru/settings.ts
index 117a758b..f7f967df 100644
--- a/packages/ui/src/lib/i18n/messages/ru/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/settings.ts
@@ -146,6 +146,8 @@ export const settingsMessages = {
   "settings.behavior.usageMetrics.subtitle": "Показывать или скрывать статистику токенов и стоимости в сообщениях ассистента.",
   "settings.behavior.autoCleanup.title": "Автоочистка пустых сессий",
   "settings.behavior.autoCleanup.subtitle": "Автоматически очищать пустые сессии при создании новых.",
+  "settings.behavior.keepUnseenSubagentIdle.title": "Оставлять idle-маркеры субагентов",
+  "settings.behavior.keepUnseenSubagentIdle.subtitle": "Оставлять idle-маркеры субагентов видимыми до просмотра вместо скрытия через 5 секунд.",
   "settings.behavior.promptVoiceInput.title": "Prompt voice input",
   "settings.behavior.promptVoiceInput.subtitle": "Show the microphone control for speech-to-text prompt input when speech is configured.",
   "settings.behavior.promptSubmit.title": "Enter для отправки",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts
index f8102f71..6ad90944 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts
@@ -146,6 +146,8 @@ export const settingsMessages = {
   "settings.behavior.usageMetrics.subtitle": "显示或隐藏助手消息的令牌与成本统计。",
   "settings.behavior.autoCleanup.title": "自动清理空会话",
   "settings.behavior.autoCleanup.subtitle": "创建新会话时自动清理空会话。",
+  "settings.behavior.keepUnseenSubagentIdle.title": "保留子智能体 idle 标记",
+  "settings.behavior.keepUnseenSubagentIdle.subtitle": "让子智能体 idle 标记保持可见直到查看，而不是 5 秒后隐藏。",
   "settings.behavior.promptVoiceInput.title": "Prompt voice input",
   "settings.behavior.promptVoiceInput.subtitle": "Show the microphone control for speech-to-text prompt input when speech is configured.",
   "settings.behavior.promptSubmit.title": "回车发送",
diff --git a/packages/ui/src/lib/settings/behavior-registry.ts b/packages/ui/src/lib/settings/behavior-registry.ts
index 30b8701c..4b1abd96 100644
--- a/packages/ui/src/lib/settings/behavior-registry.ts
+++ b/packages/ui/src/lib/settings/behavior-registry.ts
@@ -249,6 +249,18 @@ export function getBehaviorSettings(actions: BehaviorRegistryActions): BehaviorS
         )
       },
     },
+    {
+      kind: "toggle",
+      id: "behavior.keepUnseenSubagentIdleStatus",
+      titleKey: "settings.behavior.keepUnseenSubagentIdle.title",
+      subtitleKey: "settings.behavior.keepUnseenSubagentIdle.subtitle",
+      get: (p) => Boolean(p.keepUnseenSubagentIdleStatus),
+      set: (next) => {
+        if (updatePreferences) {
+          updatePreferences({ keepUnseenSubagentIdleStatus: next })
+        }
+      },
+    },
     {
       kind: "toggle",
       id: "behavior.promptVoiceInput",
diff --git a/packages/ui/src/stores/preferences.tsx b/packages/ui/src/stores/preferences.tsx
index 39b76e5a..7fb9310e 100644
--- a/packages/ui/src/stores/preferences.tsx
+++ b/packages/ui/src/stores/preferences.tsx
@@ -65,6 +65,7 @@ export interface UiSettings {
   toolInputsVisibility: ToolInputsVisibilityPreference
   showUsageMetrics: boolean
   autoCleanupBlankSessions: boolean
+  keepUnseenSubagentIdleStatus: boolean
 
   // OS notifications
   osNotificationsEnabled: boolean
@@ -143,6 +144,7 @@ const defaultUiSettings: UiSettings = {
   toolInputsVisibility: "collapsed",
   showUsageMetrics: true,
   autoCleanupBlankSessions: true,
+  keepUnseenSubagentIdleStatus: false,
 
   osNotificationsEnabled: false,
   osNotificationsAllowWhenVisible: false,
@@ -181,6 +183,8 @@ function normalizeUiSettings(input?: Partial<UiSettings> | null): UiSettings {
         : defaultUiSettings.toolInputsVisibility,
     showUsageMetrics: sanitized.showUsageMetrics ?? defaultUiSettings.showUsageMetrics,
     autoCleanupBlankSessions: sanitized.autoCleanupBlankSessions ?? defaultUiSettings.autoCleanupBlankSessions,
+    keepUnseenSubagentIdleStatus:
+      sanitized.keepUnseenSubagentIdleStatus ?? defaultUiSettings.keepUnseenSubagentIdleStatus,
     osNotificationsEnabled: sanitized.osNotificationsEnabled ?? defaultUiSettings.osNotificationsEnabled,
     osNotificationsAllowWhenVisible:
       sanitized.osNotificationsAllowWhenVisible ?? defaultUiSettings.osNotificationsAllowWhenVisible,
diff --git a/packages/ui/src/stores/session-state.ts b/packages/ui/src/stores/session-state.ts
index 79e600bf..d2292313 100644
--- a/packages/ui/src/stores/session-state.ts
+++ b/packages/ui/src/stores/session-state.ts
@@ -314,6 +314,14 @@ function setSessionPendingQuestion(instanceId: string, sessionId: string, pendin
   })
 }
 
+function markSessionIdleSeen(instanceId: string, sessionId: string): void {
+  withSession(instanceId, sessionId, (session) => {
+    if (session.status !== "idle") return false
+    if (typeof session.idleSince !== "number") return false
+    session.idleSince = null
+  })
+}
+
 function setActiveSession(instanceId: string, sessionId: string): void {
   setActiveSessionId((prev) => {
     const next = new Map(prev)
@@ -736,6 +744,7 @@ export {
   withSession,
   setSessionPendingPermission,
   setSessionPendingQuestion,
+  markSessionIdleSeen,
   setSessionStatus,
   setActiveSession,
  
diff --git a/packages/ui/src/stores/session-status.test.ts b/packages/ui/src/stores/session-status.test.ts
index 1d674e1f..8fdcd1f2 100644
--- a/packages/ui/src/stores/session-status.test.ts
+++ b/packages/ui/src/stores/session-status.test.ts
@@ -22,26 +22,48 @@ describe("shouldSessionHoldWakeLock", () => {
 })
 
 describe("idle status visibility", () => {
-  it("shows idle briefly after transitioning from active work", () => {
+  it("keeps seen idle visible for the configured transient delay", () => {
+    assert.equal(IDLE_STATUS_VISIBILITY_MS, 5_000)
+  })
+
+  it("shows idle after transitioning from active work until it is seen", () => {
     const idleSince = getIdleSinceForStatusTransition("working", "idle", null, 1_000)
 
     assert.equal(idleSince, 1_000)
-    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince }, 1_000), true)
-    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince }, 1_000 + IDLE_STATUS_VISIBILITY_MS - 1), true)
-    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince }, 1_000 + IDLE_STATUS_VISIBILITY_MS), false)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: null }, 1_000), true)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: null }, 1_000 + IDLE_STATUS_VISIBILITY_MS), true)
+  })
+
+  it("auto-hides subagent idle after the transient delay by default", () => {
+    const idleSince = getIdleSinceForStatusTransition("working", "idle", null, 1_000)
+
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: "parent" }, 1_000), true)
+    assert.equal(
+      shouldShowIdleStatus({ status: "idle", idleSince, parentId: "parent" }, 1_000 + IDLE_STATUS_VISIBILITY_MS),
+      false,
+    )
+  })
+
+  it("can keep subagent idle visible until viewed", () => {
+    const idleSince = getIdleSinceForStatusTransition("working", "idle", null, 1_000)
+
+    assert.equal(
+      shouldShowIdleStatus({ status: "idle", idleSince, parentId: "parent" }, 1_000 + IDLE_STATUS_VISIBILITY_MS, true),
+      true,
+    )
   })
 
   it("does not show idle for sessions that started idle", () => {
     const idleSince = getIdleSinceForStatusTransition(undefined, "idle", null, 1_000)
 
     assert.equal(idleSince, null)
-    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince }, 1_000), false)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: null }, 1_000), false)
   })
 
   it("clears idle visibility when work resumes", () => {
     const idleSince = getIdleSinceForStatusTransition("idle", "working", 1_000, 2_000)
 
     assert.equal(idleSince, null)
-    assert.equal(shouldShowIdleStatus({ status: "working", idleSince }, 2_000), false)
+    assert.equal(shouldShowIdleStatus({ status: "working", idleSince, parentId: null }, 2_000), false)
   })
 })
diff --git a/packages/ui/src/stores/session-status.ts b/packages/ui/src/stores/session-status.ts
index 5238cfaf..ab557cdc 100644
--- a/packages/ui/src/stores/session-status.ts
+++ b/packages/ui/src/stores/session-status.ts
@@ -37,7 +37,11 @@ export function getSessionRetry(instanceId: string, sessionId: string): SessionR
   return session?.retry ?? null
 }
 
-export function shouldShowIdleStatus(session: Pick<Session, "status" | "idleSince"> | null | undefined, now = Date.now()): boolean {
+export function shouldShowIdleStatus(
+  session: Pick<Session, "status" | "idleSince" | "parentId"> | null | undefined,
+  now = Date.now(),
+  keepUnseenSubagentIdleStatus = false,
+): boolean {
   if (!session || session.status !== "idle") {
     return false
   }
@@ -46,10 +50,19 @@ export function shouldShowIdleStatus(session: Pick<Session, "status" | "idleSinc
     return false
   }
 
-  return now - session.idleSince < IDLE_STATUS_VISIBILITY_MS
+  if (session.parentId && !keepUnseenSubagentIdleStatus) {
+    return now - session.idleSince < IDLE_STATUS_VISIBILITY_MS
+  }
+
+  return true
 }
 
-export function shouldShowSessionStatus(instanceId: string, sessionId: string, now = Date.now()): boolean {
+export function shouldShowSessionStatus(
+  instanceId: string,
+  sessionId: string,
+  now = Date.now(),
+  keepUnseenSubagentIdleStatus = false,
+): boolean {
   const session = getSession(instanceId, sessionId)
   if (!session) {
     return false
@@ -59,7 +72,7 @@ export function shouldShowSessionStatus(instanceId: string, sessionId: string, n
     return true
   }
 
-  return session.status !== "idle" || shouldShowIdleStatus(session, now)
+  return session.status !== "idle" || shouldShowIdleStatus(session, now, keepUnseenSubagentIdleStatus)
 }
 
 export function getRetrySeconds(next: number, now = Date.now()): number {
@@ -68,7 +81,11 @@ export function getRetrySeconds(next: number, now = Date.now()): number {
 
 export type InstanceSessionIndicatorStatus = "permission" | SessionStatus
 
-export function getInstanceSessionIndicatorStatus(instanceId: string, now = Date.now()): InstanceSessionIndicatorStatus | null {
+export function getInstanceSessionIndicatorStatus(
+  instanceId: string,
+  now = Date.now(),
+  keepUnseenSubagentIdleStatus = false,
+): InstanceSessionIndicatorStatus | null {
   const aggregated = getInstanceSessionIndicatorStatusCached(instanceId)
   if (aggregated !== "idle") {
     return aggregated
@@ -80,7 +97,7 @@ export function getInstanceSessionIndicatorStatus(instanceId: string, now = Date
   }
 
   for (const session of instanceSessions.values()) {
-    if (shouldShowIdleStatus(session, now)) {
+    if (shouldShowIdleStatus(session, now, keepUnseenSubagentIdleStatus)) {
       return "idle"
     }
   }
diff --git a/packages/ui/src/stores/sessions.ts b/packages/ui/src/stores/sessions.ts
index 8b5e9a3e..fe138047 100644
--- a/packages/ui/src/stores/sessions.ts
+++ b/packages/ui/src/stores/sessions.ts
@@ -24,6 +24,7 @@ import {
   isSessionMessagesLoading,
   isSessionParentExpanded,
   loading,
+  markSessionIdleSeen,
   providers,
   sessionInfoByInstance,
   sessions,
@@ -124,6 +125,7 @@ export {
   isSessionParentExpanded,
   loadMessages,
   loading,
+  markSessionIdleSeen,
   providers,
   sendMessage,
   sessionInfoByInstance,
diff --git a/packages/ui/src/types/session.ts b/packages/ui/src/types/session.ts
index 9b5e736e..7f1829fe 100644
--- a/packages/ui/src/types/session.ts
+++ b/packages/ui/src/types/session.ts
@@ -75,7 +75,7 @@ export interface Session
   pendingQuestion?: boolean // Indicates if session is waiting on user input
   status: SessionStatus // Single source of truth for session status
   retry?: SessionRetryState | null // Retry metadata for transient backoff states
-  idleSince?: number | null // Timestamp for short-lived idle badge visibility after active work completes
+  idleSince?: number | null // Timestamp set when work finished but the session has not been viewed yet
   diff?: FileDiff[] // Session-level file diffs (hydrated via session.diff)
 }
 

From 37b64e3630ccd563ba78ad779efc93f726d040a4 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Thu, 7 May 2026 16:07:53 +0100
Subject: [PATCH 10/39] fix(ui): clear idle badges after viewed sessions

---
 packages/ui/src/components/instance-tab.tsx   | 14 +------
 .../components/instance/instance-shell2.tsx   |  9 +----
 packages/ui/src/components/session-list.tsx   | 11 +-----
 .../src/components/session/session-view.tsx   | 37 ++++++++++++++----
 packages/ui/src/stores/session-state.ts       | 39 +++++++++++++++++++
 packages/ui/src/stores/session-status.test.ts | 24 +++++-------
 packages/ui/src/stores/session-status.ts      | 14 +------
 packages/ui/src/stores/sessions.ts            |  2 +
 8 files changed, 86 insertions(+), 64 deletions(-)

diff --git a/packages/ui/src/components/instance-tab.tsx b/packages/ui/src/components/instance-tab.tsx
index 24852a4a..d9681e67 100644
--- a/packages/ui/src/components/instance-tab.tsx
+++ b/packages/ui/src/components/instance-tab.tsx
@@ -1,9 +1,8 @@
-import { Component, Show, createMemo, createSignal, onCleanup } from "solid-js"
+import { Component, Show, createMemo } from "solid-js"
 import type { Instance } from "../types/instance"
 import { getInstanceSessionIndicatorStatus } from "../stores/session-status"
 import { FolderOpen, ShieldAlert, X } from "lucide-solid"
 import { useI18n } from "../lib/i18n"
-import { useConfig } from "../stores/preferences"
 
 interface InstanceTabProps {
   instance: Instance
@@ -21,17 +20,8 @@ function getPathBasename(path: string): string {
 
 const InstanceTab: Component<InstanceTabProps> = (props) => {
   const { t } = useI18n()
-  const { preferences } = useConfig()
-  const [now, setNow] = createSignal(Date.now())
 
-  if (typeof window !== "undefined") {
-    const timer = window.setInterval(() => setNow(Date.now()), 1000)
-    onCleanup(() => window.clearInterval(timer))
-  }
-
-  const aggregatedStatus = createMemo(() =>
-    getInstanceSessionIndicatorStatus(props.instance.id, now(), preferences().keepUnseenSubagentIdleStatus),
-  )
+  const aggregatedStatus = createMemo(() => getInstanceSessionIndicatorStatus(props.instance.id))
   const statusClassName = createMemo(() => {
     const status = aggregatedStatus()
     if (!status) return null
diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index badb76ac..727504c9 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -44,7 +44,6 @@ import { useDrawerChrome } from "./shell/useDrawerChrome"
 import { getRetrySeconds, getSessionRetry, getSessionStatus, shouldShowSessionStatus } from "../../stores/session-status"
 import { Maximize2, ShieldAlert } from "lucide-solid"
 import type { PromptInputApi } from "../prompt-input/types"
-import { useConfig } from "../../stores/preferences"
 
 import type { LayoutMode } from "./shell/types"
 import {
@@ -91,7 +90,6 @@ interface InstanceShellProps {
 
 const InstanceShell2: Component<InstanceShellProps> = (props) => {
   const { t, locale } = useI18n()
-  const { preferences } = useConfig()
   const isRTL = () => locale() === "he"
 
   const [sessionSidebarWidth, setSessionSidebarWidth] = createSignal(DEFAULT_SESSION_SIDEBAR_WIDTH)
@@ -331,12 +329,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
 
     const status = getSessionStatus(props.instance.id, activeSessionId)
     const retry = getSessionRetry(props.instance.id, activeSessionId)
-    const showStatus = shouldShowSessionStatus(
-      props.instance.id,
-      activeSessionId,
-      now(),
-      preferences().keepUnseenSubagentIdleStatus,
-    )
+    const showStatus = shouldShowSessionStatus(props.instance.id, activeSessionId)
     if (!showStatus) {
       return null
     }
diff --git a/packages/ui/src/components/session-list.tsx b/packages/ui/src/components/session-list.tsx
index 6d229520..24a6e7ab 100644
--- a/packages/ui/src/components/session-list.tsx
+++ b/packages/ui/src/components/session-list.tsx
@@ -24,7 +24,6 @@ import {
 import { getGitRepoStatus, getWorktreeSlugForParentSession } from "../stores/worktrees"
 import { getLogger } from "../lib/logger"
 import { copyToClipboard } from "../lib/clipboard"
-import { useConfig } from "../stores/preferences"
 const log = getLogger("session")
 
 
@@ -48,7 +47,6 @@ function formatSessionStatus(status: SessionStatus): string {
 
 const SessionList: Component<SessionListProps> = (props) => {
   const { t } = useI18n()
-  const { preferences } = useConfig()
   const [renameTarget, setRenameTarget] = createSignal<{ id: string; title: string; label: string } | null>(null)
   const [isRenaming, setIsRenaming] = createSignal(false)
 
@@ -429,14 +427,7 @@ const SessionList: Component<SessionListProps> = (props) => {
     const needsQuestion = () => Boolean((session() as any)?.pendingQuestion)
     const needsInput = () => needsPermission() || needsQuestion()
     const statusClassName = () => (needsInput() ? "session-permission" : `session-${retry() ? "retrying" : status()}`)
-    const showStatus = () =>
-      needsInput() ||
-      shouldShowSessionStatus(
-        props.instanceId,
-        rowProps.sessionId,
-        now(),
-        preferences().keepUnseenSubagentIdleStatus,
-      )
+    const showStatus = () => needsInput() || shouldShowSessionStatus(props.instanceId, rowProps.sessionId)
     const statusText = () =>
       needsPermission()
         ? t("sessionList.status.needsPermission")
diff --git a/packages/ui/src/components/session/session-view.tsx b/packages/ui/src/components/session/session-view.tsx
index 3efbd542..0ce385cd 100644
--- a/packages/ui/src/components/session/session-view.tsx
+++ b/packages/ui/src/components/session/session-view.tsx
@@ -8,7 +8,7 @@ import PromptInput from "../prompt-input"
 import PromptAttachmentsBar from "../prompt-input/PromptAttachmentsBar"
 import { getAttachments, removeAttachment } from "../../stores/attachments"
 import { instances } from "../../stores/instances"
-import { loadMessages, sendMessage, forkSession, renameSession, isSessionMessagesLoading, markSessionIdleSeen, setActiveParentSession, setActiveSession, runShellCommand, abortSession } from "../../stores/sessions"
+import { loadMessages, sendMessage, forkSession, renameSession, isSessionMessagesLoading, markViewedSessionIdleSeen, setActiveParentSession, setActiveSession, runShellCommand, abortSession } from "../../stores/sessions"
 import { IDLE_STATUS_VISIBILITY_MS, isSessionBusy as getSessionBusyStatus } from "../../stores/session-status"
 import { deleteMessage } from "../../stores/session-actions"
 import { showAlertDialog } from "../../stores/alerts"
@@ -17,6 +17,7 @@ import { requestData } from "../../lib/opencode-api"
 import { useI18n } from "../../lib/i18n"
 import type { PromptInputApi, PromptInsertMode } from "../prompt-input/types"
 import { clearConversationPlaybackForSession } from "../../stores/conversation-speech"
+import { useConfig } from "../../stores/preferences"
 
 const log = getLogger("session")
 
@@ -41,6 +42,7 @@ interface SessionViewProps {
 
 export const SessionView: Component<SessionViewProps> = (props) => {
   const { t } = useI18n()
+  const { preferences } = useConfig()
   const session = () => props.activeSessions.get(props.sessionId)
   const messagesLoading = createMemo(() => isSessionMessagesLoading(props.instanceId, props.sessionId))
   const messageStore = createMemo(() => messageStoreBus.getOrCreate(props.instanceId))
@@ -80,6 +82,26 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       requestAnimationFrame(() => scrollToBottomHandle?.())
     })
   }
+
+  function getSeenIdleSignature(currentSession: Session, keepUnseenSubagentIdleStatus: boolean): string {
+    const ids: string[] = []
+
+    if (currentSession.status === "idle" && typeof currentSession.idleSince === "number") {
+      ids.push(`${currentSession.id}:${currentSession.idleSince}`)
+    }
+
+    if (currentSession.parentId === null && !keepUnseenSubagentIdleStatus) {
+      for (const child of props.activeSessions.values()) {
+        if (child.parentId !== currentSession.id) continue
+        if (child.status !== "idle") continue
+        if (typeof child.idleSince !== "number") continue
+        ids.push(`${child.id}:${child.idleSince}`)
+      }
+    }
+
+    return ids.sort().join("|")
+  }
+
   createEffect(
     on(
       () => props.isActive,
@@ -95,16 +117,17 @@ export const SessionView: Component<SessionViewProps> = (props) => {
   createEffect(() => {
     const currentSession = session()
     if (!props.isActive || !currentSession) return
-    if (currentSession.status !== "idle") return
-    if (typeof currentSession.idleSince !== "number") return
 
-    const idleSince = currentSession.idleSince
+    const keepUnseenSubagentIdleStatus = preferences().keepUnseenSubagentIdleStatus
+    const seenIdleSignature = getSeenIdleSignature(currentSession, keepUnseenSubagentIdleStatus)
+    if (!seenIdleSignature) return
+
     const timeout = window.setTimeout(() => {
       const latestSession = session()
       if (!props.isActive || !latestSession) return
-      if (latestSession.status !== "idle") return
-      if (latestSession.idleSince !== idleSince) return
-      markSessionIdleSeen(props.instanceId, latestSession.id)
+      const latestKeepUnseenSubagentIdleStatus = preferences().keepUnseenSubagentIdleStatus
+      if (getSeenIdleSignature(latestSession, latestKeepUnseenSubagentIdleStatus) !== seenIdleSignature) return
+      markViewedSessionIdleSeen(props.instanceId, latestSession.id, latestKeepUnseenSubagentIdleStatus)
     }, IDLE_STATUS_VISIBILITY_MS)
 
     onCleanup(() => window.clearTimeout(timeout))
diff --git a/packages/ui/src/stores/session-state.ts b/packages/ui/src/stores/session-state.ts
index d2292313..f5e82cbd 100644
--- a/packages/ui/src/stores/session-state.ts
+++ b/packages/ui/src/stores/session-state.ts
@@ -322,6 +322,44 @@ function markSessionIdleSeen(instanceId: string, sessionId: string): void {
   })
 }
 
+function markViewedSessionIdleSeen(
+  instanceId: string,
+  sessionId: string,
+  keepUnseenSubagentIdleStatus: boolean,
+): void {
+  setSessions((prev) => {
+    const instanceSessions = prev.get(instanceId)
+    if (!instanceSessions) return prev
+
+    const viewedSession = instanceSessions.get(sessionId)
+    if (!viewedSession) return prev
+
+    const idsToClear = new Set<string>([sessionId])
+    if (viewedSession.parentId === null && !keepUnseenSubagentIdleStatus) {
+      for (const session of instanceSessions.values()) {
+        if (session.parentId === sessionId) idsToClear.add(session.id)
+      }
+    }
+
+    let changed = false
+    const updatedSessions = new Map(instanceSessions)
+    for (const id of idsToClear) {
+      const session = updatedSessions.get(id)
+      if (!session) continue
+      if (session.status !== "idle") continue
+      if (typeof session.idleSince !== "number") continue
+      updatedSessions.set(id, { ...session, idleSince: null })
+      changed = true
+    }
+
+    if (!changed) return prev
+
+    const next = new Map(prev)
+    next.set(instanceId, updatedSessions)
+    return next
+  })
+}
+
 function setActiveSession(instanceId: string, sessionId: string): void {
   setActiveSessionId((prev) => {
     const next = new Map(prev)
@@ -745,6 +783,7 @@ export {
   setSessionPendingPermission,
   setSessionPendingQuestion,
   markSessionIdleSeen,
+  markViewedSessionIdleSeen,
   setSessionStatus,
   setActiveSession,
  
diff --git a/packages/ui/src/stores/session-status.test.ts b/packages/ui/src/stores/session-status.test.ts
index 8fdcd1f2..29d7329b 100644
--- a/packages/ui/src/stores/session-status.test.ts
+++ b/packages/ui/src/stores/session-status.test.ts
@@ -30,40 +30,34 @@ describe("idle status visibility", () => {
     const idleSince = getIdleSinceForStatusTransition("working", "idle", null, 1_000)
 
     assert.equal(idleSince, 1_000)
-    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: null }, 1_000), true)
-    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: null }, 1_000 + IDLE_STATUS_VISIBILITY_MS), true)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: null }), true)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: null }), true)
   })
 
-  it("auto-hides subagent idle after the transient delay by default", () => {
+  it("keeps subagent idle visible until the parent or child session is seen", () => {
     const idleSince = getIdleSinceForStatusTransition("working", "idle", null, 1_000)
 
-    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: "parent" }, 1_000), true)
-    assert.equal(
-      shouldShowIdleStatus({ status: "idle", idleSince, parentId: "parent" }, 1_000 + IDLE_STATUS_VISIBILITY_MS),
-      false,
-    )
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: "parent" }), true)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: "parent" }), true)
   })
 
-  it("can keep subagent idle visible until viewed", () => {
+  it("does not use the keep-unseen setting to age out visible idle markers", () => {
     const idleSince = getIdleSinceForStatusTransition("working", "idle", null, 1_000)
 
-    assert.equal(
-      shouldShowIdleStatus({ status: "idle", idleSince, parentId: "parent" }, 1_000 + IDLE_STATUS_VISIBILITY_MS, true),
-      true,
-    )
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: "parent" }), true)
   })
 
   it("does not show idle for sessions that started idle", () => {
     const idleSince = getIdleSinceForStatusTransition(undefined, "idle", null, 1_000)
 
     assert.equal(idleSince, null)
-    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: null }, 1_000), false)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: null }), false)
   })
 
   it("clears idle visibility when work resumes", () => {
     const idleSince = getIdleSinceForStatusTransition("idle", "working", 1_000, 2_000)
 
     assert.equal(idleSince, null)
-    assert.equal(shouldShowIdleStatus({ status: "working", idleSince, parentId: null }, 2_000), false)
+    assert.equal(shouldShowIdleStatus({ status: "working", idleSince, parentId: null }), false)
   })
 })
diff --git a/packages/ui/src/stores/session-status.ts b/packages/ui/src/stores/session-status.ts
index ab557cdc..503b7fde 100644
--- a/packages/ui/src/stores/session-status.ts
+++ b/packages/ui/src/stores/session-status.ts
@@ -39,8 +39,6 @@ export function getSessionRetry(instanceId: string, sessionId: string): SessionR
 
 export function shouldShowIdleStatus(
   session: Pick<Session, "status" | "idleSince" | "parentId"> | null | undefined,
-  now = Date.now(),
-  keepUnseenSubagentIdleStatus = false,
 ): boolean {
   if (!session || session.status !== "idle") {
     return false
@@ -50,18 +48,12 @@ export function shouldShowIdleStatus(
     return false
   }
 
-  if (session.parentId && !keepUnseenSubagentIdleStatus) {
-    return now - session.idleSince < IDLE_STATUS_VISIBILITY_MS
-  }
-
   return true
 }
 
 export function shouldShowSessionStatus(
   instanceId: string,
   sessionId: string,
-  now = Date.now(),
-  keepUnseenSubagentIdleStatus = false,
 ): boolean {
   const session = getSession(instanceId, sessionId)
   if (!session) {
@@ -72,7 +64,7 @@ export function shouldShowSessionStatus(
     return true
   }
 
-  return session.status !== "idle" || shouldShowIdleStatus(session, now, keepUnseenSubagentIdleStatus)
+  return session.status !== "idle" || shouldShowIdleStatus(session)
 }
 
 export function getRetrySeconds(next: number, now = Date.now()): number {
@@ -83,8 +75,6 @@ export type InstanceSessionIndicatorStatus = "permission" | SessionStatus
 
 export function getInstanceSessionIndicatorStatus(
   instanceId: string,
-  now = Date.now(),
-  keepUnseenSubagentIdleStatus = false,
 ): InstanceSessionIndicatorStatus | null {
   const aggregated = getInstanceSessionIndicatorStatusCached(instanceId)
   if (aggregated !== "idle") {
@@ -97,7 +87,7 @@ export function getInstanceSessionIndicatorStatus(
   }
 
   for (const session of instanceSessions.values()) {
-    if (shouldShowIdleStatus(session, now, keepUnseenSubagentIdleStatus)) {
+    if (shouldShowIdleStatus(session)) {
       return "idle"
     }
   }
diff --git a/packages/ui/src/stores/sessions.ts b/packages/ui/src/stores/sessions.ts
index fe138047..96ac43e6 100644
--- a/packages/ui/src/stores/sessions.ts
+++ b/packages/ui/src/stores/sessions.ts
@@ -25,6 +25,7 @@ import {
   isSessionParentExpanded,
   loading,
   markSessionIdleSeen,
+  markViewedSessionIdleSeen,
   providers,
   sessionInfoByInstance,
   sessions,
@@ -126,6 +127,7 @@ export {
   loadMessages,
   loading,
   markSessionIdleSeen,
+  markViewedSessionIdleSeen,
   providers,
   sendMessage,
   sessionInfoByInstance,

From 3b045285f10bc7689553e533956e9ef5ac2f0553 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Thu, 7 May 2026 17:42:26 +0100
Subject: [PATCH 11/39] fix(server): honor workspace root in unrestricted
 browsing

When --unrestricted-root is enabled, filesystem browsing now starts from the configured workspace root instead of defaulting to the user's home directory. This makes CLI_WORKSPACE_ROOT and --workspace-root define the initial location while preserving unrestricted navigation to absolute paths outside that root.

The implementation updates unrestricted path resolution so empty and dot paths resolve to the configured root, and aligns unrestricted metadata so rootPath consistently represents that configured root. The Windows drives pseudo-root now reports the same rootPath as other unrestricted listings, keeping the metadata contract uniform across platforms.

Add FileSystemBrowser tests covering unrestricted default browsing, dot-path handling, outside-root navigation, default folder creation, and Windows drive pseudo-root metadata via a platform override. Also make the existing workspace search cache refresh test use deterministic timestamps so the full server test suite remains reliable.
---
 .../src/filesystem/__tests__/browser.test.ts  | 83 +++++++++++++++++++
 .../filesystem/__tests__/search-cache.test.ts |  4 +-
 packages/server/src/filesystem/browser.ts     |  9 +-
 3 files changed, 90 insertions(+), 6 deletions(-)
 create mode 100644 packages/server/src/filesystem/__tests__/browser.test.ts

diff --git a/packages/server/src/filesystem/__tests__/browser.test.ts b/packages/server/src/filesystem/__tests__/browser.test.ts
new file mode 100644
index 00000000..968732f9
--- /dev/null
+++ b/packages/server/src/filesystem/__tests__/browser.test.ts
@@ -0,0 +1,83 @@
+import assert from "node:assert/strict"
+import fs from "node:fs"
+import os from "node:os"
+import path from "node:path"
+import { afterEach, describe, it } from "node:test"
+import { FileSystemBrowser } from "../browser"
+import { WINDOWS_DRIVES_ROOT } from "../../api-types"
+
+const tempRoots: string[] = []
+
+describe("FileSystemBrowser", () => {
+  afterEach(() => {
+    for (const directory of tempRoots.splice(0)) {
+      fs.rmSync(directory, { recursive: true, force: true })
+    }
+  })
+
+  it("starts unrestricted browsing from the configured root", () => {
+    const rootDir = createTempRoot()
+    fs.mkdirSync(path.join(rootDir, "project"))
+
+    const browser = new FileSystemBrowser({ rootDir, unrestricted: true })
+    const listing = browser.browse()
+
+    assert.equal(listing.metadata.scope, "unrestricted")
+    assert.equal(listing.metadata.currentPath, rootDir)
+    assert.equal(listing.metadata.rootPath, rootDir)
+    assert.equal(listing.metadata.displayPath, rootDir)
+    assert.equal(listing.metadata.pathKind, "absolute")
+    assert.ok(listing.entries.some((entry) => entry.name === "project" && entry.absolutePath === path.join(rootDir, "project")))
+  })
+
+  it("treats dot as the configured unrestricted root", () => {
+    const rootDir = createTempRoot()
+    const browser = new FileSystemBrowser({ rootDir, unrestricted: true })
+
+    const listing = browser.browse(".")
+
+    assert.equal(listing.metadata.currentPath, rootDir)
+    assert.equal(listing.metadata.rootPath, rootDir)
+  })
+
+  it("allows unrestricted browsing outside the configured root", () => {
+    const rootDir = createTempRoot()
+    const parentDir = path.dirname(rootDir)
+    const browser = new FileSystemBrowser({ rootDir, unrestricted: true })
+
+    const listing = browser.browse(parentDir)
+
+    assert.equal(listing.metadata.currentPath, parentDir)
+    assert.equal(listing.metadata.rootPath, rootDir)
+    assert.ok(listing.entries.some((entry) => entry.absolutePath === rootDir))
+  })
+
+  it("creates folders under the configured unrestricted root by default", () => {
+    const rootDir = createTempRoot()
+    const browser = new FileSystemBrowser({ rootDir, unrestricted: true })
+
+    const created = browser.createFolder(undefined, "created-folder")
+
+    assert.equal(created.path, path.join(rootDir, "created-folder"))
+    assert.equal(created.absolutePath, path.join(rootDir, "created-folder"))
+    assert.equal(fs.statSync(created.absolutePath).isDirectory(), true)
+  })
+
+  it("reports the configured root for the Windows drives pseudo-root", () => {
+    const rootDir = createTempRoot()
+    const browser = new FileSystemBrowser({ rootDir, unrestricted: true, platform: "win32" })
+
+    const listing = browser.browse(WINDOWS_DRIVES_ROOT)
+
+    assert.equal(listing.metadata.scope, "unrestricted")
+    assert.equal(listing.metadata.currentPath, WINDOWS_DRIVES_ROOT)
+    assert.equal(listing.metadata.rootPath, rootDir)
+    assert.equal(listing.metadata.pathKind, "drives")
+  })
+})
+
+function createTempRoot(): string {
+  const root = fs.mkdtempSync(path.join(os.tmpdir(), "codenomad-browser-"))
+  tempRoots.push(root)
+  return fs.realpathSync(root)
+}
diff --git a/packages/server/src/filesystem/__tests__/search-cache.test.ts b/packages/server/src/filesystem/__tests__/search-cache.test.ts
index f1facf9d..1823c5f8 100644
--- a/packages/server/src/filesystem/__tests__/search-cache.test.ts
+++ b/packages/server/src/filesystem/__tests__/search-cache.test.ts
@@ -38,12 +38,12 @@ describe("workspace search cache", () => {
     const workspacePath = "/tmp/workspace"
 
     refreshWorkspaceCandidates(workspacePath, () => [createEntry("file-a")], 5_000)
-    const initial = getWorkspaceCandidates(workspacePath)
+    const initial = getWorkspaceCandidates(workspacePath, 5_001)
     assert.ok(initial)
     assert.equal(initial[0].name, "file-a")
 
     refreshWorkspaceCandidates(workspacePath, () => [createEntry("file-b")], 6_000)
-    const refreshed = getWorkspaceCandidates(workspacePath)
+    const refreshed = getWorkspaceCandidates(workspacePath, 6_001)
     assert.ok(refreshed)
     assert.equal(refreshed[0].name, "file-b")
   })
diff --git a/packages/server/src/filesystem/browser.ts b/packages/server/src/filesystem/browser.ts
index 679a8882..cd6c2a9e 100644
--- a/packages/server/src/filesystem/browser.ts
+++ b/packages/server/src/filesystem/browser.ts
@@ -12,6 +12,7 @@ import {
 interface FileSystemBrowserOptions {
   rootDir: string
   unrestricted?: boolean
+  platform?: NodeJS.Platform
 }
 
 interface DirectoryReadOptions {
@@ -32,7 +33,7 @@ export class FileSystemBrowser {
     this.root = path.resolve(options.rootDir)
     this.unrestricted = Boolean(options.unrestricted)
     this.homeDir = os.homedir()
-    this.isWindows = process.platform === "win32"
+    this.isWindows = (options.platform ?? process.platform) === "win32"
   }
 
   list(relativePath = ".", options: { includeFiles?: boolean } = {}): FileSystemEntry[] {
@@ -138,7 +139,7 @@ export class FileSystemBrowser {
       scope: "unrestricted",
       currentPath: resolvedPath,
       parentPath,
-      rootPath: this.homeDir,
+      rootPath: this.root,
       homePath: this.homeDir,
       displayPath: resolvedPath,
       pathKind: "absolute",
@@ -181,7 +182,7 @@ export class FileSystemBrowser {
       scope: "unrestricted",
       currentPath: WINDOWS_DRIVES_ROOT,
       parentPath: undefined,
-      rootPath: this.homeDir,
+      rootPath: this.root,
       homePath: this.homeDir,
       displayPath: "Drives",
       pathKind: "drives",
@@ -318,7 +319,7 @@ export class FileSystemBrowser {
 
   private resolveUnrestrictedPath(input: string | undefined): string {
     if (!input || input === "." || input === "./") {
-      return this.homeDir
+      return this.root
     }
 
     if (this.isWindows) {

From 5356cce0c4aa64552c24e8315945e25fd0ecee99 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Thu, 7 May 2026 17:45:31 +0100
Subject: [PATCH 12/39] docs: require detailed commit messages

Document the repository expectation that future commits include more than a terse subject. The new guidance asks agents to explain the user-visible behavior change, implementation approach, relevant edge cases or platform considerations, and validation coverage.

This makes the detailed commit style used for recent server work explicit for future changes, helping reviews understand why a change exists and how regressions were prevented without needing to reconstruct intent from the diff alone.
---
 AGENTS.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/AGENTS.md b/AGENTS.md
index 89d70ac4..3a8b08cc 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -47,3 +47,7 @@ Behavior for agents:
 ## Tooling Preferences
 - Use the `edit` tool for modifying existing files; prefer it over other editing methods.
 - Use the `write` tool only when creating new files from scratch.
+
+## Commit Message Guidelines
+- When creating commits, use detailed commit messages: a concise conventional-style subject followed by body paragraphs that explain the user-visible behavior change, the implementation approach, important edge cases or platform considerations, and the validation or test coverage added.
+- Prefer messages that explain why the change exists and how regressions are prevented, not just a list of touched files.

From 399a7d91abc2677946cfb2b18c056de36a28c63d Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Thu, 7 May 2026 17:57:22 +0100
Subject: [PATCH 13/39] Disable NomadWorks for now

---
 .nomadworks/nomadworks.yaml | 2 +-
 .opencode/opencode.jsonc    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.nomadworks/nomadworks.yaml b/.nomadworks/nomadworks.yaml
index c0775f09..52e3677a 100644
--- a/.nomadworks/nomadworks.yaml
+++ b/.nomadworks/nomadworks.yaml
@@ -1,5 +1,5 @@
 # NomadWorks repository configuration
-enabled: true
+enabled: false
 team_mode: full
 
 defaults:
diff --git a/.opencode/opencode.jsonc b/.opencode/opencode.jsonc
index e4602ce2..ddc29a01 100644
--- a/.opencode/opencode.jsonc
+++ b/.opencode/opencode.jsonc
@@ -1,6 +1,6 @@
 {
   "$schema": "https://opencode.ai/config.json",
   "plugin": [
-    "@neuralnomads/nomadworks@0.1.0-rc.10"
+    // "@neuralnomads/nomadworks@0.1.0-rc.10"
   ]
 }
\ No newline at end of file

From a4bb223775e05b0b1a4d851d82714ba36655ef31 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Thu, 7 May 2026 18:57:25 +0100
Subject: [PATCH 14/39] feat(ui): add chat history search (#400)

Add session-scoped chat history search that opens from Cmd/Ctrl+F or the
session header search button. The search scans normalized message
records rather than rendered DOM so virtualized/offscreen history can be
found, while hidden synthetic content and preference-hidden thinking
remain excluded from normal results.

Render matches in the message stream and timeline with yellow
highlights, jump between matches, expand matching thinking blocks, and
scroll the active inline match into view for long messages. Search waits
for at least three characters and debounces indexing so long sessions
show an explicit searching state instead of a false empty result.

Validation: npm run typecheck --workspace @codenomad/ui; npm run build
--workspace @codenomad/ui.
---
 .../components/instance/instance-shell2.tsx   |  32 +-
 packages/ui/src/components/message-block.tsx  | 127 +++++++-
 .../ui/src/components/message-section.tsx     | 287 +++++++++++++++++-
 .../ui/src/components/message-timeline.tsx    |  10 +-
 .../tool-call/renderers/apply-patch.tsx       |   2 +
 .../components/tool-call/renderers/bash.tsx   |   2 +
 .../tool-call/renderers/default.tsx           |   2 +
 .../components/tool-call/renderers/edit.tsx   |   2 +
 .../tool-call/renderers/invalid.tsx           |   2 +
 .../components/tool-call/renderers/patch.tsx  |   2 +
 .../tool-call/renderers/question.tsx          |   2 +
 .../components/tool-call/renderers/read.tsx   |   2 +
 .../components/tool-call/renderers/task.tsx   |   2 +
 .../components/tool-call/renderers/todo.tsx   |   2 +
 .../tool-call/renderers/webfetch.tsx          |   2 +
 .../components/tool-call/renderers/write.tsx  |   2 +
 .../src/components/tool-call/search-text.ts   | 182 +++++++++++
 packages/ui/src/components/tool-call/types.ts |  11 +
 .../ui/src/lib/i18n/messages/en/instance.ts   |   1 +
 .../ui/src/lib/i18n/messages/en/messaging.ts  |  12 +
 .../ui/src/lib/i18n/messages/es/instance.ts   |   1 +
 .../ui/src/lib/i18n/messages/es/messaging.ts  |  12 +
 .../ui/src/lib/i18n/messages/fr/instance.ts   |   1 +
 .../ui/src/lib/i18n/messages/fr/messaging.ts  |  12 +
 .../ui/src/lib/i18n/messages/he/instance.ts   |   1 +
 .../ui/src/lib/i18n/messages/he/messaging.ts  |  12 +
 .../ui/src/lib/i18n/messages/ja/instance.ts   |   1 +
 .../ui/src/lib/i18n/messages/ja/messaging.ts  |  12 +
 .../ui/src/lib/i18n/messages/ru/instance.ts   |   1 +
 .../ui/src/lib/i18n/messages/ru/messaging.ts  |  12 +
 .../src/lib/i18n/messages/zh-Hans/instance.ts |   1 +
 .../lib/i18n/messages/zh-Hans/messaging.ts    |  12 +
 packages/ui/src/lib/session-search.ts         | 192 ++++++++++++
 .../src/styles/messaging/message-section.css  | 101 ++++++
 .../src/styles/messaging/message-timeline.css |  17 ++
 35 files changed, 1052 insertions(+), 22 deletions(-)
 create mode 100644 packages/ui/src/components/tool-call/search-text.ts
 create mode 100644 packages/ui/src/lib/session-search.ts

diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 727504c9..bdfed7f3 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -42,7 +42,7 @@ import { useSessionSidebarRequests } from "./shell/useSessionSidebarRequests"
 import RightPanel from "./shell/right-panel/RightPanel"
 import { useDrawerChrome } from "./shell/useDrawerChrome"
 import { getRetrySeconds, getSessionRetry, getSessionStatus, shouldShowSessionStatus } from "../../stores/session-status"
-import { Maximize2, ShieldAlert } from "lucide-solid"
+import { Maximize2, Search, ShieldAlert } from "lucide-solid"
 import type { PromptInputApi } from "../prompt-input/types"
 
 import type { LayoutMode } from "./shell/types"
@@ -67,6 +67,7 @@ import {
 } from "../../stores/permission-auto-accept"
 
 const log = getLogger("session")
+const OPEN_SESSION_SEARCH_EVENT = "codenomad:open-session-search"
 
 interface InstanceShellProps {
   instance: Instance
@@ -402,6 +403,11 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     showCommandPalette(props.instance.id)
   }
 
+  const handleChatSearchClick = () => {
+    if (typeof window === "undefined") return
+    window.dispatchEvent(new CustomEvent(OPEN_SESSION_SEARCH_EVENT))
+  }
+
   const openBackgroundOutput = (process: BackgroundProcess) => {
     setSelectedBackgroundProcess(process)
     setShowBackgroundOutput(true)
@@ -729,6 +735,17 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                     </div>
 
                     <div class="flex flex-wrap items-center justify-center gap-1">
+                      <Show when={!showingInfoView()}>
+                        <IconButton
+                          color="inherit"
+                          onClick={handleChatSearchClick}
+                          aria-label={t("instanceShell.chatSearch.openAriaLabel")}
+                          title={t("instanceShell.chatSearch.openAriaLabel")}
+                          size="small"
+                        >
+                          <Search class="w-5 h-5" aria-hidden="true" />
+                        </IconButton>
+                      </Show>
                       <button
                         type="button"
                         class="connection-status-button command-palette-button"
@@ -839,7 +856,18 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                 </span>
 
                 <div class="ms-auto flex items-center gap-3">
-                  <div class="connection-status-meta flex items-center gap-3">
+                <div class="connection-status-meta flex items-center gap-3">
+                    <Show when={!showingInfoView()}>
+                      <IconButton
+                        color="inherit"
+                        onClick={handleChatSearchClick}
+                        aria-label={t("instanceShell.chatSearch.openAriaLabel")}
+                        title={t("instanceShell.chatSearch.openAriaLabel")}
+                        size="small"
+                      >
+                        <Search class="w-5 h-5" aria-hidden="true" />
+                      </IconButton>
+                    </Show>
                     <Show when={connectionStatus() === "connected"}>
                       <span class="status-indicator connected">
                         <span class="status-dot" />
diff --git a/packages/ui/src/components/message-block.tsx b/packages/ui/src/components/message-block.tsx
index 352a6dba..04c15e7a 100644
--- a/packages/ui/src/components/message-block.tsx
+++ b/packages/ui/src/components/message-block.tsx
@@ -17,6 +17,7 @@ import type { DeleteHoverState } from "../types/delete-hover"
 import { useSpeech } from "../lib/hooks/use-speech"
 import SpeechActionButton from "./speech-action-button"
 import { createFollowScroll } from "../lib/follow-scroll"
+import type { SessionSearchMatch } from "../lib/session-search"
 
 function DeleteUpToIcon() {
   return (
@@ -189,6 +190,83 @@ function clearInstanceCaches(instanceId: string) {
 
 messageStoreBus.onInstanceDestroyed(clearInstanceCaches)
 
+function removeSearchMarks(root: HTMLElement) {
+  const marks = Array.from(root.querySelectorAll("mark.session-search-match"))
+  for (const mark of marks) {
+    const parent = mark.parentNode
+    if (!parent) continue
+    parent.replaceChild(document.createTextNode(mark.textContent ?? ""), mark)
+    parent.normalize()
+  }
+}
+
+function getPartIdForSearchContainer(container: HTMLElement): string | undefined {
+  const target = container.closest<HTMLElement>("[data-part-id]") ?? container
+  const id = target.dataset.partId
+  return id && id.length > 0 ? id : undefined
+}
+
+function applySearchMarks(root: HTMLElement, query: string, activeMatch?: SessionSearchMatch | null, scrollActive = false) {
+  removeSearchMarks(root)
+  const normalizedQuery = query.trim().toLocaleLowerCase()
+  if (!normalizedQuery) return
+
+  const containers = Array.from(root.querySelectorAll<HTMLElement>(".message-text, .tool-call, .message-reasoning-text"))
+  let occurrenceInActivePart = 0
+  let activeMark: HTMLElement | null = null
+
+  for (const container of containers) {
+    const containerPartId = getPartIdForSearchContainer(container)
+    const canContainActiveMatch = Boolean(activeMatch) && (!activeMatch?.partId || activeMatch.partId === containerPartId)
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, {
+      acceptNode(node) {
+        const parent = node.parentElement
+        if (!parent) return NodeFilter.FILTER_REJECT
+        if (parent.closest("button, input, textarea, select, mark.session-search-match")) return NodeFilter.FILTER_REJECT
+        if (!node.nodeValue || !node.nodeValue.toLocaleLowerCase().includes(normalizedQuery)) return NodeFilter.FILTER_REJECT
+        return NodeFilter.FILTER_ACCEPT
+      },
+    })
+
+    const textNodes: Text[] = []
+    while (walker.nextNode()) {
+      textNodes.push(walker.currentNode as Text)
+    }
+
+    for (const textNode of textNodes) {
+      const original = textNode.nodeValue ?? ""
+      const lower = original.toLocaleLowerCase()
+      const fragment = document.createDocumentFragment()
+      let cursor = 0
+      while (cursor < original.length) {
+        const index = lower.indexOf(normalizedQuery, cursor)
+        if (index === -1) break
+        if (index > cursor) {
+          fragment.appendChild(document.createTextNode(original.slice(cursor, index)))
+        }
+        const mark = document.createElement("mark")
+        const isActive = Boolean(canContainActiveMatch && activeMatch && occurrenceInActivePart === activeMatch.occurrence)
+        mark.className = isActive ? "session-search-match session-search-match-active" : "session-search-match"
+        mark.textContent = original.slice(index, index + normalizedQuery.length)
+        fragment.appendChild(mark)
+        if (canContainActiveMatch) {
+          if (isActive) activeMark = mark
+          occurrenceInActivePart += 1
+        }
+        cursor = index + normalizedQuery.length
+      }
+      if (cursor < original.length) {
+        fragment.appendChild(document.createTextNode(original.slice(cursor)))
+      }
+      textNode.parentNode?.replaceChild(fragment, textNode)
+    }
+  }
+
+  if (activeMark && scrollActive) {
+    requestAnimationFrame(() => activeMark?.scrollIntoView({ block: "center", inline: "nearest", behavior: "smooth" }))
+  }
+}
+
 interface ContentDisplayItem {
   type: "content"
   key: string
@@ -590,6 +668,9 @@ interface MessageBlockProps {
   onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
   onFork?: (messageId?: string) => void
   onContentRendered?: () => void
+  searchQuery?: Accessor<string>
+  searchResultMessageIds?: Accessor<Set<string>>
+  activeSearchMatch?: Accessor<SessionSearchMatch | null>
 }
 
 export default function MessageBlock(props: MessageBlockProps) {
@@ -597,6 +678,7 @@ export default function MessageBlock(props: MessageBlockProps) {
   const record = createMemo(() => props.store().getMessage(props.messageId))
   const messageInfo = createMemo(() => props.store().getMessageInfo(props.messageId))
   const sessionCache = getSessionRenderCache(props.instanceId, props.sessionId)
+  let blockRef: HTMLDivElement | undefined
   const isDeleteMessageHovered = () => {
     const hover = props.deleteHover?.() ?? ({ kind: "none" } as DeleteHoverState)
 
@@ -621,6 +703,31 @@ export default function MessageBlock(props: MessageBlockProps) {
     return false
   }
 
+  const isSearchResult = () => Boolean(props.searchResultMessageIds?.().has(props.messageId))
+  const activeSearchMatch = () => props.activeSearchMatch?.() ?? null
+  const isActiveSearchResult = () => activeSearchMatch()?.messageId === props.messageId
+  let lastInlineScrolledSearchMatchId: string | null = null
+
+  createEffect(() => {
+    const query = props.searchQuery?.() ?? ""
+    const active = activeSearchMatch()
+    const relevantActiveMatch = active?.messageId === props.messageId ? active : null
+    const shouldScrollActive = Boolean(relevantActiveMatch && relevantActiveMatch.id !== lastInlineScrolledSearchMatchId)
+    if (shouldScrollActive && relevantActiveMatch) {
+      lastInlineScrolledSearchMatchId = relevantActiveMatch.id
+    }
+    const current = record()
+    if (current) void current.revision
+    const element = blockRef
+    if (!element) return
+
+    const frame = requestAnimationFrame(() => applySearchMarks(element, query, relevantActiveMatch, shouldScrollActive))
+    onCleanup(() => {
+      cancelAnimationFrame(frame)
+      removeSearchMarks(element)
+    })
+  })
+
   const block = createMemo<MessageDisplayBlock | null>(() => {
     const current = record()
     if (!current) return null
@@ -811,9 +918,14 @@ export default function MessageBlock(props: MessageBlockProps) {
     <Show when={block()}>
       {(resolvedBlock) => (
         <div
+          ref={(el) => {
+            blockRef = el
+          }}
           class="message-stream-block"
           data-message-id={resolvedBlock().record.id}
           data-delete-message-hover={isDeleteMessageHovered() ? "true" : undefined}
+          data-search-result={isSearchResult() ? "true" : undefined}
+          data-search-active={isActiveSearchResult() ? "true" : undefined}
         >
           <Index each={resolvedBlock().items}>
             {(item, index) => (
@@ -841,7 +953,7 @@ export default function MessageBlock(props: MessageBlockProps) {
                   {(() => {
                     const toolItem = item() as ToolDisplayItem
                     return (
-                      <div class="tool-call-message" data-key={toolItem.key}>
+                      <div class="tool-call-message" data-key={toolItem.key} data-part-id={toolItem.partId}>
                           <ToolCallItem
                             instanceId={props.instanceId}
                             sessionId={props.sessionId}
@@ -924,6 +1036,7 @@ export default function MessageBlock(props: MessageBlockProps) {
                     selectedMessageIds={props.selectedMessageIds}
                     onToggleSelectedMessage={props.onToggleSelectedMessage}
                     onContentRendered={props.onContentRendered}
+                    forceExpanded={activeSearchMatch()?.partId === (item() as ReasoningDisplayItem).partId}
                   />
                 </Match>
               </Switch>
@@ -1309,6 +1422,7 @@ interface ReasoningCardProps {
   selectedMessageIds?: () => Set<string>
   onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
   onContentRendered?: () => void
+  forceExpanded?: boolean
 }
 
 function ReasoningStreamOutput(props: {
@@ -1390,6 +1504,12 @@ function ReasoningCard(props: ReasoningCardProps) {
     setExpanded(Boolean(props.defaultExpanded))
   })
 
+  createEffect(() => {
+    if (props.forceExpanded) {
+      setExpanded(true)
+    }
+  })
+
   const timestamp = () => {
     const value = props.messageInfo?.time?.created ?? (props.part as any)?.time?.start ?? Date.now()
     const date = new Date(value)
@@ -1497,7 +1617,10 @@ function ReasoningCard(props: ReasoningCardProps) {
   }
 
   return (
-    <div class="delete-hover-scope message-reasoning-card">
+    <div
+      class="delete-hover-scope message-reasoning-card"
+      data-part-id={typeof (props.part as any)?.id === "string" ? (props.part as any).id : undefined}
+    >
       <div class="message-reasoning-header">
         <button
           type="button"
diff --git a/packages/ui/src/components/message-section.tsx b/packages/ui/src/components/message-section.tsx
index 442e021a..f2cc7abb 100644
--- a/packages/ui/src/components/message-section.tsx
+++ b/packages/ui/src/components/message-section.tsx
@@ -1,5 +1,5 @@
 import { Show, createEffect, createMemo, createSignal, onCleanup, on, untrack } from "solid-js"
-import { MoreHorizontal, Pause, Trash, X } from "lucide-solid"
+import { ChevronDown, ChevronUp, MoreHorizontal, Pause, Search, Trash, X } from "lucide-solid"
 import Kbd from "./kbd"
 import MessageBlock from "./message-block"
 import { getMessageAnchorId, getMessageIdFromAnchorId } from "./message-anchors"
@@ -19,12 +19,17 @@ import type { DeleteHoverState } from "../types/delete-hover"
 import { partHasRenderableText } from "../types/message"
 import { buildRecordDisplayData } from "../stores/message-v2/record-display-cache"
 import { getPartCharCount } from "../lib/token-utils"
+import { buildSessionSearchMatches } from "../lib/session-search"
+import type { SessionSearchMatch } from "../lib/session-search"
 
 const SCROLL_SENTINEL_MARGIN_PX = 8
 const MESSAGE_SCROLL_CACHE_SCOPE = "message-stream"
 const QUOTE_SELECTION_MAX_LENGTH = 2000
 const STREAMING_TEXT_HOLD_TOP_THRESHOLD_PX = 8
+const SEARCH_DEBOUNCE_MS = 250
+const SEARCH_MIN_CHARS = 3
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
+const OPEN_SESSION_SEARCH_EVENT = "codenomad:open-session-search"
 
 export interface MessageSectionProps {
   instanceId: string
@@ -144,8 +149,16 @@ export default function MessageSection(props: MessageSectionProps) {
   const [expandedMessageIds, setExpandedMessageIds] = createSignal<Set<string>>(new Set())
   const [selectionMode, setSelectionMode] = createSignal<"all" | "tools">("all")
   const [isDeleteMenuOpen, setIsDeleteMenuOpen] = createSignal(false)
+  const [isSearchOpen, setIsSearchOpen] = createSignal(false)
+  const [searchQuery, setSearchQuery] = createSignal("")
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = createSignal("")
+  const [searchedQuery, setSearchedQuery] = createSignal("")
+  const [isSearchPending, setIsSearchPending] = createSignal(false)
+  const [searchMatches, setSearchMatches] = createSignal<SessionSearchMatch[]>([])
+  const [activeSearchIndex, setActiveSearchIndex] = createSignal(0)
   let deleteMenuRef: HTMLDivElement | undefined
   let deleteMenuButtonRef: HTMLButtonElement | undefined
+  let searchInputRef: HTMLInputElement | undefined
 
   // Deletion is only allowed for messages/tool parts that occur AFTER the most
   // recent compaction. Compaction effectively resets the stored context; deleting
@@ -161,6 +174,21 @@ export default function MessageSection(props: MessageSectionProps) {
 
   const lastAssistantMessageId = createMemo(() => store().getLastAssistantMessageId(props.sessionId))
 
+  const activeSearchMatch = createMemo(() => {
+    const matches = searchMatches()
+    if (matches.length === 0) return null
+    const index = Math.min(Math.max(activeSearchIndex(), 0), matches.length - 1)
+    return matches[index] ?? null
+  })
+
+  const searchResultMessageIds = createMemo(() => new Set(searchMatches().map((match) => match.messageId)))
+
+  const trimmedSearchQuery = createMemo(() => searchQuery().trim())
+  const isSearchSettled = createMemo(() => {
+    const query = trimmedSearchQuery()
+    return query.length >= SEARCH_MIN_CHARS && !isSearchPending() && searchedQuery().trim() === query
+  })
+
   const lastCompactionIndex = createMemo(() => {
     // Depend on a single session revision signal (not every message/part read)
     // to keep reactive overhead small.
@@ -355,6 +383,33 @@ export default function MessageSection(props: MessageSectionProps) {
   const [timelineSegments, setTimelineSegments] = createSignal<TimelineSegment[]>([])
   const hasTimelineSegments = () => timelineSegments().length > 0
 
+  function segmentMatchesSearch(segment: TimelineSegment, match: { messageId: string; partId?: string; partType?: string }): boolean {
+    if (segment.messageId !== match.messageId) return false
+    if (!match.partId) return true
+    if (segment.partId === match.partId) return true
+    if (segment.partIds?.includes(match.partId)) return true
+    if (segment.toolPartIds?.includes(match.partId)) return true
+    return false
+  }
+
+  const searchMatchedTimelineSegmentIds = createMemo(() => {
+    const matches = searchMatches()
+    if (matches.length === 0) return new Set<string>()
+    const result = new Set<string>()
+    for (const segment of timelineSegments()) {
+      if (matches.some((match) => segmentMatchesSearch(segment, match))) {
+        result.add(segment.id)
+      }
+    }
+    return result
+  })
+
+  const activeSearchTimelineSegmentId = createMemo(() => {
+    const match = activeSearchMatch()
+    if (!match) return null
+    return timelineSegments().find((segment) => segmentMatchesSearch(segment, match))?.id ?? null
+  })
+
   const seenTimelineMessageIds = new Set<string>()
   const seenTimelineSegmentKeys = new Set<string>()
   const timelinePartCountsByMessageId = new Map<string, number>()
@@ -705,6 +760,27 @@ export default function MessageSection(props: MessageSectionProps) {
     setQuoteSelection(null)
   }
 
+  function openSearch() {
+    setIsSearchOpen(true)
+    requestAnimationFrame(() => searchInputRef?.focus())
+  }
+
+  function closeSearch() {
+    setIsSearchOpen(false)
+    setSearchQuery("")
+    setDebouncedSearchQuery("")
+    setSearchedQuery("")
+    setIsSearchPending(false)
+    setSearchMatches([])
+    setActiveSearchIndex(0)
+  }
+
+  function moveSearchMatch(direction: 1 | -1) {
+    const count = searchMatches().length
+    if (count === 0) return
+    setActiveSearchIndex((index) => (index + direction + count) % count)
+  }
+
   function isSelectionWithinStream(range: Range | null) {
     const container = streamElement()
     if (!range || !container) return false
@@ -1007,6 +1083,67 @@ export default function MessageSection(props: MessageSectionProps) {
     }
   })
 
+  createEffect(() => {
+    const query = searchQuery()
+    if (query.trim().length < SEARCH_MIN_CHARS) {
+      setDebouncedSearchQuery("")
+      setActiveSearchIndex(0)
+      setSearchedQuery("")
+      setIsSearchPending(false)
+      setSearchMatches([])
+      return
+    }
+    setIsSearchPending(true)
+    const timeout = window.setTimeout(() => {
+      setDebouncedSearchQuery(query)
+    }, SEARCH_DEBOUNCE_MS)
+    onCleanup(() => window.clearTimeout(timeout))
+  })
+
+  createEffect(() => {
+    sessionRevision()
+    const query = debouncedSearchQuery()
+    const includeThinking = Boolean(preferences().showThinkingBlocks)
+    if (query.trim().length < SEARCH_MIN_CHARS) {
+      return
+    }
+
+    setIsSearchPending(true)
+    const frame = requestAnimationFrame(() => {
+      const matches = buildSessionSearchMatches({
+        store: store(),
+        sessionId: props.sessionId,
+        query,
+        includeThinking,
+      })
+      setSearchMatches(matches)
+      setSearchedQuery(query)
+      setActiveSearchIndex(0)
+      setIsSearchPending(false)
+    })
+    onCleanup(() => cancelAnimationFrame(frame))
+  })
+
+  createEffect(() => {
+    const count = searchMatches().length
+    if (count === 0) {
+      if (activeSearchIndex() !== 0) setActiveSearchIndex(0)
+      return
+    }
+    if (activeSearchIndex() >= count) {
+      setActiveSearchIndex(count - 1)
+    }
+  })
+
+  let lastScrolledSearchMatchId: string | null = null
+  createEffect(() => {
+    const match = activeSearchMatch()
+    if (!match || !isSearchOpen()) return
+    if (match.id === lastScrolledSearchMatchId) return
+    lastScrolledSearchMatchId = match.id
+    listApi()?.scrollToKey(match.messageId, { behavior: "smooth", block: "start", setAutoScroll: false })
+  })
+
 
   createEffect(() => {
     if (typeof document === "undefined") return
@@ -1035,6 +1172,25 @@ export default function MessageSection(props: MessageSectionProps) {
   createEffect(() => {
     if (typeof document === "undefined") return
     const handleKeyDown = (event: KeyboardEvent) => {
+      const key = event.key.toLowerCase()
+      const isModSearch = (event.metaKey || event.ctrlKey) && !event.shiftKey && !event.altKey && key === "f"
+      if (isModSearch && isActive()) {
+        const modalOpen = Boolean(document.querySelector('[role="dialog"][aria-modal="true"]'))
+        if (!modalOpen) {
+          event.preventDefault()
+          event.stopPropagation()
+          openSearch()
+          return
+        }
+      }
+
+      if (event.key === "Escape" && isSearchOpen()) {
+        event.preventDefault()
+        event.stopPropagation()
+        closeSearch()
+        return
+      }
+
       if (event.key === "Escape" && (selectedTimelineIds().size > 0 || selectedForDeletion().size > 0)) {
         clearDeleteMode()
       }
@@ -1043,6 +1199,16 @@ export default function MessageSection(props: MessageSectionProps) {
     onCleanup(() => document.removeEventListener("keydown", handleKeyDown))
   })
 
+  createEffect(() => {
+    if (typeof window === "undefined") return
+    const handleOpenSearch = () => {
+      if (!isActive()) return
+      openSearch()
+    }
+    window.addEventListener(OPEN_SESSION_SEARCH_EVENT, handleOpenSearch)
+    onCleanup(() => window.removeEventListener(OPEN_SESSION_SEARCH_EVENT, handleOpenSearch))
+  })
+
   createEffect(() => {
     if (!isDeleteMenuOpen()) return
     if (typeof document === "undefined") return
@@ -1221,26 +1387,113 @@ export default function MessageSection(props: MessageSectionProps) {
               onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
               onFork={props.onFork}
               onContentRendered={handleContentRendered}
+              searchQuery={debouncedSearchQuery}
+              searchResultMessageIds={searchResultMessageIds}
+              activeSearchMatch={activeSearchMatch}
             />
           )}
           renderOverlay={() => (
-            <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")}>
-                      {t("messageSection.quote.addAsQuote")}
-                    </button>
-                    <button type="button" class="message-quote-button" onClick={() => handleQuoteSelectionRequest("code")}>
-                      {t("messageSection.quote.addAsCode")}
-                    </button>
-                    <button type="button" class="message-quote-button" onClick={() => void handleCopySelectionRequest()}>
-                      {t("messageSection.quote.copy")}
-                    </button>
+            <>
+              <Show when={isSearchOpen()}>
+                <div class="message-search-popover modal-surface" role="search" aria-label={t("messageSection.search.ariaLabel")}>
+                  <div class="modal-search-container message-search-container">
+                    <div class="message-search-input-row">
+                      <Search class="w-4 h-4 modal-search-icon" aria-hidden="true" />
+                      <input
+                        ref={(el) => {
+                          searchInputRef = el
+                        }}
+                        class="modal-search-input message-search-input"
+                        type="search"
+                        value={searchQuery()}
+                        placeholder={t("messageSection.search.placeholder")}
+                        onInput={(event) => {
+                          setSearchQuery(event.currentTarget.value)
+                        }}
+                        onKeyDown={(event) => {
+                          if (event.key === "Enter") {
+                            event.preventDefault()
+                            moveSearchMatch(event.shiftKey ? -1 : 1)
+                            return
+                          }
+                          if (event.key === "Escape") {
+                            event.preventDefault()
+                            closeSearch()
+                          }
+                        }}
+                      />
+                      <span class="message-search-count" aria-live="polite">
+                        {searchQuery().trim().length === 0
+                          ? t("messageSection.search.count.empty")
+                          : trimmedSearchQuery().length < SEARCH_MIN_CHARS
+                            ? t("messageSection.search.count.minChars", { count: String(SEARCH_MIN_CHARS) })
+                          : isSearchPending()
+                            ? t("messageSection.search.count.searching")
+                          : searchMatches().length === 0
+                            ? t("messageSection.search.count.none")
+                            : t("messageSection.search.count.matches", {
+                                current: String(activeSearchIndex() + 1),
+                                total: String(searchMatches().length),
+                              })}
+                      </span>
+                      <button
+                        type="button"
+                        class="message-search-button"
+                        onClick={() => moveSearchMatch(-1)}
+                        disabled={searchMatches().length === 0}
+                        aria-label={t("messageSection.search.previousAriaLabel")}
+                        title={t("messageSection.search.previousAriaLabel")}
+                      >
+                        <ChevronUp class="w-4 h-4" aria-hidden="true" />
+                      </button>
+                      <button
+                        type="button"
+                        class="message-search-button"
+                        onClick={() => moveSearchMatch(1)}
+                        disabled={searchMatches().length === 0}
+                        aria-label={t("messageSection.search.nextAriaLabel")}
+                        title={t("messageSection.search.nextAriaLabel")}
+                      >
+                        <ChevronDown class="w-4 h-4" aria-hidden="true" />
+                      </button>
+                      <button
+                        type="button"
+                        class="message-search-button"
+                        onClick={closeSearch}
+                        aria-label={t("messageSection.search.closeAriaLabel")}
+                        title={t("messageSection.search.closeAriaLabel")}
+                      >
+                        <X class="w-4 h-4" aria-hidden="true" />
+                      </button>
+                    </div>
                   </div>
+                  <Show when={trimmedSearchQuery().length >= SEARCH_MIN_CHARS && isSearchPending()}>
+                    <div class="modal-empty-state message-search-empty">{t("messageSection.search.searching")}</div>
+                  </Show>
+                  <Show when={isSearchSettled() && searchMatches().length === 0}>
+                    <div class="modal-empty-state message-search-empty">{t("messageSection.search.noVisibleMatches")}</div>
+                  </Show>
                 </div>
-              )}
-            </Show>
+              </Show>
+
+              <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")}>
+                        {t("messageSection.quote.addAsQuote")}
+                      </button>
+                      <button type="button" class="message-quote-button" onClick={() => handleQuoteSelectionRequest("code")}>
+                        {t("messageSection.quote.addAsCode")}
+                      </button>
+                      <button type="button" class="message-quote-button" onClick={() => void handleCopySelectionRequest()}>
+                        {t("messageSection.quote.copy")}
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </Show>
+            </>
           )}
         />
 
@@ -1384,6 +1637,8 @@ export default function MessageSection(props: MessageSectionProps) {
               onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
               selectedMessageIds={selectedForDeletion}
               onToggleSelectedMessage={setMessageSelectedForDeletion}
+              searchMatchedSegmentIds={searchMatchedTimelineSegmentIds}
+              activeSearchSegmentId={activeSearchTimelineSegmentId}
             />
           </div>
         </Show>
diff --git a/packages/ui/src/components/message-timeline.tsx b/packages/ui/src/components/message-timeline.tsx
index 17cd7d10..641bf0f7 100644
--- a/packages/ui/src/components/message-timeline.tsx
+++ b/packages/ui/src/components/message-timeline.tsx
@@ -50,6 +50,8 @@ interface MessageTimelineProps {
   onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
   selectedMessageIds?: () => Set<string>
   onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
+  searchMatchedSegmentIds?: Accessor<Set<string>>
+  activeSearchSegmentId?: Accessor<string | null>
 }
 
 const MAX_TOOLTIP_LENGTH = 220
@@ -856,6 +858,8 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
                 onCleanup(() => buttonRefs.delete(segment.id))
                 const isActive = () => props.activeSegmentId === segment.id
                 const isSelected = () => props.selectedIds?.().has(segment.id)
+                const isSearchMatch = () => props.searchMatchedSegmentIds?.().has(segment.id) ?? false
+                const isActiveSearchMatch = () => props.activeSearchSegmentId?.() === segment.id
                 const state = () => segmentStateFor(segment.id)
                 const isDeleteHovered = () => state().deleteHovered
                 const isDeleteSelected = () => state().deleteSelected
@@ -891,7 +895,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
                       ref={(el) => registerButtonRef(segment.id, el)}
                       type="button"
                       data-variant={segment.variant}
-                      class={`message-timeline-segment message-timeline-${segment.type} ${hasActivePermission() ? "message-timeline-segment-permission" : ""} ${segment.type === "compaction" ? `message-timeline-compaction-${segment.variant ?? "manual"}` : ""} ${isActive() ? "message-timeline-segment-active" : ""} ${isHidden() ? "message-timeline-segment-hidden" : ""} ${isSelected() ? "message-timeline-segment-selected" : ""} ${isDeleteSelected() ? "message-timeline-segment-delete-selected" : ""} ${groupRole() !== "none" ? `message-timeline-group-${groupRole()}` : ""}`}
+                      class={`message-timeline-segment message-timeline-${segment.type} ${hasActivePermission() ? "message-timeline-segment-permission" : ""} ${segment.type === "compaction" ? `message-timeline-compaction-${segment.variant ?? "manual"}` : ""} ${isActive() ? "message-timeline-segment-active" : ""} ${isHidden() ? "message-timeline-segment-hidden" : ""} ${isSelected() ? "message-timeline-segment-selected" : ""} ${isSearchMatch() ? "message-timeline-segment-search-match" : ""} ${isActiveSearchMatch() ? "message-timeline-segment-search-active" : ""} ${isDeleteSelected() ? "message-timeline-segment-delete-selected" : ""} ${groupRole() !== "none" ? `message-timeline-group-${groupRole()}` : ""}`}
                       data-delete-hover={isDeleteHovered() || isDeleteSelected() || isSelected() ? "true" : undefined}
                       aria-current={isActive() ? "true" : undefined}
                       aria-hidden={isHidden() ? "true" : undefined}
@@ -949,6 +953,8 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
               const segIndex = () => index()
             const isActive = () => props.activeSegmentId === segment.id
             const isSelected = () => props.selectedIds?.().has(segment.id)
+            const isSearchMatch = () => props.searchMatchedSegmentIds?.().has(segment.id) ?? false
+            const isActiveSearchMatch = () => props.activeSearchSegmentId?.() === segment.id
             const state = () => segmentStateFor(segment.id)
             const isDeleteHovered = () => state().deleteHovered
             const isDeleteSelected = () => state().deleteSelected
@@ -985,7 +991,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
                   <button
                     type="button"
                     data-variant={segment.variant}
-                   class={`message-timeline-segment message-timeline-${segment.type} ${hasActivePermission() ? "message-timeline-segment-permission" : ""} ${segment.type === "compaction" ? `message-timeline-compaction-${segment.variant ?? "manual"}` : ""} ${isActive() ? "message-timeline-segment-active" : ""} ${isHidden() ? "message-timeline-segment-hidden" : ""} ${isSelected() ? "message-timeline-segment-selected" : ""} ${isDeleteSelected() ? "message-timeline-segment-delete-selected" : ""} ${groupRole() !== "none" ? `message-timeline-group-${groupRole()}` : ""}`}
+                    class={`message-timeline-segment message-timeline-${segment.type} ${hasActivePermission() ? "message-timeline-segment-permission" : ""} ${segment.type === "compaction" ? `message-timeline-compaction-${segment.variant ?? "manual"}` : ""} ${isActive() ? "message-timeline-segment-active" : ""} ${isHidden() ? "message-timeline-segment-hidden" : ""} ${isSelected() ? "message-timeline-segment-selected" : ""} ${isSearchMatch() ? "message-timeline-segment-search-match" : ""} ${isActiveSearchMatch() ? "message-timeline-segment-search-active" : ""} ${isDeleteSelected() ? "message-timeline-segment-delete-selected" : ""} ${groupRole() !== "none" ? `message-timeline-group-${groupRole()}` : ""}`}
                    data-delete-hover={isDeleteHovered() || isDeleteSelected() || isSelected() ? "true" : undefined}
                    aria-current={isActive() ? "true" : undefined}
                    aria-hidden={isHidden() ? "true" : undefined}
diff --git a/packages/ui/src/components/tool-call/renderers/apply-patch.tsx b/packages/ui/src/components/tool-call/renderers/apply-patch.tsx
index e2dcaf50..745108a8 100644
--- a/packages/ui/src/components/tool-call/renderers/apply-patch.tsx
+++ b/packages/ui/src/components/tool-call/renderers/apply-patch.tsx
@@ -2,6 +2,7 @@ import { For, Show, createMemo } from "solid-js"
 import type { ToolRenderer } from "../types"
 import { getRelativePath, getToolName, isToolStateCompleted, readToolStatePayload } from "../utils"
 import { buildDiagnosticEntries, type DiagnosticEntry, type DiagnosticsMap } from "../diagnostics"
+import { getApplyPatchToolSearchText } from "../search-text"
 
 type ApplyPatchFile = {
   filePath?: string
@@ -45,6 +46,7 @@ function DiagnosticsInline(props: { entries: DiagnosticEntry[]; label: string; t
 
 export const applyPatchRenderer: ToolRenderer = {
   tools: ["apply_patch"],
+  getSearchText: getApplyPatchToolSearchText,
   getAction: ({ t }) => t("toolCall.applyPatch.action.preparing"),
   getTitle({ toolState, t }) {
     const state = toolState()
diff --git a/packages/ui/src/components/tool-call/renderers/bash.tsx b/packages/ui/src/components/tool-call/renderers/bash.tsx
index e417e582..4c80278d 100644
--- a/packages/ui/src/components/tool-call/renderers/bash.tsx
+++ b/packages/ui/src/components/tool-call/renderers/bash.tsx
@@ -5,6 +5,7 @@ import { ensureMarkdownContent, formatUnknown, getToolName, isToolStateCompleted
 import { tGlobal } from "../../../lib/i18n"
 import { createStableAnsiStreamUpdater } from "../ansi-render"
 import { ansiToHtml, hasAnsi } from "../../../lib/ansi"
+import { getBashToolSearchText } from "../search-text"
 
 function RunningBashOutput(props: {
   content: Accessor<string>
@@ -105,6 +106,7 @@ function BashToolBody(props: {
 
 export const bashRenderer: ToolRenderer = {
   tools: ["bash"],
+  getSearchText: getBashToolSearchText,
   getAction: () => tGlobal("toolCall.renderer.action.writingCommand"),
   getTitle({ toolState }) {
     const state = toolState()
diff --git a/packages/ui/src/components/tool-call/renderers/default.tsx b/packages/ui/src/components/tool-call/renderers/default.tsx
index 181a84f6..0d03c4a4 100644
--- a/packages/ui/src/components/tool-call/renderers/default.tsx
+++ b/packages/ui/src/components/tool-call/renderers/default.tsx
@@ -1,8 +1,10 @@
 import type { ToolRenderer } from "../types"
 import { ensureMarkdownContent, formatUnknown, isToolStateCompleted, isToolStateError, isToolStateRunning, readToolStatePayload } from "../utils"
+import { getDefaultToolSearchText } from "../search-text"
 
 export const defaultRenderer: ToolRenderer = {
   tools: ["*"],
+  getSearchText: getDefaultToolSearchText,
   renderBody({ toolState, renderMarkdown }) {
     const state = toolState()
     if (!state || state.status === "pending") return null
diff --git a/packages/ui/src/components/tool-call/renderers/edit.tsx b/packages/ui/src/components/tool-call/renderers/edit.tsx
index c35716a2..03e29d75 100644
--- a/packages/ui/src/components/tool-call/renderers/edit.tsx
+++ b/packages/ui/src/components/tool-call/renderers/edit.tsx
@@ -1,9 +1,11 @@
 import type { ToolRenderer } from "../types"
 import { ensureMarkdownContent, extractDiffPayload, getRelativePath, getToolName, isToolStateCompleted, readToolStatePayload } from "../utils"
 import { tGlobal } from "../../../lib/i18n"
+import { getDiffToolSearchText } from "../search-text"
 
 export const editRenderer: ToolRenderer = {
   tools: ["edit"],
+  getSearchText: getDiffToolSearchText,
   getAction: () => tGlobal("toolCall.renderer.action.preparingEdit"),
   getTitle({ toolState }) {
     const state = toolState()
diff --git a/packages/ui/src/components/tool-call/renderers/invalid.tsx b/packages/ui/src/components/tool-call/renderers/invalid.tsx
index 2064b12a..c86eacf5 100644
--- a/packages/ui/src/components/tool-call/renderers/invalid.tsx
+++ b/packages/ui/src/components/tool-call/renderers/invalid.tsx
@@ -1,9 +1,11 @@
 import type { ToolRenderer } from "../types"
 import { defaultRenderer } from "./default"
 import { getToolName, readToolStatePayload } from "../utils"
+import { getDefaultToolSearchText } from "../search-text"
 
 export const invalidRenderer: ToolRenderer = {
   tools: ["invalid"],
+  getSearchText: getDefaultToolSearchText,
   getTitle({ toolState }) {
     const state = toolState()
     if (!state) return getToolName("invalid")
diff --git a/packages/ui/src/components/tool-call/renderers/patch.tsx b/packages/ui/src/components/tool-call/renderers/patch.tsx
index 0d1c5221..953c916b 100644
--- a/packages/ui/src/components/tool-call/renderers/patch.tsx
+++ b/packages/ui/src/components/tool-call/renderers/patch.tsx
@@ -1,9 +1,11 @@
 import type { ToolRenderer } from "../types"
 import { ensureMarkdownContent, extractDiffPayload, getRelativePath, getToolName, isToolStateCompleted, readToolStatePayload } from "../utils"
 import { tGlobal } from "../../../lib/i18n"
+import { getDiffToolSearchText } from "../search-text"
 
 export const patchRenderer: ToolRenderer = {
   tools: ["patch"],
+  getSearchText: getDiffToolSearchText,
   getAction: () => tGlobal("toolCall.renderer.action.preparingPatch"),
   getTitle({ toolState }) {
     const state = toolState()
diff --git a/packages/ui/src/components/tool-call/renderers/question.tsx b/packages/ui/src/components/tool-call/renderers/question.tsx
index 6a1a3944..86aa9fac 100644
--- a/packages/ui/src/components/tool-call/renderers/question.tsx
+++ b/packages/ui/src/components/tool-call/renderers/question.tsx
@@ -1,7 +1,9 @@
 import type { ToolRenderer } from "../types"
+import { getQuestionToolSearchText } from "../search-text"
 
 export const questionRenderer: ToolRenderer = {
   tools: ["question"],
+  getSearchText: getQuestionToolSearchText,
   getAction: ({ t }) => t("toolCall.question.action.awaitingAnswers"),
   getTitle({ toolState, t }) {
     const state = toolState()
diff --git a/packages/ui/src/components/tool-call/renderers/read.tsx b/packages/ui/src/components/tool-call/renderers/read.tsx
index 34b1595b..65179b1e 100644
--- a/packages/ui/src/components/tool-call/renderers/read.tsx
+++ b/packages/ui/src/components/tool-call/renderers/read.tsx
@@ -1,9 +1,11 @@
 import type { ToolRenderer } from "../types"
 import { ensureMarkdownContent, getRelativePath, getToolName, inferLanguageFromPath, readToolStatePayload } from "../utils"
 import { tGlobal } from "../../../lib/i18n"
+import { getReadToolSearchText } from "../search-text"
 
 export const readRenderer: ToolRenderer = {
   tools: ["read"],
+  getSearchText: getReadToolSearchText,
   getAction: () => tGlobal("toolCall.renderer.action.readingFile"),
   getTitle({ toolState }) {
     const state = toolState()
diff --git a/packages/ui/src/components/tool-call/renderers/task.tsx b/packages/ui/src/components/tool-call/renderers/task.tsx
index 0d5a8724..bbbb531f 100644
--- a/packages/ui/src/components/tool-call/renderers/task.tsx
+++ b/packages/ui/src/components/tool-call/renderers/task.tsx
@@ -6,6 +6,7 @@ import { resolveTitleForTool } from "../tool-title"
 import { messageStoreBus } from "../../../stores/message-v2/bus"
 import { loadMessages } from "../../../stores/session-api"
 import { loading, messagesLoaded } from "../../../stores/session-state"
+import { getTaskToolSearchText } from "../search-text"
 
 interface TaskSummaryItem {
   id: string
@@ -138,6 +139,7 @@ function describeToolTitle(item: TaskSummaryItem): string {
 
 export const taskRenderer: ToolRenderer = {
   tools: ["task"],
+  getSearchText: getTaskToolSearchText,
   getAction: ({ t }) => t("toolCall.task.action.delegating"),
   getTitle({ toolState }) {
     const state = toolState()
diff --git a/packages/ui/src/components/tool-call/renderers/todo.tsx b/packages/ui/src/components/tool-call/renderers/todo.tsx
index 5169c7ab..4fd64aa8 100644
--- a/packages/ui/src/components/tool-call/renderers/todo.tsx
+++ b/packages/ui/src/components/tool-call/renderers/todo.tsx
@@ -3,6 +3,7 @@ import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { ToolRenderer } from "../types"
 import { readToolStatePayload } from "../utils"
 import { useI18n, tGlobal } from "../../../lib/i18n"
+import { getTodoToolSearchText } from "../search-text"
 
 export type TodoViewStatus = "pending" | "in_progress" | "completed" | "cancelled"
 
@@ -123,6 +124,7 @@ export function getTodoTitle(state?: ToolState): string {
 
 export const todoRenderer: ToolRenderer = {
   tools: ["todowrite", "todoread"],
+  getSearchText: getTodoToolSearchText,
   getAction: () => tGlobal("toolCall.renderer.action.planning"),
   getTitle({ toolState }) {
     return getTodoTitle(toolState())
diff --git a/packages/ui/src/components/tool-call/renderers/webfetch.tsx b/packages/ui/src/components/tool-call/renderers/webfetch.tsx
index 8efe7c73..32ac0151 100644
--- a/packages/ui/src/components/tool-call/renderers/webfetch.tsx
+++ b/packages/ui/src/components/tool-call/renderers/webfetch.tsx
@@ -1,9 +1,11 @@
 import type { ToolRenderer } from "../types"
 import { ensureMarkdownContent, formatUnknown, getToolName, readToolStatePayload } from "../utils"
 import { tGlobal } from "../../../lib/i18n"
+import { getWebfetchToolSearchText } from "../search-text"
 
 export const webfetchRenderer: ToolRenderer = {
   tools: ["webfetch"],
+  getSearchText: getWebfetchToolSearchText,
   getAction: () => tGlobal("toolCall.renderer.action.fetchingFromWeb"),
   getTitle({ toolState }) {
     const state = toolState()
diff --git a/packages/ui/src/components/tool-call/renderers/write.tsx b/packages/ui/src/components/tool-call/renderers/write.tsx
index 28885ab3..d9389b8f 100644
--- a/packages/ui/src/components/tool-call/renderers/write.tsx
+++ b/packages/ui/src/components/tool-call/renderers/write.tsx
@@ -1,9 +1,11 @@
 import type { ToolRenderer } from "../types"
 import { ensureMarkdownContent, getRelativePath, getToolName, inferLanguageFromPath, readToolStatePayload } from "../utils"
 import { tGlobal } from "../../../lib/i18n"
+import { getWriteToolSearchText } from "../search-text"
 
 export const writeRenderer: ToolRenderer = {
   tools: ["write"],
+  getSearchText: getWriteToolSearchText,
   getAction: () => tGlobal("toolCall.renderer.action.preparingWrite"),
   getTitle({ toolState }) {
     const state = toolState()
diff --git a/packages/ui/src/components/tool-call/search-text.ts b/packages/ui/src/components/tool-call/search-text.ts
new file mode 100644
index 00000000..314e7daf
--- /dev/null
+++ b/packages/ui/src/components/tool-call/search-text.ts
@@ -0,0 +1,182 @@
+import type { ToolSearchTextContext } from "./types"
+import {
+  formatUnknown,
+  isToolStateCompleted,
+  isToolStateError,
+  isToolStateRunning,
+  readToolStatePayload,
+} from "./utils"
+
+type QuestionOption = { label?: unknown; description?: unknown }
+type QuestionPrompt = { header?: unknown; question?: unknown; options?: unknown; multiple?: unknown; answer?: unknown }
+
+function appendString(values: string[], value: unknown) {
+  if (typeof value === "string" && value.trim().length > 0) values.push(value)
+}
+
+function appendFormatted(values: string[], value: unknown) {
+  const result = formatUnknown(value)
+  if (result?.text.trim()) values.push(result.text)
+}
+
+function appendBaseToolText(values: string[], context: ToolSearchTextContext) {
+  const { metadata } = readToolStatePayload(context.toolState)
+  appendString(values, context.toolName)
+  appendString(values, metadata.title)
+  appendString(values, metadata.description)
+  appendString(values, context.toolState && "title" in context.toolState ? (context.toolState as any).title : undefined)
+}
+
+function appendToolErrorText(values: string[], context: ToolSearchTextContext) {
+  appendString(values, context.toolState && "message" in context.toolState ? (context.toolState as any).message : undefined)
+  appendString(values, context.toolState && "error" in context.toolState ? (context.toolState as any).error : undefined)
+}
+
+export function getDefaultToolSearchText(context: ToolSearchTextContext): string[] {
+  const values: string[] = []
+  const state = context.toolState
+  const { input, metadata, output } = readToolStatePayload(state)
+  appendBaseToolText(values, context)
+
+  const primaryOutput = state && isToolStateCompleted(state)
+    ? output
+    : state && (isToolStateRunning(state) || isToolStateError(state)) && metadata.output
+      ? metadata.output
+      : metadata.diff ?? metadata.preview ?? input.content
+
+  appendString(values, typeof input.command === "string" ? `$ ${input.command}` : undefined)
+  appendString(values, input.filePath)
+  appendString(values, input.path)
+  appendFormatted(values, primaryOutput)
+  appendToolErrorText(values, context)
+  return values
+}
+
+export function getBashToolSearchText(context: ToolSearchTextContext): string[] {
+  const values: string[] = []
+  const state = context.toolState
+  const { input, metadata, output } = readToolStatePayload(state)
+  appendBaseToolText(values, context)
+  appendString(values, typeof input.command === "string" && input.command.length > 0 ? `$ ${input.command}` : undefined)
+  appendFormatted(
+    values,
+    state && isToolStateCompleted(state)
+      ? output
+      : state && (isToolStateRunning(state) || isToolStateError(state))
+        ? metadata.output
+        : undefined,
+  )
+  appendToolErrorText(values, context)
+  return values
+}
+
+export function getReadToolSearchText(context: ToolSearchTextContext): string[] {
+  const values: string[] = []
+  const { input, metadata } = readToolStatePayload(context.toolState)
+  appendBaseToolText(values, context)
+  appendString(values, input.filePath)
+  appendString(values, metadata.preview)
+  appendToolErrorText(values, context)
+  return values
+}
+
+export function getWriteToolSearchText(context: ToolSearchTextContext): string[] {
+  const values: string[] = []
+  const { input, metadata } = readToolStatePayload(context.toolState)
+  appendBaseToolText(values, context)
+  appendString(values, input.filePath)
+  appendString(values, typeof input.content === "string" ? input.content : metadata.content)
+  appendToolErrorText(values, context)
+  return values
+}
+
+export function getDiffToolSearchText(context: ToolSearchTextContext): string[] {
+  const values: string[] = []
+  const { input, metadata, output } = readToolStatePayload(context.toolState)
+  appendBaseToolText(values, context)
+  appendString(values, input.filePath)
+  appendString(values, input.path)
+  appendString(values, metadata.diff)
+  appendFormatted(values, output)
+  appendFormatted(values, metadata.output)
+  appendToolErrorText(values, context)
+  return values
+}
+
+export function getApplyPatchToolSearchText(context: ToolSearchTextContext): string[] {
+  const values = getDiffToolSearchText(context)
+  const { metadata, output } = readToolStatePayload(context.toolState)
+  const files = Array.isArray((metadata as any).files) ? ((metadata as any).files as any[]) : []
+
+  for (const file of files) {
+    appendString(values, file?.filePath)
+    appendString(values, file?.relativePath)
+    appendString(values, file?.diff)
+    appendString(values, file?.patch)
+  }
+
+  appendFormatted(values, (metadata as any).diagnostics)
+  appendFormatted(values, output)
+  return values
+}
+
+export function getWebfetchToolSearchText(context: ToolSearchTextContext): string[] {
+  const values: string[] = []
+  const state = context.toolState
+  const { input, metadata, output } = readToolStatePayload(state)
+  appendBaseToolText(values, context)
+  appendString(values, input.url)
+  appendFormatted(values, state && isToolStateCompleted(state) ? output : metadata.output)
+  appendToolErrorText(values, context)
+  return values
+}
+
+export function getTaskToolSearchText(context: ToolSearchTextContext): string[] {
+  const values: string[] = []
+  const { input, metadata, output } = readToolStatePayload(context.toolState)
+  appendBaseToolText(values, context)
+  appendString(values, input.prompt)
+  appendString(values, input.subagent_type)
+  appendFormatted(values, output)
+  appendFormatted(values, metadata.summary)
+  appendToolErrorText(values, context)
+  return values
+}
+
+export function getTodoToolSearchText(context: ToolSearchTextContext): string[] {
+  const values: string[] = []
+  const { metadata } = readToolStatePayload(context.toolState)
+  const todos = Array.isArray((metadata as any).todos) ? ((metadata as any).todos as any[]) : []
+  appendBaseToolText(values, context)
+
+  for (const todo of todos) {
+    appendString(values, todo?.content)
+    appendString(values, todo?.status)
+  }
+
+  appendToolErrorText(values, context)
+  return values
+}
+
+export function getQuestionToolSearchText(context: ToolSearchTextContext): string[] {
+  const values: string[] = []
+  const { input, metadata } = readToolStatePayload(context.toolState)
+  const questions = Array.isArray(input.questions) ? (input.questions as QuestionPrompt[]) : []
+  const answers = Array.isArray((metadata as any).answers) ? ((metadata as any).answers as unknown[]) : []
+  appendBaseToolText(values, context)
+
+  for (const question of questions) {
+    appendString(values, question.header)
+    appendString(values, question.question)
+    const options = Array.isArray(question.options) ? (question.options as QuestionOption[]) : []
+    for (const option of options) {
+      appendString(values, option.label)
+      appendString(values, option.description)
+    }
+    appendFormatted(values, question.answer)
+  }
+
+  appendFormatted(values, answers)
+  appendToolErrorText(values, context)
+  return values
+}
diff --git a/packages/ui/src/components/tool-call/types.ts b/packages/ui/src/components/tool-call/types.ts
index a92d7504..425a8ea6 100644
--- a/packages/ui/src/components/tool-call/types.ts
+++ b/packages/ui/src/components/tool-call/types.ts
@@ -78,10 +78,21 @@ export interface ToolRendererContext {
   onContentRendered?: () => void
 }
 
+export interface ToolSearchTextContext {
+  toolCall: ToolCallPart
+  toolState: ToolState | undefined
+  toolName: string
+}
+
 export interface ToolRenderer {
   tools: string[]
   getTitle?(context: ToolRendererContext): string | undefined
   getAction?(context: ToolRendererContext): string | undefined
+  /**
+   * Text that is visible or directly revealable through this renderer. Keep this
+   * in sync with custom renderBody output when adding specialized tool UIs.
+   */
+  getSearchText?(context: ToolSearchTextContext): string[]
   renderBody(context: ToolRendererContext): JSXElement | null
 }
 
diff --git a/packages/ui/src/lib/i18n/messages/en/instance.ts b/packages/ui/src/lib/i18n/messages/en/instance.ts
index 73ab9373..d88196c9 100644
--- a/packages/ui/src/lib/i18n/messages/en/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/en/instance.ts
@@ -46,6 +46,7 @@ export const instanceMessages = {
 
   "instanceShell.commandPalette.openAriaLabel": "Open command palette",
   "instanceShell.commandPalette.button": "Command Palette",
+  "instanceShell.chatSearch.openAriaLabel": "Search chat history",
 
   "instanceShell.connection.ariaLabel": "Connection {status}",
   "instanceShell.connection.connected": "Connected",
diff --git a/packages/ui/src/lib/i18n/messages/en/messaging.ts b/packages/ui/src/lib/i18n/messages/en/messaging.ts
index 58422334..03c3cc0e 100644
--- a/packages/ui/src/lib/i18n/messages/en/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/en/messaging.ts
@@ -25,6 +25,18 @@ export const messagingMessages = {
   "messageSection.quote.copy": "Copy",
   "messageSection.quote.copied": "Copied!",
   "messageSection.quote.copyFailed": "Copy failed",
+  "messageSection.search.ariaLabel": "Search chat history",
+  "messageSection.search.placeholder": "Search current chat...",
+  "messageSection.search.count.empty": "Search",
+  "messageSection.search.count.minChars": "{count}+ chars",
+  "messageSection.search.count.searching": "Searching...",
+  "messageSection.search.count.none": "No matches",
+  "messageSection.search.count.matches": "{current} / {total}",
+  "messageSection.search.previousAriaLabel": "Previous match",
+  "messageSection.search.nextAriaLabel": "Next match",
+  "messageSection.search.closeAriaLabel": "Close search",
+  "messageSection.search.searching": "Searching...",
+  "messageSection.search.noVisibleMatches": "No visible matches",
   "messageTimeline.ariaLabel": "Message timeline",
   "messageTimeline.segment.user.label": "You",
   "messageTimeline.segment.assistant.label": "Asst",
diff --git a/packages/ui/src/lib/i18n/messages/es/instance.ts b/packages/ui/src/lib/i18n/messages/es/instance.ts
index 817c8237..872231e6 100644
--- a/packages/ui/src/lib/i18n/messages/es/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/es/instance.ts
@@ -46,6 +46,7 @@ export const instanceMessages = {
 
   "instanceShell.commandPalette.openAriaLabel": "Abrir paleta de comandos",
   "instanceShell.commandPalette.button": "Paleta de comandos",
+  "instanceShell.chatSearch.openAriaLabel": "Buscar en el historial del chat",
 
   "instanceShell.connection.ariaLabel": "Conexión {status}",
   "instanceShell.connection.connected": "Conectada",
diff --git a/packages/ui/src/lib/i18n/messages/es/messaging.ts b/packages/ui/src/lib/i18n/messages/es/messaging.ts
index 2e4173cf..d4e79ce2 100644
--- a/packages/ui/src/lib/i18n/messages/es/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/es/messaging.ts
@@ -25,6 +25,18 @@ export const messagingMessages = {
   "messageSection.quote.copy": "Copiar",
   "messageSection.quote.copied": "¡Copiado!",
   "messageSection.quote.copyFailed": "No se pudo copiar",
+  "messageSection.search.ariaLabel": "Buscar en el historial del chat",
+  "messageSection.search.placeholder": "Buscar en el chat actual...",
+  "messageSection.search.count.empty": "Buscar",
+  "messageSection.search.count.minChars": "{count}+ caracteres",
+  "messageSection.search.count.searching": "Buscando...",
+  "messageSection.search.count.none": "Sin coincidencias",
+  "messageSection.search.count.matches": "{current} / {total}",
+  "messageSection.search.previousAriaLabel": "Coincidencia anterior",
+  "messageSection.search.nextAriaLabel": "Siguiente coincidencia",
+  "messageSection.search.closeAriaLabel": "Cerrar búsqueda",
+  "messageSection.search.searching": "Buscando...",
+  "messageSection.search.noVisibleMatches": "No hay coincidencias visibles",
 
   "messageTimeline.ariaLabel": "Línea de tiempo de mensajes",
   "messageTimeline.segment.user.label": "Tú",
diff --git a/packages/ui/src/lib/i18n/messages/fr/instance.ts b/packages/ui/src/lib/i18n/messages/fr/instance.ts
index ffbaec47..bb7a22d0 100644
--- a/packages/ui/src/lib/i18n/messages/fr/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/instance.ts
@@ -46,6 +46,7 @@ export const instanceMessages = {
 
   "instanceShell.commandPalette.openAriaLabel": "Ouvrir la palette de commandes",
   "instanceShell.commandPalette.button": "Palette de commandes",
+  "instanceShell.chatSearch.openAriaLabel": "Rechercher dans l'historique du chat",
 
   "instanceShell.connection.ariaLabel": "Connexion {status}",
   "instanceShell.connection.connected": "Connecté",
diff --git a/packages/ui/src/lib/i18n/messages/fr/messaging.ts b/packages/ui/src/lib/i18n/messages/fr/messaging.ts
index 32bb8a9a..4dd33c0a 100644
--- a/packages/ui/src/lib/i18n/messages/fr/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/messaging.ts
@@ -25,6 +25,18 @@ export const messagingMessages = {
   "messageSection.quote.copy": "Copier",
   "messageSection.quote.copied": "Copié !",
   "messageSection.quote.copyFailed": "Impossible de copier",
+  "messageSection.search.ariaLabel": "Rechercher dans l'historique du chat",
+  "messageSection.search.placeholder": "Rechercher dans le chat actuel...",
+  "messageSection.search.count.empty": "Rechercher",
+  "messageSection.search.count.minChars": "{count}+ caractères",
+  "messageSection.search.count.searching": "Recherche...",
+  "messageSection.search.count.none": "Aucun résultat",
+  "messageSection.search.count.matches": "{current} / {total}",
+  "messageSection.search.previousAriaLabel": "Résultat précédent",
+  "messageSection.search.nextAriaLabel": "Résultat suivant",
+  "messageSection.search.closeAriaLabel": "Fermer la recherche",
+  "messageSection.search.searching": "Recherche...",
+  "messageSection.search.noVisibleMatches": "Aucun résultat visible",
 
   "messageTimeline.ariaLabel": "Chronologie des messages",
   "messageTimeline.segment.user.label": "Vous",
diff --git a/packages/ui/src/lib/i18n/messages/he/instance.ts b/packages/ui/src/lib/i18n/messages/he/instance.ts
index 71792e98..a8c9fcc1 100644
--- a/packages/ui/src/lib/i18n/messages/he/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/he/instance.ts
@@ -46,6 +46,7 @@ export const instanceMessages = {
 
   "instanceShell.commandPalette.openAriaLabel": "פתח לוח פקודות",
   "instanceShell.commandPalette.button": "לוח פקודות",
+  "instanceShell.chatSearch.openAriaLabel": "חפש בהיסטוריית הצ'אט",
 
   "instanceShell.connection.ariaLabel": "חיבור {status}",
   "instanceShell.connection.connected": "מחובר",
diff --git a/packages/ui/src/lib/i18n/messages/he/messaging.ts b/packages/ui/src/lib/i18n/messages/he/messaging.ts
index b661e012..0199ce31 100644
--- a/packages/ui/src/lib/i18n/messages/he/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/he/messaging.ts
@@ -25,6 +25,18 @@ export const messagingMessages = {
   "messageSection.quote.copy": "העתק",
   "messageSection.quote.copied": "הועתק!",
   "messageSection.quote.copyFailed": "ההעתקה נכשלה",
+  "messageSection.search.ariaLabel": "חפש בהיסטוריית הצ'אט",
+  "messageSection.search.placeholder": "חפש בצ'אט הנוכחי...",
+  "messageSection.search.count.empty": "חיפוש",
+  "messageSection.search.count.minChars": "{count}+ תווים",
+  "messageSection.search.count.searching": "מחפש...",
+  "messageSection.search.count.none": "אין התאמות",
+  "messageSection.search.count.matches": "{current} / {total}",
+  "messageSection.search.previousAriaLabel": "התאמה קודמת",
+  "messageSection.search.nextAriaLabel": "התאמה הבאה",
+  "messageSection.search.closeAriaLabel": "סגור חיפוש",
+  "messageSection.search.searching": "מחפש...",
+  "messageSection.search.noVisibleMatches": "אין התאמות גלויות",
   "messageTimeline.ariaLabel": "ציר זמן הודעות",
   "messageTimeline.segment.user.label": "אתה",
   "messageTimeline.segment.assistant.label": "סוכן",
diff --git a/packages/ui/src/lib/i18n/messages/ja/instance.ts b/packages/ui/src/lib/i18n/messages/ja/instance.ts
index 8daca349..d21b1760 100644
--- a/packages/ui/src/lib/i18n/messages/ja/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/instance.ts
@@ -46,6 +46,7 @@ export const instanceMessages = {
 
   "instanceShell.commandPalette.openAriaLabel": "コマンドパレットを開く",
   "instanceShell.commandPalette.button": "コマンドパレット",
+  "instanceShell.chatSearch.openAriaLabel": "チャット履歴を検索",
 
   "instanceShell.connection.ariaLabel": "接続 {status}",
   "instanceShell.connection.connected": "接続済み",
diff --git a/packages/ui/src/lib/i18n/messages/ja/messaging.ts b/packages/ui/src/lib/i18n/messages/ja/messaging.ts
index 893581db..e20464f3 100644
--- a/packages/ui/src/lib/i18n/messages/ja/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/messaging.ts
@@ -25,6 +25,18 @@ export const messagingMessages = {
   "messageSection.quote.copy": "コピー",
   "messageSection.quote.copied": "コピーしました",
   "messageSection.quote.copyFailed": "コピーできませんでした",
+  "messageSection.search.ariaLabel": "チャット履歴を検索",
+  "messageSection.search.placeholder": "現在のチャットを検索...",
+  "messageSection.search.count.empty": "検索",
+  "messageSection.search.count.minChars": "{count}文字以上",
+  "messageSection.search.count.searching": "検索中...",
+  "messageSection.search.count.none": "一致なし",
+  "messageSection.search.count.matches": "{current} / {total}",
+  "messageSection.search.previousAriaLabel": "前の一致",
+  "messageSection.search.nextAriaLabel": "次の一致",
+  "messageSection.search.closeAriaLabel": "検索を閉じる",
+  "messageSection.search.searching": "検索中...",
+  "messageSection.search.noVisibleMatches": "表示中の一致はありません",
 
   "messageTimeline.ariaLabel": "メッセージタイムライン",
   "messageTimeline.segment.user.label": "あなた",
diff --git a/packages/ui/src/lib/i18n/messages/ru/instance.ts b/packages/ui/src/lib/i18n/messages/ru/instance.ts
index 79821e65..42fbbe3b 100644
--- a/packages/ui/src/lib/i18n/messages/ru/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/instance.ts
@@ -46,6 +46,7 @@ export const instanceMessages = {
 
   "instanceShell.commandPalette.openAriaLabel": "Открыть палитру команд",
   "instanceShell.commandPalette.button": "Палитра команд",
+  "instanceShell.chatSearch.openAriaLabel": "Поиск по истории чата",
 
   "instanceShell.connection.ariaLabel": "Соединение {status}",
   "instanceShell.connection.connected": "Подключено",
diff --git a/packages/ui/src/lib/i18n/messages/ru/messaging.ts b/packages/ui/src/lib/i18n/messages/ru/messaging.ts
index b4b7cbf5..a14c312e 100644
--- a/packages/ui/src/lib/i18n/messages/ru/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/messaging.ts
@@ -25,6 +25,18 @@ export const messagingMessages = {
   "messageSection.quote.copy": "Копировать",
   "messageSection.quote.copied": "Скопировано!",
   "messageSection.quote.copyFailed": "Не удалось скопировать",
+  "messageSection.search.ariaLabel": "Поиск по истории чата",
+  "messageSection.search.placeholder": "Поиск в текущем чате...",
+  "messageSection.search.count.empty": "Поиск",
+  "messageSection.search.count.minChars": "{count}+ символа",
+  "messageSection.search.count.searching": "Поиск...",
+  "messageSection.search.count.none": "Нет совпадений",
+  "messageSection.search.count.matches": "{current} / {total}",
+  "messageSection.search.previousAriaLabel": "Предыдущее совпадение",
+  "messageSection.search.nextAriaLabel": "Следующее совпадение",
+  "messageSection.search.closeAriaLabel": "Закрыть поиск",
+  "messageSection.search.searching": "Поиск...",
+  "messageSection.search.noVisibleMatches": "Нет видимых совпадений",
 
   "messageTimeline.ariaLabel": "Таймлайн сообщений",
   "messageTimeline.segment.user.label": "Вы",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts
index b40d00f2..cad1d3e9 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts
@@ -46,6 +46,7 @@ export const instanceMessages = {
 
   "instanceShell.commandPalette.openAriaLabel": "打开命令面板",
   "instanceShell.commandPalette.button": "命令面板",
+  "instanceShell.chatSearch.openAriaLabel": "搜索聊天历史",
 
   "instanceShell.connection.ariaLabel": "连接 {status}",
   "instanceShell.connection.connected": "已连接",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
index 202a8693..f8022d13 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
@@ -25,6 +25,18 @@ export const messagingMessages = {
   "messageSection.quote.copy": "复制",
   "messageSection.quote.copied": "已复制！",
   "messageSection.quote.copyFailed": "无法复制",
+  "messageSection.search.ariaLabel": "搜索聊天历史",
+  "messageSection.search.placeholder": "搜索当前聊天...",
+  "messageSection.search.count.empty": "搜索",
+  "messageSection.search.count.minChars": "{count}+ 个字符",
+  "messageSection.search.count.searching": "正在搜索...",
+  "messageSection.search.count.none": "无匹配项",
+  "messageSection.search.count.matches": "{current} / {total}",
+  "messageSection.search.previousAriaLabel": "上一个匹配项",
+  "messageSection.search.nextAriaLabel": "下一个匹配项",
+  "messageSection.search.closeAriaLabel": "关闭搜索",
+  "messageSection.search.searching": "正在搜索...",
+  "messageSection.search.noVisibleMatches": "没有可见匹配项",
 
   "messageTimeline.ariaLabel": "消息时间线",
   "messageTimeline.segment.user.label": "你",
diff --git a/packages/ui/src/lib/session-search.ts b/packages/ui/src/lib/session-search.ts
new file mode 100644
index 00000000..cd894780
--- /dev/null
+++ b/packages/ui/src/lib/session-search.ts
@@ -0,0 +1,192 @@
+import type { ClientPart, MessageInfo } from "../types/message"
+import { isHiddenSyntheticTextPart } from "../types/message"
+import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
+import type { MessageRecord, MessageRole } from "../stores/message-v2/types"
+import { resolveToolRenderer } from "../components/tool-call/renderers"
+import { getDefaultToolSearchText } from "../components/tool-call/search-text"
+
+export interface SessionSearchMatch {
+  id: string
+  messageId: string
+  partId?: string
+  partType?: string
+  role: MessageRole
+  start: number
+  end: number
+  occurrence: number
+  preview: string
+}
+
+interface SearchablePartText {
+  partId?: string
+  partType?: string
+  text: string
+}
+
+export interface BuildSessionSearchMatchesOptions {
+  store: InstanceMessageStore
+  sessionId: string
+  query: string
+  includeThinking: boolean
+}
+
+const PREVIEW_RADIUS = 56
+
+function normalizeSearchValue(value: string): string {
+  return value.toLocaleLowerCase()
+}
+
+function segmentToText(segment: unknown): string {
+  if (typeof segment === "string") return segment
+  if (Array.isArray(segment)) return segment.map((entry) => segmentToText(entry)).filter(Boolean).join("\n")
+  if (!segment || typeof segment !== "object") return ""
+
+  const candidate = segment as { text?: unknown; value?: unknown; content?: unknown[] }
+  const parts: string[] = []
+  if (typeof candidate.text === "string") parts.push(candidate.text)
+  if (typeof candidate.value === "string") parts.push(candidate.value)
+  if (Array.isArray(candidate.content)) {
+    parts.push(candidate.content.map((entry) => segmentToText(entry)).filter(Boolean).join("\n"))
+  }
+  return parts.filter(Boolean).join("\n")
+}
+
+function extractReasoningText(part: ClientPart): string {
+  const text = segmentToText((part as any).text)
+  const content = Array.isArray((part as any).content)
+    ? (part as any).content.map((entry: unknown) => segmentToText(entry)).filter(Boolean).join("\n")
+    : ""
+  return [text, content].filter(Boolean).join("\n")
+}
+
+function extractGenericPartText(part: ClientPart): string {
+  const candidate = part as Record<string, unknown>
+  const values = [
+    candidate.text,
+    candidate.content,
+    candidate.value,
+    candidate.title,
+    candidate.name,
+    candidate.filename,
+    candidate.message,
+  ]
+  return values.map((value) => segmentToText(value)).filter(Boolean).join("\n")
+}
+
+function extractToolText(part: Extract<ClientPart, { type: "tool" }>): string {
+  const toolName = typeof part.tool === "string" ? part.tool : ""
+  const context = { toolCall: part, toolState: (part as any).state, toolName }
+  const renderer = resolveToolRenderer(toolName)
+  const values = renderer.getSearchText?.(context) ?? getDefaultToolSearchText(context)
+  return values.filter((value) => value.trim().length > 0).join("\n")
+}
+
+function extractMessageInfoText(info: MessageInfo | undefined): string {
+  if (!info || info.role !== "assistant" || !info.error) return ""
+  const error = info.error as { data?: { message?: unknown }; message?: unknown; name?: unknown }
+  const values = [error.data?.message, error.message, error.name]
+  return values.filter((value): value is string => typeof value === "string" && value.trim().length > 0).join("\n")
+}
+
+function extractSearchablePartText(part: ClientPart, includeThinking: boolean): SearchablePartText | null {
+  if (!part || typeof part !== "object") return null
+  if (isHiddenSyntheticTextPart(part)) return null
+
+  const partId = typeof (part as any).id === "string" ? (part as any).id : undefined
+  const partType = typeof (part as any).type === "string" ? (part as any).type : undefined
+
+  if (part.type === "text") {
+    const text = typeof (part as any).text === "string" ? (part as any).text : segmentToText((part as any).text)
+    return text.trim().length > 0 ? { partId, partType, text } : null
+  }
+
+  if (part.type === "reasoning") {
+    if (!includeThinking) return null
+    const text = extractReasoningText(part)
+    return text.trim().length > 0 ? { partId, partType, text } : null
+  }
+
+  if (part.type === "file") {
+    const filename = (part as any).filename
+    return typeof filename === "string" && filename.trim().length > 0 ? { partId, partType, text: filename } : null
+  }
+
+  if (part.type === "tool") {
+    const text = extractToolText(part)
+    return text.trim().length > 0 ? { partId, partType, text } : null
+  }
+
+  if (part.type === "compaction") {
+    const text = (part as any).auto ? "Session auto-compacted" : "Session compacted"
+    return { partId, partType, text }
+  }
+
+  const text = extractGenericPartText(part)
+  return text.trim().length > 0 ? { partId, partType, text } : null
+}
+
+function buildPreview(text: string, start: number, end: number): string {
+  const from = Math.max(0, start - PREVIEW_RADIUS)
+  const to = Math.min(text.length, end + PREVIEW_RADIUS)
+  const prefix = from > 0 ? "..." : ""
+  const suffix = to < text.length ? "..." : ""
+  return `${prefix}${text.slice(from, to).replace(/\s+/g, " ").trim()}${suffix}`
+}
+
+function collectRecordSearchableText(store: InstanceMessageStore, record: MessageRecord, includeThinking: boolean): SearchablePartText[] {
+  const results: SearchablePartText[] = []
+  for (const partId of record.partIds) {
+    const part = record.parts[partId]?.data
+    if (!part) continue
+    const text = extractSearchablePartText(part, includeThinking)
+    if (text) results.push(text)
+  }
+
+  const infoText = extractMessageInfoText(store.getMessageInfo(record.id))
+  if (infoText.trim().length > 0) {
+    results.push({ partType: "error", text: infoText })
+  }
+
+  return results
+}
+
+export function buildSessionSearchMatches(options: BuildSessionSearchMatchesOptions): SessionSearchMatch[] {
+  const query = options.query.trim()
+  if (!query) return []
+
+  const needle = normalizeSearchValue(query)
+  const matches: SessionSearchMatch[] = []
+  const messageIds = options.store.getSessionMessageIds(options.sessionId)
+
+  for (const messageId of messageIds) {
+    const record = options.store.getMessage(messageId)
+    if (!record) continue
+    const searchableParts = collectRecordSearchableText(options.store, record, options.includeThinking)
+
+    for (const searchable of searchableParts) {
+      const haystack = normalizeSearchValue(searchable.text)
+      let from = 0
+      let occurrence = 0
+      while (from < haystack.length) {
+        const index = haystack.indexOf(needle, from)
+        if (index === -1) break
+        const end = index + query.length
+        matches.push({
+          id: `${messageId}:${searchable.partId ?? searchable.partType ?? "info"}:${index}`,
+          messageId,
+          partId: searchable.partId,
+          partType: searchable.partType,
+          role: record.role,
+          start: index,
+          end,
+          occurrence,
+          preview: buildPreview(searchable.text, index, end),
+        })
+        occurrence += 1
+        from = end > index ? end : index + 1
+      }
+    }
+  }
+
+  return matches
+}
diff --git a/packages/ui/src/styles/messaging/message-section.css b/packages/ui/src/styles/messaging/message-section.css
index 9582b48d..e7c89515 100644
--- a/packages/ui/src/styles/messaging/message-section.css
+++ b/packages/ui/src/styles/messaging/message-section.css
@@ -289,3 +289,104 @@
   outline: none;
   box-shadow: inset 0 0 0 2px var(--accent-primary);
 }
+
+.message-search-popover {
+  position: absolute;
+  top: 0.75rem;
+  inset-inline: 50% auto;
+  transform: translateX(-50%);
+  z-index: 15;
+  width: min(38rem, calc(100vw - 2rem));
+  border: 1px solid var(--border-base);
+  box-shadow: var(--panel-shadow);
+}
+
+.message-search-container {
+  padding: 0.625rem 0.75rem;
+}
+
+.message-search-input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.message-search-input {
+  min-width: 8rem;
+}
+
+.message-search-count {
+  flex: 0 0 auto;
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.message-search-button {
+  @apply inline-flex items-center justify-center rounded-md border transition-colors;
+  width: 2rem;
+  height: 2rem;
+  border-color: var(--border-base);
+  background-color: transparent;
+  color: var(--text-secondary);
+}
+
+.message-search-button:hover:not(:disabled) {
+  background-color: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.message-search-button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.message-search-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--accent-primary);
+}
+
+.message-search-empty {
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--border-base);
+}
+
+.message-stream-block[data-search-result="true"] {
+  border-radius: 0.75rem;
+}
+
+.message-stream-block[data-search-active="true"] {
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent-primary) 70%, transparent);
+}
+
+.session-search-match {
+  border-radius: 0.2em;
+  background-color: color-mix(in oklab, #fde047 58%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in oklab, #eab308 62%, transparent);
+  color: inherit;
+  padding: 0 0.08em;
+}
+
+.session-search-match-active {
+  background-color: #facc15;
+  box-shadow: 0 0 0 2px #ca8a04;
+  color: #111827;
+}
+
+@media (max-width: 640px) {
+  .message-search-popover {
+    top: 0.5rem;
+    width: calc(100vw - 1rem);
+  }
+
+  .message-search-input-row {
+    gap: 0.375rem;
+  }
+
+  .message-search-count {
+    max-width: 4.75rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
diff --git a/packages/ui/src/styles/messaging/message-timeline.css b/packages/ui/src/styles/messaging/message-timeline.css
index 308ae92c..b4a8efd4 100644
--- a/packages/ui/src/styles/messaging/message-timeline.css
+++ b/packages/ui/src/styles/messaging/message-timeline.css
@@ -443,3 +443,20 @@
   background: var(--status-error);
   box-shadow: 0 0 6px 2px var(--status-error);
 }
+
+.message-timeline-segment-search-match {
+  border-color: #eab308 !important;
+  background-color: color-mix(in oklab, #fde047 62%, var(--surface-secondary)) !important;
+  color: #111827 !important;
+  box-shadow: 0 0 0 1px color-mix(in oklab, #eab308 72%, transparent) !important;
+}
+
+.message-timeline-segment-search-active,
+.message-timeline-segment-search-active:hover,
+.message-timeline-segment-search-active:focus-visible {
+  border-color: #ca8a04 !important;
+  background-color: #facc15 !important;
+  color: #111827 !important;
+  box-shadow: 0 0 0 2px #ca8a04, 0 0 0 4px color-mix(in oklab, #facc15 34%, transparent) !important;
+  transform: none !important;
+}

From f81027316e7af8c0cffe9332bbdef52b9f9df911 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Thu, 7 May 2026 20:04:51 +0100
Subject: [PATCH 15/39] feat(ui): group model picker by provider

Replace incidental backend model ordering with deterministic UI ordering so long model lists are easier to scan. The picker now sorts providers by provider id, sorts models by display name within each provider, and inserts compact provider headers that show provider names with ids for disambiguation.

Filtering is applied before headers are rendered so visible matches keep their provider context. Header rows are disabled picker options to avoid Kobalte section key collisions while preserving the existing model row layout and favorite controls.

Validation: npm run typecheck --workspace @codenomad/ui
---
 packages/ui/src/components/model-selector.tsx | 103 +++++++++++++++---
 .../ui/src/styles/components/selector.css     |   4 +-
 2 files changed, 88 insertions(+), 19 deletions(-)

diff --git a/packages/ui/src/components/model-selector.tsx b/packages/ui/src/components/model-selector.tsx
index 6f5c5955..363bfe79 100644
--- a/packages/ui/src/components/model-selector.tsx
+++ b/packages/ui/src/components/model-selector.tsx
@@ -8,7 +8,6 @@ import { getLogger } from "../lib/logger"
 import { uiState, toggleFavoriteModelPreference } from "../stores/preferences"
 const log = getLogger("session")
 
-
 interface ModelSelectorProps {
   instanceId: string
   sessionId: string
@@ -22,6 +21,26 @@ interface FlatModel extends Model {
   searchText: string
 }
 
+interface ModelGroup {
+  providerId: string
+  providerName: string
+  models: FlatModel[]
+}
+
+interface ProviderHeaderOption {
+  type: "header"
+  key: string
+  providerId: string
+  providerName: string
+  searchText: string
+}
+
+type PickerOption = FlatModel | ProviderHeaderOption
+
+const compareIds = (left: string, right: string) => left.localeCompare(right, undefined, { sensitivity: "base" })
+
+const isProviderHeaderOption = (option: PickerOption): option is ProviderHeaderOption => "type" in option && option.type === "header"
+
 export default function ModelSelector(props: ModelSelectorProps) {
   const { t } = useI18n()
   const instanceProviders = () => providers().get(props.instanceId) || []
@@ -57,6 +76,16 @@ export default function ModelSelector(props: ModelSelectorProps) {
     ),
   )
 
+  const sortedModels = createMemo<FlatModel[]>(() =>
+    [...allModels()].sort((left, right) => {
+      const providerComparison = compareIds(left.providerId, right.providerId)
+      if (providerComparison !== 0) return providerComparison
+      const nameComparison = compareIds(left.name, right.name)
+      if (nameComparison !== 0) return nameComparison
+      return compareIds(left.id, right.id)
+    }),
+  )
+
   const favoriteKeySet = createMemo(() => {
     const result = new Set<string>()
     for (const item of uiState().models.favorites ?? []) {
@@ -70,7 +99,7 @@ export default function ModelSelector(props: ModelSelectorProps) {
   const favoriteModels = createMemo<FlatModel[]>(() => {
     const keys = favoriteKeySet()
     if (keys.size === 0) return []
-    return allModels().filter((m) => keys.has(m.key))
+    return sortedModels().filter((m) => keys.has(m.key))
   })
 
   const hasFavorites = createMemo(() => favoriteModels().length > 0)
@@ -104,20 +133,46 @@ export default function ModelSelector(props: ModelSelectorProps) {
 
   const visibleOptions = createMemo<FlatModel[]>(() => {
     if (!favoritesOnlyEnabled()) {
-      return allModels()
+      return sortedModels()
     }
     return favoriteModels()
   })
 
-  const handleChange = async (value: FlatModel | null) => {
-    if (!value) return
+  const groupedVisibleOptions = createMemo<ModelGroup[]>(() => {
+    const query = searchActive() ? inputValue().trim().toLowerCase() : ""
+    const groups = new Map<string, ModelGroup>()
+    for (const model of visibleOptions()) {
+      if (query && !model.searchText.toLowerCase().includes(query)) continue
+      const existing = groups.get(model.providerId)
+      if (existing) {
+        existing.models.push(model)
+      } else {
+        groups.set(model.providerId, { providerId: model.providerId, providerName: model.providerName, models: [model] })
+      }
+    }
+
+    return Array.from(groups.values())
+  })
+
+  const pickerOptions = createMemo<PickerOption[]>(() =>
+    groupedVisibleOptions().flatMap((group) => [
+      {
+        type: "header" as const,
+        key: `provider:${group.providerId}`,
+        providerId: group.providerId,
+        providerName: group.providerName,
+        searchText: `${group.providerName} ${group.providerId}`,
+      },
+      ...group.models,
+    ]),
+  )
+
+  const handleChange = async (value: PickerOption | null) => {
+    if (!value || isProviderHeaderOption(value)) return
     await props.onModelChange({ providerId: value.providerId, modelId: value.id })
   }
 
-  const customFilter = (option: FlatModel, rawInput: string) => {
-    if (!searchDirty()) return true
-    return option.searchText.toLowerCase().includes(rawInput.toLowerCase())
-  }
+  const customFilter = () => true
 
   createEffect(() => {
     if (isOpen()) {
@@ -209,7 +264,7 @@ export default function ModelSelector(props: ModelSelectorProps) {
 
   return (
     <div class="sidebar-selector">
-      <Combobox<FlatModel>
+      <Combobox<PickerOption>
         open={isOpen()}
         value={currentModelValue()}
         onChange={handleChange}
@@ -217,15 +272,29 @@ export default function ModelSelector(props: ModelSelectorProps) {
           if (!next && suppressNextClose) return
           setIsOpen(next)
         }}
-        options={visibleOptions()}
+        options={pickerOptions()}
         optionValue="key"
         optionTextValue="searchText"
-        optionLabel="name"
+        optionLabel={(option) => (isProviderHeaderOption(option) ? option.providerName : option.name)}
+        optionDisabled={isProviderHeaderOption}
         placeholder={t("modelSelector.placeholder.search")}
         defaultFilter={customFilter}
         allowsEmptyCollection
         itemComponent={(itemProps) => {
-          const isFavorite = () => favoriteKeySet().has(itemProps.item.rawValue.key)
+          if (isProviderHeaderOption(itemProps.item.rawValue)) {
+            const header = itemProps.item.rawValue
+            return (
+              <li class="selector-section" role="presentation">
+                <span class="selector-section-title" title={header.providerId}>
+                  {header.providerName}
+                  {header.providerName !== header.providerId && <span dir="ltr"> · {header.providerId}</span>}
+                </span>
+              </li>
+            )
+          }
+
+          const model = itemProps.item.rawValue
+          const isFavorite = () => favoriteKeySet().has(model.key)
           return (
             <Combobox.Item
               item={itemProps.item}
@@ -233,9 +302,9 @@ export default function ModelSelector(props: ModelSelectorProps) {
             >
               <>
                 <div class="selector-option-content">
-                  <Combobox.ItemLabel class="selector-option-label">{itemProps.item.rawValue.name}</Combobox.ItemLabel>
+                  <Combobox.ItemLabel class="selector-option-label">{model.name}</Combobox.ItemLabel>
                   <Combobox.ItemDescription class="selector-option-description">
-                    {itemProps.item.rawValue.providerName} • {itemProps.item.rawValue.providerId}/{itemProps.item.rawValue.id}
+                    {model.providerName} • {model.providerId}/{model.id}
                   </Combobox.ItemDescription>
                 </div>
                 <Combobox.ItemIndicator class="selector-option-indicator">
@@ -269,8 +338,8 @@ export default function ModelSelector(props: ModelSelectorProps) {
                     event.preventDefault()
                     event.stopPropagation()
                     toggleFavoriteModelPreference({
-                      providerId: itemProps.item.rawValue.providerId,
-                      modelId: itemProps.item.rawValue.id,
+                      providerId: model.providerId,
+                      modelId: model.id,
                     })
                   }}
                 >
diff --git a/packages/ui/src/styles/components/selector.css b/packages/ui/src/styles/components/selector.css
index 414d1213..87ee149a 100644
--- a/packages/ui/src/styles/components/selector.css
+++ b/packages/ui/src/styles/components/selector.css
@@ -216,13 +216,13 @@
 }
 
 .selector-section {
-  @apply px-3 py-2 border-b;
+  @apply px-3 py-1 border-b;
   border-color: var(--border-base);
   background-color: var(--surface-secondary);
 }
 
 .selector-section-title {
-  @apply text-xs font-medium;
+  @apply block text-[11px] font-medium truncate;
   color: var(--text-muted);
 }
 

From e8b5137adc43bcb88049d8a24709bf206596a539 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Fri, 8 May 2026 14:20:14 +0200
Subject: [PATCH 16/39] fix(tauri): prefer bundled server entry in release
 (#405)

## Why
When running the Tauri release executable from `target/release`, the app
should start the server bundle that was packaged next to the executable:

`target/release/resources/server/dist/bin.js`

Before this change, `resolve_prod_entry()` checked the workspace build
first:

`packages/server/dist/bin.js`

That can make a release run depend on the local checkout instead of the
packaged resources. It also makes rebuild/runtime checks misleading,
because the exe may appear to work while using files outside the release
bundle.

## What Changed
- Check bundled release resource paths first when resolving the
production server entry.
- Keep the workspace `packages/server/dist/bin.js` path as a fallback.

## Validation
- Verified the change is limited to production entry resolution in
`cli_manager.rs`.
- This was discovered while launching the rebuilt Tauri release
executable and checking that the spawned Node process used
`target/release/resources/server/dist`.
---
 packages/tauri-app/src-tauri/src/cli_manager.rs | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/tauri-app/src-tauri/src/cli_manager.rs b/packages/tauri-app/src-tauri/src/cli_manager.rs
index d051821d..e44828f5 100644
--- a/packages/tauri-app/src-tauri/src/cli_manager.rs
+++ b/packages/tauri-app/src-tauri/src/cli_manager.rs
@@ -1215,10 +1215,7 @@ fn resolve_dev_entry(_app: &AppHandle) -> Option<String> {
 }
 
 fn resolve_prod_entry(_app: &AppHandle) -> Option<String> {
-    let base = workspace_root();
-    let mut candidates = vec![base
-        .as_ref()
-        .map(|p| p.join("packages/server/dist/bin.js"))];
+    let mut candidates = Vec::new();
 
     if let Ok(exe) = std::env::current_exe() {
         if let Some(dir) = exe.parent() {
@@ -1236,6 +1233,12 @@ fn resolve_prod_entry(_app: &AppHandle) -> Option<String> {
         }
     }
 
+    let base = workspace_root();
+    candidates.push(
+        base.as_ref()
+            .map(|p| p.join("packages/server/dist/bin.js")),
+    );
+
     first_existing(candidates)
 }
 

From faa24af39d5b5fdc2d60472ed8b6d133167bff01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Fri, 8 May 2026 22:27:55 +0200
Subject: [PATCH 17/39] Add clone repository workspace flow (#397)

## Summary
- Adds a server endpoint to clone a Git repository into a selected local
destination.
- Adds a folder selection action/dialog for repository URL, destination
folder, and optional destination cleanup.
- Opens the cloned folder as the workspace after clone succeeds.

Fixes #253

## Validation
- npm run typecheck --workspace @codenomad/ui
- npm run typecheck --workspace @neuralnomads/codenomad
- npm run build --workspace @codenomad/ui
---
 packages/server/src/api-types.ts              |  10 +
 .../server/src/server/routes/workspaces.ts    |  22 ++
 .../workspaces/__tests__/git-clone.test.ts    | 189 +++++++++++++++++
 packages/server/src/workspaces/git-clone.ts   | 179 ++++++++++++++++
 .../components/directory-browser-dialog.tsx   |   2 +-
 .../src/components/folder-selection-view.tsx  | 195 +++++++++++++++++-
 packages/ui/src/lib/api-client.ts             |   8 +
 .../lib/i18n/messages/en/folderSelection.ts   |  15 ++
 .../lib/i18n/messages/es/folderSelection.ts   |  15 ++
 .../lib/i18n/messages/fr/folderSelection.ts   |  15 ++
 .../lib/i18n/messages/he/folderSelection.ts   |  15 ++
 .../lib/i18n/messages/ja/folderSelection.ts   |  15 ++
 .../lib/i18n/messages/ru/folderSelection.ts   |  15 ++
 .../i18n/messages/zh-Hans/folderSelection.ts  |  15 ++
 packages/ui/src/stores/session-api.ts         |   2 +-
 15 files changed, 709 insertions(+), 3 deletions(-)
 create mode 100644 packages/server/src/workspaces/__tests__/git-clone.test.ts
 create mode 100644 packages/server/src/workspaces/git-clone.ts

diff --git a/packages/server/src/api-types.ts b/packages/server/src/api-types.ts
index c40d05e3..9e5fb92a 100644
--- a/packages/server/src/api-types.ts
+++ b/packages/server/src/api-types.ts
@@ -40,6 +40,16 @@ export interface WorkspaceCreateRequest {
   name?: string
 }
 
+export interface WorkspaceCloneRequest {
+  repositoryUrl: string
+  destinationPath: string
+  cleanup?: boolean
+}
+
+export interface WorkspaceCloneResponse {
+  path: string
+}
+
 export type WorkspaceCreateResponse = WorkspaceDescriptor
 export type WorkspaceListResponse = WorkspaceDescriptor[]
 export type WorkspaceDetailResponse = WorkspaceDescriptor
diff --git a/packages/server/src/server/routes/workspaces.ts b/packages/server/src/server/routes/workspaces.ts
index 9f2a68a2..a115bf0d 100644
--- a/packages/server/src/server/routes/workspaces.ts
+++ b/packages/server/src/server/routes/workspaces.ts
@@ -3,6 +3,7 @@ import { z } from "zod"
 import { WorkspaceManager } from "../../workspaces/manager"
 import { getWorktreeGitDiff, getWorktreeGitStatus } from "../../workspaces/git-status"
 import { commitWorktreeChanges, isGitMutationError, stageWorktreePaths, unstageWorktreePaths } from "../../workspaces/git-mutations"
+import { cloneGitRepository, isGitCloneError } from "../../workspaces/git-clone"
 import { isGitAvailable, resolveRepoRoot } from "../../workspaces/git-worktrees"
 import { resolveWorktreeDirectory } from "../../workspaces/worktree-directory"
 
@@ -15,6 +16,12 @@ const WorkspaceCreateSchema = z.object({
   name: z.string().optional(),
 })
 
+const WorkspaceCloneSchema = z.object({
+  repositoryUrl: z.string().trim().min(1, "Repository URL is required"),
+  destinationPath: z.string().trim().min(1, "Destination path is required"),
+  cleanup: z.boolean().optional(),
+})
+
 const WorkspaceFilesQuerySchema = z.object({
   path: z.string().optional(),
 })
@@ -69,6 +76,17 @@ export function registerWorkspaceRoutes(app: FastifyInstance, deps: RouteDeps) {
     }
   })
 
+  app.post("/api/workspaces/clone", async (request, reply) => {
+    try {
+      const body = WorkspaceCloneSchema.parse(request.body ?? {})
+      const result = await cloneGitRepository(body)
+      reply.code(201)
+      return result
+    } catch (error) {
+      return handleWorkspaceError(error, reply)
+    }
+  })
+
   app.get<{ Params: { id: string } }>("/api/workspaces/:id", async (request, reply) => {
     const workspace = deps.workspaceManager.get(request.params.id)
     if (!workspace) {
@@ -264,6 +282,10 @@ async function resolveGitWorktreeDirectory(
 
 
 function handleWorkspaceError(error: unknown, reply: FastifyReply) {
+  if (isGitCloneError(error)) {
+    reply.code(error.statusCode)
+    return { error: error.message }
+  }
   if (isGitMutationError(error)) {
     reply.code(error.statusCode)
     return { error: error.message }
diff --git a/packages/server/src/workspaces/__tests__/git-clone.test.ts b/packages/server/src/workspaces/__tests__/git-clone.test.ts
new file mode 100644
index 00000000..8798d48a
--- /dev/null
+++ b/packages/server/src/workspaces/__tests__/git-clone.test.ts
@@ -0,0 +1,189 @@
+import assert from "node:assert/strict"
+import { execFileSync } from "node:child_process"
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs"
+import { homedir, tmpdir } from "node:os"
+import path from "node:path"
+import { describe, it } from "node:test"
+
+import { cloneGitRepository } from "../git-clone"
+
+function createBareRepository(repoPath: string): void {
+  execFileSync("git", ["init", "--bare", repoPath], { stdio: "ignore" })
+}
+
+async function expectCloneError(
+  callback: () => Promise<unknown>,
+  expectedStatusCode: number,
+  messagePattern: RegExp,
+): Promise<void> {
+  await assert.rejects(callback, (error: unknown) => {
+    assert.equal(typeof error, "object")
+    assert.equal((error as { statusCode?: number }).statusCode, expectedStatusCode)
+    assert.match(String((error as { message?: string }).message ?? ""), messagePattern)
+    return true
+  })
+}
+
+describe("cloneGitRepository", () => {
+  it("clones into a missing destination", async () => {
+    const temp = mkdtempSync(path.join(tmpdir(), "codenomad-git-clone-"))
+    const sourceRepo = path.join(temp, "source.git")
+    const destinationPath = path.join(temp, "cloned-repo")
+
+    try {
+      createBareRepository(sourceRepo)
+
+      const result = await cloneGitRepository({
+        repositoryUrl: sourceRepo,
+        destinationPath,
+      })
+
+      assert.equal(result.path, destinationPath)
+      assert.equal(existsSync(path.join(destinationPath, ".git")), true)
+    } finally {
+      rmSync(temp, { recursive: true, force: true })
+    }
+  })
+
+  it("rejects non-empty destinations when cleanup is not enabled", async () => {
+    const temp = mkdtempSync(path.join(tmpdir(), "codenomad-git-clone-"))
+    const sourceRepo = path.join(temp, "source.git")
+    const destinationPath = path.join(temp, "existing-destination")
+    const sentinelPath = path.join(destinationPath, "keep.txt")
+
+    try {
+      createBareRepository(sourceRepo)
+      mkdirSync(destinationPath, { recursive: true })
+      writeFileSync(sentinelPath, "keep")
+
+      await expectCloneError(
+        () => cloneGitRepository({ repositoryUrl: sourceRepo, destinationPath }),
+        409,
+        /Destination folder is not empty/,
+      )
+
+      assert.equal(readFileSync(sentinelPath, "utf8"), "keep")
+    } finally {
+      rmSync(temp, { recursive: true, force: true })
+    }
+  })
+
+  it("preserves the existing destination when cleanup is enabled but clone fails", async () => {
+    const temp = mkdtempSync(path.join(tmpdir(), "codenomad-git-clone-"))
+    const missingRepo = path.join(temp, "missing.git")
+    const destinationPath = path.join(temp, "existing-destination")
+    const sentinelPath = path.join(destinationPath, "keep.txt")
+
+    try {
+      mkdirSync(destinationPath, { recursive: true })
+      writeFileSync(sentinelPath, "keep")
+
+      await expectCloneError(
+        () => cloneGitRepository({ repositoryUrl: missingRepo, destinationPath, cleanup: true }),
+        409,
+        /does not appear to be a git repository|does not exist|not found/i,
+      )
+
+      assert.equal(readFileSync(sentinelPath, "utf8"), "keep")
+      assert.equal(existsSync(destinationPath), true)
+    } finally {
+      rmSync(temp, { recursive: true, force: true })
+    }
+  })
+
+  it("replaces the existing destination only after a successful cleanup clone", async () => {
+    const temp = mkdtempSync(path.join(tmpdir(), "codenomad-git-clone-"))
+    const sourceRepo = path.join(temp, "source.git")
+    const destinationPath = path.join(temp, "existing-destination")
+    const sentinelPath = path.join(destinationPath, "keep.txt")
+
+    try {
+      createBareRepository(sourceRepo)
+      mkdirSync(destinationPath, { recursive: true })
+      writeFileSync(sentinelPath, "keep")
+
+      const result = await cloneGitRepository({
+        repositoryUrl: sourceRepo,
+        destinationPath,
+        cleanup: true,
+      })
+
+      assert.equal(result.path, destinationPath)
+      assert.equal(existsSync(path.join(destinationPath, ".git")), true)
+      assert.equal(existsSync(sentinelPath), false)
+    } finally {
+      rmSync(temp, { recursive: true, force: true })
+    }
+  })
+
+  it("rejects filesystem root destinations", async () => {
+    const temp = mkdtempSync(path.join(tmpdir(), "codenomad-git-clone-"))
+    const sourceRepo = path.join(temp, "source.git")
+
+    try {
+      createBareRepository(sourceRepo)
+
+      await expectCloneError(
+        () =>
+          cloneGitRepository({
+            repositoryUrl: sourceRepo,
+            destinationPath: path.parse(process.cwd()).root,
+            cleanup: true,
+          }),
+        400,
+        /filesystem root/,
+      )
+    } finally {
+      rmSync(temp, { recursive: true, force: true })
+    }
+  })
+
+  it("rejects home directory destinations", async () => {
+    const temp = mkdtempSync(path.join(tmpdir(), "codenomad-git-clone-"))
+    const sourceRepo = path.join(temp, "source.git")
+
+    try {
+      createBareRepository(sourceRepo)
+
+      await expectCloneError(
+        () =>
+          cloneGitRepository({
+            repositoryUrl: sourceRepo,
+            destinationPath: homedir(),
+            cleanup: true,
+          }),
+        400,
+        /home folder/,
+      )
+    } finally {
+      rmSync(temp, { recursive: true, force: true })
+    }
+  })
+
+  it(
+    "supports destinations directly under a Windows drive root",
+    { skip: process.platform !== "win32" },
+    async () => {
+      const temp = mkdtempSync(path.join(tmpdir(), "codenomad-git-clone-"))
+      const sourceRepo = path.join(temp, "source.git")
+      const root = path.parse(process.cwd()).root
+      const destinationPath = path.join(root, `codenomad-git-clone-root-${Date.now()}-${Math.random().toString(36).slice(2)}`)
+
+      try {
+        createBareRepository(sourceRepo)
+        rmSync(destinationPath, { recursive: true, force: true })
+
+        const result = await cloneGitRepository({
+          repositoryUrl: sourceRepo,
+          destinationPath,
+        })
+
+        assert.equal(result.path, destinationPath)
+        assert.equal(existsSync(destinationPath), true)
+      } finally {
+        rmSync(destinationPath, { recursive: true, force: true })
+        rmSync(temp, { recursive: true, force: true })
+      }
+    },
+  )
+})
diff --git a/packages/server/src/workspaces/git-clone.ts b/packages/server/src/workspaces/git-clone.ts
new file mode 100644
index 00000000..b0eeb48a
--- /dev/null
+++ b/packages/server/src/workspaces/git-clone.ts
@@ -0,0 +1,179 @@
+import fs from "fs"
+import path from "path"
+import { spawn } from "child_process"
+import { homedir } from "os"
+
+class GitCloneError extends Error {
+  statusCode: number
+
+  constructor(message: string, statusCode = 400) {
+    super(message)
+    this.name = "GitCloneError"
+    this.statusCode = statusCode
+  }
+}
+
+function formatErrorMessage(error: unknown, fallback: string): string {
+  if (error instanceof Error && error.message.trim().length > 0) {
+    return error.message
+  }
+  return fallback
+}
+
+function normalizePathForComparison(filePath: string): string {
+  const resolvedPath = path.resolve(filePath)
+  const rootPath = path.parse(resolvedPath).root
+  const trimmedPath = resolvedPath === rootPath ? rootPath : resolvedPath.replace(/[\\/]+$/, "")
+  return process.platform === "win32" ? trimmedPath.toLowerCase() : trimmedPath
+}
+
+function assertDestinationPathIsSafe(destinationPath: string): void {
+  const normalizedDestinationPath = normalizePathForComparison(destinationPath)
+  const normalizedRootPath = normalizePathForComparison(path.parse(destinationPath).root)
+  if (normalizedDestinationPath === normalizedRootPath) {
+    throw new GitCloneError("Destination path cannot be a filesystem root", 400)
+  }
+
+  const normalizedHomePath = normalizePathForComparison(homedir())
+  if (normalizedDestinationPath === normalizedHomePath) {
+    throw new GitCloneError("Destination path cannot be the home folder", 400)
+  }
+}
+
+function createSiblingUniquePath(destinationPath: string, label: string): string {
+  const parentPath = path.dirname(destinationPath)
+  const baseName = path.basename(destinationPath)
+  return path.join(parentPath, `${baseName}.${label}-${Date.now()}-${Math.random().toString(36).slice(2)}`)
+}
+
+function runGitClone(repositoryUrl: string, destinationPath: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const parentPath = path.dirname(destinationPath)
+    const child = spawn("git", ["clone", "--", repositoryUrl, destinationPath], {
+      cwd: parentPath,
+      stdio: ["ignore", "pipe", "pipe"],
+    })
+
+    let stderr = ""
+    child.stderr?.on("data", (chunk) => {
+      stderr += chunk.toString()
+    })
+
+    child.once("error", (error) => {
+      reject(new GitCloneError(error.message || "Failed to start git clone", 500))
+    })
+
+    child.once("close", (code) => {
+      if (code === 0) {
+        resolve()
+        return
+      }
+      reject(new GitCloneError(stderr.trim() || `git clone failed with code ${code}`, 409))
+    })
+  })
+}
+
+function assertDestinationIsUsable(destinationPath: string, cleanup: boolean): void {
+  if (!fs.existsSync(destinationPath)) return
+
+  const stat = fs.statSync(destinationPath)
+  if (!stat.isDirectory()) {
+    throw new GitCloneError("Destination path exists and is not a folder", 409)
+  }
+
+  if (cleanup) {
+    return
+  }
+
+  const entries = fs.readdirSync(destinationPath)
+  if (entries.length > 0) {
+    throw new GitCloneError("Destination folder is not empty", 409)
+  }
+}
+
+function ensureDestinationParentExists(destinationPath: string): void {
+  const parentPath = path.dirname(destinationPath)
+  if (fs.existsSync(parentPath)) return
+
+  fs.mkdirSync(parentPath, { recursive: true })
+}
+
+async function replaceDestinationAfterSuccessfulClone(repositoryUrl: string, destinationPath: string): Promise<void> {
+  const tempClonePath = createSiblingUniquePath(destinationPath, "clone")
+  let backupPath: string | null = null
+  let preserveBackup = false
+
+  try {
+    await runGitClone(repositoryUrl, tempClonePath)
+
+    backupPath = createSiblingUniquePath(destinationPath, "backup")
+    fs.renameSync(destinationPath, backupPath)
+
+    try {
+      fs.renameSync(tempClonePath, destinationPath)
+    } catch (error) {
+      try {
+        fs.renameSync(backupPath, destinationPath)
+        backupPath = null
+      } catch (restoreError) {
+        preserveBackup = true
+        throw new GitCloneError(
+          `Failed to replace clone destination and restore previous contents: ${formatErrorMessage(restoreError, "restore failed")}`,
+          500,
+        )
+      }
+
+      throw new GitCloneError(`Failed to replace clone destination: ${formatErrorMessage(error, "rename failed")}`, 500)
+    }
+
+    fs.rmSync(backupPath, { recursive: true, force: true })
+    backupPath = null
+  } catch (error) {
+    if (error instanceof GitCloneError) {
+      throw error
+    }
+
+    throw new GitCloneError(`Failed to prepare clone destination: ${formatErrorMessage(error, "unknown error")}`, 500)
+  } finally {
+    if (backupPath && !preserveBackup && fs.existsSync(backupPath)) {
+      fs.rmSync(backupPath, { recursive: true, force: true })
+    }
+    if (fs.existsSync(tempClonePath)) {
+      fs.rmSync(tempClonePath, { recursive: true, force: true })
+    }
+  }
+}
+
+export function isGitCloneError(error: unknown): error is GitCloneError {
+  return error instanceof GitCloneError
+}
+
+export async function cloneGitRepository(params: {
+  repositoryUrl: string
+  destinationPath: string
+  cleanup?: boolean
+}): Promise<{ path: string }> {
+  const repositoryUrl = params.repositoryUrl.trim()
+  const requestedDestinationPath = params.destinationPath.trim()
+
+  if (!repositoryUrl) {
+    throw new GitCloneError("Repository URL is required", 400)
+  }
+  if (!path.isAbsolute(requestedDestinationPath)) {
+    throw new GitCloneError("Destination path must be absolute", 400)
+  }
+
+  const destinationPath = path.resolve(requestedDestinationPath)
+  assertDestinationPathIsSafe(destinationPath)
+  ensureDestinationParentExists(destinationPath)
+  const destinationExists = fs.existsSync(destinationPath)
+  assertDestinationIsUsable(destinationPath, Boolean(params.cleanup))
+
+  if (destinationExists && params.cleanup) {
+    await replaceDestinationAfterSuccessfulClone(repositoryUrl, destinationPath)
+  } else {
+    await runGitClone(repositoryUrl, destinationPath)
+  }
+
+  return { path: destinationPath }
+}
diff --git a/packages/ui/src/components/directory-browser-dialog.tsx b/packages/ui/src/components/directory-browser-dialog.tsx
index 18331f96..f45370ed 100644
--- a/packages/ui/src/components/directory-browser-dialog.tsx
+++ b/packages/ui/src/components/directory-browser-dialog.tsx
@@ -380,7 +380,7 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
 
   return (
     <Show when={props.open}>
-      <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-6" onClick={handleOverlayClick}>
+      <div class="fixed inset-0 z-[1305] flex items-center justify-center bg-black/60 p-6" onClick={handleOverlayClick}>
         <div class="modal-surface directory-browser-modal" role="dialog" aria-modal="true">
           <div class="panel directory-browser-panel">
             <div class="directory-browser-header">
diff --git a/packages/ui/src/components/folder-selection-view.tsx b/packages/ui/src/components/folder-selection-view.tsx
index 41c62789..ee590258 100644
--- a/packages/ui/src/components/folder-selection-view.tsx
+++ b/packages/ui/src/components/folder-selection-view.tsx
@@ -1,7 +1,7 @@
 import { Dialog } from "@kobalte/core/dialog"
 import { Select } from "@kobalte/core/select"
 import { Component, createSignal, Show, For, onMount, onCleanup, createEffect } from "solid-js"
-import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp, Star, Languages, ChevronDown, X, Globe, Loader2 } from "lucide-solid"
+import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp, Star, Languages, ChevronDown, X, Globe, Loader2, GitBranch } from "lucide-solid"
 import { useConfig } from "../stores/preferences"
 import DirectoryBrowserDialog from "./directory-browser-dialog"
 import Kbd from "./kbd"
@@ -50,6 +50,13 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   const [focusMode, setFocusMode] = createSignal<"recent" | "new" | null>("recent")
   const [selectedBinary, setSelectedBinary] = createSignal(serverSettings().opencodeBinary || "opencode")
   const [isFolderBrowserOpen, setIsFolderBrowserOpen] = createSignal(false)
+  const [isCloneDialogOpen, setIsCloneDialogOpen] = createSignal(false)
+  const [isCloneDestinationBrowserOpen, setIsCloneDestinationBrowserOpen] = createSignal(false)
+  const [cloneRepositoryUrl, setCloneRepositoryUrl] = createSignal("")
+  const [cloneDestinationPath, setCloneDestinationPath] = createSignal("")
+  const [cleanupCloneDestination, setCleanupCloneDestination] = createSignal(false)
+  const [cloneDialogError, setCloneDialogError] = createSignal<string | null>(null)
+  const [isCloningRepository, setIsCloningRepository] = createSignal(false)
   const [activeTab, setActiveTab] = createSignal<HomeTab>("local")
   const [isServerDialogOpen, setIsServerDialogOpen] = createSignal(false)
   const [serverName, setServerName] = createSignal("")
@@ -276,6 +283,46 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     props.onSelectFolder(path, selectedBinary())
   }
 
+  function resetCloneDialog() {
+    setCloneRepositoryUrl("")
+    setCloneDestinationPath("")
+    setCleanupCloneDestination(false)
+    setCloneDialogError(null)
+  }
+
+  function openCloneDialog() {
+    if (isLoading()) return
+    resetCloneDialog()
+    setIsCloneDialogOpen(true)
+  }
+
+  async function handleCloneRepository() {
+    if (isCloningRepository()) return
+    const repositoryUrl = cloneRepositoryUrl().trim()
+    const destinationPath = cloneDestinationPath().trim()
+    if (!repositoryUrl || !destinationPath) {
+      setCloneDialogError(t("folderSelection.clone.dialog.errorRequired"))
+      return
+    }
+
+    setIsCloningRepository(true)
+    setCloneDialogError(null)
+    try {
+      const result = await serverApi.cloneWorkspaceRepository({
+        repositoryUrl,
+        destinationPath,
+        cleanup: cleanupCloneDestination(),
+      })
+      setIsCloneDialogOpen(false)
+      resetCloneDialog()
+      handleFolderSelect(result.path)
+    } catch (error) {
+      setCloneDialogError(error instanceof Error ? error.message : String(error))
+    } finally {
+      setIsCloningRepository(false)
+    }
+  }
+
   function resetServerDialog() {
     setServerName("")
     setServerUrl("")
@@ -401,6 +448,36 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     handleFolderSelect(path)
   }
 
+  function handleCloneDestinationSelect(path: string) {
+    setIsCloneDestinationBrowserOpen(false)
+    setCloneDestinationPath(path)
+    setIsCloneDialogOpen(true)
+  }
+
+  function handleCloneDestinationBrowserClose() {
+    setIsCloneDestinationBrowserOpen(false)
+    setIsCloneDialogOpen(true)
+  }
+
+  async function handleCloneDestinationBrowse() {
+    if (isCloningRepository()) return
+
+    const defaultPath = cloneDestinationPath() || folders()[0]?.path
+    if (supportsNativeDialogsInCurrentWindow()) {
+      const selected = await openNativeFolderDialog({
+        title: t("folderSelection.clone.destination.title"),
+        defaultPath,
+      })
+      if (selected) {
+        setCloneDestinationPath(selected)
+      }
+      return
+    }
+
+    setIsCloneDialogOpen(false)
+    setIsCloneDestinationBrowserOpen(true)
+  }
+
   function handleRemove(path: string, e?: Event) {
     if (isLoading()) return
     e?.stopPropagation()
@@ -871,6 +948,18 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                     <Kbd shortcut="cmd+n" class="ml-2 kbd-hint" />
                   </button>
 
+                  <button
+                    type="button"
+                    onClick={openCloneDialog}
+                    disabled={props.isLoading}
+                    class="button-primary w-full flex items-center justify-center text-sm disabled:cursor-not-allowed"
+                  >
+                    <div class="flex items-center gap-2">
+                      <GitBranch class="w-4 h-4" />
+                      <span>{t("folderSelection.clone.button")}</span>
+                    </div>
+                  </button>
+
                   <button
                     type="button"
                     onClick={() => props.onOpenSidecar?.()}
@@ -966,6 +1055,110 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
         onSelect={handleBrowserSelect}
       />
 
+      <DirectoryBrowserDialog
+        open={isCloneDestinationBrowserOpen()}
+        title={t("folderSelection.clone.destination.title")}
+        description={t("folderSelection.clone.destination.description")}
+        initialPath={cloneDestinationPath() || folders()[0]?.path}
+        onClose={handleCloneDestinationBrowserClose}
+        onSelect={handleCloneDestinationSelect}
+      />
+
+      <Dialog open={isCloneDialogOpen()} onOpenChange={(open) => !open && setIsCloneDialogOpen(false)}>
+        <Dialog.Portal>
+          <Dialog.Overlay class="modal-overlay" />
+          <div class="fixed inset-0 z-[1300] flex items-center justify-center p-4">
+            <Dialog.Content
+              class="modal-surface w-full max-w-lg p-6 flex flex-col gap-5"
+              tabIndex={-1}
+              onInteractOutside={(event) => {
+                if (isCloneDestinationBrowserOpen()) {
+                  event.preventDefault()
+                }
+              }}
+              onEscapeKeyDown={(event) => {
+                if (isCloneDestinationBrowserOpen()) {
+                  event.preventDefault()
+                }
+              }}
+            >
+              <div>
+                <Dialog.Title class="text-xl font-semibold text-primary">
+                  {t("folderSelection.clone.dialog.title")}
+                </Dialog.Title>
+                <Dialog.Description class="text-sm text-secondary mt-2">
+                  {t("folderSelection.clone.dialog.description")}
+                </Dialog.Description>
+              </div>
+
+              <label class="flex flex-col gap-2 text-sm text-secondary">
+                <span>{t("folderSelection.clone.dialog.repositoryUrl")}</span>
+                <input
+                  class="selector-input w-full"
+                  value={cloneRepositoryUrl()}
+                  onInput={(event) => setCloneRepositoryUrl(event.currentTarget.value)}
+                  placeholder={t("folderSelection.clone.dialog.repositoryUrlPlaceholder")}
+                  disabled={isCloningRepository()}
+                />
+              </label>
+
+              <label class="flex flex-col gap-2 text-sm text-secondary">
+                <span>{t("folderSelection.clone.dialog.destinationPath")}</span>
+                <div class="flex gap-2">
+                  <input
+                    class="selector-input w-full"
+                    value={cloneDestinationPath()}
+                    onInput={(event) => setCloneDestinationPath(event.currentTarget.value)}
+                    placeholder={t("folderSelection.clone.dialog.destinationPathPlaceholder")}
+                    disabled={isCloningRepository()}
+                  />
+                   <button
+                     type="button"
+                     class="selector-button selector-button-secondary w-auto px-4"
+                     disabled={isCloningRepository()}
+                     onClick={() => void handleCloneDestinationBrowse()}
+                   >
+                     {t("folderSelection.clone.dialog.browseDestination")}
+                   </button>
+                </div>
+              </label>
+
+              <label class="flex items-start gap-3 text-sm text-secondary">
+                <input
+                  type="checkbox"
+                  checked={cleanupCloneDestination()}
+                  disabled={isCloningRepository()}
+                  onChange={(event) => setCleanupCloneDestination(event.currentTarget.checked)}
+                />
+                <span>{t("folderSelection.clone.dialog.cleanupDestination")}</span>
+              </label>
+
+              <Show when={cloneDialogError()}>
+                {(message) => <p class="text-sm text-red-500 break-words">{message()}</p>}
+              </Show>
+
+              <div class="flex items-center justify-end gap-3">
+                <button class="selector-button selector-button-secondary w-auto px-4" disabled={isCloningRepository()} onClick={() => setIsCloneDialogOpen(false)}>
+                  {t("folderSelection.clone.dialog.cancel")}
+                </button>
+                <button
+                  class="selector-button selector-button-primary w-auto px-4"
+                  disabled={isCloningRepository()}
+                  onClick={() => void handleCloneRepository()}
+                >
+                  <Show when={isCloningRepository()} fallback={<span>{t("folderSelection.clone.dialog.clone")}</span>}>
+                    <span class="inline-flex items-center gap-2">
+                      <Loader2 class="w-4 h-4 animate-spin" />
+                      {t("folderSelection.clone.dialog.cloning")}
+                    </span>
+                  </Show>
+                </button>
+              </div>
+            </Dialog.Content>
+          </div>
+        </Dialog.Portal>
+      </Dialog>
+
       <Dialog open={isServerDialogOpen()} onOpenChange={(open) => !open && setIsServerDialogOpen(false)}>
         <Dialog.Portal>
           <Dialog.Overlay class="modal-overlay" />
diff --git a/packages/ui/src/lib/api-client.ts b/packages/ui/src/lib/api-client.ts
index f107e1a9..35d9d638 100644
--- a/packages/ui/src/lib/api-client.ts
+++ b/packages/ui/src/lib/api-client.ts
@@ -17,6 +17,8 @@ import type {
   RemoteServerProbeRequest,
   RemoteServerProbeResponse,
   VoiceModeStateResponse,
+  WorkspaceCloneRequest,
+  WorkspaceCloneResponse,
   WorktreeGitCommitRequest,
   WorktreeGitCommitResponse,
   WorktreeGitDiffRequest,
@@ -280,6 +282,12 @@ export const serverApi = {
   deleteWorkspace(id: string): Promise<void> {
     return request(`/api/workspaces/${encodeURIComponent(id)}`, { method: "DELETE" })
   },
+  cloneWorkspaceRepository(payload: WorkspaceCloneRequest): Promise<WorkspaceCloneResponse> {
+    return request<WorkspaceCloneResponse>("/api/workspaces/clone", {
+      method: "POST",
+      body: JSON.stringify(payload),
+    })
+  },
   listWorkspaceFiles(id: string, relativePath = "."): Promise<FileSystemEntry[]> {
     const params = new URLSearchParams({ path: relativePath })
     return request<FileSystemEntry[]>(`/api/workspaces/${encodeURIComponent(id)}/files?${params.toString()}`)
diff --git a/packages/ui/src/lib/i18n/messages/en/folderSelection.ts b/packages/ui/src/lib/i18n/messages/en/folderSelection.ts
index 841086c5..5ce93517 100644
--- a/packages/ui/src/lib/i18n/messages/en/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/en/folderSelection.ts
@@ -20,6 +20,21 @@ export const folderSelectionMessages = {
   "folderSelection.browse.subtitle": "Select any folder on your computer",
   "folderSelection.browse.button": "Browse Folders",
   "folderSelection.browse.buttonOpening": "Opening...",
+  "folderSelection.clone.button": "Clone Git Repo",
+  "folderSelection.clone.destination.title": "Select Clone Destination",
+  "folderSelection.clone.destination.description": "Select the folder where the repository should be cloned.",
+  "folderSelection.clone.dialog.title": "Clone Git Repository",
+  "folderSelection.clone.dialog.description": "Clone a Git repository into a local folder, then open it as your workspace.",
+  "folderSelection.clone.dialog.repositoryUrl": "Repository URL",
+  "folderSelection.clone.dialog.repositoryUrlPlaceholder": "https://github.com/user/repo.git",
+  "folderSelection.clone.dialog.destinationPath": "Destination folder",
+  "folderSelection.clone.dialog.destinationPathPlaceholder": "Select or enter a destination folder",
+  "folderSelection.clone.dialog.browseDestination": "Browse",
+  "folderSelection.clone.dialog.cleanupDestination": "Remove the destination folder first if it already exists.",
+  "folderSelection.clone.dialog.cancel": "Cancel",
+  "folderSelection.clone.dialog.clone": "Clone",
+  "folderSelection.clone.dialog.cloning": "Cloning...",
+  "folderSelection.clone.dialog.errorRequired": "Repository URL and destination folder are required.",
   "folderSelection.actions.title": "Open Folder or Connect Server",
   "folderSelection.actions.subtitle": "Open local folder or connect to a CodeNomad server",
   "folderSelection.actions.connectButton": "Connect CodeNomad Server",
diff --git a/packages/ui/src/lib/i18n/messages/es/folderSelection.ts b/packages/ui/src/lib/i18n/messages/es/folderSelection.ts
index 1c1e47dc..5bfd167d 100644
--- a/packages/ui/src/lib/i18n/messages/es/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/es/folderSelection.ts
@@ -20,6 +20,21 @@ export const folderSelectionMessages = {
   "folderSelection.browse.subtitle": "Selecciona cualquier carpeta en tu ordenador",
   "folderSelection.browse.button": "Buscar carpetas",
   "folderSelection.browse.buttonOpening": "Abriendo...",
+  "folderSelection.clone.button": "Clonar repo Git",
+  "folderSelection.clone.destination.title": "Seleccionar destino del clon",
+  "folderSelection.clone.destination.description": "Selecciona la carpeta donde se debe clonar el repositorio.",
+  "folderSelection.clone.dialog.title": "Clonar repositorio Git",
+  "folderSelection.clone.dialog.description": "Clona un repositorio Git en una carpeta local y luego abre esa carpeta como workspace.",
+  "folderSelection.clone.dialog.repositoryUrl": "URL del repositorio",
+  "folderSelection.clone.dialog.repositoryUrlPlaceholder": "https://github.com/user/repo.git",
+  "folderSelection.clone.dialog.destinationPath": "Carpeta de destino",
+  "folderSelection.clone.dialog.destinationPathPlaceholder": "Selecciona o introduce una carpeta de destino",
+  "folderSelection.clone.dialog.browseDestination": "Buscar",
+  "folderSelection.clone.dialog.cleanupDestination": "Eliminar primero la carpeta de destino si ya existe.",
+  "folderSelection.clone.dialog.cancel": "Cancelar",
+  "folderSelection.clone.dialog.clone": "Clonar",
+  "folderSelection.clone.dialog.cloning": "Clonando...",
+  "folderSelection.clone.dialog.errorRequired": "La URL del repositorio y la carpeta de destino son obligatorias.",
   "folderSelection.actions.title": "Abrir carpeta o conectar servidor",
   "folderSelection.actions.subtitle": "Abre una carpeta local o conéctate a un servidor de CodeNomad",
   "folderSelection.actions.connectButton": "Conectar servidor CodeNomad",
diff --git a/packages/ui/src/lib/i18n/messages/fr/folderSelection.ts b/packages/ui/src/lib/i18n/messages/fr/folderSelection.ts
index 6932e434..b2ba2f81 100644
--- a/packages/ui/src/lib/i18n/messages/fr/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/folderSelection.ts
@@ -20,6 +20,21 @@ export const folderSelectionMessages = {
   "folderSelection.browse.subtitle": "Sélectionnez n'importe quel dossier sur votre ordinateur",
   "folderSelection.browse.button": "Parcourir les dossiers",
   "folderSelection.browse.buttonOpening": "Ouverture...",
+  "folderSelection.clone.button": "Cloner un depot Git",
+  "folderSelection.clone.destination.title": "Choisir la destination du clone",
+  "folderSelection.clone.destination.description": "Selectionnez le dossier ou le depot doit etre clone.",
+  "folderSelection.clone.dialog.title": "Cloner un depot Git",
+  "folderSelection.clone.dialog.description": "Clonez un depot Git dans un dossier local, puis ouvrez-le comme espace de travail.",
+  "folderSelection.clone.dialog.repositoryUrl": "URL du depot",
+  "folderSelection.clone.dialog.repositoryUrlPlaceholder": "https://github.com/user/repo.git",
+  "folderSelection.clone.dialog.destinationPath": "Dossier de destination",
+  "folderSelection.clone.dialog.destinationPathPlaceholder": "Sélectionnez ou saisissez un dossier de destination",
+  "folderSelection.clone.dialog.browseDestination": "Parcourir",
+  "folderSelection.clone.dialog.cleanupDestination": "Supprimer d'abord le dossier de destination s'il existe deja.",
+  "folderSelection.clone.dialog.cancel": "Annuler",
+  "folderSelection.clone.dialog.clone": "Cloner",
+  "folderSelection.clone.dialog.cloning": "Clonage...",
+  "folderSelection.clone.dialog.errorRequired": "L'URL du depot et le dossier de destination sont requis.",
   "folderSelection.actions.title": "Ouvrir un dossier ou se connecter à un serveur",
   "folderSelection.actions.subtitle": "Ouvrez un dossier local ou connectez-vous à un serveur CodeNomad",
   "folderSelection.actions.connectButton": "Se connecter au serveur CodeNomad",
diff --git a/packages/ui/src/lib/i18n/messages/he/folderSelection.ts b/packages/ui/src/lib/i18n/messages/he/folderSelection.ts
index 69de36c0..a640a0e2 100644
--- a/packages/ui/src/lib/i18n/messages/he/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/he/folderSelection.ts
@@ -20,6 +20,21 @@ export const folderSelectionMessages = {
   "folderSelection.browse.subtitle": "בחר כל תיקייה במחשב שלך",
   "folderSelection.browse.button": "עיון בתיקיות",
   "folderSelection.browse.buttonOpening": "פותח...",
+  "folderSelection.clone.button": "שכפל מאגר Git",
+  "folderSelection.clone.destination.title": "בחר יעד לשכפול",
+  "folderSelection.clone.destination.description": "בחר את התיקייה שאליה יש לשכפל את המאגר.",
+  "folderSelection.clone.dialog.title": "שכפול מאגר Git",
+  "folderSelection.clone.dialog.description": "שכפל מאגר Git לתיקייה מקומית ולאחר מכן פתח אותה כסביבת עבודה.",
+  "folderSelection.clone.dialog.repositoryUrl": "כתובת המאגר",
+  "folderSelection.clone.dialog.repositoryUrlPlaceholder": "https://github.com/user/repo.git",
+  "folderSelection.clone.dialog.destinationPath": "תיקיית יעד",
+  "folderSelection.clone.dialog.destinationPathPlaceholder": "בחר או הזן תיקיית יעד",
+  "folderSelection.clone.dialog.browseDestination": "עיון",
+  "folderSelection.clone.dialog.cleanupDestination": "מחק תחילה את תיקיית היעד אם היא כבר קיימת.",
+  "folderSelection.clone.dialog.cancel": "ביטול",
+  "folderSelection.clone.dialog.clone": "שכפל",
+  "folderSelection.clone.dialog.cloning": "משכפל...",
+  "folderSelection.clone.dialog.errorRequired": "כתובת המאגר ותיקיית היעד הן שדות חובה.",
   "folderSelection.actions.title": "פתח תיקייה או התחבר לשרת",
   "folderSelection.actions.subtitle": "פתח תיקייה מקומית או התחבר לשרת CodeNomad",
   "folderSelection.actions.connectButton": "התחבר לשרת CodeNomad",
diff --git a/packages/ui/src/lib/i18n/messages/ja/folderSelection.ts b/packages/ui/src/lib/i18n/messages/ja/folderSelection.ts
index b1b2f478..95364f00 100644
--- a/packages/ui/src/lib/i18n/messages/ja/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/folderSelection.ts
@@ -20,6 +20,21 @@ export const folderSelectionMessages = {
   "folderSelection.browse.subtitle": "コンピュータ上の任意のフォルダを選択",
   "folderSelection.browse.button": "フォルダを参照",
   "folderSelection.browse.buttonOpening": "開いています...",
+  "folderSelection.clone.button": "Git リポジトリをクローン",
+  "folderSelection.clone.destination.title": "クローン先を選択",
+  "folderSelection.clone.destination.description": "リポジトリをクローンするフォルダを選択してください。",
+  "folderSelection.clone.dialog.title": "Git リポジトリをクローン",
+  "folderSelection.clone.dialog.description": "Git リポジトリをローカルフォルダにクローンし、ワークスペースとして開きます。",
+  "folderSelection.clone.dialog.repositoryUrl": "リポジトリ URL",
+  "folderSelection.clone.dialog.repositoryUrlPlaceholder": "https://github.com/user/repo.git",
+  "folderSelection.clone.dialog.destinationPath": "保存先フォルダ",
+  "folderSelection.clone.dialog.destinationPathPlaceholder": "保存先フォルダを選択または入力",
+  "folderSelection.clone.dialog.browseDestination": "参照",
+  "folderSelection.clone.dialog.cleanupDestination": "保存先フォルダが既に存在する場合は先に削除します。",
+  "folderSelection.clone.dialog.cancel": "キャンセル",
+  "folderSelection.clone.dialog.clone": "クローン",
+  "folderSelection.clone.dialog.cloning": "クローン中...",
+  "folderSelection.clone.dialog.errorRequired": "リポジトリ URL と保存先フォルダは必須です。",
   "folderSelection.actions.title": "フォルダを開くかサーバーに接続",
   "folderSelection.actions.subtitle": "ローカルフォルダを開くか CodeNomad サーバーに接続します",
   "folderSelection.actions.connectButton": "CodeNomad サーバーに接続",
diff --git a/packages/ui/src/lib/i18n/messages/ru/folderSelection.ts b/packages/ui/src/lib/i18n/messages/ru/folderSelection.ts
index bc88c601..bbd83aed 100644
--- a/packages/ui/src/lib/i18n/messages/ru/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/folderSelection.ts
@@ -20,6 +20,21 @@ export const folderSelectionMessages = {
   "folderSelection.browse.subtitle": "Выберите любую папку на компьютере",
   "folderSelection.browse.button": "Обзор папок",
   "folderSelection.browse.buttonOpening": "Открытие…",
+  "folderSelection.clone.button": "Клонировать Git-репозиторий",
+  "folderSelection.clone.destination.title": "Выберите папку для клонирования",
+  "folderSelection.clone.destination.description": "Выберите папку, куда нужно клонировать репозиторий.",
+  "folderSelection.clone.dialog.title": "Клонировать Git-репозиторий",
+  "folderSelection.clone.dialog.description": "Клонируйте Git-репозиторий в локальную папку, затем откройте ее как рабочее пространство.",
+  "folderSelection.clone.dialog.repositoryUrl": "URL репозитория",
+  "folderSelection.clone.dialog.repositoryUrlPlaceholder": "https://github.com/user/repo.git",
+  "folderSelection.clone.dialog.destinationPath": "Папка назначения",
+  "folderSelection.clone.dialog.destinationPathPlaceholder": "Выберите или введите папку назначения",
+  "folderSelection.clone.dialog.browseDestination": "Обзор",
+  "folderSelection.clone.dialog.cleanupDestination": "Сначала удалить папку назначения, если она уже существует.",
+  "folderSelection.clone.dialog.cancel": "Отмена",
+  "folderSelection.clone.dialog.clone": "Клонировать",
+  "folderSelection.clone.dialog.cloning": "Клонирование...",
+  "folderSelection.clone.dialog.errorRequired": "URL репозитория и папка назначения обязательны.",
   "folderSelection.actions.title": "Открыть папку или подключить сервер",
   "folderSelection.actions.subtitle": "Откройте локальную папку или подключитесь к серверу CodeNomad",
   "folderSelection.actions.connectButton": "Подключить сервер CodeNomad",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/folderSelection.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/folderSelection.ts
index 445cdb00..76f0322d 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/folderSelection.ts
@@ -20,6 +20,21 @@ export const folderSelectionMessages = {
   "folderSelection.browse.subtitle": "选择你电脑上的任意文件夹",
   "folderSelection.browse.button": "浏览文件夹",
   "folderSelection.browse.buttonOpening": "正在打开...",
+  "folderSelection.clone.button": "克隆 Git 仓库",
+  "folderSelection.clone.destination.title": "选择克隆目标位置",
+  "folderSelection.clone.destination.description": "选择要将仓库克隆到的文件夹。",
+  "folderSelection.clone.dialog.title": "克隆 Git 仓库",
+  "folderSelection.clone.dialog.description": "将 Git 仓库克隆到本地文件夹，然后作为工作区打开。",
+  "folderSelection.clone.dialog.repositoryUrl": "仓库 URL",
+  "folderSelection.clone.dialog.repositoryUrlPlaceholder": "https://github.com/user/repo.git",
+  "folderSelection.clone.dialog.destinationPath": "目标文件夹",
+  "folderSelection.clone.dialog.destinationPathPlaceholder": "选择或输入目标文件夹",
+  "folderSelection.clone.dialog.browseDestination": "浏览",
+  "folderSelection.clone.dialog.cleanupDestination": "如果目标文件夹已存在，先将其删除。",
+  "folderSelection.clone.dialog.cancel": "取消",
+  "folderSelection.clone.dialog.clone": "克隆",
+  "folderSelection.clone.dialog.cloning": "正在克隆...",
+  "folderSelection.clone.dialog.errorRequired": "仓库 URL 和目标文件夹为必填项。",
   "folderSelection.actions.title": "打开文件夹或连接服务器",
   "folderSelection.actions.subtitle": "打开本地文件夹或连接到 CodeNomad 服务器",
   "folderSelection.actions.connectButton": "连接 CodeNomad 服务器",
diff --git a/packages/ui/src/stores/session-api.ts b/packages/ui/src/stores/session-api.ts
index 9771aba1..63f7a722 100644
--- a/packages/ui/src/stores/session-api.ts
+++ b/packages/ui/src/stores/session-api.ts
@@ -125,7 +125,7 @@ async function fetchSessions(instanceId: string): Promise<void> {
   try {
     const projectResponse = await rootClient.project.current()
     const projectId = projectResponse.data?.id
-    const sessionListOptions = projectId === "global" ? { directory: instance.folder } : undefined
+    const sessionListOptions = instance.folder ? { directory: instance.folder } : undefined
 
     log.info("session.list", { instanceId, projectId, directory: sessionListOptions?.directory })
     const response = sessionListOptions

From 71531697477cc996d1c44a054b54cf4853681f81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Fri, 8 May 2026 22:40:30 +0200
Subject: [PATCH 18/39] fix(ui): keep update release link visible (#410)

## Summary
- Keep a stable release link visible in the home screen version pill
whenever update metadata is available.
- Leave the existing one-time update toast behavior unchanged while
giving users a permanent place to reopen the release page.
- Reuse the existing release i18n strings instead of adding new UI copy.

Fixes #267

## Verification
- `npm run typecheck --workspace @codenomad/ui`
- `npm run build --workspace @codenomad/ui`

<img width="660" height="507" alt="image"
src="https://github.com/user-attachments/assets/7058cf18-0c01-45da-994a-20fe1497980c"
/>
---
 packages/ui/src/components/version-pill.tsx | 34 ++++++++++++++++++++-
 packages/ui/src/stores/releases.ts          |  6 ++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/version-pill.tsx b/packages/ui/src/components/version-pill.tsx
index 890ae618..cbc6c78d 100644
--- a/packages/ui/src/components/version-pill.tsx
+++ b/packages/ui/src/components/version-pill.tsx
@@ -2,10 +2,13 @@ import { Show, createEffect, createSignal } from "solid-js"
 import type { ServerMeta } from "../../../server/src/api-types"
 import { getServerMeta } from "../lib/server-meta"
 import { useI18n } from "../lib/i18n"
+import { openExternalUrl } from "../lib/external-url"
+import { useAvailableUpdate } from "../stores/releases"
 
 export default function VersionPill() {
   const { t } = useI18n()
   const [meta, setMeta] = createSignal<ServerMeta | null>(null)
+  const availableUpdate = useAvailableUpdate()
 
   createEffect(() => {
     void getServerMeta()
@@ -16,11 +19,18 @@ export default function VersionPill() {
   const serverVersion = () => meta()?.serverVersion
   const uiVersion = () => meta()?.ui?.version
   const uiSource = () => meta()?.ui?.source
+  const update = () => {
+    const refreshedUpdate = availableUpdate()
+    if (refreshedUpdate !== undefined) {
+      return refreshedUpdate
+    }
+    return meta()?.update ?? null
+  }
 
   const uiLabel = () => (uiVersion() ? t("versionPill.uiWithVersion", { version: uiVersion() }) : t("versionPill.ui"))
 
   return (
-    <Show when={serverVersion() || uiVersion() || uiSource()}>
+    <Show when={serverVersion() || uiVersion() || uiSource() || update()}>
       <div class="text-[11px] text-muted whitespace-nowrap">
         <Show when={serverVersion()}>
           {(v) => <span>{t("versionPill.appWithVersion", { version: v() })}</span>}
@@ -36,6 +46,28 @@ export default function VersionPill() {
             </span>
           </>
         </Show>
+        <Show when={update()}>
+          {(release) => (
+            <>
+              <Show when={serverVersion() || uiVersion() || uiSource()}>
+                <span class="mx-2">·</span>
+              </Show>
+              <a
+                href={release().url}
+                target="_blank"
+                rel="noreferrer"
+                class="text-primary hover:underline underline-offset-2"
+                title={t("releases.devUpdateAvailable.message", { version: release().version })}
+                onClick={(event) => {
+                  event.preventDefault()
+                  void openExternalUrl(release().url, "version-pill")
+                }}
+              >
+                {t("releases.devUpdateAvailable.action")}
+              </a>
+            </>
+          )}
+        </Show>
       </div>
     </Show>
   )
diff --git a/packages/ui/src/stores/releases.ts b/packages/ui/src/stores/releases.ts
index 39c199d2..f1f6c4e7 100644
--- a/packages/ui/src/stores/releases.ts
+++ b/packages/ui/src/stores/releases.ts
@@ -9,6 +9,7 @@ import { hasInstances, showFolderSelection } from "./ui"
 const log = getLogger("actions")
 
 const [supportInfo, setSupportInfo] = createSignal<SupportMeta | null>(null)
+const [availableUpdate, setAvailableUpdate] = createSignal<ServerMeta["update"] | null | undefined>(undefined)
 
 const UI_VERSION_STORAGE_KEY = "codenomad:lastSeenUiVersion"
 const DEV_RELEASE_STORAGE_KEY = "codenomad:lastSeenDevRelease"
@@ -82,6 +83,7 @@ async function refreshFromMeta() {
   try {
     const meta = await getServerMeta(true)
     setSupportInfo(meta.support ?? null)
+    setAvailableUpdate(meta.update ?? null)
     maybeNotifyUiUpdated(meta)
     maybeNotifyDevReleaseAvailable(meta)
     ensureMetaRefresh(meta)
@@ -94,6 +96,10 @@ export function useSupportInfo() {
   return supportInfo
 }
 
+export function useAvailableUpdate() {
+  return availableUpdate
+}
+
 function maybeNotifyUiUpdated(meta: ServerMeta) {
   if (uiUpdateToasted) return
   uiUpdateToasted = true

From d344ef31322ae96ac43301c8c11becf35694ff7f Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Sat, 9 May 2026 07:25:58 +0100
Subject: [PATCH 19/39] fix(ui): tighten home screen spacing

Remove the launcher tagline from the home screen and normalize the Open Sidecar action spacing so the action stack uses consistent vertical rhythm.

This keeps the recent workspace area higher on the page without changing launcher behavior or the existing folder, clone, sidecar, and remote actions.
---
 packages/ui/src/components/folder-selection-view.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/ui/src/components/folder-selection-view.tsx b/packages/ui/src/components/folder-selection-view.tsx
index ee590258..35c984de 100644
--- a/packages/ui/src/components/folder-selection-view.tsx
+++ b/packages/ui/src/components/folder-selection-view.tsx
@@ -691,7 +691,6 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                 <DiscordSymbolIcon class="w-4 h-4" />
               </a>
             </div>
-            <p class="mt-3 text-base text-secondary">{t("folderSelection.tagline")}</p>
           </div>
 
           <div class="flex-1 min-h-0 overflow-hidden flex flex-col gap-4">
@@ -963,7 +962,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                   <button
                     type="button"
                     onClick={() => props.onOpenSidecar?.()}
-                    class="button-primary mt-3 w-full flex items-center justify-center text-sm"
+                    class="button-primary w-full flex items-center justify-center text-sm"
                   >
                     <div class="flex items-center gap-2">
                       <MonitorUp class="w-4 h-4" />

From c9dff33662d8aba7a32bf62ec2d6c07e7d7ce5b2 Mon Sep 17 00:00:00 2001
From: Claas Pancratius <54213976+OfflinePing@users.noreply.github.com>
Date: Sat, 9 May 2026 21:47:56 +0200
Subject: [PATCH 20/39] feat(ui): show aggregated total tokens and cost for
 parent sessions including subagents (#415)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

- Adds three new chips (Total In, Total Out, Total Cost) to the
`ContextUsagePanel` that aggregate usage across the parent session and
all child sessions (subagents and forks)
- Child session messages are proactively loaded to ensure historical
data appears without manually navigating to each child
- Chips respect the existing `showUsageMetrics` preference toggle and
are hidden when the session has no children
- Reactive computation is scoped to the current instance to avoid
unnecessary re-runs

## Changes

| File | Change |
|------|--------|
| `packages/ui/src/components/session/context-usage-panel.tsx` | Adds
`threadTotals` memo, proactive `loadMessages` effect, and three total
chips |
| `packages/ui/src/lib/i18n/messages/*/settings.ts` (7 locales) | Adds
`totalInput`, `totalOutput`, `totalCost` i18n keys |

## Screenshots
When viewing a parent session with subagents, the panel shows:
```
[Input] [Output] [Cost] | [Total In] [Total Out] [Total Cost]
```

## Notes
- This PR was primarily AI-generated and has gone through several
iterative review and refinement steps
- Built and type-checked against `upstream/dev`
- Needs review and approval from the CodeNomad team

Closes #401

---------

Co-authored-by: Pascal André <pascalandr@gmail.com>
---
 packages/ui/src/components/session-list.tsx   |   2 +-
 .../session/context-usage-panel.tsx           |  66 +++++++++-
 .../ui/src/lib/i18n/messages/en/settings.ts   |   4 +
 .../ui/src/lib/i18n/messages/es/settings.ts   |   4 +
 .../ui/src/lib/i18n/messages/fr/settings.ts   |   4 +
 .../ui/src/lib/i18n/messages/he/settings.ts   |   4 +
 .../ui/src/lib/i18n/messages/ja/settings.ts   |   4 +
 .../ui/src/lib/i18n/messages/ru/settings.ts   |   4 +
 .../src/lib/i18n/messages/zh-Hans/settings.ts |   4 +
 packages/ui/src/lib/thread-totals.test.ts     | 124 ++++++++++++++++++
 packages/ui/src/lib/thread-totals.ts          |  28 ++++
 packages/ui/src/stores/session-api.ts         |  18 ++-
 packages/ui/src/stores/session-events.ts      |   2 +-
 13 files changed, 259 insertions(+), 9 deletions(-)
 create mode 100644 packages/ui/src/lib/thread-totals.test.ts
 create mode 100644 packages/ui/src/lib/thread-totals.ts

diff --git a/packages/ui/src/components/session-list.tsx b/packages/ui/src/components/session-list.tsx
index 24a6e7ab..5a53d4b0 100644
--- a/packages/ui/src/components/session-list.tsx
+++ b/packages/ui/src/components/session-list.tsx
@@ -235,7 +235,7 @@ const SessionList: Component<SessionListProps> = (props) => {
     })
 
     try {
-      await loadMessages(props.instanceId, sessionId, true)
+      await loadMessages(props.instanceId, sessionId, { force: true })
     } catch (error) {
       log.error(`Failed to reload session ${sessionId}:`, error)
       showToastNotification({ message: t("sessionList.reload.error"), variant: "error" })
diff --git a/packages/ui/src/components/session/context-usage-panel.tsx b/packages/ui/src/components/session/context-usage-panel.tsx
index ee5e419d..3c515805 100644
--- a/packages/ui/src/components/session/context-usage-panel.tsx
+++ b/packages/ui/src/components/session/context-usage-panel.tsx
@@ -1,7 +1,12 @@
-import { createMemo, type Component } from "solid-js"
-import { getSessionInfo } from "../../stores/sessions"
+import { createEffect, createMemo, Show, untrack, type Component } from "solid-js"
+import { getChildSessions, getSessionFamily, getSessionInfo, loadMessages, sessionInfoByInstance } from "../../stores/sessions"
 import { formatTokenTotal } from "../../lib/formatters"
+import { computeThreadTotals } from "../../lib/thread-totals"
 import { useI18n } from "../../lib/i18n"
+import { getLogger } from "../../lib/logger"
+import { useConfig } from "../../stores/preferences"
+
+const log = getLogger("session")
 
 interface ContextUsagePanelProps {
   instanceId: string
@@ -14,6 +19,8 @@ const chipLabelClass = "uppercase text-[10px] tracking-wide text-muted"
 
 const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
   const { t } = useI18n()
+  const { preferences } = useConfig()
+  const showUsage = createMemo(() => preferences().showUsageMetrics ?? true)
   const info = createMemo(
     () =>
       getSessionInfo(props.instanceId, props.sessionId) ?? {
@@ -29,6 +36,43 @@ const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
       },
   )
 
+  const children = createMemo(() => getChildSessions(props.instanceId, props.sessionId))
+  const hasChildren = createMemo(() => children().length > 0)
+
+  const instanceInfoMap = createMemo(() =>
+    sessionInfoByInstance().get(props.instanceId),
+  )
+
+  createEffect(() => {
+    if (!showUsage()) return
+    const instanceId = props.instanceId
+    const childSessions = children()
+    untrack(() => {
+      for (const child of childSessions) {
+        loadMessages(instanceId, child.id, { skipDiff: true }).catch((error) =>
+          log.error("Failed to load child session messages", {
+            instanceId,
+            sessionId: child.id,
+            error,
+          }),
+        )
+      }
+    })
+  })
+
+  const threadTotals = createMemo(() => {
+    if (!hasChildren()) return { cost: 0, inputTokens: 0, outputTokens: 0, reasoningTokens: 0 }
+    const map = instanceInfoMap()
+    const family = getSessionFamily(props.instanceId, props.sessionId)
+    return computeThreadTotals(family, map)
+  })
+
+  const totalCostDisplay = createMemo(() => `$${threadTotals().cost.toFixed(2)}`)
+
+  const totalInputTokens = createMemo(() => threadTotals().inputTokens)
+  const totalOutputTokens = createMemo(() => threadTotals().outputTokens)
+  const totalReasoningTokens = createMemo(() => threadTotals().reasoningTokens)
+
   const inputTokens = createMemo(() => info().inputTokens ?? 0)
   const outputTokens = createMemo(() => info().outputTokens ?? 0)
   const costValue = createMemo(() => {
@@ -53,6 +97,24 @@ const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
           <span class={chipLabelClass}>{t("contextUsagePanel.labels.cost")}</span>
           <span class="font-semibold text-primary">{costDisplay()}</span>
         </div>
+        <Show when={hasChildren() && showUsage()}>
+          <div class={chipClass}>
+            <span class={chipLabelClass}>{t("contextUsagePanel.labels.totalInput")}</span>
+            <span class="font-semibold text-primary">{formatTokenTotal(totalInputTokens())}</span>
+          </div>
+          <div class={chipClass}>
+            <span class={chipLabelClass}>{t("contextUsagePanel.labels.totalOutput")}</span>
+            <span class="font-semibold text-primary">{formatTokenTotal(totalOutputTokens())}</span>
+          </div>
+          <div class={chipClass}>
+            <span class={chipLabelClass}>{t("contextUsagePanel.labels.totalCost")}</span>
+            <span class="font-semibold text-primary">{totalCostDisplay()}</span>
+          </div>
+          <div class={chipClass}>
+            <span class={chipLabelClass}>{t("contextUsagePanel.labels.totalReasoning")}</span>
+            <span class="font-semibold text-primary">{formatTokenTotal(totalReasoningTokens())}</span>
+          </div>
+        </Show>
       </div>
     </div>
   )
diff --git a/packages/ui/src/lib/i18n/messages/en/settings.ts b/packages/ui/src/lib/i18n/messages/en/settings.ts
index 53a11319..18aa670d 100644
--- a/packages/ui/src/lib/i18n/messages/en/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/en/settings.ts
@@ -52,6 +52,10 @@ export const settingsMessages = {
   "contextUsagePanel.labels.input": "Input",
   "contextUsagePanel.labels.output": "Output",
   "contextUsagePanel.labels.cost": "Cost",
+  "contextUsagePanel.labels.totalInput": "Total In",
+  "contextUsagePanel.labels.totalOutput": "Total Out",
+  "contextUsagePanel.labels.totalCost": "Total Cost",
+  "contextUsagePanel.labels.totalReasoning": "Total Reasoning",
   "contextUsagePanel.labels.used": "Used",
   "contextUsagePanel.labels.available": "Avail",
   "contextUsagePanel.unavailable": "--",
diff --git a/packages/ui/src/lib/i18n/messages/es/settings.ts b/packages/ui/src/lib/i18n/messages/es/settings.ts
index 7cc84509..fc270bff 100644
--- a/packages/ui/src/lib/i18n/messages/es/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/es/settings.ts
@@ -52,6 +52,10 @@ export const settingsMessages = {
   "contextUsagePanel.labels.input": "Entrada",
   "contextUsagePanel.labels.output": "Salida",
   "contextUsagePanel.labels.cost": "Costo",
+  "contextUsagePanel.labels.totalInput": "Entrada total",
+  "contextUsagePanel.labels.totalOutput": "Salida total",
+  "contextUsagePanel.labels.totalCost": "Costo total",
+  "contextUsagePanel.labels.totalReasoning": "Razonamiento total",
   "contextUsagePanel.labels.used": "Usado",
   "contextUsagePanel.labels.available": "Disp.",
   "contextUsagePanel.unavailable": "--",
diff --git a/packages/ui/src/lib/i18n/messages/fr/settings.ts b/packages/ui/src/lib/i18n/messages/fr/settings.ts
index dcb4ef6e..44a3057a 100644
--- a/packages/ui/src/lib/i18n/messages/fr/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/settings.ts
@@ -52,6 +52,10 @@ export const settingsMessages = {
   "contextUsagePanel.labels.input": "Entrée",
   "contextUsagePanel.labels.output": "Sortie",
   "contextUsagePanel.labels.cost": "Coût",
+  "contextUsagePanel.labels.totalInput": "Entrée totale",
+  "contextUsagePanel.labels.totalOutput": "Sortie totale",
+  "contextUsagePanel.labels.totalCost": "Coût total",
+  "contextUsagePanel.labels.totalReasoning": "Raisonnement total",
   "contextUsagePanel.labels.used": "Utilisé",
   "contextUsagePanel.labels.available": "Dispo",
   "contextUsagePanel.unavailable": "--",
diff --git a/packages/ui/src/lib/i18n/messages/he/settings.ts b/packages/ui/src/lib/i18n/messages/he/settings.ts
index 58657d0b..a9e840b7 100644
--- a/packages/ui/src/lib/i18n/messages/he/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/he/settings.ts
@@ -52,6 +52,10 @@ export const settingsMessages = {
   "contextUsagePanel.labels.input": "קלט",
   "contextUsagePanel.labels.output": "פלט",
   "contextUsagePanel.labels.cost": "עלות",
+  "contextUsagePanel.labels.totalInput": "קלט כולל",
+  "contextUsagePanel.labels.totalOutput": "פלט כולל",
+  "contextUsagePanel.labels.totalCost": "עלות כוללת",
+  "contextUsagePanel.labels.totalReasoning": "חשיבה כוללת",
   "contextUsagePanel.labels.used": "בשימוש",
   "contextUsagePanel.labels.available": "זמין",
   "contextUsagePanel.unavailable": "--",
diff --git a/packages/ui/src/lib/i18n/messages/ja/settings.ts b/packages/ui/src/lib/i18n/messages/ja/settings.ts
index 7cec7f3f..267120a0 100644
--- a/packages/ui/src/lib/i18n/messages/ja/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/settings.ts
@@ -52,6 +52,10 @@ export const settingsMessages = {
   "contextUsagePanel.labels.input": "入力",
   "contextUsagePanel.labels.output": "出力",
   "contextUsagePanel.labels.cost": "コスト",
+  "contextUsagePanel.labels.totalInput": "合計入力",
+  "contextUsagePanel.labels.totalOutput": "合計出力",
+  "contextUsagePanel.labels.totalCost": "合計コスト",
+  "contextUsagePanel.labels.totalReasoning": "合計推論",
   "contextUsagePanel.labels.used": "使用",
   "contextUsagePanel.labels.available": "残り",
   "contextUsagePanel.unavailable": "--",
diff --git a/packages/ui/src/lib/i18n/messages/ru/settings.ts b/packages/ui/src/lib/i18n/messages/ru/settings.ts
index f7f967df..49ff80a6 100644
--- a/packages/ui/src/lib/i18n/messages/ru/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/settings.ts
@@ -52,6 +52,10 @@ export const settingsMessages = {
   "contextUsagePanel.labels.input": "Ввод",
   "contextUsagePanel.labels.output": "Вывод",
   "contextUsagePanel.labels.cost": "Стоимость",
+  "contextUsagePanel.labels.totalInput": "Всего ввод",
+  "contextUsagePanel.labels.totalOutput": "Всего вывод",
+  "contextUsagePanel.labels.totalCost": "Общая стоимость",
+  "contextUsagePanel.labels.totalReasoning": "Всего рассуждений",
   "contextUsagePanel.labels.used": "Использовано",
   "contextUsagePanel.labels.available": "Доступно",
   "contextUsagePanel.unavailable": "--",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts
index 6ad90944..8e469e1e 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts
@@ -52,6 +52,10 @@ export const settingsMessages = {
   "contextUsagePanel.labels.input": "输入",
   "contextUsagePanel.labels.output": "输出",
   "contextUsagePanel.labels.cost": "费用",
+  "contextUsagePanel.labels.totalInput": "总输入",
+  "contextUsagePanel.labels.totalOutput": "总输出",
+  "contextUsagePanel.labels.totalCost": "总费用",
+  "contextUsagePanel.labels.totalReasoning": "总推理",
   "contextUsagePanel.labels.used": "已用",
   "contextUsagePanel.labels.available": "可用",
   "contextUsagePanel.unavailable": "--",
diff --git a/packages/ui/src/lib/thread-totals.test.ts b/packages/ui/src/lib/thread-totals.test.ts
new file mode 100644
index 00000000..0d143495
--- /dev/null
+++ b/packages/ui/src/lib/thread-totals.test.ts
@@ -0,0 +1,124 @@
+import assert from "node:assert/strict"
+import { describe, it } from "node:test"
+
+import type { SessionInfo } from "../stores/sessions.js"
+import { computeThreadTotals } from "./thread-totals.js"
+
+function makeInfo(overrides: Partial<SessionInfo> = {}): SessionInfo {
+  return {
+    cost: 0,
+    contextWindow: 0,
+    isSubscriptionModel: false,
+    inputTokens: 0,
+    outputTokens: 0,
+    reasoningTokens: 0,
+    actualUsageTokens: 0,
+    modelOutputLimit: 0,
+    contextAvailableTokens: null,
+    ...overrides,
+  }
+}
+
+describe("computeThreadTotals", () => {
+  it("sums cost, input, output, and reasoning tokens for normal sessions", () => {
+    const family = [{ id: "s1" }, { id: "s2" }]
+    const infoMap = new Map<string, SessionInfo>([
+      ["s1", makeInfo({ cost: 0.15, inputTokens: 500, outputTokens: 200, reasoningTokens: 100 })],
+      ["s2", makeInfo({ cost: 0.35, inputTokens: 1000, outputTokens: 400, reasoningTokens: 200 })],
+    ])
+
+    const totals = computeThreadTotals(family, infoMap)
+
+    assert.equal(totals.cost, 0.5)
+    assert.equal(totals.inputTokens, 1500)
+    assert.equal(totals.outputTokens, 600)
+    assert.equal(totals.reasoningTokens, 300)
+  })
+
+  it("includes tokens but not cost for subscription model sessions", () => {
+    const family = [{ id: "s1" }]
+    const infoMap = new Map<string, SessionInfo>([
+      [
+        "s1",
+        makeInfo({
+          cost: 1.0,
+          inputTokens: 100,
+          outputTokens: 50,
+          reasoningTokens: 25,
+          isSubscriptionModel: true,
+        }),
+      ],
+    ])
+
+    const totals = computeThreadTotals(family, infoMap)
+
+    assert.equal(totals.cost, 0)
+    assert.equal(totals.inputTokens, 100)
+    assert.equal(totals.outputTokens, 50)
+    assert.equal(totals.reasoningTokens, 25)
+  })
+
+  it("mixes subscription and normal sessions correctly", () => {
+    const family = [{ id: "normal" }, { id: "sub" }]
+    const infoMap = new Map<string, SessionInfo>([
+      [
+        "normal",
+        makeInfo({ cost: 0.1, inputTokens: 200, outputTokens: 100, reasoningTokens: 50 }),
+      ],
+      [
+        "sub",
+        makeInfo({
+          cost: 0.5,
+          inputTokens: 300,
+          outputTokens: 150,
+          reasoningTokens: 75,
+          isSubscriptionModel: true,
+        }),
+      ],
+    ])
+
+    const totals = computeThreadTotals(family, infoMap)
+
+    assert.equal(totals.cost, 0.1)
+    assert.equal(totals.inputTokens, 500)
+    assert.equal(totals.outputTokens, 250)
+    assert.equal(totals.reasoningTokens, 125)
+  })
+
+  it("returns zeros for an empty family", () => {
+    const totals = computeThreadTotals([], undefined)
+
+    assert.equal(totals.cost, 0)
+    assert.equal(totals.inputTokens, 0)
+    assert.equal(totals.outputTokens, 0)
+    assert.equal(totals.reasoningTokens, 0)
+  })
+
+  it("returns zeros when no session info is available", () => {
+    const family = [{ id: "missing" }]
+
+    const totals = computeThreadTotals(family, undefined)
+
+    assert.equal(totals.cost, 0)
+    assert.equal(totals.inputTokens, 0)
+    assert.equal(totals.outputTokens, 0)
+    assert.equal(totals.reasoningTokens, 0)
+  })
+
+  it("treats missing info as zeros", () => {
+    const family = [{ id: "present" }, { id: "missing" }]
+    const infoMap = new Map<string, SessionInfo>([
+      [
+        "present",
+        makeInfo({ cost: 0.1, inputTokens: 100, outputTokens: 50, reasoningTokens: 10 }),
+      ],
+    ])
+
+    const totals = computeThreadTotals(family, infoMap)
+
+    assert.equal(totals.cost, 0.1)
+    assert.equal(totals.inputTokens, 100)
+    assert.equal(totals.outputTokens, 50)
+    assert.equal(totals.reasoningTokens, 10)
+  })
+})
diff --git a/packages/ui/src/lib/thread-totals.ts b/packages/ui/src/lib/thread-totals.ts
new file mode 100644
index 00000000..db25a9e0
--- /dev/null
+++ b/packages/ui/src/lib/thread-totals.ts
@@ -0,0 +1,28 @@
+import type { SessionInfo } from "../stores/sessions"
+
+export interface ThreadTotals {
+  cost: number
+  inputTokens: number
+  outputTokens: number
+  reasoningTokens: number
+}
+
+export function computeThreadTotals(
+  family: { id: string }[],
+  infoMap: Map<string, SessionInfo> | undefined,
+): ThreadTotals {
+  let cost = 0
+  let inputTokens = 0
+  let outputTokens = 0
+  let reasoningTokens = 0
+  for (const session of family) {
+    const sessionInfo = infoMap?.get(session.id)
+    inputTokens += sessionInfo?.inputTokens ?? 0
+    outputTokens += sessionInfo?.outputTokens ?? 0
+    reasoningTokens += sessionInfo?.reasoningTokens ?? 0
+    if (!sessionInfo?.isSubscriptionModel) {
+      cost += sessionInfo?.cost ?? 0
+    }
+  }
+  return { cost, inputTokens, outputTokens, reasoningTokens }
+}
diff --git a/packages/ui/src/stores/session-api.ts b/packages/ui/src/stores/session-api.ts
index 63f7a722..dad131e4 100644
--- a/packages/ui/src/stores/session-api.ts
+++ b/packages/ui/src/stores/session-api.ts
@@ -595,7 +595,14 @@ async function fetchProviders(instanceId: string): Promise<void> {
   }
 }
 
-async function loadMessages(instanceId: string, sessionId: string, force = false): Promise<void> {
+async function loadMessages(
+  instanceId: string,
+  sessionId: string,
+  options?: { force?: boolean; skipDiff?: boolean },
+): Promise<void> {
+  const force = options?.force ?? false
+  const skipDiff = options?.skipDiff ?? false
+
   if (force) {
     setMessagesLoaded((prev) => {
       const next = new Map(prev)
@@ -631,10 +638,11 @@ async function loadMessages(instanceId: string, sessionId: string, force = false
     throw new Error("Session not found")
   }
 
-  // Fetch session-level diffs in the background once the session is opened.
-  void loadSessionDiff(instanceId, sessionId).catch((error) => {
-    log.warn("Failed to load session diff", { instanceId, sessionId, error })
-  })
+  if (!skipDiff) {
+    void loadSessionDiff(instanceId, sessionId).catch((error) => {
+      log.warn("Failed to load session diff", { instanceId, sessionId, error })
+    })
+  }
 
   setLoading((prev) => {
     const next = { ...prev }
diff --git a/packages/ui/src/stores/session-events.ts b/packages/ui/src/stores/session-events.ts
index ef4764b0..8034d0dc 100644
--- a/packages/ui/src/stores/session-events.ts
+++ b/packages/ui/src/stores/session-events.ts
@@ -614,7 +614,7 @@ function handleSessionCompacted(instanceId: string, event: EventSessionCompacted
     ensureSessionStatus(instanceId, sessionID, "working", (event as any)?.directory)
   }
 
-  loadMessages(instanceId, sessionID, true).catch((error) => log.error("Failed to reload session after compaction", error))
+  loadMessages(instanceId, sessionID, { force: true }).catch((error) => log.error("Failed to reload session after compaction", error))
 
   const instanceSessions = sessions().get(instanceId)
   const session = instanceSessions?.get(sessionID)

From a0a8da97e6c2012a29a24426a8acd83e103dbe53 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Sat, 9 May 2026 22:24:12 +0100
Subject: [PATCH 21/39] fix(ui): hydrate full child sessions for usage totals

Use the dedicated session children endpoint when refreshing the session list so parent rows and aggregate usage are based on the complete child set rather than the recent /session window.

Move thread usage totals into session state and refresh them whenever session info changes, including SSE-driven message updates. Parent message loading now also hydrates child messages from the store while preserving existing loaded-message guards.

Validation: npm run typecheck --workspace @codenomad/ui
---
 .../session/context-usage-panel.tsx           |  33 +----
 .../ui/src/stores/message-v2/session-info.ts  |   4 +-
 packages/ui/src/stores/session-api.ts         | 115 +++++++++++++++++-
 packages/ui/src/stores/session-state.ts       |  29 +++++
 packages/ui/src/stores/sessions.ts            |   4 +
 5 files changed, 153 insertions(+), 32 deletions(-)

diff --git a/packages/ui/src/components/session/context-usage-panel.tsx b/packages/ui/src/components/session/context-usage-panel.tsx
index 3c515805..7c69ea1f 100644
--- a/packages/ui/src/components/session/context-usage-panel.tsx
+++ b/packages/ui/src/components/session/context-usage-panel.tsx
@@ -1,13 +1,9 @@
-import { createEffect, createMemo, Show, untrack, type Component } from "solid-js"
-import { getChildSessions, getSessionFamily, getSessionInfo, loadMessages, sessionInfoByInstance } from "../../stores/sessions"
+import { createMemo, Show, type Component } from "solid-js"
+import { getChildSessions, getSessionInfo, getThreadTotals } from "../../stores/sessions"
 import { formatTokenTotal } from "../../lib/formatters"
-import { computeThreadTotals } from "../../lib/thread-totals"
 import { useI18n } from "../../lib/i18n"
-import { getLogger } from "../../lib/logger"
 import { useConfig } from "../../stores/preferences"
 
-const log = getLogger("session")
-
 interface ContextUsagePanelProps {
   instanceId: string
   sessionId: string
@@ -39,32 +35,9 @@ const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
   const children = createMemo(() => getChildSessions(props.instanceId, props.sessionId))
   const hasChildren = createMemo(() => children().length > 0)
 
-  const instanceInfoMap = createMemo(() =>
-    sessionInfoByInstance().get(props.instanceId),
-  )
-
-  createEffect(() => {
-    if (!showUsage()) return
-    const instanceId = props.instanceId
-    const childSessions = children()
-    untrack(() => {
-      for (const child of childSessions) {
-        loadMessages(instanceId, child.id, { skipDiff: true }).catch((error) =>
-          log.error("Failed to load child session messages", {
-            instanceId,
-            sessionId: child.id,
-            error,
-          }),
-        )
-      }
-    })
-  })
-
   const threadTotals = createMemo(() => {
     if (!hasChildren()) return { cost: 0, inputTokens: 0, outputTokens: 0, reasoningTokens: 0 }
-    const map = instanceInfoMap()
-    const family = getSessionFamily(props.instanceId, props.sessionId)
-    return computeThreadTotals(family, map)
+    return getThreadTotals(props.instanceId, props.sessionId) ?? { cost: 0, inputTokens: 0, outputTokens: 0, reasoningTokens: 0 }
   })
 
   const totalCostDisplay = createMemo(() => `$${threadTotals().cost.toFixed(2)}`)
diff --git a/packages/ui/src/stores/message-v2/session-info.ts b/packages/ui/src/stores/message-v2/session-info.ts
index 50bbf697..fc157510 100644
--- a/packages/ui/src/stores/message-v2/session-info.ts
+++ b/packages/ui/src/stores/message-v2/session-info.ts
@@ -1,6 +1,6 @@
 import type { Provider } from "../../types/session"
 import { DEFAULT_MODEL_OUTPUT_LIMIT } from "../session-models"
-import { providers, sessions, sessionInfoByInstance, setSessionInfoByInstance } from "../session-state"
+import { providers, sessions, sessionInfoByInstance, setSessionInfoByInstance, updateThreadTotalsForSession } from "../session-state"
 import { messageStoreBus } from "./bus"
 import type { SessionUsageState } from "./types"
 
@@ -140,4 +140,6 @@ export function updateSessionInfo(instanceId: string, sessionId: string): void {
     next.set(instanceId, instanceInfo)
     return next
   })
+
+  updateThreadTotalsForSession(instanceId, sessionId)
 }
diff --git a/packages/ui/src/stores/session-api.ts b/packages/ui/src/stores/session-api.ts
index dad131e4..bf88185e 100644
--- a/packages/ui/src/stores/session-api.ts
+++ b/packages/ui/src/stores/session-api.ts
@@ -25,6 +25,7 @@ import {
   setLoading,
   cleanupBlankSessions,
   syncInstanceSessionIndicator,
+  updateThreadTotalsForParent,
 } from "./session-state"
 import { DEFAULT_MODEL_OUTPUT_LIMIT, getDefaultModel, isModelValid } from "./session-models"
 import { normalizeMessagePart } from "./message-v2/normalizers"
@@ -45,6 +46,7 @@ import {
 const log = getLogger("api")
 
 const pendingSessionDiffFetches = new Map<string, Promise<void>>()
+const pendingSessionChildrenFetches = new Map<string, Promise<Session[]>>()
 
 async function loadSessionDiff(instanceId: string, sessionId: string, force = false): Promise<void> {
   if (!instanceId || !sessionId) return
@@ -218,6 +220,12 @@ async function fetchSessions(instanceId: string): Promise<void> {
 
 
     pruneDraftPrompts(instanceId, new Set(sessionMap.keys()))
+
+    const parentIds = Array.from(sessionMap.values())
+      .filter((session) => session.parentId === null)
+      .map((session) => session.id)
+
+    await Promise.all(parentIds.map((parentId) => fetchSessionChildren(instanceId, parentId)))
   } catch (error) {
     log.error("Failed to fetch sessions:", error)
     throw error
@@ -230,6 +238,96 @@ async function fetchSessions(instanceId: string): Promise<void> {
   }
 }
 
+function toClientSession(instanceId: string, apiSession: any, existingSession?: Session): Session {
+  return {
+    id: apiSession.id,
+    instanceId,
+    title: apiSession.title || existingSession?.title || "Untitled",
+    parentId: apiSession.parentID || null,
+    agent: existingSession?.agent ?? "",
+    model: existingSession?.model ?? { providerId: "", modelId: "" },
+    status: existingSession?.status ?? "idle",
+    retry: existingSession?.retry ?? null,
+    idleSince: existingSession?.idleSince ?? null,
+    version: apiSession.version,
+    time: {
+      ...apiSession.time,
+    },
+    revert: apiSession.revert
+      ? {
+          messageID: apiSession.revert.messageID,
+          partID: apiSession.revert.partID,
+          snapshot: apiSession.revert.snapshot,
+          diff: apiSession.revert.diff,
+        }
+      : existingSession?.revert,
+    diff: existingSession?.diff,
+    pendingPermission: existingSession?.pendingPermission,
+    pendingQuestion: existingSession?.pendingQuestion,
+  }
+}
+
+async function fetchSessionChildren(instanceId: string, parentSessionId: string): Promise<Session[]> {
+  if (!instanceId || !parentSessionId) return []
+
+  const key = `${instanceId}:${parentSessionId}`
+  const pending = pendingSessionChildrenFetches.get(key)
+  if (pending) return pending
+
+  const promise = (async () => {
+    const instance = instances().get(instanceId)
+    if (!instance || !instance.client) {
+      throw new Error("Instance not ready")
+    }
+
+    const worktreeSlug = getWorktreeSlugForSession(instanceId, parentSessionId)
+    const client = getOrCreateWorktreeClient(instanceId, worktreeSlug)
+
+    log.info(`[HTTP] GET /session/{sessionID}/children for instance ${instanceId}`, { sessionId: parentSessionId })
+    const apiChildren = await requestData<any[]>(
+      client.session.children({ sessionID: parentSessionId }),
+      "session.children",
+    )
+
+    if (!Array.isArray(apiChildren)) return []
+
+    const currentSessions = sessions().get(instanceId)
+    const children = apiChildren.map((apiSession) => toClientSession(instanceId, apiSession, currentSessions?.get(apiSession.id)))
+
+    setSessions((prev) => {
+      const next = new Map(prev)
+      const instanceSessions = new Map(next.get(instanceId))
+      for (const child of children) {
+        instanceSessions.set(child.id, child)
+      }
+      next.set(instanceId, instanceSessions)
+      return next
+    })
+
+    syncInstanceSessionIndicator(instanceId)
+    updateThreadTotalsForParent(instanceId, parentSessionId)
+
+    if (messagesLoaded().get(instanceId)?.has(parentSessionId)) {
+      for (const child of children) {
+        void loadMessages(instanceId, child.id, { skipDiff: true, skipChildren: true }).catch((error) =>
+          log.error("Failed to load child session messages", {
+            instanceId,
+            sessionId: child.id,
+            parentSessionId,
+            error,
+          }),
+        )
+      }
+    }
+
+    return children
+  })()
+
+  pendingSessionChildrenFetches.set(key, promise)
+  void promise.finally(() => pendingSessionChildrenFetches.delete(key))
+  return promise
+}
+
 async function createSession(instanceId: string, agent?: string): Promise<Session> {
   const instance = instances().get(instanceId)
   if (!instance || !instance.client) {
@@ -598,10 +696,11 @@ async function fetchProviders(instanceId: string): Promise<void> {
 async function loadMessages(
   instanceId: string,
   sessionId: string,
-  options?: { force?: boolean; skipDiff?: boolean },
+  options?: { force?: boolean; skipDiff?: boolean; skipChildren?: boolean },
 ): Promise<void> {
   const force = options?.force ?? false
   const skipDiff = options?.skipDiff ?? false
+  const skipChildren = options?.skipChildren ?? false
 
   if (force) {
     setMessagesLoaded((prev) => {
@@ -783,6 +882,19 @@ async function loadMessages(
   }
 
   updateSessionInfo(instanceId, sessionId)
+
+  if (!skipChildren && session.parentId === null) {
+    for (const child of getChildSessions(instanceId, sessionId)) {
+      void loadMessages(instanceId, child.id, { skipDiff: true, skipChildren: true }).catch((error) =>
+        log.error("Failed to load child session messages", {
+          instanceId,
+          sessionId: child.id,
+          parentSessionId: sessionId,
+          error,
+        }),
+      )
+    }
+  }
 }
 
 export {
@@ -792,6 +904,7 @@ export {
   fetchProviders,
 
   fetchSessions,
+  fetchSessionChildren,
   forkSession,
   loadMessages,
 }
diff --git a/packages/ui/src/stores/session-state.ts b/packages/ui/src/stores/session-state.ts
index f5e82cbd..726f7cb8 100644
--- a/packages/ui/src/stores/session-state.ts
+++ b/packages/ui/src/stores/session-state.ts
@@ -10,6 +10,7 @@ import { getLogger } from "../lib/logger"
 import { requestData } from "../lib/opencode-api"
 import { getOrCreateWorktreeClient, getWorktreeSlugForSession } from "./worktrees"
 import { tGlobal } from "../lib/i18n"
+import { computeThreadTotals, type ThreadTotals } from "../lib/thread-totals"
 
 const log = getLogger("session")
 
@@ -47,6 +48,7 @@ const [loading, setLoading] = createSignal({
 
 const [messagesLoaded, setMessagesLoaded] = createSignal<Map<string, Set<string>>>(new Map())
 const [sessionInfoByInstance, setSessionInfoByInstance] = createSignal<Map<string, Map<string, SessionInfo>>>(new Map())
+const [threadTotalsByInstance, setThreadTotalsByInstance] = createSignal<Map<string, Map<string, ThreadTotals>>>(new Map())
 
 const [expandedSessionParents, setExpandedSessionParents] = createSignal<Map<string, Set<string>>>(new Map())
 
@@ -648,6 +650,29 @@ function getSessionInfo(instanceId: string, sessionId: string): SessionInfo | un
   return sessionInfoByInstance().get(instanceId)?.get(sessionId)
 }
 
+function getThreadTotals(instanceId: string, parentSessionId: string): ThreadTotals | undefined {
+  return threadTotalsByInstance().get(instanceId)?.get(parentSessionId)
+}
+
+function updateThreadTotalsForParent(instanceId: string, parentSessionId: string): void {
+  const family = getSessionFamily(instanceId, parentSessionId)
+  const totals = computeThreadTotals(family, sessionInfoByInstance().get(instanceId))
+
+  setThreadTotalsByInstance((prev) => {
+    const next = new Map(prev)
+    const instanceTotals = new Map(next.get(instanceId))
+    instanceTotals.set(parentSessionId, totals)
+    next.set(instanceId, instanceTotals)
+    return next
+  })
+}
+
+function updateThreadTotalsForSession(instanceId: string, sessionId: string): void {
+  const session = sessions().get(instanceId)?.get(sessionId)
+  if (!session) return
+  updateThreadTotalsForParent(instanceId, session.parentId ?? session.id)
+}
+
 async function isBlankSession(session: Session, instanceId: string, fetchIfNeeded = false): Promise<boolean> {
   const created = session.time?.created || 0
   const updated = session.time?.updated || 0
@@ -774,6 +799,10 @@ export {
   setMessagesLoaded,
   sessionInfoByInstance,
   setSessionInfoByInstance,
+  threadTotalsByInstance,
+  getThreadTotals,
+  updateThreadTotalsForParent,
+  updateThreadTotalsForSession,
   getSessionDraftPrompt,
   setSessionDraftPrompt,
   clearSessionDraftPrompt,
diff --git a/packages/ui/src/stores/sessions.ts b/packages/ui/src/stores/sessions.ts
index 96ac43e6..b64b04a7 100644
--- a/packages/ui/src/stores/sessions.ts
+++ b/packages/ui/src/stores/sessions.ts
@@ -18,6 +18,7 @@ import {
   getSessionFamily,
   getSessionInfo,
   getSessionThreads,
+  getThreadTotals,
   getSessions,
   getVisibleSessionIds,
   isSessionBusy,
@@ -45,6 +46,7 @@ import {
   fetchAgents,
   fetchProviders,
   fetchSessions,
+  fetchSessionChildren,
   forkSession,
   loadMessages,
 } from "./session-api"
@@ -109,6 +111,7 @@ export {
   fetchAgents,
   fetchProviders,
   fetchSessions,
+  fetchSessionChildren,
   forkSession,
   getActiveParentSession,
   getActiveSession,
@@ -119,6 +122,7 @@ export {
   getSessionFamily,
   getSessionInfo,
   getSessionThreads,
+  getThreadTotals,
   getSessions,
   getVisibleSessionIds,
   isSessionBusy,

From 6d120b0d84b3e5130668da8ec62bba51a3ad49d3 Mon Sep 17 00:00:00 2001
From: Yao Jianxuan <1378319314@qq.com>
Date: Sun, 10 May 2026 05:46:58 +0800
Subject: [PATCH 22/39] fix(ui): align primary agent selection with OpenCode
 (#409)

## Summary

This PR keeps only the UI-side fix for primary agent selection in
CodeNomad.

It aligns the primary agent selector with OpenCode's behavior by:
- filtering primary-session agents through a shared selectable-primary
rule
- avoiding re-inserting an invalid current agent back into the primary
selector
- using the same primary-agent rule when choosing the default agent for
a newly created session

## Why

The earlier investigation showed that the config-loading problem was
actually rooted in OMO's handling of `OPENCODE_CONFIG_DIR`, not in
CodeNomad itself.

However, there was still an independent UI issue in CodeNomad:
- the primary selector could keep showing an agent that should no longer
be selectable
- new sessions could derive their default agent from a looser filter
than the one used by the selector

This PR keeps only that UI-side fix.

## Changes

- `packages/ui/src/components/agent-selector.tsx`
- use a shared `isSelectablePrimaryAgent` helper for primary-session
filtering
- stop force-inserting the current invalid agent back into the primary
selector list

- `packages/ui/src/stores/session-api.ts`
- use the same `isSelectablePrimaryAgent` helper when selecting the
default agent for a new session

- `packages/ui/src/types/session.ts`
  - add `isSelectablePrimaryAgent(agent)` helper

## Scope

This PR intentionally does **not** include any config merge / config
copy workaround related to `OPENCODE_CONFIG_DIR`.

That part was removed so this PR stays narrowly focused on the
primary-agent selection behavior only.

## Validation

- verified changed files are clean in editor diagnostics
- confirmed this is a minimal UI-only diff

---------

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 packages/ui/src/components/agent-selector.tsx | 14 +++-----------
 packages/ui/src/components/session-picker.tsx |  4 ++--
 packages/ui/src/stores/session-api.ts         | 13 ++++++++++---
 packages/ui/src/types/session.ts              |  7 +++++++
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/ui/src/components/agent-selector.tsx b/packages/ui/src/components/agent-selector.tsx
index b5c6d5da..b3ef06b3 100644
--- a/packages/ui/src/components/agent-selector.tsx
+++ b/packages/ui/src/components/agent-selector.tsx
@@ -1,8 +1,8 @@
 import { Select } from "@kobalte/core/select"
-import { For, Show, createEffect, createMemo } from "solid-js"
+import { Show, createEffect, createMemo } from "solid-js"
 import { agents, fetchAgents, sessions } from "../stores/sessions"
 import { ChevronDown } from "lucide-solid"
-import type { Agent } from "../types/session"
+import { isSelectablePrimaryAgent, type Agent } from "../types/session"
 import { useI18n } from "../lib/i18n"
 import { getLogger } from "../lib/logger"
 const log = getLogger("session")
@@ -34,14 +34,7 @@ export default function AgentSelector(props: AgentSelectorProps) {
       return allAgents.filter((agent) => !agent.hidden)
     }
 
-    const filtered = allAgents.filter((agent) => !agent.hidden && agent.mode !== "subagent")
-
-    const currentAgent = allAgents.find((a) => a.name === props.currentAgent)
-    if (currentAgent && !filtered.find((a) => a.name === props.currentAgent)) {
-      return [currentAgent, ...filtered]
-    }
-
-    return filtered
+    return allAgents.filter(isSelectablePrimaryAgent)
   })
 
   createEffect(() => {
@@ -58,7 +51,6 @@ export default function AgentSelector(props: AgentSelectorProps) {
     }
   })
 
-
   const handleChange = async (value: Agent | null) => {
     if (value && value.name !== props.currentAgent) {
       await props.onAgentChange(value.name)
diff --git a/packages/ui/src/components/session-picker.tsx b/packages/ui/src/components/session-picker.tsx
index b67aee8e..54de9c03 100644
--- a/packages/ui/src/components/session-picker.tsx
+++ b/packages/ui/src/components/session-picker.tsx
@@ -1,6 +1,6 @@
 import { Component, createSignal, Show, For, createEffect } from "solid-js"
 import { Dialog } from "@kobalte/core/dialog"
-import type { Session, Agent } from "../types/session"
+import { isSelectablePrimaryAgent, type Session, type Agent } from "../types/session"
 import { getParentSessions, createSession, setActiveParentSession } from "../stores/sessions"
 import { instances, stopInstance } from "../stores/instances"
 import { agents } from "../stores/sessions"
@@ -22,7 +22,7 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
 
   const instance = () => instances().get(props.instanceId)
   const parentSessions = () => getParentSessions(props.instanceId)
-  const agentList = () => agents().get(props.instanceId) || []
+  const agentList = () => (agents().get(props.instanceId) || []).filter(isSelectablePrimaryAgent)
 
   createEffect(() => {
     const list = agentList()
diff --git a/packages/ui/src/stores/session-api.ts b/packages/ui/src/stores/session-api.ts
index bf88185e..36609380 100644
--- a/packages/ui/src/stores/session-api.ts
+++ b/packages/ui/src/stores/session-api.ts
@@ -1,4 +1,11 @@
-import { getIdleSinceForStatusTransition, mapSdkSessionRetry, mapSdkSessionStatus, type Session, type SessionStatus } from "../types/session"
+import {
+  getIdleSinceForStatusTransition,
+  isSelectablePrimaryAgent,
+  mapSdkSessionRetry,
+  mapSdkSessionStatus,
+  type Session,
+  type SessionStatus,
+} from "../types/session"
 import type { Message } from "../types/message"
 import type { FileDiff } from "@opencode-ai/sdk/v2/client"
 
@@ -341,8 +348,8 @@ async function createSession(instanceId: string, agent?: string): Promise<Sessio
   const client = getOrCreateWorktreeClient(instanceId, worktreeSlug)
 
   const instanceAgents = agents().get(instanceId) || []
-  const nonSubagents = instanceAgents.filter((a) => a.mode !== "subagent")
-  const selectedAgent = agent || (nonSubagents.length > 0 ? nonSubagents[0].name : "")
+  const primaryAgents = instanceAgents.filter(isSelectablePrimaryAgent)
+  const selectedAgent = agent || (primaryAgents.length > 0 ? primaryAgents[0].name : "")
 
   const defaultModel = await getDefaultModel(instanceId, selectedAgent)
 
diff --git a/packages/ui/src/types/session.ts b/packages/ui/src/types/session.ts
index 7f1829fe..58cfa1e9 100644
--- a/packages/ui/src/types/session.ts
+++ b/packages/ui/src/types/session.ts
@@ -112,6 +112,13 @@ export interface Agent {
   }
 }
 
+/**
+ * Matches OpenCode TUI's primary-agent visibility rule: visible iff not a subagent and not hidden.
+ */
+export function isSelectablePrimaryAgent(agent: Agent): boolean {
+  return !agent.hidden && agent.mode !== "subagent"
+}
+
 // Our client-specific Provider interface (simplified version of SDK Provider)
 export interface Provider {
   id: string

From 8976d9985bb91041008ea03099a6f51aaa0797f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Sun, 10 May 2026 17:48:04 +0200
Subject: [PATCH 23/39] fix(ui): drain yolo permissions outside shell render
 (#424)

## Summary
- Split out from #422 as the YOLO-only permission fix.
- Moves YOLO auto-accept draining out of `InstanceShell` render effects
and into the permission queue flow.
- Keeps behavior unchanged: YOLO remains per-session and replies with
`once` only.
- Keeps in-flight cleanup for auto-accept attempts so duplicate sends
are guarded outside UI render timing.

## Why
In YOLO mode, the app could still appear to wait on a permission or
block the UI, even though auto-accept was enabled and the permission was
already queued.

The auto-accept drain was tied to an `InstanceShell` render effect, so
the reply path depended on a specific UI shell rendering. Draining from
permission sync/enqueue and from the YOLO toggle makes auto-accept run
from the permission queue itself instead of UI render timing.

## Validation
- `git diff --check`
- `npm run typecheck --workspace @codenomad/ui`
---
 .../components/instance/instance-shell2.tsx   | 31 +-------
 .../shell/right-panel/tabs/StatusTab.tsx      |  5 +-
 packages/ui/src/stores/instances.ts           | 25 ++++++-
 .../ui/src/stores/permission-auto-accept.ts   | 72 +++++++++++++++----
 4 files changed, 86 insertions(+), 47 deletions(-)

diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index bdfed7f3..1f857591 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -36,7 +36,7 @@ import { serverApi } from "../../lib/api-client"
 import { loadBackgroundProcesses } from "../../stores/background-processes"
 import { BackgroundProcessOutputDialog } from "../background-process-output-dialog"
 import { useI18n } from "../../lib/i18n"
-import { getPermissionQueue, getPermissionQueueLength, getQuestionQueueLength, sendPermissionResponse } from "../../stores/instances"
+import { getPermissionQueueLength, getQuestionQueueLength } from "../../stores/instances"
 import SessionSidebar from "./shell/SessionSidebar"
 import { useSessionSidebarRequests } from "./shell/useSessionSidebarRequests"
 import RightPanel from "./shell/right-panel/RightPanel"
@@ -58,13 +58,7 @@ import { useDrawerHostMeasure } from "./shell/useDrawerHostMeasure"
 import { useDrawerResize } from "./shell/useDrawerResize"
 import { useSessionCache } from "./shell/useSessionCache"
 import { useInstanceSessionContext } from "./shell/useInstanceSessionContext"
-import { getPermissionSessionId } from "../../types/permission"
-import {
-  canAutoRespondPermission,
-  finishAutoRespondPermission,
-  getPermissionAutoAcceptInFlightVersion,
-  isPermissionAutoAcceptEnabled,
-} from "../../stores/permission-auto-accept"
+import { isPermissionAutoAcceptEnabled } from "../../stores/permission-auto-accept"
 
 const log = getLogger("session")
 const OPEN_SESSION_SEARCH_EVENT = "codenomad:open-session-search"
@@ -269,8 +263,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     return permissions + questions > 0
   })
 
-  const permissionQueue = createMemo(() => getPermissionQueue(props.instance.id))
-
   const activePromptInputApi = createMemo(() => {
     const sessionId = activeSessionIdForInstance()
     if (!sessionId || sessionId === "info") return null
@@ -284,25 +276,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     }))
   }
 
-  createEffect(() => {
-    getPermissionAutoAcceptInFlightVersion()
-
-    for (const permission of permissionQueue()) {
-      const sessionId = getPermissionSessionId(permission)
-      if (!sessionId) continue
-      if (!permission?.id) continue
-      if (!canAutoRespondPermission(props.instance.id, sessionId, permission.id)) continue
-
-      void sendPermissionResponse(props.instance.id, sessionId, permission.id, "once")
-        .catch((error) => {
-          log.error("Failed to auto-accept permission", error)
-        })
-        .finally(() => {
-          finishAutoRespondPermission(props.instance.id, sessionId, permission.id)
-        })
-    }
-  })
-
   const yoloModeEnabled = createMemo(() => {
     const session = activeSessionForInstance()
     if (!session) return false
diff --git a/packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx b/packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx
index f618bf03..7be3284c 100644
--- a/packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx
+++ b/packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx
@@ -13,7 +13,8 @@ import type { Session } from "../../../../../types/session"
 import ContextUsagePanel from "../../../../session/context-usage-panel"
 import { TodoListView } from "../../../../tool-call/renderers/todo"
 import InstanceServiceStatus from "../../../../instance-service-status"
-import { isPermissionAutoAcceptEnabled, togglePermissionAutoAccept } from "../../../../../stores/permission-auto-accept"
+import { togglePermissionAutoAcceptForSession } from "../../../../../stores/instances"
+import { isPermissionAutoAcceptEnabled } from "../../../../../stores/permission-auto-accept"
 
 interface StatusTabProps {
   t: (key: string, vars?: Record<string, any>) => string
@@ -63,7 +64,7 @@ const StatusTab: Component<StatusTabProps> = (props) => {
             color="warning"
             size="small"
             inputProps={{ "aria-label": props.t("instanceShell.yoloMode.title") }}
-            onChange={() => togglePermissionAutoAccept(props.instanceId, session.id)}
+            onChange={() => togglePermissionAutoAcceptForSession(props.instanceId, session.id)}
           />
         </div>
       </div>
diff --git a/packages/ui/src/stores/instances.ts b/packages/ui/src/stores/instances.ts
index c6b49482..b4d8878d 100644
--- a/packages/ui/src/stores/instances.ts
+++ b/packages/ui/src/stores/instances.ts
@@ -32,6 +32,7 @@ import { setSessionPendingPermission, setSessionPendingQuestion } from "./sessio
 import { setHasInstances } from "./ui"
 import { messageStoreBus } from "./message-v2/bus"
 import { upsertPermissionV2, removePermissionV2, upsertQuestionV2, removeQuestionV2 } from "./message-v2/bridge"
+import { clearAutoAcceptPermission, drainAutoAcceptPermissions, isPermissionAutoAcceptEnabled, togglePermissionAutoAccept } from "./permission-auto-accept"
 import { clearCacheForInstance } from "../lib/global-cache"
 import { getLogger } from "../lib/logger"
 import { mergeInstanceMetadata, clearInstanceMetadata } from "./instance-metadata"
@@ -207,6 +208,7 @@ async function syncPendingPermissions(instanceId: string): Promise<void> {
       addPermissionToQueue(instanceId, permission)
       upsertPermissionV2(instanceId, permission)
     }
+    drainAutoAcceptPermissions(instanceId, getPermissionQueue(instanceId), sendPermissionResponse, hasPendingPermission)
   } catch (error) {
     log.warn("Failed to sync pending permissions", { instanceId, error })
   }
@@ -615,6 +617,10 @@ function getPermissionQueueLength(instanceId: string): number {
   return getPermissionQueue(instanceId).length
 }
 
+function hasPendingPermission(instanceId: string, permissionId: string): boolean {
+  return getPermissionQueue(instanceId).some((permission) => permission.id === permissionId)
+}
+
 function getQuestionQueue(instanceId: string): QuestionRequest[] {
   const queue = questionQueues().get(instanceId)
   if (!queue) {
@@ -796,6 +802,8 @@ function addPermissionToQueue(instanceId: string, permission: PermissionRequestL
     }
     byPermissionId.set(permission.id, slug)
   }
+
+  drainAutoAcceptPermissions(instanceId, [permission], sendPermissionResponse, hasPendingPermission)
 }
 
 function removePermissionFromQueue(instanceId: string, permissionId: string): void {
@@ -822,8 +830,6 @@ function removePermissionFromQueue(instanceId: string, permissionId: string): vo
     return next
   })
 
-  const updatedQueue = getPermissionQueue(instanceId)
-
   recomputeActiveInterruption(instanceId)
 
   const removed = removedPermission
@@ -832,13 +838,27 @@ function removePermissionFromQueue(instanceId: string, permissionId: string): vo
     permissionWorktreeSlugByInstance.get(instanceId)?.delete(permissionId)
     const removedSessionId = getPermissionSessionId(removed)
     if (removedSessionId) {
+      clearAutoAcceptPermission(instanceId, removedSessionId, permissionId)
       const remaining = decrementSessionPendingCount(instanceId, removedSessionId)
       setSessionPendingPermission(instanceId, removedSessionId, remaining > 0)
     }
   }
 }
 
+function togglePermissionAutoAcceptForSession(instanceId: string, sessionId: string): void {
+  const willEnable = !isPermissionAutoAcceptEnabled(instanceId, sessionId)
+  togglePermissionAutoAccept(instanceId, sessionId)
+  if (!willEnable) return
+  drainAutoAcceptPermissions(instanceId, getPermissionQueue(instanceId), sendPermissionResponse, hasPendingPermission)
+}
+
 function clearPermissionQueue(instanceId: string): void {
+  for (const permission of getPermissionQueue(instanceId)) {
+    const sessionId = getPermissionSessionId(permission)
+    if (sessionId) {
+      clearAutoAcceptPermission(instanceId, sessionId, permission.id)
+    }
+  }
   setPermissionQueues((prev) => {
     const next = new Map(prev)
     next.delete(instanceId)
@@ -1130,6 +1150,7 @@ export {
   getPermissionQueueLength,
   addPermissionToQueue,
   removePermissionFromQueue,
+  togglePermissionAutoAcceptForSession,
   clearPermissionQueue,
   sendPermissionResponse,
   setActivePermissionIdForInstance,
diff --git a/packages/ui/src/stores/permission-auto-accept.ts b/packages/ui/src/stores/permission-auto-accept.ts
index 6607d3a8..1b1ea402 100644
--- a/packages/ui/src/stores/permission-auto-accept.ts
+++ b/packages/ui/src/stores/permission-auto-accept.ts
@@ -1,7 +1,15 @@
 import { createSignal } from "solid-js"
+import type { PermissionReply, PermissionRequestLike } from "../types/permission"
+import { getPermissionSessionId } from "../types/permission"
+import { getLogger } from "../lib/logger"
 
 const STORAGE_KEY = "codenomad:permission-auto-accept:v1"
 
+const log = getLogger("api")
+
+type AutoAcceptResponder = (instanceId: string, sessionId: string, requestId: string, reply: PermissionReply) => Promise<void>
+type PendingPermissionChecker = (instanceId: string, requestId: string) => boolean
+
 function makeKey(instanceId: string, sessionId: string) {
   return `${instanceId}:${sessionId}`
 }
@@ -34,7 +42,6 @@ function persist(next: Map<string, boolean>) {
 }
 
 const [autoAcceptState, setAutoAcceptState] = createSignal(readInitialState())
-const [inFlightVersion, setInFlightVersion] = createSignal(0)
 
 const inFlight = new Set<string>()
 
@@ -54,28 +61,65 @@ export function setPermissionAutoAcceptEnabled(instanceId: string, sessionId: st
     persist(next)
     return next
   })
+  if (!enabled) {
+    clearAutoAcceptSession(instanceId, sessionId)
+  }
 }
 
 export function togglePermissionAutoAccept(instanceId: string, sessionId: string) {
   setPermissionAutoAcceptEnabled(instanceId, sessionId, !isPermissionAutoAcceptEnabled(instanceId, sessionId))
 }
 
-export function canAutoRespondPermission(instanceId: string, sessionId: string, requestId: string) {
-  const key = makeKey(instanceId, sessionId)
-  if (!autoAcceptState().get(key)) return false
-  const requestKey = `${key}:${requestId}`
-  if (inFlight.has(requestKey)) return false
-  inFlight.add(requestKey)
-  return true
+function makeRequestKey(instanceId: string, sessionId: string, requestId: string) {
+  return `${makeKey(instanceId, sessionId)}:${requestId}`
 }
 
-export function getPermissionAutoAcceptInFlightVersion() {
-  return inFlightVersion()
+export function clearAutoAcceptPermission(instanceId: string, sessionId: string, requestId: string) {
+  const requestKey = makeRequestKey(instanceId, sessionId, requestId)
+  inFlight.delete(requestKey)
 }
 
-export function finishAutoRespondPermission(instanceId: string, sessionId: string, requestId: string) {
-  if (!inFlight.delete(`${makeKey(instanceId, sessionId)}:${requestId}`)) {
-    return
+export function clearAutoAcceptSession(instanceId: string, sessionId: string) {
+  const prefix = `${makeKey(instanceId, sessionId)}:`
+  for (const requestKey of Array.from(inFlight)) {
+    if (requestKey.startsWith(prefix)) {
+      inFlight.delete(requestKey)
+    }
+  }
+}
+
+export function drainAutoAcceptPermission(
+  instanceId: string,
+  permission: PermissionRequestLike,
+  responder: AutoAcceptResponder,
+  isPending: PendingPermissionChecker,
+) {
+  const sessionId = getPermissionSessionId(permission)
+  if (!sessionId || !permission?.id) return
+  if (!isPermissionAutoAcceptEnabled(instanceId, sessionId)) return
+  if (!isPending(instanceId, permission.id)) return
+
+  const requestKey = makeRequestKey(instanceId, sessionId, permission.id)
+  if (inFlight.has(requestKey)) return
+
+  inFlight.add(requestKey)
+
+  void responder(instanceId, sessionId, permission.id, "once")
+    .catch((error) => {
+      log.error("Failed to auto-accept permission", error)
+    })
+    .finally(() => {
+      inFlight.delete(requestKey)
+    })
+}
+
+export function drainAutoAcceptPermissions(
+  instanceId: string,
+  permissions: PermissionRequestLike[],
+  responder: AutoAcceptResponder,
+  isPending: PendingPermissionChecker,
+) {
+  for (const permission of permissions) {
+    drainAutoAcceptPermission(instanceId, permission, responder, isPending)
   }
-  setInFlightVersion((value) => value + 1)
 }

From 4090989d12a67911db824bd51580bb3443276ace Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Sun, 10 May 2026 18:11:07 +0200
Subject: [PATCH 24/39] fix(ui): ignore stale permission events after reply
 (#425)

## Summary
- Split out from #422 as the stale-permission-events fix.
- Clears permission UI state immediately after a successful local
permission reply instead of waiting for `permission.replied` SSE.
- Tracks replied permission IDs until a newer pending-permission sync
observes that the server no longer reports them pending.
- Marks SSE `permission.replied` events into the same replied-ID path so
delayed pending events/sync results cannot resurrect prompts that were
just answered.

## Why
A permission prompt could remain on screen after clicking Allow/Deny, or
clicking Allow could look like it did not take effect and require
another click. Reloading could fix the UI, which pointed to stale local
permission state rather than the server still waiting.

The UI receives permission state from local replies, SSE events, and
pending-permission sync. If an older pending event or sync result is
processed after a confirmed reply, the UI can re-add a permission that
was already answered. Replied IDs stay suppressed until a sync started
after the local reply proves the server has dropped that permission from
the pending list.

## Validation
- `git diff --check`
- `node --test packages/ui/src/stores/permission-replies.test.ts`
- `npm run typecheck --workspace @codenomad/ui`
---
 packages/ui/src/stores/instances.ts           | 24 ++++++++--
 .../ui/src/stores/permission-replies.test.ts  | 44 +++++++++++++++++++
 packages/ui/src/stores/permission-replies.ts  | 38 ++++++++++++++++
 packages/ui/src/stores/session-events.ts      | 10 ++++-
 4 files changed, 112 insertions(+), 4 deletions(-)
 create mode 100644 packages/ui/src/stores/permission-replies.test.ts
 create mode 100644 packages/ui/src/stores/permission-replies.ts

diff --git a/packages/ui/src/stores/instances.ts b/packages/ui/src/stores/instances.ts
index b4d8878d..168a9a1c 100644
--- a/packages/ui/src/stores/instances.ts
+++ b/packages/ui/src/stores/instances.ts
@@ -32,6 +32,12 @@ import { setSessionPendingPermission, setSessionPendingQuestion } from "./sessio
 import { setHasInstances } from "./ui"
 import { messageStoreBus } from "./message-v2/bus"
 import { upsertPermissionV2, removePermissionV2, upsertQuestionV2, removeQuestionV2 } from "./message-v2/bridge"
+import {
+  clearRepliedPermissions,
+  hasRepliedPermission,
+  markPermissionReplied,
+  pruneRepliedPermissions,
+} from "./permission-replies"
 import { clearAutoAcceptPermission, drainAutoAcceptPermissions, isPermissionAutoAcceptEnabled, togglePermissionAutoAccept } from "./permission-auto-accept"
 import { clearCacheForInstance } from "../lib/global-cache"
 import { getLogger } from "../lib/logger"
@@ -79,6 +85,7 @@ function syncHasInstancesFlag() {
   const readyExists = Array.from(instances().values()).some((instance) => instance.status === "ready")
   setHasInstances(readyExists)
 }
+
 interface DisconnectedInstanceInfo {
   id: string
   folder: string
@@ -187,12 +194,17 @@ async function syncPendingPermissions(instanceId: string): Promise<void> {
   if (!instance?.client) return
 
   try {
+    const syncStartedAt = Date.now()
     const remote = await requestData<PermissionRequestLike[]>(
       instance.client.permission.list(),
       "permission.list",
     )
 
-    const remoteIds = new Set(remote.map((item) => item.id))
+    const remotePendingIds = new Set(remote.map((item) => item.id))
+    pruneRepliedPermissions(instanceId, remotePendingIds, syncStartedAt)
+
+    const pendingRemote = remote.filter((item) => !hasRepliedPermission(instanceId, item.id))
+    const remoteIds = new Set(pendingRemote.map((item) => item.id))
     const local = getPermissionQueue(instanceId)
 
     // Remove any stale local permissions missing from server.
@@ -204,7 +216,7 @@ async function syncPendingPermissions(instanceId: string): Promise<void> {
     }
 
     // Upsert all server-side pending permissions.
-    for (const permission of remote) {
+    for (const permission of pendingRemote) {
       addPermissionToQueue(instanceId, permission)
       upsertPermissionV2(instanceId, permission)
     }
@@ -514,6 +526,7 @@ function removeInstance(id: string) {
   removeLogContainer(id)
   clearCommands(id)
   clearPermissionQueue(id)
+  clearRepliedPermissions(id)
   clearQuestionQueue(id)
   clearInstanceMetadata(id)
 
@@ -1054,8 +1067,11 @@ async function sendPermissionResponse(
       "permission.reply",
     )
 
-    // Remove from queue after successful response
+    markPermissionReplied(instanceId, requestId)
+    // Remove from both local queues after successful response; the SSE replied event
+    // is still accepted, but the UI no longer depends on receiving it.
     removePermissionFromQueue(instanceId, requestId)
+    removePermissionV2(instanceId, requestId)
   } catch (error) {
     log.error("Failed to send permission response", error)
     throw error
@@ -1150,6 +1166,8 @@ export {
   getPermissionQueueLength,
   addPermissionToQueue,
   removePermissionFromQueue,
+  markPermissionReplied,
+  hasRepliedPermission,
   togglePermissionAutoAcceptForSession,
   clearPermissionQueue,
   sendPermissionResponse,
diff --git a/packages/ui/src/stores/permission-replies.test.ts b/packages/ui/src/stores/permission-replies.test.ts
new file mode 100644
index 00000000..1079b720
--- /dev/null
+++ b/packages/ui/src/stores/permission-replies.test.ts
@@ -0,0 +1,44 @@
+import assert from "node:assert/strict"
+import { describe, it } from "node:test"
+
+import {
+  clearRepliedPermissions,
+  hasRepliedPermission,
+  markPermissionReplied,
+  pruneRepliedPermissions,
+} from "./permission-replies.ts"
+
+describe("replied permission tracking", () => {
+  it("keeps replied ids when an older sync does not include them", () => {
+    const instanceId = "instance-old-sync"
+    const permissionId = "permission-1"
+
+    markPermissionReplied(instanceId, permissionId, 1_000)
+    pruneRepliedPermissions(instanceId, new Set(), 900)
+
+    assert.equal(hasRepliedPermission(instanceId, permissionId), true)
+    clearRepliedPermissions(instanceId)
+  })
+
+  it("keeps replied ids while the server still reports them pending", () => {
+    const instanceId = "instance-still-pending"
+    const permissionId = "permission-1"
+
+    markPermissionReplied(instanceId, permissionId, 1_000)
+    pruneRepliedPermissions(instanceId, new Set([permissionId]), 1_100)
+
+    assert.equal(hasRepliedPermission(instanceId, permissionId), true)
+    clearRepliedPermissions(instanceId)
+  })
+
+  it("clears replied ids once a newer sync observes them missing", () => {
+    const instanceId = "instance-new-sync"
+    const permissionId = "permission-1"
+
+    markPermissionReplied(instanceId, permissionId, 1_000)
+    pruneRepliedPermissions(instanceId, new Set(), 1_100)
+
+    assert.equal(hasRepliedPermission(instanceId, permissionId), false)
+    clearRepliedPermissions(instanceId)
+  })
+})
diff --git a/packages/ui/src/stores/permission-replies.ts b/packages/ui/src/stores/permission-replies.ts
new file mode 100644
index 00000000..c354c63b
--- /dev/null
+++ b/packages/ui/src/stores/permission-replies.ts
@@ -0,0 +1,38 @@
+const repliedPermissionIdsByInstance = new Map<string, Map<string, number>>()
+
+function pruneRepliedPermissions(instanceId: string, remotePendingIds: Set<string>, syncStartedAt: number): void {
+  const replied = repliedPermissionIdsByInstance.get(instanceId)
+  if (!replied) return
+  for (const [permissionId, repliedAt] of replied) {
+    // Only a sync started after the local reply can prove the server no longer
+    // considers this permission pending.
+    if (!remotePendingIds.has(permissionId) && syncStartedAt >= repliedAt) {
+      replied.delete(permissionId)
+    }
+  }
+  if (replied.size === 0) {
+    repliedPermissionIdsByInstance.delete(instanceId)
+  }
+}
+
+function markPermissionReplied(instanceId: string, permissionId: string, repliedAt = Date.now()): void {
+  if (!permissionId) return
+  let replied = repliedPermissionIdsByInstance.get(instanceId)
+  if (!replied) {
+    replied = new Map()
+    repliedPermissionIdsByInstance.set(instanceId, replied)
+  }
+  replied.set(permissionId, repliedAt)
+}
+
+function hasRepliedPermission(instanceId: string, permissionId: string): boolean {
+  const replied = repliedPermissionIdsByInstance.get(instanceId)
+  if (!replied) return false
+  return replied.has(permissionId)
+}
+
+function clearRepliedPermissions(instanceId: string): void {
+  repliedPermissionIdsByInstance.delete(instanceId)
+}
+
+export { clearRepliedPermissions, hasRepliedPermission, markPermissionReplied, pruneRepliedPermissions }
diff --git a/packages/ui/src/stores/session-events.ts b/packages/ui/src/stores/session-events.ts
index 8034d0dc..5f3a480d 100644
--- a/packages/ui/src/stores/session-events.ts
+++ b/packages/ui/src/stores/session-events.ts
@@ -35,6 +35,8 @@ import {
   instances,
   addPermissionToQueue,
   removePermissionFromQueue,
+  markPermissionReplied,
+  hasRepliedPermission,
   addQuestionToQueue,
   removeQuestionFromQueue,
 } from "./instances"
@@ -689,8 +691,13 @@ function handleTuiToast(_instanceId: string, event: TuiToastEvent): void {
 function handlePermissionUpdated(instanceId: string, event: { type: string; properties?: PermissionRequestLike } | any): void {
   const permission = event?.properties as PermissionRequestLike | undefined
   if (!permission) return
+  const permissionId = getPermissionId(permission)
+  if (permissionId && hasRepliedPermission(instanceId, permissionId)) {
+    log.info(`[SSE] Ignoring stale permission request after local reply: ${permissionId}`)
+    return
+  }
 
-  log.info(`[SSE] Permission request: ${getPermissionId(permission)} (${getPermissionKind(permission)})`)
+  log.info(`[SSE] Permission request: ${permissionId} (${getPermissionKind(permission)})`)
   addPermissionToQueue(instanceId, permission)
   upsertPermissionV2(instanceId, permission)
 
@@ -710,6 +717,7 @@ function handlePermissionReplied(instanceId: string, event: { type: string; prop
   if (!requestId) return
 
   log.info(`[SSE] Permission replied: ${requestId}`)
+  markPermissionReplied(instanceId, requestId)
   removePermissionFromQueue(instanceId, requestId)
   removePermissionV2(instanceId, requestId)
 }

From 342531090e2bebdb5a17c33f1ec41cf89dbe4d91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Sun, 10 May 2026 18:44:43 +0200
Subject: [PATCH 25/39] feat(ui): make message timeline hideable (#428)

## Summary
- Add a behavior setting to show or hide the message timeline sidebar.
- Remove the timeline layout gutter when the sidebar is disabled.
- Add setting labels for all supported locales.

## Why
user wants a more minimal workspace and a little more horizontal room
without losing the default timeline experience for everyone else.

## Validation
- npm run typecheck --workspace @codenomad/ui
- git diff --check
- npm run build:tauri, then launched the raw release exe

Fixes #418
---
 packages/ui/src/App.tsx                       |  2 ++
 .../ui/src/components/message-section.tsx     |  7 +++++--
 .../settings/appearance-settings-section.tsx  |  2 ++
 packages/ui/src/lib/hooks/use-commands.ts     |  2 ++
 .../ui/src/lib/i18n/messages/en/settings.ts   |  2 ++
 .../ui/src/lib/i18n/messages/es/settings.ts   |  2 ++
 .../ui/src/lib/i18n/messages/fr/settings.ts   |  2 ++
 .../ui/src/lib/i18n/messages/he/settings.ts   |  2 ++
 .../ui/src/lib/i18n/messages/ja/settings.ts   |  2 ++
 .../ui/src/lib/i18n/messages/ru/settings.ts   |  2 ++
 .../src/lib/i18n/messages/zh-Hans/settings.ts |  2 ++
 .../ui/src/lib/settings/behavior-registry.ts  | 19 +++++++++++++++++++
 packages/ui/src/stores/preferences.tsx        |  9 +++++++++
 13 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index 774d16b8..d32a3a80 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -80,6 +80,7 @@ const App: Component = () => {
     recordWorkspaceLaunch,
     toggleShowThinkingBlocks,
     toggleKeyboardShortcutHints,
+    toggleShowMessageTimeline,
     toggleShowTimelineTools,
     toggleAutoCleanupBlankSessions,
     toggleUsageMetrics,
@@ -411,6 +412,7 @@ const App: Component = () => {
     toggleAutoCleanupBlankSessions,
     toggleShowThinkingBlocks,
     toggleKeyboardShortcutHints,
+    toggleShowMessageTimeline,
     toggleShowTimelineTools,
     toggleUsageMetrics,
     togglePromptSubmitOnEnter,
diff --git a/packages/ui/src/components/message-section.tsx b/packages/ui/src/components/message-section.tsx
index f2cc7abb..c2f3bebb 100644
--- a/packages/ui/src/components/message-section.tsx
+++ b/packages/ui/src/components/message-section.tsx
@@ -50,6 +50,7 @@ export default function MessageSection(props: MessageSectionProps) {
   const { preferences, updatePreferences } = useConfig()
   const { t } = useI18n()
   const showUsagePreference = () => preferences().showUsageMetrics ?? true
+  const showMessageTimelinePreference = () => preferences().showMessageTimeline ?? true
   const showTimelineToolsPreference = () => preferences().showTimelineTools ?? true
   const holdLongAssistantRepliesEnabled = () => preferences().holdLongAssistantReplies ?? true
   const store = createMemo<InstanceMessageStore>(() => messageStoreBus.getOrCreate(props.instanceId))
@@ -1226,6 +1227,8 @@ export default function MessageSection(props: MessageSectionProps) {
     clearQuoteSelection()
   })
 
+  const showTimeline = createMemo(() => showMessageTimelinePreference() && hasTimelineSegments())
+
   return (
     <div
       class="message-stream-container"
@@ -1234,7 +1237,7 @@ export default function MessageSection(props: MessageSectionProps) {
       data-stream-active={isActive() ? "true" : "false"}
     >
       <div
-        class={`message-layout${hasTimelineSegments() ? " message-layout--with-timeline" : ""}`}
+        class={`message-layout${showTimeline() ? " message-layout--with-timeline" : ""}`}
         data-scroll-buttons={scrollButtonsCount()}
       >
         <VirtualFollowList
@@ -1616,7 +1619,7 @@ export default function MessageSection(props: MessageSectionProps) {
           </div>
         </Show>
 
-        <Show when={hasTimelineSegments()}>
+        <Show when={showTimeline()}>
           <div class="message-timeline-sidebar">
             <MessageTimeline
               segments={timelineSegments()}
diff --git a/packages/ui/src/components/settings/appearance-settings-section.tsx b/packages/ui/src/components/settings/appearance-settings-section.tsx
index 10974d0b..281366d6 100644
--- a/packages/ui/src/components/settings/appearance-settings-section.tsx
+++ b/packages/ui/src/components/settings/appearance-settings-section.tsx
@@ -20,6 +20,7 @@ export const AppearanceSettingsSection: Component = () => {
     updatePreferences,
     toggleShowThinkingBlocks,
     toggleKeyboardShortcutHints,
+    toggleShowMessageTimeline,
     toggleShowTimelineTools,
     toggleUsageMetrics,
     toggleAutoCleanupBlankSessions,
@@ -38,6 +39,7 @@ export const AppearanceSettingsSection: Component = () => {
       updatePreferences,
       toggleShowThinkingBlocks,
       toggleKeyboardShortcutHints,
+      toggleShowMessageTimeline,
       toggleShowTimelineTools,
         toggleUsageMetrics,
         toggleAutoCleanupBlankSessions,
diff --git a/packages/ui/src/lib/hooks/use-commands.ts b/packages/ui/src/lib/hooks/use-commands.ts
index d6a7d670..160cd87f 100644
--- a/packages/ui/src/lib/hooks/use-commands.ts
+++ b/packages/ui/src/lib/hooks/use-commands.ts
@@ -31,6 +31,7 @@ export interface UseCommandsOptions {
   preferences: Accessor<Preferences>
   toggleShowThinkingBlocks: () => void
   toggleKeyboardShortcutHints: () => void
+  toggleShowMessageTimeline: () => void
   toggleShowTimelineTools: () => void
   toggleUsageMetrics: () => void
   toggleAutoCleanupBlankSessions: () => void
@@ -420,6 +421,7 @@ export function useCommands(options: UseCommandsOptions) {
       preferences: options.preferences,
       toggleShowThinkingBlocks: options.toggleShowThinkingBlocks,
       toggleKeyboardShortcutHints: options.toggleKeyboardShortcutHints,
+      toggleShowMessageTimeline: options.toggleShowMessageTimeline,
       toggleShowTimelineTools: options.toggleShowTimelineTools,
       toggleUsageMetrics: options.toggleUsageMetrics,
       toggleAutoCleanupBlankSessions: options.toggleAutoCleanupBlankSessions,
diff --git a/packages/ui/src/lib/i18n/messages/en/settings.ts b/packages/ui/src/lib/i18n/messages/en/settings.ts
index 18aa670d..35f3999c 100644
--- a/packages/ui/src/lib/i18n/messages/en/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/en/settings.ts
@@ -135,6 +135,8 @@ export const settingsMessages = {
   "settings.behavior.thinking.subtitle": "Show or hide AI thinking sections in messages.",
   "settings.behavior.thinkingDefault.title": "Thinking default",
   "settings.behavior.thinkingDefault.subtitle": "Choose whether thinking sections start expanded or collapsed.",
+  "settings.behavior.messageTimeline.title": "Message timeline",
+  "settings.behavior.messageTimeline.subtitle": "Show or hide the message timeline sidebar.",
   "settings.behavior.timelineTools.title": "Timeline tool calls",
   "settings.behavior.timelineTools.subtitle": "Show or hide tool call entries in the message timeline.",
   "settings.behavior.diffView.title": "Diff view",
diff --git a/packages/ui/src/lib/i18n/messages/es/settings.ts b/packages/ui/src/lib/i18n/messages/es/settings.ts
index fc270bff..a158ec51 100644
--- a/packages/ui/src/lib/i18n/messages/es/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/es/settings.ts
@@ -134,6 +134,8 @@ export const settingsMessages = {
   "settings.behavior.thinking.subtitle": "Muestra u oculta las secciones de pensamiento de la IA en los mensajes.",
   "settings.behavior.thinkingDefault.title": "Pensamiento por defecto",
   "settings.behavior.thinkingDefault.subtitle": "Elige si las secciones de pensamiento comienzan expandidas o contraidas.",
+  "settings.behavior.messageTimeline.title": "Linea de tiempo de mensajes",
+  "settings.behavior.messageTimeline.subtitle": "Muestra u oculta la barra lateral de la linea de tiempo de mensajes.",
   "settings.behavior.timelineTools.title": "Llamadas de herramientas en la linea de tiempo",
   "settings.behavior.timelineTools.subtitle": "Muestra u oculta entradas de llamadas de herramientas en la linea de tiempo de mensajes.",
   "settings.behavior.diffView.title": "Vista de diferencias",
diff --git a/packages/ui/src/lib/i18n/messages/fr/settings.ts b/packages/ui/src/lib/i18n/messages/fr/settings.ts
index 44a3057a..72229287 100644
--- a/packages/ui/src/lib/i18n/messages/fr/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/settings.ts
@@ -134,6 +134,8 @@ export const settingsMessages = {
   "settings.behavior.thinking.subtitle": "Afficher ou masquer les sections de reflexion de l'IA dans les messages.",
   "settings.behavior.thinkingDefault.title": "Etat initial de la reflexion",
   "settings.behavior.thinkingDefault.subtitle": "Choisir si les sections de reflexion commencent developpees ou reduites.",
+  "settings.behavior.messageTimeline.title": "Chronologie des messages",
+  "settings.behavior.messageTimeline.subtitle": "Afficher ou masquer la barre laterale de chronologie des messages.",
   "settings.behavior.timelineTools.title": "Appels d'outils dans la chronologie",
   "settings.behavior.timelineTools.subtitle": "Afficher ou masquer les entrees d'appels d'outils dans la chronologie des messages.",
   "settings.behavior.diffView.title": "Vue du diff",
diff --git a/packages/ui/src/lib/i18n/messages/he/settings.ts b/packages/ui/src/lib/i18n/messages/he/settings.ts
index a9e840b7..cc8b5904 100644
--- a/packages/ui/src/lib/i18n/messages/he/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/he/settings.ts
@@ -133,6 +133,8 @@ export const settingsMessages = {
   "settings.behavior.thinking.subtitle": "הצג או הסתר קטעי חשיבה של ה-AI בהודעות.",
   "settings.behavior.thinkingDefault.title": "ברירת מחדל לחשיבה",
   "settings.behavior.thinkingDefault.subtitle": "בחר האם קטעי חשיבה מתחילים פרוסים או מכווצים.",
+  "settings.behavior.messageTimeline.title": "ציר זמן הודעות",
+  "settings.behavior.messageTimeline.subtitle": "הצג או הסתר את סרגל הצד של ציר זמן ההודעות.",
   "settings.behavior.timelineTools.title": "קריאות כלי בציר הזמן",
   "settings.behavior.timelineTools.subtitle": "הצג או הסתר קריאות כלי בציר הודעות.",
   "settings.behavior.diffView.title": "תצוגת diff",
diff --git a/packages/ui/src/lib/i18n/messages/ja/settings.ts b/packages/ui/src/lib/i18n/messages/ja/settings.ts
index 267120a0..f764acbf 100644
--- a/packages/ui/src/lib/i18n/messages/ja/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/settings.ts
@@ -134,6 +134,8 @@ export const settingsMessages = {
   "settings.behavior.thinking.subtitle": "メッセージ内のAIの思考セクションを表示/非表示にします。",
   "settings.behavior.thinkingDefault.title": "思考の既定",
   "settings.behavior.thinkingDefault.subtitle": "思考セクションを最初に展開/折りたたみのどちらで表示するかを選びます。",
+  "settings.behavior.messageTimeline.title": "メッセージタイムライン",
+  "settings.behavior.messageTimeline.subtitle": "メッセージタイムラインのサイドバーを表示/非表示にします。",
   "settings.behavior.timelineTools.title": "タイムラインのツール呼び出し",
   "settings.behavior.timelineTools.subtitle": "メッセージタイムラインでツール呼び出しを表示/非表示にします。",
   "settings.behavior.diffView.title": "差分表示",
diff --git a/packages/ui/src/lib/i18n/messages/ru/settings.ts b/packages/ui/src/lib/i18n/messages/ru/settings.ts
index 49ff80a6..2b9dc2f2 100644
--- a/packages/ui/src/lib/i18n/messages/ru/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/settings.ts
@@ -134,6 +134,8 @@ export const settingsMessages = {
   "settings.behavior.thinking.subtitle": "Показывать или скрывать разделы размышлений ИИ в сообщениях.",
   "settings.behavior.thinkingDefault.title": "Размышления по умолчанию",
   "settings.behavior.thinkingDefault.subtitle": "Выберите, начинать ли разделы размышлений развернутыми или свернутыми.",
+  "settings.behavior.messageTimeline.title": "Таймлайн сообщений",
+  "settings.behavior.messageTimeline.subtitle": "Показывать или скрывать боковую панель таймлайна сообщений.",
   "settings.behavior.timelineTools.title": "Вызовы инструментов в таймлайне",
   "settings.behavior.timelineTools.subtitle": "Показывать или скрывать записи вызовов инструментов в таймлайне сообщений.",
   "settings.behavior.diffView.title": "Вид диффа",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts
index 8e469e1e..beae0a58 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts
@@ -134,6 +134,8 @@ export const settingsMessages = {
   "settings.behavior.thinking.subtitle": "在消息中显示或隐藏AI的思考区块。",
   "settings.behavior.thinkingDefault.title": "思考默认状态",
   "settings.behavior.thinkingDefault.subtitle": "选择思考区块默认是展开还是折叠。",
+  "settings.behavior.messageTimeline.title": "消息时间线",
+  "settings.behavior.messageTimeline.subtitle": "显示或隐藏消息时间线侧边栏。",
   "settings.behavior.timelineTools.title": "时间线工具调用",
   "settings.behavior.timelineTools.subtitle": "在消息时间线中显示或隐藏工具调用条目。",
   "settings.behavior.diffView.title": "差异视图",
diff --git a/packages/ui/src/lib/settings/behavior-registry.ts b/packages/ui/src/lib/settings/behavior-registry.ts
index 4b1abd96..25bd13e4 100644
--- a/packages/ui/src/lib/settings/behavior-registry.ts
+++ b/packages/ui/src/lib/settings/behavior-registry.ts
@@ -38,6 +38,7 @@ export type BehaviorRegistryActions = {
   updatePreferences?: (updates: Partial<Preferences>) => void
   toggleShowThinkingBlocks: () => void
   toggleKeyboardShortcutHints: () => void
+  toggleShowMessageTimeline: () => void
   toggleShowTimelineTools: () => void
   toggleUsageMetrics: () => void
   toggleAutoCleanupBlankSessions: () => void
@@ -122,6 +123,24 @@ export function getBehaviorSettings(actions: BehaviorRegistryActions): BehaviorS
         { value: "collapsed", labelKey: "commands.common.collapsed" },
       ],
     },
+    {
+      kind: "toggle",
+      id: "behavior.messageTimeline",
+      titleKey: "settings.behavior.messageTimeline.title",
+      subtitleKey: "settings.behavior.messageTimeline.subtitle",
+      get: (p) => Boolean(p.showMessageTimeline ?? true),
+      set: (next) => {
+        if (updatePreferences) {
+          updatePreferences({ showMessageTimeline: next })
+          return
+        }
+        setBooleanByToggle(
+          () => Boolean(prefs().showMessageTimeline ?? true),
+          actions.toggleShowMessageTimeline,
+          next,
+        )
+      },
+    },
     {
       kind: "toggle",
       id: "behavior.timelineToolCalls",
diff --git a/packages/ui/src/stores/preferences.tsx b/packages/ui/src/stores/preferences.tsx
index 7fb9310e..a39b0796 100644
--- a/packages/ui/src/stores/preferences.tsx
+++ b/packages/ui/src/stores/preferences.tsx
@@ -54,6 +54,7 @@ export interface UiSettings {
   showThinkingBlocks: boolean
   showKeyboardShortcutHints: boolean
   thinkingBlocksExpansion: ExpansionPreference
+  showMessageTimeline: boolean
   showTimelineTools: boolean
   holdLongAssistantReplies: boolean
   promptSubmitOnEnter: boolean
@@ -134,6 +135,7 @@ const defaultUiSettings: UiSettings = {
   showThinkingBlocks: false,
   showKeyboardShortcutHints: true,
   thinkingBlocksExpansion: "expanded",
+  showMessageTimeline: true,
   showTimelineTools: true,
   holdLongAssistantReplies: true,
   promptSubmitOnEnter: false,
@@ -169,6 +171,7 @@ function normalizeUiSettings(input?: Partial<UiSettings> | null): UiSettings {
     showKeyboardShortcutHints:
       sanitized.showKeyboardShortcutHints ?? defaultUiSettings.showKeyboardShortcutHints,
     thinkingBlocksExpansion: sanitized.thinkingBlocksExpansion ?? defaultUiSettings.thinkingBlocksExpansion,
+    showMessageTimeline: sanitized.showMessageTimeline ?? defaultUiSettings.showMessageTimeline,
     showTimelineTools: sanitized.showTimelineTools ?? defaultUiSettings.showTimelineTools,
     holdLongAssistantReplies: sanitized.holdLongAssistantReplies ?? defaultUiSettings.holdLongAssistantReplies,
     promptSubmitOnEnter: sanitized.promptSubmitOnEnter ?? defaultUiSettings.promptSubmitOnEnter,
@@ -661,6 +664,10 @@ function toggleShowTimelineTools(): void {
   updateUiSettings({ showTimelineTools: !preferences().showTimelineTools })
 }
 
+function toggleShowMessageTimeline(): void {
+  updateUiSettings({ showMessageTimeline: !(preferences().showMessageTimeline ?? true) })
+}
+
 function toggleUsageMetrics(): void {
   updateUiSettings({ showUsageMetrics: !preferences().showUsageMetrics })
 }
@@ -743,6 +750,7 @@ interface ConfigContextValue {
   // ui settings helpers
   toggleShowThinkingBlocks: typeof toggleShowThinkingBlocks
   toggleKeyboardShortcutHints: typeof toggleKeyboardShortcutHints
+  toggleShowMessageTimeline: typeof toggleShowMessageTimeline
   toggleShowTimelineTools: typeof toggleShowTimelineTools
   toggleUsageMetrics: typeof toggleUsageMetrics
   toggleAutoCleanupBlankSessions: typeof toggleAutoCleanupBlankSessions
@@ -794,6 +802,7 @@ const configContextValue: ConfigContextValue = {
   setModelThinkingSelection,
   toggleShowThinkingBlocks,
   toggleKeyboardShortcutHints,
+  toggleShowMessageTimeline,
   toggleShowTimelineTools,
   toggleUsageMetrics,
   toggleAutoCleanupBlankSessions,

From e0194ece050466637b4a05733122805afad03cca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Sun, 10 May 2026 18:54:21 +0200
Subject: [PATCH 26/39] fix(ui): reconcile permission tool attachments (#426)

## Summary
- Split out from #422 as the permission/tool-call reconciliation fix.
- Reconciles pending permissions whenever live tool parts update,
matching the existing question re-link path.
- Keeps one message-v2 attachment per server permission ID and
recalculates the active permission from queue order.
- Conservatively merges duplicate or out-of-order permission updates so
known session/message/tool routing metadata is not lost.
- Fixes #290

## Why

The observed failure shape is that permission prompts can appear
missing, frozen, or attached in unexpected places when permission events
and tool-call parts are observed in different orders. In those cases,
the server-side permission may exist, but the UI can temporarily attach
it globally, attach it to the wrong tool location, or fail to move it
when the matching tool part arrives later.

This PR focuses on the UI-side attachment/order problem: one UI
attachment per server permission ID, re-linking permissions when tool
parts arrive, and preserving known routing metadata across
duplicate/out-of-order updates. It does not attempt semantic
deduplication across different permission IDs that happen to ask for the
same logical approval.

## Validation
- `git diff --check`
- `npm exec --no -- tsx --test packages/ui/src/types/permission.test.ts
packages/ui/src/stores/message-v2/instance-store.test.ts`
- `node --test packages/ui/src/stores/permission-replies.test.ts`
- `npm run typecheck --workspace @codenomad/ui`
---
 packages/ui/src/stores/instances.ts           | 48 ++++++++++++------
 packages/ui/src/stores/message-v2/bridge.ts   |  7 ++-
 .../stores/message-v2/instance-store.test.ts  | 37 ++++++++++++++
 .../src/stores/message-v2/instance-store.ts   | 33 +++++++++++--
 packages/ui/src/stores/session-events.ts      | 10 ++--
 packages/ui/src/types/permission.test.ts      | 49 +++++++++++++++++++
 packages/ui/src/types/permission.ts           | 49 +++++++++++++++++++
 7 files changed, 209 insertions(+), 24 deletions(-)
 create mode 100644 packages/ui/src/stores/message-v2/instance-store.test.ts
 create mode 100644 packages/ui/src/types/permission.test.ts

diff --git a/packages/ui/src/stores/instances.ts b/packages/ui/src/stores/instances.ts
index 168a9a1c..110c39f5 100644
--- a/packages/ui/src/stores/instances.ts
+++ b/packages/ui/src/stores/instances.ts
@@ -2,7 +2,7 @@ import { createSignal } from "solid-js"
 import type { Instance, LogEntry } from "../types/instance"
 import type { LspStatus } from "@opencode-ai/sdk/v2"
 import type { PermissionReply, PermissionRequestLike } from "../types/permission"
-import { getPermissionCreatedAt, getPermissionSessionId } from "../types/permission"
+import { getPermissionCreatedAt, getPermissionSessionId, mergePermissionRequest } from "../types/permission"
 import type { QuestionRequest } from "@opencode-ai/sdk/v2"
 import { getQuestionSessionId } from "../types/question"
 import { requestData } from "../lib/opencode-api"
@@ -217,8 +217,8 @@ async function syncPendingPermissions(instanceId: string): Promise<void> {
 
     // Upsert all server-side pending permissions.
     for (const permission of pendingRemote) {
-      addPermissionToQueue(instanceId, permission)
-      upsertPermissionV2(instanceId, permission)
+      const queuedPermission = addPermissionToQueue(instanceId, permission) ?? permission
+      upsertPermissionV2(instanceId, queuedPermission)
     }
     drainAutoAcceptPermissions(instanceId, getPermissionQueue(instanceId), sendPermissionResponse, hasPendingPermission)
   } catch (error) {
@@ -777,46 +777,64 @@ function clearQuestionSessionPendingCounts(instanceId: string): void {
   questionSessionCounts.delete(instanceId)
 }
 
-function addPermissionToQueue(instanceId: string, permission: PermissionRequestLike): void {
+function addPermissionToQueue(instanceId: string, permission: PermissionRequestLike): PermissionRequestLike | undefined {
   let inserted = false
+  let updated = false
+  let previousPermission: PermissionRequestLike | undefined
+  let queuedPermission = permission
 
   setPermissionQueues((prev) => {
     const next = new Map(prev)
     const queue = next.get(instanceId) ?? []
-
-    if (queue.some((p) => p.id === permission.id)) {
+    const existingIndex = queue.findIndex((p) => p.id === permission.id)
+
+    if (existingIndex !== -1) {
+      previousPermission = queue[existingIndex]
+      queuedPermission = mergePermissionRequest(previousPermission, permission)
+      const updatedQueue = queue.slice()
+      updatedQueue[existingIndex] = queuedPermission
+      next.set(instanceId, updatedQueue.sort((a, b) => getPermissionCreatedAt(a) - getPermissionCreatedAt(b)))
+      updated = true
       return next
     }
 
-    const updatedQueue = [...queue, permission].sort((a, b) => getPermissionCreatedAt(a) - getPermissionCreatedAt(b))
+    const updatedQueue = [...queue, queuedPermission].sort((a, b) => getPermissionCreatedAt(a) - getPermissionCreatedAt(b))
     next.set(instanceId, updatedQueue)
     inserted = true
     return next
   })
 
-  if (!inserted) {
-    return
+  if (!inserted && !updated) {
+    return undefined
   }
 
   recomputeActiveInterruption(instanceId)
 
-  const sessionId = getPermissionSessionId(permission)
+  const previousSessionId = previousPermission ? getPermissionSessionId(previousPermission) : undefined
+  const sessionId = getPermissionSessionId(queuedPermission)
+  if (previousSessionId && previousSessionId !== sessionId) {
+    const remaining = decrementSessionPendingCount(instanceId, previousSessionId)
+    setSessionPendingPermission(instanceId, previousSessionId, remaining > 0)
+  }
+
   if (sessionId) {
-    incrementSessionPendingCount(instanceId, sessionId)
+    if (inserted || previousSessionId !== sessionId) {
+      incrementSessionPendingCount(instanceId, sessionId)
+    }
     setSessionPendingPermission(instanceId, sessionId, true)
 
-    // Record the worktree slug at the time the permission is enqueued.
-    // This is used to respond in the same worktree context even from the global permission center.
+    // Refresh this when duplicate permission events carry better session/worktree hydration.
     const slug = getWorktreeSlugForSession(instanceId, sessionId)
     let byPermissionId = permissionWorktreeSlugByInstance.get(instanceId)
     if (!byPermissionId) {
       byPermissionId = new Map()
       permissionWorktreeSlugByInstance.set(instanceId, byPermissionId)
     }
-    byPermissionId.set(permission.id, slug)
+    byPermissionId.set(queuedPermission.id, slug)
   }
 
-  drainAutoAcceptPermissions(instanceId, [permission], sendPermissionResponse, hasPendingPermission)
+  drainAutoAcceptPermissions(instanceId, [queuedPermission], sendPermissionResponse, hasPendingPermission)
+  return queuedPermission
 }
 
 function removePermissionFromQueue(instanceId: string, permissionId: string): void {
diff --git a/packages/ui/src/stores/message-v2/bridge.ts b/packages/ui/src/stores/message-v2/bridge.ts
index 7b1b35be..ef62f3d7 100644
--- a/packages/ui/src/stores/message-v2/bridge.ts
+++ b/packages/ui/src/stores/message-v2/bridge.ts
@@ -189,7 +189,7 @@ export function reconcilePendingPermissionsV2(instanceId: string, sessionId?: st
   if (!pending || pending.length === 0) return
 
   for (const entry of pending) {
-    if (!entry || entry.partId) continue
+    if (!entry) continue
     const permission = entry.permission
     if (!permission) continue
 
@@ -201,6 +201,11 @@ export function reconcilePendingPermissionsV2(instanceId: string, sessionId?: st
     const messageId = entry.messageId ?? extractPermissionMessageId(permission)
     const callId = extractPermissionCallId(permission)
     const resolvedPartId = resolvePartIdFromCallId(store, messageId, callId)
+    if (entry.partId && messageId && store.getPermissionState(messageId, entry.partId)) {
+      if (!resolvedPartId || resolvedPartId === entry.partId) {
+        continue
+      }
+    }
     if (!resolvedPartId) continue
 
     store.upsertPermission({
diff --git a/packages/ui/src/stores/message-v2/instance-store.test.ts b/packages/ui/src/stores/message-v2/instance-store.test.ts
new file mode 100644
index 00000000..ee9f36e0
--- /dev/null
+++ b/packages/ui/src/stores/message-v2/instance-store.test.ts
@@ -0,0 +1,37 @@
+import assert from "node:assert/strict"
+import { describe, it } from "node:test"
+
+import { createInstanceMessageStore } from "./instance-store.ts"
+
+describe("message-v2 permission state", () => {
+  it("keeps one permission attachment when a duplicate moves from global to a tool part", () => {
+    const store = createInstanceMessageStore("instance-1")
+
+    store.upsertPermission({
+      permission: { id: "permission-1", callID: "call-1", time: { created: 1_000 } },
+      enqueuedAt: 1_000,
+    })
+    store.upsertPermission({
+      permission: { id: "permission-1", tool: { callID: "call-1", messageID: "message-1" } },
+      messageId: "message-1",
+      partId: "part-1",
+      enqueuedAt: 2_000,
+    })
+
+    assert.equal(store.state.permissions.queue.length, 1)
+    assert.equal(store.getPermissionState(undefined, "permission-1"), null)
+    assert.equal(store.getPermissionState("message-1", "part-1")?.entry.permission.callID, "call-1")
+    assert.equal(store.getPermissionState("message-1", "part-1")?.active, true)
+  })
+
+  it("recalculates the active permission after removing the first queue entry", () => {
+    const store = createInstanceMessageStore("instance-1")
+
+    store.upsertPermission({ permission: { id: "permission-1" }, enqueuedAt: 1_000 })
+    store.upsertPermission({ permission: { id: "permission-2" }, enqueuedAt: 2_000 })
+    store.removePermission("permission-1")
+
+    assert.equal(store.state.permissions.active?.permission.id, "permission-2")
+    assert.equal(store.getPermissionState(undefined, "permission-2")?.active, true)
+  })
+})
diff --git a/packages/ui/src/stores/message-v2/instance-store.ts b/packages/ui/src/stores/message-v2/instance-store.ts
index ae2a3b3c..3373a4cd 100644
--- a/packages/ui/src/stores/message-v2/instance-store.ts
+++ b/packages/ui/src/stores/message-v2/instance-store.ts
@@ -3,6 +3,8 @@ import { createStore, produce, reconcile } from "solid-js/store"
 import type { SetStoreFunction } from "solid-js/store"
 import { getLogger } from "../../lib/logger"
 import type { ClientPart, MessageInfo } from "../../types/message"
+import type { PermissionRequestLike } from "../../types/permission"
+import { mergePermissionRequest } from "../../types/permission"
 import { clearRecordDisplayCacheForMessages } from "./record-display-cache"
 import type {
   InstanceMessageState,
@@ -904,13 +906,37 @@ export function createInstanceMessageStore(instanceId: string, hooks?: MessageSt
     return messageInfoCache.get(messageId)
   }
 
-  function upsertPermission(entry: PermissionEntry) {
+  function mergePermissionEntry(entry: PermissionEntry): PermissionEntry {
+    const existing = state.permissions.queue.find((item) => item.permission.id === entry.permission.id)
+    if (!existing) return entry
+    return {
+      ...entry,
+      permission: mergePermissionRequest(existing.permission, entry.permission),
+      messageId: entry.messageId ?? existing.messageId,
+      partId: entry.partId ?? existing.partId,
+      enqueuedAt: Math.min(existing.enqueuedAt, entry.enqueuedAt),
+    }
+  }
+
+  function upsertPermission(input: PermissionEntry) {
+    const entry = mergePermissionEntry(input)
     const messageKey = entry.messageId ?? "__global__"
     const partKey = entry.partId ?? entry.permission?.id ?? "__global__"
 
     setState(
       "permissions",
       produce((draft) => {
+        Object.keys(draft.byMessage).forEach((existingMessageKey) => {
+          const partEntries = draft.byMessage[existingMessageKey]
+          Object.keys(partEntries).forEach((existingPartKey) => {
+            if (partEntries[existingPartKey].permission.id === entry.permission.id) {
+              delete partEntries[existingPartKey]
+            }
+          })
+          if (Object.keys(partEntries).length === 0) {
+            delete draft.byMessage[existingMessageKey]
+          }
+        })
         draft.byMessage[messageKey] = draft.byMessage[messageKey] ?? {}
         draft.byMessage[messageKey][partKey] = entry
         const existingIndex = draft.queue.findIndex((item) => item.permission.id === entry.permission.id)
@@ -919,9 +945,8 @@ export function createInstanceMessageStore(instanceId: string, hooks?: MessageSt
         } else {
           draft.queue[existingIndex] = entry
         }
-        if (!draft.active || draft.active.permission.id === entry.permission.id) {
-          draft.active = entry
-        }
+        draft.queue.sort((left, right) => left.enqueuedAt - right.enqueuedAt)
+        draft.active = draft.queue[0] ?? null
       }),
     )
   }
diff --git a/packages/ui/src/stores/session-events.ts b/packages/ui/src/stores/session-events.ts
index 5f3a480d..fcb253bf 100644
--- a/packages/ui/src/stores/session-events.ts
+++ b/packages/ui/src/stores/session-events.ts
@@ -61,6 +61,7 @@ import {
   applyPartUpdateV2,
   applyPartDeltaV2,
   replaceMessageIdV2,
+  reconcilePendingPermissionsV2,
   reconcilePendingQuestionsV2,
   upsertMessageInfoV2,
   upsertPermissionV2,
@@ -372,8 +373,9 @@ function handleMessageUpdate(instanceId: string, event: MessageUpdateEvent | Mes
     applyPartUpdateV2(instanceId, { ...part, sessionID: sessionId, messageID: messageId })
     handleConversationAssistantPartUpdated(instanceId, { ...part, sessionID: sessionId, messageID: messageId }, messageInfo)
 
-    if (part.type === "tool" && part.tool === "question") {
-      // Questions can arrive before their tool part exists; re-link now.
+    if (part.type === "tool") {
+      // Interruptions can arrive before their tool part exists; re-link now.
+      reconcilePendingPermissionsV2(instanceId, sessionId)
       reconcilePendingQuestionsV2(instanceId, sessionId)
     }
 
@@ -698,8 +700,8 @@ function handlePermissionUpdated(instanceId: string, event: { type: string; prop
   }
 
   log.info(`[SSE] Permission request: ${permissionId} (${getPermissionKind(permission)})`)
-  addPermissionToQueue(instanceId, permission)
-  upsertPermissionV2(instanceId, permission)
+  const queuedPermission = addPermissionToQueue(instanceId, permission) ?? permission
+  upsertPermissionV2(instanceId, queuedPermission)
 
   const sessionId = getPermissionSessionId(permission)
 
diff --git a/packages/ui/src/types/permission.test.ts b/packages/ui/src/types/permission.test.ts
new file mode 100644
index 00000000..e8215125
--- /dev/null
+++ b/packages/ui/src/types/permission.test.ts
@@ -0,0 +1,49 @@
+import assert from "node:assert/strict"
+import { describe, it } from "node:test"
+
+import { mergePermissionRequest, type PermissionRequestLike } from "./permission.ts"
+
+describe("mergePermissionRequest", () => {
+  it("preserves known routing metadata when duplicate payloads are sparse", () => {
+    const previous: PermissionRequestLike = {
+      id: "permission-1",
+      sessionID: "session-1",
+      messageID: "message-1",
+      callID: "call-1",
+      metadata: {
+        callID: "metadata-call-1",
+        messageID: "metadata-message-1",
+      },
+      tool: {
+        callID: "tool-call-1",
+        messageID: "tool-message-1",
+      },
+      time: { created: 1_000 },
+    }
+
+    const next: PermissionRequestLike = {
+      id: "permission-1",
+      sessionID: undefined,
+      messageID: undefined,
+      callID: undefined,
+      metadata: {
+        callID: undefined,
+      },
+      tool: {
+        callID: undefined,
+      },
+      time: { created: undefined },
+    } as PermissionRequestLike
+
+    const merged = mergePermissionRequest(previous, next)
+
+    assert.equal(merged.sessionID, "session-1")
+    assert.equal(merged.messageID, "message-1")
+    assert.equal(merged.callID, "call-1")
+    assert.equal(merged.metadata?.callID, "metadata-call-1")
+    assert.equal(merged.metadata?.messageID, "metadata-message-1")
+    assert.equal(merged.tool?.callID, "tool-call-1")
+    assert.equal(merged.tool?.messageID, "tool-message-1")
+    assert.equal(merged.time?.created, 1_000)
+  })
+})
diff --git a/packages/ui/src/types/permission.ts b/packages/ui/src/types/permission.ts
index 84f4cda7..5d873460 100644
--- a/packages/ui/src/types/permission.ts
+++ b/packages/ui/src/types/permission.ts
@@ -17,10 +17,15 @@ export interface PermissionRequestLike {
   pattern?: string
   title?: string
   sessionID?: string
+  sessionId?: string
   messageID?: string
   messageId?: string
   callID?: string
   callId?: string
+  partID?: string
+  partId?: string
+  toolCallID?: string
+  toolCallId?: string
   metadata?: Record<string, unknown>
   time?: { created?: number }
 
@@ -42,6 +47,50 @@ export interface PermissionReplyEventPropertiesLike {
   reply?: PermissionReply
 }
 
+// Permission payloads can come from legacy/new SDK shapes. Preserve known
+// top-level routing aliases when an out-of-order duplicate omits them.
+const TOP_LEVEL_ROUTING_ALIAS_KEYS = [
+  "sessionID",
+  "sessionId",
+  "messageID",
+  "messageId",
+  "callID",
+  "callId",
+  "partID",
+  "partId",
+  "toolCallID",
+  "toolCallId",
+] as const satisfies ReadonlyArray<keyof PermissionRequestLike>
+
+function mergeRecordPreservingKnown<T extends Record<string, unknown>>(previous: T | undefined, next: T | undefined): T | undefined {
+  if (!previous) return next
+  if (!next) return previous
+  const merged: Record<string, unknown> = { ...previous, ...next }
+  for (const key of Object.keys(previous)) {
+    if (next[key] == null && previous[key] != null) {
+      merged[key] = previous[key]
+    }
+  }
+  return merged as T
+}
+
+export function mergePermissionRequest(previous: PermissionRequestLike | undefined, next: PermissionRequestLike): PermissionRequestLike {
+  if (!previous) return next
+  const merged = {
+    ...previous,
+    ...next,
+    metadata: mergeRecordPreservingKnown(previous.metadata, next.metadata),
+    time: mergeRecordPreservingKnown(previous.time as Record<string, unknown> | undefined, next.time as Record<string, unknown> | undefined) as PermissionRequestLike["time"],
+    tool: mergeRecordPreservingKnown(previous.tool as Record<string, unknown> | undefined, next.tool as Record<string, unknown> | undefined) as PermissionRequestLike["tool"],
+  }
+  for (const key of TOP_LEVEL_ROUTING_ALIAS_KEYS) {
+    if ((next as any)[key] == null && (previous as any)[key] != null) {
+      ;(merged as any)[key] = (previous as any)[key]
+    }
+  }
+  return merged
+}
+
 export function getPermissionId(permission: PermissionRequestLike | null | undefined): string {
   return permission?.id ?? ""
 }

From 9543292b83ef1cf05e0e9a43fcb23b60d8da07cd Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Sun, 10 May 2026 18:20:11 +0100
Subject: [PATCH 27/39] fix(desktop): keep remote window server titles (#429)

## Summary
- Lock Electron remote BrowserWindow titles to the generated
saved-server title.
- Lock Tauri remote webview document titles through the remote
initialization script so native window titles remain distinguishable.
- Preserve the existing title format that includes the saved server name
and host.

Closes #427

## Validation
- npm run typecheck --workspace @neuralnomads/codenomad-electron-app
- cargo check (packages/tauri-app/src-tauri)
---
 packages/electron-app/electron/main/main.ts | 16 ++--
 packages/tauri-app/src-tauri/src/main.rs    | 96 ++++++++++++++-------
 2 files changed, 76 insertions(+), 36 deletions(-)

diff --git a/packages/electron-app/electron/main/main.ts b/packages/electron-app/electron/main/main.ts
index 4b31cc9a..c4e01e29 100644
--- a/packages/electron-app/electron/main/main.ts
+++ b/packages/electron-app/electron/main/main.ts
@@ -474,12 +474,15 @@ function finalizeCliSwap(url: string) {
 }
 
 function buildRemoteWindowTitle(name: string, baseUrl: string) {
-  try {
-    const parsed = new URL(baseUrl)
-    return `${name} - ${parsed.host}`
-  } catch {
-    return `${name} - ${baseUrl}`
-  }
+  return `${name} - ${baseUrl}`
+}
+
+function lockWindowTitle(window: BrowserWindow, title: string) {
+  window.setTitle(title)
+  window.webContents.on("page-title-updated", (event) => {
+    event.preventDefault()
+    window.setTitle(title)
+  })
 }
 
 function buildRemoteErrorHtml(name: string, baseUrl: string, message: string) {
@@ -508,6 +511,7 @@ async function openRemoteWindow(payload: { id: string; name: string; baseUrl: st
       additionalArguments: ["--codenomad-window-context=remote"],
     },
   })
+  lockWindowTitle(window, title)
 
   setWindowAllowedOrigin(window, targetUrl.toString())
   if (payload.skipTlsVerify) {
diff --git a/packages/tauri-app/src-tauri/src/main.rs b/packages/tauri-app/src-tauri/src/main.rs
index fd05dbb8..43fccc43 100644
--- a/packages/tauri-app/src-tauri/src/main.rs
+++ b/packages/tauri-app/src-tauri/src/main.rs
@@ -3,9 +3,9 @@
 #[allow(dead_code)]
 mod cert_manager;
 mod cli_manager;
-mod managed_node;
 #[cfg(target_os = "linux")]
 mod linux_tls;
+mod managed_node;
 
 use cli_manager::{CliProcessManager, CliStatus};
 use keepawake::KeepAwake;
@@ -17,7 +17,7 @@ use std::sync::Mutex;
 use std::time::{SystemTime, UNIX_EPOCH};
 use tauri::menu::{MenuBuilder, MenuItem, SubmenuBuilder};
 use tauri::plugin::{Builder as PluginBuilder, TauriPlugin};
-use tauri::webview::Webview;
+use tauri::webview::{PageLoadEvent, Webview};
 use tauri::{
     AppHandle, Emitter, Manager, Runtime, WebviewUrl, WebviewWindowBuilder, WindowEvent, Wry,
 };
@@ -55,6 +55,7 @@ pub struct AppState {
     pub remote_proxy_sessions: Mutex<HashMap<String, String>>,
     pub remote_skip_tls_verify: Mutex<HashMap<String, bool>>,
     pub remote_tls_handlers: Mutex<HashSet<String>>,
+    pub remote_titles: Mutex<HashMap<String, String>>,
 }
 
 #[derive(Debug, Deserialize)]
@@ -227,26 +228,38 @@ fn intercept_navigation<R: Runtime>(webview: &Webview<R>, url: &Url) -> bool {
     false
 }
 
+fn apply_remote_window_title(app_handle: &AppHandle, window_label: &str) {
+    let Some(title) = app_handle
+        .state::<AppState>()
+        .remote_titles
+        .lock()
+        .ok()
+        .and_then(|titles| titles.get(window_label).cloned())
+    else {
+        return;
+    };
+
+    if let Some(window) = app_handle.get_webview_window(window_label) {
+        let _ = window.set_title(&title);
+    }
+}
+
 async fn open_remote_window_impl(
     app: AppHandle,
     payload: RemoteWindowPayload,
 ) -> Result<(), String> {
-    let entry_url = payload.entry_url.as_deref().unwrap_or(payload.base_url.as_str());
+    let entry_url = payload
+        .entry_url
+        .as_deref()
+        .unwrap_or(payload.base_url.as_str());
     let parsed = Url::parse(entry_url).map_err(|err| err.to_string())?;
     let label = format!("remote-{}", payload.id);
-    let title = format!(
-        "{} - {}",
-        payload.name,
-        Url::parse(&payload.base_url)
-            .ok()
-            .and_then(|url| url.host_str().map(str::to_string))
-            .unwrap_or_else(|| payload.base_url.clone())
-    );
+    let title = format!("{} - {}", payload.name, payload.base_url);
 
     let window_url = parsed.clone();
 
-    let allow_linux_tls_certificate =
-        parsed.scheme() == "https" && (payload.proxy_session_id.is_some() || payload.skip_tls_verify);
+    let allow_linux_tls_certificate = parsed.scheme() == "https"
+        && (payload.proxy_session_id.is_some() || payload.skip_tls_verify);
 
     app.state::<AppState>()
         .remote_origins
@@ -258,6 +271,11 @@ async fn open_remote_window_impl(
         .lock()
         .map_err(|err| err.to_string())?
         .insert(label.clone(), allow_linux_tls_certificate);
+    app.state::<AppState>()
+        .remote_titles
+        .lock()
+        .map_err(|err| err.to_string())?
+        .insert(label.clone(), title.clone());
 
     let replaced_session = {
         let state = app.state::<AppState>();
@@ -281,8 +299,9 @@ async fn open_remote_window_impl(
         #[cfg(target_os = "linux")]
         linux_tls::ensure_remote_window_tls_handler(&existing, &app, &label)?;
 
-        let _ = existing.navigate(window_url.clone());
         let _ = existing.set_title(&title);
+        let _ = existing.navigate(window_url.clone());
+        apply_remote_window_title(&app, &label);
         let _ = existing.show();
         let _ = existing.unminimize();
         let _ = existing.set_focus();
@@ -290,25 +309,27 @@ async fn open_remote_window_impl(
     }
 
     #[cfg(target_os = "linux")]
-    let initial_url = if linux_tls::should_bootstrap_tls_navigation(
-        &window_url,
-        allow_linux_tls_certificate,
-    ) {
-        Url::parse("about:blank").map_err(|err| err.to_string())?
-    } else {
-        window_url.clone()
-    };
+    let initial_url =
+        if linux_tls::should_bootstrap_tls_navigation(&window_url, allow_linux_tls_certificate) {
+            Url::parse("about:blank").map_err(|err| err.to_string())?
+        } else {
+            window_url.clone()
+        };
 
     #[cfg(not(target_os = "linux"))]
     let initial_url = window_url.clone();
 
-    let window = WebviewWindowBuilder::new(&app, label.clone(), WebviewUrl::External(initial_url.clone()))
-        .initialization_script(REMOTE_WINDOW_CONTEXT_SCRIPT)
-        .title(title)
-        .inner_size(1400.0, 900.0)
-        .min_inner_size(800.0, 600.0)
-        .build()
-        .map_err(|err| err.to_string())?;
+    let window = WebviewWindowBuilder::new(
+        &app,
+        label.clone(),
+        WebviewUrl::External(initial_url.clone()),
+    )
+    .initialization_script(REMOTE_WINDOW_CONTEXT_SCRIPT)
+    .title(title)
+    .inner_size(1400.0, 900.0)
+    .min_inner_size(800.0, 600.0)
+    .build()
+    .map_err(|err| err.to_string())?;
 
     #[cfg(target_os = "linux")]
     {
@@ -336,6 +357,9 @@ async fn open_remote_window_impl(
             if let Ok(mut handlers) = app_handle.state::<AppState>().remote_tls_handlers.lock() {
                 handlers.remove(&label_for_cleanup);
             }
+            if let Ok(mut titles) = app_handle.state::<AppState>().remote_titles.lock() {
+                titles.remove(&label_for_cleanup);
+            }
         }
     });
 
@@ -364,7 +388,10 @@ fn needs_local_certificate_install() -> Result<bool, String> {
 async fn open_remote_window(app: AppHandle, payload: RemoteWindowPayload) -> Result<(), String> {
     #[cfg(not(target_os = "linux"))]
     {
-        let entry_url = payload.entry_url.as_deref().unwrap_or(payload.base_url.as_str());
+        let entry_url = payload
+            .entry_url
+            .as_deref()
+            .unwrap_or(payload.base_url.as_str());
         let parsed = Url::parse(entry_url).map_err(|err| err.to_string())?;
         if payload.proxy_session_id.is_some() && parsed.scheme() == "https" {
             let local_cert = cert_manager::ensure_local_cert().map_err(|err| {
@@ -542,6 +569,15 @@ fn main() {
             remote_proxy_sessions: Mutex::new(HashMap::new()),
             remote_skip_tls_verify: Mutex::new(HashMap::new()),
             remote_tls_handlers: Mutex::new(HashSet::new()),
+            remote_titles: Mutex::new(HashMap::new()),
+        })
+        .on_page_load(|webview, payload| {
+            if matches!(
+                payload.event(),
+                PageLoadEvent::Started | PageLoadEvent::Finished
+            ) {
+                apply_remote_window_title(&webview.app_handle(), webview.label());
+            }
         })
         .setup(|app| {
             set_windows_app_user_model_id();

From 562c6325c77ef6eb532c6a50e96a0e70759e43dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Sun, 10 May 2026 19:27:05 +0200
Subject: [PATCH 28/39] fix(ui): follow up idle badge behavior (#423)

## Summary
- Follow-up to #395 after the idle badge persistence behavior regressed
around `keepUnseenSubagentIdleStatus`.
- Restores `keepUnseenSubagentIdleStatus` handling across session,
active-session, and instance-tab badge helpers.
- Starts a 5s fade when a viewed idle session/thread is seen, then
clears each exact idle transition after the animation even if focus
moves away.
- Keeps unseen subagent idle badges visible when the preference is
enabled, and keeps aggregate instance badges solid when any other
visible idle contributor is still unseen.

## Validation
- `git diff --check`
- `npm run typecheck --workspace @codenomad/ui`
- `npm run build --workspace @codenomad/ui`
- Gatekeeper re-review: no blocking findings remain for the prior
preference/race findings.

## Notes
- `node --test packages/ui/src/stores/session-status.test.ts` was
attempted, but the repo's extensionless TypeScript imports are not
directly resolvable by Node's test runner.
---
 packages/ui/src/components/instance-tab.tsx   | 22 +++++-
 .../components/instance/instance-shell2.tsx   | 16 +++-
 packages/ui/src/components/session-list.tsx   | 20 ++++-
 .../src/components/session/session-view.tsx   | 46 ++++++-----
 packages/ui/src/stores/session-status.test.ts | 78 +++++++++++++++++--
 packages/ui/src/stores/session-status.ts      | 73 ++++++++++++++++-
 .../ui/src/styles/panels/session-layout.css   | 14 ++++
 7 files changed, 231 insertions(+), 38 deletions(-)

diff --git a/packages/ui/src/components/instance-tab.tsx b/packages/ui/src/components/instance-tab.tsx
index d9681e67..7a8948fd 100644
--- a/packages/ui/src/components/instance-tab.tsx
+++ b/packages/ui/src/components/instance-tab.tsx
@@ -1,8 +1,9 @@
-import { Component, Show, createMemo } from "solid-js"
+import { Component, Show, createMemo, createSignal, onCleanup } from "solid-js"
 import type { Instance } from "../types/instance"
-import { getInstanceSessionIndicatorStatus } from "../stores/session-status"
+import { getInstanceIdleFadeClass, getInstanceSessionIndicatorStatus } from "../stores/session-status"
 import { FolderOpen, ShieldAlert, X } from "lucide-solid"
 import { useI18n } from "../lib/i18n"
+import { useConfig } from "../stores/preferences"
 
 interface InstanceTabProps {
   instance: Instance
@@ -20,12 +21,25 @@ function getPathBasename(path: string): string {
 
 const InstanceTab: Component<InstanceTabProps> = (props) => {
   const { t } = useI18n()
+  const { preferences } = useConfig()
+  const [now, setNow] = createSignal(Date.now())
 
-  const aggregatedStatus = createMemo(() => getInstanceSessionIndicatorStatus(props.instance.id))
+  if (typeof window !== "undefined") {
+    const timer = window.setInterval(() => setNow(Date.now()), 1000)
+    onCleanup(() => window.clearInterval(timer))
+  }
+
+  const aggregatedStatus = createMemo(() =>
+    getInstanceSessionIndicatorStatus(props.instance.id, now(), preferences().keepUnseenSubagentIdleStatus),
+  )
   const statusClassName = createMemo(() => {
     const status = aggregatedStatus()
     if (!status) return null
-    return status === "permission" ? "session-permission" : `session-${status}`
+    if (status === "permission") return "session-permission"
+    const base = `session-${status}`
+    const fadeClass =
+      status === "idle" ? getInstanceIdleFadeClass(props.instance.id, now(), preferences().keepUnseenSubagentIdleStatus) : ""
+    return fadeClass ? `${base} ${fadeClass}` : base
   })
   const statusTitle = createMemo(() => {
     switch (aggregatedStatus()) {
diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 1f857591..74b1dc81 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -41,9 +41,10 @@ import SessionSidebar from "./shell/SessionSidebar"
 import { useSessionSidebarRequests } from "./shell/useSessionSidebarRequests"
 import RightPanel from "./shell/right-panel/RightPanel"
 import { useDrawerChrome } from "./shell/useDrawerChrome"
-import { getRetrySeconds, getSessionRetry, getSessionStatus, shouldShowSessionStatus } from "../../stores/session-status"
+import { getRetrySeconds, getSessionIdleFadeClass, getSessionRetry, getSessionStatus, shouldShowSessionStatus } from "../../stores/session-status"
 import { Maximize2, Search, ShieldAlert } from "lucide-solid"
 import type { PromptInputApi } from "../prompt-input/types"
+import { useConfig } from "../../stores/preferences"
 
 import type { LayoutMode } from "./shell/types"
 import {
@@ -85,6 +86,7 @@ interface InstanceShellProps {
 
 const InstanceShell2: Component<InstanceShellProps> = (props) => {
   const { t, locale } = useI18n()
+  const { preferences } = useConfig()
   const isRTL = () => locale() === "he"
 
   const [sessionSidebarWidth, setSessionSidebarWidth] = createSignal(DEFAULT_SESSION_SIDEBAR_WIDTH)
@@ -303,7 +305,12 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
 
     const status = getSessionStatus(props.instance.id, activeSessionId)
     const retry = getSessionRetry(props.instance.id, activeSessionId)
-    const showStatus = shouldShowSessionStatus(props.instance.id, activeSessionId)
+    const showStatus = shouldShowSessionStatus(
+      props.instance.id,
+      activeSessionId,
+      now(),
+      preferences().keepUnseenSubagentIdleStatus,
+    )
     if (!showStatus) {
       return null
     }
@@ -318,8 +325,11 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
           ? t("sessionList.status.compacting")
           : t("sessionList.status.idle")
 
+    const baseClassName = `session-${retry ? "retrying" : status}`
+    const fadeClassName = getSessionIdleFadeClass(props.instance.id, activeSessionId)
+
     return {
-      className: `session-${retry ? "retrying" : status}`,
+      className: fadeClassName ? `${baseClassName} ${fadeClassName}` : baseClassName,
       text,
       showAlertIcon: false,
       title: retry
diff --git a/packages/ui/src/components/session-list.tsx b/packages/ui/src/components/session-list.tsx
index 5a53d4b0..c113a9dd 100644
--- a/packages/ui/src/components/session-list.tsx
+++ b/packages/ui/src/components/session-list.tsx
@@ -1,7 +1,7 @@
 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 { getRetrySeconds, getSessionRetry, getSessionStatus, shouldShowSessionStatus } from "../stores/session-status"
+import { getRetrySeconds, getSessionIdleFadeClass, getSessionRetry, getSessionStatus, shouldShowSessionStatus } from "../stores/session-status"
 import { Bot, User, Copy, Trash2, Pencil, ShieldAlert, ChevronDown, Search, Square, CheckSquare, MinusSquare, Split, RotateCw } from "lucide-solid"
 import KeyboardHint from "./keyboard-hint"
 import SessionRenameDialog from "./session-rename-dialog"
@@ -24,6 +24,7 @@ import {
 import { getGitRepoStatus, getWorktreeSlugForParentSession } from "../stores/worktrees"
 import { getLogger } from "../lib/logger"
 import { copyToClipboard } from "../lib/clipboard"
+import { useConfig } from "../stores/preferences"
 const log = getLogger("session")
 
 
@@ -47,6 +48,7 @@ function formatSessionStatus(status: SessionStatus): string {
 
 const SessionList: Component<SessionListProps> = (props) => {
   const { t } = useI18n()
+  const { preferences } = useConfig()
   const [renameTarget, setRenameTarget] = createSignal<{ id: string; title: string; label: string } | null>(null)
   const [isRenaming, setIsRenaming] = createSignal(false)
 
@@ -426,8 +428,20 @@ const SessionList: Component<SessionListProps> = (props) => {
     const needsPermission = () => Boolean(session()?.pendingPermission)
     const needsQuestion = () => Boolean((session() as any)?.pendingQuestion)
     const needsInput = () => needsPermission() || needsQuestion()
-    const statusClassName = () => (needsInput() ? "session-permission" : `session-${retry() ? "retrying" : status()}`)
-    const showStatus = () => needsInput() || shouldShowSessionStatus(props.instanceId, rowProps.sessionId)
+    const statusClassName = () => {
+      if (needsInput()) return "session-permission"
+      const base = `session-${retry() ? "retrying" : status()}`
+      const fadeClass = getSessionIdleFadeClass(props.instanceId, rowProps.sessionId)
+      return fadeClass ? `${base} ${fadeClass}` : base
+    }
+    const showStatus = () =>
+      needsInput() ||
+      shouldShowSessionStatus(
+        props.instanceId,
+        rowProps.sessionId,
+        now(),
+        preferences().keepUnseenSubagentIdleStatus,
+      )
     const statusText = () =>
       needsPermission()
         ? t("sessionList.status.needsPermission")
diff --git a/packages/ui/src/components/session/session-view.tsx b/packages/ui/src/components/session/session-view.tsx
index 0ce385cd..1b70efb3 100644
--- a/packages/ui/src/components/session/session-view.tsx
+++ b/packages/ui/src/components/session/session-view.tsx
@@ -1,4 +1,4 @@
-import { Show, createMemo, createEffect, on, onCleanup, type Component } from "solid-js"
+import { Show, createMemo, createEffect, on, type Component } from "solid-js"
 import type { Session } from "../../types/session"
 import type { Attachment } from "../../types/attachment"
 import type { ClientPart } from "../../types/message"
@@ -8,8 +8,8 @@ import PromptInput from "../prompt-input"
 import PromptAttachmentsBar from "../prompt-input/PromptAttachmentsBar"
 import { getAttachments, removeAttachment } from "../../stores/attachments"
 import { instances } from "../../stores/instances"
-import { loadMessages, sendMessage, forkSession, renameSession, isSessionMessagesLoading, markViewedSessionIdleSeen, setActiveParentSession, setActiveSession, runShellCommand, abortSession } from "../../stores/sessions"
-import { IDLE_STATUS_VISIBILITY_MS, isSessionBusy as getSessionBusyStatus } from "../../stores/session-status"
+import { loadMessages, sendMessage, forkSession, renameSession, isSessionMessagesLoading, markSessionIdleSeen, setActiveParentSession, setActiveSession, runShellCommand, abortSession } from "../../stores/sessions"
+import { clearSessionIdleFade, IDLE_STATUS_VISIBILITY_MS, isSessionBusy as getSessionBusyStatus, markSessionIdleFadeStarted } from "../../stores/session-status"
 import { deleteMessage } from "../../stores/session-actions"
 import { showAlertDialog } from "../../stores/alerts"
 import { getLogger } from "../../lib/logger"
@@ -68,6 +68,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
 
   let scrollToBottomHandle: (() => void) | undefined
   let rootRef: HTMLDivElement | undefined
+  const pendingIdleSeenTimers = new Set<string>()
 
   function shouldScrollToBottomOnActivate() {
     const current = session()
@@ -83,11 +84,11 @@ export const SessionView: Component<SessionViewProps> = (props) => {
     })
   }
 
-  function getSeenIdleSignature(currentSession: Session, keepUnseenSubagentIdleStatus: boolean): string {
-    const ids: string[] = []
+  function getSeenIdleEntries(currentSession: Session, keepUnseenSubagentIdleStatus: boolean): Array<{ id: string; idleSince: number }> {
+    const entries: Array<{ id: string; idleSince: number }> = []
 
     if (currentSession.status === "idle" && typeof currentSession.idleSince === "number") {
-      ids.push(`${currentSession.id}:${currentSession.idleSince}`)
+      entries.push({ id: currentSession.id, idleSince: currentSession.idleSince })
     }
 
     if (currentSession.parentId === null && !keepUnseenSubagentIdleStatus) {
@@ -95,11 +96,11 @@ export const SessionView: Component<SessionViewProps> = (props) => {
         if (child.parentId !== currentSession.id) continue
         if (child.status !== "idle") continue
         if (typeof child.idleSince !== "number") continue
-        ids.push(`${child.id}:${child.idleSince}`)
+        entries.push({ id: child.id, idleSince: child.idleSince })
       }
     }
 
-    return ids.sort().join("|")
+    return entries
   }
 
   createEffect(
@@ -118,19 +119,22 @@ export const SessionView: Component<SessionViewProps> = (props) => {
     const currentSession = session()
     if (!props.isActive || !currentSession) return
 
-    const keepUnseenSubagentIdleStatus = preferences().keepUnseenSubagentIdleStatus
-    const seenIdleSignature = getSeenIdleSignature(currentSession, keepUnseenSubagentIdleStatus)
-    if (!seenIdleSignature) return
-
-    const timeout = window.setTimeout(() => {
-      const latestSession = session()
-      if (!props.isActive || !latestSession) return
-      const latestKeepUnseenSubagentIdleStatus = preferences().keepUnseenSubagentIdleStatus
-      if (getSeenIdleSignature(latestSession, latestKeepUnseenSubagentIdleStatus) !== seenIdleSignature) return
-      markViewedSessionIdleSeen(props.instanceId, latestSession.id, latestKeepUnseenSubagentIdleStatus)
-    }, IDLE_STATUS_VISIBILITY_MS)
-
-    onCleanup(() => window.clearTimeout(timeout))
+    const seenIdleEntries = getSeenIdleEntries(currentSession, preferences().keepUnseenSubagentIdleStatus)
+    for (const entry of seenIdleEntries) {
+      const timerKey = `${props.instanceId}:${entry.id}:${entry.idleSince}`
+      if (pendingIdleSeenTimers.has(timerKey)) continue
+      pendingIdleSeenTimers.add(timerKey)
+      markSessionIdleFadeStarted(props.instanceId, entry.id)
+
+      window.setTimeout(() => {
+        pendingIdleSeenTimers.delete(timerKey)
+        const latestEntry = props.activeSessions.get(entry.id)
+        if (latestEntry?.status === "idle" && latestEntry.idleSince === entry.idleSince) {
+          markSessionIdleSeen(props.instanceId, entry.id)
+        }
+        clearSessionIdleFade(props.instanceId, entry.id, entry.idleSince)
+      }, IDLE_STATUS_VISIBILITY_MS)
+    }
   })
 
   createEffect(
diff --git a/packages/ui/src/stores/session-status.test.ts b/packages/ui/src/stores/session-status.test.ts
index 29d7329b..aee67714 100644
--- a/packages/ui/src/stores/session-status.test.ts
+++ b/packages/ui/src/stores/session-status.test.ts
@@ -2,7 +2,8 @@ import assert from "node:assert/strict"
 import { describe, it } from "node:test"
 
 import { getIdleSinceForStatusTransition } from "../types/session.ts"
-import { IDLE_STATUS_VISIBILITY_MS, shouldShowIdleStatus } from "./session-status.ts"
+import { clearSessionIdleFade, getSessionIdleFadeClass, IDLE_STATUS_VISIBILITY_MS, markSessionIdleFadeStarted, shouldShowIdleStatus, shouldShowSessionStatus } from "./session-status.ts"
+import { setSessions } from "./session-state.ts"
 import { shouldSessionHoldWakeLock } from "./wake-lock-eligibility.ts"
 
 describe("shouldSessionHoldWakeLock", () => {
@@ -37,14 +38,15 @@ describe("idle status visibility", () => {
   it("keeps subagent idle visible until the parent or child session is seen", () => {
     const idleSince = getIdleSinceForStatusTransition("working", "idle", null, 1_000)
 
-    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: "parent" }), true)
-    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: "parent" }), true)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: "parent" }, 2_000, true), true)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: "parent" }, 10_000, true), true)
   })
 
-  it("does not use the keep-unseen setting to age out visible idle markers", () => {
+  it("ages out subagent idle markers unless keep-unseen is enabled", () => {
     const idleSince = getIdleSinceForStatusTransition("working", "idle", null, 1_000)
 
-    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: "parent" }), true)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: "parent" }, 2_000, false), true)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince, parentId: "parent" }, 7_000, false), false)
   })
 
   it("does not show idle for sessions that started idle", () => {
@@ -60,4 +62,70 @@ describe("idle status visibility", () => {
     assert.equal(idleSince, null)
     assert.equal(shouldShowIdleStatus({ status: "working", idleSince, parentId: null }), false)
   })
+
+  it("clears idle fade state for a specific idle transition", () => {
+    const instanceId = "instance"
+    const sessionId = "session"
+    const idleSince = 1_000
+
+    setSessions(
+      new Map([
+        [
+          instanceId,
+          new Map([
+            [
+              sessionId,
+              {
+                id: sessionId,
+                status: "idle",
+                idleSince,
+                parentId: null,
+              } as any,
+            ],
+          ]),
+        ],
+      ]),
+    )
+
+    markSessionIdleFadeStarted(instanceId, sessionId)
+    assert.equal(getSessionIdleFadeClass(instanceId, sessionId), "session-status-fading")
+
+    clearSessionIdleFade(instanceId, sessionId, idleSince)
+    assert.equal(getSessionIdleFadeClass(instanceId, sessionId), "")
+
+    setSessions(new Map())
+  })
+
+  it("keeps a default-mode subagent visible while its parent-triggered fade runs", () => {
+    const instanceId = "instance"
+    const sessionId = "subsession"
+    const idleSince = 1_000
+
+    setSessions(
+      new Map([
+        [
+          instanceId,
+          new Map([
+            [
+              sessionId,
+              {
+                id: sessionId,
+                status: "idle",
+                idleSince,
+                parentId: "parent",
+              } as any,
+            ],
+          ]),
+        ],
+      ]),
+    )
+
+    assert.equal(shouldShowSessionStatus(instanceId, sessionId, 7_000, false), false)
+
+    markSessionIdleFadeStarted(instanceId, sessionId)
+    assert.equal(shouldShowSessionStatus(instanceId, sessionId, 7_000, false), true)
+
+    clearSessionIdleFade(instanceId, sessionId, idleSince)
+    setSessions(new Map())
+  })
 })
diff --git a/packages/ui/src/stores/session-status.ts b/packages/ui/src/stores/session-status.ts
index 503b7fde..1566077f 100644
--- a/packages/ui/src/stores/session-status.ts
+++ b/packages/ui/src/stores/session-status.ts
@@ -1,9 +1,16 @@
 import type { Session, SessionRetryState, SessionStatus } from "../types/session"
 import { getInstanceSessionIndicatorStatusCached, sessions } from "./session-state"
 import { shouldSessionHoldWakeLock } from "./wake-lock-eligibility"
+import { createSignal } from "solid-js"
 
 export const IDLE_STATUS_VISIBILITY_MS = 5000
 
+const [idleFadeStarts, setIdleFadeStarts] = createSignal<Map<string, number>>(new Map())
+
+function idleFadeKey(instanceId: string, sessionId: string, idleSince: number): string {
+  return `${instanceId}:${sessionId}:${idleSince}`
+}
+
 function getSession(instanceId: string, sessionId: string): Session | null {
   const instanceSessions = sessions().get(instanceId)
   return instanceSessions?.get(sessionId) ?? null
@@ -37,8 +44,55 @@ export function getSessionRetry(instanceId: string, sessionId: string): SessionR
   return session?.retry ?? null
 }
 
+export function markSessionIdleFadeStarted(instanceId: string, sessionId: string): void {
+  const session = getSession(instanceId, sessionId)
+  if (!session || session.status !== "idle" || typeof session.idleSince !== "number") return
+  const key = idleFadeKey(instanceId, sessionId, session.idleSince)
+  setIdleFadeStarts((prev) => {
+    if (prev.has(key)) return prev
+    const next = new Map(prev)
+    next.set(key, Date.now())
+    return next
+  })
+}
+
+export function clearSessionIdleFade(instanceId: string, sessionId: string, idleSince: number): void {
+  const key = idleFadeKey(instanceId, sessionId, idleSince)
+  setIdleFadeStarts((prev) => {
+    if (!prev.has(key)) return prev
+    const next = new Map(prev)
+    next.delete(key)
+    return next
+  })
+}
+
+export function getSessionIdleFadeClass(instanceId: string, sessionId: string): string {
+  const session = getSession(instanceId, sessionId)
+  if (!session || session.status !== "idle" || typeof session.idleSince !== "number") return ""
+  const startedAt = idleFadeStarts().get(idleFadeKey(instanceId, sessionId, session.idleSince))
+  return typeof startedAt === "number" ? "session-status-fading" : ""
+}
+
+export function getInstanceIdleFadeClass(instanceId: string, now = Date.now(), keepUnseenSubagentIdleStatus = false): string {
+  const instanceSessions = sessions().get(instanceId)
+  if (!instanceSessions) return ""
+
+  let hasVisibleIdle = false
+  for (const session of instanceSessions.values()) {
+    if (!session.id) continue
+    const isFading = Boolean(getSessionIdleFadeClass(instanceId, session.id))
+    if (!isFading && !shouldShowIdleStatus(session, now, keepUnseenSubagentIdleStatus)) continue
+    hasVisibleIdle = true
+    if (!isFading) return ""
+  }
+
+  return hasVisibleIdle ? "session-status-fading" : ""
+}
+
 export function shouldShowIdleStatus(
   session: Pick<Session, "status" | "idleSince" | "parentId"> | null | undefined,
+  now = Date.now(),
+  keepUnseenSubagentIdleStatus = false,
 ): boolean {
   if (!session || session.status !== "idle") {
     return false
@@ -48,12 +102,18 @@ export function shouldShowIdleStatus(
     return false
   }
 
+  if (session.parentId && !keepUnseenSubagentIdleStatus) {
+    return now - session.idleSince < IDLE_STATUS_VISIBILITY_MS
+  }
+
   return true
 }
 
 export function shouldShowSessionStatus(
   instanceId: string,
   sessionId: string,
+  now = Date.now(),
+  keepUnseenSubagentIdleStatus = false,
 ): boolean {
   const session = getSession(instanceId, sessionId)
   if (!session) {
@@ -64,7 +124,11 @@ export function shouldShowSessionStatus(
     return true
   }
 
-  return session.status !== "idle" || shouldShowIdleStatus(session)
+  if (session.status === "idle" && getSessionIdleFadeClass(instanceId, sessionId)) {
+    return true
+  }
+
+  return session.status !== "idle" || shouldShowIdleStatus(session, now, keepUnseenSubagentIdleStatus)
 }
 
 export function getRetrySeconds(next: number, now = Date.now()): number {
@@ -75,6 +139,8 @@ export type InstanceSessionIndicatorStatus = "permission" | SessionStatus
 
 export function getInstanceSessionIndicatorStatus(
   instanceId: string,
+  now = Date.now(),
+  keepUnseenSubagentIdleStatus = false,
 ): InstanceSessionIndicatorStatus | null {
   const aggregated = getInstanceSessionIndicatorStatusCached(instanceId)
   if (aggregated !== "idle") {
@@ -87,7 +153,10 @@ export function getInstanceSessionIndicatorStatus(
   }
 
   for (const session of instanceSessions.values()) {
-    if (shouldShowIdleStatus(session)) {
+    if (session.id && getSessionIdleFadeClass(instanceId, session.id)) {
+      return "idle"
+    }
+    if (shouldShowIdleStatus(session, now, keepUnseenSubagentIdleStatus)) {
       return "idle"
     }
   }
diff --git a/packages/ui/src/styles/panels/session-layout.css b/packages/ui/src/styles/panels/session-layout.css
index 1ff0dc3f..9daa9388 100644
--- a/packages/ui/src/styles/panels/session-layout.css
+++ b/packages/ui/src/styles/panels/session-layout.css
@@ -442,6 +442,10 @@ session-sidebar-controls .selector-trigger-primary {
   --session-status-dot: var(--session-status-idle-fg);
 }
 
+.status-indicator.session-status.session-idle.session-status-fading {
+  animation: session-status-fade-out 5s ease-out forwards;
+}
+
 .status-indicator.session-status.session-permission {
   color: var(--session-status-permission-fg);
   --session-status-dot: var(--session-status-permission-fg);
@@ -490,6 +494,16 @@ session-sidebar-controls .selector-trigger-primary {
   border: 1px solid transparent;
 }
 
+@keyframes session-status-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 .status-indicator.session-yolo-mode {
   color: var(--accent-primary);
   background-color: color-mix(in oklab, var(--accent-primary) 14%, transparent);

From a3231c3da565e2ecab64102632fb68ef88e2c3d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Sun, 10 May 2026 19:36:49 +0200
Subject: [PATCH 29/39] fix(ui): return to active projects from home (#411)

## Summary
- Return to an existing open project when users choose that from the
already-open folder dialog.
- When users click a recent folder that is already open, ask whether to
switch to the open project or intentionally open another instance.
- Surface a prominent Return to Active Project action so leaving the
home screen no longer depends on the subtle top-right close affordance.
- Keep multi-instance workflows available without requiring users to
remember a separate row-level button.

Fixes #281

## Why
Users can accidentally open the same workspace several times from the
add-project screen. The app now detects that ambiguity when the
already-open folder is clicked and asks what should happen, instead of
making the user remember a special alternate button ahead of time.

The dialog keeps the copy short: the title states that the project is
already open, and the buttons carry the actual choices.

## Verification
- `git diff --check`
- `npm run typecheck --workspace @codenomad/ui`
- `npm run build --workspace @codenomad/ui`
- `npm run build:tauri`
---
 packages/ui/src/App.tsx                       | 68 +++++++++++++++++--
 .../src/components/folder-selection-view.tsx  | 43 ++++++++++--
 .../lib/i18n/messages/en/folderSelection.ts   |  7 ++
 .../lib/i18n/messages/es/folderSelection.ts   |  7 ++
 .../lib/i18n/messages/fr/folderSelection.ts   |  7 ++
 .../lib/i18n/messages/he/folderSelection.ts   |  7 ++
 .../lib/i18n/messages/ja/folderSelection.ts   |  7 ++
 .../lib/i18n/messages/ru/folderSelection.ts   |  7 ++
 .../i18n/messages/zh-Hans/folderSelection.ts  |  7 ++
 packages/ui/src/stores/instances.ts           | 25 +++++++
 10 files changed, 175 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index d32a3a80..44f0d23f 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -34,6 +34,7 @@ import {
 import { useConfig } from "./stores/preferences"
 import {
   createInstance,
+  getExistingInstanceForFolder,
   instances,
   stopInstance,
   disconnectedInstance,
@@ -95,6 +96,11 @@ const App: Component = () => {
   const [escapeInDebounce, setEscapeInDebounce] = createSignal(false)
   const [instanceTabBarHeight, setInstanceTabBarHeight] = createSignal(0)
   const [sidecarPickerOpen, setSidecarPickerOpen] = createSignal(false)
+  const [alreadyOpenFolderChoice, setAlreadyOpenFolderChoice] = createSignal<{
+    folderPath: string
+    binaryPath: string
+    instanceId: string
+  } | null>(null)
 
   const phoneQuery = useMediaQuery("(max-width: 767px)")
   const isPhoneLayout = createMemo(() => phoneQuery())
@@ -258,15 +264,24 @@ const App: Component = () => {
 
   const launchErrorMessage = () => launchError()?.message ?? ""
 
-  async function handleSelectFolder(folderPath: string, binaryPath?: string) {
+  async function handleSelectFolder(folderPath: string, binaryPath?: string, options?: { forceNew?: boolean }) {
     if (!folderPath) {
       return
     }
-    setIsSelectingFolder(true)
     const selectedBinary = binaryPath || serverSettings().opencodeBinary || "opencode"
+    recordWorkspaceLaunch(folderPath, selectedBinary)
+    clearLaunchError()
+
+    if (!options?.forceNew) {
+      const existingInstance = getExistingInstanceForFolder(folderPath)
+      if (existingInstance) {
+        setAlreadyOpenFolderChoice({ folderPath, binaryPath: selectedBinary, instanceId: existingInstance.id })
+        return
+      }
+    }
+
+    setIsSelectingFolder(true)
     try {
-      recordWorkspaceLaunch(folderPath, selectedBinary)
-      clearLaunchError()
       const instanceId = await createInstance(folderPath, selectedBinary)
       selectInstanceTab(instanceId)
       setShowFolderSelection(false)
@@ -285,6 +300,26 @@ const App: Component = () => {
     }
   }
 
+  function dismissAlreadyOpenFolderChoice() {
+    setAlreadyOpenFolderChoice(null)
+  }
+
+  function switchToAlreadyOpenFolder() {
+    const choice = alreadyOpenFolderChoice()
+    if (!choice) return
+    setAlreadyOpenFolderChoice(null)
+    selectInstanceTab(choice.instanceId)
+    setShowFolderSelection(false)
+    log.info("Selected existing instance", { instanceId: choice.instanceId, folderPath: choice.folderPath })
+  }
+
+  function openAnotherFolderInstance() {
+    const choice = alreadyOpenFolderChoice()
+    if (!choice) return
+    setAlreadyOpenFolderChoice(null)
+    void handleSelectFolder(choice.folderPath, choice.binaryPath, { forceNew: true })
+  }
+
   function handleLaunchErrorClose() {
     clearLaunchError()
   }
@@ -609,6 +644,7 @@ const App: Component = () => {
                 onSelectFolder={handleSelectFolder}
                 isLoading={isSelectingFolder()}
                 onOpenSidecar={handleOpenSidecarPicker}
+                activeProjectLabel={activeInstance()?.folder ?? null}
                 onClose={() => {
                   setShowFolderSelection(false)
                   clearLaunchError()
@@ -620,6 +656,30 @@ const App: Component = () => {
  
         <SettingsScreen />
         <SideCarPickerDialog open={sidecarPickerOpen()} onClose={() => setSidecarPickerOpen(false)} onOpenSidecar={handleOpenSidecar} />
+        <Show when={alreadyOpenFolderChoice()}>
+          <Dialog open modal onOpenChange={(open) => !open && dismissAlreadyOpenFolderChoice()}>
+            <Dialog.Portal>
+              <Dialog.Overlay class="modal-overlay z-[60]" />
+              <Dialog.Content class="modal-surface fixed left-1/2 top-1/2 z-[1310] w-full max-w-sm -translate-x-1/2 -translate-y-1/2 p-6 border border-base shadow-2xl" tabIndex={-1}>
+                <Dialog.Title class="text-lg font-semibold text-primary">
+                  {t("folderSelection.recent.alreadyOpenTitle")}
+                </Dialog.Title>
+                <Dialog.Description class="text-sm text-secondary mt-1">
+                  {t("folderSelection.recent.alreadyOpenMessage")}
+                </Dialog.Description>
+
+                <div class="mt-6 flex justify-end gap-3">
+                  <button type="button" class="button-secondary" onClick={openAnotherFolderInstance}>
+                    {t("folderSelection.recent.openAnotherInstance")}
+                  </button>
+                  <button type="button" class="button-primary" onClick={switchToAlreadyOpenFolder}>
+                    {t("folderSelection.recent.switchToOpenProject")}
+                  </button>
+                </div>
+              </Dialog.Content>
+            </Dialog.Portal>
+          </Dialog>
+        </Show>
  
         <AlertDialog />
 
diff --git a/packages/ui/src/components/folder-selection-view.tsx b/packages/ui/src/components/folder-selection-view.tsx
index 35c984de..286327b3 100644
--- a/packages/ui/src/components/folder-selection-view.tsx
+++ b/packages/ui/src/components/folder-selection-view.tsx
@@ -1,7 +1,7 @@
 import { Dialog } from "@kobalte/core/dialog"
 import { Select } from "@kobalte/core/select"
-import { Component, createSignal, Show, For, onMount, onCleanup, createEffect } from "solid-js"
-import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp, Star, Languages, ChevronDown, X, Globe, Loader2, GitBranch } from "lucide-solid"
+import { Component, createMemo, createSignal, Show, For, onMount, onCleanup, createEffect } from "solid-js"
+import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp, Star, Languages, ChevronDown, X, Globe, Loader2, GitBranch, ArrowLeft } from "lucide-solid"
 import { useConfig } from "../stores/preferences"
 import DirectoryBrowserDialog from "./directory-browser-dialog"
 import Kbd from "./kbd"
@@ -18,6 +18,7 @@ import { openExternalUrl } from "../lib/external-url"
 import { serverApi } from "../lib/api-client"
 import { canOpenRemoteWindows, isTauriHost } from "../lib/runtime-env"
 import { openRemoteServerWindow } from "../lib/native/remote-window"
+import { getExistingInstanceForFolder } from "../stores/instances"
 
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 const GITHUB_URL = "https://github.com/NeuralNomadsAI/CodeNomad"
@@ -27,10 +28,11 @@ type HomeTab = "local" | "servers"
 
 
 interface FolderSelectionViewProps {
-  onSelectFolder: (folder: string, binaryPath?: string) => void
+  onSelectFolder: (folder: string, binaryPath?: string, options?: { forceNew?: boolean }) => void
   onOpenSidecar?: () => void
   isLoading?: boolean
   onClose?: () => void
+  activeProjectLabel?: string | null
 }
 
 const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
@@ -85,6 +87,11 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   const serverList = () => remoteServers()
   const isLoading = () => Boolean(props.isLoading)
   const canUseRemoteServerWindows = () => canOpenRemoteWindows()
+  const activeProjectName = createMemo(() => {
+    const label = props.activeProjectLabel?.trim()
+    if (!label) return null
+    return splitFolderPath(label).baseName
+  })
 
   function getActiveListLength() {
     return activeTab() === "local" ? folders().length : serverList().length
@@ -862,8 +869,10 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                         ref={(el) => (recentListRef = el)}
                       >
                         <For each={folders()}>
-                          {(folder, index) => (
-                            <div
+                          {(folder, index) => {
+                            const existingInstance = () => getExistingInstanceForFolder(folder.path)
+
+                            return <div
                               class="panel-list-item"
                               classList={{
                                 "panel-list-item-highlight": focusMode() === "recent" && selectedIndex() === index(),
@@ -889,6 +898,11 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                                         <span class="text-sm font-medium truncate text-primary">
                                           {splitFolderPath(folder.path).baseName}
                                         </span>
+                                        <Show when={existingInstance()}>
+                                          <span class="rounded-full border border-base px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-secondary">
+                                            {t("folderSelection.recent.openBadge")}
+                                          </span>
+                                        </Show>
                                       </div>
                                       <div class="flex items-center gap-2 pl-6 text-xs text-muted min-w-0">
                                         <span class="font-mono truncate-start flex-1 min-w-0">
@@ -912,7 +926,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                                 </button>
                               </div>
                             </div>
-                          )}
+                          }}
                         </For>
                       </div>
                     </Show>
@@ -947,6 +961,23 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                     <Kbd shortcut="cmd+n" class="ml-2 kbd-hint" />
                   </button>
 
+                  <Show when={props.onClose}>
+                    <button
+                      type="button"
+                      onClick={() => props.onClose?.()}
+                      class="button-primary w-full flex items-center justify-center text-sm"
+                    >
+                      <div class="flex items-center gap-2">
+                        <ArrowLeft class="w-4 h-4" />
+                        <span>{t("folderSelection.actions.returnToProject")}</span>
+                      </div>
+                    </button>
+                  </Show>
+
+                  <Show when={activeProjectName()}>
+                    {(name) => <p class="text-xs text-muted text-center">{t("folderSelection.actions.returnToProjectSubtitle", { name: name() })}</p>}
+                  </Show>
+
                   <button
                     type="button"
                     onClick={openCloneDialog}
diff --git a/packages/ui/src/lib/i18n/messages/en/folderSelection.ts b/packages/ui/src/lib/i18n/messages/en/folderSelection.ts
index 5ce93517..cfdfe7f4 100644
--- a/packages/ui/src/lib/i18n/messages/en/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/en/folderSelection.ts
@@ -15,6 +15,11 @@ export const folderSelectionMessages = {
   "folderSelection.recent.subtitle.one": "{count} folder available",
   "folderSelection.recent.subtitle.other": "{count} folders available",
   "folderSelection.recent.remove": "Remove from recent",
+  "folderSelection.recent.openBadge": "Open",
+  "folderSelection.recent.alreadyOpenTitle": "Project already open",
+  "folderSelection.recent.alreadyOpenMessage": "Choose how to open this folder.",
+  "folderSelection.recent.switchToOpenProject": "Switch to open project",
+  "folderSelection.recent.openAnotherInstance": "Open another instance",
 
   "folderSelection.browse.title": "Browse for Folder",
   "folderSelection.browse.subtitle": "Select any folder on your computer",
@@ -38,6 +43,8 @@ export const folderSelectionMessages = {
   "folderSelection.actions.title": "Open Folder or Connect Server",
   "folderSelection.actions.subtitle": "Open local folder or connect to a CodeNomad server",
   "folderSelection.actions.connectButton": "Connect CodeNomad Server",
+  "folderSelection.actions.returnToProject": "Return to Active Project",
+  "folderSelection.actions.returnToProjectSubtitle": "Go back to {name}",
 
   "folderSelection.advancedSettings": "Advanced Settings",
   "folderSelection.opencode": "OpenCode",
diff --git a/packages/ui/src/lib/i18n/messages/es/folderSelection.ts b/packages/ui/src/lib/i18n/messages/es/folderSelection.ts
index 5bfd167d..d978cdef 100644
--- a/packages/ui/src/lib/i18n/messages/es/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/es/folderSelection.ts
@@ -15,6 +15,11 @@ export const folderSelectionMessages = {
   "folderSelection.recent.subtitle.one": "{count} carpeta disponible",
   "folderSelection.recent.subtitle.other": "{count} carpetas disponibles",
   "folderSelection.recent.remove": "Eliminar de recientes",
+  "folderSelection.recent.openBadge": "Abierta",
+  "folderSelection.recent.alreadyOpenTitle": "Proyecto ya abierto",
+  "folderSelection.recent.alreadyOpenMessage": "Elige cómo abrir esta carpeta.",
+  "folderSelection.recent.switchToOpenProject": "Cambiar al proyecto abierto",
+  "folderSelection.recent.openAnotherInstance": "Abrir otra instancia",
 
   "folderSelection.browse.title": "Buscar carpeta",
   "folderSelection.browse.subtitle": "Selecciona cualquier carpeta en tu ordenador",
@@ -38,6 +43,8 @@ export const folderSelectionMessages = {
   "folderSelection.actions.title": "Abrir carpeta o conectar servidor",
   "folderSelection.actions.subtitle": "Abre una carpeta local o conéctate a un servidor de CodeNomad",
   "folderSelection.actions.connectButton": "Conectar servidor CodeNomad",
+  "folderSelection.actions.returnToProject": "Volver al proyecto activo",
+  "folderSelection.actions.returnToProjectSubtitle": "Volver a {name}",
 
   "folderSelection.advancedSettings": "Configuración avanzada",
   "folderSelection.opencode": "OpenCode",
diff --git a/packages/ui/src/lib/i18n/messages/fr/folderSelection.ts b/packages/ui/src/lib/i18n/messages/fr/folderSelection.ts
index b2ba2f81..aed3a4b2 100644
--- a/packages/ui/src/lib/i18n/messages/fr/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/folderSelection.ts
@@ -15,6 +15,11 @@ export const folderSelectionMessages = {
   "folderSelection.recent.subtitle.one": "{count} dossier disponible",
   "folderSelection.recent.subtitle.other": "{count} dossiers disponibles",
   "folderSelection.recent.remove": "Retirer des récents",
+  "folderSelection.recent.openBadge": "Ouvert",
+  "folderSelection.recent.alreadyOpenTitle": "Projet déjà ouvert",
+  "folderSelection.recent.alreadyOpenMessage": "Choisissez comment ouvrir ce dossier.",
+  "folderSelection.recent.switchToOpenProject": "Basculer vers le projet ouvert",
+  "folderSelection.recent.openAnotherInstance": "Ouvrir une autre instance",
 
   "folderSelection.browse.title": "Parcourir un dossier",
   "folderSelection.browse.subtitle": "Sélectionnez n'importe quel dossier sur votre ordinateur",
@@ -38,6 +43,8 @@ export const folderSelectionMessages = {
   "folderSelection.actions.title": "Ouvrir un dossier ou se connecter à un serveur",
   "folderSelection.actions.subtitle": "Ouvrez un dossier local ou connectez-vous à un serveur CodeNomad",
   "folderSelection.actions.connectButton": "Se connecter au serveur CodeNomad",
+  "folderSelection.actions.returnToProject": "Revenir au projet actif",
+  "folderSelection.actions.returnToProjectSubtitle": "Retourner vers {name}",
 
   "folderSelection.advancedSettings": "Paramètres avancés",
   "folderSelection.opencode": "OpenCode",
diff --git a/packages/ui/src/lib/i18n/messages/he/folderSelection.ts b/packages/ui/src/lib/i18n/messages/he/folderSelection.ts
index a640a0e2..11d6c57e 100644
--- a/packages/ui/src/lib/i18n/messages/he/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/he/folderSelection.ts
@@ -15,6 +15,11 @@ export const folderSelectionMessages = {
   "folderSelection.recent.subtitle.one": "תיקייה אחת זמינה",
   "folderSelection.recent.subtitle.other": "{count} תיקיות זמינות",
   "folderSelection.recent.remove": "הסר מהרשימה האחרונה",
+  "folderSelection.recent.openBadge": "פתוח",
+  "folderSelection.recent.alreadyOpenTitle": "הפרויקט כבר פתוח",
+  "folderSelection.recent.alreadyOpenMessage": "בחר כיצד לפתוח את התיקייה הזו.",
+  "folderSelection.recent.switchToOpenProject": "עבור לפרויקט הפתוח",
+  "folderSelection.recent.openAnotherInstance": "פתח מופע נוסף",
 
   "folderSelection.browse.title": "עיון בתיקייה",
   "folderSelection.browse.subtitle": "בחר כל תיקייה במחשב שלך",
@@ -38,6 +43,8 @@ export const folderSelectionMessages = {
   "folderSelection.actions.title": "פתח תיקייה או התחבר לשרת",
   "folderSelection.actions.subtitle": "פתח תיקייה מקומית או התחבר לשרת CodeNomad",
   "folderSelection.actions.connectButton": "התחבר לשרת CodeNomad",
+  "folderSelection.actions.returnToProject": "חזור לפרויקט הפעיל",
+  "folderSelection.actions.returnToProjectSubtitle": "חזור אל {name}",
 
   "folderSelection.advancedSettings": "הגדרות מתקדמות",
   "folderSelection.opencode": "OpenCode",
diff --git a/packages/ui/src/lib/i18n/messages/ja/folderSelection.ts b/packages/ui/src/lib/i18n/messages/ja/folderSelection.ts
index 95364f00..82b1840e 100644
--- a/packages/ui/src/lib/i18n/messages/ja/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/folderSelection.ts
@@ -15,6 +15,11 @@ export const folderSelectionMessages = {
   "folderSelection.recent.subtitle.one": "{count} 件のフォルダ",
   "folderSelection.recent.subtitle.other": "{count} 件のフォルダ",
   "folderSelection.recent.remove": "履歴から削除",
+  "folderSelection.recent.openBadge": "開いています",
+  "folderSelection.recent.alreadyOpenTitle": "プロジェクトはすでに開いています",
+  "folderSelection.recent.alreadyOpenMessage": "このフォルダの開き方を選択してください。",
+  "folderSelection.recent.switchToOpenProject": "開いているプロジェクトに切り替え",
+  "folderSelection.recent.openAnotherInstance": "別のインスタンスを開く",
 
   "folderSelection.browse.title": "フォルダを参照",
   "folderSelection.browse.subtitle": "コンピュータ上の任意のフォルダを選択",
@@ -38,6 +43,8 @@ export const folderSelectionMessages = {
   "folderSelection.actions.title": "フォルダを開くかサーバーに接続",
   "folderSelection.actions.subtitle": "ローカルフォルダを開くか CodeNomad サーバーに接続します",
   "folderSelection.actions.connectButton": "CodeNomad サーバーに接続",
+  "folderSelection.actions.returnToProject": "アクティブなプロジェクトに戻る",
+  "folderSelection.actions.returnToProjectSubtitle": "{name} に戻る",
 
   "folderSelection.advancedSettings": "詳細設定",
   "folderSelection.opencode": "OpenCode",
diff --git a/packages/ui/src/lib/i18n/messages/ru/folderSelection.ts b/packages/ui/src/lib/i18n/messages/ru/folderSelection.ts
index bbd83aed..0cf0564a 100644
--- a/packages/ui/src/lib/i18n/messages/ru/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/folderSelection.ts
@@ -15,6 +15,11 @@ export const folderSelectionMessages = {
   "folderSelection.recent.subtitle.one": "Доступна {count} папка",
   "folderSelection.recent.subtitle.other": "Доступно {count} папок",
   "folderSelection.recent.remove": "Убрать из недавних",
+  "folderSelection.recent.openBadge": "Открыта",
+  "folderSelection.recent.alreadyOpenTitle": "Проект уже открыт",
+  "folderSelection.recent.alreadyOpenMessage": "Выберите, как открыть эту папку.",
+  "folderSelection.recent.switchToOpenProject": "Перейти к открытому проекту",
+  "folderSelection.recent.openAnotherInstance": "Открыть еще одну инстанцию",
 
   "folderSelection.browse.title": "Выбрать папку",
   "folderSelection.browse.subtitle": "Выберите любую папку на компьютере",
@@ -38,6 +43,8 @@ export const folderSelectionMessages = {
   "folderSelection.actions.title": "Открыть папку или подключить сервер",
   "folderSelection.actions.subtitle": "Откройте локальную папку или подключитесь к серверу CodeNomad",
   "folderSelection.actions.connectButton": "Подключить сервер CodeNomad",
+  "folderSelection.actions.returnToProject": "Вернуться к активному проекту",
+  "folderSelection.actions.returnToProjectSubtitle": "Вернуться к {name}",
 
   "folderSelection.advancedSettings": "Расширенные настройки",
   "folderSelection.opencode": "OpenCode",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/folderSelection.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/folderSelection.ts
index 76f0322d..e2036726 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/folderSelection.ts
@@ -15,6 +15,11 @@ export const folderSelectionMessages = {
   "folderSelection.recent.subtitle.one": "{count} 个文件夹可用",
   "folderSelection.recent.subtitle.other": "{count} 个文件夹可用",
   "folderSelection.recent.remove": "从最近列表移除",
+  "folderSelection.recent.openBadge": "已打开",
+  "folderSelection.recent.alreadyOpenTitle": "项目已打开",
+  "folderSelection.recent.alreadyOpenMessage": "选择如何打开此文件夹。",
+  "folderSelection.recent.switchToOpenProject": "切换到已打开的项目",
+  "folderSelection.recent.openAnotherInstance": "打开另一个实例",
 
   "folderSelection.browse.title": "浏览文件夹",
   "folderSelection.browse.subtitle": "选择你电脑上的任意文件夹",
@@ -38,6 +43,8 @@ export const folderSelectionMessages = {
   "folderSelection.actions.title": "打开文件夹或连接服务器",
   "folderSelection.actions.subtitle": "打开本地文件夹或连接到 CodeNomad 服务器",
   "folderSelection.actions.connectButton": "连接 CodeNomad 服务器",
+  "folderSelection.actions.returnToProject": "返回当前项目",
+  "folderSelection.actions.returnToProjectSubtitle": "返回到 {name}",
 
   "folderSelection.advancedSettings": "高级设置",
   "folderSelection.opencode": "OpenCode",
diff --git a/packages/ui/src/stores/instances.ts b/packages/ui/src/stores/instances.ts
index 110c39f5..ccf14f16 100644
--- a/packages/ui/src/stores/instances.ts
+++ b/packages/ui/src/stores/instances.ts
@@ -553,6 +553,30 @@ async function createInstance(folder: string, _binaryPath?: string): Promise<str
   }
 }
 
+function normalizeInstanceFolderPath(folder: string): string {
+  const trimmed = folder.replace(/[\\/]+$/, "")
+  const windowsLike = /^(?:[A-Za-z]:[\\/]|[\\/]{2})/.test(trimmed)
+  if (!windowsLike) {
+    return trimmed
+  }
+
+  return trimmed.replace(/\\/g, "/").toLowerCase()
+}
+
+function getExistingInstanceForFolder(folder: string): Instance | null {
+  if (!folder) return null
+  const target = normalizeInstanceFolderPath(folder)
+  const matches = Array.from(instances().values()).filter((instance) => {
+    if (instance.status === "stopped") return false
+    return normalizeInstanceFolderPath(instance.folder) === target
+  })
+
+  if (matches.length === 0) return null
+
+  const activeId = activeInstanceId()
+  return matches.find((instance) => instance.id === activeId) ?? matches.find((instance) => instance.status === "ready") ?? matches[0] ?? null
+}
+
 async function stopInstance(id: string) {
   const instance = instances().get(id)
   if (!instance) return
@@ -1169,6 +1193,7 @@ export {
   updateInstance,
   removeInstance,
   createInstance,
+  getExistingInstanceForFolder,
   stopInstance,
   getActiveInstance,
   addLog,

From efe3f5055fc6c78adf1dfd23efae21d5f6fd0596 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Sun, 10 May 2026 21:46:10 +0100
Subject: [PATCH 30/39] Add session web preview mode (#430)

## Summary
- Add ephemeral per-session web preview mode for opening arbitrary
HTTP(S) URLs inside the session workspace without persisting preview
state across reloads.
- Reuse the SideCar iframe shell by extracting a shared BrowserFrame
with navigation, refresh, path entry, viewport presets, and no-injection
element comment targeting.
- Add authenticated preview proxy routes for HTTP and WebSocket traffic,
sharing lower-level proxy forwarding with SideCars to avoid duplicating
proxy code.
- Localize all new preview and viewport strings across English, Spanish,
French, Hebrew, Japanese, Russian, and Simplified Chinese.

## User-facing behavior
- Users can open a web preview from the session toolbar and toggle back
and forth between chat and preview mode.
- Preview mode replaces only the message stream/timeline area; the
prompt input and attachments stay available below the preview.
- Comment mode lets users select elements in the same-origin proxied
iframe and append structured page/element references to the prompt
draft.
- The generated prompt quotes the page/element reference while leaving
the user's actual comment as normal prompt text.
- Viewport selection supports responsive, desktop, tablet
portrait/landscape, and mobile portrait/landscape canvases, with fixed
sizes isolated inside the iframe scroll container.

## Implementation notes
- Preview sessions are in-memory and keyed by short-lived tokens exposed
through `/previews/:token`.
- Preview proxy responses strip frame-blocking headers and rewrite
same-origin redirect locations back under the preview route.
- SideCarView now composes the shared BrowserFrame, preserving existing
SideCar behavior while gaining shared viewport controls.
- Parent-side iframe DOM access powers hover highlighting and element
metadata extraction, avoiding HTML/script injection for the first
implementation.

## Validation
- `npm run typecheck --workspace @codenomad/ui`
- `npm run typecheck --workspace @neuralnomads/codenomad`

## Notes
- Existing unrelated local changes to `package.json` and
`package-lock.json` were intentionally left out of this PR.
- The initial proxy does not yet rewrite all HTML/CSS asset references;
pages with root-relative assets may need follow-up URL rewriting.
---
 packages/server/src/api-types.ts              |   8 +
 packages/server/src/index.ts                  |   4 +
 packages/server/src/previews/manager.ts       |  77 +++
 packages/server/src/server/http-server.ts     | 521 +++++++++++++++++-
 packages/server/src/server/routes/previews.ts |  34 ++
 packages/ui/src/components/browser-frame.tsx  | 381 +++++++++++++
 .../components/instance/instance-shell2.tsx   |  79 ++-
 .../src/components/session-preview-view.tsx   |  91 +++
 .../src/components/session/session-view.tsx   | 124 +++--
 packages/ui/src/components/sidecar-view.tsx   | 197 +------
 packages/ui/src/lib/api-client.ts             |  10 +
 .../ui/src/lib/i18n/messages/en/session.ts    |  25 +
 .../ui/src/lib/i18n/messages/es/session.ts    |  25 +
 .../ui/src/lib/i18n/messages/fr/session.ts    |  25 +
 .../ui/src/lib/i18n/messages/he/session.ts    |  25 +
 .../ui/src/lib/i18n/messages/ja/session.ts    |  25 +
 .../ui/src/lib/i18n/messages/ru/session.ts    |  25 +
 .../src/lib/i18n/messages/zh-Hans/session.ts  |  25 +
 packages/ui/src/stores/session-previews.ts    |  70 +++
 19 files changed, 1529 insertions(+), 242 deletions(-)
 create mode 100644 packages/server/src/previews/manager.ts
 create mode 100644 packages/server/src/server/routes/previews.ts
 create mode 100644 packages/ui/src/components/browser-frame.tsx
 create mode 100644 packages/ui/src/components/session-preview-view.tsx
 create mode 100644 packages/ui/src/stores/session-previews.ts

diff --git a/packages/server/src/api-types.ts b/packages/server/src/api-types.ts
index 9e5fb92a..dd7ba57a 100644
--- a/packages/server/src/api-types.ts
+++ b/packages/server/src/api-types.ts
@@ -256,6 +256,14 @@ export interface SideCar {
   updatedAt: string
 }
 
+export interface PreviewSession {
+  token: string
+  sessionId: string
+  targetUrl: string
+  proxyUrl: string
+  createdAt: string
+}
+
 export interface BinaryRecord {
   id: string
   path: string
diff --git a/packages/server/src/index.ts b/packages/server/src/index.ts
index 17de82f7..f4dc70fe 100644
--- a/packages/server/src/index.ts
+++ b/packages/server/src/index.ts
@@ -26,6 +26,7 @@ import { resolveNetworkAddresses, resolveRemoteAddresses } from "./server/networ
 import { startDevReleaseMonitor } from "./releases/dev-release-monitor"
 import { SpeechService } from "./speech/service"
 import { SideCarManager } from "./sidecars/manager"
+import { PreviewManager } from "./previews/manager"
 import { ClientConnectionManager } from "./clients/connection-manager"
 import { PluginChannelManager } from "./plugins/channel"
 import { VoiceModeManager } from "./plugins/voice-mode"
@@ -340,6 +341,7 @@ async function main() {
     eventBus,
     logger: logger.child({ component: "sidecars" }),
   })
+  const previewManager = new PreviewManager()
   const instanceEventBridge = new InstanceEventBridge({
     workspaceManager,
     eventBus,
@@ -435,6 +437,7 @@ async function main() {
         instanceStore,
         speechService,
         sidecarManager,
+        previewManager,
         authManager,
         clientConnectionManager,
         pluginChannel,
@@ -461,6 +464,7 @@ async function main() {
         instanceStore,
         speechService,
         sidecarManager,
+        previewManager,
         authManager,
         clientConnectionManager,
         pluginChannel,
diff --git a/packages/server/src/previews/manager.ts b/packages/server/src/previews/manager.ts
new file mode 100644
index 00000000..7bf2396a
--- /dev/null
+++ b/packages/server/src/previews/manager.ts
@@ -0,0 +1,77 @@
+import { randomUUID } from "crypto"
+import type { PreviewSession } from "../api-types"
+
+interface PreviewRecord {
+  token: string
+  sessionId: string
+  target: URL
+  createdAt: string
+}
+
+export class PreviewManager {
+  private readonly previews = new Map<string, PreviewRecord>()
+
+  create(sessionId: string, rawUrl: string): PreviewSession {
+    const target = this.normalizeTargetUrl(rawUrl)
+    const token = randomUUID()
+    const record: PreviewRecord = {
+      token,
+      sessionId,
+      target,
+      createdAt: new Date().toISOString(),
+    }
+    this.previews.set(token, record)
+    return this.toPreviewSession(record)
+  }
+
+  get(token: string): PreviewSession | undefined {
+    const record = this.previews.get(token)
+    return record ? this.toPreviewSession(record) : undefined
+  }
+
+  delete(token: string): boolean {
+    return this.previews.delete(token)
+  }
+
+  buildTargetUrl(token: string, incomingPath: string, search = ""): URL | undefined {
+    const record = this.previews.get(token)
+    if (!record) return undefined
+
+    const publicBase = this.buildProxyBasePath(token)
+    let targetPath = incomingPath.startsWith(publicBase) ? incomingPath.slice(publicBase.length) : incomingPath
+    if (!targetPath || targetPath === "/") {
+      targetPath = record.target.pathname || "/"
+    } else if (!targetPath.startsWith("/")) {
+      targetPath = `/${targetPath}`
+    }
+
+    return new URL(`${targetPath}${search}`, record.target.origin)
+  }
+
+  buildProxyBasePath(token: string): string {
+    return `/previews/${encodeURIComponent(token)}`
+  }
+
+  private normalizeTargetUrl(rawUrl: string): URL {
+    const trimmed = rawUrl.trim()
+    const withProtocol = /^[a-z][a-z0-9+.-]*:/i.test(trimmed) ? trimmed : `https://${trimmed}`
+    const target = new URL(withProtocol)
+    if (target.protocol !== "http:" && target.protocol !== "https:") {
+      throw new Error("Preview URL must use HTTP or HTTPS")
+    }
+    if (target.username || target.password) {
+      throw new Error("Preview URL cannot include credentials")
+    }
+    return target
+  }
+
+  private toPreviewSession(record: PreviewRecord): PreviewSession {
+    return {
+      token: record.token,
+      sessionId: record.sessionId,
+      targetUrl: record.target.toString(),
+      proxyUrl: `${this.buildProxyBasePath(record.token)}${record.target.pathname}${record.target.search}${record.target.hash}`,
+      createdAt: record.createdAt,
+    }
+  }
+}
diff --git a/packages/server/src/server/http-server.ts b/packages/server/src/server/http-server.ts
index cf7dae36..faa53d3f 100644
--- a/packages/server/src/server/http-server.ts
+++ b/packages/server/src/server/http-server.ts
@@ -6,7 +6,7 @@ import fs from "fs"
 import { connect as connectTcp, type Socket } from "net"
 import path from "path"
 import { connect as connectTls, type TLSSocket } from "tls"
-import { fetch } from "undici"
+import { fetch, type Headers } from "undici"
 import type { Logger } from "../logger"
 import { WorkspaceManager } from "../workspaces/manager"
 import { isValidWorktreeSlug, listWorktrees, resolveRepoRoot } from "../workspaces/git-worktrees"
@@ -28,6 +28,7 @@ import { registerSpeechRoutes } from "./routes/speech"
 import { registerRemoteServerRoutes } from "./routes/remote-servers"
 import { registerRemoteProxyRoutes } from "./routes/remote-proxy"
 import { registerSideCarRoutes } from "./routes/sidecars"
+import { registerPreviewRoutes } from "./routes/previews"
 import { ServerMeta } from "../api-types"
 import { InstanceStore } from "../storage/instance-store"
 import { BackgroundProcessManager } from "../background-processes/manager"
@@ -39,6 +40,7 @@ import { ClientConnectionManager } from "../clients/connection-manager"
 import { PluginChannelManager } from "../plugins/channel"
 import { VoiceModeManager } from "../plugins/voice-mode"
 import type { SideCarManager } from "../sidecars/manager"
+import type { PreviewManager } from "../previews/manager"
 import type { RemoteProxySessionManager } from "./remote-proxy"
 
 interface HttpServerDeps {
@@ -56,6 +58,7 @@ interface HttpServerDeps {
   instanceStore: InstanceStore
   speechService: SpeechService
   sidecarManager: SideCarManager
+  previewManager: PreviewManager
   authManager: AuthManager
   clientConnectionManager: ClientConnectionManager
   pluginChannel: PluginChannelManager
@@ -214,7 +217,7 @@ export function createHttpServer(deps: HttpServerDeps) {
 
     const session = deps.authManager.getSessionFromRequest(request)
 
-    const requiresAuthForApi = pathname.startsWith("/api/") || pathname.startsWith("/workspaces/") || pathname.startsWith("/sidecars/")
+    const requiresAuthForApi = pathname.startsWith("/api/") || pathname.startsWith("/workspaces/") || pathname.startsWith("/sidecars/") || pathname.startsWith("/previews/")
     if (requiresAuthForApi && !session) {
       // Allow OpenCode plugin -> CodeNomad calls with per-instance basic auth.
       const pluginMatch = pathname.match(/^\/workspaces\/([^/]+)\/plugin(?:\/|$)/)
@@ -285,12 +288,19 @@ export function createHttpServer(deps: HttpServerDeps) {
   registerRemoteProxyRoutes(app, { logger: proxyLogger, sessionManager: deps.remoteProxySessionManager })
   registerSpeechRoutes(app, { speechService: deps.speechService })
   registerSideCarRoutes(app, { sidecarManager: deps.sidecarManager })
+  registerPreviewRoutes(app, { previewManager: deps.previewManager })
   registerSideCarProxyRoutes(app, { sidecarManager: deps.sidecarManager, logger: proxyLogger })
+  registerPreviewProxyRoutes(app, { previewManager: deps.previewManager, logger: proxyLogger })
   setupSideCarWebSocketProxy(app, {
     sidecarManager: deps.sidecarManager,
     authManager: deps.authManager,
     logger: proxyLogger,
   })
+  setupPreviewWebSocketProxy(app, {
+    previewManager: deps.previewManager,
+    authManager: deps.authManager,
+    logger: proxyLogger,
+  })
   registerPluginRoutes(app, {
     workspaceManager: deps.workspaceManager,
     eventBus: deps.eventBus,
@@ -303,9 +313,9 @@ export function createHttpServer(deps: HttpServerDeps) {
 
 
   if (deps.uiDevServerUrl) {
-    setupDevProxy(app, deps.uiDevServerUrl, deps.authManager)
+    setupDevProxy(app, deps.uiDevServerUrl, deps.authManager, deps.previewManager, proxyLogger)
   } else {
-    setupStaticUi(app, deps.uiStaticDir, deps.authManager)
+    setupStaticUi(app, deps.uiStaticDir, deps.authManager, deps.previewManager, proxyLogger)
   }
 
   return {
@@ -381,6 +391,15 @@ interface SideCarWebSocketProxyDeps extends SideCarProxyDeps {
   authManager: AuthManager
 }
 
+interface PreviewProxyDeps {
+  previewManager: PreviewManager
+  logger: Logger
+}
+
+interface PreviewWebSocketProxyDeps extends PreviewProxyDeps {
+  authManager: AuthManager
+}
+
 function registerSideCarProxyRoutes(app: FastifyInstance, deps: SideCarProxyDeps) {
   const proxyBaseHandler = async (
     request: FastifyRequest<{ Params: { id: string } }>,
@@ -412,6 +431,37 @@ function registerSideCarProxyRoutes(app: FastifyInstance, deps: SideCarProxyDeps
   app.all("/sidecars/:id/*", proxyWildcardHandler)
 }
 
+function registerPreviewProxyRoutes(app: FastifyInstance, deps: PreviewProxyDeps) {
+  const proxyBaseHandler = async (
+    request: FastifyRequest<{ Params: { token: string } }>,
+    reply: FastifyReply,
+  ) => {
+    await proxyPreviewRequest({
+      request,
+      reply,
+      previewManager: deps.previewManager,
+      logger: deps.logger,
+      pathSuffix: "",
+    })
+  }
+
+  const proxyWildcardHandler = async (
+    request: FastifyRequest<{ Params: { token: string; "*": string } }>,
+    reply: FastifyReply,
+  ) => {
+    await proxyPreviewRequest({
+      request,
+      reply,
+      previewManager: deps.previewManager,
+      logger: deps.logger,
+      pathSuffix: request.params["*"] ?? "",
+    })
+  }
+
+  app.all("/previews/:token", proxyBaseHandler)
+  app.all("/previews/:token/*", proxyWildcardHandler)
+}
+
 function setupSideCarWebSocketProxy(app: FastifyInstance, deps: SideCarWebSocketProxyDeps) {
   app.server.on("upgrade", (request, socket, head) => {
     const rawUrl = request.url ?? "/"
@@ -434,6 +484,28 @@ function setupSideCarWebSocketProxy(app: FastifyInstance, deps: SideCarWebSocket
   })
 }
 
+function setupPreviewWebSocketProxy(app: FastifyInstance, deps: PreviewWebSocketProxyDeps) {
+  app.server.on("upgrade", (request, socket, head) => {
+    const rawUrl = request.url ?? "/"
+    const parsed = parsePreviewUpgradePath(rawUrl)
+    if (!parsed) {
+      return
+    }
+
+    void proxyPreviewWebSocketUpgrade({
+      request,
+      socket: socket as Socket,
+      head,
+      token: parsed.token,
+      incomingPath: parsed.pathname,
+      search: parsed.search,
+      previewManager: deps.previewManager,
+      authManager: deps.authManager,
+      logger: deps.logger,
+    })
+  })
+}
+
 function registerInstanceProxyRoutes(app: FastifyInstance, deps: InstanceProxyDeps) {
   app.register(async (instance) => {
     instance.removeAllContentTypeParsers()
@@ -770,7 +842,13 @@ function normalizeInstanceSuffix(pathSuffix: string | undefined) {
   return trimmed.length === 0 ? "/" : `/${trimmed}`
 }
 
-function setupStaticUi(app: FastifyInstance, uiDir: string, authManager: AuthManager) {
+function setupStaticUi(
+  app: FastifyInstance,
+  uiDir: string,
+  authManager: AuthManager,
+  previewManager: PreviewManager,
+  logger: Logger,
+) {
   if (!uiDir) {
     app.log.warn("UI static directory not provided; API endpoints only")
     return
@@ -781,6 +859,14 @@ function setupStaticUi(app: FastifyInstance, uiDir: string, authManager: AuthMan
     return
   }
 
+  app.addHook("preHandler", (request, reply, done) => {
+    const session = authManager.getSessionFromRequest(request)
+    if (session && proxyPreviewFallbackFromReferer(request, reply, previewManager, logger)) {
+      return
+    }
+    done()
+  })
+
   app.register(fastifyStatic, {
     root: uiDir,
     prefix: "/",
@@ -797,6 +883,10 @@ function setupStaticUi(app: FastifyInstance, uiDir: string, authManager: AuthMan
     }
 
     const session = authManager.getSessionFromRequest(request)
+    if (session && proxyPreviewFallbackFromReferer(request, reply, previewManager, logger)) {
+      return
+    }
+
     if (!session && wantsHtml(request)) {
       reply.redirect("/login")
       return
@@ -810,7 +900,13 @@ function setupStaticUi(app: FastifyInstance, uiDir: string, authManager: AuthMan
   })
 }
 
-function setupDevProxy(app: FastifyInstance, upstreamBase: string, authManager: AuthManager) {
+function setupDevProxy(
+  app: FastifyInstance,
+  upstreamBase: string,
+  authManager: AuthManager,
+  previewManager: PreviewManager,
+  logger: Logger,
+) {
   app.log.info({ upstreamBase }, "Proxying UI requests to development server")
   app.setNotFoundHandler((request: FastifyRequest, reply: FastifyReply) => {
     const url = request.raw.url ?? ""
@@ -820,6 +916,10 @@ function setupDevProxy(app: FastifyInstance, upstreamBase: string, authManager:
     }
 
     const session = authManager.getSessionFromRequest(request)
+    if (session && proxyPreviewFallbackFromReferer(request, reply, previewManager, logger)) {
+      return
+    }
+
     if (!session && wantsHtml(request)) {
       reply.redirect("/login")
       return
@@ -829,6 +929,49 @@ function setupDevProxy(app: FastifyInstance, upstreamBase: string, authManager:
   })
 }
 
+function proxyPreviewFallbackFromReferer(
+  request: FastifyRequest,
+  reply: FastifyReply,
+  previewManager: PreviewManager,
+  logger: Logger,
+): boolean {
+  const rawUrl = request.raw.url ?? request.url ?? ""
+  const pathname = rawUrl.split("?")[0] ?? ""
+  if (!isPreviewFallbackPath(pathname)) {
+    return false
+  }
+
+  const refererHeader = request.headers.referer ?? request.headers.referrer
+  const referer = Array.isArray(refererHeader) ? refererHeader[0] : refererHeader
+  if (!referer) {
+    return false
+  }
+
+  const parsed = parsePreviewUpgradePath(referer)
+  if (!parsed) {
+    return false
+  }
+
+  void proxyPreviewAssetRequest({
+    request,
+    reply,
+    previewManager,
+    logger,
+    token: parsed.token,
+  })
+  return true
+}
+
+function isPreviewFallbackPath(pathname: string): boolean {
+  if (!pathname || pathname === "/") return false
+  if (pathname.startsWith("/api/") || pathname === "/api") return false
+  if (pathname.startsWith("/workspaces/")) return false
+  if (pathname.startsWith("/sidecars/")) return false
+  if (pathname.startsWith("/previews/")) return false
+  if (pathname.startsWith("/auth/") || pathname === "/login") return false
+  return true
+}
+
 async function proxyToDevServer(request: FastifyRequest, reply: FastifyReply, upstreamBase: string) {
   try {
     const targetUrl = new URL(request.raw.url ?? "/", upstreamBase)
@@ -873,6 +1016,82 @@ function buildProxyHeaders(headers: FastifyRequest["headers"]): Record<string, s
   return result
 }
 
+function buildFetchProxyHeaders(headers: FastifyRequest["headers"], targetOrigin: string): Record<string, string> {
+  const sanitized = sanitizeSideCarProxyRequestHeaders(
+    headers as Record<string, string | string[] | undefined>,
+    targetOrigin,
+  )
+  const result: Record<string, string> = {}
+  for (const [key, value] of Object.entries(sanitized)) {
+    if (!value) continue
+    if (key.toLowerCase() === "cookie") continue
+    result[key] = Array.isArray(value) ? value.join(",") : value
+  }
+  return result
+}
+
+function headersToRecord(headers: Headers): Record<string, string | string[] | undefined> {
+  const result: Record<string, string> = {}
+  headers.forEach((value, key) => {
+    result[key.toLowerCase()] = value
+  })
+  return result
+}
+
+function getHeaderValue(headers: Record<string, string | string[] | undefined>, key: string): string | undefined {
+  const value = headers[key.toLowerCase()]
+  return Array.isArray(value) ? value[0] : value
+}
+
+function shouldForwardRequestBody(method: string): boolean {
+  const normalized = method.toUpperCase()
+  return normalized !== "GET" && normalized !== "HEAD"
+}
+
+function isHtmlContentType(contentType: string): boolean {
+  const normalized = contentType.toLowerCase()
+  return normalized.includes("text/html") || normalized.includes("application/xhtml+xml")
+}
+
+function isCssContentType(contentType: string): boolean {
+  return contentType.toLowerCase().includes("text/css")
+}
+
+function rewritePreviewBodyUrls(body: string, publicBase: string, kind: "html" | "css"): string {
+  if (kind === "css") {
+    return rewriteCssPreviewUrls(body, publicBase)
+  }
+
+  return rewriteCssPreviewUrls(
+    body
+      .replace(/\b(src|href|action|poster|data)=(["'])\/(?!\/)([^"']*)\2/gi, (_match, attr: string, quote: string, pathValue: string) => {
+        return `${attr}=${quote}${publicBase}/${pathValue}${quote}`
+      })
+      .replace(/\bsrcset=(["'])([^"']*)\1/gi, (_match, quote: string, value: string) => {
+        return `srcset=${quote}${rewriteSrcsetPreviewUrls(value, publicBase)}${quote}`
+      }),
+    publicBase,
+  )
+}
+
+function rewriteCssPreviewUrls(body: string, publicBase: string): string {
+  return body.replace(/url\((\s*)(["']?)\/(?!\/)([^"')]+)\2(\s*)\)/gi, (_match, before: string, quote: string, pathValue: string, after: string) => {
+    return `url(${before}${quote}${publicBase}/${pathValue}${quote}${after})`
+  })
+}
+
+function rewriteSrcsetPreviewUrls(value: string, publicBase: string): string {
+  return value
+    .split(",")
+    .map((entry) => {
+      const trimmed = entry.trimStart()
+      if (!trimmed.startsWith("/") || trimmed.startsWith("//")) return entry
+      const leading = entry.slice(0, entry.length - trimmed.length)
+      return `${leading}${publicBase}${trimmed}`
+    })
+    .join(",")
+}
+
 async function proxySideCarRequest(args: {
   request: FastifyRequest
   reply: FastifyReply
@@ -897,14 +1116,154 @@ async function proxySideCarRequest(args: {
   const targetUrl = `${targetOrigin}${targetPath}`
   args.logger.debug({ sidecarId: sidecar.id, targetUrl, pathname, prefixMode: sidecar.prefixMode }, "Proxying request to SideCar")
 
-  await args.reply.from(targetUrl, {
-    rewriteRequestHeaders: (_originalRequest, headers) =>
-      sanitizeSideCarProxyRequestHeaders(headers as Record<string, string | string[] | undefined>, targetOrigin),
+  await proxyTargetRequest({
+    reply: args.reply,
+    logger: args.logger,
+    targetUrl,
+    targetOrigin,
+    logContext: { sidecarId: sidecar.id },
+    errorMessage: "SideCar proxy failed",
     rewriteHeaders: (headers) => rewriteSideCarResponseHeaders(headers, sidecarId, targetOrigin, sidecar.prefixMode),
+  })
+}
+
+async function proxyPreviewRequest(args: {
+  request: FastifyRequest
+  reply: FastifyReply
+  previewManager: PreviewManager
+  logger: Logger
+  pathSuffix?: string
+}) {
+  const token = (args.request.params as { token?: string }).token ?? ""
+  const preview = args.previewManager.get(token)
+  if (!preview) {
+    args.reply.code(404).send({ error: "Preview not found" })
+    return
+  }
+
+  const rawUrl = args.request.raw.url ?? args.request.url ?? ""
+  const queryIndex = rawUrl.indexOf("?")
+  const search = queryIndex >= 0 ? rawUrl.slice(queryIndex) : ""
+  const pathSuffix = args.pathSuffix ?? ""
+  const requestPath = pathSuffix ? `${args.previewManager.buildProxyBasePath(token)}/${pathSuffix.replace(/^\/+/, "")}` : args.previewManager.buildProxyBasePath(token)
+  const targetUrl = args.previewManager.buildTargetUrl(token, requestPath, search)
+  if (!targetUrl) {
+    args.reply.code(404).send({ error: "Preview not found" })
+    return
+  }
+
+  args.logger.debug({ previewToken: token, targetUrl: targetUrl.toString() }, "Proxying request to preview")
+  await proxyPreviewTargetRequest({
+    request: args.request,
+    reply: args.reply,
+    logger: args.logger,
+    targetUrl: targetUrl.toString(),
+    targetOrigin: targetUrl.origin,
+    publicBase: args.previewManager.buildProxyBasePath(token),
+    logContext: { previewToken: token },
+    errorMessage: "Preview proxy failed",
+    rewriteHeaders: (headers) => rewritePreviewResponseHeaders(headers, token, targetUrl.origin),
+  })
+}
+
+async function proxyPreviewAssetRequest(args: {
+  request: FastifyRequest
+  reply: FastifyReply
+  previewManager: PreviewManager
+  logger: Logger
+  token: string
+}) {
+  const rawUrl = args.request.raw.url ?? args.request.url ?? ""
+  const queryIndex = rawUrl.indexOf("?")
+  const search = queryIndex >= 0 ? rawUrl.slice(queryIndex) : ""
+  const pathname = rawUrl.split("?")[0] ?? "/"
+  const targetUrl = args.previewManager.buildTargetUrl(args.token, pathname, search)
+  if (!targetUrl) {
+    args.reply.code(404).send({ error: "Preview not found" })
+    return
+  }
+
+  args.logger.debug({ previewToken: args.token, targetUrl: targetUrl.toString() }, "Proxying preview fallback asset")
+  await proxyPreviewTargetRequest({
+    request: args.request,
+    reply: args.reply,
+    logger: args.logger,
+    targetUrl: targetUrl.toString(),
+    targetOrigin: targetUrl.origin,
+    publicBase: args.previewManager.buildProxyBasePath(args.token),
+    logContext: { previewToken: args.token, previewFallback: true },
+    errorMessage: "Preview proxy failed",
+    rewriteHeaders: (headers) => rewritePreviewResponseHeaders(headers, args.token, targetUrl.origin),
+  })
+}
+
+async function proxyPreviewTargetRequest(args: {
+  request: FastifyRequest
+  reply: FastifyReply
+  logger: Logger
+  targetUrl: string
+  targetOrigin: string
+  publicBase: string
+  logContext: Record<string, unknown>
+  errorMessage: string
+  rewriteHeaders: (headers: Record<string, string | string[] | undefined>) => Record<string, string | string[] | undefined>
+}) {
+  try {
+    const response = await fetch(args.targetUrl, {
+      method: args.request.method,
+      headers: buildFetchProxyHeaders(args.request.headers, args.targetOrigin),
+      body: shouldForwardRequestBody(args.request.method) ? (args.request.raw as any) : undefined,
+      duplex: shouldForwardRequestBody(args.request.method) ? "half" : undefined,
+      redirect: "manual",
+    } as any)
+
+    const headers = args.rewriteHeaders(headersToRecord(response.headers))
+    const contentType = getHeaderValue(headers, "content-type") ?? response.headers.get("content-type") ?? ""
+    delete headers["content-length"]
+    delete headers["content-encoding"]
+
+    for (const [key, value] of Object.entries(headers)) {
+      if (value !== undefined) args.reply.header(key, value)
+    }
+    args.reply.code(response.status)
+
+    if (!response.body || args.request.method === "HEAD") {
+      args.reply.send()
+      return
+    }
+
+    if (isHtmlContentType(contentType) || isCssContentType(contentType)) {
+      const text = await response.text()
+      args.reply.send(rewritePreviewBodyUrls(text, args.publicBase, isCssContentType(contentType) ? "css" : "html"))
+      return
+    }
+
+    args.reply.send(Buffer.from(await response.arrayBuffer()))
+  } catch (error) {
+    args.logger.error({ ...args.logContext, err: error, targetUrl: args.targetUrl }, args.errorMessage)
+    if (!args.reply.sent) {
+      args.reply.code(502).send({ error: args.errorMessage })
+    }
+  }
+}
+
+async function proxyTargetRequest(args: {
+  reply: FastifyReply
+  logger: Logger
+  targetUrl: string
+  targetOrigin: string
+  logContext: Record<string, unknown>
+  errorMessage: string
+  rewriteHeaders: (headers: Record<string, string | string[] | undefined>) => Record<string, string | string[] | undefined>
+}) {
+  await args.reply.from(args.targetUrl, {
+    rewriteRequestHeaders: (_originalRequest, headers) =>
+      sanitizeSideCarProxyRequestHeaders(headers as Record<string, string | string[] | undefined>, args.targetOrigin),
+    rewriteHeaders: args.rewriteHeaders,
     onError: (reply, { error }) => {
-      args.logger.error({ sidecarId: sidecar.id, err: error, targetUrl }, "Failed to proxy SideCar request")
+      args.logger.error({ ...args.logContext, err: error, targetUrl: args.targetUrl }, args.errorMessage)
       if (!reply.sent) {
-        reply.code(502).send({ error: "SideCar proxy failed" })
+        reply.code(502).send({ error: args.errorMessage })
       }
     },
   })
@@ -934,6 +1293,30 @@ function parseSideCarUpgradePath(rawUrl: string): { sidecarId: string; pathname:
   }
 }
 
+function parsePreviewUpgradePath(rawUrl: string): { token: string; pathname: string; search: string } | null {
+  let parsed: URL
+  try {
+    parsed = new URL(rawUrl, "http://localhost")
+  } catch {
+    return null
+  }
+
+  const match = parsed.pathname.match(/^\/previews\/([^/]+)(?:\/.*)?$/)
+  if (!match) {
+    return null
+  }
+
+  try {
+    return {
+      token: decodeURIComponent(match[1] ?? ""),
+      pathname: parsed.pathname,
+      search: parsed.search,
+    }
+  } catch {
+    return null
+  }
+}
+
 async function proxySideCarWebSocketUpgrade(args: {
   request: import("http").IncomingMessage
   socket: Socket
@@ -969,6 +1352,71 @@ async function proxySideCarWebSocketUpgrade(args: {
   const targetUrl = new URL(`${targetOrigin}${targetPath}`)
   logger.debug({ sidecarId, targetUrl: targetUrl.toString(), prefixMode: sidecar.prefixMode }, "Proxying websocket to SideCar")
 
+  proxyTargetWebSocketUpgrade({
+    request,
+    socket,
+    head,
+    targetUrl,
+    logger,
+    logContext: { sidecarId },
+    proxyLabel: "SideCar",
+  })
+}
+
+async function proxyPreviewWebSocketUpgrade(args: {
+  request: import("http").IncomingMessage
+  socket: Socket
+  head: Buffer
+  token: string
+  incomingPath: string
+  search: string
+  previewManager: PreviewManager
+  authManager: AuthManager
+  logger: Logger
+}) {
+  const { request, socket, head, token, incomingPath, search, previewManager, authManager, logger } = args
+
+  if (!isWebSocketUpgradeRequest(request)) {
+    rejectUpgrade(socket, 400, "Bad Request")
+    return
+  }
+
+  const session = authManager.getSessionFromHeaders(request.headers)
+  if (!session) {
+    rejectUpgrade(socket, 401, "Unauthorized")
+    return
+  }
+
+  const targetUrl = previewManager.buildTargetUrl(token, incomingPath, search)
+  if (!targetUrl) {
+    rejectUpgrade(socket, 404, "Not Found")
+    return
+  }
+
+  logger.debug({ previewToken: token, targetUrl: targetUrl.toString() }, "Proxying websocket to preview")
+  proxyTargetWebSocketUpgrade({
+    request,
+    socket,
+    head,
+    targetUrl,
+    logger,
+    logContext: { previewToken: token },
+    proxyLabel: "preview",
+    stripCookies: true,
+  })
+}
+
+function proxyTargetWebSocketUpgrade(args: {
+  request: import("http").IncomingMessage
+  socket: Socket
+  head: Buffer
+  targetUrl: URL
+  logger: Logger
+  logContext: Record<string, unknown>
+  proxyLabel: string
+  stripCookies?: boolean
+}) {
+  const { request, socket, head, targetUrl, logger, logContext, proxyLabel, stripCookies } = args
   const { socket: upstream, readyEvent } = createSideCarUpstreamSocket(targetUrl)
 
   const closeBoth = () => {
@@ -981,7 +1429,7 @@ async function proxySideCarWebSocketUpgrade(args: {
   }
 
   upstream.once("error", (error) => {
-    logger.error({ sidecarId, err: error, targetUrl: targetUrl.toString() }, "Failed to proxy SideCar websocket")
+    logger.error({ ...logContext, err: error, targetUrl: targetUrl.toString() }, `Failed to proxy ${proxyLabel} websocket`)
     rejectUpgrade(socket, 502, "Bad Gateway")
     if (!upstream.destroyed) {
       upstream.destroy()
@@ -989,7 +1437,7 @@ async function proxySideCarWebSocketUpgrade(args: {
   })
 
   socket.once("error", (error) => {
-    logger.debug({ sidecarId, err: error }, "SideCar websocket client socket errored")
+    logger.debug({ ...logContext, err: error }, `${proxyLabel} websocket client socket errored`)
     if (!upstream.destroyed) {
       upstream.destroy()
     }
@@ -997,14 +1445,14 @@ async function proxySideCarWebSocketUpgrade(args: {
 
   upstream.once(readyEvent, () => {
     try {
-      upstream.write(buildSideCarWebSocketRequest(request, targetUrl))
+      upstream.write(buildSideCarWebSocketRequest(request, targetUrl, { stripCookies }))
       if (head.length > 0) {
         upstream.write(head)
       }
       upstream.pipe(socket)
       socket.pipe(upstream)
     } catch (error) {
-      logger.error({ sidecarId, err: error, targetUrl: targetUrl.toString() }, "Failed to forward SideCar websocket upgrade")
+      logger.error({ ...logContext, err: error, targetUrl: targetUrl.toString() }, `Failed to forward ${proxyLabel} websocket upgrade`)
       closeBoth()
     }
   })
@@ -1040,7 +1488,11 @@ function createSideCarUpstreamSocket(targetUrl: URL): { socket: Socket | TLSSock
   }
 }
 
-function buildSideCarWebSocketRequest(request: import("http").IncomingMessage, targetUrl: URL): string {
+function buildSideCarWebSocketRequest(
+  request: import("http").IncomingMessage,
+  targetUrl: URL,
+  options?: { stripCookies?: boolean },
+): string {
   const pathWithQuery = `${targetUrl.pathname}${targetUrl.search}`
   const requestLine = `${request.method ?? "GET"} ${pathWithQuery} HTTP/${request.httpVersion}\r\n`
   const headerLines: string[] = []
@@ -1053,6 +1505,7 @@ function buildSideCarWebSocketRequest(request: import("http").IncomingMessage, t
     if (!key || value === undefined) continue
     const lower = key.toLowerCase()
     if (blockedHeaders.has(lower)) continue
+    if (options?.stripCookies && lower === "cookie") continue
     if (lower === "origin") {
       headerLines.push(`Origin: ${targetUrl.origin}\r\n`)
       continue
@@ -1121,6 +1574,42 @@ function rewriteSideCarResponseHeaders(
   return next
 }
 
+function rewritePreviewResponseHeaders(
+  headers: Record<string, string | string[] | undefined>,
+  token: string,
+  targetOrigin: string,
+) {
+  const next = { ...headers }
+  delete next["x-frame-options"]
+  delete next["content-security-policy"]
+  delete next["content-security-policy-report-only"]
+  delete next["set-cookie"]
+  delete next["set-cookie2"]
+
+  const locationHeader = next.location
+  const location = Array.isArray(locationHeader) ? locationHeader[0] : locationHeader
+  if (!location) {
+    return next
+  }
+
+  const publicBase = `/previews/${encodeURIComponent(token)}`
+  if (location.startsWith("/")) {
+    next.location = `${publicBase}${location}`
+    return next
+  }
+
+  try {
+    const parsed = new URL(location)
+    if (parsed.origin === targetOrigin) {
+      next.location = `${publicBase}${parsed.pathname}${parsed.search}${parsed.hash}`
+    }
+  } catch {
+    // Relative redirects should continue to resolve against the current preview path.
+  }
+
+  return next
+}
+
 function sanitizeSideCarProxyRequestHeaders(
   headers: Record<string, string | string[] | undefined>,
   targetOrigin: string,
diff --git a/packages/server/src/server/routes/previews.ts b/packages/server/src/server/routes/previews.ts
new file mode 100644
index 00000000..fa42a5ac
--- /dev/null
+++ b/packages/server/src/server/routes/previews.ts
@@ -0,0 +1,34 @@
+import type { FastifyInstance } from "fastify"
+import { z } from "zod"
+import type { PreviewSession } from "../../api-types"
+import type { PreviewManager } from "../../previews/manager"
+
+interface RouteDeps {
+  previewManager: PreviewManager
+}
+
+const PreviewCreateSchema = z.object({
+  sessionId: z.string().trim().min(1),
+  url: z.string().trim().min(1),
+})
+
+export function registerPreviewRoutes(app: FastifyInstance, deps: RouteDeps) {
+  app.post("/api/previews", async (request, reply): Promise<PreviewSession | { error: string }> => {
+    try {
+      const body = PreviewCreateSchema.parse(request.body ?? {})
+      return deps.previewManager.create(body.sessionId, body.url)
+    } catch (error) {
+      reply.code(400)
+      return { error: error instanceof Error ? error.message : "Failed to create preview" }
+    }
+  })
+
+  app.delete<{ Params: { token: string } }>("/api/previews/:token", async (request, reply) => {
+    const removed = deps.previewManager.delete(request.params.token)
+    if (!removed) {
+      reply.code(404)
+      return { error: "Preview not found" }
+    }
+    reply.code(204)
+  })
+}
diff --git a/packages/ui/src/components/browser-frame.tsx b/packages/ui/src/components/browser-frame.tsx
new file mode 100644
index 00000000..48c374b1
--- /dev/null
+++ b/packages/ui/src/components/browser-frame.tsx
@@ -0,0 +1,381 @@
+import { ArrowLeft, ArrowRight, ChevronDown, Expand, MessageSquarePlus, Monitor, RefreshCw, RotateCw, Smartphone, Tablet } from "lucide-solid"
+import { Show, createEffect, createMemo, createSignal, onCleanup, type Component } from "solid-js"
+
+export interface BrowserFrameElementTarget {
+  pagePath: string
+  tagName: string
+  text?: string
+  role?: string
+  ariaLabel?: string
+  selector?: string
+  rect: { x: number; y: number; width: number; height: number }
+}
+
+interface BrowserFrameLabels {
+  back: string
+  refresh: string
+  path: string
+  go: string
+  commentMode?: string
+  viewport?: string
+  viewportResponsive?: string
+  viewportDesktop?: string
+  viewportTablet?: string
+  viewportTabletLandscape?: string
+  viewportMobile?: string
+  viewportMobileLandscape?: string
+}
+
+type BrowserViewportPreset = "responsive" | "desktop" | "tablet" | "tabletLandscape" | "mobile" | "mobileLandscape"
+
+const VIEWPORT_PRESETS: Record<BrowserViewportPreset, { width: number | null; height: number | null }> = {
+  responsive: { width: null, height: null },
+  desktop: { width: 1440, height: 900 },
+  tablet: { width: 768, height: 1024 },
+  tabletLandscape: { width: 1024, height: 768 },
+  mobile: { width: 390, height: 844 },
+  mobileLandscape: { width: 844, height: 390 },
+}
+
+const VIEWPORT_OPTIONS = [
+  { id: "responsive" as const, icon: Expand, getLabel: (labels: BrowserFrameLabels) => labels.viewportResponsive },
+  { id: "desktop" as const, icon: Monitor, getLabel: (labels: BrowserFrameLabels) => labels.viewportDesktop },
+  { id: "tablet" as const, icon: Tablet, getLabel: (labels: BrowserFrameLabels) => labels.viewportTablet },
+  { id: "tabletLandscape" as const, icon: RotateCw, getLabel: (labels: BrowserFrameLabels) => labels.viewportTabletLandscape },
+  { id: "mobile" as const, icon: Smartphone, getLabel: (labels: BrowserFrameLabels) => labels.viewportMobile },
+  { id: "mobileLandscape" as const, icon: RotateCw, getLabel: (labels: BrowserFrameLabels) => labels.viewportMobileLandscape },
+]
+
+interface BrowserFrameProps {
+  title: string
+  initialUrl: string
+  proxyBasePath: string
+  lockedBaseLabel: string
+  labels: BrowserFrameLabels
+  commentMode?: boolean
+  onToggleCommentMode?: () => void
+  onCommentTarget?: (target: BrowserFrameElementTarget) => void
+}
+
+function getElementText(element: Element): string | undefined {
+  const text = (element.textContent ?? "").replace(/\s+/g, " ").trim()
+  return text ? text.slice(0, 120) : undefined
+}
+
+function getElementSelector(element: Element): string {
+  const parts: string[] = []
+  let current: Element | null = element
+  while (current && current.nodeType === Node.ELEMENT_NODE && parts.length < 5) {
+    const tag = current.tagName.toLowerCase()
+    const id = current.getAttribute("id")
+    if (id) {
+      parts.unshift(`${tag}#${CSS.escape(id)}`)
+      break
+    }
+
+    const className = Array.from(current.classList).slice(0, 2).map((item) => `.${CSS.escape(item)}`).join("")
+    let part = `${tag}${className}`
+    const parentElement: Element | null = current.parentElement
+    if (parentElement) {
+      const siblings = Array.from(parentElement.children as HTMLCollectionOf<Element>).filter((child) => child.tagName === current?.tagName)
+      if (siblings.length > 1) {
+        part = `${part}:nth-of-type(${siblings.indexOf(current) + 1})`
+      }
+    }
+    parts.unshift(part)
+    current = parentElement
+  }
+  return parts.join(" > ")
+}
+
+export const BrowserFrame: Component<BrowserFrameProps> = (props) => {
+  const [frameSrc, setFrameSrc] = createSignal(props.initialUrl)
+  const [pathInput, setPathInput] = createSignal("/")
+  const [viewportPreset, setViewportPreset] = createSignal<BrowserViewportPreset>("responsive")
+  const [viewportMenuOpen, setViewportMenuOpen] = createSignal(false)
+  const [highlight, setHighlight] = createSignal<{ x: number; y: number; width: number; height: number } | null>(null)
+  let iframeRef: HTMLIFrameElement | undefined
+  let frameWrapRef: HTMLDivElement | undefined
+  let cleanupFrameListeners: (() => void) | null = null
+
+  const canComment = createMemo(() => Boolean(props.onToggleCommentMode && props.onCommentTarget))
+  const viewport = createMemo(() => VIEWPORT_PRESETS[viewportPreset()])
+  const isResponsiveViewport = createMemo(() => viewportPreset() === "responsive")
+  const selectedViewportOption = createMemo(() => VIEWPORT_OPTIONS.find((option) => option.id === viewportPreset()) ?? VIEWPORT_OPTIONS[0])
+
+  const getEditablePathFromUrl = (url: string): string => {
+    try {
+      const parsed = new URL(url, window.location.origin)
+      const basePath = props.proxyBasePath
+      let pathname = parsed.pathname
+
+      if (basePath && pathname.startsWith(basePath)) {
+        pathname = pathname.slice(basePath.length) || "/"
+      }
+
+      if (!pathname.startsWith("/")) {
+        pathname = `/${pathname}`
+      }
+
+      return `${pathname}${parsed.search}${parsed.hash}`
+    } catch {
+      return "/"
+    }
+  }
+
+  const buildNormalizedTargetUrl = (rawInput: string): string => {
+    const trimmed = rawInput.trim()
+    const withLeadingSlash = trimmed.startsWith("/") ? trimmed : `/${trimmed}`
+    const parsed = new URL(withLeadingSlash || "/", window.location.origin)
+
+    const safeSegments: string[] = []
+    for (const segment of parsed.pathname.split("/")) {
+      if (!segment || segment === ".") continue
+      if (segment === "..") {
+        if (safeSegments.length > 0) safeSegments.pop()
+        continue
+      }
+      safeSegments.push(segment)
+    }
+
+    const normalizedPath = `/${safeSegments.join("/")}` || "/"
+    return `${props.proxyBasePath}${normalizedPath}${parsed.search}${parsed.hash}`
+  }
+
+  const buildElementTarget = (element: Element): BrowserFrameElementTarget => {
+    const rect = element.getBoundingClientRect()
+    const pagePath = getEditablePathFromUrl(iframeRef?.contentWindow?.location.href ?? frameSrc())
+    return {
+      pagePath,
+      tagName: element.tagName.toLowerCase(),
+      text: getElementText(element),
+      role: element.getAttribute("role") ?? undefined,
+      ariaLabel: element.getAttribute("aria-label") ?? undefined,
+      selector: getElementSelector(element),
+      rect: { x: Math.round(rect.x), y: Math.round(rect.y), width: Math.round(rect.width), height: Math.round(rect.height) },
+    }
+  }
+
+  const attachCommentListeners = () => {
+    cleanupFrameListeners?.()
+    cleanupFrameListeners = null
+    setHighlight(null)
+
+    if (!props.commentMode || !iframeRef?.contentDocument || !iframeRef.contentWindow || !frameWrapRef) return
+    const doc = iframeRef.contentDocument
+    const frameWindow = iframeRef.contentWindow
+
+    const handleMove = (event: MouseEvent) => {
+      const target = event.target
+      if (!target || !(target instanceof (frameWindow as any).Element)) return
+      const element = target as Element
+      const rect = element.getBoundingClientRect()
+      const frameRect = iframeRef?.getBoundingClientRect()
+      const wrapRect = frameWrapRef?.getBoundingClientRect()
+      if (!frameRect || !wrapRect) return
+      setHighlight({
+        x: frameRect.left - wrapRect.left + rect.x,
+        y: frameRect.top - wrapRect.top + rect.y,
+        width: rect.width,
+        height: rect.height,
+      })
+    }
+
+    const handleLeave = () => setHighlight(null)
+
+    const handleClick = (event: MouseEvent) => {
+      const target = event.target
+      if (!target || !(target instanceof (frameWindow as any).Element)) return
+      event.preventDefault()
+      event.stopPropagation()
+      props.onCommentTarget?.(buildElementTarget(target as Element))
+    }
+
+    doc.addEventListener("mousemove", handleMove, true)
+    doc.addEventListener("mouseleave", handleLeave, true)
+    doc.addEventListener("click", handleClick, true)
+    cleanupFrameListeners = () => {
+      doc.removeEventListener("mousemove", handleMove, true)
+      doc.removeEventListener("mouseleave", handleLeave, true)
+      doc.removeEventListener("click", handleClick, true)
+    }
+  }
+
+  const syncPathInputFromFrame = () => {
+    try {
+      const currentHref = iframeRef?.contentWindow?.location.href
+      if (currentHref) setPathInput(getEditablePathFromUrl(currentHref))
+    } catch {
+      setPathInput(getEditablePathFromUrl(frameSrc()))
+    }
+    attachCommentListeners()
+  }
+
+  createEffect(() => {
+    setFrameSrc(props.initialUrl)
+    setPathInput(getEditablePathFromUrl(props.initialUrl))
+  })
+
+  createEffect(() => {
+    props.commentMode
+    attachCommentListeners()
+  })
+
+  onCleanup(() => cleanupFrameListeners?.())
+
+  const handleBack = (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    try {
+      iframeRef?.contentWindow?.history.go(-1)
+    } catch {
+      // Ignore navigation errors from pages that do not expose history access.
+    }
+  }
+
+  const handleRefresh = () => {
+    try {
+      iframeRef?.contentWindow?.location.reload()
+      return
+    } catch {
+      // Fall back to resetting the iframe source if the frame cannot be reloaded directly.
+    }
+    setFrameSrc("about:blank")
+    requestAnimationFrame(() => setFrameSrc(props.initialUrl))
+  }
+
+  const handleGo = (event?: Event) => {
+    event?.preventDefault()
+    const nextUrl = buildNormalizedTargetUrl(pathInput())
+    setFrameSrc(nextUrl)
+    setPathInput(getEditablePathFromUrl(nextUrl))
+  }
+
+  return (
+    <div class="flex h-full min-h-0 w-full flex-col bg-surface">
+      <div class="flex shrink-0 items-center gap-2 px-3 py-2" style={{ "border-bottom": "1px solid var(--border-base)" }}>
+        <button type="button" class="new-tab-button" onClick={handleBack} title={props.labels.back} aria-label={props.labels.back}>
+          <ArrowLeft class="h-4 w-4" />
+        </button>
+        <button type="button" class="new-tab-button" onClick={handleRefresh} title={props.labels.refresh} aria-label={props.labels.refresh}>
+          <RefreshCw class="h-4 w-4" />
+        </button>
+        <div class="shrink-0 rounded-md px-3 py-1.5 text-sm" style={{ background: "var(--surface-secondary)", color: "var(--text-secondary)", border: "1px solid var(--border-base)" }}>
+          {props.lockedBaseLabel}
+        </div>
+        <form class="flex min-w-0 flex-1 items-center gap-2" onSubmit={(event) => handleGo(event)}>
+          <input
+            type="text"
+            class="min-w-0 flex-1 rounded-md px-3 py-1.5 text-sm outline-none"
+            style={{ background: "var(--surface-secondary)", color: "var(--text-primary)", border: "1px solid var(--border-base)" }}
+            value={pathInput()}
+            onInput={(event) => setPathInput(event.currentTarget.value)}
+            spellcheck={false}
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+            aria-label={props.labels.path}
+          />
+          <button type="submit" class="new-tab-button" title={props.labels.go} aria-label={props.labels.go}>
+            <ArrowRight class="h-4 w-4" />
+          </button>
+        </form>
+        <div class="relative shrink-0">
+          <button
+            type="button"
+            class="selector-button selector-button-secondary px-2 py-1.5 text-sm"
+            aria-label={props.labels.viewport}
+            title={props.labels.viewport}
+            aria-haspopup="menu"
+            aria-expanded={viewportMenuOpen() ? "true" : "false"}
+            onClick={() => setViewportMenuOpen((open) => !open)}
+          >
+            {(() => {
+              const Icon = selectedViewportOption().icon
+              return <Icon class="h-4 w-4" />
+            })()}
+            <ChevronDown class="h-3.5 w-3.5" />
+          </button>
+          <Show when={viewportMenuOpen()}>
+            <div
+              class="absolute right-0 top-full z-20 mt-1 min-w-[13rem] overflow-hidden rounded-md border border-base shadow-xl"
+              style={{ background: "var(--surface-base)", color: "var(--text-primary)" }}
+              role="menu"
+            >
+              {VIEWPORT_OPTIONS.map((option) => {
+                const Icon = option.icon
+                return (
+                  <button
+                    type="button"
+                    class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-surface-secondary"
+                    style={viewportPreset() === option.id ? { color: "var(--accent-primary)" } : undefined}
+                    role="menuitemradio"
+                    aria-checked={viewportPreset() === option.id ? "true" : "false"}
+                    aria-label={option.getLabel(props.labels)}
+                    title={option.getLabel(props.labels)}
+                    onClick={() => {
+                      setViewportPreset(option.id)
+                      setViewportMenuOpen(false)
+                    }}
+                  >
+                    <Icon class="h-4 w-4" />
+                    <span>{option.getLabel(props.labels)}</span>
+                  </button>
+                )
+              })}
+            </div>
+          </Show>
+        </div>
+        <Show when={canComment()}>
+          <button
+            type="button"
+            class="new-tab-button"
+            style={props.commentMode ? { color: "var(--accent-primary)" } : undefined}
+            title={props.labels.commentMode}
+            aria-label={props.labels.commentMode}
+            aria-pressed={props.commentMode ? "true" : "false"}
+            onClick={props.onToggleCommentMode}
+          >
+            <MessageSquarePlus class="h-4 w-4" />
+          </button>
+        </Show>
+      </div>
+      <div ref={frameWrapRef} class="relative min-h-0 min-w-0 flex-1 overflow-hidden">
+        <div
+          class={isResponsiveViewport()
+            ? "absolute inset-0 overflow-hidden bg-surface"
+            : "absolute inset-0 overflow-auto bg-surface-secondary p-4"}
+        >
+          <iframe
+            ref={iframeRef}
+            src={frameSrc()}
+            title={props.title}
+            class={isResponsiveViewport() ? "block border-0 bg-surface" : "block border-0 bg-surface shadow-xl"}
+            style={{
+              width: viewport().width ? `${viewport().width}px` : "100%",
+              height: viewport().height ? `${viewport().height}px` : "100%",
+              margin: viewport().width ? "0 auto" : "0",
+            }}
+            referrerPolicy="same-origin"
+            onLoad={syncPathInputFromFrame}
+          />
+        </div>
+        <Show when={props.commentMode && highlight()}>
+          {(rect) => (
+            <div
+              class="pointer-events-none absolute rounded-md"
+              style={{
+                left: `${rect().x}px`,
+                top: `${rect().y}px`,
+                width: `${rect().width}px`,
+                height: `${rect().height}px`,
+                border: "2px solid var(--accent-primary)",
+                "box-shadow": "0 0 0 9999px rgba(0, 0, 0, 0.08)",
+              }}
+            />
+          )}
+        </Show>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 74b1dc81..c118227a 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -42,9 +42,11 @@ import { useSessionSidebarRequests } from "./shell/useSessionSidebarRequests"
 import RightPanel from "./shell/right-panel/RightPanel"
 import { useDrawerChrome } from "./shell/useDrawerChrome"
 import { getRetrySeconds, getSessionIdleFadeClass, getSessionRetry, getSessionStatus, shouldShowSessionStatus } from "../../stores/session-status"
-import { Maximize2, Search, ShieldAlert } from "lucide-solid"
+import { Eye, Maximize2, MessageSquareText, Search, ShieldAlert } from "lucide-solid"
 import type { PromptInputApi } from "../prompt-input/types"
 import { useConfig } from "../../stores/preferences"
+import { showPromptDialog } from "../../stores/alerts"
+import { openSessionPreview, sessionPreviews, showSessionChat, showSessionPreview } from "../../stores/session-previews"
 
 import type { LayoutMode } from "./shell/types"
 import {
@@ -271,6 +273,11 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     return sessionPromptApis()[sessionId] ?? null
   })
 
+  const activeSessionPreview = createMemo(() => {
+    const sessionId = activeSessionIdForInstance()
+    return sessionId ? sessionPreviews().get(sessionId) ?? null : null
+  })
+
   const registerSessionPromptApi = (sessionId: string, api: PromptInputApi | null) => {
     setSessionPromptApis((current) => ({
       ...current,
@@ -278,6 +285,52 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     }))
   }
 
+  async function handleOpenPreview() {
+    const sessionId = activeSessionIdForInstance()
+    if (!sessionId || sessionId === "info") return
+
+    const url = await showPromptDialog(t("sessionPreview.open.prompt"), {
+      title: t("sessionPreview.open.title"),
+      inputLabel: t("sessionPreview.open.label"),
+      inputPlaceholder: t("sessionPreview.open.placeholder"),
+      confirmLabel: t("sessionPreview.open.confirm"),
+      cancelLabel: t("sessionPreview.open.cancel"),
+    })
+    const normalized = url?.trim()
+    if (!normalized) return
+    await openSessionPreview(sessionId, normalized)
+  }
+
+  function handleShowPreview() {
+    const sessionId = activeSessionIdForInstance()
+    if (!sessionId || sessionId === "info") return
+    showSessionPreview(sessionId)
+  }
+
+  function handlePreviewButtonClick() {
+    const sessionId = activeSessionIdForInstance()
+    if (!sessionId || sessionId === "info") return
+
+    const preview = activeSessionPreview()
+    if (preview?.mode === "preview") {
+      showSessionChat(sessionId)
+      return
+    }
+
+    if (preview) {
+      showSessionPreview(sessionId)
+      return
+    }
+    void handleOpenPreview()
+  }
+
+  const previewToggleLabel = createMemo(() => {
+    const preview = activeSessionPreview()
+    return preview?.mode === "preview" ? t("sessionPreview.chat.button") : t("sessionPreview.open.button")
+  })
+
+  const PreviewToggleIcon = createMemo(() => activeSessionPreview()?.mode === "preview" ? MessageSquareText : Eye)
+
   const yoloModeEnabled = createMemo(() => {
     const session = activeSessionForInstance()
     if (!session) return false
@@ -728,6 +781,18 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                         >
                           <Search class="w-5 h-5" aria-hidden="true" />
                         </IconButton>
+                        <IconButton
+                          color="inherit"
+                          onClick={handlePreviewButtonClick}
+                          aria-label={previewToggleLabel()}
+                          title={previewToggleLabel()}
+                          size="small"
+                        >
+                          {(() => {
+                            const Icon = PreviewToggleIcon()
+                            return <Icon class="w-5 h-5" aria-hidden="true" />
+                          })()}
+                        </IconButton>
                       </Show>
                       <button
                         type="button"
@@ -850,6 +915,18 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                       >
                         <Search class="w-5 h-5" aria-hidden="true" />
                       </IconButton>
+                      <IconButton
+                        color="inherit"
+                        onClick={handlePreviewButtonClick}
+                        aria-label={previewToggleLabel()}
+                        title={previewToggleLabel()}
+                        size="small"
+                      >
+                        {(() => {
+                          const Icon = PreviewToggleIcon()
+                          return <Icon class="w-5 h-5" aria-hidden="true" />
+                        })()}
+                      </IconButton>
                     </Show>
                     <Show when={connectionStatus() === "connected"}>
                       <span class="status-indicator connected">
diff --git a/packages/ui/src/components/session-preview-view.tsx b/packages/ui/src/components/session-preview-view.tsx
new file mode 100644
index 00000000..c81b2a29
--- /dev/null
+++ b/packages/ui/src/components/session-preview-view.tsx
@@ -0,0 +1,91 @@
+import { createSignal, type Component } from "solid-js"
+import { X } from "lucide-solid"
+import { useI18n } from "../lib/i18n"
+import { showPromptDialog } from "../stores/alerts"
+import type { SessionPreviewRecord } from "../stores/session-previews"
+import { BrowserFrame, type BrowserFrameElementTarget } from "./browser-frame"
+
+interface SessionPreviewViewProps {
+  preview: SessionPreviewRecord
+  onBackToChat: () => void
+  onClose: () => void
+  onInsertComment: (markdown: string) => void
+}
+
+function describeElement(target: BrowserFrameElementTarget): string {
+  const label = target.ariaLabel || target.text
+  const role = target.role ? ` role="${target.role}"` : ""
+  return label ? `${target.tagName}${role} "${label}"` : `${target.tagName}${role}`
+}
+
+function buildCommentMarkdown(target: BrowserFrameElementTarget, comment: string): string {
+  const lines = [
+    "> Web preview comment",
+    `> Page: \`${target.pagePath}\``,
+    `> Element: \`${describeElement(target)}\``,
+  ]
+  if (target.selector) {
+    lines.push(`> Selector: \`${target.selector}\``)
+  }
+  return `${lines.join("\n")}\n\n${comment}\n\n`
+}
+
+export const SessionPreviewView: Component<SessionPreviewViewProps> = (props) => {
+  const { t } = useI18n()
+  const [commentMode, setCommentMode] = createSignal(false)
+  const target = () => new URL(props.preview.targetUrl)
+
+  async function handleCommentTarget(elementTarget: BrowserFrameElementTarget) {
+    const comment = await showPromptDialog(t("sessionPreview.comment.prompt"), {
+      title: t("sessionPreview.comment.title"),
+      inputLabel: t("sessionPreview.comment.label"),
+      confirmLabel: t("sessionPreview.comment.add"),
+      cancelLabel: t("sessionPreview.comment.cancel"),
+    })
+    const normalized = comment?.trim()
+    if (!normalized) return
+    props.onInsertComment(buildCommentMarkdown(elementTarget, normalized))
+  }
+
+  return (
+    <div class="flex h-full min-h-0 flex-col bg-surface">
+      <div class="flex shrink-0 items-center justify-between gap-3 px-3 py-2" style={{ "border-bottom": "1px solid var(--border-base)" }}>
+        <div class="min-w-0">
+          <div class="text-sm font-medium text-primary truncate">{t("sessionPreview.title")}</div>
+          <div class="text-xs text-muted truncate">{props.preview.targetUrl}</div>
+        </div>
+        <div class="flex items-center gap-2">
+          <button type="button" class="selector-button selector-button-secondary" onClick={props.onBackToChat}>
+            {t("sessionPreview.backToChat")}
+          </button>
+          <button type="button" class="new-tab-button" onClick={props.onClose} aria-label={t("sessionPreview.close")} title={t("sessionPreview.close")}>
+            <X class="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+      <BrowserFrame
+        title={t("sessionPreview.title")}
+        initialUrl={props.preview.proxyUrl}
+        proxyBasePath={`/previews/${encodeURIComponent(props.preview.token)}`}
+        lockedBaseLabel={target().host}
+        labels={{
+          back: t("sidecars.back"),
+          refresh: t("sidecars.refresh"),
+          path: t("sidecars.path"),
+          go: t("sidecars.go"),
+          viewport: t("browserFrame.viewport"),
+          viewportResponsive: t("browserFrame.viewport.responsive"),
+          viewportDesktop: t("browserFrame.viewport.desktop"),
+          viewportTablet: t("browserFrame.viewport.tablet"),
+          viewportTabletLandscape: t("browserFrame.viewport.tabletLandscape"),
+          viewportMobile: t("browserFrame.viewport.mobile"),
+          viewportMobileLandscape: t("browserFrame.viewport.mobileLandscape"),
+          commentMode: t("sessionPreview.comment.mode"),
+        }}
+        commentMode={commentMode()}
+        onToggleCommentMode={() => setCommentMode((value) => !value)}
+        onCommentTarget={(target) => void handleCommentTarget(target)}
+      />
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/session/session-view.tsx b/packages/ui/src/components/session/session-view.tsx
index 1b70efb3..f151ca5e 100644
--- a/packages/ui/src/components/session/session-view.tsx
+++ b/packages/ui/src/components/session/session-view.tsx
@@ -18,6 +18,8 @@ import { useI18n } from "../../lib/i18n"
 import type { PromptInputApi, PromptInsertMode } from "../prompt-input/types"
 import { clearConversationPlaybackForSession } from "../../stores/conversation-speech"
 import { useConfig } from "../../stores/preferences"
+import { closeSessionPreview, getSessionPreview, showSessionChat } from "../../stores/session-previews"
+import { SessionPreviewView } from "../session-preview-view"
 
 const log = getLogger("session")
 
@@ -59,12 +61,14 @@ export const SessionView: Component<SessionViewProps> = (props) => {
   })
 
   const attachments = createMemo(() => getAttachments(props.instanceId, props.sessionId))
+  const preview = createMemo(() => getSessionPreview(props.sessionId))
 
   const MESSAGE_SCROLL_CACHE_SCOPE = "message-stream"
 
   let promptInputApi: PromptInputApi | null = null
   let pendingPromptText: string | null = null
   let pendingSelectionInsert: { text: string; mode: PromptInsertMode } | null = null
+  let pendingCommentText: string | null = null
 
   let scrollToBottomHandle: (() => void) | undefined
   let rootRef: HTMLDivElement | undefined
@@ -207,6 +211,11 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       pendingSelectionInsert = null
     }
 
+    if (pendingCommentText) {
+      api.insertComment(pendingCommentText)
+      pendingCommentText = null
+    }
+
     return () => {
       if (promptInputApi === api) {
         promptInputApi = null
@@ -222,6 +231,14 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       pendingSelectionInsert = { text, mode }
     }
   }
+
+  function handleInsertPreviewComment(markdown: string) {
+    if (promptInputApi) {
+      promptInputApi.insertComment(markdown)
+    } else {
+      pendingCommentText = `${pendingCommentText ?? ""}${markdown}`
+    }
+  }
  
   async function handleSendMessage(prompt: string, attachments: Attachment[]) {
     scheduleScrollToBottom()
@@ -380,56 +397,65 @@ export const SessionView: Component<SessionViewProps> = (props) => {
         if (!activeSession) return null
         return (
           <div ref={rootRef} class="session-view">
-            <MessageSection
-               instanceId={props.instanceId}
-               sessionId={activeSession.id}
-                loading={messagesLoading()}
-                onRevert={handleRevert}
-                onDeleteMessagesUpTo={handleDeleteMessagesUpTo}
-                 onFork={handleFork}
-                 isActive={props.isActive}
-                 registerScrollToBottom={(fn) => {
-                   scrollToBottomHandle = fn
-                 }}
-
-
-
-
-               showSidebarToggle={props.showSidebarToggle}
-               onSidebarToggle={props.onSidebarToggle}
-               forceCompactStatusLayout={props.forceCompactStatusLayout}
-               onQuoteSelection={handleQuoteSelection}
-             />
-
-
-                <Show when={attachments().length > 0}>
-                  <PromptAttachmentsBar
-                    attachments={attachments()}
-                    onRemoveAttachment={(attachmentId) => {
-                      if (promptInputApi) {
-                        promptInputApi.removeAttachment(attachmentId)
-                        return
-                      }
-                      removeAttachment(props.instanceId, props.sessionId, attachmentId)
-                    }}
-                    onExpandTextAttachment={(attachmentId) => promptInputApi?.expandTextAttachment(attachmentId)}
-                  />
-                </Show>
-
-              <PromptInput
-                instanceId={props.instanceId}
-                instanceFolder={props.instanceFolder}
-                sessionId={activeSession.id}
-                isActive={props.isActive}
-                compactLayout={props.compactPromptLayout}
-                onSend={handleSendMessage}
-                onRunShell={handleRunShell}
-                escapeInDebounce={props.escapeInDebounce}
-                isSessionBusy={sessionBusy()}
-                disabled={sessionNeedsInput()}
-                onAbortSession={handleAbortSession}
-                registerPromptInputApi={registerPromptInputApi}
+            <Show
+              when={preview()?.mode === "preview" && preview()}
+              fallback={
+                <MessageSection
+                  instanceId={props.instanceId}
+                  sessionId={activeSession.id}
+                  loading={messagesLoading()}
+                  onRevert={handleRevert}
+                  onDeleteMessagesUpTo={handleDeleteMessagesUpTo}
+                  onFork={handleFork}
+                  isActive={props.isActive}
+                  registerScrollToBottom={(fn) => {
+                    scrollToBottomHandle = fn
+                  }}
+                  showSidebarToggle={props.showSidebarToggle}
+                  onSidebarToggle={props.onSidebarToggle}
+                  forceCompactStatusLayout={props.forceCompactStatusLayout}
+                  onQuoteSelection={handleQuoteSelection}
+                />
+              }
+            >
+              {(activePreview) => (
+                <SessionPreviewView
+                  preview={activePreview()}
+                  onBackToChat={() => showSessionChat(props.sessionId)}
+                  onClose={() => void closeSessionPreview(props.sessionId)}
+                  onInsertComment={handleInsertPreviewComment}
                 />
+              )}
+            </Show>
+
+            <Show when={attachments().length > 0}>
+              <PromptAttachmentsBar
+                attachments={attachments()}
+                onRemoveAttachment={(attachmentId) => {
+                  if (promptInputApi) {
+                    promptInputApi.removeAttachment(attachmentId)
+                    return
+                  }
+                  removeAttachment(props.instanceId, props.sessionId, attachmentId)
+                }}
+                onExpandTextAttachment={(attachmentId) => promptInputApi?.expandTextAttachment(attachmentId)}
+              />
+            </Show>
+
+            <PromptInput
+              instanceId={props.instanceId}
+              instanceFolder={props.instanceFolder}
+              sessionId={activeSession.id}
+              isActive={props.isActive}
+              compactLayout={props.compactPromptLayout}
+              onSend={handleSendMessage}
+              onRunShell={handleRunShell}
+              escapeInDebounce={props.escapeInDebounce}
+              isSessionBusy={sessionBusy()}
+              disabled={sessionNeedsInput()}
+              onAbortSession={handleAbortSession}
+              registerPromptInputApi={registerPromptInputApi}
+            />
             </div>
           )
         }}
diff --git a/packages/ui/src/components/sidecar-view.tsx b/packages/ui/src/components/sidecar-view.tsx
index f326e5f4..f0305cb6 100644
--- a/packages/ui/src/components/sidecar-view.tsx
+++ b/packages/ui/src/components/sidecar-view.tsx
@@ -1,7 +1,7 @@
-import { ArrowLeft, ArrowRight, RefreshCw } from "lucide-solid"
-import { createEffect, createMemo, createSignal, type Component } from "solid-js"
+import { createMemo, type Component } from "solid-js"
 import type { SideCarTabRecord } from "../stores/sidecars"
 import { useI18n } from "../lib/i18n"
+import { BrowserFrame } from "./browser-frame"
 
 interface SideCarViewProps {
   tab: SideCarTabRecord
@@ -9,9 +9,6 @@ interface SideCarViewProps {
 
 export const SideCarView: Component<SideCarViewProps> = (props) => {
   const { t } = useI18n()
-  const [frameSrc, setFrameSrc] = createSignal(props.tab.shellUrl)
-  const [pathInput, setPathInput] = createSignal("/")
-  let iframeRef: HTMLIFrameElement | undefined
 
   const lockedBaseLabel = createMemo(() => {
     const hostLabel = props.tab.port ? `${props.tab.name}:${props.tab.port}` : props.tab.name
@@ -21,177 +18,25 @@ export const SideCarView: Component<SideCarViewProps> = (props) => {
     return hostLabel
   })
 
-  const getEditablePathFromUrl = (url: string): string => {
-    try {
-      const parsed = new URL(url, window.location.origin)
-      const basePath = props.tab.proxyBasePath
-      let pathname = parsed.pathname
-
-      if (basePath && pathname.startsWith(basePath)) {
-        pathname = pathname.slice(basePath.length) || "/"
-      }
-
-      if (!pathname.startsWith("/")) {
-        pathname = `/${pathname}`
-      }
-
-      return `${pathname}${parsed.search}${parsed.hash}`
-    } catch {
-      return "/"
-    }
-  }
-
-  const buildNormalizedTargetUrl = (rawInput: string): string => {
-    const trimmed = rawInput.trim()
-    const withLeadingSlash = trimmed.startsWith("/") ? trimmed : `/${trimmed}`
-    const parsed = new URL(withLeadingSlash || "/", window.location.origin)
-
-    const safeSegments: string[] = []
-    for (const segment of parsed.pathname.split("/")) {
-      if (!segment || segment === ".") {
-        continue
-      }
-      if (segment === "..") {
-        if (safeSegments.length > 0) {
-          safeSegments.pop()
-        }
-        continue
-      }
-      safeSegments.push(segment)
-    }
-
-    const normalizedPath = `/${safeSegments.join("/")}` || "/"
-    const basePath = props.tab.proxyBasePath
-    return `${basePath}${normalizedPath}${parsed.search}${parsed.hash}`
-  }
-
-  const syncPathInputFromFrame = () => {
-    try {
-      const currentHref = iframeRef?.contentWindow?.location.href
-      if (!currentHref) {
-        return
-      }
-      setPathInput(getEditablePathFromUrl(currentHref))
-    } catch {
-      setPathInput(getEditablePathFromUrl(frameSrc()))
-    }
-  }
-
-  createEffect(() => {
-    setFrameSrc(props.tab.shellUrl)
-    setPathInput(getEditablePathFromUrl(props.tab.shellUrl))
-  })
-
-  const handleBack = (event: MouseEvent) => {
-    event.preventDefault()
-    event.stopPropagation()
-
-    try {
-      const frameWindow = iframeRef?.contentWindow
-      if (!frameWindow) {
-        return
-      }
-
-      if (frameWindow.history.length <= 1) {
-        return
-      }
-
-      frameWindow.focus()
-      frameWindow.history.go(-1)
-    } catch {
-      // Ignore navigation errors from pages that do not expose history access.
-    }
-  }
-
-  const handleRefresh = () => {
-    try {
-      iframeRef?.contentWindow?.location.reload()
-      return
-    } catch {
-      // Fall back to resetting the iframe source if the frame cannot be reloaded directly.
-    }
-
-    setFrameSrc("about:blank")
-    requestAnimationFrame(() => setFrameSrc(props.tab.shellUrl))
-  }
-
-  const handleGo = (event?: Event) => {
-    event?.preventDefault()
-
-    const nextUrl = buildNormalizedTargetUrl(pathInput())
-    setFrameSrc(nextUrl)
-    setPathInput(getEditablePathFromUrl(nextUrl))
-  }
-
   return (
-    <div class="flex h-full min-h-0 w-full flex-col bg-surface">
-      <div
-        class="flex shrink-0 items-center gap-2 px-3 py-2"
-        style={{ "border-bottom": "1px solid var(--border-base)" }}
-      >
-        <button
-          type="button"
-          class="new-tab-button"
-          onClick={handleBack}
-          title={t("sidecars.back")}
-          aria-label={t("sidecars.back")}
-        >
-          <ArrowLeft class="h-4 w-4" />
-        </button>
-        <button
-          type="button"
-          class="new-tab-button"
-          onClick={handleRefresh}
-          title={t("sidecars.refresh")}
-          aria-label={t("sidecars.refresh")}
-        >
-          <RefreshCw class="h-4 w-4" />
-        </button>
-        <div
-          class="shrink-0 rounded-md px-3 py-1.5 text-sm"
-          style={{
-            background: "var(--surface-secondary)",
-            color: "var(--text-secondary)",
-            border: "1px solid var(--border-base)",
-          }}
-        >
-          {lockedBaseLabel()}
-        </div>
-        <form class="flex min-w-0 flex-1 items-center gap-2" onSubmit={(event) => handleGo(event)}>
-          <input
-            type="text"
-            class="min-w-0 flex-1 rounded-md px-3 py-1.5 text-sm outline-none"
-            style={{
-              background: "var(--surface-secondary)",
-              color: "var(--text-primary)",
-              border: "1px solid var(--border-base)",
-            }}
-            value={pathInput()}
-            onInput={(event) => setPathInput(event.currentTarget.value)}
-            spellcheck={false}
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            aria-label={t("sidecars.path")}
-          />
-          <button
-            type="submit"
-            class="new-tab-button"
-            title={t("sidecars.go")}
-            aria-label={t("sidecars.go")}
-          >
-            <ArrowRight class="h-4 w-4" />
-          </button>
-        </form>
-      </div>
-      <iframe
-        ref={iframeRef}
-        src={frameSrc()}
-        title={props.tab.name}
-        class="min-h-0 flex-1 w-full border-0 bg-surface"
-        referrerPolicy="same-origin"
-        onLoad={syncPathInputFromFrame}
-      />
-    </div>
+    <BrowserFrame
+      title={props.tab.name}
+      initialUrl={props.tab.shellUrl}
+      proxyBasePath={props.tab.proxyBasePath}
+      lockedBaseLabel={lockedBaseLabel()}
+      labels={{
+        back: t("sidecars.back"),
+        refresh: t("sidecars.refresh"),
+        path: t("sidecars.path"),
+        go: t("sidecars.go"),
+        viewport: t("browserFrame.viewport"),
+        viewportResponsive: t("browserFrame.viewport.responsive"),
+        viewportDesktop: t("browserFrame.viewport.desktop"),
+        viewportTablet: t("browserFrame.viewport.tablet"),
+        viewportTabletLandscape: t("browserFrame.viewport.tabletLandscape"),
+        viewportMobile: t("browserFrame.viewport.mobile"),
+        viewportMobileLandscape: t("browserFrame.viewport.mobileLandscape"),
+      }}
+    />
   )
 }
diff --git a/packages/ui/src/lib/api-client.ts b/packages/ui/src/lib/api-client.ts
index 35d9d638..b5769e94 100644
--- a/packages/ui/src/lib/api-client.ts
+++ b/packages/ui/src/lib/api-client.ts
@@ -11,6 +11,7 @@ import type {
   SpeechSynthesisResponse,
   SpeechTranscriptionResponse,
   SideCar,
+  PreviewSession,
   ServerMeta,
   RemoteProxySessionCreateRequest,
   RemoteProxySessionCreateResponse,
@@ -252,6 +253,15 @@ export const serverApi = {
   deleteSidecar(id: string): Promise<void> {
     return request(`/api/sidecars/${encodeURIComponent(id)}`, { method: "DELETE" })
   },
+  createPreview(payload: { sessionId: string; url: string }): Promise<PreviewSession> {
+    return request<PreviewSession>("/api/previews", {
+      method: "POST",
+      body: JSON.stringify(payload),
+    })
+  },
+  deletePreview(token: string): Promise<void> {
+    return request(`/api/previews/${encodeURIComponent(token)}`, { method: "DELETE" })
+  },
   fetchServerMeta(): Promise<ServerMeta> {
     return request<ServerMeta>("/api/meta")
   },
diff --git a/packages/ui/src/lib/i18n/messages/en/session.ts b/packages/ui/src/lib/i18n/messages/en/session.ts
index 71b8e1ee..1f0ce505 100644
--- a/packages/ui/src/lib/i18n/messages/en/session.ts
+++ b/packages/ui/src/lib/i18n/messages/en/session.ts
@@ -82,6 +82,31 @@ export const sessionMessages = {
   "sessionView.attachments.insertPastedTextTitle": "Insert pasted text",
   "sessionView.attachments.removeAriaLabel": "Remove attachment",
 
+  "sessionPreview.title": "Web preview",
+  "sessionPreview.backToChat": "Back to chat",
+  "sessionPreview.close": "Close preview",
+  "sessionPreview.chat.button": "Back to chat",
+  "sessionPreview.open.button": "Open web preview",
+  "sessionPreview.open.title": "Open web preview",
+  "sessionPreview.open.prompt": "Enter a trusted local or staging URL to preview in this session.",
+  "sessionPreview.open.label": "Preview URL",
+  "sessionPreview.open.placeholder": "https://staging.example.com",
+  "sessionPreview.open.confirm": "Open preview",
+  "sessionPreview.open.cancel": "Cancel",
+  "sessionPreview.comment.mode": "Comment mode",
+  "sessionPreview.comment.title": "Add preview comment",
+  "sessionPreview.comment.prompt": "Describe what should change for the selected element.",
+  "sessionPreview.comment.label": "Comment",
+  "sessionPreview.comment.add": "Add comment",
+  "sessionPreview.comment.cancel": "Cancel",
+  "browserFrame.viewport": "Viewport size",
+  "browserFrame.viewport.responsive": "Responsive viewport",
+  "browserFrame.viewport.desktop": "Desktop viewport (1440 x 900)",
+  "browserFrame.viewport.tablet": "Tablet viewport (768 x 1024)",
+  "browserFrame.viewport.tabletLandscape": "Tablet landscape (1024 x 768)",
+  "browserFrame.viewport.mobile": "Mobile viewport (390 x 844)",
+  "browserFrame.viewport.mobileLandscape": "Mobile landscape (844 x 390)",
+
   "sessionEvents.sessionCompactedToast": "Session {label} was compacted",
   "sessionEvents.sessionError.unknown": "Unknown error",
   "sessionEvents.sessionError.title": "Session error",
diff --git a/packages/ui/src/lib/i18n/messages/es/session.ts b/packages/ui/src/lib/i18n/messages/es/session.ts
index 57edfe06..7a81e81a 100644
--- a/packages/ui/src/lib/i18n/messages/es/session.ts
+++ b/packages/ui/src/lib/i18n/messages/es/session.ts
@@ -82,6 +82,31 @@ export const sessionMessages = {
   "sessionView.attachments.insertPastedTextTitle": "Insertar texto pegado",
   "sessionView.attachments.removeAriaLabel": "Quitar adjunto",
 
+  "sessionPreview.title": "Vista previa web",
+  "sessionPreview.backToChat": "Volver al chat",
+  "sessionPreview.close": "Cerrar vista previa",
+  "sessionPreview.chat.button": "Volver al chat",
+  "sessionPreview.open.button": "Abrir vista previa web",
+  "sessionPreview.open.title": "Abrir vista previa web",
+  "sessionPreview.open.prompt": "Introduce una URL local o de staging de confianza para previsualizarla en esta sesión.",
+  "sessionPreview.open.label": "URL de vista previa",
+  "sessionPreview.open.placeholder": "https://staging.example.com",
+  "sessionPreview.open.confirm": "Abrir vista previa",
+  "sessionPreview.open.cancel": "Cancelar",
+  "sessionPreview.comment.mode": "Modo de comentarios",
+  "sessionPreview.comment.title": "Agregar comentario de vista previa",
+  "sessionPreview.comment.prompt": "Describe qué debe cambiar en el elemento seleccionado.",
+  "sessionPreview.comment.label": "Comentario",
+  "sessionPreview.comment.add": "Agregar comentario",
+  "sessionPreview.comment.cancel": "Cancelar",
+  "browserFrame.viewport": "Tamaño del viewport",
+  "browserFrame.viewport.responsive": "Viewport adaptable",
+  "browserFrame.viewport.desktop": "Viewport de escritorio (1440 x 900)",
+  "browserFrame.viewport.tablet": "Viewport de tablet (768 x 1024)",
+  "browserFrame.viewport.tabletLandscape": "Tablet horizontal (1024 x 768)",
+  "browserFrame.viewport.mobile": "Viewport móvil (390 x 844)",
+  "browserFrame.viewport.mobileLandscape": "Móvil horizontal (844 x 390)",
+
   "sessionEvents.sessionCompactedToast": "La sesión {label} fue compactada",
   "sessionEvents.sessionError.unknown": "Error desconocido",
   "sessionEvents.sessionError.title": "Error de sesión",
diff --git a/packages/ui/src/lib/i18n/messages/fr/session.ts b/packages/ui/src/lib/i18n/messages/fr/session.ts
index 8913f085..55dca993 100644
--- a/packages/ui/src/lib/i18n/messages/fr/session.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/session.ts
@@ -82,6 +82,31 @@ export const sessionMessages = {
   "sessionView.attachments.insertPastedTextTitle": "Insérer le texte collé",
   "sessionView.attachments.removeAriaLabel": "Retirer la pièce jointe",
 
+  "sessionPreview.title": "Aperçu web",
+  "sessionPreview.backToChat": "Retour au chat",
+  "sessionPreview.close": "Fermer l'aperçu",
+  "sessionPreview.chat.button": "Retour au chat",
+  "sessionPreview.open.button": "Ouvrir l'aperçu web",
+  "sessionPreview.open.title": "Ouvrir l'aperçu web",
+  "sessionPreview.open.prompt": "Saisissez une URL locale ou de staging de confiance à prévisualiser dans cette session.",
+  "sessionPreview.open.label": "URL de l'aperçu",
+  "sessionPreview.open.placeholder": "https://staging.example.com",
+  "sessionPreview.open.confirm": "Ouvrir l'aperçu",
+  "sessionPreview.open.cancel": "Annuler",
+  "sessionPreview.comment.mode": "Mode commentaire",
+  "sessionPreview.comment.title": "Ajouter un commentaire d'aperçu",
+  "sessionPreview.comment.prompt": "Décrivez ce qui doit changer pour l'élément sélectionné.",
+  "sessionPreview.comment.label": "Commentaire",
+  "sessionPreview.comment.add": "Ajouter le commentaire",
+  "sessionPreview.comment.cancel": "Annuler",
+  "browserFrame.viewport": "Taille du viewport",
+  "browserFrame.viewport.responsive": "Viewport responsive",
+  "browserFrame.viewport.desktop": "Viewport bureau (1440 x 900)",
+  "browserFrame.viewport.tablet": "Viewport tablette (768 x 1024)",
+  "browserFrame.viewport.tabletLandscape": "Tablette paysage (1024 x 768)",
+  "browserFrame.viewport.mobile": "Viewport mobile (390 x 844)",
+  "browserFrame.viewport.mobileLandscape": "Mobile paysage (844 x 390)",
+
   "sessionEvents.sessionCompactedToast": "La session {label} a été compactée",
   "sessionEvents.sessionError.unknown": "Erreur inconnue",
   "sessionEvents.sessionError.title": "Erreur de session",
diff --git a/packages/ui/src/lib/i18n/messages/he/session.ts b/packages/ui/src/lib/i18n/messages/he/session.ts
index 7a529308..e467e154 100644
--- a/packages/ui/src/lib/i18n/messages/he/session.ts
+++ b/packages/ui/src/lib/i18n/messages/he/session.ts
@@ -82,6 +82,31 @@ export const sessionMessages = {
   "sessionView.attachments.insertPastedTextTitle": "הכנס טקסט שהודבק",
   "sessionView.attachments.removeAriaLabel": "הסר קובץ מצורף",
 
+  "sessionPreview.title": "תצוגה מקדימה של אתר",
+  "sessionPreview.backToChat": "חזרה לצ'אט",
+  "sessionPreview.close": "סגור תצוגה מקדימה",
+  "sessionPreview.chat.button": "חזרה לצ'אט",
+  "sessionPreview.open.button": "פתח תצוגה מקדימה של אתר",
+  "sessionPreview.open.title": "פתח תצוגה מקדימה של אתר",
+  "sessionPreview.open.prompt": "הזן כתובת URL מקומית או סביבת staging שאתה נותן בה אמון לתצוגה מקדימה בסשן הזה.",
+  "sessionPreview.open.label": "כתובת URL לתצוגה מקדימה",
+  "sessionPreview.open.placeholder": "https://staging.example.com",
+  "sessionPreview.open.confirm": "פתח תצוגה מקדימה",
+  "sessionPreview.open.cancel": "ביטול",
+  "sessionPreview.comment.mode": "מצב תגובות",
+  "sessionPreview.comment.title": "הוסף תגובה לתצוגה המקדימה",
+  "sessionPreview.comment.prompt": "תאר מה צריך להשתנות באלמנט שנבחר.",
+  "sessionPreview.comment.label": "תגובה",
+  "sessionPreview.comment.add": "הוסף תגובה",
+  "sessionPreview.comment.cancel": "ביטול",
+  "browserFrame.viewport": "גודל viewport",
+  "browserFrame.viewport.responsive": "Viewport רספונסיבי",
+  "browserFrame.viewport.desktop": "Viewport שולחני (1440 x 900)",
+  "browserFrame.viewport.tablet": "Viewport טאבלט (768 x 1024)",
+  "browserFrame.viewport.tabletLandscape": "טאבלט לרוחב (1024 x 768)",
+  "browserFrame.viewport.mobile": "Viewport נייד (390 x 844)",
+  "browserFrame.viewport.mobileLandscape": "נייד לרוחב (844 x 390)",
+
   "sessionEvents.sessionCompactedToast": "הסשן {label} סוכם",
   "sessionEvents.sessionError.unknown": "שגיאה לא ידועה",
   "sessionEvents.sessionError.title": "שגיאת סשן",
diff --git a/packages/ui/src/lib/i18n/messages/ja/session.ts b/packages/ui/src/lib/i18n/messages/ja/session.ts
index 72df1965..39c1ff3e 100644
--- a/packages/ui/src/lib/i18n/messages/ja/session.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/session.ts
@@ -82,6 +82,31 @@ export const sessionMessages = {
   "sessionView.attachments.insertPastedTextTitle": "貼り付けたテキストを挿入",
   "sessionView.attachments.removeAriaLabel": "添付を削除",
 
+  "sessionPreview.title": "Web プレビュー",
+  "sessionPreview.backToChat": "チャットに戻る",
+  "sessionPreview.close": "プレビューを閉じる",
+  "sessionPreview.chat.button": "チャットに戻る",
+  "sessionPreview.open.button": "Web プレビューを開く",
+  "sessionPreview.open.title": "Web プレビューを開く",
+  "sessionPreview.open.prompt": "このセッションでプレビューする信頼済みのローカルまたはステージング URL を入力してください。",
+  "sessionPreview.open.label": "プレビュー URL",
+  "sessionPreview.open.placeholder": "https://staging.example.com",
+  "sessionPreview.open.confirm": "プレビューを開く",
+  "sessionPreview.open.cancel": "キャンセル",
+  "sessionPreview.comment.mode": "コメントモード",
+  "sessionPreview.comment.title": "プレビューコメントを追加",
+  "sessionPreview.comment.prompt": "選択した要素で変更すべき内容を説明してください。",
+  "sessionPreview.comment.label": "コメント",
+  "sessionPreview.comment.add": "コメントを追加",
+  "sessionPreview.comment.cancel": "キャンセル",
+  "browserFrame.viewport": "ビューポートサイズ",
+  "browserFrame.viewport.responsive": "レスポンシブビューポート",
+  "browserFrame.viewport.desktop": "デスクトップビューポート (1440 x 900)",
+  "browserFrame.viewport.tablet": "タブレットビューポート (768 x 1024)",
+  "browserFrame.viewport.tabletLandscape": "タブレット横向き (1024 x 768)",
+  "browserFrame.viewport.mobile": "モバイルビューポート (390 x 844)",
+  "browserFrame.viewport.mobileLandscape": "モバイル横向き (844 x 390)",
+
   "sessionEvents.sessionCompactedToast": "セッション {label} をコンパクト化しました",
   "sessionEvents.sessionError.unknown": "不明なエラー",
   "sessionEvents.sessionError.title": "セッションエラー",
diff --git a/packages/ui/src/lib/i18n/messages/ru/session.ts b/packages/ui/src/lib/i18n/messages/ru/session.ts
index 3b02f2fc..81a3c897 100644
--- a/packages/ui/src/lib/i18n/messages/ru/session.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/session.ts
@@ -82,6 +82,31 @@ export const sessionMessages = {
   "sessionView.attachments.insertPastedTextTitle": "Вставить вставленный текст",
   "sessionView.attachments.removeAriaLabel": "Удалить вложение",
 
+  "sessionPreview.title": "Веб-предпросмотр",
+  "sessionPreview.backToChat": "Вернуться в чат",
+  "sessionPreview.close": "Закрыть предпросмотр",
+  "sessionPreview.chat.button": "Вернуться в чат",
+  "sessionPreview.open.button": "Открыть веб-предпросмотр",
+  "sessionPreview.open.title": "Открыть веб-предпросмотр",
+  "sessionPreview.open.prompt": "Введите доверенный локальный или staging URL для предпросмотра в этой сессии.",
+  "sessionPreview.open.label": "URL предпросмотра",
+  "sessionPreview.open.placeholder": "https://staging.example.com",
+  "sessionPreview.open.confirm": "Открыть предпросмотр",
+  "sessionPreview.open.cancel": "Отмена",
+  "sessionPreview.comment.mode": "Режим комментариев",
+  "sessionPreview.comment.title": "Добавить комментарий к предпросмотру",
+  "sessionPreview.comment.prompt": "Опишите, что нужно изменить для выбранного элемента.",
+  "sessionPreview.comment.label": "Комментарий",
+  "sessionPreview.comment.add": "Добавить комментарий",
+  "sessionPreview.comment.cancel": "Отмена",
+  "browserFrame.viewport": "Размер viewport",
+  "browserFrame.viewport.responsive": "Адаптивный viewport",
+  "browserFrame.viewport.desktop": "Десктопный viewport (1440 x 900)",
+  "browserFrame.viewport.tablet": "Планшетный viewport (768 x 1024)",
+  "browserFrame.viewport.tabletLandscape": "Планшет горизонтально (1024 x 768)",
+  "browserFrame.viewport.mobile": "Мобильный viewport (390 x 844)",
+  "browserFrame.viewport.mobileLandscape": "Мобильный горизонтально (844 x 390)",
+
   "sessionEvents.sessionCompactedToast": "Сессия {label} была компактирована",
   "sessionEvents.sessionError.unknown": "Неизвестная ошибка",
   "sessionEvents.sessionError.title": "Ошибка сессии",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/session.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/session.ts
index caf776e6..04cdf990 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/session.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/session.ts
@@ -82,6 +82,31 @@ export const sessionMessages = {
   "sessionView.attachments.insertPastedTextTitle": "插入粘贴的文本",
   "sessionView.attachments.removeAriaLabel": "移除附件",
 
+  "sessionPreview.title": "网页预览",
+  "sessionPreview.backToChat": "返回聊天",
+  "sessionPreview.close": "关闭预览",
+  "sessionPreview.chat.button": "返回聊天",
+  "sessionPreview.open.button": "打开网页预览",
+  "sessionPreview.open.title": "打开网页预览",
+  "sessionPreview.open.prompt": "输入可信的本地或预发布 URL，以便在此会话中预览。",
+  "sessionPreview.open.label": "预览 URL",
+  "sessionPreview.open.placeholder": "https://staging.example.com",
+  "sessionPreview.open.confirm": "打开预览",
+  "sessionPreview.open.cancel": "取消",
+  "sessionPreview.comment.mode": "评论模式",
+  "sessionPreview.comment.title": "添加预览评论",
+  "sessionPreview.comment.prompt": "描述所选元素需要更改的内容。",
+  "sessionPreview.comment.label": "评论",
+  "sessionPreview.comment.add": "添加评论",
+  "sessionPreview.comment.cancel": "取消",
+  "browserFrame.viewport": "视口大小",
+  "browserFrame.viewport.responsive": "响应式视口",
+  "browserFrame.viewport.desktop": "桌面视口 (1440 x 900)",
+  "browserFrame.viewport.tablet": "平板视口 (768 x 1024)",
+  "browserFrame.viewport.tabletLandscape": "平板横屏 (1024 x 768)",
+  "browserFrame.viewport.mobile": "移动视口 (390 x 844)",
+  "browserFrame.viewport.mobileLandscape": "移动横屏 (844 x 390)",
+
   "sessionEvents.sessionCompactedToast": "会话 {label} 已被压缩",
   "sessionEvents.sessionError.unknown": "未知错误",
   "sessionEvents.sessionError.title": "会话错误",
diff --git a/packages/ui/src/stores/session-previews.ts b/packages/ui/src/stores/session-previews.ts
new file mode 100644
index 00000000..f41b34ac
--- /dev/null
+++ b/packages/ui/src/stores/session-previews.ts
@@ -0,0 +1,70 @@
+import { createSignal } from "solid-js"
+import { serverApi } from "../lib/api-client"
+import type { PreviewSession } from "../../../server/src/api-types"
+
+interface SessionPreviewRecord extends PreviewSession {
+  mode: "preview" | "chat"
+}
+
+const [sessionPreviews, setSessionPreviews] = createSignal<Map<string, SessionPreviewRecord>>(new Map())
+
+function getSessionPreview(sessionId: string): SessionPreviewRecord | null {
+  return sessionPreviews().get(sessionId) ?? null
+}
+
+async function openSessionPreview(sessionId: string, url: string): Promise<SessionPreviewRecord> {
+  const existing = sessionPreviews().get(sessionId)
+  if (existing) {
+    void serverApi.deletePreview(existing.token).catch(() => undefined)
+  }
+
+  const preview = await serverApi.createPreview({ sessionId, url })
+  const record: SessionPreviewRecord = { ...preview, mode: "preview" }
+  setSessionPreviews((prev) => {
+    const next = new Map(prev)
+    next.set(sessionId, record)
+    return next
+  })
+  return record
+}
+
+function showSessionPreview(sessionId: string) {
+  setSessionPreviews((prev) => {
+    const current = prev.get(sessionId)
+    if (!current) return prev
+    const next = new Map(prev)
+    next.set(sessionId, { ...current, mode: "preview" })
+    return next
+  })
+}
+
+function showSessionChat(sessionId: string) {
+  setSessionPreviews((prev) => {
+    const current = prev.get(sessionId)
+    if (!current) return prev
+    const next = new Map(prev)
+    next.set(sessionId, { ...current, mode: "chat" })
+    return next
+  })
+}
+
+async function closeSessionPreview(sessionId: string) {
+  const current = sessionPreviews().get(sessionId)
+  if (!current) return
+  setSessionPreviews((prev) => {
+    const next = new Map(prev)
+    next.delete(sessionId)
+    return next
+  })
+  await serverApi.deletePreview(current.token).catch(() => undefined)
+}
+
+export {
+  sessionPreviews,
+  getSessionPreview,
+  openSessionPreview,
+  showSessionPreview,
+  showSessionChat,
+  closeSessionPreview,
+}
+export type { SessionPreviewRecord }

From 8e6780c198065946dc9e3edd3ee428f4770f165f Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Mon, 11 May 2026 10:55:06 +0100
Subject: [PATCH 31/39] fix(ui): align prompt attachment picker with drop
 behavior (#432)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
- Reuses the directory browser for web file attachment selection and
removes the separate filesystem browser dialog.
- Reads web-selected files through the filesystem browser API so
selection respects unrestricted and configured workspace roots.
- Keeps Electron/Tauri picker selection on the FileList ingestion path
so picked files behave like dropped files with byte-backed attachments.

## Validation
- npm run typecheck --workspace @codenomad/ui
- npm run typecheck --workspace @neuralnomads/codenomad
- npm run typecheck --workspace @neuralnomads/codenomad-electron-app
- cargo check
- git diff --check

## Notes
- Follow-up to #417; this branch currently includes the commits from
that PR plus the attachment picker parity fix.

---------

Co-authored-by: Pascal André <pascalandr@gmail.com>
---
 packages/electron-app/electron/main/ipc.ts    |   4 +
 packages/server/src/api-types.ts              |   7 +
 packages/server/src/filesystem/browser.ts     |  24 +
 .../server/src/server/routes/filesystem.ts    |  15 +
 .../server/src/server/routes/workspaces.ts    |   3 +-
 packages/server/src/workspaces/manager.ts     |   6 +-
 .../components/directory-browser-dialog.tsx   |  84 +--
 .../components/filesystem-browser-dialog.tsx  | 485 ------------------
 .../components/opencode-binary-selector.tsx   |   4 +-
 packages/ui/src/components/prompt-input.tsx   |  89 +++-
 .../prompt-input/usePromptAttachments.ts      | 175 ++++++-
 packages/ui/src/lib/api-client.ts             |  13 +-
 .../ui/src/lib/i18n/messages/en/messaging.ts  |   8 +
 .../ui/src/lib/i18n/messages/es/messaging.ts  |   8 +
 .../ui/src/lib/i18n/messages/fr/messaging.ts  |   8 +
 .../ui/src/lib/i18n/messages/he/messaging.ts  |   8 +
 .../ui/src/lib/i18n/messages/ja/messaging.ts  |   8 +
 .../ui/src/lib/i18n/messages/ru/messaging.ts  |   8 +
 .../lib/i18n/messages/zh-Hans/messaging.ts    |   8 +
 .../ui/src/lib/native/desktop-file-drop.ts    |  14 +-
 .../ui/src/lib/native/electron/functions.ts   |  14 +-
 packages/ui/src/lib/native/file-path.ts       |  14 +
 .../ui/src/lib/native/native-functions.ts     |  18 +-
 packages/ui/src/lib/native/tauri/functions.ts |   8 +-
 packages/ui/src/lib/native/types.ts           |   1 +
 .../ui/src/styles/messaging/prompt-input.css  |   3 +
 packages/ui/src/types/global.d.ts             |   1 +
 27 files changed, 465 insertions(+), 573 deletions(-)
 delete mode 100644 packages/ui/src/components/filesystem-browser-dialog.tsx
 create mode 100644 packages/ui/src/lib/native/file-path.ts

diff --git a/packages/electron-app/electron/main/ipc.ts b/packages/electron-app/electron/main/ipc.ts
index d6536945..076ec8ca 100644
--- a/packages/electron-app/electron/main/ipc.ts
+++ b/packages/electron-app/electron/main/ipc.ts
@@ -10,6 +10,7 @@ interface DialogOpenRequest {
   title?: string
   defaultPath?: string
   filters?: Array<{ name?: string; extensions: string[] }>
+  multiple?: boolean
 }
 
 interface DialogOpenResult {
@@ -47,6 +48,9 @@ export function setupCliIPC(mainWindow: BrowserWindow, cliManager: CliProcessMan
   ipcMain.handle("dialog:open", async (_, request: DialogOpenRequest): Promise<DialogOpenResult> => {
     const properties: OpenDialogOptions["properties"] =
       request.mode === "directory" ? ["openDirectory", "createDirectory"] : ["openFile"]
+    if (request.mode === "file" && request.multiple) {
+      properties.push("multiSelections")
+    }
 
     const filters = request.filters?.map((filter) => ({
       name: filter.name ?? "Files",
diff --git a/packages/server/src/api-types.ts b/packages/server/src/api-types.ts
index dd7ba57a..d591dba4 100644
--- a/packages/server/src/api-types.ts
+++ b/packages/server/src/api-types.ts
@@ -214,6 +214,12 @@ export interface FileSystemCreateFolderResponse {
   absolutePath: string
 }
 
+export interface FileSystemFileContentResponse {
+  path: string
+  contents: string
+  encoding: "utf-8" | "base64"
+}
+
 export const WINDOWS_DRIVES_ROOT = "__drives__"
 
 export interface WorkspaceFileResponse {
@@ -221,6 +227,7 @@ export interface WorkspaceFileResponse {
   relativePath: string
   /** UTF-8 file contents; binary files should be base64 encoded by the caller. */
   contents: string
+  encoding?: "utf-8" | "base64"
 }
 
 export type WorkspaceFileSearchResponse = FileSystemEntry[]
diff --git a/packages/server/src/filesystem/browser.ts b/packages/server/src/filesystem/browser.ts
index cd6c2a9e..933637e9 100644
--- a/packages/server/src/filesystem/browser.ts
+++ b/packages/server/src/filesystem/browser.ts
@@ -4,6 +4,7 @@ import path from "path"
 import {
   FileSystemCreateFolderResponse,
   FileSystemEntry,
+  FileSystemFileContentResponse,
   FileSystemListResponse,
   FileSystemListingMetadata,
   WINDOWS_DRIVES_ROOT,
@@ -22,6 +23,7 @@ interface DirectoryReadOptions {
 }
 
 const WINDOWS_DRIVE_LETTERS = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i))
+const MAX_READABLE_FILE_BYTES = 5 * 1024 * 1024
 
 export class FileSystemBrowser {
   private readonly root: string
@@ -98,6 +100,28 @@ export class FileSystemBrowser {
     return fs.readFileSync(resolved, "utf-8")
   }
 
+  readFileBase64(relativePath: string): string {
+    if (this.unrestricted) {
+      throw new Error("readFileBase64 is not available in unrestricted mode")
+    }
+    const resolved = this.toRestrictedAbsolute(relativePath)
+    return fs.readFileSync(resolved).toString("base64")
+  }
+
+  readFileContent(targetPath: string, options?: { encoding?: "utf-8" | "base64" }): FileSystemFileContentResponse {
+    const encoding = options?.encoding ?? "utf-8"
+    const resolved = this.unrestricted ? this.resolveUnrestrictedPath(targetPath) : this.toRestrictedAbsolute(targetPath)
+    const stats = fs.statSync(resolved)
+    if (!stats.isFile()) {
+      throw new Error("Selected path is not a file")
+    }
+    if (stats.size > MAX_READABLE_FILE_BYTES) {
+      throw new Error("Selected file is too large to attach")
+    }
+    const contents = encoding === "base64" ? fs.readFileSync(resolved).toString("base64") : fs.readFileSync(resolved, "utf-8")
+    return { path: targetPath, contents, encoding }
+  }
+
   private listRestrictedWithMetadata(relativePath: string | undefined, includeFiles: boolean): FileSystemListResponse {
     const normalizedPath = this.normalizeRelativePath(relativePath)
     const absolutePath = this.toRestrictedAbsolute(normalizedPath)
diff --git a/packages/server/src/server/routes/filesystem.ts b/packages/server/src/server/routes/filesystem.ts
index 4f5895f4..41815720 100644
--- a/packages/server/src/server/routes/filesystem.ts
+++ b/packages/server/src/server/routes/filesystem.ts
@@ -16,6 +16,11 @@ const FilesystemCreateFolderSchema = z.object({
   name: z.string(),
 })
 
+const FilesystemFileContentQuerySchema = z.object({
+  path: z.string(),
+  encoding: z.enum(["utf-8", "base64"]).optional(),
+})
+
 export function registerFilesystemRoutes(app: FastifyInstance, deps: RouteDeps) {
   app.get("/api/filesystem", async (request, reply) => {
     const query = FilesystemQuerySchema.parse(request.query ?? {})
@@ -51,4 +56,14 @@ export function registerFilesystemRoutes(app: FastifyInstance, deps: RouteDeps)
       reply.code(400).type("text/plain").send((error as Error).message)
     }
   })
+
+  app.get("/api/filesystem/files/content", async (request, reply) => {
+    const query = FilesystemFileContentQuerySchema.parse(request.query ?? {})
+
+    try {
+      return deps.fileSystemBrowser.readFileContent(query.path, { encoding: query.encoding })
+    } catch (error) {
+      reply.code(400).type("text/plain").send((error as Error).message)
+    }
+  })
 }
diff --git a/packages/server/src/server/routes/workspaces.ts b/packages/server/src/server/routes/workspaces.ts
index a115bf0d..517367f5 100644
--- a/packages/server/src/server/routes/workspaces.ts
+++ b/packages/server/src/server/routes/workspaces.ts
@@ -28,6 +28,7 @@ const WorkspaceFilesQuerySchema = z.object({
 
 const WorkspaceFileContentQuerySchema = z.object({
   path: z.string(),
+  encoding: z.enum(["utf-8", "base64"]).optional(),
 })
 
 const WorkspaceFileContentBodySchema = z.object({
@@ -135,7 +136,7 @@ export function registerWorkspaceRoutes(app: FastifyInstance, deps: RouteDeps) {
   }>("/api/workspaces/:id/files/content", async (request, reply) => {
     try {
       const query = WorkspaceFileContentQuerySchema.parse(request.query ?? {})
-      return deps.workspaceManager.readFile(request.params.id, query.path)
+      return deps.workspaceManager.readFile(request.params.id, query.path, { encoding: query.encoding })
     } catch (error) {
       return handleWorkspaceError(error, reply)
     }
diff --git a/packages/server/src/workspaces/manager.ts b/packages/server/src/workspaces/manager.ts
index 063c2cbb..3ce25069 100644
--- a/packages/server/src/workspaces/manager.ts
+++ b/packages/server/src/workspaces/manager.ts
@@ -72,14 +72,16 @@ export class WorkspaceManager {
     return searchWorkspaceFiles(workspace.path, query, options)
   }
 
-  readFile(workspaceId: string, relativePath: string): WorkspaceFileResponse {
+  readFile(workspaceId: string, relativePath: string, options?: { encoding?: "utf-8" | "base64" }): WorkspaceFileResponse {
     const workspace = this.requireWorkspace(workspaceId)
     const browser = new FileSystemBrowser({ rootDir: workspace.path })
-    const contents = browser.readFile(relativePath)
+    const encoding = options?.encoding ?? "utf-8"
+    const contents = encoding === "base64" ? browser.readFileBase64(relativePath) : browser.readFile(relativePath)
     return {
       workspaceId,
       relativePath,
       contents,
+      encoding,
     }
   }
 
diff --git a/packages/ui/src/components/directory-browser-dialog.tsx b/packages/ui/src/components/directory-browser-dialog.tsx
index f45370ed..cf9f9d61 100644
--- a/packages/ui/src/components/directory-browser-dialog.tsx
+++ b/packages/ui/src/components/directory-browser-dialog.tsx
@@ -1,5 +1,5 @@
 import { Component, Show, For, createSignal, createMemo, createEffect, onCleanup } from "solid-js"
-import { ArrowRightSquare, ArrowUpLeft, Folder as FolderIcon, FolderPlus, Loader2, X } from "lucide-solid"
+import { ArrowRightSquare, ArrowUpLeft, File as FileIcon, Folder as FolderIcon, FolderPlus, Loader2, X } from "lucide-solid"
 import type { FileSystemEntry, FileSystemListingMetadata } from "../../../server/src/api-types"
 import { WINDOWS_DRIVES_ROOT } from "../../../server/src/api-types"
 import { serverApi } from "../lib/api-client"
@@ -36,10 +36,11 @@ function isAbsolutePathLike(input: string) {
 
 interface DirectoryBrowserDialogProps {
   open: boolean
+  mode?: "directories" | "files"
   title: string
   description?: string
   initialPath?: string
-  onSelect: (absolutePath: string) => void
+  onSelect: (absolutePath: string, entry?: FileSystemEntry) => void
   onClose: () => void
 }
 
@@ -71,7 +72,7 @@ function getAbsolutePathFromMetadata(metadata: FileSystemListingMetadata | null)
 
 type FolderRow =
   | { type: "up"; path: string }
-  | { type: "folder"; entry: FileSystemEntry }
+  | { type: "entry"; entry: FileSystemEntry }
 
 const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) => {
   const { t } = useI18n()
@@ -171,15 +172,20 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
         })
       }
 
-      const response = await serverApi.listFileSystem(targetPath, { includeFiles: false })
+      const response = await serverApi.listFileSystem(targetPath, { includeFiles: props.mode === "files" })
       const canonicalKey = normalizePathKey(response.metadata.currentPath)
-      const directories = response.entries
-        .filter((entry) => entry.type === "directory")
-        .sort((a, b) => a.name.localeCompare(b.name))
+      const entries = response.entries
+        .filter((entry) => props.mode === "files" || entry.type === "directory")
+        .sort((a, b) => {
+          const aDirectory = a.type === "directory" ? 0 : 1
+          const bDirectory = b.type === "directory" ? 0 : 1
+          if (aDirectory !== bDirectory) return aDirectory - bDirectory
+          return a.name.localeCompare(b.name)
+        })
 
       setDirectoryChildren((prev) => {
         const next = new Map(prev)
-        next.set(canonicalKey, directories)
+        next.set(canonicalKey, entries)
         return next
       })
 
@@ -251,7 +257,7 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
     }
     const children = directoryChildren().get(key) ?? []
     for (const entry of children) {
-      rows.push({ type: "folder", entry })
+      rows.push({ type: "entry", entry })
     }
     return rows
   })
@@ -296,7 +302,7 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
     setPathInput(getAbsolutePathFromMetadata(metadata))
   }
 
-  async function handleSelectCurrent() {
+  async function handleOpenCurrent() {
     const target = pathInput().trim()
     const metadata = target && target !== currentAbsolutePath() ? await navigateTo(target) : currentMetadata()
     if (!metadata) {
@@ -304,7 +310,7 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
     }
     setPathInputDirty(false)
     const absolute = getAbsolutePathFromMetadata(metadata)
-    if (absolute) {
+    if (absolute && props.mode !== "files") {
       setPathInput(absolute)
       props.onSelect(absolute)
     }
@@ -316,7 +322,7 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
       : isAbsolutePathLike(entry.path)
         ? entry.path
         : resolveAbsolutePath(rootPath(), entry.path)
-    props.onSelect(absolutePath)
+    props.onSelect(absolutePath, entry)
   }
 
   async function handleCreateFolder() {
@@ -417,22 +423,24 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
                     aria-label={t("directoryBrowser.currentFolder.inputAriaLabel")}
                     class="selector-input directory-browser-current-path"
                   />
-                  <button
-                    type="button"
-                    class="selector-button selector-button-secondary directory-browser-select directory-browser-new-folder"
-                    disabled={!canSelectCurrent() || creatingFolder()}
-                    onClick={() => void handleCreateFolder()}
-                  >
-                    <span class="inline-flex items-center gap-2">
-                      <FolderPlus class="w-4 h-4" />
-                      {creatingFolder() ? t("directoryBrowser.creating") : t("directoryBrowser.newFolder")}
-                    </span>
-                  </button>
+                  <Show when={props.mode !== "files"}>
+                    <button
+                      type="button"
+                      class="selector-button selector-button-secondary directory-browser-select directory-browser-new-folder"
+                      disabled={!canSelectCurrent() || creatingFolder()}
+                      onClick={() => void handleCreateFolder()}
+                    >
+                      <span class="inline-flex items-center gap-2">
+                        <FolderPlus class="w-4 h-4" />
+                        {creatingFolder() ? t("directoryBrowser.creating") : t("directoryBrowser.newFolder")}
+                      </span>
+                    </button>
+                  </Show>
                   <button
                     type="button"
                     class="selector-button selector-button-secondary directory-browser-open-path"
                     disabled={(!canSelectCurrent() && !canSubmitPath()) || creatingFolder()}
-                    onClick={() => void handleSelectCurrent()}
+                    onClick={() => void handleOpenCurrent()}
                     title={t("directoryBrowser.openCurrent")}
                     aria-label={t("directoryBrowser.openCurrent")}
                   >
@@ -461,32 +469,46 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
                   <div class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto directory-browser-list" role="listbox">
                     <For each={folderRows()}>
                       {(item) => {
-                        const isFolder = item.type === "folder"
-                        const label = isFolder ? item.entry.name || item.entry.path : t("directoryBrowser.upOneLevel")
-                        const navigate = () => (isFolder ? handleNavigateTo(item.entry.path) : handleNavigateUp())
+                        const isEntry = item.type === "entry"
+                        const isFolder = isEntry && item.entry.type === "directory"
+                        const isSelectable = isEntry && (props.mode === "files" ? item.entry.type === "file" : item.entry.type === "directory")
+                        const label = isEntry ? item.entry.name || item.entry.path : t("directoryBrowser.upOneLevel")
+                        const navigate = () => {
+                          if (!isEntry) {
+                            handleNavigateUp()
+                            return
+                          }
+                          if (item.entry.type === "directory") {
+                            handleNavigateTo(item.entry.path)
+                            return
+                          }
+                          handleEntrySelect(item.entry)
+                        }
                         return (
                           <div class="panel-list-item" role="option">
                             <div class="panel-list-item-content directory-browser-row">
                               <button type="button" class="directory-browser-row-main" onClick={navigate}>
                                 <div class="directory-browser-row-icon">
                                   <Show when={!isFolder} fallback={<FolderIcon class="w-4 h-4" />}>
-                                    <ArrowUpLeft class="w-4 h-4" />
+                                    <Show when={isEntry} fallback={<ArrowUpLeft class="w-4 h-4" />}>
+                                      <FileIcon class="w-4 h-4" />
+                                    </Show>
                                   </Show>
                                 </div>
                                 <div class="directory-browser-row-text">
                                   <span class="directory-browser-row-name">{label}</span>
                                 </div>
-                                <Show when={isFolder && isPathLoading(item.entry.path)}>
+                                <Show when={isFolder && isEntry && isPathLoading(item.entry.path)}>
                                   <Loader2 class="directory-browser-row-spinner animate-spin" />
                                 </Show>
                               </button>
-                              {isFolder ? (
+                              {isSelectable ? (
                                 <button
                                   type="button"
                                   class="selector-button selector-button-secondary directory-browser-select"
                                   onClick={(event) => {
                                     event.stopPropagation()
-                                    handleEntrySelect(item.entry)
+                                    if (isEntry) handleEntrySelect(item.entry)
                                   }}
                                 >
                                   {t("directoryBrowser.select")}
diff --git a/packages/ui/src/components/filesystem-browser-dialog.tsx b/packages/ui/src/components/filesystem-browser-dialog.tsx
deleted file mode 100644
index 3590c247..00000000
--- a/packages/ui/src/components/filesystem-browser-dialog.tsx
+++ /dev/null
@@ -1,485 +0,0 @@
-import { Component, Show, For, createSignal, createMemo, createEffect, onCleanup } from "solid-js"
-import { Folder as FolderIcon, File as FileIcon, Loader2, Search, X, ArrowUpLeft } from "lucide-solid"
-import type { FileSystemEntry, FileSystemListingMetadata } from "../../../server/src/api-types"
-import { serverApi } from "../lib/api-client"
-import { getLogger } from "../lib/logger"
-import { useI18n } from "../lib/i18n"
-const log = getLogger("actions")
-
-
-const MAX_RESULTS = 200
-
-function isAbsolutePathLike(input: string): boolean {
-  return input.startsWith("/") || /^[a-zA-Z]:/.test(input) || input.startsWith("\\\\")
-}
-
-function normalizeEntryPath(path: string | undefined): string {
-  if (!path || path === "." || path === "./") {
-    return "."
-  }
-  // Preserve absolute paths as-is (POSIX "/...", Windows "C:\..." or UNC "\\...").
-  // The server accepts absolute paths for unrestricted and multi-root listings,
-  // and stripping the leading "/" would make it resolve as relative to the root.
-  if (isAbsolutePathLike(path)) {
-    // Only collapse duplicate slashes in POSIX absolute paths; leave Windows
-    // and UNC separators untouched so the server can round-trip them.
-    if (path.startsWith("/")) {
-      return path.replace(/\/+/g, "/")
-    }
-    return path
-  }
-  let cleaned = path.replace(/\\/g, "/")
-  if (cleaned.startsWith("./")) {
-    cleaned = cleaned.replace(/^\.\/+/, "")
-  }
-  cleaned = cleaned.replace(/\/+/g, "/")
-  return cleaned === "" ? "." : cleaned
-}
-
-function resolveAbsolutePath(root: string, relativePath: string): string {
-  if (!relativePath || relativePath === "." || relativePath === "./") {
-    return root
-  }
-  if (isAbsolutePathLike(relativePath)) {
-    return relativePath
-  }
-  if (!root) {
-    return relativePath
-  }
-  const separator = root.includes("\\") ? "\\" : "/"
-  const trimmedRoot = root.endsWith(separator) ? root : `${root}${separator}`
-  const normalized = relativePath.replace(/[\\/]+/g, separator).replace(/^[\\/]+/, "")
-  return `${trimmedRoot}${normalized}`
-}
-
-function entryAbsolutePath(root: string, entry: FileSystemEntry): string {
-  if (entry.absolutePath) return entry.absolutePath
-  if (isAbsolutePathLike(entry.path)) return entry.path
-  return resolveAbsolutePath(root, entry.path)
-}
-
-
-interface FileSystemBrowserDialogProps {
-  open: boolean
-  mode: "directories" | "files"
-  title: string
-  description?: string
-  onSelect: (absolutePath: string) => void
-  onClose: () => void
-}
-
-type FolderRow = { type: "up"; path: string } | { type: "entry"; entry: FileSystemEntry }
-
-const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props) => {
-  const { t } = useI18n()
-  const [rootPath, setRootPath] = createSignal("")
-  const [entries, setEntries] = createSignal<FileSystemEntry[]>([])
-  const [currentMetadata, setCurrentMetadata] = createSignal<FileSystemListingMetadata | null>(null)
-  const [loadingPath, setLoadingPath] = createSignal<string | null>(null)
-  const [error, setError] = createSignal<string | null>(null)
-  const [searchQuery, setSearchQuery] = createSignal("")
-  const [selectedIndex, setSelectedIndex] = createSignal(0)
-
-  let searchInputRef: HTMLInputElement | undefined
-
-  const directoryCache = new Map<string, FileSystemEntry[]>()
-  const metadataCache = new Map<string, FileSystemListingMetadata>()
-  const inFlightLoads = new Map<string, Promise<FileSystemListingMetadata>>()
-
-  function resetDialogState() {
-    directoryCache.clear()
-    metadataCache.clear()
-    inFlightLoads.clear()
-    setEntries([])
-    setCurrentMetadata(null)
-    setLoadingPath(null)
-  }
-
-  async function fetchDirectory(path: string, makeCurrent = false): Promise<FileSystemListingMetadata> {
-    const normalized = normalizeEntryPath(path)
-
-    if (directoryCache.has(normalized) && metadataCache.has(normalized)) {
-      if (makeCurrent) {
-        setCurrentMetadata(metadataCache.get(normalized) ?? null)
-        setEntries(directoryCache.get(normalized) ?? [])
-      }
-      return metadataCache.get(normalized) as FileSystemListingMetadata
-    }
-
-    if (inFlightLoads.has(normalized)) {
-      const metadata = await inFlightLoads.get(normalized)!
-      if (makeCurrent) {
-        setCurrentMetadata(metadata)
-        setEntries(directoryCache.get(normalized) ?? [])
-      }
-      return metadata
-    }
-
-    const loadPromise = (async () => {
-      setLoadingPath(normalized)
-      const response = await serverApi.listFileSystem(normalized === "." ? "." : normalized, {
-        includeFiles: props.mode === "files",
-      })
-      directoryCache.set(normalized, response.entries)
-      metadataCache.set(normalized, response.metadata)
-      if (!rootPath()) {
-        setRootPath(response.metadata.rootPath)
-      }
-      if (loadingPath() === normalized) {
-        setLoadingPath(null)
-      }
-      return response.metadata
-    })().catch((err) => {
-      if (loadingPath() === normalized) {
-        setLoadingPath(null)
-      }
-      throw err
-    })
-
-    inFlightLoads.set(normalized, loadPromise)
-    try {
-      const metadata = await loadPromise
-      if (makeCurrent) {
-        const key = normalizeEntryPath(metadata.currentPath)
-        setCurrentMetadata(metadata)
-        setEntries(directoryCache.get(key) ?? directoryCache.get(normalized) ?? [])
-      }
-      return metadata
-    } finally {
-      inFlightLoads.delete(normalized)
-    }
-  }
-
-  async function refreshEntries() {
-    setError(null)
-    resetDialogState()
-    try {
-      const metadata = await fetchDirectory(".", true)
-      setRootPath(metadata.rootPath)
-      setEntries(directoryCache.get(normalizeEntryPath(metadata.currentPath)) ?? [])
-    } catch (err) {
-      const message = err instanceof Error ? err.message : t("filesystemBrowser.errors.loadFilesystemFallback")
-      setError(message)
-    }
-  }
-
-  function describeLoadingPath() {
-    const path = loadingPath()
-    if (!path) {
-      return t("filesystemBrowser.loading.filesystem")
-    }
-    if (path === ".") {
-      return rootPath() || t("filesystemBrowser.loading.workspaceRoot")
-    }
-    return resolveAbsolutePath(rootPath(), path)
-  }
-
-  function currentAbsolutePath(): string {
-    const metadata = currentMetadata()
-    if (!metadata) {
-      return rootPath()
-    }
-    if (metadata.pathKind === "drives") {
-      return ""
-    }
-    if (metadata.pathKind === "relative") {
-      return resolveAbsolutePath(rootPath(), metadata.currentPath)
-    }
-    return metadata.displayPath
-  }
-
-  function handleOverlayClick(event: MouseEvent) {
-    if (event.target === event.currentTarget) {
-      props.onClose()
-    }
-  }
-
-  function handleEntrySelect(entry: FileSystemEntry) {
-    props.onSelect(entryAbsolutePath(rootPath(), entry))
-  }
-
-  function handleNavigateTo(path: string) {
-    void fetchDirectory(path, true).catch((err) => {
-      log.error("Failed to open directory", err)
-      setError(err instanceof Error ? err.message : t("filesystemBrowser.errors.openDirectoryFallback"))
-    })
-  }
-
-  function handleNavigateUp() {
-    const parent = currentMetadata()?.parentPath
-    if (!parent) {
-      return
-    }
-    handleNavigateTo(parent)
-  }
-
-  const filteredEntries = createMemo(() => {
-    const query = searchQuery().trim().toLowerCase()
-    const subset = entries().filter((entry) => (props.mode === "directories" ? entry.type === "directory" : true))
-    if (!query) {
-      return subset
-    }
-    return subset.filter((entry) => {
-      const absolute = entryAbsolutePath(rootPath(), entry)
-      return absolute.toLowerCase().includes(query) || entry.name.toLowerCase().includes(query)
-    })
-  })
-
-  const visibleEntries = createMemo(() => filteredEntries().slice(0, MAX_RESULTS))
-
-  const folderRows = createMemo<FolderRow[]>(() => {
-    const rows: FolderRow[] = []
-    const metadata = currentMetadata()
-    if (metadata?.parentPath) {
-      rows.push({ type: "up", path: metadata.parentPath })
-    }
-    for (const entry of visibleEntries()) {
-      rows.push({ type: "entry", entry })
-    }
-    return rows
-  })
-
-  createEffect(() => {
-    const list = visibleEntries()
-    if (list.length === 0) {
-      setSelectedIndex(0)
-      return
-    }
-    if (selectedIndex() >= list.length) {
-      setSelectedIndex(list.length - 1)
-    }
-  })
-
-  createEffect(() => {
-    if (!props.open) {
-      return
-    }
-    setSearchQuery("")
-    setSelectedIndex(0)
-    void refreshEntries()
-    setTimeout(() => searchInputRef?.focus(), 50)
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (!props.open) return
-      const results = visibleEntries()
-      if (event.key === "Escape") {
-        event.preventDefault()
-        props.onClose()
-        return
-      }
-      if (results.length === 0) {
-        return
-      }
-      if (event.key === "ArrowDown") {
-        event.preventDefault()
-        setSelectedIndex((prev) => Math.min(prev + 1, results.length - 1))
-      } else if (event.key === "ArrowUp") {
-        event.preventDefault()
-        setSelectedIndex((prev) => Math.max(prev - 1, 0))
-      } else if (event.key === "Enter") {
-        event.preventDefault()
-        const entry = results[selectedIndex()]
-        if (entry) {
-          handleEntrySelect(entry)
-        }
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown)
-    onCleanup(() => {
-      window.removeEventListener("keydown", handleKeyDown)
-      resetDialogState()
-      setRootPath("")
-      setError(null)
-    })
-  })
-
-  return (
-    <Show when={props.open}>
-      <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-6" onClick={handleOverlayClick}>
-        <div class="modal-surface max-h-full w-full max-w-3xl overflow-hidden rounded-xl bg-surface p-0" role="dialog" aria-modal="true">
-          <div class="panel flex flex-col">
-            <div class="panel-header flex items-start justify-between gap-4">
-              <div>
-                <h3 class="panel-title">{props.title}</h3>
-                <p class="panel-subtitle">{props.description || t("filesystemBrowser.descriptionFallback")}</p>
-                <Show when={rootPath()}>
-                  <p class="text-xs text-muted mt-1 font-mono break-all">
-                    {t("filesystemBrowser.rootLabel", { root: rootPath() })}
-                  </p>
-                </Show>
-              </div>
-              <button type="button" class="selector-button selector-button-secondary" onClick={props.onClose}>
-                <X class="w-4 h-4" />
-                {t("filesystemBrowser.actions.close")}
-              </button>
-            </div>
-
-            <div class="panel-body">
-              <label class="w-full text-sm text-secondary mb-2 block">{t("filesystemBrowser.filterLabel")}</label>
-              <div class="selector-input-group">
-                <div class="flex items-center gap-2 px-3 text-muted">
-                  <Search class="w-4 h-4" />
-                </div>
-                <input
-                  ref={(el) => {
-                    searchInputRef = el
-                  }}
-                  type="text"
-                  value={searchQuery()}
-                  onInput={(event) => setSearchQuery(event.currentTarget.value)}
-                  placeholder={
-                    props.mode === "directories"
-                      ? t("filesystemBrowser.search.placeholder.directories")
-                      : t("filesystemBrowser.search.placeholder.files")
-                  }
-                  class="selector-input"
-                />
-              </div>
-            </div>
-
-            <Show when={props.mode === "directories"}>
-              <div class="px-4 pb-2">
-                <div class="flex items-center justify-between gap-3 rounded-md border border-border-subtle px-4 py-3">
-                  <div>
-                    <p class="text-xs text-secondary uppercase tracking-wide">{t("filesystemBrowser.currentFolder.label")}</p>
-                    <p class="text-sm font-mono text-primary break-all">{currentAbsolutePath()}</p>
-                  </div>
-                  <button
-                    type="button"
-                    class="selector-button selector-button-secondary whitespace-nowrap"
-                    disabled={!currentAbsolutePath()}
-                    onClick={() => {
-                      const abs = currentAbsolutePath()
-                      if (abs) props.onSelect(abs)
-                    }}
-                  >
-                    {t("filesystemBrowser.currentFolder.selectCurrent")}
-                  </button>
-                </div>
-              </div>
-            </Show>
-
-            <div class="panel-list panel-list--fill max-h-96 overflow-auto">
-              <Show
-                when={entries().length > 0}
-                fallback={
-                  <div class="flex items-center justify-center py-6 text-sm text-secondary">
-                    <Show
-                      when={loadingPath() !== null}
-                      fallback={<span class="text-red-500">{error()}</span>}
-                    >
-                      <div class="flex items-center gap-2">
-                        <Loader2 class="w-4 h-4 animate-spin" />
-                        <span>{t("filesystemBrowser.loading.loadingWithPath", { path: describeLoadingPath() })}</span>
-                      </div>
-                    </Show>
-                  </div>
-                }
-              >
-                <Show when={loadingPath()}>
-                  <div class="flex items-center gap-2 px-4 py-2 text-xs text-secondary">
-                    <Loader2 class="w-3.5 h-3.5 animate-spin" />
-                    <span>{t("filesystemBrowser.loading.loadingWithPath", { path: describeLoadingPath() })}</span>
-                  </div>
-                </Show>
-                <Show
-                  when={folderRows().length > 0}
-                  fallback={
-                    <div class="flex flex-col items-center justify-center gap-2 py-10 text-sm text-secondary">
-                      <p>{t("filesystemBrowser.empty.noEntries")}</p>
-                      <button type="button" class="selector-button selector-button-secondary" onClick={refreshEntries}>
-                        {t("filesystemBrowser.actions.retry")}
-                      </button>
-                    </div>
-                  }
-                >
-                  <For each={folderRows()}>
-                    {(row) => {
-                      if (row.type === "up") {
-                        return (
-                          <div class="panel-list-item" role="button">
-                            <div class="panel-list-item-content directory-browser-row">
-                              <button type="button" class="directory-browser-row-main" onClick={handleNavigateUp}>
-                                <div class="directory-browser-row-icon">
-                                  <ArrowUpLeft class="w-4 h-4" />
-                                </div>
-                                <div class="directory-browser-row-text">
-                                  <span class="directory-browser-row-name">{t("filesystemBrowser.navigation.upOneLevel")}</span>
-                                </div>
-                              </button>
-                            </div>
-                          </div>
-                        )
-                      }
-
-                      const entry = row.entry
-                      const selectEntry = () => handleEntrySelect(entry)
-                      const activateEntry = () => {
-                        if (entry.type === "directory") {
-                          handleNavigateTo(entry.path)
-                        } else {
-                          selectEntry()
-                        }
-                      }
-
-                      return (
-                        <div class="panel-list-item" role="listitem">
-                          <div class="panel-list-item-content directory-browser-row">
-                            <button type="button" class="directory-browser-row-main" onClick={activateEntry}>
-                              <div class="directory-browser-row-icon">
-                                <Show when={entry.type === "directory"} fallback={<FileIcon class="w-4 h-4" />}>
-                                  <FolderIcon class="w-4 h-4" />
-                                </Show>
-                              </div>
-                              <div class="directory-browser-row-text">
-                                <span class="directory-browser-row-name">{entry.name || entry.path}</span>
-                                <span class="directory-browser-row-sub">
-                                  {entryAbsolutePath(rootPath(), entry)}
-                                </span>
-                              </div>
-                            </button>
-                            <button
-                              type="button"
-                              class="selector-button selector-button-secondary directory-browser-select"
-                              onClick={(event) => {
-                                event.stopPropagation()
-                                selectEntry()
-                              }}
-                            >
-                              {t("filesystemBrowser.actions.select")}
-                            </button>
-                          </div>
-                        </div>
-                      )
-                    }}
-                  </For>
-                </Show>
-              </Show>
-            </div>
-
-            <div class="panel-footer keyboard-hints">
-              <div class="panel-footer-hints">
-                <div class="flex items-center gap-1.5">
-                  <kbd class="kbd">↑</kbd>
-                  <kbd class="kbd">↓</kbd>
-                  <span>{t("filesystemBrowser.hints.navigate")}</span>
-                </div>
-                <div class="flex items-center gap-1.5">
-                  <kbd class="kbd">Enter</kbd>
-                  <span>{t("filesystemBrowser.hints.select")}</span>
-                </div>
-                <div class="flex items-center gap-1.5">
-                  <kbd class="kbd">Esc</kbd>
-                  <span>{t("filesystemBrowser.hints.close")}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Show>
-  )
-}
-
-export default FileSystemBrowserDialog
diff --git a/packages/ui/src/components/opencode-binary-selector.tsx b/packages/ui/src/components/opencode-binary-selector.tsx
index ad906835..c799f703 100644
--- a/packages/ui/src/components/opencode-binary-selector.tsx
+++ b/packages/ui/src/components/opencode-binary-selector.tsx
@@ -2,7 +2,7 @@ import { Component, For, Show, createEffect, createMemo, createSignal, onCleanup
 import { FolderOpen, Trash2, Check, AlertCircle, Loader2, Plus } from "lucide-solid"
 import { useConfig } from "../stores/preferences"
 import { serverApi } from "../lib/api-client"
-import FileSystemBrowserDialog from "./filesystem-browser-dialog"
+import DirectoryBrowserDialog from "./directory-browser-dialog"
 import { openNativeFileDialog, supportsNativeDialogsInCurrentWindow } from "../lib/native/native-functions"
 import { useI18n } from "../lib/i18n"
 import { getLogger } from "../lib/logger"
@@ -341,7 +341,7 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
         </div>
       </div>
 
-      <FileSystemBrowserDialog
+      <DirectoryBrowserDialog
         open={isBinaryBrowserOpen()}
         mode="files"
         title={t("opencodeBinarySelector.dialog.title")}
diff --git a/packages/ui/src/components/prompt-input.tsx b/packages/ui/src/components/prompt-input.tsx
index 686fcc87..aed879ea 100644
--- a/packages/ui/src/components/prompt-input.tsx
+++ b/packages/ui/src/components/prompt-input.tsx
@@ -1,5 +1,5 @@
 import { Suspense, createEffect, createSignal, lazy, on, onCleanup, Show } from "solid-js"
-import { ArrowBigUp, ArrowBigDown, Loader2, Mic, Volume2, X } from "lucide-solid"
+import { ArrowBigUp, ArrowBigDown, Loader2, Mic, Paperclip, Volume2, X } from "lucide-solid"
 import ExpandButton from "./expand-button"
 import { clearAttachments, removeAttachment } from "../stores/attachments"
 import { resolvePastedPlaceholders } from "../lib/prompt-placeholders"
@@ -11,9 +11,13 @@ import { getCommands } from "../stores/commands"
 import { showAlertDialog } from "../stores/alerts"
 import { useI18n } from "../lib/i18n"
 import { getLogger } from "../lib/logger"
+import { serverApi } from "../lib/api-client"
+import { isDesktopHost, isLocalWindow } from "../lib/runtime-env"
 import { preferences } from "../stores/preferences"
 import type { ExpandState, PromptInputApi, PromptInputProps, PromptInsertMode, PromptMode } from "./prompt-input/types"
 import type { Attachment } from "../types/attachment"
+import type { FileSystemEntry } from "../../../server/src/api-types"
+import DirectoryBrowserDialog from "./directory-browser-dialog"
 import { usePromptState } from "./prompt-input/usePromptState"
 import { usePromptAttachments } from "./prompt-input/usePromptAttachments"
 import { usePromptPicker } from "./prompt-input/usePromptPicker"
@@ -61,8 +65,11 @@ export default function PromptInput(props: PromptInputProps) {
   const [, setIsFocused] = createSignal(false)
   const [mode, setMode] = createSignal<PromptMode>("normal")
   const [expandState, setExpandState] = createSignal<ExpandState>("normal")
+  const [isFileBrowserOpen, setIsFileBrowserOpen] = createSignal(false)
   const SELECTION_INSERT_MAX_LENGTH = 2000
+  const MAX_READABLE_PICKED_FILE_BYTES = 5 * 1024 * 1024
   let textareaRef: HTMLTextAreaElement | undefined
+  let fileInputRef: HTMLInputElement | undefined
 
   const getPlaceholder = () => {
     if (mode() === "shell") {
@@ -98,6 +105,8 @@ export default function PromptInput(props: PromptInputProps) {
     handleDragOver,
     handleDragLeave,
     handleDrop,
+    handleFileSelection,
+    handleFilePathAttachment,
     syncAttachmentCounters,
     handleExpandTextAttachment,
     handleRemoveAttachment,
@@ -108,6 +117,7 @@ export default function PromptInput(props: PromptInputProps) {
     prompt,
     setPrompt,
     getTextarea: () => textareaRef ?? null,
+    disabled: () => Boolean(props.disabled),
   })
 
   createEffect(() => {
@@ -390,6 +400,52 @@ export default function PromptInput(props: PromptInputProps) {
     textareaRef?.focus()
   }
 
+  async function handleAttachFiles() {
+    if (props.disabled) return
+    if (isDesktopHost() && isLocalWindow()) {
+      fileInputRef?.click()
+      return
+    }
+    setIsFileBrowserOpen(true)
+  }
+
+  async function handleFileBrowserSelect(path: string, entry?: FileSystemEntry) {
+    if (props.disabled) return
+    if (typeof entry?.size === "number" && entry.size > MAX_READABLE_PICKED_FILE_BYTES) {
+      showAlertDialog(t("promptInput.attachFiles.tooLarge.one"), {
+        title: t("promptInput.attachFiles.skipped.title"),
+        variant: "warning",
+      })
+      textareaRef?.focus()
+      return
+    }
+    try {
+      const filePath = entry?.path ?? path
+      const displayPath = entry?.absolutePath ?? path
+      const response = await serverApi.readFileSystemFile(filePath, { encoding: "base64" })
+      handleFilePathAttachment(displayPath, response.contents, { encoding: response.encoding })
+      setIsFileBrowserOpen(false)
+    } catch (error) {
+      log.error("Failed to attach selected file:", error)
+      showAlertDialog(error instanceof Error ? error.message : String(error), {
+        title: t("promptInput.attachFiles.errorTitle"),
+        variant: "error",
+      })
+    } finally {
+      textareaRef?.focus()
+    }
+  }
+
+  function handleFileInputChange(event: Event) {
+    const input = event.currentTarget as HTMLInputElement
+    if (props.disabled) {
+      input.value = ""
+      return
+    }
+    handleFileSelection(input.files)
+    input.value = ""
+  }
+
   function insertBlockContent(block: string) {
     const textarea = textareaRef
     const current = prompt()
@@ -707,6 +763,25 @@ export default function PromptInput(props: PromptInputProps) {
                   <Volume2 class="h-4 w-4" aria-hidden="true" />
                 </button>
               </Show>
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                class="sr-only"
+                tabindex="-1"
+                disabled={props.disabled}
+                onChange={handleFileInputChange}
+              />
+              <button
+                type="button"
+                class="prompt-attach-button"
+                onClick={handleAttachFiles}
+                disabled={props.disabled}
+                aria-label={t("promptInput.attachFiles.ariaLabel")}
+                title={t("promptInput.attachFiles.title")}
+              >
+                <Paperclip class="h-4 w-4" aria-hidden="true" />
+              </button>
               <button
                 type="button"
                 class="prompt-clear-button"
@@ -791,6 +866,18 @@ export default function PromptInput(props: PromptInputProps) {
           </button>
         </div>
       </div>
+
+      <DirectoryBrowserDialog
+        open={isFileBrowserOpen()}
+        mode="files"
+        title={t("promptInput.attachFiles.dialogTitle")}
+        onClose={() => {
+          setIsFileBrowserOpen(false)
+          textareaRef?.focus()
+        }}
+        onSelect={(path, entry) => void handleFileBrowserSelect(path, entry)}
+        initialPath={props.instanceFolder}
+      />
     </div>
   )
 }
diff --git a/packages/ui/src/components/prompt-input/usePromptAttachments.ts b/packages/ui/src/components/prompt-input/usePromptAttachments.ts
index d4a53b4e..99512199 100644
--- a/packages/ui/src/components/prompt-input/usePromptAttachments.ts
+++ b/packages/ui/src/components/prompt-input/usePromptAttachments.ts
@@ -2,6 +2,9 @@ import { createEffect, createSignal, type Accessor } from "solid-js"
 import { addAttachment, getAttachments, removeAttachment } from "../../stores/attachments"
 import { createFileAttachment, createTextAttachment } from "../../types/attachment"
 import type { Attachment } from "../../types/attachment"
+import { tGlobal } from "../../lib/i18n"
+import { getFilePath } from "../../lib/native/file-path"
+import { showToastNotification } from "../../lib/notifications"
 import {
   bracketedImageDisplayCounterRegex,
   findHighestAttachmentCounters,
@@ -18,6 +21,7 @@ type PromptAttachmentsOptions = {
   prompt: Accessor<string>
   setPrompt: (value: string) => void
   getTextarea: () => HTMLTextAreaElement | null
+  disabled?: Accessor<boolean>
 }
 
 type PromptAttachments = {
@@ -31,6 +35,8 @@ type PromptAttachments = {
   handleDragOver: (e: DragEvent) => void
   handleDragLeave: (e: DragEvent) => void
   handleDrop: (e: DragEvent) => void
+  handleFileSelection: (files: FileList | File[] | null) => void
+  handleFilePathAttachment: (path: string, contents: string, options?: { encoding?: "utf-8" | "base64" }) => void
 
   handleRemoveAttachment: (attachmentId: string) => void
   handleExpandTextAttachment: (attachment: Attachment) => void
@@ -41,6 +47,7 @@ export function usePromptAttachments(options: PromptAttachmentsOptions): PromptA
   const [isDragging, setIsDragging] = createSignal(false)
   const [pasteCount, setPasteCount] = createSignal(0)
   const [imageCount, setImageCount] = createSignal(0)
+  const MAX_READABLE_PICKED_FILE_BYTES = 5 * 1024 * 1024
 
   function syncAttachmentCounters(currentPrompt: string) {
     const { highestPaste, highestImage } = findHighestAttachmentCounters(currentPrompt)
@@ -295,59 +302,183 @@ export function usePromptAttachments(options: PromptAttachmentsOptions): PromptA
   function handleDragOver(e: DragEvent) {
     e.preventDefault()
     e.stopPropagation()
+    if (options.disabled?.()) {
+      setIsDragging(false)
+      return
+    }
     setIsDragging(true)
   }
 
-  function handleDragLeave(e: DragEvent) {
-    e.preventDefault()
-    e.stopPropagation()
-    setIsDragging(false)
+  function getFilenameFromPath(path: string) {
+    const normalized = path.replace(/\\/g, "/")
+    return normalized.split("/").pop() || path
   }
 
-  function handleDrop(e: DragEvent) {
+  function inferMimeTypeFromPath(path: string) {
+    const extension = path.split(/[\\/]/).pop()?.toLowerCase().match(/\.([^.]+)$/)?.[1]
+    if (!extension) return "application/octet-stream"
+
+    const imageMimeTypes: Record<string, string> = {
+      apng: "image/apng",
+      avif: "image/avif",
+      gif: "image/gif",
+      jpg: "image/jpeg",
+      jpeg: "image/jpeg",
+      png: "image/png",
+      svg: "image/svg+xml",
+      webp: "image/webp",
+    }
+    const textMimeTypes: Record<string, string> = {
+      bashrc: "text/plain",
+      c: "text/x-c",
+      config: "text/plain",
+      cpp: "text/x-c++src",
+      cs: "text/x-csharp",
+      css: "text/css",
+      csv: "text/csv",
+      env: "text/plain",
+      gitignore: "text/plain",
+      go: "text/x-go",
+      h: "text/x-c",
+      hpp: "text/x-c++hdr",
+      html: "text/html",
+      java: "text/x-java-source",
+      js: "text/javascript",
+      json: "application/json",
+      jsx: "text/javascript",
+      log: "text/plain",
+      md: "text/markdown",
+      mjs: "text/javascript",
+      py: "text/x-python",
+      rs: "text/x-rust",
+      sh: "text/x-shellscript",
+      toml: "text/toml",
+      ts: "text/typescript",
+      tsx: "text/typescript",
+      txt: "text/plain",
+      xml: "application/xml",
+      yaml: "application/yaml",
+      yml: "application/yaml",
+    }
+
+    return imageMimeTypes[extension] ?? textMimeTypes[extension] ?? "application/octet-stream"
+  }
+
+  function showSkippedFilesWarning(count: number) {
+    if (count <= 0) return
+    const messageKey = count === 1
+      ? "promptInput.attachFiles.skipped.one"
+      : "promptInput.attachFiles.skipped.other"
+    showToastNotification({
+      variant: "warning",
+      title: tGlobal("promptInput.attachFiles.skipped.title"),
+      message: tGlobal(messageKey, { count }),
+    })
+  }
+
+  function encodeBytesAsBase64(bytes: Uint8Array) {
+    let binary = ""
+    const chunkSize = 0x8000
+    for (let index = 0; index < bytes.length; index += chunkSize) {
+      const chunk = bytes.subarray(index, Math.min(index + chunkSize, bytes.length))
+      binary += String.fromCharCode(...chunk)
+    }
+    return btoa(binary)
+  }
+
+  function decodeBase64ToBytes(value: string) {
+    const binary = atob(value)
+    const bytes = new Uint8Array(binary.length)
+    for (let index = 0; index < binary.length; index++) {
+      bytes[index] = binary.charCodeAt(index)
+    }
+    return bytes
+  }
+
+  function attachFileData(path: string, filename: string, mime: string, data: Uint8Array, previewUrl?: string) {
+    const attachment = createFileAttachment(path, filename, mime, data, options.instanceFolder())
+    attachment.url = previewUrl ?? `data:${mime};base64,${encodeBytesAsBase64(data)}`
+    addAttachment(options.instanceId(), options.sessionId(), attachment)
+  }
+
+  function handleFilePathAttachment(path: string, contents: string, attachmentOptions?: { encoding?: "utf-8" | "base64" }) {
+    if (options.disabled?.()) return
+    if (!path || path.trim().length === 0) return
+
+    const filename = getFilenameFromPath(path)
+    const mime = inferMimeTypeFromPath(path)
+    const data = attachmentOptions?.encoding === "base64" ? decodeBase64ToBytes(contents) : new TextEncoder().encode(contents)
+    attachFileData(path, filename, mime, data)
+    options.getTextarea()?.focus()
+  }
+
+  function handleDragLeave(e: DragEvent) {
     e.preventDefault()
     e.stopPropagation()
     setIsDragging(false)
+  }
 
-    const files = e.dataTransfer?.files
+  function handleFileSelection(files: FileList | File[] | null) {
+    if (options.disabled?.()) return
     if (!files || files.length === 0) return
 
+    let skippedCount = 0
+
     for (let i = 0; i < files.length; i++) {
       const file = files[i]
-      const path = (file as File & { path?: string }).path || file.name
+      const nativePath = getFilePath(file)
       const filename = file.name
-      const mime = file.type || "text/plain"
+      const mime = file.type || "application/octet-stream"
+      const canReadFileData = file.size <= MAX_READABLE_PICKED_FILE_BYTES
 
-      const createAndStoreAttachment = (previewUrl?: string) => {
-        const attachment = createFileAttachment(path, filename, mime, undefined, options.instanceFolder())
-        if (previewUrl && (mime.startsWith("image/") || mime.startsWith("text/"))) {
+      if (!nativePath && !canReadFileData) {
+        skippedCount += 1
+        continue
+      }
+
+      const path = nativePath || filename
+
+      const createAndStoreAttachment = (previewUrl?: string, data?: Uint8Array) => {
+        const attachment = createFileAttachment(path, filename, mime, data, options.instanceFolder())
+        if (previewUrl) {
           attachment.url = previewUrl
         }
         addAttachment(options.instanceId(), options.sessionId(), attachment)
       }
 
-      if (mime.startsWith("image/") && typeof FileReader !== "undefined") {
+      if (canReadFileData && typeof FileReader !== "undefined") {
         const reader = new FileReader()
         reader.onload = () => {
-          const result = typeof reader.result === "string" ? reader.result : undefined
-          createAndStoreAttachment(result)
+          const result = reader.result instanceof ArrayBuffer ? new Uint8Array(reader.result) : undefined
+          const previewUrl = result ? `data:${mime};base64,${encodeBytesAsBase64(result)}` : undefined
+          createAndStoreAttachment(previewUrl, result)
         }
-        reader.readAsDataURL(file)
-      } else if (mime.startsWith("text/") && typeof FileReader !== "undefined") {
-        const reader = new FileReader()
-        reader.onload = () => {
-          const dataUrl = typeof reader.result === "string" ? reader.result : undefined
-          createAndStoreAttachment(dataUrl)
+        reader.onerror = () => {
+          if (nativePath) {
+            createAndStoreAttachment()
+          }
         }
-        reader.readAsDataURL(file)
+        reader.readAsArrayBuffer(file)
       } else {
         createAndStoreAttachment()
       }
     }
 
+    showSkippedFilesWarning(skippedCount)
+
     options.getTextarea()?.focus()
   }
 
+  function handleDrop(e: DragEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(false)
+
+    if (options.disabled?.()) return
+
+    handleFileSelection(e.dataTransfer?.files ?? null)
+  }
+
   return {
     attachments,
     pasteCount,
@@ -358,6 +489,8 @@ export function usePromptAttachments(options: PromptAttachmentsOptions): PromptA
     handleDragOver,
     handleDragLeave,
     handleDrop,
+    handleFileSelection,
+    handleFilePathAttachment,
     handleRemoveAttachment,
     handleExpandTextAttachment,
   }
diff --git a/packages/ui/src/lib/api-client.ts b/packages/ui/src/lib/api-client.ts
index b5769e94..e9acec27 100644
--- a/packages/ui/src/lib/api-client.ts
+++ b/packages/ui/src/lib/api-client.ts
@@ -5,6 +5,7 @@ import type {
   BinaryValidationResult,
   FileSystemEntry,
   FileSystemCreateFolderResponse,
+  FileSystemFileContentResponse,
   FileSystemListResponse,
   InstanceData,
   SpeechCapabilitiesResponse,
@@ -322,8 +323,11 @@ export const serverApi = {
       `/api/workspaces/${encodeURIComponent(id)}/files/search?${params.toString()}`,
     )
   },
-  readWorkspaceFile(id: string, relativePath: string): Promise<WorkspaceFileResponse> {
+  readWorkspaceFile(id: string, relativePath: string, options?: { encoding?: "utf-8" | "base64" }): Promise<WorkspaceFileResponse> {
     const params = new URLSearchParams({ path: relativePath })
+    if (options?.encoding) {
+      params.set("encoding", options.encoding)
+    }
     return request<WorkspaceFileResponse>(
       `/api/workspaces/${encodeURIComponent(id)}/files/content?${params.toString()}`,
     )
@@ -454,6 +458,13 @@ export const serverApi = {
       body: JSON.stringify({ parentPath, name }),
     })
   },
+  readFileSystemFile(path: string, options?: { encoding?: "utf-8" | "base64" }): Promise<FileSystemFileContentResponse> {
+    const params = new URLSearchParams({ path })
+    if (options?.encoding) {
+      params.set("encoding", options.encoding)
+    }
+    return request<FileSystemFileContentResponse>(`/api/filesystem/files/content?${params.toString()}`)
+  },
   readInstanceData(id: string): Promise<InstanceData> {
     return request<InstanceData>(`/api/storage/instances/${encodeURIComponent(id)}`)
   },
diff --git a/packages/ui/src/lib/i18n/messages/en/messaging.ts b/packages/ui/src/lib/i18n/messages/en/messaging.ts
index 03c3cc0e..13db40df 100644
--- a/packages/ui/src/lib/i18n/messages/en/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/en/messaging.ts
@@ -156,6 +156,14 @@ export const messagingMessages = {
   "promptInput.overlay.againToAbort": "again to abort session",
   "promptInput.stopSession.ariaLabel": "Stop session",
   "promptInput.stopSession.title": "Stop session",
+  "promptInput.attachFiles.ariaLabel": "Attach files",
+  "promptInput.attachFiles.title": "Attach files",
+  "promptInput.attachFiles.dialogTitle": "Attach files",
+  "promptInput.attachFiles.errorTitle": "Attach failed",
+  "promptInput.attachFiles.skipped.title": "Some files were not attached",
+  "promptInput.attachFiles.skipped.one": "1 selected file could not be attached because this environment did not expose a file path or supported preview data.",
+  "promptInput.attachFiles.skipped.other": "{count} selected files could not be attached because this environment did not expose file paths or supported preview data.",
+  "promptInput.attachFiles.tooLarge.one": "1 selected file could not be attached because it is larger than the 5 MB attachment limit.",
   "promptInput.clear.ariaLabel": "Clear prompt text",
   "promptInput.clear.title": "Clear prompt text",
   "promptInput.send.ariaLabel": "Send message",
diff --git a/packages/ui/src/lib/i18n/messages/es/messaging.ts b/packages/ui/src/lib/i18n/messages/es/messaging.ts
index d4e79ce2..95ae3924 100644
--- a/packages/ui/src/lib/i18n/messages/es/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/es/messaging.ts
@@ -158,6 +158,14 @@ export const messagingMessages = {
   "promptInput.overlay.againToAbort": "otra vez para abortar la sesión",
   "promptInput.stopSession.ariaLabel": "Detener sesión",
   "promptInput.stopSession.title": "Detener sesión",
+  "promptInput.attachFiles.ariaLabel": "Adjuntar archivos",
+  "promptInput.attachFiles.title": "Adjuntar archivos",
+  "promptInput.attachFiles.dialogTitle": "Adjuntar archivos",
+  "promptInput.attachFiles.errorTitle": "No se pudo adjuntar",
+  "promptInput.attachFiles.skipped.title": "Algunos archivos no se adjuntaron",
+  "promptInput.attachFiles.skipped.one": "No se pudo adjuntar 1 archivo seleccionado porque este entorno no expuso una ruta de archivo ni datos de vista previa compatibles.",
+  "promptInput.attachFiles.skipped.other": "No se pudieron adjuntar {count} archivos seleccionados porque este entorno no expuso rutas de archivo ni datos de vista previa compatibles.",
+  "promptInput.attachFiles.tooLarge.one": "No se pudo adjuntar 1 archivo seleccionado porque supera el limite de adjuntos de 5 MB.",
   "promptInput.clear.ariaLabel": "Borrar el texto del prompt",
   "promptInput.clear.title": "Borrar el texto del prompt",
   "promptInput.send.ariaLabel": "Enviar mensaje",
diff --git a/packages/ui/src/lib/i18n/messages/fr/messaging.ts b/packages/ui/src/lib/i18n/messages/fr/messaging.ts
index 4dd33c0a..5400f261 100644
--- a/packages/ui/src/lib/i18n/messages/fr/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/messaging.ts
@@ -158,6 +158,14 @@ export const messagingMessages = {
   "promptInput.overlay.againToAbort": "à nouveau pour interrompre la session",
   "promptInput.stopSession.ariaLabel": "Arrêter la session",
   "promptInput.stopSession.title": "Arrêter la session",
+  "promptInput.attachFiles.ariaLabel": "Joindre des fichiers",
+  "promptInput.attachFiles.title": "Joindre des fichiers",
+  "promptInput.attachFiles.dialogTitle": "Joindre des fichiers",
+  "promptInput.attachFiles.errorTitle": "Echec de la piece jointe",
+  "promptInput.attachFiles.skipped.title": "Certains fichiers n'ont pas ete joints",
+  "promptInput.attachFiles.skipped.one": "1 fichier selectionne n'a pas pu etre joint car cet environnement n'a fourni ni chemin de fichier ni donnees de previsualisation compatibles.",
+  "promptInput.attachFiles.skipped.other": "{count} fichiers selectionnes n'ont pas pu etre joints car cet environnement n'a fourni ni chemins de fichier ni donnees de previsualisation compatibles.",
+  "promptInput.attachFiles.tooLarge.one": "1 fichier selectionne n'a pas pu etre joint car il depasse la limite de 5 Mo.",
   "promptInput.clear.ariaLabel": "Effacer le texte du prompt",
   "promptInput.clear.title": "Effacer le texte du prompt",
   "promptInput.send.ariaLabel": "Envoyer le message",
diff --git a/packages/ui/src/lib/i18n/messages/he/messaging.ts b/packages/ui/src/lib/i18n/messages/he/messaging.ts
index 0199ce31..7c24ef2e 100644
--- a/packages/ui/src/lib/i18n/messages/he/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/he/messaging.ts
@@ -156,6 +156,14 @@ export const messagingMessages = {
   "promptInput.overlay.againToAbort": "שוב כדי לבטל את הסשן",
   "promptInput.stopSession.ariaLabel": "עצור סשן",
   "promptInput.stopSession.title": "עצור סשן",
+  "promptInput.attachFiles.ariaLabel": "צרף קבצים",
+  "promptInput.attachFiles.title": "צרף קבצים",
+  "promptInput.attachFiles.dialogTitle": "צרף קבצים",
+  "promptInput.attachFiles.errorTitle": "צירוף נכשל",
+  "promptInput.attachFiles.skipped.title": "חלק מהקבצים לא צורפו",
+  "promptInput.attachFiles.skipped.one": "לא ניתן היה לצרף קובץ נבחר אחד כי הסביבה לא סיפקה נתיב קובץ או נתוני תצוגה מקדימה נתמכים.",
+  "promptInput.attachFiles.skipped.other": "לא ניתן היה לצרף {count} קבצים נבחרים כי הסביבה לא סיפקה נתיבי קבצים או נתוני תצוגה מקדימה נתמכים.",
+  "promptInput.attachFiles.tooLarge.one": "לא ניתן היה לצרף קובץ נבחר אחד כי הוא גדול ממגבלת הקבצים המצורפים של 5 MB.",
   "promptInput.clear.ariaLabel": "נקה את טקסט הפרומפט",
   "promptInput.clear.title": "נקה את טקסט הפרומפט",
   "promptInput.send.ariaLabel": "שלח הודעה",
diff --git a/packages/ui/src/lib/i18n/messages/ja/messaging.ts b/packages/ui/src/lib/i18n/messages/ja/messaging.ts
index e20464f3..42b866ba 100644
--- a/packages/ui/src/lib/i18n/messages/ja/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/messaging.ts
@@ -158,6 +158,14 @@ export const messagingMessages = {
   "promptInput.overlay.againToAbort": "もう一度押すとセッションを中断",
   "promptInput.stopSession.ariaLabel": "セッションを停止",
   "promptInput.stopSession.title": "セッションを停止",
+  "promptInput.attachFiles.ariaLabel": "ファイルを添付",
+  "promptInput.attachFiles.title": "ファイルを添付",
+  "promptInput.attachFiles.dialogTitle": "ファイルを添付",
+  "promptInput.attachFiles.errorTitle": "添付に失敗しました",
+  "promptInput.attachFiles.skipped.title": "一部のファイルを添付できませんでした",
+  "promptInput.attachFiles.skipped.one": "この環境でファイルパスまたは対応するプレビューデータを取得できなかったため、選択した1件のファイルを添付できませんでした。",
+  "promptInput.attachFiles.skipped.other": "この環境でファイルパスまたは対応するプレビューデータを取得できなかったため、選択した{count}件のファイルを添付できませんでした。",
+  "promptInput.attachFiles.tooLarge.one": "選択した1件のファイルは5 MBの添付サイズ上限を超えているため添付できませんでした。",
   "promptInput.clear.ariaLabel": "プロンプトのテキストをクリア",
   "promptInput.clear.title": "プロンプトのテキストをクリア",
   "promptInput.send.ariaLabel": "メッセージを送信",
diff --git a/packages/ui/src/lib/i18n/messages/ru/messaging.ts b/packages/ui/src/lib/i18n/messages/ru/messaging.ts
index a14c312e..2e598152 100644
--- a/packages/ui/src/lib/i18n/messages/ru/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/messaging.ts
@@ -158,6 +158,14 @@ export const messagingMessages = {
   "promptInput.overlay.againToAbort": "еще раз, чтобы прервать сессию",
   "promptInput.stopSession.ariaLabel": "Остановить сессию",
   "promptInput.stopSession.title": "Остановить сессию",
+  "promptInput.attachFiles.ariaLabel": "Прикрепить файлы",
+  "promptInput.attachFiles.title": "Прикрепить файлы",
+  "promptInput.attachFiles.dialogTitle": "Прикрепить файлы",
+  "promptInput.attachFiles.errorTitle": "Не удалось прикрепить файл",
+  "promptInput.attachFiles.skipped.title": "Некоторые файлы не были прикреплены",
+  "promptInput.attachFiles.skipped.one": "1 выбранный файл не удалось прикрепить, потому что среда не предоставила путь к файлу или поддерживаемые данные предпросмотра.",
+  "promptInput.attachFiles.skipped.other": "Не удалось прикрепить {count} выбранных файлов, потому что среда не предоставила пути к файлам или поддерживаемые данные предпросмотра.",
+  "promptInput.attachFiles.tooLarge.one": "1 выбранный файл не удалось прикрепить, потому что он превышает ограничение вложения в 5 МБ.",
   "promptInput.clear.ariaLabel": "Очистить текст prompt",
   "promptInput.clear.title": "Очистить текст prompt",
   "promptInput.send.ariaLabel": "Отправить сообщение",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
index f8022d13..8c2746d7 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
@@ -158,6 +158,14 @@ export const messagingMessages = {
   "promptInput.overlay.againToAbort": "再次按下以中止会话",
   "promptInput.stopSession.ariaLabel": "停止会话",
   "promptInput.stopSession.title": "停止会话",
+  "promptInput.attachFiles.ariaLabel": "附加文件",
+  "promptInput.attachFiles.title": "附加文件",
+  "promptInput.attachFiles.dialogTitle": "附加文件",
+  "promptInput.attachFiles.errorTitle": "附加失败",
+  "promptInput.attachFiles.skipped.title": "部分文件未附加",
+  "promptInput.attachFiles.skipped.one": "由于当前环境未提供文件路径或支持的预览数据，1 个选中的文件无法附加。",
+  "promptInput.attachFiles.skipped.other": "由于当前环境未提供文件路径或支持的预览数据，{count} 个选中的文件无法附加。",
+  "promptInput.attachFiles.tooLarge.one": "由于超过 5 MB 附件大小限制，1 个选中的文件无法附加。",
   "promptInput.clear.ariaLabel": "清除输入框文本",
   "promptInput.clear.title": "清除输入框文本",
   "promptInput.send.ariaLabel": "发送消息",
diff --git a/packages/ui/src/lib/native/desktop-file-drop.ts b/packages/ui/src/lib/native/desktop-file-drop.ts
index 4abc6432..a4b6a8a5 100644
--- a/packages/ui/src/lib/native/desktop-file-drop.ts
+++ b/packages/ui/src/lib/native/desktop-file-drop.ts
@@ -1,6 +1,7 @@
 import { listen } from "@tauri-apps/api/event"
 import { getLogger } from "../logger"
 import { canUseDesktopFolderDrop, isElectronHost, isTauriHost, runtimeEnv } from "../runtime-env"
+import { getFilePath } from "./file-path"
 
 const log = getLogger("actions")
 
@@ -17,19 +18,6 @@ function normalizePathList(input: unknown): string[] {
   return input.filter((value): value is string => typeof value === "string" && value.trim().length > 0)
 }
 
-function getFilePath(file: File): string | null {
-  if (typeof file.path === "string" && file.path.trim().length > 0) {
-    return file.path
-  }
-  if (isElectronHost()) {
-    const electronPath = (window as Window & { electronAPI?: ElectronAPI }).electronAPI?.getPathForFile?.(file)
-    if (typeof electronPath === "string" && electronPath.trim().length > 0) {
-      return electronPath
-    }
-  }
-  return null
-}
-
 async function resolveElectronDirectoryPaths(paths: string[]): Promise<string[]> {
   const api = (window as Window & { electronAPI?: ElectronAPI }).electronAPI
   if (!api?.getDirectoryPaths || paths.length === 0) {
diff --git a/packages/ui/src/lib/native/electron/functions.ts b/packages/ui/src/lib/native/electron/functions.ts
index cd27a1c7..5345d323 100644
--- a/packages/ui/src/lib/native/electron/functions.ts
+++ b/packages/ui/src/lib/native/electron/functions.ts
@@ -13,18 +13,15 @@ interface ElectronAPI {
   openDialog?: (options: NativeDialogOptions) => Promise<ElectronDialogResult>
 }
 
-function coerceFirstPath(result?: ElectronDialogResult | null): string | null {
+function coercePaths(result?: ElectronDialogResult | null): string[] {
   if (!result || result.canceled) {
-    return null
+    return []
   }
   const paths = Array.isArray(result.paths) ? result.paths : result.path ? [result.path] : []
-  if (paths.length === 0) {
-    return null
-  }
-  return paths[0] ?? null
+  return paths.filter((path): path is string => typeof path === "string" && path.trim().length > 0)
 }
 
-export async function openElectronNativeDialog(options: NativeDialogOptions): Promise<string | null> {
+export async function openElectronNativeDialog(options: NativeDialogOptions): Promise<string | string[] | null> {
   if (typeof window === "undefined") {
     return null
   }
@@ -34,7 +31,8 @@ export async function openElectronNativeDialog(options: NativeDialogOptions): Pr
   }
   try {
     const result = await api.openDialog(options)
-    return coerceFirstPath(result)
+    const paths = coercePaths(result)
+    return options.multiple ? paths : paths[0] ?? null
   } catch (error) {
     log.error("[native] electron dialog failed", error)
     return null
diff --git a/packages/ui/src/lib/native/file-path.ts b/packages/ui/src/lib/native/file-path.ts
new file mode 100644
index 00000000..ad2ff11d
--- /dev/null
+++ b/packages/ui/src/lib/native/file-path.ts
@@ -0,0 +1,14 @@
+import { isElectronHost } from "../runtime-env"
+
+export function getFilePath(file: File): string | null {
+  if (typeof file.path === "string" && file.path.trim().length > 0) {
+    return file.path
+  }
+  if (isElectronHost()) {
+    const electronPath = (window as Window & { electronAPI?: ElectronAPI }).electronAPI?.getPathForFile?.(file)
+    if (typeof electronPath === "string" && electronPath.trim().length > 0) {
+      return electronPath
+    }
+  }
+  return null
+}
diff --git a/packages/ui/src/lib/native/native-functions.ts b/packages/ui/src/lib/native/native-functions.ts
index 2ee18de0..43d3c770 100644
--- a/packages/ui/src/lib/native/native-functions.ts
+++ b/packages/ui/src/lib/native/native-functions.ts
@@ -5,7 +5,9 @@ import { openTauriNativeDialog } from "./tauri/functions"
 
 export type { NativeDialogOptions, NativeDialogFilter, NativeDialogMode } from "./types"
 
-function resolveNativeHandler(): ((options: NativeDialogOptions) => Promise<string | null>) | null {
+type NativeDialogResult = string | string[] | null
+
+function resolveNativeHandler(): ((options: NativeDialogOptions) => Promise<NativeDialogResult>) | null {
   if (isElectronHost()) {
     return openElectronNativeDialog
   }
@@ -23,7 +25,7 @@ export function supportsNativeDialogsInCurrentWindow(): boolean {
   return canUseNativeDialogs()
 }
 
-async function openNativeDialog(options: NativeDialogOptions): Promise<string | null> {
+async function openNativeDialog(options: NativeDialogOptions): Promise<NativeDialogResult> {
   const handler = resolveNativeHandler()
   if (!handler) {
     return null
@@ -32,9 +34,17 @@ async function openNativeDialog(options: NativeDialogOptions): Promise<string |
 }
 
 export async function openNativeFolderDialog(options?: Omit<NativeDialogOptions, "mode">): Promise<string | null> {
-  return openNativeDialog({ mode: "directory", ...(options ?? {}) })
+  const result = await openNativeDialog({ mode: "directory", ...(options ?? {}) })
+  return Array.isArray(result) ? result[0] ?? null : result
 }
 
 export async function openNativeFileDialog(options?: Omit<NativeDialogOptions, "mode">): Promise<string | null> {
-  return openNativeDialog({ mode: "file", ...(options ?? {}) })
+  const result = await openNativeDialog({ mode: "file", ...(options ?? {}) })
+  return Array.isArray(result) ? result[0] ?? null : result
+}
+
+export async function openNativeFileDialogs(options?: Omit<NativeDialogOptions, "mode" | "multiple">): Promise<string[]> {
+  const result = await openNativeDialog({ mode: "file", multiple: true, ...(options ?? {}) })
+  if (!result) return []
+  return Array.isArray(result) ? result : [result]
 }
diff --git a/packages/ui/src/lib/native/tauri/functions.ts b/packages/ui/src/lib/native/tauri/functions.ts
index 200aa11b..8765e842 100644
--- a/packages/ui/src/lib/native/tauri/functions.ts
+++ b/packages/ui/src/lib/native/tauri/functions.ts
@@ -3,7 +3,7 @@ import type { NativeDialogOptions } from "../native-functions"
 import { getLogger } from "../../logger"
 const log = getLogger("actions")
 
-export async function openTauriNativeDialog(options: NativeDialogOptions): Promise<string | null> {
+export async function openTauriNativeDialog(options: NativeDialogOptions): Promise<string | string[] | null> {
   if (typeof window === "undefined") {
     return null
   }
@@ -13,7 +13,7 @@ export async function openTauriNativeDialog(options: NativeDialogOptions): Promi
       title: options.title,
       defaultPath: options.defaultPath,
       directory: options.mode === "directory",
-      multiple: false,
+      multiple: Boolean(options.multiple),
       filters: options.filters?.map((filter) => ({
         name: filter.name ?? "Files",
         extensions: filter.extensions,
@@ -25,10 +25,10 @@ export async function openTauriNativeDialog(options: NativeDialogOptions): Promi
     }
 
     if (Array.isArray(response)) {
-      return response[0] ?? null
+      return options.multiple ? response : response[0] ?? null
     }
 
-    return response
+    return options.multiple ? [response] : response
   } catch (error) {
     log.error("[native] tauri dialog failed", error)
     return null
diff --git a/packages/ui/src/lib/native/types.ts b/packages/ui/src/lib/native/types.ts
index 12ec05c5..e04d0ecd 100644
--- a/packages/ui/src/lib/native/types.ts
+++ b/packages/ui/src/lib/native/types.ts
@@ -10,4 +10,5 @@ export interface NativeDialogOptions {
   title?: string
   defaultPath?: string
   filters?: NativeDialogFilter[]
+  multiple?: boolean
 }
diff --git a/packages/ui/src/styles/messaging/prompt-input.css b/packages/ui/src/styles/messaging/prompt-input.css
index 93ca7988..8bf0ba06 100644
--- a/packages/ui/src/styles/messaging/prompt-input.css
+++ b/packages/ui/src/styles/messaging/prompt-input.css
@@ -121,6 +121,7 @@
 
 .prompt-expand-button,
 .prompt-history-button,
+.prompt-attach-button,
 .prompt-clear-button {
   @apply w-7 h-7 flex items-center justify-center rounded-md;
   color: var(--text-muted);
@@ -132,6 +133,7 @@
 
 .prompt-expand-button:hover:not(:disabled),
 .prompt-history-button:hover:not(:disabled),
+.prompt-attach-button:hover:not(:disabled),
 .prompt-clear-button:hover:not(:disabled) {
   background-color: var(--surface-secondary);
   color: var(--text-primary);
@@ -145,6 +147,7 @@
 
 .prompt-expand-button:disabled,
 .prompt-history-button:disabled,
+.prompt-attach-button:disabled,
 .prompt-clear-button:disabled {
   opacity: 0.4;
   cursor: not-allowed;
diff --git a/packages/ui/src/types/global.d.ts b/packages/ui/src/types/global.d.ts
index e8a967ef..0146cfe8 100644
--- a/packages/ui/src/types/global.d.ts
+++ b/packages/ui/src/types/global.d.ts
@@ -13,6 +13,7 @@ declare global {
     title?: string
     defaultPath?: string
     filters?: ElectronDialogFilter[]
+    multiple?: boolean
   }
 
   interface ElectronDialogResult {

From 9165299027d1c4c07281edb4ec59d1ee542aad5b Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Mon, 11 May 2026 18:16:31 +0100
Subject: [PATCH 32/39] Refactor workspace startup and empty session states
 (#434)

## Summary
- Replace the old instance welcome screen with a focused workspace
launching state.
- Move no-session empty content into `MessageSection` as a variant of
the existing empty message-list view.
- Keep the normal bottom prompt available before a session exists and
create the first session from that prompt using draft agent/model
selections.

## Validation
- `npm run typecheck --workspace @codenomad/ui`

## Notes
- Existing local changes in `packages/opencode-config/package.json` and
`packages/opencode-config/package-lock.json` were left uncommitted and
are not part of this PR.
---
 .../ui/src/components/branded-empty-state.tsx |  31 +
 .../src/components/instance-welcome-view.tsx  | 553 +-----------------
 .../components/instance/instance-shell2.tsx   |  91 ++-
 .../instance/shell/SessionSidebar.tsx         |  41 +-
 .../ui/src/components/message-section.tsx     |  40 +-
 .../ui/src/lib/i18n/messages/en/instance.ts   |   6 +-
 .../ui/src/lib/i18n/messages/es/instance.ts   |   6 +-
 .../ui/src/lib/i18n/messages/fr/instance.ts   |   6 +-
 .../ui/src/lib/i18n/messages/he/instance.ts   |   6 +-
 .../ui/src/lib/i18n/messages/ja/instance.ts   |   6 +-
 .../ui/src/lib/i18n/messages/ru/instance.ts   |   6 +-
 .../src/lib/i18n/messages/zh-Hans/instance.ts |   6 +-
 .../ui/src/styles/panels/empty-loading.css    |   8 +
 13 files changed, 226 insertions(+), 580 deletions(-)
 create mode 100644 packages/ui/src/components/branded-empty-state.tsx

diff --git a/packages/ui/src/components/branded-empty-state.tsx b/packages/ui/src/components/branded-empty-state.tsx
new file mode 100644
index 00000000..31d474e2
--- /dev/null
+++ b/packages/ui/src/components/branded-empty-state.tsx
@@ -0,0 +1,31 @@
+import type { Component, JSX } from "solid-js"
+import { useI18n } from "../lib/i18n"
+
+const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
+
+interface BrandedEmptyStateProps {
+  title?: JSX.Element
+  description: JSX.Element
+  class?: string
+  children?: JSX.Element
+}
+
+const BrandedEmptyState: Component<BrandedEmptyStateProps> = (props) => {
+  const { t } = useI18n()
+
+  return (
+    <div class={`empty-state ${props.class ?? ""}`.trim()}>
+      <div class="empty-state-content">
+        <div class="flex flex-col items-center gap-3 mb-6">
+          <img src={codeNomadLogo} alt={t("messageSection.empty.logoAlt")} class="h-48 w-auto" loading="lazy" />
+          <h1 class="text-3xl font-semibold text-primary">{t("messageSection.empty.brandTitle")}</h1>
+        </div>
+        {props.title ? <h3>{props.title}</h3> : null}
+        <p>{props.description}</p>
+        {props.children}
+      </div>
+    </div>
+  )
+}
+
+export default BrandedEmptyState
diff --git a/packages/ui/src/components/instance-welcome-view.tsx b/packages/ui/src/components/instance-welcome-view.tsx
index 18a6ce04..12d2f151 100644
--- a/packages/ui/src/components/instance-welcome-view.tsx
+++ b/packages/ui/src/components/instance-welcome-view.tsx
@@ -1,19 +1,9 @@
-import { Component, createSignal, Show, For, createEffect, onMount, onCleanup, createMemo } from "solid-js"
-import { Loader2, Pencil, Trash2 } from "lucide-solid"
+import { Component } from "solid-js"
+import { Loader2 } from "lucide-solid"
 
 import type { Instance } from "../types/instance"
-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 { useI18n } from "../lib/i18n"
-import { getLogger } from "../lib/logger"
-const log = getLogger("actions")
-
-
+import BrandedEmptyState from "./branded-empty-state"
 
 interface InstanceWelcomeViewProps {
   instance: Instance
@@ -21,533 +11,20 @@ interface InstanceWelcomeViewProps {
 
 const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
   const { t } = useI18n()
-  const [isCreating, setIsCreating] = createSignal(false)
-  const [selectedIndex, setSelectedIndex] = createSignal(0)
-  const [focusMode, setFocusMode] = createSignal<"sessions" | "new-session" | null>("sessions")
-  const [showInstanceInfoOverlay, setShowInstanceInfoOverlay] = createSignal(false)
-  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)))
-  const isSessionDeleting = (sessionId: string) => {
-    const deleting = loading().deletingSession.get(props.instance.id)
-    return deleting ? deleting.has(sessionId) : false
-  }
-  const newSessionShortcut = createMemo<KeyboardShortcut>(() => {
-    const registered = keyboardRegistry.get("session-new")
-    if (registered) return registered
-    return {
-      id: "session-new-display",
-      key: "n",
-      modifiers: {
-        shift: true,
-        meta: isMac(),
-        ctrl: !isMac(),
-      },
-      handler: () => {},
-      description: t("instanceWelcome.shortcuts.newSession"),
-      context: "global",
-    }
-  })
-  const newSessionShortcutString = createMemo(() => (isMac() ? "cmd+shift+n" : "ctrl+shift+n"))
-
-  createEffect(() => {
-    const sessions = parentSessions()
-    if (sessions.length === 0) {
-      setFocusMode("new-session")
-      setSelectedIndex(0)
-    } else {
-      setFocusMode("sessions")
-      setSelectedIndex(0)
-    }
-  })
-
-  const openInstanceInfoOverlay = () => {
-    if (isDesktopLayout()) return
-    setShowInstanceInfoOverlay(true)
-  }
-  const closeInstanceInfoOverlay = () => setShowInstanceInfoOverlay(false)
-
-  function scrollToIndex(index: number) {
-    const element = document.querySelector(`[data-session-index="${index}"]`)
-    if (element) {
-      element.scrollIntoView({ block: "nearest", behavior: "auto" })
-    }
-  }
-
-  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()
-        closeInstanceInfoOverlay()
-      }
-      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)
-      scrollToIndex(newIndex)
-      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)
-      scrollToIndex(newIndex)
-      return
-    }
- 
-    if (!listFocused) {
-      return
-    }
- 
-    if (e.key === "PageDown") {
-      e.preventDefault()
-      const pageSize = 5
-      const newIndex = Math.min(selectedIndex() + pageSize, sessions.length - 1)
-      setSelectedIndex(newIndex)
-      scrollToIndex(newIndex)
-    } else if (e.key === "PageUp") {
-      e.preventDefault()
-      const pageSize = 5
-      const newIndex = Math.max(selectedIndex() - pageSize, 0)
-      setSelectedIndex(newIndex)
-      scrollToIndex(newIndex)
-    } else if (e.key === "Home") {
-      e.preventDefault()
-      setSelectedIndex(0)
-      scrollToIndex(0)
-    } else if (e.key === "End") {
-      e.preventDefault()
-      const newIndex = sessions.length - 1
-      setSelectedIndex(newIndex)
-      scrollToIndex(newIndex)
-    } else if (e.key === "Enter") {
-      e.preventDefault()
-      void handleEnterKey()
-    }
-  }
-
-
-  async function handleEnterKey() {
-    const sessions = parentSessions()
-    const index = selectedIndex()
- 
-    if (index < sessions.length) {
-      await handleSessionSelect(sessions[index].id)
-    }
-  }
- 
-   onMount(() => {
-    window.addEventListener("keydown", handleKeyDown)
-
-    onCleanup(() => {
-      window.removeEventListener("keydown", handleKeyDown)
-    })
-  })
-
-  onMount(() => {
-    const mediaQuery = window.matchMedia("(min-width: 1024px)")
-    const handleMediaChange = (matches: boolean) => {
-      setIsDesktopLayout(matches)
-      if (matches) {
-        closeInstanceInfoOverlay()
-      }
-    }
-
-    const listener = (event: MediaQueryListEvent) => handleMediaChange(event.matches)
-
-    if (typeof mediaQuery.addEventListener === "function") {
-      mediaQuery.addEventListener("change", listener)
-      onCleanup(() => {
-        mediaQuery.removeEventListener("change", listener)
-      })
-    } else {
-      mediaQuery.addListener(listener)
-      onCleanup(() => {
-        mediaQuery.removeListener(listener)
-      })
-    }
-
-    handleMediaChange(mediaQuery.matches)
-  })
-
-  function formatRelativeTime(timestamp: number): string {
-    const seconds = Math.floor((Date.now() - timestamp) / 1000)
-    const minutes = Math.floor(seconds / 60)
-    const hours = Math.floor(minutes / 60)
-    const days = Math.floor(hours / 24)
-
-    if (days > 0) return t("time.relative.daysAgoShort", { count: days })
-    if (hours > 0) return t("time.relative.hoursAgoShort", { count: hours })
-    if (minutes > 0) return t("time.relative.minutesAgoShort", { count: minutes })
-    return t("time.relative.justNow")
-  }
-
-  function formatTimestamp(timestamp: number): string {
-    return new Date(timestamp).toLocaleString()
-  }
-
-  async function handleSessionSelect(sessionId: string) {
-    setActiveParentSession(props.instance.id, sessionId)
-  }
-
-  async function handleSessionDelete(sessionId: string) {
-    if (isSessionDeleting(sessionId)) return
-
-    try {
-      await deleteSession(props.instance.id, sessionId)
-    } catch (error) {
-      log.error("Failed to delete session:", error)
-    }
-  }
-
-  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: t("instanceWelcome.toasts.renameError"), variant: "error" })
-    } finally {
-      setIsRenaming(false)
-    }
-  }
-
-  async function handleNewSession() {
-    if (isCreating()) return
-
-    setIsCreating(true)
-
-    try {
-      const session = await createSession(props.instance.id)
-      setActiveParentSession(props.instance.id, session.id)
-    } catch (error) {
-      log.error("Failed to create session:", error)
-    } finally {
-      setIsCreating(false)
-    }
-  }
 
   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 min-w-0">
-        <div class="flex-1 flex flex-col gap-4 min-h-0 min-w-0">
-          <Show
-            when={parentSessions().length > 0}
-            fallback={
-              <Show
-                when={isFetchingSessions()}
-                fallback={
-                  <div class="panel panel-empty-state flex-1 flex flex-col justify-center">
-                    <div class="panel-empty-state-icon">
-                      <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-                        />
-                      </svg>
-                    </div>
-                    <p class="panel-empty-state-title">{t("instanceWelcome.empty.title")}</p>
-                    <p class="panel-empty-state-description">{t("instanceWelcome.empty.description")}</p>
-                    <Show when={!isDesktopLayout() && !showInstanceInfoOverlay()}>
-                      <button type="button" class="button-tertiary mt-4 lg:hidden" onClick={openInstanceInfoOverlay}>
-                        {t("instanceWelcome.actions.viewInstanceInfo")}
-                      </button>
-                    </Show>
-                  </div>
-                }
-              >
-                <div class="panel panel-empty-state flex-1 flex flex-col justify-center">
-                  <div class="panel-empty-state-icon">
-                    <Loader2 class="w-12 h-12 mx-auto animate-spin text-muted" />
-                  </div>
-                  <p class="panel-empty-state-title">{t("instanceWelcome.loading.title")}</p>
-                  <p class="panel-empty-state-description">{t("instanceWelcome.loading.description")}</p>
-                </div>
-              </Show>
-            }
-          >
-            <div class="panel flex flex-col flex-1 min-h-0">
-              <div class="panel-header">
-                <div class="flex flex-row flex-wrap items-center gap-2 justify-between">
-                  <div>
-                    <h2 class="panel-title">{t("instanceWelcome.resume.title")}</h2>
-                    <p class="panel-subtitle">
-                      {parentSessions().length === 1
-                        ? t("instanceWelcome.resume.subtitle.one", { count: parentSessions().length })
-                        : t("instanceWelcome.resume.subtitle.other", { count: parentSessions().length })}
-                    </p>
-                  </div>
-                  <Show when={!isDesktopLayout() && !showInstanceInfoOverlay()}>
-                    <button
-                      type="button"
-                      class="button-tertiary lg:hidden flex-shrink-0"
-                      onClick={openInstanceInfoOverlay}
-                    >
-                      {t("instanceWelcome.actions.viewInstanceInfo")}
-                    </button>
-                  </Show>
-                </div>
-              </div>
-              <div class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto">
-                <For each={parentSessions()}>
-                  {(session, index) => {
-                    const isFocused = () => focusMode() === "sessions" && selectedIndex() === index()
-                    return (
-                      <div
-                        class="panel-list-item"
-                        classList={{
-                          "panel-list-item-highlight": isFocused(),
-                        }}
-                      >
-                        <div class="flex items-center gap-2 w-full px-1">
-                          <button
-                            type="button"
-                            data-session-index={index()}
-                            class="panel-list-item-content group flex-1"
-                            onClick={() => handleSessionSelect(session.id)}
-                            onMouseEnter={() => {
-                              setFocusMode("sessions")
-                              setSelectedIndex(index())
-                            }}
-                          >
-                            <div class="flex items-center justify-between gap-3 w-full">
-                              <div class="flex-1 min-w-0">
-                                <div class="flex items-center gap-2">
-                                  <span
-                                    class="text-sm font-medium text-primary whitespace-normal break-words transition-colors"
-                                    dir="auto"
-                                    classList={{
-                                      "text-accent": isFocused(),
-                                    }}
-                                  >
-                                    {session.title || t("instanceWelcome.session.untitled")}
-                                  </span>
-                                </div>
-                                <div class="flex items-center gap-3 text-xs text-muted mt-0.5">
-                                  <span>{session.agent}</span>
-                                  <span>•</span>
-                                  <span>{formatRelativeTime(session.time.updated)}</span>
-                                </div>
-                              </div>
-                            </div>
-                          </button>
-                          <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={t("instanceWelcome.actions.renameTitle")}
-                                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"
-                                title={t("instanceWelcome.actions.deleteTitle")}
-                                disabled={isSessionDeleting(session.id)}
-                                onClick={(event) => {
-                                  event.preventDefault()
-                                  event.stopPropagation()
-                                  void handleSessionDelete(session.id)
-                                }}
-                              >
-                                <Show
-                                  when={!isSessionDeleting(session.id)}
-                                  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>
-                                  }
-                                >
-                                  <Trash2 class="w-4 h-4" />
-                                </Show>
-                              </button>
-                            </div>
-                          </Show>
-                        </div>
-                      </div>
-                    )
-                  }}
-                </For>
-              </div>
-            </div>
-          </Show>
-
-          <div class="panel flex-shrink-0">
-            <div class="panel-header">
-              <h2 class="panel-title">{t("instanceWelcome.new.title")}</h2>
-              <p class="panel-subtitle">{t("instanceWelcome.new.subtitle")}</p>
-            </div>
-            <div class="panel-body">
-              <div class="space-y-3">
-                <button
-                  type="button"
-                  class="button-primary w-full flex items-center justify-center text-sm disabled:cursor-not-allowed"
-                  onClick={handleNewSession}
-                  disabled={isCreating()}
-                >
-                  <div class="flex items-center gap-2">
-                    {isCreating() ? (
-                      <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>
-                    ) : (
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-                      </svg>
-                    )}
-                    <span>{t("instanceWelcome.new.createButton")}</span>
-                  </div>
-                  <Kbd shortcut={newSessionShortcutString()} class="ml-2 kbd-hint" />
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="hidden lg:block lg:w-80 flex-shrink-0">
-          <div class="sticky top-0 max-h-full overflow-y-auto pr-1">
-            <InstanceInfo instance={props.instance} />
-          </div>
-        </div>
-      </div>
-
-      <Show when={!isDesktopLayout() && showInstanceInfoOverlay()}>
-        <div
-          class="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm lg:hidden"
-          onClick={closeInstanceInfoOverlay}
-        >
-          <div class="flex min-h-full items-start justify-center p-4 overflow-y-auto">
-            <div
-              class="w-full max-w-md space-y-3"
-              onClick={(event) => event.stopPropagation()}
-            >
-              <div class="flex justify-end">
-                <button type="button" class="button-tertiary" onClick={closeInstanceInfoOverlay}>
-                  {t("instanceWelcome.overlay.close")}
-                </button>
-              </div>
-              <div class="max-h-[85vh] overflow-y-auto pr-1">
-                <InstanceInfo instance={props.instance} />
-              </div>
-            </div>
-          </div>
-        </div>
-      </Show>
-
-      <div class="panel-footer hidden sm:block keyboard-hints">
-
-        <div class="panel-footer-hints">
-          <div class="flex items-center gap-1.5">
-            <kbd class="kbd">↑</kbd>
-            <kbd class="kbd">↓</kbd>
-            <span>{t("instanceWelcome.hints.navigate")}</span>
-          </div>
-          <div class="flex items-center gap-1.5">
-            <kbd class="kbd">PgUp</kbd>
-            <kbd class="kbd">PgDn</kbd>
-            <span>{t("instanceWelcome.hints.jump")}</span>
-          </div>
-          <div class="flex items-center gap-1.5">
-            <kbd class="kbd">Home</kbd>
-            <kbd class="kbd">End</kbd>
-            <span>{t("instanceWelcome.hints.firstLast")}</span>
-          </div>
-          <div class="flex items-center gap-1.5">
-            <kbd class="kbd">Enter</kbd>
-            <span>{t("instanceWelcome.hints.resume")}</span>
-          </div>
-        </div>
-      </div>
-
-      <SessionRenameDialog
-        open={Boolean(renameTarget())}
-        currentTitle={renameTarget()?.title ?? ""}
-        sessionLabel={renameTarget()?.label}
-        isSubmitting={isRenaming()}
-        onRename={handleRenameSubmit}
-        onClose={closeRenameDialog}
-      />
-    </div>
+    <BrandedEmptyState
+      class="bg-surface-secondary"
+      title={t("instanceWelcome.loading.title")}
+      description={t("instanceWelcome.loading.description")}
+    >
+      <ul>
+        <li class="flex items-center justify-center gap-2">
+          <Loader2 class="h-4 w-4 animate-spin" aria-hidden="true" />
+          <span class="truncate" title={props.instance.folder}>{props.instance.folder}</span>
+        </li>
+      </ul>
+    </BrandedEmptyState>
   )
 }
 
diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index c118227a..76877cfd 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -28,6 +28,7 @@ import CommandPalette from "../command-palette"
 import PermissionNotificationBanner from "../permission-notification-banner"
 import PermissionApprovalModal from "../permission-approval-modal"
 import SessionView from "../session/session-view"
+import MessageSection from "../message-section"
 import { formatTokenTotal } from "../../lib/formatters"
 import ContextMeter from "../context-meter"
 import { sseManager } from "../../lib/sse-manager"
@@ -35,6 +36,7 @@ import { getLogger } from "../../lib/logger"
 import { serverApi } from "../../lib/api-client"
 import { loadBackgroundProcesses } from "../../stores/background-processes"
 import { BackgroundProcessOutputDialog } from "../background-process-output-dialog"
+import PromptInput from "../prompt-input"
 import { useI18n } from "../../lib/i18n"
 import { getPermissionQueueLength, getQuestionQueueLength } from "../../stores/instances"
 import SessionSidebar from "./shell/SessionSidebar"
@@ -44,9 +46,11 @@ import { useDrawerChrome } from "./shell/useDrawerChrome"
 import { getRetrySeconds, getSessionIdleFadeClass, getSessionRetry, getSessionStatus, shouldShowSessionStatus } from "../../stores/session-status"
 import { Eye, Maximize2, MessageSquareText, Search, ShieldAlert } from "lucide-solid"
 import type { PromptInputApi } from "../prompt-input/types"
-import { useConfig } from "../../stores/preferences"
+import type { Attachment } from "../../types/attachment"
+import { setAgentModelPreference, useConfig } from "../../stores/preferences"
 import { showPromptDialog } from "../../stores/alerts"
 import { openSessionPreview, sessionPreviews, showSessionChat, showSessionPreview } from "../../stores/session-previews"
+import { createSession, getDefaultModel, providers, sendMessage, setActiveParentSession, updateSessionModel } from "../../stores/sessions"
 
 import type { LayoutMode } from "./shell/types"
 import {
@@ -65,6 +69,7 @@ import { isPermissionAutoAcceptEnabled } from "../../stores/permission-auto-acce
 
 const log = getLogger("session")
 const OPEN_SESSION_SEARCH_EVENT = "codenomad:open-session-search"
+const NO_SESSION_DRAFT_SESSION_ID = "__no_session_draft__"
 
 interface InstanceShellProps {
   instance: Instance
@@ -106,6 +111,9 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
   const [permissionModalOpen, setPermissionModalOpen] = createSignal(false)
   const [now, setNow] = createSignal(Date.now())
   const [sessionPromptApis, setSessionPromptApis] = createSignal<Record<string, PromptInputApi | null>>({})
+  const [draftAgent, setDraftAgent] = createSignal("")
+  const [draftModel, setDraftModel] = createSignal({ providerId: "", modelId: "" })
+  const [draftModelManuallySelected, setDraftModelManuallySelected] = createSignal(false)
 
   // Worktree selector manages its own dialogs.
   const [showSessionSearch, setShowSessionSearch] = createSignal(false)
@@ -535,6 +543,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             threads={sessionThreads}
             activeSessionId={activeSessionIdForInstance}
             activeSession={activeSessionForInstance}
+            draftAgent={draftAgent}
+            draftModel={draftModel}
             showSearch={showSessionSearch}
             onToggleSearch={() => setShowSessionSearch((current) => !current)}
             keyboardShortcuts={keyboardShortcuts}
@@ -545,6 +555,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             onNewSession={props.onNewSession}
             onSidebarAgentChange={props.handleSidebarAgentChange}
             onSidebarModelChange={props.handleSidebarModelChange}
+            onDraftAgentChange={handleDraftAgentChange}
+            onDraftModelChange={handleDraftModelChange}
             onPinLeftDrawer={pinLeftDrawer}
             onUnpinLeftDrawer={unpinLeftDrawer}
             onCloseLeftDrawer={closeLeftDrawer}
@@ -597,6 +609,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
           threads={sessionThreads}
           activeSessionId={activeSessionIdForInstance}
           activeSession={activeSessionForInstance}
+          draftAgent={draftAgent}
+          draftModel={draftModel}
           showSearch={showSessionSearch}
           onToggleSearch={() => setShowSessionSearch((current) => !current)}
           keyboardShortcuts={keyboardShortcuts}
@@ -607,6 +621,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
           onNewSession={props.onNewSession}
           onSidebarAgentChange={props.handleSidebarAgentChange}
           onSidebarModelChange={props.handleSidebarModelChange}
+          onDraftAgentChange={handleDraftAgentChange}
+          onDraftModelChange={handleDraftModelChange}
           onPinLeftDrawer={pinLeftDrawer}
           onUnpinLeftDrawer={unpinLeftDrawer}
           onCloseLeftDrawer={closeLeftDrawer}
@@ -730,10 +746,51 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     )
   }
 
-  const hasSessions = createMemo(() => activeSessions().size > 0)
-
   const showingInfoView = createMemo(() => activeSessionIdForInstance() === "info")
 
+  const isLaunching = createMemo(() => props.instance.status === "starting")
+
+  createEffect(() => {
+    const agent = draftAgent()
+    providers().get(props.instance.id)
+    if (!agent || draftModelManuallySelected()) return
+
+    let cancelled = false
+    void getDefaultModel(props.instance.id, agent).then((model) => {
+      if (!cancelled) setDraftModel(model)
+    }).catch((error) => log.warn("Failed to resolve draft model", error))
+
+    onCleanup(() => {
+      cancelled = true
+    })
+  })
+
+  async function handleDraftAgentChange(agent: string) {
+    setDraftAgent(agent)
+    setDraftModelManuallySelected(false)
+    const model = await getDefaultModel(props.instance.id, agent)
+    setDraftModel(model)
+  }
+
+  async function handleDraftModelChange(model: { providerId: string; modelId: string }) {
+    setDraftModel(model)
+    setDraftModelManuallySelected(true)
+  }
+
+  async function handleFirstPromptSend(prompt: string, attachments: Attachment[]) {
+    const agent = draftAgent()
+    const model = draftModel()
+    if (agent && model.providerId && model.modelId) {
+      await setAgentModelPreference(props.instance.id, agent, model)
+    }
+    const session = await createSession(props.instance.id, agent || undefined)
+    if (model.providerId && model.modelId) {
+      await updateSessionModel(props.instance.id, session.id, model)
+    }
+    setActiveParentSession(props.instance.id, session.id)
+    await sendMessage(props.instance.id, session.id, prompt, attachments)
+  }
+
   const sessionLayout = (
     <div
       class="session-shell-panels flex flex-1 min-h-0 overflow-x-hidden"
@@ -977,11 +1034,27 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
               <Show
                 when={cachedSessionIds().length > 0 && activeSessionIdForInstance()}
                 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">{t("instanceShell.empty.title")}</p>
-                      <p class="text-sm">{t("instanceShell.empty.description")}</p>
-                    </div>
+                  <div class="session-view">
+                    <MessageSection
+                      instanceId={props.instance.id}
+                      sessionId={NO_SESSION_DRAFT_SESSION_ID}
+                      loading={false}
+                      emptyStateVariant="no-session"
+                      isActive={props.isActiveInstance}
+                      showSidebarToggle={showEmbeddedSidebarToggle()}
+                      onSidebarToggle={() => setLeftOpen(true)}
+                      forceCompactStatusLayout={showEmbeddedSidebarToggle()}
+                    />
+
+                    <PromptInput
+                      instanceId={props.instance.id}
+                      instanceFolder={props.instance.folder}
+                      sessionId={NO_SESSION_DRAFT_SESSION_ID}
+                      isActive={props.isActiveInstance}
+                      compactLayout={compactPromptLayout()}
+                      onSend={handleFirstPromptSend}
+                      escapeInDebounce={props.escapeInDebounce}
+                    />
                   </div>
                 }
               >
@@ -1035,7 +1108,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
         class="instance-shell2 flex flex-col flex-1 min-h-0"
         data-instance-id={props.instance.id}
       >
-        <Show when={hasSessions()} fallback={<InstanceWelcomeView instance={props.instance} />}>
+        <Show when={!isLaunching()} fallback={<InstanceWelcomeView instance={props.instance} />}>
           {sessionLayout}
         </Show>
       </div>
diff --git a/packages/ui/src/components/instance/shell/SessionSidebar.tsx b/packages/ui/src/components/instance/shell/SessionSidebar.tsx
index 1ece1854..38628e80 100644
--- a/packages/ui/src/components/instance/shell/SessionSidebar.tsx
+++ b/packages/ui/src/components/instance/shell/SessionSidebar.tsx
@@ -27,6 +27,8 @@ interface SessionSidebarProps {
   threads: Accessor<SessionThread[]>
   activeSessionId: Accessor<string | null>
   activeSession: Accessor<Session | null>
+  draftAgent?: Accessor<string>
+  draftModel?: Accessor<{ providerId: string; modelId: string }>
 
   showSearch: Accessor<boolean>
   onToggleSearch: () => void
@@ -40,6 +42,8 @@ interface SessionSidebarProps {
   onNewSession: () => Promise<void> | void
   onSidebarAgentChange: (sessionId: string, agent: string) => Promise<void>
   onSidebarModelChange: (sessionId: string, model: { providerId: string; modelId: string }) => Promise<void>
+  onDraftAgentChange?: (agent: string) => Promise<void>
+  onDraftModelChange?: (model: { providerId: string; modelId: string }) => Promise<void>
   onPinLeftDrawer: () => void
   onUnpinLeftDrawer: () => void
   onCloseLeftDrawer: () => void
@@ -143,7 +147,42 @@ const SessionSidebar: Component<SessionSidebarProps> = (props) => (
         />
 
         <div class="session-sidebar-separator" />
-        <Show when={props.activeSession()}>
+        <Show
+          when={props.activeSession()}
+          fallback={
+            <Show when={props.draftAgent && props.draftModel && props.onDraftAgentChange && props.onDraftModelChange}>
+              <div class="session-sidebar-controls px-4 py-4 border-t border-base flex flex-col gap-3">
+                <AgentSelector
+                  instanceId={props.instanceId}
+                  sessionId="__new_session__"
+                  currentAgent={props.draftAgent?.() ?? ""}
+                  onAgentChange={(agent) => props.onDraftAgentChange!(agent)}
+                />
+
+                <ModelSelector
+                  instanceId={props.instanceId}
+                  sessionId="__new_session__"
+                  currentModel={props.draftModel?.() ?? { providerId: "", modelId: "" }}
+                  onModelChange={(model) => props.onDraftModelChange!(model)}
+                />
+
+                <ThinkingSelector instanceId={props.instanceId} currentModel={props.draftModel?.() ?? { providerId: "", modelId: "" }} />
+
+                <KeyboardHint
+                  class="session-sidebar-selector-hints"
+                  ariaHidden={true}
+                  shortcuts={[
+                    keyboardRegistry.get("open-agent-selector"),
+                    keyboardRegistry.get("focus-model"),
+                    keyboardRegistry.get("focus-variant"),
+                  ].filter((shortcut): shortcut is KeyboardShortcut => Boolean(shortcut))}
+                  separator=" "
+                  showDescription={false}
+                />
+              </div>
+            </Show>
+          }
+        >
           {(activeSession) => (
             <div class="session-sidebar-controls px-4 py-4 border-t border-base flex flex-col gap-3">
               <WorktreeSelector instanceId={props.instanceId} sessionId={activeSession().id} />
diff --git a/packages/ui/src/components/message-section.tsx b/packages/ui/src/components/message-section.tsx
index c2f3bebb..ea9fac70 100644
--- a/packages/ui/src/components/message-section.tsx
+++ b/packages/ui/src/components/message-section.tsx
@@ -1,6 +1,7 @@
 import { Show, createEffect, createMemo, createSignal, onCleanup, on, untrack } from "solid-js"
 import { ChevronDown, ChevronUp, MoreHorizontal, Pause, Search, Trash, X } from "lucide-solid"
 import Kbd from "./kbd"
+import BrandedEmptyState from "./branded-empty-state"
 import MessageBlock from "./message-block"
 import { getMessageAnchorId, getMessageIdFromAnchorId } from "./message-anchors"
 import MessageTimeline, { buildTimelineSegments, type TimelineSegment } from "./message-timeline"
@@ -28,13 +29,13 @@ const QUOTE_SELECTION_MAX_LENGTH = 2000
 const STREAMING_TEXT_HOLD_TOP_THRESHOLD_PX = 8
 const SEARCH_DEBOUNCE_MS = 250
 const SEARCH_MIN_CHARS = 3
-const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 const OPEN_SESSION_SEARCH_EVENT = "codenomad:open-session-search"
 
 export interface MessageSectionProps {
   instanceId: string
   sessionId: string
   loading?: boolean
+  emptyStateVariant?: "messages" | "no-session"
   onRevert?: (messageId: string) => void
   onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
   onFork?: (messageId?: string) => void
@@ -53,6 +54,7 @@ export default function MessageSection(props: MessageSectionProps) {
   const showMessageTimelinePreference = () => preferences().showMessageTimeline ?? true
   const showTimelineToolsPreference = () => preferences().showTimelineTools ?? true
   const holdLongAssistantRepliesEnabled = () => preferences().holdLongAssistantReplies ?? true
+  const emptyStateVariant = () => props.emptyStateVariant ?? "messages"
   const store = createMemo<InstanceMessageStore>(() => messageStoreBus.getOrCreate(props.instanceId))
   const messageIds = createMemo(() => store().getSessionMessageIds(props.sessionId))
   const visibleMessageIds = createMemo(() => {
@@ -1340,14 +1342,30 @@ export default function MessageSection(props: MessageSectionProps) {
           renderBeforeItems={() => (
             <>
               <Show when={!props.loading && visibleMessageIds().length === 0}>
-                <div class="empty-state">
-                  <div class="empty-state-content">
-                    <div class="flex flex-col items-center gap-3 mb-6">
-                      <img src={codeNomadLogo} alt={t("messageSection.empty.logoAlt")} class="h-48 w-auto" loading="lazy" />
-                      <h1 class="text-3xl font-semibold text-primary">{t("messageSection.empty.brandTitle")}</h1>
-                    </div>
-                    <h3>{t("messageSection.empty.title")}</h3>
-                    <p>{t("messageSection.empty.description")}</p>
+                <Show
+                  when={emptyStateVariant() === "no-session"}
+                  fallback={
+                    <BrandedEmptyState
+                      title={t("messageSection.empty.title")}
+                      description={t("messageSection.empty.description")}
+                    >
+                      <ul>
+                        <li>
+                          <span>{t("messageSection.empty.tips.commandPalette")}</span>
+                          <Kbd shortcut="cmd+shift+p" class="ml-2 kbd-hint" />
+                        </li>
+                        <li>{t("messageSection.empty.tips.askAboutCodebase")}</li>
+                        <li>
+                          {t("messageSection.empty.tips.attachFilesPrefix")} <code>@</code>
+                        </li>
+                      </ul>
+                    </BrandedEmptyState>
+                  }
+                >
+                  <BrandedEmptyState
+                    title={t("messageSection.empty.title")}
+                    description={t("instanceShell.empty.description")}
+                  >
                     <ul>
                       <li>
                         <span>{t("messageSection.empty.tips.commandPalette")}</span>
@@ -1358,8 +1376,8 @@ export default function MessageSection(props: MessageSectionProps) {
                         {t("messageSection.empty.tips.attachFilesPrefix")} <code>@</code>
                       </li>
                     </ul>
-                  </div>
-                </div>
+                  </BrandedEmptyState>
+                </Show>
               </Show>
 
               <Show when={props.loading}>
diff --git a/packages/ui/src/lib/i18n/messages/en/instance.ts b/packages/ui/src/lib/i18n/messages/en/instance.ts
index d88196c9..153adaa4 100644
--- a/packages/ui/src/lib/i18n/messages/en/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/en/instance.ts
@@ -57,8 +57,8 @@ export const instanceMessages = {
   "instanceWelcome.shortcuts.newSession": "New Session",
   "instanceWelcome.empty.title": "No Previous Sessions",
   "instanceWelcome.empty.description": "Create a new session below to get started",
-  "instanceWelcome.loading.title": "Loading Sessions",
-  "instanceWelcome.loading.description": "Fetching your previous sessions...",
+  "instanceWelcome.loading.title": "Launching workspace",
+  "instanceWelcome.loading.description": "Starting OpenCode for this workspace...",
   "instanceWelcome.resume.title": "Resume Session",
   "instanceWelcome.resume.subtitle.one": "{count} session available",
   "instanceWelcome.resume.subtitle.other": "{count} sessions available",
@@ -86,7 +86,7 @@ export const instanceMessages = {
   "instanceDisconnected.actions.closeInstance": "Close Instance",
 
   "instanceShell.empty.title": "No session selected",
-  "instanceShell.empty.description": "Select a session to view messages",
+  "instanceShell.empty.description": "Send a message below to create a new session, or select an existing session to continue.",
 
   "instanceShell.rightPanel.title": "Status Panel",
   "instanceShell.rightPanel.tabs.changes": "Session Changes",
diff --git a/packages/ui/src/lib/i18n/messages/es/instance.ts b/packages/ui/src/lib/i18n/messages/es/instance.ts
index 872231e6..f01aa8de 100644
--- a/packages/ui/src/lib/i18n/messages/es/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/es/instance.ts
@@ -57,8 +57,8 @@ export const instanceMessages = {
   "instanceWelcome.shortcuts.newSession": "Nueva sesión",
   "instanceWelcome.empty.title": "No hay sesiones anteriores",
   "instanceWelcome.empty.description": "Crea una nueva sesión abajo para comenzar",
-  "instanceWelcome.loading.title": "Cargando sesiones",
-  "instanceWelcome.loading.description": "Obteniendo tus sesiones anteriores...",
+  "instanceWelcome.loading.title": "Iniciando workspace",
+  "instanceWelcome.loading.description": "Iniciando OpenCode para este workspace...",
   "instanceWelcome.resume.title": "Reanudar sesión",
   "instanceWelcome.resume.subtitle.one": "{count} sesión disponible",
   "instanceWelcome.resume.subtitle.other": "{count} sesiones disponibles",
@@ -86,7 +86,7 @@ export const instanceMessages = {
   "instanceDisconnected.actions.closeInstance": "Cerrar instancia",
 
   "instanceShell.empty.title": "No hay sesión seleccionada",
-  "instanceShell.empty.description": "Selecciona una sesión para ver mensajes",
+  "instanceShell.empty.description": "Envía un mensaje abajo para crear una nueva sesión, o selecciona una sesión existente para continuar.",
 
   "instanceShell.rightPanel.title": "Panel de estado",
   "instanceShell.rightPanel.tabs.changes": "Cambios",
diff --git a/packages/ui/src/lib/i18n/messages/fr/instance.ts b/packages/ui/src/lib/i18n/messages/fr/instance.ts
index bb7a22d0..1f6efba1 100644
--- a/packages/ui/src/lib/i18n/messages/fr/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/instance.ts
@@ -57,8 +57,8 @@ export const instanceMessages = {
   "instanceWelcome.shortcuts.newSession": "Nouvelle session",
   "instanceWelcome.empty.title": "Aucune session précédente",
   "instanceWelcome.empty.description": "Créez une nouvelle session ci-dessous pour commencer",
-  "instanceWelcome.loading.title": "Chargement des sessions",
-  "instanceWelcome.loading.description": "Récupération de vos sessions précédentes...",
+  "instanceWelcome.loading.title": "Lancement de l'espace de travail",
+  "instanceWelcome.loading.description": "Démarrage d'OpenCode pour cet espace de travail...",
   "instanceWelcome.resume.title": "Reprendre une session",
   "instanceWelcome.resume.subtitle.one": "{count} session disponible",
   "instanceWelcome.resume.subtitle.other": "{count} sessions disponibles",
@@ -86,7 +86,7 @@ export const instanceMessages = {
   "instanceDisconnected.actions.closeInstance": "Fermer l'instance",
 
   "instanceShell.empty.title": "Aucune session sélectionnée",
-  "instanceShell.empty.description": "Sélectionnez une session pour voir les messages",
+  "instanceShell.empty.description": "Envoyez un message ci-dessous pour créer une nouvelle session, ou sélectionnez une session existante pour continuer.",
 
   "instanceShell.rightPanel.title": "Panneau d'état",
   "instanceShell.rightPanel.tabs.changes": "Modifications",
diff --git a/packages/ui/src/lib/i18n/messages/he/instance.ts b/packages/ui/src/lib/i18n/messages/he/instance.ts
index a8c9fcc1..0897383f 100644
--- a/packages/ui/src/lib/i18n/messages/he/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/he/instance.ts
@@ -57,8 +57,8 @@ export const instanceMessages = {
   "instanceWelcome.shortcuts.newSession": "סשן חדש",
   "instanceWelcome.empty.title": "אין סשנים קודמים",
   "instanceWelcome.empty.description": "צור סשן חדש למטה כדי להתחיל",
-  "instanceWelcome.loading.title": "טוען סשנים",
-  "instanceWelcome.loading.description": "מאחזר את הסשנים הקודמים שלך...",
+  "instanceWelcome.loading.title": "מפעיל סביבת עבודה",
+  "instanceWelcome.loading.description": "מפעיל את OpenCode עבור סביבת העבודה הזו...",
   "instanceWelcome.resume.title": "המשך סשן",
   "instanceWelcome.resume.subtitle.one": "סשן אחד זמין",
   "instanceWelcome.resume.subtitle.other": "{count} סשנים זמינים",
@@ -86,7 +86,7 @@ export const instanceMessages = {
   "instanceDisconnected.actions.closeInstance": "סגור מופע",
 
   "instanceShell.empty.title": "לא נבחר סשן",
-  "instanceShell.empty.description": "בחר סשן לצפייה בהודעות",
+  "instanceShell.empty.description": "שלח הודעה למטה כדי ליצור סשן חדש, או בחר סשן קיים כדי להמשיך.",
 
   "instanceShell.rightPanel.title": "לוח סטטוס",
   "instanceShell.rightPanel.tabs.changes": "שינויי סשן",
diff --git a/packages/ui/src/lib/i18n/messages/ja/instance.ts b/packages/ui/src/lib/i18n/messages/ja/instance.ts
index d21b1760..ca6cd551 100644
--- a/packages/ui/src/lib/i18n/messages/ja/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/instance.ts
@@ -57,8 +57,8 @@ export const instanceMessages = {
   "instanceWelcome.shortcuts.newSession": "新しいセッション",
   "instanceWelcome.empty.title": "以前のセッションはありません",
   "instanceWelcome.empty.description": "下で新しいセッションを作成して開始",
-  "instanceWelcome.loading.title": "セッションを読み込み中",
-  "instanceWelcome.loading.description": "以前のセッションを取得中...",
+  "instanceWelcome.loading.title": "ワークスペースを起動中",
+  "instanceWelcome.loading.description": "このワークスペース用に OpenCode を起動しています...",
   "instanceWelcome.resume.title": "セッションを再開",
   "instanceWelcome.resume.subtitle.one": "{count} 件のセッション",
   "instanceWelcome.resume.subtitle.other": "{count} 件のセッション",
@@ -86,7 +86,7 @@ export const instanceMessages = {
   "instanceDisconnected.actions.closeInstance": "インスタンスを閉じる",
 
   "instanceShell.empty.title": "セッションが選択されていません",
-  "instanceShell.empty.description": "メッセージを表示するにはセッションを選択してください",
+  "instanceShell.empty.description": "下にメッセージを送信して新しいセッションを作成するか、既存のセッションを選択して続行してください。",
 
   "instanceShell.rightPanel.title": "ステータスパネル",
   "instanceShell.rightPanel.tabs.changes": "変更",
diff --git a/packages/ui/src/lib/i18n/messages/ru/instance.ts b/packages/ui/src/lib/i18n/messages/ru/instance.ts
index 42fbbe3b..bce93442 100644
--- a/packages/ui/src/lib/i18n/messages/ru/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/instance.ts
@@ -57,8 +57,8 @@ export const instanceMessages = {
   "instanceWelcome.shortcuts.newSession": "Новая сессия",
   "instanceWelcome.empty.title": "Нет предыдущих сессий",
   "instanceWelcome.empty.description": "Создайте новую сессию ниже, чтобы начать",
-  "instanceWelcome.loading.title": "Загрузка сессий",
-  "instanceWelcome.loading.description": "Получаем ваши предыдущие сессии…",
+  "instanceWelcome.loading.title": "Запуск рабочего пространства",
+  "instanceWelcome.loading.description": "Запускаем OpenCode для этого рабочего пространства...",
   "instanceWelcome.resume.title": "Продолжить сессию",
   "instanceWelcome.resume.subtitle.one": "{count} сессия доступна",
   "instanceWelcome.resume.subtitle.other": "{count} сессий доступно",
@@ -86,7 +86,7 @@ export const instanceMessages = {
   "instanceDisconnected.actions.closeInstance": "Закрыть экземпляр",
 
   "instanceShell.empty.title": "Сессия не выбрана",
-  "instanceShell.empty.description": "Выберите сессию, чтобы просмотреть сообщения",
+  "instanceShell.empty.description": "Отправьте сообщение ниже, чтобы создать новую сессию, или выберите существующую сессию, чтобы продолжить.",
 
   "instanceShell.rightPanel.title": "Панель состояния",
   "instanceShell.rightPanel.tabs.changes": "Изменения",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts
index cad1d3e9..70a378c9 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts
@@ -57,8 +57,8 @@ export const instanceMessages = {
   "instanceWelcome.shortcuts.newSession": "新建会话",
   "instanceWelcome.empty.title": "没有历史会话",
   "instanceWelcome.empty.description": "在下方创建新会话以开始使用",
-  "instanceWelcome.loading.title": "正在加载会话",
-  "instanceWelcome.loading.description": "正在获取你的历史会话...",
+  "instanceWelcome.loading.title": "正在启动工作区",
+  "instanceWelcome.loading.description": "正在为此工作区启动 OpenCode...",
   "instanceWelcome.resume.title": "继续会话",
   "instanceWelcome.resume.subtitle.one": "{count} 个会话可用",
   "instanceWelcome.resume.subtitle.other": "{count} 个会话可用",
@@ -86,7 +86,7 @@ export const instanceMessages = {
   "instanceDisconnected.actions.closeInstance": "关闭实例",
 
   "instanceShell.empty.title": "未选择会话",
-  "instanceShell.empty.description": "选择会话以查看消息",
+  "instanceShell.empty.description": "在下方发送消息以创建新会话，或选择现有会话继续。",
 
   "instanceShell.rightPanel.title": "状态面板",
   "instanceShell.rightPanel.tabs.changes": "更改",
diff --git a/packages/ui/src/styles/panels/empty-loading.css b/packages/ui/src/styles/panels/empty-loading.css
index eae70624..101c2084 100644
--- a/packages/ui/src/styles/panels/empty-loading.css
+++ b/packages/ui/src/styles/panels/empty-loading.css
@@ -3,6 +3,14 @@
   @apply flex-1 flex items-center justify-center p-12;
 }
 
+.empty-state--stream-placement {
+  @apply flex-none w-full;
+}
+
+.empty-state--no-padding {
+  @apply px-0 pb-0 pt-12;
+}
+
 .empty-state-content {
   @apply text-center max-w-sm;
 }

From cf88dc06efcdf00474ae7dc8d7ae9821b65d0470 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 12 May 2026 09:00:22 +0100
Subject: [PATCH 33/39] Package CodeNomad OpenCode plugin (#433)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
- Rename the OpenCode config template into a versioned npm-packable
CodeNomad plugin package.
- Build and package the plugin through the server bundle, with
Electron/Tauri carrying it via existing server resources.
- Replace OPENCODE_CONFIG_DIR injection with JSONC-aware
OPENCODE_CONFIG_CONTENT merging that appends the CodeNomad plugin while
preserving user config.

## Validation
- npm run build --workspace @codenomad/codenomad-opencode-plugin
- npm run prepare-plugin --workspace @neuralnomads/codenomad
- npm run typecheck --workspace @neuralnomads/codenomad
- npm run typecheck --workspace @neuralnomads/codenomad-electron-app
- node --import tsx --test \"src/opencode-plugin.test.ts\"
\"src/workspaces/__tests__/spawn.test.ts\"

## Notes
- Production plugin loading uses an explicit npm file alias for the
packaged tarball.
- Dev loading still references the TypeScript plugin entry directly.

---------

Co-authored-by: Pascal André <pascalandr@gmail.com>
---
 package-lock.json                             | 254 ++++++++++--
 package.json                                  |   2 +-
 packages/electron-app/package.json            |   4 +-
 packages/electron-app/scripts/build.js        |   1 +
 packages/opencode-config/opencode.jsonc       |   3 -
 packages/opencode-config/package-lock.json    | 380 ------------------
 packages/opencode-config/package.json         |   9 -
 .../README.md                                 |  18 +-
 packages/opencode-plugin/package.json         |  22 +
 .../plugin/codenomad.ts                       |  17 +-
 .../plugin/lib/background-process.ts          |   2 +-
 .../plugin/lib/client.ts                      |   4 +-
 .../plugin/lib/request.ts                     |   0
 packages/opencode-plugin/tsconfig.json        |  17 +
 packages/server/package.json                  |   4 +-
 .../server/scripts/copy-opencode-config.mjs   |  61 ---
 .../scripts/package-opencode-plugin.mjs       |  59 +++
 packages/server/src/opencode-config.ts        |  31 --
 packages/server/src/opencode-plugin.test.ts   |  38 ++
 packages/server/src/opencode-plugin.ts        | 175 ++++++++
 .../src/workspaces/__tests__/spawn.test.ts    |  40 +-
 packages/server/src/workspaces/manager.ts     |  16 +-
 packages/server/src/workspaces/spawn.ts       |  58 ++-
 packages/tauri-app/scripts/prebuild.js        |  22 +
 24 files changed, 671 insertions(+), 566 deletions(-)
 delete mode 100644 packages/opencode-config/opencode.jsonc
 delete mode 100644 packages/opencode-config/package-lock.json
 delete mode 100644 packages/opencode-config/package.json
 rename packages/{opencode-config => opencode-plugin}/README.md (55%)
 create mode 100644 packages/opencode-plugin/package.json
 rename packages/{opencode-config => opencode-plugin}/plugin/codenomad.ts (86%)
 rename packages/{opencode-config => opencode-plugin}/plugin/lib/background-process.ts (99%)
 rename packages/{opencode-config => opencode-plugin}/plugin/lib/client.ts (98%)
 rename packages/{opencode-config => opencode-plugin}/plugin/lib/request.ts (100%)
 create mode 100644 packages/opencode-plugin/tsconfig.json
 delete mode 100644 packages/server/scripts/copy-opencode-config.mjs
 create mode 100644 packages/server/scripts/package-opencode-plugin.mjs
 delete mode 100644 packages/server/src/opencode-config.ts
 create mode 100644 packages/server/src/opencode-plugin.test.ts
 create mode 100644 packages/server/src/opencode-plugin.ts

diff --git a/package-lock.json b/package-lock.json
index 83d6dd28..b2fb90ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,7 @@
           "packages/ui",
           "packages/electron-app",
           "packages/tauri-app",
-          "packages/opencode-config"
+          "packages/opencode-plugin"
         ]
       }
     },
@@ -1575,8 +1575,8 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@codenomad/opencode-config": {
-      "resolved": "packages/opencode-config",
+    "node_modules/@codenomad/codenomad-opencode-plugin": {
+      "resolved": "packages/opencode-plugin",
       "link": true
     },
     "node_modules/@codenomad/tauri-app": {
@@ -3228,6 +3228,43 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@opencode-ai/plugin": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@opencode-ai/plugin/-/plugin-1.3.7.tgz",
+      "integrity": "sha512-pVBIcYtHiniQ93Gj/KRkhrIz1oIAwGRifb7+dfGWdHRy00gr9DyEHFYmgHcBYgfrBavZrWw2xmqEDJdjdBuC7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@opencode-ai/sdk": "1.3.7",
+        "zod": "4.1.8"
+      },
+      "peerDependencies": {
+        "@opentui/core": ">=0.1.92",
+        "@opentui/solid": ">=0.1.92"
+      },
+      "peerDependenciesMeta": {
+        "@opentui/core": {
+          "optional": true
+        },
+        "@opentui/solid": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@opencode-ai/plugin/node_modules/@opencode-ai/sdk": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@opencode-ai/sdk/-/sdk-1.3.7.tgz",
+      "integrity": "sha512-ugkta0v0dMZchN15QGmqHb9zf35k+K1VM9wt3x4ZRJ6GxKAs0XlCmQPQJflgV9YSedNxjkgTud0GCCIWUSiUOg==",
+      "license": "MIT"
+    },
+    "node_modules/@opencode-ai/plugin/node_modules/zod": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.8.tgz",
+      "integrity": "sha512-5R1P+WwQqmmMIEACyzSvo4JXHY5WiAFHRMg+zBZKgKS+Q1viRa0C1hmUKtHltoIFKtIdki3pRxkmpP74jnNYHQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/@opencode-ai/sdk": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@opencode-ai/sdk/-/sdk-1.2.6.tgz",
@@ -4013,6 +4050,157 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tauri-apps/cli-linux-arm-gnueabihf": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-2.9.4.tgz",
+      "integrity": "sha512-tTWkEPig+2z3Rk0zqZYfjUYcgD+aSm72wdrIhdYobxbQZOBw0zfn50YtWv+av7bm0SHvv75f0l7JuwgZM1HFow==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-linux-arm64-gnu": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-2.9.4.tgz",
+      "integrity": "sha512-ql6vJ611qoqRYHxkKPnb2vHa27U+YRKRmIpLMMBeZnfFtZ938eao7402AQCH1mO2+/8ioUhbpy9R/ZcLTXVmkg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-linux-arm64-musl": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.9.4.tgz",
+      "integrity": "sha512-vg7yNn7ICTi6hRrcA/6ff2UpZQP7un3xe3SEld5QM0prgridbKAiXGaCKr3BnUBx/rGXegQlD/wiLcWdiiraSw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-linux-riscv64-gnu": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-riscv64-gnu/-/cli-linux-riscv64-gnu-2.9.4.tgz",
+      "integrity": "sha512-l8L+3VxNk6yv5T/Z/gv5ysngmIpsai40B9p6NQQyqYqxImqYX37pqREoEBl1YwG7szGnDibpWhidPrWKR59OJA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-linux-x64-gnu": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-2.9.4.tgz",
+      "integrity": "sha512-PepPhCXc/xVvE3foykNho46OmCyx47E/aG676vKTVp+mqin5d+IBqDL6wDKiGNT5OTTxKEyNlCQ81Xs2BQhhqA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-linux-x64-musl": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-2.9.4.tgz",
+      "integrity": "sha512-zcd1QVffh5tZs1u1SCKUV/V7RRynebgYUNWHuV0FsIF1MjnULUChEXhAhug7usCDq4GZReMJOoXa6rukEozWIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-win32-arm64-msvc": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-arm64-msvc/-/cli-win32-arm64-msvc-2.9.4.tgz",
+      "integrity": "sha512-/7ZhnP6PY04bEob23q8MH/EoDISdmR1wuNm0k9d5HV7TDMd2GGCDa8dPXA4vJuglJKXIfXqxFmZ4L+J+MO42+w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-win32-ia32-msvc": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-2.9.4.tgz",
+      "integrity": "sha512-1LmAfaC4Cq+3O1Ir1ksdhczhdtFSTIV51tbAGtbV/mr348O+M52A/xwCCXQank0OcdBxy5BctqkMtuZnQvA8uQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@tauri-apps/cli-win32-x64-msvc": {
       "version": "2.9.4",
       "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-2.9.4.tgz",
@@ -4030,6 +4218,23 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tauri-apps/cli/node_modules/@tauri-apps/cli-darwin-arm64": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-2.9.4.tgz",
+      "integrity": "sha512-9rHkMVtbMhe0AliVbrGpzMahOBg3rwV46JYRELxR9SN6iu1dvPOaMaiC4cP6M/aD1424ziXnnMdYU06RAH8oIw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@tauri-apps/plugin-dialog": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-dialog/-/plugin-dialog-2.6.0.tgz",
@@ -13243,49 +13448,16 @@
       "dev": true,
       "license": "MIT"
     },
-    "packages/opencode-config": {
-      "name": "@codenomad/opencode-config",
+    "packages/opencode-plugin": {
+      "name": "@codenomad/codenomad-opencode-plugin",
       "version": "0.15.0",
       "license": "MIT",
       "dependencies": {
         "@opencode-ai/plugin": "1.3.7"
-      }
-    },
-    "packages/opencode-config/node_modules/@opencode-ai/plugin": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/@opencode-ai/plugin/-/plugin-1.3.7.tgz",
-      "integrity": "sha512-pVBIcYtHiniQ93Gj/KRkhrIz1oIAwGRifb7+dfGWdHRy00gr9DyEHFYmgHcBYgfrBavZrWw2xmqEDJdjdBuC7g==",
-      "license": "MIT",
-      "dependencies": {
-        "@opencode-ai/sdk": "1.3.7",
-        "zod": "4.1.8"
-      },
-      "peerDependencies": {
-        "@opentui/core": ">=0.1.92",
-        "@opentui/solid": ">=0.1.92"
       },
-      "peerDependenciesMeta": {
-        "@opentui/core": {
-          "optional": true
-        },
-        "@opentui/solid": {
-          "optional": true
-        }
-      }
-    },
-    "packages/opencode-config/node_modules/@opencode-ai/sdk": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/@opencode-ai/sdk/-/sdk-1.3.7.tgz",
-      "integrity": "sha512-ugkta0v0dMZchN15QGmqHb9zf35k+K1VM9wt3x4ZRJ6GxKAs0XlCmQPQJflgV9YSedNxjkgTud0GCCIWUSiUOg==",
-      "license": "MIT"
-    },
-    "packages/opencode-config/node_modules/zod": {
-      "version": "4.1.8",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.8.tgz",
-      "integrity": "sha512-5R1P+WwQqmmMIEACyzSvo4JXHY5WiAFHRMg+zBZKgKS+Q1viRa0C1hmUKtHltoIFKtIdki3pRxkmpP74jnNYHQ==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
+      "devDependencies": {
+        "@types/node": "^22.18.0",
+        "typescript": "^5.6.3"
       }
     },
     "packages/server": {
diff --git a/package.json b/package.json
index 387e35b1..9035ba6c 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
       "packages/ui",
       "packages/electron-app",
       "packages/tauri-app",
-      "packages/opencode-config"
+      "packages/opencode-plugin"
     ]
   },
   "scripts": {
diff --git a/packages/electron-app/package.json b/packages/electron-app/package.json
index 9fca6f98..460daf6a 100644
--- a/packages/electron-app/package.json
+++ b/packages/electron-app/package.json
@@ -79,8 +79,8 @@
         ]
       },
       {
-        "from": "../server/dist/opencode-config",
-        "to": "opencode-config"
+        "from": "../server/dist/opencode-plugin",
+        "to": "opencode-plugin"
       }
     ],
     "mac": {
diff --git a/packages/electron-app/scripts/build.js b/packages/electron-app/scripts/build.js
index 1621ce1a..f308a2ad 100644
--- a/packages/electron-app/scripts/build.js
+++ b/packages/electron-app/scripts/build.js
@@ -137,6 +137,7 @@ async function build(platform) {
       console.log(`\n📦 Preparing resources for ${job.nodeTarget}...\n`)
       await run(process.execPath, [join(appDir, "scripts", "prepare-resources.js")], {
         cwd: workspaceRoot,
+        shell: false,
         env: { NODE_PATH: workspaceNodeModulesPath, CODENOMAD_NODE_TARGET: job.nodeTarget },
       })
 
diff --git a/packages/opencode-config/opencode.jsonc b/packages/opencode-config/opencode.jsonc
deleted file mode 100644
index c3eb6a56..00000000
--- a/packages/opencode-config/opencode.jsonc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "$schema": "https://opencode.ai/config.json"
-}
\ No newline at end of file
diff --git a/packages/opencode-config/package-lock.json b/packages/opencode-config/package-lock.json
deleted file mode 100644
index 840b6747..00000000
--- a/packages/opencode-config/package-lock.json
+++ /dev/null
@@ -1,380 +0,0 @@
-{
-  "name": "@codenomad/opencode-config",
-  "version": "0.15.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "@codenomad/opencode-config",
-      "version": "0.15.0",
-      "license": "MIT",
-      "dependencies": {
-        "@opencode-ai/plugin": "1.14.24"
-      }
-    },
-    "node_modules/@msgpackr-extract/msgpackr-extract-darwin-arm64": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.3.tgz",
-      "integrity": "sha512-QZHtlVgbAdy2zAqNA9Gu1UpIuI8Xvsd1v8ic6B2pZmeFnFcMWiPLfWXh7TVw4eGEZ/C9TH281KwhVoeQUKbyjw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@msgpackr-extract/msgpackr-extract-darwin-x64": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-3.0.3.tgz",
-      "integrity": "sha512-mdzd3AVzYKuUmiWOQ8GNhl64/IoFGol569zNRdkLReh6LRLHOXxU4U8eq0JwaD8iFHdVGqSy4IjFL4reoWCDFw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@msgpackr-extract/msgpackr-extract-linux-arm": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-3.0.3.tgz",
-      "integrity": "sha512-fg0uy/dG/nZEXfYilKoRe7yALaNmHoYeIoJuJ7KJ+YyU2bvY8vPv27f7UKhGRpY6euFYqEVhxCFZgAUNQBM3nw==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@msgpackr-extract/msgpackr-extract-linux-arm64": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-3.0.3.tgz",
-      "integrity": "sha512-YxQL+ax0XqBJDZiKimS2XQaf+2wDGVa1enVRGzEvLLVFeqa5kx2bWbtcSXgsxjQB7nRqqIGFIcLteF/sHeVtQg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@msgpackr-extract/msgpackr-extract-linux-x64": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-3.0.3.tgz",
-      "integrity": "sha512-cvwNfbP07pKUfq1uH+S6KJ7dT9K8WOE4ZiAcsrSes+UY55E/0jLYc+vq+DO7jlmqRb5zAggExKm0H7O/CBaesg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@msgpackr-extract/msgpackr-extract-win32-x64": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-3.0.3.tgz",
-      "integrity": "sha512-x0fWaQtYp4E6sktbsdAqnehxDgEc/VwM7uLsRCYWaiGu0ykYdZPiS8zCWdnjHwyiumousxfBm4SO31eXqwEZhQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@opencode-ai/plugin": {
-      "version": "1.14.24",
-      "resolved": "https://registry.npmjs.org/@opencode-ai/plugin/-/plugin-1.14.24.tgz",
-      "integrity": "sha512-upzw2a9KfzIkIvvjYSPJiyV6o85D3HLmhVvAJIwV8mYWxbvi2wP2NA0hJaMp2+GZVuUl/ra8WV8kacD1CWcb4w==",
-      "license": "MIT",
-      "dependencies": {
-        "@opencode-ai/sdk": "1.14.24",
-        "effect": "4.0.0-beta.48",
-        "zod": "4.1.8"
-      },
-      "peerDependencies": {
-        "@opentui/core": ">=0.1.99",
-        "@opentui/solid": ">=0.1.99"
-      },
-      "peerDependenciesMeta": {
-        "@opentui/core": {
-          "optional": true
-        },
-        "@opentui/solid": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@opencode-ai/sdk": {
-      "version": "1.14.24",
-      "resolved": "https://registry.npmjs.org/@opencode-ai/sdk/-/sdk-1.14.24.tgz",
-      "integrity": "sha512-hZWc1jx+gtZBM6Mff9iOMlXM1at9BbAGg0uNrQk8DuXpd8K19fu942emojdInO2zy0jC5/wWggsi7GJu7HMp/w==",
-      "license": "MIT",
-      "dependencies": {
-        "cross-spawn": "7.0.6"
-      }
-    },
-    "node_modules/@standard-schema/spec": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
-      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
-      "license": "MIT"
-    },
-    "node_modules/cross-spawn": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
-      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/detect-libc": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
-      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/effect": {
-      "version": "4.0.0-beta.48",
-      "resolved": "https://registry.npmjs.org/effect/-/effect-4.0.0-beta.48.tgz",
-      "integrity": "sha512-MMAM/ZabuNdNmgXiin+BAanQXK7qM8mlt7nfXDoJ/Gn9V8i89JlCq+2N0AiWmqFLXjGLA0u3FjiOjSOYQk5uMw==",
-      "license": "MIT",
-      "dependencies": {
-        "@standard-schema/spec": "^1.1.0",
-        "fast-check": "^4.6.0",
-        "find-my-way-ts": "^0.1.6",
-        "ini": "^6.0.0",
-        "kubernetes-types": "^1.30.0",
-        "msgpackr": "^1.11.9",
-        "multipasta": "^0.2.7",
-        "toml": "^4.1.1",
-        "uuid": "^13.0.0",
-        "yaml": "^2.8.3"
-      }
-    },
-    "node_modules/fast-check": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/fast-check/-/fast-check-4.7.0.tgz",
-      "integrity": "sha512-NsZRtqvSSoCP0HbNjUD+r1JH8zqZalyp6gLY9e7OYs7NK9b6AHOs2baBFeBG7bVNsuoukh89x2Yg3rPsul8ziQ==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/dubzzz"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/fast-check"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "pure-rand": "^8.0.0"
-      },
-      "engines": {
-        "node": ">=12.17.0"
-      }
-    },
-    "node_modules/find-my-way-ts": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/find-my-way-ts/-/find-my-way-ts-0.1.6.tgz",
-      "integrity": "sha512-a85L9ZoXtNAey3Y6Z+eBWW658kO/MwR7zIafkIUPUMf3isZG0NCs2pjW2wtjxAKuJPxMAsHUIP4ZPGv0o5gyTA==",
-      "license": "MIT"
-    },
-    "node_modules/ini": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-6.0.0.tgz",
-      "integrity": "sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==",
-      "license": "ISC",
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "license": "ISC"
-    },
-    "node_modules/kubernetes-types": {
-      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/kubernetes-types/-/kubernetes-types-1.30.0.tgz",
-      "integrity": "sha512-Dew1okvhM/SQcIa2rcgujNndZwU8VnSapDgdxlYoB84ZlpAD43U6KLAFqYo17ykSFGHNPrg0qry0bP+GJd9v7Q==",
-      "license": "Apache-2.0"
-    },
-    "node_modules/msgpackr": {
-      "version": "1.11.10",
-      "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.11.10.tgz",
-      "integrity": "sha512-iCZNq+HszvF+fC3anCm4nBmWEnbeIAfpDs6IStAEKhQ2YSgkjzVG2FF9XJqwwQh5bH3N9OUTUt4QwVN6MLMLtA==",
-      "license": "MIT",
-      "optionalDependencies": {
-        "msgpackr-extract": "^3.0.2"
-      }
-    },
-    "node_modules/msgpackr-extract": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/msgpackr-extract/-/msgpackr-extract-3.0.3.tgz",
-      "integrity": "sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "node-gyp-build-optional-packages": "5.2.2"
-      },
-      "bin": {
-        "download-msgpackr-prebuilds": "bin/download-prebuilds.js"
-      },
-      "optionalDependencies": {
-        "@msgpackr-extract/msgpackr-extract-darwin-arm64": "3.0.3",
-        "@msgpackr-extract/msgpackr-extract-darwin-x64": "3.0.3",
-        "@msgpackr-extract/msgpackr-extract-linux-arm": "3.0.3",
-        "@msgpackr-extract/msgpackr-extract-linux-arm64": "3.0.3",
-        "@msgpackr-extract/msgpackr-extract-linux-x64": "3.0.3",
-        "@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.3"
-      }
-    },
-    "node_modules/multipasta": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/multipasta/-/multipasta-0.2.7.tgz",
-      "integrity": "sha512-KPA58d68KgGil15oDqXjkUBEBYc00XvbPj5/X+dyzeo/lWm9Nc25pQRlf1D+gv4OpK7NM0J1odrbu9JNNGvynA==",
-      "license": "MIT"
-    },
-    "node_modules/node-gyp-build-optional-packages": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.2.2.tgz",
-      "integrity": "sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "detect-libc": "^2.0.1"
-      },
-      "bin": {
-        "node-gyp-build-optional-packages": "bin.js",
-        "node-gyp-build-optional-packages-optional": "optional.js",
-        "node-gyp-build-optional-packages-test": "build-test.js"
-      }
-    },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pure-rand": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-8.4.0.tgz",
-      "integrity": "sha512-IoM8YF/jY0hiugFo/wOWqfmarlE6J0wc6fDK1PhftMk7MGhVZl88sZimmqBBFomLOCSmcCCpsfj7wXASCpvK9A==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/dubzzz"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/fast-check"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "license": "MIT",
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/toml": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/toml/-/toml-4.1.1.tgz",
-      "integrity": "sha512-EBJnVBr3dTXdA89WVFoAIPUqkBjxPMwRqsfuo1r240tKFHXv3zgca4+NJib/h6TyvGF7vOawz0jGuryJCdNHrw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=20"
-      }
-    },
-    "node_modules/uuid": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-13.0.0.tgz",
-      "integrity": "sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==",
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist-node/bin/uuid"
-      }
-    },
-    "node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "license": "ISC",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/yaml": {
-      "version": "2.8.3",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz",
-      "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==",
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/eemeli"
-      }
-    },
-    "node_modules/zod": {
-      "version": "4.1.8",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    }
-  }
-}
diff --git a/packages/opencode-config/package.json b/packages/opencode-config/package.json
deleted file mode 100644
index b7d127b9..00000000
--- a/packages/opencode-config/package.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "name": "@codenomad/opencode-config",
-  "version": "0.15.0",
-  "private": true,
-  "license": "MIT",
-  "dependencies": {
-    "@opencode-ai/plugin": "1.3.7"
-  }
-}
diff --git a/packages/opencode-config/README.md b/packages/opencode-plugin/README.md
similarity index 55%
rename from packages/opencode-config/README.md
rename to packages/opencode-plugin/README.md
index 28e60bd2..16b8a819 100644
--- a/packages/opencode-config/README.md
+++ b/packages/opencode-plugin/README.md
@@ -1,16 +1,16 @@
-# opencode-config
+# CodeNomad OpenCode Plugin
 
 ## 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.
+Packaged OpenCode plugin injected into every OpenCode instance that CodeNomad launches. It provides the CodeNomad bridge 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.
+An npm-packable plugin package. Production builds ship a local `.tgz` and inject it through `OPENCODE_CONFIG_CONTENT`; dev runs reference the TypeScript plugin entry directly with a `file://` URL.
 
 ## 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`).
+- CodeNomad sets `OPENCODE_CONFIG_CONTENT` when spawning each OpenCode instance (`packages/server/src/workspaces/manager.ts`).
+- The server packs this package during build (`packages/server/scripts/package-opencode-plugin.mjs`).
+- OpenCode loads the plugin from `plugin` entries injected into the config content.
+- 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-plugin/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
@@ -25,8 +25,8 @@ A packaged config directory that CodeNomad copies into `~/.config/codenomad/open
 - 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 entry: `packages/opencode-plugin/plugin/codenomad.ts`
+- Plugin client: `packages/opencode-plugin/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`
diff --git a/packages/opencode-plugin/package.json b/packages/opencode-plugin/package.json
new file mode 100644
index 00000000..fe7e16c3
--- /dev/null
+++ b/packages/opencode-plugin/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@codenomad/codenomad-opencode-plugin",
+  "version": "0.15.0",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/codenomad.js",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.json"
+  },
+  "dependencies": {
+    "@opencode-ai/plugin": "1.3.7"
+  },
+  "devDependencies": {
+    "@types/node": "^22.18.0",
+    "typescript": "^5.6.3"
+  }
+}
diff --git a/packages/opencode-config/plugin/codenomad.ts b/packages/opencode-plugin/plugin/codenomad.ts
similarity index 86%
rename from packages/opencode-config/plugin/codenomad.ts
rename to packages/opencode-plugin/plugin/codenomad.ts
index 08515dd8..61d1827f 100644
--- a/packages/opencode-config/plugin/codenomad.ts
+++ b/packages/opencode-plugin/plugin/codenomad.ts
@@ -1,10 +1,14 @@
 import type { PluginInput } from "@opencode-ai/plugin"
-import { createCodeNomadClient, getCodeNomadConfig } from "./lib/client"
-import { createBackgroundProcessTools } from "./lib/background-process"
+import { createCodeNomadClient, getCodeNomadConfig } from "./lib/client.js"
+import { createBackgroundProcessTools } from "./lib/background-process.js"
 
 let voiceModeEnabled = false
 
-export async function CodeNomadPlugin(input: PluginInput) {
+export async function CodeNomadPlugin(input: PluginInput): Promise<{
+  tool: ReturnType<typeof createBackgroundProcessTools>
+  "chat.message": CodeNomadChatMessageHook
+  event: CodeNomadEventHook
+}> {
   const config = getCodeNomadConfig()
   const client = createCodeNomadClient(config)
   const backgroundProcessTools = createBackgroundProcessTools(config, { baseDir: input.directory })
@@ -45,6 +49,13 @@ export async function CodeNomadPlugin(input: PluginInput) {
   }
 }
 
+type CodeNomadChatMessageHook = (
+  _input: { sessionID: string },
+  output: { message: { system?: string } },
+) => Promise<void>
+
+type CodeNomadEventHook = (input: { event: any }) => Promise<void>
+
 function buildVoiceModePrompt(): string {
   return [
     "Voice conversation mode is enabled.",
diff --git a/packages/opencode-config/plugin/lib/background-process.ts b/packages/opencode-plugin/plugin/lib/background-process.ts
similarity index 99%
rename from packages/opencode-config/plugin/lib/background-process.ts
rename to packages/opencode-plugin/plugin/lib/background-process.ts
index 15198288..6840737d 100644
--- a/packages/opencode-config/plugin/lib/background-process.ts
+++ b/packages/opencode-plugin/plugin/lib/background-process.ts
@@ -1,6 +1,6 @@
 import path from "path"
 import { tool } from "@opencode-ai/plugin/tool"
-import { createCodeNomadRequester, type CodeNomadConfig } from "./request"
+import { createCodeNomadRequester, type CodeNomadConfig } from "./request.js"
 
 type BackgroundProcess = {
   id: string
diff --git a/packages/opencode-config/plugin/lib/client.ts b/packages/opencode-plugin/plugin/lib/client.ts
similarity index 98%
rename from packages/opencode-config/plugin/lib/client.ts
rename to packages/opencode-plugin/plugin/lib/client.ts
index fddc49a4..aee7a15d 100644
--- a/packages/opencode-config/plugin/lib/client.ts
+++ b/packages/opencode-plugin/plugin/lib/client.ts
@@ -1,6 +1,6 @@
-import { createCodeNomadRequester, type CodeNomadConfig, type PluginEvent } from "./request"
+import { createCodeNomadRequester, type CodeNomadConfig, type PluginEvent } from "./request.js"
 
-export { getCodeNomadConfig, type CodeNomadConfig, type PluginEvent } from "./request"
+export { getCodeNomadConfig, type CodeNomadConfig, type PluginEvent } from "./request.js"
 
 export function createCodeNomadClient(config: CodeNomadConfig) {
   const requester = createCodeNomadRequester(config)
diff --git a/packages/opencode-config/plugin/lib/request.ts b/packages/opencode-plugin/plugin/lib/request.ts
similarity index 100%
rename from packages/opencode-config/plugin/lib/request.ts
rename to packages/opencode-plugin/plugin/lib/request.ts
diff --git a/packages/opencode-plugin/tsconfig.json b/packages/opencode-plugin/tsconfig.json
new file mode 100644
index 00000000..09a86627
--- /dev/null
+++ b/packages/opencode-plugin/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": false,
+    "outDir": "dist",
+    "rootDir": "plugin",
+    "types": ["node"]
+  },
+  "include": ["plugin/**/*.ts"],
+  "exclude": ["dist", "node_modules"]
+}
diff --git a/packages/server/package.json b/packages/server/package.json
index b47bdf29..781c8b83 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -17,10 +17,10 @@
     "codenomad": "dist/bin.js"
   },
   "scripts": {
-    "build": "npm run build:ui && npm run prepare-ui && tsc -p tsconfig.json && node ./scripts/copy-auth-pages.mjs && npm run prepare-config",
+    "build": "npm run build:ui && npm run prepare-ui && tsc -p tsconfig.json && node ./scripts/copy-auth-pages.mjs && npm run prepare-plugin",
     "build:ui": "npm run build --prefix ../ui",
     "prepare-ui": "node ./scripts/copy-ui-dist.mjs",
-    "prepare-config": "node ./scripts/copy-opencode-config.mjs",
+    "prepare-plugin": "node ./scripts/package-opencode-plugin.mjs",
     "dev": "cross-env CODENOMAD_DEV=1 CODENOMAD_SERVER_PASSWORD=codenomad-dev CLI_UI_DEV_SERVER=http://localhost:3000 CLI_HTTPS=false CLI_HTTP=true tsx src/index.ts",
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
diff --git a/packages/server/scripts/copy-opencode-config.mjs b/packages/server/scripts/copy-opencode-config.mjs
deleted file mode 100644
index 5e714395..00000000
--- a/packages/server/scripts/copy-opencode-config.mjs
+++ /dev/null
@@ -1,61 +0,0 @@
-#!/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}`)
diff --git a/packages/server/scripts/package-opencode-plugin.mjs b/packages/server/scripts/package-opencode-plugin.mjs
new file mode 100644
index 00000000..31990547
--- /dev/null
+++ b/packages/server/scripts/package-opencode-plugin.mjs
@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+import { readdirSync, renameSync, rmSync, mkdirSync } from "fs"
+import path from "path"
+import { spawnSync } from "child_process"
+import { fileURLToPath } from "url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const serverRoot = path.resolve(__dirname, "..")
+const workspaceRoot = path.resolve(serverRoot, "../..")
+const pluginRoot = path.resolve(serverRoot, "../opencode-plugin")
+const targetDir = path.resolve(serverRoot, "dist/opencode-plugin")
+const targetTarballName = "codenomad-opencode-plugin.tgz"
+const pluginWorkspace = "@codenomad/codenomad-opencode-plugin"
+const npmCommand = process.platform === "win32" ? "npm.cmd" : "npm"
+
+function run(command, args, options) {
+  const result = spawnSync(command, args, {
+    stdio: options?.capture ? ["ignore", "pipe", "inherit"] : "inherit",
+    shell: process.platform === "win32",
+    encoding: "utf8",
+    ...options,
+  })
+
+  if (result.error) {
+    console.error(`[package-opencode-plugin] ${command} failed to start`, result.error)
+    process.exit(1)
+  }
+
+  if (result.status !== 0) {
+    console.error(`[package-opencode-plugin] ${command} exited with code ${result.status ?? 1}`)
+    process.exit(result.status ?? 1)
+  }
+
+  return result.stdout ?? ""
+}
+
+rmSync(targetDir, { recursive: true, force: true })
+mkdirSync(targetDir, { recursive: true })
+
+console.log(`[package-opencode-plugin] Building ${pluginWorkspace}`)
+run(npmCommand, ["run", "build", "--workspace", pluginWorkspace], { cwd: workspaceRoot })
+
+console.log(`[package-opencode-plugin] Packing ${pluginWorkspace}`)
+run(npmCommand, ["pack", "--pack-destination", targetDir], { cwd: pluginRoot, capture: true })
+
+const tarballs = readdirSync(targetDir).filter((name) => name.endsWith(".tgz"))
+if (tarballs.length !== 1) {
+  console.error(`[package-opencode-plugin] Expected exactly one packed plugin tarball in ${targetDir}, found ${tarballs.length}`)
+  process.exit(1)
+}
+
+const packedTarball = path.join(targetDir, tarballs[0])
+const targetTarball = path.join(targetDir, targetTarballName)
+if (packedTarball !== targetTarball) {
+  renameSync(packedTarball, targetTarball)
+}
+
+console.log(`[package-opencode-plugin] Packed ${targetTarball}`)
diff --git a/packages/server/src/opencode-config.ts b/packages/server/src/opencode-config.ts
deleted file mode 100644
index f61cb9ca..00000000
--- a/packages/server/src/opencode-config.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-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
-}
diff --git a/packages/server/src/opencode-plugin.test.ts b/packages/server/src/opencode-plugin.test.ts
new file mode 100644
index 00000000..dda5f988
--- /dev/null
+++ b/packages/server/src/opencode-plugin.test.ts
@@ -0,0 +1,38 @@
+import assert from "node:assert/strict"
+import { describe, it } from "node:test"
+
+import { buildOpencodeConfigContent } from "./opencode-plugin"
+
+describe("buildOpencodeConfigContent", () => {
+  it("creates config content with the CodeNomad plugin", () => {
+    const content = buildOpencodeConfigContent(undefined, "file:///plugin.tgz")
+
+    assert.deepEqual(JSON.parse(content), {
+      "$schema": "https://opencode.ai/config.json",
+      plugin: ["file:///plugin.tgz"],
+    })
+  })
+
+  it("merges with existing JSONC content", () => {
+    const content = buildOpencodeConfigContent(
+      `{
+        // user plugin
+        "plugin": ["npm:user-plugin",],
+        "model": "test-model",
+      }`,
+      "file:///plugin.tgz",
+    )
+
+    assert.deepEqual(JSON.parse(content), {
+      "$schema": "https://opencode.ai/config.json",
+      plugin: ["npm:user-plugin", "file:///plugin.tgz"],
+      model: "test-model",
+    })
+  })
+
+  it("does not duplicate the CodeNomad plugin", () => {
+    const content = buildOpencodeConfigContent('{"plugin":["file:///plugin.tgz"]}', "file:///plugin.tgz")
+
+    assert.deepEqual(JSON.parse(content).plugin, ["file:///plugin.tgz"])
+  })
+})
diff --git a/packages/server/src/opencode-plugin.ts b/packages/server/src/opencode-plugin.ts
new file mode 100644
index 00000000..761292da
--- /dev/null
+++ b/packages/server/src/opencode-plugin.ts
@@ -0,0 +1,175 @@
+import { existsSync, readdirSync } from "fs"
+import path from "path"
+import { fileURLToPath, pathToFileURL } from "url"
+import { createLogger } from "./logger"
+
+const log = createLogger({ component: "opencode-plugin" })
+const pluginPackageName = "@codenomad/codenomad-opencode-plugin"
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const resourcesPath = (process as NodeJS.Process & { resourcesPath?: string }).resourcesPath
+const devPluginEntry = path.resolve(__dirname, "../../opencode-plugin/plugin/codenomad.ts")
+const prodPluginDirs = [
+  resourcesPath ? path.resolve(resourcesPath, "opencode-plugin") : undefined,
+  resourcesPath ? path.resolve(resourcesPath, "server/dist/opencode-plugin") : undefined,
+  path.resolve(__dirname, "opencode-plugin"),
+].filter((dir): dir is string => Boolean(dir))
+
+const isDevBuild = Boolean(
+  process.env.CODENOMAD_DEV ??
+    process.env.CLI_UI_DEV_SERVER ??
+    process.env.VITE_DEV_SERVER_URL ??
+    process.env.ELECTRON_RENDERER_URL,
+)
+const isSourceRun = path.basename(__dirname) === "src" && existsSync(devPluginEntry)
+
+export function getCodeNomadPluginUrl(): string {
+  if (isDevBuild || isSourceRun) {
+    if (!existsSync(devPluginEntry)) {
+      throw new Error(`CodeNomad OpenCode plugin entry missing at ${devPluginEntry}`)
+    }
+
+    log.debug({ pluginEntry: devPluginEntry }, "Using OpenCode plugin source directly (dev mode)")
+    return pathToFileURL(devPluginEntry).href
+  }
+
+  for (const dir of prodPluginDirs) {
+    const tarball = findPluginTarball(dir)
+    if (tarball) {
+      return toNpmFileSpecifier(tarball)
+    }
+  }
+
+  throw new Error(`CodeNomad OpenCode plugin package missing in ${prodPluginDirs.join(", ")}`)
+}
+
+export function buildOpencodeConfigContent(existingContent: string | undefined, pluginUrl: string): string {
+  const config = existingContent?.trim() ? parseJsoncObject(existingContent) : {}
+  const existingPlugins = normalizePluginEntries(config.plugin)
+  if (!existingPlugins.includes(pluginUrl)) {
+    existingPlugins.push(pluginUrl)
+  }
+  return JSON.stringify(
+    {
+      "$schema": typeof config["$schema"] === "string" ? config["$schema"] : "https://opencode.ai/config.json",
+      ...config,
+      plugin: existingPlugins,
+    },
+    null,
+    2,
+  )
+}
+
+export function resolveExistingOpencodeConfigContent(userEnvironment: Record<string, unknown>): string | undefined {
+  const userValue = normalizeConfigContentValue(userEnvironment.OPENCODE_CONFIG_CONTENT)
+  if (userValue) {
+    return userValue
+  }
+  return normalizeConfigContentValue(process.env.OPENCODE_CONFIG_CONTENT)
+}
+
+function toNpmFileSpecifier(filePath: string): string {
+  return `${pluginPackageName}@file:${filePath.replace(/\\/g, "/")}`
+}
+
+function findPluginTarball(dir: string): string | null {
+  if (!existsSync(dir)) {
+    return null
+  }
+
+  const tarballs = readdirSync(dir)
+    .filter((name) => name.endsWith(".tgz"))
+    .sort()
+  return tarballs.length > 0 ? path.resolve(dir, tarballs[tarballs.length - 1]) : null
+}
+
+function normalizeConfigContentValue(value: unknown): string | undefined {
+  return typeof value === "string" && value.trim().length > 0 ? value : undefined
+}
+
+function parseJsoncObject(content: string): Record<string, unknown> {
+  try {
+    const parsed = JSON.parse(stripJsonc(content))
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      throw new Error("OPENCODE_CONFIG_CONTENT must be a JSON object")
+    }
+    return parsed as Record<string, unknown>
+  } catch (error) {
+    const reason = error instanceof Error ? error.message : String(error)
+    throw new Error(`Failed to parse OPENCODE_CONFIG_CONTENT: ${reason}`)
+  }
+}
+
+function normalizePluginEntries(value: unknown): string[] {
+  if (value === undefined) {
+    return []
+  }
+  if (typeof value === "string") {
+    return [value]
+  }
+  if (Array.isArray(value) && value.every((item) => typeof item === "string")) {
+    return [...value]
+  }
+  throw new Error("OPENCODE_CONFIG_CONTENT plugin field must be a string or string array")
+}
+
+function stripJsonc(input: string): string {
+  let output = ""
+  let inString = false
+  let escape = false
+
+  for (let index = 0; index < input.length; index += 1) {
+    const char = input[index]
+    const next = input[index + 1]
+
+    if (escape) {
+      output += char
+      escape = false
+      continue
+    }
+
+    if (char === "\\" && inString) {
+      output += char
+      escape = true
+      continue
+    }
+
+    if (char === '"') {
+      output += char
+      inString = !inString
+      continue
+    }
+
+    if (!inString && char === "/" && next === "/") {
+      while (index < input.length && input[index] !== "\n") {
+        index += 1
+      }
+      output += "\n"
+      continue
+    }
+
+    if (!inString && char === "/" && next === "*") {
+      index += 2
+      while (index < input.length && !(input[index] === "*" && input[index + 1] === "/")) {
+        output += input[index] === "\n" ? "\n" : ""
+        index += 1
+      }
+      index += 1
+      continue
+    }
+
+    if (!inString && char === ",") {
+      let lookahead = index + 1
+      while (lookahead < input.length && /\s/.test(input[lookahead])) {
+        lookahead += 1
+      }
+      if (input[lookahead] === "}" || input[lookahead] === "]") {
+        continue
+      }
+    }
+
+    output += char
+  }
+
+  return output
+}
diff --git a/packages/server/src/workspaces/__tests__/spawn.test.ts b/packages/server/src/workspaces/__tests__/spawn.test.ts
index b33aec6a..7b829ac7 100644
--- a/packages/server/src/workspaces/__tests__/spawn.test.ts
+++ b/packages/server/src/workspaces/__tests__/spawn.test.ts
@@ -54,12 +54,12 @@ describe("buildWindowsSpawnSpec", () => {
       {
         cwd: String.raw`\\wsl.localhost\Ubuntu\home\dev\workspace`,
         env: {
-          OPENCODE_CONFIG_DIR: String.raw`C:\Users\dev\AppData\Roaming\CodeNomad\opencode-config`,
+          OPENCODE_CONFIG_CONTENT: JSON.stringify({ plugin: ["file:///C:/Users/dev/AppData/Roaming/CodeNomad/plugin.tgz"] }),
           CODENOMAD_INSTANCE_ID: "workspace-123",
           OPENCODE_SERVER_BASE_URL: "https://127.0.0.1:4321/workspaces/workspace-123/worktrees/root/instance",
           OPENCODE_SERVER_PASSWORD: "secret",
         },
-        propagateEnvKeys: ["OPENCODE_CONFIG_DIR", "CODENOMAD_INSTANCE_ID", "OPENCODE_SERVER_BASE_URL", "OPENCODE_SERVER_PASSWORD"],
+        propagateEnvKeys: ["OPENCODE_CONFIG_CONTENT", "CODENOMAD_INSTANCE_ID", "OPENCODE_SERVER_BASE_URL", "OPENCODE_SERVER_PASSWORD"],
       },
     )
 
@@ -76,23 +76,47 @@ describe("buildWindowsSpawnSpec", () => {
       "0",
     ])
     assert.equal(spec.cwd, undefined)
-    assert.equal(spec.env?.WSLENV, "OPENCODE_CONFIG_DIR/p:CODENOMAD_INSTANCE_ID:OPENCODE_SERVER_BASE_URL:OPENCODE_SERVER_PASSWORD")
+    assert.equal(spec.env?.WSLENV, "OPENCODE_CONFIG_CONTENT:CODENOMAD_INSTANCE_ID:OPENCODE_SERVER_BASE_URL:OPENCODE_SERVER_PASSWORD")
   })
 
-  it("upgrades existing WSLENV path entries to include /p", () => {
+  it("preserves non-path OPENCODE_CONFIG_CONTENT WSLENV entries", () => {
     const spec = buildWindowsSpawnSpec(
       String.raw`\\wsl.localhost\Ubuntu\home\dev\.opencode\bin\opencode`,
       ["serve"],
       {
         env: {
-          OPENCODE_CONFIG_DIR: String.raw`C:\Users\dev\AppData\Roaming\CodeNomad\opencode-config`,
-          WSLENV: "OPENCODE_CONFIG_DIR:CODENOMAD_INSTANCE_ID/u",
+          OPENCODE_CONFIG_CONTENT: JSON.stringify({ plugin: ["file:///C:/Users/dev/AppData/Roaming/CodeNomad/plugin.tgz"] }),
+          WSLENV: "OPENCODE_CONFIG_CONTENT:CODENOMAD_INSTANCE_ID/u",
         },
-        propagateEnvKeys: ["OPENCODE_CONFIG_DIR", "CODENOMAD_INSTANCE_ID"],
+        propagateEnvKeys: ["OPENCODE_CONFIG_CONTENT", "CODENOMAD_INSTANCE_ID"],
       },
     )
 
-    assert.equal(spec.env?.WSLENV, "OPENCODE_CONFIG_DIR/p:CODENOMAD_INSTANCE_ID/u")
+    assert.equal(spec.env?.WSLENV, "OPENCODE_CONFIG_CONTENT:CODENOMAD_INSTANCE_ID/u")
+  })
+
+  it("rewrites packaged plugin paths for WSL before launching", () => {
+    const spec = buildWindowsSpawnSpec(
+      String.raw`\\wsl.localhost\Ubuntu\home\dev\.opencode\bin\opencode`,
+      ["serve"],
+      {
+        env: {
+          OPENCODE_CONFIG_CONTENT: JSON.stringify({
+            plugin: [
+              "@codenomad/codenomad-opencode-plugin@file:C:/Users/dev/AppData/Roaming/CodeNomad/codenomad-opencode-plugin.tgz",
+            ],
+          }),
+        },
+        propagateEnvKeys: ["OPENCODE_CONFIG_CONTENT"],
+      },
+    )
+
+    assert.equal(spec.command, "wsl.exe")
+    assert.equal(spec.env?.CODENOMAD_OPENCODE_PLUGIN_WSL_PATH, String.raw`C:\Users\dev\AppData\Roaming\CodeNomad\codenomad-opencode-plugin.tgz`)
+    assert.match(spec.env?.OPENCODE_CONFIG_CONTENT ?? "", /__CODENOMAD_OPENCODE_PLUGIN_WSL_PATH__/)
+    assert.equal(spec.env?.WSLENV, "OPENCODE_CONFIG_CONTENT:CODENOMAD_OPENCODE_PLUGIN_WSL_PATH/p")
+    assert.deepEqual(spec.args.slice(0, 4), ["--distribution", "Ubuntu", "--exec", "sh"])
+    assert.match(spec.args[5] ?? "", /CODENOMAD_OPENCODE_PLUGIN_WSL_PATH/)
   })
 
   it("propagates inherited known path variables even when they are not explicitly requested", () => {
diff --git a/packages/server/src/workspaces/manager.ts b/packages/server/src/workspaces/manager.ts
index 3ce25069..cd1933b2 100644
--- a/packages/server/src/workspaces/manager.ts
+++ b/packages/server/src/workspaces/manager.ts
@@ -10,7 +10,11 @@ import { clearWorkspaceSearchCache } from "../filesystem/search-cache"
 import { WorkspaceDescriptor, WorkspaceFileResponse, FileSystemEntry } from "../api-types"
 import { WorkspaceRuntime, ProcessExitInfo } from "./runtime"
 import { Logger } from "../logger"
-import { getOpencodeConfigDir } from "../opencode-config.js"
+import {
+  buildOpencodeConfigContent,
+  getCodeNomadPluginUrl,
+  resolveExistingOpencodeConfigContent,
+} from "../opencode-plugin.js"
 import {
   OPENCODE_SERVER_BASE_URL_ENV,
   buildOpencodeBasicAuthHeader,
@@ -37,12 +41,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 codeNomadPluginUrl: 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()
+    this.codeNomadPluginUrl = getCodeNomadPluginUrl()
   }
 
   list(): WorkspaceDescriptor[] {
@@ -125,6 +129,10 @@ export class WorkspaceManager {
     const serverConfig = this.options.settings.getOwner("config", "server")
     const envVars = (serverConfig as any)?.environmentVariables
     const userEnvironment = envVars && typeof envVars === "object" && !Array.isArray(envVars) ? (envVars as any) : {}
+    const opencodeConfigContent = buildOpencodeConfigContent(
+      resolveExistingOpencodeConfigContent(userEnvironment),
+      this.codeNomadPluginUrl,
+    )
     const serverBaseUrl = this.options.getServerBaseUrl()
     const normalizedServerBaseUrl = serverBaseUrl.replace(/\/+$/, "")
 
@@ -140,7 +148,7 @@ export class WorkspaceManager {
 
     const environment = {
       ...userEnvironment,
-      OPENCODE_CONFIG_DIR: this.opencodeConfigDir,
+      OPENCODE_CONFIG_CONTENT: opencodeConfigContent,
       CODENOMAD_INSTANCE_ID: id,
       CODENOMAD_BASE_URL: serverBaseUrl,
       ...(this.options.nodeExtraCaCertsPath ? { NODE_EXTRA_CA_CERTS: this.options.nodeExtraCaCertsPath } : {}),
diff --git a/packages/server/src/workspaces/spawn.ts b/packages/server/src/workspaces/spawn.ts
index 8add4aa4..f40dcdb0 100644
--- a/packages/server/src/workspaces/spawn.ts
+++ b/packages/server/src/workspaces/spawn.ts
@@ -6,7 +6,13 @@ export const WINDOWS_POWERSHELL_EXTENSIONS = new Set([".ps1"])
 
 const VERSION_REGEX = /([0-9]+\.[0-9]+\.[0-9A-Za-z.-]+)/
 const WSL_UNC_PATH_REGEX = /^\\\\wsl(?:\.localhost|\$)\\([^\\/]+)(?:[\\/](.*))?$/i
-const WSL_PATH_ENV_KEYS = new Set(["OPENCODE_CONFIG_DIR", "NODE_EXTRA_CA_CERTS"])
+const CODENOMAD_PLUGIN_PACKAGE_NAME = "@codenomad/codenomad-opencode-plugin"
+const WSL_PLUGIN_PATH_ENV = "CODENOMAD_OPENCODE_PLUGIN_WSL_PATH"
+const WSL_PLUGIN_PATH_PLACEHOLDER = "__CODENOMAD_OPENCODE_PLUGIN_WSL_PATH__"
+const CODENOMAD_PLUGIN_FILE_SPEC_REGEX = new RegExp(
+  `(${escapeRegex(CODENOMAD_PLUGIN_PACKAGE_NAME)}@file:)([A-Za-z]:[^"\\r\\n]+?\\.tgz)`,
+)
+const WSL_PATH_ENV_KEYS = new Set(["NODE_EXTRA_CA_CERTS", WSL_PLUGIN_PATH_ENV])
 
 export interface SpawnSpec {
   command: string
@@ -187,6 +193,8 @@ export function probeBinaryVersion(binaryPath: string): {
 
 function buildWslSpawnSpec(wslPath: WslPath, args: string[], options: BuildSpawnSpecOptions): SpawnSpec {
   const workingDirectory = options.cwd ? resolveWslWorkingDirectory(options.cwd, wslPath.distro) : undefined
+  const env = buildWslEnvironment(options.env, options.propagateEnvKeys)
+  const shouldTranslatePluginPath = Boolean(env?.[WSL_PLUGIN_PATH_ENV])
   if (options.cwd && !workingDirectory) {
     throw new Error(
       `Unable to translate workspace folder for WSL binary in distro "${wslPath.distro}": ${options.cwd}`,
@@ -194,14 +202,14 @@ function buildWslSpawnSpec(wslPath: WslPath, args: string[], options: BuildSpawn
   }
 
   const wslArgs = ["--distribution", wslPath.distro]
-  const shouldWrapWithShell = Boolean(options.wslPidMarker) || workingDirectory?.kind === "windows"
+  const shouldWrapWithShell = Boolean(options.wslPidMarker) || workingDirectory?.kind === "windows" || shouldTranslatePluginPath
 
   if (!shouldWrapWithShell && workingDirectory?.kind === "linux") {
     wslArgs.push("--cd", workingDirectory.path)
   }
 
   if (shouldWrapWithShell) {
-    const launchScript = buildWslLaunchScript(workingDirectory ?? undefined, options.wslPidMarker)
+    const launchScript = buildWslLaunchScript(workingDirectory ?? undefined, options.wslPidMarker, shouldTranslatePluginPath)
     wslArgs.push(
       "--exec",
       "sh",
@@ -224,12 +232,16 @@ function buildWslSpawnSpec(wslPath: WslPath, args: string[], options: BuildSpawn
     command: "wsl.exe",
     args: wslArgs,
     options: {},
-    env: buildWslEnvironment(options.env, options.propagateEnvKeys),
+    env,
     wsl: { distro: wslPath.distro, pidMarker: options.wslPidMarker },
   }
 }
 
-function buildWslLaunchScript(workingDirectory: WslWorkingDirectory | undefined, pidMarker: string | undefined): string {
+function buildWslLaunchScript(
+  workingDirectory: WslWorkingDirectory | undefined,
+  pidMarker: string | undefined,
+  translatePluginPath: boolean,
+): string {
   const steps: string[] = []
 
   if (pidMarker) {
@@ -244,6 +256,12 @@ function buildWslLaunchScript(workingDirectory: WslWorkingDirectory | undefined,
     steps.push("shift")
   }
 
+  if (translatePluginPath) {
+    steps.push(
+      `if [ -n "$${WSL_PLUGIN_PATH_ENV}" ] && [ -n "$OPENCODE_CONFIG_CONTENT" ]; then escaped_plugin_path=$(printf '%s' "$${WSL_PLUGIN_PATH_ENV}" | sed 's/[\\&|]/\\\\&/g'); OPENCODE_CONFIG_CONTENT=$(printf '%s' "$OPENCODE_CONFIG_CONTENT" | sed "s|${WSL_PLUGIN_PATH_PLACEHOLDER}|$escaped_plugin_path|g"); export OPENCODE_CONFIG_CONTENT; unset ${WSL_PLUGIN_PATH_ENV}; fi`,
+    )
+  }
+
   steps.push('exec "$@"')
   return steps.join(" && ")
 }
@@ -266,17 +284,19 @@ function buildWslEnvironment(env: NodeJS.ProcessEnv | undefined, propagateEnvKey
     return env
   }
 
+  const next = { ...env }
+  rewriteOpencodePluginPathForWsl(next)
+
   const keysToPropagate = Array.from(
     new Set([
-      ...(propagateEnvKeys ?? []).filter((key) => env[key] !== undefined),
-      ...Array.from(WSL_PATH_ENV_KEYS).filter((key) => env[key] !== undefined),
+      ...(propagateEnvKeys ?? []).filter((key) => next[key] !== undefined),
+      ...Array.from(WSL_PATH_ENV_KEYS).filter((key) => next[key] !== undefined),
     ]),
   )
   if (keysToPropagate.length === 0) {
-    return env
+    return next
   }
 
-  const next = { ...env }
   const entries = (next.WSLENV ?? "").split(":").filter((entry) => entry.length > 0)
   const byName = new Map(entries.map((entry) => [entry.split("/")[0] ?? entry, entry]))
 
@@ -293,6 +313,22 @@ function buildWslEnvironment(env: NodeJS.ProcessEnv | undefined, propagateEnvKey
   return next
 }
 
+function rewriteOpencodePluginPathForWsl(env: NodeJS.ProcessEnv) {
+  const content = env.OPENCODE_CONFIG_CONTENT
+  if (!content) {
+    return
+  }
+
+  const match = content.match(CODENOMAD_PLUGIN_FILE_SPEC_REGEX)
+  const hostPath = match?.[2]
+  if (!hostPath) {
+    return
+  }
+
+  env.OPENCODE_CONFIG_CONTENT = content.replace(hostPath, WSL_PLUGIN_PATH_PLACEHOLDER)
+  env[WSL_PLUGIN_PATH_ENV] = path.win32.normalize(hostPath)
+}
+
 function ensureWslenvEntry(entry: string, requiresPathTranslation: boolean): string {
   if (!requiresPathTranslation) {
     return entry
@@ -305,3 +341,7 @@ function ensureWslenvEntry(entry: string, requiresPathTranslation: boolean): str
 
   return rawFlags.length > 0 ? `${name}/${rawFlags}p` : `${name}/p`
 }
+
+function escapeRegex(input: string): string {
+  return input.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+}
diff --git a/packages/tauri-app/scripts/prebuild.js b/packages/tauri-app/scripts/prebuild.js
index ba2a119c..62c3daae 100644
--- a/packages/tauri-app/scripts/prebuild.js
+++ b/packages/tauri-app/scripts/prebuild.js
@@ -20,6 +20,8 @@ const serverInstallCommand =
   "npm install --omit=dev --ignore-scripts --workspaces=false --package-lock=false --install-strategy=shallow --fund=false --audit=false"
 const serverDevInstallCommand =
   "npm install --workspace @neuralnomads/codenomad --include-workspace-root=false --install-strategy=nested --fund=false --audit=false"
+const pluginDevInstallCommand =
+  "npm install --workspace @codenomad/codenomad-opencode-plugin --include-workspace-root=false --install-strategy=nested --fund=false --audit=false"
 const uiDevInstallCommand =
   "npm install --workspace @codenomad/ui --include-workspace-root=false --install-strategy=nested --fund=false --audit=false"
 const serverPrepareUiCommand = "npm run prepare-ui --workspace @neuralnomads/codenomad"
@@ -45,6 +47,12 @@ const serverBuildDependencyPaths = [
   path.join(serverRoot, "node_modules", "@types", "yauzl", "package.json"),
 ]
 
+const pluginRoot = path.resolve(root, "..", "opencode-plugin")
+const pluginBuildDependencyPaths = [
+  path.join(pluginRoot, "node_modules", "typescript", "package.json"),
+  path.join(pluginRoot, "node_modules", "@types", "node", "package.json"),
+]
+
 const viteBinPath = path.join(uiRoot, "node_modules", ".bin", "vite")
 
 async function ensureMonacoAssets() {
@@ -118,6 +126,19 @@ function ensureServerDevDependencies() {
   })
 }
 
+function ensurePluginDevDependencies() {
+  if (pluginBuildDependencyPaths.every((filePath) => fs.existsSync(filePath))) {
+    return
+  }
+
+  console.log("[prebuild] ensuring OpenCode plugin build dependencies...")
+  execSync(pluginDevInstallCommand, {
+    cwd: workspaceRoot,
+    stdio: "inherit",
+    env: envWithRootBin,
+  })
+}
+
 function ensureServerDependencies() {
   if (fs.existsSync(braceExpansionPath)) {
     return
@@ -302,6 +323,7 @@ function copyUiLoadingAssets() {
 
 ;(async () => {
   ensureServerDevDependencies()
+  ensurePluginDevDependencies()
   ensureUiDevDependencies()
   await ensureMonacoAssets()
   ensureRollupPlatformBinary()

From ca076f4fe0f75309e0540a170b4a19ea2c5940d5 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 12 May 2026 10:07:51 +0100
Subject: [PATCH 34/39] fix(ui): remove active project return action

Remove the prominent Return to Active Project button from the folder selection actions area so the home screen no longer shows a redundant project-return call to action.

Drop the active project label plumbing and localized return subtitle strings because the overlay still has the existing close affordance for dismissing the home screen.

Validation: attempted pnpm --filter @codenomad/ui typecheck, but tsc was not available in the current environment.
---
 packages/ui/src/App.tsx                       |  1 -
 .../src/components/folder-selection-view.tsx  | 25 +------------------
 .../lib/i18n/messages/en/folderSelection.ts   |  2 --
 .../lib/i18n/messages/es/folderSelection.ts   |  2 --
 .../lib/i18n/messages/fr/folderSelection.ts   |  2 --
 .../lib/i18n/messages/he/folderSelection.ts   |  2 --
 .../lib/i18n/messages/ja/folderSelection.ts   |  2 --
 .../lib/i18n/messages/ru/folderSelection.ts   |  2 --
 .../i18n/messages/zh-Hans/folderSelection.ts  |  2 --
 9 files changed, 1 insertion(+), 39 deletions(-)

diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index 44f0d23f..2aa430fc 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -644,7 +644,6 @@ const App: Component = () => {
                 onSelectFolder={handleSelectFolder}
                 isLoading={isSelectingFolder()}
                 onOpenSidecar={handleOpenSidecarPicker}
-                activeProjectLabel={activeInstance()?.folder ?? null}
                 onClose={() => {
                   setShowFolderSelection(false)
                   clearLaunchError()
diff --git a/packages/ui/src/components/folder-selection-view.tsx b/packages/ui/src/components/folder-selection-view.tsx
index 286327b3..035efb70 100644
--- a/packages/ui/src/components/folder-selection-view.tsx
+++ b/packages/ui/src/components/folder-selection-view.tsx
@@ -1,7 +1,7 @@
 import { Dialog } from "@kobalte/core/dialog"
 import { Select } from "@kobalte/core/select"
 import { Component, createMemo, createSignal, Show, For, onMount, onCleanup, createEffect } from "solid-js"
-import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp, Star, Languages, ChevronDown, X, Globe, Loader2, GitBranch, ArrowLeft } from "lucide-solid"
+import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp, Star, Languages, ChevronDown, X, Globe, Loader2, GitBranch } from "lucide-solid"
 import { useConfig } from "../stores/preferences"
 import DirectoryBrowserDialog from "./directory-browser-dialog"
 import Kbd from "./kbd"
@@ -32,7 +32,6 @@ interface FolderSelectionViewProps {
   onOpenSidecar?: () => void
   isLoading?: boolean
   onClose?: () => void
-  activeProjectLabel?: string | null
 }
 
 const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
@@ -87,11 +86,6 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   const serverList = () => remoteServers()
   const isLoading = () => Boolean(props.isLoading)
   const canUseRemoteServerWindows = () => canOpenRemoteWindows()
-  const activeProjectName = createMemo(() => {
-    const label = props.activeProjectLabel?.trim()
-    if (!label) return null
-    return splitFolderPath(label).baseName
-  })
 
   function getActiveListLength() {
     return activeTab() === "local" ? folders().length : serverList().length
@@ -961,23 +955,6 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                     <Kbd shortcut="cmd+n" class="ml-2 kbd-hint" />
                   </button>
 
-                  <Show when={props.onClose}>
-                    <button
-                      type="button"
-                      onClick={() => props.onClose?.()}
-                      class="button-primary w-full flex items-center justify-center text-sm"
-                    >
-                      <div class="flex items-center gap-2">
-                        <ArrowLeft class="w-4 h-4" />
-                        <span>{t("folderSelection.actions.returnToProject")}</span>
-                      </div>
-                    </button>
-                  </Show>
-
-                  <Show when={activeProjectName()}>
-                    {(name) => <p class="text-xs text-muted text-center">{t("folderSelection.actions.returnToProjectSubtitle", { name: name() })}</p>}
-                  </Show>
-
                   <button
                     type="button"
                     onClick={openCloneDialog}
diff --git a/packages/ui/src/lib/i18n/messages/en/folderSelection.ts b/packages/ui/src/lib/i18n/messages/en/folderSelection.ts
index cfdfe7f4..5acb51b9 100644
--- a/packages/ui/src/lib/i18n/messages/en/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/en/folderSelection.ts
@@ -43,8 +43,6 @@ export const folderSelectionMessages = {
   "folderSelection.actions.title": "Open Folder or Connect Server",
   "folderSelection.actions.subtitle": "Open local folder or connect to a CodeNomad server",
   "folderSelection.actions.connectButton": "Connect CodeNomad Server",
-  "folderSelection.actions.returnToProject": "Return to Active Project",
-  "folderSelection.actions.returnToProjectSubtitle": "Go back to {name}",
 
   "folderSelection.advancedSettings": "Advanced Settings",
   "folderSelection.opencode": "OpenCode",
diff --git a/packages/ui/src/lib/i18n/messages/es/folderSelection.ts b/packages/ui/src/lib/i18n/messages/es/folderSelection.ts
index d978cdef..4d036758 100644
--- a/packages/ui/src/lib/i18n/messages/es/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/es/folderSelection.ts
@@ -43,8 +43,6 @@ export const folderSelectionMessages = {
   "folderSelection.actions.title": "Abrir carpeta o conectar servidor",
   "folderSelection.actions.subtitle": "Abre una carpeta local o conéctate a un servidor de CodeNomad",
   "folderSelection.actions.connectButton": "Conectar servidor CodeNomad",
-  "folderSelection.actions.returnToProject": "Volver al proyecto activo",
-  "folderSelection.actions.returnToProjectSubtitle": "Volver a {name}",
 
   "folderSelection.advancedSettings": "Configuración avanzada",
   "folderSelection.opencode": "OpenCode",
diff --git a/packages/ui/src/lib/i18n/messages/fr/folderSelection.ts b/packages/ui/src/lib/i18n/messages/fr/folderSelection.ts
index aed3a4b2..07c13208 100644
--- a/packages/ui/src/lib/i18n/messages/fr/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/folderSelection.ts
@@ -43,8 +43,6 @@ export const folderSelectionMessages = {
   "folderSelection.actions.title": "Ouvrir un dossier ou se connecter à un serveur",
   "folderSelection.actions.subtitle": "Ouvrez un dossier local ou connectez-vous à un serveur CodeNomad",
   "folderSelection.actions.connectButton": "Se connecter au serveur CodeNomad",
-  "folderSelection.actions.returnToProject": "Revenir au projet actif",
-  "folderSelection.actions.returnToProjectSubtitle": "Retourner vers {name}",
 
   "folderSelection.advancedSettings": "Paramètres avancés",
   "folderSelection.opencode": "OpenCode",
diff --git a/packages/ui/src/lib/i18n/messages/he/folderSelection.ts b/packages/ui/src/lib/i18n/messages/he/folderSelection.ts
index 11d6c57e..73910ee9 100644
--- a/packages/ui/src/lib/i18n/messages/he/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/he/folderSelection.ts
@@ -43,8 +43,6 @@ export const folderSelectionMessages = {
   "folderSelection.actions.title": "פתח תיקייה או התחבר לשרת",
   "folderSelection.actions.subtitle": "פתח תיקייה מקומית או התחבר לשרת CodeNomad",
   "folderSelection.actions.connectButton": "התחבר לשרת CodeNomad",
-  "folderSelection.actions.returnToProject": "חזור לפרויקט הפעיל",
-  "folderSelection.actions.returnToProjectSubtitle": "חזור אל {name}",
 
   "folderSelection.advancedSettings": "הגדרות מתקדמות",
   "folderSelection.opencode": "OpenCode",
diff --git a/packages/ui/src/lib/i18n/messages/ja/folderSelection.ts b/packages/ui/src/lib/i18n/messages/ja/folderSelection.ts
index 82b1840e..b114a71e 100644
--- a/packages/ui/src/lib/i18n/messages/ja/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/folderSelection.ts
@@ -43,8 +43,6 @@ export const folderSelectionMessages = {
   "folderSelection.actions.title": "フォルダを開くかサーバーに接続",
   "folderSelection.actions.subtitle": "ローカルフォルダを開くか CodeNomad サーバーに接続します",
   "folderSelection.actions.connectButton": "CodeNomad サーバーに接続",
-  "folderSelection.actions.returnToProject": "アクティブなプロジェクトに戻る",
-  "folderSelection.actions.returnToProjectSubtitle": "{name} に戻る",
 
   "folderSelection.advancedSettings": "詳細設定",
   "folderSelection.opencode": "OpenCode",
diff --git a/packages/ui/src/lib/i18n/messages/ru/folderSelection.ts b/packages/ui/src/lib/i18n/messages/ru/folderSelection.ts
index 0cf0564a..851b947d 100644
--- a/packages/ui/src/lib/i18n/messages/ru/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/folderSelection.ts
@@ -43,8 +43,6 @@ export const folderSelectionMessages = {
   "folderSelection.actions.title": "Открыть папку или подключить сервер",
   "folderSelection.actions.subtitle": "Откройте локальную папку или подключитесь к серверу CodeNomad",
   "folderSelection.actions.connectButton": "Подключить сервер CodeNomad",
-  "folderSelection.actions.returnToProject": "Вернуться к активному проекту",
-  "folderSelection.actions.returnToProjectSubtitle": "Вернуться к {name}",
 
   "folderSelection.advancedSettings": "Расширенные настройки",
   "folderSelection.opencode": "OpenCode",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/folderSelection.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/folderSelection.ts
index e2036726..32ff05e7 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/folderSelection.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/folderSelection.ts
@@ -43,8 +43,6 @@ export const folderSelectionMessages = {
   "folderSelection.actions.title": "打开文件夹或连接服务器",
   "folderSelection.actions.subtitle": "打开本地文件夹或连接到 CodeNomad 服务器",
   "folderSelection.actions.connectButton": "连接 CodeNomad 服务器",
-  "folderSelection.actions.returnToProject": "返回当前项目",
-  "folderSelection.actions.returnToProjectSubtitle": "返回到 {name}",
 
   "folderSelection.advancedSettings": "高级设置",
   "folderSelection.opencode": "OpenCode",

From d9af41393260e7de30f8d37e89116e1649ed979a Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 12 May 2026 11:58:31 +0100
Subject: [PATCH 35/39] Improve prompt layout for narrow session panes (#437)

## Summary
- Add measured `narrow` / `medium` / `wide` width steps to the session
center column so chat UI can respond to pane width rather than viewport
width.
- Rework prompt composer controls: clear/expand move into the text
field, narrow panes place auxiliary controls below the textarea, and
stop/send align bottom-right.
- Reduce branded empty-state logo/title size in narrow session panes and
remove the prompt `@ files/agents` overlay hint.

## Validation
- `npm run typecheck --workspace @codenomad/ui`
---
 .../ui/src/components/branded-empty-state.tsx |   4 +-
 .../components/instance/instance-shell2.tsx   |  35 +++++-
 packages/ui/src/components/prompt-input.tsx   |  34 +++---
 .../ui/src/styles/messaging/prompt-input.css  | 102 ++++++++++++++----
 .../ui/src/styles/panels/empty-loading.css    |   9 ++
 .../ui/src/styles/panels/session-layout.css   |  15 +++
 6 files changed, 157 insertions(+), 42 deletions(-)

diff --git a/packages/ui/src/components/branded-empty-state.tsx b/packages/ui/src/components/branded-empty-state.tsx
index 31d474e2..2a916eaf 100644
--- a/packages/ui/src/components/branded-empty-state.tsx
+++ b/packages/ui/src/components/branded-empty-state.tsx
@@ -17,8 +17,8 @@ const BrandedEmptyState: Component<BrandedEmptyStateProps> = (props) => {
     <div class={`empty-state ${props.class ?? ""}`.trim()}>
       <div class="empty-state-content">
         <div class="flex flex-col items-center gap-3 mb-6">
-          <img src={codeNomadLogo} alt={t("messageSection.empty.logoAlt")} class="h-48 w-auto" loading="lazy" />
-          <h1 class="text-3xl font-semibold text-primary">{t("messageSection.empty.brandTitle")}</h1>
+          <img src={codeNomadLogo} alt={t("messageSection.empty.logoAlt")} class="empty-state-logo h-48 w-auto" loading="lazy" />
+          <h1 class="empty-state-brand-title text-3xl font-semibold text-primary">{t("messageSection.empty.brandTitle")}</h1>
         </div>
         {props.title ? <h3>{props.title}</h3> : null}
         <p>{props.description}</p>
diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 76877cfd..f23ec071 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -70,6 +70,13 @@ import { isPermissionAutoAcceptEnabled } from "../../stores/permission-auto-acce
 const log = getLogger("session")
 const OPEN_SESSION_SEARCH_EVENT = "codenomad:open-session-search"
 const NO_SESSION_DRAFT_SESSION_ID = "__no_session_draft__"
+type SessionCenterWidthStep = "narrow" | "medium" | "wide"
+
+function getSessionCenterWidthStep(width: number): SessionCenterWidthStep {
+  if (width < 768) return "narrow"
+  if (width < 1280) return "medium"
+  return "wide"
+}
 
 interface InstanceShellProps {
   instance: Instance
@@ -105,6 +112,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
   const [rightDrawerContentEl, setRightDrawerContentEl] = createSignal<HTMLElement | null>(null)
   const [leftToggleButtonEl, setLeftToggleButtonEl] = createSignal<HTMLElement | null>(null)
   const [rightToggleButtonEl, setRightToggleButtonEl] = createSignal<HTMLElement | null>(null)
+  const [sessionCenterEl, setSessionCenterEl] = createSignal<HTMLElement | null>(null)
+  const [sessionCenterWidthStep, setSessionCenterWidthStep] = createSignal<SessionCenterWidthStep>("wide")
 
   const [selectedBackgroundProcess, setSelectedBackgroundProcess] = createSignal<BackgroundProcess | null>(null)
   const [showBackgroundOutput, setShowBackgroundOutput] = createSignal(false)
@@ -253,6 +262,25 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     onCleanup(() => window.clearInterval(timer))
   })
 
+  createEffect(() => {
+    const element = sessionCenterEl()
+    if (!element || typeof ResizeObserver === "undefined") return
+
+    const updateWidthStep = (width: number) => {
+      setSessionCenterWidthStep(getSessionCenterWidthStep(width))
+    }
+
+    updateWidthStep(element.getBoundingClientRect().width)
+
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width ?? element.getBoundingClientRect().width
+      updateWidthStep(width)
+    })
+    observer.observe(element)
+
+    onCleanup(() => observer.disconnect())
+  })
+
   const connectionStatus = () => sseManager.getStatus(props.instance.id)
   const connectionStatusClass = () => {
     const status = connectionStatus()
@@ -801,7 +829,12 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     >
       {renderLeftPanel()}
 
-      <Box sx={{ display: "flex", flexDirection: "column", flex: 1, minWidth: 0, minHeight: 0, overflowX: "hidden" }}>
+      <Box
+        class="session-center-column"
+        ref={setSessionCenterEl}
+        data-session-center-width={sessionCenterWidthStep()}
+        sx={{ display: "flex", flexDirection: "column", flex: 1, minWidth: 0, minHeight: 0, overflowX: "hidden" }}
+      >
         <Show when={!mobileFullscreen()}>
           <AppBar position="sticky" color="default" elevation={0} class="border-b border-base">
             <Toolbar variant="dense" class="session-toolbar flex flex-wrap items-center gap-2 py-0 min-h-[40px]">
diff --git a/packages/ui/src/components/prompt-input.tsx b/packages/ui/src/components/prompt-input.tsx
index aed879ea..afd30eb5 100644
--- a/packages/ui/src/components/prompt-input.tsx
+++ b/packages/ui/src/components/prompt-input.tsx
@@ -630,7 +630,7 @@ export default function PromptInput(props: PromptInputProps) {
           </Suspense>
         </Show>
 
-        <div class="flex flex-1 flex-col">
+        <div class="prompt-input-main flex flex-1 flex-col">
           <div class={`prompt-input-field-container ${expandState() === "expanded" ? "is-expanded" : ""}`}>
 
             <div class={`prompt-input-field ${expandState() === "expanded" ? "is-expanded" : ""}`}>
@@ -652,6 +652,22 @@ export default function PromptInput(props: PromptInputProps) {
                 autoCapitalize="off"
                 autocomplete="off"
               />
+              <button
+                type="button"
+                class="prompt-clear-button prompt-clear-button-inline"
+                onClick={handleClearPrompt}
+                disabled={!canClearPrompt()}
+                aria-label={t("promptInput.clear.ariaLabel")}
+                title={t("promptInput.clear.title")}
+              >
+                <X class="h-4 w-4" aria-hidden="true" />
+              </button>
+              <div class="prompt-expand-button-inline">
+                <ExpandButton
+                  expandState={expandState}
+                  onToggleExpand={handleExpandToggle}
+                />
+              </div>
               <Show when={shouldShowOverlay()}>
                 <div class={`prompt-input-overlay keyboard-hints ${mode() === "shell" ? "shell-mode" : ""}`}>
                   <Show
@@ -671,7 +687,7 @@ export default function PromptInput(props: PromptInputProps) {
                               <Kbd>Enter</Kbd> {t("promptInput.overlay.send")} • <Kbd shortcut="cmd+enter" /> {t("promptInput.overlay.newLine")}
                             </>
                           </Show>
-                          {" "}• <Kbd>@</Kbd> {t("promptInput.overlay.filesAgents")} • <Kbd>↑↓</Kbd> {t("promptInput.overlay.history")}
+                          {" "}• <Kbd>↑↓</Kbd> {t("promptInput.overlay.history")}
                         </span>
                         <Show when={attachments().length > 0}>
                           <span class="prompt-overlay-text prompt-overlay-muted">{t("promptInput.overlay.attachments", { count: attachments().length })}</span>
@@ -782,22 +798,8 @@ export default function PromptInput(props: PromptInputProps) {
               >
                 <Paperclip class="h-4 w-4" aria-hidden="true" />
               </button>
-              <button
-                type="button"
-                class="prompt-clear-button"
-                onClick={handleClearPrompt}
-                disabled={!canClearPrompt()}
-                aria-label={t("promptInput.clear.ariaLabel")}
-                title={t("promptInput.clear.title")}
-              >
-                <X class="h-4 w-4" aria-hidden="true" />
-              </button>
             </div>
             <div class="prompt-nav-column prompt-nav-column-right">
-              <ExpandButton
-                expandState={expandState}
-                onToggleExpand={handleExpandToggle}
-              />
               <Show when={hasHistory()}>
                 <button
                   type="button"
diff --git a/packages/ui/src/styles/messaging/prompt-input.css b/packages/ui/src/styles/messaging/prompt-input.css
index 8bf0ba06..c22c495e 100644
--- a/packages/ui/src/styles/messaging/prompt-input.css
+++ b/packages/ui/src/styles/messaging/prompt-input.css
@@ -5,12 +5,17 @@
 }
 
 .prompt-input-wrapper {
+  --prompt-input-compact-height: 104px;
   @apply grid items-stretch;
   grid-template-columns: minmax(0, 1fr) 72px 64px;
   gap: 0;
   padding: 0;
 }
 
+.prompt-input-main {
+  min-width: 0;
+}
+
 .prompt-input-actions {
   @apply flex flex-col items-center;
   align-self: stretch;
@@ -47,7 +52,7 @@
 .prompt-input {
   @apply w-full pt-2.5 border text-sm resize-none outline-none transition-colors;
   padding-inline-start: 0.75rem;
-  padding-inline-end: 0.75rem;
+  padding-inline-end: 4.5rem;
   font-family: inherit;
   background-color: var(--surface-base);
   color: var(--text-primary);
@@ -153,6 +158,20 @@
   cursor: not-allowed;
 }
 
+.prompt-clear-button-inline {
+  position: absolute;
+  top: 2.5rem;
+  inset-inline-end: 0.5rem;
+  z-index: 2;
+}
+
+.prompt-expand-button-inline {
+  position: absolute;
+  top: 0.5rem;
+  inset-inline-end: 0.5rem;
+  z-index: 2;
+}
+
 .prompt-overlay-text {
   display: inline-flex;
   align-items: center;
@@ -403,40 +422,77 @@
   }
 }
 
-@media (max-width: 1279px) {
-  :root {
-    --prompt-input-compact-height: 104px;
-  }
+.session-center-column[data-session-center-width="medium"] .prompt-input-wrapper,
+.session-center-column[data-session-center-width="narrow"] .prompt-input-wrapper {
+  min-height: var(--prompt-input-compact-height);
+}
 
-  .prompt-input-wrapper {
-    min-height: var(--prompt-input-compact-height);
-  }
+.session-center-column[data-session-center-width="medium"] .prompt-input-field-container,
+.session-center-column[data-session-center-width="narrow"] .prompt-input-field-container {
+  min-height: var(--prompt-input-compact-height);
+  height: var(--prompt-input-compact-height);
+}
 
-  .prompt-input-field-container {
-    min-height: var(--prompt-input-compact-height);
-    height: var(--prompt-input-compact-height);
-  }
+.session-center-column[data-session-center-width="medium"] .prompt-input-field,
+.session-center-column[data-session-center-width="narrow"] .prompt-input-field {
+  height: var(--prompt-input-compact-height);
+}
 
-  .prompt-input-field {
-    height: var(--prompt-input-compact-height);
-  }
+.session-center-column[data-session-center-width="medium"] .prompt-input-field-container.is-expanded,
+.session-center-column[data-session-center-width="medium"] .prompt-input-field.is-expanded,
+.session-center-column[data-session-center-width="narrow"] .prompt-input-field-container.is-expanded,
+.session-center-column[data-session-center-width="narrow"] .prompt-input-field.is-expanded {
+  height: auto;
+}
 
-  .prompt-input-field-container.is-expanded,
-  .prompt-input-field.is-expanded {
-    height: auto;
-  }
+.session-center-column[data-session-center-width="narrow"] .prompt-input-wrapper {
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    "field field"
+    "actions primary";
 }
 
-@media (max-width: 720px) {
-  .prompt-input-wrapper {
-    grid-template-columns: minmax(0, 1fr) 64px 40px;
-  }
+.session-center-column[data-session-center-width="narrow"] .prompt-input-main {
+  grid-area: field;
+}
+
+.session-center-column[data-session-center-width="narrow"] .prompt-input-actions {
+  grid-area: actions;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  height: auto;
+  padding: 0.25rem 0.5rem 0.5rem;
+}
+
+.session-center-column[data-session-center-width="narrow"] .prompt-input-primary-actions {
+  grid-area: primary;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  width: auto;
+  height: auto;
+  padding: 0.25rem 0.5rem 0.5rem 0;
+  border-inline-start: none;
+}
+
+.session-center-column[data-session-center-width="narrow"] .prompt-nav-buttons {
+  justify-content: flex-start;
+  gap: 0.25rem;
+}
+
+.session-center-column[data-session-center-width="narrow"] .prompt-nav-column {
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+  gap: 0.25rem;
 }
 
 @media (max-width: 640px) {
   .prompt-input {
     min-height: 0;
     padding: 0.5rem 0.75rem;
+    padding-inline-end: 4.5rem;
     padding-bottom: 0.75rem;
   }
 
diff --git a/packages/ui/src/styles/panels/empty-loading.css b/packages/ui/src/styles/panels/empty-loading.css
index 101c2084..dd4f6e7a 100644
--- a/packages/ui/src/styles/panels/empty-loading.css
+++ b/packages/ui/src/styles/panels/empty-loading.css
@@ -15,6 +15,15 @@
   @apply text-center max-w-sm;
 }
 
+.session-center-column[data-session-center-width="narrow"] .empty-state-logo {
+  height: 9rem;
+}
+
+.session-center-column[data-session-center-width="narrow"] .empty-state-brand-title {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .empty-state-content h3 {
   font-size: var(--font-size-xl);
   margin-bottom: 12px;
diff --git a/packages/ui/src/styles/panels/session-layout.css b/packages/ui/src/styles/panels/session-layout.css
index 9daa9388..07738886 100644
--- a/packages/ui/src/styles/panels/session-layout.css
+++ b/packages/ui/src/styles/panels/session-layout.css
@@ -6,6 +6,21 @@
   overflow: hidden;
 }
 
+.session-center-column {
+  container-name: session-center;
+  container-type: inline-size;
+  --session-center-width-step: wide;
+}
+
+/* Canonical session-center width steps: narrow < 768px, medium < 1280px, wide >= 1280px. */
+.session-center-column[data-session-center-width="narrow"] {
+  --session-center-width-step: narrow;
+}
+
+.session-center-column[data-session-center-width="medium"] {
+  --session-center-width-step: medium;
+}
+
 .session-list-container {
   @apply flex flex-col flex-1 min-h-0 relative;
   background-color: var(--surface-secondary);

From 533ccacd69b3becf4fc13faffbee40c5d3244880 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 12 May 2026 13:14:50 +0100
Subject: [PATCH 36/39] fix(ui): base timeline width on center pane

Move the compact timeline width rule from viewport media queries to the session-center narrow width step. This keeps the timeline compact when the chat pane is narrow due to side panels, even on wide desktop viewports.

Validation: npm run typecheck --workspace @codenomad/ui
---
 .../src/styles/messaging/message-timeline.css  | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/styles/messaging/message-timeline.css b/packages/ui/src/styles/messaging/message-timeline.css
index b4a8efd4..8c91f2a1 100644
--- a/packages/ui/src/styles/messaging/message-timeline.css
+++ b/packages/ui/src/styles/messaging/message-timeline.css
@@ -26,14 +26,12 @@
   pointer-events: none;
 }
 
-@media (max-width: 720px) {
-  .message-layout--with-timeline {
-    grid-template-columns: minmax(0, 1fr) 40px;
-  }
+.session-center-column[data-session-center-width="narrow"] .message-layout--with-timeline {
+  grid-template-columns: minmax(0, 1fr) 40px;
+}
 
-  .message-layout--with-timeline::after {
-    inset-inline-end: 40px;
-  }
+.session-center-column[data-session-center-width="narrow"] .message-layout--with-timeline::after {
+  inset-inline-end: 40px;
 }
 
 .message-stream-shell {
@@ -59,10 +57,8 @@
  }
 
 
-@media (max-width: 720px) {
-  .message-timeline-sidebar {
-    width: 40px;
-  }
+.session-center-column[data-session-center-width="narrow"] .message-timeline-sidebar {
+  width: 40px;
 }
 
 .message-timeline {

From 5570929fe5f0c40302d7f658fef4a255c85f09b0 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 12 May 2026 20:00:59 +0100
Subject: [PATCH 37/39] Improve messages layouts on narrow screens (#438)

## Summary
- Tighten thinking block action spacing so it matches adjacent action
groups.
- Collapse secondary message, thinking, and tool-call actions into a
Kobalte overflow menu only at the session-center narrow width stop.
- Keep single-action cases inline, preserve primary/status controls,
mirror delete hover overlays from menu items, and square the overflow
menu styling.

## Validation
- npm run typecheck --workspace @codenomad/ui
---
 .../src/components/action-overflow-menu.tsx   |  85 +++++++++
 packages/ui/src/components/message-block.tsx  | 173 ++++++++++++++++--
 packages/ui/src/components/message-item.tsx   |  86 ++++++++-
 packages/ui/src/components/tool-call.tsx      |  63 ++++++-
 .../ui/src/lib/i18n/messages/en/messaging.ts  |   1 +
 .../ui/src/lib/i18n/messages/es/messaging.ts  |   1 +
 .../ui/src/lib/i18n/messages/fr/messaging.ts  |   1 +
 .../ui/src/lib/i18n/messages/he/messaging.ts  |   1 +
 .../ui/src/lib/i18n/messages/ja/messaging.ts  |   1 +
 .../ui/src/lib/i18n/messages/ru/messaging.ts  |   1 +
 .../lib/i18n/messages/zh-Hans/messaging.ts    |   1 +
 .../ui/src/styles/components/dropdown.css     |  59 ++++++
 .../ui/src/styles/messaging/message-base.css  |  26 ++-
 .../ui/src/styles/messaging/tool-call.css     |  25 +++
 14 files changed, 495 insertions(+), 29 deletions(-)
 create mode 100644 packages/ui/src/components/action-overflow-menu.tsx

diff --git a/packages/ui/src/components/action-overflow-menu.tsx b/packages/ui/src/components/action-overflow-menu.tsx
new file mode 100644
index 00000000..a66a25f3
--- /dev/null
+++ b/packages/ui/src/components/action-overflow-menu.tsx
@@ -0,0 +1,85 @@
+import { DropdownMenu } from "@kobalte/core/dropdown-menu"
+import { For, Show, createSignal, onCleanup, type JSXElement } from "solid-js"
+import { MoreHorizontal } from "lucide-solid"
+
+export interface ActionOverflowMenuItem {
+  key: string
+  label: string
+  icon?: JSXElement
+  disabled?: boolean
+  destructive?: boolean
+  onSelect: () => void | Promise<void>
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
+}
+
+interface ActionOverflowMenuProps {
+  items: ActionOverflowMenuItem[]
+  label: string
+  triggerClass?: string
+  minItems?: number
+}
+
+export default function ActionOverflowMenu(props: ActionOverflowMenuProps) {
+  const [hoveredItem, setHoveredItem] = createSignal<ActionOverflowMenuItem | null>(null)
+  const enabledItems = () => props.items.filter((item) => !item.disabled)
+  const hasItems = () => props.items.length >= (props.minItems ?? 1)
+  const clearHoveredItem = () => {
+    const item = hoveredItem()
+    if (!item) return
+    item.onMouseLeave?.()
+    setHoveredItem(null)
+  }
+
+  onCleanup(clearHoveredItem)
+
+  return (
+    <Show when={hasItems()}>
+      <DropdownMenu placement="bottom-end" gutter={4} onOpenChange={(open) => { if (!open) clearHoveredItem() }}>
+        <DropdownMenu.Trigger
+          class={`action-overflow-trigger ${props.triggerClass ?? ""}`.trim()}
+          aria-label={props.label}
+          title={props.label}
+          disabled={enabledItems().length === 0}
+        >
+          <MoreHorizontal class="w-3.5 h-3.5" aria-hidden="true" />
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content class="action-overflow-content">
+            <For each={props.items}>
+              {(item) => (
+                <DropdownMenu.Item
+                  class="action-overflow-item"
+                  data-destructive={item.destructive ? "true" : undefined}
+                  disabled={item.disabled}
+                  onPointerEnter={() => {
+                    if (item.disabled) return
+                    const previous = hoveredItem()
+                    if (previous !== item) previous?.onMouseLeave?.()
+                    setHoveredItem(item)
+                    item.onMouseEnter?.()
+                  }}
+                  onPointerLeave={() => {
+                    if (item.disabled) return
+                    if (hoveredItem() === item) setHoveredItem(null)
+                    item.onMouseLeave?.()
+                  }}
+                  onSelect={() => {
+                    clearHoveredItem()
+                    void item.onSelect()
+                  }}
+                >
+                  <Show when={item.icon} fallback={<span class="action-overflow-item-icon" aria-hidden="true" />}>
+                    {(icon) => <span class="action-overflow-item-icon" aria-hidden="true">{icon()}</span>}
+                  </Show>
+                  <span class="action-overflow-item-label">{item.label}</span>
+                </DropdownMenu.Item>
+              )}
+            </For>
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu>
+    </Show>
+  )
+}
diff --git a/packages/ui/src/components/message-block.tsx b/packages/ui/src/components/message-block.tsx
index 04c15e7a..07d6a9af 100644
--- a/packages/ui/src/components/message-block.tsx
+++ b/packages/ui/src/components/message-block.tsx
@@ -1,5 +1,5 @@
 import { For, Index, Match, Show, Suspense, Switch, createEffect, createMemo, createSignal, lazy, onCleanup, untrack, type Accessor } from "solid-js"
-import { ChevronsDownUp, ChevronsUpDown, ExternalLink, FoldVertical, ListStart, Trash } from "lucide-solid"
+import { ChevronsDownUp, ChevronsUpDown, ExternalLink, FoldVertical, ListStart, Trash, Volume2 } from "lucide-solid"
 import MessageItem from "./message-item"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
 import type { ClientPart, MessageInfo } from "../types/message"
@@ -18,6 +18,7 @@ import { useSpeech } from "../lib/hooks/use-speech"
 import SpeechActionButton from "./speech-action-button"
 import { createFollowScroll } from "../lib/follow-scroll"
 import type { SessionSearchMatch } from "../lib/session-search"
+import ActionOverflowMenu, { type ActionOverflowMenuItem } from "./action-overflow-menu"
 
 function DeleteUpToIcon() {
   return (
@@ -486,6 +487,12 @@ function ToolCallItem(props: ToolCallItemProps) {
     navigateToTaskSession(location)
   }
 
+  const goToTaskSession = () => {
+    const location = taskLocation()
+    if (!location) return
+    navigateToTaskSession(location)
+  }
+
   const handleDeleteMessage = async (event: MouseEvent) => {
     event.preventDefault()
     event.stopPropagation()
@@ -507,9 +514,7 @@ function ToolCallItem(props: ToolCallItemProps) {
     }
   }
 
-  const handleDeleteUpTo = async (event: MouseEvent) => {
-    event.preventDefault()
-    event.stopPropagation()
+  const deleteUpTo = async () => {
     if (!props.showDeleteMessage) return
     if (!props.onDeleteMessagesUpTo) return
     if (deletingUpTo()) return
@@ -522,11 +527,72 @@ function ToolCallItem(props: ToolCallItemProps) {
     }
   }
 
+  const handleDeleteUpTo = async (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    await deleteUpTo()
+  }
+
+  const actionMenuItems = (): ActionOverflowMenuItem[] => {
+    const items: ActionOverflowMenuItem[] = []
+
+    if (taskSessionId()) {
+      items.push({
+        key: "go-to-session",
+        label: t("messageBlock.tool.goToSession.label"),
+        icon: <ExternalLink class="w-3.5 h-3.5" aria-hidden="true" />,
+        disabled: !taskLocation(),
+        onSelect: goToTaskSession,
+      })
+    }
+
+    if (props.showDeleteMessage) {
+      items.push(
+        {
+          key: "delete-up-to",
+          label: t("messageItem.actions.deleteMessagesUpTo"),
+          icon: <DeleteUpToIcon />,
+          disabled: !props.onDeleteMessagesUpTo || deletingUpTo(),
+          destructive: true,
+          onMouseEnter: () => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.messageId }),
+          onMouseLeave: () => props.onDeleteHoverChange?.({ kind: "none" }),
+          onSelect: deleteUpTo,
+        },
+        {
+          key: "delete-message",
+          label: deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage"),
+          icon: <Trash class="w-3.5 h-3.5" aria-hidden="true" />,
+          disabled: deletingMessage(),
+          destructive: true,
+          onMouseEnter: () => props.onDeleteHoverChange?.({ kind: "message", messageId: props.messageId }),
+          onMouseLeave: () => props.onDeleteHoverChange?.({ kind: "none" }),
+          onSelect: async () => {
+            if (deletingMessage()) return
+            setDeletingMessage(true)
+            try {
+              await deleteMessage(props.instanceId, props.sessionId, props.messageId)
+            } catch (error) {
+              showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+                title: t("messageItem.actions.deleteMessageFailedTitle"),
+                detail: error instanceof Error ? error.message : String(error),
+                variant: "error",
+              })
+            } finally {
+              setDeletingMessage(false)
+            }
+          },
+        },
+      )
+    }
+
+    return items
+  }
+
   return (
     <Show when={toolPart()}>
       {(resolvedToolPart) => (
         <div class="delete-hover-scope" data-delete-part-hover={isDeleteOverlayActive() ? "true" : undefined}>
-          <div class="tool-call-header-label">
+          <div class="tool-call-header-label" data-action-overflow={actionMenuItems().length > 1 ? "true" : undefined}>
             <div class="tool-call-header-meta">
               <Show when={props.showDeleteMessage}>
                 <input
@@ -551,7 +617,7 @@ function ToolCallItem(props: ToolCallItemProps) {
               <span class="tool-name">{toolName() || t("messageBlock.tool.unknown")}</span>
             </div>
 
-            <div class="flex items-center gap-0">
+            <div class="tool-call-header-actions flex items-center gap-0">
               <Show when={taskSessionId()}>
                 <button
                   class="tool-call-header-button"
@@ -593,6 +659,12 @@ function ToolCallItem(props: ToolCallItemProps) {
                 </button>
               </Show>
             </div>
+            <ActionOverflowMenu
+              items={actionMenuItems()}
+              label={t("messageItem.actions.more")}
+              triggerClass="tool-call-header-button"
+              minItems={2}
+            />
           </div>
 
           <Suspense fallback={<ToolCallFallback />}>
@@ -1582,6 +1654,73 @@ function ReasoningCard(props: ReasoningCardProps) {
 
   const canDeleteMessage = () => Boolean(props.showDeleteMessage) && !deletingMessage()
 
+  const deleteUpTo = async () => {
+    if (!props.showDeleteMessage) return
+    if (!props.onDeleteMessagesUpTo) return
+    if (deletingUpTo()) return
+
+    setDeletingUpTo(true)
+    try {
+      await props.onDeleteMessagesUpTo(props.messageId)
+    } finally {
+      setDeletingUpTo(false)
+    }
+  }
+
+  const actionMenuItems = (): ActionOverflowMenuItem[] => {
+    const items: ActionOverflowMenuItem[] = []
+
+    if (canSpeakReasoning()) {
+      items.push({
+        key: "speak",
+        label: speech.buttonTitle(),
+        icon: <Volume2 class="w-3.5 h-3.5" aria-hidden="true" />,
+        onSelect: () => void speech.toggle(),
+      })
+    }
+
+    if (props.showDeleteMessage) {
+      items.push(
+        {
+          key: "delete-up-to",
+          label: t("messageItem.actions.deleteMessagesUpTo"),
+          icon: <DeleteUpToIcon />,
+          disabled: !props.onDeleteMessagesUpTo || deletingUpTo(),
+          destructive: true,
+          onMouseEnter: () => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.messageId }),
+          onMouseLeave: () => props.onDeleteHoverChange?.({ kind: "none" }),
+          onSelect: deleteUpTo,
+        },
+        {
+          key: "delete-message",
+          label: deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage"),
+          icon: <Trash class="w-3.5 h-3.5" aria-hidden="true" />,
+          disabled: !canDeleteMessage(),
+          destructive: true,
+          onMouseEnter: () => props.onDeleteHoverChange?.({ kind: "message", messageId: props.messageId }),
+          onMouseLeave: () => props.onDeleteHoverChange?.({ kind: "none" }),
+          onSelect: async () => {
+            if (!canDeleteMessage()) return
+            setDeletingMessage(true)
+            try {
+              await deleteMessage(props.instanceId, props.sessionId, props.messageId)
+            } catch (error) {
+              showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+                title: t("messageItem.actions.deleteMessageFailedTitle"),
+                detail: error instanceof Error ? error.message : String(error),
+                variant: "error",
+              })
+            } finally {
+              setDeletingMessage(false)
+            }
+          },
+        },
+      )
+    }
+
+    return items
+  }
+
   const handleDeleteMessage = async (event: MouseEvent) => {
     event.preventDefault()
     event.stopPropagation()
@@ -1604,16 +1743,7 @@ function ReasoningCard(props: ReasoningCardProps) {
   const handleDeleteUpTo = async (event: MouseEvent) => {
     event.preventDefault()
     event.stopPropagation()
-    if (!props.showDeleteMessage) return
-    if (!props.onDeleteMessagesUpTo) return
-    if (deletingUpTo()) return
-
-    setDeletingUpTo(true)
-    try {
-      await props.onDeleteMessagesUpTo(props.messageId)
-    } finally {
-      setDeletingUpTo(false)
-    }
+    await deleteUpTo()
   }
 
   return (
@@ -1654,7 +1784,7 @@ function ReasoningCard(props: ReasoningCardProps) {
           </span>
         </button>
 
-        <div class="message-reasoning-actions">
+        <div class="message-reasoning-actions" data-action-overflow={actionMenuItems().length > 1 ? "true" : undefined}>
           <Show when={canSpeakReasoning()}>
             <SpeechActionButton
               class="message-action-button"
@@ -1671,7 +1801,7 @@ function ReasoningCard(props: ReasoningCardProps) {
 
           <button
             type="button"
-            class="message-action-button"
+            class="message-action-button message-reasoning-primary-action"
             onClick={(event) => {
               event.preventDefault()
               event.stopPropagation()
@@ -1713,6 +1843,13 @@ function ReasoningCard(props: ReasoningCardProps) {
             </button>
           </Show>
 
+          <ActionOverflowMenu
+            items={actionMenuItems()}
+            label={t("messageItem.actions.more")}
+            triggerClass="message-action-button"
+            minItems={2}
+          />
+
           <span class="message-reasoning-time">{timestamp()}</span>
         </div>
       </div>
diff --git a/packages/ui/src/components/message-item.tsx b/packages/ui/src/components/message-item.tsx
index 1a666851..00785441 100644
--- a/packages/ui/src/components/message-item.tsx
+++ b/packages/ui/src/components/message-item.tsx
@@ -1,6 +1,6 @@
 import { For, Show, createEffect, createSignal, onCleanup } from "solid-js"
 import { Portal } from "solid-js/web"
-import { Copy, ListStart, Split, Trash, Undo } from "lucide-solid"
+import { Copy, ListStart, Split, Trash, Undo, Volume2 } from "lucide-solid"
 import type { MessageInfo, ClientPart, SDKAssistantMessageV2 } from "../types/message"
 import { isHiddenSyntheticTextPart, partHasRenderableText } from "../types/message"
 import type { MessageRecord } from "../stores/message-v2/types"
@@ -13,6 +13,7 @@ import { isTauriHost } from "../lib/runtime-env"
 import type { DeleteHoverState } from "../types/delete-hover"
 import { useSpeech } from "../lib/hooks/use-speech"
 import SpeechActionButton from "./speech-action-button"
+import ActionOverflowMenu, { type ActionOverflowMenuItem } from "./action-overflow-menu"
 
 function DeleteUpToIcon() {
   return (
@@ -388,6 +389,71 @@ export default function MessageItem(props: MessageItemProps) {
     return segments.join(" • ")
   }
 
+  const actionMenuItems = (): ActionOverflowMenuItem[] => {
+    const items: ActionOverflowMenuItem[] = [
+      {
+        key: "copy",
+        label: copyLabel(),
+        icon: <Copy class="w-3.5 h-3.5" aria-hidden="true" />,
+        onSelect: handleCopy,
+      },
+    ]
+
+    if (canSpeakMessage()) {
+      items.push({
+        key: "speak",
+        label: speech.buttonTitle(),
+        icon: <Volume2 class="w-3.5 h-3.5" aria-hidden="true" />,
+        onSelect: () => void speech.toggle(),
+      })
+    }
+
+    if (isUser() && props.onFork) {
+      items.push({
+        key: "fork",
+        label: t("messageItem.actions.fork"),
+        icon: <Split class="w-3.5 h-3.5" aria-hidden="true" />,
+        onSelect: () => props.onFork?.(props.record.id),
+      })
+    }
+
+    if (isUser() && props.onRevert) {
+      items.push({
+        key: "revert",
+        label: t("messageItem.actions.revertTitle"),
+        icon: <Undo class="w-3.5 h-3.5" aria-hidden="true" />,
+        onSelect: handleRevert,
+      })
+    }
+
+    if (props.showDeleteMessage) {
+      items.push(
+        {
+          key: "delete-up-to",
+          label: t("messageItem.actions.deleteMessagesUpTo"),
+          icon: <DeleteUpToIcon />,
+          disabled: !props.onDeleteMessagesUpTo || deletingUpTo(),
+          destructive: true,
+          onMouseEnter: () => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.record.id }),
+          onMouseLeave: () => props.onDeleteHoverChange?.({ kind: "none" }),
+          onSelect: () => void handleDeleteUpTo(),
+        },
+        {
+          key: "delete-message",
+          label: deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage"),
+          icon: <Trash class="w-3.5 h-3.5" aria-hidden="true" />,
+          disabled: deletingMessage(),
+          destructive: true,
+          onMouseEnter: () => props.onDeleteHoverChange?.({ kind: "message", messageId: props.record.id }),
+          onMouseLeave: () => props.onDeleteHoverChange?.({ kind: "none" }),
+          onSelect: handleDeleteMessage,
+        },
+      )
+    }
+
+    return items
+  }
+
 
   return (
     <div
@@ -440,7 +506,11 @@ export default function MessageItem(props: MessageItemProps) {
             </Show>
           </div>
 
-          <div class="message-item-actions" ref={(el) => (actionsEl = el)}>
+          <div
+            class="message-item-actions"
+            data-action-overflow={actionMenuItems().length > 1 ? "true" : undefined}
+            ref={(el) => (actionsEl = el)}
+          >
             <Show when={isUser()}>
               <div class="message-action-group">
                 <button
@@ -510,6 +580,12 @@ export default function MessageItem(props: MessageItemProps) {
                   </button>
                 </Show>
               </div>
+              <ActionOverflowMenu
+                items={actionMenuItems()}
+                label={t("messageItem.actions.more")}
+                triggerClass="message-action-button"
+                minItems={2}
+              />
             </Show>
             <Show when={!isUser()}>
               <div class="message-action-group">
@@ -558,6 +634,12 @@ export default function MessageItem(props: MessageItemProps) {
                   </button>
                 </Show>
               </div>
+              <ActionOverflowMenu
+                items={actionMenuItems()}
+                label={t("messageItem.actions.more")}
+                triggerClass="message-action-button"
+                minItems={2}
+              />
             </Show>
             <time class="message-timestamp" dateTime={timestampIso()}>{timestamp()}</time>
           </div>
diff --git a/packages/ui/src/components/tool-call.tsx b/packages/ui/src/components/tool-call.tsx
index 21f2c608..af9be1eb 100644
--- a/packages/ui/src/components/tool-call.tsx
+++ b/packages/ui/src/components/tool-call.tsx
@@ -1,5 +1,5 @@
 import { createSignal, Show, createEffect, createMemo, onCleanup, type Accessor } from "solid-js"
-import { ArrowRightSquare, Check, Copy, Hourglass, Loader2, XCircle } from "lucide-solid"
+import { ArrowRightSquare, Check, Copy, Hourglass, Loader2, Volume2, XCircle } from "lucide-solid"
 import { stringify as stringifyYaml } from "yaml"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import { useTheme } from "../lib/theme"
@@ -45,6 +45,7 @@ import { getLogger } from "../lib/logger"
 import { useSpeech } from "../lib/hooks/use-speech"
 import SpeechActionButton from "./speech-action-button"
 import { createFollowScroll } from "../lib/follow-scroll"
+import ActionOverflowMenu, { type ActionOverflowMenuItem } from "./action-overflow-menu"
 
 const log = getLogger("session")
 
@@ -821,23 +822,62 @@ export default function ToolCall(props: ToolCallProps) {
     await copyToClipboard(text)
   }
 
+  const actionMenuItems = (): ActionOverflowMenuItem[] => {
+    const items: ActionOverflowMenuItem[] = []
+
+    if (hasToolInput()) {
+      items.push({
+        key: "toggle-input",
+        label: isToolInputVisible() ? t("toolCall.header.hideInputTitle") : t("toolCall.header.showInputTitle"),
+        icon: <ArrowRightSquare class="w-3.5 h-3.5" aria-hidden="true" />,
+        onSelect: () => {
+          if (!expanded()) toggle()
+          const currentlyVisible = isToolInputVisible()
+          setToolInputVisibilityOverride(currentlyVisible ? "hidden" : "expanded")
+        },
+      })
+    }
+
+    items.push({
+      key: "copy",
+      label: t("toolCall.header.copyTitle"),
+      icon: <Copy class="w-3.5 h-3.5" aria-hidden="true" />,
+      onSelect: async () => {
+        const text = headerText()
+        if (!text) return
+        await copyToClipboard(text)
+      },
+    })
+
+    if (canSpeakToolCall()) {
+      items.push({
+        key: "speak",
+        label: speech.buttonTitle(),
+        icon: <Volume2 class="w-3.5 h-3.5" aria-hidden="true" />,
+        onSelect: () => void speech.toggle(),
+      })
+    }
+
+    return items
+  }
+
   const status = () => toolState()?.status || ""
 
   return (
-    <div
+      <div
 
-      ref={(element) => {
+        ref={(element) => {
         setToolCallRootEl(element || undefined)
       }}
       class={`tool-call ${combinedStatusClass()}`}
       data-part-type="tool"
       data-tool-name={toolName()}
       data-instance-id={props.instanceId}
-      data-session-id={props.sessionId}
-      data-message-id={props.messageId}
-      data-part-id={toolCallIdentifier()}
-    >
-      <div class="tool-call-header">
+        data-session-id={props.sessionId}
+        data-message-id={props.messageId}
+        data-part-id={toolCallIdentifier()}
+      >
+      <div class="tool-call-header" data-action-overflow={actionMenuItems().length > 1 ? "true" : undefined}>
         <button
           type="button"
           class="tool-call-header-toggle"
@@ -886,6 +926,13 @@ export default function ToolCall(props: ToolCallProps) {
           />
         </Show>
 
+        <ActionOverflowMenu
+          items={actionMenuItems()}
+          label={t("messageItem.actions.more")}
+          triggerClass="tool-call-header-copy"
+          minItems={2}
+        />
+
         <ToolStatusIndicator status={status} />
       </div>
 
diff --git a/packages/ui/src/lib/i18n/messages/en/messaging.ts b/packages/ui/src/lib/i18n/messages/en/messaging.ts
index 13db40df..63e96fe4 100644
--- a/packages/ui/src/lib/i18n/messages/en/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/en/messaging.ts
@@ -89,6 +89,7 @@ export const messagingMessages = {
   "messageItem.actions.copy": "Copy",
   "messageItem.actions.copyTitle": "Copy message",
   "messageItem.actions.copied": "Copied!",
+  "messageItem.actions.more": "More actions",
   "messageItem.actions.speak": "Speak message",
   "messageItem.actions.generatingSpeech": "Generating speech",
   "messageItem.actions.stopSpeech": "Stop playback",
diff --git a/packages/ui/src/lib/i18n/messages/es/messaging.ts b/packages/ui/src/lib/i18n/messages/es/messaging.ts
index 95ae3924..496f1da9 100644
--- a/packages/ui/src/lib/i18n/messages/es/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/es/messaging.ts
@@ -91,6 +91,7 @@ export const messagingMessages = {
   "messageItem.actions.copy": "Copiar",
   "messageItem.actions.copyTitle": "Copiar mensaje",
   "messageItem.actions.copied": "¡Copiado!",
+  "messageItem.actions.more": "Más acciones",
   "messageItem.actions.speak": "Reproducir mensaje",
   "messageItem.actions.generatingSpeech": "Generando audio",
   "messageItem.actions.stopSpeech": "Detener reproduccion",
diff --git a/packages/ui/src/lib/i18n/messages/fr/messaging.ts b/packages/ui/src/lib/i18n/messages/fr/messaging.ts
index 5400f261..42dd878b 100644
--- a/packages/ui/src/lib/i18n/messages/fr/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/messaging.ts
@@ -91,6 +91,7 @@ export const messagingMessages = {
   "messageItem.actions.copy": "Copier",
   "messageItem.actions.copyTitle": "Copier le message",
   "messageItem.actions.copied": "Copié !",
+  "messageItem.actions.more": "Plus d'actions",
   "messageItem.actions.speak": "Lire le message",
   "messageItem.actions.generatingSpeech": "Generation de l'audio",
   "messageItem.actions.stopSpeech": "Arreter la lecture",
diff --git a/packages/ui/src/lib/i18n/messages/he/messaging.ts b/packages/ui/src/lib/i18n/messages/he/messaging.ts
index 7c24ef2e..98e2d6e7 100644
--- a/packages/ui/src/lib/i18n/messages/he/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/he/messaging.ts
@@ -89,6 +89,7 @@ export const messagingMessages = {
   "messageItem.actions.copy": "העתק",
   "messageItem.actions.copyTitle": "העתק הודעה",
   "messageItem.actions.copied": "הועתק!",
+  "messageItem.actions.more": "פעולות נוספות",
   "messageItem.actions.speak": "השמע הודעה",
   "messageItem.actions.generatingSpeech": "יוצר אודיו",
   "messageItem.actions.stopSpeech": "עצור ניגון",
diff --git a/packages/ui/src/lib/i18n/messages/ja/messaging.ts b/packages/ui/src/lib/i18n/messages/ja/messaging.ts
index 42b866ba..39c1da8a 100644
--- a/packages/ui/src/lib/i18n/messages/ja/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/messaging.ts
@@ -91,6 +91,7 @@ export const messagingMessages = {
   "messageItem.actions.copy": "コピー",
   "messageItem.actions.copyTitle": "メッセージをコピー",
   "messageItem.actions.copied": "コピーしました!",
+  "messageItem.actions.more": "その他の操作",
   "messageItem.actions.speak": "メッセージを読み上げ",
   "messageItem.actions.generatingSpeech": "音声を生成中",
   "messageItem.actions.stopSpeech": "再生を停止",
diff --git a/packages/ui/src/lib/i18n/messages/ru/messaging.ts b/packages/ui/src/lib/i18n/messages/ru/messaging.ts
index 2e598152..c22eb7f9 100644
--- a/packages/ui/src/lib/i18n/messages/ru/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/messaging.ts
@@ -91,6 +91,7 @@ export const messagingMessages = {
   "messageItem.actions.copy": "Копировать",
   "messageItem.actions.copyTitle": "Копировать сообщение",
   "messageItem.actions.copied": "Скопировано!",
+  "messageItem.actions.more": "Больше действий",
   "messageItem.actions.speak": "Озвучить сообщение",
   "messageItem.actions.generatingSpeech": "Генерация аудио",
   "messageItem.actions.stopSpeech": "Остановить воспроизведение",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
index 8c2746d7..086aa1a6 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
@@ -91,6 +91,7 @@ export const messagingMessages = {
   "messageItem.actions.copy": "复制",
   "messageItem.actions.copyTitle": "复制消息",
   "messageItem.actions.copied": "已复制！",
+  "messageItem.actions.more": "更多操作",
   "messageItem.actions.speak": "朗读消息",
   "messageItem.actions.generatingSpeech": "正在生成语音",
   "messageItem.actions.stopSpeech": "停止播放",
diff --git a/packages/ui/src/styles/components/dropdown.css b/packages/ui/src/styles/components/dropdown.css
index 75bbf5c4..b85e6b4a 100644
--- a/packages/ui/src/styles/components/dropdown.css
+++ b/packages/ui/src/styles/components/dropdown.css
@@ -70,3 +70,62 @@
 .dropdown-icon-accent {
   color: var(--accent-primary);
 }
+
+.action-overflow-trigger {
+  display: none;
+}
+
+.action-overflow-content {
+  min-width: 12rem;
+  padding: 0.25rem;
+  border: 1px solid var(--border-base);
+  border-radius: 0;
+  background-color: var(--surface-base);
+  box-shadow: var(--popover-shadow);
+  color: var(--text-primary);
+  z-index: 1000;
+}
+
+.action-overflow-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  min-height: 2rem;
+  padding: 0.4rem 0.5rem;
+  border-radius: 0;
+  font-size: 0.8125rem;
+  line-height: 1.2;
+  color: var(--text-primary);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+
+.action-overflow-item:hover,
+.action-overflow-item[data-highlighted] {
+  background-color: var(--surface-hover);
+}
+
+.action-overflow-item[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.action-overflow-item[data-destructive="true"] {
+  color: var(--status-error);
+}
+
+.action-overflow-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+}
+
+.action-overflow-item-label {
+  min-width: 0;
+  flex: 1 1 auto;
+}
diff --git a/packages/ui/src/styles/messaging/message-base.css b/packages/ui/src/styles/messaging/message-base.css
index 5b290f89..92af35da 100644
--- a/packages/ui/src/styles/messaging/message-base.css
+++ b/packages/ui/src/styles/messaging/message-base.css
@@ -113,6 +113,18 @@
   transform: scale(0.95);
 }
 
+.message-item-actions > .action-overflow-trigger {
+  display: none;
+}
+
+.session-center-column[data-session-center-width="narrow"] .message-item-actions[data-action-overflow="true"] .message-action-group {
+  display: none;
+}
+
+.session-center-column[data-session-center-width="narrow"] .message-item-actions[data-action-overflow="true"] > .action-overflow-trigger {
+  display: inline-flex;
+}
+
 .message-timestamp {
   @apply text-[11px] text-[var(--text-muted)];
 }
@@ -433,10 +445,22 @@
 .message-reasoning-actions {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0;
   padding: 0.25rem 0.6rem 0.25rem 0;
 }
 
+.message-reasoning-actions > .action-overflow-trigger {
+  display: none;
+}
+
+.session-center-column[data-session-center-width="narrow"] .message-reasoning-actions[data-action-overflow="true"] > .message-action-button:not(.message-reasoning-primary-action):not(.action-overflow-trigger) {
+  display: none;
+}
+
+.session-center-column[data-session-center-width="narrow"] .message-reasoning-actions[data-action-overflow="true"] > .action-overflow-trigger {
+  display: inline-flex;
+}
+
 .message-reasoning-toggle:hover {
   background-color: transparent;
 }
diff --git a/packages/ui/src/styles/messaging/tool-call.css b/packages/ui/src/styles/messaging/tool-call.css
index f75feaae..3758cd52 100644
--- a/packages/ui/src/styles/messaging/tool-call.css
+++ b/packages/ui/src/styles/messaging/tool-call.css
@@ -49,6 +49,18 @@
   cursor: not-allowed;
 }
 
+.tool-call-header-label > .action-overflow-trigger {
+  display: none;
+}
+
+.session-center-column[data-session-center-width="narrow"] .tool-call-header-label[data-action-overflow="true"] .tool-call-header-actions {
+  display: none;
+}
+
+.session-center-column[data-session-center-width="narrow"] .tool-call-header-label[data-action-overflow="true"] > .action-overflow-trigger {
+  display: inline-flex;
+}
+
 .tool-call-header-label .tool-call-icon {
   @apply text-base;
 }
@@ -151,6 +163,19 @@
   color: var(--text-primary);
 }
 
+.tool-call-header > .action-overflow-trigger {
+  display: none;
+}
+
+.session-center-column[data-session-center-width="narrow"] .tool-call-header[data-action-overflow="true"] > .tool-call-header-input,
+.session-center-column[data-session-center-width="narrow"] .tool-call-header[data-action-overflow="true"] > .tool-call-header-copy:not(.action-overflow-trigger) {
+  display: none;
+}
+
+.session-center-column[data-session-center-width="narrow"] .tool-call-header[data-action-overflow="true"] > .action-overflow-trigger {
+  display: inline-flex;
+}
+
 .tool-call-header-status {
   @apply inline-flex items-center justify-center;
   font-size: 0.95rem;

From 0eca320d5eb5c2bd6cc5bfaa0987b7906e3693a8 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Thu, 14 May 2026 10:38:03 +0100
Subject: [PATCH 38/39] Use never release notes format

---
 .opencode/commands/release-notes.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.opencode/commands/release-notes.md b/.opencode/commands/release-notes.md
index e0c7734c..bd48f771 100644
--- a/.opencode/commands/release-notes.md
+++ b/.opencode/commands/release-notes.md
@@ -3,5 +3,5 @@ description: Creates release notes
 agent: build
 ---
 
-Check how I do prepare release notes here - https://github.com/NeuralNomadsAI/CodeNomad/releases/tag/v0.7.0
+Check how I do prepare release notes here - https://github.com/NeuralNomadsAI/CodeNomad/releases/tag/v0.15.0
 Use the same format to create release notes from users perspective for new release by looking at changes from last tagged release to tip of branch
\ No newline at end of file

From 779202d9d7f9aa3fcabf666e4e748d28d0e115f7 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Thu, 14 May 2026 10:40:21 +0100
Subject: [PATCH 39/39] Increment version to 0.16.0

---
 package-lock.json                            | 29 +++++---------------
 package.json                                 |  2 +-
 packages/cloudflare/release-config.json      |  2 +-
 packages/electron-app/package.json           |  2 +-
 packages/opencode-plugin/package.json        |  2 +-
 packages/server/package-lock.json            |  4 +--
 packages/server/package.json                 |  2 +-
 packages/tauri-app/Cargo.lock                |  2 +-
 packages/tauri-app/package.json              |  2 +-
 packages/tauri-app/src-tauri/Cargo.toml      |  2 +-
 packages/tauri-app/src-tauri/tauri.conf.json |  2 +-
 packages/ui/package.json                     |  2 +-
 12 files changed, 19 insertions(+), 34 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b2fb90ce..9b6d5197 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "codenomad-workspace",
-      "version": "0.15.0",
+      "version": "0.16.0",
       "license": "MIT",
       "dependencies": {
         "7zip-bin": "^5.2.0",
@@ -4075,9 +4075,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0 OR MIT",
       "optional": true,
       "os": [
@@ -4095,9 +4092,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0 OR MIT",
       "optional": true,
       "os": [
@@ -4115,9 +4109,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0 OR MIT",
       "optional": true,
       "os": [
@@ -4135,9 +4126,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0 OR MIT",
       "optional": true,
       "os": [
@@ -4155,9 +4143,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0 OR MIT",
       "optional": true,
       "os": [
@@ -13421,7 +13406,7 @@
     },
     "packages/electron-app": {
       "name": "@neuralnomads/codenomad-electron-app",
-      "version": "0.15.0",
+      "version": "0.16.0",
       "license": "MIT",
       "dependencies": {
         "@codenomad/ui": "file:../ui",
@@ -13450,7 +13435,7 @@
     },
     "packages/opencode-plugin": {
       "name": "@codenomad/codenomad-opencode-plugin",
-      "version": "0.15.0",
+      "version": "0.16.0",
       "license": "MIT",
       "dependencies": {
         "@opencode-ai/plugin": "1.3.7"
@@ -13462,7 +13447,7 @@
     },
     "packages/server": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.15.0",
+      "version": "0.16.0",
       "license": "MIT",
       "dependencies": {
         "@fastify/cors": "^8.5.0",
@@ -13504,7 +13489,7 @@
     },
     "packages/tauri-app": {
       "name": "@codenomad/tauri-app",
-      "version": "0.15.0",
+      "version": "0.16.0",
       "license": "MIT",
       "devDependencies": {
         "@tauri-apps/cli": "^2.9.4"
@@ -13512,7 +13497,7 @@
     },
     "packages/ui": {
       "name": "@codenomad/ui",
-      "version": "0.15.0",
+      "version": "0.16.0",
       "license": "MIT",
       "dependencies": {
         "@git-diff-view/solid": "^0.0.8",
diff --git a/package.json b/package.json
index 9035ba6c..b4337c87 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "private": true,
   "description": "CodeNomad monorepo workspace",
   "license": "MIT",
diff --git a/packages/cloudflare/release-config.json b/packages/cloudflare/release-config.json
index 479969cc..a996a65f 100644
--- a/packages/cloudflare/release-config.json
+++ b/packages/cloudflare/release-config.json
@@ -1,4 +1,4 @@
 {
-  "minServerVersion": "0.15.0",
+  "minServerVersion": "0.16.0",
   "latestServerUrl": "https://github.com/NeuralNomadsAI/CodeNomad/releases/latest"
 }
diff --git a/packages/electron-app/package.json b/packages/electron-app/package.json
index 460daf6a..e33e5718 100644
--- a/packages/electron-app/package.json
+++ b/packages/electron-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@neuralnomads/codenomad-electron-app",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "CodeNomad - AI coding assistant",
   "license": "MIT",
   "author": {
diff --git a/packages/opencode-plugin/package.json b/packages/opencode-plugin/package.json
index fe7e16c3..a77516bb 100644
--- a/packages/opencode-plugin/package.json
+++ b/packages/opencode-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/codenomad-opencode-plugin",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "private": true,
   "license": "MIT",
   "type": "module",
diff --git a/packages/server/package-lock.json b/packages/server/package-lock.json
index 5f97fe0c..df79cd15 100644
--- a/packages/server/package-lock.json
+++ b/packages/server/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.15.0",
+      "version": "0.16.0",
       "license": "MIT",
       "dependencies": {
         "@fastify/cors": "^11.2.0",
diff --git a/packages/server/package.json b/packages/server/package.json
index 781c8b83..6639b360 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "CodeNomad Server",
   "license": "MIT",
   "author": {
diff --git a/packages/tauri-app/Cargo.lock b/packages/tauri-app/Cargo.lock
index 4024304e..828f003d 100644
--- a/packages/tauri-app/Cargo.lock
+++ b/packages/tauri-app/Cargo.lock
@@ -497,7 +497,7 @@ dependencies = [
 
 [[package]]
 name = "codenomad-tauri"
-version = "0.15.0"
+version = "0.16.0"
 dependencies = [
  "anyhow",
  "base64 0.22.1",
diff --git a/packages/tauri-app/package.json b/packages/tauri-app/package.json
index 31c0192e..62944e2d 100644
--- a/packages/tauri-app/package.json
+++ b/packages/tauri-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/tauri-app",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "private": true,
   "license": "MIT",
   "scripts": {
diff --git a/packages/tauri-app/src-tauri/Cargo.toml b/packages/tauri-app/src-tauri/Cargo.toml
index 188c8723..f464f23b 100644
--- a/packages/tauri-app/src-tauri/Cargo.toml
+++ b/packages/tauri-app/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "codenomad-tauri"
-version = "0.15.0"
+version = "0.16.0"
 edition = "2021"
 license = "MIT"
 
diff --git a/packages/tauri-app/src-tauri/tauri.conf.json b/packages/tauri-app/src-tauri/tauri.conf.json
index 09b0da16..7011ded1 100644
--- a/packages/tauri-app/src-tauri/tauri.conf.json
+++ b/packages/tauri-app/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "CodeNomad",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "identifier": "ai.neuralnomads.codenomad.client",
   "build": {
     "beforeDevCommand": "npm run dev:bootstrap",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c87a652a..bf7293ae 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "private": true,
   "license": "MIT",
   "type": "module",