Ensure autoscroll reacts to UI toggles

This reverts commit 4622bdc7ea.

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

@@ -17,6 +17,7 @@ on:
         type: string
 
 permissions:
+  id-token: write
   contents: write
 
 env:
@@ -24,7 +25,7 @@ env:
 
 jobs:
   build-macos:
-    runs-on: macos-13
+    runs-on: macos-15-intel
     env:
       GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       VERSION: ${{ inputs.version }}
@@ -40,31 +41,29 @@ jobs:
           cache: npm
 
       - name: Set workspace versions
-        run: npm pkg set version=${VERSION} --workspaces --include-workspace-root
+        run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
 
       - name: Install dependencies
         run: npm ci --workspaces
 
-      - name: Build macOS binaries
+      - name: Ensure rollup native binary
+        run: npm install @rollup/rollup-darwin-x64 --no-save
+
+      - name: Build macOS binaries (Electron)
         run: npm run build:mac --workspace @neuralnomads/codenomad-electron-app
 
       - name: Upload release assets
         run: |
+          set -euo pipefail
           shopt -s nullglob
-          for file in packages/electron-app/release/*; do
+          for file in packages/electron-app/release/*.zip; do
             [ -f "$file" ] || continue
-            case "$file" in
-              *.dmg|*.zip)
-                gh release upload "$TAG" "$file" --clobber
-                ;;
-              *)
-                echo "Skipping non-installer asset: $file"
-                ;;
-            esac
+            echo "Uploading $file"
+            gh release upload "$TAG" "$file" --clobber
           done
 
   build-windows:
-    runs-on: windows-latest
+    runs-on: windows-2025
     env:
       GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       VERSION: ${{ inputs.version }}
@@ -80,26 +79,28 @@ jobs:
           cache: npm
 
       - name: Set workspace versions
-        run: npm pkg set version=${{ env.VERSION }} --workspaces --include-workspace-root
+        run: npm version ${{ env.VERSION }} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
         shell: bash
 
       - name: Install dependencies
         run: npm ci --workspaces
 
-      - name: Build Windows binaries
+      - name: Ensure rollup native binary
+        run: npm install @rollup/rollup-win32-x64-msvc --no-save
+
+      - name: Build Windows binaries (Electron)
         run: npm run build:win --workspace @neuralnomads/codenomad-electron-app
 
       - name: Upload release assets
         shell: pwsh
         run: |
-          Get-ChildItem -Path "packages/electron-app/release" -File | Where-Object {
-            $_.Name -match '\\.(exe|zip)$'
-          } | ForEach-Object {
+          Get-ChildItem -Path "packages/electron-app/release" -Filter *.zip -File | ForEach-Object {
+            Write-Host "Uploading $($_.FullName)"
             gh release upload $env:TAG $_.FullName --clobber
           }
 
   build-linux:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     env:
       GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       VERSION: ${{ inputs.version }}
@@ -115,31 +116,366 @@ jobs:
           cache: npm
 
       - name: Set workspace versions
-        run: npm pkg set version=${VERSION} --workspaces --include-workspace-root
+        run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
 
       - name: Install dependencies
         run: npm ci --workspaces
 
-      - name: Build Linux binaries
+      - name: Ensure rollup native binary
+        run: npm install @rollup/rollup-linux-x64-gnu --no-save
+
+      - name: Build Linux binaries (Electron)
         run: npm run build:linux --workspace @neuralnomads/codenomad-electron-app
 
       - name: Upload release assets
         run: |
+          set -euo pipefail
           shopt -s nullglob
-          for file in packages/electron-app/release/*; do
+          for file in packages/electron-app/release/*.zip; do
             [ -f "$file" ] || continue
-            case "$file" in
-              *.AppImage|*.deb|*.tar.gz)
-                gh release upload "$TAG" "$file" --clobber
-                ;;
-              *)
-                echo "Skipping non-installer asset: $file"
-                ;;
-            esac
+            echo "Uploading $file"
+            gh release upload "$TAG" "$file" --clobber
           done
 
+  build-tauri-macos:
+    runs-on: macos-15-intel
+    env:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      VERSION: ${{ inputs.version }}
+      TAG: ${{ inputs.tag }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: npm
+
+      - name: Setup Rust (Tauri)
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Set workspace versions
+        run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
+
+      - name: Install dependencies
+        run: npm ci --workspaces
+
+      - name: Ensure rollup native binary
+        run: npm install @rollup/rollup-darwin-x64 --no-save
+
+      - name: Build macOS bundle (Tauri)
+        run: npm run build --workspace @codenomad/tauri-app
+
+      - name: Package Tauri artifacts (macOS)
+        run: |
+          set -euo pipefail
+          BUNDLE_ROOT="packages/tauri-app/target/release/bundle"
+          ARTIFACT_DIR="packages/tauri-app/release-tauri"
+          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"
+          fi
+
+      - name: Upload Tauri release assets (macOS)
+        run: |
+          set -euo pipefail
+          shopt -s nullglob
+          for file in packages/tauri-app/release-tauri/*.zip; do
+            [ -f "$file" ] || continue
+            echo "Uploading $file"
+            gh release upload "$TAG" "$file" --clobber
+          done
+
+  build-tauri-macos-arm64:
+    runs-on: macos-26
+    env:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      VERSION: ${{ inputs.version }}
+      TAG: ${{ inputs.tag }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: npm
+
+      - name: Setup Rust (Tauri)
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Set workspace versions
+        run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
+
+      - name: Install dependencies
+        run: npm ci --workspaces
+
+      - name: Ensure rollup native binary
+        run: npm install @rollup/rollup-darwin-arm64 --no-save
+
+      - name: Build macOS bundle (Tauri, arm64)
+        run: npm run build --workspace @codenomad/tauri-app
+
+      - name: Package Tauri artifacts (macOS arm64)
+        run: |
+          set -euo pipefail
+          BUNDLE_ROOT="packages/tauri-app/target/release/bundle"
+          ARTIFACT_DIR="packages/tauri-app/release-tauri"
+          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"
+          fi
+
+      - name: Upload Tauri release assets (macOS arm64)
+        run: |
+          set -euo pipefail
+          shopt -s nullglob
+          for file in packages/tauri-app/release-tauri/*.zip; do
+            [ -f "$file" ] || continue
+            echo "Uploading $file"
+            gh release upload "$TAG" "$file" --clobber
+          done
+
+  build-tauri-windows:
+    runs-on: windows-2025
+    env:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      VERSION: ${{ inputs.version }}
+      TAG: ${{ inputs.tag }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: npm
+
+      - name: Setup Rust (Tauri)
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Set workspace versions
+        run: npm version ${{ env.VERSION }} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
+        shell: bash
+
+      - name: Install dependencies
+        run: npm ci --workspaces
+
+      - name: Ensure rollup native binary
+        run: npm install @rollup/rollup-win32-x64-msvc --no-save
+
+      - name: Build Windows bundle (Tauri)
+        run: npm run build --workspace @codenomad/tauri-app
+
+      - name: Package Tauri artifacts (Windows)
+        shell: pwsh
+        run: |
+          $bundleRoot = "packages/tauri-app/target/release/bundle"
+          $artifactDir = "packages/tauri-app/release-tauri"
+          if (Test-Path $artifactDir) { Remove-Item $artifactDir -Recurse -Force }
+          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")
+            Compress-Archive -Path $exe.Directory.FullName -DestinationPath $dest -Force
+          }
+
+      - name: Upload Tauri release assets (Windows)
+        shell: pwsh
+        run: |
+          if (Test-Path "packages/tauri-app/release-tauri") {
+            Get-ChildItem -Path "packages/tauri-app/release-tauri" -Filter *.zip -File | ForEach-Object {
+              Write-Host "Uploading $($_.FullName)"
+              gh release upload $env:TAG $_.FullName --clobber
+            }
+          }
+
+  build-tauri-linux:
+    runs-on: ubuntu-24.04
+    env:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      VERSION: ${{ inputs.version }}
+      TAG: ${{ inputs.tag }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: npm
+
+      - name: Setup Rust (Tauri)
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Install Linux build dependencies (Tauri)
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            build-essential \
+            pkg-config \
+            libgtk-3-dev \
+            libglib2.0-dev \
+            libwebkit2gtk-4.1-dev \
+            libsoup-3.0-dev \
+            libayatana-appindicator3-dev \
+            librsvg2-dev
+
+      - name: Set workspace versions
+        run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
+
+      - name: Install dependencies
+        run: npm ci --workspaces
+
+      - name: Ensure rollup native binary
+        run: npm install @rollup/rollup-linux-x64-gnu --no-save
+
+      - name: Build Linux bundle (Tauri)
+        run: npm run build --workspace @codenomad/tauri-app
+
+      - name: Package Tauri artifacts (Linux)
+        run: |
+          set -euo pipefail
+          SEARCH_ROOT="packages/tauri-app/target"
+          ARTIFACT_DIR="packages/tauri-app/release-tauri"
+          rm -rf "$ARTIFACT_DIR"
+          mkdir -p "$ARTIFACT_DIR"
+          shopt -s nullglob globstar
+
+          find_one() {
+            find "$SEARCH_ROOT" -type f -iname "$1" | head -n1
+          }
+
+          appimage=$(find_one "*.AppImage")
+          deb=$(find_one "*.deb")
+          rpm=$(find_one "*.rpm")
+
+          if [ -z "$appimage" ] || [ -z "$deb" ] || [ -z "$rpm" ]; then
+            echo "Missing bundle(s): appimage=${appimage:-none} deb=${deb:-none} rpm=${rpm:-none}" >&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"
+
+      - name: Upload Tauri release assets (Linux)
+        run: |
+          set -euo pipefail
+          shopt -s nullglob
+          for file in packages/tauri-app/release-tauri/*; do
+            [ -f "$file" ] || continue
+            echo "Uploading $file"
+            gh release upload "$TAG" "$file" --clobber
+          done
+
+  build-tauri-linux-arm64:
+    if: ${{ false }}
+    runs-on: ubuntu-24.04
+    env:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      VERSION: ${{ inputs.version }}
+      TAG: ${{ inputs.tag }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: linux/arm64
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: npm
+
+      - name: Setup Rust (Tauri)
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: aarch64-unknown-linux-gnu
+
+      - name: Install Linux build dependencies (Tauri)
+        run: |
+          sudo dpkg --add-architecture arm64
+          sudo tee /etc/apt/sources.list.d/arm64.list >/dev/null <<'EOF'
+          deb [arch=arm64] http://ports.ubuntu.com/ubuntu-ports noble main restricted universe multiverse
+          deb [arch=arm64] http://ports.ubuntu.com/ubuntu-ports noble-updates main restricted universe multiverse
+          deb [arch=arm64] http://ports.ubuntu.com/ubuntu-ports noble-security main restricted universe multiverse
+          deb [arch=arm64] http://ports.ubuntu.com/ubuntu-ports noble-backports main restricted universe multiverse
+          EOF
+          sudo apt-get update
+          sudo apt-get install -y \
+            build-essential \
+            pkg-config \
+            gcc-aarch64-linux-gnu \
+            g++-aarch64-linux-gnu \
+            libgtk-3-dev:arm64 \
+            libglib2.0-dev:arm64 \
+            libwebkit2gtk-4.1-dev:arm64 \
+            libsoup-3.0-dev:arm64 \
+            libayatana-appindicator3-dev:arm64 \
+            librsvg2-dev:arm64
+
+      - name: Set workspace versions
+        run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
+
+      - name: Install dependencies
+        run: npm ci --workspaces
+
+      - name: Ensure rollup native binary
+        run: npm install @rollup/rollup-linux-arm64-gnu --no-save
+
+      - name: Build Linux bundle (Tauri arm64)
+        env:
+          TAURI_BUILD_TARGET: aarch64-unknown-linux-gnu
+          PKG_CONFIG_PATH: /usr/lib/aarch64-linux-gnu/pkgconfig
+          CC_aarch64_unknown_linux_gnu: aarch64-linux-gnu-gcc
+          CXX_aarch64_unknown_linux_gnu: aarch64-linux-gnu-g++
+          AR_aarch64_unknown_linux_gnu: aarch64-linux-gnu-ar
+        run: npm run build --workspace @codenomad/tauri-app
+
+      - name: Package Tauri artifacts (Linux arm64)
+        run: |
+          set -euo pipefail
+          SEARCH_ROOT="packages/tauri-app/target"
+          ARTIFACT_DIR="packages/tauri-app/release-tauri"
+          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)
+          fallback_bin="$SEARCH_ROOT/release/codenomad-tauri"
+          if [ -n "$first_artifact" ]; then
+            zip -j "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-linux-x64.zip" "$first_artifact"
+          elif [ -f "$fallback_bin" ]; then
+            zip -j "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-linux-x64.zip" "$fallback_bin"
+          else
+            echo "No bundled artifact found under $SEARCH_ROOT and no binary at $fallback_bin" >&2
+            exit 1
+          fi
+
+
+      - name: Upload Tauri release assets (Linux arm64)
+        run: |
+          set -euo pipefail
+          shopt -s nullglob
+          for file in packages/tauri-app/release-tauri/*.zip; do
+            [ -f "$file" ] || continue
+            echo "Uploading $file"
+            gh release upload "$TAG" "$file" --clobber
+          done
+
+
   build-linux-rpm:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     env:
       GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       VERSION: ${{ inputs.version }}
@@ -161,18 +497,23 @@ jobs:
           sudo gem install --no-document fpm
 
       - name: Set workspace versions
-        run: npm pkg set version=${VERSION} --workspaces --include-workspace-root
+        run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
 
       - name: Install project dependencies
         run: npm ci --workspaces
 
+      - 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
         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

.github/workflows/dev-release.yml

@@ -4,6 +4,7 @@ on:
   workflow_dispatch:
 
 permissions:
+  id-token: write
   contents: write
 
 env:
@@ -30,8 +31,7 @@ jobs:
         run: |
           BASE_VERSION=$(node -p "require('./package.json').version")
           DEV_VERSION="${BASE_VERSION}-dev"
-          TIMESTAMP=$(date -u +%y%m%d-%H%M)
-          TAG="v${DEV_VERSION}-${TIMESTAMP}"
+          TAG="v${DEV_VERSION}"
           echo "version=$DEV_VERSION" >> "$GITHUB_OUTPUT"
           echo "tag=$TAG" >> "$GITHUB_OUTPUT"
           echo "release_name=$TAG" >> "$GITHUB_OUTPUT"
@@ -57,30 +57,9 @@ jobs:
     secrets: inherit
 
   publish-server:
-    needs: build-and-upload
-    runs-on: ubuntu-latest
-    env:
-      NODE_VERSION: 20
-      NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-      VERSION: ${{ needs.prepare-dev.outputs.version }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: npm
-
-      - name: Set workspace versions
-        run: npm pkg set version=${VERSION} --workspaces --include-workspace-root
-
-      - name: Install dependencies
-        run: npm ci --workspaces
-
-      - name: Build server package
-        run: npm run build --workspace @neuralnomads/codenomad
-
-      - name: Publish server package to dev tag
-        run: npm publish --workspace @neuralnomads/codenomad --access public --tag dev
+    needs: prepare-dev
+    uses: ./.github/workflows/manual-npm-publish.yml
+    with:
+      version: ${{ needs.prepare-dev.outputs.version }}
+      dist_tag: dev
+    secrets: inherit

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

@@ -0,0 +1,74 @@
+name: Manual NPM Publish
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: "Version to publish (e.g. 0.2.0-dev)"
+        required: false
+        type: string
+      dist_tag:
+        description: "npm dist-tag"
+        required: false
+        default: dev
+        type: string
+  workflow_call:
+    inputs:
+      version:
+        required: true
+        type: string
+      dist_tag:
+        required: false
+        type: string
+        default: dev
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    env:
+      NODE_VERSION: 20
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          registry-url: https://registry.npmjs.org
+
+      - name: Ensure npm >=11.5.1
+        run: npm install -g npm@latest
+
+      - name: Install dependencies
+        run: npm ci --workspaces
+
+      - name: Ensure rollup native binary
+        run: npm install @rollup/rollup-linux-x64-gnu --no-save
+
+      - name: Build server package (includes UI bundling)
+        run: npm run build --workspace @neuralnomads/codenomad
+
+      - name: Set publish metadata
+        shell: bash
+        run: |
+          VERSION_INPUT="${{ inputs.version }}"
+          if [ -z "$VERSION_INPUT" ]; then
+            VERSION_INPUT=$(node -p "require('./package.json').version")
+          fi
+          echo "VERSION=$VERSION_INPUT" >> "$GITHUB_ENV"
+          echo "DIST_TAG=${{ inputs.dist_tag || 'dev' }}" >> "$GITHUB_ENV"
+
+      - name: Bump package version for publish
+        run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
+
+      - name: Publish server package with provenance
+        env:
+          NPM_CONFIG_PROVENANCE: true
+          NPM_CONFIG_REGISTRY: https://registry.npmjs.org
+        run: |
+          npm publish --workspace @neuralnomads/codenomad --access public --tag ${DIST_TAG} --provenance

.github/workflows/release.yml

@@ -6,6 +6,7 @@ on:
       - main
 
 permissions:
+  id-token: write
   contents: write
 
 env:
@@ -73,26 +74,9 @@ jobs:
     secrets: inherit
 
   publish-server:
-    needs: build-and-upload
-    runs-on: ubuntu-latest
-    env:
-      NODE_VERSION: 20
-      NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: npm
-
-      - name: Install dependencies
-        run: npm ci --workspaces
-
-      - name: Build server package
-        run: npm run build --workspace @neuralnomads/codenomad
-
-      - name: Publish server package
-        run: npm publish --workspace @neuralnomads/codenomad --access public --tag latest
+    needs: prepare-release
+    uses: ./.github/workflows/manual-npm-publish.yml
+    with:
+      version: ${{ needs.prepare-release.outputs.version }}
+      dist_tag: latest
+    secrets: inherit

.opencode/agent/web_developer.md

@@ -1,6 +1,5 @@
 ---
 description: Develops Web UI components.
 mode: all
-model: zai-coding-plan/glm-4.6
 ---
 You are a Web Frontend Developer Agent. Your primary focus is on developing SolidJS UI components, ensuring adherence to modern web best practices, excellent UI/UX, and efficient data integration.

README.md

@@ -13,10 +13,10 @@ _Manage multiple OpenCode sessions side-by-side._
 ![Command palette overlay](docs/screenshots/command-palette.png)
 _Global command palette for keyboard-first control._
 
-![Image Previews](images/image-previews.png)
+![Image Previews](docs/screenshots/image-previews.png)
 _Rich media previews for images and assets._
 
-![Browser Support](images/browser-support.png)
+![Browser Support](docs/screenshots/browser-support.png)
 _Browser support via CodeNomad Server._
 
 </details>
@@ -26,11 +26,17 @@ _Browser support via CodeNomad Server._
 Choose the way that fits your workflow:
 
 ### 🖥️ Desktop App (Recommended)
-The best experience. A native application with global shortcuts, deeper system integration, and a dedicated window.
+The best experience. A native application (Electron-based) with global shortcuts, deeper system integration, and a dedicated window.
 
 - **Download**: Grab the latest installer for macOS, Windows, or Linux from the [Releases Page](https://github.com/shantur/CodeNomad/releases).
 - **Run**: Install and launch like any other app.
 
+### 🦀 Tauri App (Experimental)
+We are also working on a lightweight, high-performance version built with [Tauri](https://tauri.app). It is currently in active development.
+
+- **Download**: Experimental builds are available on the [Releases Page](https://github.com/shantur/CodeNomad/releases).
+- **Source**: Check out `packages/tauri-app` if you're interested in contributing.
+
 ### 💻 CodeNomad Server
 Run CodeNomad as a local server and access it via your web browser. Perfect for remote development (SSH/VPN) or running as a service.
 

dev-docs/architecture.md

@@ -29,13 +29,13 @@ CodeNomad is a cross-platform desktop application built with Electron that provi
 │  │  │  State Management (SolidJS Stores)         │  │  │
 │  │  │  - instances[]                             │  │  │
 │  │  │  - sessions[] per instance                 │  │  │
-│  │  │  - messages[] per session                  │  │  │
+│  │  │  - normalized message store per session    │  │  │
 │  │  └────────────────────────────────────────────┘  │  │
 │  │  ┌────────────────────────────────────────────┐  │  │
 │  │  │  UI Components                             │  │  │
 │  │  │  - InstanceTabs                            │  │  │
 │  │  │  - SessionTabs                             │  │  │
-│  │  │  - MessageStream                           │  │  │
+│  │  │  - MessageStreamV2                        │  │  │
 │  │  │  - PromptInput                             │  │  │
 │  │  └────────────────────────────────────────────┘  │  │
 │  └──────────────────────────────────────────────────┘  │

dev-docs/technical-implementation.md

@@ -49,7 +49,7 @@ packages/opencode-client/
 │   ├── components/
 │   │   ├── instance-tabs.tsx       # Level 1 tabs
 │   │   ├── session-tabs.tsx        # Level 2 tabs
-│   │   ├── message-stream.tsx      # Messages display
+│   │   ├── message-stream-v2.tsx  # Messages display (normalized store)
 │   │   ├── message-item.tsx        # Single message
 │   │   ├── tool-call.tsx           # Tool execution display
 │   │   ├── prompt-input.tsx        # Input with attachments
@@ -153,16 +153,24 @@ interface Session {
     providerId: string
     modelId: string
   }
-  messages: Message[]
-  status: SessionStatus
-  createdAt: number
-  updatedAt: number
+  version: string
+  time: { created: number; updated: number }
+  revert?: {
+    messageID?: string
+    partID?: string
+    snapshot?: string
+    diff?: string
+  }
 }
 
+// Message content lives in the normalized message-v2 store
+// keyed by instanceId/sessionId/messageId
+
 type SessionStatus =
   | "idle" // No activity
   | "streaming" // Assistant responding
   | "error" // Error occurred
+
 ```
 
 ### UI Store

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.1.2",
+  "version": "0.2.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "codenomad-workspace",
-      "version": "0.1.2",
+      "version": "0.2.4",
       "dependencies": {
         "7zip-bin": "^5.2.0",
         "google-auth-library": "^10.5.0"
@@ -313,12 +313,8 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@neuralnomads/codenomad": {
-      "resolved": "packages/server",
-      "link": true
-    },
-    "node_modules/@neuralnomads/codenomad-electron-app": {
-      "resolved": "packages/electron-app",
+    "node_modules/@codenomad/tauri-app": {
+      "resolved": "packages/tauri-app",
       "link": true
     },
     "node_modules/@codenomad/ui": {
@@ -1233,6 +1229,14 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/@neuralnomads/codenomad": {
+      "resolved": "packages/server",
+      "link": true
+    },
+    "node_modules/@neuralnomads/codenomad-electron-app": {
+      "resolved": "packages/electron-app",
+      "link": true
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1549,6 +1553,223 @@
         "node": ">=10"
       }
     },
+    "node_modules/@tauri-apps/cli": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli/-/cli-2.9.4.tgz",
+      "integrity": "sha512-pvylWC9QckrOS9ATWXIXcgu7g2hKK5xTL5ZQyZU/U0n9l88SEFGcWgLQNa8WZmd+wWIOWhkxOFcOl3i6ubDNNw==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "bin": {
+        "tauri": "tauri.js"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/tauri"
+      },
+      "optionalDependencies": {
+        "@tauri-apps/cli-darwin-arm64": "2.9.4",
+        "@tauri-apps/cli-darwin-x64": "2.9.4",
+        "@tauri-apps/cli-linux-arm-gnueabihf": "2.9.4",
+        "@tauri-apps/cli-linux-arm64-gnu": "2.9.4",
+        "@tauri-apps/cli-linux-arm64-musl": "2.9.4",
+        "@tauri-apps/cli-linux-riscv64-gnu": "2.9.4",
+        "@tauri-apps/cli-linux-x64-gnu": "2.9.4",
+        "@tauri-apps/cli-linux-x64-musl": "2.9.4",
+        "@tauri-apps/cli-win32-arm64-msvc": "2.9.4",
+        "@tauri-apps/cli-win32-ia32-msvc": "2.9.4",
+        "@tauri-apps/cli-win32-x64-msvc": "2.9.4"
+      }
+    },
+    "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/cli-darwin-x64": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-2.9.4.tgz",
+      "integrity": "sha512-VT9ymNuT06f5TLjCZW2hfSxbVtZDhORk7CDUDYiq5TiSYQdxkl8MVBy0CCFFcOk4QAkUmqmVUA9r3YZ/N/vPRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "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,
+      "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,
+      "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,
+      "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,
+      "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,
+      "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",
+      "integrity": "sha512-EdYd4c9wGvtPB95kqtEyY+bUR+k4kRw3IA30mAQ1jPH6z57AftT8q84qwv0RDp6kkEqOBKxeInKfqi4BESYuqg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -8390,9 +8611,37 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "packages/electron-app": {
+      "name": "@neuralnomads/codenomad-electron-app",
+      "version": "0.2.4",
+      "dependencies": {
+        "@codenomad/ui": "file:../ui",
+        "@neuralnomads/codenomad": "file:../server"
+      },
+      "devDependencies": {
+        "7zip-bin": "^5.2.0",
+        "app-builder-bin": "^4.2.0",
+        "electron": "39.0.0",
+        "electron-builder": "^24.0.0",
+        "electron-vite": "4.0.1",
+        "png2icons": "^2.0.1",
+        "pngjs": "^7.0.0",
+        "tsx": "^4.20.6",
+        "typescript": "^5.3.0",
+        "vite": "^5.0.0",
+        "vite-plugin-solid": "^2.10.0"
+      }
+    },
+    "packages/electron-app/node_modules/app-builder-bin": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/app-builder-bin/-/app-builder-bin-4.2.0.tgz",
+      "integrity": "sha512-PGXlkukQnroTgAaDZnnppdLzsRJmab6Rh/rJ5fKyYaYhd+FfaORH59/ArkB5dr2cAeYQU5lCeHFEwURaoBO8BA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "packages/server": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.1.0",
+      "version": "0.2.4",
       "dependencies": {
         "@fastify/cors": "^8.5.0",
         "@fastify/reply-from": "^9.8.0",
@@ -8429,37 +8678,16 @@
       "integrity": "sha512-Api1mJL+Ad7W7vnDZnWq5pGaXJjyencT+iKGia2PlHUcSsSzWwIQ3S1isiMpwpavjYtGd2FzhUIhnnhOULZgDw==",
       "license": "MIT"
     },
-    "packages/electron-app": {
-      "name": "@neuralnomads/codenomad-electron-app",
-      "version": "0.1.2",
-      "dependencies": {
-        "@neuralnomads/codenomad": "file:../server",
-        "@codenomad/ui": "file:../ui"
-      },
+    "packages/tauri-app": {
+      "name": "@codenomad/tauri-app",
+      "version": "0.2.4",
       "devDependencies": {
-        "7zip-bin": "^5.2.0",
-        "app-builder-bin": "^4.2.0",
-        "electron": "39.0.0",
-        "electron-builder": "^24.0.0",
-        "electron-vite": "4.0.1",
-        "png2icons": "^2.0.1",
-        "pngjs": "^7.0.0",
-        "tsx": "^4.20.6",
-        "typescript": "^5.3.0",
-        "vite": "^5.0.0",
-        "vite-plugin-solid": "^2.10.0"
+        "@tauri-apps/cli": "^2.9.4"
       }
     },
-    "packages/electron-app/node_modules/app-builder-bin": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/app-builder-bin/-/app-builder-bin-4.2.0.tgz",
-      "integrity": "sha512-PGXlkukQnroTgAaDZnnppdLzsRJmab6Rh/rJ5fKyYaYhd+FfaORH59/ArkB5dr2cAeYQU5lCeHFEwURaoBO8BA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "packages/ui": {
       "name": "@codenomad/ui",
-      "version": "0.1.2",
+      "version": "0.2.4",
       "dependencies": {
         "@git-diff-view/solid": "^0.0.8",
         "@kobalte/core": "0.13.11",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.2.0",
+  "version": "0.2.4",
   "private": true,
   "description": "CodeNomad monorepo workspace",
   "workspaces": {

packages/electron-app/electron.vite.config.ts

@@ -6,6 +6,7 @@ const uiRoot = resolve(__dirname, "../ui")
 const uiSrc = resolve(uiRoot, "src")
 const uiRendererRoot = resolve(uiRoot, "src/renderer")
 const uiRendererEntry = resolve(uiRendererRoot, "index.html")
+const uiRendererLoadingEntry = resolve(uiRendererRoot, "loading.html")
 
 export default defineConfig({
   main: {
@@ -54,7 +55,10 @@ export default defineConfig({
     build: {
       outDir: resolve(__dirname, "dist/renderer"),
       rollupOptions: {
-        input: uiRendererEntry,
+        input: {
+          main: uiRendererEntry,
+          loading: uiRendererLoadingEntry,
+        },
       },
     },
   },

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

@@ -1,5 +1,17 @@
-import { BrowserWindow, ipcMain } from "electron"
-import type { CliLogEntry, CliProcessManager, CliStatus } from "./process-manager"
+import { BrowserWindow, dialog, ipcMain, type OpenDialogOptions } from "electron"
+import type { CliProcessManager, CliStatus } from "./process-manager"
+
+interface DialogOpenRequest {
+  mode: "directory" | "file"
+  title?: string
+  defaultPath?: string
+  filters?: Array<{ name?: string; extensions: string[] }>
+}
+
+interface DialogOpenResult {
+  canceled: boolean
+  paths: string[]
+}
 
 export function setupCliIPC(mainWindow: BrowserWindow, cliManager: CliProcessManager) {
   cliManager.on("status", (status: CliStatus) => {
@@ -14,12 +26,6 @@ export function setupCliIPC(mainWindow: BrowserWindow, cliManager: CliProcessMan
     }
   })
 
-  cliManager.on("log", (entry: CliLogEntry) => {
-    if (!mainWindow.isDestroyed()) {
-      mainWindow.webContents.send("cli:log", entry)
-    }
-  })
-
   cliManager.on("error", (error: Error) => {
     if (!mainWindow.isDestroyed()) {
       mainWindow.webContents.send("cli:error", { message: error.message })
@@ -27,4 +33,27 @@ export function setupCliIPC(mainWindow: BrowserWindow, cliManager: CliProcessMan
   })
 
   ipcMain.handle("cli:getStatus", async () => cliManager.getStatus())
+
+  ipcMain.handle("dialog:open", async (_, request: DialogOpenRequest): Promise<DialogOpenResult> => {
+    const properties: OpenDialogOptions["properties"] =
+      request.mode === "directory" ? ["openDirectory", "createDirectory"] : ["openFile"]
+
+    const filters = request.filters?.map((filter) => ({
+      name: filter.name ?? "Files",
+      extensions: filter.extensions,
+    }))
+
+    const windowTarget = mainWindow.isDestroyed() ? undefined : mainWindow
+    const dialogOptions: OpenDialogOptions = {
+      title: request.title,
+      defaultPath: request.defaultPath,
+      properties,
+      filters,
+    }
+    const result = windowTarget
+      ? await dialog.showOpenDialog(windowTarget, dialogOptions)
+      : await dialog.showOpenDialog(dialogOptions)
+
+    return { canceled: result.canceled, paths: result.filePaths }
+  })
 }

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

@@ -30,22 +30,63 @@ function getIconPath() {
   return join(mainDirname, "../resources/icon.png")
 }
 
-function getLoadingHtmlPath() {
+type LoadingTarget =
+  | { type: "url"; source: string }
+  | { type: "file"; source: string }
+
+function resolveDevLoadingUrl(): string | null {
   if (app.isPackaged) {
-    return join(process.resourcesPath, "loading.html")
+    return null
+  }
+  const devBase = process.env.VITE_DEV_SERVER_URL || process.env.ELECTRON_RENDERER_URL
+  if (!devBase) {
+    return null
   }
 
-  const distResources = join(mainDirname, "../resources/loading.html")
-  if (existsSync(distResources)) {
-    return distResources
+  try {
+    const normalized = devBase.endsWith("/") ? devBase : `${devBase}/`
+    return new URL("loading.html", normalized).toString()
+  } catch (error) {
+    console.warn("[cli] failed to construct dev loading URL", devBase, error)
+    return null
+  }
+}
+
+function resolveLoadingTarget(): LoadingTarget {
+  const devUrl = resolveDevLoadingUrl()
+  if (devUrl) {
+    return { type: "url", source: devUrl }
+  }
+  const filePath = resolveLoadingFilePath()
+  return { type: "file", source: filePath }
+}
+
+function resolveLoadingFilePath() {
+  const candidates = [
+    join(app.getAppPath(), "dist/renderer/loading.html"),
+    join(process.resourcesPath, "dist/renderer/loading.html"),
+    join(mainDirname, "../dist/renderer/loading.html"),
+  ]
+
+  for (const candidate of candidates) {
+    if (existsSync(candidate)) {
+      return candidate
+    }
   }
 
-  const devResources = join(mainDirname, "../electron/resources/loading.html")
-  if (existsSync(devResources)) {
-    return devResources
-  }
+  return join(app.getAppPath(), "dist/renderer/loading.html")
+}
 
-  return join(process.cwd(), "electron/resources/loading.html")
+function loadLoadingScreen(window: BrowserWindow) {
+  const target = resolveLoadingTarget()
+  const loader =
+    target.type === "url"
+      ? window.loadURL(target.source)
+      : window.loadFile(target.source)
+
+  loader.catch((error) => {
+    console.error("[cli] failed to load loading screen:", error)
+  })
 }
 
 let cachedPreloadPath: string | null = null
@@ -116,10 +157,9 @@ function createWindow() {
     mainWindow.webContents.session.setSpellCheckerEnabled(false)
   }
 
-  const loadingHtml = getLoadingHtmlPath()
   showingLoadingScreen = true
   currentCliUrl = null
-  mainWindow.loadFile(loadingHtml).catch((error) => console.error("[cli] failed to load loading screen:", error))
+  loadLoadingScreen(mainWindow)
 
   if (process.env.NODE_ENV === "development") {
     mainWindow.webContents.openDevTools({ mode: "detach" })
@@ -156,8 +196,7 @@ function showLoadingScreen(force = false) {
   showingLoadingScreen = true
   currentCliUrl = null
   pendingCliUrl = null
-  const loadingHtml = getLoadingHtmlPath()
-  mainWindow.loadFile(loadingHtml).catch((error) => console.error("[cli] failed to load loading screen:", error))
+  loadLoadingScreen(mainWindow)
 }
 
 function startCliPreload(url: string) {

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

@@ -263,47 +263,32 @@ export class CliProcessManager extends EventEmitter {
   private resolveCliEntry(options: StartOptions): CliEntryResolution {
     if (options.dev) {
       const tsxPath = this.resolveTsx()
-      const sourceCandidates = [
-        path.resolve(app.getAppPath(), "..", "server", "src", "index.ts"),
-        path.resolve(app.getAppPath(), "..", "packages", "server", "src", "index.ts"),
-        path.resolve(process.cwd(), "packages", "server", "src", "index.ts"),
-      ]
-      const sourceEntry = sourceCandidates.find((candidate) => existsSync(candidate))
-      if (tsxPath && sourceEntry) {
-        return { entry: sourceEntry, runner: "tsx", runnerPath: tsxPath }
+      if (!tsxPath) {
+        throw new Error("tsx is required to run the CLI in development mode. Please install dependencies.")
       }
+      const devEntry = this.resolveDevEntry()
+      return { entry: devEntry, runner: "tsx", runnerPath: tsxPath }
     }
-
-    const dist = this.tryResolveDist()
-    if (dist) {
-      return { entry: dist, runner: "node" }
-    }
-
-    throw new Error("Unable to locate CodeNomad CLI build (dist/bin.js). Please build @neuralnomads/codenomad.")
+ 
+    const distEntry = this.resolveProdEntry()
+    return { entry: distEntry, runner: "node" }
   }
-
+ 
   private resolveTsx(): string | null {
-    try {
-      const resolved = nodeRequire.resolve("tsx/dist/cli.js")
-      if (resolved && existsSync(resolved)) {
-        return resolved
-      }
-    } catch {
-      return null
-    }
-    return null
-  }
-
-  private tryResolveDist(): string | null {
     const candidates: Array<string | (() => string)> = [
-      () => nodeRequire.resolve("@neuralnomads/codenomad/dist/bin.js"),
-      () => nodeRequire.resolve("@neuralnomads/codenomad/dist/bin.js", { paths: [app.getAppPath()] }),
-      path.join(app.getAppPath(), "node_modules", "@neuralnomads", "codenomad", "dist", "bin.js"),
-      path.resolve(app.getAppPath(), "..", "server", "dist", "bin.js"),
-      path.resolve(app.getAppPath(), "..", "packages", "server", "dist", "bin.js"),
-      path.join(process.resourcesPath, "app.asar.unpacked", "node_modules", "@neuralnomads", "codenomad", "dist", "bin.js"),
+      () => nodeRequire.resolve("tsx/cli"),
+      () => nodeRequire.resolve("tsx/dist/cli.mjs"),
+      () => nodeRequire.resolve("tsx/dist/cli.cjs"),
+      path.resolve(process.cwd(), "node_modules", "tsx", "dist", "cli.mjs"),
+      path.resolve(process.cwd(), "node_modules", "tsx", "dist", "cli.cjs"),
+      path.resolve(process.cwd(), "..", "node_modules", "tsx", "dist", "cli.mjs"),
+      path.resolve(process.cwd(), "..", "node_modules", "tsx", "dist", "cli.cjs"),
+      path.resolve(process.cwd(), "..", "..", "node_modules", "tsx", "dist", "cli.mjs"),
+      path.resolve(process.cwd(), "..", "..", "node_modules", "tsx", "dist", "cli.cjs"),
+      path.resolve(app.getAppPath(), "..", "node_modules", "tsx", "dist", "cli.mjs"),
+      path.resolve(app.getAppPath(), "..", "node_modules", "tsx", "dist", "cli.cjs"),
     ]
-
+ 
     for (const candidate of candidates) {
       try {
         const resolved = typeof candidate === "function" ? candidate() : candidate
@@ -314,7 +299,28 @@ export class CliProcessManager extends EventEmitter {
         continue
       }
     }
-
+ 
     return null
   }
+ 
+  private resolveDevEntry(): string {
+    const entry = path.resolve(process.cwd(), "..", "server", "src", "index.ts")
+    if (!existsSync(entry)) {
+      throw new Error(`Dev CLI entry not found at ${entry}. Run npm run dev:electron from the repository root after installing dependencies.`)
+    }
+    return entry
+  }
+ 
+  private resolveProdEntry(): string {
+    try {
+      const entry = nodeRequire.resolve("@neuralnomads/codenomad/dist/bin.js")
+      if (existsSync(entry)) {
+        return entry
+      }
+    } catch {
+      // fall through to error below
+    }
+    throw new Error("Unable to locate CodeNomad CLI build (dist/bin.js). Run npm run build --workspace @neuralnomads/codenomad.")
+  }
 }
+

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

@@ -59,7 +59,7 @@ export function setupStorageIPC() {
       return await readConfigWithCache()
     } catch (error) {
       // Return empty config if file doesn't exist
-      return JSON.stringify({ preferences: { showThinkingBlocks: false }, recentFolders: [] }, null, 2)
+      return JSON.stringify({ preferences: { showThinkingBlocks: false, thinkingBlocksExpansion: "expanded" }, recentFolders: [] }, null, 2)
     }
   })
 

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

@@ -5,15 +5,12 @@ const electronAPI = {
     ipcRenderer.on("cli:status", (_, data) => callback(data))
     return () => ipcRenderer.removeAllListeners("cli:status")
   },
-  onCliLog: (callback) => {
-    ipcRenderer.on("cli:log", (_, data) => callback(data))
-    return () => ipcRenderer.removeAllListeners("cli:log")
-  },
   onCliError: (callback) => {
     ipcRenderer.on("cli:error", (_, data) => callback(data))
     return () => ipcRenderer.removeAllListeners("cli:error")
   },
   getCliStatus: () => ipcRenderer.invoke("cli:getStatus"),
+  openDialog: (options) => ipcRenderer.invoke("dialog:open", options),
 }
 
 contextBridge.exposeInMainWorld("electronAPI", electronAPI)

packages/electron-app/electron/resources/loading.html

@@ -1,206 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>CodeNomad</title>
-    <style>
-      :root {
-        color-scheme: dark;
-      }
-      body {
-        margin: 0;
-        min-height: 100vh;
-        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-        background-color: #1a1a1a;
-        color: #cfd4dc;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 32px;
-        text-align: center;
-      }
-      button {
-        border: none;
-        background: none;
-        font: inherit;
-        color: inherit;
-      }
-      .wrapper {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 20px;
-        max-width: 520px;
-      }
-      .logo {
-        width: 180px;
-        height: auto;
-        filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.35));
-      }
-      .title {
-        font-size: 2.7rem;
-        font-weight: 600;
-        margin: 0;
-        color: #f4f6fb;
-      }
-      .loading-card {
-        margin-top: 12px;
-        width: 100%;
-        max-width: 420px;
-        padding: 22px;
-        border-radius: 18px;
-        background: #151a23;
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
-      }
-      .loading-row {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 14px;
-        font-size: 0.95rem;
-        color: #cfd4dc;
-      }
-      .spinner {
-        width: 18px;
-        height: 18px;
-        border-radius: 50%;
-        border: 2px solid rgba(255, 255, 255, 0.18);
-        border-top-color: #6ce3ff;
-        animation: spin 0.9s linear infinite;
-      }
-      .phrase-controls {
-        margin-top: 12px;
-        font-size: 0.9rem;
-        color: #8f96a9;
-        display: flex;
-        justify-content: center;
-        gap: 8px;
-      }
-      .phrase-controls button {
-        color: #8fb5ff;
-        cursor: pointer;
-      }
-
-
-      .logo {
-        width: 180px;
-        height: auto;
-        filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.45));
-      }
-      .title {
-        font-size: 2.7rem;
-        font-weight: 600;
-        margin: 0;
-        color: #f4f6fb;
-      }
-      .loading-card {
-        margin-top: 12px;
-        width: 100%;
-        padding: 22px;
-        border-radius: 18px;
-        background: #0f1421;
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        box-shadow: 0 25px 60px rgba(5, 6, 10, 0.6);
-      }
-
-      .wrapper {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 20px;
-        max-width: 520px;
-      }
-      .logo {
-        width: 180px;
-        height: auto;
-      }
-      .title {
-        font-size: 2.7rem;
-        font-weight: 600;
-        margin: 0;
-      }
-      .subtitle {
-        margin: 0;
-        font-size: 1.1rem;
-        color: #aeb3c4;
-      }
-      .loading-card {
-        margin-top: 12px;
-        width: 100%;
-        padding: 20px;
-        border-radius: 14px;
-        background: rgba(13, 16, 24, 0.8);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
-      }
-      .loading-row {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 14px;
-        font-size: 0.95rem;
-        color: #cad0dd;
-      }
-      .spinner {
-        width: 18px;
-        height: 18px;
-        border-radius: 50%;
-        border: 2px solid rgba(255, 255, 255, 0.18);
-        border-top-color: #6ce3ff;
-        animation: spin 0.9s linear infinite;
-      }
-      @keyframes spin {
-        from {
-          transform: rotate(0deg);
-        }
-        to {
-          transform: rotate(360deg);
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <div class="wrapper" role="status" aria-live="polite">
-      <img src="./icon.png" alt="CodeNomad" class="logo" />
-      <div>
-        <h1 class="title">CodeNomad</h1>
-      </div>
-      <div class="loading-card">
-        <div class="loading-row">
-          <div class="spinner" aria-hidden="true"></div>
-          <span id="loading-phrase">Warming up the AI neurons…</span>
-        </div>
-        <div class="phrase-controls">
-          <button id="phrase-toggle" type="button">Show another</button>
-        </div>
-      </div>
-    </div>
-    <script>
-      const phrases = [
-        "Warming up the AI neurons…",
-        "Convincing the AI to stop daydreaming…",
-        "Polishing the AI’s code goggles…",
-        "Asking the AI to stop reorganizing your files…",
-        "Feeding the AI additional coffee…",
-        "Teaching the AI not to delete node_modules (again)…",
-        "Telling the AI to act natural before you arrive…",
-        "Asking the AI to please stop rewriting history…",
-        "Letting the AI stretch before its coding sprint…",
-        "Persuading the AI to give you keyboard control…"
-      ]
-
-      const phraseEl = document.getElementById("loading-phrase")
-      const button = document.getElementById("phrase-toggle")
-
-      function pickPhrase() {
-        const next = phrases[Math.floor(Math.random() * phrases.length)]
-        phraseEl.textContent = next
-      }
-
-      pickPhrase()
-      button?.addEventListener("click", pickPhrase)
-    </script>
-  </body>
-</html>

packages/electron-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuralnomads/codenomad-electron-app",
-  "version": "0.2.0",
+  "version": "0.2.4",
   "description": "CodeNomad - AI coding assistant",
   "author": {
     "name": "Neural Nomads",
@@ -8,6 +8,11 @@
   },
   "type": "module",
   "main": "dist/main/main.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NeuralNomadsAI/CodeNomad.git"
+  },
+  "homepage": "https://github.com/NeuralNomadsAI/CodeNomad",
   "scripts": {
     "dev": "electron-vite dev",
     "dev:electron": "NODE_ENV=development ELECTRON_ENABLE_LOGGING=1 NODE_OPTIONS=\"--import tsx\" electron electron/main/main.ts",
@@ -59,42 +64,52 @@
     "extraResources": [
       {
         "from": "electron/resources",
-        "to": ""
+        "to": "",
+        "filter": [
+          "!icon.icns",
+          "!icon.ico"
+        ]
       }
     ],
     "mac": {
       "category": "public.app-category.developer-tools",
       "target": [
-        {
-          "target": "dmg",
-          "arch": ["x64", "arm64", "universal"]
-        },
         {
           "target": "zip",
-          "arch": ["x64", "arm64", "universal"]
+          "arch": [
+            "x64",
+            "arm64"
+          ]
         }
       ],
-      "artifactName": "CodeNomadApp-${version}-${os}-${arch}.${ext}",
+      "artifactName": "CodeNomad-${version}-${os}-${arch}.${ext}",
       "icon": "electron/resources/icon.icns"
     },
     "dmg": {
       "contents": [
-        { "x": 130, "y": 220 },
-        { "x": 410, "y": 220, "type": "link", "path": "/Applications" }
+        {
+          "x": 130,
+          "y": 220
+        },
+        {
+          "x": 410,
+          "y": 220,
+          "type": "link",
+          "path": "/Applications"
+        }
       ]
     },
     "win": {
       "target": [
-        {
-          "target": "nsis",
-          "arch": ["x64", "arm64"]
-        },
         {
           "target": "zip",
-          "arch": ["x64", "arm64"]
+          "arch": [
+            "x64",
+            "arm64"
+          ]
         }
       ],
-      "artifactName": "CodeNomadApp-${version}-${os}-${arch}.${ext}",
+      "artifactName": "CodeNomad-${version}-${os}-${arch}.${ext}",
       "icon": "electron/resources/icon.ico"
     },
     "nsis": {
@@ -106,23 +121,14 @@
     "linux": {
       "target": [
         {
-          "target": "AppImage",
-          "arch": ["x64", "arm64"]
-        },
-        {
-          "target": "deb",
-          "arch": ["x64", "arm64"]
-        },
-        {
-          "target": "rpm",
-          "arch": ["x64", "arm64"]
-        },
-        {
-          "target": "tar.gz",
-          "arch": ["x64", "arm64"]
+          "target": "zip",
+          "arch": [
+            "x64",
+            "arm64"
+          ]
         }
       ],
-      "artifactName": "CodeNomadApp-${version}-${os}-${arch}.${ext}",
+      "artifactName": "CodeNomad-${version}-${os}-${arch}.${ext}",
       "category": "Development",
       "icon": "electron/resources/icon.png"
     }

packages/electron-app/scripts/build.js

@@ -16,8 +16,8 @@ const workspaceNodeModulesPath = join(workspaceRoot, "node_modules")
 
 const platforms = {
   mac: {
-    args: ["--mac", "--x64", "--arm64", "--universal"],
-    description: "macOS (Intel, Apple Silicon, Universal)",
+    args: ["--mac", "--x64", "--arm64"],
+    description: "macOS (Intel & Apple Silicon)",
   },
   "mac-x64": {
     args: ["--mac", "--x64"],

packages/server/package-lock.json

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

packages/server/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.2.0",
+  "version": "0.2.4",
   "description": "CodeNomad Server",
   "author": {
     "name": "Neural Nomads",
     "email": "codenomad@neuralnomads.ai"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NeuralNomadsAI/CodeNomad.git"
+  },
   "type": "module",
   "main": "dist/index.js",
   "bin": {

packages/server/src/api-types.ts

@@ -111,6 +111,14 @@ export interface InstanceData {
   agentModelSelections: AgentModelSelection
 }
 
+export type InstanceStreamStatus = "connecting" | "connected" | "error" | "disconnected"
+
+export interface InstanceStreamEvent {
+  type: string
+  properties?: Record<string, unknown>
+  [key: string]: unknown
+}
+
 export interface BinaryRecord {
   id: string
   path: string
@@ -157,6 +165,8 @@ export type WorkspaceEventType =
   | "config.appChanged"
   | "config.binariesChanged"
   | "instance.dataChanged"
+  | "instance.event"
+  | "instance.eventStatus"
 
 export type WorkspaceEventPayload =
   | { type: "workspace.created"; workspace: WorkspaceDescriptor }
@@ -167,6 +177,8 @@ export type WorkspaceEventPayload =
   | { type: "config.appChanged"; config: AppConfig }
   | { type: "config.binariesChanged"; binaries: BinaryRecord[] }
   | { type: "instance.dataChanged"; instanceId: string; data: InstanceData }
+  | { type: "instance.event"; instanceId: string; event: InstanceStreamEvent }
+  | { type: "instance.eventStatus"; instanceId: string; status: InstanceStreamStatus; reason?: string }
 
 export interface ServerMeta {
   /** Base URL clients should target for REST calls (useful for Electron embedding). */

