commit 4b2edf73188e5dc63cc6a1deb71c4c5eb0f87de2
Author: Bohdan Triapitsyn <artmore@protonmail.com>
Date:   Sun Dec 7 19:32:53 2025 +0200

    Initial public release

diff --git a/.env b/.env
new file mode 100644
index 00000000..c0d66521
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+NODE_ENV=development
diff --git a/.github/workflows/opencode.yml b/.github/workflows/opencode.yml
new file mode 100644
index 00000000..1f4ca012
--- /dev/null
+++ b/.github/workflows/opencode.yml
@@ -0,0 +1,29 @@
+name: opencode
+
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  opencode:
+    if: |
+      contains(github.event.comment.body, ' /oc') ||
+      startsWith(github.event.comment.body, '/oc') ||
+      contains(github.event.comment.body, ' /opencode') ||
+      startsWith(github.event.comment.body, '/opencode')
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      contents: write
+      pull-requests: write
+      issues: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Run opencode
+        uses: sst/opencode/github@latest
+        env:
+          ZHIPU_API_KEY: ${{ secrets.ZHIPU_API_KEY }}
+        with:
+          model: zai-coding-plan/glm-4.6
\ No newline at end of file
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 00000000..c6158055
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,269 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version to release (e.g., 0.1.0)'
+        required: true
+        type: string
+      dry_run:
+        description: 'Dry run (skip publishing)'
+        required: false
+        default: false
+        type: boolean
+
+env:
+  CARGO_INCREMENTAL: 0
+  RUST_BACKTRACE: short
+
+permissions:
+  contents: write
+
+jobs:
+  create-release:
+    runs-on: ubuntu-latest
+    outputs:
+      release_id: ${{ steps.create_release.outputs.id }}
+      release_upload_url: ${{ steps.create_release.outputs.upload_url }}
+      version: ${{ steps.get_version.outputs.version }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Get version
+        id: get_version
+        run: |
+          if [[ -n "${{ github.event.inputs.version }}" ]]; then
+            echo "version=${{ github.event.inputs.version }}" >> $GITHUB_OUTPUT
+          elif [[ "${{ github.ref }}" == refs/tags/* ]]; then
+            echo "version=${GITHUB_REF#refs/tags/v}" >> $GITHUB_OUTPUT
+          else
+            echo "version=0.0.0-dev" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Extract changelog for release
+        env:
+          VERSION: ${{ steps.get_version.outputs.version }}
+        run: |
+          node - <<'NODE'
+          const fs = require('fs');
+          const version = process.env.VERSION;
+          const changelogPath = 'CHANGELOG.md';
+          if (!fs.existsSync(changelogPath)) {
+            throw new Error('CHANGELOG.md not found; add it before releasing.');
+          }
+          const changelog = fs.readFileSync(changelogPath, 'utf8');
+          const sections = changelog.split(/^## /m);
+          const section = sections.find(s => s.startsWith('[' + version + ']'));
+          if (!section) {
+            throw new Error('Changelog section [' + version + '] not found. Add a section like "## [' + version + '] - YYYY-MM-DD".');
+          }
+          const content = ('## ' + section).trim();
+          fs.mkdirSync('artifacts', { recursive: true });
+          fs.writeFileSync('artifacts/release-notes.md', content + '\n');
+          NODE
+
+      - name: Create GitHub Release
+        id: create_release
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: v${{ steps.get_version.outputs.version }}
+          draft: true
+          generate_release_notes: false
+          body_path: artifacts/release-notes.md
+          name: OpenChamber v${{ steps.get_version.outputs.version }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  build-desktop-macos:
+    needs: create-release
+    runs-on: macos-14
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+
+      - name: Install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Rust cache
+        uses: swatinem/rust-cache@v2
+        with:
+          workspaces: packages/desktop/src-tauri
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install Apple Certificate
+        env:
+          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+        run: |
+          # Create temporary keychain
+          KEYCHAIN_PATH=$RUNNER_TEMP/app-signing.keychain-db
+          KEYCHAIN_PASSWORD=$(openssl rand -base64 32)
+
+          security create-keychain -p "$KEYCHAIN_PASSWORD" "$KEYCHAIN_PATH"
+          security set-keychain-settings -lut 21600 "$KEYCHAIN_PATH"
+          security unlock-keychain -p "$KEYCHAIN_PASSWORD" "$KEYCHAIN_PATH"
+
+          # Import certificate
+          echo "$APPLE_CERTIFICATE" | base64 --decode > $RUNNER_TEMP/certificate.p12
+          security import $RUNNER_TEMP/certificate.p12 \
+            -P "$APPLE_CERTIFICATE_PASSWORD" \
+            -A -t cert -f pkcs12 \
+            -k "$KEYCHAIN_PATH"
+
+          security list-keychain -d user -s "$KEYCHAIN_PATH"
+          security set-key-partition-list -S apple-tool:,apple:,codesign: \
+            -s -k "$KEYCHAIN_PASSWORD" "$KEYCHAIN_PATH"
+
+      - name: Set up notarization credentials
+        env:
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+        run: |
+          # Validate secrets are set
+          if [ -z "$APPLE_ID" ] || [ -z "$APPLE_TEAM_ID" ] || [ -z "$APPLE_PASSWORD" ]; then
+            echo "Error: Missing Apple notarization credentials"
+            exit 1
+          fi
+
+          xcrun notarytool store-credentials "openchamber-notarize" \
+            --apple-id "$APPLE_ID" \
+            --team-id "$APPLE_TEAM_ID" \
+            --password "$APPLE_PASSWORD"
+
+      - name: Build UI package
+        run: pnpm -C packages/ui run build
+
+      - name: Build Desktop app
+        run: pnpm desktop:build
+        env:
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
+          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+
+      - name: Prepare release artifacts
+        run: |
+          mkdir -p artifacts
+          VERSION="${{ needs.create-release.outputs.version }}"
+
+          # Copy DMG
+          cp packages/desktop/src-tauri/target/release/bundle/dmg/*.dmg artifacts/ 2>/dev/null || true
+
+          # Copy tar.gz and signature for updater
+          cp packages/desktop/src-tauri/target/release/bundle/macos/*.tar.gz artifacts/ 2>/dev/null || true
+          cp packages/desktop/src-tauri/target/release/bundle/macos/*.tar.gz.sig artifacts/ 2>/dev/null || true
+
+      - name: Generate update manifest
+        run: |
+          VERSION="${{ needs.create-release.outputs.version }}"
+
+          # Find the signature file
+          SIG_FILE=$(find artifacts -name "*.tar.gz.sig" | head -1)
+          if [ -f "$SIG_FILE" ]; then
+            SIGNATURE=$(cat "$SIG_FILE")
+          else
+            SIGNATURE=""
+          fi
+
+          # Find the tar.gz file name
+          TAR_FILE=$(find artifacts -name "*.tar.gz" ! -name "*.sig" | head -1)
+          TAR_NAME=$(basename "$TAR_FILE" 2>/dev/null || echo "OpenChamber.app.tar.gz")
+
+          cat > artifacts/latest.json << EOF
+          {
+            "version": "${VERSION}",
+            "notes": "See release notes at https://github.com/${{ github.repository }}/releases/tag/v${VERSION}",
+            "pub_date": "$(date -u +%Y-%m-%dT%H:%M:%SZ)",
+            "platforms": {
+              "darwin-aarch64": {
+                "signature": "${SIGNATURE}",
+                "url": "https://github.com/${{ github.repository }}/releases/download/v${VERSION}/${TAR_NAME}"
+              }
+            }
+          }
+          EOF
+
+          echo "Generated latest.json:"
+          cat artifacts/latest.json
+
+      - name: Upload release assets
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: v${{ needs.create-release.outputs.version }}
+          files: |
+            artifacts/*.dmg
+            artifacts/*.tar.gz
+            artifacts/*.tar.gz.sig
+            artifacts/latest.json
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  publish-npm:
+    needs: create-release
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build packages
+        run: pnpm run build
+
+      - name: Create npm tarball
+        working-directory: packages/web
+        run: npm pack
+
+      - name: Upload npm tarball to release
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: v${{ needs.create-release.outputs.version }}
+          files: packages/web/*.tgz
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Publish to npm
+        if: ${{ github.event.inputs.dry_run != 'true' }}
+        working-directory: packages/web
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  finalize-release:
+    needs: [create-release, build-desktop-macos, publish-npm]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Publish release
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: v${{ needs.create-release.outputs.version }}
+          draft: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..4ac51bd5
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+node_modules
+dist
+dist-ssr
+release
+*.local
+*.tgz
+/npm
+/tsc
+/openchamber@*
+local-dev*
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 00000000..a24992d1
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+lts
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 00000000..7d5d0c2f
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,138 @@
+# OpenChamber - AI Agent & Contributor Reference
+
+Technical reference for AI coding agents and human contributors working on this project.
+
+## Core Purpose
+
+Web and desktop interface for OpenCode AI coding agent. Provides cross-device continuity, remote accessibility, and a unified chat interface using the OpenCode API backend.
+
+## Tech Stack
+
+- **React 19.1.1**: Modern React with concurrent features
+- **TypeScript 5.8.3**: Full type safety
+- **Vite 7.1.2**: Build tool with HMR and proxy
+- **Tailwind CSS v4.0.0**: Latest `@import` syntax
+- **Zustand 5.0.8**: State management with persistence
+- **@opencode-ai/sdk**: Official OpenCode SDK with typed endpoints and SSE
+- **@remixicon/react**: Icon system
+- **@radix-ui primitives**: Accessible component foundations
+
+## Architecture Overview (Monorepo)
+
+Workspaces:
+- `packages/ui` - Shared UI components and stores
+- `packages/web` - Web runtime, Express server, CLI
+- `packages/desktop` - Tauri desktop app with native APIs
+
+### Core Components (UI)
+In `packages/ui/src/components/`: ChatContainer, MessageList, ChatMessage, StreamingAnimatedText, ChatInput, FileAttachment, ModelControls, PermissionCard, SessionList, SessionSwitcherDialog, DirectoryTree, DirectoryExplorerDialog, MainLayout, Header, Sidebar, SettingsDialog, AgentsPage, CommandsPage, GitIdentitiesPage, ProvidersPage, SessionsPage, SettingsPage, CommandPalette, HelpDialog, ConfigUpdateOverlay, ContextUsageDisplay, ErrorBoundary, MemoryDebugPanel, MobileOverlayPanel, ThemeDemo, ThemeSwitcher.
+
+In `packages/ui/src/components/views/`: ChatView, GitView, DiffView, TerminalView.
+
+In `packages/ui/src/components/terminal/`: TerminalViewport
+
+### State Management (UI)
+In `packages/ui/src/stores/`: ConfigStore, SessionStore, DirectoryStore, UIStore, FileStore, MessageStore, ContextStore, PermissionStore, AgentsStore, CommandsStore, GitIdentitiesStore, TerminalStore
+
+### OpenCode SDK Integration (UI)
+In `packages/ui/src/lib/opencode/`: client.ts wrapper around `@opencode-ai/sdk` with directory-aware API calls, SDK methods (session.*, message.*, agent.*, provider.*, config.*, project.*, path.*), AsyncGenerator SSE streaming (2 retry attempts, 500ms->8s backoff), automatic directory parameter injection.
+
+In `packages/ui/src/hooks/`: useEventStream.ts for real-time SSE connection management.
+
+### Web Runtime (server/CLI)
+Express server and CLI in `packages/web`: API adapters in `packages/web/src/api`, server in `packages/web/server/index.js` (git/terminal/config), UI bundle imported from `@openchamber/ui`.
+
+### Desktop Runtime (Tauri)
+Native desktop app in `packages/desktop`: Tauri backend in `src-tauri/` (Rust), frontend API adapters in `src/api/` (settings, permissions, diagnostics, files, git, terminal, notifications, tools), bridge layer in `src/lib/` for Tauri IPC communication.
+
+## Development Commands
+
+### Code Validation
+Always validate changes before committing:
+
+```bash
+pnpm -r type-check   # TypeScript validation
+pnpm -r lint         # ESLint checks
+pnpm -r build        # Production build
+```
+
+### Building
+```bash
+pnpm run build                 # Build all packages
+pnpm run desktop:build         # Build desktop app
+```
+
+## Key Patterns
+
+### Section-Based Navigation
+Modular section architecture with dedicated pages and sidebars. Sections: Agents, Commands, Git Identities, Providers, Sessions, Settings. Independent state management and routing.
+
+### File Attachments
+Drag-and-drop upload with 10MB limit (`FileAttachment.tsx`), Data URL encoding, type validation with fallbacks, integrated via `useFileStore.addAttachedFile()`.
+
+### Theme System
+In `packages/ui/src/lib/theme/`: TypeScript-based themes (Flexoki Light and Dark), CSS variable generation, component-specific theming, Tailwind CSS v4 integration.
+
+### Typography System
+In `packages/ui/src/lib/`: Semantic typography with 6 CSS variables, theme-independent scales. **CRITICAL**: Always use semantic typography classes, never hardcoded font sizes.
+
+### Streaming Architecture
+SDK-managed SSE with AsyncGenerator, temp->real ID swap, pending-user guards, empty-response detection via `window.__opencodeDebug`.
+
+## Development Guidelines
+
+### Lint & Type Safety
+
+- Never land code that introduces new ESLint or TypeScript errors
+- Run `pnpm run lint` and `pnpm run type-check` before finalizing changes
+- Adding `eslint-disable` requires justification in a comment explaining why typing is impossible
+- Do **not** use `any` or `unknown` casts as escape hatches; build narrow adapter interfaces instead
+- Refactors or new features must keep existing lint/type baselines green
+
+### Theme Integration
+
+- Check theme definitions before adding colors or font sizes to new components
+- Always use theme-defined typography classes, never hardcoded font sizes
+- Reference existing theme colors instead of adding new ones
+- Ensure new components support both light and dark themes
+- Use theme-generated CSS variables for dynamic styling
+
+### Code Standards
+
+- **Functional components**: Exclusive use of function components with hooks
+- **Custom hooks**: Extract logic for reusability
+- **Type-first development**: Comprehensive TypeScript usage
+- **Component composition**: Prefer composition over inheritance
+
+## Feature Implementation Map
+
+### Directory & File System
+`packages/ui/src/components/session/`: DirectoryTree, DirectoryExplorerDialog
+`packages/ui/src/stores/`: DirectoryStore
+Backend: `packages/web/server/index.js` with `listLocalDirectory()`, `getFilesystemHome()`
+
+### Session Switcher
+`SessionSwitcherDialog.tsx`: Collapsible date groups, mobile parity with MobileOverlayPanel, Git worktree and shared session chips, streaming indicators.
+
+### Settings & Configuration
+`packages/ui/src/components/sections/`: AgentsPage, CommandsPage, GitIdentitiesPage, ProvidersPage, SessionsPage, SettingsPage
+Related stores: useAgentsStore, useCommandsStore, useConfigStore, useGitIdentitiesStore
+
+### Git Operations
+`packages/ui/src/components/views/`: GitView, DiffView
+`packages/ui/src/stores/`: useGitIdentitiesStore
+Backend: `packages/ui/src/lib/gitApi.ts` + `packages/web/server/index.js` (simple-git wrapper)
+
+### Terminal
+`packages/ui/src/components/views/`: TerminalView
+`packages/ui/src/components/terminal/`: TerminalViewport (Xterm.js with FitAddon)
+`packages/ui/src/stores/`: useTerminalStore
+Backend: `packages/web/server/index.js` (node-pty wrapper with SSE)
+
+### Theme System
+`packages/ui/src/lib/theme/`: themes (2 definitions), cssGenerator, syntaxThemeGenerator
+`packages/ui/src/components/providers/`: ThemeProvider
+
+### Mobile & UX
+`packages/ui/src/components/ui/`: MobileOverlayPanel
+`packages/ui/src/hooks/`: useEdgeSwipe, useChatScrollManager
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 00000000..6aec091b
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,13 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [Unreleased]
+
+- Pending
+
+## [1.0.0] - 2025-12-07
+
+- Initial public release of OpenChamber web and desktop packages in a unified monorepo.
+- Added GitHub Actions release pipeline with macOS signing/notarization, npm publish, and release asset uploads.
+- Introduced OpenCode agent chat experience with section-based navigation, theming, and session persistence.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 00000000..e14fcde9
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,41 @@
+# Contributing to OpenChamber
+
+## Quick Start
+
+```bash
+git clone https://github.com/btriapitsyn/openchamber.git
+cd openchamber
+pnpm install
+pnpm run dev:web:full    # Web development
+pnpm run desktop:dev     # Desktop development (Tauri)
+```
+
+## Before Submitting
+
+```bash
+pnpm -r type-check   # Must pass
+pnpm -r lint         # Must pass
+pnpm -r build        # Must succeed
+```
+
+## Code Style
+
+- Functional React components only
+- TypeScript strict mode - no `any` without justification
+- Use existing theme colors/typography - don't add new ones
+- Components must support light and dark themes
+
+## Pull Requests
+
+1. Fork and create a branch
+2. Make changes
+3. Run validation commands above
+4. Submit PR with clear description of what and why
+
+## Project Structure
+
+See [AGENTS.md](./AGENTS.md) for detailed architecture reference.
+
+## Questions?
+
+Open an issue.
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 00000000..6a962170
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Bohdan Triapitsyn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 00000000..213accfe
--- /dev/null
+++ b/README.md
@@ -0,0 +1,86 @@
+# OpenChamber
+
+Web and desktop interface for the [OpenCode](https://opencode.ai) AI coding agent. Works alongside the OpenCode TUI.
+
+The OpenCode team is actively working on their own desktop app. I still decided to release this project as a fan-made alternative.
+
+It was entirely built with OpenCode tool - first with the TUI version, then with the first usable version of OpenChamber, which I then used to build the rest.
+
+The whole project was built entirely with AI coding agents under my supervision. It started as a hobby project and proof of concept that AI agents can create genuinely usable software.
+
+## Why use OpenChamber?
+
+- **Cross-device continuity**: Start in TUI, continue on tablet/phone, return to terminal - same session
+- **Remote access**: Use OpenCode from anywhere via browser
+- **Familiarity**: A visual alternative for developers who prefer GUI workflows
+
+## Features
+
+- Integrated terminal
+- Git operations with identity management and AI commit message generation
+- Beautiful themes (Flexoki Light/Dark) with dynamic CSS variable system
+- Mobile-optimized with edge-swipe gestures, terminal control and optimizations all around
+- Git worktrees operations with isolating sessions within them
+- Memory optimizations with LRU eviction
+- Rich permission cards with syntax-highlighted operation previews
+- Smart tool visualization (inline diffs, file trees, results highlighting)
+- Per-agent permission mode control (ask, allow, full) adjustable per-session
+- Familiar diff viewer like you're used to in VSCode
+- Built-in OpenCode agent/command management
+
+## Installation
+
+### CLI (Web Server)
+
+```bash
+pnpm add -g openchamber
+
+openchamber                          # Start on port 3000
+openchamber --port 8080              # Custom port
+openchamber --daemon                 # Background mode
+openchamber --ui-password secret     # Password-protect UI
+openchamber stop                     # Stop server
+```
+
+### Desktop App (macOS)
+
+Download from [Releases](https://github.com/btriapitsyn/openchamber/releases).
+
+## Prerequisites
+
+- [OpenCode CLI](https://opencode.ai) installed and running (`opencode serve`)
+- Node.js 20+
+
+## Development
+
+```bash
+git clone https://github.com/btriapitsyn/openchamber.git
+cd openchamber
+pnpm install
+
+pnpm run dev:web:full    # Web development
+pnpm run desktop:dev     # Desktop development (Tauri)
+pnpm run build           # Production build
+```
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.
+
+## Tech Stack
+
+React 19, TypeScript, Vite 7, Tailwind CSS v4, Zustand, Radix UI, @opencode-ai/sdk, Express, Tauri (desktop)
+
+## Acknowledgments
+
+Independent project, not affiliated with OpenCode team.
+
+**Special thanks to:**
+
+- [OpenCode](https://opencode.ai) - For the excellent API and extensible architecture
+- [Flexoki](https://github.com/kepano/flexoki) - Beautiful color scheme by [Steph Ango](https://stephango.com/flexoki)
+- [Tauri](https://github.com/tauri-apps/tauri) - Desktop application framework
+- [David Hill](https://x.com/iamdavidhill) - who inspired me to release this without [overthinking](https://x.com/iamdavidhill/status/1993648326450020746?s=20)
+- My wife, who created a beautiful firework animation for the app while testing it for the first time
+
+## License
+
+MIT
diff --git a/components.json b/components.json
new file mode 100644
index 00000000..73afbdbc
--- /dev/null
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/docs/.gitkeep b/docs/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 00000000..552d2124
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+  globalIgnores(['dist', '.openchamber']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
diff --git a/fix-deprecation.js b/fix-deprecation.js
new file mode 100644
index 00000000..059058e5
--- /dev/null
+++ b/fix-deprecation.js
@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+
+/**
+ * Fix for http-proxy package util._extend deprecation warning
+ * This script patches the http-proxy package to use Object.assign instead of util._extend
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+function fixHttpProxyDeprecation() {
+  try {
+    // Find the http-proxy package in node_modules
+    const httpProxyDir = path.join(__dirname, 'node_modules', 'http-proxy', 'lib', 'http-proxy');
+    const indexPath = path.join(httpProxyDir, 'index.js');
+    const commonPath = path.join(httpProxyDir, 'common.js');
+    
+    if (!fs.existsSync(indexPath) || !fs.existsSync(commonPath)) {
+      return;
+    }
+    
+    // Patch index.js
+    let needsPatch = false;
+    
+    if (fs.existsSync(indexPath)) {
+      let content = fs.readFileSync(indexPath, 'utf8');
+      
+      let indexPatched = false;
+      
+      if (content.includes("require('util')._extend")) {
+        content = content.replace(
+          /extend\s*=\s*require\('util'\)\._extend,/,
+          "extend = Object.assign,"
+        );
+        indexPatched = true;
+      }
+      
+      if (content.includes("require('util').inherits")) {
+        content = content.replace(
+          /require\('util'\)\.inherits\((\w+),\s*(\w+)\);/,
+          "Object.setPrototypeOf($1.prototype, $2.prototype);"
+        );
+        indexPatched = true;
+      }
+      
+      if (indexPatched) {
+        fs.writeFileSync(indexPath, content, 'utf8');
+        needsPatch = true;
+      }
+    }
+    
+    // Patch common.js
+    if (fs.existsSync(commonPath)) {
+      let content = fs.readFileSync(commonPath, 'utf8');
+      
+      let commonPatched = false;
+      
+      if (content.includes("require('util')._extend")) {
+        content = content.replace(
+          /extend\s*=\s*require\('util'\)\._extend,/,
+          "extend = Object.assign,"
+        );
+        commonPatched = true;
+      }
+      
+      if (commonPatched) {
+        fs.writeFileSync(commonPath, content, 'utf8');
+        needsPatch = true;
+      }
+    }
+  } catch (error) {
+    // Silently handle errors - functionality is not affected
+  }
+}
+
+// Run the fix
+fixHttpProxyDeprecation();
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..7b0b1675
--- /dev/null
+++ b/package.json
@@ -0,0 +1,118 @@
+{
+  "name": "openchamber-monorepo",
+  "version": "1.0.0",
+  "description": "OpenChamber monorepo workspace for web, ui, and desktop runtimes",
+  "private": true,
+  "type": "module",
+  "packageManager": "pnpm@10.22.0",
+  "workspaces": [
+    "packages/*"
+  ],
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "keywords": [
+    "opencode",
+    "ai",
+    "coding",
+    "openchamber",
+    "cli"
+  ],
+  "author": "Bohdan Triapitsyn",
+  "license": "MIT",
+  "scripts": {
+    "build": "pnpm --if-present run --recursive --filter \"./packages/*\" build",
+    "build:web": "pnpm -C packages/web run build",
+    "build:ui": "pnpm -C packages/ui run build",
+    "build:desktop": "pnpm -C packages/desktop run build",
+    "type-check": "pnpm --if-present run --recursive --filter \"./packages/*\" type-check",
+    "type-check:web": "pnpm -C packages/web run type-check",
+    "type-check:ui": "pnpm -C packages/ui run type-check",
+    "type-check:desktop": "pnpm -C packages/desktop run type-check",
+    "lint": "pnpm --if-present run --recursive --filter \"./packages/*\" lint",
+    "lint:web": "pnpm -C packages/web run lint",
+    "lint:ui": "pnpm -C packages/ui run lint",
+    "lint:desktop": "pnpm -C packages/desktop run lint",
+    "clean": "pnpm --if-present run --recursive --filter \"./packages/*\" clean",
+    "dev:web": "pnpm -C packages/web run build:watch",
+    "dev:web:server": "pnpm -C packages/web run dev:server:watch",
+    "dev:web:full": "concurrently -n \"api,build\" -c \"cyan,magenta\" \"pnpm -C packages/web run dev:server:watch\" \"pnpm -C packages/web run build:watch\"",
+    "start:web": "pnpm -C packages/web run start",
+    "pack:web": "pnpm -C packages/web pack --pack-destination .",
+    "desktop:start-cli": "node ./packages/desktop/scripts/opencode-cli.mjs start",
+    "desktop:stop-cli": "node ./packages/desktop/scripts/opencode-cli.mjs stop",
+    "desktop:dev": "node ./packages/desktop/scripts/desktop-dev.mjs",
+    "desktop:build": "pnpm -C packages/desktop build && pnpm -C packages/desktop tauri build",
+    "desktop:lint": "pnpm -C packages/desktop run lint && cargo fmt --manifest-path packages/desktop/src-tauri/Cargo.toml -- --check && cargo clippy --manifest-path packages/desktop/src-tauri/Cargo.toml -- -D warnings",
+    "desktop:type-check": "pnpm -C packages/desktop run type-check && cargo fmt --manifest-path packages/desktop/src-tauri/Cargo.toml -- --check && cargo clippy --manifest-path packages/desktop/src-tauri/Cargo.toml -- -D warnings",
+    "version:bump": "node scripts/bump-version.mjs",
+    "release:prepare": "pnpm run build && pnpm run type-check && pnpm run lint"
+  },
+  "dependencies": {
+    "@fontsource/ibm-plex-mono": "^5.2.7",
+    "@fontsource/ibm-plex-sans": "^5.1.1",
+    "@heroui/scroll-shadow": "^2.3.18",
+    "@heroui/system": "^2.4.23",
+    "@heroui/theme": "^2.4.23",
+    "@ibm/plex": "^6.4.1",
+    "@opencode-ai/sdk": "^1.0.133",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@remixicon/react": "^4.7.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "electron-context-menu": "^4.1.1",
+    "electron-store": "^11.0.2",
+    "express": "^5.1.0",
+    "http-proxy-middleware": "^3.0.5",
+    "next-themes": "^0.4.6",
+    "node-pty": "^1.0.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^15.6.6",
+    "remark-gfm": "^4.0.1",
+    "simple-git": "^3.28.0",
+    "sonner": "^2.0.7",
+    "strip-json-comments": "^5.0.3",
+    "tailwind-merge": "^3.3.1",
+    "yaml": "^2.8.1",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@types/node": "^24.3.1",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.0",
+    "autoprefixer": "^10.4.21",
+    "concurrently": "^9.2.1",
+    "cors": "^2.8.5",
+    "cross-env": "^7.0.3",
+    "electron": "^38.2.0",
+    "electron-builder": "^24.13.3",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "nodemon": "^3.1.7",
+    "tailwindcss": "^4.0.0",
+    "tsx": "^4.20.6",
+    "tw-animate-css": "^1.3.8",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2"
+  }
+}
diff --git a/packages/desktop/.gitignore b/packages/desktop/.gitignore
new file mode 100644
index 00000000..1d5fa289
--- /dev/null
+++ b/packages/desktop/.gitignore
@@ -0,0 +1,14 @@
+# Vite build output
+dist/
+
+# Tauri build artifacts
+src-tauri/target/
+
+# Tauri generated code
+src-tauri/gen/
+
+# OpenCode CLI state tracking
+.opencode-cli-state.json
+
+# OS-specific
+.DS_Store
diff --git a/packages/desktop/README.md b/packages/desktop/README.md
new file mode 100644
index 00000000..a6b3a533
--- /dev/null
+++ b/packages/desktop/README.md
@@ -0,0 +1,36 @@
+# @openchamber/desktop
+
+Desktop application for the [OpenCode](https://opencode.ai) AI coding agent. Built with Tauri.
+
+## Installation
+
+Download from [Releases](https://github.com/btriapitsyn/openchamber/releases).
+
+Currently available for macOS (Apple Silicon).
+
+## Prerequisites
+
+- [OpenCode CLI](https://opencode.ai) installed
+
+## Features
+
+- Native macOS app with auto-updates
+- Integrated terminal
+- Git operations with identity management and AI commit message generation
+- Beautiful themes (Flexoki Light/Dark)
+- Rich permission cards with syntax-highlighted operation previews
+- Smart tool visualization (inline diffs, file trees, results highlighting)
+- Per-agent permission mode control
+
+## Development
+
+```bash
+git clone https://github.com/btriapitsyn/openchamber.git
+cd openchamber
+pnpm install
+pnpm run desktop:dev
+```
+
+## License
+
+MIT
diff --git a/packages/desktop/index.html b/packages/desktop/index.html
new file mode 100644
index 00000000..769ba619
--- /dev/null
+++ b/packages/desktop/index.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en" class="h-full">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <meta name="theme-color" content="#151313" />
+    <link rel="preload" href="/ibm-plex-mono-latin-600-normal.woff2" as="font" type="font/woff2" crossorigin />
+    <title>OpenChamber Desktop</title>
+    <style>
+      @font-face {
+        font-family: 'IBM Plex Mono';
+        font-weight: 600;
+        font-style: normal;
+        src: url('/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
+        font-display: block;
+      }
+      :root {
+        color-scheme: dark;
+      }
+      html,
+      body,
+      #root {
+        height: 100%;
+        overflow: hidden;
+      }
+      body {
+        margin: 0;
+        font-family: 'IBM Plex Mono', monospace;
+        background-color: transparent;
+        color: #ffffff;
+      }
+      .loading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        font-size: 2.5rem;
+        font-weight: 600;
+        letter-spacing: 0.05em;
+      }
+      .loading span {
+        display: inline-block;
+        opacity: 0;
+        transform: translateY(8px);
+        animation: slideUp 0.5s ease-out forwards;
+      }
+      @keyframes slideUp {
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    </style>
+  </head>
+  <body class="h-full">
+    <div id="root" class="h-full">
+      <div class="loading"><span style="animation-delay:0.1s">O</span><span style="animation-delay:0.15s">p</span><span style="animation-delay:0.2s">e</span><span style="animation-delay:0.25s">n</span><span style="animation-delay:0.3s">C</span><span style="animation-delay:0.35s">h</span><span style="animation-delay:0.4s">a</span><span style="animation-delay:0.45s">m</span><span style="animation-delay:0.5s">b</span><span style="animation-delay:0.55s">e</span><span style="animation-delay:0.6s">r</span></div>
+    </div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/desktop/package.json b/packages/desktop/package.json
new file mode 100644
index 00000000..7d646389
--- /dev/null
+++ b/packages/desktop/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@openchamber/desktop",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "desktopPrerequisites": [
+    "Rust stable toolchain (via rustup)",
+    "Xcode Command Line Tools installed",
+    "Tauri CLI installed (cargo install tauri-cli@^2)"
+  ],
+  "scripts": {
+    "tauri": "tauri",
+    "dev": "vite dev --host 127.0.0.1 --port 1421",
+    "build": "vite build",
+    "preview": "vite preview --host 127.0.0.1 --port 5051",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint \"./src/**/*.{ts,tsx}\" --config ../../eslint.config.js"
+  },
+  "dependencies": {
+    "@tauri-apps/plugin-notification": "^2.3.3",
+    "@tauri-apps/plugin-process": "^2",
+    "@tauri-apps/plugin-updater": "^2",
+    "@openchamber/ui": "workspace:*",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@tauri-apps/cli": "^2",
+    "@tauri-apps/api": "^2.9.1",
+    "@tauri-apps/plugin-dialog": "^2.4.2",
+    "@types/node": "^24.3.1",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.2"
+  }
+}
diff --git a/packages/desktop/public/ibm-plex-mono-latin-600-normal.woff2 b/packages/desktop/public/ibm-plex-mono-latin-600-normal.woff2
new file mode 100644
index 00000000..67aeeb01
Binary files /dev/null and b/packages/desktop/public/ibm-plex-mono-latin-600-normal.woff2 differ
diff --git a/packages/desktop/public/ibm-plex-mono-latin-700-normal.woff2 b/packages/desktop/public/ibm-plex-mono-latin-700-normal.woff2
new file mode 100644
index 00000000..5d7ff0c5
Binary files /dev/null and b/packages/desktop/public/ibm-plex-mono-latin-700-normal.woff2 differ
diff --git a/packages/desktop/scripts/desktop-dev.mjs b/packages/desktop/scripts/desktop-dev.mjs
new file mode 100644
index 00000000..b5848cf7
--- /dev/null
+++ b/packages/desktop/scripts/desktop-dev.mjs
@@ -0,0 +1,88 @@
+#!/usr/bin/env node
+import { spawn } from 'node:child_process';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { startCli, stopCli } from './opencode-cli.mjs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const repoRoot = path.resolve(__dirname, '../../..');
+const desktopDir = path.join(repoRoot, 'packages/desktop');
+
+function spawnProcess(command, args, opts = {}) {
+  return spawn(command, args, {
+    cwd: repoRoot,
+    env: { ...process.env },
+    stdio: 'inherit',
+    ...opts,
+  });
+}
+
+async function main() {
+  await startCli();
+
+  const tauriProcess = spawnProcess('pnpm', ['-C', desktopDir, 'tauri', 'dev']);
+
+  let cleaning = false;
+
+  const teardown = async (code) => {
+    if (cleaning) {
+      return;
+    }
+    cleaning = true;
+
+    const stopChild = (child, label) => {
+      if (!child || child.killed) {
+        return;
+      }
+      try {
+        child.kill('SIGINT');
+      } catch (error) {
+        console.warn(`[desktop:dev] Failed to stop ${label}:`, error);
+      }
+    };
+
+    stopChild(tauriProcess, 'Tauri dev process');
+
+    await stopCli({ silent: true }).catch((error) => {
+      console.warn('[desktop:dev] Failed to stop OpenCode CLI:', error);
+    });
+
+    process.exit(typeof code === 'number' ? code : 0);
+  };
+
+  const handleChildExit = (childName) => (code, signal) => {
+    if (code !== 0 || signal) {
+      console.warn(`[desktop:dev] ${childName} exited with code ${code ?? 'null'} signal ${signal ?? 'none'}.`);
+    }
+    teardown(code).catch((error) => {
+      console.error('[desktop:dev] Cleanup error:', error);
+      process.exit(code ?? 1);
+    });
+  };
+
+  tauriProcess.on('exit', handleChildExit('Tauri dev process'));
+  const errorHandler = (label) => (error) => {
+    console.error(`[desktop:dev] Failed to start ${label}:`, error);
+    teardown(1).catch(() => process.exit(1));
+  };
+
+  tauriProcess.on('error', errorHandler('Tauri dev process'));
+
+  const signalExitCodes = {
+    SIGINT: 130,
+    SIGTERM: 143,
+    SIGQUIT: 131,
+  };
+
+  Object.entries(signalExitCodes).forEach(([signal, exitCode]) => {
+    process.on(signal, () => {
+      teardown(exitCode).catch(() => process.exit(exitCode));
+    });
+  });
+}
+
+main().catch((error) => {
+  console.error('[desktop:dev] Unexpected error:', error);
+  process.exit(1);
+});
diff --git a/packages/desktop/scripts/opencode-cli.mjs b/packages/desktop/scripts/opencode-cli.mjs
new file mode 100644
index 00000000..199fc967
--- /dev/null
+++ b/packages/desktop/scripts/opencode-cli.mjs
@@ -0,0 +1,237 @@
+#!/usr/bin/env node
+import { spawn } from 'node:child_process';
+import { access, readFile, unlink, writeFile } from 'node:fs/promises';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const desktopDir = path.resolve(__dirname, '..');
+const stateFile = path.join(desktopDir, '.opencode-cli-state.json');
+const DEFAULT_BIN_CANDIDATES = [
+  process.env.OPENCHAMBER_OPENCODE_PATH,
+  process.env.OPENCHAMBER_OPENCODE_BIN,
+  process.env.OPENCODE_PATH,
+  process.env.OPENCODE_BINARY,
+  '/opt/homebrew/bin/opencode',
+  '/usr/local/bin/opencode',
+  '/usr/bin/opencode',
+  path.join(os.homedir(), '.local/bin/opencode'),
+].filter(Boolean);
+const CLI_ARGS_ENV = process.env.OPENCHAMBER_OPENCODE_ARGS;
+const DEFAULT_ARGS = CLI_ARGS_ENV
+  ? parseArgs(CLI_ARGS_ENV)
+  : ['api'];
+
+function parseArgs(raw) {
+  if (!raw || typeof raw !== 'string') {
+    return [];
+  }
+  const trimmed = raw.trim();
+  if (!trimmed) {
+    return [];
+  }
+  if (trimmed.startsWith('[')) {
+    try {
+      const parsed = JSON.parse(trimmed);
+      if (Array.isArray(parsed) && parsed.every((item) => typeof item === 'string')) {
+        return parsed;
+      }
+    } catch {
+      // fall through to whitespace split
+    }
+  }
+  return trimmed.split(/\s+/g);
+}
+
+async function fileExists(targetPath) {
+  try {
+    await access(targetPath, fs.constants.X_OK);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function resolveCliPath() {
+  for (const candidate of DEFAULT_BIN_CANDIDATES) {
+    if (candidate && await fileExists(candidate)) {
+      return candidate;
+    }
+  }
+
+  const envPath = process.env.PATH || '';
+  for (const segment of envPath.split(path.delimiter)) {
+    const candidate = path.join(segment, 'opencode');
+    if (await fileExists(candidate)) {
+      return candidate;
+    }
+  }
+
+  throw new Error('Unable to locate the OpenCode CLI. Set OPENCHAMBER_OPENCODE_PATH to the executable.');
+}
+
+async function readState() {
+  try {
+    const raw = await readFile(stateFile, 'utf8');
+    const data = JSON.parse(raw);
+    if (typeof data?.pid === 'number') {
+      return data;
+    }
+  } catch {
+    // ignore
+  }
+  return null;
+}
+
+function isProcessAlive(pid) {
+  if (!pid || typeof pid !== 'number') {
+    return false;
+  }
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function writeState(pid) {
+  await writeFile(stateFile, JSON.stringify({ pid }), 'utf8');
+}
+
+async function removeStateFile() {
+  try {
+    await unlink(stateFile);
+  } catch {
+    // already removed
+  }
+}
+
+function spawnCli(cliPath, args) {
+  const env = {
+    ...process.env,
+    OPENCHAMBER_OPENCODE_PORT: process.env.OPENCHAMBER_OPENCODE_PORT || process.env.OPENCODE_PORT || process.env.OPENCHAMBER_INTERNAL_PORT || '0',
+  };
+  const cwd = process.env.OPENCHAMBER_OPENCODE_CWD || process.cwd();
+
+  const child = spawn(cliPath, args.length > 0 ? args : DEFAULT_ARGS, {
+    cwd,
+    env,
+    detached: true,
+    stdio: 'ignore',
+  });
+
+  child.unref();
+  return child;
+}
+
+export async function startCli({ silent = false } = {}) {
+  const existing = await readState();
+  if (existing?.pid && isProcessAlive(existing.pid)) {
+    if (!silent) {
+      console.log(`[desktop:start-cli] OpenCode CLI already running (pid ${existing.pid}).`);
+    }
+    return existing.pid;
+  }
+
+  const cliPath = await resolveCliPath();
+  const child = spawnCli(cliPath, DEFAULT_ARGS);
+  await writeState(child.pid);
+  if (!silent) {
+    console.log(`[desktop:start-cli] OpenCode CLI started (${cliPath}) pid ${child.pid}.`);
+  }
+  return child.pid;
+}
+
+export async function stopCli({ silent = false } = {}) {
+  const state = await readState();
+  if (!state?.pid) {
+    if (!silent) {
+      console.log('[desktop:stop-cli] No OpenCode CLI PID recorded.');
+    }
+    return;
+  }
+
+  const { pid } = state;
+  if (!isProcessAlive(pid)) {
+    await removeStateFile();
+    if (!silent) {
+      console.log('[desktop:stop-cli] CLI already stopped.');
+    }
+    return;
+  }
+
+  try {
+    process.kill(pid, 'SIGTERM');
+  } catch (error) {
+    if (!silent) {
+      console.error(`[desktop:stop-cli] Failed to send SIGTERM to pid ${pid}:`, error);
+    }
+  }
+
+  const timeoutMs = 5000;
+  const start = Date.now();
+  while (Date.now() - start < timeoutMs) {
+    if (!isProcessAlive(pid)) {
+      await removeStateFile();
+      if (!silent) {
+        console.log('[desktop:stop-cli] OpenCode CLI stopped.');
+      }
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 250));
+  }
+
+  try {
+    process.kill(pid, 'SIGKILL');
+    if (!silent) {
+      console.warn(`[desktop:stop-cli] Forced termination sent to pid ${pid}.`);
+    }
+  } catch (error) {
+    if (!silent) {
+      console.error(`[desktop:stop-cli] Unable to terminate pid ${pid}:`, error);
+    }
+  } finally {
+    await removeStateFile();
+  }
+}
+
+async function main() {
+  const [, , command] = process.argv;
+  if (!command || command === '--help' || command === '-h') {
+    console.log('Usage: node opencode-cli.mjs <start|stop|status>');
+    process.exit(0);
+  }
+
+  if (command === 'start') {
+    await startCli();
+    return;
+  }
+  if (command === 'stop') {
+    await stopCli();
+    return;
+  }
+  if (command === 'status') {
+    const state = await readState();
+    if (state?.pid && isProcessAlive(state.pid)) {
+      console.log(`OpenCode CLI running (pid ${state.pid}).`);
+    } else {
+      console.log('OpenCode CLI not running.');
+    }
+    process.exit(0);
+    return;
+  }
+
+  console.error(`Unknown command: ${command}`);
+  process.exit(1);
+}
+
+if (import.meta.url === pathToFileURL(process.argv[1] || '').href) {
+  main().catch((error) => {
+    console.error('[desktop:opencode-cli] Unexpected error:', error);
+    process.exit(1);
+  });
+}
diff --git a/packages/desktop/src-tauri/Cargo.lock b/packages/desktop/src-tauri/Cargo.lock
new file mode 100644
index 00000000..74269d1e
--- /dev/null
+++ b/packages/desktop/src-tauri/Cargo.lock
@@ -0,0 +1,6606 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+version = 4
+
+[[package]]
+name = "adler2"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "320119579fcad9c21884f5c4861d16174d0e06250625266f50fe6898340abefa"
+
+[[package]]
+name = "ahash"
+version = "0.7.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "891477e0c6a8957309ee5c45a6368af3ae14bb510732d2684ffa19af310920f9"
+dependencies = [
+ "getrandom 0.2.16",
+ "once_cell",
+ "version_check",
+]
+
+[[package]]
+name = "aho-corasick"
+version = "1.1.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ddd31a130427c27518df266943a5308ed92d4b226cc639f5a8f1002816174301"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "alloc-no-stdlib"
+version = "2.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cc7bb162ec39d46ab1ca8c77bf72e890535becd1751bb45f64c597edb4c8c6b3"
+
+[[package]]
+name = "alloc-stdlib"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "94fb8275041c72129eb51b7d0322c29b8387a0386127718b096429201a5d6ece"
+dependencies = [
+ "alloc-no-stdlib",
+]
+
+[[package]]
+name = "android_log-sys"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "84521a3cf562bc62942e294181d9eef17eb38ceb8c68677bc49f144e4c3d4f8d"
+
+[[package]]
+name = "android_logger"
+version = "0.15.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dbb4e440d04be07da1f1bf44fb4495ebd58669372fe0cffa6e48595ac5bd88a3"
+dependencies = [
+ "android_log-sys",
+ "env_filter",
+ "log",
+]
+
+[[package]]
+name = "android_system_properties"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "819e7219dbd41043ac279b19830f2efc897156490d7fd6ea916720117ee66311"
+dependencies = [
+ "libc",
+]
+
+[[package]]
+name = "anyhow"
+version = "1.0.100"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a23eb6b1614318a8071c9b2521f36b424b2c83db5eb3a0fead4a6c0809af6e61"
+
+[[package]]
+name = "arbitrary"
+version = "1.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c3d036a3c4ab069c7b410a2ce876bd74808d2d0888a82667669f8e783a898bf1"
+dependencies = [
+ "derive_arbitrary",
+]
+
+[[package]]
+name = "arrayvec"
+version = "0.7.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7c02d123df017efcdfbd739ef81735b36c5ba83ec3c59c80a9d7ecc718f92e50"
+
+[[package]]
+name = "ashpd"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6cbdf310d77fd3aaee6ea2093db7011dc2d35d2eb3481e5607f1f8d942ed99df"
+dependencies = [
+ "enumflags2",
+ "futures-channel",
+ "futures-util",
+ "rand 0.9.2",
+ "raw-window-handle",
+ "serde",
+ "serde_repr",
+ "tokio",
+ "url",
+ "wayland-backend",
+ "wayland-client",
+ "wayland-protocols",
+ "zbus",
+]
+
+[[package]]
+name = "async-broadcast"
+version = "0.7.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "435a87a52755b8f27fcf321ac4f04b2802e337c8c4872923137471ec39c37532"
+dependencies = [
+ "event-listener",
+ "event-listener-strategy",
+ "futures-core",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "async-channel"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "924ed96dd52d1b75e9c1a3e6275715fd320f5f9439fb5a4a11fa51f4221158d2"
+dependencies = [
+ "concurrent-queue",
+ "event-listener-strategy",
+ "futures-core",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "async-compression"
+version = "0.4.34"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0e86f6d3dc9dc4352edeea6b8e499e13e3f5dc3b964d7ca5fd411415a3498473"
+dependencies = [
+ "compression-codecs",
+ "compression-core",
+ "futures-core",
+ "pin-project-lite",
+ "tokio",
+]
+
+[[package]]
+name = "async-executor"
+version = "1.13.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "497c00e0fd83a72a79a39fcbd8e3e2f055d6f6c7e025f3b3d91f4f8e76527fb8"
+dependencies = [
+ "async-task",
+ "concurrent-queue",
+ "fastrand",
+ "futures-lite",
+ "pin-project-lite",
+ "slab",
+]
+
+[[package]]
+name = "async-io"
+version = "2.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "456b8a8feb6f42d237746d4b3e9a178494627745c3c56c6ea55d92ba50d026fc"
+dependencies = [
+ "autocfg",
+ "cfg-if",
+ "concurrent-queue",
+ "futures-io",
+ "futures-lite",
+ "parking",
+ "polling",
+ "rustix",
+ "slab",
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "async-lock"
+version = "3.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5fd03604047cee9b6ce9de9f70c6cd540a0520c813cbd49bae61f33ab80ed1dc"
+dependencies = [
+ "event-listener",
+ "event-listener-strategy",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "async-process"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc50921ec0055cdd8a16de48773bfeec5c972598674347252c0399676be7da75"
+dependencies = [
+ "async-channel",
+ "async-io",
+ "async-lock",
+ "async-signal",
+ "async-task",
+ "blocking",
+ "cfg-if",
+ "event-listener",
+ "futures-lite",
+ "rustix",
+]
+
+[[package]]
+name = "async-recursion"
+version = "1.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3b43422f69d8ff38f95f1b2bb76517c91589a924d1559a0e935d7c8ce0274c11"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "async-signal"
+version = "0.2.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "43c070bbf59cd3570b6b2dd54cd772527c7c3620fce8be898406dd3ed6adc64c"
+dependencies = [
+ "async-io",
+ "async-lock",
+ "atomic-waker",
+ "cfg-if",
+ "futures-core",
+ "futures-io",
+ "rustix",
+ "signal-hook-registry",
+ "slab",
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "async-task"
+version = "4.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8b75356056920673b02621b35afd0f7dda9306d03c79a30f5c56c44cf256e3de"
+
+[[package]]
+name = "async-trait"
+version = "0.1.89"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9035ad2d096bed7955a320ee7e2230574d28fd3c3a0f186cbea1ff3c7eed5dbb"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "atk"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "241b621213072e993be4f6f3a9e4b45f65b7e6faad43001be957184b7bb1824b"
+dependencies = [
+ "atk-sys",
+ "glib",
+ "libc",
+]
+
+[[package]]
+name = "atk-sys"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c5e48b684b0ca77d2bbadeef17424c2ea3c897d44d566a1617e7e8f30614d086"
+dependencies = [
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "system-deps",
+]
+
+[[package]]
+name = "atomic-waker"
+version = "1.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1505bd5d3d116872e7271a6d4e16d81d0c8570876c8de68093a09ac269d8aac0"
+
+[[package]]
+name = "autocfg"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"
+
+[[package]]
+name = "axum"
+version = "0.8.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5b098575ebe77cb6d14fc7f32749631a6e44edbef6b796f89b020e99ba20d425"
+dependencies = [
+ "axum-core",
+ "axum-macros",
+ "bytes",
+ "form_urlencoded",
+ "futures-util",
+ "http",
+ "http-body",
+ "http-body-util",
+ "hyper",
+ "hyper-util",
+ "itoa",
+ "matchit",
+ "memchr",
+ "mime",
+ "percent-encoding",
+ "pin-project-lite",
+ "serde_core",
+ "serde_json",
+ "serde_path_to_error",
+ "serde_urlencoded",
+ "sync_wrapper",
+ "tokio",
+ "tower",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
+[[package]]
+name = "axum-core"
+version = "0.5.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "59446ce19cd142f8833f856eb31f3eb097812d1479ab224f54d72428ca21ea22"
+dependencies = [
+ "bytes",
+ "futures-core",
+ "http",
+ "http-body",
+ "http-body-util",
+ "mime",
+ "pin-project-lite",
+ "sync_wrapper",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
+[[package]]
+name = "axum-macros"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "604fde5e028fea851ce1d8570bbdc034bec850d157f7569d10f347d06808c05c"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "base64"
+version = "0.21.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9d297deb1925b89f2ccc13d7635fa0714f12c87adce1c75356b39ca9b7178567"
+
+[[package]]
+name = "base64"
+version = "0.22.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
+
+[[package]]
+name = "bitflags"
+version = "1.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"
+
+[[package]]
+name = "bitflags"
+version = "2.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "812e12b5285cc515a9c72a5c1d3b6d46a19dac5acfef5265968c166106e31dd3"
+dependencies = [
+ "serde_core",
+]
+
+[[package]]
+name = "bitvec"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1bc2832c24239b0141d5674bb9174f9d68a8b5b3f2753311927c172ca46f7e9c"
+dependencies = [
+ "funty",
+ "radium",
+ "tap",
+ "wyz",
+]
+
+[[package]]
+name = "block-buffer"
+version = "0.10.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3078c7629b62d3f0439517fa394996acacc5cbc91c5a20d8c658e77abd503a71"
+dependencies = [
+ "generic-array",
+]
+
+[[package]]
+name = "block2"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2c132eebf10f5cad5289222520a4a058514204aed6d791f1cf4fe8088b82d15f"
+dependencies = [
+ "objc2 0.5.2",
+]
+
+[[package]]
+name = "block2"
+version = "0.6.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cdeb9d870516001442e364c5220d3574d2da8dc765554b4a617230d33fa58ef5"
+dependencies = [
+ "objc2 0.6.3",
+]
+
+[[package]]
+name = "blocking"
+version = "1.6.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e83f8d02be6967315521be875afa792a316e28d57b5a2d401897e2a7921b7f21"
+dependencies = [
+ "async-channel",
+ "async-task",
+ "futures-io",
+ "futures-lite",
+ "piper",
+]
+
+[[package]]
+name = "borsh"
+version = "1.5.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ad8646f98db542e39fc66e68a20b2144f6a732636df7c2354e74645faaa433ce"
+dependencies = [
+ "borsh-derive",
+ "cfg_aliases 0.2.1",
+]
+
+[[package]]
+name = "borsh-derive"
+version = "1.5.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fdd1d3c0c2f5833f22386f252fe8ed005c7f59fdcddeef025c01b4c3b9fd9ac3"
+dependencies = [
+ "once_cell",
+ "proc-macro-crate 3.4.0",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "brotli"
+version = "8.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4bd8b9603c7aa97359dbd97ecf258968c95f3adddd6db2f7e7a5bef101c84560"
+dependencies = [
+ "alloc-no-stdlib",
+ "alloc-stdlib",
+ "brotli-decompressor",
+]
+
+[[package]]
+name = "brotli-decompressor"
+version = "5.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "874bb8112abecc98cbd6d81ea4fa7e94fb9449648c93cc89aa40c81c24d7de03"
+dependencies = [
+ "alloc-no-stdlib",
+ "alloc-stdlib",
+]
+
+[[package]]
+name = "bumpalo"
+version = "3.19.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "46c5e41b57b8bba42a04676d81cb89e9ee8e859a1a66f80a5a72e1cb76b34d43"
+
+[[package]]
+name = "byte-unit"
+version = "5.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e1cd29c3c585209b0cbc7309bfe3ed7efd8c84c21b7af29c8bfae908f8777174"
+dependencies = [
+ "rust_decimal",
+ "serde",
+ "utf8-width",
+]
+
+[[package]]
+name = "bytecheck"
+version = "0.6.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "23cdc57ce23ac53c931e88a43d06d070a6fd142f2617be5855eb75efc9beb1c2"
+dependencies = [
+ "bytecheck_derive",
+ "ptr_meta",
+ "simdutf8",
+]
+
+[[package]]
+name = "bytecheck_derive"
+version = "0.6.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3db406d29fbcd95542e92559bed4d8ad92636d1ca8b3b72ede10b4bcc010e659"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 1.0.109",
+]
+
+[[package]]
+name = "bytemuck"
+version = "1.24.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fbdf580320f38b612e485521afda1ee26d10cc9884efaaa750d383e13e3c5f4"
+
+[[package]]
+name = "byteorder"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fd0f2584146f6f2ef48085050886acf353beff7305ebd1ae69500e27c67f64b"
+
+[[package]]
+name = "bytes"
+version = "1.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b35204fbdc0b3f4446b89fc1ac2cf84a8a68971995d0bf2e925ec7cd960f9cb3"
+dependencies = [
+ "serde",
+]
+
+[[package]]
+name = "cairo-rs"
+version = "0.18.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ca26ef0159422fb77631dc9d17b102f253b876fe1586b03b803e63a309b4ee2"
+dependencies = [
+ "bitflags 2.10.0",
+ "cairo-sys-rs",
+ "glib",
+ "libc",
+ "once_cell",
+ "thiserror 1.0.69",
+]
+
+[[package]]
+name = "cairo-sys-rs"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "685c9fa8e590b8b3d678873528d83411db17242a73fccaed827770ea0fedda51"
+dependencies = [
+ "glib-sys",
+ "libc",
+ "system-deps",
+]
+
+[[package]]
+name = "camino"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "276a59bf2b2c967788139340c9f0c5b12d7fd6630315c15c217e559de85d2609"
+dependencies = [
+ "serde_core",
+]
+
+[[package]]
+name = "cargo-platform"
+version = "0.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e35af189006b9c0f00a064685c727031e3ed2d8020f7ba284d78cc2671bd36ea"
+dependencies = [
+ "serde",
+]
+
+[[package]]
+name = "cargo_metadata"
+version = "0.19.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dd5eb614ed4c27c5d706420e4320fbe3216ab31fa1c33cd8246ac36dae4479ba"
+dependencies = [
+ "camino",
+ "cargo-platform",
+ "semver",
+ "serde",
+ "serde_json",
+ "thiserror 2.0.17",
+]
+
+[[package]]
+name = "cargo_toml"
+version = "0.22.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "374b7c592d9c00c1f4972ea58390ac6b18cbb6ab79011f3bdc90a0b82ca06b77"
+dependencies = [
+ "serde",
+ "toml 0.9.8",
+]
+
+[[package]]
+name = "cc"
+version = "1.2.46"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b97463e1064cb1b1c1384ad0a0b9c8abd0988e2a91f52606c80ef14aadb63e36"
+dependencies = [
+ "find-msvc-tools",
+ "shlex",
+]
+
+[[package]]
+name = "cesu8"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6d43a04d8753f35258c91f8ec639f792891f748a1edbd759cf1dcea3382ad83c"
+
+[[package]]
+name = "cfb"
+version = "0.7.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d38f2da7a0a2c4ccf0065be06397cc26a81f4e528be095826eee9d4adbb8c60f"
+dependencies = [
+ "byteorder",
+ "fnv",
+ "uuid",
+]
+
+[[package]]
+name = "cfg-expr"
+version = "0.15.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d067ad48b8650848b989a59a86c6c36a995d02d2bf778d45c3c5d57bc2718f02"
+dependencies = [
+ "smallvec",
+ "target-lexicon",
+]
+
+[[package]]
+name = "cfg-if"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9330f8b2ff13f34540b44e946ef35111825727b38d33286ef986142615121801"
+
+[[package]]
+name = "cfg_aliases"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fd16c4719339c4530435d38e511904438d07cce7950afa3718a84ac36c10e89e"
+
+[[package]]
+name = "cfg_aliases"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "613afe47fcd5fac7ccf1db93babcb082c5994d996f20b8b159f2ad1658eb5724"
+
+[[package]]
+name = "chrono"
+version = "0.4.42"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "145052bdd345b87320e369255277e3fb5152762ad123a901ef5c262dd38fe8d2"
+dependencies = [
+ "iana-time-zone",
+ "js-sys",
+ "num-traits",
+ "serde",
+ "wasm-bindgen",
+ "windows-link 0.2.1",
+]
+
+[[package]]
+name = "combine"
+version = "4.6.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ba5a308b75df32fe02788e748662718f03fde005016435c444eea572398219fd"
+dependencies = [
+ "bytes",
+ "memchr",
+]
+
+[[package]]
+name = "compression-codecs"
+version = "0.4.33"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "302266479cb963552d11bd042013a58ef1adc56768016c8b82b4199488f2d4ad"
+dependencies = [
+ "brotli",
+ "compression-core",
+ "flate2",
+ "memchr",
+]
+
+[[package]]
+name = "compression-core"
+version = "0.4.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75984efb6ed102a0d42db99afb6c1948f0380d1d91808d5529916e6c08b49d8d"
+
+[[package]]
+name = "concurrent-queue"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4ca0197aee26d1ae37445ee532fefce43251d24cc7c166799f4d46817f1d3973"
+dependencies = [
+ "crossbeam-utils",
+]
+
+[[package]]
+name = "convert_case"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6245d59a3e82a7fc217c5828a6692dbc6dfb63a0c8c90495621f7b9d79704a0e"
+
+[[package]]
+name = "cookie"
+version = "0.18.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4ddef33a339a91ea89fb53151bd0a4689cfce27055c291dfa69945475d22c747"
+dependencies = [
+ "time",
+ "version_check",
+]
+
+[[package]]
+name = "core-foundation"
+version = "0.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b2a6cd9ae233e7f62ba4e9353e81a88df7fc8a5987b8d445b4d90c879bd156f6"
+dependencies = [
+ "core-foundation-sys",
+ "libc",
+]
+
+[[package]]
+name = "core-foundation-sys"
+version = "0.8.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "773648b94d0e5d620f64f280777445740e61fe701025087ec8b57f45c791888b"
+
+[[package]]
+name = "core-graphics"
+version = "0.24.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fa95a34622365fa5bbf40b20b75dba8dfa8c94c734aea8ac9a5ca38af14316f1"
+dependencies = [
+ "bitflags 2.10.0",
+ "core-foundation",
+ "core-graphics-types",
+ "foreign-types",
+ "libc",
+]
+
+[[package]]
+name = "core-graphics-types"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3d44a101f213f6c4cdc1853d4b78aef6db6bdfa3468798cc1d9912f4735013eb"
+dependencies = [
+ "bitflags 2.10.0",
+ "core-foundation",
+ "libc",
+]
+
+[[package]]
+name = "cpufeatures"
+version = "0.2.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "59ed5838eebb26a2bb2e58f6d5b5316989ae9d08bab10e0e6d103e656d1b0280"
+dependencies = [
+ "libc",
+]
+
+[[package]]
+name = "crc32fast"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9481c1c90cbf2ac953f07c8d4a58aa3945c425b7185c9154d67a65e4230da511"
+dependencies = [
+ "cfg-if",
+]
+
+[[package]]
+name = "crossbeam-channel"
+version = "0.5.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "82b8f8f868b36967f9606790d1903570de9ceaf870a7bf9fbbd3016d636a2cb2"
+dependencies = [
+ "crossbeam-utils",
+]
+
+[[package]]
+name = "crossbeam-utils"
+version = "0.8.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d0a5c400df2834b80a4c3327b3aad3a4c4cd4de0629063962b03235697506a28"
+
+[[package]]
+name = "crypto-common"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "78c8292055d1c1df0cce5d180393dc8cce0abec0a7102adb6c7b1eef6016d60a"
+dependencies = [
+ "generic-array",
+ "typenum",
+]
+
+[[package]]
+name = "cssparser"
+version = "0.29.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f93d03419cb5950ccfd3daf3ff1c7a36ace64609a1a8746d493df1ca0afde0fa"
+dependencies = [
+ "cssparser-macros",
+ "dtoa-short",
+ "itoa",
+ "matches",
+ "phf 0.10.1",
+ "proc-macro2",
+ "quote",
+ "smallvec",
+ "syn 1.0.109",
+]
+
+[[package]]
+name = "cssparser-macros"
+version = "0.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13b588ba4ac1a99f7f2964d24b3d896ddc6bf847ee3855dbd4366f058cfcd331"
+dependencies = [
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "ctor"
+version = "0.2.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32a2785755761f3ddc1492979ce1e48d2c00d09311c39e4466429188f3dd6501"
+dependencies = [
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "darling"
+version = "0.21.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9cdf337090841a411e2a7f3deb9187445851f91b309c0c0a29e05f74a00a48c0"
+dependencies = [
+ "darling_core",
+ "darling_macro",
+]
+
+[[package]]
+name = "darling_core"
+version = "0.21.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1247195ecd7e3c85f83c8d2a366e4210d588e802133e1e355180a9870b517ea4"
+dependencies = [
+ "fnv",
+ "ident_case",
+ "proc-macro2",
+ "quote",
+ "strsim",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "darling_macro"
+version = "0.21.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d38308df82d1080de0afee5d069fa14b0326a88c14f15c5ccda35b4a6c414c81"
+dependencies = [
+ "darling_core",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "deranged"
+version = "0.5.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ececcb659e7ba858fb4f10388c250a7252eb0a27373f1a72b8748afdd248e587"
+dependencies = [
+ "powerfmt",
+ "serde_core",
+]
+
+[[package]]
+name = "derive_arbitrary"
+version = "1.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e567bd82dcff979e4b03460c307b3cdc9e96fde3d73bed1496d2bc75d9dd62a"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "derive_more"
+version = "0.99.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6edb4b64a43d977b8e99788fe3a04d483834fba1215a7e02caa415b626497f7f"
+dependencies = [
+ "convert_case",
+ "proc-macro2",
+ "quote",
+ "rustc_version",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "digest"
+version = "0.10.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9ed9a281f7bc9b7576e61468ba615a66a5c8cfdff42420a70aa82701a3b1e292"
+dependencies = [
+ "block-buffer",
+ "crypto-common",
+]
+
+[[package]]
+name = "dirs"
+version = "5.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "44c45a9d03d6676652bcb5e724c7e988de1acad23a711b5217ab9cbecbec2225"
+dependencies = [
+ "dirs-sys 0.4.1",
+]
+
+[[package]]
+name = "dirs"
+version = "6.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c3e8aa94d75141228480295a7d0e7feb620b1a5ad9f12bc40be62411e38cce4e"
+dependencies = [
+ "dirs-sys 0.5.0",
+]
+
+[[package]]
+name = "dirs-sys"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "520f05a5cbd335fae5a99ff7a6ab8627577660ee5cfd6a94a6a929b52ff0321c"
+dependencies = [
+ "libc",
+ "option-ext",
+ "redox_users 0.4.6",
+ "windows-sys 0.48.0",
+]
+
+[[package]]
+name = "dirs-sys"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e01a3366d27ee9890022452ee61b2b63a67e6f13f58900b651ff5665f0bb1fab"
+dependencies = [
+ "libc",
+ "option-ext",
+ "redox_users 0.5.2",
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "dispatch"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bd0c93bb4b0c6d9b77f4435b0ae98c24d17f1c45b2ff844c6151a07256ca923b"
+
+[[package]]
+name = "dispatch2"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "89a09f22a6c6069a18470eb92d2298acf25463f14256d24778e1230d789a2aec"
+dependencies = [
+ "bitflags 2.10.0",
+ "block2 0.6.2",
+ "libc",
+ "objc2 0.6.3",
+]
+
+[[package]]
+name = "displaydoc"
+version = "0.2.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "97369cbbc041bc366949bc74d34658d6cda5621039731c6310521892a3a20ae0"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "dlib"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "330c60081dcc4c72131f8eb70510f1ac07223e5d4163db481a04a0befcffa412"
+dependencies = [
+ "libloading 0.8.9",
+]
+
+[[package]]
+name = "dlopen2"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b54f373ccf864bf587a89e880fb7610f8d73f3045f13580948ccbcaff26febff"
+dependencies = [
+ "dlopen2_derive",
+ "libc",
+ "once_cell",
+ "winapi",
+]
+
+[[package]]
+name = "dlopen2_derive"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "788160fb30de9cdd857af31c6a2675904b16ece8fc2737b2c7127ba368c9d0f4"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "downcast-rs"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75b325c5dbd37f80359721ad39aca5a29fb04c89279657cffdda8736d0c0b9d2"
+
+[[package]]
+name = "dpi"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d8b14ccef22fc6f5a8f4d7d768562a182c04ce9a3b3157b91390b52ddfdf1a76"
+dependencies = [
+ "serde",
+]
+
+[[package]]
+name = "dtoa"
+version = "1.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d6add3b8cff394282be81f3fc1a0605db594ed69890078ca6e2cab1c408bcf04"
+
+[[package]]
+name = "dtoa-short"
+version = "0.3.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cd1511a7b6a56299bd043a9c167a6d2bfb37bf84a6dfceaba651168adfb43c87"
+dependencies = [
+ "dtoa",
+]
+
+[[package]]
+name = "dunce"
+version = "1.0.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "92773504d58c093f6de2459af4af33faa518c13451eb8f2b5698ed3d36e7c813"
+
+[[package]]
+name = "dyn-clone"
+version = "1.0.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d0881ea181b1df73ff77ffaaf9c7544ecc11e82fba9b5f27b262a3c73a332555"
+
+[[package]]
+name = "embed-resource"
+version = "3.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "55a075fc573c64510038d7ee9abc7990635863992f83ebc52c8b433b8411a02e"
+dependencies = [
+ "cc",
+ "memchr",
+ "rustc_version",
+ "toml 0.9.8",
+ "vswhom",
+ "winreg 0.55.0",
+]
+
+[[package]]
+name = "embed_plist"
+version = "1.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4ef6b89e5b37196644d8796de5268852ff179b44e96276cf4290264843743bb7"
+
+[[package]]
+name = "encoding_rs"
+version = "0.8.35"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75030f3c4f45dafd7586dd6780965a8c7e8e285a5ecb86713e63a79c5b2766f3"
+dependencies = [
+ "cfg-if",
+]
+
+[[package]]
+name = "endi"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a3d8a32ae18130a3c84dd492d4215c3d913c3b07c6b63c2eb3eb7ff1101ab7bf"
+
+[[package]]
+name = "enumflags2"
+version = "0.7.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1027f7680c853e056ebcec683615fb6fbbc07dbaa13b4d5d9442b146ded4ecef"
+dependencies = [
+ "enumflags2_derive",
+ "serde",
+]
+
+[[package]]
+name = "enumflags2_derive"
+version = "0.7.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67c78a4d8fdf9953a5c9d458f9efe940fd97a0cab0941c075a813ac594733827"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "env_filter"
+version = "0.1.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1bf3c259d255ca70051b30e2e95b5446cdb8949ac4cd22c0d7fd634d89f568e2"
+dependencies = [
+ "log",
+ "regex",
+]
+
+[[package]]
+name = "equivalent"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "877a4ace8713b0bcf2a4e7eec82529c029f1d0619886d18145fea96c3ffe5c0f"
+
+[[package]]
+name = "erased-serde"
+version = "0.4.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "89e8918065695684b2b0702da20382d5ae6065cf3327bc2d6436bd49a71ce9f3"
+dependencies = [
+ "serde",
+ "serde_core",
+ "typeid",
+]
+
+[[package]]
+name = "errno"
+version = "0.3.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "39cab71617ae0d63f51a36d69f866391735b51691dbda63cf6f96d042b63efeb"
+dependencies = [
+ "libc",
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "event-listener"
+version = "5.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e13b66accf52311f30a0db42147dadea9850cb48cd070028831ae5f5d4b856ab"
+dependencies = [
+ "concurrent-queue",
+ "parking",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "event-listener-strategy"
+version = "0.5.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8be9f3dfaaffdae2972880079a491a1a8bb7cbed0b8dd7a347f668b4150a3b93"
+dependencies = [
+ "event-listener",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "fastrand"
+version = "2.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "37909eebbb50d72f9059c3b6d82c0463f2ff062c9e95845c43a6c9c0355411be"
+
+[[package]]
+name = "fdeflate"
+version = "0.3.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e6853b52649d4ac5c0bd02320cddc5ba956bdb407c4b75a2c6b75bf51500f8c"
+dependencies = [
+ "simd-adler32",
+]
+
+[[package]]
+name = "fern"
+version = "0.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4316185f709b23713e41e3195f90edef7fb00c3ed4adc79769cf09cc762a3b29"
+dependencies = [
+ "log",
+]
+
+[[package]]
+name = "field-offset"
+version = "0.3.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "38e2275cc4e4fc009b0669731a1e5ab7ebf11f469eaede2bab9309a5b4d6057f"
+dependencies = [
+ "memoffset",
+ "rustc_version",
+]
+
+[[package]]
+name = "filedescriptor"
+version = "0.8.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e40758ed24c9b2eeb76c35fb0aebc66c626084edd827e07e1552279814c6682d"
+dependencies = [
+ "libc",
+ "thiserror 1.0.69",
+ "winapi",
+]
+
+[[package]]
+name = "filetime"
+version = "0.2.26"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bc0505cd1b6fa6580283f6bdf70a73fcf4aba1184038c90902b92b3dd0df63ed"
+dependencies = [
+ "cfg-if",
+ "libc",
+ "libredox",
+ "windows-sys 0.60.2",
+]
+
+[[package]]
+name = "find-msvc-tools"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3a3076410a55c90011c298b04d0cfa770b00fa04e1e3c97d3f6c9de105a03844"
+
+[[package]]
+name = "flate2"
+version = "1.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bfe33edd8e85a12a67454e37f8c75e730830d83e313556ab9ebf9ee7fbeb3bfb"
+dependencies = [
+ "crc32fast",
+ "miniz_oxide",
+]
+
+[[package]]
+name = "fnv"
+version = "1.0.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f9eec918d3f24069decb9af1554cad7c880e2da24a9afd88aca000531ab82c1"
+
+[[package]]
+name = "foreign-types"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d737d9aa519fb7b749cbc3b962edcf310a8dd1f4b67c91c4f83975dbdd17d965"
+dependencies = [
+ "foreign-types-macros",
+ "foreign-types-shared",
+]
+
+[[package]]
+name = "foreign-types-macros"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1a5c6c585bc94aaf2c7b51dd4c2ba22680844aba4c687be581871a6f518c5742"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "foreign-types-shared"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "aa9a19cbb55df58761df49b23516a86d432839add4af60fc256da840f66ed35b"
+
+[[package]]
+name = "form_urlencoded"
+version = "1.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cb4cb245038516f5f85277875cdaa4f7d2c9a0fa0468de06ed190163b1581fcf"
+dependencies = [
+ "percent-encoding",
+]
+
+[[package]]
+name = "funty"
+version = "2.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e6d5a32815ae3f33302d95fdcb2ce17862f8c65363dcfd29360480ba1001fc9c"
+
+[[package]]
+name = "futf"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df420e2e84819663797d1ec6544b13c5be84629e7bb00dc960d6917db2987843"
+dependencies = [
+ "mac",
+ "new_debug_unreachable",
+]
+
+[[package]]
+name = "futures-channel"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2dff15bf788c671c1934e366d07e30c1814a8ef514e1af724a602e8a2fbe1b10"
+dependencies = [
+ "futures-core",
+]
+
+[[package]]
+name = "futures-core"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "05f29059c0c2090612e8d742178b0580d2dc940c837851ad723096f87af6663e"
+
+[[package]]
+name = "futures-executor"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e28d1d997f585e54aebc3f97d39e72338912123a67330d723fdbb564d646c9f"
+dependencies = [
+ "futures-core",
+ "futures-task",
+ "futures-util",
+]
+
+[[package]]
+name = "futures-io"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9e5c1b78ca4aae1ac06c48a526a655760685149f0d465d21f37abfe57ce075c6"
+
+[[package]]
+name = "futures-lite"
+version = "2.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f78e10609fe0e0b3f4157ffab1876319b5b0db102a2c60dc4626306dc46b44ad"
+dependencies = [
+ "fastrand",
+ "futures-core",
+ "futures-io",
+ "parking",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "futures-macro"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "162ee34ebcb7c64a8abebc059ce0fee27c2262618d7b60ed8faf72fef13c3650"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "futures-sink"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e575fab7d1e0dcb8d0c7bcf9a63ee213816ab51902e6d244a95819acacf1d4f7"
+
+[[package]]
+name = "futures-task"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f90f7dce0722e95104fcb095585910c0977252f286e354b5e3bd38902cd99988"
+
+[[package]]
+name = "futures-util"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9fa08315bb612088cc391249efdc3bc77536f16c91f6cf495e6fbe85b20a4a81"
+dependencies = [
+ "futures-core",
+ "futures-io",
+ "futures-macro",
+ "futures-sink",
+ "futures-task",
+ "memchr",
+ "pin-project-lite",
+ "pin-utils",
+ "slab",
+]
+
+[[package]]
+name = "fxhash"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c31b6d751ae2c7f11320402d34e41349dd1016f8d5d45e48c4312bc8625af50c"
+dependencies = [
+ "byteorder",
+]
+
+[[package]]
+name = "gdk"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d9f245958c627ac99d8e529166f9823fb3b838d1d41fd2b297af3075093c2691"
+dependencies = [
+ "cairo-rs",
+ "gdk-pixbuf",
+ "gdk-sys",
+ "gio",
+ "glib",
+ "libc",
+ "pango",
+]
+
+[[package]]
+name = "gdk-pixbuf"
+version = "0.18.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "50e1f5f1b0bfb830d6ccc8066d18db35c487b1b2b1e8589b5dfe9f07e8defaec"
+dependencies = [
+ "gdk-pixbuf-sys",
+ "gio",
+ "glib",
+ "libc",
+ "once_cell",
+]
+
+[[package]]
+name = "gdk-pixbuf-sys"
+version = "0.18.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f9839ea644ed9c97a34d129ad56d38a25e6756f99f3a88e15cd39c20629caf7"
+dependencies = [
+ "gio-sys",
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "system-deps",
+]
+
+[[package]]
+name = "gdk-sys"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5c2d13f38594ac1e66619e188c6d5a1adb98d11b2fcf7894fc416ad76aa2f3f7"
+dependencies = [
+ "cairo-sys-rs",
+ "gdk-pixbuf-sys",
+ "gio-sys",
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "pango-sys",
+ "pkg-config",
+ "system-deps",
+]
+
+[[package]]
+name = "gdkwayland-sys"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "140071d506d223f7572b9f09b5e155afbd77428cd5cc7af8f2694c41d98dfe69"
+dependencies = [
+ "gdk-sys",
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "pkg-config",
+ "system-deps",
+]
+
+[[package]]
+name = "gdkx11"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3caa00e14351bebbc8183b3c36690327eb77c49abc2268dd4bd36b856db3fbfe"
+dependencies = [
+ "gdk",
+ "gdkx11-sys",
+ "gio",
+ "glib",
+ "libc",
+ "x11",
+]
+
+[[package]]
+name = "gdkx11-sys"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6e2e7445fe01ac26f11601db260dd8608fe172514eb63b3b5e261ea6b0f4428d"
+dependencies = [
+ "gdk-sys",
+ "glib-sys",
+ "libc",
+ "system-deps",
+ "x11",
+]
+
+[[package]]
+name = "generic-array"
+version = "0.14.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85649ca51fd72272d7821adaf274ad91c288277713d9c18820d8499a7ff69e9a"
+dependencies = [
+ "typenum",
+ "version_check",
+]
+
+[[package]]
+name = "getrandom"
+version = "0.1.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8fc3cb4d91f53b50155bdcfd23f6a4c39ae1969c2ae85982b135750cccaf5fce"
+dependencies = [
+ "cfg-if",
+ "libc",
+ "wasi 0.9.0+wasi-snapshot-preview1",
+]
+
+[[package]]
+name = "getrandom"
+version = "0.2.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "335ff9f135e4384c8150d6f27c6daed433577f86b4750418338c01a1a2528592"
+dependencies = [
+ "cfg-if",
+ "js-sys",
+ "libc",
+ "wasi 0.11.1+wasi-snapshot-preview1",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "getrandom"
+version = "0.3.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "899def5c37c4fd7b2664648c28120ecec138e4d395b459e5ca34f9cce2dd77fd"
+dependencies = [
+ "cfg-if",
+ "js-sys",
+ "libc",
+ "r-efi",
+ "wasip2",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "gio"
+version = "0.18.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d4fc8f532f87b79cbc51a79748f16a6828fb784be93145a322fa14d06d354c73"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-io",
+ "futures-util",
+ "gio-sys",
+ "glib",
+ "libc",
+ "once_cell",
+ "pin-project-lite",
+ "smallvec",
+ "thiserror 1.0.69",
+]
+
+[[package]]
+name = "gio-sys"
+version = "0.18.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "37566df850baf5e4cb0dfb78af2e4b9898d817ed9263d1090a2df958c64737d2"
+dependencies = [
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "system-deps",
+ "winapi",
+]
+
+[[package]]
+name = "glib"
+version = "0.18.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "233daaf6e83ae6a12a52055f568f9d7cf4671dabb78ff9560ab6da230ce00ee5"
+dependencies = [
+ "bitflags 2.10.0",
+ "futures-channel",
+ "futures-core",
+ "futures-executor",
+ "futures-task",
+ "futures-util",
+ "gio-sys",
+ "glib-macros",
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "memchr",
+ "once_cell",
+ "smallvec",
+ "thiserror 1.0.69",
+]
+
+[[package]]
+name = "glib-macros"
+version = "0.18.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0bb0228f477c0900c880fd78c8759b95c7636dbd7842707f49e132378aa2acdc"
+dependencies = [
+ "heck 0.4.1",
+ "proc-macro-crate 2.0.2",
+ "proc-macro-error",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "glib-sys"
+version = "0.18.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "063ce2eb6a8d0ea93d2bf8ba1957e78dbab6be1c2220dd3daca57d5a9d869898"
+dependencies = [
+ "libc",
+ "system-deps",
+]
+
+[[package]]
+name = "glob"
+version = "0.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0cc23270f6e1808e30a928bdc84dea0b9b4136a8bc82338574f23baf47bbd280"
+
+[[package]]
+name = "gobject-sys"
+version = "0.18.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0850127b514d1c4a4654ead6dedadb18198999985908e6ffe4436f53c785ce44"
+dependencies = [
+ "glib-sys",
+ "libc",
+ "system-deps",
+]
+
+[[package]]
+name = "gtk"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fd56fb197bfc42bd5d2751f4f017d44ff59fbb58140c6b49f9b3b2bdab08506a"
+dependencies = [
+ "atk",
+ "cairo-rs",
+ "field-offset",
+ "futures-channel",
+ "gdk",
+ "gdk-pixbuf",
+ "gio",
+ "glib",
+ "gtk-sys",
+ "gtk3-macros",
+ "libc",
+ "pango",
+ "pkg-config",
+]
+
+[[package]]
+name = "gtk-sys"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8f29a1c21c59553eb7dd40e918be54dccd60c52b049b75119d5d96ce6b624414"
+dependencies = [
+ "atk-sys",
+ "cairo-sys-rs",
+ "gdk-pixbuf-sys",
+ "gdk-sys",
+ "gio-sys",
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "pango-sys",
+ "system-deps",
+]
+
+[[package]]
+name = "gtk3-macros"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "52ff3c5b21f14f0736fed6dcfc0bfb4225ebf5725f3c0209edeec181e4d73e9d"
+dependencies = [
+ "proc-macro-crate 1.3.1",
+ "proc-macro-error",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "hashbrown"
+version = "0.12.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a9ee70c43aaf417c914396645a0fa852624801b24ebb7ae78fe8272889ac888"
+dependencies = [
+ "ahash",
+]
+
+[[package]]
+name = "hashbrown"
+version = "0.16.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5419bdc4f6a9207fbeba6d11b604d481addf78ecd10c11ad51e76c2f6482748d"
+
+[[package]]
+name = "heck"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "95505c38b4572b2d910cecb0281560f54b440a19336cbbcb27bf6ce6adc6f5a8"
+
+[[package]]
+name = "heck"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2304e00983f87ffb38b55b444b5e3b60a884b5d30c0fca7d82fe33449bbe55ea"
+
+[[package]]
+name = "hermit-abi"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc0fef456e4baa96da950455cd02c081ca953b141298e41db3fc7e36b1da849c"
+
+[[package]]
+name = "hex"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f24254aa9a54b5c858eaee2f5bccdb46aaf0e486a595ed5fd8f86ba55232a70"
+
+[[package]]
+name = "html5ever"
+version = "0.29.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3b7410cae13cbc75623c98ac4cbfd1f0bedddf3227afc24f370cf0f50a44a11c"
+dependencies = [
+ "log",
+ "mac",
+ "markup5ever",
+ "match_token",
+]
+
+[[package]]
+name = "http"
+version = "1.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f4a85d31aea989eead29a3aaf9e1115a180df8282431156e533de47660892565"
+dependencies = [
+ "bytes",
+ "fnv",
+ "itoa",
+]
+
+[[package]]
+name = "http-body"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1efedce1fb8e6913f23e0c92de8e62cd5b772a67e7b3946df930a62566c93184"
+dependencies = [
+ "bytes",
+ "http",
+]
+
+[[package]]
+name = "http-body-util"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b021d93e26becf5dc7e1b75b1bed1fd93124b374ceb73f43d4d4eafec896a64a"
+dependencies = [
+ "bytes",
+ "futures-core",
+ "http",
+ "http-body",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "httparse"
+version = "1.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6dbf3de79e51f3d586ab4cb9d5c3e2c14aa28ed23d180cf89b4df0454a69cc87"
+
+[[package]]
+name = "httpdate"
+version = "1.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df3b46402a9d5adb4c86a0cf463f42e19994e3ee891101b1841f30a545cb49a9"
+
+[[package]]
+name = "hyper"
+version = "1.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2ab2d4f250c3d7b1c9fcdff1cece94ea4e2dfbec68614f7b87cb205f24ca9d11"
+dependencies = [
+ "atomic-waker",
+ "bytes",
+ "futures-channel",
+ "futures-core",
+ "http",
+ "http-body",
+ "httparse",
+ "httpdate",
+ "itoa",
+ "pin-project-lite",
+ "pin-utils",
+ "smallvec",
+ "tokio",
+ "want",
+]
+
+[[package]]
+name = "hyper-rustls"
+version = "0.27.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3c93eb611681b207e1fe55d5a71ecf91572ec8a6705cdb6857f7d8d5242cf58"
+dependencies = [
+ "http",
+ "hyper",
+ "hyper-util",
+ "rustls",
+ "rustls-pki-types",
+ "tokio",
+ "tokio-rustls",
+ "tower-service",
+ "webpki-roots",
+]
+
+[[package]]
+name = "hyper-util"
+version = "0.1.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "52e9a2a24dc5c6821e71a7030e1e14b7b632acac55c40e9d2e082c621261bb56"
+dependencies = [
+ "base64 0.22.1",
+ "bytes",
+ "futures-channel",
+ "futures-core",
+ "futures-util",
+ "http",
+ "http-body",
+ "hyper",
+ "ipnet",
+ "libc",
+ "percent-encoding",
+ "pin-project-lite",
+ "socket2",
+ "tokio",
+ "tower-service",
+ "tracing",
+]
+
+[[package]]
+name = "iana-time-zone"
+version = "0.1.64"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "33e57f83510bb73707521ebaffa789ec8caf86f9657cad665b092b581d40e9fb"
+dependencies = [
+ "android_system_properties",
+ "core-foundation-sys",
+ "iana-time-zone-haiku",
+ "js-sys",
+ "log",
+ "wasm-bindgen",
+ "windows-core 0.62.2",
+]
+
+[[package]]
+name = "iana-time-zone-haiku"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f31827a206f56af32e590ba56d5d2d085f558508192593743f16b2306495269f"
+dependencies = [
+ "cc",
+]
+
+[[package]]
+name = "ico"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cc50b891e4acf8fe0e71ef88ec43ad82ee07b3810ad09de10f1d01f072ed4b98"
+dependencies = [
+ "byteorder",
+ "png",
+]
+
+[[package]]
+name = "icu_collections"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4c6b649701667bbe825c3b7e6388cb521c23d88644678e83c0c4d0a621a34b43"
+dependencies = [
+ "displaydoc",
+ "potential_utf",
+ "yoke",
+ "zerofrom",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_locale_core"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "edba7861004dd3714265b4db54a3c390e880ab658fec5f7db895fae2046b5bb6"
+dependencies = [
+ "displaydoc",
+ "litemap",
+ "tinystr",
+ "writeable",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_normalizer"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5f6c8828b67bf8908d82127b2054ea1b4427ff0230ee9141c54251934ab1b599"
+dependencies = [
+ "icu_collections",
+ "icu_normalizer_data",
+ "icu_properties",
+ "icu_provider",
+ "smallvec",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_normalizer_data"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7aedcccd01fc5fe81e6b489c15b247b8b0690feb23304303a9e560f37efc560a"
+
+[[package]]
+name = "icu_properties"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e93fcd3157766c0c8da2f8cff6ce651a31f0810eaa1c51ec363ef790bbb5fb99"
+dependencies = [
+ "icu_collections",
+ "icu_locale_core",
+ "icu_properties_data",
+ "icu_provider",
+ "zerotrie",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_properties_data"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "02845b3647bb045f1100ecd6480ff52f34c35f82d9880e029d329c21d1054899"
+
+[[package]]
+name = "icu_provider"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85962cf0ce02e1e0a629cc34e7ca3e373ce20dda4c4d7294bbd0bf1fdb59e614"
+dependencies = [
+ "displaydoc",
+ "icu_locale_core",
+ "writeable",
+ "yoke",
+ "zerofrom",
+ "zerotrie",
+ "zerovec",
+]
+
+[[package]]
+name = "ident_case"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9e0384b61958566e926dc50660321d12159025e767c18e043daf26b70104c39"
+
+[[package]]
+name = "idna"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3b0875f23caa03898994f6ddc501886a45c7d3d62d04d2d90788d47be1b1e4de"
+dependencies = [
+ "idna_adapter",
+ "smallvec",
+ "utf8_iter",
+]
+
+[[package]]
+name = "idna_adapter"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3acae9609540aa318d1bc588455225fb2085b9ed0c4f6bd0d9d5bcd86f1a0344"
+dependencies = [
+ "icu_normalizer",
+ "icu_properties",
+]
+
+[[package]]
+name = "indexmap"
+version = "1.9.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bd070e393353796e801d209ad339e89596eb4c8d430d18ede6a1cced8fafbd99"
+dependencies = [
+ "autocfg",
+ "hashbrown 0.12.3",
+ "serde",
+]
+
+[[package]]
+name = "indexmap"
+version = "2.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6717a8d2a5a929a1a2eb43a12812498ed141a0bcfb7e8f7844fbdbe4303bba9f"
+dependencies = [
+ "equivalent",
+ "hashbrown 0.16.0",
+ "serde",
+ "serde_core",
+]
+
+[[package]]
+name = "infer"
+version = "0.19.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a588916bfdfd92e71cacef98a63d9b1f0d74d6599980d11894290e7ddefffcf7"
+dependencies = [
+ "cfb",
+]
+
+[[package]]
+name = "ipnet"
+version = "2.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "469fb0b9cefa57e3ef31275ee7cacb78f2fdca44e4765491884a2b119d4eb130"
+
+[[package]]
+name = "iri-string"
+version = "0.7.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4f867b9d1d896b67beb18518eda36fdb77a32ea590de864f1325b294a6d14397"
+dependencies = [
+ "memchr",
+ "serde",
+]
+
+[[package]]
+name = "is-docker"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "928bae27f42bc99b60d9ac7334e3a21d10ad8f1835a4e12ec3ec0464765ed1b3"
+dependencies = [
+ "once_cell",
+]
+
+[[package]]
+name = "is-wsl"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "173609498df190136aa7dea1a91db051746d339e18476eed5ca40521f02d7aa5"
+dependencies = [
+ "is-docker",
+ "once_cell",
+]
+
+[[package]]
+name = "itoa"
+version = "1.0.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4a5f13b858c8d314ee3e8f639011f7ccefe71f97f96e50151fb991f267928e2c"
+
+[[package]]
+name = "javascriptcore-rs"
+version = "1.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ca5671e9ffce8ffba57afc24070e906da7fc4b1ba66f2cabebf61bf2ea257fcc"
+dependencies = [
+ "bitflags 1.3.2",
+ "glib",
+ "javascriptcore-rs-sys",
+]
+
+[[package]]
+name = "javascriptcore-rs-sys"
+version = "1.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "af1be78d14ffa4b75b66df31840478fef72b51f8c2465d4ca7c194da9f7a5124"
+dependencies = [
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "system-deps",
+]
+
+[[package]]
+name = "jni"
+version = "0.21.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1a87aa2bb7d2af34197c04845522473242e1aa17c12f4935d5856491a7fb8c97"
+dependencies = [
+ "cesu8",
+ "cfg-if",
+ "combine",
+ "jni-sys",
+ "log",
+ "thiserror 1.0.69",
+ "walkdir",
+ "windows-sys 0.45.0",
+]
+
+[[package]]
+name = "jni-sys"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8eaf4bc02d17cbdd7ff4c7438cafcdf7fb9a4613313ad11b4f8fefe7d3fa0130"
+
+[[package]]
+name = "js-sys"
+version = "0.3.82"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b011eec8cc36da2aab2d5cff675ec18454fad408585853910a202391cf9f8e65"
+dependencies = [
+ "once_cell",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "json-patch"
+version = "3.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "863726d7afb6bc2590eeff7135d923545e5e964f004c2ccf8716c25e70a86f08"
+dependencies = [
+ "jsonptr",
+ "serde",
+ "serde_json",
+ "thiserror 1.0.69",
+]
+
+[[package]]
+name = "jsonptr"
+version = "0.6.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5dea2b27dd239b2556ed7a25ba842fe47fd602e7fc7433c2a8d6106d4d9edd70"
+dependencies = [
+ "serde",
+ "serde_json",
+]
+
+[[package]]
+name = "keyboard-types"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b750dcadc39a09dbadd74e118f6dd6598df77fa01df0cfcdc52c28dece74528a"
+dependencies = [
+ "bitflags 2.10.0",
+ "serde",
+ "unicode-segmentation",
+]
+
+[[package]]
+name = "kuchikiki"
+version = "0.8.8-speedreader"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "02cb977175687f33fa4afa0c95c112b987ea1443e5a51c8f8ff27dc618270cc2"
+dependencies = [
+ "cssparser",
+ "html5ever",
+ "indexmap 2.12.0",
+ "selectors",
+]
+
+[[package]]
+name = "lazy_static"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbd2bcb4c963f2ddae06a2efc7e9f3591312473c50c6685e1f298068316e66fe"
+
+[[package]]
+name = "libappindicator"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "03589b9607c868cc7ae54c0b2a22c8dc03dd41692d48f2d7df73615c6a95dc0a"
+dependencies = [
+ "glib",
+ "gtk",
+ "gtk-sys",
+ "libappindicator-sys",
+ "log",
+]
+
+[[package]]
+name = "libappindicator-sys"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6e9ec52138abedcc58dc17a7c6c0c00a2bdb4f3427c7f63fa97fd0d859155caf"
+dependencies = [
+ "gtk-sys",
+ "libloading 0.7.4",
+ "once_cell",
+]
+
+[[package]]
+name = "libc"
+version = "0.2.177"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2874a2af47a2325c2001a6e6fad9b16a53b802102b528163885171cf92b15976"
+
+[[package]]
+name = "libloading"
+version = "0.7.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b67380fd3b2fbe7527a606e18729d21c6f3951633d0500574c4dc22d2d638b9f"
+dependencies = [
+ "cfg-if",
+ "winapi",
+]
+
+[[package]]
+name = "libloading"
+version = "0.8.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d7c4b02199fee7c5d21a5ae7d8cfa79a6ef5bb2fc834d6e9058e89c825efdc55"
+dependencies = [
+ "cfg-if",
+ "windows-link 0.2.1",
+]
+
+[[package]]
+name = "libredox"
+version = "0.1.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "416f7e718bdb06000964960ffa43b4335ad4012ae8b99060261aa4a8088d5ccb"
+dependencies = [
+ "bitflags 2.10.0",
+ "libc",
+ "redox_syscall",
+]
+
+[[package]]
+name = "linux-raw-sys"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df1d3c3b53da64cf5760482273a98e575c651a67eec7f77df96b5b642de8f039"
+
+[[package]]
+name = "litemap"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6373607a59f0be73a39b6fe456b8192fcc3585f602af20751600e974dd455e77"
+
+[[package]]
+name = "lock_api"
+version = "0.4.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "224399e74b87b5f3557511d98dff8b14089b3dadafcab6bb93eab67d3aace965"
+dependencies = [
+ "scopeguard",
+]
+
+[[package]]
+name = "log"
+version = "0.4.28"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "34080505efa8e45a4b816c349525ebe327ceaa8559756f0356cba97ef3bf7432"
+dependencies = [
+ "value-bag",
+]
+
+[[package]]
+name = "lru-slab"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "112b39cec0b298b6c1999fee3e31427f74f676e4cb9879ed1a121b43661a4154"
+
+[[package]]
+name = "mac"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
+
+[[package]]
+name = "mac-notification-sys"
+version = "0.6.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "65fd3f75411f4725061682ed91f131946e912859d0044d39c4ec0aac818d7621"
+dependencies = [
+ "cc",
+ "objc2 0.6.3",
+ "objc2-foundation 0.3.2",
+ "time",
+]
+
+[[package]]
+name = "malloc_buf"
+version = "0.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "62bb907fe88d54d8d9ce32a3cceab4218ed2f6b7d35617cafe9adf84e43919cb"
+dependencies = [
+ "libc",
+]
+
+[[package]]
+name = "markup5ever"
+version = "0.14.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c7a7213d12e1864c0f002f52c2923d4556935a43dec5e71355c2760e0f6e7a18"
+dependencies = [
+ "log",
+ "phf 0.11.3",
+ "phf_codegen 0.11.3",
+ "string_cache",
+ "string_cache_codegen",
+ "tendril",
+]
+
+[[package]]
+name = "match_token"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "88a9689d8d44bf9964484516275f5cd4c9b59457a6940c1d5d0ecbb94510a36b"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "matches"
+version = "0.1.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2532096657941c2fea9c289d370a250971c689d4f143798ff67113ec042024a5"
+
+[[package]]
+name = "matchit"
+version = "0.8.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "47e1ffaa40ddd1f3ed91f717a33c8c0ee23fff369e3aa8772b9605cc1d22f4c3"
+
+[[package]]
+name = "memchr"
+version = "2.7.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f52b00d39961fc5b2736ea853c9cc86238e165017a493d1d5c8eac6bdc4cc273"
+
+[[package]]
+name = "memoffset"
+version = "0.9.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "488016bfae457b036d996092f6cb448677611ce4449e970ceaf42695203f218a"
+dependencies = [
+ "autocfg",
+]
+
+[[package]]
+name = "mime"
+version = "0.3.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"
+
+[[package]]
+name = "minisign-verify"
+version = "0.2.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e856fdd13623a2f5f2f54676a4ee49502a96a80ef4a62bcedd23d52427c44d43"
+
+[[package]]
+name = "miniz_oxide"
+version = "0.8.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fa76a2c86f704bdb222d66965fb3d63269ce38518b83cb0575fca855ebb6316"
+dependencies = [
+ "adler2",
+ "simd-adler32",
+]
+
+[[package]]
+name = "mio"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "69d83b0086dc8ecf3ce9ae2874b2d1290252e2a30720bea58a5c6639b0092873"
+dependencies = [
+ "libc",
+ "wasi 0.11.1+wasi-snapshot-preview1",
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "muda"
+version = "0.17.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "01c1738382f66ed56b3b9c8119e794a2e23148ac8ea214eda86622d4cb9d415a"
+dependencies = [
+ "crossbeam-channel",
+ "dpi",
+ "gtk",
+ "keyboard-types",
+ "objc2 0.6.3",
+ "objc2-app-kit",
+ "objc2-core-foundation",
+ "objc2-foundation 0.3.2",
+ "once_cell",
+ "png",
+ "serde",
+ "thiserror 2.0.17",
+ "windows-sys 0.60.2",
+]
+
+[[package]]
+name = "ndk"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c3f42e7bbe13d351b6bead8286a43aac9534b82bd3cc43e47037f012ebfd62d4"
+dependencies = [
+ "bitflags 2.10.0",
+ "jni-sys",
+ "log",
+ "ndk-sys",
+ "num_enum",
+ "raw-window-handle",
+ "thiserror 1.0.69",
+]
+
+[[package]]
+name = "ndk-context"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "27b02d87554356db9e9a873add8782d4ea6e3e58ea071a9adb9a2e8ddb884a8b"
+
+[[package]]
+name = "ndk-sys"
+version = "0.6.0+11769913"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ee6cda3051665f1fb8d9e08fc35c96d5a244fb1be711a03b71118828afc9a873"
+dependencies = [
+ "jni-sys",
+]
+
+[[package]]
+name = "new_debug_unreachable"
+version = "1.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "650eef8c711430f1a879fdd01d4745a7deea475becfb90269c06775983bbf086"
+
+[[package]]
+name = "nix"
+version = "0.28.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ab2156c4fce2f8df6c499cc1c763e4394b7482525bf2a9701c9d79d215f519e4"
+dependencies = [
+ "bitflags 2.10.0",
+ "cfg-if",
+ "cfg_aliases 0.1.1",
+ "libc",
+]
+
+[[package]]
+name = "nix"
+version = "0.30.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "74523f3a35e05aba87a1d978330aef40f67b0304ac79c1c00b294c9830543db6"
+dependencies = [
+ "bitflags 2.10.0",
+ "cfg-if",
+ "cfg_aliases 0.2.1",
+ "libc",
+ "memoffset",
+]
+
+[[package]]
+name = "nodrop"
+version = "0.1.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72ef4a56884ca558e5ddb05a1d1e7e1bfd9a68d9ed024c21704cc98872dae1bb"
+
+[[package]]
+name = "notify-rust"
+version = "4.11.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6442248665a5aa2514e794af3b39661a8e73033b1cc5e59899e1276117ee4400"
+dependencies = [
+ "futures-lite",
+ "log",
+ "mac-notification-sys",
+ "serde",
+ "tauri-winrt-notification",
+ "zbus",
+]
+
+[[package]]
+name = "num-conv"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "51d515d32fb182ee37cda2ccdcb92950d6a3c2893aa280e540671c2cd0f3b1d9"
+
+[[package]]
+name = "num-traits"
+version = "0.2.19"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "071dfc062690e90b734c0b2273ce72ad0ffa95f0c74596bc250dcfd960262841"
+dependencies = [
+ "autocfg",
+]
+
+[[package]]
+name = "num_enum"
+version = "0.7.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b1207a7e20ad57b847bbddc6776b968420d38292bbfe2089accff5e19e82454c"
+dependencies = [
+ "num_enum_derive",
+ "rustversion",
+]
+
+[[package]]
+name = "num_enum_derive"
+version = "0.7.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ff32365de1b6743cb203b710788263c44a03de03802daf96092f2da4fe6ba4d7"
+dependencies = [
+ "proc-macro-crate 3.4.0",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "num_threads"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5c7398b9c8b70908f6371f47ed36737907c87c52af34c268fed0bf0ceb92ead9"
+dependencies = [
+ "libc",
+]
+
+[[package]]
+name = "objc"
+version = "0.2.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "915b1b472bc21c53464d6c8461c9d3af805ba1ef837e1cac254428f4a77177b1"
+dependencies = [
+ "malloc_buf",
+]
+
+[[package]]
+name = "objc-sys"
+version = "0.3.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cdb91bdd390c7ce1a8607f35f3ca7151b65afc0ff5ff3b34fa350f7d7c7e4310"
+
+[[package]]
+name = "objc2"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "46a785d4eeff09c14c487497c162e92766fbb3e4059a71840cecc03d9a50b804"
+dependencies = [
+ "objc-sys",
+ "objc2-encode",
+]
+
+[[package]]
+name = "objc2"
+version = "0.6.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b7c2599ce0ec54857b29ce62166b0ed9b4f6f1a70ccc9a71165b6154caca8c05"
+dependencies = [
+ "objc2-encode",
+ "objc2-exception-helper",
+]
+
+[[package]]
+name = "objc2-app-kit"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d49e936b501e5c5bf01fda3a9452ff86dc3ea98ad5f283e1455153142d97518c"
+dependencies = [
+ "bitflags 2.10.0",
+ "block2 0.6.2",
+ "libc",
+ "objc2 0.6.3",
+ "objc2-cloud-kit",
+ "objc2-core-data",
+ "objc2-core-foundation",
+ "objc2-core-graphics",
+ "objc2-core-image",
+ "objc2-core-text",
+ "objc2-core-video",
+ "objc2-foundation 0.3.2",
+ "objc2-quartz-core 0.3.2",
+]
+
+[[package]]
+name = "objc2-cloud-kit"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "73ad74d880bb43877038da939b7427bba67e9dd42004a18b809ba7d87cee241c"
+dependencies = [
+ "bitflags 2.10.0",
+ "objc2 0.6.3",
+ "objc2-foundation 0.3.2",
+]
+
+[[package]]
+name = "objc2-core-data"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b402a653efbb5e82ce4df10683b6b28027616a2715e90009947d50b8dd298fa"
+dependencies = [
+ "bitflags 2.10.0",
+ "objc2 0.6.3",
+ "objc2-foundation 0.3.2",
+]
+
+[[package]]
+name = "objc2-core-foundation"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2a180dd8642fa45cdb7dd721cd4c11b1cadd4929ce112ebd8b9f5803cc79d536"
+dependencies = [
+ "bitflags 2.10.0",
+ "dispatch2",
+ "objc2 0.6.3",
+]
+
+[[package]]
+name = "objc2-core-graphics"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e022c9d066895efa1345f8e33e584b9f958da2fd4cd116792e15e07e4720a807"
+dependencies = [
+ "bitflags 2.10.0",
+ "dispatch2",
+ "objc2 0.6.3",
+ "objc2-core-foundation",
+ "objc2-io-surface",
+]
+
+[[package]]
+name = "objc2-core-image"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e5d563b38d2b97209f8e861173de434bd0214cf020e3423a52624cd1d989f006"
+dependencies = [
+ "objc2 0.6.3",
+ "objc2-foundation 0.3.2",
+]
+
+[[package]]
+name = "objc2-core-text"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0cde0dfb48d25d2b4862161a4d5fcc0e3c24367869ad306b0c9ec0073bfed92d"
+dependencies = [
+ "bitflags 2.10.0",
+ "objc2 0.6.3",
+ "objc2-core-foundation",
+ "objc2-core-graphics",
+]
+
+[[package]]
+name = "objc2-core-video"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d425caf1df73233f29fd8a5c3e5edbc30d2d4307870f802d18f00d83dc5141a6"
+dependencies = [
+ "bitflags 2.10.0",
+ "objc2 0.6.3",
+ "objc2-core-foundation",
+ "objc2-core-graphics",
+ "objc2-io-surface",
+]
+
+[[package]]
+name = "objc2-encode"
+version = "4.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ef25abbcd74fb2609453eb695bd2f860d389e457f67dc17cafc8b8cbc89d0c33"
+
+[[package]]
+name = "objc2-exception-helper"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c7a1c5fbb72d7735b076bb47b578523aedc40f3c439bea6dfd595c089d79d98a"
+dependencies = [
+ "cc",
+]
+
+[[package]]
+name = "objc2-foundation"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0ee638a5da3799329310ad4cfa62fbf045d5f56e3ef5ba4149e7452dcf89d5a8"
+dependencies = [
+ "bitflags 2.10.0",
+ "block2 0.5.1",
+ "libc",
+ "objc2 0.5.2",
+]
+
+[[package]]
+name = "objc2-foundation"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3e0adef53c21f888deb4fa59fc59f7eb17404926ee8a6f59f5df0fd7f9f3272"
+dependencies = [
+ "bitflags 2.10.0",
+ "block2 0.6.2",
+ "libc",
+ "objc2 0.6.3",
+ "objc2-core-foundation",
+]
+
+[[package]]
+name = "objc2-io-surface"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "180788110936d59bab6bd83b6060ffdfffb3b922ba1396b312ae795e1de9d81d"
+dependencies = [
+ "bitflags 2.10.0",
+ "objc2 0.6.3",
+ "objc2-core-foundation",
+]
+
+[[package]]
+name = "objc2-javascript-core"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2a1e6550c4caed348956ce3370c9ffeca70bb1dbed4fa96112e7c6170e074586"
+dependencies = [
+ "objc2 0.6.3",
+ "objc2-core-foundation",
+]
+
+[[package]]
+name = "objc2-metal"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dd0cba1276f6023976a406a14ffa85e1fdd19df6b0f737b063b95f6c8c7aadd6"
+dependencies = [
+ "bitflags 2.10.0",
+ "block2 0.5.1",
+ "objc2 0.5.2",
+ "objc2-foundation 0.2.2",
+]
+
+[[package]]
+name = "objc2-osa-kit"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f112d1746737b0da274ef79a23aac283376f335f4095a083a267a082f21db0c0"
+dependencies = [
+ "bitflags 2.10.0",
+ "objc2 0.6.3",
+ "objc2-app-kit",
+ "objc2-foundation 0.3.2",
+]
+
+[[package]]
+name = "objc2-quartz-core"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e42bee7bff906b14b167da2bac5efe6b6a07e6f7c0a21a7308d40c960242dc7a"
+dependencies = [
+ "bitflags 2.10.0",
+ "block2 0.5.1",
+ "objc2 0.5.2",
+ "objc2-foundation 0.2.2",
+ "objc2-metal",
+]
+
+[[package]]
+name = "objc2-quartz-core"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "96c1358452b371bf9f104e21ec536d37a650eb10f7ee379fff67d2e08d537f1f"
+dependencies = [
+ "bitflags 2.10.0",
+ "objc2 0.6.3",
+ "objc2-foundation 0.3.2",
+]
+
+[[package]]
+name = "objc2-security"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "709fe137109bd1e8b5a99390f77a7d8b2961dafc1a1c5db8f2e60329ad6d895a"
+dependencies = [
+ "bitflags 2.10.0",
+ "objc2 0.6.3",
+ "objc2-core-foundation",
+]
+
+[[package]]
+name = "objc2-ui-kit"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d87d638e33c06f577498cbcc50491496a3ed4246998a7fbba7ccb98b1e7eab22"
+dependencies = [
+ "bitflags 2.10.0",
+ "objc2 0.6.3",
+ "objc2-core-foundation",
+ "objc2-foundation 0.3.2",
+]
+
+[[package]]
+name = "objc2-web-kit"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b2e5aaab980c433cf470df9d7af96a7b46a9d892d521a2cbbb2f8a4c16751e7f"
+dependencies = [
+ "bitflags 2.10.0",
+ "block2 0.6.2",
+ "objc2 0.6.3",
+ "objc2-app-kit",
+ "objc2-core-foundation",
+ "objc2-foundation 0.3.2",
+ "objc2-javascript-core",
+ "objc2-security",
+]
+
+[[package]]
+name = "once_cell"
+version = "1.21.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "42f5e15c9953c5e4ccceeb2e7382a716482c34515315f7b03532b8b4e8393d2d"
+
+[[package]]
+name = "open"
+version = "5.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "43bb73a7fa3799b198970490a51174027ba0d4ec504b03cd08caf513d40024bc"
+dependencies = [
+ "dunce",
+ "is-wsl",
+ "libc",
+ "pathdiff",
+]
+
+[[package]]
+name = "openchamber-desktop"
+version = "0.0.0"
+dependencies = [
+ "anyhow",
+ "axum",
+ "chrono",
+ "dirs 5.0.1",
+ "fastrand",
+ "futures-util",
+ "log",
+ "nix 0.28.0",
+ "objc",
+ "objc2 0.6.3",
+ "objc2-foundation 0.3.2",
+ "once_cell",
+ "parking_lot",
+ "portable-pty",
+ "portpicker",
+ "regex",
+ "reqwest",
+ "serde",
+ "serde_json",
+ "serde_yaml",
+ "tauri",
+ "tauri-build",
+ "tauri-plugin-dialog",
+ "tauri-plugin-fs",
+ "tauri-plugin-log",
+ "tauri-plugin-notification",
+ "tauri-plugin-shell",
+ "tauri-plugin-updater",
+ "tokio",
+ "tokio-util",
+ "tower-http 0.5.2",
+ "uuid",
+ "window-vibrancy 0.7.1",
+]
+
+[[package]]
+name = "option-ext"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "04744f49eae99ab78e0d5c0b603ab218f515ea8cfe5a456d7629ad883a3b6e7d"
+
+[[package]]
+name = "ordered-stream"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9aa2b01e1d916879f73a53d01d1d6cee68adbb31d6d9177a8cfce093cced1d50"
+dependencies = [
+ "futures-core",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "os_pipe"
+version = "1.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7d8fae84b431384b68627d0f9b3b1245fcf9f46f6c0e3dc902e9dce64edd1967"
+dependencies = [
+ "libc",
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "osakit"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "732c71caeaa72c065bb69d7ea08717bd3f4863a4f451402fc9513e29dbd5261b"
+dependencies = [
+ "objc2 0.6.3",
+ "objc2-foundation 0.3.2",
+ "objc2-osa-kit",
+ "serde",
+ "serde_json",
+ "thiserror 2.0.17",
+]
+
+[[package]]
+name = "pango"
+version = "0.18.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7ca27ec1eb0457ab26f3036ea52229edbdb74dee1edd29063f5b9b010e7ebee4"
+dependencies = [
+ "gio",
+ "glib",
+ "libc",
+ "once_cell",
+ "pango-sys",
+]
+
+[[package]]
+name = "pango-sys"
+version = "0.18.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "436737e391a843e5933d6d9aa102cb126d501e815b83601365a948a518555dc5"
+dependencies = [
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "system-deps",
+]
+
+[[package]]
+name = "parking"
+version = "2.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f38d5652c16fde515bb1ecef450ab0f6a219d619a7274976324d5e377f7dceba"
+
+[[package]]
+name = "parking_lot"
+version = "0.12.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "93857453250e3077bd71ff98b6a65ea6621a19bb0f559a85248955ac12c45a1a"
+dependencies = [
+ "lock_api",
+ "parking_lot_core",
+]
+
+[[package]]
+name = "parking_lot_core"
+version = "0.9.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2621685985a2ebf1c516881c026032ac7deafcda1a2c9b7850dc81e3dfcb64c1"
+dependencies = [
+ "cfg-if",
+ "libc",
+ "redox_syscall",
+ "smallvec",
+ "windows-link 0.2.1",
+]
+
+[[package]]
+name = "pathdiff"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df94ce210e5bc13cb6651479fa48d14f601d9858cfe0467f43ae157023b938d3"
+
+[[package]]
+name = "percent-encoding"
+version = "2.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9b4f627cb1b25917193a259e49bdad08f671f8d9708acfd5fe0a8c1455d87220"
+
+[[package]]
+name = "phf"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3dfb61232e34fcb633f43d12c58f83c1df82962dcdfa565a4e866ffc17dafe12"
+dependencies = [
+ "phf_shared 0.8.0",
+]
+
+[[package]]
+name = "phf"
+version = "0.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fabbf1ead8a5bcbc20f5f8b939ee3f5b0f6f281b6ad3468b84656b658b455259"
+dependencies = [
+ "phf_macros 0.10.0",
+ "phf_shared 0.10.0",
+ "proc-macro-hack",
+]
+
+[[package]]
+name = "phf"
+version = "0.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fd6780a80ae0c52cc120a26a1a42c1ae51b247a253e4e06113d23d2c2edd078"
+dependencies = [
+ "phf_macros 0.11.3",
+ "phf_shared 0.11.3",
+]
+
+[[package]]
+name = "phf_codegen"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cbffee61585b0411840d3ece935cce9cb6321f01c45477d30066498cd5e1a815"
+dependencies = [
+ "phf_generator 0.8.0",
+ "phf_shared 0.8.0",
+]
+
+[[package]]
+name = "phf_codegen"
+version = "0.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "aef8048c789fa5e851558d709946d6d79a8ff88c0440c587967f8e94bfb1216a"
+dependencies = [
+ "phf_generator 0.11.3",
+ "phf_shared 0.11.3",
+]
+
+[[package]]
+name = "phf_generator"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "17367f0cc86f2d25802b2c26ee58a7b23faeccf78a396094c13dced0d0182526"
+dependencies = [
+ "phf_shared 0.8.0",
+ "rand 0.7.3",
+]
+
+[[package]]
+name = "phf_generator"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5d5285893bb5eb82e6aaf5d59ee909a06a16737a8970984dd7746ba9283498d6"
+dependencies = [
+ "phf_shared 0.10.0",
+ "rand 0.8.5",
+]
+
+[[package]]
+name = "phf_generator"
+version = "0.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3c80231409c20246a13fddb31776fb942c38553c51e871f8cbd687a4cfb5843d"
+dependencies = [
+ "phf_shared 0.11.3",
+ "rand 0.8.5",
+]
+
+[[package]]
+name = "phf_macros"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "58fdf3184dd560f160dd73922bea2d5cd6e8f064bf4b13110abd81b03697b4e0"
+dependencies = [
+ "phf_generator 0.10.0",
+ "phf_shared 0.10.0",
+ "proc-macro-hack",
+ "proc-macro2",
+ "quote",
+ "syn 1.0.109",
+]
+
+[[package]]
+name = "phf_macros"
+version = "0.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f84ac04429c13a7ff43785d75ad27569f2951ce0ffd30a3321230db2fc727216"
+dependencies = [
+ "phf_generator 0.11.3",
+ "phf_shared 0.11.3",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "phf_shared"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c00cf8b9eafe68dde5e9eaa2cef8ee84a9336a47d566ec55ca16589633b65af7"
+dependencies = [
+ "siphasher 0.3.11",
+]
+
+[[package]]
+name = "phf_shared"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6796ad771acdc0123d2a88dc428b5e38ef24456743ddb1744ed628f9815c096"
+dependencies = [
+ "siphasher 0.3.11",
+]
+
+[[package]]
+name = "phf_shared"
+version = "0.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67eabc2ef2a60eb7faa00097bd1ffdb5bd28e62bf39990626a582201b7a754e5"
+dependencies = [
+ "siphasher 1.0.1",
+]
+
+[[package]]
+name = "pin-project-lite"
+version = "0.2.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3b3cff922bd51709b605d9ead9aa71031d81447142d828eb4a6eba76fe619f9b"
+
+[[package]]
+name = "pin-utils"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8b870d8c151b6f2fb93e84a13146138f05d02ed11c7e7c54f8826aaaf7c9f184"
+
+[[package]]
+name = "piper"
+version = "0.2.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "96c8c490f422ef9a4efd2cb5b42b76c8613d7e7dfc1caf667b8a3350a5acc066"
+dependencies = [
+ "atomic-waker",
+ "fastrand",
+ "futures-io",
+]
+
+[[package]]
+name = "pkg-config"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7edddbd0b52d732b21ad9a5fab5c704c14cd949e5e9a1ec5929a24fded1b904c"
+
+[[package]]
+name = "plist"
+version = "1.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "740ebea15c5d1428f910cd1a5f52cebf8d25006245ed8ade92702f4943d91e07"
+dependencies = [
+ "base64 0.22.1",
+ "indexmap 2.12.0",
+ "quick-xml 0.38.4",
+ "serde",
+ "time",
+]
+
+[[package]]
+name = "png"
+version = "0.17.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "82151a2fc869e011c153adc57cf2789ccb8d9906ce52c0b39a6b5697749d7526"
+dependencies = [
+ "bitflags 1.3.2",
+ "crc32fast",
+ "fdeflate",
+ "flate2",
+ "miniz_oxide",
+]
+
+[[package]]
+name = "polling"
+version = "3.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5d0e4f59085d47d8241c88ead0f274e8a0cb551f3625263c05eb8dd897c34218"
+dependencies = [
+ "cfg-if",
+ "concurrent-queue",
+ "hermit-abi",
+ "pin-project-lite",
+ "rustix",
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "portable-pty"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b4a596a2b3d2752d94f51fac2d4a96737b8705dddd311a32b9af47211f08671e"
+dependencies = [
+ "anyhow",
+ "bitflags 1.3.2",
+ "downcast-rs",
+ "filedescriptor",
+ "lazy_static",
+ "libc",
+ "log",
+ "nix 0.28.0",
+ "serial2",
+ "shared_library",
+ "shell-words",
+ "winapi",
+ "winreg 0.10.1",
+]
+
+[[package]]
+name = "portpicker"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "be97d76faf1bfab666e1375477b23fde79eccf0276e9b63b92a39d676a889ba9"
+dependencies = [
+ "rand 0.8.5",
+]
+
+[[package]]
+name = "potential_utf"
+version = "0.1.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b73949432f5e2a09657003c25bca5e19a0e9c84f8058ca374f49e0ebe605af77"
+dependencies = [
+ "zerovec",
+]
+
+[[package]]
+name = "powerfmt"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "439ee305def115ba05938db6eb1644ff94165c5ab5e9420d1c1bcedbba909391"
+
+[[package]]
+name = "ppv-lite86"
+version = "0.2.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85eae3c4ed2f50dcfe72643da4befc30deadb458a9b590d720cde2f2b1e97da9"
+dependencies = [
+ "zerocopy",
+]
+
+[[package]]
+name = "precomputed-hash"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "925383efa346730478fb4838dbe9137d2a47675ad789c546d150a6e1dd4ab31c"
+
+[[package]]
+name = "proc-macro-crate"
+version = "1.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f4c021e1093a56626774e81216a4ce732a735e5bad4868a03f3ed65ca0c3919"
+dependencies = [
+ "once_cell",
+ "toml_edit 0.19.15",
+]
+
+[[package]]
+name = "proc-macro-crate"
+version = "2.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b00f26d3400549137f92511a46ac1cd8ce37cb5598a96d382381458b992a5d24"
+dependencies = [
+ "toml_datetime 0.6.3",
+ "toml_edit 0.20.2",
+]
+
+[[package]]
+name = "proc-macro-crate"
+version = "3.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "219cb19e96be00ab2e37d6e299658a0cfa83e52429179969b0f0121b4ac46983"
+dependencies = [
+ "toml_edit 0.23.7",
+]
+
+[[package]]
+name = "proc-macro-error"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "da25490ff9892aab3fcf7c36f08cfb902dd3e71ca0f9f9517bea02a73a5ce38c"
+dependencies = [
+ "proc-macro-error-attr",
+ "proc-macro2",
+ "quote",
+ "syn 1.0.109",
+ "version_check",
+]
+
+[[package]]
+name = "proc-macro-error-attr"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a1be40180e52ecc98ad80b184934baf3d0d29f979574e439af5a55274b35f869"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "version_check",
+]
+
+[[package]]
+name = "proc-macro-hack"
+version = "0.5.20+deprecated"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc375e1527247fe1a97d8b7156678dfe7c1af2fc075c9a4db3690ecd2a148068"
+
+[[package]]
+name = "proc-macro2"
+version = "1.0.103"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5ee95bc4ef87b8d5ba32e8b7714ccc834865276eab0aed5c9958d00ec45f49e8"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "ptr_meta"
+version = "0.1.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0738ccf7ea06b608c10564b31debd4f5bc5e197fc8bfe088f68ae5ce81e7a4f1"
+dependencies = [
+ "ptr_meta_derive",
+]
+
+[[package]]
+name = "ptr_meta_derive"
+version = "0.1.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "16b845dbfca988fa33db069c0e230574d15a3088f147a87b64c7589eb662c9ac"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 1.0.109",
+]
+
+[[package]]
+name = "quick-xml"
+version = "0.37.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "331e97a1af0bf59823e6eadffe373d7b27f485be8748f71471c662c1f269b7fb"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "quick-xml"
+version = "0.38.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b66c2058c55a409d601666cffe35f04333cf1013010882cec174a7467cd4e21c"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "quinn"
+version = "0.11.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9e20a958963c291dc322d98411f541009df2ced7b5a4f2bd52337638cfccf20"
+dependencies = [
+ "bytes",
+ "cfg_aliases 0.2.1",
+ "pin-project-lite",
+ "quinn-proto",
+ "quinn-udp",
+ "rustc-hash",
+ "rustls",
+ "socket2",
+ "thiserror 2.0.17",
+ "tokio",
+ "tracing",
+ "web-time",
+]
+
+[[package]]
+name = "quinn-proto"
+version = "0.11.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f1906b49b0c3bc04b5fe5d86a77925ae6524a19b816ae38ce1e426255f1d8a31"
+dependencies = [
+ "bytes",
+ "getrandom 0.3.4",
+ "lru-slab",
+ "rand 0.9.2",
+ "ring",
+ "rustc-hash",
+ "rustls",
+ "rustls-pki-types",
+ "slab",
+ "thiserror 2.0.17",
+ "tinyvec",
+ "tracing",
+ "web-time",
+]
+
+[[package]]
+name = "quinn-udp"
+version = "0.5.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "addec6a0dcad8a8d96a771f815f0eaf55f9d1805756410b39f5fa81332574cbd"
+dependencies = [
+ "cfg_aliases 0.2.1",
+ "libc",
+ "once_cell",
+ "socket2",
+ "tracing",
+ "windows-sys 0.60.2",
+]
+
+[[package]]
+name = "quote"
+version = "1.0.42"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a338cc41d27e6cc6dce6cefc13a0729dfbb81c262b1f519331575dd80ef3067f"
+dependencies = [
+ "proc-macro2",
+]
+
+[[package]]
+name = "r-efi"
+version = "5.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "69cdb34c158ceb288df11e18b4bd39de994f6657d83847bdffdbd7f346754b0f"
+
+[[package]]
+name = "radium"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc33ff2d4973d518d823d61aa239014831e521c75da58e3df4840d3f47749d09"
+
+[[package]]
+name = "rand"
+version = "0.7.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6a6b1679d49b24bbfe0c803429aa1874472f50d9b363131f0e89fc356b544d03"
+dependencies = [
+ "getrandom 0.1.16",
+ "libc",
+ "rand_chacha 0.2.2",
+ "rand_core 0.5.1",
+ "rand_hc",
+ "rand_pcg",
+]
+
+[[package]]
+name = "rand"
+version = "0.8.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "34af8d1a0e25924bc5b7c43c079c942339d8f0a8b57c39049bef581b46327404"
+dependencies = [
+ "libc",
+ "rand_chacha 0.3.1",
+ "rand_core 0.6.4",
+]
+
+[[package]]
+name = "rand"
+version = "0.9.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6db2770f06117d490610c7488547d543617b21bfa07796d7a12f6f1bd53850d1"
+dependencies = [
+ "rand_chacha 0.9.0",
+ "rand_core 0.9.3",
+]
+
+[[package]]
+name = "rand_chacha"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f4c8ed856279c9737206bf725bf36935d8666ead7aa69b52be55af369d193402"
+dependencies = [
+ "ppv-lite86",
+ "rand_core 0.5.1",
+]
+
+[[package]]
+name = "rand_chacha"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e6c10a63a0fa32252be49d21e7709d4d4baf8d231c2dbce1eaa8141b9b127d88"
+dependencies = [
+ "ppv-lite86",
+ "rand_core 0.6.4",
+]
+
+[[package]]
+name = "rand_chacha"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d3022b5f1df60f26e1ffddd6c66e8aa15de382ae63b3a0c1bfc0e4d3e3f325cb"
+dependencies = [
+ "ppv-lite86",
+ "rand_core 0.9.3",
+]
+
+[[package]]
+name = "rand_core"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "90bde5296fc891b0cef12a6d03ddccc162ce7b2aff54160af9338f8d40df6d19"
+dependencies = [
+ "getrandom 0.1.16",
+]
+
+[[package]]
+name = "rand_core"
+version = "0.6.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ec0be4795e2f6a28069bec0b5ff3e2ac9bafc99e6a9a7dc3547996c5c816922c"
+dependencies = [
+ "getrandom 0.2.16",
+]
+
+[[package]]
+name = "rand_core"
+version = "0.9.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "99d9a13982dcf210057a8a78572b2217b667c3beacbf3a0d8b454f6f82837d38"
+dependencies = [
+ "getrandom 0.3.4",
+]
+
+[[package]]
+name = "rand_hc"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ca3129af7b92a17112d59ad498c6f81eaf463253766b90396d39ea7a39d6613c"
+dependencies = [
+ "rand_core 0.5.1",
+]
+
+[[package]]
+name = "rand_pcg"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "16abd0c1b639e9eb4d7c50c0b8100b0d0f849be2349829c740fe8e6eb4816429"
+dependencies = [
+ "rand_core 0.5.1",
+]
+
+[[package]]
+name = "raw-window-handle"
+version = "0.6.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "20675572f6f24e9e76ef639bc5552774ed45f1c30e2951e1e99c59888861c539"
+
+[[package]]
+name = "redox_syscall"
+version = "0.5.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ed2bf2547551a7053d6fdfafda3f938979645c44812fbfcda098faae3f1a362d"
+dependencies = [
+ "bitflags 2.10.0",
+]
+
+[[package]]
+name = "redox_users"
+version = "0.4.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ba009ff324d1fc1b900bd1fdb31564febe58a8ccc8a6fdbb93b543d33b13ca43"
+dependencies = [
+ "getrandom 0.2.16",
+ "libredox",
+ "thiserror 1.0.69",
+]
+
+[[package]]
+name = "redox_users"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a4e608c6638b9c18977b00b475ac1f28d14e84b27d8d42f70e0bf1e3dec127ac"
+dependencies = [
+ "getrandom 0.2.16",
+ "libredox",
+ "thiserror 2.0.17",
+]
+
+[[package]]
+name = "ref-cast"
+version = "1.0.25"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f354300ae66f76f1c85c5f84693f0ce81d747e2c3f21a45fef496d89c960bf7d"
+dependencies = [
+ "ref-cast-impl",
+]
+
+[[package]]
+name = "ref-cast-impl"
+version = "1.0.25"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b7186006dcb21920990093f30e3dea63b7d6e977bf1256be20c3563a5db070da"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "regex"
+version = "1.12.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "843bc0191f75f3e22651ae5f1e72939ab2f72a4bc30fa80a066bd66edefc24d4"
+dependencies = [
+ "aho-corasick",
+ "memchr",
+ "regex-automata",
+ "regex-syntax",
+]
+
+[[package]]
+name = "regex-automata"
+version = "0.4.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5276caf25ac86c8d810222b3dbb938e512c55c6831a10f3e6ed1c93b84041f1c"
+dependencies = [
+ "aho-corasick",
+ "memchr",
+ "regex-syntax",
+]
+
+[[package]]
+name = "regex-syntax"
+version = "0.8.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7a2d987857b319362043e95f5353c0535c1f58eec5336fdfcf626430af7def58"
+
+[[package]]
+name = "rend"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "71fe3824f5629716b1589be05dacd749f6aa084c87e00e016714a8cdfccc997c"
+dependencies = [
+ "bytecheck",
+]
+
+[[package]]
+name = "reqwest"
+version = "0.12.24"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9d0946410b9f7b082a427e4ef5c8ff541a88b357bc6c637c40db3a68ac70a36f"
+dependencies = [
+ "async-compression",
+ "base64 0.22.1",
+ "bytes",
+ "futures-core",
+ "futures-util",
+ "http",
+ "http-body",
+ "http-body-util",
+ "hyper",
+ "hyper-rustls",
+ "hyper-util",
+ "js-sys",
+ "log",
+ "percent-encoding",
+ "pin-project-lite",
+ "quinn",
+ "rustls",
+ "rustls-pki-types",
+ "serde",
+ "serde_json",
+ "serde_urlencoded",
+ "sync_wrapper",
+ "tokio",
+ "tokio-rustls",
+ "tokio-util",
+ "tower",
+ "tower-http 0.6.6",
+ "tower-service",
+ "url",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "wasm-streams",
+ "web-sys",
+ "webpki-roots",
+]
+
+[[package]]
+name = "rfd"
+version = "0.15.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ef2bee61e6cffa4635c72d7d81a84294e28f0930db0ddcb0f66d10244674ebed"
+dependencies = [
+ "ashpd",
+ "block2 0.6.2",
+ "dispatch2",
+ "glib-sys",
+ "gobject-sys",
+ "gtk-sys",
+ "js-sys",
+ "log",
+ "objc2 0.6.3",
+ "objc2-app-kit",
+ "objc2-core-foundation",
+ "objc2-foundation 0.3.2",
+ "raw-window-handle",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+ "windows-sys 0.59.0",
+]
+
+[[package]]
+name = "ring"
+version = "0.17.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a4689e6c2294d81e88dc6261c768b63bc4fcdb852be6d1352498b114f61383b7"
+dependencies = [
+ "cc",
+ "cfg-if",
+ "getrandom 0.2.16",
+ "libc",
+ "untrusted",
+ "windows-sys 0.52.0",
+]
+
+[[package]]
+name = "rkyv"
+version = "0.7.45"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9008cd6385b9e161d8229e1f6549dd23c3d022f132a2ea37ac3a10ac4935779b"
+dependencies = [
+ "bitvec",
+ "bytecheck",
+ "bytes",
+ "hashbrown 0.12.3",
+ "ptr_meta",
+ "rend",
+ "rkyv_derive",
+ "seahash",
+ "tinyvec",
+ "uuid",
+]
+
+[[package]]
+name = "rkyv_derive"
+version = "0.7.45"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "503d1d27590a2b0a3a4ca4c94755aa2875657196ecbf401a42eff41d7de532c0"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 1.0.109",
+]
+
+[[package]]
+name = "rust_decimal"
+version = "1.39.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "35affe401787a9bd846712274d97654355d21b2a2c092a3139aabe31e9022282"
+dependencies = [
+ "arrayvec",
+ "borsh",
+ "bytes",
+ "num-traits",
+ "rand 0.8.5",
+ "rkyv",
+ "serde",
+ "serde_json",
+]
+
+[[package]]
+name = "rustc-hash"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "357703d41365b4b27c590e3ed91eabb1b663f07c4c084095e60cbed4362dff0d"
+
+[[package]]
+name = "rustc_version"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cfcb3a22ef46e85b45de6ee7e79d063319ebb6594faafcf1c225ea92ab6e9b92"
+dependencies = [
+ "semver",
+]
+
+[[package]]
+name = "rustix"
+version = "1.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cd15f8a2c5551a84d56efdc1cd049089e409ac19a3072d5037a17fd70719ff3e"
+dependencies = [
+ "bitflags 2.10.0",
+ "errno",
+ "libc",
+ "linux-raw-sys",
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "rustls"
+version = "0.23.35"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "533f54bc6a7d4f647e46ad909549eda97bf5afc1585190ef692b4286b198bd8f"
+dependencies = [
+ "once_cell",
+ "ring",
+ "rustls-pki-types",
+ "rustls-webpki",
+ "subtle",
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-pki-types"
+version = "1.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "94182ad936a0c91c324cd46c6511b9510ed16af436d7b5bab34beab0afd55f7a"
+dependencies = [
+ "web-time",
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-webpki"
+version = "0.103.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2ffdfa2f5286e2247234e03f680868ac2815974dc39e00ea15adc445d0aafe52"
+dependencies = [
+ "ring",
+ "rustls-pki-types",
+ "untrusted",
+]
+
+[[package]]
+name = "rustversion"
+version = "1.0.22"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b39cdef0fa800fc44525c84ccb54a029961a8215f9619753635a9c0d2538d46d"
+
+[[package]]
+name = "ryu"
+version = "1.0.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "28d3b2b1366ec20994f1fd18c3c594f05c5dd4bc44d8bb0c1c632c8d6829481f"
+
+[[package]]
+name = "same-file"
+version = "1.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "93fc1dc3aaa9bfed95e02e6eadabb4baf7e3078b0bd1b4d7b6b0b68378900502"
+dependencies = [
+ "winapi-util",
+]
+
+[[package]]
+name = "schemars"
+version = "0.8.22"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3fbf2ae1b8bc8e02df939598064d22402220cd5bbcca1c76f7d6a310974d5615"
+dependencies = [
+ "dyn-clone",
+ "indexmap 1.9.3",
+ "schemars_derive",
+ "serde",
+ "serde_json",
+ "url",
+ "uuid",
+]
+
+[[package]]
+name = "schemars"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4cd191f9397d57d581cddd31014772520aa448f65ef991055d7f61582c65165f"
+dependencies = [
+ "dyn-clone",
+ "ref-cast",
+ "serde",
+ "serde_json",
+]
+
+[[package]]
+name = "schemars"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9558e172d4e8533736ba97870c4b2cd63f84b382a3d6eb063da41b91cce17289"
+dependencies = [
+ "dyn-clone",
+ "ref-cast",
+ "serde",
+ "serde_json",
+]
+
+[[package]]
+name = "schemars_derive"
+version = "0.8.22"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32e265784ad618884abaea0600a9adf15393368d840e0222d101a072f3f7534d"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "serde_derive_internals",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "scoped-tls"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e1cf6437eb19a8f4a6cc0f7dca544973b0b78843adbfeb3683d1a94a0024a294"
+
+[[package]]
+name = "scopeguard"
+version = "1.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49"
+
+[[package]]
+name = "seahash"
+version = "4.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1c107b6f4780854c8b126e228ea8869f4d7b71260f962fefb57b996b8959ba6b"
+
+[[package]]
+name = "selectors"
+version = "0.24.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0c37578180969d00692904465fb7f6b3d50b9a2b952b87c23d0e2e5cb5013416"
+dependencies = [
+ "bitflags 1.3.2",
+ "cssparser",
+ "derive_more",
+ "fxhash",
+ "log",
+ "phf 0.8.0",
+ "phf_codegen 0.8.0",
+ "precomputed-hash",
+ "servo_arc",
+ "smallvec",
+]
+
+[[package]]
+name = "semver"
+version = "1.0.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d767eb0aabc880b29956c35734170f26ed551a859dbd361d140cdbeca61ab1e2"
+dependencies = [
+ "serde",
+ "serde_core",
+]
+
+[[package]]
+name = "serde"
+version = "1.0.228"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9a8e94ea7f378bd32cbbd37198a4a91436180c5bb472411e48b5ec2e2124ae9e"
+dependencies = [
+ "serde_core",
+ "serde_derive",
+]
+
+[[package]]
+name = "serde-untagged"
+version = "0.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f9faf48a4a2d2693be24c6289dbe26552776eb7737074e6722891fadbe6c5058"
+dependencies = [
+ "erased-serde",
+ "serde",
+ "serde_core",
+ "typeid",
+]
+
+[[package]]
+name = "serde_core"
+version = "1.0.228"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "41d385c7d4ca58e59fc732af25c3983b67ac852c1a25000afe1175de458b67ad"
+dependencies = [
+ "serde_derive",
+]
+
+[[package]]
+name = "serde_derive"
+version = "1.0.228"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d540f220d3187173da220f885ab66608367b6574e925011a9353e4badda91d79"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "serde_derive_internals"
+version = "0.29.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "18d26a20a969b9e3fdf2fc2d9f21eda6c40e2de84c9408bb5d3b05d499aae711"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "serde_json"
+version = "1.0.145"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "402a6f66d8c709116cf22f558eab210f5a50187f702eb4d7e5ef38d9a7f1c79c"
+dependencies = [
+ "itoa",
+ "memchr",
+ "ryu",
+ "serde",
+ "serde_core",
+]
+
+[[package]]
+name = "serde_path_to_error"
+version = "0.1.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "10a9ff822e371bb5403e391ecd83e182e0e77ba7f6fe0160b795797109d1b457"
+dependencies = [
+ "itoa",
+ "serde",
+ "serde_core",
+]
+
+[[package]]
+name = "serde_repr"
+version = "0.1.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "175ee3e80ae9982737ca543e96133087cbd9a485eecc3bc4de9c1a37b47ea59c"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "serde_spanned"
+version = "0.6.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bf41e0cfaf7226dca15e8197172c295a782857fcb97fad1808a166870dee75a3"
+dependencies = [
+ "serde",
+]
+
+[[package]]
+name = "serde_spanned"
+version = "1.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e24345aa0fe688594e73770a5f6d1b216508b4f93484c0026d521acd30134392"
+dependencies = [
+ "serde_core",
+]
+
+[[package]]
+name = "serde_urlencoded"
+version = "0.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d3491c14715ca2294c4d6a88f15e84739788c1d030eed8c110436aafdaa2f3fd"
+dependencies = [
+ "form_urlencoded",
+ "itoa",
+ "ryu",
+ "serde",
+]
+
+[[package]]
+name = "serde_with"
+version = "3.16.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "10574371d41b0d9b2cff89418eda27da52bcaff2cc8741db26382a77c29131f1"
+dependencies = [
+ "base64 0.22.1",
+ "chrono",
+ "hex",
+ "indexmap 1.9.3",
+ "indexmap 2.12.0",
+ "schemars 0.9.0",
+ "schemars 1.1.0",
+ "serde_core",
+ "serde_json",
+ "serde_with_macros",
+ "time",
+]
+
+[[package]]
+name = "serde_with_macros"
+version = "3.16.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "08a72d8216842fdd57820dc78d840bef99248e35fb2554ff923319e60f2d686b"
+dependencies = [
+ "darling",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "serde_yaml"
+version = "0.9.34+deprecated"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6a8b1a1a2ebf674015cc02edccce75287f1a0130d394307b36743c2f5d504b47"
+dependencies = [
+ "indexmap 2.12.0",
+ "itoa",
+ "ryu",
+ "serde",
+ "unsafe-libyaml",
+]
+
+[[package]]
+name = "serial2"
+version = "0.2.33"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8cc76fa68e25e771492ca1e3c53d447ef0be3093e05cd3b47f4b712ba10c6f3c"
+dependencies = [
+ "cfg-if",
+ "libc",
+ "winapi",
+]
+
+[[package]]
+name = "serialize-to-javascript"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "04f3666a07a197cdb77cdf306c32be9b7f598d7060d50cfd4d5aa04bfd92f6c5"
+dependencies = [
+ "serde",
+ "serde_json",
+ "serialize-to-javascript-impl",
+]
+
+[[package]]
+name = "serialize-to-javascript-impl"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "772ee033c0916d670af7860b6e1ef7d658a4629a6d0b4c8c3e67f09b3765b75d"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "servo_arc"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d52aa42f8fdf0fed91e5ce7f23d8138441002fa31dca008acf47e6fd4721f741"
+dependencies = [
+ "nodrop",
+ "stable_deref_trait",
+]
+
+[[package]]
+name = "sha2"
+version = "0.10.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a7507d819769d01a365ab707794a4084392c824f54a7a6a7862f8c3d0892b283"
+dependencies = [
+ "cfg-if",
+ "cpufeatures",
+ "digest",
+]
+
+[[package]]
+name = "shared_child"
+version = "1.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e362d9935bc50f019969e2f9ecd66786612daae13e8f277be7bfb66e8bed3f7"
+dependencies = [
+ "libc",
+ "sigchld",
+ "windows-sys 0.60.2",
+]
+
+[[package]]
+name = "shared_library"
+version = "0.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5a9e7e0f2bfae24d8a5b5a66c5b257a83c7412304311512a0c054cd5e619da11"
+dependencies = [
+ "lazy_static",
+ "libc",
+]
+
+[[package]]
+name = "shell-words"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "24188a676b6ae68c3b2cb3a01be17fbf7240ce009799bb56d5b1409051e78fde"
+
+[[package]]
+name = "shlex"
+version = "1.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0fda2ff0d084019ba4d7c6f371c95d8fd75ce3524c3cb8fb653a3023f6323e64"
+
+[[package]]
+name = "sigchld"
+version = "0.2.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "47106eded3c154e70176fc83df9737335c94ce22f821c32d17ed1db1f83badb1"
+dependencies = [
+ "libc",
+ "os_pipe",
+ "signal-hook",
+]
+
+[[package]]
+name = "signal-hook"
+version = "0.3.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d881a16cf4426aa584979d30bd82cb33429027e42122b169753d6ef1085ed6e2"
+dependencies = [
+ "libc",
+ "signal-hook-registry",
+]
+
+[[package]]
+name = "signal-hook-registry"
+version = "1.4.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b2a4719bff48cee6b39d12c020eeb490953ad2443b7055bd0b21fca26bd8c28b"
+dependencies = [
+ "libc",
+]
+
+[[package]]
+name = "simd-adler32"
+version = "0.3.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d66dc143e6b11c1eddc06d5c423cfc97062865baf299914ab64caa38182078fe"
+
+[[package]]
+name = "simdutf8"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3a9fe34e3e7a50316060351f37187a3f546bce95496156754b601a5fa71b76e"
+
+[[package]]
+name = "siphasher"
+version = "0.3.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "38b58827f4464d87d377d175e90bf58eb00fd8716ff0a62f80356b5e61555d0d"
+
+[[package]]
+name = "siphasher"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56199f7ddabf13fe5074ce809e7d3f42b42ae711800501b5b16ea82ad029c39d"
+
+[[package]]
+name = "slab"
+version = "0.4.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7a2ae44ef20feb57a68b23d846850f861394c2e02dc425a50098ae8c90267589"
+
+[[package]]
+name = "smallvec"
+version = "1.15.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67b1b7a3b5fe4f1376887184045fcf45c69e92af734b7aaddc05fb777b6fbd03"
+
+[[package]]
+name = "socket2"
+version = "0.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "17129e116933cf371d018bb80ae557e889637989d8638274fb25622827b03881"
+dependencies = [
+ "libc",
+ "windows-sys 0.60.2",
+]
+
+[[package]]
+name = "softbuffer"
+version = "0.4.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "18051cdd562e792cad055119e0cdb2cfc137e44e3987532e0f9659a77931bb08"
+dependencies = [
+ "bytemuck",
+ "cfg_aliases 0.2.1",
+ "core-graphics",
+ "foreign-types",
+ "js-sys",
+ "log",
+ "objc2 0.5.2",
+ "objc2-foundation 0.2.2",
+ "objc2-quartz-core 0.2.2",
+ "raw-window-handle",
+ "redox_syscall",
+ "wasm-bindgen",
+ "web-sys",
+ "windows-sys 0.59.0",
+]
+
+[[package]]
+name = "soup3"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "471f924a40f31251afc77450e781cb26d55c0b650842efafc9c6cbd2f7cc4f9f"
+dependencies = [
+ "futures-channel",
+ "gio",
+ "glib",
+ "libc",
+ "soup3-sys",
+]
+
+[[package]]
+name = "soup3-sys"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7ebe8950a680a12f24f15ebe1bf70db7af98ad242d9db43596ad3108aab86c27"
+dependencies = [
+ "gio-sys",
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "system-deps",
+]
+
+[[package]]
+name = "stable_deref_trait"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6ce2be8dc25455e1f91df71bfa12ad37d7af1092ae736f3a6cd0e37bc7810596"
+
+[[package]]
+name = "static_assertions"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"
+
+[[package]]
+name = "string_cache"
+version = "0.8.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bf776ba3fa74f83bf4b63c3dcbbf82173db2632ed8452cb2d891d33f459de70f"
+dependencies = [
+ "new_debug_unreachable",
+ "parking_lot",
+ "phf_shared 0.11.3",
+ "precomputed-hash",
+ "serde",
+]
+
+[[package]]
+name = "string_cache_codegen"
+version = "0.5.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c711928715f1fe0fe509c53b43e993a9a557babc2d0a3567d0a3006f1ac931a0"
+dependencies = [
+ "phf_generator 0.11.3",
+ "phf_shared 0.11.3",
+ "proc-macro2",
+ "quote",
+]
+
+[[package]]
+name = "strsim"
+version = "0.11.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7da8b5736845d9f2fcb837ea5d9e2628564b3b043a70948a3f0b778838c5fb4f"
+
+[[package]]
+name = "subtle"
+version = "2.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
+
+[[package]]
+name = "swift-rs"
+version = "1.0.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4057c98e2e852d51fdcfca832aac7b571f6b351ad159f9eda5db1655f8d0c4d7"
+dependencies = [
+ "base64 0.21.7",
+ "serde",
+ "serde_json",
+]
+
+[[package]]
+name = "syn"
+version = "1.0.109"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72b64191b275b66ffe2469e8af2c1cfe3bafa67b529ead792a6d0160888b4237"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "syn"
+version = "2.0.110"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a99801b5bd34ede4cf3fc688c5919368fea4e4814a4664359503e6015b280aea"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "sync_wrapper"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0bf256ce5efdfa370213c1dabab5935a12e49f2c58d15e9eac2870d3b4f27263"
+dependencies = [
+ "futures-core",
+]
+
+[[package]]
+name = "synstructure"
+version = "0.13.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "728a70f3dbaf5bab7f0c4b1ac8d7ae5ea60a4b5549c8a5914361c99147a709d2"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "system-deps"
+version = "6.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a3e535eb8dded36d55ec13eddacd30dec501792ff23a0b1682c38601b8cf2349"
+dependencies = [
+ "cfg-expr",
+ "heck 0.5.0",
+ "pkg-config",
+ "toml 0.8.2",
+ "version-compare",
+]
+
+[[package]]
+name = "tao"
+version = "0.34.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f3a753bdc39c07b192151523a3f77cd0394aa75413802c883a0f6f6a0e5ee2e7"
+dependencies = [
+ "bitflags 2.10.0",
+ "block2 0.6.2",
+ "core-foundation",
+ "core-graphics",
+ "crossbeam-channel",
+ "dispatch",
+ "dlopen2",
+ "dpi",
+ "gdkwayland-sys",
+ "gdkx11-sys",
+ "gtk",
+ "jni",
+ "lazy_static",
+ "libc",
+ "log",
+ "ndk",
+ "ndk-context",
+ "ndk-sys",
+ "objc2 0.6.3",
+ "objc2-app-kit",
+ "objc2-foundation 0.3.2",
+ "once_cell",
+ "parking_lot",
+ "raw-window-handle",
+ "scopeguard",
+ "tao-macros",
+ "unicode-segmentation",
+ "url",
+ "windows",
+ "windows-core 0.61.2",
+ "windows-version",
+ "x11-dl",
+]
+
+[[package]]
+name = "tao-macros"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f4e16beb8b2ac17db28eab8bca40e62dbfbb34c0fcdc6d9826b11b7b5d047dfd"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "tap"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "55937e1799185b12863d447f42597ed69d9928686b8d88a1df17376a097d8369"
+
+[[package]]
+name = "tar"
+version = "0.4.44"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1d863878d212c87a19c1a610eb53bb01fe12951c0501cf5a0d65f724914a667a"
+dependencies = [
+ "filetime",
+ "libc",
+ "xattr",
+]
+
+[[package]]
+name = "target-lexicon"
+version = "0.12.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "61c41af27dd6d1e27b1b16b489db798443478cef1f06a660c96db617ba5de3b1"
+
+[[package]]
+name = "tauri"
+version = "2.9.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "15524fc7959bfcaa051ba6d0b3fb1ef18e978de2176c7c6acb977f7fd14d35c7"
+dependencies = [
+ "anyhow",
+ "bytes",
+ "cookie",
+ "dirs 6.0.0",
+ "dunce",
+ "embed_plist",
+ "getrandom 0.3.4",
+ "glob",
+ "gtk",
+ "heck 0.5.0",
+ "http",
+ "jni",
+ "libc",
+ "log",
+ "mime",
+ "muda",
+ "objc2 0.6.3",
+ "objc2-app-kit",
+ "objc2-foundation 0.3.2",
+ "objc2-ui-kit",
+ "objc2-web-kit",
+ "percent-encoding",
+ "plist",
+ "raw-window-handle",
+ "reqwest",
+ "serde",
+ "serde_json",
+ "serde_repr",
+ "serialize-to-javascript",
+ "swift-rs",
+ "tauri-build",
+ "tauri-macros",
+ "tauri-runtime",
+ "tauri-runtime-wry",
+ "tauri-utils",
+ "thiserror 2.0.17",
+ "tokio",
+ "tray-icon",
+ "url",
+ "webkit2gtk",
+ "webview2-com",
+ "window-vibrancy 0.6.0",
+ "windows",
+]
+
+[[package]]
+name = "tauri-build"
+version = "2.5.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "17fcb8819fd16463512a12f531d44826ce566f486d7ccd211c9c8cebdaec4e08"
+dependencies = [
+ "anyhow",
+ "cargo_toml",
+ "dirs 6.0.0",
+ "glob",
+ "heck 0.5.0",
+ "json-patch",
+ "schemars 0.8.22",
+ "semver",
+ "serde",
+ "serde_json",
+ "tauri-utils",
+ "tauri-winres",
+ "toml 0.9.8",
+ "walkdir",
+]
+
+[[package]]
+name = "tauri-codegen"
+version = "2.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9fa9844cefcf99554a16e0a278156ae73b0d8680bbc0e2ad1e4287aadd8489cf"
+dependencies = [
+ "base64 0.22.1",
+ "brotli",
+ "ico",
+ "json-patch",
+ "plist",
+ "png",
+ "proc-macro2",
+ "quote",
+ "semver",
+ "serde",
+ "serde_json",
+ "sha2",
+ "syn 2.0.110",
+ "tauri-utils",
+ "thiserror 2.0.17",
+ "time",
+ "url",
+ "uuid",
+ "walkdir",
+]
+
+[[package]]
+name = "tauri-macros"
+version = "2.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3764a12f886d8245e66b7ee9b43ccc47883399be2019a61d80cf0f4117446fde"
+dependencies = [
+ "heck 0.5.0",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+ "tauri-codegen",
+ "tauri-utils",
+]
+
+[[package]]
+name = "tauri-plugin"
+version = "2.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "076c78a474a7247c90cad0b6e87e593c4c620ed4efdb79cbe0214f0021f6c39d"
+dependencies = [
+ "anyhow",
+ "glob",
+ "plist",
+ "schemars 0.8.22",
+ "serde",
+ "serde_json",
+ "tauri-utils",
+ "toml 0.9.8",
+ "walkdir",
+]
+
+[[package]]
+name = "tauri-plugin-dialog"
+version = "2.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "313f8138692ddc4a2127c4c9607d616a46f5c042e77b3722450866da0aad2f19"
+dependencies = [
+ "log",
+ "raw-window-handle",
+ "rfd",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-plugin",
+ "tauri-plugin-fs",
+ "thiserror 2.0.17",
+ "url",
+]
+
+[[package]]
+name = "tauri-plugin-fs"
+version = "2.4.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "47df422695255ecbe7bac7012440eddaeefd026656171eac9559f5243d3230d9"
+dependencies = [
+ "anyhow",
+ "dunce",
+ "glob",
+ "percent-encoding",
+ "schemars 0.8.22",
+ "serde",
+ "serde_json",
+ "serde_repr",
+ "tauri",
+ "tauri-plugin",
+ "tauri-utils",
+ "thiserror 2.0.17",
+ "toml 0.9.8",
+ "url",
+]
+
+[[package]]
+name = "tauri-plugin-log"
+version = "2.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d5709c792b8630290b5d9811a1f8fe983dd925fc87c7fc7f4923616458cd00b6"
+dependencies = [
+ "android_logger",
+ "byte-unit",
+ "fern",
+ "log",
+ "objc2 0.6.3",
+ "objc2-foundation 0.3.2",
+ "serde",
+ "serde_json",
+ "serde_repr",
+ "swift-rs",
+ "tauri",
+ "tauri-plugin",
+ "thiserror 2.0.17",
+ "time",
+]
+
+[[package]]
+name = "tauri-plugin-notification"
+version = "2.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "01fc2c5ff41105bd1f7242d8201fdf3efd70749b82fa013a17f2126357d194cc"
+dependencies = [
+ "log",
+ "notify-rust",
+ "rand 0.9.2",
+ "serde",
+ "serde_json",
+ "serde_repr",
+ "tauri",
+ "tauri-plugin",
+ "thiserror 2.0.17",
+ "time",
+ "url",
+]
+
+[[package]]
+name = "tauri-plugin-shell"
+version = "2.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c374b6db45f2a8a304f0273a15080d98c70cde86178855fc24653ba657a1144c"
+dependencies = [
+ "encoding_rs",
+ "log",
+ "open",
+ "os_pipe",
+ "regex",
+ "schemars 0.8.22",
+ "serde",
+ "serde_json",
+ "shared_child",
+ "tauri",
+ "tauri-plugin",
+ "thiserror 2.0.17",
+ "tokio",
+]
+
+[[package]]
+name = "tauri-plugin-updater"
+version = "2.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "27cbc31740f4d507712550694749572ec0e43bdd66992db7599b89fbfd6b167b"
+dependencies = [
+ "base64 0.22.1",
+ "dirs 6.0.0",
+ "flate2",
+ "futures-util",
+ "http",
+ "infer",
+ "log",
+ "minisign-verify",
+ "osakit",
+ "percent-encoding",
+ "reqwest",
+ "semver",
+ "serde",
+ "serde_json",
+ "tar",
+ "tauri",
+ "tauri-plugin",
+ "tempfile",
+ "thiserror 2.0.17",
+ "time",
+ "tokio",
+ "url",
+ "windows-sys 0.60.2",
+ "zip",
+]
+
+[[package]]
+name = "tauri-runtime"
+version = "2.9.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "87f766fe9f3d1efc4b59b17e7a891ad5ed195fa8d23582abb02e6c9a01137892"
+dependencies = [
+ "cookie",
+ "dpi",
+ "gtk",
+ "http",
+ "jni",
+ "objc2 0.6.3",
+ "objc2-ui-kit",
+ "objc2-web-kit",
+ "raw-window-handle",
+ "serde",
+ "serde_json",
+ "tauri-utils",
+ "thiserror 2.0.17",
+ "url",
+ "webkit2gtk",
+ "webview2-com",
+ "windows",
+]
+
+[[package]]
+name = "tauri-runtime-wry"
+version = "2.9.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7950f3bde6bcca6655bc5e76d3d6ec587ceb81032851ab4ddbe1f508bdea2729"
+dependencies = [
+ "gtk",
+ "http",
+ "jni",
+ "log",
+ "objc2 0.6.3",
+ "objc2-app-kit",
+ "objc2-foundation 0.3.2",
+ "once_cell",
+ "percent-encoding",
+ "raw-window-handle",
+ "softbuffer",
+ "tao",
+ "tauri-runtime",
+ "tauri-utils",
+ "url",
+ "webkit2gtk",
+ "webview2-com",
+ "windows",
+ "wry",
+]
+
+[[package]]
+name = "tauri-utils"
+version = "2.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "76a423c51176eb3616ee9b516a9fa67fed5f0e78baaba680e44eb5dd2cc37490"
+dependencies = [
+ "anyhow",
+ "brotli",
+ "cargo_metadata",
+ "ctor",
+ "dunce",
+ "glob",
+ "html5ever",
+ "http",
+ "infer",
+ "json-patch",
+ "kuchikiki",
+ "log",
+ "memchr",
+ "phf 0.11.3",
+ "proc-macro2",
+ "quote",
+ "regex",
+ "schemars 0.8.22",
+ "semver",
+ "serde",
+ "serde-untagged",
+ "serde_json",
+ "serde_with",
+ "swift-rs",
+ "thiserror 2.0.17",
+ "toml 0.9.8",
+ "url",
+ "urlpattern",
+ "uuid",
+ "walkdir",
+]
+
+[[package]]
+name = "tauri-winres"
+version = "0.3.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1087b111fe2b005e42dbdc1990fc18593234238d47453b0c99b7de1c9ab2c1e0"
+dependencies = [
+ "dunce",
+ "embed-resource",
+ "toml 0.9.8",
+]
+
+[[package]]
+name = "tauri-winrt-notification"
+version = "0.7.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b1e66e07de489fe43a46678dd0b8df65e0c973909df1b60ba33874e297ba9b9"
+dependencies = [
+ "quick-xml 0.37.5",
+ "thiserror 2.0.17",
+ "windows",
+ "windows-version",
+]
+
+[[package]]
+name = "tempfile"
+version = "3.23.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2d31c77bdf42a745371d260a26ca7163f1e0924b64afa0b688e61b5a9fa02f16"
+dependencies = [
+ "fastrand",
+ "getrandom 0.3.4",
+ "once_cell",
+ "rustix",
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "tendril"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d24a120c5fc464a3458240ee02c299ebcb9d67b5249c8848b09d639dca8d7bb0"
+dependencies = [
+ "futf",
+ "mac",
+ "utf-8",
+]
+
+[[package]]
+name = "thiserror"
+version = "1.0.69"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6aaf5339b578ea85b50e080feb250a3e8ae8cfcdff9a461c9ec2904bc923f52"
+dependencies = [
+ "thiserror-impl 1.0.69",
+]
+
+[[package]]
+name = "thiserror"
+version = "2.0.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f63587ca0f12b72a0600bcba1d40081f830876000bb46dd2337a3051618f4fc8"
+dependencies = [
+ "thiserror-impl 2.0.17",
+]
+
+[[package]]
+name = "thiserror-impl"
+version = "1.0.69"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4fee6c4efc90059e10f81e6d42c60a18f76588c3d74cb83a0b242a2b6c7504c1"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "thiserror-impl"
+version = "2.0.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3ff15c8ecd7de3849db632e14d18d2571fa09dfc5ed93479bc4485c7a517c913"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "time"
+version = "0.3.44"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "91e7d9e3bb61134e77bde20dd4825b97c010155709965fedf0f49bb138e52a9d"
+dependencies = [
+ "deranged",
+ "itoa",
+ "libc",
+ "num-conv",
+ "num_threads",
+ "powerfmt",
+ "serde",
+ "time-core",
+ "time-macros",
+]
+
+[[package]]
+name = "time-core"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "40868e7c1d2f0b8d73e4a8c7f0ff63af4f6d19be117e90bd73eb1d62cf831c6b"
+
+[[package]]
+name = "time-macros"
+version = "0.2.24"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "30cfb0125f12d9c277f35663a0a33f8c30190f4e4574868a330595412d34ebf3"
+dependencies = [
+ "num-conv",
+ "time-core",
+]
+
+[[package]]
+name = "tinystr"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "42d3e9c45c09de15d06dd8acf5f4e0e399e85927b7f00711024eb7ae10fa4869"
+dependencies = [
+ "displaydoc",
+ "zerovec",
+]
+
+[[package]]
+name = "tinyvec"
+version = "1.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bfa5fdc3bce6191a1dbc8c02d5c8bffcf557bafa17c124c5264a458f1b0613fa"
+dependencies = [
+ "tinyvec_macros",
+]
+
+[[package]]
+name = "tinyvec_macros"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
+
+[[package]]
+name = "tokio"
+version = "1.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ff360e02eab121e0bc37a2d3b4d4dc622e6eda3a8e5253d5435ecf5bd4c68408"
+dependencies = [
+ "bytes",
+ "libc",
+ "mio",
+ "pin-project-lite",
+ "signal-hook-registry",
+ "socket2",
+ "tokio-macros",
+ "tracing",
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "tokio-macros"
+version = "2.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "af407857209536a95c8e56f8231ef2c2e2aff839b22e07a1ffcbc617e9db9fa5"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "tokio-rustls"
+version = "0.26.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1729aa945f29d91ba541258c8df89027d5792d85a8841fb65e8bf0f4ede4ef61"
+dependencies = [
+ "rustls",
+ "tokio",
+]
+
+[[package]]
+name = "tokio-util"
+version = "0.7.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2efa149fe76073d6e8fd97ef4f4eca7b67f599660115591483572e406e165594"
+dependencies = [
+ "bytes",
+ "futures-core",
+ "futures-sink",
+ "pin-project-lite",
+ "tokio",
+]
+
+[[package]]
+name = "toml"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "185d8ab0dfbb35cf1399a6344d8484209c088f75f8f68230da55d48d95d43e3d"
+dependencies = [
+ "serde",
+ "serde_spanned 0.6.9",
+ "toml_datetime 0.6.3",
+ "toml_edit 0.20.2",
+]
+
+[[package]]
+name = "toml"
+version = "0.9.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f0dc8b1fb61449e27716ec0e1bdf0f6b8f3e8f6b05391e8497b8b6d7804ea6d8"
+dependencies = [
+ "indexmap 2.12.0",
+ "serde_core",
+ "serde_spanned 1.0.3",
+ "toml_datetime 0.7.3",
+ "toml_parser",
+ "toml_writer",
+ "winnow 0.7.13",
+]
+
+[[package]]
+name = "toml_datetime"
+version = "0.6.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7cda73e2f1397b1262d6dfdcef8aafae14d1de7748d66822d3bfeeb6d03e5e4b"
+dependencies = [
+ "serde",
+]
+
+[[package]]
+name = "toml_datetime"
+version = "0.7.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f2cdb639ebbc97961c51720f858597f7f24c4fc295327923af55b74c3c724533"
+dependencies = [
+ "serde_core",
+]
+
+[[package]]
+name = "toml_edit"
+version = "0.19.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1b5bb770da30e5cbfde35a2d7b9b8a2c4b8ef89548a7a6aeab5c9a576e3e7421"
+dependencies = [
+ "indexmap 2.12.0",
+ "toml_datetime 0.6.3",
+ "winnow 0.5.40",
+]
+
+[[package]]
+name = "toml_edit"
+version = "0.20.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "396e4d48bbb2b7554c944bde63101b5ae446cff6ec4a24227428f15eb72ef338"
+dependencies = [
+ "indexmap 2.12.0",
+ "serde",
+ "serde_spanned 0.6.9",
+ "toml_datetime 0.6.3",
+ "winnow 0.5.40",
+]
+
+[[package]]
+name = "toml_edit"
+version = "0.23.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6485ef6d0d9b5d0ec17244ff7eb05310113c3f316f2d14200d4de56b3cb98f8d"
+dependencies = [
+ "indexmap 2.12.0",
+ "toml_datetime 0.7.3",
+ "toml_parser",
+ "winnow 0.7.13",
+]
+
+[[package]]
+name = "toml_parser"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c0cbe268d35bdb4bb5a56a2de88d0ad0eb70af5384a99d648cd4b3d04039800e"
+dependencies = [
+ "winnow 0.7.13",
+]
+
+[[package]]
+name = "toml_writer"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df8b2b54733674ad286d16267dcfc7a71ed5c776e4ac7aa3c3e2561f7c637bf2"
+
+[[package]]
+name = "tower"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d039ad9159c98b70ecfd540b2573b97f7f52c3e8d9f8ad57a24b916a536975f9"
+dependencies = [
+ "futures-core",
+ "futures-util",
+ "pin-project-lite",
+ "sync_wrapper",
+ "tokio",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
+[[package]]
+name = "tower-http"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e9cd434a998747dd2c4276bc96ee2e0c7a2eadf3cae88e52be55a05fa9053f5"
+dependencies = [
+ "bitflags 2.10.0",
+ "bytes",
+ "http",
+ "http-body",
+ "http-body-util",
+ "pin-project-lite",
+ "tower-layer",
+ "tower-service",
+]
+
+[[package]]
+name = "tower-http"
+version = "0.6.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "adc82fd73de2a9722ac5da747f12383d2bfdb93591ee6c58486e0097890f05f2"
+dependencies = [
+ "bitflags 2.10.0",
+ "bytes",
+ "futures-util",
+ "http",
+ "http-body",
+ "iri-string",
+ "pin-project-lite",
+ "tower",
+ "tower-layer",
+ "tower-service",
+]
+
+[[package]]
+name = "tower-layer"
+version = "0.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "121c2a6cda46980bb0fcd1647ffaf6cd3fc79a013de288782836f6df9c48780e"
+
+[[package]]
+name = "tower-service"
+version = "0.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8df9b6e13f2d32c91b9bd719c00d1958837bc7dec474d94952798cc8e69eeec3"
+
+[[package]]
+name = "tracing"
+version = "0.1.41"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "784e0ac535deb450455cbfa28a6f0df145ea1bb7ae51b821cf5e7927fdcfbdd0"
+dependencies = [
+ "log",
+ "pin-project-lite",
+ "tracing-attributes",
+ "tracing-core",
+]
+
+[[package]]
+name = "tracing-attributes"
+version = "0.1.30"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "81383ab64e72a7a8b8e13130c49e3dab29def6d0c7d76a03087b3cf71c5c6903"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "tracing-core"
+version = "0.1.34"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9d12581f227e93f094d3af2ae690a574abb8a2b9b7a96e7cfe9647b2b617678"
+dependencies = [
+ "once_cell",
+]
+
+[[package]]
+name = "tray-icon"
+version = "0.21.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3d5572781bee8e3f994d7467084e1b1fd7a93ce66bd480f8156ba89dee55a2b"
+dependencies = [
+ "crossbeam-channel",
+ "dirs 6.0.0",
+ "libappindicator",
+ "muda",
+ "objc2 0.6.3",
+ "objc2-app-kit",
+ "objc2-core-foundation",
+ "objc2-core-graphics",
+ "objc2-foundation 0.3.2",
+ "once_cell",
+ "png",
+ "serde",
+ "thiserror 2.0.17",
+ "windows-sys 0.60.2",
+]
+
+[[package]]
+name = "try-lock"
+version = "0.2.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e421abadd41a4225275504ea4d6566923418b7f05506fbc9c0fe86ba7396114b"
+
+[[package]]
+name = "typeid"
+version = "1.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bc7d623258602320d5c55d1bc22793b57daff0ec7efc270ea7d55ce1d5f5471c"
+
+[[package]]
+name = "typenum"
+version = "1.19.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "562d481066bde0658276a35467c4af00bdc6ee726305698a55b86e61d7ad82bb"
+
+[[package]]
+name = "uds_windows"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "89daebc3e6fd160ac4aa9fc8b3bf71e1f74fbf92367ae71fb83a037e8bf164b9"
+dependencies = [
+ "memoffset",
+ "tempfile",
+ "winapi",
+]
+
+[[package]]
+name = "unic-char-property"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a8c57a407d9b6fa02b4795eb81c5b6652060a15a7903ea981f3d723e6c0be221"
+dependencies = [
+ "unic-char-range",
+]
+
+[[package]]
+name = "unic-char-range"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0398022d5f700414f6b899e10b8348231abf9173fa93144cbc1a43b9793c1fbc"
+
+[[package]]
+name = "unic-common"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "80d7ff825a6a654ee85a63e80f92f054f904f21e7d12da4e22f9834a4aaa35bc"
+
+[[package]]
+name = "unic-ucd-ident"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e230a37c0381caa9219d67cf063aa3a375ffed5bf541a452db16e744bdab6987"
+dependencies = [
+ "unic-char-property",
+ "unic-char-range",
+ "unic-ucd-version",
+]
+
+[[package]]
+name = "unic-ucd-version"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "96bd2f2237fe450fcd0a1d2f5f4e91711124f7857ba2e964247776ebeeb7b0c4"
+dependencies = [
+ "unic-common",
+]
+
+[[package]]
+name = "unicode-ident"
+version = "1.0.22"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9312f7c4f6ff9069b165498234ce8be658059c6728633667c526e27dc2cf1df5"
+
+[[package]]
+name = "unicode-segmentation"
+version = "1.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f6ccf251212114b54433ec949fd6a7841275f9ada20dddd2f29e9ceea4501493"
+
+[[package]]
+name = "unsafe-libyaml"
+version = "0.2.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "673aac59facbab8a9007c7f6108d11f63b603f7cabff99fabf650fea5c32b861"
+
+[[package]]
+name = "untrusted"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ecb6da28b8a351d773b68d5825ac39017e680750f980f3a1a85cd8dd28a47c1"
+
+[[package]]
+name = "url"
+version = "2.5.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "08bc136a29a3d1758e07a9cca267be308aeebf5cfd5a10f3f67ab2097683ef5b"
+dependencies = [
+ "form_urlencoded",
+ "idna",
+ "percent-encoding",
+ "serde",
+]
+
+[[package]]
+name = "urlpattern"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "70acd30e3aa1450bc2eece896ce2ad0d178e9c079493819301573dae3c37ba6d"
+dependencies = [
+ "regex",
+ "serde",
+ "unic-ucd-ident",
+ "url",
+]
+
+[[package]]
+name = "utf-8"
+version = "0.7.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "09cc8ee72d2a9becf2f2febe0205bbed8fc6615b7cb429ad062dc7b7ddd036a9"
+
+[[package]]
+name = "utf8-width"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "86bd8d4e895da8537e5315b8254664e6b769c4ff3db18321b297a1e7004392e3"
+
+[[package]]
+name = "utf8_iter"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6c140620e7ffbb22c2dee59cafe6084a59b5ffc27a8859a5f0d494b5d52b6be"
+
+[[package]]
+name = "uuid"
+version = "1.18.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2f87b8aa10b915a06587d0dec516c282ff295b475d94abf425d62b57710070a2"
+dependencies = [
+ "getrandom 0.3.4",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "value-bag"
+version = "1.11.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "943ce29a8a743eb10d6082545d861b24f9d1b160b7d741e0f2cdf726bec909c5"
+
+[[package]]
+name = "version-compare"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "03c2856837ef78f57382f06b2b8563a2f512f7185d732608fd9176cb3b8edf0e"
+
+[[package]]
+name = "version_check"
+version = "0.9.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
+
+[[package]]
+name = "vswhom"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "be979b7f07507105799e854203b470ff7c78a1639e330a58f183b5fea574608b"
+dependencies = [
+ "libc",
+ "vswhom-sys",
+]
+
+[[package]]
+name = "vswhom-sys"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fb067e4cbd1ff067d1df46c9194b5de0e98efd2810bbc95c5d5e5f25a3231150"
+dependencies = [
+ "cc",
+ "libc",
+]
+
+[[package]]
+name = "walkdir"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "29790946404f91d9c5d06f9874efddea1dc06c5efe94541a7d6863108e3a5e4b"
+dependencies = [
+ "same-file",
+ "winapi-util",
+]
+
+[[package]]
+name = "want"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bfa7760aed19e106de2c7c0b581b509f2f25d3dacaf737cb82ac61bc6d760b0e"
+dependencies = [
+ "try-lock",
+]
+
+[[package]]
+name = "wasi"
+version = "0.9.0+wasi-snapshot-preview1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cccddf32554fecc6acb585f82a32a72e28b48f8c4c1883ddfeeeaa96f7d8e519"
+
+[[package]]
+name = "wasi"
+version = "0.11.1+wasi-snapshot-preview1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ccf3ec651a847eb01de73ccad15eb7d99f80485de043efb2f370cd654f4ea44b"
+
+[[package]]
+name = "wasip2"
+version = "1.0.1+wasi-0.2.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0562428422c63773dad2c345a1882263bbf4d65cf3f42e90921f787ef5ad58e7"
+dependencies = [
+ "wit-bindgen",
+]
+
+[[package]]
+name = "wasm-bindgen"
+version = "0.2.105"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "da95793dfc411fbbd93f5be7715b0578ec61fe87cb1a42b12eb625caa5c5ea60"
+dependencies = [
+ "cfg-if",
+ "once_cell",
+ "rustversion",
+ "wasm-bindgen-macro",
+ "wasm-bindgen-shared",
+]
+
+[[package]]
+name = "wasm-bindgen-futures"
+version = "0.4.55"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "551f88106c6d5e7ccc7cd9a16f312dd3b5d36ea8b4954304657d5dfba115d4a0"
+dependencies = [
+ "cfg-if",
+ "js-sys",
+ "once_cell",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "wasm-bindgen-macro"
+version = "0.2.105"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "04264334509e04a7bf8690f2384ef5265f05143a4bff3889ab7a3269adab59c2"
+dependencies = [
+ "quote",
+ "wasm-bindgen-macro-support",
+]
+
+[[package]]
+name = "wasm-bindgen-macro-support"
+version = "0.2.105"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "420bc339d9f322e562942d52e115d57e950d12d88983a14c79b86859ee6c7ebc"
+dependencies = [
+ "bumpalo",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+ "wasm-bindgen-shared",
+]
+
+[[package]]
+name = "wasm-bindgen-shared"
+version = "0.2.105"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "76f218a38c84bcb33c25ec7059b07847d465ce0e0a76b995e134a45adcb6af76"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "wasm-streams"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "15053d8d85c7eccdbefef60f06769760a563c7f0a9d6902a13d35c7800b0ad65"
+dependencies = [
+ "futures-util",
+ "js-sys",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "wayland-backend"
+version = "0.3.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "673a33c33048a5ade91a6b139580fa174e19fb0d23f396dca9fa15f2e1e49b35"
+dependencies = [
+ "cc",
+ "downcast-rs",
+ "rustix",
+ "scoped-tls",
+ "smallvec",
+ "wayland-sys",
+]
+
+[[package]]
+name = "wayland-client"
+version = "0.31.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c66a47e840dc20793f2264eb4b3e4ecb4b75d91c0dd4af04b456128e0bdd449d"
+dependencies = [
+ "bitflags 2.10.0",
+ "rustix",
+ "wayland-backend",
+ "wayland-scanner",
+]
+
+[[package]]
+name = "wayland-protocols"
+version = "0.32.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "efa790ed75fbfd71283bd2521a1cfdc022aabcc28bdcff00851f9e4ae88d9901"
+dependencies = [
+ "bitflags 2.10.0",
+ "wayland-backend",
+ "wayland-client",
+ "wayland-scanner",
+]
+
+[[package]]
+name = "wayland-scanner"
+version = "0.31.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "54cb1e9dc49da91950bdfd8b848c49330536d9d1fb03d4bfec8cae50caa50ae3"
+dependencies = [
+ "proc-macro2",
+ "quick-xml 0.37.5",
+ "quote",
+]
+
+[[package]]
+name = "wayland-sys"
+version = "0.31.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "34949b42822155826b41db8e5d0c1be3a2bd296c747577a43a3e6daefc296142"
+dependencies = [
+ "dlib",
+ "log",
+ "pkg-config",
+]
+
+[[package]]
+name = "web-sys"
+version = "0.3.82"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3a1f95c0d03a47f4ae1f7a64643a6bb97465d9b740f0fa8f90ea33915c99a9a1"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "web-time"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5a6580f308b1fad9207618087a65c04e7a10bc77e02c8e84e9b00dd4b12fa0bb"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "webkit2gtk"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "76b1bc1e54c581da1e9f179d0b38512ba358fb1af2d634a1affe42e37172361a"
+dependencies = [
+ "bitflags 1.3.2",
+ "cairo-rs",
+ "gdk",
+ "gdk-sys",
+ "gio",
+ "gio-sys",
+ "glib",
+ "glib-sys",
+ "gobject-sys",
+ "gtk",
+ "gtk-sys",
+ "javascriptcore-rs",
+ "libc",
+ "once_cell",
+ "soup3",
+ "webkit2gtk-sys",
+]
+
+[[package]]
+name = "webkit2gtk-sys"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "62daa38afc514d1f8f12b8693d30d5993ff77ced33ce30cd04deebc267a6d57c"
+dependencies = [
+ "bitflags 1.3.2",
+ "cairo-sys-rs",
+ "gdk-sys",
+ "gio-sys",
+ "glib-sys",
+ "gobject-sys",
+ "gtk-sys",
+ "javascriptcore-rs-sys",
+ "libc",
+ "pkg-config",
+ "soup3-sys",
+ "system-deps",
+]
+
+[[package]]
+name = "webpki-roots"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b2878ef029c47c6e8cf779119f20fcf52bde7ad42a731b2a304bc221df17571e"
+dependencies = [
+ "rustls-pki-types",
+]
+
+[[package]]
+name = "webview2-com"
+version = "0.38.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d4ba622a989277ef3886dd5afb3e280e3dd6d974b766118950a08f8f678ad6a4"
+dependencies = [
+ "webview2-com-macros",
+ "webview2-com-sys",
+ "windows",
+ "windows-core 0.61.2",
+ "windows-implement",
+ "windows-interface",
+]
+
+[[package]]
+name = "webview2-com-macros"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1d228f15bba3b9d56dde8bddbee66fa24545bd17b48d5128ccf4a8742b18e431"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "webview2-com-sys"
+version = "0.38.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "36695906a1b53a3bf5c4289621efedac12b73eeb0b89e7e1a89b517302d5d75c"
+dependencies = [
+ "thiserror 2.0.17",
+ "windows",
+ "windows-core 0.61.2",
+]
+
+[[package]]
+name = "winapi"
+version = "0.3.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5c839a674fcd7a98952e593242ea400abe93992746761e38641405d28b00f419"
+dependencies = [
+ "winapi-i686-pc-windows-gnu",
+ "winapi-x86_64-pc-windows-gnu",
+]
+
+[[package]]
+name = "winapi-i686-pc-windows-gnu"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ac3b87c63620426dd9b991e5ce0329eff545bccbbb34f3be09ff6fb6ab51b7b6"
+
+[[package]]
+name = "winapi-util"
+version = "0.1.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c2a7b1c03c876122aa43f3020e6c3c3ee5c05081c9a00739faf7503aeba10d22"
+dependencies = [
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "winapi-x86_64-pc-windows-gnu"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
+
+[[package]]
+name = "window-vibrancy"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d9bec5a31f3f9362f2258fd0e9c9dd61a9ca432e7306cc78c444258f0dce9a9c"
+dependencies = [
+ "objc2 0.6.3",
+ "objc2-app-kit",
+ "objc2-core-foundation",
+ "objc2-foundation 0.3.2",
+ "raw-window-handle",
+ "windows-sys 0.59.0",
+ "windows-version",
+]
+
+[[package]]
+name = "window-vibrancy"
+version = "0.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "010797bd7c40396fbc59d3105089fed0885fe267a0ef4a0a4646df54e28647f6"
+dependencies = [
+ "objc2 0.6.3",
+ "objc2-app-kit",
+ "objc2-core-foundation",
+ "objc2-foundation 0.3.2",
+ "raw-window-handle",
+ "windows-sys 0.60.2",
+ "windows-version",
+]
+
+[[package]]
+name = "windows"
+version = "0.61.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9babd3a767a4c1aef6900409f85f5d53ce2544ccdfaa86dad48c91782c6d6893"
+dependencies = [
+ "windows-collections",
+ "windows-core 0.61.2",
+ "windows-future",
+ "windows-link 0.1.3",
+ "windows-numerics",
+]
+
+[[package]]
+name = "windows-collections"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3beeceb5e5cfd9eb1d76b381630e82c4241ccd0d27f1a39ed41b2760b255c5e8"
+dependencies = [
+ "windows-core 0.61.2",
+]
+
+[[package]]
+name = "windows-core"
+version = "0.61.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c0fdd3ddb90610c7638aa2b3a3ab2904fb9e5cdbecc643ddb3647212781c4ae3"
+dependencies = [
+ "windows-implement",
+ "windows-interface",
+ "windows-link 0.1.3",
+ "windows-result 0.3.4",
+ "windows-strings 0.4.2",
+]
+
+[[package]]
+name = "windows-core"
+version = "0.62.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b8e83a14d34d0623b51dce9581199302a221863196a1dde71a7663a4c2be9deb"
+dependencies = [
+ "windows-implement",
+ "windows-interface",
+ "windows-link 0.2.1",
+ "windows-result 0.4.1",
+ "windows-strings 0.5.1",
+]
+
+[[package]]
+name = "windows-future"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc6a41e98427b19fe4b73c550f060b59fa592d7d686537eebf9385621bfbad8e"
+dependencies = [
+ "windows-core 0.61.2",
+ "windows-link 0.1.3",
+ "windows-threading",
+]
+
+[[package]]
+name = "windows-implement"
+version = "0.60.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "053e2e040ab57b9dc951b72c264860db7eb3b0200ba345b4e4c3b14f67855ddf"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "windows-interface"
+version = "0.59.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f316c4a2570ba26bbec722032c4099d8c8bc095efccdc15688708623367e358"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "windows-link"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5e6ad25900d524eaabdbbb96d20b4311e1e7ae1699af4fb28c17ae66c80d798a"
+
+[[package]]
+name = "windows-link"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f0805222e57f7521d6a62e36fa9163bc891acd422f971defe97d64e70d0a4fe5"
+
+[[package]]
+name = "windows-numerics"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9150af68066c4c5c07ddc0ce30421554771e528bde427614c61038bc2c92c2b1"
+dependencies = [
+ "windows-core 0.61.2",
+ "windows-link 0.1.3",
+]
+
+[[package]]
+name = "windows-result"
+version = "0.3.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56f42bd332cc6c8eac5af113fc0c1fd6a8fd2aa08a0119358686e5160d0586c6"
+dependencies = [
+ "windows-link 0.1.3",
+]
+
+[[package]]
+name = "windows-result"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7781fa89eaf60850ac3d2da7af8e5242a5ea78d1a11c49bf2910bb5a73853eb5"
+dependencies = [
+ "windows-link 0.2.1",
+]
+
+[[package]]
+name = "windows-strings"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56e6c93f3a0c3b36176cb1327a4958a0353d5d166c2a35cb268ace15e91d3b57"
+dependencies = [
+ "windows-link 0.1.3",
+]
+
+[[package]]
+name = "windows-strings"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7837d08f69c77cf6b07689544538e017c1bfcf57e34b4c0ff58e6c2cd3b37091"
+dependencies = [
+ "windows-link 0.2.1",
+]
+
+[[package]]
+name = "windows-sys"
+version = "0.45.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75283be5efb2831d37ea142365f009c02ec203cd29a3ebecbc093d52315b66d0"
+dependencies = [
+ "windows-targets 0.42.2",
+]
+
+[[package]]
+name = "windows-sys"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "677d2418bec65e3338edb076e806bc1ec15693c5d0104683f2efe857f61056a9"
+dependencies = [
+ "windows-targets 0.48.5",
+]
+
+[[package]]
+name = "windows-sys"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "282be5f36a8ce781fad8c8ae18fa3f9beff57ec1b52cb3de0789201425d9a33d"
+dependencies = [
+ "windows-targets 0.52.6",
+]
+
+[[package]]
+name = "windows-sys"
+version = "0.59.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e38bc4d79ed67fd075bcc251a1c39b32a1776bbe92e5bef1f0bf1f8c531853b"
+dependencies = [
+ "windows-targets 0.52.6",
+]
+
+[[package]]
+name = "windows-sys"
+version = "0.60.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f2f500e4d28234f72040990ec9d39e3a6b950f9f22d3dba18416c35882612bcb"
+dependencies = [
+ "windows-targets 0.53.5",
+]
+
+[[package]]
+name = "windows-sys"
+version = "0.61.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ae137229bcbd6cdf0f7b80a31df61766145077ddf49416a728b02cb3921ff3fc"
+dependencies = [
+ "windows-link 0.2.1",
+]
+
+[[package]]
+name = "windows-targets"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8e5180c00cd44c9b1c88adb3693291f1cd93605ded80c250a75d472756b4d071"
+dependencies = [
+ "windows_aarch64_gnullvm 0.42.2",
+ "windows_aarch64_msvc 0.42.2",
+ "windows_i686_gnu 0.42.2",
+ "windows_i686_msvc 0.42.2",
+ "windows_x86_64_gnu 0.42.2",
+ "windows_x86_64_gnullvm 0.42.2",
+ "windows_x86_64_msvc 0.42.2",
+]
+
+[[package]]
+name = "windows-targets"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9a2fa6e2155d7247be68c096456083145c183cbbbc2764150dda45a87197940c"
+dependencies = [
+ "windows_aarch64_gnullvm 0.48.5",
+ "windows_aarch64_msvc 0.48.5",
+ "windows_i686_gnu 0.48.5",
+ "windows_i686_msvc 0.48.5",
+ "windows_x86_64_gnu 0.48.5",
+ "windows_x86_64_gnullvm 0.48.5",
+ "windows_x86_64_msvc 0.48.5",
+]
+
+[[package]]
+name = "windows-targets"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9b724f72796e036ab90c1021d4780d4d3d648aca59e491e6b98e725b84e99973"
+dependencies = [
+ "windows_aarch64_gnullvm 0.52.6",
+ "windows_aarch64_msvc 0.52.6",
+ "windows_i686_gnu 0.52.6",
+ "windows_i686_gnullvm 0.52.6",
+ "windows_i686_msvc 0.52.6",
+ "windows_x86_64_gnu 0.52.6",
+ "windows_x86_64_gnullvm 0.52.6",
+ "windows_x86_64_msvc 0.52.6",
+]
+
+[[package]]
+name = "windows-targets"
+version = "0.53.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4945f9f551b88e0d65f3db0bc25c33b8acea4d9e41163edf90dcd0b19f9069f3"
+dependencies = [
+ "windows-link 0.2.1",
+ "windows_aarch64_gnullvm 0.53.1",
+ "windows_aarch64_msvc 0.53.1",
+ "windows_i686_gnu 0.53.1",
+ "windows_i686_gnullvm 0.53.1",
+ "windows_i686_msvc 0.53.1",
+ "windows_x86_64_gnu 0.53.1",
+ "windows_x86_64_gnullvm 0.53.1",
+ "windows_x86_64_msvc 0.53.1",
+]
+
+[[package]]
+name = "windows-threading"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b66463ad2e0ea3bbf808b7f1d371311c80e115c0b71d60efc142cafbcfb057a6"
+dependencies = [
+ "windows-link 0.1.3",
+]
+
+[[package]]
+name = "windows-version"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e4060a1da109b9d0326b7262c8e12c84df67cc0dbc9e33cf49e01ccc2eb63631"
+dependencies = [
+ "windows-link 0.2.1",
+]
+
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "597a5118570b68bc08d8d59125332c54f1ba9d9adeedeef5b99b02ba2b0698f8"
+
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2b38e32f0abccf9987a4e3079dfb67dcd799fb61361e53e2882c3cbaf0d905d8"
+
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32a4622180e7a0ec044bb555404c800bc9fd9ec262ec147edd5989ccd0c02cd3"
+
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a9d8416fa8b42f5c947f8482c43e7d89e73a173cead56d044f6a56104a6d1b53"
+
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e08e8864a60f06ef0d0ff4ba04124db8b0fb3be5776a5cd47641e942e58c4d43"
+
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc35310971f3b2dbbf3f0690a219f40e2d9afcf64f9ab7cc1be722937c26b4bc"
+
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "09ec2a7bb152e2252b53fa7803150007879548bc709c039df7627cabbd05d469"
+
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9d782e804c2f632e395708e99a94275910eb9100b2114651e04744e9b125006"
+
+[[package]]
+name = "windows_i686_gnu"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c61d927d8da41da96a81f029489353e68739737d3beca43145c8afec9a31a84f"
+
+[[package]]
+name = "windows_i686_gnu"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a75915e7def60c94dcef72200b9a8e58e5091744960da64ec734a6c6e9b3743e"
+
+[[package]]
+name = "windows_i686_gnu"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8e9b5ad5ab802e97eb8e295ac6720e509ee4c243f69d781394014ebfe8bbfa0b"
+
+[[package]]
+name = "windows_i686_gnu"
+version = "0.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "960e6da069d81e09becb0ca57a65220ddff016ff2d6af6a223cf372a506593a3"
+
+[[package]]
+name = "windows_i686_gnullvm"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0eee52d38c090b3caa76c563b86c3a4bd71ef1a819287c19d586d7334ae8ed66"
+
+[[package]]
+name = "windows_i686_gnullvm"
+version = "0.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fa7359d10048f68ab8b09fa71c3daccfb0e9b559aed648a8f95469c27057180c"
+
+[[package]]
+name = "windows_i686_msvc"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "44d840b6ec649f480a41c8d80f9c65108b92d89345dd94027bfe06ac444d1060"
+
+[[package]]
+name = "windows_i686_msvc"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8f55c233f70c4b27f66c523580f78f1004e8b5a8b659e05a4eb49d4166cca406"
+
+[[package]]
+name = "windows_i686_msvc"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "240948bc05c5e7c6dabba28bf89d89ffce3e303022809e73deaefe4f6ec56c66"
+
+[[package]]
+name = "windows_i686_msvc"
+version = "0.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e7ac75179f18232fe9c285163565a57ef8d3c89254a30685b57d83a38d326c2"
+
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8de912b8b8feb55c064867cf047dda097f92d51efad5b491dfb98f6bbb70cb36"
+
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "53d40abd2583d23e4718fddf1ebec84dbff8381c07cae67ff7768bbf19c6718e"
+
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "147a5c80aabfbf0c7d901cb5895d1de30ef2907eb21fbbab29ca94c5b08b1a78"
+
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9c3842cdd74a865a8066ab39c8a7a473c0778a3f29370b5fd6b4b9aa7df4a499"
+
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "26d41b46a36d453748aedef1486d5c7a85db22e56aff34643984ea85514e94a3"
+
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b7b52767868a23d5bab768e390dc5f5c55825b6d30b86c844ff2dc7414044cc"
+
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "24d5b23dc417412679681396f2b49f3de8c1473deb516bd34410872eff51ed0d"
+
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0ffa179e2d07eee8ad8f57493436566c7cc30ac536a3379fdf008f47f6bb7ae1"
+
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9aec5da331524158c6d1a4ac0ab1541149c0b9505fde06423b02f5ef0106b9f0"
+
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ed94fce61571a4006852b7389a063ab983c02eb1bb37b47f8272ce92d06d9538"
+
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "589f6da84c646204747d1270a2a5661ea66ed1cced2631d546fdfb155959f9ec"
+
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d6bbff5f0aada427a1e5a6da5f1f98158182f26556f345ac9e04d36d0ebed650"
+
+[[package]]
+name = "winnow"
+version = "0.5.40"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f593a95398737aeed53e489c785df13f3618e41dbcd6718c6addbf1395aa6876"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "winnow"
+version = "0.7.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "21a0236b59786fed61e2a80582dd500fe61f18b5dca67a4a067d0bc9039339cf"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "winreg"
+version = "0.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "80d0f4e272c85def139476380b12f9ac60926689dd2e01d4923222f40580869d"
+dependencies = [
+ "winapi",
+]
+
+[[package]]
+name = "winreg"
+version = "0.55.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cb5a765337c50e9ec252c2069be9bf91c7df47afb103b642ba3a53bf8101be97"
+dependencies = [
+ "cfg-if",
+ "windows-sys 0.59.0",
+]
+
+[[package]]
+name = "wit-bindgen"
+version = "0.46.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f17a85883d4e6d00e8a97c586de764dabcc06133f7f1d55dce5cdc070ad7fe59"
+
+[[package]]
+name = "writeable"
+version = "0.6.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9edde0db4769d2dc68579893f2306b26c6ecfbe0ef499b013d731b7b9247e0b9"
+
+[[package]]
+name = "wry"
+version = "0.53.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "728b7d4c8ec8d81cab295e0b5b8a4c263c0d41a785fb8f8c4df284e5411140a2"
+dependencies = [
+ "base64 0.22.1",
+ "block2 0.6.2",
+ "cookie",
+ "crossbeam-channel",
+ "dirs 6.0.0",
+ "dpi",
+ "dunce",
+ "gdkx11",
+ "gtk",
+ "html5ever",
+ "http",
+ "javascriptcore-rs",
+ "jni",
+ "kuchikiki",
+ "libc",
+ "ndk",
+ "objc2 0.6.3",
+ "objc2-app-kit",
+ "objc2-core-foundation",
+ "objc2-foundation 0.3.2",
+ "objc2-ui-kit",
+ "objc2-web-kit",
+ "once_cell",
+ "percent-encoding",
+ "raw-window-handle",
+ "sha2",
+ "soup3",
+ "tao-macros",
+ "thiserror 2.0.17",
+ "url",
+ "webkit2gtk",
+ "webkit2gtk-sys",
+ "webview2-com",
+ "windows",
+ "windows-core 0.61.2",
+ "windows-version",
+ "x11-dl",
+]
+
+[[package]]
+name = "wyz"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "05f360fc0b24296329c78fda852a1e9ae82de9cf7b27dae4b7f62f118f77b9ed"
+dependencies = [
+ "tap",
+]
+
+[[package]]
+name = "x11"
+version = "2.21.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "502da5464ccd04011667b11c435cb992822c2c0dbde1770c988480d312a0db2e"
+dependencies = [
+ "libc",
+ "pkg-config",
+]
+
+[[package]]
+name = "x11-dl"
+version = "2.21.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "38735924fedd5314a6e548792904ed8c6de6636285cb9fec04d5b1db85c1516f"
+dependencies = [
+ "libc",
+ "once_cell",
+ "pkg-config",
+]
+
+[[package]]
+name = "xattr"
+version = "1.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32e45ad4206f6d2479085147f02bc2ef834ac85886624a23575ae137c8aa8156"
+dependencies = [
+ "libc",
+ "rustix",
+]
+
+[[package]]
+name = "yoke"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72d6e5c6afb84d73944e5cedb052c4680d5657337201555f9f2a16b7406d4954"
+dependencies = [
+ "stable_deref_trait",
+ "yoke-derive",
+ "zerofrom",
+]
+
+[[package]]
+name = "yoke-derive"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b659052874eb698efe5b9e8cf382204678a0086ebf46982b79d6ca3182927e5d"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+ "synstructure",
+]
+
+[[package]]
+name = "zbus"
+version = "5.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b622b18155f7a93d1cd2dc8c01d2d6a44e08fb9ebb7b3f9e6ed101488bad6c91"
+dependencies = [
+ "async-broadcast",
+ "async-executor",
+ "async-io",
+ "async-lock",
+ "async-process",
+ "async-recursion",
+ "async-task",
+ "async-trait",
+ "blocking",
+ "enumflags2",
+ "event-listener",
+ "futures-core",
+ "futures-lite",
+ "hex",
+ "nix 0.30.1",
+ "ordered-stream",
+ "serde",
+ "serde_repr",
+ "tokio",
+ "tracing",
+ "uds_windows",
+ "uuid",
+ "windows-sys 0.61.2",
+ "winnow 0.7.13",
+ "zbus_macros",
+ "zbus_names",
+ "zvariant",
+]
+
+[[package]]
+name = "zbus_macros"
+version = "5.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1cdb94821ca8a87ca9c298b5d1cbd80e2a8b67115d99f6e4551ac49e42b6a314"
+dependencies = [
+ "proc-macro-crate 3.4.0",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+ "zbus_names",
+ "zvariant",
+ "zvariant_utils",
+]
+
+[[package]]
+name = "zbus_names"
+version = "4.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7be68e64bf6ce8db94f63e72f0c7eb9a60d733f7e0499e628dfab0f84d6bcb97"
+dependencies = [
+ "serde",
+ "static_assertions",
+ "winnow 0.7.13",
+ "zvariant",
+]
+
+[[package]]
+name = "zerocopy"
+version = "0.8.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0894878a5fa3edfd6da3f88c4805f4c8558e2b996227a3d864f47fe11e38282c"
+dependencies = [
+ "zerocopy-derive",
+]
+
+[[package]]
+name = "zerocopy-derive"
+version = "0.8.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "88d2b8d9c68ad2b9e4340d7832716a4d21a22a1154777ad56ea55c51a9cf3831"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "zerofrom"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "50cc42e0333e05660c3587f3bf9d0478688e15d870fab3346451ce7f8c9fbea5"
+dependencies = [
+ "zerofrom-derive",
+]
+
+[[package]]
+name = "zerofrom-derive"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d71e5d6e06ab090c67b5e44993ec16b72dcbaabc526db883a360057678b48502"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+ "synstructure",
+]
+
+[[package]]
+name = "zeroize"
+version = "1.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b97154e67e32c85465826e8bcc1c59429aaaf107c1e4a9e53c8d8ccd5eff88d0"
+
+[[package]]
+name = "zerotrie"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2a59c17a5562d507e4b54960e8569ebee33bee890c70aa3fe7b97e85a9fd7851"
+dependencies = [
+ "displaydoc",
+ "yoke",
+ "zerofrom",
+]
+
+[[package]]
+name = "zerovec"
+version = "0.11.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6c28719294829477f525be0186d13efa9a3c602f7ec202ca9e353d310fb9a002"
+dependencies = [
+ "yoke",
+ "zerofrom",
+ "zerovec-derive",
+]
+
+[[package]]
+name = "zerovec-derive"
+version = "0.11.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eadce39539ca5cb3985590102671f2567e659fca9666581ad3411d59207951f3"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+]
+
+[[package]]
+name = "zip"
+version = "4.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "caa8cd6af31c3b31c6631b8f483848b91589021b28fffe50adada48d4f4d2ed1"
+dependencies = [
+ "arbitrary",
+ "crc32fast",
+ "indexmap 2.12.0",
+ "memchr",
+]
+
+[[package]]
+name = "zvariant"
+version = "5.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2be61892e4f2b1772727be11630a62664a1826b62efa43a6fe7449521cb8744c"
+dependencies = [
+ "endi",
+ "enumflags2",
+ "serde",
+ "url",
+ "winnow 0.7.13",
+ "zvariant_derive",
+ "zvariant_utils",
+]
+
+[[package]]
+name = "zvariant_derive"
+version = "5.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "da58575a1b2b20766513b1ec59d8e2e68db2745379f961f86650655e862d2006"
+dependencies = [
+ "proc-macro-crate 3.4.0",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.110",
+ "zvariant_utils",
+]
+
+[[package]]
+name = "zvariant_utils"
+version = "3.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c6949d142f89f6916deca2232cf26a8afacf2b9fdc35ce766105e104478be599"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "serde",
+ "syn 2.0.110",
+ "winnow 0.7.13",
+]
diff --git a/packages/desktop/src-tauri/Cargo.toml b/packages/desktop/src-tauri/Cargo.toml
new file mode 100644
index 00000000..74456b1f
--- /dev/null
+++ b/packages/desktop/src-tauri/Cargo.toml
@@ -0,0 +1,52 @@
+[package]
+name = "openchamber-desktop"
+version = "1.0.0"
+edition = "2021"
+publish = false
+
+[lib]
+name = "openchamber_desktop"
+path = "src/lib.rs"
+
+[[bin]]
+name = "openchamber-desktop"
+path = "src/main.rs"
+
+[dependencies]
+anyhow = "1.0.86"
+axum = { version = "0.8.4", features = ["macros"] }
+chrono = { version = "0.4", features = ["serde"] }
+dirs = "5.0"
+fastrand = "2.0"
+futures-util = "0.3"
+log = "0.4.28"
+nix = { version = "0.28", features = ["signal"] }
+objc = "0.2.7"
+objc2 = "0.6.3"
+objc2-foundation = { version = "0.3.2", features = ["NSProcessInfo", "NSString", "NSObjCRuntime"] }
+once_cell = "1.19"
+parking_lot = "0.12.3"
+portable-pty = "0.9.0"
+portpicker = "0.1.1"
+regex = "1.10.4"
+reqwest = { version = "0.12.4", default-features = false, features = ["json", "stream", "rustls-tls", "gzip", "brotli", "deflate"] }
+serde = { version = "1.0.210", features = ["derive"] }
+serde_json = "1.0.143"
+serde_yaml = "0.9"
+tauri = { version = "2.9.4", features = ["macos-private-api", "devtools" ] }
+tauri-plugin-dialog = "2.4.2"
+tauri-plugin-fs = "2.4.4"
+tauri-plugin-log = "2.7.1"
+tauri-plugin-shell = "2.3.3"
+tokio = { version = "1.38", features = ["macros", "rt-multi-thread", "process", "signal", "sync", "time", "fs"] }
+tower-http = { version = "0.5.2", features = ["cors"] }
+uuid = { version = "1.18.1", features = ["v4"] }
+tokio-util = { version = "0.7", features = ["io"] }
+tauri-plugin-notification = "2.3.3"
+tauri-plugin-updater = "2"
+
+[build-dependencies]
+tauri-build = { version = "2.5.3", features = [] }
+
+[target.'cfg(target_os = "macos")'.dependencies]
+window-vibrancy = "0.7.1"
diff --git a/packages/desktop/src-tauri/Info.plist b/packages/desktop/src-tauri/Info.plist
new file mode 100644
index 00000000..09babc54
--- /dev/null
+++ b/packages/desktop/src-tauri/Info.plist
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>NSSupportsAutomaticTermination</key>
+	<false/>
+	<key>NSSupportsSuddenTermination</key>
+	<false/>
+</dict>
+</plist>
diff --git a/packages/desktop/src-tauri/build.rs b/packages/desktop/src-tauri/build.rs
new file mode 100644
index 00000000..261851f6
--- /dev/null
+++ b/packages/desktop/src-tauri/build.rs
@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build();
+}
diff --git a/packages/desktop/src-tauri/capabilities/default.json b/packages/desktop/src-tauri/capabilities/default.json
new file mode 100644
index 00000000..c6973567
--- /dev/null
+++ b/packages/desktop/src-tauri/capabilities/default.json
@@ -0,0 +1,42 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "Default capabilities for OpenChamber desktop runtime",
+  "windows": ["main"],
+  "permissions": [
+    "core:default",
+    "core:window:default",
+    "core:window:allow-close",
+    "core:window:allow-set-title",
+    "core:window:allow-set-size",
+    "core:window:allow-set-position",
+    "core:window:allow-start-dragging",
+    "core:webview:default",
+    "core:webview:allow-webview-close",
+    "shell:allow-open",
+    "shell:allow-execute",
+    "dialog:allow-open",
+    "dialog:allow-save",
+    "dialog:allow-message",
+    "dialog:allow-ask",
+    "dialog:allow-confirm",
+    "fs:allow-read-text-file",
+    "fs:allow-read-file",
+    "fs:allow-write-text-file",
+    "fs:allow-write-file",
+    "fs:allow-read-dir",
+    "fs:allow-exists",
+    "fs:allow-create",
+    "fs:allow-mkdir",
+    "fs:allow-remove",
+    "fs:scope-app-index",
+    "fs:scope-home",
+    "notification:default",
+    "notification:allow-is-permission-granted",
+    "notification:allow-request-permission",
+    "notification:allow-notify",
+    "updater:default",
+    "updater:allow-check",
+    "updater:allow-download-and-install"
+  ]
+}
diff --git a/packages/desktop/src-tauri/icons/app-icon-checkpoint.svg b/packages/desktop/src-tauri/icons/app-icon-checkpoint.svg
new file mode 100644
index 00000000..a95cb607
--- /dev/null
+++ b/packages/desktop/src-tauri/icons/app-icon-checkpoint.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="iconShadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feDropShadow dx="0" dy="12" stdDeviation="14" flood-opacity="0.5" flood-color="#000000"/>
+    </filter>
+    <filter id="glyphShadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feDropShadow dx="2" dy="4" stdDeviation="8" flood-opacity="0.3" flood-color="#000000"/>
+    </filter>
+    <linearGradient id="bgGradient" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#131010"/>
+      <stop offset="100%" stop-color="#1E1919"/>
+    </linearGradient>
+  </defs>
+
+  <g transform="translate(100, 100)">
+    <rect x="0" y="0" width="824" height="824" rx="185" ry="185" filter="url(#iconShadow)" fill="url(#bgGradient)"/>
+
+    <g transform="translate(412, 412) scale(7.65) translate(-35, -35.5)" filter="url(#glyphShadow)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 13H35V58H0V13ZM26.25 22.1957H8.75V48.701H26.25V22.1957Z" fill="#F8F7F3"/>
+      <rect x="8.75" y="30" width="17.5" height="18.5" fill="#4B4646"/>
+      <path d="M43.75 13H70V22.1957H52.5V48.701H70V57.8967H43.75V13Z" fill="#F8F7F3"/>
+    </g>
+  </g>
+</svg>
diff --git a/packages/desktop/src-tauri/icons/app-icon.png b/packages/desktop/src-tauri/icons/app-icon.png
new file mode 100644
index 00000000..2ca31187
Binary files /dev/null and b/packages/desktop/src-tauri/icons/app-icon.png differ
diff --git a/packages/desktop/src-tauri/icons/app-icon.svg b/packages/desktop/src-tauri/icons/app-icon.svg
new file mode 100644
index 00000000..0fb426bf
--- /dev/null
+++ b/packages/desktop/src-tauri/icons/app-icon.svg
@@ -0,0 +1,35 @@
+<?xml version='1.0' encoding='utf-8'?>
+<ns0:svg xmlns:ns0="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+  <ns0:defs>
+    <ns0:filter id="iconShadow" x="-50%" y="-50%" width="200%" height="200%">
+      <ns0:feDropShadow dx="0" dy="12" stdDeviation="14" flood-opacity="0.5" flood-color="#000000" />
+    </ns0:filter>
+    <ns0:filter id="glyphShadow" x="-50%" y="-50%" width="200%" height="200%">
+      <ns0:feDropShadow dx="2" dy="4" stdDeviation="6" flood-opacity="0.28" flood-color="#000000" />
+    </ns0:filter>
+    <ns0:linearGradient id="bgGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="1">
+      <ns0:stop offset="0%" stop-color="#151313" />
+      <ns0:stop offset="100%" stop-color="#151313" />
+    </ns0:linearGradient>
+    <ns0:linearGradient id="glyphGradient" x1="0" y1="0" x2="0" y2="1">
+      <ns0:stop offset="0%" stop-color="#F8F8F8" />
+      <ns0:stop offset="55%" stop-color="#DAD6D0" />
+      <ns0:stop offset="100%" stop-color="#BAB4AF" />
+    </ns0:linearGradient>
+    <ns0:linearGradient id="glyphStrokeGradient" x1="0" y1="0" x2="0" y2="1">
+      <ns0:stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.08" />
+      <ns0:stop offset="45%" stop-color="#000000" stop-opacity="0.15" />
+      <ns0:stop offset="100%" stop-color="#000000" stop-opacity="0.2" />
+    </ns0:linearGradient>
+  </ns0:defs>
+
+  <ns0:g transform="translate(100, 100)">
+    <ns0:rect x="0" y="0" width="824" height="824" rx="185" ry="185" filter="url(#iconShadow)" fill="url(#bgGradient)" />
+
+    <ns0:g transform="translate(412, 412) scale(8.15) translate(-35, -35.5)" filter="url(#glyphShadow)">
+      <ns0:rect x="8.75" y="31.0" width="17.5" height="20.5" fill="#4B4646" />
+      <ns0:path fill-rule="evenodd" clip-rule="evenodd" d="M0 13H35V58H0V13ZM26.25 22.1957H8.75V48.701H26.25V22.1957Z" fill="url(#glyphGradient)" stroke="url(#glyphStrokeGradient)" stroke-width="1.1" stroke-linejoin="round" />
+      <ns0:path d="M43.75 13H70V22.1957H52.5V48.701H70V57.8967H43.75V13Z" fill="url(#glyphGradient)" stroke="url(#glyphStrokeGradient)" stroke-width="1.1" stroke-linejoin="round" />
+    </ns0:g>
+  </ns0:g>
+</ns0:svg>
\ No newline at end of file
diff --git a/packages/desktop/src-tauri/icons/icon-rgba.png b/packages/desktop/src-tauri/icons/icon-rgba.png
new file mode 100644
index 00000000..11311999
Binary files /dev/null and b/packages/desktop/src-tauri/icons/icon-rgba.png differ
diff --git a/packages/desktop/src-tauri/icons/icon.icns b/packages/desktop/src-tauri/icons/icon.icns
new file mode 100644
index 00000000..932b0a9c
Binary files /dev/null and b/packages/desktop/src-tauri/icons/icon.icns differ
diff --git a/packages/desktop/src-tauri/icons/icon.png b/packages/desktop/src-tauri/icons/icon.png
new file mode 100644
index 00000000..737b9f14
Binary files /dev/null and b/packages/desktop/src-tauri/icons/icon.png differ
diff --git a/packages/desktop/src-tauri/src/assistant_notifications.rs b/packages/desktop/src-tauri/src/assistant_notifications.rs
new file mode 100644
index 00000000..2fc1bb6c
--- /dev/null
+++ b/packages/desktop/src-tauri/src/assistant_notifications.rs
@@ -0,0 +1,280 @@
+use std::{collections::HashSet, time::Duration};
+
+use anyhow::Result;
+use futures_util::TryStreamExt;
+use log::{debug, info, warn};
+use reqwest::Client;
+use serde::Deserialize;
+use serde_json::Value;
+use tauri::{AppHandle, Manager};
+use tauri_plugin_notification::NotificationExt;
+use tokio::{io::AsyncBufReadExt, sync::Mutex};
+use tokio_util::io::StreamReader;
+
+use crate::DesktopRuntime;
+
+#[derive(Deserialize)]
+struct EventEnvelope {
+    #[serde(rename = "type")]
+    event_type: String,
+    #[serde(default)]
+    properties: Value,
+}
+
+pub fn spawn_assistant_notifications(
+    app: AppHandle,
+    runtime: DesktopRuntime,
+) -> tauri::async_runtime::JoinHandle<()> {
+    tauri::async_runtime::spawn(async move {
+        let client = Client::builder()
+            // Give SSE a very long overall timeout so idle periods don't abort the stream.
+            .timeout(Duration::from_secs(24 * 60 * 60))
+            .tcp_keepalive(Some(Duration::from_secs(30)))
+            .build()
+            .expect("failed to build reqwest client");
+
+        let mut shutdown_rx = runtime.subscribe_shutdown();
+        let notified_messages = Mutex::new(HashSet::<String>::new());
+
+        loop {
+            tokio::select! {
+                _ = shutdown_rx.recv() => {
+                    info!("[desktop:notify] Shutdown received, stopping SSE listener");
+                    break;
+                }
+                _ = async {
+                    if let Err(err) = run_once(&app, &runtime, &client, &notified_messages).await {
+                        warn!("[desktop:notify] SSE loop error: {err:?}");
+                    }
+                    tokio::time::sleep(Duration::from_secs(2)).await;
+                } => {}
+            }
+        }
+    })
+}
+
+async fn run_once(
+    app: &AppHandle,
+    runtime: &DesktopRuntime,
+    client: &Client,
+    notified_messages: &Mutex<HashSet<String>>,
+) -> Result<()> {
+    let opencode = runtime.opencode_manager();
+
+    let port = match opencode.current_port() {
+        Some(port) => port,
+        None => {
+            warn!("[desktop:notify] OpenCode port unavailable; will retry");
+            tokio::time::sleep(Duration::from_secs(2)).await;
+            return Ok(());
+        }
+    };
+
+    let prefix = opencode.api_prefix();
+    let mut url = format!("http://127.0.0.1:{port}{}/event", prefix);
+
+    if let Some(dir) = opencode.get_working_directory().to_str().map(|s| s.to_string()) {
+        let mut parsed = reqwest::Url::parse(&url)?;
+        parsed
+            .query_pairs_mut()
+            .append_pair("directory", &dir);
+        url = parsed.to_string();
+    }
+
+    debug!("[desktop:notify] Connecting SSE for notifications: {url}");
+
+    let response = client
+        .get(&url)
+        .header("accept", "text/event-stream")
+        .header("accept-encoding", "identity")
+        .send()
+        .await?;
+
+    debug!(
+        "[desktop:notify] SSE response status={} headers={:?}",
+        response.status(),
+        response.headers()
+    );
+
+    if !response.status().is_success() {
+        warn!(
+            "[desktop:notify] SSE connect failed with status {}",
+            response.status()
+        );
+        tokio::time::sleep(Duration::from_secs(2)).await;
+        return Ok(());
+    }
+
+    let stream = response
+        .bytes_stream()
+        .map_err(|err| std::io::Error::new(std::io::ErrorKind::Other, err));
+    let mut reader = StreamReader::new(stream);
+    let mut buf = Vec::new();
+    let mut data_lines: Vec<String> = Vec::new();
+
+    loop {
+        buf.clear();
+        let bytes_read = match reader.read_until(b'\n', &mut buf).await {
+            Ok(n) => n,
+            Err(err) => {
+                warn!("[desktop:notify] Read error in SSE stream: {err:?}");
+                return Err(err.into());
+            }
+        };
+        if bytes_read == 0 {
+            break;
+        }
+
+        let line = match std::str::from_utf8(&buf) {
+            Ok(s) => s.trim_end_matches(&['\r', '\n'][..]).to_string(),
+            Err(err) => {
+                warn!("[desktop:notify] Non-UTF8 SSE chunk: {err}");
+                continue;
+            }
+        };
+
+        if line.is_empty() {
+            if data_lines.is_empty() {
+                continue;
+            }
+            let raw = data_lines.join("\n");
+            data_lines.clear();
+
+            match serde_json::from_str::<EventEnvelope>(&raw) {
+                Ok(event) => handle_event(app, event, notified_messages).await,
+                Err(err) => {
+                    warn!("[desktop:notify] Failed to parse SSE data: {err}; raw={raw}");
+                }
+            }
+            continue;
+        }
+
+        if let Some(rest) = line.strip_prefix("data:") {
+            data_lines.push(rest.trim_start().to_string());
+        }
+    }
+
+    Ok(())
+}
+
+async fn handle_event(
+    app: &AppHandle,
+    event: EventEnvelope,
+    notified_messages: &Mutex<HashSet<String>>,
+) {
+    if event.event_type.as_str() != "message.updated" {
+        return;
+    }
+
+    let Some(info) = event.properties.get("info") else {
+        return;
+    };
+
+    let role = info.get("role").and_then(Value::as_str).unwrap_or_default();
+    if role != "assistant" {
+        return;
+    }
+
+    let finish = info.get("finish").and_then(Value::as_str);
+    if finish != Some("stop") {
+        return;
+    }
+
+    let message_id = match info.get("id").and_then(Value::as_str) {
+        Some(id) => id.to_string(),
+        None => return,
+    };
+
+    {
+        let mut notified = notified_messages.lock().await;
+        if notified.contains(&message_id) {
+            return;
+        }
+        notified.insert(message_id.clone());
+    }
+
+    let raw_mode = info
+        .get("mode")
+        .and_then(Value::as_str)
+        .filter(|s| !s.is_empty())
+        .unwrap_or("agent");
+    let raw_model = info
+        .get("modelID")
+        .and_then(Value::as_str)
+        .filter(|s| !s.is_empty())
+        .unwrap_or("assistant");
+
+    let title = format!("{} agent is ready", format_mode(raw_mode));
+    let body = format!("{} completed the task", format_model_id(raw_model));
+
+    let should_notify = app
+        .get_webview_window("main")
+        .map(|window| {
+            let focused = window.is_focused().unwrap_or(false);
+            let minimized = window.is_minimized().unwrap_or(false);
+            // Only notify when the app is not in the foreground or is minimized
+            !focused || minimized
+        })
+        .unwrap_or(true);
+
+    if should_notify {
+        let _ = app
+            .notification()
+            .builder()
+            .title(title)
+            .body(body)
+            .sound("Glass")
+            .show();
+    }
+}
+
+fn format_mode(raw: &str) -> String {
+    if raw.is_empty() {
+        return "Agent".to_string();
+    }
+    raw.split(&['-', '_', ' '][..])
+        .filter(|s| !s.is_empty())
+        .map(capitalize)
+        .collect::<Vec<_>>()
+        .join(" ")
+}
+
+fn format_model_id(raw: &str) -> String {
+    if raw.is_empty() {
+        return "Assistant".to_string();
+    }
+
+    let tokens: Vec<&str> = raw.split(&['-', '_'][..]).collect();
+    let mut result: Vec<String> = Vec::new();
+    let mut i = 0;
+
+    while i < tokens.len() {
+        let current = tokens[i];
+
+        if current.chars().all(|c| c.is_ascii_digit()) {
+            if i + 1 < tokens.len() && tokens[i + 1].chars().all(|c| c.is_ascii_digit()) {
+                let combined = format!("{}.{}", current, tokens[i + 1]);
+                result.push(combined);
+                i += 2;
+                continue;
+            }
+        }
+
+        result.push(current.to_string());
+        i += 1;
+    }
+
+    result
+        .into_iter()
+        .map(|part| capitalize(&part))
+        .collect::<Vec<_>>()
+        .join(" ")
+}
+
+fn capitalize(s: &str) -> String {
+    let mut chars = s.chars();
+    match chars.next() {
+        Some(first) => first.to_uppercase().collect::<String>() + chars.as_str(),
+        None => String::new(),
+    }
+}
diff --git a/packages/desktop/src-tauri/src/commands/files.rs b/packages/desktop/src-tauri/src/commands/files.rs
new file mode 100644
index 00000000..9969a690
--- /dev/null
+++ b/packages/desktop/src-tauri/src/commands/files.rs
@@ -0,0 +1,443 @@
+use crate::{DesktopRuntime, SettingsStore};
+use serde::Serialize;
+use std::{
+    collections::{HashSet, VecDeque},
+    path::{Path, PathBuf},
+    time::UNIX_EPOCH,
+};
+use tokio::fs;
+
+const DEFAULT_FILE_SEARCH_LIMIT: usize = 60;
+const MAX_FILE_SEARCH_LIMIT: usize = 400;
+const FILE_SEARCH_MAX_CONCURRENCY: usize = 5;
+const FILE_SEARCH_EXCLUDED_DIRS: &[&str] = &[
+    "node_modules",
+    ".git",
+    "dist",
+    "build",
+    ".next",
+    ".turbo",
+    ".cache",
+    "coverage",
+    "tmp",
+    "logs",
+];
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct FileListEntry {
+    name: String,
+    path: String,
+    is_directory: bool,
+    is_file: bool,
+    is_symbolic_link: bool,
+    size: Option<u64>,
+    modified_time: Option<i64>,
+}
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct DirectoryListResult {
+    directory: String,
+    path: String,
+    entries: Vec<FileListEntry>,
+}
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct CreateDirectoryResponse {
+    success: bool,
+    path: String,
+}
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct FileSearchHit {
+    name: String,
+    path: String,
+    relative_path: String,
+    extension: Option<String>,
+}
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SearchFilesResponse {
+    root: String,
+    count: usize,
+    files: Vec<FileSearchHit>,
+}
+
+#[derive(Debug)]
+enum FsCommandError {
+    NotFound,
+    AccessDenied,
+    NotDirectory,
+    OutsideWorkspace,
+    Other(String),
+}
+
+impl FsCommandError {
+    fn to_list_message(&self) -> String {
+        match self {
+            FsCommandError::NotFound => "Directory not found".to_string(),
+            FsCommandError::AccessDenied | FsCommandError::OutsideWorkspace => {
+                "Access to directory denied".to_string()
+            }
+            FsCommandError::NotDirectory => "Specified path is not a directory".to_string(),
+            FsCommandError::Other(message) => {
+                let _ = message;
+                "Failed to list directory".to_string()
+            }
+        }
+    }
+
+    fn to_search_message(&self) -> String {
+        match self {
+            FsCommandError::NotFound => "Directory not found".to_string(),
+            FsCommandError::AccessDenied | FsCommandError::OutsideWorkspace => {
+                "Access to directory denied".to_string()
+            }
+            FsCommandError::NotDirectory => "Specified path is not a directory".to_string(),
+            FsCommandError::Other(message) => {
+                let _ = message;
+                "Failed to search files".to_string()
+            }
+        }
+    }
+
+    fn to_create_message(&self) -> String {
+        match self {
+            FsCommandError::AccessDenied | FsCommandError::OutsideWorkspace => {
+                "Access to directory denied".to_string()
+            }
+            FsCommandError::NotDirectory => "Parent path must be a directory".to_string(),
+            FsCommandError::Other(message) => {
+                let _ = message;
+                "Failed to create directory".to_string()
+            }
+            FsCommandError::NotFound => "Parent directory not found".to_string(),
+        }
+    }
+}
+
+impl From<std::io::Error> for FsCommandError {
+    fn from(error: std::io::Error) -> Self {
+        match error.kind() {
+            std::io::ErrorKind::NotFound => FsCommandError::NotFound,
+            std::io::ErrorKind::PermissionDenied => FsCommandError::AccessDenied,
+            _ => FsCommandError::Other(error.to_string()),
+        }
+    }
+}
+
+#[tauri::command]
+pub async fn list_directory(
+    path: Option<String>,
+    state: tauri::State<'_, DesktopRuntime>,
+) -> Result<DirectoryListResult, String> {
+    let workspace_root = resolve_workspace_root(state.settings()).await;
+    let resolved_path = resolve_sandboxed_path(path, workspace_root.as_ref())
+        .await
+        .map_err(|err| err.to_list_message())?;
+
+    let metadata = fs::metadata(&resolved_path)
+        .await
+        .map_err(|err| FsCommandError::from(err).to_list_message())?;
+
+    if !metadata.is_dir() {
+        return Err(FsCommandError::NotDirectory.to_list_message());
+    }
+
+    // Re-check boundary after canonicalization to guard against traversal
+    if let Some(root) = &workspace_root {
+        if !resolved_path.starts_with(root) {
+            return Err(FsCommandError::OutsideWorkspace.to_list_message());
+        }
+    }
+
+    let mut entries = Vec::new();
+    let mut dir_entries = fs::read_dir(&resolved_path)
+        .await
+        .map_err(|err| FsCommandError::from(err).to_list_message())?;
+
+    while let Some(entry) = dir_entries
+        .next_entry()
+        .await
+        .map_err(|err| FsCommandError::from(err).to_list_message())?
+    {
+        let file_type = entry
+            .file_type()
+            .await
+            .map_err(|err| FsCommandError::from(err).to_list_message())?;
+
+        let entry_path = entry.path();
+        let name = entry.file_name().to_string_lossy().to_string();
+
+        let mut is_directory = file_type.is_dir();
+        let is_symlink = file_type.is_symlink();
+
+        if !is_directory && is_symlink {
+            if let Ok(link_meta) = fs::metadata(&entry_path).await {
+                is_directory = link_meta.is_dir();
+            }
+        }
+
+        let metadata = fs::metadata(&entry_path).await.ok();
+        let size = metadata
+            .as_ref()
+            .filter(|meta| meta.is_file())
+            .map(|meta| meta.len());
+        let modified_time = metadata
+            .and_then(|meta| meta.modified().ok())
+            .and_then(|mtime| mtime.duration_since(UNIX_EPOCH).ok())
+            .map(|duration| duration.as_millis() as i64);
+
+        entries.push(FileListEntry {
+            name,
+            path: normalize_path(&entry_path),
+            is_directory,
+            is_file: file_type.is_file(),
+            is_symbolic_link: is_symlink,
+            size,
+            modified_time,
+        });
+    }
+
+    Ok(DirectoryListResult {
+        directory: normalize_path(&resolved_path),
+        path: normalize_path(&resolved_path),
+        entries,
+    })
+}
+
+#[tauri::command]
+pub async fn search_files(
+    directory: Option<String>,
+    query: Option<String>,
+    max_results: Option<usize>,
+    state: tauri::State<'_, DesktopRuntime>,
+) -> Result<SearchFilesResponse, String> {
+    let workspace_root = resolve_workspace_root(state.settings()).await;
+    let resolved_root = resolve_sandboxed_path(directory, workspace_root.as_ref())
+        .await
+        .map_err(|err| err.to_search_message())?;
+
+    let limit = clamp_search_limit(max_results);
+    let normalized_query = query.unwrap_or_default().trim().to_lowercase();
+    let match_all = normalized_query.is_empty();
+
+    let mut files = Vec::new();
+    let mut queue = VecDeque::new();
+    let mut visited = HashSet::new();
+
+    queue.push_back(resolved_root.clone());
+    visited.insert(resolved_root.clone());
+
+    while !queue.is_empty() && files.len() < limit {
+        for _ in 0..FILE_SEARCH_MAX_CONCURRENCY {
+            let Some(dir) = queue.pop_front() else {
+                break;
+            };
+
+            let mut entries = match fs::read_dir(&dir).await {
+                Ok(entries) => entries,
+                Err(_) => continue,
+            };
+
+            while let Ok(Some(entry)) = entries.next_entry().await {
+                let Ok(file_type) = entry.file_type().await else {
+                    continue;
+                };
+
+                let name = entry.file_name();
+                let name_str = name.to_string_lossy();
+                if name_str.is_empty() || name_str.starts_with('.') {
+                    continue;
+                }
+
+                let entry_path = entry.path();
+                if file_type.is_dir() {
+                    if should_skip_directory(&name_str) {
+                        continue;
+                    }
+                    if visited.insert(entry_path.clone()) && files.len() < limit {
+                        queue.push_back(entry_path);
+                    }
+                    continue;
+                }
+
+                if !file_type.is_file() {
+                    continue;
+                }
+
+                let relative_path = relative_path(&resolved_root, &entry_path);
+                if !match_all {
+                    let lowercase_name = name_str.to_lowercase();
+                    let lowercase_path = relative_path.to_lowercase();
+                    if !lowercase_name.contains(&normalized_query)
+                        && !lowercase_path.contains(&normalized_query)
+                    {
+                        continue;
+                    }
+                }
+
+                let extension = entry_path
+                    .extension()
+                    .and_then(|ext| ext.to_str())
+                    .map(|ext| ext.to_lowercase());
+
+                files.push(FileSearchHit {
+                    name: name_str.to_string(),
+                    path: normalize_path(&entry_path),
+                    relative_path: relative_path.replace('\\', "/"),
+                    extension,
+                });
+
+                if files.len() >= limit {
+                    break;
+                }
+            }
+
+            if files.len() >= limit {
+                break;
+            }
+        }
+    }
+
+    Ok(SearchFilesResponse {
+        root: normalize_path(&resolved_root),
+        count: files.len(),
+        files,
+    })
+}
+
+#[tauri::command]
+pub async fn create_directory(
+    path: String,
+    state: tauri::State<'_, DesktopRuntime>,
+) -> Result<CreateDirectoryResponse, String> {
+    let trimmed = path.trim();
+    if trimmed.is_empty() {
+        return Err("Path is required".to_string());
+    }
+
+    let workspace_root = resolve_workspace_root(state.settings()).await;
+    let resolved_path = resolve_creatable_path(trimmed, workspace_root.as_ref())
+        .await
+        .map_err(|err| err.to_create_message())?;
+
+    fs::create_dir_all(&resolved_path)
+        .await
+        .map_err(|err| FsCommandError::from(err).to_create_message())?;
+
+    Ok(CreateDirectoryResponse {
+        success: true,
+        path: normalize_path(&resolved_path),
+    })
+}
+
+async fn resolve_sandboxed_path(
+    path: Option<String>,
+    workspace_root: Option<&PathBuf>,
+) -> Result<PathBuf, FsCommandError> {
+    let candidate_input = path
+        .as_ref()
+        .map(|value| value.trim())
+        .filter(|value| !value.is_empty());
+
+    let candidate_path = match (candidate_input, workspace_root) {
+        (Some(value), _) => PathBuf::from(value),
+        (None, Some(root)) => root.clone(),
+        (None, None) => default_home_directory(),
+    };
+
+    let resolved = if candidate_path.is_absolute() {
+        candidate_path
+    } else if let Some(root) = workspace_root {
+        root.join(candidate_path)
+    } else {
+        default_home_directory().join(candidate_path)
+    };
+
+    let canonicalized = fs::canonicalize(&resolved)
+        .await
+        .map_err(FsCommandError::from)?;
+
+    if let Some(root) = workspace_root {
+        if !canonicalized.starts_with(root) {
+            return Err(FsCommandError::OutsideWorkspace);
+        }
+    }
+
+    Ok(canonicalized)
+}
+
+async fn resolve_creatable_path(
+    path: &str,
+    workspace_root: Option<&PathBuf>,
+) -> Result<PathBuf, FsCommandError> {
+    let candidate = PathBuf::from(path);
+    if candidate.as_os_str().is_empty() {
+        return Err(FsCommandError::Other("Path is required".to_string()));
+    }
+
+    let absolute = if candidate.is_absolute() {
+        candidate
+    } else if let Some(root) = workspace_root {
+        root.join(candidate)
+    } else {
+        default_home_directory().join(candidate)
+    };
+
+    let parent = absolute.parent().ok_or(FsCommandError::NotDirectory)?;
+
+    let canonical_parent = fs::canonicalize(parent)
+        .await
+        .map_err(FsCommandError::from)?;
+
+    if let Some(root) = workspace_root {
+        if !canonical_parent.starts_with(root) {
+            return Err(FsCommandError::OutsideWorkspace);
+        }
+    }
+
+    Ok(absolute)
+}
+
+async fn resolve_workspace_root(settings: &SettingsStore) -> Option<PathBuf> {
+    if let Ok(Some(last_dir)) = settings.last_directory().await {
+        if let Ok(canonicalized) = fs::canonicalize(&last_dir).await {
+            return Some(canonicalized);
+        }
+    }
+    None
+}
+
+fn default_home_directory() -> PathBuf {
+    dirs::home_dir().unwrap_or_else(|| PathBuf::from("/"))
+}
+
+fn clamp_search_limit(value: Option<usize>) -> usize {
+    let limit = value.unwrap_or(DEFAULT_FILE_SEARCH_LIMIT);
+    limit.clamp(1, MAX_FILE_SEARCH_LIMIT)
+}
+
+fn should_skip_directory(name: &str) -> bool {
+    if name.starts_with('.') {
+        return true;
+    }
+    FILE_SEARCH_EXCLUDED_DIRS
+        .iter()
+        .any(|dir| dir.eq_ignore_ascii_case(name))
+}
+
+fn normalize_path(path: &Path) -> String {
+    path.to_string_lossy().replace('\\', "/")
+}
+
+fn relative_path(root: &Path, target: &Path) -> String {
+    target
+        .strip_prefix(root)
+        .map(|relative| normalize_path(relative))
+        .unwrap_or_else(|_| normalize_path(target))
+}
diff --git a/packages/desktop/src-tauri/src/commands/git.rs b/packages/desktop/src-tauri/src/commands/git.rs
new file mode 100644
index 00000000..a824b4e5
--- /dev/null
+++ b/packages/desktop/src-tauri/src/commands/git.rs
@@ -0,0 +1,1673 @@
+use crate::{DesktopRuntime, SettingsStore};
+use anyhow::{anyhow, Context, Result};
+use log::{error, info, warn};
+use regex::Regex;
+use reqwest::Client;
+use serde::{Deserialize, Serialize};
+use serde_json::Value;
+use std::collections::{HashMap, HashSet};
+use std::path::{Path, PathBuf};
+use std::sync::LazyLock;
+use tauri::State;
+use tokio::fs;
+use tokio::process::Command;
+
+const GIT_IDENTITY_STORAGE_FILE: &str = "git-identities.json";
+
+// --- Structs mirroring TypeScript types ---
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GitStatusFile {
+    pub path: String,
+    pub index: String,
+    pub working_dir: String,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GitStatus {
+    pub current: String,
+    pub tracking: Option<String>,
+    pub ahead: i32,
+    pub behind: i32,
+    pub files: Vec<GitStatusFile>,
+    pub is_clean: bool,
+    pub diff_stats: Option<HashMap<String, DiffStat>>,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct DiffStat {
+    pub insertions: i32,
+    pub deletions: i32,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GitBranchDetails {
+    pub current: bool,
+    pub name: String,
+    pub commit: String,
+    pub label: String,
+    pub tracking: Option<String>,
+    pub ahead: Option<i32>,
+    pub behind: Option<i32>,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GitBranch {
+    pub all: Vec<String>,
+    pub current: String,
+    pub branches: HashMap<String, GitBranchDetails>,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GitCommitSummary {
+    pub changes: i32,
+    pub insertions: i32,
+    pub deletions: i32,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GitCommitResult {
+    pub success: bool,
+    pub commit: String,
+    pub branch: String,
+    pub summary: GitCommitSummary,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GitPushResult {
+    pub success: bool,
+    pub pushed: Vec<GitPushRef>,
+    pub repo: String,
+    #[serde(rename = "ref")]
+    pub ref_: Option<String>, // "ref" is a keyword in Rust
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GitPushRef {
+    pub local: String,
+    pub remote: String,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GitPullResult {
+    pub success: bool,
+    pub summary: GitCommitSummary,
+    pub files: Vec<String>,
+    pub insertions: i32,
+    pub deletions: i32,
+}
+
+fn parse_shortstat(output: &str) -> GitCommitSummary {
+    let mut summary = GitCommitSummary {
+        changes: 0,
+        insertions: 0,
+        deletions: 0,
+    };
+
+    for line in output
+        .split('\n')
+        .map(|line| line.trim())
+        .filter(|line| !line.is_empty())
+    {
+        for part in line.split(',') {
+            let token = part.trim();
+            if token.is_empty() {
+                continue;
+            }
+
+            if token.contains("file changed") {
+                if let Some(value) = token.split_whitespace().next() {
+                    summary.changes = value.parse().unwrap_or(0);
+                }
+            } else if token.contains("insertion") {
+                if let Some(value) = token.split_whitespace().next() {
+                    summary.insertions = value.parse().unwrap_or(0);
+                }
+            } else if token.contains("deletion") {
+                if let Some(value) = token.split_whitespace().next() {
+                    summary.deletions = value.parse().unwrap_or(0);
+                }
+            }
+        }
+    }
+
+    summary
+}
+
+async fn get_head_hash(root: &Path) -> Result<String> {
+    let output = run_git(&["rev-parse", "HEAD"], root).await?;
+    Ok(output.trim().to_string())
+}
+
+async fn get_current_branch_name(root: &Path) -> Result<String> {
+    let output = run_git(&["rev-parse", "--abbrev-ref", "HEAD"], root).await?;
+    Ok(output.trim().to_string())
+}
+
+async fn collect_shortstat_for_range(root: &Path, range: &str) -> Result<GitCommitSummary> {
+    let args = ["diff", "--shortstat", range];
+    let output = run_git(&args, root).await.unwrap_or_default();
+    Ok(parse_shortstat(&output))
+}
+
+async fn collect_changed_files_for_range(root: &Path, range: &str) -> Result<Vec<String>> {
+    let args = ["diff", "--name-only", range];
+    let output = run_git(&args, root).await.unwrap_or_default();
+    Ok(output
+        .lines()
+        .map(|line| line.trim())
+        .filter(|line| !line.is_empty())
+        .map(|line| line.to_string())
+        .collect())
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GitIdentityProfile {
+    pub id: String,
+    pub name: String,
+    pub user_name: String,
+    pub user_email: String,
+    pub ssh_key: Option<String>,
+    pub color: Option<String>,
+    pub icon: Option<String>,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GitIdentityProfilesWrapper {
+    pub profiles: Vec<GitIdentityProfile>,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GitIdentitySummary {
+    pub user_name: Option<String>,
+    pub user_email: Option<String>,
+    pub ssh_command: Option<String>,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GitLogEntry {
+    pub hash: String,
+    pub date: String,
+    pub message: String,
+    pub refs: String,
+    pub body: String,
+    #[serde(rename = "author_name")]
+    pub author_name: String,
+    #[serde(rename = "author_email")]
+    pub author_email: String,
+    pub files_changed: i32,
+    pub insertions: i32,
+    pub deletions: i32,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GitLogResponse {
+    pub all: Vec<GitLogEntry>,
+    pub latest: Option<GitLogEntry>,
+    pub total: i32,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GitWorktreeInfo {
+    pub worktree: String,
+    pub head: Option<String>,
+    pub branch: Option<String>,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GeneratedCommitMessage {
+    pub subject: String,
+    pub highlights: Vec<String>,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct CommitFileEntry {
+    pub path: String,
+    pub insertions: i32,
+    pub deletions: i32,
+    pub is_binary: bool,
+    pub change_type: String,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct GitCommitFilesResponse {
+    pub files: Vec<CommitFileEntry>,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct CommitMessageResponse {
+    pub message: GeneratedCommitMessage,
+}
+
+// --- Constants & Regexes ---
+
+static WORKTREE_REGEX: LazyLock<Regex> = LazyLock::new(|| Regex::new(r"^worktree (.+)$").unwrap());
+static HEAD_REGEX: LazyLock<Regex> = LazyLock::new(|| Regex::new(r"^HEAD (.+)$").unwrap());
+static BRANCH_REGEX: LazyLock<Regex> = LazyLock::new(|| Regex::new(r"^branch (.+)$").unwrap());
+static FILES_CHANGED_REGEX: LazyLock<Regex> =
+    LazyLock::new(|| Regex::new(r"(\d+)\s+files?\s+changed").unwrap());
+static INSERTIONS_REGEX: LazyLock<Regex> =
+    LazyLock::new(|| Regex::new(r"(\d+)\s+insertions?\(\+\)").unwrap());
+static DELETIONS_REGEX: LazyLock<Regex> =
+    LazyLock::new(|| Regex::new(r"(\d+)\s+deletions?\(-\)").unwrap());
+
+// --- Helpers ---
+
+async fn run_git(args: &[&str], cwd: &Path) -> Result<String> {
+    run_git_with_allowed_exit(args, cwd, &[]).await
+}
+
+async fn run_git_with_allowed_exit(
+    args: &[&str],
+    cwd: &Path,
+    allowed_codes: &[i32],
+) -> Result<String> {
+    let output = Command::new("git")
+        .args(args)
+        .current_dir(cwd)
+        .env("GIT_OPTIONAL_LOCKS", "0")
+        .env("LC_ALL", "C")
+        .output()
+        .await
+        .context("Failed to execute git command")?;
+
+    if !output.status.success() {
+        if let Some(code) = output.status.code() {
+            if allowed_codes.contains(&code) {
+                return Ok(String::from_utf8_lossy(&output.stdout).trim().to_string());
+            }
+        }
+        let stderr = String::from_utf8_lossy(&output.stderr).trim().to_string();
+        return Err(anyhow!("{}", stderr));
+    }
+
+    Ok(String::from_utf8_lossy(&output.stdout).trim().to_string())
+}
+
+fn append_git_option(args: &mut Vec<String>, value: &Value) {
+    match value {
+        Value::Null => {}
+        Value::Bool(false) => {}
+        Value::Bool(true) => {}
+        Value::Number(num) => args.push(num.to_string()),
+        Value::String(text) => {
+            let trimmed = text.trim();
+            if !trimmed.is_empty() {
+                args.push(trimmed.to_string());
+            }
+        }
+        Value::Array(items) => {
+            for item in items {
+                append_git_option(args, item);
+            }
+        }
+        Value::Object(map) => append_git_option_map(args, map),
+    }
+}
+
+fn append_git_option_map(args: &mut Vec<String>, map: &serde_json::Map<String, Value>) {
+    for (key, value) in map {
+        let flag = key.trim();
+        if flag.is_empty() {
+            continue;
+        }
+
+        match value {
+            Value::Null | Value::Bool(true) => args.push(flag.to_string()),
+            Value::Bool(false) => {}
+            Value::String(text) => args.push(format!("{flag}={text}")),
+            Value::Number(num) => args.push(format!("{flag}={num}")),
+            Value::Array(items) => {
+                if items.is_empty() {
+                    args.push(flag.to_string());
+                } else {
+                    for item in items {
+                        match item {
+                            Value::Null | Value::Bool(true) => args.push(flag.to_string()),
+                            Value::Bool(false) => {}
+                            Value::String(text) => args.push(format!("{flag}={text}")),
+                            Value::Number(num) => args.push(format!("{flag}={num}")),
+                            other => append_git_option(args, other),
+                        }
+                    }
+                }
+            }
+            other => args.push(format!("{flag}={other}")),
+        }
+    }
+}
+
+// Removed unused resolve_workspace_root function
+
+async fn validate_git_path(path: &str, _settings: &SettingsStore) -> Result<PathBuf> {
+    let path_buf = PathBuf::from(path);
+    if !path_buf.exists() {
+        return Err(anyhow!("Directory does not exist: {}", path));
+    }
+
+    if !path_buf.is_absolute() {
+        return Err(anyhow!("Path must be absolute"));
+    }
+
+    Ok(path_buf)
+}
+
+// --- Identity Storage ---
+
+async fn get_identity_storage_path() -> Result<PathBuf> {
+    let mut path = dirs::home_dir().ok_or_else(|| anyhow!("Could not find home directory"))?;
+    path.push(".config");
+    path.push("openchamber");
+    fs::create_dir_all(&path).await?;
+    path.push(GIT_IDENTITY_STORAGE_FILE);
+    Ok(path)
+}
+
+async fn load_identities() -> Result<Vec<GitIdentityProfile>> {
+    let path = get_identity_storage_path().await?;
+    info!("Loading identities from {:?}", path);
+
+    if !path.exists() {
+        info!("Identities file does not exist at {:?}", path);
+        return Ok(Vec::new());
+    }
+
+    let content = fs::read_to_string(&path).await?;
+    info!("Read {} bytes from identities file", content.len());
+
+    let wrapper: serde_json::Value = match serde_json::from_str(&content) {
+        Ok(w) => w,
+        Err(e) => {
+            error!("Failed to parse identities JSON: {}", e);
+            return Err(e.into());
+        }
+    };
+
+    // Handle both array and object wrapper format if needed, but spec says object with profiles array
+    if let Some(profiles) = wrapper.get("profiles") {
+        match serde_json::from_value::<Vec<GitIdentityProfile>>(profiles.clone()) {
+            Ok(p) => {
+                info!("Successfully loaded {} profiles", p.len());
+                Ok(p)
+            }
+            Err(e) => {
+                error!("Failed to deserialize profiles array: {}", e);
+                // Log the failing JSON segment for debugging
+                warn!("Profiles JSON: {}", profiles);
+                Err(e.into())
+            }
+        }
+    } else {
+        warn!("No 'profiles' key found in identities JSON");
+        Ok(Vec::new())
+    }
+}
+
+async fn save_identities(profiles: Vec<GitIdentityProfile>) -> Result<()> {
+    let path = get_identity_storage_path().await?;
+    let wrapper = GitIdentityProfilesWrapper { profiles };
+    let content = serde_json::to_string_pretty(&wrapper)?;
+    fs::write(path, content).await?;
+    Ok(())
+}
+
+// --- Commands ---
+
+#[tauri::command]
+pub async fn check_is_git_repository(
+    directory: String,
+    state: State<'_, DesktopRuntime>,
+) -> Result<bool, String> {
+    let path = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+    let git_dir = path.join(".git");
+    Ok(git_dir.exists())
+}
+
+#[tauri::command]
+pub async fn get_git_status(
+    directory: String,
+    state: State<'_, DesktopRuntime>,
+) -> Result<GitStatus, String> {
+    let path = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+
+    // 1. Get porcelain status
+    let status_output = run_git(&["status", "--porcelain", "-b", "-z"], &path)
+        .await
+        .map_err(|e| e.to_string())?;
+
+    // Parse status output
+    let mut files = Vec::new();
+    let mut current = String::new();
+    let mut tracking = None;
+    let mut ahead = 0;
+    let mut behind = 0;
+
+    let entries: Vec<&str> = status_output.split('\0').collect();
+
+    for entry in entries {
+        if entry.is_empty() {
+            continue;
+        }
+
+        if entry.starts_with("## ") {
+            // Branch info: ## main...origin/main [ahead 1, behind 2]
+            let branch_line = &entry[3..];
+            if let Some((local, remote_part)) = branch_line.split_once("...") {
+                current = local.to_string();
+                // Parse remote part for ahead/behind
+                // Format: origin/main [ahead 1, behind 2] or origin/main
+                if let Some(bracket_start) = remote_part.find('[') {
+                    tracking = Some(remote_part[..bracket_start].trim().to_string());
+                    let stats = &remote_part[bracket_start + 1..remote_part.len() - 1]; // inside brackets
+                    for part in stats.split(", ") {
+                        if let Some(val) = part.strip_prefix("ahead ") {
+                            ahead = val.parse().unwrap_or(0);
+                        } else if let Some(val) = part.strip_prefix("behind ") {
+                            behind = val.parse().unwrap_or(0);
+                        }
+                    }
+                } else {
+                    tracking = Some(remote_part.trim().to_string());
+                }
+            } else {
+                // No remote or initial commit
+                current = branch_line.to_string();
+            }
+            continue;
+        }
+
+        // File entries: XY PATH or R  ORIG_PATH -> PATH
+        if entry.len() >= 4 {
+            let index_status = &entry[0..1];
+            let working_status = &entry[1..2];
+            let file_path = &entry[3..];
+
+            // Simple-git parsing logic approximation
+            files.push(GitStatusFile {
+                path: file_path.to_string(),
+                index: index_status.trim().to_string(),
+                working_dir: working_status.trim().to_string(),
+            });
+        }
+    }
+
+    // 2. Get diff stats (staged and unstaged)
+    let mut diff_stats = HashMap::new();
+
+    let collect_stats = |output: String| {
+        let mut stats = HashMap::new();
+        for line in output.lines() {
+            let parts: Vec<&str> = line.split('\t').collect();
+            if parts.len() >= 3 {
+                let insertions = if parts[0] == "-" {
+                    0
+                } else {
+                    parts[0].parse().unwrap_or(0)
+                };
+                let deletions = if parts[1] == "-" {
+                    0
+                } else {
+                    parts[1].parse().unwrap_or(0)
+                };
+                let path = parts[2].to_string();
+                stats.insert(
+                    path,
+                    DiffStat {
+                        insertions,
+                        deletions,
+                    },
+                );
+            }
+        }
+        stats
+    };
+
+    let staged_stats_raw = run_git(&["diff", "--cached", "--numstat"], &path)
+        .await
+        .unwrap_or_default();
+    let working_stats_raw = run_git(&["diff", "--numstat"], &path)
+        .await
+        .unwrap_or_default();
+
+    let staged_stats = collect_stats(staged_stats_raw);
+    let working_stats = collect_stats(working_stats_raw);
+
+    // Merge stats
+    let mut all_paths: HashSet<String> = staged_stats.keys().cloned().collect();
+    all_paths.extend(working_stats.keys().cloned());
+
+    for p in all_paths {
+        let s = staged_stats.get(&p).unwrap_or(&DiffStat {
+            insertions: 0,
+            deletions: 0,
+        });
+        let w = working_stats.get(&p).unwrap_or(&DiffStat {
+            insertions: 0,
+            deletions: 0,
+        });
+        diff_stats.insert(
+            p,
+            DiffStat {
+                insertions: s.insertions + w.insertions,
+                deletions: s.deletions + w.deletions,
+            },
+        );
+    }
+
+    // 3. Handle new/untracked files (manual calculation if needed, or skip if complex)
+    // Node implementation does manual read. For now, let's assume files with '??' or 'A'
+    // might need stats if they aren't in numstat.
+    // NOTE: untracked files don't show up in `git diff --numstat`.
+    // We can try `wc -l` logic but Rust fs read is safer.
+
+    for file in &files {
+        if (file.working_dir == "?" || file.index == "A") && !diff_stats.contains_key(&file.path) {
+            let full_path = path.join(&file.path);
+            if let Ok(metadata) = fs::metadata(&full_path).await {
+                if metadata.is_file() {
+                    if let Ok(content) = fs::read_to_string(&full_path).await {
+                        let lines = content.lines().count() as i32;
+                        diff_stats.insert(
+                            file.path.clone(),
+                            DiffStat {
+                                insertions: lines,
+                                deletions: 0,
+                            },
+                        );
+                    }
+                }
+            }
+        }
+    }
+
+    Ok(GitStatus {
+        current,
+        tracking,
+        ahead,
+        behind,
+        is_clean: files.is_empty(),
+        files,
+        diff_stats: Some(diff_stats),
+    })
+}
+
+#[tauri::command]
+pub async fn get_git_diff(
+    directory: String,
+    path_str: String,
+    staged: Option<bool>,
+    context_lines: Option<u32>,
+    state: State<'_, DesktopRuntime>,
+) -> Result<String, String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+
+    let mut args = vec!["diff", "--no-color"];
+    let context = format!("-U{}", context_lines.unwrap_or(3));
+    args.push(&context);
+
+    if staged.unwrap_or(false) {
+        args.push("--cached");
+    }
+
+    args.push("--");
+    args.push(&path_str);
+
+    let output = run_git(&args, &root).await.unwrap_or_default();
+
+    if output.trim().is_empty() && !staged.unwrap_or(false) {
+        // Try --no-index for untracked files
+        // git diff --no-index -- /dev/null path
+        let full_path = root.join(&path_str);
+        if full_path.exists() {
+            let args_no_index = vec![
+                "diff",
+                "--no-color",
+                &context,
+                "--no-index",
+                "--",
+                "/dev/null",
+                &path_str,
+            ];
+            return run_git_with_allowed_exit(&args_no_index, &root, &[1])
+                .await
+                .map_err(|e| e.to_string());
+        }
+    }
+
+    Ok(output)
+}
+
+#[tauri::command]
+pub async fn get_git_file_diff(
+    directory: String,
+    path_str: String,
+    state: State<'_, DesktopRuntime>,
+) -> Result<(String, String), String> {
+    use tokio::fs;
+
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+
+    // Original from HEAD
+    let original_spec = format!("HEAD:{}", path_str);
+    let original_args = vec!["show", original_spec.as_str()];
+    let original = run_git_with_allowed_exit(&original_args, &root, &[0, 128])
+        .await
+        .unwrap_or_default();
+
+    // Modified from working tree (if file exists)
+    let full_path = root.join(&path_str);
+    let modified = if let Ok(metadata) = fs::metadata(&full_path).await {
+        if metadata.is_file() {
+            fs::read_to_string(&full_path).await.unwrap_or_default()
+        } else {
+            String::new()
+        }
+    } else {
+        String::new()
+    };
+
+    Ok((original, modified))
+}
+
+#[tauri::command]
+pub async fn revert_git_file(
+    directory: String,
+    file_path: String,
+    state: State<'_, DesktopRuntime>,
+) -> Result<(), String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+
+    // Check if tracked
+    let is_tracked = run_git(&["ls-files", "--error-unmatch", &file_path], &root)
+        .await
+        .is_ok();
+
+    if !is_tracked {
+        // Clean untracked
+        let _ = run_git(&["clean", "-f", "-d", "--", &file_path], &root).await;
+        // Fallback fs remove if git clean failed (e.g. ignored files)
+        let full_path = root.join(&file_path);
+        if full_path.exists() {
+            if full_path.is_dir() {
+                let _ = fs::remove_dir_all(full_path).await;
+            } else {
+                let _ = fs::remove_file(full_path).await;
+            }
+        }
+    } else {
+        // Restore staged
+        let _ = run_git(&["restore", "--staged", &file_path], &root).await;
+        // Restore working
+        let _ = run_git(&["restore", &file_path], &root).await;
+    }
+
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn is_linked_worktree(
+    directory: String,
+    state: State<'_, DesktopRuntime>,
+) -> Result<bool, String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+    let git_dir = run_git(&["rev-parse", "--git-dir"], &root)
+        .await
+        .unwrap_or_default();
+    let common_dir = run_git(&["rev-parse", "--git-common-dir"], &root)
+        .await
+        .unwrap_or_default();
+    Ok(git_dir.trim() != common_dir.trim())
+}
+
+#[tauri::command]
+pub async fn get_git_branches(
+    directory: String,
+    state: State<'_, DesktopRuntime>,
+) -> Result<GitBranch, String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+
+    // Discover actual remote heads so we can drop stale remote-tracking refs
+    let allowed_remote_heads: Option<HashSet<String>> = match run_git(&["ls-remote", "--heads", "origin"], &root).await {
+        Ok(ls_remote) => {
+            let mut set = HashSet::new();
+            for line in ls_remote.lines() {
+                if let Some((_, ref_name)) = line.split_once('\t') {
+                    if let Some(stripped) = ref_name.trim().strip_prefix("refs/heads/") {
+                        set.insert(stripped.to_string());
+                    }
+                }
+            }
+            Some(set)
+        }
+        Err(err) => {
+            warn!("Failed to list remote heads: {}", err);
+            None
+        }
+    };
+
+    // Structured for-each-ref output so we can mark remotes consistently with the web runtime
+    let output = run_git(
+        &[
+            "for-each-ref",
+            "--format=%(refname)|%(refname:short)|%(objectname)|%(upstream:short)|%(HEAD)|%(upstream:track)",
+            "refs/heads",
+            "refs/remotes",
+        ],
+        &root,
+    )
+    .await
+    .map_err(|e| e.to_string())?;
+
+    let mut all = Vec::new();
+    let mut current_branch = String::new();
+    let mut branches = HashMap::new();
+
+    for line in output.lines() {
+        let parts: Vec<&str> = line.split('|').collect();
+        if parts.len() < 6 {
+            continue;
+        }
+
+        let full_ref = parts[0].trim();
+        let short_name = parts[1].trim();
+        let commit = parts[2].to_string();
+        let upstream = parts[3].trim();
+        let is_current = parts[4] == "*";
+        let track_info = parts[5];
+
+        let is_remote = full_ref.starts_with("refs/remotes/");
+
+        let normalized_name = if is_remote {
+            let (remote_name, branch_name) = match short_name.split_once('/') {
+                Some(parts) => parts,
+                None => continue, // skip malformed remote ref without branch
+            };
+
+            if branch_name == "HEAD" {
+                continue;
+            }
+
+            if let Some(allowed) = &allowed_remote_heads {
+                if !allowed.contains(branch_name) {
+                    continue;
+                }
+            }
+
+            format!("remotes/{}/{}", remote_name, branch_name)
+        } else {
+            short_name.to_string()
+        };
+
+        let tracking = if upstream.is_empty() {
+            None
+        } else {
+            Some(upstream.to_string())
+        };
+
+        if is_current {
+            current_branch = normalized_name.clone();
+        }
+        all.push(normalized_name.clone());
+
+        let mut ahead = None;
+        let mut behind = None;
+
+        // Parse track info like "[ahead 1, behind 2]"
+        if !track_info.is_empty() {
+            let content = track_info.trim_matches(|c| c == '[' || c == ']');
+            for part in content.split(", ") {
+                if let Some(val) = part.strip_prefix("ahead ") {
+                    ahead = val.parse().ok();
+                } else if let Some(val) = part.strip_prefix("behind ") {
+                    behind = val.parse().ok();
+                }
+            }
+        }
+
+        branches.insert(
+            normalized_name.clone(),
+            GitBranchDetails {
+                current: is_current,
+                name: normalized_name,
+                commit,
+                label: short_name.to_string(),
+                tracking,
+                ahead,
+                behind,
+            },
+        );
+    }
+
+    Ok(GitBranch {
+        all,
+        current: current_branch,
+        branches,
+    })
+}
+
+#[tauri::command]
+pub async fn delete_git_branch(
+    directory: String,
+    branch: String,
+    force: Option<bool>,
+    state: State<'_, DesktopRuntime>,
+) -> Result<(), String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+    let flag = if force.unwrap_or(false) { "-D" } else { "-d" };
+    run_git(&["branch", flag, &branch], &root)
+        .await
+        .map_err(|e| e.to_string())?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn delete_remote_branch(
+    directory: String,
+    branch: String,
+    remote: Option<String>,
+    state: State<'_, DesktopRuntime>,
+) -> Result<(), String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+    let remote_name = remote.unwrap_or_else(|| "origin".to_string());
+
+    // branch might be refs/heads/foo or just foo
+    let clean_branch = branch.trim_start_matches("refs/heads/");
+
+    run_git(&["push", &remote_name, "--delete", clean_branch], &root)
+        .await
+        .map_err(|e| e.to_string())?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn list_git_worktrees(
+    directory: String,
+    state: State<'_, DesktopRuntime>,
+) -> Result<Vec<GitWorktreeInfo>, String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+    let output = run_git(&["worktree", "list", "--porcelain"], &root)
+        .await
+        .map_err(|e| e.to_string())?;
+
+    let mut worktrees = Vec::new();
+    let mut current = GitWorktreeInfo {
+        worktree: String::new(),
+        head: None,
+        branch: None,
+    };
+
+    for line in output.lines() {
+        if let Some(cap) = WORKTREE_REGEX.captures(line) {
+            if !current.worktree.is_empty() {
+                worktrees.push(current.clone());
+                current = GitWorktreeInfo {
+                    worktree: String::new(),
+                    head: None,
+                    branch: None,
+                };
+            }
+            current.worktree = cap[1].to_string();
+        } else if let Some(cap) = HEAD_REGEX.captures(line) {
+            current.head = Some(cap[1].to_string());
+        } else if let Some(cap) = BRANCH_REGEX.captures(line) {
+            current.branch = Some(cap[1].trim_start_matches("refs/heads/").to_string());
+        } else if line.is_empty() {
+            if !current.worktree.is_empty() {
+                worktrees.push(current.clone());
+                current = GitWorktreeInfo {
+                    worktree: String::new(),
+                    head: None,
+                    branch: None,
+                };
+            }
+        }
+    }
+    if !current.worktree.is_empty() {
+        worktrees.push(current);
+    }
+
+    Ok(worktrees)
+}
+
+#[tauri::command]
+pub async fn add_git_worktree(
+    directory: String,
+    path_str: String,
+    branch: String,
+    create_branch: Option<bool>,
+    state: State<'_, DesktopRuntime>,
+) -> Result<(), String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+
+    let mut args = vec!["worktree", "add"];
+    if create_branch.unwrap_or(false) {
+        args.push("-b");
+        args.push(&branch);
+    }
+    args.push(&path_str);
+
+    if !create_branch.unwrap_or(false) {
+        args.push(&branch);
+    }
+
+    run_git(&args, &root).await.map_err(|e| e.to_string())?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn remove_git_worktree(
+    directory: String,
+    path_str: String,
+    force: Option<bool>,
+    state: State<'_, DesktopRuntime>,
+) -> Result<(), String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+    let mut args = vec!["worktree", "remove", &path_str];
+    if force.unwrap_or(false) {
+        args.push("--force");
+    }
+    run_git(&args, &root).await.map_err(|e| e.to_string())?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn ensure_openchamber_ignored(
+    directory: String,
+    state: State<'_, DesktopRuntime>,
+) -> Result<(), String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+    let exclude_path = root.join(".git/info/exclude");
+
+    if let Some(parent) = exclude_path.parent() {
+        fs::create_dir_all(parent)
+            .await
+            .map_err(|e| e.to_string())?;
+    }
+
+    let entry = "/.openchamber/\n";
+    let mut content = fs::read_to_string(&exclude_path).await.unwrap_or_default();
+
+    if !content.contains("/.openchamber/") {
+        if !content.ends_with('\n') && !content.is_empty() {
+            content.push('\n');
+        }
+        content.push_str(entry);
+        fs::write(&exclude_path, content)
+            .await
+            .map_err(|e| e.to_string())?;
+    }
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn create_git_commit(
+    directory: String,
+    message: String,
+    add_all: Option<bool>,
+    files: Option<Vec<String>>,
+    state: State<'_, DesktopRuntime>,
+) -> Result<GitCommitResult, String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+
+    if add_all.unwrap_or(false) {
+        run_git(&["add", "."], &root)
+            .await
+            .map_err(|e| e.to_string())?;
+    } else if let Some(file_list) = files {
+        if !file_list.is_empty() {
+            let mut args = vec!["add"];
+            args.extend(file_list.iter().map(|s| s.as_str()));
+            run_git(&args, &root).await.map_err(|e| e.to_string())?;
+        }
+    }
+
+    run_git(&["commit", "-m", &message], &root)
+        .await
+        .map_err(|e| e.to_string())?;
+
+    let commit_hash = get_head_hash(&root).await.map_err(|e| e.to_string())?;
+    let branch_name = get_current_branch_name(&root)
+        .await
+        .unwrap_or_else(|_| "HEAD".to_string());
+
+    let stat_output = run_git(&["log", "-1", "--pretty=", "--shortstat"], &root)
+        .await
+        .unwrap_or_default();
+    let summary = parse_shortstat(&stat_output);
+
+    Ok(GitCommitResult {
+        success: true,
+        commit: commit_hash,
+        branch: branch_name,
+        summary,
+    })
+}
+
+#[tauri::command]
+pub async fn git_push(
+    directory: String,
+    remote: Option<String>,
+    branch: Option<String>,
+    options: Option<Value>,
+    state: State<'_, DesktopRuntime>,
+) -> Result<GitPushResult, String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+    let remote_name = remote.unwrap_or_else(|| "origin".to_string());
+    let mut branch_name = branch.unwrap_or_default();
+
+    let mut args = vec!["push".to_string(), remote_name.clone()];
+    if branch_name.is_empty() {
+        branch_name = get_current_branch_name(&root).await.unwrap_or_default();
+    }
+    if !branch_name.is_empty() {
+        args.push(branch_name.clone());
+    }
+
+    if let Some(extra) = options.as_ref() {
+        append_git_option(&mut args, extra);
+    }
+
+    let arg_refs: Vec<&str> = args.iter().map(|value| value.as_str()).collect();
+
+    // TODO: Streaming? Frontend types.ts defines GitPushResult, but doesn't mention streaming response for this call,
+    // but Stage 2 plan says "streaming progress events for long operations".
+    // Implementing simple await for now as `simple-git` wrapper does in `git-service.js`.
+
+    run_git(&arg_refs, &root).await.map_err(|e| e.to_string())?;
+
+    Ok(GitPushResult {
+        success: true,
+        pushed: if branch_name.is_empty() {
+            vec![]
+        } else {
+            vec![GitPushRef {
+                local: branch_name.clone(),
+                remote: format!("{}/{}", remote_name, branch_name),
+            }]
+        },
+        repo: remote_name,
+        ref_: if branch_name.is_empty() {
+            None
+        } else {
+            Some(branch_name)
+        },
+    })
+}
+
+#[tauri::command]
+pub async fn git_pull(
+    directory: String,
+    remote: Option<String>,
+    branch: Option<String>,
+    state: State<'_, DesktopRuntime>,
+) -> Result<GitPullResult, String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+    let r = remote.unwrap_or_else(|| "origin".to_string());
+    let b = branch.unwrap_or_default();
+
+    let mut args = vec!["pull", &r];
+    if !b.is_empty() {
+        args.push(&b);
+    }
+
+    let previous_head = get_head_hash(&root).await.ok();
+
+    run_git(&args, &root).await.map_err(|e| e.to_string())?;
+
+    let (summary, files) = if let Some(previous) = previous_head {
+        let new_head = get_head_hash(&root).await.unwrap_or(previous.clone());
+        if new_head != previous {
+            let range = format!("{previous}..{new_head}");
+            let summary = collect_shortstat_for_range(&root, &range)
+                .await
+                .unwrap_or_else(|_| GitCommitSummary {
+                    changes: 0,
+                    insertions: 0,
+                    deletions: 0,
+                });
+            let files = collect_changed_files_for_range(&root, &range)
+                .await
+                .unwrap_or_default();
+            (summary, files)
+        } else {
+            (
+                GitCommitSummary {
+                    changes: 0,
+                    insertions: 0,
+                    deletions: 0,
+                },
+                vec![],
+            )
+        }
+    } else {
+        (
+            GitCommitSummary {
+                changes: 0,
+                insertions: 0,
+                deletions: 0,
+            },
+            vec![],
+        )
+    };
+
+    Ok(GitPullResult {
+        success: true,
+        summary: summary.clone(),
+        files,
+        insertions: summary.insertions,
+        deletions: summary.deletions,
+    })
+}
+
+#[tauri::command]
+pub async fn git_fetch(
+    directory: String,
+    remote: Option<String>,
+    state: State<'_, DesktopRuntime>,
+) -> Result<(), String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+    let r = remote.unwrap_or_else(|| "origin".to_string());
+    run_git(&["fetch", &r], &root)
+        .await
+        .map_err(|e| e.to_string())?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn checkout_branch(
+    directory: String,
+    branch: String,
+    state: State<'_, DesktopRuntime>,
+) -> Result<(), String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+    run_git(&["checkout", &branch], &root)
+        .await
+        .map_err(|e| e.to_string())?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn create_branch(
+    directory: String,
+    name: String,
+    start_point: Option<String>,
+    state: State<'_, DesktopRuntime>,
+) -> Result<(), String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+    let start = start_point.unwrap_or_else(|| "HEAD".to_string());
+    run_git(&["checkout", "-b", &name, &start], &root)
+        .await
+        .map_err(|e| e.to_string())?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn get_git_log(
+    directory: String,
+    max_count: Option<i32>,
+    from: Option<String>,
+    to: Option<String>,
+    file: Option<String>,
+    state: State<'_, DesktopRuntime>,
+) -> Result<GitLogResponse, String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+
+    let max = max_count.unwrap_or(50).to_string();
+    let mut args = vec![
+        "log",
+        "--max-count",
+        &max,
+        "--date=iso",
+        "--pretty=format:%H%x1f%an%x1f%ae%x1f%ad%x1f%s%x1e",
+        "--shortstat",
+    ];
+
+    let range;
+    if let (Some(f), Some(t)) = (&from, &to) {
+        range = format!("{}..{}", f, t);
+        args.push(&range);
+    } else if let Some(f) = &from {
+        range = format!("{}..HEAD", f);
+        args.push(&range);
+    } else if let Some(t) = &to {
+        args.push(t);
+    }
+
+    if let Some(f) = &file {
+        args.push("--");
+        args.push(f);
+    }
+
+    let output = run_git(&args, &root).await.map_err(|e| e.to_string())?;
+
+    let mut entries = Vec::new();
+    let entries_raw: Vec<&str> = output.split('\x1e').collect();
+
+    let mut current_header = if !entries_raw.is_empty() {
+        entries_raw[0].trim()
+    } else {
+        ""
+    };
+
+    for i in 1..entries_raw.len() {
+        let chunk = entries_raw[i];
+
+        if current_header.is_empty() {
+            break;
+        }
+
+        let header_parts: Vec<&str> = current_header.split('\x1f').collect();
+        if header_parts.len() < 5 {
+            // Try to recover next header anyway before skipping
+            // But current_header is invalid, so we can't push an entry.
+            // We still need to update current_header for the next loop.
+        } else {
+            let hash = header_parts[0];
+            let name = header_parts[1];
+            let email = header_parts[2];
+            let date = header_parts[3];
+            let subject = header_parts[4];
+
+            let mut files_changed = 0;
+            let mut insertions = 0;
+            let mut deletions = 0;
+
+            if let Some(cap) = FILES_CHANGED_REGEX.captures(chunk) {
+                files_changed = cap[1].parse().unwrap_or(0);
+            }
+            if let Some(cap) = INSERTIONS_REGEX.captures(chunk) {
+                insertions = cap[1].parse().unwrap_or(0);
+            }
+            if let Some(cap) = DELETIONS_REGEX.captures(chunk) {
+                deletions = cap[1].parse().unwrap_or(0);
+            }
+
+            entries.push(GitLogEntry {
+                hash: hash.to_string(),
+                author_name: name.to_string(),
+                author_email: email.to_string(),
+                date: date.to_string(),
+                message: subject.to_string(),
+                body: String::new(),
+                refs: String::new(),
+                files_changed,
+                insertions,
+                deletions,
+            });
+        }
+
+        // Find next header by looking for the line containing \x1f (separator used in format)
+        // The chunk contains stats then the next header.
+        current_header = "";
+        for line in chunk.lines().rev() {
+            let trimmed = line.trim();
+            if !trimmed.is_empty() && trimmed.contains('\x1f') {
+                current_header = trimmed;
+                break;
+            }
+        }
+    }
+
+    if entries.is_empty() && !output.is_empty() {
+        for line in output.lines() {
+            let parts: Vec<&str> = line.split('\x1f').collect();
+            if parts.len() >= 5 {
+                entries.push(GitLogEntry {
+                    hash: parts[0].to_string(),
+                    author_name: parts[1].to_string(),
+                    author_email: parts[2].to_string(),
+                    date: parts[3].to_string(),
+                    message: parts[4].to_string(),
+                    body: "".to_string(),
+                    refs: "".to_string(),
+                    files_changed: 0,
+                    insertions: 0,
+                    deletions: 0,
+                });
+            }
+        }
+    }
+
+    Ok(GitLogResponse {
+        all: entries.clone(),
+        latest: entries.first().cloned(),
+        total: entries.len() as i32,
+    })
+}
+
+#[tauri::command]
+pub async fn get_commit_files(
+    directory: String,
+    hash: String,
+    state: State<'_, DesktopRuntime>,
+) -> Result<GitCommitFilesResponse, String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+
+    // Get numstat for insertions/deletions per file
+    let numstat_output = run_git(&["show", "--numstat", "--format=", &hash], &root)
+        .await
+        .map_err(|e| e.to_string())?;
+
+    let mut files = Vec::new();
+
+    for line in numstat_output.lines() {
+        let parts: Vec<&str> = line.split('\t').collect();
+        if parts.len() < 3 {
+            continue;
+        }
+
+        let insertions_raw = parts[0];
+        let deletions_raw = parts[1];
+        let file_path = parts[2..].join("\t");
+
+        if file_path.is_empty() {
+            continue;
+        }
+
+        // Binary files show '-' for stats
+        let is_binary = insertions_raw == "-" && deletions_raw == "-";
+        let insertions = if insertions_raw == "-" {
+            0
+        } else {
+            insertions_raw.parse().unwrap_or(0)
+        };
+        let deletions = if deletions_raw == "-" {
+            0
+        } else {
+            deletions_raw.parse().unwrap_or(0)
+        };
+
+        files.push(CommitFileEntry {
+            path: file_path,
+            insertions,
+            deletions,
+            is_binary,
+            change_type: "M".to_string(), // Default, will update below
+        });
+    }
+
+    // Get accurate change types using --name-status
+    let name_status_output = run_git(&["show", "--name-status", "--format=", &hash], &root)
+        .await
+        .unwrap_or_default();
+
+    let mut status_map: HashMap<String, String> = HashMap::new();
+    for line in name_status_output.lines() {
+        let parts: Vec<&str> = line.split('\t').collect();
+        if parts.len() >= 2 {
+            let status = parts[0].chars().next().unwrap_or('M').to_string();
+            let path = parts.last().unwrap_or(&"").to_string();
+            status_map.insert(path, status);
+        }
+    }
+
+    // Update change types
+    for file in &mut files {
+        let base_path = if file.path.contains(" => ") {
+            file.path
+                .split(" => ")
+                .last()
+                .unwrap_or(&file.path)
+                .replace(['{', '}'], "")
+        } else {
+            file.path.clone()
+        };
+
+        if let Some(status) = status_map.get(&base_path).or_else(|| status_map.get(&file.path)) {
+            file.change_type = status.clone();
+        }
+    }
+
+    Ok(GitCommitFilesResponse { files })
+}
+
+#[tauri::command]
+pub async fn get_git_identities() -> Result<Vec<GitIdentityProfile>, String> {
+    load_identities().await.map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub async fn create_git_identity(
+    profile: GitIdentityProfile,
+) -> Result<GitIdentityProfile, String> {
+    let mut profiles = load_identities().await.map_err(|e| e.to_string())?;
+    if profiles.iter().any(|p| p.id == profile.id) {
+        return Err(format!("Profile with ID {} already exists", profile.id));
+    }
+    profiles.push(profile.clone());
+    save_identities(profiles).await.map_err(|e| e.to_string())?;
+    Ok(profile)
+}
+
+#[tauri::command]
+pub async fn update_git_identity(
+    id: String,
+    updates: GitIdentityProfile,
+) -> Result<GitIdentityProfile, String> {
+    let mut profiles = load_identities().await.map_err(|e| e.to_string())?;
+    if let Some(idx) = profiles.iter().position(|p| p.id == id) {
+        profiles[idx] = updates.clone();
+        save_identities(profiles).await.map_err(|e| e.to_string())?;
+        Ok(updates)
+    } else {
+        Err(format!("Profile with ID {} not found", id))
+    }
+}
+
+#[tauri::command]
+pub async fn delete_git_identity(id: String) -> Result<(), String> {
+    let mut profiles = load_identities().await.map_err(|e| e.to_string())?;
+    let len = profiles.len();
+    profiles.retain(|p| p.id != id);
+    if profiles.len() == len {
+        return Err(format!("Profile with ID {} not found", id));
+    }
+    save_identities(profiles).await.map_err(|e| e.to_string())?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn get_current_git_identity(
+    directory: String,
+    state: State<'_, DesktopRuntime>,
+) -> Result<GitIdentitySummary, String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+
+    let user_name = run_git(&["config", "user.name"], &root).await.ok();
+    let user_email = run_git(&["config", "user.email"], &root).await.ok();
+    let ssh_command = run_git(&["config", "core.sshCommand"], &root).await.ok();
+
+    Ok(GitIdentitySummary {
+        user_name: user_name.filter(|s| !s.is_empty()),
+        user_email: user_email.filter(|s| !s.is_empty()),
+        ssh_command: ssh_command.filter(|s| !s.is_empty()),
+    })
+}
+
+#[tauri::command]
+pub async fn set_git_identity(
+    directory: String,
+    profile_id: String,
+    state: State<'_, DesktopRuntime>,
+) -> Result<GitIdentityProfile, String> {
+    let root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+    let profiles = load_identities().await.map_err(|e| e.to_string())?;
+
+    let profile = profiles
+        .into_iter()
+        .find(|p| p.id == profile_id)
+        .ok_or_else(|| format!("Profile {} not found", profile_id))?;
+
+    run_git(
+        &["config", "--local", "user.name", &profile.user_name],
+        &root,
+    )
+    .await
+    .map_err(|e| e.to_string())?;
+    run_git(
+        &["config", "--local", "user.email", &profile.user_email],
+        &root,
+    )
+    .await
+    .map_err(|e| e.to_string())?;
+
+    if let Some(key) = &profile.ssh_key {
+        let cmd = format!("ssh -i {}", key);
+        run_git(&["config", "--local", "core.sshCommand", &cmd], &root)
+            .await
+            .map_err(|e| e.to_string())?;
+    } else {
+        let _ = run_git(&["config", "--local", "--unset", "core.sshCommand"], &root).await;
+    }
+
+    Ok(profile)
+}
+
+#[tauri::command]
+pub async fn generate_commit_message(
+    directory: String,
+    files: Vec<String>,
+    state: State<'_, DesktopRuntime>,
+) -> Result<CommitMessageResponse, String> {
+    let _root = validate_git_path(&directory, state.settings())
+        .await
+        .map_err(|e| e.to_string())?;
+
+    // 1. Collect diffs
+    let mut diff_summaries = String::new();
+    for file in files {
+        if let Ok(diff) =
+            get_git_diff(directory.clone(), file.clone(), None, None, state.clone()).await
+        {
+            let trimmed = if diff.len() > 4000 {
+                format!("{}\n...", &diff[..4000])
+            } else {
+                diff
+            };
+            diff_summaries.push_str(&format!("FILE: {}\n{}\n\n", file, trimmed));
+        }
+    }
+
+    if diff_summaries.is_empty() {
+        return Err("No diffs available for selected files".to_string());
+    }
+
+    // 2. Construct prompt (matching server/index.js)
+    let prompt = format!(
+        r#"You are drafting git commit notes for this codebase. Respond in JSON of the shape {{"subject": string, "highlights": string[]}} (ONLY the JSON in response, no markdown wrappers or anything except JSON) with these rules:
+- subject follows our convention: type[optional-scope]: summary (examples: "feat: add diff virtualization", "fix(chat): restore enter key handling")
+- allowed types: feat, fix, chore, style, refactor, perf, docs, test, build, ci (choose the best match or fallback to chore)
+- summary must be imperative, concise, <= 70 characters, no trailing punctuation
+- scope is optional; include only when obvious from filenames/folders; do not invent scopes
+- focus on the most impactful user-facing change; if multiple capabilities ship together, align the subject with the dominant theme and use highlights to cover the other major outcomes
+- highlights array should contain 2-3 plain sentences (<= 90 chars each) that describe distinct features or UI changes users will notice (e.g. "Add per-file revert action in Changes list"). Avoid subjective benefit statements, marketing tone, repeating the subject, or referencing helper function names. Highlight additions such as new controls/buttons, new actions (e.g. revert), or stored state changes explicitly. Skip highlights if fewer than two meaningful points exist.
+- text must be plain (no markdown bullets); each highlight should start with an uppercase verb
+
+Diff summary:
+{}"#,
+        diff_summaries
+    );
+
+    // 3. Call API
+    let client = Client::new();
+    let res = client
+        .post("https://opencode.ai/zen/v1/chat/completions")
+        .json(&serde_json::json!({
+            "model": "big-pickle",
+            "messages": [{ "role": "user", "content": prompt }],
+            "max_tokens": 3000,
+            "stream": false,
+            "reasoning": {
+                "effort": "low"
+            }
+        }))
+        .send()
+        .await
+        .map_err(|e| e.to_string())?;
+
+    if !res.status().is_success() {
+        return Err(format!("API request failed: {}", res.status()));
+    }
+
+    let body: serde_json::Value = res.json().await.map_err(|e| e.to_string())?;
+    let raw_content = body["choices"][0]["message"]["content"]
+        .as_str()
+        .unwrap_or("")
+        .trim();
+
+    // 4. Parse JSON
+    // Strip markdown code blocks if present
+    let cleaned = raw_content
+        .trim_start_matches("```json")
+        .trim_start_matches("```")
+        .trim_end_matches("```")
+        .trim();
+
+    let message: GeneratedCommitMessage =
+        serde_json::from_str(cleaned).map_err(|e| format!("Failed to parse AI response: {}", e))?;
+
+    Ok(CommitMessageResponse { message })
+}
diff --git a/packages/desktop/src-tauri/src/commands/logs.rs b/packages/desktop/src-tauri/src/commands/logs.rs
new file mode 100644
index 00000000..8482b3eb
--- /dev/null
+++ b/packages/desktop/src-tauri/src/commands/logs.rs
@@ -0,0 +1,25 @@
+use crate::logging::log_file_path;
+use serde::Serialize;
+use tokio::fs;
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct DesktopLogFile {
+    pub file_name: String,
+    pub content: String,
+}
+
+#[tauri::command]
+pub async fn fetch_desktop_logs() -> Result<DesktopLogFile, String> {
+    let path = log_file_path().ok_or_else(|| "Log location unavailable".to_string())?;
+    let content = fs::read_to_string(&path)
+        .await
+        .map_err(|err| format!("Failed to read log file: {err}"))?;
+    let file_name = path
+        .file_name()
+        .and_then(|value| value.to_str())
+        .unwrap_or("desktop.log")
+        .to_string();
+
+    Ok(DesktopLogFile { file_name, content })
+}
diff --git a/packages/desktop/src-tauri/src/commands/mod.rs b/packages/desktop/src-tauri/src/commands/mod.rs
new file mode 100644
index 00000000..f877e819
--- /dev/null
+++ b/packages/desktop/src-tauri/src/commands/mod.rs
@@ -0,0 +1,7 @@
+pub mod files;
+pub mod git;
+pub mod logs;
+pub mod permissions;
+pub mod settings;
+pub mod terminal;
+pub mod notifications;
diff --git a/packages/desktop/src-tauri/src/commands/notifications.rs b/packages/desktop/src-tauri/src/commands/notifications.rs
new file mode 100644
index 00000000..7ed331cf
--- /dev/null
+++ b/packages/desktop/src-tauri/src/commands/notifications.rs
@@ -0,0 +1,37 @@
+use serde::Deserialize;
+use tauri::{AppHandle, Runtime};
+use tauri_plugin_notification::NotificationExt;
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct NotificationPayload {
+    pub title: Option<String>,
+    pub body: Option<String>,
+}
+
+#[tauri::command]
+pub async fn desktop_notify<R: Runtime>(
+    app: AppHandle<R>,
+    payload: Option<NotificationPayload>,
+) -> Result<bool, String> {
+    let title = payload
+        .as_ref()
+        .and_then(|p| p.title.as_deref())
+        .unwrap_or("OpenChamber");
+    let body = payload
+        .as_ref()
+        .and_then(|p| p.body.as_deref())
+        .unwrap_or("Task completed");
+
+    match app
+        .notification()
+        .builder()
+        .title(title)
+        .body(body)
+        .sound("Glass")
+        .show()
+    {
+        Ok(_) => Ok(true),
+        Err(e) => Err(e.to_string()),
+    }
+}
diff --git a/packages/desktop/src-tauri/src/commands/permissions.rs b/packages/desktop/src-tauri/src/commands/permissions.rs
new file mode 100644
index 00000000..0ed35905
--- /dev/null
+++ b/packages/desktop/src-tauri/src/commands/permissions.rs
@@ -0,0 +1,209 @@
+use log::{info, warn};
+use serde::{Deserialize, Serialize};
+use tauri::AppHandle;
+use tauri::State;
+
+use crate::DesktopRuntime;
+
+#[derive(Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct DirectoryPermissionRequest {
+    path: String,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct DirectoryPermissionResult {
+    success: bool,
+    path: Option<String>,
+    error: Option<String>,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct StartAccessingResult {
+    success: bool,
+    error: Option<String>,
+}
+
+/// Process directory selection from frontend
+/// Updates settings with lastDirectory
+/// OpenCode restart is triggered separately via /api/opencode/directory endpoint
+#[tauri::command]
+pub async fn process_directory_selection(
+    path: String,
+    state: State<'_, DesktopRuntime>,
+) -> Result<DirectoryPermissionResult, String> {
+    use std::path::PathBuf;
+
+    // Validate directory exists
+    let path_buf = PathBuf::from(&path);
+    if !path_buf.exists() {
+        return Ok(DirectoryPermissionResult {
+            success: false,
+            path: None,
+            error: Some("Directory does not exist".to_string()),
+        });
+    }
+
+    if !path_buf.is_dir() {
+        return Ok(DirectoryPermissionResult {
+            success: false,
+            path: None,
+            error: Some("Path is not a directory".to_string()),
+        });
+    }
+
+    // Update settings with lastDirectory
+    let mut settings = state
+        .settings()
+        .load()
+        .await
+        .map_err(|e| format!("Failed to load settings: {}", e))?;
+
+    if let Some(obj) = settings.as_object_mut() {
+        obj.insert(
+            "lastDirectory".to_string(),
+            serde_json::Value::String(path.clone()),
+        );
+    }
+
+    state
+        .settings()
+        .save(settings)
+        .await
+        .map_err(|e| format!("Failed to save updated settings: {}", e))?;
+
+    info!(
+        "[permissions] Updated settings with lastDirectory: {}",
+        path
+    );
+
+    Ok(DirectoryPermissionResult {
+        success: true,
+        path: Some(path),
+        error: None,
+    })
+}
+
+/// Legacy directory picker command (frontend handles actual dialog)
+#[tauri::command]
+pub async fn pick_directory(
+    _app_handle: AppHandle,
+    _state: State<'_, DesktopRuntime>,
+) -> Result<DirectoryPermissionResult, String> {
+    Ok(DirectoryPermissionResult {
+        success: false,
+        path: None,
+        error: Some(
+            "Use requestDirectoryAccess instead - it handles native dialog properly".to_string(),
+        ),
+    })
+}
+
+/// Request directory access (desktop implementation)
+/// For unsandboxed apps, just validates the path is accessible
+#[tauri::command]
+pub async fn request_directory_access(
+    request: DirectoryPermissionRequest,
+    _state: State<'_, DesktopRuntime>,
+) -> Result<DirectoryPermissionResult, String> {
+    let path = request.path;
+
+    let path_buf = std::path::PathBuf::from(&path);
+    if !path_buf.exists() {
+        return Ok(DirectoryPermissionResult {
+            success: false,
+            path: None,
+            error: Some("Directory does not exist".to_string()),
+        });
+    }
+
+    if !path_buf.is_dir() {
+        return Ok(DirectoryPermissionResult {
+            success: false,
+            path: None,
+            error: Some("Path is not a directory".to_string()),
+        });
+    }
+
+    // For unsandboxed apps, no bookmark needed - just verify access
+    match std::fs::read_dir(&path_buf) {
+        Ok(_) => Ok(DirectoryPermissionResult {
+            success: true,
+            path: Some(path),
+            error: None,
+        }),
+        Err(e) => Ok(DirectoryPermissionResult {
+            success: false,
+            path: None,
+            error: Some(format!("Cannot access directory: {}", e)),
+        }),
+    }
+}
+
+/// Start accessing directory (desktop implementation)
+#[tauri::command]
+pub async fn start_accessing_directory(
+    path: String,
+    _state: State<'_, DesktopRuntime>,
+) -> Result<StartAccessingResult, String> {
+    // Check if directory exists and is accessible
+    let path_buf = std::path::PathBuf::from(&path);
+
+    if !path_buf.exists() {
+        return Ok(StartAccessingResult {
+            success: false,
+            error: Some("Directory does not exist".to_string()),
+        });
+    }
+
+    if !path_buf.is_dir() {
+        return Ok(StartAccessingResult {
+            success: false,
+            error: Some("Path is not a directory".to_string()),
+        });
+    }
+
+    // Try to read the directory to verify access
+    match std::fs::read_dir(&path_buf) {
+        Ok(_) => {
+            info!("Successfully started accessing directory: {}", path);
+            Ok(StartAccessingResult {
+                success: true,
+                error: None,
+            })
+        }
+        Err(e) => {
+            warn!("Failed to access directory {}: {}", path, e);
+            Ok(StartAccessingResult {
+                success: false,
+                error: Some(format!("Failed to access directory: {}", e)),
+            })
+        }
+    }
+}
+
+/// Stop accessing directory (desktop implementation)
+#[tauri::command]
+pub async fn stop_accessing_directory(
+    _path: String,
+    _state: State<'_, DesktopRuntime>,
+) -> Result<StartAccessingResult, String> {
+    // For Stage 1, just confirm the operation
+    // Full implementation would call stopAccessingSecurityScopedResource
+    info!("Stopped accessing directory");
+    Ok(StartAccessingResult {
+        success: true,
+        error: None,
+    })
+}
+
+/// Restore bookmarks on app startup (no-op for unsandboxed apps)
+#[tauri::command]
+pub async fn restore_bookmarks_on_startup(_state: State<'_, DesktopRuntime>) -> Result<(), String> {
+    // For unsandboxed apps, no bookmarks needed
+    // Directory access is restored from settings.lastDirectory
+    info!("[permissions] Bookmark restore not needed for unsandboxed app");
+    Ok(())
+}
diff --git a/packages/desktop/src-tauri/src/commands/settings.rs b/packages/desktop/src-tauri/src/commands/settings.rs
new file mode 100644
index 00000000..d8167d1e
--- /dev/null
+++ b/packages/desktop/src-tauri/src/commands/settings.rs
@@ -0,0 +1,343 @@
+use serde::{Deserialize, Serialize};
+use serde_json::{json, Value};
+use std::collections::HashSet;
+use tauri::State;
+
+use crate::DesktopRuntime;
+
+#[derive(Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SettingsLoadResult {
+    settings: Value,
+    source: String,
+}
+
+#[derive(Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct RestartResult {
+    restarted: bool,
+}
+
+/// Load settings from disk (matches Express handler behavior)
+#[tauri::command]
+pub async fn load_settings(state: State<'_, DesktopRuntime>) -> Result<SettingsLoadResult, String> {
+    let settings = state
+        .settings()
+        .load()
+        .await
+        .map_err(|e| format!("Failed to load settings: {}", e))?;
+
+    Ok(SettingsLoadResult {
+        settings,
+        source: "desktop".to_string(),
+    })
+}
+
+/// Save settings to disk with merge logic matching Express implementation
+#[tauri::command]
+pub async fn save_settings(
+    changes: Value,
+    state: State<'_, DesktopRuntime>,
+) -> Result<Value, String> {
+    // Load current settings
+    let current = state
+        .settings()
+        .load()
+        .await
+        .map_err(|e| format!("Failed to load current settings: {}", e))?;
+
+    // Sanitize incoming changes
+    let sanitized_changes = sanitize_settings_update(&changes);
+
+    // Merge changes into current settings
+    let merged = merge_persisted_settings(&current, &sanitized_changes);
+
+    // Save merged settings
+    state
+        .settings()
+        .save(merged.clone())
+        .await
+        .map_err(|e| format!("Failed to save settings: {}", e))?;
+
+    // Format response
+    Ok(format_settings_response(&merged))
+}
+
+/// Restart OpenCode CLI (matches Express /api/config/reload)
+#[tauri::command]
+pub async fn restart_opencode(state: State<'_, DesktopRuntime>) -> Result<RestartResult, String> {
+    state
+        .opencode
+        .restart()
+        .await
+        .map_err(|e| format!("Failed to restart OpenCode: {}", e))?;
+
+    Ok(RestartResult { restarted: true })
+}
+
+/// Sanitize settings update payload (port of Express sanitizeSettingsUpdate)
+fn sanitize_settings_update(payload: &Value) -> Value {
+    let mut result = json!({});
+
+    if let Some(obj) = payload.as_object() {
+        let result_obj = result.as_object_mut().unwrap();
+
+        // String fields
+        if let Some(Value::String(s)) = obj.get("themeId") {
+            if !s.is_empty() {
+                result_obj.insert("themeId".to_string(), json!(s));
+            }
+        }
+        if let Some(Value::String(s)) = obj.get("themeVariant") {
+            if s == "light" || s == "dark" {
+                result_obj.insert("themeVariant".to_string(), json!(s));
+            }
+        }
+        if let Some(Value::String(s)) = obj.get("lightThemeId") {
+            if !s.is_empty() {
+                result_obj.insert("lightThemeId".to_string(), json!(s));
+            }
+        }
+        if let Some(Value::String(s)) = obj.get("darkThemeId") {
+            if !s.is_empty() {
+                result_obj.insert("darkThemeId".to_string(), json!(s));
+            }
+        }
+        if let Some(Value::String(s)) = obj.get("lastDirectory") {
+            if !s.is_empty() {
+                result_obj.insert("lastDirectory".to_string(), json!(s));
+            }
+        }
+        if let Some(Value::String(s)) = obj.get("homeDirectory") {
+            if !s.is_empty() {
+                result_obj.insert("homeDirectory".to_string(), json!(s));
+            }
+        }
+        if let Some(Value::String(s)) = obj.get("uiFont") {
+            if !s.is_empty() {
+                result_obj.insert("uiFont".to_string(), json!(s));
+            }
+        }
+        if let Some(Value::String(s)) = obj.get("monoFont") {
+            if !s.is_empty() {
+                result_obj.insert("monoFont".to_string(), json!(s));
+            }
+        }
+        if let Some(Value::String(s)) = obj.get("markdownDisplayMode") {
+            if !s.is_empty() {
+                result_obj.insert("markdownDisplayMode".to_string(), json!(s));
+            }
+        }
+
+        // Boolean fields
+        if let Some(Value::Bool(b)) = obj.get("useSystemTheme") {
+            result_obj.insert("useSystemTheme".to_string(), json!(b));
+        }
+        if let Some(Value::Bool(b)) = obj.get("showReasoningTraces") {
+            result_obj.insert("showReasoningTraces".to_string(), json!(b));
+        }
+
+        // Array fields
+        if let Some(arr) = obj.get("approvedDirectories") {
+            result_obj.insert(
+                "approvedDirectories".to_string(),
+                normalize_string_array(arr),
+            );
+        }
+        if let Some(arr) = obj.get("securityScopedBookmarks") {
+            result_obj.insert(
+                "securityScopedBookmarks".to_string(),
+                normalize_string_array(arr),
+            );
+        }
+        if let Some(arr) = obj.get("pinnedDirectories") {
+            result_obj.insert("pinnedDirectories".to_string(), normalize_string_array(arr));
+        }
+
+        // Typography sizes object (partial)
+        if let Some(typo) = obj.get("typographySizes") {
+            if let Some(sanitized) = sanitize_typography_sizes_partial(typo) {
+                result_obj.insert("typographySizes".to_string(), sanitized);
+            }
+        }
+    }
+
+    result
+}
+
+/// Merge persisted settings (port of Express mergePersistedSettings)
+fn merge_persisted_settings(current: &Value, changes: &Value) -> Value {
+    let mut result = current.clone();
+
+    if let (Some(result_obj), Some(changes_obj)) = (result.as_object_mut(), changes.as_object()) {
+        // First apply all changes
+        for (key, value) in changes_obj {
+            result_obj.insert(key.clone(), value.clone());
+        }
+
+        // Build approvedDirectories from base + additional
+        let base_approved = if let Some(arr) = changes_obj.get("approvedDirectories") {
+            extract_string_vec(arr)
+        } else if let Some(arr) = current.get("approvedDirectories") {
+            extract_string_vec(arr)
+        } else {
+            vec![]
+        };
+
+        let mut additional_approved = vec![];
+        if let Some(Value::String(s)) = changes_obj.get("lastDirectory") {
+            if !s.is_empty() {
+                additional_approved.push(s.clone());
+            }
+        }
+        if let Some(Value::String(s)) = changes_obj.get("homeDirectory") {
+            if !s.is_empty() {
+                additional_approved.push(s.clone());
+            }
+        }
+
+        let mut approved_set: HashSet<String> = base_approved.into_iter().collect();
+        for item in additional_approved {
+            approved_set.insert(item);
+        }
+        let approved_vec: Vec<String> = approved_set.into_iter().collect();
+        result_obj.insert("approvedDirectories".to_string(), json!(approved_vec));
+
+        // Security scoped bookmarks
+        let base_bookmarks = if let Some(arr) = changes_obj.get("securityScopedBookmarks") {
+            extract_string_vec(arr)
+        } else if let Some(arr) = current.get("securityScopedBookmarks") {
+            extract_string_vec(arr)
+        } else {
+            vec![]
+        };
+        let bookmarks_set: HashSet<String> = base_bookmarks.into_iter().collect();
+        let bookmarks_vec: Vec<String> = bookmarks_set.into_iter().collect();
+        result_obj.insert("securityScopedBookmarks".to_string(), json!(bookmarks_vec));
+
+        // Merge typography sizes if present
+        if changes_obj.contains_key("typographySizes") {
+            let current_typo = current
+                .get("typographySizes")
+                .and_then(|v| v.as_object())
+                .cloned()
+                .unwrap_or_default();
+            let changes_typo = changes_obj
+                .get("typographySizes")
+                .and_then(|v| v.as_object())
+                .cloned()
+                .unwrap_or_default();
+
+            let mut merged_typo = current_typo;
+            for (key, value) in changes_typo {
+                merged_typo.insert(key, value);
+            }
+            result_obj.insert("typographySizes".to_string(), json!(merged_typo));
+        }
+    }
+
+    result
+}
+
+/// Format settings response (port of Express formatSettingsResponse)
+fn format_settings_response(settings: &Value) -> Value {
+    let mut result = sanitize_settings_update(settings);
+
+    if let Some(obj) = result.as_object_mut() {
+        // Ensure array fields are normalized
+        obj.insert(
+            "approvedDirectories".to_string(),
+            normalize_string_array(settings.get("approvedDirectories").unwrap_or(&json!([]))),
+        );
+        obj.insert(
+            "securityScopedBookmarks".to_string(),
+            normalize_string_array(
+                settings
+                    .get("securityScopedBookmarks")
+                    .unwrap_or(&json!([])),
+            ),
+        );
+        obj.insert(
+            "pinnedDirectories".to_string(),
+            normalize_string_array(settings.get("pinnedDirectories").unwrap_or(&json!([]))),
+        );
+
+        // Typography sizes
+        if let Some(sanitized_typo) = sanitize_typography_sizes_partial(
+            settings.get("typographySizes").unwrap_or(&json!(null)),
+        ) {
+            obj.insert("typographySizes".to_string(), sanitized_typo);
+        }
+
+        // showReasoningTraces with fallback
+        let show_reasoning = settings
+            .get("showReasoningTraces")
+            .and_then(|v| v.as_bool())
+            .or_else(|| {
+                // Get showReasoningTraces from sanitized result instead of the current mutable borrow
+                if let Some(Value::Bool(b)) = obj.get("showReasoningTraces") {
+                    Some(*b)
+                } else {
+                    None
+                }
+            })
+            .unwrap_or(false);
+        obj.insert("showReasoningTraces".to_string(), json!(show_reasoning));
+    }
+
+    result
+}
+
+/// Normalize string array helper
+fn normalize_string_array(input: &Value) -> Value {
+    if let Some(arr) = input.as_array() {
+        let strings: Vec<String> = arr
+            .iter()
+            .filter_map(|v| v.as_str())
+            .filter(|s| !s.is_empty())
+            .map(|s| s.to_string())
+            .collect();
+        let unique: HashSet<String> = strings.into_iter().collect();
+        json!(unique.into_iter().collect::<Vec<_>>())
+    } else {
+        json!([])
+    }
+}
+
+/// Sanitize typography sizes partial helper
+fn sanitize_typography_sizes_partial(input: &Value) -> Option<Value> {
+    if let Some(obj) = input.as_object() {
+        let mut result = serde_json::Map::new();
+        let mut populated = false;
+
+        for key in &["markdown", "code", "uiHeader", "uiLabel", "meta", "micro"] {
+            if let Some(Value::String(s)) = obj.get(*key) {
+                if !s.is_empty() {
+                    result.insert(key.to_string(), json!(s));
+                    populated = true;
+                }
+            }
+        }
+
+        if populated {
+            Some(json!(result))
+        } else {
+            None
+        }
+    } else {
+        None
+    }
+}
+
+/// Extract string vector from JSON value
+fn extract_string_vec(value: &Value) -> Vec<String> {
+    if let Some(arr) = value.as_array() {
+        arr.iter()
+            .filter_map(|v| v.as_str())
+            .filter(|s| !s.is_empty())
+            .map(|s| s.to_string())
+            .collect()
+    } else {
+        vec![]
+    }
+}
diff --git a/packages/desktop/src-tauri/src/commands/terminal.rs b/packages/desktop/src-tauri/src/commands/terminal.rs
new file mode 100644
index 00000000..bca4563c
--- /dev/null
+++ b/packages/desktop/src-tauri/src/commands/terminal.rs
@@ -0,0 +1,308 @@
+use log::error;
+use portable_pty::{Child, CommandBuilder, MasterPty, NativePtySystem, PtySize, PtySystem};
+use serde::{Deserialize, Serialize};
+use std::{
+    collections::HashMap,
+    env,
+    io::{Read, Write},
+    path::{Path, PathBuf},
+    sync::{Arc, Mutex},
+    thread,
+};
+use tauri::{Emitter, State, Window};
+
+const DEFAULT_SHELL: &str = "/bin/zsh";
+const DEFAULT_TERM: &str = "xterm-256color";
+const DEFAULT_COLORTERM: &str = "truecolor";
+const DEFAULT_LOCALE: &str = "en_US.UTF-8";
+const TERM_PROGRAM_NAME: &str = "OpenChamber";
+const TERM_PROGRAM_VERSION: &str = env!("CARGO_PKG_VERSION");
+
+pub struct TerminalSession {
+    pub master: Box<dyn MasterPty + Send>,
+    pub writer: Arc<Mutex<Box<dyn Write + Send>>>,
+    pub child: Arc<Mutex<Box<dyn Child + Send + Sync>>>,
+}
+
+pub struct TerminalState {
+    pub sessions: Arc<Mutex<HashMap<String, TerminalSession>>>,
+}
+
+impl TerminalState {
+    pub fn new() -> Self {
+        Self {
+            sessions: Arc::new(Mutex::new(HashMap::new())),
+        }
+    }
+}
+
+#[derive(Deserialize)]
+pub struct CreateTerminalPayload {
+    pub cols: u16,
+    pub rows: u16,
+    pub cwd: Option<String>,
+}
+
+#[derive(Serialize)]
+pub struct CreateTerminalResponse {
+    pub session_id: String,
+}
+
+#[tauri::command]
+pub async fn create_terminal_session(
+    payload: CreateTerminalPayload,
+    state: State<'_, TerminalState>,
+    window: Window,
+) -> Result<CreateTerminalResponse, String> {
+    let pty_system = NativePtySystem::default();
+    let size = PtySize {
+        rows: payload.rows,
+        cols: payload.cols,
+        pixel_width: 0,
+        pixel_height: 0,
+    };
+
+    let working_dir = resolve_working_directory(payload.cwd.as_deref())?;
+    let shell_path = resolve_shell();
+
+    let mut cmd = CommandBuilder::new(&shell_path);
+    if shell_accepts_login_flag(&shell_path) {
+        cmd.arg("-l");
+    }
+    if let Some(cwd) = working_dir.to_str() {
+        cmd.cwd(cwd);
+    }
+    apply_terminal_environment(&mut cmd, &shell_path);
+
+    let pair = pty_system.openpty(size).map_err(|e| e.to_string())?;
+    let child = pair
+        .slave
+        .spawn_command(cmd)
+        .map_err(|e| format!("Failed to spawn shell: {e}"))?;
+    drop(pair.slave);
+
+    let reader = pair
+        .master
+        .try_clone_reader()
+        .map_err(|e| format!("Failed to clone PTY reader: {e}"))?;
+    let writer = Arc::new(Mutex::new(
+        pair.master
+            .take_writer()
+            .map_err(|e| format!("Failed to take PTY writer: {e}"))?,
+    ));
+    let master = pair.master;
+    let child = Arc::new(Mutex::new(child));
+
+    let session_id = uuid::Uuid::new_v4().to_string();
+    state.sessions.lock().unwrap().insert(
+        session_id.clone(),
+        TerminalSession {
+            master,
+            writer: writer.clone(),
+            child: child.clone(),
+        },
+    );
+
+    spawn_reader_thread(reader, window.clone(), session_id.clone());
+    spawn_exit_watcher(child, window, state.sessions.clone(), session_id.clone());
+
+    Ok(CreateTerminalResponse { session_id })
+}
+
+#[tauri::command]
+pub async fn send_terminal_input(
+    session_id: String,
+    data: String,
+    state: State<'_, TerminalState>,
+) -> Result<(), String> {
+    let sessions = state.sessions.lock().unwrap();
+    let Some(session) = sessions.get(&session_id) else {
+        return Err("Terminal session not found".to_string());
+    };
+
+    let mut writer = session
+        .writer
+        .lock()
+        .map_err(|_| "Terminal busy".to_string())?;
+    writer
+        .write_all(data.as_bytes())
+        .map_err(|e| format!("Failed to write to terminal: {e}"))?;
+    writer
+        .flush()
+        .map_err(|e| format!("Failed to flush terminal input: {e}"))?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn resize_terminal(
+    session_id: String,
+    cols: u16,
+    rows: u16,
+    state: State<'_, TerminalState>,
+) -> Result<(), String> {
+    let mut sessions = state.sessions.lock().unwrap();
+    let Some(session) = sessions.get_mut(&session_id) else {
+        return Err("Terminal session not found".to_string());
+    };
+
+    session
+        .master
+        .resize(PtySize {
+            rows,
+            cols,
+            pixel_width: 0,
+            pixel_height: 0,
+        })
+        .map_err(|e| format!("Failed to resize terminal: {e}"))?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn close_terminal(
+    session_id: String,
+    state: State<'_, TerminalState>,
+) -> Result<(), String> {
+    let session = {
+        let mut sessions = state.sessions.lock().unwrap();
+        sessions.remove(&session_id)
+    };
+
+    if let Some(session) = session {
+        if let Ok(mut child) = session.child.lock() {
+            let _ = child.kill();
+        }
+    }
+
+    Ok(())
+}
+
+fn spawn_reader_thread(mut reader: Box<dyn Read + Send>, window: Window, session_id: String) {
+    thread::spawn(move || {
+        let mut buffer = [0u8; 4096];
+        let event_name = format!("terminal://{}", session_id);
+        loop {
+            match reader.read(&mut buffer) {
+                Ok(0) => break,
+                Ok(n) => {
+                    let data = String::from_utf8_lossy(&buffer[..n]).to_string();
+                    if data.is_empty() {
+                        continue;
+                    }
+
+                    if let Err(error) =
+                        window.emit(&event_name, serde_json::json!({ "type": "data", "data": data }))
+                    {
+                        error!("Failed to emit terminal data: {error}");
+                        break;
+                    }
+                }
+                Err(error) => {
+                    error!("Terminal read error: {error}");
+                    break;
+                }
+            }
+        }
+    });
+}
+
+fn spawn_exit_watcher(
+    child: Arc<Mutex<Box<dyn Child + Send + Sync>>>,
+    window: Window,
+    sessions: Arc<Mutex<HashMap<String, TerminalSession>>>,
+    session_id: String,
+) {
+    thread::spawn(move || {
+        let status = {
+            let mut guard = child.lock().expect("terminal child poisoned");
+            guard.wait()
+        };
+
+        let (exit_code, signal) = match status {
+            Ok(status) => (
+                status.exit_code() as i32,
+                status.signal().map(|sig| sig.to_string()),
+            ),
+            Err(err) => {
+                error!("Failed to wait for terminal exit: {err}");
+                (1, Some("Terminal crashed".to_string()))
+            }
+        };
+
+        let event_name = format!("terminal://{}", session_id);
+        let payload = serde_json::json!({
+            "type": "exit",
+            "exitCode": exit_code,
+            "signal": signal
+        });
+        let _ = window.emit(&event_name, payload);
+
+        let mut sessions = sessions.lock().unwrap();
+        sessions.remove(&session_id);
+    });
+}
+
+fn resolve_shell() -> String {
+    env::var("SHELL")
+        .ok()
+        .filter(|value| !value.trim().is_empty())
+        .unwrap_or_else(|| DEFAULT_SHELL.to_string())
+}
+
+fn shell_accepts_login_flag(shell_path: &str) -> bool {
+    let shell_name = Path::new(shell_path)
+        .file_name()
+        .and_then(|name| name.to_str())
+        .unwrap_or(shell_path)
+        .to_lowercase();
+
+    matches!(
+        shell_name.as_str(),
+        name if name.contains("zsh")
+            || name.contains("bash")
+            || name.contains("sh")
+            || name.contains("fish")
+            || name.contains("ksh")
+    )
+}
+
+fn resolve_working_directory(input: Option<&str>) -> Result<PathBuf, String> {
+    let maybe_path = input
+        .map(|value| PathBuf::from(value))
+        .or_else(|| dirs::home_dir());
+
+    let Some(path) = maybe_path else {
+        return Err("Unable to determine working directory".to_string());
+    };
+
+    if !path.exists() || !path.is_dir() {
+        return Err(format!(
+            "Working directory is not accessible: {}",
+            path.display()
+        ));
+    }
+
+    Ok(path)
+}
+
+fn apply_terminal_environment(cmd: &mut CommandBuilder, shell_path: &str) {
+    cmd.env(
+        "TERM",
+        env::var("TERM").unwrap_or_else(|_| DEFAULT_TERM.to_string()),
+    );
+    cmd.env(
+        "COLORTERM",
+        env::var("COLORTERM").unwrap_or_else(|_| DEFAULT_COLORTERM.to_string()),
+    );
+    cmd.env(
+        "LC_ALL",
+        env::var("LC_ALL").unwrap_or_else(|_| DEFAULT_LOCALE.to_string()),
+    );
+    cmd.env(
+        "LANG",
+        env::var("LANG").unwrap_or_else(|_| DEFAULT_LOCALE.to_string()),
+    );
+    cmd.env("TERM_PROGRAM", TERM_PROGRAM_NAME);
+    cmd.env("TERM_PROGRAM_VERSION", TERM_PROGRAM_VERSION);
+    cmd.env("OPENCHAMBER_DESKTOP", "1");
+    cmd.env("SHELL", shell_path);
+}
diff --git a/packages/desktop/src-tauri/src/lib.rs b/packages/desktop/src-tauri/src/lib.rs
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/desktop/src-tauri/src/logging.rs b/packages/desktop/src-tauri/src/logging.rs
new file mode 100644
index 00000000..dbc2dba9
--- /dev/null
+++ b/packages/desktop/src-tauri/src/logging.rs
@@ -0,0 +1,20 @@
+use std::path::PathBuf;
+
+#[cfg(target_os = "macos")]
+const PLATFORM_LOG_SEGMENTS: &[&str] = &["Library", "Logs", "OpenChamber"];
+#[cfg(not(target_os = "macos"))]
+const PLATFORM_LOG_SEGMENTS: &[&str] = &[".config", "openchamber", "logs"];
+
+pub fn log_directory() -> Option<PathBuf> {
+    let mut path = dirs::home_dir()?;
+    for segment in PLATFORM_LOG_SEGMENTS {
+        path.push(segment);
+    }
+    Some(path)
+}
+
+pub fn log_file_path() -> Option<PathBuf> {
+    let mut dir = log_directory()?;
+    dir.push("desktop.log");
+    Some(dir)
+}
diff --git a/packages/desktop/src-tauri/src/main.rs b/packages/desktop/src-tauri/src/main.rs
new file mode 100644
index 00000000..9172e40b
--- /dev/null
+++ b/packages/desktop/src-tauri/src/main.rs
@@ -0,0 +1,1084 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+mod commands;
+mod logging;
+mod assistant_notifications;
+mod session_activity;
+mod opencode_config;
+mod opencode_manager;
+mod window_state;
+
+use std::{collections::HashMap, path::PathBuf, sync::Arc, time::{Duration, Instant}};
+
+use anyhow::{anyhow, Result};
+use axum::{
+    body::{to_bytes, Body},
+    extract::{OriginalUri, State},
+    http::{Method, Request, Response, StatusCode},
+    response::IntoResponse,
+    routing::{any, get, post},
+    Json, Router,
+};
+use assistant_notifications::spawn_assistant_notifications;
+use session_activity::spawn_session_activity_tracker;
+use commands::files::{create_directory, list_directory, search_files};
+use commands::git::{
+    add_git_worktree, check_is_git_repository, checkout_branch, create_branch, create_git_commit,
+    create_git_identity, delete_git_branch, delete_git_identity, delete_remote_branch,
+    ensure_openchamber_ignored, generate_commit_message, get_commit_files, get_current_git_identity,
+    get_git_branches, get_git_diff, get_git_file_diff, get_git_identities, get_git_log, get_git_status,
+    git_fetch, git_pull, git_push, is_linked_worktree, list_git_worktrees, remove_git_worktree,
+    revert_git_file, set_git_identity, update_git_identity,
+};
+use commands::logs::fetch_desktop_logs;
+use commands::permissions::{
+    pick_directory, process_directory_selection, request_directory_access,
+    restore_bookmarks_on_startup, start_accessing_directory, stop_accessing_directory,
+};
+use commands::notifications::desktop_notify;
+use commands::settings::{load_settings, restart_opencode, save_settings};
+use commands::terminal::{
+    close_terminal, create_terminal_session, resize_terminal, send_terminal_input, TerminalState,
+};
+use futures_util::StreamExt as FuturesStreamExt;
+use log::{error, info, warn};
+use opencode_manager::OpenCodeManager;
+use portpicker::pick_unused_port;
+use reqwest::{header, Body as ReqwestBody, Client};
+use serde::{Deserialize, Serialize};
+use serde_json::Value;
+use tauri::{Emitter, Manager, WebviewWindow};
+use tauri_plugin_dialog::init as dialog_plugin;
+use tauri_plugin_fs::init as fs_plugin;
+use tauri_plugin_log::{Target, TargetKind};
+use tauri_plugin_notification::init as notification_plugin;
+use tauri_plugin_shell::init as shell_plugin;
+use tokio::{
+    fs,
+    net::TcpListener,
+    sync::{broadcast, Mutex},
+};
+use tower_http::cors::CorsLayer;
+use window_state::{load_window_state, persist_window_state, WindowStateManager};
+
+#[cfg(target_os = "macos")]
+use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial};
+
+const PROXY_BODY_LIMIT: usize = 32 * 1024 * 1024; // 32MB
+const CLIENT_RELOAD_DELAY_MS: u64 = 800;
+const MODELS_DEV_API_URL: &str = "https://models.dev/api.json";
+const MODELS_METADATA_CACHE_TTL: Duration = Duration::from_secs(5 * 60);
+const MODELS_METADATA_REQUEST_TIMEOUT: Duration = Duration::from_secs(8);
+
+#[derive(Clone)]
+pub(crate) struct DesktopRuntime {
+    server_port: u16,
+    shutdown_tx: broadcast::Sender<()>,
+    opencode: Arc<OpenCodeManager>,
+    settings: Arc<SettingsStore>,
+}
+
+impl DesktopRuntime {
+    async fn initialize() -> Result<Self> {
+        let settings = Arc::new(SettingsStore::new()?);
+
+        // Read lastDirectory from settings before starting OpenCode
+        let initial_dir = settings.last_directory().await.ok().flatten();
+
+        let opencode = Arc::new(OpenCodeManager::new_with_directory(initial_dir.clone()));
+
+        // Try to start OpenCode if CLI is available
+        if opencode.is_cli_available() {
+            if let Err(e) = opencode.ensure_running().await {
+                warn!("[desktop] Failed to start OpenCode: {}", e);
+            }
+        } else {
+            info!("[desktop] OpenCode CLI not available - running in limited mode");
+        }
+
+        let client = Client::builder().build()?;
+
+        let (shutdown_tx, shutdown_rx) = broadcast::channel(2);
+        let server_port =
+            pick_unused_port().ok_or_else(|| anyhow!("No free port available"))? as u16;
+        let server_state = ServerState {
+            client,
+            opencode: opencode.clone(),
+            server_port,
+            directory_change_lock: Arc::new(Mutex::new(())),
+            models_metadata_cache: Arc::new(Mutex::new(ModelsMetadataCache::default())),
+        };
+
+        spawn_http_server(server_port, server_state, shutdown_rx);
+
+        Ok(Self {
+            server_port,
+            shutdown_tx,
+            opencode,
+            settings,
+        })
+    }
+
+    async fn shutdown(&self) {
+        let _ = self.shutdown_tx.send(());
+        let _ = self.opencode.shutdown().await;
+    }
+
+    pub(crate) fn settings(&self) -> &SettingsStore {
+        self.settings.as_ref()
+    }
+
+    pub(crate) fn subscribe_shutdown(&self) -> broadcast::Receiver<()> {
+        self.shutdown_tx.subscribe()
+    }
+
+    pub(crate) fn opencode_manager(&self) -> Arc<OpenCodeManager> {
+        self.opencode.clone()
+    }
+}
+
+#[derive(Clone)]
+struct ServerState {
+    client: Client,
+    opencode: Arc<OpenCodeManager>,
+    server_port: u16,
+    directory_change_lock: Arc<Mutex<()>>,
+    models_metadata_cache: Arc<Mutex<ModelsMetadataCache>>,
+}
+
+#[derive(Default)]
+struct ModelsMetadataCache {
+    payload: Option<Value>,
+    fetched_at: Option<Instant>,
+}
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+struct ConfigActionResponse {
+    success: bool,
+    requires_reload: bool,
+    message: String,
+    reload_delay_ms: u64,
+}
+
+#[derive(Serialize)]
+struct ConfigErrorResponse {
+    error: String,
+}
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+struct ConfigMetadataResponse {
+    name: String,
+    sources: opencode_config::ConfigSources,
+    is_built_in: bool,
+}
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+struct HealthResponse {
+    status: &'static str,
+    server_port: u16,
+    opencode_port: Option<u16>,
+    api_prefix: String,
+    is_opencode_ready: bool,
+    cli_available: bool,
+}
+
+#[derive(Serialize)]
+struct ServerInfoPayload {
+    server_port: u16,
+    opencode_port: Option<u16>,
+    api_prefix: String,
+    cli_available: bool,
+}
+
+#[tauri::command]
+async fn desktop_server_info(
+    state: tauri::State<'_, DesktopRuntime>,
+) -> Result<ServerInfoPayload, String> {
+    Ok(ServerInfoPayload {
+        server_port: state.server_port,
+        opencode_port: state.opencode.current_port(),
+        api_prefix: state.opencode.api_prefix(),
+        cli_available: state.opencode.is_cli_available(),
+    })
+}
+
+#[tauri::command]
+async fn desktop_restart_opencode(state: tauri::State<'_, DesktopRuntime>) -> Result<(), String> {
+    state
+        .opencode
+        .restart()
+        .await
+        .map_err(|err| err.to_string())
+}
+
+#[tauri::command]
+async fn desktop_open_devtools(window: WebviewWindow) -> Result<(), String> {
+    window.open_devtools();
+    Ok(())
+}
+
+#[cfg(target_os = "macos")]
+fn prevent_app_nap() {
+    use objc2_foundation::{NSActivityOptions, NSProcessInfo, NSString};
+
+    // NSActivityUserInitiated (0x00FFFFFF) | NSActivityLatencyCritical (0xFF00000000)
+    let options = NSActivityOptions(0x00FFFFFF | 0xFF00000000);
+    let reason = NSString::from_str("Prevent App Nap");
+
+    let process_info = NSProcessInfo::processInfo();
+    let activity = process_info.beginActivityWithOptions_reason(options, &reason);
+
+    // Leak the activity token to keep it active indefinitely
+    std::mem::forget(activity);
+
+    info!("[macos] App Nap prevention enabled via objc2");
+}
+
+fn main() {
+    let mut log_builder = tauri_plugin_log::Builder::default()
+        .level(log::LevelFilter::Info)
+        .clear_targets()
+        .target(Target::new(TargetKind::Stdout))
+        .target(Target::new(TargetKind::Webview));
+
+    if let Some(dir) = logging::log_directory() {
+        log_builder = log_builder.target(Target::new(TargetKind::Folder {
+            path: dir,
+            file_name: Some("desktop".into()),
+        }));
+    }
+
+    let app = tauri::Builder::default()
+        .plugin(shell_plugin())
+        .plugin(dialog_plugin())
+        .plugin(fs_plugin())
+        .plugin(notification_plugin())
+        .plugin(tauri_plugin_updater::Builder::new().build())
+        .plugin(log_builder.build())
+        .setup(|app| {
+            #[cfg(target_os = "macos")]
+            prevent_app_nap();
+
+            let runtime = tauri::async_runtime::block_on(DesktopRuntime::initialize())?;
+            app.manage(runtime.clone());
+
+            // Background assistant completion notifications (SSE) independent of the webview lifecycle
+            let app_handle = app.app_handle();
+            spawn_assistant_notifications(app_handle.clone(), runtime.clone());
+            spawn_session_activity_tracker(app_handle.clone(), runtime.clone());
+
+            if let Some(window) = app.get_webview_window("main") {
+                #[cfg(target_os = "macos")]
+                {
+                    if let Err(error) =
+                        apply_vibrancy(&window, NSVisualEffectMaterial::Sidebar, None, Some(24.0))
+                    {
+                        warn!("[desktop:vibrancy] Failed to apply macOS vibrancy: {}", error);
+                    } else {
+                        info!("[desktop:vibrancy] Applied macOS Sidebar vibrancy to main window");
+                    }
+                }
+            }
+            
+            app.manage(TerminalState::new());
+
+            let stored_state = tauri::async_runtime::block_on(load_window_state()).unwrap_or(None);
+            let manager = WindowStateManager::new(stored_state.clone().unwrap_or_default());
+            app.manage(manager.clone());
+
+            if let Some(saved) = stored_state {
+                if let Some(window) = app.get_webview_window("main") {
+                    let _ = window_state::apply_window_state(&window, &saved);
+                }
+            }
+
+            // Restore bookmarks on startup (macOS security-scoped access)
+            // We'll do this synchronously within the setup to avoid lifetime issues
+            tauri::async_runtime::block_on(async {
+                if let Err(e) =
+                    restore_bookmarks_on_startup(app.state::<DesktopRuntime>().clone()).await
+                {
+                    warn!("Failed to restore bookmarks on startup: {}", e);
+                }
+            });
+
+            Ok(())
+        })
+        .invoke_handler(tauri::generate_handler![
+            desktop_server_info,
+            desktop_restart_opencode,
+            desktop_open_devtools,
+            load_settings,
+            save_settings,
+            restart_opencode,
+            list_directory,
+            search_files,
+            create_directory,
+            request_directory_access,
+            start_accessing_directory,
+            stop_accessing_directory,
+            pick_directory,
+            restore_bookmarks_on_startup,
+            process_directory_selection,
+            check_is_git_repository,
+            get_git_status,
+            get_git_diff,
+            get_git_file_diff,
+            revert_git_file,
+            is_linked_worktree,
+            get_git_branches,
+            delete_git_branch,
+            delete_remote_branch,
+            list_git_worktrees,
+            add_git_worktree,
+            remove_git_worktree,
+            ensure_openchamber_ignored,
+            create_git_commit,
+            git_push,
+            git_pull,
+            git_fetch,
+            checkout_branch,
+            create_branch,
+            get_git_log,
+            get_commit_files,
+            get_git_identities,
+            create_git_identity,
+            update_git_identity,
+            delete_git_identity,
+            get_current_git_identity,
+            set_git_identity,
+            generate_commit_message,
+            create_terminal_session,
+            send_terminal_input,
+            resize_terminal,
+            close_terminal,
+            fetch_desktop_logs,
+            desktop_notify,
+        ])
+        .on_window_event(|window, event| {
+            let window_state_manager = window.state::<WindowStateManager>().inner().clone();
+
+            match event {
+                tauri::WindowEvent::Focused(true) => {
+                    // Clear dock badge and underlying badge state when the window gains focus
+                    let _ = window.set_badge_count(None);
+                    let _ = window.app_handle().emit("openchamber:clear-badge-sessions", ());
+                }
+                tauri::WindowEvent::Moved(position) => {
+                    let is_maximized = window.is_maximized().unwrap_or(false);
+                    window_state_manager.update_position(
+                        position.x as f64,
+                        position.y as f64,
+                        is_maximized,
+                    );
+                }
+                tauri::WindowEvent::Resized(size) => {
+                    let is_maximized = window.is_maximized().unwrap_or(false);
+                    window_state_manager.update_size(
+                        size.width as f64,
+                        size.height as f64,
+                        is_maximized,
+                    );
+                }
+                tauri::WindowEvent::CloseRequested { api, .. } => {
+                    api.prevent_close();
+                    let runtime = window.state::<DesktopRuntime>().inner().clone();
+                    let window_handle = window.clone();
+                    let manager_clone = window_state_manager.clone();
+                    tauri::async_runtime::spawn(async move {
+                        if let Err(err) = persist_window_state(&window_handle, &manager_clone).await
+                        {
+                            warn!("Failed to persist window state: {}", err);
+                        }
+                        runtime.shutdown().await;
+                        let _ = window_handle.app_handle().exit(0);
+                    });
+                }
+                _ => {}
+            }
+        })
+        .build(tauri::generate_context!())
+        .expect("failed to build Tauri application");
+
+    app.run(|_app_handle, _event| {});
+}
+
+
+fn spawn_http_server(port: u16, state: ServerState, shutdown_rx: broadcast::Receiver<()>) {
+    tauri::async_runtime::spawn(async move {
+        if let Err(error) = run_http_server(port, state, shutdown_rx).await {
+            error!("[desktop:http] server stopped: {error:?}");
+        }
+    });
+}
+
+async fn run_http_server(
+    port: u16,
+    state: ServerState,
+    mut shutdown_rx: broadcast::Receiver<()>,
+) -> Result<()> {
+    let router = Router::new()
+        .route("/health", get(health_handler))
+        .route("/api/openchamber/models-metadata", get(models_metadata_handler))
+        .route("/api/opencode/directory", post(change_directory_handler))
+        .route("/api", any(proxy_to_opencode))
+        .route("/api/{*rest}", any(proxy_to_opencode))
+        .with_state(state)
+        .layer(CorsLayer::permissive());
+
+    let addr = format!("127.0.0.1:{port}");
+    let listener = TcpListener::bind(&addr).await?;
+    info!("[desktop:http] listening on http://{addr}");
+
+    axum::serve(listener, router)
+        .with_graceful_shutdown(async move {
+            let _ = shutdown_rx.recv().await;
+        })
+        .await?;
+
+    Ok(())
+}
+
+async fn health_handler(State(state): State<ServerState>) -> Json<HealthResponse> {
+    Json(HealthResponse {
+        status: "ok",
+        server_port: state.server_port,
+        opencode_port: state.opencode.current_port(),
+        api_prefix: state.opencode.api_prefix(),
+        is_opencode_ready: state.opencode.is_ready(),
+        cli_available: opencode_manager::check_cli_exists(),
+    })
+}
+
+async fn models_metadata_handler(State(state): State<ServerState>) -> Result<Json<Value>, StatusCode> {
+    let now = Instant::now();
+    let cached_payload: Option<Value> = {
+        let cache = state.models_metadata_cache.lock().await;
+        if let (Some(payload), Some(fetched_at)) = (&cache.payload, cache.fetched_at) {
+            if now.duration_since(fetched_at) < MODELS_METADATA_CACHE_TTL {
+                return Ok(Json(payload.clone()));
+            }
+        }
+        cache.payload.clone()
+    };
+
+    let response = state
+        .client
+        .get(MODELS_DEV_API_URL)
+        .header(header::ACCEPT, "application/json")
+        .timeout(MODELS_METADATA_REQUEST_TIMEOUT)
+        .send()
+        .await
+        .map_err(|error| {
+            warn!("[desktop:http] Failed to fetch models metadata: {error}");
+            StatusCode::BAD_GATEWAY
+        })?;
+
+    if !response.status().is_success() {
+        warn!(
+            "[desktop:http] models.dev responded with status {}",
+            response.status()
+        );
+        if let Some(payload) = cached_payload {
+            return Ok(Json(payload));
+        }
+        return Err(StatusCode::BAD_GATEWAY);
+    }
+
+    let payload = response.json::<Value>().await.map_err(|error| {
+        warn!("[desktop:http] Failed to parse models.dev payload: {error}");
+        StatusCode::BAD_GATEWAY
+    })?;
+
+    {
+        let mut cache = state.models_metadata_cache.lock().await;
+        cache.payload = Some(payload.clone());
+        cache.fetched_at = Some(Instant::now());
+    }
+
+    Ok(Json(payload))
+}
+
+#[derive(Deserialize)]
+struct DirectoryChangeRequest {
+    path: String,
+}
+
+#[derive(Serialize)]
+struct DirectoryChangeResponse {
+    success: bool,
+    restarted: bool,
+    path: String,
+}
+
+fn json_response<T: Serialize>(status: StatusCode, payload: T) -> Response<Body> {
+    (status, Json(payload)).into_response()
+}
+
+fn config_error_response(status: StatusCode, message: impl Into<String>) -> Response<Body> {
+    json_response(status, ConfigErrorResponse {
+        error: message.into(),
+    })
+}
+
+async fn parse_request_payload(req: Request<Body>) -> Result<HashMap<String, Value>, Response<Body>> {
+    let (_, body) = req.into_parts();
+    let body_bytes = to_bytes(body, PROXY_BODY_LIMIT)
+        .await
+        .map_err(|_| config_error_response(StatusCode::BAD_REQUEST, "Invalid request body"))?;
+
+    if body_bytes.is_empty() {
+        return Ok(HashMap::new());
+    }
+
+    serde_json::from_slice::<HashMap<String, Value>>(&body_bytes)
+        .map_err(|_| config_error_response(StatusCode::BAD_REQUEST, "Malformed JSON payload"))
+}
+
+async fn refresh_opencode_after_config_change(
+    state: &ServerState,
+    reason: &str,
+) -> Result<(), Response<Body>> {
+    info!("[desktop:config] Restarting OpenCode after {}", reason);
+    state
+        .opencode
+        .restart()
+        .await
+        .map_err(|err| config_error_response(
+            StatusCode::INTERNAL_SERVER_ERROR,
+            format!("Failed to restart OpenCode: {}", err),
+        ))?;
+    Ok(())
+}
+
+async fn handle_agent_route(
+    state: &ServerState,
+    method: Method,
+    req: Request<Body>,
+    name: String,
+) -> Result<Response<Body>, StatusCode> {
+    match method {
+        Method::GET => {
+            match opencode_config::get_agent_sources(&name).await {
+                Ok(sources) => Ok(json_response(
+                    StatusCode::OK,
+                    ConfigMetadataResponse {
+                        name,
+                        is_built_in: !sources.md.exists && !sources.json.exists,
+                        sources,
+                    },
+                )),
+                Err(err) => {
+                    error!("[desktop:config] Failed to read agent sources: {}", err);
+                    Ok(config_error_response(
+                        StatusCode::INTERNAL_SERVER_ERROR,
+                        "Failed to read agent configuration",
+                    ))
+                }
+            }
+        }
+        Method::POST => {
+            let payload = match parse_request_payload(req).await {
+                Ok(data) => data,
+                Err(resp) => return Ok(resp),
+            };
+
+            match opencode_config::create_agent(&name, &payload).await {
+                Ok(()) => {
+                    if let Err(resp) =
+                        refresh_opencode_after_config_change(state, "agent creation").await
+                    {
+                        return Ok(resp);
+                    }
+
+                    Ok(json_response(
+                        StatusCode::OK,
+                        ConfigActionResponse {
+                            success: true,
+                            requires_reload: true,
+                            message: format!(
+                                "Agent {} created successfully. Reloading interface...",
+                                name
+                            ),
+                            reload_delay_ms: CLIENT_RELOAD_DELAY_MS,
+                        },
+                    ))
+                }
+                Err(err) => {
+                    error!("[desktop:config] Failed to create agent {}: {}", name, err);
+                    Ok(config_error_response(
+                        StatusCode::INTERNAL_SERVER_ERROR,
+                        err.to_string(),
+                    ))
+                }
+            }
+        }
+        Method::PATCH => {
+            let payload = match parse_request_payload(req).await {
+                Ok(data) => data,
+                Err(resp) => return Ok(resp),
+            };
+
+            match opencode_config::update_agent(&name, &payload).await {
+                Ok(()) => {
+                    if let Err(resp) =
+                        refresh_opencode_after_config_change(state, "agent update").await
+                    {
+                        return Ok(resp);
+                    }
+
+                    Ok(json_response(
+                        StatusCode::OK,
+                        ConfigActionResponse {
+                            success: true,
+                            requires_reload: true,
+                            message: format!(
+                                "Agent {} updated successfully. Reloading interface...",
+                                name
+                            ),
+                            reload_delay_ms: CLIENT_RELOAD_DELAY_MS,
+                        },
+                    ))
+                }
+                Err(err) => {
+                    error!("[desktop:config] Failed to update agent {}: {}", name, err);
+                    Ok(config_error_response(
+                        StatusCode::INTERNAL_SERVER_ERROR,
+                        err.to_string(),
+                    ))
+                }
+            }
+        }
+        Method::DELETE => match opencode_config::delete_agent(&name).await {
+            Ok(()) => {
+                if let Err(resp) =
+                    refresh_opencode_after_config_change(state, "agent deletion").await
+                {
+                    return Ok(resp);
+                }
+
+                Ok(json_response(
+                    StatusCode::OK,
+                    ConfigActionResponse {
+                        success: true,
+                        requires_reload: true,
+                        message: format!(
+                            "Agent {} deleted successfully. Reloading interface...",
+                            name
+                        ),
+                        reload_delay_ms: CLIENT_RELOAD_DELAY_MS,
+                    },
+                ))
+            }
+            Err(err) => {
+                error!("[desktop:config] Failed to delete agent {}: {}", name, err);
+                Ok(config_error_response(
+                    StatusCode::INTERNAL_SERVER_ERROR,
+                    err.to_string(),
+                ))
+            }
+        },
+        _ => Ok(StatusCode::METHOD_NOT_ALLOWED.into_response()),
+    }
+}
+
+async fn handle_command_route(
+    state: &ServerState,
+    method: Method,
+    req: Request<Body>,
+    name: String,
+) -> Result<Response<Body>, StatusCode> {
+    match method {
+        Method::GET => {
+            match opencode_config::get_command_sources(&name).await {
+                Ok(sources) => Ok(json_response(
+                    StatusCode::OK,
+                    ConfigMetadataResponse {
+                        name,
+                        is_built_in: !sources.md.exists && !sources.json.exists,
+                        sources,
+                    },
+                )),
+                Err(err) => {
+                    error!("[desktop:config] Failed to read command sources: {}", err);
+                    Ok(config_error_response(
+                        StatusCode::INTERNAL_SERVER_ERROR,
+                        "Failed to read command configuration",
+                    ))
+                }
+            }
+        }
+        Method::POST => {
+            let payload = match parse_request_payload(req).await {
+                Ok(data) => data,
+                Err(resp) => return Ok(resp),
+            };
+
+            match opencode_config::create_command(&name, &payload).await {
+                Ok(()) => {
+                    if let Err(resp) =
+                        refresh_opencode_after_config_change(state, "command creation").await
+                    {
+                        return Ok(resp);
+                    }
+
+                    Ok(json_response(
+                        StatusCode::OK,
+                        ConfigActionResponse {
+                            success: true,
+                            requires_reload: true,
+                            message: format!(
+                                "Command {} created successfully. Reloading interface...",
+                                name
+                            ),
+                            reload_delay_ms: CLIENT_RELOAD_DELAY_MS,
+                        },
+                    ))
+                }
+                Err(err) => {
+                    error!("[desktop:config] Failed to create command {}: {}", name, err);
+                    Ok(config_error_response(
+                        StatusCode::INTERNAL_SERVER_ERROR,
+                        err.to_string(),
+                    ))
+                }
+            }
+        }
+        Method::PATCH => {
+            let payload = match parse_request_payload(req).await {
+                Ok(data) => data,
+                Err(resp) => return Ok(resp),
+            };
+
+            match opencode_config::update_command(&name, &payload).await {
+                Ok(()) => {
+                    if let Err(resp) =
+                        refresh_opencode_after_config_change(state, "command update").await
+                    {
+                        return Ok(resp);
+                    }
+
+                    Ok(json_response(
+                        StatusCode::OK,
+                        ConfigActionResponse {
+                            success: true,
+                            requires_reload: true,
+                            message: format!(
+                                "Command {} updated successfully. Reloading interface...",
+                                name
+                            ),
+                            reload_delay_ms: CLIENT_RELOAD_DELAY_MS,
+                        },
+                    ))
+                }
+                Err(err) => {
+                    error!("[desktop:config] Failed to update command {}: {}", name, err);
+                    Ok(config_error_response(
+                        StatusCode::INTERNAL_SERVER_ERROR,
+                        err.to_string(),
+                    ))
+                }
+            }
+        }
+        Method::DELETE => match opencode_config::delete_command(&name).await {
+            Ok(()) => {
+                if let Err(resp) =
+                    refresh_opencode_after_config_change(state, "command deletion").await
+                {
+                    return Ok(resp);
+                }
+
+                Ok(json_response(
+                    StatusCode::OK,
+                    ConfigActionResponse {
+                        success: true,
+                        requires_reload: true,
+                        message: format!(
+                            "Command {} deleted successfully. Reloading interface...",
+                            name
+                        ),
+                        reload_delay_ms: CLIENT_RELOAD_DELAY_MS,
+                    },
+                ))
+            }
+            Err(err) => {
+                error!("[desktop:config] Failed to delete command {}: {}", name, err);
+                let status = if err.to_string().contains("not found") {
+                    StatusCode::NOT_FOUND
+                } else {
+                    StatusCode::INTERNAL_SERVER_ERROR
+                };
+                Ok(config_error_response(status, err.to_string()))
+            }
+        },
+        _ => Ok(StatusCode::METHOD_NOT_ALLOWED.into_response()),
+    }
+}
+
+async fn handle_config_routes(
+    state: ServerState,
+    path: &str,
+    method: Method,
+    req: Request<Body>,
+) -> Result<Response<Body>, StatusCode> {
+    if let Some(name) = path.strip_prefix("/api/config/agents/") {
+        let trimmed = name.trim();
+        if trimmed.is_empty() {
+            return Ok(config_error_response(
+                StatusCode::BAD_REQUEST,
+                "Agent name is required",
+            ));
+        }
+        return handle_agent_route(&state, method, req, trimmed.to_string()).await;
+    }
+
+    if let Some(name) = path.strip_prefix("/api/config/commands/") {
+        let trimmed = name.trim();
+        if trimmed.is_empty() {
+            return Ok(config_error_response(
+                StatusCode::BAD_REQUEST,
+                "Command name is required",
+            ));
+        }
+        return handle_command_route(&state, method, req, trimmed.to_string()).await;
+    }
+
+    if path == "/api/config/reload" && method == Method::POST {
+        if let Err(resp) =
+            refresh_opencode_after_config_change(&state, "manual configuration reload").await
+        {
+            return Ok(resp);
+        }
+
+        return Ok(json_response(
+            StatusCode::OK,
+            ConfigActionResponse {
+                success: true,
+                requires_reload: true,
+                message: "Configuration reloaded successfully. Refreshing interface..."
+                    .to_string(),
+                reload_delay_ms: CLIENT_RELOAD_DELAY_MS,
+            },
+        ));
+    }
+
+    Ok(StatusCode::NOT_FOUND.into_response())
+}
+
+async fn change_directory_handler(
+    State(state): State<ServerState>,
+    Json(payload): Json<DirectoryChangeRequest>,
+) -> Result<Json<DirectoryChangeResponse>, StatusCode> {
+    // Acquire lock to prevent concurrent directory changes
+    let _lock = state.directory_change_lock.lock().await;
+
+    let requested_path = payload.path.trim();
+    if requested_path.is_empty() {
+        warn!("[desktop:http] ERROR: Empty path provided");
+        return Err(StatusCode::BAD_REQUEST);
+    }
+
+    let resolved_path = PathBuf::from(requested_path);
+
+    // Validate directory exists and is accessible
+    match fs::metadata(&resolved_path).await {
+        Ok(metadata) => {
+            if !metadata.is_dir() {
+                warn!(
+                    "[desktop:http] ERROR: Path is not a directory: {:?}",
+                    resolved_path
+                );
+                return Err(StatusCode::BAD_REQUEST);
+            }
+        }
+        Err(err) => {
+            warn!(
+                "[desktop:http] ERROR: Cannot access path: {:?} - {}",
+                resolved_path, err
+            );
+            return Err(StatusCode::NOT_FOUND);
+        }
+    }
+
+    let current_dir = state.opencode.get_working_directory();
+    let is_running = state.opencode.current_port().is_some();
+
+    // If already on this directory and OpenCode is running, no restart needed
+    if current_dir == resolved_path && is_running {
+        return Ok(Json(DirectoryChangeResponse {
+            success: true,
+            restarted: false,
+            path: resolved_path.to_string_lossy().to_string(),
+        }));
+    }
+
+    info!("[desktop:http] Changing directory to {:?}", resolved_path);
+
+    // Update working directory and restart OpenCode
+    state
+        .opencode
+        .set_working_directory(resolved_path.clone())
+        .await
+        .map_err(|e| {
+        error!(
+            "[desktop:http] ERROR: Failed to set working directory: {}",
+            e
+        );
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
+
+    state.opencode.restart().await.map_err(|e| {
+        error!("[desktop:http] ERROR: Failed to restart OpenCode: {}", e);
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
+
+    Ok(Json(DirectoryChangeResponse {
+        success: true,
+        restarted: true,
+        path: resolved_path.to_string_lossy().to_string(),
+    }))
+}
+
+async fn proxy_to_opencode(
+    State(state): State<ServerState>,
+    original: OriginalUri,
+    req: Request<Body>,
+) -> Result<Response<Body>, StatusCode> {
+    let origin_path = original.0.path().to_string();
+    let method = req.method().clone();
+
+    let is_desktop_config_route = origin_path.starts_with("/api/config/agents/")
+        || origin_path.starts_with("/api/config/commands/")
+        || origin_path == "/api/config/reload";
+
+    if is_desktop_config_route {
+        return handle_config_routes(state, &origin_path, method, req).await;
+    }
+
+    let port = state.opencode.current_port().ok_or_else(|| {
+        error!("[desktop:http] PROXY FAILED: OpenCode not running (no port)");
+        StatusCode::SERVICE_UNAVAILABLE
+    })?;
+
+    let query = original.0.query();
+    let rewritten_path = state.opencode.rewrite_path(&origin_path);
+    let mut target = format!("http://127.0.0.1:{port}{rewritten_path}");
+    if let Some(q) = query {
+        target.push('?');
+        target.push_str(q);
+    }
+
+    let (parts, body) = req.into_parts();
+    let method = parts.method.clone();
+    let mut builder = state.client.request(method, &target);
+
+    let mut headers = parts.headers;
+    headers.insert(header::HOST, format!("127.0.0.1:{port}").parse().unwrap());
+    if headers
+        .get(header::ACCEPT)
+        .and_then(|v| v.to_str().ok())
+        .map(|val| val.contains("text/event-stream"))
+        .unwrap_or(false)
+    {
+        headers.insert(header::CONNECTION, "keep-alive".parse().unwrap());
+    }
+
+    for (key, value) in headers.iter() {
+        if key == &header::CONTENT_LENGTH {
+            continue;
+        }
+        builder = builder.header(key, value);
+    }
+
+    let body_bytes = to_bytes(body, PROXY_BODY_LIMIT)
+        .await
+        .map_err(|_| StatusCode::BAD_GATEWAY)?;
+
+    let response = if body_bytes.is_empty() {
+        builder.send().await.map_err(|_| StatusCode::BAD_GATEWAY)?
+    } else {
+        builder
+            .body(ReqwestBody::from(body_bytes))
+            .send()
+            .await
+            .map_err(|_| StatusCode::BAD_GATEWAY)?
+    };
+
+    let status = response.status();
+    let mut resp_builder = Response::builder().status(status);
+    for (key, value) in response.headers() {
+        if key.as_str().eq_ignore_ascii_case("connection") {
+            continue;
+        }
+        resp_builder = resp_builder.header(key, value);
+    }
+
+    let stream = response.bytes_stream().map(|chunk| {
+        chunk
+            .map_err(|err| std::io::Error::new(std::io::ErrorKind::Other, err))
+            .map(axum::body::Bytes::from)
+    });
+    let body = Body::from_stream(stream);
+    resp_builder.body(body).map_err(|_| StatusCode::BAD_GATEWAY)
+}
+
+#[derive(Clone)]
+pub(crate) struct SettingsStore {
+    path: PathBuf,
+    guard: Arc<Mutex<()>>,
+}
+
+impl SettingsStore {
+    pub(crate) fn new() -> Result<Self> {
+        // Use ~/.config/openchamber for consistency with Electron/web versions
+        let home = dirs::home_dir().ok_or_else(|| anyhow!("No home directory"))?;
+        let mut dir = home;
+        dir.push(".config");
+        dir.push("openchamber");
+        std::fs::create_dir_all(&dir).ok();
+        dir.push("settings.json");
+        Ok(Self {
+            path: dir,
+            guard: Arc::new(Mutex::new(())),
+        })
+    }
+
+    pub(crate) async fn load(&self) -> Result<Value> {
+        let _lock = self.guard.lock().await;
+        match fs::read(&self.path).await {
+            Ok(bytes) => {
+                let value =
+                    serde_json::from_slice(&bytes).unwrap_or(Value::Object(Default::default()));
+                Ok(value)
+            }
+            Err(err) if err.kind() == std::io::ErrorKind::NotFound => {
+                Ok(Value::Object(Default::default()))
+            }
+            Err(err) => Err(err.into()),
+        }
+    }
+
+    pub(crate) async fn save(&self, payload: Value) -> Result<()> {
+        let _lock = self.guard.lock().await;
+        if let Some(parent) = self.path.parent() {
+            fs::create_dir_all(parent).await.ok();
+        }
+        let bytes = serde_json::to_vec_pretty(&payload)?;
+        fs::write(&self.path, bytes).await?;
+        Ok(())
+    }
+
+    pub(crate) async fn last_directory(&self) -> Result<Option<PathBuf>> {
+        let settings = self.load().await?;
+        let candidate = settings
+            .get("lastDirectory")
+            .and_then(|value| value.as_str())
+            .map(str::trim)
+            .filter(|value| !value.is_empty())
+            .map(PathBuf::from);
+        Ok(candidate)
+    }
+}
diff --git a/packages/desktop/src-tauri/src/opencode_config.rs b/packages/desktop/src-tauri/src/opencode_config.rs
new file mode 100644
index 00000000..a3b3208b
--- /dev/null
+++ b/packages/desktop/src-tauri/src/opencode_config.rs
@@ -0,0 +1,794 @@
+use anyhow::{anyhow, Result};
+use log::info;
+use once_cell::sync::Lazy;
+use regex::Regex;
+use serde::Serialize;
+use serde_json::{Map, Value};
+use std::collections::HashMap;
+use std::path::{Path, PathBuf};
+use tokio::fs;
+
+static PROMPT_FILE_PATTERN: Lazy<Regex> =
+    Lazy::new(|| Regex::new(r"(?i)^\{file:(.+)\}$").expect("valid regex"));
+
+#[derive(Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SourceInfo {
+    pub exists: bool,
+    pub path: Option<String>,
+    pub fields: Vec<String>,
+}
+
+#[derive(Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ConfigSources {
+    pub md: SourceInfo,
+    pub json: SourceInfo,
+}
+
+/// Get OpenCode config directory path
+fn get_config_dir() -> PathBuf {
+    dirs::home_dir()
+        .expect("Cannot determine home directory")
+        .join(".config")
+        .join("opencode")
+}
+
+/// Get agent directory path
+fn get_agent_dir() -> PathBuf {
+    get_config_dir().join("agent")
+}
+
+/// Get command directory path
+fn get_command_dir() -> PathBuf {
+    get_config_dir().join("command")
+}
+
+/// Get config file path
+fn get_config_file() -> PathBuf {
+    get_config_dir().join("opencode.json")
+}
+
+/// Ensure required directories exist
+async fn ensure_dirs() -> Result<()> {
+    let config_dir = get_config_dir();
+    let agent_dir = get_agent_dir();
+    let command_dir = get_command_dir();
+
+    fs::create_dir_all(&config_dir).await?;
+    fs::create_dir_all(&agent_dir).await?;
+    fs::create_dir_all(&command_dir).await?;
+
+    Ok(())
+}
+
+/// Check if a value is a prompt file reference like {file:./prompts/agent.txt}
+fn is_prompt_file_reference(value: &str) -> bool {
+    PROMPT_FILE_PATTERN.is_match(value.trim())
+}
+
+/// Resolve a prompt file reference to an absolute path
+fn resolve_prompt_file_path(reference: &str) -> Option<PathBuf> {
+    let trimmed = reference.trim();
+    let captures = PROMPT_FILE_PATTERN.captures(trimmed)?;
+    let target = captures.get(1)?.as_str().trim();
+
+    if target.is_empty() {
+        return None;
+    }
+
+    let path = if target.starts_with("./") {
+        get_config_dir().join(&target[2..])
+    } else if Path::new(target).is_absolute() {
+        PathBuf::from(target)
+    } else {
+        get_config_dir().join(target)
+    };
+
+    Some(path)
+}
+
+/// Write content to a prompt file
+async fn write_prompt_file(file_path: &Path, content: &str) -> Result<()> {
+    if let Some(parent) = file_path.parent() {
+        fs::create_dir_all(parent).await?;
+    }
+    fs::write(file_path, content).await?;
+    info!("Updated prompt file: {}", file_path.display());
+    Ok(())
+}
+
+/// Strip JSON comments from content
+fn strip_json_comments(content: &str) -> String {
+    let mut result = String::new();
+    let mut in_string = false;
+    let mut escape_next = false;
+    let mut chars = content.chars().peekable();
+
+    while let Some(ch) = chars.next() {
+        if escape_next {
+            result.push(ch);
+            escape_next = false;
+            continue;
+        }
+
+        if ch == '\\' && in_string {
+            result.push(ch);
+            escape_next = true;
+            continue;
+        }
+
+        if ch == '"' {
+            in_string = !in_string;
+            result.push(ch);
+            continue;
+        }
+
+        if !in_string {
+            if ch == '/' {
+                if let Some(&next_ch) = chars.peek() {
+                    if next_ch == '/' {
+                        // Line comment - skip until end of line
+                        chars.next(); // consume the second '/'
+                        while let Some(c) = chars.next() {
+                            if c == '\n' {
+                                result.push('\n');
+                                break;
+                            }
+                        }
+                        continue;
+                    } else if next_ch == '*' {
+                        // Block comment - skip until */
+                        chars.next(); // consume the '*'
+                        let mut prev = ' ';
+                        while let Some(c) = chars.next() {
+                            if prev == '*' && c == '/' {
+                                break;
+                            }
+                            prev = c;
+                        }
+                        continue;
+                    }
+                }
+            }
+        }
+
+        result.push(ch);
+    }
+
+    result
+}
+
+/// Read opencode.json configuration file
+pub async fn read_config() -> Result<Value> {
+    let config_file = get_config_file();
+
+    if !config_file.exists() {
+        return Ok(Value::Object(serde_json::Map::new()));
+    }
+
+    let content = fs::read_to_string(&config_file).await?;
+    let normalized = strip_json_comments(&content).trim().to_string();
+
+    if normalized.is_empty() {
+        return Ok(Value::Object(serde_json::Map::new()));
+    }
+
+    serde_json::from_str(&normalized).map_err(|e| anyhow!("Failed to parse config: {}", e))
+}
+
+/// Write opencode.json configuration file with backup
+pub async fn write_config(config: &Value) -> Result<()> {
+    let config_file = get_config_file();
+
+    // Create/overwrite single backup before writing
+    if config_file.exists() {
+        let file_name = config_file
+            .file_name()
+            .and_then(|name| name.to_str())
+            .ok_or_else(|| anyhow!("Invalid config file name"))?;
+
+        let backup_path = config_file.with_file_name(format!("{file_name}.openchamber.backup"));
+        fs::copy(&config_file, &backup_path).await?;
+        info!("Created config backup: {}", backup_path.display());
+    }
+
+    let json_string = serde_json::to_string_pretty(config)?;
+    fs::write(&config_file, json_string).await?;
+    info!("Successfully wrote config file");
+
+    Ok(())
+}
+
+/// Markdown file data
+#[derive(Debug)]
+struct MdData {
+    frontmatter: HashMap<String, Value>,
+    body: String,
+}
+
+/// Parse markdown file with YAML frontmatter
+async fn parse_md_file(file_path: &Path) -> Result<MdData> {
+    let content = fs::read_to_string(file_path).await?;
+
+    // Match YAML frontmatter: ---\n...\n---\n
+    let re = Regex::new(r"(?s)^---\r?\n(.*?)\r?\n---\r?\n(.*)$").expect("valid regex");
+
+    if let Some(captures) = re.captures(&content) {
+        let yaml_str = captures.get(1).map(|m| m.as_str()).unwrap_or("");
+        let body = captures.get(2).map(|m| m.as_str()).unwrap_or("").trim();
+
+        let frontmatter: HashMap<String, Value> =
+            serde_yaml::from_str(yaml_str).unwrap_or_default();
+
+        Ok(MdData {
+            frontmatter,
+            body: body.to_string(),
+        })
+    } else {
+        // No frontmatter, treat entire content as body
+        Ok(MdData {
+            frontmatter: HashMap::new(),
+            body: content.trim().to_string(),
+        })
+    }
+}
+
+/// Write markdown file with YAML frontmatter
+async fn write_md_file(
+    file_path: &Path,
+    frontmatter: &HashMap<String, Value>,
+    body: &str,
+) -> Result<()> {
+    let yaml_str = serde_yaml::to_string(frontmatter)?;
+    let content = format!("---\n{}---\n\n{}", yaml_str, body);
+
+    fs::write(file_path, content).await?;
+    info!("Successfully wrote markdown file: {}", file_path.display());
+
+    Ok(())
+}
+
+/// Get information about where agent configuration is stored
+pub async fn get_agent_sources(agent_name: &str) -> Result<ConfigSources> {
+    ensure_dirs().await?;
+
+    let md_path = get_agent_dir().join(format!("{}.md", agent_name));
+    let md_exists = md_path.exists();
+
+    let mut md_fields = Vec::new();
+    if md_exists {
+        let md_data = parse_md_file(&md_path).await?;
+        md_fields.extend(md_data.frontmatter.keys().cloned());
+        if !md_data.body.trim().is_empty() {
+            md_fields.push("prompt".to_string());
+        }
+    }
+
+    let config = read_config().await?;
+    let json_section = config
+        .get("agent")
+        .and_then(|v| v.as_object())
+        .and_then(|obj| obj.get(agent_name));
+
+    let json_fields = json_section
+        .and_then(|value| value.as_object())
+        .map(|obj| obj.keys().cloned().collect::<Vec<_>>())
+        .unwrap_or_default();
+
+    let sources = ConfigSources {
+        md: SourceInfo {
+            exists: md_exists,
+            path: md_exists.then(|| md_path.display().to_string()),
+            fields: md_fields,
+        },
+        json: SourceInfo {
+            exists: json_section.is_some(),
+            path: Some(get_config_file().display().to_string()),
+            fields: json_fields,
+        },
+    };
+
+    Ok(sources)
+}
+
+/// Create new agent as .md file
+pub async fn create_agent(agent_name: &str, config: &HashMap<String, Value>) -> Result<()> {
+    ensure_dirs().await?;
+
+    let md_path = get_agent_dir().join(format!("{}.md", agent_name));
+
+    // Check if agent already exists
+    if md_path.exists() {
+        return Err(anyhow!("Agent {} already exists as .md file", agent_name));
+    }
+
+    let existing_config = read_config().await?;
+    if let Some(agents) = existing_config.get("agent").and_then(|v| v.as_object()) {
+        if agents.contains_key(agent_name) {
+            return Err(anyhow!(
+                "Agent {} already exists in opencode.json",
+                agent_name
+            ));
+        }
+    }
+
+    // Extract prompt from config
+    let mut frontmatter = config.clone();
+    let prompt = frontmatter
+        .remove("prompt")
+        .and_then(|v| v.as_str().map(|s| s.to_string()))
+        .unwrap_or_default();
+
+    // Write .md file
+    write_md_file(&md_path, &frontmatter, &prompt).await?;
+    info!("Created new agent: {}", agent_name);
+
+    Ok(())
+}
+
+/// Update existing agent using field-level logic
+pub async fn update_agent(agent_name: &str, updates: &HashMap<String, Value>) -> Result<()> {
+    ensure_dirs().await?;
+
+    let md_path = get_agent_dir().join(format!("{}.md", agent_name));
+    let md_exists = md_path.exists();
+
+    let mut md_data = if md_exists {
+        Some(parse_md_file(&md_path).await?)
+    } else {
+        None
+    };
+
+    let mut config = read_config().await?;
+    let mut existing_agent = config
+        .get("agent")
+        .and_then(|v| v.as_object())
+        .and_then(|obj| obj.get(agent_name))
+        .and_then(|v| v.as_object())
+        .cloned()
+        .unwrap_or_else(Map::new);
+    let had_json_fields = !existing_agent.is_empty();
+
+    let mut md_modified = false;
+    let mut json_modified = false;
+
+    for (field, value) in updates.iter() {
+        // Handle explicit removals (null payload) for scalar/frontmatter/JSON fields
+        if value.is_null() {
+            if md_exists {
+                if let Some(ref mut data) = md_data {
+                    if data.frontmatter.remove(field).is_some() {
+                        md_modified = true;
+                    }
+                }
+            }
+            if existing_agent.remove(field).is_some() {
+                json_modified = true;
+            }
+            continue;
+        }
+
+        // Special handling for prompt field
+        if field == "prompt" {
+            let normalized_value = value.as_str().unwrap_or("").to_string();
+
+            if md_exists {
+                if let Some(ref mut data) = md_data {
+                    data.body = normalized_value.clone();
+                    md_modified = true;
+                }
+            } else if let Some(prompt_ref) = existing_agent.get("prompt").and_then(|v| v.as_str())
+            {
+                if is_prompt_file_reference(prompt_ref) {
+                    if let Some(prompt_file_path) = resolve_prompt_file_path(prompt_ref) {
+                        write_prompt_file(&prompt_file_path, &normalized_value).await?;
+                    } else {
+                        return Err(anyhow!(
+                            "Invalid prompt file reference for agent {}",
+                            agent_name
+                        ));
+                    }
+                    continue;
+                }
+            }
+
+            // Write prompt directly to JSON entry (file ref or inline string)
+            existing_agent.insert("prompt".to_string(), Value::String(normalized_value));
+            json_modified = true;
+
+            continue;
+        }
+
+        // Check where field is currently defined
+        let in_md = md_data
+            .as_ref()
+            .map(|data| data.frontmatter.contains_key(field))
+            .unwrap_or(false);
+        let in_json = existing_agent.contains_key(field);
+
+        if in_md {
+            // Update in .md frontmatter
+            if let Some(ref mut data) = md_data {
+                data.frontmatter.insert(field.clone(), value.clone());
+                md_modified = true;
+            }
+        } else if in_json {
+            // Update in opencode.json while preserving existing fields
+            existing_agent.insert(field.clone(), value.clone());
+            json_modified = true;
+        } else {
+            // Field not defined - apply priority rules
+            if md_exists && !existing_agent.is_empty() {
+                // Both exist → add to opencode.json (higher priority) without dropping other keys
+                existing_agent.insert(field.clone(), value.clone());
+                json_modified = true;
+            } else if md_exists {
+                // Only .md exists → add to frontmatter
+                if let Some(ref mut data) = md_data {
+                    data.frontmatter.insert(field.clone(), value.clone());
+                    md_modified = true;
+                }
+            } else {
+                // Only JSON or built-in → add/create section in opencode.json
+                existing_agent.insert(field.clone(), value.clone());
+                json_modified = true;
+            }
+        }
+    }
+
+    // Write changes
+    if md_modified {
+        if let Some(data) = md_data {
+            write_md_file(&md_path, &data.frontmatter, &data.body).await?;
+        }
+    }
+
+    if json_modified {
+        // Avoid creating a new JSON section for agents that already live exclusively in .md
+        if md_exists && !had_json_fields {
+            json_modified = false;
+        }
+    }
+
+    if json_modified {
+        if !config.is_object() {
+            config = Value::Object(Map::new());
+        }
+
+        let config_obj = config.as_object_mut().unwrap();
+        let agents_entry = config_obj
+            .entry("agent".to_string())
+            .or_insert_with(|| Value::Object(Map::new()));
+
+        if !agents_entry.is_object() {
+            *agents_entry = Value::Object(Map::new());
+        }
+
+        let agents_obj = agents_entry.as_object_mut().unwrap();
+        agents_obj.insert(agent_name.to_string(), Value::Object(existing_agent));
+
+        write_config(&config).await?;
+    }
+
+    info!(
+        "Updated agent: {} (md: {}, json: {})",
+        agent_name, md_modified, json_modified
+    );
+
+    Ok(())
+}
+
+/// Delete agent configuration
+pub async fn delete_agent(agent_name: &str) -> Result<()> {
+    let md_path = get_agent_dir().join(format!("{}.md", agent_name));
+    let mut deleted = false;
+
+    // 1. Delete .md file if exists
+    if md_path.exists() {
+        fs::remove_file(&md_path).await?;
+        info!("Deleted agent .md file: {}", md_path.display());
+        deleted = true;
+    }
+
+    // 2. Remove section from opencode.json if exists
+    let mut config = read_config().await?;
+    if let Some(agents) = config.get_mut("agent").and_then(|v| v.as_object_mut()) {
+        if agents.remove(agent_name).is_some() {
+            write_config(&config).await?;
+            info!("Removed agent from opencode.json: {}", agent_name);
+            deleted = true;
+        }
+    }
+
+    // 3. If nothing was deleted (built-in agent), disable it
+    if !deleted {
+        if !config.is_object() {
+            config = Value::Object(serde_json::Map::new());
+        }
+        let config_obj = config.as_object_mut().unwrap();
+        if !config_obj.contains_key("agent") {
+            config_obj.insert("agent".to_string(), Value::Object(serde_json::Map::new()));
+        }
+        let agents = config_obj.get_mut("agent").unwrap();
+        if !agents.is_object() {
+            *agents = Value::Object(serde_json::Map::new());
+        }
+        let mut disable_obj = serde_json::Map::new();
+        disable_obj.insert("disable".to_string(), Value::Bool(true));
+        agents
+            .as_object_mut()
+            .unwrap()
+            .insert(agent_name.to_string(), Value::Object(disable_obj));
+        write_config(&config).await?;
+        info!("Disabled built-in agent: {}", agent_name);
+    }
+
+    Ok(())
+}
+
+/// Get information about where command configuration is stored
+pub async fn get_command_sources(command_name: &str) -> Result<ConfigSources> {
+    ensure_dirs().await?;
+
+    let md_path = get_command_dir().join(format!("{}.md", command_name));
+    let md_exists = md_path.exists();
+
+    let mut md_fields = Vec::new();
+    if md_exists {
+        let md_data = parse_md_file(&md_path).await?;
+        md_fields.extend(md_data.frontmatter.keys().cloned());
+        if !md_data.body.trim().is_empty() {
+            md_fields.push("template".to_string());
+        }
+    }
+
+    let config = read_config().await?;
+    let json_section = config
+        .get("command")
+        .and_then(|v| v.as_object())
+        .and_then(|obj| obj.get(command_name));
+
+    let json_fields = json_section
+        .and_then(|value| value.as_object())
+        .map(|obj| obj.keys().cloned().collect::<Vec<_>>())
+        .unwrap_or_default();
+
+    let sources = ConfigSources {
+        md: SourceInfo {
+            exists: md_exists,
+            path: md_exists.then(|| md_path.display().to_string()),
+            fields: md_fields,
+        },
+        json: SourceInfo {
+            exists: json_section.is_some(),
+            path: Some(get_config_file().display().to_string()),
+            fields: json_fields,
+        },
+    };
+
+    Ok(sources)
+}
+
+/// Create new command as .md file
+pub async fn create_command(command_name: &str, config: &HashMap<String, Value>) -> Result<()> {
+    ensure_dirs().await?;
+
+    let md_path = get_command_dir().join(format!("{}.md", command_name));
+
+    // Check if command already exists
+    if md_path.exists() {
+        return Err(anyhow!(
+            "Command {} already exists as .md file",
+            command_name
+        ));
+    }
+
+    let existing_config = read_config().await?;
+    if let Some(commands) = existing_config.get("command").and_then(|v| v.as_object()) {
+        if commands.contains_key(command_name) {
+            return Err(anyhow!(
+                "Command {} already exists in opencode.json",
+                command_name
+            ));
+        }
+    }
+
+    // Extract template from config
+    let mut frontmatter = config.clone();
+    let template = frontmatter
+        .remove("template")
+        .and_then(|v| v.as_str().map(|s| s.to_string()))
+        .unwrap_or_default();
+
+    // Write .md file
+    write_md_file(&md_path, &frontmatter, &template).await?;
+    info!("Created new command: {}", command_name);
+
+    Ok(())
+}
+
+/// Update existing command using field-level logic
+pub async fn update_command(
+    command_name: &str,
+    updates: &HashMap<String, Value>,
+) -> Result<()> {
+    ensure_dirs().await?;
+
+    let md_path = get_command_dir().join(format!("{}.md", command_name));
+    let md_exists = md_path.exists();
+
+    let mut md_data = if md_exists {
+        Some(parse_md_file(&md_path).await?)
+    } else {
+        None
+    };
+
+    let mut config = read_config().await?;
+    let mut existing_command = config
+        .get("command")
+        .and_then(|v| v.as_object())
+        .and_then(|obj| obj.get(command_name))
+        .and_then(|v| v.as_object())
+        .cloned()
+        .unwrap_or_else(Map::new);
+    let had_json_fields = !existing_command.is_empty();
+
+    let mut md_modified = false;
+    let mut json_modified = false;
+
+    for (field, value) in updates.iter() {
+        // Handle explicit removals (null payload) for scalar/frontmatter/JSON fields
+        if value.is_null() {
+            if md_exists {
+                if let Some(ref mut data) = md_data {
+                    if data.frontmatter.remove(field).is_some() {
+                        md_modified = true;
+                    }
+                }
+            }
+            if existing_command.remove(field).is_some() {
+                json_modified = true;
+            }
+            continue;
+        }
+
+        // Special handling for template field
+        if field == "template" {
+            let normalized_value = value.as_str().unwrap_or("").to_string();
+
+            if md_exists {
+                if let Some(ref mut data) = md_data {
+                    data.body = normalized_value.clone();
+                    md_modified = true;
+                }
+                continue;
+            } else if let Some(template_ref) = existing_command.get("template").and_then(|v| v.as_str()) {
+                if is_prompt_file_reference(template_ref) {
+                    if let Some(template_file_path) = resolve_prompt_file_path(template_ref) {
+                        write_prompt_file(&template_file_path, &normalized_value).await?;
+                    } else {
+                        return Err(anyhow!(
+                            "Invalid template file reference for command {}",
+                            command_name
+                        ));
+                    }
+                    continue;
+                }
+            }
+
+            // Write template directly to JSON entry (file ref or inline string)
+            existing_command.insert("template".to_string(), Value::String(normalized_value));
+            json_modified = true;
+
+            continue;
+        }
+
+        // Check where field is currently defined
+        let in_md = md_data
+            .as_ref()
+            .map(|data| data.frontmatter.contains_key(field))
+            .unwrap_or(false);
+        let in_json = existing_command.contains_key(field);
+
+        if in_md {
+            // Update in .md frontmatter
+            if let Some(ref mut data) = md_data {
+                data.frontmatter.insert(field.clone(), value.clone());
+                md_modified = true;
+            }
+        } else if in_json {
+            // Update in opencode.json while preserving existing fields
+            existing_command.insert(field.clone(), value.clone());
+            json_modified = true;
+        } else {
+            // Field not defined - apply priority rules
+            if md_exists && !existing_command.is_empty() {
+                // Both exist → add to opencode.json (higher priority)
+                existing_command.insert(field.clone(), value.clone());
+                json_modified = true;
+            } else if md_exists {
+                // Only .md exists → add to frontmatter
+                if let Some(ref mut data) = md_data {
+                    data.frontmatter.insert(field.clone(), value.clone());
+                    md_modified = true;
+                }
+            } else {
+                // Only JSON or built-in → add/create section in opencode.json
+                existing_command.insert(field.clone(), value.clone());
+                json_modified = true;
+            }
+        }
+    }
+
+    // Write changes
+    if md_modified {
+        if let Some(data) = md_data {
+            write_md_file(&md_path, &data.frontmatter, &data.body).await?;
+        }
+    }
+
+    if json_modified {
+        // Avoid creating a new JSON section for commands that already live exclusively in .md
+        if md_exists && !had_json_fields {
+            json_modified = false;
+        }
+    }
+
+    if json_modified {
+        if !config.is_object() {
+            config = Value::Object(Map::new());
+        }
+
+        let config_obj = config.as_object_mut().unwrap();
+        let commands_entry = config_obj
+            .entry("command".to_string())
+            .or_insert_with(|| Value::Object(Map::new()));
+
+        if !commands_entry.is_object() {
+            *commands_entry = Value::Object(Map::new());
+        }
+
+        let commands_obj = commands_entry.as_object_mut().unwrap();
+        commands_obj.insert(command_name.to_string(), Value::Object(existing_command));
+
+        write_config(&config).await?;
+    }
+
+    info!(
+        "Updated command: {} (md: {}, json: {})",
+        command_name, md_modified, json_modified
+    );
+
+    Ok(())
+}
+
+/// Delete command configuration
+pub async fn delete_command(command_name: &str) -> Result<()> {
+    let md_path = get_command_dir().join(format!("{}.md", command_name));
+    let mut deleted = false;
+
+    // 1. Delete .md file if exists
+    if md_path.exists() {
+        fs::remove_file(&md_path).await?;
+        info!("Deleted command .md file: {}", md_path.display());
+        deleted = true;
+    }
+
+    // 2. Remove section from opencode.json if exists
+    let mut config = read_config().await?;
+    if let Some(commands) = config.get_mut("command").and_then(|v| v.as_object_mut()) {
+        if commands.remove(command_name).is_some() {
+            write_config(&config).await?;
+            info!("Removed command from opencode.json: {}", command_name);
+            deleted = true;
+        }
+    }
+
+    // 3. If nothing was deleted, throw error
+    if !deleted {
+        return Err(anyhow!("Command \"{}\" not found", command_name));
+    }
+
+    Ok(())
+}
diff --git a/packages/desktop/src-tauri/src/opencode_manager.rs b/packages/desktop/src-tauri/src/opencode_manager.rs
new file mode 100644
index 00000000..4f8f2240
--- /dev/null
+++ b/packages/desktop/src-tauri/src/opencode_manager.rs
@@ -0,0 +1,577 @@
+use anyhow::{anyhow, Result};
+use log::{debug, info, warn};
+use once_cell::sync::Lazy;
+use parking_lot::RwLock;
+use regex::Regex;
+use reqwest::Client;
+use std::{
+    collections::HashMap,
+    path::{Path, PathBuf},
+    sync::{
+        atomic::{AtomicBool, Ordering},
+        Arc,
+    },
+    time::Duration,
+};
+use tokio::{
+    io::{AsyncBufReadExt, BufReader},
+    process::{Child, Command},
+    sync::Mutex,
+    time::timeout,
+};
+
+static URL_REGEX: Lazy<Regex> = Lazy::new(|| {
+    Regex::new(r#"https?://[^:\s]+:(?P<port>\d+)(?P<path>/[^\s"']*)?"#).expect("valid regex")
+});
+
+const FIRST_SIGNAL_TIMEOUT_MS: u64 = 750;
+const READY_CHECK_TIMEOUT_MS: u64 = 20000;
+const READY_CHECK_INTERVAL_MS: u64 = 400;
+
+#[derive(Clone)]
+pub struct OpenCodeManager {
+    binary: Option<String>,
+    args: Vec<String>,
+    env: HashMap<String, String>,
+    working_dir: Arc<RwLock<PathBuf>>,
+    desired_port: u16,
+    child: Arc<Mutex<Option<Child>>>,
+    port: Arc<RwLock<Option<u16>>>,
+    api_prefix: Arc<RwLock<String>>,
+    is_ready: Arc<AtomicBool>,
+    shutting_down: Arc<AtomicBool>,
+    http_client: Client,
+}
+
+fn normalize_api_prefix(prefix: &str) -> String {
+    let trimmed = prefix.trim();
+    if trimmed.is_empty() || trimmed == "/" {
+        return String::new();
+    }
+
+    let mut normalized = trimmed.trim_end_matches('/').to_string();
+    if !normalized.starts_with('/') {
+        normalized.insert(0, '/');
+    }
+    normalized
+}
+
+impl OpenCodeManager {
+    pub fn new_with_directory(initial_dir: Option<PathBuf>) -> Self {
+        let desired_port = std::env::var("OPENCHAMBER_OPENCODE_PORT")
+            .ok()
+            .and_then(|raw| raw.parse::<u16>().ok())
+            .unwrap_or(0);
+
+        let binary = resolve_opencode_binary();
+
+        if let Some(ref bin) = binary {
+            if !Path::new(bin).is_absolute() {
+                info!("[desktop:opencode] using PATH-resolved binary: {}", bin);
+            } else {
+                info!("[desktop:opencode] using binary: {}", bin);
+            }
+        } else {
+            warn!("[desktop:opencode] OpenCode CLI not found - app will run in limited mode");
+        }
+
+        let mut args = vec![
+            "serve".to_string(),
+            "--port".to_string(),
+            desired_port.to_string(),
+        ];
+        if let Ok(config) = std::env::var("OPENCHAMBER_OPENCODE_CONFIG") {
+            if !config.is_empty() {
+                args.push("--config".to_string());
+                args.push(config);
+            }
+        }
+
+        let env = build_augmented_env();
+        let working_dir = initial_dir
+            .unwrap_or_else(|| std::env::current_dir().unwrap_or_else(|_| PathBuf::from(".")));
+
+        info!(
+            "[desktop:opencode] Initial working directory: {:?}",
+            working_dir
+        );
+
+        Self {
+            binary,
+            args,
+            env,
+            working_dir: Arc::new(RwLock::new(working_dir)),
+            desired_port,
+            child: Arc::new(Mutex::new(None)),
+            port: Arc::new(RwLock::new(None)),
+            api_prefix: Arc::new(RwLock::new(String::new())),
+            is_ready: Arc::new(AtomicBool::new(false)),
+            shutting_down: Arc::new(AtomicBool::new(false)),
+            http_client: Client::builder()
+                .timeout(Duration::from_secs(5))
+                .build()
+                .unwrap(),
+        }
+    }
+
+    pub fn is_cli_available(&self) -> bool {
+        self.binary.is_some()
+    }
+
+    pub async fn ensure_running(&self) -> Result<()> {
+        if self.binary.is_none() {
+            return Err(anyhow!("OpenCode CLI is not available"));
+        }
+
+        let mut guard = self.child.lock().await;
+        if let Some(child) = guard.as_mut() {
+            if child.try_wait()?.is_none() && self.is_ready.load(Ordering::SeqCst) {
+                return Ok(());
+            }
+        }
+
+        self.is_ready.store(false, Ordering::SeqCst);
+        let child = self.spawn_process().await?;
+        *guard = Some(child);
+        drop(guard);
+
+        // Wait for port detection from logs
+        if self.desired_port == 0 {
+            self.wait_for_port_detection().await?;
+        }
+
+        // Detect API prefix early so proxy can forward correctly
+        let _ = self.detect_api_prefix().await;
+
+        // Wait for OpenCode to become ready by polling endpoints
+        self.wait_for_ready().await?;
+
+        self.is_ready.store(true, Ordering::SeqCst);
+        if let Some(port) = self.current_port() {
+            info!("[desktop:opencode] ready on port {port}");
+        }
+        Ok(())
+    }
+
+    pub async fn restart(&self) -> Result<()> {
+        info!("[desktop:opencode] restarting...");
+        self.is_ready.store(false, Ordering::SeqCst);
+
+        self.graceful_stop().await?;
+
+        // Brief delay to let OS release resources
+        tokio::time::sleep(Duration::from_millis(250)).await;
+
+        // Reset state
+        if self.desired_port == 0 {
+            *self.port.write() = None;
+        }
+        *self.api_prefix.write() = String::new();
+
+        self.ensure_running().await
+    }
+
+    pub async fn shutdown(&self) -> Result<()> {
+        self.shutting_down.store(true, Ordering::SeqCst);
+        self.is_ready.store(false, Ordering::SeqCst);
+        self.graceful_stop().await
+    }
+
+    pub async fn set_working_directory(&self, new_dir: PathBuf) -> Result<()> {
+        *self.working_dir.write() = new_dir;
+        Ok(())
+    }
+
+    pub fn get_working_directory(&self) -> PathBuf {
+        self.working_dir.read().clone()
+    }
+
+    async fn detect_api_prefix(&self) -> Result<()> {
+        let Some(port) = self.current_port() else {
+            return Err(anyhow!("Cannot detect API prefix without port"));
+        };
+
+        // Try empty prefix first (OpenCode default), then /api (some installations)
+        let candidates = ["", "/api"];
+        for candidate in candidates {
+            let base = if candidate.is_empty() {
+                format!("http://127.0.0.1:{port}")
+            } else {
+                format!("http://127.0.0.1:{port}{candidate}")
+            };
+
+            let url = format!("{base}/config");
+            match self.http_client.get(&url).send().await {
+                Ok(resp) if resp.status().is_success() => {
+                    // Validate it's actually JSON config, not HTML
+                    if let Ok(text) = resp.text().await {
+                        if text.trim().starts_with('{') || text.trim().starts_with('[') {
+                            info!("[desktop:opencode] Detected API prefix: {:?}", candidate);
+                            *self.api_prefix.write() = normalize_api_prefix(candidate);
+                            return Ok(());
+                        }
+                    }
+                }
+                _ => continue,
+            }
+        }
+
+        info!("[desktop:opencode] No API prefix detected, using empty prefix");
+        *self.api_prefix.write() = String::new();
+        Ok(())
+    }
+
+    pub fn current_port(&self) -> Option<u16> {
+        *self.port.read()
+    }
+
+    pub fn api_prefix(&self) -> String {
+        self.api_prefix.read().clone()
+    }
+
+    pub fn is_ready(&self) -> bool {
+        self.is_ready.load(Ordering::SeqCst)
+    }
+
+    pub fn rewrite_path(&self, incoming_path: &str) -> String {
+        // Strip /api prefix to get OpenCode path
+        let result = incoming_path
+            .strip_prefix("/api")
+            .map(|rest| if rest.is_empty() { "/" } else { rest })
+            .unwrap_or(incoming_path)
+            .to_string();
+
+        debug!(
+            "[opencode_manager] rewrite_path: '{}' -> '{}'",
+            incoming_path, result
+        );
+        result
+    }
+
+    async fn spawn_process(&self) -> Result<Child> {
+        let binary = self.binary.as_ref().ok_or_else(|| {
+            anyhow!("Cannot spawn process: OpenCode CLI is not available")
+        })?;
+
+        info!(
+            "[desktop:opencode] launching {} {:?}",
+            binary, self.args
+        );
+
+        let working_dir = self.working_dir.read().clone();
+        let mut cmd = Command::new(binary);
+        cmd.args(&self.args)
+            .current_dir(&working_dir)
+            .stdout(std::process::Stdio::piped())
+            .stderr(std::process::Stdio::piped())
+            .kill_on_drop(false);
+
+        for (key, value) in &self.env {
+            cmd.env(key, value);
+        }
+
+        let mut child = cmd.spawn().map_err(|e| {
+            if e.kind() == std::io::ErrorKind::NotFound {
+                anyhow!(
+                    "OpenCode binary '{}' not found. Set OPENCODE_BINARY or ensure it's in PATH.",
+                    binary
+                )
+            } else {
+                anyhow!("Failed to spawn OpenCode: {}", e)
+            }
+        })?;
+
+        // Set port immediately if pre-configured
+        if self.desired_port > 0 {
+            *self.port.write() = Some(self.desired_port);
+        }
+
+        // Wait for first signal (stdout/stderr) within 750ms to confirm startup
+        let first_signal_received = Arc::new(AtomicBool::new(false));
+
+        if let Some(stdout) = child.stdout.take() {
+            let signal_flag = first_signal_received.clone();
+            self.spawn_output_reader(stdout, "stdout", move || {
+                signal_flag.store(true, Ordering::SeqCst);
+            });
+        }
+
+        if let Some(stderr) = child.stderr.take() {
+            let signal_flag = first_signal_received.clone();
+            self.spawn_output_reader(stderr, "stderr", move || {
+                signal_flag.store(true, Ordering::SeqCst);
+            });
+        }
+
+        // Wait for first signal or timeout
+        let start = std::time::Instant::now();
+        while start.elapsed() < Duration::from_millis(FIRST_SIGNAL_TIMEOUT_MS) {
+            if first_signal_received.load(Ordering::SeqCst) {
+                break;
+            }
+            if let Ok(Some(_)) = child.try_wait() {
+                return Err(anyhow!("OpenCode process exited immediately after spawn"));
+            }
+            tokio::time::sleep(Duration::from_millis(50)).await;
+        }
+
+        Ok(child)
+    }
+
+    fn spawn_output_reader<F>(
+        &self,
+        stream: impl tokio::io::AsyncRead + Unpin + Send + 'static,
+        label: &'static str,
+        on_first_line: F,
+    ) where
+        F: FnOnce() + Send + 'static,
+    {
+        let manager = self.clone();
+        let first_line_flag = Arc::new(Mutex::new(Some(on_first_line)));
+
+        tauri::async_runtime::spawn(async move {
+            let reader = BufReader::new(stream);
+            let mut lines = reader.lines();
+            while let Ok(Some(line)) = lines.next_line().await {
+                // Trigger first signal callback
+                if let Some(callback) = first_line_flag.lock().await.take() {
+                    callback();
+                }
+
+                debug!("[opencode:{label}] {line}");
+                manager.ingest_output_line(&line);
+            }
+        });
+    }
+
+    fn ingest_output_line(&self, line: &str) {
+        if let Some(captures) = URL_REGEX.captures(line) {
+            if let Some(port_match) = captures
+                .name("port")
+                .and_then(|m| m.as_str().parse::<u16>().ok())
+            {
+                *self.port.write() = Some(port_match);
+            }
+
+            if let Some(path_match) = captures.name("path") {
+                let value = path_match.as_str();
+                if !value.is_empty() && value != "/" {
+                    *self.api_prefix.write() = value.to_string();
+                }
+            }
+        }
+    }
+
+    async fn wait_for_port_detection(&self) -> Result<()> {
+        let start = std::time::Instant::now();
+        let timeout_duration = Duration::from_secs(15);
+
+        while start.elapsed() < timeout_duration {
+            if self.current_port().is_some() {
+                return Ok(());
+            }
+            tokio::time::sleep(Duration::from_millis(100)).await;
+        }
+
+        Err(anyhow!("OpenCode did not report port within 15 seconds"))
+    }
+
+    async fn wait_for_ready(&self) -> Result<()> {
+        let Some(port) = self.current_port() else {
+            return Err(anyhow!("Cannot check readiness without port"));
+        };
+
+        let deadline = tokio::time::Instant::now() + Duration::from_millis(READY_CHECK_TIMEOUT_MS);
+        let mut last_error: Option<String> = None;
+
+        while tokio::time::Instant::now() < deadline {
+            let api_prefix = self.api_prefix();
+
+            // Try /health, /config, /agent endpoints
+            match self.check_endpoints(port, &api_prefix).await {
+                Ok(()) => {
+                    // Once ready, attempt to detect and persist the API prefix for proxying
+                    let _ = self.detect_api_prefix().await;
+                    return Ok(());
+                }
+                Err(e) => {
+                    last_error = Some(e.to_string());
+                }
+            }
+
+            tokio::time::sleep(Duration::from_millis(READY_CHECK_INTERVAL_MS)).await;
+        }
+
+        Err(anyhow!(
+            "OpenCode not ready after {}ms: {}",
+            READY_CHECK_TIMEOUT_MS,
+            last_error.unwrap_or_else(|| "no error details".to_string())
+        ))
+    }
+
+    async fn check_endpoints(&self, port: u16, prefix: &str) -> Result<()> {
+        let base_url = format!("http://127.0.0.1:{port}{prefix}");
+
+        // Check /health
+        let health_url = format!("{base_url}/health");
+        let health_resp = self.http_client.get(&health_url).send().await?;
+        if !health_resp.status().is_success() {
+            return Err(anyhow!("/health returned {}", health_resp.status()));
+        }
+
+        // Check /config
+        let config_url = format!("{base_url}/config");
+        let config_resp = self.http_client.get(&config_url).send().await?;
+        if !config_resp.status().is_success() {
+            return Err(anyhow!("/config returned {}", config_resp.status()));
+        }
+
+        // Check /agent
+        let agent_url = format!("{base_url}/agent");
+        let agent_resp = self.http_client.get(&agent_url).send().await?;
+        if !agent_resp.status().is_success() {
+            return Err(anyhow!("/agent returned {}", agent_resp.status()));
+        }
+
+        Ok(())
+    }
+
+    async fn graceful_stop(&self) -> Result<()> {
+        let mut guard = self.child.lock().await;
+        let Some(mut child) = guard.take() else {
+            return Ok(());
+        };
+
+        if child.try_wait()?.is_some() {
+            // Already exited
+            return Ok(());
+        }
+
+        // SIGTERM
+        #[cfg(unix)]
+        {
+            use nix::{
+                sys::signal::{kill, Signal},
+                unistd::Pid,
+            };
+            if let Some(id) = child.id() {
+                let _ = kill(Pid::from_raw(id as i32), Signal::SIGTERM);
+                info!("[desktop:opencode] sent SIGTERM");
+            }
+        }
+        #[cfg(windows)]
+        {
+            let _ = child.kill().await;
+        }
+
+        // Wait 3 seconds for graceful exit
+        match timeout(Duration::from_secs(3), child.wait()).await {
+            Ok(_) => {
+                info!("[desktop:opencode] exited gracefully");
+                return Ok(());
+            }
+            Err(_) => {
+                warn!("[desktop:opencode] did not exit after SIGTERM, sending SIGKILL");
+            }
+        }
+
+        // SIGKILL
+        let _ = child.kill().await;
+
+        // Wait up to 5 seconds for hard kill
+        match timeout(Duration::from_secs(5), child.wait()).await {
+            Ok(_) => {
+                info!("[desktop:opencode] exited after SIGKILL");
+            }
+            Err(_) => {
+                warn!("[desktop:opencode] unresponsive after SIGKILL, continuing anyway");
+            }
+        }
+
+        Ok(())
+    }
+}
+
+/// Check if CLI binary exists (can be called dynamically for polling)
+pub fn check_cli_exists() -> bool {
+    if std::env::var("OPENCHAMBER_DISABLE_CLI").is_ok() {
+        return false;
+    }
+    resolve_opencode_binary().is_some()
+}
+
+fn resolve_opencode_binary() -> Option<String> {
+    if std::env::var("OPENCHAMBER_DISABLE_CLI").is_ok() {
+        return None;
+    }
+
+    // Check explicit override
+    if let Ok(value) = std::env::var("OPENCODE_BINARY") {
+        if !value.is_empty() && Path::new(&value).exists() {
+            info!("[desktop:opencode] using binary from OPENCODE_BINARY: {}", value);
+            return Some(value);
+        }
+    }
+
+    // Find in PATH
+    if let Ok(output) = std::process::Command::new("which")
+        .arg("opencode")
+        .output()
+    {
+        if output.status.success() {
+            let path = String::from_utf8_lossy(&output.stdout).trim().to_string();
+            if !path.is_empty() {
+                info!("[desktop:opencode] found binary in PATH: {}", path);
+                return Some(path);
+            }
+        }
+    }
+
+    warn!("[desktop:opencode] opencode binary not found in PATH");
+    None
+}
+
+fn build_augmented_env() -> HashMap<String, String> {
+    let mut env: HashMap<String, String> = std::env::vars().collect();
+    if let Ok(login_path) = detect_login_shell_path() {
+        let current = env.get("PATH").cloned().unwrap_or_default();
+        env.insert("PATH".to_string(), merge_paths(&login_path, &current));
+    }
+    env
+}
+
+fn merge_paths(login_path: &str, current: &str) -> String {
+    let mut segments = Vec::new();
+    let mut seen = std::collections::HashSet::new();
+
+    for part in login_path.split(':').chain(current.split(':')) {
+        if part.is_empty() || seen.contains(part) {
+            continue;
+        }
+        seen.insert(part.to_string());
+        segments.push(part);
+    }
+
+    segments.join(":")
+}
+
+fn detect_login_shell_path() -> Result<String> {
+    #[cfg(not(unix))]
+    {
+        Err(anyhow!("login shell path unsupported"))
+    }
+    #[cfg(unix)]
+    {
+        use std::process::Command;
+        let shell = std::env::var("SHELL").unwrap_or_else(|_| "/bin/zsh".into());
+        let output = Command::new(&shell)
+            .arg("-lic")
+            .arg("echo -n $PATH")
+            .output()?;
+        if output.status.success() {
+            Ok(String::from_utf8_lossy(&output.stdout).to_string())
+        } else {
+            Err(anyhow!("shell PATH detection failed"))
+        }
+    }
+}
diff --git a/packages/desktop/src-tauri/src/session_activity.rs b/packages/desktop/src-tauri/src/session_activity.rs
new file mode 100644
index 00000000..dfedd9d0
--- /dev/null
+++ b/packages/desktop/src-tauri/src/session_activity.rs
@@ -0,0 +1,326 @@
+use std::{
+    collections::HashMap,
+    sync::Arc,
+    time::Duration,
+};
+
+use anyhow::Result;
+use futures_util::TryStreamExt;
+use log::{debug, info, warn};
+use reqwest::Client;
+use serde::Deserialize;
+use serde_json::Value;
+use tauri::{AppHandle, Emitter};
+use tokio::sync::Mutex;
+use tokio_util::io::StreamReader;
+
+use crate::DesktopRuntime;
+
+#[derive(Deserialize)]
+struct EventEnvelope {
+    #[serde(rename = "type")]
+    event_type: String,
+    #[serde(default)]
+    properties: Value,
+}
+
+#[derive(Clone, Debug, PartialEq)]
+pub enum ActivityPhase {
+    Idle,
+    Busy,
+    Cooldown,
+}
+
+pub fn spawn_session_activity_tracker(
+    app: AppHandle,
+    runtime: DesktopRuntime,
+) -> tauri::async_runtime::JoinHandle<()> {
+    tauri::async_runtime::spawn(async move {
+        let client = Client::builder()
+            .timeout(Duration::from_secs(24 * 60 * 60))
+            .tcp_keepalive(Some(Duration::from_secs(30)))
+            .build()
+            .expect("failed to build reqwest client");
+
+        let mut shutdown_rx = runtime.subscribe_shutdown();
+        let phases = Arc::new(Mutex::new(HashMap::<String, ActivityPhase>::new()));
+        let cooldowns = Arc::new(Mutex::new(HashMap::<String, tauri::async_runtime::JoinHandle<()>>::new()));
+
+        loop {
+            tokio::select! {
+                _ = shutdown_rx.recv() => {
+                    info!("[desktop:activity] Shutdown received, stopping SSE listener");
+                    break;
+                }
+                _ = async {
+                    // Reset stale phases to idle before connecting so UI doesn't stay stuck on "working" after wake.
+                    reset_and_emit_all_phases(&app, phases.clone(), cooldowns.clone()).await;
+
+                    if let Err(err) = run_once(&app, &runtime, &client, phases.clone(), cooldowns.clone()).await {
+                        warn!("[desktop:activity] SSE loop error: {err:?}");
+                    }
+                    tokio::time::sleep(Duration::from_secs(2)).await;
+                } => {}
+            }
+        }
+    })
+}
+
+async fn run_once(
+    app: &AppHandle,
+    runtime: &DesktopRuntime,
+    client: &Client,
+    phases: Arc<Mutex<HashMap<String, ActivityPhase>>>,
+    cooldowns: Arc<Mutex<HashMap<String, tauri::async_runtime::JoinHandle<()>>>>,
+) -> Result<()> {
+    let opencode = runtime.opencode_manager();
+
+    let port = match opencode.current_port() {
+        Some(port) => port,
+        None => {
+            warn!("[desktop:activity] OpenCode port unavailable; will retry");
+            tokio::time::sleep(Duration::from_secs(2)).await;
+            return Ok(());
+        }
+    };
+
+    let prefix = opencode.api_prefix();
+    let mut url = format!("http://127.0.0.1:{port}{}/event", prefix);
+
+    if let Some(dir) = opencode.get_working_directory().to_str().map(|s| s.to_string()) {
+        let mut parsed = reqwest::Url::parse(&url)?;
+        parsed
+            .query_pairs_mut()
+            .append_pair("directory", &dir);
+        url = parsed.to_string();
+    }
+
+    debug!("[desktop:activity] Connecting SSE for activity phases: {url}");
+
+    let response = client
+        .get(&url)
+        .header("accept", "text/event-stream")
+        .header("accept-encoding", "identity")
+        .send()
+        .await?;
+
+    debug!(
+        "[desktop:activity] SSE response status={} headers={:?}",
+        response.status(),
+        response.headers()
+    );
+
+    if !response.status().is_success() {
+        warn!(
+            "[desktop:activity] SSE connect failed with status {}",
+            response.status()
+        );
+        tokio::time::sleep(Duration::from_secs(2)).await;
+        return Ok(());
+    }
+
+    use tokio::io::AsyncBufReadExt;
+
+    let stream = response
+        .bytes_stream()
+        .map_err(|err| std::io::Error::new(std::io::ErrorKind::Other, err));
+    let mut reader = StreamReader::new(stream);
+    let mut buf = Vec::new();
+    let mut data_lines: Vec<String> = Vec::new();
+
+    loop {
+        buf.clear();
+        let bytes_read = match reader.read_until(b'\n', &mut buf).await {
+            Ok(n) => n,
+            Err(err) => {
+                warn!("[desktop:activity] Read error in SSE stream: {err:?}");
+                return Err(err.into());
+            }
+        };
+        if bytes_read == 0 {
+            break;
+        }
+
+        let line = match std::str::from_utf8(&buf) {
+            Ok(s) => s.trim_end_matches(&['\r', '\n'][..]).to_string(),
+            Err(err) => {
+                warn!("[desktop:activity] Non-UTF8 SSE chunk: {err}");
+                continue;
+            }
+        };
+
+        if line.is_empty() {
+            if data_lines.is_empty() {
+                continue;
+            }
+            let raw = data_lines.join("\n");
+            data_lines.clear();
+
+            match serde_json::from_str::<EventEnvelope>(&raw) {
+                Ok(event) => handle_event(app, event, phases.clone(), cooldowns.clone()).await,
+                Err(err) => {
+                    warn!("[desktop:activity] Failed to parse SSE data: {err}; raw={raw}");
+                }
+            }
+            continue;
+        }
+
+        if let Some(rest) = line.strip_prefix("data:") {
+            data_lines.push(rest.trim_start().to_string());
+        }
+    }
+
+    Ok(())
+}
+
+async fn handle_event(
+    app: &AppHandle,
+    event: EventEnvelope,
+    phases: Arc<Mutex<HashMap<String, ActivityPhase>>>,
+    cooldowns: Arc<Mutex<HashMap<String, tauri::async_runtime::JoinHandle<()>>>>,
+) {
+    match event.event_type.as_str() {
+        "session.status" => {
+            let session_id = event
+                .properties
+                .get("sessionID")
+                .and_then(Value::as_str)
+                .map(|s| s.to_string());
+            let status = event
+                .properties
+                .get("status")
+                .and_then(|s| s.get("type"))
+                .and_then(Value::as_str);
+
+            if let (Some(id), Some(status_type)) = (session_id, status) {
+                let phase = if status_type == "busy" || status_type == "retry" {
+                    ActivityPhase::Busy
+                } else {
+                    ActivityPhase::Idle
+                };
+                set_phase(app, &id, phase, phases.clone(), cooldowns.clone()).await;
+            }
+        }
+        "message.updated" => {
+            if let Some(info) = event.properties.get("info") {
+                let role = info.get("role").and_then(Value::as_str).unwrap_or_default();
+                if role != "assistant" {
+                    return;
+                }
+
+                let finish = info.get("finish").and_then(Value::as_str);
+                if finish != Some("stop") {
+                    return;
+                }
+
+                let session_id = info
+                    .get("sessionID")
+                    .and_then(Value::as_str)
+                    .map(|s| s.to_string());
+
+                if let Some(id) = session_id {
+                    // If current phase is busy, move to cooldown for 2s then idle
+                    let current = { phases.lock().await.get(&id).cloned() };
+                    if matches!(current, Some(ActivityPhase::Busy)) {
+                        set_phase(app, &id, ActivityPhase::Cooldown, phases.clone(), cooldowns.clone()).await;
+
+                        let app_clone = app.clone();
+                        let phases_clone = phases.clone();
+                        let cooldowns_clone = cooldowns.clone();
+                        let id_clone = id.clone();
+                        let handle = tauri::async_runtime::spawn(async move {
+                            tokio::time::sleep(Duration::from_secs(2)).await;
+                            let current = { phases_clone.lock().await.get(&id_clone).cloned() };
+                            if matches!(current, Some(ActivityPhase::Cooldown)) {
+                                set_phase(&app_clone, &id_clone, ActivityPhase::Idle, phases_clone, cooldowns_clone).await;
+                            }
+                        });
+
+                        // Store cooldown handle to cancel if phase changes earlier
+                        let mut cd = cooldowns.lock().await;
+                        if let Some(prev) = cd.remove(&id) {
+                            prev.abort();
+                        }
+                        cd.insert(id, handle);
+                    }
+                }
+            }
+        }
+        _ => {}
+    }
+}
+
+async fn set_phase(
+    app: &AppHandle,
+    session_id: &str,
+    phase: ActivityPhase,
+    phases: Arc<Mutex<HashMap<String, ActivityPhase>>>,
+    cooldowns: Arc<Mutex<HashMap<String, tauri::async_runtime::JoinHandle<()>>>>,
+) {
+    {
+        let mut map = phases.lock().await;
+        let current = map.get(session_id);
+        if current == Some(&phase) {
+            return;
+        }
+        map.insert(session_id.to_string(), phase.clone());
+
+        // Cancel cooldown timer when leaving cooldown
+        if !matches!(phase, ActivityPhase::Cooldown) {
+            if let Some(handle) = cooldowns.lock().await.remove(session_id) {
+                handle.abort();
+            }
+        }
+    }
+
+    // Emit to webview so UI stays in sync
+    let payload = serde_json::json!({
+        "sessionId": session_id,
+        "phase": match phase {
+            ActivityPhase::Idle => "idle",
+            ActivityPhase::Busy => "busy",
+            ActivityPhase::Cooldown => "cooldown",
+        }
+    });
+
+    let _ = app.emit("openchamber:session-activity", payload);
+}
+
+async fn reset_and_emit_all_phases(
+    app: &AppHandle,
+    phases: Arc<Mutex<HashMap<String, ActivityPhase>>>,
+    cooldowns: Arc<Mutex<HashMap<String, tauri::async_runtime::JoinHandle<()>>>>,
+) {
+    // Cancel any cooldown timers and set all phases to idle to avoid stale "busy" after wake.
+    {
+        let mut cd = cooldowns.lock().await;
+        for handle in cd.values() {
+            handle.abort();
+        }
+        cd.clear();
+    }
+
+    let snapshot = {
+        let mut guard = phases.lock().await;
+        for value in guard.values_mut() {
+            *value = ActivityPhase::Idle;
+        }
+        guard.clone()
+    };
+
+    if snapshot.is_empty() {
+        return;
+    }
+
+    for (session_id, phase) in snapshot {
+        let payload = serde_json::json!({
+            "sessionId": session_id,
+            "phase": match phase {
+                ActivityPhase::Idle => "idle",
+                ActivityPhase::Busy => "busy",
+                ActivityPhase::Cooldown => "cooldown",
+            }
+        });
+        let _ = app.emit("openchamber:session-activity", payload);
+    }
+}
diff --git a/packages/desktop/src-tauri/src/window_state.rs b/packages/desktop/src-tauri/src/window_state.rs
new file mode 100644
index 00000000..5bd81745
--- /dev/null
+++ b/packages/desktop/src-tauri/src/window_state.rs
@@ -0,0 +1,167 @@
+use anyhow::{anyhow, Result};
+use serde::{Deserialize, Serialize};
+use std::{
+    path::PathBuf,
+    sync::{Arc, Mutex},
+};
+use tauri::{LogicalPosition, LogicalSize, WebviewWindow, Window};
+use tokio::fs as async_fs;
+
+const WINDOW_STATE_FILE: &str = "window-state.json";
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct WindowState {
+    pub width: f64,
+    pub height: f64,
+    pub x: f64,
+    pub y: f64,
+    pub is_maximized: bool,
+}
+
+impl Default for WindowState {
+    fn default() -> Self {
+        Self {
+            width: 1280.0,
+            height: 800.0,
+            x: 0.0,
+            y: 0.0,
+            is_maximized: false,
+        }
+    }
+}
+
+#[derive(Serialize, Deserialize)]
+struct WindowStateFile {
+    #[serde(rename = "windowState")]
+    pub window_state: WindowState,
+}
+
+#[derive(Clone)]
+pub struct WindowStateManager {
+    inner: Arc<Mutex<WindowState>>,
+}
+
+impl WindowStateManager {
+    pub fn new(initial: WindowState) -> Self {
+        Self {
+            inner: Arc::new(Mutex::new(initial)),
+        }
+    }
+
+    pub fn snapshot(&self) -> WindowState {
+        self.inner.lock().expect("window state poisoned").clone()
+    }
+
+    pub fn update_position(&self, x: f64, y: f64, is_maximized: bool) {
+        if is_maximized {
+            return;
+        }
+        if let Ok(mut state) = self.inner.lock() {
+            if !state.is_maximized {
+                state.x = x;
+                state.y = y;
+            }
+        }
+    }
+
+    pub fn update_size(&self, width: f64, height: f64, is_maximized: bool) {
+        if let Ok(mut state) = self.inner.lock() {
+            if !is_maximized {
+                state.width = width;
+                state.height = height;
+            }
+            state.is_maximized = is_maximized;
+        }
+    }
+}
+
+fn state_file_path() -> Result<PathBuf> {
+    let mut path = dirs::home_dir().ok_or_else(|| anyhow!("No home directory"))?;
+    path.push(".config");
+    path.push("openchamber");
+    path.push(WINDOW_STATE_FILE);
+    Ok(path)
+}
+
+pub async fn load_window_state() -> Result<Option<WindowState>> {
+    let path = state_file_path()?;
+    match async_fs::read(&path).await {
+        Ok(bytes) => {
+            let file: WindowStateFile = serde_json::from_slice(&bytes)?;
+            Ok(Some(file.window_state))
+        }
+        Err(err) if err.kind() == std::io::ErrorKind::NotFound => Ok(None),
+        Err(err) => Err(err.into()),
+    }
+}
+
+pub async fn save_window_state(state: &WindowState) -> Result<()> {
+    let path = state_file_path()?;
+    if let Some(parent) = path.parent() {
+        async_fs::create_dir_all(parent).await?;
+    }
+    let payload = WindowStateFile {
+        window_state: state.clone(),
+    };
+    let data = serde_json::to_vec_pretty(&payload)?;
+    async_fs::write(&path, data).await?;
+    Ok(())
+}
+
+pub fn apply_window_state(window: &WebviewWindow, state: &WindowState) -> Result<()> {
+    let mut normalized = state.clone();
+    clamp_to_visible_region(window, &mut normalized);
+
+    if normalized.width > 0.0 && normalized.height > 0.0 {
+        let _ = window.set_size(LogicalSize::new(normalized.width, normalized.height));
+    }
+    let _ = window.set_position(LogicalPosition::new(normalized.x, normalized.y));
+    if state.is_maximized {
+        let _ = window.maximize();
+    } else {
+        let _ = window.unmaximize();
+    }
+    Ok(())
+}
+
+pub async fn persist_window_state(window: &Window, manager: &WindowStateManager) -> Result<()> {
+    let mut snapshot = manager.snapshot();
+    let is_maximized = window.is_maximized().unwrap_or(snapshot.is_maximized);
+    snapshot.is_maximized = is_maximized;
+
+    if !is_maximized {
+        let scale_factor = window.scale_factor().unwrap_or(1.0);
+        if let Ok(size) = window.outer_size() {
+            let logical: LogicalSize<f64> = size.to_logical(scale_factor);
+            snapshot.width = logical.width.max(200.0);
+            snapshot.height = logical.height.max(200.0);
+        }
+        if let Ok(position) = window.outer_position() {
+            let logical: LogicalPosition<f64> = position.to_logical(scale_factor);
+            snapshot.x = logical.x;
+            snapshot.y = logical.y;
+        }
+    }
+
+    save_window_state(&snapshot).await
+}
+
+fn clamp_to_visible_region(window: &WebviewWindow, state: &mut WindowState) {
+    let monitor = match window.current_monitor() {
+        Ok(Some(monitor)) => monitor,
+        _ => return,
+    };
+    let scale_factor = monitor.scale_factor();
+    let monitor_size: LogicalSize<f64> = monitor.size().to_logical(scale_factor);
+    let monitor_position: LogicalPosition<f64> = monitor.position().to_logical(scale_factor);
+
+    state.width = state.width.clamp(400.0, monitor_size.width);
+    state.height = state.height.clamp(300.0, monitor_size.height);
+
+    let max_x = monitor_position.x + (monitor_size.width - state.width).max(0.0);
+    let max_y = monitor_position.y + (monitor_size.height - state.height).max(0.0);
+
+    state.x = state.x.clamp(monitor_position.x, max_x);
+    state.y = state.y.clamp(monitor_position.y, max_y);
+}
diff --git a/packages/desktop/src-tauri/tauri.conf.json b/packages/desktop/src-tauri/tauri.conf.json
new file mode 100644
index 00000000..efaf61d6
--- /dev/null
+++ b/packages/desktop/src-tauri/tauri.conf.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
+  "productName": "OpenChamber",
+  "version": "1.0.0",
+  "identifier": "ai.opencode.openchamber",
+  "build": {
+    "beforeDevCommand": "pnpm dev",
+    "beforeBuildCommand": "pnpm build",
+    "devUrl": "http://127.0.0.1:1421",
+    "frontendDist": "../dist"
+  },
+  "app": {
+    "windows": [
+      {
+        "label": "main",
+        "title": "OpenChamber",
+        "transparent": true,
+        "width": 1280,
+        "height": 800,
+        "resizable": true,
+        "fullscreen": false,
+        "decorations": true,
+        "hiddenTitle": true,
+        "titleBarStyle": "Overlay",
+        "trafficLightPosition": {
+          "x": 17,
+          "y": 26
+        },
+        "visible": true,
+        "backgroundThrottling": "disabled"
+      }
+    ],
+    "security": {
+      "csp": null
+    },
+    "macOSPrivateApi": true
+  },
+  "bundle": {
+    "active": true,
+    "icon": [
+      "icons/icon.icns",
+      "icons/icon.png"
+    ],
+    "macOS": {
+      "exceptionDomain": "localhost",
+      "minimumSystemVersion": "14.0",
+      "signingIdentity": null,
+      "infoPlist": "Info.plist"
+    },
+    "createUpdaterArtifacts": true
+  },
+  "plugins": {
+    "updater": {
+      "endpoints": [
+        "https://github.com/btriapitsyn/openchamber/releases/latest/download/latest.json"
+      ],
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEU0NjI5NDJGNEU0QzFEMTYKUldRV0hVeE9MNVJpNUdRemdsbm8wQ2YxQkU4KzBOOEg3TkpXZzIzb244N3Y0R3I4N2FtUk1NMUEK"
+    }
+  }
+}
diff --git a/packages/desktop/src/api/diagnostics.ts b/packages/desktop/src/api/diagnostics.ts
new file mode 100644
index 00000000..169df787
--- /dev/null
+++ b/packages/desktop/src/api/diagnostics.ts
@@ -0,0 +1,32 @@
+
+import type { DiagnosticsAPI } from '@openchamber/ui/lib/api/types';
+
+type LogResponse = {
+  fileName?: string;
+  content?: string;
+};
+
+const normalizePayload = (payload: LogResponse): { fileName: string; content: string } => ({
+  fileName: typeof payload.fileName === 'string' && payload.fileName.trim().length > 0 ? payload.fileName : 'desktop.log',
+  content: typeof payload.content === 'string' ? payload.content : '',
+});
+
+export const createDesktopDiagnosticsAPI = (): DiagnosticsAPI => ({
+  async downloadLogs() {
+    try {
+      const { safeInvoke } = await import('../lib/tauriCallbackManager');
+      const result = await safeInvoke<LogResponse>('fetch_desktop_logs', {}, {
+        timeout: 10000,
+        onCancel: () => {
+          console.warn('[DiagnosticsAPI] Fetch desktop logs operation timed out');
+        }
+      });
+      return normalizePayload(result ?? {});
+    } catch (error) {
+      if (error instanceof Error) {
+        throw error;
+      }
+      throw new Error('Failed to download desktop logs');
+    }
+  },
+});
diff --git a/packages/desktop/src/api/files.ts b/packages/desktop/src/api/files.ts
new file mode 100644
index 00000000..27f3e11c
--- /dev/null
+++ b/packages/desktop/src/api/files.ts
@@ -0,0 +1,114 @@
+
+import { safeInvoke } from '../lib/tauriCallbackManager';
+import type { DirectoryListResult, FileSearchQuery, FileSearchResult, FilesAPI } from '@openchamber/ui/lib/api/types';
+
+type ListDirectoryResponse = DirectoryListResult & {
+  path?: string;
+  entries: Array<
+    DirectoryListResult['entries'][number] & {
+      isFile?: boolean;
+      isSymbolicLink?: boolean;
+    }
+  >;
+};
+
+type SearchFilesResponse = {
+  root: string;
+  count: number;
+  files: Array<{
+    name: string;
+    path: string;
+    relativePath: string;
+    extension?: string;
+  }>;
+};
+
+const normalizePath = (path: string): string => path.replace(/\\/g, '/');
+
+const normalizeDirectoryPayload = (result: ListDirectoryResponse): DirectoryListResult => ({
+  directory: normalizePath(result.directory || result.path || ''),
+  entries: Array.isArray(result.entries)
+    ? result.entries.map((entry) => ({
+        name: entry.name || '',
+        path: normalizePath(entry.path || ''),
+        isDirectory: entry.isDirectory ?? false,
+        size: entry.size ?? 0,
+        modified: (entry as { modified?: string }).modified ?? new Date().toISOString(),
+      }))
+    : [],
+});
+
+export const createDesktopFilesAPI = (): FilesAPI => ({
+  async listDirectory(path: string): Promise<DirectoryListResult> {
+    try {
+      const result = await safeInvoke<ListDirectoryResponse>('list_directory', {
+        path: normalizePath(path),
+        includeHidden: false
+      }, {
+        timeout: 10000,
+        onCancel: () => {
+          console.warn('[FilesAPI] List directory operation timed out');
+        }
+      });
+
+      return normalizeDirectoryPayload(result);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      throw new Error(message || 'Failed to list directory');
+    }
+  },
+
+  async search(payload: FileSearchQuery): Promise<FileSearchResult[]> {
+    try {
+      const normalizedDirectory =
+        typeof payload.directory === 'string' && payload.directory.length > 0
+          ? normalizePath(payload.directory)
+          : undefined;
+
+      const result = await safeInvoke<SearchFilesResponse>('search_files', {
+        directory: normalizedDirectory,
+        query: payload.query,
+        max_results: payload.maxResults || 100
+      }, {
+        timeout: 15000,
+        onCancel: () => {
+          console.warn('[FilesAPI] Search files operation timed out');
+        }
+      });
+
+      if (!result || !Array.isArray(result.files)) {
+        return [];
+      }
+
+      return result.files.map<FileSearchResult>((file) => ({
+        path: normalizePath(file.path),
+        preview: file.relativePath ? [normalizePath(file.relativePath)] : undefined,
+      }));
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      throw new Error(message || 'Failed to search files');
+    }
+  },
+
+  async createDirectory(path: string): Promise<{ success: boolean; path: string }> {
+    try {
+      const normalizedPath = normalizePath(path);
+      const result = await safeInvoke<{ success: boolean; path: string }>('create_directory', {
+        path: normalizedPath
+      }, {
+        timeout: 5000,
+        onCancel: () => {
+          console.warn('[FilesAPI] Create directory operation timed out');
+        }
+      });
+
+      return {
+        success: Boolean(result?.success),
+        path: result?.path ? normalizePath(result.path) : normalizedPath,
+      };
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      throw new Error(message || 'Failed to create directory');
+    }
+  },
+});
\ No newline at end of file
diff --git a/packages/desktop/src/api/git.ts b/packages/desktop/src/api/git.ts
new file mode 100644
index 00000000..2edb2c68
--- /dev/null
+++ b/packages/desktop/src/api/git.ts
@@ -0,0 +1,230 @@
+
+import { safeInvoke } from '../lib/tauriCallbackManager';
+import type {
+  GitAPI,
+  GitStatus,
+  GitDiffResponse,
+  GetGitDiffOptions,
+  GitFileDiffResponse,
+  GitBranch,
+  GitDeleteBranchPayload,
+  GitDeleteRemoteBranchPayload,
+  GeneratedCommitMessage,
+  GitWorktreeInfo,
+  GitAddWorktreePayload,
+  GitRemoveWorktreePayload,
+  CreateGitCommitOptions,
+  GitCommitResult,
+  GitPushResult,
+  GitPullResult,
+  GitLogOptions,
+  GitLogResponse,
+  GitCommitFilesResponse,
+  GitIdentitySummary,
+  GitIdentityProfile
+} from '@openchamber/ui/lib/api/types';
+
+async function safeGitInvoke<T>(command: string, args?: Record<string, unknown>): Promise<T> {
+  try {
+    return await safeInvoke<T>(command, args, {
+      timeout: 120000,
+      onCancel: () => {
+        console.warn(`[GitAPI] Git operation ${command} did not complete within 120s; it may still be running.`);
+      }
+    });
+  } catch (error) {
+    const message = typeof error === 'string' ? error : (error as Error).message || 'Unknown error';
+    throw new Error(message);
+  }
+}
+
+export const createDesktopGitAPI = (): GitAPI => ({
+  async checkIsGitRepository(directory: string): Promise<boolean> {
+    return safeGitInvoke<boolean>('check_is_git_repository', { directory });
+  },
+
+  async getGitStatus(directory: string): Promise<GitStatus> {
+    return safeGitInvoke<GitStatus>('get_git_status', { directory });
+  },
+
+  async getGitDiff(directory: string, options: GetGitDiffOptions): Promise<GitDiffResponse> {
+    const diff = await safeGitInvoke<string>('get_git_diff', {
+      directory,
+      pathStr: options.path,
+      staged: options.staged,
+      contextLines: options.contextLines
+    });
+    return { diff };
+  },
+
+  async getGitFileDiff(directory: string, options: { path: string }): Promise<GitFileDiffResponse> {
+    const [original, modified] = await safeGitInvoke<[string, string]>('get_git_file_diff', {
+      directory,
+      pathStr: options.path,
+    });
+    return {
+      original: original ?? '',
+      modified: modified ?? '',
+      path: options.path,
+    };
+  },
+
+  async revertGitFile(directory: string, filePath: string): Promise<void> {
+    return safeGitInvoke<void>('revert_git_file', { directory, filePath });
+  },
+
+  async isLinkedWorktree(directory: string): Promise<boolean> {
+    return safeGitInvoke<boolean>('is_linked_worktree', { directory });
+  },
+
+  async getGitBranches(directory: string): Promise<GitBranch> {
+    return safeGitInvoke<GitBranch>('get_git_branches', { directory });
+  },
+
+  async deleteGitBranch(directory: string, payload: GitDeleteBranchPayload): Promise<{ success: boolean }> {
+    await safeGitInvoke<void>('delete_git_branch', {
+      directory,
+      branch: payload.branch,
+      force: payload.force
+    });
+    return { success: true };
+  },
+
+  async deleteRemoteBranch(directory: string, payload: GitDeleteRemoteBranchPayload): Promise<{ success: boolean }> {
+    await safeGitInvoke<void>('delete_remote_branch', {
+      directory,
+      branch: payload.branch,
+      remote: payload.remote
+    });
+    return { success: true };
+  },
+
+  async generateCommitMessage(directory: string, files: string[]): Promise<{ message: GeneratedCommitMessage }> {
+    const response = await safeGitInvoke<{ message: GeneratedCommitMessage }>('generate_commit_message', {
+      directory,
+      files
+    });
+    return response;
+  },
+
+  async listGitWorktrees(directory: string): Promise<GitWorktreeInfo[]> {
+    return safeGitInvoke<GitWorktreeInfo[]>('list_git_worktrees', { directory });
+  },
+
+  async addGitWorktree(directory: string, payload: GitAddWorktreePayload): Promise<{ success: boolean; path: string; branch: string }> {
+    await safeGitInvoke<void>('add_git_worktree', {
+      directory,
+      pathStr: payload.path,
+      branch: payload.branch,
+      createBranch: payload.createBranch
+    });
+    return { success: true, path: payload.path, branch: payload.branch };
+  },
+
+  async removeGitWorktree(directory: string, payload: GitRemoveWorktreePayload): Promise<{ success: boolean }> {
+    await safeGitInvoke<void>('remove_git_worktree', {
+      directory,
+      pathStr: payload.path,
+      force: payload.force
+    });
+    return { success: true };
+  },
+
+  async ensureOpenChamberIgnored(directory: string): Promise<void> {
+    return safeGitInvoke<void>('ensure_openchamber_ignored', { directory });
+  },
+
+  async createGitCommit(directory: string, message: string, options?: CreateGitCommitOptions): Promise<GitCommitResult> {
+    return safeGitInvoke<GitCommitResult>('create_git_commit', {
+      directory,
+      message,
+      addAll: options?.addAll,
+      files: options?.files
+    });
+  },
+
+  async gitPush(directory: string, options?: { remote?: string; branch?: string; options?: string[] | Record<string, unknown> }): Promise<GitPushResult> {
+    return safeGitInvoke<GitPushResult>('git_push', {
+      directory,
+      remote: options?.remote,
+      branch: options?.branch,
+      options: options?.options
+    });
+  },
+
+  async gitPull(directory: string, options?: { remote?: string; branch?: string }): Promise<GitPullResult> {
+    return safeGitInvoke<GitPullResult>('git_pull', {
+      directory,
+      remote: options?.remote,
+      branch: options?.branch
+    });
+  },
+
+  async gitFetch(directory: string, options?: { remote?: string; branch?: string }): Promise<{ success: boolean }> {
+    await safeGitInvoke<void>('git_fetch', {
+      directory,
+      remote: options?.remote
+    });
+    return { success: true };
+  },
+
+  async checkoutBranch(directory: string, branch: string): Promise<{ success: boolean; branch: string }> {
+    await safeGitInvoke<void>('checkout_branch', { directory, branch });
+    return { success: true, branch };
+  },
+
+  async createBranch(directory: string, name: string, startPoint?: string): Promise<{ success: boolean; branch: string }> {
+    await safeGitInvoke<void>('create_branch', {
+      directory,
+      name,
+      startPoint
+    });
+    return { success: true, branch: name };
+  },
+
+  async getGitLog(directory: string, options?: GitLogOptions): Promise<GitLogResponse> {
+    return safeGitInvoke<GitLogResponse>('get_git_log', {
+      directory,
+      maxCount: options?.maxCount,
+      from: options?.from,
+      to: options?.to,
+      file: options?.file
+    });
+  },
+
+  async getCommitFiles(directory: string, hash: string): Promise<GitCommitFilesResponse> {
+    return safeGitInvoke<GitCommitFilesResponse>('get_commit_files', {
+      directory,
+      hash
+    });
+  },
+
+  async getCurrentGitIdentity(directory: string): Promise<GitIdentitySummary | null> {
+    try {
+      return await safeGitInvoke<GitIdentitySummary>('get_current_git_identity', { directory });
+    } catch {
+      return null;
+    }
+  },
+
+  async setGitIdentity(directory: string, profileId: string): Promise<{ success: boolean; profile: GitIdentityProfile }> {
+    const profile = await safeGitInvoke<GitIdentityProfile>('set_git_identity', { directory, profileId });
+    return { success: true, profile };
+  },
+
+  async getGitIdentities(): Promise<GitIdentityProfile[]> {
+    return safeGitInvoke<GitIdentityProfile[]>('get_git_identities');
+  },
+
+  async createGitIdentity(profile: GitIdentityProfile): Promise<GitIdentityProfile> {
+    return safeGitInvoke<GitIdentityProfile>('create_git_identity', { profile });
+  },
+
+  async updateGitIdentity(id: string, updates: GitIdentityProfile): Promise<GitIdentityProfile> {
+    return safeGitInvoke<GitIdentityProfile>('update_git_identity', { id, updates });
+  },
+
+  async deleteGitIdentity(id: string): Promise<void> {
+    return safeGitInvoke<void>('delete_git_identity', { id });
+  },
+});
diff --git a/packages/desktop/src/api/index.ts b/packages/desktop/src/api/index.ts
new file mode 100644
index 00000000..949c3110
--- /dev/null
+++ b/packages/desktop/src/api/index.ts
@@ -0,0 +1,57 @@
+import type { RuntimeAPIs, TerminalHandlers } from '@openchamber/ui/lib/api/types';
+import { createDesktopTerminalAPI } from './terminal';
+import { createDesktopGitAPI } from './git';
+import { createDesktopFilesAPI } from './files';
+import { createDesktopSettingsAPI } from './settings';
+import { createDesktopPermissionsAPI } from './permissions';
+import { createDesktopDiagnosticsAPI } from './diagnostics';
+import { createDesktopNotificationsAPI } from './notifications';
+import { createDesktopToolsAPI } from './tools';
+
+const activeTerminalConnections = new Set<string>();
+
+export const createDesktopAPIs = (): RuntimeAPIs & { cleanup?: () => void } => {
+  const terminalAPI = createDesktopTerminalAPI();
+  const originalConnect = terminalAPI.connect.bind(terminalAPI);
+
+  const wrappedTerminalAPI = {
+    ...terminalAPI,
+    connect: (sessionId: string, handlers: TerminalHandlers) => {
+      activeTerminalConnections.add(sessionId);
+      const connection = originalConnect(sessionId, handlers);
+
+      const originalClose = connection.close;
+      return {
+        ...connection,
+        close: () => {
+          activeTerminalConnections.delete(sessionId);
+          originalClose();
+        },
+      };
+    },
+  };
+
+  return {
+    runtime: { platform: 'desktop', isDesktop: true, label: 'tauri-bootstrap' },
+    terminal: wrappedTerminalAPI,
+    git: createDesktopGitAPI(),
+    files: createDesktopFilesAPI(),
+    settings: createDesktopSettingsAPI(),
+    permissions: createDesktopPermissionsAPI(),
+    notifications: createDesktopNotificationsAPI(),
+    diagnostics: createDesktopDiagnosticsAPI(),
+    tools: createDesktopToolsAPI(),
+    cleanup: () => {
+      console.info('[DesktopAPIs] Performing cleanup...');
+
+      const activeConnections = Array.from(activeTerminalConnections);
+      activeConnections.forEach(sessionId => {
+        console.info(`[DesktopAPIs] Closing terminal session: ${sessionId}`);
+
+        activeTerminalConnections.delete(sessionId);
+      });
+
+      console.info(`[DesktopAPIs] Cleanup completed, closed ${activeConnections.length} terminal connections`);
+    },
+  };
+};
diff --git a/packages/desktop/src/api/notifications.ts b/packages/desktop/src/api/notifications.ts
new file mode 100644
index 00000000..71f6f0b6
--- /dev/null
+++ b/packages/desktop/src/api/notifications.ts
@@ -0,0 +1,58 @@
+
+import type { NotificationsAPI, NotificationPayload } from '@openchamber/ui/lib/api/types';
+import { isPermissionGranted, requestPermission } from '@tauri-apps/plugin-notification';
+import { safeInvoke } from '../lib/tauriCallbackManager';
+
+export const requestInitialNotificationPermission = async (): Promise<void> => {
+  try {
+    if (typeof window !== 'undefined' && 'Notification' in window) {
+      const permission = await Notification.requestPermission();
+      if (permission !== 'granted') {
+        console.warn('[notifications] Notification permission not granted');
+      }
+    }
+  } catch (error) {
+    console.error('[notifications] Failed to request permission:', error);
+  }
+};
+
+export const createDesktopNotificationsAPI = (): NotificationsAPI => ({
+  async notifyAgentCompletion(payload?: NotificationPayload): Promise<boolean> {
+    try {
+      let granted = await isPermissionGranted();
+      if (!granted) {
+        const permission = await requestPermission();
+        granted = permission === 'granted';
+      }
+
+      if (!granted) {
+        console.warn('[notifications] Cannot send notification: Permission denied');
+        return false;
+      }
+
+      await safeInvoke(
+        'desktop_notify',
+        { payload },
+        {
+          timeout: 5000,
+          onCancel: () => {
+            console.warn('[NotificationsAPI] Notify operation timed out');
+          },
+        },
+      );
+      return true;
+    } catch (error) {
+      console.error('[notifications] Failed to send notification:', error);
+      return false;
+    }
+  },
+
+  async canNotify(): Promise<boolean> {
+    try {
+      return await isPermissionGranted();
+    } catch (error) {
+      console.warn('[notifications] Failed to check notification permission:', error);
+      return false;
+    }
+  }
+});
diff --git a/packages/desktop/src/api/permissions.ts b/packages/desktop/src/api/permissions.ts
new file mode 100644
index 00000000..32e874c7
--- /dev/null
+++ b/packages/desktop/src/api/permissions.ts
@@ -0,0 +1,49 @@
+import type { DirectoryPermissionRequest, DirectoryPermissionResult, PermissionsAPI, StartAccessingResult } from '@openchamber/ui/lib/api/types';
+
+export const createDesktopPermissionsAPI = (): PermissionsAPI => ({
+  async requestDirectoryAccess(request: DirectoryPermissionRequest): Promise<DirectoryPermissionResult> {
+    try {
+      const { safeInvoke } = await import('../lib/tauriCallbackManager');
+      const result = await safeInvoke<DirectoryPermissionResult>('request_directory_access', { request }, {
+        timeout: 30000,
+        onCancel: () => {
+          console.warn('[PermissionsAPI] Request directory access operation timed out');
+        }
+      });
+      return result;
+    } catch (error) {
+      console.error('[desktop] Error requesting directory access:', error);
+      return { success: false, error: error instanceof Error ? error.message : String(error) };
+    }
+  },
+  async startAccessingDirectory(path: string): Promise<StartAccessingResult> {
+    try {
+      const { safeInvoke } = await import('../lib/tauriCallbackManager');
+      const result = await safeInvoke<StartAccessingResult>('start_accessing_directory', { path }, {
+        timeout: 10000,
+        onCancel: () => {
+          console.warn('[PermissionsAPI] Start accessing directory operation timed out');
+        }
+      });
+      return result;
+    } catch (error) {
+      console.error('[desktop] Error starting directory access:', error);
+      return { success: false, error: error instanceof Error ? error.message : String(error) };
+    }
+  },
+  async stopAccessingDirectory(path: string): Promise<StartAccessingResult> {
+    try {
+      const { safeInvoke } = await import('../lib/tauriCallbackManager');
+      const result = await safeInvoke<StartAccessingResult>('stop_accessing_directory', { path }, {
+        timeout: 5000,
+        onCancel: () => {
+          console.warn('[PermissionsAPI] Stop accessing directory operation timed out');
+        }
+      });
+      return result;
+    } catch (error) {
+      console.error('[desktop] Error stopping directory access:', error);
+      return { success: false, error: error instanceof Error ? error.message : String(error) };
+    }
+  },
+});
diff --git a/packages/desktop/src/api/settings.ts b/packages/desktop/src/api/settings.ts
new file mode 100644
index 00000000..69049d2d
--- /dev/null
+++ b/packages/desktop/src/api/settings.ts
@@ -0,0 +1,58 @@
+import type { SettingsAPI, SettingsLoadResult, SettingsPayload } from '@openchamber/ui/lib/api/types';
+
+const sanitizePayload = (data: unknown): SettingsPayload => {
+  if (!data || typeof data !== 'object') {
+    return {};
+  }
+  return data as SettingsPayload;
+};
+
+export const createDesktopSettingsAPI = (): SettingsAPI => ({
+  async load(): Promise<SettingsLoadResult> {
+    try {
+      const { safeInvoke } = await import('../lib/tauriCallbackManager');
+      const result = await safeInvoke<{ settings: unknown; source: 'desktop' | 'web' }>('load_settings', {}, {
+        timeout: 5000,
+        onCancel: () => {
+          console.warn('[SettingsAPI] Load settings operation timed out');
+        }
+      });
+      return {
+        settings: sanitizePayload(result.settings),
+        source: result.source,
+      };
+    } catch (error) {
+      throw new Error(`Failed to load settings: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  },
+
+  async save(changes: Partial<SettingsPayload>): Promise<SettingsPayload> {
+    try {
+      const { safeInvoke } = await import('../lib/tauriCallbackManager');
+      const result = await safeInvoke<unknown>('save_settings', { changes }, {
+        timeout: 5000,
+        onCancel: () => {
+          console.warn('[SettingsAPI] Save settings operation timed out');
+        }
+      });
+      return sanitizePayload(result);
+    } catch (error) {
+      throw new Error(`Failed to save settings: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  },
+
+  async restartOpenCode(): Promise<{ restarted: boolean }> {
+    try {
+      const { safeInvoke } = await import('../lib/tauriCallbackManager');
+      const result = await safeInvoke<{ restarted: boolean }>('restart_opencode', {}, {
+        timeout: 10000,
+        onCancel: () => {
+          console.warn('[SettingsAPI] Restart OpenCode operation timed out');
+        }
+      });
+      return { restarted: result.restarted };
+    } catch (error) {
+      throw new Error(`Failed to restart OpenCode: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  },
+});
diff --git a/packages/desktop/src/api/terminal.ts b/packages/desktop/src/api/terminal.ts
new file mode 100644
index 00000000..2a8b960c
--- /dev/null
+++ b/packages/desktop/src/api/terminal.ts
@@ -0,0 +1,123 @@
+import { safeInvoke, safeListen } from '../lib/tauriCallbackManager';
+import type {
+  TerminalAPI,
+  TerminalHandlers,
+  CreateTerminalOptions,
+  ResizeTerminalPayload,
+  TerminalSession,
+  TerminalStreamEvent
+} from '@openchamber/ui/lib/api/types';
+
+async function safeTerminalInvoke<T>(command: string, args?: Record<string, unknown>): Promise<T> {
+  try {
+    return await safeInvoke<T>(command, args, {
+      timeout: 10000,
+      onCancel: () => {
+        console.warn(`[TerminalAPI] Command ${command} timed out`);
+      }
+    });
+  } catch (error) {
+    const message = typeof error === 'string' ? error : (error as Error).message || 'Unknown error';
+    throw new Error(message);
+  }
+}
+
+export const createDesktopTerminalAPI = (): TerminalAPI => ({
+  async createSession(options: CreateTerminalOptions): Promise<TerminalSession> {
+    const cols = options.cols ?? 80;
+    const rows = options.rows ?? 24;
+
+    const res = await safeTerminalInvoke<{ session_id: string }>('create_terminal_session', {
+        payload: {
+            cols,
+            rows,
+            cwd: options.cwd
+        }
+    });
+
+    return {
+        sessionId: res.session_id,
+        cols,
+        rows
+    };
+  },
+
+  connect(sessionId: string, handlers: TerminalHandlers) {
+    let unlistenFn: (() => void) | undefined;
+    let cancelled = false;
+    let isConnected = false;
+
+    const stopListening = () => {
+      if (unlistenFn) {
+        unlistenFn();
+        unlistenFn = undefined;
+        isConnected = false;
+      }
+    };
+
+    const startListening = async () => {
+      try {
+        const unlisten = await safeListen<TerminalStreamEvent>(`terminal://${sessionId}`, (event) => {
+          if (cancelled) {
+            return;
+          }
+
+          handlers.onEvent(event.payload);
+
+          if (event.payload?.type === 'exit') {
+            stopListening();
+          }
+        });
+
+        if (cancelled) {
+          unlisten();
+          return;
+        }
+
+        unlistenFn = unlisten;
+        isConnected = true;
+        handlers.onEvent({ type: 'connected' });
+      } catch (err) {
+        console.error('Failed to listen to terminal events:', err);
+        if (!cancelled) {
+          handlers.onError?.(err instanceof Error ? err : new Error(String(err)));
+        }
+      }
+    };
+
+    startListening();
+
+    return {
+      close: () => {
+        cancelled = true;
+        stopListening();
+      },
+      isConnected: () => isConnected,
+    };
+  },
+
+  async sendInput(sessionId: string, input: string): Promise<void> {
+    await safeTerminalInvoke('send_terminal_input', {
+
+      sessionId,
+      session_id: sessionId,
+      data: input,
+    });
+  },
+
+  async resize(payload: ResizeTerminalPayload): Promise<void> {
+    await safeTerminalInvoke('resize_terminal', {
+      sessionId: payload.sessionId,
+      session_id: payload.sessionId,
+      cols: payload.cols,
+      rows: payload.rows,
+    });
+  },
+
+  async close(sessionId: string): Promise<void> {
+    await safeTerminalInvoke('close_terminal', {
+      sessionId,
+      session_id: sessionId,
+    });
+  },
+});
diff --git a/packages/desktop/src/api/tools.ts b/packages/desktop/src/api/tools.ts
new file mode 100644
index 00000000..97f373a6
--- /dev/null
+++ b/packages/desktop/src/api/tools.ts
@@ -0,0 +1,22 @@
+import type { ToolsAPI } from '@openchamber/ui/lib/api/types';
+
+export const createDesktopToolsAPI = (): ToolsAPI => ({
+  async getAvailableTools(): Promise<string[]> {
+
+    const response = await fetch('/api/experimental/tool/ids');
+
+    if (!response.ok) {
+      throw new Error(`Tools API returned ${response.status} ${response.statusText}`);
+    }
+
+    const data = await response.json();
+
+    if (!Array.isArray(data)) {
+      throw new Error('Tools API returned invalid data format');
+    }
+
+    return data
+      .filter((tool: unknown): tool is string => typeof tool === 'string' && tool !== 'invalid')
+      .sort();
+  },
+});
diff --git a/packages/desktop/src/api/updater.ts b/packages/desktop/src/api/updater.ts
new file mode 100644
index 00000000..1dc99bdc
--- /dev/null
+++ b/packages/desktop/src/api/updater.ts
@@ -0,0 +1,105 @@
+export interface UpdateInfo {
+  available: boolean;
+  version?: string;
+  currentVersion: string;
+  body?: string;
+  date?: string;
+}
+
+export interface UpdateProgress {
+  downloaded: number;
+  total?: number;
+}
+
+interface Update {
+  version: string;
+  body?: string;
+  date?: string;
+  downloadAndInstall: (
+    onEvent?: (event: DownloadEvent) => void
+  ) => Promise<void>;
+}
+
+type DownloadEvent =
+  | { event: 'Started'; data: { contentLength?: number } }
+  | { event: 'Progress'; data: { chunkLength: number } }
+  | { event: 'Finished' };
+
+let cachedUpdate: Update | null = null;
+
+export async function checkForUpdates(): Promise<UpdateInfo> {
+  try {
+    const { check } = await import('@tauri-apps/plugin-updater');
+    const update = await check();
+    cachedUpdate = update;
+
+    if (!update) {
+      return {
+        available: false,
+        currentVersion: await getCurrentVersion(),
+      };
+    }
+
+    return {
+      available: true,
+      version: update.version,
+      currentVersion: await getCurrentVersion(),
+      body: update.body ?? undefined,
+      date: update.date ?? undefined,
+    };
+  } catch (error) {
+    console.error('[updater] Failed to check for updates:', error);
+    return {
+      available: false,
+      currentVersion: await getCurrentVersion(),
+    };
+  }
+}
+
+export async function downloadUpdate(
+  onProgress?: (progress: UpdateProgress) => void
+): Promise<void> {
+  let update = cachedUpdate;
+  if (!update) {
+    const { check } = await import('@tauri-apps/plugin-updater');
+    const checked = await check();
+    if (!checked) {
+      throw new Error('No update available');
+    }
+    update = checked;
+    cachedUpdate = checked;
+  }
+
+  let downloaded = 0;
+  let total: number | undefined;
+
+  await update.downloadAndInstall((event: DownloadEvent) => {
+    switch (event.event) {
+      case 'Started':
+        total = event.data.contentLength;
+        onProgress?.({ downloaded: 0, total });
+        break;
+      case 'Progress':
+        downloaded += event.data.chunkLength;
+        onProgress?.({ downloaded, total });
+        break;
+      case 'Finished':
+        onProgress?.({ downloaded: total ?? downloaded, total });
+        break;
+    }
+  });
+}
+
+export async function restartToUpdate(): Promise<void> {
+  const { relaunch } = await import('@tauri-apps/plugin-process');
+  await relaunch();
+}
+
+async function getCurrentVersion(): Promise<string> {
+  try {
+    const { getVersion } = await import('@tauri-apps/api/app');
+    return await getVersion();
+  } catch {
+    return 'unknown';
+  }
+}
diff --git a/packages/desktop/src/lib/bridge.ts b/packages/desktop/src/lib/bridge.ts
new file mode 100644
index 00000000..56cb8231
--- /dev/null
+++ b/packages/desktop/src/lib/bridge.ts
@@ -0,0 +1,157 @@
+
+import { safeInvoke, cleanupAllTauriCallbacks } from './tauriCallbackManager';
+
+type ServerInfo = {
+  server_port: number;
+  opencode_port?: number | null;
+  api_prefix?: string | null;
+  cli_available?: boolean;
+};
+
+declare global {
+  interface Window {
+    __OPENCHAMBER_DESKTOP_SERVER__?: {
+      origin: string;
+      opencodePort: number | null;
+      apiPrefix: string;
+      cliAvailable: boolean;
+    };
+  }
+}
+
+let bridgePromise: Promise<void> | null = null;
+
+export function initializeDesktopBridge(): Promise<void> {
+  if (!bridgePromise) {
+    bridgePromise = setupBridge();
+  }
+  return bridgePromise;
+}
+
+async function setupBridge(): Promise<void> {
+  try {
+    const info = await safeInvoke<ServerInfo>('desktop_server_info', {}, {
+      timeout: 10000,
+      onCancel: () => {
+        console.warn('[Bridge] Server info request timed out');
+      }
+    });
+    const origin = `http://127.0.0.1:${info.server_port}`;
+
+    window.__OPENCHAMBER_DESKTOP_SERVER__ = {
+      origin,
+      opencodePort: info.opencode_port ?? null,
+      apiPrefix: info.api_prefix ?? '',
+      cliAvailable: info.cli_available ?? false,
+    };
+
+    patchFetch(origin);
+    patchEventSource(origin);
+
+    const cleanupDevtools = registerDevtoolsShortcut();
+
+    if (typeof window !== 'undefined') {
+      (window as { __openchamberCleanup?: () => void }).__openchamberCleanup = () => {
+        cleanupDevtools();
+      };
+    }
+  } catch (error) {
+    console.error('[bridge] Failed to initialize bridge:', error);
+
+    if (typeof window !== 'undefined' && (window as { __openchamberCleanup?: () => void }).__openchamberCleanup) {
+      try {
+        (window as { __openchamberCleanup?: () => void }).__openchamberCleanup?.();
+      } catch (cleanupError) {
+        console.warn('[bridge] Cleanup during failed initialization failed:', cleanupError);
+      }
+      delete (window as { __openchamberCleanup?: () => void }).__openchamberCleanup;
+    }
+
+    cleanupAllTauriCallbacks();
+
+    throw error;
+  }
+}
+
+function patchFetch(origin: string) {
+  const originalFetch = window.fetch.bind(window);
+
+  const rewrite = (value: string): string => {
+    if (value.startsWith('http://') || value.startsWith('https://')) {
+      return value;
+    }
+    if (value.startsWith('//')) {
+      return `http:${value}`;
+    }
+    if (value.startsWith('/')) {
+      return `${origin}${value}`;
+    }
+    return value;
+  };
+
+  window.fetch = (input: RequestInfo | URL, init?: RequestInit) => {
+    if (typeof input === 'string') {
+      return originalFetch(rewrite(input), init);
+    }
+
+    if (input instanceof Request) {
+      const rewritten = rewrite(input.url);
+      if (rewritten === input.url) {
+        return originalFetch(input, init);
+      }
+      const cloned = new Request(rewritten, input);
+      return originalFetch(cloned, init);
+    }
+
+    if (input instanceof URL) {
+      return originalFetch(rewrite(input.toString()), init);
+    }
+
+    return originalFetch(input, init);
+  };
+}
+
+function patchEventSource(origin: string) {
+  if (typeof window.EventSource === 'undefined') {
+    return;
+  }
+
+  const OriginalEventSource = window.EventSource;
+
+  class DesktopEventSource extends OriginalEventSource {
+    constructor(url: string | URL, eventSourceInit?: EventSourceInit) {
+      const normalized = typeof url === 'string' ? url : url.toString();
+      super(normalized.startsWith('/') ? `${origin}${normalized}` : normalized, eventSourceInit);
+    }
+  }
+
+  Object.defineProperty(DesktopEventSource, 'name', { value: 'DesktopEventSource' });
+  Object.setPrototypeOf(DesktopEventSource.prototype, OriginalEventSource.prototype);
+  Object.setPrototypeOf(DesktopEventSource, OriginalEventSource);
+
+  window.EventSource = DesktopEventSource as unknown as typeof EventSource;
+}
+
+function registerDevtoolsShortcut() {
+  const handler = (event: KeyboardEvent) => {
+    const key = event.key?.toLowerCase();
+    if ((event.metaKey || event.ctrlKey) && event.altKey && key === 'i') {
+      event.preventDefault();
+
+      const devtoolsPromise = safeInvoke('desktop_open_devtools', {}, {
+        timeout: 2000,
+        onCancel: () => {
+          console.warn('[Bridge] Devtools invocation timed out');
+        }
+      });
+      devtoolsPromise.catch(() => {
+
+      });
+    }
+  };
+  window.addEventListener('keydown', handler);
+
+  return () => {
+    window.removeEventListener('keydown', handler);
+  };
+}
diff --git a/packages/desktop/src/lib/tauriCallbackManager.ts b/packages/desktop/src/lib/tauriCallbackManager.ts
new file mode 100644
index 00000000..0e706cb6
--- /dev/null
+++ b/packages/desktop/src/lib/tauriCallbackManager.ts
@@ -0,0 +1,308 @@
+
+
+import { invoke } from '@tauri-apps/api/core';
+import { listen, type UnlistenFn } from '@tauri-apps/api/event';
+
+interface PendingCallback {
+  id: string;
+  timestamp: number;
+  type: 'invoke' | 'listen';
+  cleanup?: () => void;
+  timeout?: NodeJS.Timeout;
+}
+
+interface CallbackManagerConfig {
+  maxCallbackAge?: number;
+  cleanupInterval?: number;
+  invokeTimeout?: number;
+  listenTimeout?: number;
+}
+
+class TauriCallbackManager {
+  private callbacks = new Map<string, PendingCallback>();
+  private isShuttingDown = false;
+  private cleanupTimer?: NodeJS.Timeout;
+  private config: Required<CallbackManagerConfig>;
+  private windowUnloadHandler?: () => void;
+
+  constructor(config: CallbackManagerConfig = {}) {
+    this.config = {
+      maxCallbackAge: 30000,
+      cleanupInterval: 5000,
+      invokeTimeout: 10000,
+      listenTimeout: 30000,
+      ...config,
+    };
+
+    this.setupWindowUnloadHandler();
+    this.startCleanupTimer();
+  }
+
+  register(callback: Omit<PendingCallback, 'timestamp'>): string {
+    if (this.isShuttingDown) {
+      console.warn('[TauriCallbackManager] Attempted to register callback during shutdown');
+      return callback.id;
+    }
+
+    const fullCallback: PendingCallback = {
+      ...callback,
+      timestamp: Date.now(),
+    };
+
+    this.callbacks.set(callback.id, fullCallback);
+
+    if (callback.type === 'listen' && this.config.listenTimeout > 0) {
+      const timeout = setTimeout(() => {
+        this.cleanupCallback(callback.id, 'timeout');
+      }, this.config.listenTimeout);
+      fullCallback.timeout = timeout;
+    }
+
+    return callback.id;
+  }
+
+  unregister(callbackId: string): void {
+    const callback = this.callbacks.get(callbackId);
+    if (!callback) {
+      return;
+    }
+
+    if (callback.timeout) {
+      clearTimeout(callback.timeout);
+    }
+
+    if (callback.cleanup) {
+      try {
+        callback.cleanup();
+      } catch (error) {
+        console.warn('[TauriCallbackManager] Cleanup function failed:', error);
+      }
+    }
+
+    this.callbacks.delete(callbackId);
+  }
+
+  private cleanupCallback(callbackId: string, reason: 'timeout' | 'shutdown' | 'expired'): void {
+    const callback = this.callbacks.get(callbackId);
+    if (!callback) {
+      return;
+    }
+
+    if (reason === 'expired') {
+      console.warn(`[TauriCallbackManager] Callback ${callbackId} expired and was cleaned up`);
+    }
+
+    this.unregister(callbackId);
+  }
+
+  cleanupAll(): void {
+    this.isShuttingDown = true;
+
+    if (this.cleanupTimer) {
+      clearInterval(this.cleanupTimer);
+      this.cleanupTimer = undefined;
+    }
+
+    const callbackIds = Array.from(this.callbacks.keys());
+    callbackIds.forEach(id => this.cleanupCallback(id, 'shutdown'));
+
+    this.callbacks.clear();
+  }
+
+  private startCleanupTimer(): void {
+    this.cleanupTimer = setInterval(() => {
+      if (this.isShuttingDown) {
+        return;
+      }
+
+      const now = Date.now();
+      const expiredCallbacks: string[] = [];
+
+      this.callbacks.forEach((callback, id) => {
+        const age = now - callback.timestamp;
+        if (age > this.config.maxCallbackAge) {
+          expiredCallbacks.push(id);
+        }
+      });
+
+      expiredCallbacks.forEach(id => this.cleanupCallback(id, 'expired'));
+    }, this.config.cleanupInterval);
+  }
+
+  private setupWindowUnloadHandler(): void {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    this.windowUnloadHandler = () => {
+      console.info('[TauriCallbackManager] Window unloading, cleaning up callbacks...');
+      this.cleanupAll();
+    };
+
+    window.addEventListener('beforeunload', this.windowUnloadHandler);
+    window.addEventListener('pagehide', this.windowUnloadHandler);
+  }
+
+  removeWindowHandlers(): void {
+    if (this.windowUnloadHandler && typeof window !== 'undefined') {
+      window.removeEventListener('beforeunload', this.windowUnloadHandler);
+      window.removeEventListener('pagehide', this.windowUnloadHandler);
+      this.windowUnloadHandler = undefined;
+    }
+  }
+
+  getStats(): { total: number; invoke: number; listen: number } {
+    const stats = { total: 0, invoke: 0, listen: 0 };
+
+    this.callbacks.forEach(callback => {
+      stats.total++;
+      stats[callback.type]++;
+    });
+
+    return stats;
+  }
+}
+
+let globalCallbackManager: TauriCallbackManager | null = null;
+
+export function getTauriCallbackManager(config?: CallbackManagerConfig): TauriCallbackManager {
+  if (!globalCallbackManager) {
+    globalCallbackManager = new TauriCallbackManager(config);
+  }
+  return globalCallbackManager;
+}
+
+export async function safeInvoke<T>(
+  command: string,
+  args?: Record<string, unknown>,
+  options?: {
+    timeout?: number;
+    onCancel?: () => void;
+  }
+): Promise<T> {
+  const manager = getTauriCallbackManager();
+  const callbackId = `invoke:${command}:${Date.now()}:${Math.random().toString(36).slice(2)}`;
+
+  let timeoutHandle: NodeJS.Timeout | undefined;
+  let settled = false;
+
+  manager.register({
+    id: callbackId,
+    type: 'invoke',
+  });
+
+  const clearAndUnregister = () => {
+    if (timeoutHandle) {
+      clearTimeout(timeoutHandle);
+      timeoutHandle = undefined;
+    }
+    manager.unregister(callbackId);
+  };
+
+  if (!options?.timeout || options.timeout <= 0) {
+    try {
+      const result = await invoke<T>(command, args);
+      clearAndUnregister();
+      return result;
+    } catch (error) {
+      clearAndUnregister();
+      throw error;
+    }
+  }
+
+  return new Promise<T>((resolve, reject) => {
+    timeoutHandle = setTimeout(() => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+
+      console.warn(`[safeInvoke] Command ${command} timed out after ${options.timeout}ms`);
+      try {
+        options.onCancel?.();
+      } catch (error) {
+        console.warn('[safeInvoke] onCancel handler threw:', error);
+      }
+
+      clearAndUnregister();
+      reject(new Error(`Command ${command} timed out after ${options.timeout}ms`));
+    }, options.timeout);
+
+    invoke<T>(command, args)
+      .then((result) => {
+        if (settled) {
+
+          return;
+        }
+        settled = true;
+        clearAndUnregister();
+        resolve(result);
+      })
+      .catch((error) => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        clearAndUnregister();
+        reject(error);
+      });
+  });
+}
+
+export async function safeListen<T>(
+  event: string,
+  handler: (event: { payload: T }) => void,
+  options?: {
+    timeout?: number;
+    onCancel?: () => void;
+  }
+): Promise<UnlistenFn> {
+  const manager = getTauriCallbackManager();
+  const callbackId = `listen:${event}:${Date.now()}:${Math.random().toString(36).slice(2)}`;
+
+  try {
+
+    manager.register({
+      id: callbackId,
+      type: 'listen',
+      cleanup: options?.onCancel,
+    });
+
+    const unlisten = await listen<T>(event, (event) => {
+
+      const currentManager = getTauriCallbackManager();
+      if (currentManager.getStats().total === 0) {
+        return;
+      }
+
+      try {
+        handler(event);
+      } catch (error) {
+        console.error(`[safeListen] Handler error for event ${event}:`, error);
+      }
+    });
+
+    const enhancedUnlisten = () => {
+      try {
+        unlisten();
+      } catch (error) {
+        console.warn(`[safeListen] Failed to unlisten from ${event}:`, error);
+      }
+      manager.unregister(callbackId);
+    };
+
+    return enhancedUnlisten;
+  } catch (error) {
+
+    manager.unregister(callbackId);
+    throw error;
+  }
+}
+
+export function cleanupAllTauriCallbacks(): void {
+  if (globalCallbackManager) {
+    globalCallbackManager.cleanupAll();
+    globalCallbackManager.removeWindowHandlers();
+    globalCallbackManager = null;
+  }
+}
diff --git a/packages/desktop/src/main.tsx b/packages/desktop/src/main.tsx
new file mode 100644
index 00000000..c27e1344
--- /dev/null
+++ b/packages/desktop/src/main.tsx
@@ -0,0 +1,254 @@
+import { createDesktopAPIs } from './api';
+import { requestInitialNotificationPermission } from './api/notifications';
+import { checkForUpdates, downloadUpdate, restartToUpdate, type UpdateInfo, type UpdateProgress } from './api/updater';
+import { initializeDesktopBridge } from './lib/bridge';
+
+import { invoke } from '@tauri-apps/api/core';
+import { listen } from '@tauri-apps/api/event';
+import type { RuntimeAPIs } from '@openchamber/ui/lib/api/types';
+import type { DesktopApi, DesktopSettings } from '@openchamber/ui/lib/desktop';
+import '@openchamber/ui/index.css';
+import '@openchamber/ui/styles/fonts';
+
+if (!(window as typeof globalThis & { process?: unknown }).process) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (window as typeof globalThis & { process?: any }).process = {
+    env: {},
+    platform: 'darwin',
+    version: 'v20.0.0',
+    versions: {},
+    cwd: () => '/',
+    nextTick: (fn: () => void) => Promise.resolve().then(() => fn()),
+  };
+}
+
+declare global {
+  interface Window {
+    __OPENCHAMBER_RUNTIME_APIS__?: RuntimeAPIs;
+    __OPENCHAMBER_HOME__?: string;
+    opencodeDesktop?: DesktopApi;
+  }
+}
+
+const cleanupFunctions: Array<() => void | Promise<void>> = [];
+
+try {
+  await initializeDesktopBridge();
+
+  const activityUnlisten = await listen('openchamber:session-activity', (event) => {
+    window.dispatchEvent(new CustomEvent('openchamber:session-activity', { detail: event.payload }));
+  });
+  cleanupFunctions.push(() => activityUnlisten());
+
+  requestInitialNotificationPermission().catch(err => {
+    console.error('[main] Failed to request notification permission:', err);
+  });
+
+  window.__OPENCHAMBER_RUNTIME_APIS__ = createDesktopAPIs();
+
+  cleanupFunctions.push(() => {
+    console.info('[main] Cleaning up runtime APIs');
+
+    if (window.__OPENCHAMBER_RUNTIME_APIS__) {
+      /* cleanup placeholder */
+    }
+  });
+
+} catch (error) {
+  console.error('[main] FATAL: Failed to initialize desktop runtime:', error);
+
+  for (const cleanup of cleanupFunctions) {
+    try {
+      const result = cleanup();
+      if (result instanceof Promise) {
+        await result;
+      }
+    } catch (cleanupError) {
+      console.warn('[main] Cleanup function failed during error handling:', cleanupError);
+    }
+  }
+
+  document.body.innerHTML = `
+    <div style="padding: 40px; font-family: monospace; color: #ff6b6b; background: #1a1a1a; height: 100vh;">
+      <h1>Desktop Runtime Initialization Failed</h1>
+      <pre style="background: #2a2a2a; padding: 20px; border-radius: 8px; overflow: auto;">
+${error instanceof Error ? error.stack : String(error)}
+      </pre>
+      <p style="margin-top: 20px; color: #999;">Press Cmd+Option+I to open DevTools for more details</p>
+    </div>
+  `;
+  throw error;
+}
+
+let homeDirectory: string | undefined;
+try {
+  const { homeDir } = await import('@tauri-apps/api/path');
+  homeDirectory = await homeDir();
+} catch {
+  homeDirectory = undefined;
+}
+
+if (homeDirectory) {
+  window.__OPENCHAMBER_HOME__ = homeDirectory;
+}
+
+window.opencodeDesktop = {
+  homeDirectory,
+  async getServerInfo() {
+    const server = window.__OPENCHAMBER_DESKTOP_SERVER__;
+    return {
+      webPort: server?.origin ? parseInt(server.origin.split(':')[2] || '0', 10) : null,
+      openCodePort: server?.opencodePort ?? null,
+      host: '127.0.0.1',
+      ready: true,
+      cliAvailable: server?.cliAvailable ?? false,
+    };
+  },
+  async getSettings(): Promise<DesktopSettings> {
+    try {
+      const result = await invoke<{ settings: DesktopSettings; source: string }>('load_settings');
+      return result.settings;
+    } catch (error) {
+      console.error('[desktop] Error loading settings:', error);
+      return {} as DesktopSettings;
+    }
+  },
+  async updateSettings(changes: Partial<DesktopSettings>): Promise<DesktopSettings> {
+    try {
+      const result = await invoke<DesktopSettings>('save_settings', { changes });
+      return result;
+    } catch (error) {
+      console.error('[desktop] Error updating settings:', error);
+      return {};
+    }
+  },
+  async restartOpenCode() {
+    try {
+      await invoke('restart_opencode');
+      return { success: true };
+    } catch (error) {
+      console.error('[desktop] Error restarting OpenCode:', error);
+      return { success: false };
+    }
+  },
+  async shutdown() {
+    return { success: false };
+  },
+  async getHomeDirectory() {
+    return { success: true, path: homeDirectory || null };
+  },
+  markRendererReady() {
+
+  },
+  async requestDirectoryAccess() {
+    try {
+
+      const { open } = await import('@tauri-apps/plugin-dialog');
+      const selected = await open({
+        directory: true,
+        multiple: false,
+        title: 'Select Working Directory'
+      });
+
+      if (!selected || typeof selected !== 'string') {
+        return { success: false, error: 'Directory selection cancelled' };
+      }
+
+      const result = await invoke<{ success: boolean; path?: string; error?: string }>('process_directory_selection', {
+        path: selected
+      });
+
+      return result;
+    } catch (error) {
+      console.error('[desktop] Error requesting directory access:', error);
+      return { success: false, error: error instanceof Error ? error.message : String(error) };
+    }
+  },
+  async startAccessingDirectory(directoryPath: string) {
+    try {
+      const result = await invoke<{ success: boolean; error?: string }>('start_accessing_directory', { path: directoryPath });
+      return result;
+    } catch (error) {
+      console.error('[desktop] Error starting directory access:', error);
+      return { success: false, error: error instanceof Error ? error.message : String(error) };
+    }
+  },
+
+  async stopAccessingDirectory(directoryPath: string) {
+    try {
+      const result = await invoke<{ success: boolean; error?: string }>('stop_accessing_directory', { path: directoryPath });
+      return result;
+    } catch (error) {
+      console.error('[desktop] Error stopping directory access:', error);
+      return { success: false, error: error instanceof Error ? error.message : String(error) };
+    }
+  },
+  async notifyAssistantCompletion(payload) {
+    try {
+      const { createDesktopNotificationsAPI } = await import('./api/notifications');
+      const result = await createDesktopNotificationsAPI().notifyAgentCompletion(payload);
+      return { success: result };
+    } catch (error) {
+       console.error('[desktop] Error sending notification:', error);
+       return { success: false };
+    }
+  },
+  async checkForUpdates(): Promise<UpdateInfo> {
+    return checkForUpdates();
+  },
+  async downloadUpdate(onProgress?: (progress: UpdateProgress) => void): Promise<void> {
+    return downloadUpdate(onProgress);
+  },
+  async restartToUpdate(): Promise<void> {
+    return restartToUpdate();
+  }
+};
+
+console.info('[main] window.opencodeDesktop assigned');
+
+if (typeof window !== 'undefined') {
+  const handleBeforeUnload = () => {
+    console.info('[main] App is unloading, performing cleanup...');
+
+    cleanupFunctions.forEach((cleanup) => {
+      try {
+        const result = cleanup();
+        if (result instanceof Promise) {
+
+          result.catch(cleanupError => {
+            console.warn('[main] Cleanup function failed during unload:', cleanupError);
+          });
+        }
+      } catch (cleanupError) {
+        console.warn('[main] Cleanup function failed during unload:', cleanupError);
+      }
+    });
+
+    console.info('[main] Cleanup initiated');
+  };
+
+  window.addEventListener('beforeunload', handleBeforeUnload);
+
+  window.addEventListener('pagehide', handleBeforeUnload);
+
+  cleanupFunctions.push(() => {
+    window.removeEventListener('beforeunload', handleBeforeUnload);
+    window.removeEventListener('pagehide', handleBeforeUnload);
+  });
+}
+
+try {
+  await import('@openchamber/ui/main');
+} catch (error) {
+  console.error('[main] FATAL: Failed to load UI module:', error);
+  document.body.innerHTML = `
+    <div style="padding: 40px; font-family: monospace; color: #ff6b6b; background: #1a1a1a; height: 100vh;">
+      <h1>UI Module Load Failed</h1>
+      <pre style="background: #2a2a2a; padding: 20px; border-radius: 8px; overflow: auto;">
+${error instanceof Error ? error.stack : String(error)}
+      </pre>
+      <p style="margin-top: 20px; color: #999;">Check DevTools console for details</p>
+    </div>
+  `;
+  throw error;
+}
diff --git a/packages/desktop/tsconfig.json b/packages/desktop/tsconfig.json
new file mode 100644
index 00000000..994cb50c
--- /dev/null
+++ b/packages/desktop/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "types": ["vite/client"],
+    "paths": {
+      "@/*": ["../ui/src/*"],
+      "@desktop/*": ["./src/*"],
+      "@openchamber/ui/*": ["../ui/src/*"],
+      "@openchamber/desktop/*": ["./src/*"]
+    }
+  },
+  "include": ["src", "../ui/src", "../ui/src/types/**/*"]
+}
diff --git a/packages/desktop/vite.config.ts b/packages/desktop/vite.config.ts
new file mode 100644
index 00000000..16557984
--- /dev/null
+++ b/packages/desktop/vite.config.ts
@@ -0,0 +1,75 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { themeStoragePlugin } from '../../vite-theme-plugin';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  root: path.resolve(__dirname, '.'),
+  plugins: [react(), themeStoragePlugin()],
+  resolve: {
+    alias: {
+      '@desktop': path.resolve(__dirname, './src'),
+      '@openchamber/ui': path.resolve(__dirname, '../ui/src'),
+      '@': path.resolve(__dirname, '../ui/src'),
+      '@opencode-ai/sdk': path.resolve(__dirname, '../../node_modules/@opencode-ai/sdk/dist/client.js'),
+    },
+  },
+  define: {
+    'process.env': {},
+    'process.platform': JSON.stringify('darwin'),
+    'process.version': JSON.stringify('v20.0.0'),
+    'process.versions': JSON.stringify({}),
+    global: 'globalThis',
+  },
+  optimizeDeps: {
+    include: ['@opencode-ai/sdk'],
+    exclude: [
+      '@tauri-apps/plugin-dialog',
+      '@tauri-apps/api/core',
+      '@tauri-apps/api/path',
+    ],
+  },
+  server: {
+    host: '127.0.0.1',
+    port: 1421,
+    strictPort: true,
+    hmr: {
+      protocol: 'ws',
+      host: '127.0.0.1',
+      port: 1421,
+    },
+  },
+  build: {
+    outDir: path.resolve(__dirname, 'dist'),
+    emptyOutDir: true,
+    chunkSizeWarningLimit: 1200,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (!id.includes('node_modules')) return undefined;
+
+          const match = id.split('node_modules/')[1];
+          if (!match) return undefined;
+
+          const segments = match.split('/');
+          const packageName = match.startsWith('@') ? `${segments[0]}/${segments[1]}` : segments[0];
+
+          if (packageName === 'react' || packageName === 'react-dom') return 'vendor-react';
+          if (packageName === 'zustand' || packageName === 'zustand/middleware') return 'vendor-zustand';
+
+          if (packageName === '@opencode-ai/sdk') return 'vendor-opencode-sdk';
+          if (packageName.includes('remark') || packageName.includes('rehype') || packageName === 'react-markdown') return 'vendor-markdown';
+          if (packageName.startsWith('@radix-ui')) return 'vendor-radix';
+          if (packageName.includes('react-syntax-highlighter') || packageName.includes('highlight.js')) return 'vendor-syntax';
+          if (packageName.startsWith('@tauri-apps')) return 'vendor-tauri';
+
+          const sanitized = packageName.replace(/^@/, '').replace(/\//g, '-');
+          return `vendor-${sanitized}`;
+        },
+      },
+    },
+  },
+});
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 00000000..a66c8ad2
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,77 @@
+{
+  "name": "@openchamber/ui",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "main": "src/main.tsx",
+  "scripts": {
+    "dev": "tsc --noEmit --watch",
+    "build": "tsc --noEmit",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint \"./src/**/*.{ts,tsx}\" --config ../../eslint.config.js"
+  },
+  "dependencies": {
+    "@fontsource/ibm-plex-mono": "^5.2.7",
+    "@fontsource/ibm-plex-sans": "^5.1.1",
+    "@ibm/plex": "^6.4.1",
+    "@opencode-ai/sdk": "^1.0.65",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@remixicon/react": "^4.7.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "express": "^5.1.0",
+    "http-proxy-middleware": "^3.0.5",
+    "motion": "^12.23.24",
+    "next-themes": "^0.4.6",
+    "node-pty": "^1.0.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "@monaco-editor/react": "^4.6.0",
+    "react-syntax-highlighter": "^15.6.6",
+    "simple-git": "^3.28.0",
+    "sonner": "^2.0.7",
+    "streamdown": "^1.6.10",
+    "strip-json-comments": "^5.0.3",
+    "tailwind-merge": "^3.3.1",
+    "yaml": "^2.8.1",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@tauri-apps/api": "^2.9.0",
+    "@types/node": "^24.3.1",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.0",
+    "autoprefixer": "^10.4.21",
+    "concurrently": "^9.2.1",
+    "cors": "^2.8.5",
+    "cross-env": "^7.0.3",
+    "electron": "^38.2.0",
+    "electron-builder": "^24.13.3",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "nodemon": "^3.1.7",
+    "tailwindcss": "^4.0.0",
+    "tsx": "^4.20.6",
+    "tw-animate-css": "^1.3.8",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2"
+  }
+}
diff --git a/packages/ui/src/App.css b/packages/ui/src/App.css
new file mode 100644
index 00000000..b9d355df
--- /dev/null
+++ b/packages/ui/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
new file mode 100644
index 00000000..54457498
--- /dev/null
+++ b/packages/ui/src/App.tsx
@@ -0,0 +1,188 @@
+import React from 'react';
+import { MainLayout } from '@/components/layout/MainLayout';
+import { FireworksProvider } from '@/contexts/FireworksContext';
+import { Toaster } from '@/components/ui/sonner';
+import { MemoryDebugPanel } from '@/components/ui/MemoryDebugPanel';
+import { ErrorBoundary } from '@/components/ui/ErrorBoundary';
+import { useEventStream } from '@/hooks/useEventStream';
+import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts';
+import { useMessageSync } from '@/hooks/useMessageSync';
+import { useSessionStatusBootstrap } from '@/hooks/useSessionStatusBootstrap';
+import { GitPollingProvider } from '@/hooks/useGitPolling';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { opencodeClient } from '@/lib/opencode/client';
+import { useFontPreferences } from '@/hooks/useFontPreferences';
+import { CODE_FONT_OPTION_MAP, DEFAULT_MONO_FONT, DEFAULT_UI_FONT, UI_FONT_OPTION_MAP } from '@/lib/fontOptions';
+import { ConfigUpdateOverlay } from '@/components/ui/ConfigUpdateOverlay';
+import { RuntimeAPIProvider } from '@/contexts/RuntimeAPIProvider';
+import { registerRuntimeAPIs } from '@/contexts/runtimeAPIRegistry';
+import { OnboardingScreen } from '@/components/onboarding/OnboardingScreen';
+import { isCliAvailable } from '@/lib/desktop';
+import type { RuntimeAPIs } from '@/lib/api/types';
+
+type AppProps = {
+  apis: RuntimeAPIs;
+};
+
+function App({ apis }: AppProps) {
+  const { initializeApp, loadProviders, isInitialized } = useConfigStore();
+  const { error, clearError, loadSessions } = useSessionStore();
+  const currentDirectory = useDirectoryStore((state) => state.currentDirectory);
+  const isSwitchingDirectory = useDirectoryStore((state) => state.isSwitchingDirectory);
+  const [showMemoryDebug, setShowMemoryDebug] = React.useState(false);
+  const { uiFont, monoFont } = useFontPreferences();
+  const [isDesktopRuntime, setIsDesktopRuntime] = React.useState<boolean>(() => apis.runtime.isDesktop);
+  const [cliAvailable, setCliAvailable] = React.useState<boolean>(() => {
+    if (!apis.runtime.isDesktop) return true;
+    return isCliAvailable();
+  });
+
+  React.useEffect(() => {
+    setIsDesktopRuntime(apis.runtime.isDesktop);
+  }, [apis.runtime.isDesktop]);
+
+  React.useEffect(() => {
+    registerRuntimeAPIs(apis);
+    return () => registerRuntimeAPIs(null);
+  }, [apis]);
+
+  React.useEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    const root = document.documentElement;
+    const uiStack = UI_FONT_OPTION_MAP[uiFont]?.stack ?? UI_FONT_OPTION_MAP[DEFAULT_UI_FONT].stack;
+    const monoStack = CODE_FONT_OPTION_MAP[monoFont]?.stack ?? CODE_FONT_OPTION_MAP[DEFAULT_MONO_FONT].stack;
+
+    root.style.setProperty('--font-sans', uiStack);
+    root.style.setProperty('--font-heading', uiStack);
+    root.style.setProperty('--font-family-sans', uiStack);
+    root.style.setProperty('--font-mono', monoStack);
+    root.style.setProperty('--font-family-mono', monoStack);
+    root.style.setProperty('--ui-regular-font-weight', '400');
+
+    if (document.body) {
+      document.body.style.fontFamily = uiStack;
+    }
+  }, [uiFont, monoFont]);
+
+  React.useEffect(() => {
+    if (isInitialized) {
+      const hideInitialLoading = () => {
+        const loadingElement = document.getElementById('initial-loading');
+        if (loadingElement) {
+          loadingElement.classList.add('fade-out');
+
+          setTimeout(() => {
+            loadingElement.remove();
+          }, 300);
+        }
+      };
+
+      const timer = setTimeout(hideInitialLoading, 150);
+      return () => clearTimeout(timer);
+    }
+  }, [isInitialized]);
+
+  React.useEffect(() => {
+    const fallbackTimer = setTimeout(() => {
+      const loadingElement = document.getElementById('initial-loading');
+      if (loadingElement && !isInitialized) {
+        loadingElement.classList.add('fade-out');
+        setTimeout(() => {
+          loadingElement.remove();
+        }, 300);
+      }
+    }, 5000);
+
+    return () => clearTimeout(fallbackTimer);
+  }, [isInitialized]);
+
+  React.useEffect(() => {
+    const init = async () => {
+      await initializeApp();
+      await loadProviders();
+    };
+
+    init();
+  }, [initializeApp, loadProviders]);
+
+  React.useEffect(() => {
+    if (isSwitchingDirectory) {
+      return;
+    }
+
+    const syncDirectoryAndSessions = async () => {
+      opencodeClient.setDirectory(currentDirectory);
+
+      await loadSessions();
+    };
+
+    syncDirectoryAndSessions();
+  }, [currentDirectory, isSwitchingDirectory, loadSessions]);
+
+  useEventStream();
+
+  useKeyboardShortcuts();
+
+  useMessageSync();
+
+  useSessionStatusBootstrap();
+
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === 'M') {
+        e.preventDefault();
+        setShowMemoryDebug(prev => !prev);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  React.useEffect(() => {
+    if (error) {
+
+      setTimeout(() => clearError(), 5000);
+    }
+  }, [error, clearError]);
+
+  const handleCliAvailable = React.useCallback(() => {
+    setCliAvailable(true);
+    window.location.reload();
+  }, []);
+
+  if (isDesktopRuntime && !cliAvailable) {
+    return (
+      <ErrorBoundary>
+        <div className={`h-full text-foreground bg-transparent`}>
+          <OnboardingScreen onCliAvailable={handleCliAvailable} />
+        </div>
+      </ErrorBoundary>
+    );
+  }
+
+  return (
+    <ErrorBoundary>
+      <RuntimeAPIProvider apis={apis}>
+        <GitPollingProvider>
+          <FireworksProvider>
+            <div className={`h-full text-foreground ${isDesktopRuntime ? 'bg-transparent' : 'bg-background'}`}>
+              <MainLayout />
+              <Toaster />
+              <ConfigUpdateOverlay />
+              {showMemoryDebug && (
+                <MemoryDebugPanel onClose={() => setShowMemoryDebug(false)} />
+              )}
+            </div>
+          </FireworksProvider>
+        </GitPollingProvider>
+      </RuntimeAPIProvider>
+    </ErrorBoundary>
+  );
+}
+
+export default App;
diff --git a/packages/ui/src/assets/provider-logos/gocode.svg b/packages/ui/src/assets/provider-logos/gocode.svg
new file mode 100644
index 00000000..7af2fbdf
--- /dev/null
+++ b/packages/ui/src/assets/provider-logos/gocode.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><path d="M20.702 2.29c-2.494-1.554-5.778-1.187-8.706.654C9.076 1.104 5.79.736 3.3 2.29c-3.941 2.463-4.42 8.806-1.07 14.167 2.47 3.954 6.333 6.269 9.77 6.226 3.439.043 7.301-2.273 9.771-6.226 3.347-5.361 2.872-11.704-1.069-14.167zM4.042 15.328a12.838 12.838 0 0 1-1.546-3.541 10.12 10.12 0 0 1-.336-3.338c.15-1.98.956-3.524 2.27-4.345 1.315-.822 3.052-.87 4.903-.137.281.113.556.24.825.382A15.11 15.11 0 0 0 7.5 7.54c-2.035 3.255-2.655 6.878-1.945 9.765a13.247 13.247 0 0 1-1.514-1.98zm17.465-3.541a12.866 12.866 0 0 1-1.547 3.54 13.25 13.25 0 0 1-1.513 1.984c.635-2.589.203-5.76-1.353-8.734a.39.39 0 0 0-.563-.153l-4.852 3.032a.397.397 0 0 0-.126.546l.712 1.139a.395.395 0 0 0 .547.126l3.145-1.965c.101.306.203.606.28.916.296 1.086.41 2.214.335 3.337-.15 1.982-.956 3.525-2.27 4.347a4.437 4.437 0 0 1-2.25.65h-.101a4.432 4.432 0 0 1-2.25-.65c-1.314-.822-2.121-2.365-2.27-4.347a10.153 10.153 0 0 1 .335-3.337 13.212 13.212 0 0 1 4.05-6.482 10.148 10.148 0 0 1 2.849-1.765c1.845-.733 3.586-.685 4.9.137 1.316.822 2.122 2.365 2.271 4.345a10.146 10.146 0 0 1-.33 3.334z"/></svg>
\ No newline at end of file
diff --git a/packages/ui/src/assets/provider-logos/kimi-for-coding.svg b/packages/ui/src/assets/provider-logos/kimi-for-coding.svg
new file mode 100644
index 00000000..fb56ac10
--- /dev/null
+++ b/packages/ui/src/assets/provider-logos/kimi-for-coding.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>MoonshotAI</title><path d="M1.052 16.916l9.539 2.552a21.007 21.007 0 00.06 2.033l5.956 1.593a11.997 11.997 0 01-5.586.865l-.18-.016-.044-.004-.084-.009-.094-.01a11.605 11.605 0 01-.157-.02l-.107-.014-.11-.016a11.962 11.962 0 01-.32-.051l-.042-.008-.075-.013-.107-.02-.07-.015-.093-.019-.075-.016-.095-.02-.097-.023-.094-.022-.068-.017-.088-.022-.09-.024-.095-.025-.082-.023-.109-.03-.062-.02-.084-.025-.093-.028-.105-.034-.058-.019-.08-.026-.09-.031-.066-.024a6.293 6.293 0 01-.044-.015l-.068-.025-.101-.037-.057-.022-.08-.03-.087-.035-.088-.035-.079-.032-.095-.04-.063-.028-.063-.027a5.655 5.655 0 01-.041-.018l-.066-.03-.103-.047-.052-.024-.096-.046-.062-.03-.084-.04-.086-.044-.093-.047-.052-.027-.103-.055-.057-.03-.058-.032a6.49 6.49 0 01-.046-.026l-.094-.053-.06-.034-.051-.03-.072-.041-.082-.05-.093-.056-.052-.032-.084-.053-.061-.039-.079-.05-.07-.047-.053-.035a7.785 7.785 0 01-.054-.036l-.044-.03-.044-.03a6.066 6.066 0 01-.04-.028l-.057-.04-.076-.054-.069-.05-.074-.054-.056-.042-.076-.057-.076-.059-.086-.067-.045-.035-.064-.052-.074-.06-.089-.073-.046-.039-.046-.039a7.516 7.516 0 01-.043-.037l-.045-.04-.061-.053-.07-.062-.068-.06-.062-.058-.067-.062-.053-.05-.088-.084a13.28 13.28 0 01-.099-.097l-.029-.028-.041-.042-.069-.07-.05-.051-.05-.053a6.457 6.457 0 01-.168-.179l-.08-.088-.062-.07-.071-.08-.042-.049-.053-.062-.058-.068-.046-.056a7.175 7.175 0 01-.027-.033l-.045-.055-.066-.082-.041-.052-.05-.064-.02-.025a11.99 11.99 0 01-1.44-2.402zm-1.02-5.794l11.353 3.037a20.468 20.468 0 00-.469 2.011l10.817 2.894a12.076 12.076 0 01-1.845 2.005L.657 15.923l-.016-.046-.035-.104a11.965 11.965 0 01-.05-.153l-.007-.023a11.896 11.896 0 01-.207-.741l-.03-.126-.018-.08-.021-.097-.018-.081-.018-.09-.017-.084-.018-.094c-.026-.141-.05-.283-.071-.426l-.017-.118-.011-.083-.013-.102a12.01 12.01 0 01-.019-.161l-.005-.047a12.12 12.12 0 01-.034-2.145zm1.593-5.15l11.948 3.196c-.368.605-.705 1.231-1.01 1.875l11.295 3.022c-.142.82-.368 1.612-.668 2.365l-11.55-3.09L.124 10.26l.015-.1.008-.049.01-.067.015-.087.018-.098c.026-.148.056-.295.088-.442l.028-.124.02-.085.024-.097c.022-.09.045-.18.07-.268l.028-.102.023-.083.03-.1.025-.082.03-.096.026-.082.031-.095a11.896 11.896 0 011.01-2.232zm4.442-4.4L17.352 4.59a20.77 20.77 0 00-1.688 1.721l7.823 2.093c.267.852.442 1.744.513 2.665L2.106 5.213l.045-.065.027-.04.04-.055.046-.065.055-.076.054-.072.064-.086.05-.065.057-.073.055-.07.06-.074.055-.069.065-.077.054-.066.066-.077.053-.06.072-.082.053-.06.067-.074.054-.058.073-.078.058-.06.063-.067.168-.17.1-.098.059-.056.076-.071a12.084 12.084 0 012.272-1.677zM12.017 0h.097l.082.001.069.001.054.002.068.002.046.001.076.003.047.002.06.003.054.002.087.005.105.007.144.011.088.007.044.004.077.008.082.008.047.005.102.012.05.006.108.014.081.01.042.006.065.01.207.032.07.012.065.011.14.026.092.018.11.022.046.01.075.016.041.01L14.7.3l.042.01.065.015.049.012.071.017.096.024.112.03.113.03.113.032.05.015.07.02.078.024.073.023.05.016.05.016.076.025.099.033.102.036.048.017.064.023.093.034.11.041.116.045.1.04.047.02.06.024.041.018.063.026.04.018.057.025.11.048.1.046.074.035.075.036.06.028.092.046.091.045.102.052.053.028.049.026.046.024.06.033.041.022.052.029.088.05.106.06.087.051.057.034.053.032.096.059.088.055.098.062.036.024.064.041.084.056.04.027.062.042.062.043.023.017c.054.037.108.075.161.114l.083.06.065.048.056.043.086.065.082.064.04.03.05.041.086.069.079.065.085.071c.712.6 1.353 1.283 1.909 2.031L7.222.994l.062-.027.065-.028.081-.034.086-.035c.113-.045.227-.09.341-.131l.096-.035.093-.033.084-.03.096-.031c.087-.03.176-.058.264-.085l.091-.027.086-.025.102-.03.085-.023.1-.026L9.04.37l.09-.023.091-.022.095-.022.09-.02.098-.021.091-.02.095-.018.092-.018.1-.018.091-.016.098-.017.092-.014.097-.015.092-.013.102-.013.091-.012.105-.012.09-.01.105-.01c.093-.01.186-.018.28-.024l.106-.008.09-.005.11-.006.093-.004.1-.004.097-.002.099-.002.197-.002z"></path></svg>
\ No newline at end of file
diff --git a/packages/ui/src/components/auth/SessionAuthGate.tsx b/packages/ui/src/components/auth/SessionAuthGate.tsx
new file mode 100644
index 00000000..15be9273
--- /dev/null
+++ b/packages/ui/src/components/auth/SessionAuthGate.tsx
@@ -0,0 +1,258 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { OpenCodeIcon } from '@/components/ui/OpenCodeIcon';
+import { isDesktopRuntime } from '@/lib/desktop';
+import { syncDesktopSettings, initializeAppearancePreferences } from '@/lib/persistence';
+import { applyPersistedDirectoryPreferences } from '@/lib/directoryPersistence';
+
+const STATUS_CHECK_ENDPOINT = '/auth/session';
+
+const fetchSessionStatus = async (): Promise<Response> => {
+  return fetch(STATUS_CHECK_ENDPOINT, {
+    method: 'GET',
+    credentials: 'include',
+    headers: {
+      Accept: 'application/json',
+    },
+  });
+};
+
+const submitPassword = async (password: string): Promise<Response> => {
+  return fetch(STATUS_CHECK_ENDPOINT, {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+    },
+    body: JSON.stringify({ password }),
+  });
+};
+
+const AuthShell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div
+    className="relative flex min-h-screen items-center justify-center overflow-hidden bg-background text-foreground"
+    style={{ fontFamily: '"Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif' }}
+  >
+    <div
+      className="pointer-events-none absolute inset-0 opacity-55"
+      style={{
+        background: 'radial-gradient(120% 140% at 50% -20%, var(--surface-overlay) 0%, transparent 68%)',
+      }}
+    />
+    <div
+      className="pointer-events-none absolute inset-0"
+      style={{
+        backgroundColor: 'var(--surface-subtle)',
+        opacity: 0.22,
+      }}
+    />
+    <div className="relative z-10 flex w-full justify-center px-4 py-12 sm:px-6">
+      {children}
+    </div>
+  </div>
+);
+
+const LoadingScreen: React.FC<{ message?: string }> = ({ message = 'Preparing workspace…' }) => (
+  <AuthShell>
+    <div className="w-full max-w-sm rounded-3xl border border-border/40 bg-card/90 px-6 py-5 text-center shadow-none backdrop-blur">
+      <p className="typography-ui-label text-muted-foreground">{message}</p>
+    </div>
+  </AuthShell>
+);
+
+const ErrorScreen: React.FC<{ onRetry: () => void }> = ({ onRetry }) => (
+  <AuthShell>
+    <div className="w-full max-w-sm rounded-3xl border border-destructive/30 bg-card/90 p-6 shadow-none backdrop-blur">
+      <div className="space-y-3 text-center">
+        <div className="flex justify-center">
+          <OpenCodeIcon width={28} height={28} className="text-destructive" />
+        </div>
+        <h1 className="typography-ui-header font-semibold text-destructive">Unable to reach server</h1>
+        <p className="typography-meta text-muted-foreground">
+          We couldn't verify the UI session. Check that the service is running and try again.
+        </p>
+        <Button type="button" onClick={onRetry} className="w-full">
+          Retry
+        </Button>
+      </div>
+    </div>
+  </AuthShell>
+);
+
+interface SessionAuthGateProps {
+  children: React.ReactNode;
+}
+
+type GateState = 'pending' | 'authenticated' | 'locked' | 'error';
+
+export const SessionAuthGate: React.FC<SessionAuthGateProps> = ({ children }) => {
+  const desktopRuntime = React.useMemo(() => isDesktopRuntime(), []);
+  const [state, setState] = React.useState<GateState>(() => (desktopRuntime ? 'authenticated' : 'pending'));
+  const [password, setPassword] = React.useState('');
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [errorMessage, setErrorMessage] = React.useState('');
+  const passwordInputRef = React.useRef<HTMLInputElement | null>(null);
+  const hasResyncedRef = React.useRef(desktopRuntime);
+
+  const checkStatus = React.useCallback(async () => {
+    if (desktopRuntime) {
+      setState('authenticated');
+      return;
+    }
+
+    setState((prev) => (prev === 'authenticated' ? prev : 'pending'));
+    try {
+      const response = await fetchSessionStatus();
+      if (response.ok) {
+        setState('authenticated');
+        setErrorMessage('');
+        return;
+      }
+      if (response.status === 401) {
+        setState('locked');
+        return;
+      }
+      setState('error');
+    } catch (error) {
+      console.warn('Failed to check session status:', error);
+      setState('error');
+    }
+  }, [desktopRuntime]);
+
+  React.useEffect(() => {
+    if (desktopRuntime) {
+      return;
+    }
+    void checkStatus();
+  }, [checkStatus, desktopRuntime]);
+
+  React.useEffect(() => {
+    if (!desktopRuntime && state === 'locked') {
+      hasResyncedRef.current = false;
+    }
+  }, [desktopRuntime, state]);
+
+  React.useEffect(() => {
+    if (state === 'locked' && passwordInputRef.current) {
+      passwordInputRef.current.focus();
+      passwordInputRef.current.select();
+    }
+  }, [state]);
+
+  React.useEffect(() => {
+    if (desktopRuntime) {
+      return;
+    }
+    if (state === 'authenticated' && !hasResyncedRef.current) {
+      hasResyncedRef.current = true;
+      void (async () => {
+        await syncDesktopSettings();
+        await initializeAppearancePreferences();
+        await applyPersistedDirectoryPreferences();
+      })();
+    }
+  }, [desktopRuntime, state]);
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!password || isSubmitting) {
+      return;
+    }
+
+    setIsSubmitting(true);
+    setErrorMessage('');
+
+    try {
+      const response = await submitPassword(password);
+      if (response.ok) {
+        setPassword('');
+        setState('authenticated');
+        return;
+      }
+
+      if (response.status === 401) {
+        setErrorMessage('Incorrect password. Try again.');
+        setState('locked');
+        return;
+      }
+
+      setErrorMessage('Unexpected response from server.');
+      setState('error');
+    } catch (error) {
+      console.warn('Failed to submit UI password:', error);
+      setErrorMessage('Network error. Check connection and retry.');
+      setState('error');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (state === 'pending') {
+    return <LoadingScreen />;
+  }
+
+  if (state === 'error') {
+    return <ErrorScreen onRetry={() => void checkStatus()} />;
+  }
+
+  if (state === 'locked') {
+    return (
+      <AuthShell>
+        <div className="w-full max-w-sm rounded-3xl border border-border/40 bg-card/95 p-8 shadow-none backdrop-blur">
+          <div className="flex flex-col items-center gap-3 text-center">
+            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/15 text-primary">
+              <OpenCodeIcon width={24} height={24} className="opacity-80" />
+            </div>
+            <div className="space-y-1">
+              <h1 className="typography-ui-header font-semibold text-foreground">Unlock OpenChamber</h1>
+              <p className="typography-meta text-muted-foreground">
+                Enter the password configured for this web session.
+              </p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit} className="mt-6 space-y-4">
+            <div className="space-y-2">
+              <label
+                htmlFor="openchamber-ui-password"
+                className="typography-ui-label text-left font-medium text-foreground"
+              >
+                Password
+              </label>
+              <Input
+                id="openchamber-ui-password"
+                ref={passwordInputRef}
+                type="password"
+                autoComplete="current-password"
+                placeholder="Enter password"
+                value={password}
+                onChange={(event) => {
+                  setPassword(event.target.value);
+                  if (errorMessage) {
+                    setErrorMessage('');
+                  }
+                }}
+                aria-invalid={Boolean(errorMessage) || undefined}
+                aria-describedby={errorMessage ? 'oc-ui-auth-error' : undefined}
+                disabled={isSubmitting}
+              />
+              {errorMessage && (
+                <p id="oc-ui-auth-error" className="typography-meta text-destructive">
+                  {errorMessage}
+                </p>
+              )}
+            </div>
+
+            <Button type="submit" className="w-full" disabled={!password || isSubmitting}>
+              {isSubmitting ? 'Unlocking…' : 'Unlock'}
+            </Button>
+          </form>
+        </div>
+      </AuthShell>
+    );
+  }
+
+  return <>{children}</>;
+};
diff --git a/packages/ui/src/components/chat/AgentMentionAutocomplete.tsx b/packages/ui/src/components/chat/AgentMentionAutocomplete.tsx
new file mode 100644
index 00000000..a241222b
--- /dev/null
+++ b/packages/ui/src/components/chat/AgentMentionAutocomplete.tsx
@@ -0,0 +1,152 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+
+interface AgentInfo {
+  name: string;
+  description?: string;
+  mode?: string | null;
+}
+
+export interface AgentMentionAutocompleteHandle {
+  handleKeyDown: (key: string) => void;
+}
+
+interface AgentMentionAutocompleteProps {
+  searchQuery: string;
+  onAgentSelect: (agentName: string) => void;
+  onClose: () => void;
+}
+
+const isMentionable = (mode?: string | null): boolean => {
+  if (!mode) {
+    return false;
+  }
+  return mode !== 'primary';
+};
+
+export const AgentMentionAutocomplete = React.forwardRef<AgentMentionAutocompleteHandle, AgentMentionAutocompleteProps>(({
+  searchQuery,
+  onAgentSelect,
+  onClose,
+}, ref) => {
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [agents, setAgents] = React.useState<AgentInfo[]>([]);
+  const { agents: allAgents } = useConfigStore();
+
+  React.useEffect(() => {
+    const filtered = allAgents
+      .filter((agent) => isMentionable(agent.mode))
+      .map((agent) => ({
+        name: agent.name,
+        description: agent.description,
+        mode: agent.mode ?? undefined,
+      }));
+
+    const normalizedQuery = searchQuery.trim().toLowerCase();
+    const matches = normalizedQuery.length
+      ? filtered.filter((agent) => agent.name.toLowerCase().includes(normalizedQuery))
+      : filtered;
+
+    matches.sort((a, b) => a.name.localeCompare(b.name));
+
+    setAgents(matches);
+    setSelectedIndex(0);
+  }, [allAgents, searchQuery]);
+
+  React.useEffect(() => {
+    const handlePointerDown = (event: MouseEvent | TouchEvent) => {
+      const target = event.target as Node | null;
+      if (!target || !containerRef.current) {
+        return;
+      }
+      if (!containerRef.current.contains(target)) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown, true);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown, true);
+    };
+  }, [onClose]);
+
+  React.useImperativeHandle(ref, () => ({
+    handleKeyDown: (key: string) => {
+      if (key === 'Escape') {
+        onClose();
+        return;
+      }
+
+      if (!agents.length) {
+        return;
+      }
+
+      if (key === 'ArrowDown') {
+        setSelectedIndex((prev) => (prev + 1) % agents.length);
+        return;
+      }
+
+      if (key === 'ArrowUp') {
+        setSelectedIndex((prev) => (prev - 1 + agents.length) % agents.length);
+        return;
+      }
+
+      if (key === 'Enter' || key === 'Tab') {
+        const agent = agents[(selectedIndex + agents.length) % agents.length];
+        if (agent) {
+          onAgentSelect(agent.name);
+        }
+      }
+    },
+  }), [agents, onAgentSelect, onClose, selectedIndex]);
+
+  const renderAgent = (agent: AgentInfo, index: number) => (
+    <div
+      key={agent.name}
+      className={cn(
+        'flex items-start gap-2 px-3 py-1.5 cursor-pointer rounded-lg typography-ui-label',
+        index === selectedIndex && 'bg-accent'
+      )}
+      onClick={() => onAgentSelect(agent.name)}
+      onMouseEnter={() => setSelectedIndex(index)}
+>
+      <div className="min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold">#{agent.name}</span>
+        </div>
+        {agent.description && (
+          <div className="typography-meta text-muted-foreground truncate">
+            {agent.description}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      className="absolute z-[100] min-w-[240px] max-w-[360px] max-h-60 bg-popover border border-border rounded-xl shadow-none bottom-full mb-2 left-0 w-max flex flex-col"
+    >
+      <ScrollableOverlay outerClassName="flex-1 min-h-0" className="px-0">
+        {agents.length ? (
+          <div>
+            {agents.map((agent, index) => renderAgent(agent, index))}
+          </div>
+        ) : (
+          <div className="px-3 py-2 typography-ui-label text-muted-foreground">
+            No agents found
+          </div>
+        )}
+      </ScrollableOverlay>
+      <div className="px-3 pt-1 pb-1.5 border-t typography-meta text-muted-foreground">
+        ↑↓ navigate • Enter select • Esc close
+      </div>
+    </div>
+  );
+});
+
+AgentMentionAutocomplete.displayName = 'AgentMentionAutocomplete';
diff --git a/packages/ui/src/components/chat/ChatContainer.tsx b/packages/ui/src/components/chat/ChatContainer.tsx
new file mode 100644
index 00000000..f6a5964a
--- /dev/null
+++ b/packages/ui/src/components/chat/ChatContainer.tsx
@@ -0,0 +1,255 @@
+import React from 'react';
+import { RiArrowDownLine } from '@remixicon/react';
+
+import { ChatInput } from './ChatInput';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { Skeleton } from '@/components/ui/skeleton';
+import { OpenChamberLogo } from '@/components/ui/OpenChamberLogo';
+import MessageList from './MessageList';
+import { ScrollShadow } from '@/components/ui/ScrollShadow';
+import { useChatScrollManager } from '@/hooks/useChatScrollManager';
+import { useDeviceInfo } from '@/lib/device';
+import { Button } from '@/components/ui/button';
+import { OverlayScrollbar } from '@/components/ui/OverlayScrollbar';
+
+export const ChatContainer: React.FC = () => {
+    const {
+        currentSessionId,
+        messages,
+        permissions,
+        streamingMessageIds,
+        isLoading,
+        loadMessages,
+        loadMoreMessages,
+        updateViewportAnchor,
+        sessionMemoryState,
+        isSyncing,
+        messageStreamStates,
+        trimToViewportWindow,
+        sessionActivityPhase,
+    } = useSessionStore();
+
+    const streamingMessageId = React.useMemo(() => {
+        if (!currentSessionId) return null;
+        return streamingMessageIds.get(currentSessionId) ?? null;
+    }, [currentSessionId, streamingMessageIds]);
+
+    const { isMobile } = useDeviceInfo();
+
+    const sessionMessages = React.useMemo(() => {
+
+        return currentSessionId ? messages.get(currentSessionId) || [] : [];
+    }, [currentSessionId, messages]);
+
+    const sessionPermissions = React.useMemo(() => {
+        return currentSessionId ? permissions.get(currentSessionId) || [] : [];
+    }, [currentSessionId, permissions]);
+
+    const {
+        scrollRef,
+        handleMessageContentChange,
+        getAnimationHandlers,
+        showScrollButton,
+        scrollToBottom,
+        spacerHeight,
+        pendingAnchorId,
+        hasActiveAnchor,
+    } = useChatScrollManager({
+        currentSessionId,
+        sessionMessages,
+        streamingMessageId,
+        sessionMemoryState,
+        updateViewportAnchor,
+        isSyncing,
+        isMobile,
+        messageStreamStates,
+        sessionPermissions,
+        trimToViewportWindow,
+        sessionActivityPhase,
+    });
+
+    const memoryState = React.useMemo(() => {
+        if (!currentSessionId) {
+            return null;
+        }
+        return sessionMemoryState.get(currentSessionId) ?? null;
+    }, [currentSessionId, sessionMemoryState]);
+    const hasMoreAbove = Boolean(memoryState?.hasMoreAbove);
+    const [isLoadingOlder, setIsLoadingOlder] = React.useState(false);
+    React.useEffect(() => {
+        setIsLoadingOlder(false);
+    }, [currentSessionId]);
+
+    const lastScrolledSessionRef = React.useRef<string | null>(null);
+    React.useLayoutEffect(() => {
+        if (!currentSessionId || currentSessionId === lastScrolledSessionRef.current) {
+            return;
+        }
+        lastScrolledSessionRef.current = currentSessionId;
+
+        const container = scrollRef.current;
+        if (container) {
+            container.scrollTop = container.scrollHeight - container.clientHeight;
+        }
+    }, [currentSessionId, scrollRef]);
+
+    const handleLoadOlder = React.useCallback(async () => {
+        if (!currentSessionId || isLoadingOlder) {
+            return;
+        }
+
+        const container = scrollRef.current;
+        const prevHeight = container?.scrollHeight ?? null;
+        const prevTop = container?.scrollTop ?? null;
+
+        setIsLoadingOlder(true);
+        try {
+            await loadMoreMessages(currentSessionId, 'up');
+            if (container && prevHeight !== null && prevTop !== null) {
+                const heightDiff = container.scrollHeight - prevHeight;
+                container.scrollTop = prevTop + heightDiff;
+            }
+        } finally {
+            setIsLoadingOlder(false);
+        }
+    }, [currentSessionId, isLoadingOlder, loadMoreMessages, scrollRef]);
+
+    React.useEffect(() => {
+        if (!currentSessionId) {
+            return;
+        }
+
+        const hasSessionMessages = messages.has(currentSessionId);
+        const existingMessages = hasSessionMessages ? messages.get(currentSessionId) ?? [] : [];
+
+        if (existingMessages.length > 0) {
+            return;
+        }
+
+        const load = async () => {
+            try {
+                await loadMessages(currentSessionId);
+            } finally {
+                if (typeof window === 'undefined') {
+                    scrollToBottom();
+                } else {
+                    window.requestAnimationFrame(() => {
+                        scrollToBottom();
+                    });
+                }
+            }
+        };
+
+        void load();
+    }, [currentSessionId, loadMessages, messages, scrollToBottom]);
+
+    if (!currentSessionId) {
+        return (
+            <div className="flex flex-col h-full bg-background">
+                <div className="flex-1 flex items-center justify-center">
+                    <OpenChamberLogo width={140} height={140} className="opacity-20" isAnimated />
+                </div>
+            </div>
+        );
+    }
+
+    if (isLoading && sessionMessages.length === 0 && !streamingMessageId) {
+        const hasMessagesEntry = messages.has(currentSessionId);
+        if (!hasMessagesEntry) {
+            return (
+                <div className="flex flex-col h-full bg-background gap-0">
+                    <div className="flex-1 overflow-y-auto p-4 bg-background">
+                    <div className="chat-column space-y-4">
+                            {[1, 2, 3].map((i) => (
+                                <div key={i} className="flex gap-3 p-4">
+                                    <Skeleton className="h-8 w-8 rounded-full" />
+                                    <div className="flex-1 space-y-2">
+                                        <Skeleton className="h-4 w-24" />
+                                        <Skeleton className="h-20 w-full" />
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                    <ChatInput scrollToBottom={scrollToBottom} />
+                </div>
+            );
+        }
+    }
+
+    if (sessionMessages.length === 0 && !streamingMessageId) {
+        return (
+            <div className="flex flex-col h-full bg-background">
+                <div className="flex-1 flex items-center justify-center">
+                    <OpenChamberLogo width={140} height={140} className="opacity-20" isAnimated />
+                </div>
+                <div className="relative bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 z-10">
+                    <ChatInput scrollToBottom={scrollToBottom} />
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col h-full bg-background">
+            <div className="relative flex-1 min-h-0">
+
+                <div className="absolute inset-0">
+                    <ScrollShadow
+                        className="absolute inset-0 overflow-y-auto overflow-x-hidden z-0 chat-scroll overlay-scrollbar-target"
+                        ref={scrollRef}
+                        style={{
+                            contain: 'strict',
+
+                            ['--scroll-shadow-size' as string]: '48px',
+                        }}
+                        data-scroll-shadow="true"
+                        data-scrollbar="chat"
+                        hideBottomShadow={!!pendingAnchorId}
+                    >
+                        <div className="relative z-0 min-h-full">
+                            <MessageList
+                                messages={sessionMessages}
+                                permissions={sessionPermissions}
+                                onMessageContentChange={handleMessageContentChange}
+                                getAnimationHandlers={getAnimationHandlers}
+                                hasMoreAbove={hasMoreAbove}
+                                isLoadingOlder={isLoadingOlder}
+                                onLoadOlder={handleLoadOlder}
+                                scrollToBottom={scrollToBottom}
+                                pendingAnchorId={pendingAnchorId}
+                            />
+                            {}
+                            {spacerHeight > 0 && hasActiveAnchor && (
+                                <div
+                                    data-role="active-turn-spacer"
+                                    style={{ height: spacerHeight }}
+                                    aria-hidden="true"
+                                />
+                            )}
+                        </div>
+                    </ScrollShadow>
+                    <OverlayScrollbar containerRef={scrollRef} />
+                </div>
+            </div>
+
+            <div className="relative bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 z-10">
+                {showScrollButton && sessionMessages.length > 0 && (
+                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2">
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => scrollToBottom()}
+                                className="rounded-full h-8 w-8 p-0 shadow-none bg-background/95 hover:bg-accent"
+                                aria-label="Scroll to bottom"
+                            >
+
+                            <RiArrowDownLine className="h-4 w-4" />
+                        </Button>
+                    </div>
+                )}
+                <ChatInput scrollToBottom={scrollToBottom} />
+            </div>
+        </div>
+    );
+};
diff --git a/packages/ui/src/components/chat/ChatEmptyState.tsx b/packages/ui/src/components/chat/ChatEmptyState.tsx
new file mode 100644
index 00000000..0d01c2e8
--- /dev/null
+++ b/packages/ui/src/components/chat/ChatEmptyState.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { OpenChamberLogo } from '@/components/ui/OpenChamberLogo';
+
+const ChatEmptyState: React.FC = () => {
+    return (
+        <div className="flex items-center justify-center min-h-full w-full">
+            <OpenChamberLogo width={140} height={140} className="opacity-20" isAnimated />
+        </div>
+    );
+};
+
+export default React.memo(ChatEmptyState);
diff --git a/packages/ui/src/components/chat/ChatErrorBoundary.tsx b/packages/ui/src/components/chat/ChatErrorBoundary.tsx
new file mode 100644
index 00000000..1d86a179
--- /dev/null
+++ b/packages/ui/src/components/chat/ChatErrorBoundary.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { RiChat3Line, RiRestartLine } from '@remixicon/react';
+import { Button } from '../ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
+
+interface ChatErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+  errorInfo?: React.ErrorInfo;
+}
+
+interface ChatErrorBoundaryProps {
+  children: React.ReactNode;
+  sessionId?: string;
+}
+
+export class ChatErrorBoundary extends React.Component<ChatErrorBoundaryProps, ChatErrorBoundaryState> {
+  constructor(props: ChatErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ChatErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    this.setState({ error, errorInfo });
+
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Chat error caught by boundary:', error, errorInfo);
+    }
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: undefined, errorInfo: undefined });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex items-center justify-center min-h-screen p-4">
+          <Card className="w-full max-w-md">
+            <CardHeader className="text-center">
+              <CardTitle className="flex items-center justify-center gap-2 text-destructive">
+                <RiChat3Line className="h-5 w-5" />
+                Chat Error
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <p className="text-sm text-muted-foreground text-center">
+                The chat interface encountered an error. This might be due to a temporary network issue or corrupted message data.
+              </p>
+
+              {this.props.sessionId && (
+                <div className="text-xs text-muted-foreground text-center">
+                  Session: {this.props.sessionId}
+                </div>
+              )}
+
+              {this.state.error && (
+                <details className="text-xs font-mono bg-muted p-3 rounded">
+                  <summary className="cursor-pointer hover:bg-muted/80">Error details</summary>
+                  <pre className="mt-2 overflow-x-auto">
+                    {this.state.error.toString()}
+                  </pre>
+                </details>
+              )}
+
+              <div className="flex gap-2">
+                <Button onClick={this.handleReset} variant="outline" className="flex-1">
+                  <RiRestartLine className="h-4 w-4 mr-2" />
+                  Reset Chat
+                </Button>
+              </div>
+
+              <div className="text-xs text-muted-foreground text-center">
+                If the problem persists, try refreshing the page.
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
\ No newline at end of file
diff --git a/packages/ui/src/components/chat/ChatInput.tsx b/packages/ui/src/components/chat/ChatInput.tsx
new file mode 100644
index 00000000..a7a16407
--- /dev/null
+++ b/packages/ui/src/components/chat/ChatInput.tsx
@@ -0,0 +1,882 @@
+import React from 'react';
+import { Textarea } from '@/components/ui/textarea';
+import { RiAiAgentLine, RiCloseCircleLine, RiFileUploadLine, RiSendPlane2Line } from '@remixicon/react';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { useUIStore } from '@/stores/useUIStore';
+import type { EditPermissionMode } from '@/stores/types/sessionTypes';
+import { getEditModeColors } from '@/lib/permissions/editModeColors';
+import { FileAttachmentButton, AttachedFilesList } from './FileAttachment';
+import { FileMentionAutocomplete, type FileMentionHandle } from './FileMentionAutocomplete';
+import { CommandAutocomplete, type CommandAutocompleteHandle } from './CommandAutocomplete';
+import { AgentMentionAutocomplete, type AgentMentionAutocompleteHandle } from './AgentMentionAutocomplete';
+import { cn } from '@/lib/utils';
+import { ServerFilePicker } from './ServerFilePicker';
+import { ModelControls } from './ModelControls';
+import { parseAgentMentions } from '@/lib/messages/agentMentions';
+import { WorkingPlaceholder } from './message/parts/WorkingPlaceholder';
+import { useAssistantStatus } from '@/hooks/useAssistantStatus';
+import { toast } from 'sonner';
+import { useFileStore } from '@/stores/fileStore';
+import { calculateEditPermissionUIState, type BashPermissionSetting } from '@/lib/permissions/editPermissionDefaults';
+
+const MAX_VISIBLE_TEXTAREA_LINES = 8;
+
+interface ChatInputProps {
+    onOpenSettings?: () => void;
+    scrollToBottom?: (options?: { instant?: boolean }) => void;
+}
+
+const isPrimaryMode = (mode?: string) => mode === 'primary' || mode === 'all' || mode === undefined || mode === null;
+
+export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBottom }) => {
+    const [message, setMessage] = React.useState('');
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [showFileMention, setShowFileMention] = React.useState(false);
+    const [mentionQuery, setMentionQuery] = React.useState('');
+    const [showCommandAutocomplete, setShowCommandAutocomplete] = React.useState(false);
+    const [commandQuery, setCommandQuery] = React.useState('');
+    const [showAgentAutocomplete, setShowAgentAutocomplete] = React.useState(false);
+    const [agentQuery, setAgentQuery] = React.useState('');
+    const [textareaSize, setTextareaSize] = React.useState<{ height: number; maxHeight: number } | null>(null);
+    const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+    const dropZoneRef = React.useRef<HTMLDivElement>(null);
+    const mentionRef = React.useRef<FileMentionHandle>(null);
+    const commandRef = React.useRef<CommandAutocompleteHandle>(null);
+    const agentRef = React.useRef<AgentMentionAutocompleteHandle>(null);
+
+    const sendMessage = useSessionStore((state) => state.sendMessage);
+    const currentSessionId = useSessionStore((state) => state.currentSessionId);
+    const abortCurrentOperation = useSessionStore((state) => state.abortCurrentOperation);
+    const acknowledgeSessionAbort = useSessionStore((state) => state.acknowledgeSessionAbort);
+    const abortPromptSessionId = useSessionStore((state) => state.abortPromptSessionId);
+    const abortPromptExpiresAt = useSessionStore((state) => state.abortPromptExpiresAt);
+    const clearAbortPrompt = useSessionStore((state) => state.clearAbortPrompt);
+    const attachedFiles = useSessionStore((state) => state.attachedFiles);
+    const addAttachedFile = useSessionStore((state) => state.addAttachedFile);
+    const addServerFile = useSessionStore((state) => state.addServerFile);
+    const clearAttachedFiles = useSessionStore((state) => state.clearAttachedFiles);
+    const saveSessionAgentSelection = useSessionStore((state) => state.saveSessionAgentSelection);
+
+    const { currentProviderId, currentModelId, currentAgentName, agents, setAgent } = useConfigStore();
+    const { isMobile } = useUIStore();
+    const { working } = useAssistantStatus();
+    const [showAbortStatus, setShowAbortStatus] = React.useState(false);
+    const abortTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+    const prevWasAbortedRef = React.useRef(false);
+
+    const currentAgent = React.useMemo(() => {
+        if (!currentAgentName) {
+            return undefined;
+        }
+        return agents.find((agent) => agent.name === currentAgentName);
+    }, [agents, currentAgentName]);
+
+    const agentDefaultEditMode = React.useMemo<EditPermissionMode>(() => {
+        const agentPermissionRaw = currentAgent?.permission?.edit;
+        let defaultMode: EditPermissionMode = 'ask';
+
+        if (agentPermissionRaw === 'allow' || agentPermissionRaw === 'ask' || agentPermissionRaw === 'deny' || agentPermissionRaw === 'full') {
+            defaultMode = agentPermissionRaw;
+        }
+
+        const editToolConfigured = currentAgent ? (currentAgent.tools?.['edit'] !== false) : false;
+        if (!currentAgent || !editToolConfigured) {
+            defaultMode = 'deny';
+        }
+
+        return defaultMode;
+    }, [currentAgent]);
+
+    const sessionAgentEditOverride = useSessionStore(
+        React.useCallback((state) => {
+            if (!currentSessionId || !currentAgentName) {
+                return undefined;
+            }
+            const sessionMap = state.sessionAgentEditModes.get(currentSessionId);
+            return sessionMap?.get(currentAgentName);
+        }, [currentSessionId, currentAgentName])
+    );
+
+    const agentWebfetchPermission = currentAgent?.permission?.webfetch;
+    const agentBashPermission = currentAgent?.permission?.bash as BashPermissionSetting | undefined;
+
+    const permissionUiState = React.useMemo(() => calculateEditPermissionUIState({
+        agentDefaultEditMode,
+        webfetchPermission: agentWebfetchPermission,
+        bashPermission: agentBashPermission,
+    }), [agentDefaultEditMode, agentWebfetchPermission, agentBashPermission]);
+
+    const selectionContextReady = Boolean(currentSessionId && currentAgentName);
+
+    const effectiveEditPermission = React.useMemo<EditPermissionMode>(() => {
+        if (selectionContextReady && sessionAgentEditOverride && permissionUiState.modeAvailability[sessionAgentEditOverride]) {
+            return sessionAgentEditOverride;
+        }
+        return permissionUiState.cascadeDefaultMode;
+    }, [permissionUiState, selectionContextReady, sessionAgentEditOverride]);
+
+    const chatInputAccent = React.useMemo(() => getEditModeColors(effectiveEditPermission), [effectiveEditPermission]);
+
+    const chatInputWrapperStyle = React.useMemo<React.CSSProperties | undefined>(() => {
+        if (!chatInputAccent) {
+            return undefined;
+        }
+        return {
+            borderColor: chatInputAccent.border ?? chatInputAccent.text,
+            borderWidth: chatInputAccent.borderWidth ?? 1,
+        };
+    }, [chatInputAccent]);
+
+    const hasContent = message.trim() || attachedFiles.length > 0;
+
+    const canAbort = working.isWorking;
+
+    const isAbortPromptActive = React.useMemo(() => {
+        if (!currentSessionId) return false;
+        return abortPromptSessionId === currentSessionId && Boolean(abortPromptExpiresAt);
+    }, [abortPromptSessionId, abortPromptExpiresAt, currentSessionId]);
+    const canShowAbortButton = canAbort && (isMobile || isAbortPromptActive);
+
+    const handleSubmit = async (e?: React.FormEvent) => {
+        e?.preventDefault();
+
+        if (!hasContent || !currentSessionId) return;
+
+        const messageToSend = message.replace(/^\n+|\n+$/g, '');
+
+        scrollToBottom?.({ instant: true });
+
+        const normalizedCommand = messageToSend.trimStart();
+        if (normalizedCommand.startsWith('/')) {
+            const commandName = normalizedCommand
+                .slice(1)
+                .trim()
+                .split(/\s+/)[0]
+                ?.toLowerCase();
+            if (commandName === 'summarize') {
+                scrollToBottom?.({ instant: true });
+            }
+        }
+
+        if (!currentProviderId || !currentModelId) {
+
+            console.warn('Cannot send message: provider or model not selected');
+            return;
+        }
+
+        const { sanitizedText, mention } = parseAgentMentions(messageToSend, agents);
+        const agentMentionName = mention?.name;
+
+        const attachmentsToSend = attachedFiles.map((file) => ({ ...file }));
+        if (attachmentsToSend.length > 0) {
+            clearAttachedFiles();
+        }
+
+        setMessage('');
+
+        await sendMessage(sanitizedText, currentProviderId, currentModelId, currentAgentName, attachmentsToSend, agentMentionName)
+            .catch((error: unknown) => {
+                const rawMessage =
+                    error instanceof Error
+                        ? error.message
+                        : typeof error === 'string'
+                          ? error
+                          : String(error ?? '');
+                const normalized = rawMessage.toLowerCase();
+
+                console.error('Message send failed:', rawMessage || error);
+
+                const isSoftNetworkError =
+                    normalized.includes('timeout') ||
+                    normalized.includes('timed out') ||
+                    normalized.includes('may still be processing') ||
+                    normalized.includes('being processed') ||
+                    normalized.includes('failed to fetch') ||
+                    normalized.includes('networkerror') ||
+                    normalized.includes('network error') ||
+                    normalized.includes('gateway timeout') ||
+                    normalized === 'failed to send message';
+
+                if (isSoftNetworkError) {
+
+                    return;
+                }
+
+                if (attachmentsToSend.length > 0) {
+                    useFileStore.setState({ attachedFiles: attachmentsToSend });
+                }
+                toast.error(rawMessage || 'Message failed to send. Attachments restored.');
+            });
+
+        textareaRef.current?.focus();
+
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+
+        if (showCommandAutocomplete && commandRef.current) {
+            if (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Escape' || e.key === 'Tab') {
+                e.preventDefault();
+                commandRef.current.handleKeyDown(e.key);
+                return;
+            }
+        }
+
+        if (showAgentAutocomplete && agentRef.current) {
+            if (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Escape' || e.key === 'Tab') {
+                e.preventDefault();
+                agentRef.current.handleKeyDown(e.key);
+                return;
+            }
+        }
+
+        if (showFileMention && mentionRef.current) {
+            if (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Escape' || e.key === 'Tab') {
+                e.preventDefault();
+                mentionRef.current.handleKeyDown(e.key);
+                return;
+            }
+        }
+
+        if (e.key === 'Tab' && !showCommandAutocomplete && !showFileMention) {
+            e.preventDefault();
+            cycleAgent();
+            return;
+        }
+
+        if (e.key === 'Enter' && !e.shiftKey && !isMobile) {
+            e.preventDefault();
+            handleSubmit();
+        }
+    };
+
+    const startAbortIndicator = React.useCallback(() => {
+        if (abortTimeoutRef.current) {
+            clearTimeout(abortTimeoutRef.current);
+            abortTimeoutRef.current = null;
+        }
+
+        setShowAbortStatus(true);
+
+        abortTimeoutRef.current = setTimeout(() => {
+            setShowAbortStatus(false);
+            abortTimeoutRef.current = null;
+        }, 1800);
+    }, []);
+
+    const handleAbort = React.useCallback(() => {
+        clearAbortPrompt();
+        startAbortIndicator();
+
+        void abortCurrentOperation();
+    }, [abortCurrentOperation, clearAbortPrompt, startAbortIndicator]);
+
+    const cycleAgent = () => {
+        const primaryAgents = agents.filter(agent => isPrimaryMode(agent.mode));
+
+        if (primaryAgents.length <= 1) return;
+
+        const currentIndex = primaryAgents.findIndex(agent => agent.name === currentAgentName);
+        const nextIndex = (currentIndex + 1) % primaryAgents.length;
+        const nextAgent = primaryAgents[nextIndex];
+
+        setAgent(nextAgent.name);
+
+        if (currentSessionId) {
+
+            saveSessionAgentSelection(currentSessionId, nextAgent.name);
+        }
+    };
+
+    const adjustTextareaHeight = React.useCallback(() => {
+        const textarea = textareaRef.current;
+        if (!textarea) {
+            return;
+        }
+
+        textarea.style.height = 'auto';
+
+        const view = textarea.ownerDocument?.defaultView;
+        const computedStyle = view ? view.getComputedStyle(textarea) : null;
+        const lineHeight = computedStyle ? parseFloat(computedStyle.lineHeight) : NaN;
+        const paddingTop = computedStyle ? parseFloat(computedStyle.paddingTop) : NaN;
+        const paddingBottom = computedStyle ? parseFloat(computedStyle.paddingBottom) : NaN;
+        const fallbackLineHeight = 22;
+        const fallbackPadding = 16;
+        const paddingTotal = Number.isNaN(paddingTop) || Number.isNaN(paddingBottom)
+            ? fallbackPadding
+            : paddingTop + paddingBottom;
+        const targetLineHeight = Number.isNaN(lineHeight) ? fallbackLineHeight : lineHeight;
+        const maxHeight = targetLineHeight * MAX_VISIBLE_TEXTAREA_LINES + paddingTotal;
+        const scrollHeight = textarea.scrollHeight || textarea.offsetHeight;
+        const nextHeight = Math.min(scrollHeight, maxHeight);
+
+        textarea.style.height = `${nextHeight}px`;
+        textarea.style.maxHeight = `${maxHeight}px`;
+
+        setTextareaSize((prev) => {
+            if (prev && prev.height === nextHeight && prev.maxHeight === maxHeight) {
+                return prev;
+            }
+            return { height: nextHeight, maxHeight };
+        });
+    }, []);
+
+    React.useLayoutEffect(() => {
+        adjustTextareaHeight();
+    }, [adjustTextareaHeight, message, isMobile]);
+
+    const updateAutocompleteState = React.useCallback((value: string, cursorPosition: number) => {
+        if (value.startsWith('/')) {
+            const firstSpace = value.indexOf(' ');
+            const firstNewline = value.indexOf('\n');
+            const commandEnd = Math.min(
+                firstSpace === -1 ? value.length : firstSpace,
+                firstNewline === -1 ? value.length : firstNewline
+            );
+
+            if (cursorPosition <= commandEnd && firstSpace === -1) {
+                const commandText = value.substring(1, commandEnd);
+                setCommandQuery(commandText);
+                setShowCommandAutocomplete(true);
+                setShowFileMention(false);
+                setShowAgentAutocomplete(false);
+            } else {
+                setShowCommandAutocomplete(false);
+            }
+            return;
+        }
+
+        setShowCommandAutocomplete(false);
+
+        const textBeforeCursor = value.substring(0, cursorPosition);
+
+        const lastHashSymbol = textBeforeCursor.lastIndexOf('#');
+        if (lastHashSymbol !== -1) {
+            const charBefore = lastHashSymbol > 0 ? textBeforeCursor[lastHashSymbol - 1] : null;
+            const textAfterHash = textBeforeCursor.substring(lastHashSymbol + 1);
+            const hasSeparator = textAfterHash.includes(' ') || textAfterHash.includes('\n');
+            const isWordBoundary = !charBefore || /\s/.test(charBefore);
+
+            if (isWordBoundary && !hasSeparator) {
+                setAgentQuery(textAfterHash);
+                setShowAgentAutocomplete(true);
+                setShowFileMention(false);
+                return;
+            }
+        }
+
+        setShowAgentAutocomplete(false);
+        setAgentQuery('');
+
+        const lastAtSymbol = textBeforeCursor.lastIndexOf('@');
+        if (lastAtSymbol !== -1) {
+            const textAfterAt = textBeforeCursor.substring(lastAtSymbol + 1);
+            if (!textAfterAt.includes(' ') && !textAfterAt.includes('\n')) {
+                setMentionQuery(textAfterAt);
+                setShowFileMention(true);
+            } else {
+                setShowFileMention(false);
+            }
+        } else {
+            setShowFileMention(false);
+        }
+    }, [setAgentQuery, setCommandQuery, setMentionQuery, setShowAgentAutocomplete, setShowCommandAutocomplete, setShowFileMention]);
+
+    const insertTextAtSelection = React.useCallback((text: string) => {
+        if (!text) {
+            return;
+        }
+
+        const textarea = textareaRef.current;
+        if (!textarea) {
+            const nextValue = message + text;
+            setMessage(nextValue);
+            updateAutocompleteState(nextValue, nextValue.length);
+            requestAnimationFrame(() => adjustTextareaHeight());
+            return;
+        }
+
+        const start = textarea.selectionStart ?? message.length;
+        const end = textarea.selectionEnd ?? message.length;
+        const nextValue = `${message.substring(0, start)}${text}${message.substring(end)}`;
+        setMessage(nextValue);
+        const cursorPosition = start + text.length;
+
+        requestAnimationFrame(() => {
+            const currentTextarea = textareaRef.current;
+            if (currentTextarea) {
+                currentTextarea.selectionStart = cursorPosition;
+                currentTextarea.selectionEnd = cursorPosition;
+            }
+            adjustTextareaHeight();
+        });
+
+        updateAutocompleteState(nextValue, cursorPosition);
+    }, [adjustTextareaHeight, message, updateAutocompleteState]);
+
+    const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const value = e.target.value;
+        const cursorPosition = e.target.selectionStart ?? value.length;
+        setMessage(value);
+        adjustTextareaHeight();
+        updateAutocompleteState(value, cursorPosition);
+    };
+
+    const handlePaste = React.useCallback(async (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+        const fileMap = new Map<string, File>();
+
+        Array.from(e.clipboardData.files || []).forEach(file => {
+            if (file.type.startsWith('image/')) {
+                fileMap.set(`${file.name}-${file.size}`, file);
+            }
+        });
+
+        Array.from(e.clipboardData.items || []).forEach(item => {
+            if (item.kind === 'file' && item.type.startsWith('image/')) {
+                const file = item.getAsFile();
+                if (file) {
+                    fileMap.set(`${file.name}-${file.size}`, file);
+                }
+            }
+        });
+
+        const imageFiles = Array.from(fileMap.values());
+        if (imageFiles.length === 0) {
+            return;
+        }
+
+        if (!currentSessionId) {
+            return;
+        }
+
+        e.preventDefault();
+
+        const pastedText = e.clipboardData.getData('text');
+        if (pastedText) {
+            insertTextAtSelection(pastedText);
+        }
+
+        let attachedCount = 0;
+
+        for (const file of imageFiles) {
+            const sizeBefore = useSessionStore.getState().attachedFiles.length;
+            try {
+                await addAttachedFile(file);
+                const sizeAfter = useSessionStore.getState().attachedFiles.length;
+                if (sizeAfter > sizeBefore) {
+                    attachedCount += 1;
+                }
+            } catch (error) {
+                console.error('Clipboard image attach failed', error);
+                toast.error(error instanceof Error ? error.message : 'Failed to attach image from clipboard');
+            }
+        }
+
+        if (attachedCount > 0) {
+            toast.success(`Attached ${attachedCount} image${attachedCount > 1 ? 's' : ''} from clipboard`);
+        }
+    }, [addAttachedFile, currentSessionId, insertTextAtSelection]);
+
+    const handleFileSelect = (file: { name: string; path: string }) => {
+
+        const cursorPosition = textareaRef.current?.selectionStart || 0;
+        const textBeforeCursor = message.substring(0, cursorPosition);
+        const lastAtSymbol = textBeforeCursor.lastIndexOf('@');
+
+        if (lastAtSymbol !== -1) {
+            const newMessage =
+                message.substring(0, lastAtSymbol) +
+                file.name +
+                message.substring(cursorPosition);
+            setMessage(newMessage);
+        }
+
+        setShowFileMention(false);
+        setMentionQuery('');
+
+        textareaRef.current?.focus();
+    };
+
+    const handleAgentSelect = (agentName: string) => {
+        const textarea = textareaRef.current;
+        const cursorPosition = textarea?.selectionStart ?? message.length;
+        const textBeforeCursor = message.substring(0, cursorPosition);
+        const lastHashSymbol = textBeforeCursor.lastIndexOf('#');
+
+        if (lastHashSymbol !== -1) {
+            const newMessage =
+                message.substring(0, lastHashSymbol) +
+                `#${agentName} ` +
+                message.substring(cursorPosition);
+            setMessage(newMessage);
+
+            const nextCursor = lastHashSymbol + agentName.length + 2;
+            requestAnimationFrame(() => {
+                if (textareaRef.current) {
+                    textareaRef.current.selectionStart = nextCursor;
+                    textareaRef.current.selectionEnd = nextCursor;
+                }
+                adjustTextareaHeight();
+                updateAutocompleteState(newMessage, nextCursor);
+            });
+        }
+
+        setShowAgentAutocomplete(false);
+        setAgentQuery('');
+
+        textareaRef.current?.focus();
+    };
+
+    const handleCommandSelect = (command: { name: string; description?: string; agent?: string; model?: string }) => {
+
+        setMessage(`/${command.name} `);
+
+        const textareaElement = textareaRef.current as HTMLTextAreaElement & { _commandMetadata?: typeof command };
+        if (textareaElement) {
+            textareaElement._commandMetadata = command;
+        }
+
+        setShowCommandAutocomplete(false);
+        setCommandQuery('');
+
+        setTimeout(() => {
+            if (textareaRef.current) {
+                textareaRef.current.focus();
+                textareaRef.current.setSelectionRange(textareaRef.current.value.length, textareaRef.current.value.length);
+            }
+        }, 0);
+    };
+
+    React.useEffect(() => {
+
+        if (currentSessionId && textareaRef.current && !isMobile) {
+            textareaRef.current.focus();
+        }
+    }, [currentSessionId, isMobile]);
+
+    React.useEffect(() => {
+        if (abortPromptSessionId && abortPromptSessionId !== currentSessionId) {
+            clearAbortPrompt();
+        }
+    }, [abortPromptSessionId, currentSessionId, clearAbortPrompt]);
+
+    const handleDragOver = (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (currentSessionId && !isDragging) {
+            setIsDragging(true);
+        }
+    };
+
+    const handleDragLeave = (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.currentTarget === e.target) {
+            setIsDragging(false);
+        }
+    };
+
+    const handleDrop = async (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+
+        if (!currentSessionId) return;
+
+        const files = Array.from(e.dataTransfer.files);
+        let attachedCount = 0;
+
+        for (const file of files) {
+            const sizeBefore = useSessionStore.getState().attachedFiles.length;
+            try {
+                await addAttachedFile(file);
+                const sizeAfter = useSessionStore.getState().attachedFiles.length;
+                if (sizeAfter > sizeBefore) {
+                    attachedCount += 1;
+                }
+            } catch (error) {
+                console.error('File attach failed', error);
+                toast.error(error instanceof Error ? error.message : 'Failed to attach file');
+            }
+        }
+
+        if (attachedCount > 0) {
+            toast.success(`Attached ${attachedCount} file${attachedCount > 1 ? 's' : ''}`);
+        }
+    };
+
+    const handleServerFilesSelected = React.useCallback(async (files: Array<{ path: string; name: string }>) => {
+        let attachedCount = 0;
+
+        for (const file of files) {
+            const sizeBefore = useSessionStore.getState().attachedFiles.length;
+            try {
+                await addServerFile(file.path, file.name);
+                const sizeAfter = useSessionStore.getState().attachedFiles.length;
+                if (sizeAfter > sizeBefore) {
+                    attachedCount += 1;
+                }
+            } catch (error) {
+                console.error('Server file attach failed', error);
+                toast.error(error instanceof Error ? error.message : 'Failed to attach file');
+            }
+        }
+
+        if (attachedCount > 0) {
+            toast.success(`Attached ${attachedCount} file${attachedCount > 1 ? 's' : ''}`);
+        }
+    }, [addServerFile]);
+
+    const footerGapClass = 'gap-x-1.5 gap-y-0';
+    const footerPaddingClass = isMobile ? 'px-1.5 py-1.5' : 'px-2.5 py-1.5';
+    const footerHeightClass = isMobile ? 'h-9 w-9' : 'h-7 w-7';
+    const iconSizeClass = isMobile ? 'h-5 w-5' : 'h-[18px] w-[18px]';
+
+    const iconButtonBaseClass = cn(
+        footerHeightClass,
+        'flex items-center justify-center text-muted-foreground transition-none outline-none focus:outline-none flex-shrink-0'
+    );
+
+    const actionButton = (
+        <button
+            type='submit'
+            disabled={!hasContent || !currentSessionId}
+            className={cn(
+                iconButtonBaseClass,
+                hasContent && currentSessionId
+                    ? 'text-primary hover:text-primary'
+                    : 'opacity-30'
+            )}
+            aria-label='Send message'
+        >
+            <RiSendPlane2Line className={cn(iconSizeClass)} />
+        </button>
+    );
+
+    const projectFileButton = (
+        <ServerFilePicker onFilesSelected={handleServerFilesSelected} multiSelect>
+            <button
+                type='button'
+                className={iconButtonBaseClass}
+                title='Attach files from project'
+                aria-label='Attach files from project'
+             >
+                <RiFileUploadLine className={cn(iconSizeClass, 'text-current')} />
+            </button>
+        </ServerFilePicker>
+    );
+
+    const settingsButton = onOpenSettings ? (
+        <button
+            type='button'
+            onClick={onOpenSettings}
+            className={iconButtonBaseClass}
+            title='Model and agent settings'
+            aria-label='Model and agent settings'
+        >
+            <RiAiAgentLine className={cn(iconSizeClass, 'text-current')} />
+        </button>
+    ) : null;
+
+    const attachmentsControls = (
+        <>
+            <FileAttachmentButton />
+            {projectFileButton}
+            {settingsButton}
+        </>
+    );
+
+    const workingStatusText = working.statusText;
+
+    React.useEffect(() => {
+        const pendingAbortBanner = Boolean(working.wasAborted);
+        if (!prevWasAbortedRef.current && pendingAbortBanner && !showAbortStatus) {
+            startAbortIndicator();
+            if (currentSessionId) {
+                acknowledgeSessionAbort(currentSessionId);
+            }
+        }
+        prevWasAbortedRef.current = pendingAbortBanner;
+    }, [
+        acknowledgeSessionAbort,
+        currentSessionId,
+        showAbortStatus,
+        startAbortIndicator,
+        working.wasAborted,
+    ]);
+
+    React.useEffect(() => {
+        return () => {
+            if (abortTimeoutRef.current) {
+                clearTimeout(abortTimeoutRef.current);
+                abortTimeoutRef.current = null;
+            }
+        };
+    }, []);
+
+    const shouldRenderPlaceholder = !showAbortStatus && (working.wasAborted || !working.abortActive);
+
+    return (
+
+        <form onSubmit={handleSubmit} className="pt-0 pb-4 bottom-safe-area">
+            <div className="chat-column mb-1.5 h-[1.2rem] flex items-center justify-between gap-2 overflow-visible">
+                <div className="flex-1 flex items-center overflow-hidden">
+                    {showAbortStatus ? (
+                        <div className="flex h-full items-center text-[var(--status-error)] pl-[2ch]">
+                            <span className="flex items-center gap-1.5 typography-ui-header">
+                                <RiCloseCircleLine size={18} aria-hidden="true" />
+                                Aborted
+                            </span>
+                        </div>
+                    ) : shouldRenderPlaceholder ? (
+                        <WorkingPlaceholder
+                            key={currentSessionId ?? 'no-session'}
+                            statusText={workingStatusText}
+                            isWaitingForPermission={working.isWaitingForPermission}
+                            wasAborted={working.wasAborted}
+                            completionId={working.lastCompletionId}
+                            isComplete={working.isComplete}
+                        />
+                    ) : null}
+                </div>
+
+                {canShowAbortButton ? (
+                    <div className="flex-shrink-0 pr-[2ch]">
+                        {isMobile ? (
+                            <button
+                                type='button'
+                                onClick={handleAbort}
+                                className='flex items-center justify-center h-[1.2rem] w-[1.2rem] text-[var(--status-error)] transition-opacity hover:opacity-80 focus-visible:outline-none'
+                                aria-label='Stop generating'
+                            >
+                                <RiCloseCircleLine size={18} aria-hidden='true' />
+                            </button>
+                        ) : (
+                            <button
+                                type='button'
+                                onClick={handleAbort}
+                                className='inline-flex h-[1.2rem] items-center gap-0.5 rounded-md bg-[var(--status-error)]/70 px-1 text-[0.65rem] font-medium text-white hover:bg-[var(--status-error)]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--status-error)]/40'
+                                aria-label='Stop generating'
+                            >
+                                <RiCloseCircleLine size={11} className='text-white' aria-hidden='true' />
+                                Abort
+                            </button>
+                        )}
+                    </div>
+                ) : null}
+            </div>
+            <div
+                ref={dropZoneRef}
+                className={cn(
+                    "chat-column relative overflow-visible",
+                    isDragging && "ring-2 ring-primary ring-offset-2 rounded-xl"
+                )}
+
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+            >
+                {isDragging && (
+                    <div className="absolute inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm rounded-xl">
+                        <div className="text-center">
+                            <FileAttachmentButton />
+                            <p className="mt-2 typography-ui-label text-muted-foreground">Drop files here to attach</p>
+                        </div>
+                    </div>
+                )}
+                <AttachedFilesList />
+                <div
+                    className={cn(
+                        "rounded-xl border border-border/20 bg-input/10 dark:bg-input/30",
+                        "flex flex-col relative overflow-visible"
+                    )}
+                    style={chatInputWrapperStyle}
+                >
+                        {}
+                    {showCommandAutocomplete && (
+                        <CommandAutocomplete
+                            ref={commandRef}
+                            searchQuery={commandQuery}
+                            onCommandSelect={handleCommandSelect}
+                            onClose={() => setShowCommandAutocomplete(false)}
+                        />
+                    )}
+                    {}
+                    {showAgentAutocomplete && (
+                        <AgentMentionAutocomplete
+                            ref={agentRef}
+                            searchQuery={agentQuery}
+                            onAgentSelect={handleAgentSelect}
+                            onClose={() => setShowAgentAutocomplete(false)}
+                        />
+                    )}
+                    {}
+                    {showFileMention && (
+                        <FileMentionAutocomplete
+                            ref={mentionRef}
+                            searchQuery={mentionQuery}
+                            onFileSelect={handleFileSelect}
+                            onClose={() => setShowFileMention(false)}
+                        />
+                    )}
+                        <Textarea
+                            ref={textareaRef}
+                            data-chat-input="true"
+                            value={message}
+                            onChange={handleTextChange}
+                            onKeyDown={handleKeyDown}
+                            onPaste={handlePaste}
+                            placeholder={currentSessionId ? "# for agents; @ for files; / for commands" : "Select or create a session to start chatting"}
+                            disabled={!currentSessionId}
+
+                        className={cn(
+                            'min-h-[52px] resize-none border-0 px-3 shadow-none rounded-t-xl rounded-b-none appearance-none focus:shadow-none focus-visible:shadow-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-transparent hover:border-transparent bg-transparent',
+                            isMobile ? "py-2.5" : "pt-4 pb-2",
+                            "focus-visible:outline-none focus-visible:ring-0"
+                        )}
+                        style={{
+                            flex: 'none',
+                            height: textareaSize ? `${textareaSize.height}px` : undefined,
+                            maxHeight: textareaSize ? `${textareaSize.maxHeight}px` : undefined,
+                        }}
+                        rows={1}
+                    />
+                    <div
+                        className={cn(
+                            'rounded-b-xl bg-transparent',
+                            footerPaddingClass,
+                            isMobile ? 'flex items-center gap-x-1.5' : cn('flex items-center justify-between', footerGapClass)
+                        )}
+                        data-chat-input-footer="true"
+                    >
+                        {isMobile ? (
+                            <div className="flex w-full items-center gap-x-1.5">
+                                <div className="flex items-center flex-shrink-0 gap-x-1">
+                                    {attachmentsControls}
+                                </div>
+                                <div className="flex-1" />
+                                <div className="flex items-center gap-x-1 min-w-0">
+                                    <ModelControls className={cn('flex items-center justify-end min-w-0')} />
+                                    {actionButton}
+                                </div>
+                            </div>
+                        ) : (
+                            <>
+                                <div className={cn("flex items-center flex-shrink-0", footerGapClass)}>
+                                    {attachmentsControls}
+                                </div>
+                                <div className={cn('flex items-center flex-1 justify-end', footerGapClass, 'md:gap-x-3')}>
+                                    <ModelControls className={cn('flex-1 min-w-0 justify-end')} />
+                                    {actionButton}
+                                </div>
+                            </>
+                        )}
+                    </div>
+                </div>
+
+            </div>
+        </form>
+    );
+};
diff --git a/packages/ui/src/components/chat/ChatMessage.tsx b/packages/ui/src/components/chat/ChatMessage.tsx
new file mode 100644
index 00000000..ceb897e0
--- /dev/null
+++ b/packages/ui/src/components/chat/ChatMessage.tsx
@@ -0,0 +1,750 @@
+import React from 'react';
+import type { Message, Part } from '@opencode-ai/sdk';
+import { useShallow } from 'zustand/react/shallow';
+
+import { defaultCodeDark, defaultCodeLight } from '@/lib/codeTheme';
+import { MessageFreshnessDetector } from '@/lib/messageFreshness';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useMessageStore } from '@/stores/messageStore';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { useUIStore } from '@/stores/useUIStore';
+import { useDeviceInfo } from '@/lib/device';
+import { useThemeSystem } from '@/contexts/useThemeSystem';
+import { generateSyntaxTheme } from '@/lib/theme/syntaxThemeGenerator';
+import { cn } from '@/lib/utils';
+
+import type { AnimationHandlers, ContentChangeReason } from '@/hooks/useChatScrollManager';
+import MessageHeader from './message/MessageHeader';
+import MessageBody from './message/MessageBody';
+import type { AgentMentionInfo } from './message/types';
+import type { StreamPhase, ToolPopupContent } from './message/types';
+import { deriveMessageRole } from './message/messageRole';
+import { filterVisibleParts } from './message/partUtils';
+import { FadeInOnReveal } from './message/FadeInOnReveal';
+import type { TurnGroupingContext } from './hooks/useTurnGrouping';
+
+const ToolOutputDialog = React.lazy(() => import('./message/ToolOutputDialog'));
+
+function useStickyDisplayValue<T>(value: T | null | undefined): T | null | undefined {
+    const ref = React.useRef<{ hasValue: boolean; value: T | null | undefined }>({ hasValue: false, value: undefined as T | null | undefined });
+
+    if (!ref.current.hasValue && value !== undefined && value !== null) {
+        ref.current = { hasValue: true, value };
+    }
+
+    return ref.current.hasValue ? ref.current.value : value;
+}
+
+const getMessageInfoProp = (info: unknown, key: string): unknown => {
+    if (typeof info === 'object' && info !== null) {
+        return (info as Record<string, unknown>)[key];
+    }
+    return undefined;
+};
+
+interface ChatMessageProps {
+    message: {
+        info: Message;
+        parts: Part[];
+    };
+    previousMessage?: {
+        info: Message;
+        parts: Part[];
+    };
+    nextMessage?: {
+        info: Message;
+        parts: Part[];
+    };
+    onContentChange?: (reason?: ContentChangeReason) => void;
+    animationHandlers?: AnimationHandlers;
+    scrollToBottom?: (options?: { instant?: boolean }) => void;
+    isPendingAnchor?: boolean;
+    turnGroupingContext?: TurnGroupingContext;
+}
+
+const ChatMessage: React.FC<ChatMessageProps> = ({
+    message,
+    previousMessage,
+    nextMessage,
+    onContentChange,
+    animationHandlers,
+    isPendingAnchor = false,
+    turnGroupingContext,
+}) => {
+    const { isMobile, hasTouchInput } = useDeviceInfo();
+    const { currentTheme } = useThemeSystem();
+    const messageContainerRef = React.useRef<HTMLDivElement | null>(null);
+
+    const sessionState = useSessionStore(
+        useShallow((state) => ({
+            lifecyclePhase: state.messageStreamStates.get(message.info.id)?.phase ?? null,
+            isStreamingMessage: (() => {
+                const sessionId =
+                    (message.info as { sessionID?: string }).sessionID ??
+                    state.currentSessionId ??
+                    null;
+                if (!sessionId) return false;
+                return (state.streamingMessageIds.get(sessionId) ?? null) === message.info.id;
+            })(),
+            currentSessionId: state.currentSessionId,
+            getCurrentAgent: state.getCurrentAgent,
+            getSessionAgentSelection: state.getSessionAgentSelection,
+            getAgentModelForSession: state.getAgentModelForSession,
+            getSessionModelSelection: state.getSessionModelSelection,
+        }))
+    );
+
+    const {
+        lifecyclePhase,
+        isStreamingMessage,
+        currentSessionId,
+        getCurrentAgent,
+        getSessionAgentSelection,
+        getAgentModelForSession,
+        getSessionModelSelection,
+    } = sessionState;
+
+    const providers = useConfigStore((state) => state.providers);
+    const showReasoningTraces = useUIStore((state) => state.showReasoningTraces);
+
+    React.useEffect(() => {
+        if (currentSessionId) {
+            MessageFreshnessDetector.getInstance().recordSessionStart(currentSessionId);
+        }
+    }, [currentSessionId]);
+
+    const [copiedCode, setCopiedCode] = React.useState<string | null>(null);
+    const [copiedMessage, setCopiedMessage] = React.useState(false);
+    const [expandedTools, setExpandedTools] = React.useState<Set<string>>(new Set());
+    const [popupContent, setPopupContent] = React.useState<ToolPopupContent>({
+        open: false,
+        title: '',
+        content: '',
+    });
+
+    const messageRole = React.useMemo(() => deriveMessageRole(message.info), [message.info]);
+    const isUser = messageRole.isUser;
+
+    const normalizedParts = React.useMemo(() => {
+        if (!isUser) {
+            return message.parts;
+        }
+
+        return message.parts.map((part) => {
+            const rawPart = part as Record<string, unknown>;
+            if (rawPart.type === 'compaction') {
+                return { type: 'text', text: '/summarize' } as Part;
+            }
+            return part;
+        });
+    }, [isUser, message.parts]);
+
+    const previousUserMetadata = React.useMemo(() => {
+        if (isUser || !previousMessage) {
+            return null;
+        }
+
+        const clientRole = getMessageInfoProp(previousMessage.info, 'clientRole');
+        const role = getMessageInfoProp(previousMessage.info, 'role');
+        const previousRole = typeof clientRole === 'string' ? clientRole : (typeof role === 'string' ? role : undefined);
+        if (previousRole !== 'user') {
+            return null;
+        }
+
+        const mode = getMessageInfoProp(previousMessage.info, 'mode');
+        const providerID = getMessageInfoProp(previousMessage.info, 'providerID');
+        const modelID = getMessageInfoProp(previousMessage.info, 'modelID');
+        const resolvedAgent = typeof mode === 'string' && mode.trim().length > 0 ? mode : undefined;
+        const resolvedProvider = typeof providerID === 'string' && providerID.trim().length > 0 ? providerID : undefined;
+        const resolvedModel = typeof modelID === 'string' && modelID.trim().length > 0 ? modelID : undefined;
+
+        if (!resolvedAgent && !resolvedProvider && !resolvedModel) {
+            return null;
+        }
+
+        return {
+            agentName: resolvedAgent,
+            providerId: resolvedProvider,
+            modelId: resolvedModel,
+        };
+    }, [isUser, previousMessage]);
+
+    const agentName = React.useMemo(() => {
+        if (isUser) return undefined;
+
+        const messageMode = getMessageInfoProp(message.info, 'mode');
+        if (typeof messageMode === 'string' && messageMode.trim().length > 0) {
+            return messageMode;
+        }
+
+        if (previousUserMetadata?.agentName) {
+            return previousUserMetadata.agentName;
+        }
+
+        const sessionId = message.info.sessionID;
+        if (!sessionId) {
+            return undefined;
+        }
+
+        const currentContextAgent = getCurrentAgent(sessionId);
+        if (currentContextAgent) {
+            return currentContextAgent;
+        }
+
+        const savedSelection = getSessionAgentSelection(sessionId);
+        return savedSelection ?? undefined;
+    }, [isUser, message.info, previousUserMetadata, getCurrentAgent, getSessionAgentSelection]);
+
+    const sessionId = message.info.sessionID;
+    const messageProviderID = !isUser ? getMessageInfoProp(message.info, 'providerID') : null;
+    const messageModelID = !isUser ? getMessageInfoProp(message.info, 'modelID') : null;
+
+    const contextModelSelection = React.useMemo(() => {
+        if (isUser || !sessionId) return null;
+
+        if (previousUserMetadata?.providerId && previousUserMetadata?.modelId) {
+            return {
+                providerId: previousUserMetadata.providerId,
+                modelId: previousUserMetadata.modelId,
+            };
+        }
+
+        if (agentName) {
+            const agentSelection = getAgentModelForSession(sessionId, agentName);
+            if (agentSelection?.providerId && agentSelection?.modelId) {
+                return agentSelection;
+            }
+        }
+
+        const sessionSelection = getSessionModelSelection(sessionId);
+        if (sessionSelection?.providerId && sessionSelection?.modelId) {
+            return sessionSelection;
+        }
+
+        return null;
+    }, [isUser, sessionId, agentName, previousUserMetadata, getAgentModelForSession, getSessionModelSelection]);
+
+    const providerID = React.useMemo(() => {
+        if (isUser) return null;
+        if (typeof messageProviderID === 'string' && messageProviderID.trim().length > 0) {
+            return messageProviderID;
+        }
+        return contextModelSelection?.providerId ?? null;
+    }, [isUser, messageProviderID, contextModelSelection]);
+
+    const modelID = React.useMemo(() => {
+        if (isUser) return null;
+        if (typeof messageModelID === 'string' && messageModelID.trim().length > 0) {
+            return messageModelID;
+        }
+        return contextModelSelection?.modelId ?? null;
+    }, [isUser, messageModelID, contextModelSelection]);
+
+    const modelName = React.useMemo(() => {
+        if (isUser) return undefined;
+
+        if (providerID && modelID && providers.length > 0) {
+            const provider = providers.find((p) => p.id === providerID);
+            if (provider?.models && Array.isArray(provider.models)) {
+                const model = provider.models.find((m: Record<string, unknown>) => (m as Record<string, unknown>).id === modelID);
+                const modelObj = model as Record<string, unknown> | undefined;
+                const name = modelObj?.name;
+                return typeof name === 'string' ? name : undefined;
+            }
+        }
+
+        return undefined;
+    }, [isUser, providerID, modelID, providers]);
+
+    const displayAgentName = useStickyDisplayValue<string>(agentName);
+    const displayProviderIDValue = useStickyDisplayValue<string>(providerID ?? undefined);
+    const displayModelName = useStickyDisplayValue<string>(modelName);
+
+    const headerAgentName = displayAgentName ?? undefined;
+    const headerProviderID = displayProviderIDValue ?? null;
+    const headerModelName = displayModelName ?? undefined;
+
+    const messageCompletedAt = React.useMemo(() => {
+        const timeInfo = message.info.time as { completed?: number } | undefined;
+        return typeof timeInfo?.completed === 'number' ? timeInfo.completed : null;
+    }, [message.info.time]);
+
+    const isMessageCompleted = React.useMemo(() => {
+        if (isUser) return true;
+        return Boolean(messageCompletedAt && messageCompletedAt > 0);
+    }, [isUser, messageCompletedAt]);
+
+    const visibleParts = React.useMemo(
+        () =>
+            filterVisibleParts(normalizedParts, {
+                includeReasoning: showReasoningTraces,
+            }),
+        [normalizedParts, showReasoningTraces]
+    );
+
+    const displayParts = React.useMemo(() => {
+        if (isUser) {
+            return visibleParts;
+        }
+
+        return isMessageCompleted ? visibleParts : [];
+    }, [isUser, isMessageCompleted, visibleParts]);
+
+    const assistantTextParts = React.useMemo(() => {
+        if (isUser) {
+            return [];
+        }
+        return visibleParts.filter((part) => part.type === 'text');
+    }, [isUser, visibleParts]);
+
+    const toolParts = React.useMemo(() => {
+        if (isUser) {
+            return [];
+        }
+        return visibleParts.filter((part) => part.type === 'tool');
+    }, [isUser, visibleParts]);
+
+    const agentMention = React.useMemo(() => {
+        if (!isUser) {
+            return undefined;
+        }
+        const mentionPart = message.parts.find((part) => part.type === 'agent');
+        if (!mentionPart) {
+            return undefined;
+        }
+        const partWithName = mentionPart as { name?: string; source?: { value?: string } };
+        const name = typeof partWithName.name === 'string' ? partWithName.name : undefined;
+        if (!name) {
+            return undefined;
+        }
+        const rawValue = partWithName.source && typeof partWithName.source.value === 'string' && partWithName.source.value.trim().length > 0
+            ? partWithName.source.value
+            : `#${name}`;
+        return { name, token: rawValue } satisfies AgentMentionInfo;
+    }, [isUser, message.parts]);
+
+    const stepState = React.useMemo(() => {
+
+        let stepStarts = 0;
+        let stepFinishes = 0;
+        visibleParts.forEach((part) => {
+            if (part.type === 'step-start') {
+                stepStarts += 1;
+            } else if (part.type === 'step-finish') {
+                stepFinishes += 1;
+            }
+        });
+        return {
+            hasOpenStep: stepStarts > stepFinishes,
+        };
+    }, [visibleParts]);
+
+    const hasOpenStep = stepState.hasOpenStep;
+
+    const shouldCoordinateRendering = React.useMemo(() => {
+        if (isUser) {
+            return false;
+        }
+        if (assistantTextParts.length === 0 || toolParts.length === 0) {
+            return hasOpenStep;
+        }
+        return true;
+    }, [assistantTextParts.length, toolParts.length, hasOpenStep, isUser]);
+
+    const themeVariant = currentTheme?.metadata.variant;
+    const isDarkTheme = React.useMemo(() => {
+        if (themeVariant) {
+            return themeVariant === 'dark';
+        }
+        if (typeof document !== 'undefined') {
+            return document.documentElement.classList.contains('dark');
+        }
+        return false;
+    }, [themeVariant]);
+
+    const syntaxTheme = React.useMemo(() => {
+        if (currentTheme) {
+            return generateSyntaxTheme(currentTheme);
+        }
+        return isDarkTheme ? defaultCodeDark : defaultCodeLight;
+    }, [currentTheme, isDarkTheme]);
+
+    const shouldAnimateMessage = React.useMemo(() => {
+        if (isUser) return false;
+        const freshnessDetector = MessageFreshnessDetector.getInstance();
+        return freshnessDetector.shouldAnimateMessage(message.info, currentSessionId || message.info.sessionID);
+    }, [message.info, currentSessionId, isUser]);
+
+    const previousRole = React.useMemo(() => {
+        if (!previousMessage) return null;
+        return deriveMessageRole(previousMessage.info);
+    }, [previousMessage]);
+
+    const nextRole = React.useMemo(() => {
+        if (!nextMessage) return null;
+        return deriveMessageRole(nextMessage.info);
+    }, [nextMessage]);
+
+    const shouldShowHeader = React.useMemo(() => {
+        if (isUser) return true;
+        if (!previousRole) return true;
+        return previousRole.isUser;
+    }, [isUser, previousRole]);
+
+    const isFollowedByAssistant = React.useMemo(() => {
+        if (isUser) return false;
+        if (!nextRole) return false;
+        return !nextRole.isUser && nextRole.role === 'assistant';
+    }, [isUser, nextRole]);
+
+    const streamPhase: StreamPhase = React.useMemo(() => {
+        if (isMessageCompleted) {
+            return 'completed';
+        }
+        if (lifecyclePhase) {
+            return lifecyclePhase;
+        }
+        return isStreamingMessage ? 'streaming' : 'completed';
+    }, [isMessageCompleted, lifecyclePhase, isStreamingMessage]);
+
+    const handleCopyCode = React.useCallback((code: string) => {
+        navigator.clipboard.writeText(code);
+        setCopiedCode(code);
+        setTimeout(() => setCopiedCode(null), 2000);
+    }, []);
+
+    const userMessageIdForTurn = turnGroupingContext?.turnId;
+    const assistantSummaryFromStore = useMessageStore((state) => {
+        if (!userMessageIdForTurn) return undefined;
+        const sessionId = message.info.sessionID;
+        if (!sessionId) return undefined;
+        const sessionMessages = state.messages.get(sessionId);
+        if (!sessionMessages) return undefined;
+        const userMsg = sessionMessages.find((entry) => entry.info?.id === userMessageIdForTurn);
+        if (!userMsg) return undefined;
+        const summary = (userMsg.info as { summary?: { body?: string | null | undefined } | null | undefined }).summary;
+        const body = summary?.body;
+        return typeof body === 'string' && body.trim().length > 0 ? body : undefined;
+    });
+
+    const assistantSummaryCandidate =
+        typeof turnGroupingContext?.summaryBody === 'string' && turnGroupingContext.summaryBody.trim().length > 0
+            ? turnGroupingContext.summaryBody
+            : assistantSummaryFromStore;
+
+    const assistantSummaryRef = React.useRef<string | undefined>(undefined);
+    if (assistantSummaryCandidate && assistantSummaryCandidate.trim().length > 0) {
+        assistantSummaryRef.current = assistantSummaryCandidate;
+    }
+    const prevUserMessageIdForCopy = React.useRef(userMessageIdForTurn);
+    if (prevUserMessageIdForCopy.current !== userMessageIdForTurn) {
+        prevUserMessageIdForCopy.current = userMessageIdForTurn;
+        assistantSummaryRef.current = undefined;
+    }
+    const assistantSummaryForCopy = assistantSummaryRef.current;
+
+    const messageTextContent = React.useMemo(() => {
+        if (isUser) {
+            const textParts = displayParts
+                .filter((part): part is Part & { type: 'text'; text?: string; content?: string } => part.type === 'text')
+                .map((part) => {
+                    const text = part.text || part.content || '';
+                    return text.trim();
+                })
+                .filter((text) => text.length > 0);
+
+            const combined = textParts.join('\n');
+            return combined.replace(/\n\s*\n+/g, '\n');
+        }
+
+        if (assistantSummaryForCopy && assistantSummaryForCopy.trim().length > 0) {
+            return assistantSummaryForCopy;
+        }
+
+        const textParts = displayParts
+            .filter((part): part is Part & { type: 'text'; text?: string; content?: string } => part.type === 'text')
+            .map((part) => {
+                const text = part.text || part.content || '';
+                return text.trim();
+            })
+            .filter((text) => text.length > 0);
+
+        const combined = textParts.join('\n');
+        return combined.replace(/\n\s*\n+/g, '\n');
+    }, [assistantSummaryForCopy, displayParts, isUser]);
+
+    const hasTextContent = messageTextContent.length > 0;
+
+    const handleCopyMessage = React.useCallback(() => {
+        navigator.clipboard.writeText(messageTextContent);
+        setCopiedMessage(true);
+        setTimeout(() => setCopiedMessage(false), 2000);
+    }, [messageTextContent]);
+
+    const handleToggleTool = React.useCallback((toolId: string) => {
+        setExpandedTools((prev) => {
+            const next = new Set(prev);
+            if (next.has(toolId)) {
+                next.delete(toolId);
+            } else {
+                next.add(toolId);
+            }
+            return next;
+        });
+    }, []);
+
+    const resolvedAnimationHandlers = animationHandlers ?? null;
+    const hasAnnouncedAuxiliaryScrollRef = React.useRef(false);
+
+    const animationCompletedRef = React.useRef(false);
+    const hasRequestedReservationRef = React.useRef(false);
+    const animationStartNotifiedRef = React.useRef(false);
+    const hasTriggeredReservationOnceRef = React.useRef(false);
+
+    React.useEffect(() => {
+        animationCompletedRef.current = false;
+        hasRequestedReservationRef.current = false;
+        animationStartNotifiedRef.current = false;
+        hasTriggeredReservationOnceRef.current = false;
+        hasAnnouncedAuxiliaryScrollRef.current = false;
+    }, [message.info.id]);
+
+    const handleAuxiliaryContentComplete = React.useCallback(() => {
+        if (isUser) {
+            return;
+        }
+        if (hasAnnouncedAuxiliaryScrollRef.current) {
+            return;
+        }
+        hasAnnouncedAuxiliaryScrollRef.current = true;
+        onContentChange?.('structural');
+    }, [isUser, onContentChange]);
+
+    const handleShowPopup = React.useCallback((content: ToolPopupContent) => {
+
+        if (content.image) {
+            setPopupContent(content);
+        }
+    }, []);
+
+    const handlePopupChange = React.useCallback((open: boolean) => {
+        setPopupContent((prev) => ({ ...prev, open }));
+    }, []);
+
+    const isAnimationSettled = Boolean(getMessageInfoProp(message.info, 'animationSettled'));
+    const isStreamingPhase = streamPhase === 'streaming';
+
+    const hasReasoningParts = React.useMemo(() => {
+        if (isUser) {
+            return false;
+        }
+        return visibleParts.some((part) => part.type === 'reasoning');
+    }, [isUser, visibleParts]);
+
+    const allowAnimation = shouldAnimateMessage && !isAnimationSettled && !isStreamingPhase;
+    const shouldReserveAnimationSpace = !isUser && shouldAnimateMessage && assistantTextParts.length > 0 && !shouldCoordinateRendering;
+
+    React.useEffect(() => {
+        if (!resolvedAnimationHandlers?.onStreamingCandidate) {
+            return;
+        }
+
+        if (!shouldReserveAnimationSpace) {
+            if (hasRequestedReservationRef.current) {
+                if (hasReasoningParts && resolvedAnimationHandlers?.onReasoningBlock) {
+                    resolvedAnimationHandlers.onReasoningBlock();
+                } else if (resolvedAnimationHandlers?.onReservationCancelled) {
+                    resolvedAnimationHandlers.onReservationCancelled();
+                }
+                hasRequestedReservationRef.current = false;
+            }
+            return;
+        }
+
+        if (hasTriggeredReservationOnceRef.current) {
+            return;
+        }
+
+        hasTriggeredReservationOnceRef.current = true;
+        resolvedAnimationHandlers.onStreamingCandidate();
+        hasRequestedReservationRef.current = true;
+    }, [resolvedAnimationHandlers, shouldReserveAnimationSpace, hasReasoningParts]);
+
+    React.useEffect(() => {
+        if (!resolvedAnimationHandlers?.onAnimationStart) {
+            return;
+        }
+        if (!allowAnimation) {
+            return;
+        }
+        if (animationStartNotifiedRef.current) {
+            return;
+        }
+        resolvedAnimationHandlers.onAnimationStart();
+        animationStartNotifiedRef.current = true;
+    }, [resolvedAnimationHandlers, allowAnimation]);
+
+    React.useEffect(() => {
+        if (isUser) {
+            return;
+        }
+
+        const handler = resolvedAnimationHandlers?.onAnimatedHeightChange;
+        if (!handler) {
+            return;
+        }
+
+        const shouldTrackHeight = allowAnimation || shouldReserveAnimationSpace;
+        if (!shouldTrackHeight) {
+            return;
+        }
+
+        const element = messageContainerRef.current;
+        if (!element) {
+            return;
+        }
+
+        if (typeof window === 'undefined' || typeof ResizeObserver === 'undefined') {
+            handler(element.getBoundingClientRect().height);
+            return;
+        }
+
+        let rafId: number | null = null;
+        const notifyHeight = (height: number) => {
+            if (typeof window === 'undefined') {
+                handler(height);
+                return;
+            }
+            if (rafId !== null) {
+                window.cancelAnimationFrame(rafId);
+            }
+            rafId = window.requestAnimationFrame(() => {
+                handler(height);
+            });
+        };
+
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry) {
+                return;
+            }
+            notifyHeight(entry.contentRect.height);
+        });
+
+        observer.observe(element);
+        notifyHeight(element.getBoundingClientRect().height);
+
+        return () => {
+            if (rafId !== null) {
+                window.cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+            observer.disconnect();
+        };
+    }, [allowAnimation, isUser, resolvedAnimationHandlers, shouldReserveAnimationSpace]);
+
+    return (
+        <>
+            <div
+                className={cn(
+                    'group w-full',
+                    shouldShowHeader ? 'pt-2' : 'pt-0',
+                    isUser ? 'pb-2' : isFollowedByAssistant ? 'pb-0' : 'pb-2'
+                )}
+                data-message-id={message.info.id}
+                ref={messageContainerRef}
+                style={isPendingAnchor ? { visibility: 'hidden' } : undefined}
+            >
+                <div className="chat-column">
+                    {isUser ? (
+                        <FadeInOnReveal>
+                            <div
+                                className={cn(
+                                    'rounded-xl border bg-input/10 dark:bg-input/30 pt-[0.7rem] pb-[0.45rem] relative'
+                                )}
+                                style={{
+                                    borderColor: 'color-mix(in srgb, var(--primary-muted, var(--primary)) 40%, var(--interactive-border, transparent))'
+                                }}
+                            >
+                                <MessageBody
+                                    messageId={message.info.id}
+                                    parts={visibleParts}
+                                    isUser={isUser}
+                                    isMessageCompleted={isMessageCompleted}
+                                    syntaxTheme={syntaxTheme}
+                                    isMobile={isMobile}
+                                    hasTouchInput={hasTouchInput}
+                                    copiedCode={copiedCode}
+                                    onCopyCode={handleCopyCode}
+                                    expandedTools={expandedTools}
+                                    onToggleTool={handleToggleTool}
+                                    onShowPopup={handleShowPopup}
+                                    streamPhase={streamPhase}
+                                    allowAnimation={allowAnimation}
+                                    onContentChange={onContentChange}
+                                    shouldShowHeader={false}
+                                    hasTextContent={hasTextContent}
+                                    onCopyMessage={handleCopyMessage}
+                                    copiedMessage={copiedMessage}
+                                    showReasoningTraces={showReasoningTraces}
+                                    onAuxiliaryContentComplete={handleAuxiliaryContentComplete}
+                                    agentMention={agentMention}
+                                />
+
+                            </div>
+                        </FadeInOnReveal>
+                    ) : (
+                        <div>
+                            {shouldShowHeader && (
+                                <MessageHeader
+                                    isUser={isUser}
+                                    providerID={headerProviderID}
+                                    agentName={headerAgentName}
+                                    modelName={headerModelName}
+                                    isDarkTheme={isDarkTheme}
+                                />
+                            )}
+
+                            <MessageBody
+                                messageId={message.info.id}
+                                parts={visibleParts}
+                                isUser={isUser}
+                                isMessageCompleted={isMessageCompleted}
+                                syntaxTheme={syntaxTheme}
+                                isMobile={isMobile}
+                                hasTouchInput={hasTouchInput}
+                                copiedCode={copiedCode}
+                                onCopyCode={handleCopyCode}
+                                expandedTools={expandedTools}
+                                onToggleTool={handleToggleTool}
+                                onShowPopup={handleShowPopup}
+                                streamPhase={streamPhase}
+                                allowAnimation={allowAnimation}
+                                onContentChange={onContentChange}
+                                shouldShowHeader={shouldShowHeader}
+                                hasTextContent={hasTextContent}
+                                onCopyMessage={handleCopyMessage}
+                                copiedMessage={copiedMessage}
+                                onAuxiliaryContentComplete={handleAuxiliaryContentComplete}
+                                showReasoningTraces={showReasoningTraces}
+                                agentMention={agentMention}
+                                turnGroupingContext={turnGroupingContext}
+                            />
+
+                        </div>
+                    )}
+                </div>
+            </div>
+            <React.Suspense fallback={null}>
+                <ToolOutputDialog
+                    popup={popupContent}
+                    onOpenChange={handlePopupChange}
+                    syntaxTheme={syntaxTheme}
+                    isMobile={isMobile}
+                />
+            </React.Suspense>
+        </>
+    );
+};
+
+export default React.memo(ChatMessage);
diff --git a/packages/ui/src/components/chat/CommandAutocomplete.tsx b/packages/ui/src/components/chat/CommandAutocomplete.tsx
new file mode 100644
index 00000000..33839b32
--- /dev/null
+++ b/packages/ui/src/components/chat/CommandAutocomplete.tsx
@@ -0,0 +1,261 @@
+import React from 'react';
+import { RiCommandLine, RiFileLine, RiFlashlightLine, RiRefreshLine, RiScissorsLine, RiTerminalBoxLine } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import { opencodeClient } from '@/lib/opencode/client';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useShallow } from 'zustand/react/shallow';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+
+interface CommandInfo {
+  name: string;
+  description?: string;
+  agent?: string;
+  model?: string;
+  isBuiltIn?: boolean;
+}
+
+export interface CommandAutocompleteHandle {
+  handleKeyDown: (key: string) => void;
+}
+
+interface CommandAutocompleteProps {
+  searchQuery: string;
+  onCommandSelect: (command: CommandInfo) => void;
+  onClose: () => void;
+}
+
+export const CommandAutocomplete = React.forwardRef<CommandAutocompleteHandle, CommandAutocompleteProps>(({
+  searchQuery,
+  onCommandSelect,
+  onClose
+}, ref) => {
+  const { hasMessagesInCurrentSession } = useSessionStore(
+    useShallow((state) => {
+      const sessionId = state.currentSessionId;
+      const messageCount = sessionId ? (state.messages.get(sessionId)?.length ?? 0) : 0;
+      return {
+        hasMessagesInCurrentSession: messageCount > 0,
+      };
+    })
+  );
+
+  const [commands, setCommands] = React.useState<CommandInfo[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+
+  React.useEffect(() => {
+    const handlePointerDown = (event: MouseEvent | TouchEvent) => {
+      const target = event.target as Node | null;
+      if (!target || !containerRef.current) {
+        return;
+      }
+      if (containerRef.current.contains(target)) {
+        return;
+      }
+      onClose();
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown, true);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown, true);
+    };
+  }, [onClose]);
+
+  React.useEffect(() => {
+    const loadCommands = async () => {
+      setLoading(true);
+      try {
+
+        const apiCommands = await opencodeClient.listCommands();
+
+        const customCommands: CommandInfo[] = apiCommands.map(cmd => ({
+          name: cmd.name,
+          description: cmd.description,
+          agent: cmd.agent,
+          model: cmd.model,
+          isBuiltIn: false
+        }));
+
+        const builtInCommands: CommandInfo[] = [
+          ...(hasMessagesInCurrentSession
+            ? []
+            : [{ name: 'init', description: 'Create/update AGENTS.md file', isBuiltIn: true }]),
+          { name: 'summarize', description: 'Generate a summary of the current session', isBuiltIn: true },
+        ];
+
+        const commandMap = new Map<string, CommandInfo>();
+
+        builtInCommands.forEach(cmd => commandMap.set(cmd.name, cmd));
+
+        customCommands.forEach(cmd => commandMap.set(cmd.name, cmd));
+
+        const allCommands = Array.from(commandMap.values());
+
+        const allowInitCommand = !hasMessagesInCurrentSession;
+        const filtered = (searchQuery
+          ? allCommands.filter(cmd =>
+              cmd.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+              (cmd.description && cmd.description.toLowerCase().includes(searchQuery.toLowerCase()))
+            )
+          : allCommands).filter(cmd => allowInitCommand || cmd.name !== 'init');
+
+        filtered.sort((a, b) => {
+          const aStartsWith = a.name.toLowerCase().startsWith(searchQuery.toLowerCase());
+          const bStartsWith = b.name.toLowerCase().startsWith(searchQuery.toLowerCase());
+          if (aStartsWith && !bStartsWith) return -1;
+          if (!aStartsWith && bStartsWith) return 1;
+          return a.name.localeCompare(b.name);
+        });
+
+        setCommands(filtered);
+      } catch {
+
+        const allowInitCommand = !hasMessagesInCurrentSession;
+        const builtInCommands: CommandInfo[] = [
+          ...(hasMessagesInCurrentSession
+            ? []
+            : [{ name: 'init', description: 'Create/update AGENTS.md file', isBuiltIn: true }]),
+          { name: 'summarize', description: 'Generate a summary of the current session', isBuiltIn: true },
+        ];
+
+        const filtered = (searchQuery
+          ? builtInCommands.filter(cmd =>
+              cmd.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+              (cmd.description && cmd.description.toLowerCase().includes(searchQuery.toLowerCase()))
+            )
+          : builtInCommands).filter(cmd => allowInitCommand || cmd.name !== 'init');
+
+        setCommands(filtered);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadCommands();
+  }, [searchQuery, hasMessagesInCurrentSession]);
+
+  React.useEffect(() => {
+    setSelectedIndex(0);
+  }, [commands]);
+
+  React.useEffect(() => {
+    itemRefs.current[selectedIndex]?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest'
+    });
+  }, [selectedIndex]);
+
+  React.useImperativeHandle(ref, () => ({
+    handleKeyDown: (key: string) => {
+      const total = commands.length;
+      if (key === 'Escape') {
+        onClose();
+        return;
+      }
+
+      if (total === 0) {
+        return;
+      }
+
+      if (key === 'ArrowDown') {
+        setSelectedIndex((prev) => (prev + 1) % total);
+        return;
+      }
+
+      if (key === 'ArrowUp') {
+        setSelectedIndex((prev) => (prev - 1 + total) % total);
+        return;
+      }
+
+      if (key === 'Enter' || key === 'Tab') {
+        const safeIndex = ((selectedIndex % total) + total) % total;
+        const command = commands[safeIndex];
+        if (command) {
+          onCommandSelect(command);
+        }
+      }
+    }
+  }), [commands, selectedIndex, onClose, onCommandSelect]);
+
+  const getCommandIcon = (command: CommandInfo) => {
+
+    switch (command.name) {
+      case 'init':
+        return <RiFileLine className="h-3.5 w-3.5 text-green-500" />;
+      case 'summarize':
+        return <RiScissorsLine className="h-3.5 w-3.5 text-purple-500" />;
+      case 'test':
+      case 'build':
+      case 'run':
+        return <RiTerminalBoxLine className="h-3.5 w-3.5 text-cyan-500" />;
+      default:
+        if (command.isBuiltIn) {
+          return <RiFlashlightLine className="h-3.5 w-3.5 text-yellow-500" />;
+        }
+        return <RiCommandLine className="h-3.5 w-3.5 text-muted-foreground" />;
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className="absolute z-[100] min-w-[250px] max-w-[450px] max-h-64 bg-popover border border-border rounded-xl shadow-none bottom-full mb-2 left-0 w-max flex flex-col"
+    >
+      <ScrollableOverlay outerClassName="flex-1 min-h-0" className="px-0">
+        {loading ? (
+          <div className="flex items-center justify-center py-4">
+            <RiRefreshLine className="h-4 w-4 animate-spin text-muted-foreground" />
+          </div>
+        ) : (
+          <div>
+            {commands.map((command, index) => (
+              <div
+                key={command.name}
+                ref={(el) => { itemRefs.current[index] = el; }}
+                className={cn(
+                  "flex items-start gap-2 px-3 py-2 cursor-pointer rounded-lg",
+                  index === selectedIndex && "bg-accent"
+                )}
+                onClick={() => onCommandSelect(command)}
+                onMouseEnter={() => setSelectedIndex(index)}
+              >
+                <div className="mt-0.5">
+                  {getCommandIcon(command)}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="typography-ui-label font-medium">/{command.name}</span>
+                    {command.agent && (
+                      <span className="typography-meta text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+                        {command.agent}
+                      </span>
+                    )}
+                  </div>
+                  {command.description && (
+                    <div className="typography-meta text-muted-foreground mt-0.5 truncate">
+                      {command.description}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+            {commands.length === 0 && (
+              <div className="px-3 py-2 typography-ui-label text-muted-foreground">
+                No commands found
+              </div>
+            )}
+          </div>
+        )}
+      </ScrollableOverlay>
+      <div className="px-3 pt-1 pb-1.5 border-t typography-meta text-muted-foreground">
+        ↑↓ navigate • Enter select • Esc close
+      </div>
+    </div>
+  );
+});
+
+CommandAutocomplete.displayName = 'CommandAutocomplete';
+
+export type { CommandInfo };
diff --git a/packages/ui/src/components/chat/FileAttachment.tsx b/packages/ui/src/components/chat/FileAttachment.tsx
new file mode 100644
index 00000000..0c4c136f
--- /dev/null
+++ b/packages/ui/src/components/chat/FileAttachment.tsx
@@ -0,0 +1,293 @@
+import React, { useRef, memo } from 'react';
+import { RiAttachment2, RiCloseLine, RiComputerLine, RiFileImageLine, RiFileLine, RiFilePdfLine, RiHardDrive3Line } from '@remixicon/react';
+import { useSessionStore, type AttachedFile } from '@/stores/useSessionStore';
+import { useUIStore } from '@/stores/useUIStore';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
+import type { ToolPopupContent } from './message/types';
+
+export const FileAttachmentButton = memo(() => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { addAttachedFile } = useSessionStore();
+  const { isMobile } = useUIStore();
+  const buttonSizeClass = isMobile ? 'h-9 w-9' : 'h-7 w-7';
+  const iconSizeClass = isMobile ? 'h-5 w-5' : 'h-[18px] w-[18px]';
+
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files) return;
+
+    let attachedCount = 0;
+    for (let i = 0; i < files.length; i++) {
+      const sizeBefore = useSessionStore.getState().attachedFiles.length;
+      try {
+        await addAttachedFile(files[i]);
+        const sizeAfter = useSessionStore.getState().attachedFiles.length;
+        if (sizeAfter > sizeBefore) {
+          attachedCount++;
+        }
+      } catch (error) {
+        console.error('File attach failed', error);
+        toast.error(error instanceof Error ? error.message : 'Failed to attach file');
+      }
+    }
+
+    if (attachedCount > 0) {
+      toast.success(`Attached ${attachedCount} file${attachedCount > 1 ? 's' : ''}`);
+    }
+
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  return (
+    <>
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        className="hidden"
+        onChange={handleFileSelect}
+        accept="*/*"
+      />
+      <button
+        type='button'
+        onClick={() => fileInputRef.current?.click()}
+        className={cn(
+          buttonSizeClass,
+          'flex items-center justify-center text-muted-foreground transition-none outline-none focus:outline-none flex-shrink-0'
+        )}
+        title='Attach files'
+      >
+        <RiAttachment2 className={cn(iconSizeClass, 'text-current')} />
+      </button>
+    </>
+  );
+});
+
+interface FileChipProps {
+  file: AttachedFile;
+  onRemove: () => void;
+}
+
+const FileChip = memo(({ file, onRemove }: FileChipProps) => {
+  const getFileIcon = () => {
+    if (file.mimeType.startsWith('image/')) {
+      return <RiFileImageLine className="h-3.5 w-3.5" />;
+    }
+    if (file.mimeType.includes('text') || file.mimeType.includes('code')) {
+      return <RiFileLine className="h-3.5 w-3.5" />;
+    }
+    if (file.mimeType.includes('json') || file.mimeType.includes('xml')) {
+      return <RiFilePdfLine className="h-3.5 w-3.5" />;
+    }
+    return <RiFileLine className="h-3.5 w-3.5" />;
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+  };
+
+  const extractFilename = (path: string): string => {
+
+    const normalized = path.replace(/\\/g, '/');
+
+    const parts = normalized.split('/');
+    const filename = parts[parts.length - 1];
+
+    return filename || path;
+  };
+
+  const displayName = extractFilename(file.filename);
+
+  return (
+    <div className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-muted/30 border border-border/30 rounded-xl typography-meta">
+      {}
+      <div title={file.source === 'server' ? "Server file" : "Local file"}>
+        {file.source === 'server' ? (
+          <RiHardDrive3Line className="h-3 w-3 text-primary" />
+        ) : (
+          <RiComputerLine className="h-3 w-3 text-muted-foreground" />
+        )}
+      </div>
+      {getFileIcon()}
+      <span title={file.serverPath || displayName}>
+        {displayName}
+      </span>
+      <span className="text-muted-foreground flex-shrink-0">
+        ({formatFileSize(file.size)})
+      </span>
+      <button
+        onClick={onRemove}
+        className="ml-1 hover:text-destructive p-0.5"
+        title="Remove file"
+      >
+        <RiCloseLine className="h-3 w-3" />
+      </button>
+    </div>
+  );
+});
+
+export const AttachedFilesList = memo(() => {
+  const { attachedFiles, removeAttachedFile } = useSessionStore();
+
+  if (attachedFiles.length === 0) return null;
+
+  return (
+    <div className="pb-2">
+      <div className="flex items-center flex-wrap gap-2 px-3 py-2 bg-muted/30 rounded-xl border border-border/30">
+        <span className="typography-meta text-muted-foreground font-medium">Attached:</span>
+        {attachedFiles.map((file) => (
+          <FileChip
+            key={file.id}
+            file={file}
+            onRemove={() => removeAttachedFile(file.id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+interface FilePart {
+  type: string;
+  mime?: string;
+  url?: string;
+  filename?: string;
+  size?: number;
+}
+
+interface MessageFilesDisplayProps {
+  files: FilePart[];
+  onShowPopup?: (content: ToolPopupContent) => void;
+}
+
+export const MessageFilesDisplay = memo(({ files, onShowPopup }: MessageFilesDisplayProps) => {
+
+  const fileItems = files.filter(f => f.type === 'file' && (f.mime || f.url));
+
+  const extractFilename = (path?: string): string => {
+    if (!path) return 'Unnamed file';
+
+    const normalized = path.replace(/\\/g, '/');
+    const parts = normalized.split('/');
+    return parts[parts.length - 1] || path;
+  };
+
+  const getFileIcon = (mimeType?: string) => {
+    if (!mimeType) return <RiFileLine className="h-3.5 w-3.5" />;
+
+    if (mimeType.startsWith('image/')) {
+      return <RiFileImageLine className="h-3.5 w-3.5" />;
+    }
+    if (mimeType.includes('text') || mimeType.includes('code')) {
+      return <RiFileLine className="h-3.5 w-3.5" />;
+    }
+    if (mimeType.includes('json') || mimeType.includes('xml')) {
+      return <RiFilePdfLine className="h-3.5 w-3.5" />;
+    }
+    return <RiFileLine className="h-3.5 w-3.5" />;
+  };
+
+  const imageFiles = fileItems.filter(f => f.mime?.startsWith('image/') && f.url);
+  const otherFiles = fileItems.filter(f => !f.mime?.startsWith('image/'));
+
+  const handleImageClick = React.useCallback((file: { filename?: string; mime?: string; size?: number; url?: string }) => {
+    if (!onShowPopup || !file?.url) {
+      return;
+    }
+
+    const filename = extractFilename(file.filename) || 'Image';
+
+    const popupPayload: ToolPopupContent = {
+      open: true,
+      title: filename,
+      content: '',
+      metadata: {
+        tool: 'image-preview',
+        filename,
+        mime: file.mime,
+        size: file.size,
+      },
+      image: {
+        url: file.url,
+        mimeType: file.mime,
+        filename,
+      },
+    };
+
+    onShowPopup(popupPayload);
+  }, [onShowPopup]);
+
+  if (fileItems.length === 0) return null;
+
+  return (
+    <div className="space-y-2 mt-2">
+      {}
+      {otherFiles.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {otherFiles.map((file, index) => (
+            <div
+              key={`file-${index}`}
+              className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-muted/30 border border-border/30 rounded-xl typography-meta"
+            >
+              {getFileIcon(file.mime)}
+              <span>
+                {extractFilename(file.filename)}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {}
+      {imageFiles.length > 0 && (
+        <div className="overflow-x-auto -mx-1 px-1 py-1 scrollbar-thin">
+          <div className="flex gap-3 snap-x snap-mandatory">
+            {imageFiles.map((file, index) => {
+    const filename = extractFilename(file.filename) || 'Image';
+
+              return (
+                <Tooltip key={`img-${index}`} delayDuration={1000}>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={() => handleImageClick(file)}
+                      className="relative flex-none w-32 sm:w-36 md:w-40 aspect-square rounded-xl border border-border/40 bg-muted/10 overflow-hidden snap-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-primary"
+                      aria-label={filename}
+                    >
+                      {file.url ? (
+                        <img
+                          src={file.url}
+                          alt={filename}
+                          className="h-full w-full object-cover"
+                          loading="lazy"
+                          onError={(e) => {
+                            const target = e.target as HTMLImageElement;
+                            target.style.visibility = 'hidden';
+                          }}
+                        />
+                      ) : (
+                        <div className="h-full w-full flex items-center justify-center bg-muted/30 text-muted-foreground">
+                          <RiFileImageLine className="h-6 w-6" />
+                        </div>
+                      )}
+                      <span className="sr-only">{filename}</span>
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top" sideOffset={6} className="typography-meta px-2 py-1">
+                    {filename}
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/packages/ui/src/components/chat/FileMentionAutocomplete.tsx b/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
new file mode 100644
index 00000000..3caa5388
--- /dev/null
+++ b/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
@@ -0,0 +1,241 @@
+import React from 'react';
+import { RiCodeLine, RiFileImageLine, RiFileLine, RiFilePdfLine, RiRefreshLine } from '@remixicon/react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn, truncatePathMiddle } from '@/lib/utils';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useFileSearchStore } from '@/stores/useFileSearchStore';
+import { useDebouncedValue } from '@/hooks/useDebouncedValue';
+import type { ProjectFileSearchHit } from '@/lib/opencode/client';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+
+type FileInfo = ProjectFileSearchHit;
+
+export interface FileMentionHandle {
+  handleKeyDown: (key: string) => void;
+}
+
+interface FileMentionAutocompleteProps {
+  searchQuery: string;
+  onFileSelect: (file: FileInfo) => void;
+  onClose: () => void;
+}
+
+export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileMentionAutocompleteProps>(({
+  searchQuery,
+  onFileSelect,
+  onClose
+}, ref) => {
+  const { currentDirectory } = useDirectoryStore();
+  const { addServerFile } = useSessionStore();
+  const searchFiles = useFileSearchStore((state) => state.searchFiles);
+  const debouncedQuery = useDebouncedValue(searchQuery, 180);
+  const [files, setFiles] = React.useState<FileInfo[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [hoveredTooltipIndex, setHoveredTooltipIndex] = React.useState<number | null>(null);
+  const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+
+  React.useEffect(() => {
+    const handlePointerDown = (event: MouseEvent | TouchEvent) => {
+      const target = event.target as Node | null;
+      if (!target || !containerRef.current) {
+        return;
+      }
+      if (containerRef.current.contains(target)) {
+        return;
+      }
+      onClose();
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown, true);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown, true);
+    };
+  }, [onClose]);
+
+  React.useEffect(() => {
+    if (!currentDirectory) {
+      setFiles([]);
+      return;
+    }
+
+    let cancelled = false;
+    setLoading(true);
+
+    searchFiles(currentDirectory, debouncedQuery ?? '', 40)
+      .then((hits) => {
+        if (cancelled) {
+          return;
+        }
+        setFiles(hits.slice(0, 15));
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setFiles([]);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [currentDirectory, debouncedQuery, searchFiles]);
+
+  React.useEffect(() => {
+    setSelectedIndex(0);
+    setHoveredTooltipIndex(null);
+  }, [files]);
+
+  React.useEffect(() => {
+    itemRefs.current[selectedIndex]?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest'
+    });
+  }, [selectedIndex]);
+
+  const handleFileSelect = React.useCallback(async (file: FileInfo) => {
+
+    await addServerFile(file.path, file.name);
+    onFileSelect(file);
+  }, [addServerFile, onFileSelect]);
+
+  React.useImperativeHandle(ref, () => ({
+    handleKeyDown: (key: string) => {
+      if (key === 'Escape') {
+        onClose();
+        return;
+      }
+
+      const total = files.length;
+      if (total === 0) {
+        return;
+      }
+
+      if (key === 'ArrowDown') {
+        setSelectedIndex((prev) => (prev + 1) % total);
+        return;
+      }
+
+      if (key === 'ArrowUp') {
+        setSelectedIndex((prev) => (prev - 1 + total) % total);
+        return;
+      }
+
+      if (key === 'Enter' || key === 'Tab') {
+        const safeIndex = ((selectedIndex % total) + total) % total;
+        const selectedFile = files[safeIndex];
+        if (selectedFile) {
+          handleFileSelect(selectedFile);
+        }
+      }
+    }
+  }), [files, selectedIndex, onClose, handleFileSelect]);
+
+  const getFileIcon = (file: FileInfo) => {
+    const ext = file.extension?.toLowerCase();
+    switch (ext) {
+      case 'ts':
+      case 'tsx':
+      case 'js':
+      case 'jsx':
+        return <RiCodeLine className="h-3.5 w-3.5 text-blue-500" />;
+      case 'json':
+        return <RiCodeLine className="h-3.5 w-3.5 text-yellow-500" />;
+      case 'md':
+      case 'mdx':
+        return <RiFileLine className="h-3.5 w-3.5 text-gray-500" />;
+      case 'png':
+      case 'jpg':
+      case 'jpeg':
+      case 'gif':
+      case 'svg':
+        return <RiFileImageLine className="h-3.5 w-3.5 text-green-500" />;
+      default:
+        return <RiFilePdfLine className="h-3.5 w-3.5 text-muted-foreground" />;
+    }
+  };
+
+  return (
+      <div
+        ref={containerRef}
+        className="absolute z-[100] min-w-[240px] max-w-[520px] max-h-64 bg-popover border border-border rounded-xl shadow-none bottom-full mb-2 left-0 w-max flex flex-col"
+      >
+        <ScrollableOverlay outerClassName="flex-1 min-h-0" className="px-0">
+        {loading ? (
+          <div className="flex items-center justify-center py-4">
+            <RiRefreshLine className="h-4 w-4 animate-spin text-muted-foreground" />
+          </div>
+        ) : (
+          <div className="pb-2">
+            {files.map((file, index) => {
+              const relativePath = file.relativePath || file.name;
+              const displayPath = truncatePathMiddle(relativePath, { maxLength: 45 });
+              const isSelected = selectedIndex === index;
+              const isHovered = hoveredTooltipIndex === index;
+              const tooltipOpen = isSelected || isHovered;
+
+              const item = (
+                <div
+                  ref={(el) => { itemRefs.current[index] = el; }}
+                  className={cn(
+                    "flex items-center gap-2 px-3 py-1.5 cursor-pointer typography-ui-label rounded-lg",
+                    isSelected && "bg-accent"
+                  )}
+                  onClick={() => handleFileSelect(file)}
+                  onMouseEnter={() => setSelectedIndex(index)}
+                >
+                  {getFileIcon(file)}
+                  <span className="flex-1 truncate max-w-[360px]" aria-label={relativePath}>
+                    {displayPath}
+                  </span>
+                </div>
+              );
+
+              return (
+                <Tooltip
+                  key={file.path}
+                  open={tooltipOpen}
+                  delayDuration={tooltipOpen ? 0 : 120}
+                  onOpenChange={(open) => {
+                    setHoveredTooltipIndex((previous) => {
+                      if (!open && previous === index) {
+                        return null;
+                      }
+                      if (open) {
+                        return index;
+                      }
+                      return previous;
+                    });
+                  }}
+                >
+                  <TooltipTrigger asChild>{item}</TooltipTrigger>
+                  <TooltipContent side="right" align="center" className="max-w-xs">
+                    <span className="typography-meta text-foreground/80 whitespace-pre-wrap break-all">
+                      {relativePath}
+                    </span>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+            {}
+            {files.length > 0 && <div className="h-2" />}
+            {files.length === 0 && (
+              <div className="px-3 py-2 typography-ui-label text-muted-foreground">
+                No files found
+              </div>
+            )}
+          </div>
+        )}
+        </ScrollableOverlay>
+        <div className="px-3 pt-1 pb-1.5 border-t typography-meta text-muted-foreground">
+        ↑↓ navigate • Enter select • Esc close
+      </div>
+    </div>
+  );
+});
diff --git a/packages/ui/src/components/chat/MarkdownRenderer.tsx b/packages/ui/src/components/chat/MarkdownRenderer.tsx
new file mode 100644
index 00000000..8295fa30
--- /dev/null
+++ b/packages/ui/src/components/chat/MarkdownRenderer.tsx
@@ -0,0 +1,346 @@
+import React from 'react';
+import { Streamdown } from 'streamdown';
+import { FadeInOnReveal } from './message/FadeInOnReveal';
+import type { Part } from '@opencode-ai/sdk';
+import { cn } from '@/lib/utils';
+import { RiFileCopyLine, RiCheckLine, RiDownloadLine } from '@remixicon/react';
+
+const SHIKI_THEMES = ['vitesse-light', 'vitesse-dark'] as const;
+
+// Table utility functions
+const extractTableData = (tableEl: HTMLTableElement): { headers: string[]; rows: string[][] } => {
+  const headers: string[] = [];
+  const rows: string[][] = [];
+  
+  const thead = tableEl.querySelector('thead');
+  if (thead) {
+    const headerCells = thead.querySelectorAll('th');
+    headerCells.forEach(cell => headers.push(cell.innerText.trim()));
+  }
+  
+  const tbody = tableEl.querySelector('tbody');
+  if (tbody) {
+    const rowEls = tbody.querySelectorAll('tr');
+    rowEls.forEach(row => {
+      const cells = row.querySelectorAll('td');
+      const rowData: string[] = [];
+      cells.forEach(cell => rowData.push(cell.innerText.trim()));
+      rows.push(rowData);
+    });
+  }
+  
+  return { headers, rows };
+};
+
+const tableToCSV = ({ headers, rows }: { headers: string[]; rows: string[][] }): string => {
+  const escapeCell = (cell: string): string => {
+    if (cell.includes(',') || cell.includes('"') || cell.includes('\n')) {
+      return `"${cell.replace(/"/g, '""')}"`;
+    }
+    return cell;
+  };
+  
+  const lines: string[] = [];
+  if (headers.length > 0) {
+    lines.push(headers.map(escapeCell).join(','));
+  }
+  rows.forEach(row => lines.push(row.map(escapeCell).join(',')));
+  return lines.join('\n');
+};
+
+const tableToTSV = ({ headers, rows }: { headers: string[]; rows: string[][] }): string => {
+  const escapeCell = (cell: string): string => {
+    return cell.replace(/\t/g, '\\t').replace(/\n/g, '\\n').replace(/\r/g, '\\r');
+  };
+  
+  const lines: string[] = [];
+  if (headers.length > 0) {
+    lines.push(headers.map(escapeCell).join('\t'));
+  }
+  rows.forEach(row => lines.push(row.map(escapeCell).join('\t')));
+  return lines.join('\n');
+};
+
+const tableToMarkdown = ({ headers, rows }: { headers: string[]; rows: string[][] }): string => {
+  if (headers.length === 0) return '';
+  
+  const escapeCell = (cell: string): string => {
+    return cell.replace(/\\/g, '\\\\').replace(/\|/g, '\\|');
+  };
+  
+  const lines: string[] = [];
+  lines.push(`| ${headers.map(escapeCell).join(' | ')} |`);
+  lines.push(`| ${headers.map(() => '---').join(' | ')} |`);
+  rows.forEach(row => {
+    const paddedRow = headers.map((_, i) => escapeCell(row[i] || ''));
+    lines.push(`| ${paddedRow.join(' | ')} |`);
+  });
+  return lines.join('\n');
+};
+
+const downloadFile = (filename: string, content: string, mimeType: string) => {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+};
+
+// Table copy button with dropdown
+const TableCopyButton: React.FC<{ tableRef: React.RefObject<HTMLDivElement | null> }> = ({ tableRef }) => {
+  const [copied, setCopied] = React.useState(false);
+  const [showMenu, setShowMenu] = React.useState(false);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setShowMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleCopy = async (format: 'csv' | 'tsv') => {
+    const tableEl = tableRef.current?.querySelector('table');
+    if (!tableEl) return;
+    
+    try {
+      const data = extractTableData(tableEl);
+      const content = format === 'csv' ? tableToCSV(data) : tableToTSV(data);
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'text/plain': new Blob([content], { type: 'text/plain' }),
+          'text/html': new Blob([tableEl.outerHTML], { type: 'text/html' }),
+        }),
+      ]);
+      setCopied(true);
+      setShowMenu(false);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy table:', err);
+    }
+  };
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <button
+        onClick={() => setShowMenu(!showMenu)}
+        className="p-1 rounded hover:bg-muted/60 text-muted-foreground hover:text-foreground transition-colors"
+        title="Copy table"
+      >
+        {copied ? <RiCheckLine className="size-3.5" /> : <RiFileCopyLine className="size-3.5" />}
+      </button>
+      {showMenu && (
+        <div className="absolute top-full right-0 z-10 mt-1 min-w-[100px] overflow-hidden rounded-md border border-border bg-background shadow-lg">
+          <button
+            className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/40"
+            onClick={() => handleCopy('csv')}
+          >
+            CSV
+          </button>
+          <button
+            className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/40"
+            onClick={() => handleCopy('tsv')}
+          >
+            TSV
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Table download button with dropdown
+const TableDownloadButton: React.FC<{ tableRef: React.RefObject<HTMLDivElement | null> }> = ({ tableRef }) => {
+  const [showMenu, setShowMenu] = React.useState(false);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setShowMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleDownload = (format: 'csv' | 'markdown') => {
+    const tableEl = tableRef.current?.querySelector('table');
+    if (!tableEl) return;
+    
+    try {
+      const data = extractTableData(tableEl);
+      const content = format === 'csv' ? tableToCSV(data) : tableToMarkdown(data);
+      const filename = format === 'csv' ? 'table.csv' : 'table.md';
+      const mimeType = format === 'csv' ? 'text/csv' : 'text/markdown';
+      downloadFile(filename, content, mimeType);
+      setShowMenu(false);
+    } catch (err) {
+      console.error('Failed to download table:', err);
+    }
+  };
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <button
+        onClick={() => setShowMenu(!showMenu)}
+        className="p-1 rounded hover:bg-muted/60 text-muted-foreground hover:text-foreground transition-colors"
+        title="Download table"
+      >
+        <RiDownloadLine className="size-3.5" />
+      </button>
+      {showMenu && (
+        <div className="absolute top-full right-0 z-10 mt-1 min-w-[100px] overflow-hidden rounded-md border border-border bg-background shadow-lg">
+          <button
+            className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/40"
+            onClick={() => handleDownload('csv')}
+          >
+            CSV
+          </button>
+          <button
+            className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/40"
+            onClick={() => handleDownload('markdown')}
+          >
+            Markdown
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Table wrapper with custom controls
+const TableWrapper: React.FC<{ children?: React.ReactNode; className?: string }> = ({ children, className }) => {
+  const tableRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div className="group my-4 flex flex-col space-y-2" data-streamdown="table-wrapper" ref={tableRef}>
+      <div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+        <TableCopyButton tableRef={tableRef} />
+        <TableDownloadButton tableRef={tableRef} />
+      </div>
+      <div className="overflow-x-auto">
+        <table className={cn('w-full border-collapse border border-border', className)} data-streamdown="table">
+          {children}
+        </table>
+      </div>
+    </div>
+  );
+};
+
+const CodeBlockWrapper: React.FC<{ children?: React.ReactNode; className?: string }> = ({ children, className }) => {
+  const [copied, setCopied] = React.useState(false);
+  const codeRef = React.useRef<HTMLDivElement>(null);
+
+  const getCodeContent = (): string => {
+    if (!codeRef.current) return '';
+    const codeEl = codeRef.current.querySelector('code');
+
+    return codeEl?.innerText || '';
+  };
+
+  const handleCopy = async () => {
+    const code = getCodeContent();
+    if (!code) return;
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  return (
+    <div className={cn('group relative', className)} ref={codeRef}>
+      {children}
+      <div className="absolute top-1 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        <button
+          onClick={handleCopy}
+          className="p-1 rounded hover:bg-muted/60 text-muted-foreground hover:text-foreground transition-colors"
+          title="Copy"
+        >
+          {copied ? <RiCheckLine className="size-3.5" /> : <RiFileCopyLine className="size-3.5" />}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const streamdownComponents = {
+  pre: CodeBlockWrapper,
+  table: TableWrapper,
+};
+
+interface MarkdownRendererProps {
+  content: string;
+  part?: Part;
+  messageId: string;
+  isAnimated?: boolean;
+  className?: string;
+  isStreaming?: boolean;
+}
+
+export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
+  content,
+  part,
+  messageId,
+  isAnimated = true,
+  className,
+  isStreaming = false,
+}) => {
+  const componentKey = React.useMemo(() => {
+    const signature = part?.id ? `part-${part.id}` : `message-${messageId}`;
+    return `markdown-${signature}`;
+  }, [messageId, part?.id]);
+
+  const markdownContent = (
+    <div className={cn('break-words', className)}>
+      <Streamdown
+        mode={isStreaming ? 'streaming' : 'static'}
+        shikiTheme={SHIKI_THEMES}
+        className="streamdown-content"
+        controls={{ code: false, table: false }}
+        components={streamdownComponents}
+      >
+        {content}
+      </Streamdown>
+    </div>
+  );
+
+  if (isAnimated) {
+    return (
+      <FadeInOnReveal key={componentKey}>
+        {markdownContent}
+      </FadeInOnReveal>
+    );
+  }
+
+  return markdownContent;
+};
+
+export const SimpleMarkdownRenderer: React.FC<{
+  content: string;
+  className?: string;
+}> = ({ content, className }) => {
+  return (
+    <div className={cn('break-words', className)}>
+      <Streamdown
+        mode="static"
+        shikiTheme={SHIKI_THEMES}
+        className="streamdown-content"
+        controls={{ code: false, table: false }}
+        components={streamdownComponents}
+      >
+        {content}
+      </Streamdown>
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/chat/MessageList.tsx b/packages/ui/src/components/chat/MessageList.tsx
new file mode 100644
index 00000000..a9ea370e
--- /dev/null
+++ b/packages/ui/src/components/chat/MessageList.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import type { Message, Part } from '@opencode-ai/sdk';
+
+import ChatMessage from './ChatMessage';
+import { PermissionCard } from './PermissionCard';
+import type { Permission } from '@/types/permission';
+import type { AnimationHandlers, ContentChangeReason } from '@/hooks/useChatScrollManager';
+import { isFullySyntheticMessage } from '@/lib/messages/synthetic';
+import { useTurnGrouping } from './hooks/useTurnGrouping';
+
+interface MessageListProps {
+    messages: { info: Message; parts: Part[] }[];
+    permissions: Permission[];
+    onMessageContentChange: (reason?: ContentChangeReason) => void;
+    getAnimationHandlers: (messageId: string) => AnimationHandlers;
+    hasMoreAbove: boolean;
+    isLoadingOlder: boolean;
+    onLoadOlder: () => void;
+    scrollToBottom?: (options?: { instant?: boolean }) => void;
+    pendingAnchorId?: string | null;
+}
+
+const MessageList: React.FC<MessageListProps> = ({
+    messages,
+    permissions,
+    onMessageContentChange,
+    getAnimationHandlers,
+    hasMoreAbove,
+    isLoadingOlder,
+    onLoadOlder,
+    scrollToBottom,
+    pendingAnchorId,
+}) => {
+    React.useEffect(() => {
+        if (permissions.length === 0) {
+            return;
+        }
+        onMessageContentChange('permission');
+    }, [permissions, onMessageContentChange]);
+
+    const displayMessages = React.useMemo(() => {
+        return messages.filter((message) => !isFullySyntheticMessage(message.parts));
+    }, [messages]);
+
+    const { getContextForMessage } = useTurnGrouping(displayMessages);
+
+    return (
+        <div>
+            {hasMoreAbove && (
+                <div className="flex justify-center py-3">
+                    {isLoadingOlder ? (
+                        <span className="text-xs uppercase tracking-wide text-muted-foreground/80">
+                            Loading…
+                        </span>
+                    ) : (
+                        <button
+                            type="button"
+                            onClick={onLoadOlder}
+                            className="text-xs uppercase tracking-wide text-muted-foreground/80 hover:text-foreground"
+                        >
+                            Load older messages
+                        </button>
+                    )}
+                </div>
+            )}
+
+            <div className="flex flex-col">
+                {displayMessages.map((message, index) => (
+                    <ChatMessage
+                        key={message.info.id}
+                        message={message}
+                        previousMessage={index > 0 ? displayMessages[index - 1] : undefined}
+                        nextMessage={index < displayMessages.length - 1 ? displayMessages[index + 1] : undefined}
+                        onContentChange={onMessageContentChange}
+                        animationHandlers={getAnimationHandlers(message.info.id)}
+                        scrollToBottom={scrollToBottom}
+                        isPendingAnchor={pendingAnchorId === message.info.id}
+                        turnGroupingContext={getContextForMessage(message.info.id)}
+                    />
+                ))}
+
+            </div>
+
+            {permissions.length > 0 && (
+                <div>
+                    {permissions.map((permission) => (
+                        <PermissionCard key={permission.id} permission={permission} />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default React.memo(MessageList);
diff --git a/packages/ui/src/components/chat/ModelControls.tsx b/packages/ui/src/components/chat/ModelControls.tsx
new file mode 100644
index 00000000..fb30229e
--- /dev/null
+++ b/packages/ui/src/components/chat/ModelControls.tsx
@@ -0,0 +1,1907 @@
+import React from 'react';
+import type { ComponentType } from 'react';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
+import { RiAiAgentLine, RiArrowDownSLine, RiArrowRightSLine, RiBrainAi3Line, RiCheckboxCircleLine, RiCloseCircleLine, RiFileImageLine, RiFileMusicLine, RiFilePdfLine, RiFileVideoLine, RiPencilAiLine, RiQuestionLine, RiText, RiToolsLine } from '@remixicon/react';
+import type { ModelMetadata } from '@/types';
+import type { EditPermissionMode } from '@/stores/types/sessionTypes';
+import { getEditModeColors } from '@/lib/permissions/editModeColors';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type IconComponent = ComponentType<any>;
+
+type ProviderModel = Record<string, unknown> & { id?: string; name?: string };
+
+import { useConfigStore } from '@/stores/useConfigStore';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useContextStore } from '@/stores/contextStore';
+import { useDeviceInfo } from '@/lib/device';
+import { cn } from '@/lib/utils';
+import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
+import { getAgentColor } from '@/lib/agentColors';
+import { ProviderLogo } from '@/components/ui/ProviderLogo';
+import { calculateEditPermissionUIState, type BashPermissionSetting } from '@/lib/permissions/editPermissionDefaults';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+
+const isPrimaryMode = (mode?: string) => mode === 'primary' || mode === 'all' || mode === undefined || mode === null;
+
+interface CapabilityDefinition {
+    key: 'tool_call' | 'reasoning';
+    icon: IconComponent;
+    label: string;
+    isActive: (metadata?: ModelMetadata) => boolean;
+}
+
+const CAPABILITY_DEFINITIONS: CapabilityDefinition[] = [
+    {
+        key: 'tool_call',
+        icon: RiToolsLine,
+        label: 'Tool calling',
+        isActive: (metadata) => metadata?.tool_call === true,
+    },
+    {
+        key: 'reasoning',
+        icon: RiBrainAi3Line,
+        label: 'Reasoning',
+        isActive: (metadata) => metadata?.reasoning === true,
+    },
+];
+
+interface ModalityIconDefinition {
+    icon: IconComponent;
+    label: string;
+}
+
+type ModalityIcon = {
+    key: string;
+    icon: IconComponent;
+    label: string;
+};
+
+type ModelApplyResult = 'applied' | 'provider-missing' | 'model-missing';
+
+const MODALITY_ICON_MAP: Record<string, ModalityIconDefinition> = {
+    text: { icon: RiText, label: 'Text' },
+    image: { icon: RiFileImageLine, label: 'Image' },
+    video: { icon: RiFileVideoLine, label: 'Video' },
+    audio: { icon: RiFileMusicLine, label: 'Audio' },
+    pdf: { icon: RiFilePdfLine, label: 'PDF' },
+};
+
+const normalizeModality = (value: string) => value.trim().toLowerCase();
+
+const getModalityIcons = (metadata: ModelMetadata | undefined, direction: 'input' | 'output'): ModalityIcon[] => {
+    const modalityList = direction === 'input' ? metadata?.modalities?.input : metadata?.modalities?.output;
+    if (!Array.isArray(modalityList) || modalityList.length === 0) {
+        return [];
+    }
+
+    const uniqueValues = Array.from(new Set(modalityList.map((item) => normalizeModality(item))));
+
+    return uniqueValues
+        .map((modality) => {
+            const definition = MODALITY_ICON_MAP[modality];
+            if (!definition) {
+                return null;
+            }
+            return {
+                key: modality,
+                icon: definition.icon,
+                label: definition.label,
+            } satisfies ModalityIcon;
+        })
+        .filter((entry): entry is ModalityIcon => Boolean(entry));
+};
+
+const COMPACT_NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {
+    notation: 'compact',
+    compactDisplay: 'short',
+    maximumFractionDigits: 1,
+    minimumFractionDigits: 0,
+});
+
+const CURRENCY_FORMATTER = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 4,
+    minimumFractionDigits: 2,
+});
+
+const formatTokens = (value?: number | null) => {
+    if (typeof value !== 'number' || Number.isNaN(value)) {
+        return '—';
+    }
+
+    if (value === 0) {
+        return '0';
+    }
+
+    const formatted = COMPACT_NUMBER_FORMATTER.format(value);
+    return formatted.endsWith('.0') ? formatted.slice(0, -2) : formatted;
+};
+
+const formatCost = (value?: number | null) => {
+    if (typeof value !== 'number' || !Number.isFinite(value)) {
+        return '—';
+    }
+
+    return CURRENCY_FORMATTER.format(value);
+};
+
+const getCapabilityIcons = (metadata?: ModelMetadata) => {
+    return CAPABILITY_DEFINITIONS.filter((definition) => definition.isActive(metadata)).map((definition) => ({
+        key: definition.key,
+        icon: definition.icon,
+        label: definition.label,
+    }));
+};
+
+const formatKnowledge = (knowledge?: string) => {
+    if (!knowledge) {
+        return '—';
+    }
+
+    const match = knowledge.match(/^(\d{4})-(\d{2})$/);
+    if (match) {
+        const year = Number.parseInt(match[1], 10);
+        const monthIndex = Number.parseInt(match[2], 10) - 1;
+        const knowledgeDate = new Date(Date.UTC(year, monthIndex, 1));
+        if (!Number.isNaN(knowledgeDate.getTime())) {
+            return new Intl.DateTimeFormat('en-US', { month: 'short', year: 'numeric' }).format(knowledgeDate);
+        }
+    }
+
+    return knowledge;
+};
+
+const formatDate = (value?: string) => {
+    if (!value) {
+        return '—';
+    }
+
+    const parsedDate = new Date(value);
+    if (Number.isNaN(parsedDate.getTime())) {
+        return value;
+    }
+
+    return new Intl.DateTimeFormat('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+    }).format(parsedDate);
+};
+
+interface ModelControlsProps {
+    className?: string;
+}
+
+export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
+    const {
+        providers,
+        agents,
+        currentProviderId,
+        currentModelId,
+        currentAgentName,
+        setProvider,
+        setModel,
+        setAgent,
+        getCurrentProvider,
+        getModelMetadata,
+        getCurrentAgent,
+    } = useConfigStore();
+
+    const {
+        currentSessionId,
+        messages,
+        saveSessionAgentSelection,
+        getSessionAgentSelection,
+        saveAgentModelForSession,
+        getAgentModelForSession,
+        analyzeAndSaveExternalSessionChoices,
+        getSessionAgentEditMode,
+        setSessionAgentEditMode,
+    } = useSessionStore();
+
+    const contextHydrated = useContextStore((state) => state.hasHydrated);
+
+    const { isMobile } = useDeviceInfo();
+    const [activeMobilePanel, setActiveMobilePanel] = React.useState<'model' | 'agent' | null>(null);
+    const [mobileTooltipOpen, setMobileTooltipOpen] = React.useState<'model' | 'agent' | null>(null);
+    const closeMobilePanel = React.useCallback(() => setActiveMobilePanel(null), []);
+    const closeMobileTooltip = React.useCallback(() => setMobileTooltipOpen(null), []);
+    const longPressTimerRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
+    const [expandedMobileProviders, setExpandedMobileProviders] = React.useState<Set<string>>(() => {
+        const initial = new Set<string>();
+        if (currentProviderId) {
+            initial.add(currentProviderId);
+        }
+        return initial;
+    });
+    const [mobileEditOptionsOpen, setMobileEditOptionsOpen] = React.useState(false);
+    const [agentMenuOpen, setAgentMenuOpen] = React.useState(false);
+    const [desktopEditOptionsOpen, setDesktopEditOptionsOpen] = React.useState(false);
+    const desktopEditOptionsId = React.useId();
+
+    React.useEffect(() => {
+        if (activeMobilePanel === 'model') {
+            setExpandedMobileProviders(() => {
+                const initial = new Set<string>();
+                if (currentProviderId) {
+                    initial.add(currentProviderId);
+                }
+                return initial;
+            });
+        }
+    }, [activeMobilePanel, currentProviderId]);
+
+    React.useEffect(() => {
+        if (activeMobilePanel !== 'agent') {
+            setMobileEditOptionsOpen(false);
+        }
+    }, [activeMobilePanel]);
+
+    React.useEffect(() => {
+        if (!agentMenuOpen) {
+            setDesktopEditOptionsOpen(false);
+        }
+    }, [agentMenuOpen]);
+
+    const currentAgent = getCurrentAgent?.();
+    const agentPermissionRaw = currentAgent?.permission?.edit;
+    let agentDefaultEditMode: EditPermissionMode = 'ask';
+    if (agentPermissionRaw === 'allow' || agentPermissionRaw === 'ask' || agentPermissionRaw === 'deny' || agentPermissionRaw === 'full') {
+        agentDefaultEditMode = agentPermissionRaw;
+    }
+
+    const editToolConfigured = currentAgent ? (currentAgent.tools?.['edit'] !== false) : false;
+    if (!currentAgent || !editToolConfigured) {
+        agentDefaultEditMode = 'deny';
+    }
+
+    const agentWebfetchPermission = currentAgent?.permission?.webfetch;
+    const agentBashPermission = currentAgent?.permission?.bash as BashPermissionSetting | undefined;
+
+    const permissionUiState = React.useMemo(() => calculateEditPermissionUIState({
+        agentDefaultEditMode,
+        webfetchPermission: agentWebfetchPermission,
+        bashPermission: agentBashPermission,
+    }), [agentDefaultEditMode, agentWebfetchPermission, agentBashPermission]);
+
+    const { cascadeDefaultMode, modeAvailability, autoApproveAvailable } = permissionUiState;
+
+    const selectionContextReady = Boolean(currentSessionId && currentAgentName);
+    const sessionMode = selectionContextReady && currentSessionId && currentAgentName
+        ? getSessionAgentEditMode(currentSessionId, currentAgentName, cascadeDefaultMode)
+        : cascadeDefaultMode;
+
+    const editModeShortLabels: Record<EditPermissionMode, string> = {
+        ask: 'Ask before edits',
+        allow: 'Approve edit tools',
+        full: 'Approve every tool',
+        deny: 'Editing disabled',
+    };
+
+    const isModeDisabled = React.useCallback((mode: EditPermissionMode) => {
+        return !modeAvailability[mode];
+    }, [modeAvailability]);
+
+    const effectiveEditMode = React.useMemo(() => {
+        if (!selectionContextReady) {
+            return cascadeDefaultMode;
+        }
+        if (isModeDisabled(sessionMode) && sessionMode !== cascadeDefaultMode) {
+            return cascadeDefaultMode;
+        }
+        return sessionMode;
+    }, [cascadeDefaultMode, isModeDisabled, selectionContextReady, sessionMode]);
+
+    const editPermissionOptions: Array<{ mode: EditPermissionMode; label: string; disabled: boolean }> = [
+        { mode: 'ask', label: editModeShortLabels.ask, disabled: isModeDisabled('ask') },
+        { mode: 'allow', label: editModeShortLabels.allow, disabled: isModeDisabled('allow') },
+        { mode: 'full', label: editModeShortLabels.full, disabled: isModeDisabled('full') },
+    ];
+
+    const activeEditModeColors = React.useMemo(() => getEditModeColors(effectiveEditMode), [effectiveEditMode]);
+
+    const editToggleDisabled = !selectionContextReady || !autoApproveAvailable;
+
+    React.useEffect(() => {
+        if (editToggleDisabled) {
+            setMobileEditOptionsOpen(false);
+            setDesktopEditOptionsOpen(false);
+        }
+    }, [editToggleDisabled]);
+
+    const buttonHeight = isMobile ? 'h-9' : 'h-8';
+    const editToggleIconClass = isMobile ? 'h-5 w-5' : 'h-4 w-4';
+    const controlIconSize = isMobile ? 'h-5 w-5' : 'h-4 w-4';
+    const controlTextSize = isMobile ? 'typography-micro' : 'typography-meta';
+    const inlineGapClass = isMobile ? 'gap-x-2' : 'gap-x-3';
+    const editPermissionMenuLabel = editModeShortLabels[effectiveEditMode];
+
+    const renderEditModeIcon = React.useCallback((mode: EditPermissionMode, iconClass = editToggleIconClass) => {
+        const combinedClassName = cn(iconClass, 'flex-shrink-0');
+        const modeColors = getEditModeColors(mode);
+        const iconColor = modeColors ? modeColors.text : 'var(--foreground)';
+        const iconStyle = { color: iconColor };
+
+        if (mode === 'full') {
+            return <RiPencilAiLine className={combinedClassName} style={iconStyle} />;
+        }
+        if (mode === 'allow') {
+            return <RiCheckboxCircleLine className={combinedClassName} style={iconStyle} />;
+        }
+        if (mode === 'deny') {
+            return <RiCloseCircleLine className={combinedClassName} style={iconStyle} />;
+        }
+        return <RiQuestionLine className={combinedClassName} style={iconStyle} />;
+    }, [editToggleIconClass]);
+
+    const handleEditPermissionSelect = React.useCallback((mode: EditPermissionMode) => {
+        if (editToggleDisabled || !currentSessionId || !currentAgentName || isModeDisabled(mode)) {
+            return;
+        }
+        setSessionAgentEditMode(currentSessionId, currentAgentName, mode, cascadeDefaultMode);
+        setAgentMenuOpen(false);
+        setMobileEditOptionsOpen(false);
+        setDesktopEditOptionsOpen(false);
+    }, [cascadeDefaultMode, editToggleDisabled, currentSessionId, currentAgentName, setSessionAgentEditMode, setAgentMenuOpen, setDesktopEditOptionsOpen, isModeDisabled]);
+
+    const currentProvider = getCurrentProvider();
+    const models = Array.isArray(currentProvider?.models) ? currentProvider.models : [];
+
+    const currentMetadata =
+        currentProviderId && currentModelId ? getModelMetadata(currentProviderId, currentModelId) : undefined;
+    const currentCapabilityIcons = getCapabilityIcons(currentMetadata);
+    const inputModalityIcons = getModalityIcons(currentMetadata, 'input');
+    const outputModalityIcons = getModalityIcons(currentMetadata, 'output');
+
+    const costRows = [
+        { label: 'Input', value: formatCost(currentMetadata?.cost?.input) },
+        { label: 'Output', value: formatCost(currentMetadata?.cost?.output) },
+        { label: 'Cache read', value: formatCost(currentMetadata?.cost?.cache_read) },
+        { label: 'Cache write', value: formatCost(currentMetadata?.cost?.cache_write) },
+    ];
+
+    const limitRows = [
+        { label: 'Context', value: formatTokens(currentMetadata?.limit?.context) },
+        { label: 'Output', value: formatTokens(currentMetadata?.limit?.output) },
+    ];
+
+    const prevAgentNameRef = React.useRef<string | undefined>(undefined);
+
+    const currentSessionMessageCount = currentSessionId ? (messages.get(currentSessionId)?.length ?? -1) : -1;
+
+    const sessionInitializationRef = React.useRef<{
+        sessionId: string;
+        resolved: boolean;
+        inFlight: boolean;
+    } | null>(null);
+
+    const tryApplyModelSelection = React.useCallback(
+        (providerId: string, modelId: string, agentName?: string): ModelApplyResult => {
+            if (!providerId || !modelId) {
+                return 'model-missing';
+            }
+
+            const provider = providers.find(p => p.id === providerId);
+            if (!provider) {
+                return 'provider-missing';
+            }
+
+            const providerModels = Array.isArray(provider.models) ? provider.models : [];
+            const modelExists = providerModels.find((m: ProviderModel) => m.id === modelId);
+            if (!modelExists) {
+                return 'model-missing';
+            }
+
+            setProvider(providerId);
+            setModel(modelId);
+
+            if (currentSessionId && agentName) {
+                saveAgentModelForSession(currentSessionId, agentName, providerId, modelId);
+            }
+
+            return 'applied';
+        },
+        [providers, setProvider, setModel, currentSessionId, saveAgentModelForSession],
+    );
+
+    React.useEffect(() => {
+        if (!currentSessionId) {
+            sessionInitializationRef.current = null;
+            return;
+        }
+
+        if (!contextHydrated || providers.length === 0 || agents.length === 0) {
+            return;
+        }
+
+        if (!sessionInitializationRef.current || sessionInitializationRef.current.sessionId !== currentSessionId) {
+            sessionInitializationRef.current = { sessionId: currentSessionId, resolved: false, inFlight: false };
+        }
+
+        const state = sessionInitializationRef.current;
+        if (!state || state.resolved || state.inFlight) {
+            return;
+        }
+
+        let isCancelled = false;
+
+        const finalize = () => {
+            if (isCancelled) {
+                return;
+            }
+            const refState = sessionInitializationRef.current;
+            if (refState && refState.sessionId === currentSessionId) {
+                refState.resolved = true;
+                refState.inFlight = false;
+            }
+        };
+
+        const applySavedSelections = (): 'resolved' | 'waiting' | 'continue' => {
+            const savedAgentName = getSessionAgentSelection(currentSessionId);
+            if (savedAgentName) {
+                if (currentAgentName !== savedAgentName) {
+                    setAgent(savedAgentName);
+                }
+
+                const savedModel = getAgentModelForSession(currentSessionId, savedAgentName);
+                if (savedModel) {
+                    const result = tryApplyModelSelection(savedModel.providerId, savedModel.modelId, savedAgentName);
+                    if (result === 'applied') {
+                        return 'resolved';
+                    }
+                    if (result === 'provider-missing') {
+                        return 'waiting';
+                    }
+                } else {
+                    return 'resolved';
+                }
+            }
+
+            for (const agent of agents) {
+                const selection = getAgentModelForSession(currentSessionId, agent.name);
+                if (!selection) {
+                    continue;
+                }
+
+                if (currentAgentName !== agent.name) {
+                    setAgent(agent.name);
+                }
+
+                saveSessionAgentSelection(currentSessionId, agent.name);
+                const result = tryApplyModelSelection(selection.providerId, selection.modelId, agent.name);
+                if (result === 'applied') {
+                    return 'resolved';
+                }
+                if (result === 'provider-missing') {
+                    return 'waiting';
+                }
+            }
+
+            return 'continue';
+        };
+
+        const applyFallbackAgent = () => {
+            if (agents.length === 0) {
+                return;
+            }
+
+            const primaryAgents = agents.filter(agent => isPrimaryMode(agent.mode));
+            const fallbackAgent = agents.find(agent => agent.name === 'build') || primaryAgents[0] || agents[0];
+            if (!fallbackAgent) {
+                return;
+            }
+
+            saveSessionAgentSelection(currentSessionId, fallbackAgent.name);
+
+            if (currentAgentName !== fallbackAgent.name) {
+                setAgent(fallbackAgent.name);
+            }
+
+            if (fallbackAgent.model?.providerID && fallbackAgent.model?.modelID) {
+                tryApplyModelSelection(fallbackAgent.model.providerID, fallbackAgent.model.modelID, fallbackAgent.name);
+            }
+        };
+
+        const resolveSessionPreferences = async () => {
+            try {
+                const savedOutcome = applySavedSelections();
+                if (savedOutcome === 'resolved') {
+                    finalize();
+                    return;
+                }
+                if (savedOutcome === 'waiting') {
+                    return;
+                }
+
+                if (currentSessionMessageCount === -1) {
+                    return;
+                }
+
+                if (currentSessionMessageCount > 0) {
+                    state.inFlight = true;
+                    try {
+                        const discoveredChoices = await analyzeAndSaveExternalSessionChoices(currentSessionId, agents);
+                        if (isCancelled) {
+                            return;
+                        }
+
+                        if (discoveredChoices.size > 0) {
+                            let latestAgent: string | null = null;
+                            let latestTimestamp = -Infinity;
+
+                            for (const [agentName, choice] of discoveredChoices) {
+                                if (choice.timestamp > latestTimestamp) {
+                                    latestTimestamp = choice.timestamp;
+                                    latestAgent = agentName;
+                                }
+                            }
+
+                            if (latestAgent) {
+                                saveSessionAgentSelection(currentSessionId, latestAgent);
+                                if (currentAgentName !== latestAgent) {
+                                    setAgent(latestAgent);
+                                }
+
+                                const latestChoice = discoveredChoices.get(latestAgent);
+                                if (latestChoice) {
+                                    const applyResult = tryApplyModelSelection(
+                                        latestChoice.providerId,
+                                        latestChoice.modelId,
+                                        latestAgent,
+                                    );
+
+                                    if (applyResult === 'applied') {
+                                        finalize();
+                                        return;
+                                    }
+
+                                    if (applyResult === 'provider-missing') {
+                                        return;
+                                    }
+                                } else {
+                                    finalize();
+                                    return;
+                                }
+                            }
+                        }
+                    } catch (error) {
+                        if (!isCancelled) {
+                            console.error('[ModelControls] Error resolving session from messages:', error);
+                        }
+                    } finally {
+                        const refState = sessionInitializationRef.current;
+                        if (!isCancelled && refState && refState.sessionId === currentSessionId) {
+                            refState.inFlight = false;
+                        }
+                    }
+                }
+
+                applyFallbackAgent();
+                finalize();
+            } catch (error) {
+                if (!isCancelled) {
+                    console.error('[ModelControls] Error in session switch:', error);
+                }
+            }
+        };
+
+        resolveSessionPreferences();
+
+        return () => {
+            isCancelled = true;
+        };
+    }, [
+        currentSessionId,
+        currentSessionMessageCount,
+        agents,
+        currentAgentName,
+        getSessionAgentSelection,
+        getAgentModelForSession,
+        setAgent,
+        tryApplyModelSelection,
+        analyzeAndSaveExternalSessionChoices,
+        saveSessionAgentSelection,
+        contextHydrated,
+        providers,
+    ]);
+
+    React.useEffect(() => {
+        if (!contextHydrated || !currentSessionId || providers.length === 0 || agents.length === 0) {
+            return;
+        }
+
+        const savedAgentName = getSessionAgentSelection(currentSessionId);
+        const preferredAgent = savedAgentName || currentAgentName;
+        if (!preferredAgent) {
+            return;
+        }
+
+        const preferredSelection = getAgentModelForSession(currentSessionId, preferredAgent);
+        if (!preferredSelection) {
+            return;
+        }
+
+        const provider = providers.find(p => p.id === preferredSelection.providerId);
+        if (!provider) {
+            return;
+        }
+
+        const modelExists = Array.isArray(provider.models)
+            ? provider.models.some((m: ProviderModel) => m.id === preferredSelection.modelId)
+            : false;
+        if (!modelExists) {
+            return;
+        }
+
+        const providerMatches = currentProviderId === preferredSelection.providerId;
+        const modelMatches = currentModelId === preferredSelection.modelId;
+        if (providerMatches && modelMatches) {
+            return;
+        }
+
+        if (preferredAgent !== currentAgentName) {
+            setAgent(preferredAgent);
+        }
+
+        tryApplyModelSelection(preferredSelection.providerId, preferredSelection.modelId, preferredAgent);
+    }, [
+        contextHydrated,
+        currentSessionId,
+        currentAgentName,
+        currentProviderId,
+        currentModelId,
+        providers,
+        agents,
+        getSessionAgentSelection,
+        getAgentModelForSession,
+        tryApplyModelSelection,
+        setAgent,
+    ]);
+
+    React.useEffect(() => {
+        if (!contextHydrated) {
+            return;
+        }
+
+        const handleAgentSwitch = async () => {
+            try {
+                if (currentAgentName !== prevAgentNameRef.current) {
+                    prevAgentNameRef.current = currentAgentName;
+
+                    if (currentAgentName && currentSessionId) {
+                        await new Promise(resolve => setTimeout(resolve, 50));
+
+                        const persistedChoice = getAgentModelForSession(currentSessionId, currentAgentName);
+
+                        if (persistedChoice) {
+                            const result = tryApplyModelSelection(
+                                persistedChoice.providerId,
+                                persistedChoice.modelId,
+                                currentAgentName,
+                            );
+                            if (result === 'applied' || result === 'provider-missing') {
+                                return;
+                            }
+                        }
+
+                        const agent = agents.find(a => a.name === currentAgentName);
+                        if (agent?.model?.providerID && agent?.model?.modelID) {
+                            const result = tryApplyModelSelection(
+                                agent.model.providerID,
+                                agent.model.modelID,
+                                currentAgentName,
+                            );
+                            if (result === 'provider-missing') {
+                                return;
+                            }
+                        }
+                    }
+                }
+            } catch (error) {
+                console.error('[ModelControls] Agent change error:', error);
+            }
+        };
+
+        handleAgentSwitch();
+    }, [currentAgentName, currentSessionId, getAgentModelForSession, tryApplyModelSelection, agents, contextHydrated]);
+
+    const handleAgentChange = (agentName: string) => {
+        try {
+            setAgent(agentName);
+            setAgentMenuOpen(false);
+
+            if (currentSessionId) {
+                saveSessionAgentSelection(currentSessionId, agentName);
+            }
+            if (isMobile) {
+                closeMobilePanel();
+            }
+        } catch (error) {
+            console.error('[ModelControls] Handle agent change error:', error);
+        }
+    };
+
+    const handleProviderAndModelChange = (providerId: string, modelId: string) => {
+        try {
+            const result = tryApplyModelSelection(providerId, modelId, currentAgentName || undefined);
+            if (result !== 'applied') {
+                if (result === 'provider-missing') {
+                    console.error('[ModelControls] Provider not available for selection:', providerId);
+                } else if (result === 'model-missing') {
+                    console.error('[ModelControls] Model not available for selection:', { providerId, modelId });
+                }
+                return;
+            }
+            if (isMobile) {
+                closeMobilePanel();
+            }
+        } catch (error) {
+            console.error('[ModelControls] Handle model change error:', error);
+        }
+    };
+
+    const getModelDisplayName = (model: ProviderModel | undefined) => {
+        const name = (typeof model?.name === 'string' ? model.name : (typeof model?.id === 'string' ? model.id : ''));
+        if (name.length > 40) {
+            return name.substring(0, 37) + '...';
+        }
+        return name;
+    };
+
+    const getProviderDisplayName = () => {
+        const provider = providers.find(p => p.id === currentProviderId);
+        return provider?.name || currentProviderId;
+    };
+
+    const getCurrentModelDisplayName = () => {
+        if (!currentProviderId || !currentModelId) return 'Not selected';
+        if (models.length === 0) return 'Not selected';
+        const currentModel = models.find((m: ProviderModel) => m.id === currentModelId);
+        return getModelDisplayName(currentModel);
+    };
+
+    const getAgentDisplayName = () => {
+        if (!currentAgentName) {
+            const primaryAgents = agents.filter(agent => isPrimaryMode(agent.mode));
+            const buildAgent = primaryAgents.find(agent => agent.name === 'build');
+            const defaultAgent = buildAgent || primaryAgents[0];
+            return defaultAgent ? capitalizeAgentName(defaultAgent.name) : 'Select Agent';
+        }
+        const agent = agents.find(a => a.name === currentAgentName);
+        return agent ? capitalizeAgentName(agent.name) : capitalizeAgentName(currentAgentName);
+    };
+
+    const capitalizeAgentName = (name: string) => {
+        return name.charAt(0).toUpperCase() + name.slice(1);
+    };
+
+    const renderIconBadge = (IconComp: IconComponent, label: string, key: string) => (
+        <span
+            key={key}
+            className="flex h-5 w-5 items-center justify-center rounded-xl bg-muted/60 text-muted-foreground"
+            title={label}
+            aria-label={label}
+            role="img"
+        >
+            <IconComp className="h-3.5 w-3.5" />
+        </span>
+    );
+
+    const toggleMobileProviderExpansion = React.useCallback((providerId: string) => {
+        setExpandedMobileProviders((prev) => {
+            const next = new Set(prev);
+            if (next.has(providerId)) {
+                next.delete(providerId);
+            } else {
+                next.add(providerId);
+            }
+            return next;
+        });
+    }, []);
+
+    const handleLongPressStart = React.useCallback((type: 'model' | 'agent') => {
+        if (longPressTimerRef.current) {
+            clearTimeout(longPressTimerRef.current);
+        }
+        longPressTimerRef.current = setTimeout(() => {
+            setMobileTooltipOpen(type);
+        }, 500);
+    }, []);
+
+    const handleLongPressEnd = React.useCallback(() => {
+        if (longPressTimerRef.current) {
+            clearTimeout(longPressTimerRef.current);
+        }
+    }, []);
+
+    React.useEffect(() => {
+        return () => {
+            if (longPressTimerRef.current) {
+                clearTimeout(longPressTimerRef.current);
+            }
+        };
+    }, []);
+
+    const renderMobileModelTooltip = () => {
+        if (!isMobile || mobileTooltipOpen !== 'model') return null;
+
+        return (
+            <MobileOverlayPanel
+                open={true}
+                onClose={closeMobileTooltip}
+                title={currentMetadata?.name || getCurrentModelDisplayName()}
+            >
+                <div className="flex flex-col gap-1.5">
+                    {}
+                    <div className="rounded-xl border border-border/40 bg-sidebar/30 px-2 py-1.5">
+                        <div className="typography-micro text-muted-foreground mb-0.5">Provider</div>
+                        <div className="typography-meta text-foreground font-medium">{getProviderDisplayName()}</div>
+                    </div>
+
+                    {}
+                    {currentCapabilityIcons.length > 0 && (
+                        <div className="rounded-xl border border-border/40 bg-sidebar/30 px-2 py-1.5">
+                            <div className="typography-micro text-muted-foreground mb-1">Capabilities</div>
+                            <div className="flex flex-wrap gap-1.5">
+                                {currentCapabilityIcons.map(({ key, icon, label }) => (
+                                    <div key={key} className="flex items-center gap-1.5">
+                                        {renderIconBadge(icon, label, `cap-${key}`)}
+                                        <span className="typography-meta text-foreground">{label}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                    {}
+                    {(inputModalityIcons.length > 0 || outputModalityIcons.length > 0) && (
+                        <div className="rounded-xl border border-border/40 bg-sidebar/30 px-2 py-1.5">
+                            <div className="typography-micro text-muted-foreground mb-1">Modalities</div>
+                            <div className="flex flex-col gap-1">
+                                {inputModalityIcons.length > 0 && (
+                                    <div className="flex items-center gap-2">
+                                        <span className="typography-meta text-muted-foreground/80 w-12">Input</span>
+                                        <div className="flex gap-1">
+                                            {inputModalityIcons.map(({ key, icon, label }) => renderIconBadge(icon, `${label} input`, `input-${key}`))}
+                                        </div>
+                                    </div>
+                                )}
+                                {outputModalityIcons.length > 0 && (
+                                    <div className="flex items-center gap-2">
+                                        <span className="typography-meta text-muted-foreground/80 w-12">Output</span>
+                                        <div className="flex gap-1">
+                                            {outputModalityIcons.map(({ key, icon, label }) => renderIconBadge(icon, `${label} output`, `output-${key}`))}
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    )}
+
+                    {}
+                    <div className="rounded-xl border border-border/40 bg-sidebar/30 px-2 py-1.5">
+                        <div className="typography-micro text-muted-foreground mb-1">Limits</div>
+                        <div className="flex flex-col gap-0.5">
+                            <div className="flex items-center justify-between">
+                                <span className="typography-meta text-muted-foreground/80">Context</span>
+                                <span className="typography-meta font-medium text-foreground">{formatTokens(currentMetadata?.limit?.context)}</span>
+                            </div>
+                            <div className="flex items-center justify-between">
+                                <span className="typography-meta text-muted-foreground/80">Output</span>
+                                <span className="typography-meta font-medium text-foreground">{formatTokens(currentMetadata?.limit?.output)}</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    {}
+                    <div className="rounded-xl border border-border/40 bg-sidebar/30 px-2 py-1.5">
+                        <div className="typography-micro text-muted-foreground mb-1">Metadata</div>
+                        <div className="flex flex-col gap-0.5">
+                            <div className="flex items-center justify-between">
+                                <span className="typography-meta text-muted-foreground/80">Knowledge</span>
+                                <span className="typography-meta font-medium text-foreground">{formatKnowledge(currentMetadata?.knowledge)}</span>
+                            </div>
+                            <div className="flex items-center justify-between">
+                                <span className="typography-meta text-muted-foreground/80">Release</span>
+                                <span className="typography-meta font-medium text-foreground">{formatDate(currentMetadata?.release_date)}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </MobileOverlayPanel>
+        );
+    };
+
+    const renderMobileAgentTooltip = () => {
+        if (!isMobile || mobileTooltipOpen !== 'agent' || !currentAgent) return null;
+
+        const enabledTools = Object.entries(currentAgent.tools || {})
+            .filter(([, enabled]) => enabled)
+            .map(([tool]) => tool)
+            .sort();
+
+        const hasCustomPrompt = Boolean(currentAgent.prompt && currentAgent.prompt.trim().length > 0);
+        const hasModelConfig = currentAgent.model?.providerID && currentAgent.model?.modelID;
+        const hasTemperatureOrTopP = currentAgent.temperature !== undefined || currentAgent.topP !== undefined;
+
+        const getPermissionIcon = (permission?: string) => {
+            const mode: EditPermissionMode =
+                permission === 'full' || permission === 'allow' || permission === 'deny' ? permission : 'ask';
+            return renderEditModeIcon(mode, 'h-3.5 w-3.5');
+        };
+
+        const getPermissionLabel = (permission?: string) => {
+            if (permission === 'full') return 'Full';
+            if (permission === 'allow') return 'Allow';
+            if (permission === 'deny') return 'Deny';
+            return 'Ask';
+        };
+
+        return (
+            <MobileOverlayPanel
+                open={true}
+                onClose={closeMobileTooltip}
+                title={capitalizeAgentName(currentAgent.name)}
+            >
+                <div className="flex flex-col gap-1.5">
+                    {}
+                    {currentAgent.description && (
+                        <div className="rounded-xl border border-border/40 bg-sidebar/30 px-2 py-1.5">
+                            <div className="typography-meta text-foreground">{currentAgent.description}</div>
+                        </div>
+                    )}
+
+                    {}
+                    <div className="rounded-xl border border-border/40 bg-sidebar/30 px-2 py-1.5">
+                        <div className="typography-micro text-muted-foreground mb-0.5">Mode</div>
+                        <div className="typography-meta text-foreground font-medium">
+                            {currentAgent.mode === 'primary' ? 'Primary' : currentAgent.mode === 'subagent' ? 'Subagent' : currentAgent.mode === 'all' ? 'All' : '—'}
+                        </div>
+                    </div>
+
+                    {}
+                    {(hasModelConfig || hasTemperatureOrTopP) && (
+                        <div className="rounded-xl border border-border/40 bg-sidebar/30 px-2 py-1.5">
+                            <div className="typography-micro text-muted-foreground mb-1">Model</div>
+                            {hasModelConfig && (
+                                <div className="typography-meta text-foreground font-medium mb-1">
+                                    {currentAgent.model!.providerID} / {currentAgent.model!.modelID}
+                                </div>
+                            )}
+                            {hasTemperatureOrTopP && (
+                                <div className="flex flex-col gap-0.5">
+                                    {currentAgent.temperature !== undefined && (
+                                        <div className="flex items-center justify-between">
+                                            <span className="typography-meta text-muted-foreground/80">Temperature</span>
+                                            <span className="typography-meta font-medium text-foreground">{currentAgent.temperature}</span>
+                                        </div>
+                                    )}
+                                    {currentAgent.topP !== undefined && (
+                                        <div className="flex items-center justify-between">
+                                            <span className="typography-meta text-muted-foreground/80">Top P</span>
+                                            <span className="typography-meta font-medium text-foreground">{currentAgent.topP}</span>
+                                        </div>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    )}
+
+                    {}
+                    <div className="rounded-xl border border-border/40 bg-sidebar/30 px-2 py-1.5">
+                        <div className="typography-micro text-muted-foreground mb-1">Tools</div>
+                        {enabledTools.length > 0 ? (
+                            <div className="flex flex-wrap gap-1 leading-tight">
+                                {enabledTools.map((tool) => (
+                                    <span
+                                        key={tool}
+                                        className="inline-flex items-center rounded-lg bg-muted/60 px-1.5 py-0.5 typography-meta text-foreground"
+                                    >
+                                        {tool}
+                                    </span>
+                                ))}
+                            </div>
+                        ) : (
+                            <div className="typography-meta text-muted-foreground">All enabled</div>
+                        )}
+                    </div>
+
+                    {}
+                    <div className="rounded-xl border border-border/40 bg-sidebar/30 px-2 py-1.5">
+                        <div className="typography-micro text-muted-foreground mb-1">Permissions</div>
+                        <div className="flex flex-col gap-1">
+                            <div className="flex items-center justify-between">
+                                <span className="typography-meta text-muted-foreground/80">Edit</span>
+                                <div className="flex items-center gap-1.5">
+                                    {getPermissionIcon(currentAgent.permission?.edit)}
+                                    <span className="typography-meta font-medium text-foreground">
+                                        {getPermissionLabel(currentAgent.permission?.edit)}
+                                    </span>
+                                </div>
+                            </div>
+                            <div className="flex items-center justify-between">
+                                <span className="typography-meta text-muted-foreground/80">Bash</span>
+                                <div className="flex items-center gap-1.5">
+                                    {getPermissionIcon(typeof currentAgent.permission?.bash === 'string' ? currentAgent.permission.bash : undefined)}
+                                    <span className="typography-meta font-medium text-foreground">
+                                        {getPermissionLabel(typeof currentAgent.permission?.bash === 'string' ? currentAgent.permission.bash : undefined)}
+                                    </span>
+                                </div>
+                            </div>
+                            <div className="flex items-center justify-between">
+                                <span className="typography-meta text-muted-foreground/80">WebFetch</span>
+                                <div className="flex items-center gap-1.5">
+                                    {getPermissionIcon(currentAgent.permission?.webfetch)}
+                                    <span className="typography-meta font-medium text-foreground">
+                                        {getPermissionLabel(currentAgent.permission?.webfetch)}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {}
+                    {hasCustomPrompt && (
+                        <div className="rounded-xl border border-border/40 bg-sidebar/30 px-2 py-1.5">
+                            <div className="flex items-center justify-between">
+                                <span className="typography-meta text-muted-foreground/80">Custom Prompt</span>
+                                <RiCheckboxCircleLine className="h-4 w-4 text-foreground" />
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </MobileOverlayPanel>
+        );
+    };
+
+    const renderMobileModelPanel = () => {
+        if (!isMobile) return null;
+
+        return (
+            <MobileOverlayPanel
+                open={activeMobilePanel === 'model'}
+                onClose={closeMobilePanel}
+                title="Select model"
+            >
+                <div className="space-y-2">
+                    {providers.map((provider) => {
+                        const providerModels = Array.isArray(provider.models) ? provider.models : [];
+                        if (providerModels.length === 0) {
+                            return null;
+                        }
+
+                        const isActiveProvider = provider.id === currentProviderId;
+                        const isExpanded = expandedMobileProviders.has(provider.id);
+
+                        return (
+                            <div key={provider.id} className="rounded-xl border border-border/40 bg-background/95">
+                                <button
+                                    type="button"
+                                    onClick={() => toggleMobileProviderExpansion(provider.id)}
+                                    className="flex w-full items-center justify-between gap-1.5 px-2 py-1.5 text-left"
+                                    aria-expanded={isExpanded}
+                                >
+                                    <div className="flex items-center gap-2">
+                                        <ProviderLogo
+                                            providerId={provider.id}
+                                            className="h-3.5 w-3.5"
+                                        />
+                                        <span className="typography-meta font-medium text-foreground">
+                                            {provider.name}
+                                        </span>
+                                        {isActiveProvider && (
+                                            <span className="typography-micro text-primary/80">Current</span>
+                                        )}
+                                    </div>
+                                    {isExpanded ? (
+                                        <RiArrowDownSLine className="h-3 w-3 text-muted-foreground" />
+                                    ) : (
+                                        <RiArrowRightSLine className="h-3 w-3 text-muted-foreground" />
+                                    )}
+                                </button>
+
+                                {isExpanded && (
+                                    <div className="flex flex-col border-t border-border/30">
+                                        {providerModels.map((model: ProviderModel) => {
+                                            const isSelected = isActiveProvider && model.id === currentModelId;
+                                            const metadata = getModelMetadata(provider.id, model.id!);
+                                            const capabilityIcons = getCapabilityIcons(metadata).slice(0, 3);
+                                            const inputIcons = getModalityIcons(metadata, 'input');
+
+                                            return (
+                                                <button
+                                                    key={model.id}
+                                                    type="button"
+                                                    onClick={() => handleProviderAndModelChange(provider.id as string, model.id as string)}
+                                                    className={cn(
+                                                        'flex w-full items-start gap-2 border-b border-border/30 px-2 py-1.5 text-left last:border-b-0',
+                                                        'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary',
+                                                        isSelected
+                                                            ? 'bg-primary/15 text-primary'
+                                                            : 'hover:bg-accent/40'
+                                                    )}
+                                                >
+                                                    <div className="flex min-w-0 flex-col">
+                                                        <span className="typography-meta font-medium text-foreground">
+                                                            {getModelDisplayName(model)}
+                                                        </span>
+                                                        <div className="flex flex-wrap items-center gap-1 pt-0.5">
+                                                            {capabilityIcons.map(({ key, icon: IconComponent, label }) => (
+                                                                <span
+                                                                    key={`cap-${provider.id}-${model.id}-${key}`}
+                                                                    className="flex h-4 w-4 items-center justify-center text-muted-foreground"
+                                                                    title={label}
+                                                                    aria-label={label}
+                                                                >
+                                                                    <IconComponent className="h-3 w-3" />
+                                                                </span>
+                                                            ))}
+                                                            {inputIcons.map(({ key, icon: IconComponent, label }) => (
+                                                                <span
+                                                                    key={`input-${provider.id}-${model.id}-${key}`}
+                                                                    className="flex h-4 w-4 items-center justify-center text-muted-foreground"
+                                                                    title={`${label} input`}
+                                                                    aria-label={`${label} input`}
+                                                                >
+                                                                    <IconComponent className="h-3 w-3" />
+                                                                </span>
+                                                            ))}
+                                                        </div>
+
+                                                    </div>
+                                                </button>
+                                            );
+                                        })}
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+            </MobileOverlayPanel>
+        );
+    };
+
+    const renderMobileAgentPanel = () => {
+        if (!isMobile) return null;
+
+        const primaryAgents = agents.filter(agent => isPrimaryMode(agent.mode));
+
+        return (
+            <MobileOverlayPanel
+                open={activeMobilePanel === 'agent'}
+                onClose={closeMobilePanel}
+                title="Select agent"
+            >
+                <div className="flex flex-col gap-1.5">
+                    {primaryAgents.map((agent) => {
+                        const isSelected = agent.name === currentAgentName;
+                        const agentColor = getAgentColor(agent.name);
+                        return (
+                            <button
+                                key={agent.name}
+                                type="button"
+                                className={cn(
+                                    'flex w-full flex-col gap-1 rounded-xl border px-2 py-1.5 text-left',
+                                    'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary agent-list-item',
+                                    agentColor.class,
+                                    isSelected ? 'active' : 'border-border/40'
+                                )}
+                                onClick={() => handleAgentChange(agent.name)}
+                            >
+                                <div className="flex items-center gap-1.5">
+                                    <div className={cn('h-2 w-2 rounded-full', agentColor.class)} />
+                                    <span
+                                        className="typography-meta font-medium text-foreground"
+                                        style={isSelected ? { color: `var(${agentColor.var})` } : undefined}
+                                    >
+                                        {capitalizeAgentName(agent.name)}
+                                    </span>
+                                </div>
+                                {agent.description && (
+                                    <span className="typography-micro text-muted-foreground">
+                                        {agent.description}
+                                    </span>
+                                )}
+                            </button>
+                        );
+                    })}
+                    <div className="rounded-xl border border-border/40 bg-sidebar/30">
+                        <button
+                            type="button"
+                            disabled={editToggleDisabled}
+                            onClick={() => {
+                                if (!editToggleDisabled) {
+                                    setMobileEditOptionsOpen((previous) => !previous);
+                                }
+                            }}
+                            className={cn(
+                                'flex w-full items-center justify-between gap-2 px-2 py-1.5 text-left bg-transparent',
+                                'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary rounded-t-xl',
+                                editToggleDisabled ? 'cursor-not-allowed opacity-60' : undefined
+                            )}
+                        >
+                            <div className="flex flex-col text-left">
+                                <span
+                                    className="typography-meta font-medium text-foreground"
+                                    style={{
+                                        color: activeEditModeColors ? activeEditModeColors.text : 'var(--foreground)',
+                                        mixBlendMode: 'normal',
+                                    }}
+                                >
+                                    {editPermissionMenuLabel}
+                                </span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <span
+                                    className={cn(
+                                        'flex items-center justify-center p-1',
+                                        !activeEditModeColors && 'text-muted-foreground'
+                                    )}
+                                    style={
+                                        activeEditModeColors
+                                            ? {
+                                                  color: activeEditModeColors.text,
+                                              }
+                                            : undefined
+                                    }
+                                >
+                                    {renderEditModeIcon(effectiveEditMode, editToggleIconClass)}
+                                </span>
+                                <RiArrowDownSLine
+                                    className={cn(
+                                        'h-4 w-4 text-muted-foreground transition-transform',
+                                        mobileEditOptionsOpen ? 'rotate-180' : ''
+                                    )}
+                                />
+                            </div>
+                        </button>
+                        {mobileEditOptionsOpen && !editToggleDisabled && (
+                            <div className="border-t border-border/40 bg-transparent px-2 py-1.5">
+                                <div className="flex flex-col gap-1.5">
+                                    {editPermissionOptions.map((option) => {
+                                        const isSelected = option.mode === effectiveEditMode;
+                                        const optionColors = getEditModeColors(option.mode);
+                                        return (
+                                            <button
+                                                key={option.mode}
+                                                type="button"
+                                                disabled={option.disabled}
+                                                onClick={() => handleEditPermissionSelect(option.mode)}
+                                                className={cn(
+                                                    'flex w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left',
+                                                    option.disabled ? 'cursor-not-allowed opacity-50' : 'focus:bg-transparent hover:bg-transparent',
+                                                    isSelected ? 'bg-primary/10' : undefined
+                                                )}
+                                                style={isSelected && optionColors ? { backgroundColor: optionColors.background ?? undefined } : undefined}
+                                            >
+                                                {renderEditModeIcon(option.mode, editToggleIconClass)}
+                                                <div className="flex flex-col">
+                                                    <span
+                                                        className="typography-meta font-medium"
+                                                        style={{
+                                                            color: optionColors
+                                                                ? optionColors.text
+                                                                : 'var(--foreground)',
+                                                        }}
+                                                    >
+                                                        {option.label}
+                                                    </span>
+                                                </div>
+                                            </button>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </MobileOverlayPanel>
+        );
+    };
+
+    const renderModelTooltipContent = () => (
+        <TooltipContent align="start" sideOffset={8} className="max-w-[320px]">
+            {currentMetadata ? (
+                <div className="flex min-w-[240px] flex-col gap-3">
+                    <div className="flex flex-col gap-0.5">
+                        <span className="typography-micro font-semibold text-foreground">
+                            {currentMetadata.name || getCurrentModelDisplayName()}
+                        </span>
+                        <span className="typography-meta text-muted-foreground">{getProviderDisplayName()}</span>
+                    </div>
+                    <div className="flex flex-col gap-1.5">
+                        <span className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground/90">Capabilities</span>
+                        <div className="flex flex-wrap items-center gap-1.5">
+                            {currentCapabilityIcons.length > 0 ? (
+                                currentCapabilityIcons.map(({ key, icon, label }) =>
+                                    renderIconBadge(icon, label, `cap-${key}`)
+                                )
+                            ) : (
+                                <span className="typography-meta text-muted-foreground">—</span>
+                            )}
+                        </div>
+                    </div>
+                    <div className="flex flex-col gap-1.5">
+                        <span className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground/90">Modalities</span>
+                        <div className="flex flex-col gap-1">
+                            <div className="flex items-center justify-between gap-3">
+                                <span className="typography-meta font-medium text-muted-foreground/80">Input</span>
+                                <div className="flex items-center gap-1.5">
+                                    {inputModalityIcons.length > 0
+                                        ? inputModalityIcons.map(({ key, icon, label }) =>
+                                              renderIconBadge(icon, `${label} input`, `input-${key}`)
+                                          )
+                                        : <span className="typography-meta text-muted-foreground">—</span>}
+                                </div>
+                            </div>
+                            <div className="flex items-center justify-between gap-3">
+                                <span className="typography-meta font-medium text-muted-foreground/80">Output</span>
+                                <div className="flex items-center gap-1.5">
+                                    {outputModalityIcons.length > 0
+                                        ? outputModalityIcons.map(({ key, icon, label }) =>
+                                              renderIconBadge(icon, `${label} output`, `output-${key}`)
+                                          )
+                                        : <span className="typography-meta text-muted-foreground">—</span>}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="flex flex-col gap-1.5">
+                        <span className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground/90">Cost ($/1M tokens)</span>
+                        {costRows.map((row) => (
+                            <div key={row.label} className="flex items-center justify-between gap-3">
+                                <span className="typography-meta font-medium text-muted-foreground/80">{row.label}</span>
+                                <span className="typography-meta font-medium text-foreground">{row.value}</span>
+                            </div>
+                        ))}
+                    </div>
+                    <div className="flex flex-col gap-1.5">
+                        <span className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground/90">Limits</span>
+                        {limitRows.map((row) => (
+                            <div key={row.label} className="flex items-center justify-between gap-3">
+                                <span className="typography-meta font-medium text-muted-foreground/80">{row.label}</span>
+                                <span className="typography-meta font-medium text-foreground">{row.value}</span>
+                            </div>
+                        ))}
+                    </div>
+                    <div className="flex flex-col gap-1.5">
+                        <span className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground/90">Metadata</span>
+                        <div className="flex items-center justify-between gap-3">
+                            <span className="typography-meta font-medium text-muted-foreground/80">Knowledge</span>
+                            <span className="typography-meta font-medium text-foreground">{formatKnowledge(currentMetadata.knowledge)}</span>
+                        </div>
+                        <div className="flex items-center justify-between gap-3">
+                            <span className="typography-meta font-medium text-muted-foreground/80">Release</span>
+                            <span className="typography-meta font-medium text-foreground">{formatDate(currentMetadata.release_date)}</span>
+                        </div>
+                    </div>
+                </div>
+            ) : (
+                <div className="min-w-[200px] typography-meta text-muted-foreground">Model metadata unavailable.</div>
+            )}
+        </TooltipContent>
+    );
+
+    const renderModelSelector = () => (
+        <Tooltip delayDuration={1000}>
+                {!isMobile ? (
+                    <DropdownMenu open={agentMenuOpen} onOpenChange={setAgentMenuOpen}>
+                        <TooltipTrigger asChild>
+                            <DropdownMenuTrigger asChild>
+                                <div
+                                    className={cn(
+                                        'flex items-center gap-1.5 cursor-pointer hover:opacity-70 w-fit',
+                                        buttonHeight
+                                    )}
+                                >
+                                    {currentProviderId ? (
+                                        <>
+                                            <ProviderLogo
+                                                providerId={currentProviderId}
+                                                className={cn(controlIconSize, 'flex-shrink-0')}
+                                            />
+                                            <RiPencilAiLine className={cn(controlIconSize, 'text-primary/60 hidden')} />
+                                        </>
+                                    ) : (
+                                        <RiPencilAiLine className={cn(controlIconSize, 'text-muted-foreground')} />
+                                    )}
+                                    <span
+                                        key={`${currentProviderId}-${currentModelId}`}
+                                        className={cn(controlTextSize, 'font-medium whitespace-nowrap text-foreground', 'max-w-[32vw]', 'md:max-w-[20vw]', 'truncate')}
+                                    >
+                                        {getCurrentModelDisplayName()}
+                                    </span>
+                                </div>
+                            </DropdownMenuTrigger>
+                        </TooltipTrigger>
+                        <DropdownMenuContent className="max-w-[300px]">
+                            {providers.map((provider) => {
+                                const providerModels = Array.isArray(provider.models) ? provider.models : [];
+
+                                if (providerModels.length === 0) {
+                                    return (
+                                        <DropdownMenuItem
+                                            key={provider.id}
+                                            disabled
+                                            className="typography-meta text-muted-foreground"
+                                        >
+                                            <ProviderLogo
+                                                providerId={provider.id}
+                                                className="h-3 w-3 flex-shrink-0 mr-2"
+                                            />
+                                            {provider.name} (No models)
+                                        </DropdownMenuItem>
+                                    );
+                                }
+
+                                return (
+                                    <DropdownMenuSub key={provider.id}>
+                                        <DropdownMenuSubTrigger className="typography-meta">
+                                            <ProviderLogo
+                                                providerId={provider.id}
+                                                className="h-3 w-3 flex-shrink-0 mr-2"
+                                            />
+                                            {provider.name}
+                                        </DropdownMenuSubTrigger>
+                                        <DropdownMenuSubContent
+                                            className="max-h-[320px] min-w-[200px]"
+                                            sideOffset={2}
+                                            collisionPadding={8}
+                                            avoidCollisions={true}
+                                        >
+                                            <ScrollableOverlay
+                                                outerClassName="max-h-[320px] min-w-[200px]"
+                                            >
+                                                {providerModels.map((model: ProviderModel) => {
+                                                const metadata = getModelMetadata(provider.id, model.id!);
+                                                const capabilityIcons = getCapabilityIcons(metadata).map((icon) => ({
+                                                    ...icon,
+                                                    id: `cap-${icon.key}`,
+                                                }));
+                                                const modalityIcons = [
+                                                    ...getModalityIcons(metadata, 'input'),
+                                                    ...getModalityIcons(metadata, 'output'),
+                                                ];
+                                                const uniqueModalityIcons = Array.from(
+                                                    new Map(modalityIcons.map((icon) => [icon.key, icon])).values()
+                                                ).map((icon) => ({ ...icon, id: `mod-${icon.key}` }));
+                                                const indicatorIcons = [...capabilityIcons, ...uniqueModalityIcons];
+                                                const contextTokens = formatTokens(metadata?.limit?.context);
+                                                const outputTokens = formatTokens(metadata?.limit?.output);
+
+                                                return (
+                                                    <DropdownMenuItem
+                                                        key={model.id}
+                                                        className="typography-meta"
+                                                        onSelect={() => {
+                                                            handleProviderAndModelChange(provider.id as string, model.id as string);
+                                                        }}
+                                                    >
+                                                        <div className="flex items-center gap-2">
+                                                            <div className="flex flex-col">
+                                                                <span className="font-medium">
+                                                                    {getModelDisplayName(model)}
+                                                                </span>
+                                                                 {metadata?.limit?.context || metadata?.limit?.output ? (
+                                                                     <span className="typography-meta text-muted-foreground">
+                                                                         {metadata?.limit?.context ? `${contextTokens} ctx` : ''}
+                                                                         {metadata?.limit?.context && metadata?.limit?.output ? ' • ' : ''}
+                                                                         {metadata?.limit?.output ? `${outputTokens} out` : ''}
+                                                                     </span>
+                                                                 ) : null}
+                                                            </div>
+                                                            <div className="ml-auto flex items-center gap-1">
+                                                                {indicatorIcons.map(({ id, icon: Icon, label }) => (
+                                                                    <span
+                                                                        key={id}
+                                                                        className="flex h-4 w-4 items-center justify-center text-muted-foreground"
+                                                                        aria-label={label}
+                                                                        role="img"
+                                                                        title={label}
+                                                                    >
+                                                                        <Icon className="h-3 w-3" />
+                                                                    </span>
+                                                                ))}
+                                                            </div>
+                                                        </div>
+                                                    </DropdownMenuItem>
+                                                    );
+                                                })}
+                                            </ScrollableOverlay>
+                                        </DropdownMenuSubContent>
+                                    </DropdownMenuSub>
+                                );
+                            })}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                ) : (
+                    <button
+                        type="button"
+                        onClick={() => setActiveMobilePanel('model')}
+                        onTouchStart={() => handleLongPressStart('model')}
+                        onTouchEnd={handleLongPressEnd}
+                        onTouchCancel={handleLongPressEnd}
+                        className={cn(
+                            'flex items-center gap-1.5 min-w-0 focus:outline-none',
+                            'cursor-pointer hover:opacity-70 max-w-full justify-end',
+                            buttonHeight
+                        )}
+                    >
+                        {currentProviderId ? (
+                            <ProviderLogo
+                                providerId={currentProviderId}
+                                className={cn(controlIconSize, 'flex-shrink-0')}
+                            />
+                        ) : (
+                            <RiPencilAiLine className={cn(controlIconSize, 'text-muted-foreground')} />
+                        )}
+                        <span className="typography-micro font-medium truncate min-w-0 max-w-[36vw] text-right">
+                            {getCurrentModelDisplayName()}
+                        </span>
+                    </button>
+                )}
+                {renderModelTooltipContent()}
+            </Tooltip>
+        );
+
+    const renderAgentTooltipContent = () => {
+        if (!currentAgent) {
+            return (
+                <TooltipContent align="start" sideOffset={8} className="max-w-[320px]">
+                    <div className="min-w-[200px] typography-meta text-muted-foreground">No agent selected.</div>
+                </TooltipContent>
+            );
+        }
+
+        const enabledTools = Object.entries(currentAgent.tools || {})
+            .filter(([, enabled]) => enabled)
+            .map(([tool]) => tool)
+            .sort();
+
+        const hasCustomPrompt = Boolean(currentAgent.prompt && currentAgent.prompt.trim().length > 0);
+        const hasModelConfig = currentAgent.model?.providerID && currentAgent.model?.modelID;
+        const hasTemperatureOrTopP = currentAgent.temperature !== undefined || currentAgent.topP !== undefined;
+
+        const getPermissionIcon = (permission?: string) => {
+            const mode: EditPermissionMode =
+                permission === 'full' || permission === 'allow' || permission === 'deny' ? permission : 'ask';
+            return renderEditModeIcon(mode, 'h-3.5 w-3.5');
+        };
+
+        const getPermissionLabel = (permission?: string) => {
+            if (permission === 'full') return 'Full';
+            if (permission === 'allow') return 'Allow';
+            if (permission === 'deny') return 'Deny';
+            return 'Ask';
+        };
+
+        return (
+            <TooltipContent align="start" sideOffset={8} className="max-w-[280px]">
+                <div className="flex min-w-[200px] flex-col gap-2.5">
+                    <div className="flex flex-col gap-0.5">
+                        <span className="typography-micro font-semibold text-foreground">
+                            {capitalizeAgentName(currentAgent.name)}
+                        </span>
+                        {currentAgent.description && (
+                            <span className="typography-meta text-muted-foreground">{currentAgent.description}</span>
+                        )}
+                    </div>
+
+                    <div className="flex flex-col gap-1">
+                        <span className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground/90">Mode</span>
+                        <span className="typography-meta text-foreground">
+                            {currentAgent.mode === 'primary' ? 'Primary' : currentAgent.mode === 'subagent' ? 'Subagent' : currentAgent.mode === 'all' ? 'All' : '—'}
+                        </span>
+                    </div>
+
+                    {(hasModelConfig || hasTemperatureOrTopP) && (
+                        <div className="flex flex-col gap-1">
+                            <span className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground/90">Model</span>
+                            {hasModelConfig ? (
+                                <span className="typography-meta text-foreground">
+                                    {currentAgent.model!.providerID} / {currentAgent.model!.modelID}
+                                </span>
+                            ) : (
+                                <span className="typography-meta text-muted-foreground">—</span>
+                            )}
+                            {hasTemperatureOrTopP && (
+                                <div className="flex flex-col gap-0.5 mt-0.5">
+                                    {currentAgent.temperature !== undefined && (
+                                        <div className="flex items-center justify-between gap-3">
+                                            <span className="typography-meta text-muted-foreground/80">Temperature</span>
+                                            <span className="typography-meta font-medium text-foreground">{currentAgent.temperature}</span>
+                                        </div>
+                                    )}
+                                    {currentAgent.topP !== undefined && (
+                                        <div className="flex items-center justify-between gap-3">
+                                            <span className="typography-meta text-muted-foreground/80">Top P</span>
+                                            <span className="typography-meta font-medium text-foreground">{currentAgent.topP}</span>
+                                        </div>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    )}
+
+                    <div className="flex flex-col gap-1">
+                        <span className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground/90">Tools</span>
+                        {enabledTools.length > 0 ? (
+                            <div className="flex flex-wrap gap-1 leading-tight">
+                                {enabledTools.map((tool) => (
+                                    <span
+                                        key={tool}
+                                        className="inline-flex items-center rounded-lg bg-muted/60 px-1.5 py-0.5 typography-meta text-foreground"
+                                    >
+                                        {tool}
+                                    </span>
+                                ))}
+                            </div>
+                        ) : (
+                            <span className="typography-meta text-muted-foreground">All enabled</span>
+                        )}
+                    </div>
+
+                    <div className="flex flex-col gap-1">
+                        <span className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground/90">Permissions</span>
+                        <div className="flex items-center gap-3">
+                            <span className="typography-meta text-muted-foreground/80 w-16">Edit</span>
+                            <div className="flex items-center gap-1.5">
+                                {getPermissionIcon(currentAgent.permission?.edit)}
+                                <span className="typography-meta font-medium text-foreground w-12">
+                                    {getPermissionLabel(currentAgent.permission?.edit)}
+                                </span>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-3">
+                            <span className="typography-meta text-muted-foreground/80 w-16">Bash</span>
+                            <div className="flex items-center gap-1.5">
+                                {getPermissionIcon(typeof currentAgent.permission?.bash === 'string' ? currentAgent.permission.bash : undefined)}
+                                <span className="typography-meta font-medium text-foreground w-12">
+                                    {getPermissionLabel(typeof currentAgent.permission?.bash === 'string' ? currentAgent.permission.bash : undefined)}
+                                </span>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-3">
+                            <span className="typography-meta text-muted-foreground/80 w-16">WebFetch</span>
+                            <div className="flex items-center gap-1.5">
+                                {getPermissionIcon(currentAgent.permission?.webfetch)}
+                                <span className="typography-meta font-medium text-foreground w-12">
+                                    {getPermissionLabel(currentAgent.permission?.webfetch)}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+
+                    {hasCustomPrompt && (
+                        <div className="flex items-center justify-between gap-3">
+                            <span className="typography-meta text-muted-foreground/80">Custom Prompt</span>
+                            <RiCheckboxCircleLine className="h-4 w-4 text-foreground" />
+                        </div>
+                    )}
+                </div>
+            </TooltipContent>
+        );
+    };
+
+    const renderAgentSelector = () => {
+        if (!isMobile) {
+            return (
+                <div className="flex items-center gap-2 min-w-0">
+                    <Tooltip delayDuration={1000}>
+                        <DropdownMenu>
+                            <TooltipTrigger asChild>
+                                <DropdownMenuTrigger asChild>
+                                    <div className={cn(
+                                        'flex items-center gap-1.5 transition-opacity cursor-pointer hover:opacity-70',
+                                        buttonHeight
+                                    )}>
+                                        <RiAiAgentLine
+                                            className={cn(
+                                                controlIconSize,
+                                                'flex-shrink-0',
+                                                currentAgentName ? '' : 'text-muted-foreground'
+                                            )}
+                                            style={currentAgentName ? { color: `var(${getAgentColor(currentAgentName).var})` } : undefined}
+                                        />
+                                        <span
+                                            className={cn(
+                                                controlTextSize,
+                                                'font-medium min-w-0 truncate'
+                                            )}
+                                            style={currentAgentName ? { color: `var(${getAgentColor(currentAgentName).var})` } : undefined}
+                                        >
+                                            {getAgentDisplayName()}
+                                        </span>
+                                    </div>
+                                </DropdownMenuTrigger>
+                            </TooltipTrigger>
+                            <DropdownMenuContent align="end">
+                                {agents.filter(agent => isPrimaryMode(agent.mode)).map((agent) => (
+                                    <DropdownMenuItem
+                                        key={agent.name}
+                                        className="typography-meta"
+                                        onSelect={() => handleAgentChange(agent.name)}
+                                    >
+                                        <div className="flex flex-col gap-0.5">
+                                            <div className="flex items-center gap-1.5">
+                                                <div className={cn(
+                                                    'h-1 w-1 rounded-full agent-dot',
+                                                    getAgentColor(agent.name).class
+                                                )} />
+                                                <span className="font-medium">{capitalizeAgentName(agent.name)}</span>
+                                            </div>
+                                            {agent.description && (
+                                                <span className="typography-meta text-muted-foreground max-w-[200px] ml-2.5 break-words">
+                                                    {agent.description}
+                                                </span>
+                                            )}
+                                        </div>
+                                    </DropdownMenuItem>
+                                ))}
+                                <DropdownMenuSeparator />
+                                <div className="flex flex-col gap-1 px-1 py-0.5">
+                                    <button
+                                        type="button"
+                                        disabled={editToggleDisabled}
+                                        onClick={() => {
+                                            if (editToggleDisabled) {
+                                                return;
+                                            }
+                                            setDesktopEditOptionsOpen((previous) => !previous);
+                                        }}
+                                        className={cn(
+                                            'flex w-full items-center justify-between gap-2 rounded-xl px-2 py-2 text-left',
+                                            'focus:outline-none focus-visible:ring-0',
+                                            editToggleDisabled ? 'cursor-not-allowed opacity-60' : undefined
+                                        )}
+                                        aria-expanded={desktopEditOptionsOpen}
+                                        aria-controls={desktopEditOptionsId}
+                                    >
+                                        <div className="flex flex-col text-left">
+                                            <span
+                                                className="typography-meta font-medium text-foreground"
+                                                style={{
+                                                    color: activeEditModeColors
+                                                        ? activeEditModeColors.text
+                                                        : 'var(--foreground)',
+                                                }}
+                                            >
+                                                {editPermissionMenuLabel}
+                                            </span>
+                                        </div>
+                                        <div className="flex items-center gap-2">
+                                            <span
+                                                className={cn(
+                                                    'flex items-center justify-center p-1',
+                                                    !activeEditModeColors && 'text-muted-foreground'
+                                                )}
+                                                style={
+                                                    activeEditModeColors
+                                                        ? {
+                                                              color: activeEditModeColors.text,
+                                                          }
+                                                        : undefined
+                                                }
+                                            >
+                                                {renderEditModeIcon(effectiveEditMode)}
+                                            </span>
+                                            <RiArrowDownSLine
+                                                className={cn(
+                                                    'h-3.5 w-3.5 transition-transform text-muted-foreground',
+                                                    desktopEditOptionsOpen ? 'rotate-180' : ''
+                                                )}
+                                            />
+                                        </div>
+                                    </button>
+                                    {desktopEditOptionsOpen && !editToggleDisabled && (
+                                        <div
+                                            id={desktopEditOptionsId}
+                                            className="flex flex-col gap-1 rounded-xl border border-border/40 px-2 py-2 bg-transparent"
+                                            role="group"
+                                            aria-label="Edit permission options"
+                                        >
+                                            {editPermissionOptions.map((option) => {
+                                                const isSelected = option.mode === effectiveEditMode;
+                                                const optionColors = getEditModeColors(option.mode);
+                                                return (
+                                                    <button
+                                                        key={option.mode}
+                                                        type="button"
+                                                        disabled={option.disabled}
+                                                        onClick={() => handleEditPermissionSelect(option.mode)}
+                                                        className={cn(
+                                                            'flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left',
+                                                            option.disabled ? 'cursor-not-allowed opacity-50' : 'focus:outline-none focus-visible:ring-0',
+                                                            isSelected ? 'bg-primary/10' : undefined
+                                                        )}
+                                                        style={isSelected && optionColors ? { backgroundColor: optionColors.background ?? undefined } : undefined}
+                                                    >
+                                                        {renderEditModeIcon(option.mode, editToggleIconClass)}
+                                                        <span
+                                                            className="typography-meta font-medium"
+                                                            style={{
+                                                                color: optionColors ? optionColors.text : 'var(--foreground)',
+                                                            }}
+                                                        >
+                                                            {option.label}
+                                                        </span>
+                                                    </button>
+                                                );
+                                            })}
+                                        </div>
+                                    )}
+                                </div>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                        {renderAgentTooltipContent()}
+                    </Tooltip>
+                </div>
+            );
+        }
+
+        return (
+            <button
+                type="button"
+                onClick={() => setActiveMobilePanel('agent')}
+                onTouchStart={() => handleLongPressStart('agent')}
+                onTouchEnd={handleLongPressEnd}
+                onTouchCancel={handleLongPressEnd}
+                className={cn(
+                    'flex items-center gap-1.5 transition-opacity min-w-0 focus:outline-none',
+                    buttonHeight,
+                    'cursor-pointer hover:opacity-70',
+                    isMobile && 'ml-1'
+                )}
+            >
+                <RiAiAgentLine
+                    className={cn(
+                        controlIconSize,
+                        'flex-shrink-0',
+                        currentAgentName ? '' : 'text-muted-foreground'
+                    )}
+                    style={currentAgentName ? { color: `var(${getAgentColor(currentAgentName).var})` } : undefined}
+                />
+                <span
+                    className={cn(controlTextSize, 'font-medium truncate', 'max-w-[36vw]', 'md:max-w-[20vw]')}
+                    style={currentAgentName ? { color: `var(${getAgentColor(currentAgentName).var})` } : undefined}
+                >
+                    {getAgentDisplayName()}
+                </span>
+            </button>
+        );
+    };
+
+    const inlineClassName = cn('flex items-center min-w-0', inlineGapClass, className);
+
+    return (
+        <>
+            <div className={inlineClassName}>
+                <div className={cn('flex items-center min-w-0', isMobile ? 'flex-1 min-w-0' : undefined)}>
+                    {renderModelSelector()}
+                </div>
+                <div className={cn('flex items-center min-w-0', inlineGapClass)}>
+                    {renderAgentSelector()}
+                </div>
+            </div>
+
+            {renderMobileModelPanel()}
+            {renderMobileAgentPanel()}
+            {renderMobileModelTooltip()}
+            {renderMobileAgentTooltip()}
+        </>
+    );
+
+};
diff --git a/packages/ui/src/components/chat/PermissionCard.tsx b/packages/ui/src/components/chat/PermissionCard.tsx
new file mode 100644
index 00000000..c9884a3d
--- /dev/null
+++ b/packages/ui/src/components/chat/PermissionCard.tsx
@@ -0,0 +1,525 @@
+import React from 'react';
+import { RiCheckLine, RiCloseLine, RiGlobalLine, RiPencilAiLine, RiQuestionLine, RiTerminalBoxLine, RiTimeLine, RiToolsLine } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import type { Permission, PermissionResponse } from '@/types/permission';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { useThemeSystem } from '@/contexts/useThemeSystem';
+import { generateSyntaxTheme } from '@/lib/theme/syntaxThemeGenerator';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+
+interface PermissionCardProps {
+  permission: Permission;
+  onResponse?: (response: 'once' | 'always' | 'reject') => void;
+}
+
+const getToolIcon = (toolName: string) => {
+  const iconClass = "h-3 w-3";
+  const tool = toolName.toLowerCase();
+
+  if (tool === 'edit' || tool === 'multiedit' || tool === 'str_replace' || tool === 'str_replace_based_edit_tool') {
+    return <RiPencilAiLine className={iconClass} />;
+  }
+
+  if (tool === 'bash' || tool === 'shell' || tool === 'cmd' || tool === 'terminal' || tool === 'shell_command') {
+    return <RiTerminalBoxLine className={iconClass} />;
+  }
+
+  if (tool === 'webfetch' || tool === 'fetch' || tool === 'curl' || tool === 'wget') {
+    return <RiGlobalLine className={iconClass} />;
+  }
+
+  return <RiToolsLine className={iconClass} />;
+};
+
+const getToolDisplayName = (toolName: string): string => {
+  const tool = toolName.toLowerCase();
+
+  if (tool === 'edit' || tool === 'multiedit' || tool === 'str_replace' || tool === 'str_replace_based_edit_tool') {
+    return 'edit';
+  }
+  if (tool === 'bash' || tool === 'shell' || tool === 'cmd' || tool === 'terminal' || tool === 'shell_command') {
+    return 'bash';
+  }
+  if (tool === 'webfetch' || tool === 'fetch' || tool === 'curl' || tool === 'wget') {
+    return 'webfetch';
+  }
+
+  return toolName;
+};
+
+export const PermissionCard: React.FC<PermissionCardProps> = ({
+  permission,
+  onResponse
+}) => {
+  const [isResponding, setIsResponding] = React.useState(false);
+  const [hasResponded, setHasResponded] = React.useState(false);
+  const { respondToPermission } = useSessionStore();
+  const { currentTheme } = useThemeSystem();
+  const syntaxTheme = React.useMemo(() => generateSyntaxTheme(currentTheme), [currentTheme]);
+
+  const handleResponse = async (response: PermissionResponse) => {
+    setIsResponding(true);
+
+    try {
+      await respondToPermission(permission.sessionID, permission.id, response);
+      setHasResponded(true);
+      onResponse?.(response);
+    } catch { /* ignored */ } finally {
+      setIsResponding(false);
+    }
+  };
+
+  if (hasResponded) {
+    return null;
+  }
+
+  const toolName = permission.type || 'Unknown Tool';
+  const tool = toolName.toLowerCase();
+
+  const getMeta = (key: string, fallback: string = ''): string => {
+    const val = permission.metadata[key];
+    return typeof val === 'string' ? val : (typeof val === 'number' ? String(val) : fallback);
+  };
+  const getMetaNum = (key: string): number | undefined => {
+    const val = permission.metadata[key];
+    return typeof val === 'number' ? val : undefined;
+  };
+  const getMetaBool = (key: string): boolean => {
+    const val = permission.metadata[key];
+    return Boolean(val);
+  };
+  const displayToolName = getToolDisplayName(toolName);
+
+  const renderToolContent = () => {
+
+    if (tool === 'bash' || tool === 'shell' || tool === 'shell_command') {
+      const command = getMeta('command') || getMeta('cmd') || getMeta('script');
+      const description = getMeta('description');
+      const workingDir = getMeta('cwd') || getMeta('working_directory') || getMeta('directory') || getMeta('path');
+      const timeout = getMetaNum('timeout');
+
+      const commandInTitle = permission.title === command;
+
+      return (
+        <>
+          {description && (
+            <div className="typography-meta text-muted-foreground mb-2">{description}</div>
+          )}
+          {workingDir && (
+            <div className="typography-meta text-muted-foreground mb-2">
+              <span className="font-semibold">Working Directory:</span> <code className="px-1 py-0.5 bg-muted/30 rounded">{workingDir}</code>
+            </div>
+          )}
+          {timeout && (
+            <div className="typography-meta text-muted-foreground mb-2">
+              <span className="font-semibold">Timeout:</span> {timeout}ms
+            </div>
+          )}
+          {}
+          {command && !commandInTitle && (
+            <div>
+              <SyntaxHighlighter
+                language="bash"
+                style={syntaxTheme}
+                PreTag="div"
+                customStyle={{
+                  margin: 0,
+                  padding: '0.5rem',
+                  fontSize: 'var(--text-meta)',
+                  lineHeight: '1.25rem',
+                  background: 'rgb(var(--muted) / 0.3)',
+                  borderRadius: '0.25rem',
+                  whiteSpace: 'pre-wrap',
+                  wordBreak: 'break-word',
+                  overflowWrap: 'break-word',
+                  overflow: 'visible'
+                }}
+                codeTagProps={{
+                  style: {
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                    overflowWrap: 'break-word'
+                  }
+                }}
+                wrapLongLines={true}
+              >
+                {command}
+              </SyntaxHighlighter>
+            </div>
+          )}
+        </>
+      );
+    }
+
+    if (tool === 'edit' || tool === 'multiedit' || tool === 'str_replace' || tool === 'str_replace_based_edit_tool') {
+      const filePath = getMeta('path') || getMeta('file_path') || getMeta('filename') || getMeta('filePath');
+      const oldContent = getMeta('old_str') || getMeta('oldString') || getMeta('old_content') || getMeta('before');
+      const newContent = getMeta('new_str') || getMeta('newString') || getMeta('new_content') || getMeta('after');
+      const changes = getMeta('changes') || getMeta('diff');
+      const replaceAll = getMetaBool('replace_all') || getMetaBool('replaceAll');
+
+      return (
+        <>
+          {filePath && (
+            <div className="mb-2">
+              <div className="typography-meta text-muted-foreground mb-1">File Path:</div>
+              <code className="typography-meta px-2 py-1 bg-muted/30 rounded block break-all">
+                {filePath}
+              </code>
+            </div>
+          )}
+          {replaceAll && (
+            <div className="typography-meta text-muted-foreground mb-2">
+              <span className="font-semibold">⚠️ Replace All Occurrences</span>
+            </div>
+          )}
+          {changes ? (
+            <div>
+              <div className="typography-meta text-muted-foreground mb-1">Changes:</div>
+              <ScrollableOverlay outerClassName="max-h-64" className="overflow-x-auto p-0">
+                <SyntaxHighlighter
+                  language="diff"
+                  style={syntaxTheme}
+                  customStyle={{
+                    margin: 0,
+                    padding: '0.5rem',
+                    fontSize: 'var(--text-meta)',
+                    lineHeight: '1.25rem',
+                    background: 'rgb(var(--muted) / 0.3)',
+                    borderRadius: '0.25rem'
+                  }}
+                  wrapLongLines={false}
+                >
+                  {changes}
+                </SyntaxHighlighter>
+              </ScrollableOverlay>
+            </div>
+          ) : (
+            <>
+              {oldContent && (
+                <div className="mb-2">
+                  <div className="typography-meta text-muted-foreground mb-1">Remove:</div>
+              <ScrollableOverlay outerClassName="max-h-32 border border-red-500/20 rounded bg-red-500/5 p-2" className="p-0">
+                <pre className="typography-meta font-mono text-red-600 dark:text-red-400 whitespace-pre-wrap break-all">
+                  {oldContent.length > 500 ? oldContent.substring(0, 500) + '...' : oldContent}
+                </pre>
+              </ScrollableOverlay>
+                </div>
+              )}
+              {newContent && (
+                <div>
+                  <div className="typography-meta text-muted-foreground mb-1">Replace with:</div>
+                  <ScrollableOverlay outerClassName="max-h-32 border border-green-500/20 rounded bg-green-500/5 p-2" className="p-0">
+                    <pre className="typography-meta font-mono text-green-600 dark:text-green-400 whitespace-pre-wrap break-all">
+                      {newContent.length > 500 ? newContent.substring(0, 500) + '...' : newContent}
+                    </pre>
+                  </ScrollableOverlay>
+                </div>
+              )}
+            </>
+          )}
+        </>
+      );
+    }
+
+    if (tool === 'webfetch' || tool === 'fetch' || tool === 'curl' || tool === 'wget') {
+      const url = getMeta('url') || getMeta('uri') || getMeta('endpoint');
+      const method = getMeta('method') || 'GET';
+      const headers = permission.metadata.headers && typeof permission.metadata.headers === 'object' ? (permission.metadata.headers as Record<string, unknown>) : undefined;
+      const body = getMeta('body') || getMeta('data') || getMeta('payload');
+      const timeout = getMetaNum('timeout');
+      const format = getMeta('format') || getMeta('responseType');
+
+      return (
+        <>
+          {url && (
+            <div className="mb-2">
+              <div className="typography-meta text-muted-foreground mb-1">Request:</div>
+              <div className="flex items-center gap-2">
+                <span className="typography-meta font-semibold px-1.5 py-0.5 bg-primary/20 text-primary rounded">
+                  {method}
+                </span>
+                <code className="typography-meta px-2 py-1 bg-muted/30 rounded flex-1 break-all">
+                  {url}
+                </code>
+              </div>
+            </div>
+          )}
+          {headers && Object.keys(headers).length > 0 && (
+            <div className="mb-2">
+              <div className="typography-meta text-muted-foreground mb-1">Headers:</div>
+              <ScrollableOverlay outerClassName="max-h-24" className="p-0">
+                <SyntaxHighlighter
+                  language="json"
+                  style={syntaxTheme}
+                  customStyle={{
+                    margin: 0,
+                    padding: '0.5rem',
+                    fontSize: 'var(--text-meta)',
+                    lineHeight: '1.25rem',
+                    background: 'rgb(var(--muted) / 0.3)',
+                    borderRadius: '0.25rem'
+                  }}
+                  wrapLongLines={true}
+                >
+                  {JSON.stringify(headers, null, 2)}
+                </SyntaxHighlighter>
+              </ScrollableOverlay>
+            </div>
+          )}
+          {body && (
+            <div className="mb-2">
+              <div className="typography-meta text-muted-foreground mb-1">Body:</div>
+              <ScrollableOverlay outerClassName="max-h-32" className="p-0">
+                <SyntaxHighlighter
+                  language={typeof body === 'object' ? 'json' : 'text'}
+                  style={syntaxTheme}
+                  customStyle={{
+                    margin: 0,
+                    padding: '0.5rem',
+                    fontSize: 'var(--text-meta)',
+                    lineHeight: '1.25rem',
+                    background: 'rgb(var(--muted) / 0.3)',
+                    borderRadius: '0.25rem'
+                  }}
+                  wrapLongLines={true}
+                >
+                  {typeof body === 'object' ? JSON.stringify(body, null, 2) : String(body)}
+                </SyntaxHighlighter>
+              </ScrollableOverlay>
+            </div>
+          )}
+          {(timeout || format) && (
+            <div className="typography-meta text-muted-foreground">
+              {timeout && <span>Timeout: {timeout}ms</span>}
+              {timeout && format && <span> • </span>}
+              {format && <span>Response format: {format}</span>}
+            </div>
+          )}
+        </>
+      );
+    }
+
+    const genericContent = getMeta('command') || getMeta('content') || getMeta('action') || getMeta('operation');
+    const description = getMeta('description');
+
+    return (
+      <>
+        {description && (
+          <div className="typography-meta text-muted-foreground mb-2">{description}</div>
+        )}
+        {genericContent && (
+          <div className="mb-2">
+            <div className="typography-meta text-muted-foreground mb-1">Action:</div>
+            <ScrollableOverlay outerClassName="max-h-32" className="p-0">
+              <pre className="typography-meta font-mono px-2 py-1 bg-muted/30 rounded whitespace-pre-wrap break-all">
+                {String(genericContent)}
+              </pre>
+            </ScrollableOverlay>
+          </div>
+        )}
+        {}
+        {Object.keys(permission.metadata).length > 0 && !genericContent && !description && (
+          <div>
+            <div className="typography-meta text-muted-foreground mb-1">Details:</div>
+            <ScrollableOverlay outerClassName="max-h-32" className="p-0">
+              <pre className="typography-meta font-mono px-2 py-1 bg-muted/30 rounded whitespace-pre-wrap break-all">
+                {JSON.stringify(permission.metadata, null, 2)}
+              </pre>
+            </ScrollableOverlay>
+          </div>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <div className="group w-full pt-0 pb-2">
+      <div className="chat-column">
+        <div className="-mt-1 border border-border/30 rounded-xl bg-muted/10">
+          {}
+          <div className="px-2 py-1.5 border-b border-border/20 bg-muted/5">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <RiQuestionLine className="h-3.5 w-3.5 text-yellow-500" />
+                <span className="typography-meta font-medium text-muted-foreground">
+                  Permission Required
+                </span>
+              </div>
+              <div className="flex items-center gap-1.5">
+                {getToolIcon(toolName)}
+                <span className="typography-meta text-muted-foreground font-medium">{displayToolName}</span>
+              </div>
+            </div>
+          </div>
+
+          {}
+          <div className="px-2 py-2">
+            {}
+            {(() => {
+
+              let primaryContent = '';
+              let primaryLanguage = 'text';
+              let shouldHighlight = false;
+
+              if (tool === 'bash' || tool === 'shell' || tool === 'shell_command') {
+                primaryContent = getMeta('command') || getMeta('cmd') || getMeta('script');
+                primaryLanguage = 'bash';
+                shouldHighlight = true;
+              }
+
+              else if (tool === 'edit' || tool === 'multiedit' || tool === 'str_replace' || tool === 'str_replace_based_edit_tool') {
+                primaryContent = getMeta('path') || getMeta('file_path') || getMeta('filename') || getMeta('filePath');
+                shouldHighlight = false;
+              }
+
+              else if (tool === 'webfetch' || tool === 'fetch') {
+                primaryContent = getMeta('url') || getMeta('uri') || getMeta('endpoint');
+                shouldHighlight = false;
+              }
+
+              const titleMatchesContent = permission.title === primaryContent;
+
+              if (titleMatchesContent && primaryContent && shouldHighlight) {
+                return (
+                  <div className="mb-3">
+                    <SyntaxHighlighter
+                      language={primaryLanguage}
+                      style={syntaxTheme}
+                      PreTag="div"
+                      customStyle={{
+                        margin: 0,
+                        padding: '0.5rem',
+                        fontSize: 'var(--text-meta)',
+                        lineHeight: '1.25rem',
+                        background: 'rgb(var(--muted) / 0.3)',
+                        borderRadius: '0.25rem',
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-word',
+                        overflowWrap: 'break-word',
+                        overflow: 'visible'
+                      }}
+                      codeTagProps={{
+                        style: {
+                          whiteSpace: 'pre-wrap',
+                          wordBreak: 'break-word',
+                          overflowWrap: 'break-word'
+                        }
+                      }}
+                      wrapLongLines={true}
+                    >
+                      {primaryContent}
+                    </SyntaxHighlighter>
+                  </div>
+                );
+              }
+
+              if (titleMatchesContent && primaryContent && !shouldHighlight) {
+                return (
+                  <div className="mb-3">
+                    <code className="typography-ui-label px-2 py-1 bg-muted/30 rounded block break-all">
+                      {primaryContent}
+                    </code>
+                  </div>
+                );
+              }
+
+              if (permission.title) {
+                return (
+                  <div className={cn(
+                    "typography-ui-label text-foreground mb-3",
+
+                    (shouldHighlight || primaryContent) && "font-mono"
+                  )}>
+                    {permission.title}
+                  </div>
+                );
+              }
+
+              return null;
+            })()}
+
+            {}
+            {renderToolContent()}
+          </div>
+
+          {}
+          <div className="px-2 pb-1.5 pt-1 flex items-center gap-1.5 border-t border-border/20">
+            <button
+              onClick={() => handleResponse('once')}
+              disabled={isResponding}
+              className={cn(
+                "flex items-center gap-1 px-2 py-1 typography-meta font-medium rounded transition-all",
+                "disabled:opacity-50 disabled:cursor-not-allowed"
+              )}
+              style={{
+                backgroundColor: 'rgb(var(--status-success) / 0.1)',
+                color: 'var(--status-success)'
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.backgroundColor = 'rgb(var(--status-success) / 0.2)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = 'rgb(var(--status-success) / 0.1)';
+              }}
+            >
+              <RiCheckLine className="h-3 w-3" />
+              Allow Once
+            </button>
+
+            <button
+              onClick={() => handleResponse('always')}
+              disabled={isResponding}
+              className={cn(
+                "flex items-center gap-1 px-2 py-1 typography-meta font-medium rounded transition-all",
+                "disabled:opacity-50 disabled:cursor-not-allowed"
+              )}
+              style={{
+                backgroundColor: 'rgb(var(--muted) / 0.5)',
+                color: 'var(--muted-foreground)'
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.backgroundColor = 'rgb(var(--muted) / 0.7)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = 'rgb(var(--muted) / 0.5)';
+              }}
+            >
+              <RiTimeLine className="h-3 w-3" />
+              Always Allow
+            </button>
+
+            <button
+              onClick={() => handleResponse('reject')}
+              disabled={isResponding}
+              className={cn(
+                "flex items-center gap-1 px-2 py-1 typography-meta font-medium rounded transition-all",
+                "disabled:opacity-50 disabled:cursor-not-allowed"
+              )}
+              style={{
+                backgroundColor: 'rgb(var(--status-error) / 0.1)',
+                color: 'var(--status-error)'
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.backgroundColor = 'rgb(var(--status-error) / 0.2)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = 'rgb(var(--status-error) / 0.1)';
+              }}
+            >
+              <RiCloseLine className="h-3 w-3" />
+              Deny
+            </button>
+
+            {isResponding && (
+              <div className="ml-auto typography-meta text-muted-foreground">
+                <div className="animate-spin h-3 w-3 border border-primary border-t-transparent rounded-full" />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/chat/PermissionRequest.tsx b/packages/ui/src/components/chat/PermissionRequest.tsx
new file mode 100644
index 00000000..43629a4b
--- /dev/null
+++ b/packages/ui/src/components/chat/PermissionRequest.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import { RiCheckLine, RiCloseLine, RiTimeLine } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import type { Permission, PermissionResponse } from '@/types/permission';
+import { useSessionStore } from '@/stores/useSessionStore';
+
+interface PermissionRequestProps {
+  permission: Permission;
+  onResponse?: (response: 'once' | 'always' | 'reject') => void;
+}
+
+export const PermissionRequest: React.FC<PermissionRequestProps> = ({
+  permission,
+  onResponse
+}) => {
+  const [isResponding, setIsResponding] = React.useState(false);
+  const [hasResponded, setHasResponded] = React.useState(false);
+  const { respondToPermission } = useSessionStore();
+
+  const handleResponse = async (response: PermissionResponse) => {
+    setIsResponding(true);
+
+    try {
+      await respondToPermission(permission.sessionID, permission.id, response);
+      setHasResponded(true);
+      onResponse?.(response);
+    } catch { /* ignored */ } finally {
+      setIsResponding(false);
+    }
+  };
+
+  if (hasResponded) {
+    return null;
+  }
+
+  const command = typeof permission.metadata.command === 'string'
+    ? permission.metadata.command
+    : permission.title;
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-2 min-w-0 flex-1">
+        <div className="min-w-0">
+          <span className="typography-ui-label font-medium text-muted-foreground">
+            Permission required:
+          </span>
+          <code className="ml-2 typography-meta bg-amber-100/50 dark:bg-amber-800/30 px-1.5 py-0.5 rounded font-mono text-amber-800 dark:text-amber-200">
+            {command}
+          </code>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-1.5 flex-shrink-0 ml-4">
+        <button
+          onClick={() => handleResponse('once')}
+          disabled={isResponding}
+          className={cn(
+            "flex items-center gap-1 px-2 py-1 typography-meta font-medium rounded border h-6",
+            "disabled:opacity-50 disabled:cursor-not-allowed"
+          )}
+          style={{
+            borderColor: 'var(--status-success)',
+            color: 'var(--status-success)'
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = 'var(--status-success-background)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = 'transparent';
+          }}
+        >
+          <RiCheckLine className="h-3 w-3" />
+          Once
+        </button>
+
+        <button
+          onClick={() => handleResponse('always')}
+          disabled={isResponding}
+          className={cn(
+            "flex items-center gap-1 px-2 py-1 typography-meta font-medium rounded border h-6",
+            "disabled:opacity-50 disabled:cursor-not-allowed"
+          )}
+          style={{
+            borderColor: 'var(--status-info)',
+            color: 'var(--status-info)'
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = 'var(--status-info-background)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = 'transparent';
+          }}
+        >
+          <RiTimeLine className="h-3 w-3" />
+          Always
+        </button>
+
+        <button
+          onClick={() => handleResponse('reject')}
+          disabled={isResponding}
+          className={cn(
+            "flex items-center gap-1 px-2 py-1 typography-meta font-medium rounded border h-6",
+            "disabled:opacity-50 disabled:cursor-not-allowed"
+          )}
+          style={{
+            borderColor: 'var(--status-error)',
+            color: 'var(--status-error)'
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = 'var(--status-error-background)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = 'transparent';
+          }}
+        >
+          <RiCloseLine className="h-3 w-3" />
+          Reject
+        </button>
+
+        {isResponding && (
+          <div className="ml-2 flex items-center">
+            <div className="animate-spin h-3 w-3 border-2 border-t-transparent rounded-full" style={{ borderColor: 'var(--loading-spinner)' }} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/packages/ui/src/components/chat/ServerFilePicker.tsx b/packages/ui/src/components/chat/ServerFilePicker.tsx
new file mode 100644
index 00000000..f40a0af5
--- /dev/null
+++ b/packages/ui/src/components/chat/ServerFilePicker.tsx
@@ -0,0 +1,559 @@
+import React from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { RiCloseLine, RiCodeLine, RiFileImageLine, RiFileTextLine, RiFolder6Line, RiSearchLine } from '@remixicon/react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn, truncatePathMiddle } from '@/lib/utils';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { opencodeClient } from '@/lib/opencode/client';
+import { useDeviceInfo } from '@/lib/device';
+import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
+import { useFileSearchStore } from '@/stores/useFileSearchStore';
+import { useDebouncedValue } from '@/hooks/useDebouncedValue';
+
+interface FileInfo {
+  name: string;
+  path: string;
+  type: 'file' | 'directory';
+  size?: number;
+  extension?: string;
+  relativePath?: string;
+}
+
+interface ServerFilePickerProps {
+  onFilesSelected: (files: FileInfo[]) => void;
+  multiSelect?: boolean;
+  children: React.ReactNode;
+}
+
+export const ServerFilePicker: React.FC<ServerFilePickerProps> = ({
+  onFilesSelected,
+  multiSelect = false,
+  children
+}) => {
+  const { isMobile } = useDeviceInfo();
+  const { currentDirectory } = useDirectoryStore();
+  const searchFiles = useFileSearchStore((state) => state.searchFiles);
+  const [open, setOpen] = React.useState(false);
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 200);
+  const [selectedFiles, setSelectedFiles] = React.useState<Set<string>>(new Set());
+  const [expandedDirs, setExpandedDirs] = React.useState<Set<string>>(new Set());
+  const [fileTree, setFileTree] = React.useState<FileInfo[]>([]);
+  const [searchResults, setSearchResults] = React.useState<FileInfo[]>([]);
+  const [searching, setSearching] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const [attaching, setAttaching] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const loadDirectory = React.useCallback(async (dirPath: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const tempClient = opencodeClient.getApiClient();
+      const response = await tempClient.file.list({
+        query: {
+          path: '.',
+          directory: dirPath
+        }
+      });
+
+      if (!response.data) {
+        setFileTree([]);
+        return;
+      }
+
+      const items = response.data
+        .filter((item: { name: string; type: string; size?: number; absolute?: string }) => !item.name.startsWith('.'))
+        .map((item: { name: string; type: string; size?: number; absolute?: string }) => {
+          const extension = item.type === 'file'
+            ? item.name.split('.').pop()?.toLowerCase()
+            : undefined;
+
+          return {
+            name: item.name,
+            path: item.absolute || `${dirPath}/${item.name}`,
+            type: item.type as 'file' | 'directory',
+            size: item.size || 0,
+            extension
+          };
+        })
+        .sort((a: FileInfo, b: FileInfo) => {
+          if (a.type !== b.type) {
+            return a.type === 'directory' ? -1 : 1;
+          }
+          return a.name.localeCompare(b.name);
+        });
+
+      setFileTree(items);
+    } catch {
+      setError('Failed to load directory contents');
+      setFileTree([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if ((open || mobileOpen) && currentDirectory) {
+      void loadDirectory(currentDirectory);
+    }
+  }, [open, mobileOpen, currentDirectory, loadDirectory]);
+
+  React.useEffect(() => {
+    if (!(open || mobileOpen) || !currentDirectory) {
+      setSearchResults([]);
+      setSearching(false);
+      return;
+    }
+
+    const trimmedQuery = debouncedSearchQuery.trim();
+    if (!trimmedQuery) {
+      setSearchResults([]);
+      setSearching(false);
+      return;
+    }
+
+    let cancelled = false;
+    setSearching(true);
+
+    searchFiles(currentDirectory, trimmedQuery, 150)
+      .then((hits) => {
+        if (cancelled) {
+          return;
+        }
+        const mappedHits: FileInfo[] = hits.map((hit) => ({
+          name: hit.name,
+          path: hit.path,
+          type: 'file',
+          extension: hit.extension,
+          relativePath: hit.relativePath,
+          size: 0,
+        }));
+        setSearchResults(mappedHits);
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setSearchResults([]);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setSearching(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [open, mobileOpen, currentDirectory, debouncedSearchQuery, searchFiles]);
+
+  React.useEffect(() => {
+    if (!open && !mobileOpen) {
+      setSelectedFiles(new Set());
+      setSearchQuery('');
+      setSearchResults([]);
+      setSearching(false);
+    }
+  }, [open, mobileOpen]);
+
+  const getFileIcon = (file: FileInfo) => {
+    if (file.type === 'directory') {
+      return expandedDirs.has(file.path) ? (
+        <RiFolder6Line className="h-3.5 w-3.5 text-primary/60" />
+      ) : (
+        <RiFolder6Line className="h-3.5 w-3.5 text-primary/60" />
+      );
+    }
+
+    const ext = file.extension?.toLowerCase();
+    switch (ext) {
+      case 'ts':
+      case 'tsx':
+      case 'js':
+      case 'jsx':
+      case 'html':
+      case 'css':
+      case 'scss':
+      case 'less':
+        return <RiCodeLine className="h-3.5 w-3.5 text-blue-500" />;
+      case 'json':
+        return <RiCodeLine className="h-3.5 w-3.5 text-yellow-500" />;
+      case 'md':
+      case 'mdx':
+        return <RiFileTextLine className="h-3.5 w-3.5 text-gray-500" />;
+      case 'png':
+      case 'jpg':
+      case 'jpeg':
+      case 'gif':
+      case 'svg':
+        return <RiFileImageLine className="h-3.5 w-3.5 text-green-500" />;
+      default:
+        return <RiFileTextLine className="h-3.5 w-3.5 text-muted-foreground" />;
+    }
+  };
+
+  const toggleDirectory = async (dirPath: string) => {
+    const isExpanded = expandedDirs.has(dirPath);
+
+    if (isExpanded) {
+      setExpandedDirs(prev => {
+        const next = new Set(prev);
+        next.delete(dirPath);
+        return next;
+      });
+    } else {
+      setExpandedDirs(prev => {
+        const next = new Set(prev);
+        next.add(dirPath);
+        return next;
+      });
+
+      try {
+        const tempClient = opencodeClient.getApiClient();
+        const response = await tempClient.file.list({
+          query: {
+            path: '.',
+            directory: dirPath
+          }
+        });
+
+        if (response.data) {
+          const subItems = response.data
+            .filter((item: { name: string; type: string; size?: number; absolute?: string }) => !item.name.startsWith('.'))
+            .map((item: { name: string; type: string; size?: number; absolute?: string }) => {
+              const extension = item.type === 'file'
+                ? item.name.split('.').pop()?.toLowerCase()
+                : undefined;
+
+              return {
+                name: item.name,
+                path: item.absolute || `${dirPath}/${item.name}`,
+                type: item.type as 'file' | 'directory',
+          size: 0,
+                extension
+              };
+            });
+
+          setFileTree(prev => {
+            const filtered = prev.filter(item => !item.path.startsWith(dirPath + '/'));
+            return [...filtered, ...subItems].sort((a, b) => {
+              const aDepth = a.path.split('/').length;
+              const bDepth = b.path.split('/').length;
+              if (aDepth !== bDepth) return aDepth - bDepth;
+              if (a.type !== b.type) return a.type === 'directory' ? -1 : 1;
+              return a.name.localeCompare(b.name);
+            });
+          });
+        }
+      } catch { /* ignored */ }
+    }
+  };
+
+  const toggleFileSelection = (filePath: string) => {
+    if (multiSelect) {
+      setSelectedFiles(prev => {
+        const next = new Set(prev);
+        if (next.has(filePath)) {
+          next.delete(filePath);
+        } else {
+          next.add(filePath);
+        }
+        return next;
+      });
+    } else {
+      setSelectedFiles(new Set([filePath]));
+    }
+  };
+
+  const handleConfirm = async () => {
+    const treeFileMap = new Map(
+      fileTree
+        .filter((file) => file.type === 'file')
+        .map((file) => [file.path, file])
+    );
+    const searchFileMap = new Map(searchResults.map((file) => [file.path, file]));
+
+    const selected = Array.from(selectedFiles)
+      .map((filePath) => treeFileMap.get(filePath) ?? searchFileMap.get(filePath))
+      .filter((file): file is FileInfo => Boolean(file));
+
+    setAttaching(true);
+    try {
+      await onFilesSelected(selected);
+      setSelectedFiles(new Set());
+      setOpen(false);
+      setMobileOpen(false);
+    } finally {
+      setAttaching(false);
+    }
+  };
+
+  const rootItems = React.useMemo(() => {
+    if (!currentDirectory) {
+      return [];
+    }
+
+    return fileTree.filter((item) => {
+      const itemDir = item.path.substring(0, item.path.lastIndexOf('/'));
+      return itemDir === currentDirectory;
+    });
+  }, [fileTree, currentDirectory]);
+
+  const isSearchActive = searchQuery.trim().length > 0;
+
+  const getChildItems = (parentPath: string) => {
+    return fileTree.filter(item => {
+      const itemDir = item.path.substring(0, item.path.lastIndexOf('/'));
+      return itemDir === parentPath;
+    });
+  };
+
+  const getRelativePath = (fullPath: string) => {
+    if (currentDirectory && fullPath.startsWith(currentDirectory)) {
+      const relativePath = fullPath.substring(currentDirectory.length);
+      return relativePath.startsWith('/') ? relativePath.substring(1) : relativePath;
+    }
+    return fullPath.split('/').pop() || fullPath;
+  };
+
+  const renderFileItem = (file: FileInfo, level: number) => {
+    const rawLabel = isSearchActive
+      ? file.relativePath || getRelativePath(file.path)
+      : file.name;
+    const shouldCompact = isSearchActive && rawLabel.includes('/') && rawLabel.length > 45;
+    const displayLabel = shouldCompact
+      ? truncatePathMiddle(rawLabel, { maxLength: isMobile ? 42 : 48 })
+      : rawLabel;
+
+    const row = (
+      <div
+        className={cn(
+          "flex w-full items-center justify-start gap-1 px-2 py-1.5 rounded hover:bg-accent cursor-pointer typography-ui-label text-foreground text-left",
+          file.type === 'file' && selectedFiles.has(file.path) && "bg-primary/10"
+        )}
+        style={{ paddingLeft: `${level * 12}px` }}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (file.type === 'file') {
+            toggleFileSelection(file.path);
+          }
+        }}
+      >
+        <div className="flex flex-1 items-center justify-start gap-1">
+          <span className="text-muted-foreground">{getFileIcon(file)}</span>
+          <span className="flex-1 truncate text-foreground text-left max-w-[360px]" aria-label={rawLabel}>
+            {displayLabel}
+          </span>
+        </div>
+        {file.type === 'file' && selectedFiles.has(file.path) && (
+          <div className="h-1.5 w-1.5 rounded-full bg-primary" />
+        )}
+      </div>
+    );
+
+    if (!shouldCompact) {
+      return React.cloneElement(row, { key: file.path });
+    }
+
+    return (
+      <Tooltip key={file.path} delayDuration={120}>
+        <TooltipTrigger asChild>{row}</TooltipTrigger>
+        <TooltipContent side="right" className="max-w-xs">
+          <span className="typography-meta text-foreground/80 whitespace-pre-wrap break-all">
+            {rawLabel}
+          </span>
+        </TooltipContent>
+      </Tooltip>
+    );
+  };
+
+  const renderFileTree = (file: FileInfo, level: number): React.ReactNode => {
+    const isDirectory = file.type === 'directory';
+    const children = isDirectory ? getChildItems(file.path) : [];
+    const isExpanded = expandedDirs.has(file.path);
+
+    return (
+      <div key={file.path}>
+        <button
+          type="button"
+        className={cn(
+            'flex w-full items-center justify-start gap-1 px-2 py-1.5 rounded cursor-pointer typography-ui-label text-foreground text-left',
+            !isDirectory && selectedFiles.has(file.path) && 'bg-primary/10'
+          )}
+          style={{ paddingLeft: `${level * 12}px` }}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (isDirectory) {
+              toggleDirectory(file.path);
+            } else {
+              toggleFileSelection(file.path);
+            }
+          }}
+        >
+          <span className="text-muted-foreground">{getFileIcon(file)}</span>
+          <span className="flex-1 truncate text-foreground text-left">
+            {file.name}
+          </span>
+          {!isDirectory && selectedFiles.has(file.path) && (
+            <div className="h-1.5 w-1.5 rounded-full bg-primary" />
+          )}
+        </button>
+
+        {isDirectory && isExpanded && children.length > 0 && (
+          <div>
+            {children.map((child) => renderFileTree(child, level + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const summaryLabel = selectedFiles.size > 0
+    ? `${selectedFiles.size} file${selectedFiles.size !== 1 ? 's' : ''} selected`
+    : 'No files selected';
+
+  const summarySection = (
+    <div className="flex items-center justify-between px-3 py-2 shrink-0">
+      <div className="typography-meta text-muted-foreground">{summaryLabel}</div>
+      <Button
+        size="sm"
+        onClick={handleConfirm}
+        disabled={selectedFiles.size === 0 || attaching}
+        className="h-6 typography-meta"
+      >
+        {attaching ? 'Attaching...' : 'Attach Files'}
+      </Button>
+    </div>
+  );
+
+  const scrollAreaClass = isMobile ? 'flex-1 min-h-[240px]' : 'h-[300px]';
+
+  const pickerBody = (
+    <>
+      <div className="px-3 py-2 border-b shrink-0">
+        <div className="font-medium typography-ui-label text-foreground">Select Project Files</div>
+      </div>
+      <div className="px-3 py-2 border-b shrink-0">
+        <div className="relative">
+          <RiSearchLine className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+          <Input
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search files..."
+            className="pl-7 h-6 typography-ui-label"
+            onClick={(e) => e.stopPropagation()}
+          />
+          {searchQuery && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                setSearchQuery('');
+              }}
+              className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 hover:bg-accent rounded"
+            >
+              <RiCloseLine className="h-3 w-3"/>
+            </button>
+          )}
+        </div>
+      </div>
+      <ScrollArea className={scrollAreaClass}>
+        {loading && (
+          <div className="flex items-center justify-center py-8">
+            <div className="typography-ui-label text-muted-foreground">Loading files...</div>
+          </div>
+        )}
+
+        {error && (
+          <div className="flex items-center justify-center py-8">
+            <div className="typography-ui-label text-destructive">{error}</div>
+          </div>
+        )}
+
+        {!loading && !error && (
+          <div className="py-1 px-2">
+            {isSearchActive ? (
+              searching ? (
+                <div className="px-3 py-4 typography-ui-label text-muted-foreground text-center">
+                  Searching files…
+                </div>
+              ) : (
+                searchResults.map((file) => renderFileItem(file, 0))
+              )
+            ) : (
+              rootItems.map((file) => renderFileTree(file, 0))
+            )}
+
+            {!isSearchActive && rootItems.length === 0 && (
+              <div className="px-3 py-4 typography-ui-label text-muted-foreground text-center">
+                No files in this directory
+              </div>
+            )}
+
+            {isSearchActive && !searching && searchResults.length === 0 && (
+              <div className="px-3 py-4 typography-ui-label text-muted-foreground text-center">
+                No files found
+              </div>
+            )}
+          </div>
+        )}
+      </ScrollArea>
+    </>
+  );
+
+  const mobileTrigger = (
+    <span
+      className="inline-flex cursor-pointer"
+      onClick={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setMobileOpen(true);
+      }}
+    >
+      {children}
+    </span>
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        {mobileTrigger}
+        <MobileOverlayPanel
+          open={mobileOpen}
+          onClose={() => setMobileOpen(false)}
+          title="Select Project Files"
+          footer={summarySection}
+        >
+          <div className="flex flex-col gap-0">{pickerBody}</div>
+        </MobileOverlayPanel>
+      </>
+    );
+  }
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        {children}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="w-[520px] p-0 overflow-hidden flex flex-col ml-16"
+        align="center"
+        sideOffset={5}
+      >
+        {pickerBody}
+        <DropdownMenuSeparator />
+        {summarySection}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/packages/ui/src/components/chat/StreamingTextDiff.tsx b/packages/ui/src/components/chat/StreamingTextDiff.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/ui/src/components/chat/hooks/useTurnGrouping.ts b/packages/ui/src/components/chat/hooks/useTurnGrouping.ts
new file mode 100644
index 00000000..153ef46b
--- /dev/null
+++ b/packages/ui/src/components/chat/hooks/useTurnGrouping.ts
@@ -0,0 +1,390 @@
+import React from 'react';
+import type { Message, Part } from '@opencode-ai/sdk';
+import { useCurrentSessionActivity } from '@/hooks/useSessionActivity';
+
+export interface ChatMessageEntry {
+    info: Message;
+    parts: Part[];
+}
+
+export interface Turn {
+    turnId: string;
+    userMessage: ChatMessageEntry;
+    assistantMessages: ChatMessageEntry[];
+}
+
+export type TurnActivityKind = 'tool' | 'reasoning' | 'justification';
+
+export interface TurnActivityPart {
+    id: string;
+    turnId: string;
+    messageId: string;
+    kind: TurnActivityKind;
+    part: Part;
+    endedAt?: number;
+}
+
+interface TurnDiffStats {
+    additions: number;
+    deletions: number;
+    files: number;
+}
+
+export interface TurnGroupingContext {
+    turnId: string;
+    isFirstAssistantInTurn: boolean;
+
+    summaryBody?: string;
+
+    activityParts: TurnActivityPart[];
+    hasTools: boolean;
+    hasReasoning: boolean;
+    diffStats?: TurnDiffStats;
+
+    isWorking: boolean;
+    isGroupExpanded: boolean;
+
+    previewedPartIds: Set<string>;
+    toggleGroup: () => void;
+    markPartsPreviewed: (partIds: string[]) => void;
+}
+
+interface TurnUiState {
+    isExpanded: boolean;
+    previewedPartIds: Set<string>;
+}
+
+interface TurnActivityInfo {
+    activityParts: TurnActivityPart[];
+    hasTools: boolean;
+    hasReasoning: boolean;
+    summaryBody?: string;
+    diffStats?: TurnDiffStats;
+}
+
+const ENABLE_TEXT_JUSTIFICATION_ACTIVITY = false;
+
+export const detectTurns = (messages: ChatMessageEntry[]): Turn[] => {
+    const result: Turn[] = [];
+    let currentTurn: Turn | null = null;
+
+    messages.forEach((msg) => {
+        const role = (msg.info as { clientRole?: string | null | undefined }).clientRole ?? msg.info.role;
+
+        if (role === 'user') {
+            currentTurn = {
+                turnId: msg.info.id,
+                userMessage: msg,
+                assistantMessages: [],
+            };
+            result.push(currentTurn);
+        } else if (role === 'assistant' && currentTurn) {
+            currentTurn.assistantMessages.push(msg);
+        }
+    });
+
+    return result;
+};
+
+const extractFinalAssistantText = (turn: Turn): string | undefined => {
+
+    for (const assistantMsg of turn.assistantMessages) {
+
+        for (const part of assistantMsg.parts) {
+            if (part.type === 'step-finish') {
+                const finishReason = (part as { reason?: string | null | undefined }).reason;
+                const infoFinish = (assistantMsg.info as { finish?: string | null | undefined }).finish;
+
+                if (finishReason === 'stop' || infoFinish === 'stop') {
+
+                    const textPart = assistantMsg.parts.find(p => p.type === 'text');
+                    if (textPart) {
+                        const textContent = (textPart as { text?: string | null | undefined }).text ??
+                                          (textPart as { content?: string | null | undefined }).content;
+                        if (typeof textContent === 'string' && textContent.trim().length > 0) {
+                            return textContent;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return undefined;
+};
+
+const getTurnActivityInfo = (turn: Turn): TurnActivityInfo => {
+    interface SummaryDiff {
+        additions?: number | null | undefined;
+        deletions?: number | null | undefined;
+        file?: string | null | undefined;
+    }
+    interface UserSummaryPayload {
+        body?: string | null | undefined;
+        diffs?: SummaryDiff[] | null | undefined;
+    }
+
+    const summaryBody = extractFinalAssistantText(turn);
+
+    let diffStats: TurnDiffStats | undefined;
+
+    const summary = (turn.userMessage.info as { summary?: UserSummaryPayload | null | undefined }).summary;
+    const diffs = summary?.diffs;
+    if (Array.isArray(diffs) && diffs.length > 0) {
+        let additions = 0;
+        let deletions = 0;
+        let files = 0;
+
+        diffs.forEach((diff) => {
+            if (!diff) {
+                return;
+            }
+            const diffAdditions = typeof diff.additions === 'number' ? diff.additions : 0;
+            const diffDeletions = typeof diff.deletions === 'number' ? diff.deletions : 0;
+
+            if (diffAdditions !== 0 || diffDeletions !== 0) {
+                files += 1;
+            }
+            additions += diffAdditions;
+            deletions += diffDeletions;
+        });
+
+        if (files > 0) {
+            diffStats = {
+                additions,
+                deletions,
+                files,
+            };
+        }
+    }
+
+    let hasTools = false;
+    let hasReasoning = false;
+
+    turn.assistantMessages.forEach((msg) => {
+        msg.parts.forEach((part) => {
+            if (part.type === 'tool') {
+                hasTools = true;
+            } else if (part.type === 'reasoning') {
+                hasReasoning = true;
+            }
+        });
+    });
+
+    const activityParts: TurnActivityPart[] = [];
+    let syntheticIdCounter = 0;
+
+    turn.assistantMessages.forEach((msg) => {
+        const messageId = msg.info.id;
+        const hasStopFinishInMessage = ENABLE_TEXT_JUSTIFICATION_ACTIVITY
+            ? msg.parts.some((part) => {
+                  if (part.type !== 'step-finish') return false;
+                  const reason = (part as { reason?: string | null | undefined }).reason;
+                  return reason === 'stop';
+              })
+            : false;
+
+        msg.parts.forEach((part) => {
+            const baseId =
+                (typeof part.id === 'string' && part.id.trim().length > 0)
+                    ? part.id
+                    : `${messageId}-activity-${syntheticIdCounter++}`;
+
+            if (part.type === 'tool') {
+                const state = (part as { state?: { time?: { end?: number | null | undefined } | null | undefined } | null | undefined }).state;
+                const time = state?.time;
+                const end = typeof time?.end === 'number' ? time.end : undefined;
+
+                activityParts.push({
+                    id: baseId,
+                    turnId: turn.turnId,
+                    messageId,
+                    kind: 'tool',
+                    part,
+                    endedAt: end,
+                });
+                return;
+            }
+
+            if (part.type === 'reasoning') {
+                const text = (part as { text?: string | null | undefined; content?: string | null | undefined }).text
+                    ?? (part as { text?: string | null | undefined; content?: string | null | undefined }).content;
+                if (typeof text !== 'string' || text.trim().length === 0) {
+                    return;
+                }
+                const time = (part as { time?: { end?: number | null | undefined } | null | undefined }).time;
+                const end = typeof time?.end === 'number' ? time.end : undefined;
+
+                activityParts.push({
+                    id: baseId,
+                    turnId: turn.turnId,
+                    messageId,
+                    kind: 'reasoning',
+                    part,
+                    endedAt: end,
+                });
+                return;
+            }
+
+            if (
+                ENABLE_TEXT_JUSTIFICATION_ACTIVITY &&
+                part.type === 'text' &&
+                (hasTools || hasReasoning) &&
+                !hasStopFinishInMessage
+            ) {
+                const text =
+                    (part as { text?: string | null | undefined; content?: string | null | undefined }).text ??
+                    (part as { text?: string | null | undefined; content?: string | null | undefined }).content;
+                if (typeof text !== 'string' || text.trim().length === 0) {
+                    return;
+                }
+                const time = (part as { time?: { end?: number | null | undefined } | null | undefined }).time;
+                const end = typeof time?.end === 'number' ? time.end : undefined;
+
+                activityParts.push({
+                    id: baseId,
+                    turnId: turn.turnId,
+                    messageId,
+                    kind: 'justification',
+                    part,
+                    endedAt: end,
+                });
+            }
+        });
+    });
+
+    return {
+        activityParts,
+        hasTools,
+        hasReasoning,
+        summaryBody,
+        diffStats,
+    };
+};
+
+interface UseTurnGroupingResult {
+    turns: Turn[];
+    getTurnForMessage: (messageId: string) => Turn | undefined;
+    getContextForMessage: (messageId: string) => TurnGroupingContext | undefined;
+}
+
+export const useTurnGrouping = (messages: ChatMessageEntry[]): UseTurnGroupingResult => {
+    const { isWorking: sessionIsWorking } = useCurrentSessionActivity();
+
+    const turns = React.useMemo(() => detectTurns(messages), [messages]);
+
+    const lastTurnId = React.useMemo(() => {
+        if (turns.length === 0) return null;
+        return turns[turns.length - 1]!.turnId;
+    }, [turns]);
+
+    const messageToTurn = React.useMemo(() => {
+        const map = new Map<string, Turn>();
+        turns.forEach((turn) => {
+            map.set(turn.userMessage.info.id, turn);
+            turn.assistantMessages.forEach((msg) => {
+                map.set(msg.info.id, turn);
+            });
+        });
+        return map;
+    }, [turns]);
+
+    const turnActivityInfo = React.useMemo(() => {
+        const map = new Map<string, TurnActivityInfo>();
+        turns.forEach((turn) => {
+            map.set(turn.turnId, getTurnActivityInfo(turn));
+        });
+        return map;
+    }, [turns]);
+
+    const [turnUiStates, setTurnUiStates] = React.useState<Map<string, TurnUiState>>(
+        () => new Map()
+    );
+
+    const getOrCreateTurnState = React.useCallback(
+        (turnId: string): TurnUiState => {
+            const existing = turnUiStates.get(turnId);
+            if (existing) return existing;
+            return { isExpanded: false, previewedPartIds: new Set<string>() };
+        },
+        [turnUiStates]
+    );
+
+    const toggleGroup = React.useCallback((turnId: string) => {
+        setTurnUiStates((prev) => {
+            const next = new Map(prev);
+            const current = next.get(turnId) ?? { isExpanded: false, previewedPartIds: new Set<string>() };
+            next.set(turnId, { ...current, isExpanded: !current.isExpanded });
+            return next;
+        });
+    }, []);
+
+    const markPartsPreviewedInternal = React.useCallback((turnId: string, partIds: string[]) => {
+        if (partIds.length === 0) return;
+
+        setTurnUiStates((prev) => {
+            const next = new Map(prev);
+            const state = next.get(turnId) ?? { isExpanded: false, previewedPartIds: new Set<string>() };
+            const newPreviewed = new Set(state.previewedPartIds);
+            partIds.forEach((id) => {
+                if (id && id.trim().length > 0) {
+                    newPreviewed.add(id);
+                }
+            });
+            next.set(turnId, { ...state, previewedPartIds: newPreviewed });
+            return next;
+        });
+    }, []);
+
+    const getTurnForMessage = React.useCallback(
+        (messageId: string): Turn | undefined => {
+            return messageToTurn.get(messageId);
+        },
+        [messageToTurn]
+    );
+
+    const getContextForMessage = React.useCallback(
+        (messageId: string): TurnGroupingContext | undefined => {
+            const turn = messageToTurn.get(messageId);
+            if (!turn) return undefined;
+
+            const isAssistantMessage = turn.assistantMessages.some(
+                (msg) => msg.info.id === messageId
+            );
+            if (!isAssistantMessage) return undefined;
+
+            const activityInfo = turnActivityInfo.get(turn.turnId);
+            const activityParts = activityInfo?.activityParts ?? [];
+            const hasTools = Boolean(activityInfo?.hasTools);
+            const hasReasoning = Boolean(activityInfo?.hasReasoning);
+            const summaryBody = activityInfo?.summaryBody;
+            const diffStats = activityInfo?.diffStats;
+
+            const firstAssistantId = turn.assistantMessages[0]?.info.id;
+            const isFirstAssistantInTurn = messageId === firstAssistantId;
+
+            const uiState = getOrCreateTurnState(turn.turnId);
+            const isTurnWorking = sessionIsWorking && lastTurnId === turn.turnId;
+
+            return {
+                turnId: turn.turnId,
+                isFirstAssistantInTurn,
+                summaryBody,
+                activityParts,
+                hasTools,
+                hasReasoning,
+                diffStats,
+                isWorking: isTurnWorking,
+                isGroupExpanded: uiState.isExpanded,
+                previewedPartIds: uiState.previewedPartIds,
+                toggleGroup: () => toggleGroup(turn.turnId),
+                markPartsPreviewed: (partIds: string[]) => markPartsPreviewedInternal(turn.turnId, partIds),
+            };
+        }, [getOrCreateTurnState, lastTurnId, sessionIsWorking, markPartsPreviewedInternal, messageToTurn, toggleGroup, turnActivityInfo]
+    );
+
+    return {
+        turns,
+        getTurnForMessage,
+        getContextForMessage,
+    };
+};
diff --git a/packages/ui/src/components/chat/message/DiffViewToggle.tsx b/packages/ui/src/components/chat/message/DiffViewToggle.tsx
new file mode 100644
index 00000000..dc883099
--- /dev/null
+++ b/packages/ui/src/components/chat/message/DiffViewToggle.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { RiAlignJustify, RiLayoutColumnLine } from '@remixicon/react';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+export type DiffViewMode = 'side-by-side' | 'unified';
+
+interface DiffViewToggleProps {
+    mode: DiffViewMode;
+    onModeChange: (mode: DiffViewMode) => void;
+    className?: string;
+}
+
+export const DiffViewToggle: React.FC<DiffViewToggleProps> = ({ mode, onModeChange, className }) => {
+    const handleClick = React.useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            event.stopPropagation();
+            onModeChange(mode === 'side-by-side' ? 'unified' : 'side-by-side');
+        },
+        [mode, onModeChange]
+    );
+
+    return (
+        <Button
+            size="sm"
+            variant="ghost"
+            className={cn('h-5 w-5 p-0 opacity-60 hover:opacity-100', className)}
+            onClick={handleClick}
+            title={mode === 'side-by-side' ? 'Switch to unified view' : 'Switch to side-by-side view'}
+        >
+            {mode === 'side-by-side' ? (
+                <RiAlignJustify className="h-3 w-3" />
+            ) : (
+                <RiLayoutColumnLine className="h-3 w-3" />
+            )}
+        </Button>
+    );
+};
diff --git a/packages/ui/src/components/chat/message/FadeInOnReveal.tsx b/packages/ui/src/components/chat/message/FadeInOnReveal.tsx
new file mode 100644
index 00000000..7087d83e
--- /dev/null
+++ b/packages/ui/src/components/chat/message/FadeInOnReveal.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface FadeInOnRevealProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+const FADE_ANIMATION_ENABLED = true;
+
+export const FadeInOnReveal: React.FC<FadeInOnRevealProps> = ({ children, className }) => {
+    const [visible, setVisible] = React.useState(false);
+
+    React.useEffect(() => {
+        if (!FADE_ANIMATION_ENABLED) {
+            return;
+        }
+
+        let frame: number | null = null;
+
+        const enable = () => setVisible(true);
+
+        if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+            frame = window.requestAnimationFrame(enable);
+        } else {
+            enable();
+        }
+
+        return () => {
+            if (
+                frame !== null &&
+                typeof window !== 'undefined' &&
+                typeof window.cancelAnimationFrame === 'function'
+            ) {
+                window.cancelAnimationFrame(frame);
+            }
+        };
+    }, []);
+
+    if (!FADE_ANIMATION_ENABLED) {
+        return <>{children}</>;
+    }
+
+    return (
+        <div
+            className={cn(
+                'w-full transition-all duration-300 ease-out',
+                visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2',
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+};
+
diff --git a/packages/ui/src/components/chat/message/MessageBody.tsx b/packages/ui/src/components/chat/message/MessageBody.tsx
new file mode 100644
index 00000000..d970b9ec
--- /dev/null
+++ b/packages/ui/src/components/chat/message/MessageBody.tsx
@@ -0,0 +1,1038 @@
+import React from 'react';
+import type { Part } from '@opencode-ai/sdk';
+
+import AssistantTextPart from './parts/AssistantTextPart';
+import UserTextPart from './parts/UserTextPart';
+import ReasoningPart from './parts/ReasoningPart';
+import ToolPart from './parts/ToolPart';
+import ProgressiveGroup from './parts/ProgressiveGroup';
+import MigratingPart from './parts/MigratingPart';
+import { MessageFilesDisplay } from '../FileAttachment';
+import type { ToolPart as ToolPartType } from '@opencode-ai/sdk';
+import type { StreamPhase, ToolPopupContent, AgentMentionInfo } from './types';
+import type { TurnGroupingContext } from '../hooks/useTurnGrouping';
+import { cn } from '@/lib/utils';
+import { isEmptyTextPart, extractTextContent } from './partUtils';
+import { FadeInOnReveal } from './FadeInOnReveal';
+import { Button } from '@/components/ui/button';
+import { RiCheckLine, RiFileCopyLine } from '@remixicon/react';
+import type { ContentChangeReason } from '@/hooks/useChatScrollManager';
+import { SimpleMarkdownRenderer } from '../MarkdownRenderer';
+import { useMessageStore } from '@/stores/messageStore';
+import { useSessionStore } from '@/stores/sessionStore';
+
+const useMigrationTimer = (
+    turnGroupingContext: TurnGroupingContext | undefined,
+    previewablePartIds: Set<string>
+): { isAnimating: boolean } => {
+    const timerRef = React.useRef<number | null>(null);
+    const animationTimerRef = React.useRef<number | null>(null);
+    const [isAnimating, setIsAnimating] = React.useState(false);
+
+    const contextRef = React.useRef(turnGroupingContext);
+    contextRef.current = turnGroupingContext;
+    const partIdsRef = React.useRef(previewablePartIds);
+    partIdsRef.current = previewablePartIds;
+
+    const timerStartedRef = React.useRef(false);
+
+    const hasPreviewableParts = previewablePartIds.size > 0;
+
+    React.useEffect(() => {
+        if (!turnGroupingContext) return;
+        if (!turnGroupingContext.isWorking) return;
+        if (turnGroupingContext.isGroupExpanded) return;
+        if (!hasPreviewableParts) return;
+        if (timerStartedRef.current) return;
+
+        timerStartedRef.current = true;
+
+        timerRef.current = window.setTimeout(() => {
+            timerRef.current = null;
+            setIsAnimating(true);
+
+            animationTimerRef.current = window.setTimeout(() => {
+                animationTimerRef.current = null;
+                setIsAnimating(false);
+                const context = contextRef.current;
+                if (!context) {
+                    return;
+                }
+                const idsToPreview = Array.from(partIdsRef.current);
+                if (idsToPreview.length > 0) {
+                    context.markPartsPreviewed(idsToPreview);
+                }
+            }, 300);
+        }, 1000);
+    }, [hasPreviewableParts, turnGroupingContext]);
+
+    React.useEffect(() => {
+        if (!turnGroupingContext) return;
+        if (!turnGroupingContext.isWorking || turnGroupingContext.isGroupExpanded || !hasPreviewableParts) {
+            if (timerRef.current) {
+                window.clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+            if (animationTimerRef.current) {
+                window.clearTimeout(animationTimerRef.current);
+                animationTimerRef.current = null;
+            }
+            setIsAnimating(false);
+            timerStartedRef.current = false;
+        }
+    }, [hasPreviewableParts, turnGroupingContext]);
+
+    React.useEffect(() => {
+        return () => {
+            if (timerRef.current) window.clearTimeout(timerRef.current);
+            if (animationTimerRef.current) window.clearTimeout(animationTimerRef.current);
+        };
+    }, []);
+
+    return { isAnimating };
+};
+
+interface MessageBodyProps {
+    messageId: string;
+    parts: Part[];
+    isUser: boolean;
+    isMessageCompleted: boolean;
+
+    syntaxTheme: { [key: string]: React.CSSProperties };
+
+    isMobile: boolean;
+    hasTouchInput?: boolean;
+    copiedCode: string | null;
+    onCopyCode: (code: string) => void;
+    expandedTools: Set<string>;
+    onToggleTool: (toolId: string) => void;
+    onShowPopup: (content: ToolPopupContent) => void;
+    streamPhase: StreamPhase;
+    allowAnimation: boolean;
+    onContentChange?: (reason?: ContentChangeReason, messageId?: string) => void;
+
+    shouldShowHeader?: boolean;
+    hasTextContent?: boolean;
+    onCopyMessage?: () => void;
+    copiedMessage?: boolean;
+    onAuxiliaryContentComplete?: () => void;
+    showReasoningTraces?: boolean;
+    agentMention?: AgentMentionInfo;
+    turnGroupingContext?: TurnGroupingContext;
+}
+
+const UserMessageBody: React.FC<{
+    messageId: string;
+    parts: Part[];
+    isMobile: boolean;
+    hasTouchInput?: boolean;
+    hasTextContent?: boolean;
+    onCopyMessage?: () => void;
+    copiedMessage?: boolean;
+    onShowPopup: (content: ToolPopupContent) => void;
+    agentMention?: AgentMentionInfo;
+}> = ({ messageId, parts, isMobile, hasTouchInput, hasTextContent, onCopyMessage, copiedMessage, onShowPopup, agentMention }) => {
+    const [copyHintVisible, setCopyHintVisible] = React.useState(false);
+    const copyHintTimeoutRef = React.useRef<number | null>(null);
+
+    const textParts = React.useMemo(() => {
+        return parts.filter((part) => {
+            if (part.type !== 'text') return false;
+            return !isEmptyTextPart(part);
+        });
+    }, [parts]);
+
+    const mentionToken = agentMention?.token;
+    let mentionInjected = false;
+
+    const canCopyMessage = Boolean(onCopyMessage);
+    const isMessageCopied = Boolean(copiedMessage);
+    const isTouchContext = Boolean(hasTouchInput ?? isMobile);
+    const hasCopyableText = Boolean(hasTextContent);
+
+    const clearCopyHintTimeout = React.useCallback(() => {
+        if (copyHintTimeoutRef.current !== null && typeof window !== 'undefined') {
+            window.clearTimeout(copyHintTimeoutRef.current);
+            copyHintTimeoutRef.current = null;
+        }
+    }, []);
+
+    const revealCopyHint = React.useCallback(() => {
+        if (!isTouchContext || !canCopyMessage || !hasCopyableText || typeof window === 'undefined') {
+            return;
+        }
+
+        clearCopyHintTimeout();
+        setCopyHintVisible(true);
+        copyHintTimeoutRef.current = window.setTimeout(() => {
+            setCopyHintVisible(false);
+            copyHintTimeoutRef.current = null;
+        }, 1800);
+    }, [canCopyMessage, clearCopyHintTimeout, hasCopyableText, isTouchContext]);
+
+    React.useEffect(() => {
+        if (!hasCopyableText) {
+            setCopyHintVisible(false);
+            clearCopyHintTimeout();
+        }
+    }, [clearCopyHintTimeout, hasCopyableText]);
+
+    const handleCopyButtonClick = React.useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            if (!onCopyMessage || !hasCopyableText) {
+                return;
+            }
+
+            event.stopPropagation();
+            event.preventDefault();
+            onCopyMessage();
+
+            if (isTouchContext) {
+                revealCopyHint();
+            }
+        },
+        [hasCopyableText, isTouchContext, onCopyMessage, revealCopyHint]
+    );
+
+    return (
+        <div
+            className="relative w-full group/message"
+            style={{ contain: 'layout', transform: 'translateZ(0)' }}
+            onTouchStart={isTouchContext && canCopyMessage && hasCopyableText ? revealCopyHint : undefined}
+        >
+            {canCopyMessage && (
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    data-visible={copyHintVisible || isMessageCopied ? 'true' : undefined}
+                    className={cn(
+                        'absolute z-10 flex h-7 w-7 items-center justify-center rounded-full border border-border/40 shadow-none bg-background/95 supports-[backdrop-filter]:bg-background/80 hover:bg-accent duration-150',
+                        'opacity-0 pointer-events-none disabled:opacity-30 disabled:text-muted-foreground/40',
+                        hasCopyableText &&
+                            'group-hover/message:opacity-60 group-hover/message:pointer-events-auto focus-visible:opacity-100 focus-visible:pointer-events-auto',
+                        (copyHintVisible || isMessageCopied) && 'opacity-100 pointer-events-auto'
+                    )}
+                    style={{ insetInlineEnd: '0.32rem', insetBlockStart: '-0.28rem' }}
+                    disabled={!hasCopyableText}
+                    aria-label="Copy message text"
+                    aria-hidden={!hasCopyableText}
+                    onPointerDown={(event) => event.stopPropagation()}
+                    onClick={handleCopyButtonClick}
+                    onFocus={() => {
+                        if (hasCopyableText) {
+                            setCopyHintVisible(true);
+                        }
+                    }}
+                    onBlur={() => {
+                        if (!isMessageCopied) {
+                            setCopyHintVisible(false);
+                        }
+                    }}
+                >
+                    {isMessageCopied ? (
+                        <RiCheckLine className="h-3.5 w-3.5 text-[color:var(--status-success)]" />
+                    ) : (
+                        <RiFileCopyLine className="h-3.5 w-3.5 text-foreground hover:text-primary focus-visible:text-primary" />
+                    )}
+                </Button>
+            )}
+            <div className="px-3">
+                <div className="leading-normal overflow-hidden text-foreground/90">
+                    {textParts.map((part, index) => {
+                        let mentionForPart: AgentMentionInfo | undefined;
+                        if (agentMention && mentionToken && !mentionInjected) {
+                            const candidateText = extractTextContent(part);
+                            if (candidateText.includes(mentionToken)) {
+                                mentionForPart = agentMention;
+                                mentionInjected = true;
+                            }
+                        }
+                        return (
+                            <FadeInOnReveal key={`user-text-${index}`}>
+                                <UserTextPart
+                                    part={part}
+                                    messageId={messageId}
+                                    isMobile={isMobile}
+                                    agentMention={mentionForPart}
+                                />
+                            </FadeInOnReveal>
+                        );
+                    })}
+                </div>
+                <MessageFilesDisplay files={parts} onShowPopup={onShowPopup} />
+            </div>
+        </div>
+    );
+};
+
+const AssistantMessageBody: React.FC<Omit<MessageBodyProps, 'isUser'>> = ({
+    messageId,
+    parts,
+    isMessageCompleted,
+
+    syntaxTheme,
+    isMobile,
+    hasTouchInput,
+    copiedCode,
+    onCopyCode,
+    expandedTools,
+    onToggleTool,
+    onShowPopup,
+    streamPhase: _streamPhase,
+    allowAnimation: _allowAnimation,
+    onContentChange,
+    shouldShowHeader = true,
+    hasTextContent = false,
+    onCopyMessage,
+    copiedMessage = false,
+    onAuxiliaryContentComplete,
+    showReasoningTraces = false,
+    turnGroupingContext,
+}) => {
+
+    void _streamPhase;
+    void _allowAnimation;
+    const [copyHintVisible, setCopyHintVisible] = React.useState(false);
+    const copyHintTimeoutRef = React.useRef<number | null>(null);
+
+    const canCopyMessage = Boolean(onCopyMessage);
+    const isMessageCopied = Boolean(copiedMessage);
+    const isTouchContext = Boolean(hasTouchInput ?? isMobile);
+    const awaitingMessageCompletion = !isMessageCompleted;
+
+    const visibleParts = React.useMemo(() => {
+        return parts
+            .filter((part) => !isEmptyTextPart(part))
+            .filter((part) => {
+                const rawPart = part as Record<string, unknown>;
+                return rawPart.type !== 'compaction';
+            });
+    }, [parts]);
+
+    const toolParts = React.useMemo(() => {
+        return visibleParts.filter((part): part is ToolPartType => part.type === 'tool');
+    }, [visibleParts]);
+
+    const assistantTextParts = React.useMemo(() => {
+        return visibleParts.filter((part) => part.type === 'text');
+    }, [visibleParts]);
+
+    const hasTools = toolParts.length > 0;
+
+    const hasPendingTools = React.useMemo(() => {
+        return toolParts.some((toolPart) => {
+            const state = (toolPart as Record<string, unknown>).state as Record<string, unknown> | undefined ?? {};
+            const status = state?.status;
+            return status === 'pending' || status === 'running' || status === 'started';
+        });
+    }, [toolParts]);
+
+    const isToolFinalized = React.useCallback((toolPart: ToolPartType) => {
+        const state = (toolPart as Record<string, unknown>).state as Record<string, unknown> | undefined ?? {};
+        const status = state?.status;
+        if (status === 'pending' || status === 'running' || status === 'started') {
+            return false;
+        }
+        const time = state?.time as Record<string, unknown> | undefined ?? {};
+        const endTime = typeof time?.end === 'number' ? time.end : undefined;
+        const startTime = typeof time?.start === 'number' ? time.start : undefined;
+        if (typeof endTime !== 'number') {
+            return false;
+        }
+        if (typeof startTime === 'number' && endTime < startTime) {
+            return false;
+        }
+        return true;
+    }, []);
+
+    const allToolsFinalized = React.useMemo(() => {
+        if (toolParts.length === 0) {
+            return true;
+        }
+        if (hasPendingTools) {
+            return false;
+        }
+        return toolParts.every((toolPart) => isToolFinalized(toolPart));
+    }, [toolParts, hasPendingTools, isToolFinalized]);
+
+    const assistantTextReady = React.useMemo(() => {
+        if (assistantTextParts.length === 0) {
+            return true;
+        }
+        return assistantTextParts.every((part) => {
+            const time = (part as Record<string, unknown>).time as Record<string, unknown> | undefined;
+            return typeof time?.end === 'number';
+        });
+    }, [assistantTextParts]);
+
+    const reasoningParts = React.useMemo(() => {
+        return visibleParts.filter((part) => part.type === 'reasoning');
+    }, [visibleParts]);
+
+    const reasoningComplete = React.useMemo(() => {
+        if (reasoningParts.length === 0) {
+            return true;
+        }
+        return reasoningParts.every((part) => {
+            const time = (part as Record<string, unknown>).time as { end?: number } | undefined;
+            return typeof time?.end === 'number';
+        });
+    }, [reasoningParts]);
+
+    const stepState = React.useMemo(() => {
+        let stepStarts = 0;
+        let stepFinishes = 0;
+        visibleParts.forEach((part) => {
+            if (part.type === 'step-start') {
+                stepStarts += 1;
+            } else if (part.type === 'step-finish') {
+                stepFinishes += 1;
+            }
+        });
+        return {
+            stepStarts,
+            stepFinishes,
+            hasOpenStep: stepStarts > stepFinishes,
+        };
+    }, [visibleParts]);
+
+    const hasOpenStep = stepState.hasOpenStep;
+
+    const shouldHoldForReasoning =
+        reasoningParts.length > 0 &&
+        hasTools &&
+        (hasPendingTools || hasOpenStep || !allToolsFinalized);
+
+    const shouldCoordinateRendering = React.useMemo(() => {
+        if (!hasTools) {
+            return assistantTextParts.length > 0 ? shouldHoldForReasoning : false;
+        }
+        if (assistantTextParts.length === 0) {
+            return hasOpenStep || hasPendingTools || !allToolsFinalized;
+        }
+        return true;
+    }, [assistantTextParts.length, hasOpenStep, hasPendingTools, hasTools, shouldHoldForReasoning, allToolsFinalized]);
+
+    const shouldHoldAssistantText = awaitingMessageCompletion
+        || (shouldCoordinateRendering && (!assistantTextReady || !allToolsFinalized || hasPendingTools || hasOpenStep))
+        || shouldHoldForReasoning;
+    const shouldHoldTools = awaitingMessageCompletion
+        || (hasTools && (hasPendingTools || hasOpenStep || !allToolsFinalized));
+    const shouldHoldReasoning = awaitingMessageCompletion || shouldHoldForReasoning;
+
+    const hasAuxiliaryContent = hasTools || reasoningParts.length > 0;
+    const isTextlessAssistantMessage = assistantTextParts.length === 0;
+    const auxiliaryContentComplete = hasAuxiliaryContent && isTextlessAssistantMessage && !shouldHoldTools && !shouldHoldReasoning && allToolsFinalized && reasoningComplete;
+    const auxiliaryCompletionAnnouncedRef = React.useRef(false);
+    const soloReasoningScrollTriggeredRef = React.useRef(false);
+
+    React.useEffect(() => {
+        soloReasoningScrollTriggeredRef.current = false;
+    }, [messageId]);
+
+    React.useEffect(() => {
+        if (!auxiliaryContentComplete) {
+            auxiliaryCompletionAnnouncedRef.current = false;
+            return;
+        }
+        if (auxiliaryCompletionAnnouncedRef.current) {
+            return;
+        }
+        auxiliaryCompletionAnnouncedRef.current = true;
+        onAuxiliaryContentComplete?.();
+    }, [auxiliaryContentComplete, onAuxiliaryContentComplete]);
+
+    React.useEffect(() => {
+        if (awaitingMessageCompletion) {
+            soloReasoningScrollTriggeredRef.current = false;
+            return;
+        }
+        if (hasTools) {
+            soloReasoningScrollTriggeredRef.current = false;
+            return;
+        }
+        if (reasoningParts.length === 0) {
+            return;
+        }
+        if (shouldHoldReasoning || !reasoningComplete) {
+            return;
+        }
+        if (soloReasoningScrollTriggeredRef.current) {
+            return;
+        }
+        soloReasoningScrollTriggeredRef.current = true;
+        onContentChange?.('structural');
+    }, [awaitingMessageCompletion, hasTools, onContentChange, reasoningComplete, reasoningParts.length, shouldHoldReasoning]);
+
+    const hasCopyableText = Boolean(hasTextContent) && !awaitingMessageCompletion;
+
+    const clearCopyHintTimeout = React.useCallback(() => {
+        if (copyHintTimeoutRef.current !== null && typeof window !== 'undefined') {
+            window.clearTimeout(copyHintTimeoutRef.current);
+            copyHintTimeoutRef.current = null;
+        }
+    }, []);
+
+    const revealCopyHint = React.useCallback(() => {
+        if (!isTouchContext || !canCopyMessage || !hasCopyableText || typeof window === 'undefined') {
+            return;
+        }
+
+        clearCopyHintTimeout();
+        setCopyHintVisible(true);
+        copyHintTimeoutRef.current = window.setTimeout(() => {
+            setCopyHintVisible(false);
+            copyHintTimeoutRef.current = null;
+        }, 1800);
+    }, [canCopyMessage, clearCopyHintTimeout, hasCopyableText, isTouchContext]);
+
+    React.useEffect(() => {
+        if (!hasCopyableText) {
+            setCopyHintVisible(false);
+            clearCopyHintTimeout();
+        }
+    }, [clearCopyHintTimeout, hasCopyableText]);
+
+    const handleCopyButtonClick = React.useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            if (!onCopyMessage || !hasCopyableText) {
+                return;
+            }
+
+            event.stopPropagation();
+            event.preventDefault();
+            onCopyMessage();
+
+            if (isTouchContext) {
+                revealCopyHint();
+            }
+        },
+        [hasCopyableText, isTouchContext, onCopyMessage, revealCopyHint]
+    );
+
+    React.useEffect(() => {
+        return () => {
+            clearCopyHintTimeout();
+        };
+    }, [clearCopyHintTimeout]);
+
+    const toolConnections = React.useMemo(() => {
+        const connections: Record<string, { hasPrev: boolean; hasNext: boolean }> = {};
+        const displayableTools = toolParts.filter((toolPart) => {
+            if (shouldHoldTools) {
+                return false;
+            }
+            return isToolFinalized(toolPart);
+        });
+
+        displayableTools.forEach((toolPart, index) => {
+            connections[toolPart.id] = {
+                hasPrev: index > 0,
+                hasNext: index < displayableTools.length - 1,
+            };
+        });
+
+        return connections;
+    }, [toolParts, shouldHoldTools, isToolFinalized]);
+
+    const activityPartsForTurn = React.useMemo(() => {
+        return turnGroupingContext?.activityParts ?? [];
+    }, [turnGroupingContext]);
+
+    const activityPartsForMessage = React.useMemo(() => {
+        if (!turnGroupingContext) return [];
+        return activityPartsForTurn.filter((activity) => activity.messageId === messageId);
+    }, [activityPartsForTurn, messageId, turnGroupingContext]);
+
+    const activityPartsByPart = React.useMemo(() => {
+        const map = new Map<Part, (typeof activityPartsForMessage)[number]>();
+        activityPartsForMessage.forEach((activity) => {
+            map.set(activity.part, activity);
+        });
+        return map;
+    }, [activityPartsForMessage]);
+
+    const visibleActivityPartsForTurn = React.useMemo(() => {
+        if (!turnGroupingContext) return [];
+        if (!showReasoningTraces) {
+            return activityPartsForTurn.filter((activity) => activity.kind === 'tool');
+        }
+        return activityPartsForTurn;
+    }, [activityPartsForTurn, showReasoningTraces, turnGroupingContext]);
+
+    const [hasEverHadMultipleVisibleActivities, setHasEverHadMultipleVisibleActivities] = React.useState(false);
+
+    React.useEffect(() => {
+        if (!turnGroupingContext) {
+            return;
+        }
+        if (visibleActivityPartsForTurn.length > 1) {
+            setHasEverHadMultipleVisibleActivities(true);
+        }
+    }, [turnGroupingContext, visibleActivityPartsForTurn.length]);
+
+    const shouldShowActivityGroup = Boolean(turnGroupingContext && hasEverHadMultipleVisibleActivities);
+
+    const previewableActivityPartsForMessage = React.useMemo(() => {
+        if (!turnGroupingContext) return [];
+        if (!shouldShowActivityGroup) return [];
+        if (!turnGroupingContext.isWorking || turnGroupingContext.isGroupExpanded) {
+            return [];
+        }
+
+        const previewable: (typeof activityPartsForMessage) = [];
+
+        activityPartsForMessage.forEach((activity) => {
+            if (turnGroupingContext.previewedPartIds.has(activity.id)) {
+                return;
+            }
+
+            if (!showReasoningTraces && activity.kind !== 'tool') {
+                return;
+            }
+
+            const part = activity.part;
+
+            if (activity.kind === 'tool') {
+                const toolPart = part as ToolPartType;
+                if (shouldHoldTools) return;
+                if (!isToolFinalized(toolPart)) return;
+            } else if (activity.kind === 'reasoning') {
+                if (!showReasoningTraces) return;
+                if (shouldHoldReasoning) return;
+                const time = (part as { time?: { end?: number | null | undefined } | null | undefined }).time;
+                if (typeof time?.end !== 'number') return;
+            } else if (activity.kind === 'justification') {
+                if (!showReasoningTraces) return;
+                if (shouldHoldAssistantText) return;
+                const time = (part as { time?: { end?: number | null | undefined } | null | undefined }).time;
+                if (typeof time?.end !== 'number') return;
+            }
+
+            previewable.push(activity);
+        });
+
+        return previewable;
+    }, [
+        activityPartsForMessage,
+        isToolFinalized,
+        shouldHoldAssistantText,
+        shouldHoldReasoning,
+        shouldHoldTools,
+        showReasoningTraces,
+        shouldShowActivityGroup,
+        turnGroupingContext,
+    ]);
+
+    const previewableActivityPartIds = React.useMemo(() => {
+        const ids = new Set<string>();
+        previewableActivityPartsForMessage.forEach((activity) => {
+            ids.add(activity.id);
+        });
+        return ids;
+    }, [previewableActivityPartsForMessage]);
+
+    const { isAnimating: isMessageAnimating } = useMigrationTimer(turnGroupingContext, previewableActivityPartIds);
+
+    const renderedParts = React.useMemo(() => {
+        const rendered: React.ReactNode[] = [];
+
+        if (
+            turnGroupingContext &&
+            turnGroupingContext.isFirstAssistantInTurn &&
+            shouldShowActivityGroup &&
+            visibleActivityPartsForTurn.length > 0
+        ) {
+            rendered.push(
+                <ProgressiveGroup
+                    key="progressive-group"
+                    parts={visibleActivityPartsForTurn}
+                    isExpanded={turnGroupingContext.isGroupExpanded}
+                    onToggle={turnGroupingContext.toggleGroup}
+                    syntaxTheme={syntaxTheme}
+                    isMobile={isMobile}
+                    expandedTools={expandedTools}
+                    onToggleTool={onToggleTool}
+                    onShowPopup={onShowPopup}
+                    onContentChange={onContentChange}
+                    isWorking={turnGroupingContext.isWorking}
+                    previewedPartIds={turnGroupingContext.previewedPartIds}
+                    diffStats={turnGroupingContext.diffStats}
+                />
+            );
+        }
+
+        const partsWithTime: Array<{
+            part: Part;
+            index: number;
+            endTime: number | null;
+            element: React.ReactNode;
+        }> = [];
+
+        visibleParts.forEach((part, index) => {
+            const activity = activityPartsByPart.get(part);
+            if (!activity) {
+                return;
+            }
+
+            if (!turnGroupingContext) {
+                return;
+            }
+
+            let endTime: number | null = null;
+            let element: React.ReactNode | null = null;
+
+            if (!shouldShowActivityGroup) {
+                if (activity.kind === 'tool') {
+                    const toolPart = part as ToolPartType;
+                    const toolState = (toolPart as { state?: { time?: { end?: number | null | undefined } | null | undefined } | null | undefined }).state;
+                    const time = toolState?.time;
+                    const isFinalized = isToolFinalized(toolPart);
+                    const shouldShowTool = !shouldHoldTools && isFinalized;
+
+                    if (!shouldShowTool) {
+                        return;
+                    }
+
+                    const connection = toolConnections[toolPart.id];
+
+                    const toolElement = (
+                        <FadeInOnReveal key={`tool-${toolPart.id}`}>
+                            <ToolPart
+                                part={toolPart}
+                                isExpanded={expandedTools.has(toolPart.id)}
+                                onToggle={onToggleTool}
+                                syntaxTheme={syntaxTheme}
+                                isMobile={isMobile}
+                                onContentChange={onContentChange}
+                                hasPrevTool={connection?.hasPrev ?? false}
+                                hasNextTool={connection?.hasNext ?? false}
+                            />
+                        </FadeInOnReveal>
+                    );
+
+                    element = toolElement;
+                    endTime = isFinalized && typeof time?.end === 'number' ? time.end : null;
+                }
+
+                if (element) {
+                    partsWithTime.push({
+                        part,
+                        index,
+                        endTime,
+                        element,
+                    });
+                }
+                return;
+            }
+
+            if (!turnGroupingContext.isWorking || turnGroupingContext.isGroupExpanded) {
+                return;
+            }
+
+            if (turnGroupingContext.previewedPartIds.has(activity.id)) {
+                return;
+            }
+
+            if (!showReasoningTraces && activity.kind !== 'tool') {
+                return;
+            }
+
+            const wrapForMigration = previewableActivityPartIds.has(activity.id);
+
+            switch (activity.kind) {
+                case 'tool': {
+                    const toolPart = part as ToolPartType;
+                    const toolState = (toolPart as { state?: { time?: { end?: number | null | undefined } | null | undefined } | null | undefined }).state;
+                    const time = toolState?.time;
+                    const isFinalized = isToolFinalized(toolPart);
+                    const shouldShowTool = !shouldHoldTools && isFinalized;
+
+                    if (!shouldShowTool) {
+                        break;
+                    }
+
+                    const connection = toolConnections[toolPart.id];
+
+                    const toolElement = (
+                        <FadeInOnReveal key={`tool-${toolPart.id}`}>
+                            <ToolPart
+                                part={toolPart}
+                                isExpanded={expandedTools.has(toolPart.id)}
+                                onToggle={onToggleTool}
+                                syntaxTheme={syntaxTheme}
+                                isMobile={isMobile}
+                                onContentChange={onContentChange}
+                                hasPrevTool={connection?.hasPrev ?? false}
+                                hasNextTool={connection?.hasNext ?? false}
+                            />
+                        </FadeInOnReveal>
+                    );
+
+                    element = wrapForMigration ? (
+                        <MigratingPart key={`migrating-tool-${toolPart.id}`} isMigrating={isMessageAnimating}>
+                            {toolElement}
+                        </MigratingPart>
+                    ) : toolElement;
+
+                    endTime = isFinalized && typeof time?.end === 'number' ? time.end : null;
+                    break;
+                }
+
+                case 'reasoning': {
+                    if (!showReasoningTraces) {
+                        break;
+                    }
+                    const reasoningTime = (part as { time?: { end?: number | null | undefined } | null | undefined }).time;
+                    const hasEndTime = typeof reasoningTime?.end === 'number';
+                    const shouldShowReasoning = hasEndTime && !shouldHoldReasoning;
+
+                    if (!shouldShowReasoning) {
+                        break;
+                    }
+
+                    const reasoningElement = (
+                        <FadeInOnReveal key={`reasoning-${index}`}>
+                            <ReasoningPart
+                                part={part}
+                                messageId={messageId}
+                                onContentChange={onContentChange}
+                            />
+                        </FadeInOnReveal>
+                    );
+
+                    element = wrapForMigration ? (
+                        <MigratingPart key={`migrating-reasoning-${index}`} isMigrating={isMessageAnimating}>
+                            {reasoningElement}
+                        </MigratingPart>
+                    ) : reasoningElement;
+
+                    endTime = hasEndTime ? reasoningTime?.end ?? null : null;
+                    break;
+                }
+
+                case 'justification': {
+                    if (!showReasoningTraces) {
+                        break;
+                    }
+
+                    const time = (part as { time?: { end?: number | null | undefined } | null | undefined }).time;
+                    const hasEndTime = typeof time?.end === 'number';
+                    const shouldShowJustification = hasEndTime && !shouldHoldAssistantText;
+
+                    if (!shouldShowJustification) {
+                        break;
+                    }
+
+                    const textElement = (
+                        <FadeInOnReveal key={`assistant-text-${index}`}>
+                            <AssistantTextPart
+                                part={part}
+                                messageId={messageId}
+                                streamPhase="completed"
+                                allowAnimation={false}
+                                onContentChange={onContentChange}
+                                renderAsReasoning
+                            />
+                        </FadeInOnReveal>
+                    );
+
+                    element = wrapForMigration ? (
+                        <MigratingPart key={`migrating-text-${index}`} isMigrating={isMessageAnimating}>
+                            {textElement}
+                        </MigratingPart>
+                    ) : textElement;
+
+                    endTime = hasEndTime ? time?.end ?? null : null;
+                    break;
+                }
+
+                default:
+                    break;
+            }
+
+            if (element) {
+                partsWithTime.push({
+                    part,
+                    index,
+                    endTime,
+                    element,
+                });
+            }
+        });
+
+        partsWithTime.sort((a, b) => {
+            if (a.endTime === null && b.endTime === null) {
+                return a.index - b.index;
+            }
+            if (a.endTime === null) {
+                return 1;
+            }
+            if (b.endTime === null) {
+                return -1;
+            }
+            return a.endTime - b.endTime;
+        });
+
+        partsWithTime.forEach(({ element }) => {
+            rendered.push(element);
+        });
+
+        return rendered;
+    }, [
+        activityPartsByPart,
+        copiedCode,
+        copiedMessage,
+        expandedTools,
+        hasTextContent,
+        isMessageAnimating,
+        isMobile,
+        isToolFinalized,
+        messageId,
+        onContentChange,
+        onCopyCode,
+        onCopyMessage,
+        onShowPopup,
+        onToggleTool,
+        previewableActivityPartIds,
+        shouldHoldAssistantText,
+        shouldHoldReasoning,
+        shouldHoldTools,
+        shouldShowActivityGroup,
+        shouldShowHeader,
+        showReasoningTraces,
+        syntaxTheme,
+        toolConnections,
+        turnGroupingContext,
+        visibleActivityPartsForTurn,
+        visibleParts,
+    ]);
+
+    const userMessageId = turnGroupingContext?.turnId;
+    const currentSessionId = useSessionStore((state) => state.currentSessionId);
+
+    const rawSummaryBodyFromStore = useMessageStore((state) => {
+        if (!userMessageId || !currentSessionId) return undefined;
+        const sessionMessages = state.messages.get(currentSessionId);
+        if (!sessionMessages) return undefined;
+        const userMsg = sessionMessages.find((m) => m.info?.id === userMessageId);
+        if (!userMsg) return undefined;
+        const summary = (userMsg.info as { summary?: { body?: string | null | undefined } | null | undefined }).summary;
+        const body = summary?.body;
+        return typeof body === 'string' && body.trim().length > 0 ? body : undefined;
+    });
+
+    const summaryCandidate =
+        typeof turnGroupingContext?.summaryBody === 'string' && turnGroupingContext.summaryBody.trim().length > 0
+            ? turnGroupingContext.summaryBody
+            : rawSummaryBodyFromStore;
+
+    const summaryBodyRef = React.useRef<string | undefined>(undefined);
+    if (summaryCandidate && summaryCandidate.trim().length > 0) {
+        summaryBodyRef.current = summaryCandidate;
+    }
+    const prevUserMessageId = React.useRef(userMessageId);
+    if (prevUserMessageId.current !== userMessageId) {
+        prevUserMessageId.current = userMessageId;
+        summaryBodyRef.current = undefined;
+    }
+    const summaryBody = summaryBodyRef.current;
+
+    const showSummaryBody =
+        turnGroupingContext?.isFirstAssistantInTurn &&
+        summaryBody &&
+        summaryBody.trim().length > 0;
+
+    return (
+        <div
+            className={cn(
+                'relative w-full group/message'
+            )}
+            style={{
+                contain: 'layout',
+                transform: 'translateZ(0)',
+            }}
+            onTouchStart={isTouchContext && canCopyMessage && hasCopyableText ? revealCopyHint : undefined}
+        >
+            <div className="px-3">
+                <div className="leading-normal overflow-hidden text-foreground/90 [&_p:last-child]:mb-0 [&_ul:last-child]:mb-0 [&_ol:last-child]:mb-0">
+                    {renderedParts}
+                    {showSummaryBody && (
+                        <FadeInOnReveal key="summary-body">
+                            <div
+                                className="group/assistant-text relative break-words"
+                                onTouchStart={isTouchContext && canCopyMessage && hasCopyableText ? revealCopyHint : undefined}
+                            >
+                                {canCopyMessage && (
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        data-visible={copyHintVisible || isMessageCopied ? 'true' : undefined}
+                                        className={cn(
+                                            'absolute z-10 flex h-7 w-7 items-center justify-center rounded-full border border-border/40 shadow-none bg-background/95 supports-[backdrop-filter]:bg-background/80 hover:bg-accent duration-150',
+                                            'opacity-0 pointer-events-none disabled:opacity-30 disabled:text-muted-foreground/40',
+                                            hasCopyableText &&
+                                                'group-hover/message:opacity-60 group-hover/message:pointer-events-auto focus-visible:opacity-100 focus-visible:pointer-events-auto',
+                                            (copyHintVisible || isMessageCopied) && 'opacity-100 pointer-events-auto'
+                                        )}
+                                        style={{ insetInlineEnd: '0.32rem', insetBlockStart: '-0.4rem' }}
+                                        disabled={!hasCopyableText}
+                                        aria-label="Copy message text"
+                                        aria-hidden={!hasCopyableText}
+                                        onPointerDown={(event) => event.stopPropagation()}
+                                        onClick={handleCopyButtonClick}
+                                        onFocus={() => {
+                                            if (hasCopyableText) {
+                                                setCopyHintVisible(true);
+                                            }
+                                        }}
+                                        onBlur={() => {
+                                            if (!isMessageCopied) {
+                                                setCopyHintVisible(false);
+                                            }
+                                        }}
+                                    >
+                                        {isMessageCopied ? (
+                                            <RiCheckLine className="h-3.5 w-3.5 text-[color:var(--status-success)]" />
+                                        ) : (
+                                            <RiFileCopyLine className="h-3.5 w-3.5 text-foreground hover:text-primary focus-visible:text-primary" />
+                                        )}
+                                    </Button>
+                                )}
+                                <SimpleMarkdownRenderer
+                                    content={summaryBody}
+                                />
+                            </div>
+                        </FadeInOnReveal>
+                    )}
+                </div>
+                <MessageFilesDisplay files={parts} onShowPopup={onShowPopup} />
+            </div>
+        </div>
+    );
+};
+
+const MessageBody: React.FC<MessageBodyProps> = ({ isUser, ...props }) => {
+
+    if (isUser) {
+        return (
+            <UserMessageBody
+                messageId={props.messageId}
+                parts={props.parts}
+                isMobile={props.isMobile}
+                hasTouchInput={props.hasTouchInput}
+                hasTextContent={props.hasTextContent}
+                onCopyMessage={props.onCopyMessage}
+                copiedMessage={props.copiedMessage}
+                onShowPopup={props.onShowPopup}
+                agentMention={props.agentMention}
+            />
+        );
+    }
+
+    return <AssistantMessageBody {...props} />;
+};
+
+export default React.memo(MessageBody);
diff --git a/packages/ui/src/components/chat/message/MessageHeader.tsx b/packages/ui/src/components/chat/message/MessageHeader.tsx
new file mode 100644
index 00000000..044b5fc5
--- /dev/null
+++ b/packages/ui/src/components/chat/message/MessageHeader.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { RiBrainAi3Line, RiUser3Line } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import { getAgentColor } from '@/lib/agentColors';
+import { FadeInOnReveal } from './FadeInOnReveal';
+import { useProviderLogo } from '@/hooks/useProviderLogo';
+
+interface MessageHeaderProps {
+    isUser: boolean;
+    providerID: string | null;
+    agentName: string | undefined;
+    modelName: string | undefined;
+    isDarkTheme: boolean;
+}
+
+const MessageHeader: React.FC<MessageHeaderProps> = ({ isUser, providerID, agentName, modelName, isDarkTheme }) => {
+    const { src: logoSrc, onError: handleLogoError, hasLogo } = useProviderLogo(providerID);
+
+    return (
+        <FadeInOnReveal>
+            <div className={cn('pl-3', 'mb-2')}>
+                <div className={cn('flex items-center justify-between gap-2')}>
+                    <div className="flex items-center gap-2">
+                        <div className="flex-shrink-0">
+                            {isUser ? (
+                                <div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center">
+                                    <RiUser3Line className="h-4 w-4 text-primary" />
+                                </div>
+                            ) : (
+                                <div className="flex items-center justify-center">
+                                    {hasLogo && logoSrc ? (
+                                        <img
+                                            src={logoSrc}
+                                            alt={`${providerID} logo`}
+                                            className="h-4 w-4"
+                                            style={{
+                                                filter: isDarkTheme ? 'brightness(0.9) contrast(1.1) invert(1)' : 'brightness(0.9) contrast(1.1)',
+                                            }}
+                                            onError={handleLogoError}
+                                        />
+                                    ) : (
+                                        <RiBrainAi3Line
+                                            className="h-4 w-4"
+                                            style={{ color: `var(${getAgentColor(agentName).var})` }}
+                                        />
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <h3
+                                className={cn(
+                                    'font-bold typography-ui-header tracking-tight leading-none',
+                                    isUser ? 'text-primary' : 'text-foreground'
+                                )}
+                            >
+                                {isUser ? 'You' : (modelName || 'Assistant')}
+                            </h3>
+                            {!isUser && agentName && (
+                                <div
+                                    className={cn(
+                                        'flex items-center gap-1 px-1.5 py-0 rounded',
+                                        'agent-badge typography-meta',
+                                        getAgentColor(agentName).class
+                                    )}
+                                >
+                                    <span className="font-medium">{agentName}</span>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </FadeInOnReveal>
+    );
+};
+
+export default React.memo(MessageHeader);
diff --git a/packages/ui/src/components/chat/message/ToolOutputDialog.tsx b/packages/ui/src/components/chat/message/ToolOutputDialog.tsx
new file mode 100644
index 00000000..e5c39140
--- /dev/null
+++ b/packages/ui/src/components/chat/message/ToolOutputDialog.tsx
@@ -0,0 +1,563 @@
+import React from 'react';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { RiBrainAi3Line, RiFileImageLine, RiFilePdfLine, RiFileSearchLine, RiFolder6Line, RiGitBranchLine, RiGlobalLine, RiListCheck3, RiPencilAiLine, RiSearchLine, RiTerminalBoxLine, RiToolsLine } from '@remixicon/react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { Streamdown } from 'streamdown';
+
+import { cn } from '@/lib/utils';
+import { toolDisplayStyles } from '@/lib/typography';
+import { getLanguageFromExtension } from '@/lib/toolHelpers';
+import {
+    renderTodoOutput,
+    renderListOutput,
+    renderGrepOutput,
+    renderGlobOutput,
+    renderWebSearchOutput,
+    formatInputForDisplay,
+    parseDiffToUnified,
+    type UnifiedDiffHunk,
+    type SideBySideDiffHunk,
+    type SideBySideDiffLine,
+} from './toolRenderers';
+import type { ToolPopupContent, DiffViewMode } from './types';
+import { DiffViewToggle } from './DiffViewToggle';
+
+interface ToolOutputDialogProps {
+    popup: ToolPopupContent;
+    onOpenChange: (open: boolean) => void;
+    syntaxTheme: { [key: string]: React.CSSProperties };
+    isMobile: boolean;
+}
+
+const getToolIcon = (toolName: string) => {
+    const iconClass = 'h-3.5 w-3.5 flex-shrink-0';
+    const tool = toolName.toLowerCase();
+
+    if (tool === 'reasoning') {
+        return <RiBrainAi3Line className={iconClass} />;
+    }
+    if (tool === 'image-preview') {
+        return <RiFileImageLine className={iconClass} />;
+    }
+    if (tool === 'edit' || tool === 'multiedit' || tool === 'str_replace' || tool === 'str_replace_based_edit_tool') {
+        return <RiPencilAiLine className={iconClass} />;
+    }
+    if (tool === 'write' || tool === 'create' || tool === 'file_write') {
+        return <RiFilePdfLine className={iconClass} />;
+    }
+    if (tool === 'read' || tool === 'view' || tool === 'file_read' || tool === 'cat') {
+        return <RiFilePdfLine className={iconClass} />;
+    }
+    if (tool === 'bash' || tool === 'shell' || tool === 'cmd' || tool === 'terminal') {
+        return <RiTerminalBoxLine className={iconClass} />;
+    }
+    if (tool === 'list' || tool === 'ls' || tool === 'dir' || tool === 'list_files') {
+        return <RiFolder6Line className={iconClass} />;
+    }
+    if (tool === 'search' || tool === 'grep' || tool === 'find' || tool === 'ripgrep') {
+        return <RiSearchLine className={iconClass} />;
+    }
+    if (tool === 'glob') {
+        return <RiFileSearchLine className={iconClass} />;
+    }
+    if (tool === 'fetch' || tool === 'curl' || tool === 'wget' || tool === 'webfetch') {
+        return <RiGlobalLine className={iconClass} />;
+    }
+    if (tool === 'web-search' || tool === 'websearch' || tool === 'search_web' || tool === 'google' || tool === 'bing' || tool === 'duckduckgo') {
+        return <RiSearchLine className={iconClass} />;
+    }
+    if (tool === 'todowrite' || tool === 'todoread') {
+        return <RiListCheck3 className={iconClass} />;
+    }
+    if (tool.startsWith('git')) {
+        return <RiGitBranchLine className={iconClass} />;
+    }
+    return <RiToolsLine className={iconClass} />;
+};
+
+const ToolOutputDialog: React.FC<ToolOutputDialogProps> = ({ popup, onOpenChange, syntaxTheme, isMobile }) => {
+    const [diffViewMode, setDiffViewMode] = React.useState<DiffViewMode>(isMobile ? 'unified' : 'side-by-side');
+
+    return (
+        <Dialog open={popup.open} onOpenChange={onOpenChange}>
+            <DialogContent
+                className={cn(
+                    'overflow-hidden flex flex-col min-h-0 pt-3 pb-4 px-4 gap-1',
+                    '[&>button]:top-1.5',
+                    isMobile ? 'w-[95vw] max-w-[95vw]' : 'max-w-5xl',
+                    isMobile ? '[&>button]:right-1' : '[&>button]:top-2.5 [&>button]:right-4'
+                )}
+                style={{ maxHeight: '90vh' }}
+            >
+                <div className="flex-shrink-0 pb-1">
+                    <div className="flex items-start gap-2 text-foreground typography-ui-header font-semibold">
+                        {popup.metadata?.tool ? getToolIcon(popup.metadata.tool as string) : (
+                            <RiToolsLine className="h-3.5 w-3.5 text-foreground flex-shrink-0" />
+                        )}
+                        <span className="break-words flex-1 leading-tight">{popup.title}</span>
+                        {popup.isDiff && (
+                            <DiffViewToggle
+                                mode={diffViewMode}
+                                onModeChange={setDiffViewMode}
+                                className="mr-8 flex-shrink-0"
+                            />
+                        )}
+                    </div>
+                </div>
+                <div className="flex-1 min-h-0 rounded-xl border border-border/30 bg-muted/10 overflow-hidden">
+                    <div className="h-full max-h-[75vh] overflow-y-auto px-3 pr-4">
+                        {popup.metadata?.input && typeof popup.metadata.input === 'object' &&
+                            Object.keys(popup.metadata.input).length > 0 &&
+                            popup.metadata?.tool !== 'todowrite' &&
+                            popup.metadata?.tool !== 'todoread' ? (() => {
+                                const meta = popup.metadata!;
+                                const input = meta.input as Record<string, unknown>;
+
+                                const getInputValue = (key: string): string | null => {
+                                  const val = input[key];
+                                  return typeof val === 'string' ? val : (typeof val === 'number' ? String(val) : null);
+                                };
+                                return (
+                                <div className="border-b border-border/20 p-4 -mx-3">
+                                    <div className="typography-markdown font-medium text-muted-foreground mb-2 px-3">
+                                        {meta.tool === 'bash'
+                                            ? 'Command:'
+                                            : meta.tool === 'task'
+                                                ? 'Task Details:'
+                                                : 'Input:'}
+                                    </div>
+                                    {meta.tool === 'bash' && getInputValue('command') ? (
+                                        <div className="bg-muted/30 rounded-xl border border-border/20 mx-3">
+                                            <SyntaxHighlighter
+                                                style={syntaxTheme}
+                                                language="bash"
+                                                PreTag="div"
+                                                customStyle={toolDisplayStyles.getPopupStyles()}
+                                                wrapLongLines
+                                            >
+                                                {getInputValue('command')!}
+                                            </SyntaxHighlighter>
+                                        </div>
+                                    ) : meta.tool === 'task' && getInputValue('prompt') ? (
+                                        <pre
+                                            className="bg-muted/30 p-3 rounded-xl border border-border/20 font-mono whitespace-pre-wrap text-foreground/90 mx-3"
+                                            style={toolDisplayStyles.getPopupStyles()}
+                                        >
+                                            {getInputValue('description') ? `Task: ${getInputValue('description')}\n` : ''}
+                                            {getInputValue('subagent_type') ? `Agent Type: ${getInputValue('subagent_type')}\n` : ''}
+                                            {`Instructions:\n${getInputValue('prompt')}`}
+                                        </pre>
+                                    ) : meta.tool === 'write' && getInputValue('content') ? (
+                                        <div className="bg-muted/30 rounded-xl border border-border/20 mx-3">
+                                            <SyntaxHighlighter
+                                                style={syntaxTheme}
+                                                language={getLanguageFromExtension(getInputValue('filePath') || getInputValue('file_path') || '') || 'text'}
+                                                PreTag="div"
+                                                customStyle={toolDisplayStyles.getPopupStyles()}
+                                                wrapLongLines
+                                            >
+                                                {getInputValue('content')!}
+                                            </SyntaxHighlighter>
+                                        </div>
+                                    ) : (
+                                        <pre
+                                            className="bg-muted/30 p-3 rounded-xl border border-border/20 font-mono whitespace-pre-wrap text-foreground/90 mx-3"
+                                            style={toolDisplayStyles.getPopupStyles()}
+                                        >
+                                            {formatInputForDisplay(input, meta.tool as string)}
+                                        </pre>
+                                    )}
+                                </div>
+                            );
+                            })() : null}
+
+                        {popup.isDiff ? (
+                            diffViewMode === 'unified' ? (
+                            <div className="typography-markdown">
+                                {parseDiffToUnified(popup.content).map((hunk, hunkIdx) => (
+                                    <div key={hunkIdx} className="border-b border-border/20 last:border-b-0">
+                                        <div
+                                            className={cn('bg-muted/20 px-3 py-2 font-medium text-muted-foreground border-b border-border/10 sticky top-0 z-10 break-words -mx-3', isMobile ? 'typography-micro' : 'typography-markdown')}
+                                        >
+                                            {`${hunk.file} (line ${hunk.oldStart})`}
+                                        </div>
+                                        <div>
+                                            {hunk.lines.map((line, lineIdx) => (
+                                                <div
+                                                    key={lineIdx}
+                                                    className={cn(
+                                                        'typography-markdown font-mono px-3 py-0.5 flex',
+                                                        line.type === 'context' && 'bg-transparent',
+                                                        line.type === 'removed' && 'bg-transparent',
+                                                        line.type === 'added' && 'bg-transparent'
+                                                    )}
+                                                    style={{
+                                                        lineHeight: '1.1',
+                                                        ...(line.type === 'removed'
+                                                            ? { backgroundColor: 'var(--tools-edit-removed-bg)' }
+                                                            : line.type === 'added'
+                                                                ? { backgroundColor: 'var(--tools-edit-added-bg)' }
+                                                                : {}),
+                                                    }}
+                                                >
+                                                    <span className="text-muted-foreground/60 w-10 flex-shrink-0 text-right pr-3 self-start select-none">
+                                                        {line.lineNumber || ''}
+                                                    </span>
+                                                    <div className="flex-1 min-w-0">
+                                                        {(() => {
+                                                          const inputFile = (typeof popup.metadata?.input === 'object' && popup.metadata.input !== null)
+                                                            ? ((popup.metadata.input as Record<string, unknown>).file_path || (popup.metadata.input as Record<string, unknown>).filePath)
+                                                            : null;
+                                                          const fileStr = typeof inputFile === 'string' ? inputFile : '';
+                                                          const hunkFile = (typeof hunk === 'object' && hunk !== null && 'file' in hunk) ? (hunk as UnifiedDiffHunk).file : null;
+                                                          const hunkFileStr = typeof hunkFile === 'string' ? hunkFile : '';
+                                                          const finalFile = fileStr || hunkFileStr || '';
+                                                          return (
+                                                            <SyntaxHighlighter
+                                                              style={syntaxTheme}
+                                                              language={getLanguageFromExtension(finalFile) || 'text'}
+                                                            PreTag="div"
+                                                            wrapLines
+                                                            wrapLongLines
+                                                            customStyle={{
+                                                                margin: 0,
+                                                                padding: 0,
+                                                                fontSize: 'inherit',
+                                                                background: 'transparent !important',
+                                                                borderRadius: 0,
+                                                                overflow: 'visible',
+                                                                whiteSpace: 'pre-wrap',
+                                                                wordBreak: 'break-all',
+                                                                overflowWrap: 'anywhere',
+                                                            }}
+                                                            codeTagProps={{
+                                                                style: {
+                                                                    background: 'transparent !important',
+                                                                },
+                                                            }}
+                                                        >
+                                                            {line.content}
+                                                            </SyntaxHighlighter>
+                                                          );
+                                                        })()}
+                                                    </div>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        ) : popup.diffHunks ? (
+                            <div className="typography-markdown">
+                                {popup.diffHunks.map((hunk, hunkIdx) => (
+                                    <div key={hunkIdx} className="border-b border-border/20 last:border-b-0">
+                                        <div
+                                            className={cn('bg-muted/20 px-3 py-2 font-medium text-muted-foreground border-b border-border/10 sticky top-0 z-10 break-words -mx-3', isMobile ? 'typography-micro' : 'typography-markdown')}
+                                        >
+                                            {`${hunk.file} (line ${hunk.oldStart})`}
+                                        </div>
+                                        <div>
+                                            {(hunk as unknown as SideBySideDiffHunk).lines.map((line: SideBySideDiffLine, lineIdx: number) => (
+                                                <div key={lineIdx} className="grid grid-cols-2 divide-x divide-border/20">
+                                                    <div
+                                                        className={cn(
+                                                            'typography-markdown font-mono px-3 py-0.5 overflow-hidden',
+                                                            line.leftLine.type === 'context' && 'bg-transparent',
+                                                            line.leftLine.type === 'empty' && 'bg-transparent'
+                                                        )}
+                                                        style={{
+                                                            lineHeight: '1.1',
+                                                            ...(line.leftLine.type === 'removed' ? { backgroundColor: 'var(--tools-edit-removed-bg)' } : {}),
+                                                        }}
+                                                    >
+                                                        <div className="flex">
+                                                            <span className="text-muted-foreground/60 w-10 flex-shrink-0 text-right pr-3 self-start select-none">
+                                                                {line.leftLine.lineNumber || ''}
+                                                            </span>
+                                                            <div className="flex-1 min-w-0">
+                                                                {line.leftLine.content && (
+                                                                    <SyntaxHighlighter
+                                                                        style={syntaxTheme}
+                                                                        language={(() => {
+                                                                          const input = popup.metadata?.input;
+                                                                          const inputObj = typeof input === 'object' && input !== null ? (input as Record<string, unknown>) : {};
+                                                                          const filePath = inputObj.file_path || inputObj.filePath;
+                                                                          const hunkFile = (hunk as unknown as UnifiedDiffHunk).file;
+                                                                          return getLanguageFromExtension(typeof filePath === 'string' ? filePath : hunkFile) || 'text';
+                                                                        })()}
+                                                                        PreTag="div"
+                                                                        wrapLines
+                                                                        wrapLongLines
+                                                                        customStyle={{
+                                                                            margin: 0,
+                                                                            padding: 0,
+                                                                            fontSize: 'inherit',
+                                                                                        background: 'transparent !important',
+                                                                            borderRadius: 0,
+                                                                            overflow: 'visible',
+                                                                            whiteSpace: 'pre-wrap',
+                                                                            wordBreak: 'break-all',
+                                                                            overflowWrap: 'anywhere',
+                                                                        }}
+                                                                        codeTagProps={{
+                                                                            style: {
+                                                                                background: 'transparent !important',
+                                                                            },
+                                                                        }}
+                                                                    >
+                                                                        {line.leftLine.content}
+                                                                    </SyntaxHighlighter>
+                                                                )}
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div
+                                                        className={cn(
+                                                            'typography-markdown font-mono px-3 py-0.5 overflow-hidden',
+                                                            line.rightLine.type === 'context' && 'bg-transparent',
+                                                            line.rightLine.type === 'empty' && 'bg-transparent'
+                                                        )}
+                                                        style={{
+                                                            lineHeight: '1.1',
+                                                            ...(line.rightLine.type === 'added' ? { backgroundColor: 'var(--tools-edit-added-bg)' } : {}),
+                                                        }}
+                                                    >
+                                                        <div className="flex">
+                                                            <span className="text-muted-foreground/60 w-10 flex-shrink-0 text-right pr-3 self-start select-none">
+                                                                {line.rightLine.lineNumber || ''}
+                                                            </span>
+                                                            <div className="flex-1 min-w-0">
+                                                                {line.rightLine.content && (
+                                                                    <SyntaxHighlighter
+                                                                        style={syntaxTheme}
+                                                                        language={(() => {
+                                                                          const input = popup.metadata?.input;
+                                                                          const inputObj = typeof input === 'object' && input !== null ? (input as Record<string, unknown>) : {};
+                                                                          const filePath = inputObj.file_path || inputObj.filePath;
+                                                                          const hunkFile = (hunk as unknown as UnifiedDiffHunk).file;
+                                                                          return getLanguageFromExtension(typeof filePath === 'string' ? filePath : hunkFile) || 'text';
+                                                                        })()}
+                                                                        PreTag="div"
+                                                                        wrapLines
+                                                                        wrapLongLines
+                                                                        customStyle={{
+                                                                            margin: 0,
+                                                                            padding: 0,
+                                                                            fontSize: 'inherit',
+                                                                                        background: 'transparent !important',
+                                                                            borderRadius: 0,
+                                                                            overflow: 'visible',
+                                                                            whiteSpace: 'pre-wrap',
+                                                                            wordBreak: 'break-all',
+                                                                            overflowWrap: 'anywhere',
+                                                                        }}
+                                                                        codeTagProps={{
+                                                                            style: {
+                                                                                background: 'transparent !important',
+                                                                            },
+                                                                        }}
+                                                                    >
+                                                                        {line.rightLine.content}
+                                                                    </SyntaxHighlighter>
+                                                                )}
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        ) : null
+                    ) : popup.image ? (
+                        <div className="p-4">
+                            <div className="flex flex-col items-center gap-3">
+                                <div className="max-h-[70vh] overflow-hidden rounded-2xl border border-border/40 bg-muted/10">
+                                    <img
+                                        src={popup.image.url}
+                                        alt={popup.image.filename || popup.title || 'Image preview'}
+                                        className="block h-full max-h-[70vh] w-auto max-w-full object-contain"
+                                        loading="lazy"
+                                    />
+                                </div>
+                                {popup.image.filename && (
+                                    <span className="typography-meta text-muted-foreground text-center">
+                                        {popup.image.filename}
+                                    </span>
+                                )}
+                            </div>
+                        </div>
+                    ) : popup.content ? (
+                        <div className="p-4">
+                            {(() => {
+                                const tool = popup.metadata?.tool;
+
+                                if (tool === 'todowrite' || tool === 'todoread') {
+                                    return (
+                                        renderTodoOutput(popup.content) || (
+                                            <SyntaxHighlighter
+                                                style={syntaxTheme}
+                                                language="json"
+                                                PreTag="div"
+                                                wrapLongLines
+                                                customStyle={toolDisplayStyles.getPopupContainerStyles()}
+                                                codeTagProps={{ style: { background: 'transparent !important' } }}
+                                            >
+                                                {popup.content}
+                                            </SyntaxHighlighter>
+                                        )
+                                    );
+                                }
+
+                                if (tool === 'list') {
+                                    return (
+                                        renderListOutput(popup.content) || (
+                                            <pre className="typography-markdown bg-muted/30 p-2 rounded-xl border border-border/20 font-mono whitespace-pre-wrap">
+                                                {popup.content}
+                                            </pre>
+                                        )
+                                    );
+                                }
+
+                                if (tool === 'grep') {
+                                    return (
+                                        renderGrepOutput(popup.content, isMobile) || (
+                                            <pre className="typography-markdown bg-muted/30 p-2 rounded-xl border border-border/20 font-mono whitespace-pre-wrap">
+                                                {popup.content}
+                                            </pre>
+                                        )
+                                    );
+                                }
+
+                                if (tool === 'glob') {
+                                    return (
+                                        renderGlobOutput(popup.content, isMobile) || (
+                                            <pre className="typography-markdown bg-muted/30 p-2 rounded-xl border border-border/20 font-mono whitespace-pre-wrap">
+                                                {popup.content}
+                                            </pre>
+                                        )
+                                    );
+                                }
+
+                                if (tool === 'task' || tool === 'reasoning') {
+                                    return (
+                                        <div
+                                            className={tool === 'reasoning' ? "text-muted-foreground/70" : ""}
+                                            style={{ fontSize: 'var(--text-meta)' }}
+                                        >
+                                            <Streamdown mode="static" className="streamdown-content streamdown-tool">
+                                                {popup.content}
+                                            </Streamdown>
+                                        </div>
+                                    );
+                                }
+
+                                if (tool === 'web-search' || tool === 'websearch' || tool === 'search_web') {
+                                    return (
+                                        renderWebSearchOutput(popup.content, syntaxTheme) || (
+                                            <SyntaxHighlighter
+                                                style={syntaxTheme}
+                                                language="text"
+                                                PreTag="div"
+                                                wrapLongLines
+                                                customStyle={toolDisplayStyles.getPopupContainerStyles()}
+                                                codeTagProps={{ style: { background: 'transparent !important' } }}
+                                            >
+                                                {popup.content}
+                                            </SyntaxHighlighter>
+                                        )
+                                    );
+                                }
+
+                                if (tool === 'read') {
+                                    const lines = popup.content.split('\n');
+
+                                    const inputMeta = popup.metadata?.input;
+                                    const inputObj = typeof inputMeta === 'object' && inputMeta !== null ? (inputMeta as Record<string, unknown>) : {};
+                                    const offset = typeof inputObj.offset === 'number' ? inputObj.offset : 0;
+                                    const limit = typeof inputObj.limit === 'number' ? inputObj.limit : undefined;
+
+                                    const isInfoMessage = (line: string) => line.trim().startsWith('(');
+
+                                    return (
+                                        <div>
+                                            {lines.map((line: string, idx: number) => {
+
+                                                const isInfo = isInfoMessage(line);
+
+                                                const lineNumber = offset + idx + 1;
+
+                                                const shouldShowLineNumber = !isInfo && (limit === undefined || idx < limit);
+
+                                                return (
+                                                    <div key={idx} className={`typography-markdown font-mono flex ${isInfo ? 'text-muted-foreground/70 italic' : ''}`}>
+                                                        <span className="text-muted-foreground/60 w-10 flex-shrink-0 text-right pr-4 self-start select-none">
+                                                            {shouldShowLineNumber ? lineNumber : ''}
+                                                        </span>
+                                                        <div className="flex-1 min-w-0">
+                                                            {isInfo ? (
+                                                                <div className="whitespace-pre-wrap break-words">{line}</div>
+                                                            ) : (
+                                                                <SyntaxHighlighter
+                                                                    style={syntaxTheme}
+                                                                    language={popup.language || 'text'}
+                                                                    PreTag="div"
+                                                                    wrapLines
+                                                                    wrapLongLines
+                                                                    customStyle={{
+                                                                        margin: 0,
+                                                                        padding: 0,
+                                                                        fontSize: 'inherit',
+                                                                        background: 'transparent !important',
+                                                                        borderRadius: 0,
+                                                                        overflow: 'visible',
+                                                                        whiteSpace: 'pre-wrap',
+                                                                        wordBreak: 'break-all',
+                                                                        overflowWrap: 'anywhere',
+                                                                    }}
+                                                                    codeTagProps={{
+                                                                        style: {
+                                                                            background: 'transparent !important',
+                                                                        },
+                                                                    }}
+                                                                >
+                                                                    {line}
+                                                                </SyntaxHighlighter>
+                                                            )}
+                                                        </div>
+                                                    </div>
+                                                );
+                                            })}
+                                        </div>
+                                    );
+                                }
+
+                                return (
+                                    <SyntaxHighlighter
+                                        style={syntaxTheme}
+                                        language={popup.language || 'text'}
+                                        PreTag="div"
+                                        wrapLongLines
+                                        customStyle={toolDisplayStyles.getPopupContainerStyles()}
+                                        codeTagProps={{ style: { background: 'transparent !important' } }}
+                                    >
+                                        {popup.content}
+                                    </SyntaxHighlighter>
+                                );
+                            })()}
+                        </div>
+                    ) : (
+                        <div className="p-8 text-muted-foreground typography-ui-header">
+                            <div className="mb-2">Command completed successfully</div>
+                            <div className="typography-markdown">No output was produced</div>
+                        </div>
+                    )}
+                    </div>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default ToolOutputDialog;
diff --git a/packages/ui/src/components/chat/message/messageRole.ts b/packages/ui/src/components/chat/message/messageRole.ts
new file mode 100644
index 00000000..8dc607eb
--- /dev/null
+++ b/packages/ui/src/components/chat/message/messageRole.ts
@@ -0,0 +1,34 @@
+import type { Message } from '@opencode-ai/sdk';
+
+export interface MessageRoleInfo {
+    role: string;
+    isUser: boolean;
+}
+
+export const deriveMessageRole = (
+    messageInfo: Message | (Message & { clientRole?: string; userMessageMarker?: boolean })
+): MessageRoleInfo => {
+    const info = messageInfo as Message & { clientRole?: string; userMessageMarker?: boolean; origin?: string; source?: string };
+    const clientRole = info?.clientRole;
+    const serverRole = info?.role;
+    const userMarker = info?.userMessageMarker === true;
+
+    const isUser =
+        userMarker ||
+        clientRole === 'user' ||
+        serverRole === 'user' ||
+        info?.origin === 'user' ||
+        info?.source === 'user';
+
+    if (isUser) {
+        return {
+            role: 'user',
+            isUser: true,
+        };
+    }
+
+    return {
+        role: clientRole || serverRole || 'assistant',
+        isUser: false,
+    };
+};
diff --git a/packages/ui/src/components/chat/message/partUtils.ts b/packages/ui/src/components/chat/message/partUtils.ts
new file mode 100644
index 00000000..57bdcf58
--- /dev/null
+++ b/packages/ui/src/components/chat/message/partUtils.ts
@@ -0,0 +1,54 @@
+import type { Part } from '@opencode-ai/sdk';
+
+type PartWithText = Part & { text?: string; content?: string; value?: string };
+
+export const extractTextContent = (part: Part): string => {
+    const partWithText = part as PartWithText;
+    const rawText = partWithText.text;
+    if (typeof rawText === 'string') {
+        return rawText;
+    }
+    return partWithText.content || partWithText.value || '';
+};
+
+export const isEmptyTextPart = (part: Part): boolean => {
+    if (part.type !== 'text') {
+        return false;
+    }
+    const text = extractTextContent(part);
+    return !text || text.trim().length === 0;
+};
+
+type PartWithSynthetic = Part & { synthetic?: boolean };
+
+interface VisibleFilterOptions {
+    includeReasoning?: boolean;
+}
+
+export const filterVisibleParts = (parts: Part[], options: VisibleFilterOptions = {}): Part[] => {
+    const { includeReasoning = true } = options;
+
+    return parts.filter((part) => {
+        const partWithSynthetic = part as PartWithSynthetic;
+        const isSynthetic = Boolean(partWithSynthetic.synthetic);
+        if (isSynthetic) {
+            return false;
+        }
+        if (!includeReasoning && part.type === 'reasoning') {
+            return false;
+        }
+        const isPatchPart = part.type === 'patch';
+
+        return !isPatchPart;
+    });
+};
+
+type PartWithTime = Part & { time?: { start?: number; end?: number } };
+
+export const isFinalizedTextPart = (part: Part): boolean => {
+    if (part.type !== 'text') {
+        return false;
+    }
+    const time = (part as PartWithTime).time;
+    return Boolean(time && typeof time.end !== 'undefined');
+};
diff --git a/packages/ui/src/components/chat/message/parts/AssistantTextPart.tsx b/packages/ui/src/components/chat/message/parts/AssistantTextPart.tsx
new file mode 100644
index 00000000..0cdc6d25
--- /dev/null
+++ b/packages/ui/src/components/chat/message/parts/AssistantTextPart.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import type { Part } from '@opencode-ai/sdk';
+import { MarkdownRenderer } from '../../MarkdownRenderer';
+import type { StreamPhase } from '../types';
+import type { ContentChangeReason } from '@/hooks/useChatScrollManager';
+import { ReasoningTimelineBlock, formatReasoningText } from './ReasoningPart';
+
+type PartWithText = Part & { text?: string; content?: string; value?: string; time?: { start?: number; end?: number } };
+
+interface AssistantTextPartProps {
+    part: Part;
+    messageId: string;
+    streamPhase: StreamPhase;
+    allowAnimation: boolean;
+    onContentChange?: (reason?: ContentChangeReason, messageId?: string) => void;
+    renderAsReasoning?: boolean;
+}
+
+const AssistantTextPart: React.FC<AssistantTextPartProps> = ({
+    part,
+    messageId,
+    streamPhase,
+    allowAnimation,
+    onContentChange,
+    renderAsReasoning = false,
+}) => {
+    const partWithText = part as PartWithText;
+    const rawText = partWithText.text;
+    const baseTextContent = typeof rawText === 'string' ? rawText : partWithText.content || partWithText.value || '';
+    const textContent = React.useMemo(() => {
+        if (renderAsReasoning) {
+            return formatReasoningText(baseTextContent);
+        }
+        return baseTextContent;
+    }, [baseTextContent, renderAsReasoning]);
+    const isStreamingPhase = streamPhase === 'streaming';
+    const isCooldownPhase = streamPhase === 'cooldown';
+    const wasStreamingRef = React.useRef(isStreamingPhase);
+
+    if (isStreamingPhase || isCooldownPhase) {
+        wasStreamingRef.current = true;
+        return null;
+    }
+
+    const time = partWithText.time;
+    const isFinalized = time && typeof time.end !== 'undefined';
+
+    if (!isFinalized && (!textContent || textContent.trim().length === 0)) {
+        return null;
+    }
+
+    if (!textContent || textContent.trim().length === 0) {
+        return null;
+    }
+
+    if (renderAsReasoning) {
+        return (
+            <ReasoningTimelineBlock
+                key={part.id || `${messageId}-text`}
+                text={textContent}
+                variant="justification"
+                onContentChange={onContentChange}
+                blockId={part.id || `${messageId}-reasoning-text`}
+            />
+        );
+    }
+
+    return (
+        <div className="group/assistant-text relative break-words" key={part.id || `${messageId}-text`}>
+            <MarkdownRenderer
+                content={textContent}
+                part={part}
+                messageId={messageId}
+                isAnimated={allowAnimation}
+                isStreaming={false}
+            />
+        </div>
+    );
+};
+
+export default AssistantTextPart;
diff --git a/packages/ui/src/components/chat/message/parts/JustificationBlock.tsx b/packages/ui/src/components/chat/message/parts/JustificationBlock.tsx
new file mode 100644
index 00000000..5a8d4324
--- /dev/null
+++ b/packages/ui/src/components/chat/message/parts/JustificationBlock.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import type { Part } from '@opencode-ai/sdk';
+import type { ContentChangeReason } from '@/hooks/useChatScrollManager';
+import { ReasoningTimelineBlock } from './ReasoningPart';
+
+type PartWithText = Part & { text?: string; content?: string };
+
+const cleanJustificationText = (text: string): string => {
+    if (typeof text !== 'string' || text.trim().length === 0) {
+        return '';
+    }
+
+    return text
+        .split('\n')
+        .map((line: string) => line.replace(/^>\s?/, '').trimEnd())
+        .filter((line: string) => line.trim().length > 0)
+        .join('\n')
+        .trim();
+};
+
+interface JustificationBlockProps {
+    part: Part;
+    messageId: string;
+    onContentChange?: (reason?: ContentChangeReason) => void;
+}
+
+const JustificationBlock: React.FC<JustificationBlockProps> = ({
+    part,
+    messageId,
+    onContentChange,
+}) => {
+    const partWithText = part as PartWithText;
+    const rawText = partWithText.text || partWithText.content || '';
+    const textContent = React.useMemo(() => cleanJustificationText(rawText), [rawText]);
+
+    const timeInfo = 'time' in part ? (part.time as { start: number; end?: number }) : null;
+    if (!timeInfo?.end) {
+        return null;
+    }
+
+    return (
+        <ReasoningTimelineBlock
+            text={textContent}
+            variant="justification"
+            onContentChange={onContentChange}
+            blockId={part.id || `${messageId}-justification`}
+        />
+    );
+};
+
+export default React.memo(JustificationBlock);
diff --git a/packages/ui/src/components/chat/message/parts/MigratingPart.tsx b/packages/ui/src/components/chat/message/parts/MigratingPart.tsx
new file mode 100644
index 00000000..54f71d3e
--- /dev/null
+++ b/packages/ui/src/components/chat/message/parts/MigratingPart.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface MigratingPartProps {
+
+    isMigrating: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+
+const MigratingPart: React.FC<MigratingPartProps> = ({
+    isMigrating,
+    children,
+    className,
+}) => {
+    return (
+        <div
+            className={cn(
+
+                'w-full overflow-hidden',
+                isMigrating && 'pointer-events-none',
+                className
+            )}
+            style={isMigrating ? { animation: 'oc-migrate-up 220ms ease-out forwards' } : undefined}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default React.memo(MigratingPart);
diff --git a/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx b/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx
new file mode 100644
index 00000000..bc55ccac
--- /dev/null
+++ b/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx
@@ -0,0 +1,259 @@
+import React from 'react';
+import { RiArrowDownSLine, RiArrowRightSLine, RiStackLine } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import type { TurnActivityPart } from '../../hooks/useTurnGrouping';
+import type { ToolPart as ToolPartType } from '@opencode-ai/sdk';
+import type { ContentChangeReason } from '@/hooks/useChatScrollManager';
+import type { ToolPopupContent } from '../types';
+import ToolPart from './ToolPart';
+import ReasoningPart from './ReasoningPart';
+import JustificationBlock from './JustificationBlock';
+import { FadeInOnReveal } from '../FadeInOnReveal';
+
+interface DiffStats {
+    additions: number;
+    deletions: number;
+    files: number;
+}
+
+interface ProgressiveGroupProps {
+    parts: TurnActivityPart[];
+    isExpanded: boolean;
+    onToggle: () => void;
+    syntaxTheme: Record<string, React.CSSProperties>;
+    isMobile: boolean;
+    expandedTools: Set<string>;
+    onToggleTool: (toolId: string) => void;
+    onShowPopup: (content: ToolPopupContent) => void;
+    onContentChange?: (reason?: ContentChangeReason) => void;
+    isWorking: boolean;
+    previewedPartIds: Set<string>;
+    diffStats?: DiffStats;
+}
+
+const getGroupSummary = (parts: TurnActivityPart[]): string => {
+    const counts = {
+        tools: parts.filter((p) => p.kind === 'tool').length,
+        reasoning: parts.filter((p) => p.kind === 'reasoning').length,
+        justifications: parts.filter((p) => p.kind === 'justification').length,
+    };
+
+    const segments: string[] = [];
+    if (counts.tools > 0) {
+        segments.push(`${counts.tools} tool${counts.tools > 1 ? 's' : ''}`);
+    }
+    if (counts.reasoning > 0) {
+        segments.push(`${counts.reasoning} reasoning`);
+    }
+    if (counts.justifications > 0) {
+        segments.push(`${counts.justifications} justification${counts.justifications > 1 ? 's' : ''}`);
+    }
+
+    return segments.join(', ');
+};
+
+const sortPartsByTime = (parts: TurnActivityPart[]): TurnActivityPart[] => {
+    return [...parts].sort((a, b) => {
+        const aTime = typeof a.endedAt === 'number' ? a.endedAt : undefined;
+        const bTime = typeof b.endedAt === 'number' ? b.endedAt : undefined;
+
+        if (aTime === undefined && bTime === undefined) return 0;
+        if (aTime === undefined) return 1;
+        if (bTime === undefined) return -1;
+
+        return aTime - bTime;
+    });
+};
+
+const getToolConnections = (
+    parts: TurnActivityPart[]
+): Record<string, { hasPrev: boolean; hasNext: boolean }> => {
+    const connections: Record<string, { hasPrev: boolean; hasNext: boolean }> = {};
+    const toolParts = parts.filter((p) => p.kind === 'tool');
+
+    toolParts.forEach((activity, index) => {
+        const partId = activity.part.id;
+        if (partId) {
+            connections[partId] = {
+                hasPrev: index > 0,
+                hasNext: index < toolParts.length - 1,
+            };
+        }
+    });
+
+    return connections;
+};
+
+const ProgressiveGroup: React.FC<ProgressiveGroupProps> = ({
+    parts,
+    isExpanded,
+    onToggle,
+    syntaxTheme,
+    isMobile,
+    expandedTools,
+    onToggleTool,
+    onContentChange,
+    isWorking,
+    previewedPartIds,
+    diffStats,
+}) => {
+    const previousExpandedRef = React.useRef<boolean | undefined>(isExpanded);
+
+    React.useEffect(() => {
+        if (previousExpandedRef.current === isExpanded) return;
+        previousExpandedRef.current = isExpanded;
+        onContentChange?.('structural');
+    }, [isExpanded, onContentChange]);
+
+    const displayParts = React.useMemo(() => {
+        if (!isWorking) {
+
+            return sortPartsByTime(parts);
+        }
+
+        if (isExpanded) {
+
+            return sortPartsByTime(parts);
+        }
+
+        return sortPartsByTime(
+            parts.filter((activity) => {
+                const partId = activity.part.id;
+                return partId && previewedPartIds.has(activity.id);
+            })
+        );
+    }, [parts, isWorking, isExpanded, previewedPartIds]);
+
+    const summary = getGroupSummary(displayParts);
+    const toolConnections = getToolConnections(displayParts);
+
+    if (displayParts.length === 0) {
+        return null;
+    }
+
+    return (
+        <FadeInOnReveal>
+            <div className="my-1">
+                {}
+                <div
+                    className={cn(
+                        'group/tool flex items-center gap-2 pr-2 pl-px pt-0 pb-1.5 rounded-xl cursor-pointer'
+                    )}
+                    onClick={onToggle}
+                >
+                <div className="flex items-center gap-2 flex-shrink-0">
+                    {}
+                    <div className="relative h-3.5 w-3.5 flex-shrink-0">
+                        {}
+                        <div
+                            className={cn(
+                                'absolute inset-0 transition-opacity',
+                                isExpanded && 'opacity-0',
+                                !isExpanded && !isMobile && 'group-hover/tool:opacity-0'
+                            )}
+                        >
+                            <RiStackLine className="h-3.5 w-3.5" />
+                        </div>
+                        {}
+                        <div
+                            className={cn(
+                                'absolute inset-0 transition-opacity flex items-center justify-center',
+                                isExpanded && 'opacity-100',
+                                !isExpanded && isMobile && 'opacity-0',
+                                !isExpanded && !isMobile && 'opacity-0 group-hover/tool:opacity-100'
+                            )}
+                        >
+                            {isExpanded ? (
+                                <RiArrowDownSLine className="h-3.5 w-3.5" />
+                            ) : (
+                                <RiArrowRightSLine className="h-3.5 w-3.5" />
+                            )}
+                        </div>
+                    </div>
+                    <span className="typography-meta font-medium">Activity</span>
+                </div>
+
+                {(summary || diffStats) && (
+                    <div className="flex-1 min-w-0 typography-meta text-muted-foreground/70 flex items-center gap-2">
+                        {summary && (
+                            <span className="truncate block">{summary}</span>
+                        )}
+                        {diffStats && (diffStats.additions > 0 || diffStats.deletions > 0) && (
+                            <span className="flex-shrink-0 leading-none">
+                                <span className="text-[color:var(--status-success)]">
+                                    +{Math.max(0, diffStats.additions)}
+                                </span>
+                                <span className="text-muted-foreground/50">/</span>
+                                <span className="text-destructive">
+                                    -{Math.max(0, diffStats.deletions)}
+                                </span>
+                            </span>
+                        )}
+                    </div>
+                )}
+            </div>
+
+            {}
+            {isExpanded && (
+                <div
+                    className={cn(
+                        'relative pr-2 pb-1 pt-1 pl-[1.4375rem]',
+                        'before:absolute before:left-[0.4375rem] before:w-px before:bg-border/80 before:content-[""]',
+                        'before:top-[-0.25rem] before:bottom-0'
+                    )}
+                >
+                    {displayParts.map((activity, index) => {
+                        const partId = activity.part.id || `group-part-${index}`;
+                        const connection = toolConnections[partId];
+
+                        switch (activity.kind) {
+                            case 'tool':
+                                return (
+                                    <FadeInOnReveal key={partId}>
+                                        <ToolPart
+                                            part={activity.part as ToolPartType}
+                                            isExpanded={expandedTools.has(partId)}
+                                            onToggle={onToggleTool}
+                                            syntaxTheme={syntaxTheme}
+                                            isMobile={isMobile}
+                                            onContentChange={onContentChange}
+                                            hasPrevTool={connection?.hasPrev ?? false}
+                                            hasNextTool={connection?.hasNext ?? false}
+                                        />
+                                    </FadeInOnReveal>
+                                );
+
+                            case 'reasoning':
+                                return (
+                                    <FadeInOnReveal key={partId}>
+                                        <ReasoningPart
+                                            part={activity.part}
+                                            messageId={activity.messageId}
+                                            onContentChange={onContentChange}
+                                        />
+                                    </FadeInOnReveal>
+                                );
+
+                            case 'justification':
+                                return (
+                                    <FadeInOnReveal key={partId}>
+                                        <JustificationBlock
+                                            part={activity.part}
+                                            messageId={activity.messageId}
+                                            onContentChange={onContentChange}
+                                        />
+                                    </FadeInOnReveal>
+                                );
+
+                            default:
+                                return null;
+                        }
+                    })}
+                </div>
+            )}
+            </div>
+        </FadeInOnReveal>
+    );
+};
+
+export default React.memo(ProgressiveGroup);
diff --git a/packages/ui/src/components/chat/message/parts/ReasoningPart.tsx b/packages/ui/src/components/chat/message/parts/ReasoningPart.tsx
new file mode 100644
index 00000000..8ca5d282
--- /dev/null
+++ b/packages/ui/src/components/chat/message/parts/ReasoningPart.tsx
@@ -0,0 +1,181 @@
+import React from 'react';
+import type { ComponentType } from 'react';
+import type { Part } from '@opencode-ai/sdk';
+import { RiArrowDownSLine, RiArrowRightSLine, RiBrainAi3Line, RiChatAi3Line } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import type { ContentChangeReason } from '@/hooks/useChatScrollManager';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+
+type PartWithText = Part & { text?: string; content?: string };
+
+export type ReasoningVariant = 'thinking' | 'justification';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type IconComponent = ComponentType<any>;
+
+const variantConfig: Record<
+    ReasoningVariant,
+    { label: string; Icon: IconComponent }
+> = {
+    thinking: { label: 'Thinking', Icon: RiBrainAi3Line },
+    justification: { label: 'Justification', Icon: RiChatAi3Line },
+};
+
+const cleanReasoningText = (text: string): string => {
+    if (typeof text !== 'string' || text.trim().length === 0) {
+        return '';
+    }
+
+    return text
+        .split('\n')
+        .map((line: string) => line.replace(/^>\s?/, '').trimEnd())
+        .filter((line: string) => line.trim().length > 0)
+        .join('\n')
+        .trim();
+};
+
+const getReasoningSummary = (text: string): string => {
+    if (!text) {
+        return '';
+    }
+
+    const trimmed = text.trim();
+    const newlineIndex = trimmed.indexOf('\n');
+    const periodIndex = trimmed.indexOf('.');
+
+    const cutoffCandidates = [
+        newlineIndex >= 0 ? newlineIndex : Infinity,
+        periodIndex >= 0 ? periodIndex : Infinity,
+    ];
+    const cutoff = Math.min(...cutoffCandidates);
+
+    if (!Number.isFinite(cutoff)) {
+        return trimmed;
+    }
+
+    return trimmed.substring(0, cutoff).trim();
+};
+
+type ReasoningTimelineBlockProps = {
+    text: string;
+    variant: ReasoningVariant;
+    onContentChange?: (reason?: ContentChangeReason) => void;
+    blockId: string;
+};
+
+export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
+    text,
+    variant,
+    onContentChange,
+    blockId,
+}) => {
+    const [isExpanded, setIsExpanded] = React.useState(false);
+
+    const summary = React.useMemo(() => getReasoningSummary(text), [text]);
+    const { label, Icon } = variantConfig[variant];
+
+    React.useEffect(() => {
+        if (text.trim().length === 0) {
+            return;
+        }
+        onContentChange?.('structural');
+    }, [onContentChange, isExpanded, text]);
+
+    if (!text || text.trim().length === 0) {
+        return null;
+    }
+
+    return (
+        <div className="my-1" data-reasoning-block-id={blockId}>
+            <div
+                className={cn(
+                    'group/tool flex items-center gap-2 pr-2 pl-px py-1.5 rounded-xl cursor-pointer'
+                )}
+                onClick={() => setIsExpanded((prev) => !prev)}
+            >
+                <div className="flex items-center gap-2 flex-shrink-0">
+                    <div className="relative h-3.5 w-3.5 flex-shrink-0">
+                        <div
+                            className={cn(
+                                'absolute inset-0 transition-opacity',
+                                isExpanded && 'opacity-0',
+                                !isExpanded && 'group-hover/tool:opacity-0'
+                            )}
+                        >
+                            <Icon className="h-3.5 w-3.5" />
+                        </div>
+                        <div
+                            className={cn(
+                                'absolute inset-0 transition-opacity flex items-center justify-center',
+                                isExpanded && 'opacity-100',
+                                !isExpanded && 'opacity-0 group-hover/tool:opacity-100'
+                            )}
+                        >
+                            {isExpanded ? <RiArrowDownSLine className="h-3.5 w-3.5" /> : <RiArrowRightSLine className="h-3.5 w-3.5" />}
+                        </div>
+                    </div>
+                    <span className="typography-meta font-medium">{label}</span>
+                </div>
+
+                {summary && (
+                    <div className="flex-1 min-w-0 typography-meta text-muted-foreground/70">
+                        <span className="truncate block">{summary}</span>
+                    </div>
+                )}
+            </div>
+
+            {isExpanded && (
+                <div
+                    className={cn(
+                        'relative pr-2 pb-2 pt-2 pl-[1.4375rem]',
+                        'before:absolute before:left-[0.4375rem] before:w-px before:bg-border/80 before:content-[""]',
+                        'before:top-[-0.25rem] before:bottom-0'
+                    )}
+                >
+                    <ScrollableOverlay
+                        as="blockquote"
+                        outerClassName="max-h-80"
+                        className="whitespace-pre-wrap break-words typography-meta italic text-muted-foreground/70 p-0"
+                    >
+                        {text}
+                    </ScrollableOverlay>
+                </div>
+            )}
+        </div>
+    );
+};
+
+type ReasoningPartProps = {
+    part: Part;
+    onContentChange?: (reason?: ContentChangeReason) => void;
+    messageId: string;
+};
+
+const ReasoningPart: React.FC<ReasoningPartProps> = ({
+    part,
+    onContentChange,
+    messageId,
+}) => {
+    const partWithText = part as PartWithText;
+    const rawText = partWithText.text || partWithText.content || '';
+    const textContent = React.useMemo(() => cleanReasoningText(rawText), [rawText]);
+
+    const timeInfo = 'time' in part ? (part.time as { start: number; end?: number }) : null;
+    if (!timeInfo?.end) {
+        return null;
+    }
+
+    return (
+        <ReasoningTimelineBlock
+            text={textContent}
+            variant="thinking"
+            onContentChange={onContentChange}
+            blockId={part.id || `${messageId}-reasoning`}
+        />
+    );
+};
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const formatReasoningText = (text: string): string => cleanReasoningText(text);
+
+export default ReasoningPart;
diff --git a/packages/ui/src/components/chat/message/parts/ToolPart.tsx b/packages/ui/src/components/chat/message/parts/ToolPart.tsx
new file mode 100644
index 00000000..50f0a45c
--- /dev/null
+++ b/packages/ui/src/components/chat/message/parts/ToolPart.tsx
@@ -0,0 +1,765 @@
+
+import React from 'react';
+import { RiArrowDownSLine, RiArrowRightSLine, RiFileEditLine, RiFileSearchLine, RiFileTextLine, RiFolder6Line, RiGitBranchLine, RiGlobalLine, RiListCheck3, RiMenuSearchLine, RiPencilLine, RiTerminalBoxLine, RiToolsLine } from '@remixicon/react';
+import { Streamdown } from 'streamdown';
+import { cn } from '@/lib/utils';
+import { getToolMetadata, getLanguageFromExtension } from '@/lib/toolHelpers';
+import type { ToolPart as ToolPartType, ToolState as ToolStateUnion } from '@opencode-ai/sdk';
+import { toolDisplayStyles } from '@/lib/typography';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import type { ContentChangeReason } from '@/hooks/useChatScrollManager';
+
+import {
+    renderListOutput,
+    renderGrepOutput,
+    renderGlobOutput,
+    renderTodoOutput,
+    renderWebSearchOutput,
+    parseDiffToUnified,
+    formatEditOutput,
+    detectLanguageFromOutput,
+    formatInputForDisplay,
+    hasLspDiagnostics,
+} from '../toolRenderers';
+
+type ToolStateWithMetadata = ToolStateUnion & { metadata?: Record<string, unknown>; input?: Record<string, unknown>; output?: string; error?: string; time?: { start: number; end?: number } };
+
+interface ToolPartProps {
+    part: ToolPartType;
+    isExpanded: boolean;
+    onToggle: (toolId: string) => void;
+    syntaxTheme: { [key: string]: React.CSSProperties };
+    isMobile: boolean;
+    onContentChange?: (reason?: ContentChangeReason) => void;
+    hasPrevTool?: boolean;
+    hasNextTool?: boolean;
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const getToolIcon = (toolName: string) => {
+    const iconClass = 'h-3.5 w-3.5 flex-shrink-0';
+    const tool = toolName.toLowerCase();
+
+    if (tool === 'edit' || tool === 'multiedit' || tool === 'str_replace' || tool === 'str_replace_based_edit_tool') {
+        return <RiPencilLine className={iconClass} />;
+    }
+    if (tool === 'write' || tool === 'create' || tool === 'file_write') {
+        return <RiFileEditLine className={iconClass} />;
+    }
+    if (tool === 'read' || tool === 'view' || tool === 'file_read' || tool === 'cat') {
+        return <RiFileTextLine className={iconClass} />;
+    }
+    if (tool === 'bash' || tool === 'shell' || tool === 'cmd' || tool === 'terminal') {
+        return <RiTerminalBoxLine className={iconClass} />;
+    }
+    if (tool === 'list' || tool === 'ls' || tool === 'dir' || tool === 'list_files') {
+        return <RiFolder6Line className={iconClass} />;
+    }
+    if (tool === 'search' || tool === 'grep' || tool === 'find' || tool === 'ripgrep') {
+        return <RiMenuSearchLine className={iconClass} />;
+    }
+    if (tool === 'glob') {
+        return <RiFileSearchLine className={iconClass} />;
+    }
+    if (tool === 'fetch' || tool === 'curl' || tool === 'wget' || tool === 'webfetch') {
+        return <RiGlobalLine className={iconClass} />;
+    }
+    if (
+        tool === 'web-search' ||
+        tool === 'websearch' ||
+        tool === 'search_web' ||
+        tool === 'codesearch' ||
+        tool === 'google' ||
+        tool === 'bing' ||
+        tool === 'duckduckgo' ||
+        tool === 'perplexity'
+    ) {
+        return <RiGlobalLine className={iconClass} />;
+    }
+    if (tool === 'todowrite' || tool === 'todoread') {
+        return <RiListCheck3 className={iconClass} />;
+    }
+    if (tool.startsWith('git')) {
+        return <RiGitBranchLine className={iconClass} />;
+    }
+    return <RiToolsLine className={iconClass} />;
+};
+
+const formatDuration = (start: number, end?: number) => {
+    const duration = end ? end - start : Date.now() - start;
+    const seconds = duration / 1000;
+
+    const displaySeconds = seconds < 0.05 && end !== undefined ? 0.1 : seconds;
+    return `${displaySeconds.toFixed(1)}s`;
+};
+
+const parseDiffStats = (metadata?: Record<string, unknown>): { added: number; removed: number } | null => {
+    if (!metadata?.diff || typeof metadata.diff !== 'string') return null;
+
+    const lines = metadata.diff.split('\n');
+    let added = 0;
+    let removed = 0;
+
+    for (const line of lines) {
+        if (line.startsWith('+') && !line.startsWith('+++')) added++;
+        if (line.startsWith('-') && !line.startsWith('---')) removed++;
+    }
+
+    if (added === 0 && removed === 0) return null;
+    return { added, removed };
+};
+
+const getRelativePath = (absolutePath: string, currentDirectory: string, isMobile: boolean): string => {
+
+    if (isMobile) {
+        return absolutePath.split('/').pop() || absolutePath;
+    }
+
+    if (absolutePath.startsWith(currentDirectory)) {
+        const relativePath = absolutePath.substring(currentDirectory.length);
+
+        return relativePath.startsWith('/') ? relativePath.substring(1) : relativePath;
+    }
+
+    return absolutePath;
+};
+
+const getToolDescription = (part: ToolPartType, state: ToolStateUnion, isMobile: boolean, currentDirectory: string): string => {
+    const stateWithData = state as ToolStateWithMetadata;
+    const metadata = stateWithData.metadata;
+    const input = stateWithData.input;
+
+    if ((part.tool === 'edit' || part.tool === 'multiedit') && input) {
+        const filePath = input?.filePath || input?.file_path || input?.path || metadata?.filePath || metadata?.file_path || metadata?.path;
+        if (typeof filePath === 'string') {
+            return getRelativePath(filePath, currentDirectory, isMobile);
+        }
+    }
+
+    if ((part.tool === 'read' || part.tool === 'write') && input) {
+        const filePath = input?.filePath || input?.file_path || input?.path;
+        if (typeof filePath === 'string') {
+            return getRelativePath(filePath, currentDirectory, isMobile);
+        }
+    }
+
+    if (part.tool === 'bash' && input?.command && typeof input.command === 'string') {
+        const firstLine = input.command.split('\n')[0];
+        return isMobile ? firstLine.substring(0, 50) : firstLine.substring(0, 100);
+    }
+
+    if (part.tool === 'task' && input?.description && typeof input.description === 'string') {
+        return isMobile ? input.description.substring(0, 40) : input.description.substring(0, 80);
+    }
+
+    const desc = input?.description || metadata?.description || ('title' in state && state.title) || '';
+    return typeof desc === 'string' ? desc : '';
+};
+
+interface ToolScrollableSectionProps {
+    children: React.ReactNode;
+    maxHeightClass?: string;
+    className?: string;
+    outerClassName?: string;
+    disableHorizontal?: boolean;
+}
+
+const ToolScrollableSection: React.FC<ToolScrollableSectionProps> = ({
+    children,
+    maxHeightClass = 'max-h-[60vh]',
+    className,
+    outerClassName,
+    disableHorizontal = false,
+}) => (
+    <ScrollableOverlay
+        outerClassName={cn('w-full min-w-0 flex-none overflow-hidden', maxHeightClass, outerClassName)}
+        className={cn('p-2 rounded-xl w-full min-w-0 border border-border/20 bg-muted/30', className)}
+        disableHorizontal={disableHorizontal}
+    >
+        <div className="w-full min-w-0">
+            {children}
+        </div>
+    </ScrollableOverlay>
+);
+
+interface DiffPreviewProps {
+    diff: string;
+    syntaxTheme: { [key: string]: React.CSSProperties };
+    input?: ToolStateWithMetadata['input'];
+}
+
+const DiffPreview: React.FC<DiffPreviewProps> = ({ diff, syntaxTheme, input }) => (
+    <div className="typography-meta px-1 pb-1 pt-0 space-y-0">
+        {parseDiffToUnified(diff).map((hunk, hunkIdx) => (
+            <div key={hunkIdx} className="-mx-1 px-1 border-b border-border/20 last:border-b-0">
+                <div className="bg-muted/20 px-2 py-1 typography-meta font-medium text-muted-foreground border-b border-border/10 break-words -mx-1">
+                    {`${hunk.file} (line ${hunk.oldStart})`}
+                </div>
+
+                <div>
+                    {hunk.lines.map((line, lineIdx) => (
+                        <div
+                            key={lineIdx}
+                            className={cn(
+                                'typography-meta font-mono px-2 py-0.5 flex -mx-2',
+                                line.type === 'context' && 'bg-transparent',
+                                line.type === 'removed' && 'bg-transparent',
+                                line.type === 'added' && 'bg-transparent'
+                            )}
+                            style={
+                                line.type === 'removed'
+                                    ? { backgroundColor: 'var(--tools-edit-removed-bg)' }
+                                    : line.type === 'added'
+                                        ? { backgroundColor: 'var(--tools-edit-added-bg)' }
+                                        : {}
+                            }
+                        >
+                            <span className="text-muted-foreground/60 w-8 flex-shrink-0 text-right pr-2 self-start select-none">
+                                {line.lineNumber || ''}
+                            </span>
+                            <div className="flex-1 min-w-0">
+                                <SyntaxHighlighter
+                                    style={syntaxTheme}
+                                    language={getLanguageFromExtension(typeof input?.file_path === 'string' ? input.file_path : typeof input?.filePath === 'string' ? input.filePath : hunk.file) || 'text'}
+                                    PreTag="div"
+                                    wrapLines
+                                    wrapLongLines
+                                    customStyle={{
+                                        margin: 0,
+                                        padding: 0,
+                                        fontSize: 'inherit',
+                                        background: 'transparent !important',
+                                        borderRadius: 0,
+                                        overflow: 'visible',
+                                        whiteSpace: 'pre-wrap',
+                                        wordBreak: 'break-all',
+                                        overflowWrap: 'anywhere',
+                                    }}
+                                    codeTagProps={{
+                                        style: { background: 'transparent !important' },
+                                    }}
+                                >
+                                    {line.content}
+                                </SyntaxHighlighter>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        ))}
+    </div>
+);
+
+interface WriteInputPreviewProps {
+    content: string;
+    syntaxTheme: { [key: string]: React.CSSProperties };
+    filePath?: string;
+    displayPath: string;
+}
+
+const WriteInputPreview: React.FC<WriteInputPreviewProps> = ({ content, syntaxTheme, filePath, displayPath }) => {
+    const lines = content.split('\n');
+    const language = getLanguageFromExtension(filePath ?? '') || detectLanguageFromOutput(content, 'write', filePath ? { filePath } : undefined);
+
+    const lineCount = Math.max(lines.length, 1);
+    const headerLineLabel = lineCount === 1 ? 'line 1' : `lines 1-${lineCount}`;
+
+    return (
+        <div className="w-full min-w-0">
+            <div className="bg-muted/20 px-2 py-1 typography-meta font-medium text-muted-foreground border border-border/10 rounded-lg mb-1">
+                {`${displayPath} (${headerLineLabel})`}
+            </div>
+            <div className="space-y-0">
+                {lines.map((line, lineIdx) => (
+                    <div key={lineIdx} className="typography-meta font-mono px-2 py-0.5 flex -mx-1">
+                        <span className="text-muted-foreground/60 w-8 flex-shrink-0 text-right pr-2 self-start select-none">
+                            {lineIdx + 1}
+                        </span>
+                        <div className="flex-1 min-w-0">
+                            <SyntaxHighlighter
+                                style={syntaxTheme}
+                                language={language || 'text'}
+                                PreTag="div"
+                                wrapLines
+                                wrapLongLines
+                                customStyle={{
+                                    margin: 0,
+                                    padding: 0,
+                                    fontSize: 'inherit',
+                                    background: 'transparent !important',
+                                    borderRadius: 0,
+                                    overflow: 'visible',
+                                    whiteSpace: 'pre-wrap',
+                                    wordBreak: 'break-all',
+                                    overflowWrap: 'anywhere',
+                                }}
+                                codeTagProps={{
+                                    style: { background: 'transparent !important' },
+                                }}
+                            >
+                                {line || ' '}
+                            </SyntaxHighlighter>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+interface ToolExpandedContentProps {
+    part: ToolPartType;
+    state: ToolStateUnion;
+    syntaxTheme: { [key: string]: React.CSSProperties };
+    isMobile: boolean;
+    currentDirectory: string;
+    hasPrevTool: boolean;
+    hasNextTool: boolean;
+}
+
+const ToolExpandedContent: React.FC<ToolExpandedContentProps> = ({
+    part,
+    state,
+    syntaxTheme,
+    isMobile,
+    currentDirectory,
+    hasPrevTool,
+    hasNextTool,
+}) => {
+    const stateWithData = state as ToolStateWithMetadata;
+    const metadata = stateWithData.metadata;
+    const input = stateWithData.input;
+    const rawOutput = stateWithData.output;
+    const hasStringOutput = typeof rawOutput === 'string' && rawOutput.length > 0;
+    const outputString = typeof rawOutput === 'string' ? rawOutput : '';
+
+    const diffContent = typeof metadata?.diff === 'string' ? (metadata.diff as string) : null;
+    const writeFilePath = part.tool === 'write'
+        ? typeof input?.filePath === 'string'
+            ? input.filePath
+            : typeof input?.file_path === 'string'
+                ? input.file_path
+                : typeof input?.path === 'string'
+                    ? input.path
+                    : undefined
+        : undefined;
+    const writeInputContent = part.tool === 'write'
+        ? typeof (input as { content?: unknown })?.content === 'string'
+            ? (input as { content?: string }).content
+            : typeof (input as { text?: unknown })?.text === 'string'
+                ? (input as { text?: string }).text
+                : null
+        : null;
+    const shouldShowWriteInputPreview = part.tool === 'write' && !!writeInputContent;
+    const writeDisplayPath = shouldShowWriteInputPreview
+        ? (writeFilePath ? getRelativePath(writeFilePath, currentDirectory, isMobile) : 'New file')
+        : null;
+
+    const inputTextContent = React.useMemo(() => {
+        if (!input || typeof input !== 'object' || Object.keys(input).length === 0) {
+            return '';
+        }
+
+        if ('command' in input && typeof input.command === 'string' && part.tool === 'bash') {
+            return formatInputForDisplay(input, part.tool);
+        }
+
+        if (typeof (input as { content?: unknown }).content === 'string') {
+            return (input as { content?: string }).content ?? '';
+        }
+
+        return formatInputForDisplay(input, part.tool);
+    }, [input, part.tool]);
+    const hasInputText = inputTextContent.trim().length > 0;
+
+    const renderScrollableBlock = (
+        content: React.ReactNode,
+        options?: { maxHeightClass?: string; className?: string; disableHorizontal?: boolean; outerClassName?: string }
+    ) => (
+        <ToolScrollableSection
+            maxHeightClass={options?.maxHeightClass}
+            className={options?.className}
+            disableHorizontal={options?.disableHorizontal}
+            outerClassName={options?.outerClassName}
+        >
+            {content}
+        </ToolScrollableSection>
+    );
+
+    const renderResultContent = () => {
+        if (part.tool === 'todowrite' || part.tool === 'todoread') {
+            if (state.status === 'completed' && hasStringOutput) {
+                const todoContent = renderTodoOutput(outputString, { unstyled: true });
+                return renderScrollableBlock(
+                    todoContent ?? (
+                        <div className="typography-meta text-muted-foreground">Unable to parse todo list</div>
+                    )
+                );
+            }
+
+            if (state.status === 'error' && 'error' in state) {
+                return (
+                    <div>
+                        <div className="typography-meta font-medium text-muted-foreground mb-1">Error:</div>
+                        <div className="typography-meta p-2 rounded-xl border" style={{
+                            backgroundColor: 'var(--status-error-background)',
+                            color: 'var(--status-error)',
+                            borderColor: 'var(--status-error-border)',
+                        }}>
+                            {state.error}
+                        </div>
+                    </div>
+                );
+            }
+
+            return <div className="typography-meta text-muted-foreground">Processing todo list...</div>;
+        }
+
+        if (part.tool === 'list' && hasStringOutput) {
+            const listOutput = renderListOutput(outputString, { unstyled: true });
+            return renderScrollableBlock(
+                listOutput ?? (
+                    <pre className="typography-meta font-mono whitespace-pre-wrap break-words w-full min-w-0">
+                        {outputString}
+                    </pre>
+                )
+            );
+        }
+
+        if (part.tool === 'grep' && hasStringOutput) {
+            const grepOutput = renderGrepOutput(outputString, isMobile, { unstyled: true });
+            return renderScrollableBlock(
+                grepOutput ?? (
+                    <pre className="typography-meta font-mono whitespace-pre-wrap break-words w-full min-w-0">
+                        {outputString}
+                    </pre>
+                )
+            );
+        }
+
+        if (part.tool === 'glob' && hasStringOutput) {
+            const globOutput = renderGlobOutput(outputString, isMobile, { unstyled: true });
+            return renderScrollableBlock(
+                globOutput ?? (
+                    <pre className="typography-meta font-mono whitespace-pre-wrap break-words w-full min-w-0">
+                        {outputString}
+                    </pre>
+                )
+            );
+        }
+
+        if (part.tool === 'task' && hasStringOutput) {
+            return renderScrollableBlock(
+                <div className="w-full min-w-0" style={{ fontSize: 'var(--text-code)' }}>
+                    <Streamdown mode="static" className="streamdown-content streamdown-tool">
+                        {outputString}
+                    </Streamdown>
+                </div>
+            );
+        }
+
+        if ((part.tool === 'web-search' || part.tool === 'websearch' || part.tool === 'search_web') && hasStringOutput) {
+            const webSearchContent = renderWebSearchOutput(outputString, syntaxTheme, { unstyled: true });
+            return renderScrollableBlock(
+                webSearchContent ?? (
+                    <pre className="typography-meta font-mono whitespace-pre-wrap break-words w-full min-w-0">
+                        {outputString}
+                    </pre>
+                )
+            );
+        }
+
+        if (part.tool === 'codesearch' && hasStringOutput) {
+            return renderScrollableBlock(
+                <div className="w-full min-w-0" style={{ fontSize: 'var(--text-code)' }}>
+                    <Streamdown mode="static" className="streamdown-content streamdown-tool">
+                        {outputString}
+                    </Streamdown>
+                </div>
+            );
+        }
+
+        if ((part.tool === 'edit' || part.tool === 'multiedit') && ((!hasStringOutput && diffContent) || (outputString.trim().length === 0 || hasLspDiagnostics(outputString))) && diffContent) {
+            return renderScrollableBlock(
+                <DiffPreview diff={diffContent} syntaxTheme={syntaxTheme} input={input} />,
+                { className: 'p-1' }
+            );
+        }
+
+        if (hasStringOutput && outputString.trim()) {
+            if (part.tool === 'read') {
+                const formattedOutput = formatEditOutput(outputString, part.tool, metadata);
+                const lines = formattedOutput.split('\n');
+                const offset = typeof input?.offset === 'number' ? input.offset : 0;
+                const limit = typeof input?.limit === 'number' ? input.limit : undefined;
+                const isInfoMessage = (line: string) => line.trim().startsWith('(');
+
+                return renderScrollableBlock(
+                    <div className="typography-meta w-full min-w-0 space-y-1">
+                        {lines.map((line: string, idx: number) => {
+                            const isInfo = isInfoMessage(line);
+                            const lineNumber = offset + idx + 1;
+                            const shouldShowLineNumber = !isInfo && (limit === undefined || idx < limit);
+
+                            return (
+                                <div key={idx} className={cn('typography-meta font-mono flex w-full min-w-0', isInfo && 'text-muted-foreground/70 italic')}>
+                                    <span className="text-muted-foreground/60 w-8 flex-shrink-0 text-right pr-3 self-start select-none">
+                                        {shouldShowLineNumber ? lineNumber : ''}
+                                    </span>
+                                    <div className="flex-1 min-w-0">
+                                        {isInfo ? (
+                                            <div className="whitespace-pre-wrap break-words">{line}</div>
+                                        ) : (
+                                            <SyntaxHighlighter
+                                                style={syntaxTheme}
+                                                language={detectLanguageFromOutput(formattedOutput, part.tool, input as Record<string, unknown>)}
+                                                PreTag="div"
+                                                wrapLines
+                                                wrapLongLines
+                                                customStyle={{
+                                                    margin: 0,
+                                                    padding: 0,
+                                                    fontSize: 'inherit',
+                                                    background: 'transparent !important',
+                                                    borderRadius: 0,
+                                                    overflow: 'visible',
+                                                    whiteSpace: 'pre-wrap',
+                                                    wordBreak: 'break-all',
+                                                    overflowWrap: 'anywhere',
+                                                }}
+                                                codeTagProps={{
+                                                    style: {
+                                                        background: 'transparent !important',
+                                                    },
+                                                }}
+                                            >
+                                                {line}
+                                            </SyntaxHighlighter>
+                                        )}
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>,
+                    { className: 'p-1' }
+                );
+            }
+
+            return renderScrollableBlock(
+                <SyntaxHighlighter
+                    style={syntaxTheme}
+                    language={detectLanguageFromOutput(formatEditOutput(outputString, part.tool, metadata), part.tool, input)}
+                    PreTag="div"
+                    customStyle={{
+                        ...toolDisplayStyles.getCollapsedStyles(),
+                        padding: 0,
+                        overflow: 'visible',
+                    }}
+                    codeTagProps={{
+                        style: {
+                            background: 'transparent !important',
+                        },
+                    }}
+                    wrapLongLines
+                >
+                    {formatEditOutput(outputString, part.tool, metadata)}
+                </SyntaxHighlighter>,
+                { className: 'p-1' }
+            );
+        }
+
+        return renderScrollableBlock(
+            <div className="typography-meta text-muted-foreground/70">No output produced</div>,
+            { maxHeightClass: 'max-h-60' }
+        );
+    };
+
+    return (
+        <div
+            className={cn(
+                'relative pr-2 pb-2 pt-2 space-y-2 pl-[1.4375rem]',
+                'before:absolute before:left-[0.4375rem] before:w-px before:bg-border/80 before:content-[""]',
+                hasPrevTool ? 'before:top-[-0.45rem]' : 'before:top-[-0.25rem]',
+                hasNextTool ? 'before:bottom-[-0.6rem]' : 'before:bottom-0'
+            )}
+        >
+            {(part.tool === 'todowrite' || part.tool === 'todoread') ? (
+                renderResultContent()
+            ) : (
+                <>
+                    {shouldShowWriteInputPreview ? (
+                        <div className="my-1">
+                            {renderScrollableBlock(
+                                <WriteInputPreview
+                                    content={writeInputContent as string}
+                                    syntaxTheme={syntaxTheme}
+                                    filePath={writeFilePath}
+                                    displayPath={writeDisplayPath ?? 'New file'}
+                                />
+                            )}
+                        </div>
+                    ) : hasInputText ? (
+                        <div className="my-1">
+                            {renderScrollableBlock(
+                                <blockquote className="whitespace-pre-wrap break-words typography-meta italic text-muted-foreground/70">
+                                    {inputTextContent}
+                                </blockquote>,
+                                { maxHeightClass: 'max-h-60' }
+                            )}
+                        </div>
+                    ) : null}
+
+                    {part.tool !== 'write' && state.status === 'completed' && 'output' in state && (
+                        <div>
+                            <div className="typography-meta font-medium text-muted-foreground/80 mb-1">
+                                Result:
+                            </div>
+                            {renderResultContent()}
+                        </div>
+                    )}
+
+                    {state.status === 'error' && 'error' in state && (
+                        <div>
+                            <div className="typography-meta font-medium text-muted-foreground/80 mb-1">Error:</div>
+                            <div className="typography-meta p-2 rounded-xl border" style={{
+                                backgroundColor: 'var(--status-error-background)',
+                                color: 'var(--status-error)',
+                                borderColor: 'var(--status-error-border)',
+                            }}>
+                                {state.error}
+                            </div>
+                        </div>
+                    )}
+                </>
+            )}
+        </div>
+    );
+};
+
+const ToolPart: React.FC<ToolPartProps> = ({ part, isExpanded, onToggle, syntaxTheme, isMobile, onContentChange, hasPrevTool = false, hasNextTool = false }) => {
+    const state = part.state;
+    const currentDirectory = useDirectoryStore((s) => s.currentDirectory);
+
+    const isFinalized = state.status === 'completed' || state.status === 'error';
+    const isRunning = state.status === 'running';
+    const isError = state.status === 'error';
+
+    const [currentTime, setCurrentTime] = React.useState(Date.now());
+
+    React.useEffect(() => {
+        if (isRunning) {
+            const timer = setInterval(() => {
+                setCurrentTime(Date.now());
+            }, 100);
+            return () => clearInterval(timer);
+        }
+    }, [isRunning]);
+
+    const previousExpandedRef = React.useRef<boolean | undefined>(isExpanded);
+
+    React.useEffect(() => {
+        if (!isFinalized) {
+            return;
+        }
+        if (previousExpandedRef.current === isExpanded) {
+            return;
+        }
+        previousExpandedRef.current = isExpanded;
+        if (typeof isExpanded === 'boolean') {
+            onContentChange?.('structural');
+        }
+    }, [isExpanded, isFinalized, onContentChange]);
+
+    const stateWithData = state as ToolStateWithMetadata;
+    const metadata = stateWithData.metadata;
+    const diffStats = (part.tool === 'edit' || part.tool === 'multiedit') ? parseDiffStats(metadata) : null;
+    const description = getToolDescription(part, state, isMobile, currentDirectory);
+    const displayName = getToolMetadata(part.tool).displayName;
+
+    if (!isFinalized) {
+        return null;
+    }
+
+    return (
+        <div className="my-1">
+            {}
+            <div
+                className={cn(
+                    'group/tool flex items-center gap-2 pr-2 pl-px py-1.5 rounded-xl cursor-pointer'
+                )}
+                onClick={() => onToggle(part.id)}
+            >
+                <div className="flex items-center gap-2 flex-shrink-0">
+                    {}
+                    <div className="relative h-3.5 w-3.5 flex-shrink-0">
+                        {}
+                        <div
+                            className={cn(
+                                'absolute inset-0 transition-opacity',
+                                isExpanded && 'opacity-0',
+                                !isExpanded && !isMobile && 'group-hover/tool:opacity-0'
+                            )}
+                            style={isError ? { color: 'var(--status-error)' } : {}}
+                        >
+                            {getToolIcon(part.tool)}
+                        </div>
+                        {}
+                        <div
+                            className={cn(
+                                'absolute inset-0 transition-opacity flex items-center justify-center',
+                                isExpanded && 'opacity-100',
+                                !isExpanded && isMobile && 'opacity-0',
+                                !isExpanded && !isMobile && 'opacity-0 group-hover/tool:opacity-100'
+                            )}
+                        >
+                            {isExpanded ? <RiArrowDownSLine className="h-3.5 w-3.5" /> : <RiArrowRightSLine className="h-3.5 w-3.5" />}
+                        </div>
+                    </div>
+                    <span
+                        className="typography-meta font-medium"
+                        style={isError ? { color: 'var(--status-error)' } : {}}
+                    >
+                        {displayName}
+                    </span>
+                </div>
+
+                <div className="flex items-center gap-1 flex-1 min-w-0 typography-meta text-muted-foreground/70">
+                    {description && (
+                        <span className={cn("truncate", isMobile && "max-w-[120px]")}>
+                            {description}
+                        </span>
+                    )}
+                    {diffStats && (
+                        <span className="text-muted-foreground/60 flex-shrink-0">
+                            <span style={{ color: 'var(--status-success)' }}>+{diffStats.added}</span>
+                            {' '}
+                            <span style={{ color: 'var(--status-error)' }}>-{diffStats.removed}</span>
+                        </span>
+                    )}
+                    {'time' in state && state.time && (
+                        <span className="text-muted-foreground/80 flex-shrink-0">
+                            {formatDuration(state.time.start, isFinalized && 'end' in state.time ? state.time.end : currentTime)}
+                        </span>
+                    )}
+                </div>
+            </div>
+
+            {}
+            {isExpanded && (
+                <ToolExpandedContent
+                    part={part}
+                    state={state}
+                    syntaxTheme={syntaxTheme}
+                    isMobile={isMobile}
+                    currentDirectory={currentDirectory}
+                    hasPrevTool={hasPrevTool}
+                    hasNextTool={hasNextTool}
+                />
+            )}
+        </div>
+    );
+};
+
+export default ToolPart;
diff --git a/packages/ui/src/components/chat/message/parts/UserTextPart.tsx b/packages/ui/src/components/chat/message/parts/UserTextPart.tsx
new file mode 100644
index 00000000..2e8e833d
--- /dev/null
+++ b/packages/ui/src/components/chat/message/parts/UserTextPart.tsx
@@ -0,0 +1,357 @@
+import React from 'react';
+import { Streamdown } from 'streamdown';
+
+import { cn } from '@/lib/utils';
+import type { Part } from '@opencode-ai/sdk';
+import type { AgentMentionInfo } from '../types';
+import { RiFileCopyLine, RiCheckLine, RiDownloadLine } from '@remixicon/react';
+
+const SHIKI_THEMES = ['vitesse-light', 'vitesse-dark'] as const;
+
+const CodeBlockWrapper: React.FC<{ children?: React.ReactNode; className?: string }> = ({ children, className }) => {
+    const [copied, setCopied] = React.useState(false);
+    const codeRef = React.useRef<HTMLDivElement>(null);
+
+    const handleCopy = async () => {
+        if (!codeRef.current) return;
+        const codeEl = codeRef.current.querySelector('code');
+        const code = codeEl?.innerText || '';
+        if (!code) return;
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        } catch (err) {
+            console.error('Failed to copy:', err);
+        }
+    };
+
+    return (
+        <div className={cn('group relative', className)} ref={codeRef}>
+            {children}
+            <div className="absolute top-1 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                <button
+                    onClick={handleCopy}
+                    className="p-1 rounded hover:bg-muted/60 text-muted-foreground hover:text-foreground transition-colors"
+                    title="Copy"
+                >
+                    {copied ? <RiCheckLine className="size-3.5" /> : <RiFileCopyLine className="size-3.5" />}
+                </button>
+            </div>
+        </div>
+    );
+};
+
+// Table utility functions
+const extractTableData = (tableEl: HTMLTableElement): { headers: string[]; rows: string[][] } => {
+    const headers: string[] = [];
+    const rows: string[][] = [];
+    
+    const thead = tableEl.querySelector('thead');
+    if (thead) {
+        const headerCells = thead.querySelectorAll('th');
+        headerCells.forEach(cell => headers.push(cell.innerText.trim()));
+    }
+    
+    const tbody = tableEl.querySelector('tbody');
+    if (tbody) {
+        const rowEls = tbody.querySelectorAll('tr');
+        rowEls.forEach(row => {
+            const cells = row.querySelectorAll('td');
+            const rowData: string[] = [];
+            cells.forEach(cell => rowData.push(cell.innerText.trim()));
+            rows.push(rowData);
+        });
+    }
+    
+    return { headers, rows };
+};
+
+const tableToCSV = ({ headers, rows }: { headers: string[]; rows: string[][] }): string => {
+    const escapeCell = (cell: string): string => {
+        if (cell.includes(',') || cell.includes('"') || cell.includes('\n')) {
+            return `"${cell.replace(/"/g, '""')}"`;
+        }
+        return cell;
+    };
+    
+    const lines: string[] = [];
+    if (headers.length > 0) {
+        lines.push(headers.map(escapeCell).join(','));
+    }
+    rows.forEach(row => lines.push(row.map(escapeCell).join(',')));
+    return lines.join('\n');
+};
+
+const tableToTSV = ({ headers, rows }: { headers: string[]; rows: string[][] }): string => {
+    const escapeCell = (cell: string): string => {
+        return cell.replace(/\t/g, '\\t').replace(/\n/g, '\\n').replace(/\r/g, '\\r');
+    };
+    
+    const lines: string[] = [];
+    if (headers.length > 0) {
+        lines.push(headers.map(escapeCell).join('\t'));
+    }
+    rows.forEach(row => lines.push(row.map(escapeCell).join('\t')));
+    return lines.join('\n');
+};
+
+const tableToMarkdown = ({ headers, rows }: { headers: string[]; rows: string[][] }): string => {
+    if (headers.length === 0) return '';
+    
+    const escapeCell = (cell: string): string => {
+        return cell.replace(/\\/g, '\\\\').replace(/\|/g, '\\|');
+    };
+    
+    const lines: string[] = [];
+    lines.push(`| ${headers.map(escapeCell).join(' | ')} |`);
+    lines.push(`| ${headers.map(() => '---').join(' | ')} |`);
+    rows.forEach(row => {
+        const paddedRow = headers.map((_, i) => escapeCell(row[i] || ''));
+        lines.push(`| ${paddedRow.join(' | ')} |`);
+    });
+    return lines.join('\n');
+};
+
+const downloadFile = (filename: string, content: string, mimeType: string) => {
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+};
+
+// Table copy button with dropdown
+const TableCopyButton: React.FC<{ tableRef: React.RefObject<HTMLDivElement | null> }> = ({ tableRef }) => {
+    const [copied, setCopied] = React.useState(false);
+    const [showMenu, setShowMenu] = React.useState(false);
+    const menuRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        const handleClickOutside = (e: MouseEvent) => {
+            if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+                setShowMenu(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    const handleCopy = async (format: 'csv' | 'tsv') => {
+        const tableEl = tableRef.current?.querySelector('table');
+        if (!tableEl) return;
+        
+        try {
+            const data = extractTableData(tableEl);
+            const content = format === 'csv' ? tableToCSV(data) : tableToTSV(data);
+            await navigator.clipboard.write([
+                new ClipboardItem({
+                    'text/plain': new Blob([content], { type: 'text/plain' }),
+                    'text/html': new Blob([tableEl.outerHTML], { type: 'text/html' }),
+                }),
+            ]);
+            setCopied(true);
+            setShowMenu(false);
+            setTimeout(() => setCopied(false), 2000);
+        } catch (err) {
+            console.error('Failed to copy table:', err);
+        }
+    };
+
+    return (
+        <div className="relative" ref={menuRef}>
+            <button
+                onClick={() => setShowMenu(!showMenu)}
+                className="p-1 rounded hover:bg-muted/60 text-muted-foreground hover:text-foreground transition-colors"
+                title="Copy table"
+            >
+                {copied ? <RiCheckLine className="size-3.5" /> : <RiFileCopyLine className="size-3.5" />}
+            </button>
+            {showMenu && (
+                <div className="absolute top-full right-0 z-10 mt-1 min-w-[100px] overflow-hidden rounded-md border border-border bg-background shadow-lg">
+                    <button
+                        className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/40"
+                        onClick={() => handleCopy('csv')}
+                    >
+                        CSV
+                    </button>
+                    <button
+                        className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/40"
+                        onClick={() => handleCopy('tsv')}
+                    >
+                        TSV
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+// Table download button with dropdown
+const TableDownloadButton: React.FC<{ tableRef: React.RefObject<HTMLDivElement | null> }> = ({ tableRef }) => {
+    const [showMenu, setShowMenu] = React.useState(false);
+    const menuRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        const handleClickOutside = (e: MouseEvent) => {
+            if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+                setShowMenu(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    const handleDownload = (format: 'csv' | 'markdown') => {
+        const tableEl = tableRef.current?.querySelector('table');
+        if (!tableEl) return;
+        
+        try {
+            const data = extractTableData(tableEl);
+            const content = format === 'csv' ? tableToCSV(data) : tableToMarkdown(data);
+            const filename = format === 'csv' ? 'table.csv' : 'table.md';
+            const mimeType = format === 'csv' ? 'text/csv' : 'text/markdown';
+            downloadFile(filename, content, mimeType);
+            setShowMenu(false);
+        } catch (err) {
+            console.error('Failed to download table:', err);
+        }
+    };
+
+    return (
+        <div className="relative" ref={menuRef}>
+            <button
+                onClick={() => setShowMenu(!showMenu)}
+                className="p-1 rounded hover:bg-muted/60 text-muted-foreground hover:text-foreground transition-colors"
+                title="Download table"
+            >
+                <RiDownloadLine className="size-3.5" />
+            </button>
+            {showMenu && (
+                <div className="absolute top-full right-0 z-10 mt-1 min-w-[100px] overflow-hidden rounded-md border border-border bg-background shadow-lg">
+                    <button
+                        className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/40"
+                        onClick={() => handleDownload('csv')}
+                    >
+                        CSV
+                    </button>
+                    <button
+                        className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/40"
+                        onClick={() => handleDownload('markdown')}
+                    >
+                        Markdown
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+// Table wrapper with custom controls
+const TableWrapper: React.FC<{ children?: React.ReactNode; className?: string }> = ({ children, className }) => {
+    const tableRef = React.useRef<HTMLDivElement>(null);
+
+    return (
+        <div className="group my-4 flex flex-col space-y-2" data-streamdown="table-wrapper" ref={tableRef}>
+            <div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                <TableCopyButton tableRef={tableRef} />
+                <TableDownloadButton tableRef={tableRef} />
+            </div>
+            <div className="overflow-x-auto">
+                <table className={cn('w-full border-collapse border border-border', className)} data-streamdown="table">
+                    {children}
+                </table>
+            </div>
+        </div>
+    );
+};
+
+const streamdownComponents = {
+    pre: CodeBlockWrapper,
+    table: TableWrapper,
+};
+
+type PartWithText = Part & { text?: string; content?: string; value?: string };
+
+type UserTextPartProps = {
+    part: Part;
+    messageId: string;
+    isMobile: boolean;
+    agentMention?: AgentMentionInfo;
+};
+
+const buildMentionLink = (token: string, name: string): string => {
+    const encoded = encodeURIComponent(name);
+    return `[${token}](https://opencode.ai/docs/agents/#${encoded})`;
+};
+
+const UserTextPart: React.FC<UserTextPartProps> = ({ part, messageId, isMobile, agentMention }) => {
+    const partWithText = part as PartWithText;
+    const rawText = partWithText.text;
+    const textContent = typeof rawText === 'string' ? rawText : partWithText.content || partWithText.value || '';
+
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    const [isTruncated, setIsTruncated] = React.useState(false);
+    const textRef = React.useRef<HTMLDivElement>(null);
+
+    const processedText = React.useMemo(() => {
+        if (!agentMention) {
+            return textContent;
+        }
+        const token = agentMention.token;
+        if (!token || token.length === 0) {
+            return textContent;
+        }
+        if (!textContent.includes(token)) {
+            return textContent;
+        }
+        const link = buildMentionLink(token, agentMention.name);
+        return textContent.replace(token, link);
+    }, [agentMention, textContent]);
+
+    React.useEffect(() => {
+        const el = textRef.current;
+        if (el && !isExpanded) {
+            setIsTruncated(el.scrollHeight > el.clientHeight);
+        }
+    }, [processedText, isExpanded]);
+
+    const handleClick = React.useCallback(() => {
+        if (isTruncated || isExpanded) {
+            setIsExpanded((prev) => !prev);
+        }
+    }, [isTruncated, isExpanded]);
+
+    if (!processedText || processedText.trim().length === 0) {
+        return null;
+    }
+
+    return (
+        <div
+            className={cn(
+                "break-words",
+                !isExpanded && "line-clamp-3",
+                (isTruncated || isExpanded) && "cursor-pointer"
+            )}
+            ref={textRef}
+            onClick={handleClick}
+            key={part.id || `${messageId}-user-text`}
+        >
+            <Streamdown
+                mode="static"
+                shikiTheme={SHIKI_THEMES}
+                className={cn('streamdown-content streamdown-user', isMobile && 'streamdown-mobile')}
+                controls={{ code: false, table: false }}
+                components={streamdownComponents}
+            >
+                {processedText}
+            </Streamdown>
+        </div>
+    );
+};
+
+export default React.memo(UserTextPart);
diff --git a/packages/ui/src/components/chat/message/parts/WorkingPlaceholder.tsx b/packages/ui/src/components/chat/message/parts/WorkingPlaceholder.tsx
new file mode 100644
index 00000000..ffc97c31
--- /dev/null
+++ b/packages/ui/src/components/chat/message/parts/WorkingPlaceholder.tsx
@@ -0,0 +1,404 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Text } from '@/components/ui/text';
+
+interface WorkingPlaceholderProps {
+    statusText: string | null;
+    isWaitingForPermission?: boolean;
+    wasAborted?: boolean;
+    completionId?: string | null;
+    isComplete?: boolean;
+}
+
+const MIN_DISPLAY_TIME = 2000;
+const DONE_DISPLAY_TIME = 1500;
+
+type ResultState = 'success' | 'aborted' | null;
+
+export function WorkingPlaceholder({
+    statusText,
+    isWaitingForPermission,
+    wasAborted,
+    completionId,
+    isComplete,
+}: WorkingPlaceholderProps) {
+    const [displayedStatus, setDisplayedStatus] = useState<string | null>(null);
+    const [displayedPermission, setDisplayedPermission] = useState<boolean>(false);
+    const [isVisible, setIsVisible] = useState<boolean>(false);
+    const [isFadingOut, setIsFadingOut] = useState<boolean>(false);
+    const [resultState, setResultState] = useState<ResultState>(null);
+    const [isTransitioning, setIsTransitioning] = useState<boolean>(false);
+
+    const displayStartTimeRef = useRef<number>(0);
+    const statusQueueRef = useRef<Array<{ status: string; permission: boolean }>>([]);
+    const removalPendingRef = useRef<boolean>(false);
+    const fadeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const resultTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const transitionTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const lastActiveStatusRef = useRef<string | null>(null);
+    const hasShownActivityRef = useRef<boolean>(false);
+    const wasAbortedRef = useRef<boolean>(false);
+    const isCompleteRef = useRef<boolean>(false);
+    const windowFocusRef = useRef<boolean>(true);
+    const lastCompletionShownRef = useRef<string | null>(null);
+    const resultShownAtRef = useRef<number | null>(null);
+
+    const activateStatus = (status: string, permission: boolean) => {
+        if (fadeTimeoutRef.current) {
+            clearTimeout(fadeTimeoutRef.current);
+            fadeTimeoutRef.current = null;
+        }
+        if (resultTimeoutRef.current) {
+            clearTimeout(resultTimeoutRef.current);
+            resultTimeoutRef.current = null;
+        }
+        if (transitionTimeoutRef.current) {
+            clearTimeout(transitionTimeoutRef.current);
+            transitionTimeoutRef.current = null;
+        }
+
+        if (status === 'aborted') {
+            setDisplayedStatus(null);
+            setDisplayedPermission(false);
+            setIsFadingOut(false);
+            setResultState('aborted');
+            setIsTransitioning(false);
+            lastActiveStatusRef.current = 'aborted';
+            hasShownActivityRef.current = true;
+            wasAbortedRef.current = true;
+
+            if (typeof requestAnimationFrame === 'function') {
+                requestAnimationFrame(() => setIsVisible(true));
+            } else {
+                setIsVisible(true);
+            }
+
+            return;
+        }
+
+        setResultState(null);
+        setIsFadingOut(false);
+        lastActiveStatusRef.current = status;
+        hasShownActivityRef.current = true;
+
+        const isStatusChanging = displayedStatus !== null && displayedStatus !== status;
+
+        if (isStatusChanging) {
+
+            setIsTransitioning(true);
+            transitionTimeoutRef.current = setTimeout(() => {
+                setIsTransitioning(false);
+                transitionTimeoutRef.current = null;
+            }, 150);
+        }
+
+        setDisplayedStatus(status);
+        setDisplayedPermission(permission);
+
+        if (!isVisible) {
+
+            if (typeof requestAnimationFrame === 'function') {
+                requestAnimationFrame(() => {
+                    setIsVisible(true);
+                });
+            } else {
+                setIsVisible(true);
+            }
+        }
+    };
+
+    useEffect(() => {
+        const now = Date.now();
+
+        if (statusText) {
+            removalPendingRef.current = false;
+
+            if (!displayedStatus) {
+                activateStatus(statusText, !!isWaitingForPermission);
+                displayStartTimeRef.current = now;
+                statusQueueRef.current = [];
+            } else if (
+                statusText !== displayedStatus ||
+                !!isWaitingForPermission !== displayedPermission
+            ) {
+                statusQueueRef.current.push({
+                    status: statusText,
+                    permission: !!isWaitingForPermission,
+                });
+            }
+        } else {
+            removalPendingRef.current = true;
+        }
+
+    }, [statusText, isWaitingForPermission, displayedStatus, displayedPermission, wasAborted]);
+
+    useEffect(() => {
+        if (wasAborted) {
+            wasAbortedRef.current = true;
+        }
+    }, [wasAborted]);
+
+    useEffect(() => {
+        isCompleteRef.current = !!isComplete;
+    }, [isComplete]);
+
+    useEffect(() => {
+        if (isComplete) {
+            removalPendingRef.current = true;
+        }
+    }, [isComplete]);
+
+    useEffect(() => {
+        const startFadeOut = (result: ResultState) => {
+            if (isFadingOut) {
+                return;
+            }
+
+            const hadActiveStatus =
+                lastActiveStatusRef.current !== null || hasShownActivityRef.current;
+
+            if (result && hadActiveStatus) {
+
+                setIsFadingOut(false);
+                setIsVisible(true);
+
+                setDisplayedStatus(null);
+                setDisplayedPermission(false);
+                setResultState(result);
+                lastActiveStatusRef.current = null;
+
+                setIsTransitioning(false);
+
+                if (result === 'success' && completionId) {
+                    lastCompletionShownRef.current = completionId;
+                }
+
+                resultShownAtRef.current = Date.now();
+
+                if (resultTimeoutRef.current) {
+                    clearTimeout(resultTimeoutRef.current);
+                }
+
+                resultTimeoutRef.current = setTimeout(() => {
+                    setIsVisible(false);
+                    setResultState(null);
+                    hasShownActivityRef.current = false;
+                    resultTimeoutRef.current = null;
+                }, DONE_DISPLAY_TIME);
+            } else {
+
+                setIsFadingOut(true);
+                setIsVisible(false);
+                setResultState(null);
+
+                if (fadeTimeoutRef.current) {
+                    clearTimeout(fadeTimeoutRef.current);
+                }
+
+                fadeTimeoutRef.current = setTimeout(() => {
+                    setDisplayedStatus(null);
+                    setDisplayedPermission(false);
+                    setIsFadingOut(false);
+                    hasShownActivityRef.current = false;
+                    lastActiveStatusRef.current = null;
+                    fadeTimeoutRef.current = null;
+                }, 180);
+            }
+
+            wasAbortedRef.current = false;
+        };
+
+        const checkInterval = setInterval(() => {
+            const now = Date.now();
+            const elapsed = now - displayStartTimeRef.current;
+
+            const isDone = removalPendingRef.current && isCompleteRef.current;
+
+            const shouldWaitForMinTime = !isDone && statusQueueRef.current.length > 0;
+
+            if (shouldWaitForMinTime && elapsed < MIN_DISPLAY_TIME) {
+                return;
+            }
+
+            if (removalPendingRef.current && wasAbortedRef.current) {
+                removalPendingRef.current = false;
+                statusQueueRef.current = [];
+                startFadeOut('aborted');
+            } else if (!isDone && statusQueueRef.current.length > 0) {
+                const latest = statusQueueRef.current[statusQueueRef.current.length - 1];
+                activateStatus(latest.status, latest.permission);
+                displayStartTimeRef.current = now;
+                statusQueueRef.current = [];
+            } else if (removalPendingRef.current) {
+
+                removalPendingRef.current = false;
+
+                if (statusQueueRef.current.length > 0) {
+                    hasShownActivityRef.current = true;
+                }
+                statusQueueRef.current = [];
+
+                let result: ResultState = null;
+                if (wasAbortedRef.current) {
+                    result = 'aborted';
+                } else if (isCompleteRef.current) {
+                    result = 'success';
+
+                    hasShownActivityRef.current = true;
+                }
+
+                if (result === 'success' && completionId && lastCompletionShownRef.current === completionId) {
+                    setDisplayedStatus(null);
+                    setDisplayedPermission(false);
+                    setIsFadingOut(false);
+                    setIsVisible(false);
+                    setResultState(null);
+                    statusQueueRef.current = [];
+                    hasShownActivityRef.current = false;
+                    lastActiveStatusRef.current = null;
+                    removalPendingRef.current = false;
+                    wasAbortedRef.current = false;
+                    return;
+                }
+
+                startFadeOut(result);
+            }
+        }, 50);
+
+        return () => clearInterval(checkInterval);
+
+    }, [isFadingOut]);
+
+    useEffect(() => {
+        return () => {
+            if (fadeTimeoutRef.current) {
+                clearTimeout(fadeTimeoutRef.current);
+            }
+            if (resultTimeoutRef.current) {
+                clearTimeout(resultTimeoutRef.current);
+            }
+            if (transitionTimeoutRef.current) {
+                clearTimeout(transitionTimeoutRef.current);
+            }
+        };
+    }, []);
+
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+
+        windowFocusRef.current = typeof document !== 'undefined' && typeof document.hasFocus === 'function'
+            ? document.hasFocus()
+            : true;
+
+        const handleFocus = () => {
+            windowFocusRef.current = true;
+        };
+
+        const handleBlur = () => {
+            windowFocusRef.current = false;
+        };
+
+        window.addEventListener('focus', handleFocus);
+        window.addEventListener('blur', handleBlur);
+
+        return () => {
+            window.removeEventListener('focus', handleFocus);
+            window.removeEventListener('blur', handleBlur);
+        };
+    }, []);
+
+    useEffect(() => {
+        const handleVisibilityRestore = () => {
+            if (typeof document === 'undefined' || typeof Date === 'undefined') {
+                return;
+            }
+            if (document.visibilityState !== 'visible') {
+                return;
+            }
+
+            const shownAt = resultShownAtRef.current;
+            const isCompletionVisible = resultState !== null || displayedStatus !== null;
+
+            if (isCompletionVisible && shownAt && Date.now() - shownAt > 500) {
+                setDisplayedStatus(null);
+                setDisplayedPermission(false);
+                setIsFadingOut(false);
+                setIsVisible(false);
+                setResultState(null);
+                statusQueueRef.current = [];
+                hasShownActivityRef.current = false;
+                lastActiveStatusRef.current = null;
+                removalPendingRef.current = false;
+                wasAbortedRef.current = false;
+            }
+        };
+
+        document.addEventListener('visibilitychange', handleVisibilityRestore);
+        window.addEventListener('focus', handleVisibilityRestore);
+
+        return () => {
+            document.removeEventListener('visibilitychange', handleVisibilityRestore);
+            window.removeEventListener('focus', handleVisibilityRestore);
+        };
+    }, [displayedStatus, resultState]);
+
+    if (!displayedStatus && resultState === null) {
+        return null;
+    }
+
+    let label: string;
+    if (resultState === 'success') {
+        label = 'Done';
+    } else if (resultState === 'aborted') {
+        label = 'Aborted';
+    } else if (displayedStatus) {
+        label = displayedStatus.charAt(0).toUpperCase() + displayedStatus.slice(1);
+    } else {
+        label = 'Working';
+    }
+
+    const ariaLive = displayedPermission ? 'assertive' : 'polite';
+
+    const displayText = resultState === null ? `${label}...` : label;
+
+    return (
+        <div
+            className={`flex h-full items-center text-muted-foreground pl-[2ch] transition-opacity duration-200 ${isVisible && !isFadingOut ? 'opacity-100' : 'opacity-0'}`}
+            role="status"
+            aria-live={ariaLive}
+            aria-label={label}
+            data-waiting={displayedPermission ? 'true' : undefined}
+        >
+            <span className="flex items-center gap-1.5">
+                {resultState === null && (
+                    <Text
+                        variant="shine"
+                        className="typography-ui-header transition-opacity duration-150"
+                        style={{ opacity: isTransitioning ? 0.6 : 1 }}
+                    >
+                        {displayText}
+                    </Text>
+                )}
+                {resultState === 'success' && (
+                    <Text
+                        variant="hover-enter"
+                        className="typography-ui-header transition-opacity duration-150"
+                        style={{ opacity: isTransitioning ? 0.6 : 1 }}
+                    >
+                        Done
+                    </Text>
+                )}
+                {resultState === 'aborted' && (
+                    <Text
+                        variant="hover-enter"
+                        className="typography-ui-header transition-opacity duration-150 text-status-error"
+                        style={{ opacity: isTransitioning ? 0.6 : 1 }}
+                    >
+                        Aborted
+                    </Text>
+                )}
+            </span>
+        </div>
+    );
+}
diff --git a/packages/ui/src/components/chat/message/toolRenderers.tsx b/packages/ui/src/components/chat/message/toolRenderers.tsx
new file mode 100644
index 00000000..7c2c5677
--- /dev/null
+++ b/packages/ui/src/components/chat/message/toolRenderers.tsx
@@ -0,0 +1,642 @@
+import { Streamdown } from 'streamdown';
+import { RiCheckLine } from '@remixicon/react';
+
+import { cn } from '@/lib/utils';
+import { typography } from '@/lib/typography';
+import { formatToolInput, detectToolOutputLanguage } from '@/lib/toolHelpers';
+
+const cleanOutput = (output: string) => {
+    let cleaned = output.replace(/^<file>\s*\n?/, '').replace(/\n?<\/file>\s*$/, '');
+    cleaned = cleaned.replace(/^\s*\d{5}\|\s?/gm, '');
+    return cleaned.trim();
+};
+
+export const hasLspDiagnostics = (output: string): boolean => {
+    if (!output) return false;
+    return output.includes('<file_diagnostics>') || output.includes('This file has errors') || output.includes('please fix');
+};
+
+const stripLspDiagnostics = (output: string): string => {
+    if (!output) return '';
+    return output.replace(/This file has errors.*?<\/file_diagnostics>/s, '').trim();
+};
+
+const formatInputForDisplay = (input: Record<string, unknown>, toolName?: string) => {
+    if (!input || typeof input !== 'object') {
+        return String(input);
+    }
+    return formatToolInput(input, toolName || '');
+};
+
+export const formatEditOutput = (output: string, toolName: string, metadata?: Record<string, unknown>): string => {
+    let cleaned = cleanOutput(output);
+
+    if ((toolName === 'edit' || toolName === 'multiedit') && hasLspDiagnostics(cleaned)) {
+        cleaned = stripLspDiagnostics(cleaned);
+    }
+
+    if ((toolName === 'edit' || toolName === 'multiedit') && cleaned.trim().length === 0 && metadata?.diff) {
+
+        const diff = metadata.diff;
+        return typeof diff === 'string' ? diff : String(diff);
+    }
+
+    return cleaned;
+};
+
+export const renderListOutput = (output: string, options?: { unstyled?: boolean }) => {
+    try {
+        const lines = output.trim().split('\n').filter(Boolean);
+        if (lines.length === 0) return null;
+
+        const items: Array<{ name: string; depth: number; isFile: boolean }> = [];
+        lines.forEach((line) => {
+            const match = line.match(/^(\s*)(.+)$/);
+            if (match) {
+                const [, spaces, name] = match;
+                const depth = Math.floor(spaces.length / 2);
+                const isFile = !name.endsWith('/');
+                items.push({
+                    name: name.replace(/\/$/, ''),
+                    depth,
+                    isFile,
+                });
+            }
+        });
+
+        return (
+            <div
+                className={cn(
+                    'w-full min-w-0 font-mono space-y-0.5',
+                    options?.unstyled ? null : 'p-3 bg-muted/20 rounded-xl border border-border/30'
+                )}
+                style={typography.micro}
+            >
+                {items.map((item, idx) => (
+                    <div key={idx} className="min-w-0" style={{ paddingLeft: `${item.depth * 20}px` }}>
+                        {item.isFile ? (
+                            <span className="text-foreground/90 block truncate">{item.name}</span>
+                        ) : (
+                            <span className="font-semibold text-foreground block truncate">{item.name}/</span>
+                        )}
+                    </div>
+                ))}
+            </div>
+        );
+    } catch {
+        return null;
+    }
+};
+
+export const renderGrepOutput = (output: string, isMobile: boolean, options?: { unstyled?: boolean }) => {
+    try {
+        const lines = output.trim().split('\n').filter(Boolean);
+        if (lines.length === 0) return null;
+
+        const fileGroups: Record<string, Array<{ lineNum: string; content: string }>> = {};
+
+        lines.forEach((line) => {
+            const match = line.match(/^(.+?):(\d+):(.*)$/) || line.match(/^(.+?):(.*)$/);
+            if (match) {
+                const [, filepath, lineNumOrContent, content] = match;
+                const lineNum = content !== undefined ? lineNumOrContent : '';
+                const actualContent = content !== undefined ? content : lineNumOrContent;
+
+                if (!fileGroups[filepath]) {
+                    fileGroups[filepath] = [];
+                }
+                fileGroups[filepath].push({ lineNum, content: actualContent });
+            }
+        });
+
+        return (
+            <div
+                className={cn(
+                    'space-y-2 w-full min-w-0',
+                    options?.unstyled ? null : 'p-3 bg-muted/20 rounded-xl border border-border/30'
+                )}
+            >
+                <div className="typography-meta text-muted-foreground mb-2">
+                    Found {lines.length} match{lines.length !== 1 ? 'es' : ''}
+                </div>
+                {Object.entries(fileGroups).map(([filepath, matches]) => (
+                    <div key={filepath} className="space-y-1">
+                        <div className={cn('font-medium text-muted-foreground', isMobile ? 'typography-micro' : 'typography-meta')}>
+                            {filepath}
+                        </div>
+                        <div className="pl-4 space-y-1">
+                            {matches.map((match, idx) => {
+                                if (!match.lineNum && !match.content) {
+                                    return null;
+                                }
+                                return (
+                                    <div key={idx} className={cn('flex items-start gap-2 min-w-0', isMobile ? 'typography-micro' : 'typography-meta')}>
+                                        <div className="w-1.5 h-1.5 rounded-full flex-shrink-0 mt-1.5" style={{ backgroundColor: 'var(--status-info)', opacity: 0.6 }} />
+                                        <div className="flex gap-2 min-w-0 flex-1">
+                                            {match.lineNum && (
+                                                <span className="text-muted-foreground font-mono whitespace-nowrap">
+                                                    Line {match.lineNum}:
+                                                </span>
+                                            )}
+                                            <span className="text-foreground font-mono break-words flex-1">
+                                                {match.content || '\u00A0'}
+                                            </span>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        );
+
+    } catch {
+        return null;
+    }
+};
+
+export const renderGlobOutput = (output: string, isMobile: boolean, options?: { unstyled?: boolean }) => {
+    try {
+        const paths = output.trim().split('\n').filter(Boolean);
+        if (paths.length === 0) return null;
+
+        const groups: Record<string, string[]> = {};
+        paths.forEach((path) => {
+            const lastSlash = path.lastIndexOf('/');
+            const dir = lastSlash > 0 ? path.substring(0, lastSlash) : '/';
+            const filename = lastSlash >= 0 ? path.substring(lastSlash + 1) : path;
+
+            if (!groups[dir]) {
+                groups[dir] = [];
+            }
+            groups[dir].push(filename);
+        });
+
+        const sortedDirs = Object.keys(groups).sort();
+
+        return (
+            <div
+                className={cn(
+                    'space-y-2 w-full min-w-0',
+                    options?.unstyled ? null : 'p-3 bg-muted/20 rounded-xl border border-border/30'
+                )}
+            >
+                <div className="typography-meta text-muted-foreground mb-2">
+                    Found {paths.length} file{paths.length !== 1 ? 's' : ''}
+                </div>
+                {sortedDirs.map((dir) => (
+                    <div key={dir} className="space-y-1">
+                        <div className={cn('font-medium text-muted-foreground', isMobile ? 'typography-micro' : 'typography-meta')}>
+                            {dir}/
+                        </div>
+                        <div className={cn('pl-4 grid gap-1', isMobile ? 'grid-cols-1' : 'grid-cols-2')}>
+                            {groups[dir].sort().map((filename) => (
+                                <div key={filename} className={cn('flex items-center gap-2 min-w-0', isMobile ? 'typography-micro' : 'typography-meta')}>
+                                    <div className="w-1.5 h-1.5 rounded-full flex-shrink-0" style={{ backgroundColor: 'var(--status-info)', opacity: 0.6 }} />
+                                    <span className="text-foreground font-mono truncate">{filename}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        );
+    } catch {
+        return null;
+    }
+};
+
+type Todo = {
+    id?: string;
+    content: string;
+    status: 'in_progress' | 'pending' | 'completed' | 'cancelled';
+    priority?: 'high' | 'medium' | 'low';
+};
+
+export const renderTodoOutput = (output: string, options?: { unstyled?: boolean }) => {
+    try {
+        const todos = JSON.parse(output) as Todo[];
+        if (!Array.isArray(todos)) {
+            return null;
+        }
+
+        const todosByStatus = {
+            in_progress: todos.filter((t) => t.status === 'in_progress'),
+            pending: todos.filter((t) => t.status === 'pending'),
+            completed: todos.filter((t) => t.status === 'completed'),
+            cancelled: todos.filter((t) => t.status === 'cancelled'),
+        };
+
+        const getPriorityDot = (priority?: string) => {
+            const baseClasses = 'w-2 h-2 rounded-full flex-shrink-0 mt-1';
+            switch (priority) {
+                case 'high':
+                    return <div className={baseClasses} style={{ backgroundColor: 'var(--status-error)' }} />;
+                case 'medium':
+                    return <div className={baseClasses} style={{ backgroundColor: 'var(--primary)' }} />;
+                case 'low':
+                    return <div className={baseClasses} style={{ backgroundColor: 'var(--status-info)' }} />;
+                default:
+                    return <div className={baseClasses} style={{ backgroundColor: 'var(--muted-foreground)', opacity: 0.5 }} />;
+            }
+        };
+
+        return (
+            <div
+                className={cn(
+                    'space-y-3 w-full min-w-0',
+                    options?.unstyled ? null : 'p-3 bg-muted/20 rounded-xl border border-border/30'
+                )}
+            >
+                <div className="flex gap-4 typography-meta pb-2 border-b border-border/20">
+                    <span className="font-medium" style={{ color: 'var(--muted-foreground)' }}>Total: {todos.length}</span>
+                    {todosByStatus.in_progress.length > 0 && (
+                        <span className="font-medium" style={{ color: 'var(--foreground)' }}>In Progress: {todosByStatus.in_progress.length}</span>
+                    )}
+                    {todosByStatus.pending.length > 0 && (
+                        <span style={{ color: 'var(--muted-foreground)' }}>Pending: {todosByStatus.pending.length}</span>
+                    )}
+                    {todosByStatus.completed.length > 0 && (
+                        <span style={{ color: 'var(--status-success)' }}>Completed: {todosByStatus.completed.length}</span>
+                    )}
+                    {todosByStatus.cancelled.length > 0 && (
+                        <span style={{ color: 'var(--muted-foreground)', opacity: 0.5 }}>Cancelled: {todosByStatus.cancelled.length}</span>
+                    )}
+                </div>
+
+                {todosByStatus.in_progress.length > 0 && (
+                    <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                            <div className="w-2 h-2 rounded-full animate-pulse" style={{ backgroundColor: 'var(--foreground)' }} />
+                            <span className="typography-meta font-semibold text-foreground uppercase tracking-wide">In Progress</span>
+                        </div>
+                        <div className="space-y-1.5 pl-4">
+                            {todosByStatus.in_progress.map((todo, idx) => (
+                                <div key={todo.id || idx} className="flex items-start gap-2">
+                                    {getPriorityDot(todo.priority)}
+                                    <span className="typography-meta text-foreground flex-1 leading-relaxed">{todo.content}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                {todosByStatus.pending.length > 0 && (
+                    <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                            <div className="w-2 h-2 rounded-full bg-muted-foreground/50" />
+                            <span className="typography-meta font-semibold text-muted-foreground uppercase tracking-wide">Pending</span>
+                        </div>
+                        <div className="space-y-1.5 pl-4">
+                            {todosByStatus.pending.map((todo, idx) => (
+                                <div key={todo.id || idx} className="flex items-start gap-2">
+                                    {getPriorityDot(todo.priority)}
+                                    <span className="typography-meta text-foreground flex-1 leading-relaxed">{todo.content}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                {todosByStatus.completed.length > 0 && (
+                    <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                            <RiCheckLine className="w-3 h-3" style={{ color: 'var(--status-success)' }} />
+                            <span className="typography-meta font-semibold uppercase tracking-wide" style={{ color: 'var(--status-success)' }}>Completed</span>
+                        </div>
+                        <div className="space-y-1.5 pl-4">
+                            {todosByStatus.completed.map((todo, idx) => (
+                                <div key={todo.id || idx} className="flex items-start gap-2">
+                                    <RiCheckLine className="w-3 h-3 mt-0.5 flex-shrink-0" style={{ color: 'var(--status-success)', opacity: 0.7 }} />
+                                    <span className="typography-meta text-foreground flex-1 leading-relaxed">{todo.content}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                {todosByStatus.cancelled.length > 0 && (
+                    <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                            <span className="w-3 h-3 text-muted-foreground/50">×</span>
+                            <span className="typography-meta font-semibold text-muted-foreground/50 uppercase tracking-wide">Cancelled</span>
+                        </div>
+                        <div className="space-y-1.5 pl-4">
+                            {todosByStatus.cancelled.map((todo, idx) => (
+                                <div key={todo.id || idx} className="flex items-start gap-2">
+                                    <span className="w-3 h-3 text-muted-foreground/50 mt-0.5 flex-shrink-0">×</span>
+                                    <span className="typography-meta text-muted-foreground/50 line-through flex-1 leading-relaxed">{todo.content}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    } catch {
+        return null;
+    }
+};
+
+export const renderWebSearchOutput = (output: string, _syntaxTheme: { [key: string]: React.CSSProperties }, options?: { unstyled?: boolean }) => {
+    try {
+        return (
+            <div
+                className={cn(
+                    'typography-meta max-w-none w-full min-w-0',
+                    options?.unstyled ? null : 'p-3 bg-muted/20 rounded-xl border border-border/20'
+                )}
+            >
+                <Streamdown mode="static" className="streamdown-content streamdown-tool">
+                    {output}
+                </Streamdown>
+            </div>
+        );
+    } catch {
+        return null;
+    }
+};
+
+export type DiffLineType = 'context' | 'added' | 'removed';
+
+export interface UnifiedDiffLine {
+    type: DiffLineType;
+    lineNumber: number | null;
+    content: string;
+}
+
+export interface UnifiedDiffHunk {
+    file: string;
+    oldStart: number;
+    newStart: number;
+    lines: UnifiedDiffLine[];
+}
+
+export interface SideBySideDiffLine {
+    leftLine: { type: 'context' | 'removed' | 'empty'; lineNumber: number | null; content: string };
+    rightLine: { type: 'context' | 'added' | 'empty'; lineNumber: number | null; content: string };
+}
+
+export interface SideBySideDiffHunk {
+    file: string;
+    oldStart: number;
+    newStart: number;
+    lines: SideBySideDiffLine[];
+}
+
+export const parseDiffToUnified = (diffText: string): UnifiedDiffHunk[] => {
+    const lines = diffText.split('\n');
+    let currentFile = '';
+    const hunks: UnifiedDiffHunk[] = [];
+
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+
+        if (line.startsWith('Index:') || line.startsWith('===') || line.startsWith('---') || line.startsWith('+++')) {
+            if (line.startsWith('Index:')) {
+                currentFile = line.split(' ')[1].split('/').pop() || 'file';
+            }
+            i++;
+            continue;
+        }
+
+        if (line.startsWith('@@')) {
+            const match = line.match(/@@ -(\d+),\d+ \+(\d+),\d+ @@/);
+            const oldStart = match ? parseInt(match[1]) : 0;
+            const newStart = match ? parseInt(match[2]) : 0;
+
+            const unifiedLines: UnifiedDiffLine[] = [];
+            let lineNum = newStart;
+            let j = i + 1;
+
+            while (j < lines.length && !lines[j].startsWith('@@') && !lines[j].startsWith('Index:')) {
+                const contentLine = lines[j];
+                if (contentLine.startsWith('+')) {
+                    unifiedLines.push({ type: 'added', lineNumber: lineNum, content: contentLine.substring(1) });
+                    lineNum++;
+                } else if (contentLine.startsWith('-')) {
+                    unifiedLines.push({ type: 'removed', lineNumber: null, content: contentLine.substring(1) });
+                } else if (contentLine.startsWith(' ')) {
+                    unifiedLines.push({ type: 'context', lineNumber: lineNum, content: contentLine.substring(1) });
+                    lineNum++;
+                }
+                j++;
+            }
+
+            hunks.push({
+                file: currentFile,
+                oldStart,
+                newStart,
+                lines: unifiedLines,
+            });
+
+            i = j;
+            continue;
+        }
+
+        i++;
+    }
+
+    return hunks;
+};
+
+export const parseDiffToLines = (diffText: string): SideBySideDiffHunk[] => {
+    const lines = diffText.split('\n');
+    let currentFile = '';
+    const hunks: SideBySideDiffHunk[] = [];
+
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+
+        if (line.startsWith('Index:') || line.startsWith('===') || line.startsWith('---') || line.startsWith('+++')) {
+            if (line.startsWith('Index:')) {
+                currentFile = line.split(' ')[1].split('/').pop() || 'file';
+            }
+            i++;
+            continue;
+        }
+
+        if (line.startsWith('@@')) {
+            const match = line.match(/@@ -(\d+),\d+ \+(\d+),\d+ @@/);
+            const oldStart = match ? parseInt(match[1]) : 0;
+            const newStart = match ? parseInt(match[2]) : 0;
+
+            const changes: Array<{
+                type: 'context' | 'added' | 'removed';
+                content: string;
+                oldLine?: number;
+                newLine?: number;
+            }> = [];
+
+            let oldLineNum = oldStart;
+            let newLineNum = newStart;
+            let j = i + 1;
+
+            while (j < lines.length && !lines[j].startsWith('@@') && !lines[j].startsWith('Index:')) {
+                const contentLine = lines[j];
+                if (contentLine.startsWith('+')) {
+                    changes.push({ type: 'added', content: contentLine.substring(1), newLine: newLineNum });
+                    newLineNum++;
+                } else if (contentLine.startsWith('-')) {
+                    changes.push({ type: 'removed', content: contentLine.substring(1), oldLine: oldLineNum });
+                    oldLineNum++;
+                } else if (contentLine.startsWith(' ')) {
+                    changes.push({
+                        type: 'context',
+                        content: contentLine.substring(1),
+                        oldLine: oldLineNum,
+                        newLine: newLineNum,
+                    });
+                    oldLineNum++;
+                    newLineNum++;
+                }
+                j++;
+            }
+
+            const alignedLines: Array<{
+                leftLine: { type: 'context' | 'removed' | 'empty'; lineNumber: number | null; content: string };
+                rightLine: { type: 'context' | 'added' | 'empty'; lineNumber: number | null; content: string };
+            }> = [];
+
+            const leftSide: Array<{ type: 'context' | 'removed'; lineNumber: number; content: string }> = [];
+            const rightSide: Array<{ type: 'context' | 'added'; lineNumber: number; content: string }> = [];
+
+            changes.forEach((change) => {
+                if (change.type === 'context') {
+                    leftSide.push({ type: 'context', lineNumber: change.oldLine!, content: change.content });
+                    rightSide.push({ type: 'context', lineNumber: change.newLine!, content: change.content });
+                } else if (change.type === 'removed') {
+                    leftSide.push({ type: 'removed', lineNumber: change.oldLine!, content: change.content });
+                } else if (change.type === 'added') {
+                    rightSide.push({ type: 'added', lineNumber: change.newLine!, content: change.content });
+                }
+            });
+
+            const alignmentPoints: Array<{ leftIdx: number; rightIdx: number }> = [];
+
+            leftSide.forEach((leftItem, leftIdx) => {
+                if (leftItem.type === 'context') {
+                    const rightIdx = rightSide.findIndex((rightItem, rIdx) =>
+                        rightItem.type === 'context' &&
+                        rightItem.content === leftItem.content &&
+                        !alignmentPoints.some((ap) => ap.rightIdx === rIdx)
+                    );
+                    if (rightIdx >= 0) {
+                        alignmentPoints.push({ leftIdx, rightIdx });
+                    }
+                }
+            });
+
+            alignmentPoints.sort((a, b) => a.leftIdx - b.leftIdx);
+
+            let leftIdx = 0;
+            let rightIdx = 0;
+            let alignIdx = 0;
+
+            while (leftIdx < leftSide.length || rightIdx < rightSide.length) {
+                const nextAlign = alignIdx < alignmentPoints.length ? alignmentPoints[alignIdx] : null;
+
+                if (nextAlign && leftIdx === nextAlign.leftIdx && rightIdx === nextAlign.rightIdx) {
+                    const leftItem = leftSide[leftIdx];
+                    const rightItem = rightSide[rightIdx];
+
+                    alignedLines.push({
+                        leftLine: {
+                            type: 'context',
+                            lineNumber: leftItem.lineNumber,
+                            content: leftItem.content,
+                        },
+                        rightLine: {
+                            type: 'context',
+                            lineNumber: rightItem.lineNumber,
+                            content: rightItem.content,
+                        },
+                    });
+
+                    leftIdx++;
+                    rightIdx++;
+                    alignIdx++;
+                } else {
+                    const needProcessLeft = leftIdx < leftSide.length && (!nextAlign || leftIdx < nextAlign.leftIdx);
+                    const needProcessRight = rightIdx < rightSide.length && (!nextAlign || rightIdx < nextAlign.rightIdx);
+
+                    if (needProcessLeft && needProcessRight) {
+                        const leftItem = leftSide[leftIdx];
+                        const rightItem = rightSide[rightIdx];
+
+                        alignedLines.push({
+                            leftLine: {
+                                type: leftItem.type,
+                                lineNumber: leftItem.lineNumber,
+                                content: leftItem.content,
+                            },
+                            rightLine: {
+                                type: rightItem.type,
+                                lineNumber: rightItem.lineNumber,
+                                content: rightItem.content,
+                            },
+                        });
+
+                        leftIdx++;
+                        rightIdx++;
+                    } else if (needProcessLeft) {
+                        const leftItem = leftSide[leftIdx];
+                        alignedLines.push({
+                            leftLine: {
+                                type: leftItem.type,
+                                lineNumber: leftItem.lineNumber,
+                                content: leftItem.content,
+                            },
+                            rightLine: {
+                                type: 'empty',
+                                lineNumber: null,
+                                content: '',
+                            },
+                        });
+                        leftIdx++;
+                    } else if (needProcessRight) {
+                        const rightItem = rightSide[rightIdx];
+                        alignedLines.push({
+                            leftLine: {
+                                type: 'empty',
+                                lineNumber: null,
+                                content: '',
+                            },
+                            rightLine: {
+                                type: rightItem.type,
+                                lineNumber: rightItem.lineNumber,
+                                content: rightItem.content,
+                            },
+                        });
+                        rightIdx++;
+                    } else {
+                        break;
+                    }
+                }
+            }
+
+            hunks.push({
+                file: currentFile,
+                oldStart,
+                newStart,
+                lines: alignedLines,
+            });
+
+            i = j;
+            continue;
+        }
+
+        i++;
+    }
+
+    return hunks;
+};
+
+export const detectLanguageFromOutput = (output: string, toolName: string, input?: Record<string, unknown>) => {
+    return detectToolOutputLanguage(toolName, output, input);
+};
+
+export { formatInputForDisplay };
diff --git a/packages/ui/src/components/chat/message/types.ts b/packages/ui/src/components/chat/message/types.ts
new file mode 100644
index 00000000..30909d2e
--- /dev/null
+++ b/packages/ui/src/components/chat/message/types.ts
@@ -0,0 +1,24 @@
+export type StreamPhase = 'streaming' | 'cooldown' | 'completed';
+
+export type DiffViewMode = 'side-by-side' | 'unified';
+
+export interface AgentMentionInfo {
+    name: string;
+    token: string;
+}
+
+export interface ToolPopupContent {
+    open: boolean;
+    title: string;
+    content: string;
+    language?: string;
+    isDiff?: boolean;
+    diffHunks?: Array<Record<string, unknown>>;
+    metadata?: Record<string, unknown>;
+    image?: {
+        url: string;
+        mimeType?: string;
+        filename?: string;
+        size?: number;
+    };
+}
diff --git a/packages/ui/src/components/layout/Header.tsx b/packages/ui/src/components/layout/Header.tsx
new file mode 100644
index 00000000..956458da
--- /dev/null
+++ b/packages/ui/src/components/layout/Header.tsx
@@ -0,0 +1,478 @@
+import React, { useEffect } from 'react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { Button } from '@/components/ui/button';
+import { RiArrowDownSLine, RiArrowUpSLine, RiChat1Line, RiCodeLine, RiGitBranchLine, RiLayoutLeftLine, RiTerminalBoxLine, type RemixiconComponentType } from '@remixicon/react';
+import { useUIStore, type MainTab } from '@/stores/useUIStore';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
+import { useDeviceInfo } from '@/lib/device';
+import { cn } from '@/lib/utils';
+import { useDiffFileCount } from '@/components/views/DiffView';
+
+interface TabConfig {
+  id: MainTab;
+  label: string;
+  icon: RemixiconComponentType;
+  badge?: number;
+}
+
+export const FixedSessionsButton: React.FC = () => {
+  const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
+  const toggleSidebar = useUIStore((state) => state.toggleSidebar);
+  const { isMobile } = useDeviceInfo();
+
+  const [isDesktopApp, setIsDesktopApp] = React.useState<boolean>(() => {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+    return typeof (window as typeof window & { opencodeDesktop?: unknown }).opencodeDesktop !== 'undefined';
+  });
+
+  const isMacPlatform = React.useMemo(() => {
+    if (typeof navigator === 'undefined') {
+      return false;
+    }
+    return /Macintosh|Mac OS X/.test(navigator.userAgent || '');
+  }, []);
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    const detected = typeof (window as typeof window & { opencodeDesktop?: unknown }).opencodeDesktop !== 'undefined';
+    setIsDesktopApp(detected);
+  }, []);
+
+  const handleOpenSessionSwitcher = React.useCallback(() => {
+    if (isMobile) {
+      setSessionSwitcherOpen(true);
+    } else {
+      toggleSidebar();
+    }
+  }, [isMobile, setSessionSwitcherOpen, toggleSidebar]);
+
+  const headerIconButtonClass = 'app-region-no-drag inline-flex h-9 w-9 items-center justify-center gap-2 p-2 typography-ui-label font-medium text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 hover:text-foreground';
+
+  if (isMobile || !isDesktopApp || !isMacPlatform) {
+    return null;
+  }
+
+  return (
+     <div className="fixed top-[0.375rem] left-[5.25rem] z-[9999]" style={{ pointerEvents: 'auto' }}>
+       <button
+         type="button"
+         onClick={handleOpenSessionSwitcher}
+         aria-label="Open sessions"
+         className={headerIconButtonClass}
+       >
+         <RiLayoutLeftLine className="h-5 w-5" />
+       </button>
+     </div>
+  );
+};
+
+export const Header: React.FC = () => {
+  const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
+  const toggleSidebar = useUIStore((state) => state.toggleSidebar);
+  const isSidebarOpen = useUIStore((state) => state.isSidebarOpen);
+  const sidebarWidth = useUIStore((state) => state.sidebarWidth);
+  const activeMainTab = useUIStore((state) => state.activeMainTab);
+  const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
+
+  const { getCurrentModel } = useConfigStore();
+
+  const getContextUsage = useSessionStore((state) => state.getContextUsage);
+  const { isMobile } = useDeviceInfo();
+  const diffFileCount = useDiffFileCount();
+
+  const headerRef = React.useRef<HTMLElement | null>(null);
+
+  const [isDesktopApp, setIsDesktopApp] = React.useState<boolean>(() => {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+    return typeof (window as typeof window & { opencodeDesktop?: unknown }).opencodeDesktop !== 'undefined';
+  });
+
+  const isMacPlatform = React.useMemo(() => {
+    if (typeof navigator === 'undefined') {
+      return false;
+    }
+    return /Macintosh|Mac OS X/.test(navigator.userAgent || '');
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    const detected = typeof (window as typeof window & { opencodeDesktop?: unknown }).opencodeDesktop !== 'undefined';
+    setIsDesktopApp(detected);
+  }, []);
+
+  const currentModel = getCurrentModel();
+  const limit = currentModel && typeof currentModel.limit === 'object' && currentModel.limit !== null
+    ? (currentModel.limit as Record<string, unknown>)
+    : null;
+  const contextLimit = (limit && typeof limit.context === 'number' ? limit.context : 0);
+  const outputLimit = (limit && typeof limit.output === 'number' ? limit.output : 0);
+  const contextUsage = getContextUsage(contextLimit, outputLimit);
+  const [isMobileDetailsOpen, setIsMobileDetailsOpen] = React.useState(false);
+  const isSessionSwitcherOpen = useUIStore((state) => state.isSessionSwitcherOpen);
+
+  const handleOpenSessionSwitcher = React.useCallback(() => {
+    if (isMobile) {
+      setSessionSwitcherOpen(!isSessionSwitcherOpen);
+      return;
+    }
+    toggleSidebar();
+  }, [isMobile, isSessionSwitcherOpen, setSessionSwitcherOpen, toggleSidebar]);
+
+  const headerIconButtonClass = 'app-region-no-drag inline-flex h-9 w-9 items-center justify-center gap-2 p-2 typography-ui-label font-medium text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 hover:text-foreground';
+
+  const desktopPaddingClass = React.useMemo(() => {
+    if (isDesktopApp && isMacPlatform) {
+
+      return isSidebarOpen ? 'pl-0' : 'pl-[8.0rem]';
+    }
+    return 'pl-3';
+  }, [isDesktopApp, isMacPlatform, isSidebarOpen]);
+
+  const updateHeaderHeight = React.useCallback(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const height = headerRef.current?.getBoundingClientRect().height;
+    if (height) {
+      document.documentElement.style.setProperty('--oc-header-height', `${height}px`);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    updateHeaderHeight();
+
+    const node = headerRef.current;
+    if (!node || typeof ResizeObserver === 'undefined') {
+      return () => {};
+    }
+
+    const observer = new ResizeObserver(() => {
+      updateHeaderHeight();
+    });
+
+    observer.observe(node);
+    window.addEventListener('resize', updateHeaderHeight);
+    window.addEventListener('orientationchange', updateHeaderHeight);
+
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', updateHeaderHeight);
+      window.removeEventListener('orientationchange', updateHeaderHeight);
+    };
+  }, [updateHeaderHeight]);
+
+  useEffect(() => {
+    updateHeaderHeight();
+  }, [updateHeaderHeight, isMobile, isMobileDetailsOpen]);
+
+  const formatTokenValue = React.useCallback((tokens: number) => {
+    if (tokens >= 1_000_000) {
+      return `${(tokens / 1_000_000).toFixed(1)}M`;
+    }
+    if (tokens >= 1_000) {
+      return `${(tokens / 1_000).toFixed(1)}K`;
+    }
+    return tokens.toFixed(1).replace(/\.0$/, '');
+  }, []);
+
+  const handleDragStart = React.useCallback(async (e: React.MouseEvent) => {
+
+    if ((e.target as HTMLElement).closest('button, a, input, select, textarea')) {
+      return;
+    }
+
+    if (e.button !== 0) {
+      return;
+    }
+
+    if (isDesktopApp) {
+      try {
+        const { getCurrentWindow } = await import('@tauri-apps/api/window');
+        const window = getCurrentWindow();
+        await window.startDragging();
+      } catch (error) {
+        console.error('Failed to start window dragging:', error);
+      }
+    }
+  }, [isDesktopApp]);
+
+  const handleActiveTabDragStart = React.useCallback(async (e: React.MouseEvent) => {
+
+    if (e.button !== 0) {
+      return;
+    }
+
+    if (isDesktopApp) {
+      try {
+        const { getCurrentWindow } = await import('@tauri-apps/api/window');
+        const window = getCurrentWindow();
+        await window.startDragging();
+      } catch (error) {
+        console.error('Failed to start window dragging:', error);
+      }
+    }
+  }, [isDesktopApp]);
+
+  const tabs: TabConfig[] = React.useMemo(() => [
+    { id: 'chat', label: 'Chat', icon: RiChat1Line },
+    { id: 'diff', label: 'Diff', icon: RiCodeLine, badge: diffFileCount > 0 ? diffFileCount : undefined },
+    { id: 'terminal', label: 'Terminal', icon: RiTerminalBoxLine },
+    { id: 'git', label: 'Git', icon: RiGitBranchLine },
+  ], [diffFileCount]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+
+      if ((e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
+        const num = parseInt(e.key, 10);
+        if (num >= 1 && num <= tabs.length) {
+          e.preventDefault();
+          setActiveMainTab(tabs[num - 1].id);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [tabs, setActiveMainTab]);
+
+  const renderTab = (tab: TabConfig, isLast: boolean) => {
+    const isActive = activeMainTab === tab.id;
+    const Icon = tab.icon;
+    const isChatTab = tab.id === 'chat';
+    const isGitTab = tab.id === 'git';
+
+    return (
+      <React.Fragment key={tab.id}>
+        <button
+          type="button"
+          onClick={() => setActiveMainTab(tab.id)}
+          onMouseDown={isActive ? handleActiveTabDragStart : undefined}
+          className={cn(
+            'relative flex h-full items-center gap-2 px-4 typography-ui-label font-medium transition-colors',
+            isActive ? 'app-region-drag' : 'app-region-no-drag',
+            'hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
+            isActive ? 'text-foreground' : 'text-muted-foreground',
+
+            isActive && 'after:absolute after:bottom-[-1px] after:left-0 after:right-0 after:h-[2px] after:bg-background',
+
+            isActive && isChatTab && isSidebarOpen && 'before:absolute before:bottom-[-1px] before:right-full before:h-px before:bg-[var(--interactive-border)] before:w-[var(--sidebar-w)]',
+
+            isChatTab && !(isDesktopApp && isMacPlatform && isSidebarOpen) && 'border-l',
+
+            isGitTab && 'border-r',
+
+            isChatTab && !isMobile && 'min-w-[165px]'
+          )}
+          style={{
+            ...(isActive && isChatTab && isSidebarOpen ? {
+
+              ['--sidebar-w' as string]: (isDesktopApp && isMacPlatform) ? `${sidebarWidth}px` : '64px'
+            } : {}),
+            ...((isChatTab && !(isDesktopApp && isMacPlatform && isSidebarOpen)) || isGitTab ? { borderColor: 'var(--interactive-border)' } : {}),
+          }}
+          aria-selected={isActive}
+          role="tab"
+        >
+          {isMobile ? (
+            <Icon size={20} />
+          ) : (
+            <>
+              <Icon size={16} />
+              <span>{tab.label}</span>
+            </>
+          )}
+          {}
+          {isChatTab && !isMobile && contextUsage && contextUsage.totalTokens > 0 && (
+            <span className="ml-1">
+              <ContextUsageDisplay
+                totalTokens={contextUsage.totalTokens}
+                percentage={contextUsage.percentage}
+                contextLimit={contextUsage.contextLimit}
+                outputLimit={contextUsage.outputLimit ?? 0}
+                size="compact"
+              />
+            </span>
+          )}
+          {}
+          {tab.badge !== undefined && tab.badge > 0 && (
+            <span className="text-xs font-semibold text-primary">
+              {tab.badge}
+            </span>
+          )}
+        </button>
+        {}
+        {!isLast && (
+          <div className="h-full w-px bg-border" aria-hidden="true" />
+        )}
+      </React.Fragment>
+    );
+  };
+
+  const renderDesktop = () => (
+    <div
+      onMouseDown={handleDragStart}
+      className={cn(
+        'app-region-drag relative flex h-12 select-none items-center',
+        desktopPaddingClass
+      )}
+      role="tablist"
+      aria-label="Main navigation"
+    >
+      {}
+      {!(isDesktopApp && isMacPlatform) && (
+        <>
+          <button
+            type="button"
+            onClick={handleOpenSessionSwitcher}
+            aria-label="Open sessions"
+            className={`${headerIconButtonClass} mr-2.5`}
+          >
+            <RiLayoutLeftLine className="h-5 w-5" />
+          </button>
+        </>
+      )}
+
+      {}
+      <div className="flex h-full items-center">
+        {tabs.map((tab, index) => renderTab(tab, index === tabs.length - 1))}
+      </div>
+
+      {}
+      <div className="flex-1" />
+    </div>
+  );
+
+  const renderMobile = () => (
+    <div className="app-region-drag relative flex flex-col gap-1 px-3 py-2 select-none">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <button
+            onClick={handleOpenSessionSwitcher}
+            className="app-region-no-drag h-9 w-9 p-2 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+            aria-label="Open sessions"
+          >
+            <RiLayoutLeftLine className="h-5 w-5" />
+          </button>
+          {contextUsage && contextUsage.totalTokens > 0 && activeMainTab === 'chat' && (
+            <ContextUsageDisplay
+              totalTokens={contextUsage.totalTokens}
+              percentage={contextUsage.percentage}
+              contextLimit={contextUsage.contextLimit}
+              outputLimit={contextUsage.outputLimit ?? 0}
+              size="compact"
+            />
+          )}
+        </div>
+
+        <div className="app-region-no-drag flex items-center gap-1.5">
+          {}
+          <div className="flex items-center" role="tablist" aria-label="Main navigation">
+            {tabs.map((tab) => {
+              const isActive = activeMainTab === tab.id;
+              const Icon = tab.icon;
+              return (
+                <Tooltip key={tab.id} delayDuration={500}>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={() => setActiveMainTab(tab.id)}
+                      aria-label={tab.label}
+                      aria-selected={isActive}
+                      role="tab"
+                      className={cn(
+                        headerIconButtonClass,
+                        isActive && 'text-foreground'
+                      )}
+                    >
+                      <Icon className="h-5 w-5" />
+                      {tab.badge !== undefined && tab.badge > 0 && (
+                        <span className="absolute -top-1 -right-1 text-[10px] font-semibold text-primary">
+                          {tab.badge}
+                        </span>
+                      )}
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{tab.label}</p>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            aria-expanded={isMobileDetailsOpen}
+            aria-controls="mobile-header-details"
+            onClick={() => setIsMobileDetailsOpen((prev) => !prev)}
+            className="app-region-no-drag h-8 w-8"
+          >
+            {isMobileDetailsOpen ? <RiArrowUpSLine className="h-4 w-4" /> : <RiArrowDownSLine className="h-4 w-4" />}
+          </Button>
+        </div>
+      </div>
+
+      {isMobileDetailsOpen && (
+        <div
+          id="mobile-header-details"
+          className="app-region-no-drag absolute left-0 right-0 top-full z-40 translate-y-2 px-3"
+        >
+          <div className="flex flex-col gap-4 rounded-xl border border-border/40 bg-background/95 px-3 py-3 shadow-none">
+            {contextUsage && contextUsage.totalTokens > 0 && (
+              <div className="flex flex-col gap-1">
+                <span className="typography-micro text-muted-foreground">Context usage</span>
+                <div className="rounded-lg border border-border/40 bg-muted/10 px-3 py-2 space-y-0.5">
+                  <p className="typography-meta">
+                    Used tokens: <span className="font-semibold text-foreground">{formatTokenValue(contextUsage.totalTokens)}</span>
+                  </p>
+                  <p className="typography-meta">
+                    Context limit: <span className="font-semibold text-foreground">{formatTokenValue(contextUsage.contextLimit)}</span>
+                  </p>
+                  <p className="typography-meta">
+                    Output limit: <span className="font-semibold text-foreground">{formatTokenValue(contextUsage.outputLimit ?? 0)}</span>
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  const headerClassName = cn(
+    'header-safe-area border-b relative z-10',
+    isDesktopApp ? 'bg-background' : 'bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80'
+  );
+
+  return (
+    <header
+      ref={headerRef}
+      className={headerClassName}
+      style={{ borderColor: 'var(--interactive-border)' }}
+    >
+      {isMobile ? renderMobile() : renderDesktop()}
+    </header>
+  );
+};
diff --git a/packages/ui/src/components/layout/MainLayout.tsx b/packages/ui/src/components/layout/MainLayout.tsx
new file mode 100644
index 00000000..474f2cbf
--- /dev/null
+++ b/packages/ui/src/components/layout/MainLayout.tsx
@@ -0,0 +1,161 @@
+import React from 'react';
+import { Header, FixedSessionsButton } from './Header';
+import { Sidebar } from './Sidebar';
+import { SettingsDialog } from './SettingsDialog';
+import { ErrorBoundary } from '../ui/ErrorBoundary';
+import { CommandPalette } from '../ui/CommandPalette';
+import { HelpDialog } from '../ui/HelpDialog';
+import { SessionSidebar } from '@/components/session/SessionSidebar';
+import { SessionDialogs } from '@/components/session/SessionDialogs';
+import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
+
+import { useUIStore } from '@/stores/useUIStore';
+import { useDeviceInfo } from '@/lib/device';
+import { useEdgeSwipe } from '@/hooks/useEdgeSwipe';
+import { cn } from '@/lib/utils';
+
+import { ChatView, GitView, DiffView, TerminalView } from '@/components/views';
+
+export const MainLayout: React.FC = () => {
+    const {
+        isSidebarOpen,
+        activeMainTab,
+        setIsMobile,
+        isSessionSwitcherOpen,
+        setSessionSwitcherOpen,
+        isSettingsDialogOpen,
+        setSettingsDialogOpen,
+    } = useUIStore();
+    const { isMobile } = useDeviceInfo();
+    const [isDesktopRuntime, setIsDesktopRuntime] = React.useState<boolean>(() => {
+        if (typeof window === 'undefined') {
+            return false;
+        }
+        return typeof window.opencodeDesktop !== 'undefined';
+    });
+
+    React.useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        setIsDesktopRuntime(typeof window.opencodeDesktop !== 'undefined');
+    }, []);
+
+    useEdgeSwipe({ enabled: true });
+
+    React.useEffect(() => {
+        const previous = useUIStore.getState().isMobile;
+        if (previous !== isMobile) {
+            setIsMobile(isMobile);
+        }
+    }, [isMobile, setIsMobile]);
+
+    React.useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+
+        let timeoutId: number | undefined;
+
+        const handleResize = () => {
+
+            if (timeoutId !== undefined) {
+                window.clearTimeout(timeoutId);
+            }
+
+            timeoutId = window.setTimeout(() => {
+                useUIStore.getState().updateProportionalSidebarWidths();
+            }, 150);
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            if (timeoutId !== undefined) {
+                window.clearTimeout(timeoutId);
+            }
+        };
+    }, []);
+
+    const secondaryView = React.useMemo(() => {
+        switch (activeMainTab) {
+            case 'git':
+                return <GitView />;
+            case 'diff':
+                return <DiffView />;
+            case 'terminal':
+                return <TerminalView />;
+            default:
+                return null;
+        }
+    }, [activeMainTab]);
+
+    const isChatActive = activeMainTab === 'chat';
+
+    return (
+        <div
+            className={cn(
+                'main-content-safe-area h-[100dvh]',
+                isMobile ? 'flex flex-col' : 'flex',
+                isDesktopRuntime ? 'bg-transparent' : 'bg-background'
+            )}
+        >
+            <CommandPalette />
+            <HelpDialog />
+            <SessionDialogs />
+            <SettingsDialog isOpen={isSettingsDialogOpen} onClose={() => setSettingsDialogOpen(false)} />
+
+            {isMobile ? (
+                <>
+                    <Header />
+                    <div className="flex flex-1 overflow-hidden bg-background">
+                        <main className="flex-1 overflow-hidden bg-background relative">
+                            <div className={cn('absolute inset-0', !isChatActive && 'invisible')}>
+                                <ErrorBoundary><ChatView /></ErrorBoundary>
+                            </div>
+                            {secondaryView && (
+                                <div className="absolute inset-0">
+                                    <ErrorBoundary>{secondaryView}</ErrorBoundary>
+                                </div>
+                            )}
+                        </main>
+                    </div>
+
+                    <MobileOverlayPanel
+                        open={isSessionSwitcherOpen}
+                        onClose={() => setSessionSwitcherOpen(false)}
+                        title="Sessions"
+                    >
+                        <SessionSidebar mobileVariant />
+                    </MobileOverlayPanel>
+                </>
+            ) : (
+                <>
+                    <Sidebar isOpen={isSidebarOpen} isMobile={isMobile}>
+                        <SessionSidebar />
+                    </Sidebar>
+
+                    <div className="flex flex-1 flex-col overflow-hidden">
+                        <Header />
+
+                        <div className="flex flex-1 overflow-hidden bg-background">
+                            <main className="flex-1 overflow-hidden bg-background relative">
+                                <div className={cn('absolute inset-0', !isChatActive && 'invisible')}>
+                                    <ErrorBoundary><ChatView /></ErrorBoundary>
+                                </div>
+                                {secondaryView && (
+                                    <div className="absolute inset-0">
+                                        <ErrorBoundary>{secondaryView}</ErrorBoundary>
+                                    </div>
+                                )}
+                            </main>
+                        </div>
+                    </div>
+                </>
+            )}
+
+            <FixedSessionsButton />
+        </div>
+    );
+};
diff --git a/packages/ui/src/components/layout/SettingsDialog.tsx b/packages/ui/src/components/layout/SettingsDialog.tsx
new file mode 100644
index 00000000..68c1a9a0
--- /dev/null
+++ b/packages/ui/src/components/layout/SettingsDialog.tsx
@@ -0,0 +1,244 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+import { SIDEBAR_SECTIONS } from '@/constants/sidebar';
+import type { SidebarSection } from '@/constants/sidebar';
+import { RiArrowLeftSLine } from '@remixicon/react';
+import { Button } from '@/components/ui/button';
+import { AgentsSidebar } from '@/components/sections/agents/AgentsSidebar';
+import { AgentsPage } from '@/components/sections/agents/AgentsPage';
+import { CommandsSidebar } from '@/components/sections/commands/CommandsSidebar';
+import { CommandsPage } from '@/components/sections/commands/CommandsPage';
+import { ProvidersSidebar } from '@/components/sections/providers/ProvidersSidebar';
+import { ProvidersPage } from '@/components/sections/providers/ProvidersPage';
+import { GitIdentitiesSidebar } from '@/components/sections/git-identities/GitIdentitiesSidebar';
+import { GitIdentitiesPage } from '@/components/sections/git-identities/GitIdentitiesPage';
+import { SettingsPage } from '@/components/sections/settings/SettingsPage';
+import { useDeviceInfo } from '@/lib/device';
+import { ErrorBoundary } from '@/components/ui/ErrorBoundary';
+import { SIDEBAR_CONTENT_WIDTH } from '@/components/layout/Sidebar';
+import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
+
+interface SettingsDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const SETTINGS_SECTIONS = (() => {
+  const filtered = SIDEBAR_SECTIONS.filter(section => section.id !== 'sessions');
+  const settingsSection = filtered.find(s => s.id === 'settings');
+  const otherSections = filtered.filter(s => s.id !== 'settings');
+  return settingsSection ? [settingsSection, ...otherSections] : filtered;
+})();
+
+export const SettingsDialog: React.FC<SettingsDialogProps> = ({ isOpen, onClose }) => {
+  const [activeTab, setActiveTab] = React.useState<SidebarSection>('settings');
+  const [showPageContent, setShowPageContent] = React.useState(false);
+  const { isMobile } = useDeviceInfo();
+
+  React.useEffect(() => {
+    if (isOpen) {
+      setActiveTab('settings');
+      setShowPageContent(false);
+    }
+  }, [isOpen]);
+
+  const handleTabChange = React.useCallback((tab: SidebarSection) => {
+    setActiveTab(tab);
+    if (isMobile) {
+      setShowPageContent(false);
+    }
+  }, [isMobile]);
+
+  const handleItemSelect = React.useCallback(() => {
+    if (isMobile) {
+      setShowPageContent(true);
+    }
+  }, [isMobile]);
+
+  const renderSidebarContent = () => {
+
+    if (activeTab === 'settings') {
+      return null;
+    }
+
+    const content = (() => {
+      switch (activeTab) {
+        case 'agents':
+          return <AgentsSidebar />;
+        case 'commands':
+      return <CommandsSidebar />;
+    case 'providers':
+      return <ProvidersSidebar />;
+    case 'git-identities':
+      return <GitIdentitiesSidebar />;
+    default:
+      return null;
+  }
+    })();
+
+    if (isMobile) {
+      return <div onClick={handleItemSelect}>{content}</div>;
+    }
+
+    return content;
+  };
+
+  const renderPageContent = () => {
+    switch (activeTab) {
+      case 'agents':
+        return <AgentsPage />;
+      case 'commands':
+        return <CommandsPage />;
+      case 'providers':
+      return <ProvidersPage />;
+    case 'git-identities':
+      return <GitIdentitiesPage />;
+    case 'settings':
+      return <SettingsPage />;
+      default:
+        return null;
+    }
+  };
+
+  const activeSection = SETTINGS_SECTIONS.find(s => s.id === activeTab);
+  const useMobileOverlay = isMobile;
+
+  const headerContent = (
+    <DialogHeader
+      className="border-b border-border/40 px-6 pb-4 pt-[calc(var(--oc-safe-area-top,0px)+0.5rem)]"
+    >
+      <div className="relative flex items-center justify-center">
+        {isMobile && showPageContent && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setShowPageContent(false)}
+            className="absolute left-0 h-6 w-6 flex-shrink-0"
+          >
+            <RiArrowLeftSLine className="h-5 w-5" />
+            <span className="sr-only">Back to sidebar</span>
+          </Button>
+        )}
+        <DialogTitle className="typography-ui-header">Settings</DialogTitle>
+      </div>
+      {activeSection && (
+        <DialogDescription className="typography-meta text-muted-foreground hidden sm:block">
+          {activeSection.description}
+        </DialogDescription>
+      )}
+    </DialogHeader>
+  );
+
+  const mainContent = (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="flex flex-wrap items-center gap-1 border-b border-border/40 bg-background/95 px-3 py-1.5">
+        {SETTINGS_SECTIONS.map(({ id, label, icon: Icon }) => {
+          const isActive = activeTab === id;
+          const PhosphorIcon = Icon as React.ComponentType<{ className?: string; weight?: string }>;
+          return (
+            <button
+              key={id}
+              onClick={() => handleTabChange(id)}
+              className={cn(
+                'flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium whitespace-nowrap',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+                isActive ? 'text-primary' : 'text-muted-foreground hover:text-foreground'
+              )}
+              aria-pressed={isActive}
+              aria-label={label}
+            >
+              <PhosphorIcon className={cn('h-5 w-5 sm:h-4 sm:w-4')} weight="regular" />
+              <span className="hidden sm:inline">{label}</span>
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="flex flex-1 overflow-hidden">
+        {activeTab !== 'settings' && (!isMobile || !showPageContent) && (
+          <div
+            className={cn(
+              'overflow-hidden border-r bg-sidebar',
+              isMobile && 'w-full border-r-0'
+            )}
+            style={
+              !isMobile
+                ? {
+                    width: `${SIDEBAR_CONTENT_WIDTH}px`,
+                    minWidth: `${SIDEBAR_CONTENT_WIDTH}px`,
+                  }
+                : undefined
+            }
+          >
+            <ErrorBoundary>{renderSidebarContent()}</ErrorBoundary>
+          </div>
+        )}
+
+        {(activeTab === 'settings' || !isMobile || showPageContent) && (
+          <div className={cn('flex-1 overflow-hidden bg-background', isMobile && 'w-full')}>
+            <ErrorBoundary>{renderPageContent()}</ErrorBoundary>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  const panelContent = (
+    <div className="flex h-full flex-col overflow-hidden">
+      {!useMobileOverlay && headerContent}
+      {mainContent}
+    </div>
+  );
+
+  if (useMobileOverlay) {
+    return (
+      <MobileOverlayPanel
+        open={isOpen}
+        onClose={onClose}
+        title="Settings"
+        className="max-w-full"
+        renderHeader={(closeButton) => (
+          <div className="flex items-center justify-between px-3 py-2 border-b border-border/40">
+            <div className="relative flex flex-1 items-center justify-center">
+              {showPageContent && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setShowPageContent(false)}
+                  className="absolute left-0 h-6 w-6 flex-shrink-0"
+                >
+                  <RiArrowLeftSLine className="h-5 w-5" />
+                  <span className="sr-only">Back to sidebar</span>
+                </Button>
+              )}
+              <span className="typography-ui-header">Settings</span>
+            </div>
+            {closeButton}
+          </div>
+        )}
+      >
+        {mainContent}
+      </MobileOverlayPanel>
+    );
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent
+        className={cn(
+          'flex flex-col gap-0 p-0',
+          'h-[88vh] w-[65vw] max-w-[900px]'
+        )}
+      >
+        {panelContent}
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/packages/ui/src/components/layout/Sidebar.tsx b/packages/ui/src/components/layout/Sidebar.tsx
new file mode 100644
index 00000000..3773b88b
--- /dev/null
+++ b/packages/ui/src/components/layout/Sidebar.tsx
@@ -0,0 +1,218 @@
+import React from 'react';
+import { RiDownloadLine, RiSettings3Line } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import { ErrorBoundary } from '../ui/ErrorBoundary';
+import { useUIStore } from '@/stores/useUIStore';
+import { useUpdateCheck } from '@/hooks/useUpdateCheck';
+import { UpdateDialog } from '../ui/UpdateDialog';
+
+export const SIDEBAR_CONTENT_WIDTH = 264;
+const SIDEBAR_MIN_WIDTH = 200;
+const SIDEBAR_MAX_WIDTH = 500;
+const MAC_TITLEBAR_SAFE_AREA = 40;
+
+interface SidebarProps {
+    isOpen: boolean;
+    isMobile: boolean;
+    children: React.ReactNode;
+}
+
+export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children }) => {
+    const { sidebarWidth, setSidebarWidth, setSettingsDialogOpen } = useUIStore();
+    const [isResizing, setIsResizing] = React.useState(false);
+    const startXRef = React.useRef(0);
+    const startWidthRef = React.useRef(sidebarWidth || SIDEBAR_CONTENT_WIDTH);
+    const [updateDialogOpen, setUpdateDialogOpen] = React.useState(false);
+
+    const update = useUpdateCheck();
+
+    const [isDesktopApp, setIsDesktopApp] = React.useState<boolean>(() => {
+        if (typeof window === 'undefined') {
+            return false;
+        }
+        return typeof (window as typeof window & { opencodeDesktop?: unknown }).opencodeDesktop !== 'undefined';
+    });
+
+    const isMacPlatform = React.useMemo(() => {
+        if (typeof navigator === 'undefined') {
+            return false;
+        }
+        return /Macintosh|Mac OS X/.test(navigator.userAgent || '');
+    }, []);
+
+    React.useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const detected = typeof (window as typeof window & { opencodeDesktop?: unknown }).opencodeDesktop !== 'undefined';
+        setIsDesktopApp(detected);
+    }, []);
+
+    React.useEffect(() => {
+        if (isMobile || !isResizing) {
+            return;
+        }
+
+        const handlePointerMove = (event: PointerEvent) => {
+            const delta = event.clientX - startXRef.current;
+            const nextWidth = Math.min(
+                SIDEBAR_MAX_WIDTH,
+                Math.max(SIDEBAR_MIN_WIDTH, startWidthRef.current + delta)
+            );
+            setSidebarWidth(nextWidth);
+        };
+
+        const handlePointerUp = () => {
+            setIsResizing(false);
+        };
+
+        window.addEventListener('pointermove', handlePointerMove);
+        window.addEventListener('pointerup', handlePointerUp, { once: true });
+
+        return () => {
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', handlePointerUp);
+        };
+    }, [isMobile, isResizing, setSidebarWidth]);
+
+    React.useEffect(() => {
+        if (isMobile && isResizing) {
+            setIsResizing(false);
+        }
+    }, [isMobile, isResizing]);
+
+    const handleTitlebarDragStart = React.useCallback(async (e: React.MouseEvent) => {
+
+        if (e.button !== 0) {
+            return;
+        }
+
+        if (isDesktopApp) {
+            try {
+                const { getCurrentWindow } = await import('@tauri-apps/api/window');
+                const window = getCurrentWindow();
+                await window.startDragging();
+            } catch (error) {
+                console.error('Failed to start window dragging from sidebar:', error);
+            }
+        }
+    }, [isDesktopApp]);
+
+    if (isMobile) {
+
+        return null;
+    }
+
+    const appliedWidth = isOpen ? Math.min(
+        SIDEBAR_MAX_WIDTH,
+        Math.max(SIDEBAR_MIN_WIDTH, sidebarWidth || SIDEBAR_CONTENT_WIDTH)
+    ) : 0;
+    const shouldRenderTitlebarSpacer = isDesktopApp && isMacPlatform;
+
+    const handlePointerDown = (event: React.PointerEvent) => {
+        if (!isOpen) {
+            return;
+        }
+        setIsResizing(true);
+        startXRef.current = event.clientX;
+        startWidthRef.current = appliedWidth;
+        event.preventDefault();
+    };
+
+    return (
+        <aside
+            className={cn(
+                'relative flex h-full overflow-hidden border-r',
+                isDesktopApp
+                    ? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
+                    : 'bg-sidebar',
+                isResizing ? 'transition-none' : '',
+                !isOpen && 'border-r-0'
+            )}
+            style={{
+                width: `${appliedWidth}px`,
+                minWidth: `${appliedWidth}px`,
+                maxWidth: `${appliedWidth}px`,
+                pointerEvents: !isOpen ? 'none' : undefined,
+                borderColor: 'var(--interactive-border)',
+                overflowX: 'clip',
+            }}
+            aria-hidden={!isOpen || appliedWidth === 0}
+        >
+            {isOpen && (
+                <div
+                    className={cn(
+                        'absolute right-0 top-0 z-20 h-full w-[6px] -mr-[3px] cursor-col-resize',
+                        isResizing ? 'bg-primary/30' : 'bg-transparent hover:bg-primary/20'
+                    )}
+                    onPointerDown={handlePointerDown}
+                    role="separator"
+                    aria-orientation="vertical"
+                    aria-label="Resize left panel"
+                />
+            )}
+            <div
+                className={cn(
+                    'relative z-10 flex h-full flex-col transition-opacity duration-200 ease-in-out',
+                    !isOpen && 'pointer-events-none select-none opacity-0'
+                )}
+                style={{ width: `${appliedWidth}px`, overflowX: 'hidden' }}
+                aria-hidden={!isOpen}
+            >
+                {shouldRenderTitlebarSpacer && (
+                    <div
+                        className="flex-shrink-0 select-none"
+                        style={{ height: `${MAC_TITLEBAR_SAFE_AREA}px` }}
+                        onMouseDown={handleTitlebarDragStart}
+                        aria-hidden
+                    />
+                )}
+                <div className="flex-1 overflow-hidden">
+                    <ErrorBoundary>{children}</ErrorBoundary>
+                </div>
+                <div className="flex-shrink-0 border-t border-border p-2">
+                    <div className="flex items-center justify-between gap-2">
+                        <button
+                            onClick={() => setSettingsDialogOpen(true)}
+                            className={cn(
+                                'flex items-center gap-2 rounded-md px-3 py-2',
+                                'text-sm text-muted-foreground',
+                                'hover:bg-accent hover:text-accent-foreground',
+                                'transition-colors'
+                            )}
+                        >
+                            <RiSettings3Line className="h-4 w-4" />
+                            <span>Settings</span>
+                        </button>
+                        {(update.available || update.downloaded) && (
+                            <button
+                                onClick={() => setUpdateDialogOpen(true)}
+                                className={cn(
+                                    'flex items-center gap-1.5 rounded-md px-2.5 py-1.5',
+                                    'text-xs font-medium',
+                                    'bg-primary/10 text-primary',
+                                    'hover:bg-primary/20',
+                                    'transition-colors'
+                                )}
+                            >
+                                <RiDownloadLine className="h-3.5 w-3.5" />
+                                <span>Update</span>
+                            </button>
+                        )}
+                    </div>
+                </div>
+                <UpdateDialog
+                    open={updateDialogOpen}
+                    onOpenChange={setUpdateDialogOpen}
+                    info={update.info}
+                    downloading={update.downloading}
+                    downloaded={update.downloaded}
+                    progress={update.progress}
+                    error={update.error}
+                    onDownload={update.downloadUpdate}
+                    onRestart={update.restartToUpdate}
+                />
+            </div>
+        </aside>
+    );
+};
diff --git a/packages/ui/src/components/layout/SidebarContextSummary.tsx b/packages/ui/src/components/layout/SidebarContextSummary.tsx
new file mode 100644
index 00000000..1829573c
--- /dev/null
+++ b/packages/ui/src/components/layout/SidebarContextSummary.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { cn } from '@/lib/utils';
+
+interface SidebarContextSummaryProps {
+    className?: string;
+}
+
+const formatSessionTitle = (title?: string | null) => {
+    if (!title) {
+        return 'Untitled Session';
+    }
+    const trimmed = title.trim();
+    return trimmed.length > 0 ? trimmed : 'Untitled Session';
+};
+
+const formatDirectoryPath = (path?: string) => {
+    if (!path || path.length === 0) {
+        return '/';
+    }
+    return path;
+};
+
+export const SidebarContextSummary: React.FC<SidebarContextSummaryProps> = ({ className }) => {
+    const currentSessionId = useSessionStore((state) => state.currentSessionId);
+    const sessions = useSessionStore((state) => state.sessions);
+    const { currentDirectory } = useDirectoryStore();
+
+    const activeSessionTitle = React.useMemo(() => {
+        if (!currentSessionId) {
+            return 'No active session';
+        }
+        const session = sessions.find((item) => item.id === currentSessionId);
+        return session ? formatSessionTitle(session.title) : 'No active session';
+    }, [currentSessionId, sessions]);
+
+    const directoryFull = React.useMemo(() => {
+        return formatDirectoryPath(currentDirectory);
+    }, [currentDirectory]);
+
+    const directoryDisplay = React.useMemo(() => {
+        if (!directoryFull || directoryFull === '/') {
+            return directoryFull;
+        }
+        const segments = directoryFull.split('/').filter(Boolean);
+        return segments.length ? segments[segments.length - 1] : directoryFull;
+    }, [directoryFull]);
+
+    return (
+        <div className={cn('hidden min-h-[48px] flex-col justify-center gap-0.5 border-b border-border/40 bg-sidebar/60 px-3 py-2 backdrop-blur md:flex md:pb-2', className)}>
+            <span className="typography-meta text-muted-foreground">Session</span>
+            <span className="typography-ui-label font-semibold text-foreground truncate" title={activeSessionTitle}>
+                {activeSessionTitle}
+            </span>
+            <span className="typography-meta text-muted-foreground truncate" title={directoryFull}>
+                {directoryDisplay}
+            </span>
+        </div>
+    );
+};
diff --git a/packages/ui/src/components/onboarding/OnboardingScreen.tsx b/packages/ui/src/components/onboarding/OnboardingScreen.tsx
new file mode 100644
index 00000000..50b0c61e
--- /dev/null
+++ b/packages/ui/src/components/onboarding/OnboardingScreen.tsx
@@ -0,0 +1,139 @@
+import React from 'react';
+import { RiFileCopyLine, RiCheckLine, RiExternalLinkLine } from '@remixicon/react';
+
+const INSTALL_COMMAND = 'curl -fsSL https://opencode.ai/install | bash';
+const POLL_INTERVAL_MS = 3000;
+
+type OnboardingScreenProps = {
+  onCliAvailable?: () => void;
+};
+
+function BashCommand({ onCopy }: { onCopy: () => void }) {
+  return (
+    <div className="flex items-center justify-center gap-3">
+      <code>
+        <span style={{ color: 'var(--syntax-keyword)' }}>curl</span>
+        <span className="text-muted-foreground"> -fsSL </span>
+        <span style={{ color: 'var(--syntax-string)' }}>https://opencode.ai/install</span>
+        <span className="text-muted-foreground"> | </span>
+        <span style={{ color: 'var(--syntax-keyword)' }}>bash</span>
+      </code>
+      <button
+        onClick={onCopy}
+        className="inline-flex items-center text-muted-foreground hover:text-foreground transition-colors"
+        title="Copy to clipboard"
+      >
+        <RiFileCopyLine className="h-4 w-4" />
+      </button>
+    </div>
+  );
+}
+
+const HINT_DELAY_MS = 30000;
+
+export function OnboardingScreen({ onCliAvailable }: OnboardingScreenProps) {
+  const [copied, setCopied] = React.useState(false);
+  const [showHint, setShowHint] = React.useState(false);
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setShowHint(true), HINT_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const checkCliAvailability = React.useCallback(async (): Promise<boolean> => {
+    try {
+      const response = await fetch('/health');
+      if (!response.ok) return false;
+      const data = await response.json();
+      return data.cliAvailable === true;
+    } catch {
+      return false;
+    }
+  }, []);
+
+  const handleCopy = React.useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(INSTALL_COMMAND);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    const poll = async () => {
+      const available = await checkCliAvailability();
+      if (available) {
+        onCliAvailable?.();
+      }
+    };
+
+    const interval = setInterval(poll, POLL_INTERVAL_MS);
+    poll();
+
+    return () => clearInterval(interval);
+  }, [checkCliAvailability, onCliAvailable]);
+
+  return (
+    <div className="h-full flex items-center justify-center bg-transparent p-8 relative">
+      <div className="w-full space-y-4 text-center">
+        <div className="space-y-4">
+          <h1 className="text-3xl font-semibold tracking-tight text-foreground">
+            Welcome to OpenChamber
+          </h1>
+          <p className="text-muted-foreground">
+            <a
+              href="https://opencode.ai"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:underline inline-flex items-center gap-1"
+            >
+              OpenCode CLI
+              <RiExternalLinkLine className="h-4 w-4" />
+            </a>
+            {' '}is required to continue.
+          </p>
+        </div>
+
+        <div className="flex justify-center">
+          <div className="bg-background/60 backdrop-blur-sm border border-border rounded-lg px-5 py-3 font-mono text-sm w-fit">
+            {copied ? (
+              <div className="flex items-center justify-center gap-2" style={{ color: 'var(--status-success)' }}>
+                <RiCheckLine className="h-4 w-4" />
+                Copied to clipboard
+              </div>
+            ) : (
+              <BashCommand onCopy={handleCopy} />
+            )}
+          </div>
+        </div>
+
+        <a
+          href="https://opencode.ai/docs"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-sm text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1 justify-center"
+        >
+          View documentation
+          <RiExternalLinkLine className="h-3 w-3" />
+        </a>
+
+        <p className="text-sm text-muted-foreground animate-pulse">
+          Waiting for OpenCode installation...
+        </p>
+      </div>
+
+      {showHint && (
+        <div className="absolute bottom-8 left-0 right-0 text-center space-y-1">
+          <p className="text-sm text-muted-foreground/70">
+            Already installed? Make sure <code className="text-foreground/70">opencode</code> is in your PATH
+          </p>
+          <p className="text-sm text-muted-foreground/70">
+            or set <code className="text-foreground/70">OPENCODE_BINARY</code> environment variable.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/providers/ThemeProvider.tsx b/packages/ui/src/components/providers/ThemeProvider.tsx
new file mode 100644
index 00000000..20ae3e2c
--- /dev/null
+++ b/packages/ui/src/components/providers/ThemeProvider.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { useUIStore } from '@/stores/useUIStore';
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const { theme, applyTheme } = useUIStore();
+
+  React.useEffect(() => {
+
+    applyTheme();
+  }, [theme, applyTheme]);
+
+  React.useEffect(() => {
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleChange = () => {
+      if (theme === 'system') {
+        applyTheme();
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [theme, applyTheme]);
+
+  return <>{children}</>;
+};
\ No newline at end of file
diff --git a/packages/ui/src/components/sections/SectionPlaceholder.tsx b/packages/ui/src/components/sections/SectionPlaceholder.tsx
new file mode 100644
index 00000000..1e2353ac
--- /dev/null
+++ b/packages/ui/src/components/sections/SectionPlaceholder.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { SIDEBAR_SECTION_CONFIG_MAP, SIDEBAR_SECTION_DESCRIPTIONS } from '@/constants/sidebar';
+import type { SidebarSection } from '@/constants/sidebar';
+
+interface SectionPlaceholderProps {
+    sectionId: SidebarSection;
+    variant: 'sidebar' | 'page';
+}
+
+export const SectionPlaceholder: React.FC<SectionPlaceholderProps> = ({ sectionId, variant }) => {
+    const config = SIDEBAR_SECTION_CONFIG_MAP[sectionId];
+    const Icon = config.icon;
+
+    if (variant === 'sidebar') {
+        return (
+            <div className="flex h-full flex-col items-center justify-center gap-3 px-6 text-center">
+                <div className="rounded-full bg-accent/40 p-3 text-muted-foreground">
+                    <Icon className="h-5 w-5" />
+                </div>
+                <h3 className="typography-ui-label font-semibold text-foreground">{config.label}</h3>
+                <p className="typography-meta max-w-xs text-muted-foreground">
+                    {SIDEBAR_SECTION_DESCRIPTIONS[sectionId]}
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex h-full flex-col items-center justify-center gap-4 px-6 text-center">
+            <div className="rounded-full bg-accent/40 p-4 text-muted-foreground">
+                <Icon className="h-8 w-8" />
+            </div>
+            <div className="flex flex-col gap-2">
+                <h2 className="typography-h2 font-semibold text-foreground">{config.label}</h2>
+                <p className="typography-body max-w-md text-muted-foreground">
+                    {SIDEBAR_SECTION_DESCRIPTIONS[sectionId]}
+                </p>
+            </div>
+            <p className="typography-meta text-muted-foreground/60">Coming soon...</p>
+        </div>
+    );
+};
diff --git a/packages/ui/src/components/sections/agents/AgentsPage.tsx b/packages/ui/src/components/sections/agents/AgentsPage.tsx
new file mode 100644
index 00000000..fc383b7d
--- /dev/null
+++ b/packages/ui/src/components/sections/agents/AgentsPage.tsx
@@ -0,0 +1,649 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { ButtonSmall } from '@/components/ui/button-small';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { toast } from 'sonner';
+import { useAgentsStore, type AgentConfig } from '@/stores/useAgentsStore';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { RiAddLine, RiAiAgentFill, RiAiAgentLine, RiInformationLine, RiRobot2Line, RiRobotLine, RiSaveLine, RiSubtractLine } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import { ModelSelector } from './ModelSelector';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { useAvailableTools } from '@/hooks/useAvailableTools';
+
+export const AgentsPage: React.FC = () => {
+    const { selectedAgentName, getAgentByName, createAgent, updateAgent, agents } = useAgentsStore();
+    useConfigStore();
+    const { tools: availableTools } = useAvailableTools();
+
+    const selectedAgent = selectedAgentName ? getAgentByName(selectedAgentName) : null;
+    const isNewAgent = selectedAgentName && !selectedAgent;
+
+    const [name, setName] = React.useState('');
+    const [description, setDescription] = React.useState('');
+    const [mode, setMode] = React.useState<'primary' | 'subagent' | 'all'>('subagent');
+    const [model, setModel] = React.useState('');
+    const [temperature, setTemperature] = React.useState<number | undefined>(undefined);
+    const [topP, setTopP] = React.useState<number | undefined>(undefined);
+    const [prompt, setPrompt] = React.useState('');
+    const [tools, setTools] = React.useState<Record<string, boolean>>({});
+    const [editPermission, setEditPermission] = React.useState<'allow' | 'ask' | 'deny' | 'full'>('allow');
+    const [webfetchPermission, setWebfetchPermission] = React.useState<'allow' | 'ask' | 'deny'>('allow');
+    const [bashPermission, setBashPermission] = React.useState<'allow' | 'ask' | 'deny'>('ask');
+    const [isSaving, setIsSaving] = React.useState(false);
+
+    React.useEffect(() => {
+        if (isNewAgent) {
+
+            setName(selectedAgentName || '');
+            setDescription('');
+            setMode('subagent');
+            setModel('');
+            setTemperature(undefined);
+            setTopP(undefined);
+            setPrompt('');
+            setTools({});
+            setEditPermission('allow');
+            setWebfetchPermission('allow');
+            setBashPermission('ask');
+        } else if (selectedAgent) {
+
+            setName(selectedAgent.name);
+            setDescription(selectedAgent.description || '');
+            setMode(selectedAgent.mode || 'subagent');
+
+            if (selectedAgent.model?.providerID && selectedAgent.model?.modelID) {
+                setModel(`${selectedAgent.model.providerID}/${selectedAgent.model.modelID}`);
+            } else {
+                setModel('');
+            }
+
+            setTemperature(selectedAgent.temperature);
+            setTopP(selectedAgent.topP);
+            setPrompt(selectedAgent.prompt || '');
+            setTools(selectedAgent.tools || {});
+
+            if (selectedAgent.permission) {
+                const editMode = selectedAgent.permission.edit;
+                if (editMode === 'allow' || editMode === 'ask' || editMode === 'deny' || editMode === 'full') {
+                    setEditPermission(editMode);
+                }
+                if (selectedAgent.permission.webfetch) {
+                    setWebfetchPermission(selectedAgent.permission.webfetch);
+                }
+                if (typeof selectedAgent.permission.bash === 'string') {
+                    setBashPermission(selectedAgent.permission.bash as 'allow' | 'ask' | 'deny');
+                }
+            }
+
+        }
+    }, [selectedAgent, isNewAgent, selectedAgentName, agents]);
+
+    const handleSave = async () => {
+
+        if (!name.trim()) {
+            toast.error('Agent name is required');
+            return;
+        }
+
+        setIsSaving(true);
+
+        try {
+            const trimmedModel = model.trim();
+            const config: AgentConfig = {
+                name: name.trim(),
+                description: description.trim() || undefined,
+                mode,
+                model: trimmedModel === '' ? null : trimmedModel,
+                temperature,
+                top_p: topP,
+                prompt: prompt.trim() || undefined,
+                tools: Object.keys(tools).length > 0 ? tools : undefined,
+                permission: {
+                    edit: editPermission,
+                    webfetch: webfetchPermission,
+                    bash: bashPermission,
+                },
+            };
+
+            let success: boolean;
+            if (isNewAgent) {
+                success = await createAgent(config);
+            } else {
+                success = await updateAgent(name, config);
+            }
+
+            if (success) {
+                toast.success(isNewAgent ? 'Agent created successfully' : 'Agent updated successfully');
+            } else {
+                toast.error(isNewAgent ? 'Failed to create agent' : 'Failed to update agent');
+            }
+        } catch (error) {
+            console.error('Error saving agent:', error);
+            toast.error('An error occurred while saving');
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const toggleTool = (tool: string) => {
+        setTools((prev) => ({
+            ...prev,
+            [tool]: !prev[tool],
+        }));
+    };
+
+    const toggleAllTools = (enabled: boolean) => {
+        const allTools: Record<string, boolean> = {};
+        availableTools.forEach((tool: string) => {
+            allTools[tool] = enabled;
+        });
+        setTools(allTools);
+    };
+
+    if (!selectedAgentName) {
+        return (
+            <div className="flex h-full items-center justify-center">
+                <div className="text-center text-muted-foreground">
+                    <RiRobot2Line className="mx-auto mb-3 h-12 w-12 opacity-50" />
+                    <p className="typography-body">Select an agent from the sidebar</p>
+                    <p className="typography-meta mt-1 opacity-75">or create a new one</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <ScrollableOverlay outerClassName="h-full" className="mx-auto max-w-3xl space-y-6 p-6">
+            {}
+            <div className="space-y-1">
+                <h1 className="typography-ui-header font-semibold text-lg">
+                    {isNewAgent ? 'New Agent' : name}
+                </h1>
+            </div>
+
+            {}
+            <div className="space-y-4">
+                <div className="space-y-1">
+                    <h2 className="typography-ui-header font-semibold text-foreground">Basic Information</h2>
+                    <p className="typography-meta text-muted-foreground/80">
+                        Configure agent identity and behavior mode
+                    </p>
+                </div>
+
+                <div className="space-y-2">
+                    <label className="typography-ui-label font-medium text-foreground">
+                        Agent Name
+                    </label>
+                    <Input
+                        value={name}
+                        onChange={(e) => setName(e.target.value)}
+                        placeholder="my-agent"
+                        disabled={!isNewAgent}
+                    />
+                </div>
+
+                <div className="space-y-2">
+                    <label className="typography-ui-label font-medium text-foreground">
+                        Description
+                    </label>
+                    <Textarea
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        placeholder="What does this agent do?"
+                        rows={3}
+                    />
+                </div>
+
+                <div className="space-y-2">
+                    <label className="typography-ui-label font-medium text-foreground">
+                        Mode
+                    </label>
+                    <div className="flex gap-1 w-fit">
+                        <ButtonSmall
+                            variant={mode === 'primary' ? 'default' : 'outline'}
+                            onClick={() => setMode('primary')}
+                            className={cn('gap-2', mode === 'primary' ? undefined : 'text-foreground')}
+                        >
+                            <RiAiAgentLine className="h-3 w-3" />
+                            Primary
+                        </ButtonSmall>
+                        <ButtonSmall
+                            variant={mode === 'subagent' ? 'default' : 'outline'}
+                            onClick={() => setMode('subagent')}
+                            className={cn('gap-2', mode === 'subagent' ? undefined : 'text-foreground')}
+                        >
+                            <RiRobotLine className="h-3 w-3" />
+                            Subagent
+                        </ButtonSmall>
+                        <ButtonSmall
+                            variant={mode === 'all' ? 'default' : 'outline'}
+                            onClick={() => setMode('all')}
+                            className={cn('gap-2', mode === 'all' ? undefined : 'text-foreground')}
+                        >
+                            <RiAiAgentFill className="h-3 w-3" />
+                            All
+                        </ButtonSmall>
+                    </div>
+                    <p className="typography-meta text-muted-foreground">
+                        Primary: main agent, Subagent: helper agent, All: both modes
+                    </p>
+                </div>
+            </div>
+
+            {}
+            <div className="space-y-4">
+                <div className="space-y-1">
+                    <h2 className="typography-h2 font-semibold text-foreground">Model Configuration</h2>
+                    <p className="typography-meta text-muted-foreground/80">
+                        Configure model and generation parameters
+                    </p>
+                </div>
+
+                <div className="space-y-2">
+                    <label className="typography-ui-label font-medium text-foreground">
+                        Model
+                    </label>
+                    <ModelSelector
+                        providerId={model ? model.split('/')[0] : ''}
+                        modelId={model ? model.split('/')[1] : ''}
+                        onChange={(providerId: string, modelId: string) => {
+                            if (providerId && modelId) {
+                                setModel(`${providerId}/${modelId}`);
+                            } else {
+                                setModel('');
+                            }
+                        }}
+                    />
+                </div>
+
+                <div className="flex gap-4">
+                    <div className="space-y-2">
+                        <label className="typography-ui-label font-medium text-foreground flex items-center gap-2">
+                            Temperature
+                            <Tooltip delayDuration={1000}>
+                                <TooltipTrigger asChild>
+                                    <RiInformationLine className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
+                                </TooltipTrigger>
+                                <TooltipContent sideOffset={8} className="max-w-xs">
+                                    Controls randomness in responses.<br />
+                                    Higher values make output more creative and unpredictable,<br />
+                                    lower values make it more focused and deterministic.
+                                </TooltipContent>
+                            </Tooltip>
+                        </label>
+                        <div className="relative w-32">
+                            <button
+                                type="button"
+                                onClick={() => {
+                                    const current = temperature !== undefined ? temperature : 0.7;
+                                    const newValue = Math.max(0, current - 0.1);
+                                    setTemperature(parseFloat(newValue.toFixed(1)));
+                                }}
+                                className="absolute left-2 top-1/2 -translate-y-1/2 flex items-center justify-center h-6 w-6 rounded hover:bg-accent text-muted-foreground hover:text-foreground"
+                            >
+                                <RiSubtractLine className="h-3.5 w-3.5" />
+                            </button>
+                            <Input
+                                type="text"
+                                inputMode="decimal"
+                                value={temperature !== undefined ? temperature : ''}
+                                onChange={(e) => {
+                                    const value = e.target.value;
+                                    if (value === '') {
+                                        setTemperature(undefined);
+                                        return;
+                                    }
+                                    const parsed = parseFloat(value);
+                                    if (!isNaN(parsed) && parsed >= 0 && parsed <= 2) {
+                                        setTemperature(parsed);
+                                    }
+                                }}
+                                onBlur={(e) => {
+                                    const value = e.target.value;
+                                    if (value !== '') {
+                                        const parsed = parseFloat(value);
+                                        if (!isNaN(parsed)) {
+                                            const clamped = Math.max(0, Math.min(2, parsed));
+                                            setTemperature(parseFloat(clamped.toFixed(1)));
+                                        }
+                                    }
+                                }}
+                                placeholder="—"
+                                className="text-center px-10 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                            />
+                            <button
+                                type="button"
+                                onClick={() => {
+                                    const current = temperature !== undefined ? temperature : 0.7;
+                                    const newValue = Math.min(2, current + 0.1);
+                                    setTemperature(parseFloat(newValue.toFixed(1)));
+                                }}
+                                className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center h-6 w-6 rounded hover:bg-accent text-muted-foreground hover:text-foreground"
+                            >
+                                <RiAddLine className="h-3.5 w-3.5" />
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="space-y-2">
+                        <label className="typography-ui-label font-medium text-foreground flex items-center gap-2">
+                            Top P
+                            <Tooltip delayDuration={1000}>
+                                <TooltipTrigger asChild>
+                                    <RiInformationLine className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
+                                </TooltipTrigger>
+                                <TooltipContent sideOffset={8} className="max-w-xs">
+                                    Controls diversity via nucleus sampling.<br />
+                                    Lower values focus on most likely tokens,<br />
+                                    higher values consider more possibilities.
+                                </TooltipContent>
+                            </Tooltip>
+                        </label>
+                        <div className="relative w-32">
+                            <button
+                                type="button"
+                                onClick={() => {
+                                    const current = topP !== undefined ? topP : 0.9;
+                                    const newValue = Math.max(0, current - 0.1);
+                                    setTopP(parseFloat(newValue.toFixed(1)));
+                                }}
+                                className="absolute left-2 top-1/2 -translate-y-1/2 flex items-center justify-center h-6 w-6 rounded hover:bg-accent text-muted-foreground hover:text-foreground"
+                            >
+                                <RiSubtractLine className="h-3.5 w-3.5" />
+                            </button>
+                            <Input
+                                type="text"
+                                inputMode="decimal"
+                                value={topP !== undefined ? topP : ''}
+                                onChange={(e) => {
+                                    const value = e.target.value;
+                                    if (value === '') {
+                                        setTopP(undefined);
+                                        return;
+                                    }
+                                    const parsed = parseFloat(value);
+                                    if (!isNaN(parsed) && parsed >= 0 && parsed <= 1) {
+                                        setTopP(parsed);
+                                    }
+                                }}
+                                onBlur={(e) => {
+                                    const value = e.target.value;
+                                    if (value !== '') {
+                                        const parsed = parseFloat(value);
+                                        if (!isNaN(parsed)) {
+                                            const clamped = Math.max(0, Math.min(1, parsed));
+                                            setTopP(parseFloat(clamped.toFixed(1)));
+                                        }
+                                    }
+                                }}
+                                placeholder="—"
+                                className="text-center px-10 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                            />
+                            <button
+                                type="button"
+                                onClick={() => {
+                                    const current = topP !== undefined ? topP : 0.9;
+                                    const newValue = Math.min(1, current + 0.1);
+                                    setTopP(parseFloat(newValue.toFixed(1)));
+                                }}
+                                className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center h-6 w-6 rounded hover:bg-accent text-muted-foreground hover:text-foreground"
+                            >
+                                <RiAddLine className="h-3.5 w-3.5" />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {}
+            <div className="space-y-4">
+                <div className="space-y-1">
+                    <h2 className="typography-h2 font-semibold text-foreground">System Prompt</h2>
+                    <p className="typography-meta text-muted-foreground/80">
+                        Override the default system prompt for this agent
+                    </p>
+                </div>
+                <Textarea
+                    value={prompt}
+                    onChange={(e) => setPrompt(e.target.value)}
+                    placeholder="Custom system prompt for this agent..."
+                    rows={8}
+                    className="font-mono typography-meta"
+                />
+            </div>
+
+            {}
+            <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                    <div className="space-y-1">
+                        <h2 className="typography-h2 font-semibold text-foreground">Available Tools</h2>
+                        <p className="typography-meta text-muted-foreground/80">
+                            Select tools this agent can access
+                        </p>
+                    </div>
+                    <div className="flex gap-1 w-fit">
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => toggleAllTools(true)}
+                            className="h-6 px-2 text-xs"
+                        >
+                            Enable All
+                        </Button>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => toggleAllTools(false)}
+                            className="h-6 px-2 text-xs"
+                        >
+                            Disable All
+                        </Button>
+                    </div>
+                </div>
+
+                <div className="flex flex-wrap gap-2">
+                    {availableTools.map((tool) => (
+                        <button
+                            key={tool}
+                            type="button"
+                            onClick={() => toggleTool(tool)}
+                            className={cn(
+                                "h-6 px-2 rounded-lg border text-[13px] cursor-pointer transition-colors",
+                                tools[tool]
+                                    ? "bg-primary border-primary text-primary-foreground"
+                                    : "border-border/40 bg-sidebar/30 text-foreground hover:bg-sidebar/50"
+                            )}
+                        >
+                            {tool}
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            {}
+            <div className="space-y-4">
+                <div className="space-y-1">
+                    <h2 className="typography-h2 font-semibold text-foreground">Permissions</h2>
+                    <p className="typography-meta text-muted-foreground/80">
+                        Configure permission levels for different operations
+                    </p>
+                </div>
+
+                <div className="space-y-4">
+                    <div className="space-y-2">
+                        <label className="typography-ui-label font-medium text-foreground">
+                            Edit Permission
+                        </label>
+                        <div className="flex gap-1 w-fit">
+                            <Button
+                                size="sm"
+                                variant={editPermission === 'full' ? 'default' : 'outline'}
+                                onClick={() => setEditPermission('full')}
+                                className="h-6 px-2 text-xs"
+                            >
+                                Full
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant={editPermission === 'allow' ? 'default' : 'outline'}
+                                onClick={() => setEditPermission('allow')}
+                                className="h-6 px-2 text-xs"
+                            >
+                                Allow
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant={editPermission === 'ask' ? 'default' : 'outline'}
+                                onClick={() => setEditPermission('ask')}
+                                className="h-6 px-2 text-xs"
+                            >
+                                Ask
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant={editPermission === 'deny' ? 'default' : 'outline'}
+                                onClick={() => setEditPermission('deny')}
+                                className="h-6 px-2 text-xs"
+                            >
+                                Deny
+                            </Button>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <p className="typography-meta text-muted-foreground">
+                                Controls file editing permissions.
+                            </p>
+                            <Tooltip delayDuration={1000}>
+                                <TooltipTrigger asChild>
+                                    <RiInformationLine className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
+                                </TooltipTrigger>
+                                <TooltipContent sideOffset={8} className="max-w-xs">
+                                    <div className="space-y-1">
+                                        <p><strong>Full:</strong> Auto-approves all tool requests</p>
+                                        <p><strong>Allow:</strong> Allows file editing with standard checks</p>
+                                        <p><strong>Ask:</strong> Prompts for confirmation before editing</p>
+                                        <p><strong>Deny:</strong> Blocks all file editing operations</p>
+                                    </div>
+                                </TooltipContent>
+                            </Tooltip>
+                        </div>
+                    </div>
+
+                    <div className="space-y-2">
+                        <label className="typography-ui-label font-medium text-foreground">
+                            Bash Permission
+                        </label>
+                        <div className="flex gap-1 w-fit">
+                            <Button
+                                size="sm"
+                                variant={bashPermission === 'allow' ? 'default' : 'outline'}
+                                onClick={() => setBashPermission('allow')}
+                                className="h-6 px-2 text-xs"
+                            >
+                                Allow
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant={bashPermission === 'ask' ? 'default' : 'outline'}
+                                onClick={() => setBashPermission('ask')}
+                                className="h-6 px-2 text-xs"
+                            >
+                                Ask
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant={bashPermission === 'deny' ? 'default' : 'outline'}
+                                onClick={() => setBashPermission('deny')}
+                                className="h-6 px-2 text-xs"
+                            >
+                                Deny
+                            </Button>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <p className="typography-meta text-muted-foreground">
+                                Permission for running bash commands
+                            </p>
+                            <Tooltip delayDuration={1000}>
+                                <TooltipTrigger asChild>
+                                    <RiInformationLine className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
+                                </TooltipTrigger>
+                                <TooltipContent sideOffset={8} className="max-w-xs">
+                                    <div className="space-y-1">
+                                        <p><strong>Allow:</strong> Run bash commands without confirmation</p>
+                                        <p><strong>Ask:</strong> Prompt for confirmation before execution</p>
+                                        <p><strong>Deny:</strong> Block all bash command execution</p>
+                                    </div>
+                                </TooltipContent>
+                            </Tooltip>
+                        </div>
+                    </div>
+
+                    <div className="space-y-2">
+                        <label className="typography-ui-label font-medium text-foreground">
+                            WebFetch Permission
+                        </label>
+                        <div className="flex gap-1 w-fit">
+                            <Button
+                                size="sm"
+                                variant={webfetchPermission === 'allow' ? 'default' : 'outline'}
+                                onClick={() => setWebfetchPermission('allow')}
+                                className="h-6 px-2 text-xs"
+                            >
+                                Allow
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant={webfetchPermission === 'ask' ? 'default' : 'outline'}
+                                onClick={() => setWebfetchPermission('ask')}
+                                className="h-6 px-2 text-xs"
+                            >
+                                Ask
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant={webfetchPermission === 'deny' ? 'default' : 'outline'}
+                                onClick={() => setWebfetchPermission('deny')}
+                                className="h-6 px-2 text-xs"
+                            >
+                                Deny
+                            </Button>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <p className="typography-meta text-muted-foreground">
+                                Permission for fetching web content
+                            </p>
+                            <Tooltip delayDuration={1000}>
+                                <TooltipTrigger asChild>
+                                    <RiInformationLine className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
+                                </TooltipTrigger>
+                                <TooltipContent sideOffset={8} className="max-w-xs">
+                                    <div className="space-y-1">
+                                        <p><strong>Allow:</strong> Fetch web content without confirmation</p>
+                                        <p><strong>Ask:</strong> Prompt for confirmation before fetching</p>
+                                        <p><strong>Deny:</strong> Block all web content access</p>
+                                    </div>
+                                </TooltipContent>
+                            </Tooltip>
+                        </div>
+                    </div>
+                </div>
+
+                {}
+                <div className="flex justify-end border-t border-border/40 pt-4">
+                    <Button
+                        size="sm"
+                        variant="default"
+                        onClick={handleSave}
+                        disabled={isSaving}
+                        className="gap-2 h-6 px-2 text-xs w-fit"
+                    >
+                        <RiSaveLine className="h-3 w-3" />
+                        {isSaving ? 'Saving...' : 'Save Changes'}
+                    </Button>
+                </div>
+            </div>
+        </ScrollableOverlay>
+    );
+};
diff --git a/packages/ui/src/components/sections/agents/AgentsSidebar.tsx b/packages/ui/src/components/sections/agents/AgentsSidebar.tsx
new file mode 100644
index 00000000..f52b8317
--- /dev/null
+++ b/packages/ui/src/components/sections/agents/AgentsSidebar.tsx
@@ -0,0 +1,318 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { ButtonLarge } from '@/components/ui/button-large';
+import { Input } from '@/components/ui/input';
+import { toast } from 'sonner';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { RiAddLine, RiAiAgentFill, RiAiAgentLine, RiDeleteBinLine, RiFileCopyLine, RiMore2Line, RiRobot2Line, RiRobotLine } from '@remixicon/react';
+import { useAgentsStore } from '@/stores/useAgentsStore';
+import { useUIStore } from '@/stores/useUIStore';
+import { useDeviceInfo } from '@/lib/device';
+import { cn } from '@/lib/utils';
+import type { Agent } from '@opencode-ai/sdk';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+
+export const AgentsSidebar: React.FC = () => {
+    const [newAgentName, setNewAgentName] = React.useState('');
+    const [isCreateDialogOpen, setIsCreateDialogOpen] = React.useState(false);
+
+    const {
+        selectedAgentName,
+        agents,
+        setSelectedAgent,
+        deleteAgent,
+        loadAgents,
+    } = useAgentsStore();
+
+    const { setSidebarOpen } = useUIStore();
+    const { isMobile } = useDeviceInfo();
+
+    React.useEffect(() => {
+        loadAgents();
+    }, [loadAgents]);
+
+    const handleCreateAgent = () => {
+        if (!newAgentName.trim()) {
+            toast.error('Agent name is required');
+            return;
+        }
+
+        if (agents.some((agent) => agent.name === newAgentName)) {
+            toast.error('An agent with this name already exists');
+            return;
+        }
+
+        setSelectedAgent(newAgentName);
+        setNewAgentName('');
+        setIsCreateDialogOpen(false);
+
+        if (isMobile) {
+            setSidebarOpen(false);
+        }
+    };
+
+    const handleDeleteAgent = async (agent: Agent) => {
+        if (agent.builtIn) {
+            toast.error('Built-in agents cannot be deleted');
+            return;
+        }
+
+        if (window.confirm(`Are you sure you want to delete agent "${agent.name}"?`)) {
+            const success = await deleteAgent(agent.name);
+            if (success) {
+                toast.success(`Agent "${agent.name}" deleted successfully`);
+            } else {
+                toast.error('Failed to delete agent');
+            }
+        }
+    };
+
+    const handleDuplicateAgent = (agent: Agent) => {
+        const baseName = agent.name;
+        let copyNumber = 1;
+        let newName = `${baseName} Copy`;
+
+        while (agents.some((a) => a.name === newName)) {
+            copyNumber++;
+            newName = `${baseName} Copy ${copyNumber}`;
+        }
+
+        setSelectedAgent(newName);
+        setIsCreateDialogOpen(false);
+
+        if (isMobile) {
+            setSidebarOpen(false);
+        }
+    };
+
+    const getAgentModeIcon = (mode?: string) => {
+        switch (mode) {
+            case 'primary':
+                return <RiAiAgentLine className="h-3 w-3 text-primary" />;
+            case 'all':
+                return <RiAiAgentFill className="h-3 w-3 text-primary" />;
+            case 'subagent':
+                return <RiRobotLine className="h-3 w-3 text-primary" />;
+            default:
+                return null;
+        }
+    };
+
+    const builtInAgents = agents.filter((agent) => agent.builtIn);
+    const customAgents = agents.filter((agent) => !agent.builtIn);
+
+    return (
+        <div className="flex h-full flex-col bg-sidebar">
+            <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+                <div className={cn('border-b border-border/40 px-3 dark:border-white/10', isMobile ? 'mt-2 py-3' : 'py-3')}>
+                    <div className="flex items-center justify-between gap-2">
+                        <h2 className="typography-ui-label font-semibold text-foreground">Agents</h2>
+                        <div className="flex items-center gap-1">
+                            <span className="typography-meta text-muted-foreground">{agents.length}</span>
+                            <DialogTrigger asChild>
+                                <Button type="button" variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground">
+                                    <RiAddLine className="size-4" />
+                                </Button>
+                            </DialogTrigger>
+                        </div>
+                    </div>
+                </div>
+
+                <ScrollableOverlay outerClassName="flex-1 min-h-0" className="space-y-1 px-3 py-2 overflow-x-hidden">
+                    {agents.length === 0 ? (
+                        <div className="py-12 px-4 text-center text-muted-foreground">
+                            <RiRobot2Line className="mx-auto mb-3 h-10 w-10 opacity-50" />
+                            <p className="typography-ui-label font-medium">No agents configured</p>
+                            <p className="typography-meta mt-1 opacity-75">Use the + button above to create one</p>
+                        </div>
+                    ) : (
+                        <>
+                            {builtInAgents.length > 0 && (
+                                <>
+                                    <div className="px-2 pb-1.5 pt-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                                        Built-in Agents
+                                    </div>
+                                    {builtInAgents.map((agent) => (
+                                        <AgentListItem
+                                            key={agent.name}
+                                            agent={agent}
+                                            isSelected={selectedAgentName === agent.name}
+                                            onSelect={() => {
+                                                setSelectedAgent(agent.name);
+                                                if (isMobile) {
+                                                    setSidebarOpen(false);
+                                                }
+                                            }}
+                                            onDuplicate={() => handleDuplicateAgent(agent)}
+                                            getAgentModeIcon={getAgentModeIcon}
+                                        />
+                                    ))}
+                                </>
+                            )}
+
+                            {customAgents.length > 0 && (
+                                <>
+                                    <div className="px-2 pb-1.5 pt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                                        Custom Agents
+                                    </div>
+                                    {customAgents.map((agent) => (
+                                        <AgentListItem
+                                            key={agent.name}
+                                            agent={agent}
+                                            isSelected={selectedAgentName === agent.name}
+                                            onSelect={() => {
+                                                setSelectedAgent(agent.name);
+                                                if (isMobile) {
+                                                    setSidebarOpen(false);
+                                                }
+                                            }}
+                                            onDelete={() => handleDeleteAgent(agent)}
+                                            onDuplicate={() => handleDuplicateAgent(agent)}
+                                            getAgentModeIcon={getAgentModeIcon}
+                                        />
+                                    ))}
+                                </>
+                            )}
+                        </>
+                    )}
+                </ScrollableOverlay>
+
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>Create New Agent</DialogTitle>
+                        <DialogDescription>
+                            Enter a unique name for your new agent
+                        </DialogDescription>
+                    </DialogHeader>
+                    <Input
+                        value={newAgentName}
+                        onChange={(e) => setNewAgentName(e.target.value)}
+                        placeholder="Agent name..."
+                        className="text-foreground placeholder:text-muted-foreground"
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                                handleCreateAgent();
+                            }
+                        }}
+                    />
+                    <DialogFooter>
+                        <Button
+                            variant="ghost"
+                            onClick={() => setIsCreateDialogOpen(false)}
+                            className="text-foreground hover:bg-muted hover:text-foreground"
+                        >
+                            Cancel
+                        </Button>
+                        <ButtonLarge onClick={handleCreateAgent}>
+                            Create
+                        </ButtonLarge>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+};
+
+interface AgentListItemProps {
+    agent: Agent;
+    isSelected: boolean;
+    onSelect: () => void;
+    onDelete?: () => void;
+    onDuplicate: () => void;
+    getAgentModeIcon: (mode?: string) => React.ReactNode;
+}
+
+const AgentListItem: React.FC<AgentListItemProps> = ({
+    agent,
+    isSelected,
+    onSelect,
+    onDelete,
+    onDuplicate,
+    getAgentModeIcon,
+}) => {
+    return (
+        <div className="group transition-all duration-200">
+            <div className="relative">
+                <div className="w-full flex items-center justify-between py-1.5 px-2 pr-1">
+                    <button
+                        onClick={onSelect}
+                        className="flex-1 text-left overflow-hidden"
+                        inputMode="none"
+                        tabIndex={0}
+                    >
+                        <div className="flex items-center gap-1.5">
+                            <div className={cn(
+                                "typography-ui-label font-medium truncate",
+                                isSelected
+                                    ? "text-primary"
+                                    : "text-foreground hover:text-primary/80"
+                            )}>
+                                {agent.name}
+                            </div>
+
+                            {}
+                            {getAgentModeIcon(agent.mode)}
+                        </div>
+
+                        {}
+                        {agent.description && (
+                            <div className="typography-meta text-muted-foreground truncate mt-0.5">
+                                {agent.description}
+                            </div>
+                        )}
+                    </button>
+
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button
+                                size="icon"
+                                variant="ghost"
+                                className="h-6 w-6 flex-shrink-0 -mr-1 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100"
+                            >
+                                <RiMore2Line className="h-3.5 w-3.5" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" className="w-fit min-w-20">
+                            <DropdownMenuItem
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    onDuplicate();
+                                }}
+                            >
+                                <RiFileCopyLine className="h-4 w-4 mr-px" />
+                                Duplicate
+                            </DropdownMenuItem>
+
+                            {!agent.builtIn && onDelete && (
+                                <DropdownMenuItem
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        onDelete();
+                                    }}
+                                    className="text-destructive focus:text-destructive"
+                                >
+                                    <RiDeleteBinLine className="h-4 w-4 mr-px" />
+                                    Delete
+                                </DropdownMenuItem>
+                            )}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/packages/ui/src/components/sections/agents/ModelSelector.tsx b/packages/ui/src/components/sections/agents/ModelSelector.tsx
new file mode 100644
index 00000000..a6ba8f02
--- /dev/null
+++ b/packages/ui/src/components/sections/agents/ModelSelector.tsx
@@ -0,0 +1,300 @@
+import React from 'react';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { useUIStore } from '@/stores/useUIStore';
+import { useDeviceInfo } from '@/lib/device';
+import { RiArrowDownSLine, RiArrowRightSLine, RiPencilAiLine } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
+import { ProviderLogo } from '@/components/ui/ProviderLogo';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+
+type ProviderModel = Record<string, unknown> & { id?: string; name?: string };
+
+interface ModelSelectorProps {
+    providerId: string;
+    modelId: string;
+    onChange: (providerId: string, modelId: string) => void;
+    className?: string;
+}
+
+export const ModelSelector: React.FC<ModelSelectorProps> = ({
+    providerId,
+    modelId,
+    onChange,
+    className
+}) => {
+    const { providers, modelsMetadata } = useConfigStore();
+    const isMobile = useUIStore(state => state.isMobile);
+    const { isMobile: deviceIsMobile } = useDeviceInfo();
+    const isActuallyMobile = isMobile || deviceIsMobile;
+
+    const [isMobilePanelOpen, setIsMobilePanelOpen] = React.useState(false);
+    const [expandedMobileProviders, setExpandedMobileProviders] = React.useState<Set<string>>(new Set());
+
+    const closeMobilePanel = () => setIsMobilePanelOpen(false);
+    const toggleMobileProviderExpansion = (providerId: string) => {
+        setExpandedMobileProviders(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(providerId)) {
+                newSet.delete(providerId);
+            } else {
+                newSet.add(providerId);
+            }
+            return newSet;
+        });
+    };
+
+    const getModelDisplayName = (model: Record<string, unknown>) => {
+        const name = model?.name || model?.id || '';
+        const nameStr = String(name);
+        if (nameStr.length > 40) {
+            return nameStr.substring(0, 37) + '...';
+        }
+        return nameStr;
+    };
+
+    const getModelMetadata = (providerId: string, modelId: string) => {
+        const key = `${providerId}/${modelId}`;
+        return modelsMetadata.get(key);
+    };
+
+    const handleProviderAndModelChange = (newProviderId: string, newModelId: string) => {
+        onChange(newProviderId, newModelId);
+    };
+
+    const renderMobileModelPanel = () => {
+        if (!isActuallyMobile) return null;
+
+        return (
+            <MobileOverlayPanel
+                open={isMobilePanelOpen}
+                onClose={closeMobilePanel}
+                title="Select Model"
+            >
+                <div className="space-y-1">
+                    {providers.map((provider) => {
+                        const providerModels = Array.isArray(provider.models) ? provider.models : [];
+                        if (providerModels.length === 0) return null;
+
+                        const isActiveProvider = provider.id === providerId;
+                        const isExpanded = expandedMobileProviders.has(provider.id);
+
+                        return (
+                            <div key={provider.id} className="rounded-xl border border-border/40 bg-background/95">
+                                <button
+                                    type="button"
+                                    className="flex w-full items-center justify-between gap-1.5 px-2 py-1.5 text-left"
+                                    onClick={() => toggleMobileProviderExpansion(provider.id)}
+                                >
+                                    <div className="flex items-center gap-2">
+                                        <ProviderLogo
+                                            providerId={provider.id}
+                                            className="h-3.5 w-3.5"
+                                        />
+                                        <span className="typography-meta font-medium text-foreground">
+                                            {provider.name}
+                                        </span>
+                                        {isActiveProvider && (
+                                            <span className="typography-micro text-primary/80">Current</span>
+                                        )}
+                                    </div>
+                                    {isExpanded ? (
+                                        <RiArrowDownSLine className="h-3 w-3 text-muted-foreground" />
+                                    ) : (
+                                        <RiArrowRightSLine className="h-3 w-3 text-muted-foreground" />
+                                    )}
+                                </button>
+
+                                {isExpanded && (
+                                    <div className="border-t border-border/20">
+                                        {providerModels.map((modelItem: ProviderModel) => {
+                                            const isSelectedModel = provider.id === providerId && modelItem.id === modelId;
+                                            const metadata = getModelMetadata(provider.id as string, modelItem.id as string);
+
+                                            return (
+                                                <button
+                                                    key={modelItem.id as string}
+                                                    type="button"
+                                                    className={cn(
+                                                        'flex w-full items-center justify-between px-2 py-1.5 text-left',
+                                                        'typography-meta',
+                                                        isSelectedModel ? 'bg-primary/10 text-primary' : 'text-foreground'
+                                                    )}
+                                                    onClick={() => {
+                                                        handleProviderAndModelChange(provider.id as string, modelItem.id as string);
+                                                        closeMobilePanel();
+                                                    }}
+                                                >
+                                                    <div className="flex flex-col">
+                                                        <span className="font-medium">{getModelDisplayName(modelItem)}</span>
+                                                        {typeof (metadata as unknown as Record<string, unknown>)?.description === 'string' && (
+                                                            <span className="typography-micro text-muted-foreground">
+                                                                {(metadata as unknown as Record<string, unknown>).description as React.ReactNode}
+                                                            </span>
+                                                        )}
+                                                    </div>
+                                                    {isSelectedModel && (
+                                                        <div className="h-2 w-2 rounded-full bg-primary" />
+                                                    )}
+                                                </button>
+                                            );
+                                        })}
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })}
+
+                    <button
+                        type="button"
+                        className="flex w-full items-center justify-between rounded-lg border border-border/40 bg-background/95 px-2 py-1.5 text-left"
+                        onClick={() => {
+                            handleProviderAndModelChange('', '');
+                            closeMobilePanel();
+                        }}
+                    >
+                        <span className="typography-meta text-muted-foreground">No model (optional)</span>
+                    </button>
+                </div>
+            </MobileOverlayPanel>
+        );
+    };
+
+    return (
+        <>
+            {isActuallyMobile ? (
+                <button
+                    type="button"
+                    onClick={() => setIsMobilePanelOpen(true)}
+                    className={cn(
+                        'flex w-full items-center justify-between gap-2 rounded-lg border border-border/40 bg-background/95 px-2 py-1.5 text-left',
+                        className
+                    )}
+                >
+                    <div className="flex items-center gap-2">
+                        {providerId ? (
+                            <ProviderLogo
+                                providerId={providerId}
+                                className="h-3.5 w-3.5"
+                            />
+                        ) : (
+                            <RiPencilAiLine className="h-3 w-3 text-muted-foreground" />
+                        )}
+                        <span className="typography-meta font-medium text-foreground">
+                            {providerId && modelId ? `${providerId}/${modelId}` : 'Select model...'}
+                        </span>
+                    </div>
+                    <RiArrowDownSLine className="h-3 w-3 text-muted-foreground" />
+                </button>
+            ) : (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <div className={cn(
+                            'flex items-center gap-2 px-2 rounded-lg bg-accent/20 border border-border/20 cursor-pointer hover:bg-accent/30 h-6 w-fit',
+                            className
+                        )}>
+                            {providerId ? (
+                                <>
+                                    <ProviderLogo
+                                        providerId={providerId}
+                                        className="h-3 w-3 flex-shrink-0"
+                                    />
+                                    <RiPencilAiLine className="h-3 w-3 text-primary/60 hidden" />
+                                </>
+                            ) : (
+                                <RiPencilAiLine className="h-3 w-3 text-muted-foreground" />
+                            )}
+                            <span className="typography-micro font-medium whitespace-nowrap">
+                                {providerId && modelId ? `${providerId}/${modelId}` : 'Not selected'}
+                            </span>
+                            <RiArrowDownSLine className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
+                        </div>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent className="max-w-[300px]">
+                        {providers.map((provider) => {
+                            const providerModels = Array.isArray(provider.models) ? provider.models : [];
+
+                            if (providerModels.length === 0) {
+                                return (
+                                    <DropdownMenuItem
+                                        key={provider.id}
+                                        disabled
+                                        className="typography-meta text-muted-foreground"
+                                    >
+                                        <ProviderLogo
+                                            providerId={provider.id}
+                                            className="h-3 w-3 flex-shrink-0 mr-2"
+                                        />
+                                        {provider.name} (No models)
+                                    </DropdownMenuItem>
+                                );
+                            }
+
+                            return (
+                                <DropdownMenuSub key={provider.id}>
+                                    <DropdownMenuSubTrigger className="typography-meta">
+                                        <ProviderLogo
+                                            providerId={provider.id}
+                                            className="h-3 w-3 flex-shrink-0 mr-2"
+                                        />
+                                        {provider.name}
+                                    </DropdownMenuSubTrigger>
+                                    <DropdownMenuSubContent
+                                        className="max-h-[320px] min-w-[200px]"
+                                        sideOffset={2}
+                                        collisionPadding={8}
+                                        avoidCollisions={true}
+                                    >
+                                        <ScrollableOverlay
+                                            outerClassName="max-h-[320px] min-w-[200px]"
+                                            className="space-y-1 p-1"
+                                        >
+                                            {providerModels.map((modelItem: ProviderModel) => {
+                                                    const metadata = getModelMetadata(provider.id as string, modelItem.id as string);
+
+                                            return (
+                                                <DropdownMenuItem
+                                                    key={modelItem.id as string}
+                                                    className="typography-meta"
+                                                    onSelect={() => {
+                                                        handleProviderAndModelChange(provider.id as string, modelItem.id as string);
+                                                    }}
+                                                >
+                                                    <div className="flex flex-col">
+                                                        <span className="font-medium">{getModelDisplayName(modelItem)}</span>
+                                                        {typeof (metadata as unknown as Record<string, unknown>)?.description === 'string' && (
+                                                            <span className="typography-meta text-muted-foreground">
+                                                                {(metadata as unknown as Record<string, unknown>).description as React.ReactNode}
+                                                            </span>
+                                                        )}
+                                                    </div>
+                                                </DropdownMenuItem>
+                                            );
+                                        })}
+                                        </ScrollableOverlay>
+                                    </DropdownMenuSubContent>
+                                </DropdownMenuSub>
+                            );
+                        })}
+                        <DropdownMenuItem
+                            className="typography-meta"
+                            onSelect={() => handleProviderAndModelChange('', '')}
+                        >
+                            <span className="text-muted-foreground">No model (optional)</span>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            )}
+            {renderMobileModelPanel()}
+        </>
+    );
+};
diff --git a/packages/ui/src/components/sections/commands/AgentSelector.tsx b/packages/ui/src/components/sections/commands/AgentSelector.tsx
new file mode 100644
index 00000000..238d4b7c
--- /dev/null
+++ b/packages/ui/src/components/sections/commands/AgentSelector.tsx
@@ -0,0 +1,154 @@
+import React from 'react';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useAgentsStore } from '@/stores/useAgentsStore';
+import { useUIStore } from '@/stores/useUIStore';
+import { useDeviceInfo } from '@/lib/device';
+import { RiArrowDownSLine, RiRobot2Line } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
+
+interface AgentSelectorProps {
+    agentName: string;
+    onChange: (agentName: string) => void;
+    className?: string;
+}
+
+export const AgentSelector: React.FC<AgentSelectorProps> = ({
+    agentName,
+    onChange,
+    className
+}) => {
+    const { agents, loadAgents } = useAgentsStore();
+    const isMobile = useUIStore(state => state.isMobile);
+    const { isMobile: deviceIsMobile } = useDeviceInfo();
+    const isActuallyMobile = isMobile || deviceIsMobile;
+
+    const [isMobilePanelOpen, setIsMobilePanelOpen] = React.useState(false);
+
+    React.useEffect(() => {
+        loadAgents();
+    }, [loadAgents]);
+
+    const closeMobilePanel = () => setIsMobilePanelOpen(false);
+
+    const handleAgentChange = (newAgentName: string) => {
+        onChange(newAgentName);
+    };
+
+    const renderMobileAgentPanel = () => {
+        if (!isActuallyMobile) return null;
+
+        return (
+            <MobileOverlayPanel
+                open={isMobilePanelOpen}
+                onClose={closeMobilePanel}
+                title="Select Agent"
+            >
+                <div className="space-y-1">
+                    {agents.map((agent) => {
+                        const isSelected = agent.name === agentName;
+
+                        return (
+                            <button
+                                key={agent.name}
+                                type="button"
+                                className={cn(
+                                    'flex w-full items-center justify-between rounded-lg border border-border/40 bg-background/95 px-2 py-1.5 text-left',
+                                    isSelected ? 'bg-primary/10 text-primary' : 'text-foreground'
+                                )}
+                                onClick={() => {
+                                    handleAgentChange(agent.name);
+                                    closeMobilePanel();
+                                }}
+                            >
+                                <div className="flex flex-col">
+                                    <span className="typography-meta font-medium">{agent.name}</span>
+                                    {agent.description && (
+                                        <span className="typography-micro text-muted-foreground">
+                                            {agent.description}
+                                        </span>
+                                    )}
+                                </div>
+                                {isSelected && (
+                                    <div className="h-2 w-2 rounded-full bg-primary" />
+                                )}
+                            </button>
+                        );
+                    })}
+
+                    <button
+                        type="button"
+                        className="flex w-full items-center justify-between rounded-lg border border-border/40 bg-background/95 px-2 py-1.5 text-left"
+                        onClick={() => {
+                            handleAgentChange('');
+                            closeMobilePanel();
+                        }}
+                    >
+                        <span className="typography-meta text-muted-foreground">No agent (optional)</span>
+                    </button>
+                </div>
+            </MobileOverlayPanel>
+        );
+    };
+
+    return (
+        <>
+            {isActuallyMobile ? (
+                <button
+                    type="button"
+                    onClick={() => setIsMobilePanelOpen(true)}
+                    className={cn(
+                        'flex w-full items-center justify-between gap-2 rounded-lg border border-border/40 bg-background/95 px-2 py-1.5 text-left',
+                        className
+                    )}
+                >
+                    <div className="flex items-center gap-2">
+                        <RiRobot2Line className="h-3.5 w-3.5 text-muted-foreground" />
+                        <span className="typography-meta font-medium text-foreground">
+                            {agentName || 'Select agent...'}
+                        </span>
+                    </div>
+                    <RiArrowDownSLine className="h-3 w-3 text-muted-foreground" />
+                </button>
+            ) : (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <div className={cn(
+                            'flex items-center gap-2 px-2 rounded-lg bg-accent/20 border border-border/20 cursor-pointer hover:bg-accent/30 h-6 w-fit',
+                            className
+                        )}>
+                            <RiRobot2Line className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
+                            <span className="typography-micro font-medium whitespace-nowrap">
+                                {agentName || 'Not selected'}
+                            </span>
+                            <RiArrowDownSLine className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
+                        </div>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent className="max-w-[300px]">
+                        {agents.map((agent) => (
+                            <DropdownMenuItem
+                                key={agent.name}
+                                className="typography-meta"
+                                onSelect={() => handleAgentChange(agent.name)}
+                            >
+                                <span className="font-medium">{agent.name}</span>
+                            </DropdownMenuItem>
+                        ))}
+                        <DropdownMenuItem
+                            className="typography-meta"
+                            onSelect={() => handleAgentChange('')}
+                        >
+                            <span className="text-muted-foreground">No agent (optional)</span>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            )}
+            {renderMobileAgentPanel()}
+        </>
+    );
+};
diff --git a/packages/ui/src/components/sections/commands/CommandsPage.tsx b/packages/ui/src/components/sections/commands/CommandsPage.tsx
new file mode 100644
index 00000000..d0d83ce7
--- /dev/null
+++ b/packages/ui/src/components/sections/commands/CommandsPage.tsx
@@ -0,0 +1,312 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { toast } from 'sonner';
+import { useCommandsStore, type CommandConfig } from '@/stores/useCommandsStore';
+import { RiCheckLine, RiInformationLine, RiSaveLine, RiTerminalBoxLine } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import { ModelSelector } from '../agents/ModelSelector';
+import { AgentSelector } from './AgentSelector';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+
+export const CommandsPage: React.FC = () => {
+  const { selectedCommandName, getCommandByName, createCommand, updateCommand, commands } = useCommandsStore();
+
+  const selectedCommand = selectedCommandName ? getCommandByName(selectedCommandName) : null;
+  const isNewCommand = selectedCommandName && !selectedCommand;
+
+  const [name, setName] = React.useState('');
+  const [description, setDescription] = React.useState('');
+  const [agent, setAgent] = React.useState('');
+  const [model, setModel] = React.useState('');
+  const [template, setTemplate] = React.useState('');
+  const [subtask, setSubtask] = React.useState(false);
+  const [isSaving, setIsSaving] = React.useState(false);
+
+  React.useEffect(() => {
+    if (isNewCommand) {
+
+      setName(selectedCommandName || '');
+      setDescription('');
+      setAgent('');
+      setModel('');
+      setTemplate('');
+      setSubtask(false);
+    } else if (selectedCommand) {
+
+      setName(selectedCommand.name);
+      setDescription(selectedCommand.description || '');
+      setAgent(selectedCommand.agent || '');
+      setModel(selectedCommand.model || '');
+      setTemplate(selectedCommand.template || '');
+      setSubtask(selectedCommand.subtask || false);
+    }
+  }, [selectedCommand, isNewCommand, selectedCommandName, commands]);
+
+  const handleSave = async () => {
+    if (!name.trim()) {
+      toast.error('Command name is required');
+      return;
+    }
+
+    if (!template.trim()) {
+      toast.error('Command template is required');
+      return;
+    }
+
+    setIsSaving(true);
+
+    try {
+      const trimmedAgent = agent.trim();
+      const trimmedModel = model.trim();
+      const trimmedTemplate = template.trim();
+      const config: CommandConfig = {
+        name: name.trim(),
+        description: description.trim() || undefined,
+        agent: trimmedAgent === '' ? null : trimmedAgent,
+        model: trimmedModel === '' ? null : trimmedModel,
+        template: trimmedTemplate,
+        subtask,
+      };
+
+      let success: boolean;
+      if (isNewCommand) {
+        success = await createCommand(config);
+      } else {
+        success = await updateCommand(name, config);
+      }
+
+      if (success) {
+        toast.success(isNewCommand ? 'Command created successfully' : 'Command updated successfully');
+      } else {
+        toast.error(isNewCommand ? 'Failed to create command' : 'Failed to update command');
+      }
+    } catch (error) {
+      console.error('Error saving command:', error);
+      toast.error('An error occurred while saving');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (!selectedCommandName) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="text-center text-muted-foreground">
+          <RiTerminalBoxLine className="mx-auto mb-3 h-12 w-12 opacity-50" />
+          <p className="typography-body">Select a command from the sidebar</p>
+          <p className="typography-meta mt-1 opacity-75">or create a new one</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <ScrollableOverlay outerClassName="h-full" className="mx-auto max-w-3xl space-y-6 p-6">
+        {}
+        <div className="space-y-1">
+          <h1 className="typography-ui-header font-semibold text-lg">
+            {isNewCommand ? 'New Command' : name}
+          </h1>
+        </div>
+
+        {}
+        <div className="space-y-4">
+          <div className="space-y-1">
+            <h2 className="typography-ui-header font-semibold text-foreground">Basic Information</h2>
+            <p className="typography-meta text-muted-foreground/80">
+              Configure command identity and metadata
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="typography-ui-label font-medium text-foreground">
+              Command Name
+            </label>
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="my-command"
+              disabled={!isNewCommand}
+            />
+            <p className="typography-meta text-muted-foreground">
+              Used with slash (/) prefix in chat
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="typography-ui-label font-medium text-foreground">
+              Description
+            </label>
+            <Textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="What does this command do?"
+              rows={3}
+            />
+          </div>
+        </div>
+
+        {}
+        <div className="space-y-4">
+          <div className="space-y-1">
+            <h2 className="typography-h2 font-semibold text-foreground">Model & Agent Configuration</h2>
+            <p className="typography-meta text-muted-foreground/80">
+              Configure model and agent for command execution
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="typography-ui-label font-medium text-foreground">
+              Agent
+            </label>
+            <AgentSelector
+              agentName={agent}
+              onChange={(agentName: string) => setAgent(agentName)}
+            />
+            <p className="typography-meta text-muted-foreground">
+              Agent to execute this command (optional)
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="typography-ui-label font-medium text-foreground">
+              Model
+            </label>
+            <ModelSelector
+              providerId={model ? model.split('/')[0] : ''}
+              modelId={model ? model.split('/')[1] : ''}
+              onChange={(providerId: string, modelId: string) => {
+                if (providerId && modelId) {
+                  setModel(`${providerId}/${modelId}`);
+                } else {
+                  setModel('');
+                }
+              }}
+            />
+            <p className="typography-meta text-muted-foreground">
+              Default model for this command (optional)
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="typography-ui-label font-medium text-foreground flex items-center gap-2 cursor-pointer">
+              <div className="relative">
+                <input
+                  type="checkbox"
+                  checked={subtask}
+                  onChange={(e) => setSubtask(e.target.checked)}
+                  className="sr-only"
+                />
+                <div className={cn(
+                  "w-5 h-5 rounded border-2 flex items-center justify-center",
+                  subtask
+                    ? "bg-primary border-primary"
+                    : "bg-background border-border hover:border-primary/50"
+                )}>
+                  {subtask && <RiCheckLine className="w-3 h-3 text-primary-foreground" />}
+                </div>
+              </div>
+              Force Subagent Invocation
+            </label>
+            <div className="flex items-center gap-2">
+              <p className="typography-meta text-muted-foreground">
+                Force command to run in a subagent context
+              </p>
+              <Tooltip delayDuration={1000}>
+                <TooltipTrigger asChild>
+                  <RiInformationLine className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
+                </TooltipTrigger>
+                  <TooltipContent sideOffset={8} className="max-w-xs">
+                    When enabled, this command will always execute in a subagent context,<br/>
+                    even if triggered from main agent.<br/>
+                    Useful for isolating command logic and maintaining clean separation of concerns.
+                  </TooltipContent>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+
+        {}
+        <div className="space-y-4">
+          <div className="space-y-1">
+            <h2 className="typography-h2 font-semibold text-foreground">Command Template</h2>
+            <p className="typography-meta text-muted-foreground/80">
+              Define the prompt template for this command. Use $ARGUMENTS for user input.
+            </p>
+          </div>
+          <Textarea
+            value={template}
+            onChange={(e) => setTemplate(e.target.value)}
+            placeholder={`Your command template here...
+
+Use $ARGUMENTS to reference user input.
+Use !\`shell command\` to inject shell output.
+Use @filename to include file contents.`}
+            rows={12}
+            className="font-mono typography-meta"
+          />
+          <div className="typography-meta text-muted-foreground/80 space-y-1">
+            <p className="font-medium">Template Features:</p>
+            <ul className="list-disc list-inside space-y-0.5 ml-2">
+              <li className="flex items-center gap-2">
+                <code className="bg-muted px-1 rounded">$ARGUMENTS</code>
+                <span>- User input after command</span>
+                <Tooltip delayDuration={1000}>
+                  <TooltipTrigger asChild>
+                    <RiInformationLine className="h-3 w-3 text-muted-foreground/60 cursor-help" />
+                  </TooltipTrigger>
+                  <TooltipContent sideOffset={8} className="max-w-xs">
+                    Replaced with everything the user types after the command name.<br/>
+                    Example: "/deploy staging" makes $ARGUMENTS = "staging"
+                  </TooltipContent>
+                </Tooltip>
+              </li>
+              <li className="flex items-center gap-2">
+                <code className="bg-muted px-1 rounded">!`command`</code>
+                <span>- Inject shell command output</span>
+                <Tooltip delayDuration={1000}>
+                  <TooltipTrigger asChild>
+                    <RiInformationLine className="h-3 w-3 text-muted-foreground/60 cursor-help" />
+                  </TooltipTrigger>
+                  <TooltipContent sideOffset={8} className="max-w-xs">
+                    Executes shell command and replaces this placeholder with its output.<br/>
+                    Example: !`git branch --show-current` gets current branch name
+                  </TooltipContent>
+                </Tooltip>
+              </li>
+              <li className="flex items-center gap-2">
+                <code className="bg-muted px-1 rounded">@filename</code>
+                <span>- Include file contents</span>
+                <Tooltip delayDuration={1000}>
+                  <TooltipTrigger asChild>
+                    <RiInformationLine className="h-3 w-3 text-muted-foreground/60 cursor-help" />
+                  </TooltipTrigger>
+                  <TooltipContent sideOffset={8} className="max-w-xs">
+                    Replaces with the full contents of the specified file.<br/>
+                    Example: @package.json includes the package.json content in the prompt
+                  </TooltipContent>
+                </Tooltip>
+              </li>
+            </ul>
+          </div>
+
+        {}
+        <div className="flex justify-end border-t border-border/40 pt-4">
+          <Button
+            size="sm"
+            variant="default"
+            onClick={handleSave}
+            disabled={isSaving}
+            className="gap-2 h-6 px-2 text-xs w-fit"
+          >
+            <RiSaveLine className="h-3 w-3" />
+            {isSaving ? 'Saving...' : 'Save Changes'}
+          </Button>
+        </div>
+      </div>
+    </ScrollableOverlay>
+  );
+};
diff --git a/packages/ui/src/components/sections/commands/CommandsSidebar.tsx b/packages/ui/src/components/sections/commands/CommandsSidebar.tsx
new file mode 100644
index 00000000..470a40f9
--- /dev/null
+++ b/packages/ui/src/components/sections/commands/CommandsSidebar.tsx
@@ -0,0 +1,260 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { ButtonLarge } from '@/components/ui/button-large';
+import { Input } from '@/components/ui/input';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { RiAddLine, RiTerminalBoxLine, RiMore2Line, RiDeleteBinLine, RiFileCopyLine } from '@remixicon/react';
+import { useCommandsStore, type Command } from '@/stores/useCommandsStore';
+import { useUIStore } from '@/stores/useUIStore';
+import { useDeviceInfo } from '@/lib/device';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { cn } from '@/lib/utils';
+
+export const CommandsSidebar: React.FC = () => {
+  const [newCommandName, setNewCommandName] = React.useState('');
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = React.useState(false);
+
+  const {
+    selectedCommandName,
+    commands,
+    setSelectedCommand,
+    deleteCommand,
+    loadCommands,
+  } = useCommandsStore();
+
+  const { setSidebarOpen } = useUIStore();
+  const { isMobile } = useDeviceInfo();
+
+  React.useEffect(() => {
+    loadCommands();
+  }, [loadCommands]);
+
+  const handleCreateCommand = () => {
+    if (!newCommandName.trim()) {
+      toast.error('Command name is required');
+      return;
+    }
+
+    const sanitizedName = newCommandName.trim().replace(/\s+/g, '-');
+
+    if (commands.some((cmd) => cmd.name === sanitizedName)) {
+      toast.error('A command with this name already exists');
+      return;
+    }
+
+    setSelectedCommand(sanitizedName);
+    setNewCommandName('');
+    setIsCreateDialogOpen(false);
+
+    if (isMobile) {
+      setSidebarOpen(false);
+    }
+  };
+
+  const handleDeleteCommand = async (command: Command) => {
+    if (window.confirm(`Are you sure you want to delete command "${command.name}"?`)) {
+      const success = await deleteCommand(command.name);
+      if (success) {
+        toast.success(`Command "${command.name}" deleted successfully`);
+      } else {
+        toast.error('Failed to delete command');
+      }
+    }
+  };
+
+  const handleDuplicateCommand = (command: Command) => {
+    const baseName = command.name;
+    let copyNumber = 1;
+    let newName = `${baseName}-copy`;
+
+    while (commands.some((c) => c.name === newName)) {
+      copyNumber++;
+      newName = `${baseName}-copy-${copyNumber}`;
+    }
+
+    setSelectedCommand(newName);
+    setIsCreateDialogOpen(false);
+
+    if (isMobile) {
+      setSidebarOpen(false);
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col bg-sidebar">
+      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+        <div className={cn('border-b border-border/40 px-3 dark:border-white/10', isMobile ? 'mt-2 py-3' : 'py-3')}>
+          <div className="flex items-center justify-between gap-2">
+            <h2 className="typography-ui-label font-semibold text-foreground">Commands</h2>
+            <div className="flex items-center gap-1">
+              <span className="typography-meta text-muted-foreground">{commands.length}</span>
+              <DialogTrigger asChild>
+                <Button type="button" variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground">
+                  <RiAddLine className="size-4" />
+                </Button>
+              </DialogTrigger>
+            </div>
+          </div>
+        </div>
+
+        <ScrollableOverlay outerClassName="flex-1 min-h-0" className="space-y-1 px-3 py-2">
+            {commands.length === 0 ? (
+              <div className="py-12 px-4 text-center text-muted-foreground">
+                <RiTerminalBoxLine className="mx-auto mb-3 h-10 w-10 opacity-50" />
+                <p className="typography-ui-label font-medium">No commands configured</p>
+                <p className="typography-meta mt-1 opacity-75">Use the + button above to create one</p>
+              </div>
+            ) : (
+              <>
+                {[...commands].sort((a, b) => a.name.localeCompare(b.name)).map((command) => (
+                  <CommandListItem
+                    key={command.name}
+                    command={command}
+                    isSelected={selectedCommandName === command.name}
+                    onSelect={() => {
+                      setSelectedCommand(command.name);
+                      if (isMobile) {
+                        setSidebarOpen(false);
+                      }
+                    }}
+                    onDelete={() => handleDeleteCommand(command)}
+                    onDuplicate={() => handleDuplicateCommand(command)}
+                  />
+                ))}
+              </>
+            )}
+        </ScrollableOverlay>
+
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create New Command</DialogTitle>
+            <DialogDescription>
+              Enter a unique name for your new slash command
+            </DialogDescription>
+          </DialogHeader>
+          <Input
+            value={newCommandName}
+            onChange={(e) => setNewCommandName(e.target.value)}
+            placeholder="Command name..."
+            className="text-foreground placeholder:text-muted-foreground"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleCreateCommand();
+              }
+            }}
+          />
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setIsCreateDialogOpen(false)}
+              className="text-foreground hover:bg-muted hover:text-foreground"
+            >
+              Cancel
+            </Button>
+            <ButtonLarge onClick={handleCreateCommand}>
+              Create
+            </ButtonLarge>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+interface CommandListItemProps {
+  command: Command;
+  isSelected: boolean;
+  onSelect: () => void;
+  onDelete: () => void;
+  onDuplicate: () => void;
+}
+
+const CommandListItem: React.FC<CommandListItemProps> = ({
+  command,
+  isSelected,
+  onSelect,
+  onDelete,
+  onDuplicate,
+}) => {
+  return (
+    <div className="group transition-all duration-200">
+      <div className="relative">
+        <div className="w-full flex items-center justify-between py-1.5 px-2 pr-1">
+          <button
+            onClick={onSelect}
+            className="flex-1 text-left overflow-hidden"
+            inputMode="none"
+            tabIndex={0}
+          >
+            <div className="flex items-center gap-2">
+              <div className={cn(
+                "typography-ui-label font-medium truncate flex-1",
+                isSelected
+                  ? "text-primary"
+                  : "text-foreground hover:text-primary/80"
+              )}>
+                /{command.name}
+              </div>
+            </div>
+
+            {}
+            {command.description && (
+              <div className="typography-meta text-muted-foreground truncate mt-0.5">
+                {command.description}
+              </div>
+            )}
+          </button>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                size="icon"
+                variant="ghost"
+                className="h-6 w-6 flex-shrink-0 -mr-1 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100"
+              >
+                <RiMore2Line className="h-3.5 w-3.5" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-fit min-w-20">
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDuplicate();
+                }}
+              >
+                <RiFileCopyLine className="h-4 w-4 mr-px" />
+                Duplicate
+              </DropdownMenuItem>
+
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete();
+                }}
+                className="text-destructive focus:text-destructive"
+              >
+                <RiDeleteBinLine className="h-4 w-4 mr-px" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/sections/git-identities/GitIdentitiesPage.tsx b/packages/ui/src/components/sections/git-identities/GitIdentitiesPage.tsx
new file mode 100644
index 00000000..1d12c441
--- /dev/null
+++ b/packages/ui/src/components/sections/git-identities/GitIdentitiesPage.tsx
@@ -0,0 +1,374 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { toast } from 'sonner';
+import { useGitIdentitiesStore, type GitIdentityProfile } from '@/stores/useGitIdentitiesStore';
+import {
+  RiUser3Line,
+  RiSaveLine,
+  RiDeleteBinLine,
+  RiGitBranchLine,
+  RiBriefcaseLine,
+  RiHomeLine,
+  RiGraduationCapLine,
+  RiCodeLine,
+  RiInformationLine
+} from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+
+const PROFILE_COLORS = [
+  { key: 'keyword', label: 'Green', cssVar: 'var(--syntax-keyword)' },
+  { key: 'error', label: 'Red', cssVar: 'var(--status-error)' },
+  { key: 'string', label: 'Cyan', cssVar: 'var(--syntax-string)' },
+  { key: 'function', label: 'Orange', cssVar: 'var(--syntax-function)' },
+  { key: 'type', label: 'Yellow', cssVar: 'var(--syntax-type)' },
+];
+
+const PROFILE_ICONS = [
+  { key: 'branch', Icon: RiGitBranchLine, label: 'Branch' },
+  { key: 'briefcase', Icon: RiBriefcaseLine, label: 'Work' },
+  { key: 'house', Icon: RiHomeLine, label: 'Personal' },
+  { key: 'graduation', Icon: RiGraduationCapLine, label: 'School' },
+  { key: 'code', Icon: RiCodeLine, label: 'Code' },
+];
+
+export const GitIdentitiesPage: React.FC = () => {
+  const {
+    selectedProfileId,
+    getProfileById,
+    createProfile,
+    updateProfile,
+    deleteProfile,
+  } = useGitIdentitiesStore();
+
+  const selectedProfile = React.useMemo(() =>
+    selectedProfileId && selectedProfileId !== 'new' ? getProfileById(selectedProfileId) : null,
+    [selectedProfileId, getProfileById]
+  );
+  const isNewProfile = selectedProfileId === 'new';
+  const isGlobalProfile = selectedProfileId === 'global';
+
+  const [name, setName] = React.useState('');
+  const [userName, setUserName] = React.useState('');
+  const [userEmail, setUserEmail] = React.useState('');
+  const [sshKey, setSshKey] = React.useState('');
+  const [color, setColor] = React.useState('keyword');
+  const [icon, setIcon] = React.useState('branch');
+  const [isSaving, setIsSaving] = React.useState(false);
+
+  React.useEffect(() => {
+    if (isNewProfile) {
+
+      setName('');
+      setUserName('');
+      setUserEmail('');
+      setSshKey('');
+      setColor('keyword');
+      setIcon('branch');
+    } else if (selectedProfile) {
+
+      setName(selectedProfile.name);
+      setUserName(selectedProfile.userName);
+      setUserEmail(selectedProfile.userEmail);
+      setSshKey(selectedProfile.sshKey || '');
+      setColor(selectedProfile.color || 'keyword');
+      setIcon(selectedProfile.icon || 'branch');
+    }
+  }, [selectedProfile, isNewProfile, selectedProfileId]);
+
+  const handleSave = async () => {
+    if (!userName.trim() || !userEmail.trim()) {
+      toast.error('User name and email are required');
+      return;
+    }
+
+    setIsSaving(true);
+
+    try {
+      const profileData: Omit<GitIdentityProfile, 'id'> & { id?: string } = {
+        name: name.trim() || userName.trim(),
+        userName: userName.trim(),
+        userEmail: userEmail.trim(),
+        sshKey: sshKey.trim() || null,
+        color,
+        icon,
+      };
+
+      let success: boolean;
+      if (isNewProfile) {
+        success = await createProfile(profileData);
+      } else if (selectedProfileId) {
+        success = await updateProfile(selectedProfileId, profileData);
+      } else {
+        return;
+      }
+
+      if (success) {
+        toast.success(isNewProfile ? 'Profile created successfully' : 'Profile updated successfully');
+      } else {
+        toast.error(isNewProfile ? 'Failed to create profile' : 'Failed to update profile');
+      }
+    } catch (error) {
+      console.error('Error saving profile:', error);
+      toast.error('An error occurred while saving');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!selectedProfileId || isNewProfile) return;
+
+    if (!confirm('Are you sure you want to delete this profile?')) {
+      return;
+    }
+
+    try {
+      const success = await deleteProfile(selectedProfileId);
+      if (success) {
+        toast.success('Profile deleted successfully');
+      } else {
+        toast.error('Failed to delete profile');
+      }
+    } catch (error) {
+      console.error('Error deleting profile:', error);
+      toast.error('An error occurred while deleting');
+    }
+  };
+
+  const currentColorValue = React.useMemo(() => {
+    const colorConfig = PROFILE_COLORS.find(c => c.key === color);
+    return colorConfig?.cssVar || 'var(--syntax-keyword)';
+  }, [color]);
+
+  if (!selectedProfileId) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="text-center text-muted-foreground">
+          <RiUser3Line className="mx-auto mb-3 h-12 w-12 opacity-50" />
+          <p className="typography-body">Select a profile from the sidebar</p>
+          <p className="typography-meta mt-1 opacity-75">or create a new one</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <ScrollableOverlay outerClassName="h-full" className="mx-auto max-w-3xl space-y-6 p-6">
+        {}
+        <div className="space-y-1">
+          <h1 className="typography-ui-header font-semibold text-lg">
+            {isNewProfile ? 'New Git Profile' : isGlobalProfile ? 'Global Identity' : name || 'Edit Profile'}
+          </h1>
+          <p className="typography-body text-muted-foreground mt-1">
+            {isNewProfile
+              ? 'Create a new Git identity profile for your repositories'
+              : isGlobalProfile
+              ? 'System-wide Git identity from global configuration (read-only)'
+              : 'Configure Git identity settings for this profile'}
+          </p>
+        </div>
+
+        {}
+        {!isGlobalProfile && (
+        <div className="space-y-4">
+          <div className="space-y-1">
+            <h2 className="typography-ui-header font-semibold text-foreground">Profile Information</h2>
+            <p className="typography-meta text-muted-foreground/80">
+              Basic profile settings and display name
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="typography-ui-label font-medium text-foreground">
+              Display Name
+            </label>
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Work Profile, Personal, etc."
+            />
+            <p className="typography-meta text-muted-foreground">
+              Friendly name to identify this profile (optional, defaults to user name)
+            </p>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <label className="typography-ui-label font-medium text-foreground">
+                Color
+              </label>
+              <div className="flex gap-2 flex-wrap">
+                {PROFILE_COLORS.map((c) => (
+                  <button
+                    key={c.key}
+                    onClick={() => setColor(c.key)}
+                    className={cn(
+                      'w-8 h-8 rounded-lg border-2 transition-all',
+                      color === c.key
+                        ? 'border-foreground scale-110'
+                        : 'border-transparent hover:border-border'
+                    )}
+                    style={{ backgroundColor: c.cssVar }}
+                    title={c.label}
+                  />
+                ))}
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="typography-ui-label font-medium text-foreground">
+                Icon
+              </label>
+              <div className="flex gap-2 flex-wrap">
+                {PROFILE_ICONS.map((i) => {
+                  const IconComponent = i.Icon;
+                  return (
+                    <button
+                      key={i.key}
+                      onClick={() => setIcon(i.key)}
+                      className={cn(
+                        'w-8 h-8 rounded-lg border-2 transition-all flex items-center justify-center',
+                        icon === i.key
+                          ? 'border-primary bg-accent scale-110'
+                          : 'border-border hover:border-primary/50'
+                      )}
+                      title={i.label}
+                    >
+                      <IconComponent
+                        className="w-4 h-4"
+
+                        style={{ color: currentColorValue }}
+                      />
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+        )}
+
+        {}
+        <div className="space-y-4">
+          <div className="space-y-1">
+            <h2 className="typography-h2 font-semibold text-foreground">Git Configuration</h2>
+            <p className="typography-meta text-muted-foreground/80">
+              Git user settings that will be applied to repositories
+            </p>
+          </div>
+
+            <div className="space-y-2">
+              <label className="typography-ui-label font-medium text-foreground flex items-center gap-2">
+                User Name {!isGlobalProfile && <span className="text-destructive">*</span>}
+                <Tooltip delayDuration={1000}>
+                  <TooltipTrigger asChild>
+                    <RiInformationLine className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
+                  </TooltipTrigger>
+                  <TooltipContent sideOffset={8} className="max-w-xs">
+                    The name that will appear in Git commit messages.<br/>
+                    This is the author name shown in git log and GitHub/GitLab interfaces.
+                  </TooltipContent>
+                </Tooltip>
+              </label>
+            <Input
+              value={userName}
+              onChange={(e) => setUserName(e.target.value)}
+              placeholder="John Doe"
+              required={!isGlobalProfile}
+              readOnly={isGlobalProfile}
+              disabled={isGlobalProfile}
+            />
+            <p className="typography-meta text-muted-foreground">
+              Git user.name configuration value
+            </p>
+          </div>
+
+            <div className="space-y-2">
+              <label className="typography-ui-label font-medium text-foreground flex items-center gap-2">
+                User Email {!isGlobalProfile && <span className="text-destructive">*</span>}
+                <Tooltip delayDuration={1000}>
+                  <TooltipTrigger asChild>
+                    <RiInformationLine className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
+                  </TooltipTrigger>
+                  <TooltipContent sideOffset={8} className="max-w-xs">
+                    The email address for Git commits.<br/>
+                    This should match your email in GitHub/GitLab<br/>
+                    to ensure proper attribution of commits.
+                  </TooltipContent>
+                </Tooltip>
+              </label>
+            <Input
+              type="email"
+              value={userEmail}
+              onChange={(e) => setUserEmail(e.target.value)}
+              placeholder="john@example.com"
+              required={!isGlobalProfile}
+              readOnly={isGlobalProfile}
+              disabled={isGlobalProfile}
+            />
+            <p className="typography-meta text-muted-foreground">
+              Git user.email configuration value
+            </p>
+          </div>
+
+            <div className="space-y-2">
+              <label className="typography-ui-label font-medium text-foreground flex items-center gap-2">
+                SSH Key Path
+                <Tooltip delayDuration={1000}>
+                  <TooltipTrigger asChild>
+                    <RiInformationLine className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
+                  </TooltipTrigger>
+                  <TooltipContent sideOffset={8} className="max-w-xs">
+                    Path to SSH private key used for Git authentication.<br/>
+                    This key will be used for HTTPS and SSH Git operations.<br/>
+                    Common paths: ~/.ssh/id_rsa, ~/.ssh/id_ed25519
+                  </TooltipContent>
+                </Tooltip>
+              </label>
+            <Input
+              value={sshKey}
+              onChange={(e) => setSshKey(e.target.value)}
+              placeholder="/Users/username/.ssh/id_rsa"
+              readOnly={isGlobalProfile}
+              disabled={isGlobalProfile}
+            />
+            <p className="typography-meta text-muted-foreground">
+              Path to SSH private key for authentication (optional)
+            </p>
+          </div>
+
+        {}
+        {!isGlobalProfile && (
+        <div className="flex justify-between border-t border-border/40 pt-4">
+          {!isNewProfile && (
+            <Button
+              size="sm"
+              variant="destructive"
+              onClick={handleDelete}
+              className="gap-2 h-6 px-2 text-xs"
+            >
+              <RiDeleteBinLine className="h-3 w-3" />
+              Delete Profile
+            </Button>
+          )}
+          <div className={cn('flex gap-2', isNewProfile && 'ml-auto')}>
+            <Button
+              size="sm"
+              variant="default"
+              onClick={handleSave}
+              disabled={isSaving}
+              className="gap-2 h-6 px-2 text-xs"
+            >
+              <RiSaveLine className="h-3 w-3" />
+              {isSaving ? 'Saving...' : 'Save Profile'}
+            </Button>
+          </div>
+        </div>
+        )}
+      </div>
+    </ScrollableOverlay>
+  );
+};
diff --git a/packages/ui/src/components/sections/git-identities/GitIdentitiesSidebar.tsx b/packages/ui/src/components/sections/git-identities/GitIdentitiesSidebar.tsx
new file mode 100644
index 00000000..88521b29
--- /dev/null
+++ b/packages/ui/src/components/sections/git-identities/GitIdentitiesSidebar.tsx
@@ -0,0 +1,240 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  RiAddLine,
+  RiGitBranchLine,
+  RiMore2Line,
+  RiDeleteBinLine,
+  RiBriefcaseLine,
+  RiHomeLine,
+  RiGraduationCapLine,
+  RiCodeLine,
+  RiHeartLine,
+} from '@remixicon/react';
+import { useGitIdentitiesStore } from '@/stores/useGitIdentitiesStore';
+import { useUIStore } from '@/stores/useUIStore';
+import { useDeviceInfo } from '@/lib/device';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { cn } from '@/lib/utils';
+import type { GitIdentityProfile } from '@/stores/useGitIdentitiesStore';
+
+const ICON_MAP: Record<string, React.ComponentType<{ className?: string; style?: React.CSSProperties }>> = {
+  branch: RiGitBranchLine,
+  briefcase: RiBriefcaseLine,
+  house: RiHomeLine,
+  graduation: RiGraduationCapLine,
+  code: RiCodeLine,
+  heart: RiHeartLine,
+};
+
+const COLOR_MAP: Record<string, string> = {
+  keyword: 'var(--syntax-keyword)',
+  error: 'var(--status-error)',
+  string: 'var(--syntax-string)',
+  function: 'var(--syntax-function)',
+  type: 'var(--syntax-type)',
+};
+
+export const GitIdentitiesSidebar: React.FC = () => {
+  const {
+    selectedProfileId,
+    profiles,
+    globalIdentity,
+    setSelectedProfile,
+    deleteProfile,
+    loadProfiles,
+    loadGlobalIdentity,
+  } = useGitIdentitiesStore();
+
+  const { setSidebarOpen } = useUIStore();
+  const { isMobile } = useDeviceInfo();
+
+  React.useEffect(() => {
+    loadProfiles();
+    loadGlobalIdentity();
+  }, [loadProfiles, loadGlobalIdentity]);
+
+  const handleCreateProfile = () => {
+    setSelectedProfile('new');
+    if (isMobile) {
+      setSidebarOpen(false);
+    }
+  };
+
+  const handleDeleteProfile = async (profile: GitIdentityProfile) => {
+    if (window.confirm(`Are you sure you want to delete profile "${profile.name}"?`)) {
+      const success = await deleteProfile(profile.id);
+      if (success) {
+        toast.success(`Profile "${profile.name}" deleted successfully`);
+      } else {
+        toast.error('Failed to delete profile');
+      }
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col bg-sidebar">
+      <div className={cn('border-b border-border/40 px-3 dark:border-white/10', isMobile ? 'mt-2 py-3' : 'py-3')}>
+        <div className="flex items-center justify-between gap-2">
+          <h2 className="typography-ui-label font-semibold text-foreground">Git Profiles</h2>
+          <div className="flex items-center gap-1">
+            <span className="typography-meta text-muted-foreground">{profiles.length}</span>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7 text-muted-foreground"
+              onClick={handleCreateProfile}
+            >
+              <RiAddLine className="size-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <ScrollableOverlay outerClassName="flex-1 min-h-0" className="space-y-1 px-3 py-2">
+          {}
+          {globalIdentity && (
+            <>
+              <div className="px-2 pb-1.5 pt-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                System Default
+              </div>
+              <ProfileListItem
+                profile={globalIdentity}
+                isSelected={selectedProfileId === 'global'}
+                onSelect={() => {
+                  setSelectedProfile('global');
+                  if (isMobile) {
+                    setSidebarOpen(false);
+                  }
+                }}
+                onDelete={undefined}
+                isReadOnly
+              />
+            </>
+          )}
+
+          {}
+          {profiles.length > 0 && (
+            <div className="px-2 pb-1.5 pt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              Custom Profiles
+            </div>
+          )}
+
+           {profiles.length === 0 && !globalIdentity ? (
+             <div className="py-12 px-4 text-center text-muted-foreground">
+               <RiGitBranchLine className="mx-auto mb-3 h-10 w-10 opacity-50" />
+               <p className="typography-ui-label font-medium">No profiles configured</p>
+               <p className="typography-meta mt-1 opacity-75">Use the + button above to create one</p>
+             </div>
+          ) : (
+            <>
+              {profiles.map((profile) => (
+                <ProfileListItem
+                  key={profile.id}
+                  profile={profile}
+                  isSelected={selectedProfileId === profile.id}
+                  onSelect={() => {
+                    setSelectedProfile(profile.id);
+                    if (isMobile) {
+                      setSidebarOpen(false);
+                    }
+                  }}
+                  onDelete={() => handleDeleteProfile(profile)}
+                />
+              ))}
+            </>
+          )}
+      </ScrollableOverlay>
+    </div>
+  );
+};
+
+interface ProfileListItemProps {
+  profile: GitIdentityProfile;
+  isSelected: boolean;
+  onSelect: () => void;
+  onDelete?: () => void;
+  isReadOnly?: boolean;
+}
+
+const ProfileListItem: React.FC<ProfileListItemProps> = ({
+  profile,
+  isSelected,
+  onSelect,
+  onDelete,
+  isReadOnly = false,
+}) => {
+
+  const IconComponent = ICON_MAP[profile.icon || 'branch'] || RiGitBranchLine;
+
+  const iconColor = COLOR_MAP[profile.color || ''];
+
+  return (
+    <div className="group transition-all duration-200">
+      <div className="relative">
+        <div className="w-full flex items-center justify-between py-1.5 px-2 pr-1">
+          <button
+            onClick={onSelect}
+            className="flex-1 text-left overflow-hidden"
+            inputMode="none"
+            tabIndex={0}
+          >
+             <div className="flex items-center gap-2">
+               <IconComponent
+                 className="w-4 h-4 flex-shrink-0"
+                 style={{ color: iconColor }}
+               />
+              <div className={cn(
+                "typography-ui-label font-medium truncate flex-1",
+                isSelected
+                  ? "text-primary"
+                  : "text-foreground hover:text-primary/80"
+              )}>
+                {profile.name}
+              </div>
+            </div>
+
+            {}
+            <div className="typography-meta text-muted-foreground truncate mt-0.5">
+              {profile.userEmail}
+            </div>
+          </button>
+
+          {!isReadOnly && onDelete && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                 <Button
+                   size="icon"
+                   variant="ghost"
+                   className="h-6 w-6 flex-shrink-0 -mr-1 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100"
+                 >
+                   <RiMore2Line className="h-3.5 w-3.5" />
+                 </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-fit min-w-20">
+                 <DropdownMenuItem
+                   onClick={(e) => {
+                     e.stopPropagation();
+                     onDelete();
+                   }}
+                   className="text-destructive focus:text-destructive"
+                 >
+                   <RiDeleteBinLine className="h-4 w-4 mr-px" />
+                   Delete
+                 </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/sections/providers/ProvidersPage.tsx b/packages/ui/src/components/sections/providers/ProvidersPage.tsx
new file mode 100644
index 00000000..8141f833
--- /dev/null
+++ b/packages/ui/src/components/sections/providers/ProvidersPage.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { SectionPlaceholder } from '../SectionPlaceholder';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+
+export const ProvidersPage: React.FC = () => {
+  return (
+    <ScrollableOverlay outerClassName="h-full" className="mx-auto max-w-3xl space-y-6 p-6">
+      <SectionPlaceholder sectionId="providers" variant="page" />
+    </ScrollableOverlay>
+  );
+};
diff --git a/packages/ui/src/components/sections/providers/ProvidersSidebar.tsx b/packages/ui/src/components/sections/providers/ProvidersSidebar.tsx
new file mode 100644
index 00000000..c523667f
--- /dev/null
+++ b/packages/ui/src/components/sections/providers/ProvidersSidebar.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { SectionPlaceholder } from '../SectionPlaceholder';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+
+export const ProvidersSidebar: React.FC = () => {
+  return (
+    <ScrollableOverlay outerClassName="h-full" className="px-3 py-2">
+      <SectionPlaceholder sectionId="providers" variant="sidebar" />
+    </ScrollableOverlay>
+  );
+};
diff --git a/packages/ui/src/components/sections/settings/AppearanceSettings.tsx b/packages/ui/src/components/sections/settings/AppearanceSettings.tsx
new file mode 100644
index 00000000..a204ab0b
--- /dev/null
+++ b/packages/ui/src/components/sections/settings/AppearanceSettings.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import { useThemeSystem } from '@/contexts/useThemeSystem';
+import type { ThemeMode } from '@/types/theme';
+import { useUIStore } from '@/stores/useUIStore';
+import { cn } from '@/lib/utils';
+import { ButtonSmall } from '@/components/ui/button-small';
+
+interface Option<T extends string> {
+    id: T;
+    label: string;
+    description?: string;
+}
+
+const THEME_MODE_OPTIONS: Array<{ value: ThemeMode; label: string }> = [
+    {
+        value: 'system',
+        label: 'System',
+    },
+    {
+        value: 'light',
+        label: 'Light',
+    },
+    {
+        value: 'dark',
+        label: 'Dark',
+    },
+];
+
+const DIFF_LAYOUT_OPTIONS: Option<'dynamic' | 'inline' | 'side-by-side'>[] = [
+    {
+        id: 'dynamic',
+        label: 'Dynamic',
+        description: 'New files inline, modified files side-by-side. Responsive inline fallback only in Dynamic mode.',
+    },
+    {
+        id: 'inline',
+        label: 'Always inline',
+        description: 'Show all file diffs as a single unified view.',
+    },
+    {
+        id: 'side-by-side',
+        label: 'Always side-by-side',
+        description: 'Compare original and modified files next to each other.',
+    },
+];
+
+export const AppearanceSettings: React.FC = () => {
+    const showReasoningTraces = useUIStore(state => state.showReasoningTraces);
+    const setShowReasoningTraces = useUIStore(state => state.setShowReasoningTraces);
+    const diffLayoutPreference = useUIStore(state => state.diffLayoutPreference);
+    const setDiffLayoutPreference = useUIStore(state => state.setDiffLayoutPreference);
+    const {
+        themeMode,
+        setThemeMode,
+    } = useThemeSystem();
+
+    return (
+        <div className="w-full space-y-8">
+            {}
+            <div className="space-y-4">
+                <div className="space-y-1">
+                    <h3 className="typography-ui-header font-semibold text-foreground">
+                        Theme Mode
+                    </h3>
+                </div>
+
+                {}
+                <div className="flex gap-1 w-fit">
+                    {THEME_MODE_OPTIONS.map((option) => (
+                        <ButtonSmall
+                            key={option.value}
+                            variant={themeMode === option.value ? 'default' : 'outline'}
+                            className={cn(themeMode === option.value ? undefined : 'text-foreground')}
+                            onClick={() => setThemeMode(option.value)}
+                        >
+                            {option.label}
+                        </ButtonSmall>
+                    ))}
+                </div>
+            </div>
+
+            {}
+            <div className="space-y-4">
+                <div className="space-y-1">
+                    <h3 className="typography-ui-header font-semibold text-foreground">
+                        Diff layout (Diff tab)
+                    </h3>
+                    <p className="typography-meta text-muted-foreground/80">
+                        Choose the default layout for file diffs. You can still override layout per file from the Diff tab.
+                    </p>
+                </div>
+
+                <div className="flex flex-col gap-2">
+                    <div className="flex gap-1 w-fit">
+                        {DIFF_LAYOUT_OPTIONS.map((option) => (
+                            <ButtonSmall
+                                key={option.id}
+                                variant={diffLayoutPreference === option.id ? 'default' : 'outline'}
+                                className={cn(diffLayoutPreference === option.id ? undefined : 'text-foreground')}
+                                onClick={() => setDiffLayoutPreference(option.id)}
+                            >
+                                {option.label}
+                            </ButtonSmall>
+                        ))}
+                    </div>
+                    <p className="typography-meta text-muted-foreground/80 max-w-xl">
+                        {DIFF_LAYOUT_OPTIONS.find((option) => option.id === diffLayoutPreference)?.description}
+                    </p>
+                </div>
+            </div>
+
+            {}
+            <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                    type="checkbox"
+                    className="h-3.5 w-3.5 accent-primary"
+                    checked={showReasoningTraces}
+                    onChange={(event) => setShowReasoningTraces(event.target.checked)}
+                />
+                <span className="typography-ui-header font-semibold text-foreground">
+                    Show thinking / reasoning traces
+                </span>
+            </label>
+        </div>
+    );
+};
diff --git a/packages/ui/src/components/sections/settings/SettingsPage.tsx b/packages/ui/src/components/sections/settings/SettingsPage.tsx
new file mode 100644
index 00000000..e2b40b5a
--- /dev/null
+++ b/packages/ui/src/components/sections/settings/SettingsPage.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { AppearanceSettings } from './AppearanceSettings';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+
+export const SettingsPage: React.FC = () => {
+    return (
+        <ScrollableOverlay
+            outerClassName="h-full"
+            className="settings-page-body mx-auto max-w-3xl space-y-3 p-3 sm:space-y-6 sm:p-6"
+        >
+            <AppearanceSettings />
+        </ScrollableOverlay>
+    );
+};
diff --git a/packages/ui/src/components/session/DirectoryExplorerDialog.tsx b/packages/ui/src/components/session/DirectoryExplorerDialog.tsx
new file mode 100644
index 00000000..0fa04f6e
--- /dev/null
+++ b/packages/ui/src/components/session/DirectoryExplorerDialog.tsx
@@ -0,0 +1,287 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Toggle } from '@/components/ui/toggle';
+import { DirectoryTree } from './DirectoryTree';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { useFileSystemAccess } from '@/hooks/useFileSystemAccess';
+import { cn, formatPathForDisplay } from '@/lib/utils';
+import { toast } from 'sonner';
+import { RiCheckboxBlankLine, RiCheckboxLine } from '@remixicon/react';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { useDeviceInfo } from '@/lib/device';
+import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
+
+const SHOW_HIDDEN_STORAGE_KEY = 'directoryTreeShowHidden';
+
+interface DirectoryExplorerDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const DirectoryExplorerDialog: React.FC<DirectoryExplorerDialogProps> = ({
+  open,
+  onOpenChange,
+}) => {
+  const { currentDirectory, homeDirectory, setDirectory, isHomeReady } = useDirectoryStore();
+  const [pendingPath, setPendingPath] = React.useState<string | null>(null);
+  const [hasUserSelection, setHasUserSelection] = React.useState(false);
+  const [isConfirming, setIsConfirming] = React.useState(false);
+  const [showHidden, setShowHidden] = React.useState<boolean>(() => {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+    try {
+      const stored = window.localStorage.getItem(SHOW_HIDDEN_STORAGE_KEY);
+      if (stored === 'true') {
+        return true;
+      }
+      if (stored === 'false') {
+        return false;
+      }
+    } catch { /* ignored */ }
+    return false;
+  });
+  const { isDesktop, requestAccess, startAccessing } = useFileSystemAccess();
+  const { isMobile } = useDeviceInfo();
+
+  React.useEffect(() => {
+    if (open) {
+      setPendingPath(null);
+      setHasUserSelection(false);
+      setIsConfirming(false);
+    }
+  }, [open]);
+
+  React.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    if (!hasUserSelection && !pendingPath && homeDirectory && isHomeReady) {
+      setPendingPath(homeDirectory);
+      setHasUserSelection(true);
+    }
+  }, [open, hasUserSelection, pendingPath, homeDirectory, isHomeReady]);
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    try {
+      window.localStorage.setItem(SHOW_HIDDEN_STORAGE_KEY, showHidden ? 'true' : 'false');
+    } catch { /* ignored */ }
+  }, [showHidden]);
+
+  const formattedPendingPath = React.useMemo(() => {
+    if (!pendingPath) {
+      return 'Select a directory';
+    }
+    return formatPathForDisplay(pendingPath, homeDirectory);
+  }, [pendingPath, homeDirectory]);
+
+  const handleClose = React.useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  const finalizeSelection = React.useCallback(async (targetPath: string) => {
+    if (!targetPath || isConfirming) {
+      return;
+    }
+    if (targetPath === currentDirectory) {
+      handleClose();
+      return;
+    }
+    setIsConfirming(true);
+    try {
+      let resolvedPath = targetPath;
+
+      if (isDesktop) {
+        const accessResult = await requestAccess(targetPath);
+        if (!accessResult.success) {
+          toast.error('Unable to access directory', {
+            description: accessResult.error || 'Desktop denied directory access.',
+          });
+          return;
+        }
+        resolvedPath = accessResult.path ?? targetPath;
+
+        const startResult = await startAccessing(resolvedPath);
+        if (!startResult.success) {
+          toast.error('Failed to open directory', {
+            description: startResult.error || 'Desktop could not grant file access.',
+          });
+          return;
+        }
+      }
+
+      setDirectory(resolvedPath);
+      handleClose();
+    } catch (error) {
+      toast.error('Failed to select directory', {
+        description: error instanceof Error ? error.message : 'Unknown error occurred.',
+      });
+    } finally {
+      setIsConfirming(false);
+    }
+  }, [
+    currentDirectory,
+    handleClose,
+    isDesktop,
+    requestAccess,
+    setDirectory,
+    startAccessing,
+    isConfirming,
+  ]);
+
+  const handleConfirm = React.useCallback(async () => {
+    if (!pendingPath) {
+      return;
+    }
+    await finalizeSelection(pendingPath);
+  }, [finalizeSelection, pendingPath]);
+
+  const handleSelectPath = React.useCallback((path: string) => {
+    setPendingPath(path);
+    setHasUserSelection(true);
+  }, []);
+
+  const handleDoubleClickPath = React.useCallback(async (path: string) => {
+    setPendingPath(path);
+    setHasUserSelection(true);
+    await finalizeSelection(path);
+  }, [
+    finalizeSelection,
+  ]);
+
+  const dialogHeader = (
+    <DialogHeader className="flex-shrink-0 px-4 pb-3 pt-[calc(var(--oc-safe-area-top,0px)+0.5rem)] sm:px-0 sm:pb-4 sm:pt-[calc(var(--oc-safe-area-top,0px)+0px)]">
+      <DialogTitle>Select project directory</DialogTitle>
+      <DialogDescription className="hidden sm:block">
+        Choose the working directory used for sessions, commands, and OpenCode operations.
+      </DialogDescription>
+    </DialogHeader>
+  );
+
+  const scrollContent = (
+    <ScrollableOverlay
+      outerClassName="flex-1 min-h-0 overflow-hidden"
+      className="directory-dialog-body px-2.5 pb-2.5 sm:px-0 sm:pb-0"
+    >
+      <div className="rounded-xl border border-border/40 bg-sidebar/60 px-3 py-2 sm:px-4 sm:py-3">
+        <span className="typography-micro text-muted-foreground">Currently selected</span>
+        <div
+          className="typography-ui-label font-medium text-foreground truncate"
+          title={formatPathForDisplay(currentDirectory, homeDirectory)}
+        >
+          {formatPathForDisplay(currentDirectory, homeDirectory)}
+        </div>
+      </div>
+
+      <div className="directory-grid mt-2 grid gap-2 grid-cols-1 sm:mt-4 sm:gap-4 sm:grid-cols-[minmax(260px,340px)_minmax(0,1fr)]">
+        <div className="rounded-xl border border-border/40 bg-sidebar/70 p-1.5 sm:p-2 sm:h-auto">
+          <DirectoryTree
+            variant="inline"
+            currentPath={pendingPath ?? currentDirectory}
+            onSelectPath={handleSelectPath}
+            onDoubleClickPath={handleDoubleClickPath}
+            className="min-h-[280px] h-[55vh] sm:h-[440px]"
+            selectionBehavior="deferred"
+            showHidden={showHidden}
+            rootDirectory={isHomeReady ? homeDirectory : null}
+            isRootReady={isHomeReady}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2.5 sm:gap-3">
+          <div className="rounded-xl border border-border/40 bg-sidebar/60 px-3 py-2 sm:px-4 sm:py-3">
+            <span className="typography-micro text-muted-foreground">Selected directory</span>
+            <div
+              className="typography-ui-label font-medium text-foreground truncate"
+              title={pendingPath ? formattedPendingPath : undefined}
+            >
+              {formattedPendingPath}
+            </div>
+          </div>
+          <Toggle
+            pressed={showHidden}
+            onPressedChange={(value) => setShowHidden(Boolean(value))}
+            variant="outline"
+            className="w-full justify-start gap-2 rounded-xl border-border/40 bg-sidebar/60 px-3 py-2 text-foreground min-w-0 h-auto sm:px-4 sm:py-3"
+          >
+            {showHidden ? (
+              <RiCheckboxLine className="h-4 w-4" />
+            ) : (
+              <RiCheckboxBlankLine className="h-4 w-4" />
+            )}
+            Show hidden directories
+          </Toggle>
+          <div className="hidden rounded-xl border border-dashed border-border/40 bg-sidebar/40 px-3 py-2 sm:block sm:px-4 sm:py-3">
+            <p className="typography-meta text-muted-foreground">
+              Use the tree to browse, pin frequently used locations, or create a new directory.
+              Select a folder, then confirm to update the working directory for OpenChamber.
+            </p>
+          </div>
+        </div>
+      </div>
+    </ScrollableOverlay>
+  );
+
+  const renderActionButtons = () => (
+    <>
+      <Button
+        variant="ghost"
+        onClick={handleClose}
+        disabled={isConfirming}
+        className="w-full sm:w-auto"
+      >
+        Cancel
+      </Button>
+      <Button
+        onClick={handleConfirm}
+        disabled={isConfirming || !hasUserSelection || !pendingPath}
+        className="w-full sm:w-auto"
+      >
+        {isConfirming ? 'Applying...' : 'Use Selected Directory'}
+      </Button>
+    </>
+  );
+
+  if (isMobile) {
+    return (
+      <MobileOverlayPanel
+        open={open}
+        onClose={() => onOpenChange(false)}
+        title="Select project directory"
+        className="max-w-full"
+        footer={<div className="flex flex-col gap-2">{renderActionButtons()}</div>}
+      >
+        {scrollContent}
+      </MobileOverlayPanel>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className={cn(
+          'flex w-full max-w-[min(640px,100vw)] max-h-[calc(100vh-32px)] flex-col gap-0 overflow-hidden p-0 sm:max-h-[80vh] sm:max-w-4xl sm:p-6'
+        )}
+      >
+        {dialogHeader}
+        {scrollContent}
+        <DialogFooter
+          className="sticky bottom-0 flex w-full flex-shrink-0 flex-col gap-2 border-t border-border/40 bg-sidebar px-4 py-3 sm:static sm:flex-row sm:justify-end sm:gap-2 sm:border-0 sm:bg-transparent sm:px-0 sm:py-0"
+        >
+          {renderActionButtons()}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/packages/ui/src/components/session/DirectoryTree.tsx b/packages/ui/src/components/session/DirectoryTree.tsx
new file mode 100644
index 00000000..a1334a6d
--- /dev/null
+++ b/packages/ui/src/components/session/DirectoryTree.tsx
@@ -0,0 +1,1028 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { RiAddLine, RiArrowDownSLine, RiArrowRightSLine, RiCheckLine, RiCloseLine, RiFolder6Line, RiPushpin2Line, RiPushpinLine } from '@remixicon/react';
+import { cn, formatPathForDisplay } from '@/lib/utils';
+import { opencodeClient } from '@/lib/opencode/client';
+import { isDesktopRuntime, getDesktopSettings } from '@/lib/desktop';
+import type { DesktopSettings } from '@/lib/desktop';
+import { updateDesktopSettings } from '@/lib/persistence';
+import { useFileSystemAccess } from '@/hooks/useFileSystemAccess';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+
+interface DirectoryItem {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  children?: DirectoryItem[];
+  isExpanded?: boolean;
+}
+
+interface DirectoryTreeProps {
+  currentPath: string;
+  onSelectPath: (path: string) => void;
+  triggerClassName?: string;
+  variant?: 'dropdown' | 'inline';
+  className?: string;
+  selectionBehavior?: 'immediate' | 'deferred';
+  onDoubleClickPath?: (path: string) => void;
+  showHidden?: boolean;
+  rootDirectory?: string | null;
+  isRootReady?: boolean;
+}
+
+export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
+  currentPath,
+  onSelectPath,
+  triggerClassName,
+  variant = 'dropdown',
+  className,
+  selectionBehavior = 'immediate',
+  onDoubleClickPath,
+  showHidden = false,
+  rootDirectory = null,
+  isRootReady,
+}) => {
+  const desktopRuntime = React.useMemo(() => isDesktopRuntime(), []);
+  const [directories, setDirectories] = React.useState<DirectoryItem[]>([]);
+  const [expandedPaths, setExpandedPaths] = React.useState<Set<string>>(new Set());
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [homeDirectory, setHomeDirectory] = React.useState<string>('');
+  const [pinnedPaths, setPinnedPaths] = React.useState<Set<string>>(new Set());
+  const [creatingInPath, setCreatingInPath] = React.useState<string | null>(null);
+  const [newDirName, setNewDirName] = React.useState('');
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const { requestAccess, startAccessing, isDesktop } = useFileSystemAccess();
+  const previousShowHidden = React.useRef(showHidden);
+
+  const stripTrailingSlashes = React.useCallback((value: string | null | undefined) => {
+    if (!value) {
+      return value;
+    }
+    if (value === '/' || value.length === 0) {
+      return '/';
+    }
+    let trimmed = value;
+    while (trimmed.length > 1 && trimmed.endsWith('/')) {
+      trimmed = trimmed.slice(0, -1);
+    }
+    return trimmed.length === 0 ? '/' : trimmed;
+  }, []);
+
+  const normalizedHomeDirectory = React.useMemo(() => {
+    if (!homeDirectory) {
+      return null;
+    }
+    const normalized = homeDirectory.replace(/\\/g, '/');
+    return stripTrailingSlashes(normalized) as string;
+  }, [homeDirectory, stripTrailingSlashes]);
+
+  const effectiveRoot = React.useMemo(() => {
+    if (typeof rootDirectory === 'string' && rootDirectory.length > 0) {
+      const normalized = rootDirectory.replace(/\\/g, '/');
+      const stripped = stripTrailingSlashes(normalized);
+      if (stripped && stripped !== '/') {
+        return stripped as string;
+      }
+    }
+    if (normalizedHomeDirectory && normalizedHomeDirectory !== '/') {
+      return normalizedHomeDirectory;
+    }
+    return null;
+  }, [rootDirectory, normalizedHomeDirectory, stripTrailingSlashes]);
+
+  const rootReady = React.useMemo(() => {
+    if (typeof isRootReady === 'boolean') {
+      return Boolean(isRootReady && effectiveRoot);
+    }
+    return Boolean(effectiveRoot);
+  }, [isRootReady, effectiveRoot]);
+
+  React.useEffect(() => {
+    if (!rootReady) {
+      setIsLoading(true);
+      setDirectories([]);
+    }
+  }, [rootReady]);
+
+  const isPathWithinHome = React.useCallback(
+    (targetPath: string | null | undefined): boolean => {
+      if (!targetPath) {
+        return false;
+      }
+      if (!rootReady || !effectiveRoot) {
+        return false;
+      }
+      const normalizedTargetRaw = targetPath.replace(/\\/g, '/');
+      const normalizedTarget =
+        (stripTrailingSlashes(normalizedTargetRaw) as string) ?? normalizedTargetRaw;
+      if (normalizedTarget === effectiveRoot) {
+        return true;
+      }
+      const prefix = `${effectiveRoot}/`;
+      return normalizedTarget.startsWith(prefix);
+    },
+    [rootReady, effectiveRoot, stripTrailingSlashes]
+  );
+
+  const handleDirectorySelect = async (path: string) => {
+    if (!rootReady) {
+      return;
+    }
+
+    if (selectionBehavior === 'deferred') {
+      onSelectPath(path);
+      return;
+    }
+
+    if (isDesktop) {
+
+      const accessResult = await requestAccess(path);
+      if (accessResult.success && accessResult.path) {
+
+        await startAccessing(accessResult.path);
+        onSelectPath(accessResult.path);
+      } else {
+        console.error('Failed to get directory access:', accessResult.error);
+
+        onSelectPath(path);
+      }
+    } else {
+      onSelectPath(path);
+    }
+  };
+
+  React.useEffect(() => {
+    let cancelled = false;
+
+    const applyRootDirectory = (candidate: string | null | undefined) => {
+      if (!candidate) {
+        return false;
+      }
+      const normalized = stripTrailingSlashes(candidate.replace(/\\/g, '/'));
+      if (!normalized || normalized === '/') {
+        return false;
+      }
+      setHomeDirectory(typeof normalized === 'string' ? normalized : candidate.replace(/\\/g, '/'));
+      return true;
+    };
+
+    const appliedInitialRoot = rootDirectory ? applyRootDirectory(rootDirectory) : false;
+
+    const resolveHomeDirectory = async () => {
+      try {
+        const fsHome = await opencodeClient.getFilesystemHome();
+        if (!cancelled && applyRootDirectory(fsHome)) {
+          return;
+        }
+      } catch (error) {
+        console.warn('Failed to resolve filesystem home directory:', error);
+      }
+
+      try {
+        const info = await opencodeClient.getSystemInfo();
+        if (!cancelled && applyRootDirectory(info?.homeDirectory)) {
+          return;
+        }
+      } catch (error) {
+        console.warn('Failed to resolve home directory from system info:', error);
+      }
+    };
+
+    if (!appliedInitialRoot) {
+      resolveHomeDirectory();
+    }
+
+    return () => {
+      cancelled = true;
+    };
+  }, [rootDirectory, stripTrailingSlashes]);
+
+  React.useEffect(() => {
+    let cancelled = false;
+
+    const applyPinned = (paths: string[]) => {
+      if (cancelled) {
+        return;
+      }
+      const normalized = paths
+        .filter((path): path is string => typeof path === 'string' && path.length > 0)
+        .map((path) => {
+          const normalizedPath = path.replace(/\\/g, '/');
+          return (stripTrailingSlashes(normalizedPath) as string) ?? normalizedPath;
+        });
+      setPinnedPaths(new Set(normalized));
+    };
+
+    const loadFromLocalStorage = () => {
+      try {
+        const raw = localStorage.getItem('pinnedDirectories');
+        if (!raw) {
+          return;
+        }
+        const parsed = JSON.parse(raw);
+        if (Array.isArray(parsed)) {
+          applyPinned(parsed);
+        }
+      } catch (error) {
+        console.warn('Failed to load pinned directories from local storage:', error);
+      }
+    };
+
+    const loadPinnedDirectories = async () => {
+      try {
+        let pinned: string[] = [];
+
+        if (desktopRuntime) {
+          const settings = await getDesktopSettings();
+          pinned = Array.isArray(settings?.pinnedDirectories) ? settings.pinnedDirectories : [];
+        } else {
+          const response = await fetch('/api/config/settings', {
+            method: 'GET',
+            headers: { Accept: 'application/json' },
+          });
+          if (response.ok) {
+            const data = await response.json();
+            pinned = Array.isArray(data?.pinnedDirectories) ? data.pinnedDirectories : [];
+          }
+        }
+
+        if (cancelled) {
+          return;
+        }
+
+        applyPinned(pinned);
+      } catch (error) {
+        console.warn('Failed to load pinned directories:', error);
+      }
+    };
+
+    loadFromLocalStorage();
+
+    const handleSettingsSynced = (event: Event) => {
+      const detail = (event as CustomEvent<DesktopSettings>).detail;
+      if (detail && Array.isArray(detail.pinnedDirectories)) {
+        applyPinned(detail.pinnedDirectories);
+      }
+    };
+    window.addEventListener('openchamber:settings-synced', handleSettingsSynced);
+
+    void loadPinnedDirectories();
+
+    return () => {
+      cancelled = true;
+      window.removeEventListener('openchamber:settings-synced', handleSettingsSynced);
+    };
+  }, [desktopRuntime, stripTrailingSlashes]);
+
+  const isInitialPinnedSync = React.useRef(true);
+
+  React.useEffect(() => {
+    if (isInitialPinnedSync.current) {
+      isInitialPinnedSync.current = false;
+      return;
+    }
+
+    const payload = {
+      pinnedDirectories: Array.from(pinnedPaths),
+    };
+
+    void updateDesktopSettings(payload);
+  }, [pinnedPaths]);
+
+  React.useEffect(() => {
+    if (!effectiveRoot) {
+      return;
+    }
+    setPinnedPaths((prev) => {
+      const filtered = Array.from(prev)
+        .map((path) => (stripTrailingSlashes(path.replace(/\\/g, '/')) as string) ?? path)
+        .filter((path) => isPathWithinHome(path));
+      return new Set(filtered);
+    });
+  }, [effectiveRoot, isPathWithinHome, stripTrailingSlashes]);
+
+  React.useEffect(() => {
+    if (previousShowHidden.current !== showHidden) {
+      previousShowHidden.current = showHidden;
+      setExpandedPaths(new Set());
+    }
+  }, [showHidden]);
+
+  const togglePin = (path: string) => {
+    setPinnedPaths(prev => {
+      if (!isPathWithinHome(path)) {
+        return prev;
+      }
+      const normalizedPath =
+        (stripTrailingSlashes(path.replace(/\\/g, '/')) as string) ?? path.replace(/\\/g, '/');
+      const newSet = new Set(prev);
+      if (newSet.has(normalizedPath)) {
+        newSet.delete(normalizedPath);
+      } else {
+        newSet.add(normalizedPath);
+      }
+      return newSet;
+    });
+  };
+
+  const pinnedDirectories = React.useMemo(() => {
+    return Array.from(pinnedPaths)
+      .map((rawPath) => {
+        const normalizedPath = stripTrailingSlashes(rawPath.replace(/\\/g, '/')) ?? rawPath;
+        return normalizedPath;
+      })
+      .filter((path) => isPathWithinHome(path))
+      .map((path) => ({
+        path,
+        name: path.split('/').pop() || path
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }, [pinnedPaths, isPathWithinHome, stripTrailingSlashes]);
+
+  const loadDirectory = React.useCallback(async (path: string): Promise<DirectoryItem[]> => {
+    const shouldInclude = (name: string) => showHidden || !name.startsWith('.');
+    const normalizedHome = effectiveRoot;
+
+    if (!rootReady || !normalizedHome) {
+      return [];
+    }
+
+    const normalizedPathRaw = path && path.length > 0 ? path : normalizedHome;
+    const normalizedPath = normalizedPathRaw ? normalizedPathRaw.replace(/\\/g, '/') : null;
+    const normalizedTarget = normalizedPath
+      ? stripTrailingSlashes(normalizedPath) ?? normalizedPath
+      : null;
+
+    if (normalizedTarget) {
+      const homePrefix = `${normalizedHome}/`;
+      const withinHome = normalizedTarget === normalizedHome || normalizedTarget.startsWith(homePrefix);
+      if (!withinHome) {
+        return [];
+      }
+    }
+
+    try {
+      const filesystemEntries = await opencodeClient.listLocalDirectory(path);
+      return filesystemEntries
+        .filter((entry) => {
+          if (!entry.isDirectory) {
+            return false;
+          }
+          if (!shouldInclude(entry.name)) {
+            return false;
+          }
+          const normalizedEntryRaw = entry.path.replace(/\\/g, '/');
+          const normalizedEntryPath = stripTrailingSlashes(normalizedEntryRaw) ?? normalizedEntryRaw;
+          const entryPrefix = normalizedEntryPath === normalizedHome ? normalizedHome : `${normalizedHome}/`;
+          return normalizedEntryPath === normalizedHome || normalizedEntryPath.startsWith(entryPrefix);
+        })
+        .map((entry) => ({
+          name: entry.name,
+          path: entry.path.replace(/\\/g, '/'),
+          isDirectory: true
+        }))
+        .sort((a, b) => a.name.localeCompare(b.name));
+    } catch {
+      try {
+
+        const tempClient = opencodeClient.getApiClient();
+        const response = await tempClient.file.list({
+          query: {
+            path: '.',
+            directory: path
+          }
+        });
+
+        if (!response.data) {
+          return [];
+        }
+
+        return response.data
+          .filter((item: { type?: string; name?: string; absolute?: string; path?: string }) => {
+            if (item.type !== 'directory') {
+              return false;
+            }
+            if (!item.name || !shouldInclude(item.name)) {
+              return false;
+            }
+            const rawPath = String(item.absolute || item.path || item.name).replace(/\\/g, '/');
+            const absolutePath = stripTrailingSlashes(rawPath) ?? rawPath;
+            const entryPrefix = absolutePath === normalizedHome ? normalizedHome : `${normalizedHome}/`;
+            return absolutePath === normalizedHome || absolutePath.startsWith(entryPrefix);
+          })
+          .map((item: { name?: string; absolute?: string; path?: string }) => ({
+            name: item.name || '',
+            path: String(item.absolute || item.path || item.name).replace(/\\/g, '/'),
+            isDirectory: true
+          }))
+          .filter((item): item is DirectoryItem => item.name !== '')
+          .sort((a: DirectoryItem, b: DirectoryItem) => a.name.localeCompare(b.name));
+      } catch {
+        return [];
+      }
+    }
+  }, [showHidden, effectiveRoot, stripTrailingSlashes, rootReady]);
+
+  const loadInitialDirectories = React.useCallback(async () => {
+    if (!rootReady || !effectiveRoot) {
+      setIsLoading(true);
+      setDirectories([]);
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const homeContents = await loadDirectory(effectiveRoot);
+      setDirectories(homeContents);
+    } catch { /* ignored */ } finally {
+      setIsLoading(false);
+    }
+  }, [rootReady, effectiveRoot, loadDirectory]);
+
+  React.useEffect(() => {
+    if (!rootReady) {
+      return;
+    }
+    if ((variant === 'inline' || isOpen)) {
+      loadInitialDirectories();
+    }
+  }, [variant, isOpen, rootReady, loadInitialDirectories]);
+
+  const toggleExpanded = async (item: DirectoryItem) => {
+    if (!rootReady) {
+      return;
+    }
+    const isCurrentlyExpanded = expandedPaths.has(item.path);
+    const newExpanded = new Set(expandedPaths);
+
+    if (isCurrentlyExpanded) {
+      newExpanded.delete(item.path);
+      setExpandedPaths(newExpanded);
+      return;
+    }
+
+    newExpanded.add(item.path);
+    setExpandedPaths(newExpanded);
+
+    const children = await loadDirectory(item.path);
+    const updateItems = (items: DirectoryItem[]): DirectoryItem[] => {
+      return items.map((i) => {
+        if (i.path === item.path) {
+          return { ...i, children };
+        }
+        if (i.children) {
+          return { ...i, children: updateItems(i.children) };
+        }
+        return i;
+      });
+    };
+    setDirectories((prev) => updateItems(prev));
+  };
+
+  React.useEffect(() => {
+    if (creatingInPath && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [creatingInPath]);
+
+  const generateUniqueDirName = (parentPath: string, children: DirectoryItem[] = []): string => {
+    const baseName = 'new_directory';
+    const existingNames = children.map(child => child.name);
+
+    if (!existingNames.includes(baseName)) {
+      return baseName;
+    }
+
+    let maxNumber = 1;
+    const numberPattern = new RegExp(`^${baseName}(\\d+)$`);
+
+    for (const name of existingNames) {
+      const match = name.match(numberPattern);
+      if (match) {
+        const num = parseInt(match[1], 10);
+        if (num > maxNumber) {
+          maxNumber = num;
+        }
+      }
+    }
+
+    let counter = 2;
+    while (existingNames.includes(`${baseName}${counter}`)) {
+      counter++;
+    }
+
+    return `${baseName}${Math.max(counter, maxNumber + 1)}`;
+  };
+
+  const startCreatingDirectory = async (parentItem: DirectoryItem) => {
+    if (!rootReady) {
+      return;
+    }
+
+    if (!expandedPaths.has(parentItem.path)) {
+      const newExpanded = new Set(expandedPaths);
+      newExpanded.add(parentItem.path);
+      setExpandedPaths(newExpanded);
+
+      if (!parentItem.children) {
+        const children = await loadDirectory(parentItem.path);
+        const updateItems = (items: DirectoryItem[]): DirectoryItem[] => {
+          return items.map(i => {
+            if (i.path === parentItem.path) {
+              return { ...i, children };
+            }
+            if (i.children) {
+              return { ...i, children: updateItems(i.children) };
+            }
+            return i;
+          });
+        };
+        setDirectories((prev) => updateItems(prev));
+
+        const uniqueName = generateUniqueDirName(parentItem.path, children);
+        setNewDirName(uniqueName);
+      } else {
+        const uniqueName = generateUniqueDirName(parentItem.path, parentItem.children);
+        setNewDirName(uniqueName);
+      }
+    } else {
+      const uniqueName = generateUniqueDirName(parentItem.path, parentItem.children);
+      setNewDirName(uniqueName);
+    }
+
+    setCreatingInPath(parentItem.path);
+  };
+
+  const createDirectory = async () => {
+    if (!creatingInPath || !rootReady) return;
+
+    const dirName = newDirName.trim() || 'new_directory';
+    const fullPath = `${creatingInPath}/${dirName}`;
+
+    try {
+      await opencodeClient.createDirectory(fullPath);
+
+      const children = await loadDirectory(creatingInPath);
+      const updateItems = (items: DirectoryItem[]): DirectoryItem[] => {
+        return items.map(i => {
+          if (i.path === creatingInPath) {
+            return { ...i, children };
+          }
+          if (i.children) {
+            return { ...i, children: updateItems(i.children) };
+          }
+          return i;
+        });
+      };
+      setDirectories((prev) => updateItems(prev));
+
+      setCreatingInPath(null);
+      setNewDirName('');
+    } catch (error) {
+      console.error('Failed to create directory:', error);
+
+    }
+  };
+
+  const cancelCreatingDirectory = () => {
+    setCreatingInPath(null);
+    setNewDirName('');
+  };
+
+  const renderTreeItem = (item: DirectoryItem, level: number = 0) => {
+    const isExpanded = expandedPaths.has(item.path);
+    const hasChildren = item.isDirectory;
+    const isPinned = pinnedPaths.has(item.path);
+    const isSelected = currentPath === item.path;
+    const isInlineVariant = variant === 'inline';
+
+    const rowContent = (
+      <>
+        {hasChildren && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleExpanded(item);
+            }}
+            className="p-0.5 hover:bg-accent rounded"
+          >
+            {isExpanded ? (
+              <RiArrowDownSLine className="h-3 w-3" />
+            ) : (
+              <RiArrowRightSLine className="h-3 w-3" />
+            )}
+          </button>
+        )}
+        {!hasChildren && <div className="w-4" />}
+
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            handleDirectorySelect(item.path);
+            if (variant === 'dropdown' && selectionBehavior === 'immediate') {
+              setIsOpen(false);
+            }
+          }}
+          onDoubleClick={(e) => {
+            e.stopPropagation();
+            if (onDoubleClickPath) {
+              onDoubleClickPath(item.path);
+            }
+          }}
+          className={cn(
+            'flex items-center gap-1.5 flex-1 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60 rounded',
+            isInlineVariant ? (isSelected ? 'text-primary' : 'text-foreground') : 'text-foreground'
+          )}
+        >
+          {isExpanded ? (
+            <RiFolder6Line
+              className={cn(
+                'h-3.5 w-3.5 text-muted-foreground',
+                isInlineVariant && isSelected && 'text-primary'
+              )}
+            />
+          ) : (
+            <RiFolder6Line
+              className={cn(
+                'h-3.5 w-3.5 text-muted-foreground',
+                isInlineVariant && isSelected && 'text-primary'
+              )}
+            />
+          )}
+          <span
+            className={cn(
+              'typography-ui-label font-medium truncate',
+              isInlineVariant && isSelected ? 'text-primary' : 'text-foreground'
+            )}
+          >
+            {item.name}
+          </span>
+        </button>
+
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            startCreatingDirectory(item);
+          }}
+          className="p-1 opacity-0 group-hover:opacity-100 hover:bg-accent rounded transition-opacity"
+          title="Create new directory"
+        >
+          <RiAddLine className="h-3 w-3 text-muted-foreground" />
+        </button>
+
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            togglePin(item.path);
+          }}
+          className="p-1 opacity-0 group-hover:opacity-100 hover:bg-accent rounded transition-opacity"
+          title={isPinned ? "Unpin directory" : "Pin directory"}
+        >
+          {isPinned ? (
+            <RiPushpin2Line className="h-3 w-3 text-primary" />
+          ) : (
+            <RiPushpinLine className="h-3 w-3 text-muted-foreground" />
+          )}
+        </button>
+      </>
+    );
+
+    if (variant === 'inline') {
+      return (
+        <div key={item.path}>
+          <div
+            className={cn(
+              'group flex items-center gap-1 rounded px-2 py-1.5 text-left hover:bg-accent/40',
+              isSelected ? 'text-primary' : 'text-foreground'
+            )}
+            style={{ paddingLeft: `${level * 12 + 8}px` }}
+          >
+            {rowContent}
+          </div>
+          {isExpanded && (
+            <>
+              {creatingInPath === item.path && (
+                <div
+                  className="flex items-center gap-1 px-2 py-1.5"
+                  style={{ paddingLeft: `${(level + 1) * 12 + 8}px` }}
+                >
+                  <div className="w-4" />
+                  <RiFolder6Line className="h-3.5 w-3.5 text-muted-foreground" />
+                  <Input
+                    ref={inputRef}
+                    value={newDirName}
+                    onChange={(e) => setNewDirName(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        createDirectory();
+                      } else if (e.key === 'Escape') {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        cancelCreatingDirectory();
+                      }
+                    }}
+                    onBlur={createDirectory}
+                    className="h-6 typography-meta flex-1 selection:bg-muted selection:text-muted-foreground"
+                    placeholder="new_directory"
+                  />
+                  <button
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      createDirectory();
+                    }}
+                    className="p-1 hover:bg-accent rounded"
+                    title="Create directory"
+                  >
+                    <RiCheckLine className="h-3 w-3 text-green-600" />
+                  </button>
+                  <button
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      cancelCreatingDirectory();
+                    }}
+                    className="p-1 hover:bg-accent rounded"
+                    title="Cancel"
+                  >
+                    <RiCloseLine className="h-3 w-3 text-muted-foreground" />
+                  </button>
+                </div>
+              )}
+              {item.children && item.children.map((child) => renderTreeItem(child, level + 1))}
+            </>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div key={item.path}>
+        <DropdownMenuItem
+          className={cn(
+            'flex items-center gap-1 cursor-pointer group',
+            currentPath === item.path && 'bg-accent'
+          )}
+          style={{ paddingLeft: `${level * 12 + 8}px` }}
+          onSelect={(e) => {
+            e.preventDefault();
+          }}
+        >
+          {hasChildren && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleExpanded(item);
+              }}
+              className="p-0.5 hover:bg-accent rounded"
+            >
+              {isExpanded ? (
+                <RiArrowDownSLine className="h-3 w-3" />
+              ) : (
+                <RiArrowRightSLine className="h-3 w-3" />
+              )}
+            </button>
+          )}
+          {!hasChildren && <div className="w-4" />}
+          {rowContent}
+        </DropdownMenuItem>
+        {isExpanded && (
+          <div>
+            {creatingInPath === item.path && (
+              <div
+                className="flex items-center gap-1 px-2 py-1.5"
+                style={{ paddingLeft: `${(level + 1) * 12 + 8}px` }}
+              >
+                <div className="w-4" />
+                <RiFolder6Line className="h-3.5 w-3.5 text-muted-foreground" />
+                <Input
+                  ref={inputRef}
+                  value={newDirName}
+                  onChange={(e) => setNewDirName(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      createDirectory();
+                    } else if (e.key === 'Escape') {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      cancelCreatingDirectory();
+                    }
+                  }}
+                  onBlur={createDirectory}
+                  className="h-6 typography-meta flex-1 selection:bg-muted selection:text-muted-foreground"
+                  placeholder="new_directory"
+                />
+                <button
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    createDirectory();
+                  }}
+                  className="p-1 hover:bg-accent rounded"
+                  title="Create directory"
+                >
+                  <RiCheckLine className="h-3 w-3 text-green-600" />
+                </button>
+                <button
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    cancelCreatingDirectory();
+                  }}
+                  className="p-1 hover:bg-accent rounded"
+                  title="Cancel"
+                >
+                  <RiCloseLine className="h-3 w-3 text-muted-foreground" />
+                </button>
+              </div>
+            )}
+            {item.children && item.children.map((child) => renderTreeItem(child, level + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const renderPinnedRow = (name: string, path: string) => {
+    if (variant === 'inline') {
+      const isSelected = currentPath === path;
+      return (
+        <div
+          key={path}
+          className={cn(
+            'group flex items-center gap-2 px-2 py-1.5 hover:bg-accent/40'
+          )}
+        >
+          <button
+            onClick={() => handleDirectorySelect(path)}
+            onDoubleClick={(e) => {
+              e.stopPropagation();
+              if (onDoubleClickPath) {
+                onDoubleClickPath(path);
+              }
+            }}
+            className={cn(
+              'flex flex-1 items-center gap-2 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60 rounded',
+              isSelected ? 'text-primary' : 'text-foreground'
+            )}
+          >
+            <RiFolder6Line
+              className={cn(
+                'h-3.5 w-3.5 text-muted-foreground',
+                isSelected && 'text-primary'
+              )}
+            />
+            <div className="flex-1 min-w-0">
+              <div
+                className={cn(
+                  'typography-ui-label font-medium truncate',
+                  isSelected ? 'text-primary' : 'text-foreground'
+                )}
+              >
+                {name}
+              </div>
+              <div className="typography-meta text-muted-foreground truncate">
+                {formatPathForDisplay(path, homeDirectory)}
+              </div>
+            </div>
+          </button>
+          <button
+            onClick={() => togglePin(path)}
+            className="p-1 opacity-0 group-hover:opacity-100 hover:bg-accent rounded transition-opacity"
+            title="Unpin directory"
+          >
+            <RiPushpin2Line className="h-3 w-3 text-primary" />
+          </button>
+        </div>
+      );
+    }
+
+    return (
+      <DropdownMenuItem
+        key={path}
+        onSelect={(e) => {
+          e.preventDefault();
+          handleDirectorySelect(path);
+          if (selectionBehavior === 'immediate') {
+            setIsOpen(false);
+          }
+        }}
+        className={cn(
+          'flex items-start gap-2 cursor-pointer group py-2',
+          currentPath === path && 'bg-accent'
+        )}
+      >
+        <RiFolder6Line className="h-3.5 w-3.5 text-muted-foreground mt-0.5" />
+        <div className="flex-1 min-w-0">
+          <div className="typography-ui-label font-medium">{name}</div>
+          <div className="typography-meta text-muted-foreground">
+            {formatPathForDisplay(path, homeDirectory)}
+          </div>
+        </div>
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            togglePin(path);
+          }}
+          className="p-1 opacity-0 group-hover:opacity-100 hover:bg-accent rounded transition-opacity"
+          title="Unpin directory"
+        >
+          <RiPushpin2Line className="h-3 w-3 text-primary" />
+        </button>
+      </DropdownMenuItem>
+    );
+  };
+
+  const directoryContent = (
+    <>
+      {!rootReady ? (
+        <div className="px-3 py-2 typography-ui-label text-muted-foreground">
+          Locating home directory...
+        </div>
+      ) : (
+        <>
+          {pinnedDirectories.length > 0 && (
+            <>
+              <div className="px-2 py-1.5 typography-meta font-semibold text-muted-foreground">
+                Pinned
+              </div>
+              {pinnedDirectories.map(({ name, path }) => renderPinnedRow(name, path))}
+              {variant === 'dropdown' && <DropdownMenuSeparator />}
+            </>
+          )}
+
+          <div className="px-2 py-1.5 typography-meta font-semibold text-muted-foreground">
+            Browse
+          </div>
+
+          {isLoading ? (
+            <div className="px-3 py-2 typography-ui-label text-muted-foreground">
+              Loading...
+            </div>
+          ) : (
+            directories.map((item) => renderTreeItem(item))
+          )}
+
+          {!isLoading && directories.length === 0 && (
+            <div className="px-3 py-2 typography-ui-label text-muted-foreground">
+              No directories found
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+
+  if (variant === 'inline') {
+    return (
+      <div className={cn('overflow-hidden rounded-xl border border-border/40 bg-sidebar/70', className)}>
+        <ScrollableOverlay outerClassName="max-h-full" className="w-full">
+          {directoryContent}
+        </ScrollableOverlay>
+      </div>
+    );
+  }
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full h-8 px-2.5 justify-between items-center rounded-lg border border-transparent bg-sidebar-accent/40 text-foreground/90 hover:bg-sidebar-accent/60 typography-meta',
+            triggerClassName
+          )}
+          aria-label="Select working directory"
+        >
+          <span className="flex items-center gap-1.5 min-w-0 flex-1">
+            <RiFolder6Line className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
+            <span className="truncate" title={currentPath}>
+              {formatPathForDisplay(currentPath, homeDirectory)}
+            </span>
+          </span>
+          <RiArrowDownSLine className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[350px]">
+        <ScrollableOverlay outerClassName="h-full" className="w-full">
+          {directoryContent}
+        </ScrollableOverlay>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/packages/ui/src/components/session/SessionDialogs.tsx b/packages/ui/src/components/session/SessionDialogs.tsx
new file mode 100644
index 00000000..0565cef9
--- /dev/null
+++ b/packages/ui/src/components/session/SessionDialogs.tsx
@@ -0,0 +1,858 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { toast } from 'sonner';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { RiCheckboxBlankLine, RiCheckboxLine, RiDeleteBinLine } from '@remixicon/react';
+import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
+import { DirectoryExplorerDialog } from './DirectoryExplorerDialog';
+import { cn, formatPathForDisplay } from '@/lib/utils';
+import type { Session } from '@opencode-ai/sdk';
+import type { WorktreeMetadata } from '@/types/worktree';
+import {
+    createWorktree,
+    getWorktreeStatus,
+    listWorktrees as listGitWorktrees,
+    mapWorktreeToMetadata,
+    removeWorktree,
+} from '@/lib/git/worktreeService';
+import { checkIsGitRepository, ensureOpenChamberIgnored, gitPush } from '@/lib/gitApi';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { useUIStore } from '@/stores/useUIStore';
+import { useDeviceInfo } from '@/lib/device';
+import { sessionEvents } from '@/lib/sessionEvents';
+
+const WORKTREE_ROOT = '.openchamber';
+
+const renderToastDescription = (text?: string) =>
+    text ? <span className="text-foreground/80 dark:text-foreground/70">{text}</span> : undefined;
+
+const sanitizeBranchNameInput = (value: string): string => {
+    return value
+        .trim()
+        .replace(/\s+/g, '-')
+        .replace(/[^A-Za-z0-9._/-]/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/\/{2,}/g, '/')
+        .replace(/\/-+/g, '/')
+        .replace(/-+\//g, '/')
+        .replace(/^[-/]+/, '')
+        .replace(/[-/]+$/, '');
+};
+
+const sanitizeWorktreeSlug = (value: string): string => {
+    return value
+        .trim()
+        .replace(/[^A-Za-z0-9._-]+/g, '-')
+        .replace(/^[-_]+|[-_]+$/g, '')
+        .slice(0, 120);
+};
+
+const normalizeProjectDirectory = (path: string | null | undefined): string => {
+    if (!path) {
+        return '';
+    }
+    const replaced = path.replace(/\\/g, '/');
+    if (replaced === '/') {
+        return '/';
+    }
+    return replaced.replace(/\/+$/, '');
+};
+
+const joinWorktreePath = (projectDirectory: string, slug: string): string => {
+    const normalizedProject = normalizeProjectDirectory(projectDirectory);
+    const cleanSlug = sanitizeWorktreeSlug(slug);
+    const base =
+        !normalizedProject || normalizedProject === '/'
+            ? `/${WORKTREE_ROOT}`
+            : `${normalizedProject}/${WORKTREE_ROOT}`;
+    return cleanSlug ? `${base}/${cleanSlug}` : base;
+};
+
+type DeleteDialogState = {
+    sessions: Session[];
+    dateLabel?: string;
+    mode: 'session' | 'worktree';
+    worktree?: WorktreeMetadata | null;
+};
+
+export const SessionDialogs: React.FC = () => {
+    const [isDirectoryDialogOpen, setIsDirectoryDialogOpen] = React.useState(false);
+    const [hasShownInitialDirectoryPrompt, setHasShownInitialDirectoryPrompt] = React.useState(false);
+    const [branchName, setBranchName] = React.useState<string>('');
+    const [availableWorktrees, setAvailableWorktrees] = React.useState<WorktreeMetadata[]>([]);
+    const [isLoadingWorktrees, setIsLoadingWorktrees] = React.useState(false);
+    const [worktreeError, setWorktreeError] = React.useState<string | null>(null);
+    const [isCheckingGitRepository, setIsCheckingGitRepository] = React.useState(false);
+    const [isGitRepository, setIsGitRepository] = React.useState<boolean | null>(null);
+    const [isCreatingWorktree, setIsCreatingWorktree] = React.useState(false);
+    const ensuredIgnoreDirectories = React.useRef<Set<string>>(new Set());
+    const [deleteDialog, setDeleteDialog] = React.useState<DeleteDialogState | null>(null);
+    const [deleteDialogSummaries, setDeleteDialogSummaries] = React.useState<Array<{ session: Session; metadata: WorktreeMetadata }>>([]);
+    const [deleteDialogShouldRemoveRemote, setDeleteDialogShouldRemoveRemote] = React.useState(false);
+    const [isProcessingDelete, setIsProcessingDelete] = React.useState(false);
+
+    const {
+        sessions,
+        createSession,
+        deleteSession,
+        deleteSessions,
+        loadSessions,
+        initializeNewOpenChamberSession,
+        setWorktreeMetadata,
+        setSessionDirectory,
+        getWorktreeMetadata,
+        isLoading,
+    } = useSessionStore();
+    const { currentDirectory, homeDirectory, hasPersistedDirectory, isHomeReady } = useDirectoryStore();
+    const { agents } = useConfigStore();
+    const { isSessionCreateDialogOpen, setSessionCreateDialogOpen } = useUIStore();
+    const { isMobile, isTablet, hasTouchInput } = useDeviceInfo();
+    const useMobileOverlay = isMobile || isTablet || hasTouchInput;
+
+    const projectDirectory = React.useMemo(() => normalizeProjectDirectory(currentDirectory), [currentDirectory]);
+    const sanitizedBranchName = React.useMemo(() => sanitizeBranchNameInput(branchName), [branchName]);
+    const sanitizedWorktreeSlug = React.useMemo(() => sanitizeWorktreeSlug(sanitizedBranchName), [sanitizedBranchName]);
+    const worktreePreviewPath = React.useMemo(() => {
+        if (!projectDirectory || !sanitizedWorktreeSlug) {
+            return '';
+        }
+        return joinWorktreePath(projectDirectory, sanitizedWorktreeSlug);
+    }, [projectDirectory, sanitizedWorktreeSlug]);
+    const isGitRepo = isGitRepository === true;
+    const hasDirtyWorktrees = React.useMemo(
+        () =>
+            (deleteDialog?.worktree?.status?.isDirty ?? false) ||
+            deleteDialogSummaries.some((entry) => entry.metadata.status?.isDirty),
+        [deleteDialog?.worktree?.status?.isDirty, deleteDialogSummaries],
+    );
+    const canRemoveRemoteBranches = React.useMemo(
+        () => {
+            const targetWorktree = deleteDialog?.worktree;
+            if (targetWorktree && typeof targetWorktree.branch === 'string' && targetWorktree.branch.trim().length > 0) {
+                return true;
+            }
+            return (
+                deleteDialogSummaries.length > 0 &&
+                deleteDialogSummaries.every(({ metadata }) => typeof metadata.branch === 'string' && metadata.branch.trim().length > 0)
+            );
+        },
+        [deleteDialog?.worktree, deleteDialogSummaries],
+    );
+    const isWorktreeDelete = deleteDialog?.mode === 'worktree';
+    const shouldArchiveWorktree = isWorktreeDelete;
+    const removeRemoteOptionDisabled =
+        isProcessingDelete || !isWorktreeDelete || !canRemoveRemoteBranches;
+
+    React.useEffect(() => {
+        if (!projectDirectory) {
+            return;
+        }
+        if (ensuredIgnoreDirectories.current.has(projectDirectory)) {
+            return;
+        }
+        ensureOpenChamberIgnored(projectDirectory)
+            .then(() => ensuredIgnoreDirectories.current.add(projectDirectory))
+            .catch((error) => {
+                console.warn('Failed to ensure .openchamber directory is ignored:', error);
+                ensuredIgnoreDirectories.current.delete(projectDirectory);
+            });
+    }, [projectDirectory]);
+
+    React.useEffect(() => {
+        loadSessions();
+    }, [loadSessions, currentDirectory]);
+
+    React.useEffect(() => {
+        if (!hasShownInitialDirectoryPrompt && isHomeReady && !hasPersistedDirectory) {
+            setIsDirectoryDialogOpen(true);
+            setHasShownInitialDirectoryPrompt(true);
+        }
+    }, [hasPersistedDirectory, hasShownInitialDirectoryPrompt, isHomeReady]);
+
+    React.useEffect(() => {
+        if (!isSessionCreateDialogOpen) {
+            setBranchName('');
+            setAvailableWorktrees([]);
+            setWorktreeError(null);
+            setIsLoadingWorktrees(false);
+            setIsCheckingGitRepository(false);
+            setIsGitRepository(null);
+            setIsCreatingWorktree(false);
+            return;
+        }
+
+        if (!projectDirectory) {
+            setAvailableWorktrees([]);
+            setIsGitRepository(null);
+            setIsCheckingGitRepository(false);
+            return;
+        }
+
+        let cancelled = false;
+        setIsLoadingWorktrees(true);
+        setIsCheckingGitRepository(true);
+        setWorktreeError(null);
+
+        (async () => {
+            try {
+                const repoStatus = await checkIsGitRepository(projectDirectory);
+                if (cancelled) {
+                    return;
+                }
+                setIsGitRepository(repoStatus);
+
+                if (!repoStatus) {
+                    setAvailableWorktrees([]);
+                    setWorktreeError(null);
+                } else {
+                    const worktrees = await listGitWorktrees(projectDirectory);
+                    if (cancelled) {
+                        return;
+                    }
+                    const mapped = worktrees.map((info) => mapWorktreeToMetadata(projectDirectory, info));
+                    const worktreeRoot = joinWorktreePath(projectDirectory, '');
+                    const worktreePrefix = `${worktreeRoot}/`;
+                    const filtered = mapped.filter((item) => item.path.startsWith(worktreePrefix));
+                    setAvailableWorktrees(filtered);
+                }
+            } catch (error) {
+                if (cancelled) {
+                    return;
+                }
+                const message = error instanceof Error ? error.message : 'Failed to load worktrees';
+                setWorktreeError(message);
+            } finally {
+                if (!cancelled) {
+                    setIsLoadingWorktrees(false);
+                    setIsCheckingGitRepository(false);
+                }
+            }
+        })();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [isSessionCreateDialogOpen, projectDirectory]);
+
+    const openDeleteDialog = React.useCallback((payload: { sessions: Session[]; dateLabel?: string; mode?: 'session' | 'worktree'; worktree?: WorktreeMetadata | null }) => {
+        setDeleteDialog({
+            sessions: payload.sessions,
+            dateLabel: payload.dateLabel,
+            mode: payload.mode ?? 'session',
+            worktree: payload.worktree ?? null,
+        });
+    }, []);
+
+    const closeDeleteDialog = React.useCallback(() => {
+        setDeleteDialog(null);
+        setDeleteDialogSummaries([]);
+        setDeleteDialogShouldRemoveRemote(false);
+        setIsProcessingDelete(false);
+    }, []);
+
+    React.useEffect(() => {
+        return sessionEvents.onDeleteRequest((payload) => {
+            openDeleteDialog(payload);
+        });
+    }, [openDeleteDialog]);
+
+    React.useEffect(() => {
+        return sessionEvents.onDirectoryRequest(() => {
+            setIsDirectoryDialogOpen(true);
+        });
+    }, []);
+
+    React.useEffect(() => {
+        return sessionEvents.onCreateRequest(() => {
+            setBranchName('');
+            setSessionCreateDialogOpen(true);
+        });
+    }, [setSessionCreateDialogOpen]);
+
+    React.useEffect(() => {
+        if (!deleteDialog) {
+            setDeleteDialogSummaries([]);
+            setDeleteDialogShouldRemoveRemote(false);
+            return;
+        }
+
+        const summaries = deleteDialog.sessions
+            .map((session) => {
+                const metadata = getWorktreeMetadata(session.id);
+                return metadata ? { session, metadata } : null;
+            })
+            .filter((entry): entry is { session: Session; metadata: WorktreeMetadata } => Boolean(entry));
+
+        setDeleteDialogSummaries(summaries);
+        setDeleteDialogShouldRemoveRemote(false);
+
+        if (summaries.length === 0) {
+            return;
+        }
+
+        let cancelled = false;
+
+        (async () => {
+            const statuses = await Promise.all(
+                summaries.map(async ({ metadata }) => {
+                    if (metadata.status && typeof metadata.status.isDirty === 'boolean') {
+                        return metadata.status;
+                    }
+                    try {
+                        return await getWorktreeStatus(metadata.path);
+                    } catch {
+                        return metadata.status;
+                    }
+                })
+            ).catch((error) => {
+                console.warn('Failed to inspect worktree status before deletion:', error);
+                return summaries.map(({ metadata }) => metadata.status);
+            });
+
+            if (cancelled || !Array.isArray(statuses)) {
+                return;
+            }
+
+            setDeleteDialogSummaries((prev) =>
+                prev.map((entry, index) => ({
+                    session: entry.session,
+                    metadata: { ...entry.metadata, status: statuses[index] ?? entry.metadata.status },
+                }))
+            );
+        })();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [deleteDialog, getWorktreeMetadata]);
+
+    React.useEffect(() => {
+        if (!canRemoveRemoteBranches) {
+            setDeleteDialogShouldRemoveRemote(false);
+        }
+    }, [canRemoveRemoteBranches]);
+
+    const handleBranchInputChange = React.useCallback((value: string) => {
+        setBranchName(value);
+        setWorktreeError(null);
+    }, []);
+
+    const refreshWorktrees = React.useCallback(async () => {
+        if (!projectDirectory || !isGitRepository) {
+            return;
+        }
+        try {
+            const worktrees = await listGitWorktrees(projectDirectory);
+            const mapped = worktrees.map((info) => mapWorktreeToMetadata(projectDirectory, info));
+            const worktreeRoot = joinWorktreePath(projectDirectory, '');
+            const worktreePrefix = `${worktreeRoot}/`;
+            const filtered = mapped.filter((item) => item.path.startsWith(worktreePrefix));
+            setAvailableWorktrees(filtered);
+        } catch { /* ignored */ }
+    }, [projectDirectory, isGitRepository]);
+
+    const prevDeleteDialogRef = React.useRef<DeleteDialogState | null>(null);
+    React.useEffect(() => {
+
+        if (prevDeleteDialogRef.current?.mode === 'worktree' && !deleteDialog) {
+            refreshWorktrees();
+        }
+        prevDeleteDialogRef.current = deleteDialog;
+    }, [deleteDialog, refreshWorktrees]);
+
+    const validateWorktreeCreation = React.useCallback((): boolean => {
+        if (!projectDirectory) {
+            const message = 'Select a project directory first.';
+            setWorktreeError(message);
+            toast.error(message);
+            return false;
+        }
+
+        const normalizedBranch = sanitizedBranchName;
+        const slugValue = sanitizedWorktreeSlug;
+        if (!normalizedBranch) {
+            const message = 'Provide a branch name for the new worktree.';
+            setWorktreeError(message);
+            toast.error(message);
+            return false;
+        }
+        if (!slugValue) {
+            const message = 'Provide a branch name that can be used as a folder.';
+            setWorktreeError(message);
+            toast.error(message);
+            return false;
+        }
+        const prospectivePath = joinWorktreePath(projectDirectory, slugValue);
+        if (availableWorktrees.some((worktree) => worktree.path === prospectivePath)) {
+            const message = 'A worktree with this folder already exists.';
+            setWorktreeError(message);
+            toast.error(message);
+            return false;
+        }
+
+        setWorktreeError(null);
+        return true;
+    }, [projectDirectory, sanitizedBranchName, sanitizedWorktreeSlug, availableWorktrees]);
+
+    const handleCreateWorktree = async () => {
+        if (isCreatingWorktree || isLoading) {
+            return;
+        }
+
+        if (!validateWorktreeCreation()) {
+            return;
+        }
+
+        setIsCreatingWorktree(true);
+        setWorktreeError(null);
+
+        let cleanupMetadata: WorktreeMetadata | null = null;
+
+        try {
+            const normalizedBranch = sanitizedBranchName;
+            const slugValue = sanitizedWorktreeSlug;
+            const metadata = await createWorktree({
+                projectDirectory,
+                worktreeSlug: slugValue,
+                branch: normalizedBranch,
+                createBranch: true,
+            });
+            cleanupMetadata = metadata;
+            let status = await getWorktreeStatus(metadata.path).catch(() => undefined);
+            try {
+                await gitPush(metadata.path, {
+                    remote: 'origin',
+                    branch: normalizedBranch,
+                    options: ['--set-upstream'],
+                });
+                status = await getWorktreeStatus(metadata.path).catch(() => status);
+                toast.success(`Configured upstream for ${normalizedBranch}`);
+            } catch (pushError) {
+                const message =
+                    pushError instanceof Error ? pushError.message : 'Unable to push new worktree branch.';
+                toast.warning('Worktree created locally', {
+                    description: renderToastDescription(`Upstream setup failed: ${message}`),
+                });
+            }
+            const createdMetadata = status ? { ...metadata, status } : metadata;
+
+            const session = await createSession(undefined, metadata.path);
+            if (!session) {
+                await removeWorktree({ projectDirectory, path: metadata.path, force: true }).catch(() => undefined);
+                const message = 'Failed to create session for worktree';
+                setWorktreeError(message);
+                toast.error(message);
+                return;
+            }
+
+            initializeNewOpenChamberSession(session.id, agents);
+            setSessionDirectory(session.id, metadata.path);
+            setWorktreeMetadata(session.id, createdMetadata);
+
+            await refreshWorktrees();
+            setBranchName('');
+            toast.success('Worktree created');
+        } catch (error) {
+            if (cleanupMetadata) {
+                await removeWorktree({ projectDirectory, path: cleanupMetadata.path, force: true }).catch(() => undefined);
+            }
+            const message = error instanceof Error ? error.message : 'Failed to create worktree';
+            setWorktreeError(message);
+            toast.error(message);
+        } finally {
+            setIsCreatingWorktree(false);
+        }
+    };
+
+    const handleDeleteWorktree = React.useCallback((worktree: WorktreeMetadata) => {
+
+        const worktreeSessions = sessions.filter((session) => {
+            const metadata = getWorktreeMetadata(session.id);
+            return metadata?.path === worktree.path;
+        });
+
+        sessionEvents.requestDelete({
+            sessions: worktreeSessions,
+            mode: 'worktree',
+            worktree,
+        });
+    }, [sessions, getWorktreeMetadata]);
+
+    const handleConfirmDelete = React.useCallback(async () => {
+        if (!deleteDialog) {
+            return;
+        }
+        setIsProcessingDelete(true);
+
+        try {
+            const archiveWorktree = shouldArchiveWorktree;
+            const removeRemoteBranch = archiveWorktree && deleteDialogShouldRemoveRemote;
+
+            if (deleteDialog.sessions.length === 1) {
+                const target = deleteDialog.sessions[0];
+                const success = await deleteSession(target.id, {
+                    archiveWorktree,
+                    deleteRemoteBranch: removeRemoteBranch,
+                });
+                if (!success) {
+                    toast.error('Failed to delete session');
+                    setIsProcessingDelete(false);
+                    return;
+                }
+                const archiveNote = archiveWorktree
+                    ? removeRemoteBranch
+                        ? 'Worktree and remote branch removed.'
+                        : 'Attached worktree archived.'
+                    : undefined;
+                toast.success('Session deleted', {
+                    description: renderToastDescription(archiveNote),
+                });
+            } else {
+                const ids = deleteDialog.sessions.map((session) => session.id);
+                const { deletedIds, failedIds } = await deleteSessions(ids, {
+                    archiveWorktree,
+                    deleteRemoteBranch: removeRemoteBranch,
+                });
+
+                if (deletedIds.length > 0) {
+                    const archiveNote = archiveWorktree
+                        ? removeRemoteBranch
+                            ? 'Archived worktrees and removed remote branches.'
+                            : 'Attached worktrees archived.'
+                        : undefined;
+                    const successDescription =
+                        failedIds.length > 0
+                            ? `${failedIds.length} session${failedIds.length === 1 ? '' : 's'} could not be deleted.`
+                            : deleteDialog.dateLabel
+                                ? `Removed all sessions from ${deleteDialog.dateLabel}.`
+                                : undefined;
+                    const combinedDescription = [successDescription, archiveNote].filter(Boolean).join(' ');
+                    toast.success(`Deleted ${deletedIds.length} session${deletedIds.length === 1 ? '' : 's'}`, {
+                        description: renderToastDescription(combinedDescription || undefined),
+                    });
+                }
+
+                if (failedIds.length > 0) {
+                    toast.error(`Failed to delete ${failedIds.length} session${failedIds.length === 1 ? '' : 's'}`, {
+                        description: renderToastDescription('Please try again in a moment.'),
+                    });
+                    if (deletedIds.length === 0) {
+                        setIsProcessingDelete(false);
+                        return;
+                    }
+                }
+            }
+
+            closeDeleteDialog();
+        } finally {
+            setIsProcessingDelete(false);
+        }
+    }, [deleteDialog, deleteDialogShouldRemoveRemote, deleteSession, deleteSessions, closeDeleteDialog, shouldArchiveWorktree]);
+
+    const worktreeManagerBody = (
+        <div className="space-y-4 w-full min-w-0">
+            {}
+            <div className="space-y-3 rounded-xl border border-border/40 bg-sidebar/60 p-3">
+                <div className="space-y-1">
+                    <p className="typography-ui-label font-medium text-foreground">Create worktree</p>
+                    <p className="typography-meta text-muted-foreground/80">
+                        Branch-specific directory under <code className="font-mono text-xs text-muted-foreground">{WORKTREE_ROOT}</code>.
+                    </p>
+                </div>
+
+                <div className="space-y-2">
+                    <label className="typography-meta font-medium text-foreground" htmlFor="worktree-branch-input">
+                        Branch name
+                    </label>
+                    <div className="flex gap-2">
+                        <Input
+                            id="worktree-branch-input"
+                            value={branchName}
+                            onChange={(e) => handleBranchInputChange(e.target.value)}
+                            placeholder="feature/new-branch"
+                            className="h-8 flex-1 typography-meta text-foreground placeholder:text-muted-foreground/70"
+                            disabled={!isGitRepo || isCheckingGitRepository}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter' && !isCreatingWorktree) {
+                                    handleCreateWorktree();
+                                }
+                            }}
+                        />
+                        <Button
+                            onClick={handleCreateWorktree}
+                            disabled={isCreatingWorktree || isLoading || !isGitRepo || !sanitizedBranchName}
+                            className="h-8"
+                        >
+                            {isCreatingWorktree ? 'Creating…' : 'Create'}
+                        </Button>
+                    </div>
+                    {sanitizedBranchName && (
+                        <p className="typography-micro text-muted-foreground/70">
+                            Creates branch{' '}
+                            <code className="font-mono text-xs text-muted-foreground">{sanitizedBranchName}</code>
+                            {' '}at{' '}
+                            <code className="font-mono text-xs text-muted-foreground break-all">
+                                {formatPathForDisplay(worktreePreviewPath, homeDirectory)}
+                            </code>
+                        </p>
+                    )}
+                </div>
+
+                {worktreeError && <p className="typography-meta text-destructive">{worktreeError}</p>}
+                {!isGitRepo && !isCheckingGitRepository && (
+                    <p className="typography-meta text-muted-foreground/70">
+                        Current directory is not a Git repository.
+                    </p>
+                )}
+            </div>
+
+            {}
+            <div className="space-y-3 rounded-xl border border-border/40 bg-sidebar/60 p-3 overflow-hidden min-w-0">
+                <div className="space-y-1">
+                    <p className="typography-ui-label font-medium text-foreground">Existing worktrees</p>
+                </div>
+
+                {isLoadingWorktrees ? (
+                    <p className="typography-meta text-muted-foreground/70">Loading worktrees…</p>
+                ) : availableWorktrees.length === 0 ? (
+                    <p className="typography-meta text-muted-foreground/70">
+                        No worktrees found under <code className="font-mono text-xs text-muted-foreground">{WORKTREE_ROOT}</code>.
+                    </p>
+                ) : (
+                    <div className="space-y-1.5 min-w-0">
+                        {availableWorktrees.map((worktree) => {
+
+                            const relativePath = worktree.relativePath
+                                || (worktree.path.startsWith(projectDirectory + '/')
+                                    ? worktree.path.slice(projectDirectory.length + 1)
+                                    : worktree.path);
+                            return (
+                                <div
+                                    key={worktree.path}
+                                    className="flex items-center gap-2 rounded-lg border border-border/30 bg-sidebar-accent/20 px-3 py-2 min-w-0"
+                                >
+                                    <div className="flex-1 min-w-0">
+                                        <p className="typography-meta font-medium text-foreground">
+                                            {worktree.label || worktree.branch || 'Detached HEAD'}
+                                        </p>
+                                        <p className="typography-micro text-muted-foreground/70 break-all">
+                                            {relativePath}
+                                        </p>
+                                    </div>
+                                    <button
+                                        type="button"
+                                        onClick={() => handleDeleteWorktree(worktree)}
+                                        className="flex-shrink-0 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                                        aria-label={`Delete worktree ${worktree.branch || worktree.label}`}
+                                    >
+                                        <RiDeleteBinLine className="h-4 w-4" />
+                                    </button>
+                                </div>
+                            );
+                        })}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+
+    const worktreeManagerActions = (
+        <Button
+            variant="ghost"
+            onClick={() => setSessionCreateDialogOpen(false)}
+            disabled={isCreatingWorktree}
+        >
+            Close
+        </Button>
+    );
+
+    const targetWorktree = deleteDialog?.worktree ?? deleteDialogSummaries[0]?.metadata ?? null;
+    const deleteDialogDescription = deleteDialog
+        ? deleteDialog.mode === 'worktree'
+            ? `This removes the selected worktree and ${deleteDialog.sessions.length === 1 ? '1 linked session' : `${deleteDialog.sessions.length} linked sessions`}.`
+            : `This action permanently removes ${deleteDialog.sessions.length === 1 ? '1 session' : `${deleteDialog.sessions.length} sessions`}${deleteDialog.dateLabel ? ` from ${deleteDialog.dateLabel}` : ''
+            }.`
+        : '';
+
+    const deleteDialogBody = deleteDialog ? (
+        <div className="space-y-2">
+            <div className="space-y-1.5 rounded-xl border border-border/40 bg-sidebar/60 p-3">
+                <ul className="space-y-0.5">
+                    {deleteDialog.sessions.slice(0, 3).map((session) => (
+                        <li key={session.id} className="typography-micro text-muted-foreground/80">
+                            {session.title || 'Untitled Session'}
+                        </li>
+                    ))}
+                    {deleteDialog.sessions.length > 3 && (
+                        <li className="typography-micro text-muted-foreground/70">
+                            +{deleteDialog.sessions.length - 3} more
+                        </li>
+                    )}
+                </ul>
+            </div>
+
+            {isWorktreeDelete ? (
+                <div className="space-y-2 rounded-xl border border-border/40 bg-sidebar/60 p-3">
+                    <div className="flex items-center gap-2">
+                        <span className="typography-meta font-medium text-foreground">Worktree</span>
+                        {targetWorktree?.label ? (
+                            <span className="typography-micro text-muted-foreground/70">{targetWorktree.label}</span>
+                        ) : null}
+                    </div>
+                    <p className="typography-micro text-muted-foreground/80 break-all">
+                        {targetWorktree ? formatPathForDisplay(targetWorktree.path, homeDirectory) : 'Worktree path unavailable.'}
+                    </p>
+                    {hasDirtyWorktrees && (
+                        <p className="typography-micro text-warning">Uncommitted changes will be discarded.</p>
+                    )}
+
+                    {canRemoveRemoteBranches ? (
+                        <button
+                            type="button"
+                            onClick={() => {
+                                if (removeRemoteOptionDisabled) {
+                                    return;
+                                }
+                                setDeleteDialogShouldRemoveRemote((prev) => !prev);
+                            }}
+                            disabled={removeRemoteOptionDisabled}
+                            className={cn(
+                                'flex w-full items-start gap-3 rounded-xl border border-border/40 bg-sidebar/70 px-3 py-2 text-left',
+                                removeRemoteOptionDisabled
+                                    ? 'cursor-not-allowed opacity-60'
+                                    : 'hover:bg-sidebar/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary'
+                            )}
+                        >
+                            <span className="mt-0.5 flex size-5 items-center justify-center text-muted-foreground">
+                                {deleteDialogShouldRemoveRemote ? (
+                                    <RiCheckboxLine className="size-4 text-primary" />
+                                ) : (
+                                    <RiCheckboxBlankLine className="size-4" />
+                                )}
+                            </span>
+                            <div className="flex-1 space-y-1">
+                                <span className="typography-meta font-medium text-foreground">Delete remote branch</span>
+                                <p className="typography-micro text-muted-foreground/70">
+                                    {deleteDialogShouldRemoveRemote
+                                        ? 'Remote branch on origin will also be removed.'
+                                        : 'Keep the remote branch intact.'}
+                                </p>
+                            </div>
+                        </button>
+                    ) : (
+                        <p className="typography-micro text-muted-foreground/70">
+                            Remote branch information unavailable for this worktree.
+                        </p>
+                    )}
+                </div>
+            ) : (
+                <div className="rounded-xl border border-border/40 bg-sidebar/60 p-3">
+                    <p className="typography-meta text-muted-foreground/80">
+                        Worktree directories stay intact. Subsessions linked to the selected sessions will also be removed.
+                    </p>
+                </div>
+            )}
+        </div>
+    ) : null;
+
+    const deleteDialogActions = (
+        <>
+            <Button variant="ghost" onClick={closeDeleteDialog} disabled={isProcessingDelete}>
+                Cancel
+            </Button>
+            <Button variant="destructive" onClick={handleConfirmDelete} disabled={isProcessingDelete}>
+                {isProcessingDelete
+                    ? 'Deleting…'
+                    : isWorktreeDelete
+                        ? 'Delete worktree'
+                        : deleteDialog?.sessions.length === 1
+                            ? 'Delete session'
+                            : 'Delete sessions'}
+            </Button>
+        </>
+    );
+
+    return (
+        <>
+            {useMobileOverlay ? (
+                <MobileOverlayPanel
+                    open={isSessionCreateDialogOpen}
+                    onClose={() => setSessionCreateDialogOpen(false)}
+                    title="Worktree Manager"
+                    footer={<div className="flex justify-end gap-2">{worktreeManagerActions}</div>}
+                >
+                    <div className="space-y-2 pb-2">
+                        {worktreeManagerBody}
+                    </div>
+                </MobileOverlayPanel>
+            ) : (
+                <Dialog open={isSessionCreateDialogOpen} onOpenChange={setSessionCreateDialogOpen}>
+                    <DialogContent className="max-w-[min(520px,100vw-2rem)] space-y-2 pb-2 overflow-hidden">
+                        <DialogHeader>
+                            <DialogTitle>Worktree Manager</DialogTitle>
+                        </DialogHeader>
+                        {worktreeManagerBody}
+                        <DialogFooter className="mt-2 gap-2 pt-1 pb-1">{worktreeManagerActions}</DialogFooter>
+                    </DialogContent>
+                </Dialog>
+            )}
+
+            {useMobileOverlay ? (
+                <MobileOverlayPanel
+                    open={Boolean(deleteDialog)}
+                    onClose={() => {
+                        if (isProcessingDelete) {
+                            return;
+                        }
+                        closeDeleteDialog();
+                    }}
+                    title={deleteDialog?.sessions.length === 1 ? 'Delete session' : 'Delete sessions'}
+                    footer={<div className="flex justify-end gap-2">{deleteDialogActions}</div>}
+                >
+                    <div className="space-y-2 pb-2">
+                        {deleteDialogDescription && (
+                            <p className="typography-meta text-muted-foreground/80">{deleteDialogDescription}</p>
+                        )}
+                        {deleteDialogBody}
+                    </div>
+                </MobileOverlayPanel>
+            ) : (
+                <Dialog
+                    open={Boolean(deleteDialog)}
+                    onOpenChange={(open) => {
+                        if (!open) {
+                            if (isProcessingDelete) {
+                                return;
+                            }
+                            closeDeleteDialog();
+                        }
+                    }}
+                >
+                    <DialogContent className="max-w-[min(520px,100vw-2rem)] space-y-2 pb-2">
+                        <DialogHeader>
+                            <DialogTitle>{deleteDialog?.sessions.length === 1 ? 'Delete session' : 'Delete sessions'}</DialogTitle>
+                            {deleteDialogDescription && <DialogDescription>{deleteDialogDescription}</DialogDescription>}
+                        </DialogHeader>
+                        {deleteDialogBody}
+                        <DialogFooter className="mt-2 gap-2 pt-1 pb-1">{deleteDialogActions}</DialogFooter>
+                    </DialogContent>
+                </Dialog>
+            )}
+
+            <DirectoryExplorerDialog
+                open={isDirectoryDialogOpen}
+                onOpenChange={setIsDirectoryDialogOpen}
+            />
+        </>
+    );
+};
diff --git a/packages/ui/src/components/session/SessionSidebar.tsx b/packages/ui/src/components/session/SessionSidebar.tsx
new file mode 100644
index 00000000..7ce3615f
--- /dev/null
+++ b/packages/ui/src/components/session/SessionSidebar.tsx
@@ -0,0 +1,1074 @@
+import React from 'react';
+import type { Session } from '@opencode-ai/sdk';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import {
+  RiAddLine,
+  RiArrowDownSLine,
+  RiArrowRightSLine,
+  RiCheckLine,
+  RiCloseLine,
+  RiDeleteBinLine,
+  RiErrorWarningLine,
+  RiFileCopyLine,
+  RiFolder6Line,
+  RiGitRepositoryLine,
+  RiLinkUnlinkM,
+  RiMore2Line,
+  RiPencilAiLine,
+  RiShare2Line,
+} from '@remixicon/react';
+import { sessionEvents } from '@/lib/sessionEvents';
+import { formatDirectoryName, formatPathForDisplay, cn } from '@/lib/utils';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { useConfigStore } from '@/stores/useConfigStore';
+import type { WorktreeMetadata } from '@/types/worktree';
+import { opencodeClient } from '@/lib/opencode/client';
+import { checkIsGitRepository } from '@/lib/gitApi';
+import { getSafeStorage } from '@/stores/utils/safeStorage';
+
+const WORKTREE_ROOT = '.openchamber';
+const GROUP_COLLAPSE_STORAGE_KEY = 'oc.sessions.groupCollapse';
+const SESSION_EXPANDED_STORAGE_KEY = 'oc.sessions.expandedParents';
+
+const formatDateLabel = (value: string | number) => {
+  const targetDate = new Date(value);
+  const today = new Date();
+  const isSameDay = (a: Date, b: Date) =>
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate();
+
+  const yesterday = new Date(today);
+  yesterday.setDate(today.getDate() - 1);
+
+  if (isSameDay(targetDate, today)) {
+    return 'Today';
+  }
+  if (isSameDay(targetDate, yesterday)) {
+    return 'Yesterday';
+  }
+  const formatted = targetDate.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+  return formatted.replace(',', '');
+};
+
+const normalizePath = (value?: string | null) => {
+  if (!value) {
+    return null;
+  }
+  const normalized = value.replace(/\\/g, '/').replace(/\/+$/, '');
+  return normalized.length === 0 ? '/' : normalized;
+};
+
+const deriveProjectRoot = (directory: string | null, metadata: Map<string, WorktreeMetadata>): string | null => {
+  const normalized = normalizePath(directory);
+  const firstMetadata = Array.from(metadata.values())[0];
+  if (firstMetadata?.projectDirectory) {
+    return normalizePath(firstMetadata.projectDirectory);
+  }
+  if (!normalized) {
+    return null;
+  }
+  const marker = `/${WORKTREE_ROOT}`;
+  const markerIndex = normalized.indexOf(marker);
+  if (markerIndex > 0) {
+    return normalized.slice(0, markerIndex);
+  }
+  return normalized;
+};
+
+type SessionNode = {
+  session: Session;
+  children: SessionNode[];
+};
+
+type SessionGroup = {
+  id: string;
+  label: string;
+  description: string | null;
+  isMain: boolean;
+  worktree: WorktreeMetadata | null;
+  directory: string | null;
+  sessions: SessionNode[];
+};
+
+interface SessionSidebarProps {
+  mobileVariant?: boolean;
+}
+
+export const SessionSidebar: React.FC<SessionSidebarProps> = ({ mobileVariant = false }) => {
+  const [editingId, setEditingId] = React.useState<string | null>(null);
+  const [editTitle, setEditTitle] = React.useState('');
+  const [copiedSessionId, setCopiedSessionId] = React.useState<string | null>(null);
+  const copyTimeout = React.useRef<number | null>(null);
+  const [expandedParents, setExpandedParents] = React.useState<Set<string>>(new Set());
+  const [directoryStatus, setDirectoryStatus] = React.useState<Map<string, 'unknown' | 'exists' | 'missing'>>(
+    () => new Map(),
+  );
+  const checkingDirectories = React.useRef<Set<string>>(new Set());
+  const safeStorage = React.useMemo(() => getSafeStorage(), []);
+  const [isCreatingSession, setIsCreatingSession] = React.useState(false);
+  const [collapsedGroups, setCollapsedGroups] = React.useState<Set<string>>(new Set());
+  const [isGitRepo, setIsGitRepo] = React.useState<boolean | null>(null);
+  const [expandedSessionGroups, setExpandedSessionGroups] = React.useState<Set<string>>(new Set());
+  const [hoveredGroupId, setHoveredGroupId] = React.useState<string | null>(null);
+
+  const currentDirectory = useDirectoryStore((state) => state.currentDirectory);
+  const homeDirectory = useDirectoryStore((state) => state.homeDirectory);
+  const setDirectory = useDirectoryStore((state) => state.setDirectory);
+
+  const agents = useConfigStore((state) => state.agents);
+
+  const getSessionsByDirectory = useSessionStore((state) => state.getSessionsByDirectory);
+  const currentSessionId = useSessionStore((state) => state.currentSessionId);
+  const setCurrentSession = useSessionStore((state) => state.setCurrentSession);
+  const updateSessionTitle = useSessionStore((state) => state.updateSessionTitle);
+  const shareSession = useSessionStore((state) => state.shareSession);
+  const unshareSession = useSessionStore((state) => state.unshareSession);
+  const sessionMemoryState = useSessionStore((state) => state.sessionMemoryState);
+  const sessionActivityPhase = useSessionStore((state) => state.sessionActivityPhase);
+  const worktreeMetadata = useSessionStore((state) => state.worktreeMetadata);
+  const availableWorktrees = useSessionStore((state) => state.availableWorktrees);
+  const createSession = useSessionStore((state) => state.createSession);
+  const initializeNewOpenChamberSession = useSessionStore((state) => state.initializeNewOpenChamberSession);
+  const setSessionDirectory = useSessionStore((state) => state.setSessionDirectory);
+
+  const [isDesktopRuntime, setIsDesktopRuntime] = React.useState<boolean>(() => {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+    return typeof window.opencodeDesktop !== 'undefined';
+  });
+
+  React.useEffect(() => {
+    try {
+      const storedGroups = safeStorage.getItem(GROUP_COLLAPSE_STORAGE_KEY);
+      if (storedGroups) {
+        const parsed = JSON.parse(storedGroups);
+        if (Array.isArray(parsed)) {
+          setCollapsedGroups(new Set(parsed.filter((item) => typeof item === 'string')));
+        }
+      }
+      const storedParents = safeStorage.getItem(SESSION_EXPANDED_STORAGE_KEY);
+      if (storedParents) {
+        const parsed = JSON.parse(storedParents);
+        if (Array.isArray(parsed)) {
+          setExpandedParents(new Set(parsed.filter((item) => typeof item === 'string')));
+        }
+      }
+    } catch { /* ignored */ }
+  }, [safeStorage]);
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    setIsDesktopRuntime(typeof window.opencodeDesktop !== 'undefined');
+  }, []);
+
+  const sessions = getSessionsByDirectory(currentDirectory);
+  const sortedSessions = React.useMemo(() => {
+    return [...sessions].sort((a, b) => (b.time?.created || 0) - (a.time?.created || 0));
+  }, [sessions]);
+
+  React.useEffect(() => {
+    if (!currentDirectory) {
+      setIsGitRepo(null);
+      return;
+    }
+    let cancelled = false;
+    checkIsGitRepository(currentDirectory)
+      .then((result) => {
+        if (!cancelled) {
+          setIsGitRepo(result);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setIsGitRepo(null);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [currentDirectory]);
+
+  const sessionMap = React.useMemo(() => {
+    return new Map(sortedSessions.map((session) => [session.id, session]));
+  }, [sortedSessions]);
+
+  const parentMap = React.useMemo(() => {
+    const map = new Map<string, string>();
+    sortedSessions.forEach((session) => {
+      const parentID = (session as Session & { parentID?: string | null }).parentID;
+      if (parentID) {
+        map.set(session.id, parentID);
+      }
+    });
+    return map;
+  }, [sortedSessions]);
+
+  const childrenMap = React.useMemo(() => {
+    const map = new Map<string, Session[]>();
+    sortedSessions.forEach((session) => {
+      const parentID = (session as Session & { parentID?: string | null }).parentID;
+      if (!parentID) {
+        return;
+      }
+      const collection = map.get(parentID) ?? [];
+      collection.push(session);
+      map.set(parentID, collection);
+    });
+    map.forEach((list) => list.sort((a, b) => (b.time?.created || 0) - (a.time?.created || 0)));
+    return map;
+  }, [sortedSessions]);
+
+  React.useEffect(() => {
+    if (!currentSessionId) {
+      return;
+    }
+    setExpandedParents((previous) => {
+      const next = new Set(previous);
+      let cursor = parentMap.get(currentSessionId) || null;
+      let changed = false;
+      while (cursor) {
+        if (!next.has(cursor)) {
+          next.add(cursor);
+          changed = true;
+        }
+        cursor = parentMap.get(cursor) || null;
+      }
+      return changed ? next : previous;
+    });
+  }, [currentSessionId, parentMap]);
+
+  const projectRoot = React.useMemo(
+    () => deriveProjectRoot(currentDirectory, worktreeMetadata),
+    [currentDirectory, worktreeMetadata],
+  );
+
+  React.useEffect(() => {
+    const directories = new Set<string>();
+    sortedSessions.forEach((session) => {
+      const dir = normalizePath((session as Session & { directory?: string | null }).directory ?? null);
+      if (dir) {
+        directories.add(dir);
+      }
+    });
+    if (projectRoot) {
+      directories.add(projectRoot);
+    }
+
+    directories.forEach((directory) => {
+      const known = directoryStatus.get(directory);
+      if ((known && known !== 'unknown') || checkingDirectories.current.has(directory)) {
+        return;
+      }
+      checkingDirectories.current.add(directory);
+      opencodeClient
+        .listLocalDirectory(directory)
+        .then(() => {
+          setDirectoryStatus((prev) => {
+            const next = new Map(prev);
+            if (next.get(directory) === 'exists') {
+              return prev;
+            }
+            next.set(directory, 'exists');
+            return next;
+          });
+        })
+        .catch(() => {
+          setDirectoryStatus((prev) => {
+            const next = new Map(prev);
+            if (next.get(directory) === 'missing') {
+              return prev;
+            }
+            next.set(directory, 'missing');
+            return next;
+          });
+        })
+        .finally(() => {
+          checkingDirectories.current.delete(directory);
+        });
+    });
+  }, [sortedSessions, projectRoot, directoryStatus]);
+
+  React.useEffect(() => {
+    return () => {
+      if (copyTimeout.current) {
+        clearTimeout(copyTimeout.current);
+      }
+    };
+  }, []);
+
+  const displayDirectory = React.useMemo(
+    () => formatDirectoryName(currentDirectory, homeDirectory),
+    [currentDirectory, homeDirectory],
+  );
+
+  const directoryTooltip = React.useMemo(
+    () => formatPathForDisplay(currentDirectory, homeDirectory),
+    [currentDirectory, homeDirectory],
+  );
+
+  const emptyState = (
+    <div className="py-6 text-center text-muted-foreground">
+      <p className="typography-ui-label font-semibold">No sessions yet</p>
+      <p className="typography-meta mt-1">Create your first session to start coding.</p>
+    </div>
+  );
+
+  const handleSessionSelect = React.useCallback(
+    (sessionId: string, disabled?: boolean) => {
+      if (disabled) {
+        return;
+      }
+      setCurrentSession(sessionId);
+    },
+    [setCurrentSession],
+  );
+
+  const handleSaveEdit = React.useCallback(async () => {
+    if (editingId && editTitle.trim()) {
+      await updateSessionTitle(editingId, editTitle.trim());
+      setEditingId(null);
+      setEditTitle('');
+    }
+  }, [editingId, editTitle, updateSessionTitle]);
+
+  const handleCancelEdit = React.useCallback(() => {
+    setEditingId(null);
+    setEditTitle('');
+  }, []);
+
+  const handleShareSession = React.useCallback(
+    async (session: Session) => {
+      const result = await shareSession(session.id);
+      if (result && result.share?.url) {
+        toast.success('Session shared', {
+          description: 'You can copy the link from the menu.',
+        });
+      } else {
+        toast.error('Unable to share session');
+      }
+    },
+    [shareSession],
+  );
+
+  const handleCopyShareUrl = React.useCallback((url: string, sessionId: string) => {
+    navigator.clipboard
+      .writeText(url)
+      .then(() => {
+        setCopiedSessionId(sessionId);
+        if (copyTimeout.current) {
+          clearTimeout(copyTimeout.current);
+        }
+        copyTimeout.current = window.setTimeout(() => {
+          setCopiedSessionId(null);
+          copyTimeout.current = null;
+        }, 2000);
+      })
+      .catch(() => {
+        toast.error('Failed to copy URL');
+      });
+  }, []);
+
+  const handleUnshareSession = React.useCallback(
+    async (sessionId: string) => {
+      const result = await unshareSession(sessionId);
+      if (result) {
+        toast.success('Session unshared');
+      } else {
+        toast.error('Unable to unshare session');
+      }
+    },
+    [unshareSession],
+  );
+
+  const collectDescendants = React.useCallback(
+    (sessionId: string): Session[] => {
+      const collected: Session[] = [];
+      const visit = (id: string) => {
+        const children = childrenMap.get(id) ?? [];
+        children.forEach((child) => {
+          collected.push(child);
+          visit(child.id);
+        });
+      };
+      visit(sessionId);
+      return collected;
+    },
+    [childrenMap],
+  );
+
+  const deleteSession = useSessionStore((state) => state.deleteSession);
+  const deleteSessions = useSessionStore((state) => state.deleteSessions);
+
+  const handleDeleteSession = React.useCallback(
+    async (session: Session) => {
+      const descendants = collectDescendants(session.id);
+      if (descendants.length === 0) {
+
+        const success = await deleteSession(session.id);
+        if (success) {
+          toast.success('Session deleted');
+        } else {
+          toast.error('Failed to delete session');
+        }
+      } else {
+
+        const ids = [session.id, ...descendants.map((s) => s.id)];
+        const { deletedIds, failedIds } = await deleteSessions(ids);
+        if (deletedIds.length > 0) {
+          toast.success(`Deleted ${deletedIds.length} session${deletedIds.length === 1 ? '' : 's'}`);
+        }
+        if (failedIds.length > 0) {
+          toast.error(`Failed to delete ${failedIds.length} session${failedIds.length === 1 ? '' : 's'}`);
+        }
+      }
+    },
+    [collectDescendants, deleteSession, deleteSessions],
+  );
+
+  const handleCreateSessionInGroup = React.useCallback(
+    async (directory: string | null) => {
+      if (!directory) {
+        toast.error('No directory available for session creation');
+        return;
+      }
+      if (isCreatingSession) {
+        return;
+      }
+      try {
+        setIsCreatingSession(true);
+        const session = await createSession(undefined, directory);
+        if (!session) {
+          toast.error('Failed to create session');
+          return;
+        }
+        initializeNewOpenChamberSession(session.id, agents);
+        setSessionDirectory(session.id, directory);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Failed to create session';
+        toast.error(message);
+      } finally {
+        setIsCreatingSession(false);
+      }
+    },
+    [createSession, initializeNewOpenChamberSession, setSessionDirectory, agents, isCreatingSession],
+  );
+
+  const handleOpenWorktreeManager = React.useCallback(() => {
+    sessionEvents.requestCreate({ worktreeMode: 'create' });
+  }, []);
+
+  const handleOpenDirectoryDialog = React.useCallback(() => {
+    if (isDesktopRuntime && window.opencodeDesktop?.requestDirectoryAccess) {
+      window.opencodeDesktop
+        .requestDirectoryAccess('')
+        .then((result) => {
+          if (result.success && result.path) {
+            setDirectory(result.path, { showOverlay: true });
+          } else if (result.error && result.error !== 'Directory selection cancelled') {
+            toast.error('Failed to select directory', {
+              description: result.error,
+            });
+          }
+        })
+        .catch((error) => {
+          console.error('Desktop: Error selecting directory:', error);
+          toast.error('Failed to select directory');
+        });
+    } else {
+      sessionEvents.requestDirectoryDialog();
+    }
+  }, [isDesktopRuntime, setDirectory]);
+
+  const toggleParent = React.useCallback((sessionId: string) => {
+    setExpandedParents((prev) => {
+      const next = new Set(prev);
+      if (next.has(sessionId)) {
+        next.delete(sessionId);
+      } else {
+        next.add(sessionId);
+      }
+      try {
+        safeStorage.setItem(SESSION_EXPANDED_STORAGE_KEY, JSON.stringify(Array.from(next)));
+      } catch { /* ignored */ }
+      return next;
+    });
+  }, [safeStorage]);
+
+  const buildNode = React.useCallback(
+    (session: Session): SessionNode => {
+      const children = childrenMap.get(session.id) ?? [];
+      return {
+        session,
+        children: children.map((child) => buildNode(child)),
+      };
+    },
+    [childrenMap],
+  );
+
+  const groupedSessions = React.useMemo<SessionGroup[]>(() => {
+    const groups = new Map<string, SessionGroup>();
+    const normalizedProjectRoot = normalizePath(projectRoot ?? null);
+
+    const worktreeByPath = new Map<string, WorktreeMetadata>();
+    const existingWorktreePaths = new Set<string>();
+    availableWorktrees.forEach((meta) => {
+      if (meta.path) {
+        const normalized = normalizePath(meta.path) ?? meta.path;
+        existingWorktreePaths.add(normalized);
+        worktreeByPath.set(normalized, meta);
+      }
+    });
+
+    const ensureGroup = (session: Session) => {
+      const sessionDirectory = normalizePath((session as Session & { directory?: string | null }).directory ?? null);
+
+      const sessionWorktreeMeta = worktreeMetadata.get(session.id);
+      const sessionWorktreeExists = sessionWorktreeMeta?.path
+        ? existingWorktreePaths.has(normalizePath(sessionWorktreeMeta.path) ?? sessionWorktreeMeta.path)
+        : false;
+      const worktree =
+        (sessionWorktreeExists ? sessionWorktreeMeta : null) ??
+        (sessionDirectory ? worktreeByPath.get(sessionDirectory) ?? null : null);
+      const isMain =
+        !worktree &&
+        ((sessionDirectory && normalizedProjectRoot
+          ? sessionDirectory === normalizedProjectRoot
+          : !sessionDirectory && Boolean(normalizedProjectRoot)));
+      const key = isMain ? 'main' : worktree?.path ?? sessionDirectory ?? session.id;
+      const directory = worktree?.path ?? sessionDirectory ?? normalizedProjectRoot ?? null;
+      if (!groups.has(key)) {
+        const label = isMain
+          ? 'Main workspace'
+          : worktree?.label || worktree?.branch || formatDirectoryName(directory || '', homeDirectory) || 'Worktree';
+        const description = worktree?.relativePath
+          ? formatPathForDisplay(worktree.relativePath, homeDirectory)
+          : directory
+            ? formatPathForDisplay(directory, homeDirectory)
+            : null;
+        groups.set(key, {
+          id: key,
+          label,
+          description,
+          isMain,
+          worktree,
+          directory,
+          sessions: [],
+        });
+      }
+      return groups.get(key)!;
+    };
+
+    const roots = sortedSessions.filter((session) => {
+      const parentID = (session as Session & { parentID?: string | null }).parentID;
+      if (!parentID) {
+        return true;
+      }
+      return !sessionMap.has(parentID);
+    });
+
+    roots.forEach((session) => {
+      const group = ensureGroup(session);
+      const node = buildNode(session);
+      group.sessions.push(node);
+    });
+
+    if (!groups.has('main')) {
+      groups.set('main', {
+        id: 'main',
+        label: 'Main workspace',
+        description: normalizedProjectRoot ? formatPathForDisplay(normalizedProjectRoot, homeDirectory) : null,
+        isMain: true,
+        worktree: null,
+        directory: normalizedProjectRoot,
+        sessions: [],
+      });
+    }
+
+    worktreeByPath.forEach((meta, path) => {
+      const key = meta.path;
+      if (!groups.has(key)) {
+        groups.set(key, {
+          id: key,
+          label: meta.label || meta.branch || formatDirectoryName(path, homeDirectory) || 'Worktree',
+          description: meta.relativePath
+            ? formatPathForDisplay(meta.relativePath, homeDirectory)
+            : formatPathForDisplay(path, homeDirectory),
+          isMain: false,
+          worktree: meta,
+          directory: path,
+          sessions: [],
+        });
+      }
+    });
+
+    groups.forEach((group) => {
+      group.sessions.sort((a, b) => (b.session.time?.created || 0) - (a.session.time?.created || 0));
+    });
+
+    return Array.from(groups.values()).sort((a, b) => {
+      if (a.isMain !== b.isMain) {
+        return a.isMain ? -1 : 1;
+      }
+      return (a.label || '').localeCompare(b.label || '');
+    });
+  }, [sortedSessions, worktreeMetadata, availableWorktrees, projectRoot, homeDirectory, buildNode, sessionMap]);
+
+  const toggleGroup = React.useCallback((groupId: string) => {
+    setCollapsedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupId)) {
+        next.delete(groupId);
+      } else {
+        next.add(groupId);
+      }
+      try {
+        safeStorage.setItem(GROUP_COLLAPSE_STORAGE_KEY, JSON.stringify(Array.from(next)));
+      } catch { /* ignored */ }
+      return next;
+    });
+  }, [safeStorage]);
+
+  const toggleGroupSessionLimit = React.useCallback((groupId: string) => {
+    setExpandedSessionGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupId)) {
+        next.delete(groupId);
+      } else {
+        next.add(groupId);
+      }
+      return next;
+    });
+  }, []);
+
+  const renderSessionNode = React.useCallback(
+    (node: SessionNode, depth = 0, groupDirectory?: string | null): React.ReactNode => {
+      const session = node.session;
+      const sessionDirectory =
+        normalizePath((session as Session & { directory?: string | null }).directory ?? null) ??
+        normalizePath(groupDirectory ?? null);
+      const directoryState = sessionDirectory ? directoryStatus.get(sessionDirectory) : null;
+      const isMissingDirectory = directoryState === 'missing';
+      const memoryState = sessionMemoryState.get(session.id);
+      const isActive = currentSessionId === session.id;
+      const sessionTitle = session.title || 'Untitled Session';
+      const hasChildren = node.children.length > 0;
+      const isExpanded = expandedParents.has(session.id);
+      const additions = session.summary?.additions;
+      const deletions = session.summary?.deletions;
+      const hasSummary = typeof additions === 'number' || typeof deletions === 'number';
+
+      if (editingId === session.id) {
+        return (
+          <div key={session.id} className="flex flex-col rounded-lg border border-transparent px-2 py-2">
+            <form
+              className="flex w-full items-center justify-between gap-2"
+              onSubmit={(event) => {
+                event.preventDefault();
+                handleSaveEdit();
+              }}
+            >
+              <Input
+                value={editTitle}
+                onChange={(event) => setEditTitle(event.target.value)}
+                className="h-7 flex-1 border-none bg-transparent px-0 py-0 typography-micro focus-visible:ring-0 focus-visible:ring-offset-0"
+                autoFocus
+                placeholder="Rename session"
+                onKeyDown={(event) => {
+                  if (event.key === 'Escape') handleCancelEdit();
+                }}
+              />
+              <div className="flex items-center gap-1">
+                <Button size="icon" variant="ghost" className="h-6 w-6 p-0" type="submit">
+                  <RiCheckLine className="h-4 w-4" />
+                </Button>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="h-6 w-6 p-0"
+                  type="button"
+                  onClick={handleCancelEdit}
+                >
+                  <RiCloseLine className="h-4 w-4" />
+                </Button>
+              </div>
+            </form>
+            <div className="flex items-center gap-2 pt-1 typography-micro text-muted-foreground/70 overflow-hidden">
+              <span className="flex-shrink-0">{formatDateLabel(session.time?.created || Date.now())}</span>
+              {session.share && (
+                <RiShare2Line className="h-3 w-3 text-[color:var(--status-info)] flex-shrink-0" />
+              )}
+            </div>
+          </div>
+        );
+      }
+
+      const phase = sessionActivityPhase?.get(session.id) ?? 'idle';
+      const isStreaming = phase === 'busy' || phase === 'cooldown';
+
+      const streamingIndicator = (() => {
+        if (!memoryState) return null;
+        if (memoryState.isZombie) {
+          return <RiErrorWarningLine className="h-4 w-4 text-warning" />;
+        }
+        return null;
+      })();
+
+      return (
+        <React.Fragment key={session.id}>
+          <div
+            className={cn(
+              'group relative flex items-center rounded-md px-1.5 py-1',
+              isActive ? 'dark:bg-accent/80 bg-primary/12' : 'hover:dark:bg-accent/40 hover:bg-primary/6',
+              isMissingDirectory ? 'opacity-75' : '',
+              depth > 0 && 'pl-[20px]',
+            )}
+          >
+            <div className="flex min-w-0 flex-1 items-center">
+              <button
+                type="button"
+                disabled={isMissingDirectory}
+                onClick={() => handleSessionSelect(session.id, isMissingDirectory)}
+                className={cn(
+                  'flex min-w-0 flex-1 flex-col gap-0 rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 text-foreground',
+                )}
+              >
+                {}
+                <div className="flex items-center gap-2 min-w-0">
+                  <span
+                    className={cn(
+                      'truncate typography-ui-label font-normal text-foreground',
+                      isStreaming && 'animate-pulse [animation-duration:1.8s]'
+                    )}
+                  >
+                    {sessionTitle}
+                  </span>
+                </div>
+
+                {}
+                <div className="flex items-center gap-2 typography-micro text-muted-foreground/60 min-w-0 overflow-hidden leading-tight">
+                  {hasChildren ? (
+                    <span
+                      role="button"
+                      tabIndex={0}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        toggleParent(session.id);
+                      }}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          toggleParent(session.id);
+                        }
+                      }}
+                      className="inline-flex items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 flex-shrink-0 rounded-sm"
+                      aria-label={isExpanded ? 'Collapse subsessions' : 'Expand subsessions'}
+                    >
+                      {isExpanded ? (
+                        <RiArrowDownSLine className="h-3 w-3" />
+                      ) : (
+                        <RiArrowRightSLine className="h-3 w-3" />
+                      )}
+                    </span>
+                  ) : null}
+                  <span className="flex-shrink-0">{formatDateLabel(session.time?.created || Date.now())}</span>
+                  {session.share ? (
+                    <RiShare2Line className="h-3 w-3 text-[color:var(--status-info)] flex-shrink-0" />
+                  ) : null}
+                  {hasSummary && ((additions ?? 0) !== 0 || (deletions ?? 0) !== 0) ? (
+                    <span className="flex-shrink-0 text-[0.7rem] leading-none">
+                      <span className="text-[color:var(--status-success)]">+{Math.max(0, additions ?? 0)}</span>
+                      <span className="text-muted-foreground/50">/</span>
+                      <span className="text-destructive">-{Math.max(0, deletions ?? 0)}</span>
+                    </span>
+                  ) : null}
+                  {hasChildren ? (
+                    <span className="truncate">
+                      {node.children.length} {node.children.length === 1 ? 'task' : 'tasks'}
+                    </span>
+                  ) : null}
+                  {isMissingDirectory ? (
+                    <span className="inline-flex items-center gap-0.5 text-warning flex-shrink-0">
+                      <RiErrorWarningLine className="h-3 w-3" />
+                      Missing
+                    </span>
+                  ) : null}
+                </div>
+              </button>
+
+              <div className="flex items-center gap-1.5 self-stretch">
+                {streamingIndicator}
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      type="button"
+                      className={cn(
+                        'inline-flex h-3.5 w-[18px] items-center justify-center rounded-md text-muted-foreground transition-opacity opacity-0 group-hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+                      )}
+                      aria-label="Session menu"
+                      onClick={(event) => event.stopPropagation()}
+                      onKeyDown={(event) => event.stopPropagation()}
+                    >
+                      <RiMore2Line className={mobileVariant ? 'h-4 w-4' : 'h-3.5 w-3.5'} />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="min-w-[180px]">
+                    <DropdownMenuItem
+                      onClick={() => {
+                        setEditingId(session.id);
+                        setEditTitle(sessionTitle);
+                      }}
+                      className="[&>svg]:mr-1"
+                    >
+                      <RiPencilAiLine className="mr-1 h-4 w-4" />
+                      Rename
+                    </DropdownMenuItem>
+                    {!session.share ? (
+                      <DropdownMenuItem onClick={() => handleShareSession(session)} className="[&>svg]:mr-1">
+                        <RiShare2Line className="mr-1 h-4 w-4" />
+                        Share
+                      </DropdownMenuItem>
+                    ) : (
+                      <>
+                        <DropdownMenuItem
+                          onClick={() => {
+                            if (session.share?.url) {
+                              handleCopyShareUrl(session.share.url, session.id);
+                            }
+                          }}
+                          className="[&>svg]:mr-1"
+                        >
+                          {copiedSessionId === session.id ? (
+                            <>
+                              <RiCheckLine className="mr-1 h-4 w-4" style={{ color: 'var(--status-success)' }} />
+                              Copied
+                            </>
+                          ) : (
+                            <>
+                              <RiFileCopyLine className="mr-1 h-4 w-4" />
+                              Copy link
+                            </>
+                          )}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => handleUnshareSession(session.id)} className="[&>svg]:mr-1">
+                          <RiLinkUnlinkM className="mr-1 h-4 w-4" />
+                          Unshare
+                        </DropdownMenuItem>
+                      </>
+                    )}
+                    <DropdownMenuItem
+                      className="text-destructive focus:text-destructive [&>svg]:mr-1"
+                      onClick={() => handleDeleteSession(session)}
+                    >
+                      <RiDeleteBinLine className="mr-1 h-4 w-4" />
+                      Remove
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
+          </div>
+          {hasChildren && isExpanded
+            ? node.children.map((child) =>
+                renderSessionNode(child, depth + 1, sessionDirectory ?? groupDirectory),
+              )
+            : null}
+        </React.Fragment>
+      );
+    },
+    [
+      directoryStatus,
+      sessionMemoryState,
+      sessionActivityPhase,
+      currentSessionId,
+      expandedParents,
+      editingId,
+      editTitle,
+      handleSaveEdit,
+      handleCancelEdit,
+      toggleParent,
+      handleSessionSelect,
+      handleShareSession,
+      handleCopyShareUrl,
+      handleUnshareSession,
+      handleDeleteSession,
+      copiedSessionId,
+      mobileVariant,
+    ],
+  );
+
+  return (
+    <div
+      className={cn(
+        'flex h-full flex-col text-foreground overflow-x-hidden',
+        mobileVariant ? '' : isDesktopRuntime ? 'bg-transparent' : 'bg-sidebar',
+      )}
+    >
+      <div className="h-14 select-none px-2 flex-shrink-0">
+        <div className="flex h-full items-center gap-0">
+          <button
+            type="button"
+            onClick={handleOpenDirectoryDialog}
+            className={cn(
+              'group flex min-w-0 flex-1 items-center gap-2 rounded-md px-0 py-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+              !isDesktopRuntime && 'hover:bg-sidebar/20',
+            )}
+            aria-label="Change project directory"
+            title={directoryTooltip || '/'}
+          >
+            <span
+              className={cn(
+                'flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground group-hover:text-foreground',
+                !isDesktopRuntime && 'bg-sidebar/60',
+              )}
+            >
+              <RiFolder6Line className="h-4 w-4" />
+            </span>
+            <div className="min-w-0 flex-1 overflow-hidden">
+              <p className="truncate whitespace-nowrap typography-ui font-semibold text-muted-foreground group-hover:text-foreground">
+                {displayDirectory || '/'}
+              </p>
+            </div>
+          </button>
+
+          {isGitRepo ? (
+            <button
+              type="button"
+              onClick={handleOpenWorktreeManager}
+              className={cn(
+                'inline-flex h-10 w-7 flex-shrink-0 items-center justify-center rounded-xl text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+                !isDesktopRuntime && 'bg-sidebar/60 hover:bg-sidebar',
+              )}
+              aria-label="Manage worktrees"
+            >
+              <RiGitRepositoryLine className="h-5 w-5" />
+            </button>
+          ) : null}
+        </div>
+      </div>
+
+      <ScrollableOverlay
+        outerClassName="flex-1 min-h-0"
+        className={cn('space-y-1 pb-1 pl-2.5 pr-1', mobileVariant ? '' : '')}
+      >
+        {groupedSessions.length === 0 ? (
+          emptyState
+        ) : (
+          groupedSessions.map((group) => (
+            <div key={group.id} className="relative">
+              {}
+              <button
+                type="button"
+                onClick={() => toggleGroup(group.id)}
+                className={cn(
+                  'sticky top-0 z-10 pt-1.5 pb-1 w-full text-left cursor-pointer group/header border-b',
+                  !isDesktopRuntime && 'bg-sidebar',
+                )}
+                style={{
+                  borderColor: hoveredGroupId === group.id
+                    ? 'var(--color-border)'
+                    : collapsedGroups.has(group.id)
+                      ? 'color-mix(in srgb, var(--color-border) 35%, transparent)'
+                      : 'var(--color-border)'
+                }}
+                onMouseEnter={() => setHoveredGroupId(group.id)}
+                onMouseLeave={() => setHoveredGroupId(null)}
+                aria-label={collapsedGroups.has(group.id) ? 'Expand group' : 'Collapse group'}
+              >
+                <div className="flex items-center justify-between gap-2 px-1">
+                  <span className="typography-micro font-medium text-muted-foreground truncate group-hover/header:text-foreground">
+                    {group.label}
+                  </span>
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    aria-disabled={isCreatingSession}
+                    className={cn(
+                      'inline-flex h-5 w-5 items-center justify-center rounded-md text-muted-foreground/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 hover:text-foreground',
+                      isCreatingSession && 'opacity-40 cursor-default',
+                    )}
+                    aria-label="Create session in this group"
+                    onClick={(e) => {
+                      if (isCreatingSession) return;
+                      e.stopPropagation();
+                      handleCreateSessionInGroup(group.directory);
+                    }}
+                    onKeyDown={(e) => {
+                      if (isCreatingSession) return;
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.stopPropagation();
+                        handleCreateSessionInGroup(group.directory);
+                      }
+                    }}
+                  >
+                    <RiAddLine className="h-4.5 w-4.5" />
+                  </span>
+                </div>
+              </button>
+
+              {}
+              {!collapsedGroups.has(group.id) ? (
+                <div className="space-y-[0.6rem] py-1">
+                  {(() => {
+                    const isExpanded = expandedSessionGroups.has(group.id);
+                    const maxVisible = 7;
+                    const totalSessions = group.sessions.length;
+                    const visibleSessions = isExpanded ? group.sessions : group.sessions.slice(0, maxVisible);
+                    const remainingCount = totalSessions - visibleSessions.length;
+
+                    return (
+                      <>
+                        {visibleSessions.map((node) => renderSessionNode(node, 0, group.directory))}
+                        {totalSessions === 0 ? (
+                          <div className="py-1 text-left typography-micro text-muted-foreground">
+                            No sessions in this worktree yet.
+                          </div>
+                        ) : null}
+                        {remainingCount > 0 && !isExpanded ? (
+                          <button
+                            type="button"
+                            onClick={() => toggleGroupSessionLimit(group.id)}
+                            className="mt-0.5 flex items-center justify-start rounded-md px-1.5 py-0.5 text-left text-xs text-muted-foreground/70 leading-tight hover:text-foreground hover:underline"
+                          >
+                            Show {remainingCount} more {remainingCount === 1 ? 'session' : 'sessions'}
+                          </button>
+                        ) : null}
+                        {isExpanded && totalSessions > maxVisible ? (
+                          <button
+                            type="button"
+                            onClick={() => toggleGroupSessionLimit(group.id)}
+                            className="mt-0.5 flex items-center justify-start rounded-md px-1.5 py-0.5 text-left text-xs text-muted-foreground/70 leading-tight hover:text-foreground hover:underline"
+                          >
+                            Show fewer sessions
+                          </button>
+                        ) : null}
+                      </>
+                    );
+                  })()}
+                </div>
+              ) : null}
+            </div>
+          ))
+        )}
+      </ScrollableOverlay>
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/terminal/TerminalViewport.tsx b/packages/ui/src/components/terminal/TerminalViewport.tsx
new file mode 100644
index 00000000..bdb228cc
--- /dev/null
+++ b/packages/ui/src/components/terminal/TerminalViewport.tsx
@@ -0,0 +1,366 @@
+import React from 'react';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import '@xterm/xterm/css/xterm.css';
+
+import type { TerminalTheme } from '@/lib/terminalTheme';
+import { getTerminalOptions } from '@/lib/terminalTheme';
+import type { TerminalChunk } from '@/stores/useTerminalStore';
+import { cn } from '@/lib/utils';
+import { OverlayScrollbar } from '@/components/ui/OverlayScrollbar';
+
+type TerminalWithCore = Terminal & {
+  _core?: {
+    dimensions?: {
+      actualCellHeight?: number;
+    };
+  };
+};
+
+type TerminalController = {
+  focus: () => void;
+  clear: () => void;
+  fit: () => void;
+};
+
+interface TerminalViewportProps {
+  sessionKey: string;
+  chunks: TerminalChunk[];
+  onInput: (data: string) => void;
+  onResize: (cols: number, rows: number) => void;
+  theme: TerminalTheme;
+  fontFamily: string;
+  fontSize: number;
+  className?: string;
+  enableTouchScroll?: boolean;
+}
+
+const TerminalViewport = React.forwardRef<TerminalController, TerminalViewportProps>(
+  (
+    { sessionKey, chunks, onInput, onResize, theme, fontFamily, fontSize, className, enableTouchScroll },
+    ref
+  ) => {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const viewportRef = React.useRef<HTMLElement | null>(null);
+    const terminalRef = React.useRef<Terminal | null>(null);
+    const fitAddonRef = React.useRef<FitAddon | null>(null);
+    const inputHandlerRef = React.useRef<(data: string) => void>(onInput);
+    const resizeHandlerRef = React.useRef<(cols: number, rows: number) => void>(onResize);
+    const writeQueueRef = React.useRef<string[]>([]);
+    const isWritingRef = React.useRef(false);
+    const processedCountRef = React.useRef(0);
+    const firstChunkIdRef = React.useRef<number | null>(null);
+    const touchScrollCleanupRef = React.useRef<(() => void) | null>(null);
+    const [, forceRender] = React.useReducer((x) => x + 1, 0);
+
+    inputHandlerRef.current = onInput;
+    resizeHandlerRef.current = onResize;
+
+    const resetWriteState = React.useCallback(() => {
+      writeQueueRef.current = [];
+      isWritingRef.current = false;
+      processedCountRef.current = 0;
+      firstChunkIdRef.current = null;
+    }, []);
+
+    const fitTerminal = React.useCallback(() => {
+      const fitAddon = fitAddonRef.current;
+      const terminal = terminalRef.current;
+      const container = containerRef.current;
+      if (!fitAddon || !terminal || !container) {
+        return;
+      }
+      const rect = container.getBoundingClientRect();
+      if (rect.width < 24 || rect.height < 24) {
+        return;
+      }
+      try {
+        fitAddon.fit();
+        resizeHandlerRef.current(terminal.cols, terminal.rows);
+      } catch { /* ignored */ }
+    }, []);
+
+    const flushWriteQueue = React.useCallback(() => {
+      if (isWritingRef.current) {
+        return;
+      }
+
+      const consumeNext = () => {
+        const term = terminalRef.current;
+        if (!term) {
+          resetWriteState();
+          return;
+        }
+
+        const chunk = writeQueueRef.current.shift();
+        if (chunk === undefined) {
+          isWritingRef.current = false;
+          return;
+        }
+
+        isWritingRef.current = true;
+        term.write(chunk, () => {
+          isWritingRef.current = false;
+          if (writeQueueRef.current.length > 0) {
+            if (typeof window !== 'undefined') {
+              window.setTimeout(consumeNext, 0);
+            } else {
+              consumeNext();
+            }
+          }
+        });
+      };
+
+      consumeNext();
+    }, [resetWriteState]);
+
+    const enqueueWrite = React.useCallback(
+      (data: string) => {
+        if (!data) {
+          return;
+        }
+        writeQueueRef.current = [data];
+        isWritingRef.current = false;
+        flushWriteQueue();
+      },
+      [flushWriteQueue]
+    );
+
+    const setupTouchScroll = React.useCallback(() => {
+      touchScrollCleanupRef.current?.();
+      touchScrollCleanupRef.current = null;
+
+      if (!enableTouchScroll) {
+        return;
+      }
+
+      const container = containerRef.current;
+      const terminal = terminalRef.current;
+      if (!container || !terminal) {
+        return;
+      }
+
+      const state = {
+        lastY: null as number | null,
+        remainder: 0,
+      };
+
+      const internalTerminal = terminal as TerminalWithCore;
+      const measuredLineHeight =
+        internalTerminal._core?.dimensions?.actualCellHeight ?? null;
+      const lineHeightEstimate =
+        (typeof measuredLineHeight === 'number' && measuredLineHeight > 0
+          ? measuredLineHeight
+          : Math.max(fontSize + 6, fontSize * 1.6));
+
+      const handleTouchStart = (event: TouchEvent) => {
+        if (event.touches.length !== 1) {
+          return;
+        }
+        state.lastY = event.touches[0].clientY;
+        state.remainder = 0;
+      };
+
+      const handleTouchMove = (event: TouchEvent) => {
+        if (event.touches.length !== 1) {
+          state.lastY = null;
+          state.remainder = 0;
+          return;
+        }
+
+        if (state.lastY === null) {
+          state.lastY = event.touches[0].clientY;
+          return;
+        }
+
+        const currentY = event.touches[0].clientY;
+        const delta = state.lastY - currentY;
+        state.lastY = currentY;
+
+        const aggregate = state.remainder + delta / lineHeightEstimate;
+        const lines =
+          aggregate > 0 ? Math.floor(aggregate) : aggregate < 0 ? Math.ceil(aggregate) : 0;
+
+        state.remainder = aggregate - lines;
+
+        if (lines !== 0) {
+          event.preventDefault();
+          event.stopPropagation();
+          terminal.scrollLines(lines);
+        }
+      };
+
+      const handleTouchEnd = () => {
+        state.lastY = null;
+        state.remainder = 0;
+      };
+
+      const listenerOptions: AddEventListenerOptions = { passive: false };
+      container.addEventListener('touchstart', handleTouchStart, listenerOptions);
+      container.addEventListener('touchmove', handleTouchMove, listenerOptions);
+      container.addEventListener('touchend', handleTouchEnd);
+      container.addEventListener('touchcancel', handleTouchEnd);
+
+      const previousTouchAction = container.style.touchAction;
+      container.style.touchAction = 'none';
+
+      touchScrollCleanupRef.current = () => {
+        container.removeEventListener('touchstart', handleTouchStart);
+        container.removeEventListener('touchmove', handleTouchMove);
+        container.removeEventListener('touchend', handleTouchEnd);
+        container.removeEventListener('touchcancel', handleTouchEnd);
+        container.style.touchAction = previousTouchAction;
+      };
+    }, [enableTouchScroll, fontSize]);
+
+    React.useEffect(() => {
+      const terminal = new Terminal(getTerminalOptions(fontFamily, fontSize, theme));
+      const fitAddon = new FitAddon();
+
+      terminalRef.current = terminal;
+      fitAddonRef.current = fitAddon;
+      terminal.loadAddon(fitAddon);
+
+      const container = containerRef.current;
+      if (container) {
+        terminal.open(container);
+        const viewport = container.querySelector('.xterm-viewport') as HTMLElement | null;
+        if (viewport) {
+          viewport.classList.add('overlay-scrollbar-target', 'overlay-scrollbar-container');
+          viewportRef.current = viewport;
+          forceRender();
+        }
+        fitTerminal();
+        terminal.focus();
+      }
+
+      const disposables = [
+        terminal.onData((data) => {
+          inputHandlerRef.current(data);
+        }),
+      ];
+
+      const resizeObserver = new ResizeObserver(() => {
+        fitTerminal();
+      });
+      if (container) {
+        resizeObserver.observe(container);
+      }
+
+      return () => {
+        touchScrollCleanupRef.current?.();
+        touchScrollCleanupRef.current = null;
+        disposables.forEach((disposable) => disposable.dispose());
+        resizeObserver.disconnect();
+        terminal.dispose();
+        terminalRef.current = null;
+        fitAddonRef.current = null;
+        resetWriteState();
+      };
+    }, [fitTerminal, fontFamily, fontSize, theme, resetWriteState]);
+
+    React.useEffect(() => {
+      const terminal = terminalRef.current;
+      if (!terminal) {
+        return;
+      }
+      const options = getTerminalOptions(fontFamily, fontSize, theme);
+      Object.assign(terminal.options as Record<string, unknown>, options);
+      fitTerminal();
+    }, [fitTerminal, fontFamily, fontSize, theme]);
+
+    React.useEffect(() => {
+      const terminal = terminalRef.current;
+      if (!terminal) {
+        return;
+      }
+      terminal.reset();
+      resetWriteState();
+      fitTerminal();
+      terminal.focus();
+    }, [sessionKey, fitTerminal, resetWriteState]);
+
+    React.useEffect(() => {
+      setupTouchScroll();
+      return () => {
+        touchScrollCleanupRef.current?.();
+        touchScrollCleanupRef.current = null;
+      };
+    }, [setupTouchScroll, sessionKey]);
+
+    React.useEffect(() => {
+      const terminal = terminalRef.current;
+      if (!terminal) {
+        return;
+      }
+
+      if (chunks.length === 0) {
+        if (processedCountRef.current !== 0) {
+          terminal.reset();
+          resetWriteState();
+          fitTerminal();
+        }
+        return;
+      }
+
+      const currentFirstId = chunks[0].id;
+      if (firstChunkIdRef.current === null) {
+        firstChunkIdRef.current = currentFirstId;
+      }
+
+      const shouldReset =
+        firstChunkIdRef.current !== currentFirstId || processedCountRef.current > chunks.length;
+
+      if (shouldReset) {
+        terminal.reset();
+        resetWriteState();
+        firstChunkIdRef.current = currentFirstId;
+      }
+
+      if (processedCountRef.current < chunks.length) {
+        const pending = chunks.slice(processedCountRef.current);
+        enqueueWrite(pending.map((chunk) => chunk.data).join(''));
+        processedCountRef.current = chunks.length;
+      }
+    }, [chunks, enqueueWrite, fitTerminal, resetWriteState]);
+
+    React.useImperativeHandle(
+      ref,
+      (): TerminalController => ({
+        focus: () => {
+          terminalRef.current?.focus();
+        },
+        clear: () => {
+          const terminal = terminalRef.current;
+          if (!terminal) {
+            return;
+          }
+          terminal.reset();
+          resetWriteState();
+          fitTerminal();
+        },
+        fit: () => {
+          fitTerminal();
+        },
+      }),
+      [fitTerminal, resetWriteState]
+    );
+
+    return (
+      <div ref={containerRef} className={cn('relative h-full w-full', className)}>
+        {viewportRef.current ? (
+          <OverlayScrollbar
+            containerRef={viewportRef}
+            disableHorizontal
+            className="overlay-scrollbar--flush overlay-scrollbar--dense overlay-scrollbar--zero"
+          />
+        ) : null}
+      </div>
+    );
+  }
+);
+
+TerminalViewport.displayName = 'TerminalViewport';
+
+export type { TerminalController };
+export { TerminalViewport };
diff --git a/packages/ui/src/components/ui/CommandPalette.tsx b/packages/ui/src/components/ui/CommandPalette.tsx
new file mode 100644
index 00000000..de6963bd
--- /dev/null
+++ b/packages/ui/src/components/ui/CommandPalette.tsx
@@ -0,0 +1,204 @@
+import React from 'react';
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from '@/components/ui/command';
+import { useUIStore } from '@/stores/useUIStore';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { useThemeSystem } from '@/contexts/useThemeSystem';
+import { useDeviceInfo } from '@/lib/device';
+import { RiAddLine, RiChatAi3Line, RiCheckLine, RiComputerLine, RiGitBranchLine, RiLayoutLeftLine, RiMoonLine, RiQuestionLine, RiRestartLine, RiSettings3Line, RiSunLine, RiTerminalBoxLine } from '@remixicon/react';
+import { reloadOpenCodeConfiguration } from '@/stores/useAgentsStore';
+
+export const CommandPalette: React.FC = () => {
+  const {
+    isCommandPaletteOpen,
+    setCommandPaletteOpen,
+    setHelpDialogOpen,
+    setSessionCreateDialogOpen,
+    setActiveMainTab,
+    setSettingsDialogOpen,
+    setSessionSwitcherOpen,
+    toggleSidebar,
+  } = useUIStore();
+
+  const {
+    createSession,
+    setCurrentSession,
+    getSessionsByDirectory,
+    initializeNewOpenChamberSession,
+  } = useSessionStore();
+
+  const { currentDirectory } = useDirectoryStore();
+  const { agents } = useConfigStore();
+  const { themeMode, setThemeMode } = useThemeSystem();
+
+  const handleClose = () => {
+    setCommandPaletteOpen(false);
+  };
+
+  const handleCreateSession = async () => {
+    const session = await createSession();
+    if (session) {
+      initializeNewOpenChamberSession(session.id, agents);
+    }
+    handleClose();
+  };
+
+  const handleOpenSession = (sessionId: string) => {
+    setCurrentSession(sessionId);
+    handleClose();
+  };
+
+  const handleSetThemeMode = (mode: 'light' | 'dark' | 'system') => {
+    setThemeMode(mode);
+    handleClose();
+  };
+
+  const handleShowHelp = () => {
+    setHelpDialogOpen(true);
+    handleClose();
+  };
+
+  const handleOpenAdvancedSession = () => {
+    setSessionCreateDialogOpen(true);
+    handleClose();
+  };
+
+  const { isMobile } = useDeviceInfo();
+
+  const handleOpenSessionList = () => {
+    if (isMobile) {
+      const { isSessionSwitcherOpen } = useUIStore.getState();
+      setSessionSwitcherOpen(!isSessionSwitcherOpen);
+    } else {
+      toggleSidebar();
+    }
+    handleClose();
+  };
+
+  const handleOpenGitPanel = () => {
+    setActiveMainTab('git');
+    handleClose();
+  };
+
+  const handleOpenTerminal = () => {
+    setActiveMainTab('terminal');
+    handleClose();
+  };
+
+  const handleOpenSettings = () => {
+    setSettingsDialogOpen(true);
+    handleClose();
+  };
+
+  const handleReloadConfiguration = () => {
+    reloadOpenCodeConfiguration();
+    handleClose();
+  };
+
+  const directorySessions = getSessionsByDirectory(currentDirectory ?? '');
+  const currentSessions = React.useMemo(() => {
+    return directorySessions.slice(0, 5);
+  }, [directorySessions]);
+
+  return (
+    <CommandDialog open={isCommandPaletteOpen} onOpenChange={setCommandPaletteOpen}>
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+
+        <CommandGroup heading="Actions">
+          <CommandItem onSelect={handleOpenSessionList}>
+            <RiLayoutLeftLine className="mr-2 h-4 w-4" />
+            <span>Open Session List</span>
+            <CommandShortcut>Ctrl + L</CommandShortcut>
+          </CommandItem>
+          <CommandItem onSelect={handleCreateSession}>
+            <RiAddLine className="mr-2 h-4 w-4" />
+            <span>New Session</span>
+            <CommandShortcut>Ctrl + N</CommandShortcut>
+          </CommandItem>
+          <CommandItem onSelect={handleOpenAdvancedSession}>
+            <RiGitBranchLine className="mr-2 h-4 w-4" />
+            <span>New Session with Worktree</span>
+            <CommandShortcut>Shift + Ctrl + N</CommandShortcut>
+          </CommandItem>
+          <CommandItem onSelect={handleShowHelp}>
+            <RiQuestionLine className="mr-2 h-4 w-4" />
+            <span>Keyboard Shortcuts</span>
+            <CommandShortcut>Ctrl + H</CommandShortcut>
+          </CommandItem>
+          <CommandItem onSelect={handleOpenGitPanel}>
+            <RiGitBranchLine className="mr-2 h-4 w-4" />
+            <span>Open Git Panel</span>
+            <CommandShortcut>Ctrl + G</CommandShortcut>
+          </CommandItem>
+          <CommandItem onSelect={handleOpenTerminal}>
+            <RiTerminalBoxLine className="mr-2 h-4 w-4" />
+            <span>Open Terminal</span>
+            <CommandShortcut>Ctrl + T</CommandShortcut>
+          </CommandItem>
+          <CommandItem onSelect={handleOpenSettings}>
+            <RiSettings3Line className="mr-2 h-4 w-4" />
+            <span>Open Settings</span>
+            <CommandShortcut>Ctrl + ,</CommandShortcut>
+          </CommandItem>
+          <CommandItem onSelect={handleReloadConfiguration}>
+            <RiRestartLine className="mr-2 h-4 w-4" />
+            <span>Reload OpenCode Configuration</span>
+          </CommandItem>
+        </CommandGroup>
+
+        <CommandSeparator />
+
+        <CommandGroup heading="Theme">
+          <CommandItem onSelect={() => handleSetThemeMode('light')}>
+            <RiSunLine className="mr-2 h-4 w-4" />
+            <span>Light Theme</span>
+            {themeMode === 'light' && <RiCheckLine className="ml-auto h-4 w-4" />}
+          </CommandItem>
+          <CommandItem onSelect={() => handleSetThemeMode('dark')}>
+            <RiMoonLine className="mr-2 h-4 w-4" />
+            <span>Dark Theme</span>
+            {themeMode === 'dark' && <RiCheckLine className="ml-auto h-4 w-4" />}
+          </CommandItem>
+          <CommandItem onSelect={() => handleSetThemeMode('system')}>
+            <RiComputerLine className="mr-2 h-4 w-4" />
+            <span>System Theme</span>
+            {themeMode === 'system' && <RiCheckLine className="ml-auto h-4 w-4" />}
+          </CommandItem>
+        </CommandGroup>
+
+        {currentSessions.length > 0 && (
+          <>
+            <CommandSeparator />
+            <CommandGroup heading="Recent Sessions">
+              {currentSessions.map((session) => (
+                <CommandItem
+                  key={session.id}
+                  onSelect={() => handleOpenSession(session.id)}
+                >
+                  <RiChatAi3Line className="mr-2 h-4 w-4" />
+                  <span className="truncate">
+                    {session.title || 'Untitled Session'}
+                  </span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </>
+        )}
+
+        {}
+      </CommandList>
+    </CommandDialog>
+  );
+};
diff --git a/packages/ui/src/components/ui/ConfigUpdateOverlay.tsx b/packages/ui/src/components/ui/ConfigUpdateOverlay.tsx
new file mode 100644
index 00000000..029537d9
--- /dev/null
+++ b/packages/ui/src/components/ui/ConfigUpdateOverlay.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import {
+  getConfigUpdateSnapshot,
+  subscribeConfigUpdate,
+} from "@/lib/configUpdate";
+import { RiRestartLine } from '@remixicon/react';
+
+export const ConfigUpdateOverlay: React.FC = () => {
+  const [{ isUpdating, message }, setState] = React.useState(() => getConfigUpdateSnapshot());
+
+  React.useEffect(() => {
+    return subscribeConfigUpdate(setState);
+  }, []);
+
+  if (!isUpdating) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-background/80 backdrop-blur-md">
+      <div className="w-full max-w-sm rounded-xl border border-border/40 bg-card/90 px-6 py-8 text-center shadow-none">
+        <div className="flex flex-col items-center gap-4">
+          <div className="flex h-14 w-14 items-center justify-center rounded-full border-2 border-primary/30 border-t-transparent text-primary">
+            <RiRestartLine className="h-7 w-7 animate-spin" />
+          </div>
+          <div className="space-y-2">
+            <h2 className="typography-h3 font-semibold text-foreground">
+              Updating OpenCode
+            </h2>
+            <p className="typography-body text-muted-foreground">
+              {message}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/ui/ContextUsageDisplay.tsx b/packages/ui/src/components/ui/ContextUsageDisplay.tsx
new file mode 100644
index 00000000..ed216880
--- /dev/null
+++ b/packages/ui/src/components/ui/ContextUsageDisplay.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { RiDonutChartLine } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+interface ContextUsageDisplayProps {
+  totalTokens: number;
+  percentage: number;
+  contextLimit: number;
+  outputLimit?: number;
+  size?: 'default' | 'compact';
+}
+
+export const ContextUsageDisplay: React.FC<ContextUsageDisplayProps> = ({
+  totalTokens,
+  percentage,
+  contextLimit,
+  outputLimit,
+  size = 'default',
+}) => {
+  const formatTokens = (tokens: number) => {
+    if (tokens >= 1_000_000) {
+      return `${(tokens / 1_000_000).toFixed(1)}M`;
+    }
+    if (tokens >= 1_000) {
+      return `${(tokens / 1_000).toFixed(1)}K`;
+    }
+    return tokens.toFixed(1).replace(/\.0$/, '');
+  };
+
+  const getPercentageColor = (percentage: number) => {
+    if (percentage >= 90) return 'text-status-error';
+    if (percentage >= 75) return 'text-status-warning';
+    return 'text-status-success';
+  };
+
+  const safeOutputLimit = typeof outputLimit === 'number' ? Math.max(outputLimit, 0) : 0;
+  const tooltipLines = [
+    `Used tokens: ${formatTokens(totalTokens)}`,
+    `Context limit: ${formatTokens(contextLimit)}`,
+    `Output limit: ${formatTokens(safeOutputLimit)}`,
+  ];
+
+  const contextElement = (
+    <div
+      className={cn(
+        'app-region-no-drag flex items-center gap-1.5 text-muted-foreground/60 select-none',
+        size === 'compact' ? 'typography-micro' : 'typography-meta',
+      )}
+      aria-label="Context usage"
+    >
+      <RiDonutChartLine className="h-4 w-4 flex-shrink-0" />
+      <span className={cn(getPercentageColor(percentage), 'font-medium')}>
+        {Math.min(percentage, 999).toFixed(1)}%
+      </span>
+    </div>
+  );
+
+  return (
+    <Tooltip delayDuration={1000}>
+      <TooltipTrigger asChild>{contextElement}</TooltipTrigger>
+      <TooltipContent>
+        <div className="space-y-0.5">
+          {tooltipLines.map((line) => (
+            <p key={line} className="typography-micro leading-tight">
+              {line}
+            </p>
+          ))}
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  );
+};
diff --git a/packages/ui/src/components/ui/ErrorBoundary.tsx b/packages/ui/src/components/ui/ErrorBoundary.tsx
new file mode 100644
index 00000000..bad1c4ef
--- /dev/null
+++ b/packages/ui/src/components/ui/ErrorBoundary.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { RiErrorWarningLine, RiRestartLine } from '@remixicon/react';
+import { Button } from './button';
+import { Card, CardContent, CardHeader, CardTitle } from './card';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+  errorInfo?: React.ErrorInfo;
+}
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    this.setState({ error, errorInfo });
+
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Error caught by boundary:', error, errorInfo);
+    }
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: undefined, errorInfo: undefined });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="p-4 flex items-center justify-center min-h-screen">
+          <Card className="w-full max-w-md">
+            <CardHeader className="text-center">
+              <CardTitle className="flex items-center justify-center gap-2 text-destructive">
+                <RiErrorWarningLine className="h-5 w-5" />
+                Something went wrong
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <p className="text-sm text-muted-foreground text-center">
+                The application encountered an unexpected error. This has been logged for debugging.
+              </p>
+
+              {this.state.error && (
+                <details className="text-xs font-mono bg-muted p-3 rounded">
+                  <summary className="cursor-pointer hover:bg-muted/80">Error details</summary>
+                  <pre className="mt-2 overflow-x-auto">
+                    {this.state.error.toString()}
+                  </pre>
+                </details>
+              )}
+
+              <div className="flex gap-2">
+                <Button onClick={this.handleReset} variant="outline" className="flex-1">
+                  <RiRestartLine className="h-4 w-4 mr-2" />
+                  Try again
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
\ No newline at end of file
diff --git a/packages/ui/src/components/ui/FireworksAnimation.tsx b/packages/ui/src/components/ui/FireworksAnimation.tsx
new file mode 100644
index 00000000..8aa5c33f
--- /dev/null
+++ b/packages/ui/src/components/ui/FireworksAnimation.tsx
@@ -0,0 +1,101 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+import '@/styles/fireworks.css';
+
+const PARTICLE_COUNT = 12;
+
+const DEFAULT_BURSTS = [
+  { id: 'left', x: 22, y: 58, delay: 0, radius: 120, colorVar: '--status-success' },
+  { id: 'center', x: 50, y: 42, delay: 120, radius: 150, colorVar: '--primary-base' },
+  { id: 'right', x: 78, y: 55, delay: 200, radius: 130, colorVar: '--status-info' },
+];
+
+interface FireworksAnimationProps {
+  isActive: boolean;
+  burstKey?: number;
+  className?: string;
+  durationMs?: number;
+  bursts?: typeof DEFAULT_BURSTS;
+  onComplete?: () => void;
+}
+
+export const FireworksAnimation: React.FC<FireworksAnimationProps> = ({
+  isActive,
+  burstKey = 0,
+  className,
+  durationMs = 900,
+  bursts = DEFAULT_BURSTS,
+  onComplete,
+}) => {
+  const hasRenderedRef = React.useRef(false);
+
+  React.useEffect(() => {
+    if (!isActive && hasRenderedRef.current) {
+      onComplete?.();
+    }
+    if (isActive) {
+      hasRenderedRef.current = true;
+    }
+  }, [isActive, onComplete]);
+
+  const particleVectors = React.useMemo(() => {
+    return Array.from({ length: PARTICLE_COUNT }, (_, index) => {
+      const angle = (Math.PI * 2 * index) / PARTICLE_COUNT;
+      return {
+        x: Math.cos(angle),
+        y: Math.sin(angle),
+        delay: index * 18,
+      };
+    });
+  }, []);
+
+  if (!isActive) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn('fireworks-overlay pointer-events-none', className)}
+      aria-hidden="true"
+      data-burst-key={burstKey}
+    >
+      {bursts.map((burst) => {
+        const burstStyle: React.CSSProperties & {
+          '--burst-delay'?: string;
+          '--burst-x'?: string;
+          '--burst-y'?: string;
+          '--firework-color'?: string;
+          '--firework-duration'?: string;
+        } = {
+          '--burst-delay': `${burst.delay}ms`,
+          '--burst-x': `${burst.x}%`,
+          '--burst-y': `${burst.y}%`,
+          '--firework-color': `var(${burst.colorVar})`,
+          '--firework-duration': `${durationMs}ms`,
+        };
+
+        return (
+          <div key={`${burst.id}-${burstKey}`} className="firework-burst" style={burstStyle}>
+            {particleVectors.map((vector, index) => {
+              const translateX = vector.x * burst.radius;
+              const translateY = vector.y * burst.radius;
+              const particleStyle: React.CSSProperties & {
+                '--translate-x'?: string;
+                '--translate-y'?: string;
+                '--particle-delay'?: string;
+              } = {
+                '--translate-x': `${translateX}px`,
+                '--translate-y': `${translateY}px`,
+                '--particle-delay': `${vector.delay}ms`,
+                color: `var(${burst.colorVar})`,
+              };
+
+              return <span key={`${burst.id}-${index}-${burstKey}`} className="firework-particle" style={particleStyle} />;
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/ui/HelpDialog.tsx b/packages/ui/src/components/ui/HelpDialog.tsx
new file mode 100644
index 00000000..76ed7930
--- /dev/null
+++ b/packages/ui/src/components/ui/HelpDialog.tsx
@@ -0,0 +1,153 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { useUIStore } from '@/stores/useUIStore';
+import { RiAddLine, RiArrowUpSLine, RiArrowUpWideLine, RiCloseCircleLine, RiCommandLine, RiGitBranchLine, RiLayoutLeftLine, RiPaletteLine, RiQuestionLine, RiSettings3Line, RiTerminalBoxLine, RiText } from '@remixicon/react';
+
+const renderKeyToken = (token: string, index: number) => {
+  const normalized = token.trim().toLowerCase();
+
+  if (normalized === 'ctrl' || normalized === 'control') {
+    return <RiArrowUpSLine key={`ctrl-${index}`} className="h-3.5 w-3.5" />;
+  }
+
+  if (normalized === 'shift' || normalized === '⇧') {
+    return <RiArrowUpWideLine key={`shift-${index}`} className="h-3.5 w-3.5" />;
+  }
+
+  if (normalized === '⌘' || normalized === 'cmd' || normalized === 'command' || normalized === 'meta') {
+    return <RiCommandLine key={`cmd-${index}`} className="h-3.5 w-3.5" />;
+  }
+
+  return <span key={`key-${index}`} className="text-xs font-medium">{token.trim()}</span>;
+};
+
+const renderKeyCombo = (combo: string) => {
+  const tokens = combo.split('+').map((token) => token.trim()).filter(Boolean);
+  if (tokens.length === 0) {
+    return combo.trim();
+  }
+
+  return tokens.map((token, index) => (
+    <React.Fragment key={`${token}-${index}`}>
+      {index > 0 && <span className="text-muted-foreground text-[10px]">+</span>}
+      {renderKeyToken(token, index)}
+    </React.Fragment>
+  ));
+};
+
+type ShortcutIcon = React.ComponentType<{ className?: string }>;
+
+type ShortcutItem = {
+  keys: string | string[];
+  description: string;
+  icon: ShortcutIcon | null;
+};
+
+type ShortcutSection = {
+  category: string;
+  items: ShortcutItem[];
+};
+
+export const HelpDialog: React.FC = () => {
+  const { isHelpDialogOpen, setHelpDialogOpen } = useUIStore();
+
+  const shortcuts: ShortcutSection[] = [
+    {
+      category: "Navigation & Commands",
+      items: [
+        { keys: ["Ctrl + X"], description: "Open Command Palette", icon: RiCommandLine },
+        { keys: ["Ctrl + H"], description: "Show Keyboard Shortcuts (this dialog)", icon: RiQuestionLine },
+        { keys: ["Ctrl + L"], description: "Toggle Session Sidebar", icon: RiLayoutLeftLine },
+      ]
+    },
+    {
+      category: "Session Management",
+      items: [
+        { keys: ["Ctrl + N"], description: "Create New Session", icon: RiAddLine },
+        { keys: ["Shift + Ctrl + N"], description: "Open Session Creator (worktree support)", icon: RiGitBranchLine },
+        { keys: ["Ctrl + I"], description: "Focus Chat Input", icon: RiText },
+        { keys: ["Esc + Esc"], description: "Abort active run (double press)", icon: RiCloseCircleLine },
+      ]
+    },
+    {
+      category: "Interface",
+      items: [
+        { keys: ["⌘ + /", "Ctrl + /"], description: "Cycle Theme (Light → Dark → System)", icon: RiPaletteLine },
+        { keys: ["Ctrl + G"], description: "Open Git Panel", icon: RiGitBranchLine },
+        { keys: ["Ctrl + T"], description: "Open Terminal", icon: RiTerminalBoxLine },
+        { keys: ["Ctrl + ,"], description: "Open Settings", icon: RiSettings3Line },
+      ]
+    }
+  ];
+
+  return (
+    <Dialog open={isHelpDialogOpen} onOpenChange={setHelpDialogOpen}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <RiSettings3Line className="h-5 w-5" />
+            Keyboard Shortcuts
+          </DialogTitle>
+          <DialogDescription>
+            Use these keyboard shortcuts to navigate OpenChamber efficiently
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 mt-3">
+          {shortcuts.map((section) => (
+            <div key={section.category}>
+              <h3 className="typography-meta font-semibold text-muted-foreground uppercase tracking-wider mb-2">
+                {section.category}
+              </h3>
+              <div className="space-y-1">
+                {section.items.map((shortcut, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-between py-1 px-2"
+                  >
+                    <div className="flex items-center gap-2">
+                      {shortcut.icon && (
+                        <shortcut.icon className="h-3.5 w-3.5 text-muted-foreground" />
+                      )}
+                      <span className="typography-meta">{shortcut.description}</span>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      {(Array.isArray(shortcut.keys) ? shortcut.keys : shortcut.keys.split(' / ')).map((keyCombo: string, i: number) => (
+                        <React.Fragment key={`${keyCombo}-${i}`}>
+                          {i > 0 && <span className="typography-meta text-muted-foreground mx-1">or</span>}
+                          <kbd className="inline-flex items-center gap-1 px-1.5 py-0.5 typography-meta font-mono bg-muted rounded border border-border/20">
+                            {renderKeyCombo(keyCombo)}
+                          </kbd>
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-4 p-2 bg-muted/30 rounded-xl">
+          <div className="flex items-start gap-2">
+            <RiQuestionLine className="h-3.5 w-3.5 text-muted-foreground mt-0.5" />
+            <div className="typography-meta text-muted-foreground">
+              <p className="font-medium mb-1">Pro Tips:</p>
+               <ul className="space-y-0.5 typography-meta">
+                 <li>• Use Command Palette (Ctrl + X) to quickly access all actions</li>
+                 <li>• The 5 most recent sessions appear in the Command Palette</li>
+                 <li>• Theme cycling remembers your preference across sessions</li>
+               </ul>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/packages/ui/src/components/ui/MemoryDebugPanel.tsx b/packages/ui/src/components/ui/MemoryDebugPanel.tsx
new file mode 100644
index 00000000..3dc05e33
--- /dev/null
+++ b/packages/ui/src/components/ui/MemoryDebugPanel.tsx
@@ -0,0 +1,194 @@
+import React from 'react';
+import { useSessionStore, MEMORY_LIMITS } from '@/stores/useSessionStore';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { RiCloseLine, RiDatabase2Line, RiDeleteBinLine, RiPulseLine } from '@remixicon/react';
+import { useDesktopServerInfo } from '@/hooks/useDesktopServerInfo';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+
+interface MemoryDebugPanelProps {
+  onClose?: () => void;
+}
+
+export const MemoryDebugPanel: React.FC<MemoryDebugPanelProps> = ({ onClose }) => {
+  const {
+    sessions,
+    messages,
+    sessionMemoryState,
+    currentSessionId,
+    trimToViewportWindow,
+    evictLeastRecentlyUsed
+  } = useSessionStore();
+  const desktopInfo = useDesktopServerInfo(4000);
+
+  const totalMessages = React.useMemo(() => {
+    let total = 0;
+    messages.forEach((sessionMessages) => {
+      total += sessionMessages.length;
+    });
+    return total;
+  }, [messages]);
+
+  const sessionStats = React.useMemo(() => {
+    return sessions.map(session => {
+      const messageCount = messages.get(session.id)?.length || 0;
+      const memoryState = sessionMemoryState.get(session.id);
+      return {
+        id: session.id,
+        title: session.title || 'Untitled',
+        messageCount,
+        isStreaming: memoryState?.isStreaming || false,
+        isZombie: memoryState?.isZombie || false,
+        backgroundCount: memoryState?.backgroundMessageCount || 0,
+        lastAccessed: memoryState?.lastAccessedAt || 0,
+        isCurrent: session.id === currentSessionId
+      };
+    }).sort((a, b) => b.lastAccessed - a.lastAccessed);
+  }, [sessions, messages, sessionMemoryState, currentSessionId]);
+
+  const cachedSessionCount = messages.size;
+
+  return (
+    <Card className="fixed bottom-4 right-4 w-96 p-4 shadow-none z-50 bg-background/95 backdrop-blur bottom-safe-area">
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <RiDatabase2Line className="h-4 w-4" />
+          <h3 className="font-semibold typography-ui-label">Memory Debug Panel</h3>
+        </div>
+        {onClose && (
+          <Button
+            size="icon"
+            variant="ghost"
+            className="h-6 w-6"
+            onClick={onClose}
+          >
+            <RiCloseLine className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      <div className="space-y-3">
+        {}
+        <div className="grid grid-cols-2 gap-2 typography-meta">
+          <div className="bg-muted/50 rounded p-2">
+            <div className="text-muted-foreground">Total Messages</div>
+            <div className="typography-markdown font-semibold">{totalMessages}</div>
+          </div>
+          <div className="bg-muted/50 rounded p-2">
+            <div className="text-muted-foreground">Cached Sessions</div>
+            <div className="typography-markdown font-semibold">{cachedSessionCount} / {MEMORY_LIMITS.MAX_SESSIONS}</div>
+          </div>
+        </div>
+
+        {desktopInfo && (
+          <div className="grid grid-cols-2 gap-2 typography-meta border-t pt-2">
+            <div className="bg-muted/50 rounded p-2">
+              <div className="text-muted-foreground">Desktop Host</div>
+              <div className="typography-markdown font-mono text-xs">
+                {desktopInfo.host ?? 'unknown'}
+              </div>
+            </div>
+            <div className="bg-muted/50 rounded p-2">
+              <div className="text-muted-foreground">OpenCode Port</div>
+              <div className="typography-markdown font-semibold">
+                {desktopInfo.openCodePort ?? 'n/a'}
+                <span className="ml-2 text-xs text-muted-foreground">
+                  {desktopInfo.ready ? 'ready' : 'starting'}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {}
+        <div className="typography-meta space-y-1 border-t pt-2">
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">Viewport Window:</span>
+            <span>{MEMORY_LIMITS.VIEWPORT_MESSAGES} messages</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">Background Stream Limit:</span>
+            <span>{MEMORY_LIMITS.BACKGROUND_STREAMING_BUFFER} messages</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">Zombie Timeout:</span>
+            <span>{MEMORY_LIMITS.ZOMBIE_TIMEOUT / 1000 / 60} minutes</span>
+          </div>
+        </div>
+
+        {}
+        <div className="border-t pt-2">
+          <div className="typography-meta font-semibold mb-1">Sessions in Memory:</div>
+          <ScrollableOverlay outerClassName="max-h-48" className="space-y-1 pr-1">
+            {sessionStats.map(stat => (
+              <div
+                key={stat.id}
+                className={`typography-meta p-1.5 rounded flex items-center justify-between ${
+                  stat.isCurrent ? 'bg-primary/10' : 'bg-muted/30'
+                }`}
+              >
+                <div className="flex items-center gap-2 flex-1 min-w-0">
+                  <span className="truncate">{stat.title}</span>
+                  {stat.isStreaming && (
+                    <RiPulseLine className="h-3 w-3 text-primary animate-pulse" />
+                  )}
+                  {stat.isZombie && (
+                    <span className="text-warning">!</span>
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className={`font-mono ${
+                    stat.messageCount > MEMORY_LIMITS.VIEWPORT_MESSAGES ? 'text-warning' : ''
+                  }`}>
+                    {stat.messageCount} msgs
+                  </span>
+                  {stat.backgroundCount > 0 && (
+                    <span className="text-primary">+{stat.backgroundCount}</span>
+                  )}
+                </div>
+              </div>
+            ))}
+          </ScrollableOverlay>
+        </div>
+
+        {}
+        <div className="flex gap-2 pt-2 border-t">
+          <Button
+            size="sm"
+            variant="outline"
+            className="typography-meta"
+            onClick={() => {
+              if (currentSessionId) {
+                trimToViewportWindow(currentSessionId, 10);
+              }
+            }}
+          >
+            <RiDeleteBinLine className="h-3 w-3 mr-1" />
+            Force Trim (10)
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            className="typography-meta"
+            onClick={() => {
+              evictLeastRecentlyUsed();
+
+            }}
+          >
+            Evict LRU
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            className="typography-meta"
+            onClick={() => {
+
+            }}
+          >
+            Log State
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+};
diff --git a/packages/ui/src/components/ui/MobileOverlayPanel.tsx b/packages/ui/src/components/ui/MobileOverlayPanel.tsx
new file mode 100644
index 00000000..ed48bfb4
--- /dev/null
+++ b/packages/ui/src/components/ui/MobileOverlayPanel.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { RiCloseLine } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import { ScrollableOverlay } from './ScrollableOverlay';
+
+interface MobileOverlayPanelProps {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  className?: string;
+  renderHeader?: (closeButton: React.ReactNode) => React.ReactNode;
+}
+
+const OVERLAY_ROOT_ID = 'mobile-overlay-root';
+
+const ensureOverlayRoot = () => {
+  if (typeof document === 'undefined') return null;
+  let root = document.getElementById(OVERLAY_ROOT_ID);
+  if (!root) {
+    root = document.createElement('div');
+    root.id = OVERLAY_ROOT_ID;
+    document.body.appendChild(root);
+  }
+  return root;
+};
+
+export const MobileOverlayPanel: React.FC<MobileOverlayPanelProps> = ({
+  open,
+  title,
+  onClose,
+  children,
+  footer,
+  className,
+  renderHeader,
+}) => {
+  const overlayRootRef = React.useRef<HTMLElement | null>(null);
+
+  if (typeof document !== 'undefined' && !overlayRootRef.current) {
+    overlayRootRef.current = ensureOverlayRoot();
+  }
+
+  React.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, onClose]);
+
+  if (!open || !overlayRootRef.current) {
+    return null;
+  }
+
+  const content = (
+    <div
+      className="fixed inset-0 z-50 flex flex-col bg-background/40 backdrop-blur-sm"
+      role="dialog"
+      aria-modal="true"
+      onClick={onClose}
+    >
+      <div
+        className={cn(
+          'mt-auto w-full rounded-t-xl border border-border/50 bg-background shadow-none pwa-overlay-panel',
+          'mx-auto max-w-lg',
+          className
+        )}
+        onClick={(event) => event.stopPropagation()}
+      >
+        {(() => {
+          const closeButton = (
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-accent"
+            >
+              <RiCloseLine className="h-4 w-4" />
+            </button>
+          );
+
+          if (renderHeader) {
+            return renderHeader(closeButton);
+          }
+
+          return (
+            <div className="flex items-center justify-between px-3 py-2 border-b border-border/40">
+              <h2 className="typography-ui-label font-semibold text-foreground">{title}</h2>
+              {closeButton}
+            </div>
+          );
+        })()}
+        <ScrollableOverlay outerClassName="max-h-[min(70vh,520px)]" className="px-2 py-2 pwa-overlay-scroll">
+          {children}
+        </ScrollableOverlay>
+        {footer ? (
+          <div className="border-t border-border/40 px-3 py-2">
+            {footer}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+
+  return createPortal(content, overlayRootRef.current);
+};
+
+export default MobileOverlayPanel;
diff --git a/packages/ui/src/components/ui/OpenChamberLogo.tsx b/packages/ui/src/components/ui/OpenChamberLogo.tsx
new file mode 100644
index 00000000..675aed0b
--- /dev/null
+++ b/packages/ui/src/components/ui/OpenChamberLogo.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { useOptionalThemeSystem } from '@/contexts/useThemeSystem';
+
+interface OpenChamberLogoProps {
+  className?: string;
+  width?: number;
+  height?: number;
+  isAnimated?: boolean;
+}
+
+export const OpenChamberLogo: React.FC<OpenChamberLogoProps> = ({
+  className = '',
+  width = 70,
+  height = 70,
+  isAnimated = false,
+}) => {
+  const themeContext = useOptionalThemeSystem();
+
+  let isDark = true;
+  if (themeContext) {
+    isDark = themeContext.currentTheme.metadata.variant !== 'light';
+  } else if (typeof window !== 'undefined') {
+    isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+
+  const fillColor = isDark ? 'white' : 'black';
+  const gradientId = 'shimmer-gradient';
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 70 70"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      role="img"
+      aria-label="OpenChamber logo"
+    >
+      {isAnimated && (
+        <defs>
+          <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor={fillColor} stopOpacity="1" />
+            <stop offset="50%" stopColor={fillColor} stopOpacity="0.7" />
+            <stop offset="100%" stopColor={fillColor} stopOpacity="1" />
+            <animate
+              attributeName="x1"
+              from="-100%"
+              to="200%"
+              dur="4s"
+              repeatCount="indefinite"
+            />
+            <animate
+              attributeName="y1"
+              from="-100%"
+              to="200%"
+              dur="4s"
+              repeatCount="indefinite"
+            />
+            <animate
+              attributeName="x2"
+              from="0%"
+              to="300%"
+              dur="4s"
+              repeatCount="indefinite"
+            />
+            <animate
+              attributeName="y2"
+              from="0%"
+              to="300%"
+              dur="4s"
+              repeatCount="indefinite"
+            />
+          </linearGradient>
+        </defs>
+      )}
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 13H35V58H0V13ZM26.25 22.1957H8.75V48.701H26.25V22.1957Z"
+        fill={isAnimated ? `url(#${gradientId})` : fillColor}
+      />
+      <path
+        d="M43.75 13H70V22.1957H52.5V48.701H70V57.8967H43.75V13Z"
+        fill={isAnimated ? `url(#${gradientId})` : fillColor}
+      />
+    </svg>
+  );
+};
diff --git a/packages/ui/src/components/ui/OpenCodeIcon.tsx b/packages/ui/src/components/ui/OpenCodeIcon.tsx
new file mode 100644
index 00000000..6f300e6b
--- /dev/null
+++ b/packages/ui/src/components/ui/OpenCodeIcon.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface OpenCodeIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const OpenCodeIcon: React.FC<OpenCodeIconProps> = ({
+  className = '',
+  width = 70,
+  height = 70
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 70 70"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 13H35V58H0V13ZM26.25 22.1957H8.75V48.701H26.25V22.1957Z"
+        fill="currentColor"
+      />
+      <path
+        d="M43.75 13H70V22.1957H52.5V48.701H70V57.8967H43.75V13Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
\ No newline at end of file
diff --git a/packages/ui/src/components/ui/OpenCodeLogo.tsx b/packages/ui/src/components/ui/OpenCodeLogo.tsx
new file mode 100644
index 00000000..e1af3e92
--- /dev/null
+++ b/packages/ui/src/components/ui/OpenCodeLogo.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+interface OpenCodeLogoProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const OpenCodeLogo: React.FC<OpenCodeLogoProps> = ({
+  className = '',
+  width = 288,
+  height = 50
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 288 50"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M8 16.5H24V33H8V16.5Z" fill="currentColor" fillOpacity="0.15"/>
+      <path d="M48 16.5H64V33H48V16.5Z" fill="currentColor" fillOpacity="0.15"/>
+      <path d="M120 16.5H136V33H120V16.5Z" fill="currentColor" fillOpacity="0.15"/>
+      <path d="M160 16.5H176V33H160V16.5Z" fill="currentColor" fillOpacity="0.15"/>
+      <path d="M192 16.5H208V33H192V16.5Z" fill="currentColor" fillOpacity="0.15"/>
+      <path d="M232 16.5H248V33H232V16.5Z" fill="currentColor" fillOpacity="0.15"/>
+      <path d="M264 0H288V8.5H272V16.5H288V25H272V33H288V41.5H264V0Z" fill="currentColor" fillOpacity="0.95"/>
+      <path d="M248 0H224V41.5H248V33H232V8.5H248V0Z" fill="currentColor" fillOpacity="0.95"/>
+      <path d="M256 8.5H248V33H256V8.5Z" fill="currentColor" fillOpacity="0.95"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M184 0H216V41.5H184V0ZM208 8.5H192V33H208V8.5Z" fill="currentColor" fillOpacity="0.95"/>
+      <path d="M144 8.5H136V41.5H144V8.5Z" fill="currentColor" fillOpacity="0.55"/>
+      <path d="M136 0H112V41.5H120V8.5H136V0Z" fill="currentColor" fillOpacity="0.55"/>
+      <path d="M80 0H104V8.5H88V16.5H104V25H88V33H104V41.5H80V0Z" fill="currentColor" fillOpacity="0.55"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M40 0H72V41.5H48V49.5H40V0ZM64 8.5H48V33H64V8.5Z" fill="currentColor" fillOpacity="0.55"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M0 0H32V41.5955H0V0ZM24 8.5H8V33H24V8.5Z" fill="currentColor" fillOpacity="0.55"/>
+      <path d="M152 0H176V8.5H160V33H176V41.5H152V0Z" fill="currentColor" fillOpacity="0.95"/>
+    </svg>
+  );
+};
\ No newline at end of file
diff --git a/packages/ui/src/components/ui/OverlayScrollbar.tsx b/packages/ui/src/components/ui/OverlayScrollbar.tsx
new file mode 100644
index 00000000..3ec0d1ee
--- /dev/null
+++ b/packages/ui/src/components/ui/OverlayScrollbar.tsx
@@ -0,0 +1,210 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+type OverlayScrollbarProps = {
+  containerRef: React.RefObject<HTMLElement | null>;
+  minThumbSize?: number;
+  hideDelayMs?: number;
+  className?: string;
+  disableHorizontal?: boolean;
+};
+
+type ThumbMetrics = {
+  length: number;
+  offset: number;
+};
+
+export const OverlayScrollbar: React.FC<OverlayScrollbarProps> = ({
+  containerRef,
+  minThumbSize = 32,
+  hideDelayMs = 1000,
+  className,
+  disableHorizontal = false,
+}) => {
+  const [visible, setVisible] = React.useState(false);
+  const [vertical, setVertical] = React.useState<ThumbMetrics>({ length: 0, offset: 0 });
+  const [horizontal, setHorizontal] = React.useState<ThumbMetrics>({ length: 0, offset: 0 });
+  const hideTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const frameRef = React.useRef<number | null>(null);
+  const isDraggingRef = React.useRef(false);
+  const dragStartRef = React.useRef<{
+    pointerX: number;
+    pointerY: number;
+    scrollTop: number;
+    scrollLeft: number;
+  }>({ pointerX: 0, pointerY: 0, scrollTop: 0, scrollLeft: 0 });
+  const dragAxisRef = React.useRef<"vertical" | "horizontal" | null>(null);
+
+  const updateMetrics = React.useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const { scrollHeight, clientHeight, scrollTop, scrollWidth, clientWidth, scrollLeft } = container;
+    const trackInset = 8;
+
+    if (scrollHeight > clientHeight) {
+      const trackLength = Math.max(clientHeight - trackInset * 2, 0);
+      const rawThumb = (clientHeight / scrollHeight) * trackLength;
+      const length = Math.max(minThumbSize, Math.min(trackLength, rawThumb));
+      const maxOffset = Math.max(trackLength - length, 0);
+      const maxScroll = Math.max(scrollHeight - clientHeight, 1);
+      const offset = (scrollTop / maxScroll) * maxOffset;
+      setVertical({ length, offset });
+    } else {
+      setVertical({ length: 0, offset: 0 });
+    }
+
+    if (!disableHorizontal && scrollWidth > clientWidth) {
+      const trackLength = Math.max(clientWidth - trackInset * 2, 0);
+      const rawThumb = (clientWidth / scrollWidth) * trackLength;
+      const length = Math.max(minThumbSize, Math.min(trackLength, rawThumb));
+      const maxOffset = Math.max(trackLength - length, 0);
+      const maxScroll = Math.max(scrollWidth - clientWidth, 1);
+      const offset = (scrollLeft / maxScroll) * maxOffset;
+      setHorizontal({ length, offset });
+    } else {
+      setHorizontal({ length: 0, offset: 0 });
+    }
+  }, [containerRef, minThumbSize, disableHorizontal]);
+
+  const scheduleHide = React.useCallback(() => {
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+    }
+    hideTimeoutRef.current = setTimeout(() => setVisible(false), hideDelayMs);
+  }, [hideDelayMs]);
+
+  const handleScroll = React.useCallback(() => {
+    if (frameRef.current) {
+      cancelAnimationFrame(frameRef.current);
+    }
+    frameRef.current = requestAnimationFrame(() => {
+      updateMetrics();
+      setVisible(true);
+      scheduleHide();
+    });
+  }, [scheduleHide, updateMetrics]);
+
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    updateMetrics();
+    setVisible(true);
+    scheduleHide();
+
+    container.addEventListener("scroll", handleScroll, { passive: true });
+
+    const resizeObserver =
+      typeof ResizeObserver !== "undefined"
+        ? new ResizeObserver(() => updateMetrics())
+        : null;
+    resizeObserver?.observe(container);
+
+    const mutationObserver =
+      typeof MutationObserver !== "undefined"
+        ? new MutationObserver(() => updateMetrics())
+        : null;
+    mutationObserver?.observe(container, { childList: true, subtree: true, characterData: true });
+
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+      if (frameRef.current) cancelAnimationFrame(frameRef.current);
+    };
+  }, [containerRef, handleScroll, scheduleHide, updateMetrics]);
+
+  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>, axis: "vertical" | "horizontal") => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    isDraggingRef.current = true;
+    dragStartRef.current = {
+      pointerX: event.clientX,
+      pointerY: event.clientY,
+      scrollTop: container.scrollTop,
+      scrollLeft: container.scrollLeft,
+    };
+    dragAxisRef.current = axis;
+    setVisible(true);
+    if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+
+  const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (!isDraggingRef.current) return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    const axis = dragAxisRef.current;
+    if (axis === "vertical") {
+      const { pointerY, scrollTop } = dragStartRef.current;
+      const delta = event.clientY - pointerY;
+      const trackLength = container.clientHeight;
+      const thumbTravel = Math.max(trackLength - vertical.length, 1);
+      const maxScroll = Math.max(container.scrollHeight - container.clientHeight, 1);
+      const scrollDelta = (delta / thumbTravel) * maxScroll;
+      container.scrollTop = scrollTop + scrollDelta;
+    } else if (axis === "horizontal") {
+      const { pointerX, scrollLeft } = dragStartRef.current;
+      const delta = event.clientX - pointerX;
+      const trackLength = container.clientWidth;
+      const thumbTravel = Math.max(trackLength - horizontal.length, 1);
+      const maxScroll = Math.max(container.scrollWidth - container.clientWidth, 1);
+      const scrollDelta = (delta / thumbTravel) * maxScroll;
+      container.scrollLeft = scrollLeft + scrollDelta;
+    }
+  };
+
+  const handlePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (!isDraggingRef.current) return;
+    isDraggingRef.current = false;
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    scheduleHide();
+  };
+
+  const showVertical = vertical.length > 0;
+  const showHorizontal = horizontal.length > 0;
+  if (!showVertical && !showHorizontal) return null;
+
+  const trackInset = 8;
+
+  return (
+    <div
+      className={cn("overlay-scrollbar", className)}
+      aria-hidden="true"
+      style={{ opacity: visible ? 1 : 0 }}
+    >
+      {showVertical && (
+        <div
+          className="overlay-scrollbar__thumb overlay-scrollbar__thumb--vertical"
+          style={{
+            height: `${vertical.length}px`,
+            top: `${trackInset + vertical.offset}px`,
+            right: `${trackInset / 2}px`,
+          }}
+          onPointerDown={(e) => handlePointerDown(e, "vertical")}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={handlePointerUp}
+        />
+      )}
+      {showHorizontal && (
+        <div
+          className="overlay-scrollbar__thumb overlay-scrollbar__thumb--horizontal"
+          style={{
+            width: `${horizontal.length}px`,
+            left: `${trackInset + horizontal.offset}px`,
+            bottom: `${trackInset / 2}px`,
+          }}
+          onPointerDown={(e) => handlePointerDown(e, "horizontal")}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={handlePointerUp}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/ui/ProviderLogo.tsx b/packages/ui/src/components/ui/ProviderLogo.tsx
new file mode 100644
index 00000000..9774e848
--- /dev/null
+++ b/packages/ui/src/components/ui/ProviderLogo.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { useProviderLogo } from '@/hooks/useProviderLogo';
+import { cn } from '@/lib/utils';
+
+interface ProviderLogoProps {
+    providerId: string;
+    alt?: string;
+    className?: string;
+    onError?: () => void;
+}
+
+export const ProviderLogo: React.FC<ProviderLogoProps> = ({
+    providerId,
+    alt,
+    className,
+    onError: externalOnError
+}) => {
+    const { src, onError: handleInternalError, hasLogo } = useProviderLogo(providerId);
+
+    const handleError = React.useCallback(() => {
+        handleInternalError();
+        externalOnError?.();
+    }, [handleInternalError, externalOnError]);
+
+    if (!hasLogo || !src) {
+        return null;
+    }
+
+    return (
+        <img
+            src={src}
+            alt={alt || `${providerId} logo`}
+            className={cn('dark:invert', className)}
+            onError={handleError}
+        />
+    );
+};
diff --git a/packages/ui/src/components/ui/ScrollShadow.tsx b/packages/ui/src/components/ui/ScrollShadow.tsx
new file mode 100644
index 00000000..31d258b7
--- /dev/null
+++ b/packages/ui/src/components/ui/ScrollShadow.tsx
@@ -0,0 +1,142 @@
+import React from "react";
+
+export type ScrollShadowProps = React.HTMLAttributes<HTMLDivElement> & {
+  orientation?: "vertical" | "horizontal";
+  offset?: number;
+  size?: number;
+  isEnabled?: boolean;
+  hideBottomShadow?: boolean;
+  onVisibilityChange?: (state: "both" | "none" | "top" | "bottom" | "left" | "right") => void;
+};
+
+function mergeRefs<T>(...refs: Array<React.Ref<T>>): React.RefCallback<T> {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref && typeof ref === "object") {
+        (ref as React.MutableRefObject<T | null>).current = value;
+      }
+    });
+  };
+}
+
+export const ScrollShadow = React.forwardRef<HTMLDivElement, ScrollShadowProps>(
+  (
+    {
+      orientation = "vertical",
+      offset = 72,
+      size = 48,
+      isEnabled = true,
+      hideBottomShadow = false,
+      onVisibilityChange,
+      style,
+      className,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const internalRef = React.useRef<HTMLDivElement>(null);
+    const visibleRef = React.useRef<"both" | "none" | "top" | "bottom" | "left" | "right">("none");
+
+    const dataScrollShadow = (rest as Record<string, unknown>)["data-scroll-shadow"];
+    delete (rest as Record<string, unknown>)["data-scroll-shadow"];
+
+    const mergedStyle = React.useMemo<React.CSSProperties>(() => {
+      const next: React.CSSProperties = {
+        ...(style as React.CSSProperties),
+      };
+      (next as Record<string, string>)["--scroll-shadow-size"] = `${size}px`;
+      return next;
+    }, [size, style]);
+
+    const setAttributes = React.useCallback(
+      (el: HTMLElement, hasBefore: boolean, hasAfter: boolean, prefix: "top" | "left", suffix: "bottom" | "right") => {
+        const bothKey = `${prefix}${suffix.charAt(0).toUpperCase()}${suffix.slice(1)}Scroll` as const;
+
+        if (hasBefore && hasAfter) {
+          (el.dataset as Record<string, string>)[bothKey] = "true";
+          el.removeAttribute(`data-${prefix}-scroll`);
+          el.removeAttribute(`data-${suffix}-scroll`);
+        } else {
+          el.dataset[`${prefix}Scroll`] = String(hasBefore);
+          el.dataset[`${suffix}Scroll`] = String(hasAfter);
+          el.removeAttribute(`data-${prefix}-${suffix}-scroll`);
+        }
+      },
+      [],
+    );
+
+    const clearAttributes = React.useCallback((el: HTMLElement) => {
+      ["top", "bottom", "top-bottom", "left", "right", "left-right"].forEach((attr) => {
+        el.removeAttribute(`data-${attr}-scroll`);
+      });
+    }, []);
+
+    const checkOverflow = React.useCallback(() => {
+      const el = internalRef.current;
+      if (!el) return;
+
+      if (!isEnabled) {
+        clearAttributes(el);
+        return;
+      }
+
+      const hasBefore = orientation === "vertical" ? el.scrollTop > offset : el.scrollLeft > offset;
+      let hasAfter =
+        orientation === "vertical"
+          ? el.scrollTop + el.clientHeight + offset < el.scrollHeight
+          : el.scrollLeft + el.clientWidth + offset < el.scrollWidth;
+
+      if (hideBottomShadow && orientation === "vertical") {
+        hasAfter = false;
+      }
+
+      setAttributes(el, hasBefore, hasAfter, orientation === "vertical" ? "top" : "left", orientation === "vertical" ? "bottom" : "right");
+
+      const next = hasBefore && hasAfter ? "both" : hasBefore ? (orientation === "vertical" ? "top" : "left") : hasAfter ? (orientation === "vertical" ? "bottom" : "right") : "none";
+      if (next !== visibleRef.current) {
+        visibleRef.current = next;
+        onVisibilityChange?.(next);
+      }
+    }, [clearAttributes, hideBottomShadow, isEnabled, offset, onVisibilityChange, orientation, setAttributes]);
+
+    React.useEffect(() => {
+      const el = internalRef.current;
+      if (!el) return;
+
+      const handleScroll = () => checkOverflow();
+      const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => checkOverflow()) : null;
+      const mutationObserver =
+        typeof MutationObserver !== "undefined" ? new MutationObserver(() => checkOverflow()) : null;
+
+      checkOverflow();
+
+      el.addEventListener("scroll", handleScroll, { passive: true });
+      resizeObserver?.observe(el);
+      mutationObserver?.observe(el, { childList: true, subtree: true, characterData: true });
+
+      return () => {
+        el.removeEventListener("scroll", handleScroll);
+        resizeObserver?.disconnect();
+        mutationObserver?.disconnect();
+      };
+    }, [checkOverflow]);
+
+    return (
+      <div
+        {...rest}
+        ref={mergeRefs(internalRef, ref)}
+        className={className}
+        data-orientation={orientation}
+        data-scroll-shadow={dataScrollShadow ?? true}
+        style={mergedStyle}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+ScrollShadow.displayName = "ScrollShadow";
diff --git a/packages/ui/src/components/ui/ScrollableOverlay.tsx b/packages/ui/src/components/ui/ScrollableOverlay.tsx
new file mode 100644
index 00000000..53d57410
--- /dev/null
+++ b/packages/ui/src/components/ui/ScrollableOverlay.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { OverlayScrollbar } from "./OverlayScrollbar";
+
+type ScrollableOverlayProps = React.HTMLAttributes<HTMLElement> & {
+  minThumbSize?: number;
+  hideDelayMs?: number;
+  as?: React.ElementType;
+  outerClassName?: string;
+  scrollbarClassName?: string;
+  disableHorizontal?: boolean;
+  fillContainer?: boolean;
+};
+
+export const ScrollableOverlay = React.forwardRef<HTMLElement, ScrollableOverlayProps>(
+  ({
+    className,
+    outerClassName,
+    children,
+    style,
+    minThumbSize,
+    hideDelayMs,
+    as: Component = "div",
+    scrollbarClassName,
+    disableHorizontal = false,
+    fillContainer = true,
+    ...rest
+  }, ref) => {
+    const containerRef = React.useRef<HTMLElement | null>(null);
+
+    React.useImperativeHandle(ref, () => containerRef.current as HTMLElement, []);
+
+    return (
+      <div className={cn("relative flex flex-col min-h-0 w-full overflow-hidden", outerClassName)}>
+        <Component
+          ref={containerRef as React.Ref<HTMLElement>}
+          className={cn(
+            "overlay-scrollbar-target overlay-scrollbar-container",
+            fillContainer ? "flex-1 min-h-0 w-full h-full" : "flex-none w-full h-auto",
+            disableHorizontal ? "overflow-y-auto overflow-x-hidden" : "overflow-auto",
+            className
+          )}
+          style={style}
+          {...rest}
+        >
+          {children}
+        </Component>
+        <OverlayScrollbar
+          containerRef={containerRef}
+          minThumbSize={minThumbSize}
+          hideDelayMs={hideDelayMs}
+          className={scrollbarClassName}
+          disableHorizontal={disableHorizontal}
+        />
+      </div>
+    );
+  }
+);
+
+ScrollableOverlay.displayName = "ScrollableOverlay";
diff --git a/packages/ui/src/components/ui/UpdateDialog.tsx b/packages/ui/src/components/ui/UpdateDialog.tsx
new file mode 100644
index 00000000..ac8d33de
--- /dev/null
+++ b/packages/ui/src/components/ui/UpdateDialog.tsx
@@ -0,0 +1,159 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { RiDownloadLine, RiExternalLinkLine, RiLoaderLine, RiRestartLine, RiSparklingLine } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import type { UpdateInfo, UpdateProgress } from '@/lib/desktop';
+
+interface UpdateDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  info: UpdateInfo | null;
+  downloading: boolean;
+  downloaded: boolean;
+  progress: UpdateProgress | null;
+  error: string | null;
+  onDownload: () => void;
+  onRestart: () => void;
+}
+
+const GITHUB_RELEASES_URL = 'https://github.com/btriapitsyn/openchamber/releases';
+
+export const UpdateDialog: React.FC<UpdateDialogProps> = ({
+  open,
+  onOpenChange,
+  info,
+  downloading,
+  downloaded,
+  progress,
+  error,
+  onDownload,
+  onRestart,
+}) => {
+  const releaseUrl = info?.version
+    ? `${GITHUB_RELEASES_URL}/tag/v${info.version}`
+    : GITHUB_RELEASES_URL;
+
+  const progressPercent = progress?.total
+    ? Math.round((progress.downloaded / progress.total) * 100)
+    : 0;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <RiSparklingLine className="h-5 w-5 text-primary" />
+            Update Available
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 mt-2">
+          {info?.currentVersion && (
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-muted-foreground">Current version</span>
+              <span className="font-mono">{info.currentVersion}</span>
+            </div>
+          )}
+
+          {info?.version && (
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-muted-foreground">New version</span>
+              <span className="font-mono text-primary">{info.version}</span>
+            </div>
+          )}
+
+          {downloading && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">Downloading...</span>
+                <span className="font-mono">{progressPercent}%</span>
+              </div>
+              <div className="h-2 bg-muted rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-primary transition-all duration-300"
+                  style={{ width: `${progressPercent}%` }}
+                />
+              </div>
+            </div>
+          )}
+
+          {error && (
+            <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
+              <p className="text-sm text-destructive">{error}</p>
+            </div>
+          )}
+
+          <div className="flex gap-2 pt-2">
+            <a
+              href={releaseUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={cn(
+                'flex-1 flex items-center justify-center gap-2 px-3 py-1.5 rounded-md',
+                'text-sm font-medium',
+                'border border-border',
+                'hover:bg-accent hover:text-accent-foreground',
+                'transition-colors'
+              )}
+            >
+              <RiExternalLinkLine className="h-4 w-4" />
+              View Release Notes
+            </a>
+
+            {!downloaded && !downloading && (
+              <button
+                onClick={onDownload}
+                className={cn(
+                  'flex-1 flex items-center justify-center gap-2 px-3 py-1.5 rounded-md',
+                  'text-sm font-medium',
+                  'bg-primary text-primary-foreground',
+                  'hover:bg-primary/90',
+                  'transition-colors'
+                )}
+              >
+                <RiDownloadLine className="h-4 w-4" />
+                Download Update
+              </button>
+            )}
+
+            {downloading && (
+              <button
+                disabled
+                className={cn(
+                  'flex-1 flex items-center justify-center gap-2 px-3 py-1.5 rounded-md',
+                  'text-sm font-medium',
+                  'bg-primary/50 text-primary-foreground',
+                  'cursor-not-allowed'
+                )}
+              >
+                <RiLoaderLine className="h-4 w-4 animate-spin" />
+                Downloading...
+              </button>
+            )}
+
+            {downloaded && (
+              <button
+                onClick={onRestart}
+                className={cn(
+                  'flex-1 flex items-center justify-center gap-2 px-3 py-1.5 rounded-md',
+                  'text-sm font-medium',
+                  'bg-primary text-primary-foreground',
+                  'hover:bg-primary/90',
+                  'transition-colors'
+                )}
+              >
+                <RiRestartLine className="h-4 w-4" />
+                Restart to Update
+              </button>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/packages/ui/src/components/ui/alert.tsx b/packages/ui/src/components/ui/alert.tsx
new file mode 100644
index 00000000..f3bcaad0
--- /dev/null
+++ b/packages/ui/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-xl border px-4 py-3 typography-ui-label grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 typography-ui-label [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/packages/ui/src/components/ui/animated-tabs.tsx b/packages/ui/src/components/ui/animated-tabs.tsx
new file mode 100644
index 00000000..587c43ca
--- /dev/null
+++ b/packages/ui/src/components/ui/animated-tabs.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export type AnimatedTabOption<T extends string> = {
+  value: T;
+  label: string;
+  icon?: React.ComponentType<{ className?: string; size?: number | string }>;
+};
+
+interface AnimatedTabsProps<T extends string> {
+  tabs: AnimatedTabOption<T>[];
+  value: T;
+  onValueChange: (value: T) => void;
+  className?: string;
+  isInteractive?: boolean;
+}
+
+export function AnimatedTabs<T extends string>({
+  tabs,
+  value,
+  onValueChange,
+  className,
+  isInteractive = true,
+}: AnimatedTabsProps<T>) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const activeTabRef = React.useRef<HTMLButtonElement>(null);
+
+  const updateClipPath = React.useCallback(() => {
+    const container = containerRef.current;
+    const activeTab = activeTabRef.current;
+
+    if (!container || !activeTab) return;
+
+    const containerWidth = container.offsetWidth;
+    if (!containerWidth) return;
+
+    const { offsetLeft, offsetWidth } = activeTab;
+    const leftPercent = Math.max(0, Math.min(100, (offsetLeft / containerWidth) * 100));
+    const rightPercent = Math.max(0, Math.min(100, ((offsetLeft + offsetWidth) / containerWidth) * 100));
+
+    container.style.clipPath = `inset(0 ${Number(100 - rightPercent).toFixed(2)}% 0 ${Number(leftPercent).toFixed(2)}% round 8px)`;
+  }, []);
+
+  React.useEffect(() => {
+    updateClipPath();
+  }, [updateClipPath, value, tabs.length]);
+
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new ResizeObserver(() => updateClipPath());
+    observer.observe(container);
+
+    return () => observer.disconnect();
+  }, [updateClipPath]);
+
+  return (
+    <div className={cn('relative isolate w-full', className)}>
+      <div
+        ref={containerRef}
+        aria-hidden
+        className="pointer-events-none absolute inset-0 z-10 overflow-hidden rounded-lg [clip-path:inset(0_75%_0_0_round_8px)] [transition:clip-path_200ms_ease]"
+      >
+        <div className="flex h-9 items-center gap-1 rounded-lg bg-accent px-1.5 text-accent-foreground">
+          {tabs.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <div
+                key={tab.value}
+                className="flex h-7 flex-1 items-center justify-center gap-1.25 rounded-lg px-2.5 text-sm font-semibold"
+              >
+                {Icon ? <Icon className="h-4 w-4" /> : null}
+                <span className="truncate">{tab.label}</span>
+              </div>
+
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="relative z-20 flex h-9 items-center gap-1 rounded-lg bg-muted/20 px-1.5">
+        {tabs.map((tab) => {
+          const isActive = value === tab.value;
+          const Icon = tab.icon;
+
+          return (
+            <button
+              key={tab.value}
+              ref={isActive ? activeTabRef : null}
+              type="button"
+              onClick={() => {
+                if (!isInteractive) return;
+                onValueChange(tab.value);
+              }}
+              className={cn(
+                'flex h-7 flex-1 items-center justify-center gap-1.25 rounded-lg px-2.5 text-sm font-semibold transition-colors duration-150',
+                isActive ? 'text-accent-foreground' : 'text-muted-foreground',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-background'
+              )}
+              aria-pressed={isActive}
+              aria-disabled={!isInteractive}
+              tabIndex={isInteractive ? 0 : -1}
+            >
+                {Icon ? (
+                  <Icon
+                    className={cn('h-4 w-4', isActive ? 'text-accent-foreground' : 'text-muted-foreground')}
+                  />
+                ) : null}
+              <span className="truncate">{tab.label}</span>
+
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/ui/button-large.tsx b/packages/ui/src/components/ui/button-large.tsx
new file mode 100644
index 00000000..ff246a4c
--- /dev/null
+++ b/packages/ui/src/components/ui/button-large.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+import { Button, type buttonVariants } from "./button"
+import { cn } from "@/lib/utils"
+import { type VariantProps } from "class-variance-authority"
+
+function ButtonLarge({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants>) {
+  return (
+    <Button
+      variant={variant}
+      size="sm"
+      className={cn("h-7 px-2 py-0", className)}
+      {...props}
+    />
+  )
+}
+
+export { ButtonLarge }
diff --git a/packages/ui/src/components/ui/button-small.tsx b/packages/ui/src/components/ui/button-small.tsx
new file mode 100644
index 00000000..541433ab
--- /dev/null
+++ b/packages/ui/src/components/ui/button-small.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+import { Button, type buttonVariants } from "./button"
+import { cn } from "@/lib/utils"
+import { type VariantProps } from "class-variance-authority"
+
+function ButtonSmall({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants>) {
+  return (
+    <Button
+      variant={variant}
+      size="sm"
+      className={cn("h-6 px-2 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+export { ButtonSmall }
diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx
new file mode 100644
index 00000000..a20766ff
--- /dev/null
+++ b/packages/ui/src/components/ui/button.tsx
@@ -0,0 +1,61 @@
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg typography-ui-label font-medium transition-[background-color,border-color,color,box-shadow,opacity] duration-150 ease-in-out disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-none hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-none hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-none hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-none hover:bg-secondary/80",
+        ghost:
+          "text-foreground hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-lg gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-lg px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { Button, buttonVariants }
diff --git a/packages/ui/src/components/ui/card.tsx b/packages/ui/src/components/ui/card.tsx
new file mode 100644
index 00000000..87fd1292
--- /dev/null
+++ b/packages/ui/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground typography-ui-label", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/packages/ui/src/components/ui/collapsible.tsx b/packages/ui/src/components/ui/collapsible.tsx
new file mode 100644
index 00000000..69d83540
--- /dev/null
+++ b/packages/ui/src/components/ui/collapsible.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { cn } from "@/lib/utils";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) => (
+  <CollapsiblePrimitive.CollapsibleTrigger
+    className={cn(
+      "flex w-full items-center justify-between rounded-lg px-2 py-1.5 text-left text-foreground hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+      className
+    )}
+    {...props}
+  />
+);
+
+const CollapsibleContent = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) => (
+  <CollapsiblePrimitive.CollapsibleContent
+    className={cn("overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down", className)}
+    {...props}
+  />
+);
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/packages/ui/src/components/ui/command.tsx b/packages/ui/src/components/ui/command.tsx
new file mode 100644
index 00000000..567b070a
--- /dev/null
+++ b/packages/ui/src/components/ui/command.tsx
@@ -0,0 +1,232 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { RiCommandLine, RiArrowUpLine, RiSearchLine } from "@remixicon/react";
+
+import { cn } from "@/lib/utils"
+import { ScrollableOverlay } from "@/components/ui/ScrollableOverlay";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0 transform-gpu will-change-transform", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-4 [&_[cmdk-input-wrapper]_svg]:w-4 [&_[cmdk-input]]:h-8 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-1.5 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4 [&_[cmdk-item]]:typography-meta">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+       data-slot="command-input-wrapper"
+       className="flex h-8 items-center gap-2 border-b px-3"
+     >
+       <RiSearchLine className="size-4 shrink-0 opacity-50" />
+       <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-8 w-full rounded-lg bg-transparent py-2 typography-meta outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  children,
+  scrollbarClassName,
+  disableHorizontal,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List> & { scrollbarClassName?: string; disableHorizontal?: boolean }) {
+  return (
+    <ScrollableOverlay
+      as={CommandPrimitive.List}
+      data-slot="command-list"
+      outerClassName="max-h-[min(600px,calc(100vh-10rem))] overflow-x-hidden p-0 w-full h-full min-h-0"
+      className={cn("scroll-py-1 overflow-x-hidden h-full min-h-0", className)}
+      scrollbarClassName={scrollbarClassName ?? "overlay-scrollbar--flush overlay-scrollbar--dense overlay-scrollbar--zero"}
+      disableHorizontal={disableHorizontal ?? true}
+      {...props}
+    >
+      {children}
+    </ScrollableOverlay>
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center typography-ui-label"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:typography-meta [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 typography-meta outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  const renderKey = (keyLabel: string) => {
+    const normalized = keyLabel.trim().toLowerCase();
+
+    if (normalized === 'ctrl' || normalized === 'control') {
+      return (
+        <span className="text-xs font-medium">
+          ctrl
+        </span>
+      );
+    }
+
+    if (normalized === 'cmd' || normalized === '⌘' || normalized === 'command' || normalized === 'meta') {
+      return <RiCommandLine className="size-3.5" />;
+    }
+
+    if (normalized === 'shift' || normalized === '⇧') {
+      return <RiArrowUpLine className="size-3.5" />;
+    }
+
+    return (
+      <span className="text-xs font-medium">
+        {keyLabel}
+      </span>
+    );
+  };
+
+  const shortcutText = typeof props.children === 'string' ? props.children : '';
+
+  const tokens = shortcutText
+    ? shortcutText.split('+').map((token) => token.trim()).filter(Boolean)
+    : [];
+
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto flex items-center gap-1 typography-meta",
+        className
+      )}
+      {...props}
+    >
+      {tokens.length > 0
+        ? tokens.map((token, index) => (
+            <React.Fragment key={`${token}-${index}`}>
+              {index > 0 && <span className="opacity-60 text-xs">+</span>}
+              {renderKey(token)}
+            </React.Fragment>
+          ))
+        : props.children}
+    </span>
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/packages/ui/src/components/ui/dialog.tsx b/packages/ui/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..a8e9da2e
--- /dev/null
+++ b/packages/ui/src/components/ui/dialog.tsx
@@ -0,0 +1,157 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { RiCloseLine } from '@remixicon/react';
+
+import { cn } from "@/lib/utils"
+
+let openDialogCount = 0;
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  React.useEffect(() => {
+    openDialogCount += 1;
+    document.documentElement.classList.add('oc-dialog-open');
+    return () => {
+      openDialogCount = Math.max(0, openDialogCount - 1);
+      if (openDialogCount === 0) {
+        document.documentElement.classList.remove('oc-dialog-open');
+      }
+    };
+  }, []);
+
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 backdrop-blur-md",
+        className
+      )}
+      {...props}
+    />
+  )
+});
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay className="rounded-none" />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background text-foreground fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border p-6 shadow-none overflow-hidden pwa-dialog-content",
+          className
+        )}
+        {...props}
+      >
+
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-2 right-2 rounded-lg opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none text-muted-foreground hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <RiCloseLine/>
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 bottom-safe-area sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("typography-markdown leading-none font-semibold text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground typography-ui-label", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/packages/ui/src/components/ui/dropdown-menu.tsx b/packages/ui/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..a800ec21
--- /dev/null
+++ b/packages/ui/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,255 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { RiArrowRightSLine, RiCheckLine } from '@remixicon/react';
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-visible rounded-xl border p-1 shadow-none",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+        className={cn(
+          "hover:bg-accent hover:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:hover:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 data-[variant=destructive]:hover:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1 typography-ui-label outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "hover:bg-accent hover:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-lg py-1 px-2 typography-ui-label outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <RiCheckLine className="size-3"/>
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default items-start gap-2 rounded-lg py-1 pl-2 pr-8 typography-ui-label outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent hover:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center text-primary">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <RiCheckLine className="size-3" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1 typography-ui-label font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-0.5 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto typography-meta tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "hover:bg-accent hover:text-accent-foreground flex cursor-default items-center rounded-lg px-2 py-1 typography-ui-label outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <RiArrowRightSLine className="ml-auto size-3.5" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+      <DropdownMenuPrimitive.SubContent
+        data-slot="dropdown-menu-sub-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-visible rounded-xl border p-1 shadow-none",
+          className
+        )}
+        {...props}
+      />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/packages/ui/src/components/ui/input.tsx b/packages/ui/src/components/ui/input.tsx
new file mode 100644
index 00000000..e674e468
--- /dev/null
+++ b/packages/ui/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "text-foreground border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 appearance-none hover:border-input focus:border-ring flex h-9 w-full min-w-0 rounded-lg border bg-transparent px-3 py-1 typography-markdown shadow-none transition-[color,box-shadow,border-color] outline-none focus-visible:outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:typography-ui-label file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:typography-ui-label",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/packages/ui/src/components/ui/scroll-area.tsx b/packages/ui/src/components/ui/scroll-area.tsx
new file mode 100644
index 00000000..2e53bfcc
--- /dev/null
+++ b/packages/ui/src/components/ui/scroll-area.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:outline-none focus-visible:ring-[3px] will-change-scroll"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/packages/ui/src/components/ui/select.tsx b/packages/ui/src/components/ui/select.tsx
new file mode 100644
index 00000000..503e94d7
--- /dev/null
+++ b/packages/ui/src/components/ui/select.tsx
@@ -0,0 +1,188 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { RiArrowDownSLine, RiArrowUpSLine, RiCheckLine } from '@remixicon/react';
+
+import { cn } from "@/lib/utils"
+import { ScrollableOverlay } from "@/components/ui/ScrollableOverlay";
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-lg border bg-transparent px-2 py-2 typography-ui-label whitespace-nowrap shadow-none outline-none focus-visible:outline-none hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-6 data-[size=sm]:h-6 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <RiArrowDownSLine className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      data-slot="select-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden rounded-xl border shadow-none transform-gpu will-change-transform",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <ScrollableOverlay
+        as={SelectPrimitive.Viewport}
+        outerClassName="max-h-[var(--radix-select-content-available-height)] w-full"
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+        )}
+      >
+        {children}
+      </ScrollableOverlay>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 typography-meta", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 typography-ui-label outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <RiCheckLine className="size-4"/>
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <RiArrowUpSLine className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <RiArrowDownSLine className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/packages/ui/src/components/ui/separator.tsx b/packages/ui/src/components/ui/separator.tsx
new file mode 100644
index 00000000..275381ca
--- /dev/null
+++ b/packages/ui/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/packages/ui/src/components/ui/skeleton.tsx b/packages/ui/src/components/ui/skeleton.tsx
new file mode 100644
index 00000000..e82c8aa0
--- /dev/null
+++ b/packages/ui/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-xl", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/packages/ui/src/components/ui/sonner.tsx b/packages/ui/src/components/ui/sonner.tsx
new file mode 100644
index 00000000..b0337512
--- /dev/null
+++ b/packages/ui/src/components/ui/sonner.tsx
@@ -0,0 +1,39 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+import type { ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      closeButton
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--error-bg": "var(--popover)",
+          "--error-text": "var(--popover-foreground)",
+          "--error-border": "var(--border)",
+          "--success-bg": "var(--popover)",
+          "--success-text": "var(--popover-foreground)",
+          "--success-border": "var(--border)",
+          "--warning-bg": "var(--popover)",
+          "--warning-text": "var(--popover-foreground)",
+          "--warning-border": "var(--border)",
+          "--info-bg": "var(--popover)",
+          "--info-text": "var(--popover-foreground)",
+          "--info-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/packages/ui/src/components/ui/text.tsx b/packages/ui/src/components/ui/text.tsx
new file mode 100644
index 00000000..ba895a83
--- /dev/null
+++ b/packages/ui/src/components/ui/text.tsx
@@ -0,0 +1,211 @@
+import * as React from "react";
+import { motion, type MotionProps } from "motion/react";
+import * as Slot from "@radix-ui/react-slot";
+
+import { cn } from "@/lib/utils";
+
+type Variant = {
+  variant: string;
+  component: React.FC<React.ComponentProps<"span"> & Partial<MotionProps>>;
+};
+
+const variants = [
+  {
+    variant: "shine",
+    component: ({ children, className, ...props }) => (
+      <motion.span
+        {...props}
+        className={cn(
+          "bg-[linear-gradient(110deg,#bfbfbf,35%,#000,50%,#bfbfbf,75%,#bfbfbf)] dark:bg-[linear-gradient(110deg,#404040,35%,#fff,50%,#404040,75%,#404040)]",
+          "bg-[length:200%_100%] bg-clip-text text-transparent",
+          className
+        )}
+        initial={{ backgroundPosition: "200% 0" }}
+        animate={{ backgroundPosition: "-200% 0" }}
+        transition={{
+          repeat: Number.POSITIVE_INFINITY,
+          duration: 2,
+          ease: "linear",
+        }}
+      >
+        {children}
+      </motion.span>
+    ),
+  },
+  {
+    variant: "generate-effect",
+    component: ({ children, className, ...props }) => {
+      if (typeof children !== "string") return null;
+
+      return (
+        <div className="inline-block whitespace-pre">
+          {children.split("").map((char, index) => (
+            <motion.span
+              {...props}
+              key={char + String(index)}
+              className={cn(
+                "inline-block whitespace-pre text-primary-foreground",
+                className
+              )}
+              initial={{ opacity: 0, filter: "blur(4px)", rotateX: 90, y: 5 }}
+              whileInView={{
+                opacity: 1,
+                filter: "blur(0px)",
+                rotateX: 0,
+                y: 0,
+              }}
+              transition={{
+                ease: "easeOut",
+                duration: 0.3,
+                delay: index * 0.015,
+              }}
+              viewport={{ once: true }}
+            >
+              {char}
+            </motion.span>
+          ))}
+        </div>
+      );
+    },
+  },
+  {
+    variant: "glitch",
+    component: ({ children, className, ...props }) => (
+      <div className="group relative overflow-hidden font-medium">
+        <span {...props} className={cn("invisible", className)}>
+          {children}
+        </span>
+        <span
+          {...props}
+          className={cn(
+            "absolute top-0 left-0 text-primary-muted transition-transform duration-500 ease-in-out",
+            "group-hover:-translate-y-full hover:duration-300",
+            className
+          )}
+        >
+          {children}
+        </span>
+        <span
+          {...props}
+          className={cn(
+            "absolute top-0 left-0 translate-y-full text-primary-muted transition-transform duration-500",
+            "ease-in-out hover:duration-300 group-hover:translate-y-0",
+            className
+          )}
+        >
+          {children}
+        </span>
+      </div>
+    ),
+  },
+  {
+    variant: "hover-enter",
+    component: ({ children, className, ...props }) => {
+      if (typeof children !== "string") return null;
+
+      const DURATION = 0.25;
+      const STAGGER = 0.025;
+
+      const letters = children
+        .split("")
+        .map((letter) => (letter === " " ? "\u00A0" : letter));
+
+      return (
+        <motion.span
+          {...props}
+          className={cn(
+            "relative block select-none overflow-hidden whitespace-nowrap text-primary-muted",
+            className
+          )}
+          initial="initial"
+          whileHover="hovered"
+          style={{ lineHeight: 0.9 }}
+        >
+          <div>
+            {letters.map((letter, i) => (
+              <motion.span
+                key={String(i)}
+                className="inline-block"
+                variants={{
+                  initial: { y: 0 },
+                  hovered: { y: "-100%" },
+                }}
+                transition={{
+                  duration: DURATION,
+                  ease: "easeInOut",
+                  delay: STAGGER * i,
+                }}
+              >
+                {letter}
+              </motion.span>
+            ))}
+          </div>
+          <div className={cn("absolute inset-0")}>
+            {letters.map((letter, i) => (
+              <motion.span
+                key={String(i)}
+                className="inline-block"
+                variants={{
+                  initial: { y: "100%" },
+                  hovered: { y: 0 },
+                }}
+                transition={{
+                  duration: DURATION,
+                  ease: "easeInOut",
+                  delay: STAGGER * i,
+                }}
+              >
+                {letter}
+              </motion.span>
+            ))}
+          </div>
+        </motion.span>
+      );
+    },
+  },
+  {
+    variant: "shake",
+    component: ({ children, className, ...props }) => (
+      <span
+        {...props}
+        className={cn("text-primary-muted hover:animate-text-shake", className)}
+      >
+        {children}
+      </span>
+    ),
+  },
+  {
+    variant: "hover-decoration",
+    component: ({ children, className, ...props }) => (
+      <div
+        className={cn(
+          "relative after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:origin-bottom-right",
+          "after:scale-x-0 after:bg-primary-muted after:transition-transform after:duration-300 after:ease-in-out hover:after:origin-bottom-left hover:after:scale-x-100"
+        )}
+      >
+        <span {...props} className={cn("text-primary-muted", className)}>
+          {children}
+        </span>
+      </div>
+    ),
+  },
+] as const satisfies readonly Variant[];
+
+export type TextProps = {
+  variant?: (typeof variants)[number]["variant"];
+} & React.ComponentProps<"span"> &
+  Partial<MotionProps>;
+
+export function Text({ variant = "shine", className, ...props }: TextProps) {
+  const FALLBACK_INDEX = 0;
+
+  const variantComponent = variants.find((v) => v.variant === variant)?.component;
+
+  const Component = variantComponent || variants[FALLBACK_INDEX].component;
+
+  return (
+    <Slot.Root>
+      <Component {...props} className={className} />
+    </Slot.Root>
+  );
+}
diff --git a/packages/ui/src/components/ui/textarea.tsx b/packages/ui/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..e59cf7c8
--- /dev/null
+++ b/packages/ui/src/components/ui/textarea.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { ScrollableOverlay } from "./ScrollableOverlay"
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <ScrollableOverlay
+        as="textarea"
+        ref={ref as React.Ref<HTMLTextAreaElement>}
+        disableHorizontal
+        fillContainer={false}
+        outerClassName="w-full"
+        className={cn(
+          "text-foreground border-input placeholder:text-muted-foreground appearance-none hover:border-input focus:border-ring focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-3 py-2 typography-markdown shadow-none transition-[color,box-shadow,border-color] outline-none focus-visible:outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:typography-ui-label",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/packages/ui/src/components/ui/toggle.tsx b/packages/ui/src/components/ui/toggle.tsx
new file mode 100644
index 00000000..50e2a506
--- /dev/null
+++ b/packages/ui/src/components/ui/toggle.tsx
@@ -0,0 +1,47 @@
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-xl typography-ui-label font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-none hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { Toggle, toggleVariants }
diff --git a/packages/ui/src/components/ui/tooltip.tsx b/packages/ui/src/components/ui/tooltip.tsx
new file mode 100644
index 00000000..ec36c5c8
--- /dev/null
+++ b/packages/ui/src/components/ui/tooltip.tsx
@@ -0,0 +1,64 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root> & {
+  delayDuration?: number
+}
+
+function Tooltip({
+  delayDuration = 0,
+  ...props
+}: TooltipProps) {
+  return (
+    <TooltipProvider delayDuration={delayDuration}>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-muted text-muted-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-xl px-3 py-1.5 typography-meta text-balance overflow-hidden transform-gpu will-change-transform",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-muted fill-muted z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-xl" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/packages/ui/src/components/ui/typewriter-text.tsx b/packages/ui/src/components/ui/typewriter-text.tsx
new file mode 100644
index 00000000..92928ead
--- /dev/null
+++ b/packages/ui/src/components/ui/typewriter-text.tsx
@@ -0,0 +1,61 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+export type TypewriterTextProps = {
+  children: string;
+  speed?: number;
+  loop?: boolean;
+  className?: string;
+};
+
+const LOOP_RESTART_DELAY_MS = 1000;
+
+export const TypewriterText: React.FC<TypewriterTextProps> = ({
+  children,
+  speed = 50,
+  loop = false,
+  className = '',
+}) => {
+  const [displayed, setDisplayed] = useState('');
+  const index = useRef(0);
+  const timeout = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    setDisplayed('');
+    index.current = 0;
+
+    function type() {
+      setDisplayed(children.slice(0, index.current + 1));
+      if (index.current < children.length - 1) {
+        index.current += 1;
+        timeout.current = setTimeout(type, speed);
+      } else if (loop) {
+        timeout.current = setTimeout(() => {
+          setDisplayed('');
+          index.current = 0;
+          type();
+        }, LOOP_RESTART_DELAY_MS);
+      }
+    }
+
+    if (children && children.length > 0) {
+      type();
+    } else {
+      setDisplayed('');
+    }
+
+    return () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+    };
+  }, [children, speed, loop]);
+
+  if (!children) {
+    return null;
+  }
+
+  return <span className={className}>{displayed}</span>;
+};
+
+export default TypewriterText;
+
diff --git a/packages/ui/src/components/views/ChatView.tsx b/packages/ui/src/components/views/ChatView.tsx
new file mode 100644
index 00000000..88538653
--- /dev/null
+++ b/packages/ui/src/components/views/ChatView.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { ChatContainer } from '@/components/chat/ChatContainer';
+import { ChatErrorBoundary } from '@/components/chat/ChatErrorBoundary';
+import { useSessionStore } from '@/stores/useSessionStore';
+
+export const ChatView: React.FC = () => {
+    const currentSessionId = useSessionStore((state) => state.currentSessionId);
+
+    return (
+        <ChatErrorBoundary sessionId={currentSessionId || undefined}>
+            <ChatContainer />
+        </ChatErrorBoundary>
+    );
+};
diff --git a/packages/ui/src/components/views/DiffView.tsx b/packages/ui/src/components/views/DiffView.tsx
new file mode 100644
index 00000000..c792885b
--- /dev/null
+++ b/packages/ui/src/components/views/DiffView.tsx
@@ -0,0 +1,491 @@
+import React from 'react';
+import { RiGitCommitLine, RiLoader4Line } from '@remixicon/react';
+
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { useUIStore } from '@/stores/useUIStore';
+import { useGitStore, useGitStatus, useIsGitRepo, useGitFileCount } from '@/stores/useGitStore';
+import type { GitStatus } from '@/lib/api/types';
+import { Button } from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { RiArrowDownSLine } from '@remixicon/react';
+import { toast } from 'sonner';
+import { getLanguageFromExtension } from '@/lib/toolHelpers';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
+import { DiffViewToggle } from '@/components/chat/message/DiffViewToggle';
+import type { DiffViewMode } from '@/components/chat/message/types';
+
+const LazyMonacoDiffViewer = React.lazy(() =>
+    import('./MonacoDiffViewer').then((mod) => ({ default: mod.MonacoDiffViewer }))
+);
+
+type FileEntry = GitStatus['files'][number] & {
+    insertions: number;
+    deletions: number;
+    isNew: boolean;
+};
+
+const isNewStatusFile = (file: GitStatus['files'][number]): boolean => {
+    const { index, working_dir: workingDir } = file;
+
+    return index === 'A' || workingDir === 'A' || index === '?' || workingDir === '?';
+};
+
+const formatDiffTotals = (insertions?: number, deletions?: number) => {
+    const added = insertions ?? 0;
+    const removed = deletions ?? 0;
+    if (!added && !removed) return null;
+    return (
+        <span className="typography-meta flex flex-shrink-0 items-center gap-1 text-xs whitespace-nowrap">
+            {added ? (
+                <span style={{ color: 'var(--status-success)' }}>+{added}</span>
+            ) : null}
+            {removed ? (
+                <span style={{ color: 'var(--status-error)' }}>-{removed}</span>
+            ) : null}
+        </span>
+    );
+};
+
+interface FileSelectorProps {
+    changedFiles: FileEntry[];
+    selectedFile: string | null;
+    selectedFileEntry: FileEntry | null;
+    onSelectFile: (path: string) => void;
+}
+
+const FileSelector = React.memo<FileSelectorProps>(({
+    changedFiles,
+    selectedFile,
+    selectedFileEntry,
+    onSelectFile,
+}) => {
+    if (changedFiles.length === 0) return null;
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <button className="flex h-8 items-center gap-2 rounded-lg border border-input bg-transparent px-2 typography-ui-label text-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring">
+                    {selectedFileEntry ? (
+                        <div className="flex items-center gap-3">
+                            <span className="truncate typography-meta">
+                                {selectedFileEntry.path}
+                            </span>
+                            {formatDiffTotals(selectedFileEntry.insertions, selectedFileEntry.deletions)}
+                        </div>
+                    ) : (
+                        <span className="text-muted-foreground">Select file</span>
+                    )}
+                    <RiArrowDownSLine className="size-4 opacity-50" />
+                </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="max-h-[70vh] min-w-[320px] overflow-y-auto">
+                <DropdownMenuRadioGroup value={selectedFile ?? ''} onValueChange={onSelectFile}>
+                    {changedFiles.map((file) => (
+                        <DropdownMenuRadioItem key={file.path} value={file.path}>
+                            <div className="flex w-full items-center justify-between gap-3">
+                                <span className="truncate typography-meta">
+                                    {file.path}
+                                </span>
+                                {formatDiffTotals(file.insertions, file.deletions)}
+                            </div>
+                        </DropdownMenuRadioItem>
+                    ))}
+                </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+});
+
+interface DiffContentProps {
+    fileDiff: { original: string; modified: string } | null;
+    activeFilePath: string;
+    isDiffLoading: boolean;
+    diffError: string | null;
+    onRetry: () => void;
+    renderSideBySide: boolean;
+    allowResponsive: boolean;
+}
+
+const DiffContent = React.memo<DiffContentProps>(({
+    fileDiff,
+    activeFilePath,
+    isDiffLoading,
+    diffError,
+    onRetry,
+    renderSideBySide,
+    allowResponsive,
+}) => {
+    const language = React.useMemo(
+        () => (activeFilePath ? getLanguageFromExtension(activeFilePath) || 'text' : 'text'),
+        [activeFilePath]
+    );
+
+    if (isDiffLoading) {
+        return (
+            <div className="flex h-full items-center justify-center gap-2 text-sm text-muted-foreground">
+                <RiLoader4Line size={16} className="animate-spin" />
+                Loading diff…
+            </div>
+        );
+    }
+
+    if (diffError) {
+        return (
+            <div className="flex h-full flex-col items-center justify-center gap-3 text-center">
+                <p className="text-sm text-destructive">{diffError}</p>
+                <Button size="sm" onClick={onRetry}>
+                    Retry
+                </Button>
+            </div>
+        );
+    }
+
+    if (!fileDiff || (!fileDiff.original && !fileDiff.modified)) {
+        return (
+            <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+                No changes detected for this file
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex h-full w-full">
+            <React.Suspense
+                fallback={(
+                    <div className="flex flex-1 items-center justify-center gap-2 text-sm text-muted-foreground">
+                        <RiLoader4Line size={16} className="animate-spin" />
+                        Loading diff viewer…
+                    </div>
+                )}
+            >
+                <LazyMonacoDiffViewer
+                    original={fileDiff.original}
+                    modified={fileDiff.modified}
+                    language={language}
+                    renderSideBySide={renderSideBySide}
+                    allowResponsive={allowResponsive}
+                />
+            </React.Suspense>
+        </div>
+    );
+});
+
+const useEffectiveDirectory = () => {
+    const { currentSessionId, sessions, worktreeMetadata: worktreeMap } = useSessionStore();
+    const { currentDirectory: fallbackDirectory } = useDirectoryStore();
+
+    const worktreeMetadata = currentSessionId ? worktreeMap.get(currentSessionId) ?? undefined : undefined;
+    const currentSession = sessions.find((session) => session.id === currentSessionId);
+    const sessionDirectory = (currentSession as Record<string, unknown>)?.directory as string | undefined;
+
+    return worktreeMetadata?.path ?? sessionDirectory ?? fallbackDirectory ?? undefined;
+};
+
+export const DiffView: React.FC = () => {
+    const { git } = useRuntimeAPIs();
+    const effectiveDirectory = useEffectiveDirectory();
+
+    const isGitRepo = useIsGitRepo(effectiveDirectory ?? null);
+    const status = useGitStatus(effectiveDirectory ?? null);
+    const isLoadingStatus = useGitStore((state) => state.isLoadingStatus);
+    const { setActiveDirectory, fetchStatus, setDiff } = useGitStore();
+
+    const [selectedFile, setSelectedFile] = React.useState<string | null>(null);
+    const selectedFileRef = React.useRef<string | null>(null);
+
+    const [isDiffLoading, setIsDiffLoading] = React.useState(false);
+    const [diffError, setDiffError] = React.useState<string | null>(null);
+    const [fileDiff, setFileDiff] = React.useState<{ original: string; modified: string } | null>(null);
+
+    const pendingDiffFile = useUIStore((state) => state.pendingDiffFile);
+    const setPendingDiffFile = useUIStore((state) => state.setPendingDiffFile);
+    const diffLayoutPreference = useUIStore((state) => state.diffLayoutPreference);
+    const diffFileLayout = useUIStore((state) => state.diffFileLayout);
+    const setDiffFileLayout = useUIStore((state) => state.setDiffFileLayout);
+    const lastStatusChange = useGitStore(React.useCallback((state) => {
+        if (!effectiveDirectory) return 0;
+        return state.directories.get(effectiveDirectory)?.lastStatusChange ?? 0;
+    }, [effectiveDirectory]));
+
+    const getCachedDiffIfFresh = React.useCallback((directory: string | undefined, filePath: string) => {
+        if (!directory) return null;
+        const dirState = useGitStore.getState().directories.get(directory);
+        if (!dirState) return null;
+        const cached = dirState.diffCache.get(filePath);
+        if (!cached) return null;
+
+        if (cached.fetchedAt < (dirState.lastStatusChange || 0)) {
+            return null;
+        }
+        return cached;
+    }, []);
+
+    const handleSelectFile = React.useCallback((value: string) => {
+        selectedFileRef.current = value;
+        setSelectedFile(value);
+        setDiffError(null);
+
+        const cached = getCachedDiffIfFresh(effectiveDirectory, value);
+        if (cached) {
+            setFileDiff({ original: cached.original, modified: cached.modified });
+            setIsDiffLoading(false);
+        } else {
+            setFileDiff(null);
+            setIsDiffLoading(true);
+        }
+    }, [effectiveDirectory, getCachedDiffIfFresh]);
+
+    React.useEffect(() => {
+        if (effectiveDirectory) {
+            setActiveDirectory(effectiveDirectory);
+
+            const dirState = useGitStore.getState().directories.get(effectiveDirectory);
+            if (!dirState?.status) {
+                fetchStatus(effectiveDirectory, git);
+            }
+        }
+    }, [effectiveDirectory, setActiveDirectory, fetchStatus, git]);
+
+    React.useEffect(() => {
+        if (!pendingDiffFile) return;
+
+        handleSelectFile(pendingDiffFile);
+
+        setPendingDiffFile(null);
+    }, [pendingDiffFile, handleSelectFile, setPendingDiffFile]);
+
+    React.useEffect(() => {
+        selectedFileRef.current = selectedFile;
+    }, [selectedFile]);
+
+    const changedFiles: FileEntry[] = React.useMemo(() => {
+        if (!status?.files) return [];
+        const diffStats = status.diffStats ?? {};
+
+        return status.files
+            .map((file) => ({
+                ...file,
+                insertions: diffStats[file.path]?.insertions ?? 0,
+                deletions: diffStats[file.path]?.deletions ?? 0,
+                isNew: isNewStatusFile(file),
+            }))
+            .sort((a, b) => a.path.localeCompare(b.path));
+    }, [status]);
+
+    const selectedFileEntry = React.useMemo(() => {
+        if (!selectedFile) return null;
+        return changedFiles.find((file) => file.path === selectedFile) ?? null;
+    }, [changedFiles, selectedFile]);
+
+    const currentLayoutForSelectedFile = React.useMemo<'inline' | 'side-by-side' | null>(() => {
+        if (!selectedFileEntry) return null;
+
+        const override = diffFileLayout[selectedFileEntry.path];
+        if (override) return override;
+
+        if (diffLayoutPreference === 'inline' || diffLayoutPreference === 'side-by-side') {
+            return diffLayoutPreference;
+        }
+
+        return selectedFileEntry.isNew ? 'inline' : 'side-by-side';
+    }, [selectedFileEntry, diffFileLayout, diffLayoutPreference]);
+
+    React.useEffect(() => {
+        if (!selectedFile && !pendingDiffFile && changedFiles.length > 0) {
+            const nextPath = changedFiles[0].path;
+            handleSelectFile(nextPath);
+        }
+    }, [changedFiles, selectedFile, pendingDiffFile, handleSelectFile]);
+
+    React.useEffect(() => {
+        if (selectedFile && changedFiles.length > 0) {
+            const stillExists = changedFiles.some((f) => f.path === selectedFile);
+            if (!stillExists) {
+                setSelectedFile(null);
+                selectedFileRef.current = null;
+                setFileDiff(null);
+                setDiffError(null);
+            }
+        }
+    }, [changedFiles, selectedFile]);
+
+    const loadDiff = React.useCallback(async () => {
+        if (!effectiveDirectory || !selectedFileEntry) {
+            setFileDiff(null);
+            setDiffError(null);
+            setIsDiffLoading(false);
+            return;
+        }
+
+        const cacheKey = selectedFileEntry.path;
+
+        const cached = getCachedDiffIfFresh(effectiveDirectory, cacheKey);
+        if (cached) {
+            setFileDiff({ original: cached.original, modified: cached.modified });
+            setDiffError(null);
+            setIsDiffLoading(false);
+            return;
+        }
+
+        setIsDiffLoading(true);
+        setDiffError(null);
+
+        try {
+            const response = await git.getGitFileDiff(effectiveDirectory, {
+                path: selectedFileEntry.path,
+            });
+
+            const diff = {
+                original: response.original ?? '',
+                modified: response.modified ?? '',
+            };
+            setDiff(effectiveDirectory, cacheKey, diff);
+            setFileDiff(diff);
+        } catch (error) {
+            const message = error instanceof Error ? error.message : 'Failed to load diff';
+            setDiffError(message);
+            toast.error(message);
+        } finally {
+            setIsDiffLoading(false);
+        }
+    }, [effectiveDirectory, git, selectedFileEntry, getCachedDiffIfFresh, setDiff, lastStatusChange]);
+
+    React.useEffect(() => {
+        loadDiff();
+    }, [loadDiff]);
+
+    const activeFilePath = selectedFileEntry?.path ?? '';
+
+    const renderContent = () => {
+        if (!effectiveDirectory) {
+            return (
+                <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
+                    Select a session directory to view diffs
+                </div>
+            );
+        }
+
+        if (isLoadingStatus && !status) {
+            return (
+                <div className="flex flex-1 items-center justify-center gap-2 text-sm text-muted-foreground">
+                    <RiLoader4Line size={16} className="animate-spin" />
+                    Loading repository status…
+                </div>
+            );
+        }
+
+        if (isGitRepo === false) {
+            return (
+                <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
+                    Not a git repository. Use the Git tab to initialize or change directories.
+                </div>
+            );
+        }
+
+        if (changedFiles.length === 0) {
+            return (
+                <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
+                    Working tree clean — no changes to display
+                </div>
+            );
+        }
+
+        if (!selectedFileEntry) {
+            return (
+                <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
+                    Select a file to inspect its diff
+                </div>
+            );
+        }
+
+        const effectiveLayout = currentLayoutForSelectedFile ?? 'side-by-side';
+        const renderSideBySide = effectiveLayout === 'side-by-side';
+        const hasFileOverride = !!diffFileLayout[selectedFileEntry.path];
+        const allowResponsive =
+            diffLayoutPreference === 'dynamic' && !hasFileOverride;
+
+        return (
+            <div className="flex flex-1 min-h-0 px-3 py-3">
+                <DiffContent
+                    fileDiff={fileDiff}
+                    activeFilePath={activeFilePath}
+                    isDiffLoading={isDiffLoading}
+                    diffError={diffError}
+                    onRetry={loadDiff}
+                    renderSideBySide={renderSideBySide}
+                    allowResponsive={allowResponsive}
+                />
+            </div>
+        );
+    };
+
+    return (
+        <div className="flex h-full flex-col overflow-hidden bg-background">
+            <div className="flex items-center gap-3 px-3 py-2 bg-background">
+                <div className="flex items-center gap-1 rounded-md px-2 py-1 text-muted-foreground shrink-0">
+                    <RiGitCommitLine size={16} />
+                    <span className="typography-ui-label font-semibold text-foreground">
+                        {isLoadingStatus && !status
+                            ? 'Loading changes…'
+                            : `${changedFiles.length} ${changedFiles.length === 1 ? 'file' : 'files'} changed`}
+                    </span>
+                </div>
+                <FileSelector
+                    changedFiles={changedFiles}
+                    selectedFile={selectedFile}
+                    selectedFileEntry={selectedFileEntry}
+                    onSelectFile={handleSelectFile}
+                />
+                <div className="flex-1" />
+                {selectedFileEntry && currentLayoutForSelectedFile && (
+                    <DiffViewToggle
+                        mode={currentLayoutForSelectedFile === 'side-by-side' ? 'side-by-side' : 'unified'}
+                        onModeChange={(mode: DiffViewMode) => {
+                            if (!selectedFileEntry) return;
+                            const nextLayout: 'inline' | 'side-by-side' =
+                                mode === 'side-by-side' ? 'side-by-side' : 'inline';
+                            setDiffFileLayout(selectedFileEntry.path, nextLayout);
+                        }}
+                    />
+                )}
+            </div>
+
+            {renderContent()}
+        </div>
+    );
+};
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useDiffFileCount = (): number => {
+    const { git } = useRuntimeAPIs();
+    const { currentSessionId, sessions, worktreeMetadata: worktreeMap } = useSessionStore();
+    const { currentDirectory: fallbackDirectory } = useDirectoryStore();
+
+    const worktreeMetadata = currentSessionId ? worktreeMap.get(currentSessionId) ?? undefined : undefined;
+    const currentSession = sessions.find((session) => session.id === currentSessionId);
+    const sessionDirectory = (currentSession as Record<string, unknown>)?.directory as string | undefined;
+    const effectiveDirectory = worktreeMetadata?.path ?? sessionDirectory ?? fallbackDirectory ?? undefined;
+
+    const { setActiveDirectory, fetchStatus } = useGitStore();
+    const fileCount = useGitFileCount(effectiveDirectory ?? null);
+
+    React.useEffect(() => {
+        if (effectiveDirectory) {
+            setActiveDirectory(effectiveDirectory);
+
+            const dirState = useGitStore.getState().directories.get(effectiveDirectory);
+            if (!dirState?.status) {
+                fetchStatus(effectiveDirectory, git);
+            }
+        }
+    }, [effectiveDirectory, setActiveDirectory, fetchStatus, git]);
+
+    return fileCount;
+};
diff --git a/packages/ui/src/components/views/GitView.tsx b/packages/ui/src/components/views/GitView.tsx
new file mode 100644
index 00000000..8a22f8ed
--- /dev/null
+++ b/packages/ui/src/components/views/GitView.tsx
@@ -0,0 +1,1534 @@
+import React from 'react';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useFireworksCelebration } from '@/contexts/FireworksContext';
+import type {
+  GitStatus,
+  GitIdentityProfile,
+  GitLogEntry,
+  CommitFileEntry,
+} from '@/lib/api/types';
+import { useGitIdentitiesStore } from '@/stores/useGitIdentitiesStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import {
+  useGitStore,
+  useGitStatus,
+  useGitBranches,
+  useGitLog,
+  useGitIdentity,
+  useIsGitRepo,
+} from '@/stores/useGitStore';
+import { Button } from '@/components/ui/button';
+import { ButtonLarge } from '@/components/ui/button-large';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/command';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { RiAddLine, RiAiGenerate2, RiArrowDownLine, RiArrowDownSLine, RiArrowUpLine, RiBriefcaseLine, RiCheckboxBlankLine, RiCheckboxLine, RiCodeLine, RiFileCopyLine, RiGitBranchLine, RiGitCommitLine, RiGraduationCapLine, RiHeartLine, RiHomeLine, RiLoader4Line, RiRefreshLine, RiUser3Line } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import { toast } from 'sonner';
+import type { Session } from '@opencode-ai/sdk';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
+import { useUIStore } from '@/stores/useUIStore';
+
+type SyncAction = 'fetch' | 'pull' | 'push' | null;
+type CommitAction = 'commit' | 'commitAndPush' | null;
+
+const sanitizeBranchNameInput = (value: string): string => {
+  return value
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^A-Za-z0-9._/-]/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/\/{2,}/g, '/')
+    .replace(/\/-+/g, '/')
+    .replace(/-+\//g, '/')
+    .replace(/^[-/]+/, '')
+    .replace(/[-/]+$/, '');
+};
+
+const renderToastDescription = (text?: string) =>
+  text ? <span className="text-foreground/80 dark:text-foreground/70">{text}</span> : undefined;
+
+const LOG_SIZE_OPTIONS = [
+  { label: '25 commits', value: 25 },
+  { label: '50 commits', value: 50 },
+  { label: '100 commits', value: 100 },
+];
+
+type GitViewSnapshot = {
+  directory?: string;
+  selectedPaths: string[];
+  commitMessage: string;
+};
+
+let gitViewSnapshot: GitViewSnapshot | null = null;
+
+const useEffectiveDirectory = () => {
+  const { currentSessionId, sessions, worktreeMetadata: worktreeMap } = useSessionStore();
+  const { currentDirectory: fallbackDirectory } = useDirectoryStore();
+
+  const worktreeMetadata = currentSessionId ? worktreeMap.get(currentSessionId) ?? undefined : undefined;
+  const currentSession = sessions.find((session) => session.id === currentSessionId);
+  type SessionWithDirectory = Session & { directory?: string };
+  const sessionDirectory: string | undefined = (currentSession as SessionWithDirectory | undefined)?.directory;
+
+  return worktreeMetadata?.path ?? sessionDirectory ?? fallbackDirectory ?? undefined;
+};
+
+export const GitView: React.FC = () => {
+  const { git } = useRuntimeAPIs();
+  const currentDirectory = useEffectiveDirectory();
+  const { currentSessionId, worktreeMetadata: worktreeMap } = useSessionStore();
+  const worktreeMetadata = currentSessionId ? worktreeMap.get(currentSessionId) ?? undefined : undefined;
+
+  const { profiles, globalIdentity, loadProfiles, loadGlobalIdentity } = useGitIdentitiesStore();
+
+  const isGitRepo = useIsGitRepo(currentDirectory ?? null);
+  const status = useGitStatus(currentDirectory ?? null);
+  const branches = useGitBranches(currentDirectory ?? null);
+  const log = useGitLog(currentDirectory ?? null);
+  const currentIdentity = useGitIdentity(currentDirectory ?? null);
+  const isLoading = useGitStore((state) => state.isLoadingStatus);
+  const isLogLoading = useGitStore((state) => state.isLoadingLog);
+  const {
+    setActiveDirectory,
+    fetchAll,
+    fetchStatus,
+    fetchBranches,
+    fetchLog,
+    fetchIdentity,
+    setLogMaxCount,
+  } = useGitStore();
+
+  const initialSnapshot = React.useMemo(() => {
+    if (!gitViewSnapshot) return null;
+    if (gitViewSnapshot.directory !== currentDirectory) return null;
+    return gitViewSnapshot;
+  }, [currentDirectory]);
+
+  const [commitMessage, setCommitMessage] = React.useState(initialSnapshot?.commitMessage ?? '');
+  const [newBranchName, setNewBranchName] = React.useState('');
+  const sanitizedNewBranch = React.useMemo(
+    () => sanitizeBranchNameInput(newBranchName),
+    [newBranchName]
+  );
+  const [syncAction, setSyncAction] = React.useState<SyncAction>(null);
+  const [commitAction, setCommitAction] = React.useState<CommitAction>(null);
+  const [creatingBranch, setCreatingBranch] = React.useState(false);
+  const [lastSyncMessage, setLastSyncMessage] = React.useState<string | null>(null);
+  const [logMaxCountLocal, setLogMaxCountLocal] = React.useState<number>(25);
+  const [isSettingIdentity, setIsSettingIdentity] = React.useState(false);
+  const [branchPickerOpen, setBranchPickerOpen] = React.useState(false);
+  const [branchSearch, setBranchSearch] = React.useState('');
+  const [error] = React.useState<string | null>(null);
+  const { triggerFireworks } = useFireworksCelebration();
+
+  const [selectedPaths, setSelectedPaths] = React.useState<Set<string>>(
+    () => new Set(initialSnapshot?.selectedPaths ?? [])
+  );
+  const [hasUserAdjustedSelection, setHasUserAdjustedSelection] = React.useState(false);
+  const [revertingPaths, setRevertingPaths] = React.useState<Set<string>>(new Set());
+  const [isGeneratingMessage, setIsGeneratingMessage] = React.useState(false);
+  const [generatedHighlights, setGeneratedHighlights] = React.useState<string[]>([]);
+  const clearGeneratedHighlights = React.useCallback(() => {
+    setGeneratedHighlights([]);
+  }, []);
+  const [selectedCommitHash, setSelectedCommitHash] = React.useState<string | null>(null);
+  const [commitFiles, setCommitFiles] = React.useState<CommitFileEntry[]>([]);
+  const [isLoadingCommitFiles, setIsLoadingCommitFiles] = React.useState(false);
+
+  const selectedCommit = React.useMemo(() => {
+    if (!selectedCommitHash || !log) return null;
+    return log.all.find((entry) => entry.hash === selectedCommitHash) ?? null;
+  }, [selectedCommitHash, log]);
+
+  const handleCopyCommitHash = React.useCallback((hash: string) => {
+    navigator.clipboard.writeText(hash).then(() => {
+      toast.success('Commit hash copied');
+    }).catch(() => {
+      toast.error('Failed to copy');
+    });
+  }, []);
+
+  React.useEffect(() => {
+    if (!selectedCommitHash || !currentDirectory || !git) {
+      setCommitFiles([]);
+      return;
+    }
+
+    let cancelled = false;
+    setIsLoadingCommitFiles(true);
+
+    git.getCommitFiles(currentDirectory, selectedCommitHash)
+      .then((response) => {
+        if (!cancelled) {
+          setCommitFiles(response.files);
+        }
+      })
+      .catch((error) => {
+        console.error('Failed to fetch commit files:', error);
+        if (!cancelled) {
+          setCommitFiles([]);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setIsLoadingCommitFiles(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedCommitHash, currentDirectory, git]);
+
+  React.useEffect(() => {
+    return () => {
+      if (!currentDirectory) {
+        gitViewSnapshot = null;
+        return;
+      }
+
+      gitViewSnapshot = {
+        directory: currentDirectory,
+        selectedPaths: Array.from(selectedPaths),
+        commitMessage,
+      };
+    };
+  }, [commitMessage, currentDirectory, selectedPaths]);
+
+  React.useEffect(() => {
+    loadProfiles();
+    loadGlobalIdentity();
+  }, [loadProfiles, loadGlobalIdentity]);
+
+  React.useEffect(() => {
+    if (currentDirectory) {
+      setActiveDirectory(currentDirectory);
+
+      const dirState = useGitStore.getState().directories.get(currentDirectory);
+      if (!dirState?.status) {
+        fetchAll(currentDirectory, git, { force: true });
+      }
+    }
+  }, [currentDirectory, setActiveDirectory, fetchAll, git]);
+
+  const refreshStatusAndBranches = React.useCallback(
+    async (showErrors = true) => {
+      if (!currentDirectory) return;
+
+      try {
+        await Promise.all([
+          fetchStatus(currentDirectory, git),
+          fetchBranches(currentDirectory, git),
+        ]);
+      } catch (err) {
+        if (showErrors) {
+          const message =
+            err instanceof Error ? err.message : 'Failed to refresh repository state';
+          toast.error(message);
+        }
+      }
+    },
+    [currentDirectory, git, fetchStatus, fetchBranches]
+  );
+
+  const refreshLog = React.useCallback(async () => {
+    if (!currentDirectory) return;
+    await fetchLog(currentDirectory, git, logMaxCountLocal);
+  }, [currentDirectory, git, fetchLog, logMaxCountLocal]);
+
+  const refreshIdentity = React.useCallback(async () => {
+    if (!currentDirectory) return;
+    await fetchIdentity(currentDirectory, git);
+  }, [currentDirectory, git, fetchIdentity]);
+
+  const changeEntries = React.useMemo(() => {
+    if (!status) return [];
+    const files = status.files ?? [];
+    const unique = new Map<string, GitStatus['files'][number]>();
+
+    files.forEach((file) => {
+      unique.set(file.path, file);
+    });
+
+    return Array.from(unique.values()).sort((a, b) => a.path.localeCompare(b.path));
+  }, [status]);
+
+  React.useEffect(() => {
+    if (!status || changeEntries.length === 0) {
+      setSelectedPaths(new Set());
+      setHasUserAdjustedSelection(false);
+      return;
+    }
+
+    setSelectedPaths((previous) => {
+      const next = new Set<string>();
+      const previousSet = previous ?? new Set<string>();
+
+      changeEntries.forEach((file) => {
+        if (previousSet.has(file.path)) {
+          next.add(file.path);
+        } else if (!hasUserAdjustedSelection) {
+          next.add(file.path);
+        }
+      });
+
+      return next;
+    });
+  }, [status, changeEntries, hasUserAdjustedSelection]);
+
+  const handleSyncAction = async (action: Exclude<SyncAction, null>) => {
+    if (!currentDirectory) return;
+    setSyncAction(action);
+
+    try {
+      if (action === 'fetch') {
+        await git.gitFetch(currentDirectory);
+        toast.success('Fetched latest updates');
+      } else if (action === 'pull') {
+        const result = await git.gitPull(currentDirectory);
+        toast.success(`Pulled ${result.files.length} file${result.files.length === 1 ? '' : 's'}`);
+      } else if (action === 'push') {
+        await git.gitPush(currentDirectory);
+        toast.success('Pushed to remote');
+      }
+
+      setLastSyncMessage(`${action.toUpperCase()} completed at ${new Date().toLocaleTimeString()}`);
+      await refreshStatusAndBranches(false);
+      await refreshLog();
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : `Failed to ${action === 'pull' ? 'pull' : action}`;
+      toast.error(message);
+    } finally {
+      setSyncAction(null);
+    }
+  };
+
+  const handleCommit = async (options: { pushAfter?: boolean } = {}) => {
+    if (!currentDirectory) return;
+    if (!commitMessage.trim()) {
+      toast.error('Please enter a commit message');
+      return;
+    }
+
+    const filesToCommit = Array.from(selectedPaths).sort();
+    if (filesToCommit.length === 0) {
+      toast.error('Select at least one file to commit');
+      return;
+    }
+
+    const action: CommitAction = options.pushAfter ? 'commitAndPush' : 'commit';
+    setCommitAction(action);
+
+    try {
+      await git.createGitCommit(currentDirectory, commitMessage.trim(), {
+        files: filesToCommit,
+      });
+      toast.success('Commit created successfully');
+      setCommitMessage('');
+      setSelectedPaths(new Set());
+      setHasUserAdjustedSelection(false);
+
+      await refreshStatusAndBranches();
+
+      if (options.pushAfter) {
+        await git.gitPush(currentDirectory);
+        toast.success('Pushed to remote');
+        triggerFireworks();
+        await refreshStatusAndBranches(false);
+      } else {
+        await refreshStatusAndBranches(false);
+      }
+
+      await refreshLog();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to create commit';
+      toast.error(message);
+    } finally {
+      setCommitAction(null);
+    }
+  };
+
+  const handleGenerateCommitMessage = React.useCallback(async () => {
+    if (!currentDirectory) return;
+    if (selectedPaths.size === 0) {
+      toast.error('Select at least one file to describe');
+      return;
+    }
+
+    setIsGeneratingMessage(true);
+    try {
+      const { message } = await git.generateCommitMessage(currentDirectory, Array.from(selectedPaths));
+      const subject = message.subject?.trim() ?? '';
+      const highlights = Array.isArray(message.highlights) ? message.highlights : [];
+
+      if (subject) {
+        setCommitMessage(subject);
+      }
+      setGeneratedHighlights(highlights);
+
+      toast.success('Commit message generated');
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to generate commit message';
+      toast.error(message);
+    } finally {
+      setIsGeneratingMessage(false);
+    }
+  }, [currentDirectory, selectedPaths, git]);
+
+  const handleCreateBranch = async () => {
+    if (!currentDirectory || !status) return;
+    const finalName = sanitizedNewBranch;
+    if (!finalName) {
+      toast.error('Provide a branch name using letters, numbers, ".", "_", "-" or "/".');
+      return;
+    }
+    const checkoutBase = status.current ?? null;
+
+    setCreatingBranch(true);
+    try {
+      await git.createBranch(currentDirectory, finalName, checkoutBase ?? 'HEAD');
+      toast.success(`Created branch ${finalName}`);
+
+      let pushSucceeded = false;
+      try {
+        await git.checkoutBranch(currentDirectory, finalName);
+        await git.gitPush(currentDirectory, {
+          remote: 'origin',
+          branch: finalName,
+          options: ['--set-upstream'],
+        });
+        pushSucceeded = true;
+      } catch (pushError) {
+        const message =
+          pushError instanceof Error ? pushError.message : 'Unable to push new branch to origin.';
+        toast.warning('Branch created locally', {
+          description: renderToastDescription(`Upstream setup failed: ${message}`),
+        });
+      } finally {
+        if (checkoutBase) {
+          try {
+            await git.checkoutBranch(currentDirectory, checkoutBase);
+          } catch (restoreError) {
+            console.warn('Failed to restore original branch after creation:', restoreError);
+          }
+        }
+      }
+
+      setNewBranchName('');
+      await refreshStatusAndBranches();
+      await refreshLog();
+
+      if (pushSucceeded) {
+        toast.success(`Upstream set for ${finalName}`);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to create branch';
+      toast.error(message);
+    } finally {
+      setCreatingBranch(false);
+    }
+  };
+
+  const handleCheckoutBranch = async (branch: string) => {
+    if (!currentDirectory) return;
+    const normalized = branch.replace(/^remotes\//, '');
+
+    if (status?.current === normalized) {
+      setBranchPickerOpen(false);
+      return;
+    }
+
+    try {
+      await git.checkoutBranch(currentDirectory, normalized);
+      toast.success(`Checked out ${normalized}`);
+      setBranchPickerOpen(false);
+      setBranchSearch('');
+      await refreshStatusAndBranches();
+      const activeBranch = status?.current;
+      if (activeBranch) {
+        await git.checkoutBranch(currentDirectory, activeBranch);
+        toast.success(`Checked out ${activeBranch}`);
+      }
+      await refreshLog();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : `Failed to checkout ${normalized}`;
+      toast.error(message);
+    }
+  };
+
+  const handleApplyIdentity = async (profile: GitIdentityProfile) => {
+    if (!currentDirectory) return;
+    setIsSettingIdentity(true);
+
+    try {
+      await git.setGitIdentity(currentDirectory, profile.id);
+      toast.success(`Applied "${profile.name}" to repository`);
+      await refreshIdentity();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to apply git identity';
+      toast.error(message);
+    } finally {
+      setIsSettingIdentity(false);
+    }
+  };
+
+  const localBranches = React.useMemo(() => {
+    if (!branches?.all) return [];
+    return branches.all.filter((branchName: string) => !branchName.startsWith('remotes/')).sort();
+  }, [branches]);
+
+  const remoteBranches = React.useMemo(() => {
+    if (!branches?.all) return [];
+    return branches.all
+      .filter((branchName: string) => branchName.startsWith('remotes/'))
+      .map((branchName: string) => branchName.replace(/^remotes\//, ''))
+      .sort();
+  }, [branches]);
+
+  const branchOptions = React.useMemo(() => {
+    const search = branchSearch.trim().toLowerCase();
+    if (!search) {
+      return {
+        locals: localBranches,
+        remotes: remoteBranches,
+      };
+    }
+
+    return {
+      locals: localBranches.filter((branch: string) => branch.toLowerCase().includes(search)),
+      remotes: remoteBranches.filter((branch: string) => branch.toLowerCase().includes(search)),
+    };
+  }, [branchSearch, localBranches, remoteBranches]);
+
+  React.useEffect(() => {
+    if (!branchPickerOpen) {
+      setBranchSearch('');
+    }
+  }, [branchPickerOpen]);
+
+  const availableIdentities = React.useMemo(() => {
+    const unique = new Map<string, GitIdentityProfile>();
+    if (globalIdentity) {
+      unique.set(globalIdentity.id, globalIdentity);
+    }
+    for (const profile of profiles) {
+      unique.set(profile.id, profile);
+    }
+    return Array.from(unique.values());
+  }, [profiles, globalIdentity]);
+
+  const activeIdentityProfile = React.useMemo((): GitIdentityProfile | null => {
+    if (currentIdentity?.userName && currentIdentity?.userEmail) {
+      const match = profiles.find(
+        (profile) =>
+          profile.userName === currentIdentity.userName &&
+          profile.userEmail === currentIdentity.userEmail
+      );
+
+      if (match) {
+        return match;
+      }
+
+      if (
+        globalIdentity &&
+        globalIdentity.userName === currentIdentity.userName &&
+        globalIdentity.userEmail === currentIdentity.userEmail
+      ) {
+        return globalIdentity;
+      }
+
+      return {
+        id: 'local-config',
+        name: currentIdentity.userName,
+        userName: currentIdentity.userName,
+        userEmail: currentIdentity.userEmail,
+        sshKey: currentIdentity.sshCommand?.replace('ssh -i ', '') ?? null,
+        color: 'info',
+        icon: 'user',
+      };
+    }
+
+    return globalIdentity ?? null;
+  }, [currentIdentity, profiles, globalIdentity]);
+
+  const uniqueChangeCount = changeEntries.length;
+  const selectedCount = selectedPaths.size;
+  const isBusy = isLoading || syncAction !== null || commitAction !== null;
+
+  const toggleFileSelection = (path: string) => {
+    setSelectedPaths((previous) => {
+      const next = new Set(previous);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+    setHasUserAdjustedSelection(true);
+  };
+
+  const selectAll = () => {
+    const next = new Set(changeEntries.map((file) => file.path));
+    setSelectedPaths(next);
+    setHasUserAdjustedSelection(true);
+  };
+
+  const clearSelection = () => {
+    setSelectedPaths(new Set());
+    setHasUserAdjustedSelection(true);
+  };
+
+  const handleRevertFile = React.useCallback(
+    async (filePath: string) => {
+      if (!currentDirectory) return;
+
+      setRevertingPaths((previous) => {
+        const next = new Set(previous);
+        next.add(filePath);
+        return next;
+      });
+
+      try {
+        await git.revertGitFile(currentDirectory, filePath);
+        toast.success(`Reverted ${filePath}`);
+        await refreshStatusAndBranches(false);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Failed to revert changes';
+        toast.error(message);
+      } finally {
+        setRevertingPaths((previous) => {
+          const next = new Set(previous);
+          next.delete(filePath);
+          return next;
+        });
+      }
+    },
+    [currentDirectory, refreshStatusAndBranches, git]
+  );
+
+  if (!currentDirectory) {
+    return (
+      <div className="flex h-full items-center justify-center px-4 text-center">
+        <p className="typography-ui-label text-muted-foreground">
+          Select a session or directory to view repository details.
+        </p>
+      </div>
+    );
+  }
+
+  if (isLoading && isGitRepo === null) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <RiLoader4Line className="size-4 animate-spin" />
+          <span className="typography-ui-label">Checking repository…</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (isGitRepo === false) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center px-4 text-center">
+        <RiGitBranchLine className="mb-3 size-6 text-muted-foreground" />
+        <p className="typography-ui-label font-semibold text-foreground">Not a Git repository</p>
+        <p className="typography-meta mt-1 text-muted-foreground">
+          Choose a different directory or initialize Git to use this workspace.
+        </p>
+      </div>
+    );
+  }
+
+  const hasChanges = uniqueChangeCount > 0;
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden bg-background">
+      {}
+      {status && (
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-border/40 px-3 py-2 bg-background">
+          <div className="flex items-center gap-2">
+            <RiGitBranchLine className="size-4 text-primary" />
+            <span className="typography-ui-label font-semibold text-foreground">
+              {status.current || 'Detached HEAD'}
+            </span>
+            {status.tracking && (
+              <span className="typography-meta text-muted-foreground">
+                → {status.tracking}
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-3 typography-meta text-muted-foreground">
+            <span>
+              <RiArrowUpLine className="inline size-3.5 text-primary/70" />
+              <span className="font-semibold text-foreground ml-0.5">{status.ahead}</span>
+            </span>
+            <span>
+              <RiArrowDownLine className="inline size-3.5 text-primary/70" />
+              <span className="font-semibold text-foreground ml-0.5">{status.behind}</span>
+            </span>
+            <span>
+              <span className="font-semibold text-foreground">{status.files.length}</span> changes
+            </span>
+          </div>
+          <div className="flex-1" />
+          <IdentityDropdown
+            activeProfile={activeIdentityProfile}
+            identities={availableIdentities}
+            onSelect={handleApplyIdentity}
+            isApplying={isSettingIdentity}
+          />
+        </div>
+      )}
+
+      {}
+      <div className="flex flex-wrap items-center gap-1.5 px-3 py-2 border-b border-border/40 bg-background/80">
+        <ButtonLarge
+          variant="default"
+          onClick={() => handleSyncAction('fetch')}
+          disabled={syncAction !== null || !status}
+        >
+          {syncAction === 'fetch' ? (
+            <RiLoader4Line size={16} className="animate-spin" />
+          ) : (
+            <RiRefreshLine size={16} />
+          )}
+          Fetch
+        </ButtonLarge>
+        <ButtonLarge
+          variant="default"
+          onClick={() => handleSyncAction('pull')}
+          disabled={syncAction !== null || !status}
+        >
+          {syncAction === 'pull' ? (
+            <RiLoader4Line size={16} className="animate-spin" />
+          ) : (
+            <RiArrowDownLine size={16} />
+          )}
+          Pull
+        </ButtonLarge>
+        <ButtonLarge
+          variant="default"
+          onClick={() => handleSyncAction('push')}
+          disabled={syncAction !== null || !status}
+        >
+          {syncAction === 'push' ? (
+            <RiLoader4Line size={16} className="animate-spin" />
+          ) : (
+            <RiArrowUpLine size={16} />
+          )}
+          Push
+        </ButtonLarge>
+
+        <div className="hidden sm:block w-px h-6 bg-border/60 mx-1" />
+
+        {}
+        {!worktreeMetadata && (
+          <>
+            <DropdownMenu open={branchPickerOpen} onOpenChange={setBranchPickerOpen}>
+              <Tooltip delayDuration={1000}>
+                <TooltipTrigger asChild>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm" className="gap-1.5 px-2 py-1 h-8">
+                      <RiGitBranchLine className="size-4" />
+                      <span className="max-w-[120px] truncate hidden sm:inline">
+                        {status?.current || 'Branch'}
+                      </span>
+                      <RiArrowDownSLine className="size-4 opacity-60" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                </TooltipTrigger>
+                <TooltipContent sideOffset={8}>
+                  Switch branch ({localBranches.length} local · {remoteBranches.length} remote)
+                </TooltipContent>
+              </Tooltip>
+              <DropdownMenuContent align="start" className="w-72 p-0 max-h-[60vh] flex flex-col">
+                <Command className="h-full min-h-0">
+                  <CommandInput
+                    placeholder="Search branches…"
+                    value={branchSearch}
+                    onValueChange={setBranchSearch}
+                  />
+                  <CommandList
+                    scrollbarClassName="overlay-scrollbar--flush overlay-scrollbar--dense overlay-scrollbar--zero"
+                    disableHorizontal
+                  >
+                    <CommandEmpty>No branches found.</CommandEmpty>
+                    <CommandGroup heading="Local branches">
+                      {branchOptions.locals.map((branchName: string) => (
+                        <CommandItem
+                          key={`local-${branchName}`}
+                          onSelect={() => handleCheckoutBranch(branchName)}
+                        >
+                          <span className="flex flex-1 flex-col">
+                            <span className="typography-ui-label text-foreground">
+                              {branchName}
+                            </span>
+                            {branches?.branches?.[branchName]?.ahead ||
+                            branches?.branches?.[branchName]?.behind ? (
+                              <span className="typography-micro text-muted-foreground">
+                                {branches.branches[branchName].ahead || 0} ahead ·{' '}
+                                {branches.branches[branchName].behind || 0} behind
+                              </span>
+                            ) : null}
+                          </span>
+                          {status?.current === branchName && (
+                            <span className="typography-micro text-primary">Current</span>
+                          )}
+                        </CommandItem>
+                      ))}
+                      {branchOptions.locals.length === 0 && (
+                        <CommandItem disabled className="justify-center">
+                          <span className="typography-meta text-muted-foreground">
+                            No local branches
+                          </span>
+                        </CommandItem>
+                      )}
+                    </CommandGroup>
+                    <CommandSeparator />
+                    <CommandGroup heading="Remote branches">
+                      {branchOptions.remotes.map((branchName: string) => (
+                        <CommandItem
+                          key={`remote-${branchName}`}
+                          onSelect={() => handleCheckoutBranch(branchName)}
+                        >
+                          <span className="typography-ui-label text-foreground">{branchName}</span>
+                        </CommandItem>
+                      ))}
+                      {branchOptions.remotes.length === 0 && (
+                        <CommandItem disabled className="justify-center">
+                          <span className="typography-meta text-muted-foreground">
+                            No remote branches
+                          </span>
+                        </CommandItem>
+                      )}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <Input
+              placeholder="New branch"
+              value={newBranchName}
+              onChange={(event) => setNewBranchName(event.target.value)}
+              className="h-8 w-32 sm:w-40 rounded-lg bg-background/80 text-sm"
+            />
+            <Tooltip delayDuration={1000}>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="default"
+                  size="sm"
+                  className="h-8 px-2"
+                  onClick={handleCreateBranch}
+                  disabled={creatingBranch || !sanitizedNewBranch}
+                >
+                  {creatingBranch ? (
+                    <RiLoader4Line className="size-4 animate-spin" />
+                  ) : (
+                    <RiAddLine className="size-4" />
+                  )}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent sideOffset={8}>
+                {sanitizedNewBranch ? `Create branch "${sanitizedNewBranch}"` : 'Enter branch name'}
+              </TooltipContent>
+            </Tooltip>
+          </>
+        )}
+
+        <div className="flex-1" />
+        {lastSyncMessage && (
+          <span className="typography-micro text-muted-foreground hidden lg:inline">
+            {lastSyncMessage}
+          </span>
+        )}
+      </div>
+
+      {}
+      {error && (
+        <div className="mx-3 mt-3 rounded-xl border border-destructive/30 bg-destructive/10 px-3 py-2">
+          <p className="typography-ui-label text-destructive">{error}</p>
+          <p className="typography-meta text-destructive/80">
+            Try refreshing or confirm the repository is accessible.
+          </p>
+        </div>
+      )}
+
+      {}
+      <ScrollableOverlay outerClassName="flex-1 min-h-0" className="p-3">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+          {}
+          <section className="flex flex-col rounded-2xl border border-border/60 bg-background/70 min-h-[280px] max-h-[400px]">
+            <header className="flex items-center justify-between gap-2 px-3 py-2 border-b border-border/40">
+              <h3 className="typography-ui-header font-semibold text-foreground">Changes</h3>
+              <div className="flex items-center gap-2">
+                <span className="typography-meta text-muted-foreground">
+                  {selectedCount}/{uniqueChangeCount}
+                </span>
+                {uniqueChangeCount > 0 && (
+                  <>
+                    <Button variant="ghost" size="sm" className="h-6 px-2 text-xs" onClick={selectAll}>
+                      All
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-6 px-2 text-xs"
+                      onClick={clearSelection}
+                      disabled={selectedCount === 0}
+                    >
+                      None
+                    </Button>
+                  </>
+                )}
+              </div>
+            </header>
+            <ScrollableOverlay outerClassName="flex-1 min-h-0" className="w-full">
+              {status?.isClean || uniqueChangeCount === 0 ? (
+                <div className="flex h-full items-center justify-center p-4">
+                  <div className="text-center">
+                    <div className="inline-flex items-center gap-2 rounded-xl border border-emerald-500/40 bg-emerald-500/10 px-4 py-3">
+                      <RiGitCommitLine className="size-5" style={{ color: 'var(--status-success)' }} />
+                      <p className="typography-ui-label" style={{ color: 'var(--status-success)' }}>
+                        Working tree clean
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <ul className="divide-y divide-border/60">
+                  {changeEntries.map((file) => (
+                    <ChangeRow
+                      key={file.path}
+                      file={file}
+                      checked={selectedPaths.has(file.path)}
+                      stats={status?.diffStats?.[file.path]}
+                      onToggle={() => toggleFileSelection(file.path)}
+                      onViewDiff={() => useUIStore.getState().navigateToDiff(file.path)}
+                      onRevert={() => handleRevertFile(file.path)}
+                      isReverting={revertingPaths.has(file.path)}
+                    />
+                  ))}
+                </ul>
+              )}
+            </ScrollableOverlay>
+          </section>
+
+          {}
+          <section className="flex flex-col rounded-2xl border border-border/60 bg-background/70 min-h-[280px]">
+            <header className="flex items-center justify-between gap-2 px-3 py-2 border-b border-border/40">
+              <h3 className="typography-ui-header font-semibold text-foreground">Commit</h3>
+            </header>
+            <div className="flex-1 min-h-0 flex flex-col p-3 gap-3">
+              {generatedHighlights.length > 0 && (
+                <div className="space-y-2 rounded-xl border border-border/60 bg-background/60 px-3 py-2 shrink-0">
+                  <div className="flex items-center justify-between gap-2">
+                    <p className="typography-micro text-muted-foreground">AI highlights</p>
+                    <Tooltip delayDuration={1000}>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="size-6"
+                          onClick={() => {
+                            if (generatedHighlights.length === 0) return;
+                            const normalizedHighlights = generatedHighlights
+                              .map((text) => text.trim())
+                              .filter(Boolean);
+                            if (normalizedHighlights.length === 0) {
+                              clearGeneratedHighlights();
+                              return;
+                            }
+                            setCommitMessage((current) => {
+                              const base = current.trim();
+                              const separator = base.length > 0 ? '\n\n' : '';
+                              return `${base}${separator}${normalizedHighlights.join('\n')}`.trim();
+                            });
+                            clearGeneratedHighlights();
+                          }}
+                          aria-label="Insert highlights into commit message"
+                        >
+                          <RiArrowDownLine className="size-4" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent sideOffset={8}>Append highlights to commit message</TooltipContent>
+                    </Tooltip>
+                  </div>
+                  <ul className="space-y-1">
+                    {generatedHighlights.map((highlight, index) => (
+                      <li key={index} className="typography-meta text-foreground">
+                        {highlight}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+              <Textarea
+                value={commitMessage}
+                onChange={(event) => setCommitMessage(event.target.value)}
+                placeholder={hasChanges ? 'Commit message' : 'No changes to commit'}
+                rows={generatedHighlights.length > 0 ? 4 : 8}
+                disabled={commitAction !== null || !hasChanges}
+                className={cn(
+                  "flex-1 rounded-lg bg-background/80 resize-none",
+                  generatedHighlights.length > 0 ? "min-h-[80px]" : "min-h-[180px]"
+                )}
+              />
+              <div className="flex items-center gap-2 shrink-0">
+                <Tooltip delayDuration={1000}>
+                  <TooltipTrigger asChild>
+                    <ButtonLarge
+                      variant="ghost"
+                      onClick={handleGenerateCommitMessage}
+                      disabled={
+                        isGeneratingMessage ||
+                        commitAction !== null ||
+                        selectedCount === 0 ||
+                        isBusy
+                      }
+                      className="px-3"
+                      aria-label="Generate commit message"
+                    >
+                      {isGeneratingMessage ? (
+                        <RiLoader4Line className="size-4 animate-spin" />
+                      ) : (
+                        <RiAiGenerate2 className="size-4 text-primary" />
+                      )}
+                    </ButtonLarge>
+                  </TooltipTrigger>
+                  <TooltipContent sideOffset={8}>Generate commit message with AI</TooltipContent>
+                </Tooltip>
+                <div className="flex-1" />
+                <ButtonLarge
+                  variant="outline"
+                  onClick={() => {
+                    clearGeneratedHighlights();
+                    handleCommit({ pushAfter: false });
+                  }}
+                  disabled={
+                    commitAction !== null ||
+                    !commitMessage.trim() ||
+                    selectedCount === 0 ||
+                    isGeneratingMessage
+                  }
+                >
+                  {commitAction === 'commit' ? (
+                    <>
+                      <RiLoader4Line className="size-4 animate-spin" />
+                      Committing…
+                    </>
+                  ) : (
+                    <>
+                      <RiGitCommitLine className="size-4" />
+                      Commit
+                    </>
+                  )}
+                </ButtonLarge>
+                <ButtonLarge
+                  variant="default"
+                  onClick={() => {
+                    clearGeneratedHighlights();
+                    handleCommit({ pushAfter: true });
+                  }}
+                  disabled={
+                    commitAction !== null ||
+                    !commitMessage.trim() ||
+                    selectedCount === 0 ||
+                    isGeneratingMessage
+                  }
+                >
+                  {commitAction === 'commitAndPush' ? (
+                    <>
+                      <RiLoader4Line className="size-4 animate-spin" />
+                      Pushing…
+                    </>
+                  ) : (
+                    <>
+                      <RiArrowUpLine className="size-4" />
+                      Commit &amp; Push
+                    </>
+                  )}
+                </ButtonLarge>
+              </div>
+            </div>
+          </section>
+
+          {}
+          {log && (
+            <section className="lg:col-span-2 rounded-2xl border border-border/60 bg-background/70 flex flex-col min-h-[200px]">
+              <header className="flex items-center justify-between gap-2 px-3 py-2 border-b border-border/40 shrink-0">
+                <h3 className="typography-ui-header font-semibold text-foreground">History</h3>
+                <Select
+                  value={String(logMaxCountLocal)}
+                  onValueChange={(value) => {
+                    const newCount = Number(value);
+                    setLogMaxCountLocal(newCount);
+                    if (currentDirectory) {
+                      setLogMaxCount(currentDirectory, newCount);
+                      fetchLog(currentDirectory, git, newCount);
+                    }
+                  }}
+                  disabled={isLogLoading}
+                >
+                  <SelectTrigger
+                    size="sm"
+                    className="data-[size=sm]:h-auto h-7 min-h-7 w-auto justify-between px-2 py-0"
+                    disabled={isLogLoading}
+                  >
+                    <SelectValue placeholder="Commits" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {LOG_SIZE_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={String(option.value)}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </header>
+              <div className="flex-1 min-h-0 grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-border/40">
+                {}
+                <ScrollableOverlay outerClassName="min-h-0 max-h-48 lg:max-h-64" className="w-full">
+                  {log.all.length === 0 ? (
+                    <div className="flex h-full items-center justify-center p-4">
+                      <p className="typography-ui-label text-muted-foreground">
+                        No commits found
+                      </p>
+                    </div>
+                  ) : (
+                    <ul className="divide-y divide-border/60">
+                      {log.all.map((entry) => (
+                        <CommitRow
+                          key={entry.hash}
+                          entry={entry}
+                          isSelected={selectedCommitHash === entry.hash}
+                          onSelect={() => setSelectedCommitHash(entry.hash)}
+                        />
+                      ))}
+                    </ul>
+                  )}
+                </ScrollableOverlay>
+
+                {}
+                <div className="flex flex-col min-h-[120px] lg:min-h-0 overflow-hidden">
+                  {selectedCommit ? (
+                    <div className="flex flex-col h-full overflow-hidden">
+                      {}
+                      <div className="p-3 pb-2 shrink-0 border-b border-border/40">
+                        <p className="typography-ui-label font-semibold text-foreground line-clamp-2">
+                          {selectedCommit.message}
+                        </p>
+                        <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 typography-micro text-muted-foreground">
+                          <span className="text-foreground">{selectedCommit.author_name}</span>
+                          <span>{formatCommitDate(selectedCommit.date)}</span>
+                          <code className="font-mono">{selectedCommit.hash.slice(0, 8)}</code>
+                          <Tooltip delayDuration={500}>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-5 px-1.5 -ml-1"
+                                onClick={() => handleCopyCommitHash(selectedCommit.hash)}
+                              >
+                                <RiFileCopyLine className="size-3" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent sideOffset={8}>Copy SHA</TooltipContent>
+                          </Tooltip>
+                        </div>
+                      </div>
+
+                      {}
+                      <div className="flex-1 min-h-0 overflow-hidden">
+                        <div className="px-3 py-2 border-b border-border/40 shrink-0">
+                          <span className="typography-micro text-muted-foreground">
+                            {isLoadingCommitFiles ? 'Loading...' : `${commitFiles.length} file${commitFiles.length === 1 ? '' : 's'}`}
+                          </span>
+                        </div>
+                        <ScrollableOverlay outerClassName="flex-1 min-h-0 max-h-32" className="w-full">
+                          {isLoadingCommitFiles ? (
+                            <div className="flex items-center justify-center p-3">
+                              <RiLoader4Line className="size-4 animate-spin text-muted-foreground" />
+                            </div>
+                          ) : commitFiles.length === 0 ? (
+                            <div className="p-3 text-center">
+                              <p className="typography-micro text-muted-foreground">No files</p>
+                            </div>
+                          ) : (
+                            <ul className="divide-y divide-border/40">
+                              {commitFiles.map((file) => (
+                                <li key={file.path} className="flex items-center gap-2 px-3 py-1.5">
+                                  <span className={cn(
+                                    "typography-micro font-semibold w-4 shrink-0 text-center",
+                                    file.changeType === 'A' && "text-emerald-500",
+                                    file.changeType === 'D' && "text-red-500",
+                                    file.changeType === 'M' && "text-amber-500",
+                                    file.changeType === 'R' && "text-blue-500"
+                                  )}>
+                                    {file.changeType}
+                                  </span>
+                                  <span className="typography-micro text-foreground truncate flex-1" title={file.path}>
+                                    {file.path}
+                                  </span>
+                                  {!file.isBinary && (
+                                    <span className="typography-micro shrink-0">
+                                      <span className="font-semibold" style={{ color: 'var(--status-success)' }}>+{file.insertions}</span>
+                                      <span className="text-muted-foreground mx-0.5">/</span>
+                                      <span className="font-semibold" style={{ color: 'var(--status-error)' }}>-{file.deletions}</span>
+                                    </span>
+                                  )}
+                                  {file.isBinary && (
+                                    <span className="typography-micro text-muted-foreground shrink-0">binary</span>
+                                  )}
+                                </li>
+                              ))}
+                            </ul>
+                          )}
+                        </ScrollableOverlay>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="flex h-full items-center justify-center text-center p-3">
+                      <p className="typography-meta text-muted-foreground">
+                        Select a commit to view details
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </section>
+          )}
+        </div>
+      </ScrollableOverlay>
+    </div>
+  );
+};
+
+interface ChangeRowProps {
+  file: GitStatus['files'][number];
+  checked: boolean;
+  onToggle: () => void;
+  onViewDiff: () => void;
+  onRevert: () => void;
+  isReverting: boolean;
+  stats?: { insertions: number; deletions: number };
+}
+
+const ChangeRow: React.FC<ChangeRowProps> = ({ file, checked, onToggle, onViewDiff, onRevert, isReverting, stats }) => {
+  const descriptor = React.useMemo(() => describeChange(file), [file]);
+  const indicatorLabel = descriptor.description ?? descriptor.code;
+  const insertions = stats?.insertions ?? 0;
+  const deletions = stats?.deletions ?? 0;
+
+  return (
+    <li>
+      <div
+        className="flex items-center gap-3 px-3 py-2 hover:bg-sidebar/40 cursor-pointer"
+        role="button"
+        tabIndex={0}
+        onClick={onViewDiff}
+        onKeyDown={(event) => {
+          if (event.key === ' ') {
+            event.preventDefault();
+            onToggle();
+          } else if (event.key === 'Enter') {
+            event.preventDefault();
+            onViewDiff();
+          }
+        }}
+      >
+        <button
+          type="button"
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onToggle();
+          }}
+          aria-pressed={checked}
+          aria-label={`Select ${file.path}`}
+          className="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+        >
+          {checked ? (
+            <RiCheckboxLine className="size-4 text-primary" />
+          ) : (
+            <RiCheckboxBlankLine className="size-4" />
+          )}
+        </button>
+        <span
+          className="typography-micro font-semibold uppercase tracking-wide"
+          style={{ color: descriptor.color }}
+          title={indicatorLabel}
+          aria-label={indicatorLabel}
+        >
+          {descriptor.code}
+        </span>
+        <span
+          className="flex-1 min-w-0 break-words typography-ui-label text-foreground"
+          title={file.path}
+        >
+          {file.path}
+        </span>
+        <span className="shrink-0 typography-micro font-semibold">
+          <span style={{ color: 'var(--status-success)' }}>+{insertions}</span>
+          <span className="mx-0.5 text-muted-foreground">/</span>
+          <span style={{ color: 'var(--status-error)' }}>-{deletions}</span>
+        </span>
+        <Tooltip delayDuration={200}>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                onRevert();
+              }}
+              disabled={isReverting}
+              className="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50"
+              aria-label={`Revert changes for ${file.path}`}
+            >
+              {isReverting ? (
+                <RiLoader4Line className="size-4 animate-spin" />
+              ) : (
+                <RiRefreshLine className="size-4" />
+              )}
+            </button>
+          </TooltipTrigger>
+          <TooltipContent sideOffset={8}>Revert changes</TooltipContent>
+        </Tooltip>
+      </div>
+    </li>
+  );
+};
+
+interface CommitRowProps {
+  entry: GitLogEntry;
+  isSelected?: boolean;
+  onSelect?: () => void;
+}
+
+const CommitRow: React.FC<CommitRowProps> = ({ entry, isSelected, onSelect }) => {
+  return (
+    <li
+      className={cn(
+        "flex items-start gap-3 px-3 py-2 cursor-pointer transition-colors",
+        isSelected ? "bg-sidebar/90" : "hover:bg-sidebar/40"
+      )}
+      onClick={onSelect}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onSelect?.();
+        }
+      }}
+    >
+      <div className="h-2 w-2 translate-y-2 rounded-full shrink-0" style={{ backgroundColor: 'var(--status-success)' }} aria-hidden />
+      <div className="min-w-0 flex-1">
+        <p className="typography-ui-label font-medium text-foreground line-clamp-1">{entry.message}</p>
+        <p className="typography-meta text-muted-foreground">
+          {entry.author_name} · {formatCommitDate(entry.date)}
+        </p>
+        <p className="typography-micro text-muted-foreground">{entry.hash.slice(0, 8)}</p>
+      </div>
+    </li>
+  );
+};
+
+interface IdentityDropdownProps {
+  activeProfile: GitIdentityProfile | null;
+  identities: GitIdentityProfile[];
+  onSelect: (profile: GitIdentityProfile) => void;
+  isApplying: boolean;
+}
+
+const IdentityDropdown: React.FC<IdentityDropdownProps> = ({
+  activeProfile,
+  identities,
+  onSelect,
+  isApplying,
+}) => {
+  const isDisabled = isApplying || identities.length === 0;
+
+  return (
+    <DropdownMenu>
+      <Tooltip delayDuration={1000}>
+        <TooltipTrigger asChild>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              className="gap-2 px-3 py-1 typography-ui-label"
+              style={{ color: getIdentityColor(activeProfile?.color) }}
+              disabled={isDisabled}
+            >
+              {isApplying ? (
+                <RiLoader4Line className="size-4 animate-spin" />
+              ) : (
+                <IdentityIcon
+                  icon={activeProfile?.icon}
+                  colorToken={activeProfile?.color}
+                  className="size-4"
+                />
+              )}
+              <span className="max-w-[180px] truncate">
+              {activeProfile?.name || 'No identity'}
+            </span>
+            <RiArrowDownSLine className="size-4 opacity-60" />
+            </Button>
+          </DropdownMenuTrigger>
+        </TooltipTrigger>
+        <TooltipContent sideOffset={8} className="space-y-1">
+          <p className="typography-ui-label text-foreground">
+            {activeProfile?.userName || 'Unknown user'}
+          </p>
+          <p className="typography-meta text-muted-foreground">
+            {activeProfile?.userEmail || 'No email configured'}
+          </p>
+        </TooltipContent>
+      </Tooltip>
+      <DropdownMenuContent align="end" className="w-64">
+        {identities.length === 0 ? (
+          <div className="px-2 py-1.5">
+            <p className="typography-meta text-muted-foreground">
+              No profiles available to apply.
+            </p>
+          </div>
+        ) : (
+          identities.map((profile) => (
+            <DropdownMenuItem
+              key={profile.id}
+              onSelect={() => onSelect(profile)}
+            >
+              <span className="flex items-center gap-2">
+                <IdentityIcon
+                  icon={profile.icon}
+                  colorToken={profile.color}
+                  className="size-4"
+                />
+                <span className="flex flex-col">
+                  <span className="typography-ui-label text-foreground">{profile.name}</span>
+                  <span className="typography-meta text-muted-foreground">
+                    {profile.userEmail}
+                  </span>
+                </span>
+              </span>
+            </DropdownMenuItem>
+          ))
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+function describeChange(file: GitStatus['files'][number]) {
+  const rawCode =
+    file.index && file.index.trim() && file.index.trim() !== '?'
+      ? file.index.trim()
+      : file.working_dir && file.working_dir.trim()
+      ? file.working_dir.trim()
+      : file.index || file.working_dir || ' ';
+
+  const symbol = rawCode.trim().charAt(0) || rawCode.trim() || '·';
+
+  switch (symbol) {
+    case '?':
+      return { code: '?', color: 'var(--status-info)', description: 'Untracked file' };
+    case 'A':
+      return { code: 'A', color: 'var(--status-success)', description: 'New file' };
+    case 'D':
+      return { code: 'D', color: 'var(--status-error)', description: 'Deleted file' };
+    case 'R':
+      return { code: 'R', color: 'var(--status-info)', description: 'Renamed file' };
+    case 'C':
+      return { code: 'C', color: 'var(--status-info)', description: 'Copied file' };
+    default:
+      return { code: 'M', color: 'var(--status-warning)', description: 'Modified file' };
+  }
+}
+
+interface IdentityIconProps {
+  icon?: string | null;
+  className?: string;
+  colorToken?: string | null;
+}
+
+const IDENTITY_ICON_MAP: Record<string, React.ComponentType<React.ComponentProps<typeof RiGitBranchLine>>> = {
+  branch: RiGitBranchLine,
+  briefcase: RiBriefcaseLine,
+  house: RiHomeLine,
+  graduation: RiGraduationCapLine,
+  code: RiCodeLine,
+  heart: RiHeartLine,
+  user: RiUser3Line,
+};
+
+const IDENTITY_COLOR_MAP: Record<string, string> = {
+  keyword: 'var(--syntax-keyword)',
+  error: 'var(--status-error)',
+  string: 'var(--syntax-string)',
+  function: 'var(--syntax-function)',
+  type: 'var(--syntax-type)',
+
+  success: 'var(--status-success)',
+  info: 'var(--status-info)',
+  warning: 'var(--status-warning)',
+};
+
+function getIdentityColor(token?: string | null) {
+  if (!token) {
+    return 'var(--primary)';
+  }
+  return IDENTITY_COLOR_MAP[token] || 'var(--primary)';
+}
+
+const IdentityIcon: React.FC<IdentityIconProps> = ({ icon, className, colorToken }) => {
+  const IconComponent = IDENTITY_ICON_MAP[icon ?? 'branch'] ?? RiUser3Line;
+  return (
+    <IconComponent
+      className={className}
+      style={{ color: getIdentityColor(colorToken) }}
+    />
+  );
+};
+
+function formatCommitDate(date: string) {
+  const value = new Date(date);
+  if (Number.isNaN(value.getTime())) {
+    return date;
+  }
+
+  return value.toLocaleString(undefined, {
+    hour12: false,
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
diff --git a/packages/ui/src/components/views/MonacoDiffViewer.tsx b/packages/ui/src/components/views/MonacoDiffViewer.tsx
new file mode 100644
index 00000000..7f9757d6
--- /dev/null
+++ b/packages/ui/src/components/views/MonacoDiffViewer.tsx
@@ -0,0 +1,151 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { DiffEditor, type DiffEditorProps, type MonacoDiffEditor } from '@monaco-editor/react';
+
+import { useThemeSystem } from '@/contexts/useThemeSystem';
+import { ensureMonacoThemeRegistered, getMonacoThemeIdForTheme } from '@/lib/theme/monacoThemeGenerator';
+
+interface MonacoDiffViewerProps {
+  original: string;
+  modified: string;
+  language: string;
+  renderSideBySide: boolean;
+
+  allowResponsive?: boolean;
+  readOnly?: boolean;
+  showLineNumbers?: boolean;
+}
+
+export const MonacoDiffViewer: React.FC<MonacoDiffViewerProps> = ({
+  original,
+  modified,
+  language,
+  renderSideBySide,
+  allowResponsive = false,
+  readOnly = true,
+  showLineNumbers = true,
+}) => {
+  const { currentTheme } = useThemeSystem();
+  const diffEditorRef = useRef<MonacoDiffEditor | null>(null);
+
+  const themeId = useMemo(
+    () => getMonacoThemeIdForTheme(currentTheme),
+    [currentTheme],
+  );
+
+  const handleBeforeMount = useCallback<NonNullable<DiffEditorProps['beforeMount']>>(
+    (monacoInstance) => {
+      ensureMonacoThemeRegistered(
+        currentTheme,
+        monacoInstance as Parameters<typeof ensureMonacoThemeRegistered>[1],
+      );
+    },
+    [currentTheme],
+  );
+
+  const options = useMemo(
+    (): DiffEditorProps['options'] => ({
+      readOnly,
+      renderSideBySide,
+      automaticLayout: true,
+      minimap: { enabled: false },
+      wordWrap: 'off',
+      lineNumbers: showLineNumbers ? 'on' : 'off',
+      renderIndicators: false,
+      scrollBeyondLastLine: false,
+      renderLineHighlight: 'none',
+      selectionHighlight: false,
+      occurrencesHighlight: 'off',
+      roundedSelection: false,
+      contextmenu: false,
+      folding: false,
+      glyphMargin: false,
+      renderMarginRevertIcon: false,
+      scrollbar: {
+        vertical: 'visible',
+        horizontal: 'visible',
+        verticalScrollbarSize: 6,
+        horizontalScrollbarSize: 6,
+        useShadows: false,
+      },
+      hover: {
+        enabled: false,
+      },
+      overviewRulerLanes: 1,
+
+      useInlineViewWhenSpaceIsLimited: allowResponsive,
+    }),
+    [allowResponsive, readOnly, renderSideBySide, showLineNumbers],
+  );
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const monaco = (window as typeof window & { monaco?: { editor: { setTheme: (id: string) => void } } }).monaco;
+    if (!monaco?.editor?.setTheme) return;
+
+    ensureMonacoThemeRegistered(currentTheme);
+    monaco.editor.setTheme(themeId);
+  }, [currentTheme, themeId]);
+
+  useEffect(() => {
+    const diffEditor = diffEditorRef.current;
+    if (!diffEditor) return;
+
+    const originalEditor = diffEditor.getOriginalEditor();
+    const modifiedEditor = diffEditor.getModifiedEditor();
+
+    const disablePopups = {
+      hover: { enabled: false },
+      quickSuggestions: false,
+      parameterHints: { enabled: false },
+      suggestOnTriggerCharacters: false,
+    } as const;
+
+    originalEditor.updateOptions(disablePopups);
+    modifiedEditor.updateOptions(disablePopups);
+  }, [themeId, readOnly, renderSideBySide]);
+
+  useEffect(() => {
+    return () => {
+      const diffEditor = diffEditorRef.current;
+      if (diffEditor) {
+        try {
+          diffEditor.dispose?.();
+        } catch (error) {
+          console.warn('Error disposing DiffEditor:', error);
+        }
+      }
+      diffEditorRef.current = null;
+    };
+  }, []);
+
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  return (
+    <DiffEditor
+      original={original}
+      modified={modified}
+      originalLanguage={language}
+      modifiedLanguage={language}
+      theme={themeId}
+      options={options}
+      beforeMount={handleBeforeMount}
+      onMount={(diffEditor: MonacoDiffEditor) => {
+        diffEditorRef.current = diffEditor;
+        const original = diffEditor.getOriginalEditor();
+        const modified = diffEditor.getModifiedEditor();
+        const disablePopups = {
+          hover: { enabled: false },
+          quickSuggestions: false,
+          parameterHints: { enabled: false },
+          suggestOnTriggerCharacters: false,
+        } as const;
+        original.updateOptions(disablePopups);
+        modified.updateOptions(disablePopups);
+      }}
+      loading={null}
+      className="monaco-diff-wrapper"
+    />
+  );
+};
diff --git a/packages/ui/src/components/views/TerminalView.tsx b/packages/ui/src/components/views/TerminalView.tsx
new file mode 100644
index 00000000..9d3b9fa7
--- /dev/null
+++ b/packages/ui/src/components/views/TerminalView.tsx
@@ -0,0 +1,784 @@
+import React from 'react';
+import { RiAlertLine, RiArrowDownLine, RiArrowGoBackLine, RiArrowLeftLine, RiArrowRightLine, RiArrowUpLine, RiCheckboxCircleLine, RiCircleLine, RiCloseLine, RiCommandLine, RiDeleteBinLine, RiRestartLine } from '@remixicon/react';
+
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { useTerminalStore } from '@/stores/useTerminalStore';
+import { type TerminalStreamEvent } from '@/lib/api/types';
+import { useThemeSystem } from '@/contexts/useThemeSystem';
+import { useFontPreferences } from '@/hooks/useFontPreferences';
+import { CODE_FONT_OPTION_MAP, DEFAULT_MONO_FONT } from '@/lib/fontOptions';
+import { convertThemeToXterm } from '@/lib/terminalTheme';
+import { TerminalViewport, type TerminalController } from '@/components/terminal/TerminalViewport';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { cn } from '@/lib/utils';
+import { useUIStore } from '@/stores/useUIStore';
+import { Button } from '@/components/ui/button';
+import { useDeviceInfo } from '@/lib/device';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
+
+const TERMINAL_FONT_SIZE = 13;
+
+type Modifier = 'ctrl' | 'cmd';
+type MobileKey =
+    | 'esc'
+    | 'tab'
+    | 'enter'
+    | 'arrow-up'
+    | 'arrow-down'
+    | 'arrow-left'
+    | 'arrow-right';
+
+const BASE_KEY_SEQUENCES: Record<MobileKey, string> = {
+    esc: '\u001b',
+    tab: '\t',
+    enter: '\r',
+    'arrow-up': '\u001b[A',
+    'arrow-down': '\u001b[B',
+    'arrow-left': '\u001b[D',
+    'arrow-right': '\u001b[C',
+};
+
+const MODIFIER_ARROW_SUFFIX: Record<Modifier, string> = {
+    ctrl: '5',
+    cmd: '3',
+};
+
+const STREAM_OPTIONS = {
+    retry: {
+        maxRetries: 3,
+        initialDelayMs: 500,
+        maxDelayMs: 8000,
+    },
+    connectionTimeoutMs: 10_000,
+};
+
+const getSequenceForKey = (key: MobileKey, modifier: Modifier | null): string | null => {
+    if (modifier) {
+        switch (key) {
+            case 'arrow-up':
+                return `\u001b[1;${MODIFIER_ARROW_SUFFIX[modifier]}A`;
+            case 'arrow-down':
+                return `\u001b[1;${MODIFIER_ARROW_SUFFIX[modifier]}B`;
+            case 'arrow-right':
+                return `\u001b[1;${MODIFIER_ARROW_SUFFIX[modifier]}C`;
+            case 'arrow-left':
+                return `\u001b[1;${MODIFIER_ARROW_SUFFIX[modifier]}D`;
+            default:
+                break;
+        }
+    }
+
+    return BASE_KEY_SEQUENCES[key] ?? null;
+};
+
+export const TerminalView: React.FC = () => {
+    const { terminal } = useRuntimeAPIs();
+    const { currentTheme } = useThemeSystem();
+    const { monoFont } = useFontPreferences();
+    const { isMobile } = useDeviceInfo();
+
+    const { currentSessionId, sessions, worktreeMetadata: worktreeMap } = useSessionStore();
+    const worktreeMetadata = currentSessionId ? worktreeMap.get(currentSessionId) ?? undefined : undefined;
+
+    const sessionDirectory = React.useMemo(() => {
+        if (worktreeMetadata?.path) {
+            return worktreeMetadata.path;
+        }
+        if (!currentSessionId) return null;
+        const entry = sessions.find((session) => session.id === currentSessionId);
+        const directory = typeof (entry as { directory?: string } | undefined)?.directory === 'string'
+            ? (entry as { directory?: string }).directory
+            : null;
+        return directory && directory.length > 0 ? directory : null;
+    }, [currentSessionId, sessions, worktreeMetadata]);
+
+    const { currentDirectory: fallbackDirectory, homeDirectory } = useDirectoryStore();
+    const effectiveDirectory = sessionDirectory || fallbackDirectory || null;
+
+    const displayDirectory = React.useMemo(() => {
+        if (!effectiveDirectory) return '';
+        if (!homeDirectory) return effectiveDirectory;
+        if (effectiveDirectory === homeDirectory) return '~';
+        if (effectiveDirectory.startsWith(homeDirectory + '/')) {
+            return '~' + effectiveDirectory.slice(homeDirectory.length);
+        }
+        return effectiveDirectory;
+    }, [effectiveDirectory, homeDirectory]);
+
+    const terminalStore = useTerminalStore();
+    const terminalSessions = terminalStore.sessions;
+    const setTerminalSession = terminalStore.setTerminalSession;
+    const setConnecting = terminalStore.setConnecting;
+    const appendToBuffer = terminalStore.appendToBuffer;
+    const clearTerminalSession = terminalStore.clearTerminalSession;
+    const removeTerminalSession = terminalStore.removeTerminalSession;
+    const clearBuffer = terminalStore.clearBuffer;
+
+    const terminalState = React.useMemo(() => {
+        if (!currentSessionId) return undefined;
+        return terminalSessions.get(currentSessionId);
+    }, [terminalSessions, currentSessionId]);
+    const terminalSessionRef = terminalState?.terminalSessionId ?? null;
+    const bufferChunks = terminalState?.bufferChunks ?? [];
+    const bufferLength = terminalState?.bufferLength ?? 0;
+    const isConnecting = terminalState?.isConnecting ?? false;
+    const terminalSessionId = terminalSessionRef;
+
+    const [connectionError, setConnectionError] = React.useState<string | null>(null);
+    const [activeModifier, setActiveModifier] = React.useState<Modifier | null>(null);
+
+    const streamCleanupRef = React.useRef<(() => void) | null>(null);
+    const activeTerminalIdRef = React.useRef<string | null>(null);
+    const sessionIdRef = React.useRef<string | null>(currentSessionId ?? null);
+    const terminalIdRef = React.useRef<string | null>(terminalSessionId);
+    const directoryRef = React.useRef<string | null>(effectiveDirectory);
+    const terminalControllerRef = React.useRef<TerminalController | null>(null);
+
+    const activeMainTab = useUIStore((state) => state.activeMainTab);
+    const isTerminalActive = activeMainTab === 'terminal';
+
+    React.useEffect(() => {
+        sessionIdRef.current = currentSessionId ?? null;
+    }, [currentSessionId]);
+
+    React.useEffect(() => {
+        terminalIdRef.current = terminalSessionId;
+    }, [terminalSessionId]);
+
+    React.useEffect(() => {
+        directoryRef.current = effectiveDirectory;
+    }, [effectiveDirectory]);
+
+    React.useEffect(() => {
+        if (!isMobile && activeModifier !== null) {
+            setActiveModifier(null);
+        }
+    }, [isMobile, activeModifier, setActiveModifier]);
+
+    React.useEffect(() => {
+        if (!terminalSessionId && activeModifier !== null) {
+            setActiveModifier(null);
+        }
+    }, [terminalSessionId, activeModifier, setActiveModifier]);
+
+    const disconnectStream = React.useCallback(() => {
+        streamCleanupRef.current?.();
+        streamCleanupRef.current = null;
+        activeTerminalIdRef.current = null;
+    }, []);
+
+    React.useEffect(
+        () => () => {
+            disconnectStream();
+            terminalIdRef.current = null;
+        },
+        [disconnectStream]
+    );
+
+    const startStream = React.useCallback(
+        (terminalId: string) => {
+            if (activeTerminalIdRef.current === terminalId) {
+                return;
+            }
+
+            disconnectStream();
+
+            const subscription = terminal.connect(
+                terminalId,
+                {
+                    onEvent: (event: TerminalStreamEvent) => {
+                        const sessionId = sessionIdRef.current;
+                        if (!sessionId) return;
+
+                        switch (event.type) {
+                            case 'connected': {
+                                setConnecting(sessionId, false);
+                                setConnectionError(null);
+                                terminalControllerRef.current?.focus();
+                                break;
+                            }
+                            case 'reconnecting': {
+                                const attempt = event.attempt ?? 0;
+                                const maxAttempts = event.maxAttempts ?? 3;
+                                setConnectionError(`Reconnecting (${attempt}/${maxAttempts})...`);
+                                break;
+                            }
+                            case 'data': {
+                                if (event.data) {
+                                    appendToBuffer(sessionId, event.data);
+                                }
+                                break;
+                            }
+                            case 'exit': {
+                                const exitCode =
+                                    typeof event.exitCode === 'number' ? event.exitCode : null;
+                                const signal = typeof event.signal === 'number' ? event.signal : null;
+                                appendToBuffer(
+                                    sessionId,
+                                    `\r\n[Process exited${
+                                        exitCode !== null ? ` with code ${exitCode}` : ''
+                                    }${signal !== null ? ` (signal ${signal})` : ''}]\r\n`
+                                );
+                                clearTerminalSession(sessionId);
+                                setConnecting(sessionId, false);
+                                setConnectionError('Terminal session ended');
+                                disconnectStream();
+                                break;
+                            }
+                        }
+                    },
+                    onError: (error, fatal) => {
+                        const sessionId = sessionIdRef.current;
+                        if (!sessionId) return;
+
+                        const errorMsg = fatal
+                            ? `Connection failed: ${error.message}`
+                            : error.message || 'Terminal stream connection error';
+
+                        setConnectionError(errorMsg);
+
+                        if (fatal) {
+                            setConnecting(sessionId, false);
+                            disconnectStream();
+                            removeTerminalSession(sessionId);
+                        }
+                    },
+                },
+                STREAM_OPTIONS
+            );
+
+            streamCleanupRef.current = () => {
+                subscription.close();
+                activeTerminalIdRef.current = null;
+            };
+            activeTerminalIdRef.current = terminalId;
+        },
+        [appendToBuffer, clearTerminalSession, disconnectStream, removeTerminalSession, setConnecting, terminal, setConnectionError]
+    );
+
+    React.useEffect(() => {
+        let cancelled = false;
+        const sessionId = currentSessionId;
+
+        if (!sessionId || !effectiveDirectory) {
+            setConnectionError(
+                sessionId
+                    ? 'No working directory available for terminal.'
+                    : 'Select a session to open the terminal.'
+            );
+            disconnectStream();
+            return;
+        }
+
+        const ensureSession = async () => {
+            if (!sessionIdRef.current || sessionIdRef.current !== sessionId) return;
+            const currentState = useTerminalStore.getState().sessions.get(sessionId);
+
+            if (
+                currentState?.terminalSessionId &&
+                currentState.directory &&
+                currentState.directory !== effectiveDirectory
+            ) {
+                disconnectStream();
+                try {
+                    if (currentState.terminalSessionId) {
+                        await terminal.close(currentState.terminalSessionId);
+                    }
+                } catch { /* ignored */ }
+                removeTerminalSession(sessionId);
+                return;
+            }
+
+            let terminalId = currentState?.terminalSessionId ?? null;
+
+            if (!terminalId) {
+                setConnectionError(null);
+                setConnecting(sessionId, true);
+                try {
+                    const session = await terminal.createSession({
+                        cwd: effectiveDirectory,
+                    });
+                    if (cancelled) {
+                        try {
+                        await terminal.close(session.sessionId);
+                        } catch { /* ignored */ }
+                        return;
+                    }
+                    setTerminalSession(sessionId, session, effectiveDirectory);
+                    terminalId = session.sessionId;
+                } catch (error) {
+                    if (!cancelled) {
+                        setConnectionError(
+                            error instanceof Error
+                                ? error.message
+                                : 'Failed to start terminal session'
+                        );
+                        setConnecting(sessionId, false);
+                    }
+                    return;
+                }
+            }
+
+            if (!terminalId || cancelled) return;
+
+            terminalIdRef.current = terminalId;
+            startStream(terminalId);
+        };
+
+        void ensureSession();
+
+        return () => {
+            cancelled = true;
+            terminalIdRef.current = null;
+            disconnectStream();
+        };
+    }, [
+        currentSessionId,
+        effectiveDirectory,
+        terminalSessionId,
+        removeTerminalSession,
+        setConnecting,
+        setTerminalSession,
+        startStream,
+        disconnectStream,
+        terminal,
+    ]);
+
+    const handleReconnect = React.useCallback(async () => {
+        if (!currentSessionId) return;
+        setConnectionError(null);
+        disconnectStream();
+        const terminalId = terminalSessionId;
+        if (terminalId) {
+            try {
+                await terminal.close(terminalId);
+            } catch { /* ignored */ }
+        }
+        removeTerminalSession(currentSessionId);
+    }, [currentSessionId, disconnectStream, removeTerminalSession, terminal, terminalSessionId]);
+
+    const handleClear = React.useCallback(() => {
+        if (!currentSessionId) return;
+        clearBuffer(currentSessionId);
+        terminalControllerRef.current?.clear();
+        terminalControllerRef.current?.focus();
+
+        const terminalId = terminalIdRef.current;
+        if (terminalId) {
+            void terminal.sendInput(terminalId, '\u000c').catch((error) => {
+                setConnectionError(error instanceof Error ? error.message : 'Failed to refresh prompt');
+            });
+        }
+    }, [clearBuffer, currentSessionId, setConnectionError, terminal]);
+
+    const handleViewportInput = React.useCallback(
+        (data: string) => {
+            if (!data) {
+                return;
+            }
+
+            let payload = data;
+            let modifierConsumed = false;
+
+            if (activeModifier && data.length > 0) {
+                const firstChar = data[0];
+                if (firstChar.length === 1 && /[a-zA-Z]/.test(firstChar)) {
+                    const upper = firstChar.toUpperCase();
+                    if (activeModifier === 'ctrl' || activeModifier === 'cmd') {
+                        payload = String.fromCharCode(upper.charCodeAt(0) & 0b11111);
+                        modifierConsumed = true;
+                    }
+                }
+
+                if (!modifierConsumed) {
+                    modifierConsumed = true;
+                }
+            }
+
+            const terminalId = terminalIdRef.current;
+            if (!terminalId) return;
+
+            void terminal.sendInput(terminalId, payload).catch((error) => {
+                setConnectionError(error instanceof Error ? error.message : 'Failed to send input');
+            });
+
+            if (modifierConsumed) {
+                setActiveModifier(null);
+                terminalControllerRef.current?.focus();
+            }
+        },
+        [activeModifier, setActiveModifier, terminal]
+    );
+
+    const handleViewportResize = React.useCallback(
+        (cols: number, rows: number) => {
+            const terminalId = terminalIdRef.current;
+            if (!terminalId) return;
+            void terminal.resize({ sessionId: terminalId, cols, rows }).catch(() => {
+
+            });
+        },
+        [terminal]
+    );
+
+    const handleModifierToggle = React.useCallback(
+        (modifier: Modifier) => {
+            setActiveModifier((current) => (current === modifier ? null : modifier));
+            terminalControllerRef.current?.focus();
+        },
+        [setActiveModifier]
+    );
+
+    const handleMobileKeyPress = React.useCallback(
+        (key: MobileKey) => {
+            const sequence = getSequenceForKey(key, activeModifier);
+            if (!sequence) {
+                return;
+            }
+            handleViewportInput(sequence);
+            setActiveModifier(null);
+            terminalControllerRef.current?.focus();
+        },
+        [activeModifier, handleViewportInput, setActiveModifier]
+    );
+
+    React.useEffect(() => {
+        if (!isMobile || !activeModifier || !terminalSessionId) {
+            return;
+        }
+
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.repeat) {
+                return;
+            }
+
+            const rawKey = event.key;
+            if (!rawKey) {
+                return;
+            }
+
+            if (rawKey === 'Control' || rawKey === 'Meta' || rawKey === 'Alt' || rawKey === 'Shift') {
+                return;
+            }
+
+            const normalizedKey = rawKey.length === 1 ? rawKey.toLowerCase() : rawKey;
+            const code = event.code ?? '';
+            const upperFromCode =
+                code.startsWith('Key') && code.length === 4
+                    ? code.slice(3).toUpperCase()
+                    : null;
+            const upperKey =
+                rawKey.length === 1 && /[a-zA-Z]/.test(rawKey)
+                    ? rawKey.toUpperCase()
+                    : upperFromCode;
+
+            const toMobileKey: Record<string, MobileKey> = {
+                Tab: 'tab',
+                Enter: 'enter',
+                ArrowUp: 'arrow-up',
+                ArrowDown: 'arrow-down',
+                ArrowLeft: 'arrow-left',
+                ArrowRight: 'arrow-right',
+                Escape: 'esc',
+                tab: 'tab',
+                enter: 'enter',
+                arrowup: 'arrow-up',
+                arrowdown: 'arrow-down',
+                arrowleft: 'arrow-left',
+                arrowright: 'arrow-right',
+                escape: 'esc',
+            };
+
+            if (normalizedKey in toMobileKey) {
+                event.preventDefault();
+                event.stopPropagation();
+                handleMobileKeyPress(toMobileKey[normalizedKey]);
+                return;
+            }
+
+            if (activeModifier === 'ctrl' && upperKey && upperKey.length === 1) {
+                if (upperKey >= 'A' && upperKey <= 'Z') {
+                    const controlCode = String.fromCharCode(upperKey.charCodeAt(0) & 0b11111);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    handleViewportInput(controlCode);
+                    setActiveModifier(null);
+                    terminalControllerRef.current?.focus();
+                }
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [
+        activeModifier,
+        handleMobileKeyPress,
+        handleViewportInput,
+        isMobile,
+        setActiveModifier,
+        terminalSessionId,
+    ]);
+
+    const resolvedFontStack = React.useMemo(() => {
+        const defaultStack = CODE_FONT_OPTION_MAP[DEFAULT_MONO_FONT].stack;
+        if (typeof window === 'undefined') {
+            const fallbackDefinition =
+                CODE_FONT_OPTION_MAP[monoFont] ?? CODE_FONT_OPTION_MAP[DEFAULT_MONO_FONT];
+            return fallbackDefinition.stack;
+        }
+
+        const root = window.getComputedStyle(document.documentElement);
+        const cssStack = root.getPropertyValue('--font-family-mono');
+        if (cssStack && cssStack.trim().length > 0) {
+            return cssStack.trim();
+        }
+
+        const definition =
+            CODE_FONT_OPTION_MAP[monoFont] ?? CODE_FONT_OPTION_MAP[DEFAULT_MONO_FONT];
+        return definition.stack ?? defaultStack;
+    }, [monoFont]);
+
+    const xtermTheme = React.useMemo(() => convertThemeToXterm(currentTheme), [currentTheme]);
+
+    const terminalSessionKey = React.useMemo(() => {
+        const sessionPart = currentSessionId ?? 'none';
+        const directoryPart = effectiveDirectory ?? 'no-dir';
+        const terminalPart = terminalSessionId ?? 'pending';
+        return `${sessionPart}::${directoryPart}::${terminalPart}`;
+    }, [currentSessionId, effectiveDirectory, terminalSessionId]);
+
+    React.useEffect(() => {
+        if (!isTerminalActive) {
+            return;
+        }
+        const controller = terminalControllerRef.current;
+        if (!controller) {
+            return;
+        }
+        const fitOnce = () => {
+            controller.fit();
+        };
+        if (typeof window !== 'undefined') {
+            const rafId = window.requestAnimationFrame(() => {
+                fitOnce();
+                controller.focus();
+            });
+            const timeoutIds = [220, 400].map((delay) => window.setTimeout(fitOnce, delay));
+            return () => {
+                window.cancelAnimationFrame(rafId);
+                timeoutIds.forEach((id) => window.clearTimeout(id));
+            };
+        }
+        fitOnce();
+    }, [isTerminalActive, terminalSessionKey, currentSessionId, terminalSessionId]);
+
+    const isReconnecting = connectionError?.includes('Reconnecting');
+
+    const statusIcon = connectionError
+        ? isReconnecting
+            ? <RiAlertLine size={20} className="text-amber-400" />
+            : <RiCloseLine size={20} className="text-destructive" />
+        : terminalSessionId && !isConnecting
+            ? <RiCheckboxCircleLine size={20} className="text-emerald-400" />
+            : isConnecting
+                ? <RiCircleLine size={20} className="text-amber-400 animate-pulse" />
+                : <RiCircleLine size={20} className="text-muted-foreground" />;
+
+    if (!currentSessionId) {
+        return (
+            <div className="flex h-full items-center justify-center p-4 text-center text-sm text-muted-foreground">
+                Select a session to open the terminal
+            </div>
+        );
+    }
+
+    if (!effectiveDirectory) {
+        return (
+            <div className="flex h-full flex-col items-center justify-center gap-2 p-4 text-center text-sm text-muted-foreground">
+                <p>No working directory available for this session.</p>
+                <button
+                    onClick={handleReconnect}
+                    className="rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90"
+                >
+                    Retry
+                </button>
+            </div>
+        );
+    }
+
+    const quickKeysDisabled = !terminalSessionId || isConnecting;
+
+    return (
+        <div className="flex h-full flex-col overflow-hidden bg-background">
+            <div className="px-3 py-2 text-xs bg-background">
+                <div className="flex items-center justify-between gap-3">
+                    <div className="flex min-w-0 items-center gap-2 text-muted-foreground">
+                        <span className="truncate font-mono text-foreground/90">{displayDirectory}</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        {statusIcon}
+                        <Button
+                            size="sm"
+                            variant="default"
+                            className="h-7 px-2 py-0"
+                            onClick={handleClear}
+                            disabled={!bufferLength}
+                            title="Clear output"
+                            type="button"
+                        >
+                            <RiDeleteBinLine size={16} />
+                            Clear
+                        </Button>
+                        <Button
+                            size="sm"
+                            variant="default"
+                            className="h-7 px-2 py-0"
+                            onClick={handleReconnect}
+                            title="Restart terminal session"
+                            type="button"
+                        >
+                            <RiRestartLine size={16} className={cn(isConnecting && 'animate-spin')} />
+                            Restart
+                        </Button>
+                    </div>
+                </div>
+                {isMobile ? (
+                    <div className="mt-2 flex flex-wrap items-center gap-1">
+                        <Button
+                            type="button"
+                            size="sm"
+                            variant="outline"
+                            className="h-6 px-2 text-xs"
+                            onClick={() => handleMobileKeyPress('esc')}
+                            disabled={quickKeysDisabled}
+                        >
+                            Esc
+                        </Button>
+                        <Button
+                            type="button"
+                            size="sm"
+                            variant="outline"
+                            className="h-6 w-9 p-0"
+                            onClick={() => handleMobileKeyPress('tab')}
+                            disabled={quickKeysDisabled}
+                        >
+                            <RiArrowRightLine size={16} />
+                            <span className="sr-only">Tab</span>
+                        </Button>
+                        <Button
+                            type="button"
+                            size="sm"
+                            variant={activeModifier === 'ctrl' ? 'default' : 'outline'}
+                            className="h-6 w-9 p-0"
+                            onClick={() => handleModifierToggle('ctrl')}
+                            disabled={quickKeysDisabled}
+                        >
+                            <span className="text-xs font-medium">Ctrl</span>
+                            <span className="sr-only">Control modifier</span>
+                        </Button>
+                        <Button
+                            type="button"
+                            size="sm"
+                            variant={activeModifier === 'cmd' ? 'default' : 'outline'}
+                            className="h-6 w-9 p-0"
+                            onClick={() => handleModifierToggle('cmd')}
+                            disabled={quickKeysDisabled}
+                        >
+                            <RiCommandLine size={16} />
+                            <span className="sr-only">Command modifier</span>
+                        </Button>
+                        <Button
+                            type="button"
+                            size="sm"
+                            variant="outline"
+                            className="h-6 w-9 p-0"
+                            onClick={() => handleMobileKeyPress('arrow-up')}
+                            disabled={quickKeysDisabled}
+                        >
+                            <RiArrowUpLine size={16} />
+                            <span className="sr-only">Arrow up</span>
+                        </Button>
+                        <Button
+                            type="button"
+                            size="sm"
+                            variant="outline"
+                            className="h-6 w-9 p-0"
+                            onClick={() => handleMobileKeyPress('arrow-left')}
+                            disabled={quickKeysDisabled}
+                        >
+                            <RiArrowLeftLine size={16} />
+                            <span className="sr-only">Arrow left</span>
+                        </Button>
+                        <Button
+                            type="button"
+                            size="sm"
+                            variant="outline"
+                            className="h-6 w-9 p-0"
+                            onClick={() => handleMobileKeyPress('arrow-down')}
+                            disabled={quickKeysDisabled}
+                        >
+                            <RiArrowDownLine size={16} />
+                            <span className="sr-only">Arrow down</span>
+                        </Button>
+                        <Button
+                            type="button"
+                            size="sm"
+                            variant="outline"
+                            className="h-6 w-9 p-0"
+                            onClick={() => handleMobileKeyPress('arrow-right')}
+                            disabled={quickKeysDisabled}
+                        >
+                            <RiArrowRightLine size={16} />
+                            <span className="sr-only">Arrow right</span>
+                        </Button>
+                        <Button
+                            type="button"
+                            size="sm"
+                            variant="outline"
+                            className="h-6 w-9 p-0"
+                            onClick={() => handleMobileKeyPress('enter')}
+                            disabled={quickKeysDisabled}
+                        >
+                            <RiArrowGoBackLine size={16} />
+                            <span className="sr-only">Enter</span>
+                        </Button>
+                    </div>
+                ) : null}
+            </div>
+
+            <div
+                className="relative flex-1 overflow-hidden"
+                style={{ backgroundColor: xtermTheme.background }}
+            >
+                <div className="h-full w-full box-border px-3 pt-3 pb-4">
+                    {isTerminalActive ? (
+                        <ScrollableOverlay outerClassName="h-full" className="h-full w-full" disableHorizontal>
+                            <TerminalViewport
+                                key={terminalSessionKey}
+                                ref={(controller) => {
+                                    terminalControllerRef.current = controller;
+                                }}
+                                sessionKey={terminalSessionKey}
+                                chunks={bufferChunks}
+                                onInput={handleViewportInput}
+                                onResize={handleViewportResize}
+                                theme={xtermTheme}
+                                fontFamily={resolvedFontStack}
+                                fontSize={TERMINAL_FONT_SIZE}
+                                enableTouchScroll={isMobile}
+                            />
+                        </ScrollableOverlay>
+                    ) : null}
+                </div>
+                {connectionError && (
+                    <div className="absolute inset-x-0 bottom-0 bg-destructive/90 px-3 py-2 text-xs text-destructive-foreground">
+                        {connectionError}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
diff --git a/packages/ui/src/components/views/index.ts b/packages/ui/src/components/views/index.ts
new file mode 100644
index 00000000..be187b98
--- /dev/null
+++ b/packages/ui/src/components/views/index.ts
@@ -0,0 +1,4 @@
+export { ChatView } from './ChatView';
+export { GitView } from './GitView';
+export { DiffView, useDiffFileCount } from './DiffView';
+export { TerminalView } from './TerminalView';
diff --git a/packages/ui/src/constants/sidebar.ts b/packages/ui/src/constants/sidebar.ts
new file mode 100644
index 00000000..c4a47279
--- /dev/null
+++ b/packages/ui/src/constants/sidebar.ts
@@ -0,0 +1,62 @@
+import { RiBrainAi3Line, RiChatAi3Line, RiCommandLine, RiGitBranchLine, RiPaintBrushLine } from '@remixicon/react';
+import type { ComponentType } from 'react';
+
+export type SidebarSection = 'sessions' | 'agents' | 'commands' | 'providers' | 'git-identities' | 'settings';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type IconComponent = ComponentType<any>;
+
+export interface SidebarSectionConfig {
+    id: SidebarSection;
+    label: string;
+    description: string;
+    icon: IconComponent;
+}
+
+export const SIDEBAR_SECTIONS: SidebarSectionConfig[] = [
+    {
+        id: 'sessions',
+        label: 'Sessions',
+        description: 'Browse and manage chat sessions scoped to the current directory.',
+        icon: RiChatAi3Line,
+    },
+    {
+        id: 'agents',
+        label: 'Agents',
+        description: 'Configure OpenCode agents, prompts, and permissions.',
+        icon: RiBrainAi3Line,
+    },
+    {
+        id: 'commands',
+        label: 'Commands',
+        description: 'Create and maintain custom slash commands for OpenCode.',
+        icon: RiCommandLine,
+    },
+
+    {
+        id: 'git-identities',
+        label: 'Git Identities',
+        description: 'Manage Git profiles with different credentials and SSH keys.',
+        icon: RiGitBranchLine,
+    },
+    {
+        id: 'settings',
+        label: 'Appearance',
+        description: 'Fine-tune themes, fonts, and typography across the interface.',
+        icon: RiPaintBrushLine,
+    },
+];
+
+const sidebarSectionLabels = {} as Record<SidebarSection, string>;
+const sidebarSectionDescriptions = {} as Record<SidebarSection, string>;
+const sidebarSectionConfigMap = {} as Record<SidebarSection, SidebarSectionConfig>;
+
+SIDEBAR_SECTIONS.forEach((section) => {
+    sidebarSectionLabels[section.id] = section.label;
+    sidebarSectionDescriptions[section.id] = section.description;
+    sidebarSectionConfigMap[section.id] = section;
+});
+
+export const SIDEBAR_SECTION_LABELS = sidebarSectionLabels;
+export const SIDEBAR_SECTION_DESCRIPTIONS = sidebarSectionDescriptions;
+export const SIDEBAR_SECTION_CONFIG_MAP = sidebarSectionConfigMap;
diff --git a/packages/ui/src/contexts/FireworksContext.tsx b/packages/ui/src/contexts/FireworksContext.tsx
new file mode 100644
index 00000000..fe3a5d00
--- /dev/null
+++ b/packages/ui/src/contexts/FireworksContext.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { FireworksAnimation } from '@/components/ui/FireworksAnimation';
+import { useFireworks } from '@/hooks/useFireworks';
+
+interface FireworksContextValue {
+  triggerFireworks: () => void;
+  dismissFireworks: () => void;
+}
+
+const FireworksContext = React.createContext<FireworksContextValue | undefined>(undefined);
+
+export const FireworksProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { isActive, burstKey, triggerFireworks, dismissFireworks } = useFireworks();
+
+  const value = React.useMemo<FireworksContextValue>(
+    () => ({ triggerFireworks, dismissFireworks }),
+    [triggerFireworks, dismissFireworks]
+  );
+
+  return (
+    <FireworksContext.Provider value={value}>
+      {children}
+      <FireworksAnimation isActive={isActive} burstKey={burstKey} />
+    </FireworksContext.Provider>
+  );
+};
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useFireworksCelebration = (): FireworksContextValue => {
+  const context = React.useContext(FireworksContext);
+  if (!context) {
+    throw new Error('useFireworksCelebration must be used within FireworksProvider');
+  }
+  return context;
+};
diff --git a/packages/ui/src/contexts/RuntimeAPIProvider.tsx b/packages/ui/src/contexts/RuntimeAPIProvider.tsx
new file mode 100644
index 00000000..85b47868
--- /dev/null
+++ b/packages/ui/src/contexts/RuntimeAPIProvider.tsx
@@ -0,0 +1,7 @@
+import React, { type JSX, type ReactNode } from 'react';
+import { RuntimeAPIContext } from '@/contexts/runtimeAPIContext';
+import type { RuntimeAPIs } from '@/lib/api/types';
+
+export function RuntimeAPIProvider({ apis, children }: { apis: RuntimeAPIs; children: ReactNode }): JSX.Element {
+  return <RuntimeAPIContext.Provider value={apis}>{children}</RuntimeAPIContext.Provider>;
+}
diff --git a/packages/ui/src/contexts/ThemeSystemContext.tsx b/packages/ui/src/contexts/ThemeSystemContext.tsx
new file mode 100644
index 00000000..719f9d15
--- /dev/null
+++ b/packages/ui/src/contexts/ThemeSystemContext.tsx
@@ -0,0 +1,424 @@
+import React, {
+  useEffect,
+  useMemo,
+  useCallback,
+  useState,
+} from 'react';
+import type { Theme, ThemeMode } from '@/types/theme';
+import type { DesktopSettings } from '@/lib/desktop';
+import { isDesktopRuntime } from '@/lib/desktop';
+import { CSSVariableGenerator } from '@/lib/theme/cssGenerator';
+import { updateDesktopSettings } from '@/lib/persistence';
+import {
+  themes,
+  getThemeById,
+  flexokiLightTheme,
+  flexokiDarkTheme,
+} from '@/lib/theme/themes';
+import { ThemeSystemContext, type ThemeContextValue } from './theme-system-context';
+
+type ThemePreferences = {
+  themeMode: ThemeMode;
+  lightThemeId: string;
+  darkThemeId: string;
+};
+
+const DEFAULT_LIGHT_ID = flexokiLightTheme.metadata.id;
+const DEFAULT_DARK_ID = flexokiDarkTheme.metadata.id;
+
+const getSystemPreference = (): boolean => {
+  if (typeof window === 'undefined') {
+    return true;
+  }
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+};
+
+const fallbackThemeForVariant = (variant: 'light' | 'dark'): Theme =>
+  variant === 'dark' ? flexokiDarkTheme : flexokiLightTheme;
+
+const findFallbackThemeId = (variant: 'light' | 'dark'): string => {
+  const fallback = themes.find((candidate) => candidate.metadata.variant === variant);
+  return (fallback ?? fallbackThemeForVariant(variant)).metadata.id;
+};
+
+const ensureThemeById = (themeId: string, variant: 'light' | 'dark'): Theme => {
+  const theme = getThemeById(themeId);
+  if (theme && theme.metadata.variant === variant) {
+    return theme;
+  }
+  const fallback = themes.find((candidate) => candidate.metadata.variant === variant);
+  return fallback ?? fallbackThemeForVariant(variant);
+};
+
+const validateThemeId = (themeId: string | null, variant: 'light' | 'dark'): string => {
+  if (!themeId) {
+    return variant === 'light' ? DEFAULT_LIGHT_ID : DEFAULT_DARK_ID;
+  }
+  const theme = getThemeById(themeId);
+  if (theme && theme.metadata.variant === variant) {
+    return theme.metadata.id;
+  }
+  return findFallbackThemeId(variant);
+};
+
+const buildInitialPreferences = (defaultThemeId?: string): ThemePreferences => {
+  let lightThemeId = DEFAULT_LIGHT_ID;
+  let darkThemeId = DEFAULT_DARK_ID;
+  let themeMode: ThemeMode = 'system';
+
+  if (typeof window !== 'undefined') {
+    const storedMode = localStorage.getItem('themeMode');
+    const storedLightId = localStorage.getItem('lightThemeId');
+    const storedDarkId = localStorage.getItem('darkThemeId');
+    const legacyUseSystem = localStorage.getItem('useSystemTheme');
+    const legacyThemeId = localStorage.getItem('selectedThemeId');
+    const legacyVariant = localStorage.getItem('selectedThemeVariant');
+
+    if (storedMode === 'light' || storedMode === 'dark' || storedMode === 'system') {
+      themeMode = storedMode;
+    } else if (legacyUseSystem !== null) {
+      const useSystem = legacyUseSystem === 'true';
+      if (useSystem) {
+        themeMode = 'system';
+      } else if (legacyThemeId) {
+        const legacyTheme = getThemeById(legacyThemeId);
+        if (legacyTheme) {
+          themeMode = legacyTheme.metadata.variant === 'dark' ? 'dark' : 'light';
+          if (legacyTheme.metadata.variant === 'dark') {
+            darkThemeId = legacyTheme.metadata.id;
+          } else {
+            lightThemeId = legacyTheme.metadata.id;
+          }
+        }
+      }
+    } else if (legacyVariant === 'light' || legacyVariant === 'dark') {
+      themeMode = legacyVariant;
+    }
+
+    lightThemeId = validateThemeId(storedLightId, 'light');
+    darkThemeId = validateThemeId(storedDarkId, 'dark');
+  }
+
+  if (defaultThemeId) {
+    const defaultTheme = getThemeById(defaultThemeId);
+    if (defaultTheme) {
+      if (defaultTheme.metadata.variant === 'light') {
+        lightThemeId = defaultTheme.metadata.id;
+      } else {
+        darkThemeId = defaultTheme.metadata.id;
+      }
+    }
+  }
+
+  return {
+    themeMode,
+    lightThemeId,
+    darkThemeId,
+  };
+};
+
+interface ThemeSystemProviderProps {
+  children: React.ReactNode;
+  defaultThemeId?: string;
+}
+
+export function ThemeSystemProvider({ children, defaultThemeId }: ThemeSystemProviderProps) {
+  const cssGenerator = useMemo(() => new CSSVariableGenerator(), []);
+  const [preferences, setPreferences] = useState<ThemePreferences>(() => buildInitialPreferences(defaultThemeId));
+  const [systemPrefersDark, setSystemPrefersDark] = useState<boolean>(() => getSystemPreference());
+
+  const currentTheme = useMemo(() => {
+    if (preferences.themeMode === 'light') {
+      return ensureThemeById(preferences.lightThemeId, 'light');
+    }
+    if (preferences.themeMode === 'dark') {
+      return ensureThemeById(preferences.darkThemeId, 'dark');
+    }
+    return systemPrefersDark
+      ? ensureThemeById(preferences.darkThemeId, 'dark')
+      : ensureThemeById(preferences.lightThemeId, 'light');
+  }, [preferences, systemPrefersDark]);
+
+  const availableThemes = themes;
+
+  const updateBrowserChrome = useCallback((theme: Theme) => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    const chromeColor = theme.colors.surface.background;
+
+    if (isDesktopRuntime()) {
+      document.body.style.backgroundColor = 'transparent';
+    } else {
+      document.body.style.backgroundColor = chromeColor;
+    }
+
+    let metaThemeColor = document.querySelector('meta[name="theme-color"]') as HTMLMetaElement;
+    if (!metaThemeColor) {
+      metaThemeColor = document.createElement('meta');
+      metaThemeColor.setAttribute('name', 'theme-color');
+      document.head.appendChild(metaThemeColor);
+    }
+    metaThemeColor.setAttribute('content', chromeColor);
+
+    const mediaQuery =
+      theme.metadata.variant === 'dark'
+        ? '(prefers-color-scheme: dark)'
+        : '(prefers-color-scheme: light)';
+    let metaThemeColorMedia = document.querySelector(
+      `meta[name="theme-color"][media="${mediaQuery}"]`,
+    ) as HTMLMetaElement;
+    if (!metaThemeColorMedia) {
+      metaThemeColorMedia = document.createElement('meta');
+      metaThemeColorMedia.setAttribute('name', 'theme-color');
+      metaThemeColorMedia.setAttribute('media', mediaQuery);
+      document.head.appendChild(metaThemeColorMedia);
+    }
+    metaThemeColorMedia.setAttribute('content', chromeColor);
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    cssGenerator.apply(currentTheme);
+    updateBrowserChrome(currentTheme);
+
+    const root = document.documentElement;
+    root.classList.remove('light', 'dark');
+    root.classList.add(currentTheme.metadata.variant);
+  }, [cssGenerator, currentTheme, updateBrowserChrome]);
+
+  useEffect(() => {
+    if (preferences.themeMode !== 'system' || typeof window === 'undefined') {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (event: MediaQueryListEvent) => {
+      setSystemPrefersDark(event.matches);
+    };
+
+    setSystemPrefersDark(mediaQuery.matches);
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [preferences.themeMode]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    localStorage.setItem('themeMode', preferences.themeMode);
+    localStorage.setItem('lightThemeId', preferences.lightThemeId);
+    localStorage.setItem('darkThemeId', preferences.darkThemeId);
+    localStorage.setItem('useSystemTheme', String(preferences.themeMode === 'system'));
+    localStorage.setItem('selectedThemeId', currentTheme.metadata.id);
+    localStorage.setItem(
+      'selectedThemeVariant',
+      currentTheme.metadata.variant === 'light' ? 'light' : 'dark',
+    );
+  }, [preferences, currentTheme]);
+
+  useEffect(() => {
+    void updateDesktopSettings({
+      themeId: currentTheme.metadata.id,
+      themeVariant: currentTheme.metadata.variant === 'light' ? 'light' : 'dark',
+      useSystemTheme: preferences.themeMode === 'system',
+      lightThemeId: preferences.lightThemeId,
+      darkThemeId: preferences.darkThemeId,
+    });
+  }, [currentTheme.metadata.id, currentTheme.metadata.variant, preferences.themeMode, preferences.lightThemeId, preferences.darkThemeId]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    const handleSettingsSynced = (event: Event) => {
+      const detail = (event as CustomEvent<DesktopSettings>).detail;
+      if (!detail) {
+        return;
+      }
+
+      setPreferences((prev) => {
+        let nextMode = prev.themeMode;
+        if (detail.useSystemTheme === true) {
+          nextMode = 'system';
+        } else if (detail.useSystemTheme === false) {
+          if (detail.themeVariant === 'dark' || detail.themeVariant === 'light') {
+            nextMode = detail.themeVariant;
+          }
+        }
+
+        let nextLight = prev.lightThemeId;
+        if (typeof detail.lightThemeId === 'string' && detail.lightThemeId.length > 0) {
+          nextLight = validateThemeId(detail.lightThemeId, 'light');
+        }
+
+        let nextDark = prev.darkThemeId;
+        if (typeof detail.darkThemeId === 'string' && detail.darkThemeId.length > 0) {
+          nextDark = validateThemeId(detail.darkThemeId, 'dark');
+        }
+
+        const same =
+          nextMode === prev.themeMode &&
+          nextLight === prev.lightThemeId &&
+          nextDark === prev.darkThemeId;
+
+        if (same) {
+          return prev;
+        }
+
+        return {
+          themeMode: nextMode,
+          lightThemeId: nextLight,
+          darkThemeId: nextDark,
+        };
+      });
+    };
+
+    window.addEventListener('openchamber:settings-synced', handleSettingsSynced);
+    return () => window.removeEventListener('openchamber:settings-synced', handleSettingsSynced);
+  }, []);
+
+  const setTheme = useCallback(
+    (themeId: string) => {
+      const theme = availableThemes.find((candidate) => candidate.metadata.id === themeId);
+      if (!theme) {
+        return;
+      }
+
+      setPreferences((prev) => {
+        if (theme.metadata.variant === 'dark') {
+          if (prev.darkThemeId === theme.metadata.id && prev.themeMode === 'dark') {
+            return prev;
+          }
+          return {
+            ...prev,
+            darkThemeId: theme.metadata.id,
+            themeMode: 'dark',
+          };
+        }
+
+        if (prev.lightThemeId === theme.metadata.id && prev.themeMode === 'light') {
+          return prev;
+        }
+
+        return {
+          ...prev,
+          lightThemeId: theme.metadata.id,
+          themeMode: 'light',
+        };
+      });
+    },
+    [availableThemes],
+  );
+
+  const setThemeModeHandler = useCallback((mode: ThemeMode) => {
+    setPreferences((prev) => {
+      if (prev.themeMode === mode) {
+        return prev;
+      }
+      return {
+        ...prev,
+        themeMode: mode,
+      };
+    });
+  }, []);
+
+  const setSystemPreferenceHandler = useCallback(
+    (use: boolean) => {
+      if (use) {
+        setPreferences((prev) => {
+          if (prev.themeMode === 'system') {
+            return prev;
+          }
+          return {
+            ...prev,
+            themeMode: 'system',
+          };
+        });
+        return;
+      }
+
+      const fallbackMode: ThemeMode =
+        currentTheme.metadata.variant === 'dark' ? 'dark' : 'light';
+      setPreferences((prev) => {
+        if (prev.themeMode === fallbackMode) {
+          return prev;
+        }
+        return {
+          ...prev,
+          themeMode: fallbackMode,
+        };
+      });
+    },
+    [currentTheme.metadata.variant],
+  );
+
+  const setLightThemePreference = useCallback(
+    (themeId: string) => {
+      const theme = availableThemes.find(
+        (candidate) =>
+          candidate.metadata.id === themeId && candidate.metadata.variant === 'light',
+      );
+      if (!theme) {
+        return;
+      }
+
+      setPreferences((prev) => {
+        if (prev.lightThemeId === theme.metadata.id) {
+          return prev;
+        }
+        return {
+          ...prev,
+          lightThemeId: theme.metadata.id,
+        };
+      });
+    },
+    [availableThemes],
+  );
+
+  const setDarkThemePreference = useCallback(
+    (themeId: string) => {
+      const theme = availableThemes.find(
+        (candidate) =>
+          candidate.metadata.id === themeId && candidate.metadata.variant === 'dark',
+      );
+      if (!theme) {
+        return;
+      }
+
+      setPreferences((prev) => {
+        if (prev.darkThemeId === theme.metadata.id) {
+          return prev;
+        }
+        return {
+          ...prev,
+          darkThemeId: theme.metadata.id,
+        };
+      });
+    },
+    [availableThemes],
+  );
+
+  const value: ThemeContextValue = {
+    currentTheme,
+    availableThemes,
+    setTheme,
+    isSystemPreference: preferences.themeMode === 'system',
+    setSystemPreference: setSystemPreferenceHandler,
+    themeMode: preferences.themeMode,
+    setThemeMode: setThemeModeHandler,
+    lightThemeId: preferences.lightThemeId,
+    darkThemeId: preferences.darkThemeId,
+    setLightThemePreference,
+    setDarkThemePreference,
+  };
+
+  return (
+    <ThemeSystemContext.Provider value={value}>
+      {children}
+    </ThemeSystemContext.Provider>
+  );
+}
diff --git a/packages/ui/src/contexts/runtimeAPIContext.ts b/packages/ui/src/contexts/runtimeAPIContext.ts
new file mode 100644
index 00000000..37efff7d
--- /dev/null
+++ b/packages/ui/src/contexts/runtimeAPIContext.ts
@@ -0,0 +1,4 @@
+import React from 'react';
+import type { RuntimeAPIs } from '@/lib/api/types';
+
+export const RuntimeAPIContext = React.createContext<RuntimeAPIs | null>(null);
diff --git a/packages/ui/src/contexts/runtimeAPIRegistry.ts b/packages/ui/src/contexts/runtimeAPIRegistry.ts
new file mode 100644
index 00000000..64af199e
--- /dev/null
+++ b/packages/ui/src/contexts/runtimeAPIRegistry.ts
@@ -0,0 +1,9 @@
+import type { RuntimeAPIs } from '@/lib/api/types';
+
+let registeredRuntimeAPIs: RuntimeAPIs | null = null;
+
+export const registerRuntimeAPIs = (apis: RuntimeAPIs | null): void => {
+  registeredRuntimeAPIs = apis;
+};
+
+export const getRegisteredRuntimeAPIs = (): RuntimeAPIs | null => registeredRuntimeAPIs;
diff --git a/packages/ui/src/contexts/theme-system-context.ts b/packages/ui/src/contexts/theme-system-context.ts
new file mode 100644
index 00000000..35fdec82
--- /dev/null
+++ b/packages/ui/src/contexts/theme-system-context.ts
@@ -0,0 +1,19 @@
+import { createContext } from 'react';
+
+import type { Theme, ThemeMode } from '@/types/theme';
+
+export interface ThemeContextValue {
+  currentTheme: Theme;
+  availableThemes: Theme[];
+  setTheme: (themeId: string) => void;
+  isSystemPreference: boolean;
+  setSystemPreference: (use: boolean) => void;
+  themeMode: ThemeMode;
+  setThemeMode: (mode: ThemeMode) => void;
+  lightThemeId: string;
+  darkThemeId: string;
+  setLightThemePreference: (themeId: string) => void;
+  setDarkThemePreference: (themeId: string) => void;
+}
+
+export const ThemeSystemContext = createContext<ThemeContextValue | undefined>(undefined);
diff --git a/packages/ui/src/contexts/useThemeSystem.ts b/packages/ui/src/contexts/useThemeSystem.ts
new file mode 100644
index 00000000..3a50e3c4
--- /dev/null
+++ b/packages/ui/src/contexts/useThemeSystem.ts
@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+
+import { ThemeSystemContext } from './theme-system-context';
+
+export function useThemeSystem() {
+  const context = useContext(ThemeSystemContext);
+  if (!context) {
+    throw new Error('useThemeSystem must be used within a ThemeSystemProvider');
+  }
+  return context;
+}
+
+export function useOptionalThemeSystem() {
+  return useContext(ThemeSystemContext);
+}
diff --git a/packages/ui/src/hooks/useAssistantStatus.ts b/packages/ui/src/hooks/useAssistantStatus.ts
new file mode 100644
index 00000000..a99acecf
--- /dev/null
+++ b/packages/ui/src/hooks/useAssistantStatus.ts
@@ -0,0 +1,339 @@
+import React from 'react';
+import type { AssistantMessage, Message, Part, ReasoningPart, TextPart, ToolPart } from '@opencode-ai/sdk';
+import { useShallow } from 'zustand/react/shallow';
+
+import type { MessageStreamPhase } from '@/stores/types/sessionTypes';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { isFullySyntheticMessage } from '@/lib/messages/synthetic';
+import { useCurrentSessionActivity } from './useSessionActivity';
+
+export type AssistantActivity = 'idle' | 'streaming' | 'tooling' | 'cooldown' | 'permission';
+
+interface WorkingSummary {
+    activity: AssistantActivity;
+    hasWorkingContext: boolean;
+    hasActiveTools: boolean;
+    isWorking: boolean;
+    isStreaming: boolean;
+    isCooldown: boolean;
+    lifecyclePhase: MessageStreamPhase | null;
+    statusText: string | null;
+    isWaitingForPermission: boolean;
+    canAbort: boolean;
+    compactionDeadline: number | null;
+    activePartType?: 'text' | 'tool' | 'reasoning' | 'editing';
+    activeToolName?: string;
+    wasAborted: boolean;
+    abortActive: boolean;
+    lastCompletionId: string | null;
+    isComplete: boolean;
+}
+
+interface FormingSummary {
+    isActive: boolean;
+    characterCount: number;
+}
+
+export interface AssistantStatusSnapshot {
+    forming: FormingSummary;
+    working: WorkingSummary;
+}
+
+type AssistantMessageWithState = AssistantMessage & {
+    status?: string;
+    streaming?: boolean;
+    abortedAt?: number;
+};
+
+interface AssistantSessionMessageRecord {
+    info: AssistantMessageWithState;
+    parts: Part[];
+}
+
+const DEFAULT_WORKING: WorkingSummary = {
+    activity: 'idle',
+    hasWorkingContext: false,
+    hasActiveTools: false,
+    isWorking: false,
+    isStreaming: false,
+    isCooldown: false,
+    lifecyclePhase: null,
+    statusText: null,
+    isWaitingForPermission: false,
+    canAbort: false,
+    compactionDeadline: null,
+    activePartType: undefined,
+    activeToolName: undefined,
+    wasAborted: false,
+    abortActive: false,
+    lastCompletionId: null,
+    isComplete: false,
+};
+
+const isAssistantMessage = (message: Message): message is AssistantMessageWithState => message.role === 'assistant';
+
+const isReasoningPart = (part: Part): part is ReasoningPart => part.type === 'reasoning';
+
+const isTextPart = (part: Part): part is TextPart => part.type === 'text';
+
+const getLegacyTextContent = (part: Part): string | undefined => {
+    if (isTextPart(part)) {
+        return part.text;
+    }
+    const candidate = part as Partial<{ text?: unknown; content?: unknown; value?: unknown }>;
+    if (typeof candidate.text === 'string') {
+        return candidate.text;
+    }
+    if (typeof candidate.content === 'string') {
+        return candidate.content;
+    }
+    if (typeof candidate.value === 'string') {
+        return candidate.value;
+    }
+    return undefined;
+};
+
+const getPartTimeInfo = (part: Part): { end?: number } | undefined => {
+    if (isTextPart(part) || isReasoningPart(part)) {
+        return part.time;
+    }
+    const candidate = part as Partial<{ time?: { end?: number } }>;
+    return candidate.time;
+};
+
+const getToolDisplayName = (part: ToolPart): string => {
+    if (part.tool) {
+        return part.tool;
+    }
+    const candidate = part as ToolPart & Partial<{ name?: unknown }>;
+    return typeof candidate.name === 'string' ? candidate.name : 'tool';
+};
+
+export function useAssistantStatus(): AssistantStatusSnapshot {
+    const { currentSessionId, messages, permissions, sessionAbortFlags } = useSessionStore(
+        useShallow((state) => ({
+            currentSessionId: state.currentSessionId,
+            messages: state.messages,
+            permissions: state.permissions,
+            sessionAbortFlags: state.sessionAbortFlags,
+        }))
+    );
+
+    const { phase: activityPhase, isWorking: isPhaseWorking, isCooldown: isPhaseCooldown } = useCurrentSessionActivity();
+
+    const sessionMessages = React.useMemo<Array<{ info: Message; parts: Part[] }>>(() => {
+        if (!currentSessionId) {
+            return [];
+        }
+        const records = messages.get(currentSessionId) ?? [];
+        return records as Array<{ info: Message; parts: Part[] }>;
+    }, [currentSessionId, messages]);
+
+    type ParsedStatusResult = {
+        activePartType: 'text' | 'tool' | 'reasoning' | 'editing' | undefined;
+        activeToolName: string | undefined;
+        statusText: string;
+    };
+
+    const parsedStatus = React.useMemo<ParsedStatusResult>(() => {
+        if (sessionMessages.length === 0) {
+            return { activePartType: undefined, activeToolName: undefined, statusText: 'working' };
+        }
+
+        const assistantMessages = sessionMessages
+            .filter(
+                (msg): msg is AssistantSessionMessageRecord =>
+                    isAssistantMessage(msg.info) && !isFullySyntheticMessage(msg.parts)
+            );
+
+        if (assistantMessages.length === 0) {
+            return { activePartType: undefined, activeToolName: undefined, statusText: 'working' };
+        }
+
+        const sortedAssistantMessages = [...assistantMessages].sort((a, b) => {
+            const aCreated = typeof a.info.time?.created === 'number' ? a.info.time.created : null;
+            const bCreated = typeof b.info.time?.created === 'number' ? b.info.time.created : null;
+
+            if (aCreated !== null && bCreated !== null && aCreated !== bCreated) {
+                return aCreated - bCreated;
+            }
+
+            return a.info.id.localeCompare(b.info.id);
+        });
+
+        const lastAssistant = sortedAssistantMessages[sortedAssistantMessages.length - 1];
+
+        let activePartType: 'text' | 'tool' | 'reasoning' | 'editing' | undefined = undefined;
+        let activeToolName: string | undefined = undefined;
+
+        const editingTools = new Set(['edit', 'write']);
+
+        for (let i = (lastAssistant.parts ?? []).length - 1; i >= 0; i -= 1) {
+            const part = lastAssistant.parts?.[i];
+            if (!part) continue;
+
+            switch (part.type) {
+                case 'reasoning': {
+                    const time = part.time ?? getPartTimeInfo(part);
+                    const stillRunning = !time || typeof time.end === 'undefined';
+                    if (stillRunning && !activePartType) {
+                        activePartType = 'reasoning';
+                    }
+                    break;
+                }
+                case 'tool': {
+                    const toolStatus = part.state?.status;
+                    if ((toolStatus === 'running' || toolStatus === 'pending') && !activePartType) {
+                        const toolName = getToolDisplayName(part);
+                        if (editingTools.has(toolName)) {
+                            activePartType = 'editing';
+                        } else {
+                            activePartType = 'tool';
+                            activeToolName = toolName;
+                        }
+                    }
+                    break;
+                }
+                case 'text': {
+                    const rawContent = getLegacyTextContent(part) ?? '';
+                    if (typeof rawContent === 'string' && rawContent.trim().length > 0) {
+                        const time = getPartTimeInfo(part);
+                        const streamingPart = !time || typeof time.end === 'undefined';
+                        if (streamingPart && !activePartType) {
+                            activePartType = 'text';
+                        }
+                    }
+                    break;
+                }
+                default:
+                    break;
+            }
+        }
+
+        const statusText = (() => {
+            if (activePartType === 'editing') return 'editing';
+            if (activePartType === 'tool' && activeToolName) return `using ${activeToolName}`;
+            if (activePartType === 'reasoning') return 'thinking';
+            if (activePartType === 'text') return 'composing';
+            return 'working';
+        })();
+
+        return { activePartType, activeToolName, statusText };
+    }, [sessionMessages]);
+
+    const abortState = React.useMemo(() => {
+        const sessionId = currentSessionId;
+        const abortRecord = sessionId ? sessionAbortFlags?.get(sessionId) ?? null : null;
+        const hasActiveAbort = Boolean(abortRecord && !abortRecord.acknowledged);
+        return { wasAborted: hasActiveAbort, abortActive: hasActiveAbort };
+    }, [currentSessionId, sessionAbortFlags]);
+
+    const baseWorking = React.useMemo<WorkingSummary>(() => {
+
+        if (abortState.wasAborted) {
+            return {
+                ...DEFAULT_WORKING,
+                wasAborted: true,
+                abortActive: abortState.abortActive,
+                activity: 'idle',
+                hasWorkingContext: false,
+                isWorking: false,
+                isStreaming: false,
+                isCooldown: false,
+                statusText: null,
+                canAbort: false,
+            };
+        }
+
+        const isWorking = isPhaseWorking;
+        const isStreaming = activityPhase === 'busy';
+        const isCooldown = isPhaseCooldown;
+
+        let activity: AssistantActivity = 'idle';
+        if (isWorking) {
+            if (parsedStatus.activePartType === 'tool' || parsedStatus.activePartType === 'editing') {
+                activity = 'tooling';
+            } else {
+                activity = isCooldown ? 'cooldown' : 'streaming';
+            }
+        }
+
+        return {
+            activity,
+            hasWorkingContext: isWorking,
+            hasActiveTools: parsedStatus.activePartType === 'tool' || parsedStatus.activePartType === 'editing',
+            isWorking,
+            isStreaming,
+            isCooldown,
+            lifecyclePhase: isStreaming ? 'streaming' : isCooldown ? 'cooldown' : null,
+            statusText: isWorking ? parsedStatus.statusText : null,
+            isWaitingForPermission: false,
+            canAbort: isWorking,
+            compactionDeadline: null,
+            activePartType: isWorking ? parsedStatus.activePartType : undefined,
+            activeToolName: isWorking ? parsedStatus.activeToolName : undefined,
+            wasAborted: false,
+            abortActive: false,
+            lastCompletionId: null,
+
+            isComplete: isCooldown,
+        };
+    }, [activityPhase, isPhaseWorking, isPhaseCooldown, parsedStatus, abortState]);
+
+    const forming = React.useMemo<FormingSummary>(() => {
+
+        const isActive = isPhaseWorking && parsedStatus.activePartType === 'text';
+
+        if (!isActive || sessionMessages.length === 0) {
+            return { isActive, characterCount: 0 };
+        }
+
+        const assistantMessages = sessionMessages.filter(
+            (msg): msg is AssistantSessionMessageRecord =>
+                isAssistantMessage(msg.info) && !isFullySyntheticMessage(msg.parts)
+        );
+
+        if (assistantMessages.length === 0) {
+            return { isActive, characterCount: 0 };
+        }
+
+        const lastAssistant = assistantMessages[assistantMessages.length - 1];
+        let characterCount = 0;
+
+        (lastAssistant.parts ?? []).forEach((part) => {
+            if (part.type !== 'text') return;
+            const rawContent = getLegacyTextContent(part) ?? '';
+            if (typeof rawContent === 'string' && rawContent.trim().length > 0) {
+                characterCount += rawContent.length;
+            }
+        });
+
+        return { isActive, characterCount };
+    }, [sessionMessages, isPhaseWorking, parsedStatus.activePartType]);
+
+    const working = React.useMemo<WorkingSummary>(() => {
+        if (baseWorking.wasAborted || baseWorking.abortActive) {
+            return baseWorking;
+        }
+
+        const sessionId = currentSessionId;
+        const permissionList = sessionId ? permissions?.get(sessionId) ?? [] : [];
+        const hasPendingPermission = permissionList.length > 0;
+
+        if (!hasPendingPermission) {
+            return baseWorking;
+        }
+
+        return {
+            ...baseWorking,
+            statusText: 'waiting for permission',
+            isWaitingForPermission: true,
+            canAbort: false,
+        };
+    }, [currentSessionId, permissions, baseWorking]);
+
+    return {
+        forming,
+        working,
+    };
+}
diff --git a/packages/ui/src/hooks/useAssistantTyping.ts b/packages/ui/src/hooks/useAssistantTyping.ts
new file mode 100644
index 00000000..568f10bc
--- /dev/null
+++ b/packages/ui/src/hooks/useAssistantTyping.ts
@@ -0,0 +1,229 @@
+import React from 'react';
+
+const DEFAULT_TIMEOUT_MS = 20000;
+const LIFECYCLE_GRACE_MS = 8000;
+
+type MessageStreamPhase = 'streaming' | 'cooldown' | 'completed';
+
+interface MessageStreamLifecycle {
+    phase: MessageStreamPhase;
+    startedAt: number;
+    lastUpdateAt: number;
+    completedAt?: number;
+}
+
+interface MessagePart {
+    type?: string;
+    time?: { end?: number };
+    state?: { status?: string };
+    text?: string;
+    content?: string;
+}
+
+interface ChatMessageInfo {
+    id: string;
+    role: string;
+    time: { created: number; completed?: number; updated?: number };
+    animationSettled?: boolean;
+}
+
+interface ChatMessageRecord {
+    info: ChatMessageInfo;
+    parts: MessagePart[];
+}
+
+const hasFinalizedTextPart = (parts: MessagePart[]): boolean => {
+    return parts.some((part) => {
+        if (part?.type !== 'text') {
+            return false;
+        }
+        if (!part?.time || typeof part.time.end === 'undefined') {
+            return false;
+        }
+        const content = typeof part.text === 'string' ? part.text : part.content;
+        return Boolean(content && content.trim().length > 0);
+    });
+};
+
+const getAssistantMessagesAfterLastUser = (messages: ChatMessageRecord[]): ChatMessageRecord[] => {
+    let lastUserIndex = -1;
+
+    for (let i = messages.length - 1; i >= 0; i -= 1) {
+        if (messages[i]?.info?.role === 'user') {
+            lastUserIndex = i;
+            break;
+        }
+    }
+
+    return messages.filter((message, index) => index > lastUserIndex && message?.info?.role === 'assistant');
+};
+
+const buildAssistantActivitySignature = (messages: ChatMessageRecord[]): string => {
+    return messages
+        .map((message) => {
+            const partSignature = (message.parts || [])
+                .map((part) => {
+                    const type = part?.type || 'unknown';
+                    const finalized = part?.time && typeof part.time.end !== 'undefined' ? '1' : '0';
+                    const status = part?.state?.status || '';
+                    const textLength = typeof part?.text === 'string' ? part.text.length : 0;
+                    const contentLength = typeof part?.content === 'string' ? part.content.length : 0;
+                    return `${type}:${finalized}:${status}:${textLength}:${contentLength}`;
+                })
+                .join('|');
+
+            const completed = message.info?.time?.completed || '';
+            const updated = message.info?.time?.updated || '';
+
+            return `${message.info?.id || 'unknown'}:${message.parts?.length || 0}:${completed}:${updated}:${partSignature}`;
+        })
+        .join('||');
+};
+
+interface UseAssistantTypingOptions {
+    messages: ChatMessageRecord[];
+    timeoutMs?: number;
+    messageStreamStates?: Map<string, MessageStreamLifecycle>;
+}
+
+interface UseAssistantTypingResult {
+    isTyping: boolean;
+}
+
+export const useAssistantTyping = ({
+    messages,
+    timeoutMs = DEFAULT_TIMEOUT_MS,
+    messageStreamStates,
+}: UseAssistantTypingOptions): UseAssistantTypingResult => {
+    const assistantMessages = React.useMemo(() => getAssistantMessagesAfterLastUser(messages), [messages]);
+
+    const hasAssistantActivity = assistantMessages.length > 0;
+    const hasFinalAssistantText = assistantMessages.some((message) => hasFinalizedTextPart(message.parts));
+    const assistantHasUnsettledAnimation = assistantMessages.some((message) => {
+        return message.info.animationSettled !== true;
+    });
+    const hasActiveLifecycle = React.useMemo(() => {
+        if (!messageStreamStates || messageStreamStates.size === 0) {
+            return false;
+        }
+
+        return assistantMessages.some((message) => {
+            const lifecycle = messageStreamStates.get(message.info.id);
+            if (!lifecycle) {
+                return false;
+            }
+            return lifecycle.phase === 'streaming' || lifecycle.phase === 'cooldown';
+        });
+    }, [assistantMessages, messageStreamStates]);
+
+    const hasRunningTool = React.useMemo(() => {
+        return assistantMessages.some((message) =>
+            (message.parts || []).some(
+                (part) => part?.type === 'tool' && part?.state?.status === 'running'
+            )
+        );
+    }, [assistantMessages]);
+
+    const shouldShowBecauseOfLifecycle = hasAssistantActivity && (hasActiveLifecycle || hasRunningTool);
+    const shouldShowBasedOnContent = assistantHasUnsettledAnimation && hasAssistantActivity && !hasFinalAssistantText;
+    const [graceUntil, setGraceUntil] = React.useState<number | null>(null);
+    const previousLifecycleRef = React.useRef<boolean>(false);
+
+    React.useEffect(() => {
+        if (shouldShowBecauseOfLifecycle) {
+            setGraceUntil(null);
+        } else if (previousLifecycleRef.current) {
+            setGraceUntil(Date.now() + LIFECYCLE_GRACE_MS);
+        }
+
+        previousLifecycleRef.current = shouldShowBecauseOfLifecycle;
+    }, [shouldShowBecauseOfLifecycle]);
+
+    React.useEffect(() => {
+        if (graceUntil === null) {
+            return undefined;
+        }
+
+        const remaining = graceUntil - Date.now();
+        if (remaining <= 0) {
+            setGraceUntil(null);
+            return undefined;
+        }
+
+        const timer = window.setTimeout(() => {
+            setGraceUntil(null);
+        }, remaining);
+
+        return () => window.clearTimeout(timer);
+    }, [graceUntil]);
+
+    const withinLifecycleGrace = graceUntil !== null;
+
+    const shouldShowIndicator = shouldShowBasedOnContent || shouldShowBecauseOfLifecycle || withinLifecycleGrace;
+
+    const signatureRef = React.useRef<string | null>(null);
+    const [lastActivityAt, setLastActivityAt] = React.useState<number | null>(null);
+    const [hasTimedOut, setHasTimedOut] = React.useState(false);
+
+    React.useEffect(() => {
+        if (!shouldShowIndicator) {
+            signatureRef.current = null;
+            setLastActivityAt(null);
+            setHasTimedOut(false);
+            return;
+        }
+
+        const contentSignature = buildAssistantActivitySignature(assistantMessages);
+        const lifecycleSignature = messageStreamStates
+            ? assistantMessages
+                  .map((message) => {
+                      const lifecycle = messageStreamStates.get(message.info.id);
+                      if (!lifecycle) {
+                          return `${message.info.id}:none`;
+                      }
+                      return `${message.info.id}:${lifecycle.phase}:${lifecycle.lastUpdateAt}:${
+                          lifecycle.completedAt || ''
+                      }`;
+                  })
+                  .join('||')
+            : '';
+        const signature = `${contentSignature}::${lifecycleSignature}::${hasRunningTool ? 'tool-running' : ''}::${
+            graceUntil ?? 'no-grace'
+        }`;
+
+        if (signatureRef.current !== signature) {
+            signatureRef.current = signature;
+            setLastActivityAt(Date.now());
+            setHasTimedOut(false);
+        }
+    }, [assistantMessages, shouldShowIndicator, messageStreamStates, hasRunningTool, graceUntil]);
+
+    React.useEffect(() => {
+        if (!shouldShowIndicator) {
+            return undefined;
+        }
+
+        if (lastActivityAt === null) {
+            return undefined;
+        }
+
+        const now = Date.now();
+        const elapsed = now - lastActivityAt;
+
+        if (elapsed >= timeoutMs) {
+            setHasTimedOut(true);
+            return undefined;
+        }
+
+        const remaining = timeoutMs - elapsed;
+        const timer = window.setTimeout(() => {
+            setHasTimedOut(true);
+        }, remaining);
+
+        return () => window.clearTimeout(timer);
+    }, [shouldShowIndicator, lastActivityAt, timeoutMs]);
+
+    const isTyping = shouldShowIndicator && !hasTimedOut;
+
+    return React.useMemo(() => ({ isTyping }), [isTyping]);
+};
diff --git a/packages/ui/src/hooks/useAvailableTools.ts b/packages/ui/src/hooks/useAvailableTools.ts
new file mode 100644
index 00000000..f3b52442
--- /dev/null
+++ b/packages/ui/src/hooks/useAvailableTools.ts
@@ -0,0 +1,49 @@
+import React from 'react';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
+
+export const useAvailableTools = () => {
+    const { tools: toolsAPI } = useRuntimeAPIs();
+    const [tools, setTools] = React.useState<string[]>([]);
+    const [isLoading, setIsLoading] = React.useState(true);
+    const [error, setError] = React.useState<string | null>(null);
+
+    React.useEffect(() => {
+        let cancelled = false;
+
+        const fetchTools = async () => {
+            setIsLoading(true);
+            setError(null);
+
+            try {
+                const availableTools = await toolsAPI.getAvailableTools();
+
+                if (cancelled) {
+                    return;
+                }
+
+                setTools(availableTools);
+            } catch (err) {
+                if (cancelled) {
+                    return;
+                }
+
+                const message = err instanceof Error ? err.message : 'Failed to fetch tools';
+                console.error('Failed to fetch available tools:', message);
+                setError(message);
+                setTools([]);
+            } finally {
+                if (!cancelled) {
+                    setIsLoading(false);
+                }
+            }
+        };
+
+        fetchTools();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [toolsAPI]);
+
+    return { tools, isLoading, error };
+};
diff --git a/packages/ui/src/hooks/useChatScrollManager.ts b/packages/ui/src/hooks/useChatScrollManager.ts
new file mode 100644
index 00000000..5b841174
--- /dev/null
+++ b/packages/ui/src/hooks/useChatScrollManager.ts
@@ -0,0 +1,518 @@
+import React from 'react';
+import type { Part } from '@opencode-ai/sdk';
+
+import { MessageFreshnessDetector } from '@/lib/messageFreshness';
+
+import { useScrollEngine } from './useScrollEngine';
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+export type ContentChangeReason = 'text' | 'structural' | 'permission';
+
+interface ChatMessageRecord {
+    info: Record<string, unknown>;
+    parts: Part[];
+}
+
+interface SessionMemoryState {
+    viewportAnchor: number;
+    isStreaming: boolean;
+    lastAccessedAt: number;
+    backgroundMessageCount: number;
+    totalAvailableMessages?: number;
+    hasMoreAbove?: boolean;
+    streamStartTime?: number;
+    isZombie?: boolean;
+}
+
+type SessionActivityPhase = 'idle' | 'busy' | 'cooldown';
+
+interface UseChatScrollManagerOptions {
+    currentSessionId: string | null;
+    sessionMessages: ChatMessageRecord[];
+    sessionPermissions: unknown[];
+    streamingMessageId: string | null;
+    sessionMemoryState: Map<string, SessionMemoryState>;
+    updateViewportAnchor: (sessionId: string, anchor: number) => void;
+    isSyncing: boolean;
+    isMobile: boolean;
+    messageStreamStates: Map<string, unknown>;
+    trimToViewportWindow: (sessionId: string, targetSize?: number) => void;
+    sessionActivityPhase?: Map<string, SessionActivityPhase>;
+}
+
+export interface AnimationHandlers {
+    onChunk: () => void;
+    onComplete: () => void;
+    onStreamingCandidate?: () => void;
+    onAnimationStart?: () => void;
+    onReservationCancelled?: () => void;
+    onReasoningBlock?: () => void;
+    onAnimatedHeightChange?: (height: number) => void;
+}
+
+interface UseChatScrollManagerResult {
+    scrollRef: React.RefObject<HTMLDivElement | null>;
+    handleMessageContentChange: (reason?: ContentChangeReason) => void;
+    getAnimationHandlers: (messageId: string) => AnimationHandlers;
+    showScrollButton: boolean;
+    scrollToBottom: (options?: { instant?: boolean }) => void;
+    spacerHeight: number;
+    pendingAnchorId: string | null;
+    hasActiveAnchor: boolean;
+}
+
+const ANCHOR_TARGET_OFFSET = 50;
+const DEFAULT_SCROLL_BUTTON_THRESHOLD = 40;
+const LONG_MESSAGE_THRESHOLD = 0.20;
+const LONG_MESSAGE_VISIBLE_PORTION = 0.10;
+
+const VIEWPORT_RESIZE_DEBOUNCE_MS = 150;
+
+const getMessageId = (message: ChatMessageRecord): string | null => {
+    const info = message.info;
+    if (typeof info?.id === 'string') {
+        return info.id;
+    }
+    return null;
+};
+
+const isUserMessage = (message: ChatMessageRecord): boolean => {
+    const info = message.info;
+    if (info?.userMessageMarker === true) {
+        return true;
+    }
+    const clientRole = info?.clientRole;
+    const serverRole = info?.role;
+    return clientRole === 'user' || serverRole === 'user';
+};
+
+export const useChatScrollManager = ({
+    currentSessionId,
+    sessionMessages,
+    updateViewportAnchor,
+    isSyncing,
+    isMobile,
+    sessionActivityPhase,
+}: UseChatScrollManagerOptions): UseChatScrollManagerResult => {
+    const scrollRef = React.useRef<HTMLDivElement | null>(null);
+    const scrollEngine = useScrollEngine({ containerRef: scrollRef, isMobile });
+
+    const [anchorId, setAnchorId] = React.useState<string | null>(null);
+    const [spacerHeight, setSpacerHeight] = React.useState(0);
+    const [showScrollButton, setShowScrollButton] = React.useState(false);
+    const [pendingAnchorId, setPendingAnchorId] = React.useState<string | null>(null);
+
+    const lastScrolledAnchorIdRef = React.useRef<string | null>(null);
+    const lastSessionIdRef = React.useRef<string | null>(null);
+    const lastMessageCountRef = React.useRef<number>(sessionMessages.length);
+    const spacerHeightRef = React.useRef(0);
+
+    const viewportHeightRef = React.useRef<number>(0);
+    const resizeTimeoutRef = React.useRef<number | undefined>(undefined);
+
+    const anchorIdRef = React.useRef<string | null>(null);
+
+    const hasAnchoredOnceRef = React.useRef<boolean>(false);
+
+    const currentPhase = currentSessionId
+        ? sessionActivityPhase?.get(currentSessionId) ?? 'idle'
+        : 'idle';
+
+    const updateSpacerHeight = React.useCallback((height: number) => {
+        const newHeight = Math.max(0, height);
+        if (spacerHeightRef.current !== newHeight) {
+            spacerHeightRef.current = newHeight;
+            setSpacerHeight(newHeight);
+        }
+    }, []);
+
+    const updateViewportCache = React.useCallback(() => {
+        const container = scrollRef.current;
+        if (container) {
+            viewportHeightRef.current = container.clientHeight;
+        }
+    }, []);
+
+    const getAnchorElement = React.useCallback((): HTMLElement | null => {
+        if (!anchorId) return null;
+        const container = scrollRef.current;
+        if (!container) return null;
+        return container.querySelector(`[data-message-id="${anchorId}"]`) as HTMLElement | null;
+    }, [anchorId]);
+
+    const isSpacerOutOfViewport = React.useCallback((): boolean => {
+        const container = scrollRef.current;
+        const currentSpacerHeight = spacerHeightRef.current;
+        if (!container || currentSpacerHeight <= 0) return true;
+
+        const spacerStartPosition = container.scrollHeight - currentSpacerHeight;
+        const viewportBottom = container.scrollTop + container.clientHeight;
+
+        return viewportBottom < spacerStartPosition;
+    }, []);
+
+    const calculateAnchorPosition = React.useCallback((
+        anchorElement: HTMLElement,
+        containerHeight: number
+    ): number => {
+        const messageHeight = anchorElement.offsetHeight;
+        const messageTop = anchorElement.offsetTop;
+        const isLongMessage = messageHeight > containerHeight * LONG_MESSAGE_THRESHOLD;
+
+        if (isLongMessage) {
+
+            const visiblePortion = containerHeight * LONG_MESSAGE_VISIBLE_PORTION;
+            const messageBottom = messageTop + messageHeight;
+            return messageBottom - visiblePortion;
+        } else {
+
+            return messageTop - ANCHOR_TARGET_OFFSET;
+        }
+    }, []);
+
+    const refreshSpacer = React.useCallback(() => {
+        const container = scrollRef.current;
+
+        if (!container || !anchorIdRef.current) {
+
+            return;
+        }
+
+        const anchorElement = getAnchorElement();
+        if (!anchorElement) {
+            return;
+        }
+
+        const containerHeight = container.clientHeight;
+        const contentHeight = container.scrollHeight;
+
+        const targetScrollTop = calculateAnchorPosition(anchorElement, containerHeight);
+        const requiredHeight = targetScrollTop + containerHeight;
+
+        const currentSpacerHeight = spacerHeightRef.current;
+        const contentWithoutSpacer = contentHeight - currentSpacerHeight;
+
+        if (!hasAnchoredOnceRef.current && contentWithoutSpacer < requiredHeight) {
+
+            const needed = requiredHeight - contentWithoutSpacer;
+
+            if (needed > currentSpacerHeight) {
+                updateSpacerHeight(needed);
+            }
+        }
+
+    }, [calculateAnchorPosition, getAnchorElement, updateSpacerHeight]);
+
+    const updateScrollButtonVisibility = React.useCallback(() => {
+        const container = scrollRef.current;
+        if (!container) {
+            setShowScrollButton(false);
+            return;
+        }
+
+        if (pendingAnchorId) {
+            setShowScrollButton(false);
+            return;
+        }
+
+        const hasScrollableContent = container.scrollHeight > container.clientHeight;
+        if (!hasScrollableContent) {
+            setShowScrollButton(false);
+            return;
+        }
+
+        const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+        const currentSpacerHeight = spacerHeightRef.current;
+
+        if (currentSpacerHeight > 0) {
+
+            const spacerStartPosition = container.scrollHeight - currentSpacerHeight;
+            const viewportBottom = container.scrollTop + container.clientHeight;
+
+            setShowScrollButton(viewportBottom < spacerStartPosition);
+        } else {
+
+            setShowScrollButton(distanceFromBottom > DEFAULT_SCROLL_BUTTON_THRESHOLD);
+        }
+    }, [pendingAnchorId]);
+
+    const scrollToBottom = React.useCallback((options?: { instant?: boolean }) => {
+        const container = scrollRef.current;
+        if (!container) return;
+
+        const bottom = container.scrollHeight - container.clientHeight;
+        scrollEngine.scrollToPosition(Math.max(0, bottom), options);
+    }, [scrollEngine]);
+
+    const scrollToNewAnchor = React.useCallback((messageId: string) => {
+
+        if (lastScrolledAnchorIdRef.current === messageId) {
+            return;
+        }
+        lastScrolledAnchorIdRef.current = messageId;
+
+        setPendingAnchorId(messageId);
+
+        const container = scrollRef.current;
+        if (!container) {
+            setPendingAnchorId(null);
+            return;
+        }
+
+        const contentHeight = container.scrollHeight;
+        const currentSpacer = spacerHeightRef.current;
+        const contentWithoutSpacer = contentHeight - currentSpacer;
+
+        const containerHeight = viewportHeightRef.current > 0
+            ? viewportHeightRef.current
+            : container.clientHeight;
+
+        const estimatedMessageTop = contentWithoutSpacer;
+
+        const targetScrollTop = estimatedMessageTop - ANCHOR_TARGET_OFFSET;
+
+        const requiredHeight = targetScrollTop + containerHeight;
+        let newSpacerHeight = 0;
+        if (contentWithoutSpacer < requiredHeight) {
+            newSpacerHeight = requiredHeight - contentWithoutSpacer;
+        }
+
+        if (newSpacerHeight !== currentSpacer) {
+            updateSpacerHeight(newSpacerHeight);
+        }
+
+        hasAnchoredOnceRef.current = true;
+
+        window.requestAnimationFrame(() => {
+
+            scrollEngine.scrollToPosition(targetScrollTop, { instant: true });
+
+            window.requestAnimationFrame(() => {
+                setPendingAnchorId(null);
+            });
+        });
+    }, [scrollEngine, updateSpacerHeight]);
+
+    const handleScrollEvent = React.useCallback(() => {
+        const container = scrollRef.current;
+        if (!container || !currentSessionId) {
+            return;
+        }
+
+        scrollEngine.handleScroll();
+        updateScrollButtonVisibility();
+
+        if (currentPhase === 'idle' && spacerHeightRef.current > 0 && isSpacerOutOfViewport()) {
+            updateSpacerHeight(0);
+            anchorIdRef.current = null;
+            setAnchorId(null);
+        }
+
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const position = (scrollTop + clientHeight / 2) / Math.max(scrollHeight, 1);
+        const estimatedIndex = Math.floor(position * sessionMessages.length);
+        updateViewportAnchor(currentSessionId, estimatedIndex);
+    }, [
+        currentSessionId,
+        currentPhase,
+        isSpacerOutOfViewport,
+        scrollEngine,
+        sessionMessages.length,
+        updateScrollButtonVisibility,
+        updateSpacerHeight,
+        updateViewportAnchor,
+    ]);
+
+    React.useEffect(() => {
+        const container = scrollRef.current;
+        if (!container) return;
+
+        container.addEventListener('scroll', handleScrollEvent, { passive: true });
+
+        return () => {
+            container.removeEventListener('scroll', handleScrollEvent);
+        };
+    }, [handleScrollEvent]);
+
+    useIsomorphicLayoutEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        updateViewportCache();
+
+        const handleResize = () => {
+
+            if (resizeTimeoutRef.current !== undefined) {
+                window.clearTimeout(resizeTimeoutRef.current);
+            }
+
+            resizeTimeoutRef.current = window.setTimeout(() => {
+                updateViewportCache();
+            }, VIEWPORT_RESIZE_DEBOUNCE_MS);
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            if (resizeTimeoutRef.current !== undefined) {
+                window.clearTimeout(resizeTimeoutRef.current);
+            }
+        };
+    }, [updateViewportCache]);
+
+    React.useEffect(() => {
+        if (currentSessionId && currentSessionId !== lastSessionIdRef.current) {
+            lastSessionIdRef.current = currentSessionId;
+            MessageFreshnessDetector.getInstance().recordSessionStart(currentSessionId);
+            lastMessageCountRef.current = sessionMessages.length;
+            lastScrolledAnchorIdRef.current = null;
+
+            anchorIdRef.current = null;
+            hasAnchoredOnceRef.current = false;
+            setAnchorId(null);
+
+            spacerHeightRef.current = 0;
+            setSpacerHeight(0);
+        }
+    }, [currentSessionId, sessionMessages.length]);
+
+    useIsomorphicLayoutEffect(() => {
+
+        if (isSyncing) {
+            lastMessageCountRef.current = sessionMessages.length;
+            return;
+        }
+
+        if (lastSessionIdRef.current !== currentSessionId) {
+            return;
+        }
+
+        const previousCount = lastMessageCountRef.current;
+        const nextCount = sessionMessages.length;
+
+        if (nextCount > previousCount && previousCount > 0) {
+
+            const previousLastId = getMessageId(sessionMessages[previousCount - 1]);
+
+            const wasAppended = previousLastId !== null &&
+                 getMessageId(sessionMessages[Math.min(previousCount - 1, nextCount - 1)]) === previousLastId;
+
+            if (wasAppended) {
+
+                const appendedMessages = sessionMessages.slice(previousCount, nextCount);
+                const newUserMessage = appendedMessages.find(isUserMessage);
+
+                if (newUserMessage) {
+                    const newAnchorId = getMessageId(newUserMessage);
+                    if (newAnchorId) {
+                        anchorIdRef.current = newAnchorId;
+                        setAnchorId(newAnchorId);
+                        scrollToNewAnchor(newAnchorId);
+                    }
+                } else {
+
+                    refreshSpacer();
+                }
+            } else {
+
+                refreshSpacer();
+            }
+        }
+
+        lastMessageCountRef.current = nextCount;
+    }, [currentSessionId, isSyncing, refreshSpacer, scrollToNewAnchor, sessionMessages]);
+
+    React.useEffect(() => {
+        const container = scrollRef.current;
+        if (!container || typeof ResizeObserver === 'undefined') return;
+
+        const observer = new ResizeObserver(() => {
+            refreshSpacer();
+            updateScrollButtonVisibility();
+        });
+
+        observer.observe(container);
+
+        return () => {
+            observer.disconnect();
+        };
+    }, [refreshSpacer, updateScrollButtonVisibility]);
+
+    React.useEffect(() => {
+        if (anchorId) {
+            refreshSpacer();
+            updateScrollButtonVisibility();
+        }
+    }, [anchorId, refreshSpacer, updateScrollButtonVisibility]);
+
+    React.useEffect(() => {
+
+        if (currentPhase === 'idle' && spacerHeightRef.current > 0 && isSpacerOutOfViewport()) {
+            updateSpacerHeight(0);
+            anchorIdRef.current = null;
+            hasAnchoredOnceRef.current = false;
+            setAnchorId(null);
+        }
+    }, [currentPhase, isSpacerOutOfViewport, updateSpacerHeight]);
+
+    React.useEffect(() => {
+        updateScrollButtonVisibility();
+    }, [spacerHeight, updateScrollButtonVisibility]);
+
+    const animationHandlersRef = React.useRef<Map<string, AnimationHandlers>>(new Map());
+
+    const handleMessageContentChange = React.useCallback(() => {
+
+        refreshSpacer();
+        updateScrollButtonVisibility();
+    }, [refreshSpacer, updateScrollButtonVisibility]);
+
+    const getAnimationHandlers = React.useCallback((messageId: string): AnimationHandlers => {
+        const existing = animationHandlersRef.current.get(messageId);
+        if (existing) {
+            return existing;
+        }
+
+        const handlers: AnimationHandlers = {
+            onChunk: () => {
+
+                refreshSpacer();
+            },
+            onComplete: () => {
+
+                refreshSpacer();
+            },
+            onStreamingCandidate: () => {
+
+            },
+            onAnimationStart: () => {
+
+            },
+            onAnimatedHeightChange: () => {
+
+                refreshSpacer();
+            },
+            onReservationCancelled: () => {
+
+            },
+            onReasoningBlock: () => {
+
+            },
+        };
+
+        animationHandlersRef.current.set(messageId, handlers);
+        return handlers;
+    }, [refreshSpacer]);
+
+    return {
+        scrollRef,
+        handleMessageContentChange,
+        getAnimationHandlers,
+        showScrollButton,
+        scrollToBottom,
+        spacerHeight,
+        pendingAnchorId,
+        hasActiveAnchor: anchorId !== null,
+    };
+};
diff --git a/packages/ui/src/hooks/useDebouncedValue.ts b/packages/ui/src/hooks/useDebouncedValue.ts
new file mode 100644
index 00000000..25a6080b
--- /dev/null
+++ b/packages/ui/src/hooks/useDebouncedValue.ts
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export const useDebouncedValue = <T>(value: T, delayMs = 200): T => {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+
+  React.useEffect(() => {
+    const handle = window.setTimeout(() => {
+      setDebouncedValue(value);
+    }, delayMs);
+
+    return () => {
+      window.clearTimeout(handle);
+    };
+  }, [value, delayMs]);
+
+  return debouncedValue;
+};
diff --git a/packages/ui/src/hooks/useDesktopServerInfo.ts b/packages/ui/src/hooks/useDesktopServerInfo.ts
new file mode 100644
index 00000000..cd01fc4f
--- /dev/null
+++ b/packages/ui/src/hooks/useDesktopServerInfo.ts
@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import {
+  fetchDesktopServerInfo,
+  isDesktopRuntime,
+  type DesktopServerInfo
+} from "@/lib/desktop";
+
+export const useDesktopServerInfo = (pollInterval = 5000): DesktopServerInfo | null => {
+  const [info, setInfo] = useState<DesktopServerInfo | null>(null);
+
+  useEffect(() => {
+    if (!isDesktopRuntime()) {
+      return;
+    }
+
+    let cancelled = false;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+
+    const poll = async () => {
+      const payload = await fetchDesktopServerInfo();
+      if (!cancelled) {
+        setInfo(payload);
+        timer = setTimeout(poll, pollInterval);
+      }
+    };
+
+    poll();
+
+    return () => {
+      cancelled = true;
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [pollInterval]);
+
+  return info;
+};
diff --git a/packages/ui/src/hooks/useEdgeSwipe.ts b/packages/ui/src/hooks/useEdgeSwipe.ts
new file mode 100644
index 00000000..4d76ec9c
--- /dev/null
+++ b/packages/ui/src/hooks/useEdgeSwipe.ts
@@ -0,0 +1,132 @@
+import { useEffect, useRef } from 'react';
+import { useUIStore } from '@/stores/useUIStore';
+
+interface EdgeSwipeOptions {
+  edgeThreshold?: number;
+  minSwipeDistance?: number;
+  maxSwipeTime?: number;
+  enabled?: boolean;
+}
+
+export const useEdgeSwipe = (options: EdgeSwipeOptions = {}) => {
+  const {
+    edgeThreshold = 30,
+    minSwipeDistance = 50,
+    maxSwipeTime = 300,
+    enabled = true,
+  } = options;
+
+  const {
+    isMobile,
+    setSessionSwitcherOpen,
+    isSessionSwitcherOpen,
+  } = useUIStore();
+  const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null);
+  const touchEndRef = useRef<{ x: number; y: number; time: number } | null>(null);
+
+  useEffect(() => {
+    if (!enabled || !isMobile) return;
+
+    const handleTouchStart = (e: TouchEvent) => {
+      const touch = e.touches[0];
+      if (!touch) {
+        touchStartRef.current = null;
+        return;
+      }
+
+      const fromLeft = touch.clientX <= edgeThreshold;
+
+      if (fromLeft) {
+        touchStartRef.current = {
+          x: touch.clientX,
+          y: touch.clientY,
+          time: Date.now(),
+        };
+      } else {
+        touchStartRef.current = null;
+      }
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (!touchStartRef.current) {
+        return;
+      }
+
+      const touch = e.touches[0];
+      if (!touch) {
+        return;
+      }
+
+      const deltaX = touch.clientX - touchStartRef.current.x;
+
+      if (deltaX > 10) {
+        e.preventDefault();
+      }
+    };
+
+    const handleTouchEnd = (e: TouchEvent) => {
+      if (!touchStartRef.current) return;
+
+      const touch = e.changedTouches[0];
+      if (!touch) {
+        touchStartRef.current = null;
+        touchEndRef.current = null;
+        return;
+      }
+
+      touchEndRef.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+        time: Date.now(),
+      };
+
+      const { x: startX, y: startY, time: startTime } = touchStartRef.current;
+      const { x: endX, y: endY, time: endTime } = touchEndRef.current;
+
+      const deltaX = endX - startX;
+      const deltaY = endY - startY;
+      const deltaTime = endTime - startTime;
+
+      const isHorizontal = Math.abs(deltaY) < Math.abs(deltaX);
+      const isQuick = deltaTime <= maxSwipeTime;
+      const limitedVertical = Math.abs(deltaY) < minSwipeDistance;
+
+      const isValidLeftSwipe =
+        deltaX >= minSwipeDistance && isHorizontal && isQuick && limitedVertical;
+
+      if (isValidLeftSwipe && !isSessionSwitcherOpen) {
+        setSessionSwitcherOpen(true);
+      }
+
+      touchStartRef.current = null;
+      touchEndRef.current = null;
+    };
+
+    const handleTouchCancel = () => {
+      touchStartRef.current = null;
+      touchEndRef.current = null;
+    };
+
+    document.addEventListener('touchstart', handleTouchStart, { passive: true, capture: true });
+    document.addEventListener('touchmove', handleTouchMove, { passive: false, capture: true });
+    document.addEventListener('touchend', handleTouchEnd, { passive: true, capture: true });
+    document.addEventListener('touchcancel', handleTouchCancel, { passive: true, capture: true });
+
+    return () => {
+      document.removeEventListener('touchstart', handleTouchStart, { capture: true });
+      document.removeEventListener('touchmove', handleTouchMove, { capture: true });
+      document.removeEventListener('touchend', handleTouchEnd, { capture: true });
+      document.removeEventListener('touchcancel', handleTouchCancel, { capture: true });
+    };
+  }, [
+    enabled,
+    isMobile,
+    edgeThreshold,
+    minSwipeDistance,
+    maxSwipeTime,
+    setSessionSwitcherOpen,
+    isSessionSwitcherOpen,
+  ]);
+
+  return null;
+};
diff --git a/packages/ui/src/hooks/useEventStream.ts b/packages/ui/src/hooks/useEventStream.ts
new file mode 100644
index 00000000..f6c6590f
--- /dev/null
+++ b/packages/ui/src/hooks/useEventStream.ts
@@ -0,0 +1,1169 @@
+import React from 'react';
+import { opencodeClient } from '@/lib/opencode/client';
+import { saveSessionCursor } from '@/lib/messageCursorPersistence';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { useUIStore, type EventStreamStatus } from '@/stores/useUIStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import type { Part, Session, Message, Permission } from '@opencode-ai/sdk';
+import { streamDebugEnabled } from '@/stores/utils/streamDebug';
+
+interface EventData {
+  type: string;
+  properties?: Record<string, unknown>;
+}
+
+type MessageTracker = (messageId: string, event?: string, extraData?: Record<string, unknown>) => void;
+
+declare global {
+  interface Window {
+    __messageTracker?: MessageTracker;
+  }
+}
+
+const ENABLE_EMPTY_RESPONSE_DETECTION = false;
+const TEXT_SHRINK_TOLERANCE = 50;
+
+const textLengthCache = new WeakMap<Part[], number>();
+const computeTextLength = (parts: Part[] | undefined | null): number => {
+  if (!parts || !Array.isArray(parts)) return 0;
+
+  const cached = textLengthCache.get(parts);
+  if (cached !== undefined) return cached;
+
+  let length = 0;
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    if (part?.type === 'text') {
+      const text = (part as { text?: string; content?: string }).text ?? (part as { text?: string; content?: string }).content;
+      if (typeof text === 'string') length += text.length;
+    }
+  }
+
+  textLengthCache.set(parts, length);
+  return length;
+};
+
+const messageCache = new Map<string, { sessionId: string; message: { info: Message; parts: Part[] } | null }>();
+const getMessageFromStore = (sessionId: string, messageId: string): { info: Message; parts: Part[] } | null => {
+  const cacheKey = `${sessionId}:${messageId}`;
+  const cached = messageCache.get(cacheKey);
+  if (cached && cached.sessionId === sessionId) {
+    return cached.message;
+  }
+
+  const storeState = useSessionStore.getState();
+  const sessionMessages = storeState.messages.get(sessionId) || [];
+  const message = sessionMessages.find(m => m.info.id === messageId) || null;
+
+  messageCache.set(cacheKey, { sessionId, message });
+  return message;
+};
+
+export const useEventStream = () => {
+  const {
+    addStreamingPart,
+    completeStreamingMessage,
+    updateMessageInfo,
+    updateSessionCompaction,
+    addPermission,
+    currentSessionId,
+    applySessionMetadata,
+    sessions,
+    getWorktreeMetadata,
+    loadMessages,
+    loadSessions
+  } = useSessionStore();
+
+  const { checkConnection } = useConfigStore();
+  const fallbackDirectory = useDirectoryStore((state) => state.currentDirectory);
+
+  const activeSessionDirectory = React.useMemo(() => {
+    if (!currentSessionId) return undefined;
+
+    try {
+      const metadata = getWorktreeMetadata?.(currentSessionId);
+      if (metadata?.path) return metadata.path;
+    } catch (error) {
+      console.warn('Failed to inspect worktree metadata for session directory:', error);
+    }
+
+    const sessionRecord = sessions.find((entry) => entry.id === currentSessionId);
+    if (sessionRecord && typeof sessionRecord.directory === 'string' && sessionRecord.directory.trim().length > 0) {
+      return sessionRecord.directory.trim();
+    }
+
+    return undefined;
+  }, [currentSessionId, getWorktreeMetadata, sessions]);
+
+  const effectiveDirectory = React.useMemo(() => {
+    if (activeSessionDirectory && activeSessionDirectory.length > 0) {
+      return activeSessionDirectory;
+    }
+    if (typeof fallbackDirectory === 'string' && fallbackDirectory.trim().length > 0) {
+      return fallbackDirectory.trim();
+    }
+    return undefined;
+  }, [activeSessionDirectory, fallbackDirectory]);
+
+  const setEventStreamStatus = useUIStore((state) => state.setEventStreamStatus);
+  const lastStatusRef = React.useRef<{ status: EventStreamStatus; hint: string | null } | null>(null);
+
+  const publishStatus = React.useCallback(
+    (status: EventStreamStatus, hint?: string | null) => {
+      const normalizedHint = hint ?? null;
+      const last = lastStatusRef.current;
+      if (last && last.status === status && last.hint === normalizedHint) {
+        return;
+      }
+
+      lastStatusRef.current = { status, hint: normalizedHint };
+
+      if (streamDebugEnabled()) {
+        const prefixMap: Record<EventStreamStatus, string> = {
+          idle: '[IDLE]',
+          connecting: '[CONNECT]',
+          connected: '[CONNECTED]',
+          reconnecting: '[RECONNECT]',
+          paused: '[PAUSED]',
+          offline: '[OFFLINE]',
+          error: '[ERROR]'
+        };
+
+        const prefix = prefixMap[status] ?? '[INFO]';
+        const message = normalizedHint ? `${prefix} SSE ${status}: ${normalizedHint}` : `${prefix} SSE ${status}`;
+        console.info(message);
+      }
+
+      setEventStreamStatus(status, normalizedHint);
+    },
+    [setEventStreamStatus]
+  );
+
+  const trackMessage = React.useCallback((messageId: string, event?: string, extraData?: Record<string, unknown>) => {
+    if (streamDebugEnabled()) {
+      console.debug(`[MessageTracker] ${messageId}: ${event}`, extraData);
+    }
+  }, []);
+
+  const reportMessage = React.useCallback((messageId: string) => {
+    if (streamDebugEnabled()) {
+      console.debug(`[MessageTracker] ${messageId}: reported`);
+    }
+  }, []);
+
+  const unsubscribeRef = React.useRef<(() => void) | null>(null);
+  const reconnectTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+  const reconnectAttemptsRef = React.useRef(0);
+  const emptyResponseToastShownRef = React.useRef<Set<string>>(new Set());
+  const metadataRefreshTimestampsRef = React.useRef<Map<string, number>>(new Map());
+  const sessionRefreshTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+  const isCleaningUpRef = React.useRef(false);
+
+  const resolveVisibilityState = React.useCallback((): 'visible' | 'hidden' => {
+    if (typeof document === 'undefined') return 'visible';
+
+    const state = document.visibilityState;
+    return state === 'hidden' && document.hasFocus() ? 'visible' : state;
+  }, []);
+
+  const visibilityStateRef = React.useRef<'visible' | 'hidden'>(resolveVisibilityState());
+  const onlineStatusRef = React.useRef<boolean>(typeof navigator === 'undefined' ? true : navigator.onLine);
+  const pendingResumeRef = React.useRef(false);
+  const pauseTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+  const staleCheckIntervalRef = React.useRef<NodeJS.Timeout | null>(null);
+  const lastEventTimestampRef = React.useRef<number>(Date.now());
+  const isDesktopRuntimeRef = React.useRef<boolean>(false);
+
+  React.useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const apis = (window as typeof window & { __OPENCHAMBER_RUNTIME_APIS__?: { runtime?: { isDesktop?: boolean } } }).__OPENCHAMBER_RUNTIME_APIS__;
+      if (apis?.runtime?.isDesktop) {
+        isDesktopRuntimeRef.current = true;
+      }
+    }
+  }, []);
+
+  const sessionCooldownTimersRef = React.useRef<Map<string, NodeJS.Timeout>>(new Map());
+  const sessionActivityPhaseRef = React.useRef<Map<string, 'idle' | 'busy' | 'cooldown'>>(new Map());
+
+  const requestSessionMetadataRefresh = React.useCallback(
+    (sessionId: string | undefined | null) => {
+      if (!sessionId) return;
+
+      const now = Date.now();
+      const timestamps = metadataRefreshTimestampsRef.current;
+      const lastRefresh = timestamps.get(sessionId);
+
+      if (lastRefresh && now - lastRefresh < 3000) return;
+
+      timestamps.set(sessionId, now);
+
+      setTimeout(async () => {
+        try {
+          const session = await opencodeClient.getSession(sessionId);
+          if (session) {
+            const patch: Partial<Session> = {};
+            if (typeof session.title === 'string' && session.title.length > 0) {
+              patch.title = session.title;
+            }
+            if (session.summary !== undefined) {
+              patch.summary = session.summary;
+            }
+            if (Object.keys(patch).length > 0) {
+              applySessionMetadata(sessionId, patch);
+            }
+          }
+        } catch (error) {
+          console.warn('Failed to refresh session metadata:', error);
+        }
+      }, 100);
+    },
+    [applySessionMetadata]
+  );
+
+  const requestSessionListRefresh = React.useCallback(() => {
+    if (sessionRefreshTimeoutRef.current) return;
+
+    sessionRefreshTimeoutRef.current = setTimeout(() => {
+      sessionRefreshTimeoutRef.current = null;
+      try {
+        void loadSessions();
+      } catch (error) {
+        console.warn('Failed to refresh sessions after stream completion:', error);
+      }
+    }, 500);
+  }, [loadSessions]);
+
+  const updateSessionActivityPhase = React.useCallback((sessionId: string, phase: 'idle' | 'busy' | 'cooldown') => {
+    const currentPhase = sessionActivityPhaseRef.current.get(sessionId);
+    if (currentPhase === phase) return;
+
+    const existingTimer = sessionCooldownTimersRef.current.get(sessionId);
+    if (existingTimer) {
+      clearTimeout(existingTimer);
+      sessionCooldownTimersRef.current.delete(sessionId);
+    }
+
+    sessionActivityPhaseRef.current.set(sessionId, phase);
+    useSessionStore.setState({ sessionActivityPhase: new Map(sessionActivityPhaseRef.current) });
+
+    if (phase === 'cooldown') {
+      const timer = setTimeout(() => {
+        sessionCooldownTimersRef.current.delete(sessionId);
+        const current = sessionActivityPhaseRef.current.get(sessionId);
+        if (current === 'cooldown') {
+          sessionActivityPhaseRef.current.set(sessionId, 'idle');
+          useSessionStore.setState({ sessionActivityPhase: new Map(sessionActivityPhaseRef.current) });
+        }
+      }, 2000);
+      sessionCooldownTimersRef.current.set(sessionId, timer);
+    }
+  }, []);
+
+  const handleEvent = React.useCallback((event: EventData) => {
+    lastEventTimestampRef.current = Date.now();
+
+    if (streamDebugEnabled()) {
+      console.debug('[useEventStream] Received event:', event.type, event.properties);
+    }
+
+    if (!event.properties) return;
+
+    const props = event.properties as Record<string, unknown>;
+    const nonMetadataSessionEvents = new Set(['session.abort', 'session.error']);
+
+    if (!nonMetadataSessionEvents.has(event.type)) {
+      const sessionPayload = (typeof props.session === 'object' && props.session !== null ? props.session : null) ||
+                           (typeof props.sessionInfo === 'object' && props.sessionInfo !== null ? props.sessionInfo : null) as Record<string, unknown> | null;
+
+      if (sessionPayload) {
+        const sessionPayloadAny = sessionPayload as Record<string, unknown>;
+        const sessionId = (typeof sessionPayloadAny.id === 'string' && sessionPayloadAny.id.length > 0) ? sessionPayloadAny.id :
+                         (typeof sessionPayloadAny.sessionID === 'string' && sessionPayloadAny.sessionID.length > 0) ? sessionPayloadAny.sessionID :
+                         (typeof props.sessionID === 'string' && props.sessionID.length > 0) ? props.sessionID :
+                         (typeof props.id === 'string' && props.id.length > 0) ? props.id : undefined;
+
+        if (sessionId) {
+          const titleCandidate = typeof sessionPayloadAny.title === 'string' ? sessionPayloadAny.title :
+                                typeof props.title === 'string' ? props.title : undefined;
+
+          const summaryCandidate = (typeof sessionPayloadAny.summary === 'object' && sessionPayloadAny.summary !== null) ? sessionPayloadAny.summary as Session['summary'] :
+                                  (typeof props.summary === 'object' && props.summary !== null) ? props.summary as Session['summary'] : undefined;
+
+          if (titleCandidate !== undefined || summaryCandidate !== undefined) {
+            const patch: Partial<Session> = {};
+            if (titleCandidate !== undefined) patch.title = titleCandidate;
+            if (summaryCandidate !== undefined) patch.summary = summaryCandidate;
+            applySessionMetadata(sessionId, patch);
+          }
+        }
+      }
+    }
+
+    switch (event.type) {
+      case 'server.connected':
+        checkConnection();
+        break;
+      case 'openchamber:session-activity': {
+        if (!isDesktopRuntimeRef.current) break;
+        const sessionId = typeof props.sessionId === 'string' ? props.sessionId : null;
+        const phase = typeof props.phase === 'string' ? props.phase : null;
+        if (sessionId && (phase === 'idle' || phase === 'busy' || phase === 'cooldown')) {
+          updateSessionActivityPhase(sessionId, phase);
+          // Refresh session list on activity changes (same trigger as activity indication)
+          requestSessionListRefresh();
+        }
+        break;
+      }
+
+      case 'session.status':
+        if (isDesktopRuntimeRef.current) break;
+        {
+          const sessionId = typeof props.sessionID === 'string' ? props.sessionID : null;
+          const statusObj = (typeof props.status === 'object' && props.status !== null) ? props.status as Record<string, unknown> : null;
+          const statusType = typeof statusObj?.type === 'string' ? statusObj.type : null;
+
+          if (sessionId && statusType) {
+            updateSessionActivityPhase(
+              sessionId,
+              statusType === 'busy' || statusType === 'retry' ? 'busy' : 'idle',
+            );
+            // Refresh session list on status changes (same trigger as activity indication)
+            requestSessionListRefresh();
+          }
+        }
+        break;
+
+      case 'message.part.updated': {
+        const part = (typeof props.part === 'object' && props.part !== null) ? (props.part as Part) : null;
+        if (!part) break;
+
+        const partExt = part as Record<string, unknown>;
+        const messageInfo = (typeof props.info === 'object' && props.info !== null) ? (props.info as Record<string, unknown>) : props;
+
+        const messageInfoSessionId = typeof (messageInfo as { sessionID?: unknown }).sessionID === 'string'
+          ? (messageInfo as { sessionID?: string }).sessionID
+          : null;
+
+        const resolvedSessionId =
+          (typeof partExt.sessionID === 'string' && (partExt.sessionID as string).length > 0) ? (partExt.sessionID as string) :
+          (typeof messageInfoSessionId === 'string' && messageInfoSessionId.length > 0) ? messageInfoSessionId :
+          (typeof props.sessionID === 'string' && (props.sessionID as string).length > 0) ? (props.sessionID as string) :
+          null;
+
+        const messageInfoId = typeof (messageInfo as { id?: unknown }).id === 'string'
+          ? (messageInfo as { id?: string }).id
+          : null;
+
+        const resolvedMessageId =
+          (typeof partExt.messageID === 'string' && (partExt.messageID as string).length > 0) ? (partExt.messageID as string) :
+          (typeof messageInfoId === 'string' && messageInfoId.length > 0) ? messageInfoId :
+          (typeof props.messageID === 'string' && (props.messageID as string).length > 0) ? (props.messageID as string) :
+          null;
+
+        if (!resolvedSessionId || !resolvedMessageId) {
+          if (streamDebugEnabled()) {
+            console.debug('[useEventStream] Skipping message.part.updated without resolvable session/message id', {
+              sessionID: partExt.sessionID ?? messageInfoSessionId ?? props.sessionID,
+              messageID: partExt.messageID ?? messageInfoId ?? props.messageID,
+            });
+          }
+          break;
+        }
+
+        const sessionId = resolvedSessionId;
+        const messageId = resolvedMessageId;
+
+        let roleInfo = 'assistant';
+        if (messageInfo && typeof (messageInfo as { role?: unknown }).role === 'string') {
+          roleInfo = (messageInfo as { role?: string }).role as string;
+        } else {
+          const existingMessage = getMessageFromStore(sessionId, messageId);
+          if (existingMessage) {
+            const existingRole = (existingMessage.info as Record<string, unknown>).role;
+            if (typeof existingRole === 'string') {
+              roleInfo = existingRole;
+            }
+          }
+        }
+
+        trackMessage(messageId, 'part_received', { role: roleInfo });
+
+        if (roleInfo === 'user' && partExt.synthetic === true) {
+          trackMessage(messageId, 'skipped_synthetic_user_part');
+          break;
+        }
+
+        const messagePart: Part = {
+          ...part,
+          type: part.type || 'text',
+        } as Part;
+
+        trackMessage(messageId, 'addStreamingPart_called');
+        addStreamingPart(sessionId, messageId, messagePart, roleInfo);
+        break;
+      }
+
+      case 'message.updated': {
+        const message = (typeof props.info === 'object' && props.info !== null) ? (props.info as Record<string, unknown>) : props;
+        const messageExt = message as Record<string, unknown>;
+
+        const resolvedSessionId =
+          (typeof messageExt.sessionID === 'string' && (messageExt.sessionID as string).length > 0) ? (messageExt.sessionID as string) :
+          (typeof props.sessionID === 'string' && (props.sessionID as string).length > 0) ? (props.sessionID as string) :
+          null;
+
+        const resolvedMessageId =
+          (typeof messageExt.id === 'string' && (messageExt.id as string).length > 0) ? (messageExt.id as string) :
+          (typeof props.messageID === 'string' && (props.messageID as string).length > 0) ? (props.messageID as string) :
+          null;
+
+        if (!resolvedSessionId || !resolvedMessageId) {
+          if (streamDebugEnabled()) {
+            console.debug('[useEventStream] Skipping message.updated without resolvable session/message id', {
+              sessionID: messageExt.sessionID ?? props.sessionID,
+              messageID: messageExt.id ?? props.messageID,
+            });
+          }
+          break;
+        }
+
+        const sessionId = resolvedSessionId;
+        const messageId = resolvedMessageId;
+
+        if (isDesktopRuntimeRef.current && streamDebugEnabled()) {
+          try {
+            const serverParts = (props as { parts?: unknown }).parts || (messageExt as { parts?: unknown }).parts || [];
+            const textParts = Array.isArray(serverParts)
+              ? serverParts.filter((p: unknown) => (p as { type?: string })?.type === 'text')
+              : [];
+            const textJoined = textParts
+              .map((p: unknown) => {
+                const part = p as { text?: string; content?: string };
+                return typeof part?.text === 'string' ? part.text : typeof part?.content === 'string' ? part.content : '';
+              })
+              .join('\n');
+            console.info('[STREAM-TRACE] message.updated', {
+              messageId,
+              role: (messageExt as { role?: unknown }).role,
+              status: (messageExt as { status?: unknown }).status,
+              textLen: textJoined.length,
+              textPreview: textJoined.slice(0, 120),
+              partsCount: Array.isArray(serverParts) ? serverParts.length : 0,
+            });
+          } catch { /* ignored */ }
+        }
+
+        trackMessage(messageId, 'message_updated', { role: (messageExt as { role?: unknown }).role });
+
+        if ((messageExt as { role?: unknown }).role === 'user') {
+          const serverParts = (props as { parts?: unknown }).parts || (messageExt as { parts?: unknown }).parts;
+          const partsArray = Array.isArray(serverParts) ? (serverParts as Part[]) : [];
+
+          const userMessageInfo = {
+            ...message,
+            userMessageMarker: true,
+            clientRole: 'user',
+          } as unknown as Message;
+
+          updateMessageInfo(sessionId, messageId, userMessageInfo);
+
+          if (partsArray.length > 0) {
+            for (let i = 0; i < partsArray.length; i++) {
+              const serverPart = partsArray[i];
+              if ((serverPart as Record<string, unknown>).synthetic === true) continue;
+
+              const enrichedPart: Part = {
+                ...serverPart,
+                type: serverPart?.type || 'text',
+                sessionID: (serverPart as { sessionID?: string })?.sessionID || sessionId,
+                messageID: (serverPart as { messageID?: string })?.messageID || messageId,
+              } as Part;
+              addStreamingPart(sessionId, messageId, enrichedPart, 'user');
+            }
+          }
+
+          trackMessage(messageId, 'user_message_created_from_event', { partsCount: partsArray.length });
+          break;
+        }
+
+        const existingMessage = getMessageFromStore(sessionId, messageId);
+        const existingLen = computeTextLength(existingMessage?.parts || []);
+        const existingStopMarker = existingMessage?.parts?.some(
+          (part) => part?.type === 'step-finish' && (part as { reason?: string }).reason === 'stop'
+        ) ?? false;
+
+        const serverParts = (props as { parts?: unknown }).parts || (messageExt as { parts?: unknown }).parts;
+        const partsArray = Array.isArray(serverParts) ? (serverParts as Part[]) : [];
+        const hasParts = partsArray.length > 0;
+        const timeObj = (messageExt as { time?: { completed?: number } }).time || {};
+        const completedFromServer = typeof timeObj?.completed === 'number';
+
+        if (!hasParts && !completedFromServer) break;
+
+        if ((messageExt as { role?: unknown }).role === 'assistant' && hasParts) {
+          const incomingLen = computeTextLength(partsArray);
+          const wouldShrink = existingLen > 0 && incomingLen + TEXT_SHRINK_TOLERANCE < existingLen;
+          const eventHasStopFinish = partsArray.some(
+            (p) => p?.type === 'step-finish' && (p as { reason?: string }).reason === 'stop'
+          );
+
+          if (wouldShrink && !eventHasStopFinish) {
+            trackMessage(messageId, 'skipped_shrinking_update', { incomingLen, existingLen });
+            break;
+          }
+
+          if (isDesktopRuntimeRef.current) {
+            const zeroToleranceShrink = existingLen > 0 && incomingLen < existingLen;
+            const hasUsefulText = partsArray.some((p) => {
+              if (!p || p.type !== 'text') return false;
+              const textPart = p as { text?: string };
+              return typeof textPart.text === 'string' && textPart.text.length > 0;
+            });
+            const shrinkAllowed = eventHasStopFinish && hasUsefulText;
+
+            if (zeroToleranceShrink && !shrinkAllowed) {
+              trackMessage(messageId, 'desktop_shrinking_update_suppressed', { incomingLen, existingLen });
+              break;
+            }
+          }
+        }
+
+        updateMessageInfo(sessionId, messageId, message as unknown as Message);
+
+        if (hasParts && (messageExt as { role?: unknown }).role !== 'user') {
+          const storeState = useSessionStore.getState();
+          const existingMessages = storeState.messages.get(sessionId) || [];
+          const existingMessageForSession = existingMessages.find((m) => m.info.id === messageId);
+          const needsInjection = !existingMessageForSession || existingMessageForSession.parts.length === 0;
+
+          trackMessage(
+            messageId,
+            needsInjection ? 'server_parts_injected' : 'server_parts_refreshed',
+            { count: partsArray.length }
+          );
+
+          const partsToInject = isDesktopRuntimeRef.current && (messageExt as { role?: unknown }).role === 'assistant'
+            ? partsArray.filter((serverPart) => serverPart?.type !== 'text')
+            : partsArray;
+
+          for (let i = 0; i < partsToInject.length; i++) {
+            const serverPart = partsToInject[i];
+            const enrichedPart: Part = {
+              ...serverPart,
+              type: serverPart?.type || 'text',
+              sessionID: serverPart?.sessionID || sessionId,
+              messageID: serverPart?.messageID || messageId,
+            } as Part;
+            addStreamingPart(sessionId, messageId, enrichedPart, (messageExt as { role?: string }).role as string);
+            trackMessage(messageId, `server_part_${i}`);
+          }
+        }
+
+        const messageTime = (message as { time?: { completed?: number } }).time;
+        const isCompleted =
+          (message as { role?: string }).role === 'assistant' &&
+          (messageTime?.completed as number | undefined) !== undefined;
+
+          if (isCompleted && (message as { role?: string }).role === 'assistant') {
+
+            const storeState = useSessionStore.getState();
+            const sessionMessages = storeState.messages.get(sessionId) || [];
+          let latestAssistantMessageId: string | null = null;
+          let maxId = '';
+
+          for (let i = 0; i < sessionMessages.length; i++) {
+            const msg = sessionMessages[i];
+            if (msg.info.role === 'assistant' && msg.info.id > maxId) {
+              maxId = msg.info.id;
+              latestAssistantMessageId = msg.info.id;
+            }
+          }
+
+          if (messageId !== latestAssistantMessageId) break;
+
+          const stopMarkerPresent = partsArray.some(
+            (p) => p?.type === 'step-finish' && (p as { reason?: string }).reason === 'stop'
+          ) || existingStopMarker;
+          if (!stopMarkerPresent && isDesktopRuntimeRef.current) {
+            trackMessage(messageId, 'desktop_completion_without_stop');
+            break;
+          }
+
+          const timeCompleted =
+            (messageTime?.completed as number | undefined) !== undefined
+              ? (messageTime?.completed as number)
+              : Date.now();
+
+          if (!messageTime?.completed) {
+            updateMessageInfo(sessionId, messageId, {
+              ...message,
+              time: { ...(messageTime ?? {}), completed: timeCompleted },
+            } as unknown as Message);
+          }
+
+          trackMessage(messageId, 'completed', { timeCompleted });
+          reportMessage(messageId);
+
+          void saveSessionCursor(sessionId, messageId, timeCompleted);
+
+          if (ENABLE_EMPTY_RESPONSE_DETECTION) {
+            const completedMessage = getMessageFromStore(sessionId, messageId);
+            if (completedMessage) {
+              const storedParts = Array.isArray(completedMessage.parts) ? completedMessage.parts : [];
+              const eventParts = partsArray;
+
+              const combinedParts: Part[] = [...storedParts];
+              for (let i = 0; i < eventParts.length; i++) {
+                const rawPart = eventParts[i];
+                if (!rawPart) continue;
+
+                const normalized: Part = {
+                  ...rawPart,
+                  type: (rawPart as { type?: string }).type || 'text',
+                } as Part;
+
+                const alreadyPresent = combinedParts.some(
+                  (existing) =>
+                    existing.id === normalized.id &&
+                    existing.type === normalized.type &&
+                    (existing as { callID?: string }).callID === (normalized as { callID?: string }).callID
+                );
+
+                if (!alreadyPresent) {
+                  combinedParts.push(normalized);
+                }
+              }
+
+              let hasStepMarkers = false;
+              let hasTextContent = false;
+              let hasTools = false;
+              let hasReasoning = false;
+              let hasFiles = false;
+
+              for (let i = 0; i < combinedParts.length; i++) {
+                const part = combinedParts[i];
+                if (!part) continue;
+
+                if (part.type === 'step-start' || part.type === 'step-finish') {
+                  hasStepMarkers = true;
+                } else if (part.type === 'text') {
+                  const text = (part as { text?: string }).text;
+                  if (typeof text === 'string' && text.trim().length > 0) {
+                    hasTextContent = true;
+                  }
+                } else if (part.type === 'tool') {
+                  hasTools = true;
+                } else if (part.type === 'reasoning') {
+                  hasReasoning = true;
+                } else if (part.type === 'file') {
+                  hasFiles = true;
+                }
+              }
+
+              const hasMeaningfulContent = hasTextContent || hasTools || hasReasoning || hasFiles;
+              const isEmptyResponse = !hasMeaningfulContent && !hasStepMarkers;
+
+              if (isEmptyResponse && !emptyResponseToastShownRef.current.has(messageId)) {
+                emptyResponseToastShownRef.current.add(messageId);
+                import('sonner').then(({ toast }) => {
+                  toast.info('Assistant response was empty', {
+                    description: 'Try sending your message again or rephrase it.',
+                    duration: 5000,
+                  });
+                });
+              }
+            }
+          }
+
+          completeStreamingMessage(sessionId, messageId);
+
+          if (!isDesktopRuntimeRef.current) {
+            const rawCompletedSessionId = (message as { sessionID?: string }).sessionID;
+            const completedSessionId: string =
+              typeof rawCompletedSessionId === 'string' && rawCompletedSessionId.length > 0
+                ? rawCompletedSessionId
+                : sessionId;
+
+            const currentPhase = sessionActivityPhaseRef.current.get(completedSessionId);
+            if (currentPhase === 'busy') {
+              updateSessionActivityPhase(completedSessionId, 'cooldown');
+            }
+          }
+
+          const rawMessageSessionId = (message as { sessionID?: string }).sessionID;
+          const messageSessionId: string =
+            typeof rawMessageSessionId === 'string' && rawMessageSessionId.length > 0
+              ? rawMessageSessionId
+              : sessionId;
+          requestSessionMetadataRefresh(messageSessionId);
+
+          const summaryInfo = message as Message & { summary?: boolean };
+          if (summaryInfo.summary && typeof messageSessionId === 'string') {
+            updateSessionCompaction(messageSessionId, null);
+          }
+        }
+        break;
+      }
+
+      case 'session.updated': {
+        const candidate = (typeof props.info === 'object' && props.info !== null) ? props.info as Record<string, unknown> :
+                         (typeof props.sessionInfo === 'object' && props.sessionInfo !== null) ? props.sessionInfo as Record<string, unknown> :
+                         (typeof props.session === 'object' && props.session !== null) ? props.session as Record<string, unknown> : props;
+
+        const sessionId = (typeof candidate.id === 'string' && candidate.id.length > 0) ? candidate.id :
+                         (typeof candidate.sessionID === 'string' && candidate.sessionID.length > 0) ? candidate.sessionID :
+                         (typeof props.sessionID === 'string' && props.sessionID.length > 0) ? props.sessionID :
+                         (typeof props.id === 'string' && props.id.length > 0) ? props.id : undefined;
+
+        if (sessionId) {
+          const timeSource = (typeof candidate.time === 'object' && candidate.time !== null) ? candidate.time as Record<string, unknown> :
+                            (typeof props.time === 'object' && props.time !== null) ? props.time as Record<string, unknown> : null;
+          const compactingTimestamp = timeSource && typeof timeSource.compacting === 'number' ? timeSource.compacting as number : null;
+          updateSessionCompaction(sessionId, compactingTimestamp);
+        }
+        break;
+      }
+
+      case 'session.abort': {
+        const sessionId =
+          typeof props.sessionID === 'string' && (props.sessionID as string).length > 0
+            ? (props.sessionID as string)
+            : null;
+        const messageId =
+          typeof props.messageID === 'string' && (props.messageID as string).length > 0
+            ? (props.messageID as string)
+            : null;
+
+        if (sessionId && messageId) {
+          completeStreamingMessage(sessionId, messageId);
+        }
+        break;
+      }
+
+      case 'permission.updated':
+        if (currentSessionId === props.sessionID) {
+          addPermission(props as unknown as Permission);
+        }
+        break;
+
+      case 'permission.replied':
+
+        break;
+    }
+  }, [
+    currentSessionId,
+    addStreamingPart,
+    completeStreamingMessage,
+    updateMessageInfo,
+    addPermission,
+    checkConnection,
+    requestSessionMetadataRefresh,
+    requestSessionListRefresh,
+    updateSessionCompaction,
+    applySessionMetadata,
+    trackMessage,
+    reportMessage,
+    updateSessionActivityPhase
+  ]);
+
+  const shouldHoldConnection = React.useCallback(() => {
+    const currentVisibility = resolveVisibilityState();
+    visibilityStateRef.current = currentVisibility;
+    return currentVisibility === 'visible' && onlineStatusRef.current;
+  }, [resolveVisibilityState]);
+
+  const debugConnectionState = React.useCallback(() => {
+    if (streamDebugEnabled()) {
+      console.debug('[useEventStream] Connection state:', {
+        isDesktopRuntime: isDesktopRuntimeRef.current,
+        hasUnsubscribe: Boolean(unsubscribeRef.current),
+        currentSessionId,
+        effectiveDirectory,
+        onlineStatus: onlineStatusRef.current,
+        visibilityState: visibilityStateRef.current,
+        lastEventTimestamp: lastEventTimestampRef.current,
+        reconnectAttempts: reconnectAttemptsRef.current,
+      });
+    }
+  }, [currentSessionId, effectiveDirectory]);
+
+  const waitForDesktopBridge = React.useCallback(async (): Promise<boolean> => true, []);
+
+  const stopStream = React.useCallback(() => {
+    if (isCleaningUpRef.current) {
+      if (streamDebugEnabled()) {
+        console.info('[useEventStream] Already cleaning up, skipping stopStream');
+      }
+      return;
+    }
+
+    isCleaningUpRef.current = true;
+
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+
+    if (unsubscribeRef.current) {
+      const unsubscribe = unsubscribeRef.current;
+      unsubscribeRef.current = null;
+      try {
+
+        unsubscribe();
+      } catch (error) {
+        console.warn('[useEventStream] Error during unsubscribe:', error);
+      }
+    }
+
+    isCleaningUpRef.current = false;
+  }, []);
+
+  const startStream = React.useCallback(async (options?: { resetAttempts?: boolean }) => {
+    debugConnectionState();
+
+    if (!shouldHoldConnection()) {
+      pendingResumeRef.current = true;
+      if (!onlineStatusRef.current) {
+        publishStatus('offline', 'Waiting for network');
+      } else {
+        publishStatus('paused', 'Paused while hidden');
+      }
+      return;
+    }
+
+    if (isDesktopRuntimeRef.current) {
+      const bridgeReady = await waitForDesktopBridge();
+      if (!bridgeReady) {
+        console.warn('[useEventStream] Desktop bridge not ready, falling back to SDK');
+      }
+    }
+
+    if (options?.resetAttempts) {
+      reconnectAttemptsRef.current = 0;
+    }
+
+    stopStream();
+    lastEventTimestampRef.current = Date.now();
+    publishStatus('connecting', null);
+
+    if (streamDebugEnabled()) {
+      console.info('[useEventStream] Starting event stream...');
+    }
+
+    const onError = (error: unknown) => {
+      console.warn('Event stream error:', error);
+
+    };
+
+    const onOpen = () => {
+      const shouldRefresh = pendingResumeRef.current;
+      reconnectAttemptsRef.current = 0;
+      pendingResumeRef.current = false;
+      lastEventTimestampRef.current = Date.now();
+      publishStatus('connected', null);
+      checkConnection();
+
+      if (shouldRefresh && currentSessionId) {
+        setTimeout(() => {
+          loadMessages(currentSessionId)
+            .then(() => requestSessionMetadataRefresh(currentSessionId))
+            .catch((error) => {
+              console.warn('[useEventStream] Failed to resync messages after reconnect:', error);
+            });
+        }, 0);
+      }
+    };
+
+    if (streamDebugEnabled()) {
+      console.info('[useEventStream] Connecting to event source (SDK SSE only):', {
+        effectiveDirectory,
+        isCleaningUp: isCleaningUpRef.current,
+      });
+    }
+
+    if (isCleaningUpRef.current) {
+      if (streamDebugEnabled()) {
+        console.info('[useEventStream] Skipping subscription due to cleanup in progress');
+      }
+      return;
+    }
+
+    try {
+      const sdkUnsub = opencodeClient.subscribeToEvents(handleEvent, onError, onOpen, effectiveDirectory);
+
+      const compositeUnsub = () => {
+        try {
+          sdkUnsub();
+        } catch (cleanupError) {
+          console.warn('[useEventStream] Error during unsubscribe:', cleanupError);
+        }
+      };
+
+      if (!isCleaningUpRef.current) {
+        unsubscribeRef.current = compositeUnsub;
+      } else {
+        compositeUnsub();
+      }
+    } catch (subscriptionError) {
+      console.error('[useEventStream] Error during subscription:', subscriptionError);
+      onError(subscriptionError);
+    }
+  }, [
+    shouldHoldConnection,
+    stopStream,
+    publishStatus,
+    checkConnection,
+    currentSessionId,
+    loadMessages,
+    requestSessionMetadataRefresh,
+    requestSessionListRefresh,
+    completeStreamingMessage,
+    handleEvent,
+    effectiveDirectory,
+    updateSessionActivityPhase,
+    waitForDesktopBridge,
+    debugConnectionState
+  ]);
+
+  const scheduleReconnect = React.useCallback((hint?: string) => {
+    if (!shouldHoldConnection()) {
+      pendingResumeRef.current = true;
+      stopStream();
+      if (!onlineStatusRef.current) {
+        publishStatus('offline', 'Waiting for network');
+      } else {
+        publishStatus('paused', 'Paused while hidden');
+      }
+      return;
+    }
+
+    const nextAttempt = reconnectAttemptsRef.current + 1;
+    reconnectAttemptsRef.current = nextAttempt;
+    const statusHint = hint ?? `Retrying (${nextAttempt})`;
+    publishStatus('reconnecting', statusHint);
+
+    const baseDelay = nextAttempt <= 3
+      ? Math.min(1000 * Math.pow(2, nextAttempt - 1), 8000)
+      : Math.min(2000 * Math.pow(2, nextAttempt - 3), 32000);
+    const jitter = Math.floor(Math.random() * 250);
+    const delay = baseDelay + jitter;
+
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+    }
+
+    reconnectTimeoutRef.current = setTimeout(() => {
+      startStream({ resetAttempts: false });
+    }, delay);
+  }, [shouldHoldConnection, stopStream, publishStatus, startStream]);
+
+  React.useEffect(() => {
+
+    if (typeof window !== 'undefined') {
+      window.__messageTracker = trackMessage;
+    }
+
+    let desktopActivityHandler: ((event: CustomEvent<{ sessionId?: string; phase?: string }>) => void) | null = null;
+    if (isDesktopRuntimeRef.current && typeof window !== 'undefined') {
+      desktopActivityHandler = (event: CustomEvent<{ sessionId?: string; phase?: string }>) => {
+        const sessionId = typeof event.detail?.sessionId === 'string' ? event.detail.sessionId : null;
+        const phase = typeof event.detail?.phase === 'string' ? event.detail.phase : null;
+        if (sessionId && (phase === 'idle' || phase === 'busy' || phase === 'cooldown')) {
+          updateSessionActivityPhase(sessionId, phase);
+          // Refresh session list on activity changes (same trigger as activity indication)
+          requestSessionListRefresh();
+        }
+      };
+      window.addEventListener('openchamber:session-activity', desktopActivityHandler as EventListener);
+    }
+
+    const clearPauseTimeout = () => {
+      if (pauseTimeoutRef.current) {
+        clearTimeout(pauseTimeoutRef.current);
+        pauseTimeoutRef.current = null;
+      }
+    };
+
+    const pauseStreamSoon = () => {
+      if (pauseTimeoutRef.current) return;
+
+      pauseTimeoutRef.current = setTimeout(() => {
+        const pendingVisibility = resolveVisibilityState();
+        visibilityStateRef.current = pendingVisibility;
+
+        if (pendingVisibility !== 'visible') {
+          stopStream();
+          pendingResumeRef.current = true;
+          publishStatus('paused', 'Paused while hidden');
+        } else {
+          clearPauseTimeout();
+        }
+      }, 5000);
+    };
+
+    const handleVisibilityChange = () => {
+      visibilityStateRef.current = resolveVisibilityState();
+
+    if (visibilityStateRef.current === 'visible') {
+      clearPauseTimeout();
+      if (pendingResumeRef.current || !unsubscribeRef.current) {
+        console.info('[useEventStream] Visibility restored, triggering soft refresh...');
+        if (!isDesktopRuntimeRef.current) {
+          sessionActivityPhaseRef.current.clear();
+        }
+        if (currentSessionId) {
+          loadMessages(currentSessionId).catch(() => {});
+          requestSessionMetadataRefresh(currentSessionId);
+        }
+        void loadSessions();
+        publishStatus('connecting', 'Resuming stream');
+          startStream({ resetAttempts: true });
+        }
+      } else {
+        publishStatus('paused', 'Paused while hidden');
+        pauseStreamSoon();
+      }
+    };
+
+    const handleWindowFocus = () => {
+      visibilityStateRef.current = resolveVisibilityState();
+
+    if (visibilityStateRef.current === 'visible') {
+      clearPauseTimeout();
+
+      if (pendingResumeRef.current || !unsubscribeRef.current) {
+        console.info('[useEventStream] Window focused after pause, triggering soft refresh...');
+          if (!isDesktopRuntimeRef.current) {
+            sessionActivityPhaseRef.current.clear();
+          }
+
+          if (currentSessionId) {
+            requestSessionMetadataRefresh(currentSessionId);
+            loadMessages(currentSessionId)
+              .then(() => console.info('[useEventStream] Messages refreshed on focus'))
+              .catch((err) => console.warn('[useEventStream] Failed to refresh messages:', err));
+          }
+          void loadSessions();
+
+          publishStatus('connecting', 'Resuming stream');
+          startStream({ resetAttempts: true });
+        }
+      }
+    };
+
+    const handleOnline = () => {
+      onlineStatusRef.current = true;
+      if (pendingResumeRef.current || !unsubscribeRef.current) {
+        publishStatus('connecting', 'Network restored');
+        startStream({ resetAttempts: true });
+      }
+    };
+
+    const handleOffline = () => {
+      onlineStatusRef.current = false;
+      pendingResumeRef.current = true;
+      publishStatus('offline', 'Waiting for network');
+      stopStream();
+    };
+
+    if (typeof document !== 'undefined') {
+      document.addEventListener('visibilitychange', handleVisibilityChange);
+    }
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('online', handleOnline);
+      window.addEventListener('offline', handleOffline);
+      window.addEventListener('focus', handleWindowFocus);
+    }
+
+    const startTimer = setTimeout(() => {
+      startStream({ resetAttempts: true });
+    }, 100);
+
+    if (staleCheckIntervalRef.current) {
+      clearInterval(staleCheckIntervalRef.current);
+    }
+
+    staleCheckIntervalRef.current = setInterval(() => {
+      if (!shouldHoldConnection()) return;
+
+      const now = Date.now();
+      if (now - lastEventTimestampRef.current > 25000) {
+        Promise.resolve().then(async () => {
+          try {
+            const healthy = await opencodeClient.checkHealth();
+            if (!healthy) {
+              scheduleReconnect('Refreshing stalled stream');
+            } else {
+              lastEventTimestampRef.current = Date.now();
+            }
+          } catch (error) {
+            console.warn('Health check after stale stream failed:', error);
+            scheduleReconnect('Refreshing stalled stream');
+          }
+        });
+      }
+    }, 10000);
+
+    return () => {
+      clearTimeout(startTimer);
+
+      if (desktopActivityHandler && typeof window !== 'undefined') {
+        window.removeEventListener('openchamber:session-activity', desktopActivityHandler as EventListener);
+      }
+
+      if (typeof document !== 'undefined') {
+        document.removeEventListener('visibilitychange', handleVisibilityChange);
+      }
+
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('online', handleOnline);
+        window.removeEventListener('offline', handleOffline);
+        window.removeEventListener('focus', handleWindowFocus);
+      }
+
+      clearPauseTimeout();
+
+      if (staleCheckIntervalRef.current) {
+        clearInterval(staleCheckIntervalRef.current);
+        staleCheckIntervalRef.current = null;
+      }
+
+      const cooldownTimers = sessionCooldownTimersRef.current;
+      const activityPhase = sessionActivityPhaseRef.current;
+
+      cooldownTimers.forEach((timer) => clearTimeout(timer));
+      cooldownTimers.clear();
+      activityPhase.clear();
+      messageCache.clear();
+
+      pendingResumeRef.current = false;
+      visibilityStateRef.current = resolveVisibilityState();
+      onlineStatusRef.current = typeof navigator === 'undefined' ? true : navigator.onLine;
+
+      stopStream();
+
+      if (sessionRefreshTimeoutRef.current) {
+        clearTimeout(sessionRefreshTimeoutRef.current);
+        sessionRefreshTimeoutRef.current = null;
+      }
+
+      publishStatus('idle', null);
+    };
+  }, [
+    currentSessionId,
+    effectiveDirectory,
+    trackMessage,
+    resolveVisibilityState,
+    stopStream,
+    publishStatus,
+    startStream,
+    scheduleReconnect,
+    loadMessages,
+    requestSessionMetadataRefresh,
+    updateSessionActivityPhase,
+    shouldHoldConnection
+  ]);
+};
diff --git a/packages/ui/src/hooks/useFileSystemAccess.ts b/packages/ui/src/hooks/useFileSystemAccess.ts
new file mode 100644
index 00000000..1a125ff9
--- /dev/null
+++ b/packages/ui/src/hooks/useFileSystemAccess.ts
@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from 'react';
+import { isDesktopRuntime, requestDirectoryAccess, startAccessingDirectory, stopAccessingDirectory } from '@/lib/desktop';
+
+export const useFileSystemAccess = () => {
+  const [isDesktop, setIsDesktop] = useState(false);
+
+  useEffect(() => {
+    setIsDesktop(isDesktopRuntime());
+  }, []);
+
+  const requestAccess = useCallback(async (directoryPath: string): Promise<{ success: boolean; path?: string; error?: string }> => {
+    if (!isDesktop) {
+      return { success: true, path: directoryPath };
+    }
+
+    return await requestDirectoryAccess(directoryPath);
+  }, [isDesktop]);
+
+  const startAccessing = useCallback(async (directoryPath: string): Promise<{ success: boolean; error?: string }> => {
+    if (!isDesktop) {
+      return { success: true };
+    }
+
+    return await startAccessingDirectory(directoryPath);
+  }, [isDesktop]);
+
+  const stopAccessing = useCallback(async (directoryPath: string): Promise<{ success: boolean; error?: string }> => {
+    if (!isDesktop) {
+      return { success: true };
+    }
+
+    return await stopAccessingDirectory(directoryPath);
+  }, [isDesktop]);
+
+  return {
+    isDesktop,
+    requestAccess,
+    startAccessing,
+    stopAccessing
+  };
+};
\ No newline at end of file
diff --git a/packages/ui/src/hooks/useFireworks.ts b/packages/ui/src/hooks/useFireworks.ts
new file mode 100644
index 00000000..b96ccdeb
--- /dev/null
+++ b/packages/ui/src/hooks/useFireworks.ts
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+interface FireworksOptions {
+  durationMs?: number;
+}
+
+interface FireworksState {
+  isActive: boolean;
+  cycle: number;
+}
+
+export interface UseFireworksResult {
+  isActive: boolean;
+  burstKey: number;
+  triggerFireworks: () => void;
+  dismissFireworks: () => void;
+}
+
+export const useFireworks = ({ durationMs = 3400 }: FireworksOptions = {}): UseFireworksResult => {
+  const [state, setState] = React.useState<FireworksState>({ isActive: false, cycle: 0 });
+  const timeoutRef = React.useRef<number | null>(null);
+
+  const clearTimer = React.useCallback(() => {
+    if (timeoutRef.current) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  const dismissFireworks = React.useCallback(() => {
+    clearTimer();
+    setState((prev) => (prev.isActive ? { ...prev, isActive: false } : prev));
+  }, [clearTimer]);
+
+  const triggerFireworks = React.useCallback(() => {
+    clearTimer();
+    setState((prev) => ({ isActive: true, cycle: prev.cycle + 1 }));
+
+    timeoutRef.current = window.setTimeout(() => {
+      setState((prev) => (prev.isActive ? { ...prev, isActive: false } : prev));
+      timeoutRef.current = null;
+    }, durationMs);
+  }, [clearTimer, durationMs]);
+
+  React.useEffect(() => () => clearTimer(), [clearTimer]);
+
+  return {
+    isActive: state.isActive,
+    burstKey: state.cycle,
+    triggerFireworks,
+    dismissFireworks,
+  };
+};
diff --git a/packages/ui/src/hooks/useFontPreferences.ts b/packages/ui/src/hooks/useFontPreferences.ts
new file mode 100644
index 00000000..0f3e9778
--- /dev/null
+++ b/packages/ui/src/hooks/useFontPreferences.ts
@@ -0,0 +1,13 @@
+import type { MonoFontOption, UiFontOption } from '@/lib/fontOptions';
+
+interface FontPreferences {
+    uiFont: UiFontOption;
+    monoFont: MonoFontOption;
+}
+
+export const useFontPreferences = (): FontPreferences => {
+    return {
+        uiFont: 'ibm-plex-sans',
+        monoFont: 'ibm-plex-mono',
+    };
+};
diff --git a/packages/ui/src/hooks/useGitPolling.tsx b/packages/ui/src/hooks/useGitPolling.tsx
new file mode 100644
index 00000000..2596a6bb
--- /dev/null
+++ b/packages/ui/src/hooks/useGitPolling.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { useGitPolling } from '@/hooks/useGitPollingHook';
+
+/**
+ * Component wrapper for useGitPolling - use this inside RuntimeAPIProvider
+ */
+export function GitPollingProvider({ children }: { children: React.ReactNode }) {
+    useGitPolling();
+    return <>{children}</>;
+}
diff --git a/packages/ui/src/hooks/useGitPollingHook.ts b/packages/ui/src/hooks/useGitPollingHook.ts
new file mode 100644
index 00000000..094fc5d6
--- /dev/null
+++ b/packages/ui/src/hooks/useGitPollingHook.ts
@@ -0,0 +1,31 @@
+import React from 'react';
+import { useGitStore } from '@/stores/useGitStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
+
+/**
+ * Background git polling hook - monitors git status regardless of which tab is open.
+ * Must be used inside RuntimeAPIProvider.
+ */
+export function useGitPolling() {
+    const { git } = useRuntimeAPIs();
+    const currentDirectory = useDirectoryStore((state) => state.currentDirectory);
+    const { setActiveDirectory, startPolling, stopPolling, fetchAll } = useGitStore();
+
+    React.useEffect(() => {
+        if (!currentDirectory || !git) {
+            stopPolling();
+            return;
+        }
+
+        setActiveDirectory(currentDirectory);
+
+        fetchAll(currentDirectory, git);
+
+        startPolling(git);
+
+        return () => {
+            stopPolling();
+        };
+    }, [currentDirectory, git, setActiveDirectory, startPolling, stopPolling, fetchAll]);
+}
diff --git a/packages/ui/src/hooks/useKeyboardShortcuts.ts b/packages/ui/src/hooks/useKeyboardShortcuts.ts
new file mode 100644
index 00000000..78fc3b79
--- /dev/null
+++ b/packages/ui/src/hooks/useKeyboardShortcuts.ts
@@ -0,0 +1,208 @@
+import React from 'react';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useUIStore } from '@/stores/useUIStore';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { useThemeSystem } from '@/contexts/useThemeSystem';
+import { useAssistantStatus } from '@/hooks/useAssistantStatus';
+import { getRegisteredRuntimeAPIs } from '@/contexts/runtimeAPIRegistry';
+
+export const useKeyboardShortcuts = () => {
+  const { createSession, abortCurrentOperation, initializeNewOpenChamberSession, armAbortPrompt, clearAbortPrompt, currentSessionId } = useSessionStore();
+  const {
+    toggleCommandPalette,
+    toggleHelpDialog,
+    toggleSidebar,
+    setSessionSwitcherOpen,
+    setSessionCreateDialogOpen,
+    setActiveMainTab,
+    setSettingsDialogOpen,
+  } = useUIStore();
+  const { agents } = useConfigStore();
+  const { themeMode, setThemeMode } = useThemeSystem();
+  const { working } = useAssistantStatus();
+  const abortPrimedUntilRef = React.useRef<number | null>(null);
+  const abortPrimedTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isDownloadingLogsRef = React.useRef(false);
+
+  const resetAbortPriming = React.useCallback(() => {
+    if (abortPrimedTimeoutRef.current) {
+      clearTimeout(abortPrimedTimeoutRef.current);
+      abortPrimedTimeoutRef.current = null;
+    }
+    abortPrimedUntilRef.current = null;
+    clearAbortPrompt();
+  }, [clearAbortPrompt]);
+
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+
+       if (e.ctrlKey && e.key === 'x') {
+        e.preventDefault();
+        toggleCommandPalette();
+      }
+
+      if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'l') {
+        const runtimeAPIs = getRegisteredRuntimeAPIs();
+        const diagnostics = runtimeAPIs?.diagnostics;
+        if (!diagnostics) {
+          return;
+        }
+
+        e.preventDefault();
+        if (isDownloadingLogsRef.current) {
+          return;
+        }
+        isDownloadingLogsRef.current = true;
+
+        diagnostics
+          .downloadLogs()
+          .then(({ fileName, content }) => {
+            const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
+            const url = URL.createObjectURL(blob);
+            const anchor = document.createElement('a');
+            anchor.href = url;
+            anchor.download = fileName || 'desktop.log';
+            document.body.appendChild(anchor);
+            anchor.click();
+            document.body.removeChild(anchor);
+            URL.revokeObjectURL(url);
+          })
+          .finally(() => {
+            isDownloadingLogsRef.current = false;
+          });
+        return;
+      }
+
+      if (e.ctrlKey && e.key === 'h') {
+        e.preventDefault();
+        toggleHelpDialog();
+      }
+
+      if (e.ctrlKey && !e.metaKey && e.key.toLowerCase() === 'n') {
+        e.preventDefault();
+        if (e.shiftKey) {
+          setSessionCreateDialogOpen(true);
+          return;
+        }
+
+        createSession().then(session => {
+          if (session) {
+            initializeNewOpenChamberSession(session.id, agents);
+          }
+        });
+      }
+
+       if ((e.metaKey || e.ctrlKey) && e.key === '/') {
+        e.preventDefault();
+        const modes: Array<'light' | 'dark' | 'system'> = ['light', 'dark', 'system'];
+        const currentIndex = modes.indexOf(themeMode);
+        const nextIndex = (currentIndex + 1) % modes.length;
+        setThemeMode(modes[nextIndex]);
+      }
+
+      if (e.ctrlKey && !e.metaKey && !e.shiftKey && e.key.toLowerCase() === 'g') {
+        e.preventDefault();
+        const { activeMainTab } = useUIStore.getState();
+        setActiveMainTab(activeMainTab === 'git' ? 'chat' : 'git');
+        return;
+      }
+
+       if (e.ctrlKey && !e.metaKey && !e.shiftKey && e.key.toLowerCase() === 't') {
+        e.preventDefault();
+        const { activeMainTab } = useUIStore.getState();
+        setActiveMainTab(activeMainTab === 'terminal' ? 'chat' : 'terminal');
+        return;
+      }
+
+      if (e.ctrlKey && !e.metaKey && !e.shiftKey && e.key === ',') {
+        e.preventDefault();
+        const { isSettingsDialogOpen } = useUIStore.getState();
+        setSettingsDialogOpen(!isSettingsDialogOpen);
+        return;
+      }
+
+      if (e.ctrlKey && !e.metaKey && !e.shiftKey && e.key.toLowerCase() === 'l') {
+        e.preventDefault();
+        const { isMobile, isSessionSwitcherOpen } = useUIStore.getState();
+        if (isMobile) {
+          setSessionSwitcherOpen(!isSessionSwitcherOpen);
+        } else {
+          toggleSidebar();
+        }
+        return;
+      }
+
+      if (e.ctrlKey && !e.metaKey && !e.shiftKey && e.key.toLowerCase() === 'i') {
+        e.preventDefault();
+        const textarea = document.querySelector<HTMLTextAreaElement>('textarea[data-chat-input="true"]');
+        textarea?.focus();
+        return;
+      }
+
+      if (e.key === 'Escape') {
+        const sessionId = currentSessionId;
+        const canAbortNow = working.canAbort && Boolean(sessionId);
+        if (!canAbortNow) {
+          resetAbortPriming();
+          return;
+        }
+
+        const now = Date.now();
+        const primedUntil = abortPrimedUntilRef.current;
+
+        if (primedUntil && now < primedUntil) {
+          e.preventDefault();
+          resetAbortPriming();
+          void abortCurrentOperation();
+          return;
+        }
+
+        e.preventDefault();
+        const expiresAt = armAbortPrompt(3000) ?? now + 3000;
+        abortPrimedUntilRef.current = expiresAt;
+
+        if (abortPrimedTimeoutRef.current) {
+          clearTimeout(abortPrimedTimeoutRef.current);
+        }
+
+        const delay = Math.max(expiresAt - now, 0);
+        abortPrimedTimeoutRef.current = setTimeout(() => {
+          if (abortPrimedUntilRef.current && Date.now() >= abortPrimedUntilRef.current) {
+            resetAbortPriming();
+          }
+        }, delay || 0);
+        return;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [
+    createSession,
+    abortCurrentOperation,
+    toggleCommandPalette,
+    toggleHelpDialog,
+    toggleSidebar,
+    setSessionSwitcherOpen,
+    setSessionCreateDialogOpen,
+    setActiveMainTab,
+    setSettingsDialogOpen,
+    setThemeMode,
+    themeMode,
+    initializeNewOpenChamberSession,
+    agents,
+    working,
+    armAbortPrompt,
+    resetAbortPriming,
+    currentSessionId,
+  ]);
+
+  React.useEffect(() => {
+    return () => {
+      resetAbortPriming();
+    };
+  }, [resetAbortPriming]);
+};
diff --git a/packages/ui/src/hooks/useMessageSync.ts b/packages/ui/src/hooks/useMessageSync.ts
new file mode 100644
index 00000000..4516d71b
--- /dev/null
+++ b/packages/ui/src/hooks/useMessageSync.ts
@@ -0,0 +1,252 @@
+import React from 'react';
+import type { AssistantMessage, Message, Part } from '@opencode-ai/sdk';
+import { useSessionStore, MEMORY_LIMITS } from '@/stores/useSessionStore';
+import { opencodeClient } from '@/lib/opencode/client';
+import { readSessionCursor } from '@/lib/messageCursorPersistence';
+import { extractTextFromPart } from '@/stores/utils/messageUtils';
+
+type SessionMessageRecord = { info: Message; parts: Part[] };
+
+const isAssistantMessage = (message: Message): message is AssistantMessage => message.role === 'assistant';
+
+const getCompletionTimestamp = (record: { info: Message }): number | undefined => {
+  const message = record.info;
+  if (!isAssistantMessage(message)) {
+    return undefined;
+  }
+  const completed = message.time?.completed;
+  return typeof completed === 'number' ? completed : undefined;
+};
+
+const isUserMessageInfo = (info?: Message): boolean => {
+  if (!info) return false;
+  if (info.role === 'user') return true;
+  const infoExt = info as { clientRole?: string; userMessageMarker?: boolean };
+  if (infoExt.clientRole === 'user') return true;
+  return Boolean(infoExt.userMessageMarker);
+};
+
+const normalizeMessageText = (message?: SessionMessageRecord): string => {
+  const parts = Array.isArray(message?.parts) ? message.parts : [];
+  const raw = parts
+    .map((part) => extractTextFromPart(part))
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+  return raw;
+};
+
+const findServerIndexForLocalUserMessage = (
+  localMessage: SessionMessageRecord | undefined,
+  serverMessages: SessionMessageRecord[]
+): number => {
+  if (!localMessage || !isUserMessageInfo(localMessage.info)) {
+    return -1;
+  }
+
+  const localText = normalizeMessageText(localMessage);
+  const localCreated =
+    typeof localMessage.info?.time?.created === 'number' ? localMessage.info.time.created : undefined;
+
+  let bestIndex = -1;
+  let bestScore = Number.POSITIVE_INFINITY;
+
+  serverMessages.forEach((candidate, index) => {
+    if (!isUserMessageInfo(candidate.info)) {
+      return;
+    }
+
+    const candidateText = normalizeMessageText(candidate);
+    const textMatches = Boolean(localText && candidateText && candidateText === localText);
+    const candidateCreated =
+      typeof candidate.info?.time?.created === 'number' ? candidate.info.time.created : undefined;
+    const timeDelta =
+      typeof localCreated === 'number' && typeof candidateCreated === 'number'
+        ? Math.abs(candidateCreated - localCreated)
+        : null;
+
+    if (textMatches) {
+      const score = typeof timeDelta === 'number' ? timeDelta : 0;
+      if (score < bestScore) {
+        bestIndex = index;
+        bestScore = score;
+      }
+      return;
+    }
+
+    if (!localText && !candidateText && typeof timeDelta === 'number' && timeDelta < 1500 && timeDelta < bestScore) {
+      bestIndex = index;
+      bestScore = timeDelta;
+    }
+  });
+
+  if (bestIndex !== -1) {
+    return bestIndex;
+  }
+
+  if (typeof localCreated === 'number') {
+    return serverMessages.findIndex((candidate) => {
+      if (!isUserMessageInfo(candidate.info)) return false;
+      const candidateCreated =
+        typeof candidate.info?.time?.created === 'number' ? candidate.info.time.created : undefined;
+      if (typeof candidateCreated !== 'number') return false;
+      return Math.abs(candidateCreated - localCreated) < 1000;
+    });
+  }
+
+  return -1;
+};
+
+export const useMessageSync = () => {
+  const {
+    currentSessionId,
+    messages,
+    streamingMessageIds
+  } = useSessionStore();
+
+  const streamingMessageId = React.useMemo(() => {
+    if (!currentSessionId) return null;
+    return streamingMessageIds.get(currentSessionId) ?? null;
+  }, [currentSessionId, streamingMessageIds]);
+
+  const syncTimeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
+  const lastSyncRef = React.useRef<number>(0);
+
+  const syncMessages = React.useCallback(async () => {
+    if (!currentSessionId) return;
+    if (streamingMessageId) return;
+
+    const now = Date.now();
+    if (now - lastSyncRef.current < 2000) return;
+    lastSyncRef.current = now;
+
+    try {
+
+      const currentMessages = (messages.get(currentSessionId) || []) as SessionMessageRecord[];
+
+      const latestMessages = (await opencodeClient.getSessionMessages(currentSessionId)) as SessionMessageRecord[];
+      const cursorRecord = await readSessionCursor(currentSessionId);
+
+      if (!latestMessages) return;
+
+      const lastLocalMessage = currentMessages[currentMessages.length - 1];
+
+      if (lastLocalMessage) {
+        const directIndex = latestMessages.findIndex((m) => m.info.id === lastLocalMessage.info.id);
+        const fuzzyIndex =
+          directIndex === -1
+            ? findServerIndexForLocalUserMessage(lastLocalMessage, latestMessages)
+            : directIndex;
+        const lastLocalIndex = fuzzyIndex;
+
+        if (lastLocalIndex !== -1) {
+
+          if (lastLocalIndex < latestMessages.length - 1) {
+            const newMessages = latestMessages.slice(lastLocalIndex + 1);
+            console.log(`[SYNC] Found ${newMessages.length} new messages to append`);
+
+            const updatedMessages = [...currentMessages, ...newMessages];
+            const { syncMessages } = useSessionStore.getState();
+            syncMessages(currentSessionId, updatedMessages);
+          } else {
+
+            const serverLastMessage = latestMessages[lastLocalIndex];
+            const localLastMessage = currentMessages[currentMessages.length - 1];
+
+            const serverCompleted = getCompletionTimestamp(serverLastMessage);
+            const localCompleted = getCompletionTimestamp(localLastMessage);
+
+            if (serverCompleted && !localCompleted) {
+              console.log('[SYNC] Last message completed on server');
+
+              const updatedMessages = [...currentMessages.slice(0, -1), serverLastMessage];
+              const { syncMessages } = useSessionStore.getState();
+              syncMessages(currentSessionId, updatedMessages);
+            }
+          }
+        } else {
+
+          if (isUserMessageInfo(lastLocalMessage.info)) {
+            const messagesToLoad = latestMessages.slice(-MEMORY_LIMITS.VIEWPORT_MESSAGES);
+            console.log('[SYNC] Local user message missing by ID; merging latest messages for deduplication');
+            const { syncMessages } = useSessionStore.getState();
+            syncMessages(currentSessionId, messagesToLoad);
+          } else {
+            console.log('[SYNC] Local messages not found on server - skipping sync');
+          }
+        }
+      } else if (cursorRecord) {
+        const cursorIndex = latestMessages.findIndex(m => m.info.id === cursorRecord.messageId);
+
+        if (cursorIndex !== -1) {
+          if (cursorIndex < latestMessages.length - 1) {
+            const newMessages = latestMessages.slice(cursorIndex + 1);
+            const limited = newMessages.slice(-MEMORY_LIMITS.VIEWPORT_MESSAGES);
+            if (limited.length > 0) {
+              console.log(`[SYNC] Restoring ${limited.length} messages after cursor`);
+              const { syncMessages } = useSessionStore.getState();
+              syncMessages(currentSessionId, limited);
+            }
+          }
+        } else if (latestMessages.length > 0) {
+          console.log('[SYNC] Cursor not found on server response, loading recent messages');
+          const messagesToLoad = latestMessages.slice(-MEMORY_LIMITS.VIEWPORT_MESSAGES);
+          const { syncMessages } = useSessionStore.getState();
+          syncMessages(currentSessionId, messagesToLoad);
+        }
+      } else if (latestMessages.length > 0) {
+
+        const messagesToLoad = latestMessages.slice(-MEMORY_LIMITS.VIEWPORT_MESSAGES);
+        console.log(`[SYNC] Loading last ${messagesToLoad.length} messages`);
+        const { syncMessages } = useSessionStore.getState();
+        syncMessages(currentSessionId, messagesToLoad);
+      }
+    } catch (error) {
+
+      console.debug('Background sync failed:', error);
+    }
+  }, [currentSessionId, messages, streamingMessageId]);
+
+  React.useEffect(() => {
+    const handleFocus = () => {
+      console.log('[FOCUS] Window focused - checking for updates');
+      syncMessages();
+    };
+
+    window.addEventListener('focus', handleFocus);
+    return () => window.removeEventListener('focus', handleFocus);
+  }, [syncMessages]);
+
+  React.useEffect(() => {
+    if (!currentSessionId || streamingMessageId) return;
+
+    const scheduleSync = () => {
+
+      if (document.visibilityState === 'visible') {
+        syncMessages();
+      }
+
+      syncTimeoutRef.current = setTimeout(scheduleSync, 30000);
+    };
+
+    syncTimeoutRef.current = setTimeout(scheduleSync, 30000);
+
+    return () => {
+      if (syncTimeoutRef.current) {
+        clearTimeout(syncTimeoutRef.current);
+      }
+    };
+  }, [currentSessionId, streamingMessageId, syncMessages]);
+
+  React.useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        console.log('[FOCUS] Tab became visible - checking for updates');
+        syncMessages();
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+  }, [syncMessages]);
+};
diff --git a/packages/ui/src/hooks/useProviderLogo.ts b/packages/ui/src/hooks/useProviderLogo.ts
new file mode 100644
index 00000000..50ed85e0
--- /dev/null
+++ b/packages/ui/src/hooks/useProviderLogo.ts
@@ -0,0 +1,61 @@
+import { useState, useCallback, useEffect } from 'react';
+
+type LogoSource = 'local' | 'remote' | 'none';
+
+interface UseProviderLogoReturn {
+    src: string | null;
+    onError: () => void;
+    hasLogo: boolean;
+}
+
+const localLogoModules = import.meta.glob<string>('../assets/provider-logos/*.svg', {
+    eager: true,
+    import: 'default',
+});
+
+const LOCAL_PROVIDER_LOGO_MAP = new Map<string, string>();
+
+for (const [path, url] of Object.entries(localLogoModules)) {
+    const match = path.match(/provider-logos\/([^/]+)\.svg$/i);
+    if (match?.[1] && url) {
+        LOCAL_PROVIDER_LOGO_MAP.set(match[1].toLowerCase(), url);
+    }
+}
+
+export function useProviderLogo(providerId: string | null | undefined): UseProviderLogoReturn {
+    const normalizedId = providerId?.toLowerCase() ?? null;
+    const hasLocalLogo = normalizedId ? LOCAL_PROVIDER_LOGO_MAP.has(normalizedId) : false;
+    const localLogoSrc = normalizedId ? LOCAL_PROVIDER_LOGO_MAP.get(normalizedId) ?? null : null;
+
+    const [source, setSource] = useState<LogoSource>(hasLocalLogo ? 'local' : 'remote');
+
+    useEffect(() => {
+        setSource(hasLocalLogo ? 'local' : 'remote');
+    }, [hasLocalLogo, normalizedId]);
+
+    const handleError = useCallback(() => {
+        setSource((current) => (current === 'local' && hasLocalLogo ? 'remote' : 'none'));
+    }, [hasLocalLogo]);
+
+    if (!normalizedId) {
+        return { src: null, onError: handleError, hasLogo: false };
+    }
+
+    if (source === 'local' && localLogoSrc) {
+        return {
+            src: localLogoSrc,
+            onError: handleError,
+            hasLogo: true,
+        };
+    }
+
+    if (source === 'remote') {
+        return {
+            src: `https://models.dev/logos/${normalizedId}.svg`,
+            onError: handleError,
+            hasLogo: true,
+        };
+    }
+
+    return { src: null, onError: handleError, hasLogo: false };
+}
diff --git a/packages/ui/src/hooks/useRuntimeAPIs.ts b/packages/ui/src/hooks/useRuntimeAPIs.ts
new file mode 100644
index 00000000..c7cb0bb8
--- /dev/null
+++ b/packages/ui/src/hooks/useRuntimeAPIs.ts
@@ -0,0 +1,18 @@
+import React from 'react';
+import type { RuntimeAPISelector, RuntimeAPIs } from '@/lib/api/types';
+import { RuntimeAPIContext } from '@/contexts/runtimeAPIContext';
+
+export const useRuntimeAPIs = (): RuntimeAPIs => {
+  const apis = React.useContext(RuntimeAPIContext);
+  if (!apis) {
+    throw new Error('Runtime APIs are not available. Did you forget to wrap the app in <RuntimeAPIProvider>?');
+  }
+  return apis;
+};
+
+export const useRuntimeAPI = <TValue,>(selector: RuntimeAPISelector<TValue>): TValue => {
+  const apis = useRuntimeAPIs();
+  return selector(apis);
+};
+
+export const useIsDesktopRuntime = (): boolean => useRuntimeAPI((api) => api.runtime.isDesktop);
diff --git a/packages/ui/src/hooks/useScrollEngine.ts b/packages/ui/src/hooks/useScrollEngine.ts
new file mode 100644
index 00000000..c58a06ce
--- /dev/null
+++ b/packages/ui/src/hooks/useScrollEngine.ts
@@ -0,0 +1,211 @@
+import React from 'react';
+
+type ScrollEngineOptions = {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    isMobile: boolean;
+};
+
+type ScrollOptions = {
+    instant?: boolean;
+};
+
+type ScrollEngineResult = {
+    handleScroll: () => void;
+    scrollToPosition: (position: number, options?: ScrollOptions) => void;
+    forceManualMode: () => void;
+    isAtTop: boolean;
+    isManualOverrideActive: () => boolean;
+    getScrollTop: () => number;
+    getScrollHeight: () => number;
+    getClientHeight: () => number;
+};
+
+const ANIMATION_DURATION_MS = 160;
+
+export const useScrollEngine = ({
+    containerRef,
+}: ScrollEngineOptions): ScrollEngineResult => {
+    const [isAtTop, setIsAtTop] = React.useState(true);
+
+    const atTopRef = React.useRef(true);
+    const manualOverrideRef = React.useRef(false);
+    const animationFrameRef = React.useRef<number | null>(null);
+    const animationStartRef = React.useRef<number | null>(null);
+    const animationFromRef = React.useRef(0);
+    const animationTargetRef = React.useRef(0);
+
+    const cancelAnimation = React.useCallback(() => {
+        if (animationFrameRef.current !== null && typeof window !== 'undefined') {
+            window.cancelAnimationFrame(animationFrameRef.current);
+        }
+
+        animationFrameRef.current = null;
+        animationStartRef.current = null;
+    }, []);
+
+    const runAnimationFrame = React.useCallback(
+        (timestamp: number) => {
+            const container = containerRef.current;
+            if (!container) {
+                cancelAnimation();
+                return;
+            }
+
+            if (animationStartRef.current === null) {
+                animationStartRef.current = timestamp;
+            }
+
+            const progress = Math.min(1, (timestamp - animationStartRef.current) / ANIMATION_DURATION_MS);
+            const easedProgress = 1 - Math.pow(1 - progress, 3);
+            const from = animationFromRef.current;
+            const target = animationTargetRef.current;
+            const nextTop = from + (target - from) * easedProgress;
+
+            container.scrollTop = nextTop;
+
+            if (progress < 1) {
+                animationFrameRef.current = window.requestAnimationFrame(runAnimationFrame);
+                return;
+            }
+
+            container.scrollTop = target;
+            cancelAnimation();
+
+            if (atTopRef.current) {
+                atTopRef.current = false;
+                setIsAtTop(false);
+            }
+        },
+        [cancelAnimation, containerRef, setIsAtTop]
+    );
+
+    const scrollToPosition = React.useCallback(
+        (position: number, options?: ScrollOptions) => {
+            const container = containerRef.current;
+            if (!container) return;
+
+            const target = Math.max(0, position);
+            const preferInstant = options?.instant ?? false;
+
+            manualOverrideRef.current = false;
+
+            if (typeof window === 'undefined' || preferInstant) {
+                cancelAnimation();
+                container.scrollTop = target;
+
+                const atTop = target <= 1;
+                if (atTopRef.current !== atTop) {
+                    atTopRef.current = atTop;
+                    setIsAtTop(atTop);
+                }
+
+                return;
+            }
+
+            cancelAnimation();
+
+            const distance = Math.abs(target - container.scrollTop);
+            if (distance <= 0.5) {
+                container.scrollTop = target;
+
+                const atTop = target <= 1;
+                if (atTopRef.current !== atTop) {
+                    atTopRef.current = atTop;
+                    setIsAtTop(atTop);
+                }
+
+                return;
+            }
+
+            animationFromRef.current = container.scrollTop;
+            animationTargetRef.current = target;
+            animationStartRef.current = null;
+            animationFrameRef.current = window.requestAnimationFrame(runAnimationFrame);
+        },
+        [cancelAnimation, containerRef, runAnimationFrame, setIsAtTop]
+    );
+
+    const forceManualMode = React.useCallback(() => {
+        manualOverrideRef.current = true;
+    }, []);
+
+    const markManualOverride = React.useCallback(() => {
+        manualOverrideRef.current = true;
+    }, []);
+
+    const isManualOverrideActive = React.useCallback(() => {
+        return manualOverrideRef.current;
+    }, []);
+
+    const getScrollTop = React.useCallback(() => {
+        return containerRef.current?.scrollTop ?? 0;
+    }, [containerRef]);
+
+    const getScrollHeight = React.useCallback(() => {
+        return containerRef.current?.scrollHeight ?? 0;
+    }, [containerRef]);
+
+    const getClientHeight = React.useCallback(() => {
+        return containerRef.current?.clientHeight ?? 0;
+    }, [containerRef]);
+
+    const handleScroll = React.useCallback(() => {
+        const container = containerRef.current;
+        if (!container) return;
+
+        if (manualOverrideRef.current && animationFrameRef.current !== null) {
+            cancelAnimation();
+        }
+
+        const atTop = container.scrollTop <= 1;
+
+        if (atTopRef.current !== atTop) {
+            atTopRef.current = atTop;
+            setIsAtTop(atTop);
+        }
+    }, [cancelAnimation, containerRef]);
+
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return;
+
+        container.addEventListener('wheel', markManualOverride, { passive: true });
+        container.addEventListener('touchstart', markManualOverride, { passive: true });
+
+        return () => {
+            container.removeEventListener('wheel', markManualOverride);
+            container.removeEventListener('touchstart', markManualOverride);
+        };
+    }, [containerRef, markManualOverride]);
+
+    React.useEffect(() => {
+        return () => {
+            cancelAnimation();
+        };
+    }, [cancelAnimation]);
+
+    return React.useMemo(
+        () => ({
+            handleScroll,
+            scrollToPosition,
+            forceManualMode,
+            isAtTop,
+            isManualOverrideActive,
+            getScrollTop,
+            getScrollHeight,
+            getClientHeight,
+        }),
+        [
+            handleScroll,
+            scrollToPosition,
+            forceManualMode,
+            isAtTop,
+            isManualOverrideActive,
+            getScrollTop,
+            getScrollHeight,
+            getClientHeight,
+        ]
+    );
+};
+
+export type { ScrollEngineResult, ScrollEngineOptions, ScrollOptions };
diff --git a/packages/ui/src/hooks/useSessionActivity.ts b/packages/ui/src/hooks/useSessionActivity.ts
new file mode 100644
index 00000000..8b15debd
--- /dev/null
+++ b/packages/ui/src/hooks/useSessionActivity.ts
@@ -0,0 +1,53 @@
+
+
+import React from 'react';
+import { useSessionStore } from '@/stores/useSessionStore';
+
+export type SessionActivityPhase = 'idle' | 'busy' | 'cooldown';
+
+export interface SessionActivityResult {
+
+  phase: SessionActivityPhase;
+
+  isWorking: boolean;
+
+  isBusy: boolean;
+
+  isCooldown: boolean;
+}
+
+const IDLE_RESULT: SessionActivityResult = {
+  phase: 'idle',
+  isWorking: false,
+  isBusy: false,
+  isCooldown: false,
+};
+
+export function useSessionActivity(sessionId: string | null | undefined): SessionActivityResult {
+
+  const phase = useSessionStore((state) => {
+    if (!sessionId || !state.sessionActivityPhase) {
+      return 'idle' as SessionActivityPhase;
+    }
+    return state.sessionActivityPhase.get(sessionId) ?? ('idle' as SessionActivityPhase);
+  });
+
+  return React.useMemo<SessionActivityResult>(() => {
+    if (phase === 'idle') {
+      return IDLE_RESULT;
+    }
+    const isBusy = phase === 'busy';
+    const isCooldown = phase === 'cooldown';
+    return {
+      phase,
+      isWorking: isBusy || isCooldown,
+      isBusy,
+      isCooldown,
+    };
+  }, [phase]);
+}
+
+export function useCurrentSessionActivity(): SessionActivityResult {
+  const currentSessionId = useSessionStore((state) => state.currentSessionId);
+  return useSessionActivity(currentSessionId);
+}
diff --git a/packages/ui/src/hooks/useSessionStatusBootstrap.ts b/packages/ui/src/hooks/useSessionStatusBootstrap.ts
new file mode 100644
index 00000000..26666ea6
--- /dev/null
+++ b/packages/ui/src/hooks/useSessionStatusBootstrap.ts
@@ -0,0 +1,43 @@
+import React from 'react';
+import { opencodeClient } from '@/lib/opencode/client';
+import { useSessionStore } from '@/stores/useSessionStore';
+
+type SessionStatusPayload = {
+  type: 'idle' | 'busy' | 'retry';
+  attempt?: number;
+  message?: string;
+  next?: number;
+};
+
+export const useSessionStatusBootstrap = () => {
+  React.useEffect(() => {
+    let cancelled = false;
+
+    const bootstrap = async () => {
+      try {
+        const statusMap = await opencodeClient.getSessionStatus();
+        if (cancelled || !statusMap) return;
+
+        const phases = new Map<string, 'idle' | 'busy' | 'cooldown'>();
+        Object.entries(statusMap).forEach(([sessionId, raw]) => {
+          if (!sessionId || !raw) return;
+          const status = raw as SessionStatusPayload;
+          const phase: 'idle' | 'busy' | 'cooldown' =
+            status.type === 'busy' || status.type === 'retry' ? 'busy' : 'idle';
+          phases.set(sessionId, phase);
+        });
+
+        if (phases.size > 0) {
+          useSessionStore.setState({ sessionActivityPhase: phases });
+        }
+      } catch { /* ignored */ }
+    };
+
+    void bootstrap();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+};
+
diff --git a/packages/ui/src/hooks/useUpdateCheck.ts b/packages/ui/src/hooks/useUpdateCheck.ts
new file mode 100644
index 00000000..915d6f93
--- /dev/null
+++ b/packages/ui/src/hooks/useUpdateCheck.ts
@@ -0,0 +1,201 @@
+import { useEffect, useState, useCallback } from 'react';
+import {
+  checkForDesktopUpdates,
+  downloadDesktopUpdate,
+  restartToApplyUpdate,
+  isDesktopRuntime,
+  type UpdateInfo,
+  type UpdateProgress,
+} from '@/lib/desktop';
+
+export type UpdateState = {
+  checking: boolean;
+  available: boolean;
+  downloading: boolean;
+  downloaded: boolean;
+  info: UpdateInfo | null;
+  progress: UpdateProgress | null;
+  error: string | null;
+};
+
+export type UseUpdateCheckReturn = UpdateState & {
+  checkForUpdates: () => Promise<void>;
+  downloadUpdate: () => Promise<void>;
+  restartToUpdate: () => Promise<void>;
+  dismiss: () => void;
+};
+
+const MOCK_UPDATE: UpdateState = {
+  checking: false,
+  available: true,
+  downloading: false,
+  downloaded: false,
+  info: {
+    available: true,
+    version: '99.0.0-test',
+    currentVersion: '0.0.0',
+    body: 'Test update for UI development',
+  },
+  progress: null,
+  error: null,
+};
+
+// Set window.__OPENCHAMBER_MOCK_UPDATE__ = true in console to test UI
+declare global {
+  interface Window {
+    __OPENCHAMBER_MOCK_UPDATE__?: boolean;
+  }
+}
+
+const shouldMockUpdate = (): boolean => {
+  if (typeof window === 'undefined') return false;
+  return window.__OPENCHAMBER_MOCK_UPDATE__ === true;
+};
+
+export const useUpdateCheck = (checkOnMount = true): UseUpdateCheckReturn => {
+  const [state, setState] = useState<UpdateState>({
+    checking: false,
+    available: false,
+    downloading: false,
+    downloaded: false,
+    info: null,
+    progress: null,
+    error: null,
+  });
+
+  const [mockMode, setMockMode] = useState(shouldMockUpdate);
+  const [mockState, setMockState] = useState<UpdateState>(MOCK_UPDATE);
+
+  // Check for mock mode changes (for console toggling)
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const shouldMock = shouldMockUpdate();
+      if (shouldMock !== mockMode) {
+        setMockMode(shouldMock);
+        if (shouldMock) {
+          setMockState(MOCK_UPDATE);
+        }
+      }
+    }, 500);
+    return () => clearInterval(interval);
+  }, [mockMode]);
+
+  const checkForUpdates = useCallback(async () => {
+    if (mockMode) {
+      setMockState(MOCK_UPDATE);
+      return;
+    }
+    if (!isDesktopRuntime()) {
+      return;
+    }
+
+    setState((prev) => ({ ...prev, checking: true, error: null }));
+
+    try {
+      const info = await checkForDesktopUpdates();
+      setState((prev) => ({
+        ...prev,
+        checking: false,
+        available: info?.available ?? false,
+        info,
+      }));
+    } catch (error) {
+      setState((prev) => ({
+        ...prev,
+        checking: false,
+        error: error instanceof Error ? error.message : 'Failed to check for updates',
+      }));
+    }
+  }, [mockMode]);
+
+  const downloadUpdate = useCallback(async () => {
+    if (mockMode) {
+      setMockState((prev) => ({ ...prev, downloading: true }));
+      // Simulate download progress
+      let progress = 0;
+      const interval = setInterval(() => {
+        progress += 20;
+        setMockState((prev) => ({
+          ...prev,
+          progress: { downloaded: progress * 1000, total: 100000 }
+        }));
+        if (progress >= 100) {
+          clearInterval(interval);
+          setMockState((prev) => ({
+            ...prev,
+            downloading: false,
+            downloaded: true,
+            progress: null,
+          }));
+        }
+      }, 500);
+      return;
+    }
+
+    if (!isDesktopRuntime() || !state.available) {
+      return;
+    }
+
+    setState((prev) => ({ ...prev, downloading: true, error: null, progress: null }));
+
+    try {
+      await downloadDesktopUpdate((progress) => {
+        setState((prev) => ({ ...prev, progress }));
+      });
+      setState((prev) => ({ ...prev, downloading: false, downloaded: true }));
+    } catch (error) {
+      setState((prev) => ({
+        ...prev,
+        downloading: false,
+        error: error instanceof Error ? error.message : 'Failed to download update',
+      }));
+    }
+  }, [mockMode, state.available]);
+
+  const restartToUpdate = useCallback(async () => {
+    if (mockMode) {
+      return;
+    }
+
+    if (!isDesktopRuntime() || !state.downloaded) {
+      return;
+    }
+
+    try {
+      await restartToApplyUpdate();
+    } catch (error) {
+      setState((prev) => ({
+        ...prev,
+        error: error instanceof Error ? error.message : 'Failed to restart',
+      }));
+    }
+  }, [mockMode, state.downloaded]);
+
+  const dismiss = useCallback(() => {
+    if (mockMode) {
+      setMockState(MOCK_UPDATE);
+      return;
+    }
+    setState((prev) => ({ ...prev, available: false, downloaded: false, info: null }));
+  }, [mockMode]);
+
+  useEffect(() => {
+    if (checkOnMount && (isDesktopRuntime() || mockMode)) {
+      const timer = setTimeout(() => {
+        checkForUpdates();
+      }, 3000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [checkOnMount, checkForUpdates, mockMode]);
+
+  const currentState = mockMode ? mockState : state;
+
+  return {
+    ...currentState,
+    checkForUpdates,
+    downloadUpdate,
+    restartToUpdate,
+    dismiss,
+  };
+};
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
new file mode 100644
index 00000000..c63e63f8
--- /dev/null
+++ b/packages/ui/src/index.css
@@ -0,0 +1,1293 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@source "./**/*.{ts,tsx,css}";
+
+:root {
+  --oc-safe-area-top: 0px;
+  --oc-safe-area-right: 0px;
+  --oc-safe-area-bottom: 0px;
+  --oc-safe-area-bottom-visual: 0px;
+  --oc-safe-area-left: 0px;
+  --ui-regular-font-weight: 400;
+  --oc-scrollbar-thumb: oklch(0.32 0.03 50 / 0.4);
+  --oc-scrollbar-thumb-hover: oklch(0.32 0.03 50 / 0.6);
+}
+
+@custom-variant dark (&:is(.dark *));
+
+/* Suppress WebKit-specific hover/focus adornments on the chat textarea */
+textarea[data-chat-input="true"] {
+  -webkit-appearance: none;
+  background: transparent !important;
+  border: none;
+  box-shadow: none;
+}
+
+textarea[data-chat-input="true"]:focus,
+textarea[data-chat-input="true"]:focus-visible,
+textarea[data-chat-input="true"]:hover {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
+/* Match chat footer background to input in WebKit to avoid dual-tone hover/focus */
+[data-chat-input="true"] + div[data-chat-input-footer="true"] {
+  background: transparent !important;
+  border: none;
+  box-shadow: none;
+  -webkit-appearance: none;
+}
+
+/* Scroll shadow (HeroUI) fallback styling to ensure visible gradients without the Tailwind plugin */
+[data-scroll-shadow="true"] {
+  --scroll-shadow-size: var(--scroll-shadow-size, 48px);
+}
+
+[data-scroll-shadow="true"][data-orientation="vertical"] {
+  mask-mode: alpha;
+}
+
+[data-scroll-shadow="true"][data-orientation="vertical"][data-top-bottom-scroll="true"] {
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    #000 var(--scroll-shadow-size),
+    #000 calc(100% - var(--scroll-shadow-size)),
+    transparent 100%
+  );
+}
+
+[data-scroll-shadow="true"][data-orientation="vertical"][data-top-scroll="true"] {
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    #000 var(--scroll-shadow-size),
+    #000 100%
+  );
+}
+
+[data-scroll-shadow="true"][data-orientation="vertical"][data-bottom-scroll="true"] {
+  mask-image: linear-gradient(
+    to bottom,
+    #000 0%,
+    #000 calc(100% - var(--scroll-shadow-size)),
+    transparent 100%
+  );
+}
+
+
+@keyframes spin-once {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes oc-migrate-up {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes gradient-shimmer {
+  0% {
+    stop-color: currentColor;
+  }
+  50% {
+    stop-color: color-mix(in srgb, currentColor 60%, white 40%);
+  }
+  100% {
+    stop-color: currentColor;
+  }
+}
+
+@keyframes shimmer-position {
+  0% {
+    x: -100%;
+  }
+  100% {
+    x: 100%;
+  }
+}
+
+/* Safari/WebKit fixes for buttons and SVG icons */
+/* Remixicon puts fill="currentColor" on root SVG which WebKit renders as background */
+button svg.remixicon,
+[role="button"] svg.remixicon,
+button svg,
+[role="button"] svg {
+  background: none !important;
+  background-color: transparent !important;
+  /* Override inline fill attribute on SVG root */
+  fill: none !important;
+  /* Ensure SVG uses CSS rendering, not native */
+  shape-rendering: geometricPrecision;
+}
+
+/* GPU acceleration for non-spinning SVGs */
+button svg:not(.animate-spin),
+[role="button"] svg:not(.animate-spin) {
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+
+/* Fix SVG elements inside buttons - remove any rect/circle backgrounds */
+button svg rect,
+button svg circle,
+[role="button"] svg rect,
+[role="button"] svg circle {
+  fill: none !important;
+}
+
+/* Ensure SVG paths/shapes inherit color properly */
+button svg.remixicon path,
+button svg.remixicon circle[fill],
+[role="button"] svg.remixicon path,
+[role="button"] svg.remixicon circle[fill],
+button svg path,
+[role="button"] svg path {
+  fill: currentColor !important;
+}
+
+/* Safari/WebKit animation fixes - outside @layer for higher specificity */
+.animate-spin {
+  animation: webkit-spin 1s linear infinite !important;
+  will-change: transform !important;
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Specific SVG spinner fixes for WebKit */
+svg.animate-spin {
+  /* Use CSS box as transform reference for proper centering with scaled SVGs */
+  transform-box: fill-box !important;
+  transform-origin: 50% 50% !important;
+  background: none !important;
+  background-color: transparent !important;
+  overflow: visible !important;
+  /* Ensure SVG content is centered */
+  display: block !important;
+}
+
+@keyframes webkit-spin {
+  0% {
+    transform: translateZ(0) rotate(0deg);
+  }
+  100% {
+    transform: translateZ(0) rotate(360deg);
+  }
+}
+
+.app-region-drag {
+  -webkit-app-region: drag;
+}
+
+.app-region-no-drag {
+  -webkit-app-region: no-drag;
+}
+
+/* Semantic Typography System Classes */
+@layer components {
+  /* Semantic typography classes - font-size only */
+  .typography-markdown {
+    font-size: var(--text-markdown);
+  }
+
+  .typography-code {
+    font-size: var(--text-code);
+  }
+
+  .typography-ui-header {
+    font-size: var(--text-ui-header);
+  }
+
+  .typography-ui-label {
+    font-size: var(--text-ui-label);
+  }
+
+  .typography-meta {
+    font-size: var(--text-meta);
+  }
+
+  .typography-micro {
+    font-size: var(--text-micro);
+  }
+
+  .chat-column {
+    width: min(100%, 56rem);
+    margin-inline: auto;
+    padding-inline: clamp(1rem, 3vw, 1.5rem);
+  }
+
+  @media (min-width: 1024px) {
+    .chat-column {
+      padding-inline: clamp(1.25rem, 2.5vw, 2rem);
+    }
+  }
+
+  /* FadeInOnReveal handles all animations - no custom CSS needed */
+
+   /* Heading typography - all use markdown size, differentiated by weight/color */
+
+  .typography-h1 {
+    font-size: var(--text-markdown);
+    line-height: var(--h1-line-height);
+    letter-spacing: var(--h1-letter-spacing);
+    font-weight: var(--h1-font-weight);
+  }
+
+  .typography-h2 {
+    font-size: var(--text-markdown);
+    line-height: var(--h2-line-height);
+    letter-spacing: var(--h2-letter-spacing);
+    font-weight: var(--h2-font-weight);
+  }
+
+  .typography-h3 {
+    font-size: var(--text-markdown);
+    line-height: var(--h3-line-height);
+    letter-spacing: var(--h3-letter-spacing);
+    font-weight: var(--h3-font-weight);
+  }
+
+  /* UI element typography - mapped to semantic variables */
+  .typography-ui-button {
+    font-size: var(--text-ui-label);
+    line-height: var(--ui-button-line-height);
+    letter-spacing: var(--ui-button-letter-spacing);
+    font-weight: var(--ui-button-font-weight);
+  }
+
+  .typography-ui-caption {
+    font-size: var(--text-micro);
+    line-height: var(--ui-caption-line-height);
+    letter-spacing: var(--ui-caption-letter-spacing);
+    font-weight: var(--ui-caption-font-weight);
+  }
+
+  /* Markdown typography - all use semantic markdown size */
+  .typography-markdown-body {
+    font-size: var(--text-markdown);
+    line-height: var(--markdown-body-line-height);
+    letter-spacing: var(--markdown-body-letter-spacing);
+    font-weight: var(--markdown-body-font-weight);
+  }
+
+  .typography-markdown-h1 {
+    font-size: var(--text-markdown);
+    line-height: var(--markdown-h1-line-height);
+    letter-spacing: var(--markdown-h1-letter-spacing);
+    font-weight: var(--markdown-h1-font-weight);
+  }
+
+  .typography-markdown-h2 {
+    font-size: var(--text-markdown);
+    line-height: var(--markdown-h2-line-height);
+    letter-spacing: var(--markdown-h2-letter-spacing);
+    font-weight: var(--markdown-h2-font-weight);
+  }
+
+  .typography-markdown-h3 {
+    font-size: var(--text-markdown);
+    line-height: var(--markdown-h3-line-height);
+    letter-spacing: var(--markdown-h3-letter-spacing);
+    font-weight: var(--markdown-h3-font-weight);
+  }
+
+  .typography-markdown-h4 {
+    font-size: var(--text-markdown);
+    line-height: var(--markdown-h4-line-height);
+    letter-spacing: var(--markdown-h4-letter-spacing);
+    font-weight: var(--markdown-h4-font-weight);
+  }
+
+  .animate-spin-once {
+    animation: spin-once 0.5s linear forwards;
+  }
+
+}
+
+:root {
+  /* Default Light Theme */
+  --background: oklch(0.97 0.02 85); /* Warm sand background */
+  --foreground: oklch(0.25 0.02 40); /* Dark warm text */
+  --card: oklch(0.99 0.01 90); /* Bright sand card */
+  --card-foreground: oklch(0.25 0.02 40); /* Dark warm text */
+  --popover: oklch(0.99 0.01 90); /* Bright sand popover */
+  --popover-foreground: oklch(0.25 0.02 40); /* Dark warm text */
+  --primary: oklch(0.65 0.2 55); /* Primary accent - orange */
+  --primary-foreground: oklch(0.99 0.01 90); /* Light text on primary */
+  --secondary: oklch(0.92 0.02 80); /* Light sand */
+  --secondary-foreground: oklch(0.25 0.02 40); /* Dark warm text */
+  --muted: oklch(0.9 0.015 75); /* Muted sand */
+  --muted-foreground: oklch(0.45 0.02 50); /* Medium warm text */
+  --accent: oklch(0.92 0.02 80); /* Light sand accent */
+  --accent-foreground: oklch(0.25 0.02 40); /* Dark warm text */
+  --destructive: oklch(0.55 0.25 25); /* Warm red */
+  --destructive-foreground: oklch(0.99 0.01 90); /* Light text */
+  --border: oklch(0.85 0.02 70); /* Warm border */
+  --input: oklch(0.88 0.02 75); /* Input background */
+  --ring: oklch(0.65 0.2 55); /* Focus ring color */
+  --radius: 0.625rem;
+  --chart-1: oklch(0.58 0.15 230); /* Blue */
+  --chart-2: oklch(0.58 0.15 145); /* Oasis green */
+  --chart-3: oklch(0.65 0.2 55); /* Orange */
+  --chart-4: oklch(0.55 0.18 30); /* Rose */
+  --chart-5: oklch(0.6 0.16 85); /* Golden sand */
+  --sidebar: oklch(0.95 0.02 80); /* Slightly darker sand */
+  --sidebar-foreground: oklch(0.25 0.02 40); /* Dark warm text */
+  --sidebar-primary: oklch(0.65 0.2 55); /* Primary accent */
+  --sidebar-primary-foreground: oklch(0.99 0.01 90); /* Light text */
+  --sidebar-accent: oklch(0.9 0.02 75); /* Light sand accent */
+  --sidebar-accent-foreground: oklch(0.25 0.02 40); /* Dark warm text */
+  --sidebar-border: oklch(0.85 0.02 70); /* Warm border */
+  --sidebar-ring: oklch(0.65 0.2 55); /* Focus ring */
+}
+
+.dark {
+  /* Default Dark Theme - using OKLCH color space */
+  --background: oklch(0.16 0.01 30); /* #151313 */
+  --foreground: oklch(0.85 0.02 90); /* #cdccc3 */
+  --card: oklch(0.19 0.01 40); /* #1C1B1A */
+  --card-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
+  --popover: oklch(0.24 0.01 40); /* #282726 */
+  --popover-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
+  --primary: oklch(0.77 0.17 85); /* #edb449 - golden sand */
+  --primary-foreground: oklch(0.16 0.01 30); /* #151313 */
+  --secondary: oklch(0.29 0.01 40); /* #343331 */
+  --secondary-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
+  --muted: oklch(0.33 0.01 40); /* #403E3C */
+  --muted-foreground: oklch(0.75 0.02 80); /* #b6b4ab */
+  --accent: oklch(0.29 0.01 40); /* #343331 */
+  --accent-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
+  --destructive: oklch(0.65 0.15 30); /* #d98678 */
+  --destructive-foreground: oklch(0.9 0.02 80); /* #e1dcd0 */
+  --border: oklch(0.31 0.01 35); /* #393836 */
+  --input: oklch(0.33 0.01 40); /* #403E3C */
+  --ring: oklch(0.77 0.17 85); /* #edb449 */
+  --chart-1: oklch(0.68 0.12 230); /* #5aa9d9 - blue */
+  --chart-2: oklch(0.68 0.12 145); /* #81af6c - green */
+  --chart-3: oklch(0.7 0.13 95); /* #c2974d - yellow */
+  --chart-4: oklch(0.65 0.14 45); /* #d8886d - coral */
+  --chart-5: oklch(0.68 0.12 55); /* #d29470 - orange */
+  --sidebar: oklch(0.16 0.01 30); /* #151313 */
+  --sidebar-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
+  --sidebar-primary: oklch(0.77 0.17 85); /* #edb449 */
+  --sidebar-primary-foreground: oklch(0.16 0.01 30); /* #151313 */
+  --sidebar-accent: oklch(0.24 0.01 40); /* #282726 */
+  --sidebar-accent-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
+  --sidebar-border: oklch(0.31 0.01 35); /* #393836 */
+  --sidebar-ring: oklch(0.77 0.17 85); /* #edb449 */
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+:root * {
+  border-color: rgba(194, 151, 77, 0.2); /* Warm golden sand borders for light mode */
+}
+
+.dark * {
+  border-color: rgba(57, 56, 54, 0.5); /* #393836 at 50% opacity */
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-status-success: var(--status-success);
+  --color-status-warning: var(--status-warning);
+  --color-status-error: var(--status-error);
+  --color-status-info: var(--status-info);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Markdown typography variables */
+  --markdown-body-font-size: var(--text-markdown);
+  --markdown-body-line-height: var(--markdown-body-line-height);
+  --markdown-h1-font-size: var(--text-markdown);
+  --markdown-h1-line-height: var(--markdown-h1-line-height);
+  --markdown-h2-font-size: var(--text-markdown);
+  --markdown-h2-line-height: var(--markdown-h2-line-height);
+  --markdown-h3-font-size: var(--text-markdown);
+  --markdown-h3-line-height: var(--markdown-h3-line-height);
+  --markdown-h4-font-size: var(--text-markdown);
+  --markdown-h4-line-height: var(--markdown-h4-line-height);
+  --markdown-h5-font-size: var(--text-markdown);
+  --markdown-h5-line-height: var(--markdown-h5-line-height);
+  --markdown-h6-font-size: var(--text-markdown);
+  --markdown-h6-line-height: var(--markdown-h6-line-height);
+  --markdown-list-font-size: var(--text-markdown);
+  --markdown-list-line-height: var(--markdown-list-line-height);
+  --markdown-code-block-font-size: var(--text-code);
+  --markdown-code-block-line-height: var(--markdown-code-block-line-height);
+
+  /* Markdown color variables */
+  --markdown-heading1: var(--markdown-heading1);
+  --markdown-heading2: var(--markdown-heading2);
+  --markdown-heading3: var(--markdown-heading3);
+  --markdown-heading4: var(--markdown-heading4);
+  --markdown-link: var(--markdown-link);
+  --markdown-link-hover: var(--markdown-link-hover);
+  --markdown-list-marker: var(--markdown-list-marker);
+  --markdown-inline-code: var(--markdown-inline-code);
+  --markdown-inline-code-bg: var(--markdown-inline-code-bg);
+  --markdown-blockquote: var(--markdown-blockquote);
+  --markdown-blockquote-border: var(--markdown-blockquote-border);
+
+  /* Markdown spacing defaults */
+  --markdown-paragraph-spacing: 0.35rem;
+  --markdown-heading-primary-top: 0.75rem;
+  --markdown-heading-primary-bottom: 0.35rem;
+  --markdown-heading-secondary-top: 0.6rem;
+  --markdown-heading-secondary-bottom: 0.3rem;
+  --markdown-blockquote-spacing: 0.6rem;
+  --markdown-blockquote-padding: 0.75rem;
+  --markdown-divider-spacing: 0.85rem;
+  --markdown-table-spacing: 0.9rem;
+  --markdown-heading1-size: var(--text-markdown);
+  --markdown-heading2-size: var(--text-markdown);
+  --markdown-heading3-size: var(--text-markdown);
+  --markdown-heading4-size: var(--text-markdown);
+  --markdown-heading5-size: var(--text-markdown);
+  --markdown-heading6-size: var(--text-markdown);
+  --font-sans: "IBM Plex Mono", "JetBrains Mono", "Fira Code", "SFMono-Regular", "Menlo", monospace;
+  --font-heading: var(--font-sans);
+  --font-mono: "IBM Plex Mono", "JetBrains Mono", "Fira Code", "SFMono-Regular", "Menlo", monospace;
+  --font-family-sans: var(--font-sans);
+  --font-family-mono: var(--font-mono);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-none;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+    font-weight: var(--ui-regular-font-weight, 400);
+  }
+
+  .font-sans {
+    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
+  }
+
+  .font-mono,
+  code,
+  pre {
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, 'Liberation Mono', Menlo, monospace) !important;
+  }
+
+  /* Remove focus rings globally */
+  *:focus {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  *:focus-visible {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+}
+
+/* Custom scrollbar styles */
+*::-webkit-scrollbar {
+  width: 10px !important;
+  height: 10px !important;
+  background: transparent;
+  -webkit-appearance: none;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--oc-scrollbar-thumb);
+  border-radius: 6px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--oc-scrollbar-thumb-hover);
+  background-clip: padding-box;
+}
+
+.dark {
+  --oc-scrollbar-thumb: oklch(0.6 0.02 80 / 0.3);
+  --oc-scrollbar-thumb-hover: oklch(0.6 0.02 80 / 0.5);
+}
+
+[data-scrollbar="chat"]::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+[data-scrollbar="chat"].chat-scroll,
+.chat-scroll {
+  scrollbar-gutter: stable both-edges;
+}
+
+html:not(.dark) .chat-scroll {
+  color-scheme: dark;
+}
+
+[data-scrollbar="chat"]::-webkit-scrollbar {
+  width: 10px !important;
+  height: 10px !important;
+  background: transparent !important;
+  -webkit-appearance: none;
+}
+
+[data-scrollbar="chat"].chat-scroll::-webkit-scrollbar,
+.chat-scroll::-webkit-scrollbar {
+  width: 10px !important;
+  height: 10px !important;
+}
+
+[data-scrollbar="chat"]::-webkit-scrollbar-track {
+  background: transparent !important;
+}
+
+[data-scrollbar="chat"].chat-scroll::-webkit-scrollbar-track,
+.chat-scroll::-webkit-scrollbar-track {
+  background: transparent !important;
+}
+
+[data-scrollbar="chat"]::-webkit-scrollbar-thumb {
+  background: var(--oc-scrollbar-thumb) !important;
+  border-radius: 6px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+[data-scrollbar="chat"].chat-scroll::-webkit-scrollbar-thumb,
+.chat-scroll::-webkit-scrollbar-thumb {
+  background: var(--oc-scrollbar-thumb) !important;
+  border-radius: 6px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+[data-scrollbar="chat"]::-webkit-scrollbar-thumb:hover {
+  background: var(--oc-scrollbar-thumb-hover) !important;
+  background-clip: padding-box;
+}
+
+[data-scrollbar="chat"].chat-scroll::-webkit-scrollbar-thumb:hover,
+.chat-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--oc-scrollbar-thumb-hover) !important;
+  background-clip: padding-box;
+}
+
+[data-scrollbar="chat"]::-webkit-scrollbar-corner {
+  background: transparent !important;
+}
+
+/* Hide native scrollbars for overlay targets (all browsers) */
+.overlay-scrollbar-target {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.overlay-scrollbar-target::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+}
+
+/* Firefox scrollbar support */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--oc-scrollbar-thumb) transparent;
+}
+
+.scrollbar-hidden {
+  scrollbar-width: none !important;
+}
+
+.scrollbar-hidden::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+}
+
+.dark * {
+  scrollbar-color: oklch(0.6 0.02 80 / 0.3) transparent;
+}
+
+/* Overlay scrollbar styling (custom thumb) */
+.overlay-scrollbar {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  z-index: 10;
+}
+
+.overlay-scrollbar--dense,
+.overlay-scrollbar--bottom-right,
+.overlay-scrollbar--zero,
+.overlay-scrollbar--flush {
+  /* no-op: positioning handled inline */
+}
+
+.overlay-scrollbar__thumb {
+  pointer-events: auto;
+  position: absolute;
+  width: 6px;
+  background: var(--oc-scrollbar-thumb);
+  border-radius: 9999px;
+  opacity: 0.8;
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+  will-change: transform, height;
+}
+
+.overlay-scrollbar__thumb:hover,
+.overlay-scrollbar__thumb:active {
+  background: var(--oc-scrollbar-thumb-hover);
+  opacity: 1;
+}
+
+.overlay-scrollbar__thumb--horizontal {
+  height: 6px;
+  margin: 0;
+}
+
+.overlay-scrollbar__thumb--vertical {
+  margin: 0;
+}
+
+/* Monaco diff editor scrollbar styling (match overlay look) */
+.monaco-diff-wrapper {
+  --vscode-scrollbarSlider-background: var(--oc-scrollbar-thumb);
+  --vscode-scrollbarSlider-hoverBackground: var(--oc-scrollbar-thumb-hover);
+  --vscode-scrollbarSlider-activeBackground: var(--oc-scrollbar-thumb-hover);
+  --vscode-scrollbar-background: transparent;
+  --vscode-scrollbar-shadow: transparent;
+}
+
+.monaco-diff-wrapper .monaco-scrollable-element > .scrollbar {
+  background: transparent;
+}
+
+.monaco-diff-wrapper .monaco-scrollable-element > .scrollbar > .slider {
+  border-radius: 9999px;
+}
+
+.monaco-diff-wrapper .monaco-scrollable-element > .scrollbar.vertical {
+  width: 6px !important;
+}
+
+.monaco-diff-wrapper .monaco-scrollable-element > .scrollbar.horizontal {
+  height: 6px !important;
+}
+
+.monaco-diff-wrapper .monaco-scrollable-element > .scrollbar.vertical > .slider {
+  width: 6px !important;
+}
+
+.monaco-diff-wrapper .monaco-scrollable-element > .scrollbar.horizontal > .slider {
+  height: 6px !important;
+}
+
+/* Overview ruler (change/minimap lane) width and padding */
+.monaco-diff-wrapper .decorationsOverviewRuler {
+  width: 6px !important;
+  right: 2px !important; /* small gap from editor edge */
+}
+
+/* Hide Monaco hover widgets globally (tooltips over buttons, etc.) */
+.monaco-hover,
+.monaco-editor .hoverWidget {
+  display: none !important;
+}
+
+/* Agent color system using theme variables */
+@layer components {
+  /* Agent color variants - each maps to theme colors */
+  .agent-primary {
+    --agent-color: var(--primary);
+    --agent-color-bg: var(--primary);
+  }
+
+  .agent-info {
+    --agent-color: var(--status-info);
+    --agent-color-bg: var(--status-info);
+  }
+
+  .agent-keyword {
+    --agent-color: var(--syntax-keyword);
+    --agent-color-bg: var(--syntax-keyword);
+  }
+
+  .agent-success {
+    --agent-color: var(--status-success);
+    --agent-color-bg: var(--status-success);
+  }
+
+  .agent-function {
+    --agent-color: var(--syntax-function);
+    --agent-color-bg: var(--syntax-function);
+  }
+
+  .agent-number {
+    --agent-color: var(--syntax-number);
+    --agent-color-bg: var(--syntax-number);
+  }
+
+  .agent-type {
+    --agent-color: var(--syntax-type);
+    --agent-color-bg: var(--syntax-type);
+  }
+
+  .agent-warning {
+    --agent-color: var(--status-warning);
+    --agent-color-bg: var(--status-warning);
+  }
+
+  .agent-variable {
+    --agent-color: var(--syntax-variable);
+    --agent-color-bg: var(--syntax-variable);
+  }
+
+  /* Apply colors with opacity for badges */
+  .agent-badge {
+    background: rgb(from var(--agent-color-bg) r g b / 0.1);
+    border: 1px solid rgb(from var(--agent-color) r g b / 0.2);
+    color: var(--agent-color);
+  }
+
+  .agent-badge:hover {
+    background: rgb(from var(--agent-color-bg) r g b / 0.15);
+    border-color: rgb(from var(--agent-color) r g b / 0.3);
+  }
+
+  /* Agent dot indicator */
+  .agent-dot {
+    background: var(--agent-color);
+  }
+
+  /* Agent list item */
+  .agent-list-item:hover {
+    background: rgb(from var(--agent-color-bg) r g b / 0.05);
+  }
+
+  .agent-list-item.active {
+    background: rgb(from var(--agent-color-bg) r g b / 0.1);
+    border-color: rgb(from var(--agent-color) r g b / 0.2);
+  }
+}
+
+/* Mobile Adaptations - All Devices */
+
+/* Set global device type variables */
+:root {
+  --is-mobile: 0;
+  --device-type: 'desktop';
+  --font-scale: 1;
+}
+
+@media (max-width: 1024px) {
+:root.mobile-pointer:not(.desktop-runtime) {
+    --is-mobile: 1;
+    --device-type: 'mobile';
+    --font-scale: 0.9;
+  }
+}
+
+/* Utility classes for device-specific styling */
+.desktop-only {
+  display: block;
+}
+
+.mobile-only {
+  display: none;
+}
+
+@media (max-width: 1024px) {
+  :root.mobile-pointer:not(.desktop-runtime) .desktop-only {
+    display: none !important;
+  }
+
+  :root.desktop-runtime .mobile-only {
+    display: none !important;
+  }
+
+  :root.mobile-pointer:not(.desktop-runtime) .mobile-only {
+    display: block !important;
+  }
+}
+
+/* General mobile improvements for all mobile devices */
+@media (max-width: 1024px) {
+  /* Override CSS custom properties for mobile */
+  :root.mobile-pointer:not(.desktop-runtime) {
+    --text-markdown: 1rem;
+    --text-code: 0.875rem;
+    --text-ui-header: 0.9375rem;
+    --text-ui-label: 0.875rem;
+    --text-meta: 0.875rem;
+    --text-micro: 0.8125rem;
+  }
+
+  /* Force override with higher specificity */
+  :root.mobile-pointer:not(.desktop-runtime) * {
+    --text-markdown: 1rem !important;
+    --text-code: 0.875rem !important;
+    --text-ui-header: 0.9375rem !important;
+    --text-ui-label: 0.875rem !important;
+    --text-meta: 0.875rem !important;
+    --text-micro: 0.8125rem !important;
+  }
+
+  /* Additional override for elements using typography classes */
+  :root.mobile-pointer:not(.desktop-runtime) .typography-markdown,
+  :root.mobile-pointer:not(.desktop-runtime) .typography-code,
+  :root.mobile-pointer:not(.desktop-runtime) .typography-ui-header,
+  :root.mobile-pointer:not(.desktop-runtime) .typography-ui-label,
+  :root.mobile-pointer:not(.desktop-runtime) .typography-meta,
+  :root.mobile-pointer:not(.desktop-runtime) .typography-micro {
+    font-size: unset !important;
+  }
+
+  /* Fix font size for tool displays */
+  :root.mobile-pointer:not(.desktop-runtime) [class*="tool"],
+  :root.mobile-pointer:not(.desktop-runtime) [class*="code"] {
+    --text-code: 0.875rem !important;
+    font-size: var(--text-code) !important;
+  }
+
+  /* Improve touch targets for mobile */
+  :root.mobile-pointer:not(.desktop-runtime) button,
+  :root.mobile-pointer:not(.desktop-runtime) .btn,
+  :root.mobile-pointer:not(.desktop-runtime) [role="button"] {
+    min-height: 36px;
+    min-width: 36px;
+  }
+
+  /* Improve input field touch targets */
+  :root.mobile-pointer:not(.desktop-runtime) input,
+  :root.mobile-pointer:not(.desktop-runtime) textarea,
+  :root.mobile-pointer:not(.desktop-runtime) select {
+    min-height: 36px;
+  }
+
+  /* Fix mobile text inputs */
+  :root.mobile-pointer:not(.desktop-runtime) input[type="text"],
+  :root.mobile-pointer:not(.desktop-runtime) input[type="search"],
+  :root.mobile-pointer:not(.desktop-runtime) input[type="email"],
+  :root.mobile-pointer:not(.desktop-runtime) input[type="password"],
+  :root.mobile-pointer:not(.desktop-runtime) textarea {
+    font-size: 16px !important; /* Prevents iOS zoom */
+  }
+
+  /* Prevent keyboard on non-input elements */
+  :root.mobile-pointer:not(.desktop-runtime)
+    button:not([type="submit"]):not([type="button"]):not([type="reset"]),
+  :root.mobile-pointer:not(.desktop-runtime) .btn,
+  :root.mobile-pointer:not(.desktop-runtime) [role="button"] {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /* Specific fix for session buttons */
+  :root.mobile-pointer:not(.desktop-runtime) button[inputmode="none"] {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+    pointer-events: auto;
+  }
+
+  /* Improve mobile spacing */
+  :root.mobile-pointer:not(.desktop-runtime) .px-4 {
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+  }
+
+  :root.mobile-pointer:not(.desktop-runtime) .py-2 {
+    padding-top: 0.75rem !important;
+    padding-bottom: 0.75rem !important;
+  }
+
+  /* Fix mobile scroll containers */
+  :root.mobile-pointer:not(.desktop-runtime) .overflow-hidden {
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Fix mobile viewport height */
+  :root.mobile-pointer:not(.desktop-runtime),
+  :root.mobile-pointer:not(.desktop-runtime) body {
+    height: 100%;
+    height: -webkit-fill-available;
+    overflow: hidden;
+  }
+
+  /* Fix main layout container */
+  :root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-screen {
+    height: 100vh;
+    height: -webkit-fill-available;
+    min-height: 0;
+  }
+
+  /* Fix header positioning */
+  :root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+  }
+
+  /* Fix main content area */
+  :root.mobile-pointer:not(.desktop-runtime) .flex-1.overflow-hidden {
+    min-height: 0;
+    flex: 1;
+  }
+
+  /* Fix chat container */
+  :root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-full {
+    height: 100%;
+    min-height: 0;
+  }
+
+  /* Ensure proper flex behavior */
+  :root.mobile-pointer:not(.desktop-runtime) .flex.flex-col {
+    min-height: 0;
+  }
+
+  /* Mobile sidebar positioning */
+  :root.mobile-pointer:not(.desktop-runtime) .mobile-sidebar-top {
+    top: var(--header-height, 3rem);
+    height: calc(100vh - var(--header-height, 3rem));
+  }
+
+  /* Set header height variable */
+  :root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
+    --header-height: 3rem;
+  }
+
+  /* For mobile devices with larger header */
+  @media (max-width: 768px) {
+    :root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
+      --header-height: 3.5rem;
+    }
+  }
+
+  /* For tablet devices */
+  @media (min-width: 769px) and (max-width: 1024px) {
+    :root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
+      --header-height: 3.25rem;
+    }
+  }
+}
+
+/* iOS PWA Adaptations */
+
+/* Phase 1: iOS PWA safe area handling - Enhanced positioning approach */
+@media (display-mode: standalone) {
+  /* iOS-specific safe area handling with CSS variable support */
+  @supports (-webkit-touch-callout: none) {
+    /* Safe area handling for fixed positioned elements */
+    :root {
+      --oc-safe-area-top: env(safe-area-inset-top, 0);
+      --oc-safe-area-right: env(safe-area-inset-right, 0);
+      --oc-safe-area-bottom: env(safe-area-inset-bottom, 0);
+      --oc-safe-area-bottom-visual: clamp(2px, calc(var(--oc-safe-area-bottom) * 0.1 + 2px), 10px);
+      --oc-safe-area-left: env(safe-area-inset-left, 0);
+    }
+
+    .header-safe-area {
+      padding-top: var(--oc-safe-area-top);
+    }
+
+    .main-content-safe-area {
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-left: var(--oc-safe-area-left);
+      padding-right: var(--oc-safe-area-right);
+    }
+
+    /* Safe area for bottom fixed/bottom-0 elements */
+    .bottom-safe-area {
+      padding-bottom: var(--oc-safe-area-bottom-visual) !important;
+    }
+
+    /* Ensure proper body spacing for iOS */
+    body {
+      min-height: 100vh;
+      min-height: -webkit-fill-available;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    /* Fix iOS viewport issues */
+    .flex.flex-col.h-screen {
+      min-height: 100vh;
+      min-height: -webkit-fill-available;
+    }
+
+    /* Prevent content overlap in iOS */
+    .flex-1.overflow-hidden {
+      position: relative;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    /* Update header height for iOS */
+    .header-safe-area {
+      --header-height: 4.5rem;
+    }
+
+    .mobile-sidebar-top {
+      --header-height: 4.5rem;
+    }
+
+    /* Mobile typography improvements */
+    .typography-markdown {
+      font-size: 1rem !important;
+    }
+
+    .typography-code {
+      font-size: 0.875rem !important;
+    }
+
+    .typography-ui-header {
+      font-size: 0.9375rem !important;
+    }
+
+    .typography-ui-label {
+      font-size: 0.875rem !important;
+    }
+
+    .typography-meta {
+      font-size: 0.875rem !important;
+    }
+
+    .typography-micro {
+      font-size: 0.8125rem !important;
+    }
+
+    /* Fix font size for tool displays */
+    [class*="tool"], [class*="code"] {
+      font-size: 0.875rem !important;
+    }
+  }
+
+  /* Fallback for non-iOS standalone mode */
+  @supports not (-webkit-touch-callout: none) {
+    :root {
+      --oc-safe-area-top: env(safe-area-inset-top, 0);
+      --oc-safe-area-right: env(safe-area-inset-right, 0);
+      --oc-safe-area-bottom: env(safe-area-inset-bottom, 0);
+      --oc-safe-area-bottom-visual: clamp(2px, calc(var(--oc-safe-area-bottom) * 0.1 + 2px), 10px);
+      --oc-safe-area-left: env(safe-area-inset-left, 0);
+    }
+
+    .header-safe-area {
+      padding-top: var(--oc-safe-area-top);
+    }
+
+    .main-content-safe-area {
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-left: var(--oc-safe-area-left);
+      padding-right: var(--oc-safe-area-right);
+    }
+
+    .bottom-safe-area {
+      padding-bottom: var(--oc-safe-area-bottom-visual) !important;
+    }
+  }
+}
+
+/* Phase 6: Home indicator blur gradient fix */
+@media (display-mode: standalone) and (max-width: 768px) {
+  .pwa-dialog-content {
+    --pwa-dialog-padding: clamp(0.75rem, 3vw, 1.25rem);
+    top: calc(50% + (var(--oc-safe-area-top, 0px) * 0.22));
+    max-height: calc(100vh - var(--oc-safe-area-top, 0px) - var(--oc-safe-area-bottom-visual, 0px) - 20px);
+    padding: var(--pwa-dialog-padding);
+    padding-top: calc(var(--pwa-dialog-padding) + (var(--oc-safe-area-top, 0px) * 0.35));
+    --tw-translate-y: calc(-50% + (var(--oc-safe-area-top, 0px) * 0.6));
+    row-gap: clamp(0.75rem, 2vw, 1.25rem);
+  }
+
+  .pwa-dialog-content.pwa-compact {
+    --pwa-dialog-padding: clamp(0.5rem, 2vw, 0.85rem);
+    row-gap: clamp(0.45rem, 1.5vw, 0.8rem);
+  }
+
+  .pwa-dialog-content [data-slot="dialog-close"] {
+    top: calc(0.25rem + (var(--oc-safe-area-top, 0px) * 0.35));
+    right: var(--pwa-dialog-padding);
+  }
+
+  .pwa-dialog-content.pwa-compact [data-slot="dialog-close"] {
+    top: calc(0.2rem + (var(--oc-safe-area-top, 0px) * 0.3));
+  }
+
+  .pwa-dialog-content .settings-page-body {
+    max-width: 100%;
+    padding: 0.75rem 1rem;
+    row-gap: 0;
+  }
+
+  .pwa-dialog-content .settings-page-body > :not([hidden]) ~ :not([hidden]) {
+    margin-top: 0.85rem;
+  }
+
+  .pwa-dialog-content .directory-dialog-body {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .pwa-dialog-content .directory-dialog-body .directory-grid {
+    gap: 0.6rem;
+  }
+
+  .pwa-overlay-panel {
+    margin-bottom: max(var(--oc-safe-area-bottom-visual, 0px), 12px);
+    padding-bottom: calc(var(--oc-safe-area-bottom-visual, 0px) * 0.4);
+  }
+
+  .pwa-overlay-panel .pwa-overlay-scroll {
+    padding-bottom: calc(var(--oc-safe-area-bottom-visual, 0px) + 12px);
+  }
+}
+
+@media (display-mode: standalone) {
+  /* Home indicator blur overlay */
+  body::after {
+    content: '';
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--oc-safe-area-bottom-visual, var(--oc-safe-area-bottom, env(safe-area-inset-bottom, 0)));
+    background: linear-gradient(
+      to top,
+      var(--background) 0%,
+      var(--background) 30%,
+      rgba(from var(--background) r g b / 0.8) 60%,
+      rgba(from var(--background) r g b / 0.3) 85%,
+      transparent 100%
+    );
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    z-index: 1000;
+    pointer-events: none;
+  }
+
+  /* Fallback for browsers without rgba(from ...) support */
+  @supports not (color: rgba(from white r g b / 0.5)) {
+    body::after {
+      background: linear-gradient(
+        to top,
+        var(--background) 0%,
+        var(--background) 30%,
+        rgba(21, 19, 19, 0.8) 60%,  /* Dark theme fallback */
+        rgba(21, 19, 19, 0.3) 85%,
+        transparent 100%
+      );
+    }
+
+    /* Light theme fallback */
+    :root body::after {
+      background: linear-gradient(
+        to top,
+        var(--background) 0%,
+        var(--background) 30%,
+        rgba(248, 247, 243, 0.8) 60%,  /* Light theme fallback */
+        rgba(248, 247, 243, 0.3) 85%,
+        transparent 100%
+      );
+    }
+  }
+}
+
+/* ============================================
+   Streamdown Styles
+   Minimal overrides - fonts only, using Streamdown defaults
+   ============================================ */
+
+/* Text font: IBM Plex Sans */
+.streamdown-content {
+  font-family: var(--font-sans);
+}
+
+/* Code font: IBM Plex Mono */
+.streamdown-content code,
+.streamdown-content pre {
+  font-family: var(--font-mono);
+}
+
+/* Fix list styling - override Tailwind reset */
+.streamdown-content ul {
+  list-style-type: disc;
+  list-style-position: outside;
+  padding-left: 1.5em;
+}
+
+.streamdown-content ol {
+  list-style-type: decimal;
+  list-style-position: outside;
+  padding-left: 1.5em;
+}
+
+.streamdown-content li {
+  display: list-item;
+}
+
+/* Reduce code block header height */
+[data-streamdown="code-block-header"] {
+  padding: 0.375rem 0.75rem;
+}
diff --git a/packages/ui/src/lib/agentColors.ts b/packages/ui/src/lib/agentColors.ts
new file mode 100644
index 00000000..81a28704
--- /dev/null
+++ b/packages/ui/src/lib/agentColors.ts
@@ -0,0 +1,37 @@
+
+
+const AGENT_COLOR_PALETTE = [
+  { var: '--status-success', class: 'agent-success' },
+  { var: '--syntax-keyword', class: 'agent-keyword' },
+  { var: '--syntax-type', class: 'agent-type' },
+  { var: '--syntax-function', class: 'agent-function' },
+  { var: '--syntax-number', class: 'agent-number' },
+  { var: '--status-info', class: 'agent-info' },
+  { var: '--status-warning', class: 'agent-warning' },
+  { var: '--syntax-variable', class: 'agent-variable' },
+];
+
+export function getAgentColor(agentName: string | undefined) {
+
+  if (!agentName) {
+    return AGENT_COLOR_PALETTE[0];
+  }
+
+  if (agentName === 'build') {
+    return AGENT_COLOR_PALETTE[0];
+  }
+
+  let hash = 0;
+  for (let i = 0; i < agentName.length; i++) {
+    const char = agentName.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash;
+  }
+
+  const paletteIndex = 1 + (Math.abs(hash) % (AGENT_COLOR_PALETTE.length - 1));
+  return AGENT_COLOR_PALETTE[paletteIndex];
+}
+
+export function getAgentColorPalette() {
+  return AGENT_COLOR_PALETTE;
+}
\ No newline at end of file
diff --git a/packages/ui/src/lib/api/types.ts b/packages/ui/src/lib/api/types.ts
new file mode 100644
index 00000000..9827f667
--- /dev/null
+++ b/packages/ui/src/lib/api/types.ts
@@ -0,0 +1,396 @@
+import type { WorktreeMetadata } from '@/types/worktree';
+
+export type RuntimePlatform = 'web' | 'desktop';
+
+export interface RuntimeDescriptor {
+  platform: RuntimePlatform;
+
+  isDesktop: boolean;
+
+  label?: string;
+}
+
+export interface ApiError {
+  message: string;
+  code?: string;
+  cause?: unknown;
+}
+
+export interface Subscription {
+
+  close: () => void;
+}
+
+export interface RetryPolicy {
+  maxRetries: number;
+  initialDelayMs: number;
+  maxDelayMs: number;
+}
+
+export interface TerminalSession {
+  sessionId: string;
+  cols: number;
+  rows: number;
+}
+
+export interface TerminalStreamEvent {
+  type: 'connected' | 'data' | 'exit' | 'reconnecting';
+  data?: string;
+  exitCode?: number;
+  signal?: number | null;
+  attempt?: number;
+  maxAttempts?: number;
+}
+
+export interface CreateTerminalOptions {
+  cwd: string;
+  cols?: number;
+  rows?: number;
+}
+
+export interface TerminalStreamOptions {
+  retry?: Partial<RetryPolicy>;
+  connectionTimeoutMs?: number;
+}
+
+export interface ResizeTerminalPayload {
+  sessionId: string;
+  cols: number;
+  rows: number;
+}
+
+export interface TerminalHandlers {
+  onEvent: (event: TerminalStreamEvent) => void;
+  onError?: (error: Error, fatal?: boolean) => void;
+}
+
+export interface TerminalAPI {
+  createSession(options: CreateTerminalOptions): Promise<TerminalSession>;
+  connect(sessionId: string, handlers: TerminalHandlers, options?: TerminalStreamOptions): Subscription;
+  sendInput(sessionId: string, input: string): Promise<void>;
+  resize(payload: ResizeTerminalPayload): Promise<void>;
+  close(sessionId: string): Promise<void>;
+}
+
+export interface GitStatusFile {
+  path: string;
+  index: string;
+  working_dir: string;
+}
+
+export interface GitStatus {
+  current: string;
+  tracking: string | null;
+  ahead: number;
+  behind: number;
+  files: GitStatusFile[];
+  isClean: boolean;
+  diffStats?: Record<string, { insertions: number; deletions: number }>;
+}
+
+export interface GitDiffResponse {
+  diff: string;
+}
+
+export interface GetGitDiffOptions {
+  path: string;
+  staged?: boolean;
+  contextLines?: number;
+}
+
+export interface GitFileDiffResponse {
+  original: string;
+  modified: string;
+  path: string;
+}
+
+export interface GetGitFileDiffOptions {
+  path: string;
+  staged?: boolean;
+}
+
+export interface GitBranchDetails {
+  current: boolean;
+  name: string;
+  commit: string;
+  label: string;
+  tracking?: string;
+  ahead?: number;
+  behind?: number;
+}
+
+export interface GitBranch {
+  all: string[];
+  current: string;
+  branches: Record<string, GitBranchDetails>;
+}
+
+export interface GitCommitSummary {
+  changes: number;
+  insertions: number;
+  deletions: number;
+}
+
+export interface GitCommitResult {
+  success: boolean;
+  commit: string;
+  branch: string;
+  summary: GitCommitSummary;
+}
+
+export interface GitPushResult {
+  success: boolean;
+  pushed: Array<{
+    local: string;
+    remote: string;
+  }>;
+  repo: string;
+  ref: unknown;
+}
+
+export interface GitPullResult {
+  success: boolean;
+  summary: GitCommitSummary;
+  files: string[];
+  insertions: number;
+  deletions: number;
+}
+
+export interface GitIdentityProfile {
+  id: string;
+  name: string;
+  userName: string;
+  userEmail: string;
+  sshKey?: string | null;
+  color?: string | null;
+  icon?: string | null;
+}
+
+export interface GitIdentitySummary {
+  userName: string | null;
+  userEmail: string | null;
+  sshCommand: string | null;
+}
+
+export interface GitLogEntry {
+  hash: string;
+  date: string;
+  message: string;
+  refs: string;
+  body: string;
+  author_name: string;
+  author_email: string;
+  filesChanged: number;
+  insertions: number;
+  deletions: number;
+}
+
+export interface GitLogResponse {
+  all: GitLogEntry[];
+  latest: GitLogEntry | null;
+  total: number;
+}
+
+export interface CommitFileEntry {
+  path: string;
+  insertions: number;
+  deletions: number;
+  isBinary: boolean;
+  changeType: 'A' | 'M' | 'D' | 'R' | 'C' | string;
+}
+
+export interface GitCommitFilesResponse {
+  files: CommitFileEntry[];
+}
+
+export interface GitWorktreeInfo {
+  worktree: string;
+  head?: string;
+  branch?: string;
+}
+
+export interface GitAddWorktreePayload {
+  path: string;
+  branch: string;
+  createBranch?: boolean;
+}
+
+export interface GitRemoveWorktreePayload {
+  path: string;
+  force?: boolean;
+}
+
+export interface GitDeleteBranchPayload {
+  branch: string;
+  force?: boolean;
+}
+
+export interface GitDeleteRemoteBranchPayload {
+  branch: string;
+  remote?: string;
+}
+
+export interface CreateGitCommitOptions {
+  addAll?: boolean;
+  files?: string[];
+}
+
+export interface GitLogOptions {
+  maxCount?: number;
+  from?: string;
+  to?: string;
+  file?: string;
+}
+
+export interface GeneratedCommitMessage {
+  subject: string;
+  highlights: string[];
+}
+
+export interface GitAPI {
+  checkIsGitRepository(directory: string): Promise<boolean>;
+  getGitStatus(directory: string): Promise<GitStatus>;
+  getGitDiff(directory: string, options: GetGitDiffOptions): Promise<GitDiffResponse>;
+  getGitFileDiff(directory: string, options: GetGitFileDiffOptions): Promise<GitFileDiffResponse>;
+  revertGitFile(directory: string, filePath: string): Promise<void>;
+  isLinkedWorktree(directory: string): Promise<boolean>;
+  getGitBranches(directory: string): Promise<GitBranch>;
+  deleteGitBranch(directory: string, payload: GitDeleteBranchPayload): Promise<{ success: boolean }>;
+  deleteRemoteBranch(directory: string, payload: GitDeleteRemoteBranchPayload): Promise<{ success: boolean }>;
+  generateCommitMessage(directory: string, files: string[]): Promise<{ message: GeneratedCommitMessage }>;
+  listGitWorktrees(directory: string): Promise<GitWorktreeInfo[]>;
+  addGitWorktree(directory: string, payload: GitAddWorktreePayload): Promise<{ success: boolean; path: string; branch: string }>;
+  removeGitWorktree(directory: string, payload: GitRemoveWorktreePayload): Promise<{ success: boolean }>;
+  ensureOpenChamberIgnored(directory: string): Promise<void>;
+  createGitCommit(directory: string, message: string, options?: CreateGitCommitOptions): Promise<GitCommitResult>;
+  gitPush(directory: string, options?: { remote?: string; branch?: string; options?: string[] | Record<string, unknown> }): Promise<GitPushResult>;
+  gitPull(directory: string, options?: { remote?: string; branch?: string }): Promise<GitPullResult>;
+  gitFetch(directory: string, options?: { remote?: string; branch?: string }): Promise<{ success: boolean }>;
+  checkoutBranch(directory: string, branch: string): Promise<{ success: boolean; branch: string }>;
+  createBranch(directory: string, name: string, startPoint?: string): Promise<{ success: boolean; branch: string }>;
+  getGitLog(directory: string, options?: GitLogOptions): Promise<GitLogResponse>;
+  getCommitFiles(directory: string, hash: string): Promise<GitCommitFilesResponse>;
+  getCurrentGitIdentity(directory: string): Promise<GitIdentitySummary | null>;
+  setGitIdentity(directory: string, profileId: string): Promise<{ success: boolean; profile: GitIdentityProfile }>;
+  getGitIdentities(): Promise<GitIdentityProfile[]>;
+  createGitIdentity(profile: GitIdentityProfile): Promise<GitIdentityProfile>;
+  updateGitIdentity(id: string, updates: GitIdentityProfile): Promise<GitIdentityProfile>;
+  deleteGitIdentity(id: string): Promise<void>;
+}
+
+export interface FileListEntry {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  size?: number;
+  modifiedTime?: number;
+}
+
+export interface DirectoryListResult {
+  directory: string;
+  entries: FileListEntry[];
+}
+
+export interface FileSearchQuery {
+  directory: string;
+  query: string;
+  maxResults?: number;
+}
+
+export interface FileSearchResult {
+  path: string;
+  score?: number;
+  preview?: string[];
+}
+
+export interface FilesAPI {
+  listDirectory(path: string): Promise<DirectoryListResult>;
+  search(payload: FileSearchQuery): Promise<FileSearchResult[]>;
+  createDirectory(path: string): Promise<{ success: boolean; path: string }>;
+}
+
+export interface SettingsPayload {
+  themeId?: string;
+  useSystemTheme?: boolean;
+  themeVariant?: 'light' | 'dark';
+  lightThemeId?: string;
+  darkThemeId?: string;
+  lastDirectory?: string;
+  homeDirectory?: string;
+  approvedDirectories?: string[];
+  securityScopedBookmarks?: string[];
+  pinnedDirectories?: string[];
+  showReasoningTraces?: boolean;
+
+  [key: string]: unknown;
+}
+
+export interface SettingsLoadResult {
+  settings: SettingsPayload;
+  source: 'desktop' | 'web';
+}
+
+export interface SettingsAPI {
+  load(): Promise<SettingsLoadResult>;
+  save(changes: Partial<SettingsPayload>): Promise<SettingsPayload>;
+
+  restartOpenCode?: () => Promise<{ restarted: boolean }>;
+}
+
+export interface DirectoryPermissionRequest {
+  path: string;
+}
+
+export interface DirectoryPermissionResult {
+  success: boolean;
+  path?: string;
+  error?: string;
+}
+
+export interface StartAccessingResult {
+  success: boolean;
+  error?: string;
+}
+
+export interface PermissionsAPI {
+  requestDirectoryAccess(request: DirectoryPermissionRequest): Promise<DirectoryPermissionResult>;
+  startAccessingDirectory(path: string): Promise<StartAccessingResult>;
+  stopAccessingDirectory(path: string): Promise<StartAccessingResult>;
+}
+
+export interface NotificationPayload {
+  title?: string;
+  body?: string;
+
+  tag?: string;
+}
+
+export interface NotificationsAPI {
+  notifyAgentCompletion(payload?: NotificationPayload): Promise<boolean>;
+  canNotify?: () => boolean | Promise<boolean>;
+}
+
+export interface DiagnosticsAPI {
+  downloadLogs(): Promise<{ fileName: string; content: string }>;
+}
+
+export interface ToolsAPI {
+
+  getAvailableTools(): Promise<string[]>;
+}
+
+export interface RuntimeAPIs {
+  runtime: RuntimeDescriptor;
+  terminal: TerminalAPI;
+  git: GitAPI;
+  files: FilesAPI;
+  settings: SettingsAPI;
+  permissions: PermissionsAPI;
+  notifications: NotificationsAPI;
+  diagnostics?: DiagnosticsAPI;
+  tools: ToolsAPI;
+
+  worktrees?: WorktreeMetadata[];
+}
+
+export type RuntimeAPISelector<TValue> = (apis: RuntimeAPIs) => TValue;
diff --git a/packages/ui/src/lib/appearanceAutoSave.ts b/packages/ui/src/lib/appearanceAutoSave.ts
new file mode 100644
index 00000000..23ce4a2e
--- /dev/null
+++ b/packages/ui/src/lib/appearanceAutoSave.ts
@@ -0,0 +1,59 @@
+import { useUIStore } from '@/stores/useUIStore';
+import { updateDesktopSettings } from '@/lib/persistence';
+import type { DesktopSettings } from '@/lib/desktop';
+
+type AppearanceSlice = {
+  showReasoningTraces: boolean;
+};
+
+let initialized = false;
+
+export const startAppearanceAutoSave = (): void => {
+  if (initialized || typeof window === 'undefined') {
+    return;
+  }
+
+  initialized = true;
+
+  let previous: AppearanceSlice = {
+    showReasoningTraces: useUIStore.getState().showReasoningTraces,
+  };
+
+  let pending: Partial<DesktopSettings> | null = null;
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  const flush = () => {
+    const payload = pending;
+    pending = null;
+    timer = null;
+    if (payload && Object.keys(payload).length > 0) {
+      void updateDesktopSettings(payload);
+    }
+  };
+
+  const schedule = (changes: Partial<DesktopSettings>) => {
+    pending = { ...(pending ?? {}), ...changes };
+    if (timer) {
+      return;
+    }
+    timer = setTimeout(flush, 150);
+  };
+
+  useUIStore.subscribe((state) => {
+    const current: AppearanceSlice = {
+      showReasoningTraces: state.showReasoningTraces,
+    };
+
+    const diff: Partial<DesktopSettings> = {};
+
+    if (current.showReasoningTraces !== previous.showReasoningTraces) {
+      diff.showReasoningTraces = current.showReasoningTraces;
+    }
+
+    previous = current;
+
+    if (Object.keys(diff).length > 0) {
+      schedule(diff);
+    }
+  });
+};
diff --git a/packages/ui/src/lib/appearancePersistence.ts b/packages/ui/src/lib/appearancePersistence.ts
new file mode 100644
index 00000000..d4cb231d
--- /dev/null
+++ b/packages/ui/src/lib/appearancePersistence.ts
@@ -0,0 +1,100 @@
+import { isDesktopRuntime } from '@/lib/desktop';
+import { useUIStore } from '@/stores/useUIStore';
+
+export interface AppearancePreferences {
+  showReasoningTraces?: boolean;
+}
+
+type RawAppearancePayload = {
+  showReasoningTraces?: unknown;
+};
+
+const sanitizePreferences = (payload?: RawAppearancePayload | null): AppearancePreferences | null => {
+  if (!payload || typeof payload !== 'object') {
+    return null;
+  }
+
+  const result: AppearancePreferences = {};
+
+  if (typeof payload.showReasoningTraces === 'boolean') {
+    result.showReasoningTraces = payload.showReasoningTraces;
+  }
+
+  return Object.keys(result).length > 0 ? result : null;
+};
+
+const extractRawAppearance = (data: unknown): RawAppearancePayload | null => {
+  if (!data || typeof data !== 'object') {
+    return null;
+  }
+
+  const candidate = data as Record<string, unknown>;
+  const payload: RawAppearancePayload = {
+    showReasoningTraces: candidate.showReasoningTraces,
+  };
+
+  return payload;
+};
+
+export const saveAppearancePreferences = (preferences: AppearancePreferences): boolean => {
+  if (typeof window === 'undefined' || !isDesktopRuntime()) {
+    return false;
+  }
+
+  const api = window.opencodeAppearance;
+  if (!api || typeof api.save !== 'function') {
+    return false;
+  }
+
+  try {
+    void api.save(preferences);
+    return true;
+  } catch (error) {
+    console.warn('Failed to save appearance preferences to desktop storage:', error);
+    return false;
+  }
+};
+
+export const applyAppearancePreferences = (preferences: AppearancePreferences): void => {
+  const store = useUIStore.getState();
+
+  if (typeof preferences.showReasoningTraces === 'boolean') {
+    store.setShowReasoningTraces(preferences.showReasoningTraces);
+  }
+};
+
+export const loadAppearancePreferences = async (): Promise<AppearancePreferences | null> => {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  if (isDesktopRuntime()) {
+    const api = window.opencodeAppearance;
+    if (!api || typeof api.load !== 'function') {
+      return null;
+    }
+
+    try {
+      const raw = await api.load();
+      const payload = typeof raw === 'object' && raw !== null ? (raw as RawAppearancePayload) : null;
+      return sanitizePreferences(payload);
+    } catch (error) {
+      console.warn('Failed to load appearance preferences from desktop storage:', error);
+      return null;
+    }
+  }
+
+  const stored = localStorage.getItem('appearance-preferences');
+  if (!stored) {
+    return null;
+  }
+
+  try {
+    const data = JSON.parse(stored) as unknown;
+    const payload = extractRawAppearance(data);
+    return sanitizePreferences(payload);
+  } catch (error) {
+    console.warn('Failed to parse stored appearance preferences:', error);
+    return null;
+  }
+};
diff --git a/packages/ui/src/lib/codeTheme.ts b/packages/ui/src/lib/codeTheme.ts
new file mode 100644
index 00000000..5b7eb0a3
--- /dev/null
+++ b/packages/ui/src/lib/codeTheme.ts
@@ -0,0 +1,352 @@
+
+export const defaultCodeDark = {
+  'code[class*="language-"]': {
+    color: '#cdccc3',
+    background: 'transparent',
+    fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+    fontSize: '1em',
+    textAlign: 'left' as const,
+    whiteSpace: 'pre',
+    wordSpacing: 'normal',
+    wordBreak: 'normal' as const,
+    wordWrap: 'normal' as const,
+    lineHeight: '1.5',
+    MozTabSize: '4',
+    OTabSize: '4',
+    tabSize: '4',
+    WebkitHyphens: 'none' as const,
+    MozHyphens: 'none' as const,
+    msHyphens: 'none' as const,
+    hyphens: 'none' as const,
+  },
+  'pre[class*="language-"]': {
+    color: '#cdccc3',
+    background: 'transparent',
+    fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+    fontSize: '1em',
+    textAlign: 'left' as const,
+    whiteSpace: 'pre',
+    wordSpacing: 'normal',
+    wordBreak: 'normal' as const,
+    wordWrap: 'normal' as const,
+    lineHeight: '1.5',
+    MozTabSize: '4',
+    OTabSize: '4',
+    tabSize: '4',
+    WebkitHyphens: 'none' as const,
+    MozHyphens: 'none' as const,
+    msHyphens: 'none' as const,
+    hyphens: 'none' as const,
+    padding: '1em',
+    margin: '0',
+    overflow: 'auto',
+  },
+  comment: {
+    color: '#6b6964',
+    fontStyle: 'italic',
+  },
+  prolog: {
+    color: '#6b6964',
+  },
+  doctype: {
+    color: '#6b6964',
+  },
+  cdata: {
+    color: '#6b6964',
+  },
+  punctuation: {
+    color: '#6b6963',
+  },
+  property: {
+    color: '#d29470',
+  },
+  tag: {
+    color: '#d8886d',
+  },
+  boolean: {
+    color: '#d39373',
+  },
+  number: {
+    color: '#d39373',
+  },
+  constant: {
+    color: '#6cacd6',
+  },
+  symbol: {
+    color: '#6cacd6',
+  },
+  deleted: {
+    color: '#d98678',
+  },
+  selector: {
+    color: '#81af6c',
+  },
+  'attr-name': {
+    color: '#c2974d',
+  },
+  string: {
+    color: '#81af6c',
+  },
+  char: {
+    color: '#81af6c',
+  },
+  builtin: {
+    color: '#5aa9d9',
+  },
+  inserted: {
+    color: '#81af6c',
+  },
+  operator: {
+    color: '#d29470',
+  },
+  entity: {
+    color: '#edb449',
+    cursor: 'help',
+  },
+  url: {
+    color: '#5aa9d9',
+  },
+  '.language-css .token.string': {
+    color: '#81af6c',
+  },
+  '.style .token.string': {
+    color: '#81af6c',
+  },
+  variable: {
+    color: '#d29470',
+  },
+  atrule: {
+    color: '#c2974d',
+  },
+  'attr-value': {
+    color: '#81af6c',
+  },
+  function: {
+    color: '#5aa9d9',
+  },
+  'class-name': {
+    color: '#c2974d',
+  },
+  keyword: {
+    color: '#d8886d',
+  },
+  regex: {
+    color: '#81af6c',
+  },
+  important: {
+    color: '#d8886d',
+    fontWeight: 'bold',
+  },
+  bold: {
+    fontWeight: 'bold',
+  },
+  italic: {
+    fontStyle: 'italic',
+  },
+  namespace: {
+    opacity: 0.7,
+  },
+
+  title: {
+    color: '#edb449',
+    fontWeight: 'bold',
+  },
+  'code-block': {
+    color: '#81af6c',
+  },
+  'code-snippet': {
+    color: '#81af6c',
+  },
+  list: {
+    color: '#d29470',
+  },
+  hr: {
+    color: '#6b6963',
+  },
+  table: {
+    color: '#5aa9d9',
+  },
+  blockquote: {
+    color: '#6b6964',
+    fontStyle: 'italic',
+  },
+  strike: {
+    textDecoration: 'line-through',
+  },
+};
+
+export const defaultCodeLight = {
+  'code[class*="language-"]': {
+    color: '#403e3c',
+    background: 'transparent',
+    fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+    fontSize: '1em',
+    textAlign: 'left' as const,
+    whiteSpace: 'pre',
+    wordSpacing: 'normal',
+    wordBreak: 'normal' as const,
+    wordWrap: 'normal' as const,
+    lineHeight: '1.5',
+    MozTabSize: '4',
+    OTabSize: '4',
+    tabSize: '4',
+    WebkitHyphens: 'none' as const,
+    MozHyphens: 'none' as const,
+    msHyphens: 'none' as const,
+    hyphens: 'none' as const,
+  },
+  'pre[class*="language-"]': {
+    color: '#403e3c',
+    background: 'transparent',
+    fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+    fontSize: '1em',
+    textAlign: 'left' as const,
+    whiteSpace: 'pre',
+    wordSpacing: 'normal',
+    wordBreak: 'normal' as const,
+    wordWrap: 'normal' as const,
+    lineHeight: '1.5',
+    MozTabSize: '4',
+    OTabSize: '4',
+    tabSize: '4',
+    WebkitHyphens: 'none' as const,
+    MozHyphens: 'none' as const,
+    msHyphens: 'none' as const,
+    hyphens: 'none' as const,
+    padding: '1em',
+    margin: '0',
+    overflow: 'auto',
+  },
+  comment: {
+    color: '#7a756a',
+    fontStyle: 'italic',
+  },
+  prolog: {
+    color: '#7a756a',
+  },
+  doctype: {
+    color: '#7a756a',
+  },
+  cdata: {
+    color: '#7a756a',
+  },
+  punctuation: {
+    color: '#6b6963',
+  },
+  property: {
+    color: '#c07845',
+  },
+  tag: {
+    color: '#b96f55',
+  },
+  boolean: {
+    color: '#b97659',
+  },
+  number: {
+    color: '#b97659',
+  },
+  constant: {
+    color: '#4791ba',
+  },
+  symbol: {
+    color: '#4791ba',
+  },
+  deleted: {
+    color: '#c15748',
+  },
+  selector: {
+    color: '#6a9354',
+  },
+  'attr-name': {
+    color: '#9f7d3e',
+  },
+  string: {
+    color: '#6a9354',
+  },
+  char: {
+    color: '#6a9354',
+  },
+  builtin: {
+    color: '#4791ba',
+  },
+  inserted: {
+    color: '#6a9354',
+  },
+  operator: {
+    color: '#c07845',
+  },
+  entity: {
+    color: '#d09930',
+    cursor: 'help',
+  },
+  url: {
+    color: '#4791ba',
+  },
+  '.language-css .token.string': {
+    color: '#6a9354',
+  },
+  '.style .token.string': {
+    color: '#6a9354',
+  },
+  variable: {
+    color: '#c07845',
+  },
+  atrule: {
+    color: '#9f7d3e',
+  },
+  'attr-value': {
+    color: '#6a9354',
+  },
+  function: {
+    color: '#4791ba',
+  },
+  'class-name': {
+    color: '#9f7d3e',
+  },
+  keyword: {
+    color: '#b96f55',
+  },
+  regex: {
+    color: '#6a9354',
+  },
+  important: {
+    color: '#b96f55',
+    fontWeight: 'bold',
+  },
+  bold: {
+    fontWeight: 'bold',
+  },
+  italic: {
+    fontStyle: 'italic',
+  },
+  namespace: {
+    opacity: 0.7,
+  },
+
+  title: {
+    color: '#d09930',
+    fontWeight: 'bold',
+  },
+  'code-block': {
+    color: '#6a9354',
+  },
+  'code-snippet': {
+    color: '#6a9354',
+  },
+  list: {
+    color: '#c07845',
+  },
+  hr: {
+    color: '#6b6963',
+  },
+  table: {
+    color: '#4791ba',
+  },
+  blockquote: {
+    color: '#7a756a',
+    fontStyle: 'italic',
+  },
+  strike: {
+    textDecoration: 'line-through',
+  },
+};
\ No newline at end of file
diff --git a/packages/ui/src/lib/configSync.ts b/packages/ui/src/lib/configSync.ts
new file mode 100644
index 00000000..794a8cbe
--- /dev/null
+++ b/packages/ui/src/lib/configSync.ts
@@ -0,0 +1,62 @@
+export type ConfigChangeScope = "agents" | "providers" | "commands" | "all";
+
+export interface ConfigChangeEvent {
+  scopes: ConfigChangeScope[];
+  source?: string;
+  timestamp: number;
+}
+
+type ConfigChangeListener = (event: ConfigChangeEvent) => void | Promise<void>;
+
+const listeners = new Set<ConfigChangeListener>();
+
+export function subscribeToConfigChanges(
+  listener: ConfigChangeListener,
+): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function emitConfigChange(
+  scopes: ConfigChangeScope | ConfigChangeScope[],
+  options?: { source?: string },
+): void {
+  const normalized = Array.isArray(scopes) ? scopes : [scopes];
+  const uniqueScopes = Array.from(new Set(normalized));
+
+  if (uniqueScopes.length === 0) {
+    return;
+  }
+
+  if (uniqueScopes.includes("all")) {
+    uniqueScopes.splice(0, uniqueScopes.length, "all");
+  }
+
+  const event: ConfigChangeEvent = {
+    scopes: uniqueScopes,
+    source: options?.source,
+    timestamp: Date.now(),
+  };
+
+  for (const listener of listeners) {
+    try {
+      const result = listener(event);
+      if (result instanceof Promise) {
+        result.catch((error) => {
+          console.error("[ConfigSync] Async listener failed:", error);
+        });
+      }
+    } catch (error) {
+      console.error("[ConfigSync] Listener threw:", error);
+    }
+  }
+}
+
+export function scopeMatches(
+  event: ConfigChangeEvent,
+  scope: ConfigChangeScope,
+): boolean {
+  return event.scopes.includes("all") || event.scopes.includes(scope);
+}
diff --git a/packages/ui/src/lib/configUpdate.ts b/packages/ui/src/lib/configUpdate.ts
new file mode 100644
index 00000000..4567f7fe
--- /dev/null
+++ b/packages/ui/src/lib/configUpdate.ts
@@ -0,0 +1,69 @@
+const DEFAULT_MESSAGE = "Updating OpenCode configuration...";
+
+type ConfigUpdateListener = (state: {
+  isUpdating: boolean;
+  message: string;
+}) => void;
+
+let pendingCount = 0;
+let currentMessage = DEFAULT_MESSAGE;
+const listeners = new Set<ConfigUpdateListener>();
+
+function notify() {
+  const snapshot = {
+    isUpdating: pendingCount > 0,
+    message: currentMessage,
+  };
+  listeners.forEach((listener) => listener(snapshot));
+}
+
+export function startConfigUpdate(message?: string) {
+  pendingCount += 1;
+  if (pendingCount === 1) {
+    currentMessage = message || DEFAULT_MESSAGE;
+    notify();
+  } else if (message) {
+    currentMessage = message;
+    notify();
+  }
+}
+
+export function finishConfigUpdate() {
+  if (pendingCount === 0) {
+    return;
+  }
+
+  pendingCount -= 1;
+  if (pendingCount === 0) {
+    currentMessage = DEFAULT_MESSAGE;
+    notify();
+  }
+}
+
+export function updateConfigUpdateMessage(message: string) {
+  if (currentMessage === message && pendingCount > 0) {
+    return;
+  }
+  currentMessage = message;
+  if (pendingCount > 0) {
+    notify();
+  }
+}
+
+export function subscribeConfigUpdate(listener: ConfigUpdateListener) {
+  listeners.add(listener);
+  listener({
+    isUpdating: pendingCount > 0,
+    message: currentMessage,
+  });
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function getConfigUpdateSnapshot() {
+  return {
+    isUpdating: pendingCount > 0,
+    message: currentMessage,
+  };
+}
diff --git a/packages/ui/src/lib/debug.ts b/packages/ui/src/lib/debug.ts
new file mode 100644
index 00000000..92bb2dbc
--- /dev/null
+++ b/packages/ui/src/lib/debug.ts
@@ -0,0 +1,488 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useSessionStore } from '@/stores/useSessionStore';
+
+export interface DebugMessageInfo {
+  messageId: string;
+  role: string;
+  timestamp: number;
+  partsCount: number;
+  parts: Array<{
+    id: string;
+    type: string;
+    text?: string;
+    textLength?: number;
+    tool?: string;
+    state?: any;
+  }>;
+  isEmpty: boolean;
+  isEmptyResponse: boolean;
+  raw: any;
+}
+
+export const debugUtils = {
+
+  getLastAssistantMessage(): DebugMessageInfo | null {
+    const state = useSessionStore.getState();
+    const currentSessionId = state.currentSessionId;
+
+    if (!currentSessionId) {
+      console.log('[ERROR] No active session');
+      return null;
+    }
+
+    const messages = state.messages.get(currentSessionId);
+    if (!messages || messages.length === 0) {
+      console.log('[ERROR] No messages in current session');
+      return null;
+    }
+
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const msg = messages[i];
+      if (msg.info.role === 'assistant') {
+        const parts = msg.parts.map((part: any) => {
+          const info: any = {
+            id: part.id,
+            type: part.type,
+          };
+
+          if (part.type === 'text') {
+            info.text = part.text;
+            info.textLength = part.text?.length || 0;
+          } else if (part.type === 'tool') {
+            info.tool = part.tool;
+            info.state = part.state?.status;
+          } else if (part.type === 'step-start' || part.type === 'step-finish') {
+            info.isStepMarker = true;
+          }
+
+          return info;
+        });
+
+         const hasText = parts.some((p: any) => p.type === 'text' && p.text && p.text.trim().length > 0);
+        const hasTools = parts.some((p: any) => p.type === 'tool');
+        const hasStepMarkers = parts.some((p: any) => p.type === 'step-start' || p.type === 'step-finish');
+        const isEmpty = parts.length === 0;
+        const isEmptyResponse = !hasText && !hasTools && (!isEmpty || hasStepMarkers);
+
+        const info: DebugMessageInfo = {
+          messageId: msg.info.id,
+          role: msg.info.role,
+          timestamp: msg.info.time?.created || 0,
+          partsCount: parts.length,
+          parts,
+          isEmpty,
+          isEmptyResponse,
+          raw: msg,
+        };
+
+        console.log('[INSPECT] Last Assistant Message:', info);
+        console.log('[SUMMARY] Summary:', {
+          messageId: info.messageId,
+          partsCount: info.partsCount,
+          isEmpty: info.isEmpty,
+          isEmptyResponse: info.isEmptyResponse,
+          hasText,
+          hasTools,
+          hasStepMarkers,
+          onlyStepMarkers: hasStepMarkers && !hasText && !hasTools,
+        });
+
+        if (info.isEmpty) {
+          console.warn('[WARNING] Message has NO parts!');
+        }
+
+        if (info.isEmptyResponse) {
+          console.warn('[WARNING] Message has parts but NO meaningful content (empty text, no tools)!');
+
+          if (hasStepMarkers && !hasText && !hasTools) {
+            console.warn('[CRITICAL] CLAUDE EMPTY RESPONSE BUG: Only step-start/step-finish markers, no actual content!');
+            console.log('This is a known issue with Claude models (anthropic provider)');
+            console.log('Recommendation: Send a follow-up message or try a different model');
+          }
+        }
+
+        return info;
+      }
+    }
+
+    console.log('[ERROR] No assistant messages found in current session');
+    return null;
+  },
+
+  truncateString(value: string | undefined, maxLength: number = 80): string | undefined {
+    if (!value || typeof value !== 'string') return value;
+    if (value.length <= maxLength) return value;
+    return value.substring(0, maxLength) + '…';
+  },
+
+  truncateMessages(messages: any[]): any[] {
+    return messages.map((msg) => ({
+      ...msg,
+      parts: (msg.parts || []).map((part: any) => {
+        const truncatedPart: any = { ...part };
+
+        if ('text' in part) {
+          truncatedPart.text = this.truncateString(part.text);
+        }
+        if ('textPreview' in part) {
+          truncatedPart.textPreview = this.truncateString(part.textPreview);
+        }
+
+        if (part.state) {
+          truncatedPart.state = { ...part.state };
+
+          if ('output' in part.state) {
+            truncatedPart.state.output = this.truncateString(part.state.output);
+          }
+          if ('error' in part.state) {
+            truncatedPart.state.error = this.truncateString(part.state.error);
+          }
+          if (part.state.metadata && 'preview' in part.state.metadata) {
+            truncatedPart.state.metadata = {
+              ...part.state.metadata,
+              preview: this.truncateString(part.state.metadata.preview),
+            };
+          }
+        }
+
+        return truncatedPart;
+      }),
+    }));
+  },
+
+  getAllMessages(truncate: boolean = false) {
+    const state = useSessionStore.getState();
+    const currentSessionId = state.currentSessionId;
+
+    if (!currentSessionId) {
+      console.log('[ERROR] No active session');
+      return [];
+    }
+
+    const messages = state.messages.get(currentSessionId) || [];
+    console.log(`[MESSAGES] Total messages in session: ${messages.length}`);
+
+    messages.forEach((msg, idx) => {
+      console.log(`[${idx}] ${msg.info.role} - ${msg.info.id} - ${msg.parts.length} parts`);
+    });
+
+    return truncate ? this.truncateMessages(messages) : messages;
+  },
+
+   checkLastMessage() {
+    const info = this.getLastAssistantMessage();
+    if (!info) return false;
+
+    const isProblematic = info.isEmpty || info.isEmptyResponse;
+
+    if (isProblematic) {
+      console.error('[ALERT] PROBLEMATIC MESSAGE DETECTED!');
+      console.log('Details:', {
+        messageId: info.messageId,
+        isEmpty: info.isEmpty,
+        isEmptyResponse: info.isEmptyResponse,
+        partsCount: info.partsCount,
+      });
+
+      if (info.parts.length > 0) {
+        console.log('Parts:', info.parts);
+      }
+    } else {
+      console.log('[OK] Last message looks good!');
+    }
+
+    return isProblematic;
+  },
+
+  getStreamingState() {
+    const state = useSessionStore.getState();
+    const currentStreamingId = state.currentSessionId
+      ? state.streamingMessageIds.get(state.currentSessionId) ?? null
+      : null;
+    console.log('[STREAM] Streaming State:', {
+      streamingMessageId: currentStreamingId,
+      streamingMessageIds: Array.from(state.streamingMessageIds.entries()),
+      messageStreamStates: Array.from(state.messageStreamStates.entries()),
+    });
+    return {
+      streamingMessageId: currentStreamingId,
+      streamingMessageIds: state.streamingMessageIds,
+      streamStates: state.messageStreamStates,
+    };
+  },
+
+  findEmptyMessages() {
+    const state = useSessionStore.getState();
+    const currentSessionId = state.currentSessionId;
+
+    if (!currentSessionId) {
+      console.log('[ERROR] No active session');
+      return [];
+    }
+
+    const messages = state.messages.get(currentSessionId) || [];
+    const emptyMessages = messages
+      .filter((msg) => msg.info.role === 'assistant')
+      .filter((msg) => {
+        const parts = msg.parts || [];
+        const hasTextContent = parts.some(
+          (p: any) => p.type === 'text' && p.text && p.text.trim().length > 0
+        );
+        const hasTools = parts.some((p: any) => p.type === 'tool');
+
+        return parts.length === 0 || (!hasTextContent && !hasTools);
+      });
+
+    console.log(`[INSPECT] Found ${emptyMessages.length} empty assistant messages`);
+
+    emptyMessages.forEach((msg, idx) => {
+      console.log(`[${idx}] Empty message:`, {
+        messageId: msg.info.id,
+        partsCount: msg.parts.length,
+        provider: (msg.info as any).providerID,
+        model: (msg.info as any).modelID,
+        timestamp: msg.info.time?.created,
+      });
+    });
+
+    return emptyMessages;
+  },
+
+   showRetryHelp() {
+     console.log('[DEBUG] How to handle empty Claude responses:\n');
+     console.log('1. Check the last message:');
+    console.log('   __opencodeDebug.getLastAssistantMessage()\n');
+    console.log('2. Find all empty messages in session:');
+    console.log('   __opencodeDebug.findEmptyMessages()\n');
+    console.log('3. To retry, you can:');
+    console.log('   - Edit your last user message and resend');
+    console.log('   - Send a follow-up message like "Please provide the response"');
+    console.log('   - Try a different model (OpenAI models tend to be more reliable)\n');
+    console.log('[TIP] Empty responses are usually due to:');
+    console.log('   - Model rate limits');
+    console.log('   - Context length issues');
+    console.log('   - Model refusing to respond to certain prompts');
+    console.log('   - API errors from provider');
+  },
+
+  analyzeMessageCompletionConsistency(options: {
+    includeNonAssistant?: boolean;
+    verbose?: boolean;
+    maxTableRows?: number;
+  } = {}) {
+    const { includeNonAssistant = false, verbose = true, maxTableRows = 25 } = options;
+    const state = useSessionStore.getState();
+    const currentSessionId = state.currentSessionId;
+
+    if (!currentSessionId) {
+      console.log('[ERROR] No active session');
+      return { summary: null, rows: [] };
+    }
+
+    const messages = state.messages.get(currentSessionId) || [];
+    const targetMessages = includeNonAssistant
+      ? messages
+      : messages.filter((msg) => msg.info.role === 'assistant');
+
+    const summary = {
+      totalMessages: messages.length,
+      analyzedMessages: targetMessages.length,
+      completedMissing: 0,
+      completedBeforeTool: 0,
+      completedBeforeReasoning: 0,
+      runningToolsWhenCompleted: 0,
+      reasoningOpenWhenCompleted: 0,
+      withTools: 0,
+      withReasoning: 0,
+    };
+
+    const toNumber = (value: unknown): number | null =>
+      typeof value === 'number' && Number.isFinite(value) ? value : null;
+
+    const getLatestTimestamp = (timestamps: Array<number | null>): number | null => {
+      const filtered = timestamps.filter((value): value is number => typeof value === 'number');
+      return filtered.length > 0 ? Math.max(...filtered) : null;
+    };
+
+    const rows = targetMessages.map((message, index) => {
+      const info = message.info ?? {};
+      const parts = Array.isArray(message.parts) ? message.parts : [];
+
+      const timeInfo = (info.time ?? {}) as { completed?: number };
+      const completedAt = toNumber(timeInfo.completed);
+      const hasCompleted = completedAt !== null;
+
+      const toolParts = parts.filter((part: any) => part.type === 'tool');
+      const reasoningParts = parts.filter((part: any) => part.type === 'reasoning');
+
+      const latestToolTimestamp = getLatestTimestamp(
+        toolParts.map((part: any) =>
+          toNumber(part.state?.time?.end ?? part.state?.time?.start)
+        )
+      );
+      const latestReasoningTimestamp = getLatestTimestamp(
+        reasoningParts.map((part: any) => toNumber(part.time?.end ?? part.time?.start))
+      );
+      const latestPartTimestamp = getLatestTimestamp(
+        [latestToolTimestamp, latestReasoningTimestamp].filter((value) => value !== null)
+      );
+
+      const hasRunningTool = toolParts.some((part: any) =>
+        ['pending', 'running', 'started'].includes(part.state?.status)
+      );
+      const reasoningIncomplete = reasoningParts.some(
+        (part: any) => typeof part.time?.end !== 'number'
+      );
+
+      if (toolParts.length > 0) {
+        summary.withTools += 1;
+      }
+      if (reasoningParts.length > 0) {
+        summary.withReasoning += 1;
+      }
+
+      if (!hasCompleted) {
+        summary.completedMissing += 1;
+      }
+
+      const completedBeforeTool = Boolean(
+        hasCompleted &&
+        typeof latestToolTimestamp === 'number' &&
+        completedAt! < latestToolTimestamp
+      );
+      if (completedBeforeTool) {
+        summary.completedBeforeTool += 1;
+      }
+
+      const completedBeforeReasoning = Boolean(
+        hasCompleted &&
+        typeof latestReasoningTimestamp === 'number' &&
+        completedAt! < latestReasoningTimestamp
+      );
+      if (completedBeforeReasoning) {
+        summary.completedBeforeReasoning += 1;
+      }
+
+      if (hasCompleted && hasRunningTool) {
+        summary.runningToolsWhenCompleted += 1;
+      }
+      if (hasCompleted && reasoningIncomplete) {
+        summary.reasoningOpenWhenCompleted += 1;
+      }
+
+      return {
+        index,
+        messageId: info.id,
+        role: info.role,
+        completedAt,
+        latestToolTimestamp,
+        latestReasoningTimestamp,
+        latestPartTimestamp,
+        completed_missing: !hasCompleted,
+        completed_before_tool: completedBeforeTool,
+        completed_before_reasoning: completedBeforeReasoning,
+        running_tools_when_completed: Boolean(hasCompleted && hasRunningTool),
+        reasoning_open_when_completed: Boolean(hasCompleted && reasoningIncomplete),
+        has_tools: toolParts.length > 0,
+        has_reasoning: reasoningParts.length > 0,
+      };
+    });
+
+    if (verbose) {
+      console.table(rows.slice(0, maxTableRows));
+      if (rows.length > maxTableRows) {
+        console.log(`Displayed first ${maxTableRows} rows out of ${rows.length}.`);
+      }
+      console.log('[SUMMARY] Message completion timing:', summary);
+    }
+
+    return { summary, rows };
+  },
+
+   checkCompletionStatus() {
+    const state = useSessionStore.getState();
+    const currentSessionId = state.currentSessionId;
+
+    if (!currentSessionId) {
+      console.log('[ERROR] No active session');
+      return null;
+    }
+
+    const messages = state.messages.get(currentSessionId) || [];
+    const assistantMessages = messages.filter(m => m.info.role === 'assistant');
+
+    if (assistantMessages.length === 0) {
+      console.log('[ERROR] No assistant messages');
+      return null;
+    }
+
+    const lastMessage = assistantMessages[assistantMessages.length - 1];
+    const stepFinishParts = lastMessage.parts.filter((p: any) => p.type === 'step-finish');
+    const hasStopReason = lastMessage.parts.some((p: any) => p.type === 'step-finish' && p.reason === 'stop');
+
+    const timeInfo = lastMessage.info.time as any;
+    const completedAt = timeInfo?.completed;
+    const messageStatus = (lastMessage.info as any).status;
+    const hasCompletedFlag = (typeof completedAt === 'number' && completedAt > 0) || messageStatus === 'completed';
+    const messageIsComplete = Boolean(hasCompletedFlag && hasStopReason);
+
+     const messageStreamStates = state.messageStreamStates;
+    const streamingMessageId = (lastMessage.info as { sessionID?: string }).sessionID
+      ? state.streamingMessageIds.get((lastMessage.info as { sessionID?: string }).sessionID as string) ?? null
+      : null;
+    const lifecycle = messageStreamStates.get(lastMessage.info.id);
+    const isStreamingCandidate = lastMessage.info.id === streamingMessageId;
+
+    console.log('[SUMMARY] Completion Status:');
+    console.log('Message ID:', lastMessage.info.id);
+    console.log('time.completed:', completedAt, '(type:', typeof completedAt, ')');
+    console.log('status:', messageStatus);
+    console.log('hasCompletedFlag:', hasCompletedFlag);
+    console.log('hasStopReason:', hasStopReason);
+    console.log('messageIsComplete:', messageIsComplete);
+    console.log('lifecycle phase:', lifecycle?.phase);
+    console.log('isStreamingCandidate:', isStreamingCandidate);
+    console.log('streamingMessageId:', streamingMessageId);
+    console.log('Step-finish parts:', stepFinishParts);
+
+    return {
+      messageId: lastMessage.info.id,
+      completed: completedAt,
+      status: messageStatus,
+      hasCompletedFlag,
+      hasStopReason,
+      messageIsComplete,
+      stepFinishParts,
+      raw: lastMessage,
+    };
+  },
+};
+
+if (typeof window !== 'undefined') {
+  (window as any).__opencodeDebug = debugUtils;
+  console.log('[DEBUG] OpenCode Debug Utils loaded! Use window.__opencodeDebug in console');
+  console.log('Available commands:');
+  console.log('  __opencodeDebug.getLastAssistantMessage() - Get last assistant message details');
+  console.log('  __opencodeDebug.getAllMessages(truncate?) - List all messages (truncate=true for short preview)');
+  console.log('  __opencodeDebug.truncateMessages(messages) - Truncate long fields in messages array');
+   console.log('  __opencodeDebug.checkLastMessage() - Check if last message is problematic');
+   console.log('  __opencodeDebug.findEmptyMessages() - Find all empty assistant messages');
+   console.log('  __opencodeDebug.showRetryHelp() - Show instructions for handling empty responses');
+  console.log('  __opencodeDebug.getStreamingState() - Get streaming state info');
+  console.log('  __opencodeDebug.analyzeMessageCompletionConsistency(opts?) - Compare time.completed vs part timings');
+  console.log('  __opencodeDebug.checkCompletionStatus() - Check completion status of last message');
+
+  window.addEventListener('error', (event) => {
+    try {
+      const message = event.message || '';
+      const source = event.filename || '';
+      if (
+        typeof message === 'string' &&
+        message.includes("this._renderer.value.dimensions") &&
+        /xterm/i.test(String(source))
+      ) {
+        event.preventDefault();
+      }
+    } catch { /* ignored */ }
+  });
+}
diff --git a/packages/ui/src/lib/desktop.ts b/packages/ui/src/lib/desktop.ts
new file mode 100644
index 00000000..8a372baa
--- /dev/null
+++ b/packages/ui/src/lib/desktop.ts
@@ -0,0 +1,276 @@
+export type AssistantNotificationPayload = {
+  title?: string;
+  body?: string;
+};
+
+export type UpdateInfo = {
+  available: boolean;
+  version?: string;
+  currentVersion: string;
+  body?: string;
+  date?: string;
+};
+
+export type UpdateProgress = {
+  downloaded: number;
+  total?: number;
+};
+
+export type DesktopServerInfo = {
+  webPort: number | null;
+  openCodePort: number | null;
+  host: string | null;
+  ready: boolean;
+  cliAvailable: boolean;
+};
+
+export type DesktopSettings = {
+  themeId?: string;
+  useSystemTheme?: boolean;
+  themeVariant?: 'light' | 'dark';
+  lightThemeId?: string;
+  darkThemeId?: string;
+  lastDirectory?: string;
+  homeDirectory?: string;
+  approvedDirectories?: string[];
+  securityScopedBookmarks?: string[];
+  pinnedDirectories?: string[];
+  showReasoningTraces?: boolean;
+};
+
+export type DesktopSettingsApi = {
+  getSettings: () => Promise<DesktopSettings>;
+  updateSettings: (changes: Partial<DesktopSettings>) => Promise<DesktopSettings>;
+};
+
+export type DesktopApi = {
+  homeDirectory?: string;
+  getServerInfo: () => Promise<DesktopServerInfo>;
+  restartOpenCode: () => Promise<{ success: boolean }>;
+  shutdown: () => Promise<{ success: boolean }>;
+  markRendererReady?: () => Promise<void> | void;
+  windowControl?: (action: 'close' | 'minimize' | 'maximize') => Promise<{ success: boolean }>;
+  getHomeDirectory?: () => Promise<{ success: boolean; path: string | null }>;
+  getSettings?: () => Promise<DesktopSettings>;
+  updateSettings?: (changes: Partial<DesktopSettings>) => Promise<DesktopSettings>;
+  requestDirectoryAccess?: (path: string) => Promise<{ success: boolean; path?: string; error?: string }>;
+  startAccessingDirectory?: (path: string) => Promise<{ success: boolean; error?: string }>;
+  stopAccessingDirectory?: (path: string) => Promise<{ success: boolean; error?: string }>;
+  notifyAssistantCompletion?: (payload?: AssistantNotificationPayload) => Promise<{ success: boolean }>;
+  checkForUpdates?: () => Promise<UpdateInfo>;
+  downloadUpdate?: (onProgress?: (progress: UpdateProgress) => void) => Promise<void>;
+  restartToUpdate?: () => Promise<void>;
+};
+
+export const isDesktopRuntime = (): boolean =>
+  typeof window !== "undefined" && typeof window.opencodeDesktop !== "undefined";
+
+export const getDesktopApi = (): DesktopApi | null => {
+  if (!isDesktopRuntime()) {
+    return null;
+  }
+  return window.opencodeDesktop ?? null;
+};
+
+export const getDesktopSettingsApi = (): DesktopSettingsApi | null => {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  if (window.opencodeDesktopSettings) {
+    return window.opencodeDesktopSettings;
+  }
+  const base = window.opencodeDesktop;
+  if (base?.getSettings && base?.updateSettings) {
+    return {
+      getSettings: base.getSettings.bind(base),
+      updateSettings: base.updateSettings.bind(base)
+    };
+  }
+  return null;
+};
+
+export const getDesktopHomeDirectory = async (): Promise<string | null> => {
+  const api = getDesktopApi();
+
+  if (typeof window !== 'undefined') {
+    const embedded = window.__OPENCHAMBER_HOME__;
+    if (embedded && embedded.length > 0) {
+      return embedded;
+    }
+  }
+
+  if (!api) {
+    return null;
+  }
+
+  if (typeof api.homeDirectory === 'string' && api.homeDirectory.length > 0) {
+    return api.homeDirectory;
+  }
+
+  try {
+    if (!api.getHomeDirectory) {
+      return null;
+    }
+    const result = await api.getHomeDirectory();
+    if (result?.success && typeof result.path === 'string' && result.path.length > 0) {
+      return result.path;
+    }
+  } catch (error) {
+    console.warn('Failed to obtain desktop home directory:', error);
+  }
+
+  return null;
+};
+
+export const fetchDesktopServerInfo = async (): Promise<DesktopServerInfo | null> => {
+  const api = getDesktopApi();
+  if (!api) {
+    return null;
+  }
+
+  try {
+    return await api.getServerInfo();
+  } catch (error) {
+    console.warn("Failed to read desktop server info", error);
+    return null;
+  }
+};
+
+export const isCliAvailable = (): boolean => {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+  return window.__OPENCHAMBER_DESKTOP_SERVER__?.cliAvailable ?? false;
+};
+
+export const getDesktopSettings = async (): Promise<DesktopSettings | null> => {
+  const api = getDesktopSettingsApi();
+  if (!api) {
+    return null;
+  }
+  try {
+    return await api.getSettings();
+  } catch (error) {
+    console.warn('Failed to read desktop settings', error);
+    return null;
+  }
+};
+
+export const updateDesktopSettings = async (
+  changes: Partial<DesktopSettings>
+): Promise<DesktopSettings | null> => {
+  const api = getDesktopSettingsApi();
+  if (!api) {
+    return null;
+  }
+  try {
+    return await api.updateSettings(changes);
+  } catch (error) {
+    console.warn('[desktop] Failed to update desktop settings', error);
+    return null;
+  }
+};
+
+export const requestDirectoryAccess = async (
+  directoryPath: string
+): Promise<{ success: boolean; path?: string; error?: string }> => {
+  const api = getDesktopApi();
+  if (!api || !api.requestDirectoryAccess) {
+    return { success: true, path: directoryPath };
+  }
+  try {
+    return await api.requestDirectoryAccess(directoryPath);
+  } catch (error) {
+    console.warn('Failed to request directory access', error);
+    return { success: false, error: error instanceof Error ? error.message : String(error) };
+  }
+};
+
+export const startAccessingDirectory = async (
+  directoryPath: string
+): Promise<{ success: boolean; error?: string }> => {
+  const api = getDesktopApi();
+  if (!api || !api.startAccessingDirectory) {
+    return { success: true };
+  }
+  try {
+    return await api.startAccessingDirectory(directoryPath);
+  } catch (error) {
+    console.warn('Failed to start accessing directory', error);
+    return { success: false, error: error instanceof Error ? error.message : String(error) };
+  }
+};
+
+export const stopAccessingDirectory = async (
+  directoryPath: string
+): Promise<{ success: boolean; error?: string }> => {
+  const api = getDesktopApi();
+  if (!api || !api.stopAccessingDirectory) {
+    return { success: true };
+  }
+  try {
+    return await api.stopAccessingDirectory(directoryPath);
+  } catch (error) {
+    console.warn('Failed to stop accessing directory', error);
+    return { success: false, error: error instanceof Error ? error.message : String(error) };
+  }
+};
+
+export const sendAssistantCompletionNotification = async (
+  payload?: AssistantNotificationPayload
+): Promise<boolean> => {
+  const api = getDesktopApi();
+  if (!api || !api.notifyAssistantCompletion) {
+    return false;
+  }
+  try {
+    const result = await api.notifyAssistantCompletion(payload ?? {});
+    return Boolean(result?.success);
+  } catch (error) {
+    console.warn('Failed to send assistant completion notification', error);
+    return false;
+  }
+};
+
+export const checkForDesktopUpdates = async (): Promise<UpdateInfo | null> => {
+  const api = getDesktopApi();
+  if (!api || !api.checkForUpdates) {
+    return null;
+  }
+  try {
+    return await api.checkForUpdates();
+  } catch (error) {
+    console.warn('Failed to check for updates', error);
+    return null;
+  }
+};
+
+export const downloadDesktopUpdate = async (
+  onProgress?: (progress: UpdateProgress) => void
+): Promise<boolean> => {
+  const api = getDesktopApi();
+  if (!api || !api.downloadUpdate) {
+    return false;
+  }
+  try {
+    await api.downloadUpdate(onProgress);
+    return true;
+  } catch (error) {
+    console.warn('Failed to download update', error);
+    return false;
+  }
+};
+
+export const restartToApplyUpdate = async (): Promise<boolean> => {
+  const api = getDesktopApi();
+  if (!api || !api.restartToUpdate) {
+    return false;
+  }
+  try {
+    await api.restartToUpdate();
+    return true;
+  } catch (error) {
+    console.warn('Failed to restart for update', error);
+    return false;
+  }
+};
diff --git a/packages/ui/src/lib/device.ts b/packages/ui/src/lib/device.ts
new file mode 100644
index 00000000..a6b42748
--- /dev/null
+++ b/packages/ui/src/lib/device.ts
@@ -0,0 +1,211 @@
+import React from 'react';
+
+export type DeviceType = 'desktop' | 'mobile' | 'tablet';
+
+export interface DeviceInfo {
+  isMobile: boolean;
+  isTablet: boolean;
+  isDesktop: boolean;
+  deviceType: DeviceType;
+  screenWidth: number;
+  breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  hasTouchInput: boolean;
+}
+
+export const CSS_DEVICE_VARIABLES = {
+  IS_MOBILE: 'var(--is-mobile)',
+  DEVICE_TYPE: 'var(--device-type)',
+  HAS_TOUCH_INPUT: 'var(--has-touch-input)',
+} as const;
+
+export const BREAKPOINTS = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+} as const;
+
+const setRootDeviceAttributes = (
+  isDesktopRuntime: boolean,
+  deviceType: DeviceType,
+  hasTouchInput: boolean,
+) => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const root = document.documentElement;
+  const isMobile = deviceType === 'mobile';
+  const isTablet = deviceType === 'tablet';
+
+  if (isDesktopRuntime) {
+    root.classList.add('desktop-runtime');
+    root.style.setProperty('--is-mobile', '0');
+    root.style.setProperty('--device-type', 'desktop');
+    root.style.setProperty('--font-scale', '1');
+    root.style.setProperty('--has-coarse-pointer', '0');
+    root.style.setProperty('--has-touch-input', '0');
+    root.classList.remove('mobile-pointer');
+  } else {
+    root.classList.remove('desktop-runtime');
+    root.style.setProperty('--is-mobile', isMobile ? '1' : '0');
+    root.style.setProperty('--device-type', deviceType);
+    root.style.setProperty('--font-scale', isMobile ? '0.9' : isTablet ? '0.95' : '1');
+    root.style.setProperty('--has-coarse-pointer', hasTouchInput ? '1' : '0');
+    root.style.setProperty('--has-touch-input', hasTouchInput ? '1' : '0');
+    if (hasTouchInput) {
+      root.classList.add('mobile-pointer');
+    } else {
+      root.classList.remove('mobile-pointer');
+    }
+  }
+};
+
+export function getDeviceInfo(): DeviceInfo {
+  const width = window.innerWidth;
+  const supportsMatchMedia = typeof window.matchMedia === 'function';
+  const pointerQuery = supportsMatchMedia ? window.matchMedia('(pointer: coarse)') : null;
+  const hoverQuery = supportsMatchMedia ? window.matchMedia('(hover: none)') : null;
+  const prefersCoarsePointer = pointerQuery?.matches ?? false;
+  const noHover = hoverQuery?.matches ?? false;
+  const maxTouchPoints = typeof navigator !== 'undefined' ? navigator.maxTouchPoints ?? 0 : 0;
+
+  const isDesktopRuntime = typeof window !== 'undefined' && typeof window.opencodeDesktop !== 'undefined';
+
+  const hasTouchInput = prefersCoarsePointer || noHover || maxTouchPoints > 0;
+
+  const isTabletWidth = width > BREAKPOINTS.md && width <= BREAKPOINTS.lg;
+  const isMobileWidth = width <= BREAKPOINTS.md;
+
+  let isMobile = hasTouchInput && isMobileWidth;
+  let isTablet = hasTouchInput && !isMobile && isTabletWidth;
+  let isDesktop = !hasTouchInput || width > BREAKPOINTS.lg;
+  let deviceType: DeviceType = 'desktop';
+
+  if (isDesktopRuntime) {
+    isMobile = false;
+    isTablet = false;
+    isDesktop = true;
+    deviceType = 'desktop';
+  } else if (isMobile) {
+    deviceType = 'mobile';
+  } else if (isTablet) {
+    deviceType = 'tablet';
+  } else {
+    isDesktop = true;
+    deviceType = 'desktop';
+  }
+
+  setRootDeviceAttributes(isDesktopRuntime, deviceType, hasTouchInput);
+
+  let breakpoint: keyof typeof BREAKPOINTS = 'xs';
+  for (const [key, value] of Object.entries(BREAKPOINTS)) {
+    if (width >= value) {
+      breakpoint = key as keyof typeof BREAKPOINTS;
+    }
+  }
+
+  return {
+    isMobile,
+    isTablet,
+    isDesktop,
+    deviceType,
+    screenWidth: width,
+    breakpoint,
+    hasTouchInput,
+  };
+}
+
+export function isMobileDeviceViaCSS(): boolean {
+  if (typeof window === 'undefined') return false;
+
+  if (typeof window.opencodeDesktop !== 'undefined') {
+    return false;
+  }
+
+  const root = document.documentElement;
+  const isMobileValue = root.style.getPropertyValue('--is-mobile') ||
+                        getComputedStyle(root).getPropertyValue('--is-mobile');
+
+  return isMobileValue === '1' || isMobileValue === 'true';
+}
+
+export function useDeviceInfo(): DeviceInfo {
+  const [deviceInfo, setDeviceInfo] = React.useState<DeviceInfo>(() => {
+    if (typeof window === 'undefined') {
+      return {
+        isMobile: false,
+        isTablet: false,
+        isDesktop: true,
+        deviceType: 'desktop',
+        screenWidth: 1024,
+        breakpoint: 'lg',
+        hasTouchInput: false,
+      };
+    }
+    return getDeviceInfo();
+  });
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleResize = () => {
+      setDeviceInfo(getDeviceInfo());
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return;
+    }
+
+    const pointerQuery = window.matchMedia('(pointer: coarse)');
+    const hoverQuery = window.matchMedia('(hover: none)');
+
+    const handlePointerChange = () => {
+      setDeviceInfo(getDeviceInfo());
+    };
+
+    const cleanups: Array<() => void> = [];
+
+    const attachListener = (query: MediaQueryList | null) => {
+      if (!query) {
+        return;
+      }
+      if (typeof query.addEventListener === 'function') {
+        query.addEventListener('change', handlePointerChange);
+        cleanups.push(() => query.removeEventListener('change', handlePointerChange));
+      } else if (typeof query.addListener === 'function') {
+        query.addListener(handlePointerChange);
+        cleanups.push(() => query.removeListener(handlePointerChange));
+      }
+    };
+
+    attachListener(pointerQuery);
+    attachListener(hoverQuery);
+
+    return () => {
+      cleanups.forEach((cleanup) => cleanup());
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const isDesktopRuntime = typeof window.opencodeDesktop !== 'undefined';
+    const supportsMatchMedia = typeof window.matchMedia === 'function';
+    const pointerQuery = supportsMatchMedia ? window.matchMedia('(pointer: coarse)') : null;
+    const hoverQuery = supportsMatchMedia ? window.matchMedia('(hover: none)') : null;
+    const prefersCoarsePointer = pointerQuery?.matches ?? false;
+    const noHover = hoverQuery?.matches ?? false;
+    const maxTouchPoints = typeof navigator !== 'undefined' ? navigator.maxTouchPoints ?? 0 : 0;
+    const hasTouchInput = prefersCoarsePointer || noHover || maxTouchPoints > 0;
+    setRootDeviceAttributes(isDesktopRuntime, deviceInfo.deviceType, hasTouchInput);
+  }, [deviceInfo.deviceType, deviceInfo.hasTouchInput]);
+
+  return deviceInfo;
+}
diff --git a/packages/ui/src/lib/directoryPersistence.ts b/packages/ui/src/lib/directoryPersistence.ts
new file mode 100644
index 00000000..5c318b86
--- /dev/null
+++ b/packages/ui/src/lib/directoryPersistence.ts
@@ -0,0 +1,27 @@
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+
+export const applyPersistedDirectoryPreferences = async (): Promise<void> => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  let savedHome: string | null = null;
+  let savedDirectory: string | null = null;
+
+  try {
+    savedHome = window.localStorage.getItem('homeDirectory');
+    savedDirectory = window.localStorage.getItem('lastDirectory');
+  } catch (error) {
+    console.warn('Failed to read saved directory preferences:', error);
+  }
+
+  const directoryStore = useDirectoryStore.getState();
+
+  if (savedHome && directoryStore.homeDirectory !== savedHome) {
+    directoryStore.synchronizeHomeDirectory(savedHome);
+  }
+
+  if (savedDirectory) {
+    directoryStore.setDirectory(savedDirectory, { showOverlay: false });
+  }
+};
diff --git a/packages/ui/src/lib/fontOptions.ts b/packages/ui/src/lib/fontOptions.ts
new file mode 100644
index 00000000..ab7f97e1
--- /dev/null
+++ b/packages/ui/src/lib/fontOptions.ts
@@ -0,0 +1,38 @@
+export type UiFontOption = 'ibm-plex-sans';
+
+export type MonoFontOption = 'ibm-plex-mono';
+
+export interface FontOptionDefinition<T extends string> {
+    id: T;
+    label: string;
+    description: string;
+    stack: string;
+    notes?: string;
+}
+
+export const UI_FONT_OPTIONS: FontOptionDefinition<UiFontOption>[] = [
+    {
+        id: 'ibm-plex-sans',
+        label: 'IBM Plex Sans',
+        description: 'Humanist sans-serif for optimal readability in the interface.',
+        stack: '"IBM Plex Sans", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+    }
+];
+
+export const CODE_FONT_OPTIONS: FontOptionDefinition<MonoFontOption>[] = [
+    {
+        id: 'ibm-plex-mono',
+        label: 'IBM Plex Mono',
+        description: 'Balanced monospace for code blocks and technical content.',
+        stack: '"IBM Plex Mono", "SFMono-Regular", "Menlo", monospace'
+    }
+];
+
+const buildFontMap = <T extends string>(options: FontOptionDefinition<T>[]) =>
+    Object.fromEntries(options.map((option) => [option.id, option])) as Record<T, FontOptionDefinition<T>>;
+
+export const UI_FONT_OPTION_MAP = buildFontMap(UI_FONT_OPTIONS);
+export const CODE_FONT_OPTION_MAP = buildFontMap(CODE_FONT_OPTIONS);
+
+export const DEFAULT_UI_FONT: UiFontOption = 'ibm-plex-sans';
+export const DEFAULT_MONO_FONT: MonoFontOption = 'ibm-plex-mono';
diff --git a/packages/ui/src/lib/git/worktreeService.ts b/packages/ui/src/lib/git/worktreeService.ts
new file mode 100644
index 00000000..a0fb4b18
--- /dev/null
+++ b/packages/ui/src/lib/git/worktreeService.ts
@@ -0,0 +1,167 @@
+import { addGitWorktree, deleteGitBranch, deleteRemoteBranch, getGitStatus, listGitWorktrees, removeGitWorktree, type GitAddWorktreePayload, type GitWorktreeInfo } from '@/lib/gitApi';
+import { opencodeClient } from '@/lib/opencode/client';
+import type { WorktreeMetadata } from '@/types/worktree';
+
+const WORKTREE_ROOT = '.openchamber';
+
+const normalize = (value: string): string => {
+  if (!value) {
+    return '';
+  }
+  const replaced = value.replace(/\\/g, '/');
+  if (replaced === '/') {
+    return '/';
+  }
+  return replaced.replace(/\/+$/, '');
+};
+
+const joinPath = (base: string, segment: string): string => {
+  const normalizedBase = normalize(base);
+  const sanitizedSegment = segment.replace(/\\/g, '/').replace(/^\/+/, '').replace(/\/+$/, '');
+  if (!normalizedBase || normalizedBase === '/') {
+    return `/${sanitizedSegment}`;
+  }
+  return `${normalizedBase}/${sanitizedSegment}`;
+};
+
+const shortBranchLabel = (branch?: string): string => {
+  if (!branch) {
+    return '';
+  }
+  if (branch.startsWith('refs/heads/')) {
+    return branch.substring('refs/heads/'.length);
+  }
+  if (branch.startsWith('heads/')) {
+    return branch.substring('heads/'.length);
+  }
+  if (branch.startsWith('refs/')) {
+    return branch.substring('refs/'.length);
+  }
+  return branch;
+};
+
+const ensureDirectory = async (path: string) => {
+  try {
+    await opencodeClient.createDirectory(path);
+  } catch (error) {
+
+    if (error instanceof Error) {
+      if (/exist/i.test(error.message)) {
+        return;
+      }
+    }
+    throw error;
+  }
+};
+
+export interface CreateWorktreeOptions {
+  projectDirectory: string;
+  worktreeSlug: string;
+  branch: string;
+  createBranch?: boolean;
+}
+
+export interface RemoveWorktreeOptions {
+  projectDirectory: string;
+  path: string;
+  force?: boolean;
+}
+
+export interface ArchiveWorktreeOptions {
+  projectDirectory: string;
+  path: string;
+  branch: string;
+  force?: boolean;
+  deleteRemote?: boolean;
+  remote?: string;
+}
+
+export async function resolveWorktreePath(projectDirectory: string, worktreeSlug: string): Promise<string> {
+  const normalizedProject = normalize(projectDirectory);
+  const root = joinPath(normalizedProject, WORKTREE_ROOT);
+  await ensureDirectory(root);
+  return joinPath(root, worktreeSlug);
+}
+
+export async function createWorktree(options: CreateWorktreeOptions): Promise<WorktreeMetadata> {
+  const { projectDirectory, worktreeSlug, branch, createBranch } = options;
+  const normalizedProject = normalize(projectDirectory);
+  const worktreePath = await resolveWorktreePath(normalizedProject, worktreeSlug);
+
+  const payload: GitAddWorktreePayload = {
+    path: worktreePath,
+    branch,
+    createBranch: Boolean(createBranch),
+  };
+
+  await addGitWorktree(normalizedProject, payload);
+
+  return {
+    path: worktreePath,
+    branch,
+    label: shortBranchLabel(branch),
+    projectDirectory: normalizedProject,
+    relativePath: worktreePath.startsWith(`${normalizedProject}/`)
+      ? worktreePath.slice(normalizedProject.length + 1)
+      : worktreePath,
+  };
+}
+
+export async function removeWorktree(options: RemoveWorktreeOptions): Promise<void> {
+  const { projectDirectory, path, force } = options;
+  const normalizedProject = normalize(projectDirectory);
+  await removeGitWorktree(normalizedProject, { path, force });
+}
+
+export async function archiveWorktree(options: ArchiveWorktreeOptions): Promise<void> {
+  const { projectDirectory, path, branch, force, deleteRemote, remote } = options;
+  const normalizedProject = normalize(projectDirectory);
+  const normalizedBranch = branch.startsWith('refs/heads/')
+    ? branch.substring('refs/heads/'.length)
+    : branch;
+
+  await removeGitWorktree(normalizedProject, { path, force });
+  if (normalizedBranch) {
+    await deleteGitBranch(normalizedProject, { branch: normalizedBranch, force: true });
+    if (deleteRemote) {
+      try {
+        await deleteRemoteBranch(normalizedProject, {
+          branch: normalizedBranch,
+          remote,
+        });
+      } catch (error) {
+        console.warn('Failed to delete remote branch during worktree archive:', error);
+      }
+    }
+  }
+}
+
+export async function listWorktrees(projectDirectory: string): Promise<GitWorktreeInfo[]> {
+  const normalizedProject = normalize(projectDirectory);
+  return listGitWorktrees(normalizedProject);
+}
+
+export async function getWorktreeStatus(worktreePath: string): Promise<WorktreeMetadata['status']> {
+  const normalizedPath = normalize(worktreePath);
+  const status = await getGitStatus(normalizedPath);
+  return {
+    isDirty: !status.isClean,
+    ahead: status.ahead,
+    behind: status.behind,
+    upstream: status.tracking,
+  };
+}
+
+export function mapWorktreeToMetadata(projectDirectory: string, info: GitWorktreeInfo): WorktreeMetadata {
+  const normalizedProject = normalize(projectDirectory);
+  const normalizedPath = normalize(info.worktree);
+  return {
+    path: normalizedPath,
+    branch: info.branch ?? '',
+    label: shortBranchLabel(info.branch ?? ''),
+    projectDirectory: normalizedProject,
+    relativePath: normalizedPath.startsWith(`${normalizedProject}/`)
+      ? normalizedPath.slice(normalizedProject.length + 1)
+      : normalizedPath,
+  };
+}
diff --git a/packages/ui/src/lib/gitApi.ts b/packages/ui/src/lib/gitApi.ts
new file mode 100644
index 00000000..cf9d2ef9
--- /dev/null
+++ b/packages/ui/src/lib/gitApi.ts
@@ -0,0 +1,237 @@
+
+
+import type { RuntimeAPIs } from './api/types';
+import * as gitHttp from './gitApiHttp';
+
+export type {
+  GitStatus,
+  GitDiffResponse,
+  GetGitDiffOptions,
+  GitBranchDetails,
+  GitBranch,
+  GitCommitResult,
+  GitPushResult,
+  GitPullResult,
+  GitIdentityProfile,
+  GitIdentitySummary,
+  GitLogEntry,
+  GitLogResponse,
+  GitWorktreeInfo,
+  GitAddWorktreePayload,
+  GitRemoveWorktreePayload,
+  GitDeleteBranchPayload,
+  GitDeleteRemoteBranchPayload,
+} from './api/types';
+
+declare global {
+  interface Window {
+    __OPENCHAMBER_RUNTIME_APIS__?: RuntimeAPIs;
+  }
+}
+
+const getRuntimeGit = () => {
+  if (typeof window !== 'undefined' && window.__OPENCHAMBER_RUNTIME_APIS__?.git) {
+    return window.__OPENCHAMBER_RUNTIME_APIS__.git;
+  }
+  return null;
+};
+
+export async function checkIsGitRepository(directory: string): Promise<boolean> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.checkIsGitRepository(directory);
+  return gitHttp.checkIsGitRepository(directory);
+}
+
+export async function getGitStatus(directory: string): Promise<import('./api/types').GitStatus> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.getGitStatus(directory);
+  return gitHttp.getGitStatus(directory);
+}
+
+export async function getGitDiff(directory: string, options: import('./api/types').GetGitDiffOptions): Promise<import('./api/types').GitDiffResponse> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.getGitDiff(directory, options);
+  return gitHttp.getGitDiff(directory, options);
+}
+
+export async function getGitFileDiff(
+  directory: string,
+  options: import('./api/types').GetGitFileDiffOptions
+): Promise<import('./api/types').GitFileDiffResponse> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.getGitFileDiff(directory, options);
+  return gitHttp.getGitFileDiff(directory, options);
+}
+
+export async function revertGitFile(directory: string, filePath: string): Promise<void> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.revertGitFile(directory, filePath);
+  return gitHttp.revertGitFile(directory, filePath);
+}
+
+export async function isLinkedWorktree(directory: string): Promise<boolean> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.isLinkedWorktree(directory);
+  return gitHttp.isLinkedWorktree(directory);
+}
+
+export async function getGitBranches(directory: string): Promise<import('./api/types').GitBranch> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.getGitBranches(directory);
+  return gitHttp.getGitBranches(directory);
+}
+
+export async function deleteGitBranch(directory: string, payload: import('./api/types').GitDeleteBranchPayload): Promise<{ success: boolean }> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.deleteGitBranch(directory, payload);
+  return gitHttp.deleteGitBranch(directory, payload);
+}
+
+export async function deleteRemoteBranch(directory: string, payload: import('./api/types').GitDeleteRemoteBranchPayload): Promise<{ success: boolean }> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.deleteRemoteBranch(directory, payload);
+  return gitHttp.deleteRemoteBranch(directory, payload);
+}
+
+export async function generateCommitMessage(
+  directory: string,
+  files: string[]
+): Promise<{ message: import('./api/types').GeneratedCommitMessage }> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.generateCommitMessage(directory, files);
+  return gitHttp.generateCommitMessage(directory, files);
+}
+
+export async function listGitWorktrees(directory: string): Promise<import('./api/types').GitWorktreeInfo[]> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.listGitWorktrees(directory);
+  return gitHttp.listGitWorktrees(directory);
+}
+
+export async function addGitWorktree(directory: string, payload: import('./api/types').GitAddWorktreePayload): Promise<{ success: boolean; path: string; branch: string }> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.addGitWorktree(directory, payload);
+  return gitHttp.addGitWorktree(directory, payload);
+}
+
+export async function removeGitWorktree(directory: string, payload: import('./api/types').GitRemoveWorktreePayload): Promise<{ success: boolean }> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.removeGitWorktree(directory, payload);
+  return gitHttp.removeGitWorktree(directory, payload);
+}
+
+export async function ensureOpenChamberIgnored(directory: string): Promise<void> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.ensureOpenChamberIgnored(directory);
+  return gitHttp.ensureOpenChamberIgnored(directory);
+}
+
+export async function createGitCommit(
+  directory: string,
+  message: string,
+  options: import('./api/types').CreateGitCommitOptions = {}
+): Promise<import('./api/types').GitCommitResult> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.createGitCommit(directory, message, options);
+  return gitHttp.createGitCommit(directory, message, options);
+}
+
+export async function gitPush(
+  directory: string,
+  options: { remote?: string; branch?: string; options?: string[] | Record<string, unknown> } = {}
+): Promise<import('./api/types').GitPushResult> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.gitPush(directory, options);
+  return gitHttp.gitPush(directory, options);
+}
+
+export async function gitPull(
+  directory: string,
+  options: { remote?: string; branch?: string } = {}
+): Promise<import('./api/types').GitPullResult> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.gitPull(directory, options);
+  return gitHttp.gitPull(directory, options);
+}
+
+export async function gitFetch(
+  directory: string,
+  options: { remote?: string; branch?: string } = {}
+): Promise<{ success: boolean }> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.gitFetch(directory, options);
+  return gitHttp.gitFetch(directory, options);
+}
+
+export async function checkoutBranch(directory: string, branch: string): Promise<{ success: boolean; branch: string }> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.checkoutBranch(directory, branch);
+  return gitHttp.checkoutBranch(directory, branch);
+}
+
+export async function createBranch(
+  directory: string,
+  name: string,
+  startPoint?: string
+): Promise<{ success: boolean; branch: string }> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.createBranch(directory, name, startPoint);
+  return gitHttp.createBranch(directory, name, startPoint);
+}
+
+export async function getGitLog(
+  directory: string,
+  options: import('./api/types').GitLogOptions = {}
+): Promise<import('./api/types').GitLogResponse> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.getGitLog(directory, options);
+  return gitHttp.getGitLog(directory, options);
+}
+
+export async function getCommitFiles(
+  directory: string,
+  hash: string
+): Promise<import('./api/types').GitCommitFilesResponse> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.getCommitFiles(directory, hash);
+  return gitHttp.getCommitFiles(directory, hash);
+}
+
+export async function getGitIdentities(): Promise<import('./api/types').GitIdentityProfile[]> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.getGitIdentities();
+  return gitHttp.getGitIdentities();
+}
+
+export async function createGitIdentity(profile: import('./api/types').GitIdentityProfile): Promise<import('./api/types').GitIdentityProfile> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.createGitIdentity(profile);
+  return gitHttp.createGitIdentity(profile);
+}
+
+export async function updateGitIdentity(id: string, updates: import('./api/types').GitIdentityProfile): Promise<import('./api/types').GitIdentityProfile> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.updateGitIdentity(id, updates);
+  return gitHttp.updateGitIdentity(id, updates);
+}
+
+export async function deleteGitIdentity(id: string): Promise<void> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.deleteGitIdentity(id);
+  return gitHttp.deleteGitIdentity(id);
+}
+
+export async function getCurrentGitIdentity(directory: string): Promise<import('./api/types').GitIdentitySummary | null> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.getCurrentGitIdentity(directory);
+  return gitHttp.getCurrentGitIdentity(directory);
+}
+
+export async function setGitIdentity(
+  directory: string,
+  profileId: string
+): Promise<{ success: boolean; profile: import('./api/types').GitIdentityProfile }> {
+  const runtime = getRuntimeGit();
+  if (runtime) return runtime.setGitIdentity(directory, profileId);
+  return gitHttp.setGitIdentity(directory, profileId);
+}
diff --git a/packages/ui/src/lib/gitApiHttp.ts b/packages/ui/src/lib/gitApiHttp.ts
new file mode 100644
index 00000000..863e8154
--- /dev/null
+++ b/packages/ui/src/lib/gitApiHttp.ts
@@ -0,0 +1,515 @@
+
+
+import type {
+  GitStatus,
+  GitDiffResponse,
+  GetGitDiffOptions,
+  GitFileDiffResponse,
+  GetGitFileDiffOptions,
+  GitBranch,
+  GitDeleteBranchPayload,
+  GitDeleteRemoteBranchPayload,
+  GeneratedCommitMessage,
+  GitWorktreeInfo,
+  GitAddWorktreePayload,
+  GitRemoveWorktreePayload,
+  CreateGitCommitOptions,
+  GitCommitResult,
+  GitPushResult,
+  GitPullResult,
+  GitLogOptions,
+  GitLogResponse,
+  GitCommitFilesResponse,
+  GitIdentityProfile,
+  GitIdentitySummary,
+} from './api/types';
+
+declare global {
+  interface Window {
+    __OPENCHAMBER_DESKTOP_SERVER__?: {
+      origin: string;
+      opencodePort: number | null;
+      apiPrefix: string;
+      cliAvailable: boolean;
+    };
+  }
+}
+
+const resolveBaseOrigin = (): string => {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+  const desktopOrigin = window.__OPENCHAMBER_DESKTOP_SERVER__?.origin;
+  if (desktopOrigin) {
+    return desktopOrigin;
+  }
+  return window.location.origin;
+};
+
+const API_BASE = '/api/git';
+
+function buildUrl(
+  path: string,
+  directory: string | null | undefined,
+  params?: Record<string, string | number | boolean | undefined>
+): string {
+  const url = new URL(path, resolveBaseOrigin());
+  if (directory) {
+    url.searchParams.set('directory', directory);
+  }
+
+  if (params) {
+    for (const [key, value] of Object.entries(params)) {
+      if (value === undefined) continue;
+      url.searchParams.set(key, String(value));
+    }
+  }
+
+  return url.toString();
+}
+
+export async function checkIsGitRepository(directory: string): Promise<boolean> {
+  const response = await fetch(buildUrl(`${API_BASE}/check`, directory));
+  if (!response.ok) {
+    throw new Error(`Failed to check git repository: ${response.statusText}`);
+  }
+  const data = await response.json();
+  return data.isGitRepository;
+}
+
+export async function getGitStatus(directory: string): Promise<GitStatus> {
+  const response = await fetch(buildUrl(`${API_BASE}/status`, directory));
+  if (!response.ok) {
+    throw new Error(`Failed to get git status: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+export async function getGitDiff(directory: string, options: GetGitDiffOptions): Promise<GitDiffResponse> {
+  const { path, staged, contextLines } = options;
+  if (!path) {
+    throw new Error('path is required to fetch git diff');
+  }
+
+  const response = await fetch(
+    buildUrl(`${API_BASE}/diff`, directory, {
+      path,
+      staged: staged ? 'true' : undefined,
+      context: contextLines,
+    })
+  );
+
+  if (!response.ok) {
+    throw new Error(`Failed to get git diff: ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
+export async function getGitFileDiff(directory: string, options: GetGitFileDiffOptions): Promise<GitFileDiffResponse> {
+  const { path, staged } = options;
+  if (!path) {
+    throw new Error('path is required to fetch git file diff');
+  }
+
+  const response = await fetch(
+    buildUrl(`${API_BASE}/file-diff`, directory, {
+      path,
+      staged: staged ? 'true' : undefined,
+    })
+  );
+
+  if (!response.ok) {
+    throw new Error(`Failed to get git file diff: ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
+export async function revertGitFile(directory: string, filePath: string): Promise<void> {
+  if (!filePath) {
+    throw new Error('path is required to revert git changes');
+  }
+
+  const response = await fetch(buildUrl(`${API_BASE}/revert`, directory), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ path: filePath }),
+  });
+
+  if (!response.ok) {
+    const message = await response
+      .json()
+      .catch(() => ({ error: response.statusText }));
+    throw new Error(message.error || 'Failed to revert git changes');
+  }
+}
+
+export async function isLinkedWorktree(directory: string): Promise<boolean> {
+  if (!directory) {
+    return false;
+  }
+  const response = await fetch(buildUrl(`${API_BASE}/worktree-type`, directory));
+  if (!response.ok) {
+    throw new Error(`Failed to detect worktree type: ${response.statusText}`);
+  }
+  const data = await response.json();
+  return Boolean(data.linked);
+}
+
+export async function getGitBranches(directory: string): Promise<GitBranch> {
+  const response = await fetch(buildUrl(`${API_BASE}/branches`, directory));
+  if (!response.ok) {
+    throw new Error(`Failed to get branches: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+export async function deleteGitBranch(directory: string, payload: GitDeleteBranchPayload): Promise<{ success: boolean }> {
+  if (!payload?.branch) {
+    throw new Error('branch is required to delete a branch');
+  }
+
+  const response = await fetch(buildUrl(`${API_BASE}/branches`, directory), {
+    method: 'DELETE',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to delete branch');
+  }
+
+  return response.json();
+}
+
+export async function deleteRemoteBranch(directory: string, payload: GitDeleteRemoteBranchPayload): Promise<{ success: boolean }> {
+  if (!payload?.branch) {
+    throw new Error('branch is required to delete remote branch');
+  }
+
+  const response = await fetch(buildUrl(`${API_BASE}/remote-branches`, directory), {
+    method: 'DELETE',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to delete remote branch');
+  }
+
+  return response.json();
+}
+
+export async function generateCommitMessage(
+  directory: string,
+  files: string[]
+): Promise<{ message: GeneratedCommitMessage }> {
+  if (!Array.isArray(files) || files.length === 0) {
+    throw new Error('No files provided to generate commit message');
+  }
+
+  const response = await fetch(buildUrl(`${API_BASE}/commit-message`, directory), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ files }),
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to generate commit message');
+  }
+
+  const data = await response.json();
+
+  if (!data?.message || typeof data.message !== 'object') {
+    throw new Error('Malformed commit generation response');
+  }
+
+  const subject =
+    typeof data.message.subject === 'string' && data.message.subject.trim().length > 0
+      ? data.message.subject.trim()
+      : '';
+
+  const highlights: string[] = Array.isArray(data.message.highlights)
+    ? (data.message.highlights as unknown[])
+        .filter((item): item is string => typeof item === 'string' && item.trim().length > 0)
+        .map((item) => (item as string).trim())
+    : [];
+
+  return {
+    message: {
+      subject,
+      highlights,
+    },
+  };
+}
+
+export async function listGitWorktrees(directory: string): Promise<GitWorktreeInfo[]> {
+  const response = await fetch(buildUrl(`${API_BASE}/worktrees`, directory));
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to list worktrees');
+  }
+  return response.json();
+}
+
+export async function addGitWorktree(directory: string, payload: GitAddWorktreePayload): Promise<{ success: boolean; path: string; branch: string }> {
+  if (!payload?.path || !payload?.branch) {
+    throw new Error('path and branch are required to add a worktree');
+  }
+
+  const response = await fetch(buildUrl(`${API_BASE}/worktrees`, directory), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to add worktree');
+  }
+
+  return response.json();
+}
+
+export async function removeGitWorktree(directory: string, payload: GitRemoveWorktreePayload): Promise<{ success: boolean }> {
+  if (!payload?.path) {
+    throw new Error('path is required to remove a worktree');
+  }
+
+  const response = await fetch(buildUrl(`${API_BASE}/worktrees`, directory), {
+    method: 'DELETE',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to remove worktree');
+  }
+
+  return response.json();
+}
+
+export async function ensureOpenChamberIgnored(directory: string): Promise<void> {
+  const response = await fetch(buildUrl(`${API_BASE}/ignore-openchamber`, directory), {
+    method: 'POST',
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to update git ignore');
+  }
+}
+
+export async function createGitCommit(
+  directory: string,
+  message: string,
+  options: CreateGitCommitOptions = {}
+): Promise<GitCommitResult> {
+  const response = await fetch(buildUrl(`${API_BASE}/commit`, directory), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      message,
+      addAll: options.addAll ?? false,
+      files: options.files,
+    }),
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to create commit');
+  }
+  return response.json();
+}
+
+export async function gitPush(
+  directory: string,
+  options: { remote?: string; branch?: string; options?: string[] | Record<string, unknown> } = {}
+): Promise<GitPushResult> {
+  const response = await fetch(buildUrl(`${API_BASE}/push`, directory), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(options),
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to push');
+  }
+  return response.json();
+}
+
+export async function gitPull(
+  directory: string,
+  options: { remote?: string; branch?: string } = {}
+): Promise<GitPullResult> {
+  const response = await fetch(buildUrl(`${API_BASE}/pull`, directory), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(options),
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to pull');
+  }
+  return response.json();
+}
+
+export async function gitFetch(
+  directory: string,
+  options: { remote?: string; branch?: string } = {}
+): Promise<{ success: boolean }> {
+  const response = await fetch(buildUrl(`${API_BASE}/fetch`, directory), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(options),
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to fetch');
+  }
+  return response.json();
+}
+
+export async function checkoutBranch(directory: string, branch: string): Promise<{ success: boolean; branch: string }> {
+  const response = await fetch(buildUrl(`${API_BASE}/checkout`, directory), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ branch }),
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to checkout branch');
+  }
+  return response.json();
+}
+
+export async function createBranch(
+  directory: string,
+  name: string,
+  startPoint?: string
+): Promise<{ success: boolean; branch: string }> {
+  const response = await fetch(buildUrl(`${API_BASE}/branches`, directory), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name, startPoint }),
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to create branch');
+  }
+  return response.json();
+}
+
+export async function getGitLog(
+  directory: string,
+  options: GitLogOptions = {}
+): Promise<GitLogResponse> {
+  const response = await fetch(
+    buildUrl(`${API_BASE}/log`, directory, {
+      maxCount: options.maxCount,
+      from: options.from,
+      to: options.to,
+      file: options.file,
+    })
+  );
+  if (!response.ok) {
+    throw new Error(`Failed to get git log: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+export async function getCommitFiles(
+  directory: string,
+  hash: string
+): Promise<GitCommitFilesResponse> {
+  const response = await fetch(
+    buildUrl(`${API_BASE}/commit-files`, directory, { hash })
+  );
+  if (!response.ok) {
+    throw new Error(`Failed to get commit files: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+export async function getGitIdentities(): Promise<GitIdentityProfile[]> {
+  const response = await fetch(buildUrl(`${API_BASE}/identities`, undefined));
+  if (!response.ok) {
+    throw new Error(`Failed to get git identities: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+export async function createGitIdentity(profile: GitIdentityProfile): Promise<GitIdentityProfile> {
+  const response = await fetch(buildUrl(`${API_BASE}/identities`, undefined), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(profile),
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to create git identity');
+  }
+  return response.json();
+}
+
+export async function updateGitIdentity(id: string, updates: GitIdentityProfile): Promise<GitIdentityProfile> {
+  const response = await fetch(buildUrl(`${API_BASE}/identities/${id}`, undefined), {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(updates),
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to update git identity');
+  }
+  return response.json();
+}
+
+export async function deleteGitIdentity(id: string): Promise<void> {
+  const response = await fetch(buildUrl(`${API_BASE}/identities/${id}`, undefined), {
+    method: 'DELETE',
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to delete git identity');
+  }
+}
+
+export async function getCurrentGitIdentity(directory: string): Promise<GitIdentitySummary | null> {
+  if (!directory) {
+    return null;
+  }
+  const response = await fetch(buildUrl(`${API_BASE}/current-identity`, directory));
+  if (!response.ok) {
+    throw new Error(`Failed to get current git identity: ${response.statusText}`);
+  }
+  const data = await response.json();
+  if (!data) {
+    return null;
+  }
+  return {
+    userName: data.userName ?? null,
+    userEmail: data.userEmail ?? null,
+    sshCommand: data.sshCommand ?? null,
+  };
+}
+
+export async function setGitIdentity(
+  directory: string,
+  profileId: string
+): Promise<{ success: boolean; profile: GitIdentityProfile }> {
+  const response = await fetch(buildUrl(`${API_BASE}/set-identity`, directory), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ profileId }),
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || 'Failed to set git identity');
+  }
+  return response.json();
+}
diff --git a/packages/ui/src/lib/messageCompletion.ts b/packages/ui/src/lib/messageCompletion.ts
new file mode 100644
index 00000000..6418a5f1
--- /dev/null
+++ b/packages/ui/src/lib/messageCompletion.ts
@@ -0,0 +1,110 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Part } from "@opencode-ai/sdk";
+import { isFullySyntheticMessage } from "@/lib/messages/synthetic";
+
+export interface MessageInfo {
+    id: string;
+    role: string;
+    time?: {
+        created?: number;
+        completed?: number;
+    };
+    status?: string;
+    streaming?: boolean;
+}
+
+export interface MessageRecord {
+    info: MessageInfo & Record<string, any>;
+    parts: Part[];
+}
+
+export function isMessageComplete(messageInfo: MessageInfo, parts: Part[] = []): boolean {
+    if (isFullySyntheticMessage(parts)) {
+        return true;
+    }
+
+    const timeInfo = messageInfo?.time ?? {};
+    const completedAt = typeof timeInfo?.completed === 'number' ? timeInfo.completed : undefined;
+    const messageStatus = messageInfo?.status;
+
+    const hasStopFinish = parts.some(part =>
+        part.type === 'step-finish' && (part as any).reason === 'stop'
+    );
+
+    const hasCompletedFlag = (typeof completedAt === 'number' && completedAt > 0) || messageStatus === 'completed';
+    if (!hasCompletedFlag || !hasStopFinish) {
+        return false;
+    }
+
+    const hasActiveTools = parts.some((part) => {
+        switch (part.type) {
+            case 'reasoning': {
+                const time = (part as any)?.time;
+                return !time || typeof time.end === 'undefined';
+            }
+            case 'tool': {
+                const status = (part as any)?.state?.status;
+                return status === 'running' || status === 'pending';
+            }
+            default:
+                return false;
+        }
+    });
+
+    return !hasActiveTools;
+}
+
+export function getLatestAssistantMessageId(messages: MessageRecord[]): string | null {
+    const assistantMessages = messages
+        .filter(msg => msg.info.role === 'assistant' && !isFullySyntheticMessage(msg.parts))
+        .sort((a, b) => (a.info.id || "").localeCompare(b.info.id || ""));
+
+    return assistantMessages.length > 0
+        ? assistantMessages[assistantMessages.length - 1].info.id
+        : null;
+}
+
+export function hasAnimatingWork(messages: MessageRecord[]): boolean {
+    if (messages.length === 0) {
+        return false;
+    }
+
+    for (const message of messages) {
+        if (message.info.role !== 'assistant') {
+            continue;
+        }
+
+        if (isFullySyntheticMessage(message.parts)) {
+            continue;
+        }
+
+        if (!isMessageComplete(message.info, message.parts)) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+export function shouldContinueStreaming(
+    messages: MessageRecord[],
+    currentStreamingId: string | null
+): boolean {
+    const latestId = getLatestAssistantMessageId(messages);
+    if (!latestId) {
+        return false;
+    }
+
+    if (currentStreamingId && currentStreamingId !== latestId) {
+        return true;
+    }
+
+    const latestMessage = messages.find(
+        (msg) => msg.info.id === latestId && !isFullySyntheticMessage(msg.parts)
+    );
+    if (!latestMessage) {
+        return false;
+    }
+
+    return !isMessageComplete(latestMessage.info, latestMessage.parts);
+}
diff --git a/packages/ui/src/lib/messageCursorPersistence.ts b/packages/ui/src/lib/messageCursorPersistence.ts
new file mode 100644
index 00000000..2e6e00ba
--- /dev/null
+++ b/packages/ui/src/lib/messageCursorPersistence.ts
@@ -0,0 +1,157 @@
+const DB_NAME = 'openchamber-message-cursors';
+const STORE_NAME = 'cursors';
+const DB_VERSION = 1;
+const FALLBACK_KEY = 'openchamber.messageCursors';
+
+type CursorRecord = {
+  messageId: string;
+  completedAt: number;
+};
+
+const isBrowser = () => typeof window !== 'undefined';
+
+const hasIndexedDbSupport = () => {
+  return isBrowser() && typeof indexedDB !== 'undefined';
+};
+
+const openDatabase = (): Promise<IDBDatabase> => {
+  if (!hasIndexedDbSupport()) {
+    return Promise.reject(new Error('IndexedDB not supported'));
+  }
+
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME);
+      }
+    };
+
+    request.onerror = () => {
+      reject(request.error ?? new Error('Failed to open IndexedDB'));
+    };
+
+    request.onsuccess = () => {
+      resolve(request.result);
+    };
+  });
+};
+
+const readFallback = (): Record<string, CursorRecord> => {
+  if (!isBrowser()) {
+    return {};
+  }
+
+  try {
+    const raw = window.localStorage.getItem(FALLBACK_KEY);
+    if (!raw) {
+      return {};
+    }
+    const parsed = JSON.parse(raw) as Record<string, CursorRecord>;
+    return parsed && typeof parsed === 'object' ? parsed : {};
+  } catch {
+    return {};
+  }
+};
+
+const writeFallback = (map: Record<string, CursorRecord>) => {
+  if (!isBrowser()) {
+    return;
+  }
+
+  try {
+    window.localStorage.setItem(FALLBACK_KEY, JSON.stringify(map));
+  } catch { /* ignored */ }
+};
+
+export const saveSessionCursor = async (
+  sessionId: string,
+  messageId: string,
+  completedAt: number
+) => {
+  if (!sessionId || !messageId) {
+    return;
+  }
+
+  if (hasIndexedDbSupport()) {
+    try {
+      const db = await openDatabase();
+      await new Promise<void>((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, 'readwrite');
+        const store = tx.objectStore(STORE_NAME);
+        store.put({ messageId, completedAt }, sessionId);
+
+        tx.oncomplete = () => resolve();
+        tx.onerror = () => reject(tx.error ?? new Error('Cursor write failed'));
+        tx.onabort = () => reject(tx.error ?? new Error('Cursor write aborted'));
+      });
+      db.close();
+      return;
+    } catch { /* ignored */ }
+  }
+
+  const fallback = readFallback();
+  fallback[sessionId] = { messageId, completedAt };
+  writeFallback(fallback);
+};
+
+export const readSessionCursor = async (
+  sessionId: string
+): Promise<CursorRecord | null> => {
+  if (!sessionId) {
+    return null;
+  }
+
+  if (hasIndexedDbSupport()) {
+    try {
+      const db = await openDatabase();
+      const record = await new Promise<CursorRecord | null>((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, 'readonly');
+        const store = tx.objectStore(STORE_NAME);
+        const request = store.get(sessionId);
+
+        request.onsuccess = () => {
+          resolve((request.result as CursorRecord) ?? null);
+        };
+
+        request.onerror = () => reject(request.error ?? new Error('Cursor read failed'));
+        tx.onerror = () => reject(tx.error ?? new Error('Cursor read failed'));
+        tx.onabort = () => reject(tx.error ?? new Error('Cursor read aborted'));
+      });
+      db.close();
+      return record;
+    } catch { /* ignored */ }
+  }
+
+  const fallback = readFallback();
+  return fallback[sessionId] ?? null;
+};
+
+export const clearSessionCursor = async (sessionId: string) => {
+  if (!sessionId) {
+    return;
+  }
+
+  if (hasIndexedDbSupport()) {
+    try {
+      const db = await openDatabase();
+      await new Promise<void>((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, 'readwrite');
+        const store = tx.objectStore(STORE_NAME);
+        store.delete(sessionId);
+        tx.oncomplete = () => resolve();
+        tx.onerror = () => reject(tx.error ?? new Error('Cursor delete failed'));
+        tx.onabort = () => reject(tx.error ?? new Error('Cursor delete aborted'));
+      });
+      db.close();
+    } catch { /* ignored */ }
+  }
+
+  const fallback = readFallback();
+  if (sessionId in fallback) {
+    delete fallback[sessionId];
+    writeFallback(fallback);
+  }
+};
diff --git a/packages/ui/src/lib/messageFreshness.ts b/packages/ui/src/lib/messageFreshness.ts
new file mode 100644
index 00000000..031dd2e3
--- /dev/null
+++ b/packages/ui/src/lib/messageFreshness.ts
@@ -0,0 +1,90 @@
+import type { Message } from '@opencode-ai/sdk';
+
+export class MessageFreshnessDetector {
+    private static instance: MessageFreshnessDetector;
+    private sessionStartTimes: Map<string, number> = new Map();
+    private seenMessageIds: Set<string> = new Set();
+    private messageCreationTimes: Map<string, number> = new Map();
+
+    private constructor() {}
+
+    static getInstance(): MessageFreshnessDetector {
+        if (!MessageFreshnessDetector.instance) {
+            MessageFreshnessDetector.instance = new MessageFreshnessDetector();
+        }
+        return MessageFreshnessDetector.instance;
+    }
+
+    recordSessionStart(sessionId: string): void {
+        this.sessionStartTimes.set(sessionId, Date.now());
+    }
+
+    getSessionStartTime(sessionId: string): number | undefined {
+        return this.sessionStartTimes.get(sessionId);
+    }
+
+    shouldAnimateMessage(message: Message, sessionId: string): boolean {
+
+        if (message.role !== 'assistant') {
+            return false;
+        }
+
+        if (this.seenMessageIds.has(message.id)) {
+            return false;
+        }
+
+        const sessionStartTime = this.sessionStartTimes.get(sessionId);
+
+        if (!sessionStartTime) {
+
+            this.seenMessageIds.add(message.id);
+            this.messageCreationTimes.set(message.id, message.time.created);
+            return false;
+        }
+
+        const isFresh = message.time.created > (sessionStartTime - 5000);
+
+        if (!isFresh) {
+            this.seenMessageIds.add(message.id);
+            this.messageCreationTimes.set(message.id, message.time.created);
+        }
+
+        return isFresh;
+    }
+
+    clearSession(sessionId: string): void {
+        this.sessionStartTimes.delete(sessionId);
+
+    }
+
+     hasSessionTiming(sessionId: string): boolean {
+         return this.sessionStartTimes.has(sessionId);
+     }
+
+     hasBeenAnimated(messageId: string): boolean {
+        return this.seenMessageIds.has(messageId);
+    }
+
+    markMessageAsAnimated(messageId: string, createdTime: number): void {
+        this.seenMessageIds.add(messageId);
+        this.messageCreationTimes.set(messageId, createdTime);
+    }
+
+    clearAll(): void {
+        this.sessionStartTimes.clear();
+        this.seenMessageIds.clear();
+        this.messageCreationTimes.clear();
+    }
+
+    getDebugInfo(): {
+        sessionStartTimes: Map<string, number>;
+        seenMessageIds: Set<string>;
+        messageCreationTimes: Map<string, number>;
+    } {
+        return {
+            sessionStartTimes: new Map(this.sessionStartTimes),
+            seenMessageIds: new Set(this.seenMessageIds),
+            messageCreationTimes: new Map(this.messageCreationTimes)
+        };
+    }
+}
\ No newline at end of file
diff --git a/packages/ui/src/lib/messages/agentMentions.ts b/packages/ui/src/lib/messages/agentMentions.ts
new file mode 100644
index 00000000..845d39b2
--- /dev/null
+++ b/packages/ui/src/lib/messages/agentMentions.ts
@@ -0,0 +1,75 @@
+import type { Agent } from "@opencode-ai/sdk";
+
+export interface AgentMentionSource {
+  value: string;
+  start: number;
+  end: number;
+}
+
+export interface ParsedAgentMention {
+  name: string;
+  source?: AgentMentionSource;
+}
+
+export interface ParsedAgentResult {
+  sanitizedText: string;
+  mention: ParsedAgentMention | null;
+}
+
+const isWordBoundaryChar = (char: string | null): boolean => {
+  if (!char) {
+    return true;
+  }
+  return /(\s|\(|\)|\[|\]|\{|\}|"|'|`|,|\.|;|:)/.test(char);
+};
+
+export const parseAgentMentions = (rawText: string, agents: Agent[]): ParsedAgentResult => {
+  if (typeof rawText !== "string" || rawText.length === 0) {
+    return { sanitizedText: rawText, mention: null };
+  }
+
+  const nonPrimaryAgents = agents.filter((agent) => agent.mode && agent.mode !== "primary");
+  if (nonPrimaryAgents.length === 0 || !rawText.includes("#")) {
+    return { sanitizedText: rawText, mention: null };
+  }
+
+  let firstMention: ParsedAgentMention | null = null;
+
+  for (const agent of nonPrimaryAgents) {
+    const pattern = new RegExp(`#${agent.name}\\b`, "gi");
+    let match: RegExpExecArray | null;
+
+    while ((match = pattern.exec(rawText)) !== null) {
+      const start = match.index;
+      const end = start + match[0].length;
+      const charBefore = start > 0 ? rawText[start - 1] : null;
+
+      if (!isWordBoundaryChar(charBefore)) {
+        continue;
+      }
+
+      const mention: ParsedAgentMention = {
+        name: agent.name,
+        source: {
+          value: match[0],
+          start,
+          end,
+        },
+      };
+
+      if (!firstMention) {
+        firstMention = mention;
+      }
+
+    }
+  }
+
+  if (!firstMention) {
+    return { sanitizedText: rawText, mention: null };
+  }
+
+  return {
+    sanitizedText: rawText,
+    mention: firstMention,
+  };
+};
diff --git a/packages/ui/src/lib/messages/synthetic.ts b/packages/ui/src/lib/messages/synthetic.ts
new file mode 100644
index 00000000..3ca1b679
--- /dev/null
+++ b/packages/ui/src/lib/messages/synthetic.ts
@@ -0,0 +1,16 @@
+import type { Part } from "@opencode-ai/sdk";
+
+const isSyntheticPart = (part: Part | undefined): boolean => {
+    if (!part || typeof part !== "object") {
+        return false;
+    }
+    return Boolean((part as { synthetic?: boolean }).synthetic);
+};
+
+export const isFullySyntheticMessage = (parts: Part[] | undefined): boolean => {
+    if (!Array.isArray(parts) || parts.length === 0) {
+        return false;
+    }
+
+    return parts.every((part) => isSyntheticPart(part));
+};
diff --git a/packages/ui/src/lib/opencode/client.ts b/packages/ui/src/lib/opencode/client.ts
new file mode 100644
index 00000000..4edddc61
--- /dev/null
+++ b/packages/ui/src/lib/opencode/client.ts
@@ -0,0 +1,1066 @@
+import { createOpencodeClient, OpencodeClient } from "@opencode-ai/sdk";
+import type { FilesAPI, RuntimeAPIs } from "../api/types";
+import { getDesktopHomeDirectory } from "../desktop";
+import type {
+  Session,
+  Message,
+  Part,
+  Provider,
+  Config,
+  Model,
+  Agent,
+  TextPartInput,
+  FilePartInput,
+  Event,
+} from "@opencode-ai/sdk";
+type StreamEvent<TData> = {
+  data: TData;
+  event?: string;
+  id?: string;
+  retry?: number;
+};
+
+// Use relative path by default (works with both dev and nginx proxy server)
+// Can be overridden with VITE_OPENCODE_URL for absolute URLs in special deployments
+const DEFAULT_BASE_URL = import.meta.env.VITE_OPENCODE_URL || "/api";
+const ABSOLUTE_URL_PATTERN = /^[a-zA-Z][a-zA-Z\d+\-.]*:\/\//;
+
+const ensureAbsoluteBaseUrl = (candidate: string): string => {
+  const normalized = typeof candidate === "string" && candidate.trim().length > 0 ? candidate.trim() : "/api";
+
+  if (ABSOLUTE_URL_PATTERN.test(normalized)) {
+    return normalized;
+  }
+
+  if (typeof window === "undefined") {
+    return normalized;
+  }
+
+  const baseReference = window.location?.href || window.location?.origin;
+  if (!baseReference) {
+    return normalized;
+  }
+
+  try {
+    return new URL(normalized, baseReference).toString();
+  } catch (error) {
+    console.warn("Failed to normalize OpenCode base URL:", error);
+    return normalized;
+  }
+};
+
+const resolveDesktopBaseUrl = (): string | null => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const desktopServer = (window as typeof window & {
+    __OPENCHAMBER_DESKTOP_SERVER__?: { origin: string; apiPrefix?: string };
+    __OPENCHAMBER_RUNTIME_APIS__?: RuntimeAPIs;
+  }).__OPENCHAMBER_DESKTOP_SERVER__;
+
+  const isDesktop = Boolean(
+    (window as typeof window & { __OPENCHAMBER_RUNTIME_APIS__?: RuntimeAPIs }).__OPENCHAMBER_RUNTIME_APIS__?.runtime?.isDesktop
+  );
+
+  if (!desktopServer || !isDesktop) {
+    return null;
+  }
+
+  const origin = typeof desktopServer.origin === "string" && desktopServer.origin.length > 0 ? desktopServer.origin : null;
+  if (!origin) {
+    return null;
+  }
+
+  return `${origin}/api`;
+};
+
+interface App {
+  version?: string;
+  [key: string]: unknown;
+}
+
+export type FilesystemEntry = {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  isFile: boolean;
+  isSymbolicLink?: boolean;
+};
+
+export type ProjectFileSearchHit = {
+  name: string;
+  path: string;
+  relativePath: string;
+  extension?: string;
+};
+
+type AgentPartInputLite = {
+  type: 'agent';
+  name: string;
+  source?: {
+    value: string;
+    start: number;
+    end: number;
+  };
+};
+
+export type DirectorySwitchResult = {
+  success: boolean;
+  restarted: boolean;
+  path: string;
+  agents?: Agent[];
+  providers?: Provider[];
+  models?: unknown[];
+};
+
+const normalizeFsPath = (path: string): string => path.replace(/\\/g, "/");
+
+const getDesktopFilesApi = (): FilesAPI | null => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const apis = (window as typeof window & { __OPENCHAMBER_RUNTIME_APIS__?: RuntimeAPIs }).__OPENCHAMBER_RUNTIME_APIS__;
+  if (apis && apis.runtime?.isDesktop && apis.files) {
+    return apis.files;
+  }
+  return null;
+};
+
+class OpencodeService {
+  private client: OpencodeClient;
+  private baseUrl: string;
+  private sseAbortController: AbortController | null = null;
+  private currentDirectory: string | undefined = undefined;
+
+  constructor(baseUrl: string = DEFAULT_BASE_URL) {
+    const desktopBase = resolveDesktopBaseUrl();
+    const requestedBaseUrl = desktopBase || baseUrl;
+    this.baseUrl = ensureAbsoluteBaseUrl(requestedBaseUrl);
+    this.client = createOpencodeClient({ baseUrl: this.baseUrl });
+  }
+
+  private normalizeCandidatePath(path?: string | null): string | null {
+    if (typeof path !== 'string') {
+      return null;
+    }
+
+    const trimmed = path.trim();
+    if (!trimmed) {
+      return null;
+    }
+
+    const normalized = trimmed.replace(/\\/g, '/');
+    const withoutTrailingSlash = normalized.length > 1 ? normalized.replace(/\/+$/, '') : normalized;
+
+    return withoutTrailingSlash || null;
+  }
+
+  private deriveHomeDirectory(path: string): { homeDirectory: string; username?: string } {
+    const windowsMatch = path.match(/^([A-Za-z]:)(?:\/|$)/);
+    if (windowsMatch) {
+      const drive = windowsMatch[1];
+      const remainder = path.slice(drive.length + (path.charAt(drive.length) === '/' ? 1 : 0));
+      const segments = remainder.split('/').filter(Boolean);
+
+      if (segments.length >= 2) {
+        const homeDirectory = `${drive}/${segments[0]}/${segments[1]}`;
+        return { homeDirectory, username: segments[1] };
+      }
+
+      if (segments.length === 1) {
+        const homeDirectory = `${drive}/${segments[0]}`;
+        return { homeDirectory, username: segments[0] };
+      }
+
+      return { homeDirectory: drive, username: undefined };
+    }
+
+    const absolute = path.startsWith('/');
+    const segments = path.split('/').filter(Boolean);
+
+    if (segments.length >= 2 && (segments[0] === 'Users' || segments[0] === 'home')) {
+      const homeDirectory = `${absolute ? '/' : ''}${segments[0]}/${segments[1]}`;
+      return { homeDirectory, username: segments[1] };
+    }
+
+    if (absolute) {
+      if (segments.length === 0) {
+        return { homeDirectory: '/', username: undefined };
+      }
+      const homeDirectory = `/${segments.join('/')}`;
+      return { homeDirectory, username: segments[segments.length - 1] };
+    }
+
+    if (segments.length > 0) {
+      const homeDirectory = `/${segments.join('/')}`;
+      return { homeDirectory, username: segments[segments.length - 1] };
+    }
+
+    return { homeDirectory: '/', username: undefined };
+  }
+
+  // Set the current working directory for all API calls
+  setDirectory(directory: string | undefined) {
+    this.currentDirectory = directory;
+  }
+
+  getDirectory(): string | undefined {
+    return this.currentDirectory;
+  }
+
+  async withDirectory<T>(directory: string | undefined | null, fn: () => Promise<T>): Promise<T> {
+    if (directory === undefined || directory === null) {
+      return fn();
+    }
+
+    const previousDirectory = this.currentDirectory;
+    this.currentDirectory = directory;
+    try {
+      return await fn();
+    } finally {
+      this.currentDirectory = previousDirectory;
+    }
+  }
+
+  // Get the raw API client for direct access
+  getApiClient(): OpencodeClient {
+    return this.client;
+  }
+
+  // Get system information including home directory
+  async getSystemInfo(): Promise<{ homeDirectory: string; username?: string }> {
+    const candidates = new Set<string>();
+    const addCandidate = (value?: string | null) => {
+      const normalized = this.normalizeCandidatePath(value);
+      if (normalized) {
+        candidates.add(normalized);
+      }
+    };
+
+    try {
+      const response = await this.client.path.get({
+        query: this.currentDirectory ? { directory: this.currentDirectory } : undefined
+      });
+      const info = response.data;
+      if (info) {
+        addCandidate(info.directory);
+        addCandidate(info.worktree);
+        addCandidate(info.state);
+      }
+    } catch (error) {
+      console.debug('Failed to load path info:', error);
+    }
+
+    if (!candidates.size) {
+      try {
+        const project = await this.client.project.current({
+          query: this.currentDirectory ? { directory: this.currentDirectory } : undefined
+        });
+        addCandidate(project.data?.worktree);
+      } catch (error) {
+        console.debug('Failed to load project info:', error);
+      }
+    }
+
+    if (!candidates.size) {
+      try {
+        const sessions = await this.listSessions();
+        sessions.forEach((session) => addCandidate(session.directory));
+      } catch (error) {
+        console.debug('Failed to inspect sessions for system info:', error);
+      }
+    }
+
+    addCandidate(this.currentDirectory);
+
+    if (typeof window !== 'undefined') {
+      try {
+        addCandidate(window.localStorage.getItem('lastDirectory'));
+        addCandidate(window.localStorage.getItem('homeDirectory'));
+      } catch {
+        // Access to storage failed (e.g. privacy mode)
+      }
+    }
+
+    if (!candidates.size && typeof process !== 'undefined' && typeof process.cwd === 'function') {
+      addCandidate(process.cwd());
+    }
+
+    if (!candidates.size) {
+      return { homeDirectory: '/', username: undefined };
+    }
+
+    const [primary] = Array.from(candidates);
+    return this.deriveHomeDirectory(primary);
+  }
+
+  // Session Management
+  async listSessions(): Promise<Session[]> {
+    const response = await this.client.session.list({
+      query: this.currentDirectory ? { directory: this.currentDirectory } : undefined
+    });
+    return Array.isArray(response.data) ? response.data : [];
+  }
+
+  async createSession(params?: { parentID?: string; title?: string }): Promise<Session> {
+    const response = await this.client.session.create({
+      query: this.currentDirectory ? { directory: this.currentDirectory } : undefined,
+      body: {
+        parentID: params?.parentID,
+        title: params?.title
+      }
+    });
+    if (!response.data) throw new Error('Failed to create session');
+    return response.data;
+  }
+
+  async getSession(id: string): Promise<Session> {
+    const response = await this.client.session.get({
+      path: { id },
+      query: this.currentDirectory ? { directory: this.currentDirectory } : undefined
+    });
+    if (!response.data) throw new Error('Session not found');
+    return response.data;
+  }
+
+  async deleteSession(id: string): Promise<boolean> {
+    const response = await this.client.session.delete({
+      path: { id },
+      query: this.currentDirectory ? { directory: this.currentDirectory } : undefined
+    });
+    return response.data || false;
+  }
+
+  async updateSession(id: string, title?: string): Promise<Session> {
+    const response = await this.client.session.update({
+      path: { id },
+      query: this.currentDirectory ? { directory: this.currentDirectory } : undefined,
+      body: { title }
+    });
+    if (!response.data) throw new Error('Failed to update session');
+    return response.data;
+  }
+
+  async getSessionMessages(id: string): Promise<{ info: Message; parts: Part[] }[]> {
+    const response = await this.client.session.messages({
+      path: { id },
+      query: this.currentDirectory ? { directory: this.currentDirectory } : undefined
+    });
+    return response.data || [];
+  }
+
+  async sendMessage(params: {
+    id: string;
+    providerID: string;
+    modelID: string;
+    text: string;
+    agent?: string;
+    files?: Array<{
+      type: 'file';
+      mime: string;
+      filename?: string;
+      url: string;
+    }>;
+    messageId?: string;
+    agentMentions?: Array<{ name: string; source?: { value: string; start: number; end: number } }>;
+  }): Promise<string> {
+    // Generate a temporary client-side ID for optimistic UI
+    // This ID won't be sent to the server - server will generate its own
+    const baseTimestamp = Date.now();
+    const tempMessageId = params.messageId ?? `temp_${baseTimestamp}_${Math.random().toString(36).substring(2, 9)}`;
+
+    // Build parts array using SDK types (TextPartInput | FilePartInput) plus lightweight agent parts
+    const parts: Array<TextPartInput | FilePartInput | AgentPartInputLite> = [];
+
+    // Add text part if there's content
+    if (params.text && params.text.trim()) {
+      const textPart: TextPartInput = {
+        type: 'text',
+        text: params.text
+      };
+      parts.push(textPart);
+    }
+
+    // Add file parts if provided
+    if (params.files && params.files.length > 0) {
+      params.files.forEach((file) => {
+        const filePart: FilePartInput = {
+          type: 'file',
+          mime: file.mime,
+          filename: file.filename,
+          url: file.url
+        };
+        parts.push(filePart);
+      });
+    }
+
+    if (params.agentMentions && params.agentMentions.length > 0) {
+      const [first] = params.agentMentions;
+      if (first?.name) {
+        parts.push({
+          type: 'agent',
+          name: first.name,
+          ...(first.source ? { source: first.source } : {}),
+        });
+      }
+    }
+
+    // Ensure we have at least one part
+    if (parts.length === 0) {
+      throw new Error('Message must have at least one part (text or file)');
+    }
+
+    // Use SDK session.prompt() method
+    // DON'T send messageID - let server generate it (fixes Claude empty response issue)
+    await this.client.session.prompt({
+      path: { id: params.id },
+      query: this.currentDirectory ? { directory: this.currentDirectory } : undefined,
+      body: {
+        // messageID intentionally omitted - server will generate
+        model: {
+          providerID: params.providerID,
+          modelID: params.modelID
+        },
+        agent: params.agent,
+        parts
+      }
+    });
+
+    // Return temporary ID for optimistic UI
+    // Real messageID will come from server via SSE events
+    return tempMessageId;
+  }
+
+  async abortSession(id: string): Promise<boolean> {
+    const response = await this.client.session.abort({
+      path: { id },
+      throwOnError: true,
+    });
+    return Boolean(response.data);
+  }
+
+  async getSessionStatus(): Promise<
+    Record<string, { type: "idle" | "busy" | "retry"; attempt?: number; message?: string; next?: number }>
+  > {
+    try {
+      const base = this.baseUrl.replace(/\/$/, "");
+      const url = new URL(`${base}/session/status`);
+
+      if (this.currentDirectory && this.currentDirectory.length > 0) {
+        url.searchParams.set("directory", this.currentDirectory);
+      }
+
+      const response = await fetch(url.toString(), {
+        method: "GET",
+        headers: {
+          Accept: "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        return {};
+      }
+
+      const data = await response.json().catch(() => null);
+      if (!data || typeof data !== "object") {
+        return {};
+      }
+
+      return data as Record<
+        string,
+        { type: "idle" | "busy" | "retry"; attempt?: number; message?: string; next?: number }
+      >;
+    } catch {
+      return {};
+    }
+  }
+
+  // Permissions
+  async respondToPermission(
+    sessionId: string,
+    permissionId: string,
+    response: 'once' | 'always' | 'reject'
+  ): Promise<boolean> {
+    const result = await this.client.postSessionIdPermissionsPermissionId({
+      path: { id: sessionId, permissionID: permissionId },
+      query: this.currentDirectory ? { directory: this.currentDirectory } : undefined,
+      body: { response }
+    });
+    return result.data || false;
+  }
+
+  // Configuration
+  async getConfig(): Promise<Config> {
+    const response = await this.client.config.get();
+    if (!response.data) throw new Error('Failed to get config');
+    return response.data;
+  }
+
+  async updateConfig(config: Record<string, unknown>): Promise<Config> {
+    // IMPORTANT: Do NOT pass directory parameter for config updates
+    // The config should be global, not directory-specific
+    const url = `${this.baseUrl}/config`;
+
+    const response = await fetch(url, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(config)
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('[OpencodeClient] Failed to update config:', response.status, errorText);
+      throw new Error(`Failed to update config: ${response.status} ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return data;
+  }
+
+  /**
+   * Update config with a partial modification function.
+   * This handles the GET-modify-PATCH pattern required by OpenCode API.
+   *
+   * NOTE: This method is deprecated for agent configuration.
+   * Use backend endpoints at /api/config/agents/* instead, which write directly to files.
+   *
+   * @param modifier Function that receives current config and returns modified config
+   * @returns Updated config from server
+   */
+  async updateConfigPartial(modifier: (config: Config) => Config): Promise<Config> {
+    const currentConfig = await this.getConfig();
+    const updatedConfig = modifier(currentConfig);
+    const result = await this.updateConfig(updatedConfig);
+    return result;
+  }
+
+  async getProviders(): Promise<{
+    providers: Provider[];
+    default: { [key: string]: string };
+  }> {
+    const response = await this.client.config.providers({
+      query: this.currentDirectory ? { directory: this.currentDirectory } : undefined
+    });
+    if (!response.data) throw new Error('Failed to get providers');
+    return response.data;
+  }
+
+  // App Management - using config endpoint since /app doesn't exist in this version
+  async getApp(): Promise<App> {
+    // Return basic app info from config
+    const config = await this.getConfig();
+    return {
+      version: "0.0.3", // from the OpenAPI spec
+      config
+    };
+  }
+
+  async initApp(): Promise<boolean> {
+    try {
+      // Just check if we can connect since there's no init endpoint
+      return await this.checkHealth();
+    } catch {
+      return false;
+    }
+  }
+
+  // Agent Management
+  async listAgents(): Promise<Agent[]> {
+    try {
+      const response = await this.client.app.agents({
+        query: this.currentDirectory ? { directory: this.currentDirectory } : undefined
+      });
+      return response.data || [];
+    } catch {
+      return [];
+    }
+  }
+
+  // Event Streaming using SDK SSE (Server-Sent Events) with AsyncGenerator
+  subscribeToEvents(
+    onMessage: (event: { type: string; properties?: Record<string, unknown> }) => void,
+    onError?: (error: unknown) => void,
+    onOpen?: () => void,
+    directoryOverride?: string | null
+  ): () => void {
+    // Stop any existing subscription
+    if (this.sseAbortController) {
+      this.sseAbortController.abort();
+    }
+
+    // Create new AbortController for this subscription
+    const abortController = new AbortController();
+    this.sseAbortController = abortController;
+
+    console.log('[OpencodeClient] Starting SSE subscription...');
+
+    // Start async generator in background with reconnect on failure
+    (async () => {
+      const resolvedDirectory =
+        typeof directoryOverride === 'string' && directoryOverride.trim().length > 0
+          ? directoryOverride.trim()
+          : this.currentDirectory;
+      console.log('[OpencodeClient] Connecting to SSE with directory:', resolvedDirectory);
+
+      const connect = async (attempt: number): Promise<void> => {
+        try {
+          const result = await this.client.event.subscribe({
+            query: resolvedDirectory ? { directory: resolvedDirectory } : undefined,
+            signal: abortController.signal,
+            sseMaxRetryAttempts: 2,
+            sseDefaultRetryDelay: 500,
+            sseMaxRetryDelay: 8000,
+            onSseError: (error) => {
+              if (error instanceof Error && error.name === 'AbortError') {
+                return;
+              }
+              console.error('[OpencodeClient] SSE error:', error);
+              if (onError && !abortController.signal.aborted) {
+                onError(error);
+              }
+            },
+            onSseEvent: (event: StreamEvent<unknown>) => {
+              if (!abortController.signal.aborted) {
+                const payload = event.data;
+                if (payload && typeof payload === 'object') {
+                  onMessage(payload as Event);
+                }
+              }
+            },
+          });
+
+          if (onOpen && !abortController.signal.aborted) {
+            console.log('[OpencodeClient] SSE connection opened');
+            onOpen();
+          }
+
+          for await (const _ of result.stream) {
+            void _;
+            if (abortController.signal.aborted) {
+              console.log('[OpencodeClient] SSE stream aborted');
+              break;
+            }
+          }
+        } catch (error: unknown) {
+          if ((error as Error)?.name === 'AbortError' || abortController.signal.aborted) {
+            console.log('[OpencodeClient] SSE stream aborted normally');
+            return;
+          }
+          console.error('[OpencodeClient] SSE stream error (will retry):', error);
+          if (onError) {
+            onError(error);
+          }
+          const delay = Math.min(500 * Math.pow(2, attempt), 8000);
+          await new Promise((resolve) => setTimeout(resolve, delay));
+          if (!abortController.signal.aborted) {
+            await connect(attempt + 1);
+          }
+        }
+      };
+
+      try {
+        await connect(0);
+      } finally {
+        console.log('[OpencodeClient] SSE subscription cleanup');
+        if (this.sseAbortController === abortController) {
+          this.sseAbortController = null;
+        }
+      }
+    })();
+
+    // Return cleanup function
+    return () => {
+      if (this.sseAbortController === abortController) {
+        this.sseAbortController = null;
+      }
+      abortController.abort();
+    };
+  }
+
+  // File Operations
+  async readFile(path: string): Promise<string> {
+    try {
+      // For now, we'll use a placeholder implementation
+      // In a real implementation, this would call an API endpoint to read the file
+      const response = await fetch(`${this.baseUrl}/files/read`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          path,
+          directory: this.currentDirectory
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to read file: ${response.statusText}`);
+      }
+
+      const data = await response.text();
+      return data;
+    } catch {
+      // Return placeholder for development
+      return `// Content of ${path}\n// This would be loaded from the server`;
+    }
+  }
+
+  async listFiles(directory?: string): Promise<Record<string, unknown>[]> {
+    try {
+      const targetDir = directory || this.currentDirectory || '/';
+      const response = await fetch(`${this.baseUrl}/files/list`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ directory: targetDir })
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to list files: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      return data;
+    } catch {
+      // Return mock data for development
+      return [];
+    }
+  }
+
+  // Command Management
+  async listCommands(): Promise<Array<{ name: string; description?: string; agent?: string; model?: string }>> {
+    try {
+      const response = await this.client.command.list({
+        query: this.currentDirectory ? { directory: this.currentDirectory } : undefined
+      });
+      // Return only lightweight info for autocomplete
+      return (response.data || []).map((cmd: Record<string, unknown>) => ({
+        name: cmd.name as string,
+        description: cmd.description as string | undefined,
+        agent: cmd.agent as string | undefined,
+        model: cmd.model as string | undefined
+        // Intentionally excluding template to keep memory usage low
+      }));
+    } catch {
+      return [];
+    }
+  }
+
+  async listCommandsWithDetails(): Promise<Array<{ name: string; description?: string; agent?: string; model?: string; template?: string; subtask?: boolean }>> {
+    try {
+      const response = await this.client.command.list({
+        query: this.currentDirectory ? { directory: this.currentDirectory } : undefined
+      });
+      // Return full command details including template
+      return (response.data || []).map((cmd: Record<string, unknown>) => ({
+        name: cmd.name as string,
+        description: cmd.description as string | undefined,
+        agent: cmd.agent as string | undefined,
+        model: cmd.model as string | undefined,
+        template: cmd.template as string | undefined,
+        subtask: cmd.subtask as boolean | undefined
+      }));
+    } catch {
+      return [];
+    }
+  }
+
+  async getCommandDetails(name: string): Promise<{ name: string; template: string; description?: string; agent?: string; model?: string } | null> {
+    try {
+      const response = await this.client.command.list({
+        query: this.currentDirectory ? { directory: this.currentDirectory } : undefined
+      });
+
+      if (response.data) {
+        const command = response.data.find((cmd: Record<string, unknown>) => cmd.name === name);
+        if (command) {
+          return {
+            name: command.name as string,
+            template: command.template as string,
+            description: command.description as string | undefined,
+            agent: command.agent as string | undefined,
+            model: command.model as string | undefined
+          };
+        }
+      }
+      return null;
+    } catch {
+      return null;
+    }
+  }
+
+  // Health Check - using /health endpoint for detailed status
+  async checkHealth(): Promise<boolean> {
+    try {
+      // Health endpoint is at root, not under /api
+      let healthUrl: string;
+      const normalizedBase = this.baseUrl.endsWith('/') ? this.baseUrl.replace(/\/+$/, '') : this.baseUrl;
+      if (normalizedBase === '/api') {
+        healthUrl = '/health';
+      } else if (normalizedBase.endsWith('/api')) {
+        // Desktop: http://127.0.0.1:PORT/api -> http://127.0.0.1:PORT/health
+        healthUrl = `${normalizedBase.slice(0, -4)}/health`;
+      } else {
+        healthUrl = `${normalizedBase}/health`;
+      }
+      const response = await fetch(healthUrl);
+      if (!response.ok) {
+        return false;
+      }
+
+      const healthData = await response.json();
+
+      // Check if OpenCode is actually ready (not just OpenChamber server)
+      if (healthData.isOpenCodeReady === false) {
+        return false;
+      }
+
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  // File System Operations
+  async createDirectory(dirPath: string): Promise<{ success: boolean; path: string }> {
+    const desktopFiles = getDesktopFilesApi();
+    if (desktopFiles?.createDirectory) {
+      try {
+        return await desktopFiles.createDirectory(dirPath);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        throw new Error(message || 'Failed to create directory');
+      }
+    }
+
+    const response = await fetch(`${this.baseUrl}/fs/mkdir`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ path: dirPath }),
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: 'Failed to create directory' }));
+      throw new Error(error.error || 'Failed to create directory');
+    }
+
+    const result = await response.json();
+    return result;
+  }
+
+  async listLocalDirectory(directoryPath: string | null | undefined): Promise<FilesystemEntry[]> {
+    const desktopFiles = getDesktopFilesApi();
+    if (desktopFiles) {
+      try {
+        const result = await desktopFiles.listDirectory(directoryPath || '');
+        if (!result || !Array.isArray(result.entries)) {
+          return [];
+        }
+        return result.entries.map<FilesystemEntry>((entry) => ({
+          name: entry.name,
+          path: normalizeFsPath(entry.path),
+          isDirectory: !!entry.isDirectory,
+          isFile: !entry.isDirectory,
+          isSymbolicLink: false,
+        }));
+      } catch (error) {
+        console.error('Failed to list directory contents:', error);
+        throw error;
+      }
+    }
+
+    try {
+      const params = new URLSearchParams();
+      if (directoryPath && directoryPath.trim().length > 0) {
+        params.set('path', directoryPath);
+      }
+      const query = params.toString();
+      const response = await fetch(`${this.baseUrl}/fs/list${query ? `?${query}` : ''}`);
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({}));
+        const message = typeof error.error === 'string' ? error.error : 'Failed to list directory';
+        throw new Error(message);
+      }
+
+      const result = await response.json();
+      if (!result || !Array.isArray(result.entries)) {
+        return [];
+      }
+
+      return result.entries as FilesystemEntry[];
+    } catch (error) {
+      console.error('Failed to list directory contents:', error);
+      throw error;
+    }
+  }
+
+  async searchFiles(query: string, options?: { directory?: string | null; limit?: number }): Promise<ProjectFileSearchHit[]> {
+    const desktopFiles = getDesktopFilesApi();
+    const directory = typeof options?.directory === 'string' && options.directory.trim().length > 0
+      ? options.directory.trim()
+      : this.currentDirectory;
+    const normalizedDirectory = directory ? normalizeFsPath(directory) : null;
+
+    if (desktopFiles) {
+      try {
+        const results = await desktopFiles.search({
+          directory: directory || '',
+          query,
+          maxResults: options?.limit,
+        });
+
+        if (!Array.isArray(results)) {
+          return [];
+        }
+
+        return results.map<ProjectFileSearchHit>((file) => {
+          const normalizedPath = normalizeFsPath(file.path);
+          const name = normalizedPath.split('/').filter(Boolean).pop() || normalizedPath;
+          const relativePath = (() => {
+            if (file.preview && file.preview.length > 0 && typeof file.preview[0] === 'string') {
+              return normalizeFsPath(file.preview[0]);
+            }
+            if (normalizedDirectory && normalizedPath.startsWith(normalizedDirectory)) {
+              const suffix = normalizedPath.slice(normalizedDirectory.length).replace(/^\/+/, '');
+              return suffix || name;
+            }
+            return name;
+          })();
+
+          return {
+            name,
+            path: normalizedPath,
+            relativePath,
+            extension: name.includes('.') ? name.split('.').pop()?.toLowerCase() : undefined,
+          };
+        });
+      } catch (error) {
+        console.error('Failed to search files:', error);
+        throw error;
+      }
+    }
+
+    const params = new URLSearchParams();
+    if (directory && directory.length > 0) {
+      params.set('directory', directory);
+    }
+    if (typeof query === 'string') {
+      params.set('q', query);
+    }
+    if (typeof options?.limit === 'number' && Number.isFinite(options.limit)) {
+      params.set('limit', String(options.limit));
+    }
+
+    const searchUrl = `${this.baseUrl}/fs/search${params.toString() ? `?${params.toString()}` : ''}`;
+    const response = await fetch(searchUrl, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json'
+      }
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      const message = typeof error.error === 'string' ? error.error : 'Failed to search files';
+      throw new Error(message);
+    }
+
+    const result = await response.json();
+    if (!result || !Array.isArray(result.files)) {
+      return [];
+    }
+    return result.files as ProjectFileSearchHit[];
+  }
+
+  async getFilesystemHome(): Promise<string | null> {
+    // Optimization: Check for desktop runtime first to avoid unnecessary network calls
+    // and fix the "SyntaxError" warning when the endpoint is missing
+    const desktopHome = await getDesktopHomeDirectory();
+    if (desktopHome) {
+      return desktopHome;
+    }
+
+    try {
+      const response = await fetch(`${this.baseUrl}/fs/home`, {
+        method: 'GET',
+        headers: {
+          Accept: 'application/json'
+        }
+      });
+
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({}));
+        const message =
+          typeof error.error === 'string' && error.error.length > 0
+            ? error.error
+            : 'Failed to resolve home directory';
+        throw new Error(message);
+      }
+
+      const payload = await response.json();
+      if (payload && typeof payload.home === 'string' && payload.home.length > 0) {
+        return payload.home;
+      }
+      return null;
+    } catch (error) {
+      console.warn('Failed to resolve filesystem home directory:', error);
+      return null;
+    }
+  }
+
+  async setOpenCodeWorkingDirectory(directoryPath: string | null | undefined): Promise<DirectorySwitchResult | null> {
+    if (!directoryPath || typeof directoryPath !== 'string' || !directoryPath.trim()) {
+      console.warn('[OpencodeClient] setOpenCodeWorkingDirectory: invalid path', directoryPath);
+      return null;
+    }
+
+    const url = `${this.baseUrl}/opencode/directory`;
+    console.log('[OpencodeClient] POST', url, 'with path:', directoryPath);
+
+    try {
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ path: directoryPath })
+      });
+
+      const payload = await response.json().catch(() => null);
+
+      if (!response.ok) {
+        const error = payload ?? {};
+        const message =
+          typeof error.error === 'string' && error.error.length > 0
+            ? error.error
+            : 'Failed to update OpenCode working directory';
+        throw new Error(message);
+      }
+
+      if (payload && typeof payload === 'object') {
+        return payload as DirectorySwitchResult;
+      }
+
+      return {
+        success: true,
+        restarted: false,
+        path: directoryPath
+      };
+    } catch (error) {
+      console.warn('Failed to update OpenCode working directory:', error);
+      throw error;
+    }
+  }
+}
+
+// Exported singleton instance
+export const opencodeClient = new OpencodeService();
+
+// Exported types
+export type { Session, Message, Part, Provider, Config, Model };
+export type { App };
diff --git a/packages/ui/src/lib/permissions/editModeColors.ts b/packages/ui/src/lib/permissions/editModeColors.ts
new file mode 100644
index 00000000..3f7bfd53
--- /dev/null
+++ b/packages/ui/src/lib/permissions/editModeColors.ts
@@ -0,0 +1,30 @@
+import type { EditPermissionMode } from '@/stores/types/sessionTypes';
+
+export interface EditModeColors {
+    text: string;
+    border?: string;
+    background?: string;
+    borderWidth?: number;
+}
+
+export const getEditModeColors = (mode?: EditPermissionMode | null): EditModeColors | null => {
+    if (mode === 'full') {
+        return {
+            text: 'var(--status-info)',
+            border: 'var(--status-info-border)',
+            background: 'var(--status-info-background)',
+            borderWidth: 1.5,
+        };
+    }
+
+    if (mode === 'allow') {
+        return {
+            text: 'var(--status-success)',
+            border: 'var(--status-success-border)',
+            background: 'var(--status-success-background)',
+            borderWidth: 1.5,
+        };
+    }
+
+    return null;
+};
diff --git a/packages/ui/src/lib/permissions/editPermissionDefaults.ts b/packages/ui/src/lib/permissions/editPermissionDefaults.ts
new file mode 100644
index 00000000..08ef192e
--- /dev/null
+++ b/packages/ui/src/lib/permissions/editPermissionDefaults.ts
@@ -0,0 +1,101 @@
+import type { EditPermissionMode } from '@/stores/types/sessionTypes';
+
+export type BashPermissionValue = 'allow' | 'ask' | 'deny';
+export type BashPermissionSetting = BashPermissionValue | Record<string, BashPermissionValue | undefined>;
+export type SimplePermissionValue = 'allow' | 'ask' | 'deny' | undefined;
+
+const isRecord = (value: unknown): value is Record<string, unknown> => {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+
+const isBashPermissionMap = (value: unknown): value is Record<string, BashPermissionValue | undefined> => {
+    return isRecord(value);
+};
+
+const hasBashAskEntry = (permission?: BashPermissionSetting): boolean => {
+    if (!permission) {
+        return false;
+    }
+    if (typeof permission === 'string') {
+        return permission === 'ask';
+    }
+    if (isBashPermissionMap(permission)) {
+        return Object.values(permission).some((value) => value === 'ask');
+    }
+    return false;
+};
+
+const hasBashDenyEntry = (permission?: BashPermissionSetting): boolean => {
+    if (!permission) {
+        return false;
+    }
+    if (typeof permission === 'string') {
+        return permission === 'deny';
+    }
+    if (isBashPermissionMap(permission)) {
+        return Object.values(permission).some((value) => value === 'deny');
+    }
+    return false;
+};
+
+export interface EditPermissionInputs {
+    agentDefaultEditMode: EditPermissionMode;
+    webfetchPermission?: SimplePermissionValue;
+    bashPermission?: BashPermissionSetting;
+}
+
+export interface EditPermissionUIState {
+    cascadeDefaultMode: EditPermissionMode;
+    modeAvailability: Record<EditPermissionMode, boolean>;
+    autoApproveAvailable: boolean;
+    bashHasAsk: boolean;
+    bashHasDeny: boolean;
+    bashAllAllow: boolean;
+    webfetchIsAllow: boolean;
+    webfetchNotDeny: boolean;
+}
+
+export const calculateEditPermissionUIState = ({
+    agentDefaultEditMode,
+    webfetchPermission,
+    bashPermission,
+}: EditPermissionInputs): EditPermissionUIState => {
+    const bashHasAsk = hasBashAskEntry(bashPermission);
+    const bashHasDeny = hasBashDenyEntry(bashPermission);
+    const bashAllAllow = !bashHasAsk && !bashHasDeny;
+
+    const webfetchIsAllow = webfetchPermission === 'allow';
+    const webfetchNotDeny = webfetchPermission !== 'deny';
+
+    const editIsAllow = agentDefaultEditMode === 'allow' || agentDefaultEditMode === 'full';
+    const editIsAsk = agentDefaultEditMode === 'ask';
+
+    let cascadeDefaultMode: EditPermissionMode = agentDefaultEditMode;
+    if (editIsAllow && webfetchIsAllow && bashAllAllow) {
+        cascadeDefaultMode = 'full';
+    } else if (editIsAllow && bashHasAsk) {
+        cascadeDefaultMode = 'allow';
+    } else if (editIsAsk) {
+        cascadeDefaultMode = 'ask';
+    }
+
+    const modeAvailability: Record<EditPermissionMode, boolean> = {
+        ask: editIsAsk,
+        allow: editIsAsk || (editIsAllow && bashHasAsk),
+        full: agentDefaultEditMode !== 'deny' && webfetchNotDeny && bashHasAsk,
+        deny: false,
+    };
+
+    const autoApproveAvailable = modeAvailability.allow || modeAvailability.full;
+
+    return {
+        cascadeDefaultMode,
+        modeAvailability,
+        autoApproveAvailable,
+        bashHasAsk,
+        bashHasDeny,
+        bashAllAllow,
+        webfetchIsAllow,
+        webfetchNotDeny,
+    };
+};
diff --git a/packages/ui/src/lib/persistence.ts b/packages/ui/src/lib/persistence.ts
new file mode 100644
index 00000000..7a5483f9
--- /dev/null
+++ b/packages/ui/src/lib/persistence.ts
@@ -0,0 +1,270 @@
+import { getDesktopSettings, updateDesktopSettings as updateDesktopSettingsApi, isDesktopRuntime } from '@/lib/desktop';
+import type { DesktopSettings } from '@/lib/desktop';
+import { useUIStore } from '@/stores/useUIStore';
+import { loadAppearancePreferences, applyAppearancePreferences } from '@/lib/appearancePersistence';
+import { getRegisteredRuntimeAPIs } from '@/contexts/runtimeAPIRegistry';
+
+const persistToLocalStorage = (settings: DesktopSettings) => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  if (settings.themeId) {
+    localStorage.setItem('selectedThemeId', settings.themeId);
+  }
+  if (settings.themeVariant) {
+    localStorage.setItem('selectedThemeVariant', settings.themeVariant);
+  }
+  if (settings.lightThemeId) {
+    localStorage.setItem('lightThemeId', settings.lightThemeId);
+  }
+  if (settings.darkThemeId) {
+    localStorage.setItem('darkThemeId', settings.darkThemeId);
+  }
+  if (typeof settings.useSystemTheme === 'boolean') {
+    localStorage.setItem('useSystemTheme', String(settings.useSystemTheme));
+  }
+  if (settings.lastDirectory) {
+    localStorage.setItem('lastDirectory', settings.lastDirectory);
+  }
+  if (settings.homeDirectory) {
+    localStorage.setItem('homeDirectory', settings.homeDirectory);
+    window.__OPENCHAMBER_HOME__ = settings.homeDirectory;
+  }
+  if (Array.isArray(settings.pinnedDirectories) && settings.pinnedDirectories.length > 0) {
+    localStorage.setItem('pinnedDirectories', JSON.stringify(settings.pinnedDirectories));
+  } else {
+    localStorage.removeItem('pinnedDirectories');
+  }
+};
+
+type PersistApi = {
+  hasHydrated?: () => boolean;
+  onFinishHydration?: (callback: () => void) => (() => void) | void;
+};
+
+const getPersistApi = (): PersistApi | undefined => {
+  const candidate = (useUIStore as unknown as { persist?: PersistApi }).persist;
+  if (candidate && typeof candidate === 'object') {
+    return candidate;
+  }
+  return undefined;
+};
+
+const getRuntimeSettingsAPI = () => getRegisteredRuntimeAPIs()?.settings ?? null;
+
+const applyDesktopUiPreferences = (settings: DesktopSettings) => {
+  const store = useUIStore.getState();
+
+  if (typeof settings.showReasoningTraces === 'boolean' && settings.showReasoningTraces !== store.showReasoningTraces) {
+    store.setShowReasoningTraces(settings.showReasoningTraces);
+  }
+};
+
+const sanitizeWebSettings = (payload: unknown): DesktopSettings | null => {
+  if (!payload || typeof payload !== 'object') {
+    return null;
+  }
+
+  const candidate = payload as Record<string, unknown>;
+  const result: DesktopSettings = {};
+
+  if (typeof candidate.themeId === 'string' && candidate.themeId.length > 0) {
+    result.themeId = candidate.themeId;
+  }
+  if (candidate.useSystemTheme === true || candidate.useSystemTheme === false) {
+    result.useSystemTheme = candidate.useSystemTheme;
+  }
+  if (typeof candidate.themeVariant === 'string' && (candidate.themeVariant === 'light' || candidate.themeVariant === 'dark')) {
+    result.themeVariant = candidate.themeVariant;
+  }
+  if (typeof candidate.lightThemeId === 'string' && candidate.lightThemeId.length > 0) {
+    result.lightThemeId = candidate.lightThemeId;
+  }
+  if (typeof candidate.darkThemeId === 'string' && candidate.darkThemeId.length > 0) {
+    result.darkThemeId = candidate.darkThemeId;
+  }
+  if (typeof candidate.lastDirectory === 'string' && candidate.lastDirectory.length > 0) {
+    result.lastDirectory = candidate.lastDirectory;
+  }
+  if (typeof candidate.homeDirectory === 'string' && candidate.homeDirectory.length > 0) {
+    result.homeDirectory = candidate.homeDirectory;
+  }
+  if (Array.isArray(candidate.approvedDirectories)) {
+    result.approvedDirectories = candidate.approvedDirectories.filter(
+      (entry): entry is string => typeof entry === 'string' && entry.length > 0
+    );
+  }
+  if (Array.isArray(candidate.securityScopedBookmarks)) {
+    result.securityScopedBookmarks = candidate.securityScopedBookmarks.filter(
+      (entry): entry is string => typeof entry === 'string' && entry.length > 0
+    );
+  }
+  if (Array.isArray(candidate.pinnedDirectories)) {
+    result.pinnedDirectories = Array.from(
+      new Set(
+        candidate.pinnedDirectories.filter((entry): entry is string => typeof entry === 'string' && entry.length > 0)
+      )
+    );
+  }
+  if (typeof candidate.showReasoningTraces === 'boolean') {
+    result.showReasoningTraces = candidate.showReasoningTraces;
+  }
+
+  return result;
+};
+
+const fetchWebSettings = async (): Promise<DesktopSettings | null> => {
+  const runtimeSettings = getRuntimeSettingsAPI();
+  if (runtimeSettings) {
+    try {
+      const result = await runtimeSettings.load();
+      return sanitizeWebSettings(result.settings);
+    } catch (error) {
+      console.warn('Failed to load shared settings from runtime settings API:', error);
+
+    }
+  }
+
+  try {
+    const response = await fetch('/api/config/settings', {
+      method: 'GET',
+      headers: { Accept: 'application/json' },
+    });
+    if (!response.ok) {
+      return null;
+    }
+    const data = await response.json().catch(() => null);
+    return sanitizeWebSettings(data);
+  } catch (error) {
+    console.warn('Failed to load shared settings from server:', error);
+    return null;
+  }
+};
+
+export const syncDesktopSettings = async (): Promise<void> => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const persistApi = getPersistApi();
+
+  const applySettings = (settings: DesktopSettings) => {
+    persistToLocalStorage(settings);
+    const apply = () => applyDesktopUiPreferences(settings);
+
+    if (persistApi?.hasHydrated?.()) {
+      apply();
+    } else {
+      apply();
+      if (persistApi?.onFinishHydration) {
+        const unsubscribe = persistApi.onFinishHydration(() => {
+          unsubscribe?.();
+          apply();
+        });
+      }
+    }
+
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent<DesktopSettings>('openchamber:settings-synced', { detail: settings }));
+    }
+  };
+
+  try {
+    const settings = isDesktopRuntime() ? await getDesktopSettings() : await fetchWebSettings();
+    if (settings) {
+      applySettings(settings);
+    }
+  } catch (error) {
+    console.warn('Failed to synchronise settings:', error);
+  }
+};
+
+export const updateDesktopSettings = async (changes: Partial<DesktopSettings>): Promise<void> => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  if (isDesktopRuntime()) {
+    try {
+      const updated = await updateDesktopSettingsApi(changes);
+      if (updated) {
+        persistToLocalStorage(updated);
+        applyDesktopUiPreferences(updated);
+      }
+    } catch (error) {
+      console.warn('Failed to update desktop settings:', error);
+    }
+    return;
+  }
+
+  const runtimeSettings = getRuntimeSettingsAPI();
+  if (runtimeSettings) {
+    try {
+      const updated = await runtimeSettings.save(changes);
+      if (updated) {
+        persistToLocalStorage(updated);
+        applyDesktopUiPreferences(updated);
+      }
+      return;
+    } catch (error) {
+      console.warn('Failed to update settings via runtime settings API:', error);
+    }
+  }
+
+  try {
+    const response = await fetch('/api/config/settings', {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body: JSON.stringify(changes),
+    });
+
+    if (!response.ok) {
+      console.warn('Failed to update shared settings via API:', response.status, response.statusText);
+      return;
+    }
+
+    const updated = (await response.json().catch(() => null)) as DesktopSettings | null;
+    if (updated) {
+      persistToLocalStorage(updated);
+      applyDesktopUiPreferences(updated);
+    }
+  } catch (error) {
+    console.warn('Failed to update shared settings via API:', error);
+  }
+};
+
+export const initializeAppearancePreferences = async (): Promise<void> => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const persistApi = getPersistApi();
+
+  try {
+    const appearance = await loadAppearancePreferences();
+    if (!appearance) {
+      return;
+    }
+
+    const applyAppearance = () => applyAppearancePreferences(appearance);
+
+    if (persistApi?.hasHydrated?.()) {
+      applyAppearance();
+      return;
+    }
+
+    applyAppearance();
+    if (persistApi?.onFinishHydration) {
+      const unsubscribe = persistApi.onFinishHydration(() => {
+        unsubscribe?.();
+        applyAppearance();
+      });
+    }
+  } catch (error) {
+    console.warn('Failed to load appearance preferences:', error);
+  }
+};
diff --git a/packages/ui/src/lib/sessionEvents.ts b/packages/ui/src/lib/sessionEvents.ts
new file mode 100644
index 00000000..73705301
--- /dev/null
+++ b/packages/ui/src/lib/sessionEvents.ts
@@ -0,0 +1,56 @@
+import type { Session } from '@opencode-ai/sdk';
+import type { WorktreeMetadata } from '@/types/worktree';
+
+export type SessionDeleteRequest = {
+  sessions: Session[];
+  dateLabel?: string;
+  mode?: 'session' | 'worktree';
+  worktree?: WorktreeMetadata | null;
+};
+
+export type SessionCreateRequest = {
+  worktreeMode?: 'main' | 'create' | 'reuse';
+  parentID?: string | null;
+};
+
+type DeleteListener = (request: SessionDeleteRequest) => void;
+type CreateListener = (request: SessionCreateRequest) => void;
+type DirectoryListener = () => void;
+
+const deleteListeners = new Set<DeleteListener>();
+const createListeners = new Set<CreateListener>();
+const directoryListeners = new Set<DirectoryListener>();
+
+export const sessionEvents = {
+  onDeleteRequest(listener: DeleteListener) {
+    deleteListeners.add(listener);
+    return () => {
+      deleteListeners.delete(listener);
+    };
+  },
+  requestDelete(payload: SessionDeleteRequest) {
+    if (!payload.sessions.length) {
+      return;
+    }
+    deleteListeners.forEach((listener) => listener(payload));
+  },
+  onCreateRequest(listener: CreateListener) {
+    createListeners.add(listener);
+    return () => {
+      createListeners.delete(listener);
+    };
+  },
+  requestCreate(payload?: SessionCreateRequest) {
+    const request = payload ?? {};
+    createListeners.forEach((listener) => listener(request));
+  },
+  onDirectoryRequest(listener: DirectoryListener) {
+    directoryListeners.add(listener);
+    return () => {
+      directoryListeners.delete(listener);
+    };
+  },
+  requestDirectoryDialog() {
+    directoryListeners.forEach((listener) => listener());
+  },
+};
diff --git a/packages/ui/src/lib/terminalApi.ts b/packages/ui/src/lib/terminalApi.ts
new file mode 100644
index 00000000..08a59f68
--- /dev/null
+++ b/packages/ui/src/lib/terminalApi.ts
@@ -0,0 +1,233 @@
+
+
+export interface TerminalSession {
+  sessionId: string;
+  cols: number;
+  rows: number;
+}
+
+export interface TerminalStreamEvent {
+  type: 'connected' | 'data' | 'exit' | 'reconnecting';
+  data?: string;
+  exitCode?: number;
+  signal?: number | null;
+  attempt?: number;
+  maxAttempts?: number;
+}
+
+export interface CreateTerminalOptions {
+  cwd: string;
+  cols?: number;
+  rows?: number;
+}
+
+export interface ConnectStreamOptions {
+  maxRetries?: number;
+  initialRetryDelay?: number;
+  maxRetryDelay?: number;
+  connectionTimeout?: number;
+}
+
+export async function createTerminalSession(
+  options: CreateTerminalOptions
+): Promise<TerminalSession> {
+  const response = await fetch('/api/terminal/create', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      cwd: options.cwd,
+      cols: options.cols || 80,
+      rows: options.rows || 24,
+    }),
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: 'Failed to create terminal' }));
+    throw new Error(error.error || 'Failed to create terminal session');
+  }
+
+  return response.json();
+}
+
+export function connectTerminalStream(
+  sessionId: string,
+  onEvent: (event: TerminalStreamEvent) => void,
+  onError?: (error: Error, fatal?: boolean) => void,
+  options: ConnectStreamOptions = {}
+): () => void {
+  const {
+    maxRetries = 3,
+    initialRetryDelay = 1000,
+    maxRetryDelay = 8000,
+    connectionTimeout = 10000,
+  } = options;
+
+  let eventSource: EventSource | null = null;
+  let retryCount = 0;
+  let retryTimeout: ReturnType<typeof setTimeout> | null = null;
+  let connectionTimeoutId: ReturnType<typeof setTimeout> | null = null;
+  let isClosed = false;
+  let hasDispatchedOpen = false;
+  let terminalExited = false;
+
+  const clearTimeouts = () => {
+    if (retryTimeout) {
+      clearTimeout(retryTimeout);
+      retryTimeout = null;
+    }
+    if (connectionTimeoutId) {
+      clearTimeout(connectionTimeoutId);
+      connectionTimeoutId = null;
+    }
+  };
+
+  const cleanup = () => {
+    isClosed = true;
+    clearTimeouts();
+    if (eventSource) {
+      eventSource.close();
+      eventSource = null;
+    }
+  };
+
+  const connect = () => {
+    if (isClosed || terminalExited) {
+      return;
+    }
+
+    if (eventSource && eventSource.readyState !== EventSource.CLOSED) {
+      console.warn('Attempted to create duplicate EventSource, skipping');
+      return;
+    }
+
+    hasDispatchedOpen = false;
+    eventSource = new EventSource(`/api/terminal/${sessionId}/stream`);
+
+    connectionTimeoutId = setTimeout(() => {
+      if (!hasDispatchedOpen && eventSource?.readyState !== EventSource.OPEN) {
+        console.error('Terminal connection timeout');
+        eventSource?.close();
+        handleError(new Error('Connection timeout'), false);
+      }
+    }, connectionTimeout);
+
+    eventSource.onopen = () => {
+      if (hasDispatchedOpen) {
+        return;
+      }
+      hasDispatchedOpen = true;
+      retryCount = 0;
+      clearTimeouts();
+
+      onEvent({ type: 'connected' });
+    };
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data) as TerminalStreamEvent;
+
+        if (data.type === 'exit') {
+          terminalExited = true;
+          cleanup();
+        }
+
+        onEvent(data);
+      } catch (error) {
+        console.error('Failed to parse terminal event:', error);
+        onError?.(error as Error, false);
+      }
+    };
+
+    eventSource.onerror = (error) => {
+      console.error('Terminal stream error:', error, 'readyState:', eventSource?.readyState);
+      clearTimeouts();
+
+      const isFatalError = terminalExited || eventSource?.readyState === EventSource.CLOSED;
+
+      eventSource?.close();
+      eventSource = null;
+
+      if (!terminalExited) {
+        handleError(new Error('Terminal stream connection error'), isFatalError);
+      }
+    };
+  };
+
+  const handleError = (error: Error, isFatal: boolean) => {
+    if (isClosed || terminalExited) {
+      return;
+    }
+
+    if (retryCount < maxRetries && !isFatal) {
+      retryCount++;
+      const delay = Math.min(initialRetryDelay * Math.pow(2, retryCount - 1), maxRetryDelay);
+
+      console.log(`Reconnecting to terminal stream (attempt ${retryCount}/${maxRetries}) in ${delay}ms`);
+
+      onEvent({
+        type: 'reconnecting',
+        attempt: retryCount,
+        maxAttempts: maxRetries,
+      });
+
+      retryTimeout = setTimeout(() => {
+        if (!isClosed && !terminalExited) {
+          connect();
+        }
+      }, delay);
+    } else {
+
+      console.error(`Terminal connection failed after ${retryCount} attempts`);
+      onError?.(error, true);
+      cleanup();
+    }
+  };
+
+  connect();
+
+  return cleanup;
+}
+
+export async function sendTerminalInput(
+  sessionId: string,
+  data: string
+): Promise<void> {
+  const response = await fetch(`/api/terminal/${sessionId}/input`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'text/plain' },
+    body: data,
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: 'Failed to send input' }));
+    throw new Error(error.error || 'Failed to send terminal input');
+  }
+}
+
+export async function resizeTerminal(
+  sessionId: string,
+  cols: number,
+  rows: number
+): Promise<void> {
+  const response = await fetch(`/api/terminal/${sessionId}/resize`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ cols, rows }),
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: 'Failed to resize terminal' }));
+    throw new Error(error.error || 'Failed to resize terminal');
+  }
+}
+
+export async function closeTerminal(sessionId: string): Promise<void> {
+  const response = await fetch(`/api/terminal/${sessionId}`, {
+    method: 'DELETE',
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: 'Failed to close terminal' }));
+    throw new Error(error.error || 'Failed to close terminal');
+  }
+}
diff --git a/packages/ui/src/lib/terminalTheme.ts b/packages/ui/src/lib/terminalTheme.ts
new file mode 100644
index 00000000..86c31655
--- /dev/null
+++ b/packages/ui/src/lib/terminalTheme.ts
@@ -0,0 +1,91 @@
+import type { Theme } from '@/types/theme';
+
+export interface TerminalTheme {
+  background: string;
+  foreground: string;
+  cursor: string;
+  cursorAccent: string;
+  selectionBackground: string;
+  selectionForeground?: string;
+  selectionInactiveBackground?: string;
+  black: string;
+  red: string;
+  green: string;
+  yellow: string;
+  blue: string;
+  magenta: string;
+  cyan: string;
+  white: string;
+  brightBlack: string;
+  brightRed: string;
+  brightGreen: string;
+  brightYellow: string;
+  brightBlue: string;
+  brightMagenta: string;
+  brightCyan: string;
+  brightWhite: string;
+}
+
+export function convertThemeToXterm(theme: Theme): TerminalTheme {
+  const { colors } = theme;
+  const syntax = colors.syntax.base;
+
+  return {
+
+    background: colors.surface.background,
+    foreground: syntax.foreground,
+    cursor: colors.interactive.cursor,
+    cursorAccent: colors.surface.background,
+
+    selectionBackground: colors.interactive.selection,
+    selectionForeground: colors.interactive.selectionForeground,
+    selectionInactiveBackground: colors.interactive.selection + '50',
+
+    black: colors.surface.muted,
+    red: colors.status.error,
+    green: colors.status.success,
+    yellow: colors.status.warning,
+    blue: syntax.function,
+    magenta: syntax.keyword,
+    cyan: syntax.type,
+    white: syntax.foreground,
+
+    brightBlack: syntax.comment,
+    brightRed: colors.status.error,
+    brightGreen: colors.status.success,
+    brightYellow: colors.status.warning,
+    brightBlue: syntax.function,
+    brightMagenta: syntax.keyword,
+    brightCyan: syntax.type,
+    brightWhite: colors.surface.elevatedForeground,
+  };
+}
+
+export function getTerminalOptions(
+  fontFamily: string,
+  fontSize: number,
+  theme: TerminalTheme
+) {
+
+  const powerlineFallbacks =
+    '"JetBrainsMonoNL Nerd Font", "FiraCode Nerd Font", "Cascadia Code PL", "Fira Code", "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Courier New", monospace';
+  const augmentedFontFamily = `${fontFamily}, ${powerlineFallbacks}`;
+
+  return {
+    fontFamily: augmentedFontFamily,
+    fontSize,
+    lineHeight: 1,
+    cursorBlink: true,
+    cursorStyle: 'block' as const,
+    theme,
+    allowTransparency: false,
+    scrollback: 10000,
+    minimumContrastRatio: 1,
+    fastScrollModifier: 'shift' as const,
+    fastScrollSensitivity: 5,
+    scrollSensitivity: 3,
+    macOptionIsMeta: true,
+    macOptionClickForcesSelection: false,
+    rightClickSelectsWord: true,
+  };
+}
diff --git a/packages/ui/src/lib/theme/cssGenerator.ts b/packages/ui/src/lib/theme/cssGenerator.ts
new file mode 100644
index 00000000..0207e1b9
--- /dev/null
+++ b/packages/ui/src/lib/theme/cssGenerator.ts
@@ -0,0 +1,758 @@
+import type { Theme } from '@/types/theme';
+import { SEMANTIC_TYPOGRAPHY } from '@/lib/typography';
+
+const hexToRgb = (value: string | undefined | null): string | null => {
+  if (!value || typeof value !== 'string') {
+    return null;
+  }
+  const normalized = value.trim();
+  if (!normalized.startsWith('#')) {
+    return null;
+  }
+  let hex = normalized.slice(1);
+  if (hex.length === 3 || hex.length === 4) {
+    hex = hex
+      .split('')
+      .map((char) => char + char)
+      .join('');
+  }
+  if (hex.length === 8) {
+    hex = hex.slice(0, 6);
+  }
+  if (hex.length !== 6) {
+    return null;
+  }
+  const int = Number.parseInt(hex, 16);
+  if (Number.isNaN(int)) {
+    return null;
+  }
+  const r = (int >> 16) & 255;
+  const g = (int >> 8) & 255;
+  const b = int & 255;
+  return `${r} ${g} ${b}`;
+};
+
+export class CSSVariableGenerator {
+  private inheritanceMap: Map<string, string> = new Map();
+
+  constructor() {
+    this.initializeInheritanceMap();
+  }
+
+  generate(theme: Theme): string {
+    const cssVars: string[] = [];
+
+    cssVars.push(...this.generateTailwindVariables(theme));
+
+    cssVars.push(...this.generatePrimaryColors(theme.colors.primary));
+    cssVars.push(...this.generateSurfaceColors(theme.colors.surface));
+    cssVars.push(...this.generateInteractiveColors(theme.colors.interactive));
+    cssVars.push(...this.generateStatusColors(theme.colors.status));
+
+    cssVars.push(...this.generateSyntaxColors(theme.colors.syntax));
+
+    cssVars.push(...this.generateComponentColors(theme.colors, theme));
+
+    cssVars.push(...this.generateTypographyVariables());
+
+    if (theme.config) {
+      cssVars.push(...this.generateConfigVariables(theme.config));
+    }
+
+    return cssVars.join('\n');
+  }
+
+  private generateTailwindVariables(theme: Theme): string[] {
+    const vars: string[] = [];
+
+    vars.push(`  --background: ${theme.colors.surface.background} !important;`);
+    vars.push(`  --foreground: ${theme.colors.surface.foreground} !important;`);
+
+    vars.push(`  --muted: ${theme.colors.surface.muted} !important;`);
+    vars.push(`  --muted-foreground: ${theme.colors.surface.mutedForeground} !important;`);
+
+    vars.push(`  --card: ${theme.colors.surface.elevated} !important;`);
+    vars.push(`  --card-foreground: ${theme.colors.surface.elevatedForeground} !important;`);
+
+    vars.push(`  --popover: ${theme.colors.surface.elevated} !important;`);
+    vars.push(`  --popover-foreground: ${theme.colors.surface.elevatedForeground} !important;`);
+
+    vars.push(`  --border: ${theme.colors.interactive.border} !important;`);
+    vars.push(`  --input: ${theme.colors.interactive.border} !important;`);
+
+    vars.push(`  --primary: ${theme.colors.primary.base} !important;`);
+    vars.push(`  --primary-foreground: ${theme.colors.primary.foreground} !important;`);
+
+    vars.push(`  --secondary: ${theme.colors.surface.muted} !important;`);
+    vars.push(`  --secondary-foreground: ${theme.colors.surface.mutedForeground} !important;`);
+
+    vars.push(`  --accent: ${theme.colors.surface.subtle} !important;`);
+    vars.push(`  --accent-foreground: ${theme.colors.surface.foreground} !important;`);
+
+    vars.push(`  --destructive: ${theme.colors.status.error} !important;`);
+    vars.push(`  --destructive-foreground: ${theme.colors.status.errorForeground} !important;`);
+
+    vars.push(`  --ring: ${theme.colors.interactive.focusRing} !important;`);
+
+    if (theme.config?.radius?.md) {
+      vars.push(`  --radius: ${theme.config.radius.md} !important;`);
+    }
+
+    const sidebarBaseRgb = hexToRgb(theme.colors.surface.muted);
+    const sidebarAccentRgb = hexToRgb(theme.colors.surface.subtle);
+    const sidebarBorderRgb = hexToRgb(theme.colors.interactive.border);
+
+    vars.push(`  --sidebar-base: ${theme.colors.surface.muted} !important;`);
+    if (sidebarBaseRgb) {
+      vars.push(`  --sidebar-base-rgb: ${sidebarBaseRgb} !important;`);
+    }
+    vars.push(`  --sidebar: var(--sidebar-base) !important;`);
+    vars.push(`  --sidebar-foreground: ${theme.colors.surface.mutedForeground} !important;`);
+    vars.push(`  --sidebar-primary: ${theme.colors.primary.base} !important;`);
+    vars.push(`  --sidebar-primary-foreground: ${theme.colors.primary.foreground} !important;`);
+    vars.push(`  --sidebar-accent-base: ${theme.colors.surface.subtle} !important;`);
+    if (sidebarAccentRgb) {
+      vars.push(`  --sidebar-accent-base-rgb: ${sidebarAccentRgb} !important;`);
+    }
+    vars.push(`  --sidebar-accent: var(--sidebar-accent-base) !important;`);
+    vars.push(`  --sidebar-accent-foreground: ${theme.colors.surface.foreground} !important;`);
+    vars.push(`  --sidebar-border: ${theme.colors.interactive.border} !important;`);
+    if (sidebarBorderRgb) {
+      vars.push(`  --sidebar-border-rgb: ${sidebarBorderRgb} !important;`);
+    }
+    vars.push(`  --sidebar-ring: ${theme.colors.interactive.focusRing} !important;`);
+
+    const isDark = theme.metadata.variant === 'dark';
+    const strongAlpha = isDark ? 0.8 : 0.95;
+    const softAlpha = isDark ? 0.7 : 0.9;
+
+    if (sidebarBaseRgb) {
+      vars.push(
+        `  --sidebar-overlay-strong: rgb(${sidebarBaseRgb} / ${strongAlpha}) !important;`,
+      );
+      vars.push(
+        `  --sidebar-overlay-soft: rgb(${sidebarBaseRgb} / ${softAlpha}) !important;`,
+      );
+    } else {
+      const base = theme.colors.surface.muted;
+      vars.push(
+        `  --sidebar-overlay-strong: ${this.opacity(base, strongAlpha)} !important;`,
+      );
+      vars.push(
+        `  --sidebar-overlay-soft: ${this.opacity(base, softAlpha)} !important;`,
+      );
+    }
+
+    if (theme.colors.charts?.series && Array.isArray(theme.colors.charts.series)) {
+      theme.colors.charts.series.forEach((color: string, i: number) => {
+        vars.push(`  --chart-${i + 1}: ${color};`);
+      });
+    }
+
+    if (theme.colors.loading) {
+      vars.push(`  --loading-spinner: ${theme.colors.loading.spinner || theme.colors.primary.base};`);
+      vars.push(`  --loading-spinner-track: ${theme.colors.loading.spinnerTrack || theme.colors.surface.muted};`);
+    } else {
+      vars.push(`  --loading-spinner: ${theme.colors.primary.base};`);
+      vars.push(`  --loading-spinner-track: ${theme.colors.surface.muted};`);
+    }
+
+    return vars;
+  }
+
+  apply(theme: Theme): void {
+    const cssVars = this.generate(theme);
+    const style = document.createElement('style');
+    style.id = 'opencode-theme-variables';
+
+    let styleContent = '';
+    if (theme.metadata.variant === 'dark') {
+
+      styleContent = `:root {\n${cssVars}\n}\n\n.dark {\n${cssVars}\n}`;
+      document.documentElement.classList.add('dark');
+      document.documentElement.classList.remove('light');
+    } else {
+
+      styleContent = `:root {\n${cssVars}\n}\n\n:root:not(.dark) {\n${cssVars}\n}`;
+      document.documentElement.classList.remove('dark');
+      document.documentElement.classList.add('light');
+    }
+
+    style.textContent = styleContent;
+
+    const existing = document.getElementById('opencode-theme-variables');
+    if (existing) {
+      existing.remove();
+    }
+
+    document.head.appendChild(style);
+
+    document.documentElement.setAttribute('data-theme', theme.metadata.variant);
+  }
+
+  private generatePrimaryColors(primary: Theme['colors']['primary']): string[] {
+    const vars: string[] = [];
+    vars.push(`  --primary-base: ${primary.base};`);
+    vars.push(`  --primary-hover: ${primary.hover || this.darken(primary.base, 10)};`);
+    vars.push(`  --primary-active: ${primary.active || this.darken(primary.base, 20)};`);
+    vars.push(`  --primary-foreground: ${primary.foreground || '#ffffff'};`);
+    vars.push(`  --primary-muted: ${primary.muted || this.opacity(primary.base, 0.5)};`);
+    vars.push(`  --primary-emphasis: ${primary.emphasis || this.lighten(primary.base, 10)};`);
+    return vars;
+  }
+
+  private generateSurfaceColors(surface: Theme['colors']['surface']): string[] {
+    const vars: string[] = [];
+    vars.push(`  --surface-background: ${surface.background};`);
+    vars.push(`  --surface-foreground: ${surface.foreground};`);
+    vars.push(`  --surface-muted: ${surface.muted};`);
+    vars.push(`  --surface-muted-foreground: ${surface.mutedForeground};`);
+    vars.push(`  --surface-elevated: ${surface.elevated};`);
+    vars.push(`  --surface-elevated-foreground: ${surface.elevatedForeground};`);
+    vars.push(`  --surface-overlay: ${surface.overlay};`);
+    vars.push(`  --surface-subtle: ${surface.subtle};`);
+    return vars;
+  }
+
+  private generateInteractiveColors(interactive: Theme['colors']['interactive']): string[] {
+    const vars: string[] = [];
+    vars.push(`  --interactive-border: ${interactive.border};`);
+    vars.push(`  --interactive-border-hover: ${interactive.borderHover};`);
+    vars.push(`  --interactive-border-focus: ${interactive.borderFocus};`);
+    vars.push(`  --interactive-selection: ${interactive.selection};`);
+    vars.push(`  --interactive-selection-foreground: ${interactive.selectionForeground};`);
+    vars.push(`  --interactive-focus: ${interactive.focus};`);
+    vars.push(`  --interactive-focus-ring: ${interactive.focusRing};`);
+    vars.push(`  --interactive-cursor: ${interactive.cursor};`);
+    vars.push(`  --interactive-hover: ${interactive.hover};`);
+    vars.push(`  --interactive-active: ${interactive.active};`);
+    return vars;
+  }
+
+  private generateStatusColors(status: Theme['colors']['status']): string[] {
+    const vars: string[] = [];
+
+    vars.push(`  --status-error: ${status.error};`);
+    vars.push(`  --status-error-foreground: ${status.errorForeground};`);
+    vars.push(`  --status-error-background: ${status.errorBackground};`);
+    vars.push(`  --status-error-border: ${status.errorBorder};`);
+
+    vars.push(`  --status-warning: ${status.warning};`);
+    vars.push(`  --status-warning-foreground: ${status.warningForeground};`);
+    vars.push(`  --status-warning-background: ${status.warningBackground};`);
+    vars.push(`  --status-warning-border: ${status.warningBorder};`);
+
+    vars.push(`  --status-success: ${status.success};`);
+    vars.push(`  --status-success-foreground: ${status.successForeground};`);
+    vars.push(`  --status-success-background: ${status.successBackground};`);
+    vars.push(`  --status-success-border: ${status.successBorder};`);
+
+    vars.push(`  --status-info: ${status.info};`);
+    vars.push(`  --status-info-foreground: ${status.infoForeground};`);
+    vars.push(`  --status-info-background: ${status.infoBackground};`);
+    vars.push(`  --status-info-border: ${status.infoBorder};`);
+
+    return vars;
+  }
+
+  private generateSyntaxColors(syntax: Theme['colors']['syntax']): string[] {
+    const vars: string[] = [];
+
+    vars.push(`  --syntax-background: ${syntax.base.background};`);
+    vars.push(`  --syntax-foreground: ${syntax.base.foreground};`);
+    vars.push(`  --syntax-comment: ${syntax.base.comment};`);
+    vars.push(`  --syntax-keyword: ${syntax.base.keyword};`);
+    vars.push(`  --syntax-string: ${syntax.base.string};`);
+    vars.push(`  --syntax-number: ${syntax.base.number};`);
+    vars.push(`  --syntax-function: ${syntax.base.function};`);
+    vars.push(`  --syntax-variable: ${syntax.base.variable};`);
+    vars.push(`  --syntax-type: ${syntax.base.type};`);
+    vars.push(`  --syntax-operator: ${syntax.base.operator};`);
+
+    const tokens = this.generateSyntaxTokens(syntax);
+    for (const [key, value] of Object.entries(tokens)) {
+      vars.push(`  --syntax-${this.kebabCase(key)}: ${value};`);
+    }
+
+    return vars;
+  }
+
+  private generateSyntaxTokens(syntax: Theme['colors']['syntax']): Record<string, string> {
+    const base = syntax.base;
+    const tokens = syntax.tokens || {};
+
+    return {
+
+      commentDoc: tokens.commentDoc || this.lighten(base.comment, 10),
+
+      stringEscape: tokens.stringEscape || this.darken(base.string, 20),
+      stringInterpolation: tokens.stringInterpolation || base.variable,
+      stringRegex: tokens.stringRegex || this.adjustHue(base.string, 15),
+
+      keywordControl: tokens.keywordControl || base.keyword,
+      keywordOperator: tokens.keywordOperator || base.operator,
+      keywordImport: tokens.keywordImport || this.lighten(base.keyword, 10),
+      keywordReturn: tokens.keywordReturn || this.emphasize(base.keyword),
+
+      functionCall: tokens.functionCall || this.lighten(base.function, 5),
+      functionBuiltin: tokens.functionBuiltin || this.darken(base.function, 10),
+      method: tokens.method || base.function,
+      methodCall: tokens.methodCall || this.lighten(base.function, 5),
+
+      variableBuiltin: tokens.variableBuiltin || this.emphasize(base.variable),
+      variableProperty: tokens.variableProperty || this.lighten(base.variable, 10),
+      variableReadonly: tokens.variableReadonly || base.number,
+      parameter: tokens.parameter || base.variable,
+
+      typePrimitive: tokens.typePrimitive || this.darken(base.type, 10),
+      typeInterface: tokens.typeInterface || base.type,
+      className: tokens.className || this.emphasize(base.type),
+      enum: tokens.enum || base.type,
+
+      boolean: tokens.boolean || base.number,
+      null: tokens.null || this.opacity(base.number, 0.7),
+      constant: tokens.constant || base.number,
+
+      punctuation: tokens.punctuation || this.opacity(base.foreground, 0.7),
+      delimiter: tokens.delimiter || this.opacity(base.foreground, 0.8),
+      bracket: tokens.bracket || base.foreground,
+
+      tag: tokens.tag || base.keyword,
+      tagAttribute: tokens.tagAttribute || base.variable,
+      tagAttributeValue: tokens.tagAttributeValue || base.string,
+      tagBracket: tokens.tagBracket || this.opacity(base.foreground, 0.8),
+
+      decorator: tokens.decorator || base.function,
+      annotation: tokens.annotation || base.function,
+
+      namespace: tokens.namespace || this.opacity(base.type, 0.8),
+      module: tokens.module || this.opacity(base.type, 0.8),
+
+      ...tokens
+    };
+  }
+
+  private generateComponentColors(colors: Theme['colors'], theme: Theme): string[] {
+    const vars: string[] = [];
+
+    if (colors.markdown) {
+      vars.push(...this.generateMarkdownColors(colors.markdown, theme));
+    } else {
+
+      vars.push(...this.generateDefaultMarkdownColors(theme));
+    }
+
+    if (colors.chat) {
+      vars.push(...this.generateChatColors(colors.chat, theme));
+    } else {
+      vars.push(...this.generateDefaultChatColors(theme));
+    }
+
+    if (colors.tools) {
+      vars.push(...this.generateToolColors(colors.tools, theme));
+    } else {
+      vars.push(...this.generateDefaultToolColors(theme));
+    }
+
+    return vars;
+  }
+
+  private generateMarkdownColors(markdown: Record<string, string>, theme: Theme): string[] {
+    const vars: string[] = [];
+    const primary = theme.colors.primary.base;
+    const chatBackground = theme.colors.chat?.background || theme.colors.surface.background;
+
+    vars.push(`  --markdown-heading1: ${markdown.heading1 || primary};`);
+    vars.push(`  --markdown-heading2: ${markdown.heading2 || this.opacity(primary, 0.9)};`);
+    vars.push(`  --markdown-heading3: ${markdown.heading3 || this.opacity(primary, 0.8)};`);
+    vars.push(`  --markdown-heading4: ${markdown.heading4 || theme.colors.surface.foreground};`);
+    vars.push(`  --markdown-link: ${markdown.link || primary};`);
+    vars.push(`  --markdown-link-hover: ${markdown.linkHover || theme.colors.primary.hover || this.darken(primary, 10)};`);
+    vars.push(`  --markdown-inline-code: ${markdown.inlineCode || theme.colors.syntax.base.string};`);
+    vars.push(`  --markdown-inline-code-bg: ${markdown.inlineCodeBackground || chatBackground};`);
+    vars.push(`  --markdown-blockquote: ${markdown.blockquote || theme.colors.surface.mutedForeground};`);
+    vars.push(`  --markdown-blockquote-border: ${markdown.blockquoteBorder || theme.colors.interactive.border};`);
+    vars.push(`  --markdown-list-marker: ${markdown.listMarker || this.opacity(primary, 0.6)};`);
+    vars.push(`  --markdown-bold: ${markdown.bold || theme.colors.surface.foreground};`);
+    vars.push(`  --markdown-italic: ${markdown.italic || this.opacity(theme.colors.surface.foreground, 0.9)};`);
+    vars.push(`  --markdown-strikethrough: ${markdown.strikethrough || theme.colors.surface.mutedForeground};`);
+    vars.push(`  --markdown-hr: ${markdown.hr || theme.colors.interactive.border};`);
+
+    return vars;
+  }
+
+  private generateDefaultMarkdownColors(theme: Theme): string[] {
+    const vars: string[] = [];
+    const primary = theme.colors.primary.base;
+    const chatBackground = theme.colors.chat?.background || theme.colors.surface.background;
+
+    vars.push(`  --markdown-heading1: ${primary};`);
+    vars.push(`  --markdown-heading2: ${this.opacity(primary, 0.9)};`);
+    vars.push(`  --markdown-heading3: ${this.opacity(primary, 0.8)};`);
+    vars.push(`  --markdown-heading4: ${theme.colors.surface.foreground};`);
+    vars.push(`  --markdown-link: ${primary};`);
+    vars.push(`  --markdown-link-hover: ${theme.colors.primary.hover || this.darken(primary, 10)};`);
+    vars.push(`  --markdown-inline-code: ${theme.colors.syntax.base.string};`);
+    vars.push(`  --markdown-inline-code-bg: ${chatBackground};`);
+    vars.push(`  --markdown-blockquote: ${theme.colors.surface.mutedForeground};`);
+    vars.push(`  --markdown-blockquote-border: ${theme.colors.interactive.border};`);
+    vars.push(`  --markdown-list-marker: ${this.opacity(primary, 0.6)};`);
+    vars.push(`  --markdown-bold: ${theme.colors.surface.foreground};`);
+    vars.push(`  --markdown-italic: ${this.opacity(theme.colors.surface.foreground, 0.9)};`);
+    vars.push(`  --markdown-strikethrough: ${theme.colors.surface.mutedForeground};`);
+    vars.push(`  --markdown-hr: ${theme.colors.interactive.border};`);
+
+    return vars;
+  }
+
+  private generateChatColors(chat: Record<string, string>, theme: Theme): string[] {
+    const vars: string[] = [];
+    const chatBackground = chat.background || theme.colors.surface.background;
+
+    vars.push(`  --chat-background: ${chatBackground};`);
+    vars.push(`  --chat-user-message: ${chat.userMessage || theme.colors.surface.foreground};`);
+    vars.push(`  --chat-user-message-bg: ${chat.userMessageBackground || theme.colors.surface.elevated};`);
+    vars.push(`  --chat-assistant-message: ${chat.assistantMessage || theme.colors.surface.foreground};`);
+    vars.push(`  --chat-assistant-message-bg: ${chat.assistantMessageBackground || theme.colors.surface.muted};`);
+    vars.push(`  --chat-timestamp: ${chat.timestamp || theme.colors.surface.mutedForeground};`);
+    vars.push(`  --chat-divider: ${chat.divider || theme.colors.interactive.border};`);
+    vars.push(`  --chat-typing: ${chat.typing || theme.colors.surface.mutedForeground};`);
+
+    return vars;
+  }
+
+  private generateDefaultChatColors(theme: Theme): string[] {
+    const vars: string[] = [];
+
+    vars.push(`  --chat-background: ${theme.colors.surface.background};`);
+    vars.push(`  --chat-user-message: ${theme.colors.surface.foreground};`);
+    vars.push(`  --chat-user-message-bg: ${theme.colors.surface.elevated};`);
+    vars.push(`  --chat-assistant-message: ${theme.colors.surface.foreground};`);
+    vars.push(`  --chat-assistant-message-bg: ${theme.colors.surface.muted};`);
+    vars.push(`  --chat-timestamp: ${theme.colors.surface.mutedForeground};`);
+    vars.push(`  --chat-divider: ${theme.colors.interactive.border};`);
+    vars.push(`  --chat-typing: ${theme.colors.surface.mutedForeground};`);
+
+    return vars;
+  }
+
+  private generateToolColors(tools: Theme['colors']['tools'], theme: Theme): string[] {
+    const vars: string[] = [];
+
+    vars.push(`  --tools-background: ${tools?.background || this.opacity(theme.colors.surface.muted, 0.2)};`);
+    vars.push(`  --tools-border: ${tools?.border || this.opacity(theme.colors.interactive.border, 0.3)};`);
+    vars.push(`  --tools-header-hover: ${tools?.headerHover || this.opacity(theme.colors.surface.muted, 0.3)};`);
+    vars.push(`  --tools-icon: ${tools?.icon || theme.colors.surface.mutedForeground};`);
+    vars.push(`  --tools-title: ${tools?.title || theme.colors.surface.foreground};`);
+    vars.push(`  --tools-description: ${tools?.description || this.opacity(theme.colors.surface.mutedForeground, 0.6)};`);
+
+    if (tools?.edit) {
+      vars.push(`  --tools-edit-added: ${tools.edit.added || theme.colors.status.success};`);
+      vars.push(`  --tools-edit-added-bg: ${tools.edit.addedBackground || theme.colors.status.successBackground};`);
+      vars.push(`  --tools-edit-removed: ${tools.edit.removed || theme.colors.status.error};`);
+      vars.push(`  --tools-edit-removed-bg: ${tools.edit.removedBackground || theme.colors.status.errorBackground};`);
+      vars.push(`  --tools-edit-modified: ${tools.edit.modified || theme.colors.status.info};`);
+      vars.push(`  --tools-edit-modified-bg: ${tools.edit.modifiedBackground || theme.colors.status.infoBackground};`);
+      vars.push(`  --tools-edit-line-number: ${tools.edit.lineNumber || this.opacity(theme.colors.surface.mutedForeground, 0.6)};`);
+    } else {
+      vars.push(`  --tools-edit-added: ${theme.colors.status.success};`);
+      vars.push(`  --tools-edit-added-bg: ${theme.colors.status.successBackground};`);
+      vars.push(`  --tools-edit-removed: ${theme.colors.status.error};`);
+      vars.push(`  --tools-edit-removed-bg: ${theme.colors.status.errorBackground};`);
+      vars.push(`  --tools-edit-modified: ${theme.colors.status.info};`);
+      vars.push(`  --tools-edit-modified-bg: ${theme.colors.status.infoBackground};`);
+      vars.push(`  --tools-edit-line-number: ${this.opacity(theme.colors.surface.mutedForeground, 0.6)};`);
+    }
+
+    return vars;
+  }
+
+  private generateDefaultToolColors(theme: Theme): string[] {
+    const vars: string[] = [];
+
+    vars.push(`  --tools-background: ${this.opacity(theme.colors.surface.muted, 0.2)};`);
+    vars.push(`  --tools-border: ${this.opacity(theme.colors.interactive.border, 0.3)};`);
+    vars.push(`  --tools-header-hover: ${this.opacity(theme.colors.surface.muted, 0.3)};`);
+    vars.push(`  --tools-icon: ${theme.colors.surface.mutedForeground};`);
+    vars.push(`  --tools-title: ${theme.colors.surface.foreground};`);
+    vars.push(`  --tools-description: ${this.opacity(theme.colors.surface.mutedForeground, 0.6)};`);
+
+    vars.push(`  --tools-edit-added: ${theme.colors.status.success};`);
+    vars.push(`  --tools-edit-added-bg: ${this.addTransparency(this.removeTransparency(theme.colors.status.successBackground), 0.15)};`);
+    vars.push(`  --tools-edit-removed: ${theme.colors.status.error};`);
+    vars.push(`  --tools-edit-removed-bg: ${this.addTransparency(this.removeTransparency(theme.colors.status.errorBackground), 0.15)};`);
+    vars.push(`  --tools-edit-modified: ${theme.colors.status.info};`);
+    vars.push(`  --tools-edit-modified-bg: ${this.addTransparency(this.removeTransparency(theme.colors.status.infoBackground), 0.15)};`);
+    vars.push(`  --tools-edit-line-number: ${this.opacity(theme.colors.surface.mutedForeground, 0.6)};`);
+
+    return vars;
+  }
+
+  private generateConfigVariables(config: Theme['config']): string[] {
+    const vars: string[] = [];
+
+    if (!config) return vars;
+
+    if (config.fonts) {
+      if (config.fonts.sans) {
+        vars.push(`  --font-sans: ${config.fonts.sans};`);
+        vars.push(`  --font-family-sans: ${config.fonts.sans};`);
+      }
+      if (config.fonts.mono) {
+        vars.push(`  --font-mono: ${config.fonts.mono};`);
+        vars.push(`  --font-family-mono: ${config.fonts.mono};`);
+      }
+      if (config.fonts.heading) vars.push(`  --font-heading: ${config.fonts.heading};`);
+    }
+
+    if (config.radius) {
+      if (config.radius.none) vars.push(`  --radius-none: ${config.radius.none};`);
+      if (config.radius.sm) vars.push(`  --radius-sm: ${config.radius.sm};`);
+      if (config.radius.md) vars.push(`  --radius-md: ${config.radius.md};`);
+      if (config.radius.lg) vars.push(`  --radius-lg: ${config.radius.lg};`);
+      if (config.radius.xl) vars.push(`  --radius-xl: ${config.radius.xl};`);
+      if (config.radius.full) vars.push(`  --radius-full: ${config.radius.full};`);
+    }
+
+    if (config.transitions) {
+      if (config.transitions.fast) vars.push(`  --transition-fast: ${config.transitions.fast};`);
+      if (config.transitions.normal) vars.push(`  --transition-normal: ${config.transitions.normal};`);
+      if (config.transitions.slow) vars.push(`  --transition-slow: ${config.transitions.slow};`);
+    }
+
+    return vars;
+  }
+
+  private generateTypographyVariables(): string[] {
+    const vars: string[] = [];
+
+    vars.push('  /* Semantic Typography Variables */');
+    vars.push('  --ui-regular-font-weight: 400;');
+
+    vars.push('  /* Markdown content - all markdown elements use same size */');
+    vars.push(`  --text-markdown: ${SEMANTIC_TYPOGRAPHY.markdown};`);
+    vars.push('  /* Code content - all code elements use same size */');
+    vars.push(`  --text-code: ${SEMANTIC_TYPOGRAPHY.code};`);
+    vars.push('  /* UI headers - dialog titles, panel headers */');
+    vars.push(`  --text-ui-header: ${SEMANTIC_TYPOGRAPHY.uiHeader};`);
+    vars.push('  /* UI labels - buttons, menus, navigation */');
+    vars.push(`  --text-ui-label: ${SEMANTIC_TYPOGRAPHY.uiLabel};`);
+    vars.push('  /* Metadata - timestamps, status, helper text */');
+    vars.push(`  --text-meta: ${SEMANTIC_TYPOGRAPHY.meta};`);
+    vars.push('  /* Micro text - badges, shortcuts, indicators */');
+    vars.push(`  --text-micro: ${SEMANTIC_TYPOGRAPHY.micro};`);
+
+     vars.push('  /* Heading line height and letter spacing */');
+     vars.push('  --h1-line-height: 1.25rem;');
+     vars.push('  --h2-line-height: 1.25rem;');
+     vars.push('  --h3-line-height: 1.5rem;');
+     vars.push('  --h4-line-height: 1.5rem;');
+     vars.push('  --h5-line-height: 1.5rem;');
+     vars.push('  --h6-line-height: 1.5rem;');
+     vars.push('  --h1-letter-spacing: -0.025em;');
+     vars.push('  --h2-letter-spacing: -0.02em;');
+     vars.push('  --h3-letter-spacing: -0.015em;');
+     vars.push('  --h4-letter-spacing: -0.01em;');
+     vars.push('  --h5-letter-spacing: 0;');
+     vars.push('  --h6-letter-spacing: 0.01em;');
+
+    vars.push('  /* UI element line height and letter spacing */');
+    vars.push('  --ui-button-line-height: 1.375rem;');
+    vars.push('  --ui-button-letter-spacing: 0.02em;');
+    vars.push('  --ui-button-font-weight: 500;');
+    vars.push('  --ui-label-line-height: 1rem;');
+    vars.push('  --ui-label-letter-spacing: 0.03em;');
+    vars.push('  --ui-label-font-weight: 500;');
+    vars.push('  --ui-caption-line-height: 1rem;');
+    vars.push('  --ui-caption-letter-spacing: 0.025em;');
+    vars.push('  --ui-caption-font-weight: var(--ui-regular-font-weight, 400);');
+
+     vars.push('  /* Markdown line height and letter spacing */');
+     vars.push('  --markdown-body-line-height: 1.5rem;');
+     vars.push('  --markdown-body-letter-spacing: 0;');
+     vars.push('  --markdown-body-font-weight: var(--ui-regular-font-weight, 400);');
+     vars.push('  --markdown-h1-line-height: 1.25rem;');
+     vars.push('  --markdown-h1-letter-spacing: -0.025em;');
+     vars.push('  --markdown-h2-line-height: 1.25rem;');
+     vars.push('  --markdown-h2-letter-spacing: -0.02em;');
+     vars.push('  --markdown-h3-line-height: 1.5rem;');
+     vars.push('  --markdown-h3-letter-spacing: -0.015em;');
+     vars.push('  --markdown-h4-line-height: 1.5rem;');
+     vars.push('  --markdown-h4-letter-spacing: -0.01em;');
+     vars.push('  --markdown-h5-line-height: 1.5rem;');
+     vars.push('  --markdown-h5-letter-spacing: 0;');
+     vars.push('  --markdown-h6-line-height: 1.5rem;');
+     vars.push('  --markdown-h6-letter-spacing: 0.01em;');
+    vars.push('  --markdown-list-line-height: 1.375rem;');
+    vars.push('  --markdown-code-block-line-height: 1rem;');
+
+    vars.push('  --ui-button-small-line-height: 1.25rem;');
+    vars.push('  --ui-button-small-letter-spacing: 0.02em;');
+    vars.push('  --ui-button-small-font-weight: 500;');
+    vars.push('  --markdown-body-small-line-height: 1.375rem;');
+    vars.push('  --markdown-body-small-letter-spacing: 0;');
+    vars.push('  --markdown-body-small-font-weight: var(--ui-regular-font-weight, 400);');
+
+    vars.push('  --ui-button-large-line-height: 1.5rem;');
+    vars.push('  --ui-button-large-letter-spacing: 0.02em;');
+    vars.push('  --ui-button-large-font-weight: 500;');
+    vars.push('  --markdown-body-large-line-height: 1.625rem;');
+    vars.push('  --markdown-body-large-letter-spacing: 0;');
+    vars.push('  --markdown-body-large-font-weight: var(--ui-regular-font-weight, 400);');
+
+    vars.push('  /* Code line height and letter spacing */');
+    vars.push('  --code-inline-line-height: 1rem;');
+    vars.push('  --code-inline-letter-spacing: 0;');
+    vars.push('  --code-inline-font-weight: 400;');
+    vars.push('  --code-block-line-height: 1.4rem;');
+    vars.push('  --code-block-letter-spacing: 0;');
+    vars.push('  --code-block-font-weight: 400;');
+    vars.push('  --code-line-numbers-line-height: 1.25rem;');
+    vars.push('  --code-line-numbers-letter-spacing: 0;');
+    vars.push('  --code-line-numbers-font-weight: 400;');
+
+    vars.push('  /* Additional UI element line height and letter spacing */');
+    vars.push('  --ui-badge-line-height: 1rem;');
+    vars.push('  --ui-badge-letter-spacing: 0.025em;');
+    vars.push('  --ui-badge-font-weight: 500;');
+    vars.push('  --ui-tooltip-line-height: 1rem;');
+    vars.push('  --ui-tooltip-letter-spacing: 0.025em;');
+    vars.push('  --ui-tooltip-font-weight: var(--ui-regular-font-weight, 400);');
+    vars.push('  --ui-input-line-height: 1.375rem;');
+    vars.push('  --ui-input-letter-spacing: 0.02em;');
+    vars.push('  --ui-input-font-weight: var(--ui-regular-font-weight, 400);');
+    vars.push('  --ui-helper-text-line-height: 1rem;');
+    vars.push('  --ui-helper-text-letter-spacing: 0.025em;');
+    vars.push('  --ui-helper-text-font-weight: var(--ui-regular-font-weight, 400);');
+
+    vars.push('  /* Additional markdown line height and letter spacing */');
+    vars.push('  --markdown-blockquote-line-height: 1.5rem;');
+    vars.push('  --markdown-blockquote-letter-spacing: 0;');
+    vars.push('  --markdown-blockquote-font-weight: var(--ui-regular-font-weight, 400);');
+    vars.push('  --markdown-list-letter-spacing: 0;');
+    vars.push('  --markdown-list-font-weight: var(--ui-regular-font-weight, 400);');
+    vars.push('  --markdown-link-line-height: 1.5rem;');
+    vars.push('  --markdown-link-letter-spacing: 0;');
+    vars.push('  --markdown-link-font-weight: var(--ui-regular-font-weight, 400);');
+    vars.push('  --markdown-code-line-height: 1.35;');
+    vars.push('  --markdown-code-letter-spacing: 0;');
+    vars.push('  --markdown-code-font-weight: 400;');
+    vars.push('  --markdown-code-block-letter-spacing: 0;');
+    vars.push('  --markdown-code-block-font-weight: 400;');
+
+    return vars;
+  }
+
+  private initializeInheritanceMap(): void {
+
+    this.inheritanceMap.set('header.background', 'surface.background');
+    this.inheritanceMap.set('header.foreground', 'surface.foreground');
+    this.inheritanceMap.set('header.logoTint', 'primary.base');
+    this.inheritanceMap.set('header.divider', 'interactive.border');
+
+    this.inheritanceMap.set('sidebar.background', 'surface.muted');
+    this.inheritanceMap.set('sidebar.foreground', 'surface.mutedForeground');
+    this.inheritanceMap.set('sidebar.hover', 'interactive.hover');
+    this.inheritanceMap.set('sidebar.active', 'primary.base');
+    this.inheritanceMap.set('sidebar.activeForeground', 'primary.foreground');
+
+  }
+
+  private opacity(color: string, alpha: number): string {
+    if (color.startsWith('#')) {
+      return `${color}${Math.round(alpha * 255).toString(16).padStart(2, '0')}`;
+    }
+    if (color.startsWith('rgb')) {
+      return color.replace('rgb', 'rgba').replace(')', `, ${alpha})`);
+    }
+    return color;
+  }
+
+  private removeTransparency(color: string): string {
+    if (color.startsWith('#')) {
+
+      if (color.length === 9) {
+        return color.slice(0, 7);
+      }
+
+      if (color.length === 5) {
+        return color.slice(0, 4);
+      }
+      return color;
+    }
+    if (color.startsWith('rgba')) {
+
+      return color.replace('rgba', 'rgb').replace(/,\s*[\d.]+\)$/, ')');
+    }
+    return color;
+  }
+
+  private addTransparency(color: string, opacity: number): string {
+    if (color.startsWith('#')) {
+
+      const hex = color.slice(1);
+      if (hex.length === 3) {
+
+        const r = parseInt(hex[0] + hex[0], 16);
+        const g = parseInt(hex[1] + hex[1], 16);
+        const b = parseInt(hex[2] + hex[2], 16);
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+      } else if (hex.length === 6) {
+
+        const r = parseInt(hex.slice(0, 2), 16);
+        const g = parseInt(hex.slice(2, 4), 16);
+        const b = parseInt(hex.slice(4, 6), 16);
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+      }
+    }
+    if (color.startsWith('rgb')) {
+
+      return color.replace('rgb', 'rgba').replace(')', `, ${opacity})`);
+    }
+    return color;
+  }
+
+  private darken(color: string, percent: number): string {
+
+    if (color.startsWith('#')) {
+      const num = parseInt(color.slice(1), 16);
+      const amt = Math.round(2.55 * percent);
+      const R = (num >> 16) - amt;
+      const G = (num >> 8 & 0x00FF) - amt;
+      const B = (num & 0x0000FF) - amt;
+      return '#' + (0x1000000 + (R < 255 ? R < 0 ? 0 : R : 255) * 0x10000 +
+        (G < 255 ? G < 0 ? 0 : G : 255) * 0x100 +
+        (B < 255 ? B < 0 ? 0 : B : 255)).toString(16).slice(1);
+    }
+    return color;
+  }
+
+  private lighten(color: string, percent: number): string {
+
+    if (color.startsWith('#')) {
+      const num = parseInt(color.slice(1), 16);
+      const amt = Math.round(2.55 * percent);
+      const R = (num >> 16) + amt;
+      const G = (num >> 8 & 0x00FF) + amt;
+      const B = (num & 0x0000FF) + amt;
+      return '#' + (0x1000000 + (R < 255 ? R < 0 ? 0 : R : 255) * 0x10000 +
+        (G < 255 ? G < 0 ? 0 : G : 255) * 0x100 +
+        (B < 255 ? B < 0 ? 0 : B : 255)).toString(16).slice(1);
+    }
+    return color;
+  }
+
+  private adjustHue(color: string, degrees: number): string {
+
+    return this.lighten(color, degrees / 10);
+  }
+
+  private emphasize(color: string): string {
+
+    return this.lighten(color, 15);
+  }
+
+  private kebabCase(str: string): string {
+    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+  }
+}
diff --git a/packages/ui/src/lib/theme/monacoThemeGenerator.ts b/packages/ui/src/lib/theme/monacoThemeGenerator.ts
new file mode 100644
index 00000000..41aa06d2
--- /dev/null
+++ b/packages/ui/src/lib/theme/monacoThemeGenerator.ts
@@ -0,0 +1,445 @@
+import type { Theme } from '@/types/theme';
+
+interface MonacoTokenRule {
+  token: string;
+  foreground?: string;
+  fontStyle?: string;
+}
+
+interface MonacoThemeData {
+  base: 'vs' | 'vs-dark';
+  inherit: boolean;
+  rules: MonacoTokenRule[];
+  colors: Record<string, string>;
+}
+
+type Monaco = {
+  editor: {
+    defineTheme: (themeName: string, themeData: MonacoThemeData) => void;
+  };
+};
+
+const MONACO_LIGHT_THEME_ID = 'openchamber-flexoki-light';
+const MONACO_DARK_THEME_ID = 'openchamber-flexoki-dark';
+
+let lastRegisteredThemeId: string | null = null;
+
+const getMonacoFromGlobal = (): Monaco | null => {
+  if (typeof window === 'undefined') return null;
+  const anyWindow = window as typeof window & { monaco?: Monaco };
+  if (anyWindow.monaco?.editor?.defineTheme) return anyWindow.monaco;
+  return null;
+};
+
+const flexokiDarkTheme: MonacoThemeData = {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+
+    { token: '', foreground: 'CECDC3' },
+    { token: 'source', foreground: 'CECDC3' },
+
+    { token: 'comment', foreground: '878580' },
+    { token: 'comment.block', foreground: '878580' },
+    { token: 'comment.line', foreground: '878580' },
+    { token: 'comment.block.documentation', foreground: '575653' },
+
+    { token: 'string', foreground: '3AA99F' },
+    { token: 'string.quoted', foreground: '3AA99F' },
+    { token: 'string.template', foreground: '3AA99F' },
+    { token: 'string.regexp', foreground: '3AA99F' },
+
+    { token: 'string.escape', foreground: 'CECDC3' },
+    { token: 'constant.character.escape', foreground: 'CECDC3' },
+
+    { token: 'number', foreground: '8B7EC8' },
+    { token: 'number.hex', foreground: '8B7EC8' },
+    { token: 'number.float', foreground: '8B7EC8' },
+    { token: 'constant.numeric', foreground: '8B7EC8' },
+
+    { token: 'constant.language', foreground: 'D0A215' },
+    { token: 'constant.language.boolean', foreground: 'D0A215' },
+    { token: 'constant.language.null', foreground: 'D0A215' },
+
+    { token: 'keyword', foreground: '4385BE' },
+    { token: 'keyword.control', foreground: '4385BE' },
+    { token: 'keyword.other', foreground: '4385BE' },
+
+    { token: 'keyword.control.import', foreground: 'D14D41' },
+    { token: 'keyword.control.from', foreground: 'D14D41' },
+    { token: 'keyword.control.export', foreground: 'D14D41' },
+
+    { token: 'keyword.control.exception', foreground: 'CE5D97' },
+    { token: 'keyword.control.trycatch', foreground: 'CE5D97' },
+
+    { token: 'keyword.operator', foreground: 'D14D41' },
+    { token: 'operator', foreground: 'D14D41' },
+
+    { token: 'storage', foreground: '4385BE' },
+    { token: 'storage.type', foreground: '4385BE' },
+    { token: 'storage.modifier', foreground: '4385BE' },
+
+    { token: 'entity.name.function', foreground: 'DA702C', fontStyle: 'bold' },
+    { token: 'support.function', foreground: 'DA702C', fontStyle: 'bold' },
+    { token: 'meta.function-call', foreground: 'DA702C' },
+
+    { token: 'entity.name.function.method', foreground: '879A39' },
+
+    { token: 'entity.name.class', foreground: 'DA702C' },
+    { token: 'entity.name.type.class', foreground: 'DA702C' },
+    { token: 'support.class', foreground: 'DA702C' },
+
+    { token: 'entity.name.type', foreground: 'D0A215' },
+    { token: 'entity.name.type.interface', foreground: 'D0A215' },
+    { token: 'support.type', foreground: 'D0A215' },
+
+    { token: 'entity.name.type.struct', foreground: 'DA702C' },
+    { token: 'entity.name.type.enum', foreground: 'DA702C' },
+
+    { token: 'entity.name.type.parameter', foreground: 'DA702C' },
+
+    { token: 'variable', foreground: 'CECDC3' },
+    { token: 'variable.other', foreground: 'CECDC3' },
+    { token: 'variable.parameter', foreground: 'CECDC3' },
+
+    { token: 'variable.other.object', foreground: '879A39' },
+    { token: 'variable.other.readwrite.alias', foreground: '879A39' },
+
+    { token: 'variable.language', foreground: 'CE5D97' },
+    { token: 'variable.language.this', foreground: 'CE5D97' },
+    { token: 'variable.language.super', foreground: 'CE5D97' },
+
+    { token: 'variable.other.property', foreground: '4385BE' },
+    { token: 'support.variable.property', foreground: '4385BE' },
+
+    { token: 'variable.other.constant', foreground: 'CECDC3' },
+
+    { token: 'meta.object-literal.key', foreground: 'DA702C' },
+    { token: 'support.type.property-name', foreground: 'DA702C' },
+
+    { token: 'entity.name.tag', foreground: '4385BE' },
+    { token: 'tag', foreground: '4385BE' },
+
+    { token: 'support.class.component', foreground: 'CE5D97' },
+
+    { token: 'entity.other.attribute-name', foreground: 'D0A215' },
+
+    { token: 'entity.name.namespace', foreground: 'D0A215' },
+
+    { token: 'entity.name.module', foreground: 'D14D41' },
+
+    { token: 'meta.decorator', foreground: 'D0A215' },
+    { token: 'entity.name.function.decorator', foreground: 'D0A215' },
+
+    { token: 'entity.name.label', foreground: 'CE5D97' },
+
+    { token: 'meta.preprocessor', foreground: 'CE5D97' },
+    { token: 'entity.name.function.preprocessor', foreground: '4385BE' },
+
+    { token: 'punctuation', foreground: '878580' },
+    { token: 'delimiter', foreground: '878580' },
+    { token: 'delimiter.bracket', foreground: '878580' },
+
+    { token: 'markup.heading', foreground: 'D0A215' },
+    { token: 'markup.bold', foreground: 'D0A215', fontStyle: 'bold' },
+    { token: 'markup.italic', foreground: '3AA99F', fontStyle: 'italic' },
+    { token: 'markup.underline.link', foreground: '4385BE' },
+    { token: 'markup.inline.raw', foreground: '3AA99F' },
+
+    { token: 'invalid', foreground: 'D14D41' },
+    { token: 'invalid.illegal', foreground: 'D14D41' },
+
+    { token: 'string.key.json', foreground: 'DA702C' },
+    { token: 'string.value.json', foreground: '3AA99F' },
+
+    { token: 'support.type.property-name.css', foreground: 'CECDC3' },
+    { token: 'support.constant.property-value.css', foreground: '3AA99F' },
+
+    { token: 'type', foreground: 'D0A215' },
+    { token: 'type.identifier', foreground: 'D0A215' },
+    { token: 'identifier', foreground: 'CECDC3' },
+  ],
+  colors: {
+
+    'editor.background': '#100F0F',
+    'editor.foreground': '#CECDC3',
+    'editor.lineHighlightBackground': '#1C1B1A',
+    'editor.selectionBackground': '#CECDC333',
+    'editor.selectionHighlightBackground': '#CECDC333',
+    'editor.inactiveSelectionBackground': '#282726',
+    'editor.findMatchBackground': '#AD8301',
+    'editor.findMatchHighlightBackground': '#AD8301cc',
+    'editor.hoverHighlightBackground': '#343331',
+    'editor.rangeHighlightBackground': '#403E3C',
+    'editorCursor.foreground': '#CECDC3',
+
+    'editorLineNumber.foreground': '#403E3C',
+    'editorLineNumber.activeForeground': '#CECDC3',
+
+    'editorGutter.background': '#100F0F',
+    'editorGutter.modifiedBackground': '#3AA99F',
+    'editorGutter.addedBackground': '#879A39',
+    'editorGutter.deletedBackground': '#D14D41',
+
+    'diffEditor.insertedTextBackground': '#66800B25',
+    'diffEditor.removedTextBackground': '#AF302925',
+    'diffEditor.insertedLineBackground': '#66800B15',
+    'diffEditor.removedLineBackground': '#AF302915',
+    'diffEditor.insertedTextBorder': '#00000000',
+    'diffEditor.removedTextBorder': '#00000000',
+
+    'editorBracketMatch.background': '#282726',
+    'editorBracketMatch.border': '#343331',
+
+    'editorWhitespace.foreground': '#403E3C',
+    'editorIndentGuide.background1': '#343331',
+    'editorIndentGuide.activeBackground1': '#575653',
+
+    'editorWidget.background': '#1C1B1A',
+    'editorWidget.border': '#343331',
+    'editorSuggestWidget.background': '#100F0F',
+    'editorSuggestWidget.border': '#343331',
+    'editorSuggestWidget.foreground': '#CECDC3',
+    'editorSuggestWidget.selectedBackground': '#343331',
+    'editorHoverWidget.background': '#282726',
+    'editorHoverWidget.border': '#343331',
+
+    'editorInlayHint.foreground': '#878580',
+    'editorInlayHint.background': '#343331',
+
+    'editorError.foreground': '#D14D41',
+    'editorWarning.foreground': '#DA702C',
+    'editorInfo.foreground': '#4385BE',
+
+    'input.background': '#1C1B1A',
+    'input.foreground': '#CECDC3',
+    'input.border': '#343331',
+    'input.placeholderForeground': '#878580',
+
+    'dropdown.background': '#1C1B1A',
+    'dropdown.foreground': '#CECDC3',
+    'dropdown.border': '#343331',
+    'dropdown.listBackground': '#100F0F',
+
+    'focusBorder': '#343331',
+
+    'scrollbarSlider.background': '#34333180',
+    'scrollbarSlider.hoverBackground': '#403E3C',
+    'scrollbarSlider.activeBackground': '#575653',
+  },
+};
+
+const flexokiLightTheme: MonacoThemeData = {
+  base: 'vs',
+  inherit: true,
+  rules: [
+
+    { token: '', foreground: '100F0F' },
+    { token: 'source', foreground: '100F0F' },
+
+    { token: 'comment', foreground: '6F6E69' },
+    { token: 'comment.block', foreground: '6F6E69' },
+    { token: 'comment.line', foreground: '6F6E69' },
+    { token: 'comment.block.documentation', foreground: 'B7B5AC' },
+
+    { token: 'string', foreground: '24837B' },
+    { token: 'string.quoted', foreground: '24837B' },
+    { token: 'string.template', foreground: '24837B' },
+    { token: 'string.regexp', foreground: '24837B' },
+
+    { token: 'string.escape', foreground: '100F0F' },
+    { token: 'constant.character.escape', foreground: '100F0F' },
+
+    { token: 'number', foreground: '5E409D' },
+    { token: 'number.hex', foreground: '5E409D' },
+    { token: 'number.float', foreground: '5E409D' },
+    { token: 'constant.numeric', foreground: '5E409D' },
+
+    { token: 'constant.language', foreground: 'AD8301' },
+    { token: 'constant.language.boolean', foreground: 'AD8301' },
+    { token: 'constant.language.null', foreground: 'AD8301' },
+
+    { token: 'keyword', foreground: '205EA6' },
+    { token: 'keyword.control', foreground: '205EA6' },
+    { token: 'keyword.other', foreground: '205EA6' },
+
+    { token: 'keyword.control.import', foreground: 'AF3029' },
+    { token: 'keyword.control.from', foreground: 'AF3029' },
+    { token: 'keyword.control.export', foreground: 'AF3029' },
+
+    { token: 'keyword.control.exception', foreground: 'A02F6F' },
+    { token: 'keyword.control.trycatch', foreground: 'A02F6F' },
+
+    { token: 'keyword.operator', foreground: 'AF3029' },
+    { token: 'operator', foreground: 'AF3029' },
+
+    { token: 'storage', foreground: '205EA6' },
+    { token: 'storage.type', foreground: '205EA6' },
+    { token: 'storage.modifier', foreground: '205EA6' },
+
+    { token: 'entity.name.function', foreground: 'BC5215', fontStyle: 'bold' },
+    { token: 'support.function', foreground: 'BC5215', fontStyle: 'bold' },
+    { token: 'meta.function-call', foreground: 'BC5215' },
+
+    { token: 'entity.name.function.method', foreground: '66800B' },
+
+    { token: 'entity.name.class', foreground: 'BC5215' },
+    { token: 'entity.name.type.class', foreground: 'BC5215' },
+    { token: 'support.class', foreground: 'BC5215' },
+
+    { token: 'entity.name.type', foreground: 'AD8301' },
+    { token: 'entity.name.type.interface', foreground: 'AD8301' },
+    { token: 'support.type', foreground: 'AD8301' },
+
+    { token: 'entity.name.type.struct', foreground: 'BC5215' },
+    { token: 'entity.name.type.enum', foreground: 'BC5215' },
+
+    { token: 'entity.name.type.parameter', foreground: 'BC5215' },
+
+    { token: 'variable', foreground: '100F0F' },
+    { token: 'variable.other', foreground: '100F0F' },
+    { token: 'variable.parameter', foreground: '100F0F' },
+
+    { token: 'variable.other.object', foreground: '66800B' },
+    { token: 'variable.other.readwrite.alias', foreground: '66800B' },
+
+    { token: 'variable.language', foreground: 'A02F6F' },
+    { token: 'variable.language.this', foreground: 'A02F6F' },
+    { token: 'variable.language.super', foreground: 'A02F6F' },
+
+    { token: 'variable.other.property', foreground: '205EA6' },
+    { token: 'support.variable.property', foreground: '205EA6' },
+
+    { token: 'variable.other.constant', foreground: '100F0F' },
+
+    { token: 'meta.object-literal.key', foreground: 'BC5215' },
+    { token: 'support.type.property-name', foreground: 'BC5215' },
+
+    { token: 'entity.name.tag', foreground: '205EA6' },
+    { token: 'tag', foreground: '205EA6' },
+
+    { token: 'support.class.component', foreground: 'A02F6F' },
+
+    { token: 'entity.other.attribute-name', foreground: 'AD8301' },
+
+    { token: 'entity.name.namespace', foreground: 'AD8301' },
+
+    { token: 'entity.name.module', foreground: 'AF3029' },
+
+    { token: 'meta.decorator', foreground: 'AD8301' },
+    { token: 'entity.name.function.decorator', foreground: 'AD8301' },
+
+    { token: 'entity.name.label', foreground: 'A02F6F' },
+
+    { token: 'meta.preprocessor', foreground: 'A02F6F' },
+    { token: 'entity.name.function.preprocessor', foreground: '205EA6' },
+
+    { token: 'punctuation', foreground: '6F6E69' },
+    { token: 'delimiter', foreground: '6F6E69' },
+    { token: 'delimiter.bracket', foreground: '6F6E69' },
+
+    { token: 'markup.heading', foreground: 'AD8301' },
+    { token: 'markup.bold', foreground: 'AD8301', fontStyle: 'bold' },
+    { token: 'markup.italic', foreground: '24837B', fontStyle: 'italic' },
+    { token: 'markup.underline.link', foreground: '205EA6' },
+    { token: 'markup.inline.raw', foreground: '24837B' },
+
+    { token: 'invalid', foreground: 'AF3029' },
+    { token: 'invalid.illegal', foreground: 'AF3029' },
+
+    { token: 'string.key.json', foreground: 'BC5215' },
+    { token: 'string.value.json', foreground: '24837B' },
+
+    { token: 'support.type.property-name.css', foreground: '100F0F' },
+    { token: 'support.constant.property-value.css', foreground: '24837B' },
+
+    { token: 'type', foreground: 'AD8301' },
+    { token: 'type.identifier', foreground: 'AD8301' },
+    { token: 'identifier', foreground: '100F0F' },
+  ],
+  colors: {
+
+    'editor.background': '#FFFCF0',
+    'editor.foreground': '#100F0F',
+    'editor.lineHighlightBackground': '#F2F0E5',
+    'editor.selectionBackground': '#100F0F44',
+    'editor.selectionHighlightBackground': '#100F0F44',
+    'editor.inactiveSelectionBackground': '#E6E4D9',
+    'editor.findMatchBackground': '#D0A215',
+    'editor.findMatchHighlightBackground': '#D0A215cc',
+    'editor.hoverHighlightBackground': '#DAD8CE',
+    'editor.rangeHighlightBackground': '#CECDC3',
+    'editorCursor.foreground': '#100F0F',
+
+    'editorLineNumber.foreground': '#CECDC3',
+    'editorLineNumber.activeForeground': '#100F0F',
+
+    'editorGutter.background': '#FFFCF0',
+    'editorGutter.modifiedBackground': '#24837B',
+    'editorGutter.addedBackground': '#66800B',
+    'editorGutter.deletedBackground': '#AF3029',
+
+    'diffEditor.insertedTextBackground': '#66800B25',
+    'diffEditor.removedTextBackground': '#AF302925',
+    'diffEditor.insertedLineBackground': '#66800B15',
+    'diffEditor.removedLineBackground': '#AF302915',
+    'diffEditor.insertedTextBorder': '#00000000',
+    'diffEditor.removedTextBorder': '#00000000',
+
+    'editorBracketMatch.background': '#E6E4D9',
+    'editorBracketMatch.border': '#DAD8CE',
+
+    'editorWhitespace.foreground': '#CECDC3',
+    'editorIndentGuide.background1': '#DAD8CE',
+    'editorIndentGuide.activeBackground1': '#B7B5AC',
+
+    'editorWidget.background': '#F2F0E5',
+    'editorWidget.border': '#DAD8CE',
+    'editorSuggestWidget.background': '#FFFCF0',
+    'editorSuggestWidget.border': '#DAD8CE',
+    'editorSuggestWidget.foreground': '#100F0F',
+    'editorSuggestWidget.selectedBackground': '#DAD8CE',
+    'editorHoverWidget.background': '#E6E4D9',
+    'editorHoverWidget.border': '#DAD8CE',
+
+    'editorInlayHint.foreground': '#6F6E69',
+    'editorInlayHint.background': '#DAD8CE',
+
+    'editorError.foreground': '#AF3029',
+    'editorWarning.foreground': '#BC5215',
+    'editorInfo.foreground': '#205EA6',
+
+    'input.background': '#F2F0E5',
+    'input.foreground': '#100F0F',
+    'input.border': '#DAD8CE',
+    'input.placeholderForeground': '#6F6E69',
+
+    'dropdown.background': '#F2F0E5',
+    'dropdown.foreground': '#100F0F',
+    'dropdown.border': '#DAD8CE',
+    'dropdown.listBackground': '#FFFCF0',
+
+    'focusBorder': '#DAD8CE',
+
+    'scrollbarSlider.background': '#DAD8CE80',
+    'scrollbarSlider.hoverBackground': '#CECDC3',
+    'scrollbarSlider.activeBackground': '#B7B5AC',
+  },
+};
+
+export const getMonacoThemeIdForTheme = (theme: Theme): string => {
+  return theme.metadata.variant === 'dark' ? MONACO_DARK_THEME_ID : MONACO_LIGHT_THEME_ID;
+};
+
+export const ensureMonacoThemeRegistered = (theme: Theme, monacoOverride?: Monaco): void => {
+  const monaco = monacoOverride ?? getMonacoFromGlobal();
+  if (!monaco) return;
+
+  const themeId = getMonacoThemeIdForTheme(theme);
+  if (lastRegisteredThemeId === themeId) return;
+
+  const themeData = theme.metadata.variant === 'dark' ? flexokiDarkTheme : flexokiLightTheme;
+  monaco.editor.defineTheme(themeId, themeData);
+
+  lastRegisteredThemeId = themeId;
+};
diff --git a/packages/ui/src/lib/theme/syntaxThemeGenerator.ts b/packages/ui/src/lib/theme/syntaxThemeGenerator.ts
new file mode 100644
index 00000000..ad835944
--- /dev/null
+++ b/packages/ui/src/lib/theme/syntaxThemeGenerator.ts
@@ -0,0 +1,208 @@
+import type { Theme } from '@/types/theme';
+
+export function generateSyntaxTheme(theme: Theme) {
+  const syntax = theme.colors.syntax;
+  const surface = theme.colors.surface;
+
+  return {
+    'code[class*="language-"]': {
+      color: syntax.base.foreground,
+      background: 'transparent',
+      fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+      fontSize: '1em',
+      textAlign: 'left' as const,
+      whiteSpace: 'pre',
+      wordSpacing: 'normal',
+      wordBreak: 'normal' as const,
+      wordWrap: 'normal' as const,
+      lineHeight: '1.5',
+      MozTabSize: '4',
+      OTabSize: '4',
+      tabSize: '4',
+      WebkitHyphens: 'none' as const,
+      MozHyphens: 'none' as const,
+      msHyphens: 'none' as const,
+      hyphens: 'none' as const,
+    },
+    'pre[class*="language-"]': {
+      color: syntax.base.foreground,
+      background: 'transparent',
+      fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+      fontSize: '1em',
+      textAlign: 'left' as const,
+      whiteSpace: 'pre',
+      wordSpacing: 'normal',
+      wordBreak: 'normal' as const,
+      wordWrap: 'normal' as const,
+      lineHeight: '1.5',
+      MozTabSize: '4',
+      OTabSize: '4',
+      tabSize: '4',
+      WebkitHyphens: 'none' as const,
+      MozHyphens: 'none' as const,
+      msHyphens: 'none' as const,
+      hyphens: 'none' as const,
+      padding: '0',
+      margin: '0',
+      overflow: 'auto',
+    },
+
+    comment: {
+      color: syntax.base.comment,
+      fontStyle: 'italic',
+    },
+    prolog: {
+      color: syntax.base.comment,
+    },
+    doctype: {
+      color: syntax.base.comment,
+    },
+    cdata: {
+      color: syntax.base.comment,
+    },
+
+    punctuation: {
+      color: syntax.tokens?.punctuation || surface.mutedForeground,
+    },
+
+    property: {
+      color: syntax.tokens?.variableProperty || syntax.base.variable,
+    },
+    tag: {
+      color: syntax.tokens?.tag || syntax.base.keyword,
+    },
+    'attr-name': {
+      color: syntax.tokens?.tagAttribute || syntax.base.variable,
+    },
+    'attr-value': {
+      color: syntax.tokens?.tagAttributeValue || syntax.base.string,
+    },
+
+    boolean: {
+      color: syntax.tokens?.boolean || syntax.base.number,
+    },
+    number: {
+      color: syntax.base.number,
+    },
+    constant: {
+      color: syntax.tokens?.constant || syntax.base.number,
+    },
+    symbol: {
+      color: syntax.tokens?.constant || syntax.base.number,
+    },
+
+    string: {
+      color: syntax.base.string,
+    },
+    char: {
+      color: syntax.base.string,
+    },
+
+    function: {
+      color: syntax.base.function,
+    },
+    builtin: {
+      color: syntax.tokens?.functionBuiltin || syntax.base.function,
+    },
+
+    'class-name': {
+      color: syntax.tokens?.className || syntax.base.type,
+    },
+    namespace: {
+      color: syntax.tokens?.namespace || syntax.base.type,
+      opacity: 0.8,
+    },
+
+    keyword: {
+      color: syntax.base.keyword,
+    },
+    atrule: {
+      color: syntax.base.keyword,
+    },
+    selector: {
+      color: syntax.base.function,
+    },
+
+    operator: {
+      color: syntax.base.operator,
+    },
+
+    variable: {
+      color: syntax.base.variable,
+    },
+
+    regex: {
+      color: syntax.tokens?.regex || syntax.base.string,
+    },
+
+    url: {
+      color: syntax.base.function,
+      textDecoration: 'underline',
+    },
+    entity: {
+      color: syntax.base.function,
+      cursor: 'help',
+    },
+
+    '.language-css .token.string': {
+      color: syntax.base.string,
+    },
+    '.style .token.string': {
+      color: syntax.base.string,
+    },
+
+    deleted: {
+      color: theme.colors.status.error,
+      backgroundColor: theme.colors.status.errorBackground,
+    },
+    inserted: {
+      color: theme.colors.status.success,
+      backgroundColor: theme.colors.status.successBackground,
+    },
+
+    title: {
+      color: theme.colors.primary.base,
+      fontWeight: 'bold',
+    },
+    'code-block': {
+      color: syntax.base.string,
+    },
+    'code-snippet': {
+      color: syntax.base.string,
+    },
+    list: {
+      color: syntax.base.variable,
+    },
+    hr: {
+      color: surface.mutedForeground,
+    },
+    table: {
+      color: syntax.base.function,
+    },
+    blockquote: {
+      color: surface.mutedForeground,
+      fontStyle: 'italic',
+    },
+
+    important: {
+      color: syntax.base.keyword,
+      fontWeight: 'bold',
+    },
+    bold: {
+      fontWeight: 'bold',
+    },
+    italic: {
+      fontStyle: 'italic',
+    },
+    strike: {
+      textDecoration: 'line-through',
+    },
+
+    decorator: {
+      color: syntax.tokens?.decorator || syntax.base.function,
+    },
+    annotation: {
+      color: syntax.tokens?.decorator || syntax.base.function,
+    },
+  };
+}
\ No newline at end of file
diff --git a/packages/ui/src/lib/theme/themes/flexoki-dark.ts b/packages/ui/src/lib/theme/themes/flexoki-dark.ts
new file mode 100644
index 00000000..9907d093
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/flexoki-dark.ts
@@ -0,0 +1,197 @@
+import type { Theme } from '@/types/theme';
+
+export const flexokiDarkTheme: Theme = {
+  metadata: {
+    id: 'flexoki-dark',
+    name: 'Flexoki Dark',
+    description: 'An inky color scheme for prose and code - dark variant',
+    author: 'Steph Ango',
+    version: '1.0.0',
+    variant: 'dark',
+    tags: ['dark', 'warm', 'natural', 'ink']
+  },
+
+  colors: {
+
+    primary: {
+      base: '#EC8B49',
+      hover: '#DA702C',
+      active: '#F9AE77',
+      foreground: '#100F0F',
+      muted: '#EC8B4980',
+      emphasis: '#F9AE77'
+    },
+
+    surface: {
+      background: '#100F0F',
+      foreground: '#CECDC3',
+      muted: '#1C1B1A',
+      mutedForeground: '#878580',
+      elevated: '#282726',
+      elevatedForeground: '#CECDC3',
+      overlay: '#00000080',
+      subtle: '#343331'
+    },
+
+    interactive: {
+      border: '#343331',
+      borderHover: '#403E3C',
+      borderFocus: '#EC8B49',
+      selection: '#CECDC330',
+      selectionForeground: '#CECDC3',
+      focus: '#EC8B49',
+      focusRing: '#EC8B4950',
+      cursor: '#CECDC3',
+      hover: '#343331',
+      active: '#403E3C'
+    },
+
+    status: {
+      error: '#D14D41',
+      errorForeground: '#100F0F',
+      errorBackground: '#AF302920',
+      errorBorder: '#AF302950',
+
+      warning: '#DA702C',
+      warningForeground: '#100F0F',
+      warningBackground: '#BC521520',
+      warningBorder: '#BC521550',
+
+      success: '#A0AF54',
+      successForeground: '#100F0F',
+      successBackground: '#66800B20',
+      successBorder: '#66800B50',
+
+      info: '#4385BE',
+      infoForeground: '#100F0F',
+      infoBackground: '#205EA620',
+      infoBorder: '#205EA650'
+    },
+
+    syntax: {
+      base: {
+        background: '#1C1B1A',
+        foreground: '#CECDC3',
+        comment: '#878580',
+        keyword: '#4385BE',
+        string: '#3AA99F',
+        number: '#8B7EC8',
+        function: '#DA702C',
+        variable: '#CECDC3',
+        type: '#D0A215',
+        operator: '#D14D41'
+      },
+
+      tokens: {
+        commentDoc: '#575653',
+        stringEscape: '#CECDC3',
+        keywordImport: '#D14D41',
+        storageModifier: '#4385BE',
+        functionCall: '#DA702C',
+        method: '#879A39',
+        variableProperty: '#4385BE',
+        variableOther: '#879A39',
+        variableGlobal: '#CE5D97',
+        variableLocal: '#282726',
+        parameter: '#CECDC3',
+        constant: '#CECDC3',
+        class: '#DA702C',
+        className: '#DA702C',
+        interface: '#D0A215',
+        struct: '#DA702C',
+        enum: '#DA702C',
+        typeParameter: '#DA702C',
+        namespace: '#D0A215',
+        module: '#D14D41',
+        tag: '#4385BE',
+        jsxTag: '#CE5D97',
+        tagAttribute: '#D0A215',
+        tagAttributeValue: '#3AA99F',
+        boolean: '#D0A215',
+        decorator: '#D0A215',
+        label: '#CE5D97',
+        punctuation: '#878580',
+        macro: '#4385BE',
+        preprocessor: '#CE5D97',
+        regex: '#3AA99F',
+        url: '#4385BE',
+        key: '#DA702C',
+        exception: '#CE5D97'
+      },
+
+      highlights: {
+        diffAdded: '#879A39',
+        diffAddedBackground: '#66800B20',
+        diffRemoved: '#D14D41',
+        diffRemovedBackground: '#AF302920',
+        diffModified: '#4385BE',
+        diffModifiedBackground: '#205EA620',
+        lineNumber: '#403E3C',
+        lineNumberActive: '#CECDC3'
+      }
+    },
+
+    markdown: {
+      heading1: '#D0A215',
+      heading2: '#DA702C',
+      heading3: '#4385BE',
+      heading4: '#CECDC3',
+      link: '#4385BE',
+      linkHover: '#205EA6',
+      inlineCode: '#A0AF54',
+      inlineCodeBackground: '#1C1B1A',
+      blockquote: '#878580',
+      blockquoteBorder: '#343331',
+      listMarker: '#D0A21599'
+    },
+
+    chat: {
+      userMessage: '#CECDC3',
+      userMessageBackground: '#282726',
+      assistantMessage: '#CECDC3',
+      assistantMessageBackground: '#100F0F',
+      timestamp: '#878580',
+      divider: '#343331'
+    },
+
+    tools: {
+      background: '#1C1B1A50',
+      border: '#34333180',
+      headerHover: '#34333150',
+      icon: '#878580',
+       title: '#CECDC3',
+      description: '#878580',
+
+      edit: {
+        added: '#879A39',
+        addedBackground: '#66800B25',
+        removed: '#D14D41',
+        removedBackground: '#AF302925',
+        lineNumber: '#403E3C'
+      }
+    }
+  },
+
+  config: {
+    fonts: {
+      sans: '"IBM Plex Mono", monospace',
+      mono: '"IBM Plex Mono", monospace',
+      heading: '"IBM Plex Mono", monospace'
+    },
+
+    radius: {
+      none: '0',
+      sm: '0.125rem',
+      md: '0.375rem',
+      lg: '0.5rem',
+      xl: '0.75rem',
+      full: '9999px'
+    },
+
+    transitions: {
+      fast: '150ms ease',
+      normal: '250ms ease',
+      slow: '350ms ease'
+    }
+  }
+};
diff --git a/packages/ui/src/lib/theme/themes/flexoki-light.ts b/packages/ui/src/lib/theme/themes/flexoki-light.ts
new file mode 100644
index 00000000..7c3c65fd
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/flexoki-light.ts
@@ -0,0 +1,197 @@
+import type { Theme } from '@/types/theme';
+
+export const flexokiLightTheme: Theme = {
+  metadata: {
+    id: 'flexoki-light',
+    name: 'Flexoki Light',
+    description: 'An inky color scheme for prose and code - light variant',
+    author: 'Steph Ango',
+    version: '1.0.0',
+    variant: 'light',
+    tags: ['light', 'warm', 'natural', 'paper']
+  },
+
+  colors: {
+
+    primary: {
+      base: '#EC8B49',
+      hover: '#F9AE77',
+      active: '#DA702C',
+      foreground: '#FFFCF0',
+      muted: '#EC8B4980',
+      emphasis: '#F9AE77'
+    },
+
+    surface: {
+      background: '#FFFCF0',
+      foreground: '#100F0F',
+      muted: '#F2F0E5',
+      mutedForeground: '#6F6E69',
+      elevated: '#E6E4D9',
+      elevatedForeground: '#100F0F',
+      overlay: '#100F0F20',
+      subtle: '#DAD8CE'
+    },
+
+    interactive: {
+      border: '#DAD8CE',
+      borderHover: '#CECDC3',
+      borderFocus: '#EC8B49',
+      selection: '#100F0F44',
+      selectionForeground: '#100F0F',
+      focus: '#EC8B49',
+      focusRing: '#EC8B4940',
+      cursor: '#100F0F',
+      hover: '#DAD8CE',
+      active: '#CECDC3'
+    },
+
+    status: {
+       error: '#AF3029',
+       errorForeground: '#FFFCF0',
+       errorBackground: '#D14D4120',
+       errorBorder: '#D14D4150',
+
+       warning: '#BC5215',
+      warningForeground: '#FFFCF0',
+      warningBackground: '#DA702C20',
+      warningBorder: '#DA702C50',
+
+      success: '#66800B',
+      successForeground: '#FFFCF0',
+      successBackground: '#879A3920',
+      successBorder: '#879A3950',
+
+      info: '#205EA6',
+      infoForeground: '#FFFCF0',
+      infoBackground: '#4385BE20',
+      infoBorder: '#4385BE50'
+    },
+
+    syntax: {
+      base: {
+        background: '#F2F0E5',
+        foreground: '#100F0F',
+        comment: '#6F6E69',
+        keyword: '#205EA6',
+        string: '#24837B',
+        number: '#5E409D',
+        function: '#BC5215',
+        variable: '#100F0F',
+        type: '#AD8301',
+        operator: '#AF3029'
+      },
+
+      tokens: {
+        commentDoc: '#B7B5AC',
+        stringEscape: '#100F0F',
+        keywordImport: '#AF3029',
+        storageModifier: '#205EA6',
+        functionCall: '#BC5215',
+        method: '#66800B',
+        variableProperty: '#205EA6',
+        variableOther: '#66800B',
+        variableGlobal: '#A02F6F',
+        variableLocal: '#E6E4D9',
+        parameter: '#100F0F',
+        constant: '#100F0F',
+        class: '#BC5215',
+        className: '#BC5215',
+        interface: '#AD8301',
+        struct: '#BC5215',
+        enum: '#BC5215',
+        typeParameter: '#BC5215',
+        namespace: '#AD8301',
+        module: '#AF3029',
+        tag: '#205EA6',
+        jsxTag: '#A02F6F',
+        tagAttribute: '#AD8301',
+        tagAttributeValue: '#24837B',
+        boolean: '#AD8301',
+        decorator: '#AD8301',
+        label: '#A02F6F',
+        punctuation: '#6F6E69',
+        macro: '#205EA6',
+        preprocessor: '#A02F6F',
+        regex: '#24837B',
+        url: '#205EA6',
+        key: '#BC5215',
+        exception: '#A02F6F'
+      },
+
+      highlights: {
+        diffAdded: '#66800B',
+        diffAddedBackground: '#879A3920',
+        diffRemoved: '#AF3029',
+        diffRemovedBackground: '#D14D4120',
+        diffModified: '#205EA6',
+        diffModifiedBackground: '#4385BE20',
+        lineNumber: '#CECDC3',
+        lineNumberActive: '#100F0F'
+      }
+    },
+
+    markdown: {
+      heading1: '#AD8301',
+      heading2: '#BC5215',
+      heading3: '#205EA6',
+      heading4: '#100F0F',
+      link: '#205EA6',
+      linkHover: '#4385BE',
+      inlineCode: '#24837B',
+      inlineCodeBackground: '#F2F0E5',
+      blockquote: '#6F6E69',
+      blockquoteBorder: '#DAD8CE',
+      listMarker: '#AD830199'
+    },
+
+    chat: {
+      userMessage: '#100F0F',
+      userMessageBackground: '#F2F0E5',
+      assistantMessage: '#100F0F',
+      assistantMessageBackground: '#FFFCF0',
+      timestamp: '#6F6E69',
+      divider: '#DAD8CE'
+    },
+
+    tools: {
+      background: '#F2F0E550',
+      border: '#DAD8CE80',
+      headerHover: '#DAD8CE',
+      icon: '#6F6E69',
+       title: '#100F0F',
+      description: '#6F6E69',
+
+      edit: {
+        added: '#66800B',
+        addedBackground: '#66800B25',
+        removed: '#AF3029',
+        removedBackground: '#AF302925',
+        lineNumber: '#CECDC3'
+      }
+    }
+  },
+
+  config: {
+    fonts: {
+      sans: '"IBM Plex Mono", monospace',
+      mono: '"IBM Plex Mono", monospace',
+      heading: '"IBM Plex Mono", monospace'
+    },
+
+    radius: {
+      none: '0',
+      sm: '0.125rem',
+      md: '0.375rem',
+      lg: '0.5rem',
+      xl: '0.75rem',
+      full: '9999px'
+    },
+
+    transitions: {
+      fast: '150ms ease',
+      normal: '250ms ease',
+      slow: '350ms ease'
+    }
+  }
+};
diff --git a/packages/ui/src/lib/theme/themes/index.ts b/packages/ui/src/lib/theme/themes/index.ts
new file mode 100644
index 00000000..54ab1de6
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/index.ts
@@ -0,0 +1,21 @@
+import type { Theme } from '@/types/theme';
+import { flexokiLightTheme } from './flexoki-light';
+import { flexokiDarkTheme } from './flexoki-dark';
+
+export const themes: Theme[] = [
+  flexokiLightTheme,
+  flexokiDarkTheme,
+];
+
+export {
+  flexokiLightTheme,
+  flexokiDarkTheme,
+};
+
+export function getThemeById(id: string): Theme | undefined {
+  return themes.find(theme => theme.metadata.id === id);
+}
+
+export function getDefaultTheme(prefersDark: boolean): Theme {
+  return prefersDark ? flexokiDarkTheme : flexokiLightTheme;
+}
diff --git a/packages/ui/src/lib/toolHelpers.ts b/packages/ui/src/lib/toolHelpers.ts
new file mode 100644
index 00000000..acad1f6a
--- /dev/null
+++ b/packages/ui/src/lib/toolHelpers.ts
@@ -0,0 +1,330 @@
+export interface ToolMetadata {
+  displayName: string;
+  icon?: string;
+  outputLanguage?: string;
+  inputFields?: {
+    key: string;
+    label: string;
+    type: 'command' | 'file' | 'pattern' | 'text' | 'code';
+    language?: string;
+  }[];
+  category: 'file' | 'search' | 'code' | 'system' | 'ai' | 'web';
+}
+
+export const TOOL_METADATA: Record<string, ToolMetadata> = {
+
+  read: {
+    displayName: 'Read File',
+    category: 'file',
+    outputLanguage: 'auto',
+    inputFields: [
+      { key: 'filePath', label: 'File Path', type: 'file' },
+      { key: 'offset', label: 'Start Line', type: 'text' },
+      { key: 'limit', label: 'Lines to Read', type: 'text' }
+    ]
+  },
+  write: {
+    displayName: 'Write File',
+    category: 'file',
+    outputLanguage: 'auto',
+    inputFields: [
+      { key: 'filePath', label: 'File Path', type: 'file' },
+      { key: 'content', label: 'Content', type: 'code' }
+    ]
+  },
+  edit: {
+    displayName: 'Edit File',
+    category: 'file',
+    outputLanguage: 'diff',
+    inputFields: [
+      { key: 'filePath', label: 'File Path', type: 'file' },
+      { key: 'oldString', label: 'Find', type: 'code' },
+      { key: 'newString', label: 'Replace', type: 'code' },
+      { key: 'replaceAll', label: 'Replace All', type: 'text' }
+    ]
+  },
+  multiedit: {
+    displayName: 'Multi-Edit',
+    category: 'file',
+    outputLanguage: 'diff',
+    inputFields: [
+      { key: 'filePath', label: 'File Path', type: 'file' },
+      { key: 'edits', label: 'Edits', type: 'code', language: 'json' }
+    ]
+  },
+
+  bash: {
+    displayName: 'Shell Command',
+    category: 'system',
+    outputLanguage: 'text',
+    inputFields: [
+      { key: 'command', label: 'Command', type: 'command', language: 'bash' },
+      { key: 'description', label: 'Description', type: 'text' },
+      { key: 'timeout', label: 'Timeout (ms)', type: 'text' }
+    ]
+  },
+
+  grep: {
+    displayName: 'Search Files',
+    category: 'search',
+    outputLanguage: 'text',
+    inputFields: [
+      { key: 'pattern', label: 'Pattern', type: 'pattern' },
+      { key: 'path', label: 'Directory', type: 'file' },
+      { key: 'include', label: 'Include Pattern', type: 'pattern' }
+    ]
+  },
+  glob: {
+    displayName: 'Find Files',
+    category: 'search',
+    outputLanguage: 'text',
+    inputFields: [
+      { key: 'pattern', label: 'Pattern', type: 'pattern' },
+      { key: 'path', label: 'Directory', type: 'file' }
+    ]
+  },
+  list: {
+    displayName: 'List Directory',
+    category: 'file',
+    outputLanguage: 'text',
+    inputFields: [
+      { key: 'path', label: 'Directory', type: 'file' },
+      { key: 'ignore', label: 'Ignore Patterns', type: 'pattern' }
+    ]
+  },
+
+  task: {
+    displayName: 'Agent Task',
+    category: 'ai',
+    outputLanguage: 'markdown',
+    inputFields: [
+      { key: 'description', label: 'Task', type: 'text' },
+      { key: 'prompt', label: 'Instructions', type: 'text' },
+      { key: 'subagent_type', label: 'Agent Type', type: 'text' }
+    ]
+  },
+
+  webfetch: {
+    displayName: 'Fetch URL',
+    category: 'web',
+    outputLanguage: 'auto',
+    inputFields: [
+      { key: 'url', label: 'URL', type: 'text' },
+      { key: 'format', label: 'Format', type: 'text' },
+      { key: 'timeout', label: 'Timeout', type: 'text' }
+    ]
+  },
+
+   websearch: {
+     displayName: 'Web Search',
+     category: 'web',
+     outputLanguage: 'markdown',
+     inputFields: [
+       { key: 'query', label: 'Search Query', type: 'text' },
+       { key: 'numResults', label: 'Results Count', type: 'text' },
+       { key: 'type', label: 'Search Type', type: 'text' }
+     ]
+   },
+   codesearch: {
+     displayName: 'Code Search',
+     category: 'web',
+     outputLanguage: 'markdown',
+     inputFields: [
+       { key: 'query', label: 'Search Query', type: 'text' },
+       { key: 'tokensNum', label: 'Tokens', type: 'text' }
+     ]
+   },
+
+   todowrite: {
+     displayName: 'Update Todo List',
+     category: 'system',
+     outputLanguage: 'json',
+     inputFields: [
+       { key: 'todos', label: 'Todo Items', type: 'code', language: 'json' }
+     ]
+   },
+   todoread: {
+     displayName: 'Read Todo List',
+     category: 'system',
+     outputLanguage: 'json',
+     inputFields: []
+   }
+ };
+
+export function getToolMetadata(toolName: string): ToolMetadata {
+  return TOOL_METADATA[toolName] || {
+    displayName: toolName.charAt(0).toUpperCase() + toolName.slice(1).replace(/-/g, ' '),
+    category: 'system',
+    outputLanguage: 'text',
+    inputFields: []
+  };
+}
+
+export function detectToolOutputLanguage(
+  toolName: string,
+  output: string,
+  input?: Record<string, unknown>
+): string {
+  const metadata = getToolMetadata(toolName);
+
+  if (metadata.outputLanguage === 'auto') {
+
+    if (input?.filePath || input?.file_path || input?.sourcePath) {
+      const filePath = (input.filePath || input.file_path || input.sourcePath) as string;
+      const language = getLanguageFromExtension(filePath);
+      if (language) return language;
+    }
+
+    if (toolName === 'webfetch') {
+      if (output.trim().startsWith('{') || output.trim().startsWith('[')) {
+        try {
+          JSON.parse(output);
+          return 'json';
+        } catch { /* ignored */ }
+      }
+      if (output.trim().startsWith('<')) {
+        return 'html';
+      }
+      if (output.includes('```')) {
+        return 'markdown';
+      }
+    }
+
+    return 'text';
+  }
+
+  return metadata.outputLanguage || 'text';
+}
+
+export function getLanguageFromExtension(filePath: string): string | null {
+  const ext = filePath.split('.').pop()?.toLowerCase();
+
+  const languageMap: Record<string, string> = {
+
+    'js': 'javascript',
+    'jsx': 'javascript',
+    'ts': 'typescript',
+    'tsx': 'typescript',
+    'mjs': 'javascript',
+    'cjs': 'javascript',
+
+    'html': 'html',
+    'htm': 'html',
+    'css': 'css',
+    'scss': 'scss',
+    'sass': 'sass',
+    'less': 'less',
+
+    'json': 'json',
+    'jsonc': 'json',
+    'yaml': 'yaml',
+    'yml': 'yaml',
+    'toml': 'toml',
+    'xml': 'xml',
+
+    'py': 'python',
+    'rb': 'ruby',
+    'go': 'go',
+    'rs': 'rust',
+    'java': 'java',
+    'kt': 'kotlin',
+    'swift': 'swift',
+    'c': 'c',
+    'cpp': 'cpp',
+    'cc': 'cpp',
+    'h': 'c',
+    'hpp': 'cpp',
+    'cs': 'csharp',
+    'php': 'php',
+    'dart': 'dart',
+    'r': 'r',
+    'lua': 'lua',
+    'vim': 'vim',
+
+    'sh': 'bash',
+    'bash': 'bash',
+    'zsh': 'bash',
+    'fish': 'bash',
+    'ps1': 'powershell',
+
+    'md': 'markdown',
+    'mdx': 'markdown',
+    'rst': 'text',
+    'txt': 'text',
+
+    'dockerfile': 'dockerfile',
+    'makefile': 'makefile',
+    'gitignore': 'text',
+    'env': 'text',
+    'conf': 'text',
+    'cfg': 'text',
+    'ini': 'ini',
+
+    'sql': 'sql',
+
+    'diff': 'diff',
+    'patch': 'diff'
+  };
+
+  return languageMap[ext || ''] || null;
+}
+
+export function formatToolInput(input: Record<string, unknown>, toolName: string): string {
+  if (!input) return '';
+
+  const getString = (key: string): string | null => {
+    const val = input[key];
+    return typeof val === 'string' ? val : (typeof val === 'number' ? String(val) : null);
+  };
+
+  if (toolName === 'bash') {
+    const cmd = getString('command');
+    if (cmd) return cmd;
+  }
+
+  if (toolName === 'task') {
+    const prompt = getString('prompt');
+    if (prompt) return prompt;
+    const desc = getString('description');
+    if (desc) return desc;
+  }
+
+  if ((toolName === 'edit' || toolName === 'multiedit') && typeof input === 'object') {
+    const filePath = getString('filePath') || getString('file_path') || getString('path');
+    if (filePath) {
+      return `File path: ${filePath}`;
+    }
+  }
+
+  if (toolName === 'write' && typeof input === 'object') {
+
+    const content = getString('content');
+    if (content) {
+      return content;
+    }
+  }
+
+  if (typeof input === 'object') {
+    const entries = Object.entries(input)
+      .filter(([, value]) => value !== undefined && value !== null && value !== '')
+      .map(([key, value]) => {
+
+        const formattedKey = key.replace(/([A-Z])/g, ' $1').replace(/_/g, ' ')
+          .toLowerCase()
+          .replace(/^./, str => str.toUpperCase());
+
+        let formattedValue = value;
+        if (typeof value === 'object') {
+          formattedValue = JSON.stringify(value, null, 2);
+        } else if (typeof value === 'boolean') {
+          formattedValue = value ? 'Yes' : 'No';
+        }
+
+        return `${formattedKey}: ${formattedValue}`;
+      });
+
+    return entries.join('\n');
+  }
+
+  return String(input);
+}
diff --git a/packages/ui/src/lib/typography.ts b/packages/ui/src/lib/typography.ts
new file mode 100644
index 00000000..53211587
--- /dev/null
+++ b/packages/ui/src/lib/typography.ts
@@ -0,0 +1,322 @@
+export const SEMANTIC_TYPOGRAPHY = {
+  markdown: '0.9375rem',
+  code: '0.9063rem',
+  uiHeader: '0.9375rem',
+  uiLabel: '0.8750rem',
+  meta: '0.875rem',
+  micro: '0.875rem',
+} as const;
+
+export const SEMANTIC_TYPOGRAPHY_CSS = {
+  '--text-markdown': SEMANTIC_TYPOGRAPHY.markdown,
+  '--text-code': SEMANTIC_TYPOGRAPHY.code,
+  '--text-ui-header': SEMANTIC_TYPOGRAPHY.uiHeader,
+  '--text-ui-label': SEMANTIC_TYPOGRAPHY.uiLabel,
+  '--text-meta': SEMANTIC_TYPOGRAPHY.meta,
+  '--text-micro': SEMANTIC_TYPOGRAPHY.micro,
+} as const;
+
+export const TYPOGRAPHY_CLASSES = {
+  markdown: 'typography-markdown',
+  code: 'typography-code',
+  uiHeader: 'typography-ui-header',
+  uiLabel: 'typography-ui-label',
+  meta: 'typography-meta',
+  micro: 'typography-micro',
+} as const;
+
+export type SemanticTypographyKey = keyof typeof SEMANTIC_TYPOGRAPHY;
+export type TypographyClassKey = keyof typeof TYPOGRAPHY_CLASSES;
+
+export function getTypographyVariable(key: SemanticTypographyKey): string {
+  return `--text-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+}
+
+export function getTypographyClass(key: TypographyClassKey): string {
+  return TYPOGRAPHY_CLASSES[key];
+}
+
+export const typography = {
+
+  semanticMarkdown: {
+    fontSize: 'var(--text-markdown)',
+  },
+
+   semanticCode: {
+     fontSize: 'var(--text-code)',
+   },
+
+  uiHeader: {
+    fontSize: 'var(--text-ui-header)',
+  },
+
+  uiLabel: {
+    fontSize: 'var(--text-ui-label)',
+  },
+
+  meta: {
+    fontSize: 'var(--text-meta)',
+  },
+
+  micro: {
+    fontSize: 'var(--text-micro)',
+  },
+
+  ui: {
+    button: {
+      fontSize: 'var(--text-ui-label)',
+      lineHeight: 'var(--ui-button-line-height)',
+      letterSpacing: 'var(--ui-button-letter-spacing)',
+      fontWeight: 'var(--ui-button-font-weight)',
+    },
+    buttonSmall: {
+      fontSize: 'var(--text-meta)',
+      lineHeight: 'var(--ui-button-small-line-height)',
+      letterSpacing: 'var(--ui-button-small-letter-spacing)',
+      fontWeight: 'var(--ui-button-small-font-weight)',
+    },
+    buttonLarge: {
+      fontSize: 'var(--text-ui-label)',
+      lineHeight: 'var(--ui-button-large-line-height)',
+      letterSpacing: 'var(--ui-button-large-letter-spacing)',
+      fontWeight: 'var(--ui-button-large-font-weight)',
+    },
+    label: {
+      fontSize: 'var(--text-meta)',
+      lineHeight: 'var(--ui-label-line-height)',
+      letterSpacing: 'var(--ui-label-letter-spacing)',
+      fontWeight: 'var(--ui-label-font-weight)',
+    },
+    caption: {
+      fontSize: 'var(--text-micro)',
+      lineHeight: 'var(--ui-caption-line-height)',
+      letterSpacing: 'var(--ui-caption-letter-spacing)',
+      fontWeight: 'var(--ui-caption-font-weight)',
+    },
+    badge: {
+      fontSize: 'var(--text-micro)',
+      lineHeight: 'var(--ui-badge-line-height)',
+      letterSpacing: 'var(--ui-badge-letter-spacing)',
+      fontWeight: 'var(--ui-badge-font-weight)',
+    },
+    tooltip: {
+      fontSize: 'var(--text-micro)',
+      lineHeight: 'var(--ui-tooltip-line-height)',
+      letterSpacing: 'var(--ui-tooltip-letter-spacing)',
+      fontWeight: 'var(--ui-tooltip-font-weight)',
+    },
+    input: {
+      fontSize: 'var(--text-ui-label)',
+      lineHeight: 'var(--ui-input-line-height)',
+      letterSpacing: 'var(--ui-input-letter-spacing)',
+      fontWeight: 'var(--ui-input-font-weight)',
+    },
+    helperText: {
+      fontSize: 'var(--text-meta)',
+      lineHeight: 'var(--ui-helper-text-line-height)',
+      letterSpacing: 'var(--ui-helper-text-letter-spacing)',
+      fontWeight: 'var(--ui-helper-text-font-weight)',
+    },
+  },
+
+  code: {
+    inline: {
+      fontSize: 'var(--text-code)',
+      lineHeight: 'var(--code-inline-line-height)',
+      letterSpacing: 'var(--code-inline-letter-spacing)',
+      fontWeight: 'var(--code-inline-font-weight)',
+    },
+    block: {
+      fontSize: 'var(--text-code)',
+      lineHeight: 'var(--code-block-line-height)',
+      letterSpacing: 'var(--code-block-letter-spacing)',
+      fontWeight: 'var(--code-block-font-weight)',
+    },
+    lineNumbers: {
+      fontSize: 'var(--text-micro)',
+      lineHeight: 'var(--code-line-numbers-line-height)',
+      letterSpacing: 'var(--code-line-numbers-letter-spacing)',
+      fontWeight: 'var(--code-line-numbers-font-weight)',
+    },
+  },
+
+   markdown: {
+    body: {
+      fontSize: 'var(--text-markdown)',
+      lineHeight: 'var(--markdown-body-line-height)',
+      letterSpacing: 'var(--markdown-body-letter-spacing)',
+      fontWeight: 'var(--markdown-body-font-weight)',
+    },
+    bodySmall: {
+      fontSize: 'var(--text-meta)',
+      lineHeight: 'var(--markdown-body-small-line-height)',
+      letterSpacing: 'var(--markdown-body-small-letter-spacing)',
+      fontWeight: 'var(--markdown-body-small-font-weight)',
+    },
+    bodyLarge: {
+      fontSize: 'var(--text-markdown)',
+      lineHeight: 'var(--markdown-body-large-line-height)',
+      letterSpacing: 'var(--markdown-body-large-letter-spacing)',
+      fontWeight: 'var(--markdown-body-large-font-weight)',
+    },
+    blockquote: {
+      fontSize: 'var(--text-markdown)',
+      lineHeight: 'var(--markdown-blockquote-line-height)',
+      letterSpacing: 'var(--markdown-blockquote-letter-spacing)',
+      fontWeight: 'var(--markdown-blockquote-font-weight)',
+    },
+    list: {
+      fontSize: 'var(--text-markdown)',
+      lineHeight: 'var(--markdown-list-line-height)',
+      letterSpacing: 'var(--markdown-list-letter-spacing)',
+      fontWeight: 'var(--markdown-list-font-weight)',
+    },
+    link: {
+      fontSize: 'var(--text-markdown)',
+      lineHeight: 'var(--markdown-link-line-height)',
+      letterSpacing: 'var(--markdown-link-letter-spacing)',
+      fontWeight: 'var(--markdown-link-font-weight)',
+    },
+    code: {
+      fontSize: 'var(--text-code)',
+      lineHeight: 'var(--markdown-code-line-height)',
+      letterSpacing: 'var(--markdown-code-letter-spacing)',
+      fontWeight: 'var(--markdown-code-font-weight)',
+    },
+    codeBlock: {
+      fontSize: 'var(--text-code)',
+      lineHeight: 'var(--markdown-code-block-line-height)',
+      letterSpacing: 'var(--markdown-code-block-letter-spacing)',
+      fontWeight: 'var(--markdown-code-block-font-weight)',
+    },
+  },
+
+  tool: {
+
+    collapsed: {
+      fontSize: 'var(--text-code)',
+      lineHeight: 'var(--code-block-line-height)',
+      letterSpacing: 'var(--code-block-letter-spacing)',
+      fontWeight: 'var(--code-block-font-weight)',
+    },
+
+    popup: {
+      fontSize: 'var(--text-code)',
+      lineHeight: 'var(--code-block-line-height)',
+      letterSpacing: 'var(--code-block-letter-spacing)',
+      fontWeight: 'var(--code-block-font-weight)',
+    },
+
+    inline: {
+      fontSize: 'var(--text-code)',
+      lineHeight: 'var(--code-inline-line-height)',
+      letterSpacing: 'var(--code-inline-letter-spacing)',
+      fontWeight: 'var(--code-inline-font-weight)',
+    },
+  },
+};
+
+export function getTypographyStyle(path: string, fallback?: React.CSSProperties): React.CSSProperties {
+  const parts = path.split('.');
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let current: any = typography;
+
+  for (const part of parts) {
+    if (current && current[part]) {
+      current = current[part];
+    } else {
+      return fallback || {};
+    }
+  }
+
+  return current || fallback || {};
+}
+
+export const toolDisplayStyles = {
+
+  padding: {
+    collapsed: '0.375rem',
+    popup: '0.75rem',
+    popupContainer: '1rem',
+  },
+
+  backgroundOpacity: {
+    muted: '30',
+    mutedAlt: '50',
+  },
+
+  getCollapsedStyles: () => ({
+    ...typography.tool.collapsed,
+    background: 'transparent !important',
+    margin: 0,
+    padding: toolDisplayStyles.padding.collapsed,
+    borderRadius: 0,
+  }),
+
+  getPopupStyles: () => ({
+    ...typography.tool.popup,
+    background: 'transparent !important',
+    margin: 0,
+    padding: toolDisplayStyles.padding.popup,
+    borderRadius: '0.75rem',
+  }),
+
+  getPopupContainerStyles: () => ({
+    ...typography.tool.popup,
+    background: 'transparent !important',
+    margin: 0,
+    padding: toolDisplayStyles.padding.popupContainer,
+    borderRadius: '0.5rem',
+    overflowX: 'auto' as const,
+  }),
+
+  getInlineStyles: () => ({
+    ...typography.tool.inline,
+  }),
+};
+
+export const typographyClasses = {
+
+  'heading-1': 'typography-h1',
+  'heading-2': 'typography-h2',
+  'heading-3': 'typography-h3',
+  'heading-4': 'typography-h4',
+  'heading-5': 'typography-h5',
+  'heading-6': 'typography-h6',
+
+  'ui-button': 'typography-ui-button',
+  'ui-button-small': 'typography-ui-button-small',
+  'ui-button-large': 'typography-ui-button-large',
+  'ui-label': 'typography-ui-label',
+  'ui-caption': 'typography-ui-caption',
+  'ui-badge': 'typography-ui-badge',
+  'ui-tooltip': 'typography-ui-tooltip',
+  'ui-input': 'typography-ui-input',
+  'ui-helper': 'typography-ui-helper-text',
+
+  'code-inline': 'typography-code-inline',
+  'code-block': 'typography-code-block',
+  'code-line-numbers': 'typography-code-line-numbers',
+
+  'markdown-h1': 'typography-markdown-h1',
+  'markdown-h2': 'typography-markdown-h2',
+  'markdown-h3': 'typography-markdown-h3',
+  'markdown-h4': 'typography-markdown-h4',
+  'markdown-h5': 'typography-markdown-h5',
+  'markdown-h6': 'typography-markdown-h6',
+  'markdown-body': 'typography-markdown-body',
+  'markdown-body-small': 'typography-markdown-body-small',
+  'markdown-body-large': 'typography-markdown-body-large',
+  'markdown-blockquote': 'typography-markdown-blockquote',
+  'markdown-list': 'typography-markdown-list',
+  'markdown-link': 'typography-markdown-link',
+  'markdown-code': 'typography-markdown-code',
+  'markdown-code-block': 'typography-markdown-code-block',
+
+  'semantic-markdown': 'typography-markdown',
+  'semantic-code': 'typography-code',
+  'semantic-ui-header': 'typography-ui-header',
+  'semantic-ui-label': 'typography-ui-label',
+  'semantic-meta': 'typography-meta',
+  'semantic-micro': 'typography-micro',
+};
diff --git a/packages/ui/src/lib/typographyWatcher.ts b/packages/ui/src/lib/typographyWatcher.ts
new file mode 100644
index 00000000..c0523faa
--- /dev/null
+++ b/packages/ui/src/lib/typographyWatcher.ts
@@ -0,0 +1,23 @@
+import { SEMANTIC_TYPOGRAPHY } from '@/lib/typography';
+
+let started = false;
+
+const applySemanticTypography = (): void => {
+  if (typeof document === 'undefined') {
+    return;
+  }
+  const root = document.documentElement;
+  Object.entries(SEMANTIC_TYPOGRAPHY).forEach(([key, value]) => {
+    const cssVarName = `--text-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+    root.style.setProperty(cssVarName, value);
+  });
+};
+
+export const startTypographyWatcher = (): void => {
+  if (started || typeof window === 'undefined') {
+    return;
+  }
+  started = true;
+
+  applySemanticTypography();
+};
diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts
new file mode 100644
index 00000000..3bad1b39
--- /dev/null
+++ b/packages/ui/src/lib/utils.ts
@@ -0,0 +1,102 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export const truncatePathMiddle = (
+  value: string,
+  options?: { maxLength?: number }
+): string => {
+  const source = value ?? "";
+  const maxLength = Math.max(16, options?.maxLength ?? 45);
+  if (source.length <= maxLength) {
+    return source;
+  }
+
+  const segments = source.split('/');
+  if (segments.length <= 1) {
+    return source;
+  }
+
+  const fileName = segments.pop() ?? '';
+  if (!fileName) {
+    return source;
+  }
+
+  const prefixBudget = Math.max(0, maxLength - (fileName.length + 2));
+  if (prefixBudget <= 0) {
+    return `…/${fileName}`;
+  }
+
+  let prefix = '';
+  for (const segment of segments) {
+    if (!segment) {
+      continue;
+    }
+    const candidate = prefix ? `${prefix}/${segment}` : segment;
+    if (candidate.length > prefixBudget) {
+      break;
+    }
+    prefix = candidate;
+  }
+
+  if (!prefix) {
+    const first = segments[0] ?? '';
+    prefix = first ? first.slice(0, prefixBudget) : '';
+  }
+
+  return prefix ? `${prefix}…/${fileName}` : `…/${fileName}`;
+};
+
+const normalizePath = (value: string) => {
+  if (!value) return "";
+  if (value === "/") return "/";
+  return value.replace(/\/+$/, "");
+};
+
+export function formatPathForDisplay(path: string | null | undefined, homeDirectory?: string | null): string {
+  if (!path) {
+    return "";
+  }
+
+  const normalizedPath = normalizePath(path);
+  if (normalizedPath === "/") {
+    return "/";
+  }
+
+  const normalizedHome = homeDirectory ? normalizePath(homeDirectory) : undefined;
+
+  if (normalizedHome && normalizedHome !== "/") {
+    if (normalizedPath === normalizedHome) {
+      return "~";
+    }
+    if (normalizedPath.startsWith(`${normalizedHome}/`)) {
+      const relative = normalizedPath.slice(normalizedHome.length + 1);
+      return relative ? `~/${relative}` : "~";
+    }
+  }
+
+  return normalizedPath;
+}
+
+export function formatDirectoryName(path: string | null | undefined, homeDirectory?: string | null): string {
+  if (!path) {
+    return "/";
+  }
+
+  const normalizedPath = normalizePath(path);
+  if (!normalizedPath || normalizedPath === "/") {
+    return "/";
+  }
+
+  const normalizedHome = homeDirectory ? normalizePath(homeDirectory) : undefined;
+  if (normalizedHome && normalizedHome !== "/" && normalizedPath === normalizedHome) {
+    return "~";
+  }
+
+  const segments = normalizedPath.split("/");
+  const name = segments.pop() || normalizedPath;
+  return name || "/";
+}
diff --git a/packages/ui/src/main.tsx b/packages/ui/src/main.tsx
new file mode 100644
index 00000000..462c238a
--- /dev/null
+++ b/packages/ui/src/main.tsx
@@ -0,0 +1,117 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './styles/fonts'
+import './index.css'
+import App from './App.tsx'
+import { SessionAuthGate } from './components/auth/SessionAuthGate'
+import { ThemeSystemProvider } from './contexts/ThemeSystemContext'
+import { ThemeProvider } from './components/providers/ThemeProvider'
+import './lib/debug'
+import { syncDesktopSettings, initializeAppearancePreferences } from './lib/persistence'
+import { startAppearanceAutoSave } from './lib/appearanceAutoSave'
+import { applyPersistedDirectoryPreferences } from './lib/directoryPersistence'
+import { startTypographyWatcher } from './lib/typographyWatcher'
+import type { RuntimeAPIs } from './lib/api/types'
+
+declare global {
+  interface Window {
+    __OPENCHAMBER_RUNTIME_APIS__?: RuntimeAPIs;
+  }
+}
+
+const runtimeAPIs = (typeof window !== 'undefined' && window.__OPENCHAMBER_RUNTIME_APIS__) || (() => {
+  throw new Error('Runtime APIs not provided for legacy UI entrypoint.');
+})();
+
+await syncDesktopSettings();
+await initializeAppearancePreferences();
+startAppearanceAutoSave();
+startTypographyWatcher();
+await applyPersistedDirectoryPreferences();
+
+if (typeof window !== 'undefined') {
+  (window as { debugContextTokens?: () => void }).debugContextTokens = () => {
+    const sessionStore = (window as { __zustand_session_store__?: { getState: () => { currentSessionId?: string; messages: Map<string, { info: { role: string }; parts: { type: string }[] }[]>; sessionContextUsage: Map<string, unknown>; getContextUsage: (contextLimit: number, outputLimit: number) => unknown } } }).__zustand_session_store__;
+    if (!sessionStore) {
+      return;
+    }
+
+    const state = sessionStore.getState();
+    const currentSessionId = state.currentSessionId;
+
+    if (!currentSessionId) {
+      return;
+    }
+
+    const sessionMessages = state.messages.get(currentSessionId) || [];
+    const assistantMessages = sessionMessages.filter((m: { info: { role: string } }) => m.info.role === 'assistant');
+
+    if (assistantMessages.length === 0) {
+      return;
+    }
+
+    const lastMessage = assistantMessages[assistantMessages.length - 1];
+    const tokens = (lastMessage.info as { tokens?: { input?: number; output?: number; reasoning?: number; cache?: { read?: number; write?: number } } }).tokens;
+
+    if (tokens && typeof tokens === 'object') {
+
+      console.debug('Token breakdown:', {
+        base: (tokens.input || 0) + (tokens.output || 0) + (tokens.reasoning || 0),
+        cache: tokens.cache ? (tokens.cache.read || 0) + (tokens.cache.write || 0) : 0
+      });
+    }
+
+    void state.sessionContextUsage.get(currentSessionId);
+
+    const configStore = (window as { __zustand_config_store__?: { getState: () => { getCurrentModel: () => { limit?: { context?: number } } | null } } }).__zustand_config_store__;
+    if (configStore) {
+      const currentModel = configStore.getState().getCurrentModel();
+      const contextLimit = currentModel?.limit?.context || 0;
+      const outputLimit =
+        currentModel && currentModel.limit && typeof currentModel.limit === 'object'
+          ? Math.max(((currentModel.limit as { output?: number }).output ?? 0), 0)
+          : 0;
+
+      if (contextLimit > 0) {
+
+        void state.getContextUsage(contextLimit, outputLimit);
+      }
+    }
+  };
+
+}
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error('Root element not found');
+}
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <ThemeSystemProvider>
+      <ThemeProvider>
+        <SessionAuthGate>
+          <App apis={runtimeAPIs} />
+        </SessionAuthGate>
+      </ThemeProvider>
+    </ThemeSystemProvider>
+  </StrictMode>,
+);
+
+if (typeof window !== 'undefined') {
+  const markRendererReady = () => {
+    try {
+      window.opencodeDesktop?.markRendererReady?.();
+    } catch (error) {
+      console.warn('Failed to notify desktop runtime that renderer is ready:', error);
+    }
+  };
+
+  markRendererReady();
+
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') {
+      markRendererReady();
+    }
+  });
+}
diff --git a/packages/ui/src/stores/contextStore.ts b/packages/ui/src/stores/contextStore.ts
new file mode 100644
index 00000000..36897a2c
--- /dev/null
+++ b/packages/ui/src/stores/contextStore.ts
@@ -0,0 +1,515 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { create } from "zustand";
+import { devtools, persist, createJSONStorage } from "zustand/middleware";
+import type { EditPermissionMode } from "./types/sessionTypes";
+import { getAgentDefaultEditPermission } from "./utils/permissionUtils";
+import { extractTokensFromMessage } from "./utils/tokenUtils";
+import { calculateContextUsage } from "./utils/contextUtils";
+import { getSafeStorage } from "./utils/safeStorage";
+
+interface ContextUsage {
+    totalTokens: number;
+    percentage: number;
+    contextLimit: number;
+    outputLimit?: number;
+    normalizedOutput?: number;
+    thresholdLimit: number;
+    lastMessageId?: string;
+}
+
+interface ContextState {
+
+    sessionModelSelections: Map<string, { providerId: string; modelId: string }>;
+    sessionAgentSelections: Map<string, string>;
+
+    sessionAgentModelSelections: Map<string, Map<string, { providerId: string; modelId: string }>>;
+
+    currentAgentContext: Map<string, string>;
+
+    sessionContextUsage: Map<string, ContextUsage>;
+
+    sessionAgentEditModes: Map<string, Map<string, EditPermissionMode>>;
+    hasHydrated: boolean;
+}
+
+interface ContextActions {
+
+    saveSessionModelSelection: (sessionId: string, providerId: string, modelId: string) => void;
+    getSessionModelSelection: (sessionId: string) => { providerId: string; modelId: string } | null;
+    saveSessionAgentSelection: (sessionId: string, agentName: string) => void;
+    getSessionAgentSelection: (sessionId: string) => string | null;
+
+    saveAgentModelForSession: (sessionId: string, agentName: string, providerId: string, modelId: string) => void;
+    getAgentModelForSession: (sessionId: string, agentName: string) => { providerId: string; modelId: string } | null;
+
+    analyzeAndSaveExternalSessionChoices: (sessionId: string, agents: any[], messages: Map<string, { info: any; parts: any[] }[]>) => Promise<Map<string, { providerId: string; modelId: string; timestamp: number }>>;
+
+    getContextUsage: (sessionId: string, contextLimit: number, outputLimit: number, messages: Map<string, { info: any; parts: any[] }[]>) => ContextUsage | null;
+
+    updateSessionContextUsage: (sessionId: string, contextLimit: number, outputLimit: number, messages: Map<string, { info: any; parts: any[] }[]>) => void;
+
+    initializeSessionContextUsage: (sessionId: string, contextLimit: number, outputLimit: number, messages: Map<string, { info: any; parts: any[] }[]>) => void;
+
+    pollForTokenUpdates: (sessionId: string, messageId: string, messages: Map<string, { info: any; parts: any[] }[]>, maxAttempts?: number) => void;
+
+    getCurrentAgent: (sessionId: string) => string | undefined;
+
+    getSessionAgentEditMode: (sessionId: string, agentName: string | undefined, defaultMode?: EditPermissionMode) => EditPermissionMode;
+    toggleSessionAgentEditMode: (sessionId: string, agentName: string | undefined, defaultMode?: EditPermissionMode) => void;
+    setSessionAgentEditMode: (sessionId: string, agentName: string | undefined, mode: EditPermissionMode, defaultMode?: EditPermissionMode) => void;
+}
+
+type ContextStore = ContextState & ContextActions;
+
+const EDIT_PERMISSION_SEQUENCE: EditPermissionMode[] = ['ask', 'allow', 'full'];
+
+export const useContextStore = create<ContextStore>()(
+    devtools(
+        persist(
+            (set, get) => ({
+
+                sessionModelSelections: new Map(),
+                sessionAgentSelections: new Map(),
+                sessionAgentModelSelections: new Map(),
+                currentAgentContext: new Map(),
+                sessionContextUsage: new Map(),
+                sessionAgentEditModes: new Map(),
+                hasHydrated: typeof window === "undefined",
+
+                saveSessionModelSelection: (sessionId: string, providerId: string, modelId: string) => {
+                    set((state) => {
+                        const newSelections = new Map(state.sessionModelSelections);
+                        newSelections.set(sessionId, { providerId, modelId });
+                        return { sessionModelSelections: newSelections };
+                    });
+                },
+
+                getSessionModelSelection: (sessionId: string) => {
+                    const { sessionModelSelections } = get();
+                    return sessionModelSelections.get(sessionId) || null;
+                },
+
+                saveSessionAgentSelection: (sessionId: string, agentName: string) => {
+                    set((state) => {
+                        const newSelections = new Map(state.sessionAgentSelections);
+                        newSelections.set(sessionId, agentName);
+                        return { sessionAgentSelections: newSelections };
+                    });
+                },
+
+                getSessionAgentSelection: (sessionId: string) => {
+                    const { sessionAgentSelections } = get();
+                    return sessionAgentSelections.get(sessionId) || null;
+                },
+
+                saveAgentModelForSession: (sessionId: string, agentName: string, providerId: string, modelId: string) => {
+                    set((state) => {
+                        const newSelections = new Map(state.sessionAgentModelSelections);
+
+                        let agentMap = newSelections.get(sessionId);
+                        if (!agentMap) {
+                            agentMap = new Map();
+                        } else {
+
+                            agentMap = new Map(agentMap);
+                        }
+
+                        agentMap.set(agentName, { providerId, modelId });
+
+                        newSelections.set(sessionId, agentMap);
+
+                        return { sessionAgentModelSelections: newSelections };
+                    });
+                },
+
+                getAgentModelForSession: (sessionId: string, agentName: string) => {
+                    const { sessionAgentModelSelections } = get();
+                    const agentMap = sessionAgentModelSelections.get(sessionId);
+                    if (!agentMap) return null;
+                    return agentMap.get(agentName) || null;
+                },
+
+                analyzeAndSaveExternalSessionChoices: async (sessionId: string, agents: any[], messages: Map<string, { info: any; parts: any[] }[]>) => {
+                    const { saveAgentModelForSession } = get();
+
+                    const agentLastChoices = new Map<
+                        string,
+                        {
+                            providerId: string;
+                            modelId: string;
+                            timestamp: number;
+                        }
+                    >();
+
+                    const extractAgentFromMessage = (messageInfo: any, messageIndex: number): string | null => {
+
+                        if ("mode" in messageInfo && messageInfo.mode && typeof messageInfo.mode === "string") {
+                            const modeAgent = agents.find((a) => a.name === messageInfo.mode);
+                            if (modeAgent) {
+                                return messageInfo.mode;
+                            }
+                        }
+
+                        if (messageInfo.providerID && messageInfo.modelID) {
+                            const matchingAgent = agents.find((agent) => agent.model?.providerID === messageInfo.providerID && agent.model?.modelID === messageInfo.modelID);
+                            if (matchingAgent) {
+                                return matchingAgent.name;
+                            }
+                        }
+
+                        const { currentAgentContext } = get();
+                        const contextAgent = currentAgentContext.get(sessionId);
+                        if (contextAgent && agents.find((a) => a.name === contextAgent)) {
+                            return contextAgent;
+                        }
+
+                        if (messageIndex > 0 && messageInfo.providerID && messageInfo.modelID) {
+
+                            const sessionMessages = messages.get(sessionId) || [];
+                            const assistantMessages = sessionMessages.filter((m) => m.info.role === "assistant").sort((a, b) => a.info.time.created - b.info.time.created);
+
+                            for (let i = messageIndex - 1; i >= 0; i--) {
+                                const prevMessage = assistantMessages[i];
+                                const prevInfo = prevMessage.info as any;
+                                if (prevInfo.providerID === messageInfo.providerID && prevInfo.modelID === messageInfo.modelID) {
+
+                                    if (prevInfo.mode && typeof prevInfo.mode === "string") {
+                                        const prevModeAgent = agents.find((a) => a.name === prevInfo.mode);
+                                        if (prevModeAgent) {
+                                            return prevInfo.mode;
+                                        }
+                                    }
+
+                                    const prevMatchingAgent = agents.find((agent) => agent.model?.providerID === prevInfo.providerID && agent.model?.modelID === prevInfo.modelID);
+                                    if (prevMatchingAgent) {
+                                        return prevMatchingAgent.name;
+                                    }
+                                }
+                            }
+                        }
+
+                        if (messageInfo.providerID && messageInfo.modelID) {
+                            const buildAgent = agents.find((a) => a.name === "build");
+                            if (buildAgent) {
+                                return "build";
+                            }
+                        }
+
+                        return null;
+                    };
+
+                    const sessionMessages = messages.get(sessionId) || [];
+
+                    const allMessages = sessionMessages.filter((m: any) => m.info.role === "assistant" || m.info.role === "user").sort((a: any, b: any) => a.info.time.created - b.info.time.created);
+                    const assistantMessages = sessionMessages.filter((m: any) => m.info.role === "assistant").sort((a: any, b: any) => a.info.time.created - b.info.time.created);
+
+                    for (let messageIndex = 0; messageIndex < allMessages.length; messageIndex++) {
+                        const message = allMessages[messageIndex];
+                        const { info } = message;
+                        const infoAny = info as any;
+
+                        if (infoAny.providerID && infoAny.modelID) {
+                            const agentName = extractAgentFromMessage(infoAny, assistantMessages.indexOf(message));
+
+                            if (agentName && agents.find((a) => a.name === agentName)) {
+                                const choice = {
+                                    providerId: infoAny.providerID,
+                                    modelId: infoAny.modelID,
+                                    timestamp: info.time.created,
+                                };
+
+                                const existing = agentLastChoices.get(agentName);
+                                if (!existing || choice.timestamp > existing.timestamp) {
+                                    agentLastChoices.set(agentName, choice);
+                                }
+                            }
+                        }
+                    }
+
+                    for (const [agentName, choice] of agentLastChoices) {
+                        saveAgentModelForSession(sessionId, agentName, choice.providerId, choice.modelId);
+                    }
+
+                    return agentLastChoices;
+                },
+
+                getContextUsage: (sessionId: string, contextLimit: number, outputLimit: number, messages: Map<string, { info: any; parts: any[] }[]>) => {
+                    if (!sessionId) return null;
+
+                    const limitsUsage = calculateContextUsage(0, contextLimit, outputLimit);
+                    const safeContext = limitsUsage.contextLimit;
+                    const normalizedOutput = limitsUsage.normalizedOutput ?? 0;
+                    const thresholdLimit = limitsUsage.thresholdLimit;
+
+                    if (safeContext === 0 || thresholdLimit === 0) {
+                        return null;
+                    }
+
+                    const sessionMessages = messages.get(sessionId) || [];
+                    const assistantMessages = sessionMessages.filter(m => m.info.role === 'assistant');
+
+                    if (assistantMessages.length === 0) return null;
+
+                    const lastAssistantMessage = assistantMessages[assistantMessages.length - 1];
+                    const lastMessageId = lastAssistantMessage.info.id;
+
+                    const scheduleUsageUpdate = (usage: ContextUsage) => {
+                        const runUpdate = () => {
+                            set((state) => {
+                                const existing = state.sessionContextUsage.get(sessionId) as ContextUsage | undefined;
+                        if (
+                            existing &&
+                            existing.totalTokens === usage.totalTokens &&
+                            existing.percentage === usage.percentage &&
+                            existing.contextLimit === usage.contextLimit &&
+                            (existing.outputLimit ?? 0) === (usage.outputLimit ?? 0) &&
+                            (existing.normalizedOutput ?? 0) === (usage.normalizedOutput ?? 0) &&
+                            existing.thresholdLimit === usage.thresholdLimit &&
+                            existing.lastMessageId === usage.lastMessageId
+                        ) {
+                            return state;
+                        }
+
+                                const newContextUsage = new Map(state.sessionContextUsage);
+                                newContextUsage.set(sessionId, usage);
+                                return { sessionContextUsage: newContextUsage };
+                            });
+                        };
+
+                        if (typeof queueMicrotask === 'function') {
+                            queueMicrotask(runUpdate);
+                        } else if (typeof window !== 'undefined') {
+                            window.setTimeout(runUpdate, 0);
+                        } else {
+                            setTimeout(runUpdate, 0);
+                        }
+                    };
+
+                    const cachedUsage = get().sessionContextUsage.get(sessionId) as ContextUsage | undefined;
+                    if (cachedUsage && cachedUsage.lastMessageId === lastMessageId) {
+                        const cachedOutput = cachedUsage.normalizedOutput ?? cachedUsage.outputLimit ?? 0;
+                        const limitsChanged =
+                            cachedUsage.contextLimit !== safeContext ||
+                            cachedOutput !== normalizedOutput ||
+                            cachedUsage.thresholdLimit !== thresholdLimit;
+
+                        if (limitsChanged && cachedUsage.totalTokens > 0) {
+                            const newPercentage = (cachedUsage.totalTokens / thresholdLimit) * 100;
+                            const recalculated: ContextUsage = {
+                                totalTokens: cachedUsage.totalTokens,
+                                percentage: Math.min(newPercentage, 100),
+                                contextLimit: safeContext,
+                                outputLimit: limitsUsage.outputLimit,
+                                normalizedOutput,
+                                thresholdLimit,
+                                lastMessageId,
+                            };
+                            scheduleUsageUpdate(recalculated);
+                            return recalculated;
+                        }
+
+                        if (!limitsChanged && cachedUsage.totalTokens > 0) {
+                            return cachedUsage;
+                        }
+                    }
+
+                    const totalTokens = extractTokensFromMessage(lastAssistantMessage);
+
+                    if (totalTokens === 0) {
+                        return cachedUsage || null;
+                    }
+
+                    const usage = calculateContextUsage(totalTokens, contextLimit, outputLimit);
+                    const result: ContextUsage = {
+                        totalTokens,
+                        percentage: usage.percentage,
+                        contextLimit: usage.contextLimit,
+                        outputLimit: usage.outputLimit,
+                        normalizedOutput: usage.normalizedOutput,
+                        thresholdLimit: usage.thresholdLimit,
+                        lastMessageId,
+                    };
+
+                    scheduleUsageUpdate(result);
+
+                    return result;
+                },
+
+                updateSessionContextUsage: (sessionId: string, contextLimit: number, outputLimit: number, messages: Map<string, { info: any; parts: any[] }[]>) => {
+                    const sessionMessages = messages.get(sessionId) || [];
+                    const assistantMessages = sessionMessages.filter(m => m.info.role === 'assistant');
+
+                    if (assistantMessages.length === 0) return;
+
+                    const lastAssistantMessage = assistantMessages[assistantMessages.length - 1];
+                    const totalTokens = extractTokensFromMessage(lastAssistantMessage);
+
+                    if (totalTokens === 0) return;
+
+                    const usage = calculateContextUsage(totalTokens, contextLimit, outputLimit);
+
+                    set((state) => {
+                        const newContextUsage = new Map(state.sessionContextUsage);
+                        newContextUsage.set(sessionId, {
+                            totalTokens,
+                            percentage: usage.percentage,
+                            contextLimit: usage.contextLimit,
+                            outputLimit: usage.outputLimit,
+                            normalizedOutput: usage.normalizedOutput,
+                            thresholdLimit: usage.thresholdLimit,
+                            lastMessageId: lastAssistantMessage.info.id,
+                        });
+                        return { sessionContextUsage: newContextUsage };
+                    });
+                },
+
+                initializeSessionContextUsage: (sessionId: string, contextLimit: number, outputLimit: number, messages: Map<string, { info: any; parts: any[] }[]>) => {
+                    const state = get();
+                    const existingUsage = state.sessionContextUsage.get(sessionId);
+
+                    if (!existingUsage || existingUsage.totalTokens === 0) {
+                        get().updateSessionContextUsage(sessionId, contextLimit, outputLimit, messages);
+                    }
+                },
+
+                pollForTokenUpdates: (sessionId: string, messageId: string, messages: Map<string, { info: any; parts: any[] }[]>, maxAttempts: number = 10) => {
+                    let attempts = 0;
+
+                    const poll = () => {
+                        attempts++;
+                        const sessionMessages = messages.get(sessionId) || [];
+                        const message = sessionMessages.find(m => m.info.id === messageId);
+
+                        if (message && message.info.role === 'assistant') {
+                            const totalTokens = extractTokensFromMessage(message);
+
+                            if (totalTokens > 0) {
+
+                                get().updateSessionContextUsage(sessionId, 0, 0, messages);
+                                return;
+                            }
+                        }
+
+                        if (attempts < maxAttempts) {
+                            setTimeout(poll, 1000);
+                        }
+                    };
+
+                    setTimeout(poll, 2000);
+                },
+
+                getCurrentAgent: (sessionId: string) => {
+                    const { currentAgentContext } = get();
+                    return currentAgentContext.get(sessionId);
+                },
+
+                getSessionAgentEditMode: (sessionId: string, agentName: string | undefined, defaultMode: EditPermissionMode = getAgentDefaultEditPermission(agentName)) => {
+                    if (!sessionId || !agentName) {
+                        return defaultMode;
+                    }
+
+                    const sessionMap = get().sessionAgentEditModes.get(sessionId);
+                    const override = sessionMap?.get(agentName);
+                    return override ?? defaultMode;
+                },
+
+                setSessionAgentEditMode: (sessionId: string, agentName: string | undefined, mode: EditPermissionMode, defaultMode: EditPermissionMode = getAgentDefaultEditPermission(agentName)) => {
+                    if (!sessionId || !agentName) {
+                        return;
+                    }
+
+                    const normalizedDefault: EditPermissionMode = defaultMode ?? 'ask';
+                    if (normalizedDefault === 'deny' || mode === 'deny') {
+                        return;
+                    }
+
+                    if (!EDIT_PERMISSION_SEQUENCE.includes(mode)) {
+                        return;
+                    }
+
+                    set((state) => {
+                        const nextMap = new Map(state.sessionAgentEditModes);
+                        const agentMap = new Map(nextMap.get(sessionId) ?? new Map());
+
+                        if (mode === normalizedDefault) {
+                            agentMap.delete(agentName);
+                            if (agentMap.size === 0) {
+                                nextMap.delete(sessionId);
+                            } else {
+                                nextMap.set(sessionId, agentMap);
+                            }
+                        } else {
+                            agentMap.set(agentName, mode);
+                            nextMap.set(sessionId, agentMap);
+                        }
+
+                        return { sessionAgentEditModes: nextMap };
+                    });
+                },
+
+                toggleSessionAgentEditMode: (sessionId: string, agentName: string | undefined, defaultMode: EditPermissionMode = getAgentDefaultEditPermission(agentName)) => {
+                    if (!sessionId || !agentName) {
+                        return;
+                    }
+
+                    const normalizedDefault: EditPermissionMode = defaultMode ?? 'ask';
+                    if (normalizedDefault === 'deny') {
+                        return;
+                    }
+
+                    const currentMode = get().getSessionAgentEditMode(sessionId, agentName, normalizedDefault);
+                    const currentIndex = EDIT_PERMISSION_SEQUENCE.indexOf(currentMode);
+                    const fallbackIndex = EDIT_PERMISSION_SEQUENCE.indexOf(normalizedDefault);
+                    const baseIndex = currentIndex >= 0 ? currentIndex : (fallbackIndex >= 0 ? fallbackIndex : 0);
+                    const nextIndex = (baseIndex + 1) % EDIT_PERMISSION_SEQUENCE.length;
+                    const nextMode = EDIT_PERMISSION_SEQUENCE[nextIndex];
+
+                    get().setSessionAgentEditMode(sessionId, agentName, nextMode, normalizedDefault);
+                },
+            }),
+            {
+                name: "context-store",
+                storage: createJSONStorage(() => getSafeStorage()),
+                partialize: (state) => ({
+                    sessionModelSelections: Array.from(state.sessionModelSelections.entries()),
+                    sessionAgentSelections: Array.from(state.sessionAgentSelections.entries()),
+                    sessionAgentModelSelections: Array.from(state.sessionAgentModelSelections.entries()).map(([sessionId, agentMap]) => [sessionId, Array.from(agentMap.entries())]),
+                    currentAgentContext: Array.from(state.currentAgentContext.entries()),
+                    sessionContextUsage: Array.from(state.sessionContextUsage.entries()),
+                    sessionAgentEditModes: Array.from(state.sessionAgentEditModes.entries()).map(([sessionId, agentMap]) => [sessionId, Array.from(agentMap.entries())]),
+                }),
+                merge: (persistedState: any, currentState) => {
+
+                    const agentModelSelections = new Map();
+                    if (persistedState?.sessionAgentModelSelections) {
+                        persistedState.sessionAgentModelSelections.forEach(([sessionId, agentArray]: [string, any[]]) => {
+                            agentModelSelections.set(sessionId, new Map(agentArray));
+                        });
+                    }
+
+                    const agentEditModes = new Map();
+                    if (persistedState?.sessionAgentEditModes) {
+                        persistedState.sessionAgentEditModes.forEach(([sessionId, agentArray]: [string, any[]]) => {
+                            agentEditModes.set(sessionId, new Map(agentArray));
+                        });
+                    }
+
+                    return {
+                        ...currentState,
+                        ...(persistedState as object),
+                        sessionModelSelections: new Map(persistedState?.sessionModelSelections || []),
+                        sessionAgentSelections: new Map(persistedState?.sessionAgentSelections || []),
+                        sessionAgentModelSelections: agentModelSelections,
+                        currentAgentContext: new Map(persistedState?.currentAgentContext || []),
+                        sessionContextUsage: new Map(persistedState?.sessionContextUsage || []),
+                        sessionAgentEditModes: agentEditModes,
+                        hasHydrated: true,
+                    };
+                },
+            }
+        ),
+        {
+            name: "context-store",
+        }
+    )
+);
diff --git a/packages/ui/src/stores/fileStore.ts b/packages/ui/src/stores/fileStore.ts
new file mode 100644
index 00000000..e96b3fa1
--- /dev/null
+++ b/packages/ui/src/stores/fileStore.ts
@@ -0,0 +1,235 @@
+import { create } from "zustand";
+import { devtools, persist, createJSONStorage } from "zustand/middleware";
+import { opencodeClient } from "@/lib/opencode/client";
+import type { AttachedFile } from "./types/sessionTypes";
+import { getSafeStorage } from "./utils/safeStorage";
+
+interface FileState {
+    attachedFiles: AttachedFile[];
+}
+
+interface FileActions {
+    addAttachedFile: (file: File) => Promise<void>;
+    addServerFile: (path: string, name: string, content?: string) => Promise<void>;
+    removeAttachedFile: (id: string) => void;
+    clearAttachedFiles: () => void;
+}
+
+type FileStore = FileState & FileActions;
+
+const MAX_ATTACHMENT_SIZE = 10 * 1024 * 1024;
+
+const guessMimeType = (file: File): string => {
+    if (file.type && file.type.trim().length > 0) {
+        return file.type;
+    }
+
+    const name = (file.name || "").toLowerCase();
+    const ext = name.includes(".") ? name.split(".").pop() || "" : "";
+    const noExtNames = new Set([
+        "license",
+        "readme",
+        "changelog",
+        "notice",
+        "authors",
+        "copying",
+    ]);
+
+    if (noExtNames.has(name)) return "text/plain";
+
+    switch (ext) {
+        case "md":
+        case "markdown":
+            return "text/markdown";
+        case "txt":
+            return "text/plain";
+        case "json":
+            return "application/json";
+        case "yaml":
+        case "yml":
+            return "application/x-yaml";
+        case "ts":
+        case "tsx":
+        case "js":
+        case "jsx":
+        case "mjs":
+        case "cjs":
+        case "py":
+        case "rb":
+        case "sh":
+        case "bash":
+        case "zsh":
+            return "text/plain";
+        default:
+            return "application/octet-stream";
+    }
+};
+
+export const useFileStore = create<FileStore>()(
+
+    devtools(
+        persist(
+            (set, get) => ({
+
+                attachedFiles: [],
+
+                addAttachedFile: async (file: File) => {
+
+                        const { attachedFiles } = get();
+                        const isDuplicate = attachedFiles.some((f) => f.filename === file.name && f.size === file.size);
+                        if (isDuplicate) {
+                            console.log(`File "${file.name}" is already attached`);
+                            return;
+                        }
+
+                        const maxSize = MAX_ATTACHMENT_SIZE;
+                        if (file.size > maxSize) {
+                            throw new Error(`File "${file.name}" is too large. Maximum size is 10MB.`);
+                        }
+
+                        const allowedTypes = [
+                            "text/",
+                            "application/json",
+                            "application/xml",
+                            "application/pdf",
+                            "image/",
+                            "video/",
+                            "audio/",
+                            "application/javascript",
+                            "application/typescript",
+                            "application/x-python",
+                            "application/x-ruby",
+                            "application/x-sh",
+                            "application/yaml",
+                            "application/octet-stream",
+                        ];
+
+                        const mimeType = guessMimeType(file);
+                        const isAllowed = allowedTypes.some((type) => mimeType.startsWith(type) || mimeType === type || mimeType === "");
+
+                        if (!isAllowed && mimeType !== "") {
+                            console.warn(`File type "${mimeType}" might not be supported`);
+                        }
+
+                        const reader = new FileReader();
+                        const rawDataUrl = await new Promise<string>((resolve, reject) => {
+                            reader.onload = () => resolve(reader.result as string);
+                            reader.onerror = reject;
+                            reader.readAsDataURL(file);
+                        });
+
+                        const dataUrl = rawDataUrl.startsWith("data:")
+                            ? rawDataUrl.replace(/^data:[^;]*/, `data:${mimeType}`)
+                            : rawDataUrl;
+
+                        const extractFilename = (fullPath: string) => {
+
+                            const parts = fullPath.replace(/\\/g, "/").split("/");
+                            return parts[parts.length - 1] || fullPath;
+                        };
+
+                        const attachedFile: AttachedFile = {
+                            id: `file-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
+                            file,
+                            dataUrl,
+                            mimeType,
+                            filename: extractFilename(file.name),
+                            size: file.size,
+                            source: "local",
+                        };
+
+                        set((state) => ({
+                            attachedFiles: [...state.attachedFiles, attachedFile],
+                        }));
+                },
+
+                addServerFile: async (path: string, name: string, content?: string) => {
+
+                        const { attachedFiles } = get();
+                        const isDuplicate = attachedFiles.some((f) => f.serverPath === path && f.source === "server");
+                        if (isDuplicate) {
+                            console.log(`Server file "${name}" is already attached`);
+                            return;
+                        }
+
+                        let fileContent = content;
+                        if (!fileContent) {
+                            try {
+
+                                const tempClient = opencodeClient.getApiClient();
+
+                                const lastSlashIndex = path.lastIndexOf("/");
+                                const directory = lastSlashIndex > 0 ? path.substring(0, lastSlashIndex) : "/";
+                                const filename = lastSlashIndex > 0 ? path.substring(lastSlashIndex + 1) : path;
+
+                                const response = await tempClient.file.read({
+                                    query: {
+                                        path: filename,
+                                        directory: directory,
+                                    },
+                                });
+
+                                if (response.data && "content" in response.data) {
+                                    fileContent = response.data.content;
+                                } else {
+                                    fileContent = "";
+                                }
+                            } catch (error) {
+                                console.error("Failed to read server file:", error);
+
+                                fileContent = `[File: ${name}]`;
+                            }
+                        }
+
+                        const blob = new Blob([fileContent || ""], { type: "text/plain" });
+
+                        if (blob.size > MAX_ATTACHMENT_SIZE) {
+                            throw new Error(`File "${name}" is too large. Maximum size is 10MB.`);
+                        }
+
+                        const file = new File([blob], name, { type: "text/plain" });
+
+                        const encoder = new TextEncoder();
+                        const data = encoder.encode(fileContent || "");
+                        const base64 = btoa(String.fromCharCode(...data));
+                        const dataUrl = `data:text/plain;base64,${base64}`;
+
+                        const attachedFile: AttachedFile = {
+                            id: `server-file-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
+                            file,
+                            dataUrl,
+                            mimeType: "text/plain",
+                            filename: name,
+                            size: blob.size,
+                            source: "server",
+                            serverPath: path,
+                        };
+
+                        set((state) => ({
+                            attachedFiles: [...state.attachedFiles, attachedFile],
+                        }));
+                },
+
+                removeAttachedFile: (id: string) => {
+                    set((state) => ({
+                        attachedFiles: state.attachedFiles.filter((f) => f.id !== id),
+                    }));
+                },
+
+                clearAttachedFiles: () => {
+                    set({ attachedFiles: [] });
+                },
+            }),
+            {
+                name: "file-store",
+                storage: createJSONStorage(() => getSafeStorage()),
+                partialize: (state) => ({
+                    attachedFiles: state.attachedFiles,
+                }),
+            }
+        ),
+        {
+            name: "file-store",
+        }
+    )
+);
diff --git a/packages/ui/src/stores/messageStore.ts b/packages/ui/src/stores/messageStore.ts
new file mode 100644
index 00000000..c0c9a16c
--- /dev/null
+++ b/packages/ui/src/stores/messageStore.ts
@@ -0,0 +1,2260 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { create } from "zustand";
+import { devtools, persist, createJSONStorage } from "zustand/middleware";
+import type { Message, Part } from "@opencode-ai/sdk";
+import { opencodeClient } from "@/lib/opencode/client";
+import type { SessionMemoryState, MessageStreamLifecycle, AttachedFile } from "./types/sessionTypes";
+import { MEMORY_LIMITS } from "./types/sessionTypes";
+import {
+    touchStreamingLifecycle,
+    removeLifecycleEntries,
+    clearLifecycleTimersForIds,
+    clearLifecycleCompletionTimer
+} from "./utils/streamingUtils";
+import { extractTextFromPart, normalizeStreamingPart } from "./utils/messageUtils";
+import { getSafeStorage } from "./utils/safeStorage";
+import { useFileStore } from "./fileStore";
+import { useSessionStore } from "./sessionStore";
+
+interface QueuedPart {
+    sessionId: string;
+    messageId: string;
+    part: Part;
+    role?: string;
+    currentSessionId?: string;
+}
+
+let batchQueue: QueuedPart[] = [];
+let flushTimer: ReturnType<typeof setTimeout> | null = null;
+
+const USER_BATCH_WINDOW_MS = 50;
+const COMPACTION_WINDOW_MS = 30_000;
+
+const timeoutRegistry = new Map<string, ReturnType<typeof setTimeout>>();
+const lastContentRegistry = new Map<string, string>();
+const streamingCooldownTimers = new Map<string, ReturnType<typeof setTimeout>>();
+
+const MIN_SORTABLE_LENGTH = 10;
+
+const extractSortableId = (id: unknown): string | null => {
+    if (typeof id !== "string") {
+        return null;
+    }
+    const trimmed = id.trim();
+    if (!trimmed) {
+        return null;
+    }
+    const underscoreIndex = trimmed.indexOf("_");
+    const candidate = underscoreIndex >= 0 ? trimmed.slice(underscoreIndex + 1) : trimmed;
+    if (!candidate || candidate.length < MIN_SORTABLE_LENGTH) {
+        return null;
+    }
+    return candidate;
+};
+
+const isIdNewer = (id: string, referenceId: string): boolean => {
+    const currentSortable = extractSortableId(id);
+    const referenceSortable = extractSortableId(referenceId);
+    if (!currentSortable || !referenceSortable) {
+        return true;
+    }
+    if (currentSortable.length !== referenceSortable.length) {
+        return true;
+    }
+    return currentSortable > referenceSortable;
+};
+
+const streamDebugEnabled = (): boolean => {
+    if (typeof window === "undefined") return false;
+    try {
+        return window.localStorage.getItem("openchamber_stream_debug") === "1";
+    } catch {
+        return false;
+    }
+};
+
+const computePartsTextLength = (parts: Part[] | undefined): number => {
+    if (!Array.isArray(parts) || parts.length === 0) {
+        return 0;
+    }
+    return parts.reduce((sum, part) => {
+        if (!part || part.type !== "text") {
+            return sum;
+        }
+        const content = (part as Record<string, unknown>).text ?? (part as Record<string, unknown>).content;
+        if (typeof content === "string") {
+            return sum + content.length;
+        }
+        return sum;
+    }, 0);
+};
+
+const hasStopReasonStop = (parts: Part[] | undefined): boolean => {
+    if (!Array.isArray(parts)) {
+        return false;
+    }
+    return parts.some(
+        (part) => part?.type === "step-finish" && (part as Record<string, unknown>)?.reason === "stop"
+    );
+};
+
+const getPartKey = (part: Part | undefined): string | undefined => {
+    if (!part) {
+        return undefined;
+    }
+    if (typeof part.id === "string" && part.id.length > 0) {
+        return part.id;
+    }
+    if (part.type) {
+        const reason = (part as Record<string, unknown>).reason;
+        const callId = (part as Record<string, unknown>).callID;
+        return `${part.type}-${reason ?? ""}-${callId ?? ""}`;
+    }
+    return undefined;
+};
+
+const ignoredAssistantMessageIds = new Set<string>();
+
+const mergePreferExistingParts = (existing: Part[] = [], incoming: Part[] = []): Part[] => {
+    if (!incoming.length) {
+        return [...existing];
+    }
+    const merged = [...existing];
+    const existingKeys = new Set(existing.map(getPartKey).filter((key): key is string => Boolean(key)));
+
+    incoming.forEach((part) => {
+        if (!part) {
+            return;
+        }
+        const key = getPartKey(part);
+        if (key && existingKeys.has(key)) {
+            return;
+        }
+        merged.push(part);
+        if (key) {
+            existingKeys.add(key);
+        }
+    });
+
+    return merged;
+};
+
+const computeMaxTrimmedHeadId = (removed: Array<{ info: any }>, previous?: string): string | undefined => {
+    let maxId = previous;
+    let maxSortable = previous ? extractSortableId(previous) : null;
+
+    for (const entry of removed) {
+        const candidateId = entry?.info?.id;
+        const candidateSortable = extractSortableId(candidateId);
+        if (!candidateId || !candidateSortable) {
+            continue;
+        }
+        if (!maxSortable || candidateSortable > maxSortable) {
+            maxSortable = candidateSortable;
+            maxId = candidateId;
+        }
+    }
+
+    return maxId;
+};
+
+const setStreamingIdForSession = (source: Map<string, string | null>, sessionId: string, messageId: string | null) => {
+    const existing = source.get(sessionId);
+    if (existing === messageId) {
+        return source;
+    }
+    const next = new Map(source);
+    if (messageId) {
+        next.set(sessionId, messageId);
+    } else {
+        next.delete(sessionId);
+    }
+    return next;
+};
+
+const upsertMessageSessionIndex = (source: Map<string, string>, messageId: string, sessionId: string) => {
+    const existing = source.get(messageId);
+    if (existing === sessionId) {
+        return source;
+    }
+    const next = new Map(source);
+    next.set(messageId, sessionId);
+    return next;
+};
+
+const removeMessageSessionIndexEntries = (source: Map<string, string>, ids: Iterable<string>) => {
+    const next = new Map(source);
+    let mutated = false;
+    for (const id of ids) {
+        if (next.delete(id)) {
+            mutated = true;
+        }
+    }
+    return mutated ? next : source;
+};
+
+const collectActiveMessageIdsForSession = (state: MessageState, sessionId: string): Set<string> => {
+    const ids = new Set<string>();
+    const latest = state.streamingMessageIds.get(sessionId);
+    if (latest) {
+        ids.add(latest);
+    }
+    state.messageStreamStates.forEach((_lifecycle, messageId) => {
+        if (state.messageSessionIndex.get(messageId) === sessionId) {
+            ids.add(messageId);
+        }
+    });
+    return ids;
+};
+
+const isMessageStreamingInSession = (state: MessageState, sessionId: string, messageId: string) => {
+    if (state.streamingMessageIds.get(sessionId) === messageId) {
+        return true;
+    }
+    return state.messageSessionIndex.get(messageId) === sessionId && state.messageStreamStates.has(messageId);
+};
+
+const resolveSessionDirectory = async (sessionId: string | null | undefined): Promise<string | undefined> => {
+    if (!sessionId) {
+        return undefined;
+    }
+
+    try {
+        const sessionStore = useSessionStore.getState();
+        const metadata = sessionStore.getWorktreeMetadata(sessionId);
+        if (metadata?.path) {
+            return metadata.path;
+        }
+
+        const session = sessionStore.sessions.find((entry) => entry.id === sessionId) as { directory?: string } | undefined;
+        const sessionDirectory =
+            typeof session?.directory === 'string' && session.directory.length > 0 ? session.directory : undefined;
+
+        return sessionDirectory;
+    } catch (error) {
+        console.warn('Failed to resolve session directory override:', error);
+        return undefined;
+    }
+};
+
+const executeWithSessionDirectory = async <T>(sessionId: string | null | undefined, operation: () => Promise<T>): Promise<T> => {
+    const directoryOverride = await resolveSessionDirectory(sessionId);
+    if (directoryOverride) {
+        return opencodeClient.withDirectory(directoryOverride, operation);
+    }
+    return operation();
+};
+
+interface SessionAbortRecord {
+    timestamp: number;
+    acknowledged: boolean;
+}
+
+interface MessageState {
+    messages: Map<string, { info: any; parts: Part[] }[]>;
+    sessionMemoryState: Map<string, SessionMemoryState>;
+    messageStreamStates: Map<string, MessageStreamLifecycle>;
+    messageSessionIndex: Map<string, string>;
+    streamingMessageIds: Map<string, string | null>;
+    abortControllers: Map<string, AbortController>;
+    lastUsedProvider: { providerID: string; modelID: string } | null;
+    isSyncing: boolean;
+    pendingAssistantParts: Map<string, { sessionId: string; parts: Part[] }>;
+    sessionCompactionUntil: Map<string, number>;
+    sessionAbortFlags: Map<string, SessionAbortRecord>;
+}
+
+interface MessageActions {
+    loadMessages: (sessionId: string) => Promise<void>;
+    sendMessage: (content: string, providerID: string, modelID: string, agent?: string, currentSessionId?: string, attachments?: AttachedFile[], agentMentionName?: string | null) => Promise<void>;
+    abortCurrentOperation: (currentSessionId?: string) => Promise<void>;
+    _addStreamingPartImmediate: (sessionId: string, messageId: string, part: Part, role?: string, currentSessionId?: string) => void;
+    addStreamingPart: (sessionId: string, messageId: string, part: Part, role?: string, currentSessionId?: string) => void;
+    forceCompleteMessage: (sessionId: string | null | undefined, messageId: string, source?: "timeout" | "cooldown") => void;
+    completeStreamingMessage: (sessionId: string, messageId: string) => void;
+    markMessageStreamSettled: (messageId: string) => void;
+    updateMessageInfo: (sessionId: string, messageId: string, messageInfo: any) => void;
+    syncMessages: (sessionId: string, messages: { info: Message; parts: Part[] }[]) => void;
+    updateViewportAnchor: (sessionId: string, anchor: number) => void;
+    trimToViewportWindow: (sessionId: string, targetSize?: number, currentSessionId?: string) => void;
+    evictLeastRecentlyUsed: (currentSessionId?: string) => void;
+    loadMoreMessages: (sessionId: string, direction: "up" | "down") => Promise<void>;
+    getLastMessageModel: (sessionId: string) => { providerID?: string; modelID?: string } | null;
+    updateSessionCompaction: (sessionId: string, compactingTimestamp: number | null | undefined) => void;
+    acknowledgeSessionAbort: (sessionId: string) => void;
+}
+
+type MessageStore = MessageState & MessageActions;
+
+export const useMessageStore = create<MessageStore>()(
+    devtools(
+        persist(
+            (set, get) => ({
+
+                messages: new Map(),
+                sessionMemoryState: new Map(),
+                messageStreamStates: new Map(),
+                messageSessionIndex: new Map(),
+                streamingMessageIds: new Map(),
+                abortControllers: new Map(),
+                lastUsedProvider: null,
+                isSyncing: false,
+                pendingAssistantParts: new Map(),
+                sessionCompactionUntil: new Map(),
+                sessionAbortFlags: new Map(),
+
+                loadMessages: async (sessionId: string, limit: number = MEMORY_LIMITS.VIEWPORT_MESSAGES) => {
+                        const allMessages = await executeWithSessionDirectory(sessionId, () => opencodeClient.getSessionMessages(sessionId));
+                        const watermark = get().sessionMemoryState.get(sessionId)?.trimmedHeadMaxId;
+
+                        const afterWatermark = watermark
+                            ? allMessages.filter((message) => {
+                                  const messageId = message?.info?.id;
+                                  if (!messageId) return true;
+                                  return isIdNewer(messageId, watermark);
+                              })
+                            : allMessages;
+                        const messagesToKeep = afterWatermark.slice(-limit);
+
+                        set((state) => {
+                            const newMessages = new Map(state.messages);
+                            const previousMessages = state.messages.get(sessionId) || [];
+                            const previousMessagesById = new Map(
+                                previousMessages
+                                    .filter((msg) => typeof msg.info?.id === "string")
+                                    .map((msg) => [msg.info.id as string, msg])
+                            );
+
+                            const normalizedMessages = messagesToKeep.map((message) => {
+                                const infoWithMarker = {
+                                    ...message.info,
+                                    clientRole: (message.info as any)?.clientRole ?? message.info.role,
+                                    userMessageMarker: message.info.role === "user" ? true : (message.info as any)?.userMessageMarker,
+                                } as any;
+
+                                const serverParts = Array.isArray(message.parts) ? [...message.parts] : [];
+                                const existingEntry = infoWithMarker?.id
+                                    ? previousMessagesById.get(infoWithMarker.id as string)
+                                    : undefined;
+
+                                if (
+                                    existingEntry &&
+                                    existingEntry.info.role === "assistant"
+                                ) {
+                                    const existingParts = Array.isArray(existingEntry.parts) ? existingEntry.parts : [];
+                                    const existingLen = computePartsTextLength(existingParts);
+                                    const serverLen = computePartsTextLength(serverParts);
+                                    const storeHasStop = hasStopReasonStop(existingParts);
+
+                                    if (storeHasStop && existingLen > serverLen) {
+                                        const mergedParts = mergePreferExistingParts(existingParts, serverParts);
+                                        return {
+                                            ...message,
+                                            info: infoWithMarker,
+                                            parts: mergedParts,
+                                        };
+                                    }
+                                }
+
+                                return {
+                                    ...message,
+                                    info: infoWithMarker,
+                                    parts: serverParts,
+                                };
+                            });
+
+                            const mergedMessages = normalizedMessages;
+
+                            const previousIds = new Set(previousMessages.map((msg) => msg.info.id));
+                            const nextIds = new Set(mergedMessages.map((msg) => msg.info.id));
+                            const removedIds: string[] = [];
+                            previousIds.forEach((id) => {
+                                if (!nextIds.has(id)) {
+                                    removedIds.push(id);
+                                }
+                            });
+
+                            newMessages.set(sessionId, mergedMessages);
+
+                            const newMemoryState = new Map(state.sessionMemoryState);
+                            const previousMemoryState = state.sessionMemoryState.get(sessionId);
+                            newMemoryState.set(sessionId, {
+                                viewportAnchor: mergedMessages.length - 1,
+                                isStreaming: false,
+                                lastAccessedAt: Date.now(),
+                                backgroundMessageCount: 0,
+                                totalAvailableMessages: allMessages.length,
+                                hasMoreAbove: allMessages.length > messagesToKeep.length,
+                                trimmedHeadMaxId: previousMemoryState?.trimmedHeadMaxId,
+                                streamingCooldownUntil: undefined,
+                            });
+
+                            const result: Record<string, any> = {
+                                messages: newMessages,
+                                sessionMemoryState: newMemoryState,
+                            };
+
+                        clearLifecycleTimersForIds(removedIds);
+                        const updatedLifecycle = removeLifecycleEntries(state.messageStreamStates, removedIds);
+                        if (updatedLifecycle !== state.messageStreamStates) {
+                            result.messageStreamStates = updatedLifecycle;
+                        }
+
+                        if (removedIds.length > 0) {
+                            const currentStreaming = state.streamingMessageIds.get(sessionId);
+                            if (currentStreaming && removedIds.includes(currentStreaming)) {
+                                result.streamingMessageIds = setStreamingIdForSession(
+                                    result.streamingMessageIds ?? state.streamingMessageIds,
+                                    sessionId,
+                                    null
+                                );
+                            }
+                        }
+
+                        if (removedIds.length > 0) {
+                            const nextIndex = removeMessageSessionIndexEntries(
+                                result.messageSessionIndex ?? state.messageSessionIndex,
+                                removedIds
+                            );
+                            if (nextIndex !== (result.messageSessionIndex ?? state.messageSessionIndex)) {
+                                result.messageSessionIndex = nextIndex;
+                            }
+                        }
+
+                        if (removedIds.length > 0) {
+                            const nextPendingParts = new Map(state.pendingAssistantParts);
+                            let pendingChanged = false;
+                            removedIds.forEach((id) => {
+                                if (nextPendingParts.delete(id)) {
+                                    pendingChanged = true;
+                                }
+                            });
+                            if (pendingChanged) {
+                                result.pendingAssistantParts = nextPendingParts;
+                            }
+                        }
+
+                        const targetIndex = result.messageSessionIndex ?? state.messageSessionIndex;
+                        let indexAccumulator = targetIndex;
+                        mergedMessages.forEach((message) => {
+                            const id = (message?.info as { id?: unknown })?.id;
+                            if (typeof id === "string" && id.length > 0) {
+                                indexAccumulator = upsertMessageSessionIndex(indexAccumulator, id, sessionId);
+                            }
+                        });
+                        if (indexAccumulator !== targetIndex) {
+                            result.messageSessionIndex = indexAccumulator;
+                        }
+
+                        return result;
+
+                        });
+                },
+
+                sendMessage: async (content: string, providerID: string, modelID: string, agent?: string, currentSessionId?: string, attachments?: AttachedFile[], agentMentionName?: string | null) => {
+                    if (!currentSessionId) {
+                        throw new Error("No session selected");
+                    }
+
+                    const sessionId = currentSessionId;
+
+                    if (get().sessionAbortFlags.has(sessionId)) {
+                        set((state) => {
+                            const nextAbortFlags = new Map(state.sessionAbortFlags);
+                            nextAbortFlags.delete(sessionId);
+                            return { sessionAbortFlags: nextAbortFlags };
+                        });
+                    }
+
+                    await executeWithSessionDirectory(sessionId, async () => {
+                        try {
+                            let effectiveContent = content;
+                            const isCommand = content.startsWith("/");
+
+                            if (isCommand) {
+                                const spaceIndex = content.indexOf(" ");
+                                const command = spaceIndex === -1 ? content.substring(1) : content.substring(1, spaceIndex);
+                                const commandArgs = spaceIndex === -1 ? "" : content.substring(spaceIndex + 1).trim();
+
+                                const apiClient = opencodeClient.getApiClient();
+                                const directory = opencodeClient.getDirectory();
+
+                                if (command === "init") {
+                                    const messageId = `msg_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+
+                                    await apiClient.session.init({
+                                        path: { id: sessionId },
+                                        body: {
+                                            messageID: messageId,
+                                            providerID,
+                                            modelID,
+                                        },
+                                        query: directory ? { directory } : undefined,
+                                    });
+
+                                    return;
+                                }
+
+                                if (command === "summarize") {
+                                    await apiClient.session.summarize({
+                                        path: { id: sessionId },
+                                        body: {
+                                            providerID,
+                                            modelID,
+                                        },
+                                        query: directory ? { directory } : undefined,
+                                    });
+
+                                    return;
+                                }
+
+                                try {
+                                    const commandDetails = await opencodeClient.getCommandDetails(command);
+                                    if (commandDetails?.template) {
+                                        effectiveContent = commandDetails.template.replace(/\$ARGUMENTS/g, commandArgs);
+                                    } else {
+                                        effectiveContent = content;
+                                    }
+                                } catch (error) {
+                                    console.error("Command template resolution failed:", error);
+                                    effectiveContent = content;
+                                }
+                            }
+
+                            set({
+                                lastUsedProvider: { providerID, modelID },
+                            });
+
+                            set((state) => {
+                                const memoryState = state.sessionMemoryState.get(sessionId) || {
+                                    viewportAnchor: 0,
+                                    isStreaming: false,
+                                    lastAccessedAt: Date.now(),
+                                    backgroundMessageCount: 0,
+                                };
+
+                                const existingTimer = streamingCooldownTimers.get(sessionId);
+                                if (existingTimer) {
+                                    clearTimeout(existingTimer);
+                                    streamingCooldownTimers.delete(sessionId);
+                                }
+
+                                const newMemoryState = new Map(state.sessionMemoryState);
+                                newMemoryState.set(sessionId, {
+                                    ...memoryState,
+                                    isStreaming: true,
+                                    streamStartTime: Date.now(),
+                                    streamingCooldownUntil: undefined,
+                                });
+                                return { sessionMemoryState: newMemoryState };
+                            });
+
+                            try {
+                                const controller = new AbortController();
+                                set((state) => {
+                                    const nextControllers = new Map(state.abortControllers);
+                                    nextControllers.set(sessionId, controller);
+                                    return { abortControllers: nextControllers };
+                                });
+
+                                const filePayloads = (attachments ?? []).map((file) => ({
+                                    type: "file" as const,
+                                    mime: file.mimeType,
+                                    filename: file.filename,
+                                    url: file.dataUrl,
+                                }));
+
+                                await opencodeClient.sendMessage({
+                                    id: sessionId,
+                                    providerID,
+                                    modelID,
+                                    text: effectiveContent,
+                                    agent,
+                                    files: filePayloads.length > 0 ? filePayloads : undefined,
+                                    agentMentions: agentMentionName ? [{ name: agentMentionName }] : undefined,
+                                });
+
+                                if (filePayloads.length > 0) {
+                                    try {
+                                        useFileStore.getState().clearAttachedFiles();
+                                    } catch (clearError) {
+                                        console.error("Failed to clear attached files after send", clearError);
+                                    }
+                                }
+                                set((state) => {
+                                    const nextControllers = new Map(state.abortControllers);
+                                    nextControllers.delete(sessionId);
+                                    return { abortControllers: nextControllers };
+                                });
+                            } catch (error: any) {
+                                let errorMessage = "Network error while sending message. The message may still be processing.";
+
+                                if (error.name === "AbortError") {
+                                    errorMessage = "Request timed out. The message may still be processing.";
+                                } else if (error.message?.includes("504") || error.message?.includes("Gateway")) {
+                                    errorMessage = "Gateway timeout - your message is being processed. Please wait for response.";
+                                    set((state) => {
+                                        const nextControllers = new Map(state.abortControllers);
+                                        nextControllers.delete(sessionId);
+                                        return { abortControllers: nextControllers };
+                                    });
+                                    return;
+                                } else if (error.message) {
+                                    errorMessage = error.message;
+                                }
+
+                                set((state) => {
+                                    const nextControllers = new Map(state.abortControllers);
+                                    nextControllers.delete(sessionId);
+                                    return { abortControllers: nextControllers };
+                                });
+
+                                throw new Error(errorMessage);
+                            }
+                        } catch (error: any) {
+                            let errorMessage = "Network error while sending message. The message may still be processing.";
+
+                            if (error.name === "AbortError") {
+                                errorMessage = "Request timed out. The message may still be processing.";
+                            } else if (error.response?.status === 401) {
+                                errorMessage = "Session not found or unauthorized. Please refresh the page.";
+                            } else if (error.response?.status === 502) {
+                                errorMessage = "OpenCode is restarting. Please wait a moment and try again.";
+                            } else if (error.message?.includes("504") || error.message?.includes("Gateway")) {
+                                errorMessage = "Gateway timeout - your message is being processed. Please wait for response.";
+                            } else if (error.message) {
+                                errorMessage = error.message;
+                            }
+
+                            set((state) => {
+                                const nextControllers = new Map(state.abortControllers);
+                                nextControllers.delete(sessionId);
+                                return { abortControllers: nextControllers };
+                            });
+
+                            throw new Error(errorMessage);
+                        }
+                    });
+                },
+
+                abortCurrentOperation: async (currentSessionId?: string) => {
+                    if (!currentSessionId) {
+                        return;
+                    }
+
+                    const stateSnapshot = get();
+                    const { abortControllers, messages: storeMessages } = stateSnapshot;
+
+                    const controller = abortControllers.get(currentSessionId);
+                    controller?.abort();
+
+                    const activeIds = collectActiveMessageIdsForSession(stateSnapshot, currentSessionId);
+
+                    if (activeIds.size === 0) {
+                        const sessionMessages = currentSessionId ? storeMessages.get(currentSessionId) ?? [] : [];
+                        let fallbackAssistantId: string | null = null;
+                        for (let index = sessionMessages.length - 1; index >= 0; index -= 1) {
+                            const message = sessionMessages[index];
+                            if (!message || message.info.role !== 'assistant') {
+                                continue;
+                            }
+
+                            if (!fallbackAssistantId) {
+                                fallbackAssistantId = message.info.id;
+                            }
+
+                            const hasWorkingPart = (message.parts ?? []).some((part) => {
+                                return part.type === 'reasoning' || part.type === 'tool' || part.type === 'step-start';
+                            });
+                            if (hasWorkingPart) {
+                                activeIds.add(message.info.id);
+                                break;
+                            }
+                        }
+
+                        if (activeIds.size === 0 && fallbackAssistantId) {
+                            activeIds.add(fallbackAssistantId);
+                        }
+                    }
+
+                    for (const id of activeIds) {
+                        const timeout = timeoutRegistry.get(id);
+                        if (timeout) {
+                            clearTimeout(timeout);
+                            timeoutRegistry.delete(id);
+                            lastContentRegistry.delete(id);
+                        }
+                    }
+
+                    if (activeIds.size > 0) {
+                        clearLifecycleTimersForIds(activeIds);
+                    }
+
+                    const abortTimestamp = Date.now();
+
+                    set((state) => {
+                        const updatedStates = removeLifecycleEntries(state.messageStreamStates, activeIds);
+
+                        const sessionMessages = state.messages.get(currentSessionId) ?? [];
+                        let messagesChanged = false;
+                        let updatedMessages = state.messages;
+
+                        if (sessionMessages.length > 0 && activeIds.size > 0) {
+                            const updatedSessionMessages = sessionMessages.map((message) => {
+                                if (!activeIds.has(message.info.id) && activeIds.size > 0) {
+                                    return message;
+                                }
+
+                                const updatedParts = (message.parts ?? []).map((part) => {
+                                    if (part.type === 'reasoning') {
+                                        const reasoningPart = part as any;
+                                        const time = { ...(reasoningPart.time ?? {}) };
+                                        if (typeof time.end !== 'number') {
+                                            time.end = abortTimestamp;
+                                        }
+                                        return {
+                                            ...reasoningPart,
+                                            time,
+                                        } as Part;
+                                    }
+
+                                    if (part.type === 'tool') {
+                                        const toolPart = part as any;
+                                        const stateData = { ...(toolPart.state ?? {}) };
+                                        if (stateData.status === 'running' || stateData.status === 'pending') {
+                                            stateData.status = 'aborted';
+                                        }
+                                        return {
+                                            ...toolPart,
+                                            state: stateData,
+                                        } as Part;
+                                    }
+
+                                    if (part.type === 'step-start') {
+                                        const stepPart = part as any;
+                                        return {
+                                            ...stepPart,
+                                            type: 'step-finish',
+                                            aborted: true,
+                                        } as Part;
+                                    }
+
+                                    return part;
+                                });
+
+                                messagesChanged = true;
+                                return {
+                                    ...message,
+                                    info: {
+                                        ...message.info,
+                                        abortedAt: abortTimestamp,
+                                        streaming: false,
+                                        status: 'aborted',
+                                    },
+                                    parts: updatedParts,
+                                };
+                            });
+
+                            if (messagesChanged) {
+                                updatedMessages = new Map(state.messages);
+                                updatedMessages.set(currentSessionId, updatedSessionMessages);
+                            }
+                        }
+                        const memoryState = state.sessionMemoryState.get(currentSessionId);
+                        let nextMemoryState = state.sessionMemoryState;
+                        if (memoryState) {
+                            const updatedMemory = new Map(state.sessionMemoryState);
+                            updatedMemory.set(currentSessionId, {
+                                ...memoryState,
+                                isStreaming: false,
+                                streamStartTime: undefined,
+                                isZombie: false,
+                            });
+                            nextMemoryState = updatedMemory;
+                        }
+
+                        const nextAbortFlags = new Map(state.sessionAbortFlags);
+                        nextAbortFlags.set(currentSessionId, {
+                            timestamp: abortTimestamp,
+                            acknowledged: false,
+                        });
+
+                        return {
+                            messageStreamStates: updatedStates,
+                            sessionMemoryState: nextMemoryState,
+                            sessionAbortFlags: nextAbortFlags,
+                            abortControllers: (() => {
+                                const nextControllers = new Map(state.abortControllers);
+                                nextControllers.delete(currentSessionId);
+                                return nextControllers;
+                            })(),
+                            streamingMessageIds: setStreamingIdForSession(state.streamingMessageIds, currentSessionId, null),
+                            ...(messagesChanged ? { messages: updatedMessages } : {}),
+                        };
+                    });
+
+                    void opencodeClient.abortSession(currentSessionId).catch((error) => {
+                        console.warn('Abort request failed:', error);
+                    });
+                },
+
+                _addStreamingPartImmediate: (sessionId: string, messageId: string, part: Part, role?: string, currentSessionId?: string) => {
+                    const stateSnapshot = get();
+                    if (ignoredAssistantMessageIds.has(messageId)) {
+                        return;
+                    }
+                    const existingMessagesSnapshot = stateSnapshot.messages.get(sessionId) || [];
+                    const existingMessageSnapshot = existingMessagesSnapshot.find((m) => m.info.id === messageId);
+
+                    const actualRole = (() => {
+                        if (role === 'user') return 'user';
+                        if (existingMessageSnapshot?.info.role === 'user') return 'user';
+                        return role || existingMessageSnapshot?.info.role || 'assistant';
+                    })();
+
+                    const memoryStateSnapshot = get().sessionMemoryState.get(sessionId);
+                    if (memoryStateSnapshot?.streamStartTime) {
+                        const streamDuration = Date.now() - memoryStateSnapshot.streamStartTime;
+                        if (streamDuration > MEMORY_LIMITS.ZOMBIE_TIMEOUT) {
+                            if (!memoryStateSnapshot.isZombie) {
+                                set((state) => {
+                                    const newMemoryState = new Map(state.sessionMemoryState);
+                                    newMemoryState.set(sessionId, {
+                                        ...memoryStateSnapshot,
+                                        isZombie: true,
+                                    });
+                                    return { sessionMemoryState: newMemoryState };
+                                });
+                            }
+
+                            setTimeout(() => {
+                                const store = get();
+                                store.completeStreamingMessage(sessionId, messageId);
+                            }, 0);
+                            (window as any).__messageTracker?.(messageId, 'skipped_zombie_stream');
+                            return;
+                        }
+                    }
+
+                    set((state) => {
+                        const sessionMessages = state.messages.get(sessionId) || [];
+                        const messagesArray = [...sessionMessages];
+                        const updates: any = {};
+
+                        const indexedSessions = upsertMessageSessionIndex(state.messageSessionIndex, messageId, sessionId);
+                        if (indexedSessions !== state.messageSessionIndex) {
+                            updates.messageSessionIndex = indexedSessions;
+                        }
+
+                        const finalizeAbortState = (result: Partial<MessageState>): Partial<MessageState> => {
+                            const shouldClearAbortFlag =
+                                (actualRole === 'assistant' || actualRole === 'user') &&
+                                state.sessionAbortFlags.has(sessionId);
+                            if (!shouldClearAbortFlag) {
+                                return result;
+                            }
+                            const nextAbortFlags = new Map(state.sessionAbortFlags);
+                            nextAbortFlags.delete(sessionId);
+                            return {
+                                ...result,
+                                sessionAbortFlags: nextAbortFlags,
+                            };
+                        };
+
+                        const maintainTimeouts = (text: string) => {
+                            const value = text || '';
+                            const lastContent = lastContentRegistry.get(messageId);
+
+                            if (value && lastContent === value) {
+                                const currentState = get();
+                                if (isMessageStreamingInSession(currentState, sessionId, messageId)) {
+                                    const existingTimeout = timeoutRegistry.get(messageId);
+                                    if (existingTimeout) {
+                                        clearTimeout(existingTimeout);
+                                        timeoutRegistry.delete(messageId);
+                                    }
+                                    setTimeout(() => {
+                                        const store = get();
+                                        if (typeof store.forceCompleteMessage === "function") {
+                                            store.forceCompleteMessage(sessionId, messageId, "timeout");
+                                        }
+                                        store.completeStreamingMessage(sessionId, messageId);
+                                    }, 100);
+                                }
+                            }
+
+                            lastContentRegistry.set(messageId, value);
+
+                            const existingTimeout = timeoutRegistry.get(messageId);
+                            if (existingTimeout) {
+                                clearTimeout(existingTimeout);
+                            }
+                            const newTimeout = setTimeout(() => {
+                                const store = get();
+                                if (typeof store.forceCompleteMessage === "function") {
+                                    store.forceCompleteMessage(sessionId, messageId, "timeout");
+                                }
+                                if (isMessageStreamingInSession(store, sessionId, messageId)) {
+                                    store.completeStreamingMessage(sessionId, messageId);
+                                }
+                                timeoutRegistry.delete(messageId);
+                                lastContentRegistry.delete(messageId);
+                            }, 8000);
+                            timeoutRegistry.set(messageId, newTimeout);
+                        };
+
+                        const isBackgroundSession = sessionId !== currentSessionId;
+                        const memoryState = state.sessionMemoryState.get(sessionId);
+                        if (isBackgroundSession && memoryState?.isStreaming) {
+                            if (messagesArray.length >= MEMORY_LIMITS.BACKGROUND_STREAMING_BUFFER) {
+                                messagesArray.shift();
+                            }
+
+                            const newMemoryState = new Map(state.sessionMemoryState);
+                            newMemoryState.set(sessionId, {
+                                ...memoryState,
+                                backgroundMessageCount: (memoryState.backgroundMessageCount || 0) + 1,
+                            });
+                            state.sessionMemoryState = newMemoryState;
+                        }
+
+                        if (actualRole === 'assistant') {
+                            const currentMemoryState = state.sessionMemoryState.get(sessionId);
+                            if (currentMemoryState) {
+                                const now = Date.now();
+                                const nextMemoryState = new Map(state.sessionMemoryState);
+                                nextMemoryState.set(sessionId, {
+                                    ...currentMemoryState,
+                                    isStreaming: true,
+                                    streamStartTime: currentMemoryState.streamStartTime ?? now,
+                                    lastAccessedAt: now,
+                                    isZombie: false,
+                                });
+                                state.sessionMemoryState = nextMemoryState;
+                            }
+                        }
+
+                    const incomingText = extractTextFromPart(part);
+                    if (streamDebugEnabled() && actualRole === "assistant") {
+                        try {
+                            console.info("[STREAM-TRACE] part", {
+                                messageId,
+                                role: actualRole,
+                                type: (part as any)?.type || "text",
+                                textLen: incomingText.length,
+                                snapshotParts: existingMessagesSnapshot.length,
+                            });
+                        } catch { /* ignored */ }
+                    }
+
+                        const previousStreamingMap = updates.streamingMessageIds ?? state.streamingMessageIds;
+                        if (actualRole === 'assistant') {
+                            const nextStreamingMap = setStreamingIdForSession(previousStreamingMap, sessionId, messageId);
+                            if (nextStreamingMap !== previousStreamingMap) {
+                                updates.streamingMessageIds = nextStreamingMap;
+                                (window as any).__messageTracker?.(messageId, 'streamingId_set_latest');
+                            }
+                        }
+
+                        const messageIndex = messagesArray.findIndex((m) => m.info.id === messageId);
+
+                        if (messageIndex !== -1 && actualRole === 'user') {
+                            const existingMessage = messagesArray[messageIndex];
+                            const existingPartIndex = existingMessage.parts.findIndex((p) => p.id === part.id);
+
+                            if ((part as any).synthetic === true) {
+                                (window as any).__messageTracker?.(messageId, 'skipped_synthetic_user_part');
+                                return state;
+                            }
+
+                            const normalizedPart = normalizeStreamingPart(
+                                part,
+                                existingPartIndex !== -1 ? existingMessage.parts[existingPartIndex] : undefined
+                            );
+                            (window as any).__messageTracker?.(messageId, `user_part_type:${(normalizedPart as any).type || 'unknown'}`);
+
+                            const updatedMessage = { ...existingMessage };
+                            if (existingPartIndex !== -1) {
+                                updatedMessage.parts = updatedMessage.parts.map((p, idx) =>
+                                    idx === existingPartIndex ? normalizedPart : p
+                                );
+                            } else {
+                                updatedMessage.parts = [...updatedMessage.parts, normalizedPart];
+                            }
+
+                            const updatedMessages = [...messagesArray];
+                            updatedMessages[messageIndex] = updatedMessage;
+
+                            const newMessages = new Map(state.messages);
+                            newMessages.set(sessionId, updatedMessages);
+
+                            return finalizeAbortState({ messages: newMessages });
+                        }
+
+                        if (actualRole === 'assistant' && messageIndex !== -1) {
+
+                            const existingMessage = messagesArray[messageIndex];
+                            const existingPartIndex = existingMessage.parts.findIndex((p) => p.id === part.id);
+
+                            const normalizedPart = normalizeStreamingPart(
+                                part,
+                                existingPartIndex !== -1 ? existingMessage.parts[existingPartIndex] : undefined
+                            );
+                            (window as any).__messageTracker?.(messageId, `part_type:${(normalizedPart as any).type || 'unknown'}`);
+
+                            const updatedMessage = { ...existingMessage };
+                            if (existingPartIndex !== -1) {
+                                updatedMessage.parts = updatedMessage.parts.map((p, idx) =>
+                                    idx === existingPartIndex ? normalizedPart : p
+                                );
+                            } else {
+                                updatedMessage.parts = [...updatedMessage.parts, normalizedPart];
+                            }
+
+                            const updatedMessages = [...messagesArray];
+                            updatedMessages[messageIndex] = updatedMessage;
+
+                            const newMessages = new Map(state.messages);
+                            newMessages.set(sessionId, updatedMessages);
+
+                            updates.messageStreamStates = touchStreamingLifecycle(state.messageStreamStates, messageId);
+                            const nextStreamingMap = setStreamingIdForSession(updates.streamingMessageIds ?? state.streamingMessageIds, sessionId, messageId);
+                            if (nextStreamingMap !== (updates.streamingMessageIds ?? state.streamingMessageIds)) {
+                                updates.streamingMessageIds = nextStreamingMap;
+                                (window as any).__messageTracker?.(messageId, 'streamingId_set');
+                            }
+
+                            if ((normalizedPart as any).type === 'text') {
+                                maintainTimeouts((normalizedPart as any).text || '');
+                            } else {
+                                maintainTimeouts('');
+                            }
+
+                            return finalizeAbortState({ messages: newMessages, ...updates });
+                        }
+
+                        if (messageIndex === -1) {
+
+                            if (actualRole === 'user') {
+
+                                if ((part as any).synthetic === true) {
+                                    (window as any).__messageTracker?.(messageId, 'skipped_synthetic_new_user_part');
+                                    return state;
+                                }
+
+                                const normalizedPart = normalizeStreamingPart(part);
+                                (window as any).__messageTracker?.(messageId, `new_user_part_type:${(normalizedPart as any).type || 'unknown'}`);
+
+                                const newUserMessage = {
+                                    info: {
+                                        id: messageId,
+                                        sessionID: sessionId,
+                                        role: 'user' as const,
+                                        clientRole: 'user',
+                                        userMessageMarker: true,
+                                        time: {
+                                            created: Date.now(),
+                                        },
+                                    },
+                                    parts: [normalizedPart],
+                                };
+
+                                const updatedMessages = [...messagesArray, newUserMessage];
+
+                                updatedMessages.sort((a, b) => {
+                                    const aTime = (a.info as any)?.time?.created || 0;
+                                    const bTime = (b.info as any)?.time?.created || 0;
+                                    return aTime - bTime;
+                                });
+
+                                const newMessages = new Map(state.messages);
+                                newMessages.set(sessionId, updatedMessages);
+
+                                return finalizeAbortState({ messages: newMessages });
+                            }
+
+                            if ((part as any)?.type === 'text') {
+                                const textIncoming = extractTextFromPart(part).trim();
+                                if (textIncoming.length > 0) {
+                                    const latestUser = [...messagesArray]
+                                        .reverse()
+                                        .find((m) => m.info.role === 'user');
+                                    if (latestUser) {
+                                        const latestUserText = latestUser.parts.map((p) => extractTextFromPart(p)).join('').trim();
+                                        if (latestUserText.length > 0 && latestUserText === textIncoming) {
+                                            ignoredAssistantMessageIds.add(messageId);
+                                            (window as any).__messageTracker?.(messageId, 'ignored_assistant_echo');
+                                            return state;
+                                        }
+                                    }
+                                }
+                            }
+
+                            const normalizedPart = normalizeStreamingPart(part);
+                            (window as any).__messageTracker?.(messageId, `part_type:${(normalizedPart as any).type || 'unknown'}`);
+
+                            if ((normalizedPart as any).type === 'text') {
+                                maintainTimeouts((normalizedPart as any).text || '');
+                            } else {
+                                maintainTimeouts('');
+                            }
+
+                            const pendingEntry = state.pendingAssistantParts.get(messageId);
+                            const pendingParts = pendingEntry ? [...pendingEntry.parts] : [];
+                            const pendingIndex = pendingParts.findIndex((existing) => existing.id === normalizedPart.id);
+
+                            if (pendingIndex !== -1) {
+                                pendingParts[pendingIndex] = normalizedPart;
+                            } else {
+                                pendingParts.push(normalizedPart);
+                            }
+
+                            const newPending = new Map(state.pendingAssistantParts);
+                            newPending.set(messageId, { sessionId, parts: pendingParts });
+
+                            const placeholderInfo = {
+                                id: messageId,
+                                sessionID: sessionId,
+                                role: actualRole as "user" | "assistant",
+                                clientRole: actualRole,
+                                providerID: state.lastUsedProvider?.providerID || "",
+                                modelID: state.lastUsedProvider?.modelID || "",
+                                time: {
+                                    created: Date.now(),
+                                },
+                                animationSettled: actualRole === "assistant" ? false : undefined,
+                                streaming: actualRole === "assistant" ? true : undefined,
+                            } as Message;
+
+                            const placeholderMessage = {
+                                info: placeholderInfo,
+                                parts: pendingParts,
+                            };
+
+                            const nextMessages = [...messagesArray, placeholderMessage];
+
+                            const newMessages = new Map(state.messages);
+                            newMessages.set(sessionId, nextMessages);
+
+                            if (actualRole === 'assistant') {
+                                updates.messageStreamStates = touchStreamingLifecycle(state.messageStreamStates, messageId);
+
+                                const nextStreamingMap = setStreamingIdForSession(updates.streamingMessageIds ?? state.streamingMessageIds, sessionId, messageId);
+                                if (nextStreamingMap !== (updates.streamingMessageIds ?? state.streamingMessageIds)) {
+                                    updates.streamingMessageIds = nextStreamingMap;
+                                    (window as any).__messageTracker?.(messageId, 'streamingId_set');
+                                }
+                            }
+
+                            return finalizeAbortState({
+                                messages: newMessages,
+                                pendingAssistantParts: newPending,
+                                ...updates,
+                            });
+                        } else {
+
+                            const existingMessage = messagesArray[messageIndex];
+                            const existingPartIndex = existingMessage.parts.findIndex((p) => p.id === part.id);
+
+                            const normalizedPart = normalizeStreamingPart(
+                                part,
+                                existingPartIndex !== -1 ? existingMessage.parts[existingPartIndex] : undefined
+                            );
+                            (window as any).__messageTracker?.(messageId, `part_type:${(normalizedPart as any).type || 'unknown'}`);
+
+                            const updatedMessage = { ...existingMessage };
+                            if (existingPartIndex !== -1) {
+                                updatedMessage.parts = updatedMessage.parts.map((p, idx) =>
+                                    idx === existingPartIndex ? normalizedPart : p
+                                );
+                            } else {
+                                updatedMessage.parts = [...updatedMessage.parts, normalizedPart];
+                            }
+
+                            const updatedMessages = [...messagesArray];
+                            updatedMessages[messageIndex] = updatedMessage;
+
+                            const newMessages = new Map(state.messages);
+                            newMessages.set(sessionId, updatedMessages);
+
+                            if (updatedMessage.info.role === "assistant") {
+                                updates.messageStreamStates = touchStreamingLifecycle(state.messageStreamStates, messageId);
+                                const nextStreamingMap = setStreamingIdForSession(updates.streamingMessageIds ?? state.streamingMessageIds, sessionId, messageId);
+                                if (nextStreamingMap !== (updates.streamingMessageIds ?? state.streamingMessageIds)) {
+                                    updates.streamingMessageIds = nextStreamingMap;
+                                    (window as any).__messageTracker?.(messageId, 'streamingId_set');
+                                }
+                            }
+
+                            if ((normalizedPart as any).type === 'text') {
+                                maintainTimeouts((normalizedPart as any).text || '');
+                            } else {
+                                maintainTimeouts('');
+                            }
+
+                            return finalizeAbortState({ messages: newMessages, ...updates });
+                        }
+                    });
+
+                    const partType = (part as any)?.type;
+                    if (partType === 'step-finish' && actualRole !== 'user') {
+                        setTimeout(() => {
+                            const store = get();
+                            store.completeStreamingMessage(sessionId, messageId);
+                        }, 0);
+                    }
+                },
+
+                addStreamingPart: (sessionId: string, messageId: string, part: Part, role?: string, currentSessionId?: string) => {
+
+                    if (role !== 'user') {
+                        get()._addStreamingPartImmediate(sessionId, messageId, part, role, currentSessionId);
+                        return;
+                    }
+
+                    batchQueue.push({ sessionId, messageId, part, role, currentSessionId });
+
+                    if (!flushTimer) {
+                        flushTimer = setTimeout(() => {
+                            const itemsToProcess = [...batchQueue];
+                            batchQueue = [];
+                            flushTimer = null;
+
+                            const store = get();
+                            for (const item of itemsToProcess) {
+                                store._addStreamingPartImmediate(item.sessionId, item.messageId, item.part, item.role, item.currentSessionId);
+                            }
+                        }, USER_BATCH_WINDOW_MS);
+                    }
+                },
+
+                forceCompleteMessage: (sessionId: string | null | undefined, messageId: string, source: "timeout" | "cooldown" = "timeout") => {
+                    const resolveSessionId = (state: MessageState): string | null => {
+                        if (sessionId) {
+                            return sessionId;
+                        }
+                        for (const [candidateId, sessionMessages] of state.messages.entries()) {
+                            if (sessionMessages.some((msg) => msg.info.id === messageId)) {
+                                return candidateId;
+                            }
+                        }
+                        return null;
+                    };
+
+                    set((state) => {
+                        const targetSessionId = resolveSessionId(state);
+                        if (!targetSessionId) {
+                            return state;
+                        }
+
+                        const sessionMessages = state.messages.get(targetSessionId) ?? [];
+                        const messageIndex = sessionMessages.findIndex((msg) => msg.info.id === messageId);
+                        if (messageIndex === -1) {
+                            return state;
+                        }
+
+                        const message = sessionMessages[messageIndex];
+                        if (!message) {
+                            return state;
+                        }
+
+                        const now = Date.now();
+                        const existingInfo = message.info as any;
+                        const existingCompleted = typeof existingInfo?.time?.completed === "number" && existingInfo.time.completed > 0;
+
+                        let infoChanged = false;
+                        const updatedInfo: Record<string, any> = { ...existingInfo };
+
+                        if (!existingCompleted) {
+                            updatedInfo.time = {
+                                ...(existingInfo.time ?? {}),
+                                completed: now,
+                            };
+                            infoChanged = true;
+                        }
+
+                        if (updatedInfo.status !== "completed") {
+                            updatedInfo.status = "completed";
+                            infoChanged = true;
+                        }
+
+                        if (updatedInfo.streaming) {
+                            updatedInfo.streaming = false;
+                            infoChanged = true;
+                        }
+
+                        let partsChanged = false;
+                        const updatedParts = message.parts.map((part) => {
+                            if (!part) {
+                                return part;
+                            }
+
+                            if (part.type === "tool") {
+                                const existingState = (part as any).state;
+                                if (!existingState) {
+                                    return part;
+                                }
+
+                                const status = existingState.status;
+                                const needsStatusUpdate = status === "running" || status === "pending" || status === "started";
+                                const needsEndTimestamp = !existingState.time || typeof existingState.time?.end !== "number";
+
+                                if (needsStatusUpdate || needsEndTimestamp) {
+                                    const nextState: Record<string, any> = { ...existingState };
+                                    if (needsStatusUpdate) {
+                                        nextState.status = "completed";
+                                    }
+                                    if (needsEndTimestamp) {
+                                        nextState.time = {
+                                            ...(existingState.time ?? {}),
+                                            end: now,
+                                        };
+                                    }
+                                    partsChanged = true;
+                                    return {
+                                        ...part,
+                                        state: nextState,
+                                    } as Part;
+                                }
+                                return part;
+                            }
+
+                            if (part.type === "reasoning") {
+                                const reasoningTime = (part as any).time;
+                                if (!reasoningTime || typeof reasoningTime.end !== "number") {
+                                    partsChanged = true;
+                                    return {
+                                        ...part,
+                                        time: {
+                                            ...(reasoningTime ?? {}),
+                                            end: now,
+                                        },
+                                    } as Part;
+                                }
+                                return part;
+                            }
+
+                            if (part.type === "text") {
+                                const textTime = (part as any).time;
+                                if (textTime && typeof textTime.end !== "number") {
+                                    partsChanged = true;
+                                    return {
+                                        ...part,
+                                        time: {
+                                            ...textTime,
+                                            end: now,
+                                        },
+                                    } as Part;
+                                }
+                                return part;
+                            }
+
+                            return part;
+                        });
+
+                        if (!infoChanged && !partsChanged) {
+                            return state;
+                        }
+
+                        (window as any).__messageTracker?.(messageId, `force_complete:${source}`);
+
+                        const updatedMessage = {
+                            ...message,
+                            info: updatedInfo as Message,
+                            parts: partsChanged ? updatedParts : message.parts,
+                        };
+
+                        const nextSessionMessages = [...sessionMessages];
+                        nextSessionMessages[messageIndex] = updatedMessage;
+
+                        const nextMessages = new Map(state.messages);
+                        nextMessages.set(targetSessionId, nextSessionMessages);
+
+                        return { messages: nextMessages };
+                    });
+                },
+
+                markMessageStreamSettled: (messageId: string) => {
+                    set((state) => {
+
+                        clearLifecycleCompletionTimer(messageId);
+                        const next = new Map(state.messageStreamStates);
+                        next.delete(messageId);
+
+                        let updatedMessages = state.messages;
+                        let messagesModified = false;
+
+                        state.messages.forEach((sessionMessages, sessionId) => {
+                            if (messagesModified) return;
+                            const idx = sessionMessages.findIndex((msg) => msg.info.id === messageId);
+                            if (idx === -1) return;
+
+                            const message = sessionMessages[idx];
+                            if ((message.info as any)?.animationSettled) {
+                                return;
+                            }
+
+                            const updatedMessage = {
+                                ...message,
+                                info: {
+                                    ...message.info,
+                                    animationSettled: true,
+                                },
+                            };
+
+                            const sessionArray = [...sessionMessages];
+                            sessionArray[idx] = updatedMessage;
+
+                            const newMessages = new Map(state.messages);
+                            newMessages.set(sessionId, sessionArray);
+                            updatedMessages = newMessages;
+                            messagesModified = true;
+                        });
+
+                        const updates: Partial<MessageState> & { messageStreamStates: Map<string, MessageStreamLifecycle> } = {
+                            messageStreamStates: next,
+                            ...(messagesModified ? { messages: updatedMessages } : {}),
+                        } as any;
+
+                        return updates;
+                    });
+                    clearLifecycleTimersForIds([messageId]);
+                },
+
+                updateMessageInfo: (sessionId: string, messageId: string, messageInfo: any) => {
+                    set((state) => {
+                        const sessionMessages = state.messages.get(sessionId) ?? [];
+                        const normalizedSessionMessages = [...sessionMessages];
+
+                        const messageIndex = normalizedSessionMessages.findIndex((msg) => msg.info.id === messageId);
+                        const pendingEntry = state.pendingAssistantParts.get(messageId);
+
+                        const mergeParts = (existingParts: Part[] = [], incomingParts: Part[] = []) => {
+                            if (!incomingParts.length) {
+                                return existingParts;
+                            }
+                            const merged = [...existingParts];
+                            incomingParts.forEach((incomingPart) => {
+                                const idx = merged.findIndex((part) => part.id === incomingPart.id);
+                                if (idx === -1) {
+                                    merged.push(incomingPart);
+                                } else {
+                                    merged[idx] = incomingPart;
+                                }
+                            });
+                            return merged;
+                        };
+
+                        const ensureClientRole = (info: any) => {
+
+                            if (!info) {
+                                return info;
+                            }
+                            const clientRole = info.clientRole ?? info.role;
+                            const userMarker = clientRole === 'user' ? true : info.userMessageMarker;
+                            return {
+                                ...info,
+                                clientRole,
+                                ...(userMarker ? { userMessageMarker: true } : {}),
+                            };
+                        };
+
+                        if (messageIndex === -1) {
+                            console.info("[MESSAGE-DEBUG] updateMessageInfo: messageIndex === -1", {
+                                sessionId,
+                                messageId,
+                                messageInfo,
+                                existingCount: normalizedSessionMessages.length,
+                            });
+
+                            if (normalizedSessionMessages.length > 0) {
+                                const firstMessage = normalizedSessionMessages[0];
+                                const firstInfo = firstMessage?.info as any;
+                                const firstCreated = typeof firstInfo?.time?.created === 'number' ? firstInfo.time.created : null;
+                                const firstId = typeof firstInfo?.id === 'string' ? firstInfo.id : null;
+
+                                const incomingInfoToCompare = messageInfo as any;
+                                const incomingCreated = typeof incomingInfoToCompare?.time?.created === 'number'
+                                    ? incomingInfoToCompare.time.created
+                                    : null;
+                                const incomingId = typeof incomingInfoToCompare?.id === 'string' ? incomingInfoToCompare.id : messageId;
+
+                                let isOlderThanViewport = false;
+                                if (incomingCreated !== null && firstCreated !== null) {
+                                    isOlderThanViewport = incomingCreated < firstCreated;
+                                }
+                                if (!isOlderThanViewport && incomingId && firstId) {
+                                    isOlderThanViewport = incomingId.localeCompare(firstId) < 0;
+                                }
+
+                                if (isOlderThanViewport) {
+                                    (window as any).__messageTracker?.(messageId, 'skipped_evicted_message_update');
+                                    return state;
+                                }
+                            }
+
+                            const incomingInfo = ensureClientRole(messageInfo);
+
+                            if (incomingInfo && incomingInfo.role === 'user') {
+                                const pendingParts = pendingEntry?.parts ?? [];
+                                const newUserMessage = {
+                                    info: {
+                                        ...incomingInfo,
+                                        userMessageMarker: true,
+                                        clientRole: 'user',
+                                    } as Message,
+                                    parts: pendingParts.length > 0 ? [...pendingParts] : [],
+                                };
+
+                                const newMessages = new Map(state.messages);
+
+                                const appended = [...normalizedSessionMessages, newUserMessage];
+
+                                appended.sort((a, b) => {
+                                    const aTime = (a.info as any)?.time?.created || 0;
+                                    const bTime = (b.info as any)?.time?.created || 0;
+                                    return aTime - bTime;
+                                });
+                                newMessages.set(sessionId, appended);
+
+                                const updates: Partial<MessageState> = {
+                                    messages: newMessages,
+                                };
+
+                                const nextIndex = upsertMessageSessionIndex(
+                                    updates.messageSessionIndex ?? state.messageSessionIndex,
+                                    messageId,
+                                    sessionId
+                                );
+                                if (nextIndex !== (updates.messageSessionIndex ?? state.messageSessionIndex)) {
+                                    updates.messageSessionIndex = nextIndex;
+                                }
+
+                                if (pendingEntry) {
+                                    const newPending = new Map(state.pendingAssistantParts);
+                                    newPending.delete(messageId);
+                                    updates.pendingAssistantParts = newPending;
+                                }
+
+                                return updates;
+                            }
+
+                            if (!incomingInfo || incomingInfo.role !== 'assistant') {
+                                return state;
+                            }
+
+                            const pendingParts = pendingEntry?.parts ?? [];
+                            const newMessage = {
+                                info: {
+                                    ...incomingInfo,
+                                    animationSettled: (incomingInfo as any)?.animationSettled ?? false,
+                                } as Message,
+                                parts: pendingParts.length > 0 ? [...pendingParts] : [],
+                            };
+
+                            const newMessages = new Map(state.messages);
+
+                            const appended = [...normalizedSessionMessages, newMessage];
+                            newMessages.set(sessionId, appended);
+
+                            const updates: Partial<MessageState> = {
+                                messages: newMessages,
+                            };
+
+                            const nextIndex = upsertMessageSessionIndex(
+                                updates.messageSessionIndex ?? state.messageSessionIndex,
+                                messageId,
+                                sessionId
+                            );
+                            if (nextIndex !== (updates.messageSessionIndex ?? state.messageSessionIndex)) {
+                                updates.messageSessionIndex = nextIndex;
+                            }
+
+                            if (pendingEntry) {
+                                const newPending = new Map(state.pendingAssistantParts);
+                                newPending.delete(messageId);
+                                updates.pendingAssistantParts = newPending;
+                            }
+
+                            return updates;
+                        }
+
+                        const existingMessage = normalizedSessionMessages[messageIndex];
+
+                        const existingInfo = existingMessage.info as any;
+                        const isUserMessage =
+                            existingInfo.userMessageMarker === true ||
+                            existingInfo.clientRole === 'user' ||
+                            existingInfo.role === 'user';
+
+                        if (isUserMessage) {
+
+                            const updatedInfo = {
+                                ...existingMessage.info,
+                                ...messageInfo,
+
+                                role: 'user',
+                                clientRole: 'user',
+                                userMessageMarker: true,
+
+                                providerID: existingInfo.providerID || undefined,
+                                modelID: existingInfo.modelID || undefined,
+                            } as any;
+
+                            const updatedMessage = {
+                                ...existingMessage,
+                                info: updatedInfo
+                            };
+
+                            const newMessages = new Map(state.messages);
+                            const updatedSessionMessages = [...normalizedSessionMessages];
+                            updatedSessionMessages[messageIndex] = updatedMessage;
+                            newMessages.set(sessionId, updatedSessionMessages);
+
+                            return { messages: newMessages };
+                        }
+
+                        const updatedInfo = {
+                            ...existingMessage.info,
+                            ...messageInfo,
+                        } as any;
+
+                        if (messageInfo.role && messageInfo.role !== existingMessage.info.role) {
+                            updatedInfo.role = existingMessage.info.role;
+                        }
+
+                        updatedInfo.clientRole = updatedInfo.clientRole ?? existingMessage.info.clientRole ?? existingMessage.info.role;
+                        if (updatedInfo.clientRole === "user") {
+                            updatedInfo.userMessageMarker = true;
+                        }
+
+                        const mergedParts = pendingEntry?.parts
+                            ? mergeParts(existingMessage.parts, pendingEntry.parts)
+                            : existingMessage.parts;
+
+                        const updatedMessage = {
+                            ...existingMessage,
+                            info: updatedInfo,
+                            parts: mergedParts,
+                        };
+
+                        const newMessages = new Map(state.messages);
+                        const updatedSessionMessages = [...normalizedSessionMessages];
+                        updatedSessionMessages[messageIndex] = updatedMessage;
+                        newMessages.set(sessionId, updatedSessionMessages);
+
+                        const updates: Partial<MessageState> = {
+                            messages: newMessages,
+                        };
+
+                        if (pendingEntry) {
+                            const newPending = new Map(state.pendingAssistantParts);
+                            newPending.delete(messageId);
+                            updates.pendingAssistantParts = newPending;
+                        }
+
+                        return updates;
+                    });
+                },
+
+                completeStreamingMessage: (sessionId: string, messageId: string) => {
+                    const state = get();
+
+                    (window as any).__messageTracker?.(
+                        messageId,
+                        `completion_called_current:${state.streamingMessageIds.get(sessionId) ?? 'none'}`
+                    );
+
+                    if (typeof state.forceCompleteMessage === "function") {
+                        state.forceCompleteMessage(sessionId, messageId, "cooldown");
+                    }
+
+                    const shouldClearStreamingId = state.streamingMessageIds.get(sessionId) === messageId;
+                    if (shouldClearStreamingId) {
+                        (window as any).__messageTracker?.(messageId, 'streamingId_cleared');
+                    } else {
+                        (window as any).__messageTracker?.(messageId, 'streamingId_NOT_cleared_different_id');
+                    }
+
+                    const updates: Record<string, any> = {};
+                    if (shouldClearStreamingId) {
+                        updates.streamingMessageIds = setStreamingIdForSession(state.streamingMessageIds, sessionId, null);
+                        updates.abortControllers = (() => {
+                            const next = new Map(state.abortControllers);
+                            next.delete(sessionId);
+                            return next;
+                        })();
+                    }
+
+                    if (state.messageStreamStates.has(messageId)) {
+                        const next = new Map(state.messageStreamStates);
+                        next.delete(messageId);
+                        updates.messageStreamStates = next;
+                    }
+
+                    if (Object.keys(updates).length > 0) {
+                        set(updates);
+                    }
+
+                    if (state.pendingAssistantParts.has(messageId)) {
+                        set((currentState) => {
+                            if (!currentState.pendingAssistantParts.has(messageId)) {
+                                return currentState;
+                            }
+                            const nextPending = new Map(currentState.pendingAssistantParts);
+                            nextPending.delete(messageId);
+                            return { pendingAssistantParts: nextPending };
+                        });
+                    }
+
+                    clearLifecycleTimersForIds([messageId]);
+
+                    let startedCooldown = false;
+                    set((state) => {
+                        const memoryState = state.sessionMemoryState.get(sessionId);
+                        if (!memoryState || !memoryState.isStreaming) return state;
+
+                        const newMemoryState = new Map(state.sessionMemoryState);
+                        const now = Date.now();
+                        const updatedMemory: SessionMemoryState = {
+                            ...memoryState,
+                            isStreaming: false,
+                            streamStartTime: undefined,
+                            isZombie: false,
+                            lastAccessedAt: now,
+                            streamingCooldownUntil: now + 2000,
+                        };
+                        newMemoryState.set(sessionId, updatedMemory);
+                        startedCooldown = true;
+                        return { sessionMemoryState: newMemoryState };
+                    });
+
+                    if (startedCooldown) {
+                        const existingTimer = streamingCooldownTimers.get(sessionId);
+                        if (existingTimer) {
+                            clearTimeout(existingTimer);
+                            streamingCooldownTimers.delete(sessionId);
+                        }
+
+                        const timeoutId = setTimeout(() => {
+                            set((state) => {
+                                const memoryState = state.sessionMemoryState.get(sessionId);
+                                if (!memoryState) return state;
+
+                                if (memoryState.isStreaming) {
+                                    return state;
+                                }
+
+                                const nextMemoryState = new Map(state.sessionMemoryState);
+                                const { streamingCooldownUntil: _streamingCooldownUntil, ...rest } = memoryState;
+                                void _streamingCooldownUntil;
+                                nextMemoryState.set(sessionId, rest as SessionMemoryState);
+                                return { sessionMemoryState: nextMemoryState };
+                            });
+                            streamingCooldownTimers.delete(sessionId);
+                        }, 2000);
+
+                        streamingCooldownTimers.set(sessionId, timeoutId);
+                    }
+                },
+
+                syncMessages: (sessionId: string, messages: { info: Message; parts: Part[] }[]) => {
+                    const watermark = get().sessionMemoryState.get(sessionId)?.trimmedHeadMaxId;
+                    const messagesFiltered = watermark
+                        ? messages.filter((message) => {
+                              const messageId = message?.info?.id;
+                              if (!messageId) return true;
+
+                              return isIdNewer(messageId, watermark);
+                          })
+                        : messages;
+
+                    set((state) => {
+                        const newMessages = new Map(state.messages);
+                        const previousMessages = state.messages.get(sessionId) || [];
+                        const previousMessagesById = new Map(
+                            previousMessages
+                                .filter((msg) => typeof msg.info?.id === "string")
+                                .map((msg) => [msg.info.id as string, msg])
+                        );
+
+                        const normalizedMessages = messagesFiltered.map((message) => {
+                            const infoWithMarker = {
+                                ...message.info,
+                                clientRole: (message.info as any)?.clientRole ?? message.info.role,
+                                userMessageMarker: message.info.role === "user" ? true : (message.info as any)?.userMessageMarker,
+                                animationSettled:
+                                    message.info.role === "assistant"
+                                        ? (message.info as any)?.animationSettled ?? true
+                                        : (message.info as any)?.animationSettled,
+                            } as any;
+
+                            const serverParts = Array.isArray(message.parts) ? [...message.parts] : [];
+                            const messageId = typeof infoWithMarker?.id === "string" ? (infoWithMarker.id as string) : undefined;
+                            const existingEntry = messageId ? previousMessagesById.get(messageId) : undefined;
+
+                            if (existingEntry && existingEntry.info.role === "assistant") {
+                                const existingParts = Array.isArray(existingEntry.parts) ? existingEntry.parts : [];
+                                const existingLen = computePartsTextLength(existingParts);
+                                const serverLen = computePartsTextLength(serverParts);
+                                const storeHasStop = hasStopReasonStop(existingParts);
+
+                                if (storeHasStop && existingLen > serverLen) {
+                                    const mergedParts = mergePreferExistingParts(existingParts, serverParts);
+                                    return {
+                                        ...message,
+                                        info: infoWithMarker,
+                                        parts: mergedParts,
+                                    };
+                                }
+                            }
+
+                            return {
+                                ...message,
+                                info: infoWithMarker,
+                                parts: serverParts,
+                            };
+                        });
+
+                        const mergedMessages = normalizedMessages;
+
+                        const previousIds = new Set(previousMessages.map((msg) => msg.info.id));
+                        const nextIds = new Set(mergedMessages.map((msg) => msg.info.id));
+                        const removedIds: string[] = [];
+                        previousIds.forEach((id) => {
+                            if (!nextIds.has(id)) {
+                                removedIds.push(id);
+                            }
+                        });
+
+                        newMessages.set(sessionId, mergedMessages);
+
+                        const result: Record<string, any> = {
+                            messages: newMessages,
+                            isSyncing: true,
+                        };
+
+                        clearLifecycleTimersForIds(removedIds);
+                        const updatedLifecycle = removeLifecycleEntries(state.messageStreamStates, removedIds);
+                        if (updatedLifecycle !== state.messageStreamStates) {
+                            result.messageStreamStates = updatedLifecycle;
+                        }
+
+                        if (removedIds.length > 0) {
+                            const currentStreaming = state.streamingMessageIds.get(sessionId);
+                            if (currentStreaming && removedIds.includes(currentStreaming)) {
+                                result.streamingMessageIds = setStreamingIdForSession(
+                                    result.streamingMessageIds ?? state.streamingMessageIds,
+                                    sessionId,
+                                    null
+                                );
+                            }
+                        }
+
+                        if (removedIds.length > 0) {
+                            const nextIndex = removeMessageSessionIndexEntries(
+                                result.messageSessionIndex ?? state.messageSessionIndex,
+                                removedIds
+                            );
+                            if (nextIndex !== (result.messageSessionIndex ?? state.messageSessionIndex)) {
+                                result.messageSessionIndex = nextIndex;
+                            }
+                        }
+
+                        if (removedIds.length > 0) {
+                            const nextPendingParts = new Map(state.pendingAssistantParts);
+                            let pendingChanged = false;
+                            removedIds.forEach((id) => {
+                                if (nextPendingParts.delete(id)) {
+                                    pendingChanged = true;
+                                }
+                            });
+                            if (pendingChanged) {
+                                result.pendingAssistantParts = nextPendingParts;
+                            }
+                        }
+
+                        const targetIndex = result.messageSessionIndex ?? state.messageSessionIndex;
+                        let indexAccumulator = targetIndex;
+                        mergedMessages.forEach((message) => {
+                            const id = (message?.info as { id?: unknown })?.id;
+                            if (typeof id === "string" && id.length > 0) {
+                                indexAccumulator = upsertMessageSessionIndex(indexAccumulator, id, sessionId);
+                            }
+                        });
+                        if (indexAccumulator !== targetIndex) {
+                            result.messageSessionIndex = indexAccumulator;
+                        }
+
+                        return result;
+                    });
+
+                    setTimeout(() => {
+                        set({ isSyncing: false });
+                    }, 100);
+                },
+
+                updateSessionCompaction: (sessionId: string, compactingTimestamp: number | null | undefined) => {
+                    set((state) => {
+                        const nextCompaction = new Map(state.sessionCompactionUntil);
+
+                        if (!compactingTimestamp || compactingTimestamp <= 0) {
+                            if (!nextCompaction.has(sessionId)) {
+                                return state;
+                            }
+                            nextCompaction.delete(sessionId);
+                            return { sessionCompactionUntil: nextCompaction };
+                        }
+
+                        const deadline = compactingTimestamp + COMPACTION_WINDOW_MS;
+                        const existingDeadline = nextCompaction.get(sessionId);
+                        if (existingDeadline === deadline) {
+                            return state;
+                        }
+
+                        nextCompaction.set(sessionId, deadline);
+                        return { sessionCompactionUntil: nextCompaction };
+                    });
+                },
+
+                acknowledgeSessionAbort: (sessionId: string) => {
+                    if (!sessionId) {
+                        return;
+                    }
+
+                    set((state) => {
+                        const record = state.sessionAbortFlags.get(sessionId);
+                        if (!record || record.acknowledged) {
+                            return state;
+                        }
+
+                        const nextAbortFlags = new Map(state.sessionAbortFlags);
+                        nextAbortFlags.set(sessionId, { ...record, acknowledged: true });
+                        return { sessionAbortFlags: nextAbortFlags } as Partial<MessageState>;
+                    });
+                },
+
+                updateViewportAnchor: (sessionId: string, anchor: number) => {
+                    set((state) => {
+                        const memoryState = state.sessionMemoryState.get(sessionId) || {
+                            viewportAnchor: 0,
+                            isStreaming: false,
+                            lastAccessedAt: Date.now(),
+                            backgroundMessageCount: 0,
+                        };
+
+                        const newMemoryState = new Map(state.sessionMemoryState);
+                        newMemoryState.set(sessionId, { ...memoryState, viewportAnchor: anchor });
+                        return { sessionMemoryState: newMemoryState };
+                    });
+                },
+
+                trimToViewportWindow: (sessionId: string, targetSize: number = MEMORY_LIMITS.VIEWPORT_MESSAGES, currentSessionId?: string) => {
+                    const state = get();
+                    const sessionMessages = state.messages.get(sessionId);
+                    if (!sessionMessages || sessionMessages.length <= targetSize) {
+                        return;
+                    }
+
+                    const memoryState = state.sessionMemoryState.get(sessionId) || {
+                        viewportAnchor: sessionMessages.length - 1,
+                        isStreaming: false,
+                        lastAccessedAt: Date.now(),
+                        backgroundMessageCount: 0,
+                    };
+
+                    if (memoryState.isStreaming && sessionId === currentSessionId) {
+                        return;
+                    }
+
+                    const anchor = memoryState.viewportAnchor || sessionMessages.length - 1;
+                    let start = Math.max(0, anchor - Math.floor(targetSize / 2));
+                    const end = Math.min(sessionMessages.length, start + targetSize);
+
+                    if (end === sessionMessages.length && end - start < targetSize) {
+                        start = Math.max(0, end - targetSize);
+                    }
+
+                    const trimmedMessages = sessionMessages.slice(start, end);
+                    const removedOlder = sessionMessages.slice(0, start);
+                    const trimmedIds = new Set(trimmedMessages.map((message) => message.info.id));
+                    const removedIds = sessionMessages
+                        .filter((message) => !trimmedIds.has(message.info.id))
+                        .map((message) => message.info.id);
+
+                    set((state) => {
+                        const newMessages = new Map(state.messages);
+                        newMessages.set(sessionId, trimmedMessages);
+
+                        const newMemoryState = new Map(state.sessionMemoryState);
+                        const updatedMemoryState = {
+                            ...memoryState,
+                            viewportAnchor: anchor - start,
+                            trimmedHeadMaxId: computeMaxTrimmedHeadId(removedOlder, memoryState.trimmedHeadMaxId),
+                        };
+                        newMemoryState.set(sessionId, updatedMemoryState);
+
+                        const result: Record<string, any> = {
+                            messages: newMessages,
+                            sessionMemoryState: newMemoryState,
+                        };
+
+                        clearLifecycleTimersForIds(removedIds);
+                        const updatedLifecycle = removeLifecycleEntries(state.messageStreamStates, removedIds);
+                        if (updatedLifecycle !== state.messageStreamStates) {
+                            result.messageStreamStates = updatedLifecycle;
+                        }
+
+                        if (removedIds.length > 0) {
+                            const currentStreaming = state.streamingMessageIds.get(sessionId);
+                            if (currentStreaming && removedIds.includes(currentStreaming)) {
+                                result.streamingMessageIds = setStreamingIdForSession(
+                                    result.streamingMessageIds ?? state.streamingMessageIds,
+                                    sessionId,
+                                    null
+                                );
+                            }
+                        }
+
+                        if (removedIds.length > 0) {
+                            const nextIndex = removeMessageSessionIndexEntries(
+                                result.messageSessionIndex ?? state.messageSessionIndex,
+                                removedIds
+                            );
+                            if (nextIndex !== (result.messageSessionIndex ?? state.messageSessionIndex)) {
+                                result.messageSessionIndex = nextIndex;
+                            }
+                        }
+
+                        const targetIndex = result.messageSessionIndex ?? state.messageSessionIndex;
+                        let indexAccumulator = targetIndex;
+                        trimmedMessages.forEach((message) => {
+                            const id = (message?.info as { id?: unknown })?.id;
+                            if (typeof id === "string" && id.length > 0) {
+                                indexAccumulator = upsertMessageSessionIndex(indexAccumulator, id, sessionId);
+                            }
+                        });
+                        if (indexAccumulator !== targetIndex) {
+                            result.messageSessionIndex = indexAccumulator;
+                        }
+
+                        return result;
+                    });
+                },
+
+                evictLeastRecentlyUsed: (currentSessionId?: string) => {
+                    const state = get();
+                    const sessionCount = state.messages.size;
+
+                    if (sessionCount <= MEMORY_LIMITS.MAX_SESSIONS) return;
+
+                    const sessionsWithMemory: Array<[string, SessionMemoryState]> = [];
+                    state.messages.forEach((_, sessionId) => {
+                        const memoryState = state.sessionMemoryState.get(sessionId) || {
+                            viewportAnchor: 0,
+                            isStreaming: false,
+                            lastAccessedAt: 0,
+                            backgroundMessageCount: 0,
+                        };
+                        sessionsWithMemory.push([sessionId, memoryState]);
+                    });
+
+                    const evictable = sessionsWithMemory.filter(([id, memState]) => id !== currentSessionId && !memState.isStreaming);
+
+                    if (evictable.length === 0) return;
+
+                    evictable.sort((a, b) => a[1].lastAccessedAt - b[1].lastAccessedAt);
+                    const lruSessionId = evictable[0][0];
+
+                    set((state) => {
+                        const removedMessages = state.messages.get(lruSessionId) || [];
+                        const removedIds = removedMessages.map((message) => message.info.id);
+
+                        const newMessages = new Map(state.messages);
+                        const newMemoryState = new Map(state.sessionMemoryState);
+
+                        newMessages.delete(lruSessionId);
+                        newMemoryState.delete(lruSessionId);
+
+                        const result: Record<string, any> = {
+                            messages: newMessages,
+                            sessionMemoryState: newMemoryState,
+                        };
+
+                        const nextPendingParts = new Map(state.pendingAssistantParts);
+                        let pendingChanged = false;
+                        nextPendingParts.forEach((entry, messageId) => {
+                            if (entry.sessionId === lruSessionId) {
+                                nextPendingParts.delete(messageId);
+                                pendingChanged = true;
+                            }
+                        });
+                        if (pendingChanged) {
+                            result.pendingAssistantParts = nextPendingParts;
+                        }
+
+                        const nextCompaction = new Map(state.sessionCompactionUntil);
+                        if (nextCompaction.delete(lruSessionId)) {
+                            result.sessionCompactionUntil = nextCompaction;
+                        }
+
+                        clearLifecycleTimersForIds(removedIds);
+                        const updatedLifecycle = removeLifecycleEntries(state.messageStreamStates, removedIds);
+                        if (updatedLifecycle !== state.messageStreamStates) {
+                            result.messageStreamStates = updatedLifecycle;
+                        }
+
+                        const nextIndex = removeMessageSessionIndexEntries(
+                            result.messageSessionIndex ?? state.messageSessionIndex,
+                            removedIds
+                        );
+                        if (nextIndex !== (result.messageSessionIndex ?? state.messageSessionIndex)) {
+                            result.messageSessionIndex = nextIndex;
+                        }
+
+                        const nextStreamingIds = setStreamingIdForSession(state.streamingMessageIds, lruSessionId, null);
+                        if (nextStreamingIds !== state.streamingMessageIds) {
+                            result.streamingMessageIds = nextStreamingIds;
+                        }
+
+                        if (state.abortControllers.has(lruSessionId)) {
+                            const nextControllers = new Map(state.abortControllers);
+                            nextControllers.delete(lruSessionId);
+                            result.abortControllers = nextControllers;
+                        }
+
+                        return result;
+                    });
+                },
+
+                loadMoreMessages: async (sessionId: string, direction: "up" | "down" = "up") => {
+                    const state = get();
+                    const currentMessages = state.messages.get(sessionId);
+                    const memoryState = state.sessionMemoryState.get(sessionId);
+
+                    if (!currentMessages || !memoryState) {
+                        return;
+                    }
+
+                    if (memoryState.totalAvailableMessages && currentMessages.length >= memoryState.totalAvailableMessages) {
+                        return;
+                    }
+
+                        const allMessages = await executeWithSessionDirectory(sessionId, () => opencodeClient.getSessionMessages(sessionId));
+
+                        if (direction === "up" && currentMessages.length > 0) {
+
+                            const firstCurrentMessage = currentMessages[0];
+                            const indexInAll = allMessages.findIndex((m) => m.info.id === firstCurrentMessage.info.id);
+
+                            if (indexInAll > 0) {
+
+                                const loadCount = Math.min(MEMORY_LIMITS.VIEWPORT_MESSAGES, indexInAll);
+                                const newMessages = allMessages.slice(indexInAll - loadCount, indexInAll);
+
+                                set((state) => {
+                                    const updatedMessages = [...newMessages, ...currentMessages];
+                                    const newMessagesMap = new Map(state.messages);
+                                    newMessagesMap.set(sessionId, updatedMessages);
+
+                                    const newMemoryState = new Map(state.sessionMemoryState);
+                                    newMemoryState.set(sessionId, {
+                                        ...memoryState,
+                                        viewportAnchor: memoryState.viewportAnchor + newMessages.length,
+                                        hasMoreAbove: indexInAll - loadCount > 0,
+                                        totalAvailableMessages: allMessages.length,
+                                    });
+
+                                    return {
+                                        messages: newMessagesMap,
+                                        sessionMemoryState: newMemoryState,
+                                    };
+                                });
+                            } else if (indexInAll === 0) {
+
+                                set((state) => {
+                                    const newMemoryState = new Map(state.sessionMemoryState);
+                                    newMemoryState.set(sessionId, {
+                                        ...memoryState,
+                                        hasMoreAbove: false,
+                                    });
+                                    return { sessionMemoryState: newMemoryState };
+                                });
+                            }
+                        }
+                },
+
+                getLastMessageModel: (sessionId: string) => {
+                    const { messages } = get();
+                    const sessionMessages = messages.get(sessionId);
+
+                    if (!sessionMessages || sessionMessages.length === 0) {
+                        return null;
+                    }
+
+                    for (let i = sessionMessages.length - 1; i >= 0; i--) {
+                        const message = sessionMessages[i];
+                        if (message.info.role === "assistant" && "providerID" in message.info && "modelID" in message.info) {
+                            return {
+                                providerID: (message.info as any).providerID,
+                                modelID: (message.info as any).modelID,
+                            };
+                        }
+                    }
+
+                    return null;
+                },
+            }),
+            {
+                name: "message-store",
+                storage: createJSONStorage(() => getSafeStorage()),
+                partialize: (state: MessageStore) => ({
+                    lastUsedProvider: state.lastUsedProvider,
+                    sessionMemoryState: Array.from(state.sessionMemoryState.entries()).map(([sessionId, memory]) => [
+                        sessionId,
+                        {
+                            viewportAnchor: memory.viewportAnchor,
+                            isStreaming: memory.isStreaming,
+                            lastAccessedAt: memory.lastAccessedAt,
+                            backgroundMessageCount: memory.backgroundMessageCount,
+                            totalAvailableMessages: memory.totalAvailableMessages,
+                            hasMoreAbove: memory.hasMoreAbove,
+                            trimmedHeadMaxId: memory.trimmedHeadMaxId,
+                        },
+                    ]),
+                    sessionAbortFlags: Array.from(state.sessionAbortFlags.entries()).map(([sessionId, record]) => [
+                        sessionId,
+                        { timestamp: record.timestamp, acknowledged: record.acknowledged },
+                    ]),
+                }),
+                merge: (persistedState: any, currentState: MessageStore): MessageStore => {
+                    if (!persistedState) {
+                        return currentState;
+                    }
+
+                    let restoredMemoryState = currentState.sessionMemoryState;
+                    if (Array.isArray(persistedState.sessionMemoryState)) {
+                        restoredMemoryState = new Map<string, SessionMemoryState>(
+                            persistedState.sessionMemoryState.map((entry: [string, SessionMemoryState]) => entry)
+                        );
+                    }
+
+                    let restoredAbortFlags = currentState.sessionAbortFlags;
+                    if (Array.isArray(persistedState.sessionAbortFlags)) {
+                        restoredAbortFlags = new Map<string, SessionAbortRecord>(persistedState.sessionAbortFlags);
+                    }
+
+                    return {
+                        ...currentState,
+                        lastUsedProvider: persistedState.lastUsedProvider ?? currentState.lastUsedProvider,
+                        sessionMemoryState: restoredMemoryState,
+                        sessionAbortFlags: restoredAbortFlags,
+                    };
+                },
+            }
+        ),
+        {
+            name: "message-store",
+        }
+    )
+);
diff --git a/packages/ui/src/stores/permissionStore.ts b/packages/ui/src/stores/permissionStore.ts
new file mode 100644
index 00000000..cee10c22
--- /dev/null
+++ b/packages/ui/src/stores/permissionStore.ts
@@ -0,0 +1,152 @@
+import { create } from "zustand";
+import { devtools, persist, createJSONStorage } from "zustand/middleware";
+import { opencodeClient } from "@/lib/opencode/client";
+import type { Permission, PermissionResponse } from "@/types/permission";
+import { isEditPermissionType, getAgentDefaultEditPermission } from "./utils/permissionUtils";
+import { getSafeStorage } from "./utils/safeStorage";
+import { useMessageStore } from "./messageStore";
+import { useSessionStore } from "./sessionStore";
+
+interface PermissionState {
+    permissions: Map<string, Permission[]>;
+}
+
+interface PermissionActions {
+    addPermission: (permission: Permission, contextData?: { currentAgentContext?: Map<string, string>, sessionAgentSelections?: Map<string, string>, getSessionAgentEditMode?: (sessionId: string, agentName: string | undefined) => string }) => void;
+    respondToPermission: (sessionId: string, permissionId: string, response: PermissionResponse) => Promise<void>;
+}
+
+type PermissionStore = PermissionState & PermissionActions;
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+    typeof value === "object" && value !== null;
+
+const sanitizePermissionEntries = (value: unknown): Array<[string, Permission[]]> => {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    const entries: Array<[string, Permission[]]> = [];
+    value.forEach((entry) => {
+        if (!Array.isArray(entry) || entry.length !== 2) {
+            return;
+        }
+        const [sessionId, permissions] = entry;
+        if (typeof sessionId !== "string" || !Array.isArray(permissions)) {
+            return;
+        }
+        entries.push([sessionId, permissions as Permission[]]);
+    });
+    return entries;
+};
+
+const executeWithPermissionDirectory = async <T>(sessionId: string, operation: () => Promise<T>): Promise<T> => {
+    try {
+        const sessionStore = useSessionStore.getState();
+        const metadata = sessionStore.getWorktreeMetadata(sessionId);
+        if (metadata?.path) {
+            return opencodeClient.withDirectory(metadata.path, operation);
+        }
+
+        const session = sessionStore.sessions.find((entry) => entry.id === sessionId) as { directory?: string } | undefined;
+        const directory =
+            typeof session?.directory === 'string' && session.directory.length > 0 ? session.directory : undefined;
+
+        if (directory) {
+            return opencodeClient.withDirectory(directory, operation);
+        }
+    } catch (error) {
+        console.warn('Failed to resolve session directory for permission handling:', error);
+    }
+    return operation();
+};
+
+export const usePermissionStore = create<PermissionStore>()(
+    devtools(
+        persist(
+            (set, get) => ({
+
+                permissions: new Map(),
+
+                addPermission: (permission: Permission, contextData?: { currentAgentContext?: Map<string, string>, sessionAgentSelections?: Map<string, string>, getSessionAgentEditMode?: (sessionId: string, agentName: string | undefined) => string }) => {
+                    const sessionId = permission.sessionID;
+                    if (!sessionId) {
+                        return;
+                    }
+
+                    const permissionType = permission.type?.toLowerCase?.() ?? null;
+
+                    let agentName = contextData?.currentAgentContext?.get(sessionId);
+                    if (!agentName) {
+                        agentName = contextData?.sessionAgentSelections?.get(sessionId) ?? undefined;
+                    }
+                    if (!agentName) {
+                        if (typeof window !== "undefined") {
+                            const configStore = window.__zustand_config_store__;
+                            if (configStore?.getState) {
+                                agentName = configStore.getState().currentAgentName ?? undefined;
+                            }
+                        }
+                    }
+
+                    const defaultMode = getAgentDefaultEditPermission(agentName);
+                    const effectiveMode = contextData?.getSessionAgentEditMode?.(sessionId, agentName) ?? defaultMode;
+
+                    const shouldAutoApprove = effectiveMode === 'full'
+                        || (effectiveMode === 'allow' && isEditPermissionType(permissionType));
+
+                    if (shouldAutoApprove) {
+                        get().respondToPermission(sessionId, permission.id, 'once').catch(() => {
+
+                        });
+                        return;
+                    }
+
+                    set((state) => {
+                        const sessionPermissions = state.permissions.get(sessionId) || [];
+                        const newPermissions = new Map(state.permissions);
+                        newPermissions.set(sessionId, [...sessionPermissions, permission]);
+                        return { permissions: newPermissions };
+                    });
+                },
+
+                respondToPermission: async (sessionId: string, permissionId: string, response: PermissionResponse) => {
+                    await executeWithPermissionDirectory(sessionId, () => opencodeClient.respondToPermission(sessionId, permissionId, response));
+
+                    if (response === 'reject') {
+                        const messageStore = useMessageStore.getState();
+
+                        await messageStore.abortCurrentOperation(sessionId);
+                    }
+
+                    set((state) => {
+                        const sessionPermissions = state.permissions.get(sessionId) || [];
+                        const updatedPermissions = sessionPermissions.filter((p) => p.id !== permissionId);
+                        const newPermissions = new Map(state.permissions);
+                        newPermissions.set(sessionId, updatedPermissions);
+                        return { permissions: newPermissions };
+                    });
+                },
+            }),
+            {
+                name: "permission-store",
+                storage: createJSONStorage(() => getSafeStorage()),
+                partialize: (state) => ({
+                    permissions: Array.from(state.permissions.entries()),
+                }),
+                merge: (persistedState, currentState) => {
+                    if (!isRecord(persistedState)) {
+                        return currentState;
+                    }
+                    const entries = sanitizePermissionEntries(persistedState.permissions);
+                    return {
+                        ...currentState,
+                        permissions: new Map(entries),
+                    };
+                },
+            }
+        ),
+        {
+            name: "permission-store",
+        }
+    )
+);
diff --git a/packages/ui/src/stores/sessionStore.ts b/packages/ui/src/stores/sessionStore.ts
new file mode 100644
index 00000000..1fa27397
--- /dev/null
+++ b/packages/ui/src/stores/sessionStore.ts
@@ -0,0 +1,1058 @@
+import { create } from "zustand";
+import { devtools, persist, createJSONStorage } from "zustand/middleware";
+import type { Session } from "@opencode-ai/sdk";
+import { opencodeClient } from "@/lib/opencode/client";
+import { getSafeStorage } from "./utils/safeStorage";
+import type { WorktreeMetadata } from "@/types/worktree";
+import { archiveWorktree, getWorktreeStatus, listWorktrees, mapWorktreeToMetadata } from "@/lib/git/worktreeService";
+import { useDirectoryStore } from "./useDirectoryStore";
+import { checkIsGitRepository } from "@/lib/gitApi";
+
+interface SessionState {
+    sessions: Session[];
+    currentSessionId: string | null;
+    lastLoadedDirectory: string | null;
+    isLoading: boolean;
+    error: string | null;
+    webUICreatedSessions: Set<string>;
+    worktreeMetadata: Map<string, WorktreeMetadata>;
+    availableWorktrees: WorktreeMetadata[];
+}
+
+interface SessionActions {
+    loadSessions: () => Promise<void>;
+    createSession: (title?: string, directoryOverride?: string | null) => Promise<Session | null>;
+    deleteSession: (id: string, options?: { archiveWorktree?: boolean; deleteRemoteBranch?: boolean; remoteName?: string }) => Promise<boolean>;
+    deleteSessions: (ids: string[], options?: { archiveWorktree?: boolean; deleteRemoteBranch?: boolean; remoteName?: string }) => Promise<{ deletedIds: string[]; failedIds: string[] }>;
+    updateSessionTitle: (id: string, title: string) => Promise<void>;
+    shareSession: (id: string) => Promise<Session | null>;
+    unshareSession: (id: string) => Promise<Session | null>;
+    setCurrentSession: (id: string | null) => void;
+    clearError: () => void;
+    getSessionsByDirectory: (directory: string) => Session[];
+    applySessionMetadata: (sessionId: string, metadata: Partial<Session>) => void;
+    isOpenChamberCreatedSession: (sessionId: string) => boolean;
+    markSessionAsOpenChamberCreated: (sessionId: string) => void;
+    initializeNewOpenChamberSession: (sessionId: string, agents: Record<string, unknown>[]) => void;
+    setWorktreeMetadata: (sessionId: string, metadata: WorktreeMetadata | null) => void;
+    getWorktreeMetadata: (sessionId: string) => WorktreeMetadata | undefined;
+    setSessionDirectory: (sessionId: string, directory: string | null) => void;
+    updateSession: (session: Session) => void;
+}
+
+type SessionStore = SessionState & SessionActions;
+
+const safeStorage = getSafeStorage();
+const SESSION_SELECTION_STORAGE_KEY = "oc.sessionSelectionByDirectory";
+const WORKTREE_ROOT = ".openchamber";
+
+type SessionSelectionMap = Record<string, string>;
+
+const readSessionSelectionMap = (): SessionSelectionMap => {
+    try {
+        const raw = safeStorage.getItem(SESSION_SELECTION_STORAGE_KEY);
+        if (!raw) {
+            return {};
+        }
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== "object") {
+            return {};
+        }
+        return Object.entries(parsed as Record<string, unknown>).reduce<SessionSelectionMap>((acc, [directory, sessionId]) => {
+            if (typeof directory === "string" && typeof sessionId === "string" && directory.length > 0 && sessionId.length > 0) {
+                acc[directory] = sessionId;
+            }
+            return acc;
+        }, {});
+    } catch {
+        return {};
+    }
+};
+
+let sessionSelectionCache: SessionSelectionMap | null = null;
+
+const getSessionSelectionMap = (): SessionSelectionMap => {
+    if (!sessionSelectionCache) {
+        sessionSelectionCache = readSessionSelectionMap();
+    }
+    return sessionSelectionCache;
+};
+
+const persistSessionSelectionMap = (map: SessionSelectionMap) => {
+    sessionSelectionCache = map;
+    try {
+        safeStorage.setItem(SESSION_SELECTION_STORAGE_KEY, JSON.stringify(map));
+    } catch { /* ignored */ }
+};
+
+const getStoredSessionForDirectory = (directory: string | null | undefined): string | null => {
+    if (!directory) {
+        return null;
+    }
+    const map = getSessionSelectionMap();
+    const selection = map[directory];
+    return typeof selection === "string" ? selection : null;
+};
+
+const storeSessionForDirectory = (directory: string | null | undefined, sessionId: string | null) => {
+    if (!directory) {
+        return;
+    }
+    const map = { ...getSessionSelectionMap() };
+    if (sessionId) {
+        map[directory] = sessionId;
+    } else {
+        delete map[directory];
+    }
+    persistSessionSelectionMap(map);
+};
+
+const clearInvalidSessionSelection = (directory: string | null | undefined, validIds: Iterable<string>) => {
+    if (!directory) {
+        return;
+    }
+    const storedSelection = getStoredSessionForDirectory(directory);
+    if (!storedSelection) {
+        return;
+    }
+    const validSet = new Set(validIds);
+    if (!validSet.has(storedSelection)) {
+        const map = { ...getSessionSelectionMap() };
+        delete map[directory];
+        persistSessionSelectionMap(map);
+    }
+};
+
+const archiveSessionWorktree = async (
+    metadata: WorktreeMetadata,
+    options?: { deleteRemoteBranch?: boolean; remoteName?: string }
+) => {
+    const status = metadata.status ?? (await getWorktreeStatus(metadata.path).catch(() => undefined));
+    await archiveWorktree({
+        projectDirectory: metadata.projectDirectory,
+        path: metadata.path,
+        branch: metadata.branch,
+        force: Boolean(status?.isDirty),
+        deleteRemote: Boolean(options?.deleteRemoteBranch),
+        remote: options?.remoteName,
+    });
+};
+
+const normalizePath = (value?: string | null): string | null => {
+    if (typeof value !== "string") {
+        return null;
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return null;
+    }
+    const replaced = trimmed.replace(/\\/g, "/");
+    if (replaced === "/") {
+        return "/";
+    }
+    return replaced.length > 1 ? replaced.replace(/\/+$/, "") : replaced;
+};
+
+const getSessionDirectory = (sessions: Session[], sessionId: string): string | null => {
+    const target = sessions.find((session) => session.id === sessionId);
+    if (!target) {
+        return null;
+    }
+    return normalizePath((target as { directory?: string | null }).directory ?? null);
+};
+
+const hydrateSessionWorktreeMetadata = async (
+    sessions: Session[],
+    projectDirectory: string | null,
+    existingMetadata: Map<string, WorktreeMetadata>
+): Promise<Map<string, WorktreeMetadata> | null> => {
+    const normalizedProject = normalizePath(projectDirectory);
+    if (!normalizedProject || sessions.length === 0) {
+        return null;
+    }
+
+    const sessionsWithDirectory = sessions
+        .map((session) => ({ id: session.id, directory: normalizePath((session as { directory?: string }).directory) }))
+        .filter((entry): entry is { id: string; directory: string } => Boolean(entry.directory));
+
+    if (sessionsWithDirectory.length === 0) {
+        return null;
+    }
+
+    let worktreeEntries;
+    try {
+        worktreeEntries = await listWorktrees(normalizedProject);
+    } catch (error) {
+        console.debug("Failed to hydrate worktree metadata from git worktree list:", error);
+        return null;
+    }
+
+    if (!Array.isArray(worktreeEntries) || worktreeEntries.length === 0) {
+        let mutated = false;
+        const next = new Map(existingMetadata);
+        sessionsWithDirectory.forEach(({ id }) => {
+            if (next.delete(id)) {
+                mutated = true;
+            }
+        });
+        return mutated ? next : null;
+    }
+
+    const worktreeMapByPath = new Map<string, WorktreeMetadata>();
+    worktreeEntries.forEach((info) => {
+        const metadata = mapWorktreeToMetadata(normalizedProject, info);
+        const normalizedPath = normalizePath(metadata.path) ?? metadata.path;
+
+        if (normalizedPath === normalizedProject) {
+            return;
+        }
+
+        worktreeMapByPath.set(normalizedPath, metadata);
+    });
+
+    let mutated = false;
+    const next = new Map(existingMetadata);
+
+    sessionsWithDirectory.forEach(({ id, directory }) => {
+        const metadata = worktreeMapByPath.get(directory);
+        if (!metadata) {
+            if (next.delete(id)) {
+                mutated = true;
+            }
+            return;
+        }
+
+        const previous = next.get(id);
+        if (!previous || previous.path !== metadata.path || previous.branch !== metadata.branch || previous.label !== metadata.label) {
+            next.set(id, metadata);
+            mutated = true;
+        }
+    });
+
+    return mutated ? next : null;
+};
+
+export const useSessionStore = create<SessionStore>()(
+    devtools(
+        persist(
+            (set, get) => ({
+
+                sessions: [],
+                currentSessionId: null,
+                lastLoadedDirectory: null,
+                isLoading: false,
+                error: null,
+                webUICreatedSessions: new Set(),
+                worktreeMetadata: new Map(),
+                availableWorktrees: [],
+
+                loadSessions: async () => {
+                    set({ isLoading: true, error: null });
+                    try {
+                        const directoryStore = useDirectoryStore.getState();
+                        const projectDirectory = directoryStore.currentDirectory ?? opencodeClient.getDirectory() ?? null;
+                        const apiClient = opencodeClient.getApiClient();
+
+                        const fetchSessions = async (directoryParam?: string | null): Promise<Session[]> => {
+                            const response = await apiClient.session.list({
+                                query: directoryParam ? { directory: directoryParam } : undefined,
+                            });
+                            return Array.isArray(response.data) ? response.data : [];
+                        };
+
+                        const normalizedProject = normalizePath(projectDirectory);
+
+                        const isGitRepo = normalizedProject ? await checkIsGitRepository(normalizedProject).catch(() => false) : false;
+
+                        const parentSessions = await fetchSessions(normalizedProject || null);
+
+                        const subdirectorySessions: Session[] = [];
+                        let discoveredWorktrees: WorktreeMetadata[] = [];
+
+                        if (projectDirectory && isGitRepo && normalizedProject) {
+                            const worktreeRoot = `${normalizedProject}/${WORKTREE_ROOT}`;
+                            try {
+                                const candidates = new Set<string>();
+                                if (worktreeRoot) {
+                                    const entries = await opencodeClient.listLocalDirectory(worktreeRoot);
+                                    entries
+                                        .filter((entry) => entry.isDirectory)
+                                        .forEach((entry) => {
+                                            const isAbsolutePath = /^([A-Za-z]:)?\//.test(entry.path);
+                                            const resolvedPath = isAbsolutePath ? entry.path : `${worktreeRoot}/${entry.name}`;
+                                            candidates.add(normalizePath(resolvedPath) ?? resolvedPath);
+                                        });
+                                }
+
+                                const listedWorktrees = await listWorktrees(normalizedProject);
+                                if (Array.isArray(listedWorktrees)) {
+                                    discoveredWorktrees = listedWorktrees
+                                        .map((info) => mapWorktreeToMetadata(normalizedProject, info))
+                                        .filter((meta) => meta.path.includes(`/${WORKTREE_ROOT}/`));
+                                    discoveredWorktrees.forEach((meta) => candidates.add(meta.path));
+                                }
+
+                                if (candidates.size > 0) {
+                                    const results = await Promise.allSettled(
+                                        Array.from(candidates).map((path) => fetchSessions(path))
+                                    );
+                                    results.forEach((result) => {
+                                        if (result.status === "fulfilled" && Array.isArray(result.value)) {
+                                            subdirectorySessions.push(...result.value);
+                                        }
+                                    });
+                                }
+                            } catch {
+
+                                discoveredWorktrees = [];
+                            }
+                        }
+
+                        const validPaths = new Set<string>();
+                        if (normalizedProject) {
+                            validPaths.add(normalizedProject);
+                        }
+                        discoveredWorktrees.forEach((meta) => {
+                            const normalized = normalizePath(meta.path);
+                            if (normalized) {
+                                validPaths.add(normalized);
+                            }
+                        });
+
+                        const mergedSessions = [...parentSessions, ...subdirectorySessions].filter((session) => {
+                            const rawDir = (session as { directory?: string | null }).directory ?? normalizedProject ?? null;
+                            const normalizedDir = normalizePath(rawDir);
+                            if (!normalizedDir) {
+                                return false;
+                            }
+                            return validPaths.has(normalizedDir);
+                        });
+                        const stateSnapshot = get();
+
+                        const previousDirectory = stateSnapshot.lastLoadedDirectory ?? null;
+                        const directoryChanged = projectDirectory !== previousDirectory;
+
+                        let nextSessions = [...mergedSessions];
+                        let nextCurrentId = stateSnapshot.currentSessionId;
+
+                        const ensureSessionPresent = (session: Session) => {
+                            nextSessions = [session, ...nextSessions.filter((item) => item.id !== session.id)];
+                        };
+
+                        if (directoryChanged) {
+                            nextCurrentId = nextSessions.length > 0 ? nextSessions[0].id : null;
+                        } else {
+                            if (nextCurrentId) {
+                                const hasCurrent = nextSessions.some((session) => session.id === nextCurrentId);
+                                if (!hasCurrent) {
+                                    const persistedSession = stateSnapshot.sessions.find((session) => session.id === nextCurrentId);
+
+                                    if (persistedSession) {
+                                        ensureSessionPresent(persistedSession);
+                                    } else {
+                                        try {
+                                            const resolvedSession = await opencodeClient.getSession(nextCurrentId);
+                                            ensureSessionPresent(resolvedSession);
+                                        } catch {
+                                            nextCurrentId = nextSessions.length > 0 ? nextSessions[0].id : null;
+                                        }
+                                    }
+                                }
+                            } else {
+                                nextCurrentId = nextSessions.length > 0 ? nextSessions[0].id : null;
+                            }
+                        }
+
+                        const dedupedSessions = nextSessions.reduce<Session[]>((accumulator, session) => {
+                            if (!accumulator.some((existing) => existing.id === session.id)) {
+                                accumulator.push(session);
+                            }
+                            return accumulator;
+                        }, []);
+
+                        if (nextCurrentId && !dedupedSessions.some((session) => session.id === nextCurrentId)) {
+                            nextCurrentId = dedupedSessions.length > 0 ? dedupedSessions[0].id : null;
+                        }
+
+                        const validSessionIds = new Set(dedupedSessions.map((session) => session.id));
+
+                        if (projectDirectory) {
+                            clearInvalidSessionSelection(projectDirectory, validSessionIds);
+                            const storedSelection = getStoredSessionForDirectory(projectDirectory);
+                            if (storedSelection && validSessionIds.has(storedSelection)) {
+                                nextCurrentId = storedSelection;
+                            }
+                        }
+
+                        let hydratedMetadata: Map<string, WorktreeMetadata> | null = null;
+                        try {
+                            hydratedMetadata = await hydrateSessionWorktreeMetadata(
+                                dedupedSessions,
+                                projectDirectory,
+                                stateSnapshot.worktreeMetadata
+                            );
+                        } catch (metadataError) {
+                            console.debug("Failed to refresh worktree metadata during session load:", metadataError);
+                        }
+
+                        const nextWorktreeMetadata = (() => {
+                            const source = hydratedMetadata ?? stateSnapshot.worktreeMetadata;
+                            if (!directoryChanged || !normalizedProject) {
+                                return source;
+                            }
+
+                            const filtered = new Map<string, WorktreeMetadata>();
+                            source.forEach((meta, key) => {
+                                if (normalizePath(meta.projectDirectory) === normalizedProject) {
+                                    filtered.set(key, meta);
+                                }
+                            });
+                            return filtered;
+                        })();
+
+                        const resolvedDirectoryForCurrent = (() => {
+                            if (!nextCurrentId) {
+                                return normalizedProject ?? null;
+                            }
+                            const metadataPath = nextWorktreeMetadata.get(nextCurrentId)?.path;
+                            if (metadataPath) {
+                                return normalizePath(metadataPath) ?? metadataPath;
+                            }
+                            const sessionDir = getSessionDirectory(dedupedSessions, nextCurrentId);
+                            if (sessionDir) {
+                                return sessionDir;
+                            }
+                            return normalizedProject ?? null;
+                        })();
+
+                        try {
+                            opencodeClient.setDirectory(resolvedDirectoryForCurrent ?? undefined);
+                        } catch (error) {
+                            console.warn("Failed to sync OpenCode directory after session load:", error);
+                        }
+
+                        set({
+                            sessions: dedupedSessions,
+                            currentSessionId: nextCurrentId,
+                            lastLoadedDirectory: projectDirectory,
+                            isLoading: false,
+                            worktreeMetadata: nextWorktreeMetadata,
+                            availableWorktrees: discoveredWorktrees,
+                        });
+
+                        storeSessionForDirectory(resolvedDirectoryForCurrent ?? projectDirectory, nextCurrentId);
+                    } catch (error) {
+                        set({
+                            error: error instanceof Error ? error.message : "Failed to load sessions",
+                            isLoading: false,
+                        });
+                    }
+                },
+
+                createSession: async (title?: string, directoryOverride?: string | null) => {
+                    set({ error: null });
+                    const directoryStore = useDirectoryStore.getState();
+                    const fallbackDirectory = normalizePath(directoryStore.currentDirectory);
+                    const targetDirectory = normalizePath(directoryOverride ?? opencodeClient.getDirectory() ?? fallbackDirectory);
+
+                    const tempId = `temp_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
+                    const previousState = get();
+                    const existingIds = new Set(previousState.sessions.map((s) => s.id));
+                    const optimisticSession: Session = {
+                        id: tempId,
+                        title: title || "New session",
+                        parentID: undefined,
+                        directory: targetDirectory ?? null,
+                        projectID: (previousState.sessions[0] as { projectID?: string })?.projectID ?? "",
+                        version: "0.0.0",
+                        time: {
+                            created: Date.now(),
+                            updated: Date.now(),
+                        },
+                        summary: undefined,
+                        share: undefined,
+                    } as Session;
+
+                    set((state) => ({
+                        sessions: [optimisticSession, ...state.sessions],
+                        currentSessionId: tempId,
+                        webUICreatedSessions: new Set([...state.webUICreatedSessions, tempId]),
+                        isLoading: false,
+                    }));
+
+                    if (targetDirectory) {
+                        try {
+                            opencodeClient.setDirectory(targetDirectory);
+                        } catch (error) {
+                            console.warn("Failed to sync OpenCode directory after session creation:", error);
+                        }
+                    }
+
+                    const replaceOptimistic = (real: Session) => {
+                        set((state) => {
+                            const updatedSessions = state.sessions.map((item) => (item.id === tempId ? real : item));
+                            return {
+                                sessions: updatedSessions,
+                                currentSessionId: real.id,
+                                webUICreatedSessions: new Set([
+                                    ...Array.from(state.webUICreatedSessions).filter((id) => id !== tempId),
+                                    real.id,
+                                ]),
+                            };
+                        });
+                        storeSessionForDirectory(targetDirectory ?? null, real.id);
+                    };
+
+                    const pollForSession = async (): Promise<Session | null> => {
+                        const apiClient = opencodeClient.getApiClient();
+                        const attempts = 20;
+                        for (let attempt = 0; attempt < attempts; attempt += 1) {
+                            try {
+                                const response = await apiClient.session.list({
+                                    query: targetDirectory ? { directory: targetDirectory } : undefined,
+                                });
+                                const list = Array.isArray(response.data) ? response.data : [];
+                                const candidate = list.find((entry) => {
+                                    if (existingIds.has(entry.id)) return false;
+                                    if (title && entry.title && entry.title !== title) return false;
+                                    return true;
+                                });
+                                if (candidate) {
+                                    return candidate as Session;
+                                }
+                            } catch (pollError) {
+                                console.debug("Session poll attempt failed:", pollError);
+                            }
+                            await new Promise((resolve) => setTimeout(resolve, 2000));
+                        }
+                        return null;
+                    };
+
+                    try {
+                        const createRequest = () => opencodeClient.createSession({ title });
+                        let session: Session | null = null;
+
+                        try {
+                            session = targetDirectory
+                                ? await opencodeClient.withDirectory(targetDirectory, createRequest)
+                                : await createRequest();
+                        } catch (creationError) {
+                            console.warn("Direct session create failed or timed out, falling back to polling:", creationError);
+                        }
+
+                        if (!session) {
+                            session = await pollForSession();
+                        }
+
+                        if (session) {
+                            replaceOptimistic(session);
+                            return session;
+                        }
+
+                        set((state) => ({
+                            sessions: state.sessions.filter((s) => s.id !== tempId),
+                            currentSessionId: previousState.currentSessionId,
+                            webUICreatedSessions: new Set(
+                                Array.from(state.webUICreatedSessions).filter((id) => id !== tempId)
+                            ),
+                            isLoading: false,
+                            error: "Failed to create session",
+                        }));
+                        return null;
+                    } catch (error) {
+
+                        set((state) => ({
+                            sessions: state.sessions.filter((s) => s.id !== tempId),
+                            currentSessionId: previousState.currentSessionId,
+                            webUICreatedSessions: new Set(
+                                Array.from(state.webUICreatedSessions).filter((id) => id !== tempId)
+                            ),
+                            isLoading: false,
+                            error: error instanceof Error ? error.message : "Failed to create session",
+                        }));
+                        return null;
+                    }
+                },
+
+                deleteSession: async (id: string, options) => {
+                    set({ isLoading: true, error: null });
+                    const metadata = get().worktreeMetadata.get(id);
+                    const sessionDirectory = getSessionDirectory(get().sessions, id);
+                    const overrideDirectory = metadata?.path ?? sessionDirectory;
+                    let archivedMetadata: WorktreeMetadata | null = null;
+                    try {
+                        if (metadata && options?.archiveWorktree) {
+                            await archiveSessionWorktree(metadata, {
+                                deleteRemoteBranch: options?.deleteRemoteBranch,
+                                remoteName: options?.remoteName,
+                            });
+                            archivedMetadata = metadata;
+                        }
+
+                        const deleteRequest = () => opencodeClient.deleteSession(id);
+                        const success = overrideDirectory
+                            ? await opencodeClient.withDirectory(overrideDirectory, deleteRequest)
+                            : await deleteRequest();
+                        if (!success) {
+                            set((state) => {
+                                const update: Partial<SessionStore> = {
+                                    isLoading: false,
+                                    error: "Failed to delete session",
+                                };
+                                if (archivedMetadata) {
+                                    const nextMetadata = new Map(state.worktreeMetadata);
+                                    nextMetadata.delete(id);
+                                    update.worktreeMetadata = nextMetadata;
+                                }
+                                return update;
+                            });
+                            return false;
+                        }
+
+                        let nextCurrentId: string | null = null;
+                        set((state) => {
+                            const filteredSessions = state.sessions.filter((s) => s.id !== id);
+                            nextCurrentId = state.currentSessionId === id ? null : state.currentSessionId;
+                            const nextMetadata = new Map(state.worktreeMetadata);
+                            nextMetadata.delete(id);
+                            const nextAvailableWorktrees = options?.archiveWorktree && metadata
+                                ? state.availableWorktrees.filter((entry) => normalizePath(entry.path) !== normalizePath(metadata.path))
+                                : state.availableWorktrees;
+                            return {
+                                sessions: filteredSessions,
+                                currentSessionId: nextCurrentId,
+                                isLoading: false,
+                                worktreeMetadata: nextMetadata,
+                                availableWorktrees: nextAvailableWorktrees,
+                            };
+                        });
+
+                        const directoryToStore = overrideDirectory ?? opencodeClient.getDirectory() ?? null;
+                        storeSessionForDirectory(directoryToStore, nextCurrentId);
+
+                        return true;
+                    } catch (error) {
+                        const message = error instanceof Error ? error.message : "Failed to delete session";
+                        if (archivedMetadata) {
+                            set((state) => {
+                                const nextMetadata = new Map(state.worktreeMetadata);
+                                nextMetadata.delete(id);
+                                return {
+                                    worktreeMetadata: nextMetadata,
+                                    error: message,
+                                    isLoading: false,
+                                };
+                            });
+                        } else {
+                            set({
+                                error: message,
+                                isLoading: false,
+                            });
+                        }
+                        return false;
+                    }
+                },
+
+                deleteSessions: async (ids: string[], options) => {
+                    const uniqueIds = Array.from(new Set(ids.filter((id): id is string => typeof id === "string" && id.length > 0)));
+                    if (uniqueIds.length === 0) {
+                        return { deletedIds: [], failedIds: [] };
+                    }
+
+                    set({ isLoading: true, error: null });
+                    const deletedIds: string[] = [];
+                    const failedIds: string[] = [];
+                    const archivedIds = new Set<string>();
+
+                    const removedWorktrees: Array<{ path: string; projectDirectory: string }> = [];
+                    const archivedWorktreePaths = new Set<string>();
+
+                    for (const id of uniqueIds) {
+                        try {
+                            const metadata = get().worktreeMetadata.get(id);
+                            const sessionDirectory = getSessionDirectory(get().sessions, id);
+                            const overrideDirectory = metadata?.path ?? sessionDirectory;
+                            if (metadata && options?.archiveWorktree && !archivedWorktreePaths.has(metadata.path)) {
+                                await archiveSessionWorktree(metadata, {
+                                    deleteRemoteBranch: options?.deleteRemoteBranch,
+                                    remoteName: options?.remoteName,
+                                });
+                                archivedIds.add(id);
+                                removedWorktrees.push({ path: metadata.path, projectDirectory: metadata.projectDirectory });
+                                archivedWorktreePaths.add(metadata.path);
+                            }
+
+                            const deleteRequest = () => opencodeClient.deleteSession(id);
+                            const success = overrideDirectory
+                                ? await opencodeClient.withDirectory(overrideDirectory, deleteRequest)
+                                : await deleteRequest();
+                            if (success) {
+                                deletedIds.push(id);
+                                if (metadata?.path && !removedWorktrees.some((entry) => entry.path === metadata.path)) {
+                                    removedWorktrees.push({ path: metadata.path, projectDirectory: metadata.projectDirectory });
+                                }
+                            } else {
+                                failedIds.push(id);
+                            }
+                        } catch {
+                            failedIds.push(id);
+                        }
+                    }
+
+                    const directoryStore = useDirectoryStore.getState();
+                    removedWorktrees.forEach(({ path, projectDirectory }) => {
+                        if (directoryStore.currentDirectory === path) {
+                            directoryStore.setDirectory(projectDirectory, { showOverlay: false });
+                        }
+                    });
+
+                    const deletedSet = new Set(deletedIds);
+                    const errorMessage = failedIds.length > 0
+                        ? (failedIds.length === uniqueIds.length ? "Failed to delete sessions" : "Failed to delete some sessions")
+                        : null;
+                    let nextCurrentId: string | null = null;
+
+                    set((state) => {
+                        const filteredSessions = state.sessions.filter((session) => !deletedSet.has(session.id));
+                        if (state.currentSessionId && deletedSet.has(state.currentSessionId)) {
+                            nextCurrentId = filteredSessions.length > 0 ? filteredSessions[0].id : null;
+                        } else {
+                            nextCurrentId = state.currentSessionId;
+                        }
+
+                        const nextMetadata = new Map(state.worktreeMetadata);
+                        for (const removedId of deletedSet) {
+                            nextMetadata.delete(removedId);
+                        }
+                        for (const archivedId of archivedIds) {
+                            nextMetadata.delete(archivedId);
+                        }
+
+                        const removedPaths = new Set(
+                            removedWorktrees
+                                .map((entry) => normalizePath(entry.path))
+                                .filter((p): p is string => Boolean(p))
+                        );
+                        const nextAvailableWorktrees =
+                            removedPaths.size > 0
+                                ? state.availableWorktrees.filter(
+                                      (entry) => !removedPaths.has(normalizePath(entry.path) ?? entry.path)
+                                  )
+                                : state.availableWorktrees;
+
+                        return {
+                            sessions: filteredSessions,
+                            currentSessionId: nextCurrentId,
+                            isLoading: false,
+                            worktreeMetadata: nextMetadata,
+                            availableWorktrees: nextAvailableWorktrees,
+                            error: errorMessage,
+                        };
+                    });
+
+                    const directory = opencodeClient.getDirectory() ?? null;
+                    storeSessionForDirectory(directory, nextCurrentId);
+
+                    return { deletedIds, failedIds };
+                },
+
+                updateSessionTitle: async (id: string, title: string) => {
+                    try {
+                        const sessionDirectory = getSessionDirectory(get().sessions, id);
+                        const metadata = get().worktreeMetadata.get(id);
+                        const updateRequest = () => opencodeClient.updateSession(id, title);
+                        const overrideDirectory = metadata?.path ?? sessionDirectory;
+                        const updatedSession = overrideDirectory
+                            ? await opencodeClient.withDirectory(overrideDirectory, updateRequest)
+                            : await updateRequest();
+                        set((state) => ({
+                            sessions: state.sessions.map((s) => (s.id === id ? updatedSession : s)),
+                        }));
+                    } catch (error) {
+                        set({
+                            error: error instanceof Error ? error.message : "Failed to update session title",
+                        });
+                    }
+                },
+
+                shareSession: async (id: string) => {
+                    try {
+                        const sessionDirectory = getSessionDirectory(get().sessions, id);
+                        const apiClient = opencodeClient.getApiClient();
+                        const metadata = get().worktreeMetadata.get(id);
+                        const overrideDirectory = metadata?.path ?? sessionDirectory;
+                        const shareRequest = async () => {
+                            const directory = sessionDirectory ?? opencodeClient.getDirectory();
+                            return apiClient.session.share({
+                                path: { id },
+                                query: directory ? { directory } : undefined,
+                            });
+                        };
+                        const response = overrideDirectory
+                            ? await opencodeClient.withDirectory(overrideDirectory, shareRequest)
+                            : await shareRequest();
+
+                        if (response.data) {
+                            set((state) => ({
+                                sessions: state.sessions.map((s) => (s.id === id ? response.data : s)),
+                            }));
+                            return response.data;
+                        }
+                        return null;
+                    } catch (error) {
+                        set({
+                            error: error instanceof Error ? error.message : "Failed to share session",
+                        });
+                        return null;
+                    }
+                },
+
+                unshareSession: async (id: string) => {
+                    try {
+                        const sessionDirectory = getSessionDirectory(get().sessions, id);
+                        const apiClient = opencodeClient.getApiClient();
+                        const metadata = get().worktreeMetadata.get(id);
+                        const overrideDirectory = metadata?.path ?? sessionDirectory;
+                        const unshareRequest = async () => {
+                            const directory = sessionDirectory ?? opencodeClient.getDirectory();
+                            return apiClient.session.unshare({
+                                path: { id },
+                                query: directory ? { directory } : undefined,
+                            });
+                        };
+                        const response = overrideDirectory
+                            ? await opencodeClient.withDirectory(overrideDirectory, unshareRequest)
+                            : await unshareRequest();
+
+                        if (response.data) {
+                            set((state) => ({
+                                sessions: state.sessions.map((s) => (s.id === id ? response.data : s)),
+                            }));
+                            return response.data;
+                        }
+                        return null;
+                    } catch (error) {
+                        set({
+                            error: error instanceof Error ? error.message : "Failed to unshare session",
+                        });
+                        return null;
+                    }
+                },
+
+                setCurrentSession: (id: string | null) => {
+                    set({ currentSessionId: id, error: null });
+                    const directory = opencodeClient.getDirectory() ?? null;
+                    storeSessionForDirectory(directory, id);
+                },
+
+                clearError: () => {
+                    set({ error: null });
+                },
+
+                getSessionsByDirectory: () => {
+                    const { sessions } = get();
+                    return sessions;
+                },
+
+                applySessionMetadata: (sessionId, metadata) => {
+                    if (!sessionId || !metadata) {
+                        return;
+                    }
+
+                    set((state) => {
+                        const index = state.sessions.findIndex((session) => session.id === sessionId);
+                        if (index === -1) {
+                            return state;
+                        }
+
+                        const existingSession = state.sessions[index];
+                        const mergedTime = metadata.time
+                            ? { ...existingSession.time, ...metadata.time }
+                            : existingSession.time;
+                        const mergedSummary =
+                            metadata.summary === undefined
+                                ? existingSession.summary
+                                : metadata.summary || undefined;
+                        const mergedShare =
+                            metadata.share === undefined
+                                ? existingSession.share
+                                : metadata.share || undefined;
+
+                        const mergedSession: Session = {
+                            ...existingSession,
+                            ...metadata,
+                            time: mergedTime,
+                            summary: mergedSummary,
+                            share: mergedShare,
+                        };
+
+                        const hasChanged =
+                            mergedSession.title !== existingSession.title ||
+                            mergedSession.parentID !== existingSession.parentID ||
+                            mergedSession.directory !== existingSession.directory ||
+                            mergedSession.version !== existingSession.version ||
+                            mergedSession.projectID !== existingSession.projectID ||
+                            JSON.stringify(mergedSession.time) !== JSON.stringify(existingSession.time) ||
+                            JSON.stringify(mergedSession.summary ?? null) !== JSON.stringify(existingSession.summary ?? null) ||
+                            JSON.stringify(mergedSession.share ?? null) !== JSON.stringify(existingSession.share ?? null);
+
+                        const sessions = [...state.sessions];
+                        sessions[index] = hasChanged ? mergedSession : existingSession;
+
+                        return hasChanged ? ({ sessions } as Partial<SessionStore>) : state;
+                    });
+                },
+
+                isOpenChamberCreatedSession: (sessionId: string) => {
+                    const { webUICreatedSessions } = get();
+                    return webUICreatedSessions.has(sessionId);
+                },
+
+                markSessionAsOpenChamberCreated: (sessionId: string) => {
+                    set((state) => {
+                        const newOpenChamberCreatedSessions = new Set(state.webUICreatedSessions);
+                        newOpenChamberCreatedSessions.add(sessionId);
+                        return {
+                            webUICreatedSessions: newOpenChamberCreatedSessions,
+                        };
+                    });
+                },
+
+                initializeNewOpenChamberSession: (sessionId: string) => {
+                    const { markSessionAsOpenChamberCreated } = get();
+
+                    markSessionAsOpenChamberCreated(sessionId);
+
+                },
+
+                setWorktreeMetadata: (sessionId: string, metadata: WorktreeMetadata | null) => {
+                    if (!sessionId) {
+                        return;
+                    }
+                    set((state) => {
+                        const next = new Map(state.worktreeMetadata);
+                        if (metadata) {
+                            next.set(sessionId, metadata);
+                        } else {
+                            next.delete(sessionId);
+                        }
+                        return { worktreeMetadata: next };
+                    });
+                },
+
+                getWorktreeMetadata: (sessionId: string) => {
+                    if (!sessionId) {
+                        return undefined;
+                    }
+                    return get().worktreeMetadata.get(sessionId);
+                },
+
+                setSessionDirectory: (sessionId: string, directory: string | null) => {
+                    if (!sessionId) {
+                        return;
+                    }
+
+                    const currentSessions = get().sessions;
+                    const targetIndex = currentSessions.findIndex((session) => session.id === sessionId);
+                    if (targetIndex === -1) {
+                        return;
+                    }
+
+                    const existingSession = currentSessions[targetIndex];
+                    const previousDirectory = existingSession.directory ?? null;
+                    const normalizedDirectory = directory ?? undefined;
+
+                    if (previousDirectory === (normalizedDirectory ?? null)) {
+                        return;
+                    }
+
+                    set((state) => {
+                        const sessions = [...state.sessions];
+                        const updatedSession = { ...sessions[targetIndex] } as Record<string, unknown>;
+                        if (normalizedDirectory !== undefined) {
+                            updatedSession.directory = normalizedDirectory;
+                        } else {
+                            delete updatedSession.directory;
+                        }
+                        sessions[targetIndex] = updatedSession as Session;
+                        return { sessions };
+                    });
+
+                    if (previousDirectory) {
+                        storeSessionForDirectory(previousDirectory, null);
+                    }
+                    if (directory) {
+                        storeSessionForDirectory(directory, sessionId);
+                    }
+
+                },
+
+                updateSession: (session: Session) => {
+                    set((state) => ({
+                        sessions: state.sessions.map((s) => (s.id === session.id ? session : s)),
+                    }));
+                },
+            }),
+            {
+                name: "session-store",
+                storage: createJSONStorage(() => getSafeStorage()),
+    partialize: (state) => ({
+        currentSessionId: state.currentSessionId,
+        sessions: state.sessions,
+        lastLoadedDirectory: state.lastLoadedDirectory,
+        webUICreatedSessions: Array.from(state.webUICreatedSessions),
+        worktreeMetadata: Array.from(state.worktreeMetadata.entries()),
+        availableWorktrees: state.availableWorktrees,
+    }),
+    merge: (persistedState, currentState) => {
+        const isRecord = (value: unknown): value is Record<string, unknown> =>
+            typeof value === "object" && value !== null;
+
+        if (!isRecord(persistedState)) {
+            return currentState;
+        }
+
+        const persistedSessions = Array.isArray(persistedState.sessions)
+            ? (persistedState.sessions as Session[])
+            : currentState.sessions;
+
+        const persistedCurrentSessionId =
+            typeof persistedState.currentSessionId === "string" || persistedState.currentSessionId === null
+                ? (persistedState.currentSessionId as string | null)
+                : currentState.currentSessionId;
+
+        const webUiSessionsArray = Array.isArray(persistedState.webUICreatedSessions)
+            ? (persistedState.webUICreatedSessions as string[])
+            : [];
+
+        const persistedWorktreeEntries = Array.isArray(persistedState.worktreeMetadata)
+            ? (persistedState.worktreeMetadata as Array<[string, WorktreeMetadata]>)
+            : [];
+
+        const persistedAvailableWorktrees = Array.isArray(persistedState.availableWorktrees)
+            ? (persistedState.availableWorktrees as WorktreeMetadata[])
+            : currentState.availableWorktrees;
+
+        const lastLoadedDirectory =
+            typeof persistedState.lastLoadedDirectory === "string"
+                ? persistedState.lastLoadedDirectory
+                : currentState.lastLoadedDirectory ?? null;
+
+        return {
+            ...currentState,
+            ...persistedState,
+            sessions: persistedSessions,
+            currentSessionId: persistedCurrentSessionId,
+            webUICreatedSessions: new Set(webUiSessionsArray),
+            worktreeMetadata: new Map(persistedWorktreeEntries),
+            availableWorktrees: persistedAvailableWorktrees,
+            lastLoadedDirectory,
+        };
+    },
+            }
+        ),
+        {
+            name: "session-store",
+        }
+    )
+);
diff --git a/packages/ui/src/stores/types/sessionTypes.ts b/packages/ui/src/stores/types/sessionTypes.ts
new file mode 100644
index 00000000..199d53ad
--- /dev/null
+++ b/packages/ui/src/stores/types/sessionTypes.ts
@@ -0,0 +1,171 @@
+import type { Session, Message, Part } from "@opencode-ai/sdk";
+import type { Permission, PermissionResponse } from "@/types/permission";
+
+export interface AttachedFile {
+    id: string;
+    file: File;
+    dataUrl: string;
+    mimeType: string;
+    filename: string;
+    size: number;
+    source: "local" | "server";
+    serverPath?: string;
+}
+
+export type EditPermissionMode = 'allow' | 'ask' | 'deny' | 'full';
+
+export type MessageStreamPhase = 'streaming' | 'cooldown' | 'completed';
+
+export interface MessageStreamLifecycle {
+    phase: MessageStreamPhase;
+    startedAt: number;
+    lastUpdateAt: number;
+    completedAt?: number;
+}
+
+export interface SessionMemoryState {
+    viewportAnchor: number;
+    isStreaming: boolean;
+    streamStartTime?: number;
+    lastAccessedAt: number;
+    backgroundMessageCount: number;
+    isZombie?: boolean;
+    totalAvailableMessages?: number;
+    hasMoreAbove?: boolean;
+    trimmedHeadMaxId?: string;
+    streamingCooldownUntil?: number;
+}
+
+export interface SessionContextUsage {
+    totalTokens: number;
+    percentage: number;
+    contextLimit: number;
+    outputLimit?: number;
+    normalizedOutput?: number;
+    thresholdLimit: number;
+    lastMessageId?: string;
+}
+
+export const MEMORY_LIMITS = {
+    MAX_SESSIONS: 2,
+    VIEWPORT_MESSAGES: 60,
+    STREAMING_BUFFER: Infinity,
+    BACKGROUND_STREAMING_BUFFER: 100,
+    ZOMBIE_TIMEOUT: 10 * 60 * 1000,
+} as const;
+
+export const ACTIVE_SESSION_WINDOW = 120;
+
+export interface SessionStore {
+
+    sessions: Session[];
+    currentSessionId: string | null;
+    lastLoadedDirectory: string | null;
+    messages: Map<string, { info: Message; parts: Part[] }[]>;
+    sessionMemoryState: Map<string, SessionMemoryState>;
+    messageStreamStates: Map<string, MessageStreamLifecycle>;
+    sessionCompactionUntil: Map<string, number>;
+    permissions: Map<string, Permission[]>;
+    sessionAbortFlags: Map<string, { timestamp: number; acknowledged: boolean }>;
+    attachedFiles: AttachedFile[];
+    abortPromptSessionId: string | null;
+    abortPromptExpiresAt: number | null;
+    isLoading: boolean;
+    error: string | null;
+    streamingMessageIds: Map<string, string | null>;
+    abortControllers: Map<string, AbortController>;
+    lastUsedProvider: { providerID: string; modelID: string } | null;
+    isSyncing: boolean;
+
+    sessionModelSelections: Map<string, { providerId: string; modelId: string }>;
+    sessionAgentSelections: Map<string, string>;
+
+    sessionAgentModelSelections: Map<string, Map<string, { providerId: string; modelId: string }>>;
+
+    webUICreatedSessions: Set<string>;
+    worktreeMetadata: Map<string, import('@/types/worktree').WorktreeMetadata>;
+    availableWorktrees: import('@/types/worktree').WorktreeMetadata[];
+
+    currentAgentContext: Map<string, string>;
+
+    sessionContextUsage: Map<string, SessionContextUsage>;
+
+    sessionAgentEditModes: Map<string, Map<string, EditPermissionMode>>;
+
+    sessionActivityPhase?: Map<string, 'idle' | 'busy' | 'cooldown'>;
+
+    userSummaryTitles: Map<string, { title: string; createdAt: number | null }>;
+
+    getSessionAgentEditMode: (sessionId: string, agentName: string | undefined, defaultMode?: EditPermissionMode) => EditPermissionMode;
+    toggleSessionAgentEditMode: (sessionId: string, agentName: string | undefined, defaultMode?: EditPermissionMode) => void;
+    setSessionAgentEditMode: (sessionId: string, agentName: string | undefined, mode: EditPermissionMode, defaultMode?: EditPermissionMode) => void;
+    loadSessions: () => Promise<void>;
+    createSession: (title?: string, directoryOverride?: string | null) => Promise<Session | null>;
+
+    deleteSession: (id: string, options?: { archiveWorktree?: boolean; deleteRemoteBranch?: boolean; remoteName?: string }) => Promise<boolean>;
+    deleteSessions: (ids: string[], options?: { archiveWorktree?: boolean; deleteRemoteBranch?: boolean; remoteName?: string }) => Promise<{ deletedIds: string[]; failedIds: string[] }>;
+    updateSessionTitle: (id: string, title: string) => Promise<void>;
+    shareSession: (id: string) => Promise<Session | null>;
+    unshareSession: (id: string) => Promise<Session | null>;
+    setCurrentSession: (id: string | null) => void;
+    loadMessages: (sessionId: string) => Promise<void>;
+    sendMessage: (content: string, providerID: string, modelID: string, agent?: string, attachments?: AttachedFile[], agentMentionName?: string) => Promise<void>;
+    abortCurrentOperation: () => Promise<void>;
+    acknowledgeSessionAbort: (sessionId: string) => void;
+    armAbortPrompt: (durationMs?: number) => number | null;
+    clearAbortPrompt: () => void;
+    addStreamingPart: (sessionId: string, messageId: string, part: Part, role?: string) => void;
+    completeStreamingMessage: (sessionId: string, messageId: string) => void;
+    markMessageStreamSettled: (messageId: string) => void;
+    updateMessageInfo: (sessionId: string, messageId: string, messageInfo: Message) => void;
+    updateSessionCompaction: (sessionId: string, compactingTimestamp?: number | null) => void;
+    addPermission: (permission: Permission) => void;
+    respondToPermission: (sessionId: string, permissionId: string, response: PermissionResponse) => Promise<void>;
+    clearError: () => void;
+    getSessionsByDirectory: (directory: string) => Session[];
+    getLastMessageModel: (sessionId: string) => { providerID?: string; modelID?: string } | null;
+    getCurrentAgent: (sessionId: string) => string | undefined;
+    syncMessages: (sessionId: string, messages: { info: Message; parts: Part[] }[]) => void;
+    applySessionMetadata: (sessionId: string, metadata: Partial<Session>) => void;
+    setSessionDirectory: (sessionId: string, directory: string | null) => void;
+
+    addAttachedFile: (file: File) => Promise<void>;
+    addServerFile: (path: string, name: string, content?: string) => Promise<void>;
+    removeAttachedFile: (id: string) => void;
+    clearAttachedFiles: () => void;
+
+    updateViewportAnchor: (sessionId: string, anchor: number) => void;
+    trimToViewportWindow: (sessionId: string, targetSize?: number) => void;
+    evictLeastRecentlyUsed: () => void;
+    loadMoreMessages: (sessionId: string, direction: "up" | "down") => Promise<void>;
+
+    saveSessionModelSelection: (sessionId: string, providerId: string, modelId: string) => void;
+    getSessionModelSelection: (sessionId: string) => { providerId: string; modelId: string } | null;
+    saveSessionAgentSelection: (sessionId: string, agentName: string) => void;
+    getSessionAgentSelection: (sessionId: string) => string | null;
+
+    saveAgentModelForSession: (sessionId: string, agentName: string, providerId: string, modelId: string) => void;
+    getAgentModelForSession: (sessionId: string, agentName: string) => { providerId: string; modelId: string } | null;
+
+    analyzeAndSaveExternalSessionChoices: (sessionId: string, agents: Array<{ name: string; [key: string]: unknown }>) => Promise<Map<string, { providerId: string; modelId: string; timestamp: number }>>;
+
+    isOpenChamberCreatedSession: (sessionId: string) => boolean;
+
+    markSessionAsOpenChamberCreated: (sessionId: string) => void;
+
+    initializeNewOpenChamberSession: (sessionId: string, agents: Array<{ name: string; [key: string]: unknown }>) => void;
+
+    setWorktreeMetadata: (sessionId: string, metadata: import('@/types/worktree').WorktreeMetadata | null) => void;
+    getWorktreeMetadata: (sessionId: string) => import('@/types/worktree').WorktreeMetadata | undefined;
+
+    getContextUsage: (contextLimit: number, outputLimit: number) => SessionContextUsage | null;
+
+    updateSessionContextUsage: (sessionId: string, contextLimit: number, outputLimit: number) => void;
+
+    initializeSessionContextUsage: (sessionId: string, contextLimit: number, outputLimit: number) => void;
+
+     debugSessionMessages: (sessionId: string) => Promise<void>;
+
+     pollForTokenUpdates: (sessionId: string, messageId: string, maxAttempts?: number) => void;
+     updateSession: (session: Session) => void;
+ }
diff --git a/packages/ui/src/stores/useAgentsStore.ts b/packages/ui/src/stores/useAgentsStore.ts
new file mode 100644
index 00000000..9f5b35c1
--- /dev/null
+++ b/packages/ui/src/stores/useAgentsStore.ts
@@ -0,0 +1,417 @@
+import { create } from "zustand";
+import type { StoreApi, UseBoundStore } from "zustand";
+import { devtools, persist, createJSONStorage } from "zustand/middleware";
+import type { Agent } from "@opencode-ai/sdk";
+import { opencodeClient } from "@/lib/opencode/client";
+import { emitConfigChange, scopeMatches, subscribeToConfigChanges } from "@/lib/configSync";
+import {
+  startConfigUpdate,
+  finishConfigUpdate,
+  updateConfigUpdateMessage,
+} from "@/lib/configUpdate";
+import { getSafeStorage } from "./utils/safeStorage";
+import { useConfigStore } from "@/stores/useConfigStore";
+
+export interface AgentConfig {
+  name: string;
+  description?: string;
+  model?: string | null;
+  temperature?: number;
+  top_p?: number;
+  prompt?: string;
+  mode?: "primary" | "subagent" | "all";
+  tools?: Record<string, boolean>;
+  permission?: {
+     edit?: "allow" | "ask" | "deny" | "full";
+     bash?: "allow" | "ask" | "deny" | Record<string, "allow" | "ask" | "deny">;
+     webfetch?: "allow" | "ask" | "deny";
+   };
+
+  disable?: boolean;
+}
+
+const CONFIG_EVENT_SOURCE = "useAgentsStore";
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+const MAX_HEALTH_WAIT_MS = 20000;
+const FAST_HEALTH_POLL_INTERVAL_MS = 300;
+const FAST_HEALTH_POLL_ATTEMPTS = 4;
+const SLOW_HEALTH_POLL_BASE_MS = 800;
+const SLOW_HEALTH_POLL_INCREMENT_MS = 200;
+const SLOW_HEALTH_POLL_MAX_MS = 2000;
+
+interface AgentsStore {
+
+  selectedAgentName: string | null;
+  agents: Agent[];
+  isLoading: boolean;
+
+  setSelectedAgent: (name: string | null) => void;
+  loadAgents: () => Promise<boolean>;
+  createAgent: (config: AgentConfig) => Promise<boolean>;
+  updateAgent: (name: string, config: Partial<AgentConfig>) => Promise<boolean>;
+  deleteAgent: (name: string) => Promise<boolean>;
+  getAgentByName: (name: string) => Agent | undefined;
+}
+
+declare global {
+  interface Window {
+    __zustand_agents_store__?: UseBoundStore<StoreApi<AgentsStore>>;
+  }
+}
+
+export const useAgentsStore = create<AgentsStore>()(
+  devtools(
+    persist(
+      (set, get) => ({
+
+        selectedAgentName: null,
+        agents: [],
+        isLoading: false,
+
+        setSelectedAgent: (name: string | null) => {
+          set({ selectedAgentName: name });
+        },
+
+        loadAgents: async () => {
+          set({ isLoading: true });
+          const previousAgents = get().agents;
+          let lastError: unknown = null;
+
+          for (let attempt = 0; attempt < 3; attempt++) {
+            try {
+              const agents = await opencodeClient.listAgents();
+              set({ agents, isLoading: false });
+              return true;
+            } catch (error) {
+              lastError = error;
+              const waitMs = 200 * (attempt + 1);
+              await new Promise((resolve) => setTimeout(resolve, waitMs));
+            }
+          }
+
+          console.error("Failed to load agents:", lastError);
+          set({ agents: previousAgents, isLoading: false });
+          return false;
+        },
+
+        createAgent: async (config: AgentConfig) => {
+          startConfigUpdate("Creating agent configuration…");
+          let requiresReload = false;
+          try {
+            console.log('[AgentsStore] Creating agent:', config.name);
+
+            const agentConfig: Record<string, unknown> = {
+              mode: config.mode || "subagent",
+            };
+
+            if (config.description) agentConfig.description = config.description;
+            if (config.model) agentConfig.model = config.model;
+            if (config.temperature !== undefined) agentConfig.temperature = config.temperature;
+            if (config.top_p !== undefined) agentConfig.top_p = config.top_p;
+            if (config.prompt) agentConfig.prompt = config.prompt;
+            if (config.tools && Object.keys(config.tools).length > 0) agentConfig.tools = config.tools;
+            if (config.permission) agentConfig.permission = config.permission;
+            if (config.disable !== undefined) agentConfig.disable = config.disable;
+
+            console.log('[AgentsStore] Agent config to save:', agentConfig);
+
+            const response = await fetch(`/api/config/agents/${encodeURIComponent(config.name)}`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(agentConfig)
+            });
+
+            const payload = await response.json().catch(() => null);
+            if (!response.ok) {
+              const message = payload?.error || 'Failed to create agent';
+              throw new Error(message);
+            }
+
+            console.log('[AgentsStore] Agent created successfully');
+
+            const needsReload = payload?.requiresReload ?? true;
+            if (needsReload) {
+              requiresReload = true;
+              await performFullConfigRefresh({
+                message: payload?.message,
+                delayMs: payload?.reloadDelayMs,
+              });
+              return true;
+            }
+
+            const loaded = await get().loadAgents();
+            if (loaded) {
+              emitConfigChange("agents", { source: CONFIG_EVENT_SOURCE });
+            }
+            return loaded;
+          } catch (error) {
+            console.error("[AgentsStore] Failed to create agent:", error);
+            return false;
+          } finally {
+            if (!requiresReload) {
+              finishConfigUpdate();
+            }
+          }
+        },
+
+        updateAgent: async (name: string, config: Partial<AgentConfig>) => {
+          startConfigUpdate("Updating agent configuration…");
+          let requiresReload = false;
+          try {
+            console.log('[AgentsStore] Updating agent:', name);
+            console.log('[AgentsStore] Config received:', config);
+
+            const agentConfig: Record<string, unknown> = {};
+
+            if (config.mode !== undefined) agentConfig.mode = config.mode;
+            if (config.description !== undefined) agentConfig.description = config.description;
+            if (config.model !== undefined) agentConfig.model = config.model;
+            if (config.temperature !== undefined) agentConfig.temperature = config.temperature;
+            if (config.top_p !== undefined) agentConfig.top_p = config.top_p;
+            if (config.prompt !== undefined) agentConfig.prompt = config.prompt;
+            if (config.tools !== undefined) agentConfig.tools = config.tools;
+            if (config.permission !== undefined) agentConfig.permission = config.permission;
+            if (config.disable !== undefined) agentConfig.disable = config.disable;
+
+            console.log('[AgentsStore] Agent config to update:', agentConfig);
+
+            const response = await fetch(`/api/config/agents/${encodeURIComponent(name)}`, {
+              method: 'PATCH',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(agentConfig)
+            });
+
+            const payload = await response.json().catch(() => null);
+            if (!response.ok) {
+              const message = payload?.error || 'Failed to update agent';
+              throw new Error(message);
+            }
+
+            console.log('[AgentsStore] Agent updated successfully');
+
+            const needsReload = payload?.requiresReload ?? true;
+            if (needsReload) {
+              requiresReload = true;
+              await performFullConfigRefresh({
+                message: payload?.message,
+                delayMs: payload?.reloadDelayMs,
+              });
+              return true;
+            }
+
+            const loaded = await get().loadAgents();
+            if (loaded) {
+              emitConfigChange("agents", { source: CONFIG_EVENT_SOURCE });
+            }
+            return loaded;
+          } catch (error) {
+            console.error("[AgentsStore] Failed to update agent:", error);
+            return false;
+          } finally {
+            if (!requiresReload) {
+              finishConfigUpdate();
+            }
+          }
+        },
+
+        deleteAgent: async (name: string) => {
+          startConfigUpdate("Deleting agent configuration…");
+          let requiresReload = false;
+          try {
+            const response = await fetch(`/api/config/agents/${encodeURIComponent(name)}`, {
+              method: 'DELETE'
+            });
+
+            const payload = await response.json().catch(() => null);
+            if (!response.ok) {
+              const message = payload?.error || 'Failed to delete agent';
+              throw new Error(message);
+            }
+
+            console.log('[AgentsStore] Agent deleted successfully');
+
+            const needsReload = payload?.requiresReload ?? true;
+            if (needsReload) {
+              requiresReload = true;
+              await performFullConfigRefresh({
+                message: payload?.message,
+                delayMs: payload?.reloadDelayMs,
+              });
+              return true;
+            }
+
+            const loaded = await get().loadAgents();
+            if (loaded) {
+              emitConfigChange("agents", { source: CONFIG_EVENT_SOURCE });
+            }
+
+            if (get().selectedAgentName === name) {
+              set({ selectedAgentName: null });
+            }
+
+            return loaded;
+          } catch (error) {
+            console.error("Failed to delete agent:", error);
+            return false;
+          } finally {
+            if (!requiresReload) {
+              finishConfigUpdate();
+            }
+          }
+        },
+
+        getAgentByName: (name: string) => {
+          const { agents } = get();
+          return agents.find((a) => a.name === name);
+        },
+      }),
+      {
+        name: "agents-store",
+        storage: createJSONStorage(() => getSafeStorage()),
+        partialize: (state) => ({
+          selectedAgentName: state.selectedAgentName,
+        }),
+      },
+    ),
+    {
+      name: "agents-store",
+    },
+  ),
+);
+
+if (typeof window !== "undefined") {
+  window.__zustand_agents_store__ = useAgentsStore;
+}
+
+async function waitForOpenCodeConnection(delayMs?: number) {
+  const initialPause = typeof delayMs === "number" && delayMs > 0
+    ? Math.min(delayMs, FAST_HEALTH_POLL_INTERVAL_MS)
+    : 0;
+
+  if (initialPause > 0) {
+    await sleep(initialPause);
+  }
+
+  const start = Date.now();
+  let attempt = 0;
+  let lastError: unknown = null;
+
+  while (Date.now() - start < MAX_HEALTH_WAIT_MS) {
+    attempt += 1;
+    updateConfigUpdateMessage(`Waiting for OpenCode… (attempt ${attempt})`);
+
+    try {
+      const isHealthy = await opencodeClient.checkHealth();
+      if (isHealthy) {
+        return;
+      }
+      lastError = new Error("OpenCode health check reported not ready");
+    } catch (error) {
+      lastError = error;
+    }
+
+    const elapsed = Date.now() - start;
+
+    const waitMs =
+      attempt <= FAST_HEALTH_POLL_ATTEMPTS && elapsed < 1200
+        ? FAST_HEALTH_POLL_INTERVAL_MS
+        : Math.min(
+            SLOW_HEALTH_POLL_BASE_MS +
+              Math.max(0, attempt - FAST_HEALTH_POLL_ATTEMPTS) * SLOW_HEALTH_POLL_INCREMENT_MS,
+            SLOW_HEALTH_POLL_MAX_MS,
+          );
+
+    await sleep(waitMs);
+  }
+
+  throw lastError || new Error("OpenCode did not become ready in time");
+}
+
+async function performFullConfigRefresh(options: { message?: string; delayMs?: number } = {}) {
+  const { message, delayMs } = options;
+
+  try {
+    updateConfigUpdateMessage(message || "Reloading OpenCode configuration…");
+    if (typeof window !== "undefined" && window.localStorage) {
+      window.localStorage.removeItem("agents-store");
+      window.localStorage.removeItem("config-store");
+    }
+  } catch (error) {
+    console.warn("[AgentsStore] Failed to prepare config refresh:", error);
+  }
+
+  try {
+    await waitForOpenCodeConnection(delayMs);
+    updateConfigUpdateMessage("Refreshing providers and agents…");
+
+    const configStore = useConfigStore.getState();
+    const agentsStore = useAgentsStore.getState();
+
+    await Promise.all([
+      configStore.loadProviders().then(() => undefined),
+      agentsStore.loadAgents().then(() => undefined),
+    ]);
+
+    emitConfigChange("agents", { source: CONFIG_EVENT_SOURCE });
+  } catch (error) {
+    console.error("[AgentsStore] Failed to refresh configuration after OpenCode restart:", error);
+    updateConfigUpdateMessage("OpenCode reload failed. Please retry refreshing configuration manually.");
+    await sleep(1500);
+  } finally {
+    finishConfigUpdate();
+  }
+}
+
+export async function refreshAfterOpenCodeRestart(options?: { message?: string; delayMs?: number }) {
+  await performFullConfigRefresh(options);
+}
+
+export async function reloadOpenCodeConfiguration(options?: { message?: string; delayMs?: number }) {
+  startConfigUpdate(options?.message || "Reloading OpenCode configuration…");
+
+  try {
+
+    const response = await fetch('/api/config/reload', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    const payload = await response.json().catch(() => null);
+
+    if (!response.ok) {
+      const message = payload?.error || 'Failed to reload configuration';
+      throw new Error(message);
+    }
+
+    if (payload?.requiresReload) {
+      await performFullConfigRefresh({
+        message: payload.message,
+        delayMs: payload.reloadDelayMs,
+      });
+    } else {
+
+      await performFullConfigRefresh(options);
+    }
+  } catch (error) {
+    console.error('[reloadOpenCodeConfiguration] Failed:', error);
+    updateConfigUpdateMessage('Failed to reload configuration. Please try again.');
+    await sleep(2000);
+    finishConfigUpdate();
+    throw error;
+  }
+}
+
+let unsubscribeAgentsConfigChanges: (() => void) | null = null;
+
+if (!unsubscribeAgentsConfigChanges) {
+  unsubscribeAgentsConfigChanges = subscribeToConfigChanges((event) => {
+    if (event.source === CONFIG_EVENT_SOURCE) {
+      return;
+    }
+
+    if (scopeMatches(event, "agents")) {
+      const { loadAgents } = useAgentsStore.getState();
+      void loadAgents();
+    }
+  });
+}
diff --git a/packages/ui/src/stores/useCommandsStore.ts b/packages/ui/src/stores/useCommandsStore.ts
new file mode 100644
index 00000000..387428f2
--- /dev/null
+++ b/packages/ui/src/stores/useCommandsStore.ts
@@ -0,0 +1,397 @@
+import { create } from "zustand";
+import type { StoreApi, UseBoundStore } from "zustand";
+import { devtools, persist, createJSONStorage } from "zustand/middleware";
+import { opencodeClient } from "@/lib/opencode/client";
+import {
+  startConfigUpdate,
+  finishConfigUpdate,
+  updateConfigUpdateMessage,
+} from "@/lib/configUpdate";
+import { emitConfigChange, scopeMatches, subscribeToConfigChanges } from "@/lib/configSync";
+import { getSafeStorage } from "./utils/safeStorage";
+import { useConfigStore } from "@/stores/useConfigStore";
+
+export interface CommandConfig {
+  name: string;
+  description?: string;
+  agent?: string | null;
+  model?: string | null;
+  template?: string;
+  subtask?: boolean;
+}
+
+export interface Command extends CommandConfig {
+  isBuiltIn?: boolean;
+}
+
+const CONFIG_EVENT_SOURCE = "useCommandsStore";
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+const MAX_HEALTH_WAIT_MS = 20000;
+const FAST_HEALTH_POLL_INTERVAL_MS = 300;
+const FAST_HEALTH_POLL_ATTEMPTS = 4;
+const SLOW_HEALTH_POLL_BASE_MS = 800;
+const SLOW_HEALTH_POLL_INCREMENT_MS = 200;
+const SLOW_HEALTH_POLL_MAX_MS = 2000;
+
+interface CommandsStore {
+
+  selectedCommandName: string | null;
+  commands: Command[];
+  isLoading: boolean;
+
+  setSelectedCommand: (name: string | null) => void;
+  loadCommands: () => Promise<boolean>;
+  createCommand: (config: CommandConfig) => Promise<boolean>;
+  updateCommand: (name: string, config: Partial<CommandConfig>) => Promise<boolean>;
+  deleteCommand: (name: string) => Promise<boolean>;
+  getCommandByName: (name: string) => Command | undefined;
+}
+
+declare global {
+  interface Window {
+    __zustand_commands_store__?: UseBoundStore<StoreApi<CommandsStore>>;
+  }
+}
+
+export const useCommandsStore = create<CommandsStore>()(
+  devtools(
+    persist(
+      (set, get) => ({
+
+        selectedCommandName: null,
+        commands: [],
+        isLoading: false,
+
+        setSelectedCommand: (name: string | null) => {
+          set({ selectedCommandName: name });
+        },
+
+        loadCommands: async () => {
+          set({ isLoading: true });
+          const previousCommands = get().commands;
+          let lastError: unknown = null;
+
+          for (let attempt = 0; attempt < 3; attempt++) {
+            try {
+              const commands = await opencodeClient.listCommandsWithDetails();
+              set({ commands, isLoading: false });
+              return true;
+            } catch (error) {
+              lastError = error;
+              const waitMs = 200 * (attempt + 1);
+              await new Promise((resolve) => setTimeout(resolve, waitMs));
+            }
+          }
+
+          console.error("Failed to load commands:", lastError);
+          set({ commands: previousCommands, isLoading: false });
+          return false;
+        },
+
+        createCommand: async (config: CommandConfig) => {
+          startConfigUpdate("Creating command configuration…");
+          let requiresReload = false;
+          try {
+            console.log('[CommandsStore] Creating command:', config.name);
+
+            const commandConfig: Record<string, unknown> = {
+              template: config.template || '',
+            };
+
+            if (config.description) commandConfig.description = config.description;
+            if (config.agent) commandConfig.agent = config.agent;
+            if (config.model) commandConfig.model = config.model;
+            if (config.subtask !== undefined) commandConfig.subtask = config.subtask;
+
+            console.log('[CommandsStore] Command config to save:', commandConfig);
+
+            const response = await fetch(`/api/config/commands/${encodeURIComponent(config.name)}`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(commandConfig)
+            });
+
+            const payload = await response.json().catch(() => null);
+            if (!response.ok) {
+              const message = payload?.error || 'Failed to create command';
+              throw new Error(message);
+            }
+
+            console.log('[CommandsStore] Command created successfully');
+
+            const needsReload = payload?.requiresReload ?? true;
+            if (needsReload) {
+              requiresReload = true;
+              await performFullConfigRefresh({
+                message: payload?.message,
+                delayMs: payload?.reloadDelayMs,
+              });
+              return true;
+            }
+
+            const loaded = await get().loadCommands();
+            if (loaded) {
+              emitConfigChange("commands", { source: CONFIG_EVENT_SOURCE });
+            }
+            return loaded;
+          } catch (error) {
+            console.error("[CommandsStore] Failed to create command:", error);
+            return false;
+          } finally {
+            if (!requiresReload) {
+              finishConfigUpdate();
+            }
+          }
+        },
+
+        updateCommand: async (name: string, config: Partial<CommandConfig>) => {
+          startConfigUpdate("Updating command configuration…");
+          let requiresReload = false;
+          try {
+            console.log('[CommandsStore] Updating command:', name);
+            console.log('[CommandsStore] Config received:', config);
+
+            const commandConfig: Record<string, unknown> = {};
+
+            if (config.description !== undefined) commandConfig.description = config.description;
+            if (config.agent !== undefined) commandConfig.agent = config.agent;
+            if (config.model !== undefined) commandConfig.model = config.model;
+            if (config.template !== undefined) commandConfig.template = config.template;
+            if (config.subtask !== undefined) commandConfig.subtask = config.subtask;
+
+            console.log('[CommandsStore] Command config to update:', commandConfig);
+
+            const response = await fetch(`/api/config/commands/${encodeURIComponent(name)}`, {
+              method: 'PATCH',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(commandConfig)
+            });
+
+            const payload = await response.json().catch(() => null);
+            if (!response.ok) {
+              const message = payload?.error || 'Failed to update command';
+              throw new Error(message);
+            }
+
+            console.log('[CommandsStore] Command updated successfully');
+
+            const needsReload = payload?.requiresReload ?? true;
+            if (needsReload) {
+              requiresReload = true;
+              await performFullConfigRefresh({
+                message: payload?.message,
+                delayMs: payload?.reloadDelayMs,
+              });
+              return true;
+            }
+
+            const loaded = await get().loadCommands();
+            if (loaded) {
+              emitConfigChange("commands", { source: CONFIG_EVENT_SOURCE });
+            }
+            return loaded;
+          } catch (error) {
+            console.error("[CommandsStore] Failed to update command:", error);
+            return false;
+          } finally {
+            if (!requiresReload) {
+              finishConfigUpdate();
+            }
+          }
+        },
+
+        deleteCommand: async (name: string) => {
+          startConfigUpdate("Deleting command configuration…");
+          let requiresReload = false;
+          try {
+            const response = await fetch(`/api/config/commands/${encodeURIComponent(name)}`, {
+              method: 'DELETE'
+            });
+
+            const payload = await response.json().catch(() => null);
+            if (!response.ok) {
+              const message = payload?.error || 'Failed to delete command';
+              throw new Error(message);
+            }
+
+            console.log('[CommandsStore] Command deleted successfully');
+
+            const needsReload = payload?.requiresReload ?? true;
+            if (needsReload) {
+              requiresReload = true;
+              await performFullConfigRefresh({
+                message: payload?.message,
+                delayMs: payload?.reloadDelayMs,
+              });
+              return true;
+            }
+
+            const loaded = await get().loadCommands();
+            if (loaded) {
+              emitConfigChange("commands", { source: CONFIG_EVENT_SOURCE });
+            }
+
+            if (get().selectedCommandName === name) {
+              set({ selectedCommandName: null });
+            }
+
+            return loaded;
+          } catch (error) {
+            console.error("Failed to delete command:", error);
+            return false;
+          } finally {
+            if (!requiresReload) {
+              finishConfigUpdate();
+            }
+          }
+        },
+
+        getCommandByName: (name: string) => {
+          const { commands } = get();
+          return commands.find((c) => c.name === name);
+        },
+      }),
+      {
+        name: "commands-store",
+        storage: createJSONStorage(() => getSafeStorage()),
+        partialize: (state) => ({
+          selectedCommandName: state.selectedCommandName,
+        }),
+      },
+    ),
+    {
+      name: "commands-store",
+    },
+  ),
+);
+
+if (typeof window !== "undefined") {
+  window.__zustand_commands_store__ = useCommandsStore;
+}
+
+async function waitForOpenCodeConnection(delayMs?: number) {
+  const initialPause = typeof delayMs === "number" && delayMs > 0
+    ? Math.min(delayMs, FAST_HEALTH_POLL_INTERVAL_MS)
+    : 0;
+
+  if (initialPause > 0) {
+    await sleep(initialPause);
+  }
+
+  const start = Date.now();
+  let attempt = 0;
+  let lastError: unknown = null;
+
+  while (Date.now() - start < MAX_HEALTH_WAIT_MS) {
+    attempt += 1;
+    updateConfigUpdateMessage(`Waiting for OpenCode… (attempt ${attempt})`);
+
+    try {
+      const isHealthy = await opencodeClient.checkHealth();
+      if (isHealthy) {
+        return;
+      }
+      lastError = new Error("OpenCode health check reported not ready");
+    } catch (error) {
+      lastError = error;
+    }
+
+    const elapsed = Date.now() - start;
+
+    const waitMs =
+      attempt <= FAST_HEALTH_POLL_ATTEMPTS && elapsed < 1200
+        ? FAST_HEALTH_POLL_INTERVAL_MS
+        : Math.min(
+            SLOW_HEALTH_POLL_BASE_MS +
+              Math.max(0, attempt - FAST_HEALTH_POLL_ATTEMPTS) * SLOW_HEALTH_POLL_INCREMENT_MS,
+            SLOW_HEALTH_POLL_MAX_MS,
+          );
+
+    await sleep(waitMs);
+  }
+
+  throw lastError || new Error("OpenCode did not become ready in time");
+}
+
+async function performFullConfigRefresh(options: { message?: string; delayMs?: number } = {}) {
+  const { message, delayMs } = options;
+
+  try {
+    updateConfigUpdateMessage(message || "Reloading OpenCode configuration…");
+    if (typeof window !== "undefined" && window.localStorage) {
+      window.localStorage.removeItem("commands-store");
+      window.localStorage.removeItem("config-store");
+    }
+  } catch (error) {
+    console.warn("[CommandsStore] Failed to prepare config refresh:", error);
+  }
+
+  try {
+    await waitForOpenCodeConnection(delayMs);
+    updateConfigUpdateMessage("Refreshing providers and commands…");
+
+    const configStore = useConfigStore.getState();
+    const commandsStore = useCommandsStore.getState();
+
+    await Promise.all([
+      configStore.loadProviders().then(() => undefined),
+      commandsStore.loadCommands().then(() => undefined),
+    ]);
+
+    emitConfigChange("commands", { source: CONFIG_EVENT_SOURCE });
+  } catch (error) {
+    console.error("[CommandsStore] Failed to refresh configuration after OpenCode restart:", error);
+    updateConfigUpdateMessage("OpenCode reload failed. Please retry refreshing configuration manually.");
+    await sleep(1500);
+  } finally {
+    finishConfigUpdate();
+  }
+}
+
+export async function reloadOpenCodeConfiguration(options?: { message?: string; delayMs?: number }) {
+  startConfigUpdate(options?.message || "Reloading OpenCode configuration…");
+
+  try {
+    const response = await fetch('/api/config/reload', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    const payload = await response.json().catch(() => null);
+
+    if (!response.ok) {
+      const message = payload?.error || 'Failed to reload configuration';
+      throw new Error(message);
+    }
+
+    if (payload?.requiresReload) {
+      await performFullConfigRefresh({
+        message: payload.message,
+        delayMs: payload.reloadDelayMs,
+      });
+    } else {
+      await performFullConfigRefresh(options);
+    }
+  } catch (error) {
+    console.error('[reloadOpenCodeConfiguration] Failed:', error);
+    updateConfigUpdateMessage('Failed to reload configuration. Please try again.');
+    await sleep(2000);
+    finishConfigUpdate();
+    throw error;
+  }
+}
+
+let unsubscribeCommandsConfigChanges: (() => void) | null = null;
+
+if (!unsubscribeCommandsConfigChanges) {
+  unsubscribeCommandsConfigChanges = subscribeToConfigChanges((event) => {
+    if (event.source === CONFIG_EVENT_SOURCE) {
+      return;
+    }
+
+    if (scopeMatches(event, "commands")) {
+      const { loadCommands } = useCommandsStore.getState();
+      void loadCommands();
+    }
+  });
+}
diff --git a/packages/ui/src/stores/useConfigStore.ts b/packages/ui/src/stores/useConfigStore.ts
new file mode 100644
index 00000000..2fef0703
--- /dev/null
+++ b/packages/ui/src/stores/useConfigStore.ts
@@ -0,0 +1,564 @@
+import { create } from "zustand";
+import type { StoreApi, UseBoundStore } from "zustand";
+import { devtools, persist, createJSONStorage } from "zustand/middleware";
+import type { Provider, Agent } from "@opencode-ai/sdk";
+import { opencodeClient } from "@/lib/opencode/client";
+import { scopeMatches, subscribeToConfigChanges } from "@/lib/configSync";
+import type { ModelMetadata } from "@/types";
+import { getSafeStorage } from "./utils/safeStorage";
+import type { SessionStore } from "./types/sessionTypes";
+
+const MODELS_DEV_API_URL = "https://models.dev/api.json";
+const MODELS_DEV_PROXY_URL = "/api/openchamber/models-metadata";
+
+const normalizeProviderId = (value: string) => value?.toLowerCase?.() ?? '';
+
+const isPrimaryMode = (mode?: string) => mode === "primary" || mode === "all" || mode === undefined || mode === null;
+
+type ProviderModel = Provider["models"][string];
+type ProviderWithModelList = Omit<Provider, "models"> & { models: ProviderModel[] };
+
+interface ModelsDevModelEntry {
+    id?: string;
+    name?: string;
+    tool_call?: boolean;
+    reasoning?: boolean;
+    temperature?: boolean;
+    attachment?: boolean;
+    modalities?: {
+        input?: string[];
+        output?: string[];
+    };
+    cost?: {
+        input?: number;
+        output?: number;
+        cache_read?: number;
+        cache_write?: number;
+    };
+    limit?: {
+        context?: number;
+        output?: number;
+    };
+    knowledge?: string;
+    release_date?: string;
+    last_updated?: string;
+}
+
+interface ModelsDevProviderEntry {
+    id?: string;
+    models?: Record<string, ModelsDevModelEntry | undefined>;
+}
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+    typeof value === "object" && value !== null;
+
+const isStringArray = (value: unknown): value is string[] =>
+    Array.isArray(value) && value.every((item) => typeof item === "string");
+
+const isModelsDevModelEntry = (value: unknown): value is ModelsDevModelEntry => {
+    if (!isRecord(value)) {
+        return false;
+    }
+    const candidate = value as ModelsDevModelEntry;
+    if (candidate.modalities) {
+        const { input, output } = candidate.modalities;
+        if (input && !isStringArray(input)) {
+            return false;
+        }
+        if (output && !isStringArray(output)) {
+            return false;
+        }
+    }
+    return true;
+};
+
+const isModelsDevProviderEntry = (value: unknown): value is ModelsDevProviderEntry => {
+    if (!isRecord(value)) {
+        return false;
+    }
+    const candidate = value as ModelsDevProviderEntry;
+    return candidate.models === undefined || isRecord(candidate.models);
+};
+
+const buildModelMetadataKey = (providerId: string, modelId: string) => {
+    const normalizedProvider = normalizeProviderId(providerId);
+    if (!normalizedProvider || !modelId) {
+        return '';
+    }
+    return `${normalizedProvider}/${modelId}`;
+};
+
+const transformModelsDevResponse = (payload: unknown): Map<string, ModelMetadata> => {
+    const metadataMap = new Map<string, ModelMetadata>();
+
+    if (!isRecord(payload)) {
+        return metadataMap;
+    }
+
+    for (const [providerKey, providerValue] of Object.entries(payload)) {
+        if (!isModelsDevProviderEntry(providerValue)) {
+            continue;
+        }
+
+        const providerId = typeof providerValue.id === 'string' && providerValue.id.length > 0 ? providerValue.id : providerKey;
+        const models = providerValue.models;
+        if (!models || !isRecord(models)) {
+            continue;
+        }
+
+        for (const [modelKey, modelValue] of Object.entries(models)) {
+            if (!isModelsDevModelEntry(modelValue)) {
+                continue;
+            }
+
+            const resolvedModelId =
+                typeof modelKey === 'string' && modelKey.length > 0
+                    ? modelKey
+                    : modelValue.id;
+
+            if (!resolvedModelId || typeof resolvedModelId !== 'string' || resolvedModelId.length === 0) {
+                continue;
+            }
+
+            const metadata: ModelMetadata = {
+                id: typeof modelValue.id === 'string' && modelValue.id.length > 0 ? modelValue.id : resolvedModelId,
+                providerId,
+                name: typeof modelValue.name === 'string' ? modelValue.name : undefined,
+                tool_call: typeof modelValue.tool_call === 'boolean' ? modelValue.tool_call : undefined,
+                reasoning: typeof modelValue.reasoning === 'boolean' ? modelValue.reasoning : undefined,
+                temperature: typeof modelValue.temperature === 'boolean' ? modelValue.temperature : undefined,
+                attachment: typeof modelValue.attachment === 'boolean' ? modelValue.attachment : undefined,
+                modalities: modelValue.modalities
+                    ? {
+                          input: isStringArray(modelValue.modalities.input) ? modelValue.modalities.input : undefined,
+                          output: isStringArray(modelValue.modalities.output) ? modelValue.modalities.output : undefined,
+                      }
+                    : undefined,
+                cost: modelValue.cost,
+                limit: modelValue.limit,
+                knowledge: typeof modelValue.knowledge === 'string' ? modelValue.knowledge : undefined,
+                release_date: typeof modelValue.release_date === 'string' ? modelValue.release_date : undefined,
+                last_updated: typeof modelValue.last_updated === 'string' ? modelValue.last_updated : undefined,
+            };
+
+            const key = buildModelMetadataKey(providerId, resolvedModelId);
+            if (key) {
+                metadataMap.set(key, metadata);
+            }
+        }
+    }
+
+    return metadataMap;
+};
+
+const fetchModelsDevMetadata = async (): Promise<Map<string, ModelMetadata>> => {
+    if (typeof fetch !== 'function') {
+        return new Map();
+    }
+
+    const sources = [MODELS_DEV_PROXY_URL, MODELS_DEV_API_URL];
+
+    for (const source of sources) {
+        const controller = typeof AbortController !== 'undefined' ? new AbortController() : undefined;
+        const timeout = controller ? setTimeout(() => controller.abort(), 8000) : undefined;
+
+        try {
+            const isAbsoluteUrl = /^https?:\/\//i.test(source);
+            const requestInit: RequestInit = {
+                signal: controller?.signal,
+                headers: {
+                    Accept: 'application/json',
+                },
+                cache: 'no-store',
+            };
+
+            if (isAbsoluteUrl) {
+                requestInit.mode = 'cors';
+            } else {
+                requestInit.credentials = 'same-origin';
+            }
+
+            const response = await fetch(source, requestInit);
+
+            if (!response.ok) {
+                throw new Error(`Metadata request to ${source} returned status ${response.status}`);
+            }
+
+            const data = await response.json();
+            return transformModelsDevResponse(data);
+        } catch (error: unknown) {
+            if ((error as Error)?.name === 'AbortError') {
+                console.warn(`Model metadata request aborted (${source})`);
+            } else {
+                console.warn(`Failed to fetch model metadata from ${source}:`, error);
+            }
+        } finally {
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+        }
+    }
+
+    return new Map();
+};
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+interface ConfigStore {
+
+    providers: ProviderWithModelList[];
+    agents: Agent[];
+    currentProviderId: string;
+    currentModelId: string;
+    currentAgentName: string | undefined;
+    agentModelSelections: { [agentName: string]: { providerId: string; modelId: string } };
+    defaultProviders: { [key: string]: string };
+    isConnected: boolean;
+    isInitialized: boolean;
+    modelsMetadata: Map<string, ModelMetadata>;
+
+    loadProviders: () => Promise<void>;
+    loadAgents: () => Promise<boolean>;
+    setProvider: (providerId: string) => void;
+    setModel: (modelId: string) => void;
+    setAgent: (agentName: string | undefined) => void;
+    saveAgentModelSelection: (agentName: string, providerId: string, modelId: string) => void;
+    getAgentModelSelection: (agentName: string) => { providerId: string; modelId: string } | null;
+    checkConnection: () => Promise<boolean>;
+    initializeApp: () => Promise<void>;
+    getCurrentProvider: () => ProviderWithModelList | undefined;
+    getCurrentModel: () => ProviderModel | undefined;
+    getCurrentAgent: () => Agent | undefined;
+    getModelMetadata: (providerId: string, modelId: string) => ModelMetadata | undefined;
+}
+
+declare global {
+    interface Window {
+        __zustand_config_store__?: UseBoundStore<StoreApi<ConfigStore>>;
+        __zustand_session_store__?: UseBoundStore<StoreApi<SessionStore>>;
+    }
+}
+
+export const useConfigStore = create<ConfigStore>()(
+    devtools(
+        persist(
+            (set, get) => ({
+
+                providers: [],
+                agents: [],
+                currentProviderId: "",
+                currentModelId: "",
+                currentAgentName: undefined,
+                agentModelSelections: {},
+                defaultProviders: {},
+                isConnected: false,
+                isInitialized: false,
+                modelsMetadata: new Map<string, ModelMetadata>(),
+
+                loadProviders: async () => {
+                    try {
+                        const metadataPromise = fetchModelsDevMetadata();
+                        const apiResult = await opencodeClient.getProviders();
+                        const providers = Array.isArray(apiResult?.providers) ? apiResult.providers : [];
+                        const defaults = apiResult?.default || {};
+
+                        const processedProviders: ProviderWithModelList[] = providers.map((provider) => {
+                            const modelRecord = provider.models ?? {};
+                            const models: ProviderModel[] = Object.keys(modelRecord).map((modelId) => modelRecord[modelId]);
+                            return {
+                                ...provider,
+                                models,
+                            };
+                        });
+
+                        const defaultProviderId = defaults.provider || processedProviders[0]?.id || "";
+                        const provider = processedProviders.find((p) => p.id === defaultProviderId);
+                        const defaultModelId = defaults.model || provider?.models?.[0]?.id || "";
+
+                        set({
+                            providers: processedProviders,
+                            defaultProviders: defaults,
+
+                            currentProviderId: defaultProviderId,
+                            currentModelId: defaultModelId,
+                        });
+
+                        const metadata = await metadataPromise;
+                        if (metadata.size > 0) {
+                            set({ modelsMetadata: metadata });
+                        }
+                    } catch (error) {
+                            console.error("Failed to load providers:", error);
+                            set({ providers: [], defaultProviders: {}, currentProviderId: "", currentModelId: "" });
+                        }
+                    },
+
+                setProvider: (providerId: string) => {
+                    const { providers } = get();
+                    const provider = providers.find((p) => p.id === providerId);
+
+                    if (provider) {
+
+                        const firstModel = provider.models[0];
+                        const newModelId = firstModel?.id || "";
+
+                        set({
+                            currentProviderId: providerId,
+                            currentModelId: newModelId,
+                        });
+                    }
+                },
+
+                setModel: (modelId: string) => {
+                    set({ currentModelId: modelId });
+                },
+
+                saveAgentModelSelection: (agentName: string, providerId: string, modelId: string) => {
+                    set((state) => ({
+                        agentModelSelections: {
+                            ...state.agentModelSelections,
+                            [agentName]: { providerId, modelId },
+                        },
+                    }));
+                },
+
+                getAgentModelSelection: (agentName: string) => {
+                    const { agentModelSelections } = get();
+                    return agentModelSelections[agentName] || null;
+                },
+
+                loadAgents: async () => {
+                    const previousAgents = get().agents;
+                    let lastError: unknown = null;
+
+                    for (let attempt = 0; attempt < 3; attempt++) {
+                        try {
+                            const agents = await opencodeClient.listAgents();
+                            const safeAgents = Array.isArray(agents) ? agents : [];
+                            set({ agents: safeAgents });
+
+                            const { providers } = get();
+
+                            if (safeAgents.length === 0) {
+                                set({ currentAgentName: undefined });
+                                return true;
+                            }
+
+                            const primaryAgents = safeAgents.filter((agent) => isPrimaryMode(agent.mode));
+                            const buildAgent = primaryAgents.find((agent) => agent.name === "build");
+                            const defaultAgent = buildAgent || primaryAgents[0] || safeAgents[0];
+
+                            set({ currentAgentName: defaultAgent.name });
+
+                            if (defaultAgent?.model?.providerID && defaultAgent?.model?.modelID) {
+                                const agentProvider = providers.find((p) => p.id === defaultAgent.model!.providerID);
+                                if (agentProvider) {
+                                    const agentModel = agentProvider.models.find((model) => model.id === defaultAgent.model!.modelID);
+
+                                    if (agentModel) {
+                                        set({
+                                            currentProviderId: defaultAgent.model!.providerID,
+                                            currentModelId: defaultAgent.model!.modelID,
+                                        });
+                                    }
+                                }
+                            }
+
+                            return true;
+                        } catch (error) {
+                            lastError = error;
+                            const waitMs = 200 * (attempt + 1);
+                            await new Promise((resolve) => setTimeout(resolve, waitMs));
+                        }
+                    }
+
+                    console.error("Failed to load agents:", lastError);
+                    set({ agents: previousAgents });
+                    return false;
+                },
+
+                setAgent: (agentName: string | undefined) => {
+                    const { agents, providers } = get();
+
+                    set({ currentAgentName: agentName });
+
+                    if (agentName && typeof window !== "undefined") {
+
+                        const sessionStore = window.__zustand_session_store__;
+                        if (sessionStore) {
+                            const sessionState = sessionStore.getState();
+                            const { currentSessionId, isOpenChamberCreatedSession, initializeNewOpenChamberSession, getAgentModelForSession } = sessionState;
+
+                            if (currentSessionId) {
+
+                                sessionStore.setState((state) => {
+                                    const newAgentContext = new Map(state.currentAgentContext);
+                                    newAgentContext.set(currentSessionId, agentName);
+                                    return { currentAgentContext: newAgentContext };
+                                });
+                            }
+
+                            if (currentSessionId && isOpenChamberCreatedSession(currentSessionId)) {
+                                const existingAgentModel = getAgentModelForSession(currentSessionId, agentName);
+                                if (!existingAgentModel) {
+
+                                    initializeNewOpenChamberSession(currentSessionId, agents);
+                                }
+                            }
+                        }
+                    }
+
+                    if (agentName && typeof window !== "undefined") {
+                        const sessionStore = window.__zustand_session_store__;
+                        if (sessionStore) {
+                            const { currentSessionId, getAgentModelForSession } = sessionStore.getState();
+
+                            if (currentSessionId) {
+                                const existingAgentModel = getAgentModelForSession(currentSessionId, agentName);
+
+                                if (existingAgentModel) {
+
+                                    return;
+                                }
+                            }
+                        }
+
+                        const agent = agents.find((candidate) => candidate.name === agentName);
+                        if (agent?.model?.providerID && agent?.model?.modelID) {
+                            const agentProvider = providers.find((provider) => provider.id === agent.model!.providerID);
+                            if (agentProvider) {
+                                const agentModel = agentProvider.models.find((model) => model.id === agent.model!.modelID);
+
+                                if (agentModel) {
+                                    set({
+                                        currentProviderId: agent.model!.providerID,
+                                        currentModelId: agent.model!.modelID,
+                                    });
+                                }
+                            }
+                        }
+                    }
+                },
+
+                checkConnection: async () => {
+                    const maxAttempts = 5;
+                    let attempt = 0;
+                    let lastError: unknown = null;
+
+                    while (attempt < maxAttempts) {
+                        try {
+                            const isHealthy = await opencodeClient.checkHealth();
+                            set({ isConnected: isHealthy });
+                            return isHealthy;
+                        } catch (error) {
+                            lastError = error;
+                            attempt += 1;
+                            const delay = 400 * attempt;
+                            await sleep(delay);
+                        }
+                    }
+
+                    if (lastError) {
+                        console.warn("[ConfigStore] Failed to reach OpenCode after retrying:", lastError);
+                    }
+                    set({ isConnected: false });
+                    return false;
+                },
+
+                initializeApp: async () => {
+                    try {
+                        console.log("Starting app initialization...");
+
+                        const isConnected = await get().checkConnection();
+                        console.log("Connection check result:", isConnected);
+
+                        if (!isConnected) {
+                            console.log("Server not connected");
+                            set({ isConnected: false });
+                            return;
+                        }
+
+                        console.log("Initializing app...");
+                        await opencodeClient.initApp();
+
+                        console.log("Loading providers...");
+                        await get().loadProviders();
+
+                        console.log("Loading agents...");
+                        await get().loadAgents();
+
+                        set({ isInitialized: true, isConnected: true });
+                        console.log("App initialized successfully");
+                    } catch (error) {
+                        console.error("Failed to initialize app:", error);
+                        set({ isInitialized: false, isConnected: false });
+                    }
+                },
+
+                getCurrentProvider: () => {
+                    const { providers, currentProviderId } = get();
+                    return providers.find((p) => p.id === currentProviderId);
+                },
+
+                getCurrentModel: () => {
+                    const provider = get().getCurrentProvider();
+                    const { currentModelId } = get();
+                    if (!provider) {
+                        return undefined;
+                    }
+                    return provider.models.find((model) => model.id === currentModelId);
+                },
+
+                getCurrentAgent: () => {
+                    const { agents, currentAgentName } = get();
+                    if (!currentAgentName) return undefined;
+                    return agents.find((a) => a.name === currentAgentName);
+                },
+                getModelMetadata: (providerId: string, modelId: string) => {
+                    const key = buildModelMetadataKey(providerId, modelId);
+                    if (!key) {
+                        return undefined;
+                    }
+                    const { modelsMetadata } = get();
+                    return modelsMetadata.get(key);
+                },
+            }),
+            {
+                name: "config-store",
+                storage: createJSONStorage(() => getSafeStorage()),
+                partialize: () => ({
+
+                }),
+            },
+        ),
+        {
+            name: "config-store",
+        },
+    ),
+);
+
+if (typeof window !== "undefined") {
+    window.__zustand_config_store__ = useConfigStore;
+}
+
+let unsubscribeConfigStoreChanges: (() => void) | null = null;
+
+if (!unsubscribeConfigStoreChanges) {
+    unsubscribeConfigStoreChanges = subscribeToConfigChanges(async (event) => {
+        const tasks: Promise<void>[] = [];
+
+        if (scopeMatches(event, "agents")) {
+            const { loadAgents } = useConfigStore.getState();
+            tasks.push(loadAgents().then(() => {}));
+        }
+
+        if (scopeMatches(event, "providers")) {
+            const { loadProviders } = useConfigStore.getState();
+            tasks.push(loadProviders());
+        }
+
+        if (tasks.length > 0) {
+            await Promise.all(tasks);
+        }
+    });
+}
diff --git a/packages/ui/src/stores/useDirectoryStore.ts b/packages/ui/src/stores/useDirectoryStore.ts
new file mode 100644
index 00000000..a005bc1b
--- /dev/null
+++ b/packages/ui/src/stores/useDirectoryStore.ts
@@ -0,0 +1,477 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { opencodeClient } from '@/lib/opencode/client';
+import type { DirectorySwitchResult } from '@/lib/opencode/client';
+import { getDesktopHomeDirectory } from '@/lib/desktop';
+import { updateDesktopSettings } from '@/lib/persistence';
+import { startConfigUpdate, finishConfigUpdate, updateConfigUpdateMessage } from '@/lib/configUpdate';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { refreshAfterOpenCodeRestart } from '@/stores/useAgentsStore';
+import { useCommandsStore } from '@/stores/useCommandsStore';
+import { useFileSearchStore } from '@/stores/useFileSearchStore';
+import { emitConfigChange } from '@/lib/configSync';
+import { getSafeStorage } from './utils/safeStorage';
+
+interface DirectoryStore {
+
+  currentDirectory: string;
+  directoryHistory: string[];
+  historyIndex: number;
+  homeDirectory: string;
+  hasPersistedDirectory: boolean;
+  isHomeReady: boolean;
+  isSwitchingDirectory: boolean;
+
+  setDirectory: (path: string, options?: { showOverlay?: boolean }) => void;
+  goBack: () => void;
+  goForward: () => void;
+  goToParent: () => void;
+  goHome: () => Promise<void>;
+  synchronizeHomeDirectory: (path: string) => void;
+}
+
+let cachedHomeDirectory: string | null = null;
+const safeStorage = getSafeStorage();
+const persistedLastDirectory = safeStorage.getItem('lastDirectory');
+const initialHasPersistedDirectory =
+  typeof persistedLastDirectory === 'string' && persistedLastDirectory.length > 0;
+
+const notifyOpenCodeWorkingDirectory = (path: string, options?: { showOverlay?: boolean }) => {
+  const showOverlay = options?.showOverlay ?? true;
+  if (showOverlay) {
+    startConfigUpdate('Switching project directory…');
+  }
+
+  return opencodeClient.setOpenCodeWorkingDirectory(path).catch((error) => {
+    console.warn('Failed to synchronize OpenCode working directory:', error);
+    throw error;
+  });
+};
+
+const scheduleDirectoryFollowUp = (
+  restartPromise: Promise<DirectorySwitchResult | null>,
+  options: { showOverlay: boolean },
+  onComplete?: (result: DirectorySwitchResult | null) => void
+) => {
+  const { showOverlay } = options;
+
+  const reloadSessions = () => {
+    try {
+      useSessionStore.getState().loadSessions();
+    } catch (err) {
+      console.error('Failed to reload sessions after directory change:', err);
+    }
+  };
+
+  void (async () => {
+    let result: DirectorySwitchResult | null = null;
+
+    try {
+      result = await restartPromise;
+    } catch (error) {
+      console.error('Failed to update OpenCode working directory:', error);
+      if (showOverlay) {
+        updateConfigUpdateMessage('Failed to switch directory. Please try again.');
+        await new Promise((resolve) => setTimeout(resolve, 1500));
+        finishConfigUpdate();
+      }
+      onComplete?.(result);
+      reloadSessions();
+      return;
+    }
+
+    try {
+      if (result && result.restarted) {
+        try {
+          if (typeof window !== 'undefined' && window.localStorage) {
+            window.localStorage.removeItem('commands-store');
+          }
+        } catch (storageError) {
+          console.warn('Failed to reset commands-store cache:', storageError);
+        }
+
+        await refreshAfterOpenCodeRestart({ message: 'Refreshing OpenCode configuration…' });
+
+        try {
+          await useCommandsStore.getState().loadCommands();
+
+          try {
+            emitConfigChange('commands', { source: 'useCommandsStore' });
+          } catch (syncError) {
+            console.warn('Failed to emit command configuration change:', syncError);
+          }
+        } catch (commandError) {
+          console.warn('Failed to reload commands after directory change:', commandError);
+        }
+      } else if (showOverlay) {
+        finishConfigUpdate();
+      }
+    } catch (error) {
+      console.error('Failed to refresh configuration after directory change:', error);
+      if (showOverlay) {
+        updateConfigUpdateMessage('Failed to refresh configuration. Please reload manually.');
+        await new Promise((resolve) => setTimeout(resolve, 1500));
+        finishConfigUpdate();
+      }
+    } finally {
+      onComplete?.(result);
+      reloadSessions();
+    }
+  })();
+};
+
+const invalidateFileSearchCache = (scope?: string | null) => {
+  try {
+    useFileSearchStore.getState().invalidateDirectory(scope);
+  } catch (error) {
+    console.warn('Failed to invalidate file search cache:', error);
+  }
+};
+
+const getHomeDirectory = () => {
+
+  if (typeof window !== 'undefined') {
+    const saved = safeStorage.getItem('lastDirectory');
+    if (saved) return saved;
+
+    if (cachedHomeDirectory) return cachedHomeDirectory;
+
+    const desktopHome =
+      (typeof window.__OPENCHAMBER_HOME__ === 'string' && window.__OPENCHAMBER_HOME__.length > 0
+        ? window.__OPENCHAMBER_HOME__
+        : window.opencodeDesktop && typeof window.opencodeDesktop.homeDirectory === 'string'
+          ? window.opencodeDesktop.homeDirectory
+          : null);
+
+    if (desktopHome && desktopHome.length > 0) {
+      cachedHomeDirectory = desktopHome;
+      safeStorage.setItem('homeDirectory', desktopHome);
+      return desktopHome;
+    }
+
+    const storedHome = safeStorage.getItem('homeDirectory');
+    if (storedHome) {
+      cachedHomeDirectory = storedHome;
+      return storedHome;
+    }
+  }
+
+  const nodeHome = typeof process !== 'undefined' && process?.env?.HOME;
+  if (nodeHome) {
+    return nodeHome;
+  }
+  return process?.cwd?.() || '/';
+};
+
+const normalizeHomeCandidate = (value?: string | null) => {
+  if (typeof value !== 'string') {
+    return null;
+  }
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return null;
+  }
+  const normalized = trimmed.replace(/\\/g, '/');
+  if (normalized.length > 1) {
+    const withoutTrailingSlash = normalized.replace(/\/+$/, '');
+    if (withoutTrailingSlash && withoutTrailingSlash.length > 0) {
+      if (withoutTrailingSlash === '/') {
+        return null;
+      }
+      return withoutTrailingSlash;
+    }
+  }
+  if (normalized === '/' || normalized.length === 0) {
+    return null;
+  }
+  return normalized;
+};
+
+const persistResolvedHome = (resolved: string) => {
+  cachedHomeDirectory = resolved;
+  if (typeof window !== 'undefined') {
+    safeStorage.setItem('homeDirectory', resolved);
+  }
+  void updateDesktopSettings({ homeDirectory: resolved });
+  return resolved;
+};
+
+const initializeHomeDirectory = async () => {
+  const acceptCandidate = (candidate?: string | null) => {
+    const normalized = normalizeHomeCandidate(candidate);
+    return normalized ? persistResolvedHome(normalized) : null;
+  };
+
+  try {
+    const fsHome = await opencodeClient.getFilesystemHome();
+    const resolved = acceptCandidate(fsHome);
+    if (resolved) {
+      return resolved;
+    }
+  } catch (filesystemError) {
+    console.warn('Failed to obtain filesystem home directory:', filesystemError);
+  }
+
+  try {
+    const info = await opencodeClient.getSystemInfo();
+    const resolved = acceptCandidate(info?.homeDirectory);
+    if (resolved) {
+      return resolved;
+    }
+  } catch (error) {
+    console.warn('Failed to get home directory from system info:', error);
+  }
+
+  try {
+    const desktopHome = await getDesktopHomeDirectory();
+    const resolved = acceptCandidate(desktopHome);
+    if (resolved) {
+      return resolved;
+    }
+  } catch (desktopError) {
+    console.warn('Failed to obtain desktop-integrated home directory:', desktopError);
+  }
+
+  const fallback = getHomeDirectory();
+  const resolvedFallback = acceptCandidate(fallback);
+  if (resolvedFallback) {
+    return resolvedFallback;
+  }
+
+  return fallback;
+};
+
+const initialHomeDirectory = getHomeDirectory();
+if (initialHomeDirectory) {
+  opencodeClient.setDirectory(initialHomeDirectory);
+}
+const initialIsHomeReady = Boolean(initialHomeDirectory && initialHomeDirectory !== '/');
+
+export const useDirectoryStore = create<DirectoryStore>()(
+  devtools(
+    (set, get) => ({
+
+      currentDirectory: initialHomeDirectory,
+      directoryHistory: [initialHomeDirectory],
+      historyIndex: 0,
+      homeDirectory: initialHomeDirectory,
+      hasPersistedDirectory: initialHasPersistedDirectory,
+      isHomeReady: initialIsHomeReady,
+      isSwitchingDirectory: false,
+
+      setDirectory: (path: string, options?: { showOverlay?: boolean }) => {
+        console.log('[DirectoryStore] setDirectory called with path:', path);
+        const showOverlay = options?.showOverlay ?? true;
+
+        opencodeClient.setDirectory(path);
+        invalidateFileSearchCache();
+        const restartPromise = notifyOpenCodeWorkingDirectory(path, { showOverlay });
+        console.log('[DirectoryStore] notifyOpenCodeWorkingDirectory initiated');
+
+        set((state) => {
+
+          const newHistory = [...state.directoryHistory.slice(0, state.historyIndex + 1), path];
+
+          safeStorage.setItem('lastDirectory', path);
+
+          void updateDesktopSettings({ lastDirectory: path });
+
+          return {
+            currentDirectory: path,
+            directoryHistory: newHistory,
+            historyIndex: newHistory.length - 1,
+            hasPersistedDirectory: true,
+            isHomeReady: true,
+            isSwitchingDirectory: true,
+          };
+        });
+
+        scheduleDirectoryFollowUp(restartPromise, { showOverlay }, () => {
+          set((state) => {
+            if (state.currentDirectory !== path) {
+              return {};
+            }
+            if (!state.isSwitchingDirectory) {
+              return {};
+            }
+            return { isSwitchingDirectory: false };
+          });
+        });
+      },
+
+      goBack: () => {
+        const state = get();
+        if (state.historyIndex > 0) {
+          const newIndex = state.historyIndex - 1;
+          const newDirectory = state.directoryHistory[newIndex];
+
+          opencodeClient.setDirectory(newDirectory);
+          invalidateFileSearchCache();
+          const restartPromise = notifyOpenCodeWorkingDirectory(newDirectory);
+
+          safeStorage.setItem('lastDirectory', newDirectory);
+
+          void updateDesktopSettings({ lastDirectory: newDirectory });
+
+          set({
+            currentDirectory: newDirectory,
+            historyIndex: newIndex,
+            hasPersistedDirectory: true,
+            isHomeReady: true,
+            isSwitchingDirectory: true,
+          });
+
+          scheduleDirectoryFollowUp(restartPromise, { showOverlay: true }, () => {
+            set((state) => {
+              if (state.currentDirectory !== newDirectory) {
+                return {};
+              }
+              if (!state.isSwitchingDirectory) {
+                return {};
+              }
+              return { isSwitchingDirectory: false };
+            });
+          });
+        }
+      },
+
+      goForward: () => {
+        const state = get();
+        if (state.historyIndex < state.directoryHistory.length - 1) {
+          const newIndex = state.historyIndex + 1;
+          const newDirectory = state.directoryHistory[newIndex];
+
+          opencodeClient.setDirectory(newDirectory);
+          invalidateFileSearchCache();
+          const restartPromise = notifyOpenCodeWorkingDirectory(newDirectory);
+
+          safeStorage.setItem('lastDirectory', newDirectory);
+
+          void updateDesktopSettings({ lastDirectory: newDirectory });
+
+          set({
+            currentDirectory: newDirectory,
+            historyIndex: newIndex,
+            hasPersistedDirectory: true,
+            isHomeReady: true,
+            isSwitchingDirectory: true,
+          });
+
+          scheduleDirectoryFollowUp(restartPromise, { showOverlay: true }, () => {
+            set((state) => {
+              if (state.currentDirectory !== newDirectory) {
+                return {};
+              }
+              if (!state.isSwitchingDirectory) {
+                return {};
+              }
+              return { isSwitchingDirectory: false };
+            });
+          });
+        }
+      },
+
+      goToParent: () => {
+        const { currentDirectory, setDirectory } = get();
+        const homeDir = cachedHomeDirectory || get().homeDirectory || getHomeDirectory();
+
+        if (currentDirectory === homeDir || currentDirectory === '/') {
+          return;
+        }
+
+        const cleanPath = currentDirectory.endsWith('/')
+          ? currentDirectory.slice(0, -1)
+          : currentDirectory;
+
+        const lastSlash = cleanPath.lastIndexOf('/');
+        if (lastSlash === -1) {
+          const home = cachedHomeDirectory || getHomeDirectory();
+          setDirectory(home);
+        } else if (lastSlash === 0) {
+          setDirectory('/');
+        } else {
+          setDirectory(cleanPath.substring(0, lastSlash));
+        }
+      },
+
+      goHome: async () => {
+        const homeDir =
+          cachedHomeDirectory ||
+          get().homeDirectory ||
+          (await initializeHomeDirectory());
+        get().setDirectory(homeDir);
+      },
+
+      synchronizeHomeDirectory: (homePath: string) => {
+        const state = get();
+        const resolvedHome = homePath;
+        cachedHomeDirectory = resolvedHome;
+        const needsUpdate = state.homeDirectory !== resolvedHome;
+        const savedLastDirectory = safeStorage.getItem('lastDirectory');
+        const hasSavedLastDirectory = typeof savedLastDirectory === 'string' && savedLastDirectory.length > 0;
+        const shouldReplaceCurrent =
+          !hasSavedLastDirectory &&
+          (
+            state.currentDirectory === '/' ||
+            state.currentDirectory === state.homeDirectory ||
+            !state.currentDirectory
+          );
+
+        if (!needsUpdate && !shouldReplaceCurrent) {
+          if (!state.isHomeReady) {
+            set({ isHomeReady: true });
+          }
+          return;
+        }
+
+        const resolvedReady = typeof resolvedHome === 'string' && resolvedHome !== '' && resolvedHome !== '/';
+
+        const updates: Partial<DirectoryStore> = {
+          homeDirectory: resolvedHome,
+          hasPersistedDirectory: hasSavedLastDirectory,
+          isHomeReady: resolvedReady
+        };
+
+        if (shouldReplaceCurrent) {
+          updates.currentDirectory = resolvedHome;
+          updates.directoryHistory = [resolvedHome];
+          updates.historyIndex = 0;
+          updates.isSwitchingDirectory = true;
+        }
+
+        set(() => updates as Partial<DirectoryStore>);
+
+        if (shouldReplaceCurrent && resolvedReady) {
+          opencodeClient.setDirectory(resolvedHome);
+          invalidateFileSearchCache();
+          safeStorage.setItem('lastDirectory', resolvedHome);
+          void updateDesktopSettings({ lastDirectory: resolvedHome });
+
+          const restartPromise = notifyOpenCodeWorkingDirectory(resolvedHome, { showOverlay: false });
+          scheduleDirectoryFollowUp(restartPromise, { showOverlay: false }, () => {
+            set((state) => {
+              if (state.currentDirectory !== resolvedHome) {
+                return {};
+              }
+              if (!state.isSwitchingDirectory) {
+                return {};
+              }
+              return { isSwitchingDirectory: false };
+            });
+          });
+        }
+
+        void updateDesktopSettings({ homeDirectory: resolvedHome });
+      }
+    }),
+    {
+      name: 'directory-store'
+    }
+  )
+);
+
+if (typeof window !== 'undefined') {
+  initializeHomeDirectory().then((home) => {
+    useDirectoryStore.getState().synchronizeHomeDirectory(home);
+  });
+}
diff --git a/packages/ui/src/stores/useFileSearchStore.ts b/packages/ui/src/stores/useFileSearchStore.ts
new file mode 100644
index 00000000..b1d198ed
--- /dev/null
+++ b/packages/ui/src/stores/useFileSearchStore.ts
@@ -0,0 +1,129 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { opencodeClient, type ProjectFileSearchHit } from '@/lib/opencode/client';
+
+const CACHE_TTL_MS = 30_000;
+const MAX_CACHE_ENTRIES = 40;
+const DEFAULT_SEARCH_LIMIT = 60;
+
+interface FileSearchCacheEntry {
+  files: ProjectFileSearchHit[];
+  timestamp: number;
+}
+
+interface FileSearchStoreState {
+  cache: Record<string, FileSearchCacheEntry>;
+  cacheKeys: string[];
+  inFlight: Record<string, Promise<ProjectFileSearchHit[]>>;
+  searchFiles: (directory: string, query: string, limit?: number) => Promise<ProjectFileSearchHit[]>;
+  invalidateDirectory: (directory?: string | null) => void;
+}
+
+const buildCacheKey = (directory: string, query: string, limit: number) => {
+  const normalizedDirectory = directory.trim();
+  const normalizedQuery = query.trim().toLowerCase();
+  return `${normalizedDirectory}::${normalizedQuery}::${limit}`;
+};
+
+export const useFileSearchStore = create<FileSearchStoreState>()(
+  devtools(
+    (set, get) => ({
+      cache: {},
+      cacheKeys: [],
+      inFlight: {},
+      async searchFiles(directory, query, limit = DEFAULT_SEARCH_LIMIT) {
+        if (!directory || directory.trim().length === 0) {
+          return [];
+        }
+
+        const normalizedDirectory = directory.trim();
+        const normalizedQuery = typeof query === 'string' ? query.trim() : '';
+        const key = buildCacheKey(normalizedDirectory, normalizedQuery, limit);
+        const now = Date.now();
+        const cached = get().cache[key];
+
+        if (cached && now - cached.timestamp < CACHE_TTL_MS) {
+          return cached.files;
+        }
+
+        const inflight = get().inFlight[key];
+        if (inflight) {
+          return inflight;
+        }
+
+        const searchPromise = opencodeClient
+          .searchFiles(normalizedQuery, { directory: normalizedDirectory, limit })
+          .then((files) => {
+            set((state) => {
+              const nextCache = { ...state.cache, [key]: { files, timestamp: Date.now() } };
+              const nextKeys = state.cacheKeys.filter((cacheKey) => cacheKey !== key);
+              nextKeys.push(key);
+
+              while (nextKeys.length > MAX_CACHE_ENTRIES) {
+                const oldestKey = nextKeys.shift();
+                if (oldestKey) {
+                  delete nextCache[oldestKey];
+                }
+              }
+
+              return {
+                cache: nextCache,
+                cacheKeys: nextKeys,
+              };
+            });
+            return files;
+          })
+          .finally(() => {
+            set((state) => {
+              const nextInFlight = { ...state.inFlight };
+              delete nextInFlight[key];
+              return { inFlight: nextInFlight };
+            });
+          });
+
+        set((state) => ({
+          inFlight: {
+            ...state.inFlight,
+            [key]: searchPromise,
+          },
+        }));
+
+        return searchPromise;
+      },
+      invalidateDirectory(directory) {
+        if (!directory || directory.trim().length === 0) {
+          set({ cache: {}, cacheKeys: [], inFlight: {} });
+          return;
+        }
+
+        const normalizedDirectory = directory.trim();
+        const prefix = `${normalizedDirectory}::`;
+
+        set((state) => {
+          const nextCache = { ...state.cache };
+          const nextKeys = state.cacheKeys.filter((cacheKey) => {
+            if (cacheKey.startsWith(prefix)) {
+              delete nextCache[cacheKey];
+              return false;
+            }
+            return true;
+          });
+
+          const nextInFlightEntries = Object.entries(state.inFlight).filter(
+            ([key]) => !key.startsWith(prefix)
+          );
+          const nextInFlight = Object.fromEntries(nextInFlightEntries);
+
+          return {
+            cache: nextCache,
+            cacheKeys: nextKeys,
+            inFlight: nextInFlight,
+          };
+        });
+      },
+    }),
+    {
+      name: 'file-search-store',
+    }
+  )
+);
diff --git a/packages/ui/src/stores/useGitIdentitiesStore.ts b/packages/ui/src/stores/useGitIdentitiesStore.ts
new file mode 100644
index 00000000..ffbd529c
--- /dev/null
+++ b/packages/ui/src/stores/useGitIdentitiesStore.ts
@@ -0,0 +1,180 @@
+import { create } from "zustand";
+import type { StoreApi, UseBoundStore } from "zustand";
+import { devtools, persist, createJSONStorage } from "zustand/middleware";
+import { getSafeStorage } from "./utils/safeStorage";
+import {
+  getGitIdentities,
+  createGitIdentity,
+  updateGitIdentity,
+  deleteGitIdentity,
+  getCurrentGitIdentity
+} from "@/lib/gitApi";
+
+export interface GitIdentityProfile {
+  id: string;
+  name: string;
+  userName: string;
+  userEmail: string;
+  sshKey?: string | null;
+  color?: string | null;
+  icon?: string | null;
+}
+
+interface GitIdentitiesStore {
+
+  selectedProfileId: string | null;
+  profiles: GitIdentityProfile[];
+  globalIdentity: GitIdentityProfile | null;
+  isLoading: boolean;
+
+  setSelectedProfile: (id: string | null) => void;
+  loadProfiles: () => Promise<boolean>;
+  loadGlobalIdentity: () => Promise<boolean>;
+  createProfile: (profile: Omit<GitIdentityProfile, 'id'> & { id?: string }) => Promise<boolean>;
+  updateProfile: (id: string, updates: Partial<GitIdentityProfile>) => Promise<boolean>;
+  deleteProfile: (id: string) => Promise<boolean>;
+  getProfileById: (id: string) => GitIdentityProfile | undefined;
+}
+
+declare global {
+  interface Window {
+    __zustand_git_identities_store__?: UseBoundStore<StoreApi<GitIdentitiesStore>>;
+  }
+}
+
+export const useGitIdentitiesStore = create<GitIdentitiesStore>()(
+  devtools(
+    persist(
+      (set, get) => ({
+
+        selectedProfileId: null,
+        profiles: [],
+        globalIdentity: null,
+        isLoading: false,
+
+        setSelectedProfile: (id: string | null) => {
+          set({ selectedProfileId: id });
+        },
+
+        loadProfiles: async () => {
+          set({ isLoading: true });
+          const previousProfiles = get().profiles;
+
+          try {
+            const profiles = await getGitIdentities();
+            set({ profiles, isLoading: false });
+            return true;
+          } catch (error) {
+            console.error("Failed to load git identity profiles:", error);
+            set({ profiles: previousProfiles, isLoading: false });
+            return false;
+          }
+        },
+
+        loadGlobalIdentity: async () => {
+          try {
+            const data = await getCurrentGitIdentity('');
+
+            if (data && data.userName && data.userEmail) {
+              const globalProfile: GitIdentityProfile = {
+                id: 'global',
+                name: 'Global Identity',
+                userName: data.userName,
+                userEmail: data.userEmail,
+                sshKey: data.sshCommand ? data.sshCommand.replace('ssh -i ', '') : null,
+                color: 'info',
+                icon: 'house'
+              };
+              set({ globalIdentity: globalProfile });
+            } else {
+              set({ globalIdentity: null });
+            }
+
+            return true;
+          } catch (error) {
+            console.error("Failed to load global git identity:", error);
+            set({ globalIdentity: null });
+            return false;
+          }
+        },
+
+        createProfile: async (profileData) => {
+          try {
+
+            const profile = {
+              ...profileData,
+              id: profileData.id || `profile-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
+              color: profileData.color || 'keyword',
+              icon: profileData.icon || 'branch'
+            };
+
+            await createGitIdentity(profile);
+
+            await get().loadProfiles();
+            return true;
+          } catch (error) {
+            console.error("Failed to create git identity profile:", error);
+            return false;
+          }
+        },
+
+        updateProfile: async (id, updates) => {
+          try {
+
+            const existing = get().profiles.find(p => p.id === id);
+            if (!existing) {
+              throw new Error("Profile not found");
+            }
+
+            const updated = { ...existing, ...updates };
+            await updateGitIdentity(id, updated);
+
+            await get().loadProfiles();
+            return true;
+          } catch (error) {
+            console.error("Failed to update git identity profile:", error);
+            return false;
+          }
+        },
+
+        deleteProfile: async (id) => {
+          try {
+            await deleteGitIdentity(id);
+
+            if (get().selectedProfileId === id) {
+              set({ selectedProfileId: null });
+            }
+
+            await get().loadProfiles();
+            return true;
+          } catch (error) {
+            console.error("Failed to delete git identity profile:", error);
+            return false;
+          }
+        },
+
+        getProfileById: (id) => {
+          const { profiles, globalIdentity } = get();
+          if (id === 'global') {
+            return globalIdentity || undefined;
+          }
+          return profiles.find((p) => p.id === id);
+        },
+      }),
+      {
+        name: "git-identities-store",
+        storage: createJSONStorage(() => getSafeStorage()),
+        partialize: (state) => ({
+          selectedProfileId: state.selectedProfileId,
+        }),
+      },
+    ),
+    {
+      name: "git-identities-store",
+    },
+  ),
+);
+
+if (typeof window !== "undefined") {
+  window.__zustand_git_identities_store__ = useGitIdentitiesStore;
+}
diff --git a/packages/ui/src/stores/useGitStore.ts b/packages/ui/src/stores/useGitStore.ts
new file mode 100644
index 00000000..c895fee3
--- /dev/null
+++ b/packages/ui/src/stores/useGitStore.ts
@@ -0,0 +1,391 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import type {
+  GitStatus,
+  GitBranch,
+  GitLogResponse,
+  GitIdentitySummary,
+} from '@/lib/api/types';
+
+const GIT_POLL_INTERVAL = 3000;
+const LOG_STALE_THRESHOLD = 30000;
+
+interface DirectoryGitState {
+  isGitRepo: boolean | null;
+  status: GitStatus | null;
+  branches: GitBranch | null;
+  log: GitLogResponse | null;
+  identity: GitIdentitySummary | null;
+  diffCache: Map<string, { original: string; modified: string; fetchedAt: number }>;
+  lastStatusFetch: number;
+  lastStatusChange: number;
+  lastLogFetch: number;
+  logMaxCount: number;
+}
+
+interface GitStore {
+
+  directories: Map<string, DirectoryGitState>;
+
+  activeDirectory: string | null;
+
+  isLoadingStatus: boolean;
+  isLoadingLog: boolean;
+  isLoadingBranches: boolean;
+  isLoadingIdentity: boolean;
+
+  pollIntervalId: ReturnType<typeof setInterval> | null;
+
+  setActiveDirectory: (directory: string | null) => void;
+  getDirectoryState: (directory: string) => DirectoryGitState | null;
+
+  fetchStatus: (directory: string, git: GitAPI, options?: { silent?: boolean }) => Promise<boolean>;
+  fetchBranches: (directory: string, git: GitAPI) => Promise<void>;
+  fetchLog: (directory: string, git: GitAPI, maxCount?: number) => Promise<void>;
+  fetchIdentity: (directory: string, git: GitAPI) => Promise<void>;
+  fetchAll: (directory: string, git: GitAPI, options?: { force?: boolean }) => Promise<void>;
+
+  getDiff: (directory: string, filePath: string) => { original: string; modified: string; fetchedAt: number } | null;
+  setDiff: (directory: string, filePath: string, diff: { original: string; modified: string }) => void;
+  clearDiffCache: (directory: string) => void;
+
+  setLogMaxCount: (directory: string, maxCount: number) => void;
+
+  startPolling: (git: GitAPI) => void;
+  stopPolling: () => void;
+
+  refresh: (git: GitAPI, options?: { force?: boolean }) => Promise<void>;
+}
+
+interface GitAPI {
+  checkIsGitRepository: (directory: string) => Promise<boolean>;
+  getGitStatus: (directory: string) => Promise<GitStatus>;
+  getGitBranches: (directory: string) => Promise<GitBranch>;
+  getGitLog: (directory: string, options?: { maxCount?: number }) => Promise<GitLogResponse>;
+  getCurrentGitIdentity: (directory: string) => Promise<GitIdentitySummary | null>;
+}
+
+const createEmptyDirectoryState = (): DirectoryGitState => ({
+  isGitRepo: null,
+  status: null,
+  branches: null,
+  log: null,
+  identity: null,
+  diffCache: new Map(),
+  lastStatusFetch: 0,
+  lastStatusChange: 0,
+  lastLogFetch: 0,
+  logMaxCount: 25,
+});
+
+const hasStatusChanged = (oldStatus: GitStatus | null, newStatus: GitStatus | null): boolean => {
+  if (!oldStatus && !newStatus) return false;
+  if (!oldStatus || !newStatus) return true;
+
+  const oldFiles = oldStatus.files ?? [];
+  const newFiles = newStatus.files ?? [];
+
+  if (oldFiles.length !== newFiles.length) return true;
+  if (oldStatus.ahead !== newStatus.ahead) return true;
+  if (oldStatus.behind !== newStatus.behind) return true;
+  if (oldStatus.current !== newStatus.current) return true;
+
+  const oldPaths = new Set(oldFiles.map(f => `${f.path}:${f.index}:${f.working_dir}`));
+  for (const file of newFiles) {
+    if (!oldPaths.has(`${file.path}:${file.index}:${file.working_dir}`)) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+export const useGitStore = create<GitStore>()(
+  devtools(
+    (set, get) => ({
+      directories: new Map(),
+      activeDirectory: null,
+      isLoadingStatus: false,
+      isLoadingLog: false,
+      isLoadingBranches: false,
+      isLoadingIdentity: false,
+      pollIntervalId: null,
+
+      setActiveDirectory: (directory) => {
+        const { activeDirectory, directories } = get();
+        if (activeDirectory === directory) return;
+
+        if (directory && !directories.has(directory)) {
+          const newDirectories = new Map(directories);
+          newDirectories.set(directory, createEmptyDirectoryState());
+          set({ activeDirectory: directory, directories: newDirectories });
+        } else {
+          set({ activeDirectory: directory });
+        }
+      },
+
+      getDirectoryState: (directory) => {
+        return get().directories.get(directory) ?? null;
+      },
+
+      fetchStatus: async (directory, git, options = {}) => {
+        const { silent = false } = options;
+        const { directories } = get();
+        let dirState = directories.get(directory);
+
+        if (!dirState) {
+          dirState = createEmptyDirectoryState();
+        }
+
+        if (!silent) {
+          set({ isLoadingStatus: true });
+        }
+
+        let statusChanged = false;
+
+        try {
+          const isRepo = await git.checkIsGitRepository(directory);
+
+          if (!isRepo) {
+            const newDirectories = new Map(directories);
+            newDirectories.set(directory, {
+              ...dirState,
+              isGitRepo: false,
+              status: null,
+              lastStatusFetch: Date.now(),
+            });
+            set({ directories: newDirectories, isLoadingStatus: false });
+            return false;
+          }
+
+          const newStatus = await git.getGitStatus(directory);
+
+          if (hasStatusChanged(dirState.status, newStatus)) {
+            statusChanged = true;
+            const newDirectories = new Map(get().directories);
+            const currentDirState = newDirectories.get(directory) ?? createEmptyDirectoryState();
+
+            newDirectories.set(directory, {
+              ...currentDirState,
+              isGitRepo: true,
+              status: newStatus,
+              diffCache: new Map(),
+              lastStatusFetch: Date.now(),
+              lastStatusChange: Date.now(),
+            });
+            set({ directories: newDirectories });
+          } else {
+
+            const newDirectories = new Map(get().directories);
+            const currentDirState = newDirectories.get(directory) ?? createEmptyDirectoryState();
+            newDirectories.set(directory, {
+              ...currentDirState,
+              isGitRepo: true,
+              lastStatusFetch: Date.now(),
+              lastStatusChange: currentDirState.lastStatusChange,
+            });
+            set({ directories: newDirectories });
+          }
+        } catch (error) {
+          console.error('Failed to fetch git status:', error);
+        } finally {
+          if (!silent) {
+            set({ isLoadingStatus: false });
+          }
+        }
+
+        return statusChanged;
+      },
+
+      fetchBranches: async (directory, git) => {
+        set({ isLoadingBranches: true });
+
+        try {
+          const branches = await git.getGitBranches(directory);
+          const newDirectories = new Map(get().directories);
+          const dirState = newDirectories.get(directory) ?? createEmptyDirectoryState();
+          newDirectories.set(directory, { ...dirState, branches });
+          set({ directories: newDirectories });
+        } catch (error) {
+          console.error('Failed to fetch git branches:', error);
+        } finally {
+          set({ isLoadingBranches: false });
+        }
+      },
+
+      fetchLog: async (directory, git, maxCount) => {
+        const { directories } = get();
+        const dirState = directories.get(directory);
+        const effectiveMaxCount = maxCount ?? dirState?.logMaxCount ?? 25;
+
+        set({ isLoadingLog: true });
+
+        try {
+          const log = await git.getGitLog(directory, { maxCount: effectiveMaxCount });
+          const newDirectories = new Map(get().directories);
+          const currentDirState = newDirectories.get(directory) ?? createEmptyDirectoryState();
+          newDirectories.set(directory, {
+            ...currentDirState,
+            log,
+            lastLogFetch: Date.now(),
+            logMaxCount: effectiveMaxCount,
+          });
+          set({ directories: newDirectories });
+        } catch (error) {
+          console.error('Failed to fetch git log:', error);
+        } finally {
+          set({ isLoadingLog: false });
+        }
+      },
+
+      fetchIdentity: async (directory, git) => {
+        set({ isLoadingIdentity: true });
+
+        try {
+          const identity = await git.getCurrentGitIdentity(directory);
+          const newDirectories = new Map(get().directories);
+          const dirState = newDirectories.get(directory) ?? createEmptyDirectoryState();
+          newDirectories.set(directory, { ...dirState, identity });
+          set({ directories: newDirectories });
+        } catch (error) {
+          console.error('Failed to fetch git identity:', error);
+        } finally {
+          set({ isLoadingIdentity: false });
+        }
+      },
+
+      fetchAll: async (directory, git, options = {}) => {
+        const { directories } = get();
+        let dirState = directories.get(directory);
+
+        if (!dirState) {
+          dirState = createEmptyDirectoryState();
+          const newDirectories = new Map(directories);
+          newDirectories.set(directory, dirState);
+          set({ directories: newDirectories });
+        }
+
+        const { force = false } = options;
+        const now = Date.now();
+
+        await get().fetchStatus(directory, git);
+
+        const updatedDirState = get().directories.get(directory);
+        if (!updatedDirState?.isGitRepo) return;
+
+        await get().fetchBranches(directory, git);
+
+        const logAge = now - (updatedDirState.lastLogFetch || 0);
+        if (force || logAge > LOG_STALE_THRESHOLD || !updatedDirState.log) {
+          await get().fetchLog(directory, git);
+        }
+
+        await get().fetchIdentity(directory, git);
+      },
+
+      getDiff: (directory, filePath) => {
+        const dirState = get().directories.get(directory);
+        return dirState?.diffCache.get(filePath) ?? null;
+      },
+
+      setDiff: (directory, filePath, diff) => {
+        const newDirectories = new Map(get().directories);
+        const dirState = newDirectories.get(directory) ?? createEmptyDirectoryState();
+        const newDiffCache = new Map(dirState.diffCache);
+        newDiffCache.set(filePath, { ...diff, fetchedAt: Date.now() });
+        newDirectories.set(directory, { ...dirState, diffCache: newDiffCache });
+        set({ directories: newDirectories });
+      },
+
+      clearDiffCache: (directory) => {
+        const newDirectories = new Map(get().directories);
+        const dirState = newDirectories.get(directory);
+        if (dirState) {
+          newDirectories.set(directory, { ...dirState, diffCache: new Map() });
+          set({ directories: newDirectories });
+        }
+      },
+
+      setLogMaxCount: (directory, maxCount) => {
+        const newDirectories = new Map(get().directories);
+        const dirState = newDirectories.get(directory) ?? createEmptyDirectoryState();
+        newDirectories.set(directory, { ...dirState, logMaxCount: maxCount });
+        set({ directories: newDirectories });
+      },
+
+      startPolling: (git) => {
+        const { pollIntervalId } = get();
+        if (pollIntervalId) return;
+
+        const intervalId = setInterval(async () => {
+          const { activeDirectory } = get();
+          if (!activeDirectory) return;
+
+          const statusChanged = await get().fetchStatus(activeDirectory, git, { silent: true });
+          if (statusChanged) {
+            await get().fetchLog(activeDirectory, git);
+          }
+        }, GIT_POLL_INTERVAL);
+
+        set({ pollIntervalId: intervalId });
+      },
+
+      stopPolling: () => {
+        const { pollIntervalId } = get();
+        if (pollIntervalId) {
+          clearInterval(pollIntervalId);
+          set({ pollIntervalId: null });
+        }
+      },
+
+      refresh: async (git, options = {}) => {
+        const { activeDirectory } = get();
+        if (!activeDirectory) return;
+        await get().fetchAll(activeDirectory, git, options);
+      },
+    }),
+    { name: 'git-store' }
+  )
+);
+
+export const useGitStatus = (directory: string | null) => {
+  return useGitStore((state) => {
+    if (!directory) return null;
+    return state.directories.get(directory)?.status ?? null;
+  });
+};
+
+export const useGitBranches = (directory: string | null) => {
+  return useGitStore((state) => {
+    if (!directory) return null;
+    return state.directories.get(directory)?.branches ?? null;
+  });
+};
+
+export const useGitLog = (directory: string | null) => {
+  return useGitStore((state) => {
+    if (!directory) return null;
+    return state.directories.get(directory)?.log ?? null;
+  });
+};
+
+export const useGitIdentity = (directory: string | null) => {
+  return useGitStore((state) => {
+    if (!directory) return null;
+    return state.directories.get(directory)?.identity ?? null;
+  });
+};
+
+export const useIsGitRepo = (directory: string | null) => {
+  return useGitStore((state) => {
+    if (!directory) return null;
+    return state.directories.get(directory)?.isGitRepo ?? null;
+  });
+};
+
+export const useGitFileCount = (directory: string | null) => {
+  return useGitStore((state) => {
+    if (!directory) return 0;
+    return state.directories.get(directory)?.status?.files?.length ?? 0;
+  });
+};
diff --git a/packages/ui/src/stores/useSessionStore.ts b/packages/ui/src/stores/useSessionStore.ts
new file mode 100644
index 00000000..2ff2ee0f
--- /dev/null
+++ b/packages/ui/src/stores/useSessionStore.ts
@@ -0,0 +1,453 @@
+import { create } from "zustand";
+import type { StoreApi, UseBoundStore } from "zustand";
+import { devtools } from "zustand/middleware";
+import type { Session, Message, Part } from "@opencode-ai/sdk";
+import type { Permission, PermissionResponse } from "@/types/permission";
+import type { SessionStore, AttachedFile, EditPermissionMode } from "./types/sessionTypes";
+import { ACTIVE_SESSION_WINDOW, MEMORY_LIMITS } from "./types/sessionTypes";
+
+import { useSessionStore as useSessionManagementStore } from "./sessionStore";
+import { useMessageStore } from "./messageStore";
+import { useFileStore } from "./fileStore";
+import { useContextStore } from "./contextStore";
+import { usePermissionStore } from "./permissionStore";
+import { opencodeClient } from "@/lib/opencode/client";
+import { useDirectoryStore } from "./useDirectoryStore";
+
+export type { AttachedFile, EditPermissionMode };
+export { MEMORY_LIMITS, ACTIVE_SESSION_WINDOW } from "./types/sessionTypes";
+
+declare global {
+    interface Window {
+        __zustand_session_store__?: UseBoundStore<StoreApi<SessionStore>>;
+    }
+}
+
+const normalizePath = (value?: string | null): string | null => {
+    if (typeof value !== "string") {
+        return null;
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return null;
+    }
+    const replaced = trimmed.replace(/\\/g, "/");
+    if (replaced === "/") {
+        return "/";
+    }
+    return replaced.length > 1 ? replaced.replace(/\/+$/, "") : replaced;
+};
+
+const resolveSessionDirectory = (
+    sessions: Session[],
+    sessionId: string | null | undefined,
+    getWorktreeMetadata: (id: string) => { path?: string } | undefined,
+): string | null => {
+    if (!sessionId) {
+        return null;
+    }
+    const metadataPath = getWorktreeMetadata(sessionId)?.path;
+    if (typeof metadataPath === "string" && metadataPath.trim().length > 0) {
+        return normalizePath(metadataPath);
+    }
+
+    const target = sessions.find((session) => session.id === sessionId) as { directory?: string | null } | undefined;
+    if (!target) {
+        return null;
+    }
+    return normalizePath(target.directory ?? null);
+};
+
+export const useSessionStore = create<SessionStore>()(
+    devtools(
+        (set, get) => ({
+
+            sessions: [],
+            currentSessionId: null,
+            lastLoadedDirectory: null,
+            messages: new Map(),
+            sessionMemoryState: new Map(),
+            messageStreamStates: new Map(),
+            sessionCompactionUntil: new Map(),
+            sessionAbortFlags: new Map(),
+            permissions: new Map(),
+            attachedFiles: [],
+            isLoading: false,
+            error: null,
+            streamingMessageIds: new Map(),
+            abortControllers: new Map(),
+            lastUsedProvider: null,
+            isSyncing: false,
+            sessionModelSelections: new Map(),
+            sessionAgentSelections: new Map(),
+            sessionAgentModelSelections: new Map(),
+            webUICreatedSessions: new Set(),
+            worktreeMetadata: new Map(),
+            availableWorktrees: [],
+            currentAgentContext: new Map(),
+            sessionContextUsage: new Map(),
+            sessionAgentEditModes: new Map(),
+            abortPromptSessionId: null,
+            abortPromptExpiresAt: null,
+            sessionActivityPhase: new Map(),
+            userSummaryTitles: new Map(),
+
+                getSessionAgentEditMode: (sessionId: string, agentName: string | undefined, defaultMode?: EditPermissionMode) => {
+                    return useContextStore.getState().getSessionAgentEditMode(sessionId, agentName, defaultMode);
+                },
+
+                toggleSessionAgentEditMode: (sessionId: string, agentName: string | undefined, defaultMode?: EditPermissionMode) => {
+                    return useContextStore.getState().toggleSessionAgentEditMode(sessionId, agentName, defaultMode);
+                },
+
+                setSessionAgentEditMode: (sessionId: string, agentName: string | undefined, mode: EditPermissionMode, defaultMode?: EditPermissionMode) => {
+                    return useContextStore.getState().setSessionAgentEditMode(sessionId, agentName, mode, defaultMode);
+                },
+
+                loadSessions: () => useSessionManagementStore.getState().loadSessions(),
+                createSession: async (title?: string, directoryOverride?: string | null) => {
+                    const result = await useSessionManagementStore.getState().createSession(title, directoryOverride);
+
+                    if (result?.id) {
+                        await get().setCurrentSession(result.id);
+                    }
+                    return result;
+                },
+                deleteSession: (id: string, options) => useSessionManagementStore.getState().deleteSession(id, options),
+                deleteSessions: (ids: string[], options) => useSessionManagementStore.getState().deleteSessions(ids, options),
+                updateSessionTitle: (id: string, title: string) => useSessionManagementStore.getState().updateSessionTitle(id, title),
+                shareSession: (id: string) => useSessionManagementStore.getState().shareSession(id),
+                unshareSession: (id: string) => useSessionManagementStore.getState().unshareSession(id),
+                setCurrentSession: async (id: string | null) => {
+                    const previousSessionId = get().currentSessionId;
+
+                    const sessionDirectory = resolveSessionDirectory(
+                        useSessionManagementStore.getState().sessions,
+                        id,
+                        useSessionManagementStore.getState().getWorktreeMetadata
+                    );
+                    const fallbackDirectory = opencodeClient.getDirectory() ?? useDirectoryStore.getState().currentDirectory ?? null;
+                    const resolvedDirectory = sessionDirectory ?? fallbackDirectory;
+
+                    try {
+                        opencodeClient.setDirectory(resolvedDirectory ?? undefined);
+                    } catch (error) {
+                        console.warn("Failed to set OpenCode directory for session switch:", error);
+                    }
+
+                    if (previousSessionId && previousSessionId !== id) {
+                        const memoryState = get().sessionMemoryState.get(previousSessionId);
+                        if (!memoryState?.isStreaming) {
+
+                            const previousMessages = get().messages.get(previousSessionId) || [];
+                            if (previousMessages.length > 0) {
+                                get().updateViewportAnchor(previousSessionId, previousMessages.length - 1);
+                            }
+
+                            get().trimToViewportWindow(previousSessionId, MEMORY_LIMITS.VIEWPORT_MESSAGES);
+                        }
+                    }
+
+                    useSessionManagementStore.getState().setCurrentSession(id);
+
+                    if (id) {
+
+                        const existingMessages = get().messages.get(id);
+                        if (!existingMessages) {
+
+                            await get().loadMessages(id);
+                        }
+
+                        get().trimToViewportWindow(id, ACTIVE_SESSION_WINDOW);
+                    }
+
+                    get().evictLeastRecentlyUsed();
+                },
+                loadMessages: (sessionId: string) => useMessageStore.getState().loadMessages(sessionId),
+                sendMessage: (content: string, providerID: string, modelID: string, agent?: string, attachments?: AttachedFile[], agentMentionName?: string) => {
+                    const currentSessionId = useSessionManagementStore.getState().currentSessionId;
+                    return useMessageStore.getState().sendMessage(content, providerID, modelID, agent, currentSessionId || undefined, attachments, agentMentionName);
+                },
+                abortCurrentOperation: () => {
+                    const currentSessionId = useSessionManagementStore.getState().currentSessionId;
+                    return useMessageStore.getState().abortCurrentOperation(currentSessionId || undefined);
+                },
+                armAbortPrompt: (durationMs = 3000) => {
+                    const sessionId = useSessionManagementStore.getState().currentSessionId;
+                    if (!sessionId) {
+                        return null;
+                    }
+                    const expiresAt = Date.now() + durationMs;
+                    set({ abortPromptSessionId: sessionId, abortPromptExpiresAt: expiresAt });
+                    return expiresAt;
+                },
+                clearAbortPrompt: () => {
+                    set({ abortPromptSessionId: null, abortPromptExpiresAt: null });
+                },
+                acknowledgeSessionAbort: (sessionId: string) => {
+                    if (!sessionId) {
+                        return;
+                    }
+                    useMessageStore.getState().acknowledgeSessionAbort(sessionId);
+                },
+                addStreamingPart: (sessionId: string, messageId: string, part: Part, role?: string) => {
+                    const currentSessionId = useSessionManagementStore.getState().currentSessionId;
+
+                    const effectiveCurrent = currentSessionId || sessionId;
+                    return useMessageStore.getState().addStreamingPart(sessionId, messageId, part, role, effectiveCurrent);
+                },
+                completeStreamingMessage: (sessionId: string, messageId: string) => useMessageStore.getState().completeStreamingMessage(sessionId, messageId),
+                markMessageStreamSettled: (messageId: string) => useMessageStore.getState().markMessageStreamSettled(messageId),
+                updateMessageInfo: (sessionId: string, messageId: string, messageInfo: Record<string, unknown>) => useMessageStore.getState().updateMessageInfo(sessionId, messageId, messageInfo),
+                updateSessionCompaction: (sessionId: string, compactingTimestamp?: number | null) => useMessageStore.getState().updateSessionCompaction(sessionId, compactingTimestamp ?? null),
+                addPermission: (permission: Permission) => {
+                    const contextData = {
+                        currentAgentContext: useContextStore.getState().currentAgentContext,
+                        sessionAgentSelections: useContextStore.getState().sessionAgentSelections,
+                        getSessionAgentEditMode: useContextStore.getState().getSessionAgentEditMode,
+                    };
+                    return usePermissionStore.getState().addPermission(permission, contextData);
+                },
+                respondToPermission: (sessionId: string, permissionId: string, response: PermissionResponse) => usePermissionStore.getState().respondToPermission(sessionId, permissionId, response),
+                clearError: () => useSessionManagementStore.getState().clearError(),
+                getSessionsByDirectory: (directory: string) => useSessionManagementStore.getState().getSessionsByDirectory(directory),
+                getLastMessageModel: (sessionId: string) => useMessageStore.getState().getLastMessageModel(sessionId),
+                getCurrentAgent: (sessionId: string) => useContextStore.getState().getCurrentAgent(sessionId),
+                syncMessages: (sessionId: string, messages: { info: Message; parts: Part[] }[]) => useMessageStore.getState().syncMessages(sessionId, messages),
+                applySessionMetadata: (sessionId: string, metadata: Partial<Session>) => useSessionManagementStore.getState().applySessionMetadata(sessionId, metadata),
+
+                addAttachedFile: (file: File) => useFileStore.getState().addAttachedFile(file),
+                addServerFile: (path: string, name: string, content?: string) => useFileStore.getState().addServerFile(path, name, content),
+                removeAttachedFile: (id: string) => useFileStore.getState().removeAttachedFile(id),
+                clearAttachedFiles: () => useFileStore.getState().clearAttachedFiles(),
+
+                updateViewportAnchor: (sessionId: string, anchor: number) => useMessageStore.getState().updateViewportAnchor(sessionId, anchor),
+                trimToViewportWindow: (sessionId: string, targetSize?: number) => {
+                    const currentSessionId = useSessionManagementStore.getState().currentSessionId;
+                    return useMessageStore.getState().trimToViewportWindow(sessionId, targetSize, currentSessionId || undefined);
+                },
+                evictLeastRecentlyUsed: () => {
+                    const currentSessionId = useSessionManagementStore.getState().currentSessionId;
+                    return useMessageStore.getState().evictLeastRecentlyUsed(currentSessionId || undefined);
+                },
+                loadMoreMessages: (sessionId: string, direction: "up" | "down") => useMessageStore.getState().loadMoreMessages(sessionId, direction),
+
+                saveSessionModelSelection: (sessionId: string, providerId: string, modelId: string) => useContextStore.getState().saveSessionModelSelection(sessionId, providerId, modelId),
+                getSessionModelSelection: (sessionId: string) => useContextStore.getState().getSessionModelSelection(sessionId),
+                saveSessionAgentSelection: (sessionId: string, agentName: string) => useContextStore.getState().saveSessionAgentSelection(sessionId, agentName),
+                getSessionAgentSelection: (sessionId: string) => useContextStore.getState().getSessionAgentSelection(sessionId),
+                saveAgentModelForSession: (sessionId: string, agentName: string, providerId: string, modelId: string) => useContextStore.getState().saveAgentModelForSession(sessionId, agentName, providerId, modelId),
+                getAgentModelForSession: (sessionId: string, agentName: string) => useContextStore.getState().getAgentModelForSession(sessionId, agentName),
+                analyzeAndSaveExternalSessionChoices: (sessionId: string, agents: Record<string, unknown>[]) => {
+                    const messages = useMessageStore.getState().messages;
+                    return useContextStore.getState().analyzeAndSaveExternalSessionChoices(sessionId, agents, messages);
+                },
+                isOpenChamberCreatedSession: (sessionId: string) => useSessionManagementStore.getState().isOpenChamberCreatedSession(sessionId),
+                markSessionAsOpenChamberCreated: (sessionId: string) => useSessionManagementStore.getState().markSessionAsOpenChamberCreated(sessionId),
+                initializeNewOpenChamberSession: (sessionId: string, agents: Record<string, unknown>[]) => useSessionManagementStore.getState().initializeNewOpenChamberSession(sessionId, agents),
+                setWorktreeMetadata: (sessionId: string, metadata) => useSessionManagementStore.getState().setWorktreeMetadata(sessionId, metadata),
+                setSessionDirectory: (sessionId: string, directory: string | null) => useSessionManagementStore.getState().setSessionDirectory(sessionId, directory),
+                getWorktreeMetadata: (sessionId: string) => useSessionManagementStore.getState().getWorktreeMetadata(sessionId),
+                getContextUsage: (contextLimit: number, outputLimit: number) => {
+                    const currentSessionId = useSessionManagementStore.getState().currentSessionId;
+                    if (!currentSessionId) return null;
+                    const messages = useMessageStore.getState().messages;
+                    return useContextStore.getState().getContextUsage(currentSessionId, contextLimit, outputLimit, messages);
+                },
+                updateSessionContextUsage: (sessionId: string, contextLimit: number, outputLimit: number) => {
+                    const messages = useMessageStore.getState().messages;
+                    return useContextStore.getState().updateSessionContextUsage(sessionId, contextLimit, outputLimit, messages);
+                },
+                initializeSessionContextUsage: (sessionId: string, contextLimit: number, outputLimit: number) => {
+                    const messages = useMessageStore.getState().messages;
+                    return useContextStore.getState().initializeSessionContextUsage(sessionId, contextLimit, outputLimit, messages);
+                },
+                debugSessionMessages: async (sessionId: string) => {
+                    const messages = useMessageStore.getState().messages.get(sessionId) || [];
+                    const session = useSessionManagementStore.getState().sessions.find(s => s.id === sessionId);
+                    console.log(`Debug session ${sessionId}:`, {
+                        session,
+                        messageCount: messages.length,
+                        messages: messages.map(m => ({
+                            id: m.info.id,
+                            role: m.info.role,
+                            parts: m.parts.length,
+                            tokens: (m.info as Record<string, unknown>).tokens
+                        }))
+                    });
+                },
+                pollForTokenUpdates: (sessionId: string, messageId: string, maxAttempts?: number) => {
+                    const messages = useMessageStore.getState().messages;
+                    return useContextStore.getState().pollForTokenUpdates(sessionId, messageId, messages, maxAttempts);
+                },
+                updateSession: (session: Session) => useSessionManagementStore.getState().updateSession(session),
+            }),
+        {
+            name: "composed-session-store",
+        }
+    ),
+);
+
+useSessionManagementStore.subscribe((state, prevState) => {
+
+    if (
+        state.sessions === prevState.sessions &&
+        state.currentSessionId === prevState.currentSessionId &&
+        state.lastLoadedDirectory === prevState.lastLoadedDirectory &&
+        state.isLoading === prevState.isLoading &&
+        state.error === prevState.error &&
+        state.webUICreatedSessions === prevState.webUICreatedSessions &&
+        state.worktreeMetadata === prevState.worktreeMetadata &&
+        state.availableWorktrees === prevState.availableWorktrees
+    ) {
+        return;
+    }
+
+    useSessionStore.setState({
+        sessions: state.sessions,
+        currentSessionId: state.currentSessionId,
+        lastLoadedDirectory: state.lastLoadedDirectory,
+        isLoading: state.isLoading,
+        error: state.error,
+        webUICreatedSessions: state.webUICreatedSessions,
+        worktreeMetadata: state.worktreeMetadata,
+        availableWorktrees: state.availableWorktrees,
+    });
+});
+
+useMessageStore.subscribe((state, prevState) => {
+
+    if (
+        state.messages === prevState.messages &&
+        state.sessionMemoryState === prevState.sessionMemoryState &&
+        state.messageStreamStates === prevState.messageStreamStates &&
+        state.sessionCompactionUntil === prevState.sessionCompactionUntil &&
+        state.sessionAbortFlags === prevState.sessionAbortFlags &&
+        state.streamingMessageIds === prevState.streamingMessageIds &&
+        state.abortControllers === prevState.abortControllers &&
+        state.lastUsedProvider === prevState.lastUsedProvider &&
+        state.isSyncing === prevState.isSyncing
+    ) {
+        return;
+    }
+
+    const userSummaryTitles = new Map<string, { title: string; createdAt: number | null }>();
+    state.messages.forEach((messageList, sessionId) => {
+        if (!Array.isArray(messageList) || messageList.length === 0) {
+            return;
+        }
+        for (let index = messageList.length - 1; index >= 0; index -= 1) {
+            const entry = messageList[index];
+            if (!entry || !entry.info) {
+                continue;
+            }
+            const info = entry.info as Message & {
+                summary?: { title?: string | null } | null;
+                time?: { created?: number | null };
+            };
+            if (info.role === "user") {
+                const title = info.summary?.title;
+                if (typeof title === "string") {
+                    const trimmed = title.trim();
+                    if (trimmed.length > 0) {
+                        const createdAt =
+                            info.time && typeof info.time.created === "number"
+                                ? info.time.created
+                                : null;
+                        userSummaryTitles.set(sessionId, { title: trimmed, createdAt });
+                        break;
+                    }
+                }
+            }
+        }
+    });
+
+    useSessionStore.setState({
+        messages: state.messages,
+        sessionMemoryState: state.sessionMemoryState,
+        messageStreamStates: state.messageStreamStates,
+        sessionCompactionUntil: state.sessionCompactionUntil,
+        sessionAbortFlags: state.sessionAbortFlags,
+        streamingMessageIds: state.streamingMessageIds,
+        abortControllers: state.abortControllers,
+        lastUsedProvider: state.lastUsedProvider,
+        isSyncing: state.isSyncing,
+        userSummaryTitles,
+    });
+});
+
+useFileStore.subscribe((state, prevState) => {
+    if (state.attachedFiles === prevState.attachedFiles) {
+        return;
+    }
+
+    useSessionStore.setState({
+        attachedFiles: state.attachedFiles,
+    });
+});
+
+useContextStore.subscribe((state, prevState) => {
+    if (
+        state.sessionModelSelections === prevState.sessionModelSelections &&
+        state.sessionAgentSelections === prevState.sessionAgentSelections &&
+        state.sessionAgentModelSelections === prevState.sessionAgentModelSelections &&
+        state.currentAgentContext === prevState.currentAgentContext &&
+        state.sessionContextUsage === prevState.sessionContextUsage &&
+        state.sessionAgentEditModes === prevState.sessionAgentEditModes
+    ) {
+        return;
+    }
+
+    useSessionStore.setState({
+        sessionModelSelections: state.sessionModelSelections,
+        sessionAgentSelections: state.sessionAgentSelections,
+        sessionAgentModelSelections: state.sessionAgentModelSelections,
+        currentAgentContext: state.currentAgentContext,
+        sessionContextUsage: state.sessionContextUsage,
+        sessionAgentEditModes: state.sessionAgentEditModes,
+    });
+});
+
+usePermissionStore.subscribe((state, prevState) => {
+    if (state.permissions === prevState.permissions) {
+        return;
+    }
+
+    useSessionStore.setState({
+        permissions: state.permissions,
+    });
+});
+
+useSessionStore.setState({
+    sessions: useSessionManagementStore.getState().sessions,
+    currentSessionId: useSessionManagementStore.getState().currentSessionId,
+    lastLoadedDirectory: useSessionManagementStore.getState().lastLoadedDirectory,
+    isLoading: useSessionManagementStore.getState().isLoading,
+    error: useSessionManagementStore.getState().error,
+    webUICreatedSessions: useSessionManagementStore.getState().webUICreatedSessions,
+    worktreeMetadata: useSessionManagementStore.getState().worktreeMetadata,
+    availableWorktrees: useSessionManagementStore.getState().availableWorktrees,
+    messages: useMessageStore.getState().messages,
+    sessionMemoryState: useMessageStore.getState().sessionMemoryState,
+    messageStreamStates: useMessageStore.getState().messageStreamStates,
+    sessionCompactionUntil: useMessageStore.getState().sessionCompactionUntil,
+    sessionAbortFlags: useMessageStore.getState().sessionAbortFlags,
+    streamingMessageIds: useMessageStore.getState().streamingMessageIds,
+    abortControllers: useMessageStore.getState().abortControllers,
+    lastUsedProvider: useMessageStore.getState().lastUsedProvider,
+    isSyncing: useMessageStore.getState().isSyncing,
+    permissions: usePermissionStore.getState().permissions,
+    attachedFiles: useFileStore.getState().attachedFiles,
+    sessionModelSelections: useContextStore.getState().sessionModelSelections,
+    sessionAgentSelections: useContextStore.getState().sessionAgentSelections,
+    sessionAgentModelSelections: useContextStore.getState().sessionAgentModelSelections,
+    currentAgentContext: useContextStore.getState().currentAgentContext,
+    sessionContextUsage: useContextStore.getState().sessionContextUsage,
+    sessionAgentEditModes: useContextStore.getState().sessionAgentEditModes,
+    abortPromptSessionId: null,
+    abortPromptExpiresAt: null,
+});
+
+if (typeof window !== "undefined") {
+    window.__zustand_session_store__ = useSessionStore;
+}
diff --git a/packages/ui/src/stores/useTerminalStore.ts b/packages/ui/src/stores/useTerminalStore.ts
new file mode 100644
index 00000000..126c83ee
--- /dev/null
+++ b/packages/ui/src/stores/useTerminalStore.ts
@@ -0,0 +1,175 @@
+import { create } from 'zustand';
+import type { TerminalSession } from '@/lib/terminalApi';
+
+export interface TerminalChunk {
+  id: number;
+  data: string;
+}
+
+interface TerminalSessionState {
+  sessionId: string;
+  terminalSessionId: string | null;
+  directory: string;
+  isConnecting: boolean;
+  buffer: string;
+  bufferChunks: TerminalChunk[];
+  bufferLength: number;
+  updatedAt: number;
+}
+
+interface TerminalStore {
+  sessions: Map<string, TerminalSessionState>;
+  nextChunkId: number;
+
+  getTerminalSession: (sessionId: string) => TerminalSessionState | undefined;
+  setTerminalSession: (sessionId: string, terminalSession: TerminalSession, directory: string) => void;
+  setConnecting: (sessionId: string, isConnecting: boolean) => void;
+  appendToBuffer: (sessionId: string, chunk: string) => void;
+  clearTerminalSession: (sessionId: string) => void;
+  clearBuffer: (sessionId: string) => void;
+  removeTerminalSession: (sessionId: string) => void;
+  clearAllTerminalSessions: () => void;
+}
+
+const TERMINAL_BUFFER_LIMIT = 60_000;
+
+const createEmptySessionState = (sessionId: string): TerminalSessionState => ({
+  sessionId,
+  terminalSessionId: null,
+  directory: '',
+  isConnecting: false,
+  buffer: '',
+  bufferChunks: [],
+  bufferLength: 0,
+  updatedAt: Date.now(),
+});
+
+export const useTerminalStore = create<TerminalStore>((set, get) => ({
+  sessions: new Map(),
+  nextChunkId: 1,
+
+  getTerminalSession: (sessionId: string) => {
+    return get().sessions.get(sessionId);
+  },
+
+  setTerminalSession: (sessionId: string, terminalSession: TerminalSession, directory: string) => {
+    set((state) => {
+      const newSessions = new Map(state.sessions);
+      const existing = newSessions.get(sessionId);
+      const shouldResetBuffer =
+        !existing ||
+        existing.terminalSessionId !== terminalSession.sessionId ||
+        existing.directory !== directory;
+
+      const baseState = shouldResetBuffer
+        ? createEmptySessionState(sessionId)
+        : existing ?? createEmptySessionState(sessionId);
+
+      newSessions.set(sessionId, {
+        ...baseState,
+        terminalSessionId: terminalSession.sessionId,
+        directory,
+        isConnecting: false,
+        updatedAt: Date.now(),
+      });
+
+      return { sessions: newSessions };
+    });
+  },
+
+  setConnecting: (sessionId: string, isConnecting: boolean) => {
+    set((state) => {
+      const newSessions = new Map(state.sessions);
+      const existing = newSessions.get(sessionId) ?? createEmptySessionState(sessionId);
+      newSessions.set(sessionId, {
+        ...existing,
+        isConnecting,
+        updatedAt: Date.now(),
+      });
+      return { sessions: newSessions };
+    });
+  },
+
+  appendToBuffer: (sessionId: string, chunk: string) => {
+    if (!chunk) {
+      return;
+    }
+
+    set((state) => {
+      const newSessions = new Map(state.sessions);
+      const existing = newSessions.get(sessionId) ?? createEmptySessionState(sessionId);
+
+      const chunkId = state.nextChunkId;
+      const chunkEntry: TerminalChunk = { id: chunkId, data: chunk };
+
+      const bufferChunks = [...existing.bufferChunks, chunkEntry];
+      let bufferLength = existing.bufferLength + chunk.length;
+
+      while (bufferLength > TERMINAL_BUFFER_LIMIT && bufferChunks.length > 1) {
+        const removed = bufferChunks.shift();
+        if (!removed) {
+          break;
+        }
+        bufferLength -= removed.data.length;
+      }
+
+      const buffer = bufferChunks.map((entry) => entry.data).join('');
+
+      newSessions.set(sessionId, {
+        ...existing,
+        buffer,
+        bufferChunks,
+        bufferLength,
+        updatedAt: Date.now(),
+      });
+
+      return { sessions: newSessions, nextChunkId: chunkId + 1 };
+    });
+  },
+
+  clearTerminalSession: (sessionId: string) => {
+    set((state) => {
+      const newSessions = new Map(state.sessions);
+      const existing = newSessions.get(sessionId);
+      if (existing) {
+        newSessions.set(sessionId, {
+          ...existing,
+          terminalSessionId: null,
+          isConnecting: false,
+          updatedAt: Date.now(),
+        });
+      }
+      return { sessions: newSessions };
+    });
+  },
+
+  clearBuffer: (sessionId: string) => {
+    set((state) => {
+      const newSessions = new Map(state.sessions);
+      const existing = newSessions.get(sessionId);
+      if (!existing) {
+        return state;
+      }
+      newSessions.set(sessionId, {
+        ...existing,
+        buffer: '',
+        bufferChunks: [],
+        bufferLength: 0,
+        updatedAt: Date.now(),
+      });
+      return { sessions: newSessions };
+    });
+  },
+
+  removeTerminalSession: (sessionId: string) => {
+    set((state) => {
+      const newSessions = new Map(state.sessions);
+      newSessions.delete(sessionId);
+      return { sessions: newSessions };
+    });
+  },
+
+  clearAllTerminalSessions: () => {
+    set({ sessions: new Map(), nextChunkId: 1 });
+  },
+}));
diff --git a/packages/ui/src/stores/useUIStore.ts b/packages/ui/src/stores/useUIStore.ts
new file mode 100644
index 00000000..b985c3d7
--- /dev/null
+++ b/packages/ui/src/stores/useUIStore.ts
@@ -0,0 +1,258 @@
+import { create } from 'zustand';
+import { devtools, persist, createJSONStorage } from 'zustand/middleware';
+import type { SidebarSection } from '@/constants/sidebar';
+import { getSafeStorage } from './utils/safeStorage';
+
+export type MainTab = 'chat' | 'git' | 'diff' | 'terminal';
+export type EventStreamStatus =
+  | 'idle'
+  | 'connecting'
+  | 'connected'
+  | 'reconnecting'
+  | 'paused'
+  | 'offline'
+  | 'error';
+
+interface UIStore {
+
+  theme: 'light' | 'dark' | 'system';
+  isSidebarOpen: boolean;
+  sidebarWidth: number;
+  hasManuallyResizedLeftSidebar: boolean;
+  isSessionSwitcherOpen: boolean;
+  activeMainTab: MainTab;
+  pendingDiffFile: string | null;
+  isMobile: boolean;
+  isCommandPaletteOpen: boolean;
+  isHelpDialogOpen: boolean;
+  isSessionCreateDialogOpen: boolean;
+  isSettingsDialogOpen: boolean;
+  sidebarSection: SidebarSection;
+  eventStreamStatus: EventStreamStatus;
+  eventStreamHint: string | null;
+  showReasoningTraces: boolean;
+
+  diffLayoutPreference: 'dynamic' | 'inline' | 'side-by-side';
+  diffFileLayout: Record<string, 'inline' | 'side-by-side'>;
+
+  setTheme: (theme: 'light' | 'dark' | 'system') => void;
+  toggleSidebar: () => void;
+  setSidebarOpen: (open: boolean) => void;
+  setSidebarWidth: (width: number) => void;
+  setSessionSwitcherOpen: (open: boolean) => void;
+  setActiveMainTab: (tab: MainTab) => void;
+  setPendingDiffFile: (filePath: string | null) => void;
+  navigateToDiff: (filePath: string) => void;
+  consumePendingDiffFile: () => string | null;
+  setIsMobile: (isMobile: boolean) => void;
+  toggleCommandPalette: () => void;
+  setCommandPaletteOpen: (open: boolean) => void;
+  toggleHelpDialog: () => void;
+  setHelpDialogOpen: (open: boolean) => void;
+  setSessionCreateDialogOpen: (open: boolean) => void;
+  setSettingsDialogOpen: (open: boolean) => void;
+  applyTheme: () => void;
+  setSidebarSection: (section: SidebarSection) => void;
+  setEventStreamStatus: (status: EventStreamStatus, hint?: string | null) => void;
+  setShowReasoningTraces: (value: boolean) => void;
+  updateProportionalSidebarWidths: () => void;
+  setDiffLayoutPreference: (mode: 'dynamic' | 'inline' | 'side-by-side') => void;
+  setDiffFileLayout: (filePath: string, mode: 'inline' | 'side-by-side') => void;
+}
+
+export const useUIStore = create<UIStore>()(
+  devtools(
+    persist(
+      (set, get) => ({
+
+        theme: 'system',
+        isSidebarOpen: true,
+        sidebarWidth: 264,
+        hasManuallyResizedLeftSidebar: false,
+        isSessionSwitcherOpen: false,
+        activeMainTab: 'chat',
+        pendingDiffFile: null,
+        isMobile: false,
+        isCommandPaletteOpen: false,
+        isHelpDialogOpen: false,
+        isSessionCreateDialogOpen: false,
+        isSettingsDialogOpen: false,
+        sidebarSection: 'sessions',
+        eventStreamStatus: 'idle',
+        eventStreamHint: null,
+        showReasoningTraces: false,
+        diffLayoutPreference: 'dynamic',
+        diffFileLayout: {},
+
+        setTheme: (theme) => {
+          set({ theme });
+          get().applyTheme();
+        },
+
+        toggleSidebar: () => {
+          set((state) => {
+            const newOpen = !state.isSidebarOpen;
+
+            if (newOpen && typeof window !== 'undefined') {
+              const proportionalWidth = Math.floor(window.innerWidth * 0.2);
+              return {
+                isSidebarOpen: newOpen,
+                sidebarWidth: proportionalWidth,
+                hasManuallyResizedLeftSidebar: false
+              };
+            }
+            return { isSidebarOpen: newOpen };
+          });
+        },
+
+        setSidebarOpen: (open) => {
+          set(() => {
+
+            if (open && typeof window !== 'undefined') {
+              const proportionalWidth = Math.floor(window.innerWidth * 0.2);
+              return {
+                isSidebarOpen: open,
+                sidebarWidth: proportionalWidth,
+                hasManuallyResizedLeftSidebar: false
+              };
+            }
+            return { isSidebarOpen: open };
+          });
+        },
+
+        setSidebarWidth: (width) => {
+          set({ sidebarWidth: width, hasManuallyResizedLeftSidebar: true });
+        },
+
+        setSessionSwitcherOpen: (open) => {
+          set({ isSessionSwitcherOpen: open });
+        },
+
+        setActiveMainTab: (tab) => {
+          set({ activeMainTab: tab });
+        },
+
+        setPendingDiffFile: (filePath) => {
+          set({ pendingDiffFile: filePath });
+        },
+
+        navigateToDiff: (filePath) => {
+          set({ pendingDiffFile: filePath, activeMainTab: 'diff' });
+        },
+
+        consumePendingDiffFile: () => {
+          const { pendingDiffFile } = get();
+          if (pendingDiffFile) {
+            set({ pendingDiffFile: null });
+          }
+          return pendingDiffFile;
+        },
+
+        setIsMobile: (isMobile) => {
+          set({ isMobile });
+        },
+
+        toggleCommandPalette: () => {
+          set((state) => ({ isCommandPaletteOpen: !state.isCommandPaletteOpen }));
+        },
+
+        setCommandPaletteOpen: (open) => {
+          set({ isCommandPaletteOpen: open });
+        },
+
+        toggleHelpDialog: () => {
+          set((state) => ({ isHelpDialogOpen: !state.isHelpDialogOpen }));
+        },
+
+        setHelpDialogOpen: (open) => {
+          set({ isHelpDialogOpen: open });
+        },
+
+        setSessionCreateDialogOpen: (open) => {
+          set({ isSessionCreateDialogOpen: open });
+        },
+
+        setSettingsDialogOpen: (open) => {
+          set({ isSettingsDialogOpen: open });
+        },
+
+        setSidebarSection: (section) => {
+          set({ sidebarSection: section });
+        },
+
+        setEventStreamStatus: (status, hint) => {
+          set({
+            eventStreamStatus: status,
+            eventStreamHint: hint ?? null,
+          });
+        },
+
+        setShowReasoningTraces: (value) => {
+          set({ showReasoningTraces: value });
+        },
+
+        setDiffLayoutPreference: (mode) => {
+          set({ diffLayoutPreference: mode });
+        },
+
+        setDiffFileLayout: (filePath, mode) => {
+          set((state) => ({
+            diffFileLayout: {
+              ...state.diffFileLayout,
+              [filePath]: mode,
+            },
+          }));
+        },
+
+        updateProportionalSidebarWidths: () => {
+          if (typeof window === 'undefined') {
+            return;
+          }
+
+          set((state) => {
+            const updates: Partial<UIStore> = {};
+
+            if (state.isSidebarOpen && !state.hasManuallyResizedLeftSidebar) {
+              updates.sidebarWidth = Math.floor(window.innerWidth * 0.2);
+            }
+
+            return updates;
+          });
+        },
+
+        applyTheme: () => {
+          const { theme } = get();
+          const root = document.documentElement;
+
+          root.classList.remove('light', 'dark');
+
+          if (theme === 'system') {
+            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            root.classList.add(systemTheme);
+          } else {
+            root.classList.add(theme);
+          }
+        }
+      }),
+      {
+        name: 'ui-store',
+        storage: createJSONStorage(() => getSafeStorage()),
+        partialize: (state) => ({
+          theme: state.theme,
+          isSidebarOpen: state.isSidebarOpen,
+          sidebarWidth: state.sidebarWidth,
+          isSessionSwitcherOpen: state.isSessionSwitcherOpen,
+          activeMainTab: state.activeMainTab,
+          sidebarSection: state.sidebarSection,
+          isSessionCreateDialogOpen: state.isSessionCreateDialogOpen,
+          isSettingsDialogOpen: state.isSettingsDialogOpen,
+          showReasoningTraces: state.showReasoningTraces,
+          diffLayoutPreference: state.diffLayoutPreference,
+        })
+      }
+    ),
+    {
+      name: 'ui-store'
+    }
+  )
+);
diff --git a/packages/ui/src/stores/utils/contextUtils.ts b/packages/ui/src/stores/utils/contextUtils.ts
new file mode 100644
index 00000000..604b0b7c
--- /dev/null
+++ b/packages/ui/src/stores/utils/contextUtils.ts
@@ -0,0 +1,22 @@
+export const calculateContextUsage = (
+    totalTokens: number,
+    contextLimit: number,
+    outputLimit: number
+) => {
+    const safeContext = Number.isFinite(contextLimit) ? Math.max(contextLimit, 0) : 0;
+    const hasOutputLimit = Number.isFinite(outputLimit) && outputLimit > 0;
+    const safeOutput = hasOutputLimit ? Math.max(outputLimit, 0) : 0;
+
+    const effectiveOutputReservation = Math.min(hasOutputLimit ? safeOutput : 32000, 32000);
+    const normalizedOutput = Math.min(effectiveOutputReservation, safeContext);
+    const thresholdLimit = safeContext > 0 ? Math.max(safeContext - normalizedOutput, 1) : 0;
+    const percentage = thresholdLimit > 0 ? (totalTokens / thresholdLimit) * 100 : 0;
+
+    return {
+        percentage: Math.min(percentage, 100),
+        contextLimit: safeContext,
+        outputLimit: safeOutput,
+        thresholdLimit: thresholdLimit || 1,
+        normalizedOutput
+    };
+};
\ No newline at end of file
diff --git a/packages/ui/src/stores/utils/messageUtils.ts b/packages/ui/src/stores/utils/messageUtils.ts
new file mode 100644
index 00000000..a635a84b
--- /dev/null
+++ b/packages/ui/src/stores/utils/messageUtils.ts
@@ -0,0 +1,68 @@
+import type { Part } from "@opencode-ai/sdk";
+
+const extractTextFromDelta = (delta: unknown): string => {
+    if (!delta) return '';
+    if (typeof delta === 'string') return delta;
+    if (Array.isArray(delta)) {
+        return delta.map((item) => extractTextFromDelta(item)).join('');
+    }
+    if (typeof delta === 'object') {
+        if (typeof (delta as { text?: unknown }).text === 'string') {
+            return (delta as { text: string }).text;
+        }
+        if (Array.isArray((delta as { content?: unknown[] }).content)) {
+            return (delta as { content: unknown[] }).content.map((item: unknown) => extractTextFromDelta(item)).join('');
+        }
+    }
+    return '';
+};
+
+export const extractTextFromPart = (part: unknown): string => {
+    if (!part) return '';
+    const typedPart = part as { text?: string | unknown[]; delta?: unknown; content?: string | unknown[] };
+    if (typeof typedPart.text === 'string') return typedPart.text;
+    if (Array.isArray(typedPart.text)) {
+        return typedPart.text.map((item: unknown) => (typeof item === 'string' ? item : extractTextFromPart(item))).join('');
+    }
+    const deltaText = extractTextFromDelta(typedPart.delta);
+    if (deltaText) return deltaText;
+    if (typeof typedPart.content === 'string') return typedPart.content;
+    if (Array.isArray(typedPart.content)) {
+        return typedPart.content
+            .map((item: unknown) => {
+                if (typeof item === 'string') return item;
+                if (item && typeof item === 'object') {
+                    const typedItem = item as { text?: string; delta?: unknown };
+                    return typedItem.text || extractTextFromDelta(typedItem.delta) || '';
+                }
+                return '';
+            })
+            .join('');
+    }
+    return '';
+};
+
+export const normalizeStreamingPart = (incoming: Part, existing?: Part): Part => {
+    const normalized: { type?: string; text?: string; delta?: unknown; [key: string]: unknown } = { ...incoming } as { type?: string; text?: string; delta?: unknown; [key: string]: unknown };
+    normalized.type = normalized.type || 'text';
+
+    if (normalized.type === 'text') {
+        const existingText = existing && typeof (existing as { text?: string }).text === 'string' ? (existing as { text: string }).text : '';
+        const directText = typeof normalized.text === 'string' ? normalized.text : '';
+        const deltaText = extractTextFromDelta((incoming as { delta?: unknown }).delta);
+
+        if (directText) {
+            normalized.text = directText;
+        } else if (deltaText) {
+            normalized.text = existingText ? `${existingText}${deltaText}` : deltaText;
+        } else if (existingText) {
+            normalized.text = existingText;
+        } else {
+            normalized.text = '';
+        }
+
+        delete normalized.delta;
+    }
+
+    return normalized as Part;
+};
\ No newline at end of file
diff --git a/packages/ui/src/stores/utils/permissionUtils.ts b/packages/ui/src/stores/utils/permissionUtils.ts
new file mode 100644
index 00000000..72bfe5ef
--- /dev/null
+++ b/packages/ui/src/stores/utils/permissionUtils.ts
@@ -0,0 +1,54 @@
+import type { EditPermissionMode } from "../types/sessionTypes";
+
+const EDIT_PERMISSION_TOOL_NAMES = new Set([
+    'edit',
+    'multiedit',
+    'str_replace',
+    'str_replace_based_edit_tool',
+    'write',
+]);
+
+export const isEditPermissionType = (type?: string | null): boolean => {
+    if (!type) {
+        return false;
+    }
+    return EDIT_PERMISSION_TOOL_NAMES.has(type.toLowerCase());
+};
+
+const resolveConfigStore = () => {
+    if (typeof window === 'undefined') {
+        return undefined;
+    }
+    return (window as { __zustand_config_store__?: { getState?: () => { agents?: Array<{ name: string; permission?: { edit?: string }; tools?: { edit?: boolean } }> } } }).__zustand_config_store__;
+};
+
+const getAgentDefinition = (agentName?: string): { name: string; permission?: { edit?: string }; tools?: { edit?: boolean } } | undefined => {
+    if (!agentName) {
+        return undefined;
+    }
+
+    try {
+        const configStore = resolveConfigStore();
+        if (configStore?.getState) {
+            const state = configStore.getState();
+            return state.agents?.find?.((agent: { name: string; permission?: { edit?: string }; tools?: { edit?: boolean } }) => agent.name === agentName);
+        }
+    } catch { /* ignored */ }
+
+    return undefined;
+};
+
+export const getAgentDefaultEditPermission = (agentName?: string): EditPermissionMode => {
+    const agent = getAgentDefinition(agentName);
+    if (!agent) {
+        return 'ask';
+    }
+
+    const permission = agent.permission?.edit;
+    if (permission === 'allow' || permission === 'ask' || permission === 'deny' || permission === 'full') {
+        return permission;
+    }
+
+    const editToolEnabled = agent.tools ? agent.tools.edit !== false : true;
+    return editToolEnabled ? 'ask' : 'deny';
+};
\ No newline at end of file
diff --git a/packages/ui/src/stores/utils/safeStorage.ts b/packages/ui/src/stores/utils/safeStorage.ts
new file mode 100644
index 00000000..efa98735
--- /dev/null
+++ b/packages/ui/src/stores/utils/safeStorage.ts
@@ -0,0 +1,121 @@
+let safeStorageInstance: Storage | null = null;
+
+const createInMemoryStorage = (): Storage => {
+    const store = new Map<string, string>();
+    return {
+        getItem: (key: string) => store.get(key) ?? null,
+        setItem: (key: string, value: string) => {
+            store.set(key, value);
+        },
+        removeItem: (key: string) => {
+            store.delete(key);
+        },
+        clear: () => {
+            store.clear();
+        },
+        key: (index: number) => Array.from(store.keys())[index] ?? null,
+        get length() {
+            return store.size;
+        },
+    } as Storage;
+};
+
+const createSafeStorage = (): Storage => {
+    if (typeof window === 'undefined' || !window.localStorage) {
+        return createInMemoryStorage();
+    }
+
+    const baseStorage = window.localStorage;
+    const fallback = createInMemoryStorage();
+    let storageAvailable = true;
+
+    const disableStorage = () => {
+        storageAvailable = false;
+    };
+
+    const safeGet = (key: string): string | null => {
+        if (storageAvailable) {
+            try {
+                const value = baseStorage.getItem(key);
+                if (value !== null) {
+                    return value;
+                }
+            } catch {
+                disableStorage();
+            }
+        }
+        return fallback.getItem(key);
+    };
+
+    const safeSet = (key: string, value: string) => {
+        if (storageAvailable) {
+            try {
+                baseStorage.setItem(key, value);
+                fallback.removeItem(key);
+                return;
+            } catch {
+                disableStorage();
+            }
+        }
+        fallback.setItem(key, value);
+    };
+
+    const safeRemove = (key: string) => {
+        if (storageAvailable) {
+            try {
+                baseStorage.removeItem(key);
+            } catch {
+                disableStorage();
+            }
+        }
+        fallback.removeItem(key);
+    };
+
+    const safeClear = () => {
+        if (storageAvailable) {
+            try {
+                baseStorage.clear();
+            } catch {
+                disableStorage();
+            }
+        }
+        fallback.clear();
+    };
+
+    const safeKey = (index: number): string | null => {
+        if (storageAvailable) {
+            try {
+                return baseStorage.key(index);
+            } catch {
+                disableStorage();
+            }
+        }
+        return fallback.key(index);
+    };
+
+    return {
+        getItem: safeGet,
+        setItem: safeSet,
+        removeItem: safeRemove,
+        clear: safeClear,
+        key: safeKey,
+        get length() {
+            if (storageAvailable) {
+                try {
+                    return baseStorage.length + fallback.length;
+                } catch {
+                    disableStorage();
+                }
+            }
+            return fallback.length;
+        },
+    } as Storage;
+};
+
+export const getSafeStorage = (): Storage => {
+    if (!safeStorageInstance) {
+        safeStorageInstance = createSafeStorage();
+    }
+    return safeStorageInstance;
+};
+
diff --git a/packages/ui/src/stores/utils/streamDebug.ts b/packages/ui/src/stores/utils/streamDebug.ts
new file mode 100644
index 00000000..a21f2822
--- /dev/null
+++ b/packages/ui/src/stores/utils/streamDebug.ts
@@ -0,0 +1,8 @@
+export const streamDebugEnabled = (): boolean => {
+    if (typeof window === 'undefined') return false;
+    try {
+        return window.localStorage.getItem('openchamber_stream_debug') === '1';
+    } catch {
+        return false;
+    }
+};
diff --git a/packages/ui/src/stores/utils/streamingUtils.ts b/packages/ui/src/stores/utils/streamingUtils.ts
new file mode 100644
index 00000000..51cdf8e7
--- /dev/null
+++ b/packages/ui/src/stores/utils/streamingUtils.ts
@@ -0,0 +1,56 @@
+import type { MessageStreamLifecycle } from "../types/sessionTypes";
+
+export type { MessageStreamLifecycle };
+
+export const touchStreamingLifecycle = (
+    source: Map<string, MessageStreamLifecycle>,
+    messageId: string
+): Map<string, MessageStreamLifecycle> => {
+    const now = Date.now();
+    const existing = source.get(messageId);
+
+    const next = new Map(source);
+    next.set(messageId, {
+        phase: 'streaming',
+        startedAt: existing?.startedAt ?? now,
+        lastUpdateAt: now,
+    });
+
+    return next;
+};
+
+
+export const removeLifecycleEntries = (
+    source: Map<string, MessageStreamLifecycle>,
+    ids: Iterable<string>
+): Map<string, MessageStreamLifecycle> => {
+    const idsArray = Array.from(ids);
+    const shouldClone = idsArray.some((id) => source.has(id));
+
+    if (!shouldClone) {
+        return source;
+    }
+
+    const next = new Map(source);
+    idsArray.forEach((id) => {
+        next.delete(id);
+    });
+
+    return next;
+};
+
+const lifecycleCompletionTimers = new Map<string, ReturnType<typeof setTimeout>>();
+
+export const clearLifecycleCompletionTimer = (messageId: string) => {
+    const timer = lifecycleCompletionTimers.get(messageId);
+    if (timer) {
+        clearTimeout(timer);
+        lifecycleCompletionTimers.delete(messageId);
+    }
+};
+
+export const clearLifecycleTimersForIds = (ids: Iterable<string>) => {
+    for (const id of ids) {
+        clearLifecycleCompletionTimer(id);
+    }
+};
diff --git a/packages/ui/src/stores/utils/tokenUtils.ts b/packages/ui/src/stores/utils/tokenUtils.ts
new file mode 100644
index 00000000..8a47f824
--- /dev/null
+++ b/packages/ui/src/stores/utils/tokenUtils.ts
@@ -0,0 +1,51 @@
+import type { Message, Part } from "@opencode-ai/sdk";
+
+type TokenBreakdown = {
+    input?: number;
+    output?: number;
+    reasoning?: number;
+    cache?: {
+        read?: number;
+        write?: number;
+    };
+};
+
+const sumTokenBreakdown = (breakdown: TokenBreakdown | null | undefined): number => {
+    if (!breakdown || typeof breakdown !== 'object') {
+        return 0;
+    }
+
+    const inputTokens = breakdown.input ?? 0;
+    const outputTokens = breakdown.output ?? 0;
+    const reasoningTokens = breakdown.reasoning ?? 0;
+    const cacheReadTokens = breakdown.cache && typeof breakdown.cache === 'object' ? breakdown.cache.read ?? 0 : 0;
+    const cacheWriteTokens = breakdown.cache && typeof breakdown.cache === 'object' ? breakdown.cache.write ?? 0 : 0;
+
+    return inputTokens + outputTokens + reasoningTokens + cacheReadTokens + cacheWriteTokens;
+};
+
+export const extractTokensFromMessage = (message: { info: Message; parts: Part[] }): number => {
+    const tokens = (message.info as { tokens?: number | TokenBreakdown }).tokens;
+
+    if (typeof tokens === 'number') {
+        return tokens;
+    }
+
+    if (tokens && typeof tokens === 'object') {
+        return sumTokenBreakdown(tokens);
+    }
+
+    const tokenPart = message.parts.find(
+        (part) => typeof (part as { tokens?: number | TokenBreakdown }).tokens !== 'undefined'
+    ) as { tokens?: number | TokenBreakdown } | undefined;
+
+    if (!tokenPart || typeof tokenPart.tokens === 'undefined') {
+        return 0;
+    }
+
+    if (typeof tokenPart.tokens === 'number') {
+        return tokenPart.tokens;
+    }
+
+    return sumTokenBreakdown(tokenPart.tokens);
+};
diff --git a/packages/ui/src/styles/fireworks.css b/packages/ui/src/styles/fireworks.css
new file mode 100644
index 00000000..d076a8fb
--- /dev/null
+++ b/packages/ui/src/styles/fireworks.css
@@ -0,0 +1,77 @@
+:root {
+  --fireworks-duration-ms: 900ms;
+}
+
+.fireworks-overlay {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 70;
+  overflow: hidden;
+  mix-blend-mode: normal;
+}
+
+.dark .fireworks-overlay {
+  mix-blend-mode: screen;
+}
+
+.fireworks-overlay[data-muted="true"] {
+  display: none;
+}
+
+.firework-burst {
+  position: absolute;
+  top: var(--burst-y, 50%);
+  left: var(--burst-x, 50%);
+  width: 1px;
+  height: 1px;
+}
+
+.firework-particle {
+  position: absolute;
+  width: var(--particle-size, 6px);
+  height: var(--particle-size, 6px);
+  border-radius: 999px;
+  background: var(--firework-color, var(--status-success));
+  box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.4);
+  animation: firework-pop var(--firework-duration, var(--fireworks-duration-ms)) ease-out forwards;
+  animation-delay: calc(var(--burst-delay, 0ms) + var(--particle-delay, 0ms));
+}
+
+.firework-particle::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2px;
+  height: 2px;
+  background: currentColor;
+  border-radius: inherit;
+  transform: translate(-50%, -50%);
+  opacity: 0.5;
+}
+
+@keyframes firework-pop {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.4);
+  }
+  10% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 0.95;
+  }
+  100% {
+    opacity: 0;
+    transform: translate(calc(-50% + var(--translate-x, 0px)), calc(-50% + var(--translate-y, 0px))) scale(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fireworks-overlay {
+    display: none;
+  }
+}
diff --git a/packages/ui/src/styles/fonts.ts b/packages/ui/src/styles/fonts.ts
new file mode 100644
index 00000000..2334b048
--- /dev/null
+++ b/packages/ui/src/styles/fonts.ts
@@ -0,0 +1,9 @@
+
+
+import '@fontsource/ibm-plex-sans/latin-400.css';
+import '@fontsource/ibm-plex-sans/latin-500.css';
+import '@fontsource/ibm-plex-sans/latin-600.css';
+
+import '@fontsource/ibm-plex-mono/latin-400.css';
+import '@fontsource/ibm-plex-mono/latin-500.css';
+import '@fontsource/ibm-plex-mono/latin-600.css';
diff --git a/packages/ui/src/types/desktop.d.ts b/packages/ui/src/types/desktop.d.ts
new file mode 100644
index 00000000..c40749fa
--- /dev/null
+++ b/packages/ui/src/types/desktop.d.ts
@@ -0,0 +1,32 @@
+import type { DesktopApi, DesktopSettingsApi } from "../lib/desktop";
+
+ type AppearanceBridgePayload = {
+   uiFont?: string;
+   monoFont?: string;
+   markdownDisplayMode?: string;
+   typographySizes?: {
+     markdown?: string;
+     code?: string;
+     uiHeader?: string;
+     uiLabel?: string;
+     meta?: string;
+     micro?: string;
+   } | null;
+   showReasoningTraces?: boolean;
+ };
+
+ type AppearanceBridgeApi = {
+   load: () => Promise<AppearanceBridgePayload | null>;
+   save: (payload: AppearanceBridgePayload) => Promise<{ success: boolean; data?: AppearanceBridgePayload | null; error?: string }>;
+ };
+
+ declare global {
+   interface Window {
+     opencodeDesktop?: DesktopApi;
+     opencodeDesktopSettings?: DesktopSettingsApi;
+     opencodeAppearance?: AppearanceBridgeApi;
+     __OPENCHAMBER_HOME__?: string;
+   }
+ }
+
+ export {};
diff --git a/packages/ui/src/types/electron-context-menu.d.ts b/packages/ui/src/types/electron-context-menu.d.ts
new file mode 100644
index 00000000..00113d64
--- /dev/null
+++ b/packages/ui/src/types/electron-context-menu.d.ts
@@ -0,0 +1,35 @@
+declare module 'electron-context-menu' {
+    import type { BrowserWindow, MenuItemConstructorOptions } from 'electron';
+
+    type DefaultActions = {
+        [key: string]: (...args: unknown[]) => void;
+    };
+
+    type ContextMenuParams = unknown;
+
+    interface ContextMenuOptions {
+        window?: BrowserWindow;
+        showInspectElement?: boolean;
+        showSaveImage?: boolean;
+        showSaveImageAs?: boolean;
+        showSaveLinkAs?: boolean;
+        showCopyLink?: boolean;
+        showCopyImage?: boolean;
+        showCopyImageAddress?: boolean;
+        prepend?: (
+            defaultActions: DefaultActions,
+            params: ContextMenuParams,
+            browserWindow: BrowserWindow | undefined
+        ) => MenuItemConstructorOptions[];
+        append?: (
+            defaultActions: DefaultActions,
+            params: ContextMenuParams,
+            browserWindow: BrowserWindow | undefined
+        ) => MenuItemConstructorOptions[];
+        shouldShowMenu?: (event: unknown, params: ContextMenuParams) => boolean;
+        labels?: Record<string, string>;
+        [key: string]: unknown;
+    }
+
+    export default function contextMenu(options?: ContextMenuOptions): () => void;
+}
diff --git a/packages/ui/src/types/index.ts b/packages/ui/src/types/index.ts
new file mode 100644
index 00000000..512074c2
--- /dev/null
+++ b/packages/ui/src/types/index.ts
@@ -0,0 +1,66 @@
+import type { Session, Message, Part, Provider } from "@opencode-ai/sdk";
+
+export type { Session, Message, Part, Provider };
+
+export interface ChatState {
+  sessions: Session[];
+  currentSessionId: string | null;
+  messages: Map<string, { info: Message; parts: Part[] }[]>;
+  isLoading: boolean;
+  error: string | null;
+  streamingMessageIds: Map<string, string | null>;
+}
+
+export interface ConfigState {
+  providers: Provider[];
+  currentProviderId: string;
+  currentModelId: string;
+  defaultProvider: { [key: string]: string };
+  isConnected: boolean;
+}
+
+export interface UIState {
+  theme: "light" | "dark" | "system";
+  isSidebarOpen: boolean;
+  isSessionSwitcherOpen: boolean;
+  isMobile: boolean;
+  isAbortable: boolean;
+}
+
+export interface StreamEvent {
+  type: string;
+  properties: Record<string, unknown>;
+}
+
+export interface ModelOption {
+  providerId: string;
+  modelId: string;
+  displayName: string;
+}
+
+export interface ModelMetadata {
+  id: string;
+  providerId: string;
+  name?: string;
+  tool_call?: boolean;
+  reasoning?: boolean;
+  temperature?: boolean;
+  attachment?: boolean;
+  modalities?: {
+    input?: string[];
+    output?: string[];
+  };
+  cost?: {
+    input?: number;
+    output?: number;
+    cache_read?: number;
+    cache_write?: number;
+  };
+  limit?: {
+    context?: number;
+    output?: number;
+  };
+  knowledge?: string;
+  release_date?: string;
+  last_updated?: string;
+}
diff --git a/packages/ui/src/types/permission.ts b/packages/ui/src/types/permission.ts
new file mode 100644
index 00000000..9d2a650a
--- /dev/null
+++ b/packages/ui/src/types/permission.ts
@@ -0,0 +1,20 @@
+export interface Permission {
+  id: string;
+  type: string;
+  pattern?: string | string[];
+  sessionID: string;
+  messageID: string;
+  callID?: string;
+  title: string;
+  metadata: Record<string, unknown>;
+  time: {
+    created: number;
+  };
+}
+
+export interface PermissionEvent {
+  type: 'permission.updated';
+  properties: Permission;
+}
+
+export type PermissionResponse = 'once' | 'always' | 'reject';
\ No newline at end of file
diff --git a/packages/ui/src/types/streamdown.d.ts b/packages/ui/src/types/streamdown.d.ts
new file mode 100644
index 00000000..3030ac56
--- /dev/null
+++ b/packages/ui/src/types/streamdown.d.ts
@@ -0,0 +1,22 @@
+declare module 'streamdown' {
+  import type { FC, ReactNode, ComponentType } from 'react';
+
+  export interface StreamdownProps {
+    children: string;
+    mode?: 'streaming' | 'static';
+    className?: string;
+
+    shikiTheme?: readonly [string, string] | [string, string];
+
+    controls?: boolean | {
+      code?: boolean;
+      table?: boolean;
+      mermaid?: boolean;
+    };
+    components?: {
+      [key: string]: ComponentType<{ children?: ReactNode; className?: string; [key: string]: unknown }>;
+    };
+  }
+
+  export const Streamdown: FC<StreamdownProps>;
+}
diff --git a/packages/ui/src/types/theme.ts b/packages/ui/src/types/theme.ts
new file mode 100644
index 00000000..1c63f3a6
--- /dev/null
+++ b/packages/ui/src/types/theme.ts
@@ -0,0 +1,290 @@
+
+
+export interface ThemeMetadata {
+  id: string;
+  name: string;
+  description: string;
+  author: string;
+  version: string;
+  variant: 'light' | 'dark';
+  tags: string[];
+}
+
+export type ThemeMode = 'system' | 'light' | 'dark';
+
+export interface ThemeColor {
+  base: string;
+  hover?: string;
+  active?: string;
+  foreground?: string;
+  muted?: string;
+  emphasis?: string;
+}
+
+export interface SurfaceColors {
+  background: string;
+  foreground: string;
+  muted: string;
+  mutedForeground: string;
+  elevated: string;
+  elevatedForeground: string;
+  overlay: string;
+  subtle: string;
+}
+
+export interface InteractiveColors {
+  border: string;
+  borderHover: string;
+  borderFocus: string;
+  selection: string;
+  selectionForeground: string;
+  focus: string;
+  focusRing: string;
+  cursor: string;
+  hover: string;
+  active: string;
+}
+
+export interface StatusColors {
+  error: string;
+  errorForeground: string;
+  errorBackground: string;
+  errorBorder: string;
+
+  warning: string;
+  warningForeground: string;
+  warningBackground: string;
+  warningBorder: string;
+
+  success: string;
+  successForeground: string;
+  successBackground: string;
+  successBorder: string;
+
+  info: string;
+  infoForeground: string;
+  infoBackground: string;
+  infoBorder: string;
+}
+
+export interface SyntaxBaseColors {
+  background: string;
+  foreground: string;
+  comment: string;
+  keyword: string;
+  string: string;
+  number: string;
+  function: string;
+  variable: string;
+  type: string;
+  operator: string;
+}
+
+export interface SyntaxColors {
+  base: SyntaxBaseColors;
+  tokens?: Partial<Record<string, string>>;
+  languages?: Record<string, Record<string, string>>;
+  highlights?: Record<string, string>;
+}
+
+export interface ButtonVariant {
+  bg?: string;
+  fg?: string;
+  border?: string;
+  hover?: string;
+  active?: string;
+  disabled?: string;
+}
+
+export interface TypographyStyle {
+  fontSize: string;
+  lineHeight: string;
+  letterSpacing?: string;
+  fontWeight?: string | number;
+}
+
+export interface TypographyScale {
+  xs: TypographyStyle;
+  sm: TypographyStyle;
+  base: TypographyStyle;
+  lg: TypographyStyle;
+  xl: TypographyStyle;
+  '2xl': TypographyStyle;
+  '3xl': TypographyStyle;
+  '4xl': TypographyStyle;
+  '5xl': TypographyStyle;
+}
+
+export interface HeadingStyles {
+  h1: TypographyStyle;
+  h2: TypographyStyle;
+  h3: TypographyStyle;
+  h4: TypographyStyle;
+  h5: TypographyStyle;
+  h6: TypographyStyle;
+}
+
+export interface UITypography {
+  button: TypographyStyle;
+  buttonSmall: TypographyStyle;
+  buttonLarge: TypographyStyle;
+  label: TypographyStyle;
+  caption: TypographyStyle;
+  badge: TypographyStyle;
+  tooltip: TypographyStyle;
+  input: TypographyStyle;
+  helperText: TypographyStyle;
+}
+
+export interface CodeTypography {
+  inline: TypographyStyle;
+  block: TypographyStyle;
+  lineNumbers: TypographyStyle;
+}
+
+export interface MarkdownTypography {
+  h1: TypographyStyle;
+  h2: TypographyStyle;
+  h3: TypographyStyle;
+  h4: TypographyStyle;
+  h5: TypographyStyle;
+  h6: TypographyStyle;
+  body: TypographyStyle;
+  bodySmall: TypographyStyle;
+  bodyLarge: TypographyStyle;
+  blockquote: TypographyStyle;
+  list: TypographyStyle;
+  link: TypographyStyle;
+  code: TypographyStyle;
+  codeBlock: TypographyStyle;
+}
+
+export interface SemanticTypography {
+
+  markdown?: string;
+  code?: string;
+  uiHeader?: string;
+  uiLabel?: string;
+  meta?: string;
+  micro?: string;
+}
+
+export interface Typography {
+
+  scale?: TypographyScale;
+  heading?: HeadingStyles;
+  ui?: UITypography;
+  code?: CodeTypography;
+  markdown?: MarkdownTypography;
+
+  semantic?: SemanticTypography;
+}
+
+export interface Theme {
+  metadata: ThemeMetadata;
+
+  colors: {
+
+    primary: ThemeColor;
+    surface: SurfaceColors;
+    interactive: InteractiveColors;
+    status: StatusColors;
+
+    syntax: SyntaxColors;
+
+    header?: Record<string, string>;
+    sidebar?: Record<string, string>;
+    chat?: Record<string, string>;
+    markdown?: Record<string, string>;
+    tools?: {
+      background?: string;
+      border?: string;
+      headerHover?: string;
+      icon?: string;
+      title?: string;
+      description?: string;
+      edit?: Record<string, string>;
+      bash?: Record<string, string>;
+      lsp?: Record<string, string>;
+    };
+    forms?: Record<string, string>;
+    buttons?: {
+      primary?: ButtonVariant;
+      secondary?: ButtonVariant;
+      ghost?: ButtonVariant;
+      destructive?: ButtonVariant;
+    };
+    modal?: Record<string, string>;
+    popover?: Record<string, string>;
+    commandPalette?: Record<string, string>;
+    fileAttachment?: Record<string, string>;
+    sessions?: Record<string, string>;
+    modelSelector?: Record<string, string>;
+    permissions?: Record<string, string>;
+    loading?: Record<string, string>;
+    scrollbar?: Record<string, string>;
+    badges?: Record<string, ButtonVariant>;
+    toast?: Record<string, string | Record<string, string>>;
+    emptyState?: Record<string, string>;
+    table?: Record<string, string>;
+    charts?: Record<string, string | string[]>;
+    a11y?: Record<string, string | boolean>;
+    shadows?: Record<string, string>;
+    animation?: Record<string, string>;
+  };
+
+  config?: {
+    fonts?: {
+      sans?: string;
+      mono?: string;
+      heading?: string;
+    };
+    radius?: {
+      none?: string;
+      sm?: string;
+      md?: string;
+      lg?: string;
+      xl?: string;
+      full?: string;
+    };
+    spacing?: {
+      xs?: string;
+      sm?: string;
+      md?: string;
+      lg?: string;
+      xl?: string;
+    };
+    transitions?: {
+      fast?: string;
+      normal?: string;
+      slow?: string;
+    };
+  };
+}
+
+export interface ValidationIssue {
+  path: string;
+  message: string;
+  severity: 'error' | 'warning';
+}
+
+export interface ValidationResult {
+  isValid: boolean;
+  errors: ValidationIssue[];
+  warnings: ValidationIssue[];
+}
+
+export interface AccessibilityIssue {
+  foreground: string;
+  background: string;
+  ratio: number;
+  requirement: number;
+  pass: boolean;
+  context: string;
+}
+
+export interface AccessibilityReport {
+  wcagAA: boolean;
+  wcagAAA: boolean;
+  issues: AccessibilityIssue[];
+}
diff --git a/packages/ui/src/types/tool.ts b/packages/ui/src/types/tool.ts
new file mode 100644
index 00000000..d6c012cc
--- /dev/null
+++ b/packages/ui/src/types/tool.ts
@@ -0,0 +1,53 @@
+
+export interface ToolState {
+  status: 'pending' | 'running' | 'completed' | 'error';
+}
+
+export interface ToolStatePending extends ToolState {
+  status: 'pending';
+}
+
+export interface ToolStateRunning extends ToolState {
+  status: 'running';
+  input?: Record<string, unknown>;
+  title?: string;
+  metadata?: Record<string, unknown>;
+  time: {
+    start: number;
+  };
+}
+
+export interface ToolStateCompleted extends ToolState {
+  status: 'completed';
+  input: Record<string, unknown>;
+  output: string;
+  title: string;
+  metadata: Record<string, unknown>;
+  time: {
+    start: number;
+    end: number;
+  };
+}
+
+export interface ToolStateError extends ToolState {
+  status: 'error';
+  input: Record<string, unknown>;
+  error: string;
+  metadata?: Record<string, unknown>;
+  time: {
+    start: number;
+    end: number;
+  };
+}
+
+export type ToolStateUnion = ToolStatePending | ToolStateRunning | ToolStateCompleted | ToolStateError;
+
+export interface ToolPart {
+  id: string;
+  sessionID: string;
+  messageID: string;
+  type: 'tool';
+  callID: string;
+  tool: string;
+  state: ToolStateUnion;
+}
\ No newline at end of file
diff --git a/packages/ui/src/types/worktree.ts b/packages/ui/src/types/worktree.ts
new file mode 100644
index 00000000..052225fd
--- /dev/null
+++ b/packages/ui/src/types/worktree.ts
@@ -0,0 +1,21 @@
+export interface WorktreeMetadata {
+
+  path: string;
+
+  projectDirectory: string;
+
+  branch: string;
+
+  label: string;
+
+  relativePath?: string;
+
+  status?: {
+    isDirty: boolean;
+    ahead?: number;
+    behind?: number;
+    upstream?: string | null;
+  };
+}
+
+export type WorktreeMap = Map<string, WorktreeMetadata>;
diff --git a/packages/ui/src/vite-env.d.ts b/packages/ui/src/vite-env.d.ts
new file mode 100644
index 00000000..2fd280c6
--- /dev/null
+++ b/packages/ui/src/vite-env.d.ts
@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+interface Window {
+    __opencodeDebug?: {
+        getLastAssistantMessage: () => unknown;
+        getAllMessages: (truncate?: boolean) => unknown[];
+        truncateMessages: (messages: unknown[]) => unknown[];
+        checkLastMessage: () => boolean;
+        findEmptyMessages: () => unknown[];
+        showRetryHelp: () => void;
+        getStreamingState: () => unknown;
+        analyzeMessageCompletionConsistency: (options?: unknown) => unknown;
+        checkCompletionStatus: () => unknown;
+    };
+}
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
new file mode 100644
index 00000000..46221c96
--- /dev/null
+++ b/packages/ui/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["./*"],
+      "@openchamber/ui/*": ["./*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/packages/web/.gitignore b/packages/web/.gitignore
new file mode 100644
index 00000000..a08880e1
--- /dev/null
+++ b/packages/web/.gitignore
@@ -0,0 +1,2 @@
+server/prompt-templates.js
+prompt-enhancer-config.json
diff --git a/packages/web/README.md b/packages/web/README.md
new file mode 100644
index 00000000..64b0febf
--- /dev/null
+++ b/packages/web/README.md
@@ -0,0 +1,34 @@
+# @openchamber/web
+
+Web interface for the [OpenCode](https://opencode.ai) AI coding agent.
+
+## Installation
+
+```bash
+npm add -g @openchamber/web
+
+openchamber                          # Start on port 3000
+openchamber --port 8080              # Custom port
+openchamber --daemon                 # Background mode
+openchamber --ui-password secret     # Password-protect UI
+openchamber stop                     # Stop server
+```
+
+## Prerequisites
+
+- [OpenCode CLI](https://opencode.ai) installed and running (`opencode serve`)
+- Node.js 20+
+
+## Features
+
+- Integrated terminal
+- Git operations with identity management and AI commit message generation
+- Beautiful themes (Flexoki Light/Dark)
+- Mobile-optimized with edge-swipe gestures
+- Rich permission cards with syntax-highlighted operation previews
+- Smart tool visualization (inline diffs, file trees, results highlighting)
+- Per-agent permission mode control
+
+## License
+
+MIT
diff --git a/packages/web/bin/cli.js b/packages/web/bin/cli.js
new file mode 100755
index 00000000..087bcced
--- /dev/null
+++ b/packages/web/bin/cli.js
@@ -0,0 +1,561 @@
+#!/usr/bin/env node
+
+import path from 'path';
+import fs from 'fs';
+import { spawn, spawnSync } from 'child_process';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const DEFAULT_PORT = 3000;
+const PACKAGE_JSON = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'));
+
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const envPassword = process.env.OPENCHAMBER_UI_PASSWORD || undefined;
+  const options = { port: DEFAULT_PORT, daemon: false, uiPassword: envPassword };
+  let command = 'serve';
+
+  const consumeValue = (currentIndex, inlineValue) => {
+    if (typeof inlineValue === 'string' && inlineValue.length > 0) {
+      return { value: inlineValue, nextIndex: currentIndex };
+    }
+    const candidate = args[currentIndex + 1];
+    if (typeof candidate === 'string' && !candidate.startsWith('-')) {
+      return { value: candidate, nextIndex: currentIndex + 1 };
+    }
+    return { value: undefined, nextIndex: currentIndex };
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+
+    if (arg.startsWith('-')) {
+      let optionName;
+      let inlineValue;
+
+      if (arg.startsWith('--')) {
+        const eqIndex = arg.indexOf('=');
+        optionName = eqIndex >= 0 ? arg.slice(2, eqIndex) : arg.slice(2);
+        inlineValue = eqIndex >= 0 ? arg.slice(eqIndex + 1) : undefined;
+      } else {
+        optionName = arg.slice(1);
+        inlineValue = undefined;
+      }
+
+      switch (optionName) {
+        case 'port':
+        case 'p': {
+          const { value, nextIndex } = consumeValue(i, inlineValue);
+          i = nextIndex;
+          const parsed = parseInt(value ?? '', 10);
+          options.port = Number.isFinite(parsed) ? parsed : DEFAULT_PORT;
+          break;
+        }
+        case 'daemon':
+        case 'd':
+          options.daemon = true;
+          break;
+        case 'ui-password': {
+          const { value, nextIndex } = consumeValue(i, inlineValue);
+          i = nextIndex;
+          options.uiPassword = typeof value === 'string' ? value : '';
+          break;
+        }
+        case 'help':
+        case 'h':
+          showHelp();
+          process.exit(0);
+          break;
+        case 'version':
+        case 'v':
+          console.log(PACKAGE_JSON.version);
+          process.exit(0);
+          break;
+      }
+    } else {
+      command = arg;
+    }
+  }
+
+  return { command, options };
+}
+
+function showHelp() {
+  console.log(`
+OpenChamber - Web interface for the OpenCode AI coding agent
+
+USAGE:
+  openchamber [COMMAND] [OPTIONS]
+
+COMMANDS:
+  serve          Start the web server (default)
+  stop           Stop running instance(s)
+  restart        Stop and start the server
+  status         Show server status
+
+OPTIONS:
+  -p, --port     Web server port (default: ${DEFAULT_PORT})
+  --ui-password  Protect browser UI with single password
+  -d, --daemon   Run in background (serve command)
+  -h, --help     Show help
+  -v, --version  Show version
+
+ENVIRONMENT:
+  OPENCHAMBER_UI_PASSWORD  Alternative to --ui-password flag
+
+EXAMPLES:
+  openchamber                    # Start on default port 3000
+  openchamber --port 8080        # Start on port 8080
+  openchamber serve --daemon     # Start in background
+  openchamber stop               # Stop all running instances
+  openchamber stop --port 3000   # Stop specific instance
+  openchamber status             # Check status
+`);
+}
+
+const WINDOWS_EXTENSIONS = process.platform === 'win32'
+  ? (process.env.PATHEXT || '.EXE;.CMD;.BAT;.COM')
+      .split(';')
+      .map((ext) => ext.trim().toLowerCase())
+      .filter(Boolean)
+      .map((ext) => (ext.startsWith('.') ? ext : `.${ext}`))
+  : [''];
+
+function isExecutable(filePath) {
+  try {
+    const stats = fs.statSync(filePath);
+    if (!stats.isFile()) {
+      return false;
+    }
+    if (process.platform === 'win32') {
+      return true;
+    }
+    fs.accessSync(filePath, fs.constants.X_OK);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+function resolveExplicitBinary(candidate) {
+  if (!candidate) {
+    return null;
+  }
+  if (candidate.includes(path.sep) || path.isAbsolute(candidate)) {
+    const resolved = path.isAbsolute(candidate) ? candidate : path.resolve(candidate);
+    return isExecutable(resolved) ? resolved : null;
+  }
+  return null;
+}
+
+function searchPathFor(command) {
+  const pathValue = process.env.PATH || '';
+  const segments = pathValue.split(path.delimiter).filter(Boolean);
+  for (const dir of segments) {
+    for (const ext of WINDOWS_EXTENSIONS) {
+      const fileName = process.platform === 'win32' ? `${command}${ext}` : command;
+      const candidate = path.join(dir, fileName);
+      if (isExecutable(candidate)) {
+        return candidate;
+      }
+    }
+  }
+  return null;
+}
+
+async function checkOpenCodeCLI() {
+  if (process.env.OPENCODE_BINARY) {
+    const override = resolveExplicitBinary(process.env.OPENCODE_BINARY);
+    if (override) {
+      process.env.OPENCODE_BINARY = override;
+      return override;
+    }
+    console.warn(`Warning: OPENCODE_BINARY="${process.env.OPENCODE_BINARY}" is not an executable file. Falling back to PATH lookup.`);
+  }
+
+  const resolvedFromPath = searchPathFor('opencode');
+  if (resolvedFromPath) {
+    process.env.OPENCODE_BINARY = resolvedFromPath;
+    return resolvedFromPath;
+  }
+
+  if (process.platform !== 'win32') {
+    const shellCandidates = [];
+    if (process.env.SHELL) {
+      shellCandidates.push(process.env.SHELL);
+    }
+    shellCandidates.push('/bin/bash', '/bin/zsh', '/bin/sh');
+
+    for (const shellPath of shellCandidates) {
+      if (!shellPath || !isExecutable(shellPath)) {
+        continue;
+      }
+      try {
+        const result = spawnSync(shellPath, ['-lic', 'command -v opencode'], {
+          encoding: 'utf8',
+          stdio: ['ignore', 'pipe', 'pipe'],
+        });
+        if (result.status === 0) {
+          const candidate = result.stdout.trim().split(/\s+/).pop();
+          if (candidate && isExecutable(candidate)) {
+            const dir = path.dirname(candidate);
+            const currentPath = process.env.PATH || '';
+            const segments = currentPath.split(path.delimiter).filter(Boolean);
+            if (!segments.includes(dir)) {
+              segments.unshift(dir);
+              process.env.PATH = segments.join(path.delimiter);
+            }
+            process.env.OPENCODE_BINARY = candidate;
+            return candidate;
+          }
+        }
+      } catch (error) {
+
+      }
+    }
+  } else {
+    try {
+      const result = spawnSync('where', ['opencode'], {
+        encoding: 'utf8',
+        stdio: ['ignore', 'pipe', 'pipe'],
+      });
+      if (result.status === 0) {
+        const candidate = result.stdout.split(/\r?\n/).map((line) => line.trim()).find((line) => line.length > 0);
+        if (candidate && isExecutable(candidate)) {
+          process.env.OPENCODE_BINARY = candidate;
+          return candidate;
+        }
+      }
+    } catch (error) {
+
+    }
+  }
+
+  console.error('Error: Unable to locate the opencode CLI on PATH.');
+  console.error(`Current PATH: ${process.env.PATH || '<empty>'}`);
+  console.error('Ensure the CLI is installed and reachable, or set OPENCODE_BINARY to its full path.');
+  process.exit(1);
+}
+
+async function getPidFilePath(port) {
+  const os = await import('os');
+  const tmpDir = os.tmpdir();
+  return path.join(tmpDir, `openchamber-${port}.pid`);
+}
+
+function readPidFile(pidFilePath) {
+  try {
+    const content = fs.readFileSync(pidFilePath, 'utf8').trim();
+    const pid = parseInt(content);
+    if (isNaN(pid)) {
+      return null;
+    }
+    return pid;
+  } catch (error) {
+    return null;
+  }
+}
+
+function writePidFile(pidFilePath, pid) {
+  try {
+    fs.writeFileSync(pidFilePath, pid.toString());
+  } catch (error) {
+    console.warn(`Warning: Could not write PID file: ${error.message}`);
+  }
+}
+
+function removePidFile(pidFilePath) {
+  try {
+    if (fs.existsSync(pidFilePath)) {
+      fs.unlinkSync(pidFilePath);
+    }
+  } catch (error) {
+    console.warn(`Warning: Could not remove PID file: ${error.message}`);
+  }
+}
+
+function isProcessRunning(pid) {
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+const commands = {
+  async serve(options) {
+    const pidFilePath = await getPidFilePath(options.port);
+
+    const existingPid = readPidFile(pidFilePath);
+    if (existingPid && isProcessRunning(existingPid)) {
+      console.error(`Error: OpenChamber is already running on port ${options.port} (PID: ${existingPid})`);
+      console.error('Use "openchamber stop" to stop the existing instance');
+      process.exit(1);
+    }
+
+    const opencodeBinary = await checkOpenCodeCLI();
+
+    const serverPath = path.join(__dirname, '..', 'server', 'index.js');
+
+    const serverArgs = [serverPath, '--port', options.port.toString()];
+    if (typeof options.uiPassword === 'string') {
+      serverArgs.push('--ui-password', options.uiPassword);
+    }
+
+    if (options.daemon) {
+
+      const child = spawn(process.execPath, serverArgs, {
+        detached: true,
+        stdio: 'ignore',
+        env: {
+          ...process.env,
+          OPENCHAMBER_PORT: options.port.toString(),
+          OPENCODE_BINARY: opencodeBinary,
+          ...(typeof options.uiPassword === 'string' ? { OPENCHAMBER_UI_PASSWORD: options.uiPassword } : {})
+        }
+      });
+
+      child.unref();
+
+      setTimeout(() => {
+        if (isProcessRunning(child.pid)) {
+          writePidFile(pidFilePath, child.pid);
+          console.log(`OpenChamber started in daemon mode on port ${options.port}`);
+          console.log(`PID: ${child.pid}`);
+          console.log(`Visit: http://localhost:${options.port}`);
+        } else {
+          console.error('Failed to start server in daemon mode');
+          process.exit(1);
+        }
+      }, 1000);
+
+    } else {
+
+      process.env.OPENCODE_BINARY = opencodeBinary;
+      if (typeof options.uiPassword === 'string') {
+        process.env.OPENCHAMBER_UI_PASSWORD = options.uiPassword;
+      }
+      const { startWebUiServer } = await import(serverPath);
+      await startWebUiServer({
+        port: options.port,
+        attachSignals: true,
+        exitOnShutdown: true,
+        uiPassword: typeof options.uiPassword === 'string' ? options.uiPassword : null
+      });
+    }
+  },
+
+  async stop(options) {
+    const os = await import('os');
+    const tmpDir = os.tmpdir();
+
+    let runningInstances = [];
+
+    try {
+      const files = fs.readdirSync(tmpDir);
+      const pidFiles = files.filter(file => file.startsWith('openchamber-') && file.endsWith('.pid'));
+
+      for (const file of pidFiles) {
+        const port = parseInt(file.replace('openchamber-', '').replace('.pid', ''));
+        if (!isNaN(port)) {
+          const pidFilePath = path.join(tmpDir, file);
+          const pid = readPidFile(pidFilePath);
+
+          if (pid && isProcessRunning(pid)) {
+            runningInstances.push({ port, pid, pidFilePath });
+          } else {
+
+            removePidFile(pidFilePath);
+          }
+        }
+      }
+    } catch (error) {
+
+    }
+
+    if (runningInstances.length === 0) {
+      console.log('No running OpenChamber instances found');
+      return;
+    }
+
+    const portWasSpecified = process.argv.includes('--port') || process.argv.includes('-p');
+
+    if (portWasSpecified) {
+      const targetInstance = runningInstances.find(inst => inst.port === options.port);
+
+      if (!targetInstance) {
+        console.log(`No OpenChamber instance found running on port ${options.port}`);
+        return;
+      }
+
+      console.log(`Stopping OpenChamber (PID: ${targetInstance.pid}, Port: ${targetInstance.port})...`);
+
+      try {
+        process.kill(targetInstance.pid, 'SIGTERM');
+
+        let attempts = 0;
+        const maxAttempts = 10;
+
+        const checkShutdown = setInterval(() => {
+          attempts++;
+          if (!isProcessRunning(targetInstance.pid)) {
+            clearInterval(checkShutdown);
+            removePidFile(targetInstance.pidFilePath);
+            console.log('OpenChamber stopped successfully');
+          } else if (attempts >= maxAttempts) {
+            clearInterval(checkShutdown);
+            console.log('Force killing process...');
+            process.kill(targetInstance.pid, 'SIGKILL');
+            removePidFile(targetInstance.pidFilePath);
+            console.log('OpenChamber force stopped');
+          }
+        }, 500);
+
+      } catch (error) {
+        console.error(`Error stopping process: ${error.message}`);
+        process.exit(1);
+      }
+    } else {
+
+      console.log(`Stopping all OpenChamber instances (${runningInstances.length} found)...`);
+
+      for (const instance of runningInstances) {
+        console.log(`  Stopping instance on port ${instance.port} (PID: ${instance.pid})...`);
+
+        try {
+          process.kill(instance.pid, 'SIGTERM');
+
+          let attempts = 0;
+          const maxAttempts = 10;
+
+          await new Promise((resolve) => {
+            const checkShutdown = setInterval(() => {
+              attempts++;
+              if (!isProcessRunning(instance.pid)) {
+                clearInterval(checkShutdown);
+                removePidFile(instance.pidFilePath);
+                console.log(`    Port ${instance.port} stopped successfully`);
+                resolve(true);
+              } else if (attempts >= maxAttempts) {
+                clearInterval(checkShutdown);
+                console.log(`    Force killing port ${instance.port}...`);
+                try {
+                  process.kill(instance.pid, 'SIGKILL');
+                  removePidFile(instance.pidFilePath);
+                  console.log(`    Port ${instance.port} force stopped`);
+                } catch (e) {
+
+                }
+                resolve(true);
+              }
+            }, 500);
+          });
+
+        } catch (error) {
+          console.error(`    Error stopping port ${instance.port}: ${error.message}`);
+        }
+      }
+
+      console.log('\nAll OpenChamber instances stopped');
+    }
+  },
+
+  async restart(options) {
+    await commands.stop(options);
+    await commands.serve(options);
+  },
+
+  async status(options) {
+    const os = await import('os');
+    const tmpDir = os.tmpdir();
+
+    let runningInstances = [];
+    let stoppedInstances = [];
+
+    try {
+      const files = fs.readdirSync(tmpDir);
+      const pidFiles = files.filter(file => file.startsWith('openchamber-') && file.endsWith('.pid'));
+
+      for (const file of pidFiles) {
+        const port = parseInt(file.replace('openchamber-', '').replace('.pid', ''));
+        if (!isNaN(port)) {
+          const pidFilePath = path.join(tmpDir, file);
+          const pid = readPidFile(pidFilePath);
+
+          if (pid && isProcessRunning(pid)) {
+            runningInstances.push({ port, pid, pidFilePath });
+          } else {
+
+            removePidFile(pidFilePath);
+            stoppedInstances.push({ port });
+          }
+        }
+      }
+    } catch (error) {
+
+    }
+
+    if (runningInstances.length === 0) {
+      console.log('OpenChamber Status:');
+      console.log('  Status: Stopped');
+      if (stoppedInstances.length > 0) {
+        console.log(`  Previously used ports: ${stoppedInstances.map(s => s.port).join(', ')}`);
+      }
+      return;
+    }
+
+    console.log('OpenChamber Status:');
+    for (const [index, instance] of runningInstances.entries()) {
+      if (runningInstances.length > 1) {
+        console.log(`\nInstance ${index + 1}:`);
+      }
+      console.log('  Status: Running');
+      console.log(`  PID: ${instance.pid}`);
+      console.log(`  Port: ${instance.port}`);
+      console.log(`  Visit: http://localhost:${instance.port}`);
+
+      try {
+        const { execSync } = await import('child_process');
+        const startTime = execSync(`ps -o lstart= -p ${instance.pid}`, { encoding: 'utf8' }).trim();
+        console.log(`  Start Time: ${startTime}`);
+      } catch (error) {
+
+      }
+    }
+  },
+
+};
+
+async function main() {
+  const { command, options } = parseArgs();
+
+  if (!commands[command]) {
+    console.error(`Error: Unknown command '${command}'`);
+    console.error('Use --help to see available commands');
+    process.exit(1);
+  }
+
+  try {
+    await commands[command](options);
+  } catch (error) {
+    console.error(`Error executing command '${command}': ${error.message}`);
+    process.exit(1);
+  }
+}
+
+process.on('unhandledRejection', (reason, promise) => {
+  console.error('Unhandled Rejection at:', promise, 'reason:', reason);
+  process.exit(1);
+});
+
+process.on('uncaughtException', (error) => {
+  console.error('Uncaught Exception:', error);
+  process.exit(1);
+});
+
+main();
+
+export { commands, parseArgs, getPidFilePath };
diff --git a/packages/web/index.html b/packages/web/index.html
new file mode 100644
index 00000000..f047e927
--- /dev/null
+++ b/packages/web/index.html
@@ -0,0 +1,194 @@
+<!doctype html>
+<html lang="en" class="h-full">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/logo-dark.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo-light.svg" media="(prefers-color-scheme: dark)" />
+    <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="/favicon-16.png" sizes="16x16" />
+    <link rel="mask-icon" href="/logo-dark.svg" color="#edb449" />
+
+    <!-- Apple touch icon - PNG format required for iOS PWA support -->
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />
+    <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
+
+    <!-- Web app manifest (data URL to avoid nginx auth issues) -->
+    <script>
+      const baseUrl = location.origin;
+      const manifest = {
+        "name": "OpenChamber - AI Coding Assistant",
+        "short_name": "OpenChamber",
+        "description": "Web interface companion for OpenCode AI coding agent",
+        "start_url": baseUrl + "/",
+        "display": "standalone",
+        "background_color": "#151313",
+        "theme_color": "#edb449",
+        "orientation": "portrait-primary",
+        "icons": [
+          {
+            "src": baseUrl + "/logo-dark.svg",
+            "sizes": "any",
+            "type": "image/svg+xml",
+            "purpose": "any maskable"
+          },
+          {
+            "src": baseUrl + "/favicon-16.png",
+            "sizes": "16x16",
+            "type": "image/png"
+          },
+          {
+            "src": baseUrl + "/favicon-32.png",
+            "sizes": "32x32",
+            "type": "image/png"
+          }
+        ],
+        "categories": ["developer", "tools", "productivity"],
+        "lang": "en"
+      };
+
+      const manifestBlob = new Blob([JSON.stringify(manifest)], {type: 'application/manifest+json'});
+      const manifestURL = URL.createObjectURL(manifestBlob);
+
+      const link = document.createElement('link');
+      link.rel = 'manifest';
+      link.href = manifestURL;
+      document.head.appendChild(link);
+    </script>
+
+    <script>
+      (function() {
+        try {
+          var variant = localStorage.getItem('selectedThemeVariant');
+          var useSystem = localStorage.getItem('useSystemTheme');
+          if (!variant || (variant !== 'light' && variant !== 'dark')) {
+            if (useSystem === null || useSystem === 'true') {
+              variant = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            } else {
+              variant = 'dark';
+            }
+          }
+          document.documentElement.setAttribute('data-splash-variant', variant === 'light' ? 'light' : 'dark');
+        } catch (error) {
+          console.warn('Failed to apply splash variant:', error);
+        }
+      })();
+    </script>
+
+    <!-- Theme color - Safari iOS 26+ prioritizes CSS background-color over this, but keep as fallback -->
+    <meta name="theme-color" content="#151313" />
+    <meta name="theme-color" content="#151313" media="(prefers-color-scheme: dark)" />
+
+    <!-- iOS Safari PWA styling -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="OpenChamber" />
+
+    <title>OpenChamber - AI Coding Assistant</title>
+    <meta name="description" content="Web interface companion for OpenCode AI coding agent" />
+    <meta name="application-name" content="OpenChamber" />
+    <meta name="apple-mobile-web-app-title" content="OpenChamber" />
+
+    <!-- Inline CSS for loading screen (before Tailwind loads) -->
+    <style>
+      :root {
+        --splash-background: #151313;
+        --splash-foreground: #cdccc3;
+        --splash-rect: #4B4646;
+        --splash-grad-stop1: #F8F8F8;
+        --splash-grad-stop2: #DAD6D0;
+        --splash-grad-stop3: #BAB4AF;
+        --splash-stroke1: rgba(255, 255, 255, 0.08);
+        --splash-stroke2: rgba(0, 0, 0, 0.15);
+        --splash-stroke3: rgba(0, 0, 0, 0.2);
+      }
+      html[data-splash-variant='light'] {
+        --splash-background: #F6F4EF;
+        --splash-foreground: #453f37;
+        --splash-rect: #CFCDCD;
+        --splash-grad-stop1: #B3AEA6;
+        --splash-grad-stop2: #928E86;
+        --splash-grad-stop3: #6E6A63;
+        --splash-stroke1: rgba(255, 255, 255, 0.22);
+        --splash-stroke2: rgba(60, 56, 47, 0.25);
+        --splash-stroke3: rgba(43, 39, 34, 0.4);
+      }
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.4; }
+      }
+      .loading-pulse {
+        animation: pulse 2s ease-in-out infinite;
+      }
+      #initial-loading {
+        background-color: var(--splash-background);
+        color: var(--splash-foreground);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        font-family: system-ui, -apple-system, sans-serif;
+        transition: opacity 0.3s ease-out;
+        position: absolute;
+        width: 100%;
+        z-index: 9999;
+      }
+      #initial-loading.fade-out {
+        opacity: 0;
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body class="h-full bg-background text-foreground">
+    <div id="root" class="h-full">
+      <!-- Loading fallback while React initializes -->
+      <div id="initial-loading">
+        <div style="display: flex; align-items: center; justify-content: center;">
+          <svg class="loading-pulse" width="96" height="96" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="OpenChamber loading icon">
+            <defs>
+              <linearGradient id="loadingGlyphGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="var(--splash-grad-stop1)"/>
+                <stop offset="55%" stop-color="var(--splash-grad-stop2)"/>
+                <stop offset="100%" stop-color="var(--splash-grad-stop3)"/>
+              </linearGradient>
+              <linearGradient id="loadingGlyphStroke" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="var(--splash-stroke1)"/>
+                <stop offset="45%" stop-color="var(--splash-stroke2)"/>
+                <stop offset="100%" stop-color="var(--splash-stroke3)"/>
+              </linearGradient>
+            </defs>
+            <rect x="8.75" y="31" width="17.5" height="20.5" fill="var(--splash-rect)" />
+            <path d="M0 13H35V58H0V13ZM26.25 22.1957H8.75V48.701H26.25V22.1957Z" fill="url(#loadingGlyphGradient)" stroke="url(#loadingGlyphStroke)" stroke-width="1.1" stroke-linejoin="round" />
+            <path d="M43.75 13H70V22.1957H52.5V48.701H70V57.8967H43.75V13Z" fill="url(#loadingGlyphGradient)" stroke="url(#loadingGlyphStroke)" stroke-width="1.1" stroke-linejoin="round" />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // Fallback: hide loading screen after 10 seconds if React fails to load
+      setTimeout(function() {
+        const loading = document.getElementById('initial-loading');
+        if (loading) {
+          console.warn('Loading screen timeout - forcing hide after 10s');
+          loading.classList.add('fade-out');
+          setTimeout(function() {
+            loading.remove();
+          }, 300);
+        }
+      }, 10000);
+    </script>
+
+    <!-- Polyfill for process before loading React -->
+    <script>
+      if (typeof process === 'undefined') {
+        window.process = { env: {} };
+      }
+    </script>
+
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/web/package.json b/packages/web/package.json
new file mode 100644
index 00000000..e15b6112
--- /dev/null
+++ b/packages/web/package.json
@@ -0,0 +1,92 @@
+{
+  "name": "@openchamber/web",
+  "version": "1.0.0",
+  "private": false,
+  "type": "module",
+  "main": "./server/index.js",
+  "types": "./server/index.d.ts",
+  "bin": {
+    "openchamber": "./bin/cli.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "pnpm run build:watch",
+    "dev:server": "node server/index.js --port 3001",
+    "dev:server:watch": "nodemon --watch server --ext js --exec \"node server/index.js --port 3001\"",
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint \"./src/**/*.{ts,tsx}\" --config ../../eslint.config.js",
+    "start": "node server/index.js"
+  },
+  "dependencies": {
+    "@fontsource/ibm-plex-mono": "^5.2.7",
+    "@fontsource/ibm-plex-sans": "^5.1.1",
+    "@ibm/plex": "^6.4.1",
+    "@opencode-ai/sdk": "^1.0.65",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@remixicon/react": "^4.7.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "express": "^5.1.0",
+    "http-proxy-middleware": "^3.0.5",
+    "next-themes": "^0.4.6",
+    "node-pty": "^1.0.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^15.6.6",
+    "remark-gfm": "^4.0.1",
+    "simple-git": "^3.28.0",
+    "sonner": "^2.0.7",
+    "strip-json-comments": "^5.0.3",
+    "tailwind-merge": "^3.3.1",
+    "yaml": "^2.8.1",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@types/node": "^24.3.1",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.0",
+    "autoprefixer": "^10.4.21",
+    "concurrently": "^9.2.1",
+    "cors": "^2.8.5",
+    "cross-env": "^7.0.3",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "nodemon": "^3.1.7",
+    "tailwindcss": "^4.0.0",
+    "tsx": "^4.20.6",
+    "tw-animate-css": "^1.3.8",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2"
+  },
+  "files": [
+    "dist",
+    "server",
+    "bin",
+    "public",
+    "package.json",
+    "README.md"
+  ]
+}
diff --git a/packages/web/public/apple-touch-icon-120x120.png b/packages/web/public/apple-touch-icon-120x120.png
new file mode 100644
index 00000000..cd96ab88
Binary files /dev/null and b/packages/web/public/apple-touch-icon-120x120.png differ
diff --git a/packages/web/public/apple-touch-icon-152x152.png b/packages/web/public/apple-touch-icon-152x152.png
new file mode 100644
index 00000000..3f6fdb90
Binary files /dev/null and b/packages/web/public/apple-touch-icon-152x152.png differ
diff --git a/packages/web/public/apple-touch-icon-167x167.png b/packages/web/public/apple-touch-icon-167x167.png
new file mode 100644
index 00000000..170b4a25
Binary files /dev/null and b/packages/web/public/apple-touch-icon-167x167.png differ
diff --git a/packages/web/public/apple-touch-icon-180x180.png b/packages/web/public/apple-touch-icon-180x180.png
new file mode 100644
index 00000000..f57bd70d
Binary files /dev/null and b/packages/web/public/apple-touch-icon-180x180.png differ
diff --git a/packages/web/public/apple-touch-icon.png b/packages/web/public/apple-touch-icon.png
new file mode 100644
index 00000000..9e72f8e3
Binary files /dev/null and b/packages/web/public/apple-touch-icon.png differ
diff --git a/packages/web/public/apple-touch-icon.svg b/packages/web/public/apple-touch-icon.svg
new file mode 100644
index 00000000..850d7b52
--- /dev/null
+++ b/packages/web/public/apple-touch-icon.svg
@@ -0,0 +1,18 @@
+<svg width="180" height="180" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(8.75, 8.75) scale(0.75)">
+    <!-- Letter O with white fill and thin black stroke -->
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M0 13H35V58H0V13ZM26.25 22.1957H8.75V48.701H26.25V22.1957Z"
+          fill="white"
+          stroke="black"
+          stroke-width="1.1"
+          stroke-linejoin="round"/>
+
+    <!-- Letter C with white fill and thin black stroke -->
+    <path d="M43.75 13H70V22.1957H52.5V48.701H70V57.8967H43.75V13Z"
+          fill="white"
+          stroke="black"
+          stroke-width="1.1"
+          stroke-linejoin="round"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/web/public/favicon-16.png b/packages/web/public/favicon-16.png
new file mode 100644
index 00000000..43e4bea5
Binary files /dev/null and b/packages/web/public/favicon-16.png differ
diff --git a/packages/web/public/favicon-32.png b/packages/web/public/favicon-32.png
new file mode 100644
index 00000000..be45ee11
Binary files /dev/null and b/packages/web/public/favicon-32.png differ
diff --git a/packages/web/public/logo-dark.svg b/packages/web/public/logo-dark.svg
new file mode 100644
index 00000000..404e214d
--- /dev/null
+++ b/packages/web/public/logo-dark.svg
@@ -0,0 +1,4 @@
+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13H35V58H0V13ZM26.25 22.1957H8.75V48.701H26.25V22.1957Z" fill="black"/>
+<path d="M43.75 13H70V22.1957H52.5V48.701H70V57.8967H43.75V13Z" fill="black"/>
+</svg>
diff --git a/packages/web/public/logo-light.svg b/packages/web/public/logo-light.svg
new file mode 100644
index 00000000..a309fcae
--- /dev/null
+++ b/packages/web/public/logo-light.svg
@@ -0,0 +1,4 @@
+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13H35V58H0V13ZM26.25 22.1957H8.75V48.701H26.25V22.1957Z" fill="white"/>
+<path d="M43.75 13H70V22.1957H52.5V48.701H70V57.8967H43.75V13Z" fill="white"/>
+</svg>
diff --git a/packages/web/public/site.webmanifest b/packages/web/public/site.webmanifest
new file mode 100644
index 00000000..7ed827b0
--- /dev/null
+++ b/packages/web/public/site.webmanifest
@@ -0,0 +1,36 @@
+{
+  "name": "OpenChamber - AI Coding Companion",
+  "short_name": "OpenChamber",
+  "description": "OpenChamber desktop companion for the OpenCode AI coding agent",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#151313",
+  "theme_color": "#edb449",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/logo-dark.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/logo-light.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/favicon-16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon-32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    }
+  ],
+  "categories": ["developer", "tools", "productivity"],
+  "lang": "en"
+}
diff --git a/packages/web/public/vite.svg b/packages/web/public/vite.svg
new file mode 100644
index 00000000..e7b8dfb1
--- /dev/null
+++ b/packages/web/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/packages/web/server/index.d.ts b/packages/web/server/index.d.ts
new file mode 100644
index 00000000..6d63cf50
--- /dev/null
+++ b/packages/web/server/index.d.ts
@@ -0,0 +1,28 @@
+import type { Express } from "express";
+import type { Server } from "http";
+
+export interface WebUiServerController {
+  expressApp: Express;
+  httpServer: Server;
+  getPort: () => number | null;
+  getOpenCodePort: () => number | null;
+  isReady: () => boolean;
+  restartOpenCode: () => Promise<void>;
+  stop: (options?: { exitProcess?: boolean }) => Promise<void>;
+}
+
+export interface StartWebUiServerOptions {
+  port?: number;
+  attachSignals?: boolean;
+  exitOnShutdown?: boolean;
+  uiPassword?: string | null;
+}
+
+export declare function startWebUiServer(
+  options?: StartWebUiServerOptions
+): Promise<WebUiServerController>;
+
+export declare function gracefulShutdown(options?: { exitProcess?: boolean }): Promise<void>;
+export declare function setupProxy(app: Express): void;
+export declare function restartOpenCode(): Promise<void>;
+export declare function parseArgs(argv?: string[]): { port: number; uiPassword: string | null };
diff --git a/packages/web/server/index.js b/packages/web/server/index.js
new file mode 100644
index 00000000..48a24d7a
--- /dev/null
+++ b/packages/web/server/index.js
@@ -0,0 +1,3038 @@
+import express from 'express';
+import { createProxyMiddleware } from 'http-proxy-middleware';
+import path from 'path';
+import { spawn, spawnSync } from 'child_process';
+import fs from 'fs';
+import http from 'http';
+import { fileURLToPath } from 'url';
+import os from 'os';
+import { createUiAuth } from './lib/ui-auth.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const DEFAULT_PORT = 3000;
+const DEFAULT_OPENCODE_PORT = 0;
+const HEALTH_CHECK_INTERVAL = 30000;
+const SHUTDOWN_TIMEOUT = 10000;
+const MODELS_DEV_API_URL = 'https://models.dev/api.json';
+const MODELS_METADATA_CACHE_TTL = 5 * 60 * 1000;
+const CLIENT_RELOAD_DELAY_MS = 800;
+const OPEN_CODE_READY_GRACE_MS = 12000;
+const LONG_REQUEST_TIMEOUT_MS = 4 * 60 * 1000;
+const fsPromises = fs.promises;
+const DEFAULT_FILE_SEARCH_LIMIT = 60;
+const MAX_FILE_SEARCH_LIMIT = 400;
+const FILE_SEARCH_MAX_CONCURRENCY = 5;
+const FILE_SEARCH_EXCLUDED_DIRS = new Set([
+  'node_modules',
+  '.git',
+  'dist',
+  'build',
+  '.next',
+  '.turbo',
+  '.cache',
+  'coverage',
+  'tmp',
+  'logs'
+]);
+
+const normalizeRelativeSearchPath = (rootPath, targetPath) => {
+  const relative = path.relative(rootPath, targetPath) || path.basename(targetPath);
+  return relative.split(path.sep).join('/') || targetPath;
+};
+
+const shouldSkipSearchDirectory = (name) => {
+  if (!name) {
+    return false;
+  }
+  if (name.startsWith('.')) {
+    return true;
+  }
+  return FILE_SEARCH_EXCLUDED_DIRS.has(name.toLowerCase());
+};
+
+const listDirectoryEntries = async (dirPath) => {
+  try {
+    return await fsPromises.readdir(dirPath, { withFileTypes: true });
+  } catch {
+    return [];
+  }
+};
+
+const searchFilesystemFiles = async (rootPath, options) => {
+  const { limit, query } = options;
+  const normalizedQuery = query.trim().toLowerCase();
+  const matchAll = normalizedQuery.length === 0;
+  const queue = [rootPath];
+  const visited = new Set([rootPath]);
+  const results = [];
+
+  while (queue.length > 0 && results.length < limit) {
+    const batch = queue.splice(0, FILE_SEARCH_MAX_CONCURRENCY);
+    const dirLists = await Promise.all(batch.map((dir) => listDirectoryEntries(dir)));
+
+    for (let index = 0; index < batch.length; index += 1) {
+      const currentDir = batch[index];
+      const dirents = dirLists[index];
+
+      for (const dirent of dirents) {
+        const entryName = dirent.name;
+        if (!entryName || entryName.startsWith('.')) {
+          continue;
+        }
+
+        const entryPath = path.join(currentDir, entryName);
+
+        if (dirent.isDirectory()) {
+          if (shouldSkipSearchDirectory(entryName)) {
+            continue;
+          }
+          if (!visited.has(entryPath)) {
+            visited.add(entryPath);
+            queue.push(entryPath);
+          }
+          continue;
+        }
+
+        if (!dirent.isFile()) {
+          continue;
+        }
+
+        const relativePath = normalizeRelativeSearchPath(rootPath, entryPath);
+        if (!matchAll) {
+          const lowercaseName = entryName.toLowerCase();
+          const lowercasePath = relativePath.toLowerCase();
+          if (!lowercaseName.includes(normalizedQuery) && !lowercasePath.includes(normalizedQuery)) {
+            continue;
+          }
+        }
+
+        results.push({
+          name: entryName,
+          path: entryPath,
+          relativePath,
+          extension: entryName.includes('.') ? entryName.split('.').pop()?.toLowerCase() : undefined
+        });
+
+        if (results.length >= limit) {
+          queue.length = 0;
+          break;
+        }
+      }
+
+      if (results.length >= limit) {
+        break;
+      }
+    }
+  }
+
+  return results;
+};
+
+const createTimeoutSignal = (timeoutMs) => {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), timeoutMs);
+  return {
+    signal: controller.signal,
+    cleanup: () => clearTimeout(timer),
+  };
+};
+
+const stripJsonMarkdownWrapper = (value) => {
+  if (typeof value !== 'string') {
+    return '';
+  }
+  let trimmed = value.trim();
+  if (!trimmed) {
+    return '';
+  }
+  if (trimmed.startsWith('```')) {
+    trimmed = trimmed.replace(/^```(?:json)?\s*/i, '');
+    const closingFenceIndex = trimmed.lastIndexOf('```');
+    if (closingFenceIndex !== -1) {
+      trimmed = trimmed.slice(0, closingFenceIndex);
+    }
+    trimmed = trimmed.trim();
+  }
+  if (trimmed.endsWith('```')) {
+    trimmed = trimmed.slice(0, -3).trim();
+  }
+  return trimmed;
+};
+
+const OPENCHAMBER_DATA_DIR = process.env.OPENCHAMBER_DATA_DIR
+  ? path.resolve(process.env.OPENCHAMBER_DATA_DIR)
+  : path.join(os.homedir(), '.config', 'openchamber');
+const SETTINGS_FILE_PATH = path.join(OPENCHAMBER_DATA_DIR, 'settings.json');
+
+const readSettingsFromDisk = async () => {
+  try {
+    const raw = await fsPromises.readFile(SETTINGS_FILE_PATH, 'utf8');
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === 'object') {
+      return parsed;
+    }
+    return {};
+  } catch (error) {
+    if (error && typeof error === 'object' && error.code === 'ENOENT') {
+      return {};
+    }
+    console.warn('Failed to read settings file:', error);
+    return {};
+  }
+};
+
+const writeSettingsToDisk = async (settings) => {
+  try {
+    await fsPromises.mkdir(path.dirname(SETTINGS_FILE_PATH), { recursive: true });
+    await fsPromises.writeFile(SETTINGS_FILE_PATH, JSON.stringify(settings, null, 2), 'utf8');
+  } catch (error) {
+    console.warn('Failed to write settings file:', error);
+    throw error;
+  }
+};
+
+const sanitizeTypographySizesPartial = (input) => {
+  if (!input || typeof input !== 'object') {
+    return undefined;
+  }
+  const candidate = input;
+  const result = {};
+  let populated = false;
+
+  const assign = (key) => {
+    if (typeof candidate[key] === 'string' && candidate[key].length > 0) {
+      result[key] = candidate[key];
+      populated = true;
+    }
+  };
+
+  assign('markdown');
+  assign('code');
+  assign('uiHeader');
+  assign('uiLabel');
+  assign('meta');
+  assign('micro');
+
+  return populated ? result : undefined;
+};
+
+const normalizeStringArray = (input) => {
+  if (!Array.isArray(input)) {
+    return [];
+  }
+  return Array.from(
+    new Set(
+      input.filter((entry) => typeof entry === 'string' && entry.length > 0)
+    )
+  );
+};
+
+const sanitizeSettingsUpdate = (payload) => {
+  if (!payload || typeof payload !== 'object') {
+    return {};
+  }
+
+  const candidate = payload;
+  const result = {};
+
+  if (typeof candidate.themeId === 'string' && candidate.themeId.length > 0) {
+    result.themeId = candidate.themeId;
+  }
+  if (typeof candidate.themeVariant === 'string' && (candidate.themeVariant === 'light' || candidate.themeVariant === 'dark')) {
+    result.themeVariant = candidate.themeVariant;
+  }
+  if (typeof candidate.useSystemTheme === 'boolean') {
+    result.useSystemTheme = candidate.useSystemTheme;
+  }
+  if (typeof candidate.lightThemeId === 'string' && candidate.lightThemeId.length > 0) {
+    result.lightThemeId = candidate.lightThemeId;
+  }
+  if (typeof candidate.darkThemeId === 'string' && candidate.darkThemeId.length > 0) {
+    result.darkThemeId = candidate.darkThemeId;
+  }
+  if (typeof candidate.lastDirectory === 'string' && candidate.lastDirectory.length > 0) {
+    result.lastDirectory = candidate.lastDirectory;
+  }
+  if (typeof candidate.homeDirectory === 'string' && candidate.homeDirectory.length > 0) {
+    result.homeDirectory = candidate.homeDirectory;
+  }
+
+  if (Array.isArray(candidate.approvedDirectories)) {
+    result.approvedDirectories = normalizeStringArray(candidate.approvedDirectories);
+  }
+  if (Array.isArray(candidate.securityScopedBookmarks)) {
+    result.securityScopedBookmarks = normalizeStringArray(candidate.securityScopedBookmarks);
+  }
+  if (Array.isArray(candidate.pinnedDirectories)) {
+    result.pinnedDirectories = normalizeStringArray(candidate.pinnedDirectories);
+  }
+
+  if (typeof candidate.uiFont === 'string' && candidate.uiFont.length > 0) {
+    result.uiFont = candidate.uiFont;
+  }
+  if (typeof candidate.monoFont === 'string' && candidate.monoFont.length > 0) {
+    result.monoFont = candidate.monoFont;
+  }
+  if (typeof candidate.markdownDisplayMode === 'string' && candidate.markdownDisplayMode.length > 0) {
+    result.markdownDisplayMode = candidate.markdownDisplayMode;
+  }
+  if (typeof candidate.showReasoningTraces === 'boolean') {
+    result.showReasoningTraces = candidate.showReasoningTraces;
+  }
+
+  const typography = sanitizeTypographySizesPartial(candidate.typographySizes);
+  if (typography) {
+    result.typographySizes = typography;
+  }
+
+  return result;
+};
+
+const mergePersistedSettings = (current, changes) => {
+  const baseApproved = Array.isArray(changes.approvedDirectories)
+    ? changes.approvedDirectories
+    : Array.isArray(current.approvedDirectories)
+      ? current.approvedDirectories
+      : [];
+
+  const additionalApproved = [];
+  if (typeof changes.lastDirectory === 'string' && changes.lastDirectory.length > 0) {
+    additionalApproved.push(changes.lastDirectory);
+  }
+  if (typeof changes.homeDirectory === 'string' && changes.homeDirectory.length > 0) {
+    additionalApproved.push(changes.homeDirectory);
+  }
+  const approvedSource = [...baseApproved, ...additionalApproved];
+
+  const baseBookmarks = Array.isArray(changes.securityScopedBookmarks)
+    ? changes.securityScopedBookmarks
+    : Array.isArray(current.securityScopedBookmarks)
+      ? current.securityScopedBookmarks
+      : [];
+
+  const nextTypographySizes = changes.typographySizes
+    ? {
+        ...(current.typographySizes || {}),
+        ...changes.typographySizes
+      }
+    : current.typographySizes;
+
+  const next = {
+    ...current,
+    ...changes,
+    approvedDirectories: Array.from(
+      new Set(
+        approvedSource.filter((entry) => typeof entry === 'string' && entry.length > 0)
+      )
+    ),
+    securityScopedBookmarks: Array.from(
+      new Set(
+        baseBookmarks.filter((entry) => typeof entry === 'string' && entry.length > 0)
+      )
+    ),
+    typographySizes: nextTypographySizes
+  };
+
+  return next;
+};
+
+const formatSettingsResponse = (settings) => {
+  const sanitized = sanitizeSettingsUpdate(settings);
+  const approved = normalizeStringArray(settings.approvedDirectories);
+  const bookmarks = normalizeStringArray(settings.securityScopedBookmarks);
+
+  return {
+    ...sanitized,
+    approvedDirectories: approved,
+    securityScopedBookmarks: bookmarks,
+    pinnedDirectories: normalizeStringArray(settings.pinnedDirectories),
+    typographySizes: sanitizeTypographySizesPartial(settings.typographySizes),
+    showReasoningTraces:
+      typeof settings.showReasoningTraces === 'boolean'
+        ? settings.showReasoningTraces
+        : typeof sanitized.showReasoningTraces === 'boolean'
+          ? sanitized.showReasoningTraces
+          : false
+  };
+};
+
+const persistSettings = async (changes) => {
+  const current = await readSettingsFromDisk();
+  const sanitized = sanitizeSettingsUpdate(changes);
+  const next = mergePersistedSettings(current, sanitized);
+  await writeSettingsToDisk(next);
+  return formatSettingsResponse(next);
+};
+
+// Global state
+let openCodeProcess = null;
+let openCodePort = null;
+let healthCheckInterval = null;
+let server = null;
+let isShuttingDown = false;
+let cachedModelsMetadata = null;
+let cachedModelsMetadataTimestamp = 0;
+let expressApp = null;
+let currentRestartPromise = null;
+let isRestartingOpenCode = false;
+let openCodeApiPrefix = '';
+let openCodeApiPrefixDetected = false;
+let openCodeApiDetectionTimer = null;
+let isDetectingApiPrefix = false;
+let openCodeApiDetectionPromise = null;
+let lastOpenCodeError = null;
+let openCodePortWaiters = [];
+let isOpenCodeReady = false;
+let openCodeNotReadySince = 0;
+let exitOnShutdown = true;
+let signalsAttached = false;
+let openCodeWorkingDirectory = process.cwd();
+let uiAuthController = null;
+
+const OPENCODE_BINARY_ENV =
+  process.env.OPENCODE_BINARY ||
+  process.env.OPENCHAMBER_BINARY ||
+  process.env.OPENCODE_PATH ||
+  process.env.OPENCHAMBER_OPENCODE_PATH ||
+  null;
+
+function buildAugmentedPath() {
+  const augmented = new Set();
+
+  const loginShellPath = getLoginShellPath();
+  if (loginShellPath) {
+    for (const segment of loginShellPath.split(path.delimiter)) {
+      if (segment) {
+        augmented.add(segment);
+      }
+    }
+  }
+
+  const current = (process.env.PATH || '').split(path.delimiter).filter(Boolean);
+  for (const segment of current) {
+    augmented.add(segment);
+  }
+
+  return Array.from(augmented).join(path.delimiter);
+}
+
+function getLoginShellPath() {
+  if (process.platform === 'win32') {
+    return null;
+  }
+
+  const shell = process.env.SHELL || '/bin/zsh';
+  try {
+    const result = spawnSync(shell, ['-lic', 'echo -n "$PATH"'], { encoding: 'utf8', stdio: ['ignore', 'pipe', 'pipe'] });
+    if (result.status === 0 && typeof result.stdout === 'string') {
+      const value = result.stdout.trim();
+      if (value) {
+        return value;
+      }
+    } else if (result.stderr) {
+      console.warn(`Failed to read PATH from login shell (${shell}): ${result.stderr}`);
+    }
+  } catch (error) {
+    console.warn(`Error executing login shell (${shell}) for PATH detection: ${error.message}`);
+  }
+  return null;
+}
+
+function resolveBinaryFromPath(binaryName, searchPath) {
+  if (!binaryName) {
+    return null;
+  }
+  if (path.isAbsolute(binaryName)) {
+    return fs.existsSync(binaryName) ? binaryName : null;
+  }
+  const directories = searchPath.split(path.delimiter).filter(Boolean);
+  for (const directory of directories) {
+    try {
+      const candidate = path.join(directory, binaryName);
+      if (fs.existsSync(candidate)) {
+        const stats = fs.statSync(candidate);
+        if (stats.isFile()) {
+          return candidate;
+        }
+      }
+    } catch {
+      // Ignore resolution errors, continue searching
+    }
+  }
+  return null;
+}
+
+function getOpencodeSpawnConfig() {
+  const envPath = buildAugmentedPath();
+  const resolvedEnv = { ...process.env, PATH: envPath };
+
+  if (OPENCODE_BINARY_ENV) {
+    const explicit = resolveBinaryFromPath(OPENCODE_BINARY_ENV, envPath);
+    if (explicit) {
+      console.log(`Using OpenCode binary from OPENCODE_BINARY: ${explicit}`);
+      return { command: explicit, env: resolvedEnv };
+    }
+    console.warn(
+      `OPENCODE_BINARY path "${OPENCODE_BINARY_ENV}" not found. Falling back to search.`
+    );
+  }
+
+  return { command: 'opencode', env: resolvedEnv };
+}
+
+const ENV_CONFIGURED_OPENCODE_PORT = (() => {
+  const raw =
+    process.env.OPENCODE_PORT ||
+    process.env.OPENCHAMBER_OPENCODE_PORT ||
+    process.env.OPENCHAMBER_INTERNAL_PORT;
+  if (!raw) {
+    return null;
+  }
+  const parsed = parseInt(raw, 10);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+})();
+
+const ENV_CONFIGURED_API_PREFIX = normalizeApiPrefix(
+  process.env.OPENCODE_API_PREFIX || process.env.OPENCHAMBER_API_PREFIX || ''
+);
+
+if (ENV_CONFIGURED_API_PREFIX) {
+  openCodeApiPrefix = ENV_CONFIGURED_API_PREFIX;
+  openCodeApiPrefixDetected = true;
+  console.log(`Using OpenCode API prefix from environment: ${openCodeApiPrefix}`);
+}
+
+function setOpenCodePort(port) {
+  if (!Number.isFinite(port) || port <= 0) {
+    return;
+  }
+
+  const numericPort = Math.trunc(port);
+  const portChanged = openCodePort !== numericPort;
+
+  if (portChanged || openCodePort === null) {
+    openCodePort = numericPort;
+    console.log(`Detected OpenCode port: ${openCodePort}`);
+
+    if (portChanged) {
+      isOpenCodeReady = false;
+    }
+    openCodeNotReadySince = Date.now();
+  }
+
+  lastOpenCodeError = null;
+
+  if (openCodePortWaiters.length > 0) {
+    const waiters = openCodePortWaiters;
+    openCodePortWaiters = [];
+    for (const notify of waiters) {
+      try {
+        notify(numericPort);
+      } catch (error) {
+        console.warn('Failed to notify OpenCode port waiter:', error);
+      }
+    }
+  }
+}
+
+async function waitForOpenCodePort(timeoutMs = 15000) {
+  if (openCodePort !== null) {
+    return openCodePort;
+  }
+
+  return new Promise((resolve, reject) => {
+    const onPortDetected = (port) => {
+      clearTimeout(timeout);
+      resolve(port);
+    };
+
+    const timeout = setTimeout(() => {
+      openCodePortWaiters = openCodePortWaiters.filter((cb) => cb !== onPortDetected);
+      reject(new Error('Timed out waiting for OpenCode port'));
+    }, timeoutMs);
+
+    openCodePortWaiters.push(onPortDetected);
+  });
+}
+
+const API_PREFIX_CANDIDATES = ['', '/api']; // Simplified - only check root and /api
+
+function normalizeApiPrefix(prefix) {
+  if (!prefix) {
+    return '';
+  }
+
+  if (prefix.includes('://')) {
+    try {
+      const parsed = new URL(prefix);
+      return normalizeApiPrefix(parsed.pathname);
+    } catch (error) {
+      return '';
+    }
+  }
+
+  const trimmed = prefix.trim();
+  if (!trimmed || trimmed === '/') {
+    return '';
+  }
+  const withLeading = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+  return withLeading.endsWith('/') ? withLeading.slice(0, -1) : withLeading;
+}
+
+function setDetectedOpenCodeApiPrefix(prefix) {
+  const normalized = normalizeApiPrefix(prefix);
+  if (!openCodeApiPrefixDetected || openCodeApiPrefix !== normalized) {
+    openCodeApiPrefix = normalized;
+    openCodeApiPrefixDetected = true;
+    if (openCodeApiDetectionTimer) {
+      clearTimeout(openCodeApiDetectionTimer);
+      openCodeApiDetectionTimer = null;
+    }
+    console.log(`Detected OpenCode API prefix: ${normalized || '(root)'}`);
+  }
+}
+
+function detectPortFromLogMessage(message) {
+  if (openCodePort && ENV_CONFIGURED_OPENCODE_PORT) {
+    return;
+  }
+
+  const regex = /https?:\/\/[^:\s]+:(\d+)/gi;
+  let match;
+  while ((match = regex.exec(message)) !== null) {
+    const port = parseInt(match[1], 10);
+    if (Number.isFinite(port) && port > 0) {
+      setOpenCodePort(port);
+      return;
+    }
+  }
+
+  const fallbackMatch = /(?:^|\s)(?:127\.0\.0\.1|localhost):(\d+)/i.exec(message);
+  if (fallbackMatch) {
+    const port = parseInt(fallbackMatch[1], 10);
+    if (Number.isFinite(port) && port > 0) {
+      setOpenCodePort(port);
+    }
+  }
+}
+
+function detectPrefixFromLogMessage(message) {
+  if (!openCodePort) {
+    return;
+  }
+
+  const urlRegex = /https?:\/\/[^:\s]+:(\d+)(\/[^\s"']*)?/gi;
+  let match;
+
+  while ((match = urlRegex.exec(message)) !== null) {
+    const portMatch = parseInt(match[1], 10);
+    if (portMatch !== openCodePort) {
+      continue;
+    }
+
+    const path = match[2] || '';
+    const normalized = normalizeApiPrefix(path);
+    setDetectedOpenCodeApiPrefix(normalized);
+    return;
+  }
+}
+
+function getCandidateApiPrefixes() {
+  if (openCodeApiPrefixDetected) {
+    return [openCodeApiPrefix];
+  }
+
+  const candidates = [];
+  if (openCodeApiPrefix && !candidates.includes(openCodeApiPrefix)) {
+    candidates.push(openCodeApiPrefix);
+  }
+
+  for (const candidate of API_PREFIX_CANDIDATES) {
+    if (!candidates.includes(candidate)) {
+      candidates.push(candidate);
+    }
+  }
+
+  return candidates;
+}
+
+function buildOpenCodeUrl(path, prefixOverride) {
+  if (!openCodePort) {
+    throw new Error('OpenCode port is not available');
+  }
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+  const prefix = normalizeApiPrefix(
+    prefixOverride !== undefined ? prefixOverride : openCodeApiPrefixDetected ? openCodeApiPrefix : ''
+  );
+  const fullPath = `${prefix}${normalizedPath}`;
+  return `http://localhost:${openCodePort}${fullPath}`;
+}
+
+function extractApiPrefixFromUrl(urlString, expectedSuffix) {
+  if (!urlString) {
+    return null;
+  }
+  try {
+    const parsed = new URL(urlString);
+    const pathname = parsed.pathname || '';
+    if (expectedSuffix && pathname.endsWith(expectedSuffix)) {
+      const prefix = pathname.slice(0, pathname.length - expectedSuffix.length);
+      return normalizeApiPrefix(prefix);
+    }
+  } catch (error) {
+    console.warn(`Failed to parse OpenCode URL "${urlString}": ${error.message}`);
+  }
+  return null;
+}
+
+async function tryDetectOpenCodeApiPrefix() {
+  if (!openCodePort) {
+    return false;
+  }
+
+  const docPrefix = await detectPrefixFromDocumentation();
+  if (docPrefix !== null) {
+    setDetectedOpenCodeApiPrefix(docPrefix);
+    return true;
+  }
+
+  const candidates = getCandidateApiPrefixes();
+
+  for (const candidate of candidates) {
+    try {
+      const response = await fetch(buildOpenCodeUrl('/config', candidate), {
+        method: 'GET',
+        headers: { Accept: 'application/json' }
+      });
+
+      if (response.ok) {
+        await response.json().catch(() => null);
+        setDetectedOpenCodeApiPrefix(candidate);
+        return true;
+      }
+    } catch (error) {
+
+    }
+  }
+
+  return false;
+}
+
+async function detectOpenCodeApiPrefix() {
+  if (openCodeApiPrefixDetected) {
+    return true;
+  }
+
+  if (!openCodePort) {
+    return false;
+  }
+
+  if (isDetectingApiPrefix) {
+    try {
+      await openCodeApiDetectionPromise;
+    } catch (error) {
+
+    }
+    return openCodeApiPrefixDetected;
+  }
+
+  isDetectingApiPrefix = true;
+  openCodeApiDetectionPromise = (async () => {
+    const success = await tryDetectOpenCodeApiPrefix();
+    if (!success) {
+      console.warn('Failed to detect OpenCode API prefix via documentation or known candidates');
+    }
+    return success;
+  })();
+
+  try {
+    const result = await openCodeApiDetectionPromise;
+    return result;
+  } finally {
+    isDetectingApiPrefix = false;
+    openCodeApiDetectionPromise = null;
+  }
+}
+
+async function ensureOpenCodeApiPrefix() {
+  if (openCodeApiPrefixDetected) {
+    return true;
+  }
+
+  const result = await detectOpenCodeApiPrefix();
+  if (!result) {
+    scheduleOpenCodeApiDetection();
+  }
+  return result;
+}
+
+function scheduleOpenCodeApiDetection(delayMs = 500) {
+  if (openCodeApiPrefixDetected) {
+    return;
+  }
+
+  if (openCodeApiDetectionTimer) {
+    clearTimeout(openCodeApiDetectionTimer);
+  }
+
+  openCodeApiDetectionTimer = setTimeout(async () => {
+    openCodeApiDetectionTimer = null;
+    const success = await detectOpenCodeApiPrefix();
+    if (!success) {
+      const nextDelay = Math.min(delayMs * 2, 8000);
+      scheduleOpenCodeApiDetection(nextDelay);
+    }
+  }, delayMs);
+}
+
+const OPENAPI_DOC_PATHS = ['/doc'];
+
+function extractPrefixFromOpenApiDocument(content) {
+
+  const globalMatch = content.match(/__OPENCODE_API_BASE__\s*=\s*['"]([^'"]+)['"]/);
+  if (globalMatch && globalMatch[1]) {
+    return normalizeApiPrefix(globalMatch[1]);
+  }
+  return null;
+}
+
+async function detectPrefixFromDocumentation() {
+  if (!openCodePort) {
+    return null;
+  }
+
+  const prefixesToTry = [...new Set(['', ...API_PREFIX_CANDIDATES])];
+
+  for (const prefix of prefixesToTry) {
+    for (const docPath of OPENAPI_DOC_PATHS) {
+      try {
+        const response = await fetch(buildOpenCodeUrl(docPath, prefix), {
+          method: 'GET',
+          headers: { Accept: '*/*' }
+        });
+
+        if (!response.ok) {
+          continue;
+        }
+
+        const text = await response.text();
+        const extracted = extractPrefixFromOpenApiDocument(text);
+        if (extracted !== null) {
+          return extracted;
+        }
+      } catch (error) {
+
+      }
+    }
+  }
+
+  return null;
+}
+
+function parseArgs(argv = process.argv.slice(2)) {
+  const args = Array.isArray(argv) ? [...argv] : [];
+  const envPassword =
+    process.env.OPENCHAMBER_UI_PASSWORD ||
+    process.env.OPENCODE_UI_PASSWORD ||
+    null;
+  const options = { port: DEFAULT_PORT, uiPassword: envPassword };
+
+  const consumeValue = (currentIndex, inlineValue) => {
+    if (typeof inlineValue === 'string') {
+      return { value: inlineValue, nextIndex: currentIndex };
+    }
+    const nextArg = args[currentIndex + 1];
+    if (typeof nextArg === 'string' && !nextArg.startsWith('--')) {
+      return { value: nextArg, nextIndex: currentIndex + 1 };
+    }
+    return { value: undefined, nextIndex: currentIndex };
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (!arg.startsWith('--')) {
+      continue;
+    }
+
+    const eqIndex = arg.indexOf('=');
+    const optionName = eqIndex >= 0 ? arg.slice(2, eqIndex) : arg.slice(2);
+    const inlineValue = eqIndex >= 0 ? arg.slice(eqIndex + 1) : undefined;
+
+    if (optionName === 'port' || optionName === 'p') {
+      const { value, nextIndex } = consumeValue(i, inlineValue);
+      i = nextIndex;
+      const parsedPort = parseInt(value ?? '', 10);
+      options.port = Number.isFinite(parsedPort) ? parsedPort : DEFAULT_PORT;
+      continue;
+    }
+
+    if (optionName === 'ui-password') {
+      const { value, nextIndex } = consumeValue(i, inlineValue);
+      i = nextIndex;
+      options.uiPassword = typeof value === 'string' ? value : '';
+      continue;
+    }
+  }
+
+  return options;
+}
+
+async function startOpenCode() {
+  const desiredPort = ENV_CONFIGURED_OPENCODE_PORT ?? DEFAULT_OPENCODE_PORT;
+  console.log(
+    desiredPort
+      ? `Starting OpenCode on requested port ${desiredPort}...`
+      : 'Starting OpenCode with dynamic port assignment...'
+  );
+  console.log(`Starting OpenCode in working directory: ${openCodeWorkingDirectory}`);
+
+  const { command, env } = getOpencodeSpawnConfig();
+  const args = ['serve', '--port', desiredPort.toString()];
+  console.log(`Launching OpenCode via "${command}" with args ${args.join(' ')}`);
+
+  const child = spawn(command, args, {
+    stdio: 'pipe',
+    env,
+    cwd: openCodeWorkingDirectory
+  });
+  isOpenCodeReady = false;
+  openCodeNotReadySince = Date.now();
+
+  let firstSignalResolver;
+  const firstSignalPromise = new Promise((resolve) => {
+    firstSignalResolver = resolve;
+  });
+  let firstSignalSettled = false;
+  const settleFirstSignal = () => {
+    if (firstSignalSettled) {
+      return;
+    }
+    firstSignalSettled = true;
+    clearTimeout(firstSignalTimer);
+    child.stdout.off('data', settleFirstSignal);
+    child.stderr.off('data', settleFirstSignal);
+    child.off('exit', settleFirstSignal);
+    if (firstSignalResolver) {
+      firstSignalResolver();
+    }
+  };
+  const firstSignalTimer = setTimeout(settleFirstSignal, 750);
+
+  child.stdout.once('data', settleFirstSignal);
+  child.stderr.once('data', settleFirstSignal);
+  child.once('exit', settleFirstSignal);
+
+  child.stdout.on('data', (data) => {
+    const text = data.toString();
+    console.log(`OpenCode: ${text.trim()}`);
+    detectPortFromLogMessage(text);
+    detectPrefixFromLogMessage(text);
+    settleFirstSignal();
+  });
+
+  child.stderr.on('data', (data) => {
+    const text = data.toString();
+    lastOpenCodeError = text.trim();
+    console.error(`OpenCode Error: ${lastOpenCodeError}`);
+    detectPortFromLogMessage(text);
+    detectPrefixFromLogMessage(text);
+    settleFirstSignal();
+  });
+
+  let startupError = await new Promise((resolve, reject) => {
+    const onSpawn = () => {
+      setOpenCodePort(desiredPort);
+      child.off('error', onError);
+      resolve(null);
+    };
+    const onError = (error) => {
+      child.off('spawn', onSpawn);
+      reject(error);
+    };
+
+    child.once('spawn', onSpawn);
+    child.once('error', onError);
+  }).catch((error) => {
+    lastOpenCodeError = error.message;
+    openCodePort = null;
+    settleFirstSignal();
+    return error;
+  });
+
+  if (startupError) {
+    if (startupError.code === 'ENOENT') {
+      const enhanced = new Error(
+        `Failed to start OpenCode – executable "${command}" not found. ` +
+        'Set OPENCODE_BINARY to the full path of the opencode CLI or ensure it is on PATH.'
+      );
+      enhanced.code = startupError.code;
+      startupError = enhanced;
+    }
+    throw startupError;
+  }
+
+  child.on('exit', (code, signal) => {
+    lastOpenCodeError = `OpenCode exited with code ${code}, signal ${signal ?? 'null'}`;
+    isOpenCodeReady = false;
+    openCodeNotReadySince = Date.now();
+
+    if (!isShuttingDown && !isRestartingOpenCode) {
+      console.log(`OpenCode process exited with code ${code}, signal ${signal}`);
+
+      setTimeout(() => {
+        restartOpenCode().catch((err) => {
+          console.error('Failed to restart OpenCode after exit:', err);
+        });
+      }, 5000);
+    } else if (isRestartingOpenCode) {
+      console.log('OpenCode exit during controlled restart, not triggering auto-restart');
+    }
+  });
+
+  child.on('error', (error) => {
+    lastOpenCodeError = error.message;
+    isOpenCodeReady = false;
+    openCodeNotReadySince = Date.now();
+    console.error(`OpenCode process error: ${error.message}`);
+    if (!isShuttingDown) {
+
+      setTimeout(() => {
+        restartOpenCode().catch((err) => {
+          console.error('Failed to restart OpenCode after error:', err);
+        });
+      }, 5000);
+    }
+  });
+
+  await firstSignalPromise;
+
+  return child;
+}
+
+async function restartOpenCode() {
+  if (isShuttingDown) return;
+  if (currentRestartPromise) {
+    await currentRestartPromise;
+    return;
+  }
+
+  currentRestartPromise = (async () => {
+    isRestartingOpenCode = true;
+    isOpenCodeReady = false;
+    openCodeNotReadySince = Date.now();
+    console.log('Restarting OpenCode process...');
+
+    if (openCodeProcess) {
+      console.log('Waiting for OpenCode process to terminate...');
+      const processToTerminate = openCodeProcess;
+      let forcedTermination = false;
+
+      if (processToTerminate.exitCode === null && processToTerminate.signalCode === null) {
+        processToTerminate.kill('SIGTERM');
+
+        await new Promise((resolve) => {
+          let resolved = false;
+
+          const cleanup = () => {
+            processToTerminate.off('exit', onExit);
+            clearTimeout(forceKillTimer);
+            clearTimeout(hardStopTimer);
+            if (!resolved) {
+              resolved = true;
+              resolve();
+            }
+          };
+
+          const onExit = () => {
+            cleanup();
+          };
+
+          const forceKillTimer = setTimeout(() => {
+            if (resolved) {
+              return;
+            }
+            forcedTermination = true;
+            console.warn('OpenCode process did not exit after SIGTERM, sending SIGKILL');
+            processToTerminate.kill('SIGKILL');
+          }, 3000);
+
+          const hardStopTimer = setTimeout(() => {
+            if (resolved) {
+              return;
+            }
+            console.warn('OpenCode process unresponsive after SIGKILL, continuing restart');
+            cleanup();
+          }, 5000);
+
+          processToTerminate.once('exit', onExit);
+        });
+
+        if (forcedTermination) {
+          console.log('OpenCode process terminated forcefully during restart');
+        }
+      } else {
+        console.log('OpenCode process already stopped before restart command');
+      }
+
+      openCodeProcess = null;
+
+      await new Promise((resolve) => setTimeout(resolve, 250));
+    }
+
+    if (ENV_CONFIGURED_OPENCODE_PORT) {
+      console.log(`Using OpenCode port from environment: ${ENV_CONFIGURED_OPENCODE_PORT}`);
+      setOpenCodePort(ENV_CONFIGURED_OPENCODE_PORT);
+    } else {
+      openCodePort = null;
+    }
+    openCodeApiPrefixDetected = false;
+    if (openCodeApiDetectionTimer) {
+      clearTimeout(openCodeApiDetectionTimer);
+      openCodeApiDetectionTimer = null;
+    }
+    openCodeApiDetectionPromise = null;
+
+    lastOpenCodeError = null;
+    openCodeProcess = await startOpenCode();
+
+    if (!ENV_CONFIGURED_OPENCODE_PORT) {
+      await waitForOpenCodePort();
+    }
+
+    if (expressApp) {
+      setupProxy(expressApp);
+      scheduleOpenCodeApiDetection();
+    }
+  })();
+
+  try {
+    await currentRestartPromise;
+  } catch (error) {
+    console.error(`Failed to restart OpenCode: ${error.message}`);
+    lastOpenCodeError = error.message;
+    if (!ENV_CONFIGURED_OPENCODE_PORT) {
+      openCodePort = null;
+    }
+    openCodeApiPrefixDetected = false;
+    throw error;
+  } finally {
+    currentRestartPromise = null;
+    isRestartingOpenCode = false;
+  }
+}
+
+async function waitForOpenCodeReady(timeoutMs = 20000, intervalMs = 400) {
+  if (!openCodePort) {
+    throw new Error('OpenCode port is not available');
+  }
+
+  const deadline = Date.now() + timeoutMs;
+  let lastError = null;
+
+  while (Date.now() < deadline) {
+    const prefixes = getCandidateApiPrefixes();
+
+    for (const prefix of prefixes) {
+      try {
+        const normalizedPrefix = normalizeApiPrefix(prefix);
+        const healthPromise = fetch(buildOpenCodeUrl('/health', normalizedPrefix), {
+          method: 'GET',
+          headers: { Accept: 'application/json' }
+        }).catch((error) => error);
+
+        const configPromise = fetch(buildOpenCodeUrl('/config', normalizedPrefix), {
+          method: 'GET',
+          headers: { Accept: 'application/json' }
+        }).catch((error) => error);
+
+        const [healthResult, configResult] = await Promise.all([healthPromise, configPromise]);
+
+        if (healthResult instanceof Error) {
+          lastError = healthResult;
+        } else if (healthResult.ok) {
+          const healthData = await healthResult.json().catch(() => null);
+          if (healthData && healthData.isOpenCodeReady === false) {
+            lastError = new Error('OpenCode health indicates not ready');
+            continue;
+          }
+        } else {
+          lastError = new Error(`OpenCode health endpoint responded with status ${healthResult.status}`);
+        }
+
+        if (configResult instanceof Error) {
+          lastError = configResult;
+          continue;
+        }
+
+        if (!configResult.ok) {
+          if (configResult.status === 404 && !openCodeApiPrefixDetected && normalizedPrefix === '') {
+            lastError = new Error('OpenCode config endpoint returned 404 on root prefix');
+          } else {
+            lastError = new Error(`OpenCode config endpoint responded with status ${configResult.status}`);
+          }
+          continue;
+        }
+
+        await configResult.json().catch(() => null);
+        const detectedPrefix = extractApiPrefixFromUrl(configResult.url, '/config');
+        if (detectedPrefix !== null) {
+          setDetectedOpenCodeApiPrefix(detectedPrefix);
+        } else if (normalizedPrefix) {
+          setDetectedOpenCodeApiPrefix(normalizedPrefix);
+        }
+
+        const effectivePrefix = detectedPrefix !== null ? detectedPrefix : normalizedPrefix;
+
+        const agentResponse = await fetch(
+          buildOpenCodeUrl('/agent', effectivePrefix),
+          {
+            method: 'GET',
+            headers: { Accept: 'application/json' }
+          }
+        ).catch((error) => error);
+
+        if (agentResponse instanceof Error) {
+          lastError = agentResponse;
+          continue;
+        }
+
+        if (!agentResponse.ok) {
+          lastError = new Error(`Agent endpoint responded with status ${agentResponse.status}`);
+          continue;
+        }
+
+        await agentResponse.json().catch(() => []);
+
+        if (detectedPrefix === null) {
+          const agentPrefix = extractApiPrefixFromUrl(agentResponse.url, '/agent');
+          if (agentPrefix !== null) {
+            setDetectedOpenCodeApiPrefix(agentPrefix);
+          } else if (normalizedPrefix) {
+            setDetectedOpenCodeApiPrefix(normalizedPrefix);
+          }
+        }
+
+        isOpenCodeReady = true;
+        lastOpenCodeError = null;
+        return;
+      } catch (error) {
+        lastError = error;
+      }
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, intervalMs));
+  }
+
+  if (lastError) {
+    lastOpenCodeError = lastError.message || String(lastError);
+    throw lastError;
+  }
+
+  const timeoutError = new Error('Timed out waiting for OpenCode to become ready');
+  lastOpenCodeError = timeoutError.message;
+  throw timeoutError;
+}
+
+async function waitForAgentPresence(agentName, timeoutMs = 15000, intervalMs = 300) {
+  if (!openCodePort) {
+    throw new Error('OpenCode port is not available');
+  }
+
+  const deadline = Date.now() + timeoutMs;
+
+  while (Date.now() < deadline) {
+    try {
+      const response = await fetch(buildOpenCodeUrl('/agent'), {
+        method: 'GET',
+        headers: { Accept: 'application/json' }
+      });
+
+      if (response.ok) {
+        const agents = await response.json();
+        if (Array.isArray(agents) && agents.some((agent) => agent?.name === agentName)) {
+          return;
+        }
+      }
+    } catch (error) {
+
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, intervalMs));
+  }
+
+  throw new Error(`Agent "${agentName}" not available after OpenCode restart`);
+}
+
+async function fetchAgentsSnapshot() {
+  if (!openCodePort) {
+    throw new Error('OpenCode port is not available');
+  }
+
+  const response = await fetch(buildOpenCodeUrl('/agent'), {
+    method: 'GET',
+    headers: { Accept: 'application/json' }
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch agents snapshot (status ${response.status})`);
+  }
+
+  const agents = await response.json().catch(() => null);
+  if (!Array.isArray(agents)) {
+    throw new Error('Invalid agents payload from OpenCode');
+  }
+  return agents;
+}
+
+async function fetchProvidersSnapshot() {
+  if (!openCodePort) {
+    throw new Error('OpenCode port is not available');
+  }
+
+  const response = await fetch(buildOpenCodeUrl('/provider'), {
+    method: 'GET',
+    headers: { Accept: 'application/json' }
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch providers snapshot (status ${response.status})`);
+  }
+
+  const providers = await response.json().catch(() => null);
+  if (!Array.isArray(providers)) {
+    throw new Error('Invalid providers payload from OpenCode');
+  }
+  return providers;
+}
+
+async function fetchModelsSnapshot() {
+  if (!openCodePort) {
+    throw new Error('OpenCode port is not available');
+  }
+
+  const response = await fetch(buildOpenCodeUrl('/model'), {
+    method: 'GET',
+    headers: { Accept: 'application/json' }
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch models snapshot (status ${response.status})`);
+  }
+
+  const models = await response.json().catch(() => null);
+  if (!Array.isArray(models)) {
+    throw new Error('Invalid models payload from OpenCode');
+  }
+  return models;
+}
+
+async function refreshOpenCodeAfterConfigChange(reason, options = {}) {
+  const { agentName } = options;
+
+  console.log(`Refreshing OpenCode after ${reason}`);
+  await restartOpenCode();
+
+  try {
+    await waitForOpenCodeReady();
+    isOpenCodeReady = true;
+    openCodeNotReadySince = 0;
+
+    if (agentName) {
+      await waitForAgentPresence(agentName);
+    }
+
+    isOpenCodeReady = true;
+    openCodeNotReadySince = 0;
+  } catch (error) {
+
+    isOpenCodeReady = false;
+    openCodeNotReadySince = Date.now();
+    console.error(`Failed to refresh OpenCode after ${reason}:`, error.message);
+    throw error;
+  }
+}
+
+function setupProxy(app) {
+  if (!openCodePort) return;
+
+  if (app.get('opencodeProxyConfigured')) {
+    return;
+  }
+
+  console.log(`Setting up proxy to OpenCode on port ${openCodePort}`);
+  app.set('opencodeProxyConfigured', true);
+
+  app.use('/api', (req, res, next) => {
+    if (
+      req.path.startsWith('/themes/custom') ||
+      req.path.startsWith('/config/agents') ||
+      req.path.startsWith('/config/settings') ||
+      req.path === '/health'
+    ) {
+      return next();
+    }
+
+    const waitElapsed = openCodeNotReadySince === 0 ? 0 : Date.now() - openCodeNotReadySince;
+    const stillWaiting =
+      (!isOpenCodeReady && (openCodeNotReadySince === 0 || waitElapsed < OPEN_CODE_READY_GRACE_MS)) ||
+      isRestartingOpenCode ||
+      !openCodePort;
+
+    if (stillWaiting) {
+      return res.status(503).json({
+        error: 'OpenCode is restarting',
+        restarting: true,
+      });
+    }
+
+    next();
+  });
+
+  app.use('/api', async (req, res, next) => {
+    try {
+      await ensureOpenCodeApiPrefix();
+    } catch (error) {
+      console.warn(`OpenCode API prefix detection failed for ${req.method} ${req.path}: ${error.message}`);
+    }
+    next();
+  });
+
+  app.use('/api', (req, res, next) => {
+    if (
+      req.path.startsWith('/themes/custom') ||
+      req.path.startsWith('/config/agents') ||
+      req.path.startsWith('/config/settings') ||
+      req.path === '/health'
+    ) {
+      return next();
+    }
+    console.log(`API → OpenCode: ${req.method} ${req.path}`);
+    next();
+  });
+
+  const proxyMiddleware = createProxyMiddleware({
+    target: openCodePort ? `http://localhost:${openCodePort}` : 'http://127.0.0.1:0',
+    router: () => {
+      if (!openCodePort) {
+        return 'http://127.0.0.1:0';
+      }
+      return `http://localhost:${openCodePort}`;
+    },
+    changeOrigin: true,
+    pathRewrite: (path) => {
+      if (!path.startsWith('/api')) {
+        return path;
+      }
+
+      const suffix = path.slice(4) || '/';
+
+      if (!openCodeApiPrefixDetected || openCodeApiPrefix === '') {
+        return suffix;
+      }
+
+      return `${openCodeApiPrefix}${suffix}`;
+    },
+    ws: true,
+    onError: (err, req, res) => {
+      console.error(`Proxy error: ${err.message}`);
+      if (!res.headersSent) {
+        res.status(503).json({ error: 'OpenCode service unavailable' });
+      }
+    },
+    onProxyReq: (proxyReq, req, res) => {
+      console.log(`Proxying ${req.method} ${req.path} to OpenCode`);
+      if (req.headers.accept && req.headers.accept.includes('text/event-stream')) {
+        console.log(`[SSE] Setting up SSE proxy for ${req.method} ${req.path}`);
+        proxyReq.setHeader('Accept', 'text/event-stream');
+        proxyReq.setHeader('Cache-Control', 'no-cache');
+        proxyReq.setHeader('Connection', 'keep-alive');
+      }
+    },
+    onProxyRes: (proxyRes, req, res) => {
+      if (req.url?.includes('/event')) {
+        console.log(`[SSE] Proxy response for ${req.method} ${req.url} - Status: ${proxyRes.statusCode}`);
+        proxyRes.headers['Access-Control-Allow-Origin'] = '*';
+        proxyRes.headers['Access-Control-Allow-Headers'] = 'Cache-Control, Accept';
+        proxyRes.headers['Content-Type'] = 'text/event-stream';
+        proxyRes.headers['Cache-Control'] = 'no-cache';
+        proxyRes.headers['Connection'] = 'keep-alive';
+
+        proxyRes.headers['X-Accel-Buffering'] = 'no';
+        proxyRes.headers['X-Content-Type-Options'] = 'nosniff';
+      }
+
+      if (proxyRes.statusCode === 404 && !openCodeApiPrefixDetected) {
+        scheduleOpenCodeApiDetection();
+      }
+    }
+  });
+
+  app.use('/api', proxyMiddleware);
+}
+
+function startHealthMonitoring() {
+  if (healthCheckInterval) {
+    clearInterval(healthCheckInterval);
+  }
+
+  healthCheckInterval = setInterval(async () => {
+    if (!openCodeProcess || isShuttingDown) return;
+
+    try {
+
+      if (openCodeProcess.exitCode !== null) {
+        console.log('OpenCode process not running, restarting...');
+        await restartOpenCode();
+      }
+    } catch (error) {
+      console.error(`Health check error: ${error.message}`);
+    }
+  }, HEALTH_CHECK_INTERVAL);
+}
+
+async function gracefulShutdown(options = {}) {
+  if (isShuttingDown) return;
+
+  isShuttingDown = true;
+  console.log('Starting graceful shutdown...');
+  const exitProcess = typeof options.exitProcess === 'boolean' ? options.exitProcess : exitOnShutdown;
+
+  if (healthCheckInterval) {
+    clearInterval(healthCheckInterval);
+  }
+
+  if (openCodeProcess) {
+    console.log('Stopping OpenCode process...');
+    openCodeProcess.kill('SIGTERM');
+
+    await new Promise((resolve) => {
+      const timeout = setTimeout(() => {
+        openCodeProcess.kill('SIGKILL');
+        resolve();
+      }, SHUTDOWN_TIMEOUT);
+
+      openCodeProcess.on('exit', () => {
+        clearTimeout(timeout);
+        resolve();
+      });
+    });
+  }
+
+  if (server) {
+    await new Promise((resolve) => {
+      server.close(() => {
+        console.log('HTTP server closed');
+        resolve();
+      });
+    });
+  }
+
+  if (uiAuthController) {
+    uiAuthController.dispose();
+    uiAuthController = null;
+  }
+
+  console.log('Graceful shutdown complete');
+  if (exitProcess) {
+    process.exit(0);
+  }
+}
+
+async function main(options = {}) {
+  const port = Number.isFinite(options.port) && options.port >= 0 ? Math.trunc(options.port) : DEFAULT_PORT;
+  const attachSignals = options.attachSignals !== false;
+  if (typeof options.exitOnShutdown === 'boolean') {
+    exitOnShutdown = options.exitOnShutdown;
+  }
+
+  console.log(`Starting OpenChamber on port ${port}`);
+
+  const app = express();
+  expressApp = app;
+  server = http.createServer(app);
+
+  app.get('/health', (req, res) => {
+    res.json({
+      status: 'ok',
+      timestamp: new Date().toISOString(),
+      openCodePort: openCodePort,
+      openCodeRunning: Boolean(openCodeProcess && openCodeProcess.exitCode === null),
+      openCodeApiPrefix,
+      openCodeApiPrefixDetected,
+      isOpenCodeReady,
+      lastOpenCodeError
+    });
+  });
+
+  app.use((req, res, next) => {
+    if (
+      req.path.startsWith('/api/config/agents') ||
+      req.path.startsWith('/api/config/commands') ||
+      req.path.startsWith('/api/config/settings') ||
+      req.path.startsWith('/api/fs') ||
+      req.path.startsWith('/api/git') ||
+      req.path.startsWith('/api/prompts') ||
+      req.path.startsWith('/api/terminal') ||
+      req.path.startsWith('/api/opencode')
+    ) {
+
+      express.json()(req, res, next);
+    } else if (req.path.startsWith('/api')) {
+
+      next();
+    } else {
+
+      express.json()(req, res, next);
+    }
+  });
+  app.use(express.urlencoded({ extended: true }));
+
+  app.use((req, res, next) => {
+    console.log(`${new Date().toISOString()} - ${req.method} ${req.path}`);
+    next();
+  });
+
+  const uiPassword = typeof options.uiPassword === 'string' ? options.uiPassword : null;
+  uiAuthController = createUiAuth({ password: uiPassword });
+  if (uiAuthController.enabled) {
+    console.log('UI password protection enabled for browser sessions');
+  }
+
+  app.get('/auth/session', (req, res) => uiAuthController.handleSessionStatus(req, res));
+  app.post('/auth/session', (req, res) => uiAuthController.handleSessionCreate(req, res));
+
+  app.use('/api', (req, res, next) => uiAuthController.requireAuth(req, res, next));
+
+  app.get('/api/openchamber/models-metadata', async (req, res) => {
+    const now = Date.now();
+
+    if (cachedModelsMetadata && now - cachedModelsMetadataTimestamp < MODELS_METADATA_CACHE_TTL) {
+      res.setHeader('Cache-Control', 'public, max-age=60');
+      return res.json(cachedModelsMetadata);
+    }
+
+    const controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
+    const timeout = controller ? setTimeout(() => controller.abort(), 8000) : null;
+
+    try {
+      const response = await fetch(MODELS_DEV_API_URL, {
+        signal: controller?.signal,
+        headers: {
+          Accept: 'application/json'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`models.dev responded with status ${response.status}`);
+      }
+
+      const metadata = await response.json();
+      cachedModelsMetadata = metadata;
+      cachedModelsMetadataTimestamp = Date.now();
+
+      res.setHeader('Cache-Control', 'public, max-age=300');
+      res.json(metadata);
+    } catch (error) {
+      console.warn('Failed to fetch models.dev metadata via server:', error);
+
+      if (cachedModelsMetadata) {
+        res.setHeader('Cache-Control', 'public, max-age=60');
+        res.json(cachedModelsMetadata);
+      } else {
+        const statusCode = error?.name === 'AbortError' ? 504 : 502;
+        res.status(statusCode).json({ error: 'Failed to retrieve model metadata' });
+      }
+    } finally {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    }
+  });
+
+  app.get('/api/config/settings', async (_req, res) => {
+    try {
+      const settings = await readSettingsFromDisk();
+      res.json(formatSettingsResponse(settings));
+    } catch (error) {
+      console.error('Failed to load settings:', error);
+      res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to load settings' });
+    }
+  });
+
+  app.put('/api/config/settings', async (req, res) => {
+    try {
+      const updated = await persistSettings(req.body ?? {});
+      res.json(updated);
+    } catch (error) {
+      console.error('Failed to save settings:', error);
+      res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to save settings' });
+    }
+  });
+
+  const {
+    getAgentSources,
+    createAgent,
+    updateAgent,
+    deleteAgent,
+    getCommandSources,
+    createCommand,
+    updateCommand,
+    deleteCommand
+  } = await import('./lib/opencode-config.js');
+
+  app.get('/api/config/agents/:name', (req, res) => {
+    try {
+      const agentName = req.params.name;
+      const sources = getAgentSources(agentName);
+
+      res.json({
+        name: agentName,
+        sources: sources,
+        isBuiltIn: !sources.md.exists && !sources.json.exists
+      });
+    } catch (error) {
+      console.error('Failed to get agent sources:', error);
+      res.status(500).json({ error: 'Failed to get agent configuration metadata' });
+    }
+  });
+
+  app.post('/api/config/agents/:name', async (req, res) => {
+    try {
+      const agentName = req.params.name;
+      const config = req.body;
+
+      createAgent(agentName, config);
+      await refreshOpenCodeAfterConfigChange('agent creation', {
+        agentName
+      });
+
+      res.json({
+        success: true,
+        requiresReload: true,
+        message: `Agent ${agentName} created successfully. Reloading interface…`,
+        reloadDelayMs: CLIENT_RELOAD_DELAY_MS,
+      });
+    } catch (error) {
+      console.error('Failed to create agent:', error);
+      res.status(500).json({ error: error.message || 'Failed to create agent' });
+    }
+  });
+
+  app.patch('/api/config/agents/:name', async (req, res) => {
+    try {
+      const agentName = req.params.name;
+      const updates = req.body;
+
+      console.log(`[Server] Updating agent: ${agentName}`);
+      console.log('[Server] Updates:', JSON.stringify(updates, null, 2));
+
+      updateAgent(agentName, updates);
+      await refreshOpenCodeAfterConfigChange('agent update');
+
+      console.log(`[Server] Agent ${agentName} updated successfully`);
+
+      res.json({
+        success: true,
+        requiresReload: true,
+        message: `Agent ${agentName} updated successfully. Reloading interface…`,
+        reloadDelayMs: CLIENT_RELOAD_DELAY_MS,
+      });
+    } catch (error) {
+      console.error('[Server] Failed to update agent:', error);
+      console.error('[Server] Error stack:', error.stack);
+      res.status(500).json({ error: error.message || 'Failed to update agent' });
+    }
+  });
+
+  app.delete('/api/config/agents/:name', async (req, res) => {
+    try {
+      const agentName = req.params.name;
+
+      deleteAgent(agentName);
+      await refreshOpenCodeAfterConfigChange('agent deletion');
+
+      res.json({
+        success: true,
+        requiresReload: true,
+        message: `Agent ${agentName} deleted successfully. Reloading interface…`,
+        reloadDelayMs: CLIENT_RELOAD_DELAY_MS,
+      });
+    } catch (error) {
+      console.error('Failed to delete agent:', error);
+      res.status(500).json({ error: error.message || 'Failed to delete agent' });
+    }
+  });
+
+  app.get('/api/config/commands/:name', (req, res) => {
+    try {
+      const commandName = req.params.name;
+      const sources = getCommandSources(commandName);
+
+      res.json({
+        name: commandName,
+        sources: sources,
+        isBuiltIn: !sources.md.exists && !sources.json.exists
+      });
+    } catch (error) {
+      console.error('Failed to get command sources:', error);
+      res.status(500).json({ error: 'Failed to get command configuration metadata' });
+    }
+  });
+
+  app.post('/api/config/commands/:name', async (req, res) => {
+    try {
+      const commandName = req.params.name;
+      const config = req.body;
+
+      console.log('[Server] Creating command:', commandName);
+      console.log('[Server] Config received:', JSON.stringify(config, null, 2));
+
+      createCommand(commandName, config);
+      await refreshOpenCodeAfterConfigChange('command creation', {
+        commandName
+      });
+
+      res.json({
+        success: true,
+        requiresReload: true,
+        message: `Command ${commandName} created successfully. Reloading interface…`,
+        reloadDelayMs: CLIENT_RELOAD_DELAY_MS,
+      });
+    } catch (error) {
+      console.error('Failed to create command:', error);
+      res.status(500).json({ error: error.message || 'Failed to create command' });
+    }
+  });
+
+  app.patch('/api/config/commands/:name', async (req, res) => {
+    try {
+      const commandName = req.params.name;
+      const updates = req.body;
+
+      console.log(`[Server] Updating command: ${commandName}`);
+      console.log('[Server] Updates:', JSON.stringify(updates, null, 2));
+
+      updateCommand(commandName, updates);
+      await refreshOpenCodeAfterConfigChange('command update');
+
+      console.log(`[Server] Command ${commandName} updated successfully`);
+
+      res.json({
+        success: true,
+        requiresReload: true,
+        message: `Command ${commandName} updated successfully. Reloading interface…`,
+        reloadDelayMs: CLIENT_RELOAD_DELAY_MS,
+      });
+    } catch (error) {
+      console.error('[Server] Failed to update command:', error);
+      console.error('[Server] Error stack:', error.stack);
+      res.status(500).json({ error: error.message || 'Failed to update command' });
+    }
+  });
+
+  app.delete('/api/config/commands/:name', async (req, res) => {
+    try {
+      const commandName = req.params.name;
+
+      deleteCommand(commandName);
+      await refreshOpenCodeAfterConfigChange('command deletion');
+
+      res.json({
+        success: true,
+        requiresReload: true,
+        message: `Command ${commandName} deleted successfully. Reloading interface…`,
+        reloadDelayMs: CLIENT_RELOAD_DELAY_MS,
+      });
+    } catch (error) {
+      console.error('Failed to delete command:', error);
+      res.status(500).json({ error: error.message || 'Failed to delete command' });
+    }
+  });
+
+  app.post('/api/config/reload', async (req, res) => {
+    try {
+      console.log('[Server] Manual configuration reload requested');
+
+      await refreshOpenCodeAfterConfigChange('manual configuration reload');
+
+      res.json({
+        success: true,
+        requiresReload: true,
+        message: 'Configuration reloaded successfully. Refreshing interface…',
+        reloadDelayMs: CLIENT_RELOAD_DELAY_MS,
+      });
+    } catch (error) {
+      console.error('[Server] Failed to reload configuration:', error);
+      res.status(500).json({
+        error: error.message || 'Failed to reload configuration',
+        success: false
+      });
+    }
+  });
+
+  let gitLibraries = null;
+  const getGitLibraries = async () => {
+    if (!gitLibraries) {
+      const [storage, service] = await Promise.all([
+        import('./lib/git-identity-storage.js'),
+        import('./lib/git-service.js')
+      ]);
+      gitLibraries = { ...storage, ...service };
+    }
+    return gitLibraries;
+  };
+
+  app.get('/api/git/identities', async (req, res) => {
+    const { getProfiles } = await getGitLibraries();
+    try {
+      const profiles = getProfiles();
+      res.json(profiles);
+    } catch (error) {
+      console.error('Failed to list git identity profiles:', error);
+      res.status(500).json({ error: 'Failed to list git identity profiles' });
+    }
+  });
+
+  app.post('/api/git/identities', async (req, res) => {
+    const { createProfile } = await getGitLibraries();
+    try {
+      const profile = createProfile(req.body);
+      console.log(`Created git identity profile: ${profile.name} (${profile.id})`);
+      res.json(profile);
+    } catch (error) {
+      console.error('Failed to create git identity profile:', error);
+      res.status(400).json({ error: error.message || 'Failed to create git identity profile' });
+    }
+  });
+
+  app.put('/api/git/identities/:id', async (req, res) => {
+    const { updateProfile } = await getGitLibraries();
+    try {
+      const profile = updateProfile(req.params.id, req.body);
+      console.log(`Updated git identity profile: ${profile.name} (${profile.id})`);
+      res.json(profile);
+    } catch (error) {
+      console.error('Failed to update git identity profile:', error);
+      res.status(400).json({ error: error.message || 'Failed to update git identity profile' });
+    }
+  });
+
+  app.delete('/api/git/identities/:id', async (req, res) => {
+    const { deleteProfile } = await getGitLibraries();
+    try {
+      deleteProfile(req.params.id);
+      console.log(`Deleted git identity profile: ${req.params.id}`);
+      res.json({ success: true });
+    } catch (error) {
+      console.error('Failed to delete git identity profile:', error);
+      res.status(400).json({ error: error.message || 'Failed to delete git identity profile' });
+    }
+  });
+
+  app.get('/api/git/global-identity', async (req, res) => {
+    const { getGlobalIdentity } = await getGitLibraries();
+    try {
+      const identity = await getGlobalIdentity();
+      res.json(identity);
+    } catch (error) {
+      console.error('Failed to get global git identity:', error);
+      res.status(500).json({ error: 'Failed to get global git identity' });
+    }
+  });
+
+  app.get('/api/git/check', async (req, res) => {
+    const { isGitRepository } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const isRepo = await isGitRepository(directory);
+      res.json({ isGitRepository: isRepo });
+    } catch (error) {
+      console.error('Failed to check git repository:', error);
+      res.status(500).json({ error: 'Failed to check git repository' });
+    }
+  });
+
+  app.get('/api/git/current-identity', async (req, res) => {
+    const { getCurrentIdentity } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const identity = await getCurrentIdentity(directory);
+      res.json(identity);
+    } catch (error) {
+      console.error('Failed to get current git identity:', error);
+      res.status(500).json({ error: 'Failed to get current git identity' });
+    }
+  });
+
+  app.post('/api/git/set-identity', async (req, res) => {
+    const { getProfile, setLocalIdentity, getGlobalIdentity } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const { profileId } = req.body;
+      if (!profileId) {
+        return res.status(400).json({ error: 'profileId is required' });
+      }
+
+      let profile = null;
+
+      if (profileId === 'global') {
+        const globalIdentity = await getGlobalIdentity();
+        if (!globalIdentity?.userName || !globalIdentity?.userEmail) {
+          return res.status(404).json({ error: 'Global identity is not configured' });
+        }
+        profile = {
+          id: 'global',
+          name: 'Global Identity',
+          userName: globalIdentity.userName,
+          userEmail: globalIdentity.userEmail,
+          sshKey: globalIdentity.sshCommand
+            ? globalIdentity.sshCommand.replace('ssh -i ', '')
+            : null,
+        };
+      } else {
+        profile = getProfile(profileId);
+        if (!profile) {
+          return res.status(404).json({ error: 'Profile not found' });
+        }
+      }
+
+      await setLocalIdentity(directory, profile);
+      res.json({ success: true, profile });
+    } catch (error) {
+      console.error('Failed to set git identity:', error);
+      res.status(500).json({ error: error.message || 'Failed to set git identity' });
+    }
+  });
+
+  app.get('/api/git/status', async (req, res) => {
+    const { getStatus } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const status = await getStatus(directory);
+      res.json(status);
+    } catch (error) {
+      console.error('Failed to get git status:', error);
+      res.status(500).json({ error: error.message || 'Failed to get git status' });
+    }
+  });
+
+  app.get('/api/git/diff', async (req, res) => {
+    const { getDiff } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const path = req.query.path;
+      if (!path || typeof path !== 'string') {
+        return res.status(400).json({ error: 'path parameter is required' });
+      }
+
+      const staged = req.query.staged === 'true';
+      const context = req.query.context ? parseInt(String(req.query.context), 10) : undefined;
+
+      const diff = await getDiff(directory, {
+        path,
+        staged,
+        contextLines: Number.isFinite(context) ? context : 3,
+      });
+
+      res.json({ diff });
+    } catch (error) {
+      console.error('Failed to get git diff:', error);
+      res.status(500).json({ error: error.message || 'Failed to get git diff' });
+    }
+  });
+
+  app.get('/api/git/file-diff', async (req, res) => {
+    const { getFileDiff } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory || typeof directory !== 'string') {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const pathParam = req.query.path;
+      if (!pathParam || typeof pathParam !== 'string') {
+        return res.status(400).json({ error: 'path parameter is required' });
+      }
+
+      const staged = req.query.staged === 'true';
+
+      const result = await getFileDiff(directory, {
+        path: pathParam,
+        staged,
+      });
+
+      res.json({
+        original: result.original,
+        modified: result.modified,
+        path: result.path,
+      });
+    } catch (error) {
+      console.error('Failed to get git file diff:', error);
+      res.status(500).json({ error: error.message || 'Failed to get git file diff' });
+    }
+  });
+
+  app.post('/api/git/revert', async (req, res) => {
+    const { revertFile } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const { path } = req.body || {};
+      if (!path || typeof path !== 'string') {
+        return res.status(400).json({ error: 'path parameter is required' });
+      }
+
+      await revertFile(directory, path);
+      res.json({ success: true });
+    } catch (error) {
+      console.error('Failed to revert git file:', error);
+      res.status(500).json({ error: error.message || 'Failed to revert git file' });
+    }
+  });
+
+  app.post('/api/git/commit-message', async (req, res) => {
+    const { collectDiffs } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory || typeof directory !== 'string') {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const files = Array.isArray(req.body?.files) ? req.body.files : [];
+      if (files.length === 0) {
+        return res.status(400).json({ error: 'At least one file is required' });
+      }
+
+      const diffs = await collectDiffs(directory, files);
+      if (diffs.length === 0) {
+        return res.status(400).json({ error: 'No diffs available for selected files' });
+      }
+
+      const MAX_DIFF_LENGTH = 4000;
+      const diffSummaries = diffs
+        .map(({ path, diff }) => {
+          const trimmed = diff.length > MAX_DIFF_LENGTH ? `${diff.slice(0, MAX_DIFF_LENGTH)}\n...` : diff;
+          return `FILE: ${path}\n${trimmed}`;
+        })
+        .join('\n\n');
+
+      const prompt = `You are drafting git commit notes for this codebase. Respond in JSON of the shape {"subject": string, "highlights": string[]} (ONLY the JSON in response, no markdown wrappers or anything except JSON) with these rules:\n- subject follows our convention: type[optional-scope]: summary (examples: "feat: add diff virtualization", "fix(chat): restore enter key handling")\n- allowed types: feat, fix, chore, style, refactor, perf, docs, test, build, ci (choose the best match or fallback to chore)\n- summary must be imperative, concise, <= 70 characters, no trailing punctuation\n- scope is optional; include only when obvious from filenames/folders; do not invent scopes\n- focus on the most impactful user-facing change; if multiple capabilities ship together, align the subject with the dominant theme and use highlights to cover the other major outcomes\n- highlights array should contain 2-3 plain sentences (<= 90 chars each) that describe distinct features or UI changes users will notice (e.g. "Add per-file revert action in Changes list"). Avoid subjective benefit statements, marketing tone, repeating the subject, or referencing helper function names. Highlight additions such as new controls/buttons, new actions (e.g. revert), or stored state changes explicitly. Skip highlights if fewer than two meaningful points exist.\n- text must be plain (no markdown bullets); each highlight should start with an uppercase verb\n\nDiff summary:\n${diffSummaries}`;
+
+      const completionTimeout = createTimeoutSignal(LONG_REQUEST_TIMEOUT_MS);
+      let response;
+      try {
+        response = await fetch('https://opencode.ai/zen/v1/chat/completions', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            model: 'big-pickle',
+            messages: [{ role: 'user', content: prompt }],
+            max_tokens: 3000,
+            stream: false,
+            reasoning: {
+              effort: 'low'
+            }
+          }),
+          signal: completionTimeout.signal,
+        });
+      } finally {
+        completionTimeout.cleanup();
+      }
+
+      if (!response.ok) {
+        const errorBody = await response.json().catch(() => ({}));
+        console.error('Commit message generation failed:', errorBody);
+        return res.status(502).json({ error: 'Failed to generate commit message' });
+      }
+
+      const data = await response.json();
+      const raw = data?.choices?.[0]?.message?.content?.trim();
+
+      if (!raw) {
+        return res.status(502).json({ error: 'No commit message returned by generator' });
+      }
+
+      const cleanedJson = stripJsonMarkdownWrapper(raw);
+      const candidates = [cleanedJson, raw].filter((candidate, index, array) => {
+        return candidate && array.indexOf(candidate) === index;
+      });
+
+      for (const candidate of candidates) {
+        if (!(candidate.startsWith('{') || candidate.startsWith('['))) {
+          continue;
+        }
+        try {
+          const parsed = JSON.parse(candidate);
+          return res.json({ message: parsed });
+        } catch (parseError) {
+          console.warn('Commit message generation returned non-JSON body:', parseError);
+        }
+      }
+
+      res.json({ message: { subject: raw, highlights: [] } });
+    } catch (error) {
+      console.error('Failed to generate commit message:', error);
+      res.status(500).json({ error: error.message || 'Failed to generate commit message' });
+    }
+  });
+
+  app.post('/api/git/pull', async (req, res) => {
+    const { pull } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const result = await pull(directory, req.body);
+      res.json(result);
+    } catch (error) {
+      console.error('Failed to pull:', error);
+      res.status(500).json({ error: error.message || 'Failed to pull from remote' });
+    }
+  });
+
+  app.post('/api/git/push', async (req, res) => {
+    const { push } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const result = await push(directory, req.body);
+      res.json(result);
+    } catch (error) {
+      console.error('Failed to push:', error);
+      res.status(500).json({ error: error.message || 'Failed to push to remote' });
+    }
+  });
+
+  app.post('/api/git/fetch', async (req, res) => {
+    const { fetch: gitFetch } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const result = await gitFetch(directory, req.body);
+      res.json(result);
+    } catch (error) {
+      console.error('Failed to fetch:', error);
+      res.status(500).json({ error: error.message || 'Failed to fetch from remote' });
+    }
+  });
+
+  app.post('/api/git/commit', async (req, res) => {
+    const { commit } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const { message, addAll, files } = req.body;
+      if (!message) {
+        return res.status(400).json({ error: 'message is required' });
+      }
+
+      const result = await commit(directory, message, {
+        addAll,
+        files,
+      });
+      res.json(result);
+    } catch (error) {
+      console.error('Failed to commit:', error);
+      res.status(500).json({ error: error.message || 'Failed to create commit' });
+    }
+  });
+
+  app.get('/api/git/branches', async (req, res) => {
+    const { getBranches } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const branches = await getBranches(directory);
+      res.json(branches);
+    } catch (error) {
+      console.error('Failed to get branches:', error);
+      res.status(500).json({ error: error.message || 'Failed to get branches' });
+    }
+  });
+
+  app.post('/api/git/branches', async (req, res) => {
+    const { createBranch } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const { name, startPoint } = req.body;
+      if (!name) {
+        return res.status(400).json({ error: 'name is required' });
+      }
+
+      const result = await createBranch(directory, name, { startPoint });
+      res.json(result);
+    } catch (error) {
+      console.error('Failed to create branch:', error);
+      res.status(500).json({ error: error.message || 'Failed to create branch' });
+    }
+  });
+
+  app.delete('/api/git/branches', async (req, res) => {
+    const { deleteBranch } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const { branch, force } = req.body;
+      if (!branch) {
+        return res.status(400).json({ error: 'branch is required' });
+      }
+
+      const result = await deleteBranch(directory, branch, { force });
+      res.json(result);
+    } catch (error) {
+      console.error('Failed to delete branch:', error);
+      res.status(500).json({ error: error.message || 'Failed to delete branch' });
+    }
+  });
+
+  app.delete('/api/git/remote-branches', async (req, res) => {
+    const { deleteRemoteBranch } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const { branch, remote } = req.body;
+      if (!branch) {
+        return res.status(400).json({ error: 'branch is required' });
+      }
+
+      const result = await deleteRemoteBranch(directory, { branch, remote });
+      res.json(result);
+    } catch (error) {
+      console.error('Failed to delete remote branch:', error);
+      res.status(500).json({ error: error.message || 'Failed to delete remote branch' });
+    }
+  });
+
+  app.post('/api/git/checkout', async (req, res) => {
+    const { checkoutBranch } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const { branch } = req.body;
+      if (!branch) {
+        return res.status(400).json({ error: 'branch is required' });
+      }
+
+      const result = await checkoutBranch(directory, branch);
+      res.json(result);
+    } catch (error) {
+      console.error('Failed to checkout branch:', error);
+      res.status(500).json({ error: error.message || 'Failed to checkout branch' });
+    }
+  });
+
+  app.get('/api/git/worktrees', async (req, res) => {
+    const { getWorktrees } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const worktrees = await getWorktrees(directory);
+      res.json(worktrees);
+    } catch (error) {
+      console.error('Failed to get worktrees:', error);
+      res.status(500).json({ error: error.message || 'Failed to get worktrees' });
+    }
+  });
+
+  app.post('/api/git/worktrees', async (req, res) => {
+    const { addWorktree } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const { path, branch, createBranch } = req.body;
+      if (!path || !branch) {
+        return res.status(400).json({ error: 'path and branch are required' });
+      }
+
+      const result = await addWorktree(directory, path, branch, { createBranch });
+      res.json(result);
+    } catch (error) {
+      console.error('Failed to add worktree:', error);
+      res.status(500).json({ error: error.message || 'Failed to add worktree' });
+    }
+  });
+
+  app.delete('/api/git/worktrees', async (req, res) => {
+    const { removeWorktree } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const { path, force } = req.body;
+      if (!path) {
+        return res.status(400).json({ error: 'path is required' });
+      }
+
+      const result = await removeWorktree(directory, path, { force });
+      res.json(result);
+    } catch (error) {
+      console.error('Failed to remove worktree:', error);
+      res.status(500).json({ error: error.message || 'Failed to remove worktree' });
+    }
+  });
+
+  app.post('/api/git/ignore-openchamber', async (req, res) => {
+    const { ensureOpenChamberIgnored } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      await ensureOpenChamberIgnored(directory);
+      res.json({ success: true });
+    } catch (error) {
+      console.error('Failed to ignore .openchamber directory:', error);
+      res.status(500).json({ error: error.message || 'Failed to update git ignore' });
+    }
+  });
+
+  app.get('/api/git/worktree-type', async (req, res) => {
+    const { isLinkedWorktree } = await getGitLibraries();
+    try {
+      const { directory } = req.query;
+      if (!directory || typeof directory !== 'string') {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+      const linked = await isLinkedWorktree(directory);
+      res.json({ linked });
+    } catch (error) {
+      console.error('Failed to determine worktree type:', error);
+      res.status(500).json({ error: error.message || 'Failed to determine worktree type' });
+    }
+  });
+
+  app.get('/api/git/log', async (req, res) => {
+    const { getLog } = await getGitLibraries();
+    try {
+      const directory = req.query.directory;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+
+      const { maxCount, from, to, file } = req.query;
+      const log = await getLog(directory, {
+        maxCount: maxCount ? parseInt(maxCount) : undefined,
+        from,
+        to,
+        file
+      });
+      res.json(log);
+    } catch (error) {
+      console.error('Failed to get log:', error);
+      res.status(500).json({ error: error.message || 'Failed to get commit log' });
+    }
+  });
+
+  app.get('/api/git/commit-files', async (req, res) => {
+    const { getCommitFiles } = await getGitLibraries();
+    try {
+      const { directory, hash } = req.query;
+      if (!directory) {
+        return res.status(400).json({ error: 'directory parameter is required' });
+      }
+      if (!hash) {
+        return res.status(400).json({ error: 'hash parameter is required' });
+      }
+
+      const result = await getCommitFiles(directory, hash);
+      res.json(result);
+    } catch (error) {
+      console.error('Failed to get commit files:', error);
+      res.status(500).json({ error: error.message || 'Failed to get commit files' });
+    }
+  });
+
+  app.get('/api/fs/home', (req, res) => {
+    try {
+      const home = os.homedir();
+      if (!home || typeof home !== 'string' || home.length === 0) {
+        return res.status(500).json({ error: 'Failed to resolve home directory' });
+      }
+      res.json({ home });
+    } catch (error) {
+      console.error('Failed to resolve home directory:', error);
+      res.status(500).json({ error: (error && error.message) || 'Failed to resolve home directory' });
+    }
+  });
+
+  app.post('/api/fs/mkdir', (req, res) => {
+    try {
+      const { path: dirPath } = req.body;
+
+      if (!dirPath) {
+        return res.status(400).json({ error: 'Path is required' });
+      }
+
+      const normalizedPath = path.normalize(dirPath);
+      if (normalizedPath.includes('..')) {
+        return res.status(400).json({ error: 'Invalid path: path traversal not allowed' });
+      }
+
+      fs.mkdirSync(dirPath, { recursive: true });
+      console.log(`Created directory: ${dirPath}`);
+
+      res.json({ success: true, path: dirPath });
+    } catch (error) {
+      console.error('Failed to create directory:', error);
+      res.status(500).json({ error: error.message || 'Failed to create directory' });
+    }
+  });
+
+  app.post('/api/opencode/directory', async (req, res) => {
+    try {
+      const requestedPath = typeof req.body?.path === 'string' ? req.body.path.trim() : '';
+      if (!requestedPath) {
+        return res.status(400).json({ error: 'Path is required' });
+      }
+
+      const resolvedPath = path.resolve(requestedPath);
+      let stats;
+      try {
+        stats = await fsPromises.stat(resolvedPath);
+      } catch (error) {
+        const err = error;
+        if (err && typeof err === 'object' && 'code' in err) {
+          if (err.code === 'ENOENT') {
+            return res.status(404).json({ error: 'Directory not found' });
+          }
+          if (err.code === 'EACCES') {
+            return res.status(403).json({ error: 'Access to directory denied' });
+          }
+        }
+        throw error;
+      }
+
+      if (!stats.isDirectory()) {
+        return res.status(400).json({ error: 'Specified path is not a directory' });
+      }
+
+      if (openCodeWorkingDirectory === resolvedPath && openCodeProcess && openCodeProcess.exitCode === null) {
+        return res.json({ success: true, restarted: false, path: resolvedPath });
+      }
+
+      openCodeWorkingDirectory = resolvedPath;
+
+      await refreshOpenCodeAfterConfigChange('directory change');
+
+      res.json({
+        success: true,
+        restarted: true,
+        path: resolvedPath
+      });
+    } catch (error) {
+      console.error('Failed to update OpenCode working directory:', error);
+      res.status(500).json({ error: error.message || 'Failed to update working directory' });
+    }
+  });
+
+  app.get('/api/fs/list', async (req, res) => {
+    const rawPath = typeof req.query.path === 'string' && req.query.path.trim().length > 0
+      ? req.query.path.trim()
+      : os.homedir();
+
+    try {
+      const resolvedPath = path.resolve(rawPath);
+
+      const stats = await fsPromises.stat(resolvedPath);
+      if (!stats.isDirectory()) {
+        return res.status(400).json({ error: 'Specified path is not a directory' });
+      }
+
+      const dirents = await fsPromises.readdir(resolvedPath, { withFileTypes: true });
+      const entries = await Promise.all(
+        dirents.map(async (dirent) => {
+          const entryPath = path.join(resolvedPath, dirent.name);
+          let isDirectory = dirent.isDirectory();
+          const isSymbolicLink = dirent.isSymbolicLink();
+
+          if (!isDirectory && isSymbolicLink) {
+            try {
+              const linkStats = await fsPromises.stat(entryPath);
+              isDirectory = linkStats.isDirectory();
+            } catch {
+              isDirectory = false;
+            }
+          }
+
+          return {
+            name: dirent.name,
+            path: entryPath,
+            isDirectory,
+            isFile: dirent.isFile(),
+            isSymbolicLink
+          };
+        })
+      );
+
+      res.json({
+        path: resolvedPath,
+        entries
+      });
+    } catch (error) {
+      console.error('Failed to list directory:', error);
+      const err = error;
+      if (err && typeof err === 'object' && 'code' in err) {
+        const code = err.code;
+        if (code === 'ENOENT') {
+          return res.status(404).json({ error: 'Directory not found' });
+        }
+        if (code === 'EACCES') {
+          return res.status(403).json({ error: 'Access to directory denied' });
+        }
+      }
+      res.status(500).json({ error: (error && error.message) || 'Failed to list directory' });
+    }
+  });
+
+  app.get('/api/fs/search', async (req, res) => {
+    const rawRoot = typeof req.query.root === 'string' && req.query.root.trim().length > 0
+      ? req.query.root.trim()
+      : typeof req.query.directory === 'string' && req.query.directory.trim().length > 0
+        ? req.query.directory.trim()
+        : os.homedir();
+    const rawQuery = typeof req.query.q === 'string' ? req.query.q : '';
+    const limitParam = typeof req.query.limit === 'string' ? Number.parseInt(req.query.limit, 10) : undefined;
+    const parsedLimit = Number.isFinite(limitParam) ? Number(limitParam) : DEFAULT_FILE_SEARCH_LIMIT;
+    const limit = Math.max(1, Math.min(parsedLimit, MAX_FILE_SEARCH_LIMIT));
+
+    try {
+      const resolvedRoot = path.resolve(rawRoot);
+      const stats = await fsPromises.stat(resolvedRoot);
+      if (!stats.isDirectory()) {
+        return res.status(400).json({ error: 'Specified root is not a directory' });
+      }
+
+      const files = await searchFilesystemFiles(resolvedRoot, { limit, query: rawQuery || '' });
+      res.json({
+        root: resolvedRoot,
+        count: files.length,
+        files
+      });
+    } catch (error) {
+      console.error('Failed to search filesystem:', error);
+      const err = error;
+      if (err && typeof err === 'object' && 'code' in err) {
+        const code = err.code;
+        if (code === 'ENOENT') {
+          return res.status(404).json({ error: 'Directory not found' });
+        }
+        if (code === 'EACCES') {
+          return res.status(403).json({ error: 'Access to directory denied' });
+        }
+      }
+      res.status(500).json({ error: (error && error.message) || 'Failed to search files' });
+    }
+  });
+
+  let ptyLib = null;
+  let ptyLoadError = null;
+  const getPtyLib = async () => {
+    if (ptyLib) return ptyLib;
+    if (ptyLoadError) throw ptyLoadError;
+
+    try {
+      ptyLib = await import('node-pty');
+      console.log('node-pty loaded successfully');
+      return ptyLib;
+    } catch (error) {
+      ptyLoadError = error;
+      console.error('Failed to load node-pty:', error.message);
+      console.error('Terminal functionality will not be available.');
+      console.error('To fix: run "npm rebuild node-pty" or "npm install"');
+      throw new Error('node-pty is not available. Run: npm rebuild node-pty');
+    }
+  };
+
+  const terminalSessions = new Map();
+  const MAX_TERMINAL_SESSIONS = 20;
+  const TERMINAL_IDLE_TIMEOUT = 30 * 60 * 1000;
+
+  setInterval(() => {
+    const now = Date.now();
+    for (const [sessionId, session] of terminalSessions.entries()) {
+      if (now - session.lastActivity > TERMINAL_IDLE_TIMEOUT) {
+        console.log(`Cleaning up idle terminal session: ${sessionId}`);
+        try {
+          session.ptyProcess.kill();
+        } catch (error) {
+
+        }
+        terminalSessions.delete(sessionId);
+      }
+    }
+  }, 5 * 60 * 1000);
+
+  app.post('/api/terminal/create', async (req, res) => {
+    try {
+      if (terminalSessions.size >= MAX_TERMINAL_SESSIONS) {
+        return res.status(429).json({ error: 'Maximum terminal sessions reached' });
+      }
+
+      const { cwd, cols, rows } = req.body;
+      if (!cwd) {
+        return res.status(400).json({ error: 'cwd is required' });
+      }
+
+      if (!fs.existsSync(cwd)) {
+        return res.status(400).json({ error: 'Invalid working directory' });
+      }
+
+      const pty = await getPtyLib();
+      const shell = process.env.SHELL || (process.platform === 'win32' ? 'powershell.exe' : '/bin/zsh');
+
+      const sessionId = Math.random().toString(36).substring(2, 15) +
+                        Math.random().toString(36).substring(2, 15);
+
+      const envPath = buildAugmentedPath();
+      const resolvedEnv = { ...process.env, PATH: envPath };
+
+      const ptyProcess = pty.spawn(shell, [], {
+        name: 'xterm-256color',
+        cols: cols || 80,
+        rows: rows || 24,
+        cwd: cwd,
+        env: {
+          ...resolvedEnv,
+          TERM: 'xterm-256color',
+          COLORTERM: 'truecolor',
+        },
+      });
+
+      const session = {
+        ptyProcess,
+        cwd,
+        lastActivity: Date.now(),
+        clients: new Set(),
+      };
+
+      terminalSessions.set(sessionId, session);
+
+      ptyProcess.onExit(({ exitCode, signal }) => {
+        console.log(`Terminal session ${sessionId} exited with code ${exitCode}, signal ${signal}`);
+        terminalSessions.delete(sessionId);
+      });
+
+      console.log(`Created terminal session: ${sessionId} in ${cwd}`);
+      res.json({ sessionId, cols: cols || 80, rows: rows || 24 });
+    } catch (error) {
+      console.error('Failed to create terminal session:', error);
+      res.status(500).json({ error: error.message || 'Failed to create terminal session' });
+    }
+  });
+
+  app.get('/api/terminal/:sessionId/stream', (req, res) => {
+    const { sessionId } = req.params;
+    const session = terminalSessions.get(sessionId);
+
+    if (!session) {
+      return res.status(404).json({ error: 'Terminal session not found' });
+    }
+
+    res.setHeader('Content-Type', 'text/event-stream');
+    res.setHeader('Cache-Control', 'no-cache');
+    res.setHeader('Connection', 'keep-alive');
+    res.setHeader('X-Accel-Buffering', 'no');
+
+    res.write('data: {"type":"connected"}\n\n');
+
+    const clientId = Math.random().toString(36).substring(7);
+    session.clients.add(clientId);
+    session.lastActivity = Date.now();
+
+    const heartbeatInterval = setInterval(() => {
+      try {
+
+        res.write(': heartbeat\n\n');
+      } catch (error) {
+        console.error(`Heartbeat failed for client ${clientId}:`, error);
+        clearInterval(heartbeatInterval);
+      }
+    }, 15000);
+
+    const dataHandler = (data) => {
+      try {
+        session.lastActivity = Date.now();
+        const ok = res.write(`data: ${JSON.stringify({ type: 'data', data })}\n\n`);
+        if (!ok && session.ptyProcess && typeof session.ptyProcess.pause === 'function') {
+          session.ptyProcess.pause();
+          res.once('drain', () => {
+            if (session.ptyProcess && typeof session.ptyProcess.resume === 'function') {
+              session.ptyProcess.resume();
+            }
+          });
+        }
+      } catch (error) {
+        console.error(`Error sending data to client ${clientId}:`, error);
+        cleanup();
+      }
+    };
+
+    const exitHandler = ({ exitCode, signal }) => {
+      try {
+        res.write(`data: ${JSON.stringify({ type: 'exit', exitCode, signal })}\n\n`);
+        res.end();
+      } catch (error) {
+
+      }
+      cleanup();
+    };
+
+    const dataDisposable = session.ptyProcess.onData(dataHandler);
+    const exitDisposable = session.ptyProcess.onExit(exitHandler);
+
+    const cleanup = () => {
+      clearInterval(heartbeatInterval);
+      session.clients.delete(clientId);
+
+      if (dataDisposable && typeof dataDisposable.dispose === 'function') {
+        dataDisposable.dispose();
+      }
+      if (exitDisposable && typeof exitDisposable.dispose === 'function') {
+        exitDisposable.dispose();
+      }
+
+      try {
+        res.end();
+      } catch (error) {
+
+      }
+
+      console.log(`Client ${clientId} disconnected from terminal session ${sessionId}`);
+    };
+
+    req.on('close', cleanup);
+    req.on('error', cleanup);
+
+    console.log(`Client ${clientId} connected to terminal session ${sessionId}`);
+  });
+
+  app.post('/api/terminal/:sessionId/input', express.text({ type: '*/*' }), (req, res) => {
+    const { sessionId } = req.params;
+    const session = terminalSessions.get(sessionId);
+
+    if (!session) {
+      return res.status(404).json({ error: 'Terminal session not found' });
+    }
+
+    const data = typeof req.body === 'string' ? req.body : '';
+
+    try {
+      session.ptyProcess.write(data);
+      session.lastActivity = Date.now();
+      res.json({ success: true });
+    } catch (error) {
+      console.error('Failed to write to terminal:', error);
+      res.status(500).json({ error: error.message || 'Failed to write to terminal' });
+    }
+  });
+
+  app.post('/api/terminal/:sessionId/resize', (req, res) => {
+    const { sessionId } = req.params;
+    const session = terminalSessions.get(sessionId);
+
+    if (!session) {
+      return res.status(404).json({ error: 'Terminal session not found' });
+    }
+
+    const { cols, rows } = req.body;
+    if (!cols || !rows) {
+      return res.status(400).json({ error: 'cols and rows are required' });
+    }
+
+    try {
+      session.ptyProcess.resize(cols, rows);
+      session.lastActivity = Date.now();
+      res.json({ success: true, cols, rows });
+    } catch (error) {
+      console.error('Failed to resize terminal:', error);
+      res.status(500).json({ error: error.message || 'Failed to resize terminal' });
+    }
+  });
+
+  app.delete('/api/terminal/:sessionId', (req, res) => {
+    const { sessionId } = req.params;
+    const session = terminalSessions.get(sessionId);
+
+    if (!session) {
+      return res.status(404).json({ error: 'Terminal session not found' });
+    }
+
+    try {
+      session.ptyProcess.kill();
+      terminalSessions.delete(sessionId);
+      console.log(`Closed terminal session: ${sessionId}`);
+      res.json({ success: true });
+    } catch (error) {
+      console.error('Failed to close terminal:', error);
+      res.status(500).json({ error: error.message || 'Failed to close terminal' });
+    }
+  });
+
+  try {
+    if (ENV_CONFIGURED_OPENCODE_PORT) {
+      console.log(`Using OpenCode port from environment: ${ENV_CONFIGURED_OPENCODE_PORT}`);
+      setOpenCodePort(ENV_CONFIGURED_OPENCODE_PORT);
+    } else {
+      openCodePort = null;
+    }
+
+    lastOpenCodeError = null;
+    openCodeProcess = await startOpenCode();
+    await waitForOpenCodePort();
+    try {
+      await waitForOpenCodeReady();
+    } catch (error) {
+      console.error(`OpenCode readiness check failed: ${error.message}`);
+      scheduleOpenCodeApiDetection();
+    }
+    setupProxy(app);
+    scheduleOpenCodeApiDetection();
+    startHealthMonitoring();
+  } catch (error) {
+    console.error(`Failed to start OpenCode: ${error.message}`);
+    console.log('Continuing without OpenCode integration...');
+    lastOpenCodeError = error.message;
+    setupProxy(app);
+    scheduleOpenCodeApiDetection();
+  }
+
+  const distPath = path.join(__dirname, '..', 'dist');
+  if (fs.existsSync(distPath)) {
+    console.log(`Serving static files from ${distPath}`);
+    app.use(express.static(distPath));
+
+    app.get(/^(?!\/api|.*\.(js|css|svg|png|jpg|jpeg|gif|ico|woff|woff2|ttf|eot|map)).*$/, (req, res) => {
+      res.sendFile(path.join(distPath, 'index.html'));
+    });
+  } else {
+    console.warn(`Warning: ${distPath} not found, static files will not be served`);
+    app.get(/^(?!\/api|.*\.(js|css|svg|png|jpg|jpeg|gif|ico|woff|woff2|ttf|eot|map)).*$/, (req, res) => {
+      res.status(404).send('Static files not found. Please build the application first.');
+    });
+  }
+
+  let activePort = port;
+
+  await new Promise((resolve, reject) => {
+    const onError = (error) => {
+      server.off('error', onError);
+      reject(error);
+    };
+    server.once('error', onError);
+    server.listen(port, () => {
+      server.off('error', onError);
+      const addressInfo = server.address();
+      activePort = typeof addressInfo === 'object' && addressInfo ? addressInfo.port : port;
+      console.log(`OpenChamber server running on port ${activePort}`);
+      console.log(`Health check: http://localhost:${activePort}/health`);
+      console.log(`Web interface: http://localhost:${activePort}`);
+      resolve();
+    });
+  });
+
+  if (attachSignals && !signalsAttached) {
+    process.on('SIGTERM', gracefulShutdown);
+    process.on('SIGINT', gracefulShutdown);
+    process.on('SIGQUIT', gracefulShutdown);
+    signalsAttached = true;
+  }
+
+  process.on('unhandledRejection', (reason, promise) => {
+    console.error('Unhandled Rejection at:', promise, 'reason:', reason);
+  });
+
+  process.on('uncaughtException', (error) => {
+    console.error('Uncaught Exception:', error);
+    gracefulShutdown();
+  });
+
+  return {
+    expressApp: app,
+    httpServer: server,
+    getPort: () => activePort,
+    getOpenCodePort: () => openCodePort,
+    isReady: () => isOpenCodeReady,
+    restartOpenCode: () => restartOpenCode(),
+    stop: (shutdownOptions = {}) =>
+      gracefulShutdown({ exitProcess: shutdownOptions.exitProcess ?? false })
+  };
+}
+
+const isCliExecution = process.argv[1] === __filename;
+
+if (isCliExecution) {
+  const cliOptions = parseArgs();
+  exitOnShutdown = true;
+  main({
+    port: cliOptions.port,
+    attachSignals: true,
+    exitOnShutdown: true,
+    uiPassword: cliOptions.uiPassword
+  }).catch(error => {
+    console.error('Failed to start server:', error);
+    process.exit(1);
+  });
+}
+
+export { gracefulShutdown, setupProxy, restartOpenCode, main as startWebUiServer, parseArgs };
diff --git a/packages/web/server/lib/git-identity-storage.js b/packages/web/server/lib/git-identity-storage.js
new file mode 100644
index 00000000..89448434
--- /dev/null
+++ b/packages/web/server/lib/git-identity-storage.js
@@ -0,0 +1,108 @@
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+
+const STORAGE_DIR = path.join(os.homedir(), '.config', 'openchamber');
+const STORAGE_FILE = path.join(STORAGE_DIR, 'git-identities.json');
+
+function ensureStorageDir() {
+  if (!fs.existsSync(STORAGE_DIR)) {
+    fs.mkdirSync(STORAGE_DIR, { recursive: true });
+  }
+}
+
+export function loadProfiles() {
+  ensureStorageDir();
+
+  if (!fs.existsSync(STORAGE_FILE)) {
+    return { profiles: [] };
+  }
+
+  try {
+    const content = fs.readFileSync(STORAGE_FILE, 'utf8');
+    const data = JSON.parse(content);
+    return data;
+  } catch (error) {
+    console.error('Failed to load git identity profiles:', error);
+    return { profiles: [] };
+  }
+}
+
+export function saveProfiles(data) {
+  ensureStorageDir();
+
+  try {
+    fs.writeFileSync(STORAGE_FILE, JSON.stringify(data, null, 2), 'utf8');
+    return true;
+  } catch (error) {
+    console.error('Failed to save git identity profiles:', error);
+    throw error;
+  }
+}
+
+export function getProfiles() {
+  const data = loadProfiles();
+  return data.profiles || [];
+}
+
+export function getProfile(id) {
+  const profiles = getProfiles();
+  return profiles.find(p => p.id === id) || null;
+}
+
+export function createProfile(profileData) {
+  const profiles = getProfiles();
+
+  if (profiles.some(p => p.id === profileData.id)) {
+    throw new Error(`Profile with ID "${profileData.id}" already exists`);
+  }
+
+  if (!profileData.id || !profileData.userName || !profileData.userEmail) {
+    throw new Error('Profile must have id, userName, and userEmail');
+  }
+
+  const newProfile = {
+    id: profileData.id,
+    name: profileData.name || profileData.userName,
+    userName: profileData.userName,
+    userEmail: profileData.userEmail,
+    sshKey: profileData.sshKey || null,
+    color: profileData.color || 'keyword',
+    icon: profileData.icon || 'branch'
+  };
+
+  profiles.push(newProfile);
+  saveProfiles({ profiles });
+
+  return newProfile;
+}
+
+export function updateProfile(id, updates) {
+  const profiles = getProfiles();
+  const index = profiles.findIndex(p => p.id === id);
+
+  if (index === -1) {
+    throw new Error(`Profile with ID "${id}" not found`);
+  }
+
+  profiles[index] = {
+    ...profiles[index],
+    ...updates,
+    id: profiles[index].id
+  };
+
+  saveProfiles({ profiles });
+  return profiles[index];
+}
+
+export function deleteProfile(id) {
+  const profiles = getProfiles();
+  const filteredProfiles = profiles.filter(p => p.id !== id);
+
+  if (filteredProfiles.length === profiles.length) {
+    throw new Error(`Profile with ID "${id}" not found`);
+  }
+
+  saveProfiles({ profiles: filteredProfiles });
+  return true;
+}
diff --git a/packages/web/server/lib/git-service.js b/packages/web/server/lib/git-service.js
new file mode 100644
index 00000000..9cdb4a3d
--- /dev/null
+++ b/packages/web/server/lib/git-service.js
@@ -0,0 +1,899 @@
+import simpleGit from 'simple-git';
+import fs from 'fs';
+import path from 'path';
+const fsp = fs.promises;
+
+export async function isGitRepository(directory) {
+  if (!directory || !fs.existsSync(directory)) {
+    return false;
+  }
+
+  const gitDir = path.join(directory, '.git');
+  return fs.existsSync(gitDir);
+}
+
+export async function ensureOpenChamberIgnored(directory) {
+  if (!directory || !fs.existsSync(directory)) {
+    return false;
+  }
+
+  const gitDir = path.join(directory, '.git');
+  if (!fs.existsSync(gitDir)) {
+    return false;
+  }
+
+  const infoDir = path.join(gitDir, 'info');
+  const excludePath = path.join(infoDir, 'exclude');
+  const entry = '/.openchamber/';
+
+  try {
+    await fsp.mkdir(infoDir, { recursive: true });
+    let contents = '';
+    try {
+      contents = await fsp.readFile(excludePath, 'utf8');
+    } catch (readError) {
+      if (readError && readError.code !== 'ENOENT') {
+        throw readError;
+      }
+    }
+
+    const lines = contents.split(/\r?\n/).map((line) => line.trim());
+    if (!lines.includes(entry)) {
+      const prefix = contents.length > 0 && !contents.endsWith('\n') ? '\n' : '';
+      await fsp.appendFile(excludePath, `${prefix}${entry}\n`, 'utf8');
+    }
+
+    return true;
+  } catch (error) {
+    console.error('Failed to ensure .openchamber ignore:', error);
+    throw error;
+  }
+}
+
+export async function getGlobalIdentity() {
+  const git = simpleGit();
+
+  try {
+    const userName = await git.getConfig('user.name', 'global').catch(() => null);
+    const userEmail = await git.getConfig('user.email', 'global').catch(() => null);
+    const sshCommand = await git.getConfig('core.sshCommand', 'global').catch(() => null);
+
+    return {
+      userName: userName?.value || null,
+      userEmail: userEmail?.value || null,
+      sshCommand: sshCommand?.value || null
+    };
+  } catch (error) {
+    console.error('Failed to get global Git identity:', error);
+    return {
+      userName: null,
+      userEmail: null,
+      sshCommand: null
+    };
+  }
+}
+
+export async function getCurrentIdentity(directory) {
+  const git = simpleGit(directory);
+
+  try {
+
+    const userName = await git.getConfig('user.name', 'local').catch(() =>
+      git.getConfig('user.name', 'global')
+    );
+
+    const userEmail = await git.getConfig('user.email', 'local').catch(() =>
+      git.getConfig('user.email', 'global')
+    );
+
+    const sshCommand = await git.getConfig('core.sshCommand', 'local').catch(() =>
+      git.getConfig('core.sshCommand', 'global')
+    );
+
+    return {
+      userName: userName?.value || null,
+      userEmail: userEmail?.value || null,
+      sshCommand: sshCommand?.value || null
+    };
+  } catch (error) {
+    console.error('Failed to get current Git identity:', error);
+    return {
+      userName: null,
+      userEmail: null,
+      sshCommand: null
+    };
+  }
+}
+
+export async function setLocalIdentity(directory, profile) {
+  const git = simpleGit(directory);
+
+  try {
+
+    await git.addConfig('user.name', profile.userName, false, 'local');
+    await git.addConfig('user.email', profile.userEmail, false, 'local');
+
+    if (profile.sshKey) {
+      await git.addConfig(
+        'core.sshCommand',
+        `ssh -i ${profile.sshKey}`,
+        false,
+        'local'
+      );
+    }
+
+    return true;
+  } catch (error) {
+    console.error('Failed to set Git identity:', error);
+    throw error;
+  }
+}
+
+export async function getStatus(directory) {
+  const git = simpleGit(directory);
+
+  try {
+    const status = await git.status();
+
+    const [stagedStatsRaw, workingStatsRaw] = await Promise.all([
+      git.raw(['diff', '--cached', '--numstat']).catch(() => ''),
+      git.raw(['diff', '--numstat']).catch(() => ''),
+    ]);
+
+    const diffStatsMap = new Map();
+
+    const accumulateStats = (raw) => {
+      if (!raw) return;
+      raw
+        .split('\n')
+        .map((line) => line.trim())
+        .filter(Boolean)
+        .forEach((line) => {
+          const parts = line.split('\t');
+          if (parts.length < 3) {
+            return;
+          }
+          const [insertionsRaw, deletionsRaw, ...pathParts] = parts;
+          const path = pathParts.join('\t');
+          if (!path) {
+            return;
+          }
+          const insertions = insertionsRaw === '-' ? 0 : parseInt(insertionsRaw, 10) || 0;
+          const deletions = deletionsRaw === '-' ? 0 : parseInt(deletionsRaw, 10) || 0;
+
+          const existing = diffStatsMap.get(path) || { insertions: 0, deletions: 0 };
+          diffStatsMap.set(path, {
+            insertions: existing.insertions + insertions,
+            deletions: existing.deletions + deletions,
+          });
+        });
+    };
+
+    accumulateStats(stagedStatsRaw);
+    accumulateStats(workingStatsRaw);
+
+    const diffStats = Object.fromEntries(diffStatsMap.entries());
+
+    const newFileStats = await Promise.all(
+      status.files.map(async (file) => {
+        const working = (file.working_dir || '').trim();
+        const indexStatus = (file.index || '').trim();
+        const statusCode = working || indexStatus;
+
+        if (statusCode !== '?' && statusCode !== 'A') {
+          return null;
+        }
+
+        const existing = diffStats[file.path];
+        if (existing && existing.insertions > 0) {
+          return null;
+        }
+
+        const absolutePath = path.join(directory, file.path);
+
+        try {
+          const stat = await fsp.stat(absolutePath);
+          if (!stat.isFile()) {
+            return null;
+          }
+
+          const buffer = await fsp.readFile(absolutePath);
+          if (buffer.indexOf(0) !== -1) {
+            return {
+              path: file.path,
+              insertions: existing?.insertions ?? 0,
+              deletions: existing?.deletions ?? 0,
+            };
+          }
+
+          const normalized = buffer.toString('utf8').replace(/\r\n/g, '\n');
+          if (!normalized.length) {
+            return {
+              path: file.path,
+              insertions: 0,
+              deletions: 0,
+            };
+          }
+
+          const segments = normalized.split('\n');
+          if (normalized.endsWith('\n')) {
+            segments.pop();
+          }
+
+          const lineCount = segments.length;
+          return {
+            path: file.path,
+            insertions: lineCount,
+            deletions: 0,
+          };
+        } catch (error) {
+          console.warn('Failed to estimate diff stats for new file', file.path, error);
+          return null;
+        }
+      })
+    );
+
+    for (const entry of newFileStats) {
+      if (!entry) continue;
+      diffStats[entry.path] = {
+        insertions: entry.insertions,
+        deletions: entry.deletions,
+      };
+    }
+
+    return {
+      current: status.current,
+      tracking: status.tracking,
+      ahead: status.ahead,
+      behind: status.behind,
+      files: status.files.map(f => ({
+        path: f.path,
+        index: f.index,
+        working_dir: f.working_dir
+      })),
+      isClean: status.isClean(),
+      diffStats,
+    };
+  } catch (error) {
+    console.error('Failed to get Git status:', error);
+    throw error;
+  }
+}
+
+export async function getDiff(directory, { path, staged = false, contextLines = 3 } = {}) {
+  const git = simpleGit(directory);
+
+  try {
+    const args = ['diff', '--no-color'];
+
+    if (typeof contextLines === 'number' && !Number.isNaN(contextLines)) {
+      args.push(`-U${Math.max(0, contextLines)}`);
+    }
+
+    if (staged) {
+      args.push('--cached');
+    }
+
+    if (path) {
+      args.push('--', path);
+    }
+
+    const diff = await git.raw(args);
+    if (diff && diff.trim().length > 0) {
+      return diff;
+    }
+
+    if (staged) {
+      return diff;
+    }
+
+    try {
+      await git.raw(['ls-files', '--error-unmatch', path]);
+      return diff;
+    } catch {
+      const noIndexArgs = ['diff', '--no-color'];
+      if (typeof contextLines === 'number' && !Number.isNaN(contextLines)) {
+        noIndexArgs.push(`-U${Math.max(0, contextLines)}`);
+      }
+      noIndexArgs.push('--no-index', '--', '/dev/null', path);
+      const noIndexDiff = await git.raw(noIndexArgs);
+      return noIndexDiff;
+    }
+  } catch (error) {
+    console.error('Failed to get Git diff:', error);
+    throw error;
+  }
+}
+
+export async function getFileDiff(directory, { path: filePath, staged = false } = {}) {
+  if (!directory || !filePath) {
+    throw new Error('directory and path are required for getFileDiff');
+  }
+
+  const git = simpleGit(directory);
+
+  let original = '';
+  try {
+    original = await git.show([`HEAD:${filePath}`]);
+  } catch {
+
+    original = '';
+  }
+
+  const fullPath = path.join(directory, filePath);
+  let modified = '';
+  try {
+    const stat = await fsp.stat(fullPath);
+    if (stat.isFile()) {
+      modified = await fsp.readFile(fullPath, 'utf8');
+    }
+  } catch (error) {
+    if (error && typeof error === 'object' && error.code === 'ENOENT') {
+
+      modified = '';
+    } else {
+      console.error('Failed to read modified file contents for diff:', error);
+      throw error;
+    }
+  }
+
+  return {
+    original,
+    modified,
+    path: filePath,
+  };
+}
+
+export async function revertFile(directory, filePath) {
+  const git = simpleGit(directory);
+  const repoRoot = path.resolve(directory);
+  const absoluteTarget = path.resolve(repoRoot, filePath);
+
+  if (!absoluteTarget.startsWith(repoRoot + path.sep) && absoluteTarget !== repoRoot) {
+    throw new Error('Invalid file path');
+  }
+
+  const isTracked = await git
+    .raw(['ls-files', '--error-unmatch', filePath])
+    .then(() => true)
+    .catch(() => false);
+
+  if (!isTracked) {
+    try {
+      await git.raw(['clean', '-f', '-d', '--', filePath]);
+      return;
+    } catch (cleanError) {
+      try {
+        await fsp.rm(absoluteTarget, { recursive: true, force: true });
+        return;
+      } catch (fsError) {
+        if (fsError && typeof fsError === 'object' && fsError.code === 'ENOENT') {
+          return;
+        }
+        console.error('Failed to remove untracked file during revert:', fsError);
+        throw fsError;
+      }
+    }
+  }
+
+  try {
+    await git.raw(['restore', '--staged', filePath]);
+  } catch (error) {
+    await git.raw(['reset', 'HEAD', '--', filePath]).catch(() => {});
+  }
+
+  try {
+    await git.raw(['restore', filePath]);
+  } catch (error) {
+    try {
+      await git.raw(['checkout', '--', filePath]);
+    } catch (fallbackError) {
+      console.error('Failed to revert git file:', fallbackError);
+      throw fallbackError;
+    }
+  }
+}
+
+export async function collectDiffs(directory, files = []) {
+  const results = [];
+  for (const filePath of files) {
+    try {
+      const diff = await getDiff(directory, { path: filePath });
+      if (diff && diff.trim().length > 0) {
+        results.push({ path: filePath, diff });
+      }
+    } catch (error) {
+      console.error(`Failed to diff ${filePath}:`, error);
+    }
+  }
+  return results;
+}
+
+export async function pull(directory, options = {}) {
+  const git = simpleGit(directory);
+
+  try {
+    const result = await git.pull(
+      options.remote || 'origin',
+      options.branch,
+      options.options || {}
+    );
+
+    return {
+      success: true,
+      summary: result.summary,
+      files: result.files,
+      insertions: result.insertions,
+      deletions: result.deletions
+    };
+  } catch (error) {
+    console.error('Failed to pull:', error);
+    throw error;
+  }
+}
+
+export async function push(directory, options = {}) {
+  const git = simpleGit(directory);
+
+  try {
+    const result = await git.push(
+      options.remote || 'origin',
+      options.branch,
+      options.options || {}
+    );
+
+    return {
+      success: true,
+      pushed: result.pushed,
+      repo: result.repo,
+      ref: result.ref
+    };
+  } catch (error) {
+    console.error('Failed to push:', error);
+    throw error;
+  }
+}
+
+export async function deleteRemoteBranch(directory, options = {}) {
+  const { branch, remote } = options;
+  if (!branch) {
+    throw new Error('branch is required to delete remote branch');
+  }
+
+  const git = simpleGit(directory);
+  const targetBranch = branch.startsWith('refs/heads/')
+    ? branch.substring('refs/heads/'.length)
+    : branch;
+  const remoteName = remote || 'origin';
+
+  try {
+    await git.push(remoteName, `:${targetBranch}`);
+    return { success: true };
+  } catch (error) {
+    console.error('Failed to delete remote branch:', error);
+    throw error;
+  }
+}
+
+export async function fetch(directory, options = {}) {
+  const git = simpleGit(directory);
+
+  try {
+    await git.fetch(
+      options.remote || 'origin',
+      options.branch,
+      options.options || {}
+    );
+
+    return { success: true };
+  } catch (error) {
+    console.error('Failed to fetch:', error);
+    throw error;
+  }
+}
+
+export async function commit(directory, message, options = {}) {
+  const git = simpleGit(directory);
+
+  try {
+
+    if (options.addAll) {
+      await git.add('.');
+    } else if (Array.isArray(options.files) && options.files.length > 0) {
+      await git.add(options.files);
+    }
+
+    const commitArgs =
+      !options.addAll && Array.isArray(options.files) && options.files.length > 0
+        ? options.files
+        : undefined;
+
+    const result = await git.commit(message, commitArgs);
+
+    return {
+      success: true,
+      commit: result.commit,
+      branch: result.branch,
+      summary: result.summary
+    };
+  } catch (error) {
+    console.error('Failed to commit:', error);
+    throw error;
+  }
+}
+
+export async function getBranches(directory) {
+  const git = simpleGit(directory);
+
+  try {
+    const result = await git.branch();
+
+    const allBranches = result.all;
+    const remoteBranches = allBranches.filter(branch => branch.startsWith('remotes/'));
+    const activeRemoteBranches = await filterActiveRemoteBranches(git, remoteBranches);
+
+    const filteredAll = [
+      ...allBranches.filter(branch => !branch.startsWith('remotes/')),
+      ...activeRemoteBranches
+    ];
+
+    return {
+      all: filteredAll,
+      current: result.current,
+      branches: result.branches
+    };
+  } catch (error) {
+    console.error('Failed to get branches:', error);
+    throw error;
+  }
+}
+
+async function filterActiveRemoteBranches(git, remoteBranches) {
+  try {
+
+    const lsRemoteResult = await git.raw(['ls-remote', '--heads', 'origin']);
+    const actualRemoteBranches = new Set();
+
+    const lines = lsRemoteResult.trim().split('\n');
+    for (const line of lines) {
+      if (line.includes('\trefs/heads/')) {
+        const branchName = line.split('\t')[1].replace('refs/heads/', '');
+        actualRemoteBranches.add(branchName);
+      }
+    }
+
+    return remoteBranches.filter(remoteBranch => {
+
+      const match = remoteBranch.match(/^remotes\/[^\/]+\/(.+)$/);
+      if (!match) return false;
+
+      const branchName = match[1];
+      return actualRemoteBranches.has(branchName);
+    });
+  } catch (error) {
+    console.warn('Failed to filter active remote branches, returning all:', error.message);
+    return remoteBranches;
+  }
+}
+
+export async function createBranch(directory, branchName, options = {}) {
+  const git = simpleGit(directory);
+
+  try {
+    await git.checkoutBranch(branchName, options.startPoint || 'HEAD');
+    return { success: true, branch: branchName };
+  } catch (error) {
+    console.error('Failed to create branch:', error);
+    throw error;
+  }
+}
+
+export async function checkoutBranch(directory, branchName) {
+  const git = simpleGit(directory);
+
+  try {
+    await git.checkout(branchName);
+    return { success: true, branch: branchName };
+  } catch (error) {
+    console.error('Failed to checkout branch:', error);
+    throw error;
+  }
+}
+
+export async function getWorktrees(directory) {
+  const git = simpleGit(directory);
+
+  try {
+    const result = await git.raw(['worktree', 'list', '--porcelain']);
+
+    const worktrees = [];
+    const lines = result.split('\n');
+    let current = {};
+
+    for (const line of lines) {
+      if (line.startsWith('worktree ')) {
+        if (current.worktree) {
+          worktrees.push(current);
+        }
+        current = { worktree: line.substring(9) };
+      } else if (line.startsWith('HEAD ')) {
+        current.head = line.substring(5);
+      } else if (line.startsWith('branch ')) {
+        current.branch = line.substring(7);
+      } else if (line === '') {
+        if (current.worktree) {
+          worktrees.push(current);
+          current = {};
+        }
+      }
+    }
+
+    if (current.worktree) {
+      worktrees.push(current);
+    }
+
+    return worktrees;
+  } catch (error) {
+    console.error('Failed to list worktrees:', error);
+    throw error;
+  }
+}
+
+export async function addWorktree(directory, worktreePath, branch, options = {}) {
+  const git = simpleGit(directory);
+
+  try {
+    const args = ['worktree', 'add'];
+
+    if (options.createBranch) {
+      args.push('-b', branch);
+    }
+
+    args.push(worktreePath);
+
+    if (!options.createBranch) {
+      args.push(branch);
+    }
+
+    await git.raw(args);
+
+    return {
+      success: true,
+      path: worktreePath,
+      branch
+    };
+  } catch (error) {
+    console.error('Failed to add worktree:', error);
+    throw error;
+  }
+}
+
+export async function removeWorktree(directory, worktreePath, options = {}) {
+  const git = simpleGit(directory);
+
+  try {
+    const args = ['worktree', 'remove', worktreePath];
+
+    if (options.force) {
+      args.push('--force');
+    }
+
+    await git.raw(args);
+
+    return { success: true };
+  } catch (error) {
+    console.error('Failed to remove worktree:', error);
+    throw error;
+  }
+}
+
+export async function deleteBranch(directory, branch, options = {}) {
+  const git = simpleGit(directory);
+
+  try {
+    const branchName = branch.startsWith('refs/heads/')
+      ? branch.substring('refs/heads/'.length)
+      : branch;
+    const args = ['branch', options.force ? '-D' : '-d', branchName];
+    await git.raw(args);
+    return { success: true };
+  } catch (error) {
+    console.error('Failed to delete branch:', error);
+    throw error;
+  }
+}
+
+export async function getLog(directory, options = {}) {
+  const git = simpleGit(directory);
+
+  try {
+    const maxCount = options.maxCount || 50;
+    const baseLog = await git.log({
+      maxCount,
+      from: options.from,
+      to: options.to,
+      file: options.file
+    });
+
+    const logArgs = [
+      'log',
+      `--max-count=${maxCount}`,
+      '--date=iso',
+      '--pretty=format:%H%x1f%an%x1f%ae%x1f%ad%x1f%s%x1e',
+      '--shortstat'
+    ];
+
+    if (options.from && options.to) {
+      logArgs.push(`${options.from}..${options.to}`);
+    } else if (options.from) {
+      logArgs.push(`${options.from}..HEAD`);
+    } else if (options.to) {
+      logArgs.push(options.to);
+    }
+
+    if (options.file) {
+      logArgs.push('--', options.file);
+    }
+
+    const rawLog = await git.raw(logArgs);
+    const records = rawLog
+      .split('\x1e')
+      .map((entry) => entry.trim())
+      .filter(Boolean);
+
+    const statsMap = new Map();
+
+    records.forEach((record) => {
+      const lines = record.split('\n').filter((line) => line.trim().length > 0);
+      const header = lines.shift() || '';
+      const [hash] = header.split('\x1f');
+      if (!hash) {
+        return;
+      }
+
+      let filesChanged = 0;
+      let insertions = 0;
+      let deletions = 0;
+
+      lines.forEach((line) => {
+        const filesMatch = line.match(/(\d+)\s+files?\s+changed/);
+        const insertMatch = line.match(/(\d+)\s+insertions?\(\+\)/);
+        const deleteMatch = line.match(/(\d+)\s+deletions?\(-\)/);
+
+        if (filesMatch) {
+          filesChanged = parseInt(filesMatch[1], 10);
+        }
+        if (insertMatch) {
+          insertions = parseInt(insertMatch[1], 10);
+        }
+        if (deleteMatch) {
+          deletions = parseInt(deleteMatch[1], 10);
+        }
+      });
+
+      statsMap.set(hash, { filesChanged, insertions, deletions });
+    });
+
+    const merged = baseLog.all.map((entry) => {
+      const stats = statsMap.get(entry.hash) || { filesChanged: 0, insertions: 0, deletions: 0 };
+      return {
+        hash: entry.hash,
+        date: entry.date,
+        message: entry.message,
+        refs: entry.refs || '',
+        body: entry.body || '',
+        author_name: entry.author_name,
+        author_email: entry.author_email,
+        filesChanged: stats.filesChanged,
+        insertions: stats.insertions,
+        deletions: stats.deletions
+      };
+    });
+
+    return {
+      all: merged,
+      latest: merged[0] || null,
+      total: baseLog.total
+    };
+  } catch (error) {
+    console.error('Failed to get log:', error);
+    throw error;
+  }
+}
+
+export async function isLinkedWorktree(directory) {
+  const git = simpleGit(directory);
+  try {
+    const [gitDir, gitCommonDir] = await Promise.all([
+      git.raw(['rev-parse', '--git-dir']).then((output) => output.trim()),
+      git.raw(['rev-parse', '--git-common-dir']).then((output) => output.trim())
+    ]);
+    return gitDir !== gitCommonDir;
+  } catch (error) {
+    console.error('Failed to determine worktree type:', error);
+    return false;
+  }
+}
+
+export async function getCommitFiles(directory, commitHash) {
+  const git = simpleGit(directory);
+
+  try {
+
+    const numstatRaw = await git.raw([
+      'show',
+      '--numstat',
+      '--format=',
+      commitHash
+    ]);
+
+    const files = [];
+    const lines = numstatRaw.trim().split('\n').filter(Boolean);
+
+    for (const line of lines) {
+      const parts = line.split('\t');
+      if (parts.length < 3) continue;
+
+      const [insertionsRaw, deletionsRaw, ...pathParts] = parts;
+      const filePath = pathParts.join('\t');
+      if (!filePath) continue;
+
+      const insertions = insertionsRaw === '-' ? 0 : parseInt(insertionsRaw, 10) || 0;
+      const deletions = deletionsRaw === '-' ? 0 : parseInt(deletionsRaw, 10) || 0;
+      const isBinary = insertionsRaw === '-' && deletionsRaw === '-';
+
+      let changeType = 'M';
+      let displayPath = filePath;
+
+      if (filePath.includes(' => ')) {
+        changeType = 'R';
+
+        const match = filePath.match(/(?:\{[^}]*\s=>\s[^}]*\}|.*\s=>\s.*)/);
+        if (match) {
+          displayPath = filePath;
+        }
+      }
+
+      files.push({
+        path: displayPath,
+        insertions,
+        deletions,
+        isBinary,
+        changeType
+      });
+    }
+
+    const nameStatusRaw = await git.raw([
+      'show',
+      '--name-status',
+      '--format=',
+      commitHash
+    ]).catch(() => '');
+
+    const statusMap = new Map();
+    const statusLines = nameStatusRaw.trim().split('\n').filter(Boolean);
+    for (const line of statusLines) {
+      const match = line.match(/^([AMDRC])\d*\t(.+)$/);
+      if (match) {
+        const [, status, path] = match;
+        statusMap.set(path, status);
+      }
+    }
+
+    for (const file of files) {
+      const basePath = file.path.includes(' => ')
+        ? file.path.split(' => ').pop()?.replace(/[{}]/g, '') || file.path
+        : file.path;
+
+      const status = statusMap.get(basePath) || statusMap.get(file.path);
+      if (status) {
+        file.changeType = status;
+      }
+    }
+
+    return { files };
+  } catch (error) {
+    console.error('Failed to get commit files:', error);
+    throw error;
+  }
+}
diff --git a/packages/web/server/lib/opencode-config.js b/packages/web/server/lib/opencode-config.js
new file mode 100644
index 00000000..362fcf5e
--- /dev/null
+++ b/packages/web/server/lib/opencode-config.js
@@ -0,0 +1,471 @@
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+import yaml from 'yaml';
+import stripJsonComments from 'strip-json-comments';
+
+const OPENCODE_CONFIG_DIR = path.join(os.homedir(), '.config', 'opencode');
+const AGENT_DIR = path.join(OPENCODE_CONFIG_DIR, 'agent');
+const COMMAND_DIR = path.join(OPENCODE_CONFIG_DIR, 'command');
+const CONFIG_FILE = path.join(OPENCODE_CONFIG_DIR, 'opencode.json');
+const PROMPT_FILE_PATTERN = /^\{file:(.+)\}$/i;
+
+function ensureDirs() {
+  if (!fs.existsSync(OPENCODE_CONFIG_DIR)) {
+    fs.mkdirSync(OPENCODE_CONFIG_DIR, { recursive: true });
+  }
+  if (!fs.existsSync(AGENT_DIR)) {
+    fs.mkdirSync(AGENT_DIR, { recursive: true });
+  }
+  if (!fs.existsSync(COMMAND_DIR)) {
+    fs.mkdirSync(COMMAND_DIR, { recursive: true });
+  }
+}
+
+function isPromptFileReference(value) {
+  if (typeof value !== 'string') {
+    return false;
+  }
+  return PROMPT_FILE_PATTERN.test(value.trim());
+}
+
+function resolvePromptFilePath(reference) {
+  const match = typeof reference === 'string' ? reference.trim().match(PROMPT_FILE_PATTERN) : null;
+  if (!match) {
+    return null;
+  }
+  let target = match[1].trim();
+  if (!target) {
+    return null;
+  }
+
+  if (target.startsWith('./')) {
+    target = target.slice(2);
+    target = path.join(OPENCODE_CONFIG_DIR, target);
+  } else if (!path.isAbsolute(target)) {
+    target = path.join(OPENCODE_CONFIG_DIR, target);
+  }
+
+  return target;
+}
+
+function writePromptFile(filePath, content) {
+  const dir = path.dirname(filePath);
+  fs.mkdirSync(dir, { recursive: true });
+  fs.writeFileSync(filePath, content ?? '', 'utf8');
+  console.log(`Updated prompt file: ${filePath}`);
+}
+
+function readConfig() {
+  if (!fs.existsSync(CONFIG_FILE)) {
+    return {};
+  }
+  try {
+    const content = fs.readFileSync(CONFIG_FILE, 'utf8');
+    const normalized = stripJsonComments(content).trim();
+    if (!normalized) {
+      return {};
+    }
+    return JSON.parse(normalized);
+  } catch (error) {
+    console.error('Failed to read config file:', error);
+    throw new Error('Failed to read OpenCode configuration');
+  }
+}
+
+function writeConfig(config) {
+  try {
+
+    if (fs.existsSync(CONFIG_FILE)) {
+      const backupFile = `${CONFIG_FILE}.openchamber.backup`;
+      fs.copyFileSync(CONFIG_FILE, backupFile);
+      console.log(`Created config backup: ${backupFile}`);
+    }
+
+    fs.writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2), 'utf8');
+    console.log('Successfully wrote config file');
+  } catch (error) {
+    console.error('Failed to write config file:', error);
+    throw new Error('Failed to write OpenCode configuration');
+  }
+}
+
+function parseMdFile(filePath) {
+  try {
+    const content = fs.readFileSync(filePath, 'utf8');
+    const match = content.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n([\s\S]*)$/);
+
+    if (!match) {
+      return { frontmatter: {}, body: content.trim() };
+    }
+
+    const frontmatter = yaml.parse(match[1]) || {};
+    const body = match[2].trim();
+
+    return { frontmatter, body };
+  } catch (error) {
+    console.error(`Failed to parse markdown file ${filePath}:`, error);
+    throw new Error('Failed to parse agent markdown file');
+  }
+}
+
+function writeMdFile(filePath, frontmatter, body) {
+  try {
+    const yamlStr = yaml.stringify(frontmatter);
+    const content = `---\n${yamlStr}---\n\n${body}`;
+    fs.writeFileSync(filePath, content, 'utf8');
+    console.log(`Successfully wrote markdown file: ${filePath}`);
+  } catch (error) {
+    console.error(`Failed to write markdown file ${filePath}:`, error);
+    throw new Error('Failed to write agent markdown file');
+  }
+}
+
+function getAgentSources(agentName) {
+  const mdPath = path.join(AGENT_DIR, `${agentName}.md`);
+  const mdExists = fs.existsSync(mdPath);
+
+  const config = readConfig();
+  const jsonSection = config.agent?.[agentName];
+
+  const sources = {
+    md: {
+      exists: mdExists,
+      path: mdExists ? mdPath : null,
+      fields: []
+    },
+    json: {
+      exists: !!jsonSection,
+      path: CONFIG_FILE,
+      fields: []
+    }
+  };
+
+  if (mdExists) {
+    const { frontmatter, body } = parseMdFile(mdPath);
+    sources.md.fields = Object.keys(frontmatter);
+    if (body) {
+      sources.md.fields.push('prompt');
+    }
+  }
+
+  if (jsonSection) {
+    sources.json.fields = Object.keys(jsonSection);
+  }
+
+  return sources;
+}
+
+function createAgent(agentName, config) {
+  ensureDirs();
+
+  const mdPath = path.join(AGENT_DIR, `${agentName}.md`);
+
+  if (fs.existsSync(mdPath)) {
+    throw new Error(`Agent ${agentName} already exists as .md file`);
+  }
+
+  const existingConfig = readConfig();
+  if (existingConfig.agent?.[agentName]) {
+    throw new Error(`Agent ${agentName} already exists in opencode.json`);
+  }
+
+  const { prompt, ...frontmatter } = config;
+
+  writeMdFile(mdPath, frontmatter, prompt || '');
+  console.log(`Created new agent: ${agentName}`);
+}
+
+function updateAgent(agentName, updates) {
+  ensureDirs();
+
+  const mdPath = path.join(AGENT_DIR, `${agentName}.md`);
+  const mdExists = fs.existsSync(mdPath);
+
+  let mdData = mdExists ? parseMdFile(mdPath) : null;
+  let config = readConfig();
+  const jsonSection = config.agent?.[agentName];
+
+  let mdModified = false;
+  let jsonModified = false;
+
+  for (const [field, value] of Object.entries(updates)) {
+
+    if (field === 'prompt') {
+      const normalizedValue = typeof value === 'string' ? value : (value == null ? '' : String(value));
+
+      if (mdExists) {
+        mdData.body = normalizedValue;
+        mdModified = true;
+      } else if (isPromptFileReference(jsonSection?.prompt)) {
+        const promptFilePath = resolvePromptFilePath(jsonSection.prompt);
+        if (!promptFilePath) {
+          throw new Error(`Invalid prompt file reference for agent ${agentName}`);
+        }
+        writePromptFile(promptFilePath, normalizedValue);
+      } else if (isPromptFileReference(normalizedValue)) {
+        if (!config.agent) config.agent = {};
+        if (!config.agent[agentName]) config.agent[agentName] = {};
+        config.agent[agentName].prompt = normalizedValue;
+        jsonModified = true;
+      } else {
+        if (!config.agent) config.agent = {};
+        if (!config.agent[agentName]) config.agent[agentName] = {};
+        config.agent[agentName].prompt = normalizedValue;
+        jsonModified = true;
+      }
+      continue;
+    }
+
+    const inMd = mdData?.frontmatter?.[field] !== undefined;
+    const inJson = jsonSection?.[field] !== undefined;
+
+    if (inMd) {
+
+      mdData.frontmatter[field] = value;
+      mdModified = true;
+    } else if (inJson) {
+
+      if (!config.agent) config.agent = {};
+      if (!config.agent[agentName]) config.agent[agentName] = {};
+      config.agent[agentName][field] = value;
+      jsonModified = true;
+    } else {
+
+      if (mdExists && jsonSection) {
+
+        if (!config.agent) config.agent = {};
+        if (!config.agent[agentName]) config.agent[agentName] = {};
+        config.agent[agentName][field] = value;
+        jsonModified = true;
+      } else if (mdExists) {
+
+        mdData.frontmatter[field] = value;
+        mdModified = true;
+      } else {
+
+        if (!config.agent) config.agent = {};
+        if (!config.agent[agentName]) config.agent[agentName] = {};
+        config.agent[agentName][field] = value;
+        jsonModified = true;
+      }
+    }
+  }
+
+  if (mdModified) {
+    writeMdFile(mdPath, mdData.frontmatter, mdData.body);
+  }
+
+  if (jsonModified) {
+    writeConfig(config);
+  }
+
+  console.log(`Updated agent: ${agentName} (md: ${mdModified}, json: ${jsonModified})`);
+}
+
+function deleteAgent(agentName) {
+  const mdPath = path.join(AGENT_DIR, `${agentName}.md`);
+  let deleted = false;
+
+  if (fs.existsSync(mdPath)) {
+    fs.unlinkSync(mdPath);
+    console.log(`Deleted agent .md file: ${mdPath}`);
+    deleted = true;
+  }
+
+  const config = readConfig();
+  if (config.agent?.[agentName]) {
+    delete config.agent[agentName];
+    writeConfig(config);
+    console.log(`Removed agent from opencode.json: ${agentName}`);
+    deleted = true;
+  }
+
+  if (!deleted) {
+    if (!config.agent) config.agent = {};
+    config.agent[agentName] = { disable: true };
+    writeConfig(config);
+    console.log(`Disabled built-in agent: ${agentName}`);
+  }
+}
+
+function getCommandSources(commandName) {
+  const mdPath = path.join(COMMAND_DIR, `${commandName}.md`);
+  const mdExists = fs.existsSync(mdPath);
+
+  const config = readConfig();
+  const jsonSection = config.command?.[commandName];
+
+  const sources = {
+    md: {
+      exists: mdExists,
+      path: mdExists ? mdPath : null,
+      fields: []
+    },
+    json: {
+      exists: !!jsonSection,
+      path: CONFIG_FILE,
+      fields: []
+    }
+  };
+
+  if (mdExists) {
+    const { frontmatter, body } = parseMdFile(mdPath);
+    sources.md.fields = Object.keys(frontmatter);
+    if (body) {
+      sources.md.fields.push('template');
+    }
+  }
+
+  if (jsonSection) {
+    sources.json.fields = Object.keys(jsonSection);
+  }
+
+  return sources;
+}
+
+function createCommand(commandName, config) {
+  ensureDirs();
+
+  const mdPath = path.join(COMMAND_DIR, `${commandName}.md`);
+
+  if (fs.existsSync(mdPath)) {
+    throw new Error(`Command ${commandName} already exists as .md file`);
+  }
+
+  const existingConfig = readConfig();
+  if (existingConfig.command?.[commandName]) {
+    throw new Error(`Command ${commandName} already exists in opencode.json`);
+  }
+
+  const { template, ...frontmatter } = config;
+
+  writeMdFile(mdPath, frontmatter, template || '');
+  console.log(`Created new command: ${commandName}`);
+}
+
+function updateCommand(commandName, updates) {
+  ensureDirs();
+
+  const mdPath = path.join(COMMAND_DIR, `${commandName}.md`);
+  const mdExists = fs.existsSync(mdPath);
+
+  let mdData = mdExists ? parseMdFile(mdPath) : null;
+  let config = readConfig();
+  const jsonSection = config.command?.[commandName];
+
+  let mdModified = false;
+  let jsonModified = false;
+
+  for (const [field, value] of Object.entries(updates)) {
+
+    if (field === 'template') {
+      const normalizedValue = typeof value === 'string' ? value : (value == null ? '' : String(value));
+
+      if (mdExists) {
+        mdData.body = normalizedValue;
+        mdModified = true;
+      } else if (isPromptFileReference(jsonSection?.template)) {
+        const templateFilePath = resolvePromptFilePath(jsonSection.template);
+        if (!templateFilePath) {
+          throw new Error(`Invalid template file reference for command ${commandName}`);
+        }
+        writePromptFile(templateFilePath, normalizedValue);
+      } else if (isPromptFileReference(normalizedValue)) {
+        if (!config.command) config.command = {};
+        if (!config.command[commandName]) config.command[commandName] = {};
+        config.command[commandName].template = normalizedValue;
+        jsonModified = true;
+      } else {
+        if (!config.command) config.command = {};
+        if (!config.command[commandName]) config.command[commandName] = {};
+        config.command[commandName].template = normalizedValue;
+        jsonModified = true;
+      }
+      continue;
+    }
+
+    const inMd = mdData?.frontmatter?.[field] !== undefined;
+    const inJson = jsonSection?.[field] !== undefined;
+
+    if (inMd) {
+
+      mdData.frontmatter[field] = value;
+      mdModified = true;
+    } else if (inJson) {
+
+      if (!config.command) config.command = {};
+      if (!config.command[commandName]) config.command[commandName] = {};
+      config.command[commandName][field] = value;
+      jsonModified = true;
+    } else {
+
+      if (mdExists && jsonSection) {
+
+        if (!config.command) config.command = {};
+        if (!config.command[commandName]) config.command[commandName] = {};
+        config.command[commandName][field] = value;
+        jsonModified = true;
+      } else if (mdExists) {
+
+        mdData.frontmatter[field] = value;
+        mdModified = true;
+      } else {
+
+        if (!config.command) config.command = {};
+        if (!config.command[commandName]) config.command[commandName] = {};
+        config.command[commandName][field] = value;
+        jsonModified = true;
+      }
+    }
+  }
+
+  if (mdModified) {
+    writeMdFile(mdPath, mdData.frontmatter, mdData.body);
+  }
+
+  if (jsonModified) {
+    writeConfig(config);
+  }
+
+  console.log(`Updated command: ${commandName} (md: ${mdModified}, json: ${jsonModified})`);
+}
+
+function deleteCommand(commandName) {
+  const mdPath = path.join(COMMAND_DIR, `${commandName}.md`);
+  let deleted = false;
+
+  if (fs.existsSync(mdPath)) {
+    fs.unlinkSync(mdPath);
+    console.log(`Deleted command .md file: ${mdPath}`);
+    deleted = true;
+  }
+
+  const config = readConfig();
+  if (config.command?.[commandName]) {
+    delete config.command[commandName];
+    writeConfig(config);
+    console.log(`Removed command from opencode.json: ${commandName}`);
+    deleted = true;
+  }
+
+  if (!deleted) {
+    throw new Error(`Command "${commandName}" not found`);
+  }
+}
+
+export {
+  getAgentSources,
+  createAgent,
+  updateAgent,
+  deleteAgent,
+  getCommandSources,
+  createCommand,
+  updateCommand,
+  deleteCommand,
+  readConfig,
+  writeConfig,
+  AGENT_DIR,
+  COMMAND_DIR,
+  CONFIG_FILE
+};
diff --git a/packages/web/server/lib/opencode-config.js.d.ts b/packages/web/server/lib/opencode-config.js.d.ts
new file mode 100644
index 00000000..92ca0ba6
--- /dev/null
+++ b/packages/web/server/lib/opencode-config.js.d.ts
@@ -0,0 +1,12 @@
+declare module "../server/lib/opencode-config.js" {
+  export function getAgentSources(agentName: string): {
+    md: { exists: boolean; path: string | null; fields: string[] };
+    json: { exists: boolean; path: string | null; fields: string[] };
+  };
+
+  export function createAgent(agentName: string, config: Record<string, unknown>): void;
+
+  export function updateAgent(agentName: string, updates: Record<string, unknown>): void;
+
+  export function deleteAgent(agentName: string): void;
+}
diff --git a/packages/web/server/lib/ui-auth.js b/packages/web/server/lib/ui-auth.js
new file mode 100644
index 00000000..e742f966
--- /dev/null
+++ b/packages/web/server/lib/ui-auth.js
@@ -0,0 +1,266 @@
+import crypto from 'crypto';
+
+const SESSION_COOKIE_NAME = 'oc_ui_session';
+const SESSION_TTL_MS = 12 * 60 * 60 * 1000;
+const CLEANUP_INTERVAL_MS = 10 * 60 * 1000;
+
+const isSecureRequest = (req) => {
+  if (req.secure) {
+    return true;
+  }
+  const forwardedProto = req.headers['x-forwarded-proto'];
+  if (typeof forwardedProto === 'string') {
+    const firstProto = forwardedProto.split(',')[0]?.trim().toLowerCase();
+    return firstProto === 'https';
+  }
+  return false;
+};
+
+const parseCookies = (cookieHeader) => {
+  if (!cookieHeader || typeof cookieHeader !== 'string') {
+    return {};
+  }
+
+  return cookieHeader.split(';').reduce((acc, segment) => {
+    const [name, ...rest] = segment.split('=');
+    if (!name) {
+      return acc;
+    }
+    const key = name.trim();
+    if (!key) {
+      return acc;
+    }
+    const value = rest.join('=').trim();
+    acc[key] = decodeURIComponent(value || '');
+    return acc;
+  }, {});
+};
+
+const buildCookie = ({
+  name,
+  value,
+  maxAge,
+  secure,
+}) => {
+  const attributes = [
+    `${name}=${value}`,
+    'Path=/',
+    'HttpOnly',
+    'SameSite=Strict',
+  ];
+
+  if (typeof maxAge === 'number') {
+    attributes.push(`Max-Age=${Math.max(0, Math.floor(maxAge))}`);
+  }
+
+  const expires = maxAge === 0
+    ? 'Thu, 01 Jan 1970 00:00:00 GMT'
+    : new Date(Date.now() + maxAge * 1000).toUTCString();
+
+  attributes.push(`Expires=${expires}`);
+
+  if (secure) {
+    attributes.push('Secure');
+  }
+
+  return attributes.join('; ');
+};
+
+const normalizePassword = (candidate) => {
+  if (typeof candidate !== 'string') {
+    return '';
+  }
+  return candidate.normalize().trim();
+};
+
+export const createUiAuth = ({
+  password,
+  cookieName = SESSION_COOKIE_NAME,
+  sessionTtlMs = SESSION_TTL_MS,
+} = {}) => {
+  const normalizedPassword = normalizePassword(password);
+
+  if (!normalizedPassword) {
+    return {
+      enabled: false,
+      requireAuth: (_req, _res, next) => next(),
+      handleSessionStatus: (_req, res) => {
+        res.json({ authenticated: true, disabled: true });
+      },
+      handleSessionCreate: (_req, res) => {
+        res.status(400).json({ error: 'UI password not configured' });
+      },
+      dispose: () => {
+
+      },
+    };
+  }
+
+  const salt = crypto.randomBytes(16);
+  const expectedHash = crypto.scryptSync(normalizedPassword, salt, 64);
+  const sessions = new Map();
+
+  let cleanupTimer = null;
+
+  const getTokenFromRequest = (req) => {
+    const cookies = parseCookies(req.headers.cookie);
+    if (cookies[cookieName]) {
+      return cookies[cookieName];
+    }
+    return null;
+  };
+
+  const dropSession = (token) => {
+    if (token) {
+      sessions.delete(token);
+    }
+  };
+
+  const setSessionCookie = (req, res, token) => {
+    const secure = isSecureRequest(req);
+    const maxAgeSeconds = Math.floor(sessionTtlMs / 1000);
+    const header = buildCookie({
+      name: cookieName,
+      value: encodeURIComponent(token),
+      maxAge: maxAgeSeconds,
+      secure,
+    });
+    res.setHeader('Set-Cookie', header);
+  };
+
+  const clearSessionCookie = (req, res) => {
+    const secure = isSecureRequest(req);
+    const header = buildCookie({
+      name: cookieName,
+      value: '',
+      maxAge: 0,
+      secure,
+    });
+    res.setHeader('Set-Cookie', header);
+  };
+
+  const verifyPassword = (candidate) => {
+    if (!candidate) {
+      return false;
+    }
+    const normalizedCandidate = normalizePassword(candidate);
+    if (!normalizedCandidate) {
+      return false;
+    }
+    try {
+      const candidateHash = crypto.scryptSync(normalizedCandidate, salt, 64);
+      return crypto.timingSafeEqual(candidateHash, expectedHash);
+    } catch {
+      return false;
+    }
+  };
+
+  const isSessionValid = (token) => {
+    if (!token) {
+      return false;
+    }
+    const record = sessions.get(token);
+    if (!record) {
+      return false;
+    }
+    if (Date.now() - record.lastSeen > sessionTtlMs) {
+      sessions.delete(token);
+      return false;
+    }
+    record.lastSeen = Date.now();
+    return true;
+  };
+
+  const issueSession = (req, res) => {
+    const token = crypto.randomBytes(32).toString('base64url');
+    const now = Date.now();
+    sessions.set(token, { createdAt: now, lastSeen: now });
+    setSessionCookie(req, res, token);
+    return token;
+  };
+
+  const cleanupStaleSessions = () => {
+    const now = Date.now();
+    for (const [token, record] of sessions.entries()) {
+      if (now - record.lastSeen > sessionTtlMs) {
+        sessions.delete(token);
+      }
+    }
+  };
+
+  const startCleanup = () => {
+    if (!cleanupTimer) {
+      cleanupTimer = setInterval(cleanupStaleSessions, CLEANUP_INTERVAL_MS);
+      if (cleanupTimer && typeof cleanupTimer.unref === 'function') {
+        cleanupTimer.unref();
+      }
+    }
+  };
+
+  startCleanup();
+
+  const respondUnauthorized = (req, res) => {
+    res.status(401);
+    const acceptsJson = req.headers.accept?.includes('application/json');
+    if (acceptsJson || req.path.startsWith('/api')) {
+      res.json({ error: 'UI authentication required', locked: true });
+    } else {
+      res.type('text/plain').send('Authentication required');
+    }
+  };
+
+  const requireAuth = (req, res, next) => {
+    if (req.method === 'OPTIONS') {
+      return next();
+    }
+    const token = getTokenFromRequest(req);
+    if (isSessionValid(token)) {
+      return next();
+    }
+    clearSessionCookie(req, res);
+    return respondUnauthorized(req, res);
+  };
+
+  const handleSessionStatus = (req, res) => {
+    const token = getTokenFromRequest(req);
+    if (isSessionValid(token)) {
+      res.json({ authenticated: true });
+      return;
+    }
+    clearSessionCookie(req, res);
+    res.status(401).json({ authenticated: false, locked: true });
+  };
+
+  const handleSessionCreate = (req, res) => {
+    const candidate = typeof req.body?.password === 'string' ? req.body.password : '';
+    if (!verifyPassword(candidate)) {
+      clearSessionCookie(req, res);
+      res.status(401).json({ error: 'Invalid password', locked: true });
+      return;
+    }
+
+    const previousToken = getTokenFromRequest(req);
+    if (previousToken) {
+      dropSession(previousToken);
+    }
+
+    issueSession(req, res);
+    res.json({ authenticated: true });
+  };
+
+  const dispose = () => {
+    if (cleanupTimer) {
+      clearInterval(cleanupTimer);
+      cleanupTimer = null;
+    }
+    sessions.clear();
+  };
+
+  return {
+    enabled: true,
+    requireAuth,
+    handleSessionStatus,
+    handleSessionCreate,
+    dispose,
+  };
+};
diff --git a/packages/web/src/api/files.ts b/packages/web/src/api/files.ts
new file mode 100644
index 00000000..1a78ff6e
--- /dev/null
+++ b/packages/web/src/api/files.ts
@@ -0,0 +1,70 @@
+import type { DirectoryListResult, FileSearchQuery, FileSearchResult, FilesAPI } from '@openchamber/ui/lib/api/types';
+
+const normalizePath = (path: string): string => path.replace(/\\/g, '/');
+
+export const createWebFilesAPI = (): FilesAPI => ({
+  async listDirectory(path: string): Promise<DirectoryListResult> {
+    const target = normalizePath(path);
+    const response = await fetch('/api/fs/list', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path: target }),
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: response.statusText }));
+      throw new Error(error.error || 'Failed to list directory');
+    }
+
+    return response.json();
+  },
+
+  async search(payload: FileSearchQuery): Promise<FileSearchResult[]> {
+    const response = await fetch('/api/fs/search', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        directory: normalizePath(payload.directory),
+        query: payload.query,
+        maxResults: payload.maxResults,
+      }),
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: response.statusText }));
+      throw new Error(error.error || 'Failed to search files');
+    }
+
+    const results = (await response.json()) as unknown;
+    if (!Array.isArray(results)) {
+      return [];
+    }
+    return results
+      .filter((item): item is FileSearchResult => !!item && typeof item === 'object' && typeof (item as { path?: string }).path === 'string')
+      .map((item) => ({
+        path: normalizePath((item as FileSearchResult).path),
+        score: (item as FileSearchResult).score,
+        preview: (item as FileSearchResult).preview,
+      }));
+  },
+
+  async createDirectory(path: string): Promise<{ success: boolean; path: string }> {
+    const target = normalizePath(path);
+    const response = await fetch('/api/fs/mkdir', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path: target }),
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: response.statusText }));
+      throw new Error(error.error || 'Failed to create directory');
+    }
+
+    const result = await response.json();
+    return {
+      success: Boolean(result?.success),
+      path: typeof result?.path === 'string' ? normalizePath(result.path) : target,
+    };
+  },
+});
diff --git a/packages/web/src/api/git.ts b/packages/web/src/api/git.ts
new file mode 100644
index 00000000..fc37e94a
--- /dev/null
+++ b/packages/web/src/api/git.ts
@@ -0,0 +1,41 @@
+import * as gitApiHttp from '@openchamber/ui/lib/gitApiHttp';
+import type {
+  GitAPI,
+  CreateGitCommitOptions,
+  GitLogOptions,
+} from '@openchamber/ui/lib/api/types';
+
+export const createWebGitAPI = (): GitAPI => ({
+  checkIsGitRepository: gitApiHttp.checkIsGitRepository,
+  getGitStatus: gitApiHttp.getGitStatus,
+  getGitDiff: gitApiHttp.getGitDiff,
+  getGitFileDiff: gitApiHttp.getGitFileDiff,
+  revertGitFile: gitApiHttp.revertGitFile,
+  isLinkedWorktree: gitApiHttp.isLinkedWorktree,
+  getGitBranches: gitApiHttp.getGitBranches,
+  deleteGitBranch: gitApiHttp.deleteGitBranch as GitAPI['deleteGitBranch'],
+  deleteRemoteBranch: gitApiHttp.deleteRemoteBranch as GitAPI['deleteRemoteBranch'],
+  generateCommitMessage: gitApiHttp.generateCommitMessage,
+  listGitWorktrees: gitApiHttp.listGitWorktrees,
+  addGitWorktree: gitApiHttp.addGitWorktree as GitAPI['addGitWorktree'],
+  removeGitWorktree: gitApiHttp.removeGitWorktree as GitAPI['removeGitWorktree'],
+  ensureOpenChamberIgnored: gitApiHttp.ensureOpenChamberIgnored,
+  createGitCommit(directory: string, message: string, options?: CreateGitCommitOptions) {
+    return gitApiHttp.createGitCommit(directory, message, options);
+  },
+  gitPush: gitApiHttp.gitPush,
+  gitPull: gitApiHttp.gitPull,
+  gitFetch: gitApiHttp.gitFetch,
+  checkoutBranch: gitApiHttp.checkoutBranch,
+  createBranch: gitApiHttp.createBranch,
+  getGitLog(directory: string, options?: GitLogOptions) {
+    return gitApiHttp.getGitLog(directory, options);
+  },
+  getCommitFiles: gitApiHttp.getCommitFiles,
+  getCurrentGitIdentity: gitApiHttp.getCurrentGitIdentity,
+  setGitIdentity: gitApiHttp.setGitIdentity,
+  getGitIdentities: gitApiHttp.getGitIdentities,
+  createGitIdentity: gitApiHttp.createGitIdentity,
+  updateGitIdentity: gitApiHttp.updateGitIdentity,
+  deleteGitIdentity: gitApiHttp.deleteGitIdentity,
+});
diff --git a/packages/web/src/api/index.ts b/packages/web/src/api/index.ts
new file mode 100644
index 00000000..bcceb938
--- /dev/null
+++ b/packages/web/src/api/index.ts
@@ -0,0 +1,19 @@
+import type { RuntimeAPIs } from '@openchamber/ui/lib/api/types';
+import { createWebTerminalAPI } from './terminal';
+import { createWebGitAPI } from './git';
+import { createWebFilesAPI } from './files';
+import { createWebSettingsAPI } from './settings';
+import { createWebPermissionsAPI } from './permissions';
+import { createWebNotificationsAPI } from './notifications';
+import { createWebToolsAPI } from './tools';
+
+export const createWebAPIs = (): RuntimeAPIs => ({
+  runtime: { platform: 'web', isDesktop: false, label: 'web' },
+  terminal: createWebTerminalAPI(),
+  git: createWebGitAPI(),
+  files: createWebFilesAPI(),
+  settings: createWebSettingsAPI(),
+  permissions: createWebPermissionsAPI(),
+  notifications: createWebNotificationsAPI(),
+  tools: createWebToolsAPI(),
+});
diff --git a/packages/web/src/api/notifications.ts b/packages/web/src/api/notifications.ts
new file mode 100644
index 00000000..812ce24d
--- /dev/null
+++ b/packages/web/src/api/notifications.ts
@@ -0,0 +1,32 @@
+import type { NotificationPayload, NotificationsAPI } from '@openchamber/ui/lib/api/types';
+
+const notifyWithWebAPI = async (payload?: NotificationPayload): Promise<boolean> => {
+  if (typeof Notification === 'undefined') {
+    console.info('Notifications not supported in this environment', payload);
+    return false;
+  }
+
+  const permission = await Notification.requestPermission();
+  if (permission !== 'granted') {
+    console.warn('Notification permission not granted');
+    return false;
+  }
+
+  try {
+    new Notification(payload?.title ?? 'OpenChamber', {
+      body: payload?.body,
+      tag: payload?.tag,
+    });
+    return true;
+  } catch (error) {
+    console.warn('Failed to send notification', error);
+    return false;
+  }
+};
+
+export const createWebNotificationsAPI = (): NotificationsAPI => ({
+  async notifyAgentCompletion(payload?: NotificationPayload): Promise<boolean> {
+    return notifyWithWebAPI(payload);
+  },
+  canNotify: () => (typeof Notification !== 'undefined' ? Notification.permission === 'granted' : false),
+});
diff --git a/packages/web/src/api/permissions.ts b/packages/web/src/api/permissions.ts
new file mode 100644
index 00000000..eda187b4
--- /dev/null
+++ b/packages/web/src/api/permissions.ts
@@ -0,0 +1,15 @@
+import type { DirectoryPermissionRequest, PermissionsAPI, StartAccessingResult } from '@openchamber/ui/lib/api/types';
+
+export const createWebPermissionsAPI = (): PermissionsAPI => ({
+  async requestDirectoryAccess(request: DirectoryPermissionRequest) {
+    return { success: true, path: request.path };
+  },
+  async startAccessingDirectory(path: string): Promise<StartAccessingResult> {
+    void path;
+    return { success: true };
+  },
+  async stopAccessingDirectory(path: string): Promise<StartAccessingResult> {
+    void path;
+    return { success: true };
+  },
+});
diff --git a/packages/web/src/api/settings.ts b/packages/web/src/api/settings.ts
new file mode 100644
index 00000000..bc638c16
--- /dev/null
+++ b/packages/web/src/api/settings.ts
@@ -0,0 +1,58 @@
+import type { SettingsAPI, SettingsLoadResult, SettingsPayload } from '@openchamber/ui/lib/api/types';
+
+const SETTINGS_ENDPOINT = '/api/config/settings';
+const RELOAD_ENDPOINT = '/api/config/reload';
+
+const sanitizePayload = (data: unknown): SettingsPayload => {
+  if (!data || typeof data !== 'object') {
+    return {};
+  }
+  return data as SettingsPayload;
+};
+
+export const createWebSettingsAPI = (): SettingsAPI => ({
+  async load(): Promise<SettingsLoadResult> {
+    const response = await fetch(SETTINGS_ENDPOINT, {
+      method: 'GET',
+      headers: { Accept: 'application/json' },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to load settings: ${response.statusText}`);
+    }
+
+    const payload = sanitizePayload(await response.json().catch(() => ({})));
+    return {
+      settings: payload,
+      source: 'web',
+    };
+  },
+
+  async save(changes: Partial<SettingsPayload>): Promise<SettingsPayload> {
+    const response = await fetch(SETTINGS_ENDPOINT, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body: JSON.stringify(changes),
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: response.statusText }));
+      throw new Error(error.error || 'Failed to save settings');
+    }
+
+    const payload = sanitizePayload(await response.json().catch(() => ({})));
+    return payload;
+  },
+
+  async restartOpenCode(): Promise<{ restarted: boolean }> {
+    const response = await fetch(RELOAD_ENDPOINT, { method: 'POST' });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: response.statusText }));
+      throw new Error(error.error || 'Failed to restart OpenCode');
+    }
+    return { restarted: true };
+  },
+});
diff --git a/packages/web/src/api/terminal.ts b/packages/web/src/api/terminal.ts
new file mode 100644
index 00000000..86f5cc48
--- /dev/null
+++ b/packages/web/src/api/terminal.ts
@@ -0,0 +1,56 @@
+import {
+  connectTerminalStream,
+  createTerminalSession,
+  resizeTerminal,
+  sendTerminalInput,
+  closeTerminal,
+} from '@openchamber/ui/lib/terminalApi';
+import type {
+  TerminalAPI,
+  TerminalHandlers,
+  TerminalStreamOptions,
+  CreateTerminalOptions,
+  ResizeTerminalPayload,
+  TerminalSession,
+} from '@openchamber/ui/lib/api/types';
+
+const getRetryPolicy = (options?: TerminalStreamOptions) => {
+  const retry = options?.retry;
+  return {
+    maxRetries: retry?.maxRetries ?? 3,
+    initialRetryDelay: retry?.initialDelayMs ?? 1000,
+    maxRetryDelay: retry?.maxDelayMs ?? 8000,
+    connectionTimeout: options?.connectionTimeoutMs ?? 10000,
+  };
+};
+
+export const createWebTerminalAPI = (): TerminalAPI => ({
+  async createSession(options: CreateTerminalOptions): Promise<TerminalSession> {
+    return createTerminalSession(options);
+  },
+
+  connect(sessionId: string, handlers: TerminalHandlers, options?: TerminalStreamOptions) {
+    const unsubscribe = connectTerminalStream(
+      sessionId,
+      handlers.onEvent,
+      handlers.onError,
+      getRetryPolicy(options)
+    );
+
+    return {
+      close: () => unsubscribe(),
+    };
+  },
+
+  async sendInput(sessionId: string, input: string): Promise<void> {
+    await sendTerminalInput(sessionId, input);
+  },
+
+  async resize(payload: ResizeTerminalPayload): Promise<void> {
+    await resizeTerminal(payload.sessionId, payload.cols, payload.rows);
+  },
+
+  async close(sessionId: string): Promise<void> {
+    await closeTerminal(sessionId);
+  },
+});
diff --git a/packages/web/src/api/tools.ts b/packages/web/src/api/tools.ts
new file mode 100644
index 00000000..d0a7c09f
--- /dev/null
+++ b/packages/web/src/api/tools.ts
@@ -0,0 +1,22 @@
+import type { ToolsAPI } from '@openchamber/ui/lib/api/types';
+
+export const createWebToolsAPI = (): ToolsAPI => ({
+  async getAvailableTools(): Promise<string[]> {
+
+    const response = await fetch('/api/experimental/tool/ids');
+
+    if (!response.ok) {
+      throw new Error(`Tools API returned ${response.status} ${response.statusText}`);
+    }
+
+    const data = await response.json();
+
+    if (!Array.isArray(data)) {
+      throw new Error('Tools API returned invalid data format');
+    }
+
+    return data
+      .filter((tool: unknown): tool is string => typeof tool === 'string' && tool !== 'invalid')
+      .sort();
+  },
+});
diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx
new file mode 100644
index 00000000..09116770
--- /dev/null
+++ b/packages/web/src/main.tsx
@@ -0,0 +1,13 @@
+import { createWebAPIs } from './api';
+import type { RuntimeAPIs } from '@openchamber/ui/lib/api/types';
+import '@openchamber/ui/index.css';
+import '@openchamber/ui/styles/fonts';
+
+declare global {
+  interface Window {
+    __OPENCHAMBER_RUNTIME_APIS__?: RuntimeAPIs;
+  }
+}
+
+window.__OPENCHAMBER_RUNTIME_APIS__ = createWebAPIs();
+import('@openchamber/ui/main');
diff --git a/packages/web/tsconfig.json b/packages/web/tsconfig.json
new file mode 100644
index 00000000..91747238
--- /dev/null
+++ b/packages/web/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "types": ["vite/client"],
+    "paths": {
+      "@/*": ["../ui/src/*", "./src/*"],
+      "@web/*": ["./src/*"],
+      "@openchamber/ui/*": ["../ui/src/*"],
+      "@openchamber/web/*": ["./src/*"]
+    }
+  },
+  "include": ["src", "../ui/src", "../ui/src/types/**/*"]
+}
diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts
new file mode 100644
index 00000000..85b40f79
--- /dev/null
+++ b/packages/web/vite.config.ts
@@ -0,0 +1,69 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { themeStoragePlugin } from '../../vite-theme-plugin';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  root: path.resolve(__dirname, '.'),
+  plugins: [
+    react(),
+    themeStoragePlugin(),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, '../ui/src'),
+      '@web': path.resolve(__dirname, './src'),
+      '@openchamber/ui': path.resolve(__dirname, '../ui/src'),
+      '@opencode-ai/sdk': path.resolve(__dirname, '../../node_modules/@opencode-ai/sdk/dist/client.js'),
+    },
+  },
+  define: {
+    'process.env': {},
+    global: 'globalThis',
+  },
+  optimizeDeps: {
+    include: ['@opencode-ai/sdk'],
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:3001',
+        changeOrigin: true,
+      },
+    },
+  },
+  build: {
+    outDir: path.resolve(__dirname, 'dist'),
+    emptyOutDir: true,
+    chunkSizeWarningLimit: 1200,
+    rollupOptions: {
+      external: ['node:child_process', 'node:fs', 'node:path', 'node:url'],
+      output: {
+        manualChunks(id) {
+          if (!id.includes('node_modules')) return undefined;
+
+          const match = id.split('node_modules/')[1];
+          if (!match) return undefined;
+
+          const segments = match.split('/');
+          const packageName = match.startsWith('@') ? `${segments[0]}/${segments[1]}` : segments[0];
+
+          if (packageName === 'react' || packageName === 'react-dom') return 'vendor-react';
+          if (packageName === 'zustand' || packageName === 'zustand/middleware') return 'vendor-zustand';
+
+          if (packageName === '@opencode-ai/sdk') return 'vendor-opencode-sdk';
+          if (packageName.includes('remark') || packageName.includes('rehype') || packageName === 'react-markdown') return 'vendor-markdown';
+          if (packageName.startsWith('@radix-ui')) return 'vendor-radix';
+          if (packageName.includes('react-syntax-highlighter') || packageName.includes('highlight.js')) return 'vendor-syntax';
+
+          const sanitized = packageName.replace(/^@/, '').replace(/\//g, '-');
+          return `vendor-${sanitized}`;
+        },
+      },
+    },
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 00000000..f3aad4d3
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,10241 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@fontsource/ibm-plex-mono':
+        specifier: ^5.2.7
+        version: 5.2.7
+      '@fontsource/ibm-plex-sans':
+        specifier: ^5.1.1
+        version: 5.2.8
+      '@heroui/scroll-shadow':
+        specifier: ^2.3.18
+        version: 2.3.18(@heroui/system@2.4.23(@heroui/theme@2.4.23(tailwindcss@4.1.13))(framer-motion@12.23.24(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(@heroui/theme@2.4.23(tailwindcss@4.1.13))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@heroui/system':
+        specifier: ^2.4.23
+        version: 2.4.23(@heroui/theme@2.4.23(tailwindcss@4.1.13))(framer-motion@12.23.24(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@heroui/theme':
+        specifier: ^2.4.23
+        version: 2.4.23(tailwindcss@4.1.13)
+      '@ibm/plex':
+        specifier: ^6.4.1
+        version: 6.4.1
+      '@opencode-ai/sdk':
+        specifier: ^1.0.133
+        version: 1.0.133
+      '@radix-ui/react-collapsible':
+        specifier: ^1.1.12
+        version: 1.1.12(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.16
+        version: 2.1.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.2.10
+        version: 1.2.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-select':
+        specifier: ^2.2.6
+        version: 2.2.6(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.7
+        version: 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.3
+        version: 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-toggle':
+        specifier: ^1.1.10
+        version: 1.1.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.8
+        version: 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@remixicon/react':
+        specifier: ^4.7.0
+        version: 4.7.0(react@19.1.1)
+      '@types/react-syntax-highlighter':
+        specifier: ^15.5.13
+        version: 15.5.13
+      '@xterm/addon-fit':
+        specifier: ^0.10.0
+        version: 0.10.0(@xterm/xterm@5.5.0)
+      '@xterm/xterm':
+        specifier: ^5.3.0
+        version: 5.5.0
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      cmdk:
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      electron-context-menu:
+        specifier: ^4.1.1
+        version: 4.1.1
+      electron-store:
+        specifier: ^11.0.2
+        version: 11.0.2
+      express:
+        specifier: ^5.1.0
+        version: 5.1.0
+      http-proxy-middleware:
+        specifier: ^3.0.5
+        version: 3.0.5
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      node-pty:
+        specifier: ^1.0.0
+        version: 1.0.0
+      react:
+        specifier: ^19.1.1
+        version: 19.1.1
+      react-dom:
+        specifier: ^19.1.1
+        version: 19.1.1(react@19.1.1)
+      react-markdown:
+        specifier: ^10.1.0
+        version: 10.1.0(@types/react@19.1.12)(react@19.1.1)
+      react-syntax-highlighter:
+        specifier: ^15.6.6
+        version: 15.6.6(react@19.1.1)
+      remark-gfm:
+        specifier: ^4.0.1
+        version: 4.0.1
+      simple-git:
+        specifier: ^3.28.0
+        version: 3.28.0
+      sonner:
+        specifier: ^2.0.7
+        version: 2.0.7(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      strip-json-comments:
+        specifier: ^5.0.3
+        version: 5.0.3
+      tailwind-merge:
+        specifier: ^3.3.1
+        version: 3.3.1
+      yaml:
+        specifier: ^2.8.1
+        version: 2.8.1
+      zustand:
+        specifier: ^5.0.8
+        version: 5.0.8(@types/react@19.1.12)(react@19.1.1)
+    devDependencies:
+      '@eslint/js':
+        specifier: ^9.33.0
+        version: 9.35.0
+      '@tailwindcss/postcss':
+        specifier: ^4.0.0
+        version: 4.1.13
+      '@types/node':
+        specifier: ^24.3.1
+        version: 24.3.1
+      '@types/react':
+        specifier: ^19.1.10
+        version: 19.1.12
+      '@types/react-dom':
+        specifier: ^19.1.7
+        version: 19.1.9(@types/react@19.1.12)
+      '@vitejs/plugin-react':
+        specifier: ^5.0.0
+        version: 5.0.2(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.6)(yaml@2.8.1))
+      autoprefixer:
+        specifier: ^10.4.21
+        version: 10.4.21(postcss@8.5.6)
+      concurrently:
+        specifier: ^9.2.1
+        version: 9.2.1
+      cors:
+        specifier: ^2.8.5
+        version: 2.8.5
+      cross-env:
+        specifier: ^7.0.3
+        version: 7.0.3
+      electron:
+        specifier: ^38.2.0
+        version: 38.2.0
+      electron-builder:
+        specifier: ^24.13.3
+        version: 24.13.3(electron-builder-squirrel-windows@24.13.3)
+      eslint:
+        specifier: ^9.33.0
+        version: 9.35.0(jiti@2.5.1)
+      eslint-plugin-react-hooks:
+        specifier: ^5.2.0
+        version: 5.2.0(eslint@9.35.0(jiti@2.5.1))
+      eslint-plugin-react-refresh:
+        specifier: ^0.4.20
+        version: 0.4.20(eslint@9.35.0(jiti@2.5.1))
+      globals:
+        specifier: ^16.3.0
+        version: 16.4.0
+      nodemon:
+        specifier: ^3.1.7
+        version: 3.1.11
+      tailwindcss:
+        specifier: ^4.0.0
+        version: 4.1.13
+      tsx:
+        specifier: ^4.20.6
+        version: 4.20.6
+      tw-animate-css:
+        specifier: ^1.3.8
+        version: 1.3.8
+      typescript:
+        specifier: ~5.8.3
+        version: 5.8.3
+      typescript-eslint:
+        specifier: ^8.39.1
+        version: 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)
+      vite:
+        specifier: ^7.1.2
+        version: 7.1.5(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.6)(yaml@2.8.1)
+
+  packages/desktop:
+    dependencies:
+      '@openchamber/ui':
+        specifier: workspace:*
+        version: link:../ui
+      '@tauri-apps/plugin-notification':
+        specifier: ^2.3.3
+        version: 2.3.3
+      '@tauri-apps/plugin-process':
+        specifier: ^2
+        version: 2.3.1
+      '@tauri-apps/plugin-updater':
+        specifier: ^2
+        version: 2.9.0
+      react:
+        specifier: ^19.1.1
+        version: 19.1.1
+      react-dom:
+        specifier: ^19.1.1
+        version: 19.1.1(react@19.1.1)
+    devDependencies:
+      '@tauri-apps/api':
+        specifier: ^2.9.1
+        version: 2.9.1
+      '@tauri-apps/cli':
+        specifier: ^2
+        version: 2.9.5
+      '@tauri-apps/plugin-dialog':
+        specifier: ^2.4.2
+        version: 2.4.2
+      '@types/node':
+        specifier: ^24.3.1
+        version: 24.3.1
+      '@types/react':
+        specifier: ^19.1.10
+        version: 19.1.12
+      '@types/react-dom':
+        specifier: ^19.1.7
+        version: 19.1.9(@types/react@19.1.12)
+      '@vitejs/plugin-react':
+        specifier: ^5.0.0
+        version: 5.0.2(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.6)(yaml@2.8.1))
+      typescript:
+        specifier: ~5.8.3
+        version: 5.8.3
+      vite:
+        specifier: ^7.1.2
+        version: 7.1.5(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.6)(yaml@2.8.1)
+
+  packages/ui:
+    dependencies:
+      '@fontsource/ibm-plex-mono':
+        specifier: ^5.2.7
+        version: 5.2.7
+      '@fontsource/ibm-plex-sans':
+        specifier: ^5.1.1
+        version: 5.2.8
+      '@ibm/plex':
+        specifier: ^6.4.1
+        version: 6.4.1
+      '@monaco-editor/react':
+        specifier: ^4.6.0
+        version: 4.7.0(monaco-editor@0.55.1)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@opencode-ai/sdk':
+        specifier: ^1.0.65
+        version: 1.0.65
+      '@radix-ui/react-collapsible':
+        specifier: ^1.1.12
+        version: 1.1.12(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.16
+        version: 2.1.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.2.10
+        version: 1.2.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-select':
+        specifier: ^2.2.6
+        version: 2.2.6(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.7
+        version: 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.3
+        version: 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-toggle':
+        specifier: ^1.1.10
+        version: 1.1.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.8
+        version: 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@remixicon/react':
+        specifier: ^4.7.0
+        version: 4.7.0(react@19.1.1)
+      '@types/react-syntax-highlighter':
+        specifier: ^15.5.13
+        version: 15.5.13
+      '@xterm/addon-fit':
+        specifier: ^0.10.0
+        version: 0.10.0(@xterm/xterm@5.5.0)
+      '@xterm/xterm':
+        specifier: ^5.3.0
+        version: 5.5.0
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      cmdk:
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      express:
+        specifier: ^5.1.0
+        version: 5.1.0
+      http-proxy-middleware:
+        specifier: ^3.0.5
+        version: 3.0.5
+      motion:
+        specifier: ^12.23.24
+        version: 12.23.24(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      node-pty:
+        specifier: ^1.0.0
+        version: 1.0.0
+      react:
+        specifier: ^19.1.1
+        version: 19.1.1
+      react-dom:
+        specifier: ^19.1.1
+        version: 19.1.1(react@19.1.1)
+      react-syntax-highlighter:
+        specifier: ^15.6.6
+        version: 15.6.6(react@19.1.1)
+      simple-git:
+        specifier: ^3.28.0
+        version: 3.28.0
+      sonner:
+        specifier: ^2.0.7
+        version: 2.0.7(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      streamdown:
+        specifier: ^1.6.10
+        version: 1.6.10(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(react@19.1.1)
+      strip-json-comments:
+        specifier: ^5.0.3
+        version: 5.0.3
+      tailwind-merge:
+        specifier: ^3.3.1
+        version: 3.3.1
+      yaml:
+        specifier: ^2.8.1
+        version: 2.8.1
+      zustand:
+        specifier: ^5.0.8
+        version: 5.0.8(@types/react@19.1.12)(react@19.1.1)
+    devDependencies:
+      '@eslint/js':
+        specifier: ^9.33.0
+        version: 9.35.0
+      '@tailwindcss/postcss':
+        specifier: ^4.0.0
+        version: 4.1.13
+      '@tauri-apps/api':
+        specifier: ^2.9.0
+        version: 2.9.0
+      '@types/node':
+        specifier: ^24.3.1
+        version: 24.3.1
+      '@types/react':
+        specifier: ^19.1.10
+        version: 19.1.12
+      '@types/react-dom':
+        specifier: ^19.1.7
+        version: 19.1.9(@types/react@19.1.12)
+      '@vitejs/plugin-react':
+        specifier: ^5.0.0
+        version: 5.0.2(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.6)(yaml@2.8.1))
+      autoprefixer:
+        specifier: ^10.4.21
+        version: 10.4.21(postcss@8.5.6)
+      concurrently:
+        specifier: ^9.2.1
+        version: 9.2.1
+      cors:
+        specifier: ^2.8.5
+        version: 2.8.5
+      cross-env:
+        specifier: ^7.0.3
+        version: 7.0.3
+      electron:
+        specifier: ^38.2.0
+        version: 38.2.0
+      electron-builder:
+        specifier: ^24.13.3
+        version: 24.13.3(electron-builder-squirrel-windows@24.13.3)
+      eslint:
+        specifier: ^9.33.0
+        version: 9.35.0(jiti@2.5.1)
+      eslint-plugin-react-hooks:
+        specifier: ^5.2.0
+        version: 5.2.0(eslint@9.35.0(jiti@2.5.1))
+      eslint-plugin-react-refresh:
+        specifier: ^0.4.20
+        version: 0.4.20(eslint@9.35.0(jiti@2.5.1))
+      globals:
+        specifier: ^16.3.0
+        version: 16.4.0
+      nodemon:
+        specifier: ^3.1.7
+        version: 3.1.11
+      tailwindcss:
+        specifier: ^4.0.0
+        version: 4.1.13
+      tsx:
+        specifier: ^4.20.6
+        version: 4.20.6
+      tw-animate-css:
+        specifier: ^1.3.8
+        version: 1.3.8
+      typescript:
+        specifier: ~5.8.3
+        version: 5.8.3
+      typescript-eslint:
+        specifier: ^8.39.1
+        version: 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)
+      vite:
+        specifier: ^7.1.2
+        version: 7.1.5(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.6)(yaml@2.8.1)
+
+  packages/web:
+    dependencies:
+      '@fontsource/ibm-plex-mono':
+        specifier: ^5.2.7
+        version: 5.2.7
+      '@fontsource/ibm-plex-sans':
+        specifier: ^5.1.1
+        version: 5.2.8
+      '@ibm/plex':
+        specifier: ^6.4.1
+        version: 6.4.1
+      '@opencode-ai/sdk':
+        specifier: ^1.0.65
+        version: 1.0.65
+      '@radix-ui/react-collapsible':
+        specifier: ^1.1.12
+        version: 1.1.12(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.16
+        version: 2.1.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.2.10
+        version: 1.2.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-select':
+        specifier: ^2.2.6
+        version: 2.2.6(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.7
+        version: 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.3
+        version: 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-toggle':
+        specifier: ^1.1.10
+        version: 1.1.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.8
+        version: 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@remixicon/react':
+        specifier: ^4.7.0
+        version: 4.7.0(react@19.1.1)
+      '@types/react-syntax-highlighter':
+        specifier: ^15.5.13
+        version: 15.5.13
+      '@xterm/addon-fit':
+        specifier: ^0.10.0
+        version: 0.10.0(@xterm/xterm@5.5.0)
+      '@xterm/xterm':
+        specifier: ^5.3.0
+        version: 5.5.0
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      cmdk:
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      express:
+        specifier: ^5.1.0
+        version: 5.1.0
+      http-proxy-middleware:
+        specifier: ^3.0.5
+        version: 3.0.5
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      node-pty:
+        specifier: ^1.0.0
+        version: 1.0.0
+      react:
+        specifier: ^19.1.1
+        version: 19.1.1
+      react-dom:
+        specifier: ^19.1.1
+        version: 19.1.1(react@19.1.1)
+      react-markdown:
+        specifier: ^10.1.0
+        version: 10.1.0(@types/react@19.1.12)(react@19.1.1)
+      react-syntax-highlighter:
+        specifier: ^15.6.6
+        version: 15.6.6(react@19.1.1)
+      remark-gfm:
+        specifier: ^4.0.1
+        version: 4.0.1
+      simple-git:
+        specifier: ^3.28.0
+        version: 3.28.0
+      sonner:
+        specifier: ^2.0.7
+        version: 2.0.7(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      strip-json-comments:
+        specifier: ^5.0.3
+        version: 5.0.3
+      tailwind-merge:
+        specifier: ^3.3.1
+        version: 3.3.1
+      yaml:
+        specifier: ^2.8.1
+        version: 2.8.1
+      zustand:
+        specifier: ^5.0.8
+        version: 5.0.8(@types/react@19.1.12)(react@19.1.1)
+    devDependencies:
+      '@eslint/js':
+        specifier: ^9.33.0
+        version: 9.35.0
+      '@tailwindcss/postcss':
+        specifier: ^4.0.0
+        version: 4.1.13
+      '@types/node':
+        specifier: ^24.3.1
+        version: 24.3.1
+      '@types/react':
+        specifier: ^19.1.10
+        version: 19.1.12
+      '@types/react-dom':
+        specifier: ^19.1.7
+        version: 19.1.9(@types/react@19.1.12)
+      '@vitejs/plugin-react':
+        specifier: ^5.0.0
+        version: 5.0.2(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.6)(yaml@2.8.1))
+      autoprefixer:
+        specifier: ^10.4.21
+        version: 10.4.21(postcss@8.5.6)
+      concurrently:
+        specifier: ^9.2.1
+        version: 9.2.1
+      cors:
+        specifier: ^2.8.5
+        version: 2.8.5
+      cross-env:
+        specifier: ^7.0.3
+        version: 7.0.3
+      eslint:
+        specifier: ^9.33.0
+        version: 9.35.0(jiti@2.5.1)
+      eslint-plugin-react-hooks:
+        specifier: ^5.2.0
+        version: 5.2.0(eslint@9.35.0(jiti@2.5.1))
+      eslint-plugin-react-refresh:
+        specifier: ^0.4.20
+        version: 0.4.20(eslint@9.35.0(jiti@2.5.1))
+      globals:
+        specifier: ^16.3.0
+        version: 16.4.0
+      nodemon:
+        specifier: ^3.1.7
+        version: 3.1.11
+      tailwindcss:
+        specifier: ^4.0.0
+        version: 4.1.13
+      tsx:
+        specifier: ^4.20.6
+        version: 4.20.6
+      tw-animate-css:
+        specifier: ^1.3.8
+        version: 1.3.8
+      typescript:
+        specifier: ~5.8.3
+        version: 5.8.3
+      typescript-eslint:
+        specifier: ^8.39.1
+        version: 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)
+      vite:
+        specifier: ^7.1.2
+        version: 7.1.5(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.6)(yaml@2.8.1)
+
+packages:
+
+  7zip-bin@5.2.0:
+    resolution: {integrity: sha512-ukTPVhqG4jNzMro2qA9HSCSSVJN3aN7tlb+hfqYCt3ER0yWroeA2VR38MNrOHLQ/cVj+DaIMad0kFCtWWowh/A==}
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@antfu/install-pkg@1.1.0':
+    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
+
+  '@babel/code-frame@7.27.1':
+    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.28.4':
+    resolution: {integrity: sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.28.4':
+    resolution: {integrity: sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.28.3':
+    resolution: {integrity: sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.27.2':
+    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.27.1':
+    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.28.3':
+    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-plugin-utils@7.27.1':
+    resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.27.1':
+    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.28.4':
+    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.28.4':
+    resolution: {integrity: sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-transform-react-jsx-self@7.27.1':
+    resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-react-jsx-source@7.27.1':
+    resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.27.2':
+    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.28.4':
+    resolution: {integrity: sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.28.4':
+    resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@braintree/sanitize-url@7.1.1':
+    resolution: {integrity: sha512-i1L7noDNxtFyL5DmZafWy1wRVhGehQmzZaz1HiN5e7iylJMSZR7ekOV7NsIqa5qBldlLrsKv4HbgFUVlQrz8Mw==}
+
+  '@chevrotain/cst-dts-gen@11.0.3':
+    resolution: {integrity: sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==}
+
+  '@chevrotain/gast@11.0.3':
+    resolution: {integrity: sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==}
+
+  '@chevrotain/regexp-to-ast@11.0.3':
+    resolution: {integrity: sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==}
+
+  '@chevrotain/types@11.0.3':
+    resolution: {integrity: sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==}
+
+  '@chevrotain/utils@11.0.3':
+    resolution: {integrity: sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==}
+
+  '@develar/schema-utils@2.6.5':
+    resolution: {integrity: sha512-0cp4PsWQ/9avqTVMCtZ+GirikIA36ikvjtHweU4/j8yLtgObI0+JUPhYFScgwlteveGB1rt3Cm8UhN04XayDig==}
+    engines: {node: '>= 8.9.0'}
+
+  '@electron/asar@3.4.1':
+    resolution: {integrity: sha512-i4/rNPRS84t0vSRa2HorerGRXWyF4vThfHesw0dmcWHp+cspK743UanA0suA5Q5y8kzY2y6YKrvbIUn69BCAiA==}
+    engines: {node: '>=10.12.0'}
+    hasBin: true
+
+  '@electron/get@2.0.3':
+    resolution: {integrity: sha512-Qkzpg2s9GnVV2I2BjRksUi43U5e6+zaQMcjoJy0C+C5oxaKl+fmckGDQFtRpZpZV0NQekuZZ+tGz7EA9TVnQtQ==}
+    engines: {node: '>=12'}
+
+  '@electron/notarize@2.2.1':
+    resolution: {integrity: sha512-aL+bFMIkpR0cmmj5Zgy0LMKEpgy43/hw5zadEArgmAMWWlKc5buwFvFT9G/o/YJkvXAJm5q3iuTuLaiaXW39sg==}
+    engines: {node: '>= 10.0.0'}
+
+  '@electron/osx-sign@1.0.5':
+    resolution: {integrity: sha512-k9ZzUQtamSoweGQDV2jILiRIHUu7lYlJ3c6IEmjv1hC17rclE+eb9U+f6UFlOOETo0JzY1HNlXy4YOlCvl+Lww==}
+    engines: {node: '>=12.0.0'}
+    hasBin: true
+
+  '@electron/universal@1.5.1':
+    resolution: {integrity: sha512-kbgXxyEauPJiQQUNG2VgUeyfQNFk6hBF11ISN2PNI6agUgPl55pv4eQmaqHzTAzchBvqZ2tQuRVaPStGf0mxGw==}
+    engines: {node: '>=8.6'}
+
+  '@esbuild/aix-ppc64@0.25.9':
+    resolution: {integrity: sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.25.9':
+    resolution: {integrity: sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.25.9':
+    resolution: {integrity: sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.25.9':
+    resolution: {integrity: sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.25.9':
+    resolution: {integrity: sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.25.9':
+    resolution: {integrity: sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.25.9':
+    resolution: {integrity: sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.25.9':
+    resolution: {integrity: sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.25.9':
+    resolution: {integrity: sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.25.9':
+    resolution: {integrity: sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.25.9':
+    resolution: {integrity: sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.25.9':
+    resolution: {integrity: sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.25.9':
+    resolution: {integrity: sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.25.9':
+    resolution: {integrity: sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.25.9':
+    resolution: {integrity: sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.25.9':
+    resolution: {integrity: sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.25.9':
+    resolution: {integrity: sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.25.9':
+    resolution: {integrity: sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.25.9':
+    resolution: {integrity: sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.25.9':
+    resolution: {integrity: sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.25.9':
+    resolution: {integrity: sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.25.9':
+    resolution: {integrity: sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.25.9':
+    resolution: {integrity: sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.25.9':
+    resolution: {integrity: sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.25.9':
+    resolution: {integrity: sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.25.9':
+    resolution: {integrity: sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@eslint-community/eslint-utils@4.9.0':
+    resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.1':
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.21.0':
+    resolution: {integrity: sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/config-helpers@0.3.1':
+    resolution: {integrity: sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.15.2':
+    resolution: {integrity: sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.3.1':
+    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.35.0':
+    resolution: {integrity: sha512-30iXE9whjlILfWobBkNerJo+TXYsgVM5ERQwMcMKCHckHflCmf7wXDAHlARoWnh0s1U72WqlbeyE7iAcCzuCPw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.6':
+    resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.3.5':
+    resolution: {integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@floating-ui/core@1.7.3':
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+
+  '@floating-ui/dom@1.7.4':
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
+
+  '@floating-ui/react-dom@2.1.6':
+    resolution: {integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
+  '@fontsource/ibm-plex-mono@5.2.7':
+    resolution: {integrity: sha512-MKAb8qV+CaiMQn2B0dIi1OV3565NYzp3WN5b4oT6LTkk+F0jR6j0ZN+5BKJiIhffDC3rtBULsYZE65+0018z9w==}
+
+  '@fontsource/ibm-plex-sans@5.2.8':
+    resolution: {integrity: sha512-eztSXjDhPhcpxNIiGTgMebdLP9qS4rWkysuE1V7c+DjOR0qiezaiDaTwQE7bTnG5HxAY/8M43XKDvs3cYq6ZYQ==}
+
+  '@formatjs/ecma402-abstract@2.3.6':
+    resolution: {integrity: sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw==}
+
+  '@formatjs/fast-memoize@2.2.7':
+    resolution: {integrity: sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==}
+
+  '@formatjs/icu-messageformat-parser@2.11.4':
+    resolution: {integrity: sha512-7kR78cRrPNB4fjGFZg3Rmj5aah8rQj9KPzuLsmcSn4ipLXQvC04keycTI1F7kJYDwIXtT2+7IDEto842CfZBtw==}
+
+  '@formatjs/icu-skeleton-parser@1.8.16':
+    resolution: {integrity: sha512-H13E9Xl+PxBd8D5/6TVUluSpxGNvFSlN/b3coUp0e0JpuWXXnQDiavIpY3NnvSp4xhEMoXyyBvVfdFX8jglOHQ==}
+
+  '@formatjs/intl-localematcher@0.6.2':
+    resolution: {integrity: sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA==}
+
+  '@heroui/react-rsc-utils@2.1.9':
+    resolution: {integrity: sha512-e77OEjNCmQxE9/pnLDDb93qWkX58/CcgIqdNAczT/zUP+a48NxGq2A2WRimvc1uviwaNL2StriE2DmyZPyYW7Q==}
+    peerDependencies:
+      react: '>=18 || >=19.0.0-rc.0'
+
+  '@heroui/react-utils@2.1.14':
+    resolution: {integrity: sha512-hhKklYKy9sRH52C9A8P0jWQ79W4MkIvOnKBIuxEMHhigjfracy0o0lMnAUdEsJni4oZKVJYqNGdQl+UVgcmeDA==}
+    peerDependencies:
+      react: '>=18 || >=19.0.0-rc.0'
+
+  '@heroui/scroll-shadow@2.3.18':
+    resolution: {integrity: sha512-P/nLQbFPOlbTLRjO2tKoZCljJtU7iq81wsp7C8wZ1rZI1RmkTx3UgLLeoFWgmAp3ZlUIYgaewTnejt6eRx+28w==}
+    peerDependencies:
+      '@heroui/system': '>=2.4.18'
+      '@heroui/theme': '>=2.4.17'
+      react: '>=18 || >=19.0.0-rc.0'
+      react-dom: '>=18 || >=19.0.0-rc.0'
+
+  '@heroui/shared-utils@2.1.12':
+    resolution: {integrity: sha512-0iCnxVAkIPtrHQo26Qa5g0UTqMTpugTbClNOrEPsrQuyRAq7Syux998cPwGlneTfB5E5xcU3LiEdA9GUyeK2cQ==}
+
+  '@heroui/system-rsc@2.3.20':
+    resolution: {integrity: sha512-uZwQErEud/lAX7KRXEdsDcGLyygBffHcgnbCDrLvmTf3cyBE84YziG7AjM7Ts8ZcrF+wBXX4+a1IqnKGlsGEdQ==}
+    peerDependencies:
+      '@heroui/theme': '>=2.4.17'
+      react: '>=18 || >=19.0.0-rc.0'
+
+  '@heroui/system@2.4.23':
+    resolution: {integrity: sha512-kgYvfkIOQKM6CCBIlNSE2tXMtNrS1mvEUbvwnaU3pEYbMlceBtwA5v7SlpaJy/5dqKcTbfmVMUCmXnY/Kw4vaQ==}
+    peerDependencies:
+      framer-motion: '>=11.5.6 || >=12.0.0-alpha.1'
+      react: '>=18 || >=19.0.0-rc.0'
+      react-dom: '>=18 || >=19.0.0-rc.0'
+
+  '@heroui/theme@2.4.23':
+    resolution: {integrity: sha512-5hoaRWG+/d/t06p7Pfhz70DUP0Uggjids7/z2Ytgup4A8KAOvDIXxvHUDlk6rRHKiN1wDMNA5H+EWsSXB/m03Q==}
+    peerDependencies:
+      tailwindcss: '>=4.0.0'
+
+  '@heroui/use-data-scroll-overflow@2.2.13':
+    resolution: {integrity: sha512-zboLXO1pgYdzMUahDcVt5jf+l1jAQ/D9dFqr7AxWLfn6tn7/EgY0f6xIrgWDgJnM0U3hKxVeY13pAeB4AFTqTw==}
+    peerDependencies:
+      react: '>=18 || >=19.0.0-rc.0'
+
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.7':
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
+  '@ibm/plex@6.4.1':
+    resolution: {integrity: sha512-fnsipQywHt3zWvsnlyYKMikcVI7E2fEwpiPnIHFqlbByXVfQfANAAeJk1IV4mNnxhppUIDlhU0TzwYwL++Rn2g==}
+
+  '@ibm/telemetry-js@1.10.2':
+    resolution: {integrity: sha512-F8+/NNUwtm8BuFz18O9KPvIFTFDo8GUSoyhPxPjEpk7nEyEzWGfhIiEPhL00B2NdHRLDSljh3AiCfSnL/tutiQ==}
+    hasBin: true
+
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/utils@3.1.0':
+    resolution: {integrity: sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==}
+
+  '@internationalized/date@3.10.0':
+    resolution: {integrity: sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==}
+
+  '@internationalized/message@3.1.8':
+    resolution: {integrity: sha512-Rwk3j/TlYZhn3HQ6PyXUV0XP9Uv42jqZGNegt0BXlxjE6G3+LwHjbQZAGHhCnCPdaA6Tvd3ma/7QzLlLkJxAWA==}
+
+  '@internationalized/number@3.6.5':
+    resolution: {integrity: sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g==}
+
+  '@internationalized/string@3.2.7':
+    resolution: {integrity: sha512-D4OHBjrinH+PFZPvfCXvG28n2LSykWcJ7GIioQL+ok0LON15SdfoUssoHzzOUmVZLbRoREsQXVzA6r8JKsbP6A==}
+
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
+  '@isaacs/fs-minipass@4.0.1':
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@kwsites/file-exists@1.1.1':
+    resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
+
+  '@kwsites/promise-deferred@1.1.1':
+    resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
+
+  '@malept/cross-spawn-promise@1.1.1':
+    resolution: {integrity: sha512-RTBGWL5FWQcg9orDOCcp4LvItNzUPcyEU9bwaeJX0rJ1IQxzucC48Y0/sQLp/g6t99IQgAlGIaesJS+gTn7tVQ==}
+    engines: {node: '>= 10'}
+
+  '@malept/flatpak-bundler@0.4.0':
+    resolution: {integrity: sha512-9QOtNffcOF/c1seMCDnjckb3R9WHcG34tky+FHpNKKCW0wc/scYLwMtO+ptyGUfMW0/b/n4qRiALlaFHc9Oj7Q==}
+    engines: {node: '>= 10.0.0'}
+
+  '@mermaid-js/parser@0.6.3':
+    resolution: {integrity: sha512-lnjOhe7zyHjc+If7yT4zoedx2vo4sHaTmtkl1+or8BRTnCtDmcTpAjpzDSfCZrshM5bCoz0GyidzadJAH1xobA==}
+
+  '@monaco-editor/loader@1.7.0':
+    resolution: {integrity: sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==}
+
+  '@monaco-editor/react@4.7.0':
+    resolution: {integrity: sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==}
+    peerDependencies:
+      monaco-editor: '>= 0.25.0 < 1'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@opencode-ai/sdk@1.0.133':
+    resolution: {integrity: sha512-kM+VJJ09SU51aruQ78DSy+6CjNc4wMytvGBrZ1IIJ8etUIdGA59wrnIOSxBVs4u/Gb9pjjgsF8sWp59UdLWP9w==}
+
+  '@opencode-ai/sdk@1.0.65':
+    resolution: {integrity: sha512-35aOmXhRHNPlx0ThhYwudfZhP1Sg8y94Wsqm+XsgGfHATllQvQjNVOVPfSp3TW3xCAoJ0/PXJlcYjPS3kZDeNA==}
+
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collapsible@1.1.12':
+    resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.15':
+    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dropdown-menu@2.1.16':
+    resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.3':
+    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.7':
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-menu@2.1.16':
+    resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.11':
+    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-scroll-area@1.2.10':
+    resolution: {integrity: sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.2.6':
+    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.7':
+    resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.10':
+    resolution: {integrity: sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.2.8':
+    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
+  '@react-aria/focus@3.21.2':
+    resolution: {integrity: sha512-JWaCR7wJVggj+ldmM/cb/DXFg47CXR55lznJhZBh4XVqJjMKwaOOqpT5vNN7kpC1wUpXicGNuDnJDN1S/+6dhQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/i18n@3.12.13':
+    resolution: {integrity: sha512-YTM2BPg0v1RvmP8keHenJBmlx8FXUKsdYIEX7x6QWRd1hKlcDwphfjzvt0InX9wiLiPHsT5EoBTpuUk8SXc0Mg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/interactions@3.25.6':
+    resolution: {integrity: sha512-5UgwZmohpixwNMVkMvn9K1ceJe6TzlRlAfuYoQDUuOkk62/JVJNDLAPKIf5YMRc7d2B0rmfgaZLMtbREb0Zvkw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/overlays@3.30.0':
+    resolution: {integrity: sha512-UpjqSjYZx5FAhceWCRVsW6fX1sEwya1fQ/TKkL53FAlLFR8QKuoKqFlmiL43YUFTcGK3UdEOy3cWTleLQwdSmQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/ssr@3.9.10':
+    resolution: {integrity: sha512-hvTm77Pf+pMBhuBm760Li0BVIO38jv1IBws1xFm1NoL26PU+fe+FMW5+VZWyANR6nYL65joaJKZqOdTQMkO9IQ==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/utils@3.31.0':
+    resolution: {integrity: sha512-ABOzCsZrWzf78ysswmguJbx3McQUja7yeGj6/vZo4JVsZNlxAN+E9rs381ExBRI0KzVo6iBTeX5De8eMZPJXig==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/visually-hidden@3.8.28':
+    resolution: {integrity: sha512-KRRjbVVob2CeBidF24dzufMxBveEUtUu7IM+hpdZKB+gxVROoh4XRLPv9SFmaH89Z7D9To3QoykVZoWD0lan6Q==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-stately/flags@3.1.2':
+    resolution: {integrity: sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==}
+
+  '@react-stately/overlays@3.6.20':
+    resolution: {integrity: sha512-YAIe+uI8GUXX8F/0Pzr53YeC5c/bjqbzDFlV8NKfdlCPa6+Jp4B/IlYVjIooBj9+94QvbQdjylegvYWK/iPwlg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-stately/utils@3.10.8':
+    resolution: {integrity: sha512-SN3/h7SzRsusVQjQ4v10LaVsDc81jyyR0DD5HnsQitm/I5WDpaSr2nRHtyloPFU48jlql1XX/S04T2DLQM7Y3g==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-types/button@3.14.1':
+    resolution: {integrity: sha512-D8C4IEwKB7zEtiWYVJ3WE/5HDcWlze9mLWQ5hfsBfpePyWCgO3bT/+wjb/7pJvcAocrkXo90QrMm85LcpBtrpg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-types/overlays@3.9.2':
+    resolution: {integrity: sha512-Q0cRPcBGzNGmC8dBuHyoPR7N3057KTS5g+vZfQ53k8WwmilXBtemFJPLsogJbspuewQ/QJ3o2HYsp2pne7/iNw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-types/shared@3.32.1':
+    resolution: {integrity: sha512-famxyD5emrGGpFuUlgOP6fVW2h/ZaF405G5KDi3zPHzyjAWys/8W6NAVJtNbkCkhedmvL0xOhvt8feGXyXaw5w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@remixicon/react@4.7.0':
+    resolution: {integrity: sha512-ODBQjdbOjnFguCqctYkpDjERXOInNaBnRPDKfZOBvbzExBAwr2BaH/6AHFTg/UAFzBDkwtylfMT8iKPAkLwPLQ==}
+    peerDependencies:
+      react: '>=18.2.0'
+
+  '@rolldown/pluginutils@1.0.0-beta.34':
+    resolution: {integrity: sha512-LyAREkZHP5pMom7c24meKmJCdhf2hEyvam2q0unr3or9ydwDL+DJ8chTF6Av/RFPb3rH8UFBdMzO5MxTZW97oA==}
+
+  '@rollup/rollup-android-arm-eabi@4.50.1':
+    resolution: {integrity: sha512-HJXwzoZN4eYTdD8bVV22DN8gsPCAj3V20NHKOs8ezfXanGpmVPR7kalUHd+Y31IJp9stdB87VKPFbsGY3H/2ag==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.50.1':
+    resolution: {integrity: sha512-PZlsJVcjHfcH53mOImyt3bc97Ep3FJDXRpk9sMdGX0qgLmY0EIWxCag6EigerGhLVuL8lDVYNnSo8qnTElO4xw==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.50.1':
+    resolution: {integrity: sha512-xc6i2AuWh++oGi4ylOFPmzJOEeAa2lJeGUGb4MudOtgfyyjr4UPNK+eEWTPLvmPJIY/pgw6ssFIox23SyrkkJw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.50.1':
+    resolution: {integrity: sha512-2ofU89lEpDYhdLAbRdeyz/kX3Y2lpYc6ShRnDjY35bZhd2ipuDMDi6ZTQ9NIag94K28nFMofdnKeHR7BT0CATw==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.50.1':
+    resolution: {integrity: sha512-wOsE6H2u6PxsHY/BeFHA4VGQN3KUJFZp7QJBmDYI983fgxq5Th8FDkVuERb2l9vDMs1D5XhOrhBrnqcEY6l8ZA==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.50.1':
+    resolution: {integrity: sha512-A/xeqaHTlKbQggxCqispFAcNjycpUEHP52mwMQZUNqDUJFFYtPHCXS1VAG29uMlDzIVr+i00tSFWFLivMcoIBQ==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.50.1':
+    resolution: {integrity: sha512-54v4okehwl5TaSIkpp97rAHGp7t3ghinRd/vyC1iXqXMfjYUTm7TfYmCzXDoHUPTTf36L8pr0E7YsD3CfB3ZDg==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.50.1':
+    resolution: {integrity: sha512-p/LaFyajPN/0PUHjv8TNyxLiA7RwmDoVY3flXHPSzqrGcIp/c2FjwPPP5++u87DGHtw+5kSH5bCJz0mvXngYxw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.50.1':
+    resolution: {integrity: sha512-2AbMhFFkTo6Ptna1zO7kAXXDLi7H9fGTbVaIq2AAYO7yzcAsuTNWPHhb2aTA6GPiP+JXh85Y8CiS54iZoj4opw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.50.1':
+    resolution: {integrity: sha512-Cgef+5aZwuvesQNw9eX7g19FfKX5/pQRIyhoXLCiBOrWopjo7ycfB292TX9MDcDijiuIJlx1IzJz3IoCPfqs9w==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loongarch64-gnu@4.50.1':
+    resolution: {integrity: sha512-RPhTwWMzpYYrHrJAS7CmpdtHNKtt2Ueo+BlLBjfZEhYBhK00OsEqM08/7f+eohiF6poe0YRDDd8nAvwtE/Y62Q==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.50.1':
+    resolution: {integrity: sha512-eSGMVQw9iekut62O7eBdbiccRguuDgiPMsw++BVUg+1K7WjZXHOg/YOT9SWMzPZA+w98G+Fa1VqJgHZOHHnY0Q==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.50.1':
+    resolution: {integrity: sha512-S208ojx8a4ciIPrLgazF6AgdcNJzQE4+S9rsmOmDJkusvctii+ZvEuIC4v/xFqzbuP8yDjn73oBlNDgF6YGSXQ==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-musl@4.50.1':
+    resolution: {integrity: sha512-3Ag8Ls1ggqkGUvSZWYcdgFwriy2lWo+0QlYgEFra/5JGtAd6C5Hw59oojx1DeqcA2Wds2ayRgvJ4qxVTzCHgzg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.50.1':
+    resolution: {integrity: sha512-t9YrKfaxCYe7l7ldFERE1BRg/4TATxIg+YieHQ966jwvo7ddHJxPj9cNFWLAzhkVsbBvNA4qTbPVNsZKBO4NSg==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.50.1':
+    resolution: {integrity: sha512-MCgtFB2+SVNuQmmjHf+wfI4CMxy3Tk8XjA5Z//A0AKD7QXUYFMQcns91K6dEHBvZPCnhJSyDWLApk40Iq/H3tA==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.50.1':
+    resolution: {integrity: sha512-nEvqG+0jeRmqaUMuwzlfMKwcIVffy/9KGbAGyoa26iu6eSngAYQ512bMXuqqPrlTyfqdlB9FVINs93j534UJrg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-openharmony-arm64@4.50.1':
+    resolution: {integrity: sha512-RDsLm+phmT3MJd9SNxA9MNuEAO/J2fhW8GXk62G/B4G7sLVumNFbRwDL6v5NrESb48k+QMqdGbHgEtfU0LCpbA==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.50.1':
+    resolution: {integrity: sha512-hpZB/TImk2FlAFAIsoElM3tLzq57uxnGYwplg6WDyAxbYczSi8O2eQ+H2Lx74504rwKtZ3N2g4bCUkiamzS6TQ==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.50.1':
+    resolution: {integrity: sha512-SXjv8JlbzKM0fTJidX4eVsH+Wmnp0/WcD8gJxIZyR6Gay5Qcsmdbi9zVtnbkGPG8v2vMR1AD06lGWy5FLMcG7A==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.50.1':
+    resolution: {integrity: sha512-StxAO/8ts62KZVRAm4JZYq9+NqNsV7RvimNK+YM7ry//zebEH6meuugqW/P5OFUCjyQgui+9fUxT6d5NShvMvA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@shikijs/core@3.19.0':
+    resolution: {integrity: sha512-L7SrRibU7ZoYi1/TrZsJOFAnnHyLTE1SwHG1yNWjZIVCqjOEmCSuK2ZO9thnRbJG6TOkPp+Z963JmpCNw5nzvA==}
+
+  '@shikijs/engine-javascript@3.19.0':
+    resolution: {integrity: sha512-ZfWJNm2VMhKkQIKT9qXbs76RRcT0SF/CAvEz0+RkpUDAoDaCx0uFdCGzSRiD9gSlhm6AHkjdieOBJMaO2eC1rQ==}
+
+  '@shikijs/engine-oniguruma@3.19.0':
+    resolution: {integrity: sha512-1hRxtYIJfJSZeM5ivbUXv9hcJP3PWRo5prG/V2sWwiubUKTa+7P62d2qxCW8jiVFX4pgRHhnHNp+qeR7Xl+6kg==}
+
+  '@shikijs/langs@3.19.0':
+    resolution: {integrity: sha512-dBMFzzg1QiXqCVQ5ONc0z2ebyoi5BKz+MtfByLm0o5/nbUu3Iz8uaTCa5uzGiscQKm7lVShfZHU1+OG3t5hgwg==}
+
+  '@shikijs/themes@3.19.0':
+    resolution: {integrity: sha512-H36qw+oh91Y0s6OlFfdSuQ0Ld+5CgB/VE6gNPK+Hk4VRbVG/XQgkjnt4KzfnnoO6tZPtKJKHPjwebOCfjd6F8A==}
+
+  '@shikijs/types@3.19.0':
+    resolution: {integrity: sha512-Z2hdeEQlzuntf/BZpFG8a+Fsw9UVXdML7w0o3TgSXV3yNESGon+bs9ITkQb3Ki7zxoXOOu5oJWqZ2uto06V9iQ==}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+
+  '@sindresorhus/is@4.6.0':
+    resolution: {integrity: sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==}
+    engines: {node: '>=10'}
+
+  '@swc/helpers@0.5.17':
+    resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
+
+  '@szmarczak/http-timer@4.0.6':
+    resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==}
+    engines: {node: '>=10'}
+
+  '@tailwindcss/node@4.1.13':
+    resolution: {integrity: sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==}
+
+  '@tailwindcss/oxide-android-arm64@4.1.13':
+    resolution: {integrity: sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.13':
+    resolution: {integrity: sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.13':
+    resolution: {integrity: sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.13':
+    resolution: {integrity: sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.13':
+    resolution: {integrity: sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.13':
+    resolution: {integrity: sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.13':
+    resolution: {integrity: sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.13':
+    resolution: {integrity: sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.13':
+    resolution: {integrity: sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.13':
+    resolution: {integrity: sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.13':
+    resolution: {integrity: sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.13':
+    resolution: {integrity: sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.13':
+    resolution: {integrity: sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.1.13':
+    resolution: {integrity: sha512-HLgx6YSFKJT7rJqh9oJs/TkBFhxuMOfUKSBEPYwV+t78POOBsdQ7crhZLzwcH3T0UyUuOzU/GK5pk5eKr3wCiQ==}
+
+  '@tauri-apps/api@2.9.0':
+    resolution: {integrity: sha512-qD5tMjh7utwBk9/5PrTA/aGr3i5QaJ/Mlt7p8NilQ45WgbifUNPyKWsA63iQ8YfQq6R8ajMapU+/Q8nMcPRLNw==}
+
+  '@tauri-apps/api@2.9.1':
+    resolution: {integrity: sha512-IGlhP6EivjXHepbBic618GOmiWe4URJiIeZFlB7x3czM0yDHHYviH1Xvoiv4FefdkQtn6v7TuwWCRfOGdnVUGw==}
+
+  '@tauri-apps/cli-darwin-arm64@2.9.5':
+    resolution: {integrity: sha512-P5XDyCwq3VbWGAplyfP/bgmuUITVDcypxgZUyX45SM7HbU1Nrkk0cNK1HCOkuNBAVVbWen2GUNWah/AiupHHXg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tauri-apps/cli-darwin-x64@2.9.5':
+    resolution: {integrity: sha512-JC9UfQ2ZKavx60dnNxsWztRF3oUH3dgPwN1WJ3/5RUy2aNwD/vXqvJAfNFZ4GWeQpoQ+PqJxduev0U4OMQonnA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tauri-apps/cli-linux-arm-gnueabihf@2.9.5':
+    resolution: {integrity: sha512-iCQm2Uvx8AheghfG/QUv1y8Ga9yquJt6xJwH1uF0x5KfmJmwBi8pHBvB924dDi59PS84qTdIBeJejQT00QX3Iw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tauri-apps/cli-linux-arm64-gnu@2.9.5':
+    resolution: {integrity: sha512-b6AW8Gr5nQOQIYH0TsUev7rEThGHIvsx192eElOmOz/dh33J4pninHK32laMj2hzHMJ27qmDq5vANL+wrFo9sg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tauri-apps/cli-linux-arm64-musl@2.9.5':
+    resolution: {integrity: sha512-/gRBMnphS9E8riZ0LIbBhZ9Oy16A2rx/g3DGR0DcDBvUtkLfbL0lMu4s+sY85nkn9An15+cZ1ZK6d7AIqWahLA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tauri-apps/cli-linux-riscv64-gnu@2.9.5':
+    resolution: {integrity: sha512-NOzjPF9YIBodjdkFcJmqINT0k3YDoR5ANM/jg6Z6s3Zmk8ScN6inI60jTxcfgfWyITiKsPy7GJyYou3Cm2XNzw==}
+    engines: {node: '>= 10'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@tauri-apps/cli-linux-x64-gnu@2.9.5':
+    resolution: {integrity: sha512-SfGbwgvTphM5y+J91NyU/psleMUlyyPkZyDCFg8WU1HX8DpKUT3Vwhb/W1xpUBGb56tJgGCO46FCVkr8w4Areg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tauri-apps/cli-linux-x64-musl@2.9.5':
+    resolution: {integrity: sha512-ZfeoiASAOGDzyvN+TDAg8A1pCeS082h4uc0vZKvtWUN+9QBIMfz0yJwltAv+SN/afap6NS6DVkbPV3UVuI9V5A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tauri-apps/cli-win32-arm64-msvc@2.9.5':
+    resolution: {integrity: sha512-ulg7irow+ekjaK4inFHVq7m1KQebDSYNb17DFKV+h+x7qnLZymz2gHK7df2u4YyEjqvzwRd3AJpU3HNxRurSFQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tauri-apps/cli-win32-ia32-msvc@2.9.5':
+    resolution: {integrity: sha512-6lF0k/Qduhn1Z3IOXlp2ts8jNOMIX4cK4Fbk3axGeX7LMcVVbOSEAFwbTqS8BKZDFac0WRS8N1C96+Ms5LOS1Q==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@tauri-apps/cli-win32-x64-msvc@2.9.5':
+    resolution: {integrity: sha512-Vg50U74x1A4b2iBVtDcAVPbI1XVuzSmwlduuBM1VewxtRaVj5GDzWnYtBcnuIk+VGzNApRDfDhraAXGaW2a/Gw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tauri-apps/cli@2.9.5':
+    resolution: {integrity: sha512-z88tX6O6kwTgMjYozhNGbehzQyBazgXejyH784CwSfBOWm06xFcogd0PY/jhcPsqzJF9kLRIkmlQy+cqdrioOQ==}
+    engines: {node: '>= 10'}
+    hasBin: true
+
+  '@tauri-apps/plugin-dialog@2.4.2':
+    resolution: {integrity: sha512-lNIn5CZuw8WZOn8zHzmFmDSzg5zfohWoa3mdULP0YFh/VogVdMVWZPcWSHlydsiJhRQYaTNSYKN7RmZKE2lCYQ==}
+
+  '@tauri-apps/plugin-notification@2.3.3':
+    resolution: {integrity: sha512-Zw+ZH18RJb41G4NrfHgIuofJiymusqN+q8fGUIIV7vyCH+5sSn5coqRv/MWB9qETsUs97vmU045q7OyseCV3Qg==}
+
+  '@tauri-apps/plugin-process@2.3.1':
+    resolution: {integrity: sha512-nCa4fGVaDL/B9ai03VyPOjfAHRHSBz5v6F/ObsB73r/dA3MHHhZtldaDMIc0V/pnUw9ehzr2iEG+XkSEyC0JJA==}
+
+  '@tauri-apps/plugin-updater@2.9.0':
+    resolution: {integrity: sha512-j++sgY8XpeDvzImTrzWA08OqqGqgkNyxczLD7FjNJJx/uXxMZFz5nDcfkyoI/rCjYuj2101Tci/r/HFmOmoxCg==}
+
+  '@tootallnate/once@2.0.0':
+    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
+    engines: {node: '>= 10'}
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
+  '@types/cacheable-request@6.0.3':
+    resolution: {integrity: sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==}
+
+  '@types/d3-array@3.2.2':
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+
+  '@types/d3-axis@3.0.6':
+    resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==}
+
+  '@types/d3-brush@3.0.6':
+    resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==}
+
+  '@types/d3-chord@3.0.6':
+    resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-contour@3.0.6':
+    resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==}
+
+  '@types/d3-delaunay@6.0.4':
+    resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
+
+  '@types/d3-dispatch@3.0.7':
+    resolution: {integrity: sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==}
+
+  '@types/d3-drag@3.0.7':
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+
+  '@types/d3-dsv@3.0.7':
+    resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-fetch@3.0.7':
+    resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==}
+
+  '@types/d3-force@3.0.10':
+    resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
+
+  '@types/d3-format@3.0.4':
+    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
+
+  '@types/d3-geo@3.1.0':
+    resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
+
+  '@types/d3-hierarchy@3.1.7':
+    resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-polygon@3.0.2':
+    resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==}
+
+  '@types/d3-quadtree@3.0.6':
+    resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==}
+
+  '@types/d3-random@3.0.3':
+    resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==}
+
+  '@types/d3-scale-chromatic@3.1.0':
+    resolution: {integrity: sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-selection@3.0.11':
+    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
+
+  '@types/d3-shape@3.1.7':
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+
+  '@types/d3-time-format@4.0.3':
+    resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/d3-transition@3.0.9':
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+
+  '@types/d3-zoom@3.0.8':
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+
+  '@types/d3@7.4.3':
+    resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==}
+
+  '@types/debug@4.1.12':
+    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
+
+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/fs-extra@9.0.13':
+    resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
+
+  '@types/geojson@7946.0.16':
+    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
+
+  '@types/hast@2.3.10':
+    resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
+
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
+  '@types/http-cache-semantics@4.0.4':
+    resolution: {integrity: sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==}
+
+  '@types/http-proxy@1.17.16':
+    resolution: {integrity: sha512-sdWoUajOB1cd0A8cRRQ1cfyWNbmFKLAqBB89Y8x5iYyG/mkJHc0YUH8pdWBy2omi9qtCpiIgGjuwO0dQST2l5w==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/katex@0.16.7':
+    resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==}
+
+  '@types/keyv@3.1.4':
+    resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
+
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
+  '@types/node@22.18.10':
+    resolution: {integrity: sha512-anNG/V/Efn/YZY4pRzbACnKxNKoBng2VTFydVu8RRs5hQjikP8CQfaeAV59VFSCzKNp90mXiVXW2QzV56rwMrg==}
+
+  '@types/node@24.3.1':
+    resolution: {integrity: sha512-3vXmQDXy+woz+gnrTvuvNrPzekOi+Ds0ReMxw0LzBiK3a+1k0kQn9f2NWk+lgD4rJehFUmYy2gMhJ2ZI+7YP9g==}
+
+  '@types/plist@3.0.5':
+    resolution: {integrity: sha512-E6OCaRmAe4WDmWNsL/9RMqdkkzDCY1etutkflWk4c+AcjDU07Pcz1fQwTX0TQz+Pxqn9i4L1TU3UFpjnrcDgxA==}
+
+  '@types/react-dom@19.1.9':
+    resolution: {integrity: sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==}
+    peerDependencies:
+      '@types/react': ^19.0.0
+
+  '@types/react-syntax-highlighter@15.5.13':
+    resolution: {integrity: sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==}
+
+  '@types/react@19.1.12':
+    resolution: {integrity: sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==}
+
+  '@types/responselike@1.0.3':
+    resolution: {integrity: sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==}
+
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
+  '@types/verror@1.10.11':
+    resolution: {integrity: sha512-RlDm9K7+o5stv0Co8i8ZRGxDbrTxhJtgjqjFyVh/tXQyl/rYtTKlnTvZ88oSTeYREWurwx20Js4kTuKCsFkUtg==}
+
+  '@types/yauzl@2.10.3':
+    resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
+
+  '@typescript-eslint/eslint-plugin@8.43.0':
+    resolution: {integrity: sha512-8tg+gt7ENL7KewsKMKDHXR1vm8tt9eMxjJBYINf6swonlWgkYn5NwyIgXpbbDxTNU5DgpDFfj95prcTq2clIQQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.43.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/parser@8.43.0':
+    resolution: {integrity: sha512-B7RIQiTsCBBmY+yW4+ILd6mF5h1FUwJsVvpqkrgpszYifetQ2Ke+Z4u6aZh0CblkUGIdR59iYVyXqqZGkZ3aBw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/project-service@8.43.0':
+    resolution: {integrity: sha512-htB/+D/BIGoNTQYffZw4uM4NzzuolCoaA/BusuSIcC8YjmBYQioew5VUZAYdAETPjeed0hqCaW7EHg+Robq8uw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/scope-manager@8.43.0':
+    resolution: {integrity: sha512-daSWlQ87ZhsjrbMLvpuuMAt3y4ba57AuvadcR7f3nl8eS3BjRc8L9VLxFLk92RL5xdXOg6IQ+qKjjqNEimGuAg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.43.0':
+    resolution: {integrity: sha512-ALC2prjZcj2YqqL5X/bwWQmHA2em6/94GcbB/KKu5SX3EBDOsqztmmX1kMkvAJHzxk7TazKzJfFiEIagNV3qEA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/type-utils@8.43.0':
+    resolution: {integrity: sha512-qaH1uLBpBuBBuRf8c1mLJ6swOfzCXryhKND04Igr4pckzSEW9JX5Aw9AgW00kwfjWJF0kk0ps9ExKTfvXfw4Qg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/types@8.43.0':
+    resolution: {integrity: sha512-vQ2FZaxJpydjSZJKiSW/LJsabFFvV7KgLC5DiLhkBcykhQj8iK9BOaDmQt74nnKdLvceM5xmhaTF+pLekrxEkw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.43.0':
+    resolution: {integrity: sha512-7Vv6zlAhPb+cvEpP06WXXy/ZByph9iL6BQRBDj4kmBsW98AqEeQHlj/13X+sZOrKSo9/rNKH4Ul4f6EICREFdw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/utils@8.43.0':
+    resolution: {integrity: sha512-S1/tEmkUeeswxd0GGcnwuVQPFWo8NzZTOMxCvw8BX7OMxnNae+i8Tm7REQen/SwUIPoPqfKn7EaZ+YLpiB3k9g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/visitor-keys@8.43.0':
+    resolution: {integrity: sha512-T+S1KqRD4sg/bHfLwrpF/K3gQLBM1n7Rp7OjjikjTEssI2YJzQpi5WXoynOaQ93ERIuq3O8RBTOUYDKszUCEHw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+
+  '@vitejs/plugin-react@5.0.2':
+    resolution: {integrity: sha512-tmyFgixPZCx2+e6VO9TNITWcCQl8+Nl/E8YbAyPVv85QCc7/A3JrdfG2A8gIzvVhWuzMOVrFW1aReaNxrI6tbw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+
+  '@xmldom/xmldom@0.8.11':
+    resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
+    engines: {node: '>=10.0.0'}
+
+  '@xterm/addon-fit@0.10.0':
+    resolution: {integrity: sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==}
+    peerDependencies:
+      '@xterm/xterm': ^5.0.0
+
+  '@xterm/xterm@5.5.0':
+    resolution: {integrity: sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==}
+
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv-keywords@3.5.2:
+    resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
+    peerDependencies:
+      ajv: ^6.9.1
+
+  ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+
+  ajv@8.17.1:
+    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@6.2.3:
+    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
+    engines: {node: '>=12'}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  app-builder-bin@4.0.0:
+    resolution: {integrity: sha512-xwdG0FJPQMe0M0UA4Tz0zEB8rBJTRA5a476ZawAqiBkMv16GRK5xpXThOjMaEOFnZ6zabejjG4J3da0SXG63KA==}
+
+  app-builder-lib@24.13.3:
+    resolution: {integrity: sha512-FAzX6IBit2POXYGnTCT8YHFO/lr5AapAII6zzhQO3Rw4cEDOgK+t1xhLc5tNcKlicTHlo9zxIwnYCX9X2DLkig==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      dmg-builder: 24.13.3
+      electron-builder-squirrel-windows: 24.13.3
+
+  archiver-utils@2.1.0:
+    resolution: {integrity: sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==}
+    engines: {node: '>= 6'}
+
+  archiver-utils@3.0.4:
+    resolution: {integrity: sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==}
+    engines: {node: '>= 10'}
+
+  archiver@5.3.2:
+    resolution: {integrity: sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==}
+    engines: {node: '>= 10'}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
+  assert-plus@1.0.0:
+    resolution: {integrity: sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==}
+    engines: {node: '>=0.8'}
+
+  astral-regex@2.0.0:
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
+
+  async-exit-hook@2.0.1:
+    resolution: {integrity: sha512-NW2cX8m1Q7KPA7a5M2ULQeZ2wR5qI5PAbw5L0UOMxdioVk9PMZ0h1TmyZEkPYrCvYjDlFICusOu1dlEKAAeXBw==}
+    engines: {node: '>=0.12.0'}
+
+  async@3.2.6:
+    resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  at-least-node@1.0.0:
+    resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
+    engines: {node: '>= 4.0.0'}
+
+  atomically@2.0.3:
+    resolution: {integrity: sha512-kU6FmrwZ3Lx7/7y3hPS5QnbJfaohcIul5fGqf7ok+4KklIEk9tJ0C2IQPdacSbVUWv6zVHXEBWoWd6NrVMT7Cw==}
+
+  autoprefixer@10.4.21:
+    resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  bl@4.1.0:
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+
+  bluebird-lst@1.0.9:
+    resolution: {integrity: sha512-7B1Rtx82hjnSD4PGLAjVWeYH3tHAcVUmChh85a3lltKQm6FresXh9ErQo6oAv6CqxttczC3/kEg8SY5NluPuUw==}
+
+  bluebird@3.7.2:
+    resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
+
+  body-parser@2.2.0:
+    resolution: {integrity: sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==}
+    engines: {node: '>=18'}
+
+  boolean@3.2.0:
+    resolution: {integrity: sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
+  brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+
+  brace-expansion@2.0.2:
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.25.4:
+    resolution: {integrity: sha512-4jYpcjabC606xJ3kw2QwGEZKX0Aw7sgQdZCvIK9dhVSPh76BKo+C+btT1RRofH7B+8iNpEbgGNVWiLki5q93yg==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  buffer-crc32@0.2.13:
+    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
+
+  buffer-equal@1.0.1:
+    resolution: {integrity: sha512-QoV3ptgEaQpvVwbXdSO39iqPQTCxSF7A5U99AxbHYqUdCizL/lH2Z0A2y6nbZucxMEOtNyZfG2s6gsVugGpKkg==}
+    engines: {node: '>=0.4'}
+
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
+  buffer@5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+
+  builder-util-runtime@9.2.4:
+    resolution: {integrity: sha512-upp+biKpN/XZMLim7aguUyW8s0FUpDvOtK6sbanMFDAMBzpHDqdhgVYm6zc9HJ6nWo7u2Lxk60i2M6Jd3aiNrA==}
+    engines: {node: '>=12.0.0'}
+
+  builder-util@24.13.1:
+    resolution: {integrity: sha512-NhbCSIntruNDTOVI9fdXz0dihaqX2YuE1D6zZMrwiErzH4ELZHE6mdiB40wEgZNprDia+FghRFgKoAqMZRRjSA==}
+
+  bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+
+  cacheable-lookup@5.0.4:
+    resolution: {integrity: sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==}
+    engines: {node: '>=10.6.0'}
+
+  cacheable-request@7.0.4:
+    resolution: {integrity: sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==}
+    engines: {node: '>=8'}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  caniuse-lite@1.0.30001741:
+    resolution: {integrity: sha512-QGUGitqsc8ARjLdgAfxETDhRbJ0REsP6O3I96TAth/mVjh2cYzN2u+3AzPP3aVSm2FehEItaJw1xd+IGBXWeSw==}
+
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@1.1.4:
+    resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  character-entities@1.2.4:
+    resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
+
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
+  character-reference-invalid@1.1.4:
+    resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
+
+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+
+  chevrotain-allstar@0.3.1:
+    resolution: {integrity: sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw==}
+    peerDependencies:
+      chevrotain: ^11.0.0
+
+  chevrotain@11.0.3:
+    resolution: {integrity: sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==}
+
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
+  chownr@2.0.0:
+    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
+    engines: {node: '>=10'}
+
+  chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
+
+  chromium-pickle-js@0.2.0:
+    resolution: {integrity: sha512-1R5Fho+jBq0DDydt+/vHWj5KJNJCKdARKOCwZUen84I5BreWoLqRLANH1U87eJy1tiASPtMnGqJJq0ZsLoRPOw==}
+
+  ci-info@3.9.0:
+    resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
+    engines: {node: '>=8'}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  cli-truncate@2.1.0:
+    resolution: {integrity: sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==}
+    engines: {node: '>=8'}
+
+  cli-truncate@4.0.0:
+    resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
+    engines: {node: '>=18'}
+
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
+  clone-response@1.0.3:
+    resolution: {integrity: sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==}
+
+  clsx@1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  color-string@1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+
+  color2k@2.0.3:
+    resolution: {integrity: sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==}
+
+  color@4.2.3:
+    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
+    engines: {node: '>=12.5.0'}
+
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  comma-separated-tokens@1.0.8:
+    resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==}
+
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
+  commander@5.1.0:
+    resolution: {integrity: sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==}
+    engines: {node: '>= 6'}
+
+  commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+
+  commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+
+  compare-version@0.1.2:
+    resolution: {integrity: sha512-pJDh5/4wrEnXX/VWRZvruAGHkzKdr46z11OlTPN+VrATlWWhSKewNCJ1futCO5C7eJB3nPMFZA1LeYtcFboZ2A==}
+    engines: {node: '>=0.10.0'}
+
+  compress-commons@4.1.2:
+    resolution: {integrity: sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==}
+    engines: {node: '>= 10'}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  concurrently@9.2.1:
+    resolution: {integrity: sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  conf@15.0.2:
+    resolution: {integrity: sha512-JBSrutapCafTrddF9dH3lc7+T2tBycGF4uPkI4Js+g4vLLEhG6RZcFi3aJd5zntdf5tQxAejJt8dihkoQ/eSJw==}
+    engines: {node: '>=20'}
+
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  config-file-ts@0.2.6:
+    resolution: {integrity: sha512-6boGVaglwblBgJqGyxm4+xCmEGcWgnWHSWHY5jad58awQhB6gftq0G8HbzU39YqCIYHMLAiL1yjwiZ36m/CL8w==}
+
+  content-disposition@1.0.0:
+    resolution: {integrity: sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==}
+    engines: {node: '>= 0.6'}
+
+  content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  cookie-signature@1.2.2:
+    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
+    engines: {node: '>=6.6.0'}
+
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
+  core-util-is@1.0.2:
+    resolution: {integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==}
+
+  cors@2.8.5:
+    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
+    engines: {node: '>= 0.10'}
+
+  cose-base@1.0.3:
+    resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==}
+
+  cose-base@2.2.0:
+    resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==}
+
+  crc-32@1.2.2:
+    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+
+  crc32-stream@4.0.3:
+    resolution: {integrity: sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==}
+    engines: {node: '>= 10'}
+
+  crc@3.8.0:
+    resolution: {integrity: sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==}
+
+  cross-env@7.0.3:
+    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
+    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
+    hasBin: true
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  cytoscape-cose-bilkent@4.1.0:
+    resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+
+  cytoscape-fcose@2.2.0:
+    resolution: {integrity: sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+
+  cytoscape@3.33.1:
+    resolution: {integrity: sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==}
+    engines: {node: '>=0.10'}
+
+  d3-array@2.12.1:
+    resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-axis@3.0.0:
+    resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
+    engines: {node: '>=12'}
+
+  d3-brush@3.0.0:
+    resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
+    engines: {node: '>=12'}
+
+  d3-chord@3.0.1:
+    resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-contour@4.0.2:
+    resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==}
+    engines: {node: '>=12'}
+
+  d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-dsv@3.0.1:
+    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-fetch@3.0.1:
+    resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
+    engines: {node: '>=12'}
+
+  d3-force@3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+
+  d3-geo@3.1.1:
+    resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
+    engines: {node: '>=12'}
+
+  d3-hierarchy@3.1.2:
+    resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@1.0.9:
+    resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-polygon@3.0.1:
+    resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==}
+    engines: {node: '>=12'}
+
+  d3-quadtree@3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+
+  d3-random@3.0.1:
+    resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==}
+    engines: {node: '>=12'}
+
+  d3-sankey@0.12.3:
+    resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==}
+
+  d3-scale-chromatic@3.1.0:
+    resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@1.3.7:
+    resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
+  d3@7.9.0:
+    resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
+    engines: {node: '>=12'}
+
+  dagre-d3-es@7.0.13:
+    resolution: {integrity: sha512-efEhnxpSuwpYOKRm/L5KbqoZmNNukHa/Flty4Wp62JRvgH2ojwVgPgdYyr4twpieZnyRDdIH7PY2mopX26+j2Q==}
+
+  dayjs@1.11.19:
+    resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
+
+  debounce-fn@6.0.0:
+    resolution: {integrity: sha512-rBMW+F2TXryBwB54Q0d8drNEI+TfoS9JpNTAoVpukbWEhjXQq4rySFYLaqXMFXwdv61Zb2OHtj5bviSoimqxRQ==}
+    engines: {node: '>=18'}
+
+  debug@4.4.1:
+    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
+  decode-named-character-reference@1.2.0:
+    resolution: {integrity: sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==}
+
+  decompress-response@6.0.0:
+    resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
+    engines: {node: '>=10'}
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
+  defer-to-connect@2.0.1:
+    resolution: {integrity: sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==}
+    engines: {node: '>=10'}
+
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+
+  define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
+
+  delaunator@5.0.1:
+    resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  detect-libc@2.0.4:
+    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
+    engines: {node: '>=8'}
+
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
+  detect-node@2.1.0:
+    resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
+
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
+  dir-compare@3.3.0:
+    resolution: {integrity: sha512-J7/et3WlGUCxjdnD3HAAzQ6nsnc0WL6DD7WcwJb7c39iH1+AWfg+9OqzJNaI6PkBwBvm1mhZNL9iY/nRiZXlPg==}
+
+  dmg-builder@24.13.3:
+    resolution: {integrity: sha512-rcJUkMfnJpfCboZoOOPf4L29TRtEieHNOeAbYPWPxlaBw/Z1RKrRA86dOI9rwaI4tQSc/RD82zTNHprfUHXsoQ==}
+
+  dmg-license@1.0.11:
+    resolution: {integrity: sha512-ZdzmqwKmECOWJpqefloC5OJy1+WZBBse5+MR88z9g9Zn4VY+WYUkAyojmhzJckH5YbbZGcYIuGAkY5/Ys5OM2Q==}
+    engines: {node: '>=8'}
+    os: [darwin]
+    hasBin: true
+
+  dompurify@3.2.7:
+    resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
+
+  dot-prop@10.1.0:
+    resolution: {integrity: sha512-MVUtAugQMOff5RnBy2d9N31iG0lNwg1qAoAOn7pOK5wf94WIaE3My2p3uwTQuvS2AcqchkcR3bHByjaM0mmi7Q==}
+    engines: {node: '>=20'}
+
+  dotenv-expand@5.1.0:
+    resolution: {integrity: sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==}
+
+  dotenv@9.0.2:
+    resolution: {integrity: sha512-I9OvvrHp4pIARv4+x9iuewrWycX6CcZtoAu1XrzPxc5UygMJXJZYmBsynku8IkrJwgypE5DGNjDPmPRhDCptUg==}
+    engines: {node: '>=10'}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+
+  ejs@3.1.10:
+    resolution: {integrity: sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+
+  electron-builder-squirrel-windows@24.13.3:
+    resolution: {integrity: sha512-oHkV0iogWfyK+ah9ZIvMDpei1m9ZRpdXcvde1wTpra2U8AFDNNpqJdnin5z+PM1GbQ5BoaKCWas2HSjtR0HwMg==}
+
+  electron-builder@24.13.3:
+    resolution: {integrity: sha512-yZSgVHft5dNVlo31qmJAe4BVKQfFdwpRw7sFp1iQglDRCDD6r22zfRJuZlhtB5gp9FHUxCMEoWGq10SkCnMAIg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  electron-context-menu@4.1.1:
+    resolution: {integrity: sha512-kebXha4K2DmR7zrKpO8muzXlUAdhgqQIT7DpPeT4cAKZugwCB/NbuEuT+1SDjOH9vXJYjWK2UQuFvnVw0u0lHg==}
+    engines: {node: '>=18'}
+
+  electron-dl@4.0.0:
+    resolution: {integrity: sha512-USiB9816d2JzKv0LiSbreRfTg5lDk3lWh0vlx/gugCO92ZIJkHVH0UM18EHvKeadErP6Xn4yiTphWzYfbA2Ong==}
+    engines: {node: '>=18'}
+
+  electron-is-dev@3.0.1:
+    resolution: {integrity: sha512-8TjjAh8Ec51hUi3o4TaU0mD3GMTOESi866oRNavj9A3IQJ7pmv+MJVmdZBFGw4GFT36X7bkqnuDNYvkQgvyI8Q==}
+    engines: {node: '>=18'}
+
+  electron-publish@24.13.1:
+    resolution: {integrity: sha512-2ZgdEqJ8e9D17Hwp5LEq5mLQPjqU3lv/IALvgp+4W8VeNhryfGhYEQC/PgDPMrnWUp+l60Ou5SJLsu+k4mhQ8A==}
+
+  electron-store@11.0.2:
+    resolution: {integrity: sha512-4VkNRdN+BImL2KcCi41WvAYbh6zLX5AUTi4so68yPqiItjbgTjqpEnGAqasgnG+lB6GuAyUltKwVopp6Uv+gwQ==}
+    engines: {node: '>=20'}
+
+  electron-to-chromium@1.5.217:
+    resolution: {integrity: sha512-Pludfu5iBxp9XzNl0qq2G87hdD17ZV7h5T4n6rQXDi3nCyloBV3jreE9+8GC6g4X/5yxqVgXEURpcLtM0WS4jA==}
+
+  electron@38.2.0:
+    resolution: {integrity: sha512-Cw5Mb+N5NxsG0Hc1qr8I65Kt5APRrbgTtEEn3zTod30UNJRnAE1xbGk/1NOaDn3ODzI/MYn6BzT9T9zreP7xWA==}
+    engines: {node: '>= 12.20.55'}
+    hasBin: true
+
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
+
+  end-of-stream@1.4.5:
+    resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
+
+  enhanced-resolve@5.18.3:
+    resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
+    engines: {node: '>=10.13.0'}
+
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
+  env-paths@3.0.0:
+    resolution: {integrity: sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  err-code@2.0.3:
+    resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  es6-error@4.1.1:
+    resolution: {integrity: sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==}
+
+  esbuild@0.25.9:
+    resolution: {integrity: sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-goat@4.0.0:
+    resolution: {integrity: sha512-2Sd4ShcWxbx6OY1IHyla/CVNwvg7XwZVoXZHcSu9w9SReNP1EzzD5T8NWKIR38fIqEns9kDWKUQTXXAmlDrdPg==}
+    engines: {node: '>=12'}
+
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
+  eslint-plugin-react-hooks@5.2.0:
+    resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+
+  eslint-plugin-react-refresh@0.4.20:
+    resolution: {integrity: sha512-XpbHQ2q5gUF8BGOX4dHe+71qoirYMhApEPZ7sfhF/dNnOF1UXnCMGZf79SFTBO7Bz5YEIT4TMieSlJBWhP9WBA==}
+    peerDependencies:
+      eslint: '>=8.40'
+
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.35.0:
+    resolution: {integrity: sha512-QePbBFMJFjgmlE+cXAlbHZbHpdFVS2E/6vzCy7aKlebddvl1vadiC4JFV5u/wqTkNUwEV8WrQi257jf5f06hrg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+
+  eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+
+  express@5.1.0:
+    resolution: {integrity: sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==}
+    engines: {node: '>= 18'}
+
+  ext-list@2.2.2:
+    resolution: {integrity: sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==}
+    engines: {node: '>=0.10.0'}
+
+  ext-name@5.0.0:
+    resolution: {integrity: sha512-yblEwXAbGv1VQDmow7s38W77hzAgJAO50ztBLMcUyUBfxv1HC+LGwtiEN+Co6LtlqT/5uwVOxsD4TNIilWhwdQ==}
+    engines: {node: '>=4'}
+
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
+  extract-zip@2.0.1:
+    resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
+    engines: {node: '>= 10.17.0'}
+    hasBin: true
+
+  extsprintf@1.4.1:
+    resolution: {integrity: sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==}
+    engines: {'0': node >=0.6.0}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fast-uri@3.1.0:
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
+
+  fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+
+  fault@1.0.4:
+    resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==}
+
+  fd-slicer@1.1.0:
+    resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  filelist@1.0.4:
+    resolution: {integrity: sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  finalhandler@2.1.0:
+    resolution: {integrity: sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==}
+    engines: {node: '>= 0.8'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flat@5.0.2:
+    resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==}
+    hasBin: true
+
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  follow-redirects@1.15.11:
+    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
+  form-data@4.0.4:
+    resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
+    engines: {node: '>= 6'}
+
+  format@0.2.2:
+    resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
+    engines: {node: '>=0.4.x'}
+
+  forwarded@0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
+
+  fraction.js@4.3.7:
+    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+
+  framer-motion@12.23.24:
+    resolution: {integrity: sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
+
+  fs-constants@1.0.0:
+    resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
+
+  fs-extra@10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+
+  fs-extra@8.1.0:
+    resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
+    engines: {node: '>=6 <7 || >=8'}
+
+  fs-extra@9.1.0:
+    resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
+    engines: {node: '>=10'}
+
+  fs-minipass@2.1.0:
+    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
+    engines: {node: '>= 8'}
+
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-east-asian-width@1.4.0:
+    resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
+    engines: {node: '>=18'}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  get-stream@5.2.0:
+    resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
+    engines: {node: '>=8'}
+
+  get-tsconfig@4.10.1:
+    resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
+
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
+
+  global-agent@3.0.0:
+    resolution: {integrity: sha512-PT6XReJ+D07JvGoxQMkT6qji/jVNfX/h364XHZOWeRzy64sSFr+xJ5OX7LI3b4MPQzdL4H8Y8M0xzPpsVMwA8Q==}
+    engines: {node: '>=10.0'}
+
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globals@16.4.0:
+    resolution: {integrity: sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==}
+    engines: {node: '>=18'}
+
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  got@11.8.6:
+    resolution: {integrity: sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==}
+    engines: {node: '>=10.19.0'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+
+  hachure-fill@0.5.2:
+    resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==}
+
+  has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  hast-util-from-dom@5.0.1:
+    resolution: {integrity: sha512-N+LqofjR2zuzTjCPzyDUdSshy4Ma6li7p/c3pA78uTwzFgENbgbUrm2ugwsOdcjI1muO+o6Dgzp9p8WHtn/39Q==}
+
+  hast-util-from-html-isomorphic@2.0.0:
+    resolution: {integrity: sha512-zJfpXq44yff2hmE0XmwEOzdWin5xwH+QIhMLOScpX91e/NSGPsAzNCvLQDIEPyO2TXi+lBmU6hjLIhV8MwP2kw==}
+
+  hast-util-from-html@2.0.3:
+    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
+
+  hast-util-from-parse5@8.0.3:
+    resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
+
+  hast-util-is-element@3.0.0:
+    resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
+
+  hast-util-parse-selector@2.2.5:
+    resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==}
+
+  hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+
+  hast-util-raw@9.1.0:
+    resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==}
+
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
+
+  hast-util-to-parse5@8.0.0:
+    resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
+
+  hast-util-to-text@4.0.2:
+    resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  hast@1.0.0:
+    resolution: {integrity: sha512-vFUqlRV5C+xqP76Wwq2SrM0kipnmpxJm7OfvVXpB35Fp+Fn4MV+ozr+JZr5qFvyR1q/U+Foim2x+3P+x9S1PLA==}
+    deprecated: Renamed to rehype
+
+  hastscript@6.0.0:
+    resolution: {integrity: sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==}
+
+  hastscript@9.0.1:
+    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
+
+  highlight.js@10.7.3:
+    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
+
+  highlightjs-vue@1.0.0:
+    resolution: {integrity: sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==}
+
+  hosted-git-info@4.1.0:
+    resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
+    engines: {node: '>=10'}
+
+  html-url-attributes@3.0.1:
+    resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
+
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
+  http-cache-semantics@4.2.0:
+    resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
+
+  http-errors@2.0.0:
+    resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
+    engines: {node: '>= 0.8'}
+
+  http-proxy-agent@5.0.0:
+    resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
+    engines: {node: '>= 6'}
+
+  http-proxy-middleware@3.0.5:
+    resolution: {integrity: sha512-GLZZm1X38BPY4lkXA01jhwxvDoOkkXqjgVyUzVxiEK4iuRu03PZoYHhHRwxnfhQMDuaxi3vVri0YgSro/1oWqg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  http-proxy@1.18.1:
+    resolution: {integrity: sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==}
+    engines: {node: '>=8.0.0'}
+
+  http2-wrapper@1.0.3:
+    resolution: {integrity: sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==}
+    engines: {node: '>=10.19.0'}
+
+  https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+
+  iconv-corefoundation@1.1.7:
+    resolution: {integrity: sha512-T10qvkw0zz4wnm560lOEg0PovVqUXuOFhhHAkixw8/sycy7TJt7v/RrkEKEQnAw2viPSJu6iAkErxnzR0g8PpQ==}
+    engines: {node: ^8.11.2 || >=10}
+    os: [darwin]
+
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
+  iconv-lite@0.7.0:
+    resolution: {integrity: sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==}
+    engines: {node: '>=0.10.0'}
+
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
+  ignore-by-default@1.0.1:
+    resolution: {integrity: sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+
+  internmap@1.0.1:
+    resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
+  intl-messageformat@10.7.18:
+    resolution: {integrity: sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g==}
+
+  ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
+
+  is-alphabetical@1.0.4:
+    resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
+
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@1.0.4:
+    resolution: {integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
+  is-arrayish@0.3.4:
+    resolution: {integrity: sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-ci@3.0.1:
+    resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
+    hasBin: true
+
+  is-decimal@1.0.4:
+    resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
+
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-fullwidth-code-point@4.0.0:
+    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
+    engines: {node: '>=12'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-hexadecimal@1.0.4:
+    resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
+
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-plain-obj@1.1.0:
+    resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
+    engines: {node: '>=0.10.0'}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+
+  isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+
+  isbinaryfile@4.0.10:
+    resolution: {integrity: sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==}
+    engines: {node: '>= 8.0.0'}
+
+  isbinaryfile@5.0.6:
+    resolution: {integrity: sha512-I+NmIfBHUl+r2wcDd6JwE9yWje/PIVY/R5/CmV8dXLZd5K+L9X2klAOwfAHNnondLXkbHyTAleQAWonpTJBTtw==}
+    engines: {node: '>= 18.0.0'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
+  jake@10.9.4:
+    resolution: {integrity: sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  jiti@2.5.1:
+    resolution: {integrity: sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==}
+    hasBin: true
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-schema-typed@8.0.1:
+    resolution: {integrity: sha512-XQmWYj2Sm4kn4WeTYvmpKEbyPsL7nBsb647c7pMe6l02/yx2+Jfc4dT6UZkEXnIUb5LhD55r2HPsJ1milQ4rDg==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  json-stringify-safe@5.0.1:
+    resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  jsonfile@4.0.0:
+    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
+
+  jsonfile@6.2.0:
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+
+  katex@0.16.25:
+    resolution: {integrity: sha512-woHRUZ/iF23GBP1dkDQMh1QBad9dmr8/PAwNA54VrSOVYgI12MAcE14TqnDdQOdzyEonGzMepYnqBMYdsoAr8Q==}
+    hasBin: true
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  khroma@2.1.0:
+    resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==}
+
+  langium@3.3.1:
+    resolution: {integrity: sha512-QJv/h939gDpvT+9SiLVlY7tZC3xB2qK57v0J04Sh9wpMb6MP1q8gB21L3WIo8T5P1MSMg3Ep14L7KkDCFG3y4w==}
+    engines: {node: '>=16.0.0'}
+
+  layout-base@1.0.2:
+    resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==}
+
+  layout-base@2.0.1:
+    resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==}
+
+  lazy-val@1.0.5:
+    resolution: {integrity: sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==}
+
+  lazystream@1.0.1:
+    resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==}
+    engines: {node: '>= 0.6.3'}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lightningcss-darwin-arm64@1.30.1:
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.1:
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.1:
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.1:
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.1:
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+    engines: {node: '>= 12.0.0'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+
+  lodash.defaults@4.2.0:
+    resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
+
+  lodash.difference@4.5.0:
+    resolution: {integrity: sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==}
+
+  lodash.flatten@4.4.0:
+    resolution: {integrity: sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==}
+
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  lodash.union@4.6.0:
+    resolution: {integrity: sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw==}
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
+  lowercase-keys@2.0.0:
+    resolution: {integrity: sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==}
+    engines: {node: '>=8'}
+
+  lowlight@1.20.0:
+    resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  lru-cache@6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+
+  lucide-react@0.542.0:
+    resolution: {integrity: sha512-w3hD8/SQB7+lzU2r4VdFyzzOzKnUjTZIF/MQJGSSvni7Llewni4vuViRppfRAa2guOsY5k4jZyxw/i9DQHv+dw==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  magic-string@0.30.19:
+    resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
+
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
+  marked@14.0.0:
+    resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
+  marked@16.4.2:
+    resolution: {integrity: sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
+  matcher@3.0.0:
+    resolution: {integrity: sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==}
+    engines: {node: '>=10'}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
+
+  mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+
+  mdast-util-math@3.0.0:
+    resolution: {integrity: sha512-Tl9GBNeG/AhJnQM221bJR2HPvLOSnLE/T9cJI9tlc6zwQk2nPk/4f0cHkOdEixQPC/j8UtKDdITswvLAy1OZ1w==}
+
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-hast@13.2.0:
+    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
+
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
+  media-typer@1.1.0:
+    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
+    engines: {node: '>= 0.8'}
+
+  merge-descriptors@2.0.0:
+    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+    engines: {node: '>=18'}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  mermaid@11.12.2:
+    resolution: {integrity: sha512-n34QPDPEKmaeCG4WDMGy0OT6PSyxKCfy2pJgShP+Qow2KLrvWjclwbc3yXfSIf4BanqWEhQEpngWwNp/XhZt6w==}
+
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+
+  micromark-extension-cjk-friendly-gfm-strikethrough@1.2.3:
+    resolution: {integrity: sha512-gSPnxgHDDqXYOBvQRq6lerrq9mjDhdtKn+7XETuXjxWcL62yZEfUdA28Ml1I2vDIPfAOIKLa0h2XDSGkInGHFQ==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      micromark: ^4.0.0
+      micromark-util-types: ^2.0.0
+    peerDependenciesMeta:
+      micromark-util-types:
+        optional: true
+
+  micromark-extension-cjk-friendly-util@2.1.1:
+    resolution: {integrity: sha512-egs6+12JU2yutskHY55FyR48ZiEcFOJFyk9rsiyIhcJ6IvWB6ABBqVrBw8IobqJTDZ/wdSr9eoXDPb5S2nW1bg==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      micromark-util-types: '*'
+    peerDependenciesMeta:
+      micromark-util-types:
+        optional: true
+
+  micromark-extension-cjk-friendly@1.2.3:
+    resolution: {integrity: sha512-gRzVLUdjXBLX6zNPSnHGDoo+ZTp5zy+MZm0g3sv+3chPXY7l9gW+DnrcHcZh/jiPR6MjPKO4AEJNp4Aw6V9z5Q==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      micromark: ^4.0.0
+      micromark-util-types: ^2.0.0
+    peerDependenciesMeta:
+      micromark-util-types:
+        optional: true
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+
+  micromark-extension-math@3.1.0:
+    resolution: {integrity: sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@3.0.1:
+    resolution: {integrity: sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==}
+    engines: {node: '>= 0.6'}
+
+  mime@2.6.0:
+    resolution: {integrity: sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==}
+    engines: {node: '>=4.0.0'}
+    hasBin: true
+
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
+  mimic-response@1.0.1:
+    resolution: {integrity: sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==}
+    engines: {node: '>=4'}
+
+  mimic-response@3.1.0:
+    resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
+    engines: {node: '>=10'}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  minipass@3.3.6:
+    resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
+    engines: {node: '>=8'}
+
+  minipass@5.0.0:
+    resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
+    engines: {node: '>=8'}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minizlib@2.1.2:
+    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
+    engines: {node: '>= 8'}
+
+  minizlib@3.0.2:
+    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
+    engines: {node: '>= 18'}
+
+  mkdirp@1.0.4:
+    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  mkdirp@3.0.1:
+    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  mlly@1.8.0:
+    resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
+
+  monaco-editor@0.55.1:
+    resolution: {integrity: sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==}
+
+  motion-dom@12.23.23:
+    resolution: {integrity: sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==}
+
+  motion-utils@12.23.6:
+    resolution: {integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==}
+
+  motion@12.23.24:
+    resolution: {integrity: sha512-Rc5E7oe2YZ72N//S3QXGzbnXgqNrTESv8KKxABR20q2FLch9gHLo0JLyYo2hZ238bZ9Gx6cWhj9VO0IgwbMjCw==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  nan@2.23.0:
+    resolution: {integrity: sha512-1UxuyYGdoQHcGg87Lkqm3FzefucTa0NAiOcuRsDmysep3c1LVCRK2krrUDafMWtjSG04htvAmvg96+SDknOmgQ==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  negotiator@1.0.0:
+    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+    engines: {node: '>= 0.6'}
+
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
+  node-addon-api@1.7.2:
+    resolution: {integrity: sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg==}
+
+  node-pty@1.0.0:
+    resolution: {integrity: sha512-wtBMWWS7dFZm/VgqElrTvtfMq4GzJ6+edFI0Y0zyzygUSZMgZdraDUMUhCIvkjhJjme15qWmbyJbtAx4ot4uZA==}
+
+  node-releases@2.0.20:
+    resolution: {integrity: sha512-7gK6zSXEH6neM212JgfYFXe+GmZQM+fia5SsusuBIUgnPheLFBmIPhtFoAQRj8/7wASYQnbDlHPVwY0BefoFgA==}
+
+  nodemon@3.1.11:
+    resolution: {integrity: sha512-is96t8F/1//UHAjNPHpbsNY46ELPpftGUoSVNXwUfMk/qdjSylYrWSu1XavVTBOn526kFiOR733ATgNBCQyH0g==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+
+  normalize-url@6.1.0:
+    resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
+    engines: {node: '>=10'}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+
+  on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  oniguruma-parser@0.12.1:
+    resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
+
+  oniguruma-to-es@4.3.4:
+    resolution: {integrity: sha512-3VhUGN3w2eYxnTzHn+ikMI+fp/96KoRSVK9/kMTcFqj1NRDh2IhQCKvYxDnWePKRXY/AqH+Fuiyb7VHSzBjHfA==}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  p-cancelable@2.1.1:
+    resolution: {integrity: sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==}
+    engines: {node: '>=8'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  package-manager-detector@1.6.0:
+    resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-entities@2.0.0:
+    resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
+
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
+  parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+
+  path-data-parser@0.1.0:
+    resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-exists@5.0.0:
+    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
+  path-to-regexp@8.3.0:
+    resolution: {integrity: sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  pend@1.2.0:
+    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  plist@3.1.0:
+    resolution: {integrity: sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==}
+    engines: {node: '>=10.4.0'}
+
+  points-on-curve@0.2.0:
+    resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
+
+  points-on-path@0.2.1:
+    resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prismjs@1.27.0:
+    resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
+    engines: {node: '>=6'}
+
+  prismjs@1.30.0:
+    resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
+    engines: {node: '>=6'}
+
+  process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+
+  progress@2.0.3:
+    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+    engines: {node: '>=0.4.0'}
+
+  promise-retry@2.0.1:
+    resolution: {integrity: sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==}
+    engines: {node: '>=10'}
+
+  property-information@5.6.0:
+    resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==}
+
+  property-information@6.5.0:
+    resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
+
+  property-information@7.1.0:
+    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
+
+  proxy-addr@2.0.7:
+    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
+    engines: {node: '>= 0.10'}
+
+  pstree.remy@1.1.8:
+    resolution: {integrity: sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==}
+
+  pump@3.0.3:
+    resolution: {integrity: sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  pupa@3.3.0:
+    resolution: {integrity: sha512-LjgDO2zPtoXP2wJpDjZrGdojii1uqO0cnwKoIoUzkfS98HDmbeiGmYiXo3lXeFlq2xvne1QFQhwYXSUCLKtEuA==}
+    engines: {node: '>=12.20'}
+
+  qs@6.14.0:
+    resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
+    engines: {node: '>=0.6'}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  quick-lru@5.1.1:
+    resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
+    engines: {node: '>=10'}
+
+  range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
+
+  raw-body@3.0.1:
+    resolution: {integrity: sha512-9G8cA+tuMS75+6G/TzW8OtLzmBDMo8p1JRxN5AZ+LAp8uxGA8V8GZm4GQ4/N5QNQEnLmg6SS7wyuSmbKepiKqA==}
+    engines: {node: '>= 0.10'}
+
+  react-dom@19.1.1:
+    resolution: {integrity: sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==}
+    peerDependencies:
+      react: ^19.1.1
+
+  react-markdown@10.1.0:
+    resolution: {integrity: sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==}
+    peerDependencies:
+      '@types/react': '>=18'
+      react: '>=18'
+
+  react-refresh@0.17.0:
+    resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
+    engines: {node: '>=0.10.0'}
+
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.1:
+    resolution: {integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-syntax-highlighter@15.6.6:
+    resolution: {integrity: sha512-DgXrc+AZF47+HvAPEmn7Ua/1p10jNoVZVI/LoPiYdtY+OM+/nG5yefLHKJwdKqY1adMuHFbeyBaG9j64ML7vTw==}
+    peerDependencies:
+      react: '>= 0.14.0'
+
+  react@19.1.1:
+    resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==}
+    engines: {node: '>=0.10.0'}
+
+  read-config-file@6.3.2:
+    resolution: {integrity: sha512-M80lpCjnE6Wt6zb98DoW8WHR09nzMSpu8XHtPkiTHrJ5Az9CybfeQhTJ8D7saeBHpGhLPIVyA8lcL6ZmdKwY6Q==}
+    engines: {node: '>=12.0.0'}
+
+  readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+
+  readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+
+  readdir-glob@1.1.3:
+    resolution: {integrity: sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  refractor@3.6.0:
+    resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==}
+
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.0.1:
+    resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
+
+  rehype-harden@1.1.6:
+    resolution: {integrity: sha512-5WyX6BFEWYmmbCF/S2gNRklfgPGTiGjviAjbseO4XlpqEilWBkvWwve6uU/JB3C0JvG/qxCZa3rBn8+ajy4i/A==}
+
+  rehype-katex@7.0.1:
+    resolution: {integrity: sha512-OiM2wrZ/wuhKkigASodFoo8wimG3H12LWQaH8qSPVJn9apWKFSH3YOCtbKpBorTVw/eI7cuT21XBbvwEswbIOA==}
+
+  rehype-raw@7.0.0:
+    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
+
+  remark-cjk-friendly-gfm-strikethrough@1.2.3:
+    resolution: {integrity: sha512-bXfMZtsaomK6ysNN/UGRIcasQAYkC10NtPmP0oOHOV8YOhA2TXmwRXCku4qOzjIFxAPfish5+XS0eIug2PzNZA==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      '@types/mdast': ^4.0.0
+      unified: ^11.0.0
+    peerDependenciesMeta:
+      '@types/mdast':
+        optional: true
+
+  remark-cjk-friendly@1.2.3:
+    resolution: {integrity: sha512-UvAgxwlNk+l9Oqgl/9MWK2eWRS7zgBW/nXX9AthV7nd/3lNejF138E7Xbmk9Zs4WjTJGs721r7fAEc7tNFoH7g==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      '@types/mdast': ^4.0.0
+      unified: ^11.0.0
+    peerDependenciesMeta:
+      '@types/mdast':
+        optional: true
+
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
+  remark-math@6.0.0:
+    resolution: {integrity: sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==}
+
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-rehype@11.1.2:
+    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
+
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
+  remend@1.0.1:
+    resolution: {integrity: sha512-152puVH0qMoRJQFnaMG+rVDdf01Jq/CaED+MBuXExurJgdbkLp0c3TIe4R12o28Klx8uyGsjvFNG05aFG69G9w==}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  requires-port@1.0.0:
+    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+
+  resolve-alpn@1.2.1:
+    resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
+  responselike@2.0.1:
+    resolution: {integrity: sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==}
+
+  retry@0.12.0:
+    resolution: {integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==}
+    engines: {node: '>= 4'}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  roarr@2.15.4:
+    resolution: {integrity: sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A==}
+    engines: {node: '>=8.0'}
+
+  robust-predicates@3.0.2:
+    resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
+
+  rollup@4.50.1:
+    resolution: {integrity: sha512-78E9voJHwnXQMiQdiqswVLZwJIzdBKJ1GdI5Zx6XwoFKUIk09/sSrr+05QFzvYb8q6Y9pPV45zzDuYa3907TZA==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  roughjs@4.6.6:
+    resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
+
+  router@2.2.0:
+    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+    engines: {node: '>= 18'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+
+  rxjs@7.8.2:
+    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
+
+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  sanitize-filename@1.6.3:
+    resolution: {integrity: sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==}
+
+  sax@1.4.1:
+    resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
+
+  scheduler@0.26.0:
+    resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
+
+  semver-compare@1.0.0:
+    resolution: {integrity: sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  send@1.2.0:
+    resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
+    engines: {node: '>= 18'}
+
+  serialize-error@7.0.1:
+    resolution: {integrity: sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==}
+    engines: {node: '>=10'}
+
+  serve-static@2.2.0:
+    resolution: {integrity: sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==}
+    engines: {node: '>= 18'}
+
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  shell-quote@1.8.3:
+    resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
+    engines: {node: '>= 0.4'}
+
+  shiki@3.19.0:
+    resolution: {integrity: sha512-77VJr3OR/VUZzPiStyRhADmO2jApMM0V2b1qf0RpfWya8Zr1PeZev5AEpPGAAKWdiYUtcZGBE4F5QvJml1PvWA==}
+
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  simple-git@3.28.0:
+    resolution: {integrity: sha512-Rs/vQRwsn1ILH1oBUy8NucJlXmnnLeLCfcvbSehkPzbv3wwoFWIdtfd6Ndo6ZPhlPsCZ60CPI4rxurnwAa+a2w==}
+
+  simple-swizzle@0.2.4:
+    resolution: {integrity: sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==}
+
+  simple-update-notifier@2.0.0:
+    resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==}
+    engines: {node: '>=10'}
+
+  slice-ansi@3.0.0:
+    resolution: {integrity: sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==}
+    engines: {node: '>=8'}
+
+  slice-ansi@5.0.0:
+    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
+    engines: {node: '>=12'}
+
+  smart-buffer@4.2.0:
+    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
+    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
+
+  sonner@2.0.7:
+    resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  sort-keys-length@1.0.1:
+    resolution: {integrity: sha512-GRbEOUqCxemTAk/b32F2xa8wDTs+Z1QHOkbhJDQTvv/6G3ZkbJ+frYWsTcc7cBB3Fu4wy4XlLCuNtJuMn7Gsvw==}
+    engines: {node: '>=0.10.0'}
+
+  sort-keys@1.1.2:
+    resolution: {integrity: sha512-vzn8aSqKgytVik0iwdBEi+zevbTYZogewTUM6dtpmGwEcdzbub/TX4bCzRhebDCRC3QzXgJsLRKB2V/Oof7HXg==}
+    engines: {node: '>=0.10.0'}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  space-separated-tokens@1.1.5:
+    resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
+
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
+  sprintf-js@1.1.3:
+    resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
+
+  stat-mode@1.0.0:
+    resolution: {integrity: sha512-jH9EhtKIjuXZ2cWxmXS8ZP80XyC3iasQxMDV8jzhNJpfDb7VbQLVW4Wvsxz9QZvzV+G4YoSfBUVKDOyxLzi/sg==}
+    engines: {node: '>= 6'}
+
+  state-local@1.0.7:
+    resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
+
+  statuses@2.0.1:
+    resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
+    engines: {node: '>= 0.8'}
+
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
+  streamdown@1.6.10:
+    resolution: {integrity: sha512-B4Y3Z/qiXl1Dc+LzAB5c52Cd1QGRiFjaDwP+ERoj1JtCykdRDM8X6HwQnn3YkpkSk0x3R7S/6LrGe1nQiElHQQ==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+
+  string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.2:
+    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
+    engines: {node: '>=12'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  strip-json-comments@5.0.3:
+    resolution: {integrity: sha512-1tB5mhVo7U+ETBKNf92xT4hrQa3pm0MZ0PQvuDnWgAAGHDsfp4lPSpiS6psrSiet87wyGPh9ft6wmhOMQ0hDiw==}
+    engines: {node: '>=14.16'}
+
+  stubborn-fs@1.2.5:
+    resolution: {integrity: sha512-H2N9c26eXjzL/S/K+i/RHHcFanE74dptvvjM8iwzwbVcWY/zjBbgRqF3K0DY4+OD+uTTASTBvDoxPDaPN02D7g==}
+
+  style-to-js@1.1.17:
+    resolution: {integrity: sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==}
+
+  style-to-object@1.0.9:
+    resolution: {integrity: sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==}
+
+  stylis@4.3.6:
+    resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
+
+  sumchecker@3.0.1:
+    resolution: {integrity: sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==}
+    engines: {node: '>= 8.0'}
+
+  supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+
+  tagged-tag@1.0.0:
+    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
+    engines: {node: '>=20'}
+
+  tailwind-merge@3.3.1:
+    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
+
+  tailwind-variants@3.1.1:
+    resolution: {integrity: sha512-ftLXe3krnqkMHsuBTEmaVUXYovXtPyTK7ckEfDRXS8PBZx0bAUas+A0jYxuKA5b8qg++wvQ3d2MQ7l/xeZxbZQ==}
+    engines: {node: '>=16.x', pnpm: '>=7.x'}
+    peerDependencies:
+      tailwind-merge: '>=3.0.0'
+      tailwindcss: '*'
+    peerDependenciesMeta:
+      tailwind-merge:
+        optional: true
+
+  tailwindcss@4.1.13:
+    resolution: {integrity: sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==}
+
+  tapable@2.2.3:
+    resolution: {integrity: sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==}
+    engines: {node: '>=6'}
+
+  tar-stream@2.2.0:
+    resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
+    engines: {node: '>=6'}
+
+  tar@6.2.1:
+    resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
+    engines: {node: '>=10'}
+
+  tar@7.4.3:
+    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
+    engines: {node: '>=18'}
+
+  temp-file@3.4.0:
+    resolution: {integrity: sha512-C5tjlC/HCtVUOi3KWVokd4vHVViOmGjtLwIh4MuzPo/nMYTV/p1urt3RnMz2IWXDdKEGJH3k5+KPxtqRsUYGtg==}
+
+  tinyexec@1.0.2:
+    resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
+    engines: {node: '>=18'}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  tmp-promise@3.0.3:
+    resolution: {integrity: sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==}
+
+  tmp@0.2.5:
+    resolution: {integrity: sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==}
+    engines: {node: '>=14.14'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
+  touch@3.1.1:
+    resolution: {integrity: sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==}
+    hasBin: true
+
+  tree-kill@1.2.2:
+    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
+    hasBin: true
+
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
+  truncate-utf8-bytes@1.0.2:
+    resolution: {integrity: sha512-95Pu1QXQvruGEhv62XCMO3Mm90GscOCClvrIUwCM0PYOXK3kaF3l3sIHxx71ThJfcbM2O5Au6SO3AWCSEfW4mQ==}
+
+  ts-api-utils@2.1.0:
+    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  ts-dedent@2.2.0:
+    resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
+    engines: {node: '>=6.10'}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tsx@4.20.6:
+    resolution: {integrity: sha512-ytQKuwgmrrkDTFP4LjR0ToE2nqgy886GpvRSpU0JAnrdBYppuY5rLkRUYPU1yCryb24SsKBTL/hlDQAEFVwtZg==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
+  tw-animate-css@1.3.8:
+    resolution: {integrity: sha512-Qrk3PZ7l7wUcGYhwZloqfkWCmaXZAoqjkdbIDvzfGshwGtexa/DAs9koXxIkrpEasyevandomzCBAV1Yyop5rw==}
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-fest@0.13.1:
+    resolution: {integrity: sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==}
+    engines: {node: '>=10'}
+
+  type-fest@5.1.0:
+    resolution: {integrity: sha512-wQ531tuWvB6oK+pchHIu5lHe5f5wpSCqB8Kf4dWQRbOYc9HTge7JL0G4Qd44bh6QuJCccIzL3bugb8GI0MwHrg==}
+    engines: {node: '>=20'}
+
+  type-is@2.0.1:
+    resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
+    engines: {node: '>= 0.6'}
+
+  typescript-eslint@8.43.0:
+    resolution: {integrity: sha512-FyRGJKUGvcFekRRcBKFBlAhnp4Ng8rhe8tuvvkR9OiU0gfd4vyvTRQHEckO6VDlH57jbeUQem2IpqPq9kLJH+w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  typescript@5.8.3:
+    resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  ufo@1.6.1:
+    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
+
+  uint8array-extras@1.5.0:
+    resolution: {integrity: sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A==}
+    engines: {node: '>=18'}
+
+  undefsafe@2.0.5:
+    resolution: {integrity: sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==}
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  undici-types@7.10.0:
+    resolution: {integrity: sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==}
+
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unist-util-find-after@5.0.0:
+    resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==}
+
+  unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-remove-position@5.0.0:
+    resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+
+  unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+
+  universalify@0.1.2:
+    resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
+    engines: {node: '>= 4.0.0'}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
+  unused-filename@4.0.1:
+    resolution: {integrity: sha512-ZX6U1J04K1FoSUeoX1OicAhw4d0aro2qo+L8RhJkiGTNtBNkd/Fi1Wxoc9HzcVu6HfOzm0si/N15JjxFmD1z6A==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  update-browserslist-db@1.1.3:
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  utf8-byte-length@1.0.5:
+    resolution: {integrity: sha512-Xn0w3MtiQ6zoz2vFyUVruaCL53O/DwUvkEeOvj+uulMm0BkUGYWmBYVyElqZaSLhY6ZD0ulfU3aBra2aVT4xfA==}
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  uuid@11.1.0:
+    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
+    hasBin: true
+
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
+  verror@1.10.1:
+    resolution: {integrity: sha512-veufcmxri4e3XSrT0xwfUR7kguIkaxBeosDg00yDWhk49wdwkSUrvvsm7nc75e1PUyvIeZj6nS8VQRYz2/S4Xg==}
+    engines: {node: '>=0.6.0'}
+
+  vfile-location@5.0.3:
+    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
+
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
+  vite@7.1.5:
+    resolution: {integrity: sha512-4cKBO9wR75r0BeIWWWId9XK9Lj6La5X846Zw9dFfzMRw38IlTk2iCcUt6hsyiDRcPidc55ZParFYDXi0nXOeLQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vscode-jsonrpc@8.2.0:
+    resolution: {integrity: sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==}
+    engines: {node: '>=14.0.0'}
+
+  vscode-languageserver-protocol@3.17.5:
+    resolution: {integrity: sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==}
+
+  vscode-languageserver-textdocument@1.0.12:
+    resolution: {integrity: sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==}
+
+  vscode-languageserver-types@3.17.5:
+    resolution: {integrity: sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==}
+
+  vscode-languageserver@9.0.1:
+    resolution: {integrity: sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==}
+    hasBin: true
+
+  vscode-uri@3.0.8:
+    resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
+
+  web-namespaces@2.0.1:
+    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
+
+  when-exit@2.1.4:
+    resolution: {integrity: sha512-4rnvd3A1t16PWzrBUcSDZqcAmsUIy4minDXT/CZ8F2mVDgd65i4Aalimgz1aQkRGU0iH5eT5+6Rx2TK8o443Pg==}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  xmlbuilder@15.1.1:
+    resolution: {integrity: sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==}
+    engines: {node: '>=8.0'}
+
+  xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+
+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+
+  yaml@2.8.1:
+    resolution: {integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
+  yauzl@2.10.0:
+    resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  zip-stream@4.1.1:
+    resolution: {integrity: sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==}
+    engines: {node: '>= 10'}
+
+  zustand@5.0.8:
+    resolution: {integrity: sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
+snapshots:
+
+  7zip-bin@5.2.0: {}
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@antfu/install-pkg@1.1.0':
+    dependencies:
+      package-manager-detector: 1.6.0
+      tinyexec: 1.0.2
+
+  '@babel/code-frame@7.27.1':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.27.1
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.28.4': {}
+
+  '@babel/core@7.28.4':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.3
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.4)
+      '@babel/helpers': 7.28.4
+      '@babel/parser': 7.28.4
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.1(supports-color@5.5.0)
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.28.3':
+    dependencies:
+      '@babel/parser': 7.28.4
+      '@babel/types': 7.28.4
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-compilation-targets@7.27.2':
+    dependencies:
+      '@babel/compat-data': 7.28.4
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.25.4
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-module-imports@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/traverse': 7.28.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-plugin-utils@7.27.1': {}
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.27.1': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helpers@7.28.4':
+    dependencies:
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.4
+
+  '@babel/parser@7.28.4':
+    dependencies:
+      '@babel/types': 7.28.4
+
+  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/runtime@7.28.4': {}
+
+  '@babel/template@7.27.2':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/parser': 7.28.4
+      '@babel/types': 7.28.4
+
+  '@babel/traverse@7.28.4':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.3
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.28.4
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.4
+      debug: 4.4.1(supports-color@5.5.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.28.4':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+
+  '@braintree/sanitize-url@7.1.1': {}
+
+  '@chevrotain/cst-dts-gen@11.0.3':
+    dependencies:
+      '@chevrotain/gast': 11.0.3
+      '@chevrotain/types': 11.0.3
+      lodash-es: 4.17.21
+
+  '@chevrotain/gast@11.0.3':
+    dependencies:
+      '@chevrotain/types': 11.0.3
+      lodash-es: 4.17.21
+
+  '@chevrotain/regexp-to-ast@11.0.3': {}
+
+  '@chevrotain/types@11.0.3': {}
+
+  '@chevrotain/utils@11.0.3': {}
+
+  '@develar/schema-utils@2.6.5':
+    dependencies:
+      ajv: 6.12.6
+      ajv-keywords: 3.5.2(ajv@6.12.6)
+
+  '@electron/asar@3.4.1':
+    dependencies:
+      commander: 5.1.0
+      glob: 7.2.3
+      minimatch: 3.1.2
+
+  '@electron/get@2.0.3':
+    dependencies:
+      debug: 4.4.1(supports-color@5.5.0)
+      env-paths: 2.2.1
+      fs-extra: 8.1.0
+      got: 11.8.6
+      progress: 2.0.3
+      semver: 6.3.1
+      sumchecker: 3.0.1
+    optionalDependencies:
+      global-agent: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@electron/notarize@2.2.1':
+    dependencies:
+      debug: 4.4.1(supports-color@5.5.0)
+      fs-extra: 9.1.0
+      promise-retry: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@electron/osx-sign@1.0.5':
+    dependencies:
+      compare-version: 0.1.2
+      debug: 4.4.1(supports-color@5.5.0)
+      fs-extra: 10.1.0
+      isbinaryfile: 4.0.10
+      minimist: 1.2.8
+      plist: 3.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@electron/universal@1.5.1':
+    dependencies:
+      '@electron/asar': 3.4.1
+      '@malept/cross-spawn-promise': 1.1.1
+      debug: 4.4.1(supports-color@5.5.0)
+      dir-compare: 3.3.0
+      fs-extra: 9.1.0
+      minimatch: 3.1.2
+      plist: 3.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@esbuild/aix-ppc64@0.25.9':
+    optional: true
+
+  '@esbuild/android-arm64@0.25.9':
+    optional: true
+
+  '@esbuild/android-arm@0.25.9':
+    optional: true
+
+  '@esbuild/android-x64@0.25.9':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.25.9':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.9':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.9':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.9':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.9':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.9':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.9':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.9':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.9':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.9':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.25.9':
+    optional: true
+
+  '@esbuild/linux-s390x@0.25.9':
+    optional: true
+
+  '@esbuild/linux-x64@0.25.9':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.9':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.25.9':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.25.9':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.25.9':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.25.9':
+    optional: true
+
+  '@esbuild/sunos-x64@0.25.9':
+    optional: true
+
+  '@esbuild/win32-arm64@0.25.9':
+    optional: true
+
+  '@esbuild/win32-ia32@0.25.9':
+    optional: true
+
+  '@esbuild/win32-x64@0.25.9':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.35.0(jiti@2.5.1))':
+    dependencies:
+      eslint: 9.35.0(jiti@2.5.1)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.1': {}
+
+  '@eslint/config-array@0.21.0':
+    dependencies:
+      '@eslint/object-schema': 2.1.6
+      debug: 4.4.1(supports-color@5.5.0)
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.3.1': {}
+
+  '@eslint/core@0.15.2':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.1':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.1(supports-color@5.5.0)
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@9.35.0': {}
+
+  '@eslint/object-schema@2.1.6': {}
+
+  '@eslint/plugin-kit@0.3.5':
+    dependencies:
+      '@eslint/core': 0.15.2
+      levn: 0.4.1
+
+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.4':
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/react-dom@2.1.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  '@floating-ui/utils@0.2.10': {}
+
+  '@fontsource/ibm-plex-mono@5.2.7': {}
+
+  '@fontsource/ibm-plex-sans@5.2.8': {}
+
+  '@formatjs/ecma402-abstract@2.3.6':
+    dependencies:
+      '@formatjs/fast-memoize': 2.2.7
+      '@formatjs/intl-localematcher': 0.6.2
+      decimal.js: 10.6.0
+      tslib: 2.8.1
+
+  '@formatjs/fast-memoize@2.2.7':
+    dependencies:
+      tslib: 2.8.1
+
+  '@formatjs/icu-messageformat-parser@2.11.4':
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.3.6
+      '@formatjs/icu-skeleton-parser': 1.8.16
+      tslib: 2.8.1
+
+  '@formatjs/icu-skeleton-parser@1.8.16':
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.3.6
+      tslib: 2.8.1
+
+  '@formatjs/intl-localematcher@0.6.2':
+    dependencies:
+      tslib: 2.8.1
+
+  '@heroui/react-rsc-utils@2.1.9(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+
+  '@heroui/react-utils@2.1.14(react@19.1.1)':
+    dependencies:
+      '@heroui/react-rsc-utils': 2.1.9(react@19.1.1)
+      '@heroui/shared-utils': 2.1.12
+      react: 19.1.1
+
+  '@heroui/scroll-shadow@2.3.18(@heroui/system@2.4.23(@heroui/theme@2.4.23(tailwindcss@4.1.13))(framer-motion@12.23.24(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(@heroui/theme@2.4.23(tailwindcss@4.1.13))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@heroui/react-utils': 2.1.14(react@19.1.1)
+      '@heroui/shared-utils': 2.1.12
+      '@heroui/system': 2.4.23(@heroui/theme@2.4.23(tailwindcss@4.1.13))(framer-motion@12.23.24(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@heroui/theme': 2.4.23(tailwindcss@4.1.13)
+      '@heroui/use-data-scroll-overflow': 2.2.13(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  '@heroui/shared-utils@2.1.12': {}
+
+  '@heroui/system-rsc@2.3.20(@heroui/theme@2.4.23(tailwindcss@4.1.13))(react@19.1.1)':
+    dependencies:
+      '@heroui/theme': 2.4.23(tailwindcss@4.1.13)
+      '@react-types/shared': 3.32.1(react@19.1.1)
+      clsx: 1.2.1
+      react: 19.1.1
+
+  '@heroui/system@2.4.23(@heroui/theme@2.4.23(tailwindcss@4.1.13))(framer-motion@12.23.24(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@heroui/react-utils': 2.1.14(react@19.1.1)
+      '@heroui/system-rsc': 2.3.20(@heroui/theme@2.4.23(tailwindcss@4.1.13))(react@19.1.1)
+      '@react-aria/i18n': 3.12.13(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-aria/overlays': 3.30.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-aria/utils': 3.31.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      framer-motion: 12.23.24(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    transitivePeerDependencies:
+      - '@heroui/theme'
+
+  '@heroui/theme@2.4.23(tailwindcss@4.1.13)':
+    dependencies:
+      '@heroui/shared-utils': 2.1.12
+      clsx: 1.2.1
+      color: 4.2.3
+      color2k: 2.0.3
+      deepmerge: 4.3.1
+      flat: 5.0.2
+      tailwind-merge: 3.3.1
+      tailwind-variants: 3.1.1(tailwind-merge@3.3.1)(tailwindcss@4.1.13)
+      tailwindcss: 4.1.13
+
+  '@heroui/use-data-scroll-overflow@2.2.13(react@19.1.1)':
+    dependencies:
+      '@heroui/shared-utils': 2.1.12
+      react: 19.1.1
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.7':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@ibm/plex@6.4.1':
+    dependencies:
+      '@ibm/telemetry-js': 1.10.2
+
+  '@ibm/telemetry-js@1.10.2': {}
+
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/utils@3.1.0':
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@iconify/types': 2.0.0
+      mlly: 1.8.0
+
+  '@internationalized/date@3.10.0':
+    dependencies:
+      '@swc/helpers': 0.5.17
+
+  '@internationalized/message@3.1.8':
+    dependencies:
+      '@swc/helpers': 0.5.17
+      intl-messageformat: 10.7.18
+
+  '@internationalized/number@3.6.5':
+    dependencies:
+      '@swc/helpers': 0.5.17
+
+  '@internationalized/string@3.2.7':
+    dependencies:
+      '@swc/helpers': 0.5.17
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.2
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@isaacs/fs-minipass@4.0.1':
+    dependencies:
+      minipass: 7.1.2
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@kwsites/file-exists@1.1.1':
+    dependencies:
+      debug: 4.4.1(supports-color@5.5.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@kwsites/promise-deferred@1.1.1': {}
+
+  '@malept/cross-spawn-promise@1.1.1':
+    dependencies:
+      cross-spawn: 7.0.6
+
+  '@malept/flatpak-bundler@0.4.0':
+    dependencies:
+      debug: 4.4.1(supports-color@5.5.0)
+      fs-extra: 9.1.0
+      lodash: 4.17.21
+      tmp-promise: 3.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@mermaid-js/parser@0.6.3':
+    dependencies:
+      langium: 3.3.1
+
+  '@monaco-editor/loader@1.7.0':
+    dependencies:
+      state-local: 1.0.7
+
+  '@monaco-editor/react@4.7.0(monaco-editor@0.55.1)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@monaco-editor/loader': 1.7.0
+      monaco-editor: 0.55.1
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.19.1
+
+  '@opencode-ai/sdk@1.0.133': {}
+
+  '@opencode-ai/sdk@1.0.65': {}
+
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
+  '@radix-ui/number@1.1.1': {}
+
+  '@radix-ui/primitive@1.1.3': {}
+
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-context@1.1.2(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      aria-hidden: 1.2.6
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      react-remove-scroll: 2.7.1(@types/react@19.1.12)(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-direction@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      aria-hidden: 1.2.6
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      react-remove-scroll: 2.7.1(@types/react@19.1.12)(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/rect': 1.1.1
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-scroll-area@1.2.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-select@2.2.6(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      aria-hidden: 1.2.6
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      react-remove-scroll: 2.7.1(@types/react@19.1.12)(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-separator@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-toggle@1.1.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/rect@1.1.1': {}
+
+  '@react-aria/focus@3.21.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@react-aria/interactions': 3.25.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-aria/utils': 3.31.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-types/shared': 3.32.1(react@19.1.1)
+      '@swc/helpers': 0.5.17
+      clsx: 2.1.1
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  '@react-aria/i18n@3.12.13(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@internationalized/date': 3.10.0
+      '@internationalized/message': 3.1.8
+      '@internationalized/number': 3.6.5
+      '@internationalized/string': 3.2.7
+      '@react-aria/ssr': 3.9.10(react@19.1.1)
+      '@react-aria/utils': 3.31.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-types/shared': 3.32.1(react@19.1.1)
+      '@swc/helpers': 0.5.17
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  '@react-aria/interactions@3.25.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@react-aria/ssr': 3.9.10(react@19.1.1)
+      '@react-aria/utils': 3.31.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-stately/flags': 3.1.2
+      '@react-types/shared': 3.32.1(react@19.1.1)
+      '@swc/helpers': 0.5.17
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  '@react-aria/overlays@3.30.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@react-aria/focus': 3.21.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-aria/i18n': 3.12.13(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-aria/interactions': 3.25.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-aria/ssr': 3.9.10(react@19.1.1)
+      '@react-aria/utils': 3.31.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-aria/visually-hidden': 3.8.28(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-stately/overlays': 3.6.20(react@19.1.1)
+      '@react-types/button': 3.14.1(react@19.1.1)
+      '@react-types/overlays': 3.9.2(react@19.1.1)
+      '@react-types/shared': 3.32.1(react@19.1.1)
+      '@swc/helpers': 0.5.17
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  '@react-aria/ssr@3.9.10(react@19.1.1)':
+    dependencies:
+      '@swc/helpers': 0.5.17
+      react: 19.1.1
+
+  '@react-aria/utils@3.31.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@react-aria/ssr': 3.9.10(react@19.1.1)
+      '@react-stately/flags': 3.1.2
+      '@react-stately/utils': 3.10.8(react@19.1.1)
+      '@react-types/shared': 3.32.1(react@19.1.1)
+      '@swc/helpers': 0.5.17
+      clsx: 2.1.1
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  '@react-aria/visually-hidden@3.8.28(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@react-aria/interactions': 3.25.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-aria/utils': 3.31.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-types/shared': 3.32.1(react@19.1.1)
+      '@swc/helpers': 0.5.17
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  '@react-stately/flags@3.1.2':
+    dependencies:
+      '@swc/helpers': 0.5.17
+
+  '@react-stately/overlays@3.6.20(react@19.1.1)':
+    dependencies:
+      '@react-stately/utils': 3.10.8(react@19.1.1)
+      '@react-types/overlays': 3.9.2(react@19.1.1)
+      '@swc/helpers': 0.5.17
+      react: 19.1.1
+
+  '@react-stately/utils@3.10.8(react@19.1.1)':
+    dependencies:
+      '@swc/helpers': 0.5.17
+      react: 19.1.1
+
+  '@react-types/button@3.14.1(react@19.1.1)':
+    dependencies:
+      '@react-types/shared': 3.32.1(react@19.1.1)
+      react: 19.1.1
+
+  '@react-types/overlays@3.9.2(react@19.1.1)':
+    dependencies:
+      '@react-types/shared': 3.32.1(react@19.1.1)
+      react: 19.1.1
+
+  '@react-types/shared@3.32.1(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+
+  '@remixicon/react@4.7.0(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+
+  '@rolldown/pluginutils@1.0.0-beta.34': {}
+
+  '@rollup/rollup-android-arm-eabi@4.50.1':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.50.1':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.50.1':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.50.1':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.50.1':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.50.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.50.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.50.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.50.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.50.1':
+    optional: true
+
+  '@rollup/rollup-linux-loongarch64-gnu@4.50.1':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.50.1':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.50.1':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.50.1':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.50.1':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.50.1':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.50.1':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.50.1':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.50.1':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.50.1':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.50.1':
+    optional: true
+
+  '@shikijs/core@3.19.0':
+    dependencies:
+      '@shikijs/types': 3.19.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@3.19.0':
+    dependencies:
+      '@shikijs/types': 3.19.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.4
+
+  '@shikijs/engine-oniguruma@3.19.0':
+    dependencies:
+      '@shikijs/types': 3.19.0
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@3.19.0':
+    dependencies:
+      '@shikijs/types': 3.19.0
+
+  '@shikijs/themes@3.19.0':
+    dependencies:
+      '@shikijs/types': 3.19.0
+
+  '@shikijs/types@3.19.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/vscode-textmate@10.0.2': {}
+
+  '@sindresorhus/is@4.6.0': {}
+
+  '@swc/helpers@0.5.17':
+    dependencies:
+      tslib: 2.8.1
+
+  '@szmarczak/http-timer@4.0.6':
+    dependencies:
+      defer-to-connect: 2.0.1
+
+  '@tailwindcss/node@4.1.13':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.18.3
+      jiti: 2.5.1
+      lightningcss: 1.30.1
+      magic-string: 0.30.19
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.13
+
+  '@tailwindcss/oxide-android-arm64@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.13':
+    dependencies:
+      detect-libc: 2.0.4
+      tar: 7.4.3
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.13
+      '@tailwindcss/oxide-darwin-arm64': 4.1.13
+      '@tailwindcss/oxide-darwin-x64': 4.1.13
+      '@tailwindcss/oxide-freebsd-x64': 4.1.13
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.13
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.13
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.13
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.13
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.13
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.13
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.13
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.13
+
+  '@tailwindcss/postcss@4.1.13':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.13
+      '@tailwindcss/oxide': 4.1.13
+      postcss: 8.5.6
+      tailwindcss: 4.1.13
+
+  '@tauri-apps/api@2.9.0': {}
+
+  '@tauri-apps/api@2.9.1': {}
+
+  '@tauri-apps/cli-darwin-arm64@2.9.5':
+    optional: true
+
+  '@tauri-apps/cli-darwin-x64@2.9.5':
+    optional: true
+
+  '@tauri-apps/cli-linux-arm-gnueabihf@2.9.5':
+    optional: true
+
+  '@tauri-apps/cli-linux-arm64-gnu@2.9.5':
+    optional: true
+
+  '@tauri-apps/cli-linux-arm64-musl@2.9.5':
+    optional: true
+
+  '@tauri-apps/cli-linux-riscv64-gnu@2.9.5':
+    optional: true
+
+  '@tauri-apps/cli-linux-x64-gnu@2.9.5':
+    optional: true
+
+  '@tauri-apps/cli-linux-x64-musl@2.9.5':
+    optional: true
+
+  '@tauri-apps/cli-win32-arm64-msvc@2.9.5':
+    optional: true
+
+  '@tauri-apps/cli-win32-ia32-msvc@2.9.5':
+    optional: true
+
+  '@tauri-apps/cli-win32-x64-msvc@2.9.5':
+    optional: true
+
+  '@tauri-apps/cli@2.9.5':
+    optionalDependencies:
+      '@tauri-apps/cli-darwin-arm64': 2.9.5
+      '@tauri-apps/cli-darwin-x64': 2.9.5
+      '@tauri-apps/cli-linux-arm-gnueabihf': 2.9.5
+      '@tauri-apps/cli-linux-arm64-gnu': 2.9.5
+      '@tauri-apps/cli-linux-arm64-musl': 2.9.5
+      '@tauri-apps/cli-linux-riscv64-gnu': 2.9.5
+      '@tauri-apps/cli-linux-x64-gnu': 2.9.5
+      '@tauri-apps/cli-linux-x64-musl': 2.9.5
+      '@tauri-apps/cli-win32-arm64-msvc': 2.9.5
+      '@tauri-apps/cli-win32-ia32-msvc': 2.9.5
+      '@tauri-apps/cli-win32-x64-msvc': 2.9.5
+
+  '@tauri-apps/plugin-dialog@2.4.2':
+    dependencies:
+      '@tauri-apps/api': 2.9.1
+
+  '@tauri-apps/plugin-notification@2.3.3':
+    dependencies:
+      '@tauri-apps/api': 2.9.1
+
+  '@tauri-apps/plugin-process@2.3.1':
+    dependencies:
+      '@tauri-apps/api': 2.9.1
+
+  '@tauri-apps/plugin-updater@2.9.0':
+    dependencies:
+      '@tauri-apps/api': 2.9.1
+
+  '@tootallnate/once@2.0.0': {}
+
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.28.4
+      '@babel/types': 7.28.4
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.28.4
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.28.4
+      '@babel/types': 7.28.4
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.28.4
+
+  '@types/cacheable-request@6.0.3':
+    dependencies:
+      '@types/http-cache-semantics': 4.0.4
+      '@types/keyv': 3.1.4
+      '@types/node': 24.3.1
+      '@types/responselike': 1.0.3
+
+  '@types/d3-array@3.2.2': {}
+
+  '@types/d3-axis@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-brush@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-chord@3.0.6': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-contour@3.0.6':
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-delaunay@6.0.4': {}
+
+  '@types/d3-dispatch@3.0.7': {}
+
+  '@types/d3-drag@3.0.7':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-dsv@3.0.7': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-fetch@3.0.7':
+    dependencies:
+      '@types/d3-dsv': 3.0.7
+
+  '@types/d3-force@3.0.10': {}
+
+  '@types/d3-format@3.0.4': {}
+
+  '@types/d3-geo@3.1.0':
+    dependencies:
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-hierarchy@3.1.7': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-polygon@3.0.2': {}
+
+  '@types/d3-quadtree@3.0.6': {}
+
+  '@types/d3-random@3.0.3': {}
+
+  '@types/d3-scale-chromatic@3.1.0': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-selection@3.0.11': {}
+
+  '@types/d3-shape@3.1.7':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time-format@4.0.3': {}
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/d3-transition@3.0.9':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-zoom@3.0.8':
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3@7.4.3':
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-axis': 3.0.6
+      '@types/d3-brush': 3.0.6
+      '@types/d3-chord': 3.0.6
+      '@types/d3-color': 3.1.3
+      '@types/d3-contour': 3.0.6
+      '@types/d3-delaunay': 6.0.4
+      '@types/d3-dispatch': 3.0.7
+      '@types/d3-drag': 3.0.7
+      '@types/d3-dsv': 3.0.7
+      '@types/d3-ease': 3.0.2
+      '@types/d3-fetch': 3.0.7
+      '@types/d3-force': 3.0.10
+      '@types/d3-format': 3.0.4
+      '@types/d3-geo': 3.1.0
+      '@types/d3-hierarchy': 3.1.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-path': 3.1.1
+      '@types/d3-polygon': 3.0.2
+      '@types/d3-quadtree': 3.0.6
+      '@types/d3-random': 3.0.3
+      '@types/d3-scale': 4.0.9
+      '@types/d3-scale-chromatic': 3.1.0
+      '@types/d3-selection': 3.0.11
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-time-format': 4.0.3
+      '@types/d3-timer': 3.0.2
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+
+  '@types/debug@4.1.12':
+    dependencies:
+      '@types/ms': 2.1.0
+
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.8
+
+  '@types/estree@1.0.8': {}
+
+  '@types/fs-extra@9.0.13':
+    dependencies:
+      '@types/node': 24.3.1
+
+  '@types/geojson@7946.0.16': {}
+
+  '@types/hast@2.3.10':
+    dependencies:
+      '@types/unist': 2.0.11
+
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/http-cache-semantics@4.0.4': {}
+
+  '@types/http-proxy@1.17.16':
+    dependencies:
+      '@types/node': 24.3.1
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/katex@0.16.7': {}
+
+  '@types/keyv@3.1.4':
+    dependencies:
+      '@types/node': 24.3.1
+
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/ms@2.1.0': {}
+
+  '@types/node@22.18.10':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/node@24.3.1':
+    dependencies:
+      undici-types: 7.10.0
+
+  '@types/plist@3.0.5':
+    dependencies:
+      '@types/node': 24.3.1
+      xmlbuilder: 15.1.1
+    optional: true
+
+  '@types/react-dom@19.1.9(@types/react@19.1.12)':
+    dependencies:
+      '@types/react': 19.1.12
+
+  '@types/react-syntax-highlighter@15.5.13':
+    dependencies:
+      '@types/react': 19.1.12
+
+  '@types/react@19.1.12':
+    dependencies:
+      csstype: 3.1.3
+
+  '@types/responselike@1.0.3':
+    dependencies:
+      '@types/node': 24.3.1
+
+  '@types/trusted-types@2.0.7':
+    optional: true
+
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
+
+  '@types/verror@1.10.11':
+    optional: true
+
+  '@types/yauzl@2.10.3':
+    dependencies:
+      '@types/node': 24.3.1
+    optional: true
+
+  '@typescript-eslint/eslint-plugin@8.43.0(@typescript-eslint/parser@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)
+      '@typescript-eslint/scope-manager': 8.43.0
+      '@typescript-eslint/type-utils': 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)
+      '@typescript-eslint/visitor-keys': 8.43.0
+      eslint: 9.35.0(jiti@2.5.1)
+      graphemer: 1.4.0
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.1.0(typescript@5.8.3)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.43.0
+      '@typescript-eslint/types': 8.43.0
+      '@typescript-eslint/typescript-estree': 8.43.0(typescript@5.8.3)
+      '@typescript-eslint/visitor-keys': 8.43.0
+      debug: 4.4.1(supports-color@5.5.0)
+      eslint: 9.35.0(jiti@2.5.1)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.43.0(typescript@5.8.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.43.0(typescript@5.8.3)
+      '@typescript-eslint/types': 8.43.0
+      debug: 4.4.1(supports-color@5.5.0)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.43.0':
+    dependencies:
+      '@typescript-eslint/types': 8.43.0
+      '@typescript-eslint/visitor-keys': 8.43.0
+
+  '@typescript-eslint/tsconfig-utils@8.43.0(typescript@5.8.3)':
+    dependencies:
+      typescript: 5.8.3
+
+  '@typescript-eslint/type-utils@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.43.0
+      '@typescript-eslint/typescript-estree': 8.43.0(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)
+      debug: 4.4.1(supports-color@5.5.0)
+      eslint: 9.35.0(jiti@2.5.1)
+      ts-api-utils: 2.1.0(typescript@5.8.3)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@8.43.0': {}
+
+  '@typescript-eslint/typescript-estree@8.43.0(typescript@5.8.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.43.0(typescript@5.8.3)
+      '@typescript-eslint/tsconfig-utils': 8.43.0(typescript@5.8.3)
+      '@typescript-eslint/types': 8.43.0
+      '@typescript-eslint/visitor-keys': 8.43.0
+      debug: 4.4.1(supports-color@5.5.0)
+      fast-glob: 3.3.3
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.7.3
+      ts-api-utils: 2.1.0(typescript@5.8.3)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.35.0(jiti@2.5.1))
+      '@typescript-eslint/scope-manager': 8.43.0
+      '@typescript-eslint/types': 8.43.0
+      '@typescript-eslint/typescript-estree': 8.43.0(typescript@5.8.3)
+      eslint: 9.35.0(jiti@2.5.1)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.43.0':
+    dependencies:
+      '@typescript-eslint/types': 8.43.0
+      eslint-visitor-keys: 4.2.1
+
+  '@ungap/structured-clone@1.3.0': {}
+
+  '@vitejs/plugin-react@5.0.2(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.6)(yaml@2.8.1))':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.4)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.4)
+      '@rolldown/pluginutils': 1.0.0-beta.34
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.17.0
+      vite: 7.1.5(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.6)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@xmldom/xmldom@0.8.11': {}
+
+  '@xterm/addon-fit@0.10.0(@xterm/xterm@5.5.0)':
+    dependencies:
+      '@xterm/xterm': 5.5.0
+
+  '@xterm/xterm@5.5.0': {}
+
+  accepts@2.0.0:
+    dependencies:
+      mime-types: 3.0.1
+      negotiator: 1.0.0
+
+  acorn-jsx@5.3.2(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
+  acorn@8.15.0: {}
+
+  agent-base@6.0.2:
+    dependencies:
+      debug: 4.4.1(supports-color@5.5.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  ajv-formats@3.0.1(ajv@8.17.1):
+    optionalDependencies:
+      ajv: 8.17.1
+
+  ajv-keywords@3.5.2(ajv@6.12.6):
+    dependencies:
+      ajv: 6.12.6
+
+  ajv@6.12.6:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ajv@8.17.1:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.0
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.2.2: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@6.2.3: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  app-builder-bin@4.0.0: {}
+
+  app-builder-lib@24.13.3(dmg-builder@24.13.3)(electron-builder-squirrel-windows@24.13.3):
+    dependencies:
+      '@develar/schema-utils': 2.6.5
+      '@electron/notarize': 2.2.1
+      '@electron/osx-sign': 1.0.5
+      '@electron/universal': 1.5.1
+      '@malept/flatpak-bundler': 0.4.0
+      '@types/fs-extra': 9.0.13
+      async-exit-hook: 2.0.1
+      bluebird-lst: 1.0.9
+      builder-util: 24.13.1
+      builder-util-runtime: 9.2.4
+      chromium-pickle-js: 0.2.0
+      debug: 4.4.1(supports-color@5.5.0)
+      dmg-builder: 24.13.3(electron-builder-squirrel-windows@24.13.3)
+      ejs: 3.1.10
+      electron-builder-squirrel-windows: 24.13.3(dmg-builder@24.13.3)
+      electron-publish: 24.13.1
+      form-data: 4.0.4
+      fs-extra: 10.1.0
+      hosted-git-info: 4.1.0
+      is-ci: 3.0.1
+      isbinaryfile: 5.0.6
+      js-yaml: 4.1.0
+      lazy-val: 1.0.5
+      minimatch: 5.1.6
+      read-config-file: 6.3.2
+      sanitize-filename: 1.6.3
+      semver: 7.7.3
+      tar: 6.2.1
+      temp-file: 3.4.0
+    transitivePeerDependencies:
+      - supports-color
+
+  archiver-utils@2.1.0:
+    dependencies:
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      lazystream: 1.0.1
+      lodash.defaults: 4.2.0
+      lodash.difference: 4.5.0
+      lodash.flatten: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.union: 4.6.0
+      normalize-path: 3.0.0
+      readable-stream: 2.3.8
+
+  archiver-utils@3.0.4:
+    dependencies:
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      lazystream: 1.0.1
+      lodash.defaults: 4.2.0
+      lodash.difference: 4.5.0
+      lodash.flatten: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.union: 4.6.0
+      normalize-path: 3.0.0
+      readable-stream: 3.6.2
+
+  archiver@5.3.2:
+    dependencies:
+      archiver-utils: 2.1.0
+      async: 3.2.6
+      buffer-crc32: 0.2.13
+      readable-stream: 3.6.2
+      readdir-glob: 1.1.3
+      tar-stream: 2.2.0
+      zip-stream: 4.1.1
+
+  argparse@2.0.1: {}
+
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
+  assert-plus@1.0.0:
+    optional: true
+
+  astral-regex@2.0.0:
+    optional: true
+
+  async-exit-hook@2.0.1: {}
+
+  async@3.2.6: {}
+
+  asynckit@0.4.0: {}
+
+  at-least-node@1.0.0: {}
+
+  atomically@2.0.3:
+    dependencies:
+      stubborn-fs: 1.2.5
+      when-exit: 2.1.4
+
+  autoprefixer@10.4.21(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.25.4
+      caniuse-lite: 1.0.30001741
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  bail@2.0.2: {}
+
+  balanced-match@1.0.2: {}
+
+  base64-js@1.5.1: {}
+
+  binary-extensions@2.3.0: {}
+
+  bl@4.1.0:
+    dependencies:
+      buffer: 5.7.1
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+
+  bluebird-lst@1.0.9:
+    dependencies:
+      bluebird: 3.7.2
+
+  bluebird@3.7.2: {}
+
+  body-parser@2.2.0:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 4.4.1(supports-color@5.5.0)
+      http-errors: 2.0.0
+      iconv-lite: 0.6.3
+      on-finished: 2.4.1
+      qs: 6.14.0
+      raw-body: 3.0.1
+      type-is: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  boolean@3.2.0:
+    optional: true
+
+  brace-expansion@1.1.12:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@2.0.2:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.25.4:
+    dependencies:
+      caniuse-lite: 1.0.30001741
+      electron-to-chromium: 1.5.217
+      node-releases: 2.0.20
+      update-browserslist-db: 1.1.3(browserslist@4.25.4)
+
+  buffer-crc32@0.2.13: {}
+
+  buffer-equal@1.0.1: {}
+
+  buffer-from@1.1.2: {}
+
+  buffer@5.7.1:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
+  builder-util-runtime@9.2.4:
+    dependencies:
+      debug: 4.4.1(supports-color@5.5.0)
+      sax: 1.4.1
+    transitivePeerDependencies:
+      - supports-color
+
+  builder-util@24.13.1:
+    dependencies:
+      7zip-bin: 5.2.0
+      '@types/debug': 4.1.12
+      app-builder-bin: 4.0.0
+      bluebird-lst: 1.0.9
+      builder-util-runtime: 9.2.4
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.1(supports-color@5.5.0)
+      fs-extra: 10.1.0
+      http-proxy-agent: 5.0.0
+      https-proxy-agent: 5.0.1
+      is-ci: 3.0.1
+      js-yaml: 4.1.0
+      source-map-support: 0.5.21
+      stat-mode: 1.0.0
+      temp-file: 3.4.0
+    transitivePeerDependencies:
+      - supports-color
+
+  bytes@3.1.2: {}
+
+  cacheable-lookup@5.0.4: {}
+
+  cacheable-request@7.0.4:
+    dependencies:
+      clone-response: 1.0.3
+      get-stream: 5.2.0
+      http-cache-semantics: 4.2.0
+      keyv: 4.5.4
+      lowercase-keys: 2.0.0
+      normalize-url: 6.1.0
+      responselike: 2.0.1
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  callsites@3.1.0: {}
+
+  caniuse-lite@1.0.30001741: {}
+
+  ccount@2.0.1: {}
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@1.1.4: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@1.2.4: {}
+
+  character-entities@2.0.2: {}
+
+  character-reference-invalid@1.1.4: {}
+
+  character-reference-invalid@2.0.1: {}
+
+  chevrotain-allstar@0.3.1(chevrotain@11.0.3):
+    dependencies:
+      chevrotain: 11.0.3
+      lodash-es: 4.17.21
+
+  chevrotain@11.0.3:
+    dependencies:
+      '@chevrotain/cst-dts-gen': 11.0.3
+      '@chevrotain/gast': 11.0.3
+      '@chevrotain/regexp-to-ast': 11.0.3
+      '@chevrotain/types': 11.0.3
+      '@chevrotain/utils': 11.0.3
+      lodash-es: 4.17.21
+
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  chownr@2.0.0: {}
+
+  chownr@3.0.0: {}
+
+  chromium-pickle-js@0.2.0: {}
+
+  ci-info@3.9.0: {}
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  cli-truncate@2.1.0:
+    dependencies:
+      slice-ansi: 3.0.0
+      string-width: 4.2.3
+    optional: true
+
+  cli-truncate@4.0.0:
+    dependencies:
+      slice-ansi: 5.0.0
+      string-width: 7.2.0
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  clone-response@1.0.3:
+    dependencies:
+      mimic-response: 1.0.1
+
+  clsx@1.2.1: {}
+
+  clsx@2.1.1: {}
+
+  cmdk@1.1.1(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  color-string@1.9.1:
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.4
+
+  color2k@2.0.3: {}
+
+  color@4.2.3:
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.1
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  comma-separated-tokens@1.0.8: {}
+
+  comma-separated-tokens@2.0.3: {}
+
+  commander@5.1.0: {}
+
+  commander@7.2.0: {}
+
+  commander@8.3.0: {}
+
+  compare-version@0.1.2: {}
+
+  compress-commons@4.1.2:
+    dependencies:
+      buffer-crc32: 0.2.13
+      crc32-stream: 4.0.3
+      normalize-path: 3.0.0
+      readable-stream: 3.6.2
+
+  concat-map@0.0.1: {}
+
+  concurrently@9.2.1:
+    dependencies:
+      chalk: 4.1.2
+      rxjs: 7.8.2
+      shell-quote: 1.8.3
+      supports-color: 8.1.1
+      tree-kill: 1.2.2
+      yargs: 17.7.2
+
+  conf@15.0.2:
+    dependencies:
+      ajv: 8.17.1
+      ajv-formats: 3.0.1(ajv@8.17.1)
+      atomically: 2.0.3
+      debounce-fn: 6.0.0
+      dot-prop: 10.1.0
+      env-paths: 3.0.0
+      json-schema-typed: 8.0.1
+      semver: 7.7.3
+      uint8array-extras: 1.5.0
+
+  confbox@0.1.8: {}
+
+  config-file-ts@0.2.6:
+    dependencies:
+      glob: 10.4.5
+      typescript: 5.8.3
+
+  content-disposition@1.0.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  content-type@1.0.5: {}
+
+  convert-source-map@2.0.0: {}
+
+  cookie-signature@1.2.2: {}
+
+  cookie@0.7.2: {}
+
+  core-util-is@1.0.2: {}
+
+  cors@2.8.5:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+
+  cose-base@1.0.3:
+    dependencies:
+      layout-base: 1.0.2
+
+  cose-base@2.2.0:
+    dependencies:
+      layout-base: 2.0.1
+
+  crc-32@1.2.2: {}
+
+  crc32-stream@4.0.3:
+    dependencies:
+      crc-32: 1.2.2
+      readable-stream: 3.6.2
+
+  crc@3.8.0:
+    dependencies:
+      buffer: 5.7.1
+    optional: true
+
+  cross-env@7.0.3:
+    dependencies:
+      cross-spawn: 7.0.6
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  csstype@3.1.3: {}
+
+  cytoscape-cose-bilkent@4.1.0(cytoscape@3.33.1):
+    dependencies:
+      cose-base: 1.0.3
+      cytoscape: 3.33.1
+
+  cytoscape-fcose@2.2.0(cytoscape@3.33.1):
+    dependencies:
+      cose-base: 2.2.0
+      cytoscape: 3.33.1
+
+  cytoscape@3.33.1: {}
+
+  d3-array@2.12.1:
+    dependencies:
+      internmap: 1.0.1
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-axis@3.0.0: {}
+
+  d3-brush@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3-chord@3.0.1:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-color@3.1.0: {}
+
+  d3-contour@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-delaunay@6.0.4:
+    dependencies:
+      delaunator: 5.0.1
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-dsv@3.0.1:
+    dependencies:
+      commander: 7.2.0
+      iconv-lite: 0.6.3
+      rw: 1.3.3
+
+  d3-ease@3.0.1: {}
+
+  d3-fetch@3.0.1:
+    dependencies:
+      d3-dsv: 3.0.1
+
+  d3-force@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+
+  d3-format@3.1.0: {}
+
+  d3-geo@3.1.1:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-hierarchy@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@1.0.9: {}
+
+  d3-path@3.1.0: {}
+
+  d3-polygon@3.0.1: {}
+
+  d3-quadtree@3.0.1: {}
+
+  d3-random@3.0.1: {}
+
+  d3-sankey@0.12.3:
+    dependencies:
+      d3-array: 2.12.1
+      d3-shape: 1.3.7
+
+  d3-scale-chromatic@3.1.0:
+    dependencies:
+      d3-color: 3.1.0
+      d3-interpolate: 3.0.1
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-shape@1.3.7:
+    dependencies:
+      d3-path: 1.0.9
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3@7.9.0:
+    dependencies:
+      d3-array: 3.2.4
+      d3-axis: 3.0.0
+      d3-brush: 3.0.0
+      d3-chord: 3.0.1
+      d3-color: 3.1.0
+      d3-contour: 4.0.2
+      d3-delaunay: 6.0.4
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-dsv: 3.0.1
+      d3-ease: 3.0.1
+      d3-fetch: 3.0.1
+      d3-force: 3.0.0
+      d3-format: 3.1.0
+      d3-geo: 3.1.1
+      d3-hierarchy: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-path: 3.1.0
+      d3-polygon: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-random: 3.0.1
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.1.0
+      d3-selection: 3.0.0
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+      d3-timer: 3.0.1
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+      d3-zoom: 3.0.0
+
+  dagre-d3-es@7.0.13:
+    dependencies:
+      d3: 7.9.0
+      lodash-es: 4.17.21
+
+  dayjs@1.11.19: {}
+
+  debounce-fn@6.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  debug@4.4.1(supports-color@5.5.0):
+    dependencies:
+      ms: 2.1.3
+    optionalDependencies:
+      supports-color: 5.5.0
+
+  decimal.js@10.6.0: {}
+
+  decode-named-character-reference@1.2.0:
+    dependencies:
+      character-entities: 2.0.2
+
+  decompress-response@6.0.0:
+    dependencies:
+      mimic-response: 3.1.0
+
+  deep-is@0.1.4: {}
+
+  deepmerge@4.3.1: {}
+
+  defer-to-connect@2.0.1: {}
+
+  define-data-property@1.1.4:
+    dependencies:
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
+    optional: true
+
+  define-properties@1.2.1:
+    dependencies:
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
+      object-keys: 1.1.1
+    optional: true
+
+  delaunator@5.0.1:
+    dependencies:
+      robust-predicates: 3.0.2
+
+  delayed-stream@1.0.0: {}
+
+  depd@2.0.0: {}
+
+  dequal@2.0.3: {}
+
+  detect-libc@2.0.4: {}
+
+  detect-node-es@1.1.0: {}
+
+  detect-node@2.1.0:
+    optional: true
+
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
+  dir-compare@3.3.0:
+    dependencies:
+      buffer-equal: 1.0.1
+      minimatch: 3.1.2
+
+  dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3):
+    dependencies:
+      app-builder-lib: 24.13.3(dmg-builder@24.13.3)(electron-builder-squirrel-windows@24.13.3)
+      builder-util: 24.13.1
+      builder-util-runtime: 9.2.4
+      fs-extra: 10.1.0
+      iconv-lite: 0.6.3
+      js-yaml: 4.1.0
+    optionalDependencies:
+      dmg-license: 1.0.11
+    transitivePeerDependencies:
+      - electron-builder-squirrel-windows
+      - supports-color
+
+  dmg-license@1.0.11:
+    dependencies:
+      '@types/plist': 3.0.5
+      '@types/verror': 1.10.11
+      ajv: 6.12.6
+      crc: 3.8.0
+      iconv-corefoundation: 1.1.7
+      plist: 3.1.0
+      smart-buffer: 4.2.0
+      verror: 1.10.1
+    optional: true
+
+  dompurify@3.2.7:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
+  dot-prop@10.1.0:
+    dependencies:
+      type-fest: 5.1.0
+
+  dotenv-expand@5.1.0: {}
+
+  dotenv@9.0.2: {}
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  eastasianwidth@0.2.0: {}
+
+  ee-first@1.1.1: {}
+
+  ejs@3.1.10:
+    dependencies:
+      jake: 10.9.4
+
+  electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3):
+    dependencies:
+      app-builder-lib: 24.13.3(dmg-builder@24.13.3)(electron-builder-squirrel-windows@24.13.3)
+      archiver: 5.3.2
+      builder-util: 24.13.1
+      fs-extra: 10.1.0
+    transitivePeerDependencies:
+      - dmg-builder
+      - supports-color
+
+  electron-builder@24.13.3(electron-builder-squirrel-windows@24.13.3):
+    dependencies:
+      app-builder-lib: 24.13.3(dmg-builder@24.13.3)(electron-builder-squirrel-windows@24.13.3)
+      builder-util: 24.13.1
+      builder-util-runtime: 9.2.4
+      chalk: 4.1.2
+      dmg-builder: 24.13.3(electron-builder-squirrel-windows@24.13.3)
+      fs-extra: 10.1.0
+      is-ci: 3.0.1
+      lazy-val: 1.0.5
+      read-config-file: 6.3.2
+      simple-update-notifier: 2.0.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - electron-builder-squirrel-windows
+      - supports-color
+
+  electron-context-menu@4.1.1:
+    dependencies:
+      cli-truncate: 4.0.0
+      electron-dl: 4.0.0
+      electron-is-dev: 3.0.1
+
+  electron-dl@4.0.0:
+    dependencies:
+      ext-name: 5.0.0
+      pupa: 3.3.0
+      unused-filename: 4.0.1
+
+  electron-is-dev@3.0.1: {}
+
+  electron-publish@24.13.1:
+    dependencies:
+      '@types/fs-extra': 9.0.13
+      builder-util: 24.13.1
+      builder-util-runtime: 9.2.4
+      chalk: 4.1.2
+      fs-extra: 10.1.0
+      lazy-val: 1.0.5
+      mime: 2.6.0
+    transitivePeerDependencies:
+      - supports-color
+
+  electron-store@11.0.2:
+    dependencies:
+      conf: 15.0.2
+      type-fest: 5.1.0
+
+  electron-to-chromium@1.5.217: {}
+
+  electron@38.2.0:
+    dependencies:
+      '@electron/get': 2.0.3
+      '@types/node': 22.18.10
+      extract-zip: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  emoji-regex@10.6.0: {}
+
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
+  encodeurl@2.0.0: {}
+
+  end-of-stream@1.4.5:
+    dependencies:
+      once: 1.4.0
+
+  enhanced-resolve@5.18.3:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.3
+
+  entities@6.0.1: {}
+
+  env-paths@2.2.1: {}
+
+  env-paths@3.0.0: {}
+
+  err-code@2.0.3: {}
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  es6-error@4.1.1:
+    optional: true
+
+  esbuild@0.25.9:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.9
+      '@esbuild/android-arm': 0.25.9
+      '@esbuild/android-arm64': 0.25.9
+      '@esbuild/android-x64': 0.25.9
+      '@esbuild/darwin-arm64': 0.25.9
+      '@esbuild/darwin-x64': 0.25.9
+      '@esbuild/freebsd-arm64': 0.25.9
+      '@esbuild/freebsd-x64': 0.25.9
+      '@esbuild/linux-arm': 0.25.9
+      '@esbuild/linux-arm64': 0.25.9
+      '@esbuild/linux-ia32': 0.25.9
+      '@esbuild/linux-loong64': 0.25.9
+      '@esbuild/linux-mips64el': 0.25.9
+      '@esbuild/linux-ppc64': 0.25.9
+      '@esbuild/linux-riscv64': 0.25.9
+      '@esbuild/linux-s390x': 0.25.9
+      '@esbuild/linux-x64': 0.25.9
+      '@esbuild/netbsd-arm64': 0.25.9
+      '@esbuild/netbsd-x64': 0.25.9
+      '@esbuild/openbsd-arm64': 0.25.9
+      '@esbuild/openbsd-x64': 0.25.9
+      '@esbuild/openharmony-arm64': 0.25.9
+      '@esbuild/sunos-x64': 0.25.9
+      '@esbuild/win32-arm64': 0.25.9
+      '@esbuild/win32-ia32': 0.25.9
+      '@esbuild/win32-x64': 0.25.9
+
+  escalade@3.2.0: {}
+
+  escape-goat@4.0.0: {}
+
+  escape-html@1.0.3: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  escape-string-regexp@5.0.0: {}
+
+  eslint-plugin-react-hooks@5.2.0(eslint@9.35.0(jiti@2.5.1)):
+    dependencies:
+      eslint: 9.35.0(jiti@2.5.1)
+
+  eslint-plugin-react-refresh@0.4.20(eslint@9.35.0(jiti@2.5.1)):
+    dependencies:
+      eslint: 9.35.0(jiti@2.5.1)
+
+  eslint-scope@8.4.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@4.2.1: {}
+
+  eslint@9.35.0(jiti@2.5.1):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.35.0(jiti@2.5.1))
+      '@eslint-community/regexpp': 4.12.1
+      '@eslint/config-array': 0.21.0
+      '@eslint/config-helpers': 0.3.1
+      '@eslint/core': 0.15.2
+      '@eslint/eslintrc': 3.3.1
+      '@eslint/js': 9.35.0
+      '@eslint/plugin-kit': 0.3.5
+      '@humanfs/node': 0.16.7
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.1(supports-color@5.5.0)
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.6.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.5.1
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@10.4.0:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 4.2.1
+
+  esquery@1.6.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
+  estree-util-is-identifier-name@3.0.0: {}
+
+  esutils@2.0.3: {}
+
+  etag@1.8.1: {}
+
+  eventemitter3@4.0.7: {}
+
+  express@5.1.0:
+    dependencies:
+      accepts: 2.0.0
+      body-parser: 2.2.0
+      content-disposition: 1.0.0
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.2.2
+      debug: 4.4.1(supports-color@5.5.0)
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 2.1.0
+      fresh: 2.0.0
+      http-errors: 2.0.0
+      merge-descriptors: 2.0.0
+      mime-types: 3.0.1
+      on-finished: 2.4.1
+      once: 1.4.0
+      parseurl: 1.3.3
+      proxy-addr: 2.0.7
+      qs: 6.14.0
+      range-parser: 1.2.1
+      router: 2.2.0
+      send: 1.2.0
+      serve-static: 2.2.0
+      statuses: 2.0.2
+      type-is: 2.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  ext-list@2.2.2:
+    dependencies:
+      mime-db: 1.54.0
+
+  ext-name@5.0.0:
+    dependencies:
+      ext-list: 2.2.2
+      sort-keys-length: 1.0.1
+
+  extend@3.0.2: {}
+
+  extract-zip@2.0.1:
+    dependencies:
+      debug: 4.4.1(supports-color@5.5.0)
+      get-stream: 5.2.0
+      yauzl: 2.10.0
+    optionalDependencies:
+      '@types/yauzl': 2.10.3
+    transitivePeerDependencies:
+      - supports-color
+
+  extsprintf@1.4.1:
+    optional: true
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fast-uri@3.1.0: {}
+
+  fastq@1.19.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fault@1.0.4:
+    dependencies:
+      format: 0.2.2
+
+  fd-slicer@1.1.0:
+    dependencies:
+      pend: 1.2.0
+
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  filelist@1.0.4:
+    dependencies:
+      minimatch: 5.1.6
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  finalhandler@2.1.0:
+    dependencies:
+      debug: 4.4.1(supports-color@5.5.0)
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+
+  flat@5.0.2: {}
+
+  flatted@3.3.3: {}
+
+  follow-redirects@1.15.11(debug@4.4.1):
+    optionalDependencies:
+      debug: 4.4.1(supports-color@5.5.0)
+
+  foreground-child@3.3.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
+  form-data@4.0.4:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.2
+      mime-types: 2.1.35
+
+  format@0.2.2: {}
+
+  forwarded@0.2.0: {}
+
+  fraction.js@4.3.7: {}
+
+  framer-motion@12.23.24(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      motion-dom: 12.23.23
+      motion-utils: 12.23.6
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  fresh@2.0.0: {}
+
+  fs-constants@1.0.0: {}
+
+  fs-extra@10.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
+  fs-extra@8.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 4.0.0
+      universalify: 0.1.2
+
+  fs-extra@9.1.0:
+    dependencies:
+      at-least-node: 1.0.0
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
+  fs-minipass@2.1.0:
+    dependencies:
+      minipass: 3.3.6
+
+  fs.realpath@1.0.0: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  gensync@1.0.0-beta.2: {}
+
+  get-caller-file@2.0.5: {}
+
+  get-east-asian-width@1.4.0: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-nonce@1.0.1: {}
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  get-stream@5.2.0:
+    dependencies:
+      pump: 3.0.3
+
+  get-tsconfig@4.10.1:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@10.4.5:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
+  glob@7.2.3:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+
+  global-agent@3.0.0:
+    dependencies:
+      boolean: 3.2.0
+      es6-error: 4.1.1
+      matcher: 3.0.0
+      roarr: 2.15.4
+      semver: 7.7.3
+      serialize-error: 7.0.1
+    optional: true
+
+  globals@14.0.0: {}
+
+  globals@16.4.0: {}
+
+  globalthis@1.0.4:
+    dependencies:
+      define-properties: 1.2.1
+      gopd: 1.2.0
+    optional: true
+
+  gopd@1.2.0: {}
+
+  got@11.8.6:
+    dependencies:
+      '@sindresorhus/is': 4.6.0
+      '@szmarczak/http-timer': 4.0.6
+      '@types/cacheable-request': 6.0.3
+      '@types/responselike': 1.0.3
+      cacheable-lookup: 5.0.4
+      cacheable-request: 7.0.4
+      decompress-response: 6.0.0
+      http2-wrapper: 1.0.3
+      lowercase-keys: 2.0.0
+      p-cancelable: 2.1.1
+      responselike: 2.0.1
+
+  graceful-fs@4.2.11: {}
+
+  graphemer@1.4.0: {}
+
+  hachure-fill@0.5.2: {}
+
+  has-flag@3.0.0: {}
+
+  has-flag@4.0.0: {}
+
+  has-property-descriptors@1.0.2:
+    dependencies:
+      es-define-property: 1.0.1
+    optional: true
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  hast-util-from-dom@5.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hastscript: 9.0.1
+      web-namespaces: 2.0.1
+
+  hast-util-from-html-isomorphic@2.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-from-dom: 5.0.1
+      hast-util-from-html: 2.0.3
+      unist-util-remove-position: 5.0.0
+
+  hast-util-from-html@2.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      hast-util-from-parse5: 8.0.3
+      parse5: 7.3.0
+      vfile: 6.0.3
+      vfile-message: 4.0.3
+
+  hast-util-from-parse5@8.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      hastscript: 9.0.1
+      property-information: 7.1.0
+      vfile: 6.0.3
+      vfile-location: 5.0.3
+      web-namespaces: 2.0.1
+
+  hast-util-is-element@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-parse-selector@2.2.5: {}
+
+  hast-util-parse-selector@4.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-raw@9.1.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      '@ungap/structured-clone': 1.3.0
+      hast-util-from-parse5: 8.0.3
+      hast-util-to-parse5: 8.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.0
+      parse5: 7.3.0
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.0
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
+  hast-util-to-jsx-runtime@2.3.6:
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.17
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  hast-util-to-parse5@8.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      property-information: 6.5.0
+      space-separated-tokens: 2.0.2
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
+  hast-util-to-text@4.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      hast-util-is-element: 3.0.0
+      unist-util-find-after: 5.0.0
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast@1.0.0: {}
+
+  hastscript@6.0.0:
+    dependencies:
+      '@types/hast': 2.3.10
+      comma-separated-tokens: 1.0.8
+      hast-util-parse-selector: 2.2.5
+      property-information: 5.6.0
+      space-separated-tokens: 1.1.5
+
+  hastscript@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+
+  highlight.js@10.7.3: {}
+
+  highlightjs-vue@1.0.0: {}
+
+  hosted-git-info@4.1.0:
+    dependencies:
+      lru-cache: 6.0.0
+
+  html-url-attributes@3.0.1: {}
+
+  html-void-elements@3.0.0: {}
+
+  http-cache-semantics@4.2.0: {}
+
+  http-errors@2.0.0:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.1
+      toidentifier: 1.0.1
+
+  http-proxy-agent@5.0.0:
+    dependencies:
+      '@tootallnate/once': 2.0.0
+      agent-base: 6.0.2
+      debug: 4.4.1(supports-color@5.5.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  http-proxy-middleware@3.0.5:
+    dependencies:
+      '@types/http-proxy': 1.17.16
+      debug: 4.4.1(supports-color@5.5.0)
+      http-proxy: 1.18.1(debug@4.4.1)
+      is-glob: 4.0.3
+      is-plain-object: 5.0.0
+      micromatch: 4.0.8
+    transitivePeerDependencies:
+      - supports-color
+
+  http-proxy@1.18.1(debug@4.4.1):
+    dependencies:
+      eventemitter3: 4.0.7
+      follow-redirects: 1.15.11(debug@4.4.1)
+      requires-port: 1.0.0
+    transitivePeerDependencies:
+      - debug
+
+  http2-wrapper@1.0.3:
+    dependencies:
+      quick-lru: 5.1.1
+      resolve-alpn: 1.2.1
+
+  https-proxy-agent@5.0.1:
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.4.1(supports-color@5.5.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  iconv-corefoundation@1.1.7:
+    dependencies:
+      cli-truncate: 2.1.0
+      node-addon-api: 1.7.2
+    optional: true
+
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  iconv-lite@0.7.0:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  ieee754@1.2.1: {}
+
+  ignore-by-default@1.0.1: {}
+
+  ignore@5.3.2: {}
+
+  ignore@7.0.5: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  imurmurhash@0.1.4: {}
+
+  inflight@1.0.6:
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+
+  inherits@2.0.4: {}
+
+  inline-style-parser@0.2.4: {}
+
+  internmap@1.0.1: {}
+
+  internmap@2.0.3: {}
+
+  intl-messageformat@10.7.18:
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.3.6
+      '@formatjs/fast-memoize': 2.2.7
+      '@formatjs/icu-messageformat-parser': 2.11.4
+      tslib: 2.8.1
+
+  ipaddr.js@1.9.1: {}
+
+  is-alphabetical@1.0.4: {}
+
+  is-alphabetical@2.0.1: {}
+
+  is-alphanumerical@1.0.4:
+    dependencies:
+      is-alphabetical: 1.0.4
+      is-decimal: 1.0.4
+
+  is-alphanumerical@2.0.1:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+
+  is-arrayish@0.3.4: {}
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-ci@3.0.1:
+    dependencies:
+      ci-info: 3.9.0
+
+  is-decimal@1.0.4: {}
+
+  is-decimal@2.0.1: {}
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-fullwidth-code-point@4.0.0: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-hexadecimal@1.0.4: {}
+
+  is-hexadecimal@2.0.1: {}
+
+  is-number@7.0.0: {}
+
+  is-plain-obj@1.1.0: {}
+
+  is-plain-obj@4.1.0: {}
+
+  is-plain-object@5.0.0: {}
+
+  is-promise@4.0.0: {}
+
+  isarray@1.0.0: {}
+
+  isbinaryfile@4.0.10: {}
+
+  isbinaryfile@5.0.6: {}
+
+  isexe@2.0.0: {}
+
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  jake@10.9.4:
+    dependencies:
+      async: 3.2.6
+      filelist: 1.0.4
+      picocolors: 1.1.1
+
+  jiti@2.5.1: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@4.1.0:
+    dependencies:
+      argparse: 2.0.1
+
+  jsesc@3.1.0: {}
+
+  json-buffer@3.0.1: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  json-schema-typed@8.0.1: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  json-stringify-safe@5.0.1:
+    optional: true
+
+  json5@2.2.3: {}
+
+  jsonfile@4.0.0:
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  jsonfile@6.2.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  katex@0.16.25:
+    dependencies:
+      commander: 8.3.0
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  khroma@2.1.0: {}
+
+  langium@3.3.1:
+    dependencies:
+      chevrotain: 11.0.3
+      chevrotain-allstar: 0.3.1(chevrotain@11.0.3)
+      vscode-languageserver: 9.0.1
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-uri: 3.0.8
+
+  layout-base@1.0.2: {}
+
+  layout-base@2.0.1: {}
+
+  lazy-val@1.0.5: {}
+
+  lazystream@1.0.1:
+    dependencies:
+      readable-stream: 2.3.8
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lightningcss-darwin-arm64@1.30.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    optional: true
+
+  lightningcss@1.30.1:
+    dependencies:
+      detect-libc: 2.0.4
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.30.1
+      lightningcss-darwin-x64: 1.30.1
+      lightningcss-freebsd-x64: 1.30.1
+      lightningcss-linux-arm-gnueabihf: 1.30.1
+      lightningcss-linux-arm64-gnu: 1.30.1
+      lightningcss-linux-arm64-musl: 1.30.1
+      lightningcss-linux-x64-gnu: 1.30.1
+      lightningcss-linux-x64-musl: 1.30.1
+      lightningcss-win32-arm64-msvc: 1.30.1
+      lightningcss-win32-x64-msvc: 1.30.1
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  lodash-es@4.17.21: {}
+
+  lodash.defaults@4.2.0: {}
+
+  lodash.difference@4.5.0: {}
+
+  lodash.flatten@4.4.0: {}
+
+  lodash.isplainobject@4.0.6: {}
+
+  lodash.merge@4.6.2: {}
+
+  lodash.union@4.6.0: {}
+
+  lodash@4.17.21: {}
+
+  longest-streak@3.1.0: {}
+
+  lowercase-keys@2.0.0: {}
+
+  lowlight@1.20.0:
+    dependencies:
+      fault: 1.0.4
+      highlight.js: 10.7.3
+
+  lru-cache@10.4.3: {}
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  lru-cache@6.0.0:
+    dependencies:
+      yallist: 4.0.0
+
+  lucide-react@0.542.0(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+
+  magic-string@0.30.19:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  markdown-table@3.0.4: {}
+
+  marked@14.0.0: {}
+
+  marked@16.4.2: {}
+
+  matcher@3.0.0:
+    dependencies:
+      escape-string-regexp: 4.0.0
+    optional: true
+
+  math-intrinsics@1.1.0: {}
+
+  mdast-util-find-and-replace@3.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+
+  mdast-util-from-markdown@2.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.2.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
+
+  mdast-util-gfm-footnote@2.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-table@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm@3.1.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-math@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      longest-streak: 3.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      unist-util-remove-position: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-expression@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-jsx@3.2.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdxjs-esm@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.0
+
+  mdast-util-to-hast@13.2.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+
+  mdast-util-to-markdown@2.1.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.0.0
+      zwitch: 2.0.4
+
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
+  media-typer@1.1.0: {}
+
+  merge-descriptors@2.0.0: {}
+
+  merge2@1.4.1: {}
+
+  mermaid@11.12.2:
+    dependencies:
+      '@braintree/sanitize-url': 7.1.1
+      '@iconify/utils': 3.1.0
+      '@mermaid-js/parser': 0.6.3
+      '@types/d3': 7.4.3
+      cytoscape: 3.33.1
+      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.33.1)
+      cytoscape-fcose: 2.2.0(cytoscape@3.33.1)
+      d3: 7.9.0
+      d3-sankey: 0.12.3
+      dagre-d3-es: 7.0.13
+      dayjs: 1.11.19
+      dompurify: 3.2.7
+      katex: 0.16.25
+      khroma: 2.1.0
+      lodash-es: 4.17.21
+      marked: 16.4.2
+      roughjs: 4.6.6
+      stylis: 4.3.6
+      ts-dedent: 2.2.0
+      uuid: 11.1.0
+
+  micromark-core-commonmark@2.0.3:
+    dependencies:
+      decode-named-character-reference: 1.2.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-cjk-friendly-gfm-strikethrough@1.2.3(micromark-util-types@2.0.2)(micromark@4.0.2):
+    dependencies:
+      devlop: 1.1.0
+      get-east-asian-width: 1.4.0
+      micromark: 4.0.2
+      micromark-extension-cjk-friendly-util: 2.1.1(micromark-util-types@2.0.2)
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+    optionalDependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-cjk-friendly-util@2.1.1(micromark-util-types@2.0.2):
+    dependencies:
+      get-east-asian-width: 1.4.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+    optionalDependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-cjk-friendly@1.2.3(micromark-util-types@2.0.2)(micromark@4.0.2):
+    dependencies:
+      devlop: 1.1.0
+      micromark: 4.0.2
+      micromark-extension-cjk-friendly-util: 2.1.1(micromark-util-types@2.0.2)
+      micromark-util-chunked: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+    optionalDependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-footnote@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-table@2.1.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm@3.0.0:
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-math@3.1.0:
+    dependencies:
+      '@types/katex': 0.16.7
+      devlop: 1.1.0
+      katex: 0.16.25
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-space@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.2.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-html-tag-name@2.0.1: {}
+
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
+  micromark@4.0.2:
+    dependencies:
+      '@types/debug': 4.1.12
+      debug: 4.4.1(supports-color@5.5.0)
+      decode-named-character-reference: 1.2.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  mime-db@1.52.0: {}
+
+  mime-db@1.54.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  mime-types@3.0.1:
+    dependencies:
+      mime-db: 1.54.0
+
+  mime@2.6.0: {}
+
+  mimic-function@5.0.1: {}
+
+  mimic-response@1.0.1: {}
+
+  mimic-response@3.1.0: {}
+
+  minimatch@3.1.2:
+    dependencies:
+      brace-expansion: 1.1.12
+
+  minimatch@5.1.6:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimist@1.2.8: {}
+
+  minipass@3.3.6:
+    dependencies:
+      yallist: 4.0.0
+
+  minipass@5.0.0: {}
+
+  minipass@7.1.2: {}
+
+  minizlib@2.1.2:
+    dependencies:
+      minipass: 3.3.6
+      yallist: 4.0.0
+
+  minizlib@3.0.2:
+    dependencies:
+      minipass: 7.1.2
+
+  mkdirp@1.0.4: {}
+
+  mkdirp@3.0.1: {}
+
+  mlly@1.8.0:
+    dependencies:
+      acorn: 8.15.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.1
+
+  monaco-editor@0.55.1:
+    dependencies:
+      dompurify: 3.2.7
+      marked: 14.0.0
+
+  motion-dom@12.23.23:
+    dependencies:
+      motion-utils: 12.23.6
+
+  motion-utils@12.23.6: {}
+
+  motion@12.23.24(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      framer-motion: 12.23.24(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  ms@2.1.3: {}
+
+  nan@2.23.0: {}
+
+  nanoid@3.3.11: {}
+
+  natural-compare@1.4.0: {}
+
+  negotiator@1.0.0: {}
+
+  next-themes@0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  node-addon-api@1.7.2:
+    optional: true
+
+  node-pty@1.0.0:
+    dependencies:
+      nan: 2.23.0
+
+  node-releases@2.0.20: {}
+
+  nodemon@3.1.11:
+    dependencies:
+      chokidar: 3.6.0
+      debug: 4.4.1(supports-color@5.5.0)
+      ignore-by-default: 1.0.1
+      minimatch: 3.1.2
+      pstree.remy: 1.1.8
+      semver: 7.7.3
+      simple-update-notifier: 2.0.0
+      supports-color: 5.5.0
+      touch: 3.1.1
+      undefsafe: 2.0.5
+
+  normalize-path@3.0.0: {}
+
+  normalize-range@0.1.2: {}
+
+  normalize-url@6.1.0: {}
+
+  object-assign@4.1.1: {}
+
+  object-inspect@1.13.4: {}
+
+  object-keys@1.1.1:
+    optional: true
+
+  on-finished@2.4.1:
+    dependencies:
+      ee-first: 1.1.1
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  oniguruma-parser@0.12.1: {}
+
+  oniguruma-to-es@4.3.4:
+    dependencies:
+      oniguruma-parser: 0.12.1
+      regex: 6.0.1
+      regex-recursion: 6.0.2
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  p-cancelable@2.1.1: {}
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  package-json-from-dist@1.0.1: {}
+
+  package-manager-detector@1.6.0: {}
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-entities@2.0.0:
+    dependencies:
+      character-entities: 1.2.4
+      character-entities-legacy: 1.1.4
+      character-reference-invalid: 1.1.4
+      is-alphanumerical: 1.0.4
+      is-decimal: 1.0.4
+      is-hexadecimal: 1.0.4
+
+  parse-entities@4.0.2:
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.2.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
+  parseurl@1.3.3: {}
+
+  path-data-parser@0.1.0: {}
+
+  path-exists@4.0.0: {}
+
+  path-exists@5.0.0: {}
+
+  path-is-absolute@1.0.1: {}
+
+  path-key@3.1.1: {}
+
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+
+  path-to-regexp@8.3.0: {}
+
+  pathe@2.0.3: {}
+
+  pend@1.2.0: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  picomatch@4.0.3: {}
+
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.0
+      pathe: 2.0.3
+
+  plist@3.1.0:
+    dependencies:
+      '@xmldom/xmldom': 0.8.11
+      base64-js: 1.5.1
+      xmlbuilder: 15.1.1
+
+  points-on-curve@0.2.0: {}
+
+  points-on-path@0.2.1:
+    dependencies:
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prelude-ls@1.2.1: {}
+
+  prismjs@1.27.0: {}
+
+  prismjs@1.30.0: {}
+
+  process-nextick-args@2.0.1: {}
+
+  progress@2.0.3: {}
+
+  promise-retry@2.0.1:
+    dependencies:
+      err-code: 2.0.3
+      retry: 0.12.0
+
+  property-information@5.6.0:
+    dependencies:
+      xtend: 4.0.2
+
+  property-information@6.5.0: {}
+
+  property-information@7.1.0: {}
+
+  proxy-addr@2.0.7:
+    dependencies:
+      forwarded: 0.2.0
+      ipaddr.js: 1.9.1
+
+  pstree.remy@1.1.8: {}
+
+  pump@3.0.3:
+    dependencies:
+      end-of-stream: 1.4.5
+      once: 1.4.0
+
+  punycode@2.3.1: {}
+
+  pupa@3.3.0:
+    dependencies:
+      escape-goat: 4.0.0
+
+  qs@6.14.0:
+    dependencies:
+      side-channel: 1.1.0
+
+  queue-microtask@1.2.3: {}
+
+  quick-lru@5.1.1: {}
+
+  range-parser@1.2.1: {}
+
+  raw-body@3.0.1:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.0
+      iconv-lite: 0.7.0
+      unpipe: 1.0.0
+
+  react-dom@19.1.1(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+      scheduler: 0.26.0
+
+  react-markdown@10.1.0(@types/react@19.1.12)(react@19.1.1):
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/react': 19.1.12
+      devlop: 1.1.0
+      hast-util-to-jsx-runtime: 2.3.6
+      html-url-attributes: 3.0.1
+      mdast-util-to-hast: 13.2.0
+      react: 19.1.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  react-refresh@0.17.0: {}
+
+  react-remove-scroll-bar@2.3.8(@types/react@19.1.12)(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+      react-style-singleton: 2.2.3(@types/react@19.1.12)(react@19.1.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  react-remove-scroll@2.7.1(@types/react@19.1.12)(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+      react-remove-scroll-bar: 2.3.8(@types/react@19.1.12)(react@19.1.1)
+      react-style-singleton: 2.2.3(@types/react@19.1.12)(react@19.1.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.1.12)(react@19.1.1)
+      use-sidecar: 1.1.3(@types/react@19.1.12)(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  react-style-singleton@2.2.3(@types/react@19.1.12)(react@19.1.1):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.1.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  react-syntax-highlighter@15.6.6(react@19.1.1):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      highlight.js: 10.7.3
+      highlightjs-vue: 1.0.0
+      lowlight: 1.20.0
+      prismjs: 1.30.0
+      react: 19.1.1
+      refractor: 3.6.0
+
+  react@19.1.1: {}
+
+  read-config-file@6.3.2:
+    dependencies:
+      config-file-ts: 0.2.6
+      dotenv: 9.0.2
+      dotenv-expand: 5.1.0
+      js-yaml: 4.1.0
+      json5: 2.2.3
+      lazy-val: 1.0.5
+
+  readable-stream@2.3.8:
+    dependencies:
+      core-util-is: 1.0.2
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+
+  readable-stream@3.6.2:
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+
+  readdir-glob@1.1.3:
+    dependencies:
+      minimatch: 5.1.6
+
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.1
+
+  refractor@3.6.0:
+    dependencies:
+      hastscript: 6.0.0
+      parse-entities: 2.0.0
+      prismjs: 1.27.0
+
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@6.0.1:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  rehype-harden@1.1.6:
+    dependencies:
+      unist-util-visit: 5.0.0
+
+  rehype-katex@7.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/katex': 0.16.7
+      hast-util-from-html-isomorphic: 2.0.0
+      hast-util-to-text: 4.0.2
+      katex: 0.16.25
+      unist-util-visit-parents: 6.0.1
+      vfile: 6.0.3
+
+  rehype-raw@7.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-raw: 9.1.0
+      vfile: 6.0.3
+
+  remark-cjk-friendly-gfm-strikethrough@1.2.3(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(unified@11.0.5):
+    dependencies:
+      micromark-extension-cjk-friendly-gfm-strikethrough: 1.2.3(micromark-util-types@2.0.2)(micromark@4.0.2)
+      unified: 11.0.5
+    optionalDependencies:
+      '@types/mdast': 4.0.4
+    transitivePeerDependencies:
+      - micromark
+      - micromark-util-types
+
+  remark-cjk-friendly@1.2.3(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(unified@11.0.5):
+    dependencies:
+      micromark-extension-cjk-friendly: 1.2.3(micromark-util-types@2.0.2)(micromark@4.0.2)
+      unified: 11.0.5
+    optionalDependencies:
+      '@types/mdast': 4.0.4
+    transitivePeerDependencies:
+      - micromark
+      - micromark-util-types
+
+  remark-gfm@4.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-gfm: 3.1.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-math@6.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-math: 3.0.0
+      micromark-extension-math: 3.1.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      micromark-util-types: 2.0.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-rehype@11.1.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.0
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  remark-stringify@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.1.2
+      unified: 11.0.5
+
+  remend@1.0.1: {}
+
+  require-directory@2.1.1: {}
+
+  require-from-string@2.0.2: {}
+
+  requires-port@1.0.0: {}
+
+  resolve-alpn@1.2.1: {}
+
+  resolve-from@4.0.0: {}
+
+  resolve-pkg-maps@1.0.0: {}
+
+  responselike@2.0.1:
+    dependencies:
+      lowercase-keys: 2.0.0
+
+  retry@0.12.0: {}
+
+  reusify@1.1.0: {}
+
+  roarr@2.15.4:
+    dependencies:
+      boolean: 3.2.0
+      detect-node: 2.1.0
+      globalthis: 1.0.4
+      json-stringify-safe: 5.0.1
+      semver-compare: 1.0.0
+      sprintf-js: 1.1.3
+    optional: true
+
+  robust-predicates@3.0.2: {}
+
+  rollup@4.50.1:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.50.1
+      '@rollup/rollup-android-arm64': 4.50.1
+      '@rollup/rollup-darwin-arm64': 4.50.1
+      '@rollup/rollup-darwin-x64': 4.50.1
+      '@rollup/rollup-freebsd-arm64': 4.50.1
+      '@rollup/rollup-freebsd-x64': 4.50.1
+      '@rollup/rollup-linux-arm-gnueabihf': 4.50.1
+      '@rollup/rollup-linux-arm-musleabihf': 4.50.1
+      '@rollup/rollup-linux-arm64-gnu': 4.50.1
+      '@rollup/rollup-linux-arm64-musl': 4.50.1
+      '@rollup/rollup-linux-loongarch64-gnu': 4.50.1
+      '@rollup/rollup-linux-ppc64-gnu': 4.50.1
+      '@rollup/rollup-linux-riscv64-gnu': 4.50.1
+      '@rollup/rollup-linux-riscv64-musl': 4.50.1
+      '@rollup/rollup-linux-s390x-gnu': 4.50.1
+      '@rollup/rollup-linux-x64-gnu': 4.50.1
+      '@rollup/rollup-linux-x64-musl': 4.50.1
+      '@rollup/rollup-openharmony-arm64': 4.50.1
+      '@rollup/rollup-win32-arm64-msvc': 4.50.1
+      '@rollup/rollup-win32-ia32-msvc': 4.50.1
+      '@rollup/rollup-win32-x64-msvc': 4.50.1
+      fsevents: 2.3.3
+
+  roughjs@4.6.6:
+    dependencies:
+      hachure-fill: 0.5.2
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+      points-on-path: 0.2.1
+
+  router@2.2.0:
+    dependencies:
+      debug: 4.4.1(supports-color@5.5.0)
+      depd: 2.0.0
+      is-promise: 4.0.0
+      parseurl: 1.3.3
+      path-to-regexp: 8.3.0
+    transitivePeerDependencies:
+      - supports-color
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  rw@1.3.3: {}
+
+  rxjs@7.8.2:
+    dependencies:
+      tslib: 2.8.1
+
+  safe-buffer@5.1.2: {}
+
+  safe-buffer@5.2.1: {}
+
+  safer-buffer@2.1.2: {}
+
+  sanitize-filename@1.6.3:
+    dependencies:
+      truncate-utf8-bytes: 1.0.2
+
+  sax@1.4.1: {}
+
+  scheduler@0.26.0: {}
+
+  semver-compare@1.0.0:
+    optional: true
+
+  semver@6.3.1: {}
+
+  semver@7.7.3: {}
+
+  send@1.2.0:
+    dependencies:
+      debug: 4.4.1(supports-color@5.5.0)
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.0
+      mime-types: 3.0.1
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  serialize-error@7.0.1:
+    dependencies:
+      type-fest: 0.13.1
+    optional: true
+
+  serve-static@2.2.0:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  setprototypeof@1.2.0: {}
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  shell-quote@1.8.3: {}
+
+  shiki@3.19.0:
+    dependencies:
+      '@shikijs/core': 3.19.0
+      '@shikijs/engine-javascript': 3.19.0
+      '@shikijs/engine-oniguruma': 3.19.0
+      '@shikijs/langs': 3.19.0
+      '@shikijs/themes': 3.19.0
+      '@shikijs/types': 3.19.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  side-channel-list@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
+  signal-exit@4.1.0: {}
+
+  simple-git@3.28.0:
+    dependencies:
+      '@kwsites/file-exists': 1.1.1
+      '@kwsites/promise-deferred': 1.1.1
+      debug: 4.4.1(supports-color@5.5.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  simple-swizzle@0.2.4:
+    dependencies:
+      is-arrayish: 0.3.4
+
+  simple-update-notifier@2.0.0:
+    dependencies:
+      semver: 7.7.3
+
+  slice-ansi@3.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      astral-regex: 2.0.0
+      is-fullwidth-code-point: 3.0.0
+    optional: true
+
+  slice-ansi@5.0.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      is-fullwidth-code-point: 4.0.0
+
+  smart-buffer@4.2.0:
+    optional: true
+
+  sonner@2.0.7(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  sort-keys-length@1.0.1:
+    dependencies:
+      sort-keys: 1.1.2
+
+  sort-keys@1.1.2:
+    dependencies:
+      is-plain-obj: 1.1.0
+
+  source-map-js@1.2.1: {}
+
+  source-map-support@0.5.21:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map@0.6.1: {}
+
+  space-separated-tokens@1.1.5: {}
+
+  space-separated-tokens@2.0.2: {}
+
+  sprintf-js@1.1.3:
+    optional: true
+
+  stat-mode@1.0.0: {}
+
+  state-local@1.0.7: {}
+
+  statuses@2.0.1: {}
+
+  statuses@2.0.2: {}
+
+  streamdown@1.6.10(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(react@19.1.1):
+    dependencies:
+      clsx: 2.1.1
+      hast: 1.0.0
+      hast-util-to-jsx-runtime: 2.3.6
+      html-url-attributes: 3.0.1
+      katex: 0.16.25
+      lucide-react: 0.542.0(react@19.1.1)
+      marked: 16.4.2
+      mermaid: 11.12.2
+      react: 19.1.1
+      rehype-harden: 1.1.6
+      rehype-katex: 7.0.1
+      rehype-raw: 7.0.0
+      remark-cjk-friendly: 1.2.3(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(unified@11.0.5)
+      remark-cjk-friendly-gfm-strikethrough: 1.2.3(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(unified@11.0.5)
+      remark-gfm: 4.0.1
+      remark-math: 6.0.0
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      remend: 1.0.1
+      shiki: 3.19.0
+      tailwind-merge: 3.3.1
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+    transitivePeerDependencies:
+      - '@types/mdast'
+      - micromark
+      - micromark-util-types
+      - supports-color
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.2
+
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.6.0
+      get-east-asian-width: 1.4.0
+      strip-ansi: 7.1.2
+
+  string_decoder@1.1.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
+  string_decoder@1.3.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.1.2:
+    dependencies:
+      ansi-regex: 6.2.2
+
+  strip-json-comments@3.1.1: {}
+
+  strip-json-comments@5.0.3: {}
+
+  stubborn-fs@1.2.5: {}
+
+  style-to-js@1.1.17:
+    dependencies:
+      style-to-object: 1.0.9
+
+  style-to-object@1.0.9:
+    dependencies:
+      inline-style-parser: 0.2.4
+
+  stylis@4.3.6: {}
+
+  sumchecker@3.0.1:
+    dependencies:
+      debug: 4.4.1(supports-color@5.5.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  supports-color@5.5.0:
+    dependencies:
+      has-flag: 3.0.0
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-color@8.1.1:
+    dependencies:
+      has-flag: 4.0.0
+
+  tagged-tag@1.0.0: {}
+
+  tailwind-merge@3.3.1: {}
+
+  tailwind-variants@3.1.1(tailwind-merge@3.3.1)(tailwindcss@4.1.13):
+    dependencies:
+      tailwindcss: 4.1.13
+    optionalDependencies:
+      tailwind-merge: 3.3.1
+
+  tailwindcss@4.1.13: {}
+
+  tapable@2.2.3: {}
+
+  tar-stream@2.2.0:
+    dependencies:
+      bl: 4.1.0
+      end-of-stream: 1.4.5
+      fs-constants: 1.0.0
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+
+  tar@6.2.1:
+    dependencies:
+      chownr: 2.0.0
+      fs-minipass: 2.1.0
+      minipass: 5.0.0
+      minizlib: 2.1.2
+      mkdirp: 1.0.4
+      yallist: 4.0.0
+
+  tar@7.4.3:
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.0.2
+      mkdirp: 3.0.1
+      yallist: 5.0.0
+
+  temp-file@3.4.0:
+    dependencies:
+      async-exit-hook: 2.0.1
+      fs-extra: 10.1.0
+
+  tinyexec@1.0.2: {}
+
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  tmp-promise@3.0.3:
+    dependencies:
+      tmp: 0.2.5
+
+  tmp@0.2.5: {}
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  toidentifier@1.0.1: {}
+
+  touch@3.1.1: {}
+
+  tree-kill@1.2.2: {}
+
+  trim-lines@3.0.1: {}
+
+  trough@2.2.0: {}
+
+  truncate-utf8-bytes@1.0.2:
+    dependencies:
+      utf8-byte-length: 1.0.5
+
+  ts-api-utils@2.1.0(typescript@5.8.3):
+    dependencies:
+      typescript: 5.8.3
+
+  ts-dedent@2.2.0: {}
+
+  tslib@2.8.1: {}
+
+  tsx@4.20.6:
+    dependencies:
+      esbuild: 0.25.9
+      get-tsconfig: 4.10.1
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  tw-animate-css@1.3.8: {}
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-fest@0.13.1:
+    optional: true
+
+  type-fest@5.1.0:
+    dependencies:
+      tagged-tag: 1.0.0
+
+  type-is@2.0.1:
+    dependencies:
+      content-type: 1.0.5
+      media-typer: 1.1.0
+      mime-types: 3.0.1
+
+  typescript-eslint@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.43.0(@typescript-eslint/parser@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)
+      '@typescript-eslint/parser': 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)
+      '@typescript-eslint/typescript-estree': 8.43.0(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)
+      eslint: 9.35.0(jiti@2.5.1)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  typescript@5.8.3: {}
+
+  ufo@1.6.1: {}
+
+  uint8array-extras@1.5.0: {}
+
+  undefsafe@2.0.5: {}
+
+  undici-types@6.21.0: {}
+
+  undici-types@7.10.0: {}
+
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
+  unist-util-find-after@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+
+  unist-util-is@6.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-remove-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-visit: 5.0.0
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+
+  unist-util-visit@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+
+  universalify@0.1.2: {}
+
+  universalify@2.0.1: {}
+
+  unpipe@1.0.0: {}
+
+  unused-filename@4.0.1:
+    dependencies:
+      escape-string-regexp: 5.0.0
+      path-exists: 5.0.0
+
+  update-browserslist-db@1.1.3(browserslist@4.25.4):
+    dependencies:
+      browserslist: 4.25.4
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  use-callback-ref@1.3.3(@types/react@19.1.12)(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  use-sidecar@1.1.3(@types/react@19.1.12)(react@19.1.1):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.1.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  utf8-byte-length@1.0.5: {}
+
+  util-deprecate@1.0.2: {}
+
+  uuid@11.1.0: {}
+
+  vary@1.1.2: {}
+
+  verror@1.10.1:
+    dependencies:
+      assert-plus: 1.0.0
+      core-util-is: 1.0.2
+      extsprintf: 1.4.1
+    optional: true
+
+  vfile-location@5.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile: 6.0.3
+
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
+  vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.6)(yaml@2.8.1):
+    dependencies:
+      esbuild: 0.25.9
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.50.1
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 24.3.1
+      fsevents: 2.3.3
+      jiti: 2.5.1
+      lightningcss: 1.30.1
+      tsx: 4.20.6
+      yaml: 2.8.1
+
+  vscode-jsonrpc@8.2.0: {}
+
+  vscode-languageserver-protocol@3.17.5:
+    dependencies:
+      vscode-jsonrpc: 8.2.0
+      vscode-languageserver-types: 3.17.5
+
+  vscode-languageserver-textdocument@1.0.12: {}
+
+  vscode-languageserver-types@3.17.5: {}
+
+  vscode-languageserver@9.0.1:
+    dependencies:
+      vscode-languageserver-protocol: 3.17.5
+
+  vscode-uri@3.0.8: {}
+
+  web-namespaces@2.0.1: {}
+
+  when-exit@2.1.4: {}
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  word-wrap@1.2.5: {}
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 5.1.2
+      strip-ansi: 7.1.2
+
+  wrappy@1.0.2: {}
+
+  xmlbuilder@15.1.1: {}
+
+  xtend@4.0.2: {}
+
+  y18n@5.0.8: {}
+
+  yallist@3.1.1: {}
+
+  yallist@4.0.0: {}
+
+  yallist@5.0.0: {}
+
+  yaml@2.8.1: {}
+
+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
+  yauzl@2.10.0:
+    dependencies:
+      buffer-crc32: 0.2.13
+      fd-slicer: 1.1.0
+
+  yocto-queue@0.1.0: {}
+
+  zip-stream@4.1.1:
+    dependencies:
+      archiver-utils: 3.0.4
+      compress-commons: 4.1.2
+      readable-stream: 3.6.2
+
+  zustand@5.0.8(@types/react@19.1.12)(react@19.1.1):
+    optionalDependencies:
+      '@types/react': 19.1.12
+      react: 19.1.1
+
+  zwitch@2.0.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 00000000..4fd67fc8
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,10 @@
+packages:
+  - packages/*
+
+onlyBuiltDependencies:
+  - '@heroui/shared-utils'
+  - '@ibm/plex'
+  - '@tailwindcss/oxide'
+  - electron
+  - esbuild
+  - node-pty
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 00000000..db3c3d1b
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+}
\ No newline at end of file
diff --git a/scripts/bump-version.mjs b/scripts/bump-version.mjs
new file mode 100644
index 00000000..71bb3775
--- /dev/null
+++ b/scripts/bump-version.mjs
@@ -0,0 +1,64 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(__dirname, '..');
+
+const PACKAGES = [
+  'package.json',
+  'packages/ui/package.json',
+  'packages/web/package.json',
+  'packages/desktop/package.json',
+];
+
+const TAURI_CONF = 'packages/desktop/src-tauri/tauri.conf.json';
+const CARGO_TOML = 'packages/desktop/src-tauri/Cargo.toml';
+
+const newVersion = process.argv[2];
+if (!newVersion || !/^\d+\.\d+\.\d+(-[\w.]+)?$/.test(newVersion)) {
+  console.error('Usage: node scripts/bump-version.mjs <version>');
+  console.error('Example: node scripts/bump-version.mjs 0.2.0');
+  console.error('Example: node scripts/bump-version.mjs 0.2.0-beta.1');
+  process.exit(1);
+}
+
+console.log(`Bumping version to ${newVersion}\n`);
+
+// Update package.json files
+for (const pkgPath of PACKAGES) {
+  const fullPath = path.join(ROOT, pkgPath);
+  const pkg = JSON.parse(fs.readFileSync(fullPath, 'utf8'));
+  const oldVersion = pkg.version;
+  pkg.version = newVersion;
+  fs.writeFileSync(fullPath, JSON.stringify(pkg, null, 2) + '\n');
+  console.log(`  ${pkgPath}: ${oldVersion} -> ${newVersion}`);
+}
+
+// Update tauri.conf.json
+const tauriConfPath = path.join(ROOT, TAURI_CONF);
+const tauriConf = JSON.parse(fs.readFileSync(tauriConfPath, 'utf8'));
+const oldTauriVersion = tauriConf.version;
+tauriConf.version = newVersion;
+fs.writeFileSync(tauriConfPath, JSON.stringify(tauriConf, null, 2) + '\n');
+console.log(`  ${TAURI_CONF}: ${oldTauriVersion} -> ${newVersion}`);
+
+// Update Cargo.toml
+const cargoPath = path.join(ROOT, CARGO_TOML);
+let cargoContent = fs.readFileSync(cargoPath, 'utf8');
+const cargoMatch = cargoContent.match(/^version = "(.*)"/m);
+const oldCargoVersion = cargoMatch ? cargoMatch[1] : 'unknown';
+cargoContent = cargoContent.replace(
+  /^version = ".*"$/m,
+  `version = "${newVersion}"`
+);
+fs.writeFileSync(cargoPath, cargoContent);
+console.log(`  ${CARGO_TOML}: ${oldCargoVersion} -> ${newVersion}`);
+
+console.log(`\nVersion bumped to ${newVersion}`);
+console.log('\nNext steps:');
+console.log(`  git add -A`);
+console.log(`  git commit -m "chore: release v${newVersion}"`);
+console.log(`  git tag v${newVersion}`);
+console.log(`  git push origin main --tags`);
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..d74e8a23
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./packages/ui/tsconfig.json" },
+    { "path": "./packages/web/tsconfig.json" },
+    { "path": "./packages/desktop/tsconfig.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "paths": {
+      "@openchamber/ui/*": ["./packages/ui/src/*"],
+      "@openchamber/web/*": ["./packages/web/src/*"],
+      "@openchamber/desktop/*": ["./packages/desktop/src/*"]
+    }
+  }
+}
diff --git a/vite-theme-plugin.ts b/vite-theme-plugin.ts
new file mode 100644
index 00000000..0e5b08f2
--- /dev/null
+++ b/vite-theme-plugin.ts
@@ -0,0 +1,8 @@
+import type { Plugin } from 'vite';
+
+export function themeStoragePlugin(): Plugin {
+  return {
+    name: 'theme-storage',
+    // Plugin retained for compatibility but no longer handles custom themes
+  };
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..973ea0ba
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,54 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { themeStoragePlugin } from './vite-theme-plugin'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+export default defineConfig({
+  plugins: [
+    react(),
+    themeStoragePlugin(),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@opencode-ai/sdk': path.resolve(__dirname, './node_modules/@opencode-ai/sdk/dist/client.js'),
+    },
+  },
+  define: {
+    'process.env': {},
+    global: 'globalThis',
+  },
+  optimizeDeps: {
+    include: ['@opencode-ai/sdk'],
+  },
+  build: {
+    chunkSizeWarningLimit: 1200,
+    rollupOptions: {
+      external: ['node:child_process', 'node:fs', 'node:path', 'node:url'],
+      output: {
+        manualChunks(id) {
+          if (!id.includes('node_modules')) return undefined
+
+          const match = id.split('node_modules/')[1]
+          if (!match) return undefined
+
+          const segments = match.split('/')
+          const packageName = match.startsWith('@') ? `${segments[0]}/${segments[1]}` : segments[0]
+
+          if (packageName === 'react' || packageName === 'react-dom') return 'vendor-react'
+          if (packageName === 'zustand' || packageName === 'zustand/middleware') return 'vendor-zustand'
+          if (packageName === '@opencode-ai/sdk') return 'vendor-opencode-sdk'
+          if (packageName.includes('remark') || packageName.includes('rehype') || packageName === 'react-markdown') return 'vendor-markdown'
+          if (packageName.startsWith('@radix-ui')) return 'vendor-radix'
+          if (packageName.includes('react-syntax-highlighter') || packageName.includes('highlight.js')) return 'vendor-syntax'
+
+          const sanitized = packageName.replace(/^@/, '').replace(/\//g, '-')
+          return `vendor-${sanitized}`
+        },
+      },
+    },
+  },
+})