chore(release): v1.25.2

fix(security): disable executable gray-matter frontmatter in commands
Update .env.example
2026-06-13 01:22:06 +08:00 · 2026-03-11 22:37:28 +00:00 · 2026-03-11 22:04:38 +00:00 · 2026-03-11 20:24:17 +01:00 · 2026-03-11 10:09:54 +03:00 · 2026-03-11 10:06:57 +03:00
351 changed files with 23291 additions and 12149 deletions
--- a/.env.example
+++ b/.env.example
@@ -42,4 +42,4 @@ HOST=0.0.0.0
 VITE_CONTEXT_WINDOW=160000
 CONTEXT_WINDOW=160000

-# VITE_IS_PLATFORM=false
+
--- a/.github/workflows/discord-release.yml
+++ b/.github/workflows/discord-release.yml
@@ -0,0 +1,22 @@
+name: Discord Release Notification
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  github-releases-to-discord:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Github Releases To Discord
+        uses: SethCohen/github-releases-to-discord@v1.19.0
+        with:
+          webhook_url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          color: "2105893"
+          username: "Release Changelog"
+          avatar_url: "https://cdn.discordapp.com/avatars/487431320314576937/bd64361e4ba6313d561d54e78c9e7171.png"
+          content: "||@everyone||"
+          footer_title: "Changelog"
+          reduce_headings: true
--- a/.gitignore
+++ b/.gitignore
@@ -108,7 +108,7 @@ temp/
 .serena/
 CLAUDE.md
 .mcp.json
-
+.gemini/

 # Database files
 *.db
@@ -130,3 +130,11 @@ dev-debug.log
 # Task files
 tasks.json
 tasks/ 
+
+# Translations
+!src/i18n/locales/en/tasks.json
+!src/i18n/locales/ja/tasks.json
+!src/i18n/locales/ru/tasks.json
+
+# Git worktrees
+.worktrees/
--- a/.gitmodules
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "plugins/starter"]
+	path = plugins/starter
+	url = https://github.com/cloudcli-ai/cloudcli-plugin-starter.git
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@@ -0,0 +1 @@
+npx commitlint --edit $1
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
--- a/.release-it.json
+++ b/.release-it.json
@@ -1,6 +1,6 @@
 {
  "git": {
-    "commitMessage": "Release ${version}",
+    "commitMessage": "chore(release): v${version}",
    "tagName": "v${version}",
    "requireBranch": "main",
    "requireCleanWorkingDir": true
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,74 @@
 All notable changes to CloudCLI UI will be documented in this file.


+## [1.25.2](https://github.com/siteboon/claudecodeui/compare/v1.25.0...v1.25.2) (2026-03-11)
+
+### New Features
+
+* **i18n:** localize plugin settings for all languages ([#515](https://github.com/siteboon/claudecodeui/issues/515)) ([621853c](https://github.com/siteboon/claudecodeui/commit/621853cbfb4233b34cb8cc2e1ed10917ba424352))
+
+### Bug Fixes
+
+* codeql user value provided path validation ([aaa14b9](https://github.com/siteboon/claudecodeui/commit/aaa14b9fc0b9b51c4fb9d1dba40fada7cbbe0356))
+* numerous bugs ([#528](https://github.com/siteboon/claudecodeui/issues/528)) ([a77f213](https://github.com/siteboon/claudecodeui/commit/a77f213dd5d0b2538dea091ab8da6e55d2002f2f))
+* **security:** disable executable gray-matter frontmatter in commands ([b9c902b](https://github.com/siteboon/claudecodeui/commit/b9c902b016f411a942c8707dd07d32b60bad087c))
+* session reconnect catch-up, always-on input, frozen session recovery ([#524](https://github.com/siteboon/claudecodeui/issues/524)) ([4d8fb6e](https://github.com/siteboon/claudecodeui/commit/4d8fb6e30aa03d7cdb92bd62b7709422f9d08e32))
+
+### Refactoring
+
+* new settings page design and new pill component ([8ddeeb0](https://github.com/siteboon/claudecodeui/commit/8ddeeb0ce8d0642560bd3fa149236011dc6e3707))
+
+## [1.25.0](https://github.com/siteboon/claudecodeui/compare/v1.24.0...v1.25.0) (2026-03-10)
+
+### New Features
+
+* add copy as text or markdown feature for assistant messages ([#519](https://github.com/siteboon/claudecodeui/issues/519)) ([1dc2a20](https://github.com/siteboon/claudecodeui/commit/1dc2a205dc2a3cbf960625d7669c7c63a2b6905f))
+* add full Russian language support; update Readme.md files, and .gitignore update ([#514](https://github.com/siteboon/claudecodeui/issues/514)) ([c7dcba8](https://github.com/siteboon/claudecodeui/commit/c7dcba8d9117e84db8aac7d8a7bf6a3aa683e115))
+* new plugin system ([#489](https://github.com/siteboon/claudecodeui/issues/489)) ([8afb46a](https://github.com/siteboon/claudecodeui/commit/8afb46af2e5514c9284030367281793fbb014e4f))
+
+### Bug Fixes
+
+* resolve duplicate key issue when rendering model options ([#520](https://github.com/siteboon/claudecodeui/issues/520)) ([9bceab9](https://github.com/siteboon/claudecodeui/commit/9bceab9e1a6e063b0b4f934ed2d9f854fcc9c6a4))
+
+### Maintenance
+
+* add plugins section in readme ([e581a0e](https://github.com/siteboon/claudecodeui/commit/e581a0e1ccd59fd7ec7306ca76a13e73d7c674c1))
+
+## [1.24.0](https://github.com/siteboon/claudecodeui/compare/v1.23.2...v1.24.0) (2026-03-09)
+
+### New Features
+
+* add full-text search across conversations ([#482](https://github.com/siteboon/claudecodeui/issues/482)) ([3950c0e](https://github.com/siteboon/claudecodeui/commit/3950c0e47f41e93227af31494690818d45c8bc7a))
+
+### Bug Fixes
+
+* **git:** prevent shell injection in git routes ([86c33c1](https://github.com/siteboon/claudecodeui/commit/86c33c1c0cb34176725a38f46960213714fc3e04))
+* replace getDatabase with better-sqlite3 db in getGithubTokenById ([#501](https://github.com/siteboon/claudecodeui/issues/501)) ([cb4fd79](https://github.com/siteboon/claudecodeui/commit/cb4fd795c938b1cc86d47f401973bfccdd68fdee))
+
+## [1.23.2](https://github.com/siteboon/claudecodeui/compare/v1.22.1...v1.23.2) (2026-03-06)
+
+### New Features
+
+* add clickable overlay buttons for CLI prompts in Shell terminal ([#480](https://github.com/siteboon/claudecodeui/issues/480)) ([2444209](https://github.com/siteboon/claudecodeui/commit/2444209723701dda2b881cea2501b239e64e51c1)), closes [#427](https://github.com/siteboon/claudecodeui/issues/427)
+* add terminal shortcuts panel for mobile ([#411](https://github.com/siteboon/claudecodeui/issues/411)) ([b0a3fdf](https://github.com/siteboon/claudecodeui/commit/b0a3fdf95ffdb961261194d10400267251e42f17))
+* implement session rename with SQLite storage ([#413](https://github.com/siteboon/claudecodeui/issues/413)) ([198e3da](https://github.com/siteboon/claudecodeui/commit/198e3da89b353780f53a91888384da9118995e81)), closes [#72](https://github.com/siteboon/claudecodeui/issues/72) [#358](https://github.com/siteboon/claudecodeui/issues/358)
+
+### Bug Fixes
+
+* **chat:** finalize terminal lifecycle to prevent stuck processing/thinking UI ([#483](https://github.com/siteboon/claudecodeui/issues/483)) ([0590c5c](https://github.com/siteboon/claudecodeui/commit/0590c5c178f4791e2b039d525ecca4d220c3dcae))
+* **codex-history:** prevent AGENTS.md/internal prompt leakage when reloading Codex sessions ([#488](https://github.com/siteboon/claudecodeui/issues/488)) ([64a96b2](https://github.com/siteboon/claudecodeui/commit/64a96b24f853acb802f700810b302f0f5cf00898))
+* preserve pending permission requests across WebSocket reconnections ([#462](https://github.com/siteboon/claudecodeui/issues/462)) ([4ee88f0](https://github.com/siteboon/claudecodeui/commit/4ee88f0eb0c648b54b05f006c6796fb7b09b0fae))
+* prevent React 18 batching from losing messages during session sync ([#461](https://github.com/siteboon/claudecodeui/issues/461)) ([688d734](https://github.com/siteboon/claudecodeui/commit/688d73477a50773e43c85addc96212aa6290aea5))
+* release it script ([dcea8a3](https://github.com/siteboon/claudecodeui/commit/dcea8a329c7d68437e1e72c8c766cf33c74637e9))
+
+### Styling
+
+* improve UI for processing banner ([#477](https://github.com/siteboon/claudecodeui/issues/477)) ([2320e1d](https://github.com/siteboon/claudecodeui/commit/2320e1d74b59c65b5b7fc4fa8b05fd9208f4898c))
+
+### Maintenance
+
+* remove logging of received WebSocket messages in production ([#487](https://github.com/siteboon/claudecodeui/issues/487)) ([9193feb](https://github.com/siteboon/claudecodeui/commit/9193feb6dc83041f3c365204648a88468bdc001b))
+
 ## [1.22.0](https://github.com/siteboon/claudecodeui/compare/v1.21.0...v1.22.0) (2026-03-03)

 ### New Features
--- a/README.ja.md
+++ b/README.ja.md
@@ -6,7 +6,7 @@

 [Claude Code](https://docs.anthropic.com/en/docs/claude-code)、[Cursor CLI](https://docs.cursor.com/en/cli/overview)、[Codex](https://developers.openai.com/codex) 向けのデスクトップ・モバイル UI です。ローカルまたはリモートで使用して、Claude Code、Cursor、Codex のアクティブなプロジェクトやセッションを確認し、どこからでも（モバイルやデスクトップから）変更を加えることができます。どこでも使える適切なインターフェースを提供します。

-<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a></i></div>
+<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <b>日本語</b></i></div>

 ## スクリーンショット

@@ -193,8 +193,8 @@ npm run dev
 Claude Code の全機能を使用するには、手動でツールを有効にする必要があります：

 1. **ツール設定を開く** - サイドバーの歯車アイコンをクリック
-3. **選択的に有効化** - 必要なツールのみを有効にする
-4. **設定を適用** - 環境設定はローカルに保存されます
+2. **選択的に有効化** - 必要なツールのみを有効にする
+3. **設定を適用** - 環境設定はローカルに保存されます

 <div align="center">

--- a/README.ko.md
+++ b/README.ko.md
@@ -6,7 +6,7 @@

 [Claude Code](https://docs.anthropic.com/en/docs/claude-code), [Cursor CLI](https://docs.cursor.com/en/cli/overview) 및 [Codex](https://developers.openai.com/codex)를 위한 데스크톱 및 모바일 UI입니다. 로컬 또는 원격으로 사용하여 Claude Code, Cursor 또는 Codex의 활성 프로젝트와 세션을 확인하고, 어디서든(모바일 또는 데스크톱) 변경할 수 있습니다. 어디서든 작동하는 적절한 인터페이스를 제공합니다.

-<div align="right"><i><a href="./README.md">English</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
+<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <b>한국어</b> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>

 ## 스크린샷

@@ -193,8 +193,8 @@ npm run dev
 Claude Code의 전체 기능을 사용하려면 수동으로 도구를 활성화해야 합니다:

 1. **도구 설정 열기** - 사이드바의 톱니바퀴 아이콘을 클릭
-3. **선택적으로 활성화** - 필요한 도구만 활성화
-4. **설정 적용** - 환경설정은 로컬에 저장됩니다
+2. **선택적으로 활성화** - 필요한 도구만 활성화
+3. **설정 적용** - 환경설정은 로컬에 저장됩니다

 <div align="center">

--- a/README.md
+++ b/README.md
@@ -1,21 +1,23 @@
 <div align="center">
  <img src="public/logo.svg" alt="CloudCLI UI" width="64" height="64">
  <h1>Cloud CLI (aka Claude Code UI)</h1>
+  <p>A desktop and mobile UI for <a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>, <a href="https://docs.cursor.com/en/cli/overview">Cursor CLI</a>, <a href="https://developers.openai.com/codex">Codex</a>, and <a href="https://geminicli.com/">Gemini-CLI</a>.<br>Use it locally or remotely to view your active projects and sessions from everywhere.</p>
 </div>

-
-A desktop and mobile UI for [Claude Code](https://docs.anthropic.com/en/docs/claude-code), [Cursor CLI](https://docs.cursor.com/en/cli/overview), [Codex](https://developers.openai.com/codex), and [Gemini-CLI](https://geminicli.com/). You can use it locally or remotely to view your active projects and sessions and make changes to them from everywhere (mobile or desktop). This gives you a proper interface that works everywhere.
-
 <p align="center">
-  <a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">Bug Reports</a> · <a href="CONTRIBUTING.md">Contributing</a>
+  <a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://cloudcli.ai/docs">Documentation</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">Bug Reports</a> · <a href="CONTRIBUTING.md">Contributing</a>
 </p>

 <p align="center">
-  <a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?logo=discord&logoColor=white" alt="Join our Discord"></a>
+  <a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Try_Now-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a>
+  <a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Join our Discord"></a>
+  <br><br>
  <a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
 </p>

-<div align="right"><i><b>English</b> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
+<div align="right"><i><b>English</b> · <a href="./README.ru.md">Русский</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
+
+---

 ## Screenshots

@@ -41,7 +43,7 @@ A desktop and mobile UI for [Claude Code](https://docs.anthropic.com/en/docs/cla
 <h3>CLI Selection</h3>
 <img src="public/screenshots/cli-selection.png" alt="CLI Selection" width="400">
 <br>
-<em>Select between Claude Code, Cursor CLI and Codex</em>
+<em>Select between Claude Code, Gemini, Cursor CLI and Codex</em>
 </td>
 </tr>
 </table>
@@ -58,8 +60,9 @@ A desktop and mobile UI for [Claude Code](https://docs.anthropic.com/en/docs/cla
 - **File Explorer** - Interactive file tree with syntax highlighting and live editing
 - **Git Explorer** - View, stage and commit your changes. You can also switch branches 
 - **Session Management** - Resume conversations, manage multiple sessions, and track history
+- **Plugin System** - Extend CloudCLI with custom plugins — add new tabs, backend services, and integrations. [Build your own →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)
 - **TaskMaster AI Integration** *(Optional)* - Advanced project management with AI-powered task planning, PRD parsing, and workflow automation
- **Model Compatibility** - Works with Claude Sonnet 4.5, Opus 4.5, GPT-5.2, and Gemini.
+- **Model Compatibility** - Works with Claude, GPT, and Gemini model families (see [`shared/modelConstants.js`](shared/modelConstants.js) for the full list of supported models)


 ## Quick Start
@@ -70,137 +73,53 @@ The fastest way to get started — no local setup required. Get a fully managed,

 **[Get started with CloudCLI Cloud](https://cloudcli.ai)**

-### Self-Hosted (Open Source)

-#### Prerequisites
+### Self-Hosted (Open source)

- [Node.js](https://nodejs.org/) v22 or higher
- [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) installed and configured, and/or
- [Cursor CLI](https://docs.cursor.com/en/cli/overview) installed and configured, and/or
- [Codex](https://developers.openai.com/codex) installed and configured, and/or
- [Gemini-CLI](https://geminicli.com/) installed and configured
+Try CloudCLI UI instantly with **npx** (requires **Node.js** v22+):

-#### One-click Operation
-
-No installation required, direct operation:
-
-```bash
+```
 npx @siteboon/claude-code-ui
 ```

-The server will start and be accessible at `http://localhost:3001` (or your configured PORT).
+Or install **globally** for regular use:

-**To restart**: Simply run the same `npx` command again after stopping the server
-### Global Installation (For Regular Use)
-
-For frequent use, install globally once:
-
-```bash
+```
 npm install -g @siteboon/claude-code-ui
+cloudcli
 ```

-Then start with a simple command:
+Open `http://localhost:3001` — all your existing sessions are discovered automatically.

-```bash
-claude-code-ui
-```
+Visit the **[documentation →](https://cloudcli.ai/docs)** for more full configuration options, PM2, remote server setup and more


-**To restart**: Stop with Ctrl+C and run `claude-code-ui` again.
+---

-**To update**:
-```bash
-cloudcli update
-```
+## Which option is right for you?

-### CLI Usage
+CloudCLI UI is the open source UI layer that powers CloudCLI Cloud. You can self-host it on your own machine, or use CloudCLI Cloud which builds on top of it with a full managed cloud environment, team features, and deeper integrations.

-After global installation, you have access to both `claude-code-ui` and `cloudcli` commands:
+| | CloudCLI UI (Self-hosted) | CloudCLI Cloud |
+|---|---|---|
+| **Best for** | Developers who want a full UI for local agent sessions on their own machine | Teams and developers who want agents running in the cloud, accessible from anywhere |
+| **How you access it** | Browser via `[yourip]:port` | Browser, any IDE, REST API, n8n |
+| **Setup** | `npx @siteboon/claude-code-ui` | No setup required |
+| **Machine needs to stay on** | Yes | No |
+| **Mobile access** | Any browser on your network | Any device, native app coming |
+| **Sessions available** | All sessions auto-discovered from `~/.claude` | All sessions within your cloud environment |
+| **Agents supported** | Claude Code, Cursor CLI, Codex, Gemini CLI | Claude Code, Cursor CLI, Codex, Gemini CLI |
+| **File explorer and Git** | Yes, built into the UI | Yes, built into the UI |
+| **MCP configuration** | Managed via UI, synced with your local `~/.claude` config | Managed via UI |
+| **IDE access** | Your local IDE | Any IDE connected to your cloud environment |
+| **REST API** | Yes | Yes |
+| **n8n node** | No | Yes |
+| **Team sharing** | No | Yes |
+| **Platform cost** | Free, open source | Starts at $7/month |

-| Command / Option | Short | Description |
-|------------------|-------|-------------|
-| `cloudcli` or `claude-code-ui` | | Start the server (default) |
-| `cloudcli start` | | Start the server explicitly |
-| `cloudcli status` | | Show configuration and data locations |
-| `cloudcli update` | | Update to the latest version |
-| `cloudcli help` | | Show help information |
-| `cloudcli version` | | Show version information |
-| `--port <port>` | `-p` | Set server port (default: 3001) |
-| `--database-path <path>` | | Set custom database location |
+> Both options use your own AI subscriptions (Claude, Cursor, etc.) — CloudCLI provides the environment, not the AI.

-**Examples:**
-```bash
-cloudcli                          # Start with defaults
-cloudcli -p 8080              # Start on custom port
-cloudcli status                   # Show current configuration
-```
-
-### Run as Background Service (Recommended for Production)
-
-For production use, run CloudCLI as a background service using PM2 (Process Manager 2):
-
-#### Install PM2
-
-```bash
-npm install -g pm2
-```
-
-#### Start as Background Service
-
-```bash
-# Start the server in background
-pm2 start claude-code-ui --name "claude-code-ui"
-
-# Or using the shorter alias
-pm2 start cloudcli --name "claude-code-ui"
-
-# Start on a custom port
-pm2 start cloudcli --name "claude-code-ui" -- --port 8080
-```
-
-
-#### Auto-Start on System Boot
-
-To make CloudCLI UI start automatically when your system boots:
-
-```bash
-# Generate startup script for your platform
-pm2 startup
-
-# Save current process list
-pm2 save
-```
-
-
-### Local Development Installation
-
-1. **Clone the repository:**
-```bash
-git clone https://github.com/siteboon/claudecodeui.git
-cd claudecodeui
-```
-
-2. **Install dependencies:**
-```bash
-npm install
-```
-
-3. **Configure environment:**
-```bash
-cp .env.example .env
-# Edit .env with your preferred settings
-```
-
-4. **Start the application:**
-```bash
-# Development mode (with hot reload)
-npm run dev
-
-```
-The application will start at the port you specified in your .env
-
-5. **Open your browser:**
-   - Development: `http://localhost:3001`
+---

 ## Security & Tools Configuration

@@ -211,8 +130,8 @@ The application will start at the port you specified in your .env
 To use Claude Code's full functionality, you'll need to manually enable tools:

 1. **Open Tools Settings** - Click the gear icon in the sidebar
-3. **Enable Selectively** - Turn on only the tools you need
-4. **Apply Settings** - Your preferences are saved locally
+2. **Enable Selectively** - Turn on only the tools you need
+3. **Apply Settings** - Your preferences are saved locally

 <div align="center">

@@ -223,114 +142,73 @@ To use Claude Code's full functionality, you'll need to manually enable tools:

 **Recommended approach**: Start with basic tools enabled and add more as needed. You can always adjust these settings later.

-## TaskMaster AI Integration *(Optional)*
+---

-CloudCLI UI supports **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** (aka claude-task-master) integration for advanced project management and AI-powered task planning.
+## Plugins

-It provides
- AI-powered task generation from PRDs (Product Requirements Documents)
- Smart task breakdown and dependency management  
- Visual task boards and progress tracking
+CloudCLI has a plugin system that lets you add custom tabs with their own frontend UI and optional Node.js backend. Install plugins from git repos directly in **Settings > Plugins**, or build your own.

-**Setup & Documentation**: Visit the [TaskMaster AI GitHub repository](https://github.com/eyaltoledano/claude-task-master) for installation instructions, configuration guides, and usage examples.
-After installing it you should be able to enable it from the Settings
+### Available Plugins

+| Plugin | Description |
+|---|---|
+| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | Shows file counts, lines of code, file-type breakdown, largest files, and recently modified files for your current project |

-## Usage Guide
+### Build Your Own

-### Core Features
+**[Plugin Starter Template →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** — fork this repo to create your own plugin. It includes a working example with frontend rendering, live context updates, and RPC communication to a backend server.

-#### Project Management
-It automatically discovers Claude Code, Cursor or Codex sessions when available and groups them together into projects
-session counts
- **Project Actions** - Rename, delete, and organize projects
- **Smart Navigation** - Quick access to recent projects and sessions
- **MCP support** - Add your own MCP servers through the UI 
+**[Plugin Documentation →](https://cloudcli.ai/docs/plugin-overview)** — full guide to the plugin API, manifest format, security model, and more.

-#### Chat Interface
- **Use responsive chat or Claude Code/Cursor CLI/Codex CLI** - You can either use the adapted chat interface or use the shell button to connect to your selected CLI. 
- **Real-time Communication** - Stream responses from your selected CLI (Claude Code/Cursor/Codex) with WebSocket connection
- **Session Management** - Resume previous conversations or start fresh sessions
- **Message History** - Complete conversation history with timestamps and metadata
- **Multi-format Support** - Text, code blocks, and file references
+---
+## FAQ

-#### File Explorer & Editor
- **Interactive File Tree** - Browse project structure with expand/collapse navigation
- **Live File Editing** - Read, modify, and save files directly in the interface
- **Syntax Highlighting** - Support for multiple programming languages
- **File Operations** - Create, rename, delete files and directories
+<details>
+<summary>How is this different from Claude Code Remote Control?</summary>

-#### Git Explorer
+Claude Code Remote Control lets you send messages to a session already running in your local terminal. Your machine has to stay on, your terminal has to stay open, and sessions time out after roughly 10 minutes without a network connection.

+CloudCLI UI and CloudCLI Cloud extend Claude Code rather than sit alongside it — your MCP servers, permissions, settings, and sessions are the exact same ones Claude Code uses natively. Nothing is duplicated or managed separately.

-#### TaskMaster AI Integration *(Optional)*
- **Visual Task Board** - Kanban-style interface for managing development tasks
- **PRD Parser** - Create Product Requirements Documents and parse them into structured tasks
- **Progress Tracking** - Real-time status updates and completion tracking
+Here's what that means in practice:

-#### Session Management
- **Session Persistence** - All conversations automatically saved
- **Session Organization** - Group sessions by project and timestamp
- **Session Actions** - Rename, delete, and export conversation history
- **Cross-device Sync** - Access sessions from any device
+- **All your sessions, not just one** — CloudCLI UI auto-discovers every session from your `~/.claude` folder. Remote Control only exposes the single active session to make it available in the Claude mobile app.
+- **Your settings are your settings** — MCP servers, tool permissions, and project config you change in CloudCLI UI are written directly to your Claude Code config and take effect immediately, and vice versa.
+- **Works with more agents** — Claude Code, Cursor CLI, Codex, and Gemini CLI, not just Claude Code.
+- **Full UI, not just a chat window** — file explorer, Git integration, MCP management, and a shell terminal are all built in.
+- **CloudCLI Cloud runs in the cloud** — close your laptop, the agent keeps running. No terminal to babysit, no machine to keep awake.

-### Mobile App
- **Responsive Design** - Optimized for all screen sizes
- **Touch-friendly Interface** - Swipe gestures and touch navigation
- **Mobile Navigation** - Bottom tab bar for easy thumb navigation
- **Adaptive Layout** - Collapsible sidebar and smart content prioritization
- **Add shortcut to Home Screen** - Add a shortcut to your home screen and the app will behave like a PWA
+</details>

-## Architecture
+<details>
+<summary>Do I need to pay for an AI subscription separately?</summary>

-### System Overview
+Yes. CloudCLI provides the environment, not the AI. You bring your own Claude, Cursor, Codex, or Gemini subscription. CloudCLI Cloud starts at $7/month for the hosted environment on top of that.

-```
-┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
-│   Frontend      │    │   Backend       │    │  Agent     │
-│   (React/Vite)  │◄──►│ (Express/WS)    │◄──►│  Integration    │
-│                 │    │                 │    │                │
-└─────────────────┘    └─────────────────┘    └─────────────────┘
-```
+</details>

-### Backend (Node.js + Express)
- **Express Server** - RESTful API with static file serving
- **WebSocket Server** - Communication for chats and project refresh
- **Agent Integration (Claude Code / Cursor CLI / Codex / Gemini CLI)** - Process spawning and management
- **File System API** - Exposing file browser for projects
+<details>
+<summary>Can I use CloudCLI UI on my phone?</summary>

-### Frontend (React + Vite)
- **React 18** - Modern component architecture with hooks
- **CodeMirror** - Advanced code editor with syntax highlighting
+Yes. For self-hosted, run the server on your machine and open `[yourip]:port` in any browser on your network. For CloudCLI Cloud, open it from any device — no VPN, no port forwarding, no setup. A native app is also in the works.

+</details>

+<details>
+<summary>Will changes I make in the UI affect my local Claude Code setup?</summary>

+Yes, for self-hosted. CloudCLI UI reads from and writes to the same `~/.claude` config that Claude Code uses natively. MCP servers you add via the UI show up in Claude Code immediately and vice versa.

+</details>

-### Contributing
+---

-We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details on commit conventions, development workflow, and release process.
-
-## Troubleshooting
-
-### Common Issues & Solutions
-
-
-#### "No Claude projects found"
-**Problem**: The UI shows no projects or empty project list
-**Solutions**:
- Ensure [Claude Code](https://docs.anthropic.com/en/docs/claude-code) is properly installed
- Run `claude` command in at least one project directory to initialize
- Verify `~/.claude/projects/` directory exists and has proper permissions
-
-#### File Explorer Issues
-**Problem**: Files not loading, permission errors, empty directories
-**Solutions**:
- Check project directory permissions (`ls -la` in terminal)
- Verify the project path exists and is accessible
- Review server console logs for detailed error messages
- Ensure you're not trying to access system directories outside project scope
+## Community & Support

+- **[Documentation](https://cloudcli.ai/docs)** — installation, configuration, features, and troubleshooting
+- **[Discord](https://discord.gg/buxwujPNRE)** — get help and connect with other users
+- **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — bug reports and feature requests
+- **[Contributing Guide](CONTRIBUTING.md)** — how to contribute to the project

 ## License

@@ -351,14 +229,6 @@ This project is open source and free to use, modify, and distribute under the GP
 - **[CodeMirror](https://codemirror.net/)** - Advanced code editor
 - **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(Optional)* - AI-powered project management and task planning

-## Support & Community
-
-### Stay Updated
- **[Join our Discord](https://discord.gg/buxwujPNRE)** - Get help, share feedback, and connect with the community
- **[CloudCLI Cloud](https://cloudcli.ai)** - Try the hosted cloud version
- **Star** this repository to show support
- **Watch** for updates and new releases
- **Follow** the project for announcements

 ### Sponsors
 - [Siteboon - AI powered website builder](https://siteboon.ai)
--- a/README.ru.md
+++ b/README.ru.md
@@ -0,0 +1,218 @@
+<div align="center">
+  <img src="public/logo.svg" alt="CloudCLI UI" width="64" height="64">
+  <h1>Cloud CLI (aka Claude Code UI)</h1>
+</div>
+
+
+Десктопный и мобильный UI для [Claude Code](https://docs.anthropic.com/en/docs/claude-code), [Cursor CLI](https://docs.cursor.com/en/cli/overview), [Codex](https://developers.openai.com/codex) и [Gemini-CLI](https://geminicli.com/). Его можно использовать локально или удаленно, чтобы просматривать активные проекты и сессии и вносить изменения откуда угодно, с мобильного или десктопа. Это дает полноценный интерфейс, который работает везде.
+
+<p align="center">
+  <a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">Сообщить об ошибке</a> · <a href="CONTRIBUTING.md">Участие в разработке</a>
+</p>
+
+<p align="center">
+  <a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?logo=discord&logoColor=white" alt="Join our Discord"></a>
+  <a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</p>
+
+<div align="right"><i><a href="./README.md">English</a> · <b>Русский</b> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
+
+## Скриншоты
+
+<div align="center">
+  
+<table>
+<tr>
+<td align="center">
+<h3>Версия для десктопа</h3>
+<img src="public/screenshots/desktop-main.png" alt="Desktop Interface" width="400">
+<br>
+<em>Основной интерфейс с обзором проекта и чатом</em>
+</td>
+<td align="center">
+<h3>Мобильный режим</h3>
+<img src="public/screenshots/mobile-chat.png" alt="Mobile Interface" width="250">
+<br>
+<em>Адаптивный мобильный интерфейс с сенсорной навигацией</em>
+</td>
+</tr>
+<tr>
+<td align="center" colspan="2">
+<h3>Выбор CLI</h3>
+<img src="public/screenshots/cli-selection.png" alt="CLI Selection" width="400">
+<br>
+<em>Выбор между Claude Code, Cursor CLI, Codex и Gemini CLI</em>
+</td>
+</tr>
+</table>
+
+
+
+</div>
+
+## Возможности
+
+- **Адаптивный дизайн** - одинаково хорошо работает на десктопе, планшете и телефоне, поэтому пользоваться агентами можно и с мобильных устройств
+- **Интерактивный чат-интерфейс** - встроенный чат для удобного взаимодействия с агентами
+- **Встроенный shell-терминал** - прямой доступ к CLI агентов через встроенную оболочку
+- **Файловый менеджер** - интерактивное дерево файлов с подсветкой синтаксиса и live-редактированием
+- **Git Explorer** - просмотр, stage и commit изменений, а также переключение веток
+- **Управление сессиями** - возобновление диалогов, работа с несколькими сессиями и история
+- **Интеграция с TaskMaster AI** *(опционально)* - расширенное управление проектами с AI-планированием задач, разбором PRD и автоматизацией workflows
+- **Совместимость с моделями** - работает с Claude Sonnet 4.5, Opus 4.5, GPT-5.2 и Gemini.
+
+
+## Быстрый старт
+
+### CloudCLI Cloud (рекомендуется)
+
+Самый быстрый способ начать работу: локальная настройка не требуется. Вы получаете полностью управляемую контейнеризированную среду разработки с доступом из браузера, мобильного приложения, API или любимой IDE.
+
+**[Начать с CloudCLI Cloud](https://cloudcli.ai)**
+
+
+### Self-Hosted (open source)
+
+Попробовать CloudCLI UI можно сразу через **npx** (нужен **Node.js** v22+):
+
+```bash
+npx @siteboon/claude-code-ui
+```
+
+Или установить **глобально** для постоянного использования:
+
+```bash
+npm install -g @siteboon/claude-code-ui
+cloudcli
+```
+
+Откройте `http://localhost:3001` — все существующие сессии будут обнаружены автоматически.
+
+Больше вариантов настройки, PM2, удаленный сервер и остальное описаны в **[документации →](https://cloudcli.ai/docs)**
+
+
+---
+
+## Какой вариант подойдет вам?
+
+CloudCLI UI - это open source UI-слой, на котором построен CloudCLI Cloud. Вы можете развернуть его у себя на машине или использовать CloudCLI Cloud, который добавляет полностью управляемую облачную среду, командные функции и более глубокие интеграции.
+
+| | CloudCLI UI (self-hosted) | CloudCLI Cloud |
+|---|---|---|
+| **Лучше всего подходит для** | Разработчиков, которым нужен полноценный UI для локальных агентских сессий на своей машине | Команд и разработчиков, которым нужны агенты в облаке с доступом откуда угодно |
+| **Способ доступа** | Браузер через `[yourip]:port` | Браузер, любая IDE, REST API, n8n |
+| **Настройка** | `npx @siteboon/claude-code-ui` | Настройка не требуется |
+| **Машина должна оставаться включенной** | Да | Нет |
+| **Доступ с мобильных устройств** | Любой браузер в вашей сети | Любое устройство, нативное приложение в разработке |
+| **Доступные сессии** | Все сессии автоматически обнаруживаются в `~/.claude` | Все сессии внутри вашей облачной среды |
+| **Поддерживаемые агенты** | Claude Code, Cursor CLI, Codex, Gemini CLI | Claude Code, Cursor CLI, Codex, Gemini CLI |
+| **Файловый менеджер и Git** | Да, встроены в UI | Да, встроены в UI |
+| **Конфигурация MCP** | Управляется через UI, синхронизируется с локальным `~/.claude` | Управляется через UI |
+| **Доступ из IDE** | Ваша локальная IDE | Любая IDE, подключенная к облачной среде |
+| **REST API** | Да | Да |
+| **Узел n8n** | Нет | Да |
+| **Совместная работа в команде** | Нет | Да |
+| **Стоимость платформы** | Бесплатно, open source | От $7/месяц |
+
+> В обоих вариантах используются ваши собственные AI-подписки (Claude, Cursor и т.д.) — CloudCLI предоставляет среду, а не сам AI.
+
+---
+
+## Безопасность и настройка инструментов
+
+**🔒 Важно**: все инструменты Claude Code **по умолчанию отключены**. Это предотвращает автоматический запуск потенциально опасных операций.
+
+### Включение инструментов
+
+Чтобы использовать всю функциональность Claude Code, инструменты нужно включить вручную:
+
+1. **Откройте настройки инструментов** - нажмите на иконку шестеренки в боковой панели
+2. **Включайте выборочно** - активируйте только те инструменты, которые действительно нужны
+3. **Примените настройки** - предпочтения сохраняются локально
+
+<div align="center">
+
+![Tools Settings Modal](public/screenshots/tools-modal.png)
+*Окно настройки инструментов - включайте только то, что вам нужно*
+
+</div>
+
+**Рекомендуемый подход**: начните с базовых инструментов и добавляйте остальные по мере необходимости. Эти настройки всегда можно поменять позже.
+
+---
+## FAQ
+
+<details>
+<summary>Чем это отличается от Claude Code Remote Control?</summary>
+
+Claude Code Remote Control позволяет отправлять сообщения в сессию, уже запущенную в локальном терминале. При этом ваша машина должна оставаться включенной, терминал должен быть открыт, а сессии завершаются примерно через 10 минут без сетевого соединения.
+
+CloudCLI UI и CloudCLI Cloud расширяют Claude Code, а не работают рядом с ним — ваши MCP-серверы, разрешения, настройки и сессии остаются теми же самыми, что и в нативном Claude Code. Ничего не дублируется и не управляется отдельно.
+
+Вот что это означает на практике:
+
+- **Все ваши сессии, а не одна** — CloudCLI UI автоматически находит каждую сессию из папки `~/.claude`. Remote Control предоставляет только одну активную сессию, чтобы сделать ее доступной в мобильном приложении Claude.
+- **Ваши настройки остаются вашими** — MCP-серверы, права инструментов и конфигурация проекта, измененные в CloudCLI UI, записываются напрямую в конфиг Claude Code и вступают в силу сразу же, и наоборот.
+- **Поддержка большего числа агентов** — Claude Code, Cursor CLI, Codex и Gemini CLI, а не только Claude Code.
+- **Полноценный UI, а не просто окно чата** — встроены файловый менеджер, Git-интеграция, управление MCP и shell-терминал.
+- **CloudCLI Cloud работает в облаке** — можно закрыть ноутбук, а агент продолжит работу. Не нужно держать терминал открытым и машину в активном состоянии.
+
+</details>
+
+<details>
+<summary>Нужно ли отдельно платить за AI-подписку?</summary>
+
+Да. CloudCLI предоставляет среду, а не сам AI. Вы используете собственную подписку Claude, Cursor, Codex или Gemini. CloudCLI Cloud стоит от $7/месяц за хостируемую среду сверх этого.
+
+</details>
+
+<details>
+<summary>Можно ли пользоваться CloudCLI UI с телефона?</summary>
+
+Да. Для self-hosted запустите сервер на своей машине и откройте `[yourip]:port` в любом браузере внутри вашей сети. Для CloudCLI Cloud откройте сервис с любого устройства — без VPN, проброса портов и дополнительной настройки. Нативное приложение тоже разрабатывается.
+
+</details>
+
+<details>
+<summary>Повлияют ли изменения, сделанные в UI, на мой локальный Claude Code?</summary>
+
+Да, в self-hosted режиме. CloudCLI UI читает и записывает тот же конфиг `~/.claude`, который нативно использует Claude Code. MCP-серверы, добавленные через UI, сразу появляются в Claude Code, и наоборот.
+
+</details>
+
+---
+
+## Сообщество и поддержка
+
+- **[Документация](https://cloudcli.ai/docs)** — установка, настройка, возможности и устранение неполадок
+- **[Discord](https://discord.gg/buxwujPNRE)** — помощь и общение с другими пользователями
+- **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — баг-репорты и запросы новых функций
+- **[Руководство для контрибьюторов](CONTRIBUTING.md)** — как участвовать в развитии проекта
+
+## Лицензия
+
+GNU General Public License v3.0 - подробности в файле [LICENSE](LICENSE).
+
+Этот проект открыт и может свободно использоваться, изменяться и распространяться по лицензии GPL v3.
+
+## Благодарности
+
+### Используется
+- **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - официальный CLI от Anthropic
+- **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - официальный CLI от Cursor
+- **[Codex](https://developers.openai.com/codex)** - OpenAI Codex
+- **[Gemini-CLI](https://geminicli.com/)** - Google Gemini CLI
+- **[React](https://react.dev/)** - библиотека пользовательских интерфейсов
+- **[Vite](https://vitejs.dev/)** - быстрый инструмент сборки и dev-сервер
+- **[Tailwind CSS](https://tailwindcss.com/)** - utility-first CSS framework
+- **[CodeMirror](https://codemirror.net/)** - продвинутый редактор кода
+- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(опционально)* - AI-управление проектами и планирование задач
+
+
+### Спонсоры
+- [Siteboon - AI powered website builder](https://siteboon.ai)
+---
+
+<div align="center">
+  <strong>Сделано с любовью к сообществу Claude Code, Cursor и Codex.</strong>
+</div>
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -6,7 +6,7 @@

 [Claude Code](https://docs.anthropic.com/en/docs/claude-code)、[Cursor CLI](https://docs.cursor.com/en/cli/overview) 和 [Codex](https://developers.openai.com/codex) 的桌面端和移动端界面。您可以在本地或远程使用它来查看 Claude Code、Cursor 或 Codex 中的活跃项目和会话,并从任何地方(移动端或桌面端)对它们进行修改。这为您提供了一个在任何地方都能正常使用的合适界面。

-<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.ja.md">日本語</a></i></div>
+<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.ko.md">한국어</a> · <b>中文</b> · <a href="./README.ja.md">日本語</a></i></div>

 ## 截图

@@ -194,8 +194,8 @@ npm run dev
 要使用 Claude Code 的完整功能,您需要手动启用工具:

 1. **打开工具设置** - 点击侧边栏中的齿轮图标
-3. **选择性启用** - 仅打开您需要的工具
-4. **应用设置** - 您的偏好设置将保存在本地
+2. **选择性启用** - 仅打开您需要的工具
+3. **应用设置** - 您的偏好设置将保存在本地

 <div align="center">

@@ -344,4 +344,4 @@ GNU General Public License v3.0 - 详见 [LICENSE](LICENSE) 文件。

 <div align="center">
  <strong>为 Claude Code、Cursor 和 Codex 社区精心打造。</strong>
-</div>
+</div>
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -0,0 +1,3 @@
+export default {
+  extends: ["@commitlint/config-conventional"],
+};
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,102 @@
+import js from "@eslint/js";
+import tseslint from "typescript-eslint";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import importX from "eslint-plugin-import-x";
+import tailwindcss from "eslint-plugin-tailwindcss";
+import unusedImports from "eslint-plugin-unused-imports";
+import globals from "globals";
+
+export default tseslint.config(
+  {
+    ignores: ["dist/**", "node_modules/**", "public/**"],
+  },
+  {
+    files: ["src/**/*.{ts,tsx,js,jsx}"],
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    plugins: {
+      react,
+      "react-hooks": reactHooks, // for following React rules such as dependencies in hooks, keys in lists, etc.
+      "react-refresh": reactRefresh, // for Vite HMR compatibility
+      "import-x": importX, // for import order/sorting. It also detercts circular dependencies and duplicate imports.
+      tailwindcss, // for detecting invalid Tailwind classnames and enforcing classname order
+      "unused-imports": unusedImports, // for detecting unused imports
+    },
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      },
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    settings: {
+      react: { version: "detect" },
+    },
+    rules: {
+      // --- Unused imports/vars ---
+      "unused-imports/no-unused-imports": "warn",
+      "unused-imports/no-unused-vars": [
+        "warn",
+        {
+          vars: "all",
+          varsIgnorePattern: "^_",
+          args: "after-used",
+          argsIgnorePattern: "^_",
+        },
+      ],
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+
+      // --- React ---
+      "react/jsx-key": "warn",
+      "react/jsx-no-duplicate-props": "error",
+      "react/jsx-no-undef": "error",
+      "react/no-children-prop": "warn",
+      "react/no-danger-with-children": "error",
+      "react/no-direct-mutation-state": "error",
+      "react/no-unknown-property": "warn",
+      "react/react-in-jsx-scope": "off",
+
+      // --- React Hooks ---
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+
+      // --- React Refresh (Vite HMR) ---
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+
+      // --- Import ordering & hygiene ---
+      "import-x/no-duplicates": "warn",
+      "import-x/order": [
+        "warn",
+        {
+          groups: [
+            "builtin",
+            "external",
+            "internal",
+            "parent",
+            "sibling",
+            "index",
+          ],
+          "newlines-between": "never",
+        },
+      ],
+
+      // --- Tailwind CSS ---
+      "tailwindcss/classnames-order": "warn",
+      "tailwindcss/no-contradicting-classname": "warn",
+      "tailwindcss/no-unnecessary-arbitrary-value": "warn",
+
+      // --- Disabled base rules ---
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-require-imports": "off",
+      "no-case-declarations": "off",
+      "no-control-regex": "off",
+      "no-useless-escape": "off",
+    },
+  }
+);
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
    <title>CloudCLI UI</title>
    
    <!-- PWA Manifest -->
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials"  />
    
    <!-- iOS Safari PWA Meta Tags -->
    <meta name="mobile-web-app-capable" content="yes" />
@@ -45,4 +45,4 @@
      }
    </script>
  </body>
-</html>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@siteboon/claude-code-ui",
-  "version": "1.22.0",
+  "version": "1.25.2",
  "description": "A web-based UI for Claude Code CLI",
  "type": "module",
  "main": "server/index.js",
@@ -30,10 +30,13 @@
    "build": "vite build",
    "preview": "vite preview",
    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
    "start": "npm run build && npm run server",
    "release": "./release.sh",
    "prepublishOnly": "npm run build",
-    "postinstall": "node scripts/fix-node-pty.js"
+    "postinstall": "node scripts/fix-node-pty.js",
+    "prepare": "husky"
  },
  "keywords": [
    "claude code",
@@ -100,10 +103,12 @@
    "sqlite": "^5.1.1",
    "sqlite3": "^5.1.7",
    "tailwind-merge": "^3.3.1",
-    "web-push": "^3.6.7",
    "ws": "^8.14.2"
  },
  "devDependencies": {
+    "@commitlint/cli": "^20.4.3",
+    "@commitlint/config-conventional": "^20.4.3",
+    "@eslint/js": "^9.39.3",
    "@release-it/conventional-changelog": "^10.0.5",
    "@types/node": "^22.19.7",
    "@types/react": "^18.2.43",
@@ -112,12 +117,26 @@
    "auto-changelog": "^2.5.0",
    "autoprefixer": "^10.4.16",
    "concurrently": "^8.2.2",
+    "eslint": "^9.39.3",
+    "eslint-plugin-import-x": "^4.16.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "eslint-plugin-tailwindcss": "^3.18.2",
+    "eslint-plugin-unused-imports": "^4.4.1",
+    "globals": "^17.4.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.3.2",
    "node-gyp": "^10.0.0",
    "postcss": "^8.4.32",
    "release-it": "^19.0.5",
    "sharp": "^0.34.2",
    "tailwindcss": "^3.4.0",
    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.56.1",
    "vite": "^7.0.4"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx,js,jsx}": "eslint"
  }
 }
--- a/plugins/starter
+++ b/plugins/starter
--- a/public/screenshots/cli-selection.png
+++ b/public/screenshots/cli-selection.png
--- a/public/screenshots/mobile-chat.png
+++ b/public/screenshots/mobile-chat.png
--- a/public/sw.js
+++ b/public/sw.js
@@ -19,17 +19,14 @@ self.addEventListener('install', event => {

 // Fetch event
 self.addEventListener('fetch', event => {
-  // Never cache API requests or WebSocket upgrades
-  if (event.request.url.includes('/api/') || event.request.url.includes('/ws')) {
-    return;
-  }
-
  event.respondWith(
    caches.match(event.request)
      .then(response => {
+        // Return cached response if found
        if (response) {
          return response;
        }
+        // Otherwise fetch from network
        return fetch(event.request);
      }
    )
@@ -49,53 +46,4 @@ self.addEventListener('activate', event => {
      );
    })
  );
-  self.clients.claim();
-});
-
-// Push notification event
-self.addEventListener('push', event => {
-  if (!event.data) return;
-
-  let payload;
-  try {
-    payload = event.data.json();
-  } catch {
-    payload = { title: 'Claude Code UI', body: event.data.text() };
-  }
-
-  const options = {
-    body: payload.body || '',
-    icon: '/logo-256.png',
-    badge: '/logo-128.png',
-    data: payload.data || {},
-    tag: payload.data?.code || 'default',
-    renotify: true
-  };
-
-  event.waitUntil(
-    self.registration.showNotification(payload.title || 'Claude Code UI', options)
-  );
-});
-
-// Notification click event
-self.addEventListener('notificationclick', event => {
-  event.notification.close();
-
-  const sessionId = event.notification.data?.sessionId;
-  const urlPath = sessionId ? `/session/${sessionId}` : '/';
-
-  event.waitUntil(
-    self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then(clientList => {
-      for (const client of clientList) {
-        if (client.url.includes(self.location.origin)) {
-          client.focus();
-          if (sessionId) {
-            client.navigate(self.location.origin + urlPath);
-          }
-          return;
-        }
-      }
-      return self.clients.openWindow(urlPath);
-    })
-  );
-});
+});
--- a/server/claude-sdk.js
+++ b/server/claude-sdk.js
@@ -18,7 +18,6 @@ import { promises as fs } from 'fs';
 import path from 'path';
 import os from 'os';
 import { CLAUDE_MODELS } from '../shared/modelConstants.js';
-import { createNotificationEvent, notifyUserIfEnabled } from './services/notification-orchestrator.js';

 const activeSessions = new Map();
 const pendingToolApprovals = new Map();
@@ -35,7 +34,7 @@ function createRequestId() {
 }

 function waitForToolApproval(requestId, options = {}) {
-  const { timeoutMs = TOOL_APPROVAL_TIMEOUT_MS, signal, onCancel } = options;
+  const { timeoutMs = TOOL_APPROVAL_TIMEOUT_MS, signal, onCancel, metadata } = options;

  return new Promise(resolve => {
    let settled = false;
@@ -79,9 +78,14 @@ function waitForToolApproval(requestId, options = {}) {
      signal.addEventListener('abort', abortHandler, { once: true });
    }

-    pendingToolApprovals.set(requestId, (decision) => {
+    const resolver = (decision) => {
      finalize(decision);
-    });
+    };
+    // Attach metadata for getPendingApprovalsForSession lookup
+    if (metadata) {
+      Object.assign(resolver, metadata);
+    }
+    pendingToolApprovals.set(requestId, resolver);
  });
 }

@@ -210,13 +214,14 @@ function mapCliOptionsToSDK(options = {}) {
 * @param {Array<string>} tempImagePaths - Temp image file paths for cleanup
 * @param {string} tempDir - Temp directory for cleanup
 */
-function addSession(sessionId, queryInstance, tempImagePaths = [], tempDir = null) {
+function addSession(sessionId, queryInstance, tempImagePaths = [], tempDir = null, writer = null) {
  activeSessions.set(sessionId, {
    instance: queryInstance,
    startTime: Date.now(),
    status: 'active',
    tempImagePaths,
-    tempDir
+    tempDir,
+    writer
  });
 }

@@ -462,14 +467,6 @@ async function queryClaudeSDK(command, options = {}, ws) {
  let tempImagePaths = [];
  let tempDir = null;

-  const emitNotification = (event) => {
-    notifyUserIfEnabled({
-      userId: ws?.userId || null,
-      writer: ws,
-      event
-    });
-  };
-
  try {
    // Map CLI options to SDK format
    const sdkOptions = mapCliOptionsToSDK(options);
@@ -486,42 +483,6 @@ async function queryClaudeSDK(command, options = {}, ws) {
    tempImagePaths = imageResult.tempImagePaths;
    tempDir = imageResult.tempDir;

-    sdkOptions.hooks = {
-      Notification: [{
-        matcher: '',
-        hooks: [async (input) => {
-          const message = typeof input?.message === 'string' ? input.message : 'Claude requires your attention.';
-          emitNotification(createNotificationEvent({
-            provider: 'claude',
-            sessionId: capturedSessionId || sessionId || null,
-            kind: 'action_required',
-            code: 'agent.notification',
-            meta: { message },
-            severity: 'warning',
-            requiresUserAction: true,
-            dedupeKey: `claude:hook:notification:${capturedSessionId || sessionId || 'none'}:${message}`
-          }));
-          return {};
-        }]
-      }],
-      Stop: [{
-        matcher: '',
-        hooks: [async (input) => {
-          const stopReason = typeof input?.stop_reason === 'string' ? input.stop_reason : 'completed';
-          emitNotification(createNotificationEvent({
-            provider: 'claude',
-            sessionId: capturedSessionId || sessionId || null,
-            kind: 'stop',
-            code: 'run.stopped',
-            meta: { stopReason },
-            severity: 'info',
-            dedupeKey: `claude:hook:stop:${capturedSessionId || sessionId || 'none'}:${stopReason}`
-          }));
-          return {};
-        }]
-      }]
-    };
-
    sdkOptions.canUseTool = async (toolName, input, context) => {
      const requiresInteraction = TOOLS_REQUIRING_INTERACTION.has(toolName);

@@ -553,20 +514,16 @@ async function queryClaudeSDK(command, options = {}, ws) {
        input,
        sessionId: capturedSessionId || sessionId || null
      });
-      emitNotification(createNotificationEvent({
-        provider: 'claude',
-        sessionId: capturedSessionId || sessionId || null,
-        kind: 'action_required',
-        code: 'permission.required',
-        meta: { toolName },
-        severity: 'warning',
-        requiresUserAction: true,
-        dedupeKey: `claude:permission:${capturedSessionId || sessionId || 'none'}:${requestId}`
-      }));

      const decision = await waitForToolApproval(requestId, {
        timeoutMs: requiresInteraction ? 0 : undefined,
        signal: context?.signal,
+        metadata: {
+          _sessionId: capturedSessionId || sessionId || null,
+          _toolName: toolName,
+          _input: input,
+          _receivedAt: new Date(),
+        },
        onCancel: (reason) => {
          ws.send({
            type: 'claude-permission-cancelled',
@@ -603,22 +560,10 @@ async function queryClaudeSDK(command, options = {}, ws) {
    const prevStreamTimeout = process.env.CLAUDE_CODE_STREAM_CLOSE_TIMEOUT;
    process.env.CLAUDE_CODE_STREAM_CLOSE_TIMEOUT = '300000';

-    let queryInstance;
-    try {
-      queryInstance = query({
-        prompt: finalCommand,
-        options: sdkOptions
-      });
-    } catch (hookError) {
-      // Older/newer SDK versions may not accept hook shapes yet.
-      // Keep notification behavior operational via runtime events even if hook registration fails.
-      console.warn('Failed to initialize Claude query with hooks, retrying without hooks:', hookError?.message || hookError);
-      delete sdkOptions.hooks;
-      queryInstance = query({
-        prompt: finalCommand,
-        options: sdkOptions
-      });
-    }
+    const queryInstance = query({
+      prompt: finalCommand,
+      options: sdkOptions
+    });

    // Restore immediately — Query constructor already captured the value
    if (prevStreamTimeout !== undefined) {
@@ -629,7 +574,7 @@ async function queryClaudeSDK(command, options = {}, ws) {

    // Track the query instance for abort capability
    if (capturedSessionId) {
-      addSession(capturedSessionId, queryInstance, tempImagePaths, tempDir);
+      addSession(capturedSessionId, queryInstance, tempImagePaths, tempDir, ws);
    }

    // Process streaming messages
@@ -639,7 +584,7 @@ async function queryClaudeSDK(command, options = {}, ws) {
      if (message.session_id && !capturedSessionId) {

        capturedSessionId = message.session_id;
-        addSession(capturedSessionId, queryInstance, tempImagePaths, tempDir);
+        addSession(capturedSessionId, queryInstance, tempImagePaths, tempDir, ws);

        // Set session ID on writer
        if (ws.setSessionId && typeof ws.setSessionId === 'function') {
@@ -721,15 +666,6 @@ async function queryClaudeSDK(command, options = {}, ws) {
      error: error.message,
      sessionId: capturedSessionId || sessionId || null
    });
-    emitNotification(createNotificationEvent({
-      provider: 'claude',
-      sessionId: capturedSessionId || sessionId || null,
-      kind: 'error',
-      code: 'run.failed',
-      meta: { error: error.message },
-      severity: 'error',
-      dedupeKey: `claude:error:${capturedSessionId || sessionId || 'none'}:${error.message}`
-    }));

    throw error;
  }
@@ -788,11 +724,50 @@ function getActiveClaudeSDKSessions() {
  return getAllSessions();
 }

+/**
+ * Get pending tool approvals for a specific session.
+ * @param {string} sessionId - The session ID
+ * @returns {Array} Array of pending permission request objects
+ */
+function getPendingApprovalsForSession(sessionId) {
+  const pending = [];
+  for (const [requestId, resolver] of pendingToolApprovals.entries()) {
+    if (resolver._sessionId === sessionId) {
+      pending.push({
+        requestId,
+        toolName: resolver._toolName || 'UnknownTool',
+        input: resolver._input,
+        context: resolver._context,
+        sessionId,
+        receivedAt: resolver._receivedAt || new Date(),
+      });
+    }
+  }
+  return pending;
+}
+
+/**
+ * Reconnect a session's WebSocketWriter to a new raw WebSocket.
+ * Called when client reconnects (e.g. page refresh) while SDK is still running.
+ * @param {string} sessionId - The session ID
+ * @param {Object} newRawWs - The new raw WebSocket connection
+ * @returns {boolean} True if writer was successfully reconnected
+ */
+function reconnectSessionWriter(sessionId, newRawWs) {
+  const session = getSession(sessionId);
+  if (!session?.writer?.updateWebSocket) return false;
+  session.writer.updateWebSocket(newRawWs);
+  console.log(`[RECONNECT] Writer swapped for session ${sessionId}`);
+  return true;
+}
+
 // Export public API
 export {
  queryClaudeSDK,
  abortClaudeSDKSession,
  isClaudeSDKSessionActive,
  getActiveClaudeSDKSessions,
-  resolveToolApproval
+  resolveToolApproval,
+  getPendingApprovalsForSession,
+  reconnectSessionWriter
 };
--- a/server/cursor-cli.js
+++ b/server/cursor-cli.js
@@ -1,84 +1,124 @@
 import { spawn } from 'child_process';
 import crossSpawn from 'cross-spawn';
-import { promises as fs } from 'fs';
-import path from 'path';
-import os from 'os';

 // Use cross-spawn on Windows for better command execution
 const spawnFunction = process.platform === 'win32' ? crossSpawn : spawn;

 let activeCursorProcesses = new Map(); // Track active processes by session ID

+const WORKSPACE_TRUST_PATTERNS = [
+  /workspace trust required/i,
+  /do you trust the contents of this directory/i,
+  /working with untrusted contents/i,
+  /pass --trust,\s*--yolo,\s*or -f/i
+];
+
+function isWorkspaceTrustPrompt(text = '') {
+  if (!text || typeof text !== 'string') {
+    return false;
+  }
+
+  return WORKSPACE_TRUST_PATTERNS.some((pattern) => pattern.test(text));
+}
+
 async function spawnCursor(command, options = {}, ws) {
  return new Promise(async (resolve, reject) => {
-    const { sessionId, projectPath, cwd, resume, toolsSettings, skipPermissions, model, images } = options;
+    const { sessionId, projectPath, cwd, resume, toolsSettings, skipPermissions, model } = options;
    let capturedSessionId = sessionId; // Track session ID throughout the process
    let sessionCreatedSent = false; // Track if we've already sent session-created event
-    let messageBuffer = ''; // Buffer for accumulating assistant messages
-    
+    let hasRetriedWithTrust = false;
+    let settled = false;
+
    // Use tools settings passed from frontend, or defaults
    const settings = toolsSettings || {
      allowedShellCommands: [],
      skipPermissions: false
    };
-    
+
    // Build Cursor CLI command
-    const args = [];
-    
+    const baseArgs = [];
+
    // Build flags allowing both resume and prompt together (reply in existing session)
    // Treat presence of sessionId as intention to resume, regardless of resume flag
    if (sessionId) {
-      args.push('--resume=' + sessionId);
+      baseArgs.push('--resume=' + sessionId);
    }

    if (command && command.trim()) {
      // Provide a prompt (works for both new and resumed sessions)
-      args.push('-p', command);
+      baseArgs.push('-p', command);

      // Add model flag if specified (only meaningful for new sessions; harmless on resume)
      if (!sessionId && model) {
-        args.push('--model', model);
+        baseArgs.push('--model', model);
      }

      // Request streaming JSON when we are providing a prompt
-      args.push('--output-format', 'stream-json');
+      baseArgs.push('--output-format', 'stream-json');
    }
-    
+
    // Add skip permissions flag if enabled
    if (skipPermissions || settings.skipPermissions) {
-      args.push('-f');
-      console.log('⚠️  Using -f flag (skip permissions)');
+      baseArgs.push('-f');
+      console.log('Using -f flag (skip permissions)');
    }
-    
+
    // Use cwd (actual project directory) instead of projectPath
    const workingDir = cwd || projectPath || process.cwd();
-    
-    console.log('Spawning Cursor CLI:', 'cursor-agent', args.join(' '));
-    console.log('Working directory:', workingDir);
-    console.log('Session info - Input sessionId:', sessionId, 'Resume:', resume);
-    
-    const cursorProcess = spawnFunction('cursor-agent', args, {
-      cwd: workingDir,
-      stdio: ['pipe', 'pipe', 'pipe'],
-      env: { ...process.env } // Inherit all environment variables
-    });
-    
+
    // Store process reference for potential abort
    const processKey = capturedSessionId || Date.now().toString();
-    activeCursorProcesses.set(processKey, cursorProcess);
-    
-    // Handle stdout (streaming JSON responses)
-    cursorProcess.stdout.on('data', (data) => {
-      const rawOutput = data.toString();
-      console.log('📤 Cursor CLI stdout:', rawOutput);
-      
-      const lines = rawOutput.split('\n').filter(line => line.trim());
-      
-      for (const line of lines) {
+
+    const settleOnce = (callback) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      callback();
+    };
+
+    const runCursorProcess = (args, runReason = 'initial') => {
+      const isTrustRetry = runReason === 'trust-retry';
+      let runSawWorkspaceTrustPrompt = false;
+      let stdoutLineBuffer = '';
+
+      if (isTrustRetry) {
+        console.log('Retrying Cursor CLI with --trust after workspace trust prompt');
+      }
+
+      console.log('Spawning Cursor CLI:', 'cursor-agent', args.join(' '));
+      console.log('Working directory:', workingDir);
+      console.log('Session info - Input sessionId:', sessionId, 'Resume:', resume);
+
+      const cursorProcess = spawnFunction('cursor-agent', args, {
+        cwd: workingDir,
+        stdio: ['pipe', 'pipe', 'pipe'],
+        env: { ...process.env } // Inherit all environment variables
+      });
+
+      activeCursorProcesses.set(processKey, cursorProcess);
+
+      const shouldSuppressForTrustRetry = (text) => {
+        if (hasRetriedWithTrust || args.includes('--trust')) {
+          return false;
+        }
+        if (!isWorkspaceTrustPrompt(text)) {
+          return false;
+        }
+
+        runSawWorkspaceTrustPrompt = true;
+        return true;
+      };
+
+      const processCursorOutputLine = (line) => {
+        if (!line || !line.trim()) {
+          return;
+        }
+
        try {
          const response = JSON.parse(line);
-          console.log('📄 Parsed JSON response:', response);
-          
+          console.log('Parsed JSON response:', response);
+
          // Handle different message types
          switch (response.type) {
            case 'system':
@@ -86,14 +126,14 @@ async function spawnCursor(command, options = {}, ws) {
                // Capture session ID
                if (response.session_id && !capturedSessionId) {
                  capturedSessionId = response.session_id;
-                  console.log('📝 Captured session ID:', capturedSessionId);
-                  
+                  console.log('Captured session ID:', capturedSessionId);
+
                  // Update process key with captured session ID
                  if (processKey !== capturedSessionId) {
                    activeCursorProcesses.delete(processKey);
                    activeCursorProcesses.set(capturedSessionId, cursorProcess);
                  }
-                  
+
                  // Set session ID on writer (for API endpoint compatibility)
                  if (ws.setSessionId && typeof ws.setSessionId === 'function') {
                    ws.setSessionId(capturedSessionId);
@@ -110,7 +150,7 @@ async function spawnCursor(command, options = {}, ws) {
                    });
                  }
                }
-                
+
                // Send system info to frontend
                ws.send({
                  type: 'cursor-system',
@@ -119,7 +159,7 @@ async function spawnCursor(command, options = {}, ws) {
                });
              }
              break;
-              
+
            case 'user':
              // Forward user message
              ws.send({
@@ -128,13 +168,12 @@ async function spawnCursor(command, options = {}, ws) {
                sessionId: capturedSessionId || sessionId || null
              });
              break;
-              
+
            case 'assistant':
              // Accumulate assistant message chunks
              if (response.message && response.message.content && response.message.content.length > 0) {
                const textContent = response.message.content[0].text;
-                messageBuffer += textContent;
-                
+
                // Send as Claude-compatible format for frontend
                ws.send({
                  type: 'claude-response',
@@ -149,23 +188,14 @@ async function spawnCursor(command, options = {}, ws) {
                });
              }
              break;
-              
+
            case 'result':
              // Session complete
              console.log('Cursor session result:', response);
-              
-              // Send final message if we have buffered content
-              if (messageBuffer) {
-                ws.send({
-                  type: 'claude-response',
-                  data: {
-                    type: 'content_block_stop'
-                  },
-                  sessionId: capturedSessionId || sessionId || null
-                });
-              }
-              
-              // Send completion event
+
+              // Do not emit an extra content_block_stop here.
+              // The UI already finalizes the streaming message in cursor-result handling,
+              // and emitting both can produce duplicate assistant messages.
              ws.send({
                type: 'cursor-result',
                sessionId: capturedSessionId || sessionId,
@@ -173,7 +203,7 @@ async function spawnCursor(command, options = {}, ws) {
                success: response.subtype === 'success'
              });
              break;
-              
+
            default:
              // Forward any other message types
              ws.send({
@@ -183,7 +213,12 @@ async function spawnCursor(command, options = {}, ws) {
              });
          }
        } catch (parseError) {
-          console.log('📄 Non-JSON response:', line);
+          console.log('Non-JSON response:', line);
+
+          if (shouldSuppressForTrustRetry(line)) {
+            return;
+          }
+
          // If not JSON, send as raw text
          ws.send({
            type: 'cursor-output',
@@ -191,67 +226,106 @@ async function spawnCursor(command, options = {}, ws) {
            sessionId: capturedSessionId || sessionId || null
          });
        }
-      }
-    });
-    
-    // Handle stderr
-    cursorProcess.stderr.on('data', (data) => {
-      console.error('Cursor CLI stderr:', data.toString());
-      ws.send({
-        type: 'cursor-error',
-        error: data.toString(),
-        sessionId: capturedSessionId || sessionId || null
-      });
-    });
-    
-    // Handle process completion
-    cursorProcess.on('close', async (code) => {
-      console.log(`Cursor CLI process exited with code ${code}`);
-      
-      // Clean up process reference
-      const finalSessionId = capturedSessionId || sessionId || processKey;
-      activeCursorProcesses.delete(finalSessionId);
+      };

-      ws.send({
-        type: 'claude-complete',
-        sessionId: finalSessionId,
-        exitCode: code,
-        isNewSession: !sessionId && !!command // Flag to indicate this was a new session
-      });
-      
-      if (code === 0) {
-        resolve();
-      } else {
-        reject(new Error(`Cursor CLI exited with code ${code}`));
-      }
-    });
-    
-    // Handle process errors
-    cursorProcess.on('error', (error) => {
-      console.error('Cursor CLI process error:', error);
-      
-      // Clean up process reference on error
-      const finalSessionId = capturedSessionId || sessionId || processKey;
-      activeCursorProcesses.delete(finalSessionId);
+      // Handle stdout (streaming JSON responses)
+      cursorProcess.stdout.on('data', (data) => {
+        const rawOutput = data.toString();
+        console.log('Cursor CLI stdout:', rawOutput);

-      ws.send({
-        type: 'cursor-error',
-        error: error.message,
-        sessionId: capturedSessionId || sessionId || null
+        // Stream chunks can split JSON objects across packets; keep trailing partial line.
+        stdoutLineBuffer += rawOutput;
+        const completeLines = stdoutLineBuffer.split(/\r?\n/);
+        stdoutLineBuffer = completeLines.pop() || '';
+
+        completeLines.forEach((line) => {
+          processCursorOutputLine(line.trim());
+        });
      });

-      reject(error);
-    });
-    
-    // Close stdin since Cursor doesn't need interactive input
-    cursorProcess.stdin.end();
+      // Handle stderr
+      cursorProcess.stderr.on('data', (data) => {
+        const stderrText = data.toString();
+        console.error('Cursor CLI stderr:', stderrText);
+
+        if (shouldSuppressForTrustRetry(stderrText)) {
+          return;
+        }
+
+        ws.send({
+          type: 'cursor-error',
+          error: stderrText,
+          sessionId: capturedSessionId || sessionId || null
+        });
+      });
+
+      // Handle process completion
+      cursorProcess.on('close', async (code) => {
+        console.log(`Cursor CLI process exited with code ${code}`);
+
+        const finalSessionId = capturedSessionId || sessionId || processKey;
+        activeCursorProcesses.delete(finalSessionId);
+
+        // Flush any final unterminated stdout line before completion handling.
+        if (stdoutLineBuffer.trim()) {
+          processCursorOutputLine(stdoutLineBuffer.trim());
+          stdoutLineBuffer = '';
+        }
+
+        if (
+          runSawWorkspaceTrustPrompt &&
+          code !== 0 &&
+          !hasRetriedWithTrust &&
+          !args.includes('--trust')
+        ) {
+          hasRetriedWithTrust = true;
+          runCursorProcess([...args, '--trust'], 'trust-retry');
+          return;
+        }
+
+        ws.send({
+          type: 'claude-complete',
+          sessionId: finalSessionId,
+          exitCode: code,
+          isNewSession: !sessionId && !!command // Flag to indicate this was a new session
+        });
+
+        if (code === 0) {
+          settleOnce(() => resolve());
+        } else {
+          settleOnce(() => reject(new Error(`Cursor CLI exited with code ${code}`)));
+        }
+      });
+
+      // Handle process errors
+      cursorProcess.on('error', (error) => {
+        console.error('Cursor CLI process error:', error);
+
+        // Clean up process reference on error
+        const finalSessionId = capturedSessionId || sessionId || processKey;
+        activeCursorProcesses.delete(finalSessionId);
+
+        ws.send({
+          type: 'cursor-error',
+          error: error.message,
+          sessionId: capturedSessionId || sessionId || null
+        });
+
+        settleOnce(() => reject(error));
+      });
+
+      // Close stdin since Cursor doesn't need interactive input
+      cursorProcess.stdin.end();
+    };
+
+    runCursorProcess(baseArgs, 'initial');
  });
 }

 function abortCursorSession(sessionId) {
  const process = activeCursorProcesses.get(sessionId);
  if (process) {
-    console.log(`🛑 Aborting Cursor session: ${sessionId}`);
+    console.log(`Aborting Cursor session: ${sessionId}`);
    process.kill('SIGTERM');
    activeCursorProcesses.delete(sessionId);
    return true;
--- a/server/database/db.js
+++ b/server/database/db.js
@@ -59,6 +59,15 @@ if (DB_PATH !== LEGACY_DB_PATH && !fs.existsSync(DB_PATH) && fs.existsSync(LEGAC
 // Create database connection
 const db = new Database(DB_PATH);

+// app_config must exist before any other module imports (auth.js reads the JWT secret at load time).
+// runMigrations() also creates this table, but it runs too late for existing installations
+// where auth.js is imported before initializeDatabase() is called.
+db.exec(`CREATE TABLE IF NOT EXISTS app_config (
+  key TEXT PRIMARY KEY,
+  value TEXT NOT NULL,
+  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+)`);
+
 // Show app installation path prominently
 const appInstallPath = path.join(__dirname, '../..');
 console.log('');
@@ -91,35 +100,24 @@ const runMigrations = () => {
      db.exec('ALTER TABLE users ADD COLUMN has_completed_onboarding BOOLEAN DEFAULT 0');
    }

-    db.exec(`
-      CREATE TABLE IF NOT EXISTS user_notification_preferences (
-        user_id INTEGER PRIMARY KEY,
-        preferences_json TEXT NOT NULL,
-        updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
-      )
-    `);
+    // Create app_config table if it doesn't exist (for existing installations)
+    db.exec(`CREATE TABLE IF NOT EXISTS app_config (
+      key TEXT PRIMARY KEY,
+      value TEXT NOT NULL,
+      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+    )`);

-    db.exec(`
-      CREATE TABLE IF NOT EXISTS vapid_keys (
-        id INTEGER PRIMARY KEY AUTOINCREMENT,
-        public_key TEXT NOT NULL,
-        private_key TEXT NOT NULL,
-        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-      )
-    `);
-
-    db.exec(`
-      CREATE TABLE IF NOT EXISTS push_subscriptions (
-        id INTEGER PRIMARY KEY AUTOINCREMENT,
-        user_id INTEGER NOT NULL,
-        endpoint TEXT NOT NULL UNIQUE,
-        keys_p256dh TEXT NOT NULL,
-        keys_auth TEXT NOT NULL,
-        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
-      )
-    `);
+    // Create session_names table if it doesn't exist (for existing installations)
+    db.exec(`CREATE TABLE IF NOT EXISTS session_names (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      session_id TEXT NOT NULL,
+      provider TEXT NOT NULL DEFAULT 'claude',
+      custom_name TEXT NOT NULL,
+      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+      updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+      UNIQUE(session_id, provider)
+    )`);
+    db.exec('CREATE INDEX IF NOT EXISTS idx_session_names_lookup ON session_names(session_id, provider)');

    console.log('Database migrations completed successfully');
  } catch (error) {
@@ -378,113 +376,84 @@ const credentialsDb = {
  }
 };

-const DEFAULT_NOTIFICATION_PREFERENCES = {
-  channels: {
-    inApp: false,
-    webPush: false
+// Session custom names database operations
+const sessionNamesDb = {
+  // Set (insert or update) a custom session name
+  setName: (sessionId, provider, customName) => {
+    db.prepare(`
+      INSERT INTO session_names (session_id, provider, custom_name)
+      VALUES (?, ?, ?)
+      ON CONFLICT(session_id, provider)
+      DO UPDATE SET custom_name = excluded.custom_name, updated_at = CURRENT_TIMESTAMP
+    `).run(sessionId, provider, customName);
  },
-  events: {
-    actionRequired: true,
-    stop: true,
-    error: true
+
+  // Get a single custom session name
+  getName: (sessionId, provider) => {
+    const row = db.prepare(
+      'SELECT custom_name FROM session_names WHERE session_id = ? AND provider = ?'
+    ).get(sessionId, provider);
+    return row?.custom_name || null;
+  },
+
+  // Batch lookup — returns Map<sessionId, customName>
+  getNames: (sessionIds, provider) => {
+    if (!sessionIds.length) return new Map();
+    const placeholders = sessionIds.map(() => '?').join(',');
+    const rows = db.prepare(
+      `SELECT session_id, custom_name FROM session_names
+       WHERE session_id IN (${placeholders}) AND provider = ?`
+    ).all(...sessionIds, provider);
+    return new Map(rows.map(r => [r.session_id, r.custom_name]));
+  },
+
+  // Delete a custom session name
+  deleteName: (sessionId, provider) => {
+    return db.prepare(
+      'DELETE FROM session_names WHERE session_id = ? AND provider = ?'
+    ).run(sessionId, provider).changes > 0;
+  },
+};
+
+// Apply custom session names from the database (overrides CLI-generated summaries)
+function applyCustomSessionNames(sessions, provider) {
+  if (!sessions?.length) return;
+  try {
+    const ids = sessions.map(s => s.id);
+    const customNames = sessionNamesDb.getNames(ids, provider);
+    for (const session of sessions) {
+      const custom = customNames.get(session.id);
+      if (custom) session.summary = custom;
+    }
+  } catch (error) {
+    console.warn(`[DB] Failed to apply custom session names for ${provider}:`, error.message);
  }
-};
+}

-const normalizeNotificationPreferences = (value) => {
-  const source = value && typeof value === 'object' ? value : {};
-
-  return {
-    channels: {
-      inApp: source.channels?.inApp === true,
-      webPush: source.channels?.webPush === true
-    },
-    events: {
-      actionRequired: source.events?.actionRequired !== false,
-      stop: source.events?.stop !== false,
-      error: source.events?.error !== false
-    }
-  };
-};
-
-const notificationPreferencesDb = {
-  getPreferences: (userId) => {
+// App config database operations
+const appConfigDb = {
+  get: (key) => {
    try {
-      const row = db.prepare('SELECT preferences_json FROM user_notification_preferences WHERE user_id = ?').get(userId);
-      if (!row) {
-        const defaults = normalizeNotificationPreferences(DEFAULT_NOTIFICATION_PREFERENCES);
-        db.prepare(
-          'INSERT INTO user_notification_preferences (user_id, preferences_json, updated_at) VALUES (?, ?, CURRENT_TIMESTAMP)'
-        ).run(userId, JSON.stringify(defaults));
-        return defaults;
-      }
-
-      let parsed;
-      try {
-        parsed = JSON.parse(row.preferences_json);
-      } catch {
-        parsed = DEFAULT_NOTIFICATION_PREFERENCES;
-      }
-      return normalizeNotificationPreferences(parsed);
+      const row = db.prepare('SELECT value FROM app_config WHERE key = ?').get(key);
+      return row?.value || null;
    } catch (err) {
-      throw err;
+      return null;
    }
  },

-  updatePreferences: (userId, preferences) => {
-    try {
-      const normalized = normalizeNotificationPreferences(preferences);
-      db.prepare(
-        `INSERT INTO user_notification_preferences (user_id, preferences_json, updated_at)
-         VALUES (?, ?, CURRENT_TIMESTAMP)
-         ON CONFLICT(user_id) DO UPDATE SET
-           preferences_json = excluded.preferences_json,
-           updated_at = CURRENT_TIMESTAMP`
-      ).run(userId, JSON.stringify(normalized));
-      return normalized;
-    } catch (err) {
-      throw err;
-    }
-  }
-};
-
-const pushSubscriptionsDb = {
-  saveSubscription: (userId, endpoint, keysP256dh, keysAuth) => {
-    try {
-      db.prepare(
-        `INSERT INTO push_subscriptions (user_id, endpoint, keys_p256dh, keys_auth)
-         VALUES (?, ?, ?, ?)
-         ON CONFLICT(endpoint) DO UPDATE SET
-           user_id = excluded.user_id,
-           keys_p256dh = excluded.keys_p256dh,
-           keys_auth = excluded.keys_auth`
-      ).run(userId, endpoint, keysP256dh, keysAuth);
-    } catch (err) {
-      throw err;
-    }
+  set: (key, value) => {
+    db.prepare(
+      'INSERT INTO app_config (key, value) VALUES (?, ?) ON CONFLICT(key) DO UPDATE SET value = excluded.value'
+    ).run(key, value);
  },

-  getSubscriptions: (userId) => {
-    try {
-      return db.prepare('SELECT endpoint, keys_p256dh, keys_auth FROM push_subscriptions WHERE user_id = ?').all(userId);
-    } catch (err) {
-      throw err;
-    }
-  },
-
-  removeSubscription: (endpoint) => {
-    try {
-      db.prepare('DELETE FROM push_subscriptions WHERE endpoint = ?').run(endpoint);
-    } catch (err) {
-      throw err;
-    }
-  },
-
-  removeAllForUser: (userId) => {
-    try {
-      db.prepare('DELETE FROM push_subscriptions WHERE user_id = ?').run(userId);
-    } catch (err) {
-      throw err;
+  getOrCreateJwtSecret: () => {
+    let secret = appConfigDb.get('jwt_secret');
+    if (!secret) {
+      secret = crypto.randomBytes(64).toString('hex');
+      appConfigDb.set('jwt_secret', secret);
    }
+    return secret;
  }
 };

@@ -513,7 +482,8 @@ export {
  userDb,
  apiKeysDb,
  credentialsDb,
-  notificationPreferencesDb,
-  pushSubscriptionsDb,
+  sessionNamesDb,
+  applyCustomSessionNames,
+  appConfigDb,
  githubTokensDb // Backward compatibility
-};
+};
--- a/server/database/init.sql
+++ b/server/database/init.sql
@@ -51,29 +51,22 @@ CREATE INDEX IF NOT EXISTS idx_user_credentials_user_id ON user_credentials(user
 CREATE INDEX IF NOT EXISTS idx_user_credentials_type ON user_credentials(credential_type);
 CREATE INDEX IF NOT EXISTS idx_user_credentials_active ON user_credentials(is_active);

-- User notification preferences (backend-owned, provider-agnostic)
-CREATE TABLE IF NOT EXISTS user_notification_preferences (
-    user_id INTEGER PRIMARY KEY,
-    preferences_json TEXT NOT NULL,
-    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
-);
-
-- VAPID key pair for Web Push notifications
-CREATE TABLE IF NOT EXISTS vapid_keys (
+-- Session custom names (provider-agnostic display name overrides)
+CREATE TABLE IF NOT EXISTS session_names (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
-    public_key TEXT NOT NULL,
-    private_key TEXT NOT NULL,
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-);
-
-- Browser push subscriptions
-CREATE TABLE IF NOT EXISTS push_subscriptions (
-    id INTEGER PRIMARY KEY AUTOINCREMENT,
-    user_id INTEGER NOT NULL,
-    endpoint TEXT NOT NULL UNIQUE,
-    keys_p256dh TEXT NOT NULL,
-    keys_auth TEXT NOT NULL,
+    session_id TEXT NOT NULL,
+    provider TEXT NOT NULL DEFAULT 'claude',
+    custom_name TEXT NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE(session_id, provider)
 );
+
+CREATE INDEX IF NOT EXISTS idx_session_names_lookup ON session_names(session_id, provider);
+
+-- App configuration table (auto-generated secrets, settings, etc.)
+CREATE TABLE IF NOT EXISTS app_config (
+    key TEXT PRIMARY KEY,
+    value TEXT NOT NULL,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
--- a/server/index.js
+++ b/server/index.js
@@ -44,8 +44,8 @@ import pty from 'node-pty';
 import fetch from 'node-fetch';
 import mime from 'mime-types';

-import { getProjects, getSessions, getSessionMessages, renameProject, deleteSession, deleteProject, addProjectManually, extractProjectDirectory, clearProjectDirectoryCache } from './projects.js';
-import { queryClaudeSDK, abortClaudeSDKSession, isClaudeSDKSessionActive, getActiveClaudeSDKSessions, resolveToolApproval } from './claude-sdk.js';
+import { getProjects, getSessions, getSessionMessages, renameProject, deleteSession, deleteProject, addProjectManually, extractProjectDirectory, clearProjectDirectoryCache, searchConversations } from './projects.js';
+import { queryClaudeSDK, abortClaudeSDKSession, isClaudeSDKSessionActive, getActiveClaudeSDKSessions, resolveToolApproval, getPendingApprovalsForSession, reconnectSessionWriter } from './claude-sdk.js';
 import { spawnCursor, abortCursorSession, isCursorSessionActive, getActiveCursorSessions } from './cursor-cli.js';
 import { queryCodex, abortCodexSession, isCodexSessionActive, getActiveCodexSessions } from './openai-codex.js';
 import { spawnGemini, abortGeminiSession, isGeminiSessionActive, getActiveGeminiSessions } from './gemini-cli.js';
@@ -64,11 +64,14 @@ import cliAuthRoutes from './routes/cli-auth.js';
 import userRoutes from './routes/user.js';
 import codexRoutes from './routes/codex.js';
 import geminiRoutes from './routes/gemini.js';
-import { initializeDatabase } from './database/db.js';
-import { configureWebPush } from './services/vapid-keys.js';
+import pluginsRoutes from './routes/plugins.js';
+import { startEnabledPluginServers, stopAllPlugins } from './utils/plugin-process-manager.js';
+import { initializeDatabase, sessionNamesDb, applyCustomSessionNames } from './database/db.js';
 import { validateApiKey, authenticateToken, authenticateWebSocket } from './middleware/auth.js';
 import { IS_PLATFORM } from './constants/config.js';

+const VALID_PROVIDERS = ['claude', 'codex', 'cursor', 'gemini'];
+
 // File system watchers for provider project/session folders
 const PROVIDER_WATCH_PATHS = [
    { provider: 'claude', rootPath: path.join(os.homedir(), '.claude', 'projects') },
@@ -323,7 +326,7 @@ const wss = new WebSocketServer({
 // Make WebSocket server available to routes
 app.locals.wss = wss;

-app.use(cors());
+app.use(cors({ exposedHeaders: ['X-Refreshed-Token'] }));
 app.use(express.json({
    limit: '50mb',
    type: (req) => {
@@ -388,6 +391,9 @@ app.use('/api/codex', authenticateToken, codexRoutes);
 // Gemini API Routes (protected)
 app.use('/api/gemini', authenticateToken, geminiRoutes);

+// Plugins API Routes (protected)
+app.use('/api/plugins', authenticateToken, pluginsRoutes);
+
 // Agent API Routes (uses API key authentication)
 app.use('/api/agent', agentRoutes);

@@ -494,6 +500,7 @@ app.get('/api/projects/:projectName/sessions', authenticateToken, async (req, re
    try {
        const { limit = 5, offset = 0 } = req.query;
        const result = await getSessions(req.params.projectName, parseInt(limit), parseInt(offset));
+        applyCustomSessionNames(result.sessions, 'claude');
        res.json(result);
    } catch (error) {
        res.status(500).json({ error: error.message });
@@ -542,6 +549,7 @@ app.delete('/api/projects/:projectName/sessions/:sessionId', authenticateToken,
        const { projectName, sessionId } = req.params;
        console.log(`[API] Deleting session: ${sessionId} from project: ${projectName}`);
        await deleteSession(projectName, sessionId);
+        sessionNamesDb.deleteName(sessionId, 'claude');
        console.log(`[API] Session ${sessionId} deleted successfully`);
        res.json({ success: true });
    } catch (error) {
@@ -550,6 +558,32 @@ app.delete('/api/projects/:projectName/sessions/:sessionId', authenticateToken,
    }
 });

+// Rename session endpoint
+app.put('/api/sessions/:sessionId/rename', authenticateToken, async (req, res) => {
+    try {
+        const { sessionId } = req.params;
+        const safeSessionId = String(sessionId).replace(/[^a-zA-Z0-9._-]/g, '');
+        if (!safeSessionId || safeSessionId !== String(sessionId)) {
+            return res.status(400).json({ error: 'Invalid sessionId' });
+        }
+        const { summary, provider } = req.body;
+        if (!summary || typeof summary !== 'string' || summary.trim() === '') {
+            return res.status(400).json({ error: 'Summary is required' });
+        }
+        if (summary.trim().length > 500) {
+            return res.status(400).json({ error: 'Summary must not exceed 500 characters' });
+        }
+        if (!provider || !VALID_PROVIDERS.includes(provider)) {
+            return res.status(400).json({ error: `Provider must be one of: ${VALID_PROVIDERS.join(', ')}` });
+        }
+        sessionNamesDb.setName(safeSessionId, provider, summary.trim());
+        res.json({ success: true });
+    } catch (error) {
+        console.error(`[API] Error renaming session ${req.params.sessionId}:`, error);
+        res.status(500).json({ error: error.message });
+    }
+});
+
 // Delete project endpoint (force=true to delete with sessions)
 app.delete('/api/projects/:projectName', authenticateToken, async (req, res) => {
    try {
@@ -579,6 +613,51 @@ app.post('/api/projects/create', authenticateToken, async (req, res) => {
    }
 });

+// Search conversations content (SSE streaming)
+app.get('/api/search/conversations', authenticateToken, async (req, res) => {
+    const query = typeof req.query.q === 'string' ? req.query.q.trim() : '';
+    const parsedLimit = Number.parseInt(String(req.query.limit), 10);
+    const limit = Number.isNaN(parsedLimit) ? 50 : Math.max(1, Math.min(parsedLimit, 100));
+
+    if (query.length < 2) {
+        return res.status(400).json({ error: 'Query must be at least 2 characters' });
+    }
+
+    res.writeHead(200, {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        'Connection': 'keep-alive',
+        'X-Accel-Buffering': 'no',
+    });
+
+    let closed = false;
+    const abortController = new AbortController();
+    req.on('close', () => { closed = true; abortController.abort(); });
+
+    try {
+        await searchConversations(query, limit, ({ projectResult, totalMatches, scannedProjects, totalProjects }) => {
+            if (closed) return;
+            if (projectResult) {
+                res.write(`event: result\ndata: ${JSON.stringify({ projectResult, totalMatches, scannedProjects, totalProjects })}\n\n`);
+            } else {
+                res.write(`event: progress\ndata: ${JSON.stringify({ totalMatches, scannedProjects, totalProjects })}\n\n`);
+            }
+        }, abortController.signal);
+        if (!closed) {
+            res.write(`event: done\ndata: {}\n\n`);
+        }
+    } catch (error) {
+        console.error('Error searching conversations:', error);
+        if (!closed) {
+            res.write(`event: error\ndata: ${JSON.stringify({ error: 'Search failed' })}\n\n`);
+        }
+    } finally {
+        if (!closed) {
+            res.end();
+        }
+    }
+});
+
 const expandWorkspacePath = (inputPath) => {
    if (!inputPath) return inputPath;
    if (inputPath === '~') {
@@ -1327,7 +1406,7 @@ wss.on('connection', (ws, request) => {
    if (pathname === '/shell') {
        handleShellConnection(ws);
    } else if (pathname === '/ws') {
-        handleChatConnection(ws, request);
+        handleChatConnection(ws);
    } else {
        console.log('[WARN] Unknown WebSocket path:', pathname);
        ws.close();
@@ -1338,10 +1417,9 @@ wss.on('connection', (ws, request) => {
 * WebSocket Writer - Wrapper for WebSocket to match SSEStreamWriter interface
 */
 class WebSocketWriter {
-    constructor(ws, userId = null) {
+    constructor(ws) {
        this.ws = ws;
        this.sessionId = null;
-        this.userId = userId;
        this.isWebSocketWriter = true;  // Marker for transport detection
    }

@@ -1352,6 +1430,10 @@ class WebSocketWriter {
        }
    }

+    updateWebSocket(newRawWs) {
+        this.ws = newRawWs;
+    }
+
    setSessionId(sessionId) {
        this.sessionId = sessionId;
    }
@@ -1362,14 +1444,14 @@ class WebSocketWriter {
 }

 // Handle chat WebSocket connections
-function handleChatConnection(ws, request) {
+function handleChatConnection(ws) {
    console.log('[INFO] Chat WebSocket connected');

    // Add to connected clients for project updates
    connectedClients.add(ws);

    // Wrap WebSocket with writer for consistent interface with SSEStreamWriter
-    const writer = new WebSocketWriter(ws, request?.user?.id ?? request?.user?.userId ?? null);
+    const writer = new WebSocketWriter(ws);

    ws.on('message', async (message) => {
        try {
@@ -1466,6 +1548,11 @@ function handleChatConnection(ws, request) {
                } else {
                    // Use Claude Agents SDK
                    isActive = isClaudeSDKSessionActive(sessionId);
+                    if (isActive) {
+                        // Reconnect the session's writer to the new WebSocket so
+                        // subsequent SDK output flows to the refreshed client.
+                        reconnectSessionWriter(sessionId, ws);
+                    }
                }

                writer.send({
@@ -1474,6 +1561,17 @@ function handleChatConnection(ws, request) {
                    provider,
                    isProcessing: isActive
                });
+            } else if (data.type === 'get-pending-permissions') {
+                // Return pending permission requests for a session
+                const sessionId = data.sessionId;
+                if (sessionId && isClaudeSDKSessionActive(sessionId)) {
+                    const pending = getPendingApprovalsForSession(sessionId);
+                    writer.send({
+                        type: 'pending-permissions-response',
+                        sessionId,
+                        data: pending
+                    });
+                }
            } else if (data.type === 'get-active-sessions') {
                // Get all currently active sessions
                const activeSessions = {
@@ -1601,50 +1699,49 @@ function handleShellConnection(ws) {
                }));

                try {
-                    // Prepare the shell command adapted to the platform and provider
+                    // Validate projectPath — resolve to absolute and verify it exists
+                    const resolvedProjectPath = path.resolve(projectPath);
+                    try {
+                        const stats = fs.statSync(resolvedProjectPath);
+                        if (!stats.isDirectory()) {
+                            throw new Error('Not a directory');
+                        }
+                    } catch (pathErr) {
+                        ws.send(JSON.stringify({ type: 'error', message: 'Invalid project path' }));
+                        return;
+                    }
+
+                    // Validate sessionId — only allow safe characters
+                    const safeSessionIdPattern = /^[a-zA-Z0-9_.\-:]+$/;
+                    if (sessionId && !safeSessionIdPattern.test(sessionId)) {
+                        ws.send(JSON.stringify({ type: 'error', message: 'Invalid session ID' }));
+                        return;
+                    }
+
+                    // Build shell command — use cwd for project path (never interpolate into shell string)
                    let shellCommand;
                    if (isPlainShell) {
-                        // Plain shell mode - just run the initial command in the project directory
-                        if (os.platform() === 'win32') {
-                            shellCommand = `Set-Location -Path "${projectPath}"; ${initialCommand}`;
-                        } else {
-                            shellCommand = `cd "${projectPath}" && ${initialCommand}`;
-                        }
+                        // Plain shell mode - run the initial command in the project directory
+                        shellCommand = initialCommand;
                    } else if (provider === 'cursor') {
-                        // Use cursor-agent command
-                        if (os.platform() === 'win32') {
-                            if (hasSession && sessionId) {
-                                shellCommand = `Set-Location -Path "${projectPath}"; cursor-agent --resume="${sessionId}"`;
-                            } else {
-                                shellCommand = `Set-Location -Path "${projectPath}"; cursor-agent`;
-                            }
+                        if (hasSession && sessionId) {
+                            shellCommand = `cursor-agent --resume="${sessionId}"`;
                        } else {
-                            if (hasSession && sessionId) {
-                                shellCommand = `cd "${projectPath}" && cursor-agent --resume="${sessionId}"`;
-                            } else {
-                                shellCommand = `cd "${projectPath}" && cursor-agent`;
-                            }
+                            shellCommand = 'cursor-agent';
                        }
-
                    } else if (provider === 'codex') {
-                        // Use codex command
-                        if (os.platform() === 'win32') {
-                            if (hasSession && sessionId) {
-                                // Try to resume session, but with fallback to a new session if it fails
-                                shellCommand = `Set-Location -Path "${projectPath}"; codex resume "${sessionId}"; if ($LASTEXITCODE -ne 0) { codex }`;
+                        // Use codex command; attempt to resume and fall back to a new session when the resume fails.
+                        if (hasSession && sessionId) {
+                            if (os.platform() === 'win32') {
+                                // PowerShell syntax for fallback
+                                shellCommand = `codex resume "${sessionId}"; if ($LASTEXITCODE -ne 0) { codex }`;
                            } else {
-                                shellCommand = `Set-Location -Path "${projectPath}"; codex`;
+                                shellCommand = `codex resume "${sessionId}" || codex`;
                            }
                        } else {
-                            if (hasSession && sessionId) {
-                                // Try to resume session, but with fallback to a new session if it fails
-                                shellCommand = `cd "${projectPath}" && codex resume "${sessionId}" || codex`;
-                            } else {
-                                shellCommand = `cd "${projectPath}" && codex`;
-                            }
+                            shellCommand = 'codex';
                        }
                    } else if (provider === 'gemini') {
-                        // Use gemini command
                        const command = initialCommand || 'gemini';
                        let resumeId = sessionId;
                        if (hasSession && sessionId) {
@@ -1655,41 +1752,32 @@ function handleShellConnection(ws) {
                                const sess = sessionManager.getSession(sessionId);
                                if (sess && sess.cliSessionId) {
                                    resumeId = sess.cliSessionId;
+                                    // Validate the looked-up CLI session ID too
+                                    if (!safeSessionIdPattern.test(resumeId)) {
+                                        resumeId = null;
+                                    }
                                }
                            } catch (err) {
                                console.error('Failed to get Gemini CLI session ID:', err);
                            }
                        }

-                        if (os.platform() === 'win32') {
-                            if (hasSession && resumeId) {
-                                shellCommand = `Set-Location -Path "${projectPath}"; ${command} --resume "${resumeId}"`;
-                            } else {
-                                shellCommand = `Set-Location -Path "${projectPath}"; ${command}`;
-                            }
+                        if (hasSession && resumeId) {
+                            shellCommand = `${command} --resume "${resumeId}"`;
                        } else {
-                            if (hasSession && resumeId) {
-                                shellCommand = `cd "${projectPath}" && ${command} --resume "${resumeId}"`;
-                            } else {
-                                shellCommand = `cd "${projectPath}" && ${command}`;
-                            }
+                            shellCommand = command;
                        }
                    } else {
-                        // Use claude command (default) or initialCommand if provided
+                        // Claude (default provider)
                        const command = initialCommand || 'claude';
-                        if (os.platform() === 'win32') {
-                            if (hasSession && sessionId) {
-                                // Try to resume session, but with fallback to new session if it fails
-                                shellCommand = `Set-Location -Path "${projectPath}"; claude --resume ${sessionId}; if ($LASTEXITCODE -ne 0) { claude }`;
+                        if (hasSession && sessionId) {
+                            if (os.platform() === 'win32') {
+                                shellCommand = `claude --resume "${sessionId}"; if ($LASTEXITCODE -ne 0) { claude }`;
                            } else {
-                                shellCommand = `Set-Location -Path "${projectPath}"; ${command}`;
+                                shellCommand = `claude --resume "${sessionId}" || claude`;
                            }
                        } else {
-                            if (hasSession && sessionId) {
-                                shellCommand = `cd "${projectPath}" && claude --resume ${sessionId} || claude`;
-                            } else {
-                                shellCommand = `cd "${projectPath}" && ${command}`;
-                            }
+                            shellCommand = command;
                        }
                    }

@@ -1708,7 +1796,7 @@ function handleShellConnection(ws) {
                        name: 'xterm-256color',
                        cols: termCols,
                        rows: termRows,
-                        cwd: os.homedir(),
+                        cwd: resolvedProjectPath,
                        env: {
                            ...process.env,
                            TERM: 'xterm-256color',
@@ -2114,7 +2202,7 @@ app.get('/api/projects/:projectName/sessions/:sessionId/token-usage', authentica

        // Allow only safe characters in sessionId
        const safeSessionId = String(sessionId).replace(/[^a-zA-Z0-9._-]/g, '');
-        if (!safeSessionId) {
+        if (!safeSessionId || safeSessionId !== String(sessionId)) {
            return res.status(400).json({ error: 'Invalid sessionId' });
        }

@@ -2412,9 +2500,6 @@ async function startServer() {
        // Initialize authentication database
        await initializeDatabase();

-        // Configure Web Push (VAPID keys)
-        configureWebPush();
-
        // Check if running in production mode (dist folder exists)
        const distIndexPath = path.join(__dirname, '../dist/index.html');
        const isProduction = fs.existsSync(distIndexPath);
@@ -2442,7 +2527,20 @@ async function startServer() {

            // Start watching the projects folder for changes
            await setupProjectsWatcher();
+
+            // Start server-side plugin processes for enabled plugins
+            startEnabledPluginServers().catch(err => {
+                console.error('[Plugins] Error during startup:', err.message);
+            });
        });
+
+        // Clean up plugin processes on shutdown
+        const shutdownPlugins = async () => {
+            await stopAllPlugins();
+            process.exit(0);
+        };
+        process.on('SIGTERM', () => void shutdownPlugins());
+        process.on('SIGINT', () => void shutdownPlugins());
    } catch (error) {
        console.error('[ERROR] Failed to start server:', error);
        process.exit(1);
--- a/server/middleware/auth.js
+++ b/server/middleware/auth.js
@@ -1,9 +1,9 @@
 import jwt from 'jsonwebtoken';
-import { userDb } from '../database/db.js';
+import { userDb, appConfigDb } from '../database/db.js';
 import { IS_PLATFORM } from '../constants/config.js';

-// Get JWT secret from environment or use default (for development)
-const JWT_SECRET = process.env.JWT_SECRET || 'claude-ui-dev-secret-change-in-production';
+// Use env var if set, otherwise auto-generate a unique secret per installation
+const JWT_SECRET = process.env.JWT_SECRET || appConfigDb.getOrCreateJwtSecret();

 // Optional API key middleware
 const validateApiKey = (req, res, next) => {
@@ -58,6 +58,16 @@ const authenticateToken = async (req, res, next) => {
      return res.status(401).json({ error: 'Invalid token. User not found.' });
    }

+    // Auto-refresh: if token is past halfway through its lifetime, issue a new one
+    if (decoded.exp && decoded.iat) {
+      const now = Math.floor(Date.now() / 1000);
+      const halfLife = (decoded.exp - decoded.iat) / 2;
+      if (now > decoded.iat + halfLife) {
+        const newToken = generateToken(user);
+        res.setHeader('X-Refreshed-Token', newToken);
+      }
+    }
+
    req.user = user;
    next();
  } catch (error) {
@@ -66,15 +76,15 @@ const authenticateToken = async (req, res, next) => {
  }
 };

-// Generate JWT token (never expires)
+// Generate JWT token
 const generateToken = (user) => {
  return jwt.sign(
-    { 
-      userId: user.id, 
-      username: user.username 
+    {
+      userId: user.id,
+      username: user.username
    },
-    JWT_SECRET
-    // No expiration - token lasts forever
+    JWT_SECRET,
+    { expiresIn: '7d' }
  );
 };

@@ -85,7 +95,7 @@ const authenticateWebSocket = (token) => {
    try {
      const user = userDb.getFirstUser();
      if (user) {
-        return { id: user.id, userId: user.id, username: user.username };
+        return { userId: user.id, username: user.username };
      }
      return null;
    } catch (error) {
@@ -101,10 +111,12 @@ const authenticateWebSocket = (token) => {

  try {
    const decoded = jwt.verify(token, JWT_SECRET);
-    return {
-      ...decoded,
-      id: decoded.userId
-    };
+    // Verify user actually exists in database (matches REST authenticateToken behavior)
+    const user = userDb.getUserById(decoded.userId);
+    if (!user) {
+      return null;
+    }
+    return { userId: user.id, username: user.username };
  } catch (error) {
    console.error('WebSocket token verification error:', error);
    return null;
@@ -117,4 +129,4 @@ export {
  generateToken,
  authenticateWebSocket,
  JWT_SECRET
-};
+};
--- a/server/projects.js
+++ b/server/projects.js
@@ -66,6 +66,7 @@ import sqlite3 from 'sqlite3';
 import { open } from 'sqlite';
 import os from 'os';
 import sessionManager from './sessionManager.js';
+import { applyCustomSessionNames } from './database/db.js';

 // Import TaskMaster detection functions
 async function detectTaskMasterFolder(projectPath) {
@@ -458,6 +459,7 @@ async function getProjects(progressCallback = null) {
          total: 0
        };
      }
+      applyCustomSessionNames(project.sessions, 'claude');

      // Also fetch Cursor sessions for this project
      try {
@@ -466,6 +468,7 @@ async function getProjects(progressCallback = null) {
        console.warn(`Could not load Cursor sessions for project ${entry.name}:`, e.message);
        project.cursorSessions = [];
      }
+      applyCustomSessionNames(project.cursorSessions, 'cursor');

      // Also fetch Codex sessions for this project
      try {
@@ -476,14 +479,20 @@ async function getProjects(progressCallback = null) {
        console.warn(`Could not load Codex sessions for project ${entry.name}:`, e.message);
        project.codexSessions = [];
      }
+      applyCustomSessionNames(project.codexSessions, 'codex');

-      // Also fetch Gemini sessions for this project
+      // Also fetch Gemini sessions for this project (UI + CLI)
      try {
-        project.geminiSessions = sessionManager.getProjectSessions(actualProjectDir) || [];
+        const uiSessions = sessionManager.getProjectSessions(actualProjectDir) || [];
+        const cliSessions = await getGeminiCliSessions(actualProjectDir);
+        const uiIds = new Set(uiSessions.map(s => s.id));
+        const mergedGemini = [...uiSessions, ...cliSessions.filter(s => !uiIds.has(s.id))];
+        project.geminiSessions = mergedGemini;
      } catch (e) {
        console.warn(`Could not load Gemini sessions for project ${entry.name}:`, e.message);
        project.geminiSessions = [];
      }
+      applyCustomSessionNames(project.geminiSessions, 'gemini');

      // Add TaskMaster detection
      try {
@@ -567,6 +576,7 @@ async function getProjects(progressCallback = null) {
      } catch (e) {
        console.warn(`Could not load Cursor sessions for manual project ${projectName}:`, e.message);
      }
+      applyCustomSessionNames(project.cursorSessions, 'cursor');

      // Try to fetch Codex sessions for manual projects too
      try {
@@ -576,13 +586,18 @@ async function getProjects(progressCallback = null) {
      } catch (e) {
        console.warn(`Could not load Codex sessions for manual project ${projectName}:`, e.message);
      }
+      applyCustomSessionNames(project.codexSessions, 'codex');

-      // Try to fetch Gemini sessions for manual projects too
+      // Try to fetch Gemini sessions for manual projects too (UI + CLI)
      try {
-        project.geminiSessions = sessionManager.getProjectSessions(actualProjectDir) || [];
+        const uiSessions = sessionManager.getProjectSessions(actualProjectDir) || [];
+        const cliSessions = await getGeminiCliSessions(actualProjectDir);
+        const uiIds = new Set(uiSessions.map(s => s.id));
+        project.geminiSessions = [...uiSessions, ...cliSessions.filter(s => !uiIds.has(s.id))];
      } catch (e) {
        console.warn(`Could not load Gemini sessions for manual project ${projectName}:`, e.message);
      }
+      applyCustomSessionNames(project.geminiSessions, 'gemini');

      // Add TaskMaster detection for manual projects
      try {
@@ -1071,10 +1086,13 @@ async function renameProject(projectName, newDisplayName) {

  if (!newDisplayName || newDisplayName.trim() === '') {
    // Remove custom name if empty, will fall back to auto-generated
-    delete config[projectName];
+    if (config[projectName]) {
+      delete config[projectName].displayName;
+    }
  } else {
-    // Set custom display name
+    // Set custom display name, preserving other properties (manuallyAdded, originalPath)
    config[projectName] = {
+      ...config[projectName],
      displayName: newDisplayName.trim()
    };
  }
@@ -1479,6 +1497,23 @@ async function getCodexSessions(projectPath, options = {}) {
  }
 }

+function isVisibleCodexUserMessage(payload) {
+  if (!payload || payload.type !== 'user_message') {
+    return false;
+  }
+
+  // Codex logs internal context (environment, instructions) as non-plain user_message kinds.
+  if (payload.kind && payload.kind !== 'plain') {
+    return false;
+  }
+
+  if (typeof payload.message !== 'string' || payload.message.trim().length === 0) {
+    return false;
+  }
+  
+  return true;
+}
+
 // Parse a Codex session JSONL file to extract metadata
 async function parseCodexSessionFile(filePath) {
  try {
@@ -1514,8 +1549,8 @@ async function parseCodexSessionFile(filePath) {
            };
          }

-          // Count messages and extract user messages for summary
-          if (entry.type === 'event_msg' && entry.payload?.type === 'user_message') {
+          // Count visible user messages and extract summary from the latest plain user input.
+          if (entry.type === 'event_msg' && isVisibleCodexUserMessage(entry.payload)) {
            messageCount++;
            if (entry.payload.message) {
              lastUserMessage = entry.payload.message;
@@ -1622,25 +1657,36 @@ async function getCodexSessionMessages(sessionId, limit = null, offset = 0) {
              };
            }
          }
+          
+          // Use event_msg.user_message for user-visible inputs.
+          if (entry.type === 'event_msg' && isVisibleCodexUserMessage(entry.payload)) {
+            messages.push({
+              type: 'user',
+              timestamp: entry.timestamp,
+              message: {
+                role: 'user',
+                content: entry.payload.message
+              }
+            });
+          }

-          // Extract messages from response_item
-          if (entry.type === 'response_item' && entry.payload?.type === 'message') {
+          // response_item.message may include internal prompts for non-assistant roles.
+          // Keep only assistant output from response_item.
+          if (
+            entry.type === 'response_item' &&
+            entry.payload?.type === 'message' &&
+            entry.payload.role === 'assistant'
+          ) {
            const content = entry.payload.content;
-            const role = entry.payload.role || 'assistant';
            const textContent = extractText(content);

-            // Skip system context messages (environment_context)
-            if (textContent?.includes('<environment_context>')) {
-              continue;
-            }
-
            // Only add if there's actual content
            if (textContent?.trim()) {
              messages.push({
-                type: role === 'user' ? 'user' : 'assistant',
+                type: 'assistant',
                timestamp: entry.timestamp,
                message: {
-                  role: role,
+                  role: 'assistant',
                  content: textContent
                }
              });
@@ -1823,6 +1869,675 @@ async function deleteCodexSession(sessionId) {
  }
 }

+async function searchConversations(query, limit = 50, onProjectResult = null, signal = null) {
+  const safeQuery = typeof query === 'string' ? query.trim() : '';
+  const safeLimit = Math.max(1, Math.min(Number.isFinite(limit) ? limit : 50, 200));
+  const claudeDir = path.join(os.homedir(), '.claude', 'projects');
+  const config = await loadProjectConfig();
+  const results = [];
+  let totalMatches = 0;
+  const words = safeQuery.toLowerCase().split(/\s+/).filter(w => w.length > 0);
+  if (words.length === 0) return { results: [], totalMatches: 0, query: safeQuery };
+
+  const isAborted = () => signal?.aborted === true;
+
+  const isSystemMessage = (textContent) => {
+    return typeof textContent === 'string' && (
+      textContent.startsWith('<command-name>') ||
+      textContent.startsWith('<command-message>') ||
+      textContent.startsWith('<command-args>') ||
+      textContent.startsWith('<local-command-stdout>') ||
+      textContent.startsWith('<system-reminder>') ||
+      textContent.startsWith('Caveat:') ||
+      textContent.startsWith('This session is being continued from a previous') ||
+      textContent.startsWith('Invalid API key') ||
+      textContent.includes('{"subtasks":') ||
+      textContent.includes('CRITICAL: You MUST respond with ONLY a JSON') ||
+      textContent === 'Warmup'
+    );
+  };
+
+  const extractText = (content) => {
+    if (typeof content === 'string') return content;
+    if (Array.isArray(content)) {
+      return content
+        .filter(part => part.type === 'text' && part.text)
+        .map(part => part.text)
+        .join(' ');
+    }
+    return '';
+  };
+
+  const escapeRegex = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const wordPatterns = words.map(w => new RegExp(`(?<!\\p{L})${escapeRegex(w)}(?!\\p{L})`, 'u'));
+  const allWordsMatch = (textLower) => {
+    return wordPatterns.every(p => p.test(textLower));
+  };
+
+  const buildSnippet = (text, textLower, snippetLen = 150) => {
+    let firstIndex = -1;
+    let firstWordLen = 0;
+    for (const w of words) {
+      const re = new RegExp(`(?<!\\p{L})${escapeRegex(w)}(?!\\p{L})`, 'u');
+      const m = re.exec(textLower);
+      if (m && (firstIndex === -1 || m.index < firstIndex)) {
+        firstIndex = m.index;
+        firstWordLen = w.length;
+      }
+    }
+    if (firstIndex === -1) firstIndex = 0;
+    const halfLen = Math.floor(snippetLen / 2);
+    let start = Math.max(0, firstIndex - halfLen);
+    let end = Math.min(text.length, firstIndex + halfLen + firstWordLen);
+    let snippet = text.slice(start, end).replace(/\n/g, ' ');
+    const prefix = start > 0 ? '...' : '';
+    const suffix = end < text.length ? '...' : '';
+    snippet = prefix + snippet + suffix;
+    const snippetLower = snippet.toLowerCase();
+    const highlights = [];
+    for (const word of words) {
+      const re = new RegExp(`(?<!\\p{L})${escapeRegex(word)}(?!\\p{L})`, 'gu');
+      let match;
+      while ((match = re.exec(snippetLower)) !== null) {
+        highlights.push({ start: match.index, end: match.index + word.length });
+      }
+    }
+    highlights.sort((a, b) => a.start - b.start);
+    const merged = [];
+    for (const h of highlights) {
+      const last = merged[merged.length - 1];
+      if (last && h.start <= last.end) {
+        last.end = Math.max(last.end, h.end);
+      } else {
+        merged.push({ ...h });
+      }
+    }
+    return { snippet, highlights: merged };
+  };
+
+  try {
+    await fs.access(claudeDir);
+    const entries = await fs.readdir(claudeDir, { withFileTypes: true });
+    const projectDirs = entries.filter(e => e.isDirectory());
+    let scannedProjects = 0;
+    const totalProjects = projectDirs.length;
+
+    for (const projectEntry of projectDirs) {
+      if (totalMatches >= safeLimit || isAborted()) break;
+
+      const projectName = projectEntry.name;
+      const projectDir = path.join(claudeDir, projectName);
+      const displayName = config[projectName]?.displayName
+        || await generateDisplayName(projectName);
+
+      let files;
+      try {
+        files = await fs.readdir(projectDir);
+      } catch {
+        continue;
+      }
+
+      const jsonlFiles = files.filter(
+        file => file.endsWith('.jsonl') && !file.startsWith('agent-')
+      );
+
+      const projectResult = {
+        projectName,
+        projectDisplayName: displayName,
+        sessions: []
+      };
+
+      for (const file of jsonlFiles) {
+        if (totalMatches >= safeLimit || isAborted()) break;
+
+        const filePath = path.join(projectDir, file);
+        const sessionMatches = new Map();
+        const sessionSummaries = new Map();
+        const pendingSummaries = new Map();
+        const sessionLastMessages = new Map();
+        let currentSessionId = null;
+
+        try {
+          const fileStream = fsSync.createReadStream(filePath);
+          const rl = readline.createInterface({
+            input: fileStream,
+            crlfDelay: Infinity
+          });
+
+          for await (const line of rl) {
+            if (totalMatches >= safeLimit || isAborted()) break;
+            if (!line.trim()) continue;
+
+            let entry;
+            try {
+              entry = JSON.parse(line);
+            } catch {
+              continue;
+            }
+
+            if (entry.sessionId) {
+              currentSessionId = entry.sessionId;
+            }
+            if (entry.type === 'summary' && entry.summary) {
+              const sid = entry.sessionId || currentSessionId;
+              if (sid) {
+                sessionSummaries.set(sid, entry.summary);
+              } else if (entry.leafUuid) {
+                pendingSummaries.set(entry.leafUuid, entry.summary);
+              }
+            }
+
+            // Apply pending summary via parentUuid
+            if (entry.parentUuid && currentSessionId && !sessionSummaries.has(currentSessionId)) {
+              const pending = pendingSummaries.get(entry.parentUuid);
+              if (pending) sessionSummaries.set(currentSessionId, pending);
+            }
+
+            // Track last user/assistant message for fallback title
+            if (entry.message?.content && currentSessionId && !entry.isApiErrorMessage) {
+              const role = entry.message.role;
+              if (role === 'user' || role === 'assistant') {
+                const text = extractText(entry.message.content);
+                if (text && !isSystemMessage(text)) {
+                  if (!sessionLastMessages.has(currentSessionId)) {
+                    sessionLastMessages.set(currentSessionId, {});
+                  }
+                  const msgs = sessionLastMessages.get(currentSessionId);
+                  if (role === 'user') msgs.user = text;
+                  else msgs.assistant = text;
+                }
+              }
+            }
+
+            if (!entry.message?.content) continue;
+            if (entry.message.role !== 'user' && entry.message.role !== 'assistant') continue;
+            if (entry.isApiErrorMessage) continue;
+
+            const text = extractText(entry.message.content);
+            if (!text || isSystemMessage(text)) continue;
+
+            const textLower = text.toLowerCase();
+            if (!allWordsMatch(textLower)) continue;
+
+            const sessionId = entry.sessionId || currentSessionId || file.replace('.jsonl', '');
+            if (!sessionMatches.has(sessionId)) {
+              sessionMatches.set(sessionId, []);
+            }
+
+            const matches = sessionMatches.get(sessionId);
+            if (matches.length < 2) {
+              const { snippet, highlights } = buildSnippet(text, textLower);
+              matches.push({
+                role: entry.message.role,
+                snippet,
+                highlights,
+                timestamp: entry.timestamp || null,
+                provider: 'claude',
+                messageUuid: entry.uuid || null
+              });
+              totalMatches++;
+            }
+          }
+        } catch {
+          continue;
+        }
+
+        for (const [sessionId, matches] of sessionMatches) {
+          projectResult.sessions.push({
+            sessionId,
+            provider: 'claude',
+            sessionSummary: sessionSummaries.get(sessionId) || (() => {
+              const msgs = sessionLastMessages.get(sessionId);
+              const lastMsg = msgs?.user || msgs?.assistant;
+              return lastMsg ? (lastMsg.length > 50 ? lastMsg.substring(0, 50) + '...' : lastMsg) : 'New Session';
+            })(),
+            matches
+          });
+        }
+      }
+
+      // Search Codex sessions for this project
+      try {
+        const actualProjectDir = await extractProjectDirectory(projectName);
+        if (actualProjectDir && !isAborted() && totalMatches < safeLimit) {
+          await searchCodexSessionsForProject(
+            actualProjectDir, projectResult, words, allWordsMatch, extractText, isSystemMessage,
+            buildSnippet, safeLimit, () => totalMatches, (n) => { totalMatches += n; }, isAborted
+          );
+        }
+      } catch {
+        // Skip codex search errors
+      }
+
+      // Search Gemini sessions for this project
+      try {
+        const actualProjectDir = await extractProjectDirectory(projectName);
+        if (actualProjectDir && !isAborted() && totalMatches < safeLimit) {
+          await searchGeminiSessionsForProject(
+            actualProjectDir, projectResult, words, allWordsMatch,
+            buildSnippet, safeLimit, () => totalMatches, (n) => { totalMatches += n; }
+          );
+        }
+      } catch {
+        // Skip gemini search errors
+      }
+
+      scannedProjects++;
+      if (projectResult.sessions.length > 0) {
+        results.push(projectResult);
+        if (onProjectResult) {
+          onProjectResult({ projectResult, totalMatches, scannedProjects, totalProjects });
+        }
+      } else if (onProjectResult && scannedProjects % 10 === 0) {
+        onProjectResult({ projectResult: null, totalMatches, scannedProjects, totalProjects });
+      }
+    }
+  } catch {
+    // claudeDir doesn't exist
+  }
+
+  return { results, totalMatches, query: safeQuery };
+}
+
+async function searchCodexSessionsForProject(
+  projectPath, projectResult, words, allWordsMatch, extractText, isSystemMessage,
+  buildSnippet, limit, getTotalMatches, addMatches, isAborted
+) {
+  const normalizedProjectPath = normalizeComparablePath(projectPath);
+  if (!normalizedProjectPath) return;
+  const codexSessionsDir = path.join(os.homedir(), '.codex', 'sessions');
+  try {
+    await fs.access(codexSessionsDir);
+  } catch {
+    return;
+  }
+
+  const jsonlFiles = await findCodexJsonlFiles(codexSessionsDir);
+
+  for (const filePath of jsonlFiles) {
+    if (getTotalMatches() >= limit || isAborted()) break;
+
+    try {
+      const fileStream = fsSync.createReadStream(filePath);
+      const rl = readline.createInterface({ input: fileStream, crlfDelay: Infinity });
+
+      // First pass: read session_meta to check project path match
+      let sessionMeta = null;
+      for await (const line of rl) {
+        if (!line.trim()) continue;
+        try {
+          const entry = JSON.parse(line);
+          if (entry.type === 'session_meta' && entry.payload) {
+            sessionMeta = entry.payload;
+            break;
+          }
+        } catch { continue; }
+      }
+
+      // Skip sessions that don't belong to this project
+      if (!sessionMeta) continue;
+      const sessionProjectPath = normalizeComparablePath(sessionMeta.cwd);
+      if (sessionProjectPath !== normalizedProjectPath) continue;
+
+      // Second pass: re-read file to find matching messages
+      const fileStream2 = fsSync.createReadStream(filePath);
+      const rl2 = readline.createInterface({ input: fileStream2, crlfDelay: Infinity });
+      let lastUserMessage = null;
+      const matches = [];
+
+      for await (const line of rl2) {
+        if (getTotalMatches() >= limit || isAborted()) break;
+        if (!line.trim()) continue;
+
+        let entry;
+        try { entry = JSON.parse(line); } catch { continue; }
+
+        let text = null;
+        let role = null;
+
+        if (entry.type === 'event_msg' && entry.payload?.type === 'user_message' && entry.payload.message) {
+          text = entry.payload.message;
+          role = 'user';
+          lastUserMessage = text;
+        } else if (entry.type === 'response_item' && entry.payload?.type === 'message') {
+          const contentParts = entry.payload.content || [];
+          if (entry.payload.role === 'user') {
+            text = contentParts
+              .filter(p => p.type === 'input_text' && p.text)
+              .map(p => p.text)
+              .join(' ');
+            role = 'user';
+            if (text) lastUserMessage = text;
+          } else if (entry.payload.role === 'assistant') {
+            text = contentParts
+              .filter(p => p.type === 'output_text' && p.text)
+              .map(p => p.text)
+              .join(' ');
+            role = 'assistant';
+          }
+        }
+
+        if (!text || !role) continue;
+        const textLower = text.toLowerCase();
+        if (!allWordsMatch(textLower)) continue;
+
+        if (matches.length < 2) {
+          const { snippet, highlights } = buildSnippet(text, textLower);
+          matches.push({ role, snippet, highlights, timestamp: entry.timestamp || null, provider: 'codex' });
+          addMatches(1);
+        }
+      }
+
+      if (matches.length > 0) {
+        projectResult.sessions.push({
+          sessionId: sessionMeta.id,
+          provider: 'codex',
+          sessionSummary: lastUserMessage
+            ? (lastUserMessage.length > 50 ? lastUserMessage.substring(0, 50) + '...' : lastUserMessage)
+            : 'Codex Session',
+          matches
+        });
+      }
+    } catch {
+      continue;
+    }
+  }
+}
+
+async function searchGeminiSessionsForProject(
+  projectPath, projectResult, words, allWordsMatch,
+  buildSnippet, limit, getTotalMatches, addMatches
+) {
+  // 1) Search in-memory sessions (created via UI)
+  for (const [sessionId, session] of sessionManager.sessions) {
+    if (getTotalMatches() >= limit) break;
+    if (session.projectPath !== projectPath) continue;
+
+    const matches = [];
+    for (const msg of session.messages) {
+      if (getTotalMatches() >= limit) break;
+      if (msg.role !== 'user' && msg.role !== 'assistant') continue;
+
+      const text = typeof msg.content === 'string' ? msg.content
+        : Array.isArray(msg.content) ? msg.content.filter(p => p.type === 'text').map(p => p.text).join(' ')
+        : '';
+      if (!text) continue;
+
+      const textLower = text.toLowerCase();
+      if (!allWordsMatch(textLower)) continue;
+
+      if (matches.length < 2) {
+        const { snippet, highlights } = buildSnippet(text, textLower);
+        matches.push({
+          role: msg.role, snippet, highlights,
+          timestamp: msg.timestamp ? msg.timestamp.toISOString() : null,
+          provider: 'gemini'
+        });
+        addMatches(1);
+      }
+    }
+
+    if (matches.length > 0) {
+      const firstUserMsg = session.messages.find(m => m.role === 'user');
+      const summary = firstUserMsg?.content
+        ? (typeof firstUserMsg.content === 'string'
+          ? (firstUserMsg.content.length > 50 ? firstUserMsg.content.substring(0, 50) + '...' : firstUserMsg.content)
+          : 'Gemini Session')
+        : 'Gemini Session';
+
+      projectResult.sessions.push({
+        sessionId,
+        provider: 'gemini',
+        sessionSummary: summary,
+        matches
+      });
+    }
+  }
+
+  // 2) Search Gemini CLI sessions on disk (~/.gemini/tmp/<project>/chats/*.json)
+  const normalizedProjectPath = normalizeComparablePath(projectPath);
+  if (!normalizedProjectPath) return;
+
+  const geminiTmpDir = path.join(os.homedir(), '.gemini', 'tmp');
+  try {
+    await fs.access(geminiTmpDir);
+  } catch {
+    return;
+  }
+
+  const trackedSessionIds = new Set();
+  for (const [sid] of sessionManager.sessions) {
+    trackedSessionIds.add(sid);
+  }
+
+  let projectDirs;
+  try {
+    projectDirs = await fs.readdir(geminiTmpDir);
+  } catch {
+    return;
+  }
+
+  for (const projectDir of projectDirs) {
+    if (getTotalMatches() >= limit) break;
+
+    const projectRootFile = path.join(geminiTmpDir, projectDir, '.project_root');
+    let projectRoot;
+    try {
+      projectRoot = (await fs.readFile(projectRootFile, 'utf8')).trim();
+    } catch {
+      continue;
+    }
+
+    if (normalizeComparablePath(projectRoot) !== normalizedProjectPath) continue;
+
+    const chatsDir = path.join(geminiTmpDir, projectDir, 'chats');
+    let chatFiles;
+    try {
+      chatFiles = await fs.readdir(chatsDir);
+    } catch {
+      continue;
+    }
+
+    for (const chatFile of chatFiles) {
+      if (getTotalMatches() >= limit) break;
+      if (!chatFile.endsWith('.json')) continue;
+
+      try {
+        const filePath = path.join(chatsDir, chatFile);
+        const data = await fs.readFile(filePath, 'utf8');
+        const session = JSON.parse(data);
+        if (!session.messages || !Array.isArray(session.messages)) continue;
+
+        const cliSessionId = session.sessionId || chatFile.replace('.json', '');
+        if (trackedSessionIds.has(cliSessionId)) continue;
+
+        const matches = [];
+        let firstUserText = null;
+
+        for (const msg of session.messages) {
+          if (getTotalMatches() >= limit) break;
+
+          const role = msg.type === 'user' ? 'user'
+            : (msg.type === 'gemini' || msg.type === 'assistant') ? 'assistant'
+            : null;
+          if (!role) continue;
+
+          let text = '';
+          if (typeof msg.content === 'string') {
+            text = msg.content;
+          } else if (Array.isArray(msg.content)) {
+            text = msg.content
+              .filter(p => p.text)
+              .map(p => p.text)
+              .join(' ');
+          }
+          if (!text) continue;
+
+          if (role === 'user' && !firstUserText) firstUserText = text;
+
+          const textLower = text.toLowerCase();
+          if (!allWordsMatch(textLower)) continue;
+
+          if (matches.length < 2) {
+            const { snippet, highlights } = buildSnippet(text, textLower);
+            matches.push({
+              role, snippet, highlights,
+              timestamp: msg.timestamp || null,
+              provider: 'gemini'
+            });
+            addMatches(1);
+          }
+        }
+
+        if (matches.length > 0) {
+          const summary = firstUserText
+            ? (firstUserText.length > 50 ? firstUserText.substring(0, 50) + '...' : firstUserText)
+            : 'Gemini CLI Session';
+
+          projectResult.sessions.push({
+            sessionId: cliSessionId,
+            provider: 'gemini',
+            sessionSummary: summary,
+            matches
+          });
+        }
+      } catch {
+        continue;
+      }
+    }
+  }
+}
+
+async function getGeminiCliSessions(projectPath) {
+  const normalizedProjectPath = normalizeComparablePath(projectPath);
+  if (!normalizedProjectPath) return [];
+
+  const geminiTmpDir = path.join(os.homedir(), '.gemini', 'tmp');
+  try {
+    await fs.access(geminiTmpDir);
+  } catch {
+    return [];
+  }
+
+  const sessions = [];
+  let projectDirs;
+  try {
+    projectDirs = await fs.readdir(geminiTmpDir);
+  } catch {
+    return [];
+  }
+
+  for (const projectDir of projectDirs) {
+    const projectRootFile = path.join(geminiTmpDir, projectDir, '.project_root');
+    let projectRoot;
+    try {
+      projectRoot = (await fs.readFile(projectRootFile, 'utf8')).trim();
+    } catch {
+      continue;
+    }
+
+    if (normalizeComparablePath(projectRoot) !== normalizedProjectPath) continue;
+
+    const chatsDir = path.join(geminiTmpDir, projectDir, 'chats');
+    let chatFiles;
+    try {
+      chatFiles = await fs.readdir(chatsDir);
+    } catch {
+      continue;
+    }
+
+    for (const chatFile of chatFiles) {
+      if (!chatFile.endsWith('.json')) continue;
+      try {
+        const filePath = path.join(chatsDir, chatFile);
+        const data = await fs.readFile(filePath, 'utf8');
+        const session = JSON.parse(data);
+        if (!session.messages || !Array.isArray(session.messages)) continue;
+
+        const sessionId = session.sessionId || chatFile.replace('.json', '');
+        const firstUserMsg = session.messages.find(m => m.type === 'user');
+        let summary = 'Gemini CLI Session';
+        if (firstUserMsg) {
+          const text = Array.isArray(firstUserMsg.content)
+            ? firstUserMsg.content.filter(p => p.text).map(p => p.text).join(' ')
+            : (typeof firstUserMsg.content === 'string' ? firstUserMsg.content : '');
+          if (text) {
+            summary = text.length > 50 ? text.substring(0, 50) + '...' : text;
+          }
+        }
+
+        sessions.push({
+          id: sessionId,
+          summary,
+          messageCount: session.messages.length,
+          lastActivity: session.lastUpdated || session.startTime || null,
+          provider: 'gemini'
+        });
+      } catch {
+        continue;
+      }
+    }
+  }
+
+  return sessions.sort((a, b) =>
+    new Date(b.lastActivity || 0) - new Date(a.lastActivity || 0)
+  );
+}
+
+async function getGeminiCliSessionMessages(sessionId) {
+  const geminiTmpDir = path.join(os.homedir(), '.gemini', 'tmp');
+  let projectDirs;
+  try {
+    projectDirs = await fs.readdir(geminiTmpDir);
+  } catch {
+    return [];
+  }
+
+  for (const projectDir of projectDirs) {
+    const chatsDir = path.join(geminiTmpDir, projectDir, 'chats');
+    let chatFiles;
+    try {
+      chatFiles = await fs.readdir(chatsDir);
+    } catch {
+      continue;
+    }
+
+    for (const chatFile of chatFiles) {
+      if (!chatFile.endsWith('.json')) continue;
+      try {
+        const filePath = path.join(chatsDir, chatFile);
+        const data = await fs.readFile(filePath, 'utf8');
+        const session = JSON.parse(data);
+        const fileSessionId = session.sessionId || chatFile.replace('.json', '');
+        if (fileSessionId !== sessionId) continue;
+
+        return (session.messages || []).map(msg => {
+          const role = msg.type === 'user' ? 'user'
+            : (msg.type === 'gemini' || msg.type === 'assistant') ? 'assistant'
+            : msg.type;
+
+          let content = '';
+          if (typeof msg.content === 'string') {
+            content = msg.content;
+          } else if (Array.isArray(msg.content)) {
+            content = msg.content.filter(p => p.text).map(p => p.text).join('\n');
+          }
+
+          return {
+            type: 'message',
+            message: { role, content },
+            timestamp: msg.timestamp || null
+          };
+        });
+      } catch {
+        continue;
+      }
+    }
+  }
+
+  return [];
+}
+
 export {
  getProjects,
  getSessions,
@@ -1839,5 +2554,8 @@ export {
  clearProjectDirectoryCache,
  getCodexSessions,
  getCodexSessionMessages,
-  deleteCodexSession
+  deleteCodexSession,
+  getGeminiCliSessions,
+  getGeminiCliSessionMessages,
+  searchConversations
 };
--- a/server/routes/cli-auth.js
+++ b/server/routes/cli-auth.js
@@ -14,13 +14,14 @@ router.get('/claude/status', async (req, res) => {
      return res.json({
        authenticated: true,
        email: credentialsResult.email || 'Authenticated',
-        method: 'credentials_file'
+        method: credentialsResult.method  // 'api_key' or 'credentials_file'
      });
    }

    return res.json({
      authenticated: false,
      email: null,
+      method: null,
      error: credentialsResult.error || 'Not authenticated'
    });

@@ -29,6 +30,7 @@ router.get('/claude/status', async (req, res) => {
    res.status(500).json({
      authenticated: false,
      email: null,
+      method: null,
      error: error.message
    });
  }
@@ -115,6 +117,20 @@ router.get('/gemini/status', async (req, res) => {
 *   - method: 'api_key' for env var, 'credentials_file' for OAuth tokens
 */
 async function checkClaudeCredentials() {
+  // Priority 1: Check for ANTHROPIC_API_KEY environment variable
+  // The SDK checks this first and uses it if present, even if OAuth tokens exist.
+  // When set, API calls are charged via pay-as-you-go rates instead of subscription.
+  if (process.env.ANTHROPIC_API_KEY && process.env.ANTHROPIC_API_KEY.trim()) {
+    return {
+      authenticated: true,
+      email: 'API Key Auth',
+      method: 'api_key'
+    };
+  }
+
+  // Priority 2: Check ~/.claude/.credentials.json for OAuth tokens
+  // This is the standard authentication method used by Claude CLI after running
+  // 'claude /login' or 'claude setup-token' commands.
  try {
    const credPath = path.join(os.homedir(), '.claude', '.credentials.json');
    const content = await fs.readFile(credPath, 'utf8');
@@ -127,19 +143,22 @@ async function checkClaudeCredentials() {
      if (!isExpired) {
        return {
          authenticated: true,
-          email: creds.email || creds.user || null
+          email: creds.email || creds.user || null,
+          method: 'credentials_file'
        };
      }
    }

    return {
      authenticated: false,
-      email: null
+      email: null,
+      method: null
    };
  } catch (error) {
    return {
      authenticated: false,
-      email: null
+      email: null,
+      method: null
    };
  }
 }
--- a/server/routes/codex.js
+++ b/server/routes/codex.js
@@ -5,6 +5,7 @@ import path from 'path';
 import os from 'os';
 import TOML from '@iarna/toml';
 import { getCodexSessions, getCodexSessionMessages, deleteCodexSession } from '../projects.js';
+import { applyCustomSessionNames, sessionNamesDb } from '../database/db.js';

 const router = express.Router();

@@ -59,6 +60,7 @@ router.get('/sessions', async (req, res) => {
    }

    const sessions = await getCodexSessions(projectPath);
+    applyCustomSessionNames(sessions, 'codex');
    res.json({ success: true, sessions });
  } catch (error) {
    console.error('Error fetching Codex sessions:', error);
@@ -88,6 +90,7 @@ router.delete('/sessions/:sessionId', async (req, res) => {
  try {
    const { sessionId } = req.params;
    await deleteCodexSession(sessionId);
+    sessionNamesDb.deleteName(sessionId, 'codex');
    res.json({ success: true });
  } catch (error) {
    console.error(`Error deleting Codex session ${req.params.sessionId}:`, error);
--- a/server/routes/commands.js
+++ b/server/routes/commands.js
@@ -3,8 +3,8 @@ import { promises as fs } from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import os from 'os';
-import matter from 'gray-matter';
 import { CLAUDE_MODELS, CURSOR_MODELS, CODEX_MODELS } from '../../shared/modelConstants.js';
+import { parseFrontmatter } from '../utils/frontmatter.js';

 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -38,7 +38,7 @@ async function scanCommandsDirectory(dir, baseDir, namespace) {
        // Parse markdown file for metadata
        try {
          const content = await fs.readFile(fullPath, 'utf8');
-          const { data: frontmatter, content: commandContent } = matter(content);
+          const { data: frontmatter, content: commandContent } = parseFrontmatter(content);

          // Calculate relative path from baseDir for command name
          const relativePath = path.relative(baseDir, fullPath);
@@ -475,7 +475,7 @@ router.post('/load', async (req, res) => {

    // Read and parse the command file
    const content = await fs.readFile(commandPath, 'utf8');
-    const { data: metadata, content: commandContent } = matter(content);
+    const { data: metadata, content: commandContent } = parseFrontmatter(content);

    res.json({
      path: commandPath,
@@ -560,7 +560,7 @@ router.post('/execute', async (req, res) => {
      }
    }
    const content = await fs.readFile(commandPath, 'utf8');
-    const { data: metadata, content: commandContent } = matter(content);
+    const { data: metadata, content: commandContent } = parseFrontmatter(content);
    // Basic argument replacement (will be enhanced in command parser utility)
    let processedContent = commandContent;

--- a/server/routes/cursor.js
+++ b/server/routes/cursor.js
@@ -7,6 +7,7 @@ import sqlite3 from 'sqlite3';
 import { open } from 'sqlite';
 import crypto from 'crypto';
 import { CURSOR_MODELS } from '../../shared/modelConstants.js';
+import { applyCustomSessionNames } from '../database/db.js';

 const router = express.Router();

@@ -560,8 +561,10 @@ router.get('/sessions', async (req, res) => {
      return new Date(b.createdAt) - new Date(a.createdAt);
    });
    
-    res.json({ 
-      success: true, 
+    applyCustomSessionNames(sessions, 'cursor');
+
+    res.json({
+      success: true,
      sessions: sessions,
      cwdId: cwdId,
      path: cursorChatsPath
--- a/server/routes/gemini.js
+++ b/server/routes/gemini.js
@@ -1,5 +1,7 @@
 import express from 'express';
 import sessionManager from '../sessionManager.js';
+import { sessionNamesDb } from '../database/db.js';
+import { getGeminiCliSessionMessages } from '../projects.js';

 const router = express.Router();

@@ -11,7 +13,12 @@ router.get('/sessions/:sessionId/messages', async (req, res) => {
            return res.status(400).json({ success: false, error: 'Invalid session ID format' });
        }

-        const messages = sessionManager.getSessionMessages(sessionId);
+        let messages = sessionManager.getSessionMessages(sessionId);
+
+        // Fallback to Gemini CLI sessions on disk
+        if (messages.length === 0) {
+            messages = await getGeminiCliSessionMessages(sessionId);
+        }

        res.json({
            success: true,
@@ -36,6 +43,7 @@ router.delete('/sessions/:sessionId', async (req, res) => {
        }

        await sessionManager.deleteSession(sessionId);
+        sessionNamesDb.deleteName(sessionId, 'gemini');
        res.json({ success: true });
    } catch (error) {
        console.error(`Error deleting Gemini session ${req.params.sessionId}:`, error);
--- a/server/routes/git.js
+++ b/server/routes/git.js
@@ -1,6 +1,5 @@
 import express from 'express';
-import { exec, spawn } from 'child_process';
-import { promisify } from 'util';
+import { spawn } from 'child_process';
 import path from 'path';
 import { promises as fs } from 'fs';
 import { extractProjectDirectory } from '../projects.js';
@@ -8,7 +7,7 @@ import { queryClaudeSDK } from '../claude-sdk.js';
 import { spawnCursor } from '../cursor-cli.js';

 const router = express.Router();
-const execAsync = promisify(exec);
+const COMMIT_DIFF_CHARACTER_LIMIT = 500_000;

 function spawnAsync(command, args, options = {}) {
  return new Promise((resolve, reject) => {
@@ -47,15 +46,71 @@ function spawnAsync(command, args, options = {}) {
  });
 }

+// Input validation helpers (defense-in-depth)
+function validateCommitRef(commit) {
+  // Allow hex hashes, HEAD, HEAD~N, HEAD^N, tag names, branch names
+  if (!/^[a-zA-Z0-9._~^{}@\/-]+$/.test(commit)) {
+    throw new Error('Invalid commit reference');
+  }
+  return commit;
+}
+
+function validateBranchName(branch) {
+  if (!/^[a-zA-Z0-9._\/-]+$/.test(branch)) {
+    throw new Error('Invalid branch name');
+  }
+  return branch;
+}
+
+function validateFilePath(file, projectPath) {
+  if (!file || file.includes('\0')) {
+    throw new Error('Invalid file path');
+  }
+  // Prevent path traversal: resolve the file relative to the project root
+  // and ensure the result stays within the project directory
+  if (projectPath) {
+    const resolved = path.resolve(projectPath, file);
+    const normalizedRoot = path.resolve(projectPath) + path.sep;
+    if (!resolved.startsWith(normalizedRoot) && resolved !== path.resolve(projectPath)) {
+      throw new Error('Invalid file path: path traversal detected');
+    }
+  }
+  return file;
+}
+
+function validateRemoteName(remote) {
+  if (!/^[a-zA-Z0-9._-]+$/.test(remote)) {
+    throw new Error('Invalid remote name');
+  }
+  return remote;
+}
+
+function validateProjectPath(projectPath) {
+  if (!projectPath || projectPath.includes('\0')) {
+    throw new Error('Invalid project path');
+  }
+  const resolved = path.resolve(projectPath);
+  // Must be an absolute path after resolution
+  if (!path.isAbsolute(resolved)) {
+    throw new Error('Invalid project path: must be absolute');
+  }
+  // Block obviously dangerous paths
+  if (resolved === '/' || resolved === path.sep) {
+    throw new Error('Invalid project path: root directory not allowed');
+  }
+  return resolved;
+}
+
 // Helper function to get the actual project path from the encoded project name
 async function getActualProjectPath(projectName) {
+  let projectPath;
  try {
-    return await extractProjectDirectory(projectName);
+    projectPath = await extractProjectDirectory(projectName);
  } catch (error) {
    console.error(`Error extracting project directory for ${projectName}:`, error);
-    // Fallback to the old method
-    return projectName.replace(/-/g, '/');
+    throw new Error(`Unable to resolve project path for "${projectName}"`);
  }
+  return validateProjectPath(projectPath);
 }

 // Helper function to strip git diff headers
@@ -98,19 +153,140 @@ async function validateGitRepository(projectPath) {

  try {
    // Allow any directory that is inside a work tree (repo root or nested folder).
-    const { stdout: insideWorkTreeOutput } = await execAsync('git rev-parse --is-inside-work-tree', { cwd: projectPath });
+    const { stdout: insideWorkTreeOutput } = await spawnAsync('git', ['rev-parse', '--is-inside-work-tree'], { cwd: projectPath });
    const isInsideWorkTree = insideWorkTreeOutput.trim() === 'true';
    if (!isInsideWorkTree) {
      throw new Error('Not inside a git work tree');
    }

    // Ensure git can resolve the repository root for this directory.
-    await execAsync('git rev-parse --show-toplevel', { cwd: projectPath });
+    await spawnAsync('git', ['rev-parse', '--show-toplevel'], { cwd: projectPath });
  } catch {
    throw new Error('Not a git repository. This directory does not contain a .git folder. Initialize a git repository with "git init" to use source control features.');
  }
 }

+function getGitErrorDetails(error) {
+  return `${error?.message || ''} ${error?.stderr || ''} ${error?.stdout || ''}`;
+}
+
+function isMissingHeadRevisionError(error) {
+  const errorDetails = getGitErrorDetails(error).toLowerCase();
+  return errorDetails.includes('unknown revision')
+    || errorDetails.includes('ambiguous argument')
+    || errorDetails.includes('needed a single revision')
+    || errorDetails.includes('bad revision');
+}
+
+async function getCurrentBranchName(projectPath) {
+  try {
+    // symbolic-ref works even when the repository has no commits.
+    const { stdout } = await spawnAsync('git', ['symbolic-ref', '--short', 'HEAD'], { cwd: projectPath });
+    const branchName = stdout.trim();
+    if (branchName) {
+      return branchName;
+    }
+  } catch (error) {
+    // Fall back to rev-parse for detached HEAD and older git edge cases.
+  }
+
+  const { stdout } = await spawnAsync('git', ['rev-parse', '--abbrev-ref', 'HEAD'], { cwd: projectPath });
+  return stdout.trim();
+}
+
+async function repositoryHasCommits(projectPath) {
+  try {
+    await spawnAsync('git', ['rev-parse', '--verify', 'HEAD'], { cwd: projectPath });
+    return true;
+  } catch (error) {
+    if (isMissingHeadRevisionError(error)) {
+      return false;
+    }
+    throw error;
+  }
+}
+
+async function getRepositoryRootPath(projectPath) {
+  const { stdout } = await spawnAsync('git', ['rev-parse', '--show-toplevel'], { cwd: projectPath });
+  return stdout.trim();
+}
+
+function normalizeRepositoryRelativeFilePath(filePath) {
+  return String(filePath)
+    .replace(/\\/g, '/')
+    .replace(/^\.\/+/, '')
+    .replace(/^\/+/, '')
+    .trim();
+}
+
+function parseStatusFilePaths(statusOutput) {
+  return statusOutput
+    .split('\n')
+    .map((line) => line.trimEnd())
+    .filter((line) => line.trim())
+    .map((line) => {
+      const statusPath = line.substring(3);
+      const renamedFilePath = statusPath.split(' -> ')[1];
+      return normalizeRepositoryRelativeFilePath(renamedFilePath || statusPath);
+    })
+    .filter(Boolean);
+}
+
+function buildFilePathCandidates(projectPath, repositoryRootPath, filePath) {
+  const normalizedFilePath = normalizeRepositoryRelativeFilePath(filePath);
+  const projectRelativePath = normalizeRepositoryRelativeFilePath(path.relative(repositoryRootPath, projectPath));
+  const candidates = [normalizedFilePath];
+
+  if (
+    projectRelativePath
+    && projectRelativePath !== '.'
+    && !normalizedFilePath.startsWith(`${projectRelativePath}/`)
+  ) {
+    candidates.push(`${projectRelativePath}/${normalizedFilePath}`);
+  }
+
+  return Array.from(new Set(candidates.filter(Boolean)));
+}
+
+async function resolveRepositoryFilePath(projectPath, filePath) {
+  validateFilePath(filePath);
+
+  const repositoryRootPath = await getRepositoryRootPath(projectPath);
+  const candidateFilePaths = buildFilePathCandidates(projectPath, repositoryRootPath, filePath);
+
+  for (const candidateFilePath of candidateFilePaths) {
+    const { stdout } = await spawnAsync('git', ['status', '--porcelain', '--', candidateFilePath], { cwd: repositoryRootPath });
+    if (stdout.trim()) {
+      return {
+        repositoryRootPath,
+        repositoryRelativeFilePath: candidateFilePath,
+      };
+    }
+  }
+
+  // If the caller sent a bare filename (e.g. "hello.ts"), recover it from changed files.
+  const normalizedFilePath = normalizeRepositoryRelativeFilePath(filePath);
+  if (!normalizedFilePath.includes('/')) {
+    const { stdout: repositoryStatusOutput } = await spawnAsync('git', ['status', '--porcelain'], { cwd: repositoryRootPath });
+    const changedFilePaths = parseStatusFilePaths(repositoryStatusOutput);
+    const suffixMatches = changedFilePaths.filter(
+      (changedFilePath) => changedFilePath === normalizedFilePath || changedFilePath.endsWith(`/${normalizedFilePath}`),
+    );
+
+    if (suffixMatches.length === 1) {
+      return {
+        repositoryRootPath,
+        repositoryRelativeFilePath: suffixMatches[0],
+      };
+    }
+  }
+
+  return {
+    repositoryRootPath,
+    repositoryRelativeFilePath: candidateFilePaths[0],
+  };
+}
+
 // Get git status for a project
 router.get('/status', async (req, res) => {
  const { project } = req.query;
@@ -125,24 +301,11 @@ router.get('/status', async (req, res) => {
    // Validate git repository
    await validateGitRepository(projectPath);

-    // Get current branch - handle case where there are no commits yet
-    let branch = 'main';
-    let hasCommits = true;
-    try {
-      const { stdout: branchOutput } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
-      branch = branchOutput.trim();
-    } catch (error) {
-      // No HEAD exists - repository has no commits yet
-      if (error.message.includes('unknown revision') || error.message.includes('ambiguous argument')) {
-        hasCommits = false;
-        branch = 'main';
-      } else {
-        throw error;
-      }
-    }
+    const branch = await getCurrentBranchName(projectPath);
+    const hasCommits = await repositoryHasCommits(projectPath);

    // Get git status
-    const { stdout: statusOutput } = await execAsync('git status --porcelain', { cwd: projectPath });
+    const { stdout: statusOutput } = await spawnAsync('git', ['status', '--porcelain'], { cwd: projectPath });

    const modified = [];
    const added = [];
@@ -200,44 +363,65 @@ router.get('/diff', async (req, res) => {
    
    // Validate git repository
    await validateGitRepository(projectPath);
-    
+
+    const {
+      repositoryRootPath,
+      repositoryRelativeFilePath,
+    } = await resolveRepositoryFilePath(projectPath, file);
+
    // Check if file is untracked or deleted
-    const { stdout: statusOutput } = await execAsync(`git status --porcelain "${file}"`, { cwd: projectPath });
+    const { stdout: statusOutput } = await spawnAsync(
+      'git',
+      ['status', '--porcelain', '--', repositoryRelativeFilePath],
+      { cwd: repositoryRootPath },
+    );
    const isUntracked = statusOutput.startsWith('??');
    const isDeleted = statusOutput.trim().startsWith('D ') || statusOutput.trim().startsWith(' D');

    let diff;
    if (isUntracked) {
      // For untracked files, show the entire file content as additions
-      const filePath = path.join(projectPath, file);
+      const filePath = path.join(repositoryRootPath, repositoryRelativeFilePath);
      const stats = await fs.stat(filePath);

      if (stats.isDirectory()) {
        // For directories, show a simple message
-        diff = `Directory: ${file}\n(Cannot show diff for directories)`;
+        diff = `Directory: ${repositoryRelativeFilePath}\n(Cannot show diff for directories)`;
      } else {
        const fileContent = await fs.readFile(filePath, 'utf-8');
        const lines = fileContent.split('\n');
-        diff = `--- /dev/null\n+++ b/${file}\n@@ -0,0 +1,${lines.length} @@\n` +
+        diff = `--- /dev/null\n+++ b/${repositoryRelativeFilePath}\n@@ -0,0 +1,${lines.length} @@\n` +
               lines.map(line => `+${line}`).join('\n');
      }
    } else if (isDeleted) {
      // For deleted files, show the entire file content from HEAD as deletions
-      const { stdout: fileContent } = await execAsync(`git show HEAD:"${file}"`, { cwd: projectPath });
+      const { stdout: fileContent } = await spawnAsync(
+        'git',
+        ['show', `HEAD:${repositoryRelativeFilePath}`],
+        { cwd: repositoryRootPath },
+      );
      const lines = fileContent.split('\n');
-      diff = `--- a/${file}\n+++ /dev/null\n@@ -1,${lines.length} +0,0 @@\n` +
+      diff = `--- a/${repositoryRelativeFilePath}\n+++ /dev/null\n@@ -1,${lines.length} +0,0 @@\n` +
             lines.map(line => `-${line}`).join('\n');
    } else {
      // Get diff for tracked files
      // First check for unstaged changes (working tree vs index)
-      const { stdout: unstagedDiff } = await execAsync(`git diff -- "${file}"`, { cwd: projectPath });
+      const { stdout: unstagedDiff } = await spawnAsync(
+        'git',
+        ['diff', '--', repositoryRelativeFilePath],
+        { cwd: repositoryRootPath },
+      );

      if (unstagedDiff) {
        // Show unstaged changes if they exist
        diff = stripDiffHeaders(unstagedDiff);
      } else {
        // If no unstaged changes, check for staged changes (index vs HEAD)
-        const { stdout: stagedDiff } = await execAsync(`git diff --cached -- "${file}"`, { cwd: projectPath });
+        const { stdout: stagedDiff } = await spawnAsync(
+          'git',
+          ['diff', '--cached', '--', repositoryRelativeFilePath],
+          { cwd: repositoryRootPath },
+        );
        diff = stripDiffHeaders(stagedDiff) || '';
      }
    }
@@ -263,8 +447,17 @@ router.get('/file-with-diff', async (req, res) => {
    // Validate git repository
    await validateGitRepository(projectPath);

+    const {
+      repositoryRootPath,
+      repositoryRelativeFilePath,
+    } = await resolveRepositoryFilePath(projectPath, file);
+
    // Check file status
-    const { stdout: statusOutput } = await execAsync(`git status --porcelain "${file}"`, { cwd: projectPath });
+    const { stdout: statusOutput } = await spawnAsync(
+      'git',
+      ['status', '--porcelain', '--', repositoryRelativeFilePath],
+      { cwd: repositoryRootPath },
+    );
    const isUntracked = statusOutput.startsWith('??');
    const isDeleted = statusOutput.trim().startsWith('D ') || statusOutput.trim().startsWith(' D');

@@ -273,12 +466,16 @@ router.get('/file-with-diff', async (req, res) => {

    if (isDeleted) {
      // For deleted files, get content from HEAD
-      const { stdout: headContent } = await execAsync(`git show HEAD:"${file}"`, { cwd: projectPath });
+      const { stdout: headContent } = await spawnAsync(
+        'git',
+        ['show', `HEAD:${repositoryRelativeFilePath}`],
+        { cwd: repositoryRootPath },
+      );
      oldContent = headContent;
      currentContent = headContent; // Show the deleted content in editor
    } else {
      // Get current file content
-      const filePath = path.join(projectPath, file);
+      const filePath = path.join(repositoryRootPath, repositoryRelativeFilePath);
      const stats = await fs.stat(filePath);

      if (stats.isDirectory()) {
@@ -291,7 +488,11 @@ router.get('/file-with-diff', async (req, res) => {
      if (!isUntracked) {
        // Get the old content from HEAD for tracked files
        try {
-          const { stdout: headContent } = await execAsync(`git show HEAD:"${file}"`, { cwd: projectPath });
+          const { stdout: headContent } = await spawnAsync(
+            'git',
+            ['show', `HEAD:${repositoryRelativeFilePath}`],
+            { cwd: repositoryRootPath },
+          );
          oldContent = headContent;
        } catch (error) {
          // File might be newly added to git (staged but not committed)
@@ -328,17 +529,17 @@ router.post('/initial-commit', async (req, res) => {

    // Check if there are already commits
    try {
-      await execAsync('git rev-parse HEAD', { cwd: projectPath });
+      await spawnAsync('git', ['rev-parse', 'HEAD'], { cwd: projectPath });
      return res.status(400).json({ error: 'Repository already has commits. Use regular commit instead.' });
    } catch (error) {
      // No HEAD - this is good, we can create initial commit
    }

    // Add all files
-    await execAsync('git add .', { cwd: projectPath });
+    await spawnAsync('git', ['add', '.'], { cwd: projectPath });

    // Create initial commit
-    const { stdout } = await execAsync('git commit -m "Initial commit"', { cwd: projectPath });
+    const { stdout } = await spawnAsync('git', ['commit', '-m', 'Initial commit'], { cwd: projectPath });

    res.json({ success: true, output: stdout, message: 'Initial commit created successfully' });
  } catch (error) {
@@ -369,14 +570,16 @@ router.post('/commit', async (req, res) => {
    
    // Validate git repository
    await validateGitRepository(projectPath);
+    const repositoryRootPath = await getRepositoryRootPath(projectPath);
    
    // Stage selected files
    for (const file of files) {
-      await execAsync(`git add "${file}"`, { cwd: projectPath });
+      const { repositoryRelativeFilePath } = await resolveRepositoryFilePath(projectPath, file);
+      await spawnAsync('git', ['add', '--', repositoryRelativeFilePath], { cwd: repositoryRootPath });
    }
-    
+
    // Commit with message
-    const { stdout } = await execAsync(`git commit -m "${message.replace(/"/g, '\\"')}"`, { cwd: projectPath });
+    const { stdout } = await spawnAsync('git', ['commit', '-m', message], { cwd: repositoryRootPath });
    
    res.json({ success: true, output: stdout });
  } catch (error) {
@@ -385,6 +588,53 @@ router.post('/commit', async (req, res) => {
  }
 });

+// Revert latest local commit (keeps changes staged)
+router.post('/revert-local-commit', async (req, res) => {
+  const { project } = req.body;
+
+  if (!project) {
+    return res.status(400).json({ error: 'Project name is required' });
+  }
+
+  try {
+    const projectPath = await getActualProjectPath(project);
+    await validateGitRepository(projectPath);
+
+    try {
+      await spawnAsync('git', ['rev-parse', '--verify', 'HEAD'], { cwd: projectPath });
+    } catch (error) {
+      return res.status(400).json({
+        error: 'No local commit to revert',
+        details: 'This repository has no commit yet.',
+      });
+    }
+
+    try {
+      // Soft reset rewinds one commit while preserving all file changes in the index.
+      await spawnAsync('git', ['reset', '--soft', 'HEAD~1'], { cwd: projectPath });
+    } catch (error) {
+      const errorDetails = `${error.stderr || ''} ${error.message || ''}`;
+      const isInitialCommit = errorDetails.includes('HEAD~1') &&
+        (errorDetails.includes('unknown revision') || errorDetails.includes('ambiguous argument'));
+
+      if (!isInitialCommit) {
+        throw error;
+      }
+
+      // Initial commit has no parent; deleting HEAD uncommits it and keeps files staged.
+      await spawnAsync('git', ['update-ref', '-d', 'HEAD'], { cwd: projectPath });
+    }
+
+    res.json({
+      success: true,
+      output: 'Latest local commit reverted successfully. Changes were kept staged.',
+    });
+  } catch (error) {
+    console.error('Git revert local commit error:', error);
+    res.status(500).json({ error: error.message });
+  }
+});
+
 // Get list of branches
 router.get('/branches', async (req, res) => {
  const { project } = req.query;
@@ -400,7 +650,7 @@ router.get('/branches', async (req, res) => {
    await validateGitRepository(projectPath);
    
    // Get all branches
-    const { stdout } = await execAsync('git branch -a', { cwd: projectPath });
+    const { stdout } = await spawnAsync('git', ['branch', '-a'], { cwd: projectPath });
    
    // Parse branches
    const branches = stdout
@@ -439,7 +689,8 @@ router.post('/checkout', async (req, res) => {
    const projectPath = await getActualProjectPath(project);
    
    // Checkout the branch
-    const { stdout } = await execAsync(`git checkout "${branch}"`, { cwd: projectPath });
+    validateBranchName(branch);
+    const { stdout } = await spawnAsync('git', ['checkout', branch], { cwd: projectPath });
    
    res.json({ success: true, output: stdout });
  } catch (error) {
@@ -460,7 +711,8 @@ router.post('/create-branch', async (req, res) => {
    const projectPath = await getActualProjectPath(project);
    
    // Create and checkout new branch
-    const { stdout } = await execAsync(`git checkout -b "${branch}"`, { cwd: projectPath });
+    validateBranchName(branch);
+    const { stdout } = await spawnAsync('git', ['checkout', '-b', branch], { cwd: projectPath });
    
    res.json({ success: true, output: stdout });
  } catch (error) {
@@ -509,8 +761,8 @@ router.get('/commits', async (req, res) => {
    // Get stats for each commit
    for (const commit of commits) {
      try {
-        const { stdout: stats } = await execAsync(
-          `git show --stat --format='' ${commit.hash}`,
+        const { stdout: stats } = await spawnAsync(
+          'git', ['show', '--stat', '--format=', commit.hash],
          { cwd: projectPath }
        );
        commit.stats = stats.trim().split('\n').pop(); // Get the summary line
@@ -536,14 +788,22 @@ router.get('/commit-diff', async (req, res) => {

  try {
    const projectPath = await getActualProjectPath(project);
-    
+
+    // Validate commit reference (defense-in-depth)
+    validateCommitRef(commit);
+
    // Get diff for the commit
-    const { stdout } = await execAsync(
-      `git show ${commit}`,
+    const { stdout } = await spawnAsync(
+      'git', ['show', commit],
      { cwd: projectPath }
    );
-    
-    res.json({ diff: stdout });
+
+    const isTruncated = stdout.length > COMMIT_DIFF_CHARACTER_LIMIT;
+    const diff = isTruncated
+      ? `${stdout.slice(0, COMMIT_DIFF_CHARACTER_LIMIT)}\n\n... Diff truncated to keep the UI responsive ...`
+      : stdout;
+
+    res.json({ diff, isTruncated });
  } catch (error) {
    console.error('Git commit diff error:', error);
    res.json({ error: error.message });
@@ -565,17 +825,20 @@ router.post('/generate-commit-message', async (req, res) => {

  try {
    const projectPath = await getActualProjectPath(project);
+    await validateGitRepository(projectPath);
+    const repositoryRootPath = await getRepositoryRootPath(projectPath);

    // Get diff for selected files
    let diffContext = '';
    for (const file of files) {
      try {
-        const { stdout } = await execAsync(
-          `git diff HEAD -- "${file}"`,
-          { cwd: projectPath }
+        const { repositoryRelativeFilePath } = await resolveRepositoryFilePath(projectPath, file);
+        const { stdout } = await spawnAsync(
+          'git', ['diff', 'HEAD', '--', repositoryRelativeFilePath],
+          { cwd: repositoryRootPath }
        );
        if (stdout) {
-          diffContext += `\n--- ${file} ---\n${stdout}`;
+          diffContext += `\n--- ${repositoryRelativeFilePath} ---\n${stdout}`;
        }
      } catch (error) {
        console.error(`Error getting diff for ${file}:`, error);
@@ -587,14 +850,15 @@ router.post('/generate-commit-message', async (req, res) => {
      // Try to get content of untracked files
      for (const file of files) {
        try {
-          const filePath = path.join(projectPath, file);
+          const { repositoryRelativeFilePath } = await resolveRepositoryFilePath(projectPath, file);
+          const filePath = path.join(repositoryRootPath, repositoryRelativeFilePath);
          const stats = await fs.stat(filePath);

          if (!stats.isDirectory()) {
            const content = await fs.readFile(filePath, 'utf-8');
-            diffContext += `\n--- ${file} (new file) ---\n${content.substring(0, 1000)}\n`;
+            diffContext += `\n--- ${repositoryRelativeFilePath} (new file) ---\n${content.substring(0, 1000)}\n`;
          } else {
-            diffContext += `\n--- ${file} (new directory) ---\n`;
+            diffContext += `\n--- ${repositoryRelativeFilePath} (new directory) ---\n`;
          }
        } catch (error) {
          console.error(`Error reading file ${file}:`, error);
@@ -763,44 +1027,51 @@ router.get('/remote-status', async (req, res) => {
    const projectPath = await getActualProjectPath(project);
    await validateGitRepository(projectPath);

-    // Get current branch
-    const { stdout: currentBranch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
-    const branch = currentBranch.trim();
+    const branch = await getCurrentBranchName(projectPath);
+    const hasCommits = await repositoryHasCommits(projectPath);
+
+    const { stdout: remoteOutput } = await spawnAsync('git', ['remote'], { cwd: projectPath });
+    const remotes = remoteOutput.trim().split('\n').filter(r => r.trim());
+    const hasRemote = remotes.length > 0;
+    const fallbackRemoteName = hasRemote
+      ? (remotes.includes('origin') ? 'origin' : remotes[0])
+      : null;
+
+    // Repositories initialized with `git init` can have a branch but no commits.
+    // Return a non-error state so the UI can show the initial-commit workflow.
+    if (!hasCommits) {
+      return res.json({
+        hasRemote,
+        hasUpstream: false,
+        branch,
+        remoteName: fallbackRemoteName,
+        ahead: 0,
+        behind: 0,
+        isUpToDate: false,
+        message: 'Repository has no commits yet'
+      });
+    }

    // Check if there's a remote tracking branch (smart detection)
    let trackingBranch;
    let remoteName;
    try {
-      const { stdout } = await execAsync(`git rev-parse --abbrev-ref ${branch}@{upstream}`, { cwd: projectPath });
+      const { stdout } = await spawnAsync('git', ['rev-parse', '--abbrev-ref', `${branch}@{upstream}`], { cwd: projectPath });
      trackingBranch = stdout.trim();
      remoteName = trackingBranch.split('/')[0]; // Extract remote name (e.g., "origin/main" -> "origin")
    } catch (error) {
-      // No upstream branch configured - but check if we have remotes
-      let hasRemote = false;
-      let remoteName = null;
-      try {
-        const { stdout } = await execAsync('git remote', { cwd: projectPath });
-        const remotes = stdout.trim().split('\n').filter(r => r.trim());
-        if (remotes.length > 0) {
-          hasRemote = true;
-          remoteName = remotes.includes('origin') ? 'origin' : remotes[0];
-        }
-      } catch (remoteError) {
-        // No remotes configured
-      }
-      
-      return res.json({ 
+      return res.json({
        hasRemote,
        hasUpstream: false,
        branch,
-        remoteName,
+        remoteName: fallbackRemoteName,
        message: 'No remote tracking branch configured'
      });
    }

    // Get ahead/behind counts
-    const { stdout: countOutput } = await execAsync(
-      `git rev-list --count --left-right ${trackingBranch}...HEAD`,
+    const { stdout: countOutput } = await spawnAsync(
+      'git', ['rev-list', '--count', '--left-right', `${trackingBranch}...HEAD`],
      { cwd: projectPath }
    );
    
@@ -835,20 +1106,20 @@ router.post('/fetch', async (req, res) => {
    await validateGitRepository(projectPath);

    // Get current branch and its upstream remote
-    const { stdout: currentBranch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
-    const branch = currentBranch.trim();
+    const branch = await getCurrentBranchName(projectPath);

    let remoteName = 'origin'; // fallback
    try {
-      const { stdout } = await execAsync(`git rev-parse --abbrev-ref ${branch}@{upstream}`, { cwd: projectPath });
+      const { stdout } = await spawnAsync('git', ['rev-parse', '--abbrev-ref', `${branch}@{upstream}`], { cwd: projectPath });
      remoteName = stdout.trim().split('/')[0]; // Extract remote name
    } catch (error) {
      // No upstream, try to fetch from origin anyway
      console.log('No upstream configured, using origin as fallback');
    }

-    const { stdout } = await execAsync(`git fetch ${remoteName}`, { cwd: projectPath });
-    
+    validateRemoteName(remoteName);
+    const { stdout } = await spawnAsync('git', ['fetch', remoteName], { cwd: projectPath });
+
    res.json({ success: true, output: stdout || 'Fetch completed successfully', remoteName });
  } catch (error) {
    console.error('Git fetch error:', error);
@@ -876,13 +1147,12 @@ router.post('/pull', async (req, res) => {
    await validateGitRepository(projectPath);

    // Get current branch and its upstream remote
-    const { stdout: currentBranch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
-    const branch = currentBranch.trim();
+    const branch = await getCurrentBranchName(projectPath);

    let remoteName = 'origin'; // fallback
    let remoteBranch = branch; // fallback
    try {
-      const { stdout } = await execAsync(`git rev-parse --abbrev-ref ${branch}@{upstream}`, { cwd: projectPath });
+      const { stdout } = await spawnAsync('git', ['rev-parse', '--abbrev-ref', `${branch}@{upstream}`], { cwd: projectPath });
      const tracking = stdout.trim();
      remoteName = tracking.split('/')[0]; // Extract remote name
      remoteBranch = tracking.split('/').slice(1).join('/'); // Extract branch name
@@ -891,17 +1161,19 @@ router.post('/pull', async (req, res) => {
      console.log('No upstream configured, using origin/branch as fallback');
    }

-    const { stdout } = await execAsync(`git pull ${remoteName} ${remoteBranch}`, { cwd: projectPath });
-    
-    res.json({ 
-      success: true, 
-      output: stdout || 'Pull completed successfully', 
+    validateRemoteName(remoteName);
+    validateBranchName(remoteBranch);
+    const { stdout } = await spawnAsync('git', ['pull', remoteName, remoteBranch], { cwd: projectPath });
+
+    res.json({
+      success: true,
+      output: stdout || 'Pull completed successfully',
      remoteName,
      remoteBranch
    });
  } catch (error) {
    console.error('Git pull error:', error);
-    
+
    // Enhanced error handling for common pull scenarios
    let errorMessage = 'Pull failed';
    let details = error.message;
@@ -943,13 +1215,12 @@ router.post('/push', async (req, res) => {
    await validateGitRepository(projectPath);

    // Get current branch and its upstream remote
-    const { stdout: currentBranch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
-    const branch = currentBranch.trim();
+    const branch = await getCurrentBranchName(projectPath);

    let remoteName = 'origin'; // fallback
    let remoteBranch = branch; // fallback
    try {
-      const { stdout } = await execAsync(`git rev-parse --abbrev-ref ${branch}@{upstream}`, { cwd: projectPath });
+      const { stdout } = await spawnAsync('git', ['rev-parse', '--abbrev-ref', `${branch}@{upstream}`], { cwd: projectPath });
      const tracking = stdout.trim();
      remoteName = tracking.split('/')[0]; // Extract remote name
      remoteBranch = tracking.split('/').slice(1).join('/'); // Extract branch name
@@ -958,11 +1229,13 @@ router.post('/push', async (req, res) => {
      console.log('No upstream configured, using origin/branch as fallback');
    }

-    const { stdout } = await execAsync(`git push ${remoteName} ${remoteBranch}`, { cwd: projectPath });
-    
-    res.json({ 
-      success: true, 
-      output: stdout || 'Push completed successfully', 
+    validateRemoteName(remoteName);
+    validateBranchName(remoteBranch);
+    const { stdout } = await spawnAsync('git', ['push', remoteName, remoteBranch], { cwd: projectPath });
+
+    res.json({
+      success: true,
+      output: stdout || 'Push completed successfully',
      remoteName,
      remoteBranch
    });
@@ -1012,35 +1285,38 @@ router.post('/publish', async (req, res) => {
    const projectPath = await getActualProjectPath(project);
    await validateGitRepository(projectPath);

+    // Validate branch name
+    validateBranchName(branch);
+
    // Get current branch to verify it matches the requested branch
-    const { stdout: currentBranch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
-    const currentBranchName = currentBranch.trim();
-    
+    const currentBranchName = await getCurrentBranchName(projectPath);
+
    if (currentBranchName !== branch) {
-      return res.status(400).json({ 
-        error: `Branch mismatch. Current branch is ${currentBranchName}, but trying to publish ${branch}` 
+      return res.status(400).json({
+        error: `Branch mismatch. Current branch is ${currentBranchName}, but trying to publish ${branch}`
      });
    }

    // Check if remote exists
    let remoteName = 'origin';
    try {
-      const { stdout } = await execAsync('git remote', { cwd: projectPath });
+      const { stdout } = await spawnAsync('git', ['remote'], { cwd: projectPath });
      const remotes = stdout.trim().split('\n').filter(r => r.trim());
      if (remotes.length === 0) {
-        return res.status(400).json({ 
-          error: 'No remote repository configured. Add a remote with: git remote add origin <url>' 
+        return res.status(400).json({
+          error: 'No remote repository configured. Add a remote with: git remote add origin <url>'
        });
      }
      remoteName = remotes.includes('origin') ? 'origin' : remotes[0];
    } catch (error) {
-      return res.status(400).json({ 
-        error: 'No remote repository configured. Add a remote with: git remote add origin <url>' 
+      return res.status(400).json({
+        error: 'No remote repository configured. Add a remote with: git remote add origin <url>'
      });
    }

    // Publish the branch (set upstream and push)
-    const { stdout } = await execAsync(`git push --set-upstream ${remoteName} ${branch}`, { cwd: projectPath });
+    validateRemoteName(remoteName);
+    const { stdout } = await spawnAsync('git', ['push', '--set-upstream', remoteName, branch], { cwd: projectPath });
    
    res.json({ 
      success: true, 
@@ -1087,10 +1363,18 @@ router.post('/discard', async (req, res) => {
  try {
    const projectPath = await getActualProjectPath(project);
    await validateGitRepository(projectPath);
+    const {
+      repositoryRootPath,
+      repositoryRelativeFilePath,
+    } = await resolveRepositoryFilePath(projectPath, file);

    // Check file status to determine correct discard command
-    const { stdout: statusOutput } = await execAsync(`git status --porcelain "${file}"`, { cwd: projectPath });
-    
+    const { stdout: statusOutput } = await spawnAsync(
+      'git',
+      ['status', '--porcelain', '--', repositoryRelativeFilePath],
+      { cwd: repositoryRootPath },
+    );
+
    if (!statusOutput.trim()) {
      return res.status(400).json({ error: 'No changes to discard for this file' });
    }
@@ -1099,7 +1383,7 @@ router.post('/discard', async (req, res) => {

    if (status === '??') {
      // Untracked file or directory - delete it
-      const filePath = path.join(projectPath, file);
+      const filePath = path.join(repositoryRootPath, repositoryRelativeFilePath);
      const stats = await fs.stat(filePath);

      if (stats.isDirectory()) {
@@ -1109,13 +1393,13 @@ router.post('/discard', async (req, res) => {
      }
    } else if (status.includes('M') || status.includes('D')) {
      // Modified or deleted file - restore from HEAD
-      await execAsync(`git restore "${file}"`, { cwd: projectPath });
+      await spawnAsync('git', ['restore', '--', repositoryRelativeFilePath], { cwd: repositoryRootPath });
    } else if (status.includes('A')) {
      // Added file - unstage it
-      await execAsync(`git reset HEAD "${file}"`, { cwd: projectPath });
+      await spawnAsync('git', ['reset', 'HEAD', '--', repositoryRelativeFilePath], { cwd: repositoryRootPath });
    }
    
-    res.json({ success: true, message: `Changes discarded for ${file}` });
+    res.json({ success: true, message: `Changes discarded for ${repositoryRelativeFilePath}` });
  } catch (error) {
    console.error('Git discard error:', error);
    res.status(500).json({ error: error.message });
@@ -1133,9 +1417,17 @@ router.post('/delete-untracked', async (req, res) => {
  try {
    const projectPath = await getActualProjectPath(project);
    await validateGitRepository(projectPath);
+    const {
+      repositoryRootPath,
+      repositoryRelativeFilePath,
+    } = await resolveRepositoryFilePath(projectPath, file);

    // Check if file is actually untracked
-    const { stdout: statusOutput } = await execAsync(`git status --porcelain "${file}"`, { cwd: projectPath });
+    const { stdout: statusOutput } = await spawnAsync(
+      'git',
+      ['status', '--porcelain', '--', repositoryRelativeFilePath],
+      { cwd: repositoryRootPath },
+    );
    
    if (!statusOutput.trim()) {
      return res.status(400).json({ error: 'File is not untracked or does not exist' });
@@ -1148,16 +1440,16 @@ router.post('/delete-untracked', async (req, res) => {
    }

    // Delete the untracked file or directory
-    const filePath = path.join(projectPath, file);
+    const filePath = path.join(repositoryRootPath, repositoryRelativeFilePath);
    const stats = await fs.stat(filePath);

    if (stats.isDirectory()) {
      // Use rm with recursive option for directories
      await fs.rm(filePath, { recursive: true, force: true });
-      res.json({ success: true, message: `Untracked directory ${file} deleted successfully` });
+      res.json({ success: true, message: `Untracked directory ${repositoryRelativeFilePath} deleted successfully` });
    } else {
      await fs.unlink(filePath);
-      res.json({ success: true, message: `Untracked file ${file} deleted successfully` });
+      res.json({ success: true, message: `Untracked file ${repositoryRelativeFilePath} deleted successfully` });
    }
  } catch (error) {
    console.error('Git delete untracked error:', error);
--- a/server/routes/plugins.js
+++ b/server/routes/plugins.js
@@ -0,0 +1,303 @@
+import express from 'express';
+import path from 'path';
+import http from 'http';
+import mime from 'mime-types';
+import fs from 'fs';
+import {
+  scanPlugins,
+  getPluginsConfig,
+  getPluginsDir,
+  savePluginsConfig,
+  getPluginDir,
+  resolvePluginAssetPath,
+  installPluginFromGit,
+  updatePluginFromGit,
+  uninstallPlugin,
+} from '../utils/plugin-loader.js';
+import {
+  startPluginServer,
+  stopPluginServer,
+  getPluginPort,
+  isPluginRunning,
+} from '../utils/plugin-process-manager.js';
+
+const router = express.Router();
+
+// GET / — List all installed plugins (includes server running status)
+router.get('/', (req, res) => {
+  try {
+    const plugins = scanPlugins().map(p => ({
+      ...p,
+      serverRunning: p.server ? isPluginRunning(p.name) : false,
+    }));
+    res.json({ plugins });
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to scan plugins', details: err.message });
+  }
+});
+
+// GET /:name/manifest — Get single plugin manifest
+router.get('/:name/manifest', (req, res) => {
+  try {
+    if (!/^[a-zA-Z0-9_-]+$/.test(req.params.name)) {
+      return res.status(400).json({ error: 'Invalid plugin name' });
+    }
+    const plugins = scanPlugins();
+    const plugin = plugins.find(p => p.name === req.params.name);
+    if (!plugin) {
+      return res.status(404).json({ error: 'Plugin not found' });
+    }
+    res.json(plugin);
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to read plugin manifest', details: err.message });
+  }
+});
+
+// GET /:name/assets/* — Serve plugin static files
+router.get('/:name/assets/*', (req, res) => {
+  const pluginName = req.params.name;
+  if (!/^[a-zA-Z0-9_-]+$/.test(pluginName)) {
+    return res.status(400).json({ error: 'Invalid plugin name' });
+  }
+  const assetPath = req.params[0];
+
+  if (!assetPath) {
+    return res.status(400).json({ error: 'No asset path specified' });
+  }
+
+  const resolvedPath = resolvePluginAssetPath(pluginName, assetPath);
+  if (!resolvedPath) {
+    return res.status(404).json({ error: 'Asset not found' });
+  }
+
+  try {
+    const stat = fs.statSync(resolvedPath);
+    if (!stat.isFile()) {
+      return res.status(404).json({ error: 'Asset not found' });
+    }
+  } catch {
+    return res.status(404).json({ error: 'Asset not found' });
+  }
+
+  const contentType = mime.lookup(resolvedPath) || 'application/octet-stream';
+  res.setHeader('Content-Type', contentType);
+  const stream = fs.createReadStream(resolvedPath);
+  stream.on('error', () => {
+    if (!res.headersSent) {
+      res.status(500).json({ error: 'Failed to read asset' });
+    } else {
+      res.end();
+    }
+  });
+  stream.pipe(res);
+});
+
+// PUT /:name/enable — Toggle plugin enabled/disabled (starts/stops server if applicable)
+router.put('/:name/enable', async (req, res) => {
+  try {
+    const { enabled } = req.body;
+    if (typeof enabled !== 'boolean') {
+      return res.status(400).json({ error: '"enabled" must be a boolean' });
+    }
+
+    const plugins = scanPlugins();
+    const plugin = plugins.find(p => p.name === req.params.name);
+    if (!plugin) {
+      return res.status(404).json({ error: 'Plugin not found' });
+    }
+
+    const config = getPluginsConfig();
+    config[req.params.name] = { ...config[req.params.name], enabled };
+    savePluginsConfig(config);
+
+    // Start or stop the plugin server as needed
+    if (plugin.server) {
+      if (enabled && !isPluginRunning(plugin.name)) {
+        const pluginDir = getPluginDir(plugin.name);
+        if (pluginDir) {
+          try {
+            await startPluginServer(plugin.name, pluginDir, plugin.server);
+          } catch (err) {
+            console.error(`[Plugins] Failed to start server for "${plugin.name}":`, err.message);
+          }
+        }
+      } else if (!enabled && isPluginRunning(plugin.name)) {
+        await stopPluginServer(plugin.name);
+      }
+    }
+
+    res.json({ success: true, name: req.params.name, enabled });
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to update plugin', details: err.message });
+  }
+});
+
+// POST /install — Install plugin from git URL
+router.post('/install', async (req, res) => {
+  try {
+    const { url } = req.body;
+    if (!url || typeof url !== 'string') {
+      return res.status(400).json({ error: '"url" is required and must be a string' });
+    }
+
+    // Basic URL validation
+    if (!url.startsWith('https://') && !url.startsWith('git@')) {
+      return res.status(400).json({ error: 'URL must start with https:// or git@' });
+    }
+
+    const manifest = await installPluginFromGit(url);
+
+    // Auto-start the server if the plugin has one (enabled by default)
+    if (manifest.server) {
+      const pluginDir = getPluginDir(manifest.name);
+      if (pluginDir) {
+        try {
+          await startPluginServer(manifest.name, pluginDir, manifest.server);
+        } catch (err) {
+          console.error(`[Plugins] Failed to start server for "${manifest.name}":`, err.message);
+        }
+      }
+    }
+
+    res.json({ success: true, plugin: manifest });
+  } catch (err) {
+    res.status(400).json({ error: 'Failed to install plugin', details: err.message });
+  }
+});
+
+// POST /:name/update — Pull latest from git (restarts server if running)
+router.post('/:name/update', async (req, res) => {
+  try {
+    const pluginName = req.params.name;
+
+    if (!/^[a-zA-Z0-9_-]+$/.test(pluginName)) {
+      return res.status(400).json({ error: 'Invalid plugin name' });
+    }
+
+    const wasRunning = isPluginRunning(pluginName);
+    if (wasRunning) {
+      await stopPluginServer(pluginName);
+    }
+
+    const manifest = await updatePluginFromGit(pluginName);
+
+    // Restart server if it was running before the update
+    if (wasRunning && manifest.server) {
+      const pluginDir = getPluginDir(pluginName);
+      if (pluginDir) {
+        try {
+          await startPluginServer(pluginName, pluginDir, manifest.server);
+        } catch (err) {
+          console.error(`[Plugins] Failed to restart server for "${pluginName}":`, err.message);
+        }
+      }
+    }
+
+    res.json({ success: true, plugin: manifest });
+  } catch (err) {
+    res.status(400).json({ error: 'Failed to update plugin', details: err.message });
+  }
+});
+
+// ALL /:name/rpc/* — Proxy requests to plugin's server subprocess
+router.all('/:name/rpc/*', async (req, res) => {
+  const pluginName = req.params.name;
+  const rpcPath = req.params[0] || '';
+
+  if (!/^[a-zA-Z0-9_-]+$/.test(pluginName)) {
+    return res.status(400).json({ error: 'Invalid plugin name' });
+  }
+
+  let port = getPluginPort(pluginName);
+  if (!port) {
+    // Lazily start the plugin server if it exists and is enabled
+    const plugins = scanPlugins();
+    const plugin = plugins.find(p => p.name === pluginName);
+    if (!plugin || !plugin.server) {
+      return res.status(503).json({ error: 'Plugin server is not running' });
+    }
+    if (!plugin.enabled) {
+      return res.status(503).json({ error: 'Plugin is disabled' });
+    }
+    const pluginDir = path.join(getPluginsDir(), plugin.dirName);
+    try {
+      port = await startPluginServer(pluginName, pluginDir, plugin.server);
+    } catch (err) {
+      return res.status(503).json({ error: 'Plugin server failed to start', details: err.message });
+    }
+  }
+
+  // Inject configured secrets as headers
+  const config = getPluginsConfig();
+  const pluginConfig = config[pluginName] || {};
+  const secrets = pluginConfig.secrets || {};
+
+  const headers = {
+    'content-type': req.headers['content-type'] || 'application/json',
+  };
+
+  // Add per-plugin secrets as X-Plugin-Secret-* headers
+  for (const [key, value] of Object.entries(secrets)) {
+    headers[`x-plugin-secret-${key.toLowerCase()}`] = String(value);
+  }
+
+  // Reconstruct query string
+  const qs = req.url.includes('?') ? '?' + req.url.split('?').slice(1).join('?') : '';
+
+  const options = {
+    hostname: '127.0.0.1',
+    port,
+    path: `/${rpcPath}${qs}`,
+    method: req.method,
+    headers,
+  };
+
+  const proxyReq = http.request(options, (proxyRes) => {
+    res.writeHead(proxyRes.statusCode, proxyRes.headers);
+    proxyRes.pipe(res);
+  });
+
+  proxyReq.on('error', (err) => {
+    if (!res.headersSent) {
+      res.status(502).json({ error: 'Plugin server error', details: err.message });
+    } else {
+      res.end();
+    }
+  });
+
+  // Forward body (already parsed by express JSON middleware, so re-stringify).
+  // Check content-length to detect whether a body was actually sent, since
+  // req.body can be falsy for valid payloads like 0, false, null, or {}.
+  const hasBody = req.headers['content-length'] && parseInt(req.headers['content-length'], 10) > 0;
+  if (hasBody && req.body !== undefined) {
+    const bodyStr = JSON.stringify(req.body);
+    proxyReq.setHeader('content-length', Buffer.byteLength(bodyStr));
+    proxyReq.write(bodyStr);
+  }
+
+  proxyReq.end();
+});
+
+// DELETE /:name — Uninstall plugin (stops server first)
+router.delete('/:name', async (req, res) => {
+  try {
+    const pluginName = req.params.name;
+
+    // Validate name format to prevent path traversal
+    if (!/^[a-zA-Z0-9_-]+$/.test(pluginName)) {
+      return res.status(400).json({ error: 'Invalid plugin name' });
+    }
+
+    // Stop server and wait for the process to fully exit before deleting files
+    if (isPluginRunning(pluginName)) {
+      await stopPluginServer(pluginName);
+    }
+
+    await uninstallPlugin(pluginName);
+    res.json({ success: true, name: pluginName });
+  } catch (err) {
+    res.status(400).json({ error: 'Failed to uninstall plugin', details: err.message });
+  }
+});
+
+export default router;
--- a/server/routes/projects.js
+++ b/server/routes/projects.js
@@ -311,13 +311,11 @@ router.post('/create-workspace', async (req, res) => {
 * Helper function to get GitHub token from database
 */
 async function getGithubTokenById(tokenId, userId) {
-  const { getDatabase } = await import('../database/db.js');
-  const db = await getDatabase();
+  const { db } = await import('../database/db.js');

-  const credential = await db.get(
-    'SELECT * FROM user_credentials WHERE id = ? AND user_id = ? AND credential_type = ? AND is_active = 1',
-    [tokenId, userId, 'github_token']
-  );
+  const credential = db.prepare(
+    'SELECT * FROM user_credentials WHERE id = ? AND user_id = ? AND credential_type = ? AND is_active = 1'
+  ).get(tokenId, userId, 'github_token');

  // Return in the expected format (github_token field for compatibility)
  if (credential) {
--- a/server/routes/settings.js
+++ b/server/routes/settings.js
@@ -1,7 +1,5 @@
 import express from 'express';
-import { apiKeysDb, credentialsDb, notificationPreferencesDb, pushSubscriptionsDb } from '../database/db.js';
-import { getPublicKey } from '../services/vapid-keys.js';
-import { createNotificationEvent, notifyUserIfEnabled } from '../services/notification-orchestrator.js';
+import { apiKeysDb, credentialsDb } from '../database/db.js';

 const router = express.Router();

@@ -177,100 +175,4 @@ router.patch('/credentials/:credentialId/toggle', async (req, res) => {
  }
 });

-// ===============================
-// Notification Preferences
-// ===============================
-
-router.get('/notification-preferences', async (req, res) => {
-  try {
-    const preferences = notificationPreferencesDb.getPreferences(req.user.id);
-    res.json({ success: true, preferences });
-  } catch (error) {
-    console.error('Error fetching notification preferences:', error);
-    res.status(500).json({ error: 'Failed to fetch notification preferences' });
-  }
-});
-
-router.put('/notification-preferences', async (req, res) => {
-  try {
-    const preferences = notificationPreferencesDb.updatePreferences(req.user.id, req.body || {});
-    res.json({ success: true, preferences });
-  } catch (error) {
-    console.error('Error saving notification preferences:', error);
-    res.status(500).json({ error: 'Failed to save notification preferences' });
-  }
-});
-
-// ===============================
-// Push Subscription Management
-// ===============================
-
-router.get('/push/vapid-public-key', async (req, res) => {
-  try {
-    const publicKey = getPublicKey();
-    res.json({ publicKey });
-  } catch (error) {
-    console.error('Error fetching VAPID public key:', error);
-    res.status(500).json({ error: 'Failed to fetch VAPID public key' });
-  }
-});
-
-router.post('/push/subscribe', async (req, res) => {
-  try {
-    const { endpoint, keys } = req.body;
-    if (!endpoint || !keys?.p256dh || !keys?.auth) {
-      return res.status(400).json({ error: 'Missing subscription fields' });
-    }
-    pushSubscriptionsDb.saveSubscription(req.user.id, endpoint, keys.p256dh, keys.auth);
-
-    // Enable webPush in preferences so the confirmation goes through the full pipeline
-    const currentPrefs = notificationPreferencesDb.getPreferences(req.user.id);
-    if (!currentPrefs?.channels?.webPush) {
-      notificationPreferencesDb.updatePreferences(req.user.id, {
-        ...currentPrefs,
-        channels: { ...currentPrefs?.channels, webPush: true },
-      });
-    }
-
-    res.json({ success: true });
-
-    // Send a confirmation push through the full notification pipeline
-    const event = createNotificationEvent({
-      provider: 'system',
-      kind: 'info',
-      code: 'push.enabled',
-      meta: { message: 'Push notifications are now enabled!' },
-      severity: 'info'
-    });
-    notifyUserIfEnabled({ userId: req.user.id, event });
-  } catch (error) {
-    console.error('Error saving push subscription:', error);
-    res.status(500).json({ error: 'Failed to save push subscription' });
-  }
-});
-
-router.post('/push/unsubscribe', async (req, res) => {
-  try {
-    const { endpoint } = req.body;
-    if (!endpoint) {
-      return res.status(400).json({ error: 'Missing endpoint' });
-    }
-    pushSubscriptionsDb.removeSubscription(endpoint);
-
-    // Disable webPush in preferences to match subscription state
-    const currentPrefs = notificationPreferencesDb.getPreferences(req.user.id);
-    if (currentPrefs?.channels?.webPush) {
-      notificationPreferencesDb.updatePreferences(req.user.id, {
-        ...currentPrefs,
-        channels: { ...currentPrefs.channels, webPush: false },
-      });
-    }
-
-    res.json({ success: true });
-  } catch (error) {
-    console.error('Error removing push subscription:', error);
-    res.status(500).json({ error: 'Failed to remove push subscription' });
-  }
-});
-
 export default router;
--- a/server/routes/user.js
+++ b/server/routes/user.js
@@ -2,12 +2,29 @@ import express from 'express';
 import { userDb } from '../database/db.js';
 import { authenticateToken } from '../middleware/auth.js';
 import { getSystemGitConfig } from '../utils/gitConfig.js';
-import { exec } from 'child_process';
-import { promisify } from 'util';
+import { spawn } from 'child_process';

-const execAsync = promisify(exec);
 const router = express.Router();

+function spawnAsync(command, args, options = {}) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, { ...options, shell: false });
+    let stdout = '';
+    let stderr = '';
+    child.stdout.on('data', (data) => { stdout += data.toString(); });
+    child.stderr.on('data', (data) => { stderr += data.toString(); });
+    child.on('error', (error) => { reject(error); });
+    child.on('close', (code) => {
+      if (code === 0) { resolve({ stdout, stderr }); return; }
+      const error = new Error(`Command failed: ${command} ${args.join(' ')}`);
+      error.code = code;
+      error.stdout = stdout;
+      error.stderr = stderr;
+      reject(error);
+    });
+  });
+}
+
 router.get('/git-config', authenticateToken, async (req, res) => {
  try {
    const userId = req.user.id;
@@ -55,8 +72,8 @@ router.post('/git-config', authenticateToken, async (req, res) => {
    userDb.updateGitConfig(userId, gitName, gitEmail);

    try {
-      await execAsync(`git config --global user.name "${gitName.replace(/"/g, '\\"')}"`);
-      await execAsync(`git config --global user.email "${gitEmail.replace(/"/g, '\\"')}"`);
+      await spawnAsync('git', ['config', '--global', 'user.name', gitName]);
+      await spawnAsync('git', ['config', '--global', 'user.email', gitEmail]);
      console.log(`Applied git config globally: ${gitName} <${gitEmail}>`);
    } catch (gitError) {
      console.error('Error applying git config:', gitError);
--- a/server/services/notification-orchestrator.js
+++ b/server/services/notification-orchestrator.js
@@ -1,137 +0,0 @@
-import webPush from 'web-push';
-import { notificationPreferencesDb, pushSubscriptionsDb } from '../database/db.js';
-
-const KIND_TO_PREF_KEY = {
-  action_required: 'actionRequired',
-  stop: 'stop',
-  error: 'error'
-};
-
-const recentEventKeys = new Map();
-const DEDUPE_WINDOW_MS = 20000;
-
-const cleanupOldEventKeys = () => {
-  const now = Date.now();
-  for (const [key, timestamp] of recentEventKeys.entries()) {
-    if (now - timestamp > DEDUPE_WINDOW_MS) {
-      recentEventKeys.delete(key);
-    }
-  }
-};
-
-function shouldSendPush(preferences, event) {
-  const webPushEnabled = Boolean(preferences?.channels?.webPush);
-  const prefEventKey = KIND_TO_PREF_KEY[event.kind];
-  const eventEnabled = prefEventKey ? Boolean(preferences?.events?.[prefEventKey]) : true;
-
-  return webPushEnabled && eventEnabled;
-}
-
-function isDuplicate(event) {
-  cleanupOldEventKeys();
-  const key = event.dedupeKey || `${event.provider}:${event.kind || 'info'}:${event.code || 'generic'}:${event.sessionId || 'none'}`;
-  if (recentEventKeys.has(key)) {
-    return true;
-  }
-  recentEventKeys.set(key, Date.now());
-  return false;
-}
-
-function createNotificationEvent({
-  provider,
-  sessionId = null,
-  kind = 'info',
-  code = 'generic.info',
-  meta = {},
-  severity = 'info',
-  dedupeKey = null,
-  requiresUserAction = false
-}) {
-  return {
-    provider,
-    sessionId,
-    kind,
-    code,
-    meta,
-    severity,
-    requiresUserAction,
-    dedupeKey,
-    createdAt: new Date().toISOString()
-  };
-}
-
-function buildPushBody(event) {
-  const CODE_MAP = {
-    'permission.required': event.meta?.toolName
-      ? `Action Required: Tool "${event.meta.toolName}" needs approval`
-      : 'Action Required: A tool needs your approval',
-    'run.stopped': event.meta?.stopReason || 'Run Stopped: The run has stopped',
-    'run.failed': event.meta?.error ? `Run Failed: ${event.meta.error}` : 'Run Failed: The run encountered an error',
-    'agent.notification': event.meta?.message ? String(event.meta.message) : 'You have a new notification',
-    'push.enabled': 'Push notifications are now enabled!'
-  };
-
-  return {
-    title: 'Claude Code UI',
-    body: CODE_MAP[event.code] || 'You have a new notification',
-    data: {
-      sessionId: event.sessionId || null,
-      code: event.code
-    }
-  };
-}
-
-async function sendWebPush(userId, event) {
-  const subscriptions = pushSubscriptionsDb.getSubscriptions(userId);
-  if (!subscriptions.length) return;
-
-  const payload = JSON.stringify(buildPushBody(event));
-
-  const results = await Promise.allSettled(
-    subscriptions.map((sub) =>
-      webPush.sendNotification(
-        {
-          endpoint: sub.endpoint,
-          keys: {
-            p256dh: sub.keys_p256dh,
-            auth: sub.keys_auth
-          }
-        },
-        payload
-      )
-    )
-  );
-
-  // Clean up gone subscriptions (410 Gone or 404)
-  results.forEach((result, index) => {
-    if (result.status === 'rejected') {
-      const statusCode = result.reason?.statusCode;
-      if (statusCode === 410 || statusCode === 404) {
-        pushSubscriptionsDb.removeSubscription(subscriptions[index].endpoint);
-      }
-    }
-  });
-}
-
-function notifyUserIfEnabled({ userId, event }) {
-  if (!userId || !event) {
-    return;
-  }
-
-  const preferences = notificationPreferencesDb.getPreferences(userId);
-  if (!shouldSendPush(preferences, event)) {
-    return;
-  }
-  if (isDuplicate(event)) {
-    return;
-  }
-
-  sendWebPush(userId, event).catch((err) => {
-    console.error('Web push send error:', err);
-  });
-}
-
-export {
-  createNotificationEvent,
-  notifyUserIfEnabled
-};
--- a/server/services/vapid-keys.js
+++ b/server/services/vapid-keys.js
@@ -1,35 +0,0 @@
-import webPush from 'web-push';
-import { db } from '../database/db.js';
-
-let cachedKeys = null;
-
-function ensureVapidKeys() {
-  if (cachedKeys) return cachedKeys;
-
-  const row = db.prepare('SELECT public_key, private_key FROM vapid_keys ORDER BY id DESC LIMIT 1').get();
-  if (row) {
-    cachedKeys = { publicKey: row.public_key, privateKey: row.private_key };
-    return cachedKeys;
-  }
-
-  const keys = webPush.generateVAPIDKeys();
-  db.prepare('INSERT INTO vapid_keys (public_key, private_key) VALUES (?, ?)').run(keys.publicKey, keys.privateKey);
-  cachedKeys = keys;
-  return cachedKeys;
-}
-
-function getPublicKey() {
-  return ensureVapidKeys().publicKey;
-}
-
-function configureWebPush() {
-  const keys = ensureVapidKeys();
-  webPush.setVapidDetails(
-    'mailto:noreply@claudecodeui.local',
-    keys.publicKey,
-    keys.privateKey
-  );
-  console.log('Web Push notifications configured');
-}
-
-export { ensureVapidKeys, getPublicKey, configureWebPush };
--- a/server/utils/commandParser.js
+++ b/server/utils/commandParser.js
@@ -1,9 +1,9 @@
-import matter from 'gray-matter';
 import { promises as fs } from 'fs';
 import path from 'path';
 import { execFile } from 'child_process';
 import { promisify } from 'util';
 import { parse as parseShellCommand } from 'shell-quote';
+import { parseFrontmatter } from './frontmatter.js';

 const execFileAsync = promisify(execFile);

@@ -32,7 +32,7 @@ const BASH_COMMAND_ALLOWLIST = [
 */
 export function parseCommand(content) {
  try {
-    const parsed = matter(content);
+    const parsed = parseFrontmatter(content);
    return {
      data: parsed.data || {},
      content: parsed.content || '',
--- a/server/utils/frontmatter.js
+++ b/server/utils/frontmatter.js
@@ -0,0 +1,18 @@
+import matter from 'gray-matter';
+
+const disabledFrontmatterEngine = () => ({});
+
+const frontmatterOptions = {
+  language: 'yaml',
+  // Disable JS/JSON frontmatter parsing to avoid executable project content.
+  // Mirrors Gatsby's mitigation for gray-matter.
+  engines: {
+    js: disabledFrontmatterEngine,
+    javascript: disabledFrontmatterEngine,
+    json: disabledFrontmatterEngine
+  }
+};
+
+export function parseFrontmatter(content) {
+  return matter(content, frontmatterOptions);
+}
--- a/server/utils/gitConfig.js
+++ b/server/utils/gitConfig.js
@@ -1,7 +1,17 @@
-import { exec } from 'child_process';
-import { promisify } from 'util';
+import { spawn } from 'child_process';

-const execAsync = promisify(exec);
+function spawnAsync(command, args) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, { shell: false });
+    let stdout = '';
+    child.stdout.on('data', (data) => { stdout += data.toString(); });
+    child.on('error', (error) => { reject(error); });
+    child.on('close', (code) => {
+      if (code === 0) { resolve({ stdout }); return; }
+      reject(new Error(`Command failed with code ${code}`));
+    });
+  });
+}

 /**
 * Read git configuration from system's global git config
@@ -10,8 +20,8 @@ const execAsync = promisify(exec);
 export async function getSystemGitConfig() {
  try {
    const [nameResult, emailResult] = await Promise.all([
-      execAsync('git config --global user.name').catch(() => ({ stdout: '' })),
-      execAsync('git config --global user.email').catch(() => ({ stdout: '' }))
+      spawnAsync('git', ['config', '--global', 'user.name']).catch(() => ({ stdout: '' })),
+      spawnAsync('git', ['config', '--global', 'user.email']).catch(() => ({ stdout: '' }))
    ]);

    return {
--- a/server/utils/plugin-loader.js
+++ b/server/utils/plugin-loader.js
@@ -0,0 +1,408 @@
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+import { spawn } from 'child_process';
+
+const PLUGINS_DIR = path.join(os.homedir(), '.claude-code-ui', 'plugins');
+const PLUGINS_CONFIG_PATH = path.join(os.homedir(), '.claude-code-ui', 'plugins.json');
+
+const REQUIRED_MANIFEST_FIELDS = ['name', 'displayName', 'entry'];
+
+/** Strip embedded credentials from a repo URL before exposing it to the client. */
+function sanitizeRepoUrl(raw) {
+  try {
+    const u = new URL(raw);
+    u.username = '';
+    u.password = '';
+    return u.toString().replace(/\/$/, '');
+  } catch {
+    // Not a parseable URL (e.g. SSH shorthand) — strip user:pass@ segment
+    return raw.replace(/\/\/[^@/]+@/, '//');
+  }
+}
+const ALLOWED_TYPES = ['react', 'module'];
+const ALLOWED_SLOTS = ['tab'];
+
+export function getPluginsDir() {
+  if (!fs.existsSync(PLUGINS_DIR)) {
+    fs.mkdirSync(PLUGINS_DIR, { recursive: true });
+  }
+  return PLUGINS_DIR;
+}
+
+export function getPluginsConfig() {
+  try {
+    if (fs.existsSync(PLUGINS_CONFIG_PATH)) {
+      return JSON.parse(fs.readFileSync(PLUGINS_CONFIG_PATH, 'utf-8'));
+    }
+  } catch {
+    // Corrupted config, start fresh
+  }
+  return {};
+}
+
+export function savePluginsConfig(config) {
+  const dir = path.dirname(PLUGINS_CONFIG_PATH);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true, mode: 0o700 });
+  }
+  fs.writeFileSync(PLUGINS_CONFIG_PATH, JSON.stringify(config, null, 2), { mode: 0o600 });
+}
+
+export function validateManifest(manifest) {
+  if (!manifest || typeof manifest !== 'object') {
+    return { valid: false, error: 'Manifest must be a JSON object' };
+  }
+
+  for (const field of REQUIRED_MANIFEST_FIELDS) {
+    if (!manifest[field] || typeof manifest[field] !== 'string') {
+      return { valid: false, error: `Missing or invalid required field: ${field}` };
+    }
+  }
+
+  // Sanitize name — only allow alphanumeric, hyphens, underscores
+  if (!/^[a-zA-Z0-9_-]+$/.test(manifest.name)) {
+    return { valid: false, error: 'Plugin name must only contain letters, numbers, hyphens, and underscores' };
+  }
+
+  if (manifest.type && !ALLOWED_TYPES.includes(manifest.type)) {
+    return { valid: false, error: `Invalid plugin type: ${manifest.type}. Must be one of: ${ALLOWED_TYPES.join(', ')}` };
+  }
+
+  if (manifest.slot && !ALLOWED_SLOTS.includes(manifest.slot)) {
+    return { valid: false, error: `Invalid plugin slot: ${manifest.slot}. Must be one of: ${ALLOWED_SLOTS.join(', ')}` };
+  }
+
+  // Validate entry is a relative path without traversal
+  if (manifest.entry.includes('..') || path.isAbsolute(manifest.entry)) {
+    return { valid: false, error: 'Entry must be a relative path without ".."' };
+  }
+
+  if (manifest.server !== undefined && manifest.server !== null) {
+    if (typeof manifest.server !== 'string' || manifest.server.includes('..') || path.isAbsolute(manifest.server)) {
+      return { valid: false, error: 'Server entry must be a relative path string without ".."' };
+    }
+  }
+
+  if (manifest.permissions !== undefined) {
+    if (!Array.isArray(manifest.permissions) || !manifest.permissions.every(p => typeof p === 'string')) {
+      return { valid: false, error: 'Permissions must be an array of strings' };
+    }
+  }
+
+  return { valid: true };
+}
+
+export function scanPlugins() {
+  const pluginsDir = getPluginsDir();
+  const config = getPluginsConfig();
+  const plugins = [];
+
+  let entries;
+  try {
+    entries = fs.readdirSync(pluginsDir, { withFileTypes: true });
+  } catch {
+    return plugins;
+  }
+
+  const seenNames = new Set();
+
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+    // Skip transient temp directories from in-progress installs
+    if (entry.name.startsWith('.tmp-')) continue;
+
+    const manifestPath = path.join(pluginsDir, entry.name, 'manifest.json');
+    if (!fs.existsSync(manifestPath)) continue;
+
+    try {
+      const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+      const validation = validateManifest(manifest);
+      if (!validation.valid) {
+        console.warn(`[Plugins] Skipping ${entry.name}: ${validation.error}`);
+        continue;
+      }
+
+      // Skip duplicate manifest names
+      if (seenNames.has(manifest.name)) {
+        console.warn(`[Plugins] Skipping ${entry.name}: duplicate plugin name "${manifest.name}"`);
+        continue;
+      }
+      seenNames.add(manifest.name);
+
+      // Try to read git remote URL
+      let repoUrl = null;
+      try {
+        const gitConfigPath = path.join(pluginsDir, entry.name, '.git', 'config');
+        if (fs.existsSync(gitConfigPath)) {
+          const gitConfig = fs.readFileSync(gitConfigPath, 'utf-8');
+          const match = gitConfig.match(/url\s*=\s*(.+)/);
+          if (match) {
+            repoUrl = match[1].trim().replace(/\.git$/, '');
+            // Convert SSH URLs to HTTPS
+            if (repoUrl.startsWith('git@')) {
+              repoUrl = repoUrl.replace(/^git@([^:]+):/, 'https://$1/');
+            }
+            // Strip embedded credentials (e.g. https://user:pass@host/...)
+            repoUrl = sanitizeRepoUrl(repoUrl);
+          }
+        }
+      } catch { /* ignore */ }
+
+      plugins.push({
+        name: manifest.name,
+        displayName: manifest.displayName,
+        version: manifest.version || '0.0.0',
+        description: manifest.description || '',
+        author: manifest.author || '',
+        icon: manifest.icon || 'Puzzle',
+        type: manifest.type || 'module',
+        slot: manifest.slot || 'tab',
+        entry: manifest.entry,
+        server: manifest.server || null,
+        permissions: manifest.permissions || [],
+        enabled: config[manifest.name]?.enabled !== false, // enabled by default
+        dirName: entry.name,
+        repoUrl,
+      });
+    } catch (err) {
+      console.warn(`[Plugins] Failed to read manifest for ${entry.name}:`, err.message);
+    }
+  }
+
+  return plugins;
+}
+
+export function getPluginDir(name) {
+  const plugins = scanPlugins();
+  const plugin = plugins.find(p => p.name === name);
+  if (!plugin) return null;
+  return path.join(getPluginsDir(), plugin.dirName);
+}
+
+export function resolvePluginAssetPath(name, assetPath) {
+  const pluginDir = getPluginDir(name);
+  if (!pluginDir) return null;
+
+  const resolved = path.resolve(pluginDir, assetPath);
+
+  // Prevent path traversal — canonicalize via realpath to defeat symlink bypasses
+  if (!fs.existsSync(resolved)) return null;
+
+  const realResolved = fs.realpathSync(resolved);
+  const realPluginDir = fs.realpathSync(pluginDir);
+  if (!realResolved.startsWith(realPluginDir + path.sep) && realResolved !== realPluginDir) {
+    return null;
+  }
+
+  return realResolved;
+}
+
+export function installPluginFromGit(url) {
+  return new Promise((resolve, reject) => {
+    if (typeof url !== 'string' || !url.trim()) {
+      return reject(new Error('Invalid URL: must be a non-empty string'));
+    }
+    if (url.startsWith('-')) {
+      return reject(new Error('Invalid URL: must not start with "-"'));
+    }
+
+    // Extract repo name from URL for directory name
+    const urlClean = url.replace(/\.git$/, '').replace(/\/$/, '');
+    const repoName = urlClean.split('/').pop();
+
+    if (!repoName || !/^[a-zA-Z0-9_.-]+$/.test(repoName)) {
+      return reject(new Error('Could not determine a valid directory name from the URL'));
+    }
+
+    const pluginsDir = getPluginsDir();
+    const targetDir = path.resolve(pluginsDir, repoName);
+
+    // Ensure the resolved target directory stays within the plugins directory
+    if (!targetDir.startsWith(pluginsDir + path.sep)) {
+      return reject(new Error('Invalid plugin directory path'));
+    }
+
+    if (fs.existsSync(targetDir)) {
+      return reject(new Error(`Plugin directory "${repoName}" already exists`));
+    }
+
+    // Clone into a temp directory so scanPlugins() never sees a partially-installed plugin
+    const tempDir = fs.mkdtempSync(path.join(pluginsDir, `.tmp-${repoName}-`));
+
+    const cleanupTemp = () => {
+      try { fs.rmSync(tempDir, { recursive: true, force: true }); } catch {}
+    };
+
+    const finalize = (manifest) => {
+      try {
+        fs.renameSync(tempDir, targetDir);
+      } catch (err) {
+        cleanupTemp();
+        return reject(new Error(`Failed to move plugin into place: ${err.message}`));
+      }
+      resolve(manifest);
+    };
+
+    const gitProcess = spawn('git', ['clone', '--depth', '1', '--', url, tempDir], {
+      stdio: ['ignore', 'pipe', 'pipe'],
+    });
+
+    let stderr = '';
+    gitProcess.stderr.on('data', (data) => { stderr += data.toString(); });
+
+    gitProcess.on('close', (code) => {
+      if (code !== 0) {
+        cleanupTemp();
+        return reject(new Error(`git clone failed (exit code ${code}): ${stderr.trim()}`));
+      }
+
+      // Validate manifest exists
+      const manifestPath = path.join(tempDir, 'manifest.json');
+      if (!fs.existsSync(manifestPath)) {
+        cleanupTemp();
+        return reject(new Error('Cloned repository does not contain a manifest.json'));
+      }
+
+      let manifest;
+      try {
+        manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+      } catch {
+        cleanupTemp();
+        return reject(new Error('manifest.json is not valid JSON'));
+      }
+
+      const validation = validateManifest(manifest);
+      if (!validation.valid) {
+        cleanupTemp();
+        return reject(new Error(`Invalid manifest: ${validation.error}`));
+      }
+
+      // Reject if another installed plugin already uses this name
+      const existing = scanPlugins().find(p => p.name === manifest.name);
+      if (existing) {
+        cleanupTemp();
+        return reject(new Error(`A plugin named "${manifest.name}" is already installed (in "${existing.dirName}")`));
+      }
+
+      // Run npm install if package.json exists.
+      // --ignore-scripts prevents postinstall hooks from executing arbitrary code.
+      const packageJsonPath = path.join(tempDir, 'package.json');
+      if (fs.existsSync(packageJsonPath)) {
+        const npmProcess = spawn('npm', ['install', '--production', '--ignore-scripts'], {
+          cwd: tempDir,
+          stdio: ['ignore', 'pipe', 'pipe'],
+        });
+
+        npmProcess.on('close', (npmCode) => {
+          if (npmCode !== 0) {
+            cleanupTemp();
+            return reject(new Error(`npm install for ${repoName} failed (exit code ${npmCode})`));
+          }
+          finalize(manifest);
+        });
+
+        npmProcess.on('error', (err) => {
+          cleanupTemp();
+          reject(err);
+        });
+      } else {
+        finalize(manifest);
+      }
+    });
+
+    gitProcess.on('error', (err) => {
+      cleanupTemp();
+      reject(new Error(`Failed to spawn git: ${err.message}`));
+    });
+  });
+}
+
+export function updatePluginFromGit(name) {
+  return new Promise((resolve, reject) => {
+    const pluginDir = getPluginDir(name);
+    if (!pluginDir) {
+      return reject(new Error(`Plugin "${name}" not found`));
+    }
+
+    // Only fast-forward to avoid silent divergence
+    const gitProcess = spawn('git', ['pull', '--ff-only', '--'], {
+      cwd: pluginDir,
+      stdio: ['ignore', 'pipe', 'pipe'],
+    });
+
+    let stderr = '';
+    gitProcess.stderr.on('data', (data) => { stderr += data.toString(); });
+
+    gitProcess.on('close', (code) => {
+      if (code !== 0) {
+        return reject(new Error(`git pull failed (exit code ${code}): ${stderr.trim()}`));
+      }
+
+      // Re-validate manifest after update
+      const manifestPath = path.join(pluginDir, 'manifest.json');
+      let manifest;
+      try {
+        manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+      } catch {
+        return reject(new Error('manifest.json is not valid JSON after update'));
+      }
+
+      const validation = validateManifest(manifest);
+      if (!validation.valid) {
+        return reject(new Error(`Invalid manifest after update: ${validation.error}`));
+      }
+
+      // Re-run npm install if package.json exists
+      const packageJsonPath = path.join(pluginDir, 'package.json');
+      if (fs.existsSync(packageJsonPath)) {
+        const npmProcess = spawn('npm', ['install', '--production', '--ignore-scripts'], {
+          cwd: pluginDir,
+          stdio: ['ignore', 'pipe', 'pipe'],
+        });
+        npmProcess.on('close', (npmCode) => {
+          if (npmCode !== 0) {
+            return reject(new Error(`npm install for ${name} failed (exit code ${npmCode})`));
+          }
+          resolve(manifest);
+        });
+        npmProcess.on('error', (err) => reject(err));
+      } else {
+        resolve(manifest);
+      }
+    });
+
+    gitProcess.on('error', (err) => {
+      reject(new Error(`Failed to spawn git: ${err.message}`));
+    });
+  });
+}
+
+export async function uninstallPlugin(name) {
+  const pluginDir = getPluginDir(name);
+  if (!pluginDir) {
+    throw new Error(`Plugin "${name}" not found`);
+  }
+
+  // On Windows, file handles may be released slightly after process exit.
+  // Retry a few times with a short delay before giving up.
+  const MAX_RETRIES = 5;
+  const RETRY_DELAY_MS = 500;
+  for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+    try {
+      fs.rmSync(pluginDir, { recursive: true, force: true });
+      break;
+    } catch (err) {
+      if (err.code === 'EBUSY' && attempt < MAX_RETRIES) {
+        await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY_MS));
+      } else {
+        throw err;
+      }
+    }
+  }
+
+  // Remove from config
+  const config = getPluginsConfig();
+  delete config[name];
+  savePluginsConfig(config);
+}
--- a/server/utils/plugin-process-manager.js
+++ b/server/utils/plugin-process-manager.js
@@ -0,0 +1,184 @@
+import { spawn } from 'child_process';
+import path from 'path';
+import { scanPlugins, getPluginsConfig, getPluginDir } from './plugin-loader.js';
+
+// Map<pluginName, { process, port }>
+const runningPlugins = new Map();
+// Map<pluginName, Promise<port>> — in-flight start operations
+const startingPlugins = new Map();
+
+/**
+ * Start a plugin's server subprocess.
+ * The plugin's server entry must print a JSON line with { ready: true, port: <number> }
+ * to stdout within 10 seconds.
+ */
+export function startPluginServer(name, pluginDir, serverEntry) {
+  if (runningPlugins.has(name)) {
+    return Promise.resolve(runningPlugins.get(name).port);
+  }
+
+  // Coalesce concurrent starts for the same plugin
+  if (startingPlugins.has(name)) {
+    return startingPlugins.get(name);
+  }
+
+  const startPromise = new Promise((resolve, reject) => {
+
+    const serverPath = path.join(pluginDir, serverEntry);
+
+    // Restricted env — only essentials, no host secrets
+    const pluginProcess = spawn('node', [serverPath], {
+      cwd: pluginDir,
+      env: {
+        PATH: process.env.PATH,
+        HOME: process.env.HOME,
+        NODE_ENV: process.env.NODE_ENV || 'production',
+        PLUGIN_NAME: name,
+      },
+      stdio: ['ignore', 'pipe', 'pipe'],
+    });
+
+    let resolved = false;
+    let stdout = '';
+
+    const timeout = setTimeout(() => {
+      if (!resolved) {
+        resolved = true;
+        pluginProcess.kill();
+        reject(new Error('Plugin server did not report ready within 10 seconds'));
+      }
+    }, 10000);
+
+    pluginProcess.stdout.on('data', (data) => {
+      if (resolved) return;
+      stdout += data.toString();
+
+      // Look for the JSON ready line
+      const lines = stdout.split('\n');
+      for (const line of lines) {
+        try {
+          const msg = JSON.parse(line.trim());
+          if (msg.ready && typeof msg.port === 'number') {
+            clearTimeout(timeout);
+            resolved = true;
+            runningPlugins.set(name, { process: pluginProcess, port: msg.port });
+
+            pluginProcess.on('exit', () => {
+              runningPlugins.delete(name);
+            });
+
+            console.log(`[Plugins] Server started for "${name}" on port ${msg.port}`);
+            resolve(msg.port);
+          }
+        } catch {
+          // Not JSON yet, keep buffering
+        }
+      }
+    });
+
+    pluginProcess.stderr.on('data', (data) => {
+      console.warn(`[Plugin:${name}] ${data.toString().trim()}`);
+    });
+
+    pluginProcess.on('error', (err) => {
+      clearTimeout(timeout);
+      if (!resolved) {
+        resolved = true;
+        reject(new Error(`Failed to start plugin server: ${err.message}`));
+      }
+    });
+
+    pluginProcess.on('exit', (code) => {
+      clearTimeout(timeout);
+      runningPlugins.delete(name);
+      if (!resolved) {
+        resolved = true;
+        reject(new Error(`Plugin server exited with code ${code} before reporting ready`));
+      }
+    });
+  }).finally(() => {
+    startingPlugins.delete(name);
+  });
+
+  startingPlugins.set(name, startPromise);
+  return startPromise;
+}
+
+/**
+ * Stop a plugin's server subprocess.
+ * Returns a Promise that resolves when the process has fully exited.
+ */
+export function stopPluginServer(name) {
+  const entry = runningPlugins.get(name);
+  if (!entry) return Promise.resolve();
+
+  return new Promise((resolve) => {
+    const cleanup = () => {
+      clearTimeout(forceKillTimer);
+      runningPlugins.delete(name);
+      resolve();
+    };
+
+    entry.process.once('exit', cleanup);
+
+    entry.process.kill('SIGTERM');
+
+    // Force kill after 5 seconds if still running
+    const forceKillTimer = setTimeout(() => {
+      if (runningPlugins.has(name)) {
+        entry.process.kill('SIGKILL');
+        cleanup();
+      }
+    }, 5000);
+
+    console.log(`[Plugins] Server stopped for "${name}"`);
+  });
+}
+
+/**
+ * Get the port a running plugin server is listening on.
+ */
+export function getPluginPort(name) {
+  return runningPlugins.get(name)?.port ?? null;
+}
+
+/**
+ * Check if a plugin's server is running.
+ */
+export function isPluginRunning(name) {
+  return runningPlugins.has(name);
+}
+
+/**
+ * Stop all running plugin servers (called on host shutdown).
+ */
+export function stopAllPlugins() {
+  const stops = [];
+  for (const [name] of runningPlugins) {
+    stops.push(stopPluginServer(name));
+  }
+  return Promise.all(stops);
+}
+
+/**
+ * Start servers for all enabled plugins that have a server entry.
+ * Called once on host server boot.
+ */
+export async function startEnabledPluginServers() {
+  const plugins = scanPlugins();
+  const config = getPluginsConfig();
+
+  for (const plugin of plugins) {
+    if (!plugin.server) continue;
+    if (config[plugin.name]?.enabled === false) continue;
+
+    const pluginDir = getPluginDir(plugin.name);
+    if (!pluginDir) continue;
+
+    try {
+      await startPluginServer(plugin.name, pluginDir, plugin.server);
+    } catch (err) {
+      console.error(`[Plugins] Failed to start server for "${plugin.name}":`, err.message);
+    }
+  }
+}
--- a/shared/modelConstants.js
+++ b/shared/modelConstants.js
@@ -13,14 +13,14 @@
 export const CLAUDE_MODELS = {
  // Models in SDK format (what the actual SDK accepts)
  OPTIONS: [
-    { value: 'sonnet', label: 'Sonnet' },
-    { value: 'opus', label: 'Opus' },
-    { value: 'haiku', label: 'Haiku' },
-    { value: 'opusplan', label: 'Opus Plan' },
-    { value: 'sonnet[1m]', label: 'Sonnet [1M]' }
+    { value: "sonnet", label: "Sonnet" },
+    { value: "opus", label: "Opus" },
+    { value: "haiku", label: "Haiku" },
+    { value: "opusplan", label: "Opus Plan" },
+    { value: "sonnet[1m]", label: "Sonnet [1M]" },
  ],

-  DEFAULT: 'sonnet'
+  DEFAULT: "sonnet",
 };

 /**
@@ -28,26 +28,28 @@ export const CLAUDE_MODELS = {
 */
 export const CURSOR_MODELS = {
  OPTIONS: [
-    { value: 'gpt-5.2-high', label: 'GPT-5.2 High' },
-    { value: 'gemini-3-pro', label: 'Gemini 3 Pro' },
-    { value: 'opus-4.5-thinking', label: 'Claude 4.5 Opus (Thinking)' },
-    { value: 'gpt-5.2', label: 'GPT-5.2' },
-    { value: 'gpt-5.1', label: 'GPT-5.1' },
-    { value: 'gpt-5.1-high', label: 'GPT-5.1 High' },
-    { value: 'composer-1', label: 'Composer 1' },
-    { value: 'auto', label: 'Auto' },
-    { value: 'sonnet-4.5', label: 'Claude 4.5 Sonnet' },
-    { value: 'sonnet-4.5-thinking', label: 'Claude 4.5 Sonnet (Thinking)' },
-    { value: 'opus-4.5', label: 'Claude 4.5 Opus' },
-    { value: 'gpt-5.1-codex', label: 'GPT-5.1 Codex' },
-    { value: 'gpt-5.1-codex-high', label: 'GPT-5.1 Codex High' },
-    { value: 'gpt-5.1-codex-max', label: 'GPT-5.1 Codex Max' },
-    { value: 'gpt-5.1-codex-max-high', label: 'GPT-5.1 Codex Max High' },
-    { value: 'opus-4.1', label: 'Claude 4.1 Opus' },
-    { value: 'grok', label: 'Grok' }
+    { value: "opus-4.6-thinking", label: "Claude 4.6 Opus (Thinking)" },
+    { value: "gpt-5.3-codex", label: "GPT-5.3" },
+    { value: "gpt-5.2-high", label: "GPT-5.2 High" },
+    { value: "gemini-3-pro", label: "Gemini 3 Pro" },
+    { value: "opus-4.5-thinking", label: "Claude 4.5 Opus (Thinking)" },
+    { value: "gpt-5.2", label: "GPT-5.2" },
+    { value: "gpt-5.1", label: "GPT-5.1" },
+    { value: "gpt-5.1-high", label: "GPT-5.1 High" },
+    { value: "composer-1", label: "Composer 1" },
+    { value: "auto", label: "Auto" },
+    { value: "sonnet-4.5", label: "Claude 4.5 Sonnet" },
+    { value: "sonnet-4.5-thinking", label: "Claude 4.5 Sonnet (Thinking)" },
+    { value: "opus-4.5", label: "Claude 4.5 Opus" },
+    { value: "gpt-5.1-codex", label: "GPT-5.1 Codex" },
+    { value: "gpt-5.1-codex-high", label: "GPT-5.1 Codex High" },
+    { value: "gpt-5.1-codex-max", label: "GPT-5.1 Codex Max" },
+    { value: "gpt-5.1-codex-max-high", label: "GPT-5.1 Codex Max High" },
+    { value: "opus-4.1", label: "Claude 4.1 Opus" },
+    { value: "grok", label: "Grok" },
  ],

-  DEFAULT: 'gpt-5'
+  DEFAULT: "gpt-5-3-codex",
 };

 /**
@@ -55,15 +57,16 @@ export const CURSOR_MODELS = {
 */
 export const CODEX_MODELS = {
  OPTIONS: [
-    { value: 'gpt-5.3-codex', label: 'GPT-5.3 Codex' },
-    { value: 'gpt-5.2-codex', label: 'GPT-5.2 Codex' },
-    { value: 'gpt-5.2', label: 'GPT-5.2' },
-    { value: 'gpt-5.1-codex-max', label: 'GPT-5.1 Codex Max' },
-    { value: 'o3', label: 'O3' },
-    { value: 'o4-mini', label: 'O4-mini' }
+    { value: "gpt-5.4", label: "GPT-5.4" },
+    { value: "gpt-5.3-codex", label: "GPT-5.3 Codex" },
+    { value: "gpt-5.2-codex", label: "GPT-5.2 Codex" },
+    { value: "gpt-5.2", label: "GPT-5.2" },
+    { value: "gpt-5.1-codex-max", label: "GPT-5.1 Codex Max" },
+    { value: "o3", label: "O3" },
+    { value: "o4-mini", label: "O4-mini" },
  ],

-  DEFAULT: 'gpt-5.3-codex'
+  DEFAULT: "gpt-5.4",
 };

 /**
@@ -71,16 +74,19 @@ export const CODEX_MODELS = {
 */
 export const GEMINI_MODELS = {
  OPTIONS: [
-    { value: 'gemini-3.1-pro-preview', label: 'Gemini 3.1 Pro Preview' },
-    { value: 'gemini-3-pro-preview', label: 'Gemini 3 Pro Preview' },
-    { value: 'gemini-3-flash-preview', label: 'Gemini 3 Flash Preview' },
-    { value: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash' },
-    { value: 'gemini-2.5-pro', label: 'Gemini 2.5 Pro' },
-    { value: 'gemini-2.0-flash-lite', label: 'Gemini 2.0 Flash Lite' },
-    { value: 'gemini-2.0-flash', label: 'Gemini 2.0 Flash' },
-    { value: 'gemini-2.0-pro-exp', label: 'Gemini 2.0 Pro Experimental' },
-    { value: 'gemini-2.0-flash-thinking-exp', label: 'Gemini 2.0 Flash Thinking' }
+    { value: "gemini-3.1-pro-preview", label: "Gemini 3.1 Pro Preview" },
+    { value: "gemini-3-pro-preview", label: "Gemini 3 Pro Preview" },
+    { value: "gemini-3-flash-preview", label: "Gemini 3 Flash Preview" },
+    { value: "gemini-2.5-flash", label: "Gemini 2.5 Flash" },
+    { value: "gemini-2.5-pro", label: "Gemini 2.5 Pro" },
+    { value: "gemini-2.0-flash-lite", label: "Gemini 2.0 Flash Lite" },
+    { value: "gemini-2.0-flash", label: "Gemini 2.0 Flash" },
+    { value: "gemini-2.0-pro-exp", label: "Gemini 2.0 Pro Experimental" },
+    {
+      value: "gemini-2.0-flash-thinking-exp",
+      label: "Gemini 2.0 Flash Thinking",
+    },
  ],

-  DEFAULT: 'gemini-2.5-flash'
+  DEFAULT: "gemini-2.5-flash",
 };
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,11 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { I18nextProvider } from 'react-i18next';
 import { ThemeProvider } from './contexts/ThemeContext';
-import { AuthProvider } from './contexts/AuthContext';
+import { AuthProvider, ProtectedRoute } from './components/auth';
 import { TaskMasterProvider } from './contexts/TaskMasterContext';
 import { TasksSettingsProvider } from './contexts/TasksSettingsContext';
 import { WebSocketProvider } from './contexts/WebSocketContext';
-import ProtectedRoute from './components/ProtectedRoute';
+import { PluginsProvider } from './contexts/PluginsContext';
 import AppContent from './components/app/AppContent';
 import i18n from './i18n/config.js';

@@ -15,8 +15,9 @@ export default function App() {
      <ThemeProvider>
        <AuthProvider>
          <WebSocketProvider>
-            <TasksSettingsProvider>
-              <TaskMasterProvider>
+            <PluginsProvider>
+              <TasksSettingsProvider>
+                <TaskMasterProvider>
                <ProtectedRoute>
                  <Router basename={window.__ROUTER_BASENAME__ || ''}>
                    <Routes>
@@ -25,8 +26,9 @@ export default function App() {
                    </Routes>
                  </Router>
                </ProtectedRoute>
-              </TaskMasterProvider>
-            </TasksSettingsProvider>
+                </TaskMasterProvider>
+              </TasksSettingsProvider>
+            </PluginsProvider>
          </WebSocketProvider>
        </AuthProvider>
      </ThemeProvider>
--- a/src/components/CreateTaskModal.jsx
+++ b/src/components/CreateTaskModal.jsx
@@ -1,88 +0,0 @@
-import React from 'react';
-import { X, Sparkles } from 'lucide-react';
-
-const CreateTaskModal = ({ currentProject, onClose, onTaskCreated }) => {
-
-  return (
-    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md border border-gray-200 dark:border-gray-700">
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
-          <div className="flex items-center gap-3">
-            <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-            </div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Create AI-Generated Task</h3>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
-          >
-            <X className="w-5 h-5" />
-          </button>
-        </div>
-
-        {/* Content */}
-        <div className="p-6 space-y-6">
-          {/* AI-First Approach */}
-          <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
-            <div className="flex items-start gap-3">
-              <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
-                <Sparkles className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-              </div>
-              <div className="flex-1">
-                <h4 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">
-                  💡 Pro Tip: Ask Claude Code Directly!
-                </h4>
-                <p className="text-sm text-blue-800 dark:text-blue-200 mb-3">
-                  You can simply ask Claude Code in the chat to create tasks for you. 
-                  The AI assistant will automatically generate detailed tasks with research-backed insights.
-                </p>
-                
-                <div className="bg-white dark:bg-gray-800 rounded border border-blue-200 dark:border-blue-700 p-3 mb-3">
-                  <p className="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Example:</p>
-                  <p className="text-sm text-gray-900 dark:text-white font-mono">
-                    "Please add a new task to implement user profile image uploads using Cloudinary, research the best approach."
-                  </p>
-                </div>
-                
-                <p className="text-xs text-blue-700 dark:text-blue-300">
-                  <strong>This runs:</strong> <code className="bg-blue-100 dark:bg-blue-900/50 px-1 rounded text-xs">
-                    task-master add-task --prompt="Implement user profile image uploads using Cloudinary" --research
-                  </code>
-                </p>
-              </div>
-            </div>
-          </div>
-
-          {/* Learn More Link */}
-          <div className="text-center pt-4 border-t border-gray-200 dark:border-gray-700">
-            <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
-              For more examples and advanced usage patterns:
-            </p>
-            <a
-              href="https://github.com/eyaltoledano/claude-task-master/blob/main/docs/examples.md"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-block text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline font-medium"
-            >
-              View TaskMaster Documentation →
-            </a>
-          </div>
-
-          {/* Footer */}
-          <div className="pt-4">
-            <button
-              onClick={onClose}
-              className="w-full px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
-            >
-              Got it, I'll ask Claude Code directly
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CreateTaskModal;
--- a/src/components/DarkModeToggle.tsx
+++ b/src/components/DarkModeToggle.tsx
@@ -1,48 +0,0 @@
-import { Moon, Sun } from 'lucide-react';
-import { useTheme } from '../contexts/ThemeContext';
-
-type DarkModeToggleProps = {
-  checked?: boolean;
-  onToggle?: (nextValue: boolean) => void;
-  ariaLabel?: string;
-};
-
-function DarkModeToggle({ checked, onToggle, ariaLabel = 'Toggle dark mode' }: DarkModeToggleProps) {
-  const { isDarkMode, toggleDarkMode } = useTheme();
-  const isControlled = typeof checked === 'boolean' && typeof onToggle === 'function';
-  const isEnabled = isControlled ? checked : isDarkMode;
-
-  const handleToggle = () => {
-    if (isControlled) {
-      onToggle(!isEnabled);
-      return;
-    }
-
-    toggleDarkMode();
-  };
-
-  return (
-    <button
-      onClick={handleToggle}
-      className="relative inline-flex h-8 w-14 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
-      role="switch"
-      aria-checked={isEnabled}
-      aria-label={ariaLabel}
-    >
-      <span className="sr-only">{ariaLabel}</span>
-      <span
-        className={`${
-          isEnabled ? 'translate-x-7' : 'translate-x-1'
-        } h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform duration-200 flex items-center justify-center`}
-      >
-        {isEnabled ? (
-          <Moon className="h-3.5 w-3.5 text-gray-700" />
-        ) : (
-          <Sun className="h-3.5 w-3.5 text-yellow-500" />
-        )}
-      </span>
-    </button>
-  );
-}
-
-export default DarkModeToggle;
--- a/src/components/DiffViewer.jsx
+++ b/src/components/DiffViewer.jsx
@@ -1,41 +0,0 @@
-import React from 'react';
-
-function DiffViewer({ diff, fileName, isMobile, wrapText }) {
-  if (!diff) {
-    return (
-      <div className="p-4 text-center text-muted-foreground text-sm">
-        No diff available
-      </div>
-    );
-  }
-
-  const renderDiffLine = (line, index) => {
-    const isAddition = line.startsWith('+') && !line.startsWith('+++');
-    const isDeletion = line.startsWith('-') && !line.startsWith('---');
-    const isHeader = line.startsWith('@@');
-
-    return (
-      <div
-        key={index}
-        className={`font-mono text-xs px-3 py-0.5 ${
-          isMobile && wrapText ? 'whitespace-pre-wrap break-all' : 'whitespace-pre overflow-x-auto'
-        } ${
-          isAddition ? 'bg-green-50 dark:bg-green-950/50 text-green-700 dark:text-green-300' :
-          isDeletion ? 'bg-red-50 dark:bg-red-950/50 text-red-700 dark:text-red-300' :
-          isHeader ? 'bg-primary/5 text-primary' :
-          'text-muted-foreground/70'
-        }`}
-      >
-        {line}
-      </div>
-    );
-  };
-
-  return (
-    <div className="diff-viewer">
-      {diff.split('\n').map((line, index) => renderDiffLine(line, index))}
-    </div>
-  );
-}
-
-export default DiffViewer;
--- a/src/components/ErrorBoundary.jsx
+++ b/src/components/ErrorBoundary.jsx
@@ -1,77 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
-
-function ErrorFallback({ error, resetErrorBoundary, showDetails, componentStack }) {
-  return (
-    <div className="flex flex-col items-center justify-center p-8 text-center">
-      <div className="bg-red-50 border border-red-200 rounded-lg p-6 max-w-md">
-        <div className="flex items-center mb-4">
-          <div className="flex-shrink-0">
-            <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
-              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
-            </svg>
-          </div>
-          <h3 className="ml-3 text-sm font-medium text-red-800">
-            Something went wrong
-          </h3>
-        </div>
-        <div className="text-sm text-red-700">
-          <p className="mb-2">An error occurred while loading the chat interface.</p>
-          {showDetails && error && (
-            <details className="mt-4">
-              <summary className="cursor-pointer text-xs font-mono">Error Details</summary>
-              <pre className="mt-2 text-xs bg-red-100 p-2 rounded overflow-auto max-h-40">
-                {error.toString()}
-                {componentStack}
-              </pre>
-            </details>
-          )}
-        </div>
-        <div className="mt-4">
-          <button
-            onClick={resetErrorBoundary}
-            className="bg-red-600 text-white px-4 py-2 rounded text-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500"
-          >
-            Try Again
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function ErrorBoundary({ children, showDetails = false, onRetry = undefined, resetKeys = undefined }) {
-  const [componentStack, setComponentStack] = useState(null);
-
-  const handleError = useCallback((error, errorInfo) => {
-    console.error('ErrorBoundary caught an error:', error, errorInfo);
-    setComponentStack(errorInfo?.componentStack || null);
-  }, []);
-
-  const handleReset = useCallback(() => {
-    setComponentStack(null);
-    onRetry?.();
-  }, [onRetry]);
-
-  const renderFallback = useCallback(({ error, resetErrorBoundary }) => (
-    <ErrorFallback
-      error={error}
-      resetErrorBoundary={resetErrorBoundary}
-      showDetails={showDetails}
-      componentStack={componentStack}
-    />
-  ), [showDetails, componentStack]);
-
-  return (
-    <ReactErrorBoundary
-      fallbackRender={renderFallback}
-      onError={handleError}
-      onReset={handleReset}
-      resetKeys={resetKeys}
-    >
-      {children}
-    </ReactErrorBoundary>
-  );
-}
-
-export default ErrorBoundary;
--- a/src/components/FileContextMenu.jsx
+++ b/src/components/FileContextMenu.jsx
@@ -1,312 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  FileText,
-  FolderPlus,
-  Pencil,
-  Trash2,
-  Copy,
-  Download,
-  RefreshCw
-} from 'lucide-react';
-import { cn } from '../lib/utils';
-
-/**
- * FileContextMenu Component
- * Right-click context menu for file/directory operations
- */
-const FileContextMenu = ({
-  children,
-  item,
-  onRename,
-  onDelete,
-  onNewFile,
-  onNewFolder,
-  onRefresh,
-  onCopyPath,
-  onDownload,
-  isLoading = false,
-  className = ''
-}) => {
-  const { t } = useTranslation();
-  const [isOpen, setIsOpen] = useState(false);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const menuRef = useRef(null);
-  const triggerRef = useRef(null);
-
-  const isDirectory = item?.type === 'directory';
-  const isFile = item?.type === 'file';
-  const isBackground = !item; // Clicked on empty space
-
-  // Handle right-click
-  const handleContextMenu = useCallback((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const rect = e.currentTarget.getBoundingClientRect();
-    const x = e.clientX;
-    const y = e.clientY;
-
-    // Adjust position if menu would go off screen
-    const menuWidth = 200;
-    const menuHeight = 300;
-
-    let adjustedX = x;
-    let adjustedY = y;
-
-    if (x + menuWidth > window.innerWidth) {
-      adjustedX = window.innerWidth - menuWidth - 10;
-    }
-    if (y + menuHeight > window.innerHeight) {
-      adjustedY = window.innerHeight - menuHeight - 10;
-    }
-
-    setPosition({ x: adjustedX, y: adjustedY });
-    setIsOpen(true);
-  }, []);
-
-  // Close menu
-  const closeMenu = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-
-  // Close on click outside
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (menuRef.current && !menuRef.current.contains(e.target)) {
-        closeMenu();
-      }
-    };
-
-    const handleEscape = (e) => {
-      if (e.key === 'Escape') {
-        closeMenu();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      document.addEventListener('keydown', handleEscape);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('keydown', handleEscape);
-    };
-  }, [isOpen, closeMenu]);
-
-  // Handle keyboard navigation
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleKeyDown = (e) => {
-      const menuItems = menuRef.current?.querySelectorAll('[role="menuitem"]');
-      if (!menuItems || menuItems.length === 0) return;
-
-      const currentIndex = Array.from(menuItems).findIndex(
-        (item) => item === document.activeElement
-      );
-
-      switch (e.key) {
-        case 'ArrowDown':
-          e.preventDefault();
-          const nextIndex = currentIndex < menuItems.length - 1 ? currentIndex + 1 : 0;
-          menuItems[nextIndex]?.focus();
-          break;
-        case 'ArrowUp':
-          e.preventDefault();
-          const prevIndex = currentIndex > 0 ? currentIndex - 1 : menuItems.length - 1;
-          menuItems[prevIndex]?.focus();
-          break;
-        case 'Enter':
-        case ' ':
-          if (document.activeElement?.hasAttribute('role', 'menuitem')) {
-            e.preventDefault();
-            document.activeElement.click();
-          }
-          break;
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [isOpen]);
-
-  // Handle action click
-  const handleAction = (action, ...args) => {
-    closeMenu();
-    action?.(...args);
-  };
-
-  // Menu item component
-  const MenuItem = ({ icon: Icon, label, onClick, danger = false, disabled = false, shortcut }) => (
-    <button
-      role="menuitem"
-      tabIndex={disabled ? -1 : 0}
-      disabled={disabled || isLoading}
-      onClick={() => handleAction(onClick)}
-      className={cn(
-        'w-full flex items-center gap-3 px-3 py-2 text-sm text-left rounded-md transition-colors',
-        'focus:outline-none focus:bg-accent',
-        disabled
-          ? 'opacity-50 cursor-not-allowed'
-          : danger
-          ? 'text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950'
-          : 'hover:bg-accent',
-        isLoading && 'pointer-events-none'
-      )}
-    >
-      {Icon && <Icon className="w-4 h-4 flex-shrink-0" />}
-      <span className="flex-1">{label}</span>
-      {shortcut && (
-        <span className="text-xs text-muted-foreground font-mono">{shortcut}</span>
-      )}
-    </button>
-  );
-
-  // Menu divider
-  const MenuDivider = () => (
-    <div className="h-px bg-border my-1 mx-2" />
-  );
-
-  // Build menu items based on context
-  const renderMenuItems = () => {
-    if (isFile) {
-      return (
-        <>
-          <MenuItem
-            icon={Pencil}
-            label={t('fileTree.context.rename', 'Rename')}
-            onClick={() => onRename?.(item)}
-          />
-          <MenuItem
-            icon={Trash2}
-            label={t('fileTree.context.delete', 'Delete')}
-            onClick={() => onDelete?.(item)}
-            danger
-          />
-          <MenuDivider />
-          <MenuItem
-            icon={Copy}
-            label={t('fileTree.context.copyPath', 'Copy Path')}
-            onClick={() => onCopyPath?.(item)}
-          />
-          <MenuItem
-            icon={Download}
-            label={t('fileTree.context.download', 'Download')}
-            onClick={() => onDownload?.(item)}
-          />
-        </>
-      );
-    }
-
-    if (isDirectory) {
-      return (
-        <>
-          <MenuItem
-            icon={FileText}
-            label={t('fileTree.context.newFile', 'New File')}
-            onClick={() => onNewFile?.(item.path)}
-          />
-          <MenuItem
-            icon={FolderPlus}
-            label={t('fileTree.context.newFolder', 'New Folder')}
-            onClick={() => onNewFolder?.(item.path)}
-          />
-          <MenuDivider />
-          <MenuItem
-            icon={Pencil}
-            label={t('fileTree.context.rename', 'Rename')}
-            onClick={() => onRename?.(item)}
-          />
-          <MenuItem
-            icon={Trash2}
-            label={t('fileTree.context.delete', 'Delete')}
-            onClick={() => onDelete?.(item)}
-            danger
-          />
-          <MenuDivider />
-          <MenuItem
-            icon={Copy}
-            label={t('fileTree.context.copyPath', 'Copy Path')}
-            onClick={() => onCopyPath?.(item)}
-          />
-          <MenuItem
-            icon={Download}
-            label={t('fileTree.context.download', 'Download')}
-            onClick={() => onDownload?.(item)}
-          />
-        </>
-      );
-    }
-
-    // Background context (empty space)
-    return (
-      <>
-        <MenuItem
-          icon={FileText}
-          label={t('fileTree.context.newFile', 'New File')}
-          onClick={() => onNewFile?.('')}
-        />
-        <MenuItem
-          icon={FolderPlus}
-          label={t('fileTree.context.newFolder', 'New Folder')}
-          onClick={() => onNewFolder?.('')}
-        />
-        <MenuDivider />
-        <MenuItem
-          icon={RefreshCw}
-          label={t('fileTree.context.refresh', 'Refresh')}
-          onClick={onRefresh}
-        />
-      </>
-    );
-  };
-
-  return (
-    <>
-      {/* Trigger element */}
-      <div
-        ref={triggerRef}
-        onContextMenu={handleContextMenu}
-        className={cn('contents', className)}
-      >
-        {children}
-      </div>
-
-      {/* Context menu portal */}
-      {isOpen && (
-        <div
-          ref={menuRef}
-          role="menu"
-          aria-label={t('fileTree.context.menuLabel', 'File context menu')}
-          style={{
-            position: 'fixed',
-            left: position.x,
-            top: position.y,
-            zIndex: 9999
-          }}
-          className={cn(
-            'min-w-[180px] py-1 px-1',
-            'bg-popover border border-border rounded-lg shadow-lg',
-            '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'
-          )}
-        >
-          {isLoading ? (
-            <div className="flex items-center justify-center py-4">
-              <RefreshCw className="w-4 h-4 animate-spin text-muted-foreground" />
-              <span className="ml-2 text-sm text-muted-foreground">
-                {t('fileTree.context.loading', 'Loading...')}
-              </span>
-            </div>
-          ) : (
-            renderMenuItems()
-          )}
-        </div>
-      )}
-    </>
-  );
-};
-
-export default FileContextMenu;
--- a/src/components/GeminiStatus.jsx
+++ b/src/components/GeminiStatus.jsx
@@ -1,90 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { cn } from '../lib/utils';
-
-function GeminiStatus({ status, onAbort, isLoading }) {
-  const [elapsedTime, setElapsedTime] = useState(0);
-  const [animationPhase, setAnimationPhase] = useState(0);
-
-  // Update elapsed time every second
-  useEffect(() => {
-    if (!isLoading) {
-      setElapsedTime(0);
-      return;
-    }
-
-    const startTime = Date.now();
-    const timer = setInterval(() => {
-      const elapsed = Math.floor((Date.now() - startTime) / 1000);
-      setElapsedTime(elapsed);
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, [isLoading]);
-
-  // Animate the status indicator
-  useEffect(() => {
-    if (!isLoading) return;
-
-    const timer = setInterval(() => {
-      setAnimationPhase(prev => (prev + 1) % 4);
-    }, 500);
-
-    return () => clearInterval(timer);
-  }, [isLoading]);
-
-  if (!isLoading) return null;
-
-  // Clever action words that cycle
-  const actionWords = ['Thinking', 'Processing', 'Analyzing', 'Working', 'Computing', 'Reasoning'];
-  const actionIndex = Math.floor(elapsedTime / 3) % actionWords.length;
-
-  // Parse status data
-  const statusText = status?.text || actionWords[actionIndex];
-  const canInterrupt = status?.can_interrupt !== false;
-
-  // Animation characters
-  const spinners = ['✻', '✹', '✸', '✶'];
-  const currentSpinner = spinners[animationPhase];
-
-  return (
-    <div className="w-full mb-6 animate-in slide-in-from-bottom duration-300">
-      <div className="flex items-center justify-between max-w-4xl mx-auto bg-gradient-to-r from-cyan-900 to-blue-900 dark:from-cyan-950 dark:to-blue-950 text-white rounded-lg shadow-lg px-4 py-3">
-        <div className="flex-1">
-          <div className="flex items-center gap-3">
-            {/* Animated spinner */}
-            <span className={cn(
-              "text-xl transition-all duration-500",
-              animationPhase % 2 === 0 ? "text-cyan-400 scale-110" : "text-cyan-300"
-            )}>
-              {currentSpinner}
-            </span>
-
-            {/* Status text - first line */}
-            <div className="flex-1">
-              <div className="flex items-center gap-2">
-                <span className="font-medium text-sm">{statusText}...</span>
-                <span className="text-gray-400 text-sm">({elapsedTime}s)</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Interrupt button */}
-        {canInterrupt && onAbort && (
-          <button
-            type="button"
-            onClick={onAbort}
-            className="ml-3 text-xs bg-red-600 hover:bg-red-700 text-white px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md transition-colors flex items-center gap-1.5 flex-shrink-0"
-          >
-            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-            </svg>
-            <span className="hidden sm:inline">Stop</span>
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default GeminiStatus;
--- a/src/components/LanguageSelector.jsx
+++ b/src/components/LanguageSelector.jsx
@@ -1,74 +0,0 @@
-/**
- * Language Selector Component
- *
- * A dropdown component for selecting the application language.
- * Automatically updates the i18n language and persists to localStorage.
- *
- * Props:
- * @param {boolean} compact - If true, uses compact style (default: false)
- */
-
-import { useTranslation } from 'react-i18next';
-import { Languages } from 'lucide-react';
-import { languages } from '../i18n/languages';
-
-function LanguageSelector({ compact = false }) {
-  const { i18n, t } = useTranslation('settings');
-
-  const handleLanguageChange = (event) => {
-    const newLanguage = event.target.value;
-    i18n.changeLanguage(newLanguage);
-  };
-
-  // Compact style for QuickSettingsPanel
-  if (compact) {
-    return (
-      <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-        <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-          <Languages className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-          {t('account.language')}
-        </span>
-        <select
-          value={i18n.language}
-          onChange={handleLanguageChange}
-          className="w-[100px] text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
-        >
-          {languages.map((lang) => (
-            <option key={lang.value} value={lang.value}>
-              {lang.nativeName}
-            </option>
-          ))}
-        </select>
-      </div>
-    );
-  }
-
-  // Full style for Settings page
-  return (
-    <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <div className="font-medium text-gray-900 dark:text-gray-100 mb-1">
-            {t('account.languageLabel')}
-          </div>
-          <div className="text-sm text-gray-600 dark:text-gray-400">
-            {t('account.languageDescription')}
-          </div>
-        </div>
-        <select
-          value={i18n.language}
-          onChange={handleLanguageChange}
-          className="text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2 w-36"
-        >
-          {languages.map((lang) => (
-            <option key={lang.value} value={lang.value}>
-              {lang.nativeName}
-            </option>
-          ))}
-        </select>
-      </div>
-    </div>
-  );
-}
-
-export default LanguageSelector;
--- a/src/components/LoginForm.jsx
+++ b/src/components/LoginForm.jsx
@@ -1,112 +0,0 @@
-import React, { useState } from 'react';
-import { useAuth } from '../contexts/AuthContext';
-import { MessageSquare } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-
-const LoginForm = () => {
-  const { t } = useTranslation('auth');
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-
-  const { login } = useAuth();
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError('');
-
-    if (!username || !password) {
-      setError(t('errors.requiredFields'));
-      return;
-    }
-
-    setIsLoading(true);
-
-    const result = await login(username, password);
-
-    if (!result.success) {
-      setError(result.error);
-    }
-
-    setIsLoading(false);
-  };
-
-  return (
-    <div className="min-h-screen bg-background flex items-center justify-center p-4">
-      <div className="w-full max-w-md">
-        <div className="bg-card rounded-lg shadow-lg border border-border p-8 space-y-6">
-          {/* Logo and Title */}
-          <div className="text-center">
-            <div className="flex justify-center mb-4">
-              <div className="w-16 h-16 bg-primary rounded-lg flex items-center justify-center shadow-sm">
-                <MessageSquare className="w-8 h-8 text-primary-foreground" />
-              </div>
-            </div>
-            <h1 className="text-2xl font-bold text-foreground">{t('login.title')}</h1>
-            <p className="text-muted-foreground mt-2">
-              {t('login.description')}
-            </p>
-          </div>
-
-          {/* Login Form */}
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label htmlFor="username" className="block text-sm font-medium text-foreground mb-1">
-                {t('login.username')}
-              </label>
-              <input
-                type="text"
-                id="username"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder={t('login.placeholders.username')}
-                required
-                disabled={isLoading}
-              />
-            </div>
-
-            <div>
-              <label htmlFor="password" className="block text-sm font-medium text-foreground mb-1">
-                {t('login.password')}
-              </label>
-              <input
-                type="password"
-                id="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder={t('login.placeholders.password')}
-                required
-                disabled={isLoading}
-              />
-            </div>
-
-            {error && (
-              <div className="p-3 bg-red-100 dark:bg-red-900/20 border border-red-300 dark:border-red-800 rounded-md">
-                <p className="text-sm text-red-700 dark:text-red-400">{error}</p>
-              </div>
-            )}
-
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200"
-            >
-              {isLoading ? t('login.loading') : t('login.submit')}
-            </button>
-          </form>
-
-          <div className="text-center">
-            <p className="text-sm text-muted-foreground">
-              Enter your credentials to access Claude Code UI
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LoginForm;
--- a/src/components/LoginModal.jsx
+++ b/src/components/LoginModal.jsx
@@ -1,153 +0,0 @@
-import { X, ExternalLink, KeyRound } from 'lucide-react';
-import StandaloneShell from './standalone-shell/view/StandaloneShell';
-import { IS_PLATFORM } from '../constants/config';
-
-/**
- * Reusable login modal component for Claude, Cursor, Codex, and Gemini CLI authentication
- *
- * @param {Object} props
- * @param {boolean} props.isOpen - Whether the modal is visible
- * @param {Function} props.onClose - Callback when modal is closed
- * @param {'claude'|'cursor'|'codex'|'gemini'} props.provider - Which CLI provider to authenticate with
- * @param {Object} props.project - Project object containing name and path information
- * @param {Function} props.onComplete - Callback when login process completes (receives exitCode)
- * @param {string} props.customCommand - Optional custom command to override defaults
- * @param {boolean} props.isAuthenticated - Whether user is already authenticated (for re-auth flow)
- */
-function LoginModal({
-  isOpen,
-  onClose,
-  provider = 'claude',
-  project,
-  onComplete,
-  customCommand,
-  isAuthenticated = false,
-  isOnboarding = false
-}) {
-  if (!isOpen) return null;
-
-  const getCommand = () => {
-    if (customCommand) return customCommand;
-
-    switch (provider) {
-      case 'claude':
-        return isAuthenticated ? 'claude setup-token --dangerously-skip-permissions' : isOnboarding ? 'claude /exit --dangerously-skip-permissions' : 'claude /login --dangerously-skip-permissions';
-      case 'cursor':
-        return 'cursor-agent login';
-      case 'codex':
-        return IS_PLATFORM ? 'codex login --device-auth' : 'codex login';
-      case 'gemini':
-        // No explicit interactive login command for gemini CLI exists yet similar to Claude, so we'll just check status or instruct the user to configure `.gemini.json`
-        return 'gemini status';
-      default:
-        return isAuthenticated ? 'claude setup-token --dangerously-skip-permissions' : isOnboarding ? 'claude /exit --dangerously-skip-permissions' : 'claude /login --dangerously-skip-permissions';
-    }
-  };
-
-  const getTitle = () => {
-    switch (provider) {
-      case 'claude':
-        return 'Claude CLI Login';
-      case 'cursor':
-        return 'Cursor CLI Login';
-      case 'codex':
-        return 'Codex CLI Login';
-      case 'gemini':
-        return 'Gemini CLI Configuration';
-      default:
-        return 'CLI Login';
-    }
-  };
-
-  const handleComplete = (exitCode) => {
-    if (onComplete) {
-      onComplete(exitCode);
-    }
-    // Keep modal open so users can read login output and close explicitly.
-  };
-
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[9999] max-md:items-stretch max-md:justify-stretch">
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-4xl h-3/4 flex flex-col md:max-w-4xl md:h-3/4 md:rounded-lg md:m-4 max-md:max-w-none max-md:h-full max-md:rounded-none max-md:m-0">
-        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-            {getTitle()}
-          </h3>
-          <button
-            onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
-            aria-label="Close login modal"
-          >
-            <X className="w-6 h-6" />
-          </button>
-        </div>
-        <div className="flex-1 overflow-hidden">
-          {provider === 'gemini' ? (
-            <div className="flex flex-col items-center justify-center h-full p-8 text-center bg-gray-50 dark:bg-gray-900/50">
-              <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mb-6">
-                <KeyRound className="w-8 h-8 text-blue-600 dark:text-blue-400" />
-              </div>
-
-              <h4 className="text-xl font-medium text-gray-900 dark:text-white mb-3">
-                Setup Gemini API Access
-              </h4>
-
-              <p className="text-gray-600 dark:text-gray-400 max-w-md mb-8">
-                The Gemini CLI requires an API key to function. Unlike Claude, you'll need to configure this directly in your terminal first.
-              </p>
-
-              <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 max-w-lg w-full text-left shadow-sm">
-                <ol className="space-y-4">
-                  <li className="flex gap-4">
-                    <div className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 flex items-center justify-center text-sm font-medium">
-                      1
-                    </div>
-                    <div>
-                      <p className="text-sm font-medium text-gray-900 dark:text-white mb-1">Get your API Key</p>
-                      <a
-                        href="https://aistudio.google.com/app/apikey"
-                        target="_blank"
-                        rel="noreferrer"
-                        className="text-sm text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1 inline-flex"
-                      >
-                        Google AI Studio <ExternalLink className="w-3 h-3" />
-                      </a>
-                    </div>
-                  </li>
-                  <li className="flex gap-4">
-                    <div className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 flex items-center justify-center text-sm font-medium">
-                      2
-                    </div>
-                    <div>
-                      <p className="text-sm font-medium text-gray-900 dark:text-white mb-1">Run configuration</p>
-                      <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">Open your terminal and run:</p>
-                      <code className="block bg-gray-100 dark:bg-gray-900 px-3 py-2 rounded text-sm text-pink-600 dark:text-pink-400 font-mono">
-                        gemini config set api_key YOUR_KEY
-                      </code>
-                    </div>
-                  </li>
-                </ol>
-              </div>
-
-              <button
-                onClick={onClose}
-                className="mt-8 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors"
-              >
-                Done
-              </button>
-            </div>
-          ) : (
-            <StandaloneShell
-              project={project}
-              command={getCommand()}
-              onComplete={handleComplete}
-              minimal={true}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default LoginModal;
--- a/src/components/MobileNav.jsx
+++ b/src/components/MobileNav.jsx
@@ -1,90 +0,0 @@
-import React from 'react';
-import { MessageSquare, Folder, Terminal, GitBranch, ClipboardCheck } from 'lucide-react';
-import { useTasksSettings } from '../contexts/TasksSettingsContext';
-import { useTaskMaster } from '../contexts/TaskMasterContext';
-
-function MobileNav({ activeTab, setActiveTab, isInputFocused }) {
-  const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings();
-  const shouldShowTasksTab = Boolean(tasksEnabled && isTaskMasterInstalled);
-
-  const navItems = [
-    {
-      id: 'chat',
-      icon: MessageSquare,
-      label: 'Chat',
-      onClick: () => setActiveTab('chat')
-    },
-    {
-      id: 'shell',
-      icon: Terminal,
-      label: 'Shell',
-      onClick: () => setActiveTab('shell')
-    },
-    {
-      id: 'files',
-      icon: Folder,
-      label: 'Files',
-      onClick: () => setActiveTab('files')
-    },
-    {
-      id: 'git',
-      icon: GitBranch,
-      label: 'Git',
-      onClick: () => setActiveTab('git')
-    },
-    ...(shouldShowTasksTab ? [{
-      id: 'tasks',
-      icon: ClipboardCheck,
-      label: 'Tasks',
-      onClick: () => setActiveTab('tasks')
-    }] : [])
-  ];
-
-  return (
-    <div
-      className={`fixed bottom-0 left-0 right-0 z-50 px-3 pb-[max(8px,env(safe-area-inset-bottom))] transform transition-transform duration-300 ease-in-out ${
-        isInputFocused ? 'translate-y-full' : 'translate-y-0'
-      }`}
-    >
-      <div className="nav-glass mobile-nav-float rounded-2xl border border-border/30">
-        <div className="flex items-center justify-around px-1 py-1.5 gap-0.5">
-          {navItems.map((item) => {
-            const Icon = item.icon;
-            const isActive = activeTab === item.id;
-
-            return (
-              <button
-                key={item.id}
-                onClick={item.onClick}
-                onTouchStart={(e) => {
-                  e.preventDefault();
-                  item.onClick();
-                }}
-                className={`flex flex-col items-center justify-center gap-0.5 px-3 py-2 rounded-xl flex-1 relative touch-manipulation transition-all duration-200 active:scale-95 ${
-                  isActive
-                    ? 'text-primary'
-                    : 'text-muted-foreground hover:text-foreground'
-                }`}
-                aria-label={item.label}
-                aria-current={isActive ? 'page' : undefined}
-              >
-                {isActive && (
-                  <div className="absolute inset-0 bg-primary/8 dark:bg-primary/12 rounded-xl" />
-                )}
-                <Icon
-                  className={`relative z-10 transition-all duration-200 ${isActive ? 'w-5 h-5' : 'w-[18px] h-[18px]'}`}
-                  strokeWidth={isActive ? 2.4 : 1.8}
-                />
-                <span className={`relative z-10 text-[10px] font-medium transition-all duration-200 ${isActive ? 'opacity-100' : 'opacity-60'}`}>
-                  {item.label}
-                </span>
-              </button>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default MobileNav;
--- a/src/components/NextTaskBanner.jsx
+++ b/src/components/NextTaskBanner.jsx
@@ -1,695 +0,0 @@
-import React, { useState } from 'react';
-import { ArrowRight, List, Clock, Flag, CheckCircle, Circle, AlertCircle, Pause, ChevronDown, ChevronUp, Plus, FileText, Settings, X, Terminal, Eye, Play, Zap, Target } from 'lucide-react';
-import { cn } from '../lib/utils';
-import { useTaskMaster } from '../contexts/TaskMasterContext';
-import { api } from '../utils/api';
-import Shell from './shell/view/Shell';
-import TaskDetail from './TaskDetail';
-
-const NextTaskBanner = ({ onShowAllTasks, onStartTask, className = '' }) => {
-  const { nextTask, tasks, currentProject, isLoadingTasks, projectTaskMaster, refreshTasks, refreshProjects } = useTaskMaster();
-  const [showDetails, setShowDetails] = useState(false);
-  const [showTaskOptions, setShowTaskOptions] = useState(false);
-  const [showCreateTaskModal, setShowCreateTaskModal] = useState(false);
-  const [showTemplateSelector, setShowTemplateSelector] = useState(false);
-  const [showCLI, setShowCLI] = useState(false);
-  const [showTaskDetail, setShowTaskDetail] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  // Handler functions
-  const handleInitializeTaskMaster = async () => {
-    if (!currentProject) return;
-    
-    setIsLoading(true);
-    try {
-      const response = await api.taskmaster.init(currentProject.name);
-      if (response.ok) {
-        await refreshProjects();
-        setShowTaskOptions(false);
-      } else {
-        const error = await response.json();
-        console.error('Failed to initialize TaskMaster:', error);
-        alert(`Failed to initialize TaskMaster: ${error.message}`);
-      }
-    } catch (error) {
-      console.error('Error initializing TaskMaster:', error);
-      alert('Error initializing TaskMaster. Please try again.');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCreateManualTask = () => {
-    setShowCreateTaskModal(true);
-    setShowTaskOptions(false);
-  };
-
-  const handleParsePRD = () => {
-    setShowTemplateSelector(true);
-    setShowTaskOptions(false);
-  };
-
-  // Don't show if no project or still loading
-  if (!currentProject || isLoadingTasks) {
-    return null;
-  }
-
-  let bannerContent;
-
-  // Show setup message only if no tasks exist AND TaskMaster is not configured
-  if ((!tasks || tasks.length === 0) && !projectTaskMaster?.hasTaskmaster) {
-    bannerContent = (
-      <div className={cn(
-        'bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg p-3 mb-4',
-        className
-      )}>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <List className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-            <div>
-              <div className="text-sm font-medium text-gray-900 dark:text-white">
-                TaskMaster AI is not configured
-              </div>
-              <div className="text-xs text-gray-600 dark:text-gray-400 mt-0.5">
-              </div>
-            </div>
-          </div>
-          <div className="flex items-center gap-1">
-            <button
-              onClick={() => setShowTaskOptions(!showTaskOptions)}
-              className="text-xs px-2 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors flex items-center gap-1"
-            >
-              <Settings className="w-3 h-3" />
-              Initialize TaskMaster AI
-            </button>
-          </div>
-        </div>
-        
-        {showTaskOptions && (
-          <div className="mt-3 pt-3 border-t border-blue-200 dark:border-blue-800">
-            {!projectTaskMaster?.hasTaskmaster && (
-              <div className="mb-3 p-3 bg-blue-50 dark:bg-blue-900/50 rounded-lg">
-                <h4 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">
-                  🎯 What is TaskMaster?
-                </h4>
-                <div className="text-xs text-blue-800 dark:text-blue-200 space-y-1">
-                  <p>• <strong>AI-Powered Task Management:</strong> Break complex projects into manageable subtasks</p>
-                  <p>• <strong>PRD Templates:</strong> Generate tasks from Product Requirements Documents</p>
-                  <p>• <strong>Dependency Tracking:</strong> Understand task relationships and execution order</p>
-                  <p>• <strong>Progress Visualization:</strong> Kanban boards and detailed task analytics</p>
-                  <p>• <strong>CLI Integration:</strong> Use taskmaster commands for advanced workflows</p>
-                </div>
-              </div>
-            )}
-            <div className="flex flex-col gap-2">
-              {!projectTaskMaster?.hasTaskmaster ? (
-                <button
-                  className="text-xs px-3 py-2 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-200 rounded transition-colors text-left flex items-center gap-2"
-                  onClick={() => setShowCLI(true)}
-                >
-                  <Terminal className="w-3 h-3" />
-                  Initialize TaskMaster
-                </button>
-              ) : (
-                <>
-                  <div className="mb-2 p-2 bg-green-50 dark:bg-green-900/30 rounded text-xs text-green-800 dark:text-green-200">
-                    <strong>Add more tasks:</strong> Create additional tasks manually or generate them from a PRD template
-                  </div>
-                  <button
-                    className="text-xs px-3 py-2 bg-green-100 dark:bg-green-900 hover:bg-green-200 dark:hover:bg-green-800 text-green-800 dark:text-green-200 rounded transition-colors text-left flex items-center gap-2 disabled:opacity-50"
-                    onClick={handleCreateManualTask}
-                    disabled={isLoading}
-                  >
-                    <Plus className="w-3 h-3" />
-                    Create a new task manually
-                  </button>
-                  <button
-                    className="text-xs px-3 py-2 bg-purple-100 dark:bg-purple-900 hover:bg-purple-200 dark:hover:bg-purple-800 text-purple-800 dark:text-purple-200 rounded transition-colors text-left flex items-center gap-2 disabled:opacity-50"
-                    onClick={handleParsePRD}
-                    disabled={isLoading}
-                  >
-                    <FileText className="w-3 h-3" />
-                    {isLoading ? 'Parsing...' : 'Generate tasks from PRD template'}
-                  </button>
-                </>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  } else if (nextTask) {
-    // Show next task if available
-    bannerContent = (
-      <div className={cn(
-        'bg-slate-50 dark:bg-slate-900/30 border border-slate-200 dark:border-slate-700 rounded-lg p-3 mb-4',
-        className
-      )}>
-        <div className="flex items-center justify-between gap-3">
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 mb-1">
-              <div className="w-5 h-5 bg-blue-100 dark:bg-blue-900/50 rounded-full flex items-center justify-center flex-shrink-0">
-                <Target className="w-3 h-3 text-blue-600 dark:text-blue-400" />
-              </div>
-              <span className="text-xs text-slate-600 dark:text-slate-400 font-medium">Task {nextTask.id}</span>
-              {nextTask.priority === 'high' && (
-                <div className="w-4 h-4 rounded bg-red-100 dark:bg-red-900/50 flex items-center justify-center" title="High Priority">
-                  <Zap className="w-2.5 h-2.5 text-red-600 dark:text-red-400" />
-                </div>
-              )}
-              {nextTask.priority === 'medium' && (
-                <div className="w-4 h-4 rounded bg-amber-100 dark:bg-amber-900/50 flex items-center justify-center" title="Medium Priority">
-                  <Flag className="w-2.5 h-2.5 text-amber-600 dark:text-amber-400" />
-                </div>
-              )}
-              {nextTask.priority === 'low' && (
-                <div className="w-4 h-4 rounded bg-gray-100 dark:bg-gray-800 flex items-center justify-center" title="Low Priority">
-                  <Circle className="w-2.5 h-2.5 text-gray-400 dark:text-gray-500" />
-                </div>
-              )}
-            </div>
-            <p className="text-sm font-medium text-slate-900 dark:text-slate-100 line-clamp-1">
-              {nextTask.title}
-            </p>
-          </div>
-          
-          <div className="flex items-center gap-1 flex-shrink-0">
-            <button
-              onClick={() => onStartTask?.()}
-              className="text-xs px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-md font-medium transition-colors shadow-sm flex items-center gap-1"
-            >
-              <Play className="w-3 h-3" />
-              Start Task
-            </button>
-            <button
-              onClick={() => setShowTaskDetail(true)}
-              className="text-xs px-2 py-1.5 border border-slate-300 dark:border-slate-600 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300 rounded-md transition-colors flex items-center gap-1"
-              title="View task details"
-            >
-              <Eye className="w-3 h-3" />
-            </button>
-            {onShowAllTasks && (
-              <button
-                onClick={onShowAllTasks}
-                className="text-xs px-2 py-1.5 border border-slate-300 dark:border-slate-600 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300 rounded-md transition-colors flex items-center gap-1"
-                title="View all tasks"
-              >
-                <List className="w-3 h-3" />
-              </button>
-            )}
-          </div>
-        </div>
-        
-      </div>
-    );
-  } else if (tasks && tasks.length > 0) {
-    // Show completion message only if there are tasks and all are done
-    const completedTasks = tasks.filter(task => task.status === 'done').length;
-    const totalTasks = tasks.length;
-    
-    bannerContent = (
-    <div className={cn(
-      'bg-purple-50 dark:bg-purple-950 border border-purple-200 dark:border-purple-800 rounded-lg p-3 mb-4',
-      className
-    )}>
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <CheckCircle className="w-4 h-4 text-purple-600 dark:text-purple-400" />
-          <span className="text-sm font-medium text-gray-900 dark:text-white">
-            {completedTasks === totalTasks ? "All done! 🎉" : "No pending tasks"}
-          </span>
-        </div>
-        <div className="flex items-center gap-2">
-          <span className="text-xs text-gray-600 dark:text-gray-400">
-            {completedTasks}/{totalTasks}
-          </span>
-          <button
-            onClick={onShowAllTasks}
-            className="text-xs px-2 py-1 bg-purple-600 hover:bg-purple-700 text-white rounded transition-colors"
-          >
-            Review
-          </button>
-        </div>
-      </div>
-    </div>
-    );
-  } else {
-    // TaskMaster is configured but no tasks exist - don't show anything in chat
-    bannerContent = null;
-  }
-
-  return (
-    <>
-      {bannerContent}
-      
-      {/* Create Task Modal */}
-      {showCreateTaskModal && (
-        <CreateTaskModal
-          currentProject={currentProject}
-          onClose={() => setShowCreateTaskModal(false)}
-          onTaskCreated={() => {
-            refreshTasks();
-            setShowCreateTaskModal(false);
-          }}
-        />
-      )}
-      
-      {/* Template Selector Modal */}
-      {showTemplateSelector && (
-        <TemplateSelector
-          currentProject={currentProject}
-          onClose={() => setShowTemplateSelector(false)}
-          onTemplateApplied={() => {
-            refreshTasks();
-            setShowTemplateSelector(false);
-          }}
-        />
-      )}
-      
-      {/* TaskMaster CLI Setup Modal */}
-      {showCLI && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
-          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 w-full max-w-4xl h-[600px] flex flex-col">
-            {/* Modal Header */}
-            <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-              <div className="flex items-center gap-3">
-                <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
-                  <Terminal className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-                </div>
-                <div>
-                  <h2 className="text-lg font-semibold text-gray-900 dark:text-white">TaskMaster Setup</h2>
-                  <p className="text-sm text-gray-500 dark:text-gray-400">Interactive CLI for {currentProject?.displayName}</p>
-                </div>
-              </div>
-              <button
-                onClick={() => setShowCLI(false)}
-                className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
-              >
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-            
-            {/* Terminal Container */}
-            <div className="flex-1 p-4">
-              <div className="h-full bg-black rounded-lg overflow-hidden">
-                <Shell 
-                  selectedProject={currentProject}
-                  selectedSession={null}
-                  isActive={true}
-                  initialCommand="npx task-master init"
-                  isPlainShell={true}
-                />
-              </div>
-            </div>
-            
-            {/* Modal Footer */}
-            <div className="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
-              <div className="flex items-center justify-between">
-                <div className="text-sm text-gray-600 dark:text-gray-400">
-                  TaskMaster initialization will start automatically
-                </div>
-                <button
-                  onClick={() => setShowCLI(false)}
-                  className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
-                >
-                  Close
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Task Detail Modal */}
-      {showTaskDetail && nextTask && (
-        <TaskDetail
-          task={nextTask}
-          isOpen={showTaskDetail}
-          onClose={() => setShowTaskDetail(false)}
-          onStatusChange={() => refreshTasks?.()}
-          onTaskClick={null} // Disable dependency navigation in NextTaskBanner for now
-        />
-      )}
-    </>
-  );
-};
-
-// Simple Create Task Modal Component
-const CreateTaskModal = ({ currentProject, onClose, onTaskCreated }) => {
-  const [formData, setFormData] = useState({
-    title: '',
-    description: '',
-    priority: 'medium',
-    useAI: false,
-    prompt: ''
-  });
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!currentProject) return;
-
-    setIsSubmitting(true);
-    try {
-      const taskData = formData.useAI 
-        ? { prompt: formData.prompt, priority: formData.priority }
-        : { title: formData.title, description: formData.description, priority: formData.priority };
-
-      const response = await api.taskmaster.addTask(currentProject.name, taskData);
-      
-      if (response.ok) {
-        onTaskCreated();
-      } else {
-        const error = await response.json();
-        console.error('Failed to create task:', error);
-        alert(`Failed to create task: ${error.message}`);
-      }
-    } catch (error) {
-      console.error('Error creating task:', error);
-      alert('Error creating task. Please try again.');
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md">
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Create New Task</h3>
-          <button
-            onClick={onClose}
-            className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded"
-          >
-            <X className="w-4 h-4" />
-          </button>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-              <input
-                type="checkbox"
-                checked={formData.useAI}
-                onChange={(e) => setFormData(prev => ({ ...prev, useAI: e.target.checked }))}
-              />
-              Use AI to generate task details
-            </label>
-          </div>
-
-          {formData.useAI ? (
-            <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Task Description (AI will generate details)
-              </label>
-              <textarea
-                value={formData.prompt}
-                onChange={(e) => setFormData(prev => ({ ...prev, prompt: e.target.value }))}
-                className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-                rows="3"
-                placeholder="Describe what you want to accomplish..."
-                required
-              />
-            </div>
-          ) : (
-            <>
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  Task Title
-                </label>
-                <input
-                  type="text"
-                  value={formData.title}
-                  onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
-                  className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-                  placeholder="Enter task title..."
-                  required
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  Description
-                </label>
-                <textarea
-                  value={formData.description}
-                  onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
-                  className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-                  rows="3"
-                  placeholder="Describe the task..."
-                  required
-                />
-              </div>
-            </>
-          )}
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-              Priority
-            </label>
-            <select
-              value={formData.priority}
-              onChange={(e) => setFormData(prev => ({ ...prev, priority: e.target.value }))}
-              className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-            >
-              <option value="low">Low</option>
-              <option value="medium">Medium</option>
-              <option value="high">High</option>
-            </select>
-          </div>
-
-          <div className="flex gap-2 pt-4">
-            <button
-              type="button"
-              onClick={onClose}
-              className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
-              disabled={isSubmitting}
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded disabled:opacity-50"
-              disabled={isSubmitting || (formData.useAI && !formData.prompt.trim()) || (!formData.useAI && (!formData.title.trim() || !formData.description.trim()))}
-            >
-              {isSubmitting ? 'Creating...' : 'Create Task'}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};
-
-// Template Selector Modal Component
-const TemplateSelector = ({ currentProject, onClose, onTemplateApplied }) => {
-  const [templates, setTemplates] = useState([]);
-  const [selectedTemplate, setSelectedTemplate] = useState(null);
-  const [customizations, setCustomizations] = useState({});
-  const [fileName, setFileName] = useState('prd.txt');
-  const [isLoading, setIsLoading] = useState(true);
-  const [isApplying, setIsApplying] = useState(false);
-  const [step, setStep] = useState('select'); // 'select', 'customize', 'generate'
-
-  useEffect(() => {
-    const loadTemplates = async () => {
-      try {
-        const response = await api.taskmaster.getTemplates();
-        if (response.ok) {
-          const data = await response.json();
-          setTemplates(data.templates);
-        }
-      } catch (error) {
-        console.error('Error loading templates:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    
-    loadTemplates();
-  }, []);
-
-  const handleSelectTemplate = (template) => {
-    setSelectedTemplate(template);
-    // Find placeholders in template content
-    const placeholders = template.content.match(/\[([^\]]+)\]/g) || [];
-    const uniquePlaceholders = [...new Set(placeholders.map(p => p.slice(1, -1)))];
-    
-    const initialCustomizations = {};
-    uniquePlaceholders.forEach(placeholder => {
-      initialCustomizations[placeholder] = '';
-    });
-    
-    setCustomizations(initialCustomizations);
-    setStep('customize');
-  };
-
-  const handleApplyTemplate = async () => {
-    if (!selectedTemplate || !currentProject) return;
-
-    setIsApplying(true);
-    try {
-      // Apply template
-      const applyResponse = await api.taskmaster.applyTemplate(currentProject.name, {
-        templateId: selectedTemplate.id,
-        fileName,
-        customizations
-      });
-
-      if (!applyResponse.ok) {
-        const error = await applyResponse.json();
-        throw new Error(error.message || 'Failed to apply template');
-      }
-
-      // Parse PRD to generate tasks
-      const parseResponse = await api.taskmaster.parsePRD(currentProject.name, {
-        fileName,
-        numTasks: 10
-      });
-
-      if (!parseResponse.ok) {
-        const error = await parseResponse.json();
-        throw new Error(error.message || 'Failed to generate tasks');
-      }
-
-      setStep('generate');
-      setTimeout(() => {
-        onTemplateApplied();
-      }, 2000);
-
-    } catch (error) {
-      console.error('Error applying template:', error);
-      alert(`Error: ${error.message}`);
-      setIsApplying(false);
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-        <div className="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md">
-          <div className="flex items-center gap-3">
-            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
-            <span className="text-gray-900 dark:text-white">Loading templates...</span>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto">
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-            {step === 'select' ? 'Select PRD Template' : 
-             step === 'customize' ? 'Customize Template' : 
-             'Generating Tasks'}
-          </h3>
-          <button
-            onClick={onClose}
-            className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded"
-          >
-            <X className="w-4 h-4" />
-          </button>
-        </div>
-
-        {step === 'select' && (
-          <div className="space-y-3">
-            {templates.map((template) => (
-              <div
-                key={template.id}
-                className="p-4 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors"
-                onClick={() => handleSelectTemplate(template)}
-              >
-                <div className="flex items-start justify-between">
-                  <div className="flex-1">
-                    <h4 className="font-medium text-gray-900 dark:text-white">{template.name}</h4>
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">{template.description}</p>
-                    <span className="inline-block text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded mt-2">
-                      {template.category}
-                    </span>
-                  </div>
-                  <ArrowRight className="w-4 h-4 text-gray-400 mt-1" />
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {step === 'customize' && selectedTemplate && (
-          <div className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                File Name
-              </label>
-              <input
-                type="text"
-                value={fileName}
-                onChange={(e) => setFileName(e.target.value)}
-                className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-                placeholder="prd.txt"
-              />
-            </div>
-
-            {Object.keys(customizations).length > 0 && (
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  Customize Template
-                </label>
-                <div className="space-y-3">
-                  {Object.entries(customizations).map(([key, value]) => (
-                    <div key={key}>
-                      <label className="block text-xs text-gray-600 dark:text-gray-400 mb-1">
-                        {key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}
-                      </label>
-                      <input
-                        type="text"
-                        value={value}
-                        onChange={(e) => setCustomizations(prev => ({ ...prev, [key]: e.target.value }))}
-                        className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-                        placeholder={`Enter ${key.toLowerCase()}`}
-                      />
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            <div className="flex gap-2 pt-4">
-              <button
-                onClick={() => setStep('select')}
-                className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
-              >
-                Back
-              </button>
-              <button
-                onClick={handleApplyTemplate}
-                className="flex-1 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded disabled:opacity-50"
-                disabled={isApplying}
-              >
-                {isApplying ? 'Applying...' : 'Apply & Generate Tasks'}
-              </button>
-            </div>
-          </div>
-        )}
-
-        {step === 'generate' && (
-          <div className="text-center py-8">
-            <div className="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-4">
-              <CheckCircle className="w-8 h-8 text-green-600 dark:text-green-400" />
-            </div>
-            <h4 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
-              Template Applied Successfully!
-            </h4>
-            <p className="text-gray-600 dark:text-gray-400">
-              Your PRD has been created and tasks are being generated...
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default NextTaskBanner;
--- a/src/components/Onboarding.jsx
+++ b/src/components/Onboarding.jsx
@@ -1,567 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { ChevronRight, ChevronLeft, Check, GitBranch, User, Mail, LogIn, ExternalLink, Loader2 } from 'lucide-react';
-import SessionProviderLogo from './llm-logo-provider/SessionProviderLogo';
-import LoginModal from './LoginModal';
-import { authenticatedFetch } from '../utils/api';
-import { useAuth } from '../contexts/AuthContext';
-import { IS_PLATFORM } from '../constants/config';
-
-const Onboarding = ({ onComplete }) => {
-  const [currentStep, setCurrentStep] = useState(0);
-  const [gitName, setGitName] = useState('');
-  const [gitEmail, setGitEmail] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [error, setError] = useState('');
-
-  const [activeLoginProvider, setActiveLoginProvider] = useState(null);
-  const [selectedProject] = useState({ name: 'default', fullPath: IS_PLATFORM ? '/workspace' : '' });
-
-  const [claudeAuthStatus, setClaudeAuthStatus] = useState({
-    authenticated: false,
-    email: null,
-    loading: true,
-    error: null
-  });
-
-  const [cursorAuthStatus, setCursorAuthStatus] = useState({
-    authenticated: false,
-    email: null,
-    loading: true,
-    error: null
-  });
-
-  const [codexAuthStatus, setCodexAuthStatus] = useState({
-    authenticated: false,
-    email: null,
-    loading: true,
-    error: null
-  });
-
-  const [geminiAuthStatus, setGeminiAuthStatus] = useState({
-    authenticated: false,
-    email: null,
-    loading: true,
-    error: null
-  });
-
-  const { user } = useAuth();
-
-  const prevActiveLoginProviderRef = useRef(undefined);
-
-  useEffect(() => {
-    loadGitConfig();
-  }, []);
-
-  const loadGitConfig = async () => {
-    try {
-      const response = await authenticatedFetch('/api/user/git-config');
-      if (response.ok) {
-        const data = await response.json();
-        if (data.gitName) setGitName(data.gitName);
-        if (data.gitEmail) setGitEmail(data.gitEmail);
-      }
-    } catch (error) {
-      console.error('Error loading git config:', error);
-    }
-  };
-
-  useEffect(() => {
-    const prevProvider = prevActiveLoginProviderRef.current;
-    prevActiveLoginProviderRef.current = activeLoginProvider;
-
-    const isInitialMount = prevProvider === undefined;
-    const isModalClosing = prevProvider !== null && activeLoginProvider === null;
-
-    if (isInitialMount || isModalClosing) {
-      checkClaudeAuthStatus();
-      checkCursorAuthStatus();
-      checkCodexAuthStatus();
-      checkGeminiAuthStatus();
-    }
-  }, [activeLoginProvider]);
-
-  const checkProviderAuthStatus = async (provider, setter) => {
-    try {
-      const response = await authenticatedFetch(`/api/cli/${provider}/status`);
-      if (response.ok) {
-        const data = await response.json();
-        setter({
-          authenticated: data.authenticated,
-          email: data.email,
-          loading: false,
-          error: data.error || null
-        });
-      } else {
-        setter({
-          authenticated: false,
-          email: null,
-          loading: false,
-          error: 'Failed to check authentication status'
-        });
-      }
-    } catch (error) {
-      console.error(`Error checking ${provider} auth status:`, error);
-      setter({
-        authenticated: false,
-        email: null,
-        loading: false,
-        error: error.message
-      });
-    }
-  };
-
-  const checkClaudeAuthStatus = () => checkProviderAuthStatus('claude', setClaudeAuthStatus);
-  const checkCursorAuthStatus = () => checkProviderAuthStatus('cursor', setCursorAuthStatus);
-  const checkCodexAuthStatus = () => checkProviderAuthStatus('codex', setCodexAuthStatus);
-  const checkGeminiAuthStatus = () => checkProviderAuthStatus('gemini', setGeminiAuthStatus);
-
-  const handleClaudeLogin = () => setActiveLoginProvider('claude');
-  const handleCursorLogin = () => setActiveLoginProvider('cursor');
-  const handleCodexLogin = () => setActiveLoginProvider('codex');
-  const handleGeminiLogin = () => setActiveLoginProvider('gemini');
-
-  const handleLoginComplete = (exitCode) => {
-    if (exitCode === 0) {
-      if (activeLoginProvider === 'claude') {
-        checkClaudeAuthStatus();
-      } else if (activeLoginProvider === 'cursor') {
-        checkCursorAuthStatus();
-      } else if (activeLoginProvider === 'codex') {
-        checkCodexAuthStatus();
-      } else if (activeLoginProvider === 'gemini') {
-        checkGeminiAuthStatus();
-      }
-    }
-  };
-
-  const handleNextStep = async () => {
-    setError('');
-
-    // Step 0: Git config validation and submission
-    if (currentStep === 0) {
-      if (!gitName.trim() || !gitEmail.trim()) {
-        setError('Both git name and email are required');
-        return;
-      }
-
-      // Validate email format
-      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      if (!emailRegex.test(gitEmail)) {
-        setError('Please enter a valid email address');
-        return;
-      }
-
-      setIsSubmitting(true);
-      try {
-        // Save git config to backend (which will also apply git config --global)
-        const response = await authenticatedFetch('/api/user/git-config', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ gitName, gitEmail })
-        });
-
-        if (!response.ok) {
-          const data = await response.json();
-          throw new Error(data.error || 'Failed to save git configuration');
-        }
-
-        setCurrentStep(currentStep + 1);
-      } catch (err) {
-        setError(err.message);
-      } finally {
-        setIsSubmitting(false);
-      }
-      return;
-    }
-
-    setCurrentStep(currentStep + 1);
-  };
-
-  const handlePrevStep = () => {
-    setError('');
-    setCurrentStep(currentStep - 1);
-  };
-
-  const handleFinish = async () => {
-    setIsSubmitting(true);
-    setError('');
-
-    try {
-      const response = await authenticatedFetch('/api/user/complete-onboarding', {
-        method: 'POST'
-      });
-
-      if (!response.ok) {
-        const data = await response.json();
-        throw new Error(data.error || 'Failed to complete onboarding');
-      }
-
-      if (onComplete) {
-        onComplete();
-      }
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const steps = [
-    {
-      title: 'Git Configuration',
-      description: 'Set up your git identity for commits',
-      icon: GitBranch,
-      required: true
-    },
-    {
-      title: 'Connect Agents',
-      description: 'Connect your AI coding assistants',
-      icon: LogIn,
-      required: false
-    }
-  ];
-
-  const renderStepContent = () => {
-    switch (currentStep) {
-      case 0:
-        return (
-          <div className="space-y-6">
-            <div className="text-center mb-8">
-              <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
-                <GitBranch className="w-8 h-8 text-blue-600 dark:text-blue-400" />
-              </div>
-              <h2 className="text-2xl font-bold text-foreground mb-2">Git Configuration</h2>
-              <p className="text-muted-foreground">
-                Configure your git identity to ensure proper attribution for your commits
-              </p>
-            </div>
-
-            <div className="space-y-4">
-              <div>
-                <label htmlFor="gitName" className="flex items-center gap-2 text-sm font-medium text-foreground mb-2">
-                  <User className="w-4 h-4" />
-                  Git Name <span className="text-red-500">*</span>
-                </label>
-                <input
-                  type="text"
-                  id="gitName"
-                  value={gitName}
-                  onChange={(e) => setGitName(e.target.value)}
-                  className="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                  placeholder="John Doe"
-                  required
-                  disabled={isSubmitting}
-                />
-                <p className="mt-1 text-xs text-muted-foreground">
-                  This will be used as: git config --global user.name
-                </p>
-              </div>
-
-              <div>
-                <label htmlFor="gitEmail" className="flex items-center gap-2 text-sm font-medium text-foreground mb-2">
-                  <Mail className="w-4 h-4" />
-                  Git Email <span className="text-red-500">*</span>
-                </label>
-                <input
-                  type="email"
-                  id="gitEmail"
-                  value={gitEmail}
-                  onChange={(e) => setGitEmail(e.target.value)}
-                  className="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                  placeholder="john@example.com"
-                  required
-                  disabled={isSubmitting}
-                />
-                <p className="mt-1 text-xs text-muted-foreground">
-                  This will be used as: git config --global user.email
-                </p>
-              </div>
-            </div>
-          </div>
-        );
-
-      case 1:
-        return (
-          <div className="space-y-6">
-            <div className="text-center mb-6">
-              <h2 className="text-2xl font-bold text-foreground mb-2">Connect Your AI Agents</h2>
-              <p className="text-muted-foreground">
-                Login to one or more AI coding assistants. All are optional.
-              </p>
-            </div>
-
-            {/* Agent Cards Grid */}
-            <div className="space-y-3">
-              {/* Claude */}
-              <div className={`border rounded-lg p-4 transition-colors ${claudeAuthStatus.authenticated
-                ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
-                : 'border-border bg-card'
-                }`}>
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center">
-                      <SessionProviderLogo provider="claude" className="w-5 h-5" />
-                    </div>
-                    <div>
-                      <div className="font-medium text-foreground flex items-center gap-2">
-                        Claude Code
-                        {claudeAuthStatus.authenticated && <Check className="w-4 h-4 text-green-500" />}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {claudeAuthStatus.loading ? 'Checking...' :
-                          claudeAuthStatus.authenticated ? claudeAuthStatus.email || 'Connected' : 'Not connected'}
-                      </div>
-                    </div>
-                  </div>
-                  {!claudeAuthStatus.authenticated && !claudeAuthStatus.loading && (
-                    <button
-                      onClick={handleClaudeLogin}
-                      className="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-4 rounded-lg transition-colors"
-                    >
-                      Login
-                    </button>
-                  )}
-                </div>
-              </div>
-
-              {/* Cursor */}
-              <div className={`border rounded-lg p-4 transition-colors ${cursorAuthStatus.authenticated
-                ? 'bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800'
-                : 'border-border bg-card'
-                }`}>
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center">
-                      <SessionProviderLogo provider="cursor" className="w-5 h-5" />
-                    </div>
-                    <div>
-                      <div className="font-medium text-foreground flex items-center gap-2">
-                        Cursor
-                        {cursorAuthStatus.authenticated && <Check className="w-4 h-4 text-green-500" />}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {cursorAuthStatus.loading ? 'Checking...' :
-                          cursorAuthStatus.authenticated ? cursorAuthStatus.email || 'Connected' : 'Not connected'}
-                      </div>
-                    </div>
-                  </div>
-                  {!cursorAuthStatus.authenticated && !cursorAuthStatus.loading && (
-                    <button
-                      onClick={handleCursorLogin}
-                      className="bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium py-2 px-4 rounded-lg transition-colors"
-                    >
-                      Login
-                    </button>
-                  )}
-                </div>
-              </div>
-
-              {/* Codex */}
-              <div className={`border rounded-lg p-4 transition-colors ${codexAuthStatus.authenticated
-                ? 'bg-gray-100 dark:bg-gray-800/50 border-gray-300 dark:border-gray-600'
-                : 'border-border bg-card'
-                }`}>
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-                      <SessionProviderLogo provider="codex" className="w-5 h-5" />
-                    </div>
-                    <div>
-                      <div className="font-medium text-foreground flex items-center gap-2">
-                        OpenAI Codex
-                        {codexAuthStatus.authenticated && <Check className="w-4 h-4 text-green-500" />}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {codexAuthStatus.loading ? 'Checking...' :
-                          codexAuthStatus.authenticated ? codexAuthStatus.email || 'Connected' : 'Not connected'}
-                      </div>
-                    </div>
-                  </div>
-                  {!codexAuthStatus.authenticated && !codexAuthStatus.loading && (
-                    <button
-                      onClick={handleCodexLogin}
-                      className="bg-gray-800 hover:bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600 text-white text-sm font-medium py-2 px-4 rounded-lg transition-colors"
-                    >
-                      Login
-                    </button>
-                  )}
-                </div>
-              </div>
-
-              {/* Gemini */}
-              <div className={`border rounded-lg p-4 transition-colors ${geminiAuthStatus.authenticated
-                ? 'bg-teal-50 dark:bg-teal-900/20 border-teal-200 dark:border-teal-800'
-                : 'border-border bg-card'
-                }`}>
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 bg-teal-100 dark:bg-teal-900/30 rounded-full flex items-center justify-center">
-                      <SessionProviderLogo provider="gemini" className="w-5 h-5 text-teal-600 dark:text-teal-400" />
-                    </div>
-                    <div>
-                      <div className="font-medium text-foreground flex items-center gap-2">
-                        Gemini
-                        {geminiAuthStatus.authenticated && <Check className="w-4 h-4 text-green-500" />}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {geminiAuthStatus.loading ? 'Checking...' :
-                          geminiAuthStatus.authenticated ? geminiAuthStatus.email || 'Connected' : 'Not connected'}
-                      </div>
-                    </div>
-                  </div>
-                  {!geminiAuthStatus.authenticated && !geminiAuthStatus.loading && (
-                    <button
-                      onClick={handleGeminiLogin}
-                      className="bg-teal-600 hover:bg-teal-700 text-white text-sm font-medium py-2 px-4 rounded-lg transition-colors"
-                    >
-                      Login
-                    </button>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            <div className="text-center text-sm text-muted-foreground pt-2">
-              <p>You can configure these later in Settings.</p>
-            </div>
-          </div>
-        );
-
-      default:
-        return null;
-    }
-  };
-
-  const isStepValid = () => {
-    switch (currentStep) {
-      case 0:
-        return gitName.trim() && gitEmail.trim() && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(gitEmail);
-      case 1:
-        return true;
-      default:
-        return false;
-    }
-  };
-
-  return (
-    <>
-      <div className="min-h-screen bg-background flex items-center justify-center p-4">
-        <div className="w-full max-w-2xl">
-          {/* Progress Steps */}
-          <div className="mb-8">
-            <div className="flex items-center justify-between">
-              {steps.map((step, index) => (
-                <React.Fragment key={index}>
-                  <div className="flex flex-col items-center flex-1">
-                    <div className={`w-12 h-12 rounded-full flex items-center justify-center border-2 transition-colors duration-200 ${index < currentStep ? 'bg-green-500 border-green-500 text-white' :
-                      index === currentStep ? 'bg-blue-600 border-blue-600 text-white' :
-                        'bg-background border-border text-muted-foreground'
-                      }`}>
-                      {index < currentStep ? (
-                        <Check className="w-6 h-6" />
-                      ) : typeof step.icon === 'function' ? (
-                        <step.icon />
-                      ) : (
-                        <step.icon className="w-6 h-6" />
-                      )}
-                    </div>
-                    <div className="mt-2 text-center">
-                      <p className={`text-sm font-medium ${index === currentStep ? 'text-foreground' : 'text-muted-foreground'
-                        }`}>
-                        {step.title}
-                      </p>
-                      {step.required && (
-                        <span className="text-xs text-red-500">Required</span>
-                      )}
-                    </div>
-                  </div>
-                  {index < steps.length - 1 && (
-                    <div className={`flex-1 h-0.5 mx-2 transition-colors duration-200 ${index < currentStep ? 'bg-green-500' : 'bg-border'
-                      }`} />
-                  )}
-                </React.Fragment>
-              ))}
-            </div>
-          </div>
-
-          {/* Main Card */}
-          <div className="bg-card rounded-lg shadow-lg border border-border p-8">
-            {renderStepContent()}
-
-            {/* Error Message */}
-            {error && (
-              <div className="mt-6 p-4 bg-red-100 dark:bg-red-900/20 border border-red-300 dark:border-red-800 rounded-lg">
-                <p className="text-sm text-red-700 dark:text-red-400">{error}</p>
-              </div>
-            )}
-
-            {/* Navigation Buttons */}
-            <div className="flex items-center justify-between mt-8 pt-6 border-t border-border">
-              <button
-                onClick={handlePrevStep}
-                disabled={currentStep === 0 || isSubmitting}
-                className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
-              >
-                <ChevronLeft className="w-4 h-4" />
-                Previous
-              </button>
-
-              <div className="flex items-center gap-3">
-                {currentStep < steps.length - 1 ? (
-                  <button
-                    onClick={handleNextStep}
-                    disabled={!isStepValid() || isSubmitting}
-                    className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors duration-200"
-                  >
-                    {isSubmitting ? (
-                      <>
-                        <Loader2 className="w-4 h-4 animate-spin" />
-                        Saving...
-                      </>
-                    ) : (
-                      <>
-                        Next
-                        <ChevronRight className="w-4 h-4" />
-                      </>
-                    )}
-                  </button>
-                ) : (
-                  <button
-                    onClick={handleFinish}
-                    disabled={isSubmitting}
-                    className="flex items-center gap-2 px-6 py-3 bg-green-600 hover:bg-green-700 disabled:bg-green-400 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors duration-200"
-                  >
-                    {isSubmitting ? (
-                      <>
-                        <Loader2 className="w-4 h-4 animate-spin" />
-                        Completing...
-                      </>
-                    ) : (
-                      <>
-                        <Check className="w-4 h-4" />
-                        Complete Setup
-                      </>
-                    )}
-                  </button>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {activeLoginProvider && (
-        <LoginModal
-          isOpen={!!activeLoginProvider}
-          onClose={() => setActiveLoginProvider(null)}
-          provider={activeLoginProvider}
-          project={selectedProject}
-          onComplete={handleLoginComplete}
-          isOnboarding={true}
-        />
-      )}
-    </>
-  );
-};
-
-export default Onboarding;
--- a/src/components/PRDEditor.jsx
+++ b/src/components/PRDEditor.jsx
@@ -1,871 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import CodeMirror from '@uiw/react-codemirror';
-import { markdown } from '@codemirror/lang-markdown';
-import { oneDark } from '@codemirror/theme-one-dark';
-import { EditorView } from '@codemirror/view';
-import { X, Save, Download, Maximize2, Minimize2, Eye, FileText, Sparkles, AlertTriangle } from 'lucide-react';
-import { cn } from '../lib/utils';
-import { api, authenticatedFetch } from '../utils/api';
-
-const PRDEditor = ({ 
-  file, 
-  onClose, 
-  projectPath,
-  project, // Add project object
-  initialContent = '',
-  isNewFile = false,
-  onSave
-}) => {
-  const [content, setContent] = useState(initialContent);
-  const [loading, setLoading] = useState(!isNewFile);
-  const [saving, setSaving] = useState(false);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const [isDarkMode, setIsDarkMode] = useState(true);
-  const [saveSuccess, setSaveSuccess] = useState(false);
-  const [previewMode, setPreviewMode] = useState(false);
-  const [wordWrap, setWordWrap] = useState(true); // Default to true for markdown
-  const [fileName, setFileName] = useState('');
-  const [showGenerateModal, setShowGenerateModal] = useState(false);
-  const [showOverwriteConfirm, setShowOverwriteConfirm] = useState(false);
-  const [existingPRDs, setExistingPRDs] = useState([]);
-  
-  const editorRef = useRef(null);
-
-  const PRD_TEMPLATE = `# Product Requirements Document - Example Project
-
-## 1. Overview
-**Product Name:** AI-Powered Task Manager
-**Version:** 1.0
-**Date:** 2024-12-27
-**Author:** Development Team
-
-This document outlines the requirements for building an AI-powered task management application that integrates with development workflows and provides intelligent task breakdown and prioritization.
-
-## 2. Objectives
- Create an intuitive task management system that works seamlessly with developer tools
- Provide AI-powered task generation from high-level requirements
- Enable real-time collaboration and progress tracking
- Integrate with popular development environments (VS Code, Cursor, etc.)
-
-### Success Metrics
- User adoption rate > 80% within development teams
- Task completion rate improvement of 25%
- Time-to-delivery reduction of 15%
-
-## 3. User Stories
-
-### Core Functionality
- As a project manager, I want to create PRDs that automatically generate detailed tasks so I can save time on project planning
- As a developer, I want to see my next task clearly highlighted so I can maintain focus
- As a team lead, I want to track progress across multiple projects so I can provide accurate status updates
- As a developer, I want tasks to be broken down into implementable subtasks so I can work more efficiently
-
-### AI Integration
- As a user, I want to describe a feature in natural language and get detailed implementation tasks so I can start working immediately
- As a project manager, I want the AI to analyze task complexity and suggest appropriate time estimates
- As a developer, I want intelligent task prioritization based on dependencies and deadlines
-
-### Collaboration
- As a team member, I want to see real-time updates when tasks are completed so I can coordinate my work
- As a stakeholder, I want to view project progress through intuitive dashboards
- As a developer, I want to add implementation notes to tasks for future reference
-
-## 4. Functional Requirements
-
-### Task Management
- Create, edit, and delete tasks with rich metadata (priority, status, dependencies, estimates)
- Hierarchical task structure with subtasks and sub-subtasks
- Real-time status updates and progress tracking
- Dependency management with circular dependency detection
- Bulk operations (move, update status, assign)
-
-### AI Features
- Natural language PRD parsing to generate structured tasks
- Intelligent task breakdown with complexity analysis
- Automated subtask generation with implementation details
- Smart dependency suggestion
- Progress prediction based on historical data
-
-### Integration Features
- VS Code/Cursor extension for in-editor task management
- Git integration for linking commits to tasks
- API for third-party tool integration
- Webhook support for external notifications
- CLI tool for command-line task management
-
-### User Interface
- Responsive web application (desktop and mobile)
- Multiple view modes (Kanban, list, calendar)
- Dark/light theme support
- Drag-and-drop task organization
- Advanced filtering and search capabilities
- Keyboard shortcuts for power users
-
-## 5. Technical Requirements
-
-### Frontend
- React.js with TypeScript for type safety
- Modern UI framework (Tailwind CSS)
- State management (Context API or Redux)
- Real-time updates via WebSockets
- Progressive Web App (PWA) support
- Accessibility compliance (WCAG 2.1 AA)
-
-### Backend
- Node.js with Express.js framework
- RESTful API design with OpenAPI documentation
- Real-time communication via Socket.io
- Background job processing
- Rate limiting and security middleware
-
-### AI Integration
- Integration with multiple AI providers (OpenAI, Anthropic, etc.)
- Fallback model support
- Context-aware prompt engineering
- Token usage optimization
- Model response caching
-
-### Database
- Primary: PostgreSQL for relational data
- Cache: Redis for session management and real-time features
- Full-text search capabilities
- Database migrations and seeding
- Backup and recovery procedures
-
-### Infrastructure
- Docker containerization
- Cloud deployment (AWS/GCP/Azure)
- Auto-scaling capabilities
- Monitoring and logging (structured logging)
- CI/CD pipeline with automated testing
-
-## 6. Non-Functional Requirements
-
-### Performance
- Page load time < 2 seconds
- API response time < 500ms for 95% of requests
- Support for 1000+ concurrent users
- Efficient handling of large task lists (10,000+ tasks)
-
-### Security
- JWT-based authentication with refresh tokens
- Role-based access control (RBAC)
- Data encryption at rest and in transit
- Regular security audits and penetration testing
- GDPR and privacy compliance
-
-### Reliability
- 99.9% uptime SLA
- Graceful error handling and recovery
- Data backup every 6 hours with point-in-time recovery
- Disaster recovery plan with RTO < 4 hours
-
-### Scalability
- Horizontal scaling for both frontend and backend
- Database read replicas for query optimization
- CDN for static asset delivery
- Microservices architecture for future expansion
-
-## 7. User Experience Design
-
-### Information Architecture
- Intuitive navigation with breadcrumbs
- Context-aware menus and actions
- Progressive disclosure of complex features
- Consistent design patterns throughout
-
-### Interaction Design
- Smooth animations and transitions
- Immediate feedback for user actions
- Undo/redo functionality for critical operations
- Smart defaults and auto-save features
-
-### Visual Design
- Modern, clean interface with plenty of whitespace
- Consistent color scheme and typography
- Clear visual hierarchy with proper contrast ratios
- Iconography that supports comprehension
-
-## 8. Integration Requirements
-
-### Development Tools
- VS Code extension with task panel and quick actions
- Cursor IDE integration with AI task suggestions
- Terminal CLI for command-line workflow
- Browser extension for web-based tools
-
-### Third-Party Services
- GitHub/GitLab integration for issue sync
- Slack/Discord notifications
- Calendar integration (Google Calendar, Outlook)
- Time tracking tools (Toggl, Harvest)
-
-### APIs and Webhooks
- RESTful API with comprehensive documentation
- GraphQL endpoint for complex queries
- Webhook system for external integrations
- SDK development for major programming languages
-
-## 9. Implementation Phases
-
-### Phase 1: Core MVP (8-10 weeks)
- Basic task management (CRUD operations)
- Simple AI task generation
- Web interface with essential features
- User authentication and basic permissions
-
-### Phase 2: Enhanced Features (6-8 weeks)
- Advanced AI features (complexity analysis, subtask generation)
- Real-time collaboration
- Mobile-responsive design
- Integration with one development tool (VS Code)
-
-### Phase 3: Enterprise Features (4-6 weeks)
- Advanced user management and permissions
- API and webhook system
- Performance optimization
- Comprehensive testing and security audit
-
-### Phase 4: Ecosystem Expansion (4-6 weeks)
- Additional tool integrations
- Mobile app development
- Advanced analytics and reporting
- Third-party marketplace preparation
-
-## 10. Risk Assessment
-
-### Technical Risks
- AI model reliability and cost management
- Real-time synchronization complexity
- Database performance with large datasets
- Integration complexity with multiple tools
-
-### Business Risks
- User adoption in competitive market
- AI provider dependency
- Data privacy and security concerns
- Feature scope creep and timeline delays
-
-### Mitigation Strategies
- Implement robust error handling and fallback systems
- Develop comprehensive testing strategy
- Create detailed documentation and user guides
- Establish clear project scope and change management process
-
-## 11. Success Criteria
-
-### Development Milestones
- Alpha version with core features completed
- Beta version with selected user group feedback
- Production-ready version with full feature set
- Post-launch iterations based on user feedback
-
-### Business Metrics
- User engagement and retention rates
- Task completion and productivity metrics
- Customer satisfaction scores (NPS > 50)
- Revenue targets and subscription growth
-
-## 12. Appendices
-
-### Glossary
- **PRD**: Product Requirements Document
- **AI**: Artificial Intelligence
- **CRUD**: Create, Read, Update, Delete
- **API**: Application Programming Interface
- **CI/CD**: Continuous Integration/Continuous Deployment
-
-### References
- Industry best practices for task management
- AI integration patterns and examples
- Security and compliance requirements
- Performance benchmarking data
-
---
-
-**Document Control:**
- Version: 1.0
- Last Updated: December 27, 2024
- Next Review: January 15, 2025
- Approved By: Product Owner, Technical Lead`;
-
-  // Initialize filename and load content
-  useEffect(() => {
-    const initializeEditor = async () => {
-      // Set initial filename
-      if (file?.name) {
-        setFileName(file.name.replace(/\.(txt|md)$/, '')); // Remove extension for editing
-      } else if (isNewFile) {
-        // Generate default filename based on current date
-        const now = new Date();
-        const dateStr = now.toISOString().split('T')[0]; // YYYY-MM-DD
-        setFileName(`prd-${dateStr}`);
-      }
-
-      // Load content
-      if (isNewFile) {
-        setContent(PRD_TEMPLATE);
-        setLoading(false);
-        return;
-      }
-
-      // If content is directly provided (for existing PRDs loaded from API)
-      if (file.content) {
-        setContent(file.content);
-        setLoading(false);
-        return;
-      }
-
-      // Fallback to loading from file path (legacy support)
-      try {
-        setLoading(true);
-        
-        const response = await api.readFile(file.projectName, file.path);
-        
-        if (!response.ok) {
-          throw new Error(`Failed to load file: ${response.status} ${response.statusText}`);
-        }
-        
-        const data = await response.json();
-        setContent(data.content || PRD_TEMPLATE);
-      } catch (error) {
-        console.error('Error loading PRD file:', error);
-        setContent(`# Error Loading PRD\n\nError: ${error.message}\n\nFile: ${file?.name || 'New PRD'}\nPath: ${file?.path || 'Not saved yet'}\n\n${PRD_TEMPLATE}`);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    initializeEditor();
-  }, [file, projectPath, isNewFile]);
-
-  // Fetch existing PRDs to check for conflicts
-  useEffect(() => {
-    const fetchExistingPRDs = async () => {
-      if (!project?.name) {
-        console.log('No project name available:', project);
-        return;
-      }
-      
-      try {
-        console.log('Fetching PRDs for project:', project.name);
-        const response = await api.get(`/taskmaster/prd/${encodeURIComponent(project.name)}`);
-        if (response.ok) {
-          const data = await response.json();
-          console.log('Fetched existing PRDs:', data.prds);
-          setExistingPRDs(data.prds || []);
-        } else {
-          console.log('Failed to fetch PRDs:', response.status, response.statusText);
-        }
-      } catch (error) {
-        console.error('Error fetching existing PRDs:', error);
-      }
-    };
-
-    fetchExistingPRDs();
-  }, [project?.name]);
-
-  const handleSave = async () => {
-    if (!content.trim()) {
-      alert('Please add content before saving.');
-      return;
-    }
-
-    if (!fileName.trim()) {
-      alert('Please provide a filename for the PRD.');
-      return;
-    }
-
-    // Check if file already exists
-    const fullFileName = fileName.endsWith('.txt') || fileName.endsWith('.md') ? fileName : `${fileName}.txt`;
-    const existingFile = existingPRDs.find(prd => prd.name === fullFileName);
-    
-    console.log('Save check:', {
-      fullFileName,
-      existingPRDs,
-      existingFile,
-      isExisting: file?.isExisting,
-      fileObject: file,
-      shouldShowModal: existingFile && !file?.isExisting
-    });
-    
-    if (existingFile && !file?.isExisting) {
-      console.log('Showing overwrite confirmation modal');
-      // Show confirmation modal for overwrite
-      setShowOverwriteConfirm(true);
-      return;
-    }
-
-    await performSave();
-  };
-
-  const performSave = async () => {
-    setSaving(true);
-    try {
-      // Ensure filename has .txt extension
-      const fullFileName = fileName.endsWith('.txt') || fileName.endsWith('.md') ? fileName : `${fileName}.txt`;
-      
-      const response = await authenticatedFetch(`/api/taskmaster/prd/${encodeURIComponent(project?.name)}`, {
-        method: 'POST',
-        body: JSON.stringify({
-          fileName: fullFileName,
-          content
-        })
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.message || `Save failed: ${response.status}`);
-      }
-      
-      // Show success feedback
-      setSaveSuccess(true);
-      setTimeout(() => setSaveSuccess(false), 2000);
-      
-      // Update existing PRDs list
-      const response2 = await api.get(`/taskmaster/prd/${encodeURIComponent(project.name)}`);
-      if (response2.ok) {
-        const data = await response2.json();
-        setExistingPRDs(data.prds || []);
-      }
-      
-      // Call the onSave callback if provided (for UI updates)
-      if (onSave) {
-        await onSave();
-      }
-      
-    } catch (error) {
-      console.error('Error saving PRD:', error);
-      alert(`Error saving PRD: ${error.message}`);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleDownload = () => {
-    const blob = new Blob([content], { type: 'text/markdown' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    const downloadFileName = fileName ? `${fileName}.txt` : 'prd.txt';
-    a.download = downloadFileName;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
-
-  const handleGenerateTasks = async () => {
-    if (!content.trim()) {
-      alert('Please add content to the PRD before generating tasks.');
-      return;
-    }
-
-    // Show AI-first modal instead of simple confirm
-    setShowGenerateModal(true);
-  };
-
-
-  const toggleFullscreen = () => {
-    setIsFullscreen(!isFullscreen);
-  };
-
-  // Handle keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (e.ctrlKey || e.metaKey) {
-        if (e.key === 's') {
-          e.preventDefault();
-          handleSave();
-        } else if (e.key === 'Escape') {
-          e.preventDefault();
-          onClose();
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [content]);
-
-  // Simple markdown to HTML converter for preview
-  const renderMarkdown = (markdown) => {
-    return markdown
-      .replace(/^### (.*$)/gim, '<h3>$1</h3>')
-      .replace(/^## (.*$)/gim, '<h2>$1</h2>')
-      .replace(/^# (.*$)/gim, '<h1>$1</h1>')
-      .replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
-      .replace(/\*(.*)\*/gim, '<em>$1</em>')
-      .replace(/^\- (.*$)/gim, '<li>$1</li>')
-      .replace(/(<li>.*<\/li>)/gims, '<ul>$1</ul>')
-      .replace(/\n\n/gim, '</p><p>')
-      .replace(/^(?!<[h|u|l])(.*$)/gim, '<p>$1</p>')
-      .replace(/<\/ul>\s*<ul>/gim, '');
-  };
-
-  if (loading) {
-    return (
-      <div className="fixed inset-0 z-[200] md:bg-black/50 md:flex md:items-center md:justify-center">
-        <div className="w-full h-full md:rounded-lg md:w-auto md:h-auto p-8 flex items-center justify-center bg-white dark:bg-gray-900">
-          <div className="flex items-center gap-3">
-            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
-            <span className="text-gray-900 dark:text-white">Loading PRD...</span>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`fixed inset-0 z-[200] ${
-      'md:bg-black/50 md:flex md:items-center md:justify-center md:p-4'
-    } ${isFullscreen ? 'md:p-0' : ''}`}>
-      <div className={cn(
-        'bg-white dark:bg-gray-900 shadow-2xl flex flex-col',
-        'w-full h-full md:rounded-lg md:shadow-2xl',
-        isFullscreen 
-          ? 'md:w-full md:h-full md:rounded-none' 
-          : 'md:w-full md:max-w-6xl md:h-[85vh] md:max-h-[85vh]'
-      )}>
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0 min-w-0">
-          <div className="flex items-center gap-3 min-w-0 flex-1">
-            <div className="w-8 h-8 bg-purple-600 rounded flex items-center justify-center flex-shrink-0">
-              <FileText className="w-4 h-4 text-white" />
-            </div>
-            <div className="min-w-0 flex-1">
-              {/* Mobile: Stack filename and tags vertically for more space */}
-              <div className="flex flex-col sm:flex-row sm:items-center gap-2 min-w-0">
-                {/* Filename input row - full width on mobile */}
-                <div className="flex items-center gap-1 min-w-0 flex-1">
-                  <div className="flex items-center min-w-0 flex-1 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-md px-3 py-2 focus-within:ring-2 focus-within:ring-purple-500 focus-within:border-purple-500 dark:focus-within:ring-purple-400 dark:focus-within:border-purple-400">
-                    <input
-                      type="text"
-                      value={fileName}
-                      onChange={(e) => {
-                        // Remove invalid filename characters
-                        const sanitizedValue = e.target.value.replace(/[<>:"/\\|?*]/g, '');
-                        setFileName(sanitizedValue);
-                      }}
-                      className="font-medium text-gray-900 dark:text-white bg-transparent border-none outline-none min-w-0 flex-1 text-base sm:text-sm placeholder-gray-400 dark:placeholder-gray-500"
-                      placeholder="Enter PRD filename"
-                      maxLength={100}
-                    />
-                    <span className="text-sm sm:text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap ml-1">.txt</span>
-                  </div>
-                  <button
-                    onClick={() => document.querySelector('input[placeholder="Enter PRD filename"]')?.focus()}
-                    className="p-1 text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors"
-                    title="Click to edit filename"
-                  >
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-                    </svg>
-                  </button>
-                </div>
-                
-                {/* Tags row - moves to second line on mobile for more filename space */}
-                <div className="flex items-center gap-2 flex-shrink-0">
-                  <span className="text-xs bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 px-2 py-1 rounded whitespace-nowrap">
-                    📋 PRD
-                  </span>
-                  {isNewFile && (
-                    <span className="text-xs bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300 px-2 py-1 rounded whitespace-nowrap">
-                      ✨ New
-                    </span>
-                  )}
-                </div>
-              </div>
-              
-              {/* Description - smaller on mobile */}
-              <p className="text-xs sm:text-sm text-gray-500 dark:text-gray-400 truncate mt-1">
-                Product Requirements Document
-              </p>
-            </div>
-          </div>
-          
-          <div className="flex items-center gap-1 md:gap-2 flex-shrink-0">
-            <button
-              onClick={() => setPreviewMode(!previewMode)}
-              className={cn(
-                'p-2 md:p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800',
-                'min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center',
-                previewMode 
-                  ? 'text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900' 
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-              )}
-              title={previewMode ? 'Switch to edit mode' : 'Preview markdown'}
-            >
-              <Eye className="w-5 h-5 md:w-4 md:h-4" />
-            </button>
-            
-            <button
-              onClick={() => setWordWrap(!wordWrap)}
-              className={cn(
-                'p-2 md:p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800',
-                'min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center',
-                wordWrap 
-                  ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900' 
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-              )}
-              title={wordWrap ? 'Disable word wrap' : 'Enable word wrap'}
-            >
-              <span className="text-sm md:text-xs font-mono font-bold">↵</span>
-            </button>
-            
-            <button
-              onClick={() => setIsDarkMode(!isDarkMode)}
-              className="p-2 md:p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
-              title="Toggle theme"
-            >
-              <span className="text-lg md:text-base">{isDarkMode ? '☀️' : '🌙'}</span>
-            </button>
-            
-            <button
-              onClick={handleDownload}
-              className="p-2 md:p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
-              title="Download PRD"
-            >
-              <Download className="w-5 h-5 md:w-4 md:h-4" />
-            </button>
-            
-            <button
-              onClick={handleGenerateTasks}
-              disabled={!content.trim()}
-              className={cn(
-                'px-3 py-2 rounded-md disabled:opacity-50 flex items-center gap-2 transition-colors text-sm font-medium',
-                'bg-purple-600 hover:bg-purple-700 text-white',
-                'min-h-[44px] md:min-h-0'
-              )}
-              title="Generate tasks from PRD content"
-            >
-              <Sparkles className="w-4 h-4" />
-              <span className="hidden md:inline">Generate Tasks</span>
-            </button>
-            
-            <button
-              onClick={handleSave}
-              disabled={saving}
-              className={cn(
-                'px-3 py-2 text-white rounded-md disabled:opacity-50 flex items-center gap-2 transition-colors',
-                'min-h-[44px] md:min-h-0',
-                saveSuccess 
-                  ? 'bg-green-600 hover:bg-green-700' 
-                  : 'bg-purple-600 hover:bg-purple-700'
-              )}
-            >
-              {saveSuccess ? (
-                <>
-                  <svg className="w-5 h-5 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                  </svg>
-                  <span className="hidden sm:inline">Saved!</span>
-                </>
-              ) : (
-                <>
-                  <Save className="w-5 h-5 md:w-4 md:h-4" />
-                  <span className="hidden sm:inline">{saving ? 'Saving...' : 'Save PRD'}</span>
-                </>
-              )}
-            </button>
-            
-            <button
-              onClick={toggleFullscreen}
-              className="hidden md:flex p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 items-center justify-center"
-              title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
-            >
-              {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
-            </button>
-            
-            <button
-              onClick={onClose}
-              className="p-2 md:p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
-              title="Close"
-            >
-              <X className="w-6 h-6 md:w-4 md:h-4" />
-            </button>
-          </div>
-        </div>
-
-        {/* Editor/Preview Content */}
-        <div className="flex-1 overflow-hidden">
-          {previewMode ? (
-            <div className="h-full overflow-y-auto p-6 prose prose-gray dark:prose-invert max-w-none">
-              <div 
-                className="markdown-preview"
-                dangerouslySetInnerHTML={{ __html: renderMarkdown(content) }}
-              />
-            </div>
-          ) : (
-            <CodeMirror
-              ref={editorRef}
-              value={content}
-              onChange={setContent}
-              extensions={[
-                markdown(),
-                ...(wordWrap ? [EditorView.lineWrapping] : [])
-              ]}
-              theme={isDarkMode ? oneDark : undefined}
-              height="100%"
-              style={{
-                fontSize: '14px',
-                height: '100%',
-              }}
-              basicSetup={{
-                lineNumbers: true,
-                foldGutter: true,
-                dropCursor: false,
-                allowMultipleSelections: false,
-                indentOnInput: true,
-                bracketMatching: true,
-                closeBrackets: true,
-                autocompletion: true,
-                highlightSelectionMatches: true,
-                searchKeymap: true,
-              }}
-            />
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="flex items-center justify-between p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex-shrink-0">
-          <div className="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
-            <span>Lines: {content.split('\n').length}</span>
-            <span>Characters: {content.length}</span>
-            <span>Words: {content.split(/\s+/).filter(word => word.length > 0).length}</span>
-            <span>Format: Markdown</span>
-          </div>
-          
-          <div className="text-sm text-gray-500 dark:text-gray-400">
-            Press Ctrl+S to save • Esc to close
-          </div>
-        </div>
-      </div>
-
-      {/* Generate Tasks Modal */}
-      {showGenerateModal && (
-        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md border border-gray-200 dark:border-gray-700">
-            {/* Header */}
-            <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
-              <div className="flex items-center gap-3">
-                <div className="w-8 h-8 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center">
-                  <Sparkles className="w-4 h-4 text-purple-600 dark:text-purple-400" />
-                </div>
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Generate Tasks from PRD</h3>
-              </div>
-              <button
-                onClick={() => setShowGenerateModal(false)}
-                className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
-              >
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-
-            {/* Content */}
-            <div className="p-6 space-y-4">
-              {/* AI-First Approach */}
-              <div className="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-4 border border-purple-200 dark:border-purple-800">
-                <div className="flex items-start gap-3">
-                  <div className="w-8 h-8 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
-                    <Sparkles className="w-4 h-4 text-purple-600 dark:text-purple-400" />
-                  </div>
-                  <div className="flex-1">
-                    <h4 className="font-semibold text-purple-900 dark:text-purple-100 mb-2">
-                      💡 Pro Tip: Ask Claude Code Directly!
-                    </h4>
-                    <p className="text-sm text-purple-800 dark:text-purple-200 mb-3">
-                      You can simply ask Claude Code in the chat to parse your PRD and generate tasks. 
-                      The AI assistant will automatically save your PRD and create detailed tasks with implementation details.
-                    </p>
-                    
-                    <div className="bg-white dark:bg-gray-800 rounded border border-purple-200 dark:border-purple-700 p-3 mb-3">
-                      <p className="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">💬 Example:</p>
-                      <p className="text-xs text-gray-900 dark:text-white font-mono">
-                        "I've just initialized a new project with Claude Task Master. I have a PRD at .taskmaster/docs/{fileName.endsWith('.txt') || fileName.endsWith('.md') ? fileName : `${fileName}.txt`}. Can you help me parse it and set up the initial tasks?"
-                      </p>
-                    </div>
-                    
-                    <p className="text-xs text-purple-700 dark:text-purple-300">
-                      <strong>This will:</strong> Save your PRD, analyze its content, and generate structured tasks with subtasks, dependencies, and implementation details.
-                    </p>
-                  </div>
-                </div>
-              </div>
-
-              {/* Learn More Link */}
-              <div className="text-center pt-4 border-t border-gray-200 dark:border-gray-700">
-                <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
-                  For more examples and advanced usage patterns:
-                </p>
-                <a
-                  href="https://github.com/eyaltoledano/claude-task-master/blob/main/docs/examples.md"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-block text-sm text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 underline font-medium"
-                >
-                  View TaskMaster Documentation →
-                </a>
-              </div>
-
-              {/* Footer */}
-              <div className="pt-4">
-                <button
-                  onClick={() => setShowGenerateModal(false)}
-                  className="w-full px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
-                >
-                  Got it, I'll ask Claude Code directly
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Overwrite Confirmation Modal */}
-      {showOverwriteConfirm && (
-        <div className="fixed inset-0 z-[300] flex items-center justify-center p-4">
-          <div className="fixed inset-0 bg-black bg-opacity-50" onClick={() => setShowOverwriteConfirm(false)} />
-          <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full border border-gray-200 dark:border-gray-700">
-            <div className="p-6">
-              <div className="flex items-center mb-4">
-                <div className="p-2 rounded-full mr-3 bg-yellow-100 dark:bg-yellow-900">
-                  <AlertTriangle className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />
-                </div>
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                  File Already Exists
-                </h3>
-              </div>
-              
-              <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
-                A PRD file named "{fileName.endsWith('.txt') || fileName.endsWith('.md') ? fileName : `${fileName}.txt`}" already exists. 
-                Do you want to overwrite it with the current content?
-              </p>
-              
-              <div className="flex justify-end space-x-3">
-                <button
-                  onClick={() => setShowOverwriteConfirm(false)}
-                  className="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={async () => {
-                    setShowOverwriteConfirm(false);
-                    await performSave();
-                  }}
-                  className="px-4 py-2 text-sm text-white bg-yellow-600 hover:bg-yellow-700 rounded-md flex items-center space-x-2 transition-colors"
-                >
-                  <Save className="w-4 h-4" />
-                  <span>Overwrite</span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default PRDEditor;
--- a/src/components/ProjectCreationWizard.jsx
+++ b/src/components/ProjectCreationWizard.jsx
@@ -1,875 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { X, FolderPlus, GitBranch, Key, ChevronRight, ChevronLeft, Check, Loader2, AlertCircle, FolderOpen, Eye, EyeOff, Plus } from 'lucide-react';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { api } from '../utils/api';
-import { useTranslation } from 'react-i18next';
-
-const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
-  const { t } = useTranslation();
-  // Wizard state
-  const [step, setStep] = useState(1); // 1: Choose type, 2: Configure, 3: Confirm
-  const [workspaceType, setWorkspaceType] = useState('existing'); // 'existing' or 'new' - default to 'existing'
-
-  // Form state
-  const [workspacePath, setWorkspacePath] = useState('');
-  const [githubUrl, setGithubUrl] = useState('');
-  const [selectedGithubToken, setSelectedGithubToken] = useState('');
-  const [tokenMode, setTokenMode] = useState('stored'); // 'stored' | 'new' | 'none'
-  const [newGithubToken, setNewGithubToken] = useState('');
-
-  // UI state
-  const [isCreating, setIsCreating] = useState(false);
-  const [error, setError] = useState(null);
-  const [availableTokens, setAvailableTokens] = useState([]);
-  const [loadingTokens, setLoadingTokens] = useState(false);
-  const [pathSuggestions, setPathSuggestions] = useState([]);
-  const [showPathDropdown, setShowPathDropdown] = useState(false);
-  const [showFolderBrowser, setShowFolderBrowser] = useState(false);
-  const [browserCurrentPath, setBrowserCurrentPath] = useState('~');
-  const [browserFolders, setBrowserFolders] = useState([]);
-  const [loadingFolders, setLoadingFolders] = useState(false);
-  const [showHiddenFolders, setShowHiddenFolders] = useState(false);
-  const [showNewFolderInput, setShowNewFolderInput] = useState(false);
-  const [newFolderName, setNewFolderName] = useState('');
-  const [creatingFolder, setCreatingFolder] = useState(false);
-  const [cloneProgress, setCloneProgress] = useState('');
-
-  // Load available GitHub tokens when needed
-  useEffect(() => {
-    if (step === 2 && workspaceType === 'new' && githubUrl) {
-      loadGithubTokens();
-    }
-  }, [step, workspaceType, githubUrl]);
-
-  // Load path suggestions
-  useEffect(() => {
-    if (workspacePath.length > 2) {
-      loadPathSuggestions(workspacePath);
-    } else {
-      setPathSuggestions([]);
-      setShowPathDropdown(false);
-    }
-  }, [workspacePath]);
-
-  const loadGithubTokens = async () => {
-    try {
-      setLoadingTokens(true);
-      const response = await api.get('/settings/credentials?type=github_token');
-      const data = await response.json();
-
-      const activeTokens = (data.credentials || []).filter(t => t.is_active);
-      setAvailableTokens(activeTokens);
-
-      // Auto-select first token if available
-      if (activeTokens.length > 0 && !selectedGithubToken) {
-        setSelectedGithubToken(activeTokens[0].id.toString());
-      }
-    } catch (error) {
-      console.error('Error loading GitHub tokens:', error);
-    } finally {
-      setLoadingTokens(false);
-    }
-  };
-
-  const loadPathSuggestions = async (inputPath) => {
-    try {
-      // Extract the directory to browse (parent of input)
-      const lastSlash = inputPath.lastIndexOf('/');
-      const dirPath = lastSlash > 0 ? inputPath.substring(0, lastSlash) : '~';
-
-      const response = await api.browseFilesystem(dirPath);
-      const data = await response.json();
-
-      if (data.suggestions) {
-        // Filter suggestions based on the input, excluding exact match
-        const filtered = data.suggestions.filter(s =>
-          s.path.toLowerCase().startsWith(inputPath.toLowerCase()) &&
-          s.path.toLowerCase() !== inputPath.toLowerCase()
-        );
-        setPathSuggestions(filtered.slice(0, 5));
-        setShowPathDropdown(filtered.length > 0);
-      }
-    } catch (error) {
-      console.error('Error loading path suggestions:', error);
-    }
-  };
-
-  const handleNext = () => {
-    setError(null);
-
-    if (step === 1) {
-      if (!workspaceType) {
-        setError(t('projectWizard.errors.selectType'));
-        return;
-      }
-      setStep(2);
-    } else if (step === 2) {
-      if (!workspacePath.trim()) {
-        setError(t('projectWizard.errors.providePath'));
-        return;
-      }
-
-      // No validation for GitHub token - it's optional (only needed for private repos)
-      setStep(3);
-    }
-  };
-
-  const handleBack = () => {
-    setError(null);
-    setStep(step - 1);
-  };
-
-  const handleCreate = async () => {
-    setIsCreating(true);
-    setError(null);
-    setCloneProgress('');
-
-    try {
-      if (workspaceType === 'new' && githubUrl) {
-        const params = new URLSearchParams({
-          path: workspacePath.trim(),
-          githubUrl: githubUrl.trim(),
-        });
-
-        if (tokenMode === 'stored' && selectedGithubToken) {
-          params.append('githubTokenId', selectedGithubToken);
-        } else if (tokenMode === 'new' && newGithubToken) {
-          params.append('newGithubToken', newGithubToken.trim());
-        }
-
-        const token = localStorage.getItem('auth-token');
-        const url = `/api/projects/clone-progress?${params}${token ? `&token=${token}` : ''}`;
-
-        await new Promise((resolve, reject) => {
-          const eventSource = new EventSource(url);
-
-          eventSource.onmessage = (event) => {
-            try {
-              const data = JSON.parse(event.data);
-
-              if (data.type === 'progress') {
-                setCloneProgress(data.message);
-              } else if (data.type === 'complete') {
-                eventSource.close();
-                if (onProjectCreated) {
-                  onProjectCreated(data.project);
-                }
-                onClose();
-                resolve();
-              } else if (data.type === 'error') {
-                eventSource.close();
-                reject(new Error(data.message));
-              }
-            } catch (e) {
-              console.error('Error parsing SSE event:', e);
-            }
-          };
-
-          eventSource.onerror = () => {
-            eventSource.close();
-            reject(new Error('Connection lost during clone'));
-          };
-        });
-        return;
-      }
-
-      const payload = {
-        workspaceType,
-        path: workspacePath.trim(),
-      };
-
-      const response = await api.createWorkspace(payload);
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.details || data.error || t('projectWizard.errors.failedToCreate'));
-      }
-
-      if (onProjectCreated) {
-        onProjectCreated(data.project);
-      }
-
-      onClose();
-    } catch (error) {
-      console.error('Error creating workspace:', error);
-      setError(error.message || t('projectWizard.errors.failedToCreate'));
-    } finally {
-      setIsCreating(false);
-    }
-  };
-
-  const selectPathSuggestion = (suggestion) => {
-    setWorkspacePath(suggestion.path);
-    setShowPathDropdown(false);
-  };
-
-  const openFolderBrowser = async () => {
-    setShowFolderBrowser(true);
-    await loadBrowserFolders('~');
-  };
-
-  const loadBrowserFolders = async (path) => {
-    try {
-      setLoadingFolders(true);
-      const response = await api.browseFilesystem(path);
-      const data = await response.json();
-      setBrowserCurrentPath(data.path || path);
-      setBrowserFolders(data.suggestions || []);
-    } catch (error) {
-      console.error('Error loading folders:', error);
-    } finally {
-      setLoadingFolders(false);
-    }
-  };
-
-  const selectFolder = (folderPath, advanceToConfirm = false) => {
-    setWorkspacePath(folderPath);
-    setShowFolderBrowser(false);
-    if (advanceToConfirm) {
-      setStep(3);
-    }
-  };
-
-  const navigateToFolder = async (folderPath) => {
-    await loadBrowserFolders(folderPath);
-  };
-
-  const createNewFolder = async () => {
-    if (!newFolderName.trim()) return;
-    setCreatingFolder(true);
-    setError(null);
-    try {
-      const separator = browserCurrentPath.includes('\\') ? '\\' : '/';
-      const folderPath = `${browserCurrentPath}${separator}${newFolderName.trim()}`;
-      const response = await api.createFolder(folderPath);
-      const data = await response.json();
-      if (!response.ok) {
-        throw new Error(data.error || t('projectWizard.errors.failedToCreateFolder', 'Failed to create folder'));
-      }
-      setNewFolderName('');
-      setShowNewFolderInput(false);
-      await loadBrowserFolders(data.path || folderPath);
-    } catch (error) {
-      console.error('Error creating folder:', error);
-      setError(error.message || t('projectWizard.errors.failedToCreateFolder', 'Failed to create folder'));
-    } finally {
-      setCreatingFolder(false);
-    }
-  };
-
-  return (
-    <div className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[60] p-0 sm:p-4">
-      <div className="bg-white dark:bg-gray-800 rounded-none sm:rounded-lg shadow-xl w-full h-full sm:h-auto sm:max-w-2xl border-0 sm:border border-gray-200 dark:border-gray-700 overflow-y-auto">
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
-          <div className="flex items-center gap-3">
-            <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
-              <FolderPlus className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-            </div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-              {t('projectWizard.title')}
-            </h3>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
-            disabled={isCreating}
-          >
-            <X className="w-5 h-5" />
-          </button>
-        </div>
-
-        {/* Progress Indicator */}
-        <div className="px-6 pt-4 pb-2">
-          <div className="flex items-center justify-between">
-            {[1, 2, 3].map((s) => (
-              <React.Fragment key={s}>
-                <div className="flex items-center gap-2">
-                  <div
-                    className={`w-8 h-8 rounded-full flex items-center justify-center font-medium text-sm ${
-                      s < step
-                        ? 'bg-green-500 text-white'
-                        : s === step
-                        ? 'bg-blue-500 text-white'
-                        : 'bg-gray-200 dark:bg-gray-700 text-gray-500'
-                    }`}
-                  >
-                    {s < step ? <Check className="w-4 h-4" /> : s}
-                  </div>
-                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300 hidden sm:inline">
-                    {s === 1 ? t('projectWizard.steps.type') : s === 2 ? t('projectWizard.steps.configure') : t('projectWizard.steps.confirm')}
-                  </span>
-                </div>
-                {s < 3 && (
-                  <div
-                    className={`flex-1 h-1 mx-2 rounded ${
-                      s < step ? 'bg-green-500' : 'bg-gray-200 dark:bg-gray-700'
-                    }`}
-                  />
-                )}
-              </React.Fragment>
-            ))}
-          </div>
-        </div>
-
-        {/* Content */}
-        <div className="p-6 space-y-6 min-h-[300px]">
-          {/* Error Display */}
-          {error && (
-            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 flex items-start gap-3">
-              <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
-              <div className="flex-1">
-                <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
-              </div>
-            </div>
-          )}
-
-          {/* Step 1: Choose workspace type */}
-          {step === 1 && (
-            <div className="space-y-4">
-              <div>
-                <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-                  {t('projectWizard.step1.question')}
-                </h4>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  {/* Existing Workspace */}
-                  <button
-                    onClick={() => setWorkspaceType('existing')}
-                    className={`p-4 border-2 rounded-lg text-left transition-all ${
-                      workspaceType === 'existing'
-                        ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                        : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
-                    }`}
-                  >
-                    <div className="flex items-start gap-3">
-                      <div className="w-10 h-10 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center flex-shrink-0">
-                        <FolderPlus className="w-5 h-5 text-green-600 dark:text-green-400" />
-                      </div>
-                      <div className="flex-1">
-                        <h5 className="font-semibold text-gray-900 dark:text-white mb-1">
-                          {t('projectWizard.step1.existing.title')}
-                        </h5>
-                        <p className="text-sm text-gray-600 dark:text-gray-400">
-                          {t('projectWizard.step1.existing.description')}
-                        </p>
-                      </div>
-                    </div>
-                  </button>
-
-                  {/* New Workspace */}
-                  <button
-                    onClick={() => setWorkspaceType('new')}
-                    className={`p-4 border-2 rounded-lg text-left transition-all ${
-                      workspaceType === 'new'
-                        ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                        : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
-                    }`}
-                  >
-                    <div className="flex items-start gap-3">
-                      <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center flex-shrink-0">
-                        <GitBranch className="w-5 h-5 text-purple-600 dark:text-purple-400" />
-                      </div>
-                      <div className="flex-1">
-                        <h5 className="font-semibold text-gray-900 dark:text-white mb-1">
-                          {t('projectWizard.step1.new.title')}
-                        </h5>
-                        <p className="text-sm text-gray-600 dark:text-gray-400">
-                          {t('projectWizard.step1.new.description')}
-                        </p>
-                      </div>
-                    </div>
-                  </button>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Step 2: Configure workspace */}
-          {step === 2 && (
-            <div className="space-y-4">
-              {/* Workspace Path */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  {workspaceType === 'existing' ? t('projectWizard.step2.existingPath') : t('projectWizard.step2.newPath')}
-                </label>
-                <div className="relative flex gap-2">
-                  <div className="flex-1 relative">
-                    <Input
-                      type="text"
-                      value={workspacePath}
-                      onChange={(e) => setWorkspacePath(e.target.value)}
-                      placeholder={workspaceType === 'existing' ? '/path/to/existing/workspace' : '/path/to/new/workspace'}
-                      className="w-full"
-                    />
-                    {showPathDropdown && pathSuggestions.length > 0 && (
-                      <div className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-                        {pathSuggestions.map((suggestion, index) => (
-                          <button
-                            key={index}
-                            onClick={() => selectPathSuggestion(suggestion)}
-                            className="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 text-sm"
-                          >
-                            <div className="font-medium text-gray-900 dark:text-white">{suggestion.name}</div>
-                            <div className="text-xs text-gray-500 dark:text-gray-400">{suggestion.path}</div>
-                          </button>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={openFolderBrowser}
-                    className="px-3"
-                    title="Browse folders"
-                  >
-                    <FolderOpen className="w-4 h-4" />
-                  </Button>
-                </div>
-                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                  {workspaceType === 'existing'
-                    ? t('projectWizard.step2.existingHelp')
-                    : t('projectWizard.step2.newHelp')}
-                </p>
-              </div>
-
-              {/* GitHub URL (only for new workspace) */}
-              {workspaceType === 'new' && (
-                <>
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                      {t('projectWizard.step2.githubUrl')}
-                    </label>
-                    <Input
-                      type="text"
-                      value={githubUrl}
-                      onChange={(e) => setGithubUrl(e.target.value)}
-                      placeholder="https://github.com/username/repository"
-                      className="w-full"
-                    />
-                    <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                      {t('projectWizard.step2.githubHelp')}
-                    </p>
-                  </div>
-
-                  {/* GitHub Token (only for HTTPS URLs - SSH uses SSH keys) */}
-                  {githubUrl && !githubUrl.startsWith('git@') && !githubUrl.startsWith('ssh://') && (
-                    <div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
-                      <div className="flex items-start gap-3 mb-4">
-                        <Key className="w-5 h-5 text-gray-600 dark:text-gray-400 flex-shrink-0 mt-0.5" />
-                        <div className="flex-1">
-                          <h5 className="font-medium text-gray-900 dark:text-white mb-1">
-                            {t('projectWizard.step2.githubAuth')}
-                          </h5>
-                          <p className="text-sm text-gray-600 dark:text-gray-400">
-                            {t('projectWizard.step2.githubAuthHelp')}
-                          </p>
-                        </div>
-                      </div>
-
-                      {loadingTokens ? (
-                        <div className="flex items-center gap-2 text-sm text-gray-500">
-                          <Loader2 className="w-4 h-4 animate-spin" />
-                          {t('projectWizard.step2.loadingTokens')}
-                        </div>
-                      ) : availableTokens.length > 0 ? (
-                        <>
-                          {/* Token Selection Tabs */}
-                          <div className="grid grid-cols-3 gap-2 mb-4">
-                            <button
-                              onClick={() => setTokenMode('stored')}
-                              className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
-                                tokenMode === 'stored'
-                                  ? 'bg-blue-500 text-white'
-                                  : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-                              }`}
-                            >
-                              {t('projectWizard.step2.storedToken')}
-                            </button>
-                            <button
-                              onClick={() => setTokenMode('new')}
-                              className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
-                                tokenMode === 'new'
-                                  ? 'bg-blue-500 text-white'
-                                  : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-                              }`}
-                            >
-                              {t('projectWizard.step2.newToken')}
-                            </button>
-                            <button
-                              onClick={() => {
-                                setTokenMode('none');
-                                setSelectedGithubToken('');
-                                setNewGithubToken('');
-                              }}
-                              className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
-                                tokenMode === 'none'
-                                  ? 'bg-green-500 text-white'
-                                  : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-                              }`}
-                            >
-                              {t('projectWizard.step2.nonePublic')}
-                            </button>
-                          </div>
-
-                          {tokenMode === 'stored' ? (
-                            <div>
-                              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                {t('projectWizard.step2.selectToken')}
-                              </label>
-                              <select
-                                value={selectedGithubToken}
-                                onChange={(e) => setSelectedGithubToken(e.target.value)}
-                                className="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm"
-                              >
-                                <option value="">{t('projectWizard.step2.selectTokenPlaceholder')}</option>
-                                {availableTokens.map((token) => (
-                                  <option key={token.id} value={token.id}>
-                                    {token.credential_name}
-                                  </option>
-                                ))}
-                              </select>
-                            </div>
-                          ) : tokenMode === 'new' ? (
-                            <div>
-                              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                {t('projectWizard.step2.newToken')}
-                              </label>
-                              <Input
-                                type="password"
-                                value={newGithubToken}
-                                onChange={(e) => setNewGithubToken(e.target.value)}
-                                placeholder="ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
-                                className="w-full"
-                              />
-                              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                                {t('projectWizard.step2.tokenHelp')}
-                              </p>
-                            </div>
-                          ) : null}
-                        </>
-                      ) : (
-                        <div className="space-y-4">
-                          <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3 border border-blue-200 dark:border-blue-800">
-                            <p className="text-sm text-blue-800 dark:text-blue-200">
-                              {t('projectWizard.step2.publicRepoInfo')}
-                            </p>
-                          </div>
-
-                          <div>
-                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                              {t('projectWizard.step2.optionalTokenPublic')}
-                            </label>
-                            <Input
-                              type="password"
-                              value={newGithubToken}
-                              onChange={(e) => setNewGithubToken(e.target.value)}
-                              placeholder={t('projectWizard.step2.tokenPublicPlaceholder')}
-                              className="w-full"
-                            />
-                            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                              {t('projectWizard.step2.noTokensHelp')}
-                            </p>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
-          )}
-
-          {/* Step 3: Confirm */}
-          {step === 3 && (
-            <div className="space-y-4">
-              <div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
-                <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
-                  {t('projectWizard.step3.reviewConfig')}
-                </h4>
-                <div className="space-y-2">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.workspaceType')}</span>
-                    <span className="font-medium text-gray-900 dark:text-white">
-                      {workspaceType === 'existing' ? t('projectWizard.step3.existingWorkspace') : t('projectWizard.step3.newWorkspace')}
-                    </span>
-                  </div>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.path')}</span>
-                    <span className="font-mono text-xs text-gray-900 dark:text-white break-all">
-                      {workspacePath}
-                    </span>
-                  </div>
-                  {workspaceType === 'new' && githubUrl && (
-                    <>
-                      <div className="flex justify-between text-sm">
-                        <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.cloneFrom')}</span>
-                        <span className="font-mono text-xs text-gray-900 dark:text-white break-all">
-                          {githubUrl}
-                        </span>
-                      </div>
-                      <div className="flex justify-between text-sm">
-                        <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.authentication')}</span>
-                        <span className="text-xs text-gray-900 dark:text-white">
-                          {tokenMode === 'stored' && selectedGithubToken
-                            ? `${t('projectWizard.step3.usingStoredToken')} ${availableTokens.find(t => t.id.toString() === selectedGithubToken)?.credential_name || 'Unknown'}`
-                            : tokenMode === 'new' && newGithubToken
-                            ? t('projectWizard.step3.usingProvidedToken')
-                            : (githubUrl.startsWith('git@') || githubUrl.startsWith('ssh://'))
-                            ? t('projectWizard.step3.sshKey', 'SSH Key')
-                            : t('projectWizard.step3.noAuthentication')}
-                        </span>
-                      </div>
-                    </>
-                  )}
-                </div>
-              </div>
-
-              <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
-                {isCreating && cloneProgress ? (
-                  <div className="space-y-2">
-                    <p className="text-sm font-medium text-blue-800 dark:text-blue-200">{t('projectWizard.step3.cloningRepository', 'Cloning repository...')}</p>
-                    <code className="block text-xs font-mono text-blue-700 dark:text-blue-300 whitespace-pre-wrap break-all">
-                      {cloneProgress}
-                    </code>
-                  </div>
-                ) : (
-                  <p className="text-sm text-blue-800 dark:text-blue-200">
-                    {workspaceType === 'existing'
-                      ? t('projectWizard.step3.existingInfo')
-                      : githubUrl
-                      ? t('projectWizard.step3.newWithClone')
-                      : t('projectWizard.step3.newEmpty')}
-                  </p>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="flex items-center justify-between p-6 border-t border-gray-200 dark:border-gray-700">
-          <Button
-            variant="outline"
-            onClick={step === 1 ? onClose : handleBack}
-            disabled={isCreating}
-          >
-            {step === 1 ? (
-              t('projectWizard.buttons.cancel')
-            ) : (
-              <>
-                <ChevronLeft className="w-4 h-4 mr-1" />
-                {t('projectWizard.buttons.back')}
-              </>
-            )}
-          </Button>
-
-          <Button
-            onClick={step === 3 ? handleCreate : handleNext}
-            disabled={isCreating || (step === 1 && !workspaceType)}
-          >
-            {isCreating ? (
-              <>
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                {githubUrl ? t('projectWizard.buttons.cloning', 'Cloning...') : t('projectWizard.buttons.creating')}
-              </>
-            ) : step === 3 ? (
-              <>
-                <Check className="w-4 h-4 mr-1" />
-                {t('projectWizard.buttons.createProject')}
-              </>
-            ) : (
-              <>
-                {t('projectWizard.buttons.next')}
-                <ChevronRight className="w-4 h-4 ml-1" />
-              </>
-            )}
-          </Button>
-        </div>
-      </div>
-
-      {/* Folder Browser Modal */}
-      {showFolderBrowser && (
-        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[70] p-4">
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] border border-gray-200 dark:border-gray-700 flex flex-col">
-            {/* Browser Header */}
-            <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-              <div className="flex items-center gap-3">
-                <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
-                  <FolderOpen className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-                </div>
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                  Select Folder
-                </h3>
-              </div>
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={() => setShowHiddenFolders(!showHiddenFolders)}
-                  className={`p-2 rounded-md transition-colors ${
-                    showHiddenFolders
-                      ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
-                      : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
-                  }`}
-                  title={showHiddenFolders ? 'Hide hidden folders' : 'Show hidden folders'}
-                >
-                  {showHiddenFolders ? <Eye className="w-5 h-5" /> : <EyeOff className="w-5 h-5" />}
-                </button>
-                <button
-                  onClick={() => setShowNewFolderInput(!showNewFolderInput)}
-                  className={`p-2 rounded-md transition-colors ${
-                    showNewFolderInput
-                      ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
-                      : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
-                  }`}
-                  title="Create new folder"
-                >
-                  <Plus className="w-5 h-5" />
-                </button>
-                <button
-                  onClick={() => setShowFolderBrowser(false)}
-                  className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
-                >
-                  <X className="w-5 h-5" />
-                </button>
-              </div>
-            </div>
-
-            {/* New Folder Input */}
-            {showNewFolderInput && (
-              <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-blue-50 dark:bg-blue-900/20">
-                <div className="flex items-center gap-2">
-                  <Input
-                    type="text"
-                    value={newFolderName}
-                    onChange={(e) => setNewFolderName(e.target.value)}
-                    placeholder="New folder name"
-                    className="flex-1"
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter') createNewFolder();
-                      if (e.key === 'Escape') {
-                        setShowNewFolderInput(false);
-                        setNewFolderName('');
-                      }
-                    }}
-                    autoFocus
-                  />
-                  <Button
-                    size="sm"
-                    onClick={createNewFolder}
-                    disabled={!newFolderName.trim() || creatingFolder}
-                  >
-                    {creatingFolder ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Create'}
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={() => {
-                      setShowNewFolderInput(false);
-                      setNewFolderName('');
-                    }}
-                  >
-                    Cancel
-                  </Button>
-                </div>
-              </div>
-            )}
-
-            {/* Folder List */}
-            <div className="flex-1 overflow-y-auto p-4">
-              {loadingFolders ? (
-                <div className="flex items-center justify-center py-8">
-                  <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
-                </div>
-              ) : (
-                <div className="space-y-1">
-                  {/* Parent Directory - check for Windows root (e.g., C:\) and Unix root */}
-                  {browserCurrentPath !== '~' && browserCurrentPath !== '/' && !/^[A-Za-z]:\\?$/.test(browserCurrentPath) && (
-                    <button
-                      onClick={() => {
-                        const lastSlash = Math.max(browserCurrentPath.lastIndexOf('/'), browserCurrentPath.lastIndexOf('\\'));
-                        let parentPath;
-                        if (lastSlash <= 0) {
-                          parentPath = '/';
-                        } else if (lastSlash === 2 && /^[A-Za-z]:/.test(browserCurrentPath)) {
-                          parentPath = browserCurrentPath.substring(0, 3);
-                        } else {
-                          parentPath = browserCurrentPath.substring(0, lastSlash);
-                        }
-                        navigateToFolder(parentPath);
-                      }}
-                      className="w-full px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center gap-3"
-                    >
-                      <FolderOpen className="w-5 h-5 text-gray-400" />
-                      <span className="font-medium text-gray-700 dark:text-gray-300">..</span>
-                    </button>
-                  )}
-
-                  {/* Folders */}
-                  {browserFolders.length === 0 ? (
-                    <div className="text-center py-8 text-gray-500 dark:text-gray-400">
-                      No subfolders found
-                    </div>
-                  ) : (
-                    browserFolders
-                      .filter(folder => showHiddenFolders || !folder.name.startsWith('.'))
-                      .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
-                      .map((folder, index) => (
-                      <div key={index} className="flex items-center gap-2">
-                        <button
-                          onClick={() => navigateToFolder(folder.path)}
-                          className="flex-1 px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center gap-3"
-                        >
-                          <FolderPlus className="w-5 h-5 text-blue-500" />
-                          <span className="font-medium text-gray-900 dark:text-white">{folder.name}</span>
-                        </button>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => selectFolder(folder.path, workspaceType === 'existing')}
-                          className="text-xs px-3"
-                        >
-                          Select
-                        </Button>
-                      </div>
-                    ))
-                  )}
-                </div>
-              )}
-            </div>
-
-            {/* Browser Footer with Current Path */}
-            <div className="border-t border-gray-200 dark:border-gray-700">
-              <div className="px-4 py-3 bg-gray-50 dark:bg-gray-900/50 flex items-center gap-2">
-                <span className="text-sm text-gray-600 dark:text-gray-400">Path:</span>
-                <code className="text-sm font-mono text-gray-900 dark:text-white flex-1 truncate">
-                  {browserCurrentPath}
-                </code>
-              </div>
-              <div className="flex items-center justify-end gap-2 p-4">
-                <Button
-                  variant="outline"
-                  onClick={() => {
-                    setShowFolderBrowser(false);
-                    setShowNewFolderInput(false);
-                    setNewFolderName('');
-                  }}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  variant="outline"
-                  onClick={() => selectFolder(browserCurrentPath, workspaceType === 'existing')}
-                >
-                  Use this folder
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ProjectCreationWizard;
--- a/src/components/ProtectedRoute.jsx
+++ b/src/components/ProtectedRoute.jsx
@@ -1,62 +0,0 @@
-import React from 'react';
-import { useAuth } from '../contexts/AuthContext';
-import SetupForm from './SetupForm';
-import LoginForm from './LoginForm';
-import Onboarding from './Onboarding';
-import { MessageSquare } from 'lucide-react';
-import { IS_PLATFORM } from '../constants/config';
-
-const LoadingScreen = () => (
-  <div className="min-h-screen bg-background flex items-center justify-center p-4">
-    <div className="text-center">
-      <div className="flex justify-center mb-4">
-        <div className="w-16 h-16 bg-primary rounded-lg flex items-center justify-center shadow-sm">
-          <MessageSquare className="w-8 h-8 text-primary-foreground" />
-        </div>
-      </div>
-      <h1 className="text-2xl font-bold text-foreground mb-2">Claude Code UI</h1>
-      <div className="flex items-center justify-center space-x-2">
-        <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce"></div>
-        <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
-        <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
-      </div>
-      <p className="text-muted-foreground mt-2">Loading...</p>
-    </div>
-  </div>
-);
-
-const ProtectedRoute = ({ children }) => {
-  const { user, isLoading, needsSetup, hasCompletedOnboarding, refreshOnboardingStatus } = useAuth();
-
-  if (IS_PLATFORM) {
-    if (isLoading) {
-      return <LoadingScreen />;
-    }
-
-    if (!hasCompletedOnboarding) {
-      return <Onboarding onComplete={refreshOnboardingStatus} />;
-    }
-
-    return children;
-  }
-
-  if (isLoading) {
-    return <LoadingScreen />;
-  }
-
-  if (needsSetup) {
-    return <SetupForm />;
-  }
-
-  if (!user) {
-    return <LoginForm />;
-  }
-
-  if (!hasCompletedOnboarding) {
-    return <Onboarding onComplete={refreshOnboardingStatus} />;
-  }
-
-  return children;
-};
-
-export default ProtectedRoute;
--- a/src/components/QuickSettingsPanel.jsx
+++ b/src/components/QuickSettingsPanel.jsx
@@ -1,448 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import {
-  ChevronLeft,
-  ChevronRight,
-  Maximize2,
-  Eye,
-  Settings2,
-  Moon,
-  Sun,
-  ArrowDown,
-  Mic,
-  Brain,
-  Sparkles,
-  FileText,
-  Languages,
-  GripVertical
-} from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import DarkModeToggle from './DarkModeToggle';
-
-import { useUiPreferences } from '../hooks/useUiPreferences';
-import { useTheme } from '../contexts/ThemeContext';
-import LanguageSelector from './LanguageSelector';
-
-import { useDeviceSettings } from '../hooks/useDeviceSettings';
-
-
-const QuickSettingsPanel = () => {
-  const { t } = useTranslation('settings');
-  const [isOpen, setIsOpen] = useState(false);
-  const [whisperMode, setWhisperMode] = useState(() => {
-    return localStorage.getItem('whisperMode') || 'default';
-  });
-  const { isDarkMode } = useTheme();
-
-  const { isMobile } = useDeviceSettings({ trackPWA: false });
-
-  const { preferences, setPreference } = useUiPreferences();
-  const { autoExpandTools, showRawParameters, showThinking, autoScrollToBottom, sendByCtrlEnter } = preferences;
-
-  // Draggable handle state
-  const [handlePosition, setHandlePosition] = useState(() => {
-    const saved = localStorage.getItem('quickSettingsHandlePosition');
-    if (saved) {
-      try {
-        const parsed = JSON.parse(saved);
-        return parsed.y ?? 50;
-      } catch {
-        // Remove corrupted data
-        localStorage.removeItem('quickSettingsHandlePosition');
-        return 50;
-      }
-    }
-    return 50; // Default to 50% (middle of screen)
-  });
-
-  const [isDragging, setIsDragging] = useState(false);
-  const [dragStartY, setDragStartY] = useState(0);
-  const [dragStartPosition, setDragStartPosition] = useState(0);
-  const [hasMoved, setHasMoved] = useState(false); // Track if user has moved during drag
-  const handleRef = useRef(null);
-  const constraintsRef = useRef({ min: 10, max: 90 }); // Percentage constraints
-  const dragThreshold = 5; // Pixels to move before it's considered a drag
-
-  // Save handle position to localStorage when it changes
-  useEffect(() => {
-    localStorage.setItem('quickSettingsHandlePosition', JSON.stringify({ y: handlePosition }));
-  }, [handlePosition]);
-
-  // Calculate position from percentage
-  const getPositionStyle = useCallback(() => {
-    if (isMobile) {
-      // On mobile, convert percentage to pixels from bottom
-      const bottomPixels = (window.innerHeight * handlePosition) / 100;
-      return { bottom: `${bottomPixels}px` };
-    } else {
-      // On desktop, use top with percentage
-      return { top: `${handlePosition}%`, transform: 'translateY(-50%)' };
-    }
-  }, [handlePosition, isMobile]);
-
-  // Handle mouse/touch start
-  const handleDragStart = useCallback((e) => {
-    // Don't prevent default yet - we want to allow click if no drag happens
-    e.stopPropagation();
-
-    const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY;
-    setDragStartY(clientY);
-    setDragStartPosition(handlePosition);
-    setHasMoved(false);
-    setIsDragging(false); // Don't set dragging until threshold is passed
-  }, [handlePosition]);
-
-  // Handle mouse/touch move
-  const handleDragMove = useCallback((e) => {
-    if (dragStartY === 0) return; // Not in a potential drag
-
-    const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY;
-    const deltaY = Math.abs(clientY - dragStartY);
-
-    // Check if we've moved past threshold
-    if (!isDragging && deltaY > dragThreshold) {
-      setIsDragging(true);
-      setHasMoved(true);
-      document.body.style.cursor = 'grabbing';
-      document.body.style.userSelect = 'none';
-
-      // Prevent body scroll on mobile during drag
-      if (e.type.includes('touch')) {
-        document.body.style.overflow = 'hidden';
-        document.body.style.position = 'fixed';
-        document.body.style.width = '100%';
-      }
-    }
-
-    if (!isDragging) return;
-
-    // Prevent scrolling on touch move
-    if (e.type.includes('touch')) {
-      e.preventDefault();
-    }
-
-    const actualDeltaY = clientY - dragStartY;
-
-    // For top-based positioning (desktop), moving down increases top percentage
-    // For bottom-based positioning (mobile), we need to invert
-    let percentageDelta;
-    if (isMobile) {
-      // On mobile, moving down should decrease bottom position (increase percentage from top)
-      percentageDelta = -(actualDeltaY / window.innerHeight) * 100;
-    } else {
-      // On desktop, moving down should increase top position
-      percentageDelta = (actualDeltaY / window.innerHeight) * 100;
-    }
-
-    let newPosition = dragStartPosition + percentageDelta;
-
-    // Apply constraints
-    newPosition = Math.max(constraintsRef.current.min, Math.min(constraintsRef.current.max, newPosition));
-
-    setHandlePosition(newPosition);
-  }, [isDragging, dragStartY, dragStartPosition, isMobile, dragThreshold]);
-
-  // Handle mouse/touch end
-  const handleDragEnd = useCallback(() => {
-    setIsDragging(false);
-    setDragStartY(0);
-    document.body.style.cursor = '';
-    document.body.style.userSelect = '';
-
-    // Restore body scroll on mobile
-    document.body.style.overflow = '';
-    document.body.style.position = '';
-    document.body.style.width = '';
-  }, []);
-
-  // Cleanup body styles on unmount in case component unmounts while dragging
-  useEffect(() => {
-    return () => {
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-      document.body.style.overflow = '';
-      document.body.style.position = '';
-      document.body.style.width = '';
-    };
-  }, []);
-
-  // Set up global event listeners for drag
-  useEffect(() => {
-    if (dragStartY !== 0) {
-      // Mouse events
-      const handleMouseMove = (e) => handleDragMove(e);
-      const handleMouseUp = () => handleDragEnd();
-
-      // Touch events
-      const handleTouchMove = (e) => handleDragMove(e);
-      const handleTouchEnd = () => handleDragEnd();
-
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
-      document.addEventListener('touchmove', handleTouchMove, { passive: false });
-      document.addEventListener('touchend', handleTouchEnd);
-
-      return () => {
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
-        document.removeEventListener('touchmove', handleTouchMove);
-        document.removeEventListener('touchend', handleTouchEnd);
-      };
-    }
-  }, [dragStartY, handleDragMove, handleDragEnd]);
-
-  const handleToggle = (e) => {
-    // Don't toggle if user was dragging
-    if (hasMoved) {
-      e.preventDefault();
-      setHasMoved(false);
-      return;
-    }
-
-    setIsOpen((previous) => !previous);
-  };
-
-  return (
-    <>
-      {/* Pull Tab - Combined drag handle and toggle button */}
-      <button
-        ref={handleRef}
-        onClick={handleToggle}
-        onMouseDown={(e) => {
-          // Start drag on mousedown
-          handleDragStart(e);
-        }}
-        onTouchStart={(e) => {
-          // Start drag on touchstart
-          handleDragStart(e);
-        }}
-        className={`fixed ${
-          isOpen ? 'right-64' : 'right-0'
-        } z-50 ${isDragging ? '' : 'transition-all duration-150 ease-out'} bg-white dark:bg-gray-800 border ${
-          isDragging ? 'border-blue-500 dark:border-blue-400' : 'border-gray-200 dark:border-gray-700'
-        } rounded-l-md p-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors shadow-lg ${
-          isDragging ? 'cursor-grabbing' : 'cursor-pointer'
-        } touch-none`}
-        style={{ ...getPositionStyle(), touchAction: 'none', WebkitTouchCallout: 'none', WebkitUserSelect: 'none' }}
-        aria-label={isDragging ? t('quickSettings.dragHandle.dragging') : isOpen ? t('quickSettings.dragHandle.closePanel') : t('quickSettings.dragHandle.openPanel')}
-        title={isDragging ? t('quickSettings.dragHandle.draggingStatus') : t('quickSettings.dragHandle.toggleAndMove')}
-      >
-        {isDragging ? (
-          <GripVertical className="h-5 w-5 text-blue-500 dark:text-blue-400" />
-        ) : isOpen ? (
-          <ChevronRight className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-        ) : (
-          <ChevronLeft className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-        )}
-      </button>
-
-      {/* Panel */}
-      <div
-        className={`fixed top-0 right-0 h-full w-64 bg-background border-l border-border shadow-xl transform transition-transform duration-150 ease-out z-40 ${
-          isOpen ? 'translate-x-0' : 'translate-x-full'
-        } ${isMobile ? 'h-screen' : ''}`}
-      >
-        <div className="h-full flex flex-col">
-          {/* Header */}
-          <div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-              <Settings2 className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-              {t('quickSettings.title')}
-            </h3>
-          </div>
-
-          {/* Settings Content */}
-          <div className={`flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6 bg-background ${isMobile ? 'pb-mobile-nav' : ''}`}>
-            {/* Appearance Settings */}
-            <div className="space-y-2">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">{t('quickSettings.sections.appearance')}</h4>
-
-              <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  {isDarkMode ? <Moon className="h-4 w-4 text-gray-600 dark:text-gray-400" /> : <Sun className="h-4 w-4 text-gray-600 dark:text-gray-400" />}
-                  {t('quickSettings.darkMode')}
-                </span>
-                <DarkModeToggle />
-              </div>
-
-              {/* Language Selector */}
-              <div>
-                <LanguageSelector compact={true} />
-              </div>
-            </div>
-
-            {/* Tool Display Settings */}
-            <div className="space-y-2">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">{t('quickSettings.sections.toolDisplay')}</h4>
-
-              <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  <Maximize2 className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  {t('quickSettings.autoExpandTools')}
-                </span>
-                <input
-                  type="checkbox"
-                  checked={autoExpandTools}
-                  onChange={(e) => setPreference('autoExpandTools', e.target.checked)}
-                  className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600"
-                />
-              </label>
-
-              <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  <Eye className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  {t('quickSettings.showRawParameters')}
-                </span>
-                <input
-                  type="checkbox"
-                  checked={showRawParameters}
-                  onChange={(e) => setPreference('showRawParameters', e.target.checked)}
-                  className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600"
-                />
-              </label>
-
-              <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  <Brain className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  {t('quickSettings.showThinking')}
-                </span>
-                <input
-                  type="checkbox"
-                  checked={showThinking}
-                  onChange={(e) => setPreference('showThinking', e.target.checked)}
-                  className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600"
-                />
-              </label>
-            </div>
-            {/* View Options */}
-            <div className="space-y-2">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">{t('quickSettings.sections.viewOptions')}</h4>
-
-              <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  <ArrowDown className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  {t('quickSettings.autoScrollToBottom')}
-                </span>
-                <input
-                  type="checkbox"
-                  checked={autoScrollToBottom}
-                  onChange={(e) => setPreference('autoScrollToBottom', e.target.checked)}
-                  className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600"
-                />
-              </label>
-            </div>
-
-            {/* Input Settings */}
-            <div className="space-y-2">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">{t('quickSettings.sections.inputSettings')}</h4>
-
-              <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  <Languages className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  {t('quickSettings.sendByCtrlEnter')}
-                </span>
-                <input
-                  type="checkbox"
-                  checked={sendByCtrlEnter}
-                  onChange={(e) => setPreference('sendByCtrlEnter', e.target.checked)}
-                  className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600"
-                />
-              </label>
-              <p className="text-xs text-gray-500 dark:text-gray-400 ml-3">
-                {t('quickSettings.sendByCtrlEnterDescription')}
-              </p>
-            </div>
-
-            {/* Whisper Dictation Settings - HIDDEN */}
-            <div className="space-y-2" style={{ display: 'none' }}>
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">{t('quickSettings.sections.whisperDictation')}</h4>
-              
-              <div className="space-y-2">
-                <label className="flex items-start p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                  <input
-                    type="radio"
-                    name="whisperMode"
-                    value="default"
-                    checked={whisperMode === 'default'}
-                    onChange={() => {
-                      setWhisperMode('default');
-                      localStorage.setItem('whisperMode', 'default');
-                      window.dispatchEvent(new Event('whisperModeChanged'));
-                    }}
-                    className="mt-0.5 h-4 w-4 border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-800 dark:checked:bg-blue-600"
-                  />
-                  <div className="ml-3 flex-1">
-                    <span className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
-                      <Mic className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                      {t('quickSettings.whisper.modes.default')}
-                    </span>
-                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                      {t('quickSettings.whisper.modes.defaultDescription')}
-                    </p>
-                  </div>
-                </label>
-
-                <label className="flex items-start p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                  <input
-                    type="radio"
-                    name="whisperMode"
-                    value="prompt"
-                    checked={whisperMode === 'prompt'}
-                    onChange={() => {
-                      setWhisperMode('prompt');
-                      localStorage.setItem('whisperMode', 'prompt');
-                      window.dispatchEvent(new Event('whisperModeChanged'));
-                    }}
-                    className="mt-0.5 h-4 w-4 border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-800 dark:checked:bg-blue-600"
-                  />
-                  <div className="ml-3 flex-1">
-                    <span className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
-                      <Sparkles className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                      {t('quickSettings.whisper.modes.prompt')}
-                    </span>
-                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                      {t('quickSettings.whisper.modes.promptDescription')}
-                    </p>
-                  </div>
-                </label>
-
-                <label className="flex items-start p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                  <input
-                    type="radio"
-                    name="whisperMode"
-                    value="vibe"
-                    checked={whisperMode === 'vibe' || whisperMode === 'instructions' || whisperMode === 'architect'}
-                    onChange={() => {
-                      setWhisperMode('vibe');
-                      localStorage.setItem('whisperMode', 'vibe');
-                      window.dispatchEvent(new Event('whisperModeChanged'));
-                    }}
-                    className="mt-0.5 h-4 w-4 border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-800 dark:checked:bg-blue-600"
-                  />
-                  <div className="ml-3 flex-1">
-                    <span className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
-                      <FileText className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                      {t('quickSettings.whisper.modes.vibe')}
-                    </span>
-                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                      {t('quickSettings.whisper.modes.vibeDescription')}
-                    </p>
-                  </div>
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Backdrop */}
-      {isOpen && (
-        <div
-          className="fixed inset-0 bg-background/80 backdrop-blur-sm z-30 transition-opacity duration-150 ease-out"
-          onClick={handleToggle}
-        />
-      )}
-    </>
-  );
-};
-
-export default QuickSettingsPanel;
--- a/src/components/SetupForm.jsx
+++ b/src/components/SetupForm.jsx
@@ -1,133 +0,0 @@
-import React, { useState } from 'react';
-import { useAuth } from '../contexts/AuthContext';
-const SetupForm = () => {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-  
-  const { register } = useAuth();
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError('');
-    
-    if (password !== confirmPassword) {
-      setError('Passwords do not match');
-      return;
-    }
-    
-    if (username.length < 3) {
-      setError('Username must be at least 3 characters long');
-      return;
-    }
-    
-    if (password.length < 6) {
-      setError('Password must be at least 6 characters long');
-      return;
-    }
-    
-    setIsLoading(true);
-    
-    const result = await register(username, password);
-    
-    if (!result.success) {
-      setError(result.error);
-    }
-    
-    setIsLoading(false);
-  };
-
-  return (
-    <div className="min-h-screen bg-background flex items-center justify-center p-4">
-      <div className="w-full max-w-md">
-        <div className="bg-card rounded-lg shadow-lg border border-border p-8 space-y-6">
-          {/* Logo and Title */}
-          <div className="text-center">
-            <div className="flex justify-center mb-4">
-              <img src="/logo.svg" alt="CloudCLI" className="w-16 h-16" />
-            </div>
-            <h1 className="text-2xl font-bold text-foreground">Welcome to Claude Code UI</h1>
-            <p className="text-muted-foreground mt-2">
-              Set up your account to get started
-            </p>
-          </div>
-
-          {/* Setup Form */}
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label htmlFor="username" className="block text-sm font-medium text-foreground mb-1">
-                Username
-              </label>
-              <input
-                type="text"
-                id="username"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder="Enter your username"
-                required
-                disabled={isLoading}
-              />
-            </div>
-
-            <div>
-              <label htmlFor="password" className="block text-sm font-medium text-foreground mb-1">
-                Password
-              </label>
-              <input
-                type="password"
-                id="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder="Enter your password"
-                required
-                disabled={isLoading}
-              />
-            </div>
-
-            <div>
-              <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground mb-1">
-                Confirm Password
-              </label>
-              <input
-                type="password"
-                id="confirmPassword"
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder="Confirm your password"
-                required
-                disabled={isLoading}
-              />
-            </div>
-
-            {error && (
-              <div className="p-3 bg-red-100 dark:bg-red-900/20 border border-red-300 dark:border-red-800 rounded-md">
-                <p className="text-sm text-red-700 dark:text-red-400">{error}</p>
-              </div>
-            )}
-
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200"
-            >
-              {isLoading ? 'Setting up...' : 'Create Account'}
-            </button>
-          </form>
-
-          <div className="text-center">
-            <p className="text-sm text-muted-foreground">
-              This is a single-user system. Only one account can be created.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SetupForm;
--- a/src/components/TaskCard.jsx
+++ b/src/components/TaskCard.jsx
@@ -1,210 +0,0 @@
-import React from 'react';
-import { Clock, CheckCircle, Circle, AlertCircle, Pause, X, ArrowRight, ChevronUp, Minus, Flag } from 'lucide-react';
-import { cn } from '../lib/utils';
-import Tooltip from './Tooltip';
-
-const TaskCard = ({ 
-  task,
-  onClick,
-  showParent = false,
-  className = ''
-}) => {
-  const getStatusConfig = (status) => {
-    switch (status) {
-      case 'done':
-        return {
-          icon: CheckCircle,
-          bgColor: 'bg-green-50 dark:bg-green-950',
-          borderColor: 'border-green-200 dark:border-green-800',
-          iconColor: 'text-green-600 dark:text-green-400',
-          textColor: 'text-green-900 dark:text-green-100',
-          statusText: 'Done'
-        };
-      
-      case 'in-progress':
-        return {
-          icon: Clock,
-          bgColor: 'bg-blue-50 dark:bg-blue-950',
-          borderColor: 'border-blue-200 dark:border-blue-800',
-          iconColor: 'text-blue-600 dark:text-blue-400',
-          textColor: 'text-blue-900 dark:text-blue-100',
-          statusText: 'In Progress'
-        };
-      
-      case 'review':
-        return {
-          icon: AlertCircle,
-          bgColor: 'bg-amber-50 dark:bg-amber-950',
-          borderColor: 'border-amber-200 dark:border-amber-800',
-          iconColor: 'text-amber-600 dark:text-amber-400',
-          textColor: 'text-amber-900 dark:text-amber-100',
-          statusText: 'Review'
-        };
-      
-      case 'deferred':
-        return {
-          icon: Pause,
-          bgColor: 'bg-gray-50 dark:bg-gray-800',
-          borderColor: 'border-gray-200 dark:border-gray-700',
-          iconColor: 'text-gray-500 dark:text-gray-400',
-          textColor: 'text-gray-700 dark:text-gray-300',
-          statusText: 'Deferred'
-        };
-      
-      case 'cancelled':
-        return {
-          icon: X,
-          bgColor: 'bg-red-50 dark:bg-red-950',
-          borderColor: 'border-red-200 dark:border-red-800',
-          iconColor: 'text-red-600 dark:text-red-400',
-          textColor: 'text-red-900 dark:text-red-100',
-          statusText: 'Cancelled'
-        };
-      
-      case 'pending':
-      default:
-        return {
-          icon: Circle,
-          bgColor: 'bg-slate-50 dark:bg-slate-800',
-          borderColor: 'border-slate-200 dark:border-slate-700',
-          iconColor: 'text-slate-500 dark:text-slate-400',
-          textColor: 'text-slate-900 dark:text-slate-100',
-          statusText: 'Pending'
-        };
-    }
-  };
-
-  const config = getStatusConfig(task.status);
-  const Icon = config.icon;
-
-  const getPriorityIcon = (priority) => {
-    switch (priority) {
-      case 'high':
-        return (
-          <Tooltip content="High Priority">
-            <div className="w-4 h-4 bg-red-100 dark:bg-red-900/30 rounded flex items-center justify-center">
-              <ChevronUp className="w-2.5 h-2.5 text-red-600 dark:text-red-400" />
-            </div>
-          </Tooltip>
-        );
-      case 'medium':
-        return (
-          <Tooltip content="Medium Priority">
-            <div className="w-4 h-4 bg-amber-100 dark:bg-amber-900/30 rounded flex items-center justify-center">
-              <Minus className="w-2.5 h-2.5 text-amber-600 dark:text-amber-400" />
-            </div>
-          </Tooltip>
-        );
-      case 'low':
-        return (
-          <Tooltip content="Low Priority">
-            <div className="w-4 h-4 bg-blue-100 dark:bg-blue-900/30 rounded flex items-center justify-center">
-              <Circle className="w-1.5 h-1.5 text-blue-600 dark:text-blue-400 fill-current" />
-            </div>
-          </Tooltip>
-        );
-      default:
-        return (
-          <Tooltip content="No Priority Set">
-            <div className="w-4 h-4 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
-              <Circle className="w-1.5 h-1.5 text-gray-400 dark:text-gray-500" />
-            </div>
-          </Tooltip>
-        );
-    }
-  };
-
-  return (
-    <div
-      className={cn(
-        'bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700',
-        'hover:shadow-md hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-200 cursor-pointer',
-        'p-3 space-y-3',
-        onClick && 'hover:-translate-y-0.5',
-        className
-      )}
-      onClick={onClick}
-    >
-      {/* Header with Task ID, Title, and Priority */}
-      <div className="flex items-start justify-between gap-2 mb-2">
-        {/* Task ID and Title */}
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-1">
-            <Tooltip content={`Task ID: ${task.id}`}>
-              <span className="text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">
-                {task.id}
-              </span>
-            </Tooltip>
-          </div>
-          <h3 className="font-medium text-sm text-gray-900 dark:text-white line-clamp-2 leading-tight">
-            {task.title}
-          </h3>
-          {showParent && task.parentId && (
-            <span className="text-xs text-gray-500 dark:text-gray-400 font-medium">
-              Task {task.parentId}
-            </span>
-          )}
-        </div>
-        
-        {/* Priority Icon */}
-        <div className="flex-shrink-0">
-          {getPriorityIcon(task.priority)}
-        </div>
-      </div>
-
-      {/* Footer with Dependencies and Status */}
-      <div className="flex items-center justify-between">
-        {/* Dependencies */}
-        <div className="flex items-center">
-          {task.dependencies && Array.isArray(task.dependencies) && task.dependencies.length > 0 && (
-            <Tooltip content={`Depends on: ${task.dependencies.map(dep => `Task ${dep}`).join(', ')}`}>
-              <div className="flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400">
-                <ArrowRight className="w-3 h-3" />
-                <span>Depends on: {task.dependencies.join(', ')}</span>
-              </div>
-            </Tooltip>
-          )}
-        </div>
-
-        {/* Status Badge */}
-        <Tooltip content={`Status: ${config.statusText}`}>
-          <div className="flex items-center gap-1">
-            <div className={cn('w-2 h-2 rounded-full', config.iconColor.replace('text-', 'bg-'))} />
-            <span className={cn('text-xs font-medium', config.textColor)}>
-              {config.statusText}
-            </span>
-          </div>
-        </Tooltip>
-      </div>
-
-      {/* Subtask Progress (if applicable) */}
-      {task.subtasks && task.subtasks.length > 0 && (
-        <div className="ml-3">
-          <div className="flex items-center gap-2 mb-1">
-            <span className="text-xs text-gray-500 dark:text-gray-400">Progress:</span>
-            <Tooltip content={`${task.subtasks.filter(st => st.status === 'done').length} of ${task.subtasks.length} subtasks completed`}>
-              <div className="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
-                <div 
-                  className={cn(
-                    'h-full rounded-full transition-all duration-300',
-                    task.status === 'done' ? 'bg-green-500' : 'bg-blue-500'
-                  )}
-                  style={{
-                    width: `${Math.round((task.subtasks.filter(st => st.status === 'done').length / task.subtasks.length) * 100)}%`
-                  }}
-                />
-              </div>
-            </Tooltip>
-            <Tooltip content={`${task.subtasks.filter(st => st.status === 'done').length} completed, ${task.subtasks.filter(st => st.status === 'pending').length} pending, ${task.subtasks.filter(st => st.status === 'in-progress').length} in progress`}>
-              <span className="text-xs text-gray-500 dark:text-gray-400">
-                {task.subtasks.filter(st => st.status === 'done').length}/{task.subtasks.length}
-              </span>
-            </Tooltip>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default TaskCard;
--- a/src/components/TaskDetail.jsx
+++ b/src/components/TaskDetail.jsx
@@ -1,407 +0,0 @@
-import React, { useState } from 'react';
-import { X, Flag, User, ArrowRight, CheckCircle, Circle, AlertCircle, Pause, Edit, Save, Copy, ChevronDown, ChevronRight, Clock } from 'lucide-react';
-import { cn } from '../lib/utils';
-import TaskIndicator from './TaskIndicator';
-import { api } from '../utils/api';
-import { useTaskMaster } from '../contexts/TaskMasterContext';
-import { copyTextToClipboard } from '../utils/clipboard';
-
-const TaskDetail = ({ 
-  task, 
-  onClose, 
-  onEdit,
-  onStatusChange,
-  onTaskClick,
-  isOpen = true,
-  className = ''
-}) => {
-  const [editMode, setEditMode] = useState(false);
-  const [editedTask, setEditedTask] = useState(task || {});
-  const [isSaving, setIsSaving] = useState(false);
-  const [showDetails, setShowDetails] = useState(false);
-  const [showTestStrategy, setShowTestStrategy] = useState(false);
-  const { currentProject, refreshTasks } = useTaskMaster();
-
-  if (!isOpen || !task) return null;
-
-  const handleSave = async () => {
-    if (!currentProject) return;
-    
-    setIsSaving(true);
-    try {
-      // Only include changed fields
-      const updates = {};
-      if (editedTask.title !== task.title) updates.title = editedTask.title;
-      if (editedTask.description !== task.description) updates.description = editedTask.description;
-      if (editedTask.details !== task.details) updates.details = editedTask.details;
-      
-      if (Object.keys(updates).length > 0) {
-        const response = await api.taskmaster.updateTask(currentProject.name, task.id, updates);
-        
-        if (response.ok) {
-          // Refresh tasks to get updated data
-          refreshTasks?.();
-          onEdit?.(editedTask);
-          setEditMode(false);
-        } else {
-          const error = await response.json();
-          console.error('Failed to update task:', error);
-          alert(`Failed to update task: ${error.message}`);
-        }
-      } else {
-        setEditMode(false);
-      }
-    } catch (error) {
-      console.error('Error updating task:', error);
-      alert('Error updating task. Please try again.');
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const handleStatusChange = async (newStatus) => {
-    if (!currentProject) return;
-    
-    try {
-      const response = await api.taskmaster.updateTask(currentProject.name, task.id, { status: newStatus });
-      
-      if (response.ok) {
-        refreshTasks?.();
-        onStatusChange?.(task.id, newStatus);
-      } else {
-        const error = await response.json();
-        console.error('Failed to update task status:', error);
-        alert(`Failed to update task status: ${error.message}`);
-      }
-    } catch (error) {
-      console.error('Error updating task status:', error);
-      alert('Error updating task status. Please try again.');
-    }
-  };
-
-  const copyTaskId = () => {
-    copyTextToClipboard(task.id.toString());
-  };
-
-  const getStatusConfig = (status) => {
-    switch (status) {
-      case 'done':
-        return { icon: CheckCircle, color: 'text-green-600 dark:text-green-400', bg: 'bg-green-50 dark:bg-green-950' };
-      case 'in-progress':
-        return { icon: Clock, color: 'text-blue-600 dark:text-blue-400', bg: 'bg-blue-50 dark:bg-blue-950' };
-      case 'review':
-        return { icon: AlertCircle, color: 'text-amber-600 dark:text-amber-400', bg: 'bg-amber-50 dark:bg-amber-950' };
-      case 'deferred':
-        return { icon: Pause, color: 'text-gray-500 dark:text-gray-400', bg: 'bg-gray-50 dark:bg-gray-800' };
-      case 'cancelled':
-        return { icon: X, color: 'text-red-600 dark:text-red-400', bg: 'bg-red-50 dark:bg-red-950' };
-      default:
-        return { icon: Circle, color: 'text-slate-500 dark:text-slate-400', bg: 'bg-slate-50 dark:bg-slate-800' };
-    }
-  };
-
-  const statusConfig = getStatusConfig(task.status);
-  const StatusIcon = statusConfig.icon;
-
-
-  const getPriorityColor = (priority) => {
-    switch (priority) {
-      case 'high': return 'text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950';
-      case 'medium': return 'text-yellow-600 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-950';
-      case 'low': return 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950';
-      default: return 'text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800';
-    }
-  };
-
-  const statusOptions = [
-    { value: 'pending', label: 'Pending' },
-    { value: 'in-progress', label: 'In Progress' },
-    { value: 'review', label: 'Review' },
-    { value: 'done', label: 'Done' },
-    { value: 'deferred', label: 'Deferred' },
-    { value: 'cancelled', label: 'Cancelled' }
-  ];
-
-  return (
-    <div className="modal-backdrop fixed inset-0 flex items-center justify-center z-[100] md:p-4 bg-black/50">
-      <div className={cn(
-        'bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 md:rounded-lg shadow-xl',
-        'w-full md:max-w-4xl h-full md:h-[90vh] flex flex-col',
-        className
-      )}>
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 md:p-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
-          <div className="flex items-center gap-3 min-w-0 flex-1">
-            <StatusIcon className={cn('w-6 h-6', statusConfig.color)} />
-            <div className="min-w-0 flex-1">
-              <div className="flex items-center gap-2 mb-1">
-                <button
-                  onClick={copyTaskId}
-                  className="flex items-center gap-1 px-2 py-1 text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
-                  title="Click to copy task ID"
-                >
-                  <span>Task {task.id}</span>
-                  <Copy className="w-3 h-3" />
-                </button>
-                {task.parentId && (
-                  <span className="text-xs text-gray-500 dark:text-gray-400">
-                    Subtask of Task {task.parentId}
-                  </span>
-                )}
-              </div>
-              {editMode ? (
-                <input
-                  type="text"
-                  value={editedTask.title || ''}
-                  onChange={(e) => setEditedTask({ ...editedTask, title: e.target.value })}
-                  className="w-full text-lg font-semibold bg-transparent border-b-2 border-blue-500 focus:outline-none text-gray-900 dark:text-white"
-                  placeholder="Task title"
-                />
-              ) : (
-                <h1 className="text-lg md:text-xl font-semibold text-gray-900 dark:text-white line-clamp-2">
-                  {task.title}
-                </h1>
-              )}
-            </div>
-          </div>
-          
-          <div className="flex items-center gap-2 flex-shrink-0">
-            {editMode ? (
-              <>
-                <button
-                  onClick={handleSave}
-                  disabled={isSaving}
-                  className="p-2 text-green-600 hover:text-green-700 hover:bg-green-50 dark:hover:bg-green-950 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                  title={isSaving ? "Saving..." : "Save changes"}
-                >
-                  <Save className={cn("w-5 h-5", isSaving && "animate-spin")} />
-                </button>
-                <button
-                  onClick={() => {
-                    setEditMode(false);
-                    setEditedTask(task);
-                  }}
-                  disabled={isSaving}
-                  className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                  title="Cancel editing"
-                >
-                  <X className="w-5 h-5" />
-                </button>
-              </>
-            ) : (
-              <button
-                onClick={() => setEditMode(true)}
-                className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
-                title="Edit task"
-              >
-                <Edit className="w-5 h-5" />
-              </button>
-            )}
-            
-            <button
-              onClick={onClose}
-              className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
-              title="Close"
-            >
-              <X className="w-5 h-5" />
-            </button>
-          </div>
-        </div>
-
-        {/* Content */}
-        <div className="flex-1 overflow-y-auto p-4 md:p-6 space-y-6 min-h-0">
-          {/* Status and Metadata Row */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {/* Status */}
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Status</label>
-              <div className={cn(
-                'w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600',
-                statusConfig.bg,
-                statusConfig.color
-              )}>
-                <div className="flex items-center gap-2">
-                  <StatusIcon className="w-4 h-4" />
-                  <span className="font-medium capitalize">
-                    {statusOptions.find(option => option.value === task.status)?.label || task.status}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            {/* Priority */}
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Priority</label>
-              <div className={cn(
-                'px-3 py-2 rounded-md text-sm font-medium capitalize',
-                getPriorityColor(task.priority)
-              )}>
-                <Flag className="w-4 h-4 inline mr-2" />
-                {task.priority || 'Not set'}
-              </div>
-            </div>
-
-            {/* Dependencies */}
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Dependencies</label>
-              {task.dependencies && task.dependencies.length > 0 ? (
-                <div className="flex flex-wrap gap-1">
-                  {task.dependencies.map(depId => (
-                    <button 
-                      key={depId} 
-                      onClick={() => onTaskClick && onTaskClick({ id: depId })}
-                      className="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded text-sm hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors cursor-pointer disabled:cursor-default disabled:opacity-50"
-                      disabled={!onTaskClick}
-                      title={onTaskClick ? `Click to view Task ${depId}` : `Task ${depId}`}
-                    >
-                      <ArrowRight className="w-3 h-3 inline mr-1" />
-                      {depId}
-                    </button>
-                  ))}
-                </div>
-              ) : (
-                <span className="text-gray-500 dark:text-gray-400 text-sm">No dependencies</span>
-              )}
-            </div>
-          </div>
-
-          {/* Description */}
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
-            {editMode ? (
-              <textarea
-                value={editedTask.description || ''}
-                onChange={(e) => setEditedTask({ ...editedTask, description: e.target.value })}
-                rows={3}
-                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
-                placeholder="Task description"
-              />
-            ) : (
-              <p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
-                {task.description || 'No description provided'}
-              </p>
-            )}
-          </div>
-
-          {/* Implementation Details */}
-          {task.details && (
-            <div className="border border-gray-200 dark:border-gray-700 rounded-lg">
-              <button
-                onClick={() => setShowDetails(!showDetails)}
-                className="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-              >
-                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                  Implementation Details
-                </span>
-                {showDetails ? (
-                  <ChevronDown className="w-4 h-4 text-gray-500" />
-                ) : (
-                  <ChevronRight className="w-4 h-4 text-gray-500" />
-                )}
-              </button>
-              {showDetails && (
-                <div className="border-t border-gray-200 dark:border-gray-700 p-4">
-                  {editMode ? (
-                    <textarea
-                      value={editedTask.details || ''}
-                      onChange={(e) => setEditedTask({ ...editedTask, details: e.target.value })}
-                      rows={4}
-                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
-                      placeholder="Implementation details"
-                    />
-                  ) : (
-                    <div className="bg-gray-50 dark:bg-gray-800 rounded-md p-4">
-                      <p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
-                        {task.details}
-                      </p>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Test Strategy */}
-          {task.testStrategy && (
-            <div className="border border-gray-200 dark:border-gray-700 rounded-lg">
-              <button
-                onClick={() => setShowTestStrategy(!showTestStrategy)}
-                className="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-              >
-                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                  Test Strategy
-                </span>
-                {showTestStrategy ? (
-                  <ChevronDown className="w-4 h-4 text-gray-500" />
-                ) : (
-                  <ChevronRight className="w-4 h-4 text-gray-500" />
-                )}
-              </button>
-              {showTestStrategy && (
-                <div className="border-t border-gray-200 dark:border-gray-700 p-4">
-                  <div className="bg-blue-50 dark:bg-blue-950 rounded-md p-4">
-                    <p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
-                      {task.testStrategy}
-                    </p>
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Subtasks */}
-          {task.subtasks && task.subtasks.length > 0 && (
-            <div className="space-y-3">
-              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                Subtasks ({task.subtasks.length})
-              </label>
-              <div className="space-y-2">
-                {task.subtasks.map(subtask => {
-                  const subtaskConfig = getStatusConfig(subtask.status);
-                  const SubtaskIcon = subtaskConfig.icon;
-                  return (
-                    <div key={subtask.id} className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-md">
-                      <SubtaskIcon className={cn('w-4 h-4', subtaskConfig.color)} />
-                      <div className="flex-1 min-w-0">
-                        <h4 className="font-medium text-gray-900 dark:text-white truncate">
-                          {subtask.title}
-                        </h4>
-                        {subtask.description && (
-                          <p className="text-sm text-gray-600 dark:text-gray-400 truncate">
-                            {subtask.description}
-                          </p>
-                        )}
-                      </div>
-                      <span className="text-xs text-gray-500 dark:text-gray-400">
-                        {subtask.id}
-                      </span>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-
-        </div>
-
-        {/* Footer */}
-        <div className="flex items-center justify-between p-4 md:p-6 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
-          <div className="text-sm text-gray-500 dark:text-gray-400">
-            Task ID: {task.id}
-          </div>
-          
-          <div className="flex items-center gap-2">
-            <button
-              onClick={onClose}
-              className="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors"
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TaskDetail;
--- a/src/components/TaskIndicator.jsx
+++ b/src/components/TaskIndicator.jsx
@@ -1,108 +0,0 @@
-import React from 'react';
-import { CheckCircle, Settings, X, AlertCircle } from 'lucide-react';
-import { cn } from '../lib/utils';
-
-/**
- * TaskIndicator Component
- * 
- * Displays TaskMaster status for projects in the sidebar with appropriate
- * icons and colors based on the project's TaskMaster configuration state.
- */
-const TaskIndicator = ({ 
-  status = 'not-configured', 
-  size = 'sm',
-  className = '',
-  showLabel = false 
-}) => {
-  const getIndicatorConfig = () => {
-    switch (status) {
-      case 'fully-configured':
-        return {
-          icon: CheckCircle,
-          color: 'text-green-500 dark:text-green-400',
-          bgColor: 'bg-green-50 dark:bg-green-950',
-          label: 'TaskMaster Ready',
-          title: 'TaskMaster fully configured with MCP server'
-        };
-      
-      case 'taskmaster-only':
-        return {
-          icon: Settings,
-          color: 'text-blue-500 dark:text-blue-400',
-          bgColor: 'bg-blue-50 dark:bg-blue-950',
-          label: 'TaskMaster Init',
-          title: 'TaskMaster initialized, MCP server needs setup'
-        };
-        
-      case 'mcp-only':
-        return {
-          icon: AlertCircle,
-          color: 'text-amber-500 dark:text-amber-400',
-          bgColor: 'bg-amber-50 dark:bg-amber-950',
-          label: 'MCP Ready',
-          title: 'MCP server configured, TaskMaster needs initialization'
-        };
-      
-      case 'not-configured':
-      case 'error':
-      default:
-        return {
-          icon: X,
-          color: 'text-gray-400 dark:text-gray-500',
-          bgColor: 'bg-gray-50 dark:bg-gray-900',
-          label: 'No TaskMaster',
-          title: 'TaskMaster not configured'
-        };
-    }
-  };
-
-  const config = getIndicatorConfig();
-  const Icon = config.icon;
-  
-  const sizeClasses = {
-    xs: 'w-3 h-3',
-    sm: 'w-4 h-4', 
-    md: 'w-5 h-5',
-    lg: 'w-6 h-6'
-  };
-
-  const paddingClasses = {
-    xs: 'p-0.5',
-    sm: 'p-1',
-    md: 'p-1.5', 
-    lg: 'p-2'
-  };
-
-  if (showLabel) {
-    return (
-      <div 
-        className={cn(
-          'inline-flex items-center gap-1.5 text-xs rounded-md px-2 py-1 transition-colors',
-          config.bgColor,
-          config.color,
-          className
-        )}
-        title={config.title}
-      >
-        <Icon className={sizeClasses[size]} />
-        <span className="font-medium">{config.label}</span>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cn(
-        'inline-flex items-center justify-center rounded-full transition-colors',
-        config.bgColor,
-        paddingClasses[size],
-        className
-      )}
-      title={config.title}
-    >
-      <Icon className={cn(sizeClasses[size], config.color)} />
-    </div>
-  );
-};
-
-export default TaskIndicator;
--- a/src/components/TaskList.jsx
+++ b/src/components/TaskList.jsx
--- a/src/components/TaskMasterSetupWizard.jsx
+++ b/src/components/TaskMasterSetupWizard.jsx
@@ -1,604 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { X, ChevronRight, ChevronLeft, CheckCircle, AlertCircle, Settings, Server, FileText, Sparkles, ExternalLink, Copy } from 'lucide-react';
-import { cn } from '../lib/utils';
-import { api } from '../utils/api';
-import { copyTextToClipboard } from '../utils/clipboard';
-
-const TaskMasterSetupWizard = ({ 
-  isOpen = true, 
-  onClose, 
-  onComplete,
-  currentProject,
-  className = ''
-}) => {
-  const [currentStep, setCurrentStep] = useState(1);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [setupData, setSetupData] = useState({
-    projectRoot: '',
-    initGit: true,
-    storeTasksInGit: true,
-    addAliases: true,
-    skipInstall: false,
-    rules: ['claude'],
-    mcpConfigured: false,
-    prdContent: ''
-  });
-
-  const totalSteps = 4;
-
-  useEffect(() => {
-    if (currentProject) {
-      setSetupData(prev => ({
-        ...prev,
-        projectRoot: currentProject.path || ''
-      }));
-    }
-  }, [currentProject]);
-
-  const steps = [
-    {
-      id: 1,
-      title: 'Project Configuration',
-      description: 'Configure basic TaskMaster settings for your project'
-    },
-    {
-      id: 2,
-      title: 'MCP Server Setup',
-      description: 'Ensure TaskMaster MCP server is properly configured'
-    },
-    {
-      id: 3,
-      title: 'PRD Creation',
-      description: 'Create or import a Product Requirements Document'
-    },
-    {
-      id: 4,
-      title: 'Complete Setup',
-      description: 'Initialize TaskMaster and generate initial tasks'
-    }
-  ];
-
-  const handleNext = async () => {
-    setError(null);
-    
-    try {
-      if (currentStep === 1) {
-        // Validate project configuration
-        if (!setupData.projectRoot) {
-          setError('Project root path is required');
-          return;
-        }
-        setCurrentStep(2);
-      } else if (currentStep === 2) {
-        // Check MCP server status
-        setLoading(true);
-        try {
-          const mcpStatus = await api.get('/mcp-utils/taskmaster-server');
-          setSetupData(prev => ({
-            ...prev,
-            mcpConfigured: mcpStatus.hasMCPServer && mcpStatus.isConfigured
-          }));
-          setCurrentStep(3);
-        } catch (err) {
-          setError('Failed to check MCP server status. You can continue but some features may not work.');
-          setCurrentStep(3);
-        }
-      } else if (currentStep === 3) {
-        // Validate PRD step
-        if (!setupData.prdContent.trim()) {
-          setError('Please create or import a PRD to continue');
-          return;
-        }
-        setCurrentStep(4);
-      } else if (currentStep === 4) {
-        // Complete setup
-        await completeSetup();
-      }
-    } catch (err) {
-      setError(err.message || 'An error occurred');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handlePrevious = () => {
-    if (currentStep > 1) {
-      setCurrentStep(currentStep - 1);
-      setError(null);
-    }
-  };
-
-  const completeSetup = async () => {
-    setLoading(true);
-    try {
-      // Initialize TaskMaster project
-      const initResponse = await api.post('/taskmaster/initialize', {
-        projectRoot: setupData.projectRoot,
-        initGit: setupData.initGit,
-        storeTasksInGit: setupData.storeTasksInGit,
-        addAliases: setupData.addAliases,
-        skipInstall: setupData.skipInstall,
-        rules: setupData.rules,
-        yes: true
-      });
-
-      if (!initResponse.ok) {
-        throw new Error('Failed to initialize TaskMaster project');
-      }
-
-      // Save PRD content if provided
-      if (setupData.prdContent.trim()) {
-        const prdResponse = await api.post('/taskmaster/save-prd', {
-          projectRoot: setupData.projectRoot,
-          content: setupData.prdContent
-        });
-
-        if (!prdResponse.ok) {
-          console.warn('Failed to save PRD content');
-        }
-      }
-
-      // Parse PRD to generate initial tasks
-      if (setupData.prdContent.trim()) {
-        const parseResponse = await api.post('/taskmaster/parse-prd', {
-          projectRoot: setupData.projectRoot,
-          input: '.taskmaster/docs/prd.txt',
-          numTasks: '10',
-          research: false,
-          force: false
-        });
-
-        if (!parseResponse.ok) {
-          console.warn('Failed to parse PRD and generate tasks');
-        }
-      }
-
-      onComplete?.();
-      onClose?.();
-    } catch (err) {
-      setError(err.message || 'Failed to complete TaskMaster setup');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const copyMCPConfig = () => {
-    const mcpConfig = `{
-  "mcpServers": {
-    "": {
-      "command": "npx",
-      "args": ["-y", "--package=task-master-ai", "task-master-ai"],
-      "env": {
-        "ANTHROPIC_API_KEY": "your_anthropic_key_here",
-        "PERPLEXITY_API_KEY": "your_perplexity_key_here"
-      }
-    }
-  }
-}`;
-    copyTextToClipboard(mcpConfig);
-  };
-
-  const renderStepContent = () => {
-    switch (currentStep) {
-      case 1:
-        return (
-          <div className="space-y-6">
-            <div className="text-center">
-              <Settings className="w-12 h-12 text-blue-600 mx-auto mb-4" />
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-                Project Configuration
-              </h3>
-              <p className="text-gray-600 dark:text-gray-400">
-                Configure TaskMaster settings for your project
-              </p>
-            </div>
-
-            <div className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  Project Root Path
-                </label>
-                <input
-                  type="text"
-                  value={setupData.projectRoot}
-                  onChange={(e) => setSetupData(prev => ({ ...prev, projectRoot: e.target.value }))}
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
-                  placeholder="/path/to/your/project"
-                />
-              </div>
-
-              <div className="space-y-3">
-                <h4 className="font-medium text-gray-900 dark:text-white">Options</h4>
-                
-                <label className="flex items-center gap-3">
-                  <input
-                    type="checkbox"
-                    checked={setupData.initGit}
-                    onChange={(e) => setSetupData(prev => ({ ...prev, initGit: e.target.checked }))}
-                    className="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
-                  />
-                  <span className="text-sm text-gray-700 dark:text-gray-300">Initialize Git repository</span>
-                </label>
-
-                <label className="flex items-center gap-3">
-                  <input
-                    type="checkbox"
-                    checked={setupData.storeTasksInGit}
-                    onChange={(e) => setSetupData(prev => ({ ...prev, storeTasksInGit: e.target.checked }))}
-                    className="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
-                  />
-                  <span className="text-sm text-gray-700 dark:text-gray-300">Store tasks in Git</span>
-                </label>
-
-                <label className="flex items-center gap-3">
-                  <input
-                    type="checkbox"
-                    checked={setupData.addAliases}
-                    onChange={(e) => setSetupData(prev => ({ ...prev, addAliases: e.target.checked }))}
-                    className="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
-                  />
-                  <span className="text-sm text-gray-700 dark:text-gray-300">Add shell aliases (tm, taskmaster)</span>
-                </label>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  Rule Profiles
-                </label>
-                <div className="grid grid-cols-3 gap-2">
-                  {['claude', 'cursor', 'vscode', 'roo', 'cline', 'windsurf'].map(rule => (
-                    <label key={rule} className="flex items-center gap-2">
-                      <input
-                        type="checkbox"
-                        checked={setupData.rules.includes(rule)}
-                        onChange={(e) => {
-                          if (e.target.checked) {
-                            setSetupData(prev => ({ ...prev, rules: [...prev.rules, rule] }));
-                          } else {
-                            setSetupData(prev => ({ ...prev, rules: prev.rules.filter(r => r !== rule) }));
-                          }
-                        }}
-                        className="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
-                      />
-                      <span className="text-sm text-gray-700 dark:text-gray-300 capitalize">{rule}</span>
-                    </label>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-        );
-
-      case 2:
-        return (
-          <div className="space-y-6">
-            <div className="text-center">
-              <Server className="w-12 h-12 text-purple-600 mx-auto mb-4" />
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-                MCP Server Setup
-              </h3>
-              <p className="text-gray-600 dark:text-gray-400">
-                TaskMaster works best with the MCP server configured
-              </p>
-            </div>
-
-            <div className="bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
-              <div className="flex items-start gap-3">
-                <AlertCircle className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5" />
-                <div>
-                  <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-1">
-                    MCP Server Configuration
-                  </h4>
-                  <p className="text-sm text-blue-800 dark:text-blue-200 mb-3">
-                    To enable full TaskMaster integration, add the MCP server configuration to your Claude settings.
-                  </p>
-                  
-                  <div className="bg-white dark:bg-gray-800 rounded border p-3 mb-3">
-                    <div className="flex items-center justify-between mb-2">
-                      <span className="text-sm font-mono text-gray-600 dark:text-gray-400">.mcp.json</span>
-                      <button
-                        onClick={copyMCPConfig}
-                        className="flex items-center gap-1 px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
-                      >
-                        <Copy className="w-3 h-3" />
-                        Copy
-                      </button>
-                    </div>
-                    <pre className="text-xs text-gray-800 dark:text-gray-200 whitespace-pre-wrap">
-{`{
-  "mcpServers": {
-    "task-master-ai": {
-      "command": "npx",
-      "args": ["-y", "--package=task-master-ai", "task-master-ai"],
-      "env": {
-        "ANTHROPIC_API_KEY": "your_anthropic_key_here",
-        "PERPLEXITY_API_KEY": "your_perplexity_key_here"
-      }
-    }
-  }
-}`}
-                    </pre>
-                  </div>
-
-                  <div className="flex items-center gap-2 text-sm">
-                    <a
-                      href="https://docs.anthropic.com/en/docs/build-with-claude/tool-use/mcp-servers"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 flex items-center gap-1"
-                    >
-                      Learn about MCP setup
-                      <ExternalLink className="w-3 h-3" />
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
-              <h4 className="font-medium text-gray-900 dark:text-white mb-2">Current Status</h4>
-              <div className="flex items-center gap-2">
-                {setupData.mcpConfigured ? (
-                  <>
-                    <CheckCircle className="w-4 h-4 text-green-500" />
-                    <span className="text-sm text-green-700 dark:text-green-300">MCP server is configured</span>
-                  </>
-                ) : (
-                  <>
-                    <AlertCircle className="w-4 h-4 text-amber-500" />
-                    <span className="text-sm text-amber-700 dark:text-amber-300">MCP server not detected (optional)</span>
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-        );
-
-      case 3:
-        return (
-          <div className="space-y-6">
-            <div className="text-center">
-              <FileText className="w-12 h-12 text-green-600 mx-auto mb-4" />
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-                Product Requirements Document
-              </h3>
-              <p className="text-gray-600 dark:text-gray-400">
-                Create or import a PRD to generate initial tasks
-              </p>
-            </div>
-
-            <div className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  PRD Content
-                </label>
-                <textarea
-                  value={setupData.prdContent}
-                  onChange={(e) => setSetupData(prev => ({ ...prev, prdContent: e.target.value }))}
-                  rows={12}
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-mono text-sm"
-                  placeholder="# Product Requirements Document
-
-## 1. Overview
-Describe your project or feature...
-
-## 2. Objectives
- Primary goal
- Success metrics
-
-## 3. User Stories
- As a user, I want...
-
-## 4. Requirements
- Feature requirements
- Technical requirements
-
-## 5. Implementation Plan
- Phase 1: Core features
- Phase 2: Enhancements"
-                />
-              </div>
-
-              <div className="bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
-                <div className="flex items-start gap-3">
-                  <Sparkles className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5" />
-                  <div>
-                    <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-1">
-                      AI Task Generation
-                    </h4>
-                    <p className="text-sm text-blue-800 dark:text-blue-200">
-                      TaskMaster will analyze your PRD and automatically generate a structured task list with dependencies, priorities, and implementation details.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        );
-
-      case 4:
-        return (
-          <div className="space-y-6">
-            <div className="text-center">
-              <CheckCircle className="w-12 h-12 text-green-600 mx-auto mb-4" />
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-                Complete Setup
-              </h3>
-              <p className="text-gray-600 dark:text-gray-400">
-                Ready to initialize TaskMaster for your project
-              </p>
-            </div>
-
-            <div className="bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800 rounded-lg p-4">
-              <h4 className="font-medium text-green-900 dark:text-green-100 mb-3">
-                Setup Summary
-              </h4>
-              <ul className="space-y-2 text-sm text-green-800 dark:text-green-200">
-                <li className="flex items-center gap-2">
-                  <CheckCircle className="w-4 h-4" />
-                  Project: {setupData.projectRoot}
-                </li>
-                <li className="flex items-center gap-2">
-                  <CheckCircle className="w-4 h-4" />
-                  Rules: {setupData.rules.join(', ')}
-                </li>
-                {setupData.mcpConfigured && (
-                  <li className="flex items-center gap-2">
-                    <CheckCircle className="w-4 h-4" />
-                    MCP server configured
-                  </li>
-                )}
-                <li className="flex items-center gap-2">
-                  <CheckCircle className="w-4 h-4" />
-                  PRD content ready ({setupData.prdContent.length} characters)
-                </li>
-              </ul>
-            </div>
-
-            <div className="bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
-              <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">
-                What happens next?
-              </h4>
-              <ol className="list-decimal list-inside space-y-1 text-sm text-blue-800 dark:text-blue-200">
-                <li>Initialize TaskMaster project structure</li>
-                <li>Save your PRD to <code>.taskmaster/docs/prd.txt</code></li>
-                <li>Generate initial tasks from your PRD</li>
-                <li>Set up project configuration and rules</li>
-              </ol>
-            </div>
-          </div>
-        );
-
-      default:
-        return null;
-    }
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="modal-backdrop fixed inset-0 flex items-center justify-center z-[100] md:p-4 bg-black/50">
-      <div className={cn(
-        'bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 md:rounded-lg shadow-xl',
-        'w-full md:max-w-4xl h-full md:h-[90vh] flex flex-col',
-        className
-      )}>
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 md:p-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
-          <div className="flex items-center gap-3">
-            <Sparkles className="w-6 h-6 text-blue-600" />
-            <div>
-              <h1 className="text-xl font-semibold text-gray-900 dark:text-white">
-                TaskMaster Setup Wizard
-              </h1>
-              <p className="text-sm text-gray-600 dark:text-gray-400">
-                Step {currentStep} of {totalSteps}: {steps[currentStep - 1]?.description}
-              </p>
-            </div>
-          </div>
-          
-          <button
-            onClick={onClose}
-            className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
-            title="Close"
-          >
-            <X className="w-5 h-5" />
-          </button>
-        </div>
-
-        {/* Progress Bar */}
-        <div className="px-4 md:px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-          <div className="flex items-center justify-between mb-2">
-            {steps.map((step, index) => (
-              <div key={step.id} className="flex items-center">
-                <div className={cn(
-                  'w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-colors',
-                  currentStep > step.id 
-                    ? 'bg-green-500 text-white' 
-                    : currentStep === step.id
-                    ? 'bg-blue-500 text-white'
-                    : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
-                )}>
-                  {currentStep > step.id ? (
-                    <CheckCircle className="w-4 h-4" />
-                  ) : (
-                    step.id
-                  )}
-                </div>
-                {index < steps.length - 1 && (
-                  <div className={cn(
-                    'w-16 h-1 mx-2 rounded',
-                    currentStep > step.id 
-                      ? 'bg-green-500' 
-                      : 'bg-gray-200 dark:bg-gray-700'
-                  )} />
-                )}
-              </div>
-            ))}
-          </div>
-          <div className="flex justify-between text-xs text-gray-600 dark:text-gray-400">
-            {steps.map(step => (
-              <span key={step.id} className="text-center">
-                {step.title}
-              </span>
-            ))}
-          </div>
-        </div>
-
-        {/* Content */}
-        <div className="flex-1 overflow-y-auto p-4 md:p-6">
-          {renderStepContent()}
-          
-          {error && (
-            <div className="mt-4 bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800 rounded-lg p-4">
-              <div className="flex items-start gap-3">
-                <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 mt-0.5" />
-                <div>
-                  <h4 className="font-medium text-red-900 dark:text-red-100 mb-1">Error</h4>
-                  <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="flex items-center justify-between p-4 md:p-6 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
-          <button
-            onClick={handlePrevious}
-            disabled={currentStep === 1}
-            className="flex items-center gap-2 px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            <ChevronLeft className="w-4 h-4" />
-            Previous
-          </button>
-          
-          <div className="text-sm text-gray-500 dark:text-gray-400">
-            {currentStep} of {totalSteps}
-          </div>
-          
-          <button
-            onClick={handleNext}
-            disabled={loading}
-            className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {loading ? (
-              <>
-                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                {currentStep === totalSteps ? 'Setting up...' : 'Processing...'}
-              </>
-            ) : (
-              <>
-                {currentStep === totalSteps ? 'Complete Setup' : 'Next'}
-                <ChevronRight className="w-4 h-4" />
-              </>
-            )}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TaskMasterSetupWizard;
--- a/src/components/TaskMasterStatus.jsx
+++ b/src/components/TaskMasterStatus.jsx
@@ -1,86 +0,0 @@
-import React from 'react';
-import { useTaskMaster } from '../contexts/TaskMasterContext';
-import TaskIndicator from './TaskIndicator';
-
-const TaskMasterStatus = () => {
-  const { 
-    currentProject, 
-    projectTaskMaster, 
-    mcpServerStatus,
-    isLoading,
-    isLoadingMCP,
-    error 
-  } = useTaskMaster();
-
-  if (isLoading || isLoadingMCP) {
-    return (
-      <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
-        <div className="animate-spin w-3 h-3 border border-gray-300 border-t-blue-500 rounded-full mr-2"></div>
-        Loading TaskMaster status...
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center text-sm text-red-500 dark:text-red-400">
-        <span className="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
-        TaskMaster Error
-      </div>
-    );
-  }
-
-  // Show MCP server status
-  const mcpConfigured = mcpServerStatus?.hasMCPServer && mcpServerStatus?.isConfigured;
-  
-  // Show project TaskMaster status
-  const projectConfigured = currentProject?.taskmaster?.hasTaskmaster;
-  const taskCount = currentProject?.taskmaster?.metadata?.taskCount || 0;
-  const completedCount = currentProject?.taskmaster?.metadata?.completed || 0;
-
-  if (!currentProject) {
-    return (
-      <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
-        <span className="w-2 h-2 bg-gray-400 rounded-full mr-2"></span>
-        No project selected
-      </div>
-    );
-  }
-
-  // Determine overall status for TaskIndicator
-  let overallStatus = 'not-configured';
-  if (projectConfigured && mcpConfigured) {
-    overallStatus = 'fully-configured';
-  } else if (projectConfigured) {
-    overallStatus = 'taskmaster-only';
-  } else if (mcpConfigured) {
-    overallStatus = 'mcp-only';
-  }
-
-  return (
-    <div className="flex items-center gap-3">
-      {/* TaskMaster Status Indicator */}
-      <TaskIndicator 
-        status={overallStatus} 
-        size="md"
-        showLabel={true}
-      />
-
-      {/* Task Progress Info */}
-      {projectConfigured && (
-        <div className="text-xs text-gray-600 dark:text-gray-400">
-          <span className="font-medium">
-            {completedCount}/{taskCount} tasks
-          </span>
-          {taskCount > 0 && (
-            <span className="ml-2 opacity-75">
-              ({Math.round((completedCount / taskCount) * 100)}%)
-            </span>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default TaskMasterStatus;
--- a/src/components/TasksSettings.jsx
+++ b/src/components/TasksSettings.jsx
@@ -1,3 +0,0 @@
-import TasksSettingsTab from './settings/view/tabs/tasks-settings/TasksSettingsTab';
-
-export default TasksSettingsTab;
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -1,91 +0,0 @@
-import React from 'react';
-import { Badge } from './ui/badge';
-import { CheckCircle2, Clock, Circle } from 'lucide-react';
-
-const TodoList = ({ todos, isResult = false }) => {
-  if (!todos || !Array.isArray(todos)) {
-    return null;
-  }
-
-  const getStatusIcon = (status) => {
-    switch (status) {
-      case 'completed':
-        return <CheckCircle2 className="w-3.5 h-3.5 text-green-500 dark:text-green-400" />;
-      case 'in_progress':
-        return <Clock className="w-3.5 h-3.5 text-blue-500 dark:text-blue-400" />;
-      case 'pending':
-      default:
-        return <Circle className="w-3.5 h-3.5 text-gray-400 dark:text-gray-500" />;
-    }
-  };
-
-  const getStatusColor = (status) => {
-    switch (status) {
-      case 'completed':
-        return 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 border-green-200 dark:border-green-800';
-      case 'in_progress':
-        return 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 border-blue-200 dark:border-blue-800';
-      case 'pending':
-      default:
-        return 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700';
-    }
-  };
-
-  const getPriorityColor = (priority) => {
-    switch (priority) {
-      case 'high':
-        return 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800';
-      case 'medium':
-        return 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800';
-      case 'low':
-      default:
-        return 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700';
-    }
-  };
-
-  return (
-    <div className="space-y-1.5">
-      {isResult && (
-        <div className="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">
-          Todo List ({todos.length} {todos.length === 1 ? 'item' : 'items'})
-        </div>
-      )}
-
-      {todos.map((todo, index) => (
-        <div
-          key={todo.id || `todo-${index}`}
-          className="flex items-start gap-2 p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded transition-colors"
-        >
-          <div className="flex-shrink-0 mt-0.5">
-            {getStatusIcon(todo.status)}
-          </div>
-
-          <div className="flex-1 min-w-0">
-            <div className="flex items-start justify-between gap-2 mb-0.5">
-              <p className={`text-xs font-medium ${todo.status === 'completed' ? 'line-through text-gray-500 dark:text-gray-400' : 'text-gray-900 dark:text-gray-100'}`}>
-                {todo.content}
-              </p>
-
-              <div className="flex gap-1 flex-shrink-0">
-                <Badge
-                  variant="outline"
-                  className={`text-[10px] px-1.5 py-px ${getPriorityColor(todo.priority)}`}
-                >
-                  {todo.priority}
-                </Badge>
-                <Badge
-                  variant="outline"
-                  className={`text-[10px] px-1.5 py-px ${getStatusColor(todo.status)}`}
-                >
-                  {todo.status.replace('_', ' ')}
-                </Badge>
-              </div>
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default TodoList;
--- a/src/components/Tooltip.jsx
+++ b/src/components/Tooltip.jsx
@@ -1,91 +0,0 @@
-import React, { useState } from 'react';
-import { cn } from '../lib/utils';
-
-const Tooltip = ({ 
-  children, 
-  content, 
-  position = 'top',
-  className = '',
-  delay = 500
-}) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const [timeoutId, setTimeoutId] = useState(null);
-
-  const handleMouseEnter = () => {
-    const id = setTimeout(() => {
-      setIsVisible(true);
-    }, delay);
-    setTimeoutId(id);
-  };
-
-  const handleMouseLeave = () => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-      setTimeoutId(null);
-    }
-    setIsVisible(false);
-  };
-
-  const getPositionClasses = () => {
-    switch (position) {
-      case 'top':
-        return 'bottom-full left-1/2 transform -translate-x-1/2 mb-2';
-      case 'bottom':
-        return 'top-full left-1/2 transform -translate-x-1/2 mt-2';
-      case 'left':
-        return 'right-full top-1/2 transform -translate-y-1/2 mr-2';
-      case 'right':
-        return 'left-full top-1/2 transform -translate-y-1/2 ml-2';
-      default:
-        return 'bottom-full left-1/2 transform -translate-x-1/2 mb-2';
-    }
-  };
-
-  const getArrowClasses = () => {
-    switch (position) {
-      case 'top':
-        return 'top-full left-1/2 transform -translate-x-1/2 border-t-gray-900 dark:border-t-gray-100';
-      case 'bottom':
-        return 'bottom-full left-1/2 transform -translate-x-1/2 border-b-gray-900 dark:border-b-gray-100';
-      case 'left':
-        return 'left-full top-1/2 transform -translate-y-1/2 border-l-gray-900 dark:border-l-gray-100';
-      case 'right':
-        return 'right-full top-1/2 transform -translate-y-1/2 border-r-gray-900 dark:border-r-gray-100';
-      default:
-        return 'top-full left-1/2 transform -translate-x-1/2 border-t-gray-900 dark:border-t-gray-100';
-    }
-  };
-
-  if (!content) {
-    return children;
-  }
-
-  return (
-    <div 
-      className="relative inline-block"
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      {children}
-      
-      {isVisible && (
-        <div className={cn(
-          'absolute z-50 px-2 py-1 text-xs font-medium text-white bg-gray-900 dark:bg-gray-100 dark:text-gray-900 rounded shadow-lg whitespace-nowrap pointer-events-none',
-          'animate-in fade-in-0 zoom-in-95 duration-200',
-          getPositionClasses(),
-          className
-        )}>
-          {content}
-          
-          {/* Arrow */}
-          <div className={cn(
-            'absolute w-0 h-0 border-4 border-transparent',
-            getArrowClasses()
-          )} />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Tooltip;
--- a/src/components/app/AppContent.tsx
+++ b/src/components/app/AppContent.tsx
@@ -1,22 +1,21 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-
 import Sidebar from '../sidebar/view/Sidebar';
 import MainContent from '../main-content/view/MainContent';
-import MobileNav from '../MobileNav';
-
 import { useWebSocket } from '../../contexts/WebSocketContext';
 import { useDeviceSettings } from '../../hooks/useDeviceSettings';
 import { useSessionProtection } from '../../hooks/useSessionProtection';
 import { useProjectsState } from '../../hooks/useProjectsState';
+import MobileNav from './MobileNav';

 export default function AppContent() {
  const navigate = useNavigate();
  const { sessionId } = useParams<{ sessionId?: string }>();
  const { t } = useTranslation('common');
  const { isMobile } = useDeviceSettings({ trackPWA: false });
-  const { ws, sendMessage, latestMessage } = useWebSocket();
+  const { ws, sendMessage, latestMessage, isConnected } = useWebSocket();
+  const wasConnectedRef = useRef(false);

  const {
    activeSessions,
@@ -41,7 +40,7 @@ export default function AppContent() {
    setIsInputFocused,
    setShowSettings,
    openSettings,
-    fetchProjects,
+    refreshProjectsSilently,
    sidebarSharedProps,
  } = useProjectsState({
    sessionId,
@@ -52,14 +51,16 @@ export default function AppContent() {
  });

  useEffect(() => {
-    window.refreshProjects = fetchProjects;
+    // Expose a non-blocking refresh for chat/session flows.
+    // Full loading refreshes are still available through direct fetchProjects calls.
+    window.refreshProjects = refreshProjectsSilently;

    return () => {
-      if (window.refreshProjects === fetchProjects) {
+      if (window.refreshProjects === refreshProjectsSilently) {
        delete window.refreshProjects;
      }
    };
-  }, [fetchProjects]);
+  }, [refreshProjectsSilently]);

  useEffect(() => {
    window.openSettings = openSettings;
@@ -71,6 +72,24 @@ export default function AppContent() {
    };
  }, [openSettings]);

+  // Permission recovery: query pending permissions on WebSocket reconnect or session change
+  useEffect(() => {
+    const isReconnect = isConnected && !wasConnectedRef.current;
+
+    if (isReconnect) {
+      wasConnectedRef.current = true;
+    } else if (!isConnected) {
+      wasConnectedRef.current = false;
+    }
+
+    if (isConnected && selectedSession?.id) {
+      sendMessage({
+        type: 'get-pending-permissions',
+        sessionId: selectedSession.id
+      });
+    }
+  }, [isConnected, selectedSession?.id, sendMessage]);
+
  return (
    <div className="fixed inset-0 flex bg-background">
      {!isMobile ? (
@@ -79,7 +98,7 @@ export default function AppContent() {
        </div>
      ) : (
        <div
-          className={`fixed inset-0 z-50 flex transition-all duration-150 ease-out ${sidebarOpen ? 'opacity-100 visible' : 'opacity-0 invisible'
+          className={`fixed inset-0 z-50 flex transition-all duration-150 ease-out ${sidebarOpen ? 'visible opacity-100' : 'invisible opacity-0'
            }`}
        >
          <button
@@ -96,7 +115,7 @@ export default function AppContent() {
            aria-label={t('versionUpdate.ariaLabels.closeSidebar')}
          />
          <div
-            className={`relative w-[85vw] max-w-sm sm:w-80 h-full bg-card border-r border-border/40 transform transition-transform duration-150 ease-out ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'
+            className={`relative h-full w-[85vw] max-w-sm transform border-r border-border/40 bg-card transition-transform duration-150 ease-out sm:w-80 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'
              }`}
            onClick={(event) => event.stopPropagation()}
            onTouchStart={(event) => event.stopPropagation()}
@@ -106,7 +125,7 @@ export default function AppContent() {
        </div>
      )}

-      <div className={`flex-1 flex flex-col min-w-0 ${isMobile ? 'pb-mobile-nav' : ''}`}>
+      <div className={`flex min-w-0 flex-1 flex-col ${isMobile ? 'pb-mobile-nav' : ''}`}>
        <MainContent
          selectedProject={selectedProject}
          selectedSession={selectedSession}
--- a/src/components/app/MobileNav.tsx
+++ b/src/components/app/MobileNav.tsx
@@ -0,0 +1,179 @@
+import { useState, useRef, useEffect, type Dispatch, type SetStateAction } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  MessageSquare,
+  Folder,
+  Terminal,
+  GitBranch,
+  ClipboardCheck,
+  Ellipsis,
+  Puzzle,
+  Box,
+  Database,
+  Globe,
+  Wrench,
+  Zap,
+  BarChart3,
+  type LucideIcon,
+} from 'lucide-react';
+import { useTasksSettings } from '../../contexts/TasksSettingsContext';
+import { usePlugins } from '../../contexts/PluginsContext';
+import { AppTab } from '../../types/app';
+
+const PLUGIN_ICON_MAP: Record<string, LucideIcon> = {
+  Puzzle, Box, Database, Globe, Terminal, Wrench, Zap, BarChart3, Folder, MessageSquare, GitBranch,
+};
+
+type CoreTabId = Exclude<AppTab, `plugin:${string}` | 'preview'>;
+type CoreNavItem = {
+  id: CoreTabId;
+  icon: LucideIcon;
+  label: string;
+};
+
+type MobileNavProps = {
+  activeTab: AppTab;
+  setActiveTab: Dispatch<SetStateAction<AppTab>>;
+  isInputFocused: boolean;
+};
+
+export default function MobileNav({ activeTab, setActiveTab, isInputFocused }: MobileNavProps) {
+  const { t } = useTranslation(['common', 'settings']);
+  const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings();
+  const shouldShowTasksTab = Boolean(tasksEnabled && isTaskMasterInstalled);
+  const { plugins } = usePlugins();
+  const [moreOpen, setMoreOpen] = useState(false);
+  const moreRef = useRef<HTMLDivElement | null>(null);
+
+  const enabledPlugins = plugins.filter((p) => p.enabled);
+  const hasPlugins = enabledPlugins.length > 0;
+  const isPluginActive = activeTab.startsWith('plugin:');
+
+  // Close the menu on outside tap
+  useEffect(() => {
+    if (!moreOpen) return;
+    const handleTap = (e: PointerEvent) => {
+      const target = e.target;
+      if (moreRef.current && target instanceof Node && !moreRef.current.contains(target)) {
+        setMoreOpen(false);
+      }
+    };
+    document.addEventListener('pointerdown', handleTap);
+    return () => document.removeEventListener('pointerdown', handleTap);
+  }, [moreOpen]);
+
+  // Close menu when a plugin tab is selected
+  const selectPlugin = (name: string) => {
+    const pluginTab = `plugin:${name}` as AppTab;
+    setActiveTab(pluginTab);
+    setMoreOpen(false);
+  };
+
+  const baseCoreItems: CoreNavItem[] = [
+    { id: 'chat', icon: MessageSquare, label: 'Chat' },
+    { id: 'shell', icon: Terminal, label: 'Shell' },
+    { id: 'files', icon: Folder, label: 'Files' },
+    { id: 'git', icon: GitBranch, label: 'Git' },
+  ];
+  const coreItems: CoreNavItem[] = shouldShowTasksTab
+    ? [...baseCoreItems, { id: 'tasks', icon: ClipboardCheck, label: 'Tasks' }]
+    : baseCoreItems;
+
+  return (
+    <div
+      className={`fixed bottom-0 left-0 right-0 z-50 transform px-3 pb-[max(8px,env(safe-area-inset-bottom))] transition-transform duration-300 ease-in-out ${isInputFocused ? 'translate-y-full' : 'translate-y-0'
+        }`}
+    >
+      <div className="nav-glass mobile-nav-float rounded-2xl border border-border/30">
+        <div className="flex items-center justify-around gap-0.5 px-1 py-1.5">
+          {coreItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = activeTab === item.id;
+
+            return (
+              <button
+                key={item.id}
+                onClick={() => setActiveTab(item.id)}
+                onTouchStart={(e) => {
+                  e.preventDefault();
+                  setActiveTab(item.id);
+                }}
+                className={`relative flex flex-1 touch-manipulation flex-col items-center justify-center gap-0.5 rounded-xl px-3 py-2 transition-all duration-200 active:scale-95 ${isActive
+                  ? 'text-primary'
+                  : 'text-muted-foreground hover:text-foreground'
+                  }`}
+                aria-label={item.label}
+                aria-current={isActive ? 'page' : undefined}
+              >
+                {isActive && (
+                  <div className="bg-primary/8 dark:bg-primary/12 absolute inset-0 rounded-xl" />
+                )}
+                <Icon
+                  className={`relative z-10 transition-all duration-200 ${isActive ? 'h-5 w-5' : 'h-[18px] w-[18px]'}`}
+                  strokeWidth={isActive ? 2.4 : 1.8}
+                />
+                <span className={`relative z-10 text-[10px] font-medium transition-all duration-200 ${isActive ? 'opacity-100' : 'opacity-60'}`}>
+                  {item.label}
+                </span>
+              </button>
+            );
+          })}
+
+          {/* "More" button — only shown when there are enabled plugins */}
+          {hasPlugins && (
+            <div ref={moreRef} className="relative flex-1">
+              <button
+                onClick={() => setMoreOpen((v) => !v)}
+                onTouchStart={(e) => {
+                  e.preventDefault();
+                  setMoreOpen((v) => !v);
+                }}
+                className={`relative flex w-full touch-manipulation flex-col items-center justify-center gap-0.5 rounded-xl px-3 py-2 transition-all duration-200 active:scale-95 ${isPluginActive || moreOpen
+                    ? 'text-primary'
+                    : 'text-muted-foreground hover:text-foreground'
+                  }`}
+                aria-label="More plugins"
+                aria-expanded={moreOpen}
+              >
+                {(isPluginActive && !moreOpen) && (
+                  <div className="bg-primary/8 dark:bg-primary/12 absolute inset-0 rounded-xl" />
+                )}
+                <Ellipsis
+                  className={`relative z-10 transition-all duration-200 ${isPluginActive ? 'h-5 w-5' : 'h-[18px] w-[18px]'}`}
+                  strokeWidth={isPluginActive ? 2.4 : 1.8}
+                />
+                <span className={`relative z-10 text-[10px] font-medium transition-all duration-200 ${isPluginActive || moreOpen ? 'opacity-100' : 'opacity-60'}`}>
+                  {t('settings:pluginSettings.morePlugins')}
+                </span>
+              </button>
+
+              {/* Popover menu */}
+              {moreOpen && (
+                <div className="animate-in fade-in slide-in-from-bottom-2 absolute bottom-full right-0 z-[60] mb-2 min-w-[180px] rounded-xl border border-border/40 bg-popover py-1.5 shadow-lg duration-150">
+                  {enabledPlugins.map((p) => {
+                    const Icon = PLUGIN_ICON_MAP[p.icon] || Puzzle;
+                    const isActive = activeTab === `plugin:${p.name}`;
+
+                    return (
+                      <button
+                        key={p.name}
+                        onClick={() => selectPlugin(p.name)}
+                        className={`flex w-full items-center gap-2.5 px-3.5 py-2.5 text-sm transition-colors ${isActive
+                            ? 'bg-primary/8 text-primary'
+                            : 'text-foreground hover:bg-muted/60'
+                          }`}
+                      >
+                        <Icon className="h-4 w-4 flex-shrink-0" strokeWidth={isActive ? 2.2 : 1.8} />
+                        <span className="truncate">{p.displayName}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/auth/constants.ts
+++ b/src/components/auth/constants.ts
@@ -0,0 +1,8 @@
+export const AUTH_TOKEN_STORAGE_KEY = 'auth-token';
+
+export const AUTH_ERROR_MESSAGES = {
+  authStatusCheckFailed: 'Failed to check authentication status',
+  loginFailed: 'Login failed',
+  registrationFailed: 'Registration failed',
+  networkError: 'Network error. Please try again.',
+} as const;
--- a/src/components/auth/context/AuthContext.tsx
+++ b/src/components/auth/context/AuthContext.tsx
@@ -0,0 +1,222 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { IS_PLATFORM } from '../../../constants/config';
+import { api } from '../../../utils/api';
+import { AUTH_ERROR_MESSAGES, AUTH_TOKEN_STORAGE_KEY } from '../constants';
+import type {
+  AuthContextValue,
+  AuthProviderProps,
+  AuthSessionPayload,
+  AuthStatusPayload,
+  AuthUser,
+  AuthUserPayload,
+  OnboardingStatusPayload,
+} from '../types';
+import { parseJsonSafely, resolveApiErrorMessage } from '../utils';
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+const readStoredToken = (): string | null => localStorage.getItem(AUTH_TOKEN_STORAGE_KEY);
+
+const persistToken = (token: string) => {
+  localStorage.setItem(AUTH_TOKEN_STORAGE_KEY, token);
+};
+
+const clearStoredToken = () => {
+  localStorage.removeItem(AUTH_TOKEN_STORAGE_KEY);
+};
+
+export function useAuth(): AuthContextValue {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+
+  return context;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [token, setToken] = useState<string | null>(() => readStoredToken());
+  const [isLoading, setIsLoading] = useState(true);
+  const [needsSetup, setNeedsSetup] = useState(false);
+  const [hasCompletedOnboarding, setHasCompletedOnboarding] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const setSession = useCallback((nextUser: AuthUser, nextToken: string) => {
+    setUser(nextUser);
+    setToken(nextToken);
+    persistToken(nextToken);
+  }, []);
+
+  const clearSession = useCallback(() => {
+    setUser(null);
+    setToken(null);
+    clearStoredToken();
+  }, []);
+
+  const checkOnboardingStatus = useCallback(async () => {
+    try {
+      const response = await api.user.onboardingStatus();
+      if (!response.ok) {
+        return;
+      }
+
+      const payload = await parseJsonSafely<OnboardingStatusPayload>(response);
+      setHasCompletedOnboarding(Boolean(payload?.hasCompletedOnboarding));
+    } catch (caughtError) {
+      console.error('Error checking onboarding status:', caughtError);
+      // Fail open to avoid blocking access on transient onboarding status errors.
+      setHasCompletedOnboarding(true);
+    }
+  }, []);
+
+  const refreshOnboardingStatus = useCallback(async () => {
+    await checkOnboardingStatus();
+  }, [checkOnboardingStatus]);
+
+  const checkAuthStatus = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const statusResponse = await api.auth.status();
+      const statusPayload = await parseJsonSafely<AuthStatusPayload>(statusResponse);
+
+      if (statusPayload?.needsSetup) {
+        setNeedsSetup(true);
+        return;
+      }
+
+      setNeedsSetup(false);
+
+      if (!token) {
+        return;
+      }
+
+      const userResponse = await api.auth.user();
+      if (!userResponse.ok) {
+        clearSession();
+        return;
+      }
+
+      const userPayload = await parseJsonSafely<AuthUserPayload>(userResponse);
+      if (!userPayload?.user) {
+        clearSession();
+        return;
+      }
+
+      setUser(userPayload.user);
+      await checkOnboardingStatus();
+    } catch (caughtError) {
+      console.error('[Auth] Auth status check failed:', caughtError);
+      setError(AUTH_ERROR_MESSAGES.authStatusCheckFailed);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [checkOnboardingStatus, clearSession, token]);
+
+  useEffect(() => {
+    if (IS_PLATFORM) {
+      setUser({ username: 'platform-user' });
+      setNeedsSetup(false);
+      void checkOnboardingStatus().finally(() => {
+        setIsLoading(false);
+      });
+      return;
+    }
+
+    void checkAuthStatus();
+  }, [checkAuthStatus, checkOnboardingStatus]);
+
+  const login = useCallback<AuthContextValue['login']>(
+    async (username, password) => {
+      try {
+        setError(null);
+        const response = await api.auth.login(username, password);
+        const payload = await parseJsonSafely<AuthSessionPayload>(response);
+
+        if (!response.ok || !payload?.token || !payload.user) {
+          const message = resolveApiErrorMessage(payload, AUTH_ERROR_MESSAGES.loginFailed);
+          setError(message);
+          return { success: false, error: message };
+        }
+
+        setSession(payload.user, payload.token);
+        setNeedsSetup(false);
+        await checkOnboardingStatus();
+        return { success: true };
+      } catch (caughtError) {
+        console.error('Login error:', caughtError);
+        setError(AUTH_ERROR_MESSAGES.networkError);
+        return { success: false, error: AUTH_ERROR_MESSAGES.networkError };
+      }
+    },
+    [checkOnboardingStatus, setSession],
+  );
+
+  const register = useCallback<AuthContextValue['register']>(
+    async (username, password) => {
+      try {
+        setError(null);
+        const response = await api.auth.register(username, password);
+        const payload = await parseJsonSafely<AuthSessionPayload>(response);
+
+        if (!response.ok || !payload?.token || !payload.user) {
+          const message = resolveApiErrorMessage(payload, AUTH_ERROR_MESSAGES.registrationFailed);
+          setError(message);
+          return { success: false, error: message };
+        }
+
+        setSession(payload.user, payload.token);
+        setNeedsSetup(false);
+        await checkOnboardingStatus();
+        return { success: true };
+      } catch (caughtError) {
+        console.error('Registration error:', caughtError);
+        setError(AUTH_ERROR_MESSAGES.networkError);
+        return { success: false, error: AUTH_ERROR_MESSAGES.networkError };
+      }
+    },
+    [checkOnboardingStatus, setSession],
+  );
+
+  const logout = useCallback(() => {
+    const tokenToInvalidate = token;
+    clearSession();
+
+    if (tokenToInvalidate) {
+      void api.auth.logout().catch((caughtError: unknown) => {
+        console.error('Logout endpoint error:', caughtError);
+      });
+    }
+  }, [clearSession, token]);
+
+  const contextValue = useMemo<AuthContextValue>(
+    () => ({
+      user,
+      token,
+      isLoading,
+      needsSetup,
+      hasCompletedOnboarding,
+      error,
+      login,
+      register,
+      logout,
+      refreshOnboardingStatus,
+    }),
+    [
+      error,
+      hasCompletedOnboarding,
+      isLoading,
+      login,
+      logout,
+      needsSetup,
+      refreshOnboardingStatus,
+      register,
+      token,
+      user,
+    ],
+  );
+
+  return <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>;
+}
--- a/src/components/auth/index.ts
+++ b/src/components/auth/index.ts
@@ -0,0 +1,2 @@
+export { AuthProvider, useAuth } from './context/AuthContext';
+export { default as ProtectedRoute } from './view/ProtectedRoute';
--- a/src/components/auth/types.ts
+++ b/src/components/auth/types.ts
@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react';
+
+export type AuthUser = {
+  id?: number | string;
+  username: string;
+  [key: string]: unknown;
+};
+
+export type AuthActionResult = { success: true } | { success: false; error: string };
+
+export type AuthSessionPayload = {
+  token?: string;
+  user?: AuthUser;
+  error?: string;
+  message?: string;
+};
+
+export type AuthStatusPayload = {
+  needsSetup?: boolean;
+};
+
+export type AuthUserPayload = {
+  user?: AuthUser;
+};
+
+export type OnboardingStatusPayload = {
+  hasCompletedOnboarding?: boolean;
+};
+
+export type ApiErrorPayload = {
+  error?: string;
+  message?: string;
+};
+
+export type AuthContextValue = {
+  user: AuthUser | null;
+  token: string | null;
+  isLoading: boolean;
+  needsSetup: boolean;
+  hasCompletedOnboarding: boolean;
+  error: string | null;
+  login: (username: string, password: string) => Promise<AuthActionResult>;
+  register: (username: string, password: string) => Promise<AuthActionResult>;
+  logout: () => void;
+  refreshOnboardingStatus: () => Promise<void>;
+};
+
+export type AuthProviderProps = {
+  children: ReactNode;
+};
--- a/src/components/auth/utils.ts
+++ b/src/components/auth/utils.ts
@@ -0,0 +1,17 @@
+import type { ApiErrorPayload } from './types';
+
+export async function parseJsonSafely<T>(response: Response): Promise<T | null> {
+  try {
+    return (await response.json()) as T;
+  } catch {
+    return null;
+  }
+}
+
+export function resolveApiErrorMessage(payload: ApiErrorPayload | null, fallback: string): string {
+  if (!payload) {
+    return fallback;
+  }
+
+  return payload.error ?? payload.message ?? fallback;
+}
--- a/src/components/auth/view/AuthErrorAlert.tsx
+++ b/src/components/auth/view/AuthErrorAlert.tsx
@@ -0,0 +1,15 @@
+type AuthErrorAlertProps = {
+  errorMessage: string;
+};
+
+export default function AuthErrorAlert({ errorMessage }: AuthErrorAlertProps) {
+  if (!errorMessage) {
+    return null;
+  }
+
+  return (
+    <div className="rounded-md border border-red-300 bg-red-100 p-3 dark:border-red-800 dark:bg-red-900/20">
+      <p className="text-sm text-red-700 dark:text-red-400">{errorMessage}</p>
+    </div>
+  );
+}
--- a/src/components/auth/view/AuthInputField.tsx
+++ b/src/components/auth/view/AuthInputField.tsx
@@ -0,0 +1,37 @@
+type AuthInputFieldProps = {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (nextValue: string) => void;
+  placeholder: string;
+  isDisabled: boolean;
+  type?: 'text' | 'password' | 'email';
+};
+
+export default function AuthInputField({
+  id,
+  label,
+  value,
+  onChange,
+  placeholder,
+  isDisabled,
+  type = 'text',
+}: AuthInputFieldProps) {
+  return (
+    <div>
+      <label htmlFor={id} className="mb-1 block text-sm font-medium text-foreground">
+        {label}
+      </label>
+      <input
+        id={id}
+        type={type}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        className="w-full rounded-md border border-border bg-background px-3 py-2 text-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
+        placeholder={placeholder}
+        required
+        disabled={isDisabled}
+      />
+    </div>
+  );
+}
--- a/src/components/auth/view/AuthLoadingScreen.tsx
+++ b/src/components/auth/view/AuthLoadingScreen.tsx
@@ -0,0 +1,31 @@
+import { MessageSquare } from 'lucide-react';
+
+const loadingDotAnimationDelays = ['0s', '0.1s', '0.2s'];
+
+export default function AuthLoadingScreen() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <div className="text-center">
+        <div className="mb-4 flex justify-center">
+          <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-primary shadow-sm">
+            <MessageSquare className="h-8 w-8 text-primary-foreground" />
+          </div>
+        </div>
+
+        <h1 className="mb-2 text-2xl font-bold text-foreground">Claude Code UI</h1>
+
+        <div className="flex items-center justify-center space-x-2">
+          {loadingDotAnimationDelays.map((delay) => (
+            <div
+              key={delay}
+              className="h-2 w-2 animate-bounce rounded-full bg-blue-500"
+              style={{ animationDelay: delay }}
+            />
+          ))}
+        </div>
+
+        <p className="mt-2 text-muted-foreground">Loading...</p>
+      </div>
+    </div>
+  );
+}
--- a/src/components/auth/view/AuthScreenLayout.tsx
+++ b/src/components/auth/view/AuthScreenLayout.tsx
@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+import { MessageSquare } from 'lucide-react';
+
+type AuthScreenLayoutProps = {
+  title: string;
+  description: string;
+  children: ReactNode;
+  footerText: string;
+  logo?: ReactNode;
+};
+
+export default function AuthScreenLayout({
+  title,
+  description,
+  children,
+  footerText,
+  logo,
+}: AuthScreenLayoutProps) {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md">
+        <div className="space-y-6 rounded-lg border border-border bg-card p-8 shadow-lg">
+          <div className="text-center">
+            <div className="mb-4 flex justify-center">
+              {logo ?? (
+                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-primary shadow-sm">
+                  <MessageSquare className="h-8 w-8 text-primary-foreground" />
+                </div>
+              )}
+            </div>
+            <h1 className="text-2xl font-bold text-foreground">{title}</h1>
+            <p className="mt-2 text-muted-foreground">{description}</p>
+          </div>
+
+          {children}
+
+          <div className="text-center">
+            <p className="text-sm text-muted-foreground">{footerText}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/auth/view/LoginForm.tsx
+++ b/src/components/auth/view/LoginForm.tsx
@@ -0,0 +1,90 @@
+import { useCallback, useState } from 'react';
+import type { FormEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAuth } from '../context/AuthContext';
+import AuthErrorAlert from './AuthErrorAlert';
+import AuthInputField from './AuthInputField';
+import AuthScreenLayout from './AuthScreenLayout';
+
+type LoginFormState = {
+  username: string;
+  password: string;
+};
+
+const initialState: LoginFormState = {
+  username: '',
+  password: '',
+};
+
+export default function LoginForm() {
+  const { t } = useTranslation('auth');
+  const { login } = useAuth();
+
+  const [formState, setFormState] = useState<LoginFormState>(initialState);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const updateField = useCallback((field: keyof LoginFormState, value: string) => {
+    setFormState((previous) => ({ ...previous, [field]: value }));
+  }, []);
+
+  const handleSubmit = useCallback(
+    async (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      setErrorMessage('');
+
+      // Keep form validation local so each auth screen owns its own UI feedback.
+      if (!formState.username.trim() || !formState.password) {
+        setErrorMessage(t('login.errors.requiredFields'));
+        return;
+      }
+
+      setIsSubmitting(true);
+      const result = await login(formState.username.trim(), formState.password);
+      if (!result.success) {
+        setErrorMessage(result.error);
+      }
+      setIsSubmitting(false);
+    },
+    [formState.password, formState.username, login, t],
+  );
+
+  return (
+    <AuthScreenLayout
+      title={t('login.title')}
+      description={t('login.description')}
+      footerText="Enter your credentials to access Claude Code UI"
+    >
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <AuthInputField
+          id="username"
+          label={t('login.username')}
+          value={formState.username}
+          onChange={(value) => updateField('username', value)}
+          placeholder={t('login.placeholders.username')}
+          isDisabled={isSubmitting}
+        />
+
+        <AuthInputField
+          id="password"
+          label={t('login.password')}
+          value={formState.password}
+          onChange={(value) => updateField('password', value)}
+          placeholder={t('login.placeholders.password')}
+          isDisabled={isSubmitting}
+          type="password"
+        />
+
+        <AuthErrorAlert errorMessage={errorMessage} />
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full rounded-md bg-blue-600 px-4 py-2 font-medium text-white transition-colors duration-200 hover:bg-blue-700 disabled:bg-blue-400"
+        >
+          {isSubmitting ? t('login.loading') : t('login.submit')}
+        </button>
+      </form>
+    </AuthScreenLayout>
+  );
+}
--- a/src/components/auth/view/ProtectedRoute.tsx
+++ b/src/components/auth/view/ProtectedRoute.tsx
@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import { IS_PLATFORM } from '../../../constants/config';
+import { useAuth } from '../context/AuthContext';
+import Onboarding from '../../onboarding/view/Onboarding';
+import AuthLoadingScreen from './AuthLoadingScreen';
+import LoginForm from './LoginForm';
+import SetupForm from './SetupForm';
+
+type ProtectedRouteProps = {
+  children: ReactNode;
+};
+
+export default function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { user, isLoading, needsSetup, hasCompletedOnboarding, refreshOnboardingStatus } = useAuth();
+
+  if (isLoading) {
+    return <AuthLoadingScreen />;
+  }
+
+  if (IS_PLATFORM) {
+    if (!hasCompletedOnboarding) {
+      return <Onboarding onComplete={refreshOnboardingStatus} />;
+    }
+
+    return <>{children}</>;
+  }
+
+  if (needsSetup) {
+    return <SetupForm />;
+  }
+
+  if (!user) {
+    return <LoginForm />;
+  }
+
+  if (!hasCompletedOnboarding) {
+    return <Onboarding onComplete={refreshOnboardingStatus} />;
+  }
+
+  return <>{children}</>;
+}
--- a/src/components/auth/view/SetupForm.tsx
+++ b/src/components/auth/view/SetupForm.tsx
@@ -0,0 +1,121 @@
+import { useCallback, useState } from 'react';
+import type { FormEvent } from 'react';
+import { useAuth } from '../context/AuthContext';
+import AuthErrorAlert from './AuthErrorAlert';
+import AuthInputField from './AuthInputField';
+import AuthScreenLayout from './AuthScreenLayout';
+
+type SetupFormState = {
+  username: string;
+  password: string;
+  confirmPassword: string;
+};
+
+const initialState: SetupFormState = {
+  username: '',
+  password: '',
+  confirmPassword: '',
+};
+
+function validateSetupForm(formState: SetupFormState): string | null {
+  if (!formState.username.trim() || !formState.password || !formState.confirmPassword) {
+    return 'Please fill in all fields.';
+  }
+
+  if (formState.username.trim().length < 3) {
+    return 'Username must be at least 3 characters long.';
+  }
+
+  if (formState.password.length < 6) {
+    return 'Password must be at least 6 characters long.';
+  }
+
+  if (formState.password !== formState.confirmPassword) {
+    return 'Passwords do not match.';
+  }
+
+  return null;
+}
+
+export default function SetupForm() {
+  const { register } = useAuth();
+
+  const [formState, setFormState] = useState<SetupFormState>(initialState);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const updateField = useCallback((field: keyof SetupFormState, value: string) => {
+    setFormState((previous) => ({ ...previous, [field]: value }));
+  }, []);
+
+  const handleSubmit = useCallback(
+    async (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      setErrorMessage('');
+
+      const validationError = validateSetupForm(formState);
+      if (validationError) {
+        setErrorMessage(validationError);
+        return;
+      }
+
+      setIsSubmitting(true);
+      const result = await register(formState.username.trim(), formState.password);
+      if (!result.success) {
+        setErrorMessage(result.error);
+      }
+      setIsSubmitting(false);
+    },
+    [formState, register],
+  );
+
+  return (
+    <AuthScreenLayout
+      title="Welcome to Claude Code UI"
+      description="Set up your account to get started"
+      footerText="This is a single-user system. Only one account can be created."
+      logo={<img src="/logo.svg" alt="CloudCLI" className="h-16 w-16" />}
+    >
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <AuthInputField
+          id="username"
+          label="Username"
+          value={formState.username}
+          onChange={(value) => updateField('username', value)}
+          placeholder="Enter your username"
+          isDisabled={isSubmitting}
+        />
+
+        <AuthInputField
+          id="password"
+          label="Password"
+          value={formState.password}
+          onChange={(value) => updateField('password', value)}
+          placeholder="Enter your password"
+          isDisabled={isSubmitting}
+          type="password"
+        />
+
+        <AuthInputField
+          id="confirmPassword"
+          label="Confirm Password"
+          value={formState.confirmPassword}
+          onChange={(value) => updateField('confirmPassword', value)}
+          placeholder="Confirm your password"
+          isDisabled={isSubmitting}
+          type="password"
+        />
+
+        <AuthErrorAlert errorMessage={errorMessage} />
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full rounded-md bg-blue-600 px-4 py-2 font-medium text-white transition-colors duration-200 hover:bg-blue-700 disabled:bg-blue-400"
+        >
+          {isSubmitting ? 'Setting up...' : 'Create Account'}
+        </button>
+      </form>
+    </AuthScreenLayout>
+  );
+}
--- a/src/components/chat/hooks/useChatComposerState.ts
+++ b/src/components/chat/hooks/useChatComposerState.ts
@@ -11,9 +11,7 @@ import type {
 } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { authenticatedFetch } from '../../../utils/api';
-
 import { thinkingModes } from '../constants/thinkingModes';
-
 import { grantClaudeToolPermission } from '../utils/chatPermissions';
 import { safeLocalStorage } from '../utils/chatStorage';
 import type {
@@ -21,10 +19,10 @@ import type {
  PendingPermissionRequest,
  PermissionMode,
 } from '../types/types';
-import { useFileMentions } from './useFileMentions';
-import { type SlashCommand, useSlashCommands } from './useSlashCommands';
 import type { Project, ProjectSession, SessionProvider } from '../../../types/app';
 import { escapeRegExp } from '../utils/chatFormatting';
+import { useFileMentions } from './useFileMentions';
+import { type SlashCommand, useSlashCommands } from './useSlashCommands';

 type PendingViewSession = {
  sessionId: string | null;
@@ -551,7 +549,7 @@ export function useChatComposerState({
      };

      setChatMessages((previous) => [...previous, userMessage]);
-      setIsLoading(true);
+      setIsLoading(true); // Processing banner starts
      setCanAbortSession(true);
      setClaudeStatus({
        text: 'Processing',
--- a/src/components/chat/hooks/useChatProviderState.ts
+++ b/src/components/chat/hooks/useChatProviderState.ts
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { authenticatedFetch } from '../../../utils/api';
 import { CLAUDE_MODELS, CODEX_MODELS, CURSOR_MODELS, GEMINI_MODELS } from '../../../../shared/modelConstants';
-import type { PendingPermissionRequest, PermissionMode, Provider } from '../types/types';
+import type { PendingPermissionRequest, PermissionMode } from '../types/types';
 import type { ProjectSession, SessionProvider } from '../../../types/app';

 interface UseChatProviderStateArgs {
--- a/src/components/chat/hooks/useChatRealtimeHandlers.ts
+++ b/src/components/chat/hooks/useChatRealtimeHandlers.ts
@@ -48,6 +48,7 @@ interface UseChatRealtimeHandlersArgs {
  onSessionNotProcessing?: (sessionId?: string | null) => void;
  onReplaceTemporarySession?: (sessionId?: string | null) => void;
  onNavigateToSession?: (sessionId: string) => void;
+  onWebSocketReconnect?: () => void;
 }

 const appendStreamingChunk = (
@@ -113,6 +114,7 @@ export function useChatRealtimeHandlers({
  onSessionNotProcessing,
  onReplaceTemporarySession,
  onNavigateToSession,
+  onWebSocketReconnect,
 }: UseChatRealtimeHandlersArgs) {
  const lastProcessedMessageRef = useRef<LatestChatMessage | null>(null);

@@ -134,9 +136,10 @@ export function useChatRealtimeHandlers({
      latestMessage.data && typeof latestMessage.data === 'object'
        ? (latestMessage.data as Record<string, any>)
        : null;
+    const messageType = String(latestMessage.type);

-    const globalMessageTypes = ['projects_updated', 'taskmaster-project-updated', 'session-created'];
-    const isGlobalMessage = globalMessageTypes.includes(String(latestMessage.type));
+    const globalMessageTypes = ['projects_updated', 'taskmaster-project-updated', 'session-created', 'websocket-reconnected'];
+    const isGlobalMessage = globalMessageTypes.includes(messageType);
    const lifecycleMessageTypes = new Set([
      'claude-complete',
      'codex-complete',
@@ -146,6 +149,7 @@ export function useChatRealtimeHandlers({
      'cursor-error',
      'codex-error',
      'gemini-error',
+      'error',
    ]);

    const isClaudeSystemInit =
@@ -168,9 +172,12 @@ export function useChatRealtimeHandlers({

    const activeViewSessionId =
      selectedSession?.id || currentSessionId || pendingViewSessionRef.current?.sessionId || null;
+    const hasPendingUnboundSession =
+      Boolean(pendingViewSessionRef.current) && !pendingViewSessionRef.current?.sessionId;
    const isSystemInitForView =
      systemInitSessionId && (!activeViewSessionId || systemInitSessionId === activeViewSessionId);
    const shouldBypassSessionFilter = isGlobalMessage || Boolean(isSystemInitForView);
+    const isLifecycleMessage = lifecycleMessageTypes.has(messageType);
    const isUnscopedError =
      !latestMessage.sessionId &&
      pendingViewSessionRef.current &&
@@ -201,6 +208,30 @@ export function useChatRealtimeHandlers({
      setClaudeStatus(null);
    };

+    const clearPendingViewSession = (resolvedSessionId?: string | null) => {
+      const pendingSession = pendingViewSessionRef.current;
+      if (!pendingSession) {
+        return;
+      }
+
+      // If the in-view request never received a concrete session ID (or this terminal event
+      // resolves the same pending session), clear it to avoid stale "in-flight" UI state.
+      if (!pendingSession.sessionId || !resolvedSessionId || pendingSession.sessionId === resolvedSessionId) {
+        pendingViewSessionRef.current = null;
+      }
+    };
+
+    const flushStreamingState = () => {
+      if (streamTimerRef.current) {
+        clearTimeout(streamTimerRef.current);
+        streamTimerRef.current = null;
+      }
+      const pendingChunk = streamBufferRef.current;
+      streamBufferRef.current = '';
+      appendStreamingChunk(setChatMessages, pendingChunk, false);
+      finalizeStreamingMessage(setChatMessages);
+    };
+
    const markSessionsAsCompleted = (...sessionIds: Array<string | null | undefined>) => {
      const normalizedSessionIds = collectSessionIds(...sessionIds);
      normalizedSessionIds.forEach((sessionId) => {
@@ -209,25 +240,46 @@ export function useChatRealtimeHandlers({
      });
    };

+    const finalizeLifecycleForCurrentView = (...sessionIds: Array<string | null | undefined>) => {
+      const pendingSessionId = typeof window !== 'undefined' ? sessionStorage.getItem('pendingSessionId') : null;
+      const resolvedSessionIds = collectSessionIds(...sessionIds, pendingSessionId, pendingViewSessionRef.current?.sessionId);
+      const resolvedPrimarySessionId = resolvedSessionIds[0] || null;
+
+      flushStreamingState();
+      clearLoadingIndicators();
+      markSessionsAsCompleted(...resolvedSessionIds);
+      setPendingPermissionRequests([]);
+      clearPendingViewSession(resolvedPrimarySessionId);
+    };
+
    if (!shouldBypassSessionFilter) {
      if (!activeViewSessionId) {
-        if (latestMessage.sessionId && lifecycleMessageTypes.has(String(latestMessage.type))) {
+        if (latestMessage.sessionId && isLifecycleMessage && !hasPendingUnboundSession) {
          handleBackgroundLifecycle(latestMessage.sessionId);
+          return;
        }
-        if (!isUnscopedError) {
+        if (!isUnscopedError && !hasPendingUnboundSession) {
          return;
        }
      }

-      if (!latestMessage.sessionId && !isUnscopedError) {
+      if (!latestMessage.sessionId && !isUnscopedError && !hasPendingUnboundSession) {
        return;
      }

      if (latestMessage.sessionId !== activeViewSessionId) {
-        if (latestMessage.sessionId && lifecycleMessageTypes.has(String(latestMessage.type))) {
-          handleBackgroundLifecycle(latestMessage.sessionId);
+        const shouldTreatAsPendingViewLifecycle =
+          !activeViewSessionId &&
+          hasPendingUnboundSession &&
+          latestMessage.sessionId &&
+          isLifecycleMessage;
+
+        if (!shouldTreatAsPendingViewLifecycle) {
+          if (latestMessage.sessionId && isLifecycleMessage) {
+            handleBackgroundLifecycle(latestMessage.sessionId);
+          }
+          return;
        }
-        return;
      }
    }

@@ -250,6 +302,11 @@ export function useChatRealtimeHandlers({
        }
        break;

+      case 'websocket-reconnected':
+        // WebSocket dropped and reconnected — re-fetch session history to catch up on missed messages
+        onWebSocketReconnect?.();
+        break;
+
      case 'token-budget':
        if (latestMessage.data) {
          setTokenBudget(latestMessage.data);
@@ -545,6 +602,7 @@ export function useChatRealtimeHandlers({
        break;

      case 'claude-error':
+        finalizeLifecycleForCurrentView(latestMessage.sessionId, currentSessionId, selectedSession?.id);
        setChatMessages((previous) => [
          ...previous,
          {
@@ -604,6 +662,7 @@ export function useChatRealtimeHandlers({
        break;

      case 'cursor-error':
+        finalizeLifecycleForCurrentView(latestMessage.sessionId, currentSessionId, selectedSession?.id);
        setChatMessages((previous) => [
          ...previous,
          {
@@ -618,8 +677,7 @@ export function useChatRealtimeHandlers({
        const cursorCompletedSessionId = latestMessage.sessionId || currentSessionId;
        const pendingCursorSessionId = sessionStorage.getItem('pendingSessionId');

-        clearLoadingIndicators();
-        markSessionsAsCompleted(
+        finalizeLifecycleForCurrentView(
          cursorCompletedSessionId,
          currentSessionId,
          selectedSession?.id,
@@ -641,14 +699,28 @@ export function useChatRealtimeHandlers({
            const updated = [...previous];
            const lastIndex = updated.length - 1;
            const last = updated[lastIndex];
+            const normalizedTextResult = textResult.trim();
+
            if (last && last.type === 'assistant' && !last.isToolUse && last.isStreaming) {
              const finalContent =
-                textResult && textResult.trim()
+                normalizedTextResult
                  ? textResult
                  : `${last.content || ''}${pendingChunk || ''}`;
              // Clone the message instead of mutating in place so React can reliably detect state updates.
              updated[lastIndex] = { ...last, content: finalContent, isStreaming: false };
-            } else if (textResult && textResult.trim()) {
+            } else if (normalizedTextResult) {
+              const lastAssistantText =
+                last && last.type === 'assistant' && !last.isToolUse
+                  ? String(last.content || '').trim()
+                  : '';
+
+              // Cursor can emit the same final text through both streaming and result payloads.
+              // Skip adding a second assistant bubble when the final text is unchanged.
+              const isDuplicateFinalText = lastAssistantText === normalizedTextResult;
+              if (isDuplicateFinalText) {
+                return updated;
+              }
+
              updated.push({
                type: resultData.is_error ? 'error' : 'assistant',
                content: textResult,
@@ -701,8 +773,7 @@ export function useChatRealtimeHandlers({
        const completedSessionId =
          latestMessage.sessionId || currentSessionId || pendingSessionId;

-        clearLoadingIndicators();
-        markSessionsAsCompleted(
+        finalizeLifecycleForCurrentView(
          completedSessionId,
          currentSessionId,
          selectedSession?.id,
@@ -718,7 +789,6 @@ export function useChatRealtimeHandlers({
        if (selectedProject && latestMessage.exitCode === 0) {
          safeLocalStorage.removeItem(`chat_messages_${selectedProject.name}`);
        }
-        setPendingPermissionRequests([]);
        break;
      }

@@ -836,13 +906,11 @@ export function useChatRealtimeHandlers({
        }

        if (codexData.type === 'turn_complete') {
-          clearLoadingIndicators();
-          markSessionsAsCompleted(latestMessage.sessionId, currentSessionId, selectedSession?.id);
+          finalizeLifecycleForCurrentView(latestMessage.sessionId, currentSessionId, selectedSession?.id);
        }

        if (codexData.type === 'turn_failed') {
-          clearLoadingIndicators();
-          markSessionsAsCompleted(latestMessage.sessionId, currentSessionId, selectedSession?.id);
+          finalizeLifecycleForCurrentView(latestMessage.sessionId, currentSessionId, selectedSession?.id);
          setChatMessages((previous) => [
            ...previous,
            {
@@ -861,8 +929,7 @@ export function useChatRealtimeHandlers({
        const codexCompletedSessionId =
          latestMessage.sessionId || currentSessionId || codexPendingSessionId;

-        clearLoadingIndicators();
-        markSessionsAsCompleted(
+        finalizeLifecycleForCurrentView(
          codexCompletedSessionId,
          codexActualSessionId,
          currentSessionId,
@@ -886,8 +953,7 @@ export function useChatRealtimeHandlers({
      }

      case 'codex-error':
-        setIsLoading(false);
-        setCanAbortSession(false);
+        finalizeLifecycleForCurrentView(latestMessage.sessionId, currentSessionId, selectedSession?.id);
        setChatMessages((previous) => [
          ...previous,
          {
@@ -937,8 +1003,7 @@ export function useChatRealtimeHandlers({
      }

      case 'gemini-error':
-        setIsLoading(false);
-        setCanAbortSession(false);
+        finalizeLifecycleForCurrentView(latestMessage.sessionId, currentSessionId, selectedSession?.id);
        setChatMessages((previous) => [
          ...previous,
          {
@@ -990,13 +1055,11 @@ export function useChatRealtimeHandlers({
        const abortSucceeded = latestMessage.success !== false;

        if (abortSucceeded) {
-          clearLoadingIndicators();
-          markSessionsAsCompleted(abortedSessionId, currentSessionId, selectedSession?.id, pendingSessionId);
+          finalizeLifecycleForCurrentView(abortedSessionId, currentSessionId, selectedSession?.id, pendingSessionId);
          if (pendingSessionId && (!abortedSessionId || pendingSessionId === abortedSessionId)) {
            sessionStorage.removeItem('pendingSessionId');
          }

-          setPendingPermissionRequests([]);
          setChatMessages((previous) => [
            ...previous,
            {
@@ -1080,6 +1143,25 @@ export function useChatRealtimeHandlers({
        break;
      }

+      case 'pending-permissions-response': {
+        // Server returned pending permissions for this session
+        const permSessionId = latestMessage.sessionId;
+        const isCurrentPermSession =
+          permSessionId === currentSessionId || (selectedSession && permSessionId === selectedSession.id);
+        if (permSessionId && !isCurrentPermSession) {
+          break;
+        }
+        const serverRequests = latestMessage.data || [];
+        setPendingPermissionRequests(serverRequests);
+        break;
+      }
+
+      case 'error':
+        // Generic backend failure (e.g., provider process failed before a provider-specific
+        // completion event was emitted). Treat it as terminal for current view lifecycle.
+        finalizeLifecycleForCurrentView(latestMessage.sessionId, currentSessionId, selectedSession?.id);
+        break;
+
      default:
        break;
    }
--- a/src/components/chat/hooks/useChatSessionState.ts
+++ b/src/components/chat/hooks/useChatSessionState.ts
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { MutableRefObject } from 'react';
-
 import { api, authenticatedFetch } from '../../../utils/api';
 import type { ChatMessage, Provider } from '../types/types';
 import type { Project, ProjectSession } from '../../../types/app';
@@ -83,6 +82,8 @@ export function useChatSessionState({
  const [showLoadAllOverlay, setShowLoadAllOverlay] = useState(false);

  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [searchTarget, setSearchTarget] = useState<{ timestamp?: string; uuid?: string; snippet?: string } | null>(null);
+  const searchScrollActiveRef = useRef(false);
  const isLoadingSessionRef = useRef(false);
  const isLoadingMoreRef = useRef(false);
  const allMessagesLoadedRef = useRef(false);
@@ -93,6 +94,7 @@ export function useChatSessionState({
  const scrollPositionRef = useRef({ height: 0, top: 0 });
  const loadAllFinishedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const loadAllOverlayTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastLoadedSessionKeyRef = useRef<string | null>(null);

  const createDiff = useMemo<DiffCalculator>(() => createCachedDiffCalculator(), []);

@@ -297,11 +299,18 @@ export function useChatSessionState({
    pendingScrollRestoreRef.current = null;
  }, [chatMessages.length]);

+  const prevSessionMessagesLengthRef = useRef(0);
+  const isInitialLoadRef = useRef(true);
+
  useEffect(() => {
-    pendingInitialScrollRef.current = true;
+    if (!searchScrollActiveRef.current) {
+      pendingInitialScrollRef.current = true;
+      setVisibleMessageCount(INITIAL_VISIBLE_MESSAGES);
+    }
    topLoadLockRef.current = false;
    pendingScrollRestoreRef.current = null;
-    setVisibleMessageCount(INITIAL_VISIBLE_MESSAGES);
+    prevSessionMessagesLengthRef.current = 0;
+    isInitialLoadRef.current = true;
    setIsUserScrolledUp(false);
  }, [selectedProject?.name, selectedSession?.id]);

@@ -316,9 +325,11 @@ export function useChatSessionState({
    }

    pendingInitialScrollRef.current = false;
-    setTimeout(() => {
-      scrollToBottom();
-    }, 200);
+    if (!searchScrollActiveRef.current) {
+      setTimeout(() => {
+        scrollToBottom();
+      }, 200);
+    }
  }, [chatMessages.length, isLoadingSessionMessages, scrollToBottom]);

  useEffect(() => {
@@ -373,6 +384,15 @@ export function useChatSessionState({
          }
        }

+        // Skip loading if session+project+provider hasn't changed
+        const sessionKey = `${selectedSession.id}:${selectedProject.name}:${provider}`;
+        if (lastLoadedSessionKeyRef.current === sessionKey) {
+          setTimeout(() => {
+            isLoadingSessionRef.current = false;
+          }, 250);
+          return;
+        }
+
        if (provider === 'cursor') {
          setCurrentSessionId(selectedSession.id);
          sessionStorage.setItem('cursorSessionId', selectedSession.id);
@@ -400,6 +420,9 @@ export function useChatSessionState({
            setIsSystemSessionChange(false);
          }
        }
+
+        // Update the last loaded session key
+        lastLoadedSessionKeyRef.current = sessionKey;
      } else {
        if (!isSystemSessionChange) {
          resetStreamingState();
@@ -417,6 +440,7 @@ export function useChatSessionState({
        setHasMoreMessages(false);
        setTotalMessages(0);
        setTokenBudget(null);
+        lastLoadedSessionKeyRef.current = null;
      }

      setTimeout(() => {
@@ -433,7 +457,7 @@ export function useChatSessionState({
    pendingViewSessionRef,
    resetStreamingState,
    selectedProject,
-    selectedSession,
+    selectedSession?.id, // Only depend on session ID, not the entire object
    sendMessage,
    ws,
  ]);
@@ -484,6 +508,22 @@ export function useChatSessionState({
    selectedSession,
  ]);

+  // Detect search navigation target from selectedSession object reference change
+  // This must be a separate effect because the loading effect depends on selectedSession?.id
+  // which doesn't change when clicking a search result for the already-loaded session
+  useEffect(() => {
+    const session = selectedSession as Record<string, unknown> | null;
+    const targetSnippet = session?.__searchTargetSnippet;
+    const targetTimestamp = session?.__searchTargetTimestamp;
+    if (typeof targetSnippet === 'string' && targetSnippet) {
+      searchScrollActiveRef.current = true;
+      setSearchTarget({
+        snippet: targetSnippet,
+        timestamp: typeof targetTimestamp === 'string' ? targetTimestamp : undefined,
+      });
+    }
+  }, [selectedSession]);
+
  useEffect(() => {
    if (selectedSession?.id) {
      pendingViewSessionRef.current = null;
@@ -491,10 +531,22 @@ export function useChatSessionState({
  }, [pendingViewSessionRef, selectedSession?.id]);

  useEffect(() => {
-    if (sessionMessages.length > 0) {
-      setChatMessages(convertedMessages);
+    // Only sync sessionMessages to chatMessages when:
+    // 1. Not currently loading (to avoid overwriting user's just-sent message)
+    // 2. SessionMessages actually changed (including from non-empty to empty)
+    // 3. Either it's initial load OR sessionMessages increased (new messages from server)
+    if (
+      sessionMessages.length !== prevSessionMessagesLengthRef.current &&
+      !isLoading
+    ) {
+      // Only update if this is initial load, sessionMessages grew, or was cleared to empty
+      if (isInitialLoadRef.current || sessionMessages.length === 0 || sessionMessages.length > prevSessionMessagesLengthRef.current) {
+        setChatMessages(convertedMessages);
+        isInitialLoadRef.current = false;
+      }
+      prevSessionMessagesLengthRef.current = sessionMessages.length;
    }
-  }, [convertedMessages, sessionMessages.length]);
+  }, [convertedMessages, sessionMessages.length, isLoading, setChatMessages]);

  useEffect(() => {
    if (selectedProject && chatMessages.length > 0) {
@@ -502,6 +554,110 @@ export function useChatSessionState({
    }
  }, [chatMessages, selectedProject]);

+  // Scroll to search target message after messages are loaded
+  useEffect(() => {
+    if (!searchTarget || chatMessages.length === 0 || isLoadingSessionMessages) return;
+
+    const target = searchTarget;
+    // Clear immediately to prevent re-triggering
+    setSearchTarget(null);
+
+    const scrollToTarget = async () => {
+      // Always load all messages when navigating from search
+      // (hasMoreMessages may not be set yet due to race with loading effect)
+      if (!allMessagesLoadedRef.current && selectedSession && selectedProject) {
+        const sessionProvider = selectedSession.__provider || 'claude';
+        if (sessionProvider !== 'cursor') {
+          try {
+            const response = await (api.sessionMessages as any)(
+              selectedProject.name,
+              selectedSession.id,
+              null,
+              0,
+              sessionProvider,
+            );
+            if (response.ok) {
+              const data = await response.json();
+              const allMessages = data.messages || data;
+              setSessionMessages(Array.isArray(allMessages) ? allMessages : []);
+              setHasMoreMessages(false);
+              setTotalMessages(Array.isArray(allMessages) ? allMessages.length : 0);
+              messagesOffsetRef.current = Array.isArray(allMessages) ? allMessages.length : 0;
+              setVisibleMessageCount(Infinity);
+              setAllMessagesLoaded(true);
+              allMessagesLoadedRef.current = true;
+              // Wait for messages to render after state update
+              await new Promise(resolve => setTimeout(resolve, 300));
+            }
+          } catch {
+            // Fall through and scroll in current messages
+          }
+        }
+      }
+      setVisibleMessageCount(Infinity);
+
+      // Retry finding the element in the DOM until React finishes rendering all messages
+      const findAndScroll = (retriesLeft: number) => {
+        const container = scrollContainerRef.current;
+        if (!container) return;
+
+        let targetElement: Element | null = null;
+
+        // Match by snippet text content (most reliable)
+        if (target.snippet) {
+          const cleanSnippet = target.snippet.replace(/^\.{3}/, '').replace(/\.{3}$/, '').trim();
+          // Use a contiguous substring from the snippet (don't filter words, it breaks matching)
+          const searchPhrase = cleanSnippet.slice(0, 80).toLowerCase().trim();
+
+          if (searchPhrase.length >= 10) {
+            const messageElements = container.querySelectorAll('.chat-message');
+            for (const el of messageElements) {
+              const text = (el.textContent || '').toLowerCase();
+              if (text.includes(searchPhrase)) {
+                targetElement = el;
+                break;
+              }
+            }
+          }
+        }
+
+        // Fallback to timestamp matching
+        if (!targetElement && target.timestamp) {
+          const targetDate = new Date(target.timestamp).getTime();
+          const messageElements = container.querySelectorAll('[data-message-timestamp]');
+          let closestDiff = Infinity;
+
+          for (const el of messageElements) {
+            const ts = el.getAttribute('data-message-timestamp');
+            if (!ts) continue;
+            const diff = Math.abs(new Date(ts).getTime() - targetDate);
+            if (diff < closestDiff) {
+              closestDiff = diff;
+              targetElement = el;
+            }
+          }
+        }
+
+        if (targetElement) {
+          targetElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
+          targetElement.classList.add('search-highlight-flash');
+          setTimeout(() => targetElement?.classList.remove('search-highlight-flash'), 4000);
+          searchScrollActiveRef.current = false;
+        } else if (retriesLeft > 0) {
+          setTimeout(() => findAndScroll(retriesLeft - 1), 200);
+        } else {
+          searchScrollActiveRef.current = false;
+        }
+      };
+
+      // Start polling after a short delay to let React begin rendering
+      setTimeout(() => findAndScroll(15), 150);
+    };
+
+    scrollToTarget();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chatMessages.length, isLoadingSessionMessages, searchTarget]);
+
  useEffect(() => {
    if (!selectedProject || !selectedSession?.id || selectedSession.id.startsWith('new-session-')) {
      setTokenBudget(null);
@@ -557,6 +713,10 @@ export function useChatSessionState({
      return;
    }

+    if (searchScrollActiveRef.current) {
+      return;
+    }
+
    if (autoScrollToBottom) {
      if (!isUserScrolledUp) {
        setTimeout(() => scrollToBottom(), 50);
--- a/src/components/chat/hooks/useFileMentions.tsx
+++ b/src/components/chat/hooks/useFileMentions.tsx
@@ -161,7 +161,7 @@ export function useFileMentions({ selectedProject, input, setInput, textareaRef
        fileMentionSet.has(part) ? (
          <span
            key={`mention-${index}`}
-            className="bg-blue-200/70 -ml-0.5 dark:bg-blue-300/40 px-0.5 rounded-md box-decoration-clone text-transparent"
+            className="-ml-0.5 rounded-md bg-blue-200/70 box-decoration-clone px-0.5 text-transparent dark:bg-blue-300/40"
          >
            {part}
          </span>
--- a/src/components/chat/tools/README.md
+++ b/src/components/chat/tools/README.md
@@ -17,7 +17,7 @@ tools/
 │   ├── CollapsibleDisplay.tsx      # Expandable tool display (uses children pattern)
 │   ├── CollapsibleSection.tsx      # <details>/<summary> wrapper
 │   ├── ContentRenderers/
-│   │   ├── DiffViewer.tsx          # File diff viewer (memoized)
+│   │   ├── ToolDiffViewer.tsx          # File diff viewer (memoized)
 │   │   ├── MarkdownContent.tsx     # Markdown renderer
 │   │   ├── FileListContent.tsx     # Comma-separated clickable file list
 │   │   ├── TodoListContent.tsx     # Todo items with status badges
@@ -82,7 +82,7 @@ Wraps `CollapsibleSection` (`<details>`/`<summary>`) with a `border-l-2` accent
  rawContent="..."              // Raw JSON string
  toolCategory="edit"           // Drives border color
 >
-  <DiffViewer {...} />          // Content as children
+  <ToolDiffViewer {...} />          // Content as children
 </CollapsibleDisplay>
 ```

@@ -217,7 +217,7 @@ interface ToolDisplayConfig {

 - **ToolRenderer** is wrapped with `React.memo` — skips re-render when props haven't changed
 - **parsedData** is memoized with `useMemo` — JSON parsing only runs when input changes
- **DiffViewer** memoizes `createDiff()` — expensive diff computation cached
+- **ToolDiffViewer** memoizes `createDiff()` — expensive diff computation cached
 - **MessageComponent** caches `localStorage` reads and timestamp formatting via `useMemo`
 - Tool results route through `ToolRenderer` (no duplicate rendering paths)
 - `CollapsibleDisplay` uses children pattern (no wasteful contentProps indirection)
--- a/src/components/chat/tools/ToolRenderer.tsx
+++ b/src/components/chat/tools/ToolRenderer.tsx
@@ -1,8 +1,8 @@
 import React, { memo, useMemo, useCallback } from 'react';
-import { getToolConfig } from './configs/toolConfigs';
-import { OneLineDisplay, CollapsibleDisplay, DiffViewer, MarkdownContent, FileListContent, TodoListContent, TaskListContent, TextContent, QuestionAnswerContent, SubagentContainer } from './components';
 import type { Project } from '../../../types/app';
 import type { SubagentChildTool } from '../types/types';
+import { getToolConfig } from './configs/toolConfigs';
+import { OneLineDisplay, CollapsibleDisplay, ToolDiffViewer, MarkdownContent, FileListContent, TodoListContent, TaskListContent, TextContent, QuestionAnswerContent, SubagentContainer } from './components';

 type DiffLine = {
  type: string;
@@ -61,20 +61,6 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
  isSubagentContainer,
  subagentState
 }) => {
-  // Route subagent containers to dedicated component
-  if (isSubagentContainer && subagentState) {
-    if (mode === 'result') {
-      return null;
-    }
-    return (
-      <SubagentContainer
-        toolInput={toolInput}
-        toolResult={toolResult}
-        subagentState={subagentState}
-      />
-    );
-  }
-
  const config = getToolConfig(toolName);
  const displayConfig: any = mode === 'input' ? config.input : config.result;

@@ -94,7 +80,20 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
    }
  }, [displayConfig, parsedData, onFileOpen]);

-  // Keep hooks above this guard so hook call order stays stable across renders.
+  // Route subagent containers to dedicated component (after hooks to keep call order stable)
+  if (isSubagentContainer && subagentState) {
+    if (mode === 'result') {
+      return null;
+    }
+    return (
+      <SubagentContainer
+        toolInput={toolInput}
+        toolResult={toolResult}
+        subagentState={subagentState}
+      />
+    );
+  }
+
  if (!displayConfig) return null;

  if (displayConfig.type === 'one-line') {
@@ -142,7 +141,7 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
      case 'diff':
        if (createDiff) {
          contentComponent = (
-            <DiffViewer
+            <ToolDiffViewer
              {...contentProps}
              createDiff={createDiff}
              onFileClick={() => onFileOpen?.(contentProps.filePath)}
@@ -202,7 +201,7 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
        const msg = displayConfig.getMessage?.(parsedData) || 'Success';
        contentComponent = (
          <div className="flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400">
-            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
            {msg}
--- a/src/components/chat/tools/components/CollapsibleDisplay.tsx
+++ b/src/components/chat/tools/components/CollapsibleDisplay.tsx
@@ -43,7 +43,7 @@ export const CollapsibleDisplay: React.FC<CollapsibleDisplayProps> = ({
  const borderColor = borderColorMap[toolCategory || 'default'] || borderColorMap.default;

  return (
-    <div className={`border-l-2 ${borderColor} pl-3 py-0.5 my-1 ${className}`}>
+    <div className={`border-l-2 ${borderColor} my-1 py-0.5 pl-3 ${className}`}>
      <CollapsibleSection
        title={title}
        toolName={toolName}
@@ -54,10 +54,10 @@ export const CollapsibleDisplay: React.FC<CollapsibleDisplayProps> = ({
        {children}

        {showRawParameters && rawContent && (
-          <details className="relative mt-2 group/raw">
-            <summary className="flex items-center gap-1.5 text-[11px] text-gray-400 dark:text-gray-500 cursor-pointer hover:text-gray-600 dark:hover:text-gray-300 py-0.5">
+          <details className="group/raw relative mt-2">
+            <summary className="flex cursor-pointer items-center gap-1.5 py-0.5 text-[11px] text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">
              <svg
-                className="w-2.5 h-2.5 transition-transform duration-150 group-open/raw:rotate-90"
+                className="h-2.5 w-2.5 transition-transform duration-150 group-open/raw:rotate-90"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
@@ -66,7 +66,7 @@ export const CollapsibleDisplay: React.FC<CollapsibleDisplayProps> = ({
              </svg>
              raw params
            </summary>
-            <pre className="mt-1 text-[11px] bg-gray-50 dark:bg-gray-900/50 border border-gray-200/40 dark:border-gray-700/40 p-2 rounded whitespace-pre-wrap break-words overflow-hidden text-gray-600 dark:text-gray-400 font-mono">
+            <pre className="mt-1 overflow-hidden whitespace-pre-wrap break-words rounded border border-gray-200/40 bg-gray-50 p-2 font-mono text-[11px] text-gray-600 dark:border-gray-700/40 dark:bg-gray-900/50 dark:text-gray-400">
              {rawContent}
            </pre>
          </details>
--- a/src/components/chat/tools/components/CollapsibleSection.tsx
+++ b/src/components/chat/tools/components/CollapsibleSection.tsx
@@ -23,10 +23,10 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
  className = ''
 }) => {
  return (
-    <details className={`relative group/details ${className}`} open={open}>
-      <summary className="flex items-center gap-1.5 text-xs cursor-pointer py-0.5 select-none group-open/details:sticky group-open/details:top-0 group-open/details:z-10 group-open/details:bg-background group-open/details:-mx-1 group-open/details:px-1">
+    <details className={`group/details relative ${className}`} open={open}>
+      <summary className="flex cursor-pointer select-none items-center gap-1.5 py-0.5 text-xs group-open/details:sticky group-open/details:top-0 group-open/details:z-10 group-open/details:-mx-1 group-open/details:bg-background group-open/details:px-1">
        <svg
-          className="w-3 h-3 text-gray-400 dark:text-gray-500 transition-transform duration-150 group-open/details:rotate-90 flex-shrink-0"
+          className="h-3 w-3 flex-shrink-0 text-gray-400 transition-transform duration-150 group-open/details:rotate-90 dark:text-gray-500"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
@@ -34,24 +34,24 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
        {toolName && (
-          <span className="font-medium text-gray-500 dark:text-gray-400 flex-shrink-0">{toolName}</span>
+          <span className="flex-shrink-0 font-medium text-gray-500 dark:text-gray-400">{toolName}</span>
        )}
        {toolName && (
-          <span className="text-gray-300 dark:text-gray-600 text-[10px] flex-shrink-0">/</span>
+          <span className="flex-shrink-0 text-[10px] text-gray-300 dark:text-gray-600">/</span>
        )}
        {onTitleClick ? (
          <button
            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onTitleClick(); }}
-            className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-mono hover:underline truncate flex-1 text-left transition-colors"
+            className="flex-1 truncate text-left font-mono text-blue-600 transition-colors hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
          >
            {title}
          </button>
        ) : (
-          <span className="text-gray-600 dark:text-gray-400 truncate flex-1">
+          <span className="flex-1 truncate text-gray-600 dark:text-gray-400">
            {title}
          </span>
        )}
-        {action && <span className="flex-shrink-0 ml-1">{action}</span>}
+        {action && <span className="ml-1 flex-shrink-0">{action}</span>}
      </summary>
      <div className="mt-1.5 pl-[18px]">
        {children}
--- a/src/components/chat/tools/components/ContentRenderers/FileListContent.tsx
+++ b/src/components/chat/tools/components/ContentRenderers/FileListContent.tsx
@@ -23,11 +23,11 @@ export const FileListContent: React.FC<FileListContentProps> = ({
  return (
    <div>
      {title && (
-        <div className="text-[11px] text-gray-500 dark:text-gray-400 mb-1">
+        <div className="mb-1 text-[11px] text-gray-500 dark:text-gray-400">
          {title}
        </div>
      )}
-      <div className="flex flex-wrap gap-x-1 gap-y-0.5 max-h-48 overflow-y-auto">
+      <div className="flex max-h-48 flex-wrap gap-x-1 gap-y-0.5 overflow-y-auto">
        {files.map((file, index) => {
          const filePath = typeof file === 'string' ? file : file.path;
          const fileName = filePath.split('/').pop() || filePath;
@@ -39,13 +39,13 @@ export const FileListContent: React.FC<FileListContentProps> = ({
            <span key={index} className="inline-flex items-center">
              <button
                onClick={handleClick}
-                className="text-[11px] font-mono text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline transition-colors"
+                className="font-mono text-[11px] text-blue-600 transition-colors hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
                title={filePath}
              >
                {fileName}
              </button>
              {index < files.length - 1 && (
-                <span className="text-gray-300 dark:text-gray-600 text-[10px] ml-1">,</span>
+                <span className="ml-1 text-[10px] text-gray-300 dark:text-gray-600">,</span>
              )}
            </span>
          );
--- a/src/components/chat/tools/components/ContentRenderers/QuestionAnswerContent.tsx
+++ b/src/components/chat/tools/components/ContentRenderers/QuestionAnswerContent.tsx
@@ -33,31 +33,31 @@ export const QuestionAnswerContent: React.FC<QuestionAnswerContentProps> = ({
        return (
          <div
            key={idx}
-            className="rounded-lg border border-gray-150 dark:border-gray-700/50 bg-gray-50/50 dark:bg-gray-800/30 overflow-hidden"
+            className="border-gray-150 overflow-hidden rounded-lg border bg-gray-50/50 dark:border-gray-700/50 dark:bg-gray-800/30"
          >
            <button
              type="button"
              onClick={() => setExpandedIdx(isExpanded ? null : idx)}
-              className="w-full text-left px-3 py-2 flex items-start gap-2.5 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+              className="flex w-full items-start gap-2.5 px-3 py-2 text-left transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50"
            >
-              <div className={`mt-0.5 flex-shrink-0 w-4 h-4 rounded-full flex items-center justify-center ${
+              <div className={`mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full ${
                answerLabels.length > 0
                  ? 'bg-blue-100 dark:bg-blue-900/40'
                  : 'bg-gray-100 dark:bg-gray-800'
              }`}>
                {answerLabels.length > 0 ? (
-                  <svg className="w-2.5 h-2.5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={3}>
+                  <svg className="h-2.5 w-2.5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={3}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                  </svg>
                ) : (
-                  <div className="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600" />
+                  <div className="h-1.5 w-1.5 rounded-full bg-gray-300 dark:bg-gray-600" />
                )}
              </div>

-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2 flex-wrap">
+              <div className="min-w-0 flex-1">
+                <div className="flex flex-wrap items-center gap-2">
                  {q.header && (
-                    <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-semibold uppercase tracking-wider bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 border border-blue-100/80 dark:border-blue-800/40">
+                    <span className="inline-flex items-center rounded border border-blue-100/80 bg-blue-50 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-blue-600 dark:border-blue-800/40 dark:bg-blue-900/30 dark:text-blue-400">
                      {q.header}
                    </span>
                  )}
@@ -67,22 +67,22 @@ export const QuestionAnswerContent: React.FC<QuestionAnswerContentProps> = ({
                    </span>
                  )}
                </div>
-                <div className="text-xs text-gray-600 dark:text-gray-400 mt-0.5 leading-snug">
+                <div className="mt-0.5 text-xs leading-snug text-gray-600 dark:text-gray-400">
                  {q.question}
                </div>

                {!isExpanded && answerLabels.length > 0 && (
-                  <div className="flex flex-wrap gap-1 mt-1.5">
+                  <div className="mt-1.5 flex flex-wrap gap-1">
                    {answerLabels.map((lbl) => {
                      const isCustom = !q.options.some(o => o.label === lbl);
                      return (
                        <span
                          key={lbl}
-                          className="inline-flex items-center gap-1 text-[11px] px-1.5 py-0.5 rounded-md bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium"
+                          className="inline-flex items-center gap-1 rounded-md bg-blue-50 px-1.5 py-0.5 text-[11px] font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
                        >
                          {lbl}
                          {isCustom && (
-                            <span className="text-[9px] text-blue-400 dark:text-blue-500 font-normal">(custom)</span>
+                            <span className="text-[9px] font-normal text-blue-400 dark:text-blue-500">(custom)</span>
                          )}
                        </span>
                      );
@@ -91,14 +91,14 @@ export const QuestionAnswerContent: React.FC<QuestionAnswerContentProps> = ({
                )}

                {!isExpanded && skipped && hasAnyAnswer && (
-                  <span className="inline-block mt-1 text-[10px] text-gray-400 dark:text-gray-500 italic">
+                  <span className="mt-1 inline-block text-[10px] italic text-gray-400 dark:text-gray-500">
                    Skipped
                  </span>
                )}
              </div>

              <svg
-                className={`w-3.5 h-3.5 mt-0.5 text-gray-400 dark:text-gray-500 flex-shrink-0 transition-transform duration-200 ${
+                className={`mt-0.5 h-3.5 w-3.5 flex-shrink-0 text-gray-400 transition-transform duration-200 dark:text-gray-500 ${
                  isExpanded ? 'rotate-180' : ''
                }`}
                fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}
@@ -108,36 +108,36 @@ export const QuestionAnswerContent: React.FC<QuestionAnswerContentProps> = ({
            </button>

            {isExpanded && (
-              <div className="px-3 pb-2.5 pt-0.5 border-t border-gray-100 dark:border-gray-700/40">
-                <div className="space-y-1 ml-6.5">
+              <div className="border-t border-gray-100 px-3 pb-2.5 pt-0.5 dark:border-gray-700/40">
+                <div className="ml-6.5 space-y-1">
                  {q.options.map((opt) => {
                    const wasSelected = answerLabels.includes(opt.label);
                    return (
                      <div
                        key={opt.label}
-                        className={`flex items-start gap-2 px-2.5 py-1.5 rounded-lg text-[12px] ${
+                        className={`flex items-start gap-2 rounded-lg px-2.5 py-1.5 text-[12px] ${
                          wasSelected
-                            ? 'bg-blue-50/80 dark:bg-blue-900/20 border border-blue-200/60 dark:border-blue-800/40'
+                            ? 'border border-blue-200/60 bg-blue-50/80 dark:border-blue-800/40 dark:bg-blue-900/20'
                            : 'text-gray-400 dark:text-gray-500'
                        }`}
                      >
-                        <div className={`mt-0.5 flex-shrink-0 w-3.5 h-3.5 ${q.multiSelect ? 'rounded-[3px]' : 'rounded-full'} border-[1.5px] flex items-center justify-center ${
+                        <div className={`mt-0.5 h-3.5 w-3.5 flex-shrink-0 ${q.multiSelect ? 'rounded-[3px]' : 'rounded-full'} flex items-center justify-center border-[1.5px] ${
                          wasSelected
-                            ? 'border-blue-500 dark:border-blue-400 bg-blue-500 dark:bg-blue-500'
+                            ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-500'
                            : 'border-gray-300 dark:border-gray-600'
                        }`}>
                          {wasSelected && (
-                            <svg className="w-2 h-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={3}>
+                            <svg className="h-2 w-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={3}>
                              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                            </svg>
                          )}
                        </div>
-                        <div className="flex-1 min-w-0">
-                          <span className={wasSelected ? 'text-gray-900 dark:text-gray-100 font-medium' : ''}>
+                        <div className="min-w-0 flex-1">
+                          <span className={wasSelected ? 'font-medium text-gray-900 dark:text-gray-100' : ''}>
                            {opt.label}
                          </span>
                          {opt.description && (
-                            <span className={`block text-[11px] mt-0.5 ${
+                            <span className={`mt-0.5 block text-[11px] ${
                              wasSelected ? 'text-blue-600/70 dark:text-blue-300/70' : 'text-gray-400 dark:text-gray-600'
                            }`}>
                              {opt.description}
@@ -151,22 +151,22 @@ export const QuestionAnswerContent: React.FC<QuestionAnswerContentProps> = ({
                  {answerLabels.filter(lbl => !q.options.some(o => o.label === lbl)).map(lbl => (
                    <div
                      key={lbl}
-                      className="flex items-start gap-2 px-2.5 py-1.5 rounded-lg text-[12px] bg-blue-50/80 dark:bg-blue-900/20 border border-blue-200/60 dark:border-blue-800/40"
+                      className="flex items-start gap-2 rounded-lg border border-blue-200/60 bg-blue-50/80 px-2.5 py-1.5 text-[12px] dark:border-blue-800/40 dark:bg-blue-900/20"
                    >
-                      <div className={`mt-0.5 flex-shrink-0 w-3.5 h-3.5 ${q.multiSelect ? 'rounded-[3px]' : 'rounded-full'} border-[1.5px] border-blue-500 dark:border-blue-400 bg-blue-500 dark:bg-blue-500 flex items-center justify-center`}>
-                        <svg className="w-2 h-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={3}>
+                      <div className={`mt-0.5 h-3.5 w-3.5 flex-shrink-0 ${q.multiSelect ? 'rounded-[3px]' : 'rounded-full'} flex items-center justify-center border-[1.5px] border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-500`}>
+                        <svg className="h-2 w-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={3}>
                          <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                      </div>
-                      <div className="flex-1 min-w-0">
-                        <span className="text-gray-900 dark:text-gray-100 font-medium">{lbl}</span>
-                        <span className="text-[10px] text-blue-500 dark:text-blue-400 ml-1">(custom)</span>
+                      <div className="min-w-0 flex-1">
+                        <span className="font-medium text-gray-900 dark:text-gray-100">{lbl}</span>
+                        <span className="ml-1 text-[10px] text-blue-500 dark:text-blue-400">(custom)</span>
                      </div>
                    </div>
                  ))}

                  {skipped && hasAnyAnswer && (
-                    <div className="text-[11px] text-gray-400 dark:text-gray-500 italic px-2.5 py-1">
+                    <div className="px-2.5 py-1 text-[11px] italic text-gray-400 dark:text-gray-500">
                      No answer provided
                    </div>
                  )}
@@ -178,7 +178,7 @@ export const QuestionAnswerContent: React.FC<QuestionAnswerContentProps> = ({
      })}

      {!hasAnyAnswer && total === 1 && (
-        <div className="text-[11px] text-gray-400 dark:text-gray-500 italic">
+        <div className="text-[11px] italic text-gray-400 dark:text-gray-500">
          Skipped
        </div>
      )}
--- a/src/components/chat/tools/components/ContentRenderers/TaskListContent.tsx
+++ b/src/components/chat/tools/components/ContentRenderers/TaskListContent.tsx
@@ -39,7 +39,7 @@ function parseTaskContent(content: string): TaskItem[] {
 const statusConfig = {
  completed: {
    icon: (
-      <svg className="w-3.5 h-3.5 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg className="h-3.5 w-3.5 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
@@ -48,7 +48,7 @@ const statusConfig = {
  },
  in_progress: {
    icon: (
-      <svg className="w-3.5 h-3.5 text-blue-500 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg className="h-3.5 w-3.5 text-blue-500 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
@@ -57,7 +57,7 @@ const statusConfig = {
  },
  pending: {
    icon: (
-      <svg className="w-3.5 h-3.5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg className="h-3.5 w-3.5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="9" strokeWidth={2} />
      </svg>
    ),
@@ -76,7 +76,7 @@ export const TaskListContent: React.FC<TaskListContentProps> = ({ content }) =>
  // If we couldn't parse any tasks, fall back to text display
  if (tasks.length === 0) {
    return (
-      <pre className="text-[11px] font-mono text-gray-600 dark:text-gray-400 whitespace-pre-wrap">
+      <pre className="whitespace-pre-wrap font-mono text-[11px] text-gray-600 dark:text-gray-400">
        {content}
      </pre>
    );
@@ -87,13 +87,13 @@ export const TaskListContent: React.FC<TaskListContentProps> = ({ content }) =>

  return (
    <div>
-      <div className="flex items-center gap-2 mb-1.5">
+      <div className="mb-1.5 flex items-center gap-2">
        <span className="text-[11px] text-gray-500 dark:text-gray-400">
          {completed}/{total} completed
        </span>
-        <div className="flex-1 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+        <div className="h-1 flex-1 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
          <div
-            className="h-full bg-green-500 dark:bg-green-400 rounded-full transition-all"
+            className="h-full rounded-full bg-green-500 transition-all dark:bg-green-400"
            style={{ width: `${total > 0 ? (completed / total) * 100 : 0}%` }}
          />
        </div>
@@ -104,16 +104,16 @@ export const TaskListContent: React.FC<TaskListContentProps> = ({ content }) =>
          return (
            <div
              key={task.id}
-              className="flex items-center gap-1.5 py-0.5 group"
+              className="group flex items-center gap-1.5 py-0.5"
            >
              <span className="flex-shrink-0">{config.icon}</span>
-              <span className="text-[11px] font-mono text-gray-400 dark:text-gray-500 flex-shrink-0">
+              <span className="flex-shrink-0 font-mono text-[11px] text-gray-400 dark:text-gray-500">
                #{task.id}
              </span>
-              <span className={`text-xs truncate flex-1 ${config.textClass}`}>
+              <span className={`flex-1 truncate text-xs ${config.textClass}`}>
                {task.subject}
              </span>
-              <span className={`text-[10px] px-1 py-px rounded border flex-shrink-0 ${config.badgeClass}`}>
+              <span className={`flex-shrink-0 rounded border px-1 py-px text-[10px] ${config.badgeClass}`}>
                {task.status.replace('_', ' ')}
              </span>
            </div>
--- a/Show More
+++ b/Show More