Integrate reply-from for workspace proxy

remove some duplication in README

.github/workflows/release.yml

@@ -66,6 +66,8 @@ jobs:
   build-macos:
     needs: prepare-release
     runs-on: macos-13
+    env:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -77,21 +79,35 @@ jobs:
           cache: npm
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --workspaces
 
       - name: Build macOS binaries
-        run: npm run build:mac
+        run: npm run build:mac --workspace @codenomad/electron-app
 
       - name: Upload release assets
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           TAG: ${{ needs.prepare-release.outputs.tag }}
         run: |
-          gh release upload "$TAG" release/* --clobber
+          set -euo pipefail
+          shopt -s nullglob
+          for file in packages/electron-app/release/*; do
+            [ -f "$file" ] || continue
+            case "$file" in
+              *.dmg|*.zip)
+                gh release upload "$TAG" "$file" --clobber
+                ;;
+              *)
+                echo "Skipping non-installer asset: $file"
+                ;;
+            esac
+          done
 
   build-windows:
     needs: prepare-release
     runs-on: windows-latest
+    env:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -103,22 +119,28 @@ jobs:
           cache: npm
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --workspaces
 
       - name: Build Windows binaries
-        run: npm run build:win
+        run: npm run build:win --workspace @codenomad/electron-app
 
       - name: Upload release assets
-        shell: bash
+        shell: pwsh
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           TAG: ${{ needs.prepare-release.outputs.tag }}
         run: |
-          gh release upload "$TAG" release/* --clobber
+          Get-ChildItem -Path "packages/electron-app/release" -File | Where-Object {
+            $_.Name -match '\.(exe|zip)$'
+          } | ForEach-Object {
+            gh release upload $env:TAG $_.FullName --clobber
+          }
 
   build-linux:
     needs: prepare-release
     runs-on: ubuntu-latest
+    env:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -130,14 +152,65 @@ jobs:
           cache: npm
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --workspaces
 
       - name: Build Linux binaries
-        run: npm run build:linux
+        run: npm run build:linux --workspace @codenomad/electron-app
 
       - name: Upload release assets
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           TAG: ${{ needs.prepare-release.outputs.tag }}
         run: |
-          gh release upload "$TAG" release/* --clobber
+          set -euo pipefail
+          shopt -s nullglob
+          for file in packages/electron-app/release/*; do
+            [ -f "$file" ] || continue
+            case "$file" in
+              *.AppImage|*.deb|*.tar.gz)
+                gh release upload "$TAG" "$file" --clobber
+                ;;
+              *)
+                echo "Skipping non-installer asset: $file"
+                ;;
+            esac
+          done
+
+  build-linux-rpm:
+    needs: prepare-release
+    runs-on: ubuntu-latest
+    env:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: npm
+
+      - name: Install rpm packaging dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y rpm ruby ruby-dev build-essential
+          sudo gem install --no-document fpm
+
+      - name: Install project dependencies
+        run: npm ci --workspaces
+
+      - name: Build Linux RPM binaries
+        run: npm run build:linux-rpm --workspace @codenomad/electron-app
+
+      - name: Upload RPM release assets
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAG: ${{ needs.prepare-release.outputs.tag }}
+        run: |
+          set -euo pipefail
+          shopt -s nullglob
+          for file in packages/electron-app/release/*.rpm; do
+            [ -f "$file" ] || continue
+            gh release upload "$TAG" "$file" --clobber
+          done

AGENTS.md

@@ -0,0 +1,20 @@
+# AGENT NOTES
+
+## Styling Guidelines
+- Reuse the existing token & utility layers before introducing new CSS variables or custom properties. Extend `src/styles/tokens.css` / `src/styles/utilities.css` if a shared pattern is needed.
+- Keep aggregate entry files (e.g., `src/styles/controls.css`, `messaging.css`, `panels.css`) lean—they should only `@import` feature-specific subfiles located inside `src/styles/{components|messaging|panels}`.
+- When adding new component styles, place them beside their peers in the scoped subdirectory (e.g., `src/styles/messaging/new-part.css`) and import them from the corresponding aggregator file.
+- Prefer smaller, focused style files (≈150 lines or less) over large monoliths. Split by component or feature area if a file grows beyond that size.
+- Co-locate reusable UI patterns (buttons, selectors, dropdowns, etc.) under `src/styles/components/` and avoid redefining the same utility classes elsewhere.
+- Document any new styling conventions or directory additions in this file so future changes remain consistent.
+
+## Coding Principles
+- Favor KISS by keeping modules narrowly scoped and limiting public APIs to what callers actually need.
+- Uphold DRY: share helpers via dedicated modules before copy/pasting logic across stores, components, or scripts.
+- Enforce single responsibility; split large files when concerns diverge (state, actions, API, events, etc.).
+- Prefer composable primitives (signals, hooks, utilities) over deep inheritance or implicit global state.
+- When adding platform integrations (SSE, IPC, SDK), isolate them in thin adapters that surface typed events/actions.
+
+## Tooling Preferences
+- Use the `edit` tool for modifying existing files; prefer it over other editing methods.
+- Use the `write` tool only when creating new files from scratch.

BUILD.md

@@ -10,6 +10,12 @@ This guide explains how to build distributable binaries for CodeNomad.
 
 ## Quick Start
 
+All commands now run inside the workspace packages. From the repo root you can target the Electron app package directly:
+
+```bash
+npm run build --workspace @codenomad/electron-app
+```
+
 ### Build for Current Platform (macOS default)
 
 ```bash

README.md

@@ -1,219 +1,58 @@
 # CodeNomad
+## A fast, multi-instance desktop client for running OpenCode sessions the way long-haul builders actually work.
 
-A cross-platform desktop application for interacting with OpenCode servers, built with Electron and SolidJS.
+## What is CodeNomad?
 
-## Overview
+CodeNomad is built for people who live inside OpenCode for hours on end and need a cockpit, not a kiosk. When terminals get unwieldy and web clients feel laggy, CodeNomad delivers a desktop-native workspace that favors speed, clarity, and direct control. It runs on macOS, Windows, and Linux using Electron + SolidJS, with prebuilt binaries so you can get started immediately.
 
-CodeNomad provides a multi-instance, multi-session interface for working with AI-powered coding assistants. It manages OpenCode server processes, handles real-time message streaming, and provides an intuitive UI for coding with AI.
+![Multi-instance workspace](docs/screenshots/newSession.png)
 
-**🎯 MVP Focus:** This project prioritizes functionality over performance. Performance optimization is intentionally deferred to post-MVP phases. See [docs/MVP-PRINCIPLES.md](docs/MVP-PRINCIPLES.md) for details.
+![Command palette overlay](docs/screenshots/command-palette.png)
 
-## Features
+## Highlights
 
-### Core Capabilities
+- **Long-session native** – scroll through massive transcripts without hitches and keep full context visible.
+- **Multiple instances, one window** – juggle several OpenCode instances side-by-side with per-instance tabs.
+- **Deep task awareness** – jump into sub/child sessions (Tasks tool) instantly, monitor their status, and answer directly without losing your flow.
+- **Keyboard first** – the full UI is optimized for shortcuts so you can stay mouse-free when you want to.
+- **Command palette superpowers** – summon a single, global palette to jump tabs, launch tools, tweak preferences, or fire shortcuts. Every action is categorized, fuzzy searchable, and previewed so you can chain moves together in seconds. It keeps your workflow predictable and fast whether you are juggling one session or ten.
+- **Developer-friendly rendering** – syntax highlighting, inline diffs, and thoughtful presentation keep the signal high.
 
-- **Multi-Instance Management**: Work on multiple projects simultaneously
-- **Session Persistence**: Resume conversations across app restarts
-- **Real-time Streaming**: Live message updates via Server-Sent Events
-- **Tool Execution Visibility**: See bash commands, file edits, and other tool calls
-- **Agent & Model Switching**: Easily switch between different AI agents and models
-- **Markdown Rendering**: Beautiful code highlighting and formatting
+## Requirements
 
-### Advanced Features (Planned)
+- [OpenCode CLI](https://opencode.ai) installed and available in your `PATH`, or point CodeNomad to a local binary through Advanced Settings.
 
-- Virtual scrolling for large conversations
-- Full-text search across sessions
-- Workspace management
-- Custom themes
-- Plugin system
+## Repository Layout
 
-## Architecture
+CodeNomad now ships as a small workspace with two packages:
 
-See [docs/architecture.md](docs/architecture.md) for detailed architecture documentation.
+- `packages/ui` — SolidJS renderer, Tailwind styles, and standalone Vite configuration for building the UI bundle independently.
+- `packages/electron-app` — Electron main/preload processes plus packaging scripts. It consumes the UI package during development/build via `electron-vite`.
 
-### High-Level Overview
+Use `npm run dev --workspace @codenomad/electron-app` for the Electron shell and `npm run dev --workspace @codenomad/ui` for UI-only work. Working with the workspace requires Node.js 18+ with npm 7 or newer so the workspace protocol is available.
 
-```
-Electron App
-├── Main Process (Node.js)
-│   ├── Window management
-│   ├── OpenCode server spawning
-│   └── IPC communication
-├── Renderer Process (SolidJS)
-│   ├── UI components
-│   ├── State management (stores)
-│   └── SDK client communication
-└── Multiple OpenCode Servers
-    └── One per instance/project folder
-```
+## Downloads
 
-## Prerequisites
+Grab the latest build for macOS, Windows, and Linux from the [GitHub Releases page](https://github.com/shantur/CodeNomad/releases).
 
-- Node.js 18+
-- Bun package manager
-- OpenCode CLI installed and in PATH
+## Quick Start
 
-## Installation
+1. Install the OpenCode CLI and confirm it is reachable via your terminal.
+2. Download the CodeNomad build for your platform and launch the app.
+3. Connect to one or more OpenCode instances, set keyboard shortcuts in preferences, and start a session.
+4. Use tabs to swap between instances, the task sidebar to dive into child sessions, and the prompt input to keep shipping.
 
-```bash
-# Install dependencies
-bun install
+## CLI Server Flags
 
-# Run in development mode
-bun run dev
+The bundled CLI server (`@codenomad/cli`) controls which folders the UI can browse when you pick a workspace:
 
-# Build for production
-bun run build
+- `--workspace-root <path>` (default: current working directory) scopes browsing to a safe subtree. The UI can only see folders beneath this root.
+- `--unrestricted-root` explicitly allows full-machine browsing for the current process. In this mode the UI starts from the host home directory, adds a "parent" option so you can reach `/` on macOS/Linux, and lists drives/UNC paths on Windows. The flag is runtime-only—restart the CLI without it to go back to restricted mode.
+- `--ui-dev-server <url>` proxies UI asset requests to a running Vite dev server while the CLI continues to expose its REST APIs and workspace proxies from the same port. Point this at `http://localhost:3000` when developing the renderer to keep hot reloads without sacrificing the single entry point.
 
-# Build distributable binaries
-bun run build:mac      # macOS (Universal)
-bun run build:win      # Windows (x64)
-bun run build:linux    # Linux (x64)
-bun run build:all      # All platforms
+Use unrestricted mode only when you trust the host; the CLI will skip directories it cannot read and never persists the opt-in.
 
-# See BUILD.md for more build options
-```
+### Single Port Proxying
 
-## Development
+Every OpenCode instance now tunnels through the CLI port. Each workspace descriptor publishes a stable `proxyPath` (e.g., `/workspaces/<id>/instance`), and the CLI exposes `GET/POST/...` + SSE at `http(s)://<cli-host>:<cli-port>${proxyPath}`. That means the UI, Electron shell, and browser clients only need firewall access to the CLI; instance ports stay private on `127.0.0.1`. In development, the `--ui-dev-server` flag still routes UI traffic through the CLI proxy so all instance calls share the same origin.
 
-### Project Structure
-
-```
-packages/opencode-client/
-├── docs/              # Documentation
-├── tasks/             # Task management
-│   ├── todo/          # Pending tasks
-│   └── done/          # Completed tasks
-├── electron/          # Electron main process
-│   ├── main/          # Main process code
-│   ├── preload/       # Preload scripts
-│   └── resources/     # App icons, etc.
-└── src/               # Renderer (UI) code
-    ├── components/    # UI components
-    ├── stores/        # State management
-    ├── lib/           # Utilities
-    ├── hooks/         # SolidJS hooks
-    └── types/         # TypeScript types
-```
-
-### Tech Stack
-
-- **Electron** - Desktop wrapper
-- **SolidJS** - Reactive UI framework
-- **TypeScript** - Type safety
-- **Vite** - Build tool
-- **TailwindCSS** - Styling
-- **Kobalte** - Accessible UI primitives
-- **OpenCode SDK** - API client
-
-### Scripts
-
-```bash
-bun run dev          # Start dev server with hot reload
-bun run build        # Build for production
-bun run typecheck    # Run TypeScript type checking
-bun run preview      # Preview production build
-```
-
-## Usage
-
-### Starting an Instance
-
-1. Launch the app
-2. Click "Select Folder" or press Cmd/Ctrl+N
-3. Choose a project folder
-4. Wait for OpenCode server to start
-5. Select an existing session or create new one
-
-### Working with Sessions
-
-- **Switch sessions**: Click session tab at bottom
-- **Create session**: Click "+" button or Cmd/Ctrl+T
-- **Change agent**: Use agent dropdown
-- **Change model**: Use model dropdown
-
-### Sending Messages
-
-- Type in the input box at bottom
-- Press Enter for new line (Cmd+Enter on macOS, Ctrl+Enter on Windows/Linux)
-- Use `/` for commands
-- Use `@` to mention files
-
-## Documentation
-
-- [Architecture](docs/architecture.md) - System design and structure
-- [User Interface](docs/user-interface.md) - UI specifications
-- [Technical Implementation](docs/technical-implementation.md) - Implementation details
-- [Build Roadmap](docs/build-roadmap.md) - Development plan and phases
-- [Tasks](tasks/README.md) - Task breakdown and tracking
-
-## Build Phases
-
-The project is built in phases:
-
-1. **Phase 1**: Foundation (Tasks 001-005)
-2. **Phase 2**: Core Chat (Tasks 006-010)
-3. **Phase 3**: Essential Features (Tasks 011-015)
-4. **Phase 4**: Multi-Instance (Tasks 016-020)
-5. **Phase 5**: Advanced Input (Tasks 021-025)
-6. **Phase 6**: Polish & UX (Tasks 026-030)
-7. **Phase 7**: System Integration (Tasks 031-035)
-8. **Phase 8**: Advanced Features (Tasks 036-040)
-
-See [docs/build-roadmap.md](docs/build-roadmap.md) for detailed phase information.
-
-## Contributing
-
-### Getting Started
-
-1. Read the documentation in `docs/`
-2. Check `tasks/todo/` for available tasks
-3. Pick a task and create a feature branch
-4. Follow the task steps
-5. Submit PR when complete
-
-### Code Style
-
-- Use TypeScript for all code
-- Follow existing patterns and conventions
-- Write clear, descriptive commit messages
-- Add comments for complex logic
-- Keep components small and focused
-
-### Testing
-
-- Test manually at minimum window size (800x600)
-- Test on multiple platforms (macOS, Windows, Linux)
-- Verify keyboard navigation works
-- Check accessibility with screen readers
-
-## Troubleshooting
-
-### Server Won't Start
-
-- Verify `opencode` is in PATH: `which opencode`
-- Check folder permissions
-- Review server logs in Logs tab
-- Try restarting the instance
-
-### Connection Issues
-
-- Check if server is running: `ps aux | grep opencode`
-- Verify port is correct in instance metadata
-- Check for firewall blocking localhost
-- Try killing and restarting server
-
-### Performance Issues
-
-- Check number of messages in session
-- Monitor memory usage in Activity Monitor
-- Consider enabling virtual scrolling (Phase 8)
-- Close unused instances
-
-## License
-
-[License TBD]
-
-## Credits
-
-Built with ❤️ for the OpenCode project.

dev-docs/architecture.md

@@ -104,6 +104,12 @@ CodeNomad is a cross-platform desktop application built with Electron that provi
 - Event type routing
 - Reconnection logic
 
+**CLI Proxy Paths:**
+
+- The CLI server terminates all HTTP/SSE traffic and forwards it to the correct OpenCode instance.
+- Each `WorkspaceDescriptor` exposes `proxyPath` (e.g., `/workspaces/<id>/instance`), which acts as the base URL for both REST and SSE calls.
+- The renderer never touches the random per-instance port directly; it only talks to `window.location.origin + proxyPath` so a single CLI port can front every session.
+
 ## Data Flow
 
 ### Instance Creation Flow
@@ -144,6 +150,7 @@ instances: Map<instanceId, {
   folder: string
   port: number
   pid: number
+  proxyPath: string // `/workspaces/:id/instance`
   status: 'starting' | 'ready' | 'error' | 'stopped'
   client: OpenCodeClient
   eventSource: EventSource

package.json

@@ -1,158 +1,25 @@
 {
-  "name": "@opencode-ai/client",
-  "version": "0.1.0",
-  "description": "CodeNomad desktop client - multi-instance, multi-session AI coding interface",
-  "author": "OpenCode Team",
-  "type": "module",
-  "main": "dist/main/main.js",
+  "name": "codenomad-workspace",
+  "version": "0.1.2",
+  "private": true,
+  "description": "CodeNomad monorepo workspace",
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ]
+  },
   "scripts": {
-    "dev": "electron-vite dev",
-    "dev:electron": "NODE_ENV=development electron .",
-    "build": "electron-vite build",
-    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.node.json",
-    "preview": "electron-vite preview",
-    "build:binaries": "node scripts/build.js",
-    "build:mac": "node scripts/build.js mac",
-    "build:mac-x64": "node scripts/build.js mac-x64",
-    "build:mac-arm64": "node scripts/build.js mac-arm64",
-    "build:win": "node scripts/build.js win",
-    "build:win-arm64": "node scripts/build.js win-arm64",
-    "build:linux": "node scripts/build.js linux",
-    "build:linux-arm64": "node scripts/build.js linux-arm64",
-    "build:all": "node scripts/build.js all",
-    "package:mac": "electron-builder --mac",
-    "package:win": "electron-builder --win",
-    "package:linux": "electron-builder --linux"
+    "dev": "npm run dev --workspace @codenomad/electron-app",
+    "dev:electron": "npm run dev --workspace @codenomad/electron-app",
+    "dev:ui": "npm run dev --workspace @codenomad/ui",
+    "build": "npm run build --workspace @codenomad/electron-app",
+    "build:ui": "npm run build --workspace @codenomad/ui",
+    "build:mac-x64": "npm run build:mac-x64 --workspace @codenomad/electron-app",
+    "build:binaries": "npm run build:binaries --workspace @codenomad/electron-app",
+    "typecheck": "npm run typecheck --workspace @codenomad/ui && npm run typecheck --workspace @codenomad/electron-app"
   },
   "dependencies": {
-    "@git-diff-view/solid": "^0.0.8",
-    "@kobalte/core": "0.13.11",
-    "@opencode-ai/sdk": "0.15.13",
-    "@solidjs/router": "^0.13.0",
-    "github-markdown-css": "^5.8.1",
-    "ignore": "7.0.5",
-    "lucide-solid": "^0.300.0",
-    "marked": "^12.0.0",
-    "shiki": "^3.13.0",
-    "solid-js": "^1.8.0",
-    "solid-toast": "^0.5.0"
-  },
-  "devDependencies": {
-    "@tsconfig/bun": "^1.0.9",
-    "autoprefixer": "10.4.21",
-    "electron": "39.0.0",
-    "png2icons": "^2.0.1",
-    "pngjs": "^7.0.0",
-    "electron-builder": "^24.0.0",
-    "electron-vite": "4.0.1",
-    "postcss": "8.5.6",
-    "tailwindcss": "3",
-    "typescript": "^5.3.0",
-    "vite": "^5.0.0",
-    "vite-plugin-solid": "^2.10.0"
-  },
-  "build": {
-    "appId": "ai.opencode.client",
-    "productName": "CodeNomad",
-    "directories": {
-      "output": "release",
-      "buildResources": "electron/resources"
-    },
-    "files": [
-      "dist/**/*",
-      "package.json"
-    ],
-    "mac": {
-      "category": "public.app-category.developer-tools",
-      "target": [
-        {
-          "target": "dmg",
-          "arch": [
-            "x64",
-            "arm64",
-            "universal"
-          ]
-        },
-        {
-          "target": "zip",
-          "arch": [
-            "x64",
-            "arm64",
-            "universal"
-          ]
-        }
-      ],
-      "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
-      "icon": "electron/resources/icon.icns"
-    },
-    "dmg": {
-      "contents": [
-        {
-          "x": 130,
-          "y": 220
-        },
-        {
-          "x": 410,
-          "y": 220,
-          "type": "link",
-          "path": "/Applications"
-        }
-      ]
-    },
-    "win": {
-      "target": [
-        {
-          "target": "nsis",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
-        },
-        {
-          "target": "zip",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
-        }
-      ],
-      "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
-      "icon": "electron/resources/icon.ico"
-    },
-    "nsis": {
-      "oneClick": false,
-      "allowToChangeInstallationDirectory": true,
-      "createDesktopShortcut": true,
-      "createStartMenuShortcut": true
-    },
-    "linux": {
-      "target": [
-        {
-          "target": "AppImage",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
-        },
-        {
-          "target": "deb",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
-        },
-        {
-          "target": "tar.gz",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
-        }
-      ],
-      "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
-      "category": "Development",
-      "icon": "electron/resources/icon.png"
-    }
-  },
-  "private": true
+    "7zip-bin": "^5.2.0",
+    "google-auth-library": "^10.5.0"
+  }
 }

packages/cli/.gitignore

@@ -0,0 +1 @@
+public/

packages/cli/.npmignore

@@ -0,0 +1,5 @@
+node_modules
+scripts/
+src/
+tsconfig.json
+*.tsbuildinfo

packages/cli/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@codenomad/cli",
+  "version": "0.1.0",
+  "description": "CodeNomad CLI server for HTTP/SSE control plane",
+  "type": "module",
+  "main": "dist/index.js",
+  "bin": {
+    "codenomad-cli": "dist/bin.js"
+  },
+  "scripts": {
+    "build": "npm run build:ui && npm run prepare-ui && tsc -p tsconfig.json",
+    "build:ui": "npm run build --prefix ../ui",
+    "prepare-ui": "node ./scripts/copy-ui-dist.mjs",
+    "dev": "cross-env CLI_UI_DEV_SERVER=http://localhost:3000 tsx src/index.ts",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  },
+  "dependencies": {
+    "@fastify/cors": "^8.5.0",
+    "@fastify/reply-from": "^9.8.0",
+    "@fastify/static": "^7.0.4",
+    "commander": "^12.1.0",
+    "fastify": "^4.28.1",
+    "pino": "^9.4.0",
+    "undici": "^6.19.8",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.3",
+    "ts-node": "^10.9.2",
+    "tsx": "^4.20.6",
+    "typescript": "^5.6.3"
+  }
+}

packages/cli/scripts/copy-ui-dist.mjs

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+import { cpSync, existsSync, mkdirSync, rmSync } from "fs"
+import path from "path"
+import { fileURLToPath } from "url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const cliRoot = path.resolve(__dirname, "..")
+const uiDistDir = path.resolve(cliRoot, "../ui/src/renderer/dist")
+const targetDir = path.resolve(cliRoot, "public")
+
+if (!existsSync(uiDistDir)) {
+  console.error(`[copy-ui-dist] Expected UI build artifacts at ${uiDistDir}. Run the UI build before bundling the CLI.`)
+  process.exit(1)
+}
+
+rmSync(targetDir, { recursive: true, force: true })
+mkdirSync(targetDir, { recursive: true })
+cpSync(uiDistDir, targetDir, { recursive: true })
+
+console.log(`[copy-ui-dist] Copied UI bundle from ${uiDistDir} -> ${targetDir}`)

packages/cli/src/api-types.ts

@@ -0,0 +1,181 @@
+import type {
+  AgentModelSelections,
+  ConfigFile,
+  ModelPreference,
+  OpenCodeBinary,
+  Preferences,
+  RecentFolder,
+} from "./config/schema"
+
+/**
+ * Canonical HTTP/SSE contract for the CLI server.
+ * These types are consumed by both the CLI implementation and any UI clients.
+ */
+
+export type WorkspaceStatus = "starting" | "ready" | "stopped" | "error"
+
+export interface WorkspaceDescriptor {
+  id: string
+  /** Absolute path on the server host. */
+  path: string
+  name?: string
+  status: WorkspaceStatus
+  /** PID/port are populated when the workspace is running. */
+  pid?: number
+  port?: number
+  /** Canonical proxy path the CLI exposes for this instance. */
+  proxyPath: string
+  /** Identifier of the binary resolved from config. */
+  binaryId: string
+  binaryLabel: string
+  binaryVersion?: string
+  createdAt: string
+  updatedAt: string
+  /** Present when `status` is "error". */
+  error?: string
+}
+
+export interface WorkspaceCreateRequest {
+  path: string
+  name?: string
+}
+
+export type WorkspaceCreateResponse = WorkspaceDescriptor
+export type WorkspaceListResponse = WorkspaceDescriptor[]
+export type WorkspaceDetailResponse = WorkspaceDescriptor
+
+export interface WorkspaceDeleteResponse {
+  id: string
+  status: WorkspaceStatus
+}
+
+export type LogLevel = "debug" | "info" | "warn" | "error"
+
+export interface WorkspaceLogEntry {
+  workspaceId: string
+  timestamp: string
+  level: LogLevel
+  message: string
+}
+
+export interface FileSystemEntry {
+  name: string
+  /** Path relative to the CLI server root ("." represents the root itself). */
+  path: string
+  /** Absolute path when available (unrestricted listings). */
+  absolutePath?: string
+  type: "file" | "directory"
+  size?: number
+  /** ISO timestamp of last modification when available. */
+  modifiedAt?: string
+}
+
+export type FileSystemScope = "restricted" | "unrestricted"
+export type FileSystemPathKind = "relative" | "absolute" | "drives"
+
+export interface FileSystemListingMetadata {
+  scope: FileSystemScope
+  /** Canonical identifier of the current view ("." for restricted roots, absolute paths otherwise). */
+  currentPath: string
+  /** Optional parent path if navigation upward is allowed. */
+  parentPath?: string
+  /** Absolute path representing the root or origin point for this listing. */
+  rootPath: string
+  /** Absolute home directory of the CLI host (useful defaults for unrestricted mode). */
+  homePath: string
+  /** Human-friendly label for the current path. */
+  displayPath: string
+  /** Indicates whether entry paths are relative, absolute, or represent drive roots. */
+  pathKind: FileSystemPathKind
+}
+
+export interface FileSystemListResponse {
+  entries: FileSystemEntry[]
+  metadata: FileSystemListingMetadata
+}
+
+export const WINDOWS_DRIVES_ROOT = "__drives__"
+
+export interface WorkspaceFileResponse {
+  workspaceId: string
+  relativePath: string
+  /** UTF-8 file contents; binary files should be base64 encoded by the caller. */
+  contents: string
+}
+
+export interface InstanceData {
+  messageHistory: string[]
+}
+
+export interface BinaryRecord {
+  id: string
+  path: string
+  label: string
+  version?: string
+  /** Indicates that this binary will be picked when workspaces omit an explicit choice. */
+  isDefault: boolean
+  lastValidatedAt?: string
+  validationError?: string
+}
+
+export type AppConfig = ConfigFile
+export type AppConfigResponse = AppConfig
+export type AppConfigUpdateRequest = Partial<AppConfig>
+
+export interface BinaryListResponse {
+  binaries: BinaryRecord[]
+}
+
+export interface BinaryCreateRequest {
+  path: string
+  label?: string
+  makeDefault?: boolean
+}
+
+export interface BinaryUpdateRequest {
+  label?: string
+  makeDefault?: boolean
+}
+
+export interface BinaryValidationResult {
+  valid: boolean
+  version?: string
+  error?: string
+}
+
+export type WorkspaceEventType =
+  | "workspace.created"
+  | "workspace.started"
+  | "workspace.error"
+  | "workspace.stopped"
+  | "workspace.log"
+  | "config.appChanged"
+  | "config.binariesChanged"
+
+export type WorkspaceEventPayload =
+  | { type: "workspace.created"; workspace: WorkspaceDescriptor }
+  | { type: "workspace.started"; workspace: WorkspaceDescriptor }
+  | { type: "workspace.error"; workspace: WorkspaceDescriptor }
+  | { type: "workspace.stopped"; workspaceId: string }
+  | { type: "workspace.log"; entry: WorkspaceLogEntry }
+  | { type: "config.appChanged"; config: AppConfig }
+  | { type: "config.binariesChanged"; binaries: BinaryRecord[] }
+
+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
+  /** Display label for the host (e.g., hostname or friendly name). */
+  hostLabel: string
+  /** Absolute path of the filesystem root exposed to clients. */
+  workspaceRoot: string
+}
+
+export type {
+  Preferences,
+  ModelPreference,
+  AgentModelSelections,
+  RecentFolder,
+  OpenCodeBinary,
+}

