Update README with Trendshift badge and language options

Added a Trendshift badge and language links to the README.
Refactor Settings, FileTree, GitPanel, Shell, and CodeEditor components (#402 )
2026-06-07 05:45:39 +08:00 · 2026-02-25 17:12:31 +01:00 · 2026-02-25 17:07:07 +01:00 · 2026-02-23 23:36:58 +01:00 · 2026-02-23 22:23:33 +00:00 · 2026-02-23 23:13:50 +01:00
291 changed files with 31508 additions and 17684 deletions
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,4 @@
-# Claude Code UI Environment Configuration
+# CloudCLI UI Environment Configuration
 # Only includes variables that are actually used in the code
 #
 # TIP: Run 'cloudcli status' to see where this file should be located
@@ -21,6 +21,10 @@ PORT=3001
 #Frontend port
 VITE_PORT=5173

+# Host/IP to bind servers to (default: 0.0.0.0 for all interfaces)
+# Use 127.0.0.1 to restrict to localhost only
+HOST=0.0.0.0
+
 # Uncomment the following line if you have a custom claude cli path other than the default "claude"
 # CLAUDE_CLI_PATH=claude

--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v20.19.3
+v22
--- a/.release-it.json
+++ b/.release-it.json
@@ -2,20 +2,39 @@
  "git": {
    "commitMessage": "Release ${version}",
    "tagName": "v${version}",
-    "changelog": "git log --pretty=format:\"* %s (%h)\" ${from}...${to}"
+    "requireBranch": "main",
+    "requireCleanWorkingDir": true
  },
  "npm": {
    "publish": true
  },
  "github": {
    "release": true,
-    "releaseName": "Claude Code UI v${version}",
-    "releaseNotes": {
-      "commit": "* ${commit.subject} (${sha}){ - thanks @${author.login}!}",
-      "excludeMatches": ["viper151"]
-    }
+    "releaseName": "CloudCLI UI v${version}"
  },
  "hooks": {
    "before:init": ["npm run build"]
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "infile": "CHANGELOG.md",
+      "header": "# Changelog\n\nAll notable changes to CloudCLI UI will be documented in this file.\n",
+      "preset": {
+        "name": "conventionalcommits",
+        "types": [
+          { "type": "feat", "section": "New Features" },
+          { "type": "feature", "section": "New Features" },
+          { "type": "fix", "section": "Bug Fixes" },
+          { "type": "perf", "section": "Performance" },
+          { "type": "refactor", "section": "Refactoring" },
+          { "type": "docs", "section": "Documentation" },
+          { "type": "style", "section": "Styling" },
+          { "type": "chore", "section": "Maintenance" },
+          { "type": "ci", "section": "CI/CD" },
+          { "type": "test", "section": "Tests" },
+          { "type": "build", "section": "Build" }
+        ]
+      }
+    }
  }
-}
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,37 @@
+# Changelog
+
+All notable changes to CloudCLI UI will be documented in this file.
+
+
+## [1.20.1](https://github.com/siteboon/claudecodeui/compare/v1.19.1...v1.20.1) (2026-02-23)
+
+### New Features
+
+* implement install mode detection and update commands in version upgrade process ([f986004](https://github.com/siteboon/claudecodeui/commit/f986004319207b068431f9f6adf338a8ce8decfc))
+* migrate legacy database to new location and improve last login update handling ([50e097d](https://github.com/siteboon/claudecodeui/commit/50e097d4ac498aa9f1803ef3564843721833dc19))
+
+## [1.19.1](https://github.com/siteboon/claudecodeui/compare/v1.19.0...v1.19.1) (2026-02-23)
+
+### Bug Fixes
+
+* add prepublishOnly script to build before publishing ([82efac4](https://github.com/siteboon/claudecodeui/commit/82efac4704cab11ed8d1a05fe84f41312140b223))
+
+## [1.19.0](https://github.com/siteboon/claudecodeui/compare/v1.18.2...v1.19.0) (2026-02-23)
+
+### New Features
+
+* add HOST environment variable for configurable bind address ([#360](https://github.com/siteboon/claudecodeui/issues/360)) ([cccd915](https://github.com/siteboon/claudecodeui/commit/cccd915c336192216b6e6f68e2b5f3ece0ccf966))
+* subagent tool grouping ([#398](https://github.com/siteboon/claudecodeui/issues/398)) ([0207a1f](https://github.com/siteboon/claudecodeui/commit/0207a1f3a3c87f1c6c1aee8213be999b23289386))
+
+### Bug Fixes
+
+* **macos:** fix node-pty posix_spawnp error with postinstall script ([#347](https://github.com/siteboon/claudecodeui/issues/347)) ([38a593c](https://github.com/siteboon/claudecodeui/commit/38a593c97fdb2bb7f051e09e8e99c16035448655)), closes [#284](https://github.com/siteboon/claudecodeui/issues/284)
+* slash commands with arguments bypass command execution ([#392](https://github.com/siteboon/claudecodeui/issues/392)) ([597e9c5](https://github.com/siteboon/claudecodeui/commit/597e9c54b76e7c6cd1947299c668c78d24019cab))
+
+### Refactoring
+
+* **releases:** Create a contributing guide and proper release notes using a release-it plugin ([fc369d0](https://github.com/siteboon/claudecodeui/commit/fc369d047e13cba9443fe36c0b6bb2ce3beaf61c))
+
+### Maintenance
+
+* update @anthropic-ai/claude-agent-sdk to version 0.1.77 in package-lock.json ([#410](https://github.com/siteboon/claudecodeui/issues/410)) ([7ccbc8d](https://github.com/siteboon/claudecodeui/commit/7ccbc8d92d440e18c157b656c9ea2635044a64f6))
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -0,0 +1,156 @@
+# Contributing to CloudCLI UI
+
+Thanks for your interest in contributing to CloudCLI UI! Before you start, please take a moment to read through this guide.
+
+## Before You Start
+
+- **Search first.** Check [existing issues](https://github.com/siteboon/claudecodeui/issues) and [pull requests](https://github.com/siteboon/claudecodeui/pulls) to avoid duplicating work.
+- **Discuss first** for new features. Open an [issue](https://github.com/siteboon/claudecodeui/issues/new) to discuss your idea before investing time in implementation. We may already have plans or opinions on how it should work.
+- **Bug fixes are always welcome.** If you spot a bug, feel free to open a PR directly.
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/) 22 or later
+- [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) installed and configured
+
+## Getting Started
+
+1. Fork the repository
+2. Clone your fork:
+   ```bash
+   git clone https://github.com/<your-username>/claudecodeui.git
+   cd claudecodeui
+   ```
+3. Install dependencies:
+   ```bash
+   npm install
+   ```
+4. Start the development server:
+   ```bash
+   npm run dev
+   ```
+5. Create a branch for your changes:
+   ```bash
+   git checkout -b feat/your-feature-name
+   ```
+
+## Project Structure
+
+```
+claudecodeui/
+├── src/              # React frontend (Vite + Tailwind)
+│   ├── components/   # UI components
+│   ├── contexts/     # React context providers
+│   ├── hooks/        # Custom React hooks
+│   ├── i18n/         # Internationalization and translations
+│   ├── lib/          # Shared frontend libraries
+│   ├── types/        # TypeScript type definitions
+│   └── utils/        # Frontend utilities
+├── server/           # Express backend
+│   ├── routes/       # API route handlers
+│   ├── middleware/    # Express middleware
+│   ├── database/     # SQLite database layer
+│   └── tools/        # CLI tool integrations
+├── shared/           # Code shared between client and server
+└── public/           # Static assets, icons, PWA manifest
+```
+
+## Development Workflow
+
+- `npm run dev` — Start both the frontend and backend in development mode
+- `npm run build` — Create a production build
+- `npm run server` — Start only the backend server
+- `npm run client` — Start only the Vite dev server
+
+## Making Changes
+
+### Bug Fixes
+
+- Reference the issue number in your PR if one exists
+- Describe how to reproduce the bug in your PR description
+- Add a screenshot or recording for visual bugs
+
+### New Features
+
+- Keep the scope focused — one feature per PR
+- Include screenshots or recordings for UI changes
+
+### Documentation
+
+- Documentation improvements are always welcome
+- Keep language clear and concise
+
+## Commit Convention
+
+We follow [Conventional Commits](https://conventionalcommits.org/) to generate release notes automatically. Every commit message should follow this format:
+
+```
+<type>(optional scope): <description>
+```
+
+Use imperative, present tense: "add feature" not "added feature" or "adds feature".
+
+### Types
+
+| Type | Description |
+|------|-------------|
+| `feat` | A new feature |
+| `fix` | A bug fix |
+| `perf` | A performance improvement |
+| `refactor` | Code change that neither fixes a bug nor adds a feature |
+| `docs` | Documentation only |
+| `style` | CSS, formatting, visual changes |
+| `chore` | Maintenance, dependencies, config |
+| `ci` | CI/CD pipeline changes |
+| `test` | Adding or updating tests |
+| `build` | Build system changes |
+
+### Examples
+
+```bash
+feat: add conversation search
+feat(i18n): add Japanese language support
+fix: redirect unauthenticated users to login
+fix(editor): syntax highlighting for .env files
+perf: lazy load code editor component
+refactor(chat): extract message list component
+docs: update API configuration guide
+```
+
+### Breaking Changes
+
+Add `!` after the type or include `BREAKING CHANGE:` in the commit footer:
+
+```bash
+feat!: redesign settings page layout
+```
+
+## Pull Requests
+
+- Give your PR a clear, descriptive title following the commit convention above
+- Fill in the PR description with what changed and why
+- Link any related issues
+- Include screenshots for UI changes
+- Make sure the build passes (`npm run build`)
+- Keep PRs focused — avoid unrelated changes
+
+## Releases
+
+Releases are managed by maintainers using [release-it](https://github.com/release-it/release-it) with the [conventional changelog plugin](https://github.com/release-it/conventional-changelog).
+
+```bash
+npm run release           # interactive (prompts for version bump)
+npm run release -- patch  # patch release
+npm run release -- minor  # minor release
+```
+
+This automatically:
+- Bumps the version based on commit types (`feat` = minor, `fix` = patch)
+- Generates categorized release notes
+- Updates `CHANGELOG.md`
+- Creates a git tag and GitHub Release
+- Publishes to npm
+
+## License
+
+By contributing, you agree that your contributions will be licensed under the [GPL-3.0 License](LICENSE).
--- a/README.ja.md
+++ b/README.ja.md
@@ -0,0 +1,346 @@
+<div align="center">
+  <img src="public/logo.svg" alt="Claude Code UI" width="64" height="64">
+  <h1>Cloud CLI (別名 Claude Code UI)</h1>
+</div>
+
+
+[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="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 から選択</em>
+</td>
+</tr>
+</table>
+
+
+
+</div>
+
+## 機能
+
+- **レスポンシブデザイン** - デスクトップ、タブレット、モバイルでシームレスに動作し、モバイルからも Claude Code、Cursor、Codex を使用可能
+- **インタラクティブチャットインターフェース** - Claude Code、Cursor、Codex とシームレスに通信する組み込みチャットインターフェース
+- **統合シェルターミナル** - 組み込みシェル機能による Claude Code、Cursor CLI、Codex への直接アクセス
+- **ファイルエクスプローラー** - シンタックスハイライトとライブ編集対応のインタラクティブファイルツリー
+- **Git エクスプローラー** - 変更の確認、ステージング、コミット。ブランチの切り替えも可能
+- **セッション管理** - 会話の再開、複数セッションの管理、履歴の追跡
+- **TaskMaster AI 統合** *（オプション）* - AI 駆動のタスク計画、PRD 解析、ワークフロー自動化による高度なプロジェクト管理
+- **モデル互換性** - Claude Sonnet 4.5、Opus 4.5、GPT-5.2 に対応
+
+
+## クイックスタート
+
+### 前提条件
+
+- [Node.js](https://nodejs.org/) v22 以上
+- [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) のインストールと設定、および/または
+- [Cursor CLI](https://docs.cursor.com/en/cli/overview) のインストールと設定、および/または
+- [Codex](https://developers.openai.com/codex) のインストールと設定
+
+### ワンクリック実行（推奨）
+
+インストール不要、直接実行：
+
+```bash
+npx @siteboon/claude-code-ui
+```
+
+サーバーが起動し、`http://localhost:3001`（または設定した PORT）でアクセスできます。
+
+**再起動**: サーバーを停止した後、同じ `npx` コマンドを再度実行するだけです
+### グローバルインストール（定期的に使用する場合）
+
+頻繁に使用する場合は、一度だけグローバルインストール：
+
+```bash
+npm install -g @siteboon/claude-code-ui
+```
+
+シンプルなコマンドで起動：
+
+```bash
+claude-code-ui
+```
+
+
+**再起動**: Ctrl+C で停止し、`claude-code-ui` を再度実行します。
+
+**アップデート**:
+```bash
+cloudcli update
+```
+
+### CLI の使い方
+
+グローバルインストール後、`claude-code-ui` と `cloudcli` コマンドが使用できます：
+
+| コマンド / オプション | 短縮形 | 説明 |
+|------------------|-------|-------------|
+| `cloudcli` または `claude-code-ui` | | サーバーを起動（デフォルト） |
+| `cloudcli start` | | サーバーを明示的に起動 |
+| `cloudcli status` | | 設定とデータの場所を表示 |
+| `cloudcli update` | | 最新バージョンに更新 |
+| `cloudcli help` | | ヘルプ情報を表示 |
+| `cloudcli version` | | バージョン情報を表示 |
+| `--port <port>` | `-p` | サーバーポートを設定（デフォルト: 3001） |
+| `--database-path <path>` | | カスタムデータベースの場所を設定 |
+
+**例:**
+```bash
+cloudcli                          # デフォルト設定で起動
+cloudcli -p 8080              # カスタムポートで起動
+cloudcli status                   # 現在の設定を表示
+```
+
+### バックグラウンドサービスとして実行（本番環境推奨）
+
+本番環境では、PM2（Process Manager 2）を使用して Claude Code UI をバックグラウンドサービスとして実行します：
+
+#### PM2 のインストール
+
+```bash
+npm install -g pm2
+```
+
+#### バックグラウンドサービスとして起動
+
+```bash
+# バックグラウンドでサーバーを起動
+pm2 start claude-code-ui --name "claude-code-ui"
+
+# または短いエイリアスを使用
+pm2 start cloudcli --name "claude-code-ui"
+
+# カスタムポートで起動
+pm2 start cloudcli --name "claude-code-ui" -- --port 8080
+```
+
+
+#### システム起動時の自動起動
+
+システム起動時に Claude Code UI を自動的に起動するには：
+
+```bash
+# プラットフォーム用の起動スクリプトを生成
+pm2 startup
+
+# 現在のプロセスリストを保存
+pm2 save
+```
+
+
+### ローカル開発インストール
+
+1. **リポジトリをクローン:**
+```bash
+git clone https://github.com/siteboon/claudecodeui.git
+cd claudecodeui
+```
+
+2. **依存関係をインストール:**
+```bash
+npm install
+```
+
+3. **環境を設定:**
+```bash
+cp .env.example .env
+# お好みの設定で .env を編集
+```
+
+4. **アプリケーションを起動:**
+```bash
+# 開発モード（ホットリロード付き）
+npm run dev
+
+```
+アプリケーションは .env で指定したポートで起動します
+
+5. **ブラウザを開く:**
+   - 開発: `http://localhost:3001`
+
+## セキュリティとツール設定
+
+**重要なお知らせ**: すべての Claude Code ツールは**デフォルトで無効**になっています。これにより、潜在的に有害な操作が自動的に実行されることを防ぎます。
+
+### ツールの有効化
+
+Claude Code の全機能を使用するには、手動でツールを有効にする必要があります：
+
+1. **ツール設定を開く** - サイドバーの歯車アイコンをクリック
+3. **選択的に有効化** - 必要なツールのみを有効にする
+4. **設定を適用** - 環境設定はローカルに保存されます
+
+<div align="center">
+
+![ツール設定モーダル](public/screenshots/tools-modal.png)
+*ツール設定インターフェース - 必要なものだけを有効にしましょう*
+
+</div>
+
+**推奨アプローチ**: 基本的なツールから有効にし、必要に応じて追加してください。これらの設定はいつでも調整できます。
+
+## TaskMaster AI 統合 *（オプション）*
+
+Claude Code UI は、高度なプロジェクト管理と AI 駆動のタスク計画のための **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)**（別名 claude-task-master）統合をサポートしています。
+
+提供機能
+- PRD（製品要件ドキュメント）からの AI 駆動タスク生成
+- スマートなタスク分解と依存関係管理
+- ビジュアルタスクボードと進捗追跡
+
+**セットアップとドキュメント**: インストール手順、設定ガイド、使用例は [TaskMaster AI GitHub リポジトリ](https://github.com/eyaltoledano/claude-task-master)をご覧ください。
+インストール後、設定から有効にできます
+
+
+## 使用ガイド
+
+### 主要機能
+
+#### プロジェクト管理
+Claude Code、Cursor、Codex のセッションが利用可能な場合、自動的に検出しプロジェクトとしてグループ化します
+- **プロジェクト操作** - プロジェクトの名前変更、削除、整理
+- **スマートナビゲーション** - 最近のプロジェクトやセッションへのクイックアクセス
+- **MCP サポート** - UI から独自の MCP サーバーを追加
+
+#### チャットインターフェース
+- **レスポンシブチャットまたは Claude Code/Cursor CLI/Codex CLI を使用** - アダプティブチャットインターフェースを使用するか、シェルボタンで選択した CLI に接続できます
+- **リアルタイム通信** - WebSocket 接続で選択した CLI（Claude Code/Cursor/Codex）からレスポンスをストリーミング
+- **セッション管理** - 以前の会話を再開、または新しいセッションを開始
+- **メッセージ履歴** - タイムスタンプとメタデータ付きの完全な会話履歴
+- **マルチフォーマット対応** - テキスト、コードブロック、ファイル参照
+
+#### ファイルエクスプローラーとエディター
+- **インタラクティブファイルツリー** - 展開/折りたたみナビゲーションでプロジェクト構造を閲覧
+- **ライブファイル編集** - インターフェースで直接ファイルの読み取り、変更、保存
+- **シンタックスハイライト** - 複数のプログラミング言語に対応
+- **ファイル操作** - ファイルやディレクトリの作成、名前変更、削除
+
+#### Git エクスプローラー
+
+
+#### TaskMaster AI 統合 *（オプション）*
+- **ビジュアルタスクボード** - 開発タスク管理のためのカンバンスタイルインターフェース
+- **PRD パーサー** - 製品要件ドキュメントを作成し、構造化されたタスクに変換
+- **進捗追跡** - リアルタイムのステータス更新と完了追跡
+
+#### セッション管理
+- **セッション永続化** - すべての会話を自動保存
+- **セッション整理** - プロジェクトとタイムスタンプでセッションをグループ化
+- **セッション操作** - 会話履歴の名前変更、削除、エクスポート
+- **クロスデバイス同期** - どのデバイスからでもセッションにアクセス
+
+### モバイルアプリ
+- **レスポンシブデザイン** - すべての画面サイズに最適化
+- **タッチフレンドリーインターフェース** - スワイプジェスチャーとタッチナビゲーション
+- **モバイルナビゲーション** - 親指で操作しやすいボトムタブバー
+- **アダプティブレイアウト** - 折りたたみ可能なサイドバーとスマートコンテンツ優先順位
+- **ホーム画面にショートカットを追加** - ホーム画面にショートカットを追加すると、アプリが PWA のように動作します
+
+## アーキテクチャ
+
+### システム概要
+
+```
+┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
+│   Frontend      │    │   Backend       │    │  Agent     │
+│   (React/Vite)  │◄──►│ (Express/WS)    │◄──►│  Integration    │
+│                 │    │                 │    │                │
+└─────────────────┘    └─────────────────┘    └─────────────────┘
+```
+
+### バックエンド (Node.js + Express)
+- **Express サーバー** - 静的ファイル配信付きの RESTful API
+- **WebSocket サーバー** - チャットとプロジェクト更新のための通信
+- **エージェント統合 (Claude Code / Cursor CLI / Codex)** - プロセスの生成と管理
+- **ファイルシステム API** - プロジェクト向けファイルブラウザの公開
+
+### フロントエンド (React + Vite)
+- **React 18** - hooks を使用したモダンなコンポーネントアーキテクチャ
+- **CodeMirror** - シンタックスハイライト対応の高度なコードエディター
+
+
+
+
+### コントリビューション
+
+コントリビューションを歓迎します！コミット規約、開発ワークフロー、リリースプロセスの詳細は [Contributing Guide](CONTRIBUTING.md) をご覧ください。
+
+## トラブルシューティング
+
+### よくある問題と解決方法
+
+
+#### 「Claude プロジェクトが見つかりません」
+**問題**: UI にプロジェクトが表示されない、またはプロジェクトリストが空
+**解決方法**:
+- [Claude Code](https://docs.anthropic.com/en/docs/claude-code) が正しくインストールされていることを確認
+- 少なくとも1つのプロジェクトディレクトリで `claude` コマンドを実行して初期化
+- `~/.claude/projects/` ディレクトリが存在し、適切な権限があることを確認
+
+#### ファイルエクスプローラーの問題
+**問題**: ファイルが読み込まれない、権限エラー、空のディレクトリ
+**解決方法**:
+- プロジェクトディレクトリの権限を確認（ターミナルで `ls -la`）
+- プロジェクトパスが存在しアクセス可能であることを確認
+- 詳細なエラーメッセージについてはサーバーコンソールログを確認
+- プロジェクト範囲外のシステムディレクトリにアクセスしていないことを確認
+
+
+## ライセンス
+
+GNU General Public License v3.0 - 詳細は [LICENSE](LICENSE) ファイルをご覧ください。
+
+このプロジェクトはオープンソースであり、GPL v3 ライセンスの下で自由に使用、変更、配布できます。
+
+## 謝辞
+
+### 使用技術
+- **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic の公式 CLI
+- **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursor の公式 CLI
+- **[Codex](https://developers.openai.com/codex)** - OpenAI Codex
+- **[React](https://react.dev/)** - ユーザーインターフェースライブラリ
+- **[Vite](https://vitejs.dev/)** - 高速ビルドツールと開発サーバー
+- **[Tailwind CSS](https://tailwindcss.com/)** - ユーティリティファースト CSS フレームワーク
+- **[CodeMirror](https://codemirror.net/)** - 高度なコードエディター
+- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *（オプション）* - AI 駆動のプロジェクト管理とタスク計画
+
+## サポートとコミュニティ
+
+### 最新情報を入手
+- このリポジトリに **Star** をつけてサポートを表明
+- **Watch** で更新や新リリースを確認
+- プロジェクトを **Follow** してお知らせを受け取る
+
+### スポンサー
+- [Siteboon - AI powered website builder](https://siteboon.ai)
+---
+
+<div align="center">
+  <strong>Claude Code、Cursor、Codex コミュニティのために心を込めて作りました。</strong>
+</div>
--- a/README.ko.md
+++ b/README.ko.md
@@ -0,0 +1,345 @@
+<div align="center">
+  <img src="public/logo.svg" alt="Claude Code UI" width="64" height="64">
+  <h1>Cloud CLI (일명 Claude Code UI)</h1>
+</div>
+
+
+[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="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 중 선택</em>
+</td>
+</tr>
+</table>
+
+
+
+</div>
+
+## 기능
+
+- **반응형 디자인** - 데스크톱, 태블릿, 모바일에서 원활하게 작동하여 모바일에서도 Claude Code, Cursor 또는 Codex를 사용할 수 있습니다
+- **대화형 채팅 인터페이스** - Claude Code, Cursor 또는 Codex와 원활하게 소통하는 내장 채팅 인터페이스
+- **통합 셸 터미널** - 내장 셸 기능을 통한 Claude Code, Cursor CLI 또는 Codex 직접 접근
+- **파일 탐색기** - 구문 강조 및 실시간 편집이 가능한 대화형 파일 트리
+- **Git 탐색기** - 변경사항 보기, 스테이징 및 커밋. 브랜치 전환도 가능
+- **세션 관리** - 대화 재개, 여러 세션 관리 및 기록 추적
+- **TaskMaster AI 통합** *(선택사항)* - AI 기반 작업 계획, PRD 분석 및 워크플로우 자동화를 통한 고급 프로젝트 관리
+- **모델 호환성** - Claude Sonnet 4.5, Opus 4.5 및 GPT-5.2 지원
+
+
+## 빠른 시작
+
+### 사전 요구사항
+
+- [Node.js](https://nodejs.org/) v22 이상
+- [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) 설치 및 구성, 그리고/또는
+- [Cursor CLI](https://docs.cursor.com/en/cli/overview) 설치 및 구성, 그리고/또는
+- [Codex](https://developers.openai.com/codex) 설치 및 구성
+
+### 원클릭 실행 (권장)
+
+설치 없이 바로 실행:
+
+```bash
+npx @siteboon/claude-code-ui
+```
+
+서버가 시작되면 `http://localhost:3001` (또는 설정한 PORT)에서 접근할 수 있습니다.
+
+**재시작**: 서버를 중지한 후 동일한 `npx` 명령을 다시 실행하면 됩니다
+### 전역 설치 (정기적 사용 시)
+
+자주 사용하는 경우 한 번만 전역 설치:
+
+```bash
+npm install -g @siteboon/claude-code-ui
+```
+
+간단한 명령으로 시작:
+
+```bash
+claude-code-ui
+```
+
+
+**재시작**: Ctrl+C로 중지한 후 `claude-code-ui`를 다시 실행합니다.
+
+**업데이트**:
+```bash
+cloudcli update
+```
+
+### CLI 사용법
+
+전역 설치 후 `claude-code-ui`와 `cloudcli` 명령을 사용할 수 있습니다:
+
+| 명령 / 옵션 | 약어 | 설명 |
+|------------------|-------|-------------|
+| `cloudcli` 또는 `claude-code-ui` | | 서버 시작 (기본값) |
+| `cloudcli start` | | 서버 명시적 시작 |
+| `cloudcli status` | | 구성 및 데이터 위치 표시 |
+| `cloudcli update` | | 최신 버전으로 업데이트 |
+| `cloudcli help` | | 도움말 정보 표시 |
+| `cloudcli version` | | 버전 정보 표시 |
+| `--port <port>` | `-p` | 서버 포트 설정 (기본값: 3001) |
+| `--database-path <path>` | | 사용자 지정 데이터베이스 위치 설정 |
+
+**예시:**
+```bash
+cloudcli                          # 기본 설정으로 시작
+cloudcli -p 8080              # 사용자 지정 포트로 시작
+cloudcli status                   # 현재 구성 표시
+```
+
+### 백그라운드 서비스로 실행 (프로덕션 권장)
+
+프로덕션 환경에서는 PM2(Process Manager 2)를 사용하여 Claude Code UI를 백그라운드 서비스로 실행하세요:
+
+#### PM2 설치
+
+```bash
+npm install -g pm2
+```
+
+#### 백그라운드 서비스로 시작
+
+```bash
+# 백그라운드에서 서버 시작
+pm2 start claude-code-ui --name "claude-code-ui"
+
+# 또는 짧은 별칭 사용
+pm2 start cloudcli --name "claude-code-ui"
+
+# 사용자 지정 포트로 시작
+pm2 start cloudcli --name "claude-code-ui" -- --port 8080
+```
+
+
+#### 시스템 부팅 시 자동 시작
+
+시스템 부팅 시 Claude Code UI를 자동으로 시작하려면:
+
+```bash
+# 플랫폼에 맞는 시작 스크립트 생성
+pm2 startup
+
+# 현재 프로세스 목록 저장
+pm2 save
+```
+
+
+### 로컬 개발 설치
+
+1. **리포지토리 클론:**
+```bash
+git clone https://github.com/siteboon/claudecodeui.git
+cd claudecodeui
+```
+
+2. **의존성 설치:**
+```bash
+npm install
+```
+
+3. **환경 구성:**
+```bash
+cp .env.example .env
+# 원하는 설정으로 .env 파일 편집
+```
+
+4. **애플리케이션 시작:**
+```bash
+# 개발 모드 (핫 리로드 포함)
+npm run dev
+
+```
+애플리케이션은 .env에서 지정한 포트에서 시작됩니다
+
+5. **브라우저 열기:**
+   - 개발: `http://localhost:3001`
+
+## 보안 및 도구 설정
+
+**🔒 중요 공지**: 모든 Claude Code 도구는 **기본적으로 비활성화**되어 있습니다. 이는 잠재적으로 유해한 작업이 자동으로 실행되는 것을 방지합니다.
+
+### 도구 활성화
+
+Claude Code의 전체 기능을 사용하려면 수동으로 도구를 활성화해야 합니다:
+
+1. **도구 설정 열기** - 사이드바의 톱니바퀴 아이콘을 클릭
+3. **선택적으로 활성화** - 필요한 도구만 활성화
+4. **설정 적용** - 환경설정은 로컬에 저장됩니다
+
+<div align="center">
+
+![도구 설정 모달](public/screenshots/tools-modal.png)
+*도구 설정 인터페이스 - 필요한 것만 활성화하세요*
+
+</div>
+
+**권장 접근법**: 기본 도구부터 활성화하고 필요에 따라 추가하세요. 언제든지 이 설정을 조정할 수 있습니다.
+
+## TaskMaster AI 통합 *(선택사항)*
+
+Claude Code UI는 고급 프로젝트 관리 및 AI 기반 작업 계획을 위한 **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)**(일명 claude-task-master) 통합을 지원합니다.
+
+제공 기능
+- PRD(제품 요구사항 문서)에서 AI 기반 작업 생성
+- 스마트 작업 분해 및 의존성 관리
+- 시각적 작업 보드 및 진행 상황 추적
+
+**설정 및 문서**: 설치 지침, 구성 가이드 및 사용 예시는 [TaskMaster AI GitHub 리포지토리](https://github.com/eyaltoledano/claude-task-master)를 방문하세요.
+설치 후 설정에서 활성화할 수 있습니다
+
+
+## 사용 가이드
+
+### 핵심 기능
+
+#### 프로젝트 관리
+Claude Code, Cursor 또는 Codex 세션을 사용할 수 있을 때 자동으로 발견하고 프로젝트로 그룹화합니다
+- **프로젝트 작업** - 프로젝트 이름 변경, 삭제 및 정리
+- **스마트 내비게이션** - 최근 프로젝트 및 세션에 빠르게 접근
+- **MCP 지원** - UI를 통해 자체 MCP 서버 추가
+
+#### 채팅 인터페이스
+- **반응형 채팅 또는 Claude Code/Cursor CLI/Codex CLI 사용** - 적응형 채팅 인터페이스를 사용하거나 셸 버튼을 사용하여 선택한 CLI에 연결할 수 있습니다
+- **실시간 통신** - WebSocket 연결을 통해 선택한 CLI(Claude Code/Cursor/Codex)에서 응답 스트리밍
+- **세션 관리** - 이전 대화 재개 또는 새 세션 시작
+- **메시지 기록** - 타임스탬프 및 메타데이터가 포함된 전체 대화 기록
+- **다중 형식 지원** - 텍스트, 코드 블록 및 파일 참조
+
+#### 파일 탐색기 및 편집기
+- **대화형 파일 트리** - 확장/축소 내비게이션으로 프로젝트 구조 탐색
+- **실시간 파일 편집** - 인터페이스에서 직접 파일 읽기, 수정 및 저장
+- **구문 강조** - 다양한 프로그래밍 언어 지원
+- **파일 작업** - 파일 및 디렉토리 생성, 이름 변경, 삭제
+
+#### Git 탐색기
+
+
+#### TaskMaster AI 통합 *(선택사항)*
+- **시각적 작업 보드** - 개발 작업 관리를 위한 칸반 스타일 인터페이스
+- **PRD 파서** - 제품 요구사항 문서를 생성하고 구조화된 작업으로 변환
+- **진행 상황 추적** - 실시간 상태 업데이트 및 완료 추적
+
+#### 세션 관리
+- **세션 지속성** - 모든 대화 자동 저장
+- **세션 정리** - 프로젝트 및 타임스탬프별 세션 그룹화
+- **세션 작업** - 대화 기록 이름 변경, 삭제 및 내보내기
+- **크로스 디바이스 동기화** - 모든 기기에서 세션 접근
+
+### 모바일 앱
+- **반응형 디자인** - 모든 화면 크기에 최적화
+- **터치 친화적 인터페이스** - 스와이프 제스처 및 터치 내비게이션
+- **모바일 내비게이션** - 엄지 내비게이션을 위한 하단 탭 바
+- **적응형 레이아웃** - 접을 수 있는 사이드바 및 스마트 콘텐츠 우선순위
+- **홈 화면 바로가기 추가** - 홈 화면에 바로가기를 추가하면 앱이 PWA처럼 작동합니다
+
+## 아키텍처
+
+### 시스템 개요
+
+```
+┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
+│   Frontend      │    │   Backend       │    │  Agent     │
+│   (React/Vite)  │◄──►│ (Express/WS)    │◄──►│  Integration    │
+│                 │    │                 │    │                │
+└─────────────────┘    └─────────────────┘    └─────────────────┘
+```
+
+### 백엔드 (Node.js + Express)
+- **Express 서버** - 정적 파일 제공이 포함된 RESTful API
+- **WebSocket 서버** - 채팅 및 프로젝트 새로고침을 위한 통신
+- **에이전트 통합 (Claude Code / Cursor CLI / Codex)** - 프로세스 생성 및 관리
+- **파일 시스템 API** - 프로젝트를 위한 파일 브라우저 노출
+
+### 프론트엔드 (React + Vite)
+- **React 18** - hooks를 사용한 현대적 컴포넌트 아키텍처
+- **CodeMirror** - 구문 강조를 지원하는 고급 코드 편집기
+
+
+
+### 기여하기
+
+기여를 환영합니다! 커밋 규칙, 개발 워크플로우, 릴리스 프로세스에 대한 자세한 내용은 [Contributing Guide](CONTRIBUTING.md)를 참조해주세요.
+
+## 문제 해결
+
+### 일반적인 문제 및 해결 방법
+
+
+#### "Claude 프로젝트를 찾을 수 없음"
+**문제**: UI에 프로젝트가 없거나 프로젝트 목록이 비어 있음
+**해결 방법**:
+- [Claude Code](https://docs.anthropic.com/en/docs/claude-code)가 올바르게 설치되었는지 확인
+- 초기화를 위해 최소 하나의 프로젝트 디렉토리에서 `claude` 명령 실행
+- `~/.claude/projects/` 디렉토리가 존재하고 적절한 권한이 있는지 확인
+
+#### 파일 탐색기 문제
+**문제**: 파일이 로드되지 않음, 권한 오류, 빈 디렉토리
+**해결 방법**:
+- 프로젝트 디렉토리 권한 확인 (터미널에서 `ls -la`)
+- 프로젝트 경로가 존재하고 접근 가능한지 확인
+- 자세한 오류 메시지는 서버 콘솔 로그 검토
+- 프로젝트 범위 밖의 시스템 디렉토리에 접근하지 않는지 확인
+
+
+## 라이선스
+
+GNU General Public License v3.0 - 자세한 내용은 [LICENSE](LICENSE) 파일을 참조하세요.
+
+이 프로젝트는 오픈 소스이며 GPL v3 라이선스에 따라 자유롭게 사용, 수정 및 배포할 수 있습니다.
+
+## 감사의 말
+
+### 사용 기술
+- **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic의 공식 CLI
+- **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursor의 공식 CLI
+- **[Codex](https://developers.openai.com/codex)** - OpenAI Codex
+- **[React](https://react.dev/)** - 사용자 인터페이스 라이브러리
+- **[Vite](https://vitejs.dev/)** - 빠른 빌드 도구 및 개발 서버
+- **[Tailwind CSS](https://tailwindcss.com/)** - 유틸리티 우선 CSS 프레임워크
+- **[CodeMirror](https://codemirror.net/)** - 고급 코드 편집기
+- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(선택사항)* - AI 기반 프로젝트 관리 및 작업 계획
+
+## 지원 및 커뮤니티
+
+### 최신 정보 받기
+- 이 리포지토리에 **Star**를 눌러 지지를 표시하세요
+- **Watch**로 업데이트 및 새 릴리스를 확인하세요
+- 프로젝트를 **Follow**하여 공지사항을 받으세요
+
+### 스폰서
+- [Siteboon - AI powered website builder](https://siteboon.ai)
+---
+
+<div align="center">
+  <strong>Claude Code, Cursor 및 Codex 커뮤니티를 위해 정성껏 만들었습니다.</strong>
+</div>
--- a/README.md
+++ b/README.md
@@ -6,7 +6,8 @@

 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) and [Codex](https://developers.openai.com/codex). You can use it locally or remotely to view your active projects and sessions in Claude Code, Cursor, or Codex and make changes to them from everywhere (mobile or desktop). This gives you a proper interface that works everywhere. 

- [English](./README.md) | [中文](./README.zh-CN.md)
+<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>
+<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>

 ## Screenshots

@@ -57,7 +58,7 @@ A desktop and mobile UI for [Claude Code](https://docs.anthropic.com/en/docs/cla

 ### Prerequisites

- [Node.js](https://nodejs.org/) v20 or higher
+- [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
@@ -291,31 +292,7 @@ session counts

 ### Contributing

-We welcome contributions! Please follow these guidelines:
-
-#### Getting Started
-1. **Fork** the repository
-2. **Clone** your fork: `git clone <your-fork-url>`
-3. **Install** dependencies: `npm install`
-4. **Create** a feature branch: `git checkout -b feature/amazing-feature`
-
-#### Development Process
-1. **Make your changes** following the existing code style
-2. **Test thoroughly** - ensure all features work correctly
-3. **Run quality checks**: `npm run lint && npm run format`
-4. **Commit** with descriptive messages following [Conventional Commits](https://conventionalcommits.org/)
-5. **Push** to your branch: `git push origin feature/amazing-feature`
-6. **Submit** a Pull Request with:
-   - Clear description of changes
-   - Screenshots for UI changes
-   - Test results if applicable
-
-#### What to Contribute
- **Bug fixes** - Help us improve stability
- **New features** - Enhance functionality (discuss in issues first)
- **Documentation** - Improve guides and API docs
- **UI/UX improvements** - Better user experience
- **Performance optimizations** - Make it faster
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details on commit conventions, development workflow, and release process.

 ## Troubleshooting

--- 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 中的活跃项目和会话,并从任何地方(移动端或桌面端)对它们进行修改。这为您提供了一个在任何地方都能正常使用的合适界面。

- [English](./README.md) | [中文](./README.zh-CN.md)
+<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.ja.md">日本語</a></i></div>

 ## 截图

@@ -57,7 +57,7 @@

 ### 前置要求

- [Node.js](https://nodejs.org/) v20 或更高版本
+- [Node.js](https://nodejs.org/) v22 或更高版本
 - 已安装并配置 [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code),和/或
 - 已安装并配置 [Cursor CLI](https://docs.cursor.com/en/cli/overview),和/或
 - 已安装并配置 [Codex](https://developers.openai.com/codex)
@@ -290,31 +290,7 @@ Claude Code UI 支持 **[TaskMaster AI](https://github.com/eyaltoledano/claude-t

 ### 贡献

-我们欢迎贡献!请遵循以下指南:
-
-#### 入门
-1. **Fork** 仓库
-2. **克隆** 您的 fork: `git clone <your-fork-url>`
-3. **安装** 依赖: `npm install`
-4. **创建** 特性分支: `git checkout -b feature/amazing-feature`
-
-#### 开发流程
-1. **进行更改**,遵循现有代码风格
-2. **彻底测试** - 确保所有功能正常工作
-3. **运行质量检查**: `npm run lint && npm run format`
-4. **提交**,遵循 [Conventional Commits](https://conventionalcommits.org/)的描述性消息
-5. **推送** 到您的分支: `git push origin feature/amazing-feature`
-6. **提交** 拉取请求,包括:
-   - 更改的清晰描述
-   - UI 更改的截图
-   - 适用时的测试结果
-
-#### 贡献内容
- **错误修复** - 帮助我们提高稳定性
- **新功能** - 增强功能(先在 issue 中讨论)
- **文档** - 改进指南和 API 文档
- **UI/UX 改进** - 更好的用户体验
- **性能优化** - 让它更快
+我们欢迎贡献！有关提交规范、开发流程和发布流程的详细信息,请参阅 [Contributing Guide](CONTRIBUTING.md)。

 ## 故障排除

--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
-    <title>Claude Code UI</title>
+    <title>CloudCLI UI</title>
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json" />
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,16 @@
 {
  "name": "@siteboon/claude-code-ui",
-  "version": "1.16.2",
+  "version": "1.20.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@siteboon/claude-code-ui",
-      "version": "1.16.2",
-      "license": "MIT",
+      "version": "1.20.1",
+      "hasInstallScript": true,
+      "license": "GPL-3.0",
      "dependencies": {
-        "@anthropic-ai/claude-agent-sdk": "^0.1.29",
+        "@anthropic-ai/claude-agent-sdk": "^0.1.71",
        "@codemirror/lang-css": "^6.3.1",
        "@codemirror/lang-html": "^6.4.9",
        "@codemirror/lang-javascript": "^6.2.4",
@@ -20,7 +21,7 @@
        "@codemirror/theme-one-dark": "^6.1.2",
        "@iarna/toml": "^2.2.5",
        "@octokit/rest": "^22.0.0",
-        "@openai/codex-sdk": "^0.75.0",
+        "@openai/codex-sdk": "^0.101.0",
        "@replit/codemirror-minimap": "^0.5.2",
        "@tailwindcss/typography": "^0.5.16",
        "@uiw/react-codemirror": "^4.23.13",
@@ -51,11 +52,13 @@
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-dropzone": "^14.2.3",
+        "react-error-boundary": "^4.1.2",
        "react-i18next": "^16.5.3",
        "react-markdown": "^10.1.0",
        "react-router-dom": "^6.8.1",
        "react-syntax-highlighter": "^15.6.1",
        "rehype-katex": "^7.0.1",
+        "rehype-raw": "^7.0.0",
        "remark-gfm": "^4.0.0",
        "remark-math": "^6.0.0",
        "sqlite": "^5.1.1",
@@ -68,6 +71,7 @@
        "cloudcli": "server/cli.js"
      },
      "devDependencies": {
+        "@release-it/conventional-changelog": "^10.0.5",
        "@types/node": "^22.19.7",
        "@types/react": "^18.2.43",
        "@types/react-dom": "^18.2.17",
@@ -111,9 +115,9 @@
      }
    },
    "node_modules/@anthropic-ai/claude-agent-sdk": {
-      "version": "0.1.29",
-      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk/-/claude-agent-sdk-0.1.29.tgz",
-      "integrity": "sha512-VbR2ybPdJHVKAD3pQdruVw8LdXoPbk5J59xU/bQoMNzAsBckHrD2LhupMJrBxLUWxLaPkIUlNKquGBRbkoK84Q==",
+      "version": "0.1.77",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk/-/claude-agent-sdk-0.1.77.tgz",
+      "integrity": "sha512-ZEjWQtkoB2MEY6K16DWMmF+8OhywAynH0m08V265cerbZ8xPD/2Ng2jPzbbO40mPeFSsMDJboShL+a3aObP0Jg==",
      "license": "SEE LICENSE IN README.md",
      "engines": {
        "node": ">=18.0.0"
@@ -124,10 +128,88 @@
        "@img/sharp-linux-arm": "^0.33.5",
        "@img/sharp-linux-arm64": "^0.33.5",
        "@img/sharp-linux-x64": "^0.33.5",
+        "@img/sharp-linuxmusl-arm64": "^0.33.5",
+        "@img/sharp-linuxmusl-x64": "^0.33.5",
        "@img/sharp-win32-x64": "^0.33.5"
      },
      "peerDependencies": {
-        "zod": "^3.24.1"
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    },
+    "node_modules/@anthropic-ai/claude-agent-sdk/node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
+      "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@anthropic-ai/claude-agent-sdk/node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
+      "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@anthropic-ai/claude-agent-sdk/node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
+      "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@anthropic-ai/claude-agent-sdk/node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
+      "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4"
      }
    },
    "node_modules/@babel/code-frame": {
@@ -610,6 +692,46 @@
        "w3c-keyname": "^2.2.4"
      }
    },
+    "node_modules/@conventional-changelog/git-client": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@conventional-changelog/git-client/-/git-client-2.5.1.tgz",
+      "integrity": "sha512-lAw7iA5oTPWOLjiweb7DlGEMDEvzqzLLa6aWOly2FSZ64IwLE8T458rC+o+WvI31Doz6joM7X2DoNog7mX8r4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@simple-libs/child-process-utils": "^1.0.0",
+        "@simple-libs/stream-utils": "^1.1.0",
+        "semver": "^7.5.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "conventional-commits-filter": "^5.0.0",
+        "conventional-commits-parser": "^6.1.0"
+      },
+      "peerDependenciesMeta": {
+        "conventional-commits-filter": {
+          "optional": true
+        },
+        "conventional-commits-parser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@conventional-changelog/git-client/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/@emnapi/runtime": {
      "version": "1.4.5",
      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.5.tgz",
@@ -2431,15 +2553,140 @@
        "@octokit/openapi-types": "^26.0.0"
      }
    },
-    "node_modules/@openai/codex-sdk": {
-      "version": "0.75.0",
-      "resolved": "https://registry.npmjs.org/@openai/codex-sdk/-/codex-sdk-0.75.0.tgz",
-      "integrity": "sha512-4X5kHPXLu16SmGUdsvSa9xRuVmRC8oQw62iH8dRyIDbyy2MNkh068NNoHWDoJErRLUc4X4Ed2ceiNs6Tbkswnw==",
+    "node_modules/@openai/codex": {
+      "version": "0.101.0",
+      "resolved": "https://registry.npmjs.org/@openai/codex/-/codex-0.101.0.tgz",
+      "integrity": "sha512-H874q5K5I3chrT588BaddMr7GNvRYypc8C1MKWytNUF2PgxWMko2g/2DgKbt5OdajZKMsWdbsPywu34KQGf5Qw==",
      "license": "Apache-2.0",
+      "bin": {
+        "codex": "bin/codex.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "@openai/codex-darwin-arm64": "npm:@openai/codex@0.101.0-darwin-arm64",
+        "@openai/codex-darwin-x64": "npm:@openai/codex@0.101.0-darwin-x64",
+        "@openai/codex-linux-arm64": "npm:@openai/codex@0.101.0-linux-arm64",
+        "@openai/codex-linux-x64": "npm:@openai/codex@0.101.0-linux-x64",
+        "@openai/codex-win32-arm64": "npm:@openai/codex@0.101.0-win32-arm64",
+        "@openai/codex-win32-x64": "npm:@openai/codex@0.101.0-win32-x64"
+      }
+    },
+    "node_modules/@openai/codex-darwin-arm64": {
+      "name": "@openai/codex",
+      "version": "0.101.0-darwin-arm64",
+      "resolved": "https://registry.npmjs.org/@openai/codex/-/codex-0.101.0-darwin-arm64.tgz",
+      "integrity": "sha512-unk4rTRQQ9o0w2Upu35IsJHpoZHJ+tU/myn6LNhUjcP9FrjLnEcAQJ6WIMtdTYVPja1PGhFSO0DNxV79GMvehw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@openai/codex-darwin-x64": {
+      "name": "@openai/codex",
+      "version": "0.101.0-darwin-x64",
+      "resolved": "https://registry.npmjs.org/@openai/codex/-/codex-0.101.0-darwin-x64.tgz",
+      "integrity": "sha512-+KFi1IapCQGd3vLQp2lI4xI3hu2QffDZYt7Fhfw6NxEFOKhHnTamRtQ5yI8jYQcYF+pQfYF2fyiuXLM1lITLQw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@openai/codex-linux-arm64": {
+      "name": "@openai/codex",
+      "version": "0.101.0-linux-arm64",
+      "resolved": "https://registry.npmjs.org/@openai/codex/-/codex-0.101.0-linux-arm64.tgz",
+      "integrity": "sha512-RkDnQeq7M6ZBtD+8i+I5ewjjOf02BcJq6r1kN4RBewfAQBsz6B73Ns3OrI2bHVRsuPtAf8Cf1S4xg/eFZT2Omg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@openai/codex-linux-x64": {
+      "name": "@openai/codex",
+      "version": "0.101.0-linux-x64",
+      "resolved": "https://registry.npmjs.org/@openai/codex/-/codex-0.101.0-linux-x64.tgz",
+      "integrity": "sha512-SJeEdQ4ReEU3nvtceZ1uY3me6oWoB3djr3GnZmAUCEUuYEWD1kRGprAyJB1N0B+8zhSv0SU2e9sX5t3aCV4AwQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@openai/codex-sdk": {
+      "version": "0.101.0",
+      "resolved": "https://registry.npmjs.org/@openai/codex-sdk/-/codex-sdk-0.101.0.tgz",
+      "integrity": "sha512-Lrar2pDvGUX64itSbMNKuNBzxh72UwKokY4TPuXJRURwGX0qyDi80n7DiVivC40BwFsQWNs6behSo/9Mr6PoLw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@openai/codex": "0.101.0"
+      },
      "engines": {
        "node": ">=18"
      }
    },
+    "node_modules/@openai/codex-win32-arm64": {
+      "name": "@openai/codex",
+      "version": "0.101.0-win32-arm64",
+      "resolved": "https://registry.npmjs.org/@openai/codex/-/codex-0.101.0-win32-arm64.tgz",
+      "integrity": "sha512-WQ8QsychjHyvlr+vCSTMbd2/yrBIZre5tRuM79eZi973BJz0CSEiFsNSGg5fvpnJuiHHawZ/8HWeir7nlatamQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@openai/codex-win32-x64": {
+      "name": "@openai/codex",
+      "version": "0.101.0-win32-x64",
+      "resolved": "https://registry.npmjs.org/@openai/codex/-/codex-0.101.0-win32-x64.tgz",
+      "integrity": "sha512-H+7h9x0fYrJRUZZHCA62Dzb/CS5Scl1sUw1aamfmHJzzorX+uTFOgGsibzqFpHTd6nRM4q8//fCdSxe5wUpOQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=16"
+      }
+    },
    "node_modules/@phun-ky/typeof": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/@phun-ky/typeof/-/typeof-2.0.3.tgz",
@@ -2464,6 +2711,41 @@
        "node": ">=14"
      }
    },
+    "node_modules/@release-it/conventional-changelog": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/@release-it/conventional-changelog/-/conventional-changelog-10.0.5.tgz",
+      "integrity": "sha512-Dxul3YlUsDLbIg+aR6T0QR/VyKwuJNR3GZM8mKVEwFO8GpH2H5vgnN7kacEvq/Qk5puDadOVbhbUq/KBjraemQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@conventional-changelog/git-client": "^2.5.1",
+        "concat-stream": "^2.0.0",
+        "conventional-changelog": "^7.1.1",
+        "conventional-changelog-angular": "^8.1.0",
+        "conventional-changelog-conventionalcommits": "^9.1.0",
+        "conventional-recommended-bump": "^11.2.0",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^20.12.0 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "release-it": "^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@release-it/conventional-changelog/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/@remix-run/router": {
      "version": "1.23.0",
      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
@@ -2777,6 +3059,39 @@
        "win32"
      ]
    },
+    "node_modules/@simple-libs/child-process-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@simple-libs/child-process-utils/-/child-process-utils-1.0.1.tgz",
+      "integrity": "sha512-3nWd8irxvDI6v856wpPCHZ+08iQR0oHTZfzAZmnbsLzf+Sf1odraP6uKOHDZToXq3RPRV/LbqGVlSCogm9cJjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@simple-libs/stream-utils": "^1.1.0",
+        "@types/node": "^22.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://ko-fi.com/dangreen"
+      }
+    },
+    "node_modules/@simple-libs/stream-utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@simple-libs/stream-utils/-/stream-utils-1.1.0.tgz",
+      "integrity": "sha512-6rsHTjodIn/t90lv5snQjRPVtOosM7Vp0AKdrObymq45ojlgVwnpAqdc+0OBBrpEiy31zZ6/TKeIVqV1HwvnuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^22.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://ko-fi.com/dangreen"
+      }
+    },
    "node_modules/@tailwindcss/typography": {
      "version": "0.5.16",
      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
@@ -2918,6 +3233,13 @@
        "undici-types": "~6.21.0"
      }
    },
+    "node_modules/@types/normalize-package-data": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz",
+      "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@types/parse-path": {
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/@types/parse-path/-/parse-path-7.0.3.tgz",
@@ -3258,6 +3580,13 @@
      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
      "license": "MIT"
    },
+    "node_modules/array-ify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz",
+      "integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/ast-types": {
      "version": "0.13.4",
      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz",
@@ -4170,6 +4499,17 @@
        "node": ">= 6"
      }
    },
+    "node_modules/compare-func": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-2.0.0.tgz",
+      "integrity": "sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-ify": "^1.0.0",
+        "dot-prop": "^5.1.0"
+      }
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4265,6 +4605,143 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/conventional-changelog": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/conventional-changelog/-/conventional-changelog-7.1.1.tgz",
+      "integrity": "sha512-rlqa8Lgh8YzT3Akruk05DR79j5gN9NCglHtJZwpi6vxVeaoagz+84UAtKQj/sT+RsfGaZkt3cdFCjcN6yjr5sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@conventional-changelog/git-client": "^2.5.1",
+        "@types/normalize-package-data": "^2.4.4",
+        "conventional-changelog-preset-loader": "^5.0.0",
+        "conventional-changelog-writer": "^8.2.0",
+        "conventional-commits-parser": "^6.2.0",
+        "fd-package-json": "^2.0.0",
+        "meow": "^13.0.0",
+        "normalize-package-data": "^7.0.0"
+      },
+      "bin": {
+        "conventional-changelog": "dist/cli/index.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/conventional-changelog-angular": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-8.1.0.tgz",
+      "integrity": "sha512-GGf2Nipn1RUCAktxuVauVr1e3r8QrLP/B0lEUsFktmGqc3ddbQkhoJZHJctVU829U1c6mTSWftrVOCHaL85Q3w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "compare-func": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/conventional-changelog-conventionalcommits": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-9.1.0.tgz",
+      "integrity": "sha512-MnbEysR8wWa8dAEvbj5xcBgJKQlX/m0lhS8DsyAAWDHdfs2faDJxTgzRYlRYpXSe7UiKrIIlB4TrBKU9q9DgkA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "compare-func": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/conventional-changelog-preset-loader": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-5.0.0.tgz",
+      "integrity": "sha512-SetDSntXLk8Jh1NOAl1Gu5uLiCNSYenB5tm0YVeZKePRIgDW9lQImromTwLa3c/Gae298tsgOM+/CYT9XAl0NA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/conventional-changelog-writer": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-writer/-/conventional-changelog-writer-8.2.0.tgz",
+      "integrity": "sha512-Y2aW4596l9AEvFJRwFGJGiQjt2sBYTjPD18DdvxX9Vpz0Z7HQ+g1Z+6iYDAm1vR3QOJrDBkRHixHK/+FhkR6Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "conventional-commits-filter": "^5.0.0",
+        "handlebars": "^4.7.7",
+        "meow": "^13.0.0",
+        "semver": "^7.5.2"
+      },
+      "bin": {
+        "conventional-changelog-writer": "dist/cli/index.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/conventional-changelog-writer/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/conventional-commits-filter": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/conventional-commits-filter/-/conventional-commits-filter-5.0.0.tgz",
+      "integrity": "sha512-tQMagCOC59EVgNZcC5zl7XqO30Wki9i9J3acbUvkaosCT6JX3EeFwJD7Qqp4MCikRnzS18WXV3BLIQ66ytu6+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/conventional-commits-parser": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-6.2.1.tgz",
+      "integrity": "sha512-20pyHgnO40rvfI0NGF/xiEoFMkXDtkF8FwHvk5BokoFoCuTQRI8vrNCNFWUOfuolKJMm1tPCHc8GgYEtr1XRNA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "meow": "^13.0.0"
+      },
+      "bin": {
+        "conventional-commits-parser": "dist/cli/index.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/conventional-recommended-bump": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/conventional-recommended-bump/-/conventional-recommended-bump-11.2.0.tgz",
+      "integrity": "sha512-lqIdmw330QdMBgfL0e6+6q5OMKyIpy4OZNmepit6FS3GldhkG+70drZjuZ0A5NFpze5j85dlYs3GabQXl6sMHw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@conventional-changelog/git-client": "^2.5.1",
+        "conventional-changelog-preset-loader": "^5.0.0",
+        "conventional-commits-filter": "^5.0.0",
+        "conventional-commits-parser": "^6.1.0",
+        "meow": "^13.0.0"
+      },
+      "bin": {
+        "conventional-recommended-bump": "dist/cli/index.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/convert-source-map": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -4560,6 +5037,19 @@
      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
      "license": "MIT"
    },
+    "node_modules/dot-prop": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-obj": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/dotenv": {
      "version": "17.2.2",
      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.2.tgz",
@@ -5086,6 +5576,16 @@
        "url": "https://github.com/sponsors/wooorm"
      }
    },
+    "node_modules/fd-package-json": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fd-package-json/-/fd-package-json-2.0.0.tgz",
+      "integrity": "sha512-jKmm9YtsNXN789RS/0mSzOC1NUq9mkVd65vbSSVsKdjGvYXBuE4oWe2QOEoFeRmJg+lPuZxpmrfFclNhoRMneQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "walk-up-path": "^4.0.0"
+      }
+    },
    "node_modules/file-selector": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz",
@@ -5720,6 +6220,31 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/hast-util-raw": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.1.0.tgz",
+      "integrity": "sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "hast-util-to-parse5": "^8.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "parse5": "^7.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/hast-util-to-jsx-runtime": {
      "version": "2.3.6",
      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
@@ -5747,6 +6272,25 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/hast-util-to-parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.1.tgz",
+      "integrity": "sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/hast-util-to-text": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
@@ -5808,6 +6352,26 @@
      "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
      "license": "CC0-1.0"
    },
+    "node_modules/hosted-git-info": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-8.1.0.tgz",
+      "integrity": "sha512-Rw/B2DNQaPBICNXEm8balFz9a6WpZrkCGpcWFpy7nCj+NyhSdqXipmfvtmWt9xGfp0wZnBxB+iVpLmQMYt47Tw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "lru-cache": "^10.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/hosted-git-info/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
    "node_modules/html-parse-stringify": {
      "version": "3.0.1",
      "resolved": "https://registry.npmmirror.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
@@ -5827,6 +6391,16 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/http-cache-semantics": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
@@ -6280,6 +6854,16 @@
        "node": ">=0.12.0"
      }
    },
+    "node_modules/is-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/is-plain-obj": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
@@ -7057,6 +7641,19 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/meow": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
+      "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/merge-descriptors": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
@@ -8254,6 +8851,34 @@
        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
      }
    },
+    "node_modules/normalize-package-data": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-7.0.1.tgz",
+      "integrity": "sha512-linxNAT6M0ebEYZOx2tO6vBEFsVgnPpv+AVjk0wJHfaUIbq31Jm3T6vvZaarnOeWDh8ShnwXuaAyM7WT3RzErA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "hosted-git-info": "^8.0.0",
+        "semver": "^7.3.5",
+        "validate-npm-package-license": "^3.0.4"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/normalize-package-data/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/normalize-path": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -9210,6 +9835,18 @@
        "react": ">= 16.8 || 18.0.0"
      }
    },
+    "node_modules/react-error-boundary": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.1.2.tgz",
+      "integrity": "sha512-GQDxZ5Jd+Aq/qUxbCm1UtzmL/s++V7zKgE8yMktJiCQXCCFZnMZh9ng+6/Ne6PjNSXH0L9CjeOEREfRnq6Duag==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
    "node_modules/react-i18next": {
      "version": "16.5.3",
      "resolved": "https://registry.npmmirror.com/react-i18next/-/react-i18next-16.5.3.tgz",
@@ -9575,6 +10212,21 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/rehype-raw": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
+      "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-raw": "^9.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/release-it": {
      "version": "19.0.5",
      "resolved": "https://registry.npmjs.org/release-it/-/release-it-19.0.5.tgz",
@@ -10613,6 +11265,42 @@
      "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==",
      "dev": true
    },
+    "node_modules/spdx-correct": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
+      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-exceptions": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
+      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==",
+      "dev": true,
+      "license": "CC-BY-3.0"
+    },
+    "node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.22",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.22.tgz",
+      "integrity": "sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
    "node_modules/sprintf-js": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -11940,6 +12628,17 @@
        "node": ">= 0.4.0"
      }
    },
+    "node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
    "node_modules/vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -12112,6 +12811,16 @@
      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
      "license": "MIT"
    },
+    "node_modules/walk-up-path": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/walk-up-path/-/walk-up-path-4.0.0.tgz",
+      "integrity": "sha512-3hu+tD8YzSLGuFYtPRb48vdhKMi0KQV5sn+uWr8+7dMEq/2G/dtLrdDinkLjqq5TIbIBjYJ4Ax/n3YiaW7QM8A==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
    "node_modules/web-namespaces": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
@@ -12508,9 +13217,9 @@
      }
    },
    "node_modules/zod": {
-      "version": "3.25.76",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
+      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
      "license": "MIT",
      "peer": true,
      "funding": {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@siteboon/claude-code-ui",
-  "version": "1.16.2",
+  "version": "1.20.1",
  "description": "A web-based UI for Claude Code CLI",
  "type": "module",
  "main": "server/index.js",
@@ -12,6 +12,7 @@
    "server/",
    "shared/",
    "dist/",
+    "scripts/",
    "README.md"
  ],
  "homepage": "https://cloudcli.ai",
@@ -30,19 +31,21 @@
    "preview": "vite preview",
    "typecheck": "tsc --noEmit -p tsconfig.json",
    "start": "npm run build && npm run server",
-    "release": "./release.sh"
+    "release": "./release.sh",
+    "prepublishOnly": "npm run build",
+    "postinstall": "node scripts/fix-node-pty.js"
  },
  "keywords": [
-    "claude coode",
+    "claude code",
    "ai",
    "anthropic",
    "ui",
    "mobile"
  ],
-  "author": "Claude Code UI Contributors",
-  "license": "MIT",
+  "author": "CloudCLI UI Contributors",
+  "license": "GPL-3.0",
  "dependencies": {
-    "@anthropic-ai/claude-agent-sdk": "^0.1.29",
+    "@anthropic-ai/claude-agent-sdk": "^0.1.71",
    "@codemirror/lang-css": "^6.3.1",
    "@codemirror/lang-html": "^6.4.9",
    "@codemirror/lang-javascript": "^6.2.4",
@@ -53,7 +56,7 @@
    "@codemirror/theme-one-dark": "^6.1.2",
    "@iarna/toml": "^2.2.5",
    "@octokit/rest": "^22.0.0",
-    "@openai/codex-sdk": "^0.75.0",
+    "@openai/codex-sdk": "^0.101.0",
    "@replit/codemirror-minimap": "^0.5.2",
    "@tailwindcss/typography": "^0.5.16",
    "@uiw/react-codemirror": "^4.23.13",
@@ -84,11 +87,13 @@
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3",
+    "react-error-boundary": "^4.1.2",
    "react-i18next": "^16.5.3",
    "react-markdown": "^10.1.0",
    "react-router-dom": "^6.8.1",
    "react-syntax-highlighter": "^15.6.1",
    "rehype-katex": "^7.0.1",
+    "rehype-raw": "^7.0.0",
    "remark-gfm": "^4.0.0",
    "remark-math": "^6.0.0",
    "sqlite": "^5.1.1",
@@ -97,6 +102,7 @@
    "ws": "^8.14.2"
  },
  "devDependencies": {
+    "@release-it/conventional-changelog": "^10.0.5",
    "@types/node": "^22.19.7",
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
--- a/public/icons/generate-icons.md
+++ b/public/icons/generate-icons.md
@@ -1,19 +0,0 @@
-# PWA Icons Required
-
-Create the following icon files in this directory:
-
- icon-72x72.png
- icon-96x96.png
- icon-128x128.png
- icon-144x144.png
- icon-152x152.png
- icon-192x192.png
- icon-384x384.png
- icon-512x512.png
-
-You can use any icon generator tool or create them manually. The icons should be square and represent your Claude Code UI application.
-
-For a quick solution, you can:
-1. Create a simple square PNG icon (512x512)
-2. Use online tools like realfavicongenerator.net to generate all sizes
-3. Or use ImageMagick: `convert icon-512x512.png -resize 192x192 icon-192x192.png`
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,7 +1,7 @@
 {
-  "name": "Claude Code UI",
-  "short_name": "Claude UI",
-  "description": "Claude Code UI web application",
+  "name": "CloudCLI UI",
+  "short_name": "CloudCLI UI",
+  "description": "CloudCLI UI web application",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
--- a/scripts/fix-node-pty.js
+++ b/scripts/fix-node-pty.js
@@ -0,0 +1,67 @@
+#!/usr/bin/env node
+/**
+ * Fix node-pty spawn-helper permissions on macOS
+ *
+ * This script fixes a known issue with node-pty where the spawn-helper
+ * binary is shipped without execute permissions, causing "posix_spawnp failed" errors.
+ *
+ * @see https://github.com/microsoft/node-pty/issues/850
+ * @module scripts/fix-node-pty
+ */
+
+import { promises as fs } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/**
+ * Fixes the spawn-helper binary permissions for node-pty on macOS.
+ *
+ * The node-pty package ships the spawn-helper binary without execute permissions
+ * (644 instead of 755), which causes "posix_spawnp failed" errors when trying
+ * to spawn terminal processes.
+ *
+ * This function:
+ * 1. Checks if running on macOS (darwin)
+ * 2. Locates spawn-helper binaries for both arm64 and x64 architectures
+ * 3. Sets execute permissions (755) on each binary found
+ *
+ * @async
+ * @function fixSpawnHelper
+ * @returns {Promise<void>} Resolves when permissions are fixed or skipped
+ * @example
+ * // Run as postinstall script
+ * await fixSpawnHelper();
+ */
+async function fixSpawnHelper() {
+  const nodeModulesPath = path.join(__dirname, '..', 'node_modules', 'node-pty', 'prebuilds');
+
+  // Only run on macOS
+  if (process.platform !== 'darwin') {
+    return;
+  }
+
+  const darwinDirs = ['darwin-arm64', 'darwin-x64'];
+
+  for (const dir of darwinDirs) {
+    const spawnHelperPath = path.join(nodeModulesPath, dir, 'spawn-helper');
+
+    try {
+      // Check if file exists
+      await fs.access(spawnHelperPath);
+
+      // Make it executable (755)
+      await fs.chmod(spawnHelperPath, 0o755);
+      console.log(`[postinstall] Fixed permissions for ${spawnHelperPath}`);
+    } catch (err) {
+      // File doesn't exist or other error - ignore
+      if (err.code !== 'ENOENT') {
+        console.warn(`[postinstall] Warning: Could not fix ${spawnHelperPath}: ${err.message}`);
+      }
+    }
+  }
+}
+
+fixSpawnHelper().catch(console.error);
--- a/server/claude-sdk.js
+++ b/server/claude-sdk.js
@@ -13,41 +13,26 @@
 */

 import { query } from '@anthropic-ai/claude-agent-sdk';
-// Used to mint unique approval request IDs when randomUUID is not available.
-// This keeps parallel tool approvals from colliding; it does not add any crypto/security guarantees.
 import crypto from 'crypto';
 import { promises as fs } from 'fs';
 import path from 'path';
 import os from 'os';
 import { CLAUDE_MODELS } from '../shared/modelConstants.js';

-// Session tracking: Map of session IDs to active query instances
 const activeSessions = new Map();
-// In-memory registry of pending tool approvals keyed by requestId.
-// This does not persist approvals or share across processes; it exists so the
-// SDK can pause tool execution while the UI decides what to do.
 const pendingToolApprovals = new Map();

-// Default approval timeout kept under the SDK's 60s control timeout.
-// This does not change SDK limits; it only defines how long we wait for the UI,
-// introduced to avoid hanging the run when no decision arrives.
 const TOOL_APPROVAL_TIMEOUT_MS = parseInt(process.env.CLAUDE_TOOL_APPROVAL_TIMEOUT_MS, 10) || 55000;

-// Generate a stable request ID for UI approval flows.
-// This does not encode tool details or get shown to users; it exists so the UI
-// can respond to the correct pending request without collisions.
+const TOOLS_REQUIRING_INTERACTION = new Set(['AskUserQuestion']);
+
 function createRequestId() {
-  // if clause is used because randomUUID is not available in older Node.js versions
  if (typeof crypto.randomUUID === 'function') {
    return crypto.randomUUID();
  }
  return crypto.randomBytes(16).toString('hex');
 }

-// Wait for a UI approval decision, honoring SDK cancellation.
-// This does not auto-approve or auto-deny; it only resolves with UI input,
-// and it cleans up the pending map to avoid leaks, introduced to prevent
-// replying after the SDK cancels the control request.
 function waitForToolApproval(requestId, options = {}) {
  const { timeoutMs = TOOL_APPROVAL_TIMEOUT_MS, signal, onCancel } = options;

@@ -61,24 +46,25 @@ function waitForToolApproval(requestId, options = {}) {
      resolve(decision);
    };

+    let timeout;
+
    const cleanup = () => {
      pendingToolApprovals.delete(requestId);
-      clearTimeout(timeout);
+      if (timeout) clearTimeout(timeout);
      if (signal && abortHandler) {
        signal.removeEventListener('abort', abortHandler);
      }
    };

-    // Timeout is local to this process; it does not override SDK timing.
-    // It exists to prevent the UI prompt from lingering indefinitely.
-    const timeout = setTimeout(() => {
-      onCancel?.('timeout');
-      finalize(null);
-    }, timeoutMs);
+    // timeoutMs 0 = wait indefinitely (interactive tools)
+    if (timeoutMs > 0) {
+      timeout = setTimeout(() => {
+        onCancel?.('timeout');
+        finalize(null);
+      }, timeoutMs);
+    }

    const abortHandler = () => {
-      // If the SDK cancels the control request, stop waiting to avoid
-      // replying after the process is no longer ready for writes.
      onCancel?.('cancelled');
      finalize({ cancelled: true });
    };
@@ -98,9 +84,6 @@ function waitForToolApproval(requestId, options = {}) {
  });
 }

-// Resolve a pending approval. This does not validate the decision payload;
-// validation and tool matching remain in canUseTool, which keeps this as a
-// lightweight WebSocket -> SDK relay.
 function resolveToolApproval(requestId, decision) {
  const resolver = pendingToolApprovals.get(requestId);
  if (resolver) {
@@ -175,9 +158,6 @@ function mapCliOptionsToSDK(options = {}) {
    sdkOptions.permissionMode = 'bypassPermissions';
  }

-  // Map allowed tools (always set to avoid implicit "allow all" defaults).
-  // This does not grant permissions by itself; it just configures the SDK,
-  // introduced because leaving it undefined made the SDK treat it as "all tools allowed."
  let allowedTools = [...(settings.allowedTools || [])];

  // Add plan mode default tools
@@ -192,8 +172,11 @@ function mapCliOptionsToSDK(options = {}) {

  sdkOptions.allowedTools = allowedTools;

-  // Map disallowed tools (always set so the SDK doesn't treat "undefined" as permissive).
-  // This does not override allowlists; it only feeds the canUseTool gate.
+  // Use the tools preset to make all default built-in tools available (including AskUserQuestion).
+  // This was introduced in SDK 0.1.57. Omitting this preserves existing behavior (all tools available),
+  // but being explicit ensures forward compatibility and clarity.
+  sdkOptions.tools = { type: 'preset', preset: 'claude_code' };
+
  sdkOptions.disallowedTools = settings.disallowedTools || [];

  // Map model (default to sonnet)
@@ -267,9 +250,13 @@ function getAllSessions() {
 * @returns {Object} Transformed message ready for WebSocket
 */
 function transformMessage(sdkMessage) {
-  // SDK messages are already in a format compatible with the frontend
-  // The CLI sends them wrapped in {type: 'claude-response', data: message}
-  // We'll do the same here to maintain compatibility
+  // Extract parent_tool_use_id for subagent tool grouping
+  if (sdkMessage.parent_tool_use_id) {
+    return {
+      ...sdkMessage,
+      parentToolUseId: sdkMessage.parent_tool_use_id
+    };
+  }
  return sdkMessage;
 }

@@ -490,27 +477,27 @@ async function queryClaudeSDK(command, options = {}, ws) {
    tempImagePaths = imageResult.tempImagePaths;
    tempDir = imageResult.tempDir;

-    // Gate tool usage with explicit UI approval when not auto-approved.
-    // This does not render UI or persist permissions; it only bridges to the UI
-    // via WebSocket and waits for the response, introduced so tool calls pause
-    // instead of auto-running when the allowlist is empty.
    sdkOptions.canUseTool = async (toolName, input, context) => {
-      if (sdkOptions.permissionMode === 'bypassPermissions') {
-        return { behavior: 'allow', updatedInput: input };
-      }
+      const requiresInteraction = TOOLS_REQUIRING_INTERACTION.has(toolName);

-      const isDisallowed = (sdkOptions.disallowedTools || []).some(entry =>
-        matchesToolPermission(entry, toolName, input)
-      );
-      if (isDisallowed) {
-        return { behavior: 'deny', message: 'Tool disallowed by settings' };
-      }
+      if (!requiresInteraction) {
+        if (sdkOptions.permissionMode === 'bypassPermissions') {
+          return { behavior: 'allow', updatedInput: input };
+        }

-      const isAllowed = (sdkOptions.allowedTools || []).some(entry =>
-        matchesToolPermission(entry, toolName, input)
-      );
-      if (isAllowed) {
-        return { behavior: 'allow', updatedInput: input };
+        const isDisallowed = (sdkOptions.disallowedTools || []).some(entry =>
+          matchesToolPermission(entry, toolName, input)
+        );
+        if (isDisallowed) {
+          return { behavior: 'deny', message: 'Tool disallowed by settings' };
+        }
+
+        const isAllowed = (sdkOptions.allowedTools || []).some(entry =>
+          matchesToolPermission(entry, toolName, input)
+        );
+        if (isAllowed) {
+          return { behavior: 'allow', updatedInput: input };
+        }
      }

      const requestId = createRequestId();
@@ -522,9 +509,8 @@ async function queryClaudeSDK(command, options = {}, ws) {
        sessionId: capturedSessionId || sessionId || null
      });

-      // Wait for the UI; if the SDK cancels, notify the UI so it can dismiss the banner.
-      // This does not retry or resurface the prompt; it just reflects the cancellation.
      const decision = await waitForToolApproval(requestId, {
+        timeoutMs: requiresInteraction ? 0 : undefined,
        signal: context?.signal,
        onCancel: (reason) => {
          ws.send({
@@ -544,8 +530,6 @@ async function queryClaudeSDK(command, options = {}, ws) {
      }

      if (decision.allow) {
-        // rememberEntry only updates this run's in-memory allowlist to prevent
-        // repeated prompts in the same session; persistence is handled by the UI.
        if (decision.rememberEntry && typeof decision.rememberEntry === 'string') {
          if (!sdkOptions.allowedTools.includes(decision.rememberEntry)) {
            sdkOptions.allowedTools.push(decision.rememberEntry);
@@ -560,12 +544,22 @@ async function queryClaudeSDK(command, options = {}, ws) {
      return { behavior: 'deny', message: decision.message ?? 'User denied tool use' };
    };

-    // Create SDK query instance
+    // Set stream-close timeout for interactive tools (Query constructor reads it synchronously). Claude Agent SDK has a default of 5s and this overrides it
+    const prevStreamTimeout = process.env.CLAUDE_CODE_STREAM_CLOSE_TIMEOUT;
+    process.env.CLAUDE_CODE_STREAM_CLOSE_TIMEOUT = '300000';
+
    const queryInstance = query({
      prompt: finalCommand,
      options: sdkOptions
    });

+    // Restore immediately — Query constructor already captured the value
+    if (prevStreamTimeout !== undefined) {
+      process.env.CLAUDE_CODE_STREAM_CLOSE_TIMEOUT = prevStreamTimeout;
+    } else {
+      delete process.env.CLAUDE_CODE_STREAM_CLOSE_TIMEOUT;
+    }
+
    // Track the query instance for abort capability
    if (capturedSessionId) {
      addSession(capturedSessionId, queryInstance, tempImagePaths, tempDir);
--- a/server/constants/config.js
+++ b/server/constants/config.js
@@ -0,0 +1,5 @@
+/**
+ * Environment Flag: Is Platform
+ * Indicates if the app is running in Platform mode (hosted) or OSS mode (self-hosted)
+ */
+export const IS_PLATFORM = process.env.VITE_IS_PLATFORM === 'true';
--- a/server/database/db.js
+++ b/server/database/db.js
@@ -40,6 +40,22 @@ if (process.env.DATABASE_PATH) {
  }
 }

+// As part of 1.19.2 we are introducing a new location for auth.db. The below handles exisitng moving legacy database from install directory to new location
+const LEGACY_DB_PATH = path.join(__dirname, 'auth.db');
+if (DB_PATH !== LEGACY_DB_PATH && !fs.existsSync(DB_PATH) && fs.existsSync(LEGACY_DB_PATH)) {
+  try {
+    fs.copyFileSync(LEGACY_DB_PATH, DB_PATH);
+    console.log(`[MIGRATION] Copied database from ${LEGACY_DB_PATH} to ${DB_PATH}`);
+    for (const suffix of ['-wal', '-shm']) {
+      if (fs.existsSync(LEGACY_DB_PATH + suffix)) {
+        fs.copyFileSync(LEGACY_DB_PATH + suffix, DB_PATH + suffix);
+      }
+    }
+  } catch (err) {
+    console.warn(`[MIGRATION] Could not copy legacy database: ${err.message}`);
+  }
+}
+
 // Create database connection
 const db = new Database(DB_PATH);

@@ -128,12 +144,12 @@ const userDb = {
    }
  },

-  // Update last login time
+  // Update last login time (non-fatal — logged but not thrown)
  updateLastLogin: (userId) => {
    try {
      db.prepare('UPDATE users SET last_login = CURRENT_TIMESTAMP WHERE id = ?').run(userId);
    } catch (err) {
-      throw err;
+      console.warn('Failed to update last login:', err.message);
    }
  },

--- a/server/index.js
+++ b/server/index.js
@@ -1,5 +1,6 @@
 #!/usr/bin/env node
-// Load environment variables from .env file
+// Load environment variables before other imports execute
+import './load-env.js';
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
@@ -8,6 +9,8 @@ import { dirname } from 'path';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);

+const installMode = fs.existsSync(path.join(__dirname, '..', '.git')) ? 'git' : 'npm';
+
 // ANSI color codes for terminal output
 const colors = {
    reset: '\x1b[0m',
@@ -28,22 +31,6 @@ const c = {
    dim: (text) => `${colors.dim}${text}${colors.reset}`,
 };

-try {
-    const envPath = path.join(__dirname, '../.env');
-    const envFile = fs.readFileSync(envPath, 'utf8');
-    envFile.split('\n').forEach(line => {
-        const trimmedLine = line.trim();
-        if (trimmedLine && !trimmedLine.startsWith('#')) {
-            const [key, ...valueParts] = trimmedLine.split('=');
-            if (key && valueParts.length > 0 && !process.env[key]) {
-                process.env[key] = valueParts.join('=').trim();
-            }
-        }
-    });
-} catch (e) {
-    console.log('No .env file found or error reading it:', e.message);
-}
-
 console.log('PORT from env:', process.env.PORT);

 import express from 'express';
@@ -76,9 +63,26 @@ import userRoutes from './routes/user.js';
 import codexRoutes from './routes/codex.js';
 import { initializeDatabase } from './database/db.js';
 import { validateApiKey, authenticateToken, authenticateWebSocket } from './middleware/auth.js';
+import { IS_PLATFORM } from './constants/config.js';

-// File system watcher for projects folder
-let projectsWatcher = null;
+// File system watchers for provider project/session folders
+const PROVIDER_WATCH_PATHS = [
+    { provider: 'claude', rootPath: path.join(os.homedir(), '.claude', 'projects') },
+    { provider: 'cursor', rootPath: path.join(os.homedir(), '.cursor', 'chats') },
+    { provider: 'codex', rootPath: path.join(os.homedir(), '.codex', 'sessions') }
+];
+const WATCHER_IGNORED_PATTERNS = [
+    '**/node_modules/**',
+    '**/.git/**',
+    '**/dist/**',
+    '**/build/**',
+    '**/*.tmp',
+    '**/*.swp',
+    '**/.DS_Store'
+];
+const WATCHER_DEBOUNCE_MS = 300;
+let projectsWatchers = [];
+let projectsWatcherDebounceTimer = null;
 const connectedClients = new Set();
 let isGetProjectsRunning = false; // Flag to prevent reentrant calls

@@ -95,94 +99,110 @@ function broadcastProgress(progress) {
    });
 }

-// Setup file system watcher for Claude projects folder using chokidar
+// Setup file system watchers for Claude, Cursor, and Codex project/session folders
 async function setupProjectsWatcher() {
    const chokidar = (await import('chokidar')).default;
-    const claudeProjectsPath = path.join(os.homedir(), '.claude', 'projects');

-    if (projectsWatcher) {
-        projectsWatcher.close();
+    if (projectsWatcherDebounceTimer) {
+        clearTimeout(projectsWatcherDebounceTimer);
+        projectsWatcherDebounceTimer = null;
    }

-    try {
-        // Initialize chokidar watcher with optimized settings
-        projectsWatcher = chokidar.watch(claudeProjectsPath, {
-            ignored: [
-                '**/node_modules/**',
-                '**/.git/**',
-                '**/dist/**',
-                '**/build/**',
-                '**/*.tmp',
-                '**/*.swp',
-                '**/.DS_Store'
-            ],
-            persistent: true,
-            ignoreInitial: true, // Don't fire events for existing files on startup
-            followSymlinks: false,
-            depth: 10, // Reasonable depth limit
-            awaitWriteFinish: {
-                stabilityThreshold: 100, // Wait 100ms for file to stabilize
-                pollInterval: 50
+    await Promise.all(
+        projectsWatchers.map(async (watcher) => {
+            try {
+                await watcher.close();
+            } catch (error) {
+                console.error('[WARN] Failed to close watcher:', error);
            }
-        });
+        })
+    );
+    projectsWatchers = [];

-        // Debounce function to prevent excessive notifications
-        let debounceTimer;
-        const debouncedUpdate = async (eventType, filePath) => {
-            clearTimeout(debounceTimer);
-            debounceTimer = setTimeout(async () => {
-                // Prevent reentrant calls
-                if (isGetProjectsRunning) {
-                    return;
+    const debouncedUpdate = (eventType, filePath, provider, rootPath) => {
+        if (projectsWatcherDebounceTimer) {
+            clearTimeout(projectsWatcherDebounceTimer);
+        }
+
+        projectsWatcherDebounceTimer = setTimeout(async () => {
+            // Prevent reentrant calls
+            if (isGetProjectsRunning) {
+                return;
+            }
+
+            try {
+                isGetProjectsRunning = true;
+
+                // Clear project directory cache when files change
+                clearProjectDirectoryCache();
+
+                // Get updated projects list
+                const updatedProjects = await getProjects(broadcastProgress);
+
+                // Notify all connected clients about the project changes
+                const updateMessage = JSON.stringify({
+                    type: 'projects_updated',
+                    projects: updatedProjects,
+                    timestamp: new Date().toISOString(),
+                    changeType: eventType,
+                    changedFile: path.relative(rootPath, filePath),
+                    watchProvider: provider
+                });
+
+                connectedClients.forEach(client => {
+                    if (client.readyState === WebSocket.OPEN) {
+                        client.send(updateMessage);
+                    }
+                });
+
+            } catch (error) {
+                console.error('[ERROR] Error handling project changes:', error);
+            } finally {
+                isGetProjectsRunning = false;
+            }
+        }, WATCHER_DEBOUNCE_MS);
+    };
+
+    for (const { provider, rootPath } of PROVIDER_WATCH_PATHS) {
+        try {
+            // chokidar v4 emits ENOENT via the "error" event for missing roots and will not auto-recover.
+            // Ensure provider folders exist before creating the watcher so watching stays active.
+            await fsPromises.mkdir(rootPath, { recursive: true });
+
+            // Initialize chokidar watcher with optimized settings
+            const watcher = chokidar.watch(rootPath, {
+                ignored: WATCHER_IGNORED_PATTERNS,
+                persistent: true,
+                ignoreInitial: true, // Don't fire events for existing files on startup
+                followSymlinks: false,
+                depth: 10, // Reasonable depth limit
+                awaitWriteFinish: {
+                    stabilityThreshold: 100, // Wait 100ms for file to stabilize
+                    pollInterval: 50
                }
-
-                try {
-                    isGetProjectsRunning = true;
-
-                    // Clear project directory cache when files change
-                    clearProjectDirectoryCache();
-
-                    // Get updated projects list
-                    const updatedProjects = await getProjects(broadcastProgress);
-
-                    // Notify all connected clients about the project changes
-                    const updateMessage = JSON.stringify({
-                        type: 'projects_updated',
-                        projects: updatedProjects,
-                        timestamp: new Date().toISOString(),
-                        changeType: eventType,
-                        changedFile: path.relative(claudeProjectsPath, filePath)
-                    });
-
-                    connectedClients.forEach(client => {
-                        if (client.readyState === WebSocket.OPEN) {
-                            client.send(updateMessage);
-                        }
-                    });
-
-                } catch (error) {
-                    console.error('[ERROR] Error handling project changes:', error);
-                } finally {
-                    isGetProjectsRunning = false;
-                }
-            }, 300); // 300ms debounce (slightly faster than before)
-        };
-
-        // Set up event listeners
-        projectsWatcher
-            .on('add', (filePath) => debouncedUpdate('add', filePath))
-            .on('change', (filePath) => debouncedUpdate('change', filePath))
-            .on('unlink', (filePath) => debouncedUpdate('unlink', filePath))
-            .on('addDir', (dirPath) => debouncedUpdate('addDir', dirPath))
-            .on('unlinkDir', (dirPath) => debouncedUpdate('unlinkDir', dirPath))
-            .on('error', (error) => {
-                console.error('[ERROR] Chokidar watcher error:', error);
-            })
-            .on('ready', () => {
            });

-    } catch (error) {
-        console.error('[ERROR] Failed to setup projects watcher:', error);
+            // Set up event listeners
+            watcher
+                .on('add', (filePath) => debouncedUpdate('add', filePath, provider, rootPath))
+                .on('change', (filePath) => debouncedUpdate('change', filePath, provider, rootPath))
+                .on('unlink', (filePath) => debouncedUpdate('unlink', filePath, provider, rootPath))
+                .on('addDir', (dirPath) => debouncedUpdate('addDir', dirPath, provider, rootPath))
+                .on('unlinkDir', (dirPath) => debouncedUpdate('unlinkDir', dirPath, provider, rootPath))
+                .on('error', (error) => {
+                    console.error(`[ERROR] ${provider} watcher error:`, error);
+                })
+                .on('ready', () => {
+                });
+
+            projectsWatchers.push(watcher);
+        } catch (error) {
+            console.error(`[ERROR] Failed to setup ${provider} watcher for ${rootPath}:`, error);
+        }
+    }
+
+    if (projectsWatchers.length === 0) {
+        console.error('[ERROR] Failed to setup any provider watchers');
    }
 }

@@ -192,6 +212,69 @@ const server = http.createServer(app);

 const ptySessionsMap = new Map();
 const PTY_SESSION_TIMEOUT = 30 * 60 * 1000;
+const SHELL_URL_PARSE_BUFFER_LIMIT = 32768;
+const ANSI_ESCAPE_SEQUENCE_REGEX = /\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~]|\][^\x07]*(?:\x07|\x1B\\))/g;
+const TRAILING_URL_PUNCTUATION_REGEX = /[)\]}>.,;:!?]+$/;
+
+function stripAnsiSequences(value = '') {
+    return value.replace(ANSI_ESCAPE_SEQUENCE_REGEX, '');
+}
+
+function normalizeDetectedUrl(url) {
+    if (!url || typeof url !== 'string') return null;
+
+    const cleaned = url.trim().replace(TRAILING_URL_PUNCTUATION_REGEX, '');
+    if (!cleaned) return null;
+
+    try {
+        const parsed = new URL(cleaned);
+        if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+            return null;
+        }
+        return parsed.toString();
+    } catch {
+        return null;
+    }
+}
+
+function extractUrlsFromText(value = '') {
+    const directMatches = value.match(/https?:\/\/[^\s<>"'`\\\x1b\x07]+/gi) || [];
+
+    // Handle wrapped terminal URLs split across lines by terminal width.
+    const wrappedMatches = [];
+    const continuationRegex = /^[A-Za-z0-9\-._~:/?#\[\]@!$&'()*+,;=%]+$/;
+    const lines = value.split(/\r?\n/);
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i].trim();
+        const startMatch = line.match(/https?:\/\/[^\s<>"'`\\\x1b\x07]+/i);
+        if (!startMatch) continue;
+
+        let combined = startMatch[0];
+        let j = i + 1;
+        while (j < lines.length) {
+            const continuation = lines[j].trim();
+            if (!continuation) break;
+            if (!continuationRegex.test(continuation)) break;
+            combined += continuation;
+            j++;
+        }
+
+        wrappedMatches.push(combined.replace(/\r?\n\s*/g, ''));
+    }
+
+    return Array.from(new Set([...directMatches, ...wrappedMatches]));
+}
+
+function shouldAutoOpenUrlFromOutput(value = '') {
+    const normalized = value.toLowerCase();
+    return (
+        normalized.includes('browser didn\'t open') ||
+        normalized.includes('open this url') ||
+        normalized.includes('continue in your browser') ||
+        normalized.includes('press enter to open') ||
+        normalized.includes('open_url:')
+    );
+}

 // Single WebSocket server that handles both paths
 const wss = new WebSocketServer({
@@ -200,7 +283,7 @@ const wss = new WebSocketServer({
        console.log('WebSocket connection attempt to:', info.req.url);

        // Platform mode: always allow connection
-        if (process.env.VITE_IS_PLATFORM === 'true') {
+        if (IS_PLATFORM) {
            const user = authenticateWebSocket(null); // Will return first user
            if (!user) {
                console.log('[WARN] Platform mode: No user found in database');
@@ -252,7 +335,8 @@ app.use(express.urlencoded({ limit: '50mb', extended: true }));
 app.get('/health', (req, res) => {
  res.json({
    status: 'ok',
-    timestamp: new Date().toISOString()
+    timestamp: new Date().toISOString(),
+    installMode
  });
 });

@@ -329,11 +413,13 @@ app.post('/api/system/update', authenticateToken, async (req, res) => {

        console.log('Starting system update from directory:', projectRoot);

-        // Run the update command
-        const updateCommand = 'git checkout main && git pull && npm install';
+        // Run the update command based on install mode
+        const updateCommand = installMode === 'git'
+            ? 'git checkout main && git pull && npm install'
+            : 'npm install -g @siteboon/claude-code-ui@latest';

        const child = spawn('sh', ['-c', updateCommand], {
-            cwd: projectRoot,
+            cwd: installMode === 'git' ? projectRoot : os.homedir(),
            env: process.env
        });

@@ -622,7 +708,6 @@ app.get('/api/projects/:projectName/file', authenticateToken, async (req, res) =
        const { projectName } = req.params;
        const { filePath } = req.query;

-        console.log('[DEBUG] File read request:', projectName, filePath);

        // Security: ensure the requested path is inside the project root
        if (!filePath) {
@@ -663,7 +748,6 @@ app.get('/api/projects/:projectName/files/content', authenticateToken, async (re
        const { projectName } = req.params;
        const { path: filePath } = req.query;

-        console.log('[DEBUG] Binary file serve request:', projectName, filePath);

        // Security: ensure the requested path is inside the project root
        if (!filePath) {
@@ -717,7 +801,6 @@ app.put('/api/projects/:projectName/file', authenticateToken, async (req, res) =
        const { projectName } = req.params;
        const { filePath, content } = req.body;

-        console.log('[DEBUG] File save request:', projectName, filePath);

        // Security: ensure the requested path is inside the project root
        if (!filePath) {
@@ -974,7 +1057,8 @@ function handleShellConnection(ws) {
    console.log('🐚 Shell client connected');
    let shellProcess = null;
    let ptySessionKey = null;
-    let outputBuffer = [];
+    let urlDetectionBuffer = '';
+    const announcedAuthUrls = new Set();

    ws.on('message', async (message) => {
        try {
@@ -988,6 +1072,8 @@ function handleShellConnection(ws) {
                const provider = data.provider || 'claude';
                const initialCommand = data.initialCommand;
                const isPlainShell = data.isPlainShell || (!!initialCommand && !hasSession) || provider === 'plain-shell';
+                urlDetectionBuffer = '';
+                announcedAuthUrls.clear();

                // Login commands (Claude/Cursor auth) should never reuse cached sessions
                const isLoginCommand = initialCommand && (
@@ -1052,7 +1138,7 @@ function handleShellConnection(ws) {
                if (isPlainShell) {
                    welcomeMsg = `\x1b[36mStarting terminal in: ${projectPath}\x1b[0m\r\n`;
                } else {
-                    const providerName = provider === 'cursor' ? 'Cursor' : 'Claude';
+                    const providerName = provider === 'cursor' ? 'Cursor' : provider === 'codex' ? 'Codex' : 'Claude';
                    welcomeMsg = hasSession ?
                        `\x1b[36mResuming ${providerName} session ${sessionId} in: ${projectPath}\x1b[0m\r\n` :
                        `\x1b[36mStarting new ${providerName} session in: ${projectPath}\x1b[0m\r\n`;
@@ -1088,6 +1174,23 @@ function handleShellConnection(ws) {
                                shellCommand = `cd "${projectPath}" && 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 }`;
+                            } else {
+                                shellCommand = `Set-Location -Path "${projectPath}"; 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`;
+                            }
+                        }
                    } else {
                        // Use claude command (default) or initialCommand if provided
                        const command = initialCommand || 'claude';
@@ -1127,9 +1230,7 @@ function handleShellConnection(ws) {
                            ...process.env,
                            TERM: 'xterm-256color',
                            COLORTERM: 'truecolor',
-                            FORCE_COLOR: '3',
-                            // Override browser opening commands to echo URL for detection
-                            BROWSER: os.platform() === 'win32' ? 'echo "OPEN_URL:"' : 'echo "OPEN_URL:"'
+                            FORCE_COLOR: '3'
                        }
                    });

@@ -1159,38 +1260,47 @@ function handleShellConnection(ws) {
                        if (session.ws && session.ws.readyState === WebSocket.OPEN) {
                            let outputData = data;

-                            // Check for various URL opening patterns
-                            const patterns = [
-                                // Direct browser opening commands
-                                /(?:xdg-open|open|start)\s+(https?:\/\/[^\s\x1b\x07]+)/g,
-                                // BROWSER environment variable override
+                            const cleanChunk = stripAnsiSequences(data);
+                            urlDetectionBuffer = `${urlDetectionBuffer}${cleanChunk}`.slice(-SHELL_URL_PARSE_BUFFER_LIMIT);
+
+                            outputData = outputData.replace(
                                /OPEN_URL:\s*(https?:\/\/[^\s\x1b\x07]+)/g,
-                                // Git and other tools opening URLs
-                                /Opening\s+(https?:\/\/[^\s\x1b\x07]+)/gi,
-                                // General URL patterns that might be opened
-                                /Visit:\s*(https?:\/\/[^\s\x1b\x07]+)/gi,
-                                /View at:\s*(https?:\/\/[^\s\x1b\x07]+)/gi,
-                                /Browse to:\s*(https?:\/\/[^\s\x1b\x07]+)/gi
-                            ];
+                                '[INFO] Opening in browser: $1'
+                            );

-                            patterns.forEach(pattern => {
-                                let match;
-                                while ((match = pattern.exec(data)) !== null) {
-                                    const url = match[1];
-                                    console.log('[DEBUG] Detected URL for opening:', url);
+                            const emitAuthUrl = (detectedUrl, autoOpen = false) => {
+                                const normalizedUrl = normalizeDetectedUrl(detectedUrl);
+                                if (!normalizedUrl) return;

-                                    // Send URL opening message to client
+                                const isNewUrl = !announcedAuthUrls.has(normalizedUrl);
+                                if (isNewUrl) {
+                                    announcedAuthUrls.add(normalizedUrl);
                                    session.ws.send(JSON.stringify({
-                                        type: 'url_open',
-                                        url: url
+                                        type: 'auth_url',
+                                        url: normalizedUrl,
+                                        autoOpen
                                    }));
-
-                                    // Replace the OPEN_URL pattern with a user-friendly message
-                                    if (pattern.source.includes('OPEN_URL')) {
-                                        outputData = outputData.replace(match[0], `[INFO] Opening in browser: ${url}`);
-                                    }
                                }
-                            });
+
+                            };
+
+                            const normalizedDetectedUrls = extractUrlsFromText(urlDetectionBuffer)
+                                .map((url) => normalizeDetectedUrl(url))
+                                .filter(Boolean);
+
+                            // Prefer the most complete URL if shorter prefix variants are also present.
+                            const dedupedDetectedUrls = Array.from(new Set(normalizedDetectedUrls)).filter((url, _, urls) =>
+                                !urls.some((otherUrl) => otherUrl !== url && otherUrl.startsWith(url))
+                            );
+
+                            dedupedDetectedUrls.forEach((url) => emitAuthUrl(url, false));
+
+                            if (shouldAutoOpenUrlFromOutput(cleanChunk) && dedupedDetectedUrls.length > 0) {
+                                const bestUrl = dedupedDetectedUrls.reduce((longest, current) =>
+                                    current.length > longest.length ? current : longest
+                                );
+                                emitAuthUrl(bestUrl, true);
+                            }

                            // Send regular output
                            session.ws.send(JSON.stringify({
@@ -1798,6 +1908,9 @@ async function getFileTree(dirPath, maxDepth = 3, currentDepth = 0, showHidden =
 }

 const PORT = process.env.PORT || 3001;
+const HOST = process.env.HOST || '0.0.0.0';
+// Show localhost in URL when binding to all interfaces (0.0.0.0 isn't a connectable address)
+const DISPLAY_HOST = HOST === '0.0.0.0' ? 'localhost' : HOST;

 // Initialize database and start server
 async function startServer() {
@@ -1817,7 +1930,7 @@ async function startServer() {
            console.log(`${c.warn('[WARN]')} Note: Requests will be proxied to Vite dev server at ${c.dim('http://localhost:' + (process.env.VITE_PORT || 5173))}`);
        }

-        server.listen(PORT, '0.0.0.0', async () => {
+        server.listen(PORT, HOST, async () => {
            const appInstallPath = path.join(__dirname, '..');

            console.log('');
@@ -1825,7 +1938,7 @@ async function startServer() {
            console.log(`  ${c.bright('Claude Code UI Server - Ready')}`);
            console.log(c.dim('═'.repeat(63)));
            console.log('');
-            console.log(`${c.info('[INFO]')} Server URL:  ${c.bright('http://0.0.0.0:' + PORT)}`);
+            console.log(`${c.info('[INFO]')} Server URL:  ${c.bright('http://' + DISPLAY_HOST + ':' + PORT)}`);
            console.log(`${c.info('[INFO]')} Installed at: ${c.dim(appInstallPath)}`);
            console.log(`${c.tip('[TIP]')}  Run "cloudcli status" for full configuration details`);
            console.log('');
--- a/server/load-env.js
+++ b/server/load-env.js
@@ -0,0 +1,29 @@
+// Load environment variables from .env before other imports execute.
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+try {
+  const envPath = path.join(__dirname, '../.env');
+  const envFile = fs.readFileSync(envPath, 'utf8');
+  envFile.split('\n').forEach(line => {
+    const trimmedLine = line.trim();
+    if (trimmedLine && !trimmedLine.startsWith('#')) {
+      const [key, ...valueParts] = trimmedLine.split('=');
+      if (key && valueParts.length > 0 && !process.env[key]) {
+        process.env[key] = valueParts.join('=').trim();
+      }
+    }
+  });
+} catch (e) {
+  console.log('No .env file found or error reading it:', e.message);
+}
+
+if (!process.env.DATABASE_PATH) {
+  process.env.DATABASE_PATH = path.join(os.homedir(), '.cloudcli', 'auth.db');
+}
--- a/server/middleware/auth.js
+++ b/server/middleware/auth.js
@@ -1,5 +1,6 @@
 import jwt from 'jsonwebtoken';
 import { userDb } 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';
@@ -21,7 +22,7 @@ const validateApiKey = (req, res, next) => {
 // JWT authentication middleware
 const authenticateToken = async (req, res, next) => {
  // Platform mode:  use single database user
-  if (process.env.VITE_IS_PLATFORM === 'true') {
+  if (IS_PLATFORM) {
    try {
      const user = userDb.getFirstUser();
      if (!user) {
@@ -80,7 +81,7 @@ const generateToken = (user) => {
 // WebSocket authentication function
 const authenticateWebSocket = (token) => {
  // Platform mode: bypass token validation, return first user
-  if (process.env.VITE_IS_PLATFORM === 'true') {
+  if (IS_PLATFORM) {
    try {
      const user = userDb.getFirstUser();
      if (user) {
--- a/server/openai-codex.js
+++ b/server/openai-codex.js
@@ -203,6 +203,7 @@ export async function queryCodex(command, options = {}, ws) {
  let codex;
  let thread;
  let currentSessionId = sessionId;
+  const abortController = new AbortController();

  try {
    // Initialize Codex SDK
@@ -232,6 +233,7 @@ export async function queryCodex(command, options = {}, ws) {
      thread,
      codex,
      status: 'running',
+      abortController,
      startedAt: new Date().toISOString()
    });

@@ -243,7 +245,9 @@ export async function queryCodex(command, options = {}, ws) {
    });

    // Execute with streaming
-    const streamedTurn = await thread.runStreamed(command);
+    const streamedTurn = await thread.runStreamed(command, {
+      signal: abortController.signal
+    });

    for await (const event of streamedTurn.events) {
      // Check if session was aborted
@@ -286,20 +290,27 @@ export async function queryCodex(command, options = {}, ws) {
    });

  } catch (error) {
-    console.error('[Codex] Error:', error);
+    const session = currentSessionId ? activeCodexSessions.get(currentSessionId) : null;
+    const wasAborted =
+      session?.status === 'aborted' ||
+      error?.name === 'AbortError' ||
+      String(error?.message || '').toLowerCase().includes('aborted');

-    sendMessage(ws, {
-      type: 'codex-error',
-      error: error.message,
-      sessionId: currentSessionId
-    });
+    if (!wasAborted) {
+      console.error('[Codex] Error:', error);
+      sendMessage(ws, {
+        type: 'codex-error',
+        error: error.message,
+        sessionId: currentSessionId
+      });
+    }

  } finally {
    // Update session status
    if (currentSessionId) {
      const session = activeCodexSessions.get(currentSessionId);
      if (session) {
-        session.status = 'completed';
+        session.status = session.status === 'aborted' ? 'aborted' : 'completed';
      }
    }
  }
@@ -318,9 +329,11 @@ export function abortCodexSession(sessionId) {
  }

  session.status = 'aborted';
-
-  // The SDK doesn't have a direct abort method, but marking status
-  // will cause the streaming loop to exit
+  try {
+    session.abortController?.abort();
+  } catch (error) {
+    console.warn(`[Codex] Failed to abort session ${sessionId}:`, error);
+  }

  return true;
 }
--- a/server/projects.js
+++ b/server/projects.js
@@ -384,6 +384,7 @@ async function getProjects(progressCallback = null) {
  const config = await loadProjectConfig();
  const projects = [];
  const existingProjects = new Set();
+  const codexSessionsIndexRef = { sessionsByProject: null };
  let totalProjects = 0;
  let processedProjects = 0;
  let directories = [];
@@ -419,8 +420,6 @@ async function getProjects(progressCallback = null) {
          });
        }

-        const projectPath = path.join(claudeDir, entry.name);
-        
        // Extract actual project directory from JSONL sessions
        const actualProjectDir = await extractProjectDirectory(entry.name);
        
@@ -435,7 +434,11 @@ async function getProjects(progressCallback = null) {
          displayName: customName || autoDisplayName,
          fullPath: fullPath,
          isCustomName: !!customName,
-          sessions: []
+          sessions: [],
+          sessionMeta: {
+            hasMore: false,
+            total: 0
+          }
        };
        
        // Try to get sessions for this project (just first 5 for performance)
@@ -448,6 +451,10 @@ async function getProjects(progressCallback = null) {
          };
        } catch (e) {
          console.warn(`Could not load sessions for project ${entry.name}:`, e.message);
+          project.sessionMeta = {
+            hasMore: false,
+            total: 0
+          };
        }
        
        // Also fetch Cursor sessions for this project
@@ -460,7 +467,9 @@ async function getProjects(progressCallback = null) {

        // Also fetch Codex sessions for this project
        try {
-          project.codexSessions = await getCodexSessions(actualProjectDir);
+          project.codexSessions = await getCodexSessions(actualProjectDir, {
+            indexRef: codexSessionsIndexRef,
+          });
        } catch (e) {
          console.warn(`Could not load Codex sessions for project ${entry.name}:`, e.message);
          project.codexSessions = [];
@@ -525,7 +534,7 @@ async function getProjects(progressCallback = null) {
        }
      }
      
-              const project = {
+      const project = {
          name: projectName,
          path: actualProjectDir,
          displayName: projectConfig.displayName || await generateDisplayName(projectName, actualProjectDir),
@@ -533,9 +542,13 @@ async function getProjects(progressCallback = null) {
          isCustomName: !!projectConfig.displayName,
          isManuallyAdded: true,
          sessions: [],
+          sessionMeta: {
+            hasMore: false,
+            total: 0
+          },
          cursorSessions: [],
          codexSessions: []
-        };
+      };

      // Try to fetch Cursor sessions for manual projects too
      try {
@@ -546,7 +559,9 @@ async function getProjects(progressCallback = null) {

      // Try to fetch Codex sessions for manual projects too
      try {
-        project.codexSessions = await getCodexSessions(actualProjectDir);
+        project.codexSessions = await getCodexSessions(actualProjectDir, {
+          indexRef: codexSessionsIndexRef,
+        });
      } catch (e) {
        console.warn(`Could not load Codex sessions for manual project ${projectName}:`, e.message);
      }
@@ -874,22 +889,81 @@ async function parseJsonlSessions(filePath) {
  }
 }

+// Parse an agent JSONL file and extract tool uses
+async function parseAgentTools(filePath) {
+  const tools = [];
+
+  try {
+    const fileStream = fsSync.createReadStream(filePath);
+    const rl = readline.createInterface({
+      input: fileStream,
+      crlfDelay: Infinity
+    });
+
+    for await (const line of rl) {
+      if (line.trim()) {
+        try {
+          const entry = JSON.parse(line);
+          // Look for assistant messages with tool_use
+          if (entry.message?.role === 'assistant' && Array.isArray(entry.message?.content)) {
+            for (const part of entry.message.content) {
+              if (part.type === 'tool_use') {
+                tools.push({
+                  toolId: part.id,
+                  toolName: part.name,
+                  toolInput: part.input,
+                  timestamp: entry.timestamp
+                });
+              }
+            }
+          }
+          // Look for tool results
+          if (entry.message?.role === 'user' && Array.isArray(entry.message?.content)) {
+            for (const part of entry.message.content) {
+              if (part.type === 'tool_result') {
+                // Find the matching tool and add result
+                const tool = tools.find(t => t.toolId === part.tool_use_id);
+                if (tool) {
+                  tool.toolResult = {
+                    content: typeof part.content === 'string' ? part.content :
+                             Array.isArray(part.content) ? part.content.map(c => c.text || '').join('\n') :
+                             JSON.stringify(part.content),
+                    isError: Boolean(part.is_error)
+                  };
+                }
+              }
+            }
+          }
+        } catch (parseError) {
+          // Skip malformed lines
+        }
+      }
+    }
+  } catch (error) {
+    console.warn(`Error parsing agent file ${filePath}:`, error.message);
+  }
+
+  return tools;
+}
+
 // Get messages for a specific session with pagination support
 async function getSessionMessages(projectName, sessionId, limit = null, offset = 0) {
  const projectDir = path.join(os.homedir(), '.claude', 'projects', projectName);

  try {
    const files = await fs.readdir(projectDir);
-    // agent-*.jsonl files contain session start data at this point. This needs to be revisited
-    // periodically to make sure only accurate data is there and no new functionality is added there
+    // agent-*.jsonl files contain subagent tool history - we'll process them separately
    const jsonlFiles = files.filter(file => file.endsWith('.jsonl') && !file.startsWith('agent-'));
-    
+    const agentFiles = files.filter(file => file.endsWith('.jsonl') && file.startsWith('agent-'));
+
    if (jsonlFiles.length === 0) {
      return { messages: [], total: 0, hasMore: false };
    }
-    
+
    const messages = [];
-    
+    // Map of agentId -> tools for subagent tool grouping
+    const agentToolsCache = new Map();
+
    // Process all JSONL files to find messages for this session
    for (const file of jsonlFiles) {
      const jsonlFile = path.join(projectDir, file);
@@ -898,7 +972,7 @@ async function getSessionMessages(projectName, sessionId, limit = null, offset =
        input: fileStream,
        crlfDelay: Infinity
      });
-      
+
      for await (const line of rl) {
        if (line.trim()) {
          try {
@@ -912,26 +986,55 @@ async function getSessionMessages(projectName, sessionId, limit = null, offset =
        }
      }
    }
-    
+
+    // Collect agentIds from Task tool results
+    const agentIds = new Set();
+    for (const message of messages) {
+      if (message.toolUseResult?.agentId) {
+        agentIds.add(message.toolUseResult.agentId);
+      }
+    }
+
+    // Load agent tools for each agentId found
+    for (const agentId of agentIds) {
+      const agentFileName = `agent-${agentId}.jsonl`;
+      if (agentFiles.includes(agentFileName)) {
+        const agentFilePath = path.join(projectDir, agentFileName);
+        const tools = await parseAgentTools(agentFilePath);
+        agentToolsCache.set(agentId, tools);
+      }
+    }
+
+    // Attach agent tools to their parent Task messages
+    for (const message of messages) {
+      if (message.toolUseResult?.agentId) {
+        const agentId = message.toolUseResult.agentId;
+        const agentTools = agentToolsCache.get(agentId);
+        if (agentTools && agentTools.length > 0) {
+          message.subagentTools = agentTools;
+        }
+      }
+    }
+
    // Sort messages by timestamp
-    const sortedMessages = messages.sort((a, b) => 
+    const sortedMessages = messages.sort((a, b) =>
      new Date(a.timestamp || 0) - new Date(b.timestamp || 0)
    );
-    
+
    const total = sortedMessages.length;
-    
+
    // If no limit is specified, return all messages (backward compatibility)
    if (limit === null) {
      return sortedMessages;
    }
-    
+
    // Apply pagination - for recent messages, we need to slice from the end
    // offset 0 should give us the most recent messages
    const startIndex = Math.max(0, total - offset - limit);
    const endIndex = total - offset;
    const paginatedMessages = sortedMessages.slice(startIndex, endIndex);
    const hasMore = startIndex > 0;
-    
+
    return {
      messages: paginatedMessages,
      total,
@@ -1244,75 +1347,114 @@ async function getCursorSessions(projectPath) {
 }


+function normalizeComparablePath(inputPath) {
+  if (!inputPath || typeof inputPath !== 'string') {
+    return '';
+  }
+
+  const withoutLongPathPrefix = inputPath.startsWith('\\\\?\\')
+    ? inputPath.slice(4)
+    : inputPath;
+  const normalized = path.normalize(withoutLongPathPrefix.trim());
+
+  if (!normalized) {
+    return '';
+  }
+
+  const resolved = path.resolve(normalized);
+  return process.platform === 'win32' ? resolved.toLowerCase() : resolved;
+}
+
+async function findCodexJsonlFiles(dir) {
+  const files = [];
+
+  try {
+    const entries = await fs.readdir(dir, { withFileTypes: true });
+    for (const entry of entries) {
+      const fullPath = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        files.push(...await findCodexJsonlFiles(fullPath));
+      } else if (entry.name.endsWith('.jsonl')) {
+        files.push(fullPath);
+      }
+    }
+  } catch (error) {
+    // Skip directories we can't read
+  }
+
+  return files;
+}
+
+async function buildCodexSessionsIndex() {
+  const codexSessionsDir = path.join(os.homedir(), '.codex', 'sessions');
+  const sessionsByProject = new Map();
+
+  try {
+    await fs.access(codexSessionsDir);
+  } catch (error) {
+    return sessionsByProject;
+  }
+
+  const jsonlFiles = await findCodexJsonlFiles(codexSessionsDir);
+
+  for (const filePath of jsonlFiles) {
+    try {
+      const sessionData = await parseCodexSessionFile(filePath);
+      if (!sessionData || !sessionData.id) {
+        continue;
+      }
+
+      const normalizedProjectPath = normalizeComparablePath(sessionData.cwd);
+      if (!normalizedProjectPath) {
+        continue;
+      }
+
+      const session = {
+        id: sessionData.id,
+        summary: sessionData.summary || 'Codex Session',
+        messageCount: sessionData.messageCount || 0,
+        lastActivity: sessionData.timestamp ? new Date(sessionData.timestamp) : new Date(),
+        cwd: sessionData.cwd,
+        model: sessionData.model,
+        filePath,
+        provider: 'codex',
+      };
+
+      if (!sessionsByProject.has(normalizedProjectPath)) {
+        sessionsByProject.set(normalizedProjectPath, []);
+      }
+
+      sessionsByProject.get(normalizedProjectPath).push(session);
+    } catch (error) {
+      console.warn(`Could not parse Codex session file ${filePath}:`, error.message);
+    }
+  }
+
+  for (const sessions of sessionsByProject.values()) {
+    sessions.sort((a, b) => new Date(b.lastActivity) - new Date(a.lastActivity));
+  }
+
+  return sessionsByProject;
+}
+
 // Fetch Codex sessions for a given project path
 async function getCodexSessions(projectPath, options = {}) {
-  const { limit = 5 } = options;
+  const { limit = 5, indexRef = null } = options;
  try {
-    const codexSessionsDir = path.join(os.homedir(), '.codex', 'sessions');
-    const sessions = [];
-
-    // Check if the directory exists
-    try {
-      await fs.access(codexSessionsDir);
-    } catch (error) {
-      // No Codex sessions directory
+    const normalizedProjectPath = normalizeComparablePath(projectPath);
+    if (!normalizedProjectPath) {
      return [];
    }

-    // Recursively find all .jsonl files in the sessions directory
-    const findJsonlFiles = async (dir) => {
-      const files = [];
-      try {
-        const entries = await fs.readdir(dir, { withFileTypes: true });
-        for (const entry of entries) {
-          const fullPath = path.join(dir, entry.name);
-          if (entry.isDirectory()) {
-            files.push(...await findJsonlFiles(fullPath));
-          } else if (entry.name.endsWith('.jsonl')) {
-            files.push(fullPath);
-          }
-        }
-      } catch (error) {
-        // Skip directories we can't read
-      }
-      return files;
-    };
-
-    const jsonlFiles = await findJsonlFiles(codexSessionsDir);
-
-    // Process each file to find sessions matching the project path
-    for (const filePath of jsonlFiles) {
-      try {
-        const sessionData = await parseCodexSessionFile(filePath);
-
-        // Check if this session matches the project path
-        // Handle Windows long paths with \\?\ prefix
-        const sessionCwd = sessionData?.cwd || '';
-        const cleanSessionCwd = sessionCwd.startsWith('\\\\?\\') ? sessionCwd.slice(4) : sessionCwd;
-        const cleanProjectPath = projectPath.startsWith('\\\\?\\') ? projectPath.slice(4) : projectPath;
-
-        if (sessionData && (sessionData.cwd === projectPath || cleanSessionCwd === cleanProjectPath || path.relative(cleanSessionCwd, cleanProjectPath) === '')) {
-          sessions.push({
-            id: sessionData.id,
-            summary: sessionData.summary || 'Codex Session',
-            messageCount: sessionData.messageCount || 0,
-            lastActivity: sessionData.timestamp ? new Date(sessionData.timestamp) : new Date(),
-            cwd: sessionData.cwd,
-            model: sessionData.model,
-            filePath: filePath,
-            provider: 'codex'
-          });
-        }
-      } catch (error) {
-        console.warn(`Could not parse Codex session file ${filePath}:`, error.message);
-      }
+    if (indexRef && !indexRef.sessionsByProject) {
+      indexRef.sessionsByProject = await buildCodexSessionsIndex();
    }

-    // Sort sessions by last activity (newest first)
-    sessions.sort((a, b) => new Date(b.lastActivity) - new Date(a.lastActivity));
+    const sessionsByProject = indexRef?.sessionsByProject || await buildCodexSessionsIndex();
+    const sessions = sessionsByProject.get(normalizedProjectPath) || [];

    // Return limited sessions for performance (0 = unlimited for deletion)
-    return limit > 0 ? sessions.slice(0, limit) : sessions;
+    return limit > 0 ? sessions.slice(0, limit) : [...sessions];

  } catch (error) {
    console.error('Error fetching Codex sessions:', error);
--- a/server/routes/agent.js
+++ b/server/routes/agent.js
@@ -11,6 +11,7 @@ import { spawnCursor } from '../cursor-cli.js';
 import { queryCodex } from '../openai-codex.js';
 import { Octokit } from '@octokit/rest';
 import { CLAUDE_MODELS, CURSOR_MODELS, CODEX_MODELS } from '../../shared/modelConstants.js';
+import { IS_PLATFORM } from '../constants/config.js';

 const router = express.Router();

@@ -18,7 +19,7 @@ const router = express.Router();
 * Middleware to authenticate agent API requests.
 *
 * Supports two authentication modes:
- * 1. Platform mode (VITE_IS_PLATFORM=true): For managed/hosted deployments where
+ * 1. Platform mode (IS_PLATFORM=true): For managed/hosted deployments where
 *    authentication is handled by an external proxy. Requests are trusted and
 *    the default user context is used.
 *
@@ -28,7 +29,7 @@ const router = express.Router();
 const validateExternalApiKey = (req, res, next) => {
  // Platform mode: Authentication is handled externally (e.g., by a proxy layer).
  // Trust the request and use the default user context.
-  if (process.env.VITE_IS_PLATFORM === 'true') {
+  if (IS_PLATFORM) {
    try {
      const user = userDb.getFirstUser();
      if (!user) {
--- a/server/routes/auth.js
+++ b/server/routes/auth.js
@@ -53,11 +53,11 @@ router.post('/register', async (req, res) => {
      // Generate token
      const token = generateToken(user);
      
-      // Update last login
+      db.prepare('COMMIT').run();
+
+      // Update last login (non-fatal, outside transaction)
      userDb.updateLastLogin(user.id);

-      db.prepare('COMMIT').run();
-      
      res.json({
        success: true,
        user: { id: user.id, username: user.username },
--- a/server/routes/commands.js
+++ b/server/routes/commands.js
@@ -209,6 +209,86 @@ Custom commands can be created in:
    };
  },

+  '/cost': async (args, context) => {
+    const tokenUsage = context?.tokenUsage || {};
+    const provider = context?.provider || 'claude';
+    const model =
+      context?.model ||
+      (provider === 'cursor'
+        ? CURSOR_MODELS.DEFAULT
+        : provider === 'codex'
+          ? CODEX_MODELS.DEFAULT
+          : CLAUDE_MODELS.DEFAULT);
+
+    const used = Number(tokenUsage.used ?? tokenUsage.totalUsed ?? tokenUsage.total_tokens ?? 0) || 0;
+    const total =
+      Number(
+        tokenUsage.total ??
+          tokenUsage.contextWindow ??
+          parseInt(process.env.CONTEXT_WINDOW || '160000', 10),
+      ) || 160000;
+    const percentage = total > 0 ? Number(((used / total) * 100).toFixed(1)) : 0;
+
+    const inputTokensRaw =
+      Number(
+        tokenUsage.inputTokens ??
+          tokenUsage.input ??
+          tokenUsage.cumulativeInputTokens ??
+          tokenUsage.promptTokens ??
+          0,
+      ) || 0;
+    const outputTokens =
+      Number(
+        tokenUsage.outputTokens ??
+          tokenUsage.output ??
+          tokenUsage.cumulativeOutputTokens ??
+          tokenUsage.completionTokens ??
+          0,
+      ) || 0;
+    const cacheTokens =
+      Number(
+        tokenUsage.cacheReadTokens ??
+          tokenUsage.cacheCreationTokens ??
+          tokenUsage.cacheTokens ??
+          tokenUsage.cachedTokens ??
+          0,
+      ) || 0;
+
+    // If we only have total used tokens, treat them as input for display/estimation.
+    const inputTokens =
+      inputTokensRaw > 0 || outputTokens > 0 || cacheTokens > 0 ? inputTokensRaw + cacheTokens : used;
+
+    // Rough default rates by provider (USD / 1M tokens).
+    const pricingByProvider = {
+      claude: { input: 3, output: 15 },
+      cursor: { input: 3, output: 15 },
+      codex: { input: 1.5, output: 6 },
+    };
+    const rates = pricingByProvider[provider] || pricingByProvider.claude;
+
+    const inputCost = (inputTokens / 1_000_000) * rates.input;
+    const outputCost = (outputTokens / 1_000_000) * rates.output;
+    const totalCost = inputCost + outputCost;
+
+    return {
+      type: 'builtin',
+      action: 'cost',
+      data: {
+        tokenUsage: {
+          used,
+          total,
+          percentage,
+        },
+        cost: {
+          input: inputCost.toFixed(4),
+          output: outputCost.toFixed(4),
+          total: totalCost.toFixed(4),
+        },
+        model,
+      },
+    };
+  },
+
  '/status': async (args, context) => {
    // Read version from package.json
    const packageJsonPath = path.join(path.dirname(__dirname), '..', 'package.json');
--- a/server/routes/git.js
+++ b/server/routes/git.js
@@ -1,5 +1,5 @@
 import express from 'express';
-import { exec } from 'child_process';
+import { exec, spawn } from 'child_process';
 import { promisify } from 'util';
 import path from 'path';
 import { promises as fs } from 'fs';
@@ -10,6 +10,43 @@ import { spawnCursor } from '../cursor-cli.js';
 const router = express.Router();
 const execAsync = promisify(exec);

+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);
+    });
+  });
+}
+
 // Helper function to get the actual project path from the encoded project name
 async function getActualProjectPath(projectName) {
  try {
@@ -60,19 +97,16 @@ async function validateGitRepository(projectPath) {
  }

  try {
-    // Use --show-toplevel to get the root of the git repository
-    const { stdout: gitRoot } = await execAsync('git rev-parse --show-toplevel', { cwd: projectPath });
-    const normalizedGitRoot = path.resolve(gitRoot.trim());
-    const normalizedProjectPath = path.resolve(projectPath);
-    
-    // Ensure the git root matches our project path (prevent using parent git repos)
-    if (normalizedGitRoot !== normalizedProjectPath) {
-      throw new Error(`Project directory is not a git repository. This directory is inside a git repository at ${normalizedGitRoot}, but git operations should be run from the repository root.`);
-    }
-  } catch (error) {
-    if (error.message.includes('Project directory is not a git repository')) {
-      throw error;
+    // 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 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 });
+  } 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.');
  }
 }
@@ -445,11 +479,17 @@ router.get('/commits', async (req, res) => {

  try {
    const projectPath = await getActualProjectPath(project);
+    await validateGitRepository(projectPath);
+    const parsedLimit = Number.parseInt(String(limit), 10);
+    const safeLimit = Number.isFinite(parsedLimit) && parsedLimit > 0
+      ? Math.min(parsedLimit, 100)
+      : 10;
    
    // Get commit log with stats
-    const { stdout } = await execAsync(
-      `git log --pretty=format:'%H|%an|%ae|%ad|%s' --date=relative -n ${limit}`,
-      { cwd: projectPath }
+    const { stdout } = await spawnAsync(
+      'git',
+      ['log', '--pretty=format:%H|%an|%ae|%ad|%s', '--date=relative', '-n', String(safeLimit)],
+      { cwd: projectPath },
    );
    
    const commits = stdout
@@ -1125,4 +1165,4 @@ router.post('/delete-untracked', async (req, res) => {
  }
 });

-export default router;
+export default router;
--- a/shared/modelConstants.js
+++ b/shared/modelConstants.js
@@ -55,11 +55,13 @@ 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' }
  ],

-  DEFAULT: 'gpt-5.2'
+  DEFAULT: 'gpt-5.3-codex'
 };
--- a/src/App.jsx
+++ b/src/App.jsx
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,35 @@
+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 { TaskMasterProvider } from './contexts/TaskMasterContext';
+import { TasksSettingsProvider } from './contexts/TasksSettingsContext';
+import { WebSocketProvider } from './contexts/WebSocketContext';
+import ProtectedRoute from './components/ProtectedRoute';
+import AppContent from './components/app/AppContent';
+import i18n from './i18n/config.js';
+
+export default function App() {
+  return (
+    <I18nextProvider i18n={i18n}>
+      <ThemeProvider>
+        <AuthProvider>
+          <WebSocketProvider>
+            <TasksSettingsProvider>
+              <TaskMasterProvider>
+                <ProtectedRoute>
+                  <Router basename={window.__ROUTER_BASENAME__ || ''}>
+                    <Routes>
+                      <Route path="/" element={<AppContent />} />
+                      <Route path="/session/:sessionId" element={<AppContent />} />
+                    </Routes>
+                  </Router>
+                </ProtectedRoute>
+              </TaskMasterProvider>
+            </TasksSettingsProvider>
+          </WebSocketProvider>
+        </AuthProvider>
+      </ThemeProvider>
+    </I18nextProvider>
+  );
+}
--- a/src/components/ApiKeysSettings.jsx
+++ b/src/components/ApiKeysSettings.jsx
@@ -1,373 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { Key, Plus, Trash2, Eye, EyeOff, Copy, Check, Github } from 'lucide-react';
-import { authenticatedFetch } from '../utils/api';
-import { useTranslation } from 'react-i18next';
-
-function ApiKeysSettings() {
-  const { t } = useTranslation('settings');
-  const [apiKeys, setApiKeys] = useState([]);
-  const [githubTokens, setGithubTokens] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [showNewKeyForm, setShowNewKeyForm] = useState(false);
-  const [showNewTokenForm, setShowNewTokenForm] = useState(false);
-  const [newKeyName, setNewKeyName] = useState('');
-  const [newTokenName, setNewTokenName] = useState('');
-  const [newGithubToken, setNewGithubToken] = useState('');
-  const [showToken, setShowToken] = useState({});
-  const [copiedKey, setCopiedKey] = useState(null);
-  const [newlyCreatedKey, setNewlyCreatedKey] = useState(null);
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  const fetchData = async () => {
-    try {
-      setLoading(true);
-
-      // Fetch API keys
-      const apiKeysRes = await authenticatedFetch('/api/settings/api-keys');
-      const apiKeysData = await apiKeysRes.json();
-      setApiKeys(apiKeysData.apiKeys || []);
-
-      // Fetch GitHub tokens
-      const githubRes = await authenticatedFetch('/api/settings/credentials?type=github_token');
-      const githubData = await githubRes.json();
-      setGithubTokens(githubData.credentials || []);
-    } catch (error) {
-      console.error('Error fetching settings:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const createApiKey = async () => {
-    if (!newKeyName.trim()) return;
-
-    try {
-      const res = await authenticatedFetch('/api/settings/api-keys', {
-        method: 'POST',
-        body: JSON.stringify({ keyName: newKeyName })
-      });
-
-      const data = await res.json();
-      if (data.success) {
-        setNewlyCreatedKey(data.apiKey);
-        setNewKeyName('');
-        setShowNewKeyForm(false);
-        fetchData();
-      }
-    } catch (error) {
-      console.error('Error creating API key:', error);
-    }
-  };
-
-  const deleteApiKey = async (keyId) => {
-    if (!confirm(t('apiKeys.confirmDelete'))) return;
-
-    try {
-      await authenticatedFetch(`/api/settings/api-keys/${keyId}`, {
-        method: 'DELETE'
-      });
-      fetchData();
-    } catch (error) {
-      console.error('Error deleting API key:', error);
-    }
-  };
-
-  const toggleApiKey = async (keyId, isActive) => {
-    try {
-      await authenticatedFetch(`/api/settings/api-keys/${keyId}/toggle`, {
-        method: 'PATCH',
-        body: JSON.stringify({ isActive: !isActive })
-      });
-      fetchData();
-    } catch (error) {
-      console.error('Error toggling API key:', error);
-    }
-  };
-
-  const createGithubToken = async () => {
-    if (!newTokenName.trim() || !newGithubToken.trim()) return;
-
-    try {
-      const res = await authenticatedFetch('/api/settings/credentials', {
-        method: 'POST',
-        body: JSON.stringify({
-          credentialName: newTokenName,
-          credentialType: 'github_token',
-          credentialValue: newGithubToken
-        })
-      });
-
-      const data = await res.json();
-      if (data.success) {
-        setNewTokenName('');
-        setNewGithubToken('');
-        setShowNewTokenForm(false);
-        fetchData();
-      }
-    } catch (error) {
-      console.error('Error creating GitHub token:', error);
-    }
-  };
-
-  const deleteGithubToken = async (tokenId) => {
-    if (!confirm(t('apiKeys.github.confirmDelete'))) return;
-
-    try {
-      await authenticatedFetch(`/api/settings/credentials/${tokenId}`, {
-        method: 'DELETE'
-      });
-      fetchData();
-    } catch (error) {
-      console.error('Error deleting GitHub token:', error);
-    }
-  };
-
-  const toggleGithubToken = async (tokenId, isActive) => {
-    try {
-      await authenticatedFetch(`/api/settings/credentials/${tokenId}/toggle`, {
-        method: 'PATCH',
-        body: JSON.stringify({ isActive: !isActive })
-      });
-      fetchData();
-    } catch (error) {
-      console.error('Error toggling GitHub token:', error);
-    }
-  };
-
-  const copyToClipboard = (text, id) => {
-    navigator.clipboard.writeText(text);
-    setCopiedKey(id);
-    setTimeout(() => setCopiedKey(null), 2000);
-  };
-
-  if (loading) {
-    return <div className="text-muted-foreground">{t('apiKeys.loading')}</div>;
-  }
-
-  return (
-    <div className="space-y-8">
-      {/* New API Key Alert */}
-      {newlyCreatedKey && (
-        <div className="p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
-          <h4 className="font-semibold text-yellow-500 mb-2">{t('apiKeys.newKey.alertTitle')}</h4>
-          <p className="text-sm text-muted-foreground mb-3">
-            {t('apiKeys.newKey.alertMessage')}
-          </p>
-          <div className="flex items-center gap-2">
-            <code className="flex-1 px-3 py-2 bg-background/50 rounded font-mono text-sm break-all">
-              {newlyCreatedKey.apiKey}
-            </code>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => copyToClipboard(newlyCreatedKey.apiKey, 'new')}
-            >
-              {copiedKey === 'new' ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-            </Button>
-          </div>
-          <Button
-            size="sm"
-            variant="ghost"
-            className="mt-3"
-            onClick={() => setNewlyCreatedKey(null)}
-          >
-            {t('apiKeys.newKey.iveSavedIt')}
-          </Button>
-        </div>
-      )}
-
-      {/* API Keys Section */}
-      <div>
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <Key className="h-5 w-5" />
-            <h3 className="text-lg font-semibold">{t('apiKeys.title')}</h3>
-          </div>
-          <Button
-            size="sm"
-            onClick={() => setShowNewKeyForm(!showNewKeyForm)}
-          >
-            <Plus className="h-4 w-4 mr-1" />
-            {t('apiKeys.newButton')}
-          </Button>
-        </div>
-
-        <p className="text-sm text-muted-foreground mb-4">
-          {t('apiKeys.description')}
-        </p>
-
-        {showNewKeyForm && (
-          <div className="mb-4 p-4 border rounded-lg bg-card">
-            <Input
-              placeholder={t('apiKeys.form.placeholder')}
-              value={newKeyName}
-              onChange={(e) => setNewKeyName(e.target.value)}
-              className="mb-2"
-            />
-            <div className="flex gap-2">
-              <Button onClick={createApiKey}>{t('apiKeys.form.createButton')}</Button>
-              <Button variant="outline" onClick={() => setShowNewKeyForm(false)}>
-                {t('apiKeys.form.cancelButton')}
-              </Button>
-            </div>
-          </div>
-        )}
-
-        <div className="space-y-2">
-          {apiKeys.length === 0 ? (
-            <p className="text-sm text-muted-foreground italic">{t('apiKeys.empty')}</p>
-          ) : (
-            apiKeys.map((key) => (
-              <div
-                key={key.id}
-                className="flex items-center justify-between p-3 border rounded-lg"
-              >
-                <div className="flex-1">
-                  <div className="font-medium">{key.key_name}</div>
-                  <code className="text-xs text-muted-foreground">{key.api_key}</code>
-                  <div className="text-xs text-muted-foreground mt-1">
-                    {t('apiKeys.list.created')} {new Date(key.created_at).toLocaleDateString()}
-                    {key.last_used && ` • ${t('apiKeys.list.lastUsed')} ${new Date(key.last_used).toLocaleDateString()}`}
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    size="sm"
-                    variant={key.is_active ? 'outline' : 'secondary'}
-                    onClick={() => toggleApiKey(key.id, key.is_active)}
-                  >
-                    {key.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={() => deleteApiKey(key.id)}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-
-      {/* GitHub Tokens Section */}
-      <div>
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <Github className="h-5 w-5" />
-            <h3 className="text-lg font-semibold">{t('apiKeys.github.title')}</h3>
-          </div>
-          <Button
-            size="sm"
-            onClick={() => setShowNewTokenForm(!showNewTokenForm)}
-          >
-            <Plus className="h-4 w-4 mr-1" />
-            {t('apiKeys.github.addButton')}
-          </Button>
-        </div>
-
-        <p className="text-sm text-muted-foreground mb-4">
-          {t('apiKeys.github.description')}
-        </p>
-
-        {showNewTokenForm && (
-          <div className="mb-4 p-4 border rounded-lg bg-card">
-            <Input
-              placeholder={t('apiKeys.github.form.namePlaceholder')}
-              value={newTokenName}
-              onChange={(e) => setNewTokenName(e.target.value)}
-              className="mb-2"
-            />
-            <div className="relative">
-              <Input
-                type={showToken['new'] ? 'text' : 'password'}
-                placeholder={t('apiKeys.github.form.tokenPlaceholder')}
-                value={newGithubToken}
-                onChange={(e) => setNewGithubToken(e.target.value)}
-                className="mb-2 pr-10"
-              />
-              <button
-                type="button"
-                onClick={() => setShowToken({ ...showToken, new: !showToken['new'] })}
-                className="absolute right-3 top-2.5 text-muted-foreground hover:text-foreground"
-              >
-                {showToken['new'] ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-              </button>
-            </div>
-            <div className="flex gap-2">
-              <Button onClick={createGithubToken}>{t('apiKeys.github.form.addButton')}</Button>
-              <Button variant="outline" onClick={() => {
-                setShowNewTokenForm(false);
-                setNewTokenName('');
-                setNewGithubToken('');
-              }}>
-                {t('apiKeys.github.form.cancelButton')}
-              </Button>
-            </div>
-          </div>
-        )}
-
-        <div className="space-y-2">
-          {githubTokens.length === 0 ? (
-            <p className="text-sm text-muted-foreground italic">{t('apiKeys.github.empty')}</p>
-          ) : (
-            githubTokens.map((token) => (
-              <div
-                key={token.id}
-                className="flex items-center justify-between p-3 border rounded-lg"
-              >
-                <div className="flex-1">
-                  <div className="font-medium">{token.credential_name}</div>
-                  <div className="text-xs text-muted-foreground mt-1">
-                    {t('apiKeys.github.added')} {new Date(token.created_at).toLocaleDateString()}
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    size="sm"
-                    variant={token.is_active ? 'outline' : 'secondary'}
-                    onClick={() => toggleGithubToken(token.id, token.is_active)}
-                  >
-                    {token.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={() => deleteGithubToken(token.id)}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-
-      {/* Documentation Link */}
-      <div className="p-4 bg-muted/50 rounded-lg">
-        <h4 className="font-semibold mb-2">{t('apiKeys.documentation.title')}</h4>
-        <p className="text-sm text-muted-foreground mb-3">
-          {t('apiKeys.documentation.description')}
-        </p>
-        <a
-          href="/EXTERNAL_API.md"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-sm text-primary hover:underline"
-        >
-          {t('apiKeys.documentation.viewLink')}
-        </a>
-      </div>
-    </div>
-  );
-}
-
-export default ApiKeysSettings;
--- a/src/components/ChatInterface.jsx
+++ b/src/components/ChatInterface.jsx
--- a/src/components/CodeEditor.jsx
+++ b/src/components/CodeEditor.jsx
@@ -1,705 +0,0 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
-import CodeMirror from '@uiw/react-codemirror';
-import { javascript } from '@codemirror/lang-javascript';
-import { python } from '@codemirror/lang-python';
-import { html } from '@codemirror/lang-html';
-import { css } from '@codemirror/lang-css';
-import { json } from '@codemirror/lang-json';
-import { markdown } from '@codemirror/lang-markdown';
-import { oneDark } from '@codemirror/theme-one-dark';
-import { EditorView, showPanel, ViewPlugin } from '@codemirror/view';
-import { unifiedMergeView, getChunks } from '@codemirror/merge';
-import { showMinimap } from '@replit/codemirror-minimap';
-import { X, Save, Download, Maximize2, Minimize2 } from 'lucide-react';
-import { api } from '../utils/api';
-import { useTranslation } from 'react-i18next';
-
-function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded = false, onToggleExpand = null }) {
-  const { t } = useTranslation('codeEditor');
-  const [content, setContent] = useState('');
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const [isDarkMode, setIsDarkMode] = useState(() => {
-    const savedTheme = localStorage.getItem('codeEditorTheme');
-    return savedTheme ? savedTheme === 'dark' : true;
-  });
-  const [saveSuccess, setSaveSuccess] = useState(false);
-  const [showDiff, setShowDiff] = useState(!!file.diffInfo);
-  const [wordWrap, setWordWrap] = useState(() => {
-    return localStorage.getItem('codeEditorWordWrap') === 'true';
-  });
-  const [minimapEnabled, setMinimapEnabled] = useState(() => {
-    return localStorage.getItem('codeEditorShowMinimap') !== 'false';
-  });
-  const [showLineNumbers, setShowLineNumbers] = useState(() => {
-    return localStorage.getItem('codeEditorLineNumbers') !== 'false';
-  });
-  const [fontSize, setFontSize] = useState(() => {
-    return localStorage.getItem('codeEditorFontSize') || '14';
-  });
-  const editorRef = useRef(null);
-
-  // Create minimap extension with chunk-based gutters
-  const minimapExtension = useMemo(() => {
-    if (!file.diffInfo || !showDiff || !minimapEnabled) return [];
-
-    const gutters = {};
-
-    return [
-      showMinimap.compute(['doc'], (state) => {
-        // Get actual chunks from merge view
-        const chunksData = getChunks(state);
-        const chunks = chunksData?.chunks || [];
-
-        // Clear previous gutters
-        Object.keys(gutters).forEach(key => delete gutters[key]);
-
-        // Mark lines that are part of chunks
-        chunks.forEach(chunk => {
-          // Mark the lines in the B side (current document)
-          const fromLine = state.doc.lineAt(chunk.fromB).number;
-          const toLine = state.doc.lineAt(Math.min(chunk.toB, state.doc.length)).number;
-
-          for (let lineNum = fromLine; lineNum <= toLine; lineNum++) {
-            gutters[lineNum] = isDarkMode ? 'rgba(34, 197, 94, 0.8)' : 'rgba(34, 197, 94, 1)';
-          }
-        });
-
-        return {
-          create: () => ({ dom: document.createElement('div') }),
-          displayText: 'blocks',
-          showOverlay: 'always',
-          gutters: [gutters]
-        };
-      })
-    ];
-  }, [file.diffInfo, showDiff, minimapEnabled, isDarkMode]);
-
-  // Create extension to scroll to first chunk on mount
-  const scrollToFirstChunkExtension = useMemo(() => {
-    if (!file.diffInfo || !showDiff) return [];
-
-    return [
-      ViewPlugin.fromClass(class {
-        constructor(view) {
-          // Delay to ensure merge view is fully initialized
-          setTimeout(() => {
-            const chunksData = getChunks(view.state);
-            const chunks = chunksData?.chunks || [];
-
-            if (chunks.length > 0) {
-              const firstChunk = chunks[0];
-
-              // Scroll to the first chunk
-              view.dispatch({
-                effects: EditorView.scrollIntoView(firstChunk.fromB, { y: 'center' })
-              });
-            }
-          }, 100);
-        }
-
-        update() {}
-        destroy() {}
-      })
-    ];
-  }, [file.diffInfo, showDiff]);
-
-  // Create editor toolbar panel - always visible
-  const editorToolbarPanel = useMemo(() => {
-    const createPanel = (view) => {
-      const dom = document.createElement('div');
-      dom.className = 'cm-editor-toolbar-panel';
-
-      let currentIndex = 0;
-
-      const updatePanel = () => {
-        // Check if we have diff info and it's enabled
-        const hasDiff = file.diffInfo && showDiff;
-        const chunksData = hasDiff ? getChunks(view.state) : null;
-        const chunks = chunksData?.chunks || [];
-        const chunkCount = chunks.length;
-
-        // Build the toolbar HTML
-        let toolbarHTML = '<div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">';
-
-        // Left side - diff navigation (if applicable)
-        toolbarHTML += '<div style="display: flex; align-items: center; gap: 8px;">';
-        if (hasDiff) {
-          toolbarHTML += `
-            <span style="font-weight: 500;">${chunkCount > 0 ? `${currentIndex + 1}/${chunkCount}` : '0'} ${t('toolbar.changes')}</span>
-            <button class="cm-diff-nav-btn cm-diff-nav-prev" title="${t('toolbar.previousChange')}" ${chunkCount === 0 ? 'disabled' : ''}>
-              <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
-              </svg>
-            </button>
-            <button class="cm-diff-nav-btn cm-diff-nav-next" title="${t('toolbar.nextChange')}" ${chunkCount === 0 ? 'disabled' : ''}>
-              <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-              </svg>
-            </button>
-          `;
-        }
-        toolbarHTML += '</div>';
-
-        // Right side - action buttons
-        toolbarHTML += '<div style="display: flex; align-items: center; gap: 4px;">';
-
-        // Show/hide diff button (only if there's diff info)
-        if (file.diffInfo) {
-          toolbarHTML += `
-            <button class="cm-toolbar-btn cm-toggle-diff-btn" title="${showDiff ? t('toolbar.hideDiff') : t('toolbar.showDiff')}">
-              <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                ${showDiff ?
-                  '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />' :
-                  '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />'
-                }
-              </svg>
-            </button>
-          `;
-        }
-
-        // Settings button
-        toolbarHTML += `
-          <button class="cm-toolbar-btn cm-settings-btn" title="${t('toolbar.settings')}">
-            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-            </svg>
-          </button>
-        `;
-
-        // Expand button (only in sidebar mode)
-        if (isSidebar && onToggleExpand) {
-          toolbarHTML += `
-            <button class="cm-toolbar-btn cm-expand-btn" title="${isExpanded ? t('toolbar.collapse') : t('toolbar.expand')}">
-              <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                ${isExpanded ?
-                  '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25" />' :
-                  '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />'
-                }
-              </svg>
-            </button>
-          `;
-        }
-
-        toolbarHTML += '</div>';
-        toolbarHTML += '</div>';
-
-        dom.innerHTML = toolbarHTML;
-
-        // Attach event listeners for diff navigation
-        if (hasDiff) {
-          const prevBtn = dom.querySelector('.cm-diff-nav-prev');
-          const nextBtn = dom.querySelector('.cm-diff-nav-next');
-
-          prevBtn?.addEventListener('click', () => {
-            if (chunks.length === 0) return;
-            currentIndex = currentIndex > 0 ? currentIndex - 1 : chunks.length - 1;
-
-            const chunk = chunks[currentIndex];
-            if (chunk) {
-              view.dispatch({
-                effects: EditorView.scrollIntoView(chunk.fromB, { y: 'center' })
-              });
-            }
-            updatePanel();
-          });
-
-          nextBtn?.addEventListener('click', () => {
-            if (chunks.length === 0) return;
-            currentIndex = currentIndex < chunks.length - 1 ? currentIndex + 1 : 0;
-
-            const chunk = chunks[currentIndex];
-            if (chunk) {
-              view.dispatch({
-                effects: EditorView.scrollIntoView(chunk.fromB, { y: 'center' })
-              });
-            }
-            updatePanel();
-          });
-        }
-
-        // Attach event listener for toggle diff button
-        if (file.diffInfo) {
-          const toggleDiffBtn = dom.querySelector('.cm-toggle-diff-btn');
-          toggleDiffBtn?.addEventListener('click', () => {
-            setShowDiff(!showDiff);
-          });
-        }
-
-        // Attach event listener for settings button
-        const settingsBtn = dom.querySelector('.cm-settings-btn');
-        settingsBtn?.addEventListener('click', () => {
-          if (window.openSettings) {
-            window.openSettings('appearance');
-          }
-        });
-
-        // Attach event listener for expand button
-        if (isSidebar && onToggleExpand) {
-          const expandBtn = dom.querySelector('.cm-expand-btn');
-          expandBtn?.addEventListener('click', () => {
-            onToggleExpand();
-          });
-        }
-      };
-
-      updatePanel();
-
-      return {
-        top: true,
-        dom,
-        update: updatePanel
-      };
-    };
-
-    return [showPanel.of(createPanel)];
-  }, [file.diffInfo, showDiff, isSidebar, isExpanded, onToggleExpand]);
-
-  // Get language extension based on file extension
-  const getLanguageExtension = (filename) => {
-    const ext = filename.split('.').pop()?.toLowerCase();
-    switch (ext) {
-      case 'js':
-      case 'jsx':
-      case 'ts':
-      case 'tsx':
-        return [javascript({ jsx: true, typescript: ext.includes('ts') })];
-      case 'py':
-        return [python()];
-      case 'html':
-      case 'htm':
-        return [html()];
-      case 'css':
-      case 'scss':
-      case 'less':
-        return [css()];
-      case 'json':
-        return [json()];
-      case 'md':
-      case 'markdown':
-        return [markdown()];
-      default:
-        return [];
-    }
-  };
-
-  // Load file content
-  useEffect(() => {
-    const loadFileContent = async () => {
-      try {
-        setLoading(true);
-
-        // If we have diffInfo with both old and new content, we can show the diff directly
-        // This handles both GitPanel (full content) and ChatInterface (full content from API)
-        if (file.diffInfo && file.diffInfo.new_string !== undefined && file.diffInfo.old_string !== undefined) {
-          // Use the new_string as the content to display
-          // The unifiedMergeView will compare it against old_string
-          setContent(file.diffInfo.new_string);
-          setLoading(false);
-          return;
-        }
-
-        // Otherwise, load from disk
-        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);
-      } catch (error) {
-        console.error('Error loading file:', error);
-        setContent(`// Error loading file: ${error.message}\n// File: ${file.name}\n// Path: ${file.path}`);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadFileContent();
-  }, [file, projectPath]);
-
-  const handleSave = async () => {
-    setSaving(true);
-    try {
-      console.log('Saving file:', {
-        projectName: file.projectName,
-        path: file.path,
-        contentLength: content?.length
-      });
-
-      const response = await api.saveFile(file.projectName, file.path, content);
-
-      console.log('Save response:', {
-        status: response.status,
-        ok: response.ok,
-        contentType: response.headers.get('content-type')
-      });
-
-      if (!response.ok) {
-        const contentType = response.headers.get('content-type');
-        if (contentType && contentType.includes('application/json')) {
-          const errorData = await response.json();
-          throw new Error(errorData.error || `Save failed: ${response.status}`);
-        } else {
-          const textError = await response.text();
-          console.error('Non-JSON error response:', textError);
-          throw new Error(`Save failed: ${response.status} ${response.statusText}`);
-        }
-      }
-
-      const result = await response.json();
-      console.log('Save successful:', result);
-
-      setSaveSuccess(true);
-      setTimeout(() => setSaveSuccess(false), 2000);
-
-    } catch (error) {
-      console.error('Error saving file:', error);
-      alert(`Error saving file: ${error.message}`);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleDownload = () => {
-    const blob = new Blob([content], { type: 'text/plain' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = file.name;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
-
-  const toggleFullscreen = () => {
-    setIsFullscreen(!isFullscreen);
-  };
-
-  // Save theme preference to localStorage
-  useEffect(() => {
-    localStorage.setItem('codeEditorTheme', isDarkMode ? 'dark' : 'light');
-  }, [isDarkMode]);
-
-  // Save word wrap preference to localStorage
-  useEffect(() => {
-    localStorage.setItem('codeEditorWordWrap', wordWrap.toString());
-  }, [wordWrap]);
-
-  // Listen for settings changes from the Settings modal
-  useEffect(() => {
-    const handleStorageChange = () => {
-      const newTheme = localStorage.getItem('codeEditorTheme');
-      if (newTheme) {
-        setIsDarkMode(newTheme === 'dark');
-      }
-
-      const newWordWrap = localStorage.getItem('codeEditorWordWrap');
-      if (newWordWrap !== null) {
-        setWordWrap(newWordWrap === 'true');
-      }
-
-      const newShowMinimap = localStorage.getItem('codeEditorShowMinimap');
-      if (newShowMinimap !== null) {
-        setMinimapEnabled(newShowMinimap !== 'false');
-      }
-
-      const newShowLineNumbers = localStorage.getItem('codeEditorLineNumbers');
-      if (newShowLineNumbers !== null) {
-        setShowLineNumbers(newShowLineNumbers !== 'false');
-      }
-
-      const newFontSize = localStorage.getItem('codeEditorFontSize');
-      if (newFontSize) {
-        setFontSize(newFontSize);
-      }
-    };
-
-    // Listen for storage events (changes from other tabs/windows)
-    window.addEventListener('storage', handleStorageChange);
-
-    // Custom event for same-window updates
-    window.addEventListener('codeEditorSettingsChanged', handleStorageChange);
-
-    return () => {
-      window.removeEventListener('storage', handleStorageChange);
-      window.removeEventListener('codeEditorSettingsChanged', handleStorageChange);
-    };
-  }, []);
-
-  // 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]);
-
-  if (loading) {
-    return (
-      <>
-        <style>
-          {`
-            .code-editor-loading {
-              background-color: ${isDarkMode ? '#111827' : '#ffffff'} !important;
-            }
-            .code-editor-loading:hover {
-              background-color: ${isDarkMode ? '#111827' : '#ffffff'} !important;
-            }
-          `}
-        </style>
-        {isSidebar ? (
-          <div className="w-full h-full flex items-center justify-center bg-background">
-            <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">{t('loading', { fileName: file.name })}</span>
-            </div>
-          </div>
-        ) : (
-          <div className="fixed inset-0 z-40 md:bg-black/50 md:flex md:items-center md:justify-center">
-            <div className="code-editor-loading w-full h-full md:rounded-lg md:w-auto md:h-auto p-8 flex items-center justify-center">
-              <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">{t('loading', { fileName: file.name })}</span>
-              </div>
-            </div>
-          </div>
-        )}
-      </>
-    );
-  }
-
-  return (
-    <>
-      <style>
-        {`
-          /* Light background for full line changes */
-          .cm-deletedChunk {
-            background-color: ${isDarkMode ? 'rgba(239, 68, 68, 0.15)' : 'rgba(255, 235, 235, 1)'} !important;
-            border-left: 3px solid ${isDarkMode ? 'rgba(239, 68, 68, 0.6)' : 'rgb(239, 68, 68)'} !important;
-            padding-left: 4px !important;
-          }
-
-          .cm-insertedChunk {
-            background-color: ${isDarkMode ? 'rgba(34, 197, 94, 0.15)' : 'rgba(230, 255, 237, 1)'} !important;
-            border-left: 3px solid ${isDarkMode ? 'rgba(34, 197, 94, 0.6)' : 'rgb(34, 197, 94)'} !important;
-            padding-left: 4px !important;
-          }
-
-          /* Override linear-gradient underline and use solid darker background for partial changes */
-          .cm-editor.cm-merge-b .cm-changedText {
-            background: ${isDarkMode ? 'rgba(34, 197, 94, 0.4)' : 'rgba(34, 197, 94, 0.3)'} !important;
-            padding-top: 2px !important;
-            padding-bottom: 2px !important;
-            margin-top: -2px !important;
-            margin-bottom: -2px !important;
-          }
-
-          .cm-editor .cm-deletedChunk .cm-changedText {
-            background: ${isDarkMode ? 'rgba(239, 68, 68, 0.4)' : 'rgba(239, 68, 68, 0.3)'} !important;
-            padding-top: 2px !important;
-            padding-bottom: 2px !important;
-            margin-top: -2px !important;
-            margin-bottom: -2px !important;
-          }
-
-          /* Minimap gutter styling */
-          .cm-gutter.cm-gutter-minimap {
-            background-color: ${isDarkMode ? '#1e1e1e' : '#f5f5f5'};
-          }
-
-          /* Editor toolbar panel styling */
-          .cm-editor-toolbar-panel {
-            padding: 8px 12px;
-            background-color: ${isDarkMode ? '#1f2937' : '#ffffff'};
-            border-bottom: 1px solid ${isDarkMode ? '#374151' : '#e5e7eb'};
-            color: ${isDarkMode ? '#d1d5db' : '#374151'};
-            font-size: 14px;
-          }
-
-          .cm-diff-nav-btn,
-          .cm-toolbar-btn {
-            padding: 4px;
-            background: transparent;
-            border: none;
-            cursor: pointer;
-            border-radius: 4px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            color: inherit;
-            transition: background-color 0.2s;
-          }
-
-          .cm-diff-nav-btn:hover,
-          .cm-toolbar-btn:hover {
-            background-color: ${isDarkMode ? '#374151' : '#f3f4f6'};
-          }
-
-          .cm-diff-nav-btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-          }
-        `}
-      </style>
-      <div className={isSidebar ?
-        'w-full h-full flex flex-col' :
-        `fixed inset-0 z-40 ${
-          // Mobile: native fullscreen, Desktop: modal with backdrop
-          'md:bg-black/50 md:flex md:items-center md:justify-center md:p-4'
-        } ${isFullscreen ? 'md:p-0' : ''}`}>
-        <div className={isSidebar ?
-          'bg-background flex flex-col w-full h-full' :
-          `bg-background shadow-2xl flex flex-col ${
-          // Mobile: always fullscreen, Desktop: modal sizing
-          '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-[80vh] md:max-h-[80vh]')
-        }`}>
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-border flex-shrink-0 min-w-0">
-          <div className="flex items-center gap-3 min-w-0 flex-1">
-            <div className="min-w-0 flex-1">
-              <div className="flex items-center gap-2 min-w-0">
-                <h3 className="font-medium text-gray-900 dark:text-white truncate">{file.name}</h3>
-                {file.diffInfo && (
-                  <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 px-2 py-1 rounded whitespace-nowrap">
-                    {t('header.showingChanges')}
-                  </span>
-                )}
-              </div>
-              <p className="text-sm text-gray-500 dark:text-gray-400 truncate">{file.path}</p>
-            </div>
-          </div>
-
-          <div className="flex items-center gap-1 md:gap-2 flex-shrink-0">
-            <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={t('actions.download')}
-            >
-              <Download className="w-5 h-5 md:w-4 md:h-4" />
-            </button>
-
-            <button
-              onClick={handleSave}
-              disabled={saving}
-              className={`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-blue-600 hover:bg-blue-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">{t('actions.saved')}</span>
-                </>
-              ) : (
-                <>
-                  <Save className="w-5 h-5 md:w-4 md:h-4" />
-                  <span className="hidden sm:inline">{saving ? t('actions.saving') : t('actions.save')}</span>
-                </>
-              )}
-            </button>
-
-            {!isSidebar && (
-              <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 ? t('actions.exitFullscreen') : t('actions.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={t('actions.close')}
-            >
-              <X className="w-6 h-6 md:w-4 md:h-4" />
-            </button>
-          </div>
-        </div>
-
-        {/* Editor */}
-        <div className="flex-1 overflow-hidden">
-          <CodeMirror
-            ref={editorRef}
-            value={content}
-            onChange={setContent}
-            extensions={[
-              ...getLanguageExtension(file.name),
-              // Always show the toolbar
-              ...editorToolbarPanel,
-              // Only show diff-related extensions when diff is enabled
-              ...(file.diffInfo && showDiff && file.diffInfo.old_string !== undefined
-                ? [
-                    unifiedMergeView({
-                      original: file.diffInfo.old_string,
-                      mergeControls: false,
-                      highlightChanges: true,
-                      syntaxHighlightDeletions: false,
-                      gutter: true
-                      // NOTE: NO collapseUnchanged - this shows the full file!
-                    }),
-                    ...minimapExtension,
-                    ...scrollToFirstChunkExtension
-                  ]
-                : []),
-              ...(wordWrap ? [EditorView.lineWrapping] : [])
-            ]}
-            theme={isDarkMode ? oneDark : undefined}
-            height="100%"
-            style={{
-              fontSize: `${fontSize}px`,
-              height: '100%',
-            }}
-            basicSetup={{
-              lineNumbers: showLineNumbers,
-              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-border bg-muted flex-shrink-0">
-          <div className="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
-            <span>{t('footer.lines')} {content.split('\n').length}</span>
-            <span>{t('footer.characters')} {content.length}</span>
-          </div>
-
-          <div className="text-sm text-gray-500 dark:text-gray-400">
-            {t('footer.shortcuts')}
-          </div>
-        </div>
-      </div>
-    </div>
-    </>
-  );
-}
-
-export default CodeEditor;
--- a/src/components/CommandMenu.jsx
+++ b/src/components/CommandMenu.jsx
@@ -1,344 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-
-/**
- * CommandMenu - Autocomplete dropdown for slash commands
- *
- * @param {Array} commands - Array of command objects to display
- * @param {number} selectedIndex - Currently selected command index
- * @param {Function} onSelect - Callback when a command is selected
- * @param {Function} onClose - Callback when menu should close
- * @param {Object} position - Position object { top, left } for absolute positioning
- * @param {boolean} isOpen - Whether the menu is open
- * @param {Array} frequentCommands - Array of frequently used command objects
- */
-const CommandMenu = ({ commands = [], selectedIndex = -1, onSelect, onClose, position = { top: 0, left: 0 }, isOpen = false, frequentCommands = [] }) => {
-  const menuRef = useRef(null);
-  const selectedItemRef = useRef(null);
-
-  // Calculate responsive positioning
-  const getMenuPosition = () => {
-    const isMobile = window.innerWidth < 640;
-    const viewportHeight = window.innerHeight;
-    const menuHeight = 300; // Max height of menu
-
-    if (isMobile) {
-      // On mobile, calculate bottom position dynamically to appear above the input
-      // Use the bottom value which is calculated as: window.innerHeight - textarea.top + spacing
-      const inputBottom = position.bottom || 90; // Use provided bottom or default
-
-      return {
-        position: 'fixed',
-        bottom: `${inputBottom}px`, // Position above the input with spacing already included
-        left: '16px',
-        right: '16px',
-        width: 'auto',
-        maxWidth: 'calc(100vw - 32px)',
-        maxHeight: 'min(50vh, 300px)' // Limit to smaller of 50vh or 300px
-      };
-    }
-
-    // On desktop, use provided position but ensure it stays on screen
-    return {
-      position: 'fixed',
-      top: `${Math.max(16, Math.min(position.top, viewportHeight - 316))}px`,
-      left: `${position.left}px`,
-      width: 'min(400px, calc(100vw - 32px))',
-      maxWidth: 'calc(100vw - 32px)',
-      maxHeight: '300px'
-    };
-  };
-
-  const menuPosition = getMenuPosition();
-
-  // Close menu when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (menuRef.current && !menuRef.current.contains(event.target) && isOpen) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }
-  }, [isOpen, onClose]);
-
-  // Scroll selected item into view
-  useEffect(() => {
-    if (selectedItemRef.current && menuRef.current) {
-      const menuRect = menuRef.current.getBoundingClientRect();
-      const itemRect = selectedItemRef.current.getBoundingClientRect();
-
-      if (itemRect.bottom > menuRect.bottom) {
-        selectedItemRef.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-      } else if (itemRect.top < menuRect.top) {
-        selectedItemRef.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-      }
-    }
-  }, [selectedIndex]);
-
-  if (!isOpen) {
-    return null;
-  }
-
-  // Show a message if no commands are available
-  if (commands.length === 0) {
-    return (
-      <div
-        ref={menuRef}
-        className="command-menu command-menu-empty"
-        style={{
-          ...menuPosition,
-          maxHeight: '300px',
-          borderRadius: '8px',
-          boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-          zIndex: 1000,
-          padding: '20px',
-          opacity: 1,
-          transform: 'translateY(0)',
-          transition: 'opacity 150ms ease-in-out, transform 150ms ease-in-out',
-          textAlign: 'center'
-        }}
-      >
-        No commands available
-      </div>
-    );
-  }
-
-  // Add frequent commands as a special group if provided
-  const hasFrequentCommands = frequentCommands.length > 0;
-
-  // Group commands by namespace
-  const groupedCommands = commands.reduce((groups, command) => {
-    const namespace = command.namespace || command.type || 'other';
-    if (!groups[namespace]) {
-      groups[namespace] = [];
-    }
-    groups[namespace].push(command);
-    return groups;
-  }, {});
-
-  // Add frequent commands as a separate group
-  if (hasFrequentCommands) {
-    groupedCommands['frequent'] = frequentCommands;
-  }
-
-  // Order: frequent, builtin, project, user, other
-  const namespaceOrder = hasFrequentCommands
-    ? ['frequent', 'builtin', 'project', 'user', 'other']
-    : ['builtin', 'project', 'user', 'other'];
-  const orderedNamespaces = namespaceOrder.filter(ns => groupedCommands[ns]);
-
-  const namespaceLabels = {
-    frequent: '⭐ Frequently Used',
-    builtin: 'Built-in Commands',
-    project: 'Project Commands',
-    user: 'User Commands',
-    other: 'Other Commands'
-  };
-
-  // Calculate global index for each command
-  let globalIndex = 0;
-  const commandsWithIndex = [];
-  orderedNamespaces.forEach(namespace => {
-    groupedCommands[namespace].forEach(command => {
-      commandsWithIndex.push({
-        ...command,
-        globalIndex: globalIndex++,
-        namespace
-      });
-    });
-  });
-
-  return (
-    <div
-      ref={menuRef}
-      role="listbox"
-      aria-label="Available commands"
-      className="command-menu"
-      style={{
-        ...menuPosition,
-        maxHeight: '300px',
-        overflowY: 'auto',
-        borderRadius: '8px',
-        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-        zIndex: 1000,
-        padding: '8px',
-        opacity: isOpen ? 1 : 0,
-        transform: isOpen ? 'translateY(0)' : 'translateY(-10px)',
-        transition: 'opacity 150ms ease-in-out, transform 150ms ease-in-out'
-      }}
-    >
-      {orderedNamespaces.map((namespace) => (
-        <div key={namespace} className="command-group">
-          {orderedNamespaces.length > 1 && (
-            <div
-              style={{
-                fontSize: '11px',
-                fontWeight: 600,
-                textTransform: 'uppercase',
-                color: '#6b7280',
-                padding: '8px 12px 4px',
-                letterSpacing: '0.05em'
-              }}
-            >
-              {namespaceLabels[namespace] || namespace}
-            </div>
-          )}
-          {groupedCommands[namespace].map((command) => {
-            const cmdWithIndex = commandsWithIndex.find(c => c.name === command.name && c.namespace === namespace);
-            const isSelected = cmdWithIndex && cmdWithIndex.globalIndex === selectedIndex;
-
-            return (
-              <div
-                key={`${namespace}-${command.name}`}
-                ref={isSelected ? selectedItemRef : null}
-                role="option"
-                aria-selected={isSelected}
-                className="command-item"
-                onMouseEnter={() => onSelect && onSelect(command, cmdWithIndex.globalIndex, true)}
-                onClick={() => onSelect && onSelect(command, cmdWithIndex.globalIndex, false)}
-                style={{
-                  display: 'flex',
-                  alignItems: 'flex-start',
-                  padding: '10px 12px',
-                  borderRadius: '6px',
-                  cursor: 'pointer',
-                  backgroundColor: isSelected ? '#eff6ff' : 'transparent',
-                  transition: 'background-color 100ms ease-in-out',
-                  marginBottom: '2px'
-                }}
-                onMouseDown={(e) => e.preventDefault()} // Prevent textarea blur
-              >
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '8px',
-                      marginBottom: command.description ? '4px' : 0
-                    }}
-                  >
-                    {/* Command icon based on namespace */}
-                    <span
-                      style={{
-                        fontSize: '16px',
-                        flexShrink: 0
-                      }}
-                    >
-                      {namespace === 'builtin' && '⚡'}
-                      {namespace === 'project' && '📁'}
-                      {namespace === 'user' && '👤'}
-                      {namespace === 'other' && '📝'}
-                    </span>
-
-                    {/* Command name */}
-                    <span
-                      style={{
-                        fontWeight: 600,
-                        fontSize: '14px',
-                        color: '#111827',
-                        fontFamily: 'monospace'
-                      }}
-                    >
-                      {command.name}
-                    </span>
-
-                    {/* Command metadata badge */}
-                    {command.metadata?.type && (
-                      <span
-                        className="command-metadata-badge"
-                        style={{
-                          fontSize: '10px',
-                          padding: '2px 6px',
-                          borderRadius: '4px',
-                          backgroundColor: '#f3f4f6',
-                          color: '#6b7280',
-                          fontWeight: 500
-                        }}
-                      >
-                        {command.metadata.type}
-                      </span>
-                    )}
-                  </div>
-
-                  {/* Command description */}
-                  {command.description && (
-                    <div
-                      style={{
-                        fontSize: '13px',
-                        color: '#6b7280',
-                        marginLeft: '24px',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis'
-                      }}
-                    >
-                      {command.description}
-                    </div>
-                  )}
-                </div>
-
-                {/* Selection indicator */}
-                {isSelected && (
-                  <span
-                    style={{
-                      marginLeft: '8px',
-                      color: '#3b82f6',
-                      fontSize: '12px',
-                      fontWeight: 600
-                    }}
-                  >
-                    ↵
-                  </span>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      ))}
-
-      {/* Default light mode styles */}
-      <style>{`
-        .command-menu {
-          background-color: white;
-          border: 1px solid #e5e7eb;
-        }
-        .command-menu-empty {
-          color: #6b7280;
-        }
-
-        @media (prefers-color-scheme: dark) {
-          .command-menu {
-            background-color: #1f2937 !important;
-            border: 1px solid #374151 !important;
-          }
-          .command-menu-empty {
-            color: #9ca3af !important;
-          }
-          .command-item[aria-selected="true"] {
-            background-color: #1e40af !important;
-          }
-          .command-item span:not(.command-metadata-badge) {
-            color: #f3f4f6 !important;
-          }
-          .command-metadata-badge {
-            background-color: #f3f4f6 !important;
-            color: #6b7280 !important;
-          }
-          .command-item div {
-            color: #d1d5db !important;
-          }
-          .command-group > div:first-child {
-            color: #9ca3af !important;
-          }
-        }
-      `}</style>
-    </div>
-  );
-};
-
-export default CommandMenu;
--- a/src/components/CredentialsSettings.jsx
+++ b/src/components/CredentialsSettings.jsx
@@ -1,421 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { Key, Plus, Trash2, Eye, EyeOff, Copy, Check, Github, ExternalLink } from 'lucide-react';
-import { useVersionCheck } from '../hooks/useVersionCheck';
-import { version } from '../../package.json';
-import { authenticatedFetch } from '../utils/api';
-import { useTranslation } from 'react-i18next';
-
-function CredentialsSettings() {
-  const { t } = useTranslation('settings');
-  const [apiKeys, setApiKeys] = useState([]);
-  const [githubCredentials, setGithubCredentials] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [showNewKeyForm, setShowNewKeyForm] = useState(false);
-  const [showNewGithubForm, setShowNewGithubForm] = useState(false);
-  const [newKeyName, setNewKeyName] = useState('');
-  const [newGithubName, setNewGithubName] = useState('');
-  const [newGithubToken, setNewGithubToken] = useState('');
-  const [newGithubDescription, setNewGithubDescription] = useState('');
-  const [showToken, setShowToken] = useState({});
-  const [copiedKey, setCopiedKey] = useState(null);
-  const [newlyCreatedKey, setNewlyCreatedKey] = useState(null);
-
-  // Version check hook
-  const { updateAvailable, latestVersion, releaseInfo } = useVersionCheck('siteboon', 'claudecodeui');
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  const fetchData = async () => {
-    try {
-      setLoading(true);
-
-      // Fetch API keys
-      const apiKeysRes = await authenticatedFetch('/api/settings/api-keys');
-      const apiKeysData = await apiKeysRes.json();
-      setApiKeys(apiKeysData.apiKeys || []);
-
-      // Fetch GitHub credentials only
-      const credentialsRes = await authenticatedFetch('/api/settings/credentials?type=github_token');
-      const credentialsData = await credentialsRes.json();
-      setGithubCredentials(credentialsData.credentials || []);
-    } catch (error) {
-      console.error('Error fetching settings:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const createApiKey = async () => {
-    if (!newKeyName.trim()) return;
-
-    try {
-      const res = await authenticatedFetch('/api/settings/api-keys', {
-        method: 'POST',
-        body: JSON.stringify({ keyName: newKeyName })
-      });
-
-      const data = await res.json();
-      if (data.success) {
-        setNewlyCreatedKey(data.apiKey);
-        setNewKeyName('');
-        setShowNewKeyForm(false);
-        fetchData();
-      }
-    } catch (error) {
-      console.error('Error creating API key:', error);
-    }
-  };
-
-  const deleteApiKey = async (keyId) => {
-    if (!confirm(t('apiKeys.confirmDelete'))) return;
-
-    try {
-      await authenticatedFetch(`/api/settings/api-keys/${keyId}`, {
-        method: 'DELETE'
-      });
-      fetchData();
-    } catch (error) {
-      console.error('Error deleting API key:', error);
-    }
-  };
-
-  const toggleApiKey = async (keyId, isActive) => {
-    try {
-      await authenticatedFetch(`/api/settings/api-keys/${keyId}/toggle`, {
-        method: 'PATCH',
-        body: JSON.stringify({ isActive: !isActive })
-      });
-      fetchData();
-    } catch (error) {
-      console.error('Error toggling API key:', error);
-    }
-  };
-
-  const createGithubCredential = async () => {
-    if (!newGithubName.trim() || !newGithubToken.trim()) return;
-
-    try {
-      const res = await authenticatedFetch('/api/settings/credentials', {
-        method: 'POST',
-        body: JSON.stringify({
-          credentialName: newGithubName,
-          credentialType: 'github_token',
-          credentialValue: newGithubToken,
-          description: newGithubDescription
-        })
-      });
-
-      const data = await res.json();
-      if (data.success) {
-        setNewGithubName('');
-        setNewGithubToken('');
-        setNewGithubDescription('');
-        setShowNewGithubForm(false);
-        fetchData();
-      }
-    } catch (error) {
-      console.error('Error creating GitHub credential:', error);
-    }
-  };
-
-  const deleteGithubCredential = async (credentialId) => {
-    if (!confirm(t('apiKeys.github.confirmDelete'))) return;
-
-    try {
-      await authenticatedFetch(`/api/settings/credentials/${credentialId}`, {
-        method: 'DELETE'
-      });
-      fetchData();
-    } catch (error) {
-      console.error('Error deleting GitHub credential:', error);
-    }
-  };
-
-  const toggleGithubCredential = async (credentialId, isActive) => {
-    try {
-      await authenticatedFetch(`/api/settings/credentials/${credentialId}/toggle`, {
-        method: 'PATCH',
-        body: JSON.stringify({ isActive: !isActive })
-      });
-      fetchData();
-    } catch (error) {
-      console.error('Error toggling GitHub credential:', error);
-    }
-  };
-
-  const copyToClipboard = (text, id) => {
-    navigator.clipboard.writeText(text);
-    setCopiedKey(id);
-    setTimeout(() => setCopiedKey(null), 2000);
-  };
-
-  if (loading) {
-    return <div className="text-muted-foreground">{t('apiKeys.loading')}</div>;
-  }
-
-  return (
-    <div className="space-y-8">
-      {/* New API Key Alert */}
-      {newlyCreatedKey && (
-        <div className="p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
-          <h4 className="font-semibold text-yellow-500 mb-2">{t('apiKeys.newKey.alertTitle')}</h4>
-          <p className="text-sm text-muted-foreground mb-3">
-            {t('apiKeys.newKey.alertMessage')}
-          </p>
-          <div className="flex items-center gap-2">
-            <code className="flex-1 px-3 py-2 bg-background/50 rounded font-mono text-sm break-all">
-              {newlyCreatedKey.apiKey}
-            </code>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => copyToClipboard(newlyCreatedKey.apiKey, 'new')}
-            >
-              {copiedKey === 'new' ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-            </Button>
-          </div>
-          <Button
-            size="sm"
-            variant="ghost"
-            className="mt-3"
-            onClick={() => setNewlyCreatedKey(null)}
-          >
-            {t('apiKeys.newKey.iveSavedIt')}
-          </Button>
-        </div>
-      )}
-
-      {/* API Keys Section */}
-      <div>
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <Key className="h-5 w-5" />
-            <h3 className="text-lg font-semibold">{t('apiKeys.title')}</h3>
-          </div>
-          <Button
-            size="sm"
-            onClick={() => setShowNewKeyForm(!showNewKeyForm)}
-          >
-            <Plus className="h-4 w-4 mr-1" />
-            {t('apiKeys.newButton')}
-          </Button>
-        </div>
-
-        <div className="mb-4">
-          <p className="text-sm text-muted-foreground mb-2">
-            {t('apiKeys.description')}
-          </p>
-          <a
-            href="/api-docs.html"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-sm text-primary hover:underline inline-flex items-center gap-1"
-          >
-            {t('apiKeys.apiDocsLink')}
-            <ExternalLink className="h-3 w-3" />
-          </a>
-        </div>
-
-        {showNewKeyForm && (
-          <div className="mb-4 p-4 border rounded-lg bg-card">
-            <Input
-              placeholder={t('apiKeys.form.placeholder')}
-              value={newKeyName}
-              onChange={(e) => setNewKeyName(e.target.value)}
-              className="mb-2"
-            />
-            <div className="flex gap-2">
-              <Button onClick={createApiKey}>{t('apiKeys.form.createButton')}</Button>
-              <Button variant="outline" onClick={() => setShowNewKeyForm(false)}>
-                {t('apiKeys.form.cancelButton')}
-              </Button>
-            </div>
-          </div>
-        )}
-
-        <div className="space-y-2">
-          {apiKeys.length === 0 ? (
-            <p className="text-sm text-muted-foreground italic">{t('apiKeys.empty')}</p>
-          ) : (
-            apiKeys.map((key) => (
-              <div
-                key={key.id}
-                className="flex items-center justify-between p-3 border rounded-lg"
-              >
-                <div className="flex-1">
-                  <div className="font-medium">{key.key_name}</div>
-                  <code className="text-xs text-muted-foreground">{key.api_key}</code>
-                  <div className="text-xs text-muted-foreground mt-1">
-                    {t('apiKeys.list.created')} {new Date(key.created_at).toLocaleDateString()}
-                    {key.last_used && ` • ${t('apiKeys.list.lastUsed')} ${new Date(key.last_used).toLocaleDateString()}`}
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    size="sm"
-                    variant={key.is_active ? 'outline' : 'secondary'}
-                    onClick={() => toggleApiKey(key.id, key.is_active)}
-                  >
-                    {key.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={() => deleteApiKey(key.id)}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-
-      {/* GitHub Credentials Section */}
-      <div>
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <Github className="h-5 w-5" />
-            <h3 className="text-lg font-semibold">{t('apiKeys.github.title')}</h3>
-          </div>
-          <Button
-            size="sm"
-            onClick={() => setShowNewGithubForm(!showNewGithubForm)}
-          >
-            <Plus className="h-4 w-4 mr-1" />
-            {t('apiKeys.github.addButton')}
-          </Button>
-        </div>
-
-        <p className="text-sm text-muted-foreground mb-4">
-          {t('apiKeys.github.descriptionAlt')}
-        </p>
-
-        {showNewGithubForm && (
-          <div className="mb-4 p-4 border rounded-lg bg-card space-y-3">
-            <Input
-              placeholder={t('apiKeys.github.form.namePlaceholder')}
-              value={newGithubName}
-              onChange={(e) => setNewGithubName(e.target.value)}
-            />
-
-            <div className="relative">
-              <Input
-                type={showToken['new'] ? 'text' : 'password'}
-                placeholder={t('apiKeys.github.form.tokenPlaceholder')}
-                value={newGithubToken}
-                onChange={(e) => setNewGithubToken(e.target.value)}
-                className="pr-10"
-              />
-              <button
-                type="button"
-                onClick={() => setShowToken({ ...showToken, new: !showToken['new'] })}
-                className="absolute right-3 top-2.5 text-muted-foreground hover:text-foreground"
-              >
-                {showToken['new'] ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-              </button>
-            </div>
-
-            <Input
-              placeholder={t('apiKeys.github.form.descriptionPlaceholder')}
-              value={newGithubDescription}
-              onChange={(e) => setNewGithubDescription(e.target.value)}
-            />
-
-            <div className="flex gap-2">
-              <Button onClick={createGithubCredential}>{t('apiKeys.github.form.addButton')}</Button>
-              <Button variant="outline" onClick={() => {
-                setShowNewGithubForm(false);
-                setNewGithubName('');
-                setNewGithubToken('');
-                setNewGithubDescription('');
-              }}>
-                {t('apiKeys.github.form.cancelButton')}
-              </Button>
-            </div>
-
-            <a
-              href="https://github.com/settings/tokens"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-xs text-primary hover:underline block"
-            >
-              {t('apiKeys.github.form.howToCreate')}
-            </a>
-          </div>
-        )}
-
-        <div className="space-y-2">
-          {githubCredentials.length === 0 ? (
-            <p className="text-sm text-muted-foreground italic">{t('apiKeys.github.empty')}</p>
-          ) : (
-            githubCredentials.map((credential) => (
-              <div
-                key={credential.id}
-                className="flex items-center justify-between p-3 border rounded-lg"
-              >
-                <div className="flex-1">
-                  <div className="font-medium">{credential.credential_name}</div>
-                  {credential.description && (
-                    <div className="text-xs text-muted-foreground">{credential.description}</div>
-                  )}
-                  <div className="text-xs text-muted-foreground mt-1">
-                    {t('apiKeys.github.added')} {new Date(credential.created_at).toLocaleDateString()}
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    size="sm"
-                    variant={credential.is_active ? 'outline' : 'secondary'}
-                    onClick={() => toggleGithubCredential(credential.id, credential.is_active)}
-                  >
-                    {credential.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={() => deleteGithubCredential(credential.id)}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-
-      {/* Version Information */}
-      <div className="pt-6 border-t border-border/50">
-        <div className="flex items-center justify-between text-xs italic text-muted-foreground/60">
-          <a
-            href={releaseInfo?.htmlUrl || 'https://github.com/siteboon/claudecodeui/releases'}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-muted-foreground transition-colors"
-          >
-            v{version}
-          </a>
-          {updateAvailable && latestVersion && (
-            <a
-              href={releaseInfo?.htmlUrl || 'https://github.com/siteboon/claudecodeui/releases'}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-1.5 px-2 py-0.5 bg-green-500/10 text-green-600 dark:text-green-400 rounded-full hover:bg-green-500/20 transition-colors not-italic font-medium"
-            >
-              <span className="text-[10px]">{t('apiKeys.version.updateAvailable', { version: latestVersion })}</span>
-              <ExternalLink className="h-2.5 w-2.5" />
-            </a>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default CredentialsSettings;
--- a/src/components/DarkModeToggle.jsx
+++ b/src/components/DarkModeToggle.jsx
@@ -1,35 +0,0 @@
-import React from 'react';
-import { useTheme } from '../contexts/ThemeContext';
-
-function DarkModeToggle() {
-  const { isDarkMode, toggleDarkMode } = useTheme();
-
-  return (
-    <button
-      onClick={toggleDarkMode}
-      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={isDarkMode}
-      aria-label="Toggle dark mode"
-    >
-      <span className="sr-only">Toggle dark mode</span>
-      <span
-        className={`${
-          isDarkMode ? 'translate-x-7' : 'translate-x-1'
-        } inline-block h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform duration-200 flex items-center justify-center`}
-      >
-        {isDarkMode ? (
-          <svg className="w-3.5 h-3.5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-          </svg>
-        ) : (
-          <svg className="w-3.5 h-3.5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-          </svg>
-        )}
-      </span>
-    </button>
-  );
-}
-
-export default DarkModeToggle;
--- a/src/components/DarkModeToggle.tsx
+++ b/src/components/DarkModeToggle.tsx
@@ -0,0 +1,48 @@
+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
@@ -3,7 +3,7 @@ import React from 'react';
 function DiffViewer({ diff, fileName, isMobile, wrapText }) {
  if (!diff) {
    return (
-      <div className="p-4 text-center text-gray-500 dark:text-gray-400 text-sm">
+      <div className="p-4 text-center text-muted-foreground text-sm">
        No diff available
      </div>
    );
@@ -17,13 +17,13 @@ function DiffViewer({ diff, fileName, isMobile, wrapText }) {
    return (
      <div
        key={index}
-        className={`font-mono text-xs p-2 ${
+        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 text-green-700 dark:text-green-300' :
-          isDeletion ? 'bg-red-50 dark:bg-red-950 text-red-700 dark:text-red-300' :
-          isHeader ? 'bg-blue-50 dark:bg-blue-950 text-blue-700 dark:text-blue-300' :
-          'text-gray-600 dark:text-gray-400'
+          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}
--- a/src/components/ErrorBoundary.jsx
+++ b/src/components/ErrorBoundary.jsx
@@ -1,73 +1,77 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';

-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false, error: null, errorInfo: null };
-  }
-
-  static getDerivedStateFromError(error) {
-    // Update state so the next render will show the fallback UI
-    return { hasError: true };
-  }
-
-  componentDidCatch(error, errorInfo) {
-    // Log the error details
-    console.error('ErrorBoundary caught an error:', error, errorInfo);
-    
-    // You can also log the error to an error reporting service here
-    this.setState({
-      error: error,
-      errorInfo: errorInfo
-    });
-  }
-
-  render() {
-    if (this.state.hasError) {
-      // Fallback UI
-      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>
-              {this.props.showDetails && this.state.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">
-                    {this.state.error.toString()}
-                    {this.state.errorInfo && this.state.errorInfo.componentStack}
-                  </pre>
-                </details>
-              )}
-            </div>
-            <div className="mt-4">
-              <button
-                onClick={() => {
-                  this.setState({ hasError: false, error: null, errorInfo: null });
-                  if (this.props.onRetry) this.props.onRetry();
-                }}
-                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>
+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>
-      );
-    }
-
-    return this.props.children;
-  }
+        <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>
+  );
 }

-export default ErrorBoundary;
+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/FileTree.jsx
+++ b/src/components/FileTree.jsx
@@ -1,482 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ScrollArea } from './ui/scroll-area';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { Folder, FolderOpen, File, FileText, FileCode, List, TableProperties, Eye, Search, X } from 'lucide-react';
-import { cn } from '../lib/utils';
-import CodeEditor from './CodeEditor';
-import ImageViewer from './ImageViewer';
-import { api } from '../utils/api';
-
-function FileTree({ selectedProject }) {
-  const { t } = useTranslation();
-  const [files, setFiles] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [expandedDirs, setExpandedDirs] = useState(new Set());
-  const [selectedFile, setSelectedFile] = useState(null);
-  const [selectedImage, setSelectedImage] = useState(null);
-  const [viewMode, setViewMode] = useState('detailed'); // 'simple', 'detailed', 'compact'
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filteredFiles, setFilteredFiles] = useState([]);
-
-  useEffect(() => {
-    if (selectedProject) {
-      fetchFiles();
-    }
-  }, [selectedProject]);
-
-  // Load view mode preference from localStorage
-  useEffect(() => {
-    const savedViewMode = localStorage.getItem('file-tree-view-mode');
-    if (savedViewMode && ['simple', 'detailed', 'compact'].includes(savedViewMode)) {
-      setViewMode(savedViewMode);
-    }
-  }, []);
-
-  // Filter files based on search query
-  useEffect(() => {
-    if (!searchQuery.trim()) {
-      setFilteredFiles(files);
-    } else {
-      const filtered = filterFiles(files, searchQuery.toLowerCase());
-      setFilteredFiles(filtered);
-
-      // Auto-expand directories that contain matches
-      const expandMatches = (items) => {
-        items.forEach(item => {
-          if (item.type === 'directory' && item.children && item.children.length > 0) {
-            setExpandedDirs(prev => new Set(prev.add(item.path)));
-            expandMatches(item.children);
-          }
-        });
-      };
-      expandMatches(filtered);
-    }
-  }, [files, searchQuery]);
-
-  // Recursively filter files and directories based on search query
-  const filterFiles = (items, query) => {
-    return items.reduce((filtered, item) => {
-      const matchesName = item.name.toLowerCase().includes(query);
-      let filteredChildren = [];
-
-      if (item.type === 'directory' && item.children) {
-        filteredChildren = filterFiles(item.children, query);
-      }
-
-      // Include item if:
-      // 1. It matches the search query, or
-      // 2. It's a directory with matching children
-      if (matchesName || filteredChildren.length > 0) {
-        filtered.push({
-          ...item,
-          children: filteredChildren
-        });
-      }
-
-      return filtered;
-    }, []);
-  };
-
-  const fetchFiles = async () => {
-    setLoading(true);
-    try {
-      const response = await api.getFiles(selectedProject.name);
-      
-      if (!response.ok) {
-        const errorText = await response.text();
-        console.error('❌ File fetch failed:', response.status, errorText);
-        setFiles([]);
-        return;
-      }
-      
-      const data = await response.json();
-      setFiles(data);
-    } catch (error) {
-      console.error('❌ Error fetching files:', error);
-      setFiles([]);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const toggleDirectory = (path) => {
-    const newExpanded = new Set(expandedDirs);
-    if (newExpanded.has(path)) {
-      newExpanded.delete(path);
-    } else {
-      newExpanded.add(path);
-    }
-    setExpandedDirs(newExpanded);
-  };
-
-  // Change view mode and save preference
-  const changeViewMode = (mode) => {
-    setViewMode(mode);
-    localStorage.setItem('file-tree-view-mode', mode);
-  };
-
-  // Format file size
-  const formatFileSize = (bytes) => {
-    if (!bytes || bytes === 0) return '0 B';
-    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-  };
-
-  // Format date as relative time
-  const formatRelativeTime = (date) => {
-    if (!date) return '-';
-    const now = new Date();
-    const past = new Date(date);
-    const diffInSeconds = Math.floor((now - past) / 1000);
-
-    if (diffInSeconds < 60) return t('fileTree.justNow');
-    if (diffInSeconds < 3600) return t('fileTree.minAgo', { count: Math.floor(diffInSeconds / 60) });
-    if (diffInSeconds < 86400) return t('fileTree.hoursAgo', { count: Math.floor(diffInSeconds / 3600) });
-    if (diffInSeconds < 2592000) return t('fileTree.daysAgo', { count: Math.floor(diffInSeconds / 86400) });
-    return past.toLocaleDateString();
-  };
-
-  const renderFileTree = (items, level = 0) => {
-    return items.map((item) => (
-      <div key={item.path} className="select-none">
-        <Button
-          variant="ghost"
-          className={cn(
-            "w-full justify-start p-2 h-auto font-normal text-left hover:bg-accent",
-          )}
-          style={{ paddingLeft: `${level * 16 + 12}px` }}
-          onClick={() => {
-            if (item.type === 'directory') {
-              toggleDirectory(item.path);
-            } else if (isImageFile(item.name)) {
-              // Open image in viewer
-              setSelectedImage({
-                name: item.name,
-                path: item.path,
-                projectPath: selectedProject.path,
-                projectName: selectedProject.name
-              });
-            } else {
-              // Open file in editor
-              setSelectedFile({
-                name: item.name,
-                path: item.path,
-                projectPath: selectedProject.path,
-                projectName: selectedProject.name
-              });
-            }
-          }}
-        >
-          <div className="flex items-center gap-2 min-w-0 w-full">
-            {item.type === 'directory' ? (
-              expandedDirs.has(item.path) ? (
-                <FolderOpen className="w-4 h-4 text-blue-500 flex-shrink-0" />
-              ) : (
-                <Folder className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-              )
-            ) : (
-              getFileIcon(item.name)
-            )}
-            <span className="text-sm truncate text-foreground">
-              {item.name}
-            </span>
-          </div>
-        </Button>
-        
-        {item.type === 'directory' && 
-         expandedDirs.has(item.path) && 
-         item.children && 
-         item.children.length > 0 && (
-          <div>
-            {renderFileTree(item.children, level + 1)}
-          </div>
-        )}
-      </div>
-    ));
-  };
-
-  const isImageFile = (filename) => {
-    const ext = filename.split('.').pop()?.toLowerCase();
-    const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico', 'bmp'];
-    return imageExtensions.includes(ext);
-  };
-
-  const getFileIcon = (filename) => {
-    const ext = filename.split('.').pop()?.toLowerCase();
-    
-    const codeExtensions = ['js', 'jsx', 'ts', 'tsx', 'py', 'java', 'cpp', 'c', 'php', 'rb', 'go', 'rs'];
-    const docExtensions = ['md', 'txt', 'doc', 'pdf'];
-    const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico', 'bmp'];
-    
-    if (codeExtensions.includes(ext)) {
-      return <FileCode className="w-4 h-4 text-green-500 flex-shrink-0" />;
-    } else if (docExtensions.includes(ext)) {
-      return <FileText className="w-4 h-4 text-blue-500 flex-shrink-0" />;
-    } else if (imageExtensions.includes(ext)) {
-      return <File className="w-4 h-4 text-purple-500 flex-shrink-0" />;
-    } else {
-      return <File className="w-4 h-4 text-muted-foreground flex-shrink-0" />;
-    }
-  };
-
-  // Render detailed view with table-like layout
-  const renderDetailedView = (items, level = 0) => {
-    return items.map((item) => (
-      <div key={item.path} className="select-none">
-        <div
-          className={cn(
-            "grid grid-cols-12 gap-2 p-2 hover:bg-accent cursor-pointer items-center",
-          )}
-          style={{ paddingLeft: `${level * 16 + 12}px` }}
-          onClick={() => {
-            if (item.type === 'directory') {
-              toggleDirectory(item.path);
-            } else if (isImageFile(item.name)) {
-              setSelectedImage({
-                name: item.name,
-                path: item.path,
-                projectPath: selectedProject.path,
-                projectName: selectedProject.name
-              });
-            } else {
-              setSelectedFile({
-                name: item.name,
-                path: item.path,
-                projectPath: selectedProject.path,
-                projectName: selectedProject.name
-              });
-            }
-          }}
-        >
-          <div className="col-span-5 flex items-center gap-2 min-w-0">
-            {item.type === 'directory' ? (
-              expandedDirs.has(item.path) ? (
-                <FolderOpen className="w-4 h-4 text-blue-500 flex-shrink-0" />
-              ) : (
-                <Folder className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-              )
-            ) : (
-              getFileIcon(item.name)
-            )}
-            <span className="text-sm truncate text-foreground">
-              {item.name}
-            </span>
-          </div>
-          <div className="col-span-2 text-sm text-muted-foreground">
-            {item.type === 'file' ? formatFileSize(item.size) : '-'}
-          </div>
-          <div className="col-span-3 text-sm text-muted-foreground">
-            {formatRelativeTime(item.modified)}
-          </div>
-          <div className="col-span-2 text-sm text-muted-foreground font-mono">
-            {item.permissionsRwx || '-'}
-          </div>
-        </div>
-        
-        {item.type === 'directory' && 
-         expandedDirs.has(item.path) && 
-         item.children && 
-         renderDetailedView(item.children, level + 1)}
-      </div>
-    ));
-  };
-
-  // Render compact view with inline details
-  const renderCompactView = (items, level = 0) => {
-    return items.map((item) => (
-      <div key={item.path} className="select-none">
-        <div
-          className={cn(
-            "flex items-center justify-between p-2 hover:bg-accent cursor-pointer",
-          )}
-          style={{ paddingLeft: `${level * 16 + 12}px` }}
-          onClick={() => {
-            if (item.type === 'directory') {
-              toggleDirectory(item.path);
-            } else if (isImageFile(item.name)) {
-              setSelectedImage({
-                name: item.name,
-                path: item.path,
-                projectPath: selectedProject.path,
-                projectName: selectedProject.name
-              });
-            } else {
-              setSelectedFile({
-                name: item.name,
-                path: item.path,
-                projectPath: selectedProject.path,
-                projectName: selectedProject.name
-              });
-            }
-          }}
-        >
-          <div className="flex items-center gap-2 min-w-0">
-            {item.type === 'directory' ? (
-              expandedDirs.has(item.path) ? (
-                <FolderOpen className="w-4 h-4 text-blue-500 flex-shrink-0" />
-              ) : (
-                <Folder className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-              )
-            ) : (
-              getFileIcon(item.name)
-            )}
-            <span className="text-sm truncate text-foreground">
-              {item.name}
-            </span>
-          </div>
-          <div className="flex items-center gap-3 text-xs text-muted-foreground">
-            {item.type === 'file' && (
-              <>
-                <span>{formatFileSize(item.size)}</span>
-                <span className="font-mono">{item.permissionsRwx}</span>
-              </>
-            )}
-          </div>
-        </div>
-        
-        {item.type === 'directory' && 
-         expandedDirs.has(item.path) && 
-         item.children && 
-         renderCompactView(item.children, level + 1)}
-      </div>
-    ));
-  };
-
-  if (loading) {
-    return (
-      <div className="h-full flex items-center justify-center">
-        <div className="text-gray-500 dark:text-gray-400">
-          {t('fileTree.loading')}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-full flex flex-col bg-card">
-      {/* Header with Search and View Mode Toggle */}
-      <div className="p-4 border-b border-border space-y-3">
-        <div className="flex items-center justify-between">
-          <h3 className="text-sm font-medium text-foreground">{t('fileTree.files')}</h3>
-          <div className="flex gap-1">
-            <Button
-              variant={viewMode === 'simple' ? 'default' : 'ghost'}
-              size="sm"
-              className="h-8 w-8 p-0"
-              onClick={() => changeViewMode('simple')}
-              title={t('fileTree.simpleView')}
-            >
-              <List className="w-4 h-4" />
-            </Button>
-            <Button
-              variant={viewMode === 'compact' ? 'default' : 'ghost'}
-              size="sm"
-              className="h-8 w-8 p-0"
-              onClick={() => changeViewMode('compact')}
-              title={t('fileTree.compactView')}
-            >
-              <Eye className="w-4 h-4" />
-            </Button>
-            <Button
-              variant={viewMode === 'detailed' ? 'default' : 'ghost'}
-              size="sm"
-              className="h-8 w-8 p-0"
-              onClick={() => changeViewMode('detailed')}
-              title={t('fileTree.detailedView')}
-            >
-              <TableProperties className="w-4 h-4" />
-            </Button>
-          </div>
-        </div>
-
-        {/* Search Bar */}
-        <div className="relative">
-          <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-          <Input
-            type="text"
-            placeholder={t('fileTree.searchPlaceholder')}
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-8 pr-8 h-8 text-sm"
-          />
-          {searchQuery && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0 hover:bg-accent"
-              onClick={() => setSearchQuery('')}
-              title={t('fileTree.clearSearch')}
-            >
-              <X className="w-3 h-3" />
-            </Button>
-          )}
-        </div>
-      </div>
-
-      {/* Column Headers for Detailed View */}
-      {viewMode === 'detailed' && filteredFiles.length > 0 && (
-        <div className="px-4 pt-2 pb-1 border-b border-border">
-          <div className="grid grid-cols-12 gap-2 px-2 text-xs font-medium text-muted-foreground">
-            <div className="col-span-5">{t('fileTree.name')}</div>
-            <div className="col-span-2">{t('fileTree.size')}</div>
-            <div className="col-span-3">{t('fileTree.modified')}</div>
-            <div className="col-span-2">{t('fileTree.permissions')}</div>
-          </div>
-        </div>
-      )}
-
-      <ScrollArea className="flex-1 p-4">
-        {files.length === 0 ? (
-          <div className="text-center py-8">
-            <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-3">
-              <Folder className="w-6 h-6 text-muted-foreground" />
-            </div>
-            <h4 className="font-medium text-foreground mb-1">{t('fileTree.noFilesFound')}</h4>
-            <p className="text-sm text-muted-foreground">
-              {t('fileTree.checkProjectPath')}
-            </p>
-          </div>
-        ) : filteredFiles.length === 0 && searchQuery ? (
-          <div className="text-center py-8">
-            <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-3">
-              <Search className="w-6 h-6 text-muted-foreground" />
-            </div>
-            <h4 className="font-medium text-foreground mb-1">{t('fileTree.noMatchesFound')}</h4>
-            <p className="text-sm text-muted-foreground">
-              {t('fileTree.tryDifferentSearch')}
-            </p>
-          </div>
-        ) : (
-          <div className={viewMode === 'detailed' ? '' : 'space-y-1'}>
-            {viewMode === 'simple' && renderFileTree(filteredFiles)}
-            {viewMode === 'compact' && renderCompactView(filteredFiles)}
-            {viewMode === 'detailed' && renderDetailedView(filteredFiles)}
-          </div>
-        )}
-      </ScrollArea>
-      
-      {/* Code Editor Modal */}
-      {selectedFile && (
-        <CodeEditor
-          file={selectedFile}
-          onClose={() => setSelectedFile(null)}
-          projectPath={selectedFile.projectPath}
-        />
-      )}
-      
-      {/* Image Viewer Modal */}
-      {selectedImage && (
-        <ImageViewer
-          file={selectedImage}
-          onClose={() => setSelectedImage(null)}
-        />
-      )}
-    </div>
-  );
-}
-
-export default FileTree;
--- a/src/components/GitPanel.jsx
+++ b/src/components/GitPanel.jsx
--- a/src/components/GitSettings.jsx
+++ b/src/components/GitSettings.jsx
@@ -1,131 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { GitBranch, Check } from 'lucide-react';
-import { authenticatedFetch } from '../utils/api';
-import { useTranslation } from 'react-i18next';
-
-function GitSettings() {
-  const { t } = useTranslation('settings');
-  const [gitName, setGitName] = useState('');
-  const [gitEmail, setGitEmail] = useState('');
-  const [gitConfigLoading, setGitConfigLoading] = useState(false);
-  const [gitConfigSaving, setGitConfigSaving] = useState(false);
-  const [saveStatus, setSaveStatus] = useState(null);
-
-  useEffect(() => {
-    loadGitConfig();
-  }, []);
-
-  const loadGitConfig = async () => {
-    try {
-      setGitConfigLoading(true);
-      const response = await authenticatedFetch('/api/user/git-config');
-      if (response.ok) {
-        const data = await response.json();
-        setGitName(data.gitName || '');
-        setGitEmail(data.gitEmail || '');
-      }
-    } catch (error) {
-      console.error('Error loading git config:', error);
-    } finally {
-      setGitConfigLoading(false);
-    }
-  };
-
-  const saveGitConfig = async () => {
-    try {
-      setGitConfigSaving(true);
-      const response = await authenticatedFetch('/api/user/git-config', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ gitName, gitEmail })
-      });
-
-      if (response.ok) {
-        setSaveStatus('success');
-        setTimeout(() => setSaveStatus(null), 3000);
-      } else {
-        const data = await response.json();
-        setSaveStatus('error');
-        console.error('Failed to save git config:', data.error);
-      }
-    } catch (error) {
-      console.error('Error saving git config:', error);
-      setSaveStatus('error');
-    } finally {
-      setGitConfigSaving(false);
-    }
-  };
-
-  return (
-    <div className="space-y-8">
-      <div>
-        <div className="flex items-center gap-2 mb-4">
-          <GitBranch className="h-5 w-5" />
-          <h3 className="text-lg font-semibold">{t('git.title')}</h3>
-        </div>
-
-        <p className="text-sm text-muted-foreground mb-4">
-          {t('git.description')}
-        </p>
-
-        <div className="p-4 border rounded-lg bg-card space-y-3">
-          <div>
-            <label htmlFor="settings-git-name" className="block text-sm font-medium text-foreground mb-2">
-              {t('git.name.label')}
-            </label>
-            <Input
-              id="settings-git-name"
-              type="text"
-              value={gitName}
-              onChange={(e) => setGitName(e.target.value)}
-              placeholder="John Doe"
-              disabled={gitConfigLoading}
-              className="w-full"
-            />
-            <p className="mt-1 text-xs text-muted-foreground">
-              {t('git.name.help')}
-            </p>
-          </div>
-
-          <div>
-            <label htmlFor="settings-git-email" className="block text-sm font-medium text-foreground mb-2">
-              {t('git.email.label')}
-            </label>
-            <Input
-              id="settings-git-email"
-              type="email"
-              value={gitEmail}
-              onChange={(e) => setGitEmail(e.target.value)}
-              placeholder="john@example.com"
-              disabled={gitConfigLoading}
-              className="w-full"
-            />
-            <p className="mt-1 text-xs text-muted-foreground">
-              {t('git.email.help')}
-            </p>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <Button
-              onClick={saveGitConfig}
-              disabled={gitConfigSaving || !gitName || !gitEmail}
-            >
-              {gitConfigSaving ? t('git.actions.saving') : t('git.actions.save')}
-            </Button>
-
-            {saveStatus === 'success' && (
-              <div className="text-sm text-green-600 dark:text-green-400 flex items-center gap-2">
-                <Check className="w-4 h-4" />
-                {t('git.status.success')}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default GitSettings;
--- a/src/components/LoginModal.jsx
+++ b/src/components/LoginModal.jsx
@@ -1,5 +1,6 @@
 import { X } from 'lucide-react';
-import StandaloneShell from './StandaloneShell';
+import StandaloneShell from './standalone-shell/view/StandaloneShell';
+import { IS_PLATFORM } from '../constants/config';

 /**
 * Reusable login modal component for Claude, Cursor, and Codex CLI authentication
@@ -20,24 +21,23 @@ function LoginModal({
  project,
  onComplete,
  customCommand,
-  isAuthenticated = false
+  isAuthenticated = false,
+  isOnboarding = false
 }) {
  if (!isOpen) return null;

  const getCommand = () => {
    if (customCommand) return customCommand;

-    const isPlatform = import.meta.env.VITE_IS_PLATFORM === 'true';
-
    switch (provider) {
      case 'claude':
-        return isAuthenticated ? 'claude setup-token --dangerously-skip-permissions' : 'claude /exit --dangerously-skip-permissions --no-session-persistence';
+        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 isPlatform ? 'codex login --device-auth' : 'codex login';
+        return IS_PLATFORM ? 'codex login --device-auth' : 'codex login';
      default:
-        return isAuthenticated ? 'claude setup-token --dangerously-skip-permissions' : 'claude /exit --dangerously-skip-permissions --no-session-persistence';
+        return isAuthenticated ? 'claude setup-token --dangerously-skip-permissions' : isOnboarding ? 'claude /exit --dangerously-skip-permissions' : 'claude /login --dangerously-skip-permissions';
    }
  };

@@ -58,9 +58,7 @@ function LoginModal({
    if (onComplete) {
      onComplete(exitCode);
    }
-    if (exitCode === 0) {
-      onClose();
-    }
+    // Keep modal open so users can read login output and close explicitly.
  };

  return (
--- a/src/components/MainContent.jsx
+++ b/src/components/MainContent.jsx
@@ -1,686 +0,0 @@
-/*
- * MainContent.jsx - Main Content Area with Session Protection Props Passthrough
- * 
- * SESSION PROTECTION PASSTHROUGH:
- * ===============================
- * 
- * This component serves as a passthrough layer for Session Protection functions:
- * - Receives session management functions from App.jsx
- * - Passes them down to ChatInterface.jsx
- * 
- * No session protection logic is implemented here - it's purely a props bridge.
- */
-
-import React, { useState, useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import ChatInterface from './ChatInterface';
-import FileTree from './FileTree';
-import CodeEditor from './CodeEditor';
-import StandaloneShell from './StandaloneShell';
-import GitPanel from './GitPanel';
-import ErrorBoundary from './ErrorBoundary';
-import ClaudeLogo from './ClaudeLogo';
-import CursorLogo from './CursorLogo';
-import TaskList from './TaskList';
-import TaskDetail from './TaskDetail';
-import PRDEditor from './PRDEditor';
-import Tooltip from './Tooltip';
-import { useTaskMaster } from '../contexts/TaskMasterContext';
-import { useTasksSettings } from '../contexts/TasksSettingsContext';
-import { api } from '../utils/api';
-
-function MainContent({
-  selectedProject,
-  selectedSession,
-  activeTab,
-  setActiveTab,
-  ws,
-  sendMessage,
-  messages,
-  isMobile,
-  isPWA,
-  onMenuClick,
-  isLoading,
-  onInputFocusChange,
-  // Session Protection Props: Functions passed down from App.jsx to manage active session state
-  // These functions control when project updates are paused during active conversations
-  onSessionActive,        // Mark session as active when user sends message
-  onSessionInactive,      // Mark session as inactive when conversation completes/aborts
-  onSessionProcessing,    // Mark session as processing (thinking/working)
-  onSessionNotProcessing, // Mark session as not processing (finished thinking)
-  processingSessions,     // Set of session IDs currently processing
-  onReplaceTemporarySession, // Replace temporary session ID with real session ID from WebSocket
-  onNavigateToSession,    // Navigate to a specific session (for Claude CLI session duplication workaround)
-  onShowSettings,         // Show tools settings panel
-  autoExpandTools,        // Auto-expand tool accordions
-  showRawParameters,      // Show raw parameters in tool accordions
-  showThinking,           // Show thinking/reasoning sections
-  autoScrollToBottom,     // Auto-scroll to bottom when new messages arrive
-  sendByCtrlEnter,        // Send by Ctrl+Enter mode for East Asian language input
-  externalMessageUpdate   // Trigger for external CLI updates to current session
-}) {
-  const { t } = useTranslation();
-  const [editingFile, setEditingFile] = useState(null);
-  const [selectedTask, setSelectedTask] = useState(null);
-  const [showTaskDetail, setShowTaskDetail] = useState(false);
-  const [editorWidth, setEditorWidth] = useState(600);
-  const [isResizing, setIsResizing] = useState(false);
-  const [editorExpanded, setEditorExpanded] = useState(false);
-  const resizeRef = useRef(null);
-  
-  // PRD Editor state
-  const [showPRDEditor, setShowPRDEditor] = useState(false);
-  const [selectedPRD, setSelectedPRD] = useState(null);
-  const [existingPRDs, setExistingPRDs] = useState([]);
-  const [prdNotification, setPRDNotification] = useState(null);
-  
-  // TaskMaster context
-  const { tasks, currentProject, refreshTasks, setCurrentProject } = useTaskMaster();
-  const { tasksEnabled, isTaskMasterInstalled, isTaskMasterReady } = useTasksSettings();
-  
-  // Only show tasks tab if TaskMaster is installed and enabled
-  const shouldShowTasksTab = tasksEnabled && isTaskMasterInstalled;
-
-  // Sync selectedProject with TaskMaster context
-  useEffect(() => {
-    if (selectedProject && selectedProject !== currentProject) {
-      setCurrentProject(selectedProject);
-    }
-  }, [selectedProject, currentProject, setCurrentProject]);
-
-  // Switch away from tasks tab when tasks are disabled or TaskMaster is not installed
-  useEffect(() => {
-    if (!shouldShowTasksTab && activeTab === 'tasks') {
-      setActiveTab('chat');
-    }
-  }, [shouldShowTasksTab, activeTab, setActiveTab]);
-
-  // Load existing PRDs when current project changes
-  useEffect(() => {
-    const loadExistingPRDs = async () => {
-      if (!currentProject?.name) {
-        setExistingPRDs([]);
-        return;
-      }
-      
-      try {
-        const response = await api.get(`/taskmaster/prd/${encodeURIComponent(currentProject.name)}`);
-        if (response.ok) {
-          const data = await response.json();
-          setExistingPRDs(data.prdFiles || []);
-        } else {
-          setExistingPRDs([]);
-        }
-      } catch (error) {
-        console.error('Failed to load existing PRDs:', error);
-        setExistingPRDs([]);
-      }
-    };
-
-    loadExistingPRDs();
-  }, [currentProject?.name]);
-
-  const handleFileOpen = (filePath, diffInfo = null) => {
-    // Create a file object that CodeEditor expects
-    const file = {
-      name: filePath.split('/').pop(),
-      path: filePath,
-      projectName: selectedProject?.name,
-      diffInfo: diffInfo // Pass along diff information if available
-    };
-    setEditingFile(file);
-  };
-
-  const handleCloseEditor = () => {
-    setEditingFile(null);
-    setEditorExpanded(false);
-  };
-
-  const handleToggleEditorExpand = () => {
-    setEditorExpanded(!editorExpanded);
-  };
-
-  const handleTaskClick = (task) => {
-    // If task is just an ID (from dependency click), find the full task object
-    if (typeof task === 'object' && task.id && !task.title) {
-      const fullTask = tasks?.find(t => t.id === task.id);
-      if (fullTask) {
-        setSelectedTask(fullTask);
-        setShowTaskDetail(true);
-      }
-    } else {
-      setSelectedTask(task);
-      setShowTaskDetail(true);
-    }
-  };
-
-  const handleTaskDetailClose = () => {
-    setShowTaskDetail(false);
-    setSelectedTask(null);
-  };
-
-  const handleTaskStatusChange = (taskId, newStatus) => {
-    // This would integrate with TaskMaster API to update task status
-    console.log('Update task status:', taskId, newStatus);
-    refreshTasks?.();
-  };
-
-  // Handle resize functionality
-  const handleMouseDown = (e) => {
-    if (isMobile) return; // Disable resize on mobile
-    setIsResizing(true);
-    e.preventDefault();
-  };
-
-  useEffect(() => {
-    const handleMouseMove = (e) => {
-      if (!isResizing) return;
-
-      const container = resizeRef.current?.parentElement;
-      if (!container) return;
-
-      const containerRect = container.getBoundingClientRect();
-      const newWidth = containerRect.right - e.clientX;
-
-      // Min width: 300px, Max width: 80% of container
-      const minWidth = 300;
-      const maxWidth = containerRect.width * 0.8;
-
-      if (newWidth >= minWidth && newWidth <= maxWidth) {
-        setEditorWidth(newWidth);
-      }
-    };
-
-    const handleMouseUp = () => {
-      setIsResizing(false);
-    };
-
-    if (isResizing) {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
-      document.body.style.cursor = 'col-resize';
-      document.body.style.userSelect = 'none';
-    }
-
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-    };
-  }, [isResizing]);
-
-  if (isLoading) {
-    return (
-      <div className="h-full flex flex-col">
-        {/* Header with menu button for mobile */}
-        {isMobile && (
-          <div
-            className="bg-background border-b border-border p-2 sm:p-3 pwa-header-safe flex-shrink-0"
-          >
-            <button
-              onClick={onMenuClick}
-              className="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-700 pwa-menu-button"
-            >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-              </svg>
-            </button>
-          </div>
-        )}
-        <div className="flex-1 flex items-center justify-center">
-          <div className="text-center text-gray-500 dark:text-gray-400">
-            <div className="w-12 h-12 mx-auto mb-4">
-              <div 
-                className="w-full h-full rounded-full border-4 border-gray-200 border-t-blue-500" 
-                style={{ 
-                  animation: 'spin 1s linear infinite',
-                  WebkitAnimation: 'spin 1s linear infinite',
-                  MozAnimation: 'spin 1s linear infinite'
-                }} 
-              />
-            </div>
-            <h2 className="text-xl font-semibold mb-2">{t('mainContent.loading')}</h2>
-            <p>{t('mainContent.settingUpWorkspace')}</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (!selectedProject) {
-    return (
-      <div className="h-full flex flex-col">
-        {/* Header with menu button for mobile */}
-        {isMobile && (
-          <div
-            className="bg-background border-b border-border p-2 sm:p-3 pwa-header-safe flex-shrink-0"
-          >
-            <button
-              onClick={onMenuClick}
-              className="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-700 pwa-menu-button"
-            >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-              </svg>
-            </button>
-          </div>
-        )}
-        <div className="flex-1 flex items-center justify-center">
-          <div className="text-center text-gray-500 dark:text-gray-400 max-w-md mx-auto px-6">
-            <div className="w-16 h-16 mx-auto mb-6 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-              <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-5l-2-2H5a2 2 0 00-2 2z" />
-              </svg>
-            </div>
-            <h2 className="text-2xl font-semibold mb-3 text-gray-900 dark:text-white">{t('mainContent.chooseProject')}</h2>
-            <p className="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
-              {t('mainContent.selectProjectDescription')}
-            </p>
-            <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
-              <p className="text-sm text-blue-700 dark:text-blue-300">
-                💡 <strong>{t('mainContent.tip')}:</strong> {isMobile ? t('mainContent.createProjectMobile') : t('mainContent.createProjectDesktop')}
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-full flex flex-col">
-      {/* Header with tabs */}
-      <div
-        className="bg-background border-b border-border p-2 sm:p-3 pwa-header-safe flex-shrink-0"
-      >
-        <div className="flex items-center justify-between relative">
-          <div className="flex items-center space-x-2 min-w-0 flex-1">
-            {isMobile && (
-              <button
-                onClick={onMenuClick}
-                onTouchStart={(e) => {
-                  e.preventDefault();
-                  onMenuClick();
-                }}
-                className="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-700 touch-manipulation active:scale-95 pwa-menu-button flex-shrink-0"
-              >
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-                </svg>
-              </button>
-            )}
-            <div className="min-w-0 flex items-center gap-2 flex-1 overflow-x-auto scrollbar-hide">
-              {activeTab === 'chat' && selectedSession && (
-                <div className="w-5 h-5 flex-shrink-0 flex items-center justify-center">
-                  {selectedSession.__provider === 'cursor' ? (
-                    <CursorLogo className="w-4 h-4" />
-                  ) : (
-                    <ClaudeLogo className="w-4 h-4" />
-                  )}
-                </div>
-              )}
-              <div className="min-w-0 flex-1">
-                {activeTab === 'chat' && selectedSession ? (
-                  <div className="min-w-0">
-                    <h2 className="text-sm sm:text-base font-semibold text-gray-900 dark:text-white whitespace-nowrap overflow-x-auto scrollbar-hide">
-                      {selectedSession.__provider === 'cursor' ? (selectedSession.name || 'Untitled Session') : (selectedSession.summary || 'New Session')}
-                    </h2>
-                    <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
-                      {selectedProject.displayName}
-                    </div>
-                  </div>
-                ) : activeTab === 'chat' && !selectedSession ? (
-                  <div className="min-w-0">
-                    <h2 className="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
-                      {t('mainContent.newSession')}
-                    </h2>
-                    <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
-                      {selectedProject.displayName}
-                    </div>
-                  </div>
-                ) : (
-                  <div className="min-w-0">
-                    <h2 className="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
-                      {activeTab === 'files' ? t('mainContent.projectFiles') :
-                       activeTab === 'git' ? t('tabs.git') :
-                       (activeTab === 'tasks' && shouldShowTasksTab) ? 'TaskMaster' :
-                       'Project'}
-                    </h2>
-                    <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
-                      {selectedProject.displayName}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-          
-          {/* Modern Tab Navigation - Right Side */}
-          <div className="flex-shrink-0 hidden sm:block">
-            <div className="relative flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1">
-              <Tooltip content={t('tabs.chat')} position="bottom">
-                <button
-                  onClick={() => setActiveTab('chat')}
-                  className={`relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md ${
-                    activeTab === 'chat'
-                      ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
-                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-700'
-                  }`}
-                >
-                  <span className="flex items-center gap-1 sm:gap-1.5">
-                    <svg className="w-3 sm:w-3.5 h-3 sm:h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-                    </svg>
-                    <span className="hidden md:hidden lg:inline">{t('tabs.chat')}</span>
-                  </span>
-                </button>
-              </Tooltip>
-              <Tooltip content={t('tabs.shell')} position="bottom">
-                <button
-                  onClick={() => setActiveTab('shell')}
-                  className={`relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-all duration-200 ${
-                    activeTab === 'shell'
-                      ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
-                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-700'
-                  }`}
-                >
-                  <span className="flex items-center gap-1 sm:gap-1.5">
-                    <svg className="w-3 sm:w-3.5 h-3 sm:h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z" />
-                    </svg>
-                    <span className="hidden md:hidden lg:inline">{t('tabs.shell')}</span>
-                  </span>
-                </button>
-              </Tooltip>
-              <Tooltip content={t('tabs.files')} position="bottom">
-                <button
-                  onClick={() => setActiveTab('files')}
-                  className={`relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-all duration-200 ${
-                    activeTab === 'files'
-                      ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
-                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-700'
-                  }`}
-                >
-                  <span className="flex items-center gap-1 sm:gap-1.5">
-                    <svg className="w-3 sm:w-3.5 h-3 sm:h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-5l-2-2H5a2 2 0 00-2 2z" />
-                    </svg>
-                    <span className="hidden md:hidden lg:inline">{t('tabs.files')}</span>
-                  </span>
-                </button>
-              </Tooltip>
-              <Tooltip content={t('tabs.git')} position="bottom">
-                <button
-                  onClick={() => setActiveTab('git')}
-                  className={`relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-all duration-200 ${
-                    activeTab === 'git'
-                      ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
-                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-700'
-                  }`}
-                >
-                  <span className="flex items-center gap-1 sm:gap-1.5">
-                    <svg className="w-3 sm:w-3.5 h-3 sm:h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                    </svg>
-                    <span className="hidden md:hidden lg:inline">{t('tabs.git')}</span>
-                  </span>
-                </button>
-              </Tooltip>
-              {shouldShowTasksTab && (
-                <Tooltip content={t('tabs.tasks')} position="bottom">
-                  <button
-                    onClick={() => setActiveTab('tasks')}
-                    className={`relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-all duration-200 ${
-                      activeTab === 'tasks'
-                        ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
-                        : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-700'
-                    }`}
-                  >
-                    <span className="flex items-center gap-1 sm:gap-1.5">
-                      <svg className="w-3 sm:w-3.5 h-3 sm:h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
-                      </svg>
-                      <span className="hidden md:hidden lg:inline">{t('tabs.tasks')}</span>
-                    </span>
-                  </button>
-                </Tooltip>
-              )}
-               {/* <button
-                onClick={() => setActiveTab('preview')}
-                className={`relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-all duration-200 ${
-                  activeTab === 'preview'
-                    ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
-                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-700'
-                }`}
-              > 
-                <span className="flex items-center gap-1 sm:gap-1.5">
-                  <svg className="w-3 sm:w-3.5 h-3 sm:h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
-                  </svg>
-                  <span className="hidden sm:inline">Preview</span>
-                </span>
-              </button> */}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Content Area with Right Sidebar */}
-      <div className="flex-1 flex min-h-0 overflow-hidden">
-        {/* Main Content */}
-        <div className={`flex-1 flex flex-col min-h-0 overflow-hidden ${editingFile ? 'mr-0' : ''} ${editorExpanded ? 'hidden' : ''}`}>
-          <div className={`h-full ${activeTab === 'chat' ? 'block' : 'hidden'}`}>
-            <ErrorBoundary showDetails={true}>
-              <ChatInterface
-              selectedProject={selectedProject}
-              selectedSession={selectedSession}
-              ws={ws}
-              sendMessage={sendMessage}
-              messages={messages}
-              onFileOpen={handleFileOpen}
-              onInputFocusChange={onInputFocusChange}
-              onSessionActive={onSessionActive}
-              onSessionInactive={onSessionInactive}
-              onSessionProcessing={onSessionProcessing}
-              onSessionNotProcessing={onSessionNotProcessing}
-              processingSessions={processingSessions}
-              onReplaceTemporarySession={onReplaceTemporarySession}
-              onNavigateToSession={onNavigateToSession}
-              onShowSettings={onShowSettings}
-              autoExpandTools={autoExpandTools}
-              showRawParameters={showRawParameters}
-              showThinking={showThinking}
-              autoScrollToBottom={autoScrollToBottom}
-              sendByCtrlEnter={sendByCtrlEnter}
-              externalMessageUpdate={externalMessageUpdate}
-              onShowAllTasks={tasksEnabled ? () => setActiveTab('tasks') : null}
-            />
-          </ErrorBoundary>
-        </div>
-        {activeTab === 'files' && (
-          <div className="h-full overflow-hidden">
-            <FileTree selectedProject={selectedProject} />
-          </div>
-        )}
-        {activeTab === 'shell' && (
-          <div className="h-full w-full overflow-hidden">
-            <StandaloneShell
-              project={selectedProject}
-              session={selectedSession}
-              showHeader={false}
-            />
-          </div>
-        )}
-        {activeTab === 'git' && (
-          <div className="h-full overflow-hidden">
-            <GitPanel selectedProject={selectedProject} isMobile={isMobile} onFileOpen={handleFileOpen} />
-          </div>
-        )}
-        {shouldShowTasksTab && (
-          <div className={`h-full ${activeTab === 'tasks' ? 'block' : 'hidden'}`}>
-            <div className="h-full flex flex-col overflow-hidden">
-              <TaskList
-                tasks={tasks || []}
-                onTaskClick={handleTaskClick}
-                showParentTasks={true}
-                className="flex-1 overflow-y-auto p-4"
-                currentProject={currentProject}
-                onTaskCreated={refreshTasks}
-                onShowPRDEditor={(prd = null) => {
-                  setSelectedPRD(prd);
-                  setShowPRDEditor(true);
-                }}
-                existingPRDs={existingPRDs}
-                onRefreshPRDs={(showNotification = false) => {
-                  // Reload existing PRDs
-                  if (currentProject?.name) {
-                    api.get(`/taskmaster/prd/${encodeURIComponent(currentProject.name)}`)
-                      .then(response => response.ok ? response.json() : Promise.reject())
-                      .then(data => {
-                        setExistingPRDs(data.prdFiles || []);
-                        if (showNotification) {
-                          setPRDNotification('PRD saved successfully!');
-                          setTimeout(() => setPRDNotification(null), 3000);
-                        }
-                      })
-                      .catch(error => console.error('Failed to refresh PRDs:', error));
-                  }
-                }}
-              />
-            </div>
-          </div>
-        )}
-        <div className={`h-full overflow-hidden ${activeTab === 'preview' ? 'block' : 'hidden'}`}>
-          {/* <LivePreviewPanel
-            selectedProject={selectedProject}
-            serverStatus={serverStatus}
-            serverUrl={serverUrl}
-            availableScripts={availableScripts}
-            onStartServer={(script) => {
-              sendMessage({
-                type: 'server:start',
-                projectPath: selectedProject?.fullPath,
-                script: script
-              });
-            }}
-            onStopServer={() => {
-              sendMessage({
-                type: 'server:stop',
-                projectPath: selectedProject?.fullPath
-              });
-            }}
-            onScriptSelect={setCurrentScript}
-            currentScript={currentScript}
-            isMobile={isMobile}
-            serverLogs={serverLogs}
-            onClearLogs={() => setServerLogs([])}
-          /> */}
-        </div>
-        </div>
-
-        {/* Code Editor Right Sidebar - Desktop only, Mobile uses modal */}
-        {editingFile && !isMobile && (
-          <>
-            {/* Resize Handle - Hidden when expanded */}
-            {!editorExpanded && (
-              <div
-                ref={resizeRef}
-                onMouseDown={handleMouseDown}
-                className="flex-shrink-0 w-1 bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 dark:hover:bg-blue-600 cursor-col-resize transition-colors relative group"
-                title="Drag to resize"
-              >
-                {/* Visual indicator on hover */}
-                <div className="absolute inset-y-0 left-1/2 -translate-x-1/2 w-1 bg-blue-500 dark:bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity" />
-              </div>
-            )}
-
-            {/* Editor Sidebar */}
-            <div
-              className={`flex-shrink-0 border-l border-gray-200 dark:border-gray-700 h-full overflow-hidden ${editorExpanded ? 'flex-1' : ''}`}
-              style={editorExpanded ? {} : { width: `${editorWidth}px` }}
-            >
-              <CodeEditor
-                file={editingFile}
-                onClose={handleCloseEditor}
-                projectPath={selectedProject?.path}
-                isSidebar={true}
-                isExpanded={editorExpanded}
-                onToggleExpand={handleToggleEditorExpand}
-              />
-            </div>
-          </>
-        )}
-      </div>
-
-      {/* Code Editor Modal for Mobile */}
-      {editingFile && isMobile && (
-        <CodeEditor
-          file={editingFile}
-          onClose={handleCloseEditor}
-          projectPath={selectedProject?.path}
-          isSidebar={false}
-        />
-      )}
-
-      {/* Task Detail Modal */}
-      {shouldShowTasksTab && showTaskDetail && selectedTask && (
-        <TaskDetail
-          task={selectedTask}
-          isOpen={showTaskDetail}
-          onClose={handleTaskDetailClose}
-          onStatusChange={handleTaskStatusChange}
-          onTaskClick={handleTaskClick}
-        />
-      )}
-      {/* PRD Editor Modal */}
-      {showPRDEditor && (
-        <PRDEditor
-          project={currentProject}
-          projectPath={currentProject?.fullPath || currentProject?.path}
-          onClose={() => {
-            setShowPRDEditor(false);
-            setSelectedPRD(null);
-          }}
-          isNewFile={!selectedPRD?.isExisting}
-          file={{ 
-            name: selectedPRD?.name || 'prd.txt',
-            content: selectedPRD?.content || ''
-          }}
-          onSave={async () => {
-            setShowPRDEditor(false);
-            setSelectedPRD(null);
-            
-            // Reload existing PRDs with notification
-            try {
-              const response = await api.get(`/taskmaster/prd/${encodeURIComponent(currentProject.name)}`);
-              if (response.ok) {
-                const data = await response.json();
-                setExistingPRDs(data.prdFiles || []);
-                setPRDNotification('PRD saved successfully!');
-                setTimeout(() => setPRDNotification(null), 3000);
-              }
-            } catch (error) {
-              console.error('Failed to refresh PRDs:', error);
-            }
-            
-            refreshTasks?.();
-          }}
-        />
-      )}
-      {/* PRD Notification */}
-      {prdNotification && (
-        <div className="fixed bottom-4 right-4 z-50 animate-in slide-in-from-bottom-2 duration-300">
-          <div className="bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3">
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-            </svg>
-            <span className="font-medium">{prdNotification}</span>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default React.memo(MainContent);
--- a/src/components/MicButton.jsx
+++ b/src/components/MicButton.jsx
@@ -1,272 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Mic, Loader2, Brain } from 'lucide-react';
-import { transcribeWithWhisper } from '../utils/whisper';
-
-export function MicButton({ onTranscript, className = '' }) {
-  const [state, setState] = useState('idle'); // idle, recording, transcribing, processing
-  const [error, setError] = useState(null);
-  const [isSupported, setIsSupported] = useState(true);
-  
-  const mediaRecorderRef = useRef(null);
-  const streamRef = useRef(null);
-  const chunksRef = useRef([]);
-  const lastTapRef = useRef(0);
-  
-  // Check microphone support on mount
-  useEffect(() => {
-    const checkSupport = () => {
-      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-        setIsSupported(false);
-        setError('Microphone not supported. Please use HTTPS or a modern browser.');
-        return;
-      }
-      
-      // Additional check for secure context
-      if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
-        setIsSupported(false);
-        setError('Microphone requires HTTPS. Please use a secure connection.');
-        return;
-      }
-      
-      setIsSupported(true);
-      setError(null);
-    };
-    
-    checkSupport();
-  }, []);
-
-  // Start recording
-  const startRecording = async () => {
-    try {
-      console.log('Starting recording...');
-      setError(null);
-      chunksRef.current = [];
-
-      // Check if getUserMedia is available
-      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-        throw new Error('Microphone access not available. Please use HTTPS or a supported browser.');
-      }
-
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      streamRef.current = stream;
-
-      const mimeType = MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm' : 'audio/mp4';
-      const recorder = new MediaRecorder(stream, { mimeType });
-      mediaRecorderRef.current = recorder;
-
-      recorder.ondataavailable = (e) => {
-        if (e.data.size > 0) {
-          chunksRef.current.push(e.data);
-        }
-      };
-
-      recorder.onstop = async () => {
-        console.log('Recording stopped, creating blob...');
-        const blob = new Blob(chunksRef.current, { type: mimeType });
-        
-        // Clean up stream
-        if (streamRef.current) {
-          streamRef.current.getTracks().forEach(track => track.stop());
-          streamRef.current = null;
-        }
-
-        // Start transcribing
-        setState('transcribing');
-        
-        // Check if we're in an enhancement mode
-        const whisperMode = window.localStorage.getItem('whisperMode') || 'default';
-        const isEnhancementMode = whisperMode === 'prompt' || whisperMode === 'vibe' || whisperMode === 'instructions' || whisperMode === 'architect';
-        
-        // Set up a timer to switch to processing state for enhancement modes
-        let processingTimer;
-        if (isEnhancementMode) {
-          processingTimer = setTimeout(() => {
-            setState('processing');
-          }, 2000); // Switch to processing after 2 seconds
-        }
-        
-        try {
-          const text = await transcribeWithWhisper(blob);
-          if (text && onTranscript) {
-            onTranscript(text);
-          }
-        } catch (err) {
-          console.error('Transcription error:', err);
-          setError(err.message);
-        } finally {
-          if (processingTimer) {
-            clearTimeout(processingTimer);
-          }
-          setState('idle');
-        }
-      };
-
-      recorder.start();
-      setState('recording');
-      console.log('Recording started successfully');
-    } catch (err) {
-      console.error('Failed to start recording:', err);
-      
-      // Provide specific error messages based on error type
-      let errorMessage = 'Microphone access failed';
-      
-      if (err.name === 'NotAllowedError') {
-        errorMessage = 'Microphone access denied. Please allow microphone permissions.';
-      } else if (err.name === 'NotFoundError') {
-        errorMessage = 'No microphone found. Please check your audio devices.';
-      } else if (err.name === 'NotSupportedError') {
-        errorMessage = 'Microphone not supported by this browser.';
-      } else if (err.name === 'NotReadableError') {
-        errorMessage = 'Microphone is being used by another application.';
-      } else if (err.message.includes('HTTPS')) {
-        errorMessage = err.message;
-      }
-      
-      setError(errorMessage);
-      setState('idle');
-    }
-  };
-
-  // Stop recording
-  const stopRecording = () => {
-    console.log('Stopping recording...');
-    if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') {
-      mediaRecorderRef.current.stop();
-      // Don't set state here - let the onstop handler do it
-    } else {
-      // If recorder isn't in recording state, force cleanup
-      console.log('Recorder not in recording state, forcing cleanup');
-      if (streamRef.current) {
-        streamRef.current.getTracks().forEach(track => track.stop());
-        streamRef.current = null;
-      }
-      setState('idle');
-    }
-  };
-
-  // Handle button click
-  const handleClick = (e) => {
-    // Prevent double firing on mobile
-    if (e) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-    
-    // Don't proceed if microphone is not supported
-    if (!isSupported) {
-      return;
-    }
-    
-    // Debounce for mobile double-tap issue
-    const now = Date.now();
-    if (now - lastTapRef.current < 300) {
-      console.log('Ignoring rapid tap');
-      return;
-    }
-    lastTapRef.current = now;
-    
-    console.log('Button clicked, current state:', state);
-    
-    if (state === 'idle') {
-      startRecording();
-    } else if (state === 'recording') {
-      stopRecording();
-    }
-    // Do nothing if transcribing or processing
-  };
-
-  // Clean up on unmount
-  useEffect(() => {
-    return () => {
-      if (streamRef.current) {
-        streamRef.current.getTracks().forEach(track => track.stop());
-      }
-    };
-  }, []);
-
-  // Button appearance based on state
-  const getButtonAppearance = () => {
-    if (!isSupported) {
-      return {
-        icon: <Mic className="w-5 h-5" />,
-        className: 'bg-gray-400 cursor-not-allowed',
-        disabled: true
-      };
-    }
-    
-    switch (state) {
-      case 'recording':
-        return {
-          icon: <Mic className="w-5 h-5 text-white" />,
-          className: 'bg-red-500 hover:bg-red-600 animate-pulse',
-          disabled: false
-        };
-      case 'transcribing':
-        return {
-          icon: <Loader2 className="w-5 h-5 animate-spin" />,
-          className: 'bg-blue-500 hover:bg-blue-600',
-          disabled: true
-        };
-      case 'processing':
-        return {
-          icon: <Brain className="w-5 h-5 animate-pulse" />,
-          className: 'bg-purple-500 hover:bg-purple-600',
-          disabled: true
-        };
-      default: // idle
-        return {
-          icon: <Mic className="w-5 h-5" />,
-          className: 'bg-gray-700 hover:bg-gray-600',
-          disabled: false
-        };
-    }
-  };
-
-  const { icon, className: buttonClass, disabled } = getButtonAppearance();
-
-  return (
-    <div className="relative">
-      <button
-        type="button"
-        style={{
-          backgroundColor: state === 'recording' ? '#ef4444' : 
-                          state === 'transcribing' ? '#3b82f6' : 
-                          state === 'processing' ? '#a855f7' :
-                          '#374151'
-        }}
-        className={`
-          flex items-center justify-center
-          w-12 h-12 rounded-full
-          text-white transition-all duration-200
-          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
-          dark:ring-offset-gray-800
-          touch-action-manipulation
-          ${disabled ? 'cursor-not-allowed opacity-75' : 'cursor-pointer'}
-          ${state === 'recording' ? 'animate-pulse' : ''}
-          hover:opacity-90
-          ${className}
-        `}
-        onClick={handleClick}
-        disabled={disabled}
-      >
-        {icon}
-      </button>
-      
-      {error && (
-        <div className="absolute top-full mt-2 left-1/2 transform -translate-x-1/2 
-                        bg-red-500 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10
-                        animate-fade-in">
-          {error}
-        </div>
-      )}
-      
-      {state === 'recording' && (
-        <div className="absolute -inset-1 rounded-full border-2 border-red-500 animate-ping pointer-events-none" />
-      )}
-      
-      {state === 'processing' && (
-        <div className="absolute -inset-1 rounded-full border-2 border-purple-500 animate-ping pointer-events-none" />
-      )}
-    </div>
-  );
-}
--- a/src/components/MobileNav.jsx
+++ b/src/components/MobileNav.jsx
@@ -1,74 +1,90 @@
 import React from 'react';
-import { MessageSquare, Folder, Terminal, GitBranch, Globe, CheckSquare } from 'lucide-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 } = useTasksSettings();
+  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')
    },
-    // Conditionally add tasks tab if enabled
-    ...(tasksEnabled ? [{
+    ...(shouldShowTasksTab ? [{
      id: 'tasks',
-      icon: CheckSquare,
+      icon: ClipboardCheck,
+      label: 'Tasks',
      onClick: () => setActiveTab('tasks')
    }] : [])
  ];

  return (
    <div
-      className={`fixed bottom-0 left-0 right-0 bg-background border-t border-border z-50 ios-bottom-safe transform transition-transform duration-300 ease-in-out shadow-lg ${
+      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="flex items-center justify-around py-1">
-        {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 items-center justify-center p-2 rounded-lg min-h-[40px] min-w-[40px] relative touch-manipulation ${
-                isActive
-                  ? 'text-blue-600 dark:text-blue-400'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-              }`}
-              aria-label={item.id}
-            >
-              <Icon className="w-5 h-5" />
-              {isActive && (
-                <div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-6 h-0.5 bg-blue-600 dark:bg-blue-400 rounded-full" />
-              )}
-            </button>
-          );
-        })}
+      <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;
+export default MobileNav;
--- a/src/components/NextTaskBanner.jsx
+++ b/src/components/NextTaskBanner.jsx
@@ -3,7 +3,7 @@ import { ArrowRight, List, Clock, Flag, CheckCircle, Circle, AlertCircle, Pause,
 import { cn } from '../lib/utils';
 import { useTaskMaster } from '../contexts/TaskMasterContext';
 import { api } from '../utils/api';
-import Shell from './Shell';
+import Shell from './shell/view/Shell';
 import TaskDetail from './TaskDetail';

 const NextTaskBanner = ({ onShowAllTasks, onStartTask, className = '' }) => {
--- a/src/components/Onboarding.jsx
+++ b/src/components/Onboarding.jsx
@@ -1,11 +1,10 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { ChevronRight, ChevronLeft, Check, GitBranch, User, Mail, LogIn, ExternalLink, Loader2 } from 'lucide-react';
-import ClaudeLogo from './ClaudeLogo';
-import CursorLogo from './CursorLogo';
-import CodexLogo from './CodexLogo';
+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);
@@ -15,8 +14,7 @@ const Onboarding = ({ onComplete }) => {
  const [error, setError] = useState('');

  const [activeLoginProvider, setActiveLoginProvider] = useState(null);
-  const isPlatform = import.meta.env.VITE_IS_PLATFORM === 'true';
-  const [selectedProject] = useState({ name: 'default', fullPath: isPlatform ? '/workspace' : '' });
+  const [selectedProject] = useState({ name: 'default', fullPath: IS_PLATFORM ? '/workspace' : '' });

  const [claudeAuthStatus, setClaudeAuthStatus] = useState({
    authenticated: false,
@@ -347,7 +345,7 @@ const Onboarding = ({ onComplete }) => {
                <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">
-                      <ClaudeLogo size={20} />
+                      <SessionProviderLogo provider="claude" className="w-5 h-5" />
                    </div>
                    <div>
                      <div className="font-medium text-foreground flex items-center gap-2">
@@ -380,7 +378,7 @@ const Onboarding = ({ onComplete }) => {
                <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">
-                      <CursorLogo size={20} />
+                      <SessionProviderLogo provider="cursor" className="w-5 h-5" />
                    </div>
                    <div>
                      <div className="font-medium text-foreground flex items-center gap-2">
@@ -413,7 +411,7 @@ const Onboarding = ({ onComplete }) => {
                <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">
-                      <CodexLogo className="w-5 h-5" />
+                      <SessionProviderLogo provider="codex" className="w-5 h-5" />
                    </div>
                    <div>
                      <div className="font-medium text-foreground flex items-center gap-2">
@@ -577,6 +575,7 @@ const Onboarding = ({ onComplete }) => {
          provider={activeLoginProvider}
          project={selectedProject}
          onComplete={handleLoginComplete}
+          isOnboarding={true}
        />
      )}
    </>
--- a/src/components/ProtectedRoute.jsx
+++ b/src/components/ProtectedRoute.jsx
@@ -4,6 +4,7 @@ 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">
@@ -27,7 +28,7 @@ const LoadingScreen = () => (
 const ProtectedRoute = ({ children }) => {
  const { user, isLoading, needsSetup, hasCompletedOnboarding, refreshOnboardingStatus } = useAuth();

-  if (import.meta.env.VITE_IS_PLATFORM === 'true') {
+  if (IS_PLATFORM) {
    if (isLoading) {
      return <LoadingScreen />;
    }
--- a/src/components/QuickSettingsPanel.jsx
+++ b/src/components/QuickSettingsPanel.jsx
@@ -17,31 +17,27 @@ import {
 } 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';

-const QuickSettingsPanel = ({
-  isOpen,
-  onToggle,
-  autoExpandTools,
-  onAutoExpandChange,
-  showRawParameters,
-  onShowRawParametersChange,
-  showThinking,
-  onShowThinkingChange,
-  autoScrollToBottom,
-  onAutoScrollChange,
-  sendByCtrlEnter,
-  onSendByCtrlEnterChange,
-  isMobile
-}) => {
+import { useDeviceSettings } from '../hooks/useDeviceSettings';
+
+
+const QuickSettingsPanel = () => {
  const { t } = useTranslation('settings');
-  const [localIsOpen, setLocalIsOpen] = useState(isOpen);
+  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');
@@ -66,10 +62,6 @@ const QuickSettingsPanel = ({
  const constraintsRef = useRef({ min: 10, max: 90 }); // Percentage constraints
  const dragThreshold = 5; // Pixels to move before it's considered a drag

-  useEffect(() => {
-    setLocalIsOpen(isOpen);
-  }, [isOpen]);
-
  // Save handle position to localStorage when it changes
  useEffect(() => {
    localStorage.setItem('quickSettingsHandlePosition', JSON.stringify({ y: handlePosition }));
@@ -206,9 +198,7 @@ const QuickSettingsPanel = ({
      return;
    }

-    const newState = !localIsOpen;
-    setLocalIsOpen(newState);
-    onToggle(newState);
+    setIsOpen((previous) => !previous);
  };

  return (
@@ -226,19 +216,19 @@ const QuickSettingsPanel = ({
          handleDragStart(e);
        }}
        className={`fixed ${
-          localIsOpen ? 'right-64' : 'right-0'
+          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') : localIsOpen ? t('quickSettings.dragHandle.closePanel') : t('quickSettings.dragHandle.openPanel')}
+        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" />
-        ) : localIsOpen ? (
+        ) : 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" />
@@ -248,7 +238,7 @@ const QuickSettingsPanel = ({
      {/* 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 ${
-          localIsOpen ? 'translate-x-0' : 'translate-x-full'
+          isOpen ? 'translate-x-0' : 'translate-x-full'
        } ${isMobile ? 'h-screen' : ''}`}
      >
        <div className="h-full flex flex-col">
@@ -292,7 +282,7 @@ const QuickSettingsPanel = ({
                <input
                  type="checkbox"
                  checked={autoExpandTools}
-                  onChange={(e) => onAutoExpandChange(e.target.checked)}
+                  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>
@@ -305,7 +295,7 @@ const QuickSettingsPanel = ({
                <input
                  type="checkbox"
                  checked={showRawParameters}
-                  onChange={(e) => onShowRawParametersChange(e.target.checked)}
+                  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>
@@ -318,7 +308,7 @@ const QuickSettingsPanel = ({
                <input
                  type="checkbox"
                  checked={showThinking}
-                  onChange={(e) => onShowThinkingChange(e.target.checked)}
+                  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>
@@ -335,7 +325,7 @@ const QuickSettingsPanel = ({
                <input
                  type="checkbox"
                  checked={autoScrollToBottom}
-                  onChange={(e) => onAutoScrollChange(e.target.checked)}
+                  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>
@@ -353,7 +343,7 @@ const QuickSettingsPanel = ({
                <input
                  type="checkbox"
                  checked={sendByCtrlEnter}
-                  onChange={(e) => onSendByCtrlEnterChange(e.target.checked)}
+                  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>
@@ -445,7 +435,7 @@ const QuickSettingsPanel = ({
      </div>

      {/* Backdrop */}
-      {localIsOpen && (
+      {isOpen && (
        <div
          className="fixed inset-0 bg-background/80 backdrop-blur-sm z-30 transition-opacity duration-150 ease-out"
          onClick={handleToggle}
--- a/src/components/Settings.jsx
+++ b/src/components/Settings.jsx
--- a/src/components/SetupForm.jsx
+++ b/src/components/SetupForm.jsx
@@ -1,7 +1,5 @@
 import React, { useState } from 'react';
 import { useAuth } from '../contexts/AuthContext';
-import ClaudeLogo from './ClaudeLogo';
-
 const SetupForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
@@ -48,7 +46,7 @@ const SetupForm = () => {
          {/* Logo and Title */}
          <div className="text-center">
            <div className="flex justify-center mb-4">
-              <ClaudeLogo size={64} />
+              <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">
--- a/src/components/Shell.jsx
+++ b/src/components/Shell.jsx
@@ -1,498 +0,0 @@
-import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
-import { Terminal } from '@xterm/xterm';
-import { FitAddon } from '@xterm/addon-fit';
-import { WebglAddon } from '@xterm/addon-webgl';
-import { WebLinksAddon } from '@xterm/addon-web-links';
-import '@xterm/xterm/css/xterm.css';
-import { useTranslation } from 'react-i18next';
-
-const xtermStyles = `
-  .xterm .xterm-screen {
-    outline: none !important;
-  }
-  .xterm:focus .xterm-screen {
-    outline: none !important;
-  }
-  .xterm-screen:focus {
-    outline: none !important;
-  }
-`;
-
-if (typeof document !== 'undefined') {
-  const styleSheet = document.createElement('style');
-  styleSheet.type = 'text/css';
-  styleSheet.innerText = xtermStyles;
-  document.head.appendChild(styleSheet);
-}
-
-function Shell({ selectedProject, selectedSession, initialCommand, isPlainShell = false, onProcessComplete, minimal = false, autoConnect = false }) {
-  const { t } = useTranslation('chat');
-  const terminalRef = useRef(null);
-  const terminal = useRef(null);
-  const fitAddon = useRef(null);
-  const ws = useRef(null);
-  const [isConnected, setIsConnected] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [isRestarting, setIsRestarting] = useState(false);
-  const [lastSessionId, setLastSessionId] = useState(null);
-  const [isConnecting, setIsConnecting] = useState(false);
-
-  const selectedProjectRef = useRef(selectedProject);
-  const selectedSessionRef = useRef(selectedSession);
-  const initialCommandRef = useRef(initialCommand);
-  const isPlainShellRef = useRef(isPlainShell);
-  const onProcessCompleteRef = useRef(onProcessComplete);
-
-  useEffect(() => {
-    selectedProjectRef.current = selectedProject;
-    selectedSessionRef.current = selectedSession;
-    initialCommandRef.current = initialCommand;
-    isPlainShellRef.current = isPlainShell;
-    onProcessCompleteRef.current = onProcessComplete;
-  });
-
-  const connectWebSocket = useCallback(async () => {
-    if (isConnecting || isConnected) return;
-
-    try {
-      const isPlatform = import.meta.env.VITE_IS_PLATFORM === 'true';
-      let wsUrl;
-
-      if (isPlatform) {
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        wsUrl = `${protocol}//${window.location.host}/shell`;
-      } else {
-        const token = localStorage.getItem('auth-token');
-        if (!token) {
-          console.error('No authentication token found for Shell WebSocket connection');
-          return;
-        }
-
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        wsUrl = `${protocol}//${window.location.host}/shell?token=${encodeURIComponent(token)}`;
-      }
-
-      ws.current = new WebSocket(wsUrl);
-
-      ws.current.onopen = () => {
-        setIsConnected(true);
-        setIsConnecting(false);
-
-        setTimeout(() => {
-          if (fitAddon.current && terminal.current) {
-            fitAddon.current.fit();
-
-            ws.current.send(JSON.stringify({
-              type: 'init',
-              projectPath: selectedProjectRef.current.fullPath || selectedProjectRef.current.path,
-              sessionId: isPlainShellRef.current ? null : selectedSessionRef.current?.id,
-              hasSession: isPlainShellRef.current ? false : !!selectedSessionRef.current,
-              provider: isPlainShellRef.current ? 'plain-shell' : (selectedSessionRef.current?.__provider || 'claude'),
-              cols: terminal.current.cols,
-              rows: terminal.current.rows,
-              initialCommand: initialCommandRef.current,
-              isPlainShell: isPlainShellRef.current
-            }));
-          }
-        }, 100);
-      };
-
-      ws.current.onmessage = (event) => {
-        try {
-          const data = JSON.parse(event.data);
-
-          if (data.type === 'output') {
-            let output = data.data;
-
-            if (isPlainShellRef.current && onProcessCompleteRef.current) {
-              const cleanOutput = output.replace(/\x1b\[[0-9;]*m/g, '');
-              if (cleanOutput.includes('Process exited with code 0')) {
-                onProcessCompleteRef.current(0);
-              } else if (cleanOutput.match(/Process exited with code (\d+)/)) {
-                const exitCode = parseInt(cleanOutput.match(/Process exited with code (\d+)/)[1]);
-                if (exitCode !== 0) {
-                  onProcessCompleteRef.current(exitCode);
-                }
-              }
-            }
-
-            if (terminal.current) {
-              terminal.current.write(output);
-            }
-          } else if (data.type === 'url_open') {
-            window.open(data.url, '_blank');
-          }
-        } catch (error) {
-          console.error('[Shell] Error handling WebSocket message:', error, event.data);
-        }
-      };
-
-      ws.current.onclose = (event) => {
-        setIsConnected(false);
-        setIsConnecting(false);
-
-        if (terminal.current) {
-          terminal.current.clear();
-          terminal.current.write('\x1b[2J\x1b[H');
-        }
-      };
-
-      ws.current.onerror = (error) => {
-        setIsConnected(false);
-        setIsConnecting(false);
-      };
-    } catch (error) {
-      setIsConnected(false);
-      setIsConnecting(false);
-    }
-  }, [isConnecting, isConnected]);
-
-  const connectToShell = useCallback(() => {
-    if (!isInitialized || isConnected || isConnecting) return;
-    setIsConnecting(true);
-    connectWebSocket();
-  }, [isInitialized, isConnected, isConnecting, connectWebSocket]);
-
-  const disconnectFromShell = useCallback(() => {
-    if (ws.current) {
-      ws.current.close();
-      ws.current = null;
-    }
-
-    if (terminal.current) {
-      terminal.current.clear();
-      terminal.current.write('\x1b[2J\x1b[H');
-    }
-
-    setIsConnected(false);
-    setIsConnecting(false);
-  }, []);
-
-  const sessionDisplayName = useMemo(() => {
-    if (!selectedSession) return null;
-    return selectedSession.__provider === 'cursor'
-      ? (selectedSession.name || 'Untitled Session')
-      : (selectedSession.summary || 'New Session');
-  }, [selectedSession]);
-
-  const sessionDisplayNameShort = useMemo(() => {
-    if (!sessionDisplayName) return null;
-    return sessionDisplayName.slice(0, 30);
-  }, [sessionDisplayName]);
-
-  const sessionDisplayNameLong = useMemo(() => {
-    if (!sessionDisplayName) return null;
-    return sessionDisplayName.slice(0, 50);
-  }, [sessionDisplayName]);
-
-  const restartShell = () => {
-    setIsRestarting(true);
-
-    if (ws.current) {
-      ws.current.close();
-      ws.current = null;
-    }
-
-    if (terminal.current) {
-      terminal.current.dispose();
-      terminal.current = null;
-      fitAddon.current = null;
-    }
-
-    setIsConnected(false);
-    setIsInitialized(false);
-
-    setTimeout(() => {
-      setIsRestarting(false);
-    }, 200);
-  };
-
-  useEffect(() => {
-    const currentSessionId = selectedSession?.id || null;
-
-    if (lastSessionId !== null && lastSessionId !== currentSessionId && isInitialized) {
-      disconnectFromShell();
-    }
-
-    setLastSessionId(currentSessionId);
-  }, [selectedSession?.id, isInitialized, disconnectFromShell]);
-
-  useEffect(() => {
-    if (!terminalRef.current || !selectedProject || isRestarting || terminal.current) {
-      return;
-    }
-
-
-    terminal.current = new Terminal({
-      cursorBlink: true,
-      fontSize: 14,
-      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-      allowProposedApi: true,
-      allowTransparency: false,
-      convertEol: true,
-      scrollback: 10000,
-      tabStopWidth: 4,
-      windowsMode: false,
-      macOptionIsMeta: true,
-      macOptionClickForcesSelection: true,
-      theme: {
-        background: '#1e1e1e',
-        foreground: '#d4d4d4',
-        cursor: '#ffffff',
-        cursorAccent: '#1e1e1e',
-        selection: '#264f78',
-        selectionForeground: '#ffffff',
-        black: '#000000',
-        red: '#cd3131',
-        green: '#0dbc79',
-        yellow: '#e5e510',
-        blue: '#2472c8',
-        magenta: '#bc3fbc',
-        cyan: '#11a8cd',
-        white: '#e5e5e5',
-        brightBlack: '#666666',
-        brightRed: '#f14c4c',
-        brightGreen: '#23d18b',
-        brightYellow: '#f5f543',
-        brightBlue: '#3b8eea',
-        brightMagenta: '#d670d6',
-        brightCyan: '#29b8db',
-        brightWhite: '#ffffff',
-        extendedAnsi: [
-          '#000000', '#800000', '#008000', '#808000',
-          '#000080', '#800080', '#008080', '#c0c0c0',
-          '#808080', '#ff0000', '#00ff00', '#ffff00',
-          '#0000ff', '#ff00ff', '#00ffff', '#ffffff'
-        ]
-      }
-    });
-
-    fitAddon.current = new FitAddon();
-    const webglAddon = new WebglAddon();
-    const webLinksAddon = new WebLinksAddon();
-
-    terminal.current.loadAddon(fitAddon.current);
-    terminal.current.loadAddon(webLinksAddon);
-    // Note: ClipboardAddon removed - we handle clipboard operations manually in attachCustomKeyEventHandler
-
-    try {
-      terminal.current.loadAddon(webglAddon);
-    } catch (error) {
-      console.warn('[Shell] WebGL renderer unavailable, using Canvas fallback');
-    }
-
-    terminal.current.open(terminalRef.current);
-
-    terminal.current.attachCustomKeyEventHandler((event) => {
-      if ((event.ctrlKey || event.metaKey) && event.key === 'c' && terminal.current.hasSelection()) {
-        document.execCommand('copy');
-        return false;
-      }
-
-      if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
-        navigator.clipboard.readText().then(text => {
-          if (ws.current && ws.current.readyState === WebSocket.OPEN) {
-            ws.current.send(JSON.stringify({
-              type: 'input',
-              data: text
-            }));
-          }
-        }).catch(() => {});
-        return false;
-      }
-
-      return true;
-    });
-
-    setTimeout(() => {
-      if (fitAddon.current) {
-        fitAddon.current.fit();
-        if (terminal.current && ws.current && ws.current.readyState === WebSocket.OPEN) {
-          ws.current.send(JSON.stringify({
-            type: 'resize',
-            cols: terminal.current.cols,
-            rows: terminal.current.rows
-          }));
-        }
-      }
-    }, 100);
-
-    setIsInitialized(true);
-    terminal.current.onData((data) => {
-      if (ws.current && ws.current.readyState === WebSocket.OPEN) {
-        ws.current.send(JSON.stringify({
-          type: 'input',
-          data: data
-        }));
-      }
-    });
-
-    const resizeObserver = new ResizeObserver(() => {
-      if (fitAddon.current && terminal.current) {
-        setTimeout(() => {
-          fitAddon.current.fit();
-          if (ws.current && ws.current.readyState === WebSocket.OPEN) {
-            ws.current.send(JSON.stringify({
-              type: 'resize',
-              cols: terminal.current.cols,
-              rows: terminal.current.rows
-            }));
-          }
-        }, 50);
-      }
-    });
-
-    if (terminalRef.current) {
-      resizeObserver.observe(terminalRef.current);
-    }
-
-    return () => {
-      resizeObserver.disconnect();
-
-      if (ws.current && (ws.current.readyState === WebSocket.OPEN || ws.current.readyState === WebSocket.CONNECTING)) {
-        ws.current.close();
-      }
-      ws.current = null;
-
-      if (terminal.current) {
-        terminal.current.dispose();
-        terminal.current = null;
-      }
-    };
-  }, [selectedProject?.path || selectedProject?.fullPath, isRestarting]);
-
-  useEffect(() => {
-    if (!autoConnect || !isInitialized || isConnecting || isConnected) return;
-    connectToShell();
-  }, [autoConnect, isInitialized, isConnecting, isConnected, connectToShell]);
-
-  if (!selectedProject) {
-    return (
-      <div className="h-full flex items-center justify-center">
-        <div className="text-center text-gray-500 dark:text-gray-400">
-          <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-            <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z" />
-            </svg>
-          </div>
-          <h3 className="text-lg font-semibold mb-2">{t('shell.selectProject.title')}</h3>
-          <p>{t('shell.selectProject.description')}</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (minimal) {
-    return (
-      <div className="h-full w-full bg-gray-900">
-        <div ref={terminalRef} className="h-full w-full focus:outline-none" style={{ outline: 'none' }} />
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-full flex flex-col bg-gray-900 w-full">
-      <div className="flex-shrink-0 bg-gray-800 border-b border-gray-700 px-4 py-2">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-2">
-            <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} />
-            {selectedSession && (
-              <span className="text-xs text-blue-300">
-                ({sessionDisplayNameShort}...)
-              </span>
-            )}
-            {!selectedSession && (
-              <span className="text-xs text-gray-400">{t('shell.status.newSession')}</span>
-            )}
-            {!isInitialized && (
-              <span className="text-xs text-yellow-400">{t('shell.status.initializing')}</span>
-            )}
-            {isRestarting && (
-              <span className="text-xs text-blue-400">{t('shell.status.restarting')}</span>
-            )}
-          </div>
-          <div className="flex items-center space-x-3">
-            {isConnected && (
-              <button
-                onClick={disconnectFromShell}
-                className="px-3 py-1 text-xs bg-red-600 text-white rounded hover:bg-red-700 flex items-center space-x-1"
-                title={t('shell.actions.disconnectTitle')}
-              >
-                <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>{t('shell.actions.disconnect')}</span>
-              </button>
-            )}
-
-            <button
-              onClick={restartShell}
-              disabled={isRestarting || isConnected}
-              className="text-xs text-gray-400 hover:text-white disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-1"
-              title={t('shell.actions.restartTitle')}
-            >
-              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-              </svg>
-              <span>{t('shell.actions.restart')}</span>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div className="flex-1 p-2 overflow-hidden relative">
-        <div ref={terminalRef} className="h-full w-full focus:outline-none" style={{ outline: 'none' }} />
-
-        {!isInitialized && (
-          <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90">
-            <div className="text-white">{t('shell.loading')}</div>
-          </div>
-        )}
-
-        {isInitialized && !isConnected && !isConnecting && (
-          <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90 p-4">
-            <div className="text-center max-w-sm w-full">
-              <button
-                onClick={connectToShell}
-                className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center justify-center space-x-2 text-base font-medium w-full sm:w-auto"
-                title={t('shell.actions.connectTitle')}
-              >
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                </svg>
-                <span>{t('shell.actions.connect')}</span>
-              </button>
-              <p className="text-gray-400 text-sm mt-3 px-2">
-                {isPlainShell ?
-                  t('shell.runCommand', { command: initialCommand || t('shell.defaultCommand'), projectName: selectedProject.displayName }) :
-                  selectedSession ?
-                    t('shell.resumeSession', { displayName: sessionDisplayNameLong }) :
-                    t('shell.startSession')
-                }
-              </p>
-            </div>
-          </div>
-        )}
-
-        {isConnecting && (
-          <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90 p-4">
-            <div className="text-center max-w-sm w-full">
-              <div className="flex items-center justify-center space-x-3 text-yellow-400">
-                <div className="w-6 h-6 animate-spin rounded-full border-2 border-yellow-400 border-t-transparent"></div>
-                <span className="text-base font-medium">{t('shell.connecting')}</span>
-              </div>
-              <p className="text-gray-400 text-sm mt-3 px-2">
-                {isPlainShell ?
-                  t('shell.runCommand', { command: initialCommand || t('shell.defaultCommand'), projectName: selectedProject.displayName }) :
-                  t('shell.startCli', { projectName: selectedProject.displayName })
-                }
-              </p>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default Shell;
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
--- a/src/components/StandaloneShell.jsx
+++ b/src/components/StandaloneShell.jsx
@@ -1,105 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import Shell from './Shell.jsx';
-
-/**
- * Generic Shell wrapper that can be used in tabs, modals, and other contexts.
- * Provides a flexible API for both standalone and session-based usage.
- *
- * @param {Object} project - Project object with name, fullPath/path, displayName
- * @param {Object} session - Session object (optional, for tab usage)
- * @param {string} command - Initial command to run (optional)
- * @param {boolean} isPlainShell - Use plain shell mode vs Claude CLI (default: auto-detect)
- * @param {boolean} autoConnect - Whether to auto-connect when mounted (default: true)
- * @param {function} onComplete - Callback when process completes (receives exitCode)
- * @param {function} onClose - Callback for close button (optional)
- * @param {string} title - Custom header title (optional)
- * @param {string} className - Additional CSS classes
- * @param {boolean} showHeader - Whether to show custom header (default: true)
- * @param {boolean} compact - Use compact layout (default: false)
- * @param {boolean} minimal - Use minimal mode: no header, no overlays, auto-connect (default: false)
- */
-function StandaloneShell({
-  project,
-  session = null,
-  command = null,
-  isPlainShell = null,
-  autoConnect = true,
-  onComplete = null,
-  onClose = null,
-  title = null,
-  className = "",
-  showHeader = true,
-  compact = false,
-  minimal = false
-}) {
-  const [isCompleted, setIsCompleted] = useState(false);
-
-  const shouldUsePlainShell = isPlainShell !== null ? isPlainShell : (command !== null);
-
-  const handleProcessComplete = useCallback((exitCode) => {
-    setIsCompleted(true);
-    if (onComplete) {
-      onComplete(exitCode);
-    }
-  }, [onComplete]);
-
-  if (!project) {
-    return (
-      <div className={`h-full flex items-center justify-center ${className}`}>
-        <div className="text-center text-gray-500 dark:text-gray-400">
-          <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-            <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 002 2z" />
-            </svg>
-          </div>
-          <h3 className="text-lg font-semibold mb-2">No Project Selected</h3>
-          <p>A project is required to open a shell</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`h-full w-full flex flex-col ${className}`}>
-      {/* Optional custom header */}
-      {!minimal && showHeader && title && (
-        <div className="flex-shrink-0 bg-gray-800 border-b border-gray-700 px-4 py-2">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-2">
-              <h3 className="text-sm font-medium text-gray-200">{title}</h3>
-              {isCompleted && (
-                <span className="text-xs text-green-400">(Completed)</span>
-              )}
-            </div>
-            {onClose && (
-              <button
-                onClick={onClose}
-                className="text-gray-400 hover:text-white"
-                title="Close"
-              >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Shell component wrapper */}
-      <div className="flex-1 w-full min-h-0">
-        <Shell
-          selectedProject={project}
-          selectedSession={session}
-          initialCommand={command}
-          isPlainShell={shouldUsePlainShell}
-          onProcessComplete={handleProcessComplete}
-          minimal={minimal}
-          autoConnect={minimal ? true : autoConnect}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default StandaloneShell;
--- a/src/components/TaskDetail.jsx
+++ b/src/components/TaskDetail.jsx
@@ -4,6 +4,7 @@ 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, 
@@ -79,7 +80,7 @@ const TaskDetail = ({
  };

  const copyTaskId = () => {
-    navigator.clipboard.writeText(task.id.toString());
+    copyTextToClipboard(task.id.toString());
  };

  const getStatusConfig = (status) => {
--- a/src/components/TaskList.jsx
+++ b/src/components/TaskList.jsx
@@ -1,11 +1,12 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useMemo, useEffect, useRef } from 'react';
 import { Search, Filter, ArrowUpDown, ArrowUp, ArrowDown, List, Grid, ChevronDown, Columns, Plus, Settings, Terminal, FileText, HelpCircle, X } from 'lucide-react';
 import { cn } from '../lib/utils';
 import TaskCard from './TaskCard';
 import CreateTaskModal from './CreateTaskModal';
 import { useTaskMaster } from '../contexts/TaskMasterContext';
-import Shell from './Shell';
+import Shell from './shell/view/Shell';
 import { api } from '../utils/api';
+import { useTranslation } from 'react-i18next';

 const TaskList = ({ 
  tasks = [], 
@@ -31,13 +32,19 @@ const TaskList = ({
  const [showHelpGuide, setShowHelpGuide] = useState(false);
  const [isTaskMasterComplete, setIsTaskMasterComplete] = useState(false);
  const [showPRDDropdown, setShowPRDDropdown] = useState(false);
-  
+  const dropdownRef = useRef(null);
+
  const { projectTaskMaster, refreshProjects, refreshTasks, setCurrentProject } = useTaskMaster();
+  const { t } = useTranslation('tasks');

  // Close PRD dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event) => {
-      if (showPRDDropdown && !event.target.closest('.relative')) {
+      if (
+        showPRDDropdown &&
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target)
+      ) {
        setShowPRDDropdown(false);
      }
    };
@@ -46,6 +53,31 @@ const TaskList = ({
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, [showPRDDropdown]);

+  const loadPRDOptions = async (prd, closeDropdown = false) => {
+    if (!currentProject) {
+      return;
+    }
+
+    try {
+      const response = await api.get(`/taskmaster/prd/${encodeURIComponent(currentProject.name)}/${encodeURIComponent(prd.name)}`);
+      if (response.ok) {
+        const prdData = await response.json();
+        onShowPRDEditor?.({
+          name: prd.name,
+          content: prdData.content,
+          isExisting: true
+        });
+        if (closeDropdown) {
+          setShowPRDDropdown(false);
+        }
+      } else {
+        console.error('Failed to load PRD:', response.statusText);
+      }
+    } catch (error) {
+      console.error('Error loading PRD:', error);
+    }
+  };
+
  // Get unique status values from tasks
  const statuses = useMemo(() => {
    const statusSet = new Set(tasks.map(task => task.status).filter(Boolean));
@@ -143,45 +175,45 @@ const TaskList = ({
  // Organize tasks by status for Kanban view
  const kanbanColumns = useMemo(() => {
    const allColumns = [
-      { 
-        id: 'pending', 
-        title: '📋 To Do', 
-        status: 'pending', 
+      {
+        id: 'pending',
+        title: t('kanban.pending'),
+        status: 'pending',
        color: 'bg-slate-50 dark:bg-slate-900/50 border-slate-200 dark:border-slate-700',
        headerColor: 'bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-200'
      },
-      { 
-        id: 'in-progress', 
-        title: '🚀 In Progress', 
-        status: 'in-progress', 
+      {
+        id: 'in-progress',
+        title: t('kanban.inProgress'),
+        status: 'in-progress',
        color: 'bg-blue-50 dark:bg-blue-900/50 border-blue-200 dark:border-blue-700',
        headerColor: 'bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200'
      },
-      { 
-        id: 'done', 
-        title: '✅ Done', 
-        status: 'done', 
+      {
+        id: 'done',
+        title: t('kanban.done'),
+        status: 'done',
        color: 'bg-emerald-50 dark:bg-emerald-900/50 border-emerald-200 dark:border-emerald-700',
        headerColor: 'bg-emerald-100 dark:bg-emerald-800 text-emerald-800 dark:text-emerald-200'
      },
-      { 
-        id: 'blocked', 
-        title: '🚫 Blocked', 
-        status: 'blocked', 
+      {
+        id: 'blocked',
+        title: t('kanban.blocked'),
+        status: 'blocked',
        color: 'bg-red-50 dark:bg-red-900/50 border-red-200 dark:border-red-700',
        headerColor: 'bg-red-100 dark:bg-red-800 text-red-800 dark:text-red-200'
      },
-      { 
-        id: 'deferred', 
-        title: '⏳ Deferred', 
-        status: 'deferred', 
+      {
+        id: 'deferred',
+        title: t('kanban.deferred'),
+        status: 'deferred',
        color: 'bg-amber-50 dark:bg-amber-900/50 border-amber-200 dark:border-amber-700',
        headerColor: 'bg-amber-100 dark:bg-amber-800 text-amber-800 dark:text-amber-200'
      },
-      { 
-        id: 'cancelled', 
-        title: '❌ Cancelled', 
-        status: 'cancelled', 
+      {
+        id: 'cancelled',
+        title: t('kanban.cancelled'),
+        status: 'cancelled',
        color: 'bg-gray-50 dark:bg-gray-900/50 border-gray-200 dark:border-gray-700',
        headerColor: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200'
      }
@@ -199,7 +231,7 @@ const TaskList = ({
      ...column,
      tasks: filteredAndSortedTasks.filter(task => task.status === column.status)
    }));
-  }, [filteredAndSortedTasks]);
+  }, [filteredAndSortedTasks, t]);

  const handleSortChange = (newSortBy) => {
    if (sortBy === newSortBy) {
@@ -236,26 +268,26 @@ const TaskList = ({
              <Settings className="w-12 h-12 mx-auto mb-4" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-              TaskMaster AI is not configured
+              {t('notConfigured.title')}
            </h3>
            <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
-              TaskMaster helps break down complex projects into manageable tasks with AI-powered assistance
+              {t('notConfigured.description')}
            </p>
-            
+
            {/* What is TaskMaster section */}
            <div className="mb-6 p-4 bg-blue-50 dark:bg-blue-950 rounded-lg text-left">
              <h4 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-3">
-                🎯 What is TaskMaster?
+                {t('notConfigured.whatIsTitle')}
              </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>
+                <p>• {t('notConfigured.features.aiPowered')}</p>
+                <p>• {t('notConfigured.features.prdTemplates')}</p>
+                <p>• {t('notConfigured.features.dependencyTracking')}</p>
+                <p>• {t('notConfigured.features.progressVisualization')}</p>
+                <p>• {t('notConfigured.features.cliIntegration')}</p>
              </div>
            </div>
-            
+
            <button
              onClick={() => {
                setIsTaskMasterComplete(false); // Reset completion state
@@ -264,7 +296,7 @@ const TaskList = ({
              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors flex items-center gap-2 mx-auto"
            >
              <Terminal className="w-4 h-4" />
-              Initialize TaskMaster AI
+              {t('notConfigured.initializeButton')}
            </button>
          </div>
        ) : (
@@ -276,8 +308,8 @@ const TaskList = ({
                  <FileText className="w-5 h-5 text-blue-600 dark:text-blue-400" />
                </div>
                <div>
-                  <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Getting Started with TaskMaster</h2>
-                  <p className="text-sm text-gray-600 dark:text-gray-400">TaskMaster is initialized! Here's what to do next:</p>
+                  <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{t('gettingStarted.title')}</h2>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">{t('gettingStarted.subtitle')}</p>
                </div>
              </div>
              
@@ -287,8 +319,8 @@ const TaskList = ({
                  <div className="flex gap-3 p-3 bg-white dark:bg-gray-800/50 rounded-lg border border-blue-100 dark:border-blue-800/50">
                    <div className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white text-xs font-semibold rounded-full flex items-center justify-center">1</div>
                    <div>
-                      <h4 className="font-medium text-gray-900 dark:text-white mb-1">Create a Product Requirements Document (PRD)</h4>
-                      <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">Discuss your project idea and create a PRD that describes what you want to build.</p>
+                      <h4 className="font-medium text-gray-900 dark:text-white mb-1">{t('gettingStarted.steps.createPRD.title')}</h4>
+                      <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">{t('gettingStarted.steps.createPRD.description')}</p>
                      <button
                        onClick={() => {
                          onShowPRDEditor?.();
@@ -296,34 +328,19 @@ const TaskList = ({
                        className="inline-flex items-center gap-1 text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 px-2 py-1 rounded hover:bg-purple-200 dark:hover:bg-purple-900/50 transition-colors"
                      >
                        <FileText className="w-3 h-3" />
-                        Add PRD
+                        {t('gettingStarted.steps.createPRD.addButton')}
                      </button>
-                      
+
                      {/* Show existing PRDs if any */}
                      {existingPRDs.length > 0 && (
                        <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
-                          <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">Existing PRDs:</p>
+                          <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">{t('gettingStarted.steps.createPRD.existingPRDs')}</p>
                          <div className="flex flex-wrap gap-2">
                            {existingPRDs.map((prd) => (
                              <button
                                key={prd.name}
-                                onClick={async () => {
-                                  try {
-                                    // Load the PRD content from the API
-                                    const response = await api.get(`/taskmaster/prd/${encodeURIComponent(currentProject.name)}/${encodeURIComponent(prd.name)}`);
-                                    if (response.ok) {
-                                      const prdData = await response.json();
-                                      onShowPRDEditor?.({
-                                        name: prd.name,
-                                        content: prdData.content,
-                                        isExisting: true
-                                      });
-                                    } else {
-                                      console.error('Failed to load PRD:', response.statusText);
-                                    }
-                                  } catch (error) {
-                                    console.error('Error loading PRD:', error);
-                                  }
+                                onClick={() => {
+                                  void loadPRDOptions(prd);
                                }}
                                className="inline-flex items-center gap-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-2 py-1 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                              >
@@ -341,8 +358,8 @@ const TaskList = ({
                  <div className="flex gap-3 p-3 bg-white dark:bg-gray-800/50 rounded-lg border border-blue-100 dark:border-blue-800/50">
                    <div className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white text-xs font-semibold rounded-full flex items-center justify-center">2</div>
                    <div>
-                      <h4 className="font-medium text-gray-900 dark:text-white mb-1">Generate Tasks from PRD</h4>
-                      <p className="text-sm text-gray-600 dark:text-gray-400">Once you have a PRD, ask your AI assistant to parse it and TaskMaster will automatically break it down into manageable tasks with implementation details.</p>
+                      <h4 className="font-medium text-gray-900 dark:text-white mb-1">{t('gettingStarted.steps.generateTasks.title')}</h4>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">{t('gettingStarted.steps.generateTasks.description')}</p>
                    </div>
                  </div>

@@ -350,8 +367,8 @@ const TaskList = ({
                  <div className="flex gap-3 p-3 bg-white dark:bg-gray-800/50 rounded-lg border border-blue-100 dark:border-blue-800/50">
                    <div className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white text-xs font-semibold rounded-full flex items-center justify-center">3</div>
                    <div>
-                      <h4 className="font-medium text-gray-900 dark:text-white mb-1">Analyze & Expand Tasks</h4>
-                      <p className="text-sm text-gray-600 dark:text-gray-400">Ask your AI assistant to analyze task complexity and expand them into detailed subtasks for easier implementation.</p>
+                      <h4 className="font-medium text-gray-900 dark:text-white mb-1">{t('gettingStarted.steps.analyzeTasks.title')}</h4>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">{t('gettingStarted.steps.analyzeTasks.description')}</p>
                    </div>
                  </div>

@@ -359,8 +376,8 @@ const TaskList = ({
                  <div className="flex gap-3 p-3 bg-white dark:bg-gray-800/50 rounded-lg border border-blue-100 dark:border-blue-800/50">
                    <div className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white text-xs font-semibold rounded-full flex items-center justify-center">4</div>
                    <div>
-                      <h4 className="font-medium text-gray-900 dark:text-white mb-1">Start Building</h4>
-                      <p className="text-sm text-gray-600 dark:text-gray-400">Ask your AI assistant to begin working on tasks, update their status, and add new tasks as your project evolves.</p>
+                      <h4 className="font-medium text-gray-900 dark:text-white mb-1">{t('gettingStarted.steps.startBuilding.title')}</h4>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">{t('gettingStarted.steps.startBuilding.description')}</p>
                    </div>
                  </div>
                </div>
@@ -376,7 +393,7 @@ const TaskList = ({
                    style={{ zIndex: 10 }}
                  >
                    <FileText className="w-4 h-4" />
-                    Add PRD
+                    {t('buttons.addPRD')}
                  </button>
                </div>
              </div>
@@ -384,7 +401,7 @@ const TaskList = ({

            <div className="text-center">
              <div className="text-sm text-gray-500 dark:text-gray-400 mb-2">
-                💡 <strong>Tip:</strong> Start with a PRD to get the most out of TaskMaster's AI-powered task generation
+                {t('gettingStarted.tip')}
              </div>
            </div>
          </div>
@@ -401,8 +418,8 @@ const TaskList = ({
                    <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>
+                    <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{t('setupModal.title')}</h2>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">{t('setupModal.subtitle', { projectName: currentProject?.displayName })}</p>
                  </div>
                </div>
                <button
@@ -464,10 +481,10 @@ const TaskList = ({
                    {isTaskMasterComplete ? (
                      <span className="flex items-center gap-2 text-green-600 dark:text-green-400">
                        <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                        TaskMaster setup completed! You can now close this window.
+                        {t('setupModal.completed')}
                      </span>
                    ) : (
-                      "TaskMaster initialization will start automatically"
+                      t('setupModal.willStart')
                    )}
                  </div>
                  <button
@@ -485,12 +502,12 @@ const TaskList = ({
                    }}
                    className={cn(
                      "px-4 py-2 text-sm font-medium rounded-md transition-colors",
-                      isTaskMasterComplete 
-                        ? "bg-green-600 hover:bg-green-700 text-white" 
+                      isTaskMasterComplete
+                        ? "bg-green-600 hover:bg-green-700 text-white"
                        : "text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600"
                    )}
                  >
-                    {isTaskMasterComplete ? "Close & Continue" : "Close"}
+                    {isTaskMasterComplete ? t('setupModal.closeContinueButton') : t('setupModal.closeButton')}
                  </button>
                </div>
              </div>
@@ -510,7 +527,7 @@ const TaskList = ({
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
          <input
            type="text"
-            placeholder="Search tasks..."
+            placeholder={t('search.placeholder')}
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-10 pr-4 py-2 w-full border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
@@ -529,7 +546,7 @@ const TaskList = ({
                  ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm' 
                  : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
              )}
-              title="Kanban view"
+              title={t('views.kanban')}
            >
              <Columns className="w-4 h-4" />
            </button>
@@ -537,11 +554,11 @@ const TaskList = ({
              onClick={() => setViewMode('list')}
              className={cn(
                'p-2 rounded-md transition-colors',
-                viewMode === 'list' 
-                  ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm' 
+                viewMode === 'list'
+                  ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
                  : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
              )}
-              title="List view"
+              title={t('views.list')}
            >
              <List className="w-4 h-4" />
            </button>
@@ -549,11 +566,11 @@ const TaskList = ({
              onClick={() => setViewMode('grid')}
              className={cn(
                'p-2 rounded-md transition-colors',
-                viewMode === 'grid' 
-                  ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm' 
+                viewMode === 'grid'
+                  ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
                  : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
              )}
-              title="Grid view"
+              title={t('views.grid')}
            >
              <Grid className="w-4 h-4" />
            </button>
@@ -570,7 +587,7 @@ const TaskList = ({
            )}
          >
            <Filter className="w-4 h-4" />
-            <span className="hidden sm:inline">Filters</span>
+            <span className="hidden sm:inline">{t('filters.button')}</span>
            <ChevronDown className={cn('w-4 h-4 transition-transform', showFilters && 'rotate-180')} />
          </button>
          
@@ -581,29 +598,29 @@ const TaskList = ({
              <button
                onClick={() => setShowHelpGuide(true)}
                className="p-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors border border-gray-300 dark:border-gray-600"
-                title="TaskMaster Getting Started Guide"
+                title={t('buttons.help')}
              >
                <HelpCircle className="w-4 h-4" />
              </button>

              {/* PRD Management */}
-              <div className="relative">
+              <div ref={dropdownRef} className="relative">
                {existingPRDs.length > 0 ? (
                  // Dropdown when PRDs exist
                  <div className="relative">
                    <button
                      onClick={() => setShowPRDDropdown(!showPRDDropdown)}
                      className="flex items-center gap-2 px-3 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors font-medium"
-                      title={`${existingPRDs.length} PRD${existingPRDs.length > 1 ? 's' : ''} available`}
+                      title={t('buttons.prdsAvailable', { count: existingPRDs.length })}
                    >
                      <FileText className="w-4 h-4" />
-                      <span className="hidden sm:inline">PRDs</span>
+                      <span className="hidden sm:inline">{t('buttons.prds')}</span>
                      <span className="px-1.5 py-0.5 text-xs bg-purple-500 rounded-full min-w-[1.25rem] text-center">
                        {existingPRDs.length}
                      </span>
                      <ChevronDown className={cn('w-3 h-3 transition-transform hidden sm:block', showPRDDropdown && 'rotate-180')} />
                    </button>
-                    
+
                    {showPRDDropdown && (
                      <div className="absolute right-0 top-full mt-2 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl z-30">
                        <div className="p-2">
@@ -615,31 +632,18 @@ const TaskList = ({
                            className="w-full text-left px-3 py-2 text-sm font-medium text-purple-700 dark:text-purple-300 hover:bg-purple-50 dark:hover:bg-purple-900/30 rounded flex items-center gap-2"
                          >
                            <Plus className="w-4 h-4" />
-                            Create New PRD
+                            {t('buttons.createNewPRD')}
                          </button>
                          <div className="border-t border-gray-200 dark:border-gray-700 my-1"></div>
-                          <div className="text-xs text-gray-500 dark:text-gray-400 px-3 py-1 font-medium">Existing PRDs:</div>
+                          <div className="text-xs text-gray-500 dark:text-gray-400 px-3 py-1 font-medium">{t('gettingStarted.steps.createPRD.existingPRDs')}</div>
                          {existingPRDs.map((prd) => (
                            <button
                              key={prd.name}
-                              onClick={async () => {
-                                try {
-                                  const response = await api.get(`/taskmaster/prd/${encodeURIComponent(currentProject.name)}/${encodeURIComponent(prd.name)}`);
-                                  if (response.ok) {
-                                    const prdData = await response.json();
-                                    onShowPRDEditor?.({
-                                      name: prd.name,
-                                      content: prdData.content,
-                                      isExisting: true
-                                    });
-                                    setShowPRDDropdown(false);
-                                  }
-                                } catch (error) {
-                                  console.error('Error loading PRD:', error);
-                                }
+                              onClick={() => {
+                                void loadPRDOptions(prd, true);
                              }}
                              className="w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
-                              title={`Modified: ${new Date(prd.modified).toLocaleDateString()}`}
+                              title={t('prd.modified', { date: new Date(prd.modified).toLocaleDateString() })}
                            >
                              <FileText className="w-4 h-4" />
                              <span className="truncate">{prd.name}</span>
@@ -656,10 +660,10 @@ const TaskList = ({
                      onShowPRDEditor?.();
                    }}
                    className="flex items-center gap-2 px-3 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors font-medium"
-                    title="Create Product Requirements Document"
+                    title={t('buttons.addPRD')}
                  >
                    <FileText className="w-4 h-4" />
-                    <span className="hidden sm:inline">Add PRD</span>
+                    <span className="hidden sm:inline">{t('buttons.addPRD')}</span>
                  </button>
                )}
              </div>
@@ -669,10 +673,10 @@ const TaskList = ({
                <button
                  onClick={() => setShowCreateModal(true)}
                  className="flex items-center gap-2 px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors font-medium"
-                  title="Add a new task"
+                  title={t('buttons.addTask')}
                >
                  <Plus className="w-4 h-4" />
-                  <span className="hidden sm:inline">Add Task</span>
+                  <span className="hidden sm:inline">{t('buttons.addTask')}</span>
                </button>
              )}
            </>
@@ -687,17 +691,17 @@ const TaskList = ({
            {/* Status Filter */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                Status
+                {t('filters.status')}
              </label>
              <select
                value={statusFilter}
                onChange={(e) => setStatusFilter(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
              >
-                <option value="all">All Statuses</option>
+                <option value="all">{t('filters.allStatuses')}</option>
                {statuses.map(status => (
                  <option key={status} value={status}>
-                    {status.charAt(0).toUpperCase() + status.slice(1).replace('-', ' ')}
+                    {t(`statuses.${status}`, status.charAt(0).toUpperCase() + status.slice(1).replace('-', ' '))}
                  </option>
                ))}
              </select>
@@ -706,17 +710,17 @@ const TaskList = ({
            {/* Priority Filter */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                Priority
+                {t('filters.priority')}
              </label>
              <select
                value={priorityFilter}
                onChange={(e) => setPriorityFilter(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
              >
-                <option value="all">All Priorities</option>
+                <option value="all">{t('filters.allPriorities')}</option>
                {priorities.map(priority => (
                  <option key={priority} value={priority}>
-                    {priority.charAt(0).toUpperCase() + priority.slice(1)}
+                    {t(`priorities.${priority}`, priority.charAt(0).toUpperCase() + priority.slice(1))}
                  </option>
                ))}
              </select>
@@ -725,7 +729,7 @@ const TaskList = ({
            {/* Sort By */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                Sort By
+                {t('filters.sortBy')}
              </label>
              <select
                value={`${sortBy}-${sortOrder}`}
@@ -736,14 +740,14 @@ const TaskList = ({
                }}
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
              >
-                <option value="id-asc">ID (Ascending)</option>
-                <option value="id-desc">ID (Descending)</option>
-                <option value="title-asc">Title (A-Z)</option>
-                <option value="title-desc">Title (Z-A)</option>
-                <option value="status-asc">Status (Pending First)</option>
-                <option value="status-desc">Status (Done First)</option>
-                <option value="priority-asc">Priority (High First)</option>
-                <option value="priority-desc">Priority (Low First)</option>
+                <option value="id-asc">{t('sort.idAsc')}</option>
+                <option value="id-desc">{t('sort.idDesc')}</option>
+                <option value="title-asc">{t('sort.titleAsc')}</option>
+                <option value="title-desc">{t('sort.titleDesc')}</option>
+                <option value="status-asc">{t('sort.statusAsc')}</option>
+                <option value="status-desc">{t('sort.statusDesc')}</option>
+                <option value="priority-asc">{t('sort.priorityAsc')}</option>
+                <option value="priority-desc">{t('sort.priorityDesc')}</option>
              </select>
            </div>
          </div>
@@ -751,13 +755,13 @@ const TaskList = ({
          {/* Filter Actions */}
          <div className="flex items-center justify-between">
            <div className="text-sm text-gray-600 dark:text-gray-400">
-              Showing {filteredAndSortedTasks.length} of {tasks.length} tasks
+              {t('filters.showing', { filtered: filteredAndSortedTasks.length, total: tasks.length })}
            </div>
            <button
              onClick={clearFilters}
              className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium"
            >
-              Clear Filters
+              {t('filters.clearFilters')}
            </button>
          </div>
        </div>
@@ -769,34 +773,34 @@ const TaskList = ({
          onClick={() => handleSortChange('id')}
          className={cn(
            'flex items-center gap-1 px-3 py-1.5 rounded-md text-sm transition-colors',
-            sortBy === 'id' 
-              ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' 
+            sortBy === 'id'
+              ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300'
              : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
          )}
        >
-          ID {getSortIcon('id')}
+          {t('sort.id')} {getSortIcon('id')}
        </button>
        <button
          onClick={() => handleSortChange('status')}
          className={cn(
            'flex items-center gap-1 px-3 py-1.5 rounded-md text-sm transition-colors',
-            sortBy === 'status' 
-              ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' 
+            sortBy === 'status'
+              ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300'
              : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
          )}
        >
-          Status {getSortIcon('status')}
+          {t('sort.status')} {getSortIcon('status')}
        </button>
        <button
          onClick={() => handleSortChange('priority')}
          className={cn(
            'flex items-center gap-1 px-3 py-1.5 rounded-md text-sm transition-colors',
-            sortBy === 'priority' 
-              ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' 
+            sortBy === 'priority'
+              ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300'
              : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
          )}
        >
-          Priority {getSortIcon('priority')}
+          {t('sort.priority')} {getSortIcon('priority')}
        </button>
      </div>

@@ -805,8 +809,8 @@ const TaskList = ({
        <div className="text-center py-12">
          <div className="text-gray-500 dark:text-gray-400">
            <Search className="w-12 h-12 mx-auto mb-4 opacity-50" />
-            <h3 className="text-lg font-medium mb-2">No tasks match your filters</h3>
-            <p className="text-sm">Try adjusting your search or filter criteria.</p>
+            <h3 className="text-lg font-medium mb-2">{t('noMatchingTasks.title')}</h3>
+            <p className="text-sm">{t('noMatchingTasks.description')}</p>
          </div>
        </div>
      ) : viewMode === 'kanban' ? (
@@ -844,13 +848,13 @@ const TaskList = ({
                      <div className="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600"></div>
                    </div>
                    <div className="text-xs font-medium text-gray-500 dark:text-gray-400">
-                      No tasks yet
+                      {t('kanban.noTasksYet')}
                    </div>
                    <div className="text-xs text-gray-400 dark:text-gray-500 mt-1">
-                      {column.status === 'pending' ? 'Tasks will appear here' :
-                       column.status === 'in-progress' ? 'Move tasks here when started' :
-                       column.status === 'done' ? 'Completed tasks appear here' :
-                       'Tasks with this status will appear here'}
+                      {column.status === 'pending' ? t('kanban.tasksWillAppear') :
+                       column.status === 'in-progress' ? t('kanban.moveTasksHere') :
+                       column.status === 'done' ? t('kanban.completedTasksHere') :
+                       t('kanban.statusTasksHere')}
                    </div>
                  </div>
                ) : (
@@ -911,8 +915,8 @@ const TaskList = ({
                  <FileText className="w-5 h-5 text-blue-600 dark:text-blue-400" />
                </div>
                <div>
-                  <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Getting Started with TaskMaster</h2>
-                  <p className="text-sm text-gray-600 dark:text-gray-400">Your guide to productive task management</p>
+                  <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{t('helpGuide.title')}</h2>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">{t('helpGuide.subtitle')}</p>
                </div>
              </div>
              <button
@@ -930,8 +934,8 @@ const TaskList = ({
                <div className="flex gap-4 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/50 dark:to-indigo-950/50 rounded-lg border border-blue-200 dark:border-blue-800">
                  <div className="flex-shrink-0 w-8 h-8 bg-blue-600 text-white text-sm font-semibold rounded-full flex items-center justify-center">1</div>
                  <div>
-                    <h4 className="font-medium text-gray-900 dark:text-white mb-2">Create a Product Requirements Document (PRD)</h4>
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">Discuss your project idea and create a PRD that describes what you want to build.</p>
+                    <h4 className="font-medium text-gray-900 dark:text-white mb-2">{t('gettingStarted.steps.createPRD.title')}</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">{t('gettingStarted.steps.createPRD.description')}</p>
                    <button
                      onClick={() => {
                        onShowPRDEditor?.();
@@ -940,7 +944,7 @@ const TaskList = ({
                      className="inline-flex items-center gap-2 text-sm bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 px-3 py-1.5 rounded-lg hover:bg-purple-200 dark:hover:bg-purple-900/50 transition-colors"
                    >
                      <FileText className="w-4 h-4" />
-                      Add PRD
+                      {t('buttons.addPRD')}
                    </button>
                  </div>
                </div>
@@ -949,12 +953,11 @@ const TaskList = ({
                <div className="flex gap-4 p-4 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950/50 dark:to-emerald-950/50 rounded-lg border border-green-200 dark:border-green-800">
                  <div className="flex-shrink-0 w-8 h-8 bg-green-600 text-white text-sm font-semibold rounded-full flex items-center justify-center">2</div>
                  <div>
-                    <h4 className="font-medium text-gray-900 dark:text-white mb-2">Generate Tasks from PRD</h4>
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">Once you have a PRD, ask your AI assistant to parse it and TaskMaster will automatically break it down into manageable tasks with implementation details.</p>
+                    <h4 className="font-medium text-gray-900 dark:text-white mb-2">{t('gettingStarted.steps.generateTasks.title')}</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">{t('gettingStarted.steps.generateTasks.description')}</p>
                    <div className="bg-white dark:bg-gray-800/50 rounded border border-green-200 dark:border-green-700/50 p-3 mb-2">
-                      <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/prd.txt. Can you help me parse it and set up the initial tasks?"
+                      <p className="text-xs text-gray-900 dark:text-white font-mono whitespace-pre-wrap">
+                        {t('helpGuide.examples.parsePRD')}
                      </p>
                    </div>
                  </div>
@@ -964,12 +967,11 @@ const TaskList = ({
                <div className="flex gap-4 p-4 bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-950/50 dark:to-orange-950/50 rounded-lg border border-amber-200 dark:border-amber-800">
                  <div className="flex-shrink-0 w-8 h-8 bg-amber-600 text-white text-sm font-semibold rounded-full flex items-center justify-center">3</div>
                  <div>
-                    <h4 className="font-medium text-gray-900 dark:text-white mb-2">Analyze & Expand Tasks</h4>
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">Ask your AI assistant to analyze task complexity and expand them into detailed subtasks for easier implementation.</p>
+                    <h4 className="font-medium text-gray-900 dark:text-white mb-2">{t('gettingStarted.steps.analyzeTasks.title')}</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">{t('gettingStarted.steps.analyzeTasks.description')}</p>
                    <div className="bg-white dark:bg-gray-800/50 rounded border border-amber-200 dark:border-amber-700/50 p-3 mb-2">
-                      <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">
-                        "Task 5 seems complex. Can you break it down into subtasks?"
+                      <p className="text-xs text-gray-900 dark:text-white font-mono whitespace-pre-wrap">
+                        {t('helpGuide.examples.expandTask')}
                      </p>
                    </div>
                  </div>
@@ -979,12 +981,11 @@ const TaskList = ({
                <div className="flex gap-4 p-4 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-950/50 dark:to-pink-950/50 rounded-lg border border-purple-200 dark:border-purple-800">
                  <div className="flex-shrink-0 w-8 h-8 bg-purple-600 text-white text-sm font-semibold rounded-full flex items-center justify-center">4</div>
                  <div>
-                    <h4 className="font-medium text-gray-900 dark:text-white mb-2">Start Building</h4>
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">Ask your AI assistant to begin working on tasks, update their status, and add new tasks as your project evolves.</p>
+                    <h4 className="font-medium text-gray-900 dark:text-white mb-2">{t('gettingStarted.steps.startBuilding.title')}</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">{t('gettingStarted.steps.startBuilding.description')}</p>
                    <div className="bg-white dark:bg-gray-800/50 rounded border border-purple-200 dark:border-purple-700/50 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">
-                        "Please add a new task to implement user profile image uploads using Cloudinary, research the best approach."
+                      <p className="text-xs text-gray-900 dark:text-white font-mono whitespace-pre-wrap">
+                        {t('helpGuide.examples.addTask')}
                      </p>
                    </div>
                    <a
@@ -993,50 +994,50 @@ const TaskList = ({
                      rel="noopener noreferrer"
                      className="inline-block text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline"
                    >
-                      View more examples and usage patterns →
+                      {t('helpGuide.moreExamples')}
                    </a>
                  </div>
                </div>

                {/* Pro Tips */}
                <div className="mt-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
-                  <h4 className="font-medium text-gray-900 dark:text-white mb-3">💡 Pro Tips</h4>
+                  <h4 className="font-medium text-gray-900 dark:text-white mb-3">{t('helpGuide.proTips.title')}</h4>
                  <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
                    <li className="flex items-start gap-2">
                      <span className="w-1.5 h-1.5 bg-blue-500 rounded-full mt-2 flex-shrink-0"></span>
-                      Use the search bar to quickly find specific tasks
+                      {t('helpGuide.proTips.search')}
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="w-1.5 h-1.5 bg-green-500 rounded-full mt-2 flex-shrink-0"></span>
-                      Switch between Kanban, List, and Grid views using the view toggles
+                      {t('helpGuide.proTips.views')}
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="w-1.5 h-1.5 bg-purple-500 rounded-full mt-2 flex-shrink-0"></span>
-                      Use filters to focus on specific task statuses or priorities
+                      {t('helpGuide.proTips.filters')}
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="w-1.5 h-1.5 bg-orange-500 rounded-full mt-2 flex-shrink-0"></span>
-                      Click on any task to view detailed information and manage subtasks
+                      {t('helpGuide.proTips.details')}
                    </li>
                  </ul>
                </div>

                {/* Learn More Section */}
                <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-950/50 rounded-lg border border-blue-200 dark:border-blue-800">
-                  <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-3">📚 Learn More</h4>
+                  <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-3">{t('helpGuide.learnMore.title')}</h4>
                  <p className="text-sm text-blue-800 dark:text-blue-200 mb-3">
-                    TaskMaster AI is an advanced task management system built for developers. Get documentation, examples, and contribute to the project.
+                    {t('helpGuide.learnMore.description')}
                  </p>
-                  <a 
-                    href="https://github.com/eyaltoledano/claude-task-master" 
-                    target="_blank" 
+                  <a
+                    href="https://github.com/eyaltoledano/claude-task-master"
+                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 text-sm bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-lg font-medium transition-colors"
                  >
                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
                    </svg>
-                    View on GitHub
+                    {t('helpGuide.learnMore.githubButton')}
                    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                    </svg>
@@ -1051,4 +1052,4 @@ const TaskList = ({
  );
 };

-export default TaskList;
+export default TaskList;
--- a/src/components/TaskMasterSetupWizard.jsx
+++ b/src/components/TaskMasterSetupWizard.jsx
@@ -2,6 +2,7 @@ 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, 
@@ -175,7 +176,7 @@ const TaskMasterSetupWizard = ({
    }
  }
 }`;
-    navigator.clipboard.writeText(mcpConfig);
+    copyTextToClipboard(mcpConfig);
  };

  const renderStepContent = () => {
--- a/src/components/TasksSettings.jsx
+++ b/src/components/TasksSettings.jsx
@@ -1,109 +1,3 @@
-import { Zap } from 'lucide-react';
-import { useTasksSettings } from '../contexts/TasksSettingsContext';
-import { useTranslation } from 'react-i18next';
+import TasksSettingsTab from './settings/view/tabs/tasks-settings/TasksSettingsTab';

-function TasksSettings() {
-  const { t } = useTranslation('settings');
-  const {
-    tasksEnabled,
-    setTasksEnabled,
-    isTaskMasterInstalled,
-    isCheckingInstallation
-  } = useTasksSettings();
-
-  return (
-    <div className="space-y-8">
-      {/* Installation Status Check */}
-      {isCheckingInstallation ? (
-        <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 gap-3">
-            <div className="animate-spin w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full"></div>
-            <span className="text-sm text-muted-foreground">{t('tasks.checking')}</span>
-          </div>
-        </div>
-      ) : (
-        <>
-          {/* TaskMaster Not Installed Warning */}
-          {!isTaskMasterInstalled && (
-            <div className="bg-orange-50 dark:bg-orange-950/50 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
-              <div className="flex items-start gap-3">
-                <div className="w-8 h-8 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
-                  <svg className="w-4 h-4 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
-                  </svg>
-                </div>
-                <div className="flex-1">
-                  <div className="font-medium text-orange-900 dark:text-orange-100 mb-2">
-                    {t('tasks.notInstalled.title')}
-                  </div>
-                  <div className="text-sm text-orange-800 dark:text-orange-200 space-y-3">
-                    <p>{t('tasks.notInstalled.description')}</p>
-
-                    <div className="bg-orange-100 dark:bg-orange-900/50 rounded-lg p-3 font-mono text-sm">
-                      <code>{t('tasks.notInstalled.installCommand')}</code>
-                    </div>
-
-                    <div>
-                      <a
-                        href="https://github.com/eyaltoledano/claude-task-master"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium text-sm"
-                      >
-                        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                          <path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
-                        </svg>
-                        {t('tasks.notInstalled.viewOnGitHub')}
-                        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                        </svg>
-                      </a>
-                    </div>
-
-                    <div className="space-y-2">
-                      <p className="font-medium">{t('tasks.notInstalled.afterInstallation')}</p>
-                      <ol className="list-decimal list-inside space-y-1 text-xs">
-                        <li>{t('tasks.notInstalled.steps.restart')}</li>
-                        <li>{t('tasks.notInstalled.steps.autoAvailable')}</li>
-                        <li>{t('tasks.notInstalled.steps.initCommand')}</li>
-                      </ol>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* TaskMaster Settings */}
-          {isTaskMasterInstalled && (
-            <div className="space-y-4">
-              <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-foreground">
-                      {t('tasks.settings.enableLabel')}
-                    </div>
-                    <div className="text-sm text-muted-foreground mt-1">
-                      {t('tasks.settings.enableDescription')}
-                    </div>
-                  </div>
-                  <label className="relative inline-flex items-center cursor-pointer">
-                    <input
-                      type="checkbox"
-                      checked={tasksEnabled}
-                      onChange={(e) => setTasksEnabled(e.target.checked)}
-                      className="sr-only peer"
-                    />
-                    <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                  </label>
-                </div>
-              </div>
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-
-export default TasksSettings;
+export default TasksSettingsTab;
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -10,12 +10,12 @@ const TodoList = ({ todos, isResult = false }) => {
  const getStatusIcon = (status) => {
    switch (status) {
      case 'completed':
-        return <CheckCircle2 className="w-4 h-4 text-green-500 dark:text-green-400" />;
+        return <CheckCircle2 className="w-3.5 h-3.5 text-green-500 dark:text-green-400" />;
      case 'in_progress':
-        return <Clock className="w-4 h-4 text-blue-500 dark:text-blue-400" />;
+        return <Clock className="w-3.5 h-3.5 text-blue-500 dark:text-blue-400" />;
      case 'pending':
      default:
-        return <Circle className="w-4 h-4 text-gray-400 dark:text-gray-500" />;
+        return <Circle className="w-3.5 h-3.5 text-gray-400 dark:text-gray-500" />;
    }
  };

@@ -44,38 +44,38 @@ const TodoList = ({ todos, isResult = false }) => {
  };

  return (
-    <div className="space-y-3">
+    <div className="space-y-1.5">
      {isResult && (
-        <div className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+        <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-3 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm hover:shadow-md dark:shadow-gray-900/50 transition-shadow"
+          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-2">
-              <p className={`text-sm font-medium ${todo.status === 'completed' ? 'line-through text-gray-500 dark:text-gray-400' : 'text-gray-900 dark:text-gray-100'}`}>
+            <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-xs px-2 py-0.5 ${getPriorityColor(todo.priority)}`}
+                  className={`text-[10px] px-1.5 py-px ${getPriorityColor(todo.priority)}`}
                >
                  {todo.priority}
                </Badge>
                <Badge
                  variant="outline"
-                  className={`text-xs px-2 py-0.5 ${getStatusColor(todo.status)}`}
+                  className={`text-[10px] px-1.5 py-px ${getStatusColor(todo.status)}`}
                >
                  {todo.status.replace('_', ' ')}
                </Badge>
@@ -88,4 +88,4 @@ const TodoList = ({ todos, isResult = false }) => {
  );
 };

-export default TodoList;
+export default TodoList;
--- a/src/components/app/AppContent.tsx
+++ b/src/components/app/AppContent.tsx
@@ -0,0 +1,144 @@
+import { useEffect } 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';
+
+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 {
+    activeSessions,
+    processingSessions,
+    markSessionAsActive,
+    markSessionAsInactive,
+    markSessionAsProcessing,
+    markSessionAsNotProcessing,
+    replaceTemporarySession,
+  } = useSessionProtection();
+
+  const {
+    selectedProject,
+    selectedSession,
+    activeTab,
+    sidebarOpen,
+    isLoadingProjects,
+    isInputFocused,
+    externalMessageUpdate,
+    setActiveTab,
+    setSidebarOpen,
+    setIsInputFocused,
+    setShowSettings,
+    openSettings,
+    fetchProjects,
+    sidebarSharedProps,
+  } = useProjectsState({
+    sessionId,
+    navigate,
+    latestMessage,
+    isMobile,
+    activeSessions,
+  });
+
+  useEffect(() => {
+    window.refreshProjects = fetchProjects;
+
+    return () => {
+      if (window.refreshProjects === fetchProjects) {
+        delete window.refreshProjects;
+      }
+    };
+  }, [fetchProjects]);
+
+  useEffect(() => {
+    window.openSettings = openSettings;
+
+    return () => {
+      if (window.openSettings === openSettings) {
+        delete window.openSettings;
+      }
+    };
+  }, [openSettings]);
+
+  return (
+    <div className="fixed inset-0 flex bg-background">
+      {!isMobile ? (
+        <div className="h-full flex-shrink-0 border-r border-border/50">
+          <Sidebar {...sidebarSharedProps} />
+        </div>
+      ) : (
+        <div
+          className={`fixed inset-0 z-50 flex transition-all duration-150 ease-out ${sidebarOpen ? 'opacity-100 visible' : 'opacity-0 invisible'
+            }`}
+        >
+          <button
+            className="fixed inset-0 bg-background/60 backdrop-blur-sm transition-opacity duration-150 ease-out"
+            onClick={(event) => {
+              event.stopPropagation();
+              setSidebarOpen(false);
+            }}
+            onTouchStart={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              setSidebarOpen(false);
+            }}
+            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'
+              }`}
+            onClick={(event) => event.stopPropagation()}
+            onTouchStart={(event) => event.stopPropagation()}
+          >
+            <Sidebar {...sidebarSharedProps} />
+          </div>
+        </div>
+      )}
+
+      <div className={`flex-1 flex flex-col min-w-0 ${isMobile ? 'pb-mobile-nav' : ''}`}>
+        <MainContent
+          selectedProject={selectedProject}
+          selectedSession={selectedSession}
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          ws={ws}
+          sendMessage={sendMessage}
+          latestMessage={latestMessage}
+          isMobile={isMobile}
+          onMenuClick={() => setSidebarOpen(true)}
+          isLoading={isLoadingProjects}
+          onInputFocusChange={setIsInputFocused}
+          onSessionActive={markSessionAsActive}
+          onSessionInactive={markSessionAsInactive}
+          onSessionProcessing={markSessionAsProcessing}
+          onSessionNotProcessing={markSessionAsNotProcessing}
+          processingSessions={processingSessions}
+          onReplaceTemporarySession={replaceTemporarySession}
+          onNavigateToSession={(targetSessionId: string) => navigate(`/session/${targetSessionId}`)}
+          onShowSettings={() => setShowSettings(true)}
+          externalMessageUpdate={externalMessageUpdate}
+        />
+      </div>
+
+      {isMobile && (
+        <MobileNav
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          isInputFocused={isInputFocused}
+        />
+      )}
+
+    </div>
+  );
+}
--- a/src/components/chat/constants/thinkingModes.ts
+++ b/src/components/chat/constants/thinkingModes.ts
@@ -0,0 +1,44 @@
+import { Brain, Zap, Sparkles, Atom } from 'lucide-react';
+
+export const thinkingModes = [
+  {
+    id: 'none',
+    name: 'Standard',
+    description: 'Regular Claude response',
+    icon: null,
+    prefix: '',
+    color: 'text-gray-600'
+  },
+  {
+    id: 'think',
+    name: 'Think',
+    description: 'Basic extended thinking',
+    icon: Brain,
+    prefix: 'think',
+    color: 'text-blue-600'
+  },
+  {
+    id: 'think-hard',
+    name: 'Think Hard',
+    description: 'More thorough evaluation',
+    icon: Zap,
+    prefix: 'think hard',
+    color: 'text-purple-600'
+  },
+  {
+    id: 'think-harder',
+    name: 'Think Harder',
+    description: 'Deep analysis with alternatives',
+    icon: Sparkles,
+    prefix: 'think harder',
+    color: 'text-indigo-600'
+  },
+  {
+    id: 'ultrathink',
+    name: 'Ultrathink',
+    description: 'Maximum thinking budget',
+    icon: Atom,
+    prefix: 'ultrathink',
+    color: 'text-red-600'
+  }
+];
--- a/src/components/chat/hooks/useChatComposerState.ts
+++ b/src/components/chat/hooks/useChatComposerState.ts
@@ -0,0 +1,993 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type {
+  ChangeEvent,
+  ClipboardEvent,
+  Dispatch,
+  FormEvent,
+  KeyboardEvent,
+  MouseEvent,
+  SetStateAction,
+  TouchEvent,
+} 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 {
+  ChatMessage,
+  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';
+
+type PendingViewSession = {
+  sessionId: string | null;
+  startedAt: number;
+};
+
+interface UseChatComposerStateArgs {
+  selectedProject: Project | null;
+  selectedSession: ProjectSession | null;
+  currentSessionId: string | null;
+  provider: SessionProvider;
+  permissionMode: PermissionMode | string;
+  cyclePermissionMode: () => void;
+  cursorModel: string;
+  claudeModel: string;
+  codexModel: string;
+  isLoading: boolean;
+  canAbortSession: boolean;
+  tokenBudget: Record<string, unknown> | null;
+  sendMessage: (message: unknown) => void;
+  sendByCtrlEnter?: boolean;
+  onSessionActive?: (sessionId?: string | null) => void;
+  onSessionProcessing?: (sessionId?: string | null) => void;
+  onInputFocusChange?: (focused: boolean) => void;
+  onFileOpen?: (filePath: string, diffInfo?: unknown) => void;
+  onShowSettings?: () => void;
+  pendingViewSessionRef: { current: PendingViewSession | null };
+  scrollToBottom: () => void;
+  setChatMessages: Dispatch<SetStateAction<ChatMessage[]>>;
+  setSessionMessages?: Dispatch<SetStateAction<any[]>>;
+  setIsLoading: (loading: boolean) => void;
+  setCanAbortSession: (canAbort: boolean) => void;
+  setClaudeStatus: (status: { text: string; tokens: number; can_interrupt: boolean } | null) => void;
+  setIsUserScrolledUp: (isScrolledUp: boolean) => void;
+  setPendingPermissionRequests: Dispatch<SetStateAction<PendingPermissionRequest[]>>;
+}
+
+interface MentionableFile {
+  name: string;
+  path: string;
+}
+
+interface CommandExecutionResult {
+  type: 'builtin' | 'custom';
+  action?: string;
+  data?: any;
+  content?: string;
+  hasBashCommands?: boolean;
+  hasFileIncludes?: boolean;
+}
+
+const createFakeSubmitEvent = () => {
+  return { preventDefault: () => undefined } as unknown as FormEvent<HTMLFormElement>;
+};
+
+const isTemporarySessionId = (sessionId: string | null | undefined) =>
+  Boolean(sessionId && sessionId.startsWith('new-session-'));
+
+export function useChatComposerState({
+  selectedProject,
+  selectedSession,
+  currentSessionId,
+  provider,
+  permissionMode,
+  cyclePermissionMode,
+  cursorModel,
+  claudeModel,
+  codexModel,
+  isLoading,
+  canAbortSession,
+  tokenBudget,
+  sendMessage,
+  sendByCtrlEnter,
+  onSessionActive,
+  onSessionProcessing,
+  onInputFocusChange,
+  onFileOpen,
+  onShowSettings,
+  pendingViewSessionRef,
+  scrollToBottom,
+  setChatMessages,
+  setSessionMessages,
+  setIsLoading,
+  setCanAbortSession,
+  setClaudeStatus,
+  setIsUserScrolledUp,
+  setPendingPermissionRequests,
+}: UseChatComposerStateArgs) {
+  const [input, setInput] = useState(() => {
+    if (typeof window !== 'undefined' && selectedProject) {
+      return safeLocalStorage.getItem(`draft_input_${selectedProject.name}`) || '';
+    }
+    return '';
+  });
+  const [attachedImages, setAttachedImages] = useState<File[]>([]);
+  const [uploadingImages, setUploadingImages] = useState<Map<string, number>>(new Map());
+  const [imageErrors, setImageErrors] = useState<Map<string, string>>(new Map());
+  const [isTextareaExpanded, setIsTextareaExpanded] = useState(false);
+  const [thinkingMode, setThinkingMode] = useState('none');
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const inputHighlightRef = useRef<HTMLDivElement>(null);
+  const handleSubmitRef = useRef<
+    ((event: FormEvent<HTMLFormElement> | MouseEvent | TouchEvent | KeyboardEvent<HTMLTextAreaElement>) => Promise<void>) | null
+  >(null);
+  const inputValueRef = useRef(input);
+
+  const handleBuiltInCommand = useCallback(
+    (result: CommandExecutionResult) => {
+      const { action, data } = result;
+      switch (action) {
+        case 'clear':
+          setChatMessages([]);
+          setSessionMessages?.([]);
+          break;
+
+        case 'help':
+          setChatMessages((previous) => [
+            ...previous,
+            {
+              type: 'assistant',
+              content: data.content,
+              timestamp: Date.now(),
+            },
+          ]);
+          break;
+
+        case 'model':
+          setChatMessages((previous) => [
+            ...previous,
+            {
+              type: 'assistant',
+              content: `**Current Model**: ${data.current.model}\n\n**Available Models**:\n\nClaude: ${data.available.claude.join(', ')}\n\nCursor: ${data.available.cursor.join(', ')}`,
+              timestamp: Date.now(),
+            },
+          ]);
+          break;
+
+        case 'cost': {
+          const costMessage = `**Token Usage**: ${data.tokenUsage.used.toLocaleString()} / ${data.tokenUsage.total.toLocaleString()} (${data.tokenUsage.percentage}%)\n\n**Estimated Cost**:\n- Input: $${data.cost.input}\n- Output: $${data.cost.output}\n- **Total**: $${data.cost.total}\n\n**Model**: ${data.model}`;
+          setChatMessages((previous) => [
+            ...previous,
+            { type: 'assistant', content: costMessage, timestamp: Date.now() },
+          ]);
+          break;
+        }
+
+        case 'status': {
+          const statusMessage = `**System Status**\n\n- Version: ${data.version}\n- Uptime: ${data.uptime}\n- Model: ${data.model}\n- Provider: ${data.provider}\n- Node.js: ${data.nodeVersion}\n- Platform: ${data.platform}`;
+          setChatMessages((previous) => [
+            ...previous,
+            { type: 'assistant', content: statusMessage, timestamp: Date.now() },
+          ]);
+          break;
+        }
+
+        case 'memory':
+          if (data.error) {
+            setChatMessages((previous) => [
+              ...previous,
+              {
+                type: 'assistant',
+                content: `⚠️ ${data.message}`,
+                timestamp: Date.now(),
+              },
+            ]);
+          } else {
+            setChatMessages((previous) => [
+              ...previous,
+              {
+                type: 'assistant',
+                content: `📝 ${data.message}\n\nPath: \`${data.path}\``,
+                timestamp: Date.now(),
+              },
+            ]);
+            if (data.exists && onFileOpen) {
+              onFileOpen(data.path);
+            }
+          }
+          break;
+
+        case 'config':
+          onShowSettings?.();
+          break;
+
+        case 'rewind':
+          if (data.error) {
+            setChatMessages((previous) => [
+              ...previous,
+              {
+                type: 'assistant',
+                content: `⚠️ ${data.message}`,
+                timestamp: Date.now(),
+              },
+            ]);
+          } else {
+            setChatMessages((previous) => previous.slice(0, -data.steps * 2));
+            setChatMessages((previous) => [
+              ...previous,
+              {
+                type: 'assistant',
+                content: `⏪ ${data.message}`,
+                timestamp: Date.now(),
+              },
+            ]);
+          }
+          break;
+
+        default:
+          console.warn('Unknown built-in command action:', action);
+      }
+    },
+    [onFileOpen, onShowSettings, setChatMessages, setSessionMessages],
+  );
+
+  const handleCustomCommand = useCallback(async (result: CommandExecutionResult) => {
+    const { content, hasBashCommands } = result;
+
+    if (hasBashCommands) {
+      const confirmed = window.confirm(
+        'This command contains bash commands that will be executed. Do you want to proceed?',
+      );
+      if (!confirmed) {
+        setChatMessages((previous) => [
+          ...previous,
+          {
+            type: 'assistant',
+            content: '❌ Command execution cancelled',
+            timestamp: Date.now(),
+          },
+        ]);
+        return;
+      }
+    }
+
+    const commandContent = content || '';
+    setInput(commandContent);
+    inputValueRef.current = commandContent;
+
+    // Defer submit to next tick so the command text is reflected in UI before dispatching.
+    setTimeout(() => {
+      if (handleSubmitRef.current) {
+        handleSubmitRef.current(createFakeSubmitEvent());
+      }
+    }, 0);
+  }, [setChatMessages]);
+
+  const executeCommand = useCallback(
+    async (command: SlashCommand, rawInput?: string) => {
+      if (!command || !selectedProject) {
+        return;
+      }
+
+      try {
+        const effectiveInput = rawInput ?? input;
+        const commandMatch = effectiveInput.match(new RegExp(`${escapeRegExp(command.name)}\\s*(.*)`));
+        const args =
+          commandMatch && commandMatch[1] ? commandMatch[1].trim().split(/\s+/) : [];
+
+        const context = {
+          projectPath: selectedProject.fullPath || selectedProject.path,
+          projectName: selectedProject.name,
+          sessionId: currentSessionId,
+          provider,
+          model: provider === 'cursor' ? cursorModel : provider === 'codex' ? codexModel : claudeModel,
+          tokenUsage: tokenBudget,
+        };
+
+        const response = await authenticatedFetch('/api/commands/execute', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            commandName: command.name,
+            commandPath: command.path,
+            args,
+            context,
+          }),
+        });
+
+        if (!response.ok) {
+          let errorMessage = `Failed to execute command (${response.status})`;
+          try {
+            const errorData = await response.json();
+            errorMessage = errorData?.message || errorData?.error || errorMessage;
+          } catch {
+            // Ignore JSON parse failures and use fallback message.
+          }
+          throw new Error(errorMessage);
+        }
+
+        const result = (await response.json()) as CommandExecutionResult;
+        if (result.type === 'builtin') {
+          handleBuiltInCommand(result);
+          setInput('');
+          inputValueRef.current = '';
+        } else if (result.type === 'custom') {
+          await handleCustomCommand(result);
+        }
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Unknown error';
+        console.error('Error executing command:', error);
+        setChatMessages((previous) => [
+          ...previous,
+          {
+            type: 'assistant',
+            content: `Error executing command: ${message}`,
+            timestamp: Date.now(),
+          },
+        ]);
+      }
+    },
+    [
+      claudeModel,
+      codexModel,
+      currentSessionId,
+      cursorModel,
+      handleBuiltInCommand,
+      handleCustomCommand,
+      input,
+      provider,
+      selectedProject,
+      setChatMessages,
+      tokenBudget,
+    ],
+  );
+
+  const {
+    slashCommands,
+    slashCommandsCount,
+    filteredCommands,
+    frequentCommands,
+    commandQuery,
+    showCommandMenu,
+    selectedCommandIndex,
+    resetCommandMenuState,
+    handleCommandSelect,
+    handleToggleCommandMenu,
+    handleCommandInputChange,
+    handleCommandMenuKeyDown,
+  } = useSlashCommands({
+    selectedProject,
+    input,
+    setInput,
+    textareaRef,
+    onExecuteCommand: executeCommand,
+  });
+
+  const {
+    showFileDropdown,
+    filteredFiles,
+    selectedFileIndex,
+    renderInputWithMentions,
+    selectFile,
+    setCursorPosition,
+    handleFileMentionsKeyDown,
+  } = useFileMentions({
+    selectedProject,
+    input,
+    setInput,
+    textareaRef,
+  });
+
+  const syncInputOverlayScroll = useCallback((target: HTMLTextAreaElement) => {
+    if (!inputHighlightRef.current || !target) {
+      return;
+    }
+    inputHighlightRef.current.scrollTop = target.scrollTop;
+    inputHighlightRef.current.scrollLeft = target.scrollLeft;
+  }, []);
+
+  const handleImageFiles = useCallback((files: File[]) => {
+    const validFiles = files.filter((file) => {
+      try {
+        if (!file || typeof file !== 'object') {
+          console.warn('Invalid file object:', file);
+          return false;
+        }
+
+        if (!file.type || !file.type.startsWith('image/')) {
+          return false;
+        }
+
+        if (!file.size || file.size > 5 * 1024 * 1024) {
+          const fileName = file.name || 'Unknown file';
+          setImageErrors((previous) => {
+            const next = new Map(previous);
+            next.set(fileName, 'File too large (max 5MB)');
+            return next;
+          });
+          return false;
+        }
+
+        return true;
+      } catch (error) {
+        console.error('Error validating file:', error, file);
+        return false;
+      }
+    });
+
+    if (validFiles.length > 0) {
+      setAttachedImages((previous) => [...previous, ...validFiles].slice(0, 5));
+    }
+  }, []);
+
+  const handlePaste = useCallback(
+    (event: ClipboardEvent<HTMLTextAreaElement>) => {
+      const items = Array.from(event.clipboardData.items);
+
+      items.forEach((item) => {
+        if (!item.type.startsWith('image/')) {
+          return;
+        }
+        const file = item.getAsFile();
+        if (file) {
+          handleImageFiles([file]);
+        }
+      });
+
+      if (items.length === 0 && event.clipboardData.files.length > 0) {
+        const files = Array.from(event.clipboardData.files);
+        const imageFiles = files.filter((file) => file.type.startsWith('image/'));
+        if (imageFiles.length > 0) {
+          handleImageFiles(imageFiles);
+        }
+      }
+    },
+    [handleImageFiles],
+  );
+
+  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+    accept: {
+      'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg'],
+    },
+    maxSize: 5 * 1024 * 1024,
+    maxFiles: 5,
+    onDrop: handleImageFiles,
+    noClick: true,
+    noKeyboard: true,
+  });
+
+  const handleSubmit = useCallback(
+    async (
+      event: FormEvent<HTMLFormElement> | MouseEvent | TouchEvent | KeyboardEvent<HTMLTextAreaElement>,
+    ) => {
+      event.preventDefault();
+      const currentInput = inputValueRef.current;
+      if (!currentInput.trim() || isLoading || !selectedProject) {
+        return;
+      }
+
+      // Intercept slash commands: if input starts with /commandName, execute as command with args
+      const trimmedInput = currentInput.trim();
+      if (trimmedInput.startsWith('/')) {
+        const firstSpace = trimmedInput.indexOf(' ');
+        const commandName = firstSpace > 0 ? trimmedInput.slice(0, firstSpace) : trimmedInput;
+        const matchedCommand = slashCommands.find((cmd: SlashCommand) => cmd.name === commandName);
+        if (matchedCommand) {
+          executeCommand(matchedCommand, trimmedInput);
+          setInput('');
+          inputValueRef.current = '';
+          setAttachedImages([]);
+          setUploadingImages(new Map());
+          setImageErrors(new Map());
+          resetCommandMenuState();
+          setIsTextareaExpanded(false);
+          if (textareaRef.current) {
+            textareaRef.current.style.height = 'auto';
+          }
+          return;
+        }
+      }
+
+      let messageContent = currentInput;
+      const selectedThinkingMode = thinkingModes.find((mode: { id: string; prefix?: string }) => mode.id === thinkingMode);
+      if (selectedThinkingMode && selectedThinkingMode.prefix) {
+        messageContent = `${selectedThinkingMode.prefix}: ${currentInput}`;
+      }
+
+      let uploadedImages: unknown[] = [];
+      if (attachedImages.length > 0) {
+        const formData = new FormData();
+        attachedImages.forEach((file) => {
+          formData.append('images', file);
+        });
+
+        try {
+          const response = await authenticatedFetch(`/api/projects/${selectedProject.name}/upload-images`, {
+            method: 'POST',
+            headers: {},
+            body: formData,
+          });
+
+          if (!response.ok) {
+            throw new Error('Failed to upload images');
+          }
+
+          const result = await response.json();
+          uploadedImages = result.images;
+        } catch (error) {
+          const message = error instanceof Error ? error.message : 'Unknown error';
+          console.error('Image upload failed:', error);
+          setChatMessages((previous) => [
+            ...previous,
+            {
+              type: 'error',
+              content: `Failed to upload images: ${message}`,
+              timestamp: new Date(),
+            },
+          ]);
+          return;
+        }
+      }
+
+      const userMessage: ChatMessage = {
+        type: 'user',
+        content: currentInput,
+        images: uploadedImages as any,
+        timestamp: new Date(),
+      };
+
+      setChatMessages((previous) => [...previous, userMessage]);
+      setIsLoading(true);
+      setCanAbortSession(true);
+      setClaudeStatus({
+        text: 'Processing',
+        tokens: 0,
+        can_interrupt: true,
+      });
+
+      setIsUserScrolledUp(false);
+      setTimeout(() => scrollToBottom(), 100);
+
+      const effectiveSessionId =
+        currentSessionId || selectedSession?.id || sessionStorage.getItem('cursorSessionId');
+      const sessionToActivate = effectiveSessionId || `new-session-${Date.now()}`;
+
+      if (!effectiveSessionId && !selectedSession?.id) {
+        if (typeof window !== 'undefined') {
+          // Reset stale pending IDs from previous interrupted runs before creating a new one.
+          sessionStorage.removeItem('pendingSessionId');
+        }
+        pendingViewSessionRef.current = { sessionId: null, startedAt: Date.now() };
+      }
+      onSessionActive?.(sessionToActivate);
+      if (effectiveSessionId && !isTemporarySessionId(effectiveSessionId)) {
+        onSessionProcessing?.(effectiveSessionId);
+      }
+
+      const getToolsSettings = () => {
+        try {
+          const settingsKey =
+            provider === 'cursor'
+              ? 'cursor-tools-settings'
+              : provider === 'codex'
+              ? 'codex-settings'
+              : 'claude-settings';
+          const savedSettings = safeLocalStorage.getItem(settingsKey);
+          if (savedSettings) {
+            return JSON.parse(savedSettings);
+          }
+        } catch (error) {
+          console.error('Error loading tools settings:', error);
+        }
+
+        return {
+          allowedTools: [],
+          disallowedTools: [],
+          skipPermissions: false,
+        };
+      };
+
+      const toolsSettings = getToolsSettings();
+      const resolvedProjectPath = selectedProject.fullPath || selectedProject.path || '';
+
+      if (provider === 'cursor') {
+        sendMessage({
+          type: 'cursor-command',
+          command: messageContent,
+          sessionId: effectiveSessionId,
+          options: {
+            cwd: resolvedProjectPath,
+            projectPath: resolvedProjectPath,
+            sessionId: effectiveSessionId,
+            resume: Boolean(effectiveSessionId),
+            model: cursorModel,
+            skipPermissions: toolsSettings?.skipPermissions || false,
+            toolsSettings,
+          },
+        });
+      } else if (provider === 'codex') {
+        sendMessage({
+          type: 'codex-command',
+          command: messageContent,
+          sessionId: effectiveSessionId,
+          options: {
+            cwd: resolvedProjectPath,
+            projectPath: resolvedProjectPath,
+            sessionId: effectiveSessionId,
+            resume: Boolean(effectiveSessionId),
+            model: codexModel,
+            permissionMode: permissionMode === 'plan' ? 'default' : permissionMode,
+          },
+        });
+      } else {
+        sendMessage({
+          type: 'claude-command',
+          command: messageContent,
+          options: {
+            projectPath: resolvedProjectPath,
+            cwd: resolvedProjectPath,
+            sessionId: effectiveSessionId,
+            resume: Boolean(effectiveSessionId),
+            toolsSettings,
+            permissionMode,
+            model: claudeModel,
+            images: uploadedImages,
+          },
+        });
+      }
+
+      setInput('');
+      inputValueRef.current = '';
+      resetCommandMenuState();
+      setAttachedImages([]);
+      setUploadingImages(new Map());
+      setImageErrors(new Map());
+      setIsTextareaExpanded(false);
+      setThinkingMode('none');
+
+      if (textareaRef.current) {
+        textareaRef.current.style.height = 'auto';
+      }
+
+      safeLocalStorage.removeItem(`draft_input_${selectedProject.name}`);
+    },
+    [
+      attachedImages,
+      claudeModel,
+      codexModel,
+      currentSessionId,
+      cursorModel,
+      executeCommand,
+      isLoading,
+      onSessionActive,
+      onSessionProcessing,
+      pendingViewSessionRef,
+      permissionMode,
+      provider,
+      resetCommandMenuState,
+      scrollToBottom,
+      selectedProject,
+      selectedSession?.id,
+      sendMessage,
+      setCanAbortSession,
+      setChatMessages,
+      setClaudeStatus,
+      setIsLoading,
+      setIsUserScrolledUp,
+      slashCommands,
+      thinkingMode,
+    ],
+  );
+
+  useEffect(() => {
+    handleSubmitRef.current = handleSubmit;
+  }, [handleSubmit]);
+
+  useEffect(() => {
+    inputValueRef.current = input;
+  }, [input]);
+
+  useEffect(() => {
+    if (!selectedProject) {
+      return;
+    }
+    const savedInput = safeLocalStorage.getItem(`draft_input_${selectedProject.name}`) || '';
+    setInput((previous) => {
+      const next = previous === savedInput ? previous : savedInput;
+      inputValueRef.current = next;
+      return next;
+    });
+  }, [selectedProject?.name]);
+
+  useEffect(() => {
+    if (!selectedProject) {
+      return;
+    }
+    if (input !== '') {
+      safeLocalStorage.setItem(`draft_input_${selectedProject.name}`, input);
+    } else {
+      safeLocalStorage.removeItem(`draft_input_${selectedProject.name}`);
+    }
+  }, [input, selectedProject]);
+
+  useEffect(() => {
+    if (!textareaRef.current) {
+      return;
+    }
+    // Re-run when input changes so restored drafts get the same autosize behavior as typed text.
+    textareaRef.current.style.height = 'auto';
+    textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    const lineHeight = parseInt(window.getComputedStyle(textareaRef.current).lineHeight);
+    const expanded = textareaRef.current.scrollHeight > lineHeight * 2;
+    setIsTextareaExpanded(expanded);
+  }, [input]);
+
+  useEffect(() => {
+    if (!textareaRef.current || input.trim()) {
+      return;
+    }
+    textareaRef.current.style.height = 'auto';
+    setIsTextareaExpanded(false);
+  }, [input]);
+
+  const handleInputChange = useCallback(
+    (event: ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = event.target.value;
+      const cursorPos = event.target.selectionStart;
+
+      setInput(newValue);
+      inputValueRef.current = newValue;
+      setCursorPosition(cursorPos);
+
+      if (!newValue.trim()) {
+        event.target.style.height = 'auto';
+        setIsTextareaExpanded(false);
+        resetCommandMenuState();
+        return;
+      }
+
+      handleCommandInputChange(newValue, cursorPos);
+    },
+    [handleCommandInputChange, resetCommandMenuState, setCursorPosition],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (handleCommandMenuKeyDown(event)) {
+        return;
+      }
+
+      if (handleFileMentionsKeyDown(event)) {
+        return;
+      }
+
+      if (event.key === 'Tab' && !showFileDropdown && !showCommandMenu) {
+        event.preventDefault();
+        cyclePermissionMode();
+        return;
+      }
+
+      if (event.key === 'Enter') {
+        if (event.nativeEvent.isComposing) {
+          return;
+        }
+
+        if ((event.ctrlKey || event.metaKey) && !event.shiftKey) {
+          event.preventDefault();
+          handleSubmit(event);
+        } else if (!event.shiftKey && !event.ctrlKey && !event.metaKey && !sendByCtrlEnter) {
+          event.preventDefault();
+          handleSubmit(event);
+        }
+      }
+    },
+    [
+      cyclePermissionMode,
+      handleCommandMenuKeyDown,
+      handleFileMentionsKeyDown,
+      handleSubmit,
+      sendByCtrlEnter,
+      showCommandMenu,
+      showFileDropdown,
+    ],
+  );
+
+  const handleTextareaClick = useCallback(
+    (event: MouseEvent<HTMLTextAreaElement>) => {
+      setCursorPosition(event.currentTarget.selectionStart);
+    },
+    [setCursorPosition],
+  );
+
+  const handleTextareaInput = useCallback(
+    (event: FormEvent<HTMLTextAreaElement>) => {
+      const target = event.currentTarget;
+      target.style.height = 'auto';
+      target.style.height = `${target.scrollHeight}px`;
+      setCursorPosition(target.selectionStart);
+      syncInputOverlayScroll(target);
+
+      const lineHeight = parseInt(window.getComputedStyle(target).lineHeight);
+      setIsTextareaExpanded(target.scrollHeight > lineHeight * 2);
+    },
+    [setCursorPosition, syncInputOverlayScroll],
+  );
+
+  const handleClearInput = useCallback(() => {
+    setInput('');
+    inputValueRef.current = '';
+    resetCommandMenuState();
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.focus();
+    }
+    setIsTextareaExpanded(false);
+  }, [resetCommandMenuState]);
+
+  const handleAbortSession = useCallback(() => {
+    if (!canAbortSession) {
+      return;
+    }
+
+    const pendingSessionId =
+      typeof window !== 'undefined' ? sessionStorage.getItem('pendingSessionId') : null;
+    const cursorSessionId =
+      typeof window !== 'undefined' ? sessionStorage.getItem('cursorSessionId') : null;
+
+    const candidateSessionIds = [
+      currentSessionId,
+      pendingViewSessionRef.current?.sessionId || null,
+      pendingSessionId,
+      provider === 'cursor' ? cursorSessionId : null,
+      selectedSession?.id || null,
+    ];
+
+    const targetSessionId =
+      candidateSessionIds.find((sessionId) => Boolean(sessionId) && !isTemporarySessionId(sessionId)) || null;
+
+    if (!targetSessionId) {
+      console.warn('Abort requested but no concrete session ID is available yet.');
+      return;
+    }
+
+    sendMessage({
+      type: 'abort-session',
+      sessionId: targetSessionId,
+      provider,
+    });
+  }, [canAbortSession, currentSessionId, pendingViewSessionRef, provider, selectedSession?.id, sendMessage]);
+
+  const handleTranscript = useCallback((text: string) => {
+    if (!text.trim()) {
+      return;
+    }
+
+    setInput((previousInput) => {
+      const newInput = previousInput.trim() ? `${previousInput} ${text}` : text;
+      inputValueRef.current = newInput;
+
+      setTimeout(() => {
+        if (!textareaRef.current) {
+          return;
+        }
+
+        textareaRef.current.style.height = 'auto';
+        textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+        const lineHeight = parseInt(window.getComputedStyle(textareaRef.current).lineHeight);
+        setIsTextareaExpanded(textareaRef.current.scrollHeight > lineHeight * 2);
+      }, 0);
+
+      return newInput;
+    });
+  }, []);
+
+  const handleGrantToolPermission = useCallback(
+    (suggestion: { entry: string; toolName: string }) => {
+      if (!suggestion || provider !== 'claude') {
+        return { success: false };
+      }
+      return grantClaudeToolPermission(suggestion.entry);
+    },
+    [provider],
+  );
+
+  const handlePermissionDecision = useCallback(
+    (
+      requestIds: string | string[],
+      decision: { allow?: boolean; message?: string; rememberEntry?: string | null; updatedInput?: unknown },
+    ) => {
+      const ids = Array.isArray(requestIds) ? requestIds : [requestIds];
+      const validIds = ids.filter(Boolean);
+      if (validIds.length === 0) {
+        return;
+      }
+
+      validIds.forEach((requestId) => {
+        sendMessage({
+          type: 'claude-permission-response',
+          requestId,
+          allow: Boolean(decision?.allow),
+          updatedInput: decision?.updatedInput,
+          message: decision?.message,
+          rememberEntry: decision?.rememberEntry,
+        });
+      });
+
+      setPendingPermissionRequests((previous) => {
+        const next = previous.filter((request) => !validIds.includes(request.requestId));
+        if (next.length === 0) {
+          setClaudeStatus(null);
+        }
+        return next;
+      });
+    },
+    [sendMessage, setClaudeStatus, setPendingPermissionRequests],
+  );
+
+  const [isInputFocused, setIsInputFocused] = useState(false);
+
+  const handleInputFocusChange = useCallback(
+    (focused: boolean) => {
+      setIsInputFocused(focused);
+      onInputFocusChange?.(focused);
+    },
+    [onInputFocusChange],
+  );
+
+  return {
+    input,
+    setInput,
+    textareaRef,
+    inputHighlightRef,
+    isTextareaExpanded,
+    thinkingMode,
+    setThinkingMode,
+    slashCommandsCount,
+    filteredCommands,
+    frequentCommands,
+    commandQuery,
+    showCommandMenu,
+    selectedCommandIndex,
+    resetCommandMenuState,
+    handleCommandSelect,
+    handleToggleCommandMenu,
+    showFileDropdown,
+    filteredFiles: filteredFiles as MentionableFile[],
+    selectedFileIndex,
+    renderInputWithMentions,
+    selectFile,
+    attachedImages,
+    setAttachedImages,
+    uploadingImages,
+    imageErrors,
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    openImagePicker: open,
+    handleSubmit,
+    handleInputChange,
+    handleKeyDown,
+    handlePaste,
+    handleTextareaClick,
+    handleTextareaInput,
+    syncInputOverlayScroll,
+    handleClearInput,
+    handleAbortSession,
+    handleTranscript,
+    handlePermissionDecision,
+    handleGrantToolPermission,
+    handleInputFocusChange,
+    isInputFocused,
+  };
+}
--- a/src/components/chat/hooks/useChatProviderState.ts
+++ b/src/components/chat/hooks/useChatProviderState.ts
@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { authenticatedFetch } from '../../../utils/api';
+import { CLAUDE_MODELS, CODEX_MODELS, CURSOR_MODELS } from '../../../../shared/modelConstants';
+import type { PendingPermissionRequest, PermissionMode, Provider } from '../types/types';
+import type { ProjectSession, SessionProvider } from '../../../types/app';
+
+interface UseChatProviderStateArgs {
+  selectedSession: ProjectSession | null;
+}
+
+export function useChatProviderState({ selectedSession }: UseChatProviderStateArgs) {
+  const [permissionMode, setPermissionMode] = useState<PermissionMode>('default');
+  const [pendingPermissionRequests, setPendingPermissionRequests] = useState<PendingPermissionRequest[]>([]);
+  const [provider, setProvider] = useState<SessionProvider>(() => {
+    return (localStorage.getItem('selected-provider') as SessionProvider) || 'claude';
+  });
+  const [cursorModel, setCursorModel] = useState<string>(() => {
+    return localStorage.getItem('cursor-model') || CURSOR_MODELS.DEFAULT;
+  });
+  const [claudeModel, setClaudeModel] = useState<string>(() => {
+    return localStorage.getItem('claude-model') || CLAUDE_MODELS.DEFAULT;
+  });
+  const [codexModel, setCodexModel] = useState<string>(() => {
+    return localStorage.getItem('codex-model') || CODEX_MODELS.DEFAULT;
+  });
+
+  const lastProviderRef = useRef(provider);
+
+  useEffect(() => {
+    if (!selectedSession?.id) {
+      return;
+    }
+
+    const savedMode = localStorage.getItem(`permissionMode-${selectedSession.id}`);
+    setPermissionMode((savedMode as PermissionMode) || 'default');
+  }, [selectedSession?.id]);
+
+  useEffect(() => {
+    if (!selectedSession?.__provider || selectedSession.__provider === provider) {
+      return;
+    }
+
+    setProvider(selectedSession.__provider);
+    localStorage.setItem('selected-provider', selectedSession.__provider);
+  }, [provider, selectedSession]);
+
+  useEffect(() => {
+    if (lastProviderRef.current === provider) {
+      return;
+    }
+    setPendingPermissionRequests([]);
+    lastProviderRef.current = provider;
+  }, [provider]);
+
+  useEffect(() => {
+    setPendingPermissionRequests((previous) =>
+      previous.filter((request) => !request.sessionId || request.sessionId === selectedSession?.id),
+    );
+  }, [selectedSession?.id]);
+
+  useEffect(() => {
+    if (provider !== 'cursor') {
+      return;
+    }
+
+    authenticatedFetch('/api/cursor/config')
+      .then((response) => response.json())
+      .then((data) => {
+        if (!data.success || !data.config?.model?.modelId) {
+          return;
+        }
+
+        const modelId = data.config.model.modelId as string;
+        if (!localStorage.getItem('cursor-model')) {
+          setCursorModel(modelId);
+        }
+      })
+      .catch((error) => {
+        console.error('Error loading Cursor config:', error);
+      });
+  }, [provider]);
+
+  const cyclePermissionMode = useCallback(() => {
+    const modes: PermissionMode[] =
+      provider === 'codex'
+        ? ['default', 'acceptEdits', 'bypassPermissions']
+        : ['default', 'acceptEdits', 'bypassPermissions', 'plan'];
+
+    const currentIndex = modes.indexOf(permissionMode);
+    const nextIndex = (currentIndex + 1) % modes.length;
+    const nextMode = modes[nextIndex];
+    setPermissionMode(nextMode);
+
+    if (selectedSession?.id) {
+      localStorage.setItem(`permissionMode-${selectedSession.id}`, nextMode);
+    }
+  }, [permissionMode, provider, selectedSession?.id]);
+
+  return {
+    provider,
+    setProvider,
+    cursorModel,
+    setCursorModel,
+    claudeModel,
+    setClaudeModel,
+    codexModel,
+    setCodexModel,
+    permissionMode,
+    setPermissionMode,
+    pendingPermissionRequests,
+    setPendingPermissionRequests,
+    cyclePermissionMode,
+  };
+}
--- a/src/components/chat/hooks/useChatRealtimeHandlers.ts
+++ b/src/components/chat/hooks/useChatRealtimeHandlers.ts
--- a/src/components/chat/hooks/useChatSessionState.ts
+++ b/src/components/chat/hooks/useChatSessionState.ts
@@ -0,0 +1,745 @@
+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';
+import { safeLocalStorage } from '../utils/chatStorage';
+import {
+  convertCursorSessionMessages,
+  convertSessionMessages,
+  createCachedDiffCalculator,
+  type DiffCalculator,
+} from '../utils/messageTransforms';
+
+const MESSAGES_PER_PAGE = 20;
+const INITIAL_VISIBLE_MESSAGES = 100;
+
+type PendingViewSession = {
+  sessionId: string | null;
+  startedAt: number;
+};
+
+interface UseChatSessionStateArgs {
+  selectedProject: Project | null;
+  selectedSession: ProjectSession | null;
+  ws: WebSocket | null;
+  sendMessage: (message: unknown) => void;
+  autoScrollToBottom?: boolean;
+  externalMessageUpdate?: number;
+  processingSessions?: Set<string>;
+  resetStreamingState: () => void;
+  pendingViewSessionRef: MutableRefObject<PendingViewSession | null>;
+}
+
+interface ScrollRestoreState {
+  height: number;
+  top: number;
+}
+
+export function useChatSessionState({
+  selectedProject,
+  selectedSession,
+  ws,
+  sendMessage,
+  autoScrollToBottom,
+  externalMessageUpdate,
+  processingSessions,
+  resetStreamingState,
+  pendingViewSessionRef,
+}: UseChatSessionStateArgs) {
+  const [chatMessages, setChatMessages] = useState<ChatMessage[]>(() => {
+    if (typeof window !== 'undefined' && selectedProject) {
+      const saved = safeLocalStorage.getItem(`chat_messages_${selectedProject.name}`);
+      if (saved) {
+        try {
+          return JSON.parse(saved) as ChatMessage[];
+        } catch {
+          console.error('Failed to parse saved chat messages, resetting');
+          safeLocalStorage.removeItem(`chat_messages_${selectedProject.name}`);
+          return [];
+        }
+      }
+      return [];
+    }
+    return [];
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentSessionId, setCurrentSessionId] = useState<string | null>(selectedSession?.id || null);
+  const [sessionMessages, setSessionMessages] = useState<any[]>([]);
+  const [isLoadingSessionMessages, setIsLoadingSessionMessages] = useState(false);
+  const [isLoadingMoreMessages, setIsLoadingMoreMessages] = useState(false);
+  const [hasMoreMessages, setHasMoreMessages] = useState(false);
+  const [totalMessages, setTotalMessages] = useState(0);
+  const [isSystemSessionChange, setIsSystemSessionChange] = useState(false);
+  const [canAbortSession, setCanAbortSession] = useState(false);
+  const [isUserScrolledUp, setIsUserScrolledUp] = useState(false);
+  const [tokenBudget, setTokenBudget] = useState<Record<string, unknown> | null>(null);
+  const [visibleMessageCount, setVisibleMessageCount] = useState(INITIAL_VISIBLE_MESSAGES);
+  const [claudeStatus, setClaudeStatus] = useState<{ text: string; tokens: number; can_interrupt: boolean } | null>(null);
+  const [allMessagesLoaded, setAllMessagesLoaded] = useState(false);
+  const [isLoadingAllMessages, setIsLoadingAllMessages] = useState(false);
+  const [loadAllJustFinished, setLoadAllJustFinished] = useState(false);
+  const [showLoadAllOverlay, setShowLoadAllOverlay] = useState(false);
+
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const isLoadingSessionRef = useRef(false);
+  const isLoadingMoreRef = useRef(false);
+  const allMessagesLoadedRef = useRef(false);
+  const topLoadLockRef = useRef(false);
+  const pendingScrollRestoreRef = useRef<ScrollRestoreState | null>(null);
+  const pendingInitialScrollRef = useRef(true);
+  const messagesOffsetRef = useRef(0);
+  const scrollPositionRef = useRef({ height: 0, top: 0 });
+  const loadAllFinishedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const loadAllOverlayTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const createDiff = useMemo<DiffCalculator>(() => createCachedDiffCalculator(), []);
+
+  const loadSessionMessages = useCallback(
+    async (projectName: string, sessionId: string, loadMore = false, provider: Provider | string = 'claude') => {
+      if (!projectName || !sessionId) {
+        return [] as any[];
+      }
+
+      const isInitialLoad = !loadMore;
+      if (isInitialLoad) {
+        setIsLoadingSessionMessages(true);
+      } else {
+        setIsLoadingMoreMessages(true);
+      }
+
+      try {
+        const currentOffset = loadMore ? messagesOffsetRef.current : 0;
+        const response = await (api.sessionMessages as any)(
+          projectName,
+          sessionId,
+          MESSAGES_PER_PAGE,
+          currentOffset,
+          provider,
+        );
+        if (!response.ok) {
+          throw new Error('Failed to load session messages');
+        }
+
+        const data = await response.json();
+        if (isInitialLoad && data.tokenUsage) {
+          setTokenBudget(data.tokenUsage);
+        }
+
+        if (data.hasMore !== undefined) {
+          const loadedCount = data.messages?.length || 0;
+          setHasMoreMessages(Boolean(data.hasMore));
+          setTotalMessages(Number(data.total || 0));
+          messagesOffsetRef.current = currentOffset + loadedCount;
+          return data.messages || [];
+        }
+
+        const messages = data.messages || [];
+        setHasMoreMessages(false);
+        setTotalMessages(messages.length);
+        messagesOffsetRef.current = messages.length;
+        return messages;
+      } catch (error) {
+        console.error('Error loading session messages:', error);
+        return [];
+      } finally {
+        if (isInitialLoad) {
+          setIsLoadingSessionMessages(false);
+        } else {
+          setIsLoadingMoreMessages(false);
+        }
+      }
+    },
+    [],
+  );
+
+  const loadCursorSessionMessages = useCallback(async (projectPath: string, sessionId: string) => {
+    if (!projectPath || !sessionId) {
+      return [] as ChatMessage[];
+    }
+
+    setIsLoadingSessionMessages(true);
+    try {
+      const url = `/api/cursor/sessions/${encodeURIComponent(sessionId)}?projectPath=${encodeURIComponent(projectPath)}`;
+      const response = await authenticatedFetch(url);
+      if (!response.ok) {
+        return [];
+      }
+
+      const data = await response.json();
+      const blobs = (data?.session?.messages || []) as any[];
+      return convertCursorSessionMessages(blobs, projectPath);
+    } catch (error) {
+      console.error('Error loading Cursor session messages:', error);
+      return [];
+    } finally {
+      setIsLoadingSessionMessages(false);
+    }
+  }, []);
+
+  const convertedMessages = useMemo(() => {
+    return convertSessionMessages(sessionMessages);
+  }, [sessionMessages]);
+
+  const scrollToBottom = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return;
+    }
+    container.scrollTop = container.scrollHeight;
+  }, []);
+
+  const scrollToBottomAndReset = useCallback(() => {
+    scrollToBottom();
+    if (allMessagesLoaded) {
+      setVisibleMessageCount(INITIAL_VISIBLE_MESSAGES);
+      setAllMessagesLoaded(false);
+      allMessagesLoadedRef.current = false;
+    }
+  }, [allMessagesLoaded, scrollToBottom]);
+
+  const isNearBottom = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return false;
+    }
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    return scrollHeight - scrollTop - clientHeight < 50;
+  }, []);
+
+  const loadOlderMessages = useCallback(
+    async (container: HTMLDivElement) => {
+      if (!container || isLoadingMoreRef.current || isLoadingMoreMessages) {
+        return false;
+      }
+      if (allMessagesLoadedRef.current) return false;
+      if (!hasMoreMessages || !selectedSession || !selectedProject) {
+        return false;
+      }
+
+      const sessionProvider = selectedSession.__provider || 'claude';
+      if (sessionProvider === 'cursor') {
+        return false;
+      }
+
+      isLoadingMoreRef.current = true;
+      const previousScrollHeight = container.scrollHeight;
+      const previousScrollTop = container.scrollTop;
+
+      try {
+        const moreMessages = await loadSessionMessages(
+          selectedProject.name,
+          selectedSession.id,
+          true,
+          sessionProvider,
+        );
+
+        if (moreMessages.length === 0) {
+          return false;
+        }
+
+        pendingScrollRestoreRef.current = {
+          height: previousScrollHeight,
+          top: previousScrollTop,
+        };
+        setSessionMessages((previous) => [...moreMessages, ...previous]);
+        // Keep the rendered window in sync with top-pagination so newly loaded history becomes visible.
+        setVisibleMessageCount((previousCount) => previousCount + moreMessages.length);
+        return true;
+      } finally {
+        isLoadingMoreRef.current = false;
+      }
+    },
+    [hasMoreMessages, isLoadingMoreMessages, loadSessionMessages, selectedProject, selectedSession],
+  );
+
+  const handleScroll = useCallback(async () => {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return;
+    }
+
+    const nearBottom = isNearBottom();
+    setIsUserScrolledUp(!nearBottom);
+
+    if (!allMessagesLoadedRef.current) {
+      const scrolledNearTop = container.scrollTop < 100;
+      if (!scrolledNearTop) {
+        topLoadLockRef.current = false;
+        return;
+      }
+
+      if (topLoadLockRef.current) {
+        if (container.scrollTop > 20) {
+          topLoadLockRef.current = false;
+        }
+        return;
+      }
+
+      const didLoad = await loadOlderMessages(container);
+      if (didLoad) {
+        topLoadLockRef.current = true;
+      }
+    }
+  }, [isNearBottom, loadOlderMessages]);
+
+  useLayoutEffect(() => {
+    if (!pendingScrollRestoreRef.current || !scrollContainerRef.current) {
+      return;
+    }
+
+    const { height, top } = pendingScrollRestoreRef.current;
+    const container = scrollContainerRef.current;
+    const newScrollHeight = container.scrollHeight;
+    const scrollDiff = newScrollHeight - height;
+    container.scrollTop = top + Math.max(scrollDiff, 0);
+    pendingScrollRestoreRef.current = null;
+  }, [chatMessages.length]);
+
+  useEffect(() => {
+    pendingInitialScrollRef.current = true;
+    topLoadLockRef.current = false;
+    pendingScrollRestoreRef.current = null;
+    setVisibleMessageCount(INITIAL_VISIBLE_MESSAGES);
+    setIsUserScrolledUp(false);
+  }, [selectedProject?.name, selectedSession?.id]);
+
+  useEffect(() => {
+    if (!pendingInitialScrollRef.current || !scrollContainerRef.current || isLoadingSessionMessages) {
+      return;
+    }
+
+    if (chatMessages.length === 0) {
+      pendingInitialScrollRef.current = false;
+      return;
+    }
+
+    pendingInitialScrollRef.current = false;
+    setTimeout(() => {
+      scrollToBottom();
+    }, 200);
+  }, [chatMessages.length, isLoadingSessionMessages, scrollToBottom]);
+
+  useEffect(() => {
+    const loadMessages = async () => {
+      if (selectedSession && selectedProject) {
+        const provider = (localStorage.getItem('selected-provider') as Provider) || 'claude';
+        isLoadingSessionRef.current = true;
+
+        const sessionChanged = currentSessionId !== null && currentSessionId !== selectedSession.id;
+        if (sessionChanged) {
+          if (!isSystemSessionChange) {
+            resetStreamingState();
+            pendingViewSessionRef.current = null;
+            setChatMessages([]);
+            setSessionMessages([]);
+            setClaudeStatus(null);
+            setCanAbortSession(false);
+          }
+
+          messagesOffsetRef.current = 0;
+          setHasMoreMessages(false);
+          setTotalMessages(0);
+          setVisibleMessageCount(INITIAL_VISIBLE_MESSAGES);
+          setAllMessagesLoaded(false);
+          allMessagesLoadedRef.current = false;
+          setIsLoadingAllMessages(false);
+          setLoadAllJustFinished(false);
+          setShowLoadAllOverlay(false);
+          if (loadAllOverlayTimerRef.current) clearTimeout(loadAllOverlayTimerRef.current);
+          if (loadAllFinishedTimerRef.current) clearTimeout(loadAllFinishedTimerRef.current);
+          setTokenBudget(null);
+          setIsLoading(false);
+
+          if (ws) {
+            sendMessage({
+              type: 'check-session-status',
+              sessionId: selectedSession.id,
+              provider,
+            });
+          }
+        } else if (currentSessionId === null) {
+          messagesOffsetRef.current = 0;
+          setHasMoreMessages(false);
+          setTotalMessages(0);
+
+          if (ws) {
+            sendMessage({
+              type: 'check-session-status',
+              sessionId: selectedSession.id,
+              provider,
+            });
+          }
+        }
+
+        if (provider === 'cursor') {
+          setCurrentSessionId(selectedSession.id);
+          sessionStorage.setItem('cursorSessionId', selectedSession.id);
+
+          if (!isSystemSessionChange) {
+            const projectPath = selectedProject.fullPath || selectedProject.path || '';
+            const converted = await loadCursorSessionMessages(projectPath, selectedSession.id);
+            setSessionMessages([]);
+            setChatMessages(converted);
+          } else {
+            setIsSystemSessionChange(false);
+          }
+        } else {
+          setCurrentSessionId(selectedSession.id);
+
+          if (!isSystemSessionChange) {
+            const messages = await loadSessionMessages(
+              selectedProject.name,
+              selectedSession.id,
+              false,
+              selectedSession.__provider || 'claude',
+            );
+            setSessionMessages(messages);
+          } else {
+            setIsSystemSessionChange(false);
+          }
+        }
+      } else {
+        if (!isSystemSessionChange) {
+          resetStreamingState();
+          pendingViewSessionRef.current = null;
+          setChatMessages([]);
+          setSessionMessages([]);
+          setClaudeStatus(null);
+          setCanAbortSession(false);
+          setIsLoading(false);
+        }
+
+        setCurrentSessionId(null);
+        sessionStorage.removeItem('cursorSessionId');
+        messagesOffsetRef.current = 0;
+        setHasMoreMessages(false);
+        setTotalMessages(0);
+        setTokenBudget(null);
+      }
+
+      setTimeout(() => {
+        isLoadingSessionRef.current = false;
+      }, 250);
+    };
+
+    loadMessages();
+  }, [
+    // Intentionally exclude currentSessionId: this effect sets it and should not retrigger another full load.
+    isSystemSessionChange,
+    loadCursorSessionMessages,
+    loadSessionMessages,
+    pendingViewSessionRef,
+    resetStreamingState,
+    selectedProject,
+    selectedSession,
+    sendMessage,
+    ws,
+  ]);
+
+  useEffect(() => {
+    if (!externalMessageUpdate || !selectedSession || !selectedProject) {
+      return;
+    }
+
+    const reloadExternalMessages = async () => {
+      try {
+        const provider = (localStorage.getItem('selected-provider') as Provider) || 'claude';
+
+        if (provider === 'cursor') {
+          const projectPath = selectedProject.fullPath || selectedProject.path || '';
+          const converted = await loadCursorSessionMessages(projectPath, selectedSession.id);
+          setSessionMessages([]);
+          setChatMessages(converted);
+          return;
+        }
+
+        const messages = await loadSessionMessages(
+          selectedProject.name,
+          selectedSession.id,
+          false,
+          selectedSession.__provider || 'claude',
+        );
+        setSessionMessages(messages);
+
+        const shouldAutoScroll = Boolean(autoScrollToBottom) && isNearBottom();
+        if (shouldAutoScroll) {
+          setTimeout(() => scrollToBottom(), 200);
+        }
+      } catch (error) {
+        console.error('Error reloading messages from external update:', error);
+      }
+    };
+
+    reloadExternalMessages();
+  }, [
+    autoScrollToBottom,
+    externalMessageUpdate,
+    isNearBottom,
+    loadCursorSessionMessages,
+    loadSessionMessages,
+    scrollToBottom,
+    selectedProject,
+    selectedSession,
+  ]);
+
+  useEffect(() => {
+    if (selectedSession?.id) {
+      pendingViewSessionRef.current = null;
+    }
+  }, [pendingViewSessionRef, selectedSession?.id]);
+
+  useEffect(() => {
+    if (sessionMessages.length > 0) {
+      setChatMessages(convertedMessages);
+    }
+  }, [convertedMessages, sessionMessages.length]);
+
+  useEffect(() => {
+    if (selectedProject && chatMessages.length > 0) {
+      safeLocalStorage.setItem(`chat_messages_${selectedProject.name}`, JSON.stringify(chatMessages));
+    }
+  }, [chatMessages, selectedProject]);
+
+  useEffect(() => {
+    if (!selectedProject || !selectedSession?.id || selectedSession.id.startsWith('new-session-')) {
+      setTokenBudget(null);
+      return;
+    }
+
+    const sessionProvider = selectedSession.__provider || 'claude';
+    if (sessionProvider !== 'claude') {
+      return;
+    }
+
+    const fetchInitialTokenUsage = async () => {
+      try {
+        const url = `/api/projects/${selectedProject.name}/sessions/${selectedSession.id}/token-usage`;
+        const response = await authenticatedFetch(url);
+        if (response.ok) {
+          const data = await response.json();
+          setTokenBudget(data);
+        } else {
+          setTokenBudget(null);
+        }
+      } catch (error) {
+        console.error('Failed to fetch initial token usage:', error);
+      }
+    };
+
+    fetchInitialTokenUsage();
+  }, [selectedProject, selectedSession?.id, selectedSession?.__provider]);
+
+  const visibleMessages = useMemo(() => {
+    if (chatMessages.length <= visibleMessageCount) {
+      return chatMessages;
+    }
+    return chatMessages.slice(-visibleMessageCount);
+  }, [chatMessages, visibleMessageCount]);
+
+  useEffect(() => {
+    if (!autoScrollToBottom && scrollContainerRef.current) {
+      const container = scrollContainerRef.current;
+      scrollPositionRef.current = {
+        height: container.scrollHeight,
+        top: container.scrollTop,
+      };
+    }
+  });
+
+  useEffect(() => {
+    if (!scrollContainerRef.current || chatMessages.length === 0) {
+      return;
+    }
+
+    if (isLoadingMoreRef.current || isLoadingMoreMessages || pendingScrollRestoreRef.current) {
+      return;
+    }
+
+    if (autoScrollToBottom) {
+      if (!isUserScrolledUp) {
+        setTimeout(() => scrollToBottom(), 50);
+      }
+      return;
+    }
+
+    const container = scrollContainerRef.current;
+    const prevHeight = scrollPositionRef.current.height;
+    const prevTop = scrollPositionRef.current.top;
+    const newHeight = container.scrollHeight;
+    const heightDiff = newHeight - prevHeight;
+
+    if (heightDiff > 0 && prevTop > 0) {
+      container.scrollTop = prevTop + heightDiff;
+    }
+  }, [autoScrollToBottom, chatMessages.length, isLoadingMoreMessages, isUserScrolledUp, scrollToBottom]);
+
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return;
+    }
+
+    container.addEventListener('scroll', handleScroll);
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, [handleScroll]);
+
+  useEffect(() => {
+    const activeViewSessionId = selectedSession?.id || currentSessionId;
+    if (!activeViewSessionId || !processingSessions) {
+      return;
+    }
+
+    const shouldBeProcessing = processingSessions.has(activeViewSessionId);
+    if (shouldBeProcessing && !isLoading) {
+      setIsLoading(true);
+      setCanAbortSession(true);
+    }
+  }, [currentSessionId, isLoading, processingSessions, selectedSession?.id]);
+
+  // Show "Load all" overlay after a batch finishes loading, persist for 2s then hide
+  const prevLoadingRef = useRef(false);
+  useEffect(() => {
+    const wasLoading = prevLoadingRef.current;
+    prevLoadingRef.current = isLoadingMoreMessages;
+
+    if (wasLoading && !isLoadingMoreMessages && hasMoreMessages) {
+      if (loadAllOverlayTimerRef.current) clearTimeout(loadAllOverlayTimerRef.current);
+      setShowLoadAllOverlay(true);
+      loadAllOverlayTimerRef.current = setTimeout(() => {
+        setShowLoadAllOverlay(false);
+      }, 2000);
+    }
+    if (!hasMoreMessages && !isLoadingMoreMessages) {
+      if (loadAllOverlayTimerRef.current) clearTimeout(loadAllOverlayTimerRef.current);
+      setShowLoadAllOverlay(false);
+    }
+    return () => {
+      if (loadAllOverlayTimerRef.current) clearTimeout(loadAllOverlayTimerRef.current);
+    };
+  }, [isLoadingMoreMessages, hasMoreMessages]);
+
+  const loadAllMessages = useCallback(async () => {
+    if (!selectedSession || !selectedProject) return;
+    if (isLoadingAllMessages) return;
+    const sessionProvider = selectedSession.__provider || 'claude';
+    if (sessionProvider === 'cursor') {
+      setVisibleMessageCount(Infinity);
+      setAllMessagesLoaded(true);
+      allMessagesLoadedRef.current = true;
+      setLoadAllJustFinished(true);
+      if (loadAllFinishedTimerRef.current) clearTimeout(loadAllFinishedTimerRef.current);
+      loadAllFinishedTimerRef.current = setTimeout(() => {
+        setLoadAllJustFinished(false);
+        setShowLoadAllOverlay(false);
+      }, 1000);
+      return;
+    }
+
+    const requestSessionId = selectedSession.id;
+
+    allMessagesLoadedRef.current = true;
+    isLoadingMoreRef.current = true;
+    setIsLoadingAllMessages(true);
+    setShowLoadAllOverlay(true);
+
+    const container = scrollContainerRef.current;
+    const previousScrollHeight = container ? container.scrollHeight : 0;
+    const previousScrollTop = container ? container.scrollTop : 0;
+
+    try {
+      const response = await (api.sessionMessages as any)(
+        selectedProject.name,
+        requestSessionId,
+        null,
+        0,
+        sessionProvider,
+      );
+
+      if (currentSessionId !== requestSessionId) return;
+
+      if (response.ok) {
+        const data = await response.json();
+        const allMessages = data.messages || data;
+
+        if (container) {
+          pendingScrollRestoreRef.current = {
+            height: previousScrollHeight,
+            top: previousScrollTop,
+          };
+        }
+
+        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);
+
+        setLoadAllJustFinished(true);
+        if (loadAllFinishedTimerRef.current) clearTimeout(loadAllFinishedTimerRef.current);
+        loadAllFinishedTimerRef.current = setTimeout(() => {
+          setLoadAllJustFinished(false);
+          setShowLoadAllOverlay(false);
+        }, 1000);
+      } else {
+        allMessagesLoadedRef.current = false;
+        setShowLoadAllOverlay(false);
+      }
+    } catch (error) {
+      console.error('Error loading all messages:', error);
+      allMessagesLoadedRef.current = false;
+      setShowLoadAllOverlay(false);
+    } finally {
+      isLoadingMoreRef.current = false;
+      setIsLoadingAllMessages(false);
+    }
+  }, [selectedSession, selectedProject, isLoadingAllMessages, currentSessionId]);
+
+  const loadEarlierMessages = useCallback(() => {
+    setVisibleMessageCount((previousCount) => previousCount + 100);
+  }, []);
+
+  return {
+    chatMessages,
+    setChatMessages,
+    isLoading,
+    setIsLoading,
+    currentSessionId,
+    setCurrentSessionId,
+    sessionMessages,
+    setSessionMessages,
+    isLoadingSessionMessages,
+    isLoadingMoreMessages,
+    hasMoreMessages,
+    totalMessages,
+    isSystemSessionChange,
+    setIsSystemSessionChange,
+    canAbortSession,
+    setCanAbortSession,
+    isUserScrolledUp,
+    setIsUserScrolledUp,
+    tokenBudget,
+    setTokenBudget,
+    visibleMessageCount,
+    visibleMessages,
+    loadEarlierMessages,
+    loadAllMessages,
+    allMessagesLoaded,
+    isLoadingAllMessages,
+    loadAllJustFinished,
+    showLoadAllOverlay,
+    claudeStatus,
+    setClaudeStatus,
+    createDiff,
+    scrollContainerRef,
+    scrollToBottom,
+    scrollToBottomAndReset,
+    isNearBottom,
+    handleScroll,
+    loadSessionMessages,
+    loadCursorSessionMessages,
+  };
+}
--- a/src/components/chat/hooks/useFileMentions.tsx
+++ b/src/components/chat/hooks/useFileMentions.tsx
@@ -0,0 +1,268 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { Dispatch, KeyboardEvent, RefObject, SetStateAction } from 'react';
+import { api } from '../../../utils/api';
+import { escapeRegExp } from '../utils/chatFormatting';
+import type { Project } from '../../../types/app';
+
+interface ProjectFileNode {
+  name: string;
+  type: 'file' | 'directory';
+  path?: string;
+  children?: ProjectFileNode[];
+}
+
+export interface MentionableFile {
+  name: string;
+  path: string;
+  relativePath?: string;
+}
+
+interface UseFileMentionsOptions {
+  selectedProject: Project | null;
+  input: string;
+  setInput: Dispatch<SetStateAction<string>>;
+  textareaRef: RefObject<HTMLTextAreaElement>;
+}
+
+const flattenFileTree = (files: ProjectFileNode[], basePath = ''): MentionableFile[] => {
+  let flattened: MentionableFile[] = [];
+
+  files.forEach((file) => {
+    const fullPath = basePath ? `${basePath}/${file.name}` : file.name;
+    if (file.type === 'directory' && file.children) {
+      flattened = flattened.concat(flattenFileTree(file.children, fullPath));
+      return;
+    }
+
+    if (file.type === 'file') {
+      flattened.push({
+        name: file.name,
+        path: fullPath,
+        relativePath: file.path,
+      });
+    }
+  });
+
+  return flattened;
+};
+
+export function useFileMentions({ selectedProject, input, setInput, textareaRef }: UseFileMentionsOptions) {
+  const [fileList, setFileList] = useState<MentionableFile[]>([]);
+  const [fileMentions, setFileMentions] = useState<string[]>([]);
+  const [filteredFiles, setFilteredFiles] = useState<MentionableFile[]>([]);
+  const [showFileDropdown, setShowFileDropdown] = useState(false);
+  const [selectedFileIndex, setSelectedFileIndex] = useState(-1);
+  const [cursorPosition, setCursorPosition] = useState(0);
+  const [atSymbolPosition, setAtSymbolPosition] = useState(-1);
+
+  useEffect(() => {
+    const abortController = new AbortController();
+
+    const fetchProjectFiles = async () => {
+      const projectName = selectedProject?.name;
+      setFileList([]);
+      setFilteredFiles([]);
+      if (!projectName) {
+        return;
+      }
+
+
+      try {
+        const response = await api.getFiles(projectName, { signal: abortController.signal });
+        if (!response.ok) {
+          return;
+        }
+
+        const files = (await response.json()) as ProjectFileNode[];
+        setFileList(flattenFileTree(files));
+      } catch (error) {
+        // Ignore aborts from rapid project switches; we only care about the latest request.
+        if ((error as { name?: string })?.name === 'AbortError') {
+          return;
+        }
+        console.error('Error fetching files:', error);
+      }
+    };
+
+    fetchProjectFiles();
+    return () => {
+      abortController.abort();
+    };
+  }, [selectedProject?.name]);
+
+  useEffect(() => {
+    const textBeforeCursor = input.slice(0, cursorPosition);
+    const lastAtIndex = textBeforeCursor.lastIndexOf('@');
+
+    if (lastAtIndex === -1) {
+      setShowFileDropdown(false);
+      setAtSymbolPosition(-1);
+      return;
+    }
+
+    const textAfterAt = textBeforeCursor.slice(lastAtIndex + 1);
+    if (textAfterAt.includes(' ')) {
+      setShowFileDropdown(false);
+      setAtSymbolPosition(-1);
+      return;
+    }
+
+    setAtSymbolPosition(lastAtIndex);
+    setShowFileDropdown(true);
+    setSelectedFileIndex(-1);
+
+    const matchingFiles = fileList
+      .filter(
+        (file) =>
+          file.name.toLowerCase().includes(textAfterAt.toLowerCase()) ||
+          file.path.toLowerCase().includes(textAfterAt.toLowerCase()),
+      )
+      .slice(0, 10);
+
+    setFilteredFiles(matchingFiles);
+  }, [input, cursorPosition, fileList]);
+
+  const activeFileMentions = useMemo(() => {
+    if (!input || fileMentions.length === 0) {
+      return [];
+    }
+    return fileMentions.filter((path) => input.includes(path));
+  }, [fileMentions, input]);
+
+  const sortedFileMentions = useMemo(() => {
+    if (activeFileMentions.length === 0) {
+      return [];
+    }
+    const uniqueMentions = Array.from(new Set(activeFileMentions));
+    return uniqueMentions.sort((mentionA, mentionB) => mentionB.length - mentionA.length);
+  }, [activeFileMentions]);
+
+  const fileMentionRegex = useMemo(() => {
+    if (sortedFileMentions.length === 0) {
+      return null;
+    }
+    const pattern = sortedFileMentions.map(escapeRegExp).join('|');
+    return new RegExp(`(${pattern})`, 'g');
+  }, [sortedFileMentions]);
+
+  const fileMentionSet = useMemo(() => new Set(sortedFileMentions), [sortedFileMentions]);
+
+  const renderInputWithMentions = useCallback(
+    (text: string) => {
+      if (!text) {
+        return '';
+      }
+      if (!fileMentionRegex) {
+        return text;
+      }
+
+      const parts = text.split(fileMentionRegex);
+      return parts.map((part, index) =>
+        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"
+          >
+            {part}
+          </span>
+        ) : (
+          <span key={`text-${index}`}>{part}</span>
+        ),
+      );
+    },
+    [fileMentionRegex, fileMentionSet],
+  );
+
+  const selectFile = useCallback(
+    (file: MentionableFile) => {
+      const textBeforeAt = input.slice(0, atSymbolPosition);
+      const textAfterAtQuery = input.slice(atSymbolPosition);
+      const spaceIndex = textAfterAtQuery.indexOf(' ');
+      const textAfterQuery = spaceIndex !== -1 ? textAfterAtQuery.slice(spaceIndex) : '';
+
+      const newInput = `${textBeforeAt}${file.path} ${textAfterQuery}`;
+      const newCursorPosition = textBeforeAt.length + file.path.length + 1;
+
+      if (textareaRef.current && !textareaRef.current.matches(':focus')) {
+        textareaRef.current.focus();
+      }
+
+      setInput(newInput);
+      setCursorPosition(newCursorPosition);
+      setFileMentions((previousMentions) =>
+        previousMentions.includes(file.path) ? previousMentions : [...previousMentions, file.path],
+      );
+
+      setShowFileDropdown(false);
+      setAtSymbolPosition(-1);
+
+      if (!textareaRef.current) {
+        return;
+      }
+
+      requestAnimationFrame(() => {
+        if (!textareaRef.current) {
+          return;
+        }
+        textareaRef.current.setSelectionRange(newCursorPosition, newCursorPosition);
+        if (!textareaRef.current.matches(':focus')) {
+          textareaRef.current.focus();
+        }
+      });
+    },
+    [input, atSymbolPosition, textareaRef, setInput],
+  );
+
+  const handleFileMentionsKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>): boolean => {
+      if (!showFileDropdown || filteredFiles.length === 0) {
+        return false;
+      }
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        setSelectedFileIndex((previousIndex) =>
+          previousIndex < filteredFiles.length - 1 ? previousIndex + 1 : 0,
+        );
+        return true;
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        setSelectedFileIndex((previousIndex) =>
+          previousIndex > 0 ? previousIndex - 1 : filteredFiles.length - 1,
+        );
+        return true;
+      }
+
+      if (event.key === 'Tab' || event.key === 'Enter') {
+        event.preventDefault();
+        if (selectedFileIndex >= 0) {
+          selectFile(filteredFiles[selectedFileIndex]);
+        } else if (filteredFiles.length > 0) {
+          selectFile(filteredFiles[0]);
+        }
+        return true;
+      }
+
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        setShowFileDropdown(false);
+        return true;
+      }
+
+      return false;
+    },
+    [showFileDropdown, filteredFiles, selectedFileIndex, selectFile],
+  );
+
+  return {
+    showFileDropdown,
+    filteredFiles,
+    selectedFileIndex,
+    renderInputWithMentions,
+    selectFile,
+    setCursorPosition,
+    handleFileMentionsKeyDown,
+  };
+}
--- a/src/components/chat/hooks/useSlashCommands.ts
+++ b/src/components/chat/hooks/useSlashCommands.ts
@@ -0,0 +1,375 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { Dispatch, KeyboardEvent, RefObject, SetStateAction } from 'react';
+import Fuse from 'fuse.js';
+import { authenticatedFetch } from '../../../utils/api';
+import { safeLocalStorage } from '../utils/chatStorage';
+import type { Project } from '../../../types/app';
+
+const COMMAND_QUERY_DEBOUNCE_MS = 150;
+
+export interface SlashCommand {
+  name: string;
+  description?: string;
+  namespace?: string;
+  path?: string;
+  type?: string;
+  metadata?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+interface UseSlashCommandsOptions {
+  selectedProject: Project | null;
+  input: string;
+  setInput: Dispatch<SetStateAction<string>>;
+  textareaRef: RefObject<HTMLTextAreaElement>;
+  onExecuteCommand: (command: SlashCommand, rawInput?: string) => void | Promise<void>;
+}
+
+const getCommandHistoryKey = (projectName: string) => `command_history_${projectName}`;
+
+const readCommandHistory = (projectName: string): Record<string, number> => {
+  const history = safeLocalStorage.getItem(getCommandHistoryKey(projectName));
+  if (!history) {
+    return {};
+  }
+
+  try {
+    return JSON.parse(history);
+  } catch (error) {
+    console.error('Error parsing command history:', error);
+    return {};
+  }
+};
+
+const saveCommandHistory = (projectName: string, history: Record<string, number>) => {
+  safeLocalStorage.setItem(getCommandHistoryKey(projectName), JSON.stringify(history));
+};
+
+const isPromiseLike = (value: unknown): value is Promise<unknown> =>
+  Boolean(value) && typeof (value as Promise<unknown>).then === 'function';
+
+export function useSlashCommands({
+  selectedProject,
+  input,
+  setInput,
+  textareaRef,
+  onExecuteCommand,
+}: UseSlashCommandsOptions) {
+  const [slashCommands, setSlashCommands] = useState<SlashCommand[]>([]);
+  const [filteredCommands, setFilteredCommands] = useState<SlashCommand[]>([]);
+  const [showCommandMenu, setShowCommandMenu] = useState(false);
+  const [commandQuery, setCommandQuery] = useState('');
+  const [selectedCommandIndex, setSelectedCommandIndex] = useState(-1);
+  const [slashPosition, setSlashPosition] = useState(-1);
+
+  const commandQueryTimerRef = useRef<number | null>(null);
+
+  const clearCommandQueryTimer = useCallback(() => {
+    if (commandQueryTimerRef.current !== null) {
+      window.clearTimeout(commandQueryTimerRef.current);
+      commandQueryTimerRef.current = null;
+    }
+  }, []);
+
+  const resetCommandMenuState = useCallback(() => {
+    setShowCommandMenu(false);
+    setSlashPosition(-1);
+    setCommandQuery('');
+    setSelectedCommandIndex(-1);
+    clearCommandQueryTimer();
+  }, [clearCommandQueryTimer]);
+
+  useEffect(() => {
+    const fetchCommands = async () => {
+      if (!selectedProject) {
+        setSlashCommands([]);
+        setFilteredCommands([]);
+        return;
+      }
+
+      try {
+        const response = await authenticatedFetch('/api/commands/list', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            projectPath: selectedProject.path,
+          }),
+        });
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch commands');
+        }
+
+        const data = await response.json();
+        const allCommands: SlashCommand[] = [
+          ...((data.builtIn || []) as SlashCommand[]).map((command) => ({
+            ...command,
+            type: 'built-in',
+          })),
+          ...((data.custom || []) as SlashCommand[]).map((command) => ({
+            ...command,
+            type: 'custom',
+          })),
+        ];
+
+        const parsedHistory = readCommandHistory(selectedProject.name);
+        const sortedCommands = [...allCommands].sort((commandA, commandB) => {
+          const commandAUsage = parsedHistory[commandA.name] || 0;
+          const commandBUsage = parsedHistory[commandB.name] || 0;
+          return commandBUsage - commandAUsage;
+        });
+
+        setSlashCommands(sortedCommands);
+      } catch (error) {
+        console.error('Error fetching slash commands:', error);
+        setSlashCommands([]);
+      }
+    };
+
+    fetchCommands();
+  }, [selectedProject]);
+
+  useEffect(() => {
+    if (!showCommandMenu) {
+      setSelectedCommandIndex(-1);
+    }
+  }, [showCommandMenu]);
+
+  const fuse = useMemo(() => {
+    if (!slashCommands.length) {
+      return null;
+    }
+
+    return new Fuse(slashCommands, {
+      keys: [
+        { name: 'name', weight: 2 },
+        { name: 'description', weight: 1 },
+      ],
+      threshold: 0.4,
+      includeScore: true,
+      minMatchCharLength: 1,
+    });
+  }, [slashCommands]);
+
+  useEffect(() => {
+    if (!commandQuery) {
+      setFilteredCommands(slashCommands);
+      return;
+    }
+
+    if (!fuse) {
+      setFilteredCommands([]);
+      return;
+    }
+
+    const results = fuse.search(commandQuery);
+    setFilteredCommands(results.map((result) => result.item));
+  }, [commandQuery, slashCommands, fuse]);
+
+  const frequentCommands = useMemo(() => {
+    if (!selectedProject || slashCommands.length === 0) {
+      return [];
+    }
+
+    const parsedHistory = readCommandHistory(selectedProject.name);
+
+    return slashCommands
+      .map((command) => ({
+        ...command,
+        usageCount: parsedHistory[command.name] || 0,
+      }))
+      .filter((command) => command.usageCount > 0)
+      .sort((commandA, commandB) => commandB.usageCount - commandA.usageCount)
+      .slice(0, 5);
+  }, [selectedProject, slashCommands]);
+
+  const trackCommandUsage = useCallback(
+    (command: SlashCommand) => {
+      if (!selectedProject) {
+        return;
+      }
+
+      const parsedHistory = readCommandHistory(selectedProject.name);
+      parsedHistory[command.name] = (parsedHistory[command.name] || 0) + 1;
+      saveCommandHistory(selectedProject.name, parsedHistory);
+    },
+    [selectedProject],
+  );
+
+  const selectCommandFromKeyboard = useCallback(
+    (command: SlashCommand) => {
+      const textBeforeSlash = input.slice(0, slashPosition);
+      const textAfterSlash = input.slice(slashPosition);
+      const spaceIndex = textAfterSlash.indexOf(' ');
+      const textAfterQuery = spaceIndex !== -1 ? textAfterSlash.slice(spaceIndex) : '';
+      const newInput = `${textBeforeSlash}${command.name} ${textAfterQuery}`;
+
+      setInput(newInput);
+      resetCommandMenuState();
+
+      const executionResult = onExecuteCommand(command);
+      if (isPromiseLike(executionResult)) {
+        executionResult.catch(() => {
+          // Keep behavior silent; execution errors are handled by caller.
+        });
+      }
+    },
+    [input, slashPosition, setInput, resetCommandMenuState, onExecuteCommand],
+  );
+
+  const handleCommandSelect = useCallback(
+    (command: SlashCommand | null, index: number, isHover: boolean) => {
+      if (!command || !selectedProject) {
+        return;
+      }
+
+      if (isHover) {
+        setSelectedCommandIndex(index);
+        return;
+      }
+
+      trackCommandUsage(command);
+      const executionResult = onExecuteCommand(command);
+
+      if (isPromiseLike(executionResult)) {
+        executionResult.then(() => {
+          resetCommandMenuState();
+        });
+        executionResult.catch(() => {
+          // Keep behavior silent; execution errors are handled by caller.
+        });
+      } else {
+        resetCommandMenuState();
+      }
+    },
+    [selectedProject, trackCommandUsage, onExecuteCommand, resetCommandMenuState],
+  );
+
+  const handleToggleCommandMenu = useCallback(() => {
+    const isOpening = !showCommandMenu;
+    setShowCommandMenu(isOpening);
+    setCommandQuery('');
+    setSelectedCommandIndex(-1);
+
+    if (isOpening) {
+      setFilteredCommands(slashCommands);
+    }
+
+    textareaRef.current?.focus();
+  }, [showCommandMenu, slashCommands, textareaRef]);
+
+  const handleCommandInputChange = useCallback(
+    (newValue: string, cursorPos: number) => {
+      if (!newValue.trim()) {
+        resetCommandMenuState();
+        return;
+      }
+
+      const textBeforeCursor = newValue.slice(0, cursorPos);
+      const backticksBefore = (textBeforeCursor.match(/```/g) || []).length;
+      const inCodeBlock = backticksBefore % 2 === 1;
+
+      if (inCodeBlock) {
+        resetCommandMenuState();
+        return;
+      }
+
+      const slashPattern = /(^|\s)\/(\S*)$/;
+      const match = textBeforeCursor.match(slashPattern);
+
+      if (!match) {
+        resetCommandMenuState();
+        return;
+      }
+
+      const slashPos = (match.index || 0) + match[1].length;
+      const query = match[2];
+
+      setSlashPosition(slashPos);
+      setShowCommandMenu(true);
+      setSelectedCommandIndex(-1);
+
+      clearCommandQueryTimer();
+      commandQueryTimerRef.current = window.setTimeout(() => {
+        setCommandQuery(query);
+      }, COMMAND_QUERY_DEBOUNCE_MS);
+    },
+    [resetCommandMenuState, clearCommandQueryTimer],
+  );
+
+  const handleCommandMenuKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>): boolean => {
+      if (!showCommandMenu) {
+        return false;
+      }
+
+      if (!filteredCommands.length) {
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          resetCommandMenuState();
+          return true;
+        }
+        return false;
+      }
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        setSelectedCommandIndex((previousIndex) =>
+          previousIndex < filteredCommands.length - 1 ? previousIndex + 1 : 0,
+        );
+        return true;
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        setSelectedCommandIndex((previousIndex) =>
+          previousIndex > 0 ? previousIndex - 1 : filteredCommands.length - 1,
+        );
+        return true;
+      }
+
+      if (event.key === 'Tab' || event.key === 'Enter') {
+        event.preventDefault();
+        if (selectedCommandIndex >= 0) {
+          selectCommandFromKeyboard(filteredCommands[selectedCommandIndex]);
+        } else if (filteredCommands.length > 0) {
+          selectCommandFromKeyboard(filteredCommands[0]);
+        }
+        return true;
+      }
+
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        resetCommandMenuState();
+        return true;
+      }
+
+      return false;
+    },
+    [showCommandMenu, filteredCommands, resetCommandMenuState, selectCommandFromKeyboard, selectedCommandIndex],
+  );
+
+  useEffect(
+    () => () => {
+      clearCommandQueryTimer();
+    },
+    [clearCommandQueryTimer],
+  );
+
+  return {
+    slashCommands,
+    slashCommandsCount: slashCommands.length,
+    filteredCommands,
+    frequentCommands,
+    commandQuery,
+    showCommandMenu,
+    selectedCommandIndex,
+    resetCommandMenuState,
+    handleCommandSelect,
+    handleToggleCommandMenu,
+    handleCommandInputChange,
+    handleCommandMenuKeyDown,
+  };
+}
--- a/src/components/chat/tools/README.md
+++ b/src/components/chat/tools/README.md
@@ -0,0 +1,224 @@
+# Tool Rendering System
+
+## Overview
+
+Config-driven architecture for rendering tool executions in chat. All tool display behavior is defined in `toolConfigs.ts` — no scattered conditionals. Two base display patterns: **OneLineDisplay** for compact tools, **CollapsibleDisplay** for tools with expandable content.
+
+Non-error tool results route through `ToolRenderer` with `mode="result"` (single source of truth). Error results are handled inline in `MessageComponent` with a red error box.
+
+---
+
+## Architecture
+
+```
+tools/
+├── components/
+│   ├── OneLineDisplay.tsx          # Compact one-line tool display
+│   ├── CollapsibleDisplay.tsx      # Expandable tool display (uses children pattern)
+│   ├── CollapsibleSection.tsx      # <details>/<summary> wrapper
+│   ├── ContentRenderers/
+│   │   ├── DiffViewer.tsx          # File diff viewer (memoized)
+│   │   ├── MarkdownContent.tsx     # Markdown renderer
+│   │   ├── FileListContent.tsx     # Comma-separated clickable file list
+│   │   ├── TodoListContent.tsx     # Todo items with status badges
+│   │   ├── TaskListContent.tsx     # Task tracker with progress bar
+│   │   └── TextContent.tsx         # Plain text / JSON / code
+├── configs/
+│   └── toolConfigs.ts              # All tool configs + ToolDisplayConfig type
+├── ToolRenderer.tsx                # Main router (React.memo wrapped)
+└── README.md
+```
+
+---
+
+## Display Patterns
+
+### OneLineDisplay
+
+Used by: Bash, Read, Grep, Glob, TodoRead, TaskCreate, TaskUpdate, TaskGet
+
+Renders as a single line with `border-l-2` accent. Supports multiple rendering modes based on `action`:
+
+- **terminal** (`style: 'terminal'`) — Dark pill around command text, green `$` prompt
+- **open-file** — Shows filename only (truncated from full path), clickable to open
+- **jump-to-results** — Shows pattern with anchor link to result section
+- **copy** — Shows value with hover copy button
+- **none** — Plain display
+
+```tsx
+<OneLineDisplay
+  toolName="Read"
+  icon="terminal"           // Optional icon or style keyword
+  label="Read"              // Tool label
+  value="/path/to/file.ts"  // Main display value
+  secondary="description"   // Optional secondary text (italic)
+  action="open-file"        // Action type
+  onAction={() => ...}      // Click handler
+  colorScheme={{             // Per-tool colors
+    primary: 'text-...',
+    border: 'border-...',
+    icon: 'text-...'
+  }}
+  resultId="tool-result-x"  // For jump-to-results anchor
+  toolResult={...}          // For conditional jump arrow
+  toolId="x"                // Tool use ID
+/>
+```
+
+### CollapsibleDisplay
+
+Used by: Edit, Write, ApplyPatch, Grep/Glob results, TodoWrite, TaskList/TaskGet results, ExitPlanMode, Default
+
+Wraps `CollapsibleSection` (`<details>`/`<summary>`) with a `border-l-2` accent colored by tool category. Accepts **children** directly (not contentProps).
+
+```tsx
+<CollapsibleDisplay
+  toolName="Edit"
+  toolId="123"
+  title="filename.ts"           // Section title (can be clickable)
+  defaultOpen={false}
+  onTitleClick={() => ...}      // Makes title a clickable link (for edit tools)
+  showRawParameters={true}      // Show raw JSON toggle
+  rawContent="..."              // Raw JSON string
+  toolCategory="edit"           // Drives border color
+>
+  <DiffViewer {...} />          // Content as children
+</CollapsibleDisplay>
+```
+
+**Tool category colors** (via `border-l-2`):
+| Category | Tools | Color |
+|----------|-------|-------|
+| `edit` | Edit, Write, ApplyPatch | amber |
+| `bash` | Bash | green |
+| `search` | Grep, Glob | gray |
+| `todo` | TodoWrite, TodoRead | violet |
+| `task` | TaskCreate/Update/List/Get | violet |
+| `plan` | ExitPlanMode | indigo |
+| `default` | everything else | neutral gray |
+
+---
+
+## Content Renderers
+
+Specialized components for different content types, rendered as children of `CollapsibleDisplay`:
+
+| contentType | Component | Used by |
+|---|---|---|
+| `diff` | `DiffViewer` | Edit, Write, ApplyPatch |
+| `markdown` | `MarkdownContent` | ExitPlanMode |
+| `file-list` | `FileListContent` | Grep/Glob results |
+| `todo-list` | `TodoListContent` | TodoWrite, TodoRead |
+| `task` | `TaskListContent` | TaskList, TaskGet results |
+| `text` | `TextContent` | Default fallback |
+| `success-message` | inline SVG | TodoWrite result |
+
+---
+
+## Adding a New Tool
+
+**Step 1:** Add config to `configs/toolConfigs.ts`
+
+```typescript
+MyTool: {
+  input: {
+    type: 'one-line',              // or 'collapsible'
+    label: 'MyTool',
+    getValue: (input) => input.some_field,
+    action: 'open-file',
+    colorScheme: {
+      primary: 'text-purple-600 dark:text-purple-400',
+      border: 'border-purple-400 dark:border-purple-500'
+    }
+  },
+  result: {
+    hideOnSuccess: true            // Only show errors
+  }
+}
+```
+
+**Step 2:** If the tool needs a category color, add it to `getToolCategory()` in `ToolRenderer.tsx`.
+
+**That's it.** The ToolRenderer auto-routes based on config.
+
+---
+
+## Configuration Reference
+
+### ToolDisplayConfig
+
+```typescript
+interface ToolDisplayConfig {
+  input: {
+    type: 'one-line' | 'collapsible' | 'hidden';
+
+    // One-line
+    icon?: string;
+    label?: string;
+    getValue?: (input) => string;
+    getSecondary?: (input) => string | undefined;
+    action?: 'copy' | 'open-file' | 'jump-to-results' | 'none';
+    style?: string;                              // 'terminal' for Bash
+    wrapText?: boolean;
+    colorScheme?: {
+      primary?: string;
+      secondary?: string;
+      background?: string;
+      border?: string;
+      icon?: string;
+    };
+
+    // Collapsible
+    title?: string | ((input) => string);
+    defaultOpen?: boolean;
+    contentType?: 'diff' | 'markdown' | 'file-list' | 'todo-list' | 'text' | 'task';
+    getContentProps?: (input, helpers?) => any;
+    actionButton?: 'none';
+  };
+
+  result?: {
+    hidden?: boolean;                            // Never show
+    hideOnSuccess?: boolean;                     // Only show errors
+    type?: 'one-line' | 'collapsible' | 'special';
+    title?: string | ((result) => string);
+    defaultOpen?: boolean;
+    contentType?: 'markdown' | 'file-list' | 'todo-list' | 'text' | 'success-message' | 'task';
+    getMessage?: (result) => string;
+    getContentProps?: (result) => any;
+  };
+}
+```
+
+---
+
+## All Configured Tools
+
+| Tool | Input | Result | Notes |
+|------|-------|--------|-------|
+| Bash | terminal one-line | hide success | Dark command pill, green accent |
+| Read | one-line (open-file) | hidden | Shows filename, clicks to open |
+| Edit | collapsible (diff) | hide success | Amber border, clickable filename |
+| Write | collapsible (diff) | hide success | "New" badge on diff |
+| ApplyPatch | collapsible (diff) | hide success | "Patch" badge on diff |
+| Grep | one-line (jump) | collapsible file-list | Collapsed by default |
+| Glob | one-line (jump) | collapsible file-list | Collapsed by default |
+| TodoWrite | collapsible (todo-list) | success message | |
+| TodoRead | one-line | collapsible todo-list | |
+| TaskCreate | one-line | hide success | Shows task subject |
+| TaskUpdate | one-line | hide success | Shows `#id → status` |
+| TaskList | one-line | collapsible task | Progress bar, status icons |
+| TaskGet | one-line | collapsible task | Task details with status |
+| ExitPlanMode | collapsible (markdown) | collapsible markdown | Also registered as `exit_plan_mode` |
+| Default | collapsible (code) | collapsible text | Fallback for unknown tools |
+
+---
+
+## Performance
+
+- **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
+- **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)
+- Configs are static module-level objects — zero runtime overhead for lookups
--- a/src/components/chat/tools/ToolRenderer.tsx
+++ b/src/components/chat/tools/ToolRenderer.tsx
@@ -0,0 +1,242 @@
+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';
+
+type DiffLine = {
+  type: string;
+  content: string;
+  lineNum: number;
+};
+
+interface ToolRendererProps {
+  toolName: string;
+  toolInput: any;
+  toolResult?: any;
+  toolId?: string;
+  mode: 'input' | 'result';
+  onFileOpen?: (filePath: string, diffInfo?: any) => void;
+  createDiff?: (oldStr: string, newStr: string) => DiffLine[];
+  selectedProject?: Project | null;
+  autoExpandTools?: boolean;
+  showRawParameters?: boolean;
+  rawToolInput?: string;
+  isSubagentContainer?: boolean;
+  subagentState?: {
+    childTools: SubagentChildTool[];
+    currentToolIndex: number;
+    isComplete: boolean;
+  };
+}
+
+function getToolCategory(toolName: string): string {
+  if (['Edit', 'Write', 'ApplyPatch'].includes(toolName)) return 'edit';
+  if (['Grep', 'Glob'].includes(toolName)) return 'search';
+  if (toolName === 'Bash') return 'bash';
+  if (['TodoWrite', 'TodoRead'].includes(toolName)) return 'todo';
+  if (['TaskCreate', 'TaskUpdate', 'TaskList', 'TaskGet'].includes(toolName)) return 'task';
+  if (toolName === 'Task') return 'agent';  // Subagent task
+  if (toolName === 'exit_plan_mode' || toolName === 'ExitPlanMode') return 'plan';
+  if (toolName === 'AskUserQuestion') return 'question';
+  return 'default';
+}
+
+/**
+ * Main tool renderer router
+ * Routes to OneLineDisplay or CollapsibleDisplay based on tool config
+ */
+export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
+  toolName,
+  toolInput,
+  toolResult,
+  toolId,
+  mode,
+  onFileOpen,
+  createDiff,
+  selectedProject,
+  autoExpandTools = false,
+  showRawParameters = false,
+  rawToolInput,
+  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;
+
+  const parsedData = useMemo(() => {
+    try {
+      const rawData = mode === 'input' ? toolInput : toolResult;
+      return typeof rawData === 'string' ? JSON.parse(rawData) : rawData;
+    } catch {
+      return mode === 'input' ? toolInput : toolResult;
+    }
+  }, [mode, toolInput, toolResult]);
+
+  const handleAction = useCallback(() => {
+    if (displayConfig?.action === 'open-file' && onFileOpen) {
+      const value = displayConfig.getValue?.(parsedData) || '';
+      onFileOpen(value);
+    }
+  }, [displayConfig, parsedData, onFileOpen]);
+
+  // Keep hooks above this guard so hook call order stays stable across renders.
+  if (!displayConfig) return null;
+
+  if (displayConfig.type === 'one-line') {
+    const value = displayConfig.getValue?.(parsedData) || '';
+    const secondary = displayConfig.getSecondary?.(parsedData);
+
+    return (
+      <OneLineDisplay
+        toolName={toolName}
+        toolResult={toolResult}
+        toolId={toolId}
+        icon={displayConfig.icon}
+        label={displayConfig.label}
+        value={value}
+        secondary={secondary}
+        action={displayConfig.action}
+        onAction={handleAction}
+        style={displayConfig.style}
+        wrapText={displayConfig.wrapText}
+        colorScheme={displayConfig.colorScheme}
+        resultId={mode === 'input' ? `tool-result-${toolId}` : undefined}
+      />
+    );
+  }
+
+  if (displayConfig.type === 'collapsible') {
+    const title = typeof displayConfig.title === 'function'
+      ? displayConfig.title(parsedData)
+      : displayConfig.title || 'Details';
+
+    const defaultOpen = displayConfig.defaultOpen !== undefined
+      ? displayConfig.defaultOpen
+      : autoExpandTools;
+
+    const contentProps = displayConfig.getContentProps?.(parsedData, {
+      selectedProject,
+      createDiff,
+      onFileOpen
+    }) || {};
+
+    // Build the content component based on contentType
+    let contentComponent: React.ReactNode = null;
+
+    switch (displayConfig.contentType) {
+      case 'diff':
+        if (createDiff) {
+          contentComponent = (
+            <DiffViewer
+              {...contentProps}
+              createDiff={createDiff}
+              onFileClick={() => onFileOpen?.(contentProps.filePath)}
+            />
+          );
+        }
+        break;
+
+      case 'markdown':
+        contentComponent = <MarkdownContent content={contentProps.content || ''} />;
+        break;
+
+      case 'file-list':
+        contentComponent = (
+          <FileListContent
+            files={contentProps.files || []}
+            onFileClick={onFileOpen}
+            title={contentProps.title}
+          />
+        );
+        break;
+
+      case 'todo-list':
+        if (contentProps.todos?.length > 0) {
+          contentComponent = (
+            <TodoListContent
+              todos={contentProps.todos}
+              isResult={contentProps.isResult}
+            />
+          );
+        }
+        break;
+
+      case 'task':
+        contentComponent = <TaskListContent content={contentProps.content || ''} />;
+        break;
+
+      case 'question-answer':
+        contentComponent = (
+          <QuestionAnswerContent
+            questions={contentProps.questions || []}
+            answers={contentProps.answers || {}}
+          />
+        );
+        break;
+
+      case 'text':
+        contentComponent = (
+          <TextContent
+            content={contentProps.content || ''}
+            format={contentProps.format || 'plain'}
+          />
+        );
+        break;
+
+      case 'success-message': {
+        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">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+            {msg}
+          </div>
+        );
+        break;
+      }
+    }
+
+    // For edit tools, make the title (filename) clickable to open the file
+    const handleTitleClick = (toolName === 'Edit' || toolName === 'Write' || toolName === 'ApplyPatch') && contentProps.filePath && onFileOpen
+      ? () => onFileOpen(contentProps.filePath, {
+          old_string: contentProps.oldContent,
+          new_string: contentProps.newContent
+        })
+      : undefined;
+
+    return (
+      <CollapsibleDisplay
+        toolName={toolName}
+        toolId={toolId}
+        title={title}
+        defaultOpen={defaultOpen}
+        onTitleClick={handleTitleClick}
+        showRawParameters={mode === 'input' && showRawParameters}
+        rawContent={rawToolInput}
+        toolCategory={getToolCategory(toolName)}
+      >
+        {contentComponent}
+      </CollapsibleDisplay>
+    );
+  }
+
+  return null;
+});
+
+ToolRenderer.displayName = 'ToolRenderer';
--- a/src/components/chat/tools/components/CollapsibleDisplay.tsx
+++ b/src/components/chat/tools/components/CollapsibleDisplay.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { CollapsibleSection } from './CollapsibleSection';
+
+interface CollapsibleDisplayProps {
+  toolName: string;
+  toolId?: string;
+  title: string;
+  defaultOpen?: boolean;
+  action?: React.ReactNode;
+  onTitleClick?: () => void;
+  children: React.ReactNode;
+  showRawParameters?: boolean;
+  rawContent?: string;
+  className?: string;
+  toolCategory?: string;
+}
+
+const borderColorMap: Record<string, string> = {
+  edit: 'border-l-amber-500 dark:border-l-amber-400',
+  search: 'border-l-gray-400 dark:border-l-gray-500',
+  bash: 'border-l-green-500 dark:border-l-green-400',
+  todo: 'border-l-violet-500 dark:border-l-violet-400',
+  task: 'border-l-violet-500 dark:border-l-violet-400',
+  agent: 'border-l-purple-500 dark:border-l-purple-400',
+  plan: 'border-l-indigo-500 dark:border-l-indigo-400',
+  question: 'border-l-blue-500 dark:border-l-blue-400',
+  default: 'border-l-gray-300 dark:border-l-gray-600',
+};
+
+export const CollapsibleDisplay: React.FC<CollapsibleDisplayProps> = ({
+  toolName,
+  title,
+  defaultOpen = false,
+  action,
+  onTitleClick,
+  children,
+  showRawParameters = false,
+  rawContent,
+  className = '',
+  toolCategory
+}) => {
+  // Fall back to default styling for unknown/new categories so className never includes "undefined".
+  const borderColor = borderColorMap[toolCategory || 'default'] || borderColorMap.default;
+
+  return (
+    <div className={`border-l-2 ${borderColor} pl-3 py-0.5 my-1 ${className}`}>
+      <CollapsibleSection
+        title={title}
+        toolName={toolName}
+        open={defaultOpen}
+        action={action}
+        onTitleClick={onTitleClick}
+      >
+        {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">
+              <svg
+                className="w-2.5 h-2.5 transition-transform duration-150 group-open/raw:rotate-90"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </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">
+              {rawContent}
+            </pre>
+          </details>
+        )}
+      </CollapsibleSection>
+    </div>
+  );
+};
--- a/src/components/chat/tools/components/CollapsibleSection.tsx
+++ b/src/components/chat/tools/components/CollapsibleSection.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+interface CollapsibleSectionProps {
+  title: string;
+  toolName?: string;
+  open?: boolean;
+  action?: React.ReactNode;
+  onTitleClick?: () => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Reusable collapsible section with consistent styling
+ */
+export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
+  title,
+  toolName,
+  open = false,
+  action,
+  onTitleClick,
+  children,
+  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">
+        <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"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <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>
+        )}
+        {toolName && (
+          <span className="text-gray-300 dark:text-gray-600 text-[10px] flex-shrink-0">/</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"
+          >
+            {title}
+          </button>
+        ) : (
+          <span className="text-gray-600 dark:text-gray-400 truncate flex-1">
+            {title}
+          </span>
+        )}
+        {action && <span className="flex-shrink-0 ml-1">{action}</span>}
+      </summary>
+      <div className="mt-1.5 pl-[18px]">
+        {children}
+      </div>
+    </details>
+  );
+};
--- a/src/components/chat/tools/components/ContentRenderers/FileListContent.tsx
+++ b/src/components/chat/tools/components/ContentRenderers/FileListContent.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+interface FileListItem {
+  path: string;
+  onClick?: () => void;
+}
+
+interface FileListContentProps {
+  files: string[] | FileListItem[];
+  onFileClick?: (filePath: string) => void;
+  title?: string;
+}
+
+/**
+ * Renders a compact comma-separated list of clickable file names
+ * Used by: Grep/Glob results
+ */
+export const FileListContent: React.FC<FileListContentProps> = ({
+  files,
+  onFileClick,
+  title
+}) => {
+  return (
+    <div>
+      {title && (
+        <div className="text-[11px] text-gray-500 dark:text-gray-400 mb-1">
+          {title}
+        </div>
+      )}
+      <div className="flex flex-wrap gap-x-1 gap-y-0.5 max-h-48 overflow-y-auto">
+        {files.map((file, index) => {
+          const filePath = typeof file === 'string' ? file : file.path;
+          const fileName = filePath.split('/').pop() || filePath;
+          const handleClick = typeof file === 'string'
+            ? () => onFileClick?.(file)
+            : file.onClick;
+
+          return (
+            <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"
+                title={filePath}
+              >
+                {fileName}
+              </button>
+              {index < files.length - 1 && (
+                <span className="text-gray-300 dark:text-gray-600 text-[10px] ml-1">,</span>
+              )}
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
--- a/src/components/chat/tools/components/ContentRenderers/MarkdownContent.tsx
+++ b/src/components/chat/tools/components/ContentRenderers/MarkdownContent.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Markdown } from '../../../view/subcomponents/Markdown';
+
+interface MarkdownContentProps {
+  content: string;
+  className?: string;
+}
+
+/**
+ * Renders markdown content with proper styling
+ * Used by: exit_plan_mode, long text results, etc.
+ */
+export const MarkdownContent: React.FC<MarkdownContentProps> = ({
+  content,
+  className = 'mt-1 prose prose-sm max-w-none dark:prose-invert'
+}) => {
+  return (
+    <Markdown className={className}>
+      {content}
+    </Markdown>
+  );
+};
--- a/src/components/chat/tools/components/ContentRenderers/QuestionAnswerContent.tsx
+++ b/src/components/chat/tools/components/ContentRenderers/QuestionAnswerContent.tsx
@@ -0,0 +1,187 @@
+import React, { useState } from 'react';
+import type { Question } from '../../../types/types';
+
+interface QuestionAnswerContentProps {
+  questions: Question[];
+  answers: Record<string, string>;
+  className?: string;
+}
+
+// Exception to the stateless ContentRenderer pattern: multi-question navigation requires local state.
+export const QuestionAnswerContent: React.FC<QuestionAnswerContentProps> = ({
+  questions,
+  answers,
+  className = '',
+}) => {
+  const [expandedIdx, setExpandedIdx] = useState<number | null>(null);
+
+  if (!questions || questions.length === 0) {
+    return null;
+  }
+
+  const hasAnyAnswer = Object.keys(answers || {}).length > 0;
+  const total = questions.length;
+
+  return (
+    <div className={`space-y-2 ${className}`}>
+      {questions.map((q, idx) => {
+        const answer = answers?.[q.question];
+        const answerLabels = answer ? answer.split(', ') : [];
+        const skipped = !answer;
+        const isExpanded = expandedIdx === idx;
+
+        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"
+          >
+            <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"
+            >
+              <div className={`mt-0.5 flex-shrink-0 w-4 h-4 rounded-full flex items-center justify-center ${
+                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}>
+                    <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>
+
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 flex-wrap">
+                  {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">
+                      {q.header}
+                    </span>
+                  )}
+                  {total > 1 && (
+                    <span className="text-[10px] tabular-nums text-gray-400 dark:text-gray-500">
+                      {idx + 1}/{total}
+                    </span>
+                  )}
+                </div>
+                <div className="text-xs text-gray-600 dark:text-gray-400 mt-0.5 leading-snug">
+                  {q.question}
+                </div>
+
+                {!isExpanded && answerLabels.length > 0 && (
+                  <div className="flex flex-wrap gap-1 mt-1.5">
+                    {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"
+                        >
+                          {lbl}
+                          {isCustom && (
+                            <span className="text-[9px] text-blue-400 dark:text-blue-500 font-normal">(custom)</span>
+                          )}
+                        </span>
+                      );
+                    })}
+                  </div>
+                )}
+
+                {!isExpanded && skipped && hasAnyAnswer && (
+                  <span className="inline-block mt-1 text-[10px] text-gray-400 dark:text-gray-500 italic">
+                    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 ${
+                  isExpanded ? 'rotate-180' : ''
+                }`}
+                fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+              </svg>
+            </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">
+                  {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] ${
+                          wasSelected
+                            ? 'bg-blue-50/80 dark:bg-blue-900/20 border border-blue-200/60 dark:border-blue-800/40'
+                            : '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 ${
+                          wasSelected
+                            ? 'border-blue-500 dark:border-blue-400 bg-blue-500 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}>
+                              <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' : ''}>
+                            {opt.label}
+                          </span>
+                          {opt.description && (
+                            <span className={`block text-[11px] mt-0.5 ${
+                              wasSelected ? 'text-blue-600/70 dark:text-blue-300/70' : 'text-gray-400 dark:text-gray-600'
+                            }`}>
+                              {opt.description}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })}
+
+                  {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"
+                    >
+                      <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}>
+                          <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>
+                    </div>
+                  ))}
+
+                  {skipped && hasAnyAnswer && (
+                    <div className="text-[11px] text-gray-400 dark:text-gray-500 italic px-2.5 py-1">
+                      No answer provided
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      })}
+
+      {!hasAnyAnswer && total === 1 && (
+        <div className="text-[11px] text-gray-400 dark:text-gray-500 italic">
+          Skipped
+        </div>
+      )}
+    </div>
+  );
+};
--- a/src/components/chat/tools/components/ContentRenderers/TaskListContent.tsx
+++ b/src/components/chat/tools/components/ContentRenderers/TaskListContent.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+
+interface TaskItem {
+  id: string;
+  subject: string;
+  status: 'pending' | 'in_progress' | 'completed';
+  owner?: string;
+  blockedBy?: string[];
+}
+
+interface TaskListContentProps {
+  content: string;
+}
+
+function parseTaskContent(content: string): TaskItem[] {
+  const tasks: TaskItem[] = [];
+  const lines = content.split('\n');
+
+  for (const line of lines) {
+    // Match patterns like: #15. [in_progress] Subject here
+    // or: - #15 [in_progress] Subject (owner: agent)
+    // or: #15. Subject here (status: in_progress)
+    const match = line.match(/#(\d+)\.?\s*(?:\[(\w+)\]\s*)?(.+?)(?:\s*\((?:owner:\s*\w+)?\))?$/);
+    if (match) {
+      const [, id, status, subject] = match;
+      const blockedMatch = line.match(/blockedBy:\s*\[([^\]]*)\]/);
+      tasks.push({
+        id,
+        subject: subject.trim(),
+        status: (status as TaskItem['status']) || 'pending',
+        blockedBy: blockedMatch ? blockedMatch[1].split(',').map(s => s.trim()).filter(Boolean) : undefined
+      });
+    }
+  }
+
+  return tasks;
+}
+
+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">
+        <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>
+    ),
+    textClass: 'line-through text-gray-400 dark:text-gray-500',
+    badgeClass: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800'
+  },
+  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">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    ),
+    textClass: 'text-gray-900 dark:text-gray-100',
+    badgeClass: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800'
+  },
+  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">
+        <circle cx="12" cy="12" r="9" strokeWidth={2} />
+      </svg>
+    ),
+    textClass: 'text-gray-700 dark:text-gray-300',
+    badgeClass: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700'
+  }
+};
+
+/**
+ * Renders task list results with proper status icons and compact layout
+ * Parses text content from TaskList/TaskGet results
+ */
+export const TaskListContent: React.FC<TaskListContentProps> = ({ content }) => {
+  const tasks = parseTaskContent(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">
+        {content}
+      </pre>
+    );
+  }
+
+  const completed = tasks.filter(t => t.status === 'completed').length;
+  const total = tasks.length;
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 mb-1.5">
+        <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-full bg-green-500 dark:bg-green-400 rounded-full transition-all"
+            style={{ width: `${total > 0 ? (completed / total) * 100 : 0}%` }}
+          />
+        </div>
+      </div>
+      <div className="space-y-px">
+        {tasks.map((task) => {
+          const config = statusConfig[task.status] || statusConfig.pending;
+          return (
+            <div
+              key={task.id}
+              className="flex items-center gap-1.5 py-0.5 group"
+            >
+              <span className="flex-shrink-0">{config.icon}</span>
+              <span className="text-[11px] font-mono text-gray-400 dark:text-gray-500 flex-shrink-0">
+                #{task.id}
+              </span>
+              <span className={`text-xs truncate flex-1 ${config.textClass}`}>
+                {task.subject}
+              </span>
+              <span className={`text-[10px] px-1 py-px rounded border flex-shrink-0 ${config.badgeClass}`}>
+                {task.status.replace('_', ' ')}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
--- a/src/components/chat/tools/components/ContentRenderers/TextContent.tsx
+++ b/src/components/chat/tools/components/ContentRenderers/TextContent.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+interface TextContentProps {
+  content: string;
+  format?: 'plain' | 'json' | 'code';
+  className?: string;
+}
+
+/**
+ * Renders plain text, JSON, or code content
+ * Used by: Raw parameters, generic text results, JSON responses
+ */
+export const TextContent: React.FC<TextContentProps> = ({
+  content,
+  format = 'plain',
+  className = ''
+}) => {
+  if (format === 'json') {
+    let formattedJson = content;
+    try {
+      const parsed = JSON.parse(content);
+      formattedJson = JSON.stringify(parsed, null, 2);
+    } catch (e) {
+      // If parsing fails, use original content
+    }
+
+    return (
+      <pre className={`mt-1 text-xs bg-gray-900 dark:bg-gray-950 text-gray-100 p-2.5 rounded overflow-x-auto font-mono ${className}`}>
+        {formattedJson}
+      </pre>
+    );
+  }
+
+  if (format === 'code') {
+    return (
+      <pre className={`mt-1 text-xs bg-gray-50 dark:bg-gray-800/50 border border-gray-200/50 dark:border-gray-700/50 p-2 rounded whitespace-pre-wrap break-words overflow-hidden text-gray-700 dark:text-gray-300 font-mono ${className}`}>
+        {content}
+      </pre>
+    );
+  }
+
+  // Plain text
+  return (
+    <div className={`mt-1 text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap ${className}`}>
+      {content}
+    </div>
+  );
+};
--- a/src/components/chat/tools/components/ContentRenderers/TodoListContent.tsx
+++ b/src/components/chat/tools/components/ContentRenderers/TodoListContent.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import TodoList from '../../../../TodoList';
+
+interface TodoListContentProps {
+  todos: Array<{
+    id?: string;
+    content: string;
+    status: string;
+    priority?: string;
+  }>;
+  isResult?: boolean;
+}
+
+/**
+ * Renders a todo list
+ * Used by: TodoWrite, TodoRead
+ */
+export const TodoListContent: React.FC<TodoListContentProps> = ({
+  todos,
+  isResult = false
+}) => {
+  return <TodoList todos={todos} isResult={isResult} />;
+};
--- a/src/components/chat/tools/components/ContentRenderers/index.ts
+++ b/src/components/chat/tools/components/ContentRenderers/index.ts
@@ -0,0 +1,6 @@
+export { MarkdownContent } from './MarkdownContent';
+export { FileListContent } from './FileListContent';
+export { TodoListContent } from './TodoListContent';
+export { TaskListContent } from './TaskListContent';
+export { TextContent } from './TextContent';
+export { QuestionAnswerContent } from './QuestionAnswerContent';
--- a/src/components/chat/tools/components/DiffViewer.tsx
+++ b/src/components/chat/tools/components/DiffViewer.tsx
@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react';
+
+type DiffLine = {
+  type: string;
+  content: string;
+  lineNum: number;
+};
+
+interface DiffViewerProps {
+  oldContent: string;
+  newContent: string;
+  filePath: string;
+  createDiff: (oldStr: string, newStr: string) => DiffLine[];
+  onFileClick?: () => void;
+  badge?: string;
+  badgeColor?: 'gray' | 'green';
+}
+
+/**
+ * Compact diff viewer — VS Code-style
+ */
+export const DiffViewer: React.FC<DiffViewerProps> = ({
+  oldContent,
+  newContent,
+  filePath,
+  createDiff,
+  onFileClick,
+  badge = 'Diff',
+  badgeColor = 'gray'
+}) => {
+  const badgeClasses = badgeColor === 'green'
+    ? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400'
+    : 'bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400';
+
+  const diffLines = useMemo(
+    () => createDiff(oldContent, newContent),
+    [createDiff, oldContent, newContent]
+  );
+
+  return (
+    <div className="border border-gray-200/60 dark:border-gray-700/50 rounded overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-2.5 py-1 bg-gray-50/80 dark:bg-gray-800/40 border-b border-gray-200/60 dark:border-gray-700/50">
+        {onFileClick ? (
+          <button
+            onClick={onFileClick}
+            className="text-[11px] font-mono text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 truncate cursor-pointer transition-colors"
+          >
+            {filePath}
+          </button>
+        ) : (
+          <span className="text-[11px] font-mono text-gray-600 dark:text-gray-400 truncate">
+            {filePath}
+          </span>
+        )}
+        <span className={`text-[10px] font-medium px-1.5 py-px rounded ${badgeClasses} flex-shrink-0 ml-2`}>
+          {badge}
+        </span>
+      </div>
+
+      {/* Diff lines */}
+      <div className="text-[11px] font-mono leading-[18px]">
+        {diffLines.map((diffLine, i) => (
+          <div key={i} className="flex">
+            <span
+              className={`w-6 text-center select-none flex-shrink-0 ${
+                diffLine.type === 'removed'
+                  ? 'bg-red-50 dark:bg-red-950/30 text-red-400 dark:text-red-500'
+                  : 'bg-green-50 dark:bg-green-950/30 text-green-400 dark:text-green-500'
+              }`}
+            >
+              {diffLine.type === 'removed' ? '-' : '+'}
+            </span>
+            <span
+              className={`px-2 flex-1 whitespace-pre-wrap ${
+                diffLine.type === 'removed'
+                  ? 'bg-red-50/50 dark:bg-red-950/20 text-red-800 dark:text-red-200'
+                  : 'bg-green-50/50 dark:bg-green-950/20 text-green-800 dark:text-green-200'
+              }`}
+            >
+              {diffLine.content}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
--- a/src/components/chat/tools/components/InteractiveRenderers/AskUserQuestionPanel.tsx
+++ b/src/components/chat/tools/components/InteractiveRenderers/AskUserQuestionPanel.tsx
@@ -0,0 +1,384 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import type { PermissionPanelProps } from '../../configs/permissionPanelRegistry';
+import type { Question } from '../../../types/types';
+
+export const AskUserQuestionPanel: React.FC<PermissionPanelProps> = ({
+  request,
+  onDecision,
+}) => {
+  const input = request.input as { questions?: Question[] } | undefined;
+  const questions: Question[] = input?.questions || [];
+
+  const [currentStep, setCurrentStep] = useState(0);
+  const [selections, setSelections] = useState<Map<number, Set<string>>>(() => new Map());
+  const [otherTexts, setOtherTexts] = useState<Map<number, string>>(() => new Map());
+  const [otherActive, setOtherActive] = useState<Map<number, boolean>>(() => new Map());
+  const [mounted, setMounted] = useState(false);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const otherInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    requestAnimationFrame(() => setMounted(true));
+  }, []);
+
+  // Focus the container for keyboard events when step changes
+  useEffect(() => {
+    if (!otherActive.get(currentStep)) {
+      containerRef.current?.focus();
+    }
+  }, [currentStep, otherActive]);
+
+  useEffect(() => {
+    if (otherActive.get(currentStep)) {
+      otherInputRef.current?.focus();
+    }
+  }, [otherActive, currentStep]);
+
+  const toggleOption = useCallback((qIdx: number, label: string, multiSelect: boolean) => {
+    setSelections(prev => {
+      const next = new Map(prev);
+      const current = new Set(next.get(qIdx) || []);
+      if (multiSelect) {
+        if (current.has(label)) current.delete(label);
+        else current.add(label);
+      } else {
+        current.clear();
+        current.add(label);
+        setOtherActive(p => { const n = new Map(p); n.set(qIdx, false); return n; });
+      }
+      next.set(qIdx, current);
+      return next;
+    });
+  }, []);
+
+  const toggleOther = useCallback((qIdx: number, multiSelect: boolean) => {
+    setOtherActive(prev => {
+      const next = new Map(prev);
+      const wasActive = next.get(qIdx) || false;
+      next.set(qIdx, !wasActive);
+      if (!multiSelect && !wasActive) {
+        setSelections(p => { const n = new Map(p); n.set(qIdx, new Set()); return n; });
+      }
+      return next;
+    });
+  }, []);
+
+  const setOtherText = useCallback((qIdx: number, text: string) => {
+    setOtherTexts(prev => { const next = new Map(prev); next.set(qIdx, text); return next; });
+  }, []);
+
+  const buildAnswers = useCallback(() => {
+    const answers: Record<string, string> = {};
+    questions.forEach((q, idx) => {
+      const selected = Array.from(selections.get(idx) || []);
+      const isOther = otherActive.get(idx) || false;
+      const otherText = (otherTexts.get(idx) || '').trim();
+      if (isOther && otherText) selected.push(otherText);
+      if (selected.length > 0) answers[q.question] = selected.join(', ');
+    });
+    return answers;
+  }, [questions, selections, otherActive, otherTexts]);
+
+  const handleSubmit = useCallback(() => {
+    onDecision(request.requestId, { allow: true, updatedInput: { ...input, answers: buildAnswers() } });
+  }, [onDecision, request.requestId, input, buildAnswers]);
+
+  const handleSkip = useCallback(() => {
+    onDecision(request.requestId, { allow: true, updatedInput: { ...input, answers: {} } });
+  }, [onDecision, request.requestId, input]);
+
+  // Keyboard handler for number keys and navigation
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    // Don't capture keys when typing in the "Other" input
+    if (e.target instanceof HTMLInputElement) return;
+
+    const q = questions[currentStep];
+    if (!q) return;
+    const multi = q.multiSelect || false;
+    const optCount = q.options.length;
+
+    // Number keys 1-9 for options
+    const num = parseInt(e.key);
+    if (!isNaN(num) && num >= 1 && num <= optCount) {
+      e.preventDefault();
+      toggleOption(currentStep, q.options[num - 1].label, multi);
+      return;
+    }
+
+    // 0 for "Other"
+    if (e.key === '0') {
+      e.preventDefault();
+      toggleOther(currentStep, multi);
+      return;
+    }
+
+    // Enter to advance / submit
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const isLast = currentStep === questions.length - 1;
+      if (isLast) handleSubmit();
+      else setCurrentStep(s => s + 1);
+      return;
+    }
+
+    // Escape to skip
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      handleSkip();
+      return;
+    }
+  }, [currentStep, questions, toggleOption, toggleOther, handleSubmit, handleSkip]);
+
+  if (questions.length === 0) return null;
+
+  const total = questions.length;
+  const isSingle = total === 1;
+  const q = questions[currentStep];
+  const multi = q.multiSelect || false;
+  const selected = selections.get(currentStep) || new Set<string>();
+  const isOtherOn = otherActive.get(currentStep) || false;
+  const isLast = currentStep === total - 1;
+  const isFirst = currentStep === 0;
+  const hasCurrentSelection = selected.size > 0 || (isOtherOn && (otherTexts.get(currentStep) || '').trim().length > 0);
+
+  return (
+    <div
+      ref={containerRef}
+      tabIndex={-1}
+      onKeyDown={handleKeyDown}
+      className={`w-full outline-none transition-all duration-500 ease-out ${
+        mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-3'
+      }`}
+    >
+      <div className="relative overflow-hidden rounded-2xl border border-gray-200/80 dark:border-gray-700/50 bg-white dark:bg-gray-800/90 shadow-lg dark:shadow-2xl">
+        {/* Accent line */}
+        <div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-blue-500 via-cyan-400 to-teal-400" />
+
+        {/* Header + Question — compact */}
+        <div className="px-4 pt-3.5 pb-2">
+          <div className="flex items-center gap-2.5 mb-1.5">
+            {/* Question icon */}
+            <div className="relative flex-shrink-0">
+              <div className="w-6 h-6 rounded-lg bg-gradient-to-br from-blue-500/10 to-cyan-500/10 dark:from-blue-400/15 dark:to-cyan-400/15 flex items-center justify-center">
+                <svg className="w-3.5 h-3.5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.75} stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827m0 3h.01" />
+                </svg>
+              </div>
+              <div className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-cyan-400 dark:bg-cyan-500 animate-pulse" />
+            </div>
+
+            <div className="flex items-center gap-2 min-w-0 flex-1">
+              <span className="text-[10px] font-medium tracking-wide uppercase text-gray-400 dark:text-gray-500">
+                Claude needs your input
+              </span>
+              {q.header && (
+                <span className="inline-flex items-center px-1.5 py-px 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 dark:border-blue-800/50">
+                  {q.header}
+                </span>
+              )}
+            </div>
+
+            {/* Step counter */}
+            {!isSingle && (
+              <span className="text-[10px] tabular-nums text-gray-400 dark:text-gray-500 flex-shrink-0">
+                {currentStep + 1}/{total}
+              </span>
+            )}
+          </div>
+
+          {/* Progress dots (multi-question) */}
+          {!isSingle && (
+            <div className="flex items-center gap-1 mb-2">
+              {questions.map((_, i) => (
+                <button
+                  key={i}
+                  type="button"
+                  onClick={() => setCurrentStep(i)}
+                  className={`h-[3px] rounded-full transition-all duration-300 ${
+                    i === currentStep
+                      ? 'w-5 bg-blue-500 dark:bg-blue-400'
+                      : i < currentStep
+                        ? 'w-2.5 bg-blue-300 dark:bg-blue-600'
+                        : 'w-2.5 bg-gray-200 dark:bg-gray-700'
+                  }`}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Question text */}
+          <p className="text-[14px] leading-snug font-medium text-gray-900 dark:text-gray-100">
+            {q.question}
+          </p>
+          {multi && (
+            <span className="text-[10px] text-gray-400 dark:text-gray-500">Select all that apply</span>
+          )}
+        </div>
+
+        {/* Options — tight spacing */}
+        <div className="px-4 pb-2 max-h-48 overflow-y-auto scrollbar-thin" role={multi ? 'group' : 'radiogroup'} aria-label={q.question}>
+          <div className="space-y-1">
+            {q.options.map((opt, optIdx) => {
+              const isSelected = selected.has(opt.label);
+              return (
+                <button
+                  key={opt.label}
+                  type="button"
+                  onClick={() => toggleOption(currentStep, opt.label, multi)}
+                  className={`group w-full text-left flex items-center gap-2.5 px-3 py-2 rounded-lg border transition-all duration-150 ${
+                    isSelected
+                      ? 'border-blue-300 dark:border-blue-600 bg-blue-50/80 dark:bg-blue-900/25 ring-1 ring-blue-200/50 dark:ring-blue-700/30'
+                      : 'border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50/60 dark:hover:bg-gray-750/50'
+                  }`}
+                >
+                  {/* Keyboard hint */}
+                  <kbd className={`flex-shrink-0 w-5 h-5 rounded text-[10px] font-mono flex items-center justify-center transition-all duration-150 ${
+                    isSelected
+                      ? 'bg-blue-500 dark:bg-blue-500 text-white font-semibold'
+                      : 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 border border-gray-200 dark:border-gray-700 group-hover:border-gray-300 dark:group-hover:border-gray-600'
+                  }`}>
+                    {optIdx + 1}
+                  </kbd>
+
+                  <div className="flex-1 min-w-0">
+                    <div className={`text-[13px] leading-tight transition-colors duration-150 ${
+                      isSelected
+                        ? 'text-gray-900 dark:text-gray-100 font-medium'
+                        : 'text-gray-700 dark:text-gray-300'
+                    }`}>
+                      {opt.label}
+                    </div>
+                    {opt.description && (
+                      <div className={`text-[11px] leading-snug transition-colors duration-150 ${
+                        isSelected
+                          ? 'text-blue-600/70 dark:text-blue-300/70'
+                          : 'text-gray-400 dark:text-gray-500'
+                      }`}>
+                        {opt.description}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Selection check */}
+                  {isSelected && (
+                    <svg className="w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2.5}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                    </svg>
+                  )}
+                </button>
+              );
+            })}
+
+            {/* "Other" option */}
+            <button
+              type="button"
+              onClick={() => toggleOther(currentStep, multi)}
+              className={`group w-full text-left flex items-center gap-2.5 px-3 py-2 rounded-lg border transition-all duration-150 ${
+                isOtherOn
+                  ? 'border-blue-300 dark:border-blue-600 bg-blue-50/80 dark:bg-blue-900/25 ring-1 ring-blue-200/50 dark:ring-blue-700/30'
+                  : 'border-dashed border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50/60 dark:hover:bg-gray-750/50'
+              }`}
+            >
+              <kbd className={`flex-shrink-0 w-5 h-5 rounded text-[10px] font-mono flex items-center justify-center transition-all duration-150 ${
+                isOtherOn
+                  ? 'bg-blue-500 dark:bg-blue-500 text-white font-semibold'
+                  : 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 border border-gray-200 dark:border-gray-700 group-hover:border-gray-300 dark:group-hover:border-gray-600'
+              }`}>
+                0
+              </kbd>
+              <span className={`text-[13px] leading-tight transition-colors ${
+                isOtherOn
+                  ? 'text-gray-900 dark:text-gray-100 font-medium'
+                  : 'text-gray-500 dark:text-gray-400'
+              }`}>
+                Other...
+              </span>
+              {isOtherOn && (
+                <svg className="w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                </svg>
+              )}
+            </button>
+
+            {/* Other text input — inline */}
+            {isOtherOn && (
+              <div className="pl-[30px] pr-0.5">
+                <div className="relative">
+                  <input
+                    ref={otherInputRef}
+                    type="text"
+                    value={otherTexts.get(currentStep) || ''}
+                    onChange={(e) => setOtherText(currentStep, e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault();
+                        if (isLast) handleSubmit();
+                        else setCurrentStep(s => s + 1);
+                      }
+                      // Prevent container keydown from firing
+                      e.stopPropagation();
+                    }}
+                    placeholder="Type your answer..."
+                    className="w-full text-[13px] rounded-lg border-0 bg-gray-50 dark:bg-gray-900/60 text-gray-900 dark:text-gray-100 px-3 py-1.5 outline-none ring-1 ring-gray-200 dark:ring-gray-700 focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 placeholder:text-gray-400 dark:placeholder:text-gray-600 transition-shadow duration-200"
+                  />
+                  <kbd className="absolute right-2 top-1/2 -translate-y-1/2 text-[9px] font-mono text-gray-300 dark:text-gray-600 bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded border border-gray-200 dark:border-gray-700">
+                    Enter
+                  </kbd>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Footer — compact */}
+        <div className="px-4 py-2 border-t border-gray-100 dark:border-gray-700/50 bg-gray-50/50 dark:bg-gray-800/50 flex items-center justify-between gap-2">
+          <button
+            type="button"
+            onClick={handleSkip}
+            className="text-[11px] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+          >
+            {isSingle ? 'Skip' : 'Skip all'}
+            <span className="ml-1 text-[9px] text-gray-300 dark:text-gray-600">Esc</span>
+          </button>
+
+          <div className="flex items-center gap-1.5">
+            {!isSingle && !isFirst && (
+              <button
+                type="button"
+                onClick={() => setCurrentStep(s => s - 1)}
+                className="inline-flex items-center gap-0.5 text-[11px] font-medium px-2.5 py-1.5 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700/60 transition-all duration-150"
+              >
+                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+                </svg>
+                Back
+              </button>
+            )}
+
+            {isLast ? (
+              <button
+                type="button"
+                onClick={handleSubmit}
+                disabled={!hasCurrentSelection && !Object.keys(buildAnswers()).length}
+                className="inline-flex items-center gap-1 text-[11px] font-semibold px-3.5 py-1.5 rounded-lg bg-gradient-to-r from-blue-600 to-blue-500 dark:from-blue-500 dark:to-blue-600 text-white shadow-sm hover:shadow-md disabled:opacity-30 disabled:cursor-not-allowed disabled:shadow-none transition-all duration-200"
+              >
+                Submit
+                <span className="text-[9px] opacity-70 font-mono ml-0.5">Enter</span>
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setCurrentStep(s => s + 1)}
+                className="inline-flex items-center gap-1 text-[11px] font-semibold px-3.5 py-1.5 rounded-lg bg-gradient-to-r from-blue-600 to-blue-500 dark:from-blue-500 dark:to-blue-600 text-white shadow-sm hover:shadow-md transition-all duration-200"
+              >
+                Next
+                <span className="text-[9px] opacity-70 font-mono ml-0.5">Enter</span>
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/src/components/chat/tools/components/InteractiveRenderers/index.ts
+++ b/src/components/chat/tools/components/InteractiveRenderers/index.ts
@@ -0,0 +1 @@
+export { AskUserQuestionPanel } from './AskUserQuestionPanel';
--- a/src/components/chat/tools/components/OneLineDisplay.tsx
+++ b/src/components/chat/tools/components/OneLineDisplay.tsx
@@ -0,0 +1,186 @@
+import React, { useState } from 'react';
+import { copyTextToClipboard } from '../../../../utils/clipboard';
+
+type ActionType = 'copy' | 'open-file' | 'jump-to-results' | 'none';
+
+interface OneLineDisplayProps {
+  toolName: string;
+  icon?: string;
+  label?: string;
+  value: string;
+  secondary?: string;
+  action?: ActionType;
+  onAction?: () => void;
+  style?: string;
+  wrapText?: boolean;
+  colorScheme?: {
+    primary?: string;
+    secondary?: string;
+    background?: string;
+    border?: string;
+    icon?: string;
+  };
+  resultId?: string;
+  toolResult?: any;
+  toolId?: string;
+}
+
+/**
+ * Unified one-line display for simple tool inputs and results
+ * Used by: Bash, Read, Grep/Glob (minimized), TodoRead, etc.
+ */
+export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
+  toolName,
+  icon,
+  label,
+  value,
+  secondary,
+  action = 'none',
+  onAction,
+  style,
+  wrapText = false,
+  colorScheme = {
+    primary: 'text-gray-700 dark:text-gray-300',
+    secondary: 'text-gray-500 dark:text-gray-400',
+    background: '',
+    border: 'border-gray-300 dark:border-gray-600',
+    icon: 'text-gray-500 dark:text-gray-400'
+  },
+  toolResult,
+  toolId
+}) => {
+  const [copied, setCopied] = useState(false);
+  const isTerminal = style === 'terminal';
+
+  const handleAction = async () => {
+    if (action === 'copy' && value) {
+      const didCopy = await copyTextToClipboard(value);
+      if (!didCopy) {
+        return;
+      }
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } else if (onAction) {
+      onAction();
+    }
+  };
+
+  const renderCopyButton = () => (
+    <button
+      onClick={handleAction}
+      className="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-all ml-1 flex-shrink-0"
+      title="Copy to clipboard"
+      aria-label="Copy to clipboard"
+    >
+      {copied ? (
+        <svg className="w-3 h-3 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+        </svg>
+      ) : (
+        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+        </svg>
+      )}
+    </button>
+  );
+
+  // Terminal style: dark pill only around the command
+  if (isTerminal) {
+    return (
+      <div className="group my-1">
+        <div className="flex items-start gap-2">
+          <div className="flex items-center gap-1.5 flex-shrink-0 pt-0.5">
+            <svg className="w-3 h-3 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+          </div>
+          <div className="flex-1 min-w-0 flex items-start gap-2">
+            <div className="bg-gray-900 dark:bg-black rounded px-2.5 py-1 flex-1 min-w-0">
+              <code className={`text-xs text-green-400 font-mono ${wrapText ? 'whitespace-pre-wrap break-all' : 'block truncate'}`}>
+                <span className="text-green-600 dark:text-green-500 select-none">$ </span>{value}
+              </code>
+            </div>
+            {action === 'copy' && renderCopyButton()}
+          </div>
+        </div>
+        {secondary && (
+          <div className="ml-7 mt-1">
+            <span className="text-[11px] text-gray-400 dark:text-gray-500 italic">
+              {secondary}
+            </span>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // File open style - show filename only, full path on hover
+  if (action === 'open-file') {
+    const displayName = value.split('/').pop() || value;
+    return (
+      <div className={`group flex items-center gap-1.5 border-l-2 ${colorScheme.border} pl-3 py-0.5 my-0.5`}>
+        <span className="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">{label || toolName}</span>
+        <span className="text-gray-300 dark:text-gray-600 text-[10px]">/</span>
+        <button
+          onClick={handleAction}
+          className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-mono hover:underline transition-colors truncate"
+          title={value}
+        >
+          {displayName}
+        </button>
+      </div>
+    );
+  }
+
+  // Search / jump-to-results style
+  if (action === 'jump-to-results') {
+    return (
+      <div className={`group flex items-center gap-1.5 border-l-2 ${colorScheme.border} pl-3 py-0.5 my-0.5`}>
+        <span className="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">{label || toolName}</span>
+        <span className="text-gray-300 dark:text-gray-600 text-[10px]">/</span>
+        <span className={`text-xs font-mono truncate flex-1 min-w-0 ${colorScheme.primary}`}>
+          {value}
+        </span>
+        {secondary && (
+          <span className="text-[11px] text-gray-400 dark:text-gray-500 italic flex-shrink-0">
+            {secondary}
+          </span>
+        )}
+        {toolResult && (
+          <a
+            href={`#tool-result-${toolId}`}
+            className="flex-shrink-0 text-[11px] text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors flex items-center gap-0.5"
+          >
+            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+          </a>
+        )}
+      </div>
+    );
+  }
+
+  // Default one-line style
+  return (
+    <div className={`group flex items-center gap-1.5 ${colorScheme.background || ''} border-l-2 ${colorScheme.border} pl-3 py-0.5 my-0.5`}>
+      {icon && icon !== 'terminal' && (
+        <span className={`${colorScheme.icon} flex-shrink-0 text-xs`}>{icon}</span>
+      )}
+      {!icon && (label || toolName) && (
+        <span className="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">{label || toolName}</span>
+      )}
+      {(icon || label || toolName) && (
+        <span className="text-gray-300 dark:text-gray-600 text-[10px]">/</span>
+      )}
+      <span className={`text-xs font-mono ${wrapText ? 'whitespace-pre-wrap break-all' : 'truncate'} flex-1 min-w-0 ${colorScheme.primary}`}>
+        {value}
+      </span>
+      {secondary && (
+        <span className={`text-[11px] ${colorScheme.secondary} italic flex-shrink-0`}>
+          {secondary}
+        </span>
+      )}
+      {action === 'copy' && renderCopyButton()}
+    </div>
+  );
+};
--- a/src/components/chat/tools/components/SubagentContainer.tsx
+++ b/src/components/chat/tools/components/SubagentContainer.tsx
@@ -0,0 +1,180 @@
+import React from 'react';
+import { CollapsibleSection } from './CollapsibleSection';
+import type { SubagentChildTool } from '../../types/types';
+
+interface SubagentContainerProps {
+  toolInput: unknown;
+  toolResult?: { content?: unknown; isError?: boolean } | null;
+  subagentState: {
+    childTools: SubagentChildTool[];
+    currentToolIndex: number;
+    isComplete: boolean;
+  };
+}
+
+const getCompactToolDisplay = (toolName: string, toolInput: unknown): string => {
+  const input = typeof toolInput === 'string' ? (() => {
+    try { return JSON.parse(toolInput); } catch { return {}; }
+  })() : (toolInput || {});
+
+  switch (toolName) {
+    case 'Read':
+    case 'Write':
+    case 'Edit':
+    case 'ApplyPatch':
+      return input.file_path?.split('/').pop() || input.file_path || '';
+    case 'Grep':
+    case 'Glob':
+      return input.pattern || '';
+    case 'Bash':
+      const cmd = input.command || '';
+      return cmd.length > 40 ? `${cmd.slice(0, 40)}...` : cmd;
+    case 'Task':
+      return input.description || input.subagent_type || '';
+    case 'WebFetch':
+    case 'WebSearch':
+      return input.url || input.query || '';
+    default:
+      return '';
+  }
+};
+
+export const SubagentContainer: React.FC<SubagentContainerProps> = ({
+  toolInput,
+  toolResult,
+  subagentState,
+}) => {
+  const parsedInput = typeof toolInput === 'string' ? (() => {
+    try { return JSON.parse(toolInput); } catch { return {}; }
+  })() : (toolInput || {});
+
+  const subagentType = parsedInput?.subagent_type || 'Agent';
+  const description = parsedInput?.description || 'Running task';
+  const prompt = parsedInput?.prompt || '';
+  const { childTools, currentToolIndex, isComplete } = subagentState;
+  const currentTool = currentToolIndex >= 0 ? childTools[currentToolIndex] : null;
+
+  const title = `Subagent / ${subagentType}: ${description}`;
+
+  return (
+    <div className="border-l-2 border-l-purple-500 dark:border-l-purple-400 pl-3 py-0.5 my-1">
+      <CollapsibleSection
+        title={title}
+        toolName="Task"
+        open={false}
+      >
+        {/* Prompt/request to the subagent */}
+        {prompt && (
+          <div className="text-xs text-gray-600 dark:text-gray-400 mb-2 whitespace-pre-wrap break-words line-clamp-4">
+            {prompt}
+          </div>
+        )}
+
+        {/* Current tool indicator (while running) */}
+        {currentTool && !isComplete && (
+          <div className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400 mt-1">
+            <span className="animate-pulse w-1.5 h-1.5 rounded-full bg-purple-500 dark:bg-purple-400 flex-shrink-0" />
+            <span className="text-gray-400 dark:text-gray-500">Currently:</span>
+            <span className="font-medium text-gray-600 dark:text-gray-300">{currentTool.toolName}</span>
+            {getCompactToolDisplay(currentTool.toolName, currentTool.toolInput) && (
+              <>
+                <span className="text-gray-300 dark:text-gray-600">/</span>
+                <span className="font-mono truncate text-gray-500 dark:text-gray-400">
+                  {getCompactToolDisplay(currentTool.toolName, currentTool.toolInput)}
+                </span>
+              </>
+            )}
+          </div>
+        )}
+
+        {/* Completion status */}
+        {isComplete && (
+          <div className="flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400 mt-1">
+            <svg className="w-3 h-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+            <span>Completed ({childTools.length} {childTools.length === 1 ? 'tool' : 'tools'})</span>
+          </div>
+        )}
+
+        {/* Tool history (collapsed) */}
+        {childTools.length > 0 && (
+          <details className="mt-2 group/history">
+            <summary className="cursor-pointer text-[11px] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 flex items-center gap-1">
+              <svg
+                className="w-2.5 h-2.5 transition-transform duration-150 group-open/history:rotate-90 flex-shrink-0"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+              <span>View tool history ({childTools.length})</span>
+            </summary>
+            <div className="mt-1 pl-3 border-l border-gray-200 dark:border-gray-700 space-y-0.5">
+              {childTools.map((child, index) => (
+                <div key={child.toolId} className="flex items-center gap-1.5 text-[11px] text-gray-500 dark:text-gray-400">
+                  <span className="text-gray-400 dark:text-gray-500 w-4 text-right flex-shrink-0">{index + 1}.</span>
+                  <span className="font-medium">{child.toolName}</span>
+                  {getCompactToolDisplay(child.toolName, child.toolInput) && (
+                    <span className="font-mono truncate text-gray-400 dark:text-gray-500">
+                      {getCompactToolDisplay(child.toolName, child.toolInput)}
+                    </span>
+                  )}
+                  {child.toolResult?.isError && (
+                    <span className="text-red-500 flex-shrink-0">(error)</span>
+                  )}
+                </div>
+              ))}
+            </div>
+          </details>
+        )}
+
+        {/* Final result */}
+        {isComplete && toolResult && (
+          <div className="mt-2 text-xs text-gray-600 dark:text-gray-400">
+            {(() => {
+              let content = toolResult.content;
+
+              // Handle JSON string that needs parsing
+              if (typeof content === 'string') {
+                try {
+                  const parsed = JSON.parse(content);
+                  if (Array.isArray(parsed)) {
+                    // Extract text from array format like [{"type":"text","text":"..."}]
+                    const textParts = parsed
+                      .filter((p: any) => p.type === 'text' && p.text)
+                      .map((p: any) => p.text);
+                    if (textParts.length > 0) {
+                      content = textParts.join('\n');
+                    }
+                  }
+                } catch {
+                  // Not JSON, use as-is
+                }
+              } else if (Array.isArray(content)) {
+                // Direct array format
+                const textParts = content
+                  .filter((p: any) => p.type === 'text' && p.text)
+                  .map((p: any) => p.text);
+                if (textParts.length > 0) {
+                  content = textParts.join('\n');
+                }
+              }
+
+              return typeof content === 'string' ? (
+                <div className="whitespace-pre-wrap break-words line-clamp-6">
+                  {content}
+                </div>
+              ) : content ? (
+                <pre className="whitespace-pre-wrap break-words line-clamp-6 font-mono text-[11px]">
+                  {JSON.stringify(content, null, 2)}
+                </pre>
+              ) : null;
+            })()}
+          </div>
+        )}
+      </CollapsibleSection>
+    </div>
+  );
+};
--- a/src/components/chat/tools/components/index.ts
+++ b/src/components/chat/tools/components/index.ts
@@ -0,0 +1,7 @@
+export { CollapsibleSection } from './CollapsibleSection';
+export { DiffViewer } from './DiffViewer';
+export { OneLineDisplay } from './OneLineDisplay';
+export { CollapsibleDisplay } from './CollapsibleDisplay';
+export { SubagentContainer } from './SubagentContainer';
+export * from './ContentRenderers';
+export * from './InteractiveRenderers';
--- a/src/components/chat/tools/configs/permissionPanelRegistry.ts
+++ b/src/components/chat/tools/configs/permissionPanelRegistry.ts
@@ -0,0 +1,25 @@
+import type { ComponentType } from 'react';
+import type { PendingPermissionRequest } from '../../types/types';
+
+export interface PermissionPanelProps {
+  request: PendingPermissionRequest;
+  onDecision: (
+    requestIds: string | string[],
+    decision: { allow?: boolean; message?: string; updatedInput?: unknown },
+  ) => void;
+}
+
+const registry: Record<string, ComponentType<PermissionPanelProps>> = {};
+
+export function registerPermissionPanel(
+  toolName: string,
+  component: ComponentType<PermissionPanelProps>,
+): void {
+  registry[toolName] = component;
+}
+
+export function getPermissionPanel(
+  toolName: string,
+): ComponentType<PermissionPanelProps> | null {
+  return registry[toolName] || null;
+}
--- a/src/components/chat/tools/configs/toolConfigs.ts
+++ b/src/components/chat/tools/configs/toolConfigs.ts
@@ -0,0 +1,603 @@
+/**
+ * Centralized tool configuration registry
+ * Defines display behavior for all tool types 
+ */
+
+export interface ToolDisplayConfig {
+  input: {
+    type: 'one-line' | 'collapsible' | 'hidden';
+    // One-line config
+    icon?: string;
+    label?: string;
+    getValue?: (input: any) => string;
+    getSecondary?: (input: any) => string | undefined;
+    action?: 'copy' | 'open-file' | 'jump-to-results' | 'none';
+    style?: string;
+    wrapText?: boolean;
+    colorScheme?: {
+      primary?: string;
+      secondary?: string;
+      background?: string;
+      border?: string;
+      icon?: string;
+    };
+    // Collapsible config
+    title?: string | ((input: any) => string);
+    defaultOpen?: boolean;
+    contentType?: 'diff' | 'markdown' | 'file-list' | 'todo-list' | 'text' | 'task' | 'question-answer';
+    getContentProps?: (input: any, helpers?: any) => any;
+    actionButton?: 'file-button' | 'none';
+  };
+  result?: {
+    hidden?: boolean;
+    hideOnSuccess?: boolean;
+    type?: 'one-line' | 'collapsible' | 'special';
+    title?: string | ((result: any) => string);
+    defaultOpen?: boolean;
+    // Special result handlers
+    contentType?: 'markdown' | 'file-list' | 'todo-list' | 'text' | 'success-message' | 'task' | 'question-answer';
+    getMessage?: (result: any) => string;
+    getContentProps?: (result: any) => any;
+  };
+}
+
+export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
+  // ============================================================================
+  // COMMAND TOOLS
+  // ============================================================================
+
+  Bash: {
+    input: {
+      type: 'one-line',
+      icon: 'terminal',
+      getValue: (input) => input.command,
+      getSecondary: (input) => input.description,
+      action: 'copy',
+      style: 'terminal',
+      wrapText: true,
+      colorScheme: {
+        primary: 'text-green-400 font-mono',
+        secondary: 'text-gray-400',
+        background: '',
+        border: 'border-green-500 dark:border-green-400',
+        icon: 'text-green-500 dark:text-green-400'
+      }
+    },
+    result: {
+      hideOnSuccess: true,
+      type: 'special'
+    }
+  },
+
+  // ============================================================================
+  // FILE OPERATION TOOLS
+  // ============================================================================
+
+  Read: {
+    input: {
+      type: 'one-line',
+      label: 'Read',
+      getValue: (input) => input.file_path || '',
+      action: 'open-file',
+      colorScheme: {
+        primary: 'text-gray-700 dark:text-gray-300',
+        background: '',
+        border: 'border-gray-300 dark:border-gray-600',
+        icon: 'text-gray-500 dark:text-gray-400'
+      }
+    },
+    result: {
+      hidden: true
+    }
+  },
+
+  Edit: {
+    input: {
+      type: 'collapsible',
+      title: (input) => {
+        const filename = input.file_path?.split('/').pop() || input.file_path || 'file';
+        return `${filename}`;
+      },
+      defaultOpen: false,
+      contentType: 'diff',
+      actionButton: 'none',
+      getContentProps: (input) => ({
+        oldContent: input.old_string,
+        newContent: input.new_string,
+        filePath: input.file_path,
+        badge: 'Edit',
+        badgeColor: 'gray'
+      })
+    },
+    result: {
+      hideOnSuccess: true
+    }
+  },
+
+  Write: {
+    input: {
+      type: 'collapsible',
+      title: (input) => {
+        const filename = input.file_path?.split('/').pop() || input.file_path || 'file';
+        return `${filename}`;
+      },
+      defaultOpen: false,
+      contentType: 'diff',
+      actionButton: 'none',
+      getContentProps: (input) => ({
+        oldContent: '',
+        newContent: input.content,
+        filePath: input.file_path,
+        badge: 'New',
+        badgeColor: 'green'
+      })
+    },
+    result: {
+      hideOnSuccess: true
+    }
+  },
+
+  ApplyPatch: {
+    input: {
+      type: 'collapsible',
+      title: (input) => {
+        const filename = input.file_path?.split('/').pop() || input.file_path || 'file';
+        return `${filename}`;
+      },
+      defaultOpen: false,
+      contentType: 'diff',
+      actionButton: 'none',
+      getContentProps: (input) => ({
+        oldContent: input.old_string,
+        newContent: input.new_string,
+        filePath: input.file_path,
+        badge: 'Patch',
+        badgeColor: 'gray'
+      })
+    },
+    result: {
+      hideOnSuccess: true
+    }
+  },
+
+  // ============================================================================
+  // SEARCH TOOLS
+  // ============================================================================
+
+  Grep: {
+    input: {
+      type: 'one-line',
+      label: 'Grep',
+      getValue: (input) => input.pattern,
+      getSecondary: (input) => input.path ? `in ${input.path}` : undefined,
+      action: 'jump-to-results',
+      colorScheme: {
+        primary: 'text-gray-700 dark:text-gray-300',
+        secondary: 'text-gray-500 dark:text-gray-400',
+        background: '',
+        border: 'border-gray-400 dark:border-gray-500',
+        icon: 'text-gray-500 dark:text-gray-400'
+      }
+    },
+    result: {
+      type: 'collapsible',
+      defaultOpen: false,
+      title: (result) => {
+        const toolData = result.toolUseResult || {};
+        const count = toolData.numFiles || toolData.filenames?.length || 0;
+        return `Found ${count} ${count === 1 ? 'file' : 'files'}`;
+      },
+      contentType: 'file-list',
+      getContentProps: (result) => {
+        const toolData = result.toolUseResult || {};
+        return {
+          files: toolData.filenames || []
+        };
+      }
+    }
+  },
+
+  Glob: {
+    input: {
+      type: 'one-line',
+      label: 'Glob',
+      getValue: (input) => input.pattern,
+      getSecondary: (input) => input.path ? `in ${input.path}` : undefined,
+      action: 'jump-to-results',
+      colorScheme: {
+        primary: 'text-gray-700 dark:text-gray-300',
+        secondary: 'text-gray-500 dark:text-gray-400',
+        background: '',
+        border: 'border-gray-400 dark:border-gray-500',
+        icon: 'text-gray-500 dark:text-gray-400'
+      }
+    },
+    result: {
+      type: 'collapsible',
+      defaultOpen: false,
+      title: (result) => {
+        const toolData = result.toolUseResult || {};
+        const count = toolData.numFiles || toolData.filenames?.length || 0;
+        return `Found ${count} ${count === 1 ? 'file' : 'files'}`;
+      },
+      contentType: 'file-list',
+      getContentProps: (result) => {
+        const toolData = result.toolUseResult || {};
+        return {
+          files: toolData.filenames || []
+        };
+      }
+    }
+  },
+
+  // ============================================================================
+  // TODO TOOLS
+  // ============================================================================
+
+  TodoWrite: {
+    input: {
+      type: 'collapsible',
+      title: 'Updating todo list',
+      defaultOpen: false,
+      contentType: 'todo-list',
+      getContentProps: (input) => ({
+        todos: input.todos
+      })
+    },
+    result: {
+      type: 'collapsible',
+      contentType: 'success-message',
+      getMessage: () => 'Todo list updated'
+    }
+  },
+
+  TodoRead: {
+    input: {
+      type: 'one-line',
+      label: 'TodoRead',
+      getValue: () => 'reading list',
+      action: 'none',
+      colorScheme: {
+        primary: 'text-gray-500 dark:text-gray-400',
+        border: 'border-violet-400 dark:border-violet-500'
+      }
+    },
+    result: {
+      type: 'collapsible',
+      contentType: 'todo-list',
+      getContentProps: (result) => {
+        try {
+          const content = String(result.content || '');
+          let todos = null;
+          if (content.startsWith('[')) {
+            todos = JSON.parse(content);
+          }
+          return { todos, isResult: true };
+        } catch (e) {
+          return { todos: [], isResult: true };
+        }
+      }
+    }
+  },
+
+  // ============================================================================
+  // TASK TOOLS (TaskCreate, TaskUpdate, TaskList, TaskGet)
+  // ============================================================================
+
+  TaskCreate: {
+    input: {
+      type: 'one-line',
+      label: 'Task',
+      getValue: (input) => input.subject || 'Creating task',
+      getSecondary: (input) => input.status || undefined,
+      action: 'none',
+      colorScheme: {
+        primary: 'text-gray-700 dark:text-gray-300',
+        border: 'border-violet-400 dark:border-violet-500',
+        icon: 'text-violet-500 dark:text-violet-400'
+      }
+    },
+    result: {
+      hideOnSuccess: true
+    }
+  },
+
+  TaskUpdate: {
+    input: {
+      type: 'one-line',
+      label: 'Task',
+      getValue: (input) => {
+        const parts = [];
+        if (input.taskId) parts.push(`#${input.taskId}`);
+        if (input.status) parts.push(input.status);
+        if (input.subject) parts.push(`"${input.subject}"`);
+        return parts.join(' → ') || 'updating';
+      },
+      action: 'none',
+      colorScheme: {
+        primary: 'text-gray-700 dark:text-gray-300',
+        border: 'border-violet-400 dark:border-violet-500',
+        icon: 'text-violet-500 dark:text-violet-400'
+      }
+    },
+    result: {
+      hideOnSuccess: true
+    }
+  },
+
+  TaskList: {
+    input: {
+      type: 'one-line',
+      label: 'Tasks',
+      getValue: () => 'listing tasks',
+      action: 'none',
+      colorScheme: {
+        primary: 'text-gray-500 dark:text-gray-400',
+        border: 'border-violet-400 dark:border-violet-500',
+        icon: 'text-violet-500 dark:text-violet-400'
+      }
+    },
+    result: {
+      type: 'collapsible',
+      defaultOpen: true,
+      title: 'Task list',
+      contentType: 'task',
+      getContentProps: (result) => ({
+        content: String(result?.content || '')
+      })
+    }
+  },
+
+  TaskGet: {
+    input: {
+      type: 'one-line',
+      label: 'Task',
+      getValue: (input) => input.taskId ? `#${input.taskId}` : 'fetching',
+      action: 'none',
+      colorScheme: {
+        primary: 'text-gray-700 dark:text-gray-300',
+        border: 'border-violet-400 dark:border-violet-500',
+        icon: 'text-violet-500 dark:text-violet-400'
+      }
+    },
+    result: {
+      type: 'collapsible',
+      defaultOpen: true,
+      title: 'Task details',
+      contentType: 'task',
+      getContentProps: (result) => ({
+        content: String(result?.content || '')
+      })
+    }
+  },
+
+  // ============================================================================
+  // SUBAGENT TASK TOOL
+  // ============================================================================
+
+  Task: {
+    input: {
+      type: 'collapsible',
+      title: (input) => {
+        const subagentType = input.subagent_type || 'Agent';
+        const description = input.description || 'Running task';
+        return `Subagent / ${subagentType}: ${description}`;
+      },
+      defaultOpen: false,
+      contentType: 'markdown',
+      getContentProps: (input) => {
+        // If only prompt exists (and required fields), show just the prompt
+        // Otherwise show all available fields
+        const hasOnlyPrompt = input.prompt &&
+          !input.model &&
+          !input.resume;
+
+        if (hasOnlyPrompt) {
+          return {
+            content: input.prompt || ''
+          };
+        }
+
+        // Format multiple fields
+        const parts = [];
+
+        if (input.model) {
+          parts.push(`**Model:** ${input.model}`);
+        }
+
+        if (input.prompt) {
+          parts.push(`**Prompt:**\n${input.prompt}`);
+        }
+
+        if (input.resume) {
+          parts.push(`**Resuming from:** ${input.resume}`);
+        }
+
+        return {
+          content: parts.join('\n\n')
+        };
+      },
+      colorScheme: {
+        border: 'border-purple-500 dark:border-purple-400',
+        icon: 'text-purple-500 dark:text-purple-400'
+      }
+    },
+    result: {
+      type: 'collapsible',
+      title: 'Subagent result',
+      defaultOpen: false,
+      contentType: 'markdown',
+      getContentProps: (result) => {
+        // Handle agent results which may have complex structure
+        if (result && result.content) {
+          let content = result.content;
+          // If content is a JSON string, try to parse it (agent results may arrive serialized)
+          if (typeof content === 'string') {
+            try {
+              const parsed = JSON.parse(content);
+              if (Array.isArray(parsed)) {
+                content = parsed;
+              }
+            } catch {
+              // Not JSON — use as-is
+              return { content };
+            }
+          }
+          // If content is an array (typical for agent responses with multiple text blocks)
+          if (Array.isArray(content)) {
+            const textContent = content
+              .filter((item: any) => item.type === 'text')
+              .map((item: any) => item.text)
+              .join('\n\n');
+            return { content: textContent || 'No response text' };
+          }
+          return { content: String(content) };
+        }
+        // Fallback to string representation
+        return { content: String(result || 'No response') };
+      }
+    }
+  },
+
+  // ============================================================================
+  // INTERACTIVE TOOLS
+  // ============================================================================
+
+  AskUserQuestion: {
+    input: {
+      type: 'collapsible',
+      title: (input: any) => {
+        const count = input.questions?.length || 0;
+        const hasAnswers = input.answers && Object.keys(input.answers).length > 0;
+        if (count === 1) {
+          const header = input.questions[0]?.header || 'Question';
+          return hasAnswers ? `${header} — answered` : header;
+        }
+        return hasAnswers ? `${count} questions — answered` : `${count} questions`;
+      },
+      defaultOpen: true,
+      contentType: 'question-answer',
+      getContentProps: (input: any) => ({
+        questions: input.questions || [],
+        answers: input.answers || {}
+      }),
+    },
+    result: {
+      hideOnSuccess: true
+    }
+  },
+
+  // ============================================================================
+  // PLAN TOOLS
+  // ============================================================================
+
+  exit_plan_mode: {
+    input: {
+      type: 'collapsible',
+      title: 'Implementation plan',
+      defaultOpen: true,
+      contentType: 'markdown',
+      getContentProps: (input) => ({
+        content: input.plan?.replace(/\\n/g, '\n') || input.plan
+      })
+    },
+    result: {
+      type: 'collapsible',
+      contentType: 'markdown',
+      getContentProps: (result) => {
+        try {
+          let parsed = result.content;
+          if (typeof parsed === 'string') {
+            parsed = JSON.parse(parsed);
+          }
+          return {
+            content: parsed.plan?.replace(/\\n/g, '\n') || parsed.plan
+          };
+        } catch (e) {
+          return { content: '' };
+        }
+      }
+    }
+  },
+
+  // Also register as ExitPlanMode (the actual tool name used by Claude)
+  ExitPlanMode: {
+    input: {
+      type: 'collapsible',
+      title: 'Implementation plan',
+      defaultOpen: true,
+      contentType: 'markdown',
+      getContentProps: (input) => ({
+        content: input.plan?.replace(/\\n/g, '\n') || input.plan
+      })
+    },
+    result: {
+      type: 'collapsible',
+      contentType: 'markdown',
+      getContentProps: (result) => {
+        try {
+          let parsed = result.content;
+          if (typeof parsed === 'string') {
+            parsed = JSON.parse(parsed);
+          }
+          return {
+            content: parsed.plan?.replace(/\\n/g, '\n') || parsed.plan
+          };
+        } catch (e) {
+          return { content: '' };
+        }
+      }
+    }
+  },
+
+  // ============================================================================
+  // DEFAULT FALLBACK
+  // ============================================================================
+
+  Default: {
+    input: {
+      type: 'collapsible',
+      title: 'Parameters',
+      defaultOpen: false,
+      contentType: 'text',
+      getContentProps: (input) => ({
+        content: typeof input === 'string' ? input : JSON.stringify(input, null, 2),
+        format: 'code'
+      })
+    },
+    result: {
+      type: 'collapsible',
+      contentType: 'text',
+      getContentProps: (result) => ({
+        content: String(result?.content || ''),
+        format: 'plain'
+      })
+    }
+  }
+};
+
+/**
+ * Get configuration for a tool, with fallback to default
+ */
+export function getToolConfig(toolName: string): ToolDisplayConfig {
+  return TOOL_CONFIGS[toolName] || TOOL_CONFIGS.Default;
+}
+
+/**
+ * Check if a tool result should be hidden
+ */
+export function shouldHideToolResult(toolName: string, toolResult: any): boolean {
+  const config = getToolConfig(toolName);
+
+  if (!config.result) return false;
+
+  // Always hidden
+  if (config.result.hidden) return true;
+
+  // Hide on success only
+  if (config.result.hideOnSuccess && toolResult && !toolResult.isError) {
+    return true;
+  }
+
+  return false;
+}
--- a/src/components/chat/tools/index.ts
+++ b/src/components/chat/tools/index.ts
@@ -0,0 +1,3 @@
+export { ToolRenderer } from './ToolRenderer';
+export { getToolConfig, shouldHideToolResult } from './configs/toolConfigs';
+export * from './components';
--- a/src/components/chat/types/types.ts
+++ b/src/components/chat/types/types.ts
@@ -0,0 +1,118 @@
+import type { Project, ProjectSession, SessionProvider } from '../../../types/app';
+
+export type Provider = SessionProvider;
+
+export type PermissionMode = 'default' | 'acceptEdits' | 'bypassPermissions' | 'plan';
+
+export interface ChatImage {
+  data: string;
+  name: string;
+}
+
+export interface ToolResult {
+  content?: unknown;
+  isError?: boolean;
+  timestamp?: string | number | Date;
+  toolUseResult?: unknown;
+  [key: string]: unknown;
+}
+
+export interface SubagentChildTool {
+  toolId: string;
+  toolName: string;
+  toolInput: unknown;
+  toolResult?: ToolResult | null;
+  timestamp: Date;
+}
+
+export interface ChatMessage {
+  type: string;
+  content?: string;
+  timestamp: string | number | Date;
+  images?: ChatImage[];
+  reasoning?: string;
+  isThinking?: boolean;
+  isStreaming?: boolean;
+  isInteractivePrompt?: boolean;
+  isToolUse?: boolean;
+  toolName?: string;
+  toolInput?: unknown;
+  toolResult?: ToolResult | null;
+  toolId?: string;
+  toolCallId?: string;
+  isSubagentContainer?: boolean;
+  subagentState?: {
+    childTools: SubagentChildTool[];
+    currentToolIndex: number;
+    isComplete: boolean;
+  };
+  [key: string]: unknown;
+}
+
+export interface ClaudeSettings {
+  allowedTools: string[];
+  disallowedTools: string[];
+  skipPermissions: boolean;
+  projectSortOrder: string;
+  lastUpdated?: string;
+  [key: string]: unknown;
+}
+
+export interface ClaudePermissionSuggestion {
+  toolName: string;
+  entry: string;
+  isAllowed: boolean;
+}
+
+export interface PermissionGrantResult {
+  success: boolean;
+  alreadyAllowed?: boolean;
+  updatedSettings?: ClaudeSettings;
+}
+
+export interface PendingPermissionRequest {
+  requestId: string;
+  toolName: string;
+  input?: unknown;
+  context?: unknown;
+  sessionId?: string | null;
+  receivedAt?: Date;
+}
+
+export interface QuestionOption {
+  label: string;
+  description?: string;
+}
+
+export interface Question {
+  question: string;
+  header?: string;
+  options: QuestionOption[];
+  multiSelect?: boolean;
+}
+
+export interface ChatInterfaceProps {
+  selectedProject: Project | null;
+  selectedSession: ProjectSession | null;
+  ws: WebSocket | null;
+  sendMessage: (message: unknown) => void;
+  latestMessage: any;
+  onFileOpen?: (filePath: string, diffInfo?: any) => void;
+  onInputFocusChange?: (focused: boolean) => void;
+  onSessionActive?: (sessionId?: string | null) => void;
+  onSessionInactive?: (sessionId?: string | null) => void;
+  onSessionProcessing?: (sessionId?: string | null) => void;
+  onSessionNotProcessing?: (sessionId?: string | null) => void;
+  processingSessions?: Set<string>;
+  onReplaceTemporarySession?: (sessionId?: string | null) => void;
+  onNavigateToSession?: (targetSessionId: string) => void;
+  onShowSettings?: () => void;
+  autoExpandTools?: boolean;
+  showRawParameters?: boolean;
+  showThinking?: boolean;
+  autoScrollToBottom?: boolean;
+  sendByCtrlEnter?: boolean;
+  externalMessageUpdate?: number;
+  onTaskClick?: (...args: unknown[]) => void;
+  onShowAllTasks?: (() => void) | null;
+}
--- a/src/components/chat/utils/chatFormatting.ts
+++ b/src/components/chat/utils/chatFormatting.ts
@@ -0,0 +1,86 @@
+export function decodeHtmlEntities(text: string) {
+  if (!text) return text;
+  return text
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&amp;/g, '&');
+}
+
+export function normalizeInlineCodeFences(text: string) {
+  if (!text || typeof text !== 'string') return text;
+  try {
+    return text.replace(/```\s*([^\n\r]+?)\s*```/g, '`$1`');
+  } catch {
+    return text;
+  }
+}
+
+export function unescapeWithMathProtection(text: string) {
+  if (!text || typeof text !== 'string') return text;
+
+  const mathBlocks: string[] = [];
+  const placeholderPrefix = '__MATH_BLOCK_';
+  const placeholderSuffix = '__';
+
+  let processedText = text.replace(/\$\$([\s\S]*?)\$\$|\$([^\$\n]+?)\$/g, (match) => {
+    const index = mathBlocks.length;
+    mathBlocks.push(match);
+    return `${placeholderPrefix}${index}${placeholderSuffix}`;
+  });
+
+  processedText = processedText.replace(/\\n/g, '\n').replace(/\\t/g, '\t').replace(/\\r/g, '\r');
+
+  processedText = processedText.replace(
+    new RegExp(`${placeholderPrefix}(\\d+)${placeholderSuffix}`, 'g'),
+    (match, index) => {
+      return mathBlocks[parseInt(index, 10)];
+    },
+  );
+
+  return processedText;
+}
+
+export function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+export function formatUsageLimitText(text: string) {
+  try {
+    if (typeof text !== 'string') return text;
+    return text.replace(/Claude AI usage limit reached\|(\d{10,13})/g, (match, ts) => {
+      let timestampMs = parseInt(ts, 10);
+      if (!Number.isFinite(timestampMs)) return match;
+      if (timestampMs < 1e12) timestampMs *= 1000;
+      const reset = new Date(timestampMs);
+
+      const timeStr = new Intl.DateTimeFormat(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+      }).format(reset);
+
+      const offsetMinutesLocal = -reset.getTimezoneOffset();
+      const sign = offsetMinutesLocal >= 0 ? '+' : '-';
+      const abs = Math.abs(offsetMinutesLocal);
+      const offH = Math.floor(abs / 60);
+      const offM = abs % 60;
+      const gmt = `GMT${sign}${offH}${offM ? ':' + String(offM).padStart(2, '0') : ''}`;
+      const tzId = Intl.DateTimeFormat().resolvedOptions().timeZone || '';
+      const cityRaw = tzId.split('/').pop() || '';
+      const city = cityRaw
+        .replace(/_/g, ' ')
+        .toLowerCase()
+        .replace(/\b\w/g, (char) => char.toUpperCase());
+      const tzHuman = city ? `${gmt} (${city})` : gmt;
+
+      const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+      const dateReadable = `${reset.getDate()} ${months[reset.getMonth()]} ${reset.getFullYear()}`;
+
+      return `Claude usage limit reached. Your limit will reset at **${timeStr} ${tzHuman}** - ${dateReadable}`;
+    });
+  } catch {
+    return text;
+  }
+}
--- a/src/components/chat/utils/chatPermissions.ts
+++ b/src/components/chat/utils/chatPermissions.ts
@@ -0,0 +1,64 @@
+import { safeJsonParse } from '../../../lib/utils.js';
+import type { ChatMessage, ClaudePermissionSuggestion, PermissionGrantResult } from '../types/types.js';
+import { CLAUDE_SETTINGS_KEY, getClaudeSettings, safeLocalStorage } from './chatStorage';
+
+export function buildClaudeToolPermissionEntry(toolName?: string, toolInput?: unknown) {
+  if (!toolName) return null;
+  if (toolName !== 'Bash') return toolName;
+
+  const parsed = safeJsonParse(toolInput);
+  const command = typeof parsed?.command === 'string' ? parsed.command.trim() : '';
+  if (!command) return toolName;
+
+  const tokens = command.split(/\s+/);
+  if (tokens.length === 0) return toolName;
+
+  if (tokens[0] === 'git' && tokens[1]) {
+    return `Bash(${tokens[0]} ${tokens[1]}:*)`;
+  }
+  return `Bash(${tokens[0]}:*)`;
+}
+
+export function formatToolInputForDisplay(input: unknown) {
+  if (input === undefined || input === null) return '';
+  if (typeof input === 'string') return input;
+  try {
+    return JSON.stringify(input, null, 2);
+  } catch {
+    return String(input);
+  }
+}
+
+export function getClaudePermissionSuggestion(
+  message: ChatMessage | null | undefined,
+  provider: string,
+): ClaudePermissionSuggestion | null {
+  if (provider !== 'claude') return null;
+  if (!message?.toolResult?.isError) return null;
+
+  const toolName = message?.toolName;
+  const entry = buildClaudeToolPermissionEntry(toolName, message.toolInput);
+  if (!entry) return null;
+
+  const settings = getClaudeSettings();
+  const isAllowed = settings.allowedTools.includes(entry);
+  return { toolName: toolName || 'UnknownTool', entry, isAllowed };
+}
+
+export function grantClaudeToolPermission(entry: string | null): PermissionGrantResult {
+  if (!entry) return { success: false };
+
+  const settings = getClaudeSettings();
+  const alreadyAllowed = settings.allowedTools.includes(entry);
+  const nextAllowed = alreadyAllowed ? settings.allowedTools : [...settings.allowedTools, entry];
+  const nextDisallowed = settings.disallowedTools.filter((tool) => tool !== entry);
+  const updatedSettings = {
+    ...settings,
+    allowedTools: nextAllowed,
+    disallowedTools: nextDisallowed,
+    lastUpdated: new Date().toISOString(),
+  };
+
+  safeLocalStorage.setItem(CLAUDE_SETTINGS_KEY, JSON.stringify(updatedSettings));
+  return { success: true, alreadyAllowed, updatedSettings };
+}
--- a/src/components/chat/utils/chatStorage.ts
+++ b/src/components/chat/utils/chatStorage.ts
@@ -0,0 +1,105 @@
+import type { ClaudeSettings } from '../types/types';
+
+export const CLAUDE_SETTINGS_KEY = 'claude-settings';
+
+export const safeLocalStorage = {
+  setItem: (key: string, value: string) => {
+    try {
+      if (key.startsWith('chat_messages_') && typeof value === 'string') {
+        try {
+          const parsed = JSON.parse(value);
+          if (Array.isArray(parsed) && parsed.length > 50) {
+            const truncated = parsed.slice(-50);
+            value = JSON.stringify(truncated);
+          }
+        } catch (parseError) {
+          console.warn('Could not parse chat messages for truncation:', parseError);
+        }
+      }
+
+      localStorage.setItem(key, value);
+    } catch (error: any) {
+      if (error?.name === 'QuotaExceededError') {
+        console.warn('localStorage quota exceeded, clearing old data');
+
+        const keys = Object.keys(localStorage);
+        const chatKeys = keys.filter((k) => k.startsWith('chat_messages_')).sort();
+
+        if (chatKeys.length > 3) {
+          chatKeys.slice(0, chatKeys.length - 3).forEach((k) => {
+            localStorage.removeItem(k);
+          });
+        }
+
+        const draftKeys = keys.filter((k) => k.startsWith('draft_input_'));
+        draftKeys.forEach((k) => {
+          localStorage.removeItem(k);
+        });
+
+        try {
+          localStorage.setItem(key, value);
+        } catch (retryError) {
+          console.error('Failed to save to localStorage even after cleanup:', retryError);
+          if (key.startsWith('chat_messages_') && typeof value === 'string') {
+            try {
+              const parsed = JSON.parse(value);
+              if (Array.isArray(parsed) && parsed.length > 10) {
+                const minimal = parsed.slice(-10);
+                localStorage.setItem(key, JSON.stringify(minimal));
+              }
+            } catch (finalError) {
+              console.error('Final save attempt failed:', finalError);
+            }
+          }
+        }
+      } else {
+        console.error('localStorage error:', error);
+      }
+    }
+  },
+  getItem: (key: string): string | null => {
+    try {
+      return localStorage.getItem(key);
+    } catch (error) {
+      console.error('localStorage getItem error:', error);
+      return null;
+    }
+  },
+  removeItem: (key: string) => {
+    try {
+      localStorage.removeItem(key);
+    } catch (error) {
+      console.error('localStorage removeItem error:', error);
+    }
+  },
+};
+
+export function getClaudeSettings(): ClaudeSettings {
+  const raw = safeLocalStorage.getItem(CLAUDE_SETTINGS_KEY);
+  if (!raw) {
+    return {
+      allowedTools: [],
+      disallowedTools: [],
+      skipPermissions: false,
+      projectSortOrder: 'name',
+    };
+  }
+
+  try {
+    const parsed = JSON.parse(raw);
+    return {
+      ...parsed,
+      allowedTools: Array.isArray(parsed.allowedTools) ? parsed.allowedTools : [],
+      disallowedTools: Array.isArray(parsed.disallowedTools) ? parsed.disallowedTools : [],
+      skipPermissions: Boolean(parsed.skipPermissions),
+      projectSortOrder: parsed.projectSortOrder || 'name',
+    };
+  } catch {
+    return {
+      allowedTools: [],
+      disallowedTools: [],
+      skipPermissions: false,
+      projectSortOrder: 'name',
+    };
+  }
+}
--- a/src/components/chat/utils/messageKeys.ts
+++ b/src/components/chat/utils/messageKeys.ts
@@ -0,0 +1,38 @@
+import type { ChatMessage } from '../types/types';
+
+const toMessageKeyPart = (value: unknown): string | null => {
+  if (typeof value !== 'string' && typeof value !== 'number') {
+    return null;
+  }
+
+  const normalized = String(value).trim();
+  return normalized.length > 0 ? normalized : null;
+};
+
+export const getIntrinsicMessageKey = (message: ChatMessage): string | null => {
+  const candidates = [
+    message.id,
+    message.messageId,
+    message.toolId,
+    message.toolCallId,
+    message.blobId,
+    message.rowid,
+    message.sequence,
+  ];
+
+  for (const candidate of candidates) {
+    const keyPart = toMessageKeyPart(candidate);
+    if (keyPart) {
+      return `message-${message.type}-${keyPart}`;
+    }
+  }
+
+  const timestamp = new Date(message.timestamp).getTime();
+  if (!Number.isFinite(timestamp)) {
+    return null;
+  }
+
+  const contentPreview = typeof message.content === 'string' ? message.content.slice(0, 48) : '';
+  const toolName = typeof message.toolName === 'string' ? message.toolName : '';
+  return `message-${message.type}-${timestamp}-${toolName}-${contentPreview}`;
+};
--- a/src/components/chat/utils/messageTransforms.ts
+++ b/src/components/chat/utils/messageTransforms.ts
@@ -0,0 +1,549 @@
+import type { ChatMessage } from '../types/types';
+import { decodeHtmlEntities, unescapeWithMathProtection } from './chatFormatting';
+
+export interface DiffLine {
+  type: 'added' | 'removed';
+  content: string;
+  lineNum: number;
+}
+
+export type DiffCalculator = (oldStr: string, newStr: string) => DiffLine[];
+
+type CursorBlob = {
+  id?: string;
+  sequence?: number;
+  rowid?: number;
+  content?: any;
+};
+
+const asArray = <T>(value: unknown): T[] => (Array.isArray(value) ? (value as T[]) : []);
+
+const normalizeToolInput = (value: unknown): string => {
+  if (value === null || value === undefined || value === '') {
+    return '';
+  }
+
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+};
+
+const toAbsolutePath = (projectPath: string, filePath?: string) => {
+  if (!filePath) {
+    return filePath;
+  }
+  return filePath.startsWith('/') ? filePath : `${projectPath}/${filePath}`;
+};
+
+export const calculateDiff = (oldStr: string, newStr: string): DiffLine[] => {
+  const oldLines = oldStr.split('\n');
+  const newLines = newStr.split('\n');
+
+  // Use LCS alignment so insertions/deletions don't cascade into a full-file "changed" diff.
+  const lcsTable: number[][] = Array.from({ length: oldLines.length + 1 }, () =>
+    new Array<number>(newLines.length + 1).fill(0),
+  );
+  for (let oldIndex = oldLines.length - 1; oldIndex >= 0; oldIndex -= 1) {
+    for (let newIndex = newLines.length - 1; newIndex >= 0; newIndex -= 1) {
+      if (oldLines[oldIndex] === newLines[newIndex]) {
+        lcsTable[oldIndex][newIndex] = lcsTable[oldIndex + 1][newIndex + 1] + 1;
+      } else {
+        lcsTable[oldIndex][newIndex] = Math.max(
+          lcsTable[oldIndex + 1][newIndex],
+          lcsTable[oldIndex][newIndex + 1],
+        );
+      }
+    }
+  }
+
+  const diffLines: DiffLine[] = [];
+  let oldIndex = 0;
+  let newIndex = 0;
+
+  while (oldIndex < oldLines.length && newIndex < newLines.length) {
+    const oldLine = oldLines[oldIndex];
+    const newLine = newLines[newIndex];
+
+    if (oldLine === newLine) {
+      oldIndex += 1;
+      newIndex += 1;
+      continue;
+    }
+
+    if (lcsTable[oldIndex + 1][newIndex] >= lcsTable[oldIndex][newIndex + 1]) {
+      diffLines.push({ type: 'removed', content: oldLine, lineNum: oldIndex + 1 });
+      oldIndex += 1;
+      continue;
+    }
+
+    diffLines.push({ type: 'added', content: newLine, lineNum: newIndex + 1 });
+    newIndex += 1;
+  }
+
+  while (oldIndex < oldLines.length) {
+    diffLines.push({ type: 'removed', content: oldLines[oldIndex], lineNum: oldIndex + 1 });
+    oldIndex += 1;
+  }
+
+  while (newIndex < newLines.length) {
+    diffLines.push({ type: 'added', content: newLines[newIndex], lineNum: newIndex + 1 });
+    newIndex += 1;
+  }
+
+  return diffLines;
+};
+
+export const createCachedDiffCalculator = (): DiffCalculator => {
+  const cache = new Map<string, DiffLine[]>();
+
+  return (oldStr: string, newStr: string) => {
+    const key = JSON.stringify([oldStr, newStr]);
+    const cached = cache.get(key);
+    if (cached) {
+      return cached;
+    }
+
+    const calculated = calculateDiff(oldStr, newStr);
+    cache.set(key, calculated);
+    if (cache.size > 100) {
+      const firstKey = cache.keys().next().value;
+      if (firstKey) {
+        cache.delete(firstKey);
+      }
+    }
+    return calculated;
+  };
+};
+
+export const convertCursorSessionMessages = (blobs: CursorBlob[], projectPath: string): ChatMessage[] => {
+  const converted: ChatMessage[] = [];
+  const toolUseMap: Record<string, ChatMessage> = {};
+
+  for (let blobIdx = 0; blobIdx < blobs.length; blobIdx += 1) {
+    const blob = blobs[blobIdx];
+    const content = blob.content;
+    let text = '';
+    let role: ChatMessage['type'] = 'assistant';
+    let reasoningText: string | null = null;
+
+    try {
+      if (content?.role && content?.content) {
+        if (content.role === 'system') {
+          continue;
+        }
+
+        if (content.role === 'tool') {
+          const toolItems = asArray<any>(content.content);
+          for (const item of toolItems) {
+            if (item?.type !== 'tool-result') {
+              continue;
+            }
+
+            const toolName = item.toolName === 'ApplyPatch' ? 'Edit' : item.toolName || 'Unknown Tool';
+            const toolCallId = item.toolCallId || content.id;
+            const result = item.result || '';
+
+            if (toolCallId && toolUseMap[toolCallId]) {
+              toolUseMap[toolCallId].toolResult = {
+                content: result,
+                isError: false,
+              };
+            } else {
+              converted.push({
+                type: 'assistant',
+                content: '',
+                timestamp: new Date(Date.now() + blobIdx * 1000),
+                blobId: blob.id,
+                sequence: blob.sequence,
+                rowid: blob.rowid,
+                isToolUse: true,
+                toolName,
+                toolId: toolCallId,
+                toolInput: normalizeToolInput(null),
+                toolResult: {
+                  content: result,
+                  isError: false,
+                },
+              });
+            }
+          }
+          continue;
+        }
+
+        role = content.role === 'user' ? 'user' : 'assistant';
+
+        if (Array.isArray(content.content)) {
+          const textParts: string[] = [];
+
+          for (const part of content.content) {
+            if (part?.type === 'text' && part?.text) {
+              textParts.push(decodeHtmlEntities(part.text));
+              continue;
+            }
+
+            if (part?.type === 'reasoning' && part?.text) {
+              reasoningText = decodeHtmlEntities(part.text);
+              continue;
+            }
+
+            if (part?.type === 'tool-call' || part?.type === 'tool_use') {
+              if (textParts.length > 0 || reasoningText) {
+                converted.push({
+                  type: role,
+                  content: textParts.join('\n'),
+                  reasoning: reasoningText ?? undefined,
+                  timestamp: new Date(Date.now() + blobIdx * 1000),
+                  blobId: blob.id,
+                  sequence: blob.sequence,
+                  rowid: blob.rowid,
+                });
+                textParts.length = 0;
+                reasoningText = null;
+              }
+
+              const toolNameRaw = part.toolName || part.name || 'Unknown Tool';
+              const toolName = toolNameRaw === 'ApplyPatch' ? 'Edit' : toolNameRaw;
+              const toolId = part.toolCallId || part.id || `tool_${blobIdx}`;
+              let toolInput = part.args || part.input;
+
+              if (toolName === 'Edit' && part.args) {
+                if (part.args.patch) {
+                  const patchLines = String(part.args.patch).split('\n');
+                  const oldLines: string[] = [];
+                  const newLines: string[] = [];
+                  let inPatch = false;
+
+                  patchLines.forEach((line) => {
+                    if (line.startsWith('@@')) {
+                      inPatch = true;
+                      return;
+                    }
+                    if (!inPatch) {
+                      return;
+                    }
+
+                    if (line.startsWith('-')) {
+                      oldLines.push(line.slice(1));
+                    } else if (line.startsWith('+')) {
+                      newLines.push(line.slice(1));
+                    } else if (line.startsWith(' ')) {
+                      oldLines.push(line.slice(1));
+                      newLines.push(line.slice(1));
+                    }
+                  });
+
+                  toolInput = {
+                    file_path: toAbsolutePath(projectPath, part.args.file_path),
+                    old_string: oldLines.join('\n') || part.args.patch,
+                    new_string: newLines.join('\n') || part.args.patch,
+                  };
+                } else {
+                  toolInput = part.args;
+                }
+              } else if (toolName === 'Read' && part.args) {
+                const filePath = part.args.path || part.args.file_path;
+                toolInput = {
+                  file_path: toAbsolutePath(projectPath, filePath),
+                };
+              } else if (toolName === 'Write' && part.args) {
+                const filePath = part.args.path || part.args.file_path;
+                toolInput = {
+                  file_path: toAbsolutePath(projectPath, filePath),
+                  content: part.args.contents || part.args.content,
+                };
+              }
+
+              const toolMessage: ChatMessage = {
+                type: 'assistant',
+                content: '',
+                timestamp: new Date(Date.now() + blobIdx * 1000),
+                blobId: blob.id,
+                sequence: blob.sequence,
+                rowid: blob.rowid,
+                isToolUse: true,
+                toolName,
+                toolId,
+                toolInput: normalizeToolInput(toolInput),
+                toolResult: null,
+              };
+              converted.push(toolMessage);
+              toolUseMap[toolId] = toolMessage;
+              continue;
+            }
+
+            if (typeof part === 'string') {
+              textParts.push(part);
+            }
+          }
+
+          if (textParts.length > 0) {
+            text = textParts.join('\n');
+            if (reasoningText && !text) {
+              converted.push({
+                type: role,
+                content: '',
+                reasoning: reasoningText,
+                timestamp: new Date(Date.now() + blobIdx * 1000),
+                blobId: blob.id,
+                sequence: blob.sequence,
+                rowid: blob.rowid,
+              });
+              text = '';
+            }
+          } else {
+            text = '';
+          }
+        } else if (typeof content.content === 'string') {
+          text = content.content;
+        }
+      } else if (content?.message?.role && content?.message?.content) {
+        if (content.message.role === 'system') {
+          continue;
+        }
+
+        role = content.message.role === 'user' ? 'user' : 'assistant';
+        if (Array.isArray(content.message.content)) {
+          text = content.message.content
+            .map((part: any) => (typeof part === 'string' ? part : part?.text || ''))
+            .filter(Boolean)
+            .join('\n');
+        } else if (typeof content.message.content === 'string') {
+          text = content.message.content;
+        }
+      }
+    } catch (error) {
+      console.log('Error parsing blob content:', error);
+    }
+
+    if (text && text.trim()) {
+      const message: ChatMessage = {
+        type: role,
+        content: text,
+        timestamp: new Date(Date.now() + blobIdx * 1000),
+        blobId: blob.id,
+        sequence: blob.sequence,
+        rowid: blob.rowid,
+      };
+      if (reasoningText) {
+        message.reasoning = reasoningText;
+      }
+      converted.push(message);
+    }
+  }
+
+  converted.sort((messageA, messageB) => {
+    if (messageA.sequence !== undefined && messageB.sequence !== undefined) {
+      return Number(messageA.sequence) - Number(messageB.sequence);
+    }
+    if (messageA.rowid !== undefined && messageB.rowid !== undefined) {
+      return Number(messageA.rowid) - Number(messageB.rowid);
+    }
+    return new Date(messageA.timestamp).getTime() - new Date(messageB.timestamp).getTime();
+  });
+
+  return converted;
+};
+
+export const convertSessionMessages = (rawMessages: any[]): ChatMessage[] => {
+  const converted: ChatMessage[] = [];
+  const toolResults = new Map<
+    string,
+    { content: unknown; isError: boolean; timestamp: Date; toolUseResult: unknown; subagentTools?: unknown[] }
+  >();
+
+  rawMessages.forEach((message) => {
+    if (message.message?.role === 'user' && Array.isArray(message.message?.content)) {
+      message.message.content.forEach((part: any) => {
+        if (part.type !== 'tool_result') {
+          return;
+        }
+        toolResults.set(part.tool_use_id, {
+          content: part.content,
+          isError: Boolean(part.is_error),
+          timestamp: new Date(message.timestamp || Date.now()),
+          toolUseResult: message.toolUseResult || null,
+          subagentTools: message.subagentTools,
+        });
+      });
+    }
+  });
+
+  rawMessages.forEach((message) => {
+    if (message.message?.role === 'user' && message.message?.content) {
+      let content = '';
+      if (Array.isArray(message.message.content)) {
+        const textParts: string[] = [];
+        message.message.content.forEach((part: any) => {
+          if (part.type === 'text') {
+            textParts.push(decodeHtmlEntities(part.text));
+          }
+        });
+        content = textParts.join('\n');
+      } else if (typeof message.message.content === 'string') {
+        content = decodeHtmlEntities(message.message.content);
+      } else {
+        content = decodeHtmlEntities(String(message.message.content));
+      }
+
+      const shouldSkip =
+        !content ||
+        content.startsWith('<command-name>') ||
+        content.startsWith('<command-message>') ||
+        content.startsWith('<command-args>') ||
+        content.startsWith('<local-command-stdout>') ||
+        content.startsWith('<system-reminder>') ||
+        content.startsWith('Caveat:') ||
+        content.startsWith('This session is being continued from a previous') ||
+        content.startsWith('[Request interrupted');
+
+      if (!shouldSkip) {
+        // Parse <task-notification> blocks into compact system messages
+        const taskNotifRegex = /<task-notification>\s*<task-id>[^<]*<\/task-id>\s*<output-file>[^<]*<\/output-file>\s*<status>([^<]*)<\/status>\s*<summary>([^<]*)<\/summary>\s*<\/task-notification>/g;
+        const taskNotifMatch = taskNotifRegex.exec(content);
+        if (taskNotifMatch) {
+          const status = taskNotifMatch[1]?.trim() || 'completed';
+          const summary = taskNotifMatch[2]?.trim() || 'Background task finished';
+          converted.push({
+            type: 'assistant',
+            content: summary,
+            timestamp: message.timestamp || new Date().toISOString(),
+            isTaskNotification: true,
+            taskStatus: status,
+          });
+        } else {
+          converted.push({
+            type: 'user',
+            content: unescapeWithMathProtection(content),
+            timestamp: message.timestamp || new Date().toISOString(),
+          });
+        }
+      }
+      return;
+    }
+
+    if (message.type === 'thinking' && message.message?.content) {
+      converted.push({
+        type: 'assistant',
+        content: unescapeWithMathProtection(message.message.content),
+        timestamp: message.timestamp || new Date().toISOString(),
+        isThinking: true,
+      });
+      return;
+    }
+
+    if (message.type === 'tool_use' && message.toolName) {
+      converted.push({
+        type: 'assistant',
+        content: '',
+        timestamp: message.timestamp || new Date().toISOString(),
+        isToolUse: true,
+        toolName: message.toolName,
+        toolInput: normalizeToolInput(message.toolInput),
+        toolCallId: message.toolCallId,
+      });
+      return;
+    }
+
+    if (message.type === 'tool_result') {
+      for (let index = converted.length - 1; index >= 0; index -= 1) {
+        const convertedMessage = converted[index];
+        if (!convertedMessage.isToolUse || convertedMessage.toolResult) {
+          continue;
+        }
+        if (!message.toolCallId || convertedMessage.toolCallId === message.toolCallId) {
+          convertedMessage.toolResult = {
+            content: message.output || '',
+            isError: false,
+          };
+          break;
+        }
+      }
+      return;
+    }
+
+    if (message.message?.role === 'assistant' && message.message?.content) {
+      if (Array.isArray(message.message.content)) {
+        message.message.content.forEach((part: any) => {
+          if (part.type === 'text') {
+            let text = part.text;
+            if (typeof text === 'string') {
+              text = unescapeWithMathProtection(text);
+            }
+            converted.push({
+              type: 'assistant',
+              content: text,
+              timestamp: message.timestamp || new Date().toISOString(),
+            });
+            return;
+          }
+
+          if (part.type === 'tool_use') {
+            const toolResult = toolResults.get(part.id);
+            const isSubagentContainer = part.name === 'Task';
+
+            // Build child tools from server-provided subagentTools data
+            const childTools: import('../types/types').SubagentChildTool[] = [];
+            if (isSubagentContainer && toolResult?.subagentTools && Array.isArray(toolResult.subagentTools)) {
+              for (const tool of toolResult.subagentTools as any[]) {
+                childTools.push({
+                  toolId: tool.toolId,
+                  toolName: tool.toolName,
+                  toolInput: tool.toolInput,
+                  toolResult: tool.toolResult || null,
+                  timestamp: new Date(tool.timestamp || Date.now()),
+                });
+              }
+            }
+
+            converted.push({
+              type: 'assistant',
+              content: '',
+              timestamp: message.timestamp || new Date().toISOString(),
+              isToolUse: true,
+              toolName: part.name,
+              toolInput: normalizeToolInput(part.input),
+              toolId: part.id,
+              toolResult: toolResult
+                ? {
+                    content:
+                      typeof toolResult.content === 'string'
+                        ? toolResult.content
+                        : JSON.stringify(toolResult.content),
+                    isError: toolResult.isError,
+                    toolUseResult: toolResult.toolUseResult,
+                  }
+                : null,
+              toolError: toolResult?.isError || false,
+              toolResultTimestamp: toolResult?.timestamp || new Date(),
+              isSubagentContainer,
+              subagentState: isSubagentContainer
+                ? {
+                    childTools,
+                    currentToolIndex: childTools.length > 0 ? childTools.length - 1 : -1,
+                    isComplete: Boolean(toolResult),
+                  }
+                : undefined,
+            });
+          }
+        });
+        return;
+      }
+
+      if (typeof message.message.content === 'string') {
+        converted.push({
+          type: 'assistant',
+          content: unescapeWithMathProtection(message.message.content),
+          timestamp: message.timestamp || new Date().toISOString(),
+        });
+      }
+    }
+  });
+
+  return converted;
+};
--- a/src/components/chat/view/ChatInterface.tsx
+++ b/src/components/chat/view/ChatInterface.tsx
@@ -0,0 +1,391 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import QuickSettingsPanel from '../../QuickSettingsPanel';
+import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
+import { useTranslation } from 'react-i18next';
+import ChatMessagesPane from './subcomponents/ChatMessagesPane';
+import ChatComposer from './subcomponents/ChatComposer';
+import type { ChatInterfaceProps } from '../types/types';
+import { useChatProviderState } from '../hooks/useChatProviderState';
+import { useChatSessionState } from '../hooks/useChatSessionState';
+import { useChatRealtimeHandlers } from '../hooks/useChatRealtimeHandlers';
+import { useChatComposerState } from '../hooks/useChatComposerState';
+import type { Provider } from '../types/types';
+
+type PendingViewSession = {
+  sessionId: string | null;
+  startedAt: number;
+};
+
+function ChatInterface({
+  selectedProject,
+  selectedSession,
+  ws,
+  sendMessage,
+  latestMessage,
+  onFileOpen,
+  onInputFocusChange,
+  onSessionActive,
+  onSessionInactive,
+  onSessionProcessing,
+  onSessionNotProcessing,
+  processingSessions,
+  onReplaceTemporarySession,
+  onNavigateToSession,
+  onShowSettings,
+  autoExpandTools,
+  showRawParameters,
+  showThinking,
+  autoScrollToBottom,
+  sendByCtrlEnter,
+  externalMessageUpdate,
+  onShowAllTasks,
+}: ChatInterfaceProps) {
+  const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings();
+  const { t } = useTranslation('chat');
+
+  const streamBufferRef = useRef('');
+  const streamTimerRef = useRef<number | null>(null);
+  const pendingViewSessionRef = useRef<PendingViewSession | null>(null);
+
+  const resetStreamingState = useCallback(() => {
+    if (streamTimerRef.current) {
+      clearTimeout(streamTimerRef.current);
+      streamTimerRef.current = null;
+    }
+    streamBufferRef.current = '';
+  }, []);
+
+  const {
+    provider,
+    setProvider,
+    cursorModel,
+    setCursorModel,
+    claudeModel,
+    setClaudeModel,
+    codexModel,
+    setCodexModel,
+    permissionMode,
+    pendingPermissionRequests,
+    setPendingPermissionRequests,
+    cyclePermissionMode,
+  } = useChatProviderState({
+    selectedSession,
+  });
+
+  const {
+    chatMessages,
+    setChatMessages,
+    isLoading,
+    setIsLoading,
+    currentSessionId,
+    setCurrentSessionId,
+    sessionMessages,
+    setSessionMessages,
+    isLoadingSessionMessages,
+    isLoadingMoreMessages,
+    hasMoreMessages,
+    totalMessages,
+    isSystemSessionChange,
+    setIsSystemSessionChange,
+    canAbortSession,
+    setCanAbortSession,
+    isUserScrolledUp,
+    setIsUserScrolledUp,
+    tokenBudget,
+    setTokenBudget,
+    visibleMessageCount,
+    visibleMessages,
+    loadEarlierMessages,
+    loadAllMessages,
+    allMessagesLoaded,
+    isLoadingAllMessages,
+    loadAllJustFinished,
+    showLoadAllOverlay,
+    claudeStatus,
+    setClaudeStatus,
+    createDiff,
+    scrollContainerRef,
+    scrollToBottom,
+    scrollToBottomAndReset,
+    handleScroll,
+  } = useChatSessionState({
+    selectedProject,
+    selectedSession,
+    ws,
+    sendMessage,
+    autoScrollToBottom,
+    externalMessageUpdate,
+    processingSessions,
+    resetStreamingState,
+    pendingViewSessionRef,
+  });
+
+  const {
+    input,
+    setInput,
+    textareaRef,
+    inputHighlightRef,
+    isTextareaExpanded,
+    thinkingMode,
+    setThinkingMode,
+    slashCommandsCount,
+    filteredCommands,
+    frequentCommands,
+    commandQuery,
+    showCommandMenu,
+    selectedCommandIndex,
+    resetCommandMenuState,
+    handleCommandSelect,
+    handleToggleCommandMenu,
+    showFileDropdown,
+    filteredFiles,
+    selectedFileIndex,
+    renderInputWithMentions,
+    selectFile,
+    attachedImages,
+    setAttachedImages,
+    uploadingImages,
+    imageErrors,
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    openImagePicker,
+    handleSubmit,
+    handleInputChange,
+    handleKeyDown,
+    handlePaste,
+    handleTextareaClick,
+    handleTextareaInput,
+    syncInputOverlayScroll,
+    handleClearInput,
+    handleAbortSession,
+    handleTranscript,
+    handlePermissionDecision,
+    handleGrantToolPermission,
+    handleInputFocusChange,
+    isInputFocused,
+  } = useChatComposerState({
+    selectedProject,
+    selectedSession,
+    currentSessionId,
+    provider,
+    permissionMode,
+    cyclePermissionMode,
+    cursorModel,
+    claudeModel,
+    codexModel,
+    isLoading,
+    canAbortSession,
+    tokenBudget,
+    sendMessage,
+    sendByCtrlEnter,
+    onSessionActive,
+    onSessionProcessing,
+    onInputFocusChange,
+    onFileOpen,
+    onShowSettings,
+    pendingViewSessionRef,
+    scrollToBottom,
+    setChatMessages,
+    setSessionMessages,
+    setIsLoading,
+    setCanAbortSession,
+    setClaudeStatus,
+    setIsUserScrolledUp,
+    setPendingPermissionRequests,
+  });
+
+  useChatRealtimeHandlers({
+    latestMessage,
+    provider,
+    selectedProject,
+    selectedSession,
+    currentSessionId,
+    setCurrentSessionId,
+    setChatMessages,
+    setIsLoading,
+    setCanAbortSession,
+    setClaudeStatus,
+    setTokenBudget,
+    setIsSystemSessionChange,
+    setPendingPermissionRequests,
+    pendingViewSessionRef,
+    streamBufferRef,
+    streamTimerRef,
+    onSessionInactive,
+    onSessionProcessing,
+    onSessionNotProcessing,
+    onReplaceTemporarySession,
+    onNavigateToSession,
+  });
+
+  useEffect(() => {
+    if (!isLoading || !canAbortSession) {
+      return;
+    }
+
+    const handleGlobalEscape = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape' || event.repeat || event.defaultPrevented) {
+        return;
+      }
+
+      event.preventDefault();
+      handleAbortSession();
+    };
+
+    document.addEventListener('keydown', handleGlobalEscape, { capture: true });
+    return () => {
+      document.removeEventListener('keydown', handleGlobalEscape, { capture: true });
+    };
+  }, [canAbortSession, handleAbortSession, isLoading]);
+
+  useEffect(() => {
+    return () => {
+      resetStreamingState();
+    };
+  }, [resetStreamingState]);
+
+  if (!selectedProject) {
+    const selectedProviderLabel =
+      provider === 'cursor'
+        ? t('messageTypes.cursor')
+        : provider === 'codex'
+          ? t('messageTypes.codex')
+          : t('messageTypes.claude');
+
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center text-muted-foreground">
+          <p className="text-sm">
+            {t('projectSelection.startChatWithProvider', {
+              provider: selectedProviderLabel,
+              defaultValue: 'Select a project to start chatting with {{provider}}',
+            })}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="h-full flex flex-col">
+        <ChatMessagesPane
+          scrollContainerRef={scrollContainerRef}
+          onWheel={handleScroll}
+          onTouchMove={handleScroll}
+          isLoadingSessionMessages={isLoadingSessionMessages}
+          chatMessages={chatMessages}
+          selectedSession={selectedSession}
+          currentSessionId={currentSessionId}
+          provider={provider}
+          setProvider={(nextProvider) => setProvider(nextProvider as Provider)}
+          textareaRef={textareaRef}
+          claudeModel={claudeModel}
+          setClaudeModel={setClaudeModel}
+          cursorModel={cursorModel}
+          setCursorModel={setCursorModel}
+          codexModel={codexModel}
+          setCodexModel={setCodexModel}
+          tasksEnabled={tasksEnabled}
+          isTaskMasterInstalled={isTaskMasterInstalled}
+          onShowAllTasks={onShowAllTasks}
+          setInput={setInput}
+          isLoadingMoreMessages={isLoadingMoreMessages}
+          hasMoreMessages={hasMoreMessages}
+          totalMessages={totalMessages}
+          sessionMessagesCount={sessionMessages.length}
+          visibleMessageCount={visibleMessageCount}
+          visibleMessages={visibleMessages}
+          loadEarlierMessages={loadEarlierMessages}
+          loadAllMessages={loadAllMessages}
+          allMessagesLoaded={allMessagesLoaded}
+          isLoadingAllMessages={isLoadingAllMessages}
+          loadAllJustFinished={loadAllJustFinished}
+          showLoadAllOverlay={showLoadAllOverlay}
+          createDiff={createDiff}
+          onFileOpen={onFileOpen}
+          onShowSettings={onShowSettings}
+          onGrantToolPermission={handleGrantToolPermission}
+          autoExpandTools={autoExpandTools}
+          showRawParameters={showRawParameters}
+          showThinking={showThinking}
+          selectedProject={selectedProject}
+          isLoading={isLoading}
+        />
+
+        <ChatComposer
+          pendingPermissionRequests={pendingPermissionRequests}
+          handlePermissionDecision={handlePermissionDecision}
+          handleGrantToolPermission={handleGrantToolPermission}
+          claudeStatus={claudeStatus}
+          isLoading={isLoading}
+          onAbortSession={handleAbortSession}
+          provider={provider}
+          permissionMode={permissionMode}
+          onModeSwitch={cyclePermissionMode}
+          thinkingMode={thinkingMode}
+          setThinkingMode={setThinkingMode}
+          tokenBudget={tokenBudget}
+          slashCommandsCount={slashCommandsCount}
+          onToggleCommandMenu={handleToggleCommandMenu}
+          hasInput={Boolean(input.trim())}
+          onClearInput={handleClearInput}
+          isUserScrolledUp={isUserScrolledUp}
+          hasMessages={chatMessages.length > 0}
+          onScrollToBottom={scrollToBottomAndReset}
+          onSubmit={handleSubmit}
+          isDragActive={isDragActive}
+          attachedImages={attachedImages}
+          onRemoveImage={(index) =>
+            setAttachedImages((previous) =>
+              previous.filter((_, currentIndex) => currentIndex !== index),
+            )
+          }
+          uploadingImages={uploadingImages}
+          imageErrors={imageErrors}
+          showFileDropdown={showFileDropdown}
+          filteredFiles={filteredFiles}
+          selectedFileIndex={selectedFileIndex}
+          onSelectFile={selectFile}
+          filteredCommands={filteredCommands}
+          selectedCommandIndex={selectedCommandIndex}
+          onCommandSelect={handleCommandSelect}
+          onCloseCommandMenu={resetCommandMenuState}
+          isCommandMenuOpen={showCommandMenu}
+          frequentCommands={commandQuery ? [] : frequentCommands}
+          getRootProps={getRootProps as (...args: unknown[]) => Record<string, unknown>}
+          getInputProps={getInputProps as (...args: unknown[]) => Record<string, unknown>}
+          openImagePicker={openImagePicker}
+          inputHighlightRef={inputHighlightRef}
+          renderInputWithMentions={renderInputWithMentions}
+          textareaRef={textareaRef}
+          input={input}
+          onInputChange={handleInputChange}
+          onTextareaClick={handleTextareaClick}
+          onTextareaKeyDown={handleKeyDown}
+          onTextareaPaste={handlePaste}
+          onTextareaScrollSync={syncInputOverlayScroll}
+          onTextareaInput={handleTextareaInput}
+          onInputFocusChange={handleInputFocusChange}
+          isInputFocused={isInputFocused}
+          placeholder={t('input.placeholder', {
+            provider:
+              provider === 'cursor'
+                ? t('messageTypes.cursor')
+                : provider === 'codex'
+                ? t('messageTypes.codex')
+                : t('messageTypes.claude'),
+          })}
+          isTextareaExpanded={isTextareaExpanded}
+          sendByCtrlEnter={sendByCtrlEnter}
+          onTranscript={handleTranscript}
+        />
+      </div>
+
+      <QuickSettingsPanel />
+    </>
+  );
+}
+
+export default React.memo(ChatInterface);
--- a/src/components/chat/view/subcomponents/AssistantThinkingIndicator.tsx
+++ b/src/components/chat/view/subcomponents/AssistantThinkingIndicator.tsx
@@ -0,0 +1,37 @@
+import { SessionProvider } from '../../../../types/app';
+import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
+import type { Provider } from '../../types/types';
+
+type AssistantThinkingIndicatorProps = {
+  selectedProvider: SessionProvider;
+}
+
+
+export default function AssistantThinkingIndicator({ selectedProvider }: AssistantThinkingIndicatorProps) {
+  return (
+    <div className="chat-message assistant">
+      <div className="w-full">
+        <div className="flex items-center space-x-3 mb-2">
+          <div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm flex-shrink-0 p-1 bg-transparent">
+            <SessionProviderLogo provider={selectedProvider} className="w-full h-full" />
+          </div>
+          <div className="text-sm font-medium text-gray-900 dark:text-white">
+            {selectedProvider === 'cursor' ? 'Cursor' : selectedProvider === 'codex' ? 'Codex' : 'Claude'}
+          </div>
+        </div>
+        <div className="w-full text-sm text-gray-500 dark:text-gray-400 pl-3 sm:pl-0">
+          <div className="flex items-center space-x-1">
+            <div className="animate-pulse">.</div>
+            <div className="animate-pulse" style={{ animationDelay: '0.2s' }}>
+              .
+            </div>
+            <div className="animate-pulse" style={{ animationDelay: '0.4s' }}>
+              .
+            </div>
+            <span className="ml-2">Thinking...</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/chat/view/subcomponents/ChatComposer.tsx
+++ b/src/components/chat/view/subcomponents/ChatComposer.tsx
@@ -0,0 +1,359 @@
+import CommandMenu from './CommandMenu';
+import ClaudeStatus from './ClaudeStatus';
+import MicButton from '../../../mic-button/view/MicButton';
+import ImageAttachment from './ImageAttachment';
+import PermissionRequestsBanner from './PermissionRequestsBanner';
+import ChatInputControls from './ChatInputControls';
+import { useTranslation } from 'react-i18next';
+import type {
+  ChangeEvent,
+  ClipboardEvent,
+  Dispatch,
+  FormEvent,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+  RefObject,
+  SetStateAction,
+  TouchEvent,
+} from 'react';
+import type { PendingPermissionRequest, PermissionMode, Provider } from '../../types/types';
+
+interface MentionableFile {
+  name: string;
+  path: string;
+}
+
+interface SlashCommand {
+  name: string;
+  description?: string;
+  namespace?: string;
+  path?: string;
+  type?: string;
+  metadata?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+interface ChatComposerProps {
+  pendingPermissionRequests: PendingPermissionRequest[];
+  handlePermissionDecision: (
+    requestIds: string | string[],
+    decision: { allow?: boolean; message?: string; rememberEntry?: string | null; updatedInput?: unknown },
+  ) => void;
+  handleGrantToolPermission: (suggestion: { entry: string; toolName: string }) => { success: boolean };
+  claudeStatus: { text: string; tokens: number; can_interrupt: boolean } | null;
+  isLoading: boolean;
+  onAbortSession: () => void;
+  provider: Provider | string;
+  permissionMode: PermissionMode | string;
+  onModeSwitch: () => void;
+  thinkingMode: string;
+  setThinkingMode: Dispatch<SetStateAction<string>>;
+  tokenBudget: { used?: number; total?: number } | null;
+  slashCommandsCount: number;
+  onToggleCommandMenu: () => void;
+  hasInput: boolean;
+  onClearInput: () => void;
+  isUserScrolledUp: boolean;
+  hasMessages: boolean;
+  onScrollToBottom: () => void;
+  onSubmit: (event: FormEvent<HTMLFormElement> | MouseEvent<HTMLButtonElement> | TouchEvent<HTMLButtonElement>) => void;
+  isDragActive: boolean;
+  attachedImages: File[];
+  onRemoveImage: (index: number) => void;
+  uploadingImages: Map<string, number>;
+  imageErrors: Map<string, string>;
+  showFileDropdown: boolean;
+  filteredFiles: MentionableFile[];
+  selectedFileIndex: number;
+  onSelectFile: (file: MentionableFile) => void;
+  filteredCommands: SlashCommand[];
+  selectedCommandIndex: number;
+  onCommandSelect: (command: SlashCommand, index: number, isHover: boolean) => void;
+  onCloseCommandMenu: () => void;
+  isCommandMenuOpen: boolean;
+  frequentCommands: SlashCommand[];
+  getRootProps: (...args: unknown[]) => Record<string, unknown>;
+  getInputProps: (...args: unknown[]) => Record<string, unknown>;
+  openImagePicker: () => void;
+  inputHighlightRef: RefObject<HTMLDivElement>;
+  renderInputWithMentions: (text: string) => ReactNode;
+  textareaRef: RefObject<HTMLTextAreaElement>;
+  input: string;
+  onInputChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+  onTextareaClick: (event: MouseEvent<HTMLTextAreaElement>) => void;
+  onTextareaKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+  onTextareaPaste: (event: ClipboardEvent<HTMLTextAreaElement>) => void;
+  onTextareaScrollSync: (target: HTMLTextAreaElement) => void;
+  onTextareaInput: (event: FormEvent<HTMLTextAreaElement>) => void;
+  onInputFocusChange?: (focused: boolean) => void;
+  isInputFocused?: boolean;
+  placeholder: string;
+  isTextareaExpanded: boolean;
+  sendByCtrlEnter?: boolean;
+  onTranscript: (text: string) => void;
+}
+
+export default function ChatComposer({
+  pendingPermissionRequests,
+  handlePermissionDecision,
+  handleGrantToolPermission,
+  claudeStatus,
+  isLoading,
+  onAbortSession,
+  provider,
+  permissionMode,
+  onModeSwitch,
+  thinkingMode,
+  setThinkingMode,
+  tokenBudget,
+  slashCommandsCount,
+  onToggleCommandMenu,
+  hasInput,
+  onClearInput,
+  isUserScrolledUp,
+  hasMessages,
+  onScrollToBottom,
+  onSubmit,
+  isDragActive,
+  attachedImages,
+  onRemoveImage,
+  uploadingImages,
+  imageErrors,
+  showFileDropdown,
+  filteredFiles,
+  selectedFileIndex,
+  onSelectFile,
+  filteredCommands,
+  selectedCommandIndex,
+  onCommandSelect,
+  onCloseCommandMenu,
+  isCommandMenuOpen,
+  frequentCommands,
+  getRootProps,
+  getInputProps,
+  openImagePicker,
+  inputHighlightRef,
+  renderInputWithMentions,
+  textareaRef,
+  input,
+  onInputChange,
+  onTextareaClick,
+  onTextareaKeyDown,
+  onTextareaPaste,
+  onTextareaScrollSync,
+  onTextareaInput,
+  onInputFocusChange,
+  isInputFocused,
+  placeholder,
+  isTextareaExpanded,
+  sendByCtrlEnter,
+  onTranscript,
+}: ChatComposerProps) {
+  const { t } = useTranslation('chat');
+  const textareaRect = textareaRef.current?.getBoundingClientRect();
+  const commandMenuPosition = {
+    top: textareaRect ? Math.max(16, textareaRect.top - 316) : 0,
+    left: textareaRect ? textareaRect.left : 16,
+    bottom: textareaRect ? window.innerHeight - textareaRect.top + 8 : 90,
+  };
+
+  // Detect if the AskUserQuestion interactive panel is active
+  const hasQuestionPanel = pendingPermissionRequests.some(
+    (r) => r.toolName === 'AskUserQuestion'
+  );
+
+  // On mobile, when input is focused, float the input box at the bottom
+  const mobileFloatingClass = isInputFocused
+    ? 'max-sm:fixed max-sm:bottom-0 max-sm:left-0 max-sm:right-0 max-sm:z-50 max-sm:bg-background max-sm:shadow-[0_-4px_20px_rgba(0,0,0,0.15)]'
+    : '';
+
+  return (
+    <div className={`p-2 sm:p-4 md:p-4 flex-shrink-0 pb-2 sm:pb-4 md:pb-6 ${mobileFloatingClass}`}>
+      {!hasQuestionPanel && (
+        <div className="flex-1">
+          <ClaudeStatus
+            status={claudeStatus}
+            isLoading={isLoading}
+            onAbort={onAbortSession}
+            provider={provider}
+          />
+        </div>
+      )}
+
+      <div className="max-w-4xl mx-auto mb-3">
+        <PermissionRequestsBanner
+          pendingPermissionRequests={pendingPermissionRequests}
+          handlePermissionDecision={handlePermissionDecision}
+          handleGrantToolPermission={handleGrantToolPermission}
+        />
+
+        {!hasQuestionPanel && <ChatInputControls
+          permissionMode={permissionMode}
+          onModeSwitch={onModeSwitch}
+          provider={provider}
+          thinkingMode={thinkingMode}
+          setThinkingMode={setThinkingMode}
+          tokenBudget={tokenBudget}
+          slashCommandsCount={slashCommandsCount}
+          onToggleCommandMenu={onToggleCommandMenu}
+          hasInput={hasInput}
+          onClearInput={onClearInput}
+          isUserScrolledUp={isUserScrolledUp}
+          hasMessages={hasMessages}
+          onScrollToBottom={onScrollToBottom}
+        />}
+      </div>
+
+      {!hasQuestionPanel && <form onSubmit={onSubmit as (event: FormEvent<HTMLFormElement>) => void} className="relative max-w-4xl mx-auto">
+        {isDragActive && (
+          <div className="absolute inset-0 bg-primary/15 border-2 border-dashed border-primary/50 rounded-2xl flex items-center justify-center z-50">
+            <div className="bg-card rounded-xl p-4 shadow-lg border border-border/30">
+              <svg className="w-8 h-8 text-primary mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                />
+              </svg>
+              <p className="text-sm font-medium">Drop images here</p>
+            </div>
+          </div>
+        )}
+
+        {attachedImages.length > 0 && (
+          <div className="mb-2 p-2 bg-muted/40 rounded-xl">
+            <div className="flex flex-wrap gap-2">
+              {attachedImages.map((file, index) => (
+                <ImageAttachment
+                  key={index}
+                  file={file}
+                  onRemove={() => onRemoveImage(index)}
+                  uploadProgress={uploadingImages.get(file.name)}
+                  error={imageErrors.get(file.name)}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {showFileDropdown && filteredFiles.length > 0 && (
+          <div className="absolute bottom-full left-0 right-0 mb-2 bg-card/95 backdrop-blur-md border border-border/50 rounded-xl shadow-lg max-h-48 overflow-y-auto z-50">
+            {filteredFiles.map((file, index) => (
+              <div
+                key={file.path}
+                className={`px-4 py-3 cursor-pointer border-b border-border/30 last:border-b-0 touch-manipulation ${
+                  index === selectedFileIndex
+                    ? 'bg-primary/8 text-primary'
+                    : 'hover:bg-accent/50 text-foreground'
+                }`}
+                onMouseDown={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                }}
+                onClick={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  onSelectFile(file);
+                }}
+              >
+                <div className="font-medium text-sm">{file.name}</div>
+                <div className="text-xs text-muted-foreground font-mono">{file.path}</div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <CommandMenu
+          commands={filteredCommands}
+          selectedIndex={selectedCommandIndex}
+          onSelect={onCommandSelect}
+          onClose={onCloseCommandMenu}
+          position={commandMenuPosition}
+          isOpen={isCommandMenuOpen}
+          frequentCommands={frequentCommands}
+        />
+
+        <div
+          {...getRootProps()}
+          className={`relative bg-card/80 backdrop-blur-sm rounded-2xl shadow-sm border border-border/50 focus-within:shadow-md focus-within:border-primary/30 focus-within:ring-1 focus-within:ring-primary/15 transition-all duration-200 overflow-hidden ${
+            isTextareaExpanded ? 'chat-input-expanded' : ''
+          }`}
+        >
+          <input {...getInputProps()} />
+          <div ref={inputHighlightRef} aria-hidden="true" className="absolute inset-0 pointer-events-none overflow-hidden rounded-2xl">
+            <div className="chat-input-placeholder block w-full pl-12 pr-20 sm:pr-40 py-1.5 sm:py-4 text-transparent text-base leading-6 whitespace-pre-wrap break-words">
+              {renderInputWithMentions(input)}
+            </div>
+          </div>
+
+          <div className="relative z-10">
+            <textarea
+              ref={textareaRef}
+              value={input}
+              onChange={onInputChange}
+              onClick={onTextareaClick}
+              onKeyDown={onTextareaKeyDown}
+              onPaste={onTextareaPaste}
+              onScroll={(event) => onTextareaScrollSync(event.target as HTMLTextAreaElement)}
+              onFocus={() => onInputFocusChange?.(true)}
+              onBlur={() => onInputFocusChange?.(false)}
+              onInput={onTextareaInput}
+              placeholder={placeholder}
+              disabled={isLoading}
+              className="chat-input-placeholder block w-full pl-12 pr-20 sm:pr-40 py-1.5 sm:py-4 bg-transparent rounded-2xl focus:outline-none text-foreground placeholder-muted-foreground/50 disabled:opacity-50 resize-none min-h-[50px] sm:min-h-[80px] max-h-[40vh] sm:max-h-[300px] overflow-y-auto text-base leading-6 transition-all duration-200"
+              style={{ height: '50px' }}
+            />
+
+            <button
+              type="button"
+              onClick={openImagePicker}
+              className="absolute left-2 top-1/2 transform -translate-y-1/2 p-2 hover:bg-accent/60 rounded-xl transition-colors"
+              title={t('input.attachImages')}
+            >
+              <svg className="w-5 h-5 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+            </button>
+
+            <div className="absolute right-16 sm:right-16 top-1/2 transform -translate-y-1/2" style={{ display: 'none' }}>
+              <MicButton onTranscript={onTranscript} className="w-10 h-10 sm:w-10 sm:h-10" />
+            </div>
+
+            <button
+              type="submit"
+              disabled={!input.trim() || isLoading}
+              onMouseDown={(event) => {
+                event.preventDefault();
+                onSubmit(event);
+              }}
+              onTouchStart={(event) => {
+                event.preventDefault();
+                onSubmit(event);
+              }}
+              className="absolute right-2 top-1/2 transform -translate-y-1/2 w-10 h-10 sm:w-11 sm:h-11 bg-primary hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed rounded-xl flex items-center justify-center transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-1 focus:ring-offset-background"
+            >
+              <svg className="w-4 h-4 sm:w-[18px] sm:h-[18px] text-primary-foreground transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+              </svg>
+            </button>
+
+            <div
+              className={`absolute bottom-1 left-12 right-14 sm:right-40 text-xs text-muted-foreground/50 pointer-events-none hidden sm:block transition-opacity duration-200 ${
+                input.trim() ? 'opacity-0' : 'opacity-100'
+              }`}
+            >
+              {sendByCtrlEnter ? t('input.hintText.ctrlEnter') : t('input.hintText.enter')}
+            </div>
+          </div>
+        </div>
+      </form>}
+    </div>
+  );
+}
--- a/src/components/chat/view/subcomponents/ChatInputControls.tsx
+++ b/src/components/chat/view/subcomponents/ChatInputControls.tsx
@@ -0,0 +1,137 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import ThinkingModeSelector from './ThinkingModeSelector';
+import TokenUsagePie from './TokenUsagePie';
+import type { PermissionMode, Provider } from '../../types/types';
+
+interface ChatInputControlsProps {
+  permissionMode: PermissionMode | string;
+  onModeSwitch: () => void;
+  provider: Provider | string;
+  thinkingMode: string;
+  setThinkingMode: React.Dispatch<React.SetStateAction<string>>;
+  tokenBudget: { used?: number; total?: number } | null;
+  slashCommandsCount: number;
+  onToggleCommandMenu: () => void;
+  hasInput: boolean;
+  onClearInput: () => void;
+  isUserScrolledUp: boolean;
+  hasMessages: boolean;
+  onScrollToBottom: () => void;
+}
+
+export default function ChatInputControls({
+  permissionMode,
+  onModeSwitch,
+  provider,
+  thinkingMode,
+  setThinkingMode,
+  tokenBudget,
+  slashCommandsCount,
+  onToggleCommandMenu,
+  hasInput,
+  onClearInput,
+  isUserScrolledUp,
+  hasMessages,
+  onScrollToBottom,
+}: ChatInputControlsProps) {
+  const { t } = useTranslation('chat');
+
+  return (
+    <div className="flex items-center justify-center gap-2 sm:gap-3 flex-wrap">
+      <button
+        type="button"
+        onClick={onModeSwitch}
+        className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-lg text-sm font-medium border transition-all duration-200 ${
+          permissionMode === 'default'
+            ? 'bg-muted/50 text-muted-foreground border-border/60 hover:bg-muted'
+            : permissionMode === 'acceptEdits'
+              ? 'bg-green-50 dark:bg-green-900/15 text-green-700 dark:text-green-300 border-green-300/60 dark:border-green-600/40 hover:bg-green-100 dark:hover:bg-green-900/25'
+              : permissionMode === 'bypassPermissions'
+                ? 'bg-orange-50 dark:bg-orange-900/15 text-orange-700 dark:text-orange-300 border-orange-300/60 dark:border-orange-600/40 hover:bg-orange-100 dark:hover:bg-orange-900/25'
+                : 'bg-primary/5 text-primary border-primary/20 hover:bg-primary/10'
+        }`}
+        title={t('input.clickToChangeMode')}
+      >
+        <div className="flex items-center gap-1.5">
+          <div
+            className={`w-1.5 h-1.5 rounded-full ${
+              permissionMode === 'default'
+                ? 'bg-muted-foreground'
+                : permissionMode === 'acceptEdits'
+                  ? 'bg-green-500'
+                  : permissionMode === 'bypassPermissions'
+                    ? 'bg-orange-500'
+                    : 'bg-primary'
+            }`}
+          />
+          <span>
+            {permissionMode === 'default' && t('codex.modes.default')}
+            {permissionMode === 'acceptEdits' && t('codex.modes.acceptEdits')}
+            {permissionMode === 'bypassPermissions' && t('codex.modes.bypassPermissions')}
+            {permissionMode === 'plan' && t('codex.modes.plan')}
+          </span>
+        </div>
+      </button>
+
+      {provider === 'claude' && (
+        <ThinkingModeSelector selectedMode={thinkingMode} onModeChange={setThinkingMode} onClose={() => {}} className="" />
+      )}
+
+      <TokenUsagePie used={tokenBudget?.used || 0} total={tokenBudget?.total || parseInt(import.meta.env.VITE_CONTEXT_WINDOW) || 160000} />
+
+      <button
+        type="button"
+        onClick={onToggleCommandMenu}
+        className="relative w-7 h-7 sm:w-8 sm:h-8 text-muted-foreground hover:text-foreground rounded-lg flex items-center justify-center transition-colors hover:bg-accent/60"
+        title={t('input.showAllCommands')}
+      >
+        <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
+          />
+        </svg>
+        {slashCommandsCount > 0 && (
+          <span
+            className="absolute -top-1 -right-1 bg-primary text-primary-foreground text-[10px] font-bold rounded-full w-4 h-4 sm:w-5 sm:h-5 flex items-center justify-center"
+          >
+            {slashCommandsCount}
+          </span>
+        )}
+      </button>
+
+      {hasInput && (
+        <button
+          type="button"
+          onClick={onClearInput}
+          className="w-7 h-7 sm:w-8 sm:h-8 bg-card hover:bg-accent/60 border border-border/50 rounded-lg flex items-center justify-center transition-all duration-200 group shadow-sm"
+          title={t('input.clearInput', { defaultValue: 'Clear input' })}
+        >
+          <svg
+            className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-muted-foreground group-hover:text-foreground transition-colors"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      )}
+
+      {isUserScrolledUp && hasMessages && (
+        <button
+          onClick={onScrollToBottom}
+          className="w-7 h-7 sm:w-8 sm:h-8 bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg shadow-sm flex items-center justify-center transition-all duration-200 hover:scale-105"
+          title={t('input.scrollToBottom', { defaultValue: 'Scroll to bottom' })}
+        >
+          <svg className="w-3.5 h-3.5 sm:w-4 sm:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}
--- a/src/components/chat/view/subcomponents/ChatMessagesPane.tsx
+++ b/src/components/chat/view/subcomponents/ChatMessagesPane.tsx
@@ -0,0 +1,265 @@
+import { useTranslation } from 'react-i18next';
+import { useCallback, useRef } from 'react';
+import type { Dispatch, RefObject, SetStateAction } from 'react';
+
+import MessageComponent from './MessageComponent';
+import ProviderSelectionEmptyState from './ProviderSelectionEmptyState';
+import type { ChatMessage } from '../../types/types';
+import type { Project, ProjectSession, SessionProvider } from '../../../../types/app';
+import AssistantThinkingIndicator from './AssistantThinkingIndicator';
+import { getIntrinsicMessageKey } from '../../utils/messageKeys';
+
+interface ChatMessagesPaneProps {
+  scrollContainerRef: RefObject<HTMLDivElement>;
+  onWheel: () => void;
+  onTouchMove: () => void;
+  isLoadingSessionMessages: boolean;
+  chatMessages: ChatMessage[];
+  selectedSession: ProjectSession | null;
+  currentSessionId: string | null;
+  provider: SessionProvider;
+  setProvider: (provider: SessionProvider) => void;
+  textareaRef: RefObject<HTMLTextAreaElement>;
+  claudeModel: string;
+  setClaudeModel: (model: string) => void;
+  cursorModel: string;
+  setCursorModel: (model: string) => void;
+  codexModel: string;
+  setCodexModel: (model: string) => void;
+  tasksEnabled: boolean;
+  isTaskMasterInstalled: boolean | null;
+  onShowAllTasks?: (() => void) | null;
+  setInput: Dispatch<SetStateAction<string>>;
+  isLoadingMoreMessages: boolean;
+  hasMoreMessages: boolean;
+  totalMessages: number;
+  sessionMessagesCount: number;
+  visibleMessageCount: number;
+  visibleMessages: ChatMessage[];
+  loadEarlierMessages: () => void;
+  loadAllMessages: () => void;
+  allMessagesLoaded: boolean;
+  isLoadingAllMessages: boolean;
+  loadAllJustFinished: boolean;
+  showLoadAllOverlay: boolean;
+  createDiff: any;
+  onFileOpen?: (filePath: string, diffInfo?: unknown) => void;
+  onShowSettings?: () => void;
+  onGrantToolPermission: (suggestion: { entry: string; toolName: string }) => { success: boolean };
+  autoExpandTools?: boolean;
+  showRawParameters?: boolean;
+  showThinking?: boolean;
+  selectedProject: Project;
+  isLoading: boolean;
+}
+
+export default function ChatMessagesPane({
+  scrollContainerRef,
+  onWheel,
+  onTouchMove,
+  isLoadingSessionMessages,
+  chatMessages,
+  selectedSession,
+  currentSessionId,
+  provider,
+  setProvider,
+  textareaRef,
+  claudeModel,
+  setClaudeModel,
+  cursorModel,
+  setCursorModel,
+  codexModel,
+  setCodexModel,
+  tasksEnabled,
+  isTaskMasterInstalled,
+  onShowAllTasks,
+  setInput,
+  isLoadingMoreMessages,
+  hasMoreMessages,
+  totalMessages,
+  sessionMessagesCount,
+  visibleMessageCount,
+  visibleMessages,
+  loadEarlierMessages,
+  loadAllMessages,
+  allMessagesLoaded,
+  isLoadingAllMessages,
+  loadAllJustFinished,
+  showLoadAllOverlay,
+  createDiff,
+  onFileOpen,
+  onShowSettings,
+  onGrantToolPermission,
+  autoExpandTools,
+  showRawParameters,
+  showThinking,
+  selectedProject,
+  isLoading,
+}: ChatMessagesPaneProps) {
+  const { t } = useTranslation('chat');
+  const messageKeyMapRef = useRef<WeakMap<ChatMessage, string>>(new WeakMap());
+  const allocatedKeysRef = useRef<Set<string>>(new Set());
+  const generatedMessageKeyCounterRef = useRef(0);
+
+  // Keep keys stable across prepends so existing MessageComponent instances retain local state.
+  const getMessageKey = useCallback((message: ChatMessage) => {
+    const existingKey = messageKeyMapRef.current.get(message);
+    if (existingKey) {
+      return existingKey;
+    }
+
+    const intrinsicKey = getIntrinsicMessageKey(message);
+    let candidateKey = intrinsicKey;
+
+    if (!candidateKey || allocatedKeysRef.current.has(candidateKey)) {
+      do {
+        generatedMessageKeyCounterRef.current += 1;
+        candidateKey = intrinsicKey
+          ? `${intrinsicKey}-${generatedMessageKeyCounterRef.current}`
+          : `message-generated-${generatedMessageKeyCounterRef.current}`;
+      } while (allocatedKeysRef.current.has(candidateKey));
+    }
+
+    allocatedKeysRef.current.add(candidateKey);
+    messageKeyMapRef.current.set(message, candidateKey);
+    return candidateKey;
+  }, []);
+
+  return (
+    <div
+      ref={scrollContainerRef}
+      onWheel={onWheel}
+      onTouchMove={onTouchMove}
+      className="flex-1 overflow-y-auto overflow-x-hidden px-0 py-3 sm:p-4 space-y-3 sm:space-y-4 relative"
+    >
+      {isLoadingSessionMessages && chatMessages.length === 0 ? (
+        <div className="text-center text-gray-500 dark:text-gray-400 mt-8">
+          <div className="flex items-center justify-center space-x-2">
+            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400" />
+            <p>{t('session.loading.sessionMessages')}</p>
+          </div>
+        </div>
+      ) : chatMessages.length === 0 ? (
+        <ProviderSelectionEmptyState
+          selectedSession={selectedSession}
+          currentSessionId={currentSessionId}
+          provider={provider}
+          setProvider={setProvider}
+          textareaRef={textareaRef}
+          claudeModel={claudeModel}
+          setClaudeModel={setClaudeModel}
+          cursorModel={cursorModel}
+          setCursorModel={setCursorModel}
+          codexModel={codexModel}
+          setCodexModel={setCodexModel}
+          tasksEnabled={tasksEnabled}
+          isTaskMasterInstalled={isTaskMasterInstalled}
+          onShowAllTasks={onShowAllTasks}
+          setInput={setInput}
+        />
+      ) : (
+        <>
+          {/* Loading indicator for older messages (hide when load-all is active) */}
+          {isLoadingMoreMessages && !isLoadingAllMessages && !allMessagesLoaded && (
+            <div className="text-center text-gray-500 dark:text-gray-400 py-3">
+              <div className="flex items-center justify-center space-x-2">
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400" />
+                <p className="text-sm">{t('session.loading.olderMessages')}</p>
+              </div>
+            </div>
+          )}
+
+          {/* Indicator showing there are more messages to load (hide when all loaded) */}
+          {hasMoreMessages && !isLoadingMoreMessages && !allMessagesLoaded && (
+            <div className="text-center text-gray-500 dark:text-gray-400 text-sm py-2 border-b border-gray-200 dark:border-gray-700">
+              {totalMessages > 0 && (
+                <span>
+                  {t('session.messages.showingOf', { shown: sessionMessagesCount, total: totalMessages })}{' '}
+                  <span className="text-xs">{t('session.messages.scrollToLoad')}</span>
+                </span>
+              )}
+            </div>
+          )}
+
+          {/* Floating "Load all messages" overlay */}
+          {(showLoadAllOverlay || isLoadingAllMessages || loadAllJustFinished) && (
+            <div className="sticky top-2 z-20 flex justify-center pointer-events-none">
+              {loadAllJustFinished ? (
+                <div className="px-4 py-1.5 text-xs font-medium text-white bg-green-600 dark:bg-green-500 rounded-full shadow-lg flex items-center space-x-2">
+                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                  </svg>
+                  <span>{t('session.messages.allLoaded')}</span>
+                </div>
+              ) : (
+                <button
+                  className="pointer-events-auto px-4 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded-full shadow-lg transition-all duration-200 hover:scale-105 disabled:opacity-75 disabled:cursor-wait flex items-center space-x-2"
+                  onClick={loadAllMessages}
+                  disabled={isLoadingAllMessages}
+                >
+                  {isLoadingAllMessages && (
+                    <div className="animate-spin rounded-full h-3 w-3 border-2 border-white/30 border-t-white" />
+                  )}
+                  <span>
+                    {isLoadingAllMessages
+                      ? t('session.messages.loadingAll')
+                      : <>{t('session.messages.loadAll')} {totalMessages > 0 && `(${totalMessages})`}</>
+                    }
+                  </span>
+                </button>
+              )}
+            </div>
+          )}
+
+          {/* Performance warning when all messages are loaded */}
+          {allMessagesLoaded && (
+            <div className="text-center text-amber-600 dark:text-amber-400 text-xs py-1.5 bg-amber-50 dark:bg-amber-900/20 border-b border-amber-200 dark:border-amber-800">
+              {t('session.messages.perfWarning')}
+            </div>
+          )}
+
+          {/* Legacy message count indicator (for non-paginated view) */}
+          {!hasMoreMessages && chatMessages.length > visibleMessageCount && (
+            <div className="text-center text-gray-500 dark:text-gray-400 text-sm py-2 border-b border-gray-200 dark:border-gray-700">
+              {t('session.messages.showingLast', { count: visibleMessageCount, total: chatMessages.length })} |
+              <button className="ml-1 text-blue-600 hover:text-blue-700 underline" onClick={loadEarlierMessages}>
+                {t('session.messages.loadEarlier')}
+              </button>
+              {' | '}
+              <button
+                className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline"
+                onClick={loadAllMessages}
+              >
+                {t('session.messages.loadAll')}
+              </button>
+            </div>
+          )}
+
+          {visibleMessages.map((message, index) => {
+            const prevMessage = index > 0 ? visibleMessages[index - 1] : null;
+            return (
+              <MessageComponent
+                key={getMessageKey(message)}
+                message={message}
+                index={index}
+                prevMessage={prevMessage}
+                createDiff={createDiff}
+                onFileOpen={onFileOpen}
+                onShowSettings={onShowSettings}
+                onGrantToolPermission={onGrantToolPermission}
+                autoExpandTools={autoExpandTools}
+                showRawParameters={showRawParameters}
+                showThinking={showThinking}
+                selectedProject={selectedProject}
+                provider={provider}
+              />
+            );
+          })}
+        </>
+      )}
+
+      {isLoading && <AssistantThinkingIndicator selectedProvider={provider} />}
+    </div>
+  );
+}
+
--- a/src/components/chat/view/subcomponents/ClaudeStatus.tsx
+++ b/src/components/chat/view/subcomponents/ClaudeStatus.tsx
@@ -1,12 +1,30 @@
-import React, { useState, useEffect } from 'react';
-import { cn } from '../lib/utils';
+import { useEffect, useState } from 'react';
+import { cn } from '../../../../lib/utils';

-function ClaudeStatus({ status, onAbort, isLoading, provider = 'claude' }) {
+type ClaudeStatusProps = {
+  status: {
+    text?: string;
+    tokens?: number;
+    can_interrupt?: boolean;
+  } | null;
+  onAbort?: () => void;
+  isLoading: boolean;
+  provider?: string;
+};
+
+const ACTION_WORDS = ['Thinking', 'Processing', 'Analyzing', 'Working', 'Computing', 'Reasoning'];
+const SPINNER_CHARS = ['*', '+', 'x', '.'];
+
+export default function ClaudeStatus({
+  status,
+  onAbort,
+  isLoading,
+  provider: _provider = 'claude',
+}: ClaudeStatusProps) {
  const [elapsedTime, setElapsedTime] = useState(0);
  const [animationPhase, setAnimationPhase] = useState(0);
  const [fakeTokens, setFakeTokens] = useState(0);

-  // Update elapsed time every second
  useEffect(() => {
    if (!isLoading) {
      setElapsedTime(0);
@@ -15,79 +33,72 @@ function ClaudeStatus({ status, onAbort, isLoading, provider = 'claude' }) {
    }

    const startTime = Date.now();
-    // Calculate random token rate once (30-50 tokens per second)
    const tokenRate = 30 + Math.random() * 20;

-    const timer = setInterval(() => {
+    const timer = window.setInterval(() => {
      const elapsed = Math.floor((Date.now() - startTime) / 1000);
      setElapsedTime(elapsed);
-      // Simulate token count increasing over time
      setFakeTokens(Math.floor(elapsed * tokenRate));
    }, 1000);

-    return () => clearInterval(timer);
+    return () => window.clearInterval(timer);
  }, [isLoading]);

-  // Animate the status indicator
  useEffect(() => {
-    if (!isLoading) return;
+    if (!isLoading) {
+      return;
+    }

-    const timer = setInterval(() => {
-      setAnimationPhase(prev => (prev + 1) % 4);
+    const timer = window.setInterval(() => {
+      setAnimationPhase((previous) => (previous + 1) % SPINNER_CHARS.length);
    }, 500);

-    return () => clearInterval(timer);
+    return () => window.clearInterval(timer);
  }, [isLoading]);

-  // Don't show if loading is false
-  // Note: showThinking only controls the reasoning accordion in messages, not this processing indicator
-  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];
+  if (!isLoading) {
+    return null;
+  }
+
+  const actionIndex = Math.floor(elapsedTime / 3) % ACTION_WORDS.length;
+  const statusText = status?.text || ACTION_WORDS[actionIndex];
  const tokens = status?.tokens || fakeTokens;
  const canInterrupt = status?.can_interrupt !== false;
-  
-  // Animation characters
-  const spinners = ['✻', '✹', '✸', '✶'];
-  const currentSpinner = spinners[animationPhase];
-  
+  const currentSpinner = SPINNER_CHARS[animationPhase];
+
  return (
    <div className="w-full mb-3 sm:mb-6 animate-in slide-in-from-bottom duration-300">
      <div className="flex items-center justify-between max-w-4xl mx-auto bg-gray-800 dark:bg-gray-900 text-white rounded-lg shadow-lg px-2.5 py-2 sm:px-4 sm:py-3 border border-gray-700 dark:border-gray-800">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 sm:gap-3">
-            {/* Animated spinner */}
-            <span className={cn(
-              "text-base sm:text-xl transition-all duration-500 flex-shrink-0",
-              animationPhase % 2 === 0 ? "text-blue-400 scale-110" : "text-blue-300"
-            )}>
+            <span
+              className={cn(
+                'text-base sm:text-xl transition-all duration-500 flex-shrink-0',
+                animationPhase % 2 === 0 ? 'text-blue-400 scale-110' : 'text-blue-300',
+              )}
+            >
              {currentSpinner}
            </span>

-            {/* Status text - compact for mobile */}
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-1.5 sm:gap-2">
                <span className="font-medium text-xs sm:text-sm truncate">{statusText}...</span>
                <span className="text-gray-400 text-xs sm:text-sm flex-shrink-0">({elapsedTime}s)</span>
                {tokens > 0 && (
                  <>
-                    <span className="text-gray-500 hidden sm:inline">·</span>
-                    <span className="text-gray-300 text-xs sm:text-sm hidden sm:inline flex-shrink-0">⚒ {tokens.toLocaleString()}</span>
+                    <span className="text-gray-500 hidden sm:inline">|</span>
+                    <span className="text-gray-300 text-xs sm:text-sm hidden sm:inline flex-shrink-0">
+                      tokens {tokens.toLocaleString()}
+                    </span>
                  </>
                )}
-                <span className="text-gray-500 hidden sm:inline">·</span>
+                <span className="text-gray-500 hidden sm:inline">|</span>
                <span className="text-gray-400 text-xs sm:text-sm hidden sm:inline">esc to stop</span>
              </div>
            </div>
          </div>
        </div>

-        {/* Interrupt button */}
        {canInterrupt && onAbort && (
          <button
            onClick={onAbort}
@@ -103,5 +114,3 @@ function ClaudeStatus({ status, onAbort, isLoading, provider = 'claude' }) {
    </div>
  );
 }
-
-export default ClaudeStatus;
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export { AskUserQuestionPanel } from './AskUserQuestionPanel';`