bump version to 0.4.0

Add a Copy button that allows users to copy raw message contents
(text and reasoning parts) to clipboard. The button appears on all
messages - alongside Revert/Fork for user messages, and standalone
for assistant messages.

.github/ISSUE_TEMPLATE/bug_report.yml

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

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

@@ -337,9 +337,6 @@ jobs:
       - name: Ensure rollup native binary
         run: npm install @rollup/rollup-linux-x64-gnu --no-save
 
-      - name: Bundle server assets for Tauri
-        run: npm run bundle:server --workspace @codenomad/tauri-app
-
       - name: Build Linux bundle (Tauri)
         run: npm run build --workspace @codenomad/tauri-app
 

.github/workflows/dev-release.yml

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

.github/workflows/release.yml

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

.github/workflows/reusable-release.yml

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

.gitignore

@@ -6,3 +6,4 @@ release/
 .vite/
 .electron-vite/
 out/
+.dir-locals.el

.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>
@@ -44,6 +44,12 @@ Run CodeNomad as a local server and access it via your web browser. Perfect for
 npx @neuralnomads/codenomad --launch
 ```
 
+For dev version
+
+```bash
+npx @neuralnomads/codenomad@dev --launch
+```
+
 This command starts the server and opens the web client in your default browser.
 
 ## Highlights
@@ -58,6 +64,18 @@ This command starts the server and opens the web client in your default browser.
 - **[OpenCode CLI](https://opencode.ai)**: Must be installed and available in your `PATH`.
 - **Node.js 18+**: Required if running the CLI server or building from source.
 
+## Troubleshooting
+
+### macOS says the app is damaged
+If macOS reports that "CodeNomad.app is damaged and can't be opened," Gatekeeper flagged the download because the app is not yet notarized. You can clear the quarantine flag after moving CodeNomad into `/Applications`:
+
+```bash
+xattr -l /Applications/CodeNomad.app
+xattr -dr com.apple.quarantine /Applications/CodeNomad.app
+```
+
+After removing the quarantine attribute, launch the app normally. On Intel Macs you may also need to approve CodeNomad from **System Settings → Privacy & Security** the first time you run it.
+
 ## Architecture & Development
 
 CodeNomad is a monorepo split into specialized packages. If you want to contribute or build from source, check out the individual package documentation:

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                           │  │  │
+│  │  │  - MessageSection                        │  │  │
 │  │  │  - PromptInput                             │  │  │
 │  │  └────────────────────────────────────────────┘  │  │
 │  └──────────────────────────────────────────────────┘  │

dev-docs/solidjs-llms.txt

@@ -0,0 +1,82 @@
+# SolidJS Documentation
+
+> Solid is a modern JavaScript framework for building user interfaces with fine-grained reactivity. It compiles JSX to real DOM elements and updates only what changes, delivering exceptional performance without a virtual DOM. Solid provides reactive primitives like signals, effects, and stores for predictable state management.
+
+SolidJS is a declarative JavaScript framework that prioritizes performance and developer experience. Unlike frameworks that re-run components on every update, Solid components run once during initialization and set up a reactive system that precisely updates the DOM when dependencies change.
+
+Key principles:
+- Fine-grained reactivity: Updates only the specific DOM nodes that depend on changed data
+- Compile-time optimization: JSX transforms into efficient DOM operations
+- Unidirectional data flow: Props are read-only, promoting predictable state management
+- Component lifecycle: Components run once, with reactive primitives handling updates
+
+**Use your web fetch tool on any of the following links to understand the relevant concept**.
+
+## Quick Start
+
+- [Overview](https://docs.solidjs.com/): Framework introduction and key advantages
+- [Quick Start](https://docs.solidjs.com/quick-start): Installation and project setup with create-solid
+- [Interactive Tutorial](https://www.solidjs.com/tutorial/introduction_basics): Learn Solid basics through guided examples
+- [Playground](https://playground.solidjs.com/): Experiment with Solid directly in your browser
+
+## Core Concepts
+
+- [Intro to Reactivity](https://docs.solidjs.com/concepts/intro-to-reactivity): Signals, subscribers, and reactive principles
+- [Understanding JSX](https://docs.solidjs.com/concepts/understanding-jsx): How Solid uses JSX and key differences from HTML
+- [Components Basics](https://docs.solidjs.com/concepts/components/basics): Component trees, lifecycles, and composition patterns
+- [Signals](https://docs.solidjs.com/concepts/signals): Core reactive primitive for state management with getters/setters
+- [Effects](https://docs.solidjs.com/concepts/effects): Side effects, dependency tracking, and lifecycle functions
+- [Stores](https://docs.solidjs.com/concepts/stores): Complex state management with proxy-based reactivity
+- [Context](https://docs.solidjs.com/concepts/context): Cross-component state sharing without prop drilling
+
+## Component APIs
+
+- [Props](https://docs.solidjs.com/concepts/components/props): Passing data and handlers to child components
+- [Event Handlers](https://docs.solidjs.com/concepts/components/event-handlers): Managing user interactions
+- [Class and Style](https://docs.solidjs.com/concepts/components/class-style): Dynamic styling approaches
+- [Refs](https://docs.solidjs.com/concepts/refs): Accessing DOM elements directly
+
+## Control Flow
+
+- [Conditional Rendering](https://docs.solidjs.com/concepts/control-flow/conditional-rendering): Show, Switch, and Match components
+- [List Rendering](https://docs.solidjs.com/concepts/control-flow/list-rendering): For, Index, and keyed iteration
+- [Dynamic](https://docs.solidjs.com/concepts/control-flow/dynamic): Dynamic component switching
+- [Portal](https://docs.solidjs.com/concepts/control-flow/portal): Rendering outside component hierarchy
+- [Error Boundary](https://docs.solidjs.com/concepts/control-flow/error-boundary): Graceful error handling
+
+## Derived Values
+
+- [Derived Signals](https://docs.solidjs.com/concepts/derived-values/derived-signals): Computed values from signals
+- [Memos](https://docs.solidjs.com/concepts/derived-values/memos): Cached computed values for performance
+
+## State Management
+
+- [Basic State Management](https://docs.solidjs.com/guides/state-management): One-way data flow and lifting state
+- [Complex State Management](https://docs.solidjs.com/guides/complex-state-management): Stores for scalable applications
+- [Fetching Data](https://docs.solidjs.com/guides/fetching-data): Async data with createResource
+
+## Routing
+
+- [Routing & Navigation](https://docs.solidjs.com/guides/routing-and-navigation): @solidjs/router setup and usage
+- [Dynamic Routes](https://docs.solidjs.com/guides/routing-and-navigation#dynamic-routes): Route parameters and validation
+- [Nested Routes](https://docs.solidjs.com/guides/routing-and-navigation#nested-routes): Hierarchical route structures
+- [Preload Functions](https://docs.solidjs.com/guides/routing-and-navigation#preload-functions): Parallel data fetching
+
+## Advanced Topics
+
+- [Fine-Grained Reactivity](https://docs.solidjs.com/advanced-concepts/fine-grained-reactivity): Deep dive into reactive system
+- [TypeScript](https://docs.solidjs.com/configuration/typescript): Type safety and configuration
+
+## Ecosystem
+
+- [Solid Router](https://docs.solidjs.com/solid-router/): File-system routing and data APIs
+- [SolidStart](https://docs.solidjs.com/solid-start/): Full-stack meta-framework
+- [Solid Meta](https://docs.solidjs.com/solid-meta/): Document head management
+- [Templates](https://github.com/solidjs/templates): Starter templates for different setups
+
+## Optional
+
+- [Ecosystem Libraries](https://www.solidjs.com/ecosystem): Community packages and tools
+- [API Reference](https://docs.solidjs.com/reference/): Complete API documentation
+- [Testing](https://docs.solidjs.com/guides/testing): Testing strategies and utilities
+- [Deployment](https://docs.solidjs.com/guides/deploying-your-app): Build and deployment options

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.2.1",
+  "version": "0.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "codenomad-workspace",
-      "version": "0.2.1",
+      "version": "0.4.0",
       "dependencies": {
         "7zip-bin": "^5.2.0",
         "google-auth-library": "^10.5.0"
@@ -1276,9 +1276,9 @@
       }
     },
     "node_modules/@opencode-ai/sdk": {
-      "version": "1.0.68",
-      "resolved": "https://registry.npmjs.org/@opencode-ai/sdk/-/sdk-1.0.68.tgz",
-      "integrity": "sha512-QdpLZw2L/nHdPFGCz8z4du2RvlALgZTFgNeKUM+kJuZTtOWC5t425ELGg5xKIpynD0kj83Euvfn6l6uHs99g3w=="
+      "version": "1.0.138",
+      "resolved": "https://registry.npmjs.org/@opencode-ai/sdk/-/sdk-1.0.138.tgz",
+      "integrity": "sha512-9vXmpiAVVrhMZ3YNr7BGScyULFLyN0vnRx7iCDtN5qQDKxtsdQcXSQCz35XiVyD3A8lH5KOf5Zn0ByLYXuNeFQ=="
     },
     "node_modules/@pinojs/redact": {
       "version": "0.4.0",
@@ -1296,6 +1296,16 @@
         "node": ">=14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/rollup-darwin-x64": {
       "version": "4.52.5",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.5.tgz",
@@ -1531,6 +1541,109 @@
         "solid-js": "^1.8.6"
       }
     },
+    "node_modules/@suid/base": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@suid/base/-/base-0.11.0.tgz",
+      "integrity": "sha512-jNe+LlXuxfkSZo8/MP9koqYYWswucDWSCwc7ViqUhQ0Y/V7sP2RiQ/Bnms+ePSMBZsk5k1b9fAjvj7DtNbbHXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.11.8",
+        "@suid/css": "0.4.1",
+        "@suid/system": "0.14.0",
+        "@suid/types": "0.8.0",
+        "@suid/utils": "0.11.0",
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.9.7"
+      }
+    },
+    "node_modules/@suid/css": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@suid/css/-/css-0.4.1.tgz",
+      "integrity": "sha512-Hsi4O3dBOm7rrlqKoWfNoTeRFAXm/7TPaeEmyxNx+wFaT3eROjMVdhadAIiagFT+PsHrq/6fDauUI5TkL+5Zvg==",
+      "license": "MIT"
+    },
+    "node_modules/@suid/icons-material": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@suid/icons-material/-/icons-material-0.9.0.tgz",
+      "integrity": "sha512-2idgaT/JARd12dwDfocZBQizaiZVgR0ujRsVc61OlAuPZbeH+3TrSxUJkE3Z7+TPftw9+6p0A24GhJjJLvi6RQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@suid/material": "0.19.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.9.7"
+      }
+    },
+    "node_modules/@suid/material": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@suid/material/-/material-0.19.0.tgz",
+      "integrity": "sha512-vfudxYpHdur5CWTjd3eBb7q1b6A9X/pDWTEf2twc0gXVTcErS9VtY/VPBLa65AzO2SPJsdjAE+BCdVZiXASBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@suid/base": "0.11.0",
+        "@suid/css": "0.4.1",
+        "@suid/system": "0.14.0",
+        "@suid/types": "0.8.0",
+        "@suid/utils": "0.11.0",
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.9.7"
+      }
+    },
+    "node_modules/@suid/styled-engine": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@suid/styled-engine/-/styled-engine-0.9.0.tgz",
+      "integrity": "sha512-IfNHjQ3Im63mFIjFl/doiwdn5qbwgcwi/vUXnX7dmIUC/Cw1f3LPhzVT9V8Z3eqyvvFToy53O+BsuLy2e/WmDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@suid/css": "0.4.1",
+        "@suid/utils": "0.11.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.9.7"
+      }
+    },
+    "node_modules/@suid/system": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@suid/system/-/system-0.14.0.tgz",
+      "integrity": "sha512-aRVilPP53hHkqyAyQp2pasT/u8aQCcELwU4kFDnt3b+rj4fsPQRlhMumlX5mZ5aijIboH1CngU6TDG6Z9Mr3UA==",
+      "license": "MIT",
+      "dependencies": {
+        "@suid/css": "0.4.1",
+        "@suid/styled-engine": "0.9.0",
+        "@suid/types": "0.8.0",
+        "@suid/utils": "0.11.0",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.9.7"
+      }
+    },
+    "node_modules/@suid/types": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@suid/types/-/types-0.8.0.tgz",
+      "integrity": "sha512-/Z2abkbypMjF6ygSpnjqnWohcmPqvgw8Xpx1wPPHeh+LajBP2imNT6uEa5dBqNEkJY8O3wEUCVqErAad/rmn5Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "solid-js": "^1.9.7"
+      }
+    },
+    "node_modules/@suid/utils": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@suid/utils/-/utils-0.11.0.tgz",
+      "integrity": "sha512-dk+6YJkex9kcU2qQHCOk8J0/zkOKKbng0SsjC0LBLyBrf2OC3OtDQq7o22pH3m/8CU/0M6uyM7tnyzZA4eWF3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@suid/types": "0.8.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.9.7"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.17",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
@@ -2898,6 +3011,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -3093,6 +3215,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3393,6 +3524,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decompress-response": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -3536,6 +3676,12 @@
         "node": ">=0.3.1"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/dir-compare": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/dir-compare/-/dir-compare-3.3.0.tgz",
@@ -4440,6 +4586,19 @@
         "node": ">=14"
       }
     },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
@@ -4660,7 +4819,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
@@ -5626,6 +5784,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -6254,6 +6424,42 @@
         "node": ">=8"
       }
     },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
@@ -6273,6 +6479,15 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -6701,6 +6916,98 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6868,7 +7175,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -6883,6 +7189,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -7238,6 +7550,12 @@
         "seroval": "^1.0"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/set-cookie-parser": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
@@ -8436,6 +8754,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -8613,7 +8937,7 @@
     },
     "packages/electron-app": {
       "name": "@neuralnomads/codenomad-electron-app",
-      "version": "0.2.1",
+      "version": "0.4.0",
       "dependencies": {
         "@codenomad/ui": "file:../ui",
         "@neuralnomads/codenomad": "file:../server"
@@ -8641,7 +8965,7 @@
     },
     "packages/server": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.2.1",
+      "version": "0.4.0",
       "dependencies": {
         "@fastify/cors": "^8.5.0",
         "@fastify/reply-from": "^9.8.0",
@@ -8680,22 +9004,27 @@
     },
     "packages/tauri-app": {
       "name": "@codenomad/tauri-app",
-      "version": "0.2.1",
+      "version": "0.4.0",
       "devDependencies": {
         "@tauri-apps/cli": "^2.9.4"
       }
     },
     "packages/ui": {
       "name": "@codenomad/ui",
-      "version": "0.2.1",
+      "version": "0.4.0",
       "dependencies": {
         "@git-diff-view/solid": "^0.0.8",
         "@kobalte/core": "0.13.11",
-        "@opencode-ai/sdk": "1.0.68",
+        "@opencode-ai/sdk": "^1.0.138",
         "@solidjs/router": "^0.13.0",
+        "@suid/icons-material": "^0.9.0",
+        "@suid/material": "^0.19.0",
+        "@suid/system": "^0.14.0",
+        "debug": "^4.4.3",
         "github-markdown-css": "^5.8.1",
         "lucide-solid": "^0.300.0",
         "marked": "^12.0.0",
+        "qrcode": "^1.5.3",
         "shiki": "^3.13.0",
         "solid-js": "^1.8.0",
         "solid-toast": "^0.5.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "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: {
@@ -52,9 +53,19 @@ export default defineConfig({
       port: 3000,
     },
     build: {
+      minify: false,
+      cssMinify: false,
+      sourcemap: true,
       outDir: resolve(__dirname, "dist/renderer"),
       rollupOptions: {
-        input: uiRendererEntry,
+        input: {
+          main: uiRendererEntry,
+          loading: uiRendererLoadingEntry,
+        },
+        output: {
+          compact: false,
+          minifyInternalExports: false,
+        },
       },
     },
   },

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,33 @@ export function setupCliIPC(mainWindow: BrowserWindow, cliManager: CliProcessMan
   })
 
   ipcMain.handle("cli:getStatus", async () => cliManager.getStatus())
+
+  ipcMain.handle("cli:restart", async () => {
+    const devMode = process.env.NODE_ENV === "development"
+    await cliManager.stop()
+    return cliManager.start({ dev: devMode })
+  })
+
+  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

@@ -1,4 +1,4 @@
-import { app, BrowserView, BrowserWindow, nativeImage, session } from "electron"
+import { app, BrowserView, BrowserWindow, nativeImage, session, shell } from "electron"
 import { existsSync } from "fs"
 import { dirname, join } from "path"
 import { fileURLToPath } from "url"
@@ -30,22 +30,113 @@ 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")
+}
+
+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)
+  })
+}
+
+function getAllowedRendererOrigins(): string[] {
+  const origins = new Set<string>()
+  const rendererCandidates = [currentCliUrl, process.env.VITE_DEV_SERVER_URL, process.env.ELECTRON_RENDERER_URL]
+  for (const candidate of rendererCandidates) {
+    if (!candidate) {
+      continue
+    }
+    try {
+      origins.add(new URL(candidate).origin)
+    } catch (error) {
+      console.warn("[cli] failed to parse origin for", candidate, error)
+    }
+  }
+  return Array.from(origins)
+}
+
+function shouldOpenExternally(url: string): boolean {
+  try {
+    const parsed = new URL(url)
+    if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+      return true
+    }
+    const allowedOrigins = getAllowedRendererOrigins()
+    return !allowedOrigins.includes(parsed.origin)
+  } catch {
+    return false
+  }
+}
+
+function setupNavigationGuards(window: BrowserWindow) {
+  const handleExternal = (url: string) => {
+    shell.openExternal(url).catch((error) => console.error("[cli] failed to open external URL", url, error))
   }
 
-  return join(process.cwd(), "electron/resources/loading.html")
+  window.webContents.setWindowOpenHandler(({ url }) => {
+    if (shouldOpenExternally(url)) {
+      handleExternal(url)
+      return { action: "deny" }
+    }
+    return { action: "allow" }
+  })
+
+  window.webContents.on("will-navigate", (event, url) => {
+    if (shouldOpenExternally(url)) {
+      event.preventDefault()
+      handleExternal(url)
+    }
+  })
 }
 
 let cachedPreloadPath: string | null = null
@@ -112,14 +203,15 @@ function createWindow() {
     },
   })
 
+  setupNavigationGuards(mainWindow)
+
   if (isMac) {
     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 +248,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

@@ -2,7 +2,8 @@ import { spawn, type ChildProcess } from "child_process"
 import { app } from "electron"
 import { createRequire } from "module"
 import { EventEmitter } from "events"
-import { existsSync } from "fs"
+import { existsSync, readFileSync } from "fs"
+import os from "os"
 import path from "path"
 import { buildUserShellCommand, getUserShellEnv, supportsUserShell } from "./user-shell"
 
@@ -10,6 +11,7 @@ const nodeRequire = createRequire(import.meta.url)
 
 
 type CliState = "starting" | "ready" | "error" | "stopped"
+type ListeningMode = "local" | "all"
 
 export interface CliStatus {
   state: CliState
@@ -34,6 +36,36 @@ interface CliEntryResolution {
   runnerPath?: string
 }
 
+const DEFAULT_CONFIG_PATH = "~/.config/codenomad/config.json"
+
+function resolveConfigPath(configPath?: string): string {
+  const target = configPath && configPath.trim().length > 0 ? configPath : DEFAULT_CONFIG_PATH
+  if (target.startsWith("~/")) {
+    return path.join(os.homedir(), target.slice(2))
+  }
+  return path.resolve(target)
+}
+
+function resolveHostForMode(mode: ListeningMode): string {
+  return mode === "local" ? "127.0.0.1" : "0.0.0.0"
+}
+
+function readListeningModeFromConfig(): ListeningMode {
+  try {
+    const configPath = resolveConfigPath(process.env.CLI_CONFIG)
+    if (!existsSync(configPath)) return "local"
+    const content = readFileSync(configPath, "utf-8")
+    const parsed = JSON.parse(content)
+    const mode = parsed?.preferences?.listeningMode
+    if (mode === "local" || mode === "all") {
+      return mode
+    }
+  } catch (error) {
+    console.warn("[cli] failed to read listening mode from config", error)
+  }
+  return "local"
+}
+
 export declare interface CliProcessManager {
   on(event: "status", listener: (status: CliStatus) => void): this
   on(event: "ready", listener: (status: CliStatus) => void): this
@@ -58,10 +90,12 @@ export class CliProcessManager extends EventEmitter {
     this.updateStatus({ state: "starting", port: undefined, pid: undefined, url: undefined, error: undefined })
 
     const cliEntry = this.resolveCliEntry(options)
-    const args = this.buildCliArgs(options)
+    const listeningMode = this.resolveListeningMode()
+    const host = resolveHostForMode(listeningMode)
+    const args = this.buildCliArgs(options, host)
 
     console.info(
-      `[cli] launching CodeNomad CLI (${options.dev ? "dev" : "prod"}) using ${cliEntry.runner} at ${cliEntry.entry}`,
+      `[cli] launching CodeNomad CLI (${options.dev ? "dev" : "prod"}) using ${cliEntry.runner} at ${cliEntry.entry} (host=${host})`,
     )
 
     const env = supportsUserShell() ? getUserShellEnv() : { ...process.env }
@@ -116,7 +150,7 @@ export class CliProcessManager extends EventEmitter {
       const timeout = setTimeout(() => {
         this.handleTimeout()
         reject(new Error("CLI startup timeout"))
-      }, 15000)
+      }, 60000)
 
       this.once("ready", (status) => {
         clearTimeout(timeout)
@@ -158,6 +192,10 @@ export class CliProcessManager extends EventEmitter {
     return { ...this.status }
   }
 
+  private resolveListeningMode(): ListeningMode {
+    return readListeningModeFromConfig()
+  }
+
   private handleTimeout() {
     if (this.child) {
       this.child.kill("SIGKILL")
@@ -232,8 +270,8 @@ export class CliProcessManager extends EventEmitter {
     this.emit("status", this.status)
   }
 
-  private buildCliArgs(options: StartOptions): string[] {
-    const args = ["serve", "--host", "127.0.0.1", "--port", "0"]
+  private buildCliArgs(options: StartOptions, host: string): string[] {
+    const args = ["serve", "--host", host, "--port", "0"]
 
     if (options.dev) {
       args.push("--ui-dev-server", "http://localhost:3000", "--log-level", "debug")
@@ -263,47 +301,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 +337,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,13 @@ 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"),
+  restartCli: () => ipcRenderer.invoke("cli:restart"),
+  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.1",
+  "version": "0.4.0",
   "description": "CodeNomad - AI coding assistant",
   "author": {
     "name": "Neural Nomads",

packages/server/package-lock.json

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

packages/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "CodeNomad Server",
   "author": {
     "name": "Neural Nomads",

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,9 @@ export type WorkspaceEventType =
   | "config.appChanged"
   | "config.binariesChanged"
   | "instance.dataChanged"
+  | "instance.event"
+  | "instance.eventStatus"
+  | "app.releaseAvailable"
 
 export type WorkspaceEventPayload =
   | { type: "workspace.created"; workspace: WorkspaceDescriptor }
@@ -167,16 +178,45 @@ 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 }
+  | { type: "app.releaseAvailable"; release: LatestReleaseInfo }
+
+export interface NetworkAddress {
+  ip: string
+  family: "ipv4" | "ipv6"
+  scope: "external" | "internal" | "loopback"
+  url: string
+}
+
+export interface LatestReleaseInfo {
+  version: string
+  tag: string
+  url: string
+  channel: "stable" | "dev"
+  publishedAt?: string
+  notes?: string
+}
 
 export interface ServerMeta {
   /** Base URL clients should target for REST calls (useful for Electron embedding). */
   httpBaseUrl: string
   /** SSE endpoint advertised to clients (`/api/events` by default). */
   eventsUrl: string
+  /** Host the server is bound to (e.g., 127.0.0.1 or 0.0.0.0). */
+  host: string
+  /** Listening mode derived from host binding. */
+  listeningMode: "local" | "all"
+  /** Actual port in use after binding. */
+  port: number
   /** Display label for the host (e.g., hostname or friendly name). */
   hostLabel: string
   /** Absolute path of the filesystem root exposed to clients. */
   workspaceRoot: string
+  /** Reachable addresses for this server, external first. */
+  addresses: NetworkAddress[]
+  /** Optional metadata about the most recent public release. */
+  latestRelease?: LatestReleaseInfo
 }
 
 export type {

packages/server/src/config/schema.ts

@@ -10,12 +10,17 @@ const AgentModelSelectionsSchema = z.record(z.string(), AgentModelSelectionSchem
 
 const PreferencesSchema = z.object({
   showThinkingBlocks: z.boolean().default(false),
+  thinkingBlocksExpansion: z.enum(["expanded", "collapsed"]).default("expanded"),
+  showTimelineTools: z.boolean().default(true),
   lastUsedBinary: z.string().optional(),
   environmentVariables: z.record(z.string()).default({}),
   modelRecents: z.array(ModelPreferenceSchema).default([]),
   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),
+  autoCleanupBlankSessions: z.boolean().default(true),
+  listeningMode: z.enum(["local", "all"]).default("local"),
 })
 
 const RecentFolderSchema = z.object({

packages/server/src/config/store.ts

@@ -52,9 +52,10 @@ export class ConfigStore {
     this.cache = next
     this.loaded = true
     this.persist()
+    const published = Boolean(this.eventBus)
     this.eventBus?.publish({ type: "config.appChanged", config: this.cache })
-    this.logger.info("Config updated")
-    this.logger.debug({ config: this.cache }, "Config payload")
+    this.logger.debug({ broadcast: published }, "Config SSE event emitted")
+    this.logger.trace({ config: this.cache }, "Config payload")
   }
 
   private persist() {

packages/server/src/events/bus.ts

@@ -8,7 +8,12 @@ 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({ type: event.type }, "Publishing workspace event")
+      if (this.logger?.isLevelEnabled("trace")) {
+        this.logger.trace({ event }, "Workspace event payload")
+      }
+    }
     return super.emit(event.type, event)
   }
 
@@ -22,6 +27,9 @@ 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)
+    this.on("app.releaseAvailable", handler)
     return () => {
       this.off("workspace.created", handler)
       this.off("workspace.started", handler)
@@ -31,6 +39,9 @@ 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)
+      this.off("app.releaseAvailable", handler)
     }
   }
 }

packages/server/src/index.ts

@@ -14,10 +14,13 @@ 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"
+import { startReleaseMonitor } from "./releases/release-monitor"
 
 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 +81,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 +105,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,14 +133,36 @@ 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}`,
     eventsUrl: `/api/events`,
+    host: options.host,
+    listeningMode: options.host === "0.0.0.0" ? "all" : "local",
+    port: options.port,
     hostLabel: options.host,
     workspaceRoot: options.rootDir,
+    addresses: [],
   }
 