packages/cli/src/bin.ts

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+
+import { spawn } from "child_process"
+import path from "path"
+import { fileURLToPath, pathToFileURL } from "url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const cliEntry = path.join(__dirname, "index.js")
+const loaderFileUrl = pathToFileURL(path.join(__dirname, "loader.js")).href
+const registerScript = `import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("${encodeURI(loaderFileUrl)}", pathToFileURL("./"));`
+const loaderArg = `data:text/javascript,${registerScript}`
+
+const child = spawn(process.execPath, ["--import", loaderArg, cliEntry, ...process.argv.slice(2)], {
+  stdio: "inherit",
+})
+
+child.on("exit", (code, signal) => {
+  if (signal) {
+    process.kill(process.pid, signal)
+    return
+  }
+  process.exit(code ?? 0)
+})
+
+child.on("error", (error) => {
+  console.error("Failed to launch CLI runtime", error)
+  process.exit(1)
+})

packages/cli/src/config/binaries.ts

@@ -0,0 +1,155 @@
+import {
+  BinaryCreateRequest,
+  BinaryRecord,
+  BinaryUpdateRequest,
+  BinaryValidationResult,
+} from "../api-types"
+import { ConfigStore } from "./store"
+import { EventBus } from "../events/bus"
+import type { ConfigFileUpdate } from "./schema"
+import { Logger } from "../logger"
+
+export class BinaryRegistry {
+  constructor(
+    private readonly configStore: ConfigStore,
+    private readonly eventBus: EventBus | undefined,
+    private readonly logger: Logger,
+  ) {}
+
+  list(): BinaryRecord[] {
+    return this.mapRecords()
+  }
+
+  resolveDefault(): BinaryRecord {
+    const binaries = this.mapRecords()
+    if (binaries.length === 0) {
+      this.logger.warn("No configured binaries found, falling back to opencode")
+      return this.buildFallbackRecord("opencode")
+    }
+    return binaries.find((binary) => binary.isDefault) ?? binaries[0]
+  }
+
+  create(request: BinaryCreateRequest): BinaryRecord {
+    this.logger.debug({ path: request.path }, "Registering OpenCode binary")
+    const entry = {
+      path: request.path,
+      version: undefined,
+      lastUsed: Date.now(),
+      label: request.label,
+    }
+
+    const config = this.configStore.get()
+    const deduped = config.opencodeBinaries.filter((binary) => binary.path !== request.path)
+
+    const update: ConfigFileUpdate = {
+      opencodeBinaries: [entry, ...deduped],
+    }
+
+    if (request.makeDefault) {
+      update.preferences = { lastUsedBinary: request.path }
+    }
+
+    this.configStore.update(update)
+    const record = this.getById(request.path)
+    this.emitChange()
+    return record
+  }
+
+  update(id: string, updates: BinaryUpdateRequest): BinaryRecord {
+    this.logger.debug({ id }, "Updating OpenCode binary")
+    const config = this.configStore.get()
+    const updatedEntries = config.opencodeBinaries.map((binary) =>
+      binary.path === id ? { ...binary, label: updates.label ?? binary.label } : binary,
+    )
+
+    const update: ConfigFileUpdate = {
+      opencodeBinaries: updatedEntries,
+    }
+
+    if (updates.makeDefault) {
+      update.preferences = { lastUsedBinary: id }
+    }
+
+    this.configStore.update(update)
+    const record = this.getById(id)
+    this.emitChange()
+    return record
+  }
+
+  remove(id: string) {
+    this.logger.debug({ id }, "Removing OpenCode binary")
+    const config = this.configStore.get()
+    const remaining = config.opencodeBinaries.filter((binary) => binary.path !== id)
+    const update: ConfigFileUpdate = { opencodeBinaries: remaining }
+
+    if (config.preferences.lastUsedBinary === id) {
+      update.preferences = { lastUsedBinary: remaining[0]?.path }
+    }
+
+    this.configStore.update(update)
+    this.emitChange()
+  }
+
+  validatePath(path: string): BinaryValidationResult {
+    this.logger.debug({ path }, "Validating OpenCode binary path")
+    return this.validateRecord({
+      id: path,
+      path,
+      label: this.prettyLabel(path),
+      isDefault: false,
+    })
+  }
+
+  private mapRecords(): BinaryRecord[] {
+    const config = this.configStore.get()
+    const configuredBinaries = config.opencodeBinaries.map<BinaryRecord>((binary) => ({
+      id: binary.path,
+      path: binary.path,
+      label: binary.label ?? this.prettyLabel(binary.path),
+      version: binary.version,
+      isDefault: false,
+    }))
+
+    const defaultPath = config.preferences.lastUsedBinary ?? configuredBinaries[0]?.path ?? "opencode"
+
+    const annotated = configuredBinaries.map((binary) => ({
+      ...binary,
+      isDefault: binary.path === defaultPath,
+    }))
+
+    if (!annotated.some((binary) => binary.path === defaultPath)) {
+      annotated.unshift(this.buildFallbackRecord(defaultPath))
+    }
+
+    return annotated
+  }
+
+  private getById(id: string): BinaryRecord {
+    return this.mapRecords().find((binary) => binary.id === id) ?? this.buildFallbackRecord(id)
+  }
+
+  private emitChange() {
+    this.logger.debug("Emitting binaries changed event")
+    this.eventBus?.publish({ type: "config.binariesChanged", binaries: this.mapRecords() })
+  }
+
+  private validateRecord(record: BinaryRecord): BinaryValidationResult {
+    // TODO: call actual binary -v check.
+    return { valid: true, version: record.version }
+  }
+
+  private buildFallbackRecord(path: string): BinaryRecord {
+    return {
+      id: path,
+      path,
+      label: this.prettyLabel(path),
+      isDefault: true,
+    }
+  }
+
+  private prettyLabel(path: string) {
+    const parts = path.split(/[\\/]/)
+    const last = parts[parts.length - 1] || path
+    return last || path
+  }
+}

packages/cli/src/config/schema.ts

@@ -0,0 +1,80 @@
+import { z } from "zod"
+
+const ModelPreferenceSchema = z.object({
+  providerId: z.string(),
+  modelId: z.string(),
+})
+
+const AgentModelSelectionSchema = z.record(z.string(), ModelPreferenceSchema)
+const AgentModelSelectionsSchema = z.record(z.string(), AgentModelSelectionSchema)
+
+const PreferencesSchema = z.object({
+  showThinkingBlocks: z.boolean().default(false),
+  lastUsedBinary: z.string().optional(),
+  environmentVariables: z.record(z.string()).default({}),
+  modelRecents: z.array(ModelPreferenceSchema).default([]),
+  agentModelSelections: AgentModelSelectionsSchema.default({}),
+  diffViewMode: z.enum(["split", "unified"]).default("split"),
+  toolOutputExpansion: z.enum(["expanded", "collapsed"]).default("expanded"),
+  diagnosticsExpansion: z.enum(["expanded", "collapsed"]).default("expanded"),
+})
+
+const PreferencesUpdateSchema = z.object({
+  showThinkingBlocks: z.boolean().optional(),
+  lastUsedBinary: z.string().optional(),
+  environmentVariables: z.record(z.string()).optional(),
+  modelRecents: z.array(ModelPreferenceSchema).optional(),
+  agentModelSelections: AgentModelSelectionsSchema.optional(),
+  diffViewMode: z.enum(["split", "unified"]).optional(),
+  toolOutputExpansion: z.enum(["expanded", "collapsed"]).optional(),
+  diagnosticsExpansion: z.enum(["expanded", "collapsed"]).optional(),
+})
+
+const RecentFolderSchema = z.object({
+  path: z.string(),
+  lastAccessed: z.number().nonnegative(),
+})
+
+const OpenCodeBinarySchema = z.object({
+  path: z.string(),
+  version: z.string().optional(),
+  lastUsed: z.number().nonnegative(),
+  label: z.string().optional(),
+})
+
+const ConfigFileSchema = z.object({
+  preferences: PreferencesSchema.default({}),
+  recentFolders: z.array(RecentFolderSchema).default([]),
+  opencodeBinaries: z.array(OpenCodeBinarySchema).default([]),
+  theme: z.enum(["light", "dark", "system"]).optional(),
+})
+
+const ConfigFileUpdateSchema = z.object({
+  preferences: PreferencesUpdateSchema.optional(),
+  recentFolders: z.array(RecentFolderSchema).optional(),
+  opencodeBinaries: z.array(OpenCodeBinarySchema).optional(),
+  theme: z.enum(["light", "dark", "system"]).optional(),
+})
+
+const DEFAULT_CONFIG = ConfigFileSchema.parse({})
+
+export {
+  ModelPreferenceSchema,
+  AgentModelSelectionSchema,
+  AgentModelSelectionsSchema,
+  PreferencesSchema,
+  RecentFolderSchema,
+  OpenCodeBinarySchema,
+  ConfigFileSchema,
+  ConfigFileUpdateSchema,
+  DEFAULT_CONFIG,
+}
+
+export type ModelPreference = z.infer<typeof ModelPreferenceSchema>
+export type AgentModelSelection = z.infer<typeof AgentModelSelectionSchema>
+export type AgentModelSelections = z.infer<typeof AgentModelSelectionsSchema>
+export type Preferences = z.infer<typeof PreferencesSchema>
+export type RecentFolder = z.infer<typeof RecentFolderSchema>
+export type OpenCodeBinary = z.infer<typeof OpenCodeBinarySchema>
+export type ConfigFile = z.infer<typeof ConfigFileSchema>
+export type ConfigFileUpdate = z.infer<typeof ConfigFileUpdateSchema>

packages/cli/src/config/store.ts

@@ -0,0 +1,120 @@
+import fs from "fs"
+import path from "path"
+import { EventBus } from "../events/bus"
+import { Logger } from "../logger"
+import {
+  AgentModelSelections,
+  ConfigFile,
+  ConfigFileUpdate,
+  ConfigFileSchema,
+  ConfigFileUpdateSchema,
+  DEFAULT_CONFIG,
+} from "./schema"
+
+export class ConfigStore {
+  private cache: ConfigFile = DEFAULT_CONFIG
+  private loaded = false
+
+  constructor(
+    private readonly configPath: string,
+    private readonly eventBus: EventBus | undefined,
+    private readonly logger: Logger,
+  ) {}
+
+  load(): ConfigFile {
+    if (this.loaded) {
+      return this.cache
+    }
+
+    try {
+      const resolved = this.resolvePath(this.configPath)
+      if (fs.existsSync(resolved)) {
+        const content = fs.readFileSync(resolved, "utf-8")
+        const parsed = JSON.parse(content)
+        this.cache = ConfigFileSchema.parse(parsed)
+        this.logger.debug({ resolved }, "Loaded existing config file")
+      } else {
+        this.cache = DEFAULT_CONFIG
+        this.logger.debug({ resolved }, "No config file found, using defaults")
+      }
+    } catch (error) {
+      this.logger.warn({ err: error }, "Failed to load config, using defaults")
+      this.cache = DEFAULT_CONFIG
+    }
+
+    this.loaded = true
+    return this.cache
+  }
+
+  get(): ConfigFile {
+    return this.load()
+  }
+
+  update(partial: ConfigFile | ConfigFileUpdate) {
+    const safePartial =
+      "recentFolders" in partial && "opencodeBinaries" in partial
+        ? ConfigFileSchema.parse(partial)
+        : ConfigFileUpdateSchema.parse(partial ?? {})
+    const merged = this.mergeConfig(this.load(), safePartial)
+    this.cache = ConfigFileSchema.parse(merged)
+    this.persist()
+    this.eventBus?.publish({ type: "config.appChanged", config: this.cache })
+    this.logger.debug("Config updated")
+  }
+
+  private mergeConfig(current: ConfigFile, partial: ConfigFile | ConfigFileUpdate): ConfigFile {
+    const mergedPreferences = {
+      ...current.preferences,
+      ...partial.preferences,
+      environmentVariables: {
+        ...current.preferences.environmentVariables,
+        ...(partial.preferences?.environmentVariables ?? {}),
+      },
+      agentModelSelections: this.mergeAgentSelections(
+        current.preferences.agentModelSelections,
+        partial.preferences?.agentModelSelections,
+      ),
+    }
+
+    return {
+      ...current,
+      ...partial,
+      preferences: mergedPreferences,
+      recentFolders: partial.recentFolders ?? current.recentFolders,
+      opencodeBinaries: partial.opencodeBinaries ?? current.opencodeBinaries,
+    }
+  }
+
+  private mergeAgentSelections(base: AgentModelSelections, update?: AgentModelSelections) {
+    if (!update) {
+      return base
+    }
+
+    const result: AgentModelSelections = { ...base }
+    for (const [instanceId, agentMap] of Object.entries(update)) {
+      result[instanceId] = {
+        ...(base[instanceId] ?? {}),
+        ...agentMap,
+      }
+    }
+    return result
+  }
+
+  private persist() {
+    try {
+      const resolved = this.resolvePath(this.configPath)
+      fs.mkdirSync(path.dirname(resolved), { recursive: true })
+      fs.writeFileSync(resolved, JSON.stringify(this.cache, null, 2), "utf-8")
+      this.logger.debug({ resolved }, "Persisted config file")
+    } catch (error) {
+      this.logger.warn({ err: error }, "Failed to persist config")
+    }
+  }
+
+  private resolvePath(filePath: string) {
+    if (filePath.startsWith("~/")) {
+      return path.join(process.env.HOME ?? "", filePath.slice(2))
+    }
+    return path.resolve(filePath)
+  }
+}

packages/cli/src/events/bus.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from "events"
+import { WorkspaceEventPayload } from "../api-types"
+import { Logger } from "../logger"
+
+export class EventBus extends EventEmitter {
+  constructor(private readonly logger?: Logger) {
+    super()
+  }
+
+  publish(event: WorkspaceEventPayload): boolean {
+    this.logger?.debug({ event }, "Publishing workspace event")
+    return super.emit(event.type, event)
+  }
+
+  onEvent(listener: (event: WorkspaceEventPayload) => void) {
+    const handler = (event: WorkspaceEventPayload) => listener(event)
+    this.on("workspace.created", handler)
+    this.on("workspace.started", handler)
+    this.on("workspace.error", handler)
+    this.on("workspace.stopped", handler)
+    this.on("workspace.log", handler)
+    this.on("config.appChanged", handler)
+    this.on("config.binariesChanged", handler)
+    return () => {
+      this.off("workspace.created", handler)
+      this.off("workspace.started", handler)
+      this.off("workspace.error", handler)
+      this.off("workspace.stopped", handler)
+      this.off("workspace.log", handler)
+      this.off("config.appChanged", handler)
+      this.off("config.binariesChanged", handler)
+    }
+  }
+}

packages/cli/src/filesystem/browser.ts

@@ -0,0 +1,295 @@
+import fs from "fs"
+import os from "os"
+import path from "path"
+import {
+  FileSystemEntry,
+  FileSystemListResponse,
+  FileSystemListingMetadata,
+  WINDOWS_DRIVES_ROOT,
+} from "../api-types"
+
+interface FileSystemBrowserOptions {
+  rootDir: string
+  unrestricted?: boolean
+}
+
+interface DirectoryReadOptions {
+  includeFiles: boolean
+  formatPath: (entryName: string) => string
+  formatAbsolutePath: (entryName: string) => string
+}
+
+const WINDOWS_DRIVE_LETTERS = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i))
+
+export class FileSystemBrowser {
+  private readonly root: string
+  private readonly unrestricted: boolean
+  private readonly homeDir: string
+  private readonly isWindows: boolean
+
+  constructor(options: FileSystemBrowserOptions) {
+    this.root = path.resolve(options.rootDir)
+    this.unrestricted = Boolean(options.unrestricted)
+    this.homeDir = os.homedir()
+    this.isWindows = process.platform === "win32"
+  }
+
+  list(relativePath = ".", options: { includeFiles?: boolean } = {}): FileSystemEntry[] {
+    if (this.unrestricted) {
+      throw new Error("Relative listing is unavailable when running with unrestricted root")
+    }
+    const includeFiles = options.includeFiles ?? true
+    const normalizedPath = this.normalizeRelativePath(relativePath)
+    const absolutePath = this.toRestrictedAbsolute(normalizedPath)
+    return this.readDirectoryEntries(absolutePath, {
+      includeFiles,
+      formatPath: (entryName) => this.buildRelativePath(normalizedPath, entryName),
+      formatAbsolutePath: (entryName) => this.resolveRestrictedAbsoluteChild(normalizedPath, entryName),
+    })
+  }
+
+  browse(targetPath?: string, options: { includeFiles?: boolean } = {}): FileSystemListResponse {
+    const includeFiles = options.includeFiles ?? true
+    if (this.unrestricted) {
+      return this.listUnrestricted(targetPath, includeFiles)
+    }
+    return this.listRestrictedWithMetadata(targetPath, includeFiles)
+  }
+
+  readFile(relativePath: string): string {
+    if (this.unrestricted) {
+      throw new Error("readFile is not available in unrestricted mode")
+    }
+    const resolved = this.toRestrictedAbsolute(relativePath)
+    return fs.readFileSync(resolved, "utf-8")
+  }
+
+  private listRestrictedWithMetadata(relativePath: string | undefined, includeFiles: boolean): FileSystemListResponse {
+    const normalizedPath = this.normalizeRelativePath(relativePath)
+    const absolutePath = this.toRestrictedAbsolute(normalizedPath)
+    const entries = this.readDirectoryEntries(absolutePath, {
+      includeFiles,
+      formatPath: (entryName) => this.buildRelativePath(normalizedPath, entryName),
+      formatAbsolutePath: (entryName) => this.resolveRestrictedAbsoluteChild(normalizedPath, entryName),
+    })
+
+    const metadata: FileSystemListingMetadata = {
+      scope: "restricted",
+      currentPath: normalizedPath,
+      parentPath: normalizedPath === "." ? undefined : this.getRestrictedParent(normalizedPath),
+      rootPath: this.root,
+      homePath: this.homeDir,
+      displayPath: this.resolveRestrictedAbsolute(normalizedPath),
+      pathKind: "relative",
+    }
+
+    return { entries, metadata }
+  }
+
+  private listUnrestricted(targetPath: string | undefined, includeFiles: boolean): FileSystemListResponse {
+    const resolvedPath = this.resolveUnrestrictedPath(targetPath)
+
+    if (this.isWindows && resolvedPath === WINDOWS_DRIVES_ROOT) {
+      return this.listWindowsDrives()
+    }
+
+    const entries = this.readDirectoryEntries(resolvedPath, {
+      includeFiles,
+      formatPath: (entryName) => this.resolveAbsoluteChild(resolvedPath, entryName),
+      formatAbsolutePath: (entryName) => this.resolveAbsoluteChild(resolvedPath, entryName),
+    })
+
+    const parentPath = this.getUnrestrictedParent(resolvedPath)
+
+    const metadata: FileSystemListingMetadata = {
+      scope: "unrestricted",
+      currentPath: resolvedPath,
+      parentPath,
+      rootPath: this.homeDir,
+      homePath: this.homeDir,
+      displayPath: resolvedPath,
+      pathKind: "absolute",
+    }
+
+    return { entries, metadata }
+  }
+
+  private listWindowsDrives(): FileSystemListResponse {
+    if (!this.isWindows) {
+      throw new Error("Drive listing is only supported on Windows hosts")
+    }
+
+    const entries: FileSystemEntry[] = []
+    for (const letter of WINDOWS_DRIVE_LETTERS) {
+      const drivePath = `${letter}:\\`
+      try {
+        if (fs.existsSync(drivePath)) {
+          entries.push({
+            name: `${letter}:`,
+            path: drivePath,
+            absolutePath: drivePath,
+            type: "directory",
+          })
+        }
+      } catch {
+        // Ignore inaccessible drives
+      }
+    }
+
+    // Provide a generic UNC root entry so users can navigate to network shares manually.
+    entries.push({
+      name: "UNC Network",
+      path: "\\\\",
+      absolutePath: "\\\\",
+      type: "directory",
+    })
+
+    const metadata: FileSystemListingMetadata = {
+      scope: "unrestricted",
+      currentPath: WINDOWS_DRIVES_ROOT,
+      parentPath: undefined,
+      rootPath: this.homeDir,
+      homePath: this.homeDir,
+      displayPath: "Drives",
+      pathKind: "drives",
+    }
+
+    return { entries, metadata }
+  }
+
+  private readDirectoryEntries(directory: string, options: DirectoryReadOptions): FileSystemEntry[] {
+    const dirents = fs.readdirSync(directory, { withFileTypes: true })
+    const results: FileSystemEntry[] = []
+
+    for (const entry of dirents) {
+      if (!options.includeFiles && !entry.isDirectory()) {
+        continue
+      }
+
+      const absoluteEntryPath = path.join(directory, entry.name)
+      let stats: fs.Stats
+      try {
+        stats = fs.statSync(absoluteEntryPath)
+      } catch {
+        // Skip entries we cannot stat (insufficient permissions, etc.)
+        continue
+      }
+
+      const isDirectory = entry.isDirectory()
+      if (!options.includeFiles && !isDirectory) {
+        continue
+      }
+
+      results.push({
+        name: entry.name,
+        path: options.formatPath(entry.name),
+        absolutePath: options.formatAbsolutePath(entry.name),
+        type: isDirectory ? "directory" : "file",
+        size: isDirectory ? undefined : stats.size,
+        modifiedAt: stats.mtime.toISOString(),
+      })
+    }
+
+    return results.sort((a, b) => a.name.localeCompare(b.name))
+  }
+
+  private normalizeRelativePath(input: string | undefined) {
+    if (!input || input === "." || input === "./" || input === "/") {
+      return "."
+    }
+    let normalized = input.replace(/\\+/g, "/")
+    if (normalized.startsWith("./")) {
+      normalized = normalized.replace(/^\.\/+/, "")
+    }
+    if (normalized.startsWith("/")) {
+      normalized = normalized.replace(/^\/+/g, "")
+    }
+    return normalized === "" ? "." : normalized
+  }
+
+  private buildRelativePath(parent: string, child: string) {
+    if (!parent || parent === ".") {
+      return this.normalizeRelativePath(child)
+    }
+    return this.normalizeRelativePath(`${parent}/${child}`)
+  }
+
+  private resolveRestrictedAbsolute(relativePath: string) {
+    return this.toRestrictedAbsolute(relativePath)
+  }
+
+  private resolveRestrictedAbsoluteChild(parent: string, child: string) {
+    const normalized = this.buildRelativePath(parent, child)
+    return this.toRestrictedAbsolute(normalized)
+  }
+
+  private toRestrictedAbsolute(relativePath: string) {
+    const normalized = this.normalizeRelativePath(relativePath)
+    const target = path.resolve(this.root, normalized)
+    const relativeToRoot = path.relative(this.root, target)
+    if (relativeToRoot.startsWith("..") || path.isAbsolute(relativeToRoot) && relativeToRoot !== "") {
+      throw new Error("Access outside of root is not allowed")
+    }
+    return target
+  }
+
+  private resolveUnrestrictedPath(input: string | undefined): string {
+    if (!input || input === "." || input === "./") {
+      return this.homeDir
+    }
+
+    if (this.isWindows) {
+      if (input === WINDOWS_DRIVES_ROOT) {
+        return WINDOWS_DRIVES_ROOT
+      }
+      const normalized = path.win32.normalize(input)
+      if (/^[a-zA-Z]:/.test(normalized) || normalized.startsWith("\\\\")) {
+        return normalized
+      }
+      return path.win32.resolve(this.homeDir, normalized)
+    }
+
+    if (input.startsWith("/")) {
+      return path.posix.normalize(input)
+    }
+
+    return path.posix.resolve(this.homeDir, input)
+  }
+
+  private resolveAbsoluteChild(parent: string, child: string) {
+    if (this.isWindows) {
+      return path.win32.normalize(path.win32.join(parent, child))
+    }
+    return path.posix.normalize(path.posix.join(parent, child))
+  }
+
+  private getRestrictedParent(relativePath: string) {
+    const normalized = this.normalizeRelativePath(relativePath)
+    if (normalized === ".") {
+      return undefined
+    }
+    const segments = normalized.split("/")
+    segments.pop()
+    return segments.length === 0 ? "." : segments.join("/")
+  }
+
+  private getUnrestrictedParent(currentPath: string) {
+    if (this.isWindows) {
+      const normalized = path.win32.normalize(currentPath)
+      const parsed = path.win32.parse(normalized)
+      if (normalized === WINDOWS_DRIVES_ROOT) {
+        return undefined
+      }
+      if (normalized === parsed.root) {
+        return WINDOWS_DRIVES_ROOT
+      }
+      return path.win32.dirname(normalized)
+    }
+
+    const normalized = path.posix.normalize(currentPath)
+    if (normalized === "/") {
+      return undefined
+    }
+    return path.posix.dirname(normalized)
+  }
+}

packages/cli/src/index.ts