packages/server/src/config/schema.ts

@@ -10,12 +10,14 @@ const AgentModelSelectionsSchema = z.record(z.string(), AgentModelSelectionSchem
 
 const PreferencesSchema = z.object({
   showThinkingBlocks: z.boolean().default(false),
+  thinkingBlocksExpansion: z.enum(["expanded", "collapsed"]).default("expanded"),
   lastUsedBinary: z.string().optional(),
   environmentVariables: z.record(z.string()).default({}),
   modelRecents: z.array(ModelPreferenceSchema).default([]),
   diffViewMode: z.enum(["split", "unified"]).default("split"),
   toolOutputExpansion: z.enum(["expanded", "collapsed"]).default("expanded"),
   diagnosticsExpansion: z.enum(["expanded", "collapsed"]).default("expanded"),
+  showUsageMetrics: z.boolean().default(true),
 })
 
 const RecentFolderSchema = z.object({

packages/server/src/events/bus.ts

@@ -8,7 +8,9 @@ export class EventBus extends EventEmitter {
   }
 
   publish(event: WorkspaceEventPayload): boolean {
-    this.logger?.debug({ event }, "Publishing workspace event")
+    if (event.type !== "instance.event" && event.type !== "instance.eventStatus") {
+      this.logger?.debug({ event }, "Publishing workspace event")
+    }
     return super.emit(event.type, event)
   }
 
@@ -22,6 +24,8 @@ export class EventBus extends EventEmitter {
     this.on("config.appChanged", handler)
     this.on("config.binariesChanged", handler)
     this.on("instance.dataChanged", handler)
+    this.on("instance.event", handler)
+    this.on("instance.eventStatus", handler)
     return () => {
       this.off("workspace.created", handler)
       this.off("workspace.started", handler)
@@ -31,6 +35,8 @@ export class EventBus extends EventEmitter {
       this.off("config.appChanged", handler)
       this.off("config.binariesChanged", handler)
       this.off("instance.dataChanged", handler)
+      this.off("instance.event", handler)
+      this.off("instance.eventStatus", handler)
     }
   }
 }

packages/server/src/index.ts

@@ -14,10 +14,12 @@ import { FileSystemBrowser } from "./filesystem/browser"
 import { EventBus } from "./events/bus"
 import { ServerMeta } from "./api-types"
 import { InstanceStore } from "./storage/instance-store"
+import { InstanceEventBridge } from "./workspaces/instance-events"
 import { createLogger } from "./logger"
 import { launchInBrowser } from "./launcher"
 
 const require = createRequire(import.meta.url)
+
 const packageJson = require("../package.json") as { version: string }
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -78,9 +80,11 @@ function parseCliOptions(argv: string[]): CliOptions {
 
   const resolvedRoot = parsed.workspaceRoot ?? parsed.root ?? process.cwd()
 
+  const normalizedHost = resolveHost(parsed.host)
+
   return {
     port: parsed.port,
-    host: parsed.host,
+    host: normalizedHost,
     rootDir: resolvedRoot,
     configPath: parsed.config,
     unrestrictedRoot: Boolean(parsed.unrestrictedRoot),
@@ -100,6 +104,13 @@ function parsePort(input: string): number {
   return value
 }
 
+function resolveHost(input: string | undefined): string {
+  if (input && input.trim() === "0.0.0.0") {
+    return "0.0.0.0"
+  }
+  return DEFAULT_HOST
+}
+
 async function main() {
   const options = parseCliOptions(process.argv.slice(2))
   const logger = createLogger({ level: options.logLevel, destination: options.logDestination, component: "app" })
@@ -121,6 +132,11 @@ async function main() {
   })
   const fileSystemBrowser = new FileSystemBrowser({ rootDir: options.rootDir, unrestricted: options.unrestrictedRoot })
   const instanceStore = new InstanceStore()
+  const instanceEventBridge = new InstanceEventBridge({
+    workspaceManager,
+    eventBus,
+    logger: logger.child({ component: "instance-events" }),
+  })
 
   const serverMeta: ServerMeta = {
     httpBaseUrl: `http://${options.host}:${options.port}`,
@@ -169,6 +185,7 @@ async function main() {
     }
 
     try {
+      instanceEventBridge.shutdown()
       await workspaceManager.shutdown()
       logger.info("Workspace manager shutdown complete")
     } catch (error) {

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

@@ -65,6 +65,12 @@ export function createHttpServer(deps: HttpServerDeps) {
 
   app.register(replyFrom, {
     contentTypesToEncode: [],
+    undici: {
+      connections: 16,
+      pipelining: 1,
+      bodyTimeout: 0,
+      headersTimeout: 0,
+    },
   })
 
   registerWorkspaceRoutes(app, { workspaceManager: deps.workspaceManager })

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

@@ -0,0 +1,190 @@
+import { Agent, fetch } from "undici"
+import { Agent as UndiciAgent } from "undici"
+import { EventBus } from "../events/bus"
+import { Logger } from "../logger"
+import { WorkspaceManager } from "./manager"
+import { InstanceStreamEvent, InstanceStreamStatus } from "../api-types"
+
+const INSTANCE_HOST = "127.0.0.1"
+const STREAM_AGENT = new UndiciAgent({ bodyTimeout: 0, headersTimeout: 0 })
+const RECONNECT_DELAY_MS = 1000
+
+interface InstanceEventBridgeOptions {
+  workspaceManager: WorkspaceManager
+  eventBus: EventBus
+  logger: Logger
+}
+
+interface ActiveStream {
+  controller: AbortController
+  task: Promise<void>
+}
+
+export class InstanceEventBridge {
+  private readonly streams = new Map<string, ActiveStream>()
+
+  constructor(private readonly options: InstanceEventBridgeOptions) {
+    const bus = this.options.eventBus
+    bus.on("workspace.started", (event) => this.startStream(event.workspace.id))
+    bus.on("workspace.stopped", (event) => this.stopStream(event.workspaceId, "workspace stopped"))
+    bus.on("workspace.error", (event) => this.stopStream(event.workspace.id, "workspace error"))
+  }
+
+  shutdown() {
+    for (const [id, active] of this.streams) {
+      active.controller.abort()
+      this.publishStatus(id, "disconnected")
+    }
+    this.streams.clear()
+  }
+
+  private startStream(workspaceId: string) {
+    if (this.streams.has(workspaceId)) {
+      return
+    }
+
+    const controller = new AbortController()
+    const task = this.runStream(workspaceId, controller.signal)
+      .catch((error) => {
+        if (!controller.signal.aborted) {
+          this.options.logger.warn({ workspaceId, err: error }, "Instance event stream failed")
+          this.publishStatus(workspaceId, "error", error instanceof Error ? error.message : String(error))
+        }
+      })
+      .finally(() => {
+        const active = this.streams.get(workspaceId)
+        if (active?.controller === controller) {
+          this.streams.delete(workspaceId)
+        }
+      })
+
+    this.streams.set(workspaceId, { controller, task })
+  }
+
+  private stopStream(workspaceId: string, reason?: string) {
+    const active = this.streams.get(workspaceId)
+    if (!active) {
+      return
+    }
+    active.controller.abort()
+    this.streams.delete(workspaceId)
+    this.publishStatus(workspaceId, "disconnected", reason)
+  }
+
+  private async runStream(workspaceId: string, signal: AbortSignal) {
+    while (!signal.aborted) {
+      const port = this.options.workspaceManager.getInstancePort(workspaceId)
+      if (!port) {
+        await this.delay(RECONNECT_DELAY_MS, signal)
+        continue
+      }
+
+      this.publishStatus(workspaceId, "connecting")
+
+      try {
+        await this.consumeStream(workspaceId, port, signal)
+      } catch (error) {
+        if (signal.aborted) {
+          break
+        }
+        this.options.logger.warn({ workspaceId, err: error }, "Instance event stream disconnected")
+        this.publishStatus(workspaceId, "error", error instanceof Error ? error.message : String(error))
+        await this.delay(RECONNECT_DELAY_MS, signal)
+      }
+    }
+  }
+
+  private async consumeStream(workspaceId: string, port: number, signal: AbortSignal) {
+    const url = `http://${INSTANCE_HOST}:${port}/event`
+    const response = await fetch(url, {
+      headers: { Accept: "text/event-stream" },
+      signal,
+      dispatcher: STREAM_AGENT,
+    })
+
+    if (!response.ok || !response.body) {
+      throw new Error(`Instance event stream unavailable (${response.status})`)
+    }
+
+    this.publishStatus(workspaceId, "connected")
+
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder()
+    let buffer = ""
+
+    while (!signal.aborted) {
+      const { done, value } = await reader.read()
+      if (done || !value) {
+        break
+      }
+      buffer += decoder.decode(value, { stream: true })
+      buffer = this.flushEvents(buffer, workspaceId)
+    }
+  }
+
+  private flushEvents(buffer: string, workspaceId: string) {
+    let separatorIndex = buffer.indexOf("\n\n")
+
+    while (separatorIndex >= 0) {
+      const chunk = buffer.slice(0, separatorIndex)
+      buffer = buffer.slice(separatorIndex + 2)
+      this.processChunk(chunk, workspaceId)
+      separatorIndex = buffer.indexOf("\n\n")
+    }
+
+    return buffer
+  }
+
+  private processChunk(chunk: string, workspaceId: string) {
+    const lines = chunk.split(/\r?\n/)
+    const dataLines: string[] = []
+
+    for (const line of lines) {
+      if (line.startsWith(":")) {
+        continue
+      }
+      if (line.startsWith("data:")) {
+        dataLines.push(line.slice(5).trimStart())
+      }
+    }
+
+    if (dataLines.length === 0) {
+      return
+    }
+
+    const payload = dataLines.join("\n").trim()
+    if (!payload) {
+      return
+    }
+
+    try {
+      const event = JSON.parse(payload) as InstanceStreamEvent
+      this.options.eventBus.publish({ type: "instance.event", instanceId: workspaceId, event })
+    } catch (error) {
+      this.options.logger.warn({ workspaceId, chunk: payload, err: error }, "Failed to parse instance SSE payload")
+    }
+  }
+
+  private publishStatus(instanceId: string, status: InstanceStreamStatus, reason?: string) {
+    this.options.eventBus.publish({ type: "instance.eventStatus", instanceId, status, reason })
+  }
+
+  private delay(duration: number, signal: AbortSignal) {
+    if (duration <= 0) {
+      return Promise.resolve()
+    }
+    return new Promise<void>((resolve) => {
+      const timeout = setTimeout(() => {
+        signal.removeEventListener("abort", onAbort)
+        resolve()
+      }, duration)
+
+      const onAbort = () => {
+        clearTimeout(timeout)
+        resolve()
+      }
+
+      signal.addEventListener("abort", onAbort, { once: true })
+    })
+  }
+}

packages/server/src/workspaces/manager.ts

@@ -1,4 +1,5 @@
 import path from "path"
+import { spawnSync } from "child_process"
 import { EventBus } from "../events/bus"
 import { ConfigStore } from "../config/store"
 import { BinaryRegistry } from "../config/binaries"
@@ -65,10 +66,11 @@ export class WorkspaceManager {
  
     const id = `${Date.now().toString(36)}`
     const binary = this.options.binaryRegistry.resolveDefault()
+    const resolvedBinaryPath = this.resolveBinaryPath(binary.path)
     const workspacePath = path.isAbsolute(folder) ? folder : path.resolve(this.options.rootDir, folder)
     clearWorkspaceSearchCache(workspacePath)
 
-    this.options.logger.info({ workspaceId: id, folder: workspacePath, binary: binary.path }, "Creating workspace")
+    this.options.logger.info({ workspaceId: id, folder: workspacePath, binary: resolvedBinaryPath }, "Creating workspace")
 
     const proxyPath = `/workspaces/${id}/instance`
 
@@ -79,14 +81,20 @@ export class WorkspaceManager {
       name,
       status: "starting",
       proxyPath,
-      binaryId: binary.id,
+      binaryId: resolvedBinaryPath,
       binaryLabel: binary.label,
       binaryVersion: binary.version,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
     }
 
+    if (!descriptor.binaryVersion) {
+      descriptor.binaryVersion = this.detectBinaryVersion(resolvedBinaryPath)
+    }
+
     this.workspaces.set(id, descriptor)
+
+
     this.options.eventBus.publish({ type: "workspace.created", workspace: descriptor })
 
     const environment = this.options.configStore.get().preferences.environmentVariables ?? {}
@@ -95,7 +103,7 @@ export class WorkspaceManager {
       const { pid, port } = await this.runtime.launch({
         workspaceId: id,
         folder: workspacePath,
-        binaryPath: binary.path,
+        binaryPath: resolvedBinaryPath,
         environment,
         onExit: (info) => this.handleProcessExit(info.workspaceId, info),
       })
@@ -161,6 +169,70 @@ export class WorkspaceManager {
     return workspace
   }
 
+  private resolveBinaryPath(identifier: string): string {
+    if (!identifier) {
+      return identifier
+    }
+
+    const looksLikePath = identifier.includes("/") || identifier.includes("\\") || identifier.startsWith(".")
+    if (path.isAbsolute(identifier) || looksLikePath) {
+      return identifier
+    }
+
+    const locator = process.platform === "win32" ? "where" : "which"
+
+    try {
+      const result = spawnSync(locator, [identifier], { encoding: "utf8" })
+      if (result.status === 0 && result.stdout) {
+        const resolved = result.stdout
+          .split(/\r?\n/)
+          .map((line) => line.trim())
+          .find((line) => line.length > 0)
+
+        if (resolved) {
+          this.options.logger.debug({ identifier, resolved }, "Resolved binary path from system PATH")
+          return resolved
+        }
+      } else if (result.error) {
+        this.options.logger.warn({ identifier, err: result.error }, "Failed to resolve binary path via locator command")
+      }
+    } catch (error) {
+      this.options.logger.warn({ identifier, err: error }, "Failed to resolve binary path from system PATH")
+    }
+
+    return identifier
+  }
+
+  private detectBinaryVersion(resolvedPath: string): string | undefined {
+    if (!resolvedPath) {
+      return undefined
+    }
+
+    try {
+      const result = spawnSync(resolvedPath, ["--version"], { encoding: "utf8" })
+      if (result.status === 0 && result.stdout) {
+        const line = result.stdout.split(/\r?\n/).find((entry) => entry.trim().length > 0)
+        if (line) {
+          const normalized = line.trim()
+          const versionMatch = normalized.match(/([0-9]+\.[0-9]+\.[0-9A-Za-z.-]+)/)
+          if (versionMatch) {
+            const version = versionMatch[1]
+            this.options.logger.debug({ binary: resolvedPath, version }, "Detected binary version")
+            return version
+          }
+          this.options.logger.debug({ binary: resolvedPath, reported: normalized }, "Binary reported version string")
+          return normalized
+        }
+      } else if (result.error) {
+        this.options.logger.warn({ binary: resolvedPath, err: result.error }, "Failed to read binary version")
+      }
+    } catch (error) {
+      this.options.logger.warn({ binary: resolvedPath, err: error }, "Failed to detect binary version")
+    }
+
+    return undefined
+  }
+
   private handleProcessExit(workspaceId: string, info: { code: number | null; requested: boolean }) {
     const workspace = this.workspaces.get(workspaceId)
     if (!workspace) return

packages/server/src/workspaces/runtime.ts

@@ -37,7 +37,10 @@ export class WorkspaceRuntime {
     const env = { ...process.env, ...(options.environment ?? {}) }
 
     return new Promise((resolve, reject) => {
-      this.logger.info({ workspaceId: options.workspaceId, folder: options.folder }, "Launching OpenCode process")
+      this.logger.info(
+        { workspaceId: options.workspaceId, folder: options.folder, binary: options.binaryPath },
+        "Launching OpenCode process",
+      )
       const child = spawn(options.binaryPath, args, {
         cwd: options.folder,
         env,

packages/tauri-app/.gitignore

@@ -0,0 +1,7 @@
+src-tauri/target
+src-tauri/Cargo.lock
+src-tauri/resources/
+target
+node_modules
+dist
+.DS_Store

packages/tauri-app/Cargo.toml

@@ -0,0 +1,3 @@
+[workspace]
+members = ["src-tauri"]
+resolver = "2"

packages/tauri-app/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@codenomad/tauri-app",
+  "version": "0.2.4",
+  "private": true,
+  "scripts": {
+    "dev": "npx --yes @tauri-apps/cli@^2.9.4 dev",
+    "dev:ui": "npm run dev --workspace @codenomad/ui",
+    "dev:prep": "node ./scripts/dev-prep.js",
+    "dev:bootstrap": "npm run dev:prep && npm run dev:ui",
+    "prebuild": "node ./scripts/prebuild.js",
+    "bundle:server": "npm run prebuild",
+    "build": "npx --yes @tauri-apps/cli@^2.9.4 build"
+  },
+  "devDependencies": {
+    "@tauri-apps/cli": "^2.9.4"
+  }
+}

packages/tauri-app/scripts/dev-prep.js

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+
+const fs = require("fs")
+const path = require("path")
+const { execSync } = require("child_process")
+
+const root = path.resolve(__dirname, "..")
+const workspaceRoot = path.resolve(root, "..", "..")
+const uiRoot = path.resolve(root, "..", "ui")
+const uiDist = path.resolve(uiRoot, "src", "renderer", "dist")
+const uiLoadingDest = path.resolve(root, "src-tauri", "resources", "ui-loading")
+
+function ensureUiBuild() {
+  const loadingHtml = path.join(uiDist, "loading.html")
+  if (fs.existsSync(loadingHtml)) {
+    return
+  }
+
+  console.log("[dev-prep] UI loader build missing; running workspace build…")
+  execSync("npm --workspace @codenomad/ui run build", {
+    cwd: workspaceRoot,
+    stdio: "inherit",
+  })
+
+  if (!fs.existsSync(loadingHtml)) {
+    throw new Error("[dev-prep] failed to produce loading.html after UI build")
+  }
+}
+
+function copyUiLoadingAssets() {
+  const loadingSource = path.join(uiDist, "loading.html")
+  const assetsSource = path.join(uiDist, "assets")
+
+  fs.rmSync(uiLoadingDest, { recursive: true, force: true })
+  fs.mkdirSync(uiLoadingDest, { recursive: true })
+
+  fs.copyFileSync(loadingSource, path.join(uiLoadingDest, "loading.html"))
+  if (fs.existsSync(assetsSource)) {
+    fs.cpSync(assetsSource, path.join(uiLoadingDest, "assets"), { recursive: true })
+  }
+
+  console.log(`[dev-prep] copied loader bundle from ${uiDist}`)
+}
+
+ensureUiBuild()
+copyUiLoadingAssets()

packages/tauri-app/scripts/prebuild.js

@@ -0,0 +1,140 @@
+#!/usr/bin/env node
+const fs = require("fs")
+const path = require("path")
+const { execSync } = require("child_process")
+
+const root = path.resolve(__dirname, "..")
+const workspaceRoot = path.resolve(root, "..", "..")
+const serverRoot = path.resolve(root, "..", "server")
+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 sources = ["dist", "public", "node_modules", "package.json"]
+
+const serverInstallCommand =
+  "npm install --omit=dev --ignore-scripts --workspaces=false --package-lock=false --install-strategy=shallow --fund=false --audit=false"
+const serverDevInstallCommand =
+  "npm ci --workspace @neuralnomads/codenomad --include-workspace-root=false --install-strategy=nested --fund=false --audit=false"
+
+const envWithRootBin = {
+  ...process.env,
+  PATH: `${path.join(workspaceRoot, "node_modules/.bin")}:${process.env.PATH}`,
+}
+
+const braceExpansionPath = path.join(
+  serverRoot,
+  "node_modules",
+  "@fastify",
+  "static",
+  "node_modules",
+  "brace-expansion",
+  "package.json",
+)
+
+function ensureServerBuild() {
+  const distPath = path.join(serverRoot, "dist")
+  const publicPath = path.join(serverRoot, "public")
+  if (fs.existsSync(distPath) && fs.existsSync(publicPath)) {
+    return
+  }
+
+  console.log("[prebuild] server build missing; running workspace build...")
+  execSync("npm --workspace @neuralnomads/codenomad run build", {
+    cwd: workspaceRoot,
+    stdio: "inherit",
+    env: {
+      ...process.env,
+      PATH: `${path.join(workspaceRoot, "node_modules/.bin")}:${process.env.PATH}`,
+    },
+  })
+
+  if (!fs.existsSync(distPath) || !fs.existsSync(publicPath)) {
+    throw new Error("[prebuild] server artifacts still missing after build")
+  }
+}
+
+function ensureUiBuild() {
+  const loadingHtml = path.join(uiDist, "loading.html")
+  if (fs.existsSync(loadingHtml)) {
+    return
+  }
+
+  console.log("[prebuild] ui build missing; running workspace build...")
+  execSync("npm --workspace @codenomad/ui run build", {
+    cwd: workspaceRoot,
+    stdio: "inherit",
+  })
+
+  if (!fs.existsSync(loadingHtml)) {
+    throw new Error("[prebuild] ui loading assets missing after build")
+  }
+}
+
+function ensureServerDevDependencies() {
+  if (fs.existsSync(braceExpansionPath)) {
+    return
+  }
+
+  console.log("[prebuild] ensuring server build dependencies (with dev)...")
+  execSync(serverDevInstallCommand, {
+    cwd: workspaceRoot,
+    stdio: "inherit",
+    env: envWithRootBin,
+  })
+}
+
+function ensureServerDependencies() {
+  if (fs.existsSync(braceExpansionPath)) {
+    return
+  }
+
+  console.log("[prebuild] ensuring server production dependencies...")
+  execSync(serverInstallCommand, {
+    cwd: serverRoot,
+    stdio: "inherit",
+  })
+}
+
+function copyServerArtifacts() {
+  fs.rmSync(serverDest, { recursive: true, force: true })
+  fs.mkdirSync(serverDest, { recursive: true })
+
+  for (const name of sources) {
+    const from = path.join(serverRoot, name)
+    const to = path.join(serverDest, name)
+    if (!fs.existsSync(from)) {
+      console.warn(`[prebuild] skipped missing ${from}`)
+      continue
+    }
+    fs.cpSync(from, to, { recursive: true, dereference: true })
+    console.log(`[prebuild] copied ${from} -> ${to}`)
+  }
+}
+
+function copyUiLoadingAssets() {
+  const loadingSource = path.join(uiDist, "loading.html")
+  const assetsSource = path.join(uiDist, "assets")
+
+  if (!fs.existsSync(loadingSource)) {
+    throw new Error("[prebuild] cannot find built loading.html")
+  }
+
+  fs.rmSync(uiLoadingDest, { recursive: true, force: true })
+  fs.mkdirSync(uiLoadingDest, { recursive: true })
+
+  fs.copyFileSync(loadingSource, path.join(uiLoadingDest, "loading.html"))
+  if (fs.existsSync(assetsSource)) {
+    fs.cpSync(assetsSource, path.join(uiLoadingDest, "assets"), { recursive: true })
+  }
+
+  console.log(`[prebuild] prepared UI loading assets from ${uiDist}`)
+}
+
+ensureServerDevDependencies()
+ensureServerBuild()
+ensureUiBuild()
+ensureServerDependencies()
+copyServerArtifacts()
+copyUiLoadingAssets()

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

@@ -0,0 +1,20 @@
+[package]
+name = "codenomad-tauri"
+version = "0.1.0"
+edition = "2021"
+
+[build-dependencies]
+tauri-build = { version = "2.5.2", features = [] }
+
+[dependencies]
+tauri = { version = "2.5.2", features = [ "devtools"] }
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+regex = "1"
+once_cell = "1"
+parking_lot = "0.12"
+thiserror = "1"
+anyhow = "1"
+which = "4"
+libc = "0.2"
+tauri-plugin-dialog = "2"

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

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}

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

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://schema.tauri.app/capabilities.json",
+  "identifier": "main-window-native-dialogs",
+  "description": "Grant the main window access to required core features and native dialog commands.",
+  "remote": {
+    "urls": [
+      "http://127.0.0.1:*",
+      "http://localhost:*"
+    ]
+  },
+  "windows": ["main"],
+  "permissions": [
+    "core:default",
+    "dialog:allow-open"
+  ]
+}

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

@@ -0,0 +1 @@
+{"main-window-native-dialogs":{"identifier":"main-window-native-dialogs","description":"Grant the main window access to required core features and native dialog commands.","remote":{"urls":["http://127.0.0.1:*","http://localhost:*"]},"local":true,"windows":["main"],"permissions":["core:default","dialog:allow-open"]}}

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

@@ -0,0 +1,636 @@
+use parking_lot::Mutex;
+use regex::Regex;
+use serde::Serialize;
+use serde_json::json;
+use std::collections::VecDeque;
+use std::ffi::OsStr;
+use std::io::{BufRead, BufReader};
+use std::path::PathBuf;
+use std::process::{Child, Command, Stdio};
+use std::sync::atomic::{AtomicBool, Ordering};
+use std::sync::Arc;
+use std::thread;
+use std::time::{Duration, Instant};
+use tauri::{AppHandle, Emitter, Manager, Url};
+
+fn log_line(message: &str) {
+    println!("[tauri-cli] {message}");
+}
+
+fn workspace_root() -> Option<PathBuf> {
+    std::env::current_dir().ok().and_then(|mut dir| {
+        for _ in 0..3 {
+            if let Some(parent) = dir.parent() {
+                dir = parent.to_path_buf();
+            }
+        }
+        Some(dir)
+    })
+}
+
+fn navigate_main(app: &AppHandle, url: &str) {
+    if let Some(win) = app.webview_windows().get("main") {
+        log_line(&format!("navigating main to {url}"));
+        if let Ok(parsed) = Url::parse(url) {
+            let _ = win.navigate(parsed);
+        } else {
+            log_line("failed to parse URL for navigation");
+        }
+    } else {
+        log_line("main window not found for navigation");
+    }
+}
+
+#[derive(Debug, Clone, Serialize, PartialEq, Eq)]
+#[serde(rename_all = "lowercase")]
+pub enum CliState {
+    Starting,
+    Ready,
+    Error,
+    Stopped,
+}
+
+#[derive(Debug, Clone, Serialize)]
+pub struct CliStatus {
+    pub state: CliState,
+    pub pid: Option<u32>,
+    pub port: Option<u16>,
+    pub url: Option<String>,
+    pub error: Option<String>,
+}
+
+impl Default for CliStatus {
+    fn default() -> Self {
+        Self {
+            state: CliState::Stopped,
+            pid: None,
+            port: None,
+            url: None,
+            error: None,
+        }
+    }
+}
+
+#[derive(Debug, Clone)]
+pub struct CliProcessManager {
+    status: Arc<Mutex<CliStatus>>,
+    child: Arc<Mutex<Option<Child>>>,
+    ready: Arc<AtomicBool>,
+}
+
+impl CliProcessManager {
+    pub fn new() -> Self {
+        Self {
+            status: Arc::new(Mutex::new(CliStatus::default())),
+            child: Arc::new(Mutex::new(None)),
+            ready: Arc::new(AtomicBool::new(false)),
+        }
+    }
+
+    pub fn start(&self, app: AppHandle, dev: bool) -> anyhow::Result<()> {
+        log_line(&format!("start requested (dev={dev})"));
+        self.stop()?;
+        self.ready.store(false, Ordering::SeqCst);
+        {
+            let mut status = self.status.lock();
+            status.state = CliState::Starting;
+            status.port = None;
+            status.url = None;
+            status.error = None;
+            status.pid = None;
+        }
+        Self::emit_status(&app, &self.status.lock());
+
+        let status_arc = self.status.clone();
+        let child_arc = self.child.clone();
+        let ready_flag = self.ready.clone();
+        thread::spawn(move || {
+            if let Err(err) = Self::spawn_cli(app.clone(), status_arc.clone(), child_arc, ready_flag, dev) {
+                log_line(&format!("cli spawn failed: {err}"));
+                let mut locked = status_arc.lock();
+                locked.state = CliState::Error;
+                locked.error = Some(err.to_string());
+                let snapshot = locked.clone();
+                drop(locked);
+                let _ = app.emit("cli:error", json!({"message": err.to_string()}));
+                let _ = app.emit("cli:status", snapshot);
+            }
+        });
+
+        Ok(())
+    }
+
+    pub fn stop(&self) -> anyhow::Result<()> {
+        let mut child_opt = self.child.lock();
+        if let Some(mut child) = child_opt.take() {
+            #[cfg(unix)]
+            unsafe {
+                libc::kill(child.id() as i32, libc::SIGTERM);
+            }
+            #[cfg(windows)]
+            {
+                let _ = child.kill();
+            }
+
+            let start = Instant::now();
+            loop {
+                match child.try_wait() {
+                    Ok(Some(_)) => break,
+                    Ok(None) => {
+                        if start.elapsed() > Duration::from_secs(4) {
+                            #[cfg(unix)]
+                            unsafe {
+                                libc::kill(child.id() as i32, libc::SIGKILL);
+                            }
+                            #[cfg(windows)]
+                            {
+                                let _ = child.kill();
+                            }
+                            break;
+                        }
+                        thread::sleep(Duration::from_millis(50));
+                    }
+                    Err(_) => break,
+                }
+            }
+        }
+
+        let mut status = self.status.lock();
+        status.state = CliState::Stopped;
+        status.pid = None;
+        status.port = None;
+        status.url = None;
+        status.error = None;
+
+        Ok(())
+    }
+
+    pub fn status(&self) -> CliStatus {
+        self.status.lock().clone()
+    }
+
+    fn spawn_cli(
+        app: AppHandle,
+        status: Arc<Mutex<CliStatus>>,
+        child_holder: Arc<Mutex<Option<Child>>>,
+        ready: Arc<AtomicBool>,
+        dev: bool,
+    ) -> anyhow::Result<()> {
+        log_line("resolving CLI entry");
+        let resolution = CliEntry::resolve(&app, dev)?;
+        log_line(&format!(
+            "resolved CLI entry runner={:?} entry={}",
+            resolution.runner, resolution.entry
+        ));
+        let args = resolution.build_args(dev);
+        log_line(&format!("CLI args: {:?}", args));
+        if dev {
+            log_line("development mode: will prefer tsx + source if present");
+        }
+
+        let cwd = workspace_root();
+        if let Some(ref c) = cwd {
+            log_line(&format!("using cwd={}", c.display()));
+        }
+
+        let command_info = if supports_user_shell() {
+            log_line("spawning via user shell");
+            ShellCommandType::UserShell(build_shell_command_string(&resolution, &args)?)
+        } else {
+            log_line("spawning directly with node");
+            ShellCommandType::Direct(DirectCommand {
+                program: resolution.node_binary.clone(),
+                args: resolution.runner_args(&args),
+            })
+        };
+
+        if !supports_user_shell() {
+            if which::which(&resolution.node_binary).is_err() {
+                return Err(anyhow::anyhow!("Node binary not found. Make sure Node.js is installed."));
+            }
+        }
+
+        let child = match &command_info {
+            ShellCommandType::UserShell(cmd) => {
+                log_line(&format!("spawn command: {} {:?}", cmd.shell, cmd.args));
+                let mut c = Command::new(&cmd.shell);
+                c.args(&cmd.args)
+                    .env("ELECTRON_RUN_AS_NODE", "1")
+                    .stdout(Stdio::piped())
+                    .stderr(Stdio::piped());
+                if let Some(ref cwd) = cwd {
+                    c.current_dir(cwd);
+                }
+                c.spawn()?
+            }
+            ShellCommandType::Direct(cmd) => {
+                log_line(&format!("spawn command: {} {:?}", cmd.program, cmd.args));
+                let mut c = Command::new(&cmd.program);
+                c.args(&cmd.args)
+                    .env("ELECTRON_RUN_AS_NODE", "1")
+                    .stdout(Stdio::piped())
+                    .stderr(Stdio::piped());
+                if let Some(ref cwd) = cwd {
+                    c.current_dir(cwd);
+                }
+                c.spawn()?
+            }
+        };
+
+        let pid = child.id();
+        log_line(&format!("spawned pid={pid}"));
+        {
+            let mut locked = status.lock();
+            locked.pid = Some(pid);
+        }
+        Self::emit_status(&app, &status.lock());
+
+        {
+            let mut holder = child_holder.lock();
+            *holder = Some(child);
+        }
+
+        let child_clone = child_holder.clone();
+        let status_clone = status.clone();
+        let app_clone = app.clone();
+        let ready_clone = ready.clone();
+
+        thread::spawn(move || {
+            let stdout = child_clone
+                .lock()
+                .as_mut()
+                .and_then(|c| c.stdout.take())
+                .map(BufReader::new);
+            let stderr = child_clone
+                .lock()
+                .as_mut()
+                .and_then(|c| c.stderr.take())
+                .map(BufReader::new);
+
+            if let Some(reader) = stdout {
+                Self::process_stream(reader, "stdout", &app_clone, &status_clone, &ready_clone);
+            }
+            if let Some(reader) = stderr {
+                Self::process_stream(reader, "stderr", &app_clone, &status_clone, &ready_clone);
+            }
+        });
+
+        let app_clone = app.clone();
+        let status_clone = status.clone();
+        let ready_clone = ready.clone();
+        let child_holder_clone = child_holder.clone();
+        thread::spawn(move || {
+            let timeout = Duration::from_secs(15);
+            thread::sleep(timeout);
+            if ready_clone.load(Ordering::SeqCst) {
+                return;
+            }
+            let mut locked = status_clone.lock();
+            locked.state = CliState::Error;
+            locked.error = Some("CLI did not start in time".to_string());
+            log_line("timeout waiting for CLI readiness");
+            if let Some(child) = child_holder_clone.lock().as_mut() {
+                let _ = child.kill();
+            }
+            let _ = app_clone.emit("cli:error", json!({"message": "CLI did not start in time"}));
+            Self::emit_status(&app_clone, &locked);
+        });
+
+        let status_clone = status.clone();
+        let app_clone = app.clone();
+        thread::spawn(move || {
+            let code = {
+                let mut guard = child_holder.lock();
+                if let Some(child) = guard.as_mut() {
+                    child.wait().ok()
+                } else {
+                    None
+                }
+            };
+
+            let mut locked = status_clone.lock();
+            let failed = locked.state != CliState::Ready;
+            let err_msg = if failed {
+                Some(match code {
+                    Some(status) => format!("CLI exited early: {status}"),
+                    None => "CLI exited early".to_string(),
+                })
+            } else {
+                None
+            };
+
+            if failed {
+                locked.state = CliState::Error;
+                if locked.error.is_none() {
+                    locked.error = err_msg.clone();
+                }
+                log_line(&format!("cli process exited before ready: {:?}", locked.error));
+                let _ = app_clone.emit("cli:error", json!({"message": locked.error.clone().unwrap_or_default()}));
+            } else {
+                locked.state = CliState::Stopped;
+                log_line("cli process stopped cleanly");
+            }
+
+            Self::emit_status(&app_clone, &locked);
+        });
+
+        Ok(())
+    }
+
+    fn process_stream<R: BufRead>(
+        mut reader: R,
+        stream: &str,
+        app: &AppHandle,
+        status: &Arc<Mutex<CliStatus>>,
+        ready: &Arc<AtomicBool>,
+    ) {
+        let mut buffer = String::new();
+        let port_regex = Regex::new(r"CodeNomad Server is ready at http://[^:]+:(\d+)").ok();
+        let http_regex = Regex::new(r":(\d{2,5})(?!.*:\d)").ok();
+
+        loop {
+            buffer.clear();
+            match reader.read_line(&mut buffer) {
+                Ok(0) => break,
+                Ok(_) => {
+                    let line = buffer.trim_end();
+                    if !line.is_empty() {
+                        log_line(&format!("[cli][{}] {}", stream, line));
+
+                        if ready.load(Ordering::SeqCst) {
+                            continue;
+                        }
+
+                        if let Some(port) = port_regex
+                            .as_ref()
+                            .and_then(|re| re.captures(line).and_then(|c| c.get(1)))
+                            .and_then(|m| m.as_str().parse::<u16>().ok())
+                        {
+                            Self::mark_ready(app, status, ready, port);
+                            continue;
+                        }
+
+                        if line.to_lowercase().contains("http server listening") {
+                            if let Some(port) = http_regex
+                                .as_ref()
+                                .and_then(|re| re.captures(line).and_then(|c| c.get(1)))
+                                .and_then(|m| m.as_str().parse::<u16>().ok())
+                            {
+                                Self::mark_ready(app, status, ready, port);
+                                continue;
+                            }
+
+                            if let Ok(value) = serde_json::from_str::<serde_json::Value>(line) {
+                                if let Some(port) = value.get("port").and_then(|p| p.as_u64()) {
+                                    Self::mark_ready(app, status, ready, port as u16);
+                                    continue;
+                                }
+                            }
+                        }
+                    }
+                }
+                Err(_) => break,
+            }
+        }
+    }
+
+    fn mark_ready(app: &AppHandle, status: &Arc<Mutex<CliStatus>>, ready: &Arc<AtomicBool>, port: u16) {
+        ready.store(true, Ordering::SeqCst);
+        let mut locked = status.lock();
+        let url = format!("http://127.0.0.1:{port}");
+        locked.port = Some(port);
+        locked.url = Some(url.clone());
+        locked.state = CliState::Ready;
+        locked.error = None;
+        log_line(&format!("cli ready on {url}"));
+        navigate_main(app, &url);
+        let _ = app.emit("cli:ready", locked.clone());
+        Self::emit_status(app, &locked);
+    }
+
+    fn emit_status(app: &AppHandle, status: &CliStatus) {
+        let _ = app.emit("cli:status", status.clone());
+    }
+}
+
+fn supports_user_shell() -> bool {
+    cfg!(unix)
+}
+
+#[derive(Debug)]
+struct ShellCommand {
+    shell: String,
+    args: Vec<String>,
+}
+
+#[derive(Debug)]
+struct DirectCommand {
+    program: String,
+    args: Vec<String>,
+}
+
+#[derive(Debug)]
+enum ShellCommandType {
+    UserShell(ShellCommand),
+    Direct(DirectCommand),
+}
+
+#[derive(Debug)]
+struct CliEntry {
+    entry: String,
+    runner: Runner,
+    runner_path: Option<String>,
+    node_binary: String,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+enum Runner {
+    Node,
+    Tsx,
+}
+
+impl CliEntry {
+    fn resolve(app: &AppHandle, dev: bool) -> anyhow::Result<Self> {
+        let node_binary = std::env::var("NODE_BINARY").unwrap_or_else(|_| "node".to_string());
+
+        if dev {
+            if let Some(tsx_path) = resolve_tsx(app) {
+                if let Some(entry) = resolve_dev_entry(app) {
+                    return Ok(Self {
+                        entry,
+                        runner: Runner::Tsx,
+                        runner_path: Some(tsx_path),
+                        node_binary,
+                    });
+                }
+            }
+        }
+
+        if let Some(entry) = resolve_dist_entry(app) {
+            return Ok(Self {
+                entry,
+                runner: Runner::Node,
+                runner_path: None,
+                node_binary,
+            });
+        }
+
+        Err(anyhow::anyhow!(
+            "Unable to locate CodeNomad CLI build (dist/bin.js). Please build @neuralnomads/codenomad."
+        ))
+    }
+
+    fn build_args(&self, dev: bool) -> Vec<String> {
+        let mut args = vec![
+            "serve".to_string(),
+            "--host".to_string(),
+            "127.0.0.1".to_string(),
+            "--port".to_string(),
+            "0".to_string(),
+        ];
+        if dev {
+            args.push("--ui-dev-server".to_string());
+            args.push("http://localhost:3000".to_string());
+            args.push("--log-level".to_string());
+            args.push("debug".to_string());
+        }
+        args
+    }
+
+    fn runner_args(&self, cli_args: &[String]) -> Vec<String> {
+        let mut args = VecDeque::new();
+        if self.runner == Runner::Tsx {
+            if let Some(path) = &self.runner_path {
+                args.push_back(path.clone());
+            }
+        }
+        args.push_back(self.entry.clone());
+        for arg in cli_args {
+            args.push_back(arg.clone());
+        }
+        args.into_iter().collect()
+    }
+}
+
+fn resolve_tsx(_app: &AppHandle) -> Option<String> {
+    let candidates = vec![
+        std::env::current_dir()
+            .ok()
+            .map(|p| p.join("node_modules/tsx/dist/cli.js")),
+        std::env::current_exe()
+            .ok()
+            .and_then(|ex| ex.parent().map(|p| p.join("../node_modules/tsx/dist/cli.js"))),
+    ];
+
+    first_existing(candidates)
+}
+
+fn resolve_dev_entry(_app: &AppHandle) -> Option<String> {
+    let candidates = vec![
+        std::env::current_dir()
+            .ok()
+            .map(|p| p.join("packages/server/src/index.ts")),
+        std::env::current_dir()
+            .ok()
+            .map(|p| p.join("../server/src/index.ts")),
+    ];
+
+    first_existing(candidates)
+}
+
+fn resolve_dist_entry(_app: &AppHandle) -> Option<String> {
+    let base = workspace_root();
+    let mut candidates: Vec<Option<PathBuf>> = vec![
+        base.as_ref().map(|p| p.join("packages/server/dist/bin.js")),
+        base.as_ref().map(|p| p.join("packages/server/dist/index.js")),
+        base.as_ref().map(|p| p.join("server/dist/bin.js")),
+        base.as_ref().map(|p| p.join("server/dist/index.js")),
+    ];
+
+    if let Ok(exe) = std::env::current_exe() {
+        if let Some(dir) = exe.parent() {
+            let resources = dir.join("../Resources");
+            candidates.push(Some(resources.join("server/dist/bin.js")));
+            candidates.push(Some(resources.join("server/dist/index.js")));
+            candidates.push(Some(resources.join("server/dist/server/bin.js")));
+            candidates.push(Some(resources.join("server/dist/server/index.js")));
+            candidates.push(Some(resources.join("resources/server/dist/bin.js")));
+            candidates.push(Some(resources.join("resources/server/dist/index.js")));
+            candidates.push(Some(resources.join("resources/server/dist/server/bin.js")));
+            candidates.push(Some(resources.join("resources/server/dist/server/index.js")));
+        }
+    }
+
+    first_existing(candidates)
+}
+
+fn build_shell_command_string(entry: &CliEntry, cli_args: &[String]) -> anyhow::Result<ShellCommand> {
+
+    let shell = default_shell();
+    let mut quoted: Vec<String> = Vec::new();
+    quoted.push(shell_escape(&entry.node_binary));
+    for arg in entry.runner_args(cli_args) {
+        quoted.push(shell_escape(&arg));
+    }
+    let command = format!("ELECTRON_RUN_AS_NODE=1 exec {}", quoted.join(" "));
+    let args = build_shell_args(&shell, &command);
+    log_line(&format!("user shell command: {} {:?}", shell, args));
+    Ok(ShellCommand { shell, args })
+}
+
+fn default_shell() -> String {
+    if let Ok(shell) = std::env::var("SHELL") {
+        if !shell.trim().is_empty() {
+            return shell;
+        }
+    }
+    if cfg!(target_os = "macos") {
+        "/bin/zsh".to_string()
+    } else {
+        "/bin/bash".to_string()
+    }
+}
+
+fn shell_escape(input: &str) -> String {
+    if input.is_empty() {
+        "''".to_string()
+    } else if !input
+        .chars()
+        .any(|c| matches!(c, ' ' | '"' | '\'' | '$' | '`' | '!' ))
+    {
+        input.to_string()
+    } else {
+        let escaped = input.replace('\'', "'\\''");
+        format!("'{}'", escaped)
+    }
+}
+
+fn build_shell_args(shell: &str, command: &str) -> Vec<String> {
+    let shell_name = std::path::Path::new(shell)
+        .file_name()
+        .and_then(OsStr::to_str)
+        .unwrap_or("")
+        .to_lowercase();
+
+    if shell_name.contains("zsh") {
+        vec!["-l".into(), "-i".into(), "-c".into(), command.into()]
+    } else {
+        vec!["-l".into(), "-c".into(), command.into()]
+    }
+}
+
+fn first_existing(paths: Vec<Option<PathBuf>>) -> Option<String> {
+    paths
+        .into_iter()
+        .flatten()
+        .find(|p| p.exists())
+        .map(|p| normalize_path(p))
+}
+
+fn normalize_path(path: PathBuf) -> String {
+    if let Ok(clean) = path.canonicalize() {
+        clean.to_string_lossy().to_string()
+    } else {
+        path.to_string_lossy().to_string()
+    }
+}

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

@@ -0,0 +1,79 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+mod cli_manager;
+
+use cli_manager::{CliProcessManager, CliStatus};
+use serde_json::json;
+use tauri::menu::Menu;
+use tauri::{AppHandle, Emitter, Manager};
+
+#[derive(Clone)]
+pub struct AppState {
+    pub manager: CliProcessManager,
+}
+
+#[tauri::command]
+fn cli_get_status(state: tauri::State<AppState>) -> CliStatus {
+    state.manager.status()
+}
+
+fn main() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_dialog::init())
+        .manage(AppState {
+            manager: CliProcessManager::new(),
+        })
+        .setup(|app| {
+            build_menu(&app.handle())?;
+            let dev_mode = cfg!(debug_assertions) || std::env::var("TAURI_DEV").is_ok();
+            let app_handle = app.handle().clone();
+            let manager = app.state::<AppState>().manager.clone();
+            std::thread::spawn(move || {
+                if let Err(err) = manager.start(app_handle.clone(), dev_mode) {
+                    let _ = app_handle.emit(
+                        "cli:error",
+                        json!({"message": err.to_string()}),
+                    );
+                }
+            });
+            Ok(())
+        })
+        .invoke_handler(tauri::generate_handler![cli_get_status])
+        .on_menu_event(|_app_handle, _event| {
+            // No menu items defined currently
+        })
+        .build(tauri::generate_context!())
+        .expect("error while building tauri application")
+        .run(|app_handle, event| {
+            match event {
+                tauri::RunEvent::ExitRequested { .. } => {
+                    let app = app_handle.clone();
+                    std::thread::spawn(move || {
+                        if let Some(state) = app.try_state::<AppState>() {
+                            let _ = state.manager.stop();
+                        }
+                        app.exit(0);
+                    });
+                }
+                tauri::RunEvent::WindowEvent { event: tauri::WindowEvent::Destroyed, .. } => {
+                    if app_handle.webview_windows().len() <= 1 {
+                        let app = app_handle.clone();
+                        std::thread::spawn(move || {
+                            if let Some(state) = app.try_state::<AppState>() {
+                                let _ = state.manager.stop();
+                            }
+                            app.exit(0);
+                        });
+                    }
+                }
+                _ => {}
+            }
+        });
+}
+
+fn build_menu(app: &AppHandle) -> tauri::Result<()> {
+    // Minimal empty menu for now (Tauri v2 menu API differs from v1 roles).
+    let menu = Menu::new(app)?;
+    app.set_menu(menu)?;
+    Ok(())
+}

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

@@ -0,0 +1,49 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "CodeNomad",
+  "version": "0.1.0",
+  "identifier": "ai.opencode.client",
+  "build": {
+    "beforeDevCommand": "npm run dev:bootstrap",
+    "beforeBuildCommand": "npm run bundle:server",
+    "frontendDist": "resources/ui-loading"
+  },
+
+ 
+
+  "app": {
+    "withGlobalTauri": true,
+    "windows": [
+      {
+        "label": "main",
+        "title": "CodeNomad",
+        "url": "loading.html",
+        "width": 1400,
+        "height": 900,
+        "minWidth": 800,
+        "minHeight": 600,
+        "center": true,
+        "resizable": true,
+        "fullscreen": false,
+        "decorations": true,
+        "theme": "Dark",
+        "backgroundColor": "#1a1a1a"
+      }
+    ],
+    "security": {
+      "assetProtocol": {
+        "scope": ["**"]
+      },
+      "capabilities": ["main-window-native-dialogs"]
+    }
+  },
+  "bundle": {
+    "active": true,
+    "resources": [
+      "resources/server",
+      "resources/ui-loading"
+    ],
+    "icon": ["icon.icns", "icon.ico", "icon.png"],
+    "targets": ["app", "appimage", "deb", "rpm", "nsis"]
+  }
+}

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/ui",
-  "version": "0.2.0",
+  "version": "0.2.4",
   "private": true,
   "type": "module",
   "scripts": {

packages/ui/src/App.tsx

@@ -1,7 +1,9 @@
 import { Component, Show, createMemo, createEffect, createSignal } from "solid-js"
 import { Dialog } from "@kobalte/core/dialog"
 import { Toaster } from "solid-toast"
+import AlertDialog from "./components/alert-dialog"
 import FolderSelectionView from "./components/folder-selection-view"
+import { showConfirmDialog } from "./stores/alerts"
 import InstanceTabs from "./components/instance-tabs"
 import InstanceDisconnectedModal from "./components/instance-disconnected-modal"
 import InstanceShell from "./components/instance/instance-shell"
@@ -45,9 +47,11 @@ const App: Component = () => {
     preferences,
     recordWorkspaceLaunch,
     toggleShowThinkingBlocks,
+    toggleUsageMetrics,
     setDiffViewMode,
     setToolOutputExpansion,
     setDiagnosticsExpansion,
+    setThinkingBlocksExpansion,
   } = useConfig()
   const [escapeInDebounce, setEscapeInDebounce] = createSignal(false)
   const [launchErrorBinary, setLaunchErrorBinary] = createSignal<string | null>(null)
@@ -135,11 +139,21 @@ const App: Component = () => {
   }
 
   async function handleCloseInstance(instanceId: string) {
-    if (confirm("Stop OpenCode instance? This will stop the server.")) {
-      await stopInstance(instanceId)
-      if (instances().size === 0) {
-        setHasInstances(false)
-      }
+    const confirmed = await showConfirmDialog(
+      "Stop OpenCode instance? This will stop the server.",
+      {
+        title: "Stop instance",
+        variant: "warning",
+        confirmLabel: "Stop",
+        cancelLabel: "Keep running",
+      },
+    )
+
+    if (!confirmed) return
+
+    await stopInstance(instanceId)
+    if (instances().size === 0) {
+      setHasInstances(false)
     }
   }
 
@@ -193,9 +207,11 @@ const App: Component = () => {
   const { commands: paletteCommands, executeCommand } = useCommands({
     preferences,
     toggleShowThinkingBlocks,
+    toggleUsageMetrics,
     setDiffViewMode,
     setToolOutputExpansion,
     setDiagnosticsExpansion,
+    setThinkingBlocksExpansion,
     handleNewInstanceRequest,
     handleCloseInstance,
     handleNewSession,
@@ -321,6 +337,8 @@ const App: Component = () => {
           </div>
         </Show>
 
+        <AlertDialog />
+
         <Toaster
           position="top-right"
           gutter={16}

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

@@ -3,7 +3,6 @@ import { For, 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 Kbd from "./kbd"
 
 interface AgentSelectorProps {
   instanceId: string
@@ -116,9 +115,6 @@ export default function AgentSelector(props: AgentSelectorProps) {
           </Select.Content>
         </Select.Portal>
       </Select>
-      <span class="hint sidebar-selector-hint">
-        <Kbd shortcut="cmd+shift+a" />
-      </span>
     </div>
   )
 }

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

@@ -0,0 +1,132 @@
+import { Dialog } from "@kobalte/core/dialog"
+import { Component, Show, createEffect } from "solid-js"
+import { alertDialogState, dismissAlertDialog } from "../stores/alerts"
+import type { AlertVariant, AlertDialogState } from "../stores/alerts"
+
+const variantAccent: Record<AlertVariant, { badgeBg: string; badgeBorder: string; badgeText: string; symbol: string; fallbackTitle: string }> = {
+  info: {
+    badgeBg: "var(--badge-neutral-bg)",
+    badgeBorder: "var(--border-base)",
+    badgeText: "var(--accent-primary)",
+    symbol: "i",
+    fallbackTitle: "Heads up",
+  },
+  warning: {
+    badgeBg: "rgba(255, 152, 0, 0.14)",
+    badgeBorder: "var(--status-warning)",
+    badgeText: "var(--status-warning)",
+    symbol: "!",
+    fallbackTitle: "Please review",
+  },
+  error: {
+    badgeBg: "var(--danger-soft-bg)",
+    badgeBorder: "var(--status-error)",
+    badgeText: "var(--status-error)",
+    symbol: "!",
+    fallbackTitle: "Something went wrong",
+  },
+}
+
+function dismiss(confirmed: boolean, payload?: AlertDialogState | null) {
+  const current = payload ?? alertDialogState()
+  if (current?.type === "confirm") {
+    if (confirmed) {
+      current.onConfirm?.()
+    } else {
+      current.onCancel?.()
+    }
+    current.resolve?.(confirmed)
+  } else if (confirmed) {
+    current?.onConfirm?.()
+  }
+  dismissAlertDialog()
+}
+
+const AlertDialog: Component = () => {
+  let primaryButtonRef: HTMLButtonElement | undefined
+
+  createEffect(() => {
+    if (alertDialogState()) {
+      queueMicrotask(() => {
+        primaryButtonRef?.focus()
+      })
+    }
+  })
+
+  return (
+    <Show when={alertDialogState()} keyed>
+      {(payload) => {
+        const variant = payload.variant ?? "info"
+        const accent = variantAccent[variant]
+        const title = payload.title || accent.fallbackTitle
+        const isConfirm = payload.type === "confirm"
+        const confirmLabel = payload.confirmLabel || (isConfirm ? "Confirm" : "OK")
+        const cancelLabel = payload.cancelLabel || "Cancel"
+
+        return (
+          <Dialog
+            open
+            modal
+            onOpenChange={(open) => {
+              if (!open) {
+                dismiss(false, payload)
+              }
+            }}
+          >
+            <Dialog.Portal>
+              <Dialog.Overlay class="modal-overlay" />
+              <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+                <Dialog.Content class="modal-surface w-full max-w-sm p-6 border border-base shadow-2xl" tabIndex={-1}>
+                  <div class="flex items-start gap-3">
+                    <div
+                      class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border text-base font-semibold"
+                      style={{
+                        "background-color": accent.badgeBg,
+                        "border-color": accent.badgeBorder,
+                        color: accent.badgeText,
+                      }}
+                      aria-hidden
+                    >
+                      {accent.symbol}
+                    </div>
+                    <div class="flex-1">
+                      <Dialog.Title class="text-lg font-semibold text-primary">{title}</Dialog.Title>
+                      <Dialog.Description class="text-sm text-secondary mt-1 whitespace-pre-line">
+                        {payload.message}
+                        {payload.detail && <p class="mt-2 text-secondary">{payload.detail}</p>}
+                      </Dialog.Description>
+                    </div>
+                  </div>
+
+                  <div class="mt-6 flex justify-end gap-3">
+                    {isConfirm && (
+                      <button
+                        type="button"
+                        class="button-secondary"
+                        onClick={() => dismiss(false, payload)}
+                      >
+                        {cancelLabel}
+                      </button>
+                    )}
+                    <button
+                      type="button"
+                      class="button-primary"
+                      ref={(el) => {
+                        primaryButtonRef = el
+                      }}
+                      onClick={() => dismiss(true, payload)}
+                    >
+                      {confirmLabel}
+                    </button>
+                  </div>
+                </Dialog.Content>
+              </div>
+            </Dialog.Portal>
+          </Dialog>
+        )
+      }}
+    </Show>
+  )
+}
+
+export default AlertDialog

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

@@ -1,9 +1,10 @@
-import { createMemo, Show, onMount, createEffect } from "solid-js"
+import { createMemo, Show, createEffect, onCleanup } from "solid-js"
 import { DiffView, DiffModeEnum } from "@git-diff-view/solid"
 import type { DiffHighlighterLang } from "@git-diff-view/core"
 import { getLanguageFromPath } from "../lib/markdown"
 import { normalizeDiffText } from "../lib/diff-utils"
-import { setToolRenderCache } from "../lib/tool-render-cache"
+import { setCacheEntry } from "../lib/global-cache"
+import type { CacheEntryParams } from "../lib/global-cache"
 import type { DiffViewMode } from "../stores/preferences"
 
 interface ToolCallDiffViewerProps {
@@ -13,7 +14,7 @@ interface ToolCallDiffViewerProps {
   mode: DiffViewMode
   onRendered?: () => void
   cachedHtml?: string
-  cacheKey?: string
+  cacheEntryParams?: CacheEntryParams
 }
 
 type DiffData = {
@@ -22,6 +23,13 @@ type DiffData = {
   hunks: string[]
 }
 
+type CaptureContext = {
+  theme: ToolCallDiffViewerProps["theme"]
+  mode: DiffViewMode
+  diffText: string
+  cacheEntryParams?: CacheEntryParams
+}
+
 export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
   const diffData = createMemo<DiffData | null>(() => {
     const normalized = normalizeDiffText(props.diffText)
@@ -46,30 +54,93 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
   })
 
   let diffContainerRef: HTMLDivElement | undefined
+  let pendingCapture: number | undefined
+  let pendingContext: CaptureContext | undefined
+  let lastRenderedMarkup: string | undefined
+  let lastCachedHtml: string | undefined
 
-  const captureAndCacheHtml = () => {
-    if (diffContainerRef && props.cacheKey && !props.cachedHtml) {
-      // Extract the rendered HTML from DiffView container
-      const renderedHtml = diffContainerRef.innerHTML
-      if (renderedHtml) {
-        setToolRenderCache(props.cacheKey, {
-          text: props.diffText,
-          html: renderedHtml,
-          theme: props.theme,
-          mode: props.mode,
+  const clearPendingCapture = () => {
+    if (pendingCapture !== undefined) {
+      cancelAnimationFrame(pendingCapture)
+      pendingCapture = undefined
+    }
+    pendingContext = undefined
+  }
+
+  const runCapture = (context: CaptureContext) => {
+    if (!diffContainerRef) {
+      props.onRendered?.()
+      return
+    }
+
+    const markup = diffContainerRef.innerHTML
+    if (!markup) {
+      props.onRendered?.()
+      return
+    }
+
+    const hasChanged = markup !== lastRenderedMarkup
+    if (hasChanged) {
+      lastRenderedMarkup = markup
+      if (context.cacheEntryParams) {
+        setCacheEntry(context.cacheEntryParams, {
+          text: context.diffText,
+          html: markup,
+          theme: context.theme,
+          mode: context.mode,
         })
       }
     }
+
     props.onRendered?.()
   }
 
-  // Also capture HTML when diff data changes
+  const scheduleCapture = (context: CaptureContext) => {
+    clearPendingCapture()
+    pendingContext = context
+    pendingCapture = requestAnimationFrame(() => {
+      const activeContext = pendingContext
+      pendingContext = undefined
+      pendingCapture = undefined
+      if (activeContext) {
+        runCapture(activeContext)
+      }
+    })
+  }
+
   createEffect(() => {
-    const data = diffData()
-    if (data && !props.cachedHtml) {
-      // Delay to allow DiffView to re-render with new data
-      setTimeout(captureAndCacheHtml, 100)
+    const cachedHtml = props.cachedHtml
+    if (cachedHtml) {
+      clearPendingCapture()
+      if (cachedHtml !== lastCachedHtml) {
+        lastCachedHtml = cachedHtml
+        lastRenderedMarkup = cachedHtml
+        props.onRendered?.()
+      }
+      return
     }
+
+    lastCachedHtml = undefined
+
+    const data = diffData()
+    const theme = props.theme
+    const mode = props.mode
+
+    if (!data) {
+      clearPendingCapture()
+      return
+    }
+
+    scheduleCapture({
+      theme,
+      mode,
+      diffText: props.diffText,
+      cacheEntryParams: props.cacheEntryParams,
+    })
+  })
+
+  onCleanup(() => {
+    clearPendingCapture()
   })
 
   return (

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

@@ -4,6 +4,7 @@ import { useConfig } from "../stores/preferences"
 import AdvancedSettingsModal from "./advanced-settings-modal"
 import DirectoryBrowserDialog from "./directory-browser-dialog"
 import Kbd from "./kbd"
+import { openNativeFolderDialog, supportsNativeDialogs } from "../lib/native/native-functions"
 
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 
@@ -21,6 +22,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   const [focusMode, setFocusMode] = createSignal<"recent" | "new" | null>("recent")
   const [selectedBinary, setSelectedBinary] = createSignal(preferences().lastUsedBinary || "opencode")
   const [isFolderBrowserOpen, setIsFolderBrowserOpen] = createSignal(false)
+  const nativeDialogsAvailable = supportsNativeDialogs()
   let recentListRef: HTMLDivElement | undefined
  
   const folders = () => recentFolders()
@@ -29,9 +31,8 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   // Update selected binary when preferences change
   createEffect(() => {
     const lastUsed = preferences().lastUsedBinary
-    if (lastUsed && lastUsed !== selectedBinary()) {
-      setSelectedBinary(lastUsed)
-    }
+    if (!lastUsed) return
+    setSelectedBinary((current) => (current === lastUsed ? current : lastUsed))
   })
 
 
@@ -78,7 +79,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
 
     if (isBrowseShortcut) {
       e.preventDefault()
-      handleBrowse()
+      void handleBrowse()
       return
     }
 
@@ -172,9 +173,20 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     props.onSelectFolder(path, selectedBinary())
   }
  
-  function handleBrowse() {
+  async function handleBrowse() {
     if (isLoading()) return
     setFocusMode("new")
+    if (nativeDialogsAvailable) {
+      const fallbackPath = folders()[0]?.path
+      const selected = await openNativeFolderDialog({
+        title: "Select Workspace",
+        defaultPath: fallbackPath,
+      })
+      if (selected) {
+        handleFolderSelect(selected)
+      }
+      return
+    }
     setIsFolderBrowserOpen(true)
   }
  
@@ -219,7 +231,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
         >
         <div class="mb-6 text-center shrink-0">
           <div class="mb-3 flex justify-center">
-            <img src={codeNomadLogo} alt="CodeNomad logo" class="h-48 w-auto" loading="lazy" />
+            <img src={codeNomadLogo} alt="CodeNomad logo" class="h-32 w-auto sm:h-48" loading="lazy" />
           </div>
           <h1 class="mb-2 text-3xl font-semibold text-primary">CodeNomad</h1>
           <p class="text-base text-secondary">Select a folder to start coding with AI</p>
@@ -306,14 +318,14 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
             </Show>
 
             <div class="panel shrink-0">
-              <div class="panel-header">
+              <div class="panel-header hidden sm:block">
                 <h2 class="panel-title">Browse for Folder</h2>
                 <p class="panel-subtitle">Select any folder on your computer</p>
               </div>
 
               <div class="panel-body">
                 <button
-                  onClick={handleBrowse}
+                  onClick={() => void handleBrowse()}
                   disabled={props.isLoading}
                   class="button-primary w-full flex items-center justify-center text-sm disabled:cursor-not-allowed"
                   onMouseEnter={() => setFocusMode("new")}
@@ -342,7 +354,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
             </div>
           </div>
 
-          <div class="mt-1 panel panel-footer shrink-0">
+          <div class="mt-1 panel panel-footer shrink-0 hidden sm:block">
             <div class="panel-footer-hints">
               <Show when={folders().length > 0}>
                 <div class="flex items-center gap-1.5">

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

@@ -48,6 +48,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
   const [isLoadingMetadata, setIsLoadingMetadata] = createSignal(true)
 
   const metadata = () => props.instance.metadata
+  const binaryVersion = () => props.instance.binaryVersion || metadata()?.version
   const mcpServers = () => {
     const status = metadata()?.mcpStatus
     return status ? parseMcpStatus(status) : []
@@ -104,11 +105,12 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
           ...(lspStatus ? { lspStatus } : {}),
         }
 
-        if (!nextMetadata.version) {
-          nextMetadata.version = "0.15.8"
+        if (!nextMetadata.version && instance.binaryVersion) {
+          nextMetadata.version = instance.binaryVersion
         }
 
         updateInstance(instanceId, { metadata: nextMetadata })
+
       } catch (error) {
         if (!cancelled) {
           console.error("Failed to load instance metadata:", error)
@@ -173,13 +175,13 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
           )}
         </Show>
 
-        <Show when={metadata()?.version}>
+        <Show when={binaryVersion()}>
           <div>
             <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
               OpenCode Version
             </div>
             <div class="text-xs px-2 py-1.5 rounded border bg-surface-secondary border-base text-primary">
-              v{metadata()?.version}
+              v{binaryVersion()}
             </div>
           </div>
         </Show>

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

@@ -281,7 +281,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
         </div>
       </div>
 
-      <div class="panel-footer">
+      <div class="panel-footer hidden sm:block">
         <div class="panel-footer-hints">
           <div class="flex items-center gap-1.5">
             <kbd class="kbd">↑</kbd>

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

@@ -14,6 +14,7 @@ import InfoView from "../info-view"
 import AgentSelector from "../agent-selector"
 import ModelSelector from "../model-selector"
 import CommandPalette from "../command-palette"
+import Kbd from "../kbd"
 import ContextUsagePanel from "../session/context-usage-panel"
 import SessionView from "../session/session-view"
 
@@ -28,7 +29,7 @@ interface InstanceShellProps {
   onExecuteCommand: (command: Command) => void
 }
 
-const DEFAULT_SESSION_SIDEBAR_WIDTH = 280
+const DEFAULT_SESSION_SIDEBAR_WIDTH = 350
 
 const InstanceShell: Component<InstanceShellProps> = (props) => {
   const [sessionSidebarWidth, setSessionSidebarWidth] = createSignal(DEFAULT_SESSION_SIDEBAR_WIDTH)
@@ -114,12 +115,22 @@ const InstanceShell: Component<InstanceShellProps> = (props) => {
                       onAgentChange={(agent) => props.handleSidebarAgentChange(activeSession().id, agent)}
                     />
 
+                    <div class="sidebar-selector-hints" aria-hidden="true">
+                      <span class="hint sidebar-selector-hint sidebar-selector-hint--left">
+                        <Kbd shortcut="cmd+shift+a" />
+                      </span>
+                      <span class="hint sidebar-selector-hint sidebar-selector-hint--right">
+                        <Kbd shortcut="cmd+shift+m" />
+                      </span>
+                    </div>
+
                     <ModelSelector
                       instanceId={props.instance.id}
                       sessionId={activeSession().id}
                       currentModel={activeSession().model}
                       onModelChange={(model) => props.handleSidebarModelChange(activeSession().id, model)}
                     />
+
                   </div>
                 </>
               )}

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

@@ -1,23 +1,27 @@
 import { For, Show } from "solid-js"
-import type { Message, SDKPart, MessageInfo, ClientPart } from "../types/message"
+import type { MessageInfo, ClientPart } from "../types/message"
 import { partHasRenderableText } from "../types/message"
+import type { MessageRecord } from "../stores/message-v2/types"
 import MessagePart from "./message-part"
 
 interface MessageItemProps {
-  message: Message
+  record: MessageRecord
   messageInfo?: MessageInfo
   instanceId: string
   sessionId: string
   isQueued?: boolean
-  parts?: ClientPart[]
+  combinedParts: ClientPart[]
+  orderedParts: ClientPart[]
   onRevert?: (messageId: string) => void
   onFork?: (messageId?: string) => void
+  showAgentMeta?: boolean
 }
 
 export default function MessageItem(props: MessageItemProps) {
-  const isUser = () => props.message.type === "user"
+  const isUser = () => props.record.role === "user"
   const timestamp = () => {
-    const date = new Date(props.message.timestamp)
+    const createdTime = props.messageInfo?.time?.created ?? props.record.createdAt
+    const date = new Date(createdTime)
     return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
   }
 
@@ -27,10 +31,10 @@ export default function MessageItem(props: MessageItemProps) {
     filename?: string
   }
 
-  const displayParts = () => props.parts ?? props.message.parts
+  const combinedParts = () => props.combinedParts
 
   const fileAttachments = () =>
-    props.message.parts.filter((part): part is FilePart => part?.type === "file" && typeof (part as FilePart).url === "string")
+    props.orderedParts.filter((part): part is FilePart => part?.type === "file" && typeof (part as FilePart).url === "string")
 
   const getAttachmentName = (part: FilePart) => {
     if (part.filename && part.filename.trim().length > 0) {
@@ -120,7 +124,7 @@ export default function MessageItem(props: MessageItemProps) {
       return true
     }
 
-    return displayParts().some((part) => partHasRenderableText(part))
+    return combinedParts().some((part) => partHasRenderableText(part))
   }
 
   const isGenerating = () => {
@@ -130,15 +134,19 @@ export default function MessageItem(props: MessageItemProps) {
 
   const handleRevert = () => {
     if (props.onRevert && isUser()) {
-      props.onRevert(props.message.id)
+      props.onRevert(props.record.id)
     }
   }
 
+  if (!isUser() && !hasContent()) {
+    return null
+  }
+
   const containerClass = () =>
     isUser()
       ? "message-item-base bg-[var(--message-user-bg)] border-l-4 border-[var(--message-user-border)]"
       : "message-item-base assistant-message bg-[var(--message-assistant-bg)] border-l-4 border-[var(--message-assistant-border)]"
- 
+
   const agentIdentifier = () => {
     if (isUser()) return ""
     const info = props.messageInfo
@@ -155,24 +163,30 @@ export default function MessageItem(props: MessageItemProps) {
     if (modelID && providerID) return `${providerID}/${modelID}`
     return modelID
   }
- 
+
+
   return (
 
-    <div class={containerClass()}>
-      <div class="flex justify-between items-center gap-2.5 pb-0.5">
-        <div class="flex flex-col">
-          <Show when={isUser()}>
-            <span class="font-semibold text-xs text-[var(--message-user-border)]">You</span>
-          </Show>
+      <div class={containerClass()}>
+        <div class={`flex justify-between items-center gap-2.5 ${isUser() ? "pb-0.5" : "pb-0"}`}>
+          <div class="flex flex-col">
+            <Show when={isUser()}>
+              <span class="font-semibold text-xs text-[var(--message-user-border)]">You</span>
+            </Show>
+            <Show when={!isUser()}>
+              <div class="flex flex-wrap items-center gap-2 text-xs text-[var(--message-assistant-border)]">
+                <span class="font-semibold">Assistant</span>
+                <Show when={props.showAgentMeta && (agentIdentifier() || modelIdentifier())}>
+                  <span class="message-step-meta-inline">
+                    <Show when={agentIdentifier()}>{(value) => <span class="font-medium text-[var(--message-assistant-border)]">Agent: {value()}</span>}</Show>
+                    <Show when={modelIdentifier()}>{(value) => <span class="font-medium text-[var(--message-assistant-border)]">Model: {value()}</span>}</Show>
+                  </span>
+                </Show>
+              </div>
+            </Show>
+          </div>
+          <div class="flex items-center gap-2">
 
-          <Show when={!isUser()}>
-            <div class="flex flex-wrap gap-x-3 gap-y-0.5 text-[11px] text-[var(--message-assistant-border)]">
-              <Show when={agentIdentifier()}>{(value) => <span>Agent: {value()}</span>}</Show>
-              <Show when={modelIdentifier()}>{(value) => <span>Model: {value()}</span>}</Show>
-            </div>
-          </Show>
-        </div>
-        <div class="flex items-center gap-2">
           <Show when={isUser() && props.onRevert}>
             <button
               class="bg-transparent border border-[var(--border-base)] text-[var(--text-muted)] cursor-pointer px-3 py-0.5 rounded text-xs font-semibold leading-none transition-all duration-200 flex items-center justify-center h-6 hover:bg-[var(--surface-hover)] hover:border-[var(--accent-primary)] hover:text-[var(--accent-primary)] active:scale-95"
@@ -186,7 +200,7 @@ export default function MessageItem(props: MessageItemProps) {
           <Show when={isUser() && props.onFork}>
             <button
               class="bg-transparent border border-[var(--border-base)] text-[var(--text-muted)] cursor-pointer px-3 py-0.5 rounded text-xs font-semibold leading-none transition-all duration-200 flex items-center justify-center h-6 hover:bg-[var(--surface-hover)] hover:border-[var(--accent-primary)] hover:text-[var(--accent-primary)] active:scale-95"
-              onClick={() => props.onFork?.(props.message.id)}
+              onClick={() => props.onFork?.(props.record.id)}
               title="Fork from this message"
               aria-label="Fork from this message"
             >
@@ -213,72 +227,71 @@ export default function MessageItem(props: MessageItemProps) {
           </div>
         </Show>
 
-        <For each={displayParts()}>
+        <For each={combinedParts()}>
           {(part) => (
             <MessagePart
               part={part}
-              messageType={props.message.type}
+              messageType={props.record.role}
               instanceId={props.instanceId}
               sessionId={props.sessionId}
             />
           )}
         </For>
+
+        <Show when={fileAttachments().length > 0}>
+          <div class="message-attachments mt-1">
+            <For each={fileAttachments()}>
+              {(attachment) => {
+                const name = getAttachmentName(attachment)
+                const isImage = isImageAttachment(attachment)
+                return (
+                  <div class={`attachment-chip ${isImage ? "attachment-chip-image" : ""}`} title={name}>
+                    <Show when={isImage} fallback={
+                      <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                        />
+                      </svg>
+                    }>
+                      <img src={attachment.url} alt={name} class="h-5 w-5 rounded object-cover" />
+                    </Show>
+                    <span class="truncate max-w-[180px]">{name}</span>
+                    <button
+                      type="button"
+                      onClick={() => void handleAttachmentDownload(attachment)}
+                      class="attachment-download"
+                      aria-label={`Download ${name}`}
+                    >
+                      <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" />
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12l4 4 4-4m-4-8v12" />
+                      </svg>
+                    </button>
+                    <Show when={isImage}>
+                      <div class="attachment-chip-preview">
+                        <img src={attachment.url} alt={name} />
+                      </div>
+                    </Show>
+                  </div>
+                )
+              }}
+            </For>
+          </div>
+        </Show>
+
+        <Show when={props.record.status === "sending"}>
+          <div class="message-sending">
+            <span class="generating-spinner">●</span> Sending...
+          </div>
+        </Show>
+
+        <Show when={props.record.status === "error"}>
+          <div class="message-error">⚠ Message failed to send</div>
+        </Show>
       </div>
-
-      <Show when={fileAttachments().length > 0}>
-        <div class="message-attachments">
-          <For each={fileAttachments()}>
-            {(attachment) => {
-              const name = getAttachmentName(attachment)
-              const isImage = isImageAttachment(attachment)
-              return (
-                <div class={`attachment-chip ${isImage ? "attachment-chip-image" : ""}`} title={name}>
-                  <Show when={isImage} fallback={
-                    <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
-                      />
-                    </svg>
-                  }>
-                    <img src={attachment.url} alt={name} class="h-5 w-5 rounded object-cover" />
-                  </Show>
-                  <span class="truncate max-w-[180px]">{name}</span>
-                  <button
-                    type="button"
-                    onClick={() => void handleAttachmentDownload(attachment)}
-                    class="attachment-download"
-                    aria-label={`Download ${name}`}
-                  >
-                    <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" />
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12l4 4 4-4m-4-8v12" />
-                    </svg>
-                  </button>
-                  <Show when={isImage}>
-                    <div class="attachment-chip-preview">
-                      <img src={attachment.url} alt={name} />
-                    </div>
-                  </Show>
-                </div>
-              )
-            }}
-          </For>
-        </div>
-      </Show>
-
-      <Show when={props.message.status === "sending"}>
-
-        <div class="message-sending">
-          <span class="generating-spinner">●</span> Sending...
-        </div>
-      </Show>
-
-      <Show when={props.message.status === "error"}>
-        <div class="message-error">⚠ Message failed to send</div>
-      </Show>
     </div>
   )
 }

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

@@ -33,6 +33,38 @@ export default function MessagePart(props: MessagePartProps) {
     return ""
   }
 
+  function reasoningSegmentHasText(segment: unknown): boolean {
+    if (typeof segment === "string") {
+      return segment.trim().length > 0
+    }
+    if (segment && typeof segment === "object") {
+      const candidate = segment as { text?: unknown; value?: unknown; content?: unknown[] }
+      if (typeof candidate.text === "string" && candidate.text.trim().length > 0) {
+        return true
+      }
+      if (typeof candidate.value === "string" && candidate.value.trim().length > 0) {
+        return true
+      }
+      if (Array.isArray(candidate.content)) {
+        return candidate.content.some((entry) => reasoningSegmentHasText(entry))
+      }
+    }
+    return false
+  }
+
+  const hasReasoningContent = () => {
+    if (props.part?.type !== "reasoning") {
+      return false
+    }
+    if (reasoningSegmentHasText((props.part as any).text)) {
+      return true
+    }
+    if (Array.isArray((props.part as any).content)) {
+      return (props.part as any).content.some((entry: unknown) => reasoningSegmentHasText(entry))
+    }
+    return false
+  }
+
   const createTextPartForMarkdown = (): TextPart => {
     const part = props.part
     if ((part.type === "text" || part.type === "reasoning") && typeof part.text === "string") {
@@ -83,23 +115,7 @@ export default function MessagePart(props: MessagePartProps) {
 
 
 
-      <Match when={partType() === "reasoning"}>
-        <Show when={preferences().showThinkingBlocks && partHasRenderableText(props.part)}>
-          <div class="message-reasoning">
-            <div class="reasoning-container">
-              <div class="reasoning-header" onClick={handleReasoningClick}>
-                <span class="reasoning-icon">{isReasoningExpanded() ? "▼" : "▶"}</span>
-                <span class="reasoning-label">Reasoning</span>
-              </div>
-              <Show when={isReasoningExpanded()}>
-                <div class={`${textContainerClass()} mt-2`}>
-                  <Markdown part={createTextPartForMarkdown()} isDark={isDark()} size={isAssistantMessage() ? "tight" : "base"} />
-                </div>
-              </Show>
-            </div>
-          </div>
-        </Show>
-      </Match>
+
     </Switch>
   )
 }

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

@@ -1,707 +0,0 @@
-import { For, Show, createSignal, createEffect, createMemo, onCleanup } from "solid-js"
-import type { Message, MessageDisplayParts, SDKPart, MessageInfo, ClientPart } from "../types/message"
-
-type ToolCallPart = Extract<ClientPart, { type: "tool" }>
-
-// Import ToolState types from SDK
-type ToolState = import("@opencode-ai/sdk").ToolState
-type ToolStateRunning = import("@opencode-ai/sdk").ToolStateRunning  
-type ToolStateCompleted = import("@opencode-ai/sdk").ToolStateCompleted
-type ToolStateError = import("@opencode-ai/sdk").ToolStateError
-
-// Type guards
-function isToolStateRunning(state: ToolState): state is ToolStateRunning {
-  return state.status === "running"
-}
-
-function isToolStateCompleted(state: ToolState): state is ToolStateCompleted {
-  return state.status === "completed"
-}
-
-function isToolStateError(state: ToolState): state is ToolStateError {
-  return state.status === "error"
-}
-
-// Type guard to check if a part is a tool part
-function isToolPart(part: ClientPart): part is ToolCallPart {
-  return part.type === "tool"
-}
-import MessageItem from "./message-item"
-import ToolCall from "./tool-call"
-import { sseManager } from "../lib/sse-manager"
-import Kbd from "./kbd"
-import { useConfig } from "../stores/preferences"
-import { getSessionInfo, computeDisplayParts, sessions, setActiveSession, setActiveParentSession } from "../stores/sessions"
-import { setActiveInstanceId } from "../stores/instances"
-
-const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
-const SCROLL_OFFSET = 64
-const SCROLL_DIRECTION_THRESHOLD = 10
-
-interface TaskSessionLocation {
-  sessionId: string
-  instanceId: string
-  parentId: string | null
-}
-
-const messageScrollState = new Map<string, { scrollTop: number; autoScroll: boolean }>()
-
-function findTaskSessionLocation(sessionId: string): TaskSessionLocation | null {
-  if (!sessionId) return null
-  const allSessions = sessions()
-  for (const [instanceId, sessionMap] of allSessions) {
-    const session = sessionMap?.get(sessionId)
-    if (session) {
-      return {
-        sessionId: session.id,
-        instanceId,
-        parentId: session.parentId ?? null,
-      }
-    }
-  }
-  return null
-}
-
-function navigateToTaskSession(location: TaskSessionLocation) {
-  setActiveInstanceId(location.instanceId)
-  const parentToActivate = location.parentId ?? location.sessionId
-  setActiveParentSession(location.instanceId, parentToActivate)
-  if (location.parentId) {
-    setActiveSession(location.instanceId, location.sessionId)
-  }
-}
-
-// Format tokens like TUI (e.g., "110K", "1.2M")
-function formatTokens(tokens: number): string {
-  if (tokens >= 1000000) {
-    return `${(tokens / 1000000).toFixed(1)}M`
-  } else if (tokens >= 1000) {
-    return `${(tokens / 1000).toFixed(0)}K`
-  }
-  return tokens.toString()
-}
-
-// Format session info for the session view header
-function formatSessionInfo(usageTokens: number, contextWindow: number, usagePercent: number | null): string {
-  if (contextWindow > 0) {
-    const windowStr = formatTokens(contextWindow)
-    const usageStr = formatTokens(usageTokens)
-    const percent = usagePercent ?? Math.min(100, Math.max(0, Math.round((usageTokens / contextWindow) * 100)))
-    return `${usageStr} of ${windowStr} (${percent}%)`
-  }
-
-  return formatTokens(usageTokens)
-}
-
-interface MessageStreamProps {
-  instanceId: string
-  sessionId: string
-  messages: Message[]
-  messagesInfo?: Map<string, MessageInfo>
-  revert?: {
-    messageID: string
-    partID?: string
-    snapshot?: string
-    diff?: string
-  }
-  loading?: boolean
-  onRevert?: (messageId: string) => void
-  onFork?: (messageId?: string) => void
-}
-
-interface MessageDisplayItem {
-  type: "message"
-  message: Message
-  combinedParts: ClientPart[]
-  isQueued: boolean
-  messageInfo?: MessageInfo
-}
-
-interface ToolDisplayItem {
-  type: "tool"
-  key: string
-  toolPart: ToolCallPart
-  messageInfo?: MessageInfo
-  messageId: string
-  messageVersion: number
-  partVersion: number
-}
-
-type DisplayItem = MessageDisplayItem | ToolDisplayItem
-
-interface MessageCacheEntry {
-  message: Message
-  version: number
-  showThinking: boolean
-  isQueued: boolean
-  messageInfo?: MessageInfo
-  displayParts: MessageDisplayParts
-  item: MessageDisplayItem
-}
-
-interface ToolCacheEntry {
-  toolPart: ClientPart
-  messageInfo?: MessageInfo
-  signature: string
-  contentKey: string
-  item: ToolDisplayItem
-}
-
-
-
-interface SessionCache {
-  messageItemCache: Map<string, MessageCacheEntry>
-  toolItemCache: Map<string, ToolCacheEntry>
-}
-
-const sessionCaches = new Map<string, SessionCache>()
-
-function getSessionCache(instanceId: string, sessionId: string): SessionCache {
-  const key = `${instanceId}:${sessionId}`
-  let cache = sessionCaches.get(key)
-  if (!cache) {
-    cache = {
-      messageItemCache: new Map(),
-      toolItemCache: new Map(),
-    }
-    sessionCaches.set(key, cache)
-  }
-  return cache
-}
-
-export default function MessageStream(props: MessageStreamProps) {
-  const { preferences } = useConfig()
-  let containerRef: HTMLDivElement | undefined
-  const [autoScroll, setAutoScroll] = createSignal(true)
-  const [showScrollBottomButton, setShowScrollBottomButton] = createSignal(false)
-  const [showScrollTopButton, setShowScrollTopButton] = createSignal(false)
-
-  const sessionCache = getSessionCache(props.instanceId, props.sessionId)
-  let messageItemCache = sessionCache.messageItemCache
-  let toolItemCache = sessionCache.toolItemCache
-  let scrollAnimationFrame: number | null = null
-  let lastKnownScrollTop = 0
-
-  const makeScrollKey = (instanceId: string, sessionId: string) => `${instanceId}:${sessionId}`
-
-  const scrollStateKey = () => makeScrollKey(props.instanceId, props.sessionId)
-  const connectionStatus = () => sseManager.getStatus(props.instanceId)
-
-  function createToolSignature(message: Message, toolPart: ClientPart, toolIndex: number, messageInfo?: MessageInfo): string {
-    const messageId = message.id
-    const partId = typeof toolPart?.id === "string" ? toolPart.id : `${messageId}-tool-${toolIndex}`
-    return `${messageId}:${partId}`
-  }
-
-  function createToolContentKey(toolPart: ClientPart, messageInfo?: MessageInfo): string {
-    const state = isToolPart(toolPart) ? toolPart.state : undefined
-    const version = typeof toolPart?.version === "number" ? toolPart.version : 0
-    const status = state?.status ?? "unknown"
-    return `${toolPart.id}:${version}:${status}`
-  }
-
-  const sessionInfo = createMemo(() =>
-    getSessionInfo(props.instanceId, props.sessionId) ?? {
-      tokens: 0,
-      cost: 0,
-      contextWindow: 0,
-      isSubscriptionModel: false,
-      contextUsageTokens: 0,
-      contextUsagePercent: null,
-    },
-  )
-
-  const formattedSessionInfo = createMemo(() => {
-    const info = sessionInfo()
-    return formatSessionInfo(info.contextUsageTokens, info.contextWindow, info.contextUsagePercent)
-  })
-
-  function isNearBottom(element: HTMLDivElement, offset = SCROLL_OFFSET) {
-    const { scrollTop, scrollHeight, clientHeight } = element
-    const distance = scrollHeight - (scrollTop + clientHeight)
-    return distance <= offset
-  }
-
-  function isNearTop(element: HTMLDivElement, offset = SCROLL_OFFSET) {
-    return element.scrollTop <= offset
-  }
-
-  function scrollToBottom(options: { smooth?: boolean } = {}) {
-    if (!containerRef) return
-
-    const behavior = options.smooth ? "smooth" : "auto"
-
-    requestAnimationFrame(() => {
-      if (!containerRef) return
-      containerRef.scrollTo({ top: containerRef.scrollHeight, behavior })
-      setAutoScroll(true)
-      updateScrollIndicators(containerRef)
-    })
-  }
-
-
-  function scrollToTop(options: { smooth?: boolean } = {}) {
-    if (!containerRef) return
-
-    const behavior = options.smooth ? "smooth" : "auto"
-    setAutoScroll(false)
-
-    requestAnimationFrame(() => {
-      if (!containerRef) return
-      containerRef.scrollTo({ top: 0, behavior })
-      setShowScrollTopButton(false)
-      updateScrollIndicators(containerRef)
-    })
-  }
-
-  function handleScroll(event: Event) {
-    if (!containerRef) return
-
-    if (scrollAnimationFrame !== null) {
-      cancelAnimationFrame(scrollAnimationFrame)
-    }
-
-    const isUserScroll = event.isTrusted
-
-    scrollAnimationFrame = requestAnimationFrame(() => {
-      if (!containerRef) return
-
-      const currentScrollTop = containerRef.scrollTop
-      const movingUp = currentScrollTop < lastKnownScrollTop - SCROLL_DIRECTION_THRESHOLD
-      lastKnownScrollTop = currentScrollTop
-
-      const atBottom = isNearBottom(containerRef)
-
-      if (isUserScroll) {
-        if (movingUp && !atBottom && autoScroll()) {
-          setAutoScroll(false)
-        } else if (!movingUp && atBottom && !autoScroll()) {
-          setAutoScroll(true)
-        }
-      }
-
-      updateScrollIndicators(containerRef)
-      scrollAnimationFrame = null
-    })
-  }
-
-  const messageView = createMemo(() => {
-    const showThinking = preferences().showThinkingBlocks
-
-    const items: DisplayItem[] = []
-    const newMessageCache = new Map<string, MessageCacheEntry>()
-    const newToolCache = new Map<string, ToolCacheEntry>()
-    const tokenSegments: string[] = []
-
-    let lastAssistantIndex = -1
-    for (let i = props.messages.length - 1; i >= 0; i--) {
-      if (props.messages[i].type === "assistant") {
-        lastAssistantIndex = i
-        break
-      }
-    }
-
-    tokenSegments.push(`count:${props.messages.length}`)
-    tokenSegments.push(`revert:${props.revert?.messageID ?? ""}`)
-    tokenSegments.push(`thinking:${showThinking ? 1 : 0}`)
-
-    for (let index = 0; index < props.messages.length; index++) {
-      const message = props.messages[index]
-      const messageInfo = props.messagesInfo?.get(message.id)
-
-      if (props.revert?.messageID && message.id === props.revert.messageID) {
-        break
-      }
-
-      tokenSegments.push(`${message.id}:${message.version ?? 0}:${message.status}:${message.parts.length}`)
-
-      const baseDisplayParts = message.displayParts
-      const displayParts: MessageDisplayParts =
-        !baseDisplayParts || baseDisplayParts.showThinking !== showThinking
-          ? computeDisplayParts(message, showThinking)
-          : (baseDisplayParts as MessageDisplayParts)
-
-      const combinedParts = displayParts.combined
-      const version = message.version ?? 0
-      const isQueued = message.type === "user" && (lastAssistantIndex === -1 || index > lastAssistantIndex)
-
-      const hasRenderableContent =
-        message.type !== "assistant" ||
-        combinedParts.length > 0 ||
-        Boolean(messageInfo && messageInfo.role === "assistant" && messageInfo.error) ||
-        message.status === "error"
-
-      if (hasRenderableContent) {
-        const cacheEntry = messageItemCache.get(message.id)
-        if (
-          cacheEntry &&
-          cacheEntry.version === version &&
-          cacheEntry.showThinking === showThinking &&
-          cacheEntry.isQueued === isQueued &&
-          cacheEntry.messageInfo === messageInfo
-        ) {
-          cacheEntry.displayParts = displayParts
-          cacheEntry.version = version
-          cacheEntry.showThinking = showThinking
-          cacheEntry.isQueued = isQueued
-          cacheEntry.messageInfo = messageInfo
-          cacheEntry.item.message = message
-          cacheEntry.item.combinedParts = combinedParts
-          cacheEntry.item.isQueued = isQueued
-          cacheEntry.item.messageInfo = messageInfo
-          newMessageCache.set(message.id, cacheEntry)
-          items.push(cacheEntry.item)
-        } else {
-          const messageItem: MessageDisplayItem = {
-            type: "message",
-            message,
-            combinedParts,
-            isQueued,
-            messageInfo,
-          }
-          newMessageCache.set(message.id, {
-            message,
-            version,
-            showThinking,
-            isQueued,
-            messageInfo,
-            displayParts,
-            item: messageItem,
-          })
-          items.push(messageItem)
-        }
-      }
-
-      const toolParts = displayParts.tool.filter(isToolPart)
-      for (let toolIndex = 0; toolIndex < toolParts.length; toolIndex++) {
-        const toolPart = toolParts[toolIndex]
-        const originalIndex = displayParts.tool.indexOf(toolPart)
-        const toolKey = toolPart?.id || `${message.id}-tool-${originalIndex}`
-        const messageVersion = typeof message.version === "number" ? message.version : 0
-        const partVersion = typeof toolPart?.version === "number" ? toolPart.version : 0
-
-        const toolSignature = createToolSignature(message, toolPart, originalIndex, messageInfo)
-        const contentKey = createToolContentKey(toolPart, messageInfo)
-        tokenSegments.push(`tool:${toolKey}:${partVersion}`)
-        const toolEntry = toolItemCache.get(toolKey)
-
-        if (toolEntry && toolEntry.signature === toolSignature) {
-          if (toolEntry.contentKey !== contentKey) {
-            const updatedItem: ToolDisplayItem = {
-              ...toolEntry.item,
-              toolPart,
-              messageInfo,
-              messageId: message.id,
-              messageVersion,
-              partVersion,
-            }
-            toolEntry.toolPart = toolPart
-            toolEntry.messageInfo = messageInfo
-            toolEntry.signature = toolSignature
-            toolEntry.contentKey = contentKey
-            toolEntry.item = updatedItem
-            console.debug("[ToolCall] update", toolKey, toolPart.state?.status)
-            newToolCache.set(toolKey, toolEntry)
-            items.push(updatedItem)
-          } else {
-            const cachedItem = toolEntry.item
-            cachedItem.toolPart = toolPart
-            cachedItem.messageInfo = messageInfo
-            cachedItem.messageId = message.id
-            cachedItem.messageVersion = messageVersion
-            cachedItem.partVersion = partVersion
-            toolEntry.toolPart = toolPart
-            toolEntry.messageInfo = messageInfo
-            newToolCache.set(toolKey, toolEntry)
-            items.push(cachedItem)
-          }
-        } else {
-          const toolItem: ToolDisplayItem = {
-            type: "tool",
-            key: toolKey,
-            toolPart,
-            messageInfo,
-            messageId: message.id,
-            messageVersion,
-            partVersion,
-          }
-          console.debug("[ToolCall] create", toolKey, toolPart.state?.status)
-          newToolCache.set(toolKey, { toolPart, messageInfo, signature: toolSignature, contentKey, item: toolItem })
-          items.push(toolItem)
-        }
-      }
-    }
-
-    messageItemCache = newMessageCache
-    toolItemCache = newToolCache
-    sessionCache.messageItemCache = messageItemCache
-    sessionCache.toolItemCache = toolItemCache
-
-    tokenSegments.push(`items:${items.length}`)
-
-    if (items.length > 0) {
-      const tail = items[items.length - 1]
-      if (tail.type === "message") {
-        tokenSegments.push(`tail:${tail.message.id}:${tail.message.version ?? 0}`)
-      } else {
-        tokenSegments.push(`tail:${tail.key}`)
-      }
-    }
-
-    return { items, token: tokenSegments.join("|") }
-  })
-
-  const displayItems = () => messageView().items
-  const changeToken = () => messageView().token
-
-  function updateScrollIndicators(element: HTMLDivElement) {
-    const itemsLength = displayItems().length
-    setShowScrollBottomButton(!isNearBottom(element) && itemsLength > 0)
-    setShowScrollTopButton(!isNearTop(element) && itemsLength > 0)
-    persistScrollState()
-  }
-
-  function getActiveScrollKey() {
-    return containerRef?.dataset.scrollKey || scrollStateKey()
-  }
-
-  function persistScrollState() {
-    if (!containerRef) return
-    const key = getActiveScrollKey()
-    messageScrollState.set(key, {
-      scrollTop: containerRef.scrollTop,
-      autoScroll: autoScroll(),
-    })
-  }
-
-  createEffect(() => {
-    const key = scrollStateKey()
-    if (containerRef) {
-      containerRef.dataset.scrollKey = key
-    }
-    const savedState = messageScrollState.get(key)
-    const shouldAutoScroll = savedState?.autoScroll ?? true
-
-    setAutoScroll(shouldAutoScroll)
-
-    requestAnimationFrame(() => {
-      if (!containerRef) return
-
-      if (savedState) {
-        if (shouldAutoScroll) {
-          scrollToBottom({ smooth: false })
-        } else {
-          const maxScrollTop = Math.max(containerRef.scrollHeight - containerRef.clientHeight, 0)
-          containerRef.scrollTop = Math.min(savedState.scrollTop, maxScrollTop)
-          updateScrollIndicators(containerRef)
-        }
-      } else {
-        scrollToBottom({ smooth: false })
-      }
-    })
-
-    onCleanup(() => {
-      if (containerRef) {
-        messageScrollState.set(key, {
-          scrollTop: containerRef.scrollTop,
-          autoScroll: autoScroll(),
-        })
-        if (containerRef.dataset.scrollKey === key) {
-          delete containerRef.dataset.scrollKey
-        }
-      }
-    })
-  })
-
-  let previousToken: string | undefined
-  createEffect(() => {
-    const token = changeToken()
-    const shouldScroll = autoScroll()
-
-    if (!token || token === previousToken) {
-      return
-    }
-
-    previousToken = token
-
-    if (!shouldScroll) {
-      return
-    }
-
-    scrollToBottom()
-  })
-
-  createEffect(() => {
-    if (displayItems().length === 0) {
-      setShowScrollBottomButton(false)
-      setShowScrollTopButton(false)
-      setAutoScroll(true)
-      persistScrollState()
-    }
-  })
-
-  onCleanup(() => {
-    if (scrollAnimationFrame !== null) {
-      cancelAnimationFrame(scrollAnimationFrame)
-    }
-  })
-
-  return (
-    <div class="message-stream-container">
-      <div class="connection-status">
-        <div class="connection-status-text connection-status-info flex items-center gap-2 text-sm font-medium">
-          <span>{formattedSessionInfo()}</span>
-        </div>
-        <div class="connection-status-text connection-status-shortcut flex items-center gap-2 text-sm font-medium">
-          <span>Command Palette</span>
-          <Kbd shortcut="cmd+shift+p" />
-        </div>
-        <div class="connection-status-meta flex items-center justify-end gap-3">
-          <Show when={connectionStatus() === "connected"}>
-            <span class="status-indicator connected">
-              <span class="status-dot" />
-              Connected
-            </span>
-          </Show>
-          <Show when={connectionStatus() === "connecting"}>
-            <span class="status-indicator connecting">
-              <span class="status-dot" />
-              Connecting...
-            </span>
-          </Show>
-          <Show when={connectionStatus() === "error" || connectionStatus() === "disconnected"}>
-            <span class="status-indicator disconnected">
-              <span class="status-dot" />
-              Disconnected
-            </span>
-          </Show>
-        </div>
-      </div>
-      <div ref={containerRef} class="message-stream" onScroll={handleScroll}>
-        <Show when={!props.loading && displayItems().length === 0}>
-          <div class="empty-state">
-            <div class="empty-state-content">
-              <div class="flex flex-col items-center gap-3 mb-6">
-                <img src={codeNomadLogo} alt="CodeNomad logo" class="h-48 w-auto" loading="lazy" />
-                <h1 class="text-3xl font-semibold text-primary">CodeNomad</h1>
-              </div>
-              <h3>Start a conversation</h3>
-              <p>Type a message below or open the Command Palette:</p>
-              <ul>
-                <li>
-                  <span>Command Palette</span>
-                  <Kbd shortcut="cmd+shift+p" class="ml-2" />
-                </li>
-                <li>Ask about your codebase</li>
-                <li>
-                  Attach files with <code>@</code>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </Show>
-
-        <Show when={props.loading}>
-          <div class="loading-state">
-            <div class="spinner" />
-            <p>Loading messages...</p>
-          </div>
-        </Show>
-
-        <For each={displayItems()} fallback={null}>
-          {(item) => {
-            if (item.type === "message") {
-              return (
-                <MessageItem
-                  message={item.message}
-                  messageInfo={item.messageInfo}
-                  instanceId={props.instanceId}
-                  sessionId={props.sessionId}
-                  isQueued={item.isQueued}
-                  parts={item.combinedParts}
-                  onRevert={props.onRevert}
-                  onFork={props.onFork}
-                />
-
-              )
-            }
-
-            const toolPart = item.toolPart
-
-            const toolState = toolPart.state
-            const hasToolState = isToolStateRunning(toolState) || isToolStateCompleted(toolState) || isToolStateError(toolState)
-            const taskSessionId =
-              hasToolState && typeof toolState?.metadata?.sessionId === "string"
-                ? toolState.metadata.sessionId
-                : ""
-            const taskLocation = taskSessionId ? findTaskSessionLocation(taskSessionId) : null
-
-            const handleGoToTaskSession = (event: Event) => {
-              event.preventDefault()
-              event.stopPropagation()
-              if (!taskLocation) return
-              navigateToTaskSession(taskLocation)
-            }
-
-            return (
-              <div class="tool-call-message" data-key={item.key}>
-                <div class="tool-call-header-label">
-                  <div class="tool-call-header-meta">
-                    <span class="tool-call-icon">🔧</span>
-                    <span>Tool Call</span>
-                    <span class="tool-name">{toolPart?.tool || "unknown"}</span>
-                  </div>
-                  <Show when={taskSessionId}>
-                    <button
-                      class="tool-call-header-button"
-                      type="button"
-                      disabled={!taskLocation}
-                      onClick={handleGoToTaskSession}
-                      title={!taskLocation ? "Session not available yet" : "Go to session"}
-                    >
-                      Go to Session
-                    </button>
-                  </Show>
-                </div>
-                <ToolCall
-                  toolCall={toolPart}
-                  toolCallId={item.key}
-                  messageId={item.messageId}
-                  messageVersion={item.messageVersion}
-                  partVersion={item.partVersion}
-                  instanceId={props.instanceId}
-                  sessionId={props.sessionId}
-                />
-              </div>
-            )
-          }}
-        </For>
-      </div>
-
-      <Show when={showScrollTopButton() || showScrollBottomButton()}>
-        <div class="message-scroll-button-wrapper">
-          <Show when={showScrollTopButton()}>
-            <button
-              type="button"
-              class="message-scroll-button"
-              onClick={() => scrollToTop({ smooth: true })}
-              aria-label="Scroll to first message"
-            >
-              <span class="message-scroll-icon" aria-hidden="true">↑</span>
-            </button>
-          </Show>
-          <Show when={showScrollBottomButton()}>
-            <button
-              type="button"
-              class="message-scroll-button"
-              onClick={() => scrollToBottom({ smooth: true })}
-              aria-label="Scroll to latest message"
-            >
-              <span class="message-scroll-icon" aria-hidden="true">↓</span>
-            </button>
-          </Show>
-        </div>
-      </Show>
-    </div>
-  )
-}

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

@@ -3,7 +3,6 @@ import { createEffect, createMemo, createSignal } from "solid-js"
 import { providers, fetchProviders } from "../stores/sessions"
 import { ChevronDown } from "lucide-solid"
 import type { Model } from "../types/session"
-import Kbd from "./kbd"
 
 interface ModelSelectorProps {
   instanceId: string
@@ -132,9 +131,6 @@ export default function ModelSelector(props: ModelSelectorProps) {
           </Combobox.Content>
         </Combobox.Portal>
       </Combobox>
-      <span class="hint sidebar-selector-hint">
-        <Kbd shortcut="cmd+shift+m" />
-      </span>
     </div>
   )
 }

packages/ui/src/components/opencode-binary-selector.tsx

@@ -3,6 +3,7 @@ import { FolderOpen, Trash2, Check, AlertCircle, Loader2, Plus } from "lucide-so
 import { useConfig } from "../stores/preferences"
 import { serverApi } from "../lib/api-client"
 import FileSystemBrowserDialog from "./filesystem-browser-dialog"
+import { openNativeFileDialog, supportsNativeDialogs } from "../lib/native/native-functions"
 
 interface BinaryOption {
   path: string
@@ -32,8 +33,10 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
   const [versionInfo, setVersionInfo] = createSignal<Map<string, string>>(new Map<string, string>())
   const [validatingPaths, setValidatingPaths] = createSignal<Set<string>>(new Set<string>())
   const [isBinaryBrowserOpen, setIsBinaryBrowserOpen] = createSignal(false)
-
+  const nativeDialogsAvailable = supportsNativeDialogs()
+ 
   const binaries = () => opencodeBinaries()
+
   const lastUsedBinary = () => preferences().lastUsedBinary
 
   const customBinaries = createMemo(() => binaries().filter((binary) => binary.path !== "opencode"))
@@ -128,9 +131,19 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
     }
   }
 
-  function handleBrowseBinary() {
+  async function handleBrowseBinary() {
     if (props.disabled) return
     setValidationError(null)
+    if (nativeDialogsAvailable) {
+      const selected = await openNativeFileDialog({
+        title: "Select OpenCode Binary",
+      })
+      if (selected) {
+        setCustomPath(selected)
+        void handleValidateAndAdd(selected)
+      }
+      return
+    }
     setIsBinaryBrowserOpen(true)
   }
  
@@ -245,7 +258,7 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
 
           <button
             type="button"
-            onClick={handleBrowseBinary}
+            onClick={() => void handleBrowseBinary()}
             disabled={props.disabled}
             class="selector-button selector-button-secondary w-full flex items-center justify-center gap-2"
           >

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

@@ -7,9 +7,9 @@ import { createFileAttachment, createTextAttachment, createAgentAttachment } fro
 import type { Attachment } from "../types/attachment"
 import type { Agent } from "../types/session"
 import Kbd from "./kbd"
-import HintRow from "./hint-row"
 import { getActiveInstance } from "../stores/instances"
 import { agents, getSessionDraftPrompt, setSessionDraftPrompt, clearSessionDraftPrompt } from "../stores/sessions"
+import { showAlertDialog } from "../stores/alerts"
 
 interface PromptInputProps {
   instanceId: string
@@ -24,6 +24,7 @@ interface PromptInputProps {
 export default function PromptInput(props: PromptInputProps) {
   const [prompt, setPromptInternal] = createSignal("")
   const [history, setHistory] = createSignal<string[]>([])
+  const HISTORY_LIMIT = 100
   const [historyIndex, setHistoryIndex] = createSignal(-1)
   const [historyDraft, setHistoryDraft] = createSignal<string | null>(null)
   const [, setIsFocused] = createSignal(false)
@@ -498,11 +499,27 @@ export default function PromptInput(props: PromptInputProps) {
   async function handleSend() {
     const text = prompt().trim()
     const currentAttachments = attachments()
-    if (props.disabled || !text) return
+    if (props.disabled || (!text && currentAttachments.length === 0)) return
 
     const resolvedPrompt = resolvePastedPlaceholders(text, currentAttachments)
     const isShellMode = mode() === "shell"
 
+    const refreshHistory = async () => {
+      try {
+        await addToHistory(props.instanceFolder, resolvedPrompt)
+        setHistory((prev) => {
+          const next = [resolvedPrompt, ...prev]
+          if (next.length > HISTORY_LIMIT) {
+            next.length = HISTORY_LIMIT
+          }
+          return next
+        })
+        setHistoryIndex(-1)
+      } catch (historyError) {
+        console.error("Failed to update prompt history:", historyError)
+      }
+    }
+
     clearPrompt()
     clearAttachments(props.instanceId, props.sessionId)
     setIgnoredAtPositions(new Set<number>())
@@ -511,10 +528,6 @@ export default function PromptInput(props: PromptInputProps) {
     setHistoryDraft(null)
 
     try {
-      await addToHistory(props.instanceFolder, resolvedPrompt)
-      const updated = await getHistory(props.instanceFolder)
-      setHistory(updated)
-      setHistoryIndex(-1)
       if (isShellMode) {
         if (props.onRunShell) {
           await props.onRunShell(resolvedPrompt)
@@ -522,11 +535,16 @@ export default function PromptInput(props: PromptInputProps) {
           await props.onSend(resolvedPrompt, [])
         }
       } else {
-        await props.onSend(text, currentAttachments)
+        await props.onSend(resolvedPrompt, currentAttachments)
       }
+      void refreshHistory()
     } catch (error) {
       console.error("Failed to send message:", error)
-      alert("Failed to send message: " + (error instanceof Error ? error.message : String(error)))
+      showAlertDialog("Failed to send message", {
+        title: "Send failed",
+        detail: error instanceof Error ? error.message : String(error),
+        variant: "error",
+      })
     } finally {
       textareaRef?.focus()
     }
@@ -758,6 +776,7 @@ export default function PromptInput(props: PromptInputProps) {
   }
 
   const shellHint = () => (mode() === "shell" ? { key: "Esc", text: "to exit shell mode" } : { key: "!", text: "for shell mode" })
+  const shouldShowOverlay = () => prompt().length === 0
 
   const instance = () => getActiveInstance()
 
@@ -865,28 +884,62 @@ export default function PromptInput(props: PromptInputProps) {
               </For>
             </div>
           </Show>
-          <textarea
-            ref={textareaRef}
-            class={`prompt-input ${mode() === "shell" ? "shell-mode" : ""}`}
-            placeholder={
-              mode() === "shell"
-                ? "Run a shell command (Esc to exit)..."
-                : "Type your message, @file, @agent, or paste images and text..."
-            }
-            value={prompt()}
-            onInput={handleInput}
-            onKeyDown={handleKeyDown}
-            onPaste={handlePaste}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
-            disabled={props.disabled}
-            rows={4}
-            style={attachments().length > 0 ? { "padding-top": "8px" } : {}}
-            spellcheck={false}
-            autocorrect="off"
-            autoCapitalize="off"
-            autocomplete="off"
-          />
+          <div class="prompt-input-field">
+            <textarea
+              ref={textareaRef}
+              class={`prompt-input ${mode() === "shell" ? "shell-mode" : ""}`}
+              placeholder={
+                mode() === "shell"
+                  ? "Run a shell command (Esc to exit)..."
+                  : "Type your message, @file, @agent, or paste images and text..."
+              }
+              value={prompt()}
+              onInput={handleInput}
+              onKeyDown={handleKeyDown}
+              onPaste={handlePaste}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              disabled={props.disabled}
+              rows={4}
+              style={attachments().length > 0 ? { "padding-top": "8px" } : {}}
+              spellcheck={false}
+              autocorrect="off"
+              autoCapitalize="off"
+              autocomplete="off"
+            />
+            <Show when={shouldShowOverlay()}>
+              <div class={`prompt-input-overlay ${mode() === "shell" ? "shell-mode" : ""}`}>
+                <Show
+                  when={props.escapeInDebounce}
+                  fallback={
+                    <>
+                      <span class="prompt-overlay-text">
+                        <Kbd>Enter</Kbd> for new line • <Kbd shortcut="cmd+enter" /> to send • <Kbd>@</Kbd> for files/agents • <Kbd>↑↓</Kbd> for history
+                      </span>
+                      <Show when={attachments().length > 0}>
+                        <span class="prompt-overlay-text prompt-overlay-muted">• {attachments().length} file(s) attached</span>
+                      </Show>
+                      <span class="prompt-overlay-text">
+                        • <Kbd>{shellHint().key}</Kbd> {shellHint().text}
+                      </span>
+                      <Show when={mode() === "shell"}>
+                        <span class="prompt-overlay-shell-active">Shell mode active</span>
+                      </Show>
+                    </>
+                  }
+                >
+                  <>
+                    <span class="prompt-overlay-text prompt-overlay-warning">
+                      Press <Kbd>Esc</Kbd> again to abort session
+                    </span>
+                    <Show when={mode() === "shell"}>
+                      <span class="prompt-overlay-shell-active">Shell mode active</span>
+                    </Show>
+                  </>
+                </Show>
+              </div>
+            </Show>
+          </div>
         </div>
 
         <button
@@ -906,33 +959,6 @@ export default function PromptInput(props: PromptInputProps) {
           </Show>
         </button>
       </div>
-      <div class="prompt-input-hints">
-        <div class="flex justify-between w-full gap-4">
-          <HintRow>
-            <Show
-              when={props.escapeInDebounce}
-              fallback={
-                <>
-                  <Kbd>Enter</Kbd> for new line • <Kbd shortcut="cmd+enter" /> to send • <Kbd>@</Kbd> for files/agents • <Kbd>↑↓</Kbd> for history
-                  <Show when={attachments().length > 0}>
-                    <span class="ml-2 text-xs" style="color: var(--text-muted);">• {attachments().length} file(s) attached</span>
-                  </Show>
-                  <span class="ml-2">
-                    • <Kbd>{shellHint().key}</Kbd> {shellHint().text}
-                  </span>
-                </>
-              }
-            >
-              <span class="font-medium" style="color: var(--status-warning);">
-                Press <Kbd>Esc</Kbd> again to abort session
-              </span>
-            </Show>
-          </HintRow>
-          <Show when={mode() === "shell"}>
-            <HintRow>Shell mode active</HintRow>
-          </Show>
-        </div>
-      </div>
     </div>
   )
 }

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

@@ -24,9 +24,9 @@ interface SessionListProps {
 }
 
 const MIN_WIDTH = 200
-const MAX_WIDTH = 500
-const DEFAULT_WIDTH = 280
-const STORAGE_KEY = "opencode-session-sidebar-width"
+const MAX_WIDTH = 520
+const DEFAULT_WIDTH = 360
+const STORAGE_KEY = "opencode-session-sidebar-width-v7"
 
 function formatSessionStatus(status: SessionStatus): string {
   switch (status) {

packages/ui/src/components/session/context-usage-panel.tsx

@@ -7,54 +7,72 @@ interface ContextUsagePanelProps {
   sessionId: string
 }
 
+const chipClass = "inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary"
+const chipLabelClass = "uppercase text-[10px] tracking-wide text-primary/70"
+const headingClass = "text-xs font-semibold text-primary/70 uppercase tracking-wide"
+
 const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
   const info = createMemo(
     () =>
       getSessionInfo(props.instanceId, props.sessionId) ?? {
-        tokens: 0,
         cost: 0,
         contextWindow: 0,
         isSubscriptionModel: false,
-        contextUsageTokens: 0,
-        contextUsagePercent: null,
+        inputTokens: 0,
+        outputTokens: 0,
+        reasoningTokens: 0,
+        actualUsageTokens: 0,
+        modelOutputLimit: 0,
+        contextAvailableTokens: null,
       },
   )
 
-  const tokens = createMemo(() => info().tokens)
-  const contextUsageTokens = createMemo(() => info().contextUsageTokens ?? 0)
-  const contextWindow = createMemo(() => info().contextWindow)
-  const contextUsagePercent = createMemo(() => info().contextUsagePercent)
-
-  const costLabel = createMemo(() => {
-    if (info().isSubscriptionModel || info().cost <= 0) return "Included in plan"
-    return `$${info().cost.toFixed(2)} spent`
+  const inputTokens = createMemo(() => info().inputTokens ?? 0)
+  const outputTokens = createMemo(() => info().outputTokens ?? 0)
+  const actualUsageTokens = createMemo(() => info().actualUsageTokens ?? 0)
+  const availableTokens = createMemo(() => info().contextAvailableTokens)
+  const outputLimit = createMemo(() => info().modelOutputLimit ?? 0)
+  const costValue = createMemo(() => {
+    const value = info().isSubscriptionModel ? 0 : info().cost
+    return value > 0 ? value : 0
   })
 
+
+  const formatTokenValue = (value: number | null | undefined) => {
+    if (value === null || value === undefined) return "--"
+    return formatTokenTotal(value)
+  }
+
+  const costDisplay = createMemo(() => `$${costValue().toFixed(2)}`)
+
   return (
-    <div class="session-context-panel border-r border-base border-b px-3 py-3">
-      <div class="flex items-center justify-between gap-4">
-        <div>
-          <div class="text-xs font-semibold text-primary/70 uppercase tracking-wide">Tokens (last call)</div>
-          <div class="text-lg font-semibold text-primary">{formatTokenTotal(tokens())}</div>
+    <div class="session-context-panel border-r border-base border-b px-3 py-3 space-y-3">
+      <div class="flex flex-wrap items-center gap-2 text-xs text-primary/90">
+        <div class={headingClass}>Tokens</div>
+        <div class={chipClass}>
+          <span class={chipLabelClass}>Input</span>
+          <span class="font-semibold text-primary">{formatTokenTotal(inputTokens())}</span>
         </div>
-        <div class="text-xs text-primary/70 text-right leading-tight">{costLabel()}</div>
-      </div>
-      <div class="mt-4">
-        <div class="flex items-center justify-between mb-1">
-          <div class="text-xs font-semibold text-primary/70 uppercase tracking-wide">Context window usage</div>
-          <div class="text-sm font-medium text-primary">{contextUsagePercent() !== null ? `${contextUsagePercent()}%` : "--"}</div>
+        <div class={chipClass}>
+          <span class={chipLabelClass}>Output</span>
+          <span class="font-semibold text-primary">{formatTokenTotal(outputTokens())}</span>
         </div>
-        <div class="text-sm text-primary/90">
-          {contextWindow()
-            ? `${formatTokenTotal(contextUsageTokens())} of ${formatTokenTotal(contextWindow())}`
-            : "Window size unavailable"}
+        <div class={chipClass}>
+          <span class={chipLabelClass}>Cost</span>
+          <span class="font-semibold text-primary">{costDisplay()}</span>
         </div>
       </div>
-      <div class="mt-3 h-1.5 rounded-full bg-base relative overflow-hidden">
-        <div
-          class="absolute inset-y-0 left-0 rounded-full bg-accent-primary transition-[width]"
-          style={{ width: contextUsagePercent() === null ? "0%" : `${contextUsagePercent()}%` }}
-        />
+
+      <div class="flex flex-wrap items-center gap-2 text-xs text-primary/90">
+        <div class={headingClass}>Context</div>
+        <div class={chipClass}>
+          <span class={chipLabelClass}>Used</span>
+          <span class="font-semibold text-primary">{formatTokenTotal(actualUsageTokens())}</span>
+        </div>
+        <div class={chipClass}>
+          <span class={chipLabelClass}>Avail</span>
+          <span class="font-semibold text-primary">{formatTokenValue(availableTokens())}</span>
+        </div>
       </div>
     </div>
   )

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

@@ -1,11 +1,17 @@
-import { Show, createMemo, createEffect, onCleanup, type Component } from "solid-js"
+import { Show, createMemo, createEffect, type Component } from "solid-js"
 import type { Session } from "../../types/session"
 import type { Attachment } from "../../types/attachment"
 import type { ClientPart } from "../../types/message"
-import MessageStream from "../message-stream"
+import MessageStreamV2 from "../message-stream-v2"
+import { messageStoreBus } from "../../stores/message-v2/bus"
 import PromptInput from "../prompt-input"
 import { instances } from "../../stores/instances"
 import { loadMessages, sendMessage, forkSession, isSessionMessagesLoading, setActiveParentSession, setActiveSession, runShellCommand } from "../../stores/sessions"
+import { showAlertDialog } from "../../stores/alerts"
+
+function isTextPart(part: ClientPart): part is ClientPart & { type: "text"; text: string } {
+  return part?.type === "text" && typeof (part as any).text === "string"
+}
 
 interface SessionViewProps {
   sessionId: string
@@ -18,6 +24,7 @@ interface SessionViewProps {
 export const SessionView: Component<SessionViewProps> = (props) => {
   const session = () => props.activeSessions.get(props.sessionId)
   const messagesLoading = createMemo(() => isSessionMessagesLoading(props.instanceId, props.sessionId))
+  const messageStore = createMemo(() => messageStoreBus.getOrCreate(props.instanceId))
 
   createEffect(() => {
     const currentSession = session()
@@ -35,23 +42,21 @@ export const SessionView: Component<SessionViewProps> = (props) => {
   }
 
   function getUserMessageText(messageId: string): string | null {
-    const currentSession = session()
-    if (!currentSession) return null
-
-    const targetMessage = currentSession.messages.find((m) => m.id === messageId)
-    const targetInfo = currentSession.messagesInfo.get(messageId)
-    if (!targetMessage || targetInfo?.role !== "user") {
-      return null
+    const normalizedMessage = messageStore().getMessage(messageId)
+    if (normalizedMessage && normalizedMessage.role === "user") {
+      const parts = normalizedMessage.partIds
+        .map((partId) => normalizedMessage.parts[partId]?.data)
+        .filter((part): part is ClientPart => Boolean(part))
+      const textParts = parts.filter(isTextPart)
+      if (textParts.length > 0) {
+        return textParts.map((part) => part.text).join("\n")
+      }
     }
-
-    const textParts = targetMessage.parts.filter((p): p is ClientPart & { type: "text"; text: string } => p.type === "text")
-    if (textParts.length === 0) {
-      return null
-    }
-
-    return textParts.map((p) => p.text).join("\n")
+ 
+    return null
   }
 
+
   async function handleRevert(messageId: string) {
     const instance = instances().get(props.instanceId)
     if (!instance || !instance.client) return
@@ -73,7 +78,10 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       }
     } catch (error) {
       console.error("Failed to revert:", error)
-      alert("Failed to revert to message")
+      showAlertDialog("Failed to revert to message", {
+        title: "Revert failed",
+        variant: "error",
+      })
     }
   }
 
@@ -106,7 +114,10 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       }
     } catch (error) {
       console.error("Failed to fork session:", error)
-      alert("Failed to fork session")
+      showAlertDialog("Failed to fork session", {
+        title: "Fork failed",
+        variant: "error",
+      })
     }
   }
 
@@ -120,29 +131,30 @@ export const SessionView: Component<SessionViewProps> = (props) => {
         </div>
       }
     >
-      {(s) => (
-        <div class="session-view">
-          <MessageStream
-            instanceId={props.instanceId}
-            sessionId={s().id}
-            messages={s().messages || []}
-            messagesInfo={s().messagesInfo}
-            revert={s().revert}
-            loading={messagesLoading()}
-            onRevert={handleRevert}
-            onFork={handleFork}
-          />
+      {(sessionAccessor) => {
+        const activeSession = sessionAccessor()
+        if (!activeSession) return null
+        return (
+          <div class="session-view">
+            <MessageStreamV2
+              instanceId={props.instanceId}
+              sessionId={activeSession.id}
+              loading={messagesLoading()}
+              onRevert={handleRevert}
+              onFork={handleFork}
+            />
 
-          <PromptInput
-            instanceId={props.instanceId}
-            instanceFolder={props.instanceFolder}
-            sessionId={s().id}
-            onSend={handleSendMessage}
-            onRunShell={handleRunShell}
-            escapeInDebounce={props.escapeInDebounce}
-          />
-        </div>
-      )}
+            <PromptInput
+              instanceId={props.instanceId}
+              instanceFolder={props.instanceFolder}
+              sessionId={activeSession.id}
+              onSend={handleSendMessage}
+              onRunShell={handleRunShell}
+              escapeInDebounce={props.escapeInDebounce}
+            />
+          </div>
+        )
+      }}
     </Show>
   )
 }

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

@@ -1,15 +1,17 @@
 import { createSignal, Show, For, createEffect, createMemo, onCleanup } from "solid-js"
 import { isToolCallExpanded, toggleToolCallExpanded, setToolCallExpanded } from "../stores/tool-call-state"
+import { messageStoreBus } from "../stores/message-v2/bus"
 import { Markdown } from "./markdown"
 import { ToolCallDiffViewer } from "./diff-viewer"
 import { useTheme } from "../lib/theme"
 import { getLanguageFromPath } from "../lib/markdown"
 import { isRenderableDiffText } from "../lib/diff-utils"
-import { getToolRenderCache, setToolRenderCache } from "../lib/tool-render-cache"
+import { useGlobalCache } from "../lib/hooks/use-global-cache"
+import { useScrollCache } from "../lib/hooks/use-scroll-cache"
 import { useConfig } from "../stores/preferences"
 import type { DiffViewMode } from "../stores/preferences"
 import { sendPermissionResponse } from "../stores/instances"
-import type { TextPart, SDKPart, ClientPart } from "../types/message"
+import type { TextPart, SDKPart, ClientPart, RenderCache } from "../types/message"
 
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
 
@@ -33,46 +35,17 @@ function isToolStateError(state: ToolState): state is ToolStateError {
 }
 
 
-const toolScrollState = new Map<string, { scrollTop: number; atBottom: boolean }>()
+const TOOL_CALL_CACHE_SCOPE = "tool-call"
 
 function makeRenderCacheKey(
   toolCallId?: string | null,
   messageId?: string,
-  messageVersion?: number,
-  partVersion?: number,
+  partId?: string | null,
+  variant = "default",
 ) {
-  const suffix = `${messageVersion ?? 0}:${partVersion ?? 0}`
-  const keyBase = `${messageId}:${toolCallId}`
-  return `${keyBase}::${suffix}`
-}
-
-function updateScrollState(id: string, element: HTMLElement) {
-  if (!id) return
-  const distanceFromBottom = element.scrollHeight - (element.scrollTop + element.clientHeight)
-  const atBottom = distanceFromBottom <= 2
-  toolScrollState.set(id, { scrollTop: element.scrollTop, atBottom })
-}
-
-function restoreScrollState(id: string, element: HTMLElement) {
-  if (!id) return
-  const state = toolScrollState.get(id)
-  if (!state) {
-    requestAnimationFrame(() => {
-      element.scrollTop = element.scrollHeight
-      updateScrollState(id, element)
-    })
-    return
-  }
-
-  requestAnimationFrame(() => {
-    if (state.atBottom) {
-      element.scrollTop = element.scrollHeight
-    } else {
-      const maxScrollTop = Math.max(element.scrollHeight - element.clientHeight, 0)
-      element.scrollTop = Math.min(state.scrollTop, maxScrollTop)
-    }
-    updateScrollState(id, element)
-  })
+  const messageComponent = messageId ?? "unknown-message"
+  const toolCallComponent = partId ?? toolCallId ?? "unknown-tool-call"
+  return `${messageComponent}:${toolCallComponent}:${variant}`
 }
 
 
@@ -346,7 +319,36 @@ export default function ToolCall(props: ToolCallProps) {
   const { preferences, setDiffViewMode } = useConfig()
   const { isDark } = useTheme()
   const toolCallId = () => props.toolCallId || props.toolCall?.id || ""
-  const pendingPermission = createMemo(() => props.toolCall.pendingPermission)
+  const store = createMemo(() => messageStoreBus.getOrCreate(props.instanceId))
+
+  const cacheContext = createMemo(() => ({
+    toolCallId: toolCallId(),
+    messageId: props.messageId,
+    partId: props.toolCall?.id ?? null,
+  }))
+
+  const createVariantCache = (variant: string) =>
+    useGlobalCache({
+      instanceId: () => props.instanceId,
+      sessionId: () => props.sessionId,
+      scope: TOOL_CALL_CACHE_SCOPE,
+      key: () => {
+        const context = cacheContext()
+        return makeRenderCacheKey(context.toolCallId || undefined, context.messageId, context.partId, variant)
+      },
+    })
+
+  const diffCache = createVariantCache("diff")
+  const permissionDiffCache = createVariantCache("permission-diff")
+  const markdownCache = createVariantCache("markdown")
+  const permissionState = createMemo(() => store().getPermissionState(props.messageId, props.toolCall?.id))
+  const pendingPermission = createMemo(() => {
+    const state = permissionState()
+    if (state) {
+      return { permission: state.entry.permission, active: state.active }
+    }
+    return props.toolCall.pendingPermission
+  })
   const expanded = () => (pendingPermission() ? true : isToolCallExpanded(toolCallId()))
   const toolOutputDefaultExpanded = createMemo(() => (preferences().toolOutputExpansion || "expanded") === "expanded")
   const diagnosticsDefaultExpanded = createMemo(() => (preferences().diagnosticsExpansion || "expanded") === "expanded")
@@ -374,30 +376,49 @@ export default function ToolCall(props: ToolCallProps) {
 
   let scrollContainerRef: HTMLDivElement | undefined
   let toolCallRootRef: HTMLDivElement | undefined
- 
-  const handleScrollRendered = () => {
- 
-   const id = toolCallId()
 
-    if (!id || !scrollContainerRef) return
-    restoreScrollState(id, scrollContainerRef)
+  const scrollScopeId = createMemo(() => {
+    const id = toolCallId()
+    if (id) return id
+    const messageKey = props.messageId || "unknown"
+    const partKey = typeof props.partVersion === "number" ? props.partVersion : 0
+    return `${messageKey}:${partKey}`
+  })
+
+  const scrollCache = useScrollCache({
+    instanceId: () => props.instanceId,
+    sessionId: () => props.sessionId,
+    scope: () => `${TOOL_CALL_CACHE_SCOPE}:scroll:${scrollScopeId()}`,
+  })
+
+  const persistScrollSnapshot = (element?: HTMLElement | null) => {
+    if (!element) return
+    scrollCache.persist(element, { atBottomOffset: 2 })
+  }
+
+  const restoreScrollSnapshot = (element?: HTMLElement | null) => {
+    if (!element) return
+    scrollCache.restore(element, {
+      fallback: () => {
+        requestAnimationFrame(() => {
+          if (!element || !element.isConnected) return
+          element.scrollTop = element.scrollHeight
+          persistScrollSnapshot(element)
+        })
+      },
+    })
+  }
+
+  const handleScrollRendered = () => {
+    if (!scrollContainerRef) return
+    restoreScrollSnapshot(scrollContainerRef)
   }
 
   const initializeScrollContainer = (element: HTMLDivElement | null | undefined) => {
     const resolvedElement = element || undefined
     scrollContainerRef = resolvedElement
-    const id = toolCallId()
-    if (!resolvedElement || !id) return
-
-    if (!toolScrollState.has(id)) {
-      requestAnimationFrame(() => {
-        if (!scrollContainerRef || toolCallId() !== id) return
-        scrollContainerRef.scrollTop = scrollContainerRef.scrollHeight
-        updateScrollState(id, scrollContainerRef)
-      })
-    } else {
-      restoreScrollState(id, resolvedElement)
-    }
+    if (!resolvedElement) return
+    restoreScrollSnapshot(resolvedElement)
   }
 
   createEffect(() => {
@@ -426,16 +447,6 @@ export default function ToolCall(props: ToolCallProps) {
     }
   })
 
-  // Cleanup cache entry when component unmounts or toolCallId changes
-  createEffect(() => {
-    const id = toolCallId()
-    if (!id) return
-
-    onCleanup(() => {
-      toolScrollState.delete(id)
-    })
-  })
-
   createEffect(() => {
     if (props.toolCall?.tool !== "task") return
     const state = props.toolCall?.state
@@ -725,25 +736,20 @@ export default function ToolCall(props: ToolCallProps) {
     return renderMarkdownTool(toolName, state)
   }
 
-  function renderDiffTool(payload: DiffPayload, options?: { cacheKeySuffix?: string; disableScrollTracking?: boolean; label?: string }) {
+  function renderDiffTool(payload: DiffPayload, options?: { variant?: string; disableScrollTracking?: boolean; label?: string }) {
     const relativePath = payload.filePath ? getRelativePath(payload.filePath) : ""
     const toolbarLabel = options?.label || (relativePath ? `Diff · ${relativePath}` : "Diff")
-    const cacheKeyBase = makeRenderCacheKey(toolCallId(), props.messageId, props.messageVersion, props.partVersion)
-    const cacheKey = options?.cacheKeySuffix ? `${cacheKeyBase}${options.cacheKeySuffix}` : cacheKeyBase
+    const selectedVariant = options?.variant === "permission-diff" ? "permission-diff" : "diff"
+    const cacheHandle = selectedVariant === "permission-diff" ? permissionDiffCache : diffCache
     const diffMode = () => (preferences().diffViewMode || "split") as DiffViewMode
     const themeKey = isDark() ? "dark" : "light"
 
     // Check if we have valid cache
     let cachedHtml: string | undefined
-    if (cacheKey) {
-      const cached = getToolRenderCache(cacheKey)
-      const currentMode = diffMode()
-      if (cached && 
-          cached.text === payload.diffText && 
-          cached.theme === themeKey &&
-          cached.mode === currentMode) {
-        cachedHtml = cached.html
-      }
+    const cached = cacheHandle.get<RenderCache>()
+    const currentMode = diffMode()
+    if (cached && cached.text === payload.diffText && cached.theme === themeKey && cached.mode === currentMode) {
+      cachedHtml = cached.html
     }
 
     const handleModeChange = (mode: DiffViewMode) => {
@@ -751,10 +757,6 @@ export default function ToolCall(props: ToolCallProps) {
     }
 
     const handleDiffRendered = () => {
-      if (cacheKey && !cachedHtml) {
-        // Cache will be updated by the diff viewer component itself
-        // We'll capture HTML from the rendered component
-      }
       if (!options?.disableScrollTracking) {
         handleScrollRendered()
       }
@@ -767,7 +769,7 @@ export default function ToolCall(props: ToolCallProps) {
           if (options?.disableScrollTracking) return
           initializeScrollContainer(element)
         }}
-        onScroll={options?.disableScrollTracking ? undefined : (event) => updateScrollState(toolCallId(), event.currentTarget)}
+        onScroll={options?.disableScrollTracking ? undefined : (event) => persistScrollSnapshot(event.currentTarget)}
       >
 
         <div class="tool-call-diff-toolbar" role="group" aria-label="Diff view mode">
@@ -797,7 +799,7 @@ export default function ToolCall(props: ToolCallProps) {
           theme={themeKey}
           mode={diffMode()}
           cachedHtml={cachedHtml}
-          cacheKey={cacheKey}
+          cacheEntryParams={cacheHandle.params()}
           onRendered={handleDiffRendered}
         />
       </div>
@@ -813,20 +815,15 @@ export default function ToolCall(props: ToolCallProps) {
     const isLarge = toolName === "edit" || toolName === "write" || toolName === "patch"
     const messageClass = `message-text tool-call-markdown${isLarge ? " tool-call-markdown-large" : ""}`
     const disableHighlight = state?.status === "running"
-    const cacheKey = makeRenderCacheKey(toolCallId(), props.messageId, props.messageVersion, props.partVersion)
 
     const markdownPart: TextPart = { type: "text", text: content }
-    if (cacheKey) {
-      const cached = getToolRenderCache(cacheKey)
-      if (cached) {
-        markdownPart.renderCache = cached
-      }
+    const cached = markdownCache.get<RenderCache>()
+    if (cached) {
+      markdownPart.renderCache = cached
     }
 
     const handleMarkdownRendered = () => {
-      if (cacheKey) {
-        setToolRenderCache(cacheKey, markdownPart.renderCache)
-      }
+      markdownCache.set(markdownPart.renderCache)
       handleScrollRendered()
     }
 
@@ -834,7 +831,7 @@ export default function ToolCall(props: ToolCallProps) {
       <div
         class={messageClass}
         ref={(element) => initializeScrollContainer(element)}
-        onScroll={(event) => updateScrollState(toolCallId(), event.currentTarget)}
+        onScroll={(event) => persistScrollSnapshot(event.currentTarget)}
       >
         <Markdown
           part={markdownPart}
@@ -1044,7 +1041,7 @@ export default function ToolCall(props: ToolCallProps) {
       <div
         class="message-text tool-call-markdown tool-call-task-container"
         ref={(element) => initializeScrollContainer(element)}
-        onScroll={(event) => updateScrollState(toolCallId(), event.currentTarget)}
+        onScroll={(event) => persistScrollSnapshot(event.currentTarget)}
       >
         <div class="tool-call-task-summary">
           <For each={summary}>
@@ -1122,7 +1119,7 @@ export default function ToolCall(props: ToolCallProps) {
             {(payload) => (
               <div class="tool-call-permission-diff">
                 {renderDiffTool(payload(), {
-                  cacheKeySuffix: "::permission",
+                  variant: "permission-diff",
                   disableScrollTracking: true,
                   label: payload().filePath ? `Requested diff · ${getRelativePath(payload().filePath || "")}` : "Requested diff",
                 })}

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

@@ -1,5 +1,6 @@
 import type { Command } from "./commands"
 import type { Command as SDKCommand } from "@opencode-ai/sdk"
+import { showAlertDialog } from "../stores/alerts"
 import { activeSessionId, executeCustomCommand } from "../stores/sessions"
 
 export function commandRequiresArguments(template?: string): boolean {
@@ -33,7 +34,10 @@ export function buildCustomCommandEntries(instanceId: string, commands: SDKComma
     action: async () => {
       const sessionId = activeSessionId().get(instanceId)
       if (!sessionId || sessionId === "info") {
-        alert("Select a session before running a custom command.")
+        showAlertDialog("Select a session before running a custom command.", {
+          title: "Session required",
+          variant: "warning",
+        })
         return
       }
       const args = promptForCommandArguments(cmd)
@@ -44,7 +48,10 @@ export function buildCustomCommandEntries(instanceId: string, commands: SDKComma
         await executeCustomCommand(instanceId, sessionId, cmd.name, args)
       } catch (error) {
         console.error("Failed to run custom command:", error)
-        alert("Failed to run custom command. Check the console for details.")
+        showAlertDialog("Failed to run custom command. Check the console for details.", {
+          title: "Command failed",
+          variant: "error",
+        })
       }
     },
   }))

packages/ui/src/lib/formatters.ts

@@ -1,4 +1,7 @@
 export function formatTokenTotal(value: number): string {
+  if (value >= 1_000_000_000) {
+    return `${(value / 1_000_000_000).toFixed(1)}B`
+  }
   if (value >= 1_000_000) {
     return `${(value / 1_000_000).toFixed(1)}M`
   }

packages/ui/src/lib/global-cache.ts

@@ -0,0 +1,126 @@
+export interface CacheEntryBaseParams {
+  instanceId?: string
+  sessionId?: string
+  scope: string
+}
+
+export interface CacheEntryParams extends CacheEntryBaseParams {
+  key: string
+}
+
+type CacheValueMap = Map<string, unknown>
+type CacheScopeMap = Map<string, CacheValueMap>
+type CacheSessionMap = Map<string, CacheScopeMap>
+
+const GLOBAL_KEY = "GLOBAL"
+const cacheStore = new Map<string, CacheSessionMap>()
+
+function resolveKey(value?: string) {
+  return value && value.length > 0 ? value : GLOBAL_KEY
+}
+
+function getScopeValueMap(params: CacheEntryParams, create: boolean): CacheValueMap | undefined {
+  const instanceKey = resolveKey(params.instanceId)
+  const sessionKey = resolveKey(params.sessionId)
+
+  let sessionMap = cacheStore.get(instanceKey)
+  if (!sessionMap) {
+    if (!create) return undefined
+    sessionMap = new Map()
+    cacheStore.set(instanceKey, sessionMap)
+  }
+
+  let scopeMap = sessionMap.get(sessionKey)
+  if (!scopeMap) {
+    if (!create) return undefined
+    scopeMap = new Map()
+    sessionMap.set(sessionKey, scopeMap)
+  }
+
+  let valueMap = scopeMap.get(params.scope)
+  if (!valueMap) {
+    if (!create) return undefined
+    valueMap = new Map()
+    scopeMap.set(params.scope, valueMap)
+  }
+
+  return valueMap
+}
+
+function cleanupHierarchy(instanceKey: string, sessionKey: string, scopeKey?: string) {
+  const sessionMap = cacheStore.get(instanceKey)
+  if (!sessionMap) {
+    return
+  }
+
+  const scopeMap = sessionMap.get(sessionKey)
+  if (!scopeMap) {
+    if (sessionMap.size === 0) {
+      cacheStore.delete(instanceKey)
+    }
+    return
+  }
+
+  if (scopeKey) {
+    const valueMap = scopeMap.get(scopeKey)
+    if (valueMap && valueMap.size === 0) {
+      scopeMap.delete(scopeKey)
+    }
+  }
+
+  if (scopeMap.size === 0) {
+    sessionMap.delete(sessionKey)
+  }
+
+  if (sessionMap.size === 0) {
+    cacheStore.delete(instanceKey)
+  }
+}
+
+export function setCacheEntry<T>(params: CacheEntryParams, value: T | undefined): void {
+  const instanceKey = resolveKey(params.instanceId)
+  const sessionKey = resolveKey(params.sessionId)
+
+  if (value === undefined) {
+    const existingMap = getScopeValueMap(params, false)
+    existingMap?.delete(params.key)
+    cleanupHierarchy(instanceKey, sessionKey, params.scope)
+    return
+  }
+
+  const scopeEntries = getScopeValueMap(params, true)
+  scopeEntries?.set(params.key, value)
+}
+
+export function getCacheEntry<T>(params: CacheEntryParams): T | undefined {
+  const scopeEntries = getScopeValueMap(params, false)
+  return scopeEntries?.get(params.key) as T | undefined
+}
+
+export function clearCacheScope(params: CacheEntryBaseParams): void {
+  const instanceKey = resolveKey(params.instanceId)
+  const sessionKey = resolveKey(params.sessionId)
+  const sessionMap = cacheStore.get(instanceKey)
+  if (!sessionMap) return
+  const scopeMap = sessionMap.get(sessionKey)
+  if (!scopeMap) return
+  scopeMap.delete(params.scope)
+  cleanupHierarchy(instanceKey, sessionKey)
+}
+
+export function clearCacheForSession(instanceId?: string, sessionId?: string): void {
+  const instanceKey = resolveKey(instanceId)
+  const sessionKey = resolveKey(sessionId)
+  const sessionMap = cacheStore.get(instanceKey)
+  if (!sessionMap) return
+  sessionMap.delete(sessionKey)
+  if (sessionMap.size === 0) {
+    cacheStore.delete(instanceKey)
+  }
+}
+
+export function clearCacheForInstance(instanceId?: string): void {
+  const instanceKey = resolveKey(instanceId)
+  cacheStore.delete(instanceKey)
+}
+

packages/ui/src/lib/hooks/use-commands.ts

@@ -3,6 +3,7 @@ import type { Accessor } from "solid-js"
 import type { Preferences, ExpansionPreference } from "../../stores/preferences"
 import { createCommandRegistry, type Command } from "../commands"
 import { instances, activeInstanceId, setActiveInstanceId } from "../../stores/instances"
+import type { ClientPart, MessageInfo } from "../../types/message"
 import {
   activeParentSessionId,
   activeSessionId as activeSessionMap,
@@ -11,14 +12,19 @@ import {
   setActiveSession,
 } from "../../stores/sessions"
 import { setSessionCompactionState } from "../../stores/session-compaction"
+import { showAlertDialog } from "../../stores/alerts"
 import type { Instance } from "../../types/instance"
+import type { MessageRecord } from "../../stores/message-v2/types"
+import { messageStoreBus } from "../../stores/message-v2/bus"
 
 export interface UseCommandsOptions {
   preferences: Accessor<Preferences>
   toggleShowThinkingBlocks: () => void
+  toggleUsageMetrics: () => void
   setDiffViewMode: (mode: "split" | "unified") => void
   setToolOutputExpansion: (mode: ExpansionPreference) => void
   setDiagnosticsExpansion: (mode: ExpansionPreference) => void
+  setThinkingBlocksExpansion: (mode: ExpansionPreference) => void
   handleNewInstanceRequest: () => void
   handleCloseInstance: (instanceId: string) => Promise<void>
   handleNewSession: (instanceId: string) => Promise<void>
@@ -27,6 +33,18 @@ export interface UseCommandsOptions {
   getActiveSessionIdForInstance: () => string | null
 }
 
+function extractUserTextFromRecord(record?: MessageRecord): string | null {
+  if (!record) return null
+  const parts = record.partIds
+    .map((partId) => record.parts[partId]?.data)
+    .filter((part): part is ClientPart => Boolean(part))
+  const textParts = parts.filter((part): part is ClientPart & { type: "text"; text: string } => part.type === "text" && typeof (part as any).text === "string")
+  if (textParts.length === 0) {
+    return null
+  }
+  return textParts.map((part) => (part as any).text as string).join("\n")
+}
+
 export function useCommands(options: UseCommandsOptions) {
   const commandRegistry = createCommandRegistry()
   const [commands, setCommands] = createSignal<Command[]>([])
@@ -207,7 +225,10 @@ export function useCommands(options: UseCommandsOptions) {
           setSessionCompactionState(instance.id, sessionId, false)
           console.error("Failed to compact session:", error)
           const message = error instanceof Error ? error.message : "Failed to compact session"
-          alert(`Compact failed: ${message}`)
+          showAlertDialog(`Compact failed: ${message}`, {
+            title: "Compact failed",
+            variant: "error",
+          })
         }
       },
     })
@@ -227,36 +248,42 @@ export function useCommands(options: UseCommandsOptions) {
         const session = sessions.find((s) => s.id === sessionId)
         if (!session) return
 
-        let after = 0
-        const revert = session.revert
+        const store = messageStoreBus.getOrCreate(instance.id)
+        const messageIds = store.getSessionMessageIds(sessionId)
+        const infoMap = new Map<string, MessageInfo>()
+        messageIds.forEach((id) => {
+          const info = store.getMessageInfo(id)
+          if (info) infoMap.set(id, info)
+        })
 
-        if (revert?.messageID) {
-          for (let i = session.messages.length - 1; i >= 0; i--) {
-            const msg = session.messages[i]
-            const info = session.messagesInfo.get(msg.id)
-            if (info?.id === revert.messageID) {
-              after = info.time?.created || 0
-              break
-            }
-          }
+        const revertState = store.getSessionRevert(sessionId) ?? session.revert
+        let after = 0
+        if (revertState?.messageID) {
+          const revertInfo = infoMap.get(revertState.messageID) ?? store.getMessageInfo(revertState.messageID)
+          after = revertInfo?.time?.created || 0
         }
 
         let messageID = ""
-        for (let i = session.messages.length - 1; i >= 0; i--) {
-          const msg = session.messages[i]
-          const info = session.messagesInfo.get(msg.id)
-
-          if (msg.type === "user" && info?.time?.created) {
+        let restoredText: string | null = null
+        for (let i = messageIds.length - 1; i >= 0; i--) {
+          const id = messageIds[i]
+          const record = store.getMessage(id)
+          const info = infoMap.get(id) ?? store.getMessageInfo(id)
+          if (record?.role === "user" && info?.time?.created) {
             if (after > 0 && info.time.created >= after) {
               continue
             }
-            messageID = msg.id
+            messageID = id
+            restoredText = extractUserTextFromRecord(record)
             break
           }
         }
 
         if (!messageID) {
-          alert("Nothing to undo")
+          showAlertDialog("Nothing to undo", {
+            title: "No actions to undo",
+            variant: "info",
+          })
           return
         }
 
@@ -266,23 +293,25 @@ export function useCommands(options: UseCommandsOptions) {
             body: { messageID },
           })
 
-          const revertedMessage = session.messages.find((m) => m.id === messageID)
-          const revertedInfo = session.messagesInfo.get(messageID)
+          if (!restoredText) {
+            const fallbackRecord = store.getMessage(messageID)
+            restoredText = extractUserTextFromRecord(fallbackRecord)
+          }
 
-          if (revertedMessage && revertedInfo?.role === "user") {
-            const textParts = revertedMessage.parts.filter((p) => p.type === "text")
-            if (textParts.length > 0) {
-              const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
-              if (textarea) {
-                textarea.value = textParts.map((p: any) => p.text).join("\n")
-                textarea.dispatchEvent(new Event("input", { bubbles: true }))
-                textarea.focus()
-              }
+          if (restoredText) {
+            const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
+            if (textarea) {
+              textarea.value = restoredText
+              textarea.dispatchEvent(new Event("input", { bubbles: true }))
+              textarea.focus()
             }
           }
         } catch (error) {
           console.error("Failed to revert message:", error)
-          alert("Failed to revert message")
+          showAlertDialog("Failed to revert message", {
+            title: "Undo failed",
+            variant: "error",
+          })
         }
       },
     })
@@ -357,10 +386,26 @@ export function useCommands(options: UseCommandsOptions) {
       label: () => `${options.preferences().showThinkingBlocks ? "Hide" : "Show"} Thinking Blocks`,
       description: "Show/hide AI thinking process",
       category: "System",
-      keywords: ["/thinking", "toggle", "show", "hide"],
+      keywords: ["/thinking", "thinking", "reasoning", "toggle", "show", "hide"],
       action: options.toggleShowThinkingBlocks,
     })
 
+    commandRegistry.register({
+      id: "thinking-default-visibility",
+      label: () => {
+        const mode = options.preferences().thinkingBlocksExpansion ?? "expanded"
+        return `Thinking Blocks Default · ${mode === "expanded" ? "Expanded" : "Collapsed"}`
+      },
+      description: "Toggle whether thinking blocks start expanded",
+      category: "System",
+      keywords: ["/thinking", "thinking", "reasoning", "expand", "collapse", "default"],
+      action: () => {
+        const mode = options.preferences().thinkingBlocksExpansion ?? "expanded"
+        const next: ExpansionPreference = mode === "expanded" ? "collapsed" : "expanded"
+        options.setThinkingBlocksExpansion(next)
+      },
+    })
+
     commandRegistry.register({
       id: "diff-view-split",
       label: () => `${(options.preferences().diffViewMode || "split") === "split" ? "✓ " : ""}Use Split Diff View`,
@@ -411,9 +456,22 @@ export function useCommands(options: UseCommandsOptions) {
       },
     })
 
+    commandRegistry.register({
+      id: "token-usage-visibility",
+      label: () => {
+        const visible = options.preferences().showUsageMetrics ?? true
+        return `Token Usage Display · ${visible ? "Visible" : "Hidden"}`
+      },
+      description: "Show or hide token and cost stats for assistant messages",
+      category: "System",
+      keywords: ["token", "usage", "cost", "stats"],
+      action: options.toggleUsageMetrics,
+    })
+ 
     commandRegistry.register({
       id: "help",
       label: "Show Help",
+
       description: "Display keyboard shortcuts and help",
       category: "System",
       keywords: ["/help", "shortcuts", "help"],

packages/ui/src/lib/hooks/use-global-cache.ts

@@ -0,0 +1,86 @@
+import { type Accessor, createMemo } from "solid-js"
+import {
+  type CacheEntryParams,
+  getCacheEntry,
+  setCacheEntry,
+  clearCacheScope,
+  clearCacheForSession,
+  clearCacheForInstance,
+} from "../global-cache"
+
+/**
+ * `useGlobalCache` exposes a tiny typed facade over the shared cache helpers.
+ * Callers can pass raw values or accessors for the cache keys; empty identifiers
+ * automatically fall back to the global buckets.
+ */
+export function useGlobalCache(params: UseGlobalCacheParams): GlobalCacheHandle {
+  const resolvedEntry = createMemo<CacheEntryParams>(() => {
+    const instanceId = normalizeId(resolveValue(params.instanceId))
+    const sessionId = normalizeId(resolveValue(params.sessionId))
+    const scope = resolveValue(params.scope)
+    const key = resolveValue(params.key)
+    return { instanceId, sessionId, scope, key }
+  })
+
+  const scopeParams = createMemo(() => {
+    const entry = resolvedEntry()
+    return { instanceId: entry.instanceId, sessionId: entry.sessionId, scope: entry.scope }
+  })
+
+  const sessionParams = createMemo(() => {
+    const entry = resolvedEntry()
+    return { instanceId: entry.instanceId, sessionId: entry.sessionId }
+  })
+
+  return {
+    get<T>() {
+      return getCacheEntry<T>(resolvedEntry())
+    },
+    set<T>(value: T | undefined) {
+      setCacheEntry(resolvedEntry(), value)
+    },
+    clearScope() {
+      clearCacheScope(scopeParams())
+    },
+    clearSession() {
+      const params = sessionParams()
+      clearCacheForSession(params.instanceId, params.sessionId)
+    },
+    clearInstance() {
+      const params = sessionParams()
+      clearCacheForInstance(params.instanceId)
+    },
+    params() {
+      return resolvedEntry()
+    },
+  }
+}
+
+function normalizeId(value?: string): string | undefined {
+  return value && value.length > 0 ? value : undefined
+}
+
+function resolveValue<T>(value: MaybeAccessor<T> | undefined): T {
+  if (typeof value === "function") {
+    return (value as Accessor<T>)()
+  }
+  return value as T
+}
+
+type MaybeAccessor<T> = T | Accessor<T>
+
+interface UseGlobalCacheParams {
+  instanceId?: MaybeAccessor<string | undefined>
+  sessionId?: MaybeAccessor<string | undefined>
+  scope: MaybeAccessor<string>
+  key: MaybeAccessor<string>
+}
+
+interface GlobalCacheHandle {
+  get<T>(): T | undefined
+  set<T>(value: T | undefined): void
+  clearScope(): void
+  clearSession(): void
+  clearInstance(): void
+  params(): CacheEntryParams
+}

packages/ui/src/lib/hooks/use-scroll-cache.ts

@@ -0,0 +1,102 @@
+import { type Accessor, createMemo } from "solid-js"
+import { messageStoreBus } from "../../stores/message-v2/bus"
+import type { ScrollSnapshot } from "../../stores/message-v2/types"
+
+interface UseScrollCacheParams {
+  instanceId: MaybeAccessor<string>
+  sessionId: MaybeAccessor<string>
+  scope: MaybeAccessor<string>
+}
+
+interface PersistScrollOptions {
+  atBottomOffset?: number
+}
+
+interface RestoreScrollOptions {
+  behavior?: ScrollBehavior
+  fallback?: () => void
+  onApplied?: (snapshot: ScrollSnapshot | undefined) => void
+}
+
+interface ScrollCacheHandle {
+  persist: (element: HTMLElement | null | undefined, options?: PersistScrollOptions) => ScrollSnapshot | undefined
+  restore: (element: HTMLElement | null | undefined, options?: RestoreScrollOptions) => void
+}
+
+const DEFAULT_BOTTOM_OFFSET = 48
+
+/**
+ * Wraps the message-store scroll snapshot helpers so components can
+ * persist/restore scroll positions without duplicating requestAnimationFrame
+ * boilerplate.
+ */
+export function useScrollCache(params: UseScrollCacheParams): ScrollCacheHandle {
+  const resolved = createMemo(() => ({
+    instanceId: resolveValue(params.instanceId),
+    sessionId: resolveValue(params.sessionId),
+    scope: resolveValue(params.scope),
+  }))
+
+  const store = createMemo(() => {
+    const { instanceId } = resolved()
+    return messageStoreBus.getOrCreate(instanceId)
+  })
+
+  function persist(element: HTMLElement | null | undefined, options?: PersistScrollOptions) {
+    if (!element) {
+      return undefined
+    }
+    const target = resolved()
+    if (!target.sessionId) {
+      return undefined
+    }
+    const snapshot: Omit<ScrollSnapshot, "updatedAt"> = {
+      scrollTop: element.scrollTop,
+      atBottom: isNearBottom(element, options?.atBottomOffset ?? DEFAULT_BOTTOM_OFFSET),
+    }
+    store().setScrollSnapshot(target.sessionId, target.scope, snapshot)
+    return { ...snapshot, updatedAt: Date.now() }
+  }
+
+  function restore(element: HTMLElement | null | undefined, options?: RestoreScrollOptions) {
+    const target = resolved()
+    if (!element || !target.sessionId) {
+      options?.fallback?.()
+      options?.onApplied?.(undefined)
+      return
+    }
+    const snapshot = store().getScrollSnapshot(target.sessionId, target.scope)
+    requestAnimationFrame(() => {
+      if (!element) {
+        options?.onApplied?.(snapshot)
+        return
+      }
+      if (!snapshot) {
+        options?.fallback?.()
+        options?.onApplied?.(undefined)
+        return
+      }
+      const maxScrollTop = Math.max(element.scrollHeight - element.clientHeight, 0)
+      const nextTop = snapshot.atBottom ? maxScrollTop : Math.min(snapshot.scrollTop, maxScrollTop)
+      const behavior = options?.behavior ?? "auto"
+      element.scrollTo({ top: nextTop, behavior })
+      options?.onApplied?.(snapshot)
+    })
+  }
+
+  return { persist, restore }
+}
+
+function isNearBottom(element: HTMLElement, offset: number) {
+  const { scrollTop, scrollHeight, clientHeight } = element
+  return scrollHeight - (scrollTop + clientHeight) <= offset
+}
+
+function resolveValue<T>(value: MaybeAccessor<T>): T {
+  if (typeof value === "function") {
+    return (value as Accessor<T>)()
+  }
+  return value
+}
+
+type MaybeAccessor<T> = T | Accessor<T>

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

@@ -0,0 +1,39 @@
+import type { NativeDialogOptions } from "../native-functions"
+
+interface ElectronDialogResult {
+  canceled?: boolean
+  paths?: string[]
+  path?: string | null
+}
+
+interface ElectronAPI {
+  openDialog?: (options: NativeDialogOptions) => Promise<ElectronDialogResult>
+}
+
+function coerceFirstPath(result?: ElectronDialogResult | null): string | null {
+  if (!result || result.canceled) {
+    return null
+  }
+  const paths = Array.isArray(result.paths) ? result.paths : result.path ? [result.path] : []
+  if (paths.length === 0) {
+    return null
+  }
+  return paths[0] ?? null
+}
+
+export async function openElectronNativeDialog(options: NativeDialogOptions): Promise<string | null> {
+  if (typeof window === "undefined") {
+    return null
+  }
+  const api = (window as Window & { electronAPI?: ElectronAPI }).electronAPI
+  if (!api?.openDialog) {
+    return null
+  }
+  try {
+    const result = await api.openDialog(options)
+    return coerceFirstPath(result)
+  } catch (error) {
+    console.error("[native] electron dialog failed", error)
+    return null
+  }
+}

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

@@ -0,0 +1,37 @@
+import { runtimeEnv } from "../runtime-env"
+import type { NativeDialogOptions } from "./types"
+import { openElectronNativeDialog } from "./electron/functions"
+import { openTauriNativeDialog } from "./tauri/functions"
+
+export type { NativeDialogOptions, NativeDialogFilter, NativeDialogMode } from "./types"
+
+function resolveNativeHandler(): ((options: NativeDialogOptions) => Promise<string | null>) | null {
+  switch (runtimeEnv.host) {
+    case "electron":
+      return openElectronNativeDialog
+    case "tauri":
+      return openTauriNativeDialog
+    default:
+      return null
+  }
+}
+
+export function supportsNativeDialogs(): boolean {
+  return resolveNativeHandler() !== null
+}
+
+async function openNativeDialog(options: NativeDialogOptions): Promise<string | null> {
+  const handler = resolveNativeHandler()
+  if (!handler) {
+    return null
+  }
+  return handler(options)
+}
+
+export async function openNativeFolderDialog(options?: Omit<NativeDialogOptions, "mode">): Promise<string | null> {
+  return openNativeDialog({ mode: "directory", ...(options ?? {}) })
+}
+
+export async function openNativeFileDialog(options?: Omit<NativeDialogOptions, "mode">): Promise<string | null> {
+  return openNativeDialog({ mode: "file", ...(options ?? {}) })
+}

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

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

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

@@ -0,0 +1,13 @@
+export type NativeDialogMode = "directory" | "file"
+
+export interface NativeDialogFilter {
+  name?: string
+  extensions: string[]
+}
+
+export interface NativeDialogOptions {
+  mode: NativeDialogMode
+  title?: string
+  defaultPath?: string
+  filters?: NativeDialogFilter[]
+}

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

@@ -0,0 +1,86 @@
+export type HostRuntime = "electron" | "tauri" | "web"
+export type PlatformKind = "desktop" | "mobile"
+
+export interface RuntimeEnvironment {
+  host: HostRuntime
+  platform: PlatformKind
+}
+
+declare global {
+  interface Window {
+    electronAPI?: unknown
+    __TAURI__?: {
+      invoke?: <T = unknown>(cmd: string, args?: Record<string, unknown>) => Promise<T>
+      event?: {
+        listen: (event: string, handler: (payload: { payload: unknown }) => void) => Promise<() => void>
+      }
+      dialog?: {
+        open?: (options: Record<string, unknown>) => Promise<string | string[] | null>
+        save?: (options: Record<string, unknown>) => Promise<string | null>
+      }
+    }
+  }
+}
+
+function detectHost(): HostRuntime {
+  if (typeof window === "undefined") {
+    return "web"
+  }
+
+  const win = window as Window & { electronAPI?: unknown }
+  if (typeof win.electronAPI !== "undefined") {
+    return "electron"
+  }
+
+  if (typeof win.__TAURI__ !== "undefined") {
+    return "tauri"
+  }
+
+  if (typeof navigator !== "undefined" && /tauri/i.test(navigator.userAgent)) {
+    return "tauri"
+  }
+
+  return "web"
+}
+
+function detectPlatform(): PlatformKind {
+  if (typeof navigator === "undefined") {
+    return "desktop"
+  }
+
+  const uaData = (navigator as any).userAgentData
+  if (uaData?.mobile) {
+    return "mobile"
+  }
+
+  const ua = navigator.userAgent.toLowerCase()
+  if (/android|iphone|ipad|ipod|blackberry|mini|windows phone|mobile|silk/.test(ua)) {
+    return "mobile"
+  }
+
+  return "desktop"
+}
+
+let cachedEnv: RuntimeEnvironment | null = null
+
+export function detectRuntimeEnvironment(): RuntimeEnvironment {
+  if (cachedEnv) {
+    return cachedEnv
+  }
+  cachedEnv = {
+    host: detectHost(),
+    platform: detectPlatform(),
+  }
+  if (typeof console !== "undefined") {
+    const message = `[runtime] host=${cachedEnv.host} platform=${cachedEnv.platform}`
+    console.info(message)
+  }
+  return cachedEnv
+}
+
+export const runtimeEnv = detectRuntimeEnvironment()
+
+export const isElectronHost = () => runtimeEnv.host === "electron"
+export const isTauriHost = () => runtimeEnv.host === "tauri"
+export const isWebHost = () => runtimeEnv.host === "web"
+export const isMobilePlatform = () => runtimeEnv.platform === "mobile"

packages/ui/src/lib/sse-manager.ts

@@ -14,16 +14,15 @@ import type {
   EventSessionIdle,
   EventSessionUpdated,
 } from "@opencode-ai/sdk"
-import { CODENOMAD_API_BASE } from "./api-client"
+import { serverEvents } from "./server-events"
+import type {
+  InstanceStreamEvent,
+  InstanceStreamStatus,
+  WorkspaceEventPayload,
+} from "../../../server/src/api-types"
 
-interface SSEConnection {
-  instanceId: string
-  proxyPath: string
-  eventSource: EventSource
-  status: "connecting" | "connected" | "disconnected" | "error"
-  reconnectAttempts: number
-  reconnectTimer?: ReturnType<typeof setTimeout>
-}
+type InstanceEventPayload = Extract<WorkspaceEventPayload, { type: "instance.event" }>
+type InstanceStatusPayload = Extract<WorkspaceEventPayload, { type: "instance.eventStatus" }>
 
 interface TuiToastEvent {
   type: "tui.toast.show"
@@ -35,7 +34,7 @@ interface TuiToastEvent {
   }
 }
 
-type SSEEvent = 
+type SSEEvent =
   | MessageUpdateEvent
   | MessageRemovedEvent
   | MessagePartUpdatedEvent
@@ -48,73 +47,43 @@ type SSEEvent =
   | EventPermissionReplied
   | EventLspUpdated
   | TuiToastEvent
-  | { type: string; properties?: Record<string, unknown> } // Fallback for unknown event types
+  | { type: string; properties?: Record<string, unknown> }
 
-const [connectionStatus, setConnectionStatus] = createSignal<
-  Map<string, "connecting" | "connected" | "disconnected" | "error">
->(new Map())
+type ConnectionStatus = InstanceStreamStatus
+
+const [connectionStatus, setConnectionStatus] = createSignal<Map<string, ConnectionStatus>>(new Map())
 
 class SSEManager {
-  private connections = new Map<string, SSEConnection>()
-  private static readonly MAX_RECONNECT_DELAY_MS = 5000
-
-  connect(instanceId: string, proxyPath: string, reconnectAttempts = 0): void {
-    const existing = this.connections.get(instanceId)
-    if (existing) {
-      this.clearReconnectTimer(existing)
-      existing.eventSource.close()
-    }
-
-    const url = buildInstanceEventsUrl(proxyPath)
-    const eventSource = new EventSource(url)
-
-    const connection: SSEConnection = {
-      instanceId,
-      proxyPath,
-      eventSource,
-      status: "connecting",
-      reconnectAttempts,
-    }
-
-    this.connections.set(instanceId, connection)
-    this.updateConnectionStatus(instanceId, "connecting")
-
-    eventSource.onopen = () => {
-      connection.status = "connected"
-      connection.reconnectAttempts = 0
-      this.updateConnectionStatus(instanceId, "connected")
-      console.log(`[SSE] Connected to instance ${instanceId}`)
-    }
-
-    eventSource.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data)
-        this.handleEvent(instanceId, data)
-      } catch (error) {
-        console.error("[SSE] Failed to parse event:", error)
+  constructor() {
+    serverEvents.on("instance.eventStatus", (event) => {
+      const payload = event as InstanceStatusPayload
+      this.updateConnectionStatus(payload.instanceId, payload.status)
+      if (payload.status === "disconnected") {
+        if (payload.reason === "workspace stopped") {
+          return
+        }
+        const reason = payload.reason ?? "Instance disconnected"
+        void this.onConnectionLost?.(payload.instanceId, reason)
       }
-    }
+    })
 
-    eventSource.onerror = () => {
-      connection.status = "error"
-      this.updateConnectionStatus(instanceId, "error")
-      console.error(`[SSE] Connection error for instance ${instanceId}`)
-      this.handleConnectionError(instanceId, "Connection to instance lost")
-    }
+    serverEvents.on("instance.event", (event) => {
+      const payload = event as InstanceEventPayload
+      this.updateConnectionStatus(payload.instanceId, "connected")
+      this.handleEvent(payload.instanceId, payload.event as SSEEvent)
+    })
   }
 
-  disconnect(instanceId: string): void {
-    const connection = this.connections.get(instanceId)
-    if (connection) {
-      this.clearReconnectTimer(connection)
-      connection.eventSource.close()
-      this.connections.delete(instanceId)
-      this.updateConnectionStatus(instanceId, "disconnected")
-      console.log(`[SSE] Disconnected from instance ${instanceId}`)
-    }
+  seedStatus(instanceId: string, status: ConnectionStatus) {
+    this.updateConnectionStatus(instanceId, status)
   }
 
-  private handleEvent(instanceId: string, event: SSEEvent): void {
+  private handleEvent(instanceId: string, event: SSEEvent | InstanceStreamEvent): void {
+    if (!event || typeof event !== "object" || typeof (event as { type?: unknown }).type !== "string") {
+      console.warn("[SSE] Dropping malformed event", event)
+      return
+    }
+
     console.log("[SSE] Received event:", event.type, event)
 
     switch (event.type) {
@@ -159,35 +128,7 @@ class SSEManager {
     }
   }
 
-  private handleConnectionError(instanceId: string, reason: string): void {
-    const connection = this.connections.get(instanceId)
-    if (!connection) return
-
-    connection.eventSource.close()
-
-    const nextAttempt = connection.reconnectAttempts + 1
-    const delay = Math.min(nextAttempt * 1000, SSEManager.MAX_RECONNECT_DELAY_MS)
-
-    connection.reconnectAttempts = nextAttempt
-    connection.status = "connecting"
-    this.updateConnectionStatus(instanceId, "connecting")
-
-    console.warn(`[SSE] Attempting reconnect ${nextAttempt} for instance ${instanceId}`)
-
-    connection.reconnectTimer = setTimeout(() => {
-      connection.reconnectTimer = undefined
-      this.connect(instanceId, connection.proxyPath, nextAttempt)
-    }, delay)
-  }
-
-  private clearReconnectTimer(connection: SSEConnection): void {
-    if (connection.reconnectTimer) {
-      clearTimeout(connection.reconnectTimer)
-      connection.reconnectTimer = undefined
-    }
-  }
-
-  private updateConnectionStatus(instanceId: string, status: SSEConnection["status"]): void {
+  private updateConnectionStatus(instanceId: string, status: ConnectionStatus): void {
     setConnectionStatus((prev) => {
       const next = new Map(prev)
       next.set(instanceId, status)
@@ -209,7 +150,7 @@ class SSEManager {
   onLspUpdated?: (instanceId: string, event: EventLspUpdated) => void
   onConnectionLost?: (instanceId: string, reason: string) => void | Promise<void>
 
-  getStatus(instanceId: string): "connecting" | "connected" | "disconnected" | "error" | null {
+  getStatus(instanceId: string): ConnectionStatus | null {
     return connectionStatus().get(instanceId) ?? null
   }
 
@@ -218,19 +159,4 @@ class SSEManager {
   }
 }
 
-function buildInstanceEventsUrl(proxyPath: string): string {
-  const normalized = normalizeProxyPath(proxyPath)
-  const base = stripTrailingSlashes(CODENOMAD_API_BASE)
-  return `${base}${normalized}/event`
-}
-
-function normalizeProxyPath(proxyPath: string): string {
-  const withLeading = proxyPath.startsWith("/") ? proxyPath : `/${proxyPath}`
-  return withLeading.replace(/\/+/g, "/").replace(/\/+$/, "")
-}
-
-function stripTrailingSlashes(input: string): string {
-  return input.replace(/\/+$/, "")
-}
-
 export const sseManager = new SSEManager()

packages/ui/src/lib/theme.tsx

@@ -21,14 +21,11 @@ function applyTheme(dark: boolean) {
 export function ThemeProvider(props: { children: JSX.Element }) {
   const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)")
   const { themePreference, setThemePreference } = useConfig()
-  const [isDark, setIsDarkSignal] = createSignal(false)
+  const [isDark, setIsDarkSignal] = createSignal(true)
 
   const resolveDarkTheme = () => {
-    const preference = themePreference()
-    if (preference === "system") {
-      return systemPrefersDark.matches
-    }
-    return preference === "dark"
+    themePreference()
+    return true
   }
 
   const applyResolvedTheme = () => {
@@ -42,11 +39,8 @@ export function ThemeProvider(props: { children: JSX.Element }) {
   })
 
   onMount(() => {
-    const handleSystemThemeChange = (event: MediaQueryListEvent) => {
-      if (themePreference() === "system") {
-        setIsDarkSignal(event.matches)
-        applyTheme(event.matches)
-      }
+    const handleSystemThemeChange = () => {
+      applyResolvedTheme()
     }
 
     systemPrefersDark.addEventListener("change", handleSystemThemeChange)
@@ -56,12 +50,12 @@ export function ThemeProvider(props: { children: JSX.Element }) {
     }
   })
 
-  const setTheme = (dark: boolean) => {
-    setThemePreference(dark ? "dark" : "light")
+  const setTheme = (_dark: boolean) => {
+    setThemePreference("dark")
   }
 
   const toggleTheme = () => {
-    setTheme(!isDark())
+    setTheme(true)
   }
 
   return <ThemeContext.Provider value={{ isDark, toggleTheme, setTheme }}>{props.children}</ThemeContext.Provider>

packages/ui/src/lib/tool-render-cache.ts

@@ -1,22 +0,0 @@
-import type { RenderCache } from "../types/message"
-
-const toolRenderCache = new Map<string, RenderCache>()
-
-export function getToolRenderCache(key?: string | null): RenderCache | undefined {
-  if (!key) return undefined
-  return toolRenderCache.get(key)
-}
-
-export function setToolRenderCache(key: string | undefined | null, cache?: RenderCache): void {
-  if (!key) return
-  if (cache) {
-    toolRenderCache.set(key, cache)
-  } else {
-    toolRenderCache.delete(key)
-  }
-}
-
-export function clearToolRenderCache(key?: string | null): void {
-  if (!key) return
-  toolRenderCache.delete(key)
-}

packages/ui/src/main.tsx

@@ -3,6 +3,7 @@ import App from "./App"
 import { ThemeProvider } from "./lib/theme"
 import { ConfigProvider } from "./stores/preferences"
 import { InstanceConfigProvider } from "./stores/instance-config"
+import { runtimeEnv } from "./lib/runtime-env"
 import "./index.css"
 import "@git-diff-view/solid/styles/diff-view-pure.css"
 
@@ -12,6 +13,11 @@ if (!root) {
   throw new Error("Root element not found")
 }
 
+if (typeof document !== "undefined") {
+  document.documentElement.dataset.runtimeHost = runtimeEnv.host
+  document.documentElement.dataset.runtimePlatform = runtimeEnv.platform
+}
+
 render(
   () => (
     <ConfigProvider>

packages/ui/src/renderer/index.html

@@ -6,30 +6,18 @@
     <title>CodeNomad</title>
     <style>
       :root {
-        color-scheme: light dark;
+        color-scheme: dark;
       }
-      /* html,
+      html,
       body {
-        background-color: #ffffff;
-        color: #1a1a1a;
+        background-color: #1a1a1a;
+        color: #e0e0e0;
       }
-      @media (prefers-color-scheme: dark) { */
-        html,
-        body {
-          background-color: #1a1a1a;
-          color: #e0e0e0;
-        }
-      /* } */
     </style>
     <script>
       ;(function () {
         try {
-          const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-          // if (prefersDark) {
-            document.documentElement.setAttribute('data-theme', 'dark')
-          // } else {
-          //   document.documentElement.removeAttribute('data-theme')
-          // }
+          document.documentElement.setAttribute('data-theme', 'dark')
         } catch (error) {
           console.warn('Failed to apply initial theme', error)
         }

packages/ui/src/renderer/loading.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CodeNomad</title>
+    <script>
+      ;(function () {
+        try {
+          document.documentElement.setAttribute('data-theme', 'dark')
+        } catch (error) {
+          console.warn('Failed to apply initial theme', error)
+        }
+      })()
+    </script>
+  </head>
+  <body>
+    <div id="loading-root"></div>
+    <script type="module" src="./loading/main.tsx"></script>
+  </body>
+</html>

packages/ui/src/renderer/loading/loading.css

@@ -0,0 +1,111 @@
+:root {
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background-color: var(--surface-base, #0f141f);
+  color: var(--text-primary, #cfd4dc);
+  font-family: var(--font-family-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+}
+
+button {
+  border: none;
+  background: none;
+  font: inherit;
+  color: inherit;
+}
+
+.loading-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  max-width: 520px;
+  width: 100%;
+  text-align: center;
+}
+
+.loading-logo {
+  width: 180px;
+  height: auto;
+  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.45));
+}
+
+.loading-heading {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.loading-title {
+  font-size: 2.8rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text-primary, #f4f6fb);
+}
+
+.loading-status {
+  margin: 0;
+  font-size: 1rem;
+  color: var(--text-muted, #aeb3c4);
+}
+
+.loading-card {
+  margin-top: 12px;
+  width: 100%;
+  max-width: 420px;
+  padding: 22px;
+  border-radius: 18px;
+  background: rgba(13, 16, 24, 0.85);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
+}
+
+.loading-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  font-size: 0.95rem;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.18);
+  border-top-color: #6ce3ff;
+  animation: spin 0.9s linear infinite;
+}
+
+.phrase-controls {
+  margin-top: 12px;
+  font-size: 0.9rem;
+  color: var(--text-muted, #8f96a9);
+}
+
+.phrase-controls button {
+  color: #8fb5ff;
+  cursor: pointer;
+}
+
+.loading-error {
+  margin-top: 12px;
+  color: #ff9ea9;
+  font-size: 0.95rem;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,166 @@
+import { Show, createSignal, onCleanup, onMount } from "solid-js"
+import { render } from "solid-js/web"
+import iconUrl from "../../images/CodeNomad-Icon.png"
+import { runtimeEnv, isTauriHost } from "../../lib/runtime-env"
+import "../../index.css"
+import "./loading.css"
+
+const phrases = [
+  "Warming up the AI neurons…",
+  "Convincing the AI to stop daydreaming…",
+  "Polishing the AI’s code goggles…",
+  "Asking the AI to stop reorganizing your files…",
+  "Feeding the AI additional coffee…",
+  "Teaching the AI not to delete node_modules (again)…",
+  "Telling the AI to act natural before you arrive…",
+  "Asking the AI to please stop rewriting history…",
+  "Letting the AI stretch before its coding sprint…",
+  "Persuading the AI to give you keyboard control…",
+]
+
+interface CliStatus {
+  state?: string
+  url?: string | null
+  error?: string | null
+}
+
+interface TauriBridge {
+  invoke?: <T = unknown>(cmd: string, args?: Record<string, unknown>) => Promise<T>
+  event?: {
+    listen: (event: string, handler: (payload: { payload: unknown }) => void) => Promise<() => void>
+  }
+}
+
+function pickPhrase(previous?: string) {
+  const filtered = phrases.filter((phrase) => phrase !== previous)
+  const source = filtered.length > 0 ? filtered : phrases
+  const index = Math.floor(Math.random() * source.length)
+  return source[index]
+}
+
+function navigateTo(url?: string | null) {
+  if (!url) return
+  window.location.replace(url)
+}
+
+function getTauriBridge(): TauriBridge | null {
+  if (typeof window === "undefined") {
+    return null
+  }
+  const bridge = (window as { __TAURI__?: TauriBridge }).__TAURI__
+  if (!bridge || !bridge.event || !bridge.invoke) {
+    return null
+  }
+  return bridge
+}
+
+function annotateDocument() {
+  if (typeof document === "undefined") {
+    return
+  }
+  document.documentElement.dataset.runtimeHost = runtimeEnv.host
+  document.documentElement.dataset.runtimePlatform = runtimeEnv.platform
+}
+
+function LoadingApp() {
+  const [phrase, setPhrase] = createSignal(pickPhrase())
+  const [error, setError] = createSignal<string | null>(null)
+  const [status, setStatus] = createSignal<string | null>(null)
+
+  const changePhrase = () => setPhrase(pickPhrase(phrase()))
+
+  onMount(() => {
+    annotateDocument()
+    setPhrase(pickPhrase())
+    const unsubscribers: Array<() => void> = []
+
+    async function bootstrapTauri(tauriBridge: TauriBridge | null) {
+      if (!tauriBridge || !tauriBridge.event || !tauriBridge.invoke) {
+        return
+      }
+      try {
+        const readyUnlisten = await tauriBridge.event.listen("cli:ready", (event) => {
+          const payload = (event?.payload as CliStatus) || {}
+          setError(null)
+          setStatus(null)
+          navigateTo(payload.url)
+        })
+        const errorUnlisten = await tauriBridge.event.listen("cli:error", (event) => {
+          const payload = (event?.payload as CliStatus) || {}
+          if (payload.error) {
+            setError(payload.error)
+            setStatus("Encountered an issue")
+          }
+        })
+        const statusUnlisten = await tauriBridge.event.listen("cli:status", (event) => {
+          const payload = (event?.payload as CliStatus) || {}
+          if (payload.state === "error" && payload.error) {
+            setError(payload.error)
+            setStatus("Encountered an issue")
+            return
+          }
+          if (payload.state && payload.state !== "ready") {
+            setError(null)
+            setStatus(null)
+          }
+        })
+        unsubscribers.push(readyUnlisten, errorUnlisten, statusUnlisten)
+
+        const result = await tauriBridge.invoke<CliStatus>("cli_get_status")
+        if (result?.state === "ready" && result.url) {
+          navigateTo(result.url)
+        } else if (result?.state === "error" && result.error) {
+          setError(result.error)
+          setStatus("Encountered an issue")
+        }
+      } catch (err) {
+        setError(String(err))
+        setStatus("Encountered an issue")
+      }
+    }
+
+    if (isTauriHost()) {
+      void bootstrapTauri(getTauriBridge())
+    }
+
+    onCleanup(() => {
+      unsubscribers.forEach((unsubscribe) => {
+        try {
+          unsubscribe()
+        } catch {
+          /* noop */
+        }
+      })
+    })
+  })
+
+  return (
+    <div class="loading-wrapper" role="status" aria-live="polite">
+      <img src={iconUrl} alt="CodeNomad" class="loading-logo" width="180" height="180" />
+      <div class="loading-heading">
+        <h1 class="loading-title">CodeNomad</h1>
+        <Show when={status()}>{(statusText) => <p class="loading-status">{statusText()}</p>}</Show>
+      </div>
+      <div class="loading-card">
+        <div class="loading-row">
+          <div class="spinner" aria-hidden="true" />
+          <span>{phrase()}</span>
+        </div>
+        <div class="phrase-controls">
+          <button type="button" onClick={changePhrase}>
+            Show another
+          </button>
+        </div>
+        {error() && <div class="loading-error">{error()}</div>}
+      </div>
+    </div>
+  )
+}
+
+const root = document.getElementById("loading-root")
+
+if (!root) {
+  throw new Error("Loading root element not found")
+}
+
+render(() => <LoadingApp />, root)

packages/ui/src/stores/alerts.ts

@@ -0,0 +1,46 @@
+import { createSignal } from "solid-js"
+
+export type AlertVariant = "info" | "warning" | "error"
+
+export type AlertDialogState = {
+  type?: "alert" | "confirm"
+  title?: string
+  message: string
+  detail?: string
+  variant?: AlertVariant
+  confirmLabel?: string
+  cancelLabel?: string
+  onConfirm?: () => void
+  onCancel?: () => void
+  resolve?: (value: boolean) => void
+}
+
+const [alertDialogState, setAlertDialogState] = createSignal<AlertDialogState | null>(null)
+
+export function showAlertDialog(message: string, options?: Omit<AlertDialogState, "message">) {
+  setAlertDialogState({
+    type: "alert",
+    message,
+    ...options,
+  })
+}
+
+export function showConfirmDialog(message: string, options?: Omit<AlertDialogState, "message">): Promise<boolean> {
+  const activeElement = typeof document !== "undefined" ? (document.activeElement as HTMLElement | null) : null
+  activeElement?.blur()
+
+  return new Promise<boolean>((resolve) => {
+    setAlertDialogState({
+      type: "confirm",
+      message,
+      ...options,
+      resolve,
+    })
+  })
+}
+
+export function dismissAlertDialog() {
+  setAlertDialogState(null)
+}
+
+export { alertDialogState }

packages/ui/src/stores/instances.ts

@@ -1,7 +1,8 @@
 import { createSignal } from "solid-js"
+import { produce } from "solid-js/store"
 import type { Instance, LogEntry } from "../types/instance"
 import type { LspStatus, Permission } from "@opencode-ai/sdk"
-import type { ClientPart, Message } from "../types/message"
+import type { ClientPart } from "../types/message"
 import { sdkManager } from "../lib/sdk-manager"
 import { sseManager } from "../lib/sse-manager"
 import { serverApi } from "../lib/api-client"
@@ -12,14 +13,15 @@ import {
   fetchSessions,
   fetchAgents,
   fetchProviders,
-  removeSessionIndexes,
   clearInstanceDraftPrompts,
 } from "./sessions"
 import { fetchCommands, clearCommands } from "./commands"
 import { preferences } from "./preferences"
-import { computeDisplayParts } from "./session-messages"
-import { withSession, setSessionPendingPermission } from "./session-state"
+import { setSessionPendingPermission } from "./session-state"
 import { setHasInstances } from "./ui"
+import { messageStoreBus } from "./message-v2/bus"
+import { clearCacheForInstance } from "../lib/global-cache"
+import type { MessageRecord } from "./message-v2/types"
 
 
 const [instances, setInstances] = createSignal<Map<string, Instance>>(new Map())
@@ -52,7 +54,9 @@ function workspaceDescriptorToInstance(descriptor: WorkspaceDescriptor): Instanc
     error: descriptor.error,
     client: existing?.client ?? null,
     metadata: existing?.metadata,
-    binaryPath: descriptor.binaryLabel,
+    binaryPath: descriptor.binaryId ?? descriptor.binaryLabel ?? existing?.binaryPath,
+    binaryLabel: descriptor.binaryLabel,
+    binaryVersion: descriptor.binaryVersion ?? existing?.binaryVersion,
     environmentVariables: existing?.environmentVariables ?? preferences().environmentVariables ?? {},
   }
 }
@@ -87,7 +91,6 @@ function attachClient(descriptor: WorkspaceDescriptor) {
 
   if (instance.client) {
     sdkManager.destroyClient(descriptor.id)
-    sseManager.disconnect(descriptor.id)
   }
 
   const client = sdkManager.createClient(descriptor.id, nextProxyPath)
@@ -97,7 +100,7 @@ function attachClient(descriptor: WorkspaceDescriptor) {
     proxyPath: nextProxyPath,
     status: "ready",
   })
-  sseManager.connect(descriptor.id, nextProxyPath)
+  sseManager.seedStatus(descriptor.id, "connecting")
   void hydrateInstanceData(descriptor.id).catch((error) => {
     console.error("Failed to hydrate instance data", error)
   })
@@ -110,7 +113,7 @@ function releaseInstanceResources(instanceId: string) {
   if (instance.client) {
     sdkManager.destroyClient(instanceId)
   }
-  sseManager.disconnect(instanceId)
+  sseManager.seedStatus(instanceId, "disconnected")
 }
 
 async function hydrateInstanceData(instanceId: string) {
@@ -293,7 +296,8 @@ function removeInstance(id: string) {
   }
 
   // Clean up session indexes and drafts for removed instance
-  removeSessionIndexes(id)
+  clearCacheForInstance(id)
+  messageStoreBus.unregisterInstance(id)
   clearInstanceDraftPrompts(id)
 }
 
@@ -538,23 +542,49 @@ function getPermissionSessionId(permission: Permission): string {
   return (permission as any).sessionID
 }
 
-function findToolPartForPermission(message: Message, permission: Permission): ClientPart | null {
-  const expectedCallId = permission.callID
-  for (const part of message.parts) {
-    if (part.type !== "tool") continue
-    const toolCallId = (part as any).callID
+function getPermissionMessageId(permission: Permission): string | undefined {
+  return (permission as any).messageID ?? (permission as any).messageId ?? undefined
+}
+
+function getPermissionCallIdentifier(permission: Permission): string | undefined {
+  return (
+    (permission as any).callID ??
+    (permission as any).callId ??
+    (permission as any).toolCallID ??
+    (permission as any).toolCallId ??
+    undefined
+  )
+}
+
+function findToolPartForPermission(record: MessageRecord, permission: Permission): { partId: string; part: ClientPart } | null {
+  const expectedCallId = getPermissionCallIdentifier(permission)
+  const permissionId = permission.id
+  const permissionMessageId = getPermissionMessageId(permission)
+
+  for (const partId of record.partIds) {
+    const entry = record.parts[partId]
+    if (!entry) continue
+    const part = entry.data
+    if (!part || part.type !== "tool") continue
+    const toolCallId = (part as any).callID ?? (part as any).callId
+    const partMessageId = (part as any).messageID ?? (part as any).messageId
+
     if (expectedCallId) {
       if (toolCallId === expectedCallId) {
-        return part as ClientPart
+        return { partId, part }
       }
-      if (!toolCallId && (part.id === expectedCallId || part.messageID === permission.messageID)) {
-        return part as ClientPart
+      if (!toolCallId && (part.id === expectedCallId || (permissionMessageId && partMessageId === permissionMessageId))) {
+        return { partId, part }
       }
       continue
     }
 
-    if ((toolCallId && toolCallId === permission.id) || part.id === permission.id || part.messageID === permission.messageID) {
-      return part as ClientPart
+    if (
+      (toolCallId && toolCallId === permissionId) ||
+      part.id === permissionId ||
+      (permissionMessageId && partMessageId === permissionMessageId)
+    ) {
+      return { partId, part }
     }
   }
   return null
@@ -563,23 +593,31 @@ function findToolPartForPermission(message: Message, permission: Permission): Cl
 function mutateToolPartPermission(
   instanceId: string,
   permission: Permission,
-  mutator: (part: ClientPart, message: Message) => boolean,
+  mutator: (part: ClientPart) => boolean,
 ): void {
-  const permissionSessionId = getPermissionSessionId(permission)
-  withSession(instanceId, permissionSessionId, (session) => {
-    const message = session.messages.find((msg) => msg.id === permission.messageID)
-    if (!message) return
-    const targetPart = findToolPartForPermission(message, permission)
-    if (!targetPart) return
+  const messageId = getPermissionMessageId(permission)
+  if (!messageId) return
+  const store = messageStoreBus.getOrCreate(instanceId)
+  const messageRecord = store.getMessage(messageId)
+  if (!messageRecord) return
+  const targetPart = findToolPartForPermission(messageRecord, permission)
+  if (!targetPart) return
 
-    const changed = mutator(targetPart, message)
-    if (!changed) return
-
-    const nextPartVersion = typeof targetPart.version === "number" ? targetPart.version + 1 : 1
-    targetPart.version = nextPartVersion
-    message.version = (message.version ?? 0) + 1
-    message.displayParts = computeDisplayParts(message, preferences().showThinkingBlocks)
-  })
+  store.setState(
+    "messages",
+    messageId,
+    produce((draft: MessageRecord) => {
+      const partRecord = draft.parts[targetPart.partId]
+      if (!partRecord) return
+      const changed = mutator(partRecord.data)
+      if (!changed) return
+      const nextVersion = typeof partRecord.data.version === "number" ? partRecord.data.version + 1 : 1
+      partRecord.data.version = nextVersion
+      partRecord.revision += 1
+      draft.revision += 1
+      draft.updatedAt = Date.now()
+    }),
+  )
 }
 
 function attachPermissionToToolPart(instanceId: string, permission: Permission, active: boolean): void {

packages/ui/src/stores/message-v2/bridge.ts

@@ -0,0 +1,166 @@
+import type { Permission } from "@opencode-ai/sdk"
+import type { Message, MessageInfo, ClientPart } from "../../types/message"
+import type { Session } from "../../types/session"
+import { messageStoreBus } from "./bus"
+import type { MessageStatus, SessionRevertState } from "./types"
+
+interface SessionMetadata {
+  id: string
+  title?: string
+  parentId?: string | null
+}
+
+function resolveSessionMetadata(session?: Session | null): SessionMetadata | undefined {
+  if (!session) return undefined
+  return {
+    id: session.id,
+    title: session.title,
+    parentId: session.parentId ?? null,
+  }
+}
+
+function normalizeStatus(status: Message["status"]): MessageStatus {
+  switch (status) {
+    case "sending":
+    case "sent":
+    case "streaming":
+    case "complete":
+    case "error":
+      return status
+    default:
+      return "complete"
+  }
+}
+
+export function seedSessionMessagesV2(
+  instanceId: string,
+  session: Session | SessionMetadata,
+  messages: Message[],
+  messageInfos?: Map<string, MessageInfo>,
+): void {
+  if (!session || !Array.isArray(messages)) return
+  const store = messageStoreBus.getOrCreate(instanceId)
+  const metadata: SessionMetadata = "id" in session ? { id: session.id, title: session.title, parentId: session.parentId ?? null } : session
+
+  store.addOrUpdateSession({
+    id: metadata.id,
+    title: metadata.title,
+    parentId: metadata.parentId ?? null,
+    revert: (session as Session)?.revert ?? undefined,
+  })
+
+  const normalizedMessages = messages.map((message) => ({
+    id: message.id,
+    sessionId: message.sessionId,
+    role: message.type,
+    status: normalizeStatus(message.status),
+    createdAt: message.timestamp,
+    updatedAt: message.timestamp,
+    parts: message.parts,
+    isEphemeral: message.status === "sending" || message.status === "streaming",
+    bumpRevision: false,
+  }))
+
+  store.hydrateMessages(metadata.id, normalizedMessages, messageInfos?.values())
+}
+
+interface MessageInfoOptions {
+  status?: MessageStatus
+  bumpRevision?: boolean
+}
+
+export function upsertMessageInfoV2(instanceId: string, info: MessageInfo | null | undefined, options?: MessageInfoOptions): void {
+  if (!info || typeof info.id !== "string" || typeof info.sessionID !== "string") {
+    return
+  }
+  const store = messageStoreBus.getOrCreate(instanceId)
+  const timeInfo = (info.time ?? {}) as { created?: number; completed?: number }
+  const createdAt = typeof timeInfo.created === "number" ? timeInfo.created : Date.now()
+  const completedAt = typeof timeInfo.completed === "number" ? timeInfo.completed : undefined
+
+  store.upsertMessage({
+    id: info.id,
+    sessionId: info.sessionID,
+    role: info.role === "user" ? "user" : "assistant",
+    status: options?.status ?? "complete",
+    createdAt,
+    updatedAt: completedAt ?? createdAt,
+    bumpRevision: Boolean(options?.bumpRevision),
+  })
+  store.setMessageInfo(info.id, info)
+}
+
+export function applyPartUpdateV2(instanceId: string, part: ClientPart | null | undefined): void {
+  if (!part || typeof part.messageID !== "string") {
+    return
+  }
+  const store = messageStoreBus.getOrCreate(instanceId)
+  store.applyPartUpdate({
+    messageId: part.messageID,
+    part,
+  })
+}
+
+export function replaceMessageIdV2(instanceId: string, oldId: string, newId: string): void {
+  if (!oldId || !newId || oldId === newId) return
+  const store = messageStoreBus.getOrCreate(instanceId)
+  store.replaceMessageId({ oldId, newId })
+}
+
+function extractPermissionMessageId(permission: Permission): string | undefined {
+  return (permission as any).messageID || (permission as any).messageId
+}
+
+function extractPermissionPartId(permission: Permission): string | undefined {
+  const metadata = (permission as any).metadata || {}
+  return (
+    (permission as any).callID ||
+    (permission as any).callId ||
+    (permission as any).toolCallID ||
+    (permission as any).toolCallId ||
+    metadata.partId ||
+    metadata.partID ||
+    metadata.callID ||
+    metadata.callId ||
+    undefined
+  )
+}
+
+export function upsertPermissionV2(instanceId: string, permission: Permission): void {
+  if (!permission) return
+  const store = messageStoreBus.getOrCreate(instanceId)
+  store.upsertPermission({
+    permission,
+    messageId: extractPermissionMessageId(permission),
+    partId: extractPermissionPartId(permission),
+    enqueuedAt: (permission as any).time?.created ?? Date.now(),
+  })
+}
+
+export function removePermissionV2(instanceId: string, permissionId: string): void {
+  if (!permissionId) return
+  const store = messageStoreBus.getOrCreate(instanceId)
+  store.removePermission(permissionId)
+}
+
+export function ensureSessionMetadataV2(instanceId: string, session: Session | null | undefined): void {
+  if (!session) return
+  const store = messageStoreBus.getOrCreate(instanceId)
+  const existingMessageIds = store.getSessionMessageIds(session.id)
+  store.addOrUpdateSession({
+    id: session.id,
+    title: session.title,
+    parentId: session.parentId ?? null,
+    messageIds: existingMessageIds,
+  })
+}
+
+export function getSessionMetadataFromStore(session?: Session | null): SessionMetadata | undefined {
+  return resolveSessionMetadata(session ?? undefined)
+}
+
+export function setSessionRevertV2(instanceId: string, sessionId: string, revert?: SessionRevertState | null): void {
+  if (!sessionId) return
+  const store = messageStoreBus.getOrCreate(instanceId)
+  store.setSessionRevert(sessionId, revert ?? null)
+}

packages/ui/src/stores/message-v2/bus.ts

@@ -0,0 +1,64 @@
+import { createInstanceMessageStore } from "./instance-store"
+import type { InstanceMessageStore } from "./instance-store"
+import { clearCacheForInstance } from "../../lib/global-cache"
+
+class MessageStoreBus {
+  private stores = new Map<string, InstanceMessageStore>()
+  private teardownHandlers = new Set<(instanceId: string) => void>()
+
+  registerInstance(instanceId: string, store?: InstanceMessageStore): InstanceMessageStore {
+    if (this.stores.has(instanceId)) {
+      return this.stores.get(instanceId) as InstanceMessageStore
+    }
+
+    const resolved = store ?? createInstanceMessageStore(instanceId)
+    this.stores.set(instanceId, resolved)
+    return resolved
+  }
+
+  getInstance(instanceId: string): InstanceMessageStore | undefined {
+    return this.stores.get(instanceId)
+  }
+
+  getOrCreate(instanceId: string): InstanceMessageStore {
+    return this.registerInstance(instanceId)
+  }
+
+  onInstanceDestroyed(handler: (instanceId: string) => void): () => void {
+    this.teardownHandlers.add(handler)
+    return () => {
+      this.teardownHandlers.delete(handler)
+    }
+  }
+
+  unregisterInstance(instanceId: string) {
+    const store = this.stores.get(instanceId)
+    if (store) {
+      store.clearInstance()
+    }
+    clearCacheForInstance(instanceId)
+    this.notifyInstanceDestroyed(instanceId)
+    this.stores.delete(instanceId)
+  }
+
+  clearAll() {
+    for (const [instanceId, store] of this.stores.entries()) {
+      store.clearInstance()
+      clearCacheForInstance(instanceId)
+      this.notifyInstanceDestroyed(instanceId)
+      this.stores.delete(instanceId)
+    }
+  }
+
+  private notifyInstanceDestroyed(instanceId: string) {
+    for (const handler of this.teardownHandlers) {
+      try {
+        handler(instanceId)
+      } catch (error) {
+        console.error("Failed to run message store teardown handler", error)
+      }
+    }
+  }
+}
+
+export const messageStoreBus = new MessageStoreBus()

packages/ui/src/stores/message-v2/instance-store.ts

@@ -0,0 +1,768 @@
+import { batch } from "solid-js"
+import { createStore, produce, reconcile } from "solid-js/store"
+import type { SetStoreFunction } from "solid-js/store"
+import type { ClientPart, MessageInfo } from "../../types/message"
+import type {
+  InstanceMessageState,
+  MessageRecord,
+  MessageUpsertInput,
+  PartUpdateInput,
+  PendingPartEntry,
+  PermissionEntry,
+  ReplaceMessageIdOptions,
+  ScrollSnapshot,
+  SessionRecord,
+  SessionUpsertInput,
+  SessionUsageState,
+  UsageEntry,
+} from "./types"
+
+function createInitialState(instanceId: string): InstanceMessageState {
+  return {
+    instanceId,
+    sessions: {},
+    sessionOrder: [],
+    messages: {},
+    messageInfoVersion: {},
+    pendingParts: {},
+    sessionRevisions: {},
+    permissions: {
+      queue: [],
+      active: null,
+      byMessage: {},
+    },
+    usage: {},
+    scrollState: {},
+  }
+}
+
+function ensurePartId(messageId: string, part: ClientPart, index: number): string {
+  if (typeof part.id === "string" && part.id.length > 0) {
+    return part.id
+  }
+  return `${messageId}-part-${index}`
+}
+
+const PENDING_PART_MAX_AGE_MS = 30_000
+
+function clonePart(part: ClientPart): ClientPart {
+  if (!part || typeof part !== "object") {
+    return part
+  }
+  const cloned: Record<string, any> = { ...part }
+  if ("renderCache" in cloned) {
+    cloned.renderCache = undefined
+  }
+  if ("text" in cloned) {
+    cloned.text = cloneStructuredValue(cloned.text)
+  }
+  if ("thinking" in cloned && typeof cloned.thinking === "object") {
+    cloned.thinking = cloneStructuredValue(cloned.thinking)
+  }
+  if ("content" in cloned && Array.isArray(cloned.content)) {
+    cloned.content = cloneStructuredValue(cloned.content)
+  }
+  return cloned as ClientPart
+}
+
+function cloneStructuredValue<T>(value: T): T {
+  if (Array.isArray(value)) {
+    return value.map((item) => cloneStructuredValue(item)) as T
+  }
+  if (value && typeof value === "object") {
+    const next: Record<string, any> = {}
+    Object.entries(value as Record<string, any>).forEach(([key, nested]) => {
+      next[key] = cloneStructuredValue(nested)
+    })
+    return next as T
+  }
+  return value
+}
+
+function areMessageIdListsEqual(a: string[], b: string[]): boolean {
+  if (a.length !== b.length) {
+    return false
+  }
+  for (let index = 0; index < a.length; index++) {
+    if (a[index] !== b[index]) {
+      return false
+    }
+  }
+  return true
+}
+
+function createEmptyUsageState(): SessionUsageState {
+  return {
+    entries: {},
+    totalInputTokens: 0,
+    totalOutputTokens: 0,
+    totalReasoningTokens: 0,
+    totalCost: 0,
+    actualUsageTokens: 0,
+    latestMessageId: undefined,
+  }
+}
+
+function extractUsageEntry(info: MessageInfo | undefined): UsageEntry | null {
+  if (!info || info.role !== "assistant") return null
+  const messageId = typeof info.id === "string" ? info.id : undefined
+  if (!messageId) return null
+  const tokens = info.tokens
+  if (!tokens) return null
+  const inputTokens = tokens.input ?? 0
+  const outputTokens = tokens.output ?? 0
+  const reasoningTokens = tokens.reasoning ?? 0
+  const cacheReadTokens = tokens.cache?.read ?? 0
+  const cacheWriteTokens = tokens.cache?.write ?? 0
+  if (inputTokens === 0 && outputTokens === 0 && reasoningTokens === 0 && cacheReadTokens === 0 && cacheWriteTokens === 0) {
+    return null
+  }
+  const combinedTokens = info.summary ? outputTokens : inputTokens + cacheReadTokens + cacheWriteTokens + outputTokens + reasoningTokens
+  return {
+    messageId,
+    inputTokens,
+    outputTokens,
+    reasoningTokens,
+    cacheReadTokens,
+    cacheWriteTokens,
+    combinedTokens,
+    cost: info.cost ?? 0,
+    timestamp: info.time?.created ?? 0,
+    hasContextUsage: inputTokens + cacheReadTokens + cacheWriteTokens > 0,
+  }
+}
+
+function applyUsageState(state: SessionUsageState, entry: UsageEntry | null) {
+  if (!entry) return
+  state.entries[entry.messageId] = entry
+  state.totalInputTokens += entry.inputTokens
+  state.totalOutputTokens += entry.outputTokens
+  state.totalReasoningTokens += entry.reasoningTokens
+  state.totalCost += entry.cost
+  if (!state.latestMessageId || entry.timestamp >= (state.entries[state.latestMessageId]?.timestamp ?? 0)) {
+    state.latestMessageId = entry.messageId
+    state.actualUsageTokens = entry.combinedTokens
+  }
+}
+
+function removeUsageEntry(state: SessionUsageState, messageId: string | undefined) {
+  if (!messageId) return
+  const existing = state.entries[messageId]
+  if (!existing) return
+  state.totalInputTokens -= existing.inputTokens
+  state.totalOutputTokens -= existing.outputTokens
+  state.totalReasoningTokens -= existing.reasoningTokens
+  state.totalCost -= existing.cost
+  delete state.entries[messageId]
+  if (state.latestMessageId === messageId) {
+    state.latestMessageId = undefined
+    state.actualUsageTokens = 0
+    let latest: UsageEntry | null = null
+    for (const candidate of Object.values(state.entries) as UsageEntry[]) {
+      if (!latest || candidate.timestamp >= latest.timestamp) {
+        latest = candidate
+      }
+    }
+    if (latest) {
+      state.latestMessageId = latest.messageId
+      state.actualUsageTokens = latest.combinedTokens
+    }
+  }
+}
+
+function rebuildUsageStateFromInfos(infos: Iterable<MessageInfo>): SessionUsageState {
+  const usageState = createEmptyUsageState()
+  for (const info of infos) {
+    const entry = extractUsageEntry(info)
+    if (entry) {
+      applyUsageState(usageState, entry)
+    }
+  }
+  return usageState
+}
+
+export interface InstanceMessageStore {
+  instanceId: string
+  state: InstanceMessageState
+  setState: SetStoreFunction<InstanceMessageState>
+  addOrUpdateSession: (input: SessionUpsertInput) => void
+  hydrateMessages: (sessionId: string, inputs: MessageUpsertInput[], infos?: Iterable<MessageInfo>) => void
+  upsertMessage: (input: MessageUpsertInput) => void
+  applyPartUpdate: (input: PartUpdateInput) => void
+  bufferPendingPart: (entry: PendingPartEntry) => void
+  flushPendingParts: (messageId: string) => void
+  replaceMessageId: (options: ReplaceMessageIdOptions) => void
+  setMessageInfo: (messageId: string, info: MessageInfo) => void
+  getMessageInfo: (messageId: string) => MessageInfo | undefined
+  upsertPermission: (entry: PermissionEntry) => void
+  removePermission: (permissionId: string) => void
+  getPermissionState: (messageId?: string, partId?: string) => { entry: PermissionEntry; active: boolean } | null
+  setSessionRevert: (sessionId: string, revert?: SessionRecord["revert"] | null) => void
+  getSessionRevert: (sessionId: string) => SessionRecord["revert"] | undefined | null
+  rebuildUsage: (sessionId: string, infos: Iterable<MessageInfo>) => void
+  getSessionUsage: (sessionId: string) => SessionUsageState | undefined
+  setScrollSnapshot: (sessionId: string, scope: string, snapshot: Omit<ScrollSnapshot, "updatedAt">) => void
+  getScrollSnapshot: (sessionId: string, scope: string) => ScrollSnapshot | undefined
+  getSessionRevision: (sessionId: string) => number
+  getSessionMessageIds: (sessionId: string) => string[]
+  getMessage: (messageId: string) => MessageRecord | undefined
+  clearSession: (sessionId: string) => void
+  clearInstance: () => void
+}
+
+export function createInstanceMessageStore(instanceId: string): InstanceMessageStore {
+  const [state, setState] = createStore<InstanceMessageState>(createInitialState(instanceId))
+
+
+  const messageInfoCache = new Map<string, MessageInfo>()
+
+  function bumpSessionRevision(sessionId: string) {
+    if (!sessionId) return
+    setState("sessionRevisions", sessionId, (value = 0) => value + 1)
+  }
+
+  function getSessionRevisionValue(sessionId: string) {
+    return state.sessionRevisions[sessionId] ?? 0
+  }
+
+  function withUsageState(sessionId: string, updater: (draft: SessionUsageState) => void) {
+    setState("usage", sessionId, (current) => {
+      const draft = current
+        ? {
+            ...current,
+            entries: { ...current.entries },
+          }
+        : createEmptyUsageState()
+      updater(draft)
+      return draft
+    })
+  }
+
+  function updateUsageWithInfo(info: MessageInfo | undefined) {
+    if (!info || typeof info.sessionID !== "string") return
+    const messageId = typeof info.id === "string" ? info.id : undefined
+    if (!messageId) return
+    withUsageState(info.sessionID, (draft) => {
+      removeUsageEntry(draft, messageId)
+      const entry = extractUsageEntry(info)
+      if (entry) {
+        applyUsageState(draft, entry)
+      }
+    })
+  }
+
+  function rebuildUsage(sessionId: string, infos: Iterable<MessageInfo>) {
+    const usageState = rebuildUsageStateFromInfos(infos)
+    setState("usage", sessionId, usageState)
+  }
+
+  function getSessionUsage(sessionId: string) {
+    return state.usage[sessionId]
+  }
+
+  function ensureSessionEntry(sessionId: string): SessionRecord {
+    const existing = state.sessions[sessionId]
+    if (existing) {
+      return existing
+    }
+
+    const now = Date.now()
+    const session: SessionRecord = {
+      id: sessionId,
+      createdAt: now,
+      updatedAt: now,
+      messageIds: [],
+    }
+
+    setState("sessions", sessionId, session)
+    setState("sessionOrder", (order) => (order.includes(sessionId) ? order : [...order, sessionId]))
+    return session
+  }
+
+  function addOrUpdateSession(input: SessionUpsertInput) {
+    const session = ensureSessionEntry(input.id)
+    const previousIds = [...session.messageIds]
+    const nextMessageIds = Array.isArray(input.messageIds) ? input.messageIds : session.messageIds
+
+    setState("sessions", input.id, {
+      ...session,
+      title: input.title ?? session.title,
+      parentId: input.parentId ?? session.parentId ?? null,
+      updatedAt: Date.now(),
+      messageIds: nextMessageIds,
+      revert: input.revert ?? session.revert ?? null,
+    })
+
+    if (Array.isArray(input.messageIds) && !areMessageIdListsEqual(previousIds, nextMessageIds)) {
+      bumpSessionRevision(input.id)
+    }
+  }
+
+  function hydrateMessages(sessionId: string, inputs: MessageUpsertInput[], infos?: Iterable<MessageInfo>) {
+    if (!Array.isArray(inputs) || inputs.length === 0) return
+
+    ensureSessionEntry(sessionId)
+
+    const incomingIds = inputs.map((item) => item.id)
+    const incomingIdSet = new Set(incomingIds)
+    const existingIds = state.sessions[sessionId]?.messageIds ?? []
+    const removedIds = existingIds.filter((id) => !incomingIdSet.has(id))
+
+    const normalizedRecords: Record<string, MessageRecord> = {}
+    const now = Date.now()
+
+    inputs.forEach((input) => {
+      const normalizedParts = normalizeParts(input.id, input.parts)
+      const shouldBump = Boolean(input.bumpRevision || normalizedParts)
+      const previous = state.messages[input.id]
+      normalizedRecords[input.id] = {
+        id: input.id,
+        sessionId: input.sessionId,
+        role: input.role,
+        status: input.status,
+        createdAt: input.createdAt ?? previous?.createdAt ?? now,
+        updatedAt: input.updatedAt ?? now,
+        isEphemeral: input.isEphemeral ?? previous?.isEphemeral ?? false,
+        revision: previous ? previous.revision + (shouldBump ? 1 : 0) : 0,
+        partIds: normalizedParts ? normalizedParts.ids : previous?.partIds ?? [],
+        parts: normalizedParts ? normalizedParts.map : previous?.parts ?? {},
+      }
+    })
+
+    const infoList = infos ? Array.from(infos) : undefined
+    const usageState = infoList ? rebuildUsageStateFromInfos(infoList) : state.usage[sessionId]
+
+    const nextMessages: Record<string, MessageRecord> = { ...state.messages }
+    const nextMessageInfoVersion: Record<string, number> = { ...state.messageInfoVersion }
+    const nextPendingParts: Record<string, PendingPartEntry[]> = { ...state.pendingParts }
+    const nextPermissionsByMessage: Record<string, Record<string, PermissionEntry>> = {
+      ...state.permissions.byMessage,
+    }
+
+    removedIds.forEach((id) => {
+      if (nextMessages[id]?.sessionId === sessionId) {
+        delete nextMessages[id]
+        delete nextMessageInfoVersion[id]
+        delete nextPendingParts[id]
+        if (nextPermissionsByMessage[id]) {
+          delete nextPermissionsByMessage[id]
+        }
+      }
+      messageInfoCache.delete(id)
+    })
+
+    Object.entries(normalizedRecords).forEach(([id, record]) => {
+      nextMessages[id] = record
+    })
+
+    if (infoList) {
+      for (const info of infoList) {
+        const messageId = info.id as string
+        messageInfoCache.set(messageId, info)
+        const currentVersion = nextMessageInfoVersion[messageId] ?? 0
+        nextMessageInfoVersion[messageId] = currentVersion + 1
+      }
+    }
+
+    batch(() => {
+      setState("messages", () => nextMessages)
+      setState("messageInfoVersion", () => nextMessageInfoVersion)
+      setState("pendingParts", () => nextPendingParts)
+      setState("permissions", "byMessage", () => nextPermissionsByMessage)
+
+      if (usageState) {
+        setState("usage", sessionId, usageState)
+      }
+
+      setState("sessions", sessionId, (session) => ({
+        ...session,
+        messageIds: incomingIds,
+        updatedAt: Date.now(),
+      }))
+
+      bumpSessionRevision(sessionId)
+    })
+  }
+
+  function insertMessageIntoSession(sessionId: string, messageId: string) {
+    ensureSessionEntry(sessionId)
+    setState("sessions", sessionId, "messageIds", (ids = []) => {
+      if (ids.includes(messageId)) {
+        return ids
+      }
+      return [...ids, messageId]
+    })
+  }
+
+  function normalizeParts(messageId: string, parts: ClientPart[] | undefined) {
+    if (!parts || parts.length === 0) {
+      return null
+    }
+    const map: MessageRecord["parts"] = {}
+    const ids: string[] = []
+
+    parts.forEach((part, index) => {
+      const id = ensurePartId(messageId, part, index)
+      const cloned = clonePart(part)
+      map[id] = {
+        id,
+        data: cloned,
+        revision: 0,
+      }
+      ids.push(id)
+    })
+
+    return { map, ids }
+  }
+
+  function upsertMessage(input: MessageUpsertInput) {
+    const normalizedParts = normalizeParts(input.id, input.parts)
+    const shouldBump = Boolean(input.bumpRevision || normalizedParts)
+    const now = Date.now()
+
+    setState("messages", input.id, (previous) => {
+      const revision = previous ? previous.revision + (shouldBump ? 1 : 0) : 0
+      return {
+        id: input.id,
+        sessionId: input.sessionId,
+        role: input.role,
+        status: input.status,
+        createdAt: input.createdAt ?? previous?.createdAt ?? now,
+        updatedAt: input.updatedAt ?? now,
+        isEphemeral: input.isEphemeral ?? previous?.isEphemeral ?? false,
+        revision,
+        partIds: normalizedParts ? normalizedParts.ids : previous?.partIds ?? [],
+        parts: normalizedParts ? normalizedParts.map : previous?.parts ?? {},
+      }
+    })
+
+    insertMessageIntoSession(input.sessionId, input.id)
+    flushPendingParts(input.id)
+    bumpSessionRevision(input.sessionId)
+  }
+
+  function bufferPendingPart(entry: PendingPartEntry) {
+    setState("pendingParts", entry.messageId, (list = []) => [...list, entry])
+  }
+
+  function clearPendingPartsForMessage(messageId: string) {
+    setState("pendingParts", (prev) => {
+      if (!prev[messageId]) {
+        return prev
+      }
+      const next = { ...prev }
+      delete next[messageId]
+      return next
+    })
+  }
+
+  function applyPartUpdate(input: PartUpdateInput) {
+    const message = state.messages[input.messageId]
+    if (!message) {
+      bufferPendingPart({ messageId: input.messageId, part: input.part, receivedAt: Date.now() })
+      return
+    }
+
+    const partId = ensurePartId(input.messageId, input.part, message.partIds.length)
+    const cloned = clonePart(input.part)
+
+    setState(
+      "messages",
+      input.messageId,
+      produce((draft: MessageRecord) => {
+        if (!draft.partIds.includes(partId)) {
+          draft.partIds = [...draft.partIds, partId]
+        }
+        const existing = draft.parts[partId]
+        const nextRevision = existing ? existing.revision + 1 : cloned.version ?? 0
+        draft.parts[partId] = {
+          id: partId,
+          data: cloned,
+          revision: nextRevision,
+        }
+        draft.updatedAt = Date.now()
+        if (input.bumpRevision ?? true) {
+          draft.revision += 1
+        }
+      }),
+    )
+  }
+
+  function flushPendingParts(messageId: string) {
+    const pending = state.pendingParts[messageId]
+    if (!pending || pending.length === 0) {
+      return
+    }
+    const now = Date.now()
+    const validEntries = pending.filter((entry) => now - entry.receivedAt <= PENDING_PART_MAX_AGE_MS)
+    if (validEntries.length === 0) {
+      clearPendingPartsForMessage(messageId)
+      return
+    }
+    validEntries.forEach((entry) => applyPartUpdate({ messageId, part: entry.part }))
+    clearPendingPartsForMessage(messageId)
+  }
+
+  function replaceMessageId(options: ReplaceMessageIdOptions) {
+    if (options.oldId === options.newId) return
+    const existing = state.messages[options.oldId]
+    if (!existing) return
+
+    const cloned: MessageRecord = {
+      ...existing,
+      id: options.newId,
+      isEphemeral: false,
+      updatedAt: Date.now(),
+    }
+
+    setState("messages", options.newId, cloned)
+    setState("messages", (prev) => {
+      const next = { ...prev }
+      delete next[options.oldId]
+      return next
+    })
+
+    const affectedSessions = new Set<string>()
+
+    Object.values(state.sessions).forEach((session) => {
+      const index = session.messageIds.indexOf(options.oldId)
+      if (index === -1) return
+      setState("sessions", session.id, "messageIds", (ids) => {
+        const next = [...ids]
+        next[index] = options.newId
+        return next
+      })
+      affectedSessions.add(session.id)
+    })
+
+    affectedSessions.forEach((sessionId) => bumpSessionRevision(sessionId))
+
+    const infoEntry = messageInfoCache.get(options.oldId)
+    if (infoEntry) {
+      messageInfoCache.set(options.newId, infoEntry)
+      messageInfoCache.delete(options.oldId)
+      const version = state.messageInfoVersion[options.oldId] ?? 0
+      setState("messageInfoVersion", options.newId, version)
+      setState("messageInfoVersion", (prev) => {
+        const next = { ...prev }
+        delete next[options.oldId]
+        return next
+      })
+    }
+
+    const permissionMap = state.permissions.byMessage[options.oldId]
+    if (permissionMap) {
+      setState("permissions", "byMessage", options.newId, permissionMap)
+      setState("permissions", (prev) => {
+        const next = { ...prev }
+        const nextByMessage = { ...next.byMessage }
+        delete nextByMessage[options.oldId]
+        next.byMessage = nextByMessage
+        return next
+      })
+    }
+
+    const pending = state.pendingParts[options.oldId]
+    if (pending) {
+      setState("pendingParts", options.newId, pending)
+    }
+    clearPendingPartsForMessage(options.oldId)
+  }
+
+  function setMessageInfo(messageId: string, info: MessageInfo) {
+    if (!messageId) return
+    messageInfoCache.set(messageId, info)
+    const nextVersion = (state.messageInfoVersion[messageId] ?? 0) + 1
+    setState("messageInfoVersion", messageId, nextVersion)
+    updateUsageWithInfo(info)
+  }
+
+  function getMessageInfo(messageId: string) {
+    void state.messageInfoVersion[messageId]
+    return messageInfoCache.get(messageId)
+  }
+
+  function upsertPermission(entry: PermissionEntry) {
+    const messageKey = entry.messageId ?? "__global__"
+    const partKey = entry.partId ?? "__global__"
+
+    setState(
+      "permissions",
+      produce((draft) => {
+        draft.byMessage[messageKey] = draft.byMessage[messageKey] ?? {}
+        draft.byMessage[messageKey][partKey] = entry
+        const existingIndex = draft.queue.findIndex((item) => item.permission.id === entry.permission.id)
+        if (existingIndex === -1) {
+          draft.queue.push(entry)
+        } else {
+          draft.queue[existingIndex] = entry
+        }
+        if (!draft.active || draft.active.permission.id === entry.permission.id) {
+          draft.active = entry
+        }
+      }),
+    )
+  }
+
+  function removePermission(permissionId: string) {
+    setState(
+      "permissions",
+      produce((draft) => {
+        draft.queue = draft.queue.filter((item) => item.permission.id !== permissionId)
+        if (draft.active?.permission.id === permissionId) {
+          draft.active = draft.queue[0] ?? null
+        }
+        Object.keys(draft.byMessage).forEach((messageKey) => {
+          const partEntries = draft.byMessage[messageKey]
+          Object.keys(partEntries).forEach((partKey) => {
+            if (partEntries[partKey].permission.id === permissionId) {
+              delete partEntries[partKey]
+            }
+          })
+          if (Object.keys(partEntries).length === 0) {
+            delete draft.byMessage[messageKey]
+          }
+        })
+      }),
+    )
+  }
+
+  function getPermissionState(messageId?: string, partId?: string) {
+    const messageKey = messageId ?? "__global__"
+    const partKey = partId ?? "__global__"
+    const entry = state.permissions.byMessage[messageKey]?.[partKey]
+    if (!entry) return null
+    const active = state.permissions.active?.permission.id === entry.permission.id
+    return { entry, active }
+  }
+
+  function setSessionRevert(sessionId: string, revert?: SessionRecord["revert"] | null) {
+    if (!sessionId) return
+    ensureSessionEntry(sessionId)
+    setState("sessions", sessionId, "revert", revert ?? null)
+  }
+
+  function getSessionRevert(sessionId: string) {
+    return state.sessions[sessionId]?.revert ?? null
+  }
+
+  function makeScrollKey(sessionId: string, scope: string) {
+    return `${sessionId}:${scope}`
+  }
+
+  function setScrollSnapshot(sessionId: string, scope: string, snapshot: Omit<ScrollSnapshot, "updatedAt">) {
+    const key = makeScrollKey(sessionId, scope)
+    setState("scrollState", key, { ...snapshot, updatedAt: Date.now() })
+  }
+
+  function getScrollSnapshot(sessionId: string, scope: string) {
+    const key = makeScrollKey(sessionId, scope)
+    return state.scrollState[key]
+  }
+
+   function clearSession(sessionId: string) {
+     if (!sessionId) return
+
+     const messageIds = Object.values(state.messages)
+       .filter((record) => record.sessionId === sessionId)
+       .map((record) => record.id)
+
+     // Remove message-level data
+     setState("messages", (prev) => {
+       const next = { ...prev }
+       messageIds.forEach((id) => delete next[id])
+       return next
+     })
+
+     setState("messageInfoVersion", (prev) => {
+       const next = { ...prev }
+       messageIds.forEach((id) => delete next[id])
+       return next
+     })
+
+     messageIds.forEach((id) => messageInfoCache.delete(id))
+
+     setState("pendingParts", (prev) => {
+       const next = { ...prev }
+       messageIds.forEach((id) => {
+         if (next[id]) delete next[id]
+       })
+       return next
+     })
+
+     setState("permissions", "byMessage", (prev) => {
+       const next = { ...prev }
+       messageIds.forEach((id) => {
+         if (next[id]) delete next[id]
+       })
+       return next
+     })
+
+     // Remove session-level data
+     setState("usage", (prev) => {
+       const next = { ...prev }
+       delete next[sessionId]
+       return next
+     })
+
+     setState("sessionRevisions", (prev) => {
+       const next = { ...prev }
+       delete next[sessionId]
+       return next
+     })
+
+     setState("scrollState", (prev) => {
+       const next = { ...prev }
+       const prefix = `${sessionId}:`
+       Object.keys(next).forEach((key) => {
+         if (key.startsWith(prefix)) {
+           delete next[key]
+         }
+       })
+       return next
+     })
+
+     setState("sessions", (prev) => {
+       const next = { ...prev }
+       delete next[sessionId]
+       return next
+     })
+
+     setState("sessionOrder", (ids) => ids.filter((id) => id !== sessionId))
+   }
+
+   function clearInstance() {
+     messageInfoCache.clear()
+     setState(reconcile(createInitialState(instanceId)))
+   }
+ 
+   return {
+     instanceId,
+     state,
+     setState,
+     addOrUpdateSession,
+     hydrateMessages,
+     upsertMessage,
+     applyPartUpdate,
+     bufferPendingPart,
+     flushPendingParts,
+     replaceMessageId,
+     setMessageInfo,
+     getMessageInfo,
+     upsertPermission,
+     removePermission,
+     getPermissionState,
+     setSessionRevert,
+     getSessionRevert,
+     rebuildUsage,
+     getSessionUsage,
+     setScrollSnapshot,
+     getScrollSnapshot,
+     getSessionRevision: getSessionRevisionValue,
+     getSessionMessageIds: (sessionId: string) => state.sessions[sessionId]?.messageIds ?? [],
+     getMessage: (messageId: string) => state.messages[messageId],
+     clearSession,
+     clearInstance,
+   }
+ }
+

packages/ui/src/stores/message-v2/normalizers.ts

@@ -0,0 +1,74 @@
+import { decodeHtmlEntities } from "../../lib/markdown"
+
+function decodeTextSegment(segment: any): any {
+  if (typeof segment === "string") {
+    return decodeHtmlEntities(segment)
+  }
+
+  if (segment && typeof segment === "object") {
+    const updated: Record<string, any> = { ...segment }
+
+    if (typeof updated.text === "string") {
+      updated.text = decodeHtmlEntities(updated.text)
+    }
+
+    if (typeof updated.value === "string") {
+      updated.value = decodeHtmlEntities(updated.value)
+    }
+
+    if (Array.isArray(updated.content)) {
+      updated.content = updated.content.map((item: any) => decodeTextSegment(item))
+    }
+
+    return updated
+  }
+
+  return segment
+}
+
+export function normalizeMessagePart(part: any): any {
+  if (!part || typeof part !== "object") {
+    return part
+  }
+
+  if (part.type !== "text") {
+    return part
+  }
+
+  const normalized: Record<string, any> = { ...part, renderCache: undefined }
+
+  if (typeof normalized.text === "string") {
+    normalized.text = decodeHtmlEntities(normalized.text)
+  } else if (normalized.text && typeof normalized.text === "object") {
+    const textObject: Record<string, any> = { ...normalized.text }
+
+    if (typeof textObject.value === "string") {
+      textObject.value = decodeHtmlEntities(textObject.value)
+    }
+
+    if (Array.isArray(textObject.content)) {
+      textObject.content = textObject.content.map((item: any) => decodeTextSegment(item))
+    }
+
+    if (typeof textObject.text === "string") {
+      textObject.text = decodeHtmlEntities(textObject.text)
+    }
+
+    normalized.text = textObject
+  }
+
+  if (Array.isArray(normalized.content)) {
+    normalized.content = normalized.content.map((item: any) => decodeTextSegment(item))
+  }
+
+  if (normalized.thinking && typeof normalized.thinking === "object") {
+    const thinking: Record<string, any> = { ...normalized.thinking }
+    if (Array.isArray(thinking.content)) {
+      thinking.content = thinking.content.map((item: any) => decodeTextSegment(item))
+    }
+    normalized.thinking = thinking
+  }
+
+  return normalized
+}
+

packages/ui/src/stores/message-v2/record-display-cache.ts

@@ -0,0 +1,46 @@
+import type { ClientPart } from "../../types/message"
+import type { MessageRecord } from "./types"
+
+export interface RecordDisplayData {
+  orderedParts: ClientPart[]
+}
+
+interface RecordDisplayCacheEntry {
+  revision: number
+  data: RecordDisplayData
+}
+
+const recordDisplayCache = new Map<string, RecordDisplayCacheEntry>()
+
+function makeCacheKey(instanceId: string, messageId: string) {
+  return `${instanceId}:${messageId}`
+}
+
+export function buildRecordDisplayData(instanceId: string, record: MessageRecord): RecordDisplayData {
+  const cacheKey = makeCacheKey(instanceId, record.id)
+  const cached = recordDisplayCache.get(cacheKey)
+  if (cached && cached.revision === record.revision) {
+    return cached.data
+  }
+
+  const orderedParts: ClientPart[] = []
+
+  for (const partId of record.partIds) {
+    const entry = record.parts[partId]
+    if (!entry?.data) continue
+    orderedParts.push(entry.data)
+  }
+
+  const data: RecordDisplayData = { orderedParts }
+  recordDisplayCache.set(cacheKey, { revision: record.revision, data })
+  return data
+}
+
+export function clearRecordDisplayCacheForInstance(instanceId: string) {
+  const prefix = `${instanceId}:`
+  for (const key of recordDisplayCache.keys()) {
+    if (key.startsWith(prefix)) {
+      recordDisplayCache.delete(key)
+    }
+  }
+}

packages/ui/src/stores/message-v2/session-info.ts

@@ -0,0 +1,139 @@
+import type { Provider } from "../../types/session"
+import { DEFAULT_MODEL_OUTPUT_LIMIT } from "../session-models"
+import { providers, sessions, sessionInfoByInstance, setSessionInfoByInstance } from "../session-state"
+import { messageStoreBus } from "./bus"
+import type { SessionUsageState } from "./types"
+
+function getLatestUsageEntry(usage?: SessionUsageState) {
+  if (!usage?.latestMessageId) return undefined
+  return usage.entries[usage.latestMessageId]
+}
+
+function resolveSelectedModel(instanceProviders: Provider[], providerId?: string, modelId?: string) {
+  if (!providerId || !modelId) return undefined
+  const provider = instanceProviders.find((p) => p.id === providerId)
+  return provider?.models.find((m) => m.id === modelId)
+}
+
+export function updateSessionInfo(instanceId: string, sessionId: string): void {
+  const instanceSessions = sessions().get(instanceId)
+  if (!instanceSessions) return
+  const session = instanceSessions.get(sessionId)
+  if (!session) return
+
+  const store = messageStoreBus.getOrCreate(instanceId)
+  const usage = store.getSessionUsage(sessionId)
+  const hasUsageEntries = Boolean(usage && Object.keys(usage.entries).length > 0)
+
+  let totalInputTokens = usage?.totalInputTokens ?? 0
+  let totalOutputTokens = usage?.totalOutputTokens ?? 0
+  let totalReasoningTokens = usage?.totalReasoningTokens ?? 0
+  let totalCost = usage?.totalCost ?? 0
+  let actualUsageTokens = usage?.actualUsageTokens ?? 0
+
+  const latestEntry = getLatestUsageEntry(usage)
+  let latestHasContextUsage = latestEntry?.hasContextUsage ?? false
+
+  const previousInfo = sessionInfoByInstance().get(instanceId)?.get(sessionId)
+  let contextWindow = 0
+  let contextAvailableTokens: number | null = null
+  let contextAvailableFromPrevious = false
+  let isSubscriptionModel = false
+
+  if (!hasUsageEntries && previousInfo) {
+    totalInputTokens = previousInfo.inputTokens
+    totalOutputTokens = previousInfo.outputTokens
+    totalReasoningTokens = previousInfo.reasoningTokens
+    totalCost = previousInfo.cost
+    actualUsageTokens = previousInfo.actualUsageTokens
+  }
+
+  const instanceProviders = providers().get(instanceId) || []
+
+  const sessionModel = session.model
+  const sessionProviderId = sessionModel?.providerId
+  const sessionModelId = sessionModel?.modelId
+
+  const latestInfo = latestEntry?.messageId ? store.getMessageInfo(latestEntry.messageId) : undefined
+  const latestProviderId = (latestInfo as any)?.providerID || (latestInfo as any)?.providerId || ""
+  const latestModelId = (latestInfo as any)?.modelID || (latestInfo as any)?.modelId || ""
+
+  const selectedModel =
+    resolveSelectedModel(instanceProviders, sessionProviderId, sessionModelId) ??
+    resolveSelectedModel(instanceProviders, latestProviderId, latestModelId)
+
+  let modelOutputLimit = DEFAULT_MODEL_OUTPUT_LIMIT
+
+  if (selectedModel) {
+    contextWindow = selectedModel.limit?.context ?? 0
+    const outputLimit = selectedModel.limit?.output
+    if (typeof outputLimit === "number" && outputLimit > 0) {
+      modelOutputLimit = Math.min(outputLimit, DEFAULT_MODEL_OUTPUT_LIMIT)
+    }
+    if ((selectedModel.cost?.input ?? 0) === 0 && (selectedModel.cost?.output ?? 0) === 0) {
+      isSubscriptionModel = true
+    }
+  }
+
+  if (contextWindow === 0 && previousInfo) {
+    contextWindow = previousInfo.contextWindow
+  }
+
+  modelOutputLimit = Math.min(modelOutputLimit, DEFAULT_MODEL_OUTPUT_LIMIT)
+
+  if (previousInfo) {
+    const previousContextWindow = previousInfo.contextWindow
+    const previousContextAvailable = previousInfo.contextAvailableTokens ?? null
+    const previousHasContextUsage = previousContextAvailable !== null && previousContextWindow > 0
+      ? previousContextAvailable < previousContextWindow
+      : false
+
+    if (contextWindow !== previousContextWindow) {
+      contextAvailableTokens = null
+      contextAvailableFromPrevious = false
+      latestHasContextUsage = previousHasContextUsage
+    } else {
+      contextAvailableTokens = previousContextAvailable
+      contextAvailableFromPrevious = true
+      latestHasContextUsage = previousHasContextUsage
+    }
+
+    if (!hasUsageEntries) {
+      isSubscriptionModel = previousInfo.isSubscriptionModel
+    } else if (!isSubscriptionModel) {
+      isSubscriptionModel = previousInfo.isSubscriptionModel
+    }
+  }
+
+  const outputBudget = Math.min(modelOutputLimit, DEFAULT_MODEL_OUTPUT_LIMIT)
+
+  if (!contextAvailableFromPrevious) {
+    if (contextWindow > 0) {
+      if (latestHasContextUsage && actualUsageTokens > 0) {
+        contextAvailableTokens = Math.max(contextWindow - (actualUsageTokens + outputBudget), 0)
+      } else {
+        contextAvailableTokens = contextWindow
+      }
+    } else {
+      contextAvailableTokens = null
+    }
+  }
+
+  setSessionInfoByInstance((prev) => {
+    const next = new Map(prev)
+    const instanceInfo = new Map(prev.get(instanceId))
+    instanceInfo.set(sessionId, {
+      cost: totalCost,
+      contextWindow,
+      isSubscriptionModel,
+      inputTokens: totalInputTokens,
+      outputTokens: totalOutputTokens,
+      reasoningTokens: totalReasoningTokens,
+      actualUsageTokens,
+      modelOutputLimit,
+      contextAvailableTokens,
+    })
+    next.set(instanceId, instanceInfo)
+    return next
+  })
+}

packages/ui/src/stores/message-v2/types.ts

@@ -0,0 +1,139 @@
+import type { ClientPart } from "../../types/message"
+import type { Permission } from "@opencode-ai/sdk"
+
+export type MessageStatus = "sending" | "sent" | "streaming" | "complete" | "error"
+export type MessageRole = "user" | "assistant"
+
+export interface NormalizedPartRecord {
+  id: string
+  data: ClientPart
+  revision: number
+}
+
+export interface MessageRecord {
+  id: string
+  sessionId: string
+  role: MessageRole
+  status: MessageStatus
+  createdAt: number
+  updatedAt: number
+  revision: number
+  isEphemeral?: boolean
+  partIds: string[]
+  parts: Record<string, NormalizedPartRecord>
+}
+
+export interface SessionRevertState {
+  messageID?: string
+  partID?: string
+  snapshot?: string
+  diff?: string
+}
+
+export interface SessionRecord {
+  id: string
+  title?: string
+  parentId?: string | null
+  createdAt: number
+  updatedAt: number
+  messageIds: string[]
+  revert?: SessionRevertState | null
+}
+
+export interface PendingPartEntry {
+  messageId: string
+  part: ClientPart
+  receivedAt: number
+}
+
+export interface PermissionEntry {
+  permission: Permission
+  messageId?: string
+  partId?: string
+  enqueuedAt: number
+}
+
+export interface InstancePermissionState {
+  queue: PermissionEntry[]
+  active: PermissionEntry | null
+  byMessage: Record<string, Record<string, PermissionEntry>>
+}
+
+export interface ScrollSnapshot {
+  scrollTop: number
+  atBottom: boolean
+  updatedAt: number
+}
+
+export interface UsageEntry {
+  messageId: string
+  inputTokens: number
+  outputTokens: number
+  reasoningTokens: number
+  cacheReadTokens: number
+  cacheWriteTokens: number
+  combinedTokens: number
+  cost: number
+  timestamp: number
+  hasContextUsage: boolean
+}
+
+export interface SessionUsageState {
+  entries: Record<string, UsageEntry>
+  totalInputTokens: number
+  totalOutputTokens: number
+  totalReasoningTokens: number
+  totalCost: number
+  actualUsageTokens: number
+  latestMessageId?: string
+}
+
+export interface InstanceMessageState {
+  instanceId: string
+  sessions: Record<string, SessionRecord>
+  sessionOrder: string[]
+  messages: Record<string, MessageRecord>
+  messageInfoVersion: Record<string, number>
+  pendingParts: Record<string, PendingPartEntry[]>
+  sessionRevisions: Record<string, number>
+  permissions: InstancePermissionState
+  usage: Record<string, SessionUsageState>
+  scrollState: Record<string, ScrollSnapshot>
+}
+
+export interface SessionUpsertInput {
+  id: string
+  title?: string
+  parentId?: string | null
+  messageIds?: string[]
+  revert?: SessionRevertState | null
+}
+
+export interface MessageUpsertInput {
+  id: string
+  sessionId: string
+  role: MessageRole
+  status: MessageStatus
+  parts?: ClientPart[]
+  createdAt?: number
+  updatedAt?: number
+  isEphemeral?: boolean
+  bumpRevision?: boolean
+}
+
+export interface PartUpdateInput {
+  messageId: string
+  part: ClientPart
+  bumpRevision?: boolean
+}
+
+export interface ReplaceMessageIdOptions {
+  oldId: string
+  newId: string
+}
+
+export interface ScrollCacheKey {
+  instanceId: string
+  sessionId: string
+  scope: string
+}

packages/ui/src/stores/preferences.tsx

@@ -29,12 +29,14 @@ export type ExpansionPreference = "expanded" | "collapsed"
 
 export interface Preferences {
   showThinkingBlocks: boolean
+  thinkingBlocksExpansion: ExpansionPreference
   lastUsedBinary?: string
   environmentVariables: Record<string, string>
   modelRecents: ModelPreference[]
   diffViewMode: DiffViewMode
   toolOutputExpansion: ExpansionPreference
   diagnosticsExpansion: ExpansionPreference
+  showUsageMetrics: boolean
 }
 
 export interface OpenCodeBinary {
@@ -55,11 +57,13 @@ const MAX_RECENT_MODELS = 5
 
 const defaultPreferences: Preferences = {
   showThinkingBlocks: false,
+  thinkingBlocksExpansion: "expanded",
   environmentVariables: {},
   modelRecents: [],
   diffViewMode: "split",
   toolOutputExpansion: "expanded",
   diagnosticsExpansion: "expanded",
+  showUsageMetrics: true,
 }
 
 function deepEqual(a: unknown, b: unknown): boolean {
@@ -86,12 +90,14 @@ function normalizePreferences(pref?: Partial<Preferences> & { agentModelSelectio
 
   return {
     showThinkingBlocks: sanitized.showThinkingBlocks ?? defaultPreferences.showThinkingBlocks,
+    thinkingBlocksExpansion: sanitized.thinkingBlocksExpansion ?? defaultPreferences.thinkingBlocksExpansion,
     lastUsedBinary: sanitized.lastUsedBinary ?? defaultPreferences.lastUsedBinary,
     environmentVariables,
     modelRecents,
     diffViewMode: sanitized.diffViewMode ?? defaultPreferences.diffViewMode,
     toolOutputExpansion: sanitized.toolOutputExpansion ?? defaultPreferences.toolOutputExpansion,
     diagnosticsExpansion: sanitized.diagnosticsExpansion ?? defaultPreferences.diagnosticsExpansion,
+    showUsageMetrics: sanitized.showUsageMetrics ?? defaultPreferences.showUsageMetrics,
   }
 }
 
@@ -266,10 +272,19 @@ function setDiagnosticsExpansion(mode: ExpansionPreference): void {
   updatePreferences({ diagnosticsExpansion: mode })
 }
 
+function setThinkingBlocksExpansion(mode: ExpansionPreference): void {
+  if (preferences().thinkingBlocksExpansion === mode) return
+  updatePreferences({ thinkingBlocksExpansion: mode })
+}
+
 function toggleShowThinkingBlocks(): void {
   updatePreferences({ showThinkingBlocks: !preferences().showThinkingBlocks })
 }
 
+function toggleUsageMetrics(): void {
+  updatePreferences({ showUsageMetrics: !preferences().showUsageMetrics })
+}
+
 function addRecentFolder(path: string): void {
   updateConfig((draft) => {
     draft.recentFolders = buildRecentFolderList(path, draft.recentFolders)
@@ -370,9 +385,11 @@ interface ConfigContextValue {
   setThemePreference: typeof setThemePreference
   updateConfig: typeof updateConfig
   toggleShowThinkingBlocks: typeof toggleShowThinkingBlocks
+  toggleUsageMetrics: typeof toggleUsageMetrics
   setDiffViewMode: typeof setDiffViewMode
   setToolOutputExpansion: typeof setToolOutputExpansion
   setDiagnosticsExpansion: typeof setDiagnosticsExpansion
+  setThinkingBlocksExpansion: typeof setThinkingBlocksExpansion
   addRecentFolder: typeof addRecentFolder
   removeRecentFolder: typeof removeRecentFolder
   addOpenCodeBinary: typeof addOpenCodeBinary
@@ -400,9 +417,11 @@ const configContextValue: ConfigContextValue = {
   setThemePreference,
   updateConfig,
   toggleShowThinkingBlocks,
+  toggleUsageMetrics,
   setDiffViewMode,
   setToolOutputExpansion,
   setDiagnosticsExpansion,
+  setThinkingBlocksExpansion,
   addRecentFolder,
   removeRecentFolder,
   addOpenCodeBinary,
@@ -454,6 +473,7 @@ export {
   updateConfig,
   updatePreferences,
   toggleShowThinkingBlocks,
+  toggleUsageMetrics,
   recentFolders,
   addRecentFolder,
   removeRecentFolder,
@@ -470,7 +490,9 @@ export {
   setDiffViewMode,
   setToolOutputExpansion,
   setDiagnosticsExpansion,
+  setThinkingBlocksExpansion,
   themePreference,
   setThemePreference,
   recordWorkspaceLaunch,
-}
+ }
+