+  const releaseMonitor = startReleaseMonitor({
+    currentVersion: packageJson.version,
+    logger: logger.child({ component: "release-monitor" }),
+    onUpdate: (release) => {
+      if (release) {
+        serverMeta.latestRelease = release
+        eventBus.publish({ type: "app.releaseAvailable", release })
+      } else {
+        delete serverMeta.latestRelease
+      }
+    },
+  })
+
   const server = createHttpServer({
     host: options.host,
     port: options.port,
@@ -169,12 +203,15 @@ async function main() {
     }
 
     try {
+      instanceEventBridge.shutdown()
       await workspaceManager.shutdown()
       logger.info("Workspace manager shutdown complete")
     } catch (error) {
       logger.error({ err: error }, "Workspace manager shutdown failed")
     }
 
+    releaseMonitor.stop()
+
     logger.info("Exiting process")
     process.exit(0)
   }

packages/server/src/releases/release-monitor.ts

@@ -0,0 +1,141 @@
+import { fetch } from "undici"
+import type { LatestReleaseInfo } from "../api-types"
+import type { Logger } from "../logger"
+
+const RELEASES_API_URL = "https://api.github.com/repos/NeuralNomadsAI/CodeNomad/releases/latest"
+interface ReleaseMonitorOptions {
+  currentVersion: string
+  logger: Logger
+  onUpdate: (release: LatestReleaseInfo | null) => void
+}
+
+interface GithubReleaseResponse {
+  tag_name?: string
+  name?: string
+  html_url?: string
+  body?: string
+  published_at?: string
+  created_at?: string
+  prerelease?: boolean
+}
+
+interface NormalizedVersion {
+  major: number
+  minor: number
+  patch: number
+  prerelease: string | null
+}
+
+export interface ReleaseMonitor {
+  stop(): void
+}
+
+export function startReleaseMonitor(options: ReleaseMonitorOptions): ReleaseMonitor {
+  let stopped = false
+
+  const refreshRelease = async () => {
+    if (stopped) return
+    try {
+      const release = await fetchLatestRelease(options)
+      options.onUpdate(release)
+    } catch (error) {
+      options.logger.warn({ err: error }, "Failed to refresh release information")
+    }
+  }
+
+  void refreshRelease()
+
+  return {
+    stop() {
+      stopped = true
+    },
+  }
+}
+
+async function fetchLatestRelease(options: ReleaseMonitorOptions): Promise<LatestReleaseInfo | null> {
+  const response = await fetch(RELEASES_API_URL, {
+    headers: {
+      Accept: "application/vnd.github+json",
+      "User-Agent": "CodeNomad-CLI",
+    },
+  })
+
+  if (!response.ok) {
+    throw new Error(`Release API responded with ${response.status}`)
+  }
+
+  const json = (await response.json()) as GithubReleaseResponse
+  const tagFromServer = json.tag_name || json.name
+  if (!tagFromServer) {
+    return null
+  }
+
+  const normalizedVersion = stripTagPrefix(tagFromServer)
+  if (!normalizedVersion) {
+    return null
+  }
+
+  const current = parseVersion(options.currentVersion)
+  const remote = parseVersion(normalizedVersion)
+
+  if (compareVersions(remote, current) <= 0) {
+    return null
+  }
+
+  return {
+    version: normalizedVersion,
+    tag: tagFromServer,
+    url: json.html_url ?? `https://github.com/NeuralNomadsAI/CodeNomad/releases/tag/${encodeURIComponent(tagFromServer)}`,
+    channel: json.prerelease || normalizedVersion.includes("-") ? "dev" : "stable",
+    publishedAt: json.published_at ?? json.created_at,
+    notes: json.body,
+  }
+}
+
+function stripTagPrefix(tag: string | undefined): string | null {
+  if (!tag) return null
+  const trimmed = tag.trim()
+  if (!trimmed) return null
+  return trimmed.replace(/^v/i, "")
+}
+
+function parseVersion(value: string): NormalizedVersion {
+  const normalized = stripTagPrefix(value) ?? "0.0.0"
+  const [core, prerelease = null] = normalized.split("-", 2)
+  const [major = 0, minor = 0, patch = 0] = core.split(".").map((segment) => {
+    const parsed = Number.parseInt(segment, 10)
+    return Number.isFinite(parsed) ? parsed : 0
+  })
+  return {
+    major,
+    minor,
+    patch,
+    prerelease,
+  }
+}
+
+function compareVersions(a: NormalizedVersion, b: NormalizedVersion): number {
+  if (a.major !== b.major) {
+    return a.major > b.major ? 1 : -1
+  }
+  if (a.minor !== b.minor) {
+    return a.minor > b.minor ? 1 : -1
+  }
+  if (a.patch !== b.patch) {
+    return a.patch > b.patch ? 1 : -1
+  }
+
+  const aPre = a.prerelease && a.prerelease.length > 0 ? a.prerelease : null
+  const bPre = b.prerelease && b.prerelease.length > 0 ? b.prerelease : null
+
+  if (aPre === bPre) {
+    return 0
+  }
+  if (!aPre) {
+    return 1
+  }
+  if (!bPre) {
+    return -1
+  }
+  return aPre.localeCompare(bPre)
+}

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

@@ -42,9 +42,13 @@ interface HttpServerStartResult {
   displayHost: string
 }
 
+const DEFAULT_HTTP_PORT = 9898
+
 export function createHttpServer(deps: HttpServerDeps) {
   const app = Fastify({ logger: false })
   const proxyLogger = deps.logger.child({ component: "proxy" })
+  const apiLogger = deps.logger.child({ component: "http" })
+  const sseLogger = deps.logger.child({ component: "sse" })
 
   const sseClients = new Set<() => void>()
   const registerSseClient = (cleanup: () => void) => {
@@ -58,6 +62,29 @@ export function createHttpServer(deps: HttpServerDeps) {
     sseClients.clear()
   }
 
+  app.addHook("onRequest", (request, _reply, done) => {
+    ;(request as FastifyRequest & { __logMeta?: { start: bigint } }).__logMeta = {
+      start: process.hrtime.bigint(),
+    }
+    done()
+  })
+
+  app.addHook("onResponse", (request, reply, done) => {
+    const meta = (request as FastifyRequest & { __logMeta?: { start: bigint } }).__logMeta
+    const durationMs = meta ? Number((process.hrtime.bigint() - meta.start) / BigInt(1_000_000)) : undefined
+    const base = {
+      method: request.method,
+      url: request.url,
+      status: reply.statusCode,
+      durationMs,
+    }
+    apiLogger.debug(base, "HTTP request completed")
+    if (apiLogger.isLevelEnabled("trace")) {
+      apiLogger.trace({ ...base, params: request.params, query: request.query, body: request.body }, "HTTP request payload")
+    }
+    done()
+  })
+
   app.register(cors, {
     origin: true,
     credentials: true,
@@ -65,13 +92,19 @@ export function createHttpServer(deps: HttpServerDeps) {
 
   app.register(replyFrom, {
     contentTypesToEncode: [],
+    undici: {
+      connections: 16,
+      pipelining: 1,
+      bodyTimeout: 0,
+      headersTimeout: 0,
+    },
   })
 
   registerWorkspaceRoutes(app, { workspaceManager: deps.workspaceManager })
   registerConfigRoutes(app, { configStore: deps.configStore, binaryRegistry: deps.binaryRegistry })
   registerFilesystemRoutes(app, { fileSystemBrowser: deps.fileSystemBrowser })
   registerMetaRoutes(app, { serverMeta: deps.serverMeta })
-  registerEventRoutes(app, { eventBus: deps.eventBus, registerClient: registerSseClient })
+  registerEventRoutes(app, { eventBus: deps.eventBus, registerClient: registerSseClient, logger: sseLogger })
   registerStorageRoutes(app, {
     instanceStore: deps.instanceStore,
     eventBus: deps.eventBus,
@@ -89,16 +122,40 @@ export function createHttpServer(deps: HttpServerDeps) {
   return {
     instance: app,
     start: async (): Promise<HttpServerStartResult> => {
-      const addressInfo = await app.listen({ port: deps.port, host: deps.host })
+      const attemptListen = async (requestedPort: number) => {
+        const addressInfo = await app.listen({ port: requestedPort, host: deps.host })
+        return { addressInfo, requestedPort }
+      }
 
-      let actualPort = deps.port
+      const autoPortRequested = deps.port === 0
+      const primaryPort = autoPortRequested ? DEFAULT_HTTP_PORT : deps.port
 
-      if (typeof addressInfo === "string") {
+      const shouldRetryWithEphemeral = (error: unknown) => {
+        if (!autoPortRequested) return false
+        const err = error as NodeJS.ErrnoException | undefined
+        return Boolean(err && err.code === "EADDRINUSE")
+      }
+
+      let listenResult
+
+      try {
+        listenResult = await attemptListen(primaryPort)
+      } catch (error) {
+        if (!shouldRetryWithEphemeral(error)) {
+          throw error
+        }
+        deps.logger.warn({ err: error, port: primaryPort }, "Preferred port unavailable, retrying on ephemeral port")
+        listenResult = await attemptListen(0)
+      }
+
+      let actualPort = listenResult.requestedPort
+
+      if (typeof listenResult.addressInfo === "string") {
         try {
-          const parsed = new URL(addressInfo)
-          actualPort = Number(parsed.port) || deps.port
+          const parsed = new URL(listenResult.addressInfo)
+          actualPort = Number(parsed.port) || listenResult.requestedPort
         } catch {
-          actualPort = deps.port
+          actualPort = listenResult.requestedPort
         }
       } else {
         const address = app.server.address()
@@ -111,6 +168,9 @@ export function createHttpServer(deps: HttpServerDeps) {
       const serverUrl = `http://${displayHost}:${actualPort}`
 
       deps.serverMeta.httpBaseUrl = serverUrl
+      deps.serverMeta.host = deps.host
+      deps.serverMeta.port = actualPort
+      deps.serverMeta.listeningMode = deps.host === "0.0.0.0" ? "all" : "local"
       deps.logger.info({ port: actualPort, host: deps.host }, "HTTP server listening")
       console.log(`CodeNomad Server is ready at ${serverUrl}`)
 
@@ -190,6 +250,11 @@ async function proxyWorkspaceRequest(args: {
   const search = queryIndex >= 0 ? (request.raw.url ?? "").slice(queryIndex) : ""
   const targetUrl = `http://${INSTANCE_PROXY_HOST}:${port}${normalizedSuffix}${search}`
 
+  logger.debug({ workspaceId, method: request.method, targetUrl }, "Proxying request to instance")
+  if (logger.isLevelEnabled("trace")) {
+    logger.trace({ workspaceId, targetUrl, body: request.body }, "Instance proxy payload")
+  }
+
   return reply.from(targetUrl, {
     onError: (proxyReply, { error }) => {
       logger.error({ err: error, workspaceId, targetUrl }, "Failed to proxy workspace request")

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

@@ -1,14 +1,21 @@
 import { FastifyInstance } from "fastify"
 import { EventBus } from "../../events/bus"
 import { WorkspaceEventPayload } from "../../api-types"
+import { Logger } from "../../logger"
 
 interface RouteDeps {
   eventBus: EventBus
   registerClient: (cleanup: () => void) => () => void
+  logger: Logger
 }
 
+let nextClientId = 0
+
 export function registerEventRoutes(app: FastifyInstance, deps: RouteDeps) {
   app.get("/api/events", (request, reply) => {
+    const clientId = ++nextClientId
+    deps.logger.debug({ clientId }, "SSE client connected")
+
     const origin = request.headers.origin ?? "*"
     reply.raw.setHeader("Access-Control-Allow-Origin", origin)
     reply.raw.setHeader("Access-Control-Allow-Credentials", "true")
@@ -19,6 +26,10 @@ export function registerEventRoutes(app: FastifyInstance, deps: RouteDeps) {
     reply.hijack()
 
     const send = (event: WorkspaceEventPayload) => {
+      deps.logger.debug({ clientId, type: event.type }, "SSE event dispatched")
+      if (deps.logger.isLevelEnabled("trace")) {
+        deps.logger.trace({ clientId, event }, "SSE event payload")
+      }
       reply.raw.write(`data: ${JSON.stringify(event)}\n\n`)
     }
 
@@ -34,6 +45,7 @@ export function registerEventRoutes(app: FastifyInstance, deps: RouteDeps) {
       clearInterval(heartbeat)
       unsubscribe()
       reply.raw.end?.()
+      deps.logger.debug({ clientId }, "SSE client disconnected")
     }
 
     const unregister = deps.registerClient(close)

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

@@ -1,10 +1,104 @@
 import { FastifyInstance } from "fastify"
-import { ServerMeta } from "../../api-types"
+import os from "os"
+import { NetworkAddress, ServerMeta } from "../../api-types"
 
 interface RouteDeps {
   serverMeta: ServerMeta
 }
 
 export function registerMetaRoutes(app: FastifyInstance, deps: RouteDeps) {
-  app.get("/api/meta", async () => deps.serverMeta)
+  app.get("/api/meta", async () => buildMetaResponse(deps.serverMeta))
+}
+
+function buildMetaResponse(meta: ServerMeta): ServerMeta {
+  const port = resolvePort(meta)
+  const addresses = port > 0 ? resolveAddresses(port, meta.host) : []
+
+  return {
+    ...meta,
+    port,
+    listeningMode: meta.host === "0.0.0.0" ? "all" : "local",
+    addresses,
+  }
+}
+
+function resolvePort(meta: ServerMeta): number {
+  if (Number.isInteger(meta.port) && meta.port > 0) {
+    return meta.port
+  }
+  try {
+    const parsed = new URL(meta.httpBaseUrl)
+    const port = Number(parsed.port)
+    return Number.isInteger(port) && port > 0 ? port : 0
+  } catch {
+    return 0
+  }
+}
+
+function resolveAddresses(port: number, host: string): NetworkAddress[] {
+  const interfaces = os.networkInterfaces()
+  const seen = new Set<string>()
+  const results: NetworkAddress[] = []
+
+  const addAddress = (ip: string, scope: NetworkAddress["scope"]) => {
+    if (!ip || ip === "0.0.0.0") return
+    const key = `ipv4-${ip}`
+    if (seen.has(key)) return
+    seen.add(key)
+    results.push({ ip, family: "ipv4", scope, url: `http://${ip}:${port}` })
+  }
+
+  const normalizeFamily = (value: string | number) => {
+    if (typeof value === "string") {
+      const lowered = value.toLowerCase()
+      if (lowered === "ipv4") {
+        return "ipv4" as const
+      }
+    }
+    if (value === 4) return "ipv4" as const
+    return null
+  }
+
+  if (host === "0.0.0.0") {
+    // Enumerate system interfaces (IPv4 only)
+    for (const entries of Object.values(interfaces)) {
+      if (!entries) continue
+      for (const entry of entries) {
+        const family = normalizeFamily(entry.family)
+        if (!family) continue
+        if (!entry.address || entry.address === "0.0.0.0") continue
+        const scope: NetworkAddress["scope"] = entry.internal ? "loopback" : "external"
+        addAddress(entry.address, scope)
+      }
+    }
+  }
+
+  // Always include loopback address
+  addAddress("127.0.0.1", "loopback")
+
+  // Include explicitly configured host if it was IPv4
+  if (isIPv4Address(host) && host !== "0.0.0.0") {
+    const isLoopback = host.startsWith("127.")
+    addAddress(host, isLoopback ? "loopback" : "external")
+  }
+
+  const scopeWeight: Record<NetworkAddress["scope"], number> = { external: 0, internal: 1, loopback: 2 }
+
+  return results.sort((a, b) => {
+    const scopeDelta = scopeWeight[a.scope] - scopeWeight[b.scope]
+    if (scopeDelta !== 0) return scopeDelta
+    return a.ip.localeCompare(b.ip)
+  })
+}
+
+function isIPv4Address(value: string | undefined): value is string {
+  if (!value) return false
+  const parts = value.split(".")
+  if (parts.length !== 4) return false
+  return parts.every((part) => {
+    if (part.length === 0 || part.length > 3) return false
+    if (!/^[0-9]+$/.test(part)) return false
+    const num = Number(part)
+    return Number.isInteger(num) && num >= 0 && num <= 255
+  })
 }

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

@@ -0,0 +1,195 @@
+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.logger.debug({ workspaceId, eventType: event.type }, "Instance SSE event received")
+      if (this.options.logger.isLevelEnabled("trace")) {
+        this.options.logger.trace({ workspaceId, event }, "Instance SSE event payload")
+      }
+      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.logger.debug({ instanceId, status, reason }, "Instance SSE status updated")
+    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/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@codenomad/tauri-app",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "private": true,
   "scripts": {
-    "dev": "tauri dev",
+    "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 --workspace @neuralnomads/codenomad run build && npm run prebuild",
-    "build": "tauri build"
+    "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

@@ -1,45 +1,195 @@
 #!/usr/bin/env node
-const fs = require("fs");
-const path = require("path");
-const { execSync } = require("child_process");
+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 dest = path.resolve(root, "src-tauri", "resources", "server");
+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 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 install --workspace @neuralnomads/codenomad --include-workspace-root=false --install-strategy=nested --fund=false --audit=false"
+const uiDevInstallCommand =
+  "npm install --workspace @codenomad/ui --include-workspace-root=false --install-strategy=nested --fund=false --audit=false"
+
+const 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",
+)
+
+const viteBinPath = path.join(uiRoot, "node_modules", ".bin", "vite")
 
 function ensureServerBuild() {
-  const distPath = path.join(serverRoot, "dist");
-  const publicPath = path.join(serverRoot, "public");
+  const distPath = path.join(serverRoot, "dist")
+  const publicPath = path.join(serverRoot, "public")
   if (fs.existsSync(distPath) && fs.existsSync(publicPath)) {
-    return;
+    return
   }
 
-  console.log("[prebuild] server build missing; running workspace build...");
+  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");
+    throw new Error("[prebuild] server artifacts still missing after build")
   }
 }
 
-ensureServerBuild();
-
-fs.rmSync(dest, { recursive: true, force: true });
-fs.mkdirSync(dest, { recursive: true });
-
-for (const name of sources) {
-  const from = path.join(serverRoot, name);
-  const to = path.join(dest, name);
-  if (!fs.existsSync(from)) {
-    console.warn(`[prebuild] skipped missing ${from}`);
-    continue;
+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")
   }
-  fs.cpSync(from, to, { recursive: true });
-  console.log(`[prebuild] copied ${from} -> ${to}`);
 }
+
+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 ensureUiDevDependencies() {
+  if (fs.existsSync(viteBinPath)) {
+    return
+  }
+
+  console.log("[prebuild] ensuring ui build dependencies...")
+  execSync(uiDevInstallCommand, {
+    cwd: workspaceRoot,
+    stdio: "inherit",
+    env: envWithRootBin,
+  })
+}
+
+function ensureRollupPlatformBinary() {
+  const platformKey = `${process.platform}-${process.arch}`
+  const platformPackages = {
+    "linux-x64": "@rollup/rollup-linux-x64-gnu",
+    "linux-arm64": "@rollup/rollup-linux-arm64-gnu",
+    "darwin-arm64": "@rollup/rollup-darwin-arm64",
+    "darwin-x64": "@rollup/rollup-darwin-x64",
+    "win32-x64": "@rollup/rollup-win32-x64-msvc",
+  }
+
+  const pkgName = platformPackages[platformKey]
+  if (!pkgName) {
+    return
+  }
+
+  const platformPackagePath = path.join(workspaceRoot, "node_modules", "@rollup", pkgName.split("/").pop())
+  if (fs.existsSync(platformPackagePath)) {
+    return
+  }
+
+  let rollupVersion = ""
+  try {
+    rollupVersion = require(path.join(workspaceRoot, "node_modules", "rollup", "package.json")).version
+  } catch (error) {
+    // leave version empty; fallback install will use latest compatible
+  }
+
+  const packageSpec = rollupVersion ? `${pkgName}@${rollupVersion}` : pkgName
+
+  console.log("[prebuild] installing rollup platform binary (optional dep workaround)...")
+  execSync(`npm install ${packageSpec} --no-save --ignore-scripts --fund=false --audit=false`, {
+    cwd: workspaceRoot,
+    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()
+ensureUiDevDependencies()
+ensureRollupPlatformBinary()
+ensureServerDependencies()
+ensureServerBuild()
+ensureUiBuild()
+copyServerArtifacts()
+copyUiLoadingAssets()

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

@@ -17,3 +17,7 @@ thiserror = "1"
 anyhow = "1"
 which = "4"
 libc = "0.2"
+tauri-plugin-dialog = "2"
+dirs = "5"
+tauri-plugin-opener = "2"
+url = "2"

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

@@ -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",
+    "core:menu:default",
+    "dialog:allow-open",
+    "opener:allow-default-urls",
+    "core:webview:allow-set-webview-zoom"
+  ]
+}

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

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

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

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

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

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

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

@@ -1,9 +1,12 @@
+use dirs::home_dir;
 use parking_lot::Mutex;
 use regex::Regex;
-use serde::Serialize;
+use serde::{Deserialize, Serialize};
 use serde_json::json;
 use std::collections::VecDeque;
+use std::env;
 use std::ffi::OsStr;
+use std::fs;
 use std::io::{BufRead, BufReader};
 use std::path::PathBuf;
 use std::process::{Child, Command, Stdio};
@@ -41,6 +44,66 @@ fn navigate_main(app: &AppHandle, url: &str) {
     }
 }
 
+const DEFAULT_CONFIG_PATH: &str = "~/.config/codenomad/config.json";
+
+#[derive(Debug, Deserialize)]
+struct PreferencesConfig {
+    #[serde(rename = "listeningMode")]
+    listening_mode: Option<String>,
+}
+
+#[derive(Debug, Deserialize)]
+struct AppConfig {
+    preferences: Option<PreferencesConfig>,
+}
+
+fn resolve_config_path() -> PathBuf {
+    let raw = env::var("CLI_CONFIG")
+        .ok()
+        .filter(|value| !value.trim().is_empty())
+        .unwrap_or_else(|| DEFAULT_CONFIG_PATH.to_string());
+    expand_home(&raw)
+}
+
+fn expand_home(path: &str) -> PathBuf {
+    if path.starts_with("~/") {
+        if let Some(home) = home_dir().or_else(|| env::var("HOME").ok().map(PathBuf::from)) {
+            return home.join(path.trim_start_matches("~/"));
+        }
+    }
+    PathBuf::from(path)
+}
+
+fn resolve_listening_mode() -> String {
+    let path = resolve_config_path();
+    if let Ok(content) = fs::read_to_string(path) {
+        if let Ok(config) = serde_json::from_str::<AppConfig>(&content) {
+            if let Some(mode) = config
+                .preferences
+                .as_ref()
+                .and_then(|prefs| prefs.listening_mode.as_ref())
+            {
+                if mode == "local" {
+                    return "local".to_string();
+                }
+                if mode == "all" {
+                    return "all".to_string();
+                }
+            }
+        }
+    }
+    "local".to_string()
+}
+
+fn resolve_listening_host() -> String {
+    let mode = resolve_listening_mode();
+    if mode == "local" {
+        "127.0.0.1".to_string()
+    } else {
+        "0.0.0.0".to_string()
+    }
+}
+
 #[derive(Debug, Clone, Serialize, PartialEq, Eq)]
 #[serde(rename_all = "lowercase")]
 pub enum CliState {
@@ -178,11 +241,12 @@ impl CliProcessManager {
     ) -> anyhow::Result<()> {
         log_line("resolving CLI entry");
         let resolution = CliEntry::resolve(&app, dev)?;
+        let host = resolve_listening_host();
         log_line(&format!(
-            "resolved CLI entry runner={:?} entry={}",
-            resolution.runner, resolution.entry
+            "resolved CLI entry runner={:?} entry={} host={}",
+            resolution.runner, resolution.entry, host
         ));
-        let args = resolution.build_args(dev);
+        let args = resolution.build_args(dev, &host);
         log_line(&format!("CLI args: {:?}", args));
         if dev {
             log_line("development mode: will prefer tsx + source if present");
@@ -280,7 +344,7 @@ impl CliProcessManager {
         let ready_clone = ready.clone();
         let child_holder_clone = child_holder.clone();
         thread::spawn(move || {
-            let timeout = Duration::from_secs(15);
+            let timeout = Duration::from_secs(60);
             thread::sleep(timeout);
             if ready_clone.load(Ordering::SeqCst) {
                 return;
@@ -355,7 +419,7 @@ impl CliProcessManager {
                 Ok(_) => {
                     let line = buffer.trim_end();
                     if !line.is_empty() {
-                        let _ = app.emit("cli:log", json!({"stream": stream, "message": line}));
+                        log_line(&format!("[cli][{}] {}", stream, line));
 
                         if ready.load(Ordering::SeqCst) {
                             continue;
@@ -480,11 +544,11 @@ impl CliEntry {
         ))
     }
 
-    fn build_args(&self, dev: bool) -> Vec<String> {
+    fn build_args(&self, dev: bool, host: &str) -> Vec<String> {
         let mut args = vec![
             "serve".to_string(),
             "--host".to_string(),
-            "127.0.0.1".to_string(),
+            host.to_string(),
             "--port".to_string(),
             "0".to_string(),
         ];
@@ -558,6 +622,18 @@ fn resolve_dist_entry(_app: &AppHandle) -> Option<String> {
             candidates.push(Some(resources.join("resources/server/dist/index.js")));
             candidates.push(Some(resources.join("resources/server/dist/server/bin.js")));
             candidates.push(Some(resources.join("resources/server/dist/server/index.js")));
+
+            let linux_resource_roots = [dir.join("../lib/CodeNomad"), dir.join("../lib/codenomad")];
+            for root in linux_resource_roots {
+                candidates.push(Some(root.join("server/dist/bin.js")));
+                candidates.push(Some(root.join("server/dist/index.js")));
+                candidates.push(Some(root.join("server/dist/server/bin.js")));
+                candidates.push(Some(root.join("server/dist/server/index.js")));
+                candidates.push(Some(root.join("resources/server/dist/bin.js")));
+                candidates.push(Some(root.join("resources/server/dist/index.js")));
+                candidates.push(Some(root.join("resources/server/dist/server/bin.js")));
+                candidates.push(Some(root.join("resources/server/dist/server/index.js")));
+            }
         }
     }
 

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

@@ -4,8 +4,12 @@ mod cli_manager;
 
 use cli_manager::{CliProcessManager, CliStatus};
 use serde_json::json;
-use tauri::menu::Menu;
-use tauri::{AppHandle, Emitter, Manager};
+use tauri::menu::{MenuBuilder, MenuItem, SubmenuBuilder};
+use tauri::plugin::{Builder as PluginBuilder, TauriPlugin};
+use tauri::webview::Webview;
+use tauri::{AppHandle, Emitter, Manager, Runtime, Wry};
+use tauri_plugin_opener::OpenerExt;
+use url::Url;
 
 #[derive(Clone)]
 pub struct AppState {
@@ -17,35 +21,162 @@ fn cli_get_status(state: tauri::State<AppState>) -> CliStatus {
     state.manager.status()
 }
 
+#[tauri::command]
+fn cli_restart(app: AppHandle, state: tauri::State<AppState>) -> Result<CliStatus, String> {
+    let dev_mode = is_dev_mode();
+    state.manager.stop().map_err(|e| e.to_string())?;
+    state
+        .manager
+        .start(app, dev_mode)
+        .map_err(|e| e.to_string())?;
+    Ok(state.manager.status())
+}
+
+fn is_dev_mode() -> bool {
+    cfg!(debug_assertions) || std::env::var("TAURI_DEV").is_ok()
+}
+
+fn should_allow_internal(url: &Url) -> bool {
+    match url.scheme() {
+        "tauri" | "asset" | "file" => true,
+        "http" | "https" => matches!(url.host_str(), Some("127.0.0.1" | "localhost")),
+        _ => false,
+    }
+}
+
+fn intercept_navigation<R: Runtime>(webview: &Webview<R>, url: &Url) -> bool {
+    if should_allow_internal(url) {
+        return true;
+    }
+
+    if let Err(err) = webview
+        .app_handle()
+        .opener()
+        .open_url(url.as_str(), None::<&str>)
+    {
+        eprintln!("[tauri] failed to open external link {}: {}", url, err);
+    }
+    false
+}
+
 fn main() {
+    let navigation_guard: TauriPlugin<Wry, ()> = PluginBuilder::new("external-link-guard")
+        .on_navigation(|webview, url| intercept_navigation(webview, url))
+        .build();
+
     tauri::Builder::default()
+        .plugin(tauri_plugin_dialog::init())
+        .plugin(tauri_plugin_opener::init())
+        .plugin(navigation_guard)
         .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 dev_mode = is_dev_mode();
             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()}),
-                    );
+                    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
+        .invoke_handler(tauri::generate_handler![cli_get_status, cli_restart])
+        .on_menu_event(|app_handle, event| {
+            match event.id().0.as_str() {
+                // File menu
+                "new_instance" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.emit("menu:newInstance", ());
+                    }
+                }
+                "close" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.close();
+                    }
+                }
+                "quit" => {
+                    app_handle.exit(0);
+                }
+
+                // View menu
+                "reload" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.eval("window.location.reload()");
+                    }
+                }
+                "force_reload" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.eval("window.location.reload(true)");
+                    }
+                }
+                "toggle_devtools" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        window.open_devtools();
+                    }
+                }
+
+                "toggle_fullscreen" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.set_fullscreen(!window.is_fullscreen().unwrap_or(false));
+                    }
+                }
+
+                // Window menu
+                "minimize" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.minimize();
+                    }
+                }
+                "zoom" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.maximize();
+                    }
+                }
+
+                // App menu (macOS)
+                "about" => {
+                    // TODO: Implement about dialog
+                    println!("About menu item clicked");
+                }
+                "hide" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.hide();
+                    }
+                }
+                "hide_others" => {
+                    // TODO: Hide other app windows
+                    println!("Hide Others menu item clicked");
+                }
+                "show_all" => {
+                    // TODO: Show all app windows
+                    println!("Show All menu item clicked");
+                }
+
+                _ => {
+                    println!("Unhandled menu event: {}", event.id().0);
+                }
+            }
         })
         .build(tauri::generate_context!())
         .expect("error while building tauri application")
-        .run(|app_handle, event| {
-            match event {
-                tauri::RunEvent::ExitRequested { .. } => {
+        .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>() {
@@ -54,25 +185,83 @@ fn main() {
                         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)?;
+    let is_mac = cfg!(target_os = "macos");
+
+    // Create submenus
+    let mut submenus = Vec::new();
+
+    // App menu (macOS only)
+    if is_mac {
+        let app_menu = SubmenuBuilder::new(app, "CodeNomad")
+            .text("about", "About CodeNomad")
+            .separator()
+            .text("hide", "Hide CodeNomad")
+            .text("hide_others", "Hide Others")
+            .text("show_all", "Show All")
+            .separator()
+            .text("quit", "Quit CodeNomad")
+            .build()?;
+        submenus.push(app_menu);
+    }
+
+    // File menu - create New Instance with accelerator
+    let new_instance_item = MenuItem::with_id(
+        app,
+        "new_instance",
+        "New Instance",
+        true,
+        Some("CmdOrCtrl+N")
+    )?;
+    
+    let file_menu = SubmenuBuilder::new(app, "File")
+        .item(&new_instance_item)
+        .separator()
+        .text(if is_mac { "close" } else { "quit" }, if is_mac { "Close" } else { "Quit" })
+        .build()?;
+    submenus.push(file_menu);
+
+    // Edit menu with predefined items for standard functionality
+    let edit_menu = SubmenuBuilder::new(app, "Edit")
+        .undo()
+        .redo()
+        .separator()
+        .cut()
+        .copy()
+        .paste()
+        .separator()
+        .select_all()
+        .build()?;
+    submenus.push(edit_menu);
+
+    // View menu
+    let view_menu = SubmenuBuilder::new(app, "View")
+        .text("reload", "Reload")
+        .text("force_reload", "Force Reload")
+        .text("toggle_devtools", "Toggle Developer Tools")
+        .separator()
+
+        .separator()
+        .text("toggle_fullscreen", "Toggle Full Screen")
+        .build()?;
+    submenus.push(view_menu);
+
+    // Window menu
+    let window_menu = SubmenuBuilder::new(app, "Window")
+        .text("minimize", "Minimize")
+        .text("zoom", "Zoom")
+        .build()?;
+    submenus.push(window_menu);
+
+    // Build the main menu with all submenus
+    let submenu_refs: Vec<&dyn tauri::menu::IsMenuItem<_>> = submenus.iter().map(|s| s as &dyn tauri::menu::IsMenuItem<_>).collect();
+    let menu = MenuBuilder::new(app).items(&submenu_refs).build()?;
+    
     app.set_menu(menu)?;
     Ok(())
 }

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

@@ -4,17 +4,20 @@
   "version": "0.1.0",
   "identifier": "ai.opencode.client",
   "build": {
-    "beforeDevCommand": "",
+    "beforeDevCommand": "npm run dev:bootstrap",
     "beforeBuildCommand": "npm run bundle:server",
-    "frontendDist": "../src"
+    "frontendDist": "resources/ui-loading"
   },
+
+ 
+
   "app": {
     "withGlobalTauri": true,
     "windows": [
       {
         "label": "main",
         "title": "CodeNomad",
-        "url": "index.html",
+        "url": "loading.html",
         "width": 1400,
         "height": 900,
         "minWidth": 800,
@@ -22,21 +25,24 @@
         "center": true,
         "resizable": true,
         "fullscreen": false,
-        "decorations": true
+        "decorations": true,
+        "theme": "Dark",
+        "backgroundColor": "#1a1a1a",
+        "zoomHotkeysEnabled": true
       }
     ],
     "security": {
       "assetProtocol": {
         "scope": ["**"]
-      }
+      },
+      "capabilities": ["main-window-native-dialogs"]
     }
   },
   "bundle": {
     "active": true,
     "resources": [
-      "../src/index.html",
-      "../src/icon.png",
-      "resources/server"
+      "resources/server",
+      "resources/ui-loading"
     ],
     "icon": ["icon.icns", "icon.ico", "icon.png"],
     "targets": ["app", "appimage", "deb", "rpm", "nsis"]

packages/tauri-app/src/index.html

@@ -1,197 +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;
-      }
-      .error {
-        margin-top: 12px;
-        color: #ff9ea9;
-        font-size: 0.95rem;
-      }
-      @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 class="error" id="error"></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")
-      const errorEl = document.getElementById("error")
-
-      function pickPhrase() {
-        const next = phrases[Math.floor(Math.random() * phrases.length)]
-        phraseEl.textContent = next
-      }
-
-      function setError(message) {
-        errorEl.textContent = message || ""
-      }
-
-      function navigateTo(url) {
-        if (!url) return
-        window.location.replace(url)
-      }
-
-      async function bootstrap() {
-        pickPhrase()
-        button?.addEventListener("click", pickPhrase)
-
-        if (!window.__TAURI__ || !window.__TAURI__.event || !window.__TAURI__.invoke) {
-          return
-        }
-
-        const { listen } = window.__TAURI__.event
-        const invoke = window.__TAURI__.invoke
-
-        listen("cli:ready", (event) => {
-          const payload = event?.payload || {}
-          if (payload.url) {
-            navigateTo(payload.url)
-          }
-        })
-
-        listen("cli:error", (event) => {
-          const payload = event?.payload || {}
-          if (payload.message) {
-            setError(payload.message)
-          }
-        })
-
-        listen("cli:status", (event) => {
-          const payload = event?.payload || {}
-          if (payload.state !== "ready") {
-            setError("")
-          }
-        })
-
-        try {
-          const status = await invoke("cli_get_status")
-          if (status?.state === "ready" && status.url) {
-            navigateTo(status.url)
-          }
-          if (status?.state === "error" && status.error) {
-            setError(status.error)
-          }
-        } catch (error) {
-          setError(String(error))
-        }
-      }
-
-      bootstrap()
-    </script>
-  </body>
-</html>

packages/ui/README.md

@@ -26,8 +26,29 @@ This starts the Vite dev server at `http://localhost:3000`.
 
 To build the production assets:
 
-```bash
+```
 npm run build
 ```
 
 The output will be generated in the `dist` directory, which is then consumed by the Server or Electron app.
+
+## Debug Logging
+
+The UI now routes all logging through a lightweight wrapper around [`debug`](https://github.com/debug-js/debug). The logger exposes four namespaces that can be toggled at runtime:
+
+- `sse` – Server-sent event transport and handlers
+- `api` – HTTP/API calls and workspace lifecycle
+- `session` – Session/model state, prompt handling, tool calls
+- `actions` – User-driven interactions in UI components
+
+You can enable or disable namespaces from DevTools (in dev or production builds) via the global `window.codenomadLogger` helpers:
+
+```js
+window.codenomadLogger?.listLoggerNamespaces() // => [{ name: "sse", enabled: false }, ...]
+window.codenomadLogger?.enableLogger("sse") // turn on SSE logs
+window.codenomadLogger?.disableLogger("sse") // turn them off again
+window.codenomadLogger?.enableAllLoggers() // optional helper
+```
+
+Enabled namespaces are persisted in `localStorage` under `opencode:logger:namespaces`, so your preference survives reloads.
+

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/ui",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -12,11 +12,16 @@
   "dependencies": {
     "@git-diff-view/solid": "^0.0.8",
     "@kobalte/core": "0.13.11",
-    "@opencode-ai/sdk": "1.0.68",
+    "@opencode-ai/sdk": "^1.0.138",
     "@solidjs/router": "^0.13.0",
+    "@suid/icons-material": "^0.9.0",
+    "@suid/material": "^0.19.0",
+    "@suid/system": "^0.14.0",
+    "debug": "^4.4.3",
     "github-markdown-css": "^5.8.1",
     "lucide-solid": "^0.300.0",
     "marked": "^12.0.0",
+    "qrcode": "^1.5.3",
     "shiki": "^3.13.0",
     "solid-js": "^1.8.0",
     "solid-toast": "^0.5.0"

packages/ui/src/App.tsx

@@ -1,4 +1,4 @@
-import { Component, Show, createMemo, createEffect, createSignal } from "solid-js"
+import { Component, For, Show, createMemo, createEffect, createSignal, onMount, onCleanup } from "solid-js"
 import { Dialog } from "@kobalte/core/dialog"
 import { Toaster } from "solid-toast"
 import AlertDialog from "./components/alert-dialog"
@@ -6,11 +6,17 @@ import FolderSelectionView from "./components/folder-selection-view"
 import { showConfirmDialog } from "./stores/alerts"
 import InstanceTabs from "./components/instance-tabs"
 import InstanceDisconnectedModal from "./components/instance-disconnected-modal"
-import InstanceShell from "./components/instance/instance-shell"
+import InstanceShell from "./components/instance/instance-shell2"
+import { RemoteAccessOverlay } from "./components/remote-access-overlay"
+import { InstanceMetadataProvider } from "./lib/contexts/instance-metadata-context"
 import { initMarkdown } from "./lib/markdown"
+
 import { useTheme } from "./lib/theme"
 import { useCommands } from "./lib/hooks/use-commands"
 import { useAppLifecycle } from "./lib/hooks/use-app-lifecycle"
+import { getLogger } from "./lib/logger"
+import { initReleaseNotifications } from "./stores/releases"
+import { runtimeEnv } from "./lib/runtime-env"
 import {
   hasInstances,
   isSelectingFolder,
@@ -19,6 +25,7 @@ import {
   showFolderSelection,
   setShowFolderSelection,
 } from "./stores/ui"
+import { instances as instanceStore } from "./stores/instances"
 import { useConfig } from "./stores/preferences"
 import {
   createInstance,
@@ -41,22 +48,53 @@ import {
   updateSessionModel,
 } from "./stores/sessions"
 
+const log = getLogger("actions")
+
 const App: Component = () => {
   const { isDark } = useTheme()
   const {
     preferences,
     recordWorkspaceLaunch,
     toggleShowThinkingBlocks,
+    toggleShowTimelineTools,
+    toggleAutoCleanupBlankSessions,
+    toggleUsageMetrics,
     setDiffViewMode,
     setToolOutputExpansion,
     setDiagnosticsExpansion,
+    setThinkingBlocksExpansion,
   } = useConfig()
   const [escapeInDebounce, setEscapeInDebounce] = createSignal(false)
   const [launchErrorBinary, setLaunchErrorBinary] = createSignal<string | null>(null)
   const [isAdvancedSettingsOpen, setIsAdvancedSettingsOpen] = createSignal(false)
+  const [remoteAccessOpen, setRemoteAccessOpen] = createSignal(false)
+  const [instanceTabBarHeight, setInstanceTabBarHeight] = createSignal(0)
+
+  const updateInstanceTabBarHeight = () => {
+    if (typeof document === "undefined") return
+    const element = document.querySelector<HTMLElement>(".tab-bar-instance")
+    setInstanceTabBarHeight(element?.offsetHeight ?? 0)
+  }
 
   createEffect(() => {
-    void initMarkdown(isDark()).catch(console.error)
+    void initMarkdown(isDark()).catch((error) => log.error("Failed to initialize markdown", error))
+  })
+
+  createEffect(() => {
+    initReleaseNotifications()
+  })
+
+  createEffect(() => {
+    instances()
+    hasInstances()
+    requestAnimationFrame(() => updateInstanceTabBarHeight())
+  })
+
+  onMount(() => {
+    updateInstanceTabBarHeight()
+    const handleResize = () => updateInstanceTabBarHeight()
+    window.addEventListener("resize", handleResize)
+    onCleanup(() => window.removeEventListener("resize", handleResize))
   })
 
   const activeInstance = createMemo(() => getActiveInstance())
@@ -101,13 +139,16 @@ const App: Component = () => {
       setShowFolderSelection(false)
       setIsAdvancedSettingsOpen(false)
 
-      console.log("Created instance:", instanceId, "Port:", instances().get(instanceId)?.port)
+      log.info("Created instance", {
+        instanceId,
+        port: instances().get(instanceId)?.port,
+      })
     } catch (error) {
       clearLaunchError()
       if (isMissingBinaryError(error)) {
         setLaunchErrorBinary(selectedBinary)
       }
-      console.error("Failed to create instance:", error)
+      log.error("Failed to create instance", error)
     } finally {
       setIsSelectingFolder(false)
     }
@@ -132,7 +173,7 @@ const App: Component = () => {
     try {
       await acknowledgeDisconnectedInstance()
     } catch (error) {
-      console.error("Failed to finalize disconnected instance:", error)
+      log.error("Failed to finalize disconnected instance", error)
     }
   }
 
@@ -160,7 +201,7 @@ const App: Component = () => {
       const session = await createSession(instanceId)
       setActiveParentSession(instanceId, session.id)
     } catch (error) {
-      console.error("Failed to create session:", error)
+      log.error("Failed to create session", error)
     }
   }
 
@@ -184,7 +225,7 @@ const App: Component = () => {
     try {
       await fetchSessions(instanceId)
     } catch (error) {
-      console.error("Failed to refresh sessions after closing:", error)
+      log.error("Failed to refresh sessions after closing", error)
     }
   }
 
@@ -204,10 +245,14 @@ const App: Component = () => {
 
   const { commands: paletteCommands, executeCommand } = useCommands({
     preferences,
+    toggleAutoCleanupBlankSessions,
     toggleShowThinkingBlocks,
+    toggleShowTimelineTools,
+    toggleUsageMetrics,
     setDiffViewMode,
     setToolOutputExpansion,
     setDiagnosticsExpansion,
+    setThinkingBlocksExpansion,
     handleNewInstanceRequest,
     handleCloseInstance,
     handleNewSession,
@@ -228,6 +273,28 @@ const App: Component = () => {
     getActiveSessionIdForInstance: activeSessionIdForInstance,
   })
 
+  // Listen for Tauri menu events
+  onMount(() => {
+    if (runtimeEnv.host === "tauri") {
+      const tauriBridge = (window as { __TAURI__?: { event?: { listen: (event: string, handler: (event: { payload: unknown }) => void) => Promise<() => void> } } }).__TAURI__
+      if (tauriBridge?.event) {
+        let unlistenMenu: (() => void) | null = null
+        
+        tauriBridge.event.listen("menu:newInstance", () => {
+          handleNewInstanceRequest()
+        }).then((unlisten) => {
+          unlistenMenu = unlisten
+        }).catch((error) => {
+          log.error("Failed to listen for menu:newInstance event", error)
+        })
+
+        onCleanup(() => {
+          unlistenMenu?.()
+        })
+      }
+    }
+  })
+
   return (
     <>
       <InstanceDisconnectedModal
@@ -244,7 +311,7 @@ const App: Component = () => {
             <Dialog.Content class="modal-surface w-full max-w-md p-6 flex flex-col gap-6">
               <div>
                 <Dialog.Title class="text-xl font-semibold text-primary">Unable to launch OpenCode</Dialog.Title>
-                <Dialog.Description class="text-sm text-secondary mt-2">
+                <Dialog.Description class="text-sm text-secondary mt-2 break-words">
                   Install the OpenCode CLI and make sure it is available in your PATH, or pick a custom binary from
                   Advanced Settings.
                 </Dialog.Description>
@@ -278,22 +345,35 @@ const App: Component = () => {
                 onSelect={setActiveInstanceId}
                 onClose={handleCloseInstance}
                 onNew={handleNewInstanceRequest}
+                onOpenRemoteAccess={() => setRemoteAccessOpen(true)}
               />
+ 
+              <For each={Array.from(instances().values())}>
+                {(instance) => {
+                  const isActiveInstance = () => activeInstanceId() === instance.id
+                  const isVisible = () => isActiveInstance() && !showFolderSelection()
+                    return (
+                      <div class="flex-1 min-h-0 overflow-hidden" style={{ display: isVisible() ? "flex" : "none" }}>
+                        <InstanceMetadataProvider instance={instance}>
+                          <InstanceShell
+                            instance={instance}
+                            escapeInDebounce={escapeInDebounce()}
+                            paletteCommands={paletteCommands}
+                            onCloseSession={(sessionId) => handleCloseSession(instance.id, sessionId)}
+                            onNewSession={() => handleNewSession(instance.id)}
+                            handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(instance.id, sessionId, agent)}
+                            handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(instance.id, sessionId, model)}
+                            onExecuteCommand={executeCommand}
+                            tabBarOffset={instanceTabBarHeight()}
+                          />
+                        </InstanceMetadataProvider>
+
+                      </div>
+                    )
+
+                }}
+              </For>
 
-              <Show when={activeInstance()} keyed>
-                {(instance) => (
-                  <InstanceShell
-                    instance={instance}
-                    escapeInDebounce={escapeInDebounce()}
-                    paletteCommands={paletteCommands}
-                    onCloseSession={(sessionId) => handleCloseSession(instance.id, sessionId)}
-                    onNewSession={() => handleNewSession(instance.id)}
-                    handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(instance.id, sessionId, agent)}
-                    handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(instance.id, sessionId, model)}
-                    onExecuteCommand={executeCommand}
-                  />
-                )}
-              </Show>
             </>
           }
         >
@@ -303,6 +383,7 @@ const App: Component = () => {
             advancedSettingsOpen={isAdvancedSettingsOpen()}
             onAdvancedSettingsOpen={() => setIsAdvancedSettingsOpen(true)}
             onAdvancedSettingsClose={() => setIsAdvancedSettingsOpen(false)}
+            onOpenRemoteAccess={() => setRemoteAccessOpen(true)}
           />
         </Show>
 
@@ -332,7 +413,9 @@ const App: Component = () => {
             </div>
           </div>
         </Show>
-
+ 
+        <RemoteAccessOverlay open={remoteAccessOpen()} onClose={() => setRemoteAccessOpen(false)} />
+ 
         <AlertDialog />
 
         <Toaster
@@ -348,4 +431,5 @@ const App: Component = () => {
   )
 }
 
+
 export default App

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

@@ -3,7 +3,9 @@ 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"
+import { getLogger } from "../lib/logger"
+const log = getLogger("session")
+
 
 interface AgentSelectorProps {
   instanceId: string
@@ -50,10 +52,11 @@ export default function AgentSelector(props: AgentSelectorProps) {
 
   createEffect(() => {
     if (instanceAgents().length === 0) {
-      fetchAgents(props.instanceId).catch(console.error)
+      fetchAgents(props.instanceId).catch((error) => log.error("Failed to fetch agents", error))
     }
   })
 
+
   const handleChange = async (value: Agent | null) => {
     if (value && value.name !== props.currentAgent) {
       await props.onAgentChange(value.name)
@@ -111,14 +114,11 @@ export default function AgentSelector(props: AgentSelectorProps) {
         </Select.Trigger>
 
         <Select.Portal>
-          <Select.Content class="selector-popover max-h-80 overflow-auto p-1 z-50">
+          <Select.Content class="selector-popover max-h-80 overflow-auto p-1">
             <Select.Listbox class="selector-listbox" />
           </Select.Content>
         </Select.Portal>
       </Select>
-      <span class="hint sidebar-selector-hint">
-        <Kbd shortcut="cmd+shift+a" />
-      </span>
     </div>
   )
 }

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

@@ -89,9 +89,9 @@ const AlertDialog: Component = () => {
                     >
                       {accent.symbol}
                     </div>
-                    <div class="flex-1">
+                    <div class="flex-1 min-w-0">
                       <Dialog.Title class="text-lg font-semibold text-primary">{title}</Dialog.Title>
-                      <Dialog.Description class="text-sm text-secondary mt-1 whitespace-pre-line">
+                      <Dialog.Description class="text-sm text-secondary mt-1 whitespace-pre-line break-words">
                         {payload.message}
                         {payload.detail && <p class="mt-2 text-secondary">{payload.detail}</p>}
                       </Dialog.Description>

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

@@ -1,10 +1,18 @@
-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 { disableCache } from "@git-diff-view/core"
 import type { DiffHighlighterLang } from "@git-diff-view/core"
+import { ErrorBoundary } from "solid-js"
 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"
+import { getLogger } from "../lib/logger"
+const log = getLogger("session")
+
+
+disableCache()
 
 interface ToolCallDiffViewerProps {
   diffText: string
@@ -13,7 +21,7 @@ interface ToolCallDiffViewerProps {
   mode: DiffViewMode
   onRendered?: () => void
   cachedHtml?: string
-  cacheKey?: string
+  cacheEntryParams?: CacheEntryParams
 }
 
 type DiffData = {
@@ -22,16 +30,23 @@ 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)
     if (!normalized) {
       return null
     }
-
+ 
     const language = getLanguageFromPath(props.filePath) || "text"
     const fileName = props.filePath || "diff"
-
+ 
     return {
       oldFile: {
         fileName,
@@ -44,34 +59,48 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
       hunks: [normalized],
     }
   })
-
+ 
   let diffContainerRef: HTMLDivElement | 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, {
+  let lastCapturedKey: string | undefined
+ 
+  const contextKey = createMemo(() => {
+    const data = diffData()
+    if (!data) return ""
+    return `${props.theme}|${props.mode}|${props.diffText}`
+  })
+ 
+  createEffect(() => {
+    const cachedHtml = props.cachedHtml
+    if (cachedHtml) {
+      // When we are given cached HTML, we rely on the caller's cache
+      // and simply notify once rendered.
+      props.onRendered?.()
+      return
+    }
+ 
+    const key = contextKey()
+    if (!key) return
+    if (!diffContainerRef) return
+    if (lastCapturedKey === key) return
+ 
+    requestAnimationFrame(() => {
+      if (!diffContainerRef) return
+      const markup = diffContainerRef.innerHTML
+      if (!markup) return
+      lastCapturedKey = key
+      if (props.cacheEntryParams) {
+        setCacheEntry(props.cacheEntryParams, {
           text: props.diffText,
-          html: renderedHtml,
+          html: markup,
           theme: props.theme,
           mode: props.mode,
         })
       }
-    }
-    props.onRendered?.()
-  }
-
-  // Also capture HTML when diff data changes
-  createEffect(() => {
-    const data = diffData()
-    if (data && !props.cachedHtml) {
-      // Delay to allow DiffView to re-render with new data
-      setTimeout(captureAndCacheHtml, 100)
-    }
+      props.onRendered?.()
+    })
   })
 
+
   return (
     <div class="tool-call-diff-viewer">
       <Show
@@ -83,14 +112,19 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
               fallback={<pre class="tool-call-diff-fallback">{props.diffText}</pre>}
             >
               {(data) => (
-                <DiffView
-                  data={data()}
-                  diffViewMode={props.mode === "split" ? DiffModeEnum.Split : DiffModeEnum.Unified}
-                  diffViewTheme={props.theme}
-                  diffViewHighlight
-                  diffViewWrap={false}
-                  diffViewFontSize={13}
-                />
+                <ErrorBoundary fallback={(error) => {
+                  log.warn("Failed to render diff view", error)
+                  return <pre class="tool-call-diff-fallback">{props.diffText}</pre>
+                }}>
+                  <DiffView
+                    data={data()}
+                    diffViewMode={props.mode === "split" ? DiffModeEnum.Split : DiffModeEnum.Unified}
+                    diffViewTheme={props.theme}
+                    diffViewHighlight
+                    diffViewWrap={false}
+                    diffViewFontSize={13}
+                  />
+                </ErrorBoundary>
               )}
             </Show>
           </div>

packages/ui/src/components/filesystem-browser-dialog.tsx

@@ -2,6 +2,9 @@ import { Component, Show, For, createSignal, createMemo, createEffect, onCleanup
 import { Folder as FolderIcon, File as FileIcon, Loader2, Search, X, ArrowUpLeft } from "lucide-solid"
 import type { FileSystemEntry, FileSystemListingMetadata } from "../../../server/src/api-types"
 import { serverApi } from "../lib/api-client"
+import { getLogger } from "../lib/logger"
+const log = getLogger("actions")
+
 
 const MAX_RESULTS = 200
 
@@ -172,7 +175,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
 
   function handleNavigateTo(path: string) {
     void fetchDirectory(path, true).catch((err) => {
-      console.error("Failed to open directory", err)
+      log.error("Failed to open directory", err)
       setError(err instanceof Error ? err.message : "Unable to open directory")
     })
   }

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

@@ -1,18 +1,21 @@
 import { Component, createSignal, Show, For, onMount, onCleanup, createEffect } from "solid-js"
-import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight } from "lucide-solid"
+import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp } from "lucide-solid"
 import { useConfig } from "../stores/preferences"
 import AdvancedSettingsModal from "./advanced-settings-modal"
 import DirectoryBrowserDialog from "./directory-browser-dialog"
 import Kbd from "./kbd"
+import { openNativeFolderDialog, supportsNativeDialogs } from "../lib/native/native-functions"
 
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 
+
 interface FolderSelectionViewProps {
   onSelectFolder: (folder: string, binaryPath?: string) => void
   isLoading?: boolean
   advancedSettingsOpen?: boolean
   onAdvancedSettingsOpen?: () => void
   onAdvancedSettingsClose?: () => void
+  onOpenRemoteAccess?: () => void
 }
 
 const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
@@ -21,6 +24,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 +33,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 +81,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
 
     if (isBrowseShortcut) {
       e.preventDefault()
-      handleBrowse()
+      void handleBrowse()
       return
     }
 
@@ -172,9 +175,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)
   }
  
@@ -210,16 +224,27 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   return (
     <>
       <div
-        class="flex h-screen w-full items-start justify-center overflow-hidden py-6 relative"
+        class="flex h-screen w-full items-start justify-center overflow-hidden py-6 px-4 sm:px-6 relative"
         style="background-color: var(--surface-secondary)"
       >
         <div
-          class="w-full max-w-3xl h-full px-8 pb-2 flex flex-col overflow-hidden"
+          class="w-full max-w-3xl h-full px-4 sm:px-8 pb-2 flex flex-col overflow-hidden"
           aria-busy={isLoading() ? "true" : "false"}
         >
+          <Show when={props.onOpenRemoteAccess}>
+            <div class="absolute top-4 right-6">
+              <button
+                type="button"
+                class="selector-button selector-button-secondary inline-flex items-center justify-center"
+                onClick={() => props.onOpenRemoteAccess?.()}
+              >
+                <MonitorUp class="w-4 h-4" />
+              </button>
+            </div>
+          </Show>
         <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>
@@ -229,6 +254,8 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
           <div class="space-y-4 flex-1 min-h-0 overflow-hidden flex flex-col">
 
             <Show
+
+
               when={folders().length > 0}
               fallback={
                 <div class="panel panel-empty-state flex-1">
@@ -306,14 +333,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 +369,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-disconnected-modal.tsx

@@ -19,7 +19,7 @@ export default function InstanceDisconnectedModal(props: InstanceDisconnectedMod
           <Dialog.Content class="modal-surface w-full max-w-md p-6 flex flex-col gap-6">
             <div>
               <Dialog.Title class="text-xl font-semibold text-primary">Instance Disconnected</Dialog.Title>
-              <Dialog.Description class="text-sm text-secondary mt-2">
+              <Dialog.Description class="text-sm text-secondary mt-2 break-words">
                 {folderLabel} can no longer be reached. Close the tab to continue working.
               </Dialog.Description>
             </div>

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

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

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

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

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

@@ -2,7 +2,7 @@ import { Component, For, Show } from "solid-js"
 import type { Instance } from "../types/instance"
 import InstanceTab from "./instance-tab"
 import KeyboardHint from "./keyboard-hint"
-import { Plus } from "lucide-solid"
+import { Plus, MonitorUp } from "lucide-solid"
 import { keyboardRegistry } from "../lib/keyboard-registry"
 
 interface InstanceTabsProps {
@@ -11,43 +11,60 @@ interface InstanceTabsProps {
   onSelect: (instanceId: string) => void
   onClose: (instanceId: string) => void
   onNew: () => void
+  onOpenRemoteAccess?: () => void
 }
 
 const InstanceTabs: Component<InstanceTabsProps> = (props) => {
   return (
     <div class="tab-bar tab-bar-instance">
       <div class="tab-container" role="tablist">
-        <div class="flex items-center gap-1 overflow-x-auto">
-          <For each={Array.from(props.instances.entries())}>
-            {([id, instance]) => (
-              <InstanceTab
-                instance={instance}
-                active={id === props.activeInstanceId}
-                onSelect={() => props.onSelect(id)}
-                onClose={() => props.onClose(id)}
-              />
-            )}
-          </For>
-          <button
-            class="new-tab-button"
-            onClick={props.onNew}
-            title="New instance (Cmd/Ctrl+N)"
-            aria-label="New instance"
-          >
-            <Plus class="w-4 h-4" />
-          </button>
-        </div>
-        <Show when={Array.from(props.instances.entries()).length > 1}>
-          <div class="flex-shrink-0 ml-4">
-            <KeyboardHint
-              shortcuts={[keyboardRegistry.get("instance-prev")!, keyboardRegistry.get("instance-next")!].filter(
-                Boolean,
-              )}
-            />
+        <div class="tab-scroll">
+          <div class="tab-strip">
+            <div class="tab-strip-tabs">
+              <For each={Array.from(props.instances.entries())}>
+                {([id, instance]) => (
+                  <InstanceTab
+                    instance={instance}
+                    active={id === props.activeInstanceId}
+                    onSelect={() => props.onSelect(id)}
+                    onClose={() => props.onClose(id)}
+                  />
+                )}
+              </For>
+              <button
+                class="new-tab-button"
+                onClick={props.onNew}
+                title="New instance (Cmd/Ctrl+N)"
+                aria-label="New instance"
+              >
+                <Plus class="w-4 h-4" />
+              </button>
+            </div>
+            <div class="tab-strip-spacer" />
+            <Show when={Array.from(props.instances.entries()).length > 1}>
+              <div class="tab-shortcuts">
+                <KeyboardHint
+                  shortcuts={[keyboardRegistry.get("instance-prev")!, keyboardRegistry.get("instance-next")!].filter(
+                    Boolean,
+                  )}
+                />
+              </div>
+            </Show>
+            <Show when={Boolean(props.onOpenRemoteAccess)}>
+              <button
+                class="new-tab-button tab-remote-button"
+                onClick={() => props.onOpenRemoteAccess?.()}
+                title="Remote connect"
+                aria-label="Remote connect"
+              >
+                <MonitorUp class="w-4 h-4" />
+              </button>
+            </Show>
           </div>
-        </Show>
+        </div>
       </div>
     </div>
+
   )
 }
 

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

@@ -1,11 +1,17 @@
 import { Component, createSignal, Show, For, createEffect, onMount, onCleanup, createMemo } from "solid-js"
+import { Loader2, Pencil, Trash2 } from "lucide-solid"
+
 import type { Instance } from "../types/instance"
-import { getParentSessions, createSession, setActiveParentSession } from "../stores/sessions"
+import { getParentSessions, createSession, setActiveParentSession, deleteSession, loading, renameSession } from "../stores/sessions"
 import InstanceInfo from "./instance-info"
-import KeyboardHint from "./keyboard-hint"
 import Kbd from "./kbd"
+import SessionRenameDialog from "./session-rename-dialog"
 import { keyboardRegistry, type KeyboardShortcut } from "../lib/keyboard-registry"
 import { isMac } from "../lib/keyboard-utils"
+import { showToastNotification } from "../lib/notifications"
+import { getLogger } from "../lib/logger"
+const log = getLogger("actions")
+
 
 
 interface InstanceWelcomeViewProps {
@@ -16,8 +22,19 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
   const [isCreating, setIsCreating] = createSignal(false)
   const [selectedIndex, setSelectedIndex] = createSignal(0)
   const [focusMode, setFocusMode] = createSignal<"sessions" | "new-session" | null>("sessions")
+  const [showInstanceInfoOverlay, setShowInstanceInfoOverlay] = createSignal(false)
+  const [isDesktopLayout, setIsDesktopLayout] = createSignal(
+    typeof window !== "undefined" ? window.matchMedia("(min-width: 1024px)").matches : false,
+  )
+  const [renameTarget, setRenameTarget] = createSignal<{ id: string; title: string; label: string } | null>(null)
+  const [isRenaming, setIsRenaming] = createSignal(false)
 
   const parentSessions = () => getParentSessions(props.instance.id)
+  const isFetchingSessions = createMemo(() => Boolean(loading().fetchingSessions.get(props.instance.id)))
+  const isSessionDeleting = (sessionId: string) => {
+    const deleting = loading().deletingSession.get(props.instance.id)
+    return deleting ? deleting.has(sessionId) : false
+  }
   const newSessionShortcut = createMemo<KeyboardShortcut>(() => {
     const registered = keyboardRegistry.get("session-new")
     if (registered) return registered
@@ -47,6 +64,12 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
     }
   })
 
+  const openInstanceInfoOverlay = () => {
+    if (isDesktopLayout()) return
+    setShowInstanceInfoOverlay(true)
+  }
+  const closeInstanceInfoOverlay = () => setShowInstanceInfoOverlay(false)
+
   function scrollToIndex(index: number) {
     const element = document.querySelector(`[data-session-index="${index}"]`)
     if (element) {
@@ -55,75 +78,170 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
   }
 
   function handleKeyDown(e: KeyboardEvent) {
+    let activeElement: HTMLElement | null = null
+    if (typeof document !== "undefined") {
+      activeElement = document.activeElement as HTMLElement | null
+    }
+    const insideModal = activeElement?.closest(".modal-surface") || activeElement?.closest("[role='dialog']")
+    const isEditingField =
+      activeElement &&
+      (["INPUT", "TEXTAREA", "SELECT"].includes(activeElement.tagName) ||
+        activeElement.isContentEditable ||
+        Boolean(insideModal))
+ 
+    if (isEditingField) {
+      if (insideModal && e.key === "Escape" && renameTarget()) {
+        e.preventDefault()
+        closeRenameDialog()
+      }
+      return
+    }
+ 
+    if (showInstanceInfoOverlay()) {
+      if (e.key === "Escape") {
+        e.preventDefault()
+        closeInstanceInfoOverlay()
+      }
+      return
+    }
+ 
     const sessions = parentSessions()
-
+ 
     if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "n") {
       e.preventDefault()
       handleNewSession()
       return
     }
-
+ 
     if (sessions.length === 0) return
-
+ 
+    const listFocused = focusMode() === "sessions"
+ 
     if (e.key === "ArrowDown") {
+      if (!listFocused) {
+        setFocusMode("sessions")
+        setSelectedIndex(0)
+      }
       e.preventDefault()
       const newIndex = Math.min(selectedIndex() + 1, sessions.length - 1)
       setSelectedIndex(newIndex)
-      setFocusMode("sessions")
       scrollToIndex(newIndex)
-    } else if (e.key === "ArrowUp") {
+      return
+    }
+ 
+    if (e.key === "ArrowUp") {
+      if (!listFocused) {
+        setFocusMode("sessions")
+        setSelectedIndex(Math.max(parentSessions().length - 1, 0))
+      }
       e.preventDefault()
       const newIndex = Math.max(selectedIndex() - 1, 0)
       setSelectedIndex(newIndex)
-      setFocusMode("sessions")
       scrollToIndex(newIndex)
-    } else if (e.key === "PageDown") {
+      return
+    }
+ 
+    if (!listFocused) {
+      return
+    }
+ 
+    if (e.key === "PageDown") {
       e.preventDefault()
       const pageSize = 5
       const newIndex = Math.min(selectedIndex() + pageSize, sessions.length - 1)
       setSelectedIndex(newIndex)
-      setFocusMode("sessions")
       scrollToIndex(newIndex)
     } else if (e.key === "PageUp") {
       e.preventDefault()
       const pageSize = 5
       const newIndex = Math.max(selectedIndex() - pageSize, 0)
       setSelectedIndex(newIndex)
-      setFocusMode("sessions")
       scrollToIndex(newIndex)
     } else if (e.key === "Home") {
       e.preventDefault()
       setSelectedIndex(0)
-      setFocusMode("sessions")
       scrollToIndex(0)
     } else if (e.key === "End") {
       e.preventDefault()
       const newIndex = sessions.length - 1
       setSelectedIndex(newIndex)
-      setFocusMode("sessions")
       scrollToIndex(newIndex)
     } else if (e.key === "Enter") {
       e.preventDefault()
-      handleEnterKey()
+      void handleEnterKey()
+    } else if (e.key === "Delete" || e.key === "Backspace") {
+      e.preventDefault()
+      void handleDeleteKey()
     }
   }
 
+
   async function handleEnterKey() {
     const sessions = parentSessions()
     const index = selectedIndex()
-
+ 
     if (index < sessions.length) {
       await handleSessionSelect(sessions[index].id)
     }
   }
-
-  onMount(() => {
+ 
+  async function handleDeleteKey() {
+    const sessions = parentSessions()
+    const index = selectedIndex()
+ 
+    if (index >= sessions.length) {
+      return
+    }
+ 
+    await handleSessionDelete(sessions[index].id)
+ 
+    const updatedSessions = parentSessions()
+    if (updatedSessions.length === 0) {
+      setFocusMode("new-session")
+      setSelectedIndex(0)
+      return
+    }
+ 
+    const nextIndex = Math.min(index, updatedSessions.length - 1)
+    setSelectedIndex(nextIndex)
+    setFocusMode("sessions")
+    scrollToIndex(nextIndex)
+  }
+ 
+   onMount(() => {
     window.addEventListener("keydown", handleKeyDown)
+
     onCleanup(() => {
       window.removeEventListener("keydown", handleKeyDown)
     })
   })
 
+  onMount(() => {
+    const mediaQuery = window.matchMedia("(min-width: 1024px)")
+    const handleMediaChange = (matches: boolean) => {
+      setIsDesktopLayout(matches)
+      if (matches) {
+        closeInstanceInfoOverlay()
+      }
+    }
+
+    const listener = (event: MediaQueryListEvent) => handleMediaChange(event.matches)
+
+    if (typeof mediaQuery.addEventListener === "function") {
+      mediaQuery.addEventListener("change", listener)
+      onCleanup(() => {
+        mediaQuery.removeEventListener("change", listener)
+      })
+    } else {
+      mediaQuery.addListener(listener)
+      onCleanup(() => {
+        mediaQuery.removeListener(listener)
+      })
+    }
+
+    handleMediaChange(mediaQuery.matches)
+  })
+
   function formatRelativeTime(timestamp: number): string {
     const seconds = Math.floor((Date.now() - timestamp) / 1000)
     const minutes = Math.floor(seconds / 60)
@@ -144,15 +262,51 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
     setActiveParentSession(props.instance.id, sessionId)
   }
 
+  async function handleSessionDelete(sessionId: string) {
+    if (isSessionDeleting(sessionId)) return
+
+    try {
+      await deleteSession(props.instance.id, sessionId)
+    } catch (error) {
+      log.error("Failed to delete session:", error)
+    }
+  }
+
+  function openRenameDialogForSession(sessionId: string, title: string) {
+    const label = title && title.trim() ? title : sessionId
+    setRenameTarget({ id: sessionId, title: title ?? "", label })
+  }
+
+  function closeRenameDialog() {
+    setRenameTarget(null)
+  }
+
+  async function handleRenameSubmit(nextTitle: string) {
+    const target = renameTarget()
+    if (!target) return
+
+    setIsRenaming(true)
+    try {
+      await renameSession(props.instance.id, target.id, nextTitle)
+      setRenameTarget(null)
+    } catch (error) {
+      log.error("Failed to rename session:", error)
+      showToastNotification({ message: "Unable to rename session", variant: "error" })
+    } finally {
+      setIsRenaming(false)
+    }
+  }
+
   async function handleNewSession() {
     if (isCreating()) return
 
     setIsCreating(true)
+
     try {
       const session = await createSession(props.instance.id)
       setActiveParentSession(props.instance.id, session.id)
     } catch (error) {
-      console.error("Failed to create session:", error)
+      log.error("Failed to create session:", error)
     } finally {
       setIsCreating(false)
     }
@@ -160,78 +314,155 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
 
   return (
     <div class="flex-1 flex flex-col overflow-hidden bg-surface-secondary">
-      <div class="flex-1 flex flex-col lg:flex-row gap-4 p-4 overflow-auto">
-        <div class="flex-1 flex flex-col gap-4 min-h-0">
+      <div class="flex-1 flex flex-col lg:flex-row gap-4 p-4 overflow-auto min-w-0">
+        <div class="flex-1 flex flex-col gap-4 min-h-0 min-w-0">
           <Show
             when={parentSessions().length > 0}
             fallback={
-              <div class="panel panel-empty-state flex-1 flex flex-col justify-center">
-                <div class="panel-empty-state-icon">
-                  <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-                    />
-                  </svg>
+              <Show
+                when={isFetchingSessions()}
+                fallback={
+                  <div class="panel panel-empty-state flex-1 flex flex-col justify-center">
+                    <div class="panel-empty-state-icon">
+                      <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                        />
+                      </svg>
+                    </div>
+                    <p class="panel-empty-state-title">No Previous Sessions</p>
+                    <p class="panel-empty-state-description">Create a new session below to get started</p>
+                    <Show when={!isDesktopLayout() && !showInstanceInfoOverlay()}>
+                      <button type="button" class="button-tertiary mt-4 lg:hidden" onClick={openInstanceInfoOverlay}>
+                        View Instance Info
+                      </button>
+                    </Show>
+                  </div>
+                }
+              >
+                <div class="panel panel-empty-state flex-1 flex flex-col justify-center">
+                  <div class="panel-empty-state-icon">
+                    <Loader2 class="w-12 h-12 mx-auto animate-spin text-muted" />
+                  </div>
+                  <p class="panel-empty-state-title">Loading Sessions</p>
+                  <p class="panel-empty-state-description">Fetching your previous sessions...</p>
                 </div>
-                <p class="panel-empty-state-title">No Previous Sessions</p>
-                <p class="panel-empty-state-description">Create a new session below to get started</p>
-              </div>
+              </Show>
             }
           >
             <div class="panel flex flex-col flex-1 min-h-0">
               <div class="panel-header">
-                <h2 class="panel-title">Resume Session</h2>
-                <p class="panel-subtitle">
-                  {parentSessions().length} {parentSessions().length === 1 ? "session" : "sessions"} available
-                </p>
+                <div class="flex flex-row flex-wrap items-center gap-2 justify-between">
+                  <div>
+                    <h2 class="panel-title">Resume Session</h2>
+                    <p class="panel-subtitle">
+                      {parentSessions().length} {parentSessions().length === 1 ? "session" : "sessions"} available
+                    </p>
+                  </div>
+                  <Show when={!isDesktopLayout() && !showInstanceInfoOverlay()}>
+                    <button
+                      type="button"
+                      class="button-tertiary lg:hidden flex-shrink-0"
+                      onClick={openInstanceInfoOverlay}
+                    >
+                      View Instance Info
+                    </button>
+                  </Show>
+                </div>
               </div>
               <div class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto">
                 <For each={parentSessions()}>
-                  {(session, index) => (
-                    <div 
-                      class="panel-list-item"
-                      classList={{
-                        "panel-list-item-highlight": focusMode() === "sessions" && selectedIndex() === index(),
-                      }}
-                    >
-                      <button
-                        data-session-index={index()}
-                        class="panel-list-item-content group w-full"
-                        onClick={() => handleSessionSelect(session.id)}
-                        onMouseEnter={() => {
-                          setFocusMode("sessions")
-                          setSelectedIndex(index())
+                  {(session, index) => {
+                    const isFocused = () => focusMode() === "sessions" && selectedIndex() === index()
+                    return (
+                      <div
+                        class="panel-list-item"
+                        classList={{
+                          "panel-list-item-highlight": isFocused(),
                         }}
                       >
-                        <div class="flex items-center justify-between gap-3 w-full">
-                          <div class="flex-1 min-w-0">
-                            <div class="flex items-center gap-2">
-                              <span
-                                class="text-sm font-medium text-primary truncate transition-colors"
-                                classList={{
-                                  "text-accent":
-                                    focusMode() === "sessions" && selectedIndex() === index(),
+                        <div class="flex items-center gap-2 w-full px-1">
+                          <button
+                            type="button"
+                            data-session-index={index()}
+                            class="panel-list-item-content group flex-1"
+                            onClick={() => handleSessionSelect(session.id)}
+                            onMouseEnter={() => {
+                              setFocusMode("sessions")
+                              setSelectedIndex(index())
+                            }}
+                          >
+                            <div class="flex items-center justify-between gap-3 w-full">
+                              <div class="flex-1 min-w-0">
+                                <div class="flex items-center gap-2">
+                                  <span
+                                    class="text-sm font-medium text-primary whitespace-normal break-words transition-colors"
+                                    classList={{
+                                      "text-accent": isFocused(),
+                                    }}
+                                  >
+                                    {session.title || "Untitled Session"}
+                                  </span>
+                                </div>
+                                <div class="flex items-center gap-3 text-xs text-muted mt-0.5">
+                                  <span>{session.agent}</span>
+                                  <span>•</span>
+                                  <span>{formatRelativeTime(session.time.updated)}</span>
+                                </div>
+                              </div>
+                            </div>
+                          </button>
+                          <Show when={isFocused()}>
+                            <div class="flex items-center gap-2 flex-shrink-0">
+                              <kbd class="kbd flex-shrink-0">↵</kbd>
+                              <button
+                                type="button"
+                                class="p-1.5 rounded transition-colors text-muted hover:text-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+                                title="Rename session"
+                                onClick={(event) => {
+                                  event.preventDefault()
+                                  event.stopPropagation()
+                                  openRenameDialogForSession(session.id, session.title || "")
                                 }}
                               >
-                                {session.title || "Untitled Session"}
-                              </span>
+                                <Pencil class="w-4 h-4" />
+                              </button>
+                              <button
+                                type="button"
+                                class="p-1.5 rounded transition-colors text-muted hover:text-red-500 dark:hover:text-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+                                title="Delete session"
+                                disabled={isSessionDeleting(session.id)}
+                                onClick={(event) => {
+                                  event.preventDefault()
+                                  event.stopPropagation()
+                                  void handleSessionDelete(session.id)
+                                }}
+                              >
+                                <Show
+                                  when={!isSessionDeleting(session.id)}
+                                  fallback={
+                                    <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                                      <path
+                                        class="opacity-75"
+                                        fill="currentColor"
+                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                      />
+                                    </svg>
+                                  }
+                                >
+                                  <Trash2 class="w-4 h-4" />
+                                </Show>
+                              </button>
                             </div>
-                            <div class="flex items-center gap-3 text-xs text-muted mt-0.5">
-                              <span>{session.agent}</span>
-                              <span>•</span>
-                              <span>{formatRelativeTime(session.time.updated)}</span>
-                            </div>
-                          </div>
-                          <Show when={focusMode() === "sessions" && selectedIndex() === index()}>
-                            <kbd class="kbd flex-shrink-0">↵</kbd>
                           </Show>
                         </div>
-                      </button>
-                    </div>
-                  )}
+                      </div>
+                    )
+                  }}
                 </For>
               </div>
             </div>
@@ -274,14 +505,38 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
           </div>
         </div>
 
-        <div class="lg:w-80 flex-shrink-0">
-          <div class="sticky top-0">
+        <div class="hidden lg:block lg:w-80 flex-shrink-0">
+          <div class="sticky top-0 max-h-full overflow-y-auto pr-1">
             <InstanceInfo instance={props.instance} />
           </div>
         </div>
       </div>
 
-      <div class="panel-footer">
+      <Show when={!isDesktopLayout() && showInstanceInfoOverlay()}>
+        <div
+          class="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm lg:hidden"
+          onClick={closeInstanceInfoOverlay}
+        >
+          <div class="flex min-h-full items-start justify-center p-4 overflow-y-auto">
+            <div
+              class="w-full max-w-md space-y-3"
+              onClick={(event) => event.stopPropagation()}
+            >
+              <div class="flex justify-end">
+                <button type="button" class="button-tertiary" onClick={closeInstanceInfoOverlay}>
+                  Close
+                </button>
+              </div>
+              <div class="max-h-[85vh] overflow-y-auto pr-1">
+                <InstanceInfo instance={props.instance} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Show>
+
+      <div class="panel-footer hidden sm:block">
+
         <div class="panel-footer-hints">
           <div class="flex items-center gap-1.5">
             <kbd class="kbd">↑</kbd>
@@ -302,12 +557,23 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
             <kbd class="kbd">Enter</kbd>
             <span>Resume</span>
           </div>
-          <KeyboardHint shortcuts={[newSessionShortcut()]} separator="" />
+          <div class="flex items-center gap-1.5">
+            <kbd class="kbd">Del</kbd>
+            <span>Delete</span>
+          </div>
         </div>
       </div>
+
+      <SessionRenameDialog
+        open={Boolean(renameTarget())}
+        currentTitle={renameTarget()?.title ?? ""}
+        sessionLabel={renameTarget()?.label}
+        isSubmitting={isRenaming()}
+        onRename={handleRenameSubmit}
+        onClose={closeRenameDialog}
+      />
     </div>
   )
 }
 
 export default InstanceWelcomeView
-

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

@@ -1,173 +0,0 @@
-import { Show, createMemo, createSignal, type Component } from "solid-js"
-import type { Accessor } from "solid-js"
-import type { Instance } from "../../types/instance"
-import type { Command } from "../../lib/commands"
-import { activeParentSessionId, activeSessionId as activeSessionMap, getSessionFamily, setActiveSession } from "../../stores/sessions"
-import { keyboardRegistry, type KeyboardShortcut } from "../../lib/keyboard-registry"
-import { buildCustomCommandEntries } from "../../lib/command-utils"
-import { getCommands as getInstanceCommands } from "../../stores/commands"
-import { isOpen as isCommandPaletteOpen, hideCommandPalette } from "../../stores/command-palette"
-import SessionList from "../session-list"
-import KeyboardHint from "../keyboard-hint"
-import InstanceWelcomeView from "../instance-welcome-view"
-import InfoView from "../info-view"
-import AgentSelector from "../agent-selector"
-import ModelSelector from "../model-selector"
-import CommandPalette from "../command-palette"
-import ContextUsagePanel from "../session/context-usage-panel"
-import SessionView from "../session/session-view"
-
-interface InstanceShellProps {
-  instance: Instance
-  escapeInDebounce: boolean
-  paletteCommands: Accessor<Command[]>
-  onCloseSession: (sessionId: string) => Promise<void> | void
-  onNewSession: () => Promise<void> | void
-  handleSidebarAgentChange: (sessionId: string, agent: string) => Promise<void>
-  handleSidebarModelChange: (sessionId: string, model: { providerId: string; modelId: string }) => Promise<void>
-  onExecuteCommand: (command: Command) => void
-}
-
-const DEFAULT_SESSION_SIDEBAR_WIDTH = 280
-
-const InstanceShell: Component<InstanceShellProps> = (props) => {
-  const [sessionSidebarWidth, setSessionSidebarWidth] = createSignal(DEFAULT_SESSION_SIDEBAR_WIDTH)
-
-  const activeSessions = createMemo(() => {
-    const parentId = activeParentSessionId().get(props.instance.id)
-    if (!parentId) return new Map<string, ReturnType<typeof getSessionFamily>[number]>()
-    const sessionFamily = getSessionFamily(props.instance.id, parentId)
-    return new Map(sessionFamily.map((s) => [s.id, s]))
-  })
-
-  const activeSessionIdForInstance = createMemo(() => {
-    return activeSessionMap().get(props.instance.id) || null
-  })
-
-  const activeSessionForInstance = createMemo(() => {
-    const sessionId = activeSessionIdForInstance()
-    if (!sessionId || sessionId === "info") return null
-    return activeSessions().get(sessionId) ?? null
-  })
-
-  const customCommands = createMemo(() => buildCustomCommandEntries(props.instance.id, getInstanceCommands(props.instance.id)))
-  const instancePaletteCommands = createMemo(() => [...props.paletteCommands(), ...customCommands()])
-  const paletteOpen = createMemo(() => isCommandPaletteOpen(props.instance.id))
-
-  const keyboardShortcuts = createMemo(() =>
-    [keyboardRegistry.get("session-prev"), keyboardRegistry.get("session-next")].filter(
-      (shortcut): shortcut is KeyboardShortcut => Boolean(shortcut),
-    ),
-  )
-
-  const handleSessionSelect = (sessionId: string) => {
-    setActiveSession(props.instance.id, sessionId)
-  }
-
-  return (
-    <>
-      <Show when={activeSessions().size > 0} fallback={<InstanceWelcomeView instance={props.instance} />}>
-        <div class="flex flex-1 min-h-0">
-          <div class="session-sidebar flex flex-col bg-surface-secondary" style={{ width: `${sessionSidebarWidth()}px` }}>
-            <SessionList
-              instanceId={props.instance.id}
-              sessions={activeSessions()}
-              activeSessionId={activeSessionIdForInstance()}
-              onSelect={handleSessionSelect}
-              onClose={(id) => {
-                const result = props.onCloseSession(id)
-                if (result instanceof Promise) {
-                  void result.catch((error) => console.error("Failed to close session:", error))
-                }
-              }}
-              onNew={() => {
-                const result = props.onNewSession()
-                if (result instanceof Promise) {
-                  void result.catch((error) => console.error("Failed to create session:", error))
-                }
-              }}
-              showHeader
-              showFooter={false}
-              headerContent={
-                <div class="session-sidebar-header">
-                  <span class="session-sidebar-title text-sm font-semibold uppercase text-primary">Sessions</span>
-                  <div class="session-sidebar-shortcuts">
-                    {keyboardShortcuts().length ? (
-                      <KeyboardHint shortcuts={keyboardShortcuts()} separator=" " showDescription={false} />
-                    ) : null}
-                  </div>
-                </div>
-              }
-              onWidthChange={setSessionSidebarWidth}
-            />
-
-            <div class="session-sidebar-separator border-t border-base" />
-            <Show when={activeSessionForInstance()}>
-              {(activeSession) => (
-                <>
-                  <ContextUsagePanel instanceId={props.instance.id} sessionId={activeSession().id} />
-                  <div class="session-sidebar-controls px-3 py-3 border-r border-base flex flex-col gap-3">
-                    <AgentSelector
-                      instanceId={props.instance.id}
-                      sessionId={activeSession().id}
-                      currentAgent={activeSession().agent}
-                      onAgentChange={(agent) => props.handleSidebarAgentChange(activeSession().id, agent)}
-                    />
-
-                    <ModelSelector
-                      instanceId={props.instance.id}
-                      sessionId={activeSession().id}
-                      currentModel={activeSession().model}
-                      onModelChange={(model) => props.handleSidebarModelChange(activeSession().id, model)}
-                    />
-                  </div>
-                </>
-              )}
-            </Show>
-          </div>
-
-          <div class="content-area flex-1 min-h-0 overflow-hidden flex flex-col">
-            <Show
-              when={activeSessionIdForInstance() === "info"}
-              fallback={
-                <Show
-                  when={activeSessionIdForInstance()}
-                  keyed
-                  fallback={
-                    <div class="flex items-center justify-center h-full">
-                      <div class="text-center text-gray-500 dark:text-gray-400">
-                        <p class="mb-2">No session selected</p>
-                        <p class="text-sm">Select a session to view messages</p>
-                      </div>
-                    </div>
-                  }
-                >
-                  {(sessionId) => (
-                    <SessionView
-                      sessionId={sessionId}
-                      activeSessions={activeSessions()}
-                      instanceId={props.instance.id}
-                      instanceFolder={props.instance.folder}
-                      escapeInDebounce={props.escapeInDebounce}
-                    />
-                  )}
-                </Show>
-              }
-            >
-              <InfoView instanceId={props.instance.id} />
-            </Show>
-          </div>
-        </div>
-      </Show>
-
-      <CommandPalette
-        open={paletteOpen()}
-        onClose={() => hideCommandPalette(props.instance.id)}
-        commands={instancePaletteCommands()}
-        onExecute={props.onExecuteCommand}
-      />
-    </>
-  )
-}
-
-export default InstanceShell

packages/ui/src/components/markdown.tsx

@@ -1,6 +1,14 @@
 import { createEffect, createSignal, onMount, onCleanup } from "solid-js"
 import { renderMarkdown, onLanguagesLoaded, initMarkdown, decodeHtmlEntities } from "../lib/markdown"
-import type { TextPart } from "../types/message"
+import type { TextPart, RenderCache } from "../types/message"
+import { getLogger } from "../lib/logger"
+const log = getLogger("session")
+
+const markdownRenderCache = new Map<string, RenderCache>()
+
+function makeMarkdownCacheKey(partId: string, themeKey: string, highlightEnabled: boolean) {
+  return `${partId}:${themeKey}:${highlightEnabled ? 1 : 0}`
+}
 
 interface MarkdownProps {
   part: TextPart
@@ -26,10 +34,25 @@ export function Markdown(props: MarkdownProps) {
     const dark = Boolean(props.isDark)
     const themeKey = dark ? "dark" : "light"
     const highlightEnabled = !props.disableHighlight
+    const partId = typeof part.id === "string" && part.id.length > 0 ? part.id : "__anonymous__"
+    const cacheKey = makeMarkdownCacheKey(partId, themeKey, highlightEnabled)
 
     latestRequestedText = text
 
-    await initMarkdown(dark)
+    const localCache = part.renderCache
+    if (localCache && localCache.text === text && localCache.theme === themeKey) {
+      setHtml(localCache.html)
+      notifyRendered()
+      return
+    }
+
+    const globalCache = markdownRenderCache.get(cacheKey)
+    if (globalCache && globalCache.text === text) {
+      setHtml(globalCache.html)
+      part.renderCache = globalCache
+      notifyRendered()
+      return
+    }
 
     if (!highlightEnabled) {
       part.renderCache = undefined
@@ -38,39 +61,42 @@ export function Markdown(props: MarkdownProps) {
         const rendered = await renderMarkdown(text, { suppressHighlight: true })
 
         if (latestRequestedText === text) {
+          const cacheEntry: RenderCache = { text, html: rendered, theme: themeKey }
           setHtml(rendered)
+          part.renderCache = cacheEntry
+          markdownRenderCache.set(cacheKey, cacheEntry)
           notifyRendered()
         }
       } catch (error) {
-        console.error("Failed to render markdown:", error)
+        log.error("Failed to render markdown:", error)
         if (latestRequestedText === text) {
+          const cacheEntry: RenderCache = { text, html: text, theme: themeKey }
           setHtml(text)
+          part.renderCache = cacheEntry
+          markdownRenderCache.set(cacheKey, cacheEntry)
           notifyRendered()
         }
       }
       return
     }
 
-    const cache = part.renderCache
-    if (cache && cache.text === text && cache.theme === themeKey) {
-      setHtml(cache.html)
-      notifyRendered()
-      return
-    }
-
     try {
       const rendered = await renderMarkdown(text)
 
       if (latestRequestedText === text) {
+        const cacheEntry: RenderCache = { text, html: rendered, theme: themeKey }
         setHtml(rendered)
-        part.renderCache = { text, html: rendered, theme: themeKey }
+        part.renderCache = cacheEntry
+        markdownRenderCache.set(cacheKey, cacheEntry)
         notifyRendered()
       }
     } catch (error) {
-      console.error("Failed to render markdown:", error)
+      log.error("Failed to render markdown:", error)
       if (latestRequestedText === text) {
+        const cacheEntry: RenderCache = { text, html: text, theme: themeKey }
         setHtml(text)
-        part.renderCache = { text, html: text, theme: themeKey }
+        part.renderCache = cacheEntry
+        markdownRenderCache.set(cacheKey, cacheEntry)
         notifyRendered()
       }
     }
@@ -123,7 +149,7 @@ export function Markdown(props: MarkdownProps) {
           notifyRendered()
         }
       } catch (error) {
-        console.error("Failed to re-render markdown after language load:", error)
+        log.error("Failed to re-render markdown after language load:", error)
       }
     })
 

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

@@ -0,0 +1,64 @@
+import { Index, type Accessor } from "solid-js"
+import VirtualItem from "./virtual-item"
+import MessageBlock from "./message-block"
+import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
+
+export function getMessageAnchorId(messageId: string) {
+  return `message-anchor-${messageId}`
+}
+
+const VIRTUAL_ITEM_MARGIN_PX = 800
+
+interface MessageBlockListProps {
+  instanceId: string
+  sessionId: string
+  store: () => InstanceMessageStore
+  messageIds: () => string[]
+  lastAssistantIndex: () => number
+  showThinking: () => boolean
+  thinkingDefaultExpanded: () => boolean
+  showUsageMetrics: () => boolean
+  scrollContainer: Accessor<HTMLDivElement | undefined>
+  loading?: boolean
+  onRevert?: (messageId: string) => void
+  onFork?: (messageId?: string) => void
+  onContentRendered?: () => void
+  setBottomSentinel: (element: HTMLDivElement | null) => void
+  suspendMeasurements?: () => boolean
+}
+
+export default function MessageBlockList(props: MessageBlockListProps) {
+  return (
+    <>
+      <Index each={props.messageIds()}>
+        {(messageId, index) => (
+          <VirtualItem
+            id={getMessageAnchorId(messageId())}
+            cacheKey={messageId()}
+            scrollContainer={props.scrollContainer}
+            threshold={VIRTUAL_ITEM_MARGIN_PX}
+            placeholderClass="message-stream-placeholder"
+            virtualizationEnabled={() => !props.loading}
+            suspendMeasurements={props.suspendMeasurements}
+          >
+            <MessageBlock
+              messageId={messageId()}
+              instanceId={props.instanceId}
+              sessionId={props.sessionId}
+              store={props.store}
+              messageIndex={index}
+              lastAssistantIndex={props.lastAssistantIndex}
+              showThinking={props.showThinking}
+              thinkingDefaultExpanded={props.thinkingDefaultExpanded}
+              showUsageMetrics={props.showUsageMetrics}
+              onRevert={props.onRevert}
+              onFork={props.onFork}
+              onContentRendered={props.onContentRendered}
+            />
+          </VirtualItem>
+        )}
+      </Index>
+      <div ref={props.setBottomSentinel} aria-hidden="true" style={{ height: "1px" }} />
+    </>
+  )
+}

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

@@ -0,0 +1,722 @@
+import { For, Match, Show, Switch, createEffect, createMemo, createSignal } from "solid-js"
+import MessageItem from "./message-item"
+import ToolCall from "./tool-call"
+import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
+import type { ClientPart, MessageInfo } from "../types/message"
+import { partHasRenderableText } from "../types/message"
+import { buildRecordDisplayData, clearRecordDisplayCacheForInstance } from "../stores/message-v2/record-display-cache"
+import type { MessageRecord } from "../stores/message-v2/types"
+import { messageStoreBus } from "../stores/message-v2/bus"
+import { formatTokenTotal } from "../lib/formatters"
+import { sessions, setActiveParentSession, setActiveSession } from "../stores/sessions"
+import { setActiveInstanceId } from "../stores/instances"
+
+const TOOL_ICON = "🔧"
+const USER_BORDER_COLOR = "var(--message-user-border)"
+const ASSISTANT_BORDER_COLOR = "var(--message-assistant-border)"
+const TOOL_BORDER_COLOR = "var(--message-tool-border)"
+
+type ToolCallPart = Extract<ClientPart, { type: "tool" }>
+
+
+type ToolState = import("@opencode-ai/sdk").ToolState
+type ToolStateRunning = import("@opencode-ai/sdk").ToolStateRunning
+type ToolStateCompleted = import("@opencode-ai/sdk").ToolStateCompleted
+type ToolStateError = import("@opencode-ai/sdk").ToolStateError
+
+function isToolStateRunning(state: ToolState | undefined): state is ToolStateRunning {
+  return Boolean(state && state.status === "running")
+}
+
+function isToolStateCompleted(state: ToolState | undefined): state is ToolStateCompleted {
+  return Boolean(state && state.status === "completed")
+}
+
+function isToolStateError(state: ToolState | undefined): state is ToolStateError {
+  return Boolean(state && state.status === "error")
+}
+
+function extractTaskSessionId(state: ToolState | undefined): string {
+  if (!state) return ""
+  const metadata = (state as unknown as { metadata?: Record<string, unknown> }).metadata ?? {}
+  const directId = metadata?.sessionId ?? metadata?.sessionID
+  return typeof directId === "string" ? directId : ""
+}
+
+function reasoningHasRenderableContent(part: ClientPart): boolean {
+  if (!part || part.type !== "reasoning") {
+    return false
+  }
+  const checkSegment = (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) => checkSegment(entry))
+      }
+    }
+    return false
+  }
+
+  if (checkSegment((part as any).text)) {
+    return true
+  }
+  if (Array.isArray((part as any).content)) {
+    return (part as any).content.some((entry: unknown) => checkSegment(entry))
+  }
+  return false
+}
+
+interface TaskSessionLocation {
+  sessionId: string
+  instanceId: string
+  parentId: string | null
+}
+
+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)
+  }
+}
+
+interface CachedBlockEntry {
+  signature: string
+  block: MessageDisplayBlock
+  contentKeys: string[]
+  toolKeys: string[]
+}
+
+interface SessionRenderCache {
+  messageItems: Map<string, ContentDisplayItem>
+  toolItems: Map<string, ToolDisplayItem>
+  messageBlocks: Map<string, CachedBlockEntry>
+}
+
+const renderCaches = new Map<string, SessionRenderCache>()
+
+function makeSessionCacheKey(instanceId: string, sessionId: string) {
+  return `${instanceId}:${sessionId}`
+}
+
+export function clearSessionRenderCache(instanceId: string, sessionId: string) {
+  renderCaches.delete(makeSessionCacheKey(instanceId, sessionId))
+}
+
+function getSessionRenderCache(instanceId: string, sessionId: string): SessionRenderCache {
+  const key = makeSessionCacheKey(instanceId, sessionId)
+  let cache = renderCaches.get(key)
+  if (!cache) {
+    cache = {
+      messageItems: new Map(),
+      toolItems: new Map(),
+      messageBlocks: new Map(),
+    }
+    renderCaches.set(key, cache)
+  }
+  return cache
+}
+
+function clearInstanceCaches(instanceId: string) {
+  clearRecordDisplayCacheForInstance(instanceId)
+  const prefix = `${instanceId}:`
+  for (const key of renderCaches.keys()) {
+    if (key.startsWith(prefix)) {
+      renderCaches.delete(key)
+    }
+  }
+}
+
+messageStoreBus.onInstanceDestroyed(clearInstanceCaches)
+
+interface ContentDisplayItem {
+  type: "content"
+  key: string
+  record: MessageRecord
+  parts: ClientPart[]
+  messageInfo?: MessageInfo
+  isQueued: boolean
+  showAgentMeta?: boolean
+}
+
+interface ToolDisplayItem {
+  type: "tool"
+  key: string
+  toolPart: ToolCallPart
+  messageInfo?: MessageInfo
+  messageId: string
+  messageVersion: number
+  partVersion: number
+}
+
+interface StepDisplayItem {
+  type: "step-start" | "step-finish"
+  key: string
+  part: ClientPart
+  messageInfo?: MessageInfo
+  accentColor?: string
+}
+
+type ReasoningDisplayItem = {
+  type: "reasoning"
+  key: string
+  part: ClientPart
+  messageInfo?: MessageInfo
+  showAgentMeta?: boolean
+  defaultExpanded: boolean
+}
+
+type MessageBlockItem = ContentDisplayItem | ToolDisplayItem | StepDisplayItem | ReasoningDisplayItem
+
+interface MessageDisplayBlock {
+  record: MessageRecord
+  items: MessageBlockItem[]
+}
+
+interface MessageBlockProps {
+  messageId: string
+  instanceId: string
+  sessionId: string
+  store: () => InstanceMessageStore
+  messageIndex: number
+  lastAssistantIndex: () => number
+  showThinking: () => boolean
+  thinkingDefaultExpanded: () => boolean
+  showUsageMetrics: () => boolean
+  onRevert?: (messageId: string) => void
+  onFork?: (messageId?: string) => void
+  onContentRendered?: () => void
+}
+
+export default function MessageBlock(props: MessageBlockProps) {
+  const record = createMemo(() => props.store().getMessage(props.messageId))
+  const messageInfo = createMemo(() => props.store().getMessageInfo(props.messageId))
+  const sessionCache = getSessionRenderCache(props.instanceId, props.sessionId)
+
+  const block = createMemo<MessageDisplayBlock | null>(() => {
+    const current = record()
+    if (!current) return null
+
+    const index = props.messageIndex
+    const lastAssistantIdx = props.lastAssistantIndex()
+    const isQueued = current.role === "user" && (lastAssistantIdx === -1 || index > lastAssistantIdx)
+    const info = messageInfo()
+    const infoTime = (info?.time ?? {}) as { created?: number; updated?: number; completed?: number }
+    const infoTimestamp =
+      typeof infoTime.completed === "number"
+        ? infoTime.completed
+        : typeof infoTime.updated === "number"
+          ? infoTime.updated
+          : infoTime.created ?? 0
+    const infoError = (info as { error?: { name?: string } } | undefined)?.error
+    const infoErrorName = typeof infoError?.name === "string" ? infoError.name : ""
+    const cacheSignature = [
+      current.id,
+      current.revision,
+      isQueued ? 1 : 0,
+      props.showThinking() ? 1 : 0,
+      props.thinkingDefaultExpanded() ? 1 : 0,
+      props.showUsageMetrics() ? 1 : 0,
+      infoTimestamp,
+      infoErrorName,
+    ].join("|")
+
+    const cachedBlock = sessionCache.messageBlocks.get(current.id)
+    if (cachedBlock && cachedBlock.signature === cacheSignature) {
+      return cachedBlock.block
+    }
+
+    const { orderedParts } = buildRecordDisplayData(props.instanceId, current)
+    const items: MessageBlockItem[] = []
+    const blockContentKeys: string[] = []
+    const blockToolKeys: string[] = []
+    let segmentIndex = 0
+    let pendingParts: ClientPart[] = []
+    let agentMetaAttached = current.role !== "assistant"
+    const defaultAccentColor = current.role === "user" ? USER_BORDER_COLOR : ASSISTANT_BORDER_COLOR
+    let lastAccentColor = defaultAccentColor
+
+    const flushContent = () => {
+      if (pendingParts.length === 0) return
+      const segmentKey = `${current.id}:segment:${segmentIndex}`
+      segmentIndex += 1
+      const shouldShowAgentMeta =
+        current.role === "assistant" &&
+        !agentMetaAttached &&
+        pendingParts.some((part) => partHasRenderableText(part))
+      let cached = sessionCache.messageItems.get(segmentKey)
+      if (!cached) {
+        cached = {
+          type: "content",
+          key: segmentKey,
+          record: current,
+          parts: pendingParts.slice(),
+          messageInfo: info,
+          isQueued,
+          showAgentMeta: shouldShowAgentMeta,
+        }
+        sessionCache.messageItems.set(segmentKey, cached)
+      } else {
+        cached.record = current
+        cached.parts = pendingParts.slice()
+        cached.messageInfo = info
+        cached.isQueued = isQueued
+        cached.showAgentMeta = shouldShowAgentMeta
+      }
+      if (shouldShowAgentMeta) {
+        agentMetaAttached = true
+      }
+      items.push(cached)
+      blockContentKeys.push(segmentKey)
+      lastAccentColor = defaultAccentColor
+      pendingParts = []
+    }
+
+    orderedParts.forEach((part, partIndex) => {
+      if (part.type === "tool") {
+        flushContent()
+        const partVersion = typeof (part as any).revision === "number" ? (part as any).revision : 0
+        const messageVersion = current.revision
+        const key = `${current.id}:${part.id ?? partIndex}`
+        let toolItem = sessionCache.toolItems.get(key)
+        if (!toolItem) {
+          toolItem = {
+            type: "tool",
+            key,
+            toolPart: part as ToolCallPart,
+            messageInfo: info,
+            messageId: current.id,
+            messageVersion,
+            partVersion,
+          }
+          sessionCache.toolItems.set(key, toolItem)
+        } else {
+          toolItem.key = key
+          toolItem.toolPart = part as ToolCallPart
+          toolItem.messageInfo = info
+          toolItem.messageId = current.id
+          toolItem.messageVersion = messageVersion
+          toolItem.partVersion = partVersion
+        }
+        items.push(toolItem)
+        blockToolKeys.push(key)
+        lastAccentColor = TOOL_BORDER_COLOR
+        return
+      }
+
+      if (part.type === "step-start") {
+        flushContent()
+        return
+      }
+
+      if (part.type === "step-finish") {
+        flushContent()
+        if (props.showUsageMetrics()) {
+          const key = `${current.id}:${part.id ?? partIndex}:${part.type}`
+          const accentColor = lastAccentColor || defaultAccentColor
+          items.push({ type: part.type, key, part, messageInfo: info, accentColor })
+          lastAccentColor = accentColor
+        }
+        return
+      }
+
+      if (part.type === "reasoning") {
+        flushContent()
+        if (props.showThinking() && reasoningHasRenderableContent(part)) {
+          const key = `${current.id}:${part.id ?? partIndex}:reasoning`
+          const showAgentMeta = current.role === "assistant" && !agentMetaAttached
+          if (showAgentMeta) {
+            agentMetaAttached = true
+          }
+          items.push({
+            type: "reasoning",
+            key,
+            part,
+            messageInfo: info,
+            showAgentMeta,
+            defaultExpanded: props.thinkingDefaultExpanded(),
+          })
+          lastAccentColor = ASSISTANT_BORDER_COLOR
+        }
+        return
+      }
+
+      pendingParts.push(part)
+    })
+
+    flushContent()
+
+    const resultBlock: MessageDisplayBlock = { record: current, items }
+    sessionCache.messageBlocks.set(current.id, {
+      signature: cacheSignature,
+      block: resultBlock,
+      contentKeys: blockContentKeys.slice(),
+      toolKeys: blockToolKeys.slice(),
+    })
+
+    const messagePrefix = `${current.id}:`
+    for (const [key] of sessionCache.messageItems) {
+      if (key.startsWith(messagePrefix) && !blockContentKeys.includes(key)) {
+        sessionCache.messageItems.delete(key)
+      }
+    }
+    for (const [key] of sessionCache.toolItems) {
+      if (key.startsWith(messagePrefix) && !blockToolKeys.includes(key)) {
+        sessionCache.toolItems.delete(key)
+      }
+    }
+
+    return resultBlock
+  })
+
+  return (
+    <Show when={block()} keyed>
+      {(resolvedBlock) => (
+        <div class="message-stream-block" data-message-id={resolvedBlock.record.id}>
+          <For each={resolvedBlock.items}>
+            {(item) => (
+              <Switch>
+                <Match when={item.type === "content"}>
+                  <MessageItem
+                    record={(item as ContentDisplayItem).record}
+                    messageInfo={(item as ContentDisplayItem).messageInfo}
+                    parts={(item as ContentDisplayItem).parts}
+                    instanceId={props.instanceId}
+                    sessionId={props.sessionId}
+                    isQueued={(item as ContentDisplayItem).isQueued}
+                    showAgentMeta={(item as ContentDisplayItem).showAgentMeta}
+                    onRevert={props.onRevert}
+                    onFork={props.onFork}
+                    onContentRendered={props.onContentRendered}
+                  />
+                </Match>
+                <Match when={item.type === "tool"}>
+                  {(() => {
+                    const toolItem = item as ToolDisplayItem
+                    const toolState = toolItem.toolPart.state as ToolState | undefined
+                    const hasToolState =
+                      Boolean(toolState) && (isToolStateRunning(toolState) || isToolStateCompleted(toolState) || isToolStateError(toolState))
+                    const taskSessionId = hasToolState ? extractTaskSessionId(toolState) : ""
+                    const taskLocation = taskSessionId ? findTaskSessionLocation(taskSessionId) : null
+                    const handleGoToTaskSession = (event: MouseEvent) => {
+                      event.preventDefault()
+                      event.stopPropagation()
+                      if (!taskLocation) return
+                      navigateToTaskSession(taskLocation)
+                    }
+
+                    return (
+                      <div class="tool-call-message" data-key={toolItem.key}>
+                        <div class="tool-call-header-label">
+                          <div class="tool-call-header-meta">
+                            <span class="tool-call-icon">{TOOL_ICON}</span>
+                            <span>Tool Call</span>
+                            <span class="tool-name">{toolItem.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={toolItem.toolPart}
+                          toolCallId={toolItem.key}
+                          messageId={toolItem.messageId}
+                          messageVersion={toolItem.messageVersion}
+                          partVersion={toolItem.partVersion}
+                          instanceId={props.instanceId}
+                          sessionId={props.sessionId}
+                          onContentRendered={props.onContentRendered}
+                        />
+                      </div>
+                    )
+                  })()}
+                </Match>
+                <Match when={item.type === "step-start"}>
+                  <StepCard kind="start" part={(item as StepDisplayItem).part} messageInfo={(item as StepDisplayItem).messageInfo} showAgentMeta />
+                </Match>
+                <Match when={item.type === "step-finish"}>
+                  <StepCard
+                    kind="finish"
+                    part={(item as StepDisplayItem).part}
+                    messageInfo={(item as StepDisplayItem).messageInfo}
+                    showUsage={props.showUsageMetrics()}
+                    borderColor={(item as StepDisplayItem).accentColor}
+                  />
+                </Match>
+                <Match when={item.type === "reasoning"}>
+                  <ReasoningCard
+                    part={(item as ReasoningDisplayItem).part}
+                    messageInfo={(item as ReasoningDisplayItem).messageInfo}
+                    instanceId={props.instanceId}
+                    sessionId={props.sessionId}
+                    showAgentMeta={(item as ReasoningDisplayItem).showAgentMeta}
+                    defaultExpanded={(item as ReasoningDisplayItem).defaultExpanded}
+                  />
+                </Match>
+              </Switch>
+            )}
+          </For>
+        </div>
+      )}
+    </Show>
+  )
+}
+
+interface StepCardProps {
+  kind: "start" | "finish"
+  part: ClientPart
+  messageInfo?: MessageInfo
+  showAgentMeta?: boolean
+  showUsage?: boolean
+  borderColor?: string
+}
+
+function StepCard(props: StepCardProps) {
+  const timestamp = () => {
+    const value = props.messageInfo?.time?.created ?? (props.part as any)?.time?.start ?? Date.now()
+    const date = new Date(value)
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+  }
+
+  const agentIdentifier = () => {
+    if (!props.showAgentMeta) return ""
+    const info = props.messageInfo
+    if (!info || info.role !== "assistant") return ""
+    return info.mode || ""
+  }
+
+  const modelIdentifier = () => {
+    if (!props.showAgentMeta) return ""
+    const info = props.messageInfo
+    if (!info || info.role !== "assistant") return ""
+    const modelID = info.modelID || ""
+    const providerID = info.providerID || ""
+    if (modelID && providerID) return `${providerID}/${modelID}`
+    return modelID
+  }
+
+  const usageStats = () => {
+    if (props.kind !== "finish" || !props.showUsage) {
+      return null
+    }
+    const info = props.messageInfo
+    if (!info || info.role !== "assistant" || !info.tokens) {
+      return null
+    }
+    const tokens = info.tokens
+    return {
+      input: tokens.input ?? 0,
+      output: tokens.output ?? 0,
+      reasoning: tokens.reasoning ?? 0,
+      cacheRead: tokens.cache?.read ?? 0,
+      cacheWrite: tokens.cache?.write ?? 0,
+      cost: info.cost ?? 0,
+    }
+  }
+
+  const finishStyle = () => (props.borderColor ? { "border-left-color": props.borderColor } : undefined)
+
+  const renderUsageChips = (usage: NonNullable<ReturnType<typeof usageStats>>) => {
+    const entries = [
+      { label: "Input", value: usage.input, formatter: formatTokenTotal },
+      { label: "Output", value: usage.output, formatter: formatTokenTotal },
+      { label: "Reasoning", value: usage.reasoning, formatter: formatTokenTotal },
+      { label: "Cache Read", value: usage.cacheRead, formatter: formatTokenTotal },
+      { label: "Cache Write", value: usage.cacheWrite, formatter: formatTokenTotal },
+      { label: "Cost", value: usage.cost, formatter: formatCostValue },
+    ]
+
+    return (
+      <div class="message-step-usage">
+        <For each={entries}>
+          {(entry) => (
+            <span class="message-step-usage-chip" data-label={entry.label}>
+              {entry.formatter(entry.value)}
+            </span>
+          )}
+        </For>
+      </div>
+    )
+  }
+
+  if (props.kind === "finish") {
+    const usage = usageStats()
+    if (!usage) {
+      return null
+    }
+    return (
+      <div class={`message-step-card message-step-finish message-step-finish-flush`} style={finishStyle()}>
+        {renderUsageChips(usage)}
+      </div>
+    )
+  }
+
+  return (
+    <div class={`message-step-card message-step-start`}>
+      <div class="message-step-heading">
+        <div class="message-step-title">
+          <div class="message-step-title-left">
+            <Show when={props.showAgentMeta && (agentIdentifier() || modelIdentifier())}>
+              <span class="message-step-meta-inline">
+                <Show when={agentIdentifier()}>{(value) => <span>Agent: {value()}</span>}</Show>
+                <Show when={modelIdentifier()}>{(value) => <span>Model: {value()}</span>}</Show>
+              </span>
+            </Show>
+          </div>
+          <span class="message-step-time">{timestamp()}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function formatCostValue(value: number) {
+  if (!value) return "$0.00"
+  if (value < 0.01) return `$${value.toPrecision(2)}`
+  return `$${value.toFixed(2)}`
+}
+
+interface ReasoningCardProps {
+  part: ClientPart
+  messageInfo?: MessageInfo
+  instanceId: string
+  sessionId: string
+  showAgentMeta?: boolean
+  defaultExpanded?: boolean
+}
+
+function ReasoningCard(props: ReasoningCardProps) {
+  const [expanded, setExpanded] = createSignal(Boolean(props.defaultExpanded))
+
+  createEffect(() => {
+    setExpanded(Boolean(props.defaultExpanded))
+  })
+
+  const timestamp = () => {
+    const value = props.messageInfo?.time?.created ?? (props.part as any)?.time?.start ?? Date.now()
+    const date = new Date(value)
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+  }
+
+  const agentIdentifier = () => {
+    const info = props.messageInfo
+    if (!info || info.role !== "assistant") return ""
+    return info.mode || ""
+  }
+
+  const modelIdentifier = () => {
+    const info = props.messageInfo
+    if (!info || info.role !== "assistant") return ""
+    const modelID = info.modelID || ""
+    const providerID = info.providerID || ""
+    if (modelID && providerID) return `${providerID}/${modelID}`
+    return modelID
+  }
+
+  const reasoningText = () => {
+    const part = props.part as any
+    if (!part) return ""
+
+    const stringifySegment = (segment: unknown): string => {
+      if (typeof segment === "string") {
+        return segment
+      }
+      if (segment && typeof segment === "object") {
+        const obj = segment as { text?: unknown; value?: unknown; content?: unknown[] }
+        const pieces: string[] = []
+        if (typeof obj.text === "string") {
+          pieces.push(obj.text)
+        }
+        if (typeof obj.value === "string") {
+          pieces.push(obj.value)
+        }
+        if (Array.isArray(obj.content)) {
+          pieces.push(obj.content.map((entry) => stringifySegment(entry)).join("\n"))
+        }
+        return pieces.filter((piece) => piece && piece.trim().length > 0).join("\n")
+      }
+      return ""
+    }
+
+    const textValue = stringifySegment(part.text)
+    if (textValue.trim().length > 0) {
+      return textValue
+    }
+    if (Array.isArray(part.content)) {
+      return part.content.map((entry: unknown) => stringifySegment(entry)).join("\n")
+    }
+    return ""
+  }
+
+  const toggle = () => setExpanded((prev) => !prev)
+
+  return (
+    <div class="message-reasoning-card">
+      <button
+        type="button"
+        class="message-reasoning-toggle"
+        onClick={toggle}
+        aria-expanded={expanded()}
+        aria-label={expanded() ? "Collapse thinking" : "Expand thinking"}
+      >
+        <span class="message-reasoning-label flex flex-wrap items-center gap-2">
+          <span>Thinking</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>
+        </span>
+        <span class="message-reasoning-meta">
+          <span class="message-reasoning-indicator">{expanded() ? "Hide" : "View"}</span>
+          <span class="message-reasoning-time">{timestamp()}</span>
+        </span>
+      </button>
+
+      <Show when={expanded()}>
+        <div class="message-reasoning-expanded">
+          <div class="message-reasoning-body">
+            <div class="message-reasoning-output" role="region" aria-label="Reasoning details">
+              <pre class="message-reasoning-text">{reasoningText() || ""}</pre>
+            </div>
+          </div>
+        </div>
+      </Show>
+    </div>
+  )
+}

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

@@ -1,36 +1,46 @@
-import { For, Show } from "solid-js"
-import type { Message, SDKPart, MessageInfo, ClientPart } from "../types/message"
+import { For, Show, createSignal } from "solid-js"
+import type { MessageInfo, ClientPart } from "../types/message"
 import { partHasRenderableText } from "../types/message"
+import type { MessageRecord } from "../stores/message-v2/types"
 import MessagePart from "./message-part"
 
 interface MessageItemProps {
-  message: Message
+  record: MessageRecord
   messageInfo?: MessageInfo
   instanceId: string
   sessionId: string
   isQueued?: boolean
-  parts?: ClientPart[]
+  parts: ClientPart[]
   onRevert?: (messageId: string) => void
   onFork?: (messageId?: string) => void
-}
+  showAgentMeta?: boolean
+  onContentRendered?: () => void
+ }
+
+ export default function MessageItem(props: MessageItemProps) {
+  const [copied, setCopied] = createSignal(false)
+
+  const isUser = () => props.record.role === "user"
+  const createdTimestamp = () => props.messageInfo?.time?.created ?? props.record.createdAt
 
-export default function MessageItem(props: MessageItemProps) {
-  const isUser = () => props.message.type === "user"
   const timestamp = () => {
-    const date = new Date(props.message.timestamp)
+    const date = new Date(createdTimestamp())
     return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
   }
 
+  const timestampIso = () => new Date(createdTimestamp()).toISOString()
+
   type FilePart = Extract<ClientPart, { type: "file" }> & {
     url?: string
     mime?: string
     filename?: string
   }
 
-  const displayParts = () => props.parts ?? props.message.parts
+  const messageParts = () => props.parts
 
   const fileAttachments = () =>
-    props.message.parts.filter((part): part is FilePart => part?.type === "file" && typeof (part as FilePart).url === "string")
+    messageParts().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 +130,7 @@ export default function MessageItem(props: MessageItemProps) {
       return true
     }
 
-    return displayParts().some((part) => partHasRenderableText(part))
+    return messageParts().some((part) => partHasRenderableText(part))
   }
 
   const isGenerating = () => {
@@ -130,15 +140,37 @@ export default function MessageItem(props: MessageItemProps) {
 
   const handleRevert = () => {
     if (props.onRevert && isUser()) {
-      props.onRevert(props.message.id)
+      props.onRevert(props.record.id)
     }
   }
 
+  const getRawContent = () => {
+    return props.parts
+      .filter(part => part.type === "text")
+      .map(part => (part as { text?: string }).text || "")
+      .filter(text => text.trim().length > 0)
+      .join("\n\n")
+  }
+
+  const handleCopy = async () => {
+    const content = getRawContent()
+    if (!content) return
+    await navigator.clipboard.writeText(content)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  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 speakerLabel = () => (isUser() ? "You" : "Assistant")
+
   const agentIdentifier = () => {
     if (isUser()) return ""
     const info = props.messageInfo
@@ -155,50 +187,86 @@ export default function MessageItem(props: MessageItemProps) {
     if (modelID && providerID) return `${providerID}/${modelID}`
     return modelID
   }
- 
+
+  const agentMeta = () => {
+    if (isUser() || !props.showAgentMeta) return ""
+    const segments: string[] = []
+    const agent = agentIdentifier()
+    const model = modelIdentifier()
+    if (agent) {
+      segments.push(`Agent: ${agent}`)
+    }
+    if (model) {
+      segments.push(`Model: ${model}`)
+    }
+    return segments.join(" • ")
+  }
+
+
   return (
-
     <div class={containerClass()}>
-      <div class="flex justify-between items-center gap-2.5 pb-0.5">
-        <div class="flex flex-col">
+      <header class={`message-item-header ${isUser() ? "pb-0.5" : "pb-0"}`}>
+        <div class="message-speaker">
+          <span class="message-speaker-label" data-role={isUser() ? "user" : "assistant"}>
+            {speakerLabel()}
+          </span>
+          <Show when={agentMeta()}>{(meta) => <span class="message-agent-meta">{meta()}</span>}</Show>
+        </div>
+        <div class="message-item-actions">
           <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 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 class="message-action-group">
+              <Show when={props.onRevert}>
+                <button
+                  class="message-action-button"
+                  onClick={handleRevert}
+                  title="Revert to this message"
+                  aria-label="Revert to this message"
+                >
+                  Revert
+                </button>
+              </Show>
+              <Show when={props.onFork}>
+                <button
+                  class="message-action-button"
+                  onClick={() => props.onFork?.(props.record.id)}
+                  title="Fork from this message"
+                  aria-label="Fork from this message"
+                >
+                  Fork
+                </button>
+              </Show>
+              <button
+                class="message-action-button"
+                onClick={handleCopy}
+                title="Copy message"
+                aria-label="Copy message"
+              >
+                <Show when={copied()} fallback="Copy">
+                  Copied!
+                </Show>
+              </button>
             </div>
           </Show>
-        </div>
-        <div class="flex items-center gap-2">
-          <Show when={isUser() && props.onRevert}>
+          <Show when={!isUser()}>
             <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={handleRevert}
-              title="Revert to this message"
-              aria-label="Revert to this message"
+              class="message-action-button"
+              onClick={handleCopy}
+              title="Copy message"
+              aria-label="Copy message"
             >
-              Revert to
+              <Show when={copied()} fallback="Copy">
+                Copied!
+              </Show>
             </button>
           </Show>
-          <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)}
-              title="Fork from this message"
-              aria-label="Fork from this message"
-            >
-              Fork
-            </button>
-          </Show>
-          <span class="text-[11px] text-[var(--text-muted)]">{timestamp()}</span>
+          <time class="message-timestamp" dateTime={timestampIso()}>{timestamp()}</time>
         </div>
-      </div>
+
+      </header>
 
       <div class="pt-1 whitespace-pre-wrap break-words leading-[1.1]">
 
+
         <Show when={props.isQueued && isUser()}>
           <div class="message-queued-badge">QUEUED</div>
         </Show>
@@ -213,72 +281,72 @@ export default function MessageItem(props: MessageItemProps) {
           </div>
         </Show>
 
-        <For each={displayParts()}>
+        <For each={messageParts()}>
           {(part) => (
             <MessagePart
               part={part}
-              messageType={props.message.type}
+              messageType={props.record.role}
               instanceId={props.instanceId}
               sessionId={props.sessionId}
+              onRendered={props.onContentRendered}
             />
           )}
         </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-list-header.tsx

@@ -0,0 +1,85 @@
+import { Show } from "solid-js"
+import Kbd from "./kbd"
+
+const METRIC_CHIP_CLASS = "inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary"
+const METRIC_LABEL_CLASS = "uppercase text-[10px] tracking-wide text-primary/70"
+
+interface MessageListHeaderProps {
+  usedTokens: number
+
+  availableTokens?: number | null
+  connectionStatus: "connected" | "connecting" | "error" | "disconnected" | "unknown" | null
+  onCommandPalette: () => void
+  formatTokens: (value: number) => string
+  showSidebarToggle?: boolean
+  onSidebarToggle?: () => void
+  forceCompactStatusLayout?: boolean
+}
+
+export default function MessageListHeader(props: MessageListHeaderProps) {
+
+  const hasAvailableTokens = () => typeof props.availableTokens === "number"
+  const availableDisplay = () => (hasAvailableTokens() ? props.formatTokens(props.availableTokens as number) : "--")
+
+  return (
+    <div class={props.forceCompactStatusLayout ? "connection-status connection-status--compact" : "connection-status"}>
+      <Show when={props.showSidebarToggle}>
+        <div class="connection-status-menu">
+          <button
+            type="button"
+            class="session-sidebar-menu-button"
+            onClick={() => props.onSidebarToggle?.()}
+            aria-label="Open session list"
+          >
+            <span aria-hidden="true" class="session-sidebar-menu-icon">☰</span>
+          </button>
+        </div>
+      </Show>
+
+      <div class="connection-status-text connection-status-info">
+        <div class="connection-status-usage">
+          <div class={METRIC_CHIP_CLASS}>
+            <span class={METRIC_LABEL_CLASS}>Used</span>
+            <span class="font-semibold text-primary">{props.formatTokens(props.usedTokens)}</span>
+          </div>
+          <div class={METRIC_CHIP_CLASS}>
+            <span class={METRIC_LABEL_CLASS}>Avail</span>
+            <span class="font-semibold text-primary">{hasAvailableTokens() ? availableDisplay() : "--"}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="connection-status-text connection-status-shortcut">
+        <div class="connection-status-shortcut-action">
+          <button type="button" class="connection-status-button" onClick={props.onCommandPalette} aria-label="Open command palette">
+            Command Palette
+          </button>
+          <span class="connection-status-shortcut-hint">
+            <Kbd shortcut="cmd+shift+p" />
+          </span>
+        </div>
+      </div>
+
+      <div class="connection-status-meta flex items-center justify-end gap-3">
+        <Show when={props.connectionStatus === "connected"}>
+          <span class="status-indicator connected">
+            <span class="status-dot" />
+            <span class="status-text">Connected</span>
+          </span>
+        </Show>
+        <Show when={props.connectionStatus === "connecting"}>
+          <span class="status-indicator connecting">
+            <span class="status-dot" />
+            <span class="status-text">Connecting...</span>
+          </span>
+        </Show>
+        <Show when={props.connectionStatus === "error" || props.connectionStatus === "disconnected"}>
+          <span class="status-indicator disconnected">
+            <span class="status-dot" />
+            <span class="status-text">Disconnected</span>
+          </span>
+        </Show>
+      </div>
+    </div>
+  )
+}

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

@@ -13,8 +13,10 @@ interface MessagePartProps {
   messageType?: "user" | "assistant"
   instanceId: string
   sessionId: string
-}
-export default function MessagePart(props: MessagePartProps) {
+  onRendered?: () => void
+ }
+ export default function MessagePart(props: MessagePartProps) {
+
   const { isDark } = useTheme()
   const { preferences } = useConfig()
   const partType = () => props.part?.type || ""
@@ -33,6 +35,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") {
@@ -63,11 +97,17 @@ export default function MessagePart(props: MessagePartProps) {
         <Show when={!(props.part.type === "text" && props.part.synthetic) && partHasRenderableText(props.part)}>
           <div class={textContainerClass()}>
             <Show
-              when={isAssistantMessage()}
-              fallback={<span>{plainTextContent()}</span>}
-            >
-              <Markdown part={createTextPartForMarkdown()} isDark={isDark()} size={isAssistantMessage() ? "tight" : "base"} />
-            </Show>
+               when={isAssistantMessage()}
+               fallback={<span>{plainTextContent()}</span>}
+             >
+              <Markdown
+                part={createTextPartForMarkdown()}
+                isDark={isDark()}
+                size={isAssistantMessage() ? "tight" : "base"}
+                onRendered={props.onRendered}
+              />
+             </Show>
+
           </div>
         </Show>
       </Match>
@@ -83,23 +123,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-preview.tsx

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

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

@@ -0,0 +1,858 @@
+import { Show, createEffect, createMemo, createSignal, onCleanup, untrack } from "solid-js"
+import Kbd from "./kbd"
+import MessageBlockList, { getMessageAnchorId } from "./message-block-list"
+import MessageTimeline, { buildTimelineSegments, type TimelineSegment } from "./message-timeline"
+import { useConfig } from "../stores/preferences"
+import { getSessionInfo } from "../stores/sessions"
+import { messageStoreBus } from "../stores/message-v2/bus"
+import { useScrollCache } from "../lib/hooks/use-scroll-cache"
+import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
+
+const SCROLL_SCOPE = "session"
+const SCROLL_SENTINEL_MARGIN_PX = 48
+const USER_SCROLL_INTENT_WINDOW_MS = 600
+const SCROLL_INTENT_KEYS = new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " ", "Spacebar"])
+const QUOTE_SELECTION_MAX_LENGTH = 2000
+const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
+
+export interface MessageSectionProps {
+  instanceId: string
+  sessionId: string
+  loading?: boolean
+  onRevert?: (messageId: string) => void
+  onFork?: (messageId?: string) => void
+  registerScrollToBottom?: (fn: () => void) => void
+  showSidebarToggle?: boolean
+  onSidebarToggle?: () => void
+  forceCompactStatusLayout?: boolean
+  onQuoteSelection?: (text: string, mode: "quote" | "code") => void
+  isActive?: boolean
+}
+
+export default function MessageSection(props: MessageSectionProps) {
+  const { preferences } = useConfig()
+  const showUsagePreference = () => preferences().showUsageMetrics ?? true
+  const showTimelineToolsPreference = () => preferences().showTimelineTools ?? true
+  const store = createMemo<InstanceMessageStore>(() => messageStoreBus.getOrCreate(props.instanceId))
+  const messageIds = createMemo(() => store().getSessionMessageIds(props.sessionId))
+
+  const sessionRevision = createMemo(() => store().getSessionRevision(props.sessionId))
+  const usageSnapshot = createMemo(() => store().getSessionUsage(props.sessionId))
+  const sessionInfo = createMemo(() =>
+    getSessionInfo(props.instanceId, props.sessionId) ?? {
+      cost: 0,
+      contextWindow: 0,
+      isSubscriptionModel: false,
+      inputTokens: 0,
+      outputTokens: 0,
+      reasoningTokens: 0,
+      actualUsageTokens: 0,
+      modelOutputLimit: 0,
+      contextAvailableTokens: null,
+    },
+  )
+
+  const tokenStats = createMemo(() => {
+    const usage = usageSnapshot()
+    const info = sessionInfo()
+    return {
+      used: usage?.actualUsageTokens ?? info.actualUsageTokens ?? 0,
+      avail: info.contextAvailableTokens,
+    }
+  })
+
+  const preferenceSignature = createMemo(() => {
+    const pref = preferences()
+    const showThinking = pref.showThinkingBlocks ? 1 : 0
+    const thinkingExpansion = pref.thinkingBlocksExpansion ?? "expanded"
+    const showUsage = (pref.showUsageMetrics ?? true) ? 1 : 0
+    return `${showThinking}|${thinkingExpansion}|${showUsage}`
+  })
+
+  const handleTimelineSegmentClick = (segment: TimelineSegment) => {
+    if (typeof document === "undefined") return
+    const anchor = document.getElementById(getMessageAnchorId(segment.messageId))
+    anchor?.scrollIntoView({ block: "start", behavior: "smooth" })
+  }
+ 
+  const lastAssistantIndex = createMemo(() => {
+    const ids = messageIds()
+    const resolvedStore = store()
+    for (let index = ids.length - 1; index >= 0; index--) {
+      const record = resolvedStore.getMessage(ids[index])
+      if (record?.role === "assistant") {
+        return index
+      }
+    }
+    return -1
+  })
+ 
+  const [timelineSegments, setTimelineSegments] = createSignal<TimelineSegment[]>([])
+  const hasTimelineSegments = () => timelineSegments().length > 0
+
+  const seenTimelineMessageIds = new Set<string>()
+  const seenTimelineSegmentKeys = new Set<string>()
+
+  function makeTimelineKey(segment: TimelineSegment) {
+    return `${segment.messageId}:${segment.id}:${segment.type}`
+  }
+
+  function seedTimeline() {
+    seenTimelineMessageIds.clear()
+    seenTimelineSegmentKeys.clear()
+    const ids = untrack(messageIds)
+    const resolvedStore = untrack(store)
+    const segments: TimelineSegment[] = []
+    ids.forEach((messageId) => {
+      const record = resolvedStore.getMessage(messageId)
+      if (!record) return
+      seenTimelineMessageIds.add(messageId)
+      const built = buildTimelineSegments(props.instanceId, record)
+      built.forEach((segment) => {
+        const key = makeTimelineKey(segment)
+        if (seenTimelineSegmentKeys.has(key)) return
+        seenTimelineSegmentKeys.add(key)
+        segments.push(segment)
+      })
+    })
+    setTimelineSegments(segments)
+  }
+
+  function appendTimelineForMessage(messageId: string) {
+    const record = untrack(() => store().getMessage(messageId))
+    if (!record) return
+    const built = buildTimelineSegments(props.instanceId, record)
+    if (built.length === 0) return
+    const newSegments: TimelineSegment[] = []
+    built.forEach((segment) => {
+      const key = makeTimelineKey(segment)
+      if (seenTimelineSegmentKeys.has(key)) return
+      seenTimelineSegmentKeys.add(key)
+      newSegments.push(segment)
+    })
+    if (newSegments.length > 0) {
+      setTimelineSegments((prev) => [...prev, ...newSegments])
+    }
+  }
+  const [activeMessageId, setActiveMessageId] = createSignal<string | null>(null)
+ 
+  const changeToken = createMemo(() => String(sessionRevision()))
+  const isActive = createMemo(() => props.isActive !== false)
+
+
+  const scrollCache = useScrollCache({
+    instanceId: () => props.instanceId,
+    sessionId: () => props.sessionId,
+    scope: SCROLL_SCOPE,
+  })
+
+  const [scrollElement, setScrollElement] = createSignal<HTMLDivElement | undefined>()
+  const [topSentinel, setTopSentinel] = createSignal<HTMLDivElement | null>(null)
+  const [bottomSentinelSignal, setBottomSentinelSignal] = createSignal<HTMLDivElement | null>(null)
+  const bottomSentinel = () => bottomSentinelSignal()
+  const setBottomSentinel = (element: HTMLDivElement | null) => {
+    setBottomSentinelSignal(element)
+    resolvePendingActiveScroll()
+  }
+  const [autoScroll, setAutoScroll] = createSignal(true)
+  const [showScrollTopButton, setShowScrollTopButton] = createSignal(false)
+  const [showScrollBottomButton, setShowScrollBottomButton] = createSignal(false)
+  const [topSentinelVisible, setTopSentinelVisible] = createSignal(true)
+  const [bottomSentinelVisible, setBottomSentinelVisible] = createSignal(true)
+  const [quoteSelection, setQuoteSelection] = createSignal<{ text: string; top: number; left: number } | null>(null)
+
+  let containerRef: HTMLDivElement | undefined
+  let shellRef: HTMLDivElement | undefined
+  let pendingScrollFrame: number | null = null
+
+  let pendingAnchorScroll: number | null = null
+
+  let pendingScrollPersist: number | null = null
+  let userScrollIntentUntil = 0
+  let detachScrollIntentListeners: (() => void) | undefined
+  let hasRestoredScroll = false
+  let suppressAutoScrollOnce = false
+  let pendingActiveScroll = false
+  let scrollToBottomFrame: number | null = null
+  let scrollToBottomDelayedFrame: number | null = null
+  let pendingInitialScroll = true
+
+  function markUserScrollIntent() {
+    const now = typeof performance !== "undefined" ? performance.now() : Date.now()
+    userScrollIntentUntil = now + USER_SCROLL_INTENT_WINDOW_MS
+  }
+
+  function hasUserScrollIntent() {
+    const now = typeof performance !== "undefined" ? performance.now() : Date.now()
+    return now <= userScrollIntentUntil
+  }
+
+  function attachScrollIntentListeners(element: HTMLDivElement | undefined) {
+    if (detachScrollIntentListeners) {
+      detachScrollIntentListeners()
+      detachScrollIntentListeners = undefined
+    }
+    if (!element) return
+    const handlePointerIntent = () => markUserScrollIntent()
+    const handleKeyIntent = (event: KeyboardEvent) => {
+      if (SCROLL_INTENT_KEYS.has(event.key)) {
+        markUserScrollIntent()
+      }
+    }
+    element.addEventListener("wheel", handlePointerIntent, { passive: true })
+    element.addEventListener("pointerdown", handlePointerIntent)
+    element.addEventListener("touchstart", handlePointerIntent, { passive: true })
+    element.addEventListener("keydown", handleKeyIntent)
+    detachScrollIntentListeners = () => {
+      element.removeEventListener("wheel", handlePointerIntent)
+      element.removeEventListener("pointerdown", handlePointerIntent)
+      element.removeEventListener("touchstart", handlePointerIntent)
+      element.removeEventListener("keydown", handleKeyIntent)
+    }
+  }
+
+  function setContainerRef(element: HTMLDivElement | null) {
+    containerRef = element || undefined
+    setScrollElement(containerRef)
+    attachScrollIntentListeners(containerRef)
+    if (!containerRef) {
+      clearQuoteSelection()
+      return
+    }
+    resolvePendingActiveScroll()
+  }
+
+  function setShellElement(element: HTMLDivElement | null) {
+    shellRef = element || undefined
+    if (!shellRef) {
+      clearQuoteSelection()
+    }
+  }
+ 
+  function updateScrollIndicatorsFromVisibility() {
+
+    const hasItems = messageIds().length > 0
+    const bottomVisible = bottomSentinelVisible()
+    const topVisible = topSentinelVisible()
+    setShowScrollBottomButton(hasItems && !bottomVisible)
+    setShowScrollTopButton(hasItems && !topVisible)
+  }
+
+  function scheduleScrollPersist() {
+    if (pendingScrollPersist !== null) return
+    pendingScrollPersist = requestAnimationFrame(() => {
+      pendingScrollPersist = null
+      if (!containerRef) return
+      // scrollCache.persist(containerRef, { atBottomOffset: SCROLL_SENTINEL_MARGIN_PX })
+    })
+  }
+ 
+  function scrollToBottom(immediate = false, options?: { suppressAutoAnchor?: boolean }) {
+    if (!containerRef) return
+    const sentinel = bottomSentinel()
+    const behavior = immediate ? "auto" : "smooth"
+    const suppressAutoAnchor = options?.suppressAutoAnchor ?? !immediate
+    if (suppressAutoAnchor) {
+      suppressAutoScrollOnce = true
+    }
+    sentinel?.scrollIntoView({ block: "end", inline: "nearest", behavior })
+    setAutoScroll(true)
+    scheduleScrollPersist()
+  }
+
+  function clearScrollToBottomFrames() {
+    if (scrollToBottomFrame !== null) {
+      cancelAnimationFrame(scrollToBottomFrame)
+      scrollToBottomFrame = null
+    }
+    if (scrollToBottomDelayedFrame !== null) {
+      cancelAnimationFrame(scrollToBottomDelayedFrame)
+      scrollToBottomDelayedFrame = null
+    }
+  }
+
+  function requestScrollToBottom(immediate = true) {
+    if (!isActive()) {
+      pendingActiveScroll = true
+      return
+    }
+    if (!containerRef || !bottomSentinel()) {
+      pendingActiveScroll = true
+      return
+    }
+    pendingActiveScroll = false
+    clearScrollToBottomFrames()
+    scrollToBottomFrame = requestAnimationFrame(() => {
+      scrollToBottomFrame = null
+      scrollToBottomDelayedFrame = requestAnimationFrame(() => {
+        scrollToBottomDelayedFrame = null
+        scrollToBottom(immediate)
+      })
+    })
+  }
+
+  function resolvePendingActiveScroll() {
+    if (!pendingActiveScroll) return
+    if (!isActive()) return
+    requestScrollToBottom(true)
+  }
+ 
+  function scrollToTop(immediate = false) {
+    if (!containerRef) return
+    const behavior = immediate ? "auto" : "smooth"
+    setAutoScroll(false)
+    topSentinel()?.scrollIntoView({ block: "start", inline: "nearest", behavior })
+    scheduleScrollPersist()
+  }
+
+
+  function scheduleAnchorScroll(immediate = false) {
+    if (!autoScroll()) return
+    if (!isActive()) {
+      pendingActiveScroll = true
+      return
+    }
+    const sentinel = bottomSentinel()
+    if (!sentinel) {
+      pendingActiveScroll = true
+      return
+    }
+    if (pendingAnchorScroll !== null) {
+      cancelAnimationFrame(pendingAnchorScroll)
+      pendingAnchorScroll = null
+    }
+    pendingAnchorScroll = requestAnimationFrame(() => {
+      pendingAnchorScroll = null
+      sentinel.scrollIntoView({ block: "end", inline: "nearest", behavior: immediate ? "auto" : "smooth" })
+    })
+  }
+
+  function clearQuoteSelection() {
+    setQuoteSelection(null)
+  }
+
+  function isSelectionWithinStream(range: Range | null) {
+    if (!range || !containerRef) return false
+    const node = range.commonAncestorContainer
+    if (!node) return false
+    return containerRef.contains(node)
+  }
+
+  function updateQuoteSelectionFromSelection() {
+    if (!props.onQuoteSelection || typeof window === "undefined") {
+      clearQuoteSelection()
+      return
+    }
+    const selection = window.getSelection()
+    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+      clearQuoteSelection()
+      return
+    }
+    const range = selection.getRangeAt(0)
+    if (!isSelectionWithinStream(range)) {
+      clearQuoteSelection()
+      return
+    }
+    const shell = shellRef
+    if (!shell) {
+      clearQuoteSelection()
+      return
+    }
+    const rawText = selection.toString().trim()
+    if (!rawText) {
+      clearQuoteSelection()
+      return
+    }
+    const limited =
+      rawText.length > QUOTE_SELECTION_MAX_LENGTH ? rawText.slice(0, QUOTE_SELECTION_MAX_LENGTH).trimEnd() : rawText
+    if (!limited) {
+      clearQuoteSelection()
+      return
+    }
+    const rects = range.getClientRects()
+    const anchorRect = rects.length > 0 ? rects[0] : range.getBoundingClientRect()
+    const shellRect = shell.getBoundingClientRect()
+    const relativeTop = Math.max(anchorRect.top - shellRect.top - 40, 8)
+    const maxLeft = Math.max(shell.clientWidth - 180, 8)
+    const relativeLeft = Math.min(Math.max(anchorRect.left - shellRect.left, 8), maxLeft)
+    setQuoteSelection({ text: limited, top: relativeTop, left: relativeLeft })
+  }
+
+  function handleStreamMouseUp() {
+    updateQuoteSelectionFromSelection()
+  }
+
+  function handleQuoteSelectionRequest(mode: "quote" | "code") {
+    const info = quoteSelection()
+    if (!info || !props.onQuoteSelection) return
+    props.onQuoteSelection(info.text, mode)
+    clearQuoteSelection()
+    if (typeof window !== "undefined") {
+      const selection = window.getSelection()
+      selection?.removeAllRanges()
+    }
+  }
+ 
+  function handleContentRendered() {
+    if (props.loading) {
+      return
+    }
+    scheduleAnchorScroll()
+  }
+
+  function handleScroll() {
+
+    if (!containerRef) return
+    if (pendingScrollFrame !== null) {
+      cancelAnimationFrame(pendingScrollFrame)
+    }
+    const isUserScroll = hasUserScrollIntent()
+    pendingScrollFrame = requestAnimationFrame(() => {
+      pendingScrollFrame = null
+      if (!containerRef) return
+      const atBottom = bottomSentinelVisible()
+
+      if (isUserScroll) {
+        if (atBottom) {
+          if (!autoScroll()) setAutoScroll(true)
+        } else if (autoScroll()) {
+          setAutoScroll(false)
+        }
+      }
+
+      clearQuoteSelection()
+      scheduleScrollPersist()
+    })
+
+  }
+
+
+  createEffect(() => {
+    if (props.registerScrollToBottom) {
+      props.registerScrollToBottom(() => requestScrollToBottom(true))
+    }
+  })
+
+  let lastActiveState = false
+  createEffect(() => {
+    const active = isActive()
+    if (active) {
+      resolvePendingActiveScroll()
+      if (!lastActiveState && autoScroll()) {
+        requestScrollToBottom(true)
+      }
+    } else if (autoScroll()) {
+      pendingActiveScroll = true
+    }
+    lastActiveState = active
+  })
+
+  createEffect(() => {
+    const loading = Boolean(props.loading)
+    if (loading) {
+      pendingInitialScroll = true
+      return
+    }
+    if (!pendingInitialScroll) {
+      return
+    }
+    const container = scrollElement()
+    const sentinel = bottomSentinel()
+    if (!container || !sentinel || messageIds().length === 0) {
+      return
+    }
+    pendingInitialScroll = false
+    requestScrollToBottom(true)
+  })
+
+  let previousTimelineIds: string[] = []
+  let previousLastTimelineMessageId: string | null = null
+  let previousLastTimelinePartCount = 0
+
+  createEffect(() => {
+    const loading = Boolean(props.loading)
+    const ids = messageIds()
+
+    if (loading) {
+      previousTimelineIds = []
+      previousLastTimelineMessageId = null
+      previousLastTimelinePartCount = 0
+      setTimelineSegments([])
+      seenTimelineMessageIds.clear()
+      seenTimelineSegmentKeys.clear()
+      return
+    }
+
+    if (previousTimelineIds.length === 0 && ids.length > 0) {
+      seedTimeline()
+      previousTimelineIds = ids.slice()
+      return
+    }
+
+    if (ids.length < previousTimelineIds.length) {
+      seedTimeline()
+      previousTimelineIds = ids.slice()
+      return
+    }
+
+    if (ids.length === previousTimelineIds.length) {
+      let changedIndex = -1
+      let changeCount = 0
+      for (let index = 0; index < ids.length; index++) {
+        if (ids[index] !== previousTimelineIds[index]) {
+          changedIndex = index
+          changeCount += 1
+          if (changeCount > 1) break
+        }
+      }
+      if (changeCount === 1 && changedIndex >= 0) {
+        const oldId = previousTimelineIds[changedIndex]
+        const newId = ids[changedIndex]
+        if (seenTimelineMessageIds.has(oldId) && !seenTimelineMessageIds.has(newId)) {
+          seenTimelineMessageIds.delete(oldId)
+          seenTimelineMessageIds.add(newId)
+          setTimelineSegments((prev) => {
+            const next = prev.map((segment) => {
+              if (segment.messageId !== oldId) return segment
+              const updatedId = segment.id.replace(oldId, newId)
+              return { ...segment, messageId: newId, id: updatedId }
+            })
+            seenTimelineSegmentKeys.clear()
+            next.forEach((segment) => seenTimelineSegmentKeys.add(makeTimelineKey(segment)))
+            return next
+          })
+          previousTimelineIds = ids.slice()
+          return
+        }
+      }
+    }
+
+    const newIds: string[] = []
+    ids.forEach((id) => {
+      if (!seenTimelineMessageIds.has(id)) {
+        newIds.push(id)
+      }
+    })
+
+    if (newIds.length > 0) {
+      newIds.forEach((id) => {
+        seenTimelineMessageIds.add(id)
+        appendTimelineForMessage(id)
+      })
+    }
+
+    previousTimelineIds = ids.slice()
+  })
+
+  createEffect(() => {
+    if (props.loading) return
+    const ids = messageIds()
+    if (ids.length === 0) return
+    const lastId = ids[ids.length - 1]
+    if (!lastId) return
+    const record = store().getMessage(lastId)
+    if (!record) return
+    const partCount = record.partIds.length
+    if (lastId === previousLastTimelineMessageId && partCount === previousLastTimelinePartCount) {
+      return
+    }
+    previousLastTimelineMessageId = lastId
+    previousLastTimelinePartCount = partCount
+    const built = buildTimelineSegments(props.instanceId, record)
+    const newSegments: TimelineSegment[] = []
+    built.forEach((segment) => {
+      const key = makeTimelineKey(segment)
+      if (seenTimelineSegmentKeys.has(key)) return
+      seenTimelineSegmentKeys.add(key)
+      newSegments.push(segment)
+    })
+    if (newSegments.length > 0) {
+      setTimelineSegments((prev) => [...prev, ...newSegments])
+    }
+  })
+
+  createEffect(() => {
+    if (!props.onQuoteSelection) {
+      clearQuoteSelection()
+    }
+  })
+
+
+  createEffect(() => {
+    if (typeof document === "undefined") return
+    const handleSelectionChange = () => updateQuoteSelectionFromSelection()
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!shellRef) return
+      if (!shellRef.contains(event.target as Node)) {
+        clearQuoteSelection()
+      }
+    }
+    document.addEventListener("selectionchange", handleSelectionChange)
+    document.addEventListener("pointerdown", handlePointerDown)
+    onCleanup(() => {
+      document.removeEventListener("selectionchange", handleSelectionChange)
+      document.removeEventListener("pointerdown", handlePointerDown)
+    })
+  })
+ 
+  createEffect(() => {
+    if (props.loading) {
+      clearQuoteSelection()
+    }
+  })
+
+  createEffect(() => {
+    const target = containerRef
+    const loading = props.loading
+    if (!target || loading || hasRestoredScroll) return
+
+
+    // scrollCache.restore(target, {
+    //   onApplied: (snapshot) => {
+    //     if (snapshot) {
+    //       setAutoScroll(snapshot.atBottom)
+    //     } else {
+    //       setAutoScroll(bottomSentinelVisible())
+    //     }
+    //     updateScrollIndicatorsFromVisibility()
+    //   },
+    // })
+
+    hasRestoredScroll = true
+  })
+
+  let previousToken: string | undefined
+  createEffect(() => {
+    const token = changeToken()
+    const loading = props.loading
+    if (loading || !token || token === previousToken) {
+      return
+    }
+    previousToken = token
+    if (suppressAutoScrollOnce) {
+      suppressAutoScrollOnce = false
+      return
+    }
+    if (autoScroll()) {
+      scheduleAnchorScroll(true)
+    }
+  })
+
+  createEffect(() => {
+    preferenceSignature()
+    if (props.loading || !autoScroll()) {
+      return
+    }
+    if (suppressAutoScrollOnce) {
+      suppressAutoScrollOnce = false
+      return
+    }
+    scheduleAnchorScroll(true)
+  })
+
+  createEffect(() => {
+    if (messageIds().length === 0) {
+      setShowScrollTopButton(false)
+      setShowScrollBottomButton(false)
+      setAutoScroll(true)
+      return
+    }
+    updateScrollIndicatorsFromVisibility()
+  })
+  createEffect(() => {
+    const container = scrollElement()
+    const topTarget = topSentinel()
+    const bottomTarget = bottomSentinel()
+    if (!container || !topTarget || !bottomTarget) return
+    const observer = new IntersectionObserver(
+      (entries) => {
+        let visibilityChanged = false
+        for (const entry of entries) {
+          if (entry.target === topTarget) {
+            setTopSentinelVisible(entry.isIntersecting)
+            visibilityChanged = true
+          } else if (entry.target === bottomTarget) {
+            setBottomSentinelVisible(entry.isIntersecting)
+            visibilityChanged = true
+          }
+        }
+        if (visibilityChanged) {
+          updateScrollIndicatorsFromVisibility()
+        }
+      },
+      { root: container, threshold: 0, rootMargin: `${SCROLL_SENTINEL_MARGIN_PX}px 0px ${SCROLL_SENTINEL_MARGIN_PX}px 0px` },
+    )
+    observer.observe(topTarget)
+    observer.observe(bottomTarget)
+    onCleanup(() => observer.disconnect())
+  })
+ 
+  createEffect(() => {
+    const container = scrollElement()
+    const ids = messageIds()
+    if (!container || ids.length === 0) return
+    if (typeof document === "undefined") return
+ 
+    const observer = new IntersectionObserver(
+      (entries) => {
+        let best: IntersectionObserverEntry | null = null
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue
+          if (!best || entry.boundingClientRect.top < best.boundingClientRect.top) {
+            best = entry
+          }
+        }
+        if (best) {
+          const anchorId = (best.target as HTMLElement).id
+          const messageId = anchorId.startsWith("message-anchor-") ? anchorId.slice("message-anchor-".length) : anchorId
+          setActiveMessageId((current) => (current === messageId ? current : messageId))
+        }
+      },
+      { root: container, rootMargin: "-10% 0px -80% 0px", threshold: 0 },
+    )
+ 
+    ids.forEach((messageId) => {
+      const anchor = document.getElementById(getMessageAnchorId(messageId))
+      if (anchor) {
+        observer.observe(anchor)
+      }
+    })
+ 
+    onCleanup(() => observer.disconnect())
+  })
+ 
+  onCleanup(() => {
+
+
+    if (pendingScrollFrame !== null) {
+      cancelAnimationFrame(pendingScrollFrame)
+    }
+    if (pendingScrollPersist !== null) {
+      cancelAnimationFrame(pendingScrollPersist)
+    }
+    if (pendingAnchorScroll !== null) {
+      cancelAnimationFrame(pendingAnchorScroll)
+    }
+    clearScrollToBottomFrames()
+    if (detachScrollIntentListeners) {
+      detachScrollIntentListeners()
+    }
+    if (containerRef) {
+      // scrollCache.persist(containerRef, { atBottomOffset: SCROLL_SENTINEL_MARGIN_PX })
+    }
+    clearQuoteSelection()
+  })
+
+  return (
+    <div class="message-stream-container">
+      <div class={`message-layout${hasTimelineSegments() ? " message-layout--with-timeline" : ""}`}>
+        <div class="message-stream-shell" ref={setShellElement}>
+          <div class="message-stream" ref={setContainerRef} onScroll={handleScroll} onMouseUp={handleStreamMouseUp}>
+            <div ref={setTopSentinel} aria-hidden="true" style={{ height: "1px" }} />
+            <Show when={!props.loading && messageIds().length === 0}>
+              <div class="empty-state">
+                <div class="empty-state-content">
+                  <div class="flex flex-col items-center gap-3 mb-6">
+                    <img src={codeNomadLogo} alt="CodeNomad logo" class="h-48 w-auto" loading="lazy" />
+                    <h1 class="text-3xl font-semibold text-primary">CodeNomad</h1>
+                  </div>
+                  <h3>Start a conversation</h3>
+                  <p>Type a message below or open the Command Palette:</p>
+                  <ul>
+                    <li>
+                      <span>Command Palette</span>
+                      <Kbd shortcut="cmd+shift+p" class="ml-2" />
+                    </li>
+                    <li>Ask about your codebase</li>
+                    <li>
+                      Attach files with <code>@</code>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </Show>
+ 
+            <Show when={props.loading}>
+              <div class="loading-state">
+                <div class="spinner" />
+                <p>Loading messages...</p>
+              </div>
+            </Show>
+ 
+            <MessageBlockList
+              instanceId={props.instanceId}
+              sessionId={props.sessionId}
+              store={store}
+              messageIds={messageIds}
+              lastAssistantIndex={lastAssistantIndex}
+              showThinking={() => preferences().showThinkingBlocks}
+              thinkingDefaultExpanded={() => (preferences().thinkingBlocksExpansion ?? "expanded") === "expanded"}
+              showUsageMetrics={showUsagePreference}
+              scrollContainer={scrollElement}
+              loading={props.loading}
+              onRevert={props.onRevert}
+              onFork={props.onFork}
+              onContentRendered={handleContentRendered}
+              setBottomSentinel={setBottomSentinel}
+              suspendMeasurements={() => !isActive()}
+            />
+
+
+          </div>
+ 
+          <Show when={showScrollTopButton() || showScrollBottomButton()}>
+            <div class="message-scroll-button-wrapper">
+              <Show when={showScrollTopButton()}>
+                <button type="button" class="message-scroll-button" onClick={() => scrollToTop()} aria-label="Scroll to first message">
+                  <span class="message-scroll-icon" aria-hidden="true">↑</span>
+                </button>
+              </Show>
+              <Show when={showScrollBottomButton()}>
+                <button
+                  type="button"
+                  class="message-scroll-button"
+                  onClick={() => scrollToBottom(false, { suppressAutoAnchor: false })}
+                  aria-label="Scroll to latest message"
+                >
+                  <span class="message-scroll-icon" aria-hidden="true">↓</span>
+                </button>
+              </Show>
+            </div>
+          </Show>
+
+          <Show when={quoteSelection()}>
+            {(selection) => (
+              <div
+                class="message-quote-popover"
+                style={{ top: `${selection().top}px`, left: `${selection().left}px` }}
+              >
+                <div class="message-quote-button-group">
+                  <button type="button" class="message-quote-button" onClick={() => handleQuoteSelectionRequest("quote")}>
+                    Add as quote
+                  </button>
+                  <button type="button" class="message-quote-button" onClick={() => handleQuoteSelectionRequest("code")}>
+                    Add as code
+                  </button>
+                </div>
+              </div>
+            )}
+          </Show>
+        </div>
+ 
+        <Show when={hasTimelineSegments()}>
+          <div class="message-timeline-sidebar">
+            <MessageTimeline
+              segments={timelineSegments()}
+              onSegmentClick={handleTimelineSegmentClick}
+              activeMessageId={activeMessageId()}
+              instanceId={props.instanceId}
+              sessionId={props.sessionId}
+              showToolSegments={showTimelineToolsPreference()}
+            />
+          </div>
+        </Show>
+      </div>
+
+    </div>
+  )
+}

packages/ui/src/components/message-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/message-timeline.tsx

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

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

@@ -3,7 +3,9 @@ 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"
+import { getLogger } from "../lib/logger"
+const log = getLogger("session")
+
 
 interface ModelSelectorProps {
   instanceId: string
@@ -26,7 +28,7 @@ export default function ModelSelector(props: ModelSelectorProps) {
 
   createEffect(() => {
     if (instanceProviders().length === 0) {
-      fetchProviders(props.instanceId).catch(console.error)
+      fetchProviders(props.instanceId).catch((error) => log.error("Failed to fetch providers", error))
     }
   })
 
@@ -132,9 +134,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,10 @@ 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"
+import { getLogger } from "../lib/logger"
+const log = getLogger("actions")
+
 
 interface BinaryOption {
   path: string
@@ -32,8 +36,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"))
@@ -80,7 +86,7 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
 
     setTimeout(() => {
       pathsToValidate.forEach((path) => {
-        validateBinary(path).catch(console.error)
+        validateBinary(path).catch((error) => log.error("Failed to validate binary", { path, error }))
       })
     }, 0)
   })
@@ -128,9 +134,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 +261,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

@@ -1,4 +1,5 @@
 import { createSignal, Show, onMount, For, onCleanup, createEffect, on, untrack } from "solid-js"
+import { ArrowBigUp, ArrowBigDown } from "lucide-solid"
 import UnifiedPicker from "./unified-picker"
 import { addToHistory, getHistory } from "../stores/message-history"
 import { getAttachments, addAttachment, clearAttachments, removeAttachment } from "../stores/attachments"
@@ -7,10 +8,12 @@ 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"
+import { getLogger } from "../lib/logger"
+const log = getLogger("actions")
+
 
 interface PromptInputProps {
   instanceId: string
@@ -20,11 +23,15 @@ interface PromptInputProps {
   onRunShell?: (command: string) => Promise<void>
   disabled?: boolean
   escapeInDebounce?: boolean
+  isSessionBusy?: boolean
+  onAbortSession?: () => Promise<void>
+  registerQuoteHandler?: (handler: (text: string, mode: "quote" | "code") => void) => void | (() => void)
 }
 
 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)
@@ -36,6 +43,7 @@ export default function PromptInput(props: PromptInputProps) {
   const [pasteCount, setPasteCount] = createSignal(0)
   const [imageCount, setImageCount] = createSignal(0)
   const [mode, setMode] = createSignal<"normal" | "shell">("normal")
+  const SELECTION_INSERT_MAX_LENGTH = 2000
   let textareaRef: HTMLTextAreaElement | undefined
   let containerRef: HTMLDivElement | undefined
 
@@ -45,6 +53,22 @@ export default function PromptInput(props: PromptInputProps) {
   const attachments = () => getAttachments(props.instanceId, props.sessionId)
   const instanceAgents = () => agents().get(props.instanceId) || []
 
+  createEffect(() => {
+    if (!props.registerQuoteHandler) return
+    const cleanup = props.registerQuoteHandler((text, mode) => {
+      if (mode === "code") {
+        insertCodeSelection(text)
+      } else {
+        insertQuotedSelection(text)
+      }
+    })
+    onCleanup(() => {
+      if (typeof cleanup === "function") {
+        cleanup()
+      }
+    })
+  })
+
   const setPrompt = (value: string) => {
     setPromptInternal(value)
     setSessionDraftPrompt(props.instanceId, props.sessionId, value)
@@ -163,6 +187,53 @@ export default function PromptInput(props: PromptInputProps) {
     }
   }
 
+  function handleExpandTextAttachment(attachment: Attachment) {
+    if (attachment.source.type !== "text") return
+
+    const textarea = textareaRef
+    const value = attachment.source.value
+    const match = attachment.display.match(/pasted #(\d+)/)
+    const placeholder = match ? `[pasted #${match[1]}]` : null
+    const currentText = prompt()
+
+    let nextText = currentText
+    let selectionTarget: number | null = null
+
+    if (placeholder) {
+      const placeholderIndex = currentText.indexOf(placeholder)
+      if (placeholderIndex !== -1) {
+        nextText =
+          currentText.substring(0, placeholderIndex) +
+          value +
+          currentText.substring(placeholderIndex + placeholder.length)
+        selectionTarget = placeholderIndex + value.length
+      }
+    }
+
+    if (nextText === currentText) {
+      if (textarea) {
+        const start = textarea.selectionStart
+        const end = textarea.selectionEnd
+        nextText = currentText.substring(0, start) + value + currentText.substring(end)
+        selectionTarget = start + value.length
+      } else {
+        nextText = currentText + value
+      }
+    }
+
+    setPrompt(nextText)
+    removeAttachment(props.instanceId, props.sessionId, attachment.id)
+
+    if (textarea) {
+      setTimeout(() => {
+        textarea.focus()
+        if (selectionTarget !== null) {
+          textarea.setSelectionRange(selectionTarget, selectionTarget)
+        }
+      }, 0)
+    }
+  }
+
   async function handlePaste(e: ClipboardEvent) {
     const items = e.clipboardData?.items
     if (!items) return
@@ -467,31 +538,19 @@ export default function PromptInput(props: PromptInputProps) {
       return
     }
 
-    const atStart = textarea.selectionStart === 0 && textarea.selectionEnd === 0
-    const currentHistory = history()
-
-    if (e.key === "ArrowUp" && !showPicker() && atStart && currentHistory.length > 0) {
-      e.preventDefault()
-      if (historyIndex() === -1) {
-        setHistoryDraft(prompt())
+    if (e.key === "ArrowUp") {
+      const handled = selectPreviousHistory()
+      if (handled) {
+        e.preventDefault()
+        return
       }
-      const newIndex = historyIndex() === -1 ? 0 : Math.min(historyIndex() + 1, currentHistory.length - 1)
-      setHistoryIndex(newIndex)
-      setPrompt(currentHistory[newIndex])
-      return
     }
 
-    if (e.key === "ArrowDown" && !showPicker() && historyIndex() >= 0) {
-      e.preventDefault()
-      const newIndex = historyIndex() - 1
-      if (newIndex >= 0) {
-        setHistoryIndex(newIndex)
-        setPrompt(currentHistory[newIndex])
-      } else {
-        setHistoryIndex(-1)
-        const draft = historyDraft()
-        setPrompt(draft ?? "")
-        setHistoryDraft(null)
+    if (e.key === "ArrowDown") {
+      const handled = selectNextHistory()
+      if (handled) {
+        e.preventDefault()
+        return
       }
     }
   }
@@ -499,11 +558,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) {
+        log.error("Failed to update prompt history:", historyError)
+      }
+    }
+
     clearPrompt()
     clearAttachments(props.instanceId, props.sessionId)
     setIgnoredAtPositions(new Set<number>())
@@ -512,10 +587,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)
@@ -523,10 +594,11 @@ 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)
+      log.error("Failed to send message:", error)
       showAlertDialog("Failed to send message", {
         title: "Send failed",
         detail: error instanceof Error ? error.message : String(error),
@@ -536,8 +608,68 @@ export default function PromptInput(props: PromptInputProps) {
       textareaRef?.focus()
     }
   }
-
+ 
+  function focusTextareaEnd() {
+    if (!textareaRef) return
+    setTimeout(() => {
+      if (!textareaRef) return
+      const pos = textareaRef.value.length
+      textareaRef.setSelectionRange(pos, pos)
+      textareaRef.focus()
+    }, 0)
+  }
+ 
+  function canUseHistory(force = false) {
+    if (force) return true
+    if (showPicker()) return false
+    const textarea = textareaRef
+    if (!textarea) return false
+    return textarea.selectionStart === 0 && textarea.selectionEnd === 0
+  }
+ 
+  function selectPreviousHistory(force = false) {
+    const entries = history()
+    if (entries.length === 0) return false
+    if (!canUseHistory(force)) return false
+ 
+    if (historyIndex() === -1) {
+      setHistoryDraft(prompt())
+    }
+ 
+    const newIndex = historyIndex() === -1 ? 0 : Math.min(historyIndex() + 1, entries.length - 1)
+    setHistoryIndex(newIndex)
+    setPrompt(entries[newIndex])
+    focusTextareaEnd()
+    return true
+  }
+ 
+  function selectNextHistory(force = false) {
+    const entries = history()
+    if (entries.length === 0) return false
+    if (!canUseHistory(force)) return false
+    if (historyIndex() === -1) return false
+ 
+    const newIndex = historyIndex() - 1
+    if (newIndex >= 0) {
+      setHistoryIndex(newIndex)
+      setPrompt(entries[newIndex])
+    } else {
+      setHistoryIndex(-1)
+      const draft = historyDraft()
+      setPrompt(draft ?? "")
+      setHistoryDraft(null)
+    }
+    focusTextareaEnd()
+    return true
+  }
+ 
+  function handleAbort() {
+    if (!props.onAbortSession || !props.isSessionBusy) return
+    void props.onAbortSession()
+  }
+ 
   function handleInput(e: Event) {
+
     const target = e.target as HTMLTextAreaElement
     const value = target.value
     setPrompt(value)
@@ -755,15 +887,81 @@ export default function PromptInput(props: PromptInputProps) {
     textareaRef?.focus()
   }
 
+  function insertBlockContent(block: string) {
+    const textarea = textareaRef
+    const current = prompt()
+    const start = textarea ? textarea.selectionStart : current.length
+    const end = textarea ? textarea.selectionEnd : current.length
+    const before = current.substring(0, start)
+    const after = current.substring(end)
+    const needsLeading = before.length > 0 && !before.endsWith("\n") ? "\n" : ""
+    const insertion = `${needsLeading}${block}`
+    const nextValue = before + insertion + after
+
+    setPrompt(nextValue)
+    setHistoryIndex(-1)
+    setHistoryDraft(null)
+    setShowPicker(false)
+    setAtPosition(null)
+
+    if (textarea) {
+      setTimeout(() => {
+        const cursor = before.length + insertion.length
+        textarea.focus()
+        textarea.setSelectionRange(cursor, cursor)
+      }, 0)
+    }
+  }
+
+  function insertQuotedSelection(rawText: string) {
+    const normalized = (rawText ?? "").replace(/\r/g, "").trim()
+    if (!normalized) return
+    const limited =
+      normalized.length > SELECTION_INSERT_MAX_LENGTH
+        ? normalized.slice(0, SELECTION_INSERT_MAX_LENGTH).trimEnd()
+        : normalized
+    const lines = limited
+      .split(/\n/)
+      .map((line) => line.trim())
+      .filter((line) => line.length > 0)
+    if (lines.length === 0) return
+
+    const blockquote = lines.map((line) => `> ${line}`).join("\n")
+    if (!blockquote) return
+
+    insertBlockContent(`${blockquote}\n\n`)
+  }
+
+  function insertCodeSelection(rawText: string) {
+    const normalized = (rawText ?? "").replace(/\r/g, "")
+    const limited =
+      normalized.length > SELECTION_INSERT_MAX_LENGTH
+        ? normalized.slice(0, SELECTION_INSERT_MAX_LENGTH)
+        : normalized
+    const trimmed = limited.replace(/^\n+/, "").replace(/\n+$/, "")
+    if (!trimmed) return
+
+    const block = "```\n" + trimmed + "\n```\n\n"
+    insertBlockContent(block)
+  }
+
+  const canStop = () => Boolean(props.isSessionBusy && props.onAbortSession)
+ 
+  const hasHistory = () => history().length > 0
+  const canHistoryGoPrevious = () => hasHistory() && (historyIndex() === -1 || historyIndex() < history().length - 1)
+  const canHistoryGoNext = () => historyIndex() >= 0
+ 
   const canSend = () => {
     if (props.disabled) return false
     const hasText = prompt().trim().length > 0
     if (mode() === "shell") return hasText
     return hasText || attachments().length > 0
   }
-
+ 
   const shellHint = () => (mode() === "shell" ? { key: "Esc", text: "to exit shell mode" } : { key: "!", text: "for shell mode" })
 
+  const shouldShowOverlay = () => prompt().length === 0
+
   const instance = () => getActiveInstance()
 
   return (
@@ -799,13 +997,18 @@ export default function PromptInput(props: PromptInputProps) {
               <For each={attachments()}>
                 {(attachment) => {
                   const isImage = attachment.mediaType.startsWith("image/")
+                  const textValue = attachment.source.type === "text" ? attachment.source.value : undefined
+                  const isTextAttachment = typeof textValue === "string"
                   return (
-                    <div class={`attachment-chip ${isImage ? "attachment-chip-image" : ""}`}>
+                    <div
+                      class={`attachment-chip ${isImage ? "attachment-chip-image" : ""}`}
+                      title={textValue}
+                    >
                       <Show
                         when={isImage}
                         fallback={
                           <Show
-                            when={attachment.source.type === "text"}
+                            when={isTextAttachment}
                             fallback={
                               <Show
                                 when={attachment.source.type === "agent"}
@@ -844,7 +1047,20 @@ export default function PromptInput(props: PromptInputProps) {
                       >
                         <img src={attachment.url} alt={attachment.filename} class="h-5 w-5 rounded object-cover" />
                       </Show>
-                      <span>{attachment.source.type === "text" ? attachment.display : attachment.filename}</span>
+                      <span>{isTextAttachment ? attachment.display : attachment.filename}</span>
+                      <Show when={isTextAttachment}>
+                        <button
+                          onClick={() => handleExpandTextAttachment(attachment)}
+                          class="attachment-expand"
+                          aria-label="Expand pasted text"
+                          title="Insert pasted text"
+                        >
+                          <svg class="h-3 w-3" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M7 7h6v6H7z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4h12v12" />
+                          </svg>
+                        </button>
+                      </Show>
                       <button
                         onClick={() => handleRemoveAttachment(attachment.id)}
                         class="attachment-remove"
@@ -870,72 +1086,120 @@ 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>
-
-        <button
-          class={`send-button ${mode() === "shell" ? "shell-mode" : ""}`}
-          onClick={handleSend}
-          disabled={!canSend()}
-          aria-label="Send message"
-        >
-          <Show
-            when={mode() === "shell"}
-            fallback={<span class="send-icon">▶</span>}
-          >
-            <svg class="shell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M5 8l5 4-5 4" />
-              <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h6" />
-            </svg>
-          </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>
-                </>
+          <div class="prompt-input-field-container">
+            <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..."
               }
-            >
-              <span class="font-medium" style="color: var(--status-warning);">
-                Press <Kbd>Esc</Kbd> again to abort session
-              </span>
+              value={prompt()}
+              onInput={handleInput}
+              onKeyDown={handleKeyDown}
+              onPaste={handlePaste}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              disabled={props.disabled}
+              rows={4}
+              style={attachments().length > 0 ? { "padding-top": "8px" } : {}}
+              spellcheck={false}
+              autocorrect="off"
+              autoCapitalize="off"
+              autocomplete="off"
+            />
+            <Show when={hasHistory()}>
+              <div class="prompt-history-top">
+                <button
+                  type="button"
+                  class="prompt-history-button"
+                  onClick={() => selectPreviousHistory(true)}
+                  disabled={!canHistoryGoPrevious()}
+                  aria-label="Previous prompt"
+                >
+                  <ArrowBigUp class="h-5 w-5" aria-hidden="true" />
+                </button>
+              </div>
+              <div class="prompt-history-bottom">
+                <button
+                  type="button"
+                  class="prompt-history-button"
+                  onClick={() => selectNextHistory(true)}
+                  disabled={!canHistoryGoNext()}
+                  aria-label="Next prompt"
+                >
+                  <ArrowBigDown class="h-5 w-5" aria-hidden="true" />
+                </button>
+              </div>
             </Show>
-          </HintRow>
-          <Show when={mode() === "shell"}>
-            <HintRow>Shell mode active</HintRow>
-          </Show>
+            <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>
+      </div>
+
+        <div class="prompt-input-actions">
+          <button
+            type="button"
+            class="stop-button"
+            onClick={handleAbort}
+            disabled={!canStop()}
+            aria-label="Stop session"
+            title="Stop session"
+          >
+            <svg class="stop-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <rect x="4" y="4" width="12" height="12" rx="2" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            class={`send-button ${mode() === "shell" ? "shell-mode" : ""}`}
+            onClick={handleSend}
+            disabled={!canSend()}
+            aria-label="Send message"
+          >
+            <Show
+              when={mode() === "shell"}
+              fallback={<span class="send-icon">▶</span>}
+            >
+              <svg class="shell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M5 8l5 4-5 4" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h6" />
+              </svg>
+            </Show>
+          </button>
         </div>
       </div>
     </div>

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

@@ -0,0 +1,243 @@
+import { Dialog } from "@kobalte/core/dialog"
+import { Switch } from "@kobalte/core/switch"
+import { For, Show, createEffect, createMemo, createSignal } from "solid-js"
+import { toDataURL } from "qrcode"
+import { ExternalLink, Link2, Loader2, RefreshCw, Shield, Wifi } from "lucide-solid"
+import type { NetworkAddress, ServerMeta } from "../../../server/src/api-types"
+import { serverApi } from "../lib/api-client"
+import { restartCli } from "../lib/native/cli"
+import { preferences, setListeningMode } from "../stores/preferences"
+import { showConfirmDialog } from "../stores/alerts"
+import { getLogger } from "../lib/logger"
+const log = getLogger("actions")
+
+
+interface RemoteAccessOverlayProps {
+  open: boolean
+  onClose: () => void
+}
+
+export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
+  const [meta, setMeta] = createSignal<ServerMeta | null>(null)
+  const [loading, setLoading] = createSignal(false)
+  const [qrCodes, setQrCodes] = createSignal<Record<string, string>>({})
+  const [expandedUrl, setExpandedUrl] = createSignal<string | null>(null)
+  const [error, setError] = createSignal<string | null>(null)
+
+  const addresses = createMemo<NetworkAddress[]>(() => meta()?.addresses ?? [])
+  const currentMode = createMemo(() => meta()?.listeningMode ?? preferences().listeningMode)
+  const allowExternalConnections = createMemo(() => currentMode() === "all")
+  const displayAddresses = createMemo(() => {
+    const list = addresses()
+    if (allowExternalConnections()) {
+      return list.filter((address) => address.scope !== "loopback")
+    }
+    return list.filter((address) => address.scope === "loopback")
+  })
+
+  const refreshMeta = async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await serverApi.fetchServerMeta()
+      setMeta(result)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  createEffect(() => {
+    if (props.open) {
+      void refreshMeta()
+    }
+  })
+
+  const toggleExpanded = async (url: string) => {
+    if (expandedUrl() === url) {
+      setExpandedUrl(null)
+      return
+    }
+    setExpandedUrl(url)
+    if (!qrCodes()[url]) {
+      try {
+        const dataUrl = await toDataURL(url, { margin: 1, scale: 4 })
+        setQrCodes((prev) => ({ ...prev, [url]: dataUrl }))
+      } catch (err) {
+        log.error("Failed to generate QR code", err)
+      }
+    }
+  }
+
+  const handleAllowConnectionsChange = async (checked: boolean) => {
+    const allow = Boolean(checked)
+    const targetMode: "local" | "all" = allow ? "all" : "local"
+    if (targetMode === currentMode()) {
+      return
+    }
+
+    const confirmed = await showConfirmDialog("Restart to apply listening mode? This will stop all running instances.", {
+      title: allow ? "Open to other devices" : "Limit to this device",
+      variant: "warning",
+      confirmLabel: "Restart now",
+      cancelLabel: "Cancel",
+    })
+
+    if (!confirmed) {
+      // Switch will revert automatically since `checked` is derived from store state
+      return
+    }
+
+    setListeningMode(targetMode)
+    const restarted = await restartCli()
+    if (!restarted) {
+      setError("Unable to restart automatically. Please restart the app to apply the change.")
+    } else {
+      setMeta((prev) => (prev ? { ...prev, listeningMode: targetMode } : prev))
+    }
+
+    void refreshMeta()
+  }
+
+  const handleOpenUrl = (url: string) => {
+    try {
+      window.open(url, "_blank", "noopener,noreferrer")
+    } catch (err) {
+      log.error("Failed to open URL", err)
+    }
+  }
+
+  return (
+    <Dialog
+      open={props.open}
+      modal
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          props.onClose()
+        }
+      }}
+    >
+      <Dialog.Portal>
+        <Dialog.Overlay class="modal-overlay remote-overlay-backdrop" />
+        <div class="remote-overlay">
+          <Dialog.Content class="modal-surface remote-panel" tabIndex={-1}>
+            <header class="remote-header">
+              <div>
+                <p class="remote-eyebrow">Remote handover</p>
+                <h2 class="remote-title">Connect to CodeNomad remotely</h2>
+                <p class="remote-subtitle">Use the addresses below to open CodeNomad from another device.</p>
+              </div>
+              <button type="button" class="remote-close" onClick={props.onClose} aria-label="Close remote access">
+                ×
+              </button>
+            </header>
+
+            <div class="remote-body">
+              <section class="remote-section">
+                <div class="remote-section-heading">
+                  <div class="remote-section-title">
+                    <Shield class="remote-icon" />
+                    <div>
+                      <p class="remote-label">Listening mode</p>
+                      <p class="remote-help">Allow or limit remote handovers by binding to all interfaces or just localhost.</p>
+                    </div>
+                  </div>
+                  <button class="remote-refresh" type="button" onClick={() => void refreshMeta()} disabled={loading()}>
+                    <RefreshCw class={`remote-icon ${loading() ? "remote-spin" : ""}`} />
+                    <span class="remote-refresh-label">Refresh</span>
+                  </button>
+                </div>
+
+                <Switch
+                  class="remote-toggle"
+                  checked={allowExternalConnections()}
+                  onChange={(nextChecked) => {
+                    void handleAllowConnectionsChange(nextChecked)
+                  }}
+                >
+                  <Switch.Input />
+                  <Switch.Control class="remote-toggle-switch" data-checked={allowExternalConnections()}>
+                    <span class="remote-toggle-state">{allowExternalConnections() ? "On" : "Off"}</span>
+                    <Switch.Thumb class="remote-toggle-thumb" />
+                  </Switch.Control>
+                  <div class="remote-toggle-copy">
+                    <span class="remote-toggle-title">Allow connections from other IPs</span>
+                    <span class="remote-toggle-caption">
+                      {allowExternalConnections() ? "Binding to 0.0.0.0" : "Binding to 127.0.0.1"}
+                    </span>
+                  </div>
+                </Switch>
+                <p class="remote-toggle-note">
+                  Changing this requires a restart and temporarily stops all active instances. Share the addresses below once the
+                  server restarts.
+                </p>
+              </section>
+
+              <section class="remote-section">
+                <div class="remote-section-heading">
+                  <div class="remote-section-title">
+                    <Wifi class="remote-icon" />
+                    <div>
+                      <p class="remote-label">Reachable addresses</p>
+                      <p class="remote-help">Launch or scan from another machine to hand over control.</p>
+                    </div>
+                  </div>
+                </div>
+
+                <Show when={!loading()} fallback={<div class="remote-card">Loading addresses…</div>}>
+                  <Show when={!error()} fallback={<div class="remote-error">{error()}</div>}>
+                    <Show when={displayAddresses().length > 0} fallback={<div class="remote-card">No addresses available yet.</div>}>
+                      <div class="remote-address-list">
+                        <For each={displayAddresses()}>
+                          {(address) => {
+                            const expandedState = () => expandedUrl() === address.url
+                            const qr = () => qrCodes()[address.url]
+                            return (
+                              <div class="remote-address">
+                                <div class="remote-address-main">
+                                  <div>
+                                    <p class="remote-address-url">{address.url}</p>
+                                    <p class="remote-address-meta">
+                                      {address.family.toUpperCase()} • {address.scope === "external" ? "Network" : address.scope === "loopback" ? "Loopback" : "Internal"} • {address.ip}
+                                    </p>
+                                  </div>
+                                  <div class="remote-actions">
+                                    <button class="remote-pill" type="button" onClick={() => handleOpenUrl(address.url)}>
+                                      <ExternalLink class="remote-icon" />
+                                      Open
+                                    </button>
+                                    <button
+                                      class="remote-pill"
+                                      type="button"
+                                      onClick={() => void toggleExpanded(address.url)}
+                                      aria-expanded={expandedState()}
+                                    >
+                                      <Link2 class="remote-icon" />
+                                      {expandedState() ? "Hide QR" : "Show QR"}
+                                    </button>
+                                  </div>
+                                </div>
+                                <Show when={expandedState()}>
+                                  <div class="remote-qr">
+                                    <Show when={qr()} fallback={<Loader2 class="remote-icon remote-spin" aria-hidden="true" />}>
+                                      {(dataUrl) => <img src={dataUrl()} alt={`QR for ${address.url}`} class="remote-qr-img" />}
+                                    </Show>
+                                  </div>
+                                </Show>
+                              </div>
+                            )
+                          }}
+                        </For>
+                      </div>
+                    </Show>
+                  </Show>
+                </Show>
+              </section>
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}

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

@@ -1,12 +1,17 @@
-import { Component, For, Show, createSignal, createEffect, onCleanup, onMount, createMemo, JSX } from "solid-js"
+import { Component, For, Show, createSignal, createMemo, JSX } from "solid-js"
 import type { Session, SessionStatus } from "../types/session"
 import { getSessionStatus } from "../stores/session-status"
-import { MessageSquare, Info, X, Copy } from "lucide-solid"
+import { MessageSquare, Info, X, Copy, Trash2, Pencil } from "lucide-solid"
 import KeyboardHint from "./keyboard-hint"
 import Kbd from "./kbd"
+import SessionRenameDialog from "./session-rename-dialog"
 import { keyboardRegistry } from "../lib/keyboard-registry"
 import { formatShortcut } from "../lib/keyboard-utils"
 import { showToastNotification } from "../lib/notifications"
+import { deleteSession, loading, renameSession } from "../stores/sessions"
+import { getLogger } from "../lib/logger"
+const log = getLogger("session")
+
 
 
 interface SessionListProps {
@@ -20,14 +25,8 @@ interface SessionListProps {
   showFooter?: boolean
   headerContent?: JSX.Element
   footerContent?: JSX.Element
-  onWidthChange?: (width: number) => void
 }
 
-const MIN_WIDTH = 200
-const MAX_WIDTH = 500
-const DEFAULT_WIDTH = 280
-const STORAGE_KEY = "opencode-session-sidebar-width"
-
 function formatSessionStatus(status: SessionStatus): string {
   switch (status) {
     case "working":
@@ -58,42 +57,18 @@ function arraysEqual(prev: readonly string[] | undefined, next: readonly string[
 }
 
 const SessionList: Component<SessionListProps> = (props) => {
-  const [sidebarWidth, setSidebarWidth] = createSignal(DEFAULT_WIDTH)
-  const [isResizing, setIsResizing] = createSignal(false)
-  const [startX, setStartX] = createSignal(0)
-  const [startWidth, setStartWidth] = createSignal(DEFAULT_WIDTH)
+  const [renameTarget, setRenameTarget] = createSignal<{ id: string; title: string; label: string } | null>(null)
+  const [isRenaming, setIsRenaming] = createSignal(false)
   const infoShortcut = keyboardRegistry.get("switch-to-info")
-
+ 
+  const isSessionDeleting = (sessionId: string) => {
+    const deleting = loading().deletingSession.get(props.instanceId)
+    return deleting ? deleting.has(sessionId) : false
+  }
+ 
   const selectSession = (sessionId: string) => {
     props.onSelect(sessionId)
   }
-
-  let mouseMoveHandler: ((event: MouseEvent) => void) | null = null
-  let mouseUpHandler: (() => void) | null = null
-  let touchMoveHandler: ((event: TouchEvent) => void) | null = null
-  let touchEndHandler: (() => void) | null = null
-
-  onMount(() => {
-    if (typeof window === "undefined") return
-    const saved = window.localStorage.getItem(STORAGE_KEY)
-    if (!saved) return
-
-    const width = Number.parseInt(saved, 10)
-    if (Number.isFinite(width) && width >= MIN_WIDTH && width <= MAX_WIDTH) {
-      setSidebarWidth(width)
-      setStartWidth(width)
-    }
-  })
-
-  createEffect(() => {
-    if (typeof window === "undefined") return
-    const width = sidebarWidth()
-    window.localStorage.setItem(STORAGE_KEY, width.toString())
-  })
-
-  createEffect(() => {
-    props.onWidthChange?.(sidebarWidth())
-  })
  
   const copySessionId = async (event: MouseEvent, sessionId: string) => {
     event.stopPropagation()
@@ -106,99 +81,51 @@ const SessionList: Component<SessionListProps> = (props) => {
       await navigator.clipboard.writeText(sessionId)
       showToastNotification({ message: "Session ID copied", variant: "success" })
     } catch (error) {
-      console.error(`Failed to copy session ID ${sessionId}:`, error)
+      log.error(`Failed to copy session ID ${sessionId}:`, error)
       showToastNotification({ message: "Unable to copy session ID", variant: "error" })
     }
   }
  
-  const clampWidth = (width: number) => Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, width))
+  const handleDeleteSession = async (event: MouseEvent, sessionId: string) => {
+    event.stopPropagation()
+    if (isSessionDeleting(sessionId)) return
+ 
+    try {
+      await deleteSession(props.instanceId, sessionId)
+    } catch (error) {
+      log.error(`Failed to delete session ${sessionId}:`, error)
+      showToastNotification({ message: "Unable to delete session", variant: "error" })
+    }
+  }
+
+  const openRenameDialog = (sessionId: string) => {
+    const session = props.sessions.get(sessionId)
+    if (!session) return
+    const label = session.title && session.title.trim() ? session.title : sessionId
+    setRenameTarget({ id: sessionId, title: session.title ?? "", label })
+  }
+
+  const closeRenameDialog = () => {
+    setRenameTarget(null)
+  }
+
+  const handleRenameSubmit = async (nextTitle: string) => {
+    const target = renameTarget()
+    if (!target) return
+ 
+    setIsRenaming(true)
+    try {
+      await renameSession(props.instanceId, target.id, nextTitle)
+      setRenameTarget(null)
+    } catch (error) {
+      log.error(`Failed to rename session ${target.id}:`, error)
+      showToastNotification({ message: "Unable to rename session", variant: "error" })
+    } finally {
+      setIsRenaming(false)
+    }
+  }
  
 
-  const removeMouseListeners = () => {
-    if (mouseMoveHandler) {
-      document.removeEventListener("mousemove", mouseMoveHandler)
-      mouseMoveHandler = null
-    }
-    if (mouseUpHandler) {
-      document.removeEventListener("mouseup", mouseUpHandler)
-      mouseUpHandler = null
-    }
-  }
- 
-  const removeTouchListeners = () => {
-    if (touchMoveHandler) {
-      document.removeEventListener("touchmove", touchMoveHandler)
-      touchMoveHandler = null
-    }
-    if (touchEndHandler) {
-      document.removeEventListener("touchend", touchEndHandler)
-      touchEndHandler = null
-    }
-  }
- 
-  const stopResizing = () => {
-    setIsResizing(false)
-    removeMouseListeners()
-    removeTouchListeners()
-  }
- 
-  const handleMouseMove = (event: MouseEvent) => {
-    if (!isResizing()) return
-    const diff = event.clientX - startX()
-    const newWidth = clampWidth(startWidth() + diff)
-    setSidebarWidth(newWidth)
-  }
- 
-  const handleMouseUp = () => {
-    stopResizing()
-  }
- 
-  const handleTouchMove = (event: TouchEvent) => {
-    if (!isResizing()) return
-    const touch = event.touches[0]
-    if (!touch) return
-    const diff = touch.clientX - startX()
-    const newWidth = clampWidth(startWidth() + diff)
-    setSidebarWidth(newWidth)
-  }
- 
-  const handleTouchEnd = () => {
-    stopResizing()
-  }
- 
-  const handleMouseDown = (event: MouseEvent) => {
-    event.preventDefault()
-    setIsResizing(true)
-    setStartX(event.clientX)
-    setStartWidth(sidebarWidth())
- 
-    mouseMoveHandler = handleMouseMove
-    mouseUpHandler = handleMouseUp
- 
-    document.addEventListener("mousemove", handleMouseMove)
-    document.addEventListener("mouseup", handleMouseUp)
-  }
- 
-  const handleTouchStart = (event: TouchEvent) => {
-    event.preventDefault()
-    const touch = event.touches[0]
-    if (!touch) return
-    setIsResizing(true)
-    setStartX(touch.clientX)
-    setStartWidth(sidebarWidth())
- 
-    touchMoveHandler = handleTouchMove
-    touchEndHandler = handleTouchEnd
- 
-    document.addEventListener("touchmove", handleTouchMove)
-    document.addEventListener("touchend", handleTouchEnd)
-  }
- 
-  onCleanup(() => {
-    removeMouseListeners()
-    removeTouchListeners()
-  })
- 
   const SessionRow: Component<{ sessionId: string; canClose?: boolean }> = (rowProps) => {
     const session = () => props.sessions.get(rowProps.sessionId)
     if (!session()) {
@@ -258,6 +185,43 @@ const SessionList: Component<SessionListProps> = (props) => {
               >
                 <Copy class="w-3 h-3" />
               </span>
+              <span
+                class={`session-item-close opacity-80 hover:opacity-100 ${isActive() ? "hover:bg-white/20" : "hover:bg-surface-hover"}`}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  openRenameDialog(rowProps.sessionId)
+                }}
+                role="button"
+                tabIndex={0}
+                aria-label="Rename session"
+                title="Rename session"
+              >
+                <Pencil class="w-3 h-3" />
+              </span>
+              <span
+                class={`session-item-close opacity-80 hover:opacity-100 ${isActive() ? "hover:bg-white/20" : "hover:bg-surface-hover"}`}
+                onClick={(event) => handleDeleteSession(event, rowProps.sessionId)}
+                role="button"
+                tabIndex={0}
+                aria-label="Delete session"
+                title="Delete session"
+              >
+                <Show
+                  when={!isSessionDeleting(rowProps.sessionId)}
+                  fallback={
+                    <svg class="animate-spin h-3 w-3" fill="none" viewBox="0 0 24 24">
+                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                      <path
+                        class="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      />
+                    </svg>
+                  }
+                >
+                  <Trash2 class="w-3 h-3" />
+                </Show>
+              </span>
             </div>
           </div>
         </button>
@@ -299,18 +263,8 @@ const SessionList: Component<SessionListProps> = (props) => {
  
   return (
     <div
-
-      class="session-list-container bg-surface-secondary border-r border-base flex flex-col"
-      style={{ width: `${sidebarWidth()}px` }}
+      class="session-list-container bg-surface-secondary border-r border-base flex flex-col w-full"
     >
-      <div
-        class="session-resize-handle"
-        onMouseDown={handleMouseDown}
-        onTouchStart={handleTouchStart}
-        role="presentation"
-        aria-hidden="true"
-      />
-
       <Show when={props.showHeader !== false}>
         <div class="session-list-header p-3 border-b border-base">
           {props.headerContent ?? (
@@ -373,8 +327,18 @@ const SessionList: Component<SessionListProps> = (props) => {
           {props.footerContent ?? null}
         </div>
       </Show>
+
+      <SessionRenameDialog
+        open={Boolean(renameTarget())}
+        currentTitle={renameTarget()?.title ?? ""}
+        sessionLabel={renameTarget()?.label}
+        isSubmitting={isRenaming()}
+        onRename={handleRenameSubmit}
+        onClose={closeRenameDialog}
+      />
     </div>
   )
 }
 
 export default SessionList
+

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

@@ -4,6 +4,9 @@ import type { Session, Agent } from "../types/session"
 import { getParentSessions, createSession, setActiveParentSession } from "../stores/sessions"
 import { instances, stopInstance } from "../stores/instances"
 import { agents } from "../stores/sessions"
+import { getLogger } from "../lib/logger"
+const log = getLogger("session")
+
 
 interface SessionPickerProps {
   instanceId: string
@@ -55,7 +58,7 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
       setActiveParentSession(props.instanceId, session.id)
       props.onClose()
     } catch (error) {
-      console.error("Failed to create session:", error)
+      log.error("Failed to create session:", error)
     } finally {
       setIsCreating(false)
     }

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

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

packages/ui/src/components/session/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,12 +1,21 @@
-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 MessageSection from "../message-section"
+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 { loadMessages, sendMessage, forkSession, isSessionMessagesLoading, setActiveParentSession, setActiveSession, runShellCommand, abortSession } from "../../stores/sessions"
+import { isSessionBusy as getSessionBusyStatus } from "../../stores/session-status"
 import { showAlertDialog } from "../../stores/alerts"
+import { getLogger } from "../../lib/logger"
+
+const log = getLogger("session")
+
+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
@@ -14,44 +23,98 @@ interface SessionViewProps {
   instanceId: string
   instanceFolder: string
   escapeInDebounce: boolean
+  showSidebarToggle?: boolean
+  onSidebarToggle?: () => void
+  forceCompactStatusLayout?: boolean
+  isActive?: boolean
 }
 
 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))
+  const sessionBusy = createMemo(() => {
+    const currentSession = session()
+    if (!currentSession) return false
+    return getSessionBusyStatus(props.instanceId, currentSession.id)
+  })
+  let scrollToBottomHandle: (() => void) | undefined
+  function scheduleScrollToBottom() {
+    if (!scrollToBottomHandle) return
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => scrollToBottomHandle?.())
+    })
+  }
+  createEffect(() => {
+    if (!props.isActive) return
+    scheduleScrollToBottom()
+  })
+  let quoteHandler: ((text: string, mode: "quote" | "code") => void) | null = null
+ 
   createEffect(() => {
     const currentSession = session()
     if (currentSession) {
-      loadMessages(props.instanceId, currentSession.id).catch(console.error)
+      loadMessages(props.instanceId, currentSession.id).catch((error) => log.error("Failed to load messages", error))
     }
   })
 
+  function registerQuoteHandler(handler: (text: string, mode: "quote" | "code") => void) {
+    quoteHandler = handler
+    return () => {
+      if (quoteHandler === handler) {
+        quoteHandler = null
+      }
+    }
+  }
+
+  function handleQuoteSelection(text: string, mode: "quote" | "code") {
+    if (quoteHandler) {
+      quoteHandler(text, mode)
+    }
+  }
+ 
   async function handleSendMessage(prompt: string, attachments: Attachment[]) {
+    scheduleScrollToBottom()
     await sendMessage(props.instanceId, props.sessionId, prompt, attachments)
   }
 
   async function handleRunShell(command: string) {
     await runShellCommand(props.instanceId, props.sessionId, command)
   }
-
-  function getUserMessageText(messageId: string): string | null {
+ 
+  async function handleAbortSession() {
     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
+    if (!currentSession) return
+ 
+    try {
+      await abortSession(props.instanceId, currentSession.id)
+      log.info("Abort requested", { instanceId: props.instanceId, sessionId: currentSession.id })
+    } catch (error) {
+      log.error("Failed to abort session", error)
+      showAlertDialog("Failed to stop session", {
+        title: "Stop failed",
+        detail: error instanceof Error ? error.message : String(error),
+        variant: "error",
+      })
     }
-
-    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")
   }
+ 
+  function getUserMessageText(messageId: string): string | 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")
+      }
+    }
+ 
+    return null
+  }
+
 
   async function handleRevert(messageId: string) {
     const instance = instances().get(props.instanceId)
@@ -73,7 +136,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
         }
       }
     } catch (error) {
-      console.error("Failed to revert:", error)
+      log.error("Failed to revert message", error)
       showAlertDialog("Failed to revert to message", {
         title: "Revert failed",
         variant: "error",
@@ -83,7 +146,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
 
   async function handleFork(messageId?: string) {
     if (!messageId) {
-      console.warn("Fork requires a user message id")
+      log.warn("Fork requires a user message id")
       return
     }
 
@@ -98,7 +161,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
         setActiveSession(props.instanceId, forkedSession.id)
       }
 
-      await loadMessages(props.instanceId, forkedSession.id).catch(console.error)
+      await loadMessages(props.instanceId, forkedSession.id).catch((error) => log.error("Failed to load forked session messages", error))
 
       if (restoredText) {
         const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
@@ -109,7 +172,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
         }
       }
     } catch (error) {
-      console.error("Failed to fork session:", error)
+      log.error("Failed to fork session", error)
       showAlertDialog("Failed to fork session", {
         title: "Fork failed",
         variant: "error",
@@ -127,29 +190,49 @@ 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">
+            <MessageSection
+               instanceId={props.instanceId}
+               sessionId={activeSession.id}
+               loading={messagesLoading()}
+               onRevert={handleRevert}
+               onFork={handleFork}
+               isActive={props.isActive}
+                registerScrollToBottom={(fn) => {
+                  scrollToBottomHandle = fn
+                  if (props.isActive) {
+                    scheduleScrollToBottom()
+                  }
+                }}
 
-          <PromptInput
-            instanceId={props.instanceId}
-            instanceFolder={props.instanceFolder}
-            sessionId={s().id}
-            onSend={handleSendMessage}
-            onRunShell={handleRunShell}
-            escapeInDebounce={props.escapeInDebounce}
-          />
-        </div>
-      )}
+
+
+
+               showSidebarToggle={props.showSidebarToggle}
+               onSidebarToggle={props.onSidebarToggle}
+               forceCompactStatusLayout={props.forceCompactStatusLayout}
+               onQuoteSelection={handleQuoteSelection}
+             />
+
+
+            <PromptInput
+              instanceId={props.instanceId}
+              instanceFolder={props.instanceFolder}
+              sessionId={activeSession.id}
+              onSend={handleSendMessage}
+              onRunShell={handleRunShell}
+              escapeInDebounce={props.escapeInDebounce}
+              isSessionBusy={sessionBusy()}
+              onAbortSession={handleAbortSession}
+              registerQuoteHandler={registerQuoteHandler}
+            />
+          </div>
+        )
+      }}
     </Show>
   )
 }

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

@@ -0,0 +1,44 @@
+import type { ToolRenderer } from "../types"
+import { ensureMarkdownContent, formatUnknown, getToolName, isToolStateCompleted, isToolStateError, isToolStateRunning, readToolStatePayload } from "../utils"
+
+export const bashRenderer: ToolRenderer = {
+  tools: ["bash"],
+  getAction: () => "Writing command...",
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return undefined
+    const { input } = readToolStatePayload(state)
+    const name = getToolName("bash")
+    const description = typeof input.description === "string" && input.description.length > 0 ? input.description : ""
+    const timeout = typeof input.timeout === "number" && input.timeout > 0 ? input.timeout : undefined
+
+    const baseTitle = description ? `${name} ${description}` : name
+    if (!timeout) {
+      return baseTitle
+    }
+
+    const timeoutLabel = `${timeout}ms`
+    return `${baseTitle} · Timeout: ${timeoutLabel}`
+  },
+  renderBody({ toolState, renderMarkdown }) {
+    const state = toolState()
+    if (!state || state.status === "pending") return null
+
+    const { input, metadata } = readToolStatePayload(state)
+    const command = typeof input.command === "string" && input.command.length > 0 ? `$ ${input.command}` : ""
+    const outputResult = formatUnknown(
+      isToolStateCompleted(state)
+        ? state.output
+        : (isToolStateRunning(state) || isToolStateError(state)) && metadata.output
+          ? metadata.output
+          : undefined,
+    )
+    const parts = [command, outputResult?.text].filter(Boolean)
+    if (parts.length === 0) return null
+
+    const content = ensureMarkdownContent(parts.join("\n"), "bash", true)
+    if (!content) return null
+
+    return renderMarkdown({ content, disableHighlight: state.status === "running" })
+  },
+}

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

@@ -0,0 +1,25 @@
+import type { ToolRenderer } from "../types"
+import { ensureMarkdownContent, formatUnknown, isToolStateCompleted, isToolStateError, isToolStateRunning, readToolStatePayload } from "../utils"
+
+export const defaultRenderer: ToolRenderer = {
+  tools: ["*"],
+  renderBody({ toolState, renderMarkdown }) {
+    const state = toolState()
+    if (!state || state.status === "pending") return null
+
+    const { metadata, input } = readToolStatePayload(state)
+    const primaryOutput = isToolStateCompleted(state)
+      ? state.output
+      : (isToolStateRunning(state) || isToolStateError(state)) && metadata.output
+        ? metadata.output
+        : metadata.diff ?? metadata.preview ?? input.content
+
+    const result = formatUnknown(primaryOutput)
+    if (!result) return null
+
+    const content = ensureMarkdownContent(result.text, result.language, true)
+    if (!content) return null
+
+    return renderMarkdown({ content, disableHighlight: state.status === "running" })
+  },
+}

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

@@ -0,0 +1,32 @@
+import type { ToolRenderer } from "../types"
+import { ensureMarkdownContent, extractDiffPayload, getRelativePath, getToolName, isToolStateCompleted, readToolStatePayload } from "../utils"
+
+export const editRenderer: ToolRenderer = {
+  tools: ["edit"],
+  getAction: () => "Preparing edit...",
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return undefined
+    const { input } = readToolStatePayload(state)
+    const filePath = typeof input.filePath === "string" ? input.filePath : ""
+    if (!filePath) return getToolName("edit")
+    return `${getToolName("edit")} ${getRelativePath(filePath)}`
+  },
+  renderBody({ toolState, toolName, renderDiff, renderMarkdown }) {
+    const state = toolState()
+    if (!state || state.status === "pending") return null
+
+    const diffPayload = extractDiffPayload(toolName(), state)
+    if (diffPayload) {
+      return renderDiff(diffPayload)
+    }
+
+    const { metadata } = readToolStatePayload(state)
+    const diffText = typeof metadata.diff === "string" ? metadata.diff : null
+    const fallback = isToolStateCompleted(state) && typeof state.output === "string" ? state.output : null
+    const content = ensureMarkdownContent(diffText || fallback, "diff", true)
+    if (!content) return null
+
+    return renderMarkdown({ content, size: "large", disableHighlight: state.status === "running" })
+  },
+}

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

@@ -0,0 +1,36 @@
+import type { ToolRenderer } from "../types"
+import { bashRenderer } from "./bash"
+import { defaultRenderer } from "./default"
+import { editRenderer } from "./edit"
+import { patchRenderer } from "./patch"
+import { readRenderer } from "./read"
+import { taskRenderer } from "./task"
+import { todoRenderer } from "./todo"
+import { webfetchRenderer } from "./webfetch"
+import { writeRenderer } from "./write"
+import { invalidRenderer } from "./invalid"
+
+const TOOL_RENDERERS: ToolRenderer[] = [
+  bashRenderer,
+  readRenderer,
+  writeRenderer,
+  editRenderer,
+  patchRenderer,
+  webfetchRenderer,
+  todoRenderer,
+  taskRenderer,
+  invalidRenderer,
+]
+
+const rendererMap = TOOL_RENDERERS.reduce<Record<string, ToolRenderer>>((acc, renderer) => {
+  renderer.tools.forEach((tool) => {
+    acc[tool] = renderer
+  })
+  return acc
+}, {})
+
+export function resolveToolRenderer(toolName: string): ToolRenderer {
+  return rendererMap[toolName] ?? defaultRenderer
+}
+
+export { defaultRenderer }

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

@@ -0,0 +1,19 @@
+import type { ToolRenderer } from "../types"
+import { defaultRenderer } from "./default"
+import { getToolName, readToolStatePayload } from "../utils"
+
+export const invalidRenderer: ToolRenderer = {
+  tools: ["invalid"],
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return getToolName("invalid")
+    const { input } = readToolStatePayload(state)
+    if (typeof input.tool === "string") {
+      return getToolName(input.tool)
+    }
+    return getToolName("invalid")
+  },
+  renderBody(context) {
+    return defaultRenderer.renderBody(context)
+  },
+}

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

@@ -0,0 +1,32 @@
+import type { ToolRenderer } from "../types"
+import { ensureMarkdownContent, extractDiffPayload, getRelativePath, getToolName, isToolStateCompleted, readToolStatePayload } from "../utils"
+
+export const patchRenderer: ToolRenderer = {
+  tools: ["patch"],
+  getAction: () => "Preparing patch...",
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return undefined
+    const { input } = readToolStatePayload(state)
+    const filePath = typeof input.filePath === "string" ? input.filePath : ""
+    if (!filePath) return getToolName("patch")
+    return `${getToolName("patch")} ${getRelativePath(filePath)}`
+  },
+  renderBody({ toolState, toolName, renderDiff, renderMarkdown }) {
+    const state = toolState()
+    if (!state || state.status === "pending") return null
+
+    const diffPayload = extractDiffPayload(toolName(), state)
+    if (diffPayload) {
+      return renderDiff(diffPayload)
+    }
+
+    const { metadata } = readToolStatePayload(state)
+    const diffText = typeof metadata.diff === "string" ? metadata.diff : null
+    const fallback = isToolStateCompleted(state) && typeof state.output === "string" ? state.output : null
+    const content = ensureMarkdownContent(diffText || fallback, "diff", true)
+    if (!content) return null
+
+    return renderMarkdown({ content, size: "large", disableHighlight: state.status === "running" })
+  },
+}

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

@@ -0,0 +1,42 @@
+import type { ToolRenderer } from "../types"
+import { ensureMarkdownContent, getRelativePath, getToolName, inferLanguageFromPath, readToolStatePayload } from "../utils"
+
+export const readRenderer: ToolRenderer = {
+  tools: ["read"],
+  getAction: () => "Reading file...",
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return undefined
+    const { input } = readToolStatePayload(state)
+    const filePath = typeof input.filePath === "string" ? input.filePath : ""
+    const offset = typeof input.offset === "number" ? input.offset : undefined
+    const limit = typeof input.limit === "number" ? input.limit : undefined
+    const relativePath = filePath ? getRelativePath(filePath) : ""
+    const detailParts: string[] = []
+
+    if (typeof offset === "number") {
+      detailParts.push(`Offset: ${offset}`)
+    }
+
+    if (typeof limit === "number") {
+      detailParts.push(`Limit: ${limit}`)
+    }
+
+    const baseTitle = relativePath ? `${getToolName("read")} ${relativePath}` : getToolName("read")
+    if (!detailParts.length) {
+      return baseTitle
+    }
+
+    return `${baseTitle} · ${detailParts.join(" · ")}`
+  },
+  renderBody({ toolState, renderMarkdown }) {
+    const state = toolState()
+    if (!state || state.status === "pending") return null
+    const { metadata, input } = readToolStatePayload(state)
+    const preview = typeof metadata.preview === "string" ? metadata.preview : null
+    const language = inferLanguageFromPath(typeof input.filePath === "string" ? input.filePath : undefined)
+    const content = ensureMarkdownContent(preview, language, true)
+    if (!content) return null
+    return renderMarkdown({ content, disableHighlight: state.status === "running" })
+  },
+}

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

@@ -0,0 +1,155 @@
+import { For, Show, createMemo } from "solid-js"
+import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolRenderer } from "../types"
+import { getDefaultToolAction, getToolIcon, getToolName, readToolStatePayload } from "../utils"
+import { getTodoTitle } from "./todo"
+import { resolveTitleForTool } from "../tool-title"
+
+interface TaskSummaryItem {
+  id: string
+  tool: string
+  input: Record<string, any>
+  metadata: Record<string, any>
+  state?: ToolState
+  status?: ToolState["status"]
+  title?: string
+}
+
+function normalizeStatus(status?: string | null): ToolState["status"] | undefined {
+  if (status === "pending" || status === "running" || status === "completed" || status === "error") {
+    return status
+  }
+  return undefined
+}
+
+function summarizeStatusIcon(status?: ToolState["status"]) {
+  switch (status) {
+    case "pending":
+      return "⏸"
+    case "running":
+      return "⏳"
+    case "completed":
+      return "✓"
+    case "error":
+      return "✗"
+    default:
+      return ""
+  }
+}
+
+function summarizeStatusLabel(status?: ToolState["status"]) {
+  switch (status) {
+    case "pending":
+      return "Pending"
+    case "running":
+      return "Running"
+    case "completed":
+      return "Completed"
+    case "error":
+      return "Error"
+    default:
+      return "Unknown"
+  }
+}
+
+function describeTaskTitle(input: Record<string, any>) {
+  const description = typeof input.description === "string" ? input.description : undefined
+  const subagent = typeof input.subagent_type === "string" ? input.subagent_type : undefined
+  const base = getToolName("task")
+  if (description && subagent) {
+    return `${base}[${subagent}] ${description}`
+  }
+  if (description) {
+    return `${base} ${description}`
+  }
+  return base
+}
+
+function describeToolTitle(item: TaskSummaryItem): string {
+  if (item.title && item.title.length > 0) {
+    return item.title
+  }
+
+  if (item.tool === "task") {
+    return describeTaskTitle({ ...item.metadata, ...item.input })
+  }
+
+  if (item.state) {
+    return resolveTitleForTool({ toolName: item.tool, state: item.state })
+  }
+
+  return getDefaultToolAction(item.tool)
+}
+
+export const taskRenderer: ToolRenderer = {
+  tools: ["task"],
+  getAction: () => "Delegating...",
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return undefined
+    const { input } = readToolStatePayload(state)
+    return describeTaskTitle(input)
+  },
+  renderBody({ toolState, messageVersion, partVersion, scrollHelpers }) {
+    const items = createMemo(() => {
+      // Track the reactive change points so we only recompute when the part/message changes
+      messageVersion?.()
+      partVersion?.()
+
+      const state = toolState()
+      if (!state) return []
+
+      const { metadata } = readToolStatePayload(state)
+      const summary = Array.isArray((metadata as any).summary) ? ((metadata as any).summary as any[]) : []
+
+      return summary.map((entry, index) => {
+        const tool = typeof entry?.tool === "string" ? (entry.tool as string) : "unknown"
+        const stateValue = typeof entry?.state === "object" ? (entry.state as ToolState) : undefined
+        const metadataFromEntry = typeof entry?.metadata === "object" && entry.metadata ? entry.metadata : {}
+        const fallbackInput = typeof entry?.input === "object" && entry.input ? entry.input : {}
+        const id = typeof entry?.id === "string" && entry.id.length > 0 ? entry.id : `${tool}-${index}`
+        const statusValue = normalizeStatus((entry?.status as string | undefined) ?? stateValue?.status)
+        const title = typeof entry?.title === "string" ? entry.title : undefined
+        return { id, tool, input: fallbackInput, metadata: metadataFromEntry, state: stateValue, status: statusValue, title }
+      })
+    })
+
+    if (items().length === 0) return null
+
+    return (
+      <div
+        class="message-text tool-call-markdown tool-call-task-container"
+        ref={(element) => scrollHelpers?.registerContainer(element)}
+        onScroll={scrollHelpers ? (event) => scrollHelpers.handleScroll(event as Event & { currentTarget: HTMLDivElement }) : undefined}
+      >
+        <div class="tool-call-task-summary">
+          <For each={items()}>
+            {(item) => {
+              const icon = getToolIcon(item.tool)
+              const description = describeToolTitle(item)
+              const toolLabel = getToolName(item.tool)
+              const status = normalizeStatus(item.status ?? item.state?.status)
+              const statusIcon = summarizeStatusIcon(status)
+              const statusLabel = summarizeStatusLabel(status)
+              const statusAttr = status ?? "pending"
+              return (
+                <div class="tool-call-task-item" data-task-id={item.id} data-task-status={statusAttr}>
+                  <span class="tool-call-task-icon">{icon}</span>
+                  <span class="tool-call-task-label">{toolLabel}</span>
+                  <span class="tool-call-task-separator" aria-hidden="true">—</span>
+                  <span class="tool-call-task-text">{description}</span>
+                  <Show when={statusIcon}>
+                    <span class="tool-call-task-status" aria-label={statusLabel} title={statusLabel}>
+                      {statusIcon}
+                    </span>
+                  </Show>
+                </div>
+              )
+            }}
+          </For>
+        </div>
+        {scrollHelpers?.renderSentinel?.()}
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,134 @@
+import { For, Show } from "solid-js"
+import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolRenderer } from "../types"
+import { readToolStatePayload } from "../utils"
+
+export type TodoViewStatus = "pending" | "in_progress" | "completed" | "cancelled"
+
+export interface TodoViewItem {
+  id: string
+  content: string
+  status: TodoViewStatus
+}
+
+function normalizeTodoStatus(rawStatus: unknown): TodoViewStatus {
+  if (rawStatus === "completed" || rawStatus === "in_progress" || rawStatus === "cancelled") return rawStatus
+  return "pending"
+}
+
+function extractTodosFromState(state?: ToolState): TodoViewItem[] {
+  if (!state) return []
+  const { metadata } = readToolStatePayload(state)
+  const todos = Array.isArray((metadata as any).todos) ? (metadata as any).todos : []
+  const items: TodoViewItem[] = []
+
+  for (let index = 0; index < todos.length; index++) {
+    const todo = todos[index]
+    const content = typeof todo?.content === "string" ? todo.content.trim() : ""
+    if (!content) continue
+    const status = normalizeTodoStatus((todo as any).status)
+    const id = typeof todo?.id === "string" && todo.id.length > 0 ? todo.id : `${index}-${content}`
+    items.push({ id, content, status })
+  }
+
+  return items
+}
+
+function summarizeTodos(todos: TodoViewItem[]) {
+  return todos.reduce(
+    (acc, todo) => {
+      acc.total += 1
+      acc[todo.status] = (acc[todo.status] || 0) + 1
+      return acc
+    },
+    { total: 0, pending: 0, in_progress: 0, completed: 0, cancelled: 0 } as Record<TodoViewStatus | "total", number>,
+  )
+}
+
+function getTodoStatusLabel(status: TodoViewStatus): string {
+  switch (status) {
+    case "completed":
+      return "Completed"
+    case "in_progress":
+      return "In progress"
+    case "cancelled":
+      return "Cancelled"
+    default:
+      return "Pending"
+  }
+}
+
+interface TodoListViewProps {
+  state?: ToolState
+  emptyLabel?: string
+  showStatusLabel?: boolean
+}
+
+export function TodoListView(props: TodoListViewProps) {
+  const todos = extractTodosFromState(props.state)
+  const counts = summarizeTodos(todos)
+
+  if (counts.total === 0) {
+    return <div class="tool-call-todo-empty">{props.emptyLabel ?? "No plan items yet."}</div>
+  }
+
+  return (
+    <div class="tool-call-todo-region">
+      <div class="tool-call-todos" role="list">
+        <For each={todos}>
+          {(todo) => {
+            const label = getTodoStatusLabel(todo.status)
+            return (
+              <div
+                class="tool-call-todo-item"
+                classList={{
+                  "tool-call-todo-item-completed": todo.status === "completed",
+                  "tool-call-todo-item-cancelled": todo.status === "cancelled",
+                  "tool-call-todo-item-active": todo.status === "in_progress",
+                }}
+                role="listitem"
+              >
+                <span class="tool-call-todo-checkbox" data-status={todo.status} aria-label={label}></span>
+                  <div class="tool-call-todo-body">
+                    <div class="tool-call-todo-heading">
+                      <span class="tool-call-todo-text">{todo.content}</span>
+                      <Show when={props.showStatusLabel !== false}>
+                        <span class={`tool-call-todo-status tool-call-todo-status-${todo.status}`}>{label}</span>
+                      </Show>
+                    </div>
+                  </div>
+
+              </div>
+            )
+          }}
+        </For>
+      </div>
+    </div>
+  )
+}
+
+export function getTodoTitle(state?: ToolState): string {
+  if (!state) return "Plan"
+
+  const todos = extractTodosFromState(state)
+  if (state.status !== "completed" || todos.length === 0) return "Plan"
+
+  const counts = summarizeTodos(todos)
+  if (counts.pending === counts.total) return "Creating plan"
+  if (counts.completed === counts.total) return "Completing plan"
+  return "Updating plan"
+}
+
+export const todoRenderer: ToolRenderer = {
+  tools: ["todowrite", "todoread"],
+  getAction: () => "Planning...",
+  getTitle({ toolState }) {
+    return getTodoTitle(toolState())
+  },
+  renderBody({ toolState }) {
+    const state = toolState()
+    if (!state) return null
+
+    return <TodoListView state={state} />
+  },
+}

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

@@ -0,0 +1,33 @@
+import type { ToolRenderer } from "../types"
+import { ensureMarkdownContent, formatUnknown, getToolName, readToolStatePayload } from "../utils"
+
+export const webfetchRenderer: ToolRenderer = {
+  tools: ["webfetch"],
+  getAction: () => "Fetching from the web...",
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return undefined
+    const { input } = readToolStatePayload(state)
+    if (typeof input.url === "string" && input.url.length > 0) {
+      return `${getToolName("webfetch")} ${input.url}`
+    }
+    return getToolName("webfetch")
+  },
+  renderBody({ toolState, renderMarkdown }) {
+    const state = toolState()
+    if (!state || state.status === "pending") return null
+
+    const { metadata } = readToolStatePayload(state)
+    const result = formatUnknown(
+      state.status === "completed"
+        ? state.output
+        : metadata.output,
+    )
+    if (!result) return null
+
+    const content = ensureMarkdownContent(result.text, result.language, true)
+    if (!content) return null
+
+    return renderMarkdown({ content, disableHighlight: state.status === "running" })
+  },
+}

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

@@ -0,0 +1,25 @@
+import type { ToolRenderer } from "../types"
+import { ensureMarkdownContent, getRelativePath, getToolName, inferLanguageFromPath, readToolStatePayload } from "../utils"
+
+export const writeRenderer: ToolRenderer = {
+  tools: ["write"],
+  getAction: () => "Preparing write...",
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return undefined
+    const { input } = readToolStatePayload(state)
+    const filePath = typeof input.filePath === "string" ? input.filePath : ""
+    if (!filePath) return getToolName("write")
+    return `${getToolName("write")} ${getRelativePath(filePath)}`
+  },
+  renderBody({ toolState, renderMarkdown }) {
+    const state = toolState()
+    if (!state || state.status === "pending") return null
+    const { metadata, input } = readToolStatePayload(state)
+    const contentValue = typeof input.content === "string" ? input.content : metadata.content
+    const filePath = typeof input.filePath === "string" ? input.filePath : undefined
+    const content = ensureMarkdownContent(contentValue ?? null, inferLanguageFromPath(filePath), true)
+    if (!content) return null
+    return renderMarkdown({ content, size: "large", disableHighlight: state.status === "running" })
+  },
+}

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

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

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

@@ -0,0 +1,48 @@
+import type { Accessor, JSXElement } from "solid-js"
+import type { ToolState } from "@opencode-ai/sdk"
+import type { ClientPart } from "../../types/message"
+
+export type ToolCallPart = Extract<ClientPart, { type: "tool" }>
+
+export interface DiffPayload {
+  diffText: string
+  filePath?: string
+}
+
+export interface MarkdownRenderOptions {
+  content: string
+  size?: "default" | "large"
+  disableHighlight?: boolean
+}
+
+export interface DiffRenderOptions {
+  variant?: string
+  disableScrollTracking?: boolean
+  label?: string
+}
+
+export interface ToolScrollHelpers {
+  registerContainer(element: HTMLDivElement | null, options?: { disableTracking?: boolean }): void
+  handleScroll(event: Event & { currentTarget: HTMLDivElement }): void
+  renderSentinel(options?: { disableTracking?: boolean }): JSXElement | null
+}
+
+export interface ToolRendererContext {
+  toolCall: Accessor<ToolCallPart>
+  toolState: Accessor<ToolState | undefined>
+  toolName: Accessor<string>
+  messageVersion?: Accessor<number | undefined>
+  partVersion?: Accessor<number | undefined>
+  renderMarkdown(options: MarkdownRenderOptions): JSXElement | null
+  renderDiff(payload: DiffPayload, options?: DiffRenderOptions): JSXElement | null
+  scrollHelpers?: ToolScrollHelpers
+}
+
+export interface ToolRenderer {
+  tools: string[]
+  getTitle?(context: ToolRendererContext): string | undefined
+  getAction?(context: ToolRendererContext): string | undefined
+  renderBody(context: ToolRendererContext): JSXElement | null
+}
+
+export type ToolRendererMap = Record<string, ToolRenderer>