@@ -0,0 +1,183 @@
+/**
+ * CLI entry point.
+ * For now this only wires the typed modules together; actual command handling comes later.
+ */
+import { Command, InvalidArgumentError, Option } from "commander"
+import path from "path"
+import { fileURLToPath } from "url"
+import { createRequire } from "module"
+import { createHttpServer } from "./server/http-server"
+import { WorkspaceManager } from "./workspaces/manager"
+import { ConfigStore } from "./config/store"
+import { BinaryRegistry } from "./config/binaries"
+import { FileSystemBrowser } from "./filesystem/browser"
+import { EventBus } from "./events/bus"
+import { ServerMeta } from "./api-types"
+import { InstanceStore } from "./storage/instance-store"
+import { createLogger } from "./logger"
+
+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)
+const DEFAULT_UI_STATIC_DIR = path.resolve(__dirname, "../public")
+
+interface CliOptions {
+  port: number
+  host: string
+  rootDir: string
+  configPath: string
+  unrestrictedRoot: boolean
+  logLevel?: string
+  logDestination?: string
+  uiStaticDir: string
+  uiDevServer?: string
+}
+
+const DEFAULT_PORT = 9898
+const DEFAULT_HOST = "127.0.0.1"
+const DEFAULT_CONFIG_PATH = "~/.config/codenomad/config.json"
+
+function parseCliOptions(argv: string[]): CliOptions {
+  const program = new Command()
+    .name("codenomad-cli")
+    .description("CodeNomad CLI server")
+    .version(packageJson.version, "-v, --version", "Show the CLI version")
+    .addOption(new Option("--host <host>", "Host interface to bind").env("CLI_HOST").default(DEFAULT_HOST))
+    .addOption(new Option("--port <number>", "Port for the HTTP server").env("CLI_PORT").default(DEFAULT_PORT).argParser(parsePort))
+    .addOption(
+      new Option("--workspace-root <path>", "Workspace root directory").env("CLI_WORKSPACE_ROOT").default(process.cwd()),
+    )
+    .addOption(new Option("--root <path>").env("CLI_ROOT").hideHelp(true))
+    .addOption(new Option("--unrestricted-root", "Allow browsing the full filesystem").env("CLI_UNRESTRICTED_ROOT").default(false))
+    .addOption(new Option("--config <path>", "Path to the config file").env("CLI_CONFIG").default(DEFAULT_CONFIG_PATH))
+    .addOption(new Option("--log-level <level>", "Log level (trace|debug|info|warn|error)").env("CLI_LOG_LEVEL"))
+    .addOption(new Option("--log-destination <path>", "Log destination file (defaults to stdout)").env("CLI_LOG_DESTINATION"))
+    .addOption(
+      new Option("--ui-dir <path>", "Directory containing the built UI bundle").env("CLI_UI_DIR").default(DEFAULT_UI_STATIC_DIR),
+    )
+    .addOption(new Option("--ui-dev-server <url>", "Proxy UI requests to a running dev server").env("CLI_UI_DEV_SERVER"))
+
+  program.parse(argv, { from: "user" })
+  const parsed = program.opts<{
+    host: string
+    port: number
+    workspaceRoot?: string
+    root?: string
+    unrestrictedRoot?: boolean
+    config: string
+    logLevel?: string
+    logDestination?: string
+    uiDir: string
+    uiDevServer?: string
+  }>()
+
+  const resolvedRoot = parsed.workspaceRoot ?? parsed.root ?? process.cwd()
+
+  return {
+    port: parsed.port,
+    host: parsed.host,
+    rootDir: resolvedRoot,
+    configPath: parsed.config,
+    unrestrictedRoot: Boolean(parsed.unrestrictedRoot),
+    logLevel: parsed.logLevel,
+    logDestination: parsed.logDestination,
+    uiStaticDir: parsed.uiDir,
+    uiDevServer: parsed.uiDevServer,
+  }
+}
+
+function parsePort(input: string): number {
+  const value = Number(input)
+  if (!Number.isInteger(value) || value < 1 || value > 65535) {
+    throw new InvalidArgumentError("Port must be an integer between 1 and 65535")
+  }
+  return value
+}
+
+async function main() {
+  const options = parseCliOptions(process.argv.slice(2))
+  const logger = createLogger({ level: options.logLevel, destination: options.logDestination, component: "app" })
+  const workspaceLogger = logger.child({ component: "workspace" })
+  const configLogger = logger.child({ component: "config" })
+  const eventLogger = logger.child({ component: "events" })
+
+  logger.info({ options }, "Starting CodeNomad CLI server")
+
+  const eventBus = new EventBus(eventLogger)
+  const configStore = new ConfigStore(options.configPath, eventBus, configLogger)
+  const binaryRegistry = new BinaryRegistry(configStore, eventBus, configLogger)
+  const workspaceManager = new WorkspaceManager({
+    rootDir: options.rootDir,
+    configStore,
+    binaryRegistry,
+    eventBus,
+    logger: workspaceLogger,
+  })
+  const fileSystemBrowser = new FileSystemBrowser({ rootDir: options.rootDir, unrestricted: options.unrestrictedRoot })
+  const instanceStore = new InstanceStore()
+
+  const serverMeta: ServerMeta = {
+    httpBaseUrl: `http://${options.host}:${options.port}`,
+    eventsUrl: `/api/events`,
+    hostLabel: options.host,
+    workspaceRoot: options.rootDir,
+  }
+
+  const server = createHttpServer({
+    host: options.host,
+    port: options.port,
+    workspaceManager,
+    configStore,
+    binaryRegistry,
+    fileSystemBrowser,
+    eventBus,
+    serverMeta,
+    instanceStore,
+    uiStaticDir: options.uiStaticDir,
+    uiDevServerUrl: options.uiDevServer,
+    logger,
+  })
+
+
+  await server.start()
+  logger.info({ port: options.port, host: options.host }, "HTTP server listening")
+  const displayHost = options.host === "127.0.0.1" || options.host === "0.0.0.0" ? "localhost" : options.host
+  console.log(`CodeNomad Server is ready at http://${displayHost}:${options.port}`)
+
+  let shuttingDown = false
+
+  const shutdown = async () => {
+    if (shuttingDown) {
+      logger.info("Shutdown already in progress, ignoring signal")
+      return
+    }
+    shuttingDown = true
+    logger.info("Received shutdown signal, closing server")
+    try {
+      await server.stop()
+      logger.info("HTTP server stopped")
+    } catch (error) {
+      logger.error({ err: error }, "Failed to stop HTTP server")
+    }
+
+    try {
+      await workspaceManager.shutdown()
+      logger.info("Workspace manager shutdown complete")
+    } catch (error) {
+      logger.error({ err: error }, "Workspace manager shutdown failed")
+    }
+
+    logger.info("Exiting process")
+    process.exit(0)
+  }
+
+  process.on("SIGINT", shutdown)
+  process.on("SIGTERM", shutdown)
+}
+
+main().catch((error) => {
+  const logger = createLogger({ component: "app" })
+  logger.error({ err: error }, "CLI server crashed")
+  process.exit(1)
+})

packages/cli/src/loader.ts

@@ -0,0 +1,21 @@
+export async function resolve(specifier: string, context: any, defaultResolve: any) {
+  try {
+    return await defaultResolve(specifier, context, defaultResolve)
+  } catch (error: any) {
+    if (shouldRetry(specifier, error)) {
+      const retried = specifier.endsWith(".js") ? specifier : `${specifier}.js`
+      return defaultResolve(retried, context, defaultResolve)
+    }
+    throw error
+  }
+}
+
+function shouldRetry(specifier: string, error: any) {
+  if (!error || error.code !== "ERR_MODULE_NOT_FOUND") {
+    return false
+  }
+  if (specifier.startsWith("./") || specifier.startsWith("../")) {
+    return true
+  }
+  return false
+}

packages/cli/src/logger.ts

@@ -0,0 +1,133 @@
+import { Transform } from "node:stream"
+import pino, { Logger as PinoLogger } from "pino"
+
+export type Logger = PinoLogger
+
+interface LoggerOptions {
+  level?: string
+  destination?: string
+  component?: string
+}
+
+const LEVEL_LABELS: Record<number, string> = {
+  10: "trace",
+  20: "debug",
+  30: "info",
+  40: "warn",
+  50: "error",
+  60: "fatal",
+}
+
+const LIFECYCLE_COMPONENTS = new Set(["app", "workspace"])
+const OMITTED_FIELDS = new Set(["time", "msg", "level", "component", "module"])
+
+export function createLogger(options: LoggerOptions = {}): Logger {
+  const level = (options.level ?? process.env.CLI_LOG_LEVEL ?? "info").toLowerCase()
+  const destination = options.destination ?? process.env.CLI_LOG_DESTINATION ?? "stdout"
+  const baseComponent = options.component ?? "app"
+  const loggerOptions = {
+    level,
+    base: { component: baseComponent },
+    timestamp: false,
+  } as const
+
+  if (destination && destination !== "stdout") {
+    const stream = pino.destination({ dest: destination, mkdir: true, sync: false })
+    return pino(loggerOptions, stream)
+  }
+
+  const lifecycleStream = new LifecycleLogStream({ restrictInfoToLifecycle: level === "info" })
+  lifecycleStream.pipe(process.stdout)
+  return pino(loggerOptions, lifecycleStream)
+}
+
+interface LifecycleStreamOptions {
+  restrictInfoToLifecycle: boolean
+}
+
+class LifecycleLogStream extends Transform {
+  private buffer = ""
+
+  constructor(private readonly options: LifecycleStreamOptions) {
+    super()
+  }
+
+  _transform(chunk: Buffer, _encoding: BufferEncoding, callback: () => void) {
+    this.buffer += chunk.toString()
+    let newlineIndex = this.buffer.indexOf("\n")
+    while (newlineIndex >= 0) {
+      const line = this.buffer.slice(0, newlineIndex)
+      this.buffer = this.buffer.slice(newlineIndex + 1)
+      this.pushFormatted(line)
+      newlineIndex = this.buffer.indexOf("\n")
+    }
+    callback()
+  }
+
+  _flush(callback: () => void) {
+    if (this.buffer.length > 0) {
+      this.pushFormatted(this.buffer)
+      this.buffer = ""
+    }
+    callback()
+  }
+
+  private pushFormatted(line: string) {
+    if (!line.trim()) {
+      return
+    }
+
+    let entry: Record<string, unknown>
+    try {
+      entry = JSON.parse(line)
+    } catch {
+      return
+    }
+
+    const levelNumber = typeof entry.level === "number" ? entry.level : 30
+    const levelLabel = LEVEL_LABELS[levelNumber] ?? "info"
+    const component = (entry.component as string | undefined) ?? (entry.module as string | undefined) ?? "app"
+
+    if (this.options.restrictInfoToLifecycle && levelNumber <= 30 && !LIFECYCLE_COMPONENTS.has(component)) {
+      return
+    }
+
+    const message = typeof entry.msg === "string" ? entry.msg : ""
+    const metadata = this.formatMetadata(entry)
+    const formatted = metadata.length > 0 ? `[${levelLabel.toUpperCase()}] [${component}] ${message} ${metadata}` : `[${levelLabel.toUpperCase()}] [${component}] ${message}`
+    this.push(`${formatted}\n`)
+  }
+
+  private formatMetadata(entry: Record<string, unknown>): string {
+    const pairs: string[] = []
+    for (const [key, value] of Object.entries(entry)) {
+      if (OMITTED_FIELDS.has(key)) {
+        continue
+      }
+
+      if (key === "err" && value && typeof value === "object") {
+        const err = value as { type?: string; message?: string; stack?: string }
+        const errLabel = err.type ?? "Error"
+        const errMessage = err.message ? `: ${err.message}` : ""
+        pairs.push(`err=${errLabel}${errMessage}`)
+        if (err.stack) {
+          pairs.push(`stack="${err.stack}"`)
+        }
+        continue
+      }
+
+      pairs.push(`${key}=${this.stringifyValue(value)}`)
+    }
+
+    return pairs.join(" ").trim()
+  }
+
+  private stringifyValue(value: unknown): string {
+    if (value === undefined) return "undefined"
+    if (value === null) return "null"
+    if (typeof value === "string") return value
+    if (typeof value === "number" || typeof value === "boolean") return String(value)
+    if (value instanceof Error) return value.message ?? value.name
+    return JSON.stringify(value)
+  }
+}

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

@@ -0,0 +1,262 @@
+import Fastify, { type FastifyInstance, type FastifyReply, type FastifyRequest } from "fastify"
+import cors from "@fastify/cors"
+import fastifyStatic from "@fastify/static"
+import replyFrom, { type FastifyReplyFromOptions } from "@fastify/reply-from"
+import fs from "fs"
+import path from "path"
+import { fetch } from "undici"
+import type { Logger } from "../logger"
+import { WorkspaceManager } from "../workspaces/manager"
+
+import { ConfigStore } from "../config/store"
+import { BinaryRegistry } from "../config/binaries"
+import { FileSystemBrowser } from "../filesystem/browser"
+import { EventBus } from "../events/bus"
+import { registerWorkspaceRoutes } from "./routes/workspaces"
+import { registerConfigRoutes } from "./routes/config"
+import { registerFilesystemRoutes } from "./routes/filesystem"
+import { registerMetaRoutes } from "./routes/meta"
+import { registerEventRoutes } from "./routes/events"
+import { registerStorageRoutes } from "./routes/storage"
+import { ServerMeta } from "../api-types"
+import { InstanceStore } from "../storage/instance-store"
+
+interface HttpServerDeps {
+  host: string
+  port: number
+  workspaceManager: WorkspaceManager
+  configStore: ConfigStore
+  binaryRegistry: BinaryRegistry
+  fileSystemBrowser: FileSystemBrowser
+  eventBus: EventBus
+  serverMeta: ServerMeta
+  instanceStore: InstanceStore
+  uiStaticDir: string
+  uiDevServerUrl?: string
+  logger: Logger
+}
+
+
+export function createHttpServer(deps: HttpServerDeps) {
+  const app = Fastify({ logger: false })
+  const proxyLogger = deps.logger.child({ component: "proxy" })
+
+  const sseClients = new Set<() => void>()
+  const registerSseClient = (cleanup: () => void) => {
+    sseClients.add(cleanup)
+    return () => sseClients.delete(cleanup)
+  }
+  const closeSseClients = () => {
+    for (const cleanup of Array.from(sseClients)) {
+      cleanup()
+    }
+    sseClients.clear()
+  }
+
+  app.register(cors, {
+    origin: true,
+    credentials: true,
+  })
+
+  app.register(replyFrom, {
+    contentTypesToEncode: [],
+  })
+
+  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 })
+  registerStorageRoutes(app, { instanceStore: deps.instanceStore })
+  registerInstanceProxyRoutes(app, { workspaceManager: deps.workspaceManager, logger: proxyLogger })
+
+  if (deps.uiDevServerUrl) {
+    setupDevProxy(app, deps.uiDevServerUrl)
+  } else {
+    setupStaticUi(app, deps.uiStaticDir)
+  }
+
+  return {
+    instance: app,
+    start: () => app.listen({ port: deps.port, host: deps.host }),
+    stop: () => {
+      closeSseClients()
+      return app.close()
+    },
+  }
+}
+
+interface InstanceProxyDeps {
+  workspaceManager: WorkspaceManager
+  logger: Logger
+}
+
+function registerInstanceProxyRoutes(app: FastifyInstance, deps: InstanceProxyDeps) {
+  app.register(async (instance) => {
+    instance.removeAllContentTypeParsers()
+    instance.addContentTypeParser("*", (req, body, done) => done(null, body))
+
+    const proxyBaseHandler = async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+      await proxyWorkspaceRequest({
+        request,
+        reply,
+        workspaceManager: deps.workspaceManager,
+        pathSuffix: "",
+        logger: deps.logger,
+      })
+    }
+
+    const proxyWildcardHandler = async (
+      request: FastifyRequest<{ Params: { id: string; "*": string } }>,
+      reply: FastifyReply,
+    ) => {
+      await proxyWorkspaceRequest({
+        request,
+        reply,
+        workspaceManager: deps.workspaceManager,
+        pathSuffix: request.params["*"] ?? "",
+        logger: deps.logger,
+      })
+    }
+
+    instance.all("/workspaces/:id/instance", proxyBaseHandler)
+    instance.all("/workspaces/:id/instance/*", proxyWildcardHandler)
+  })
+}
+
+const INSTANCE_PROXY_HOST = "127.0.0.1"
+
+async function proxyWorkspaceRequest(args: {
+  request: FastifyRequest
+  reply: FastifyReply
+  workspaceManager: WorkspaceManager
+  logger: Logger
+  pathSuffix?: string
+}) {
+  const { request, reply, workspaceManager, logger } = args
+  const workspaceId = (request.params as { id: string }).id
+  const workspace = workspaceManager.get(workspaceId)
+
+  if (!workspace) {
+    reply.code(404).send({ error: "Workspace not found" })
+    return
+  }
+
+  const port = workspaceManager.getInstancePort(workspaceId)
+  if (!port) {
+    reply.code(502).send({ error: "Workspace instance is not ready" })
+    return
+  }
+
+  const normalizedSuffix = normalizeInstanceSuffix(args.pathSuffix)
+  const queryIndex = (request.raw.url ?? "").indexOf("?")
+  const search = queryIndex >= 0 ? (request.raw.url ?? "").slice(queryIndex) : ""
+  const targetUrl = `http://${INSTANCE_PROXY_HOST}:${port}${normalizedSuffix}${search}`
+
+  return reply.from(targetUrl, {
+    onError: (proxyReply, { error }) => {
+      logger.error({ err: error, workspaceId, targetUrl }, "Failed to proxy workspace request")
+      if (!proxyReply.sent) {
+        proxyReply.code(502).send({ error: "Workspace instance proxy failed" })
+      }
+    },
+  })
+}
+
+function normalizeInstanceSuffix(pathSuffix: string | undefined) {
+  if (!pathSuffix || pathSuffix === "/") {
+    return "/"
+  }
+  const trimmed = pathSuffix.replace(/^\/+/, "")
+  return trimmed.length === 0 ? "/" : `/${trimmed}`
+}
+
+function setupStaticUi(app: FastifyInstance, uiDir: string) {
+  if (!uiDir) {
+    app.log.warn("UI static directory not provided; API endpoints only")
+    return
+  }
+
+  if (!fs.existsSync(uiDir)) {
+    app.log.warn({ uiDir }, "UI static directory missing; API endpoints only")
+    return
+  }
+
+  app.register(fastifyStatic, {
+    root: uiDir,
+    prefix: "/",
+    decorateReply: false,
+  })
+
+  const indexPath = path.join(uiDir, "index.html")
+
+  app.setNotFoundHandler((request: FastifyRequest, reply: FastifyReply) => {
+    const url = request.raw.url ?? ""
+    if (isApiRequest(url)) {
+      reply.code(404).send({ message: "Not Found" })
+      return
+    }
+
+    if (fs.existsSync(indexPath)) {
+      reply.type("text/html").send(fs.readFileSync(indexPath, "utf-8"))
+    } else {
+      reply.code(404).send({ message: "UI bundle missing" })
+    }
+  })
+}
+
+function setupDevProxy(app: FastifyInstance, upstreamBase: string) {
+  app.log.info({ upstreamBase }, "Proxying UI requests to development server")
+  app.setNotFoundHandler((request: FastifyRequest, reply: FastifyReply) => {
+    const url = request.raw.url ?? ""
+    if (isApiRequest(url)) {
+      reply.code(404).send({ message: "Not Found" })
+      return
+    }
+    void proxyToDevServer(request, reply, upstreamBase)
+  })
+}
+
+async function proxyToDevServer(request: FastifyRequest, reply: FastifyReply, upstreamBase: string) {
+  try {
+    const targetUrl = new URL(request.raw.url ?? "/", upstreamBase)
+    const response = await fetch(targetUrl, {
+      method: request.method,
+      headers: buildProxyHeaders(request.headers),
+    })
+
+    response.headers.forEach((value, key) => {
+      reply.header(key, value)
+    })
+
+    reply.code(response.status)
+
+    if (!response.body || request.method === "HEAD") {
+      reply.send()
+      return
+    }
+
+    const buffer = Buffer.from(await response.arrayBuffer())
+    reply.send(buffer)
+  } catch (error) {
+    request.log.error({ err: error }, "Failed to proxy UI request to dev server")
+    if (!reply.sent) {
+      reply.code(502).send("UI dev server is unavailable")
+    }
+  }
+}
+
+function isApiRequest(rawUrl: string | null | undefined) {
+  if (!rawUrl) return false
+  const pathname = rawUrl.split("?")[0] ?? ""
+  return pathname === "/api" || pathname.startsWith("/api/")
+}
+
+function buildProxyHeaders(headers: FastifyRequest["headers"]): Record<string, string> {
+  const result: Record<string, string> = {}
+  for (const [key, value] of Object.entries(headers ?? {})) {
+    if (!value || key.toLowerCase() === "host") continue
+    result[key] = Array.isArray(value) ? value.join(",") : value
+  }
+  return result
+}

packages/cli/src/server/routes/config.ts

@@ -0,0 +1,68 @@
+import { FastifyInstance } from "fastify"
+import { z } from "zod"
+import { ConfigStore } from "../../config/store"
+import { BinaryRegistry } from "../../config/binaries"
+import { ConfigFileSchema, ConfigFileUpdateSchema } from "../../config/schema"
+
+interface RouteDeps {
+  configStore: ConfigStore
+  binaryRegistry: BinaryRegistry
+}
+
+const BinaryCreateSchema = z.object({
+  path: z.string(),
+  label: z.string().optional(),
+  makeDefault: z.boolean().optional(),
+})
+
+const BinaryUpdateSchema = z.object({
+  label: z.string().optional(),
+  makeDefault: z.boolean().optional(),
+})
+
+const BinaryValidateSchema = z.object({
+  path: z.string(),
+})
+
+export function registerConfigRoutes(app: FastifyInstance, deps: RouteDeps) {
+  app.get("/api/config/app", async () => deps.configStore.get())
+
+  app.put("/api/config/app", async (request) => {
+    const body = ConfigFileSchema.parse(request.body ?? {})
+    deps.configStore.update(body)
+    return deps.configStore.get()
+  })
+
+  app.patch("/api/config/app", async (request) => {
+    const body = ConfigFileUpdateSchema.parse(request.body ?? {})
+    deps.configStore.update(body)
+    return deps.configStore.get()
+  })
+
+  app.get("/api/config/binaries", async () => {
+    return { binaries: deps.binaryRegistry.list() }
+  })
+
+  app.post("/api/config/binaries", async (request, reply) => {
+    const body = BinaryCreateSchema.parse(request.body ?? {})
+    const binary = deps.binaryRegistry.create(body)
+    reply.code(201)
+    return { binary }
+  })
+
+  app.patch<{ Params: { id: string } }>("/api/config/binaries/:id", async (request) => {
+    const body = BinaryUpdateSchema.parse(request.body ?? {})
+    const binary = deps.binaryRegistry.update(request.params.id, body)
+    return { binary }
+  })
+
+  app.delete<{ Params: { id: string } }>("/api/config/binaries/:id", async (request, reply) => {
+    deps.binaryRegistry.remove(request.params.id)
+    reply.code(204)
+  })
+
+  app.post("/api/config/binaries/validate", async (request) => {
+    const body = BinaryValidateSchema.parse(request.body ?? {})
+    return deps.binaryRegistry.validatePath(body.path)
+  })
+}

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

@@ -0,0 +1,49 @@
+import { FastifyInstance } from "fastify"
+import { EventBus } from "../../events/bus"
+import { WorkspaceEventPayload } from "../../api-types"
+
+interface RouteDeps {
+  eventBus: EventBus
+  registerClient: (cleanup: () => void) => () => void
+}
+
+export function registerEventRoutes(app: FastifyInstance, deps: RouteDeps) {
+  app.get("/api/events", (request, reply) => {
+    const origin = request.headers.origin ?? "*"
+    reply.raw.setHeader("Access-Control-Allow-Origin", origin)
+    reply.raw.setHeader("Access-Control-Allow-Credentials", "true")
+    reply.raw.setHeader("Content-Type", "text/event-stream")
+    reply.raw.setHeader("Cache-Control", "no-cache")
+    reply.raw.setHeader("Connection", "keep-alive")
+    reply.raw.flushHeaders?.()
+    reply.hijack()
+
+    const send = (event: WorkspaceEventPayload) => {
+      reply.raw.write(`data: ${JSON.stringify(event)}\n\n`)
+    }
+
+    const unsubscribe = deps.eventBus.onEvent(send)
+    const heartbeat = setInterval(() => {
+      reply.raw.write(`:hb ${Date.now()}\n\n`)
+    }, 15000)
+
+    let closed = false
+    const close = () => {
+      if (closed) return
+      closed = true
+      clearInterval(heartbeat)
+      unsubscribe()
+      reply.raw.end?.()
+    }
+
+    const unregister = deps.registerClient(close)
+
+    const handleClose = () => {
+      close()
+      unregister()
+    }
+
+    request.raw.on("close", handleClose)
+    request.raw.on("error", handleClose)
+  })
+}

packages/cli/src/server/routes/filesystem.ts

@@ -0,0 +1,27 @@
+import { FastifyInstance } from "fastify"
+import { z } from "zod"
+import { FileSystemBrowser } from "../../filesystem/browser"
+
+interface RouteDeps {
+  fileSystemBrowser: FileSystemBrowser
+}
+
+const FilesystemQuerySchema = z.object({
+  path: z.string().optional(),
+  includeFiles: z.coerce.boolean().optional(),
+})
+
+export function registerFilesystemRoutes(app: FastifyInstance, deps: RouteDeps) {
+  app.get("/api/filesystem", async (request, reply) => {
+    const query = FilesystemQuerySchema.parse(request.query ?? {})
+
+    try {
+      return deps.fileSystemBrowser.browse(query.path, {
+        includeFiles: query.includeFiles,
+      })
+    } catch (error) {
+      reply.code(400)
+      return { error: (error as Error).message }
+    }
+  })
+}

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

@@ -0,0 +1,10 @@
+import { FastifyInstance } from "fastify"
+import { ServerMeta } from "../../api-types"
+
+interface RouteDeps {
+  serverMeta: ServerMeta
+}
+
+export function registerMetaRoutes(app: FastifyInstance, deps: RouteDeps) {
+  app.get("/api/meta", async () => deps.serverMeta)
+}

packages/cli/src/server/routes/storage.ts

@@ -0,0 +1,44 @@
+import { FastifyInstance } from "fastify"
+import { z } from "zod"
+import { InstanceStore } from "../../storage/instance-store"
+
+interface RouteDeps {
+  instanceStore: InstanceStore
+}
+
+const InstanceDataSchema = z.object({
+  messageHistory: z.array(z.string()).default([]),
+})
+
+export function registerStorageRoutes(app: FastifyInstance, deps: RouteDeps) {
+  app.get<{ Params: { id: string } }>("/api/storage/instances/:id", async (request, reply) => {
+    try {
+      const data = await deps.instanceStore.read(request.params.id)
+      return data
+    } catch (error) {
+      reply.code(500)
+      return { error: error instanceof Error ? error.message : "Failed to read instance data" }
+    }
+  })
+
+  app.put<{ Params: { id: string } }>("/api/storage/instances/:id", async (request, reply) => {
+    try {
+      const body = InstanceDataSchema.parse(request.body ?? {})
+      await deps.instanceStore.write(request.params.id, body)
+      reply.code(204)
+    } catch (error) {
+      reply.code(400)
+      return { error: error instanceof Error ? error.message : "Failed to save instance data" }
+    }
+  })
+
+  app.delete<{ Params: { id: string } }>("/api/storage/instances/:id", async (request, reply) => {
+    try {
+      await deps.instanceStore.delete(request.params.id)
+      reply.code(204)
+    } catch (error) {
+      reply.code(500)
+      return { error: error instanceof Error ? error.message : "Failed to delete instance data" }
+    }
+  })
+}

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

@@ -0,0 +1,80 @@
+import { FastifyInstance, FastifyReply } from "fastify"
+import { z } from "zod"
+import { WorkspaceManager } from "../../workspaces/manager"
+
+interface RouteDeps {
+  workspaceManager: WorkspaceManager
+}
+
+const WorkspaceCreateSchema = z.object({
+  path: z.string(),
+  name: z.string().optional(),
+})
+
+const WorkspaceFilesQuerySchema = z.object({
+  path: z.string().optional(),
+})
+
+const WorkspaceFileContentQuerySchema = z.object({
+  path: z.string(),
+})
+
+export function registerWorkspaceRoutes(app: FastifyInstance, deps: RouteDeps) {
+  app.get("/api/workspaces", async () => {
+    return deps.workspaceManager.list()
+  })
+
+  app.post("/api/workspaces", async (request, reply) => {
+    const body = WorkspaceCreateSchema.parse(request.body ?? {})
+    const workspace = await deps.workspaceManager.create(body.path, body.name)
+    reply.code(201)
+    return workspace
+  })
+
+  app.get<{ Params: { id: string } }>("/api/workspaces/:id", async (request, reply) => {
+    const workspace = deps.workspaceManager.get(request.params.id)
+    if (!workspace) {
+      reply.code(404)
+      return { error: "Workspace not found" }
+    }
+    return workspace
+  })
+
+  app.delete<{ Params: { id: string } }>("/api/workspaces/:id", async (request, reply) => {
+    await deps.workspaceManager.delete(request.params.id)
+    reply.code(204)
+  })
+
+  app.get<{
+    Params: { id: string }
+    Querystring: { path?: string }
+  }>("/api/workspaces/:id/files", async (request, reply) => {
+    try {
+      const query = WorkspaceFilesQuerySchema.parse(request.query ?? {})
+      return deps.workspaceManager.listFiles(request.params.id, query.path ?? ".")
+    } catch (error) {
+      return handleWorkspaceError(error, reply)
+    }
+  })
+
+  app.get<{
+    Params: { id: string }
+    Querystring: { path?: string }
+  }>("/api/workspaces/:id/files/content", async (request, reply) => {
+    try {
+      const query = WorkspaceFileContentQuerySchema.parse(request.query ?? {})
+      return deps.workspaceManager.readFile(request.params.id, query.path)
+    } catch (error) {
+      return handleWorkspaceError(error, reply)
+    }
+  })
+}
+
+function handleWorkspaceError(error: unknown, reply: FastifyReply) {
+  if (error instanceof Error && error.message === "Workspace not found") {
+    reply.code(404)
+    return { error: "Workspace not found" }
+  }
+  reply.code(400)
+  return { error: error instanceof Error ? error.message : "Unable to fulfill request" }
+}

packages/cli/src/storage/instance-store.ts

@@ -0,0 +1,63 @@
+import fs from "fs"
+import { promises as fsp } from "fs"
+import os from "os"
+import path from "path"
+import type { InstanceData } from "../api-types"
+
+const DEFAULT_INSTANCE_DATA: InstanceData = {
+  messageHistory: [],
+}
+
+export class InstanceStore {
+  private readonly instancesDir: string
+
+  constructor(baseDir = path.join(os.homedir(), ".config", "codenomad", "instances")) {
+    this.instancesDir = baseDir
+    fs.mkdirSync(this.instancesDir, { recursive: true })
+  }
+
+  async read(id: string): Promise<InstanceData> {
+    try {
+      const filePath = this.resolvePath(id)
+      const content = await fsp.readFile(filePath, "utf-8")
+      const parsed = JSON.parse(content)
+      return { ...DEFAULT_INSTANCE_DATA, ...parsed }
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code === "ENOENT") {
+        return DEFAULT_INSTANCE_DATA
+      }
+      throw error
+    }
+  }
+
+  async write(id: string, data: InstanceData): Promise<void> {
+    const filePath = this.resolvePath(id)
+    await fsp.mkdir(path.dirname(filePath), { recursive: true })
+    await fsp.writeFile(filePath, JSON.stringify(data, null, 2), "utf-8")
+  }
+
+  async delete(id: string): Promise<void> {
+    try {
+      const filePath = this.resolvePath(id)
+      await fsp.unlink(filePath)
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== "ENOENT") {
+        throw error
+      }
+    }
+  }
+
+  private resolvePath(id: string): string {
+    const filename = this.sanitizeId(id)
+    return path.join(this.instancesDir, `${filename}.json`)
+  }
+
+  private sanitizeId(id: string): string {
+    return id
+      .replace(/[\\/]/g, "_")
+      .replace(/[^a-zA-Z0-9_.-]/g, "_")
+      .replace(/_{2,}/g, "_")
+      .replace(/^_|_$/g, "")
+      .toLowerCase()
+  }
+}

packages/cli/src/workspaces/manager.ts

@@ -0,0 +1,173 @@
+import path from "path"
+import { EventBus } from "../events/bus"
+import { ConfigStore } from "../config/store"
+import { BinaryRegistry } from "../config/binaries"
+import { FileSystemBrowser } from "../filesystem/browser"
+import { WorkspaceDescriptor, WorkspaceFileResponse, FileSystemEntry } from "../api-types"
+import { WorkspaceRuntime } from "./runtime"
+import { Logger } from "../logger"
+
+interface WorkspaceManagerOptions {
+  rootDir: string
+  configStore: ConfigStore
+  binaryRegistry: BinaryRegistry
+  eventBus: EventBus
+  logger: Logger
+}
+
+interface WorkspaceRecord extends WorkspaceDescriptor {}
+
+export class WorkspaceManager {
+  private readonly workspaces = new Map<string, WorkspaceRecord>()
+  private readonly runtime: WorkspaceRuntime
+
+  constructor(private readonly options: WorkspaceManagerOptions) {
+    this.runtime = new WorkspaceRuntime(this.options.eventBus, this.options.logger)
+  }
+
+  list(): WorkspaceDescriptor[] {
+    return Array.from(this.workspaces.values())
+  }
+
+  get(id: string): WorkspaceDescriptor | undefined {
+    return this.workspaces.get(id)
+  }
+
+  getInstancePort(id: string): number | undefined {
+    return this.workspaces.get(id)?.port
+  }
+
+  listFiles(workspaceId: string, relativePath = "."): FileSystemEntry[] {
+    const workspace = this.requireWorkspace(workspaceId)
+    const browser = new FileSystemBrowser({ rootDir: workspace.path })
+    return browser.list(relativePath)
+  }
+
+  readFile(workspaceId: string, relativePath: string): WorkspaceFileResponse {
+    const workspace = this.requireWorkspace(workspaceId)
+    const browser = new FileSystemBrowser({ rootDir: workspace.path })
+    const contents = browser.readFile(relativePath)
+    return {
+      workspaceId,
+      relativePath,
+      contents,
+    }
+  }
+
+  async create(folder: string, name?: string): Promise<WorkspaceDescriptor> {
+    const id = `${Date.now().toString(36)}`
+    const binary = this.options.binaryRegistry.resolveDefault()
+    const workspacePath = path.isAbsolute(folder) ? folder : path.resolve(this.options.rootDir, folder)
+
+    this.options.logger.info({ workspaceId: id, folder: workspacePath, binary: binary.path }, "Creating workspace")
+
+    const proxyPath = `/workspaces/${id}/instance`
+
+    const descriptor: WorkspaceRecord = {
+      id,
+      path: workspacePath,
+      name,
+      status: "starting",
+      proxyPath,
+      binaryId: binary.id,
+      binaryLabel: binary.label,
+      binaryVersion: binary.version,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    }
+
+    this.workspaces.set(id, descriptor)
+    this.options.eventBus.publish({ type: "workspace.created", workspace: descriptor })
+
+    const environment = this.options.configStore.get().preferences.environmentVariables ?? {}
+
+    try {
+      const { pid, port } = await this.runtime.launch({
+        workspaceId: id,
+        folder: workspacePath,
+        binaryPath: binary.path,
+        environment,
+        onExit: (info) => this.handleProcessExit(info.workspaceId, info),
+      })
+
+      descriptor.pid = pid
+      descriptor.port = port
+      descriptor.status = "ready"
+      descriptor.updatedAt = new Date().toISOString()
+      this.options.eventBus.publish({ type: "workspace.started", workspace: descriptor })
+      this.options.logger.info({ workspaceId: id, port }, "Workspace ready")
+      return descriptor
+    } catch (error) {
+      descriptor.status = "error"
+      descriptor.error = error instanceof Error ? error.message : String(error)
+      descriptor.updatedAt = new Date().toISOString()
+      this.options.eventBus.publish({ type: "workspace.error", workspace: descriptor })
+      this.options.logger.error({ workspaceId: id, err: error }, "Workspace failed to start")
+      throw error
+    }
+  }
+
+  async delete(id: string): Promise<WorkspaceDescriptor | undefined> {
+    const workspace = this.workspaces.get(id)
+    if (!workspace) return undefined
+
+    this.options.logger.info({ workspaceId: id }, "Stopping workspace")
+    const wasRunning = Boolean(workspace.pid)
+    if (wasRunning) {
+      await this.runtime.stop(id).catch((error) => {
+        this.options.logger.warn({ workspaceId: id, err: error }, "Failed to stop workspace process cleanly")
+      })
+    }
+
+    this.workspaces.delete(id)
+    if (!wasRunning) {
+      this.options.eventBus.publish({ type: "workspace.stopped", workspaceId: id })
+    }
+    return workspace
+  }
+
+  async shutdown() {
+    this.options.logger.info("Shutting down all workspaces")
+    for (const [id, workspace] of this.workspaces) {
+      if (workspace.pid) {
+        this.options.logger.info({ workspaceId: id }, "Stopping workspace during shutdown")
+        await this.runtime.stop(id).catch((error) => {
+          this.options.logger.error({ workspaceId: id, err: error }, "Failed to stop workspace during shutdown")
+        })
+      } else {
+        this.options.logger.debug({ workspaceId: id }, "Workspace already stopped")
+      }
+    }
+    this.workspaces.clear()
+    this.options.logger.info("All workspaces cleared")
+  }
+
+  private requireWorkspace(id: string): WorkspaceRecord {
+    const workspace = this.workspaces.get(id)
+    if (!workspace) {
+      throw new Error("Workspace not found")
+    }
+    return workspace
+  }
+
+  private handleProcessExit(workspaceId: string, info: { code: number | null; requested: boolean }) {
+    const workspace = this.workspaces.get(workspaceId)
+    if (!workspace) return
+
+    this.options.logger.info({ workspaceId, ...info }, "Workspace process exited")
+
+    workspace.pid = undefined
+    workspace.port = undefined
+    workspace.updatedAt = new Date().toISOString()
+
+    if (info.requested || info.code === 0) {
+      workspace.status = "stopped"
+      workspace.error = undefined
+      this.options.eventBus.publish({ type: "workspace.stopped", workspaceId })
+    } else {
+      workspace.status = "error"
+      workspace.error = `Process exited with code ${info.code}`
+      this.options.eventBus.publish({ type: "workspace.error", workspace })
+    }
+  }
+}

packages/cli/src/workspaces/runtime.ts

@@ -0,0 +1,214 @@
+import { ChildProcess, spawn } from "child_process"
+import { existsSync, statSync } from "fs"
+import path from "path"
+import { EventBus } from "../events/bus"
+import { LogLevel, WorkspaceLogEntry } from "../api-types"
+import { Logger } from "../logger"
+
+interface LaunchOptions {
+  workspaceId: string
+  folder: string
+  binaryPath: string
+  environment?: Record<string, string>
+  onExit?: (info: ProcessExitInfo) => void
+}
+
+interface ProcessExitInfo {
+  workspaceId: string
+  code: number | null
+  signal: NodeJS.Signals | null
+  requested: boolean
+}
+
+interface ManagedProcess {
+  child: ChildProcess
+  requestedStop: boolean
+}
+
+export class WorkspaceRuntime {
+  private processes = new Map<string, ManagedProcess>()
+
+  constructor(private readonly eventBus: EventBus, private readonly logger: Logger) {}
+
+  async launch(options: LaunchOptions): Promise<{ pid: number; port: number }> {
+    this.validateFolder(options.folder)
+
+    const args = ["serve", "--port", "0", "--print-logs", "--log-level", "DEBUG"]
+    const env = { ...process.env, ...(options.environment ?? {}) }
+
+    return new Promise((resolve, reject) => {
+      this.logger.info({ workspaceId: options.workspaceId, folder: options.folder }, "Launching OpenCode process")
+      const child = spawn(options.binaryPath, args, {
+        cwd: options.folder,
+        env,
+        stdio: ["ignore", "pipe", "pipe"],
+      })
+
+      const managed: ManagedProcess = { child, requestedStop: false }
+      this.processes.set(options.workspaceId, managed)
+
+      let stdoutBuffer = ""
+      let stderrBuffer = ""
+      let portFound = false
+
+      let warningTimer: NodeJS.Timeout | null = null
+
+      const startWarningTimer = () => {
+        warningTimer = setInterval(() => {
+          this.logger.warn({ workspaceId: options.workspaceId }, "Workspace runtime has not reported a port yet")
+        }, 10000)
+      }
+
+      const stopWarningTimer = () => {
+        if (warningTimer) {
+          clearInterval(warningTimer)
+          warningTimer = null
+        }
+      }
+
+      startWarningTimer()
+
+      const cleanupStreams = () => {
+        stopWarningTimer()
+        child.stdout?.removeAllListeners()
+        child.stderr?.removeAllListeners()
+      }
+
+      const handleExit = (code: number | null, signal: NodeJS.Signals | null) => {
+        this.logger.info({ workspaceId: options.workspaceId, code, signal }, "OpenCode process exited")
+        this.processes.delete(options.workspaceId)
+        cleanupStreams()
+        child.removeListener("error", handleError)
+        child.removeListener("exit", handleExit)
+        if (!portFound) {
+          const reason = stderrBuffer || `Process exited with code ${code}`
+          reject(new Error(reason))
+        } else {
+          options.onExit?.({ workspaceId: options.workspaceId, code, signal, requested: managed.requestedStop })
+        }
+      }
+
+      const handleError = (error: Error) => {
+        cleanupStreams()
+        child.removeListener("exit", handleExit)
+        this.processes.delete(options.workspaceId)
+        this.logger.error({ workspaceId: options.workspaceId, err: error }, "Workspace runtime error")
+        reject(error)
+      }
+
+      child.on("error", handleError)
+      child.on("exit", handleExit)
+
+      child.stdout?.on("data", (data: Buffer) => {
+        const text = data.toString()
+        stdoutBuffer += text
+        const lines = stdoutBuffer.split("\n")
+        stdoutBuffer = lines.pop() ?? ""
+
+        for (const line of lines) {
+          if (!line.trim()) continue
+          this.emitLog(options.workspaceId, "info", line)
+
+          if (!portFound) {
+            const portMatch = line.match(/opencode server listening on http:\/\/.+:(\d+)/i)
+            if (portMatch) {
+              portFound = true
+              cleanupStreams()
+              child.removeListener("error", handleError)
+              const port = parseInt(portMatch[1], 10)
+              this.logger.info({ workspaceId: options.workspaceId, port }, "Workspace runtime allocated port")
+              resolve({ pid: child.pid!, port })
+            }
+          }
+        }
+      })
+
+      child.stderr?.on("data", (data: Buffer) => {
+        const text = data.toString()
+        stderrBuffer += text
+        const lines = stderrBuffer.split("\n")
+        stderrBuffer = lines.pop() ?? ""
+
+        for (const line of lines) {
+          if (!line.trim()) continue
+          this.emitLog(options.workspaceId, "error", line)
+        }
+      })
+    })
+  }
+
+  async stop(workspaceId: string): Promise<void> {
+    const managed = this.processes.get(workspaceId)
+    if (!managed) return
+
+    managed.requestedStop = true
+    const child = managed.child
+    this.logger.info({ workspaceId }, "Stopping OpenCode process")
+
+    await new Promise<void>((resolve, reject) => {
+      const cleanup = () => {
+        child.removeListener("exit", onExit)
+        child.removeListener("error", onError)
+      }
+
+      const onExit = () => {
+        cleanup()
+        resolve()
+      }
+      const onError = (error: Error) => {
+        cleanup()
+        reject(error)
+      }
+
+      const resolveIfAlreadyExited = () => {
+        if (child.exitCode !== null || child.signalCode !== null) {
+          this.logger.debug({ workspaceId, exitCode: child.exitCode, signal: child.signalCode }, "Process already exited")
+          cleanup()
+          resolve()
+          return true
+        }
+        return false
+      }
+
+      child.once("exit", onExit)
+      child.once("error", onError)
+
+      if (resolveIfAlreadyExited()) {
+        return
+      }
+
+      this.logger.debug({ workspaceId }, "Sending SIGTERM to workspace process")
+      child.kill("SIGTERM")
+      setTimeout(() => {
+        if (!child.killed) {
+          this.logger.warn({ workspaceId }, "Process did not stop after SIGTERM, force killing")
+          child.kill("SIGKILL")
+        } else {
+          this.logger.debug({ workspaceId }, "Workspace process stopped gracefully before SIGKILL timeout")
+        }
+      }, 2000)
+    })
+  }
+
+  private emitLog(workspaceId: string, level: LogLevel, message: string) {
+    const entry: WorkspaceLogEntry = {
+      workspaceId,
+      timestamp: new Date().toISOString(),
+      level,
+      message: message.trim(),
+    }
+
+    this.eventBus.publish({ type: "workspace.log", entry })
+  }
+
+  private validateFolder(folder: string) {
+    const resolved = path.resolve(folder)
+    if (!existsSync(resolved)) {
+      throw new Error(`Folder does not exist: ${resolved}`)
+    }
+    const stats = statSync(resolved)
+    if (!stats.isDirectory()) {
+      throw new Error(`Path is not a directory: ${resolved}`)
+    }
+  }
+}

packages/cli/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["dist", "node_modules"]
+}

packages/electron-app/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+release/
+.vite/

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

@@ -2,6 +2,11 @@ import { defineConfig, externalizeDepsPlugin } from "electron-vite"
 import solid from "vite-plugin-solid"
 import { resolve } from "path"
 
+const uiRoot = resolve(__dirname, "../ui")
+const uiSrc = resolve(uiRoot, "src")
+const uiRendererRoot = resolve(uiRoot, "src/renderer")
+const uiRendererEntry = resolve(uiRendererRoot, "index.html")
+
 export default defineConfig({
   main: {
     plugins: [externalizeDepsPlugin()],
@@ -33,21 +38,24 @@ export default defineConfig({
     },
   },
   renderer: {
-    root: "./src/renderer",
+    root: uiRendererRoot,
     plugins: [solid()],
     css: {
-      postcss: "./postcss.config.js",
+      postcss: resolve(uiRoot, "postcss.config.js"),
     },
     resolve: {
       alias: {
-        "@": resolve(__dirname, "./src"),
+        "@": uiSrc,
       },
     },
     server: {
       port: 3000,
     },
     build: {
-      outDir: "dist/renderer",
+      outDir: resolve(__dirname, "dist/renderer"),
+      rollupOptions: {
+        input: uiRendererEntry,
+      },
     },
   },
 })

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

@@ -1,7 +1,7 @@
-import { spawn, ChildProcess } from "child_process"
+import { spawn, execSync, ChildProcess } from "child_process"
 import { app, BrowserWindow } from "electron"
 import { existsSync, statSync } from "fs"
-import { execSync } from "child_process"
+import { buildUserShellCommand, getUserShellEnv, runUserShellCommandSync, supportsUserShell } from "./user-shell"
 
 export interface ProcessInfo {
   pid: number
@@ -57,17 +57,13 @@ class ProcessManager {
     environmentVariables?: Record<string, string>,
   ): Promise<ProcessInfo> {
     this.validateFolder(folder)
-    const actualBinaryPath =
-      binaryPath && binaryPath !== "opencode" ? this.validateCustomBinary(binaryPath) : this.validateOpenCodeBinary()
+    const useUserShell = supportsUserShell()
+    const logAttempt = (message: string) => {
+      console.info(`[ProcessManager] ${message}`)
+      this.sendLog(instanceId, "debug", message)
+    }
 
-    this.sendLog(
-      instanceId,
-      "info",
-      `Starting OpenCode server for ${folder} using ${binaryPath || "opencode"} (${actualBinaryPath})...`,
-    )
-
-    // Merge environment variables with process environment
-    const env = { ...process.env }
+    const env = useUserShell ? getUserShellEnv() : { ...process.env }
     if (environmentVariables) {
       Object.assign(env, environmentVariables)
       this.sendLog(
@@ -82,14 +78,35 @@ class ProcessManager {
       }
     }
 
+    let targetBinary: string
+    if (!binaryPath || binaryPath === "opencode") {
+      targetBinary = useUserShell ? "opencode" : this.validateOpenCodeBinary(logAttempt)
+    } else {
+      targetBinary = this.validateCustomBinary(binaryPath, logAttempt)
+    }
+
+    const spawnCommand = useUserShell
+      ? this.buildShellServeCommand(targetBinary)
+      : { command: targetBinary, args: this.buildServeArgs() }
+
+    const launchDetail = `${spawnCommand.command} ${spawnCommand.args.join(" ")}`.trim()
+    this.sendLog(instanceId, "debug", `Launching process with: ${launchDetail}`)
+
+    this.sendLog(
+      instanceId,
+      "info",
+      `Starting OpenCode server for ${folder} using ${targetBinary}...`,
+    )
+
     return new Promise((resolve, reject) => {
-      const child = spawn(actualBinaryPath, ["serve", "--port", "0", "--print-logs", "--log-level", "DEBUG"], {
+      const child = spawn(spawnCommand.command, spawnCommand.args, {
         cwd: folder,
         stdio: ["ignore", "pipe", "pipe"],
         env,
         shell: false,
       })
 
+
       const timeout = setTimeout(() => {
         child.kill("SIGKILL")
         this.sendLog(instanceId, "error", "Server startup timeout (10s exceeded)")
@@ -129,7 +146,7 @@ class ProcessManager {
             }
 
             this.processes.set(child.pid!, meta)
-            resolve({ pid: child.pid!, port, binaryPath: actualBinaryPath })
+            resolve({ pid: child.pid!, port, binaryPath: targetBinary })
           }
 
           const meta = this.processes.get(child.pid!)
@@ -236,20 +253,45 @@ class ProcessManager {
     }
   }
 
-  private validateOpenCodeBinary(): string {
-    const command = process.platform === "win32" ? "where opencode" : "which opencode"
+  private validateOpenCodeBinary(logAttempt?: (message: string) => void): string {
+    const log = logAttempt ?? ((message: string) => console.info(`[ProcessManager] ${message}`))
+
+    if (process.platform === "win32") {
+      log("Checking PATH via 'where opencode'")
+      return this.resolveBinaryViaLocator("where opencode", log)
+    }
+
+    const shellCheck = buildUserShellCommand("command -v opencode")
+    const shellPreview = [shellCheck.command, ...shellCheck.args].join(" ")
+    log(`Checking PATH via shell: ${shellPreview}`)
+
     try {
-      const output = execSync(command, { stdio: "pipe", encoding: "utf-8" })
-      const paths = output.trim().split("\n")
-      return paths[0].trim()
-    } catch {
-      throw new Error(
-        "opencode binary not found in PATH. Please install OpenCode CLI first: npm install -g @opencode/cli",
-      )
+      const resolved = runUserShellCommandSync("command -v opencode")
+      const path = this.pickFirstPath(resolved)
+      if (path) {
+        log(`Shell located opencode at ${path}`)
+        return path
+      }
+      throw new Error("Empty result from shell lookup")
+    } catch (shellError) {
+      const message = shellError instanceof Error ? shellError.message : String(shellError)
+      log(`Shell lookup failed: ${message}`)
+      try {
+        log("Fallback to 'which opencode'")
+        return this.resolveBinaryViaLocator("which opencode", log)
+      } catch (locatorError) {
+        const locatorMessage = locatorError instanceof Error ? locatorError.message : String(locatorError)
+        log(`Locator fallback failed: ${locatorMessage}`)
+        throw new Error(
+          "opencode binary not found in PATH. Please install OpenCode CLI first: npm install -g @opencode/cli",
+        )
+      }
     }
   }
 
-  private validateCustomBinary(binaryPath: string): string {
+  private validateCustomBinary(binaryPath: string, log?: (message: string) => void): string {
+    log?.(`Validating custom binary at ${binaryPath}`)
+
     if (!existsSync(binaryPath)) {
       throw new Error(`OpenCode binary not found: ${binaryPath}`)
     }
@@ -270,6 +312,36 @@ class ProcessManager {
 
     return binaryPath
   }
+
+  private resolveBinaryViaLocator(command: string, log?: (message: string) => void): string {
+    log?.(`Running locator command: ${command}`)
+    const output = execSync(command, { stdio: "pipe", encoding: "utf-8" })
+    log?.(`Locator output: ${output.trim() || "<empty>"}`)
+    const path = this.pickFirstPath(output)
+    if (!path) {
+      throw new Error("opencode binary not found in PATH")
+    }
+    return path
+  }
+
+  private pickFirstPath(output: string): string | null {
+    const line = output
+      .split("\n")
+      .map((entry) => entry.trim())
+      .find((entry) => entry.length > 0)
+    return line ?? null
+  }
+
+  private buildServeArgs(): string[] {
+    return ["serve", "--port", "0", "--print-logs", "--log-level", "DEBUG"]
+  }
+
+  private buildShellServeCommand(binaryPath: string): { command: string; args: string[] } {
+    const args = this.buildServeArgs()
+      .map((arg) => JSON.stringify(arg))
+      .join(" ")
+    return buildUserShellCommand(`exec ${JSON.stringify(binaryPath)} ${args}`)
+  }
 }
 
 export const processManager = new ProcessManager()

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

@@ -3,7 +3,7 @@ import { join } from "path"
 import { readFile, writeFile, mkdir, unlink, stat } from "fs/promises"
 import { existsSync } from "fs"
 
-const CONFIG_DIR = join(app.getPath("home"), ".config", "opencode-client")
+const CONFIG_DIR = join(app.getPath("home"), ".config", "codenomad")
 const CONFIG_FILE = join(CONFIG_DIR, "config.json")
 const INSTANCES_DIR = join(CONFIG_DIR, "instances")
 

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

@@ -0,0 +1,139 @@
+import { spawn, spawnSync } from "child_process"
+import path from "path"
+
+interface ShellCommand {
+  command: string
+  args: string[]
+}
+
+const isWindows = process.platform === "win32"
+
+function getDefaultShellPath(): string {
+  if (process.env.SHELL && process.env.SHELL.trim().length > 0) {
+    return process.env.SHELL
+  }
+
+  if (process.platform === "darwin") {
+    return "/bin/zsh"
+  }
+
+  return "/bin/bash"
+}
+
+function wrapCommandForShell(command: string, shellPath: string): string {
+  const shellName = path.basename(shellPath)
+
+  if (shellName.includes("bash")) {
+    return 'if [ -f ~/.bashrc ]; then source ~/.bashrc >/dev/null 2>&1; fi; ' + command
+  }
+
+  if (shellName.includes("zsh")) {
+    return 'if [ -f ~/.zshrc ]; then source ~/.zshrc >/dev/null 2>&1; fi; ' + command
+  }
+
+  return command
+}
+
+function buildShellArgs(shellPath: string): string[] {
+  const shellName = path.basename(shellPath)
+  if (shellName.includes("zsh")) {
+    return ["-l", "-i", "-c"]
+  }
+  return ["-l", "-c"]
+}
+
+function sanitizeShellEnv(env: NodeJS.ProcessEnv): NodeJS.ProcessEnv {
+  const cleaned = { ...env }
+  delete cleaned.npm_config_prefix
+  delete cleaned.NPM_CONFIG_PREFIX
+  return cleaned
+}
+
+export function supportsUserShell(): boolean {
+  return !isWindows
+}
+
+export function buildUserShellCommand(userCommand: string): ShellCommand {
+  if (!supportsUserShell()) {
+    throw new Error("User shell invocation is only supported on POSIX platforms")
+  }
+
+  const shellPath = getDefaultShellPath()
+  const script = wrapCommandForShell(userCommand, shellPath)
+  const args = buildShellArgs(shellPath)
+
+  return {
+    command: shellPath,
+    args: [...args, script],
+  }
+}
+
+export function getUserShellEnv(): NodeJS.ProcessEnv {
+  if (!supportsUserShell()) {
+    throw new Error("User shell invocation is only supported on POSIX platforms")
+  }
+  return sanitizeShellEnv(process.env)
+}
+
+export function runUserShellCommand(userCommand: string, timeoutMs = 5000): Promise<string> {
+  if (!supportsUserShell()) {
+    return Promise.reject(new Error("User shell invocation is only supported on POSIX platforms"))
+  }
+
+  const { command, args } = buildUserShellCommand(userCommand)
+  const env = getUserShellEnv()
+
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, {
+      stdio: ["ignore", "pipe", "pipe"],
+      env,
+    })
+
+    let stdout = ""
+    let stderr = ""
+
+    const timeout = setTimeout(() => {
+      child.kill("SIGTERM")
+      reject(new Error(`Shell command timed out after ${timeoutMs}ms`))
+    }, timeoutMs)
+
+    child.stdout?.on("data", (data) => {
+      stdout += data.toString()
+    })
+
+    child.stderr?.on("data", (data) => {
+      stderr += data.toString()
+    })
+
+    child.on("error", (error) => {
+      clearTimeout(timeout)
+      reject(error)
+    })
+
+    child.on("close", (code) => {
+      clearTimeout(timeout)
+      if (code === 0) {
+        resolve(stdout.trim())
+      } else {
+        reject(new Error(stderr.trim() || `Shell command exited with code ${code}`))
+      }
+    })
+  })
+}
+
+export function runUserShellCommandSync(userCommand: string): string {
+  if (!supportsUserShell()) {
+    throw new Error("User shell invocation is only supported on POSIX platforms")
+  }
+
+  const { command, args } = buildUserShellCommand(userCommand)
+  const env = getUserShellEnv()
+  const result = spawnSync(command, args, { encoding: "utf-8", env })
+
+  if (result.status !== 0) {
+    const stderr = (result.stderr || "").toString().trim()
+    throw new Error(stderr || "Shell command failed")
+  }
+
+  return (result.stdout || "").toString().trim()
+}

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

@@ -1,38 +1,5 @@
 import { contextBridge, ipcRenderer } from "electron"
-
-export interface ElectronAPI {
-  selectFolder: () => Promise<string | null>
-  createInstance: (
-    id: string,
-    folder: string,
-    binaryPath?: string,
-    environmentVariables?: Record<string, string>,
-  ) => Promise<{ id: string; port: number; pid: number; binaryPath: string }>
-  stopInstance: (pid: number) => Promise<void>
-  onInstanceStarted: (callback: (data: { id: string; port: number; pid: number; binaryPath: string }) => void) => void
-  onInstanceError: (callback: (data: { id: string; error: string }) => void) => void
-  onInstanceStopped: (callback: (data: { id: string }) => void) => void
-  onInstanceLog: (
-    callback: (data: {
-      id: string
-      entry: { timestamp: number; level: "info" | "error" | "warn" | "debug"; message: string }
-    }) => void,
-  ) => void
-  onNewInstance: (callback: () => void) => void
-  scanDirectory: (workspaceFolder: string) => Promise<string[]>
-  // OpenCode binary operations
-  selectOpenCodeBinary: () => Promise<string | null>
-  validateOpenCodeBinary: (path: string) => Promise<{ valid: boolean; version?: string; error?: string }>
-  // Storage operations
-  getConfigPath: () => Promise<string>
-  getInstancesDir: () => Promise<string>
-  readConfigFile: () => Promise<string>
-  writeConfigFile: (content: string) => Promise<void>
-  readInstanceFile: (instanceId: string) => Promise<string>
-  writeInstanceFile: (instanceId: string, content: string) => Promise<void>
-  deleteInstanceFile: (instanceId: string) => Promise<void>
-  onConfigChanged: (callback: () => void) => () => void
-}
+import type { ElectronAPI } from "../../../ui/src/types/electron-api"
 
 const electronAPI: ElectronAPI = {
   selectFolder: () => ipcRenderer.invoke("dialog:selectFolder"),

packages/electron-app/electron/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.node.json",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "noEmit": true
   },

packages/electron-app/package.json

@@ -0,0 +1,124 @@
+{
+  "name": "@codenomad/electron-app",
+  "version": "0.1.2",
+  "description": "CodeNomad - AI coding assistant",
+  "author": {
+    "name": "Shantur Rathore",
+    "email": "codenomad@shantur.com"
+  },
+  "type": "module",
+  "main": "dist/main/main.js",
+  "scripts": {
+    "dev": "electron-vite dev",
+    "dev:electron": "NODE_ENV=development electron .",
+    "build": "electron-vite build",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "preview": "electron-vite preview",
+    "build:binaries": "node scripts/build.js",
+    "build:mac": "node scripts/build.js mac",
+    "build:mac-x64": "node scripts/build.js mac-x64",
+    "build:mac-arm64": "node scripts/build.js mac-arm64",
+    "build:win": "node scripts/build.js win",
+    "build:win-arm64": "node scripts/build.js win-arm64",
+    "build:linux": "node scripts/build.js linux",
+    "build:linux-arm64": "node scripts/build.js linux-arm64",
+    "build:linux-rpm": "node scripts/build.js linux-rpm",
+    "build:all": "node scripts/build.js all",
+    "package:mac": "electron-builder --mac",
+    "package:win": "electron-builder --win",
+    "package:linux": "electron-builder --linux"
+  },
+  "dependencies": {
+    "@codenomad/ui": "file:../ui",
+    "ignore": "7.0.5"
+  },
+  "devDependencies": {
+    "7zip-bin": "^5.2.0",
+    "app-builder-bin": "^4.2.0",
+    "electron": "39.0.0",
+    "electron-builder": "^24.0.0",
+    "electron-vite": "4.0.1",
+    "png2icons": "^2.0.1",
+    "pngjs": "^7.0.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-solid": "^2.10.0"
+  },
+  "build": {
+    "appId": "ai.opencode.client",
+    "productName": "CodeNomad",
+    "directories": {
+      "output": "release",
+      "buildResources": "electron/resources"
+    },
+    "files": [
+      "dist/**/*",
+      "package.json"
+    ],
+    "mac": {
+      "category": "public.app-category.developer-tools",
+      "target": [
+        {
+          "target": "dmg",
+          "arch": ["x64", "arm64", "universal"]
+        },
+        {
+          "target": "zip",
+          "arch": ["x64", "arm64", "universal"]
+        }
+      ],
+      "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
+      "icon": "electron/resources/icon.icns"
+    },
+    "dmg": {
+      "contents": [
+        { "x": 130, "y": 220 },
+        { "x": 410, "y": 220, "type": "link", "path": "/Applications" }
+      ]
+    },
+    "win": {
+      "target": [
+        {
+          "target": "nsis",
+          "arch": ["x64", "arm64"]
+        },
+        {
+          "target": "zip",
+          "arch": ["x64", "arm64"]
+        }
+      ],
+      "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
+      "icon": "electron/resources/icon.ico"
+    },
+    "nsis": {
+      "oneClick": false,
+      "allowToChangeInstallationDirectory": true,
+      "createDesktopShortcut": true,
+      "createStartMenuShortcut": true
+    },
+    "linux": {
+      "target": [
+        {
+          "target": "AppImage",
+          "arch": ["x64", "arm64"]
+        },
+        {
+          "target": "deb",
+          "arch": ["x64", "arm64"]
+        },
+        {
+          "target": "rpm",
+          "arch": ["x64", "arm64"]
+        },
+        {
+          "target": "tar.gz",
+          "arch": ["x64", "arm64"]
+        }
+      ],
+      "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
+      "category": "Development",
+      "icon": "electron/resources/icon.png"
+    }
+  },
+  "private": true
+}

packages/electron-app/scripts/build.js

@@ -41,6 +41,10 @@ const platforms = {
     args: ["--linux", "--arm64"],
     description: "Linux (ARM64)",
   },
+  "linux-rpm": {
+    args: ["--linux", "rpm", "--x64", "--arm64"],
+    description: "Linux RPM packages (x64 & ARM64)",
+  },
   all: {
     args: ["--mac", "--win", "--linux", "--x64", "--arm64"],
     description: "All platforms (macOS, Windows, Linux)",
@@ -52,6 +56,7 @@ function run(command, args, options = {}) {
     const spawnOptions = {
       cwd: appDir,
       stdio: "inherit",
+      shell: process.platform === "win32",
       ...options,
       env: { ...process.env, NODE_PATH: nodeModulesPath, ...(options.env || {}) },
     }
@@ -97,7 +102,7 @@ async function build(platform) {
       throw new Error("dist/ directory not found. Build failed.")
     }
 
-    await run(npxCmd, ["electron-builder", ...config.args])
+    await run(npxCmd, ["electron-builder", "--publish=never", ...config.args])
 
     console.log("\n✅ Build complete!")
     console.log(`📁 Binaries available in: ${join(appDir, "release")}\n`)

packages/ui/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+.vite/

packages/ui/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@codenomad/ui",
+  "version": "0.1.2",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  },
+  "dependencies": {
+    "@git-diff-view/solid": "^0.0.8",
+    "@kobalte/core": "0.13.11",
+    "@opencode-ai/sdk": "1.0.68",
+    "@solidjs/router": "^0.13.0",
+    "github-markdown-css": "^5.8.1",
+    "lucide-solid": "^0.300.0",
+    "marked": "^12.0.0",
+    "shiki": "^3.13.0",
+    "solid-js": "^1.8.0",
+    "solid-toast": "^0.5.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "10.4.21",
+    "postcss": "8.5.6",
+    "tailwindcss": "3",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-solid": "^2.10.0"
+  }
+}

packages/ui/postcss.config.js

@@ -0,0 +1,11 @@
+import { fileURLToPath } from "url"
+import { dirname, resolve } from "path"
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+export default {
+  plugins: {
+    tailwindcss: { config: resolve(__dirname, "tailwind.config.js") },
+    autoprefixer: {},
+  },
+}

packages/ui/src/App.tsx

@@ -0,0 +1,337 @@
+import { Component, Show, createMemo, createEffect, createSignal } from "solid-js"
+import { Dialog } from "@kobalte/core/dialog"
+import { Toaster } from "solid-toast"
+import FolderSelectionView from "./components/folder-selection-view"
+import InstanceTabs from "./components/instance-tabs"
+import InstanceDisconnectedModal from "./components/instance-disconnected-modal"
+import InstanceShell from "./components/instance/instance-shell"
+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 {
+  hasInstances,
+  isSelectingFolder,
+  setIsSelectingFolder,
+  setHasInstances,
+  showFolderSelection,
+  setShowFolderSelection,
+} from "./stores/ui"
+import { useConfig } from "./stores/preferences"
+import {
+  createInstance,
+  instances,
+  activeInstanceId,
+  setActiveInstanceId,
+  stopInstance,
+  getActiveInstance,
+  disconnectedInstance,
+  acknowledgeDisconnectedInstance,
+} from "./stores/instances"
+import {
+  getSessions,
+  activeSessionId,
+  setActiveParentSession,
+  clearActiveParentSession,
+  createSession,
+  fetchSessions,
+  updateSessionAgent,
+  updateSessionModel,
+} from "./stores/sessions"
+
+const App: Component = () => {
+  const { isDark } = useTheme()
+  const {
+    preferences,
+    addRecentFolder,
+    toggleShowThinkingBlocks,
+    setDiffViewMode,
+    setToolOutputExpansion,
+    setDiagnosticsExpansion,
+  } = useConfig()
+  const [escapeInDebounce, setEscapeInDebounce] = createSignal(false)
+  const [launchErrorBinary, setLaunchErrorBinary] = createSignal<string | null>(null)
+  const [isAdvancedSettingsOpen, setIsAdvancedSettingsOpen] = createSignal(false)
+
+  createEffect(() => {
+    void initMarkdown(isDark()).catch(console.error)
+  })
+
+  const activeInstance = createMemo(() => getActiveInstance())
+  const activeSessionIdForInstance = createMemo(() => {
+    const instance = activeInstance()
+    if (!instance) return null
+    return activeSessionId().get(instance.id) || null
+  })
+
+  const launchErrorPath = () => {
+    const value = launchErrorBinary()
+    if (!value) return "opencode"
+    return value.trim() || "opencode"
+  }
+
+  const isMissingBinaryError = (error: unknown): boolean => {
+    if (!error) return false
+    const message = typeof error === "string" ? error : error instanceof Error ? error.message : String(error)
+    const normalized = message.toLowerCase()
+    return (
+      normalized.includes("opencode binary not found") ||
+      normalized.includes("binary not found") ||
+      normalized.includes("no such file or directory") ||
+      normalized.includes("binary is not executable") ||
+      normalized.includes("enoent")
+    )
+  }
+
+  const clearLaunchError = () => setLaunchErrorBinary(null)
+
+  async function handleSelectFolder(folderPath: string, binaryPath?: string) {
+    if (!folderPath) {
+      return
+    }
+    setIsSelectingFolder(true)
+    const selectedBinary = binaryPath || preferences().lastUsedBinary || "opencode"
+    try {
+      addRecentFolder(folderPath)
+      clearLaunchError()
+      const instanceId = await createInstance(folderPath, selectedBinary)
+      setHasInstances(true)
+      setShowFolderSelection(false)
+      setIsAdvancedSettingsOpen(false)
+
+      console.log("Created instance:", instanceId, "Port:", instances().get(instanceId)?.port)
+    } catch (error) {
+      clearLaunchError()
+      if (isMissingBinaryError(error)) {
+        setLaunchErrorBinary(selectedBinary)
+      }
+      console.error("Failed to create instance:", error)
+    } finally {
+      setIsSelectingFolder(false)
+    }
+  }
+
+  function handleLaunchErrorClose() {
+    clearLaunchError()
+  }
+
+  function handleLaunchErrorAdvanced() {
+    clearLaunchError()
+    setIsAdvancedSettingsOpen(true)
+  }
+
+  function handleNewInstanceRequest() {
+    if (hasInstances()) {
+      setShowFolderSelection(true)
+    }
+  }
+
+  async function handleDisconnectedInstanceClose() {
+    try {
+      await acknowledgeDisconnectedInstance()
+    } catch (error) {
+      console.error("Failed to finalize disconnected instance:", error)
+    }
+  }
+
+  async function handleCloseInstance(instanceId: string) {
+    if (confirm("Stop OpenCode instance? This will stop the server.")) {
+      await stopInstance(instanceId)
+      if (instances().size === 0) {
+        setHasInstances(false)
+      }
+    }
+  }
+
+  async function handleNewSession(instanceId: string) {
+    try {
+      const session = await createSession(instanceId)
+      setActiveParentSession(instanceId, session.id)
+    } catch (error) {
+      console.error("Failed to create session:", error)
+    }
+  }
+
+  async function handleCloseSession(instanceId: string, sessionId: string) {
+    const sessions = getSessions(instanceId)
+    const session = sessions.find((s) => s.id === sessionId)
+
+    if (!session) {
+      return
+    }
+
+    const parentSessionId = session.parentId ?? session.id
+    const parentSession = sessions.find((s) => s.id === parentSessionId)
+
+    if (!parentSession || parentSession.parentId !== null) {
+      return
+    }
+
+    clearActiveParentSession(instanceId)
+
+    try {
+      await fetchSessions(instanceId)
+    } catch (error) {
+      console.error("Failed to refresh sessions after closing:", error)
+    }
+  }
+
+  const handleSidebarAgentChange = async (instanceId: string, sessionId: string, agent: string) => {
+    if (!instanceId || !sessionId || sessionId === "info") return
+    await updateSessionAgent(instanceId, sessionId, agent)
+  }
+
+  const handleSidebarModelChange = async (
+    instanceId: string,
+    sessionId: string,
+    model: { providerId: string; modelId: string },
+  ) => {
+    if (!instanceId || !sessionId || sessionId === "info") return
+    await updateSessionModel(instanceId, sessionId, model)
+  }
+
+  const { commands: paletteCommands, executeCommand } = useCommands({
+    preferences,
+    toggleShowThinkingBlocks,
+    setDiffViewMode,
+    setToolOutputExpansion,
+    setDiagnosticsExpansion,
+    handleNewInstanceRequest,
+    handleCloseInstance,
+    handleNewSession,
+    handleCloseSession,
+    getActiveInstance: activeInstance,
+    getActiveSessionIdForInstance: activeSessionIdForInstance,
+  })
+
+  useAppLifecycle({
+    setEscapeInDebounce,
+    handleNewInstanceRequest,
+    handleCloseInstance,
+    handleNewSession,
+    handleCloseSession,
+    showFolderSelection,
+    setShowFolderSelection,
+    getActiveInstance: activeInstance,
+    getActiveSessionIdForInstance: activeSessionIdForInstance,
+  })
+
+  return (
+    <>
+      <InstanceDisconnectedModal
+        open={Boolean(disconnectedInstance())}
+        folder={disconnectedInstance()?.folder}
+        reason={disconnectedInstance()?.reason}
+        onClose={handleDisconnectedInstanceClose}
+      />
+
+      <Dialog open={Boolean(launchErrorBinary())} modal>
+        <Dialog.Portal>
+          <Dialog.Overlay class="modal-overlay" />
+          <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+            <Dialog.Content class="modal-surface w-full max-w-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">
+                  Install the OpenCode CLI and make sure it is available in your PATH, or pick a custom binary from
+                  Advanced Settings.
+                </Dialog.Description>
+              </div>
+
+              <div class="rounded-lg border border-base bg-surface-secondary p-4">
+                <p class="text-xs font-medium text-muted uppercase tracking-wide mb-1">Binary path</p>
+                <p class="text-sm font-mono text-primary break-all">{launchErrorPath()}</p>
+              </div>
+
+              <div class="flex justify-end gap-2">
+                <button type="button" class="selector-button selector-button-secondary" onClick={handleLaunchErrorAdvanced}>
+                  Open Advanced Settings
+                </button>
+                <button type="button" class="selector-button selector-button-primary" onClick={handleLaunchErrorClose}>
+                  Close
+                </button>
+              </div>
+            </Dialog.Content>
+          </div>
+        </Dialog.Portal>
+      </Dialog>
+      <div class="h-screen w-screen flex flex-col">
+        <Show
+          when={!hasInstances()}
+          fallback={
+            <>
+              <InstanceTabs
+                instances={instances()}
+                activeInstanceId={activeInstanceId()}
+                onSelect={setActiveInstanceId}
+                onClose={handleCloseInstance}
+                onNew={handleNewInstanceRequest}
+              />
+
+              <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>
+            </>
+          }
+        >
+          <FolderSelectionView
+            onSelectFolder={handleSelectFolder}
+            isLoading={isSelectingFolder()}
+            advancedSettingsOpen={isAdvancedSettingsOpen()}
+            onAdvancedSettingsOpen={() => setIsAdvancedSettingsOpen(true)}
+            onAdvancedSettingsClose={() => setIsAdvancedSettingsOpen(false)}
+          />
+        </Show>
+
+        <Show when={showFolderSelection()}>
+          <div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
+            <div class="w-full h-full relative">
+              <button
+                onClick={() => {
+                  setShowFolderSelection(false)
+                  setIsAdvancedSettingsOpen(false)
+                  clearLaunchError()
+                }}
+                class="absolute top-4 right-4 z-10 p-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                title="Close (Esc)"
+              >
+                <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+              <FolderSelectionView
+                onSelectFolder={handleSelectFolder}
+                isLoading={isSelectingFolder()}
+                advancedSettingsOpen={isAdvancedSettingsOpen()}
+                onAdvancedSettingsOpen={() => setIsAdvancedSettingsOpen(true)}
+                onAdvancedSettingsClose={() => setIsAdvancedSettingsOpen(false)}
+              />
+            </div>
+          </div>
+        </Show>
+
+        <Toaster
+          position="top-right"
+          gutter={16}
+          toastOptions={{
+            duration: 8000,
+            className: "bg-transparent border-none shadow-none p-0",
+          }}
+        />
+      </div>
+    </>
+  )
+}
+
+export default App

packages/ui/src/components/command-palette.tsx

@@ -7,7 +7,7 @@ interface CommandPaletteProps {
   open: boolean
   onClose: () => void
   commands: Command[]
-  onExecute: (commandId: string) => void
+  onExecute: (command: Command) => void
 }
 
 function buildShortcutString(shortcut: Command["shortcut"]): string {
@@ -30,7 +30,7 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
   let inputRef: HTMLInputElement | undefined
   let listRef: HTMLDivElement | undefined
 
-  const categoryOrder = ["Instance", "Session", "Agent & Model", "Input & Focus", "System", "Other"] as const
+  const categoryOrder = ["Custom Commands", "Instance", "Session", "Agent & Model", "Input & Focus", "System", "Other"] as const
 
   type CommandGroup = { category: string; commands: Command[]; startIndex: number }
   type ProcessedCommands = { groups: CommandGroup[]; ordered: Command[] }
@@ -167,13 +167,15 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
       e.stopPropagation()
       const index = selectedIndex()
       if (index < 0 || index >= ordered.length) return
-      props.onExecute(ordered[index].id)
+      const command = ordered[index]
+      if (!command) return
+      props.onExecute(command)
       props.onClose()
     }
   }
 
-  function handleCommandClick(commandId: string) {
-    props.onExecute(commandId)
+  function handleCommandClick(command: Command) {
+    props.onExecute(command)
     props.onClose()
   }
 
@@ -241,7 +243,7 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
                             <button
                               type="button"
                               data-command-index={commandIndex}
-                              onClick={() => handleCommandClick(command.id)}
+                              onClick={() => handleCommandClick(command)}
                               class={`modal-item ${selectedCommandId() === command.id ? "modal-item-highlight" : ""}`}
                               onPointerMove={(event) => {
                                 if (event.movementX === 0 && event.movementY === 0) return

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

@@ -0,0 +1,375 @@
+import { Component, Show, For, createSignal, createMemo, createEffect, onCleanup } from "solid-js"
+import { ArrowUpLeft, Folder as FolderIcon, Loader2, X } from "lucide-solid"
+import type { FileSystemEntry, FileSystemListingMetadata } from "../../../cli/src/api-types"
+import { WINDOWS_DRIVES_ROOT } from "../../../cli/src/api-types"
+import { cliApi } from "../lib/api-client"
+
+function normalizePathKey(input?: string | null) {
+  if (!input || input === "." || input === "./") {
+    return "."
+  }
+  if (input === WINDOWS_DRIVES_ROOT) {
+    return WINDOWS_DRIVES_ROOT
+  }
+  let normalized = input.replace(/\\/g, "/")
+  if (/^[a-zA-Z]:/.test(normalized)) {
+    const [drive, rest = ""] = normalized.split(":")
+    const suffix = rest.startsWith("/") ? rest : rest ? `/${rest}` : "/"
+    return `${drive.toUpperCase()}:${suffix.replace(/\/+/g, "/")}`
+  }
+  if (normalized.startsWith("//")) {
+    return `//${normalized.slice(2).replace(/\/+/g, "/")}`
+  }
+  if (normalized.startsWith("/")) {
+    return `/${normalized.slice(1).replace(/\/+/g, "/")}`
+  }
+  normalized = normalized.replace(/^\.\/+/, "").replace(/\/+/g, "/")
+  return normalized === "" ? "." : normalized
+}
+
+
+function isAbsolutePathLike(input: string) {
+  return input.startsWith("/") || /^[a-zA-Z]:/.test(input) || input.startsWith("\\\\")
+}
+
+interface DirectoryBrowserDialogProps {
+  open: boolean
+  title: string
+  description?: string
+  onSelect: (absolutePath: string) => void
+  onClose: () => void
+}
+
+function resolveAbsolutePath(root: string, relativePath: string) {
+  if (!root) {
+    return relativePath
+  }
+  if (!relativePath || relativePath === "." || relativePath === "./") {
+    return root
+  }
+  if (isAbsolutePathLike(relativePath)) {
+    return relativePath
+  }
+  const separator = root.includes("\\") ? "\\" : "/"
+  const trimmedRoot = root.endsWith(separator) ? root : `${root}${separator}`
+  const normalized = relativePath.replace(/[\\/]+/g, separator).replace(/^[\\/]+/, "")
+  return `${trimmedRoot}${normalized}`
+}
+
+type FolderRow =
+  | { type: "up"; path: string }
+  | { type: "folder"; entry: FileSystemEntry }
+
+const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) => {
+  const [rootPath, setRootPath] = createSignal("")
+  const [loading, setLoading] = createSignal(false)
+  const [error, setError] = createSignal<string | null>(null)
+  const [directoryChildren, setDirectoryChildren] = createSignal<Map<string, FileSystemEntry[]>>(new Map())
+  const [loadingPaths, setLoadingPaths] = createSignal<Set<string>>(new Set())
+  const [currentPathKey, setCurrentPathKey] = createSignal<string | null>(null)
+  const [currentMetadata, setCurrentMetadata] = createSignal<FileSystemListingMetadata | null>(null)
+
+  const metadataCache = new Map<string, FileSystemListingMetadata>()
+  const inFlightRequests = new Map<string, Promise<FileSystemListingMetadata>>()
+
+  function resetState() {
+    setDirectoryChildren(new Map<string, FileSystemEntry[]>())
+    setLoadingPaths(new Set<string>())
+    setCurrentPathKey(null)
+    setCurrentMetadata(null)
+    metadataCache.clear()
+    inFlightRequests.clear()
+    setError(null)
+  }
+
+  createEffect(() => {
+    if (!props.open) {
+      return
+    }
+    resetState()
+    void initialize()
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault()
+        props.onClose()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    onCleanup(() => {
+      window.removeEventListener("keydown", handleKeyDown)
+    })
+  })
+
+  async function initialize() {
+    setLoading(true)
+    try {
+      const metadata = await loadDirectory()
+      applyMetadata(metadata)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Unable to load filesystem"
+      setError(message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function applyMetadata(metadata: FileSystemListingMetadata) {
+    const key = normalizePathKey(metadata.currentPath)
+    setCurrentPathKey(key)
+    setCurrentMetadata(metadata)
+    setRootPath(metadata.rootPath)
+  }
+
+  async function loadDirectory(targetPath?: string): Promise<FileSystemListingMetadata> {
+    const key = targetPath ? normalizePathKey(targetPath) : undefined
+    if (key) {
+      const cached = metadataCache.get(key)
+      if (cached) {
+        return cached
+      }
+      const pending = inFlightRequests.get(key)
+      if (pending) {
+        return pending
+      }
+    }
+
+    const request = (async () => {
+      if (key) {
+        setLoadingPaths((prev) => {
+          const next = new Set(prev)
+          next.add(key)
+          return next
+        })
+      }
+
+      const response = await cliApi.listFileSystem(targetPath, { includeFiles: false })
+      const canonicalKey = normalizePathKey(response.metadata.currentPath)
+      const directories = response.entries
+        .filter((entry) => entry.type === "directory")
+        .sort((a, b) => a.name.localeCompare(b.name))
+
+      setDirectoryChildren((prev) => {
+        const next = new Map(prev)
+        next.set(canonicalKey, directories)
+        return next
+      })
+
+      metadataCache.set(canonicalKey, response.metadata)
+
+      setLoadingPaths((prev) => {
+        const next = new Set(prev)
+        if (key) {
+          next.delete(key)
+        }
+        next.delete(canonicalKey)
+        return next
+      })
+
+      return response.metadata
+    })()
+      .catch((err) => {
+        if (key) {
+          setLoadingPaths((prev) => {
+            const next = new Set(prev)
+            next.delete(key)
+            return next
+          })
+        }
+        throw err
+      })
+      .finally(() => {
+        if (key) {
+          inFlightRequests.delete(key)
+        }
+      })
+
+    if (key) {
+      inFlightRequests.set(key, request)
+    }
+
+    return request
+  }
+
+  async function navigateTo(path?: string) {
+    setError(null)
+    try {
+      const metadata = await loadDirectory(path)
+      applyMetadata(metadata)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Unable to load filesystem"
+      setError(message)
+    }
+  }
+
+  const folderRows = createMemo<FolderRow[]>(() => {
+    const rows: FolderRow[] = []
+    const metadata = currentMetadata()
+    if (metadata?.parentPath) {
+      rows.push({ type: "up", path: metadata.parentPath })
+    }
+    const key = currentPathKey()
+    if (!key) {
+      return rows
+    }
+    const children = directoryChildren().get(key) ?? []
+    for (const entry of children) {
+      rows.push({ type: "folder", entry })
+    }
+    return rows
+  })
+
+  function handleNavigateTo(path: string) {
+    void navigateTo(path)
+  }
+
+  function handleNavigateUp() {
+    const parent = currentMetadata()?.parentPath
+    if (parent) {
+      void navigateTo(parent)
+    }
+  }
+
+  const currentAbsolutePath = createMemo(() => {
+    const metadata = currentMetadata()
+    if (!metadata) {
+      return ""
+    }
+    if (metadata.pathKind === "drives") {
+      return ""
+    }
+    if (metadata.pathKind === "relative") {
+      return resolveAbsolutePath(metadata.rootPath, metadata.currentPath)
+    }
+    return metadata.displayPath
+  })
+
+  const canSelectCurrent = createMemo(() => Boolean(currentAbsolutePath()))
+
+  function handleEntrySelect(entry: FileSystemEntry) {
+    const absolutePath = entry.absolutePath
+      ? entry.absolutePath
+      : isAbsolutePathLike(entry.path)
+        ? entry.path
+        : resolveAbsolutePath(rootPath(), entry.path)
+    props.onSelect(absolutePath)
+  }
+
+  function isPathLoading(path: string) {
+    return loadingPaths().has(normalizePathKey(path))
+  }
+
+  function handleOverlayClick(event: MouseEvent) {
+    if (event.target === event.currentTarget) {
+      props.onClose()
+    }
+  }
+
+  return (
+    <Show when={props.open}>
+      <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-6" onClick={handleOverlayClick}>
+        <div class="modal-surface directory-browser-modal" role="dialog" aria-modal="true">
+          <div class="panel directory-browser-panel">
+            <div class="directory-browser-header">
+              <div class="directory-browser-heading">
+                <h3 class="directory-browser-title">{props.title}</h3>
+                <p class="directory-browser-description">
+                  {props.description || "Browse folders under the configured workspace root."}
+                </p>
+              </div>
+              <button type="button" class="directory-browser-close" aria-label="Close" onClick={props.onClose}>
+                <X class="w-5 h-5" />
+              </button>
+            </div>
+
+            <div class="panel-body directory-browser-body">
+              <Show when={rootPath()}>
+                <div class="directory-browser-current">
+                  <div class="directory-browser-current-meta">
+                    <span class="directory-browser-current-label">Current folder</span>
+                    <span class="directory-browser-current-path">{currentAbsolutePath()}</span>
+                  </div>
+                  <button
+                    type="button"
+                    class="selector-button selector-button-secondary directory-browser-select directory-browser-current-select"
+                    disabled={!canSelectCurrent()}
+                    onClick={() => {
+                      const absolute = currentAbsolutePath()
+                      if (absolute) {
+                        props.onSelect(absolute)
+                      }
+                    }}
+                  >
+                    Select Current
+                  </button>
+                </div>
+              </Show>
+              <Show
+                when={!loading() && !error()}
+                fallback={
+                  <div class="panel-empty-state flex-1">
+                    <Show when={loading()} fallback={<span class="text-red-500">{error()}</span>}>
+                      <div class="directory-browser-loading">
+                        <Loader2 class="w-5 h-5 animate-spin" />
+                        <span>Loading folders…</span>
+                      </div>
+                    </Show>
+                  </div>
+                }
+              >
+                <Show
+                  when={folderRows().length > 0}
+                  fallback={<div class="panel-empty-state flex-1">No folders available.</div>}
+                >
+                  <div class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto directory-browser-list" role="listbox">
+                    <For each={folderRows()}>
+                      {(item) => {
+                        const isFolder = item.type === "folder"
+                        const label = isFolder ? item.entry.name || item.entry.path : "Up one level"
+                        const navigate = () => (isFolder ? handleNavigateTo(item.entry.path) : handleNavigateUp())
+                        return (
+                          <div class="panel-list-item" role="option">
+                            <div class="panel-list-item-content directory-browser-row">
+                              <button type="button" class="directory-browser-row-main" onClick={navigate}>
+                                <div class="directory-browser-row-icon">
+                                  <Show when={!isFolder} fallback={<FolderIcon class="w-4 h-4" />}>
+                                    <ArrowUpLeft class="w-4 h-4" />
+                                  </Show>
+                                </div>
+                                <div class="directory-browser-row-text">
+                                  <span class="directory-browser-row-name">{label}</span>
+                                </div>
+                                <Show when={isFolder && isPathLoading(item.entry.path)}>
+                                  <Loader2 class="directory-browser-row-spinner animate-spin" />
+                                </Show>
+                              </button>
+                              {isFolder ? (
+                                <button
+                                  type="button"
+                                  class="selector-button selector-button-secondary directory-browser-select"
+                                  onClick={(event) => {
+                                    event.stopPropagation()
+                                    handleEntrySelect(item.entry)
+                                  }}
+                                >
+                                  Select
+                                </button>
+                              ) : null}
+                            </div>
+                          </div>
+                        )
+                      }}
+                    </For>
+                  </div>
+                </Show>
+              </Show>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Show>
+  )
+}
+
+export default DirectoryBrowserDialog

packages/ui/src/components/empty-state.tsx

@@ -1,7 +1,7 @@
 import { Component } from "solid-js"
 import { Loader2 } from "lucide-solid"
 
-const codeNomadIcon = new URL("../../images/CodeNomad-Icon.png", import.meta.url).href
+const codeNomadIcon = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 
 interface EmptyStateProps {
   onSelectFolder: () => void

packages/ui/src/components/environment-variables-editor.tsx

@@ -1,17 +1,18 @@
 import { Component, createSignal, For, Show } from "solid-js"
 import { Plus, Trash2, Key, Globe } from "lucide-solid"
-import {
-  preferences,
-  addEnvironmentVariable,
-  removeEnvironmentVariable,
-  updateEnvironmentVariables,
-} from "../stores/preferences"
+import { useConfig } from "../stores/preferences"
 
 interface EnvironmentVariablesEditorProps {
   disabled?: boolean
 }
 
 const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (props) => {
+  const {
+    preferences,
+    addEnvironmentVariable,
+    removeEnvironmentVariable,
+    updateEnvironmentVariables,
+  } = useConfig()
   const [envVars, setEnvVars] = createSignal<Record<string, string>>(preferences().environmentVariables || {})
   const [newKey, setNewKey] = createSignal("")
   const [newValue, setNewValue] = createSignal("")

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

@@ -1,6 +1,7 @@
 import { Component, createSignal, createEffect, For, Show, onCleanup } from "solid-js"
 
 import type { OpencodeClient } from "@opencode-ai/sdk/client"
+import { cliApi } from "../lib/api-client"
 
 interface FileItem {
   path: string
@@ -17,7 +18,7 @@ interface FilePickerProps {
   instanceClient: OpencodeClient
   searchQuery: string
   textareaRef?: HTMLTextAreaElement
-  workspaceFolder: string
+  workspaceId: string
 }
 
 const FilePicker: Component<FilePickerProps> = (props) => {
@@ -36,10 +37,10 @@ const FilePicker: Component<FilePickerProps> = (props) => {
 
     try {
       if (allFiles().length === 0) {
-        console.log(`[FilePicker] Scanning workspace: ${props.workspaceFolder}`)
-        const scannedPaths = await window.electronAPI.scanDirectory(props.workspaceFolder)
-        const scannedFiles: FileItem[] = scannedPaths.map((path) => ({
-          path,
+        console.log(`[FilePicker] Scanning workspace: ${props.workspaceId}`)
+        const entries = await cliApi.listWorkspaceFiles(props.workspaceId)
+        const scannedFiles: FileItem[] = entries.map<FileItem>((entry) => ({
+          path: entry.path,
           isGitFile: false,
         }))
         setAllFiles(scannedFiles)

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

@@ -0,0 +1,474 @@
+import { Component, Show, For, createSignal, createMemo, createEffect, onCleanup, onMount } from "solid-js"
+import { Folder as FolderIcon, File as FileIcon, Loader2, Search, X } from "lucide-solid"
+import type { FileSystemEntry } from "../../../cli/src/api-types"
+import { cliApi } from "../lib/api-client"
+import { getServerMeta } from "../lib/server-meta"
+
+const MAX_RESULTS = 200
+
+type CacheListener = (entries: FileSystemEntry[]) => void
+
+interface FileSystemCacheState {
+  entriesMap: Map<string, FileSystemEntry>
+  entriesList: FileSystemEntry[]
+  loadedDirectories: Set<string>
+  loadingPromises: Map<string, Promise<void>>
+  pendingDirectories: string[]
+  listeners: Set<CacheListener>
+  queueActive: boolean
+}
+
+const fileSystemCache: FileSystemCacheState = {
+  entriesMap: new Map(),
+  entriesList: [],
+  loadedDirectories: new Set(),
+  loadingPromises: new Map(),
+  pendingDirectories: [],
+  listeners: new Set(),
+  queueActive: false,
+}
+
+let cacheWorkspaceRoot: string | null = null
+
+function normalizeEntryPath(path: string): string {
+  if (!path || path === ".") {
+    return "."
+  }
+  const cleaned = path.replace(/\\/g, "/").replace(/^\.\/+/, "").replace(/\/+/g, "/")
+  return cleaned || "."
+}
+
+function updateCache(entries: FileSystemEntry[]): boolean {
+  let changed = false
+  for (const entry of entries) {
+    const normalizedPath = normalizeEntryPath(entry.path)
+    const normalizedEntry = normalizedPath === entry.path ? entry : { ...entry, path: normalizedPath }
+    const existing = fileSystemCache.entriesMap.get(normalizedPath)
+
+    if (
+      !existing ||
+      existing.name !== normalizedEntry.name ||
+      existing.type !== normalizedEntry.type ||
+      existing.size !== normalizedEntry.size ||
+      existing.modifiedAt !== normalizedEntry.modifiedAt
+    ) {
+      fileSystemCache.entriesMap.set(normalizedPath, normalizedEntry)
+      changed = true
+    }
+  }
+
+  if (changed) {
+    fileSystemCache.entriesList = Array.from(fileSystemCache.entriesMap.values()).sort((a, b) =>
+      a.path.localeCompare(b.path),
+    )
+  }
+
+  return changed
+}
+
+function notifyCacheListeners() {
+  for (const listener of fileSystemCache.listeners) {
+    listener(fileSystemCache.entriesList)
+  }
+}
+
+function subscribeToCache(listener: CacheListener) {
+  fileSystemCache.listeners.add(listener)
+  listener(fileSystemCache.entriesList)
+  return () => fileSystemCache.listeners.delete(listener)
+}
+
+function resetFileSystemCache() {
+  fileSystemCache.entriesMap.clear()
+  fileSystemCache.entriesList = []
+  fileSystemCache.loadedDirectories.clear()
+  fileSystemCache.loadingPromises.clear()
+  fileSystemCache.pendingDirectories = []
+  fileSystemCache.queueActive = false
+  notifyCacheListeners()
+}
+
+function enqueueDirectory(path: string, priority = false) {
+  const normalized = normalizeEntryPath(path)
+  if (normalized === "." || fileSystemCache.loadedDirectories.has(normalized) || fileSystemCache.loadingPromises.has(normalized)) {
+    return
+  }
+
+  const existingIndex = fileSystemCache.pendingDirectories.indexOf(normalized)
+  if (existingIndex !== -1) {
+    if (priority) {
+      fileSystemCache.pendingDirectories.splice(existingIndex, 1)
+      fileSystemCache.pendingDirectories.unshift(normalized)
+    }
+    return
+  }
+
+  if (priority) {
+    fileSystemCache.pendingDirectories.unshift(normalized)
+  } else {
+    fileSystemCache.pendingDirectories.push(normalized)
+  }
+}
+
+async function loadDirectory(path: string): Promise<void> {
+  const normalized = normalizeEntryPath(path)
+  if (fileSystemCache.loadedDirectories.has(normalized)) {
+    return
+  }
+
+  const existing = fileSystemCache.loadingPromises.get(normalized)
+  if (existing) {
+    await existing
+    return
+  }
+
+  const promise = cliApi
+    .listFileSystem(normalized === "." ? "." : normalized)
+    .then(({ entries }) => {
+      const changed = updateCache(entries)
+      fileSystemCache.loadedDirectories.add(normalized)
+      for (const entry of entries) {
+        if (entry.type === "directory") {
+          enqueueDirectory(entry.path)
+        }
+      }
+      if (changed) {
+        notifyCacheListeners()
+      }
+    })
+    .finally(() => {
+      fileSystemCache.loadingPromises.delete(normalized)
+    })
+
+  fileSystemCache.loadingPromises.set(normalized, promise)
+  await promise
+}
+
+async function processDirectoryQueue() {
+  if (fileSystemCache.queueActive) {
+    return
+  }
+  fileSystemCache.queueActive = true
+  try {
+    while (fileSystemCache.pendingDirectories.length > 0) {
+      const next = fileSystemCache.pendingDirectories.shift()
+      if (!next) continue
+      try {
+        await loadDirectory(next)
+      } catch (error) {
+        console.warn("Failed to load directory", next, error)
+      }
+    }
+  } finally {
+    fileSystemCache.queueActive = false
+  }
+}
+
+function startBackgroundLoading() {
+  void processDirectoryQueue()
+}
+
+function prioritizeDirectoriesForQuery(query: string) {
+  const normalized = query.replace(/\\/g, "/").trim()
+  if (!normalized) {
+    return
+  }
+  const segments = normalized.split("/").filter(Boolean)
+  let prefix = ""
+  for (const segment of segments) {
+    prefix = prefix ? `${prefix}/${segment}` : segment
+    enqueueDirectory(prefix, true)
+  }
+  startBackgroundLoading()
+}
+
+async function ensureWorkspaceFilesystemLoaded(workspaceRoot: string) {
+  if (cacheWorkspaceRoot && cacheWorkspaceRoot !== workspaceRoot) {
+    cacheWorkspaceRoot = workspaceRoot
+    resetFileSystemCache()
+  } else if (!cacheWorkspaceRoot) {
+    cacheWorkspaceRoot = workspaceRoot
+  }
+
+  await loadDirectory(".")
+  startBackgroundLoading()
+}
+
+function resolveAbsolutePath(root: string, relativePath: string): string {
+  if (!root) {
+    return relativePath
+  }
+  if (!relativePath || relativePath === "." || relativePath === "./") {
+    return root
+  }
+  const separator = root.includes("\\") ? "\\" : "/"
+  const trimmedRoot = root.endsWith(separator) ? root : `${root}${separator}`
+  const normalized = relativePath.replace(/[\\/]+/g, separator).replace(/^[\\/]+/, "")
+  return `${trimmedRoot}${normalized}`
+}
+
+function formatRootLabel(root: string): string {
+  if (!root) return "Workspace Root"
+  const parts = root.split(/[/\\]/).filter(Boolean)
+  return parts[parts.length - 1] || root || "Workspace Root"
+}
+
+interface FileSystemBrowserDialogProps {
+  open: boolean
+  mode: "directories" | "files"
+  title: string
+  description?: string
+  onSelect: (absolutePath: string) => void
+  onClose: () => void
+}
+
+const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props) => {
+  const [entries, setEntries] = createSignal<FileSystemEntry[]>([])
+  const [rootPath, setRootPath] = createSignal("")
+  const [loading, setLoading] = createSignal(false)
+  const [error, setError] = createSignal<string | null>(null)
+  const [searchQuery, setSearchQuery] = createSignal("")
+  const [selectedIndex, setSelectedIndex] = createSignal(0)
+
+  let searchInputRef: HTMLInputElement | undefined
+
+  onMount(() => {
+    const unsubscribe = subscribeToCache((items) => setEntries(items))
+    onCleanup(unsubscribe)
+  })
+
+  createEffect(() => {
+    const query = searchQuery().trim()
+    if (!query) {
+      return
+    }
+    prioritizeDirectoriesForQuery(query)
+  })
+
+  async function refreshEntries() {
+    setLoading(true)
+    setError(null)
+    try {
+      const meta = await getServerMeta()
+      setRootPath(meta.workspaceRoot)
+      await ensureWorkspaceFilesystemLoaded(meta.workspaceRoot)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Unable to load filesystem"
+      setError(message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const filteredEntries = createMemo(() => {
+    const query = searchQuery().trim().toLowerCase()
+    const mode = props.mode
+    const root = rootPath()
+    const matchesType = entries().filter((entry) => (mode === "directories" ? entry.type === "directory" : entry.type === "file"))
+
+    const baseEntries = mode === "directories" && root
+      ? [
+          {
+            name: formatRootLabel(root),
+            path: ".",
+            type: "directory" as const,
+          },
+          ...matchesType,
+        ]
+      : matchesType
+
+    if (!query) {
+      return baseEntries
+    }
+
+    return baseEntries.filter((entry) => {
+      const absolute = resolveAbsolutePath(root, entry.path)
+      return absolute.toLowerCase().includes(query) || entry.name.toLowerCase().includes(query)
+    })
+  })
+
+  const visibleEntries = createMemo(() => filteredEntries().slice(0, MAX_RESULTS))
+
+  createEffect(() => {
+    const list = visibleEntries()
+    if (list.length === 0) {
+      setSelectedIndex(0)
+      return
+    }
+    if (selectedIndex() >= list.length) {
+      setSelectedIndex(list.length - 1)
+    }
+  })
+
+  createEffect(() => {
+    if (!props.open) {
+      return
+    }
+    setSearchQuery("")
+    setSelectedIndex(0)
+    void refreshEntries()
+    setTimeout(() => searchInputRef?.focus(), 50)
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!props.open) return
+      const results = visibleEntries()
+      if (event.key === "Escape") {
+        event.preventDefault()
+        props.onClose()
+        return
+      }
+      if (results.length === 0) {
+        return
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault()
+        setSelectedIndex((prev) => Math.min(prev + 1, results.length - 1))
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault()
+        setSelectedIndex((prev) => Math.max(prev - 1, 0))
+      } else if (event.key === "Enter") {
+        event.preventDefault()
+        const entry = results[selectedIndex()]
+        if (entry) {
+          handleEntrySelect(entry)
+        }
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    onCleanup(() => {
+      window.removeEventListener("keydown", handleKeyDown)
+    })
+  })
+
+  function handleEntrySelect(entry: FileSystemEntry) {
+    const absolute = resolveAbsolutePath(rootPath(), entry.path)
+    props.onSelect(absolute)
+  }
+
+  function handleOverlayClick(event: MouseEvent) {
+    if (event.target === event.currentTarget) {
+      props.onClose()
+    }
+  }
+
+  return (
+    <Show when={props.open}>
+      <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-6" onClick={handleOverlayClick}>
+        <div class="modal-surface max-h-full w-full max-w-3xl overflow-hidden rounded-xl bg-surface p-0" role="dialog" aria-modal="true">
+          <div class="panel flex flex-col">
+            <div class="panel-header flex items-start justify-between gap-4">
+              <div>
+                <h3 class="panel-title">{props.title}</h3>
+                <p class="panel-subtitle">
+                  {props.description || "Search for a path under the configured workspace root."}
+                </p>
+                <Show when={rootPath()}>
+                  <p class="text-xs text-muted mt-1 font-mono break-all">Root: {rootPath()}</p>
+                </Show>
+              </div>
+              <button type="button" class="selector-button selector-button-secondary" onClick={props.onClose}>
+                <X class="w-4 h-4" />
+                Close
+              </button>
+            </div>
+
+            <div class="panel-body">
+              <label class="w-full text-sm text-secondary mb-2 block">Filter</label>
+              <div class="selector-input-group">
+                <div class="flex items-center gap-2 px-3 text-muted">
+                  <Search class="w-4 h-4" />
+                </div>
+                <input
+                  ref={(el) => {
+                    searchInputRef = el
+                  }}
+                  type="text"
+                  value={searchQuery()}
+                  onInput={(event) => setSearchQuery(event.currentTarget.value)}
+                  placeholder={props.mode === "directories" ? "Search for folders" : "Search for files"}
+                  class="selector-input"
+                />
+              </div>
+            </div>
+
+            <div class="panel-list panel-list--fill max-h-96 overflow-auto">
+              <Show
+                when={!loading() && !error()}
+                fallback={
+                  <div class="flex items-center justify-center py-6 text-sm text-secondary">
+                    <Show
+                      when={loading()}
+                      fallback={<span class="text-red-500">{error()}</span>}
+                    >
+                      <div class="flex items-center gap-2">
+                        <Loader2 class="w-4 h-4 animate-spin" />
+                        <span>Loading filesystem…</span>
+                      </div>
+                    </Show>
+                  </div>
+                }
+              >
+                <Show
+                  when={visibleEntries().length > 0}
+                  fallback={
+                    <div class="flex flex-col items-center justify-center gap-2 py-10 text-sm text-secondary">
+                      <p>No matches.</p>
+                      <Show when={searchQuery().trim().length === 0}>
+                        <button type="button" class="selector-button selector-button-secondary" onClick={refreshEntries}>
+                          Retry
+                        </button>
+                      </Show>
+                    </div>
+                  }
+                >
+                  <For each={visibleEntries()}>
+                    {(entry, index) => (
+                      <button
+                        type="button"
+                        class="panel-list-item flex items-center gap-3 text-left"
+                        classList={{ "panel-list-item-highlight": selectedIndex() === index() }}
+                        onMouseEnter={() => setSelectedIndex(index())}
+                        onClick={() => handleEntrySelect(entry)}
+                      >
+                        <div class="flex h-8 w-8 items-center justify-center rounded-md bg-surface-secondary text-muted">
+                          <Show when={entry.type === "directory"} fallback={<FileIcon class="w-4 h-4" />}>
+                            <FolderIcon class="w-4 h-4" />
+                          </Show>
+                        </div>
+                        <div class="flex flex-col">
+                          <span class="text-sm font-medium text-primary">{entry.name || entry.path}</span>
+                          <span class="text-xs font-mono text-muted">{resolveAbsolutePath(rootPath(), entry.path)}</span>
+                        </div>
+                      </button>
+                    )}
+                  </For>
+                </Show>
+              </Show>
+            </div>
+
+            <div class="panel-footer">
+              <div class="panel-footer-hints">
+                <div class="flex items-center gap-1.5">
+                  <kbd class="kbd">↑</kbd>
+                  <kbd class="kbd">↓</kbd>
+                  <span>Navigate</span>
+                </div>
+                <div class="flex items-center gap-1.5">
+                  <kbd class="kbd">Enter</kbd>
+                  <span>Select</span>
+                </div>
+                <div class="flex items-center gap-1.5">
+                  <kbd class="kbd">Esc</kbd>
+                  <span>Close</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Show>
+  )
+}
+
+export default FileSystemBrowserDialog

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

@@ -1,21 +1,26 @@
 import { Component, createSignal, Show, For, onMount, onCleanup, createEffect } from "solid-js"
 import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight } from "lucide-solid"
-import { recentFolders, removeRecentFolder, preferences, updateLastUsedBinary } from "../stores/preferences"
+import { useConfig } from "../stores/preferences"
 import AdvancedSettingsModal from "./advanced-settings-modal"
+import DirectoryBrowserDialog from "./directory-browser-dialog"
 import Kbd from "./kbd"
 
-const codeNomadLogo = new URL("../../images/CodeNomad-Icon.png", import.meta.url).href
+const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 
 interface FolderSelectionViewProps {
-  onSelectFolder: (folder?: string, binaryPath?: string) => void
+  onSelectFolder: (folder: string, binaryPath?: string) => void
   isLoading?: boolean
+  advancedSettingsOpen?: boolean
+  onAdvancedSettingsOpen?: () => void
+  onAdvancedSettingsClose?: () => void
 }
 
 const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
+  const { recentFolders, removeRecentFolder, preferences, updateLastUsedBinary } = useConfig()
   const [selectedIndex, setSelectedIndex] = createSignal(0)
   const [focusMode, setFocusMode] = createSignal<"recent" | "new" | null>("recent")
-  const [isAdvancedModalOpen, setIsAdvancedModalOpen] = createSignal(false)
   const [selectedBinary, setSelectedBinary] = createSignal(preferences().lastUsedBinary || "opencode")
+  const [isFolderBrowserOpen, setIsFolderBrowserOpen] = createSignal(false)
   let recentListRef: HTMLDivElement | undefined
  
   const folders = () => recentFolders()
@@ -170,12 +175,17 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
  
   function handleBrowse() {
     if (isLoading()) return
-    updateLastUsedBinary(selectedBinary())
-    props.onSelectFolder(undefined, selectedBinary())
+    setFocusMode("new")
+    setIsFolderBrowserOpen(true)
   }
-
-
+ 
+  function handleBrowserSelect(path: string) {
+    setIsFolderBrowserOpen(false)
+    handleFolderSelect(path)
+  }
+ 
   function handleBinaryChange(binary: string) {
+
     setSelectedBinary(binary)
   }
 
@@ -320,7 +330,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
               {/* Advanced settings section */}
               <div class="panel-section w-full">
                 <button
-                  onClick={() => setIsAdvancedModalOpen(true)}
+                  onClick={() => props.onAdvancedSettingsOpen?.()}
                   class="panel-section-header w-full justify-between"
                 >
                   <div class="flex items-center gap-2">
@@ -369,12 +379,20 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
       </div>
 
       <AdvancedSettingsModal
-        open={isAdvancedModalOpen()}
-        onClose={() => setIsAdvancedModalOpen(false)}
+        open={Boolean(props.advancedSettingsOpen)}
+        onClose={() => props.onAdvancedSettingsClose?.()}
         selectedBinary={selectedBinary()}
         onBinaryChange={handleBinaryChange}
         isLoading={props.isLoading}
       />
+
+      <DirectoryBrowserDialog
+        open={isFolderBrowserOpen()}
+        title="Select Workspace"
+        description="Select workspace to start coding."
+        onClose={() => setIsFolderBrowserOpen(false)}
+        onSelect={handleBrowserSelect}
+      />
     </>
   )
 }

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

@@ -1,6 +1,6 @@
 import { Component, Show, For, createSignal, createEffect, onCleanup } from "solid-js"
 import type { Instance, RawMcpStatus } from "../types/instance"
-import { updateInstance } from "../stores/instances"
+import { fetchLspStatus, updateInstance } from "../stores/instances"
 
 interface InstanceInfoProps {
   instance: Instance
@@ -52,6 +52,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
     const status = metadata()?.mcpStatus
     return status ? parseMcpStatus(status) : []
   }
+  const lspServers = () => metadata()?.lspStatus ?? []
 
   createEffect(() => {
     const instance = props.instance
@@ -82,9 +83,10 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
 
     void (async () => {
       try {
-        const [projectResult, mcpResult] = await Promise.allSettled([
+        const [projectResult, mcpResult, lspResult] = await Promise.allSettled([
           client.project.current(),
           client.mcp.status(),
+          fetchLspStatus(instanceId),
         ])
 
         if (cancelled) {
@@ -93,11 +95,13 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
 
         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) {
@@ -213,6 +217,34 @@ 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">

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

@@ -0,0 +1,173 @@
+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/message-item.tsx

@@ -6,6 +6,8 @@ import MessagePart from "./message-part"
 interface MessageItemProps {
   message: Message
   messageInfo?: MessageInfo
+  instanceId: string
+  sessionId: string
   isQueued?: boolean
   parts?: ClientPart[]
   onRevert?: (messageId: string) => void
@@ -99,7 +101,6 @@ export default function MessageItem(props: MessageItemProps) {
           </Show>
         </div>
         <div class="flex items-center gap-2">
-          <span class="text-[11px] text-[var(--text-muted)]">{timestamp()}</span>
           <Show when={isUser() && props.onRevert}>
             <button
               class="bg-transparent border border-[var(--border-base)] text-[var(--text-muted)] cursor-pointer px-3 py-0.5 rounded text-xs font-semibold leading-none transition-all duration-200 flex items-center justify-center h-6 hover:bg-[var(--surface-hover)] hover:border-[var(--accent-primary)] hover:text-[var(--accent-primary)] active:scale-95"
@@ -120,9 +121,10 @@ export default function MessageItem(props: MessageItemProps) {
               Fork
             </button>
           </Show>
+          <span class="text-[11px] text-[var(--text-muted)]">{timestamp()}</span>
         </div>
       </div>
- 
+
       <div class="pt-1 whitespace-pre-wrap break-words leading-[1.1]">
 
         <Show when={props.isQueued && isUser()}>
@@ -139,7 +141,14 @@ export default function MessageItem(props: MessageItemProps) {
           </div>
         </Show>
 
-        <For each={messageParts()}>{(part) => <MessagePart part={part} messageType={props.message.type} />}</For>
+        <For each={messageParts()}>{(part) => (
+          <MessagePart
+            part={part}
+            messageType={props.message.type}
+            instanceId={props.instanceId}
+            sessionId={props.sessionId}
+          />
+        )}</For>
       </div>
 
       <Show when={props.message.status === "sending"}>

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

@@ -3,7 +3,7 @@ import ToolCall from "./tool-call"
 import { isItemExpanded, toggleItemExpanded } from "../stores/tool-call-state"
 import { Markdown } from "./markdown"
 import { useTheme } from "../lib/theme"
-import { preferences } from "../stores/preferences"
+import { useConfig } from "../stores/preferences"
 import { partHasRenderableText, SDKPart, TextPart, ClientPart } from "../types/message"
 
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
@@ -11,9 +11,12 @@ type ToolCallPart = Extract<ClientPart, { type: "tool" }>
 interface MessagePartProps {
   part: ClientPart
   messageType?: "user" | "assistant"
+  instanceId: string
+  sessionId: string
 }
 export default function MessagePart(props: MessagePartProps) {
   const { isDark } = useTheme()
+  const { preferences } = useConfig()
   const partType = () => props.part?.type || ""
   const reasoningId = () => `reasoning-${props.part?.id || ""}`
   const isReasoningExpanded = () => isItemExpanded(reasoningId())
@@ -70,7 +73,12 @@ export default function MessagePart(props: MessagePartProps) {
       </Match>
 
       <Match when={partType() === "tool"}>
-        <ToolCall toolCall={props.part as ToolCallPart} toolCallId={props.part?.id} />
+        <ToolCall
+          toolCall={props.part as ToolCallPart}
+          toolCallId={props.part?.id}
+          instanceId={props.instanceId}
+          sessionId={props.sessionId}
+        />
       </Match>
 
 

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

@@ -30,12 +30,13 @@ import MessageItem from "./message-item"
 import ToolCall from "./tool-call"
 import { sseManager } from "../lib/sse-manager"
 import Kbd from "./kbd"
-import { preferences } from "../stores/preferences"
+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 codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 const SCROLL_OFFSET = 64
+const SCROLL_DIRECTION_THRESHOLD = 10
 
 interface TaskSessionLocation {
   sessionId: string
@@ -169,6 +170,7 @@ function getSessionCache(instanceId: string, sessionId: string): SessionCache {
 }
 
 export default function MessageStream(props: MessageStreamProps) {
+  const { preferences } = useConfig()
   let containerRef: HTMLDivElement | undefined
   const [autoScroll, setAutoScroll] = createSignal(true)
   const [showScrollBottomButton, setShowScrollBottomButton] = createSignal(false)
@@ -265,13 +267,13 @@ export default function MessageStream(props: MessageStreamProps) {
       if (!containerRef) return
 
       const currentScrollTop = containerRef.scrollTop
-      const movingUp = currentScrollTop < lastKnownScrollTop - 1
+      const movingUp = currentScrollTop < lastKnownScrollTop - SCROLL_DIRECTION_THRESHOLD
       lastKnownScrollTop = currentScrollTop
 
       const atBottom = isNearBottom(containerRef)
 
       if (isUserScroll) {
-        if ((movingUp || !atBottom) && autoScroll()) {
+        if (movingUp && !atBottom && autoScroll()) {
           setAutoScroll(false)
         } else if (!movingUp && atBottom && !autoScroll()) {
           setAutoScroll(true)
@@ -380,7 +382,9 @@ export default function MessageStream(props: MessageStreamProps) {
 
         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 = {
@@ -611,6 +615,8 @@ export default function MessageStream(props: MessageStreamProps) {
                 <MessageItem
                   message={item.message}
                   messageInfo={item.messageInfo}
+                  instanceId={props.instanceId}
+                  sessionId={props.sessionId}
                   isQueued={item.isQueued}
                   parts={item.combinedParts}
                   onRevert={props.onRevert}
@@ -661,6 +667,8 @@ export default function MessageStream(props: MessageStreamProps) {
                   messageId={item.messageId}
                   messageVersion={item.messageVersion}
                   partVersion={item.partVersion}
+                  instanceId={props.instanceId}
+                  sessionId={props.sessionId}
                 />
               </div>
             )

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

@@ -1,12 +1,8 @@
 import { Component, For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 import { FolderOpen, Trash2, Check, AlertCircle, Loader2, Plus } from "lucide-solid"
-import {
-  opencodeBinaries,
-  addOpenCodeBinary,
-  removeOpenCodeBinary,
-  preferences,
-  updatePreferences,
-} from "../stores/preferences"
+import { useConfig } from "../stores/preferences"
+import { cliApi } from "../lib/api-client"
+import FileSystemBrowserDialog from "./filesystem-browser-dialog"
 
 interface BinaryOption {
   path: string
@@ -23,11 +19,19 @@ interface OpenCodeBinarySelectorProps {
 }
 
 const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) => {
+  const {
+    opencodeBinaries,
+    addOpenCodeBinary,
+    removeOpenCodeBinary,
+    preferences,
+    updatePreferences,
+  } = useConfig()
   const [customPath, setCustomPath] = createSignal("")
   const [validating, setValidating] = createSignal(false)
   const [validationError, setValidationError] = createSignal<string | null>(null)
   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 binaries = () => opencodeBinaries()
   const lastUsedBinary = () => preferences().lastUsedBinary
@@ -101,7 +105,7 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
       setValidating(true)
       setValidationError(null)
 
-      const result = await window.electronAPI.validateOpenCodeBinary(path)
+      const result = await cliApi.validateBinary(path)
 
       if (result.valid && result.version) {
         const updatedVersionInfo = new Map(versionInfo())
@@ -124,18 +128,12 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
     }
   }
 
-  async function handleBrowseBinary() {
-    try {
-      const path = await window.electronAPI.selectOpenCodeBinary()
-      if (!path) return
-
-      setCustomPath(path)
-      await handleValidateAndAdd(path)
-    } catch (error) {
-      setValidationError(error instanceof Error ? error.message : "Failed to select binary")
-    }
+  function handleBrowseBinary() {
+    if (props.disabled) return
+    setValidationError(null)
+    setIsBinaryBrowserOpen(true)
   }
-
+ 
   async function handleValidateAndAdd(path: string) {
     const validation = await validateBinary(path)
 
@@ -149,8 +147,15 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
       setValidationError(validation.error || "Invalid OpenCode binary")
     }
   }
-
+ 
+  function handleBinaryBrowserSelect(path: string) {
+    setIsBinaryBrowserOpen(false)
+    setCustomPath(path)
+    void handleValidateAndAdd(path)
+  }
+ 
   async function handleCustomPathSubmit() {
+
     const path = customPath().trim()
     if (!path) return
     await handleValidateAndAdd(path)
@@ -196,128 +201,140 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
   const isPathValidating = (path: string) => validatingPaths().has(path)
 
   return (
-    <div class="panel">
-      <div class="panel-header flex items-center justify-between gap-3">
-        <div>
-          <h3 class="panel-title">OpenCode Binary</h3>
-          <p class="panel-subtitle">Choose which executable OpenCode should run</p>
-        </div>
-        <Show when={validating()}>
-          <div class="selector-loading text-xs">
-            <Loader2 class="selector-loading-spinner" />
-            <span>Checking versions…</span>
+    <>
+      <div class="panel">
+        <div class="panel-header flex items-center justify-between gap-3">
+          <div>
+            <h3 class="panel-title">OpenCode Binary</h3>
+            <p class="panel-subtitle">Choose which executable OpenCode should run</p>
+          </div>
+          <Show when={validating()}>
+            <div class="selector-loading text-xs">
+              <Loader2 class="selector-loading-spinner" />
+              <span>Checking versions…</span>
+            </div>
+          </Show>
+        </div>
+
+        <div class="panel-body space-y-3">
+          <div class="selector-input-group">
+            <input
+              type="text"
+              value={customPath()}
+              onInput={(e) => setCustomPath(e.currentTarget.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault()
+                  handleCustomPathSubmit()
+                }
+              }}
+              disabled={props.disabled}
+              placeholder="Enter path to opencode binary…"
+              class="selector-input"
+            />
+            <button
+              type="button"
+              onClick={handleCustomPathSubmit}
+              disabled={props.disabled || !customPath().trim()}
+              class="selector-button selector-button-primary"
+            >
+              <Plus class="w-4 h-4" />
+              Add
+            </button>
           </div>
-        </Show>
-      </div>
 
-      <div class="panel-body space-y-3">
-        <div class="selector-input-group">
-          <input
-            type="text"
-            value={customPath()}
-            onInput={(e) => setCustomPath(e.currentTarget.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault()
-                handleCustomPathSubmit()
-              }
-            }}
-            disabled={props.disabled}
-            placeholder="Enter path to opencode binary…"
-            class="selector-input"
-          />
           <button
             type="button"
-            onClick={handleCustomPathSubmit}
-            disabled={props.disabled || !customPath().trim()}
-            class="selector-button selector-button-primary"
+            onClick={handleBrowseBinary}
+            disabled={props.disabled}
+            class="selector-button selector-button-secondary w-full flex items-center justify-center gap-2"
           >
-            <Plus class="w-4 h-4" />
-            Add
+            <FolderOpen class="w-4 h-4" />
+            Browse for Binary…
           </button>
+
+          <Show when={validationError()}>
+            <div class="selector-validation-error">
+              <div class="selector-validation-error-content">
+                <AlertCircle class="selector-validation-error-icon" />
+                <span class="selector-validation-error-text">{validationError()}</span>
+              </div>
+            </div>
+          </Show>
         </div>
 
-        <button
-          type="button"
-          onClick={handleBrowseBinary}
-          disabled={props.disabled}
-          class="selector-button selector-button-secondary w-full flex items-center justify-center gap-2"
-        >
-          <FolderOpen class="w-4 h-4" />
-          Browse for Binary…
-        </button>
+        <div class="panel-list panel-list--fill max-h-80 overflow-y-auto">
+          <For each={binaryOptions()}>
+            {(binary) => {
+              const isDefault = binary.isDefault
+              const versionLabel = () => versionInfo().get(binary.path) ?? binary.version
 
-        <Show when={validationError()}>
-          <div class="selector-validation-error">
-            <div class="selector-validation-error-content">
-              <AlertCircle class="selector-validation-error-icon" />
-              <span class="selector-validation-error-text">{validationError()}</span>
-            </div>
-          </div>
-        </Show>
-      </div>
-
-      <div class="panel-list panel-list--fill max-h-80 overflow-y-auto">
-        <For each={binaryOptions()}>
-          {(binary) => {
-            const isDefault = binary.isDefault
-            const versionLabel = () => versionInfo().get(binary.path) ?? binary.version
-
-            return (
-              <div
-                class="panel-list-item flex items-center"
-                classList={{ "panel-list-item-highlight": currentSelectionPath() === binary.path }}
-              >
-                <button
-                  type="button"
-                  class="panel-list-item-content flex-1"
-                  onClick={() => handleSelectBinary(binary.path)}
-                  disabled={props.disabled}
+              return (
+                <div
+                  class="panel-list-item flex items-center"
+                  classList={{ "panel-list-item-highlight": currentSelectionPath() === binary.path }}
                 >
-                  <div class="flex flex-col flex-1 min-w-0 gap-1.5">
-                    <div class="flex items-center gap-2">
-                      <Check
-                        class={`w-4 h-4 transition-opacity ${currentSelectionPath() === binary.path ? "opacity-100" : "opacity-0"}`}
-                      />
-                      <span class="text-sm font-medium truncate text-primary">{getDisplayName(binary.path)}</span>
-                    </div>
-                    <Show when={!isDefault}>
-                      <div class="text-xs font-mono truncate pl-6 text-muted">{binary.path}</div>
-                    </Show>
-                    <div class="flex items-center gap-2 text-xs text-muted pl-6 flex-wrap">
-                      <Show when={versionLabel()}>
-                        <span class="selector-badge-version">v{versionLabel()}</span>
-                      </Show>
-                      <Show when={isPathValidating(binary.path)}>
-                        <span class="selector-badge-time">Checking…</span>
-                      </Show>
-                      <Show when={!isDefault && binary.lastUsed}>
-                        <span class="selector-badge-time">{formatRelativeTime(binary.lastUsed)}</span>
-                      </Show>
-                      <Show when={isDefault}>
-                        <span class="selector-badge-time">Use binary from system PATH</span>
-                      </Show>
-                    </div>
-                  </div>
-                </button>
-                <Show when={!isDefault}>
                   <button
                     type="button"
-                    class="p-2 text-muted hover:text-primary"
-                    onClick={(event) => handleRemoveBinary(binary.path, event)}
+                    class="panel-list-item-content flex-1"
+                    onClick={() => handleSelectBinary(binary.path)}
                     disabled={props.disabled}
-                    title="Remove binary"
                   >
-                    <Trash2 class="w-3.5 h-3.5" />
+                    <div class="flex flex-col flex-1 min-w-0 gap-1.5">
+                      <div class="flex items-center gap-2">
+                        <Check
+                          class={`w-4 h-4 transition-opacity ${currentSelectionPath() === binary.path ? "opacity-100" : "opacity-0"}`}
+                        />
+                        <span class="text-sm font-medium truncate text-primary">{getDisplayName(binary.path)}</span>
+                      </div>
+                      <Show when={!isDefault}>
+                        <div class="text-xs font-mono truncate pl-6 text-muted">{binary.path}</div>
+                      </Show>
+                      <div class="flex items-center gap-2 text-xs text-muted pl-6 flex-wrap">
+                        <Show when={versionLabel()}>
+                          <span class="selector-badge-version">v{versionLabel()}</span>
+                        </Show>
+                        <Show when={isPathValidating(binary.path)}>
+                          <span class="selector-badge-time">Checking…</span>
+                        </Show>
+                        <Show when={!isDefault && binary.lastUsed}>
+                          <span class="selector-badge-time">{formatRelativeTime(binary.lastUsed)}</span>
+                        </Show>
+                        <Show when={isDefault}>
+                          <span class="selector-badge-time">Use binary from system PATH</span>
+                        </Show>
+                      </div>
+                    </div>
                   </button>
-                </Show>
-              </div>
-            )
-          }}
-        </For>
+                  <Show when={!isDefault}>
+                    <button
+                      type="button"
+                      class="p-2 text-muted hover:text-primary"
+                      onClick={(event) => handleRemoveBinary(binary.path, event)}
+                      disabled={props.disabled}
+                      title="Remove binary"
+                    >
+                      <Trash2 class="w-3.5 h-3.5" />
+                    </button>
+                  </Show>
+                </div>
+              )
+            }}
+          </For>
+        </div>
       </div>
-    </div>
+
+      <FileSystemBrowserDialog
+        open={isBinaryBrowserOpen()}
+        mode="files"
+        title="Select OpenCode Binary"
+        description="Browse files exposed by the CLI server."
+        onClose={() => setIsBinaryBrowserOpen(false)}
+        onSelect={handleBinaryBrowserSelect}
+      />
+    </>
   )
 }
-
+ 
 export default OpenCodeBinarySelector
+

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

@@ -2,6 +2,7 @@ import { createSignal, Show, onMount, For, onCleanup, createEffect, on, untrack
 import UnifiedPicker from "./unified-picker"
 import { addToHistory, getHistory } from "../stores/message-history"
 import { getAttachments, addAttachment, clearAttachments, removeAttachment } from "../stores/attachments"
+import { resolvePastedPlaceholders } from "../lib/prompt-placeholders"
 import { createFileAttachment, createTextAttachment, createAgentAttachment } from "../types/attachment"
 import type { Attachment } from "../types/attachment"
 import type { Agent } from "../types/session"
@@ -15,6 +16,7 @@ interface PromptInputProps {
   instanceFolder: string
   sessionId: string
   onSend: (prompt: string, attachments: Attachment[]) => Promise<void>
+  onRunShell?: (command: string) => Promise<void>
   disabled?: boolean
   escapeInDebounce?: boolean
 }
@@ -23,7 +25,8 @@ export default function PromptInput(props: PromptInputProps) {
   const [prompt, setPromptInternal] = createSignal("")
   const [history, setHistory] = createSignal<string[]>([])
   const [historyIndex, setHistoryIndex] = createSignal(-1)
-  const [isFocused, setIsFocused] = createSignal(false)
+  const [historyDraft, setHistoryDraft] = createSignal<string | null>(null)
+  const [, setIsFocused] = createSignal(false)
   const [showPicker, setShowPicker] = createSignal(false)
   const [searchQuery, setSearchQuery] = createSignal("")
   const [atPosition, setAtPosition] = createSignal<number | null>(null)
@@ -31,6 +34,7 @@ export default function PromptInput(props: PromptInputProps) {
   const [ignoredAtPositions, setIgnoredAtPositions] = createSignal<Set<number>>(new Set<number>())
   const [pasteCount, setPasteCount] = createSignal(0)
   const [imageCount, setImageCount] = createSignal(0)
+  const [mode, setMode] = createSignal<"normal" | "shell">("normal")
   let textareaRef: HTMLTextAreaElement | undefined
   let containerRef: HTMLDivElement | undefined
 
@@ -48,6 +52,8 @@ export default function PromptInput(props: PromptInputProps) {
   const clearPrompt = () => {
     clearSessionDraftPrompt(props.instanceId, props.sessionId)
     setPromptInternal("")
+    setHistoryDraft(null)
+    setMode("normal")
   }
 
   function syncAttachmentCounters(currentPrompt: string, sessionAttachments: Attachment[]) {
@@ -110,6 +116,7 @@ export default function PromptInput(props: PromptInputProps) {
         setPromptInternal(storedPrompt)
         setSessionDraftPrompt(instanceId, sessionId, storedPrompt)
         setHistoryIndex(-1)
+        setHistoryDraft(null)
         setIgnoredAtPositions(new Set<number>())
         setShowPicker(false)
         setAtPosition(null)
@@ -291,9 +298,40 @@ export default function PromptInput(props: PromptInputProps) {
       return
     }
 
+    const currentText = prompt()
+    const cursorAtBufferStart = textarea.selectionStart === 0 && textarea.selectionEnd === 0
+    const isShellMode = mode() === "shell"
+
+    if (!isShellMode && e.key === "!" && cursorAtBufferStart && currentText.length === 0 && !props.disabled) {
+      e.preventDefault()
+      setMode("shell")
+      return
+    }
+
+    if (showPicker() && e.key === "Escape") {
+      e.preventDefault()
+      e.stopPropagation()
+      handlePickerClose()
+      return
+    }
+
+    if (isShellMode) {
+      if (e.key === "Escape") {
+        e.preventDefault()
+        e.stopPropagation()
+        setMode("normal")
+        return
+      }
+      if (e.key === "Backspace" && cursorAtBufferStart && currentText.length === 0) {
+        e.preventDefault()
+        setMode("normal")
+        return
+      }
+    }
+
     if (e.key === "Backspace" || e.key === "Delete") {
       const cursorPos = textarea.selectionStart
-      const text = prompt()
+      const text = currentText
 
       const pastePlaceholderRegex = /\[pasted #(\d+)\]/g
       let pasteMatch
@@ -433,6 +471,9 @@ export default function PromptInput(props: PromptInputProps) {
 
     if (e.key === "ArrowUp" && !showPicker() && atStart && currentHistory.length > 0) {
       e.preventDefault()
+      if (historyIndex() === -1) {
+        setHistoryDraft(prompt())
+      }
       const newIndex = historyIndex() === -1 ? 0 : Math.min(historyIndex() + 1, currentHistory.length - 1)
       setHistoryIndex(newIndex)
       setPrompt(currentHistory[newIndex])
@@ -447,7 +488,9 @@ export default function PromptInput(props: PromptInputProps) {
         setPrompt(currentHistory[newIndex])
       } else {
         setHistoryIndex(-1)
-        setPrompt("")
+        const draft = historyDraft()
+        setPrompt(draft ?? "")
+        setHistoryDraft(null)
       }
     }
   }
@@ -455,20 +498,32 @@ export default function PromptInput(props: PromptInputProps) {
   async function handleSend() {
     const text = prompt().trim()
     const currentAttachments = attachments()
-    if (!text || props.disabled) return
+    if (props.disabled || !text) return
+
+    const resolvedPrompt = resolvePastedPlaceholders(text, currentAttachments)
+    const isShellMode = mode() === "shell"
 
     clearPrompt()
     clearAttachments(props.instanceId, props.sessionId)
     setIgnoredAtPositions(new Set<number>())
     setPasteCount(0)
     setImageCount(0)
+    setHistoryDraft(null)
 
     try {
-      await addToHistory(props.instanceFolder, text)
+      await addToHistory(props.instanceFolder, resolvedPrompt)
       const updated = await getHistory(props.instanceFolder)
       setHistory(updated)
       setHistoryIndex(-1)
-      await props.onSend(text, currentAttachments)
+      if (isShellMode) {
+        if (props.onRunShell) {
+          await props.onRunShell(resolvedPrompt)
+        } else {
+          await props.onSend(resolvedPrompt, [])
+        }
+      } else {
+        await props.onSend(text, currentAttachments)
+      }
     } catch (error) {
       console.error("Failed to send message:", error)
       alert("Failed to send message: " + (error instanceof Error ? error.message : String(error)))
@@ -482,6 +537,7 @@ export default function PromptInput(props: PromptInputProps) {
     const value = target.value
     setPrompt(value)
     setHistoryIndex(-1)
+    setHistoryDraft(null)
 
     const cursorPos = target.selectionStart
     const textBeforeCursor = value.substring(0, cursorPos)
@@ -654,7 +710,14 @@ export default function PromptInput(props: PromptInputProps) {
     textareaRef?.focus()
   }
 
-  const canSend = () => (prompt().trim().length > 0 || attachments().length > 0) && !props.disabled
+  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 instance = () => getActiveInstance()
 
@@ -663,7 +726,11 @@ export default function PromptInput(props: PromptInputProps) {
       <div
         ref={containerRef}
         class={`prompt-input-wrapper relative ${isDragging() ? "border-2" : ""}`}
-        style={isDragging() ? "border-color: var(--accent-primary); background-color: rgba(0, 102, 255, 0.05);" : ""}
+        style={
+          isDragging()
+            ? "border-color: var(--accent-primary); background-color: rgba(0, 102, 255, 0.05);"
+            : ""
+        }
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
@@ -677,7 +744,7 @@ export default function PromptInput(props: PromptInputProps) {
             instanceClient={instance()!.client}
             searchQuery={searchQuery()}
             textareaRef={textareaRef}
-            workspaceFolder={props.instanceFolder}
+            workspaceId={props.instanceId}
           />
         </Show>
 
@@ -755,8 +822,12 @@ export default function PromptInput(props: PromptInputProps) {
           </Show>
           <textarea
             ref={textareaRef}
-            class="prompt-input"
-            placeholder="Type your message, @file, @agent, or paste images and text..."
+            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}
@@ -773,22 +844,37 @@ export default function PromptInput(props: PromptInputProps) {
           />
         </div>
 
-        <button class="send-button" onClick={handleSend} disabled={!canSend()} aria-label="Send message">
-          <span class="send-icon">▶</span>
+        <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-end">
+        <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
+                  <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>
                 </>
               }
             >
@@ -797,6 +883,9 @@ export default function PromptInput(props: PromptInputProps) {
               </span>
             </Show>
           </HintRow>
+          <Show when={mode() === "shell"}>
+            <HintRow>Shell mode active</HintRow>
+          </Show>
         </div>
       </div>
     </div>

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

@@ -208,9 +208,13 @@ const SessionList: Component<SessionListProps> = (props) => {
     const title = () => session()?.title || "Untitled"
     const status = () => getSessionStatus(props.instanceId, rowProps.sessionId)
     const statusLabel = () => formatSessionStatus(status())
+    const pendingPermission = () => Boolean(session()?.pendingPermission)
+    const statusClassName = () => (pendingPermission() ? "session-permission" : `session-${status()}`)
+    const statusText = () => (pendingPermission() ? "Needs Permission" : statusLabel())
  
     return (
-      <div class="session-list-item group">
+       <div class="session-list-item group">
+
         <button
           class={`session-item-base ${isActive() ? "session-item-active" : "session-item-inactive"}`}
           onClick={() => selectSession(rowProps.sessionId)}
@@ -239,9 +243,9 @@ const SessionList: Component<SessionListProps> = (props) => {
             </Show>
           </div>
           <div class="session-item-row session-item-meta">
-            <span class={`status-indicator session-status session-status-list session-${status()}`}>
+            <span class={`status-indicator session-status session-status-list ${statusClassName()}`}>
               <span class="status-dot" />
-              {statusLabel()}
+              {statusText()}
             </span>
             <div class="session-item-actions">
               <span
@@ -348,7 +352,7 @@ const SessionList: Component<SessionListProps> = (props) => {
         <Show when={userSessionIds().length > 0}>
           <div class="session-section">
             <div class="session-section-header px-3 py-2 text-xs font-semibold text-primary/70 uppercase tracking-wide">
-              User Sessions
+              User Session
             </div>
             <For each={userSessionIds()}>{(id) => <SessionRow sessionId={id} canClose />}</For>
           </div>

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

@@ -0,0 +1,63 @@
+import { createMemo, type Component } from "solid-js"
+import { getSessionInfo } from "../../stores/sessions"
+import { formatTokenTotal } from "../../lib/formatters"
+
+interface ContextUsagePanelProps {
+  instanceId: string
+  sessionId: string
+}
+
+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,
+      },
+  )
+
+  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`
+  })
+
+  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>
+        <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>
+        <div class="text-sm text-primary/90">
+          {contextWindow()
+            ? `${formatTokenTotal(contextUsageTokens())} of ${formatTokenTotal(contextWindow())}`
+            : "Window size unavailable"}
+        </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>
+    </div>
+  )
+}
+
+export default ContextUsagePanel

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

@@ -0,0 +1,150 @@
+import { Show, createMemo, createEffect, onCleanup, 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 PromptInput from "../prompt-input"
+import { instances } from "../../stores/instances"
+import { loadMessages, sendMessage, forkSession, isSessionMessagesLoading, setActiveParentSession, setActiveSession, runShellCommand } from "../../stores/sessions"
+
+interface SessionViewProps {
+  sessionId: string
+  activeSessions: Map<string, Session>
+  instanceId: string
+  instanceFolder: string
+  escapeInDebounce: boolean
+}
+
+export const SessionView: Component<SessionViewProps> = (props) => {
+  const session = () => props.activeSessions.get(props.sessionId)
+  const messagesLoading = createMemo(() => isSessionMessagesLoading(props.instanceId, props.sessionId))
+
+  createEffect(() => {
+    const currentSession = session()
+    if (currentSession) {
+      loadMessages(props.instanceId, currentSession.id).catch(console.error)
+    }
+  })
+
+  async function handleSendMessage(prompt: string, attachments: Attachment[]) {
+    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 {
+    const currentSession = session()
+    if (!currentSession) return null
+
+    const targetMessage = currentSession.messages.find((m) => m.id === messageId)
+    const targetInfo = currentSession.messagesInfo.get(messageId)
+    if (!targetMessage || targetInfo?.role !== "user") {
+      return null
+    }
+
+    const 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")
+  }
+
+  async function handleRevert(messageId: string) {
+    const instance = instances().get(props.instanceId)
+    if (!instance || !instance.client) return
+
+    try {
+      await instance.client.session.revert({
+        path: { id: props.sessionId },
+        body: { messageID: messageId },
+      })
+
+      const restoredText = getUserMessageText(messageId)
+      if (restoredText) {
+        const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
+        if (textarea) {
+          textarea.value = restoredText
+          textarea.dispatchEvent(new Event("input", { bubbles: true }))
+          textarea.focus()
+        }
+      }
+    } catch (error) {
+      console.error("Failed to revert:", error)
+      alert("Failed to revert to message")
+    }
+  }
+
+  async function handleFork(messageId?: string) {
+    if (!messageId) {
+      console.warn("Fork requires a user message id")
+      return
+    }
+
+    const restoredText = getUserMessageText(messageId)
+
+    try {
+      const forkedSession = await forkSession(props.instanceId, props.sessionId, { messageId })
+
+      const parentToActivate = forkedSession.parentId ?? forkedSession.id
+      setActiveParentSession(props.instanceId, parentToActivate)
+      if (forkedSession.parentId) {
+        setActiveSession(props.instanceId, forkedSession.id)
+      }
+
+      await loadMessages(props.instanceId, forkedSession.id).catch(console.error)
+
+      if (restoredText) {
+        const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
+        if (textarea) {
+          textarea.value = restoredText
+          textarea.dispatchEvent(new Event("input", { bubbles: true }))
+          textarea.focus()
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fork session:", error)
+      alert("Failed to fork session")
+    }
+  }
+
+
+  return (
+    <Show
+      when={session()}
+      fallback={
+        <div class="flex items-center justify-center h-full">
+          <div class="text-center text-gray-500">Session not found</div>
+        </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}
+          />
+
+          <PromptInput
+            instanceId={props.instanceId}
+            instanceFolder={props.instanceFolder}
+            sessionId={s().id}
+            onSend={handleSendMessage}
+            onRunShell={handleRunShell}
+            escapeInDebounce={props.escapeInDebounce}
+          />
+        </div>
+      )}
+    </Show>
+  )
+}
+
+export default SessionView

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

@@ -1,4 +1,4 @@
-import { createSignal, Show, For, createEffect, onCleanup } from "solid-js"
+import { createSignal, Show, For, createEffect, createMemo, onCleanup } from "solid-js"
 import { isToolCallExpanded, toggleToolCallExpanded, setToolCallExpanded } from "../stores/tool-call-state"
 import { Markdown } from "./markdown"
 import { ToolCallDiffViewer } from "./diff-viewer"
@@ -6,7 +6,9 @@ import { useTheme } from "../lib/theme"
 import { getLanguageFromPath } from "../lib/markdown"
 import { isRenderableDiffText } from "../lib/diff-utils"
 import { getToolRenderCache, setToolRenderCache } from "../lib/tool-render-cache"
-import { preferences, setDiffViewMode, type DiffViewMode } from "../stores/preferences"
+import { useConfig } from "../stores/preferences"
+import type { DiffViewMode } from "../stores/preferences"
+import { sendPermissionResponse } from "../stores/instances"
 import type { TextPart, SDKPart, ClientPart } from "../types/message"
 
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
@@ -80,6 +82,8 @@ interface ToolCallProps {
   messageId?: string
   messageVersion?: number
   partVersion?: number
+  instanceId: string
+  sessionId: string
 }
 
 function getToolIcon(tool: string): string {
@@ -137,6 +141,34 @@ function getRelativePath(path: string): string {
 
 const diffCapableTools = new Set(["edit", "patch"])
 
+interface LspRangePosition {
+  line?: number
+  character?: number
+}
+
+interface LspRange {
+  start?: LspRangePosition
+}
+
+interface LspDiagnostic {
+  message?: string
+  severity?: number
+  range?: LspRange
+}
+
+interface DiagnosticEntry {
+  id: string
+  severity: number
+  tone: "error" | "warning" | "info"
+  label: string
+  icon: string
+  message: string
+  filePath: string
+  displayPath: string
+  line: number
+  column: number
+}
+
 interface DiffPayload {
   diffText: string
   filePath?: string
@@ -176,17 +208,177 @@ function extractDiffPayload(toolName: string, state: ToolState): DiffPayload | n
   return { diffText, filePath }
 }
 
+function normalizeDiagnosticPath(path: string) {
+  return path.replace(/\\/g, "/")
+}
+
+function determineSeverityTone(severity?: number): DiagnosticEntry["tone"] {
+  if (severity === 1) return "error"
+  if (severity === 2) return "warning"
+  return "info"
+}
+
+function getSeverityMeta(tone: DiagnosticEntry["tone"]) {
+  if (tone === "error") return { label: "ERR", icon: "!", rank: 0 }
+  if (tone === "warning") return { label: "WARN", icon: "!", rank: 1 }
+  return { label: "INFO", icon: "i", rank: 2 }
+}
+
+function extractDiagnostics(toolName: string, state: ToolState | undefined): DiagnosticEntry[] {
+  if (!state) return []
+  const supportsMetadata = isToolStateRunning(state) || isToolStateCompleted(state) || isToolStateError(state)
+  if (!supportsMetadata) return []
+
+  const metadata = (state.metadata || {}) as Record<string, unknown>
+  const input = (state.input || {}) as Record<string, unknown>
+  const diagnosticsMap = metadata?.diagnostics as Record<string, LspDiagnostic[] | undefined> | undefined
+  if (!diagnosticsMap) return []
+
+  const preferredPath = [
+    input.filePath,
+    metadata.filePath,
+    metadata.filepath,
+    input.path,
+  ].find((value) => typeof value === "string" && value.length > 0) as string | undefined
+
+  const normalizedPreferred = preferredPath ? normalizeDiagnosticPath(preferredPath) : undefined
+  const candidateEntries = Object.entries(diagnosticsMap).filter(([, items]) => Array.isArray(items) && items.length > 0)
+  if (candidateEntries.length === 0) return []
+
+  const prioritizedEntries = (() => {
+    if (!normalizedPreferred) return candidateEntries
+    const matched = candidateEntries.filter(([path]) => {
+      const normalized = normalizeDiagnosticPath(path)
+      if (normalized === normalizedPreferred) return true
+      if (normalized.endsWith(`/${normalizedPreferred}`)) return true
+      const normalizedBase = normalized.split("/").pop()
+      const preferredBase = normalizedPreferred.split("/").pop()
+      return normalizedBase && preferredBase ? normalizedBase === preferredBase : false
+    })
+    return matched.length > 0 ? matched : candidateEntries
+  })()
+
+  const entries: DiagnosticEntry[] = []
+  for (const [pathKey, list] of prioritizedEntries) {
+    if (!Array.isArray(list)) continue
+    const normalizedPath = normalizeDiagnosticPath(pathKey)
+    for (let index = 0; index < list.length; index++) {
+      const diagnostic = list[index]
+      if (!diagnostic || typeof diagnostic.message !== "string") continue
+      const tone = determineSeverityTone(typeof diagnostic.severity === "number" ? diagnostic.severity : undefined)
+      const severityMeta = getSeverityMeta(tone)
+      const line = typeof diagnostic.range?.start?.line === "number" ? diagnostic.range.start.line + 1 : 0
+      const column = typeof diagnostic.range?.start?.character === "number" ? diagnostic.range.start.character + 1 : 0
+      entries.push({
+        id: `${normalizedPath}-${index}-${diagnostic.message}`,
+        severity: severityMeta.rank,
+        tone,
+        label: severityMeta.label,
+        icon: severityMeta.icon,
+        message: diagnostic.message,
+        filePath: normalizedPath,
+        displayPath: getRelativePath(normalizedPath),
+        line,
+        column,
+      })
+    }
+  }
+
+  return entries.sort((a, b) => a.severity - b.severity)
+}
+
+function diagnosticFileName(entries: DiagnosticEntry[]) {
+  const first = entries[0]
+  return first ? first.displayPath : ""
+}
+
+function renderDiagnosticsSection(
+  entries: DiagnosticEntry[],
+  expanded: boolean,
+  toggle: () => void,
+  toolIcon: string,
+  fileLabel: string,
+) {
+  if (entries.length === 0) return null
+  return (
+    <div class="tool-call-diagnostics-wrapper">
+      <button
+        type="button"
+        class="tool-call-diagnostics-heading"
+        aria-expanded={expanded}
+        onClick={toggle}
+      >
+        <span class="tool-call-icon" aria-hidden="true">
+          {expanded ? "▼" : "▶"}
+        </span>
+        <span class="tool-call-emoji" aria-hidden="true">🛠</span>
+        <span class="tool-call-summary">Diagnostics</span>
+        <span class="tool-call-diagnostics-file" title={fileLabel}>{fileLabel}</span>
+      </button>
+      <Show when={expanded}>
+        <div class="tool-call-diagnostics" role="region" aria-label="Diagnostics">
+          <div class="tool-call-diagnostics-body" role="list">
+            <For each={entries}>
+              {(entry) => (
+                <div class="tool-call-diagnostic-row" role="listitem">
+                  <span class={`tool-call-diagnostic-chip tool-call-diagnostic-${entry.tone}`}>
+                    <span class="tool-call-diagnostic-chip-icon">{entry.icon}</span>
+                    <span>{entry.label}</span>
+                  </span>
+                  <span class="tool-call-diagnostic-path" title={entry.filePath}>
+                    {entry.displayPath}
+                    <span class="tool-call-diagnostic-coords">
+                      :L{entry.line || "-"}:C{entry.column || "-"}
+                    </span>
+                  </span>
+                  <span class="tool-call-diagnostic-message">{entry.message}</span>
+                </div>
+              )}
+            </For>
+          </div>
+        </div>
+      </Show>
+    </div>
+  )
+}
+
 export default function ToolCall(props: ToolCallProps) {
+  const { preferences, setDiffViewMode } = useConfig()
   const { isDark } = useTheme()
   const toolCallId = () => props.toolCallId || props.toolCall?.id || ""
   const expanded = () => isToolCallExpanded(toolCallId())
-  const [initializedId, setInitializedId] = createSignal<string | null>(null)
+  const toolOutputDefaultExpanded = createMemo(() => (preferences().toolOutputExpansion || "expanded") === "expanded")
+  const diagnosticsDefaultExpanded = createMemo(() => (preferences().diagnosticsExpansion || "expanded") === "expanded")
+  const [appliedPreference, setAppliedPreference] = createSignal<boolean | null>(null)
+  const pendingPermission = createMemo(() => props.toolCall.pendingPermission)
+  const permissionDetails = createMemo(() => pendingPermission()?.permission)
+  const isPermissionActive = createMemo(() => pendingPermission()?.active === true)
+  const activePermissionKey = createMemo(() => {
+    const permission = permissionDetails()
+    return permission && isPermissionActive() ? permission.id : ""
+  })
+  const [permissionSubmitting, setPermissionSubmitting] = createSignal(false)
+  const [permissionError, setPermissionError] = createSignal<string | null>(null)
+  const [diagnosticsExpanded, setDiagnosticsExpanded] = createSignal(diagnosticsDefaultExpanded())
+  const diagnosticsEntries = createMemo(() => {
+    const tool = props.toolCall?.tool || ""
+    const state = props.toolCall?.state
+    if (!state) return []
+    return extractDiagnostics(tool, state)
+  })
 
+  createEffect(() => {
+    const preferred = diagnosticsDefaultExpanded()
+    setDiagnosticsExpanded((prev) => (prev === preferred ? prev : preferred))
+  })
 
   let scrollContainerRef: HTMLDivElement | undefined
-
+  let toolCallRootRef: HTMLDivElement | undefined
+ 
   const handleScrollRendered = () => {
-    const id = toolCallId()
+ 
+   const id = toolCallId()
+
     if (!id || !scrollContainerRef) return
     restoreScrollState(id, scrollContainerRef)
   }
@@ -210,13 +402,35 @@ export default function ToolCall(props: ToolCallProps) {
 
   createEffect(() => {
     const id = toolCallId()
-    if (!id || initializedId() === id) return
+    if (!id) return
+    const toolName = props.toolCall?.tool || ""
+    const desiredExpansion = toolName === "read" ? false : toolOutputDefaultExpanded()
+    if (appliedPreference() === desiredExpansion) return
+    setToolCallExpanded(id, desiredExpansion)
+    setAppliedPreference(desiredExpansion)
+  })
 
-    const tool = props.toolCall?.tool || ""
-    const shouldExpand = tool !== "read"
+  createEffect(() => {
+    const id = toolCallId()
+    if (!id) return
+    setAppliedPreference((prev) => (prev === null ? prev : null))
+  })
 
-    setToolCallExpanded(id, shouldExpand)
-    setInitializedId(id)
+  createEffect(() => {
+    if (!pendingPermission()) return
+    const id = toolCallId()
+    if (!id) return
+    setToolCallExpanded(id, true)
+  })
+
+  createEffect(() => {
+    const permission = permissionDetails()
+    if (!permission) {
+      setPermissionSubmitting(false)
+      setPermissionError(null)
+    } else {
+      setPermissionError(null)
+    }
   })
 
   // Cleanup cache entry when component unmounts or toolCallId changes
@@ -243,6 +457,34 @@ export default function ToolCall(props: ToolCallProps) {
     })
   })
 
+  createEffect(() => {
+    const activeKey = activePermissionKey()
+    if (!activeKey) return
+    requestAnimationFrame(() => {
+      toolCallRootRef?.scrollIntoView({ block: "center", behavior: "smooth" })
+    })
+  })
+
+  createEffect(() => {
+    const activeKey = activePermissionKey()
+    if (!activeKey) return
+    const handler = (event: KeyboardEvent) => {
+      if (event.key === "Enter") {
+        event.preventDefault()
+        handlePermissionResponse("once")
+      } else if (event.key === "a" || event.key === "A") {
+        event.preventDefault()
+        handlePermissionResponse("always")
+      } else if (event.key === "d" || event.key === "D") {
+        event.preventDefault()
+        handlePermissionResponse("reject")
+      }
+    }
+    document.addEventListener("keydown", handler)
+    onCleanup(() => document.removeEventListener("keydown", handler))
+  })
+
+
   const statusIcon = () => {
     const status = props.toolCall?.state?.status || ""
     switch (status) {
@@ -264,6 +506,11 @@ export default function ToolCall(props: ToolCallProps) {
     return `tool-call-status-${status}`
   }
 
+  const combinedStatusClass = () => {
+    const base = statusClass()
+    return pendingPermission() ? `${base} tool-call-awaiting-permission` : base
+  }
+
   function toggle() {
     toggleToolCallExpanded(toolCallId())
   }
@@ -299,6 +546,24 @@ export default function ToolCall(props: ToolCallProps) {
     }
   }
 
+  async function handlePermissionResponse(response: "once" | "always" | "reject") {
+    const permission = permissionDetails()
+    if (!permission || !isPermissionActive()) {
+      return
+    }
+    setPermissionSubmitting(true)
+    setPermissionError(null)
+    try {
+      const sessionId = permission.sessionID || props.sessionId
+      await sendPermissionResponse(props.instanceId, sessionId, permission.id, response)
+    } catch (error) {
+      console.error("Failed to send permission response:", error)
+      setPermissionError(error instanceof Error ? error.message : "Unable to update permission")
+    } finally {
+      setPermissionSubmitting(false)
+    }
+  }
+
   const getTodoTitle = () => {
     const state = props.toolCall?.state || {}
     if (state.status !== "completed") return "Plan"
@@ -422,10 +687,11 @@ export default function ToolCall(props: ToolCallProps) {
     return renderMarkdownTool(toolName, state)
   }
 
-  function renderDiffTool(payload: DiffPayload) {
+  function renderDiffTool(payload: DiffPayload, options?: { cacheKeySuffix?: string; disableScrollTracking?: boolean; label?: string }) {
     const relativePath = payload.filePath ? getRelativePath(payload.filePath) : ""
-    const toolbarLabel = relativePath ? `Diff · ${relativePath}` : "Diff"
-    const cacheKey = makeRenderCacheKey(toolCallId(), props.messageId, props.messageVersion, props.partVersion)
+    const toolbarLabel = options?.label || (relativePath ? `Diff · ${relativePath}` : "Diff")
+    const cacheKeyBase = makeRenderCacheKey(toolCallId(), props.messageId, props.messageVersion, props.partVersion)
+    const cacheKey = options?.cacheKeySuffix ? `${cacheKeyBase}${options.cacheKeySuffix}` : cacheKeyBase
     const diffMode = () => (preferences().diffViewMode || "split") as DiffViewMode
     const themeKey = isDark() ? "dark" : "light"
 
@@ -451,15 +717,21 @@ export default function ToolCall(props: ToolCallProps) {
         // Cache will be updated by the diff viewer component itself
         // We'll capture HTML from the rendered component
       }
-      handleScrollRendered()
+      if (!options?.disableScrollTracking) {
+        handleScrollRendered()
+      }
     }
 
     return (
       <div
         class="message-text tool-call-markdown tool-call-markdown-large tool-call-diff-shell"
-        ref={(element) => initializeScrollContainer(element)}
-        onScroll={(event) => updateScrollState(toolCallId(), event.currentTarget)}
+        ref={(element) => {
+          if (options?.disableScrollTracking) return
+          initializeScrollContainer(element)
+        }}
+        onScroll={options?.disableScrollTracking ? undefined : (event) => updateScrollState(toolCallId(), event.currentTarget)}
       >
+
         <div class="tool-call-diff-toolbar" role="group" aria-label="Diff view mode">
           <span class="tool-call-diff-toolbar-label">{toolbarLabel}</span>
           <div class="tool-call-diff-toggle">
@@ -800,11 +1072,103 @@ export default function ToolCall(props: ToolCallProps) {
     return null
   }
 
+  const renderPermissionBlock = () => {
+    const permission = permissionDetails()
+    if (!permission) return null
+    const active = isPermissionActive()
+    const metadata = (permission.metadata ?? {}) as Record<string, unknown>
+    const diffValue = typeof metadata.diff === "string" ? (metadata.diff as string) : null
+    const diffPathRaw = (() => {
+      if (typeof metadata.filePath === "string") {
+        return metadata.filePath as string
+      }
+      if (typeof metadata.path === "string") {
+        return metadata.path as string
+      }
+      return undefined
+    })()
+    const diffPayload = diffValue && diffValue.trim().length > 0 ? { diffText: diffValue, filePath: diffPathRaw } : null
+
+    return (
+      <div class={`tool-call-permission ${active ? "tool-call-permission-active" : "tool-call-permission-queued"}`}>
+        <div class="tool-call-permission-header">
+          <span class="tool-call-permission-label">{active ? "Permission Required" : "Permission Queued"}</span>
+          <span class="tool-call-permission-type">{permission.type}</span>
+        </div>
+        <div class="tool-call-permission-body">
+          <div class="tool-call-permission-title">
+            <code>{permission.title}</code>
+          </div>
+          <Show when={diffPayload}>
+            {(payload) => (
+              <div class="tool-call-permission-diff">
+                {renderDiffTool(payload(), {
+                  cacheKeySuffix: "::permission",
+                  disableScrollTracking: true,
+                  label: payload().filePath ? `Requested diff · ${getRelativePath(payload().filePath || "")}` : "Requested diff",
+                })}
+              </div>
+            )}
+          </Show>
+          <Show
+            when={active}
+            fallback={<p class="tool-call-permission-queued-text">Waiting for earlier permission responses.</p>}
+          >
+            <div class="tool-call-permission-actions">
+              <div class="tool-call-permission-buttons">
+                <button
+                  type="button"
+                  class="tool-call-permission-button"
+                  disabled={permissionSubmitting()}
+                  onClick={() => handlePermissionResponse("once")}
+                >
+                  Allow Once
+                </button>
+                <button
+                  type="button"
+                  class="tool-call-permission-button"
+                  disabled={permissionSubmitting()}
+                  onClick={() => handlePermissionResponse("always")}
+                >
+                  Always Allow
+                </button>
+                <button
+                  type="button"
+                  class="tool-call-permission-button"
+                  disabled={permissionSubmitting()}
+                  onClick={() => handlePermissionResponse("reject")}
+                >
+                  Deny
+                </button>
+              </div>
+              <div class="tool-call-permission-shortcuts">
+                <kbd class="kbd">Enter</kbd>
+                <span>Allow once</span>
+                <kbd class="kbd">A</kbd>
+                <span>Always allow</span>
+                <kbd class="kbd">D</kbd>
+                <span>Deny</span>
+              </div>
+            </div>
+            <Show when={permissionError()}>
+              <div class="tool-call-permission-error">{permissionError()}</div>
+            </Show>
+          </Show>
+        </div>
+      </div>
+    )
+  }
+
   const toolName = () => props.toolCall?.tool || ""
   const status = () => props.toolCall?.state?.status || ""
 
   return (
-    <div class={`tool-call ${statusClass()}`}>
+    <div
+      ref={(element) => {
+        toolCallRootRef = element || undefined
+      }}
+      class={`tool-call ${combinedStatusClass()}`}
+    >
       <button class="tool-call-header" onClick={toggle} aria-expanded={expanded()}>
         <span class="tool-call-icon">{expanded() ? "▼" : "▶"}</span>
         <span class="tool-call-emoji">{getToolIcon(toolName())}</span>
@@ -815,9 +1179,12 @@ export default function ToolCall(props: ToolCallProps) {
       <Show when={expanded()}>
         <div class="tool-call-details">
           {renderToolBody()}
+
           {renderError()}
 
-          <Show when={status() === "pending"}>
+          {renderPermissionBlock()}
+
+          <Show when={status() === "pending" && !pendingPermission()}>
             <div class="tool-call-pending-message">
               <span class="spinner-small"></span>
               <span>Waiting for permission...</span>
@@ -825,6 +1192,16 @@ export default function ToolCall(props: ToolCallProps) {
           </Show>
         </div>
       </Show>
+
+      <Show when={diagnosticsEntries().length}>
+        {renderDiagnosticsSection(
+          diagnosticsEntries(),
+          diagnosticsExpanded(),
+          () => setDiagnosticsExpanded((prev) => !prev),
+          getToolIcon(toolName()),
+          diagnosticFileName(diagnosticsEntries()),
+        )}
+      </Show>
     </div>
   )
 }