fix: add support for Codex in the shell (#424 )

* fix: add support for Codex in the shell * fix: harden codex shell session resume command
Release 1.20.1
2026-06-14 18:41:57 +08: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 · 2026-02-23 22:12:00 +00:00 · 2026-02-23 21:55:53 +00:00
93 changed files with 6299 additions and 1427 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/.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,7 @@

 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)
+<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

@@ -291,31 +291,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>

 ## 截图

@@ -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.17.1",
+  "version": "1.20.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@siteboon/claude-code-ui",
-      "version": "1.17.1",
-      "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",
@@ -56,6 +57,7 @@
        "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 +70,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 +114,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 +127,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 +691,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 +2552,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 +2710,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 +3058,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 +3232,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 +3579,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 +4498,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 +4604,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 +5036,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 +5575,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 +6219,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 +6271,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 +6351,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 +6390,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 +6853,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 +7640,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 +8850,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",
@@ -9575,6 +10199,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 +11252,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 +12615,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 +12798,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 +13204,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.17.1",
+  "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,7 +31,9 @@
    "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 code",
@@ -39,10 +42,10 @@
    "ui",
    "mobile"
  ],
-  "author": "Claude Code UI Contributors",
+  "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",
@@ -89,6 +92,7 @@
    "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 +101,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/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
@@ -9,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',
@@ -333,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
  });
 });

@@ -410,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
        });

@@ -703,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) {
@@ -744,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) {
@@ -798,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) {
@@ -1136,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`;
@@ -1172,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';
@@ -1889,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() {
@@ -1908,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('');
@@ -1916,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
@@ -1,5 +1,6 @@
 // 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';
@@ -22,3 +23,7 @@ try {
 } 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/projects.js
+++ b/server/projects.js
@@ -889,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);
@@ -913,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 {
@@ -927,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,
--- 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/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/components/CodeEditor.jsx
+++ b/src/components/CodeEditor.jsx
@@ -7,14 +7,142 @@ 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 { StreamLanguage } from '@codemirror/language';
 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 { X, Save, Download, Maximize2, Minimize2, Settings as SettingsIcon } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import rehypeRaw from 'rehype-raw';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark as prismOneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { api } from '../utils/api';
 import { useTranslation } from 'react-i18next';
+import { Eye, Code2 } from 'lucide-react';

-function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded = false, onToggleExpand = null }) {
+// Custom .env file syntax highlighting
+const envLanguage = StreamLanguage.define({
+  token(stream) {
+    // Comments
+    if (stream.match(/^#.*/)) return 'comment';
+    // Key (before =)
+    if (stream.sol() && stream.match(/^[A-Za-z_][A-Za-z0-9_.]*(?==)/)) return 'variableName.definition';
+    // Equals sign
+    if (stream.match(/^=/)) return 'operator';
+    // Double-quoted string
+    if (stream.match(/^"(?:[^"\\]|\\.)*"?/)) return 'string';
+    // Single-quoted string
+    if (stream.match(/^'(?:[^'\\]|\\.)*'?/)) return 'string';
+    // Variable interpolation ${...}
+    if (stream.match(/^\$\{[^}]*\}?/)) return 'variableName.special';
+    // Variable reference $VAR
+    if (stream.match(/^\$[A-Za-z_][A-Za-z0-9_]*/)) return 'variableName.special';
+    // Numbers
+    if (stream.match(/^\d+/)) return 'number';
+    // Skip other characters
+    stream.next();
+    return null;
+  },
+});
+
+function MarkdownCodeBlock({ inline, className, children, ...props }) {
+  const [copied, setCopied] = useState(false);
+  const raw = Array.isArray(children) ? children.join('') : String(children ?? '');
+  const looksMultiline = /[\r\n]/.test(raw);
+  const shouldInline = inline || !looksMultiline;
+
+  if (shouldInline) {
+    return (
+      <code
+        className={`font-mono text-[0.9em] px-1.5 py-0.5 rounded-md bg-gray-100 text-gray-900 border border-gray-200 dark:bg-gray-800/60 dark:text-gray-100 dark:border-gray-700 whitespace-pre-wrap break-words ${className || ''}`}
+        {...props}
+      >
+        {children}
+      </code>
+    );
+  }
+
+  const match = /language-(\w+)/.exec(className || '');
+  const language = match ? match[1] : 'text';
+
+  return (
+    <div className="relative group my-2">
+      {language && language !== 'text' && (
+        <div className="absolute top-2 left-3 z-10 text-xs text-gray-400 font-medium uppercase">{language}</div>
+      )}
+      <button
+        type="button"
+        onClick={() => {
+          navigator.clipboard?.writeText(raw).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+          });
+        }}
+        className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity text-xs px-2 py-1 rounded-md bg-gray-700/80 hover:bg-gray-700 text-white border border-gray-600"
+      >
+        {copied ? 'Copied!' : 'Copy'}
+      </button>
+      <SyntaxHighlighter
+        language={language}
+        style={prismOneDark}
+        customStyle={{
+          margin: 0,
+          borderRadius: '0.5rem',
+          fontSize: '0.875rem',
+          padding: language && language !== 'text' ? '2rem 1rem 1rem 1rem' : '1rem',
+        }}
+      >
+        {raw}
+      </SyntaxHighlighter>
+    </div>
+  );
+}
+
+const markdownPreviewComponents = {
+  code: MarkdownCodeBlock,
+  blockquote: ({ children }) => (
+    <blockquote className="border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-600 dark:text-gray-400 my-2">
+      {children}
+    </blockquote>
+  ),
+  a: ({ href, children }) => (
+    <a href={href} className="text-blue-600 dark:text-blue-400 hover:underline" target="_blank" rel="noopener noreferrer">
+      {children}
+    </a>
+  ),
+  table: ({ children }) => (
+    <div className="overflow-x-auto my-2">
+      <table className="min-w-full border-collapse border border-gray-200 dark:border-gray-700">{children}</table>
+    </div>
+  ),
+  thead: ({ children }) => <thead className="bg-gray-50 dark:bg-gray-800">{children}</thead>,
+  th: ({ children }) => (
+    <th className="px-3 py-2 text-left text-sm font-semibold border border-gray-200 dark:border-gray-700">{children}</th>
+  ),
+  td: ({ children }) => (
+    <td className="px-3 py-2 align-top text-sm border border-gray-200 dark:border-gray-700">{children}</td>
+  ),
+};
+
+function MarkdownPreview({ content }) {
+  const remarkPlugins = useMemo(() => [remarkGfm, remarkMath], []);
+  const rehypePlugins = useMemo(() => [rehypeRaw, rehypeKatex], []);
+
+  return (
+    <ReactMarkdown
+      remarkPlugins={remarkPlugins}
+      rehypePlugins={rehypePlugins}
+      components={markdownPreviewComponents}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+}
+
+function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded = false, onToggleExpand = null, onPopOut = null }) {
  const { t } = useTranslation('codeEditor');
  const [content, setContent] = useState('');
  const [loading, setLoading] = useState(true);
@@ -36,10 +164,17 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
    return localStorage.getItem('codeEditorLineNumbers') !== 'false';
  });
  const [fontSize, setFontSize] = useState(() => {
-    return localStorage.getItem('codeEditorFontSize') || '14';
+    return localStorage.getItem('codeEditorFontSize') || '12';
  });
+  const [markdownPreview, setMarkdownPreview] = useState(false);
  const editorRef = useRef(null);

+  // Check if file is markdown
+  const isMarkdownFile = useMemo(() => {
+    const ext = file.name.split('.').pop()?.toLowerCase();
+    return ext === 'md' || ext === 'markdown';
+  }, [file.name]);
+
  // Create minimap extension with chunk-based gutters
  const minimapExtension = useMemo(() => {
    if (!file.diffInfo || !showDiff || !minimapEnabled) return [];
@@ -105,8 +240,13 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
    ];
  }, [file.diffInfo, showDiff]);

-  // Create editor toolbar panel - always visible
+  // Whether toolbar has any buttons worth showing
+  const hasToolbarButtons = !!(file.diffInfo || (isSidebar && onPopOut) || (isSidebar && onToggleExpand));
+
+  // Create editor toolbar panel - only when there are buttons to show
  const editorToolbarPanel = useMemo(() => {
+    if (!hasToolbarButtons) return [];
+
    const createPanel = (view) => {
      const dom = document.createElement('div');
      dom.className = 'cm-editor-toolbar-panel';
@@ -159,14 +299,16 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
          `;
        }

-        // 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>
-        `;
+        // Pop out button (only in sidebar mode with onPopOut)
+        if (isSidebar && onPopOut) {
+          toolbarHTML += `
+            <button class="cm-toolbar-btn cm-popout-btn" title="Open in modal">
+              <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="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3" />
+              </svg>
+            </button>
+          `;
+        }

        // Expand button (only in sidebar mode)
        if (isSidebar && onToggleExpand) {
@@ -187,7 +329,6 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded

        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');
@@ -219,7 +360,6 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
          });
        }

-        // Attach event listener for toggle diff button
        if (file.diffInfo) {
          const toggleDiffBtn = dom.querySelector('.cm-toggle-diff-btn');
          toggleDiffBtn?.addEventListener('click', () => {
@@ -227,15 +367,13 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
          });
        }

-        // Attach event listener for settings button
-        const settingsBtn = dom.querySelector('.cm-settings-btn');
-        settingsBtn?.addEventListener('click', () => {
-          if (window.openSettings) {
-            window.openSettings('appearance');
-          }
-        });
+        if (isSidebar && onPopOut) {
+          const popoutBtn = dom.querySelector('.cm-popout-btn');
+          popoutBtn?.addEventListener('click', () => {
+            onPopOut();
+          });
+        }

-        // Attach event listener for expand button
        if (isSidebar && onToggleExpand) {
          const expandBtn = dom.querySelector('.cm-expand-btn');
          expandBtn?.addEventListener('click', () => {
@@ -254,10 +392,15 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
    };

    return [showPanel.of(createPanel)];
-  }, [file.diffInfo, showDiff, isSidebar, isExpanded, onToggleExpand]);
+  }, [file.diffInfo, showDiff, isSidebar, isExpanded, onToggleExpand, onPopOut]);

  // Get language extension based on file extension
  const getLanguageExtension = (filename) => {
+    const lowerName = filename.toLowerCase();
+    // Handle dotfiles like .env, .env.local, .env.production, etc.
+    if (lowerName === '.env' || lowerName.startsWith('.env.')) {
+      return [envLanguage];
+    }
    const ext = filename.split('.').pop()?.toLowerCase();
    switch (ext) {
      case 'js':
@@ -279,6 +422,8 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
      case 'md':
      case 'markdown':
        return [markdown()];
+      case 'env':
+        return [envLanguage];
      default:
        return [];
    }
@@ -469,7 +614,7 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
            </div>
          </div>
        ) : (
-          <div className="fixed inset-0 z-40 md:bg-black/50 md:flex md:items-center md:justify-center">
+          <div className="fixed inset-0 z-[9999] 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>
@@ -523,16 +668,16 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded

          /* Editor toolbar panel styling */
          .cm-editor-toolbar-panel {
-            padding: 8px 12px;
+            padding: 4px 10px;
            background-color: ${isDarkMode ? '#1f2937' : '#ffffff'};
            border-bottom: 1px solid ${isDarkMode ? '#374151' : '#e5e7eb'};
            color: ${isDarkMode ? '#d1d5db' : '#374151'};
-            font-size: 14px;
+            font-size: 12px;
          }

          .cm-diff-nav-btn,
          .cm-toolbar-btn {
-            padding: 4px;
+            padding: 3px;
            background: transparent;
            border: none;
            cursor: pointer;
@@ -557,7 +702,7 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
      </style>
      <div className={isSidebar ?
        'w-full h-full flex flex-col' :
-        `fixed inset-0 z-40 ${
+        `fixed inset-0 z-[9999] ${
          // 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' : ''}`}>
@@ -569,58 +714,75 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
          (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="flex items-center justify-between px-3 py-1.5 border-b border-border flex-shrink-0 min-w-0">
+          <div className="flex items-center gap-2 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>
+                <h3 className="text-sm 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">
+                  <span className="text-[10px] bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 px-1.5 py-0.5 rounded whitespace-nowrap">
                    {t('header.showingChanges')}
                  </span>
                )}
              </div>
-              <p className="text-sm text-gray-500 dark:text-gray-400 truncate">{file.path}</p>
+              <p className="text-xs 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">
+          <div className="flex items-center gap-0.5 md:gap-1 flex-shrink-0">
+            {isMarkdownFile && (
+              <button
+                onClick={() => setMarkdownPreview(!markdownPreview)}
+                className={`p-1.5 rounded-md min-w-[36px] min-h-[36px] md:min-w-0 md:min-h-0 flex items-center justify-center transition-colors ${
+                  markdownPreview
+                    ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
+                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800'
+                }`}
+                title={markdownPreview ? t('actions.editMarkdown') : t('actions.previewMarkdown')}
+              >
+                {markdownPreview ? <Code2 className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+              </button>
+            )}
+
+            <button
+              onClick={() => window.openSettings?.('appearance')}
+              className="p-1.5 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-[36px] min-h-[36px] md:min-w-0 md:min-h-0 flex items-center justify-center"
+              title={t('toolbar.settings')}
+            >
+              <SettingsIcon className="w-4 h-4" />
+            </button>
+
            <button
              onClick={handleDownload}
-              className="p-2 md:p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
+              className="p-1.5 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-[36px] min-h-[36px] 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" />
+              <Download className="w-4 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 ${
+              className={`p-1.5 rounded-md disabled:opacity-50 flex items-center justify-center transition-colors min-w-[36px] min-h-[36px] md:min-w-0 md:min-h-0 ${
                saveSuccess
-                  ? 'bg-green-600 hover:bg-green-700'
-                  : 'bg-blue-600 hover:bg-blue-700'
+                  ? 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/30'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800'
              }`}
+              title={saveSuccess ? t('actions.saved') : saving ? t('actions.saving') : t('actions.save')}
            >
              {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>
-                </>
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
              ) : (
-                <>
-                  <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>
-                </>
+                <Save className="w-4 h-4" />
              )}
            </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"
+                className="hidden md:flex p-1.5 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" />}
@@ -629,70 +791,78 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded

            <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"
+              className="p-1.5 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-[36px] min-h-[36px] 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" />
+              <X className="w-4 h-4" />
            </button>
          </div>
        </div>

-        {/* Editor */}
+        {/* Editor / Markdown Preview */}
        <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,
-            }}
-          />
+          {markdownPreview && isMarkdownFile ? (
+            <div className="h-full overflow-y-auto bg-white dark:bg-gray-900">
+              <div className="max-w-4xl mx-auto px-8 py-6 prose prose-sm dark:prose-invert prose-headings:font-semibold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-code:text-sm prose-pre:bg-gray-900 prose-img:rounded-lg max-w-none">
+                <MarkdownPreview content={content} />
+              </div>
+            </div>
+          ) : (
+            <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">
+        <div className="flex items-center justify-between px-3 py-1.5 border-t border-border bg-muted flex-shrink-0">
+          <div className="flex items-center gap-3 text-xs 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">
+          <div className="text-xs text-gray-500 dark:text-gray-400">
            {t('footer.shortcuts')}
          </div>
        </div>
--- 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/FileTree.jsx
+++ b/src/components/FileTree.jsx
@@ -3,20 +3,269 @@ 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 {
+  Folder, FolderOpen, File, FileText, FileCode, List, TableProperties, Eye, Search, X,
+  ChevronRight,
+  FileJson, FileType, FileSpreadsheet, FileArchive,
+  Hash, Braces, Terminal, Database, Globe, Palette, Music2, Video, Archive,
+  Lock, Shield, Settings, Image, BookOpen, Cpu, Box, Gem, Coffee,
+  Flame, Hexagon, FileCode2, Code2, Cog, FileWarning, Binary, SquareFunction,
+  Scroll, FlaskConical, NotebookPen, FileCheck, Workflow, Blocks
+} from 'lucide-react';
 import { cn } from '../lib/utils';
-import CodeEditor from './CodeEditor';
 import ImageViewer from './ImageViewer';
 import { api } from '../utils/api';

-function FileTree({ selectedProject }) {
+// ─── File Icon Registry ──────────────────────────────────────────────
+// Maps file extensions (and special filenames) to { icon, colorClass } pairs.
+// Uses lucide-react icons mapped semantically to file types.
+
+const ICON_SIZE = 'w-4 h-4 flex-shrink-0';
+
+const FILE_ICON_MAP = {
+  // ── JavaScript / TypeScript ──
+  js:   { icon: FileCode,   color: 'text-yellow-500' },
+  jsx:  { icon: FileCode,   color: 'text-yellow-500' },
+  mjs:  { icon: FileCode,   color: 'text-yellow-500' },
+  cjs:  { icon: FileCode,   color: 'text-yellow-500' },
+  ts:   { icon: FileCode2,  color: 'text-blue-500' },
+  tsx:  { icon: FileCode2,  color: 'text-blue-500' },
+  mts:  { icon: FileCode2,  color: 'text-blue-500' },
+
+  // ── Python ──
+  py:   { icon: Code2,      color: 'text-emerald-500' },
+  pyw:  { icon: Code2,      color: 'text-emerald-500' },
+  pyi:  { icon: Code2,      color: 'text-emerald-400' },
+  ipynb:{ icon: NotebookPen, color: 'text-orange-500' },
+
+  // ── Rust ──
+  rs:   { icon: Cog,        color: 'text-orange-600' },
+  toml: { icon: Settings,   color: 'text-gray-500' },
+
+  // ── Go ──
+  go:   { icon: Hexagon,    color: 'text-cyan-500' },
+
+  // ── Ruby ──
+  rb:   { icon: Gem,        color: 'text-red-500' },
+  erb:  { icon: Gem,        color: 'text-red-400' },
+
+  // ── PHP ──
+  php:  { icon: Blocks,     color: 'text-violet-500' },
+
+  // ── Java / Kotlin ──
+  java: { icon: Coffee,     color: 'text-red-600' },
+  jar:  { icon: Coffee,     color: 'text-red-500' },
+  kt:   { icon: Hexagon,    color: 'text-violet-500' },
+  kts:  { icon: Hexagon,    color: 'text-violet-400' },
+
+  // ── C / C++ ──
+  c:    { icon: Cpu,        color: 'text-blue-600' },
+  h:    { icon: Cpu,        color: 'text-blue-400' },
+  cpp:  { icon: Cpu,        color: 'text-blue-700' },
+  hpp:  { icon: Cpu,        color: 'text-blue-500' },
+  cc:   { icon: Cpu,        color: 'text-blue-700' },
+
+  // ── C# ──
+  cs:   { icon: Hexagon,    color: 'text-purple-600' },
+
+  // ── Swift ──
+  swift:{ icon: Flame,      color: 'text-orange-500' },
+
+  // ── Lua ──
+  lua:  { icon: SquareFunction, color: 'text-blue-500' },
+
+  // ── R ──
+  r:    { icon: FlaskConical, color: 'text-blue-600' },
+
+  // ── Web ──
+  html: { icon: Globe,      color: 'text-orange-600' },
+  htm:  { icon: Globe,      color: 'text-orange-600' },
+  css:  { icon: Hash,       color: 'text-blue-500' },
+  scss: { icon: Hash,       color: 'text-pink-500' },
+  sass: { icon: Hash,       color: 'text-pink-400' },
+  less: { icon: Hash,       color: 'text-indigo-500' },
+  vue:  { icon: FileCode2,  color: 'text-emerald-500' },
+  svelte:{ icon: FileCode2, color: 'text-orange-500' },
+
+  // ── Data / Config ──
+  json: { icon: Braces,     color: 'text-yellow-600' },
+  jsonc:{ icon: Braces,     color: 'text-yellow-500' },
+  json5:{ icon: Braces,     color: 'text-yellow-500' },
+  yaml: { icon: Settings,   color: 'text-purple-400' },
+  yml:  { icon: Settings,   color: 'text-purple-400' },
+  xml:  { icon: FileCode,   color: 'text-orange-500' },
+  csv:  { icon: FileSpreadsheet, color: 'text-green-600' },
+  tsv:  { icon: FileSpreadsheet, color: 'text-green-500' },
+  sql:  { icon: Database,   color: 'text-blue-500' },
+  graphql:{ icon: Workflow,  color: 'text-pink-500' },
+  gql:  { icon: Workflow,   color: 'text-pink-500' },
+  proto:{ icon: Box,        color: 'text-green-500' },
+  env:  { icon: Shield,     color: 'text-yellow-600' },
+
+  // ── Documents ──
+  md:   { icon: BookOpen,   color: 'text-blue-500' },
+  mdx:  { icon: BookOpen,   color: 'text-blue-400' },
+  txt:  { icon: FileText,   color: 'text-gray-500' },
+  doc:  { icon: FileText,   color: 'text-blue-600' },
+  docx: { icon: FileText,   color: 'text-blue-600' },
+  pdf:  { icon: FileCheck,  color: 'text-red-600' },
+  rtf:  { icon: FileText,   color: 'text-gray-500' },
+  tex:  { icon: Scroll,     color: 'text-teal-600' },
+  rst:  { icon: FileText,   color: 'text-gray-400' },
+
+  // ── Shell / Scripts ──
+  sh:   { icon: Terminal,   color: 'text-green-500' },
+  bash: { icon: Terminal,   color: 'text-green-500' },
+  zsh:  { icon: Terminal,   color: 'text-green-400' },
+  fish: { icon: Terminal,   color: 'text-green-400' },
+  ps1:  { icon: Terminal,   color: 'text-blue-400' },
+  bat:  { icon: Terminal,   color: 'text-gray-500' },
+  cmd:  { icon: Terminal,   color: 'text-gray-500' },
+
+  // ── Images ──
+  png:  { icon: Image,      color: 'text-purple-500' },
+  jpg:  { icon: Image,      color: 'text-purple-500' },
+  jpeg: { icon: Image,      color: 'text-purple-500' },
+  gif:  { icon: Image,      color: 'text-purple-400' },
+  webp: { icon: Image,      color: 'text-purple-400' },
+  ico:  { icon: Image,      color: 'text-purple-400' },
+  bmp:  { icon: Image,      color: 'text-purple-400' },
+  tiff: { icon: Image,      color: 'text-purple-400' },
+  svg:  { icon: Palette,    color: 'text-amber-500' },
+
+  // ── Audio ──
+  mp3:  { icon: Music2,     color: 'text-pink-500' },
+  wav:  { icon: Music2,     color: 'text-pink-500' },
+  ogg:  { icon: Music2,     color: 'text-pink-400' },
+  flac: { icon: Music2,     color: 'text-pink-400' },
+  aac:  { icon: Music2,     color: 'text-pink-400' },
+  m4a:  { icon: Music2,     color: 'text-pink-400' },
+
+  // ── Video ──
+  mp4:  { icon: Video,      color: 'text-rose-500' },
+  mov:  { icon: Video,      color: 'text-rose-500' },
+  avi:  { icon: Video,      color: 'text-rose-500' },
+  webm: { icon: Video,      color: 'text-rose-400' },
+  mkv:  { icon: Video,      color: 'text-rose-400' },
+
+  // ── Fonts ──
+  ttf:  { icon: FileType,   color: 'text-red-500' },
+  otf:  { icon: FileType,   color: 'text-red-500' },
+  woff: { icon: FileType,   color: 'text-red-400' },
+  woff2:{ icon: FileType,   color: 'text-red-400' },
+  eot:  { icon: FileType,   color: 'text-red-400' },
+
+  // ── Archives ──
+  zip:  { icon: Archive,    color: 'text-amber-600' },
+  tar:  { icon: Archive,    color: 'text-amber-600' },
+  gz:   { icon: Archive,    color: 'text-amber-600' },
+  bz2:  { icon: Archive,    color: 'text-amber-600' },
+  rar:  { icon: Archive,    color: 'text-amber-500' },
+  '7z': { icon: Archive,    color: 'text-amber-500' },
+
+  // ── Lock files ──
+  lock: { icon: Lock,       color: 'text-gray-500' },
+
+  // ── Binary / Executable ──
+  exe:  { icon: Binary,     color: 'text-gray-500' },
+  bin:  { icon: Binary,     color: 'text-gray-500' },
+  dll:  { icon: Binary,     color: 'text-gray-400' },
+  so:   { icon: Binary,     color: 'text-gray-400' },
+  dylib:{ icon: Binary,     color: 'text-gray-400' },
+  wasm: { icon: Binary,     color: 'text-purple-500' },
+
+  // ── Misc config ──
+  ini:  { icon: Settings,   color: 'text-gray-500' },
+  cfg:  { icon: Settings,   color: 'text-gray-500' },
+  conf: { icon: Settings,   color: 'text-gray-500' },
+  log:  { icon: Scroll,     color: 'text-gray-400' },
+  map:  { icon: File,       color: 'text-gray-400' },
+};
+
+// Special full-filename matches (highest priority)
+const FILENAME_ICON_MAP = {
+  'Dockerfile':       { icon: Box,       color: 'text-blue-500' },
+  'docker-compose.yml': { icon: Box,     color: 'text-blue-500' },
+  'docker-compose.yaml': { icon: Box,    color: 'text-blue-500' },
+  '.dockerignore':    { icon: Box,       color: 'text-gray-500' },
+  '.gitignore':       { icon: Settings,  color: 'text-gray-500' },
+  '.gitmodules':      { icon: Settings,  color: 'text-gray-500' },
+  '.gitattributes':   { icon: Settings,  color: 'text-gray-500' },
+  '.editorconfig':    { icon: Settings,  color: 'text-gray-500' },
+  '.prettierrc':      { icon: Settings,  color: 'text-pink-400' },
+  '.prettierignore':  { icon: Settings,  color: 'text-gray-500' },
+  '.eslintrc':        { icon: Settings,  color: 'text-violet-500' },
+  '.eslintrc.js':     { icon: Settings,  color: 'text-violet-500' },
+  '.eslintrc.json':   { icon: Settings,  color: 'text-violet-500' },
+  '.eslintrc.cjs':    { icon: Settings,  color: 'text-violet-500' },
+  'eslint.config.js': { icon: Settings,  color: 'text-violet-500' },
+  'eslint.config.mjs':{ icon: Settings,  color: 'text-violet-500' },
+  '.env':             { icon: Shield,    color: 'text-yellow-600' },
+  '.env.local':       { icon: Shield,    color: 'text-yellow-600' },
+  '.env.development': { icon: Shield,    color: 'text-yellow-500' },
+  '.env.production':  { icon: Shield,    color: 'text-yellow-600' },
+  '.env.example':     { icon: Shield,    color: 'text-yellow-400' },
+  'package.json':     { icon: Braces,    color: 'text-green-500' },
+  'package-lock.json':{ icon: Lock,      color: 'text-gray-500' },
+  'yarn.lock':        { icon: Lock,      color: 'text-blue-400' },
+  'pnpm-lock.yaml':   { icon: Lock,      color: 'text-orange-400' },
+  'bun.lockb':        { icon: Lock,      color: 'text-gray-400' },
+  'Cargo.toml':       { icon: Cog,       color: 'text-orange-600' },
+  'Cargo.lock':       { icon: Lock,      color: 'text-orange-400' },
+  'Gemfile':          { icon: Gem,       color: 'text-red-500' },
+  'Gemfile.lock':     { icon: Lock,      color: 'text-red-400' },
+  'Makefile':         { icon: Terminal,   color: 'text-gray-500' },
+  'CMakeLists.txt':   { icon: Cog,       color: 'text-blue-500' },
+  'tsconfig.json':    { icon: Braces,    color: 'text-blue-500' },
+  'jsconfig.json':    { icon: Braces,    color: 'text-yellow-500' },
+  'vite.config.ts':   { icon: Flame,     color: 'text-purple-500' },
+  'vite.config.js':   { icon: Flame,     color: 'text-purple-500' },
+  'webpack.config.js':{ icon: Cog,       color: 'text-blue-500' },
+  'tailwind.config.js':{ icon: Hash,     color: 'text-cyan-500' },
+  'tailwind.config.ts':{ icon: Hash,     color: 'text-cyan-500' },
+  'postcss.config.js':{ icon: Cog,       color: 'text-red-400' },
+  'babel.config.js':  { icon: Settings,  color: 'text-yellow-500' },
+  '.babelrc':         { icon: Settings,  color: 'text-yellow-500' },
+  'README.md':        { icon: BookOpen,  color: 'text-blue-500' },
+  'LICENSE':          { icon: FileCheck,  color: 'text-gray-500' },
+  'LICENSE.md':       { icon: FileCheck,  color: 'text-gray-500' },
+  'CHANGELOG.md':     { icon: Scroll,    color: 'text-blue-400' },
+  'requirements.txt': { icon: FileText,  color: 'text-emerald-400' },
+  'go.mod':           { icon: Hexagon,   color: 'text-cyan-500' },
+  'go.sum':           { icon: Lock,      color: 'text-cyan-400' },
+};
+
+function getFileIconData(filename) {
+  // 1. Exact filename match
+  if (FILENAME_ICON_MAP[filename]) {
+    return FILENAME_ICON_MAP[filename];
+  }
+
+  // 2. Check for .env prefix pattern
+  if (filename.startsWith('.env')) {
+    return { icon: Shield, color: 'text-yellow-600' };
+  }
+
+  // 3. Extension-based lookup
+  const ext = filename.split('.').pop()?.toLowerCase();
+  if (ext && FILE_ICON_MAP[ext]) {
+    return FILE_ICON_MAP[ext];
+  }
+
+  // 4. Fallback
+  return { icon: File, color: 'text-muted-foreground' };
+}
+
+
+// ─── Component ───────────────────────────────────────────────────────
+
+function FileTree({ selectedProject, onFileOpen }) {
  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 [viewMode, setViewMode] = useState('detailed');
  const [searchQuery, setSearchQuery] = useState('');
  const [filteredFiles, setFilteredFiles] = useState([]);

@@ -26,7 +275,6 @@ function FileTree({ selectedProject }) {
    }
  }, [selectedProject]);

-  // Load view mode preference from localStorage
  useEffect(() => {
    const savedViewMode = localStorage.getItem('file-tree-view-mode');
    if (savedViewMode && ['simple', 'detailed', 'compact'].includes(savedViewMode)) {
@@ -34,7 +282,6 @@ function FileTree({ selectedProject }) {
    }
  }, []);

-  // Filter files based on search query
  useEffect(() => {
    if (!searchQuery.trim()) {
      setFilteredFiles(files);
@@ -42,7 +289,6 @@ function FileTree({ selectedProject }) {
      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) {
@@ -55,7 +301,6 @@ function FileTree({ selectedProject }) {
    }
  }, [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);
@@ -65,9 +310,6 @@ function FileTree({ selectedProject }) {
        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,
@@ -83,14 +325,14 @@ function FileTree({ selectedProject }) {
    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) {
@@ -111,13 +353,11 @@ function FileTree({ selectedProject }) {
    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;
@@ -126,7 +366,6 @@ function FileTree({ selectedProject }) {
    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();
@@ -140,65 +379,6 @@ function FileTree({ selectedProject }) {
    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'];
@@ -206,196 +386,272 @@ function FileTree({ selectedProject }) {
  };

  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" />;
+    const { icon: Icon, color } = getFileIconData(filename);
+    return <Icon className={cn(ICON_SIZE, color)} />;
+  };
+
+  // ── Click handler shared across all view modes ──
+  const handleItemClick = (item) => {
+    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 if (onFileOpen) {
+      onFileOpen(item.path);
    }
  };

-  // Render detailed view with table-like layout
+  // ── Indent guide + folder/file icon rendering ──
+  const renderIndentGuides = (level) => {
+    if (level === 0) return null;
+    return (
+      <span className="flex items-center flex-shrink-0" aria-hidden="true">
+        {Array.from({ length: level }).map((_, i) => (
+          <span
+            key={i}
+            className="inline-block w-4 h-full border-l border-border/50"
+          />
+        ))}
+      </span>
+    );
+  };
+
+  const renderItemIcons = (item) => {
+    const isDir = item.type === 'directory';
+    const isOpen = expandedDirs.has(item.path);
+
+    if (isDir) {
+      return (
+        <span className="flex items-center gap-0.5 flex-shrink-0">
+          <ChevronRight
+            className={cn(
+              'w-3.5 h-3.5 text-muted-foreground/70 transition-transform duration-150',
+              isOpen && 'rotate-90'
+            )}
+          />
+          {isOpen ? (
+            <FolderOpen className="w-4 h-4 text-blue-500 flex-shrink-0" />
+          ) : (
+            <Folder className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+          )}
+        </span>
+      );
+    }
+
+    return (
+      <span className="flex items-center flex-shrink-0 ml-[18px]">
+        {getFileIcon(item.name)}
+      </span>
+    );
+  };
+
+  // ─── Simple (Tree) View ────────────────────────────────────────────
+  const renderFileTree = (items, level = 0) => {
+    return items.map((item) => {
+      const isDir = item.type === 'directory';
+      const isOpen = isDir && expandedDirs.has(item.path);
+
+      return (
+        <div key={item.path} className="select-none">
+          <div
+            className={cn(
+              'group flex items-center gap-1.5 py-[3px] pr-2 cursor-pointer rounded-sm',
+              'hover:bg-accent/60 transition-colors duration-100',
+              isDir && isOpen && 'border-l-2 border-primary/30',
+              isDir && !isOpen && 'border-l-2 border-transparent',
+              !isDir && 'border-l-2 border-transparent',
+            )}
+            style={{ paddingLeft: `${level * 16 + 4}px` }}
+            onClick={() => handleItemClick(item)}
+          >
+            {renderItemIcons(item)}
+            <span className={cn(
+              'text-[13px] leading-tight truncate',
+              isDir ? 'font-medium text-foreground' : 'text-foreground/90'
+            )}>
+              {item.name}
+            </span>
+          </div>
+
+          {isDir && isOpen && item.children && item.children.length > 0 && (
+            <div className="relative">
+              <span
+                className="absolute top-0 bottom-0 border-l border-border/40"
+                style={{ left: `${level * 16 + 14}px` }}
+                aria-hidden="true"
+              />
+              {renderFileTree(item.children, level + 1)}
+            </div>
+          )}
+        </div>
+      );
+    });
+  };
+
+  // ─── Detailed View ────────────────────────────────────────────────
  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)
+    return items.map((item) => {
+      const isDir = item.type === 'directory';
+      const isOpen = isDir && expandedDirs.has(item.path);
+
+      return (
+        <div key={item.path} className="select-none">
+          <div
+            className={cn(
+              'group grid grid-cols-12 gap-2 py-[3px] pr-2 hover:bg-accent/60 cursor-pointer items-center rounded-sm transition-colors duration-100',
+              isDir && isOpen && 'border-l-2 border-primary/30',
+              isDir && !isOpen && 'border-l-2 border-transparent',
+              !isDir && 'border-l-2 border-transparent',
            )}
-            <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 || '-'}
+            style={{ paddingLeft: `${level * 16 + 4}px` }}
+            onClick={() => handleItemClick(item)}
+          >
+            <div className="col-span-5 flex items-center gap-1.5 min-w-0">
+              {renderItemIcons(item)}
+              <span className={cn(
+                'text-[13px] leading-tight truncate',
+                isDir ? 'font-medium text-foreground' : 'text-foreground/90'
+              )}>
+                {item.name}
+              </span>
+            </div>
+            <div className="col-span-2 text-sm text-muted-foreground tabular-nums">
+              {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>
+
+          {isDir && isOpen && item.children && (
+            <div className="relative">
+              <span
+                className="absolute top-0 bottom-0 border-l border-border/40"
+                style={{ left: `${level * 16 + 14}px` }}
+                aria-hidden="true"
+              />
+              {renderDetailedView(item.children, level + 1)}
+            </div>
+          )}
        </div>
-        
-        {item.type === 'directory' && 
-         expandedDirs.has(item.path) && 
-         item.children && 
-         renderDetailedView(item.children, level + 1)}
-      </div>
-    ));
+      );
+    });
  };

-  // Render compact view with inline details
+  // ─── Compact View ──────────────────────────────────────────────────
  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",
+    return items.map((item) => {
+      const isDir = item.type === 'directory';
+      const isOpen = isDir && expandedDirs.has(item.path);
+
+      return (
+        <div key={item.path} className="select-none">
+          <div
+            className={cn(
+              'group flex items-center justify-between py-[3px] pr-2 hover:bg-accent/60 cursor-pointer rounded-sm transition-colors duration-100',
+              isDir && isOpen && 'border-l-2 border-primary/30',
+              isDir && !isOpen && 'border-l-2 border-transparent',
+              !isDir && 'border-l-2 border-transparent',
+            )}
+            style={{ paddingLeft: `${level * 16 + 4}px` }}
+            onClick={() => handleItemClick(item)}
+          >
+            <div className="flex items-center gap-1.5 min-w-0">
+              {renderItemIcons(item)}
+              <span className={cn(
+                'text-[13px] leading-tight truncate',
+                isDir ? 'font-medium text-foreground' : 'text-foreground/90'
+              )}>
+                {item.name}
+              </span>
+            </div>
+            <div className="flex items-center gap-3 text-sm text-muted-foreground flex-shrink-0 ml-2">
+              {item.type === 'file' && (
+                <>
+                  <span className="tabular-nums">{formatFileSize(item.size)}</span>
+                  <span className="font-mono">{item.permissionsRwx}</span>
+                </>
+              )}
+            </div>
+          </div>
+
+          {isDir && isOpen && item.children && (
+            <div className="relative">
+              <span
+                className="absolute top-0 bottom-0 border-l border-border/40"
+                style={{ left: `${level * 16 + 14}px` }}
+                aria-hidden="true"
+              />
+              {renderCompactView(item.children, level + 1)}
+            </div>
          )}
-          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>
-    ));
+      );
+    });
  };

+  // ─── Loading state ─────────────────────────────────────────────────
  if (loading) {
    return (
      <div className="h-full flex items-center justify-center">
-        <div className="text-gray-500 dark:text-gray-400">
+        <div className="text-muted-foreground text-sm">
          {t('fileTree.loading')}
        </div>
      </div>
    );
  }

+  // ─── Main render ───────────────────────────────────────────────────
  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="h-full flex flex-col bg-background">
+      {/* Header */}
+      <div className="px-3 pt-3 pb-2 border-b border-border space-y-2">
        <div className="flex items-center justify-between">
-          <h3 className="text-sm font-medium text-foreground">{t('fileTree.files')}</h3>
-          <div className="flex gap-1">
+          <h3 className="text-sm font-medium text-foreground">
+            {t('fileTree.files')}
+          </h3>
+          <div className="flex gap-0.5">
            <Button
              variant={viewMode === 'simple' ? 'default' : 'ghost'}
              size="sm"
-              className="h-8 w-8 p-0"
+              className="h-7 w-7 p-0"
              onClick={() => changeViewMode('simple')}
              title={t('fileTree.simpleView')}
            >
-              <List className="w-4 h-4" />
+              <List className="w-3.5 h-3.5" />
            </Button>
            <Button
              variant={viewMode === 'compact' ? 'default' : 'ghost'}
              size="sm"
-              className="h-8 w-8 p-0"
+              className="h-7 w-7 p-0"
              onClick={() => changeViewMode('compact')}
              title={t('fileTree.compactView')}
            >
-              <Eye className="w-4 h-4" />
+              <Eye className="w-3.5 h-3.5" />
            </Button>
            <Button
              variant={viewMode === 'detailed' ? 'default' : 'ghost'}
              size="sm"
-              className="h-8 w-8 p-0"
+              className="h-7 w-7 p-0"
              onClick={() => changeViewMode('detailed')}
              title={t('fileTree.detailedView')}
            >
-              <TableProperties className="w-4 h-4" />
+              <TableProperties className="w-3.5 h-3.5" />
            </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" />
+          <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
          <Input
            type="text"
            placeholder={t('fileTree.searchPlaceholder')}
@@ -407,7 +663,7 @@ function FileTree({ selectedProject }) {
            <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"
+              className="absolute right-0.5 top-1/2 transform -translate-y-1/2 h-5 w-5 p-0 hover:bg-accent"
              onClick={() => setSearchQuery('')}
              title={t('fileTree.clearSearch')}
            >
@@ -419,8 +675,8 @@ function FileTree({ selectedProject }) {

      {/* 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="px-3 pt-1.5 pb-1 border-b border-border">
+          <div className="grid grid-cols-12 gap-2 px-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
            <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>
@@ -429,7 +685,7 @@ function FileTree({ selectedProject }) {
        </div>
      )}

-      <ScrollArea className="flex-1 p-4">
+      <ScrollArea className="flex-1 px-2 py-1">
        {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">
@@ -451,23 +707,14 @@ function FileTree({ selectedProject }) {
            </p>
          </div>
        ) : (
-          <div className={viewMode === 'detailed' ? '' : 'space-y-1'}>
+          <div>
            {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
@@ -479,4 +726,4 @@ function FileTree({ selectedProject }) {
  );
 }

-export default FileTree;
+export default FileTree;
--- a/src/components/GitPanel.jsx
+++ b/src/components/GitPanel.jsx
@@ -640,36 +640,36 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
  const renderCommitItem = (commit) => {
    const isExpanded = expandedCommits.has(commit.hash);
    const diff = commitDiffs[commit.hash];
-    
+
    return (
-      <div key={commit.hash} className="border-b border-gray-200 dark:border-gray-700 last:border-0">
-        <div 
-          className="flex items-start p-3 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer"
+      <div key={commit.hash} className="border-b border-border last:border-0">
+        <div
+          className="flex items-start p-3 hover:bg-accent/50 cursor-pointer transition-colors"
          onClick={() => toggleCommitExpanded(commit.hash)}
        >
-          <div className="mr-2 mt-1 p-0.5 hover:bg-gray-200 dark:hover:bg-gray-700 rounded">
+          <div className="mr-2 mt-1 p-0.5 hover:bg-accent rounded">
            {isExpanded ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-start justify-between gap-2">
              <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-gray-900 dark:text-white truncate">
+                <p className="text-sm font-medium text-foreground truncate">
                  {commit.message}
                </p>
-                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                <p className="text-sm text-muted-foreground mt-1">
                  {commit.author} • {commit.date}
                </p>
              </div>
-              <span className="text-xs font-mono text-gray-400 dark:text-gray-500 flex-shrink-0">
+              <span className="text-sm font-mono text-muted-foreground/60 flex-shrink-0">
                {commit.hash.substring(0, 7)}
              </span>
            </div>
          </div>
        </div>
        {isExpanded && diff && (
-          <div className="bg-gray-50 dark:bg-gray-900">
+          <div className="bg-muted/50">
            <div className="max-h-96 overflow-y-auto p-2">
-              <div className="text-xs font-mono text-gray-600 dark:text-gray-400 mb-2">
+              <div className="text-sm font-mono text-muted-foreground mb-2">
                {commit.stats}
              </div>
              <DiffViewer diff={diff} fileName="commit" isMobile={isMobile} wrapText={wrapText} />
@@ -684,22 +684,20 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
    const isExpanded = expandedFiles.has(filePath);
    const isSelected = selectedFiles.has(filePath);
    const diff = gitDiff[filePath];
-    
+
    return (
-      <div key={filePath} className="border-b border-gray-200 dark:border-gray-700 last:border-0">
-        <div className={`flex items-center hover:bg-gray-50 dark:hover:bg-gray-800 ${isMobile ? 'px-2 py-1.5' : 'px-3 py-2'}`}>
+      <div key={filePath} className="border-b border-border last:border-0">
+        <div className={`flex items-center hover:bg-accent/50 transition-colors ${isMobile ? 'px-2 py-1.5' : 'px-3 py-2'}`}>
          <input
            type="checkbox"
            checked={isSelected}
            onChange={() => toggleFileSelected(filePath)}
            onClick={(e) => e.stopPropagation()}
-            className={`rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-800 dark:checked:bg-blue-600 ${isMobile ? 'mr-1.5' : 'mr-2'}`}
+            className={`rounded border-border text-primary focus:ring-primary/40 bg-background checked:bg-primary ${isMobile ? 'mr-1.5' : 'mr-2'}`}
          />
-          <div
-            className="flex items-center flex-1"
-          >
+          <div className="flex items-center flex-1">
            <div
-              className={`p-0.5 hover:bg-gray-200 dark:hover:bg-gray-700 rounded cursor-pointer ${isMobile ? 'mr-1' : 'mr-2'}`}
+              className={`p-0.5 hover:bg-accent rounded cursor-pointer ${isMobile ? 'mr-1' : 'mr-2'}`}
              onClick={(e) => {
                e.stopPropagation();
                toggleFileExpanded(filePath);
@@ -708,7 +706,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
              <ChevronRight className={`w-3 h-3 transition-transform duration-200 ease-in-out ${isExpanded ? 'rotate-90' : 'rotate-0'}`} />
            </div>
            <span
-              className={`flex-1 truncate ${isMobile ? 'text-xs' : 'text-sm'} cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 hover:underline`}
+              className={`flex-1 truncate ${isMobile ? 'text-xs' : 'text-sm'} cursor-pointer hover:text-primary hover:underline`}
              onClick={(e) => {
                e.stopPropagation();
                handleFileOpen(filePath);
@@ -722,16 +720,16 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                <button
                  onClick={(e) => {
                    e.stopPropagation();
-                    setConfirmAction({ 
-                      type: 'discard', 
+                    setConfirmAction({
+                      type: 'discard',
                      file: filePath,
-                      message: `Discard all changes to "${filePath}"? This action cannot be undone.` 
+                      message: `Discard all changes to "${filePath}"? This action cannot be undone.`
                    });
                  }}
-                  className={`${isMobile ? 'px-2 py-1 text-xs' : 'p-1'} hover:bg-red-100 dark:hover:bg-red-900 rounded text-red-600 dark:text-red-400 font-medium flex items-center gap-1`}
+                  className={`${isMobile ? 'px-2 py-1 text-xs' : 'p-1'} hover:bg-destructive/10 rounded text-destructive font-medium flex items-center gap-1`}
                  title="Discard changes"
                >
-                  <Trash2 className={`${isMobile ? 'w-3 h-3' : 'w-3 h-3'}`} />
+                  <Trash2 className="w-3 h-3" />
                  {isMobile && <span>Discard</span>}
                </button>
              )}
@@ -739,25 +737,25 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                <button
                  onClick={(e) => {
                    e.stopPropagation();
-                    setConfirmAction({ 
-                      type: 'delete', 
+                    setConfirmAction({
+                      type: 'delete',
                      file: filePath,
-                      message: `Delete untracked file "${filePath}"? This action cannot be undone.` 
+                      message: `Delete untracked file "${filePath}"? This action cannot be undone.`
                    });
                  }}
-                  className={`${isMobile ? 'px-2 py-1 text-xs' : 'p-1'} hover:bg-red-100 dark:hover:bg-red-900 rounded text-red-600 dark:text-red-400 font-medium flex items-center gap-1`}
+                  className={`${isMobile ? 'px-2 py-1 text-xs' : 'p-1'} hover:bg-destructive/10 rounded text-destructive font-medium flex items-center gap-1`}
                  title="Delete untracked file"
                >
-                  <Trash2 className={`${isMobile ? 'w-3 h-3' : 'w-3 h-3'}`} />
+                  <Trash2 className="w-3 h-3" />
                  {isMobile && <span>Delete</span>}
                </button>
              )}
-              <span 
-                className={`inline-flex items-center justify-center w-5 h-5 rounded text-xs font-bold border ${
-                  status === 'M' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800' :
-                  status === 'A' ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 border-green-200 dark:border-green-800' :
-                  status === 'D' ? 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 border-red-200 dark:border-red-800' :
-                  'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 border-gray-300 dark:border-gray-600'
+              <span
+                className={`inline-flex items-center justify-center w-5 h-5 rounded text-[10px] font-bold border ${
+                  status === 'M' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800/50' :
+                  status === 'A' ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300 border-green-200 dark:border-green-800/50' :
+                  status === 'D' ? 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300 border-red-200 dark:border-red-800/50' :
+                  'bg-muted text-muted-foreground border-border'
                }`}
                title={getStatusLabel(status)}
              >
@@ -766,25 +764,25 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
            </div>
          </div>
        </div>
-        <div className={`bg-gray-50 dark:bg-gray-900 transition-all duration-400 ease-in-out overflow-hidden ${
-          isExpanded && diff 
-            ? 'max-h-[600px] opacity-100 translate-y-0' 
+        <div className={`bg-muted/50 transition-all duration-400 ease-in-out overflow-hidden ${
+          isExpanded && diff
+            ? 'max-h-[600px] opacity-100 translate-y-0'
            : 'max-h-0 opacity-0 -translate-y-1'
        }`}>
            {/* Operation header */}
-            <div className="flex items-center justify-between p-2 border-b border-gray-200 dark:border-gray-700">
+            <div className="flex items-center justify-between p-2 border-b border-border">
              <div className="flex items-center gap-2">
-                <span 
-                  className={`inline-flex items-center justify-center w-5 h-5 rounded text-xs font-bold border ${
-                    status === 'M' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800' :
-                    status === 'A' ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 border-green-200 dark:border-green-800' :
-                    status === 'D' ? 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 border-red-200 dark:border-red-800' :
-                    'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 border-gray-300 dark:border-gray-600'
+                <span
+                  className={`inline-flex items-center justify-center w-5 h-5 rounded text-[10px] font-bold border ${
+                    status === 'M' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800/50' :
+                    status === 'A' ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300 border-green-200 dark:border-green-800/50' :
+                    status === 'D' ? 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300 border-red-200 dark:border-red-800/50' :
+                    'bg-muted text-muted-foreground border-border'
                  }`}
                >
                  {status}
                </span>
-                <span className="text-sm font-medium text-gray-900 dark:text-white">
+                <span className="text-sm font-medium text-foreground">
                  {getStatusLabel(status)}
                </span>
              </div>
@@ -794,7 +792,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                    e.stopPropagation();
                    setWrapText(!wrapText);
                  }}
-                  className="text-xs text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  title={wrapText ? "Switch to horizontal scroll" : "Switch to text wrap"}
                >
                  {wrapText ? '↔️ Scroll' : '↩️ Wrap'}
@@ -811,7 +809,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {

  if (!selectedProject) {
    return (
-      <div className="h-full flex items-center justify-center text-gray-500 dark:text-gray-400">
+      <div className="h-full flex items-center justify-center text-muted-foreground">
        <p>Select a project to view source control</p>
      </div>
    );
@@ -820,13 +818,13 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
  return (
    <div className="h-full flex flex-col bg-background">
      {/* Header */}
-      <div className={`flex items-center justify-between border-b border-gray-200 dark:border-gray-700 ${isMobile ? 'px-3 py-2' : 'px-4 py-3'}`}>
+      <div className={`flex items-center justify-between border-b border-border/60 ${isMobile ? 'px-3 py-2' : 'px-4 py-3'}`}>
        <div className="relative" ref={dropdownRef}>
          <button
            onClick={() => setShowBranchDropdown(!showBranchDropdown)}
-            className={`flex items-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors ${isMobile ? 'space-x-1 px-2 py-1' : 'space-x-2 px-3 py-1.5'}`}
+            className={`flex items-center hover:bg-accent rounded-lg transition-colors ${isMobile ? 'space-x-1 px-2 py-1' : 'space-x-2 px-3 py-1.5'}`}
          >
-            <GitBranch className={`text-gray-600 dark:text-gray-400 ${isMobile ? 'w-3 h-3' : 'w-4 h-4'}`} />
+            <GitBranch className={`text-muted-foreground ${isMobile ? 'w-3 h-3' : 'w-4 h-4'}`} />
            <div className="flex items-center gap-1">
              <span className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>{currentBranch}</span>
              {/* Remote status indicators */}
@@ -838,47 +836,47 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                    </span>
                  )}
                  {remoteStatus.behind > 0 && (
-                    <span className="text-blue-600 dark:text-blue-400" title={`${remoteStatus.behind} commit${remoteStatus.behind !== 1 ? 's' : ''} behind`}>
+                    <span className="text-primary" title={`${remoteStatus.behind} commit${remoteStatus.behind !== 1 ? 's' : ''} behind`}>
                      ↓{remoteStatus.behind}
                    </span>
                  )}
                  {remoteStatus.isUpToDate && (
-                    <span className="text-gray-500 dark:text-gray-400" title="Up to date with remote">
+                    <span className="text-muted-foreground" title="Up to date with remote">
                      ✓
                    </span>
                  )}
                </div>
              )}
            </div>
-            <ChevronDown className={`w-3 h-3 text-gray-500 transition-transform ${showBranchDropdown ? 'rotate-180' : ''}`} />
+            <ChevronDown className={`w-3 h-3 text-muted-foreground transition-transform ${showBranchDropdown ? 'rotate-180' : ''}`} />
          </button>
-          
+
          {/* Branch Dropdown */}
          {showBranchDropdown && (
-            <div className="absolute top-full left-0 mt-1 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+            <div className="absolute top-full left-0 mt-1 w-64 bg-card rounded-xl shadow-lg border border-border z-50 overflow-hidden">
              <div className="py-1 max-h-64 overflow-y-auto">
                {branches.map(branch => (
                  <button
                    key={branch}
                    onClick={() => switchBranch(branch)}
-                    className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 ${
-                      branch === currentBranch ? 'bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100' : 'text-gray-700 dark:text-gray-300'
+                    className={`w-full text-left px-4 py-2 text-sm hover:bg-accent transition-colors ${
+                      branch === currentBranch ? 'bg-accent/50 text-foreground' : 'text-muted-foreground'
                    }`}
                  >
                    <div className="flex items-center space-x-2">
-                      {branch === currentBranch && <Check className="w-3 h-3 text-green-600 dark:text-green-400" />}
+                      {branch === currentBranch && <Check className="w-3 h-3 text-primary" />}
                      <span className={branch === currentBranch ? 'font-medium' : ''}>{branch}</span>
                    </div>
                  </button>
                ))}
              </div>
-              <div className="border-t border-gray-200 dark:border-gray-700 py-1">
+              <div className="border-t border-border py-1">
                <button
                  onClick={() => {
                    setShowNewBranchModal(true);
                    setShowBranchDropdown(false);
                  }}
-                  className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center space-x-2"
+                  className="w-full text-left px-4 py-2 text-sm hover:bg-accent transition-colors flex items-center space-x-2"
                >
                  <Plus className="w-3 h-3" />
                  <span>Create new branch</span>
@@ -895,12 +893,12 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
              {/* Publish button - show when branch doesn't exist on remote */}
              {!remoteStatus?.hasUpstream && (
                <button
-                  onClick={() => setConfirmAction({ 
-                    type: 'publish', 
-                    message: `Publish branch "${currentBranch}" to ${remoteStatus.remoteName}?` 
+                  onClick={() => setConfirmAction({
+                    type: 'publish',
+                    message: `Publish branch "${currentBranch}" to ${remoteStatus.remoteName}?`
                  })}
                  disabled={isPublishing}
-                  className="px-2 py-1 text-xs bg-purple-600 text-white rounded hover:bg-purple-700 disabled:opacity-50 flex items-center gap-1"
+                  className="px-2.5 py-1 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 flex items-center gap-1 transition-colors"
                  title={`Publish branch "${currentBranch}" to ${remoteStatus.remoteName}`}
                >
                  <Upload className={`w-3 h-3 ${isPublishing ? 'animate-pulse' : ''}`} />
@@ -914,41 +912,41 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                  {/* Pull button - show when behind (primary action) */}
                  {remoteStatus.behind > 0 && (
                    <button
-                      onClick={() => setConfirmAction({ 
-                        type: 'pull', 
-                        message: `Pull ${remoteStatus.behind} commit${remoteStatus.behind !== 1 ? 's' : ''} from ${remoteStatus.remoteName}?` 
+                      onClick={() => setConfirmAction({
+                        type: 'pull',
+                        message: `Pull ${remoteStatus.behind} commit${remoteStatus.behind !== 1 ? 's' : ''} from ${remoteStatus.remoteName}?`
                      })}
                      disabled={isPulling}
-                      className="px-2 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50 flex items-center gap-1"
+                      className="px-2.5 py-1 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 flex items-center gap-1 transition-colors"
                      title={`Pull ${remoteStatus.behind} commit${remoteStatus.behind !== 1 ? 's' : ''} from ${remoteStatus.remoteName}`}
                    >
                      <Download className={`w-3 h-3 ${isPulling ? 'animate-pulse' : ''}`} />
                      <span>{isPulling ? 'Pulling...' : `Pull ${remoteStatus.behind}`}</span>
                    </button>
                  )}
-                  
+
                  {/* Push button - show when ahead (primary action when ahead only) */}
                  {remoteStatus.ahead > 0 && (
                    <button
-                      onClick={() => setConfirmAction({ 
-                        type: 'push', 
-                        message: `Push ${remoteStatus.ahead} commit${remoteStatus.ahead !== 1 ? 's' : ''} to ${remoteStatus.remoteName}?` 
+                      onClick={() => setConfirmAction({
+                        type: 'push',
+                        message: `Push ${remoteStatus.ahead} commit${remoteStatus.ahead !== 1 ? 's' : ''} to ${remoteStatus.remoteName}?`
                      })}
                      disabled={isPushing}
-                      className="px-2 py-1 text-xs bg-orange-600 text-white rounded hover:bg-orange-700 disabled:opacity-50 flex items-center gap-1"
+                      className="px-2.5 py-1 text-sm bg-orange-600 text-white rounded-lg hover:bg-orange-700 disabled:opacity-50 flex items-center gap-1 transition-colors"
                      title={`Push ${remoteStatus.ahead} commit${remoteStatus.ahead !== 1 ? 's' : ''} to ${remoteStatus.remoteName}`}
                    >
                      <Upload className={`w-3 h-3 ${isPushing ? 'animate-pulse' : ''}`} />
                      <span>{isPushing ? 'Pushing...' : `Push ${remoteStatus.ahead}`}</span>
                    </button>
                  )}
-                  
+
                  {/* Fetch button - show when ahead only or when diverged (secondary action) */}
                  {(remoteStatus.ahead > 0 || (remoteStatus.behind > 0 && remoteStatus.ahead > 0)) && (
                    <button
                      onClick={handleFetch}
                      disabled={isFetching}
-                      className="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 flex items-center gap-1"
+                      className="px-2.5 py-1 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 flex items-center gap-1 transition-colors"
                      title={`Fetch from ${remoteStatus.remoteName}`}
                    >
                      <RefreshCw className={`w-3 h-3 ${isFetching ? 'animate-spin' : ''}`} />
@@ -967,42 +965,43 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
              fetchRemoteStatus();
            }}
            disabled={isLoading}
-            className={`hover:bg-gray-100 dark:hover:bg-gray-800 rounded ${isMobile ? 'p-1' : 'p-1.5'}`}
+            className={`hover:bg-accent rounded-lg transition-colors ${isMobile ? 'p-1' : 'p-1.5'}`}
          >
-            <RefreshCw className={`${isLoading ? 'animate-spin' : ''} ${isMobile ? 'w-3 h-3' : 'w-4 h-4'}`} />
+            <RefreshCw className={`text-muted-foreground ${isLoading ? 'animate-spin' : ''} ${isMobile ? 'w-3 h-3' : 'w-4 h-4'}`} />
          </button>
        </div>
      </div>

      {/* Git Repository Not Found Message */}
      {gitStatus?.error ? (
-        <div className="flex-1 flex flex-col items-center justify-center text-gray-500 dark:text-gray-400 px-6 py-12">
-          <GitBranch className="w-20 h-20 mb-6 opacity-30" />
-          <h3 className="text-xl font-medium mb-3 text-center">{gitStatus.error}</h3>
+        <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground px-6 py-12">
+          <div className="w-16 h-16 rounded-2xl bg-muted/50 flex items-center justify-center mb-6">
+            <GitBranch className="w-8 h-8 opacity-40" />
+          </div>
+          <h3 className="text-lg font-medium mb-3 text-center text-foreground">{gitStatus.error}</h3>
          {gitStatus.details && (
            <p className="text-sm text-center leading-relaxed mb-6 max-w-md">{gitStatus.details}</p>
          )}
-          {/* // ! This can be a custom component that can be reused for " Tip: Create a new project..." as well */}
-          <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 max-w-md">
-            <p className="text-sm text-blue-700 dark:text-blue-300 text-center">
-              <strong>Tip:</strong> Run <code className="bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded font-mono text-xs">git init</code> in your project directory to initialize git source control.
+          <div className="p-4 bg-primary/5 rounded-xl border border-primary/10 max-w-md">
+            <p className="text-sm text-primary text-center">
+              <strong>Tip:</strong> Run <code className="bg-primary/10 px-2 py-1 rounded-md font-mono text-xs">git init</code> in your project directory to initialize git source control.
            </p>
          </div>
        </div>
      ) : (
        <>
          {/* Tab Navigation - Only show when git is available and no files expanded */}
-          <div className={`flex border-b border-gray-200 dark:border-gray-700 transition-all duration-300 ease-in-out ${
-            expandedFiles.size === 0 
-              ? 'max-h-16 opacity-100 translate-y-0' 
+          <div className={`flex border-b border-border/60 transition-all duration-300 ease-in-out ${
+            expandedFiles.size === 0
+              ? 'max-h-16 opacity-100 translate-y-0'
              : 'max-h-0 opacity-0 -translate-y-2 overflow-hidden'
          }`}>
            <button
              onClick={() => setActiveView('changes')}
              className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
                activeView === 'changes'
-                  ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+                  ? 'text-primary border-b-2 border-primary'
+                  : 'text-muted-foreground hover:text-foreground'
              }`}
            >
              <div className="flex items-center justify-center gap-2">
@@ -1014,8 +1013,8 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
              onClick={() => setActiveView('history')}
              className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
                activeView === 'history'
-                  ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+                  ? 'text-primary border-b-2 border-primary'
+                  : 'text-muted-foreground hover:text-foreground'
              }`}
            >
              <div className="flex items-center justify-center gap-2">
@@ -1035,10 +1034,10 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                  : 'max-h-0 opacity-0 -translate-y-2 overflow-hidden'
              }`}>
                {isMobile && isCommitAreaCollapsed ? (
-                  <div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
+                  <div className="px-4 py-2 border-b border-border/60">
                      <button
                        onClick={() => setIsCommitAreaCollapsed(false)}
-                        className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700"
+                        className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
                      >
                        <GitCommit className="w-4 h-4" />
                        <span>Commit {selectedFiles.size} file{selectedFiles.size !== 1 ? 's' : ''}</span>
@@ -1048,27 +1047,27 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                  ) : (
                <>
                  {/* Commit Message Input */}
-                  <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+                  <div className="px-4 py-3 border-b border-border/60">
                    {/* Mobile collapse button */}
                    {isMobile && (
                      <div className="flex items-center justify-between mb-2">
-                        <span className="text-sm font-medium">Commit Changes</span>
+                        <span className="text-sm font-medium text-foreground">Commit Changes</span>
                        <button
                          onClick={() => setIsCommitAreaCollapsed(true)}
-                          className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
+                          className="p-1 hover:bg-accent rounded-lg transition-colors"
                        >
                          <ChevronDown className="w-4 h-4 rotate-180" />
                        </button>
                      </div>
                    )}
-                    
+
                    <div className="relative">
                      <textarea
                        ref={textareaRef}
                        value={commitMessage}
                        onChange={(e) => setCommitMessage(e.target.value)}
                        placeholder="Message (Ctrl+Enter to commit)"
-                        className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 resize-none pr-20"
+                        className="w-full px-3 py-2 text-sm border border-border rounded-xl bg-background text-foreground placeholder:text-muted-foreground resize-none pr-20 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30"
                        rows="3"
                        onKeyDown={(e) => {
                          if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
@@ -1080,7 +1079,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                        <button
                          onClick={generateCommitMessage}
                          disabled={selectedFiles.size === 0 || isGeneratingMessage}
-                          className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
+                          className="p-1.5 text-muted-foreground hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                          title="Generate commit message"
                        >
                          {isGeneratingMessage ? (
@@ -1099,16 +1098,16 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                      </div>
                    </div>
                    <div className="flex items-center justify-between mt-2">
-                      <span className="text-xs text-gray-500">
+                      <span className="text-sm text-muted-foreground">
                        {selectedFiles.size} file{selectedFiles.size !== 1 ? 's' : ''} selected
                      </span>
                      <button
-                        onClick={() => setConfirmAction({ 
-                          type: 'commit', 
-                          message: `Commit ${selectedFiles.size} file${selectedFiles.size !== 1 ? 's' : ''} with message: "${commitMessage.trim()}"?` 
+                        onClick={() => setConfirmAction({
+                          type: 'commit',
+                          message: `Commit ${selectedFiles.size} file${selectedFiles.size !== 1 ? 's' : ''} with message: "${commitMessage.trim()}"?`
                        })}
                        disabled={!commitMessage.trim() || selectedFiles.size === 0 || isCommitting}
-                        className="px-3 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-1"
+                        className="px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-1 transition-colors"
                      >
                        <Check className="w-3 h-3" />
                        <span>{isCommitting ? 'Committing...' : 'Commit'}</span>
@@ -1123,12 +1122,12 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {

          {/* File Selection Controls - Only show in changes view and when git is working and no files expanded */}
          {activeView === 'changes' && gitStatus && !gitStatus.error && (
-            <div className={`border-b border-gray-200 dark:border-gray-700 flex items-center justify-between transition-all duration-300 ease-in-out ${isMobile ? 'px-3 py-1.5' : 'px-4 py-2'} ${
-              expandedFiles.size === 0 
-                ? 'max-h-16 opacity-100 translate-y-0' 
+            <div className={`border-b border-border/60 flex items-center justify-between transition-all duration-300 ease-in-out ${isMobile ? 'px-3 py-1.5' : 'px-4 py-2'} ${
+              expandedFiles.size === 0
+                ? 'max-h-16 opacity-100 translate-y-0'
                : 'max-h-0 opacity-0 -translate-y-2 overflow-hidden'
            }`}>
-              <span className={`text-gray-600 dark:text-gray-400 ${isMobile ? 'text-xs' : 'text-xs'}`}>
+              <span className="text-sm text-muted-foreground">
                {selectedFiles.size} of {(gitStatus?.modified?.length || 0) + (gitStatus?.added?.length || 0) + (gitStatus?.deleted?.length || 0) + (gitStatus?.untracked?.length || 0)} {isMobile ? '' : 'files'} selected
              </span>
              <div className={`flex ${isMobile ? 'gap-1' : 'gap-2'}`}>
@@ -1142,14 +1141,14 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                    ]);
                    setSelectedFiles(allFiles);
                  }}
-                  className={`text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 ${isMobile ? 'text-xs' : 'text-xs'}`}
+                  className="text-sm text-primary hover:text-primary/80 transition-colors"
                >
                  {isMobile ? 'All' : 'Select All'}
                </button>
-                <span className="text-gray-300 dark:text-gray-600">|</span>
+                <span className="text-border">|</span>
                <button
                  onClick={() => setSelectedFiles(new Set())}
-                  className={`text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 ${isMobile ? 'text-xs' : 'text-xs'}`}
+                  className="text-sm text-primary hover:text-primary/80 transition-colors"
                >
                  {isMobile ? 'None' : 'Deselect All'}
                </button>
@@ -1159,42 +1158,42 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {

          {/* Status Legend Toggle - Hide on mobile by default */}
          {!gitStatus?.error && !isMobile && (
-            <div className="border-b border-gray-200 dark:border-gray-700">
+            <div className="border-b border-border/60">
              <button
                onClick={() => setShowLegend(!showLegend)}
-                className="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-750 text-xs text-gray-600 dark:text-gray-400 flex items-center justify-center gap-1"
+                className="w-full px-4 py-2 bg-muted/30 hover:bg-muted/50 text-sm text-muted-foreground flex items-center justify-center gap-1 transition-colors"
              >
                <Info className="w-3 h-3" />
                <span>File Status Guide</span>
                {showLegend ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
              </button>
-              
+
              {showLegend && (
-                <div className="px-4 py-3 bg-gray-50 dark:bg-gray-800 text-xs">
+                <div className="px-4 py-3 bg-muted/30 text-sm">
                  <div className={`${isMobile ? 'grid grid-cols-2 gap-3 justify-items-center' : 'flex justify-center gap-6'}`}>
                    <div className="flex items-center gap-2">
-                      <span className="inline-flex items-center justify-center w-5 h-5 bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300 rounded border border-yellow-200 dark:border-yellow-800 font-bold text-xs">
+                      <span className="inline-flex items-center justify-center w-5 h-5 bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300 rounded border border-yellow-200 dark:border-yellow-800/50 font-bold text-[10px]">
                        M
                      </span>
-                      <span className="text-gray-600 dark:text-gray-400 italic">Modified</span>
+                      <span className="text-muted-foreground italic">Modified</span>
                    </div>
                    <div className="flex items-center gap-2">
-                      <span className="inline-flex items-center justify-center w-5 h-5 bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 rounded border border-green-200 dark:border-green-800 font-bold text-xs">
+                      <span className="inline-flex items-center justify-center w-5 h-5 bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300 rounded border border-green-200 dark:border-green-800/50 font-bold text-[10px]">
                        A
                      </span>
-                      <span className="text-gray-600 dark:text-gray-400 italic">Added</span>
+                      <span className="text-muted-foreground italic">Added</span>
                    </div>
                    <div className="flex items-center gap-2">
-                      <span className="inline-flex items-center justify-center w-5 h-5 bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 rounded border border-red-200 dark:border-red-800 font-bold text-xs">
+                      <span className="inline-flex items-center justify-center w-5 h-5 bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300 rounded border border-red-200 dark:border-red-800/50 font-bold text-[10px]">
                        D
                      </span>
-                      <span className="text-gray-600 dark:text-gray-400 italic">Deleted</span>
+                      <span className="text-muted-foreground italic">Deleted</span>
                    </div>
                    <div className="flex items-center gap-2">
-                      <span className="inline-flex items-center justify-center w-5 h-5 bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 rounded border border-gray-300 dark:border-gray-600 font-bold text-xs">
+                      <span className="inline-flex items-center justify-center w-5 h-5 bg-muted text-muted-foreground rounded border border-border font-bold text-[10px]">
                        U
                      </span>
-                      <span className="text-gray-600 dark:text-gray-400 italic">Untracked</span>
+                      <span className="text-muted-foreground italic">Untracked</span>
                    </div>
                  </div>
                </div>
@@ -1209,19 +1208,21 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
        <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-mobile-nav' : ''}`}>
          {isLoading ? (
            <div className="flex items-center justify-center h-32">
-              <RefreshCw className="w-6 h-6 animate-spin text-gray-400" />
+              <RefreshCw className="w-5 h-5 animate-spin text-muted-foreground" />
            </div>
          ) : gitStatus?.hasCommits === false ? (
            <div className="flex flex-col items-center justify-center p-8 text-center">
-              <GitBranch className="w-16 h-16 mb-4 opacity-30 text-gray-400 dark:text-gray-500" />
-              <h3 className="text-lg font-medium mb-2 text-gray-900 dark:text-white">No commits yet</h3>
-              <p className="text-sm text-gray-500 dark:text-gray-400 mb-6 max-w-md">
+              <div className="w-14 h-14 rounded-2xl bg-muted/50 flex items-center justify-center mb-4">
+                <GitBranch className="w-7 h-7 text-muted-foreground/50" />
+              </div>
+              <h3 className="text-lg font-medium mb-2 text-foreground">No commits yet</h3>
+              <p className="text-sm text-muted-foreground mb-6 max-w-md">
                This repository doesn't have any commits yet. Create your first commit to start tracking changes.
              </p>
              <button
                onClick={createInitialCommit}
                disabled={isCreatingInitialCommit}
-                className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+                className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors"
              >
                {isCreatingInitialCommit ? (
                  <>
@@ -1237,8 +1238,8 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
              </button>
            </div>
          ) : !gitStatus || (!gitStatus.modified?.length && !gitStatus.added?.length && !gitStatus.deleted?.length && !gitStatus.untracked?.length) ? (
-            <div className="flex flex-col items-center justify-center h-32 text-gray-500 dark:text-gray-400">
-              <GitCommit className="w-12 h-12 mb-2 opacity-50" />
+            <div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
+              <GitCommit className="w-10 h-10 mb-2 opacity-40" />
              <p className="text-sm">No changes detected</p>
            </div>
          ) : (
@@ -1257,11 +1258,11 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
        <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-mobile-nav' : ''}`}>
          {isLoading ? (
            <div className="flex items-center justify-center h-32">
-              <RefreshCw className="w-6 h-6 animate-spin text-gray-400" />
+              <RefreshCw className="w-5 h-5 animate-spin text-muted-foreground" />
            </div>
          ) : recentCommits.length === 0 ? (
-            <div className="flex flex-col items-center justify-center h-32 text-gray-500 dark:text-gray-400">
-              <History className="w-12 h-12 mb-2 opacity-50" />
+            <div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
+              <History className="w-10 h-10 mb-2 opacity-40" />
              <p className="text-sm">No commits found</p>
            </div>
          ) : (
@@ -1275,12 +1276,12 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
      {/* New Branch Modal */}
      {showNewBranchModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-          <div className="fixed inset-0 bg-black bg-opacity-50" onClick={() => setShowNewBranchModal(false)} />
-          <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full">
+          <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setShowNewBranchModal(false)} />
+          <div className="relative bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden">
            <div className="p-6">
-              <h3 className="text-lg font-semibold mb-4">Create New Branch</h3>
+              <h3 className="text-lg font-semibold text-foreground mb-4">Create New Branch</h3>
              <div className="mb-4">
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <label className="block text-sm font-medium text-foreground/80 mb-2">
                  Branch Name
                </label>
                <input
@@ -1293,11 +1294,11 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                    }
                  }}
                  placeholder="feature/new-feature"
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full px-3 py-2 border border-border rounded-xl bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30"
                  autoFocus
                />
              </div>
-              <div className="text-xs text-gray-500 dark:text-gray-400 mb-4">
+              <div className="text-sm text-muted-foreground mb-4">
                This will create a new branch from the current branch ({currentBranch})
              </div>
              <div className="flex justify-end space-x-3">
@@ -1306,14 +1307,14 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                    setShowNewBranchModal(false);
                    setNewBranchName('');
                  }}
-                  className="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md"
+                  className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
                >
                  Cancel
                </button>
                <button
                  onClick={createBranch}
                  disabled={!newBranchName.trim() || isCreatingBranch}
-                  className="px-4 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
+                  className="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2 transition-colors"
                >
                  {isCreatingBranch ? (
                    <>
@@ -1336,44 +1337,44 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
      {/* Confirmation Modal */}
      {confirmAction && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-          <div className="fixed inset-0 bg-black bg-opacity-50" onClick={() => setConfirmAction(null)} />
-          <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full">
+          <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setConfirmAction(null)} />
+          <div className="relative bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden">
            <div className="p-6">
              <div className="flex items-center mb-4">
                <div className={`p-2 rounded-full mr-3 ${
-                  (confirmAction.type === 'discard' || confirmAction.type === 'delete') ? 'bg-red-100 dark:bg-red-900' : 'bg-yellow-100 dark:bg-yellow-900'
+                  (confirmAction.type === 'discard' || confirmAction.type === 'delete') ? 'bg-red-100 dark:bg-red-900/30' : 'bg-yellow-100 dark:bg-yellow-900/30'
                }`}>
                  <AlertTriangle className={`w-5 h-5 ${
                    (confirmAction.type === 'discard' || confirmAction.type === 'delete') ? 'text-red-600 dark:text-red-400' : 'text-yellow-600 dark:text-yellow-400'
                  }`} />
                </div>
-                <h3 className="text-lg font-semibold">
-                  {confirmAction.type === 'discard' ? 'Discard Changes' : 
+                <h3 className="text-lg font-semibold text-foreground">
+                  {confirmAction.type === 'discard' ? 'Discard Changes' :
                   confirmAction.type === 'delete' ? 'Delete File' :
-                   confirmAction.type === 'commit' ? 'Confirm Commit' : 
-                   confirmAction.type === 'pull' ? 'Confirm Pull' : 
+                   confirmAction.type === 'commit' ? 'Confirm Commit' :
+                   confirmAction.type === 'pull' ? 'Confirm Pull' :
                   confirmAction.type === 'publish' ? 'Publish Branch' : 'Confirm Push'}
                </h3>
              </div>
-              
-              <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
+
+              <p className="text-sm text-muted-foreground mb-6">
                {confirmAction.message}
              </p>
-              
+
              <div className="flex justify-end space-x-3">
                <button
                  onClick={() => setConfirmAction(null)}
-                  className="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md"
+                  className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
                >
                  Cancel
                </button>
                <button
                  onClick={confirmAndExecute}
-                  className={`px-4 py-2 text-sm text-white rounded-md ${
+                  className={`px-4 py-2 text-sm text-white rounded-lg transition-colors ${
                    (confirmAction.type === 'discard' || confirmAction.type === 'delete')
-                      ? 'bg-red-600 hover:bg-red-700' 
+                      ? 'bg-red-600 hover:bg-red-700'
                      : confirmAction.type === 'commit'
-                      ? 'bg-blue-600 hover:bg-blue-700'
+                      ? 'bg-primary hover:bg-primary/90'
                      : confirmAction.type === 'pull'
                      ? 'bg-green-600 hover:bg-green-700'
                      : confirmAction.type === 'publish'
--- a/src/components/LoginModal.jsx
+++ b/src/components/LoginModal.jsx
@@ -21,7 +21,8 @@ function LoginModal({
  project,
  onComplete,
  customCommand,
-  isAuthenticated = false
+  isAuthenticated = false,
+  isOnboarding = false
 }) {
  if (!isOpen) return null;

@@ -30,13 +31,13 @@ function LoginModal({

    switch (provider) {
      case 'claude':
-        return isAuthenticated ? 'claude setup-token --dangerously-skip-permissions' : 'claude /exit --dangerously-skip-permissions';
+        return isAuthenticated ? 'claude setup-token --dangerously-skip-permissions' : isOnboarding ? 'claude /exit --dangerously-skip-permissions' : 'claude /login --dangerously-skip-permissions';
      case 'cursor':
        return 'cursor-agent login';
      case 'codex':
        return IS_PLATFORM ? 'codex login --device-auth' : 'codex login';
      default:
-        return isAuthenticated ? 'claude setup-token --dangerously-skip-permissions' : 'claude /exit --dangerously-skip-permissions';
+        return isAuthenticated ? 'claude setup-token --dangerously-skip-permissions' : isOnboarding ? 'claude /exit --dangerously-skip-permissions' : 'claude /login --dangerously-skip-permissions';
    }
  };

--- 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/Onboarding.jsx
+++ b/src/components/Onboarding.jsx
@@ -577,6 +577,7 @@ const Onboarding = ({ onComplete }) => {
          provider={activeLoginProvider}
          project={selectedProject}
          onComplete={handleLoginComplete}
+          isOnboarding={true}
        />
      )}
    </>
--- 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
@@ -162,7 +162,7 @@ function Shell({ selectedProject, selectedSession, initialCommand, isPlainShell
              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'),
+              provider: isPlainShellRef.current ? 'plain-shell' : (selectedSessionRef.current?.__provider || localStorage.getItem('selected-provider') || 'claude'),
              cols: terminal.current.cols,
              rows: terminal.current.rows,
              initialCommand: initialCommandRef.current,
--- a/src/components/TaskList.jsx
+++ b/src/components/TaskList.jsx
@@ -6,6 +6,7 @@ import CreateTaskModal from './CreateTaskModal';
 import { useTaskMaster } from '../contexts/TaskMasterContext';
 import Shell from './Shell';
 import { api } from '../utils/api';
+import { useTranslation } from 'react-i18next';

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

  // Close PRD dropdown when clicking outside
  useEffect(() => {
@@ -143,45 +145,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 +201,7 @@ const TaskList = ({
      ...column,
      tasks: filteredAndSortedTasks.filter(task => task.status === column.status)
    }));
-  }, [filteredAndSortedTasks]);
+  }, [filteredAndSortedTasks, t]);

  const handleSortChange = (newSortBy) => {
    if (sortBy === newSortBy) {
@@ -236,26 +238,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 +266,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 +278,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 +289,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,13 +298,13 @@ 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
@@ -341,8 +343,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 +352,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 +361,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 +378,7 @@ const TaskList = ({
                    style={{ zIndex: 10 }}
                  >
                    <FileText className="w-4 h-4" />
-                    Add PRD
+                    {t('buttons.addPRD')}
                  </button>
                </div>
              </div>
@@ -384,7 +386,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 +403,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 +466,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 +487,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 +512,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 +531,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 +539,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 +551,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 +572,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,7 +583,7 @@ 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>
@@ -594,16 +596,16 @@ const TaskList = ({
                    <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,10 +617,10 @@ 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}
@@ -639,7 +641,7 @@ const TaskList = ({
                                }
                              }}
                              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 +658,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 +671,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 +689,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 +708,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 +727,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 +738,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 +753,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 +771,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 +807,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 +846,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 +913,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 +932,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 +942,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 +951,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 +965,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 +979,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 +992,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>
--- a/src/components/app/AppContent.tsx
+++ b/src/components/app/AppContent.tsx
@@ -74,7 +74,7 @@ export default function AppContent() {
  return (
    <div className="fixed inset-0 flex bg-background">
      {!isMobile ? (
-        <div className="h-full flex-shrink-0 border-r border-border bg-card">
+        <div className="h-full flex-shrink-0 border-r border-border/50">
          <Sidebar {...sidebarSharedProps} />
        </div>
      ) : (
@@ -83,7 +83,7 @@ export default function AppContent() {
            }`}
        >
          <button
-            className="fixed inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-150 ease-out"
+            className="fixed inset-0 bg-background/60 backdrop-blur-sm transition-opacity duration-150 ease-out"
            onClick={(event) => {
              event.stopPropagation();
              setSidebarOpen(false);
@@ -96,7 +96,7 @@ export default function AppContent() {
            aria-label={t('versionUpdate.ariaLabels.closeSidebar')}
          />
          <div
-            className={`relative w-[85vw] max-w-sm sm:w-80 h-full bg-card border-r border-border transform transition-transform duration-150 ease-out ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'
+            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()}
@@ -106,7 +106,7 @@ export default function AppContent() {
        </div>
      )}

-      <div className={`flex-1 flex flex-col min-w-0 ${isMobile && !isInputFocused ? 'pb-mobile-nav' : ''}`}>
+      <div className={`flex-1 flex flex-col min-w-0 ${isMobile ? 'pb-mobile-nav' : ''}`}>
        <MainContent
          selectedProject={selectedProject}
          selectedSession={selectedSession}
--- a/src/components/chat/hooks/useChatComposerState.ts
+++ b/src/components/chat/hooks/useChatComposerState.ts
@@ -271,13 +271,14 @@ export function useChatComposerState({
  }, [setChatMessages]);

  const executeCommand = useCallback(
-    async (command: SlashCommand) => {
+    async (command: SlashCommand, rawInput?: string) => {
      if (!command || !selectedProject) {
        return;
      }

      try {
-        const commandMatch = input.match(new RegExp(`${escapeRegExp(command.name)}\\s*(.*)`));
+        const effectiveInput = rawInput ?? input;
+        const commandMatch = effectiveInput.match(new RegExp(`${escapeRegExp(command.name)}\\s*(.*)`));
        const args =
          commandMatch && commandMatch[1] ? commandMatch[1].trim().split(/\s+/) : [];

@@ -351,6 +352,7 @@ export function useChatComposerState({
  );

  const {
+    slashCommands,
    slashCommandsCount,
    filteredCommands,
    frequentCommands,
@@ -473,6 +475,28 @@ export function useChatComposerState({
        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) {
@@ -639,6 +663,7 @@ export function useChatComposerState({
      codexModel,
      currentSessionId,
      cursorModel,
+      executeCommand,
      isLoading,
      onSessionActive,
      pendingViewSessionRef,
@@ -654,6 +679,7 @@ export function useChatComposerState({
      setClaudeStatus,
      setIsLoading,
      setIsUserScrolledUp,
+      slashCommands,
      thinkingMode,
    ],
  );
@@ -903,8 +929,11 @@ export function useChatComposerState({
    [sendMessage, setClaudeStatus, setPendingPermissionRequests],
  );

+  const [isInputFocused, setIsInputFocused] = useState(false);
+
  const handleInputFocusChange = useCallback(
    (focused: boolean) => {
+      setIsInputFocused(focused);
      onInputFocusChange?.(focused);
    },
    [onInputFocusChange],
@@ -953,5 +982,6 @@ export function useChatComposerState({
    handlePermissionDecision,
    handleGrantToolPermission,
    handleInputFocusChange,
+    isInputFocused,
  };
 }
--- a/src/components/chat/hooks/useChatRealtimeHandlers.ts
+++ b/src/components/chat/hooks/useChatRealtimeHandlers.ts
@@ -336,9 +336,43 @@ export function useChatRealtimeHandlers({
        }

        if (structuredMessageData && Array.isArray(structuredMessageData.content)) {
+          const parentToolUseId = rawStructuredData?.parentToolUseId;
+
          structuredMessageData.content.forEach((part: any) => {
            if (part.type === 'tool_use') {
              const toolInput = part.input ? JSON.stringify(part.input, null, 2) : '';
+
+              // Check if this is a child tool from a subagent
+              if (parentToolUseId) {
+                setChatMessages((previous) =>
+                  previous.map((message) => {
+                    if (message.toolId === parentToolUseId && message.isSubagentContainer) {
+                      const childTool = {
+                        toolId: part.id,
+                        toolName: part.name,
+                        toolInput: part.input,
+                        toolResult: null,
+                        timestamp: new Date(),
+                      };
+                      const existingChildren = message.subagentState?.childTools || [];
+                      return {
+                        ...message,
+                        subagentState: {
+                          childTools: [...existingChildren, childTool],
+                          currentToolIndex: existingChildren.length,
+                          isComplete: false,
+                        },
+                      };
+                    }
+                    return message;
+                  }),
+                );
+                return;
+              }
+
+              // Check if this is a Task tool (subagent container)
+              const isSubagentContainer = part.name === 'Task';
+
              setChatMessages((previous) => [
                ...previous,
                {
@@ -350,6 +384,10 @@ export function useChatRealtimeHandlers({
                  toolInput,
                  toolId: part.id,
                  toolResult: null,
+                  isSubagentContainer,
+                  subagentState: isSubagentContainer
+                    ? { childTools: [], currentToolIndex: -1, isComplete: false }
+                    : undefined,
                },
              ]);
              return;
@@ -382,6 +420,8 @@ export function useChatRealtimeHandlers({
        }

        if (structuredMessageData?.role === 'user' && Array.isArray(structuredMessageData.content)) {
+          const parentToolUseId = rawStructuredData?.parentToolUseId;
+
          structuredMessageData.content.forEach((part: any) => {
            if (part.type !== 'tool_result') {
              return;
@@ -389,8 +429,32 @@ export function useChatRealtimeHandlers({

            setChatMessages((previous) =>
              previous.map((message) => {
-                if (message.isToolUse && message.toolId === part.tool_use_id) {
+                // Handle child tool results (route to parent's subagentState)
+                if (parentToolUseId && message.toolId === parentToolUseId && message.isSubagentContainer) {
                  return {
+                    ...message,
+                    subagentState: {
+                      ...message.subagentState!,
+                      childTools: message.subagentState!.childTools.map((child) => {
+                        if (child.toolId === part.tool_use_id) {
+                          return {
+                            ...child,
+                            toolResult: {
+                              content: part.content,
+                              isError: part.is_error,
+                              timestamp: new Date(),
+                            },
+                          };
+                        }
+                        return child;
+                      }),
+                    },
+                  };
+                }
+
+                // Handle normal tool results (including parent Task tool completion)
+                if (message.isToolUse && message.toolId === part.tool_use_id) {
+                  const result = {
                    ...message,
                    toolResult: {
                      content: part.content,
@@ -398,6 +462,14 @@ export function useChatRealtimeHandlers({
                      timestamp: new Date(),
                    },
                  };
+                  // Mark subagent as complete when parent Task receives its result
+                  if (message.isSubagentContainer && message.subagentState) {
+                    result.subagentState = {
+                      ...message.subagentState,
+                      isComplete: true,
+                    };
+                  }
+                  return result;
                }
                return message;
              }),
--- a/src/components/chat/hooks/useChatSessionState.ts
+++ b/src/components/chat/hooks/useChatSessionState.ts
@@ -1,5 +1,6 @@
 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';
@@ -76,15 +77,22 @@ export function useChatSessionState({
  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(), []);

@@ -182,6 +190,15 @@ export function useChatSessionState({
    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) {
@@ -196,6 +213,7 @@ export function useChatSessionState({
      if (!container || isLoadingMoreRef.current || isLoadingMoreMessages) {
        return false;
      }
+      if (allMessagesLoadedRef.current) return false;
      if (!hasMoreMessages || !selectedSession || !selectedProject) {
        return false;
      }
@@ -245,23 +263,24 @@ export function useChatSessionState({
    const nearBottom = isNearBottom();
    setIsUserScrolledUp(!nearBottom);

-    const scrolledNearTop = container.scrollTop < 100;
-    if (!scrolledNearTop) {
-      topLoadLockRef.current = false;
-      return;
-    }
-
-    if (topLoadLockRef.current) {
-      // After a top-load restore, release the lock once user has moved away from absolute top.
-      if (container.scrollTop > 20) {
+    if (!allMessagesLoadedRef.current) {
+      const scrolledNearTop = container.scrollTop < 100;
+      if (!scrolledNearTop) {
        topLoadLockRef.current = false;
+        return;
      }
-      return;
-    }

-    const didLoad = await loadOlderMessages(container);
-    if (didLoad) {
-      topLoadLockRef.current = true;
+      if (topLoadLockRef.current) {
+        if (container.scrollTop > 20) {
+          topLoadLockRef.current = false;
+        }
+        return;
+      }
+
+      const didLoad = await loadOlderMessages(container);
+      if (didLoad) {
+        topLoadLockRef.current = true;
+      }
    }
  }, [isNearBottom, loadOlderMessages]);

@@ -322,6 +341,14 @@ export function useChatSessionState({
          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);

@@ -571,6 +598,106 @@ export function useChatSessionState({
    }
  }, [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);
  }, []);
@@ -599,11 +726,17 @@ export function useChatSessionState({
    visibleMessageCount,
    visibleMessages,
    loadEarlierMessages,
+    loadAllMessages,
+    allMessagesLoaded,
+    isLoadingAllMessages,
+    loadAllJustFinished,
+    showLoadAllOverlay,
    claudeStatus,
    setClaudeStatus,
    createDiff,
    scrollContainerRef,
    scrollToBottom,
+    scrollToBottomAndReset,
    isNearBottom,
    handleScroll,
    loadSessionMessages,
--- a/src/components/chat/hooks/useSlashCommands.ts
+++ b/src/components/chat/hooks/useSlashCommands.ts
@@ -22,7 +22,7 @@ interface UseSlashCommandsOptions {
  input: string;
  setInput: Dispatch<SetStateAction<string>>;
  textareaRef: RefObject<HTMLTextAreaElement>;
-  onExecuteCommand: (command: SlashCommand) => void | Promise<void>;
+  onExecuteCommand: (command: SlashCommand, rawInput?: string) => void | Promise<void>;
 }

 const getCommandHistoryKey = (projectName: string) => `command_history_${projectName}`;
--- a/src/components/chat/tools/ToolRenderer.tsx
+++ b/src/components/chat/tools/ToolRenderer.tsx
@@ -1,7 +1,8 @@
 import React, { memo, useMemo, useCallback } from 'react';
 import { getToolConfig } from './configs/toolConfigs';
-import { OneLineDisplay, CollapsibleDisplay, DiffViewer, MarkdownContent, FileListContent, TodoListContent, TaskListContent, TextContent } from './components';
+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;
@@ -21,6 +22,12 @@ interface ToolRendererProps {
  autoExpandTools?: boolean;
  showRawParameters?: boolean;
  rawToolInput?: string;
+  isSubagentContainer?: boolean;
+  subagentState?: {
+    childTools: SubagentChildTool[];
+    currentToolIndex: number;
+    isComplete: boolean;
+  };
 }

 function getToolCategory(toolName: string): string {
@@ -31,6 +38,7 @@ function getToolCategory(toolName: string): string {
  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';
 }

@@ -49,8 +57,24 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
  selectedProject,
  autoExpandTools = false,
  showRawParameters = false,
-  rawToolInput
+  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;

@@ -156,6 +180,15 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
        contentComponent = <TaskListContent content={contentProps.content || ''} />;
        break;

+      case 'question-answer':
+        contentComponent = (
+          <QuestionAnswerContent
+            questions={contentProps.questions || []}
+            answers={contentProps.answers || {}}
+          />
+        );
+        break;
+
      case 'text':
        contentComponent = (
          <TextContent
--- a/src/components/chat/tools/components/CollapsibleDisplay.tsx
+++ b/src/components/chat/tools/components/CollapsibleDisplay.tsx
@@ -23,6 +23,7 @@ const borderColorMap: Record<string, string> = {
  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',
 };

--- a/src/components/chat/tools/components/CollapsibleSection.tsx
+++ b/src/components/chat/tools/components/CollapsibleSection.tsx
@@ -24,7 +24,7 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
 }) => {
  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">
+      <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"
--- 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/index.ts
+++ b/src/components/chat/tools/components/ContentRenderers/index.ts
@@ -3,3 +3,4 @@ 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/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/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
@@ -2,4 +2,6 @@ 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
@@ -24,7 +24,7 @@ export interface ToolDisplayConfig {
    // Collapsible config
    title?: string | ((input: any) => string);
    defaultOpen?: boolean;
-    contentType?: 'diff' | 'markdown' | 'file-list' | 'todo-list' | 'text' | 'task';
+    contentType?: 'diff' | 'markdown' | 'file-list' | 'todo-list' | 'text' | 'task' | 'question-answer';
    getContentProps?: (input: any, helpers?: any) => any;
    actionButton?: 'file-button' | 'none';
  };
@@ -35,7 +35,7 @@ export interface ToolDisplayConfig {
    title?: string | ((result: any) => string);
    defaultOpen?: boolean;
    // Special result handlers
-    contentType?: 'markdown' | 'file-list' | 'todo-list' | 'text' | 'success-message' | 'task';
+    contentType?: 'markdown' | 'file-list' | 'todo-list' | 'text' | 'success-message' | 'task' | 'question-answer';
    getMessage?: (result: any) => string;
    getContentProps?: (result: any) => any;
  };
@@ -383,7 +383,7 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
        const description = input.description || 'Running task';
        return `Subagent / ${subagentType}: ${description}`;
      },
-      defaultOpen: true,
+      defaultOpen: false,
      contentType: 'markdown',
      getContentProps: (input) => {
        // If only prompt exists (and required fields), show just the prompt
@@ -424,28 +424,34 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
    },
    result: {
      type: 'collapsible',
-      title: (result) => {
-        // Check if result has content with type array (agent results often have this structure)
-        if (result && result.content && Array.isArray(result.content)) {
-          return 'Subagent Response';
-        }
-        return 'Subagent Result';
-      },
-      defaultOpen: true,
+      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(result.content)) {
-            const textContent = result.content
+          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' };
          }
-          // If content is already a string
-          return { content: String(result.content) };
+          return { content: String(content) };
        }
        // Fallback to string representation
        return { content: String(result || 'No response') };
@@ -453,6 +459,34 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
    }
  },

+  // ============================================================================
+  // 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
  // ============================================================================
--- a/src/components/chat/types/types.ts
+++ b/src/components/chat/types/types.ts
@@ -17,6 +17,14 @@ export interface ToolResult {
  [key: string]: unknown;
 }

+export interface SubagentChildTool {
+  toolId: string;
+  toolName: string;
+  toolInput: unknown;
+  toolResult?: ToolResult | null;
+  timestamp: Date;
+}
+
 export interface ChatMessage {
  type: string;
  content?: string;
@@ -32,6 +40,12 @@ export interface ChatMessage {
  toolResult?: ToolResult | null;
  toolId?: string;
  toolCallId?: string;
+  isSubagentContainer?: boolean;
+  subagentState?: {
+    childTools: SubagentChildTool[];
+    currentToolIndex: number;
+    isComplete: boolean;
+  };
  [key: string]: unknown;
 }

@@ -65,6 +79,18 @@ export interface PendingPermissionRequest {
  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;
--- a/src/components/chat/utils/messageTransforms.ts
+++ b/src/components/chat/utils/messageTransforms.ts
@@ -354,7 +354,7 @@ export const convertSessionMessages = (rawMessages: any[]): ChatMessage[] => {
  const converted: ChatMessage[] = [];
  const toolResults = new Map<
    string,
-    { content: unknown; isError: boolean; timestamp: Date; toolUseResult: unknown }
+    { content: unknown; isError: boolean; timestamp: Date; toolUseResult: unknown; subagentTools?: unknown[] }
  >();

  rawMessages.forEach((message) => {
@@ -368,6 +368,7 @@ export const convertSessionMessages = (rawMessages: any[]): ChatMessage[] => {
          isError: Boolean(part.is_error),
          timestamp: new Date(message.timestamp || Date.now()),
          toolUseResult: message.toolUseResult || null,
+          subagentTools: message.subagentTools,
        });
      });
    }
@@ -402,11 +403,26 @@ export const convertSessionMessages = (rawMessages: any[]): ChatMessage[] => {
        content.startsWith('[Request interrupted');

      if (!shouldSkip) {
-        converted.push({
-          type: 'user',
-          content: unescapeWithMathProtection(content),
-          timestamp: message.timestamp || new Date().toISOString(),
-        });
+        // 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;
    }
@@ -469,6 +485,22 @@ export const convertSessionMessages = (rawMessages: any[]): ChatMessage[] => {

          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: '',
@@ -476,6 +508,7 @@ export const convertSessionMessages = (rawMessages: any[]): ChatMessage[] => {
              isToolUse: true,
              toolName: part.name,
              toolInput: normalizeToolInput(part.input),
+              toolId: part.id,
              toolResult: toolResult
                ? {
                    content:
@@ -488,6 +521,14 @@ export const convertSessionMessages = (rawMessages: any[]): ChatMessage[] => {
                : 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,
            });
          }
        });
--- a/src/components/chat/view/ChatInterface.tsx
+++ b/src/components/chat/view/ChatInterface.tsx
@@ -96,11 +96,17 @@ function ChatInterface({
    visibleMessageCount,
    visibleMessages,
    loadEarlierMessages,
+    loadAllMessages,
+    allMessagesLoaded,
+    isLoadingAllMessages,
+    loadAllJustFinished,
+    showLoadAllOverlay,
    claudeStatus,
    setClaudeStatus,
    createDiff,
    scrollContainerRef,
    scrollToBottom,
+    scrollToBottomAndReset,
    handleScroll,
  } = useChatSessionState({
    selectedProject,
@@ -157,6 +163,7 @@ function ChatInterface({
    handlePermissionDecision,
    handleGrantToolPermission,
    handleInputFocusChange,
+    isInputFocused,
  } = useChatComposerState({
    selectedProject,
    selectedSession,
@@ -254,8 +261,8 @@ function ChatInterface({

    return (
      <div className="flex items-center justify-center h-full">
-        <div className="text-center text-gray-500 dark:text-gray-400">
-          <p>
+        <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}}',
@@ -297,6 +304,11 @@ function ChatInterface({
          visibleMessageCount={visibleMessageCount}
          visibleMessages={visibleMessages}
          loadEarlierMessages={loadEarlierMessages}
+          loadAllMessages={loadAllMessages}
+          allMessagesLoaded={allMessagesLoaded}
+          isLoadingAllMessages={isLoadingAllMessages}
+          loadAllJustFinished={loadAllJustFinished}
+          showLoadAllOverlay={showLoadAllOverlay}
          createDiff={createDiff}
          onFileOpen={onFileOpen}
          onShowSettings={onShowSettings}
@@ -327,7 +339,7 @@ function ChatInterface({
          onClearInput={handleClearInput}
          isUserScrolledUp={isUserScrolledUp}
          hasMessages={chatMessages.length > 0}
-          onScrollToBottom={scrollToBottom}
+          onScrollToBottom={scrollToBottomAndReset}
          onSubmit={handleSubmit}
          isDragActive={isDragActive}
          attachedImages={attachedImages}
@@ -362,6 +374,7 @@ function ChatInterface({
          onTextareaScrollSync={syncInputOverlayScroll}
          onTextareaInput={handleTextareaInput}
          onInputFocusChange={handleInputFocusChange}
+          isInputFocused={isInputFocused}
          placeholder={t('input.placeholder', {
            provider:
              provider === 'cursor'
--- a/src/components/chat/view/subcomponents/ChatComposer.tsx
+++ b/src/components/chat/view/subcomponents/ChatComposer.tsx
@@ -87,6 +87,7 @@ interface ChatComposerProps {
  onTextareaScrollSync: (target: HTMLTextAreaElement) => void;
  onTextareaInput: (event: FormEvent<HTMLTextAreaElement>) => void;
  onInputFocusChange?: (focused: boolean) => void;
+  isInputFocused?: boolean;
  placeholder: string;
  isTextareaExpanded: boolean;
  sendByCtrlEnter?: boolean;
@@ -143,6 +144,7 @@ export default function ChatComposer({
  onTextareaScrollSync,
  onTextareaInput,
  onInputFocusChange,
+  isInputFocused,
  placeholder,
  isTextareaExpanded,
  sendByCtrlEnter,
@@ -157,16 +159,28 @@ export default function ChatComposer({
    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">
-      <div className="flex-1">
-        <ClaudeStatus
-          status={claudeStatus}
-          isLoading={isLoading}
-          onAbort={onAbortSession}
-          provider={provider}
-        />
-      </div>
+    <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
@@ -175,7 +189,7 @@ export default function ChatComposer({
          handleGrantToolPermission={handleGrantToolPermission}
        />

-        <ChatInputControls
+        {!hasQuestionPanel && <ChatInputControls
          permissionMode={permissionMode}
          onModeSwitch={onModeSwitch}
          provider={provider}
@@ -189,14 +203,14 @@ export default function ChatComposer({
          isUserScrolledUp={isUserScrolledUp}
          hasMessages={hasMessages}
          onScrollToBottom={onScrollToBottom}
-        />
+        />}
      </div>

-      <form onSubmit={onSubmit as (event: FormEvent<HTMLFormElement>) => void} className="relative max-w-4xl mx-auto">
+      {!hasQuestionPanel && <form onSubmit={onSubmit as (event: FormEvent<HTMLFormElement>) => void} className="relative max-w-4xl mx-auto">
        {isDragActive && (
-          <div className="absolute inset-0 bg-blue-500/20 border-2 border-dashed border-blue-500 rounded-lg flex items-center justify-center z-50">
-            <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg">
-              <svg className="w-8 h-8 text-blue-500 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <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"
@@ -210,7 +224,7 @@ export default function ChatComposer({
        )}

        {attachedImages.length > 0 && (
-          <div className="mb-2 p-2 bg-gray-50 dark:bg-gray-800 rounded-lg">
+          <div className="mb-2 p-2 bg-muted/40 rounded-xl">
            <div className="flex flex-wrap gap-2">
              {attachedImages.map((file, index) => (
                <ImageAttachment
@@ -226,14 +240,14 @@ export default function ChatComposer({
        )}

        {showFileDropdown && filteredFiles.length > 0 && (
-          <div className="absolute bottom-full left-0 right-0 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg max-h-48 overflow-y-auto z-50 backdrop-blur-sm">
+          <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-gray-100 dark:border-gray-700 last:border-b-0 touch-manipulation ${
+                className={`px-4 py-3 cursor-pointer border-b border-border/30 last:border-b-0 touch-manipulation ${
                  index === selectedFileIndex
-                    ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
-                    : 'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
+                    ? 'bg-primary/8 text-primary'
+                    : 'hover:bg-accent/50 text-foreground'
                }`}
                onMouseDown={(event) => {
                  event.preventDefault();
@@ -246,7 +260,7 @@ export default function ChatComposer({
                }}
              >
                <div className="font-medium text-sm">{file.name}</div>
-                <div className="text-xs text-gray-500 dark:text-gray-400 font-mono">{file.path}</div>
+                <div className="text-xs text-muted-foreground font-mono">{file.path}</div>
              </div>
            ))}
          </div>
@@ -264,7 +278,7 @@ export default function ChatComposer({

        <div
          {...getRootProps()}
-          className={`relative bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-600 focus-within:ring-2 focus-within:ring-blue-500 dark:focus-within:ring-blue-500 focus-within:border-blue-500 transition-all duration-200 overflow-hidden ${
+          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' : ''
          }`}
        >
@@ -289,17 +303,17 @@ export default function ChatComposer({
              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-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 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"
+              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-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
+              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-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-5 h-5 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
@@ -324,15 +338,15 @@ export default function ChatComposer({
                event.preventDefault();
                onSubmit(event);
              }}
-              className="absolute right-2 top-1/2 transform -translate-y-1/2 w-12 h-12 sm:w-12 sm:h-12 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed rounded-full flex items-center justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:ring-offset-gray-800"
+              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-5 sm:h-5 text-white transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+              <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-gray-400 dark:text-gray-500 pointer-events-none hidden sm:block transition-opacity duration-200 ${
+              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'
              }`}
            >
@@ -340,7 +354,7 @@ export default function ChatComposer({
            </div>
          </div>
        </div>
-      </form>
+      </form>}
    </div>
  );
 }
--- a/src/components/chat/view/subcomponents/ChatInputControls.tsx
+++ b/src/components/chat/view/subcomponents/ChatInputControls.tsx
@@ -38,31 +38,31 @@ export default function ChatInputControls({
  const { t } = useTranslation('chat');

  return (
-    <div className="flex items-center justify-center gap-3">
+    <div className="flex items-center justify-center gap-2 sm:gap-3 flex-wrap">
      <button
        type="button"
        onClick={onModeSwitch}
-        className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-all duration-200 ${
+        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-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-600'
+            ? 'bg-muted/50 text-muted-foreground border-border/60 hover:bg-muted'
            : permissionMode === 'acceptEdits'
-              ? 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 border-green-300 dark:border-green-600 hover:bg-green-100 dark:hover:bg-green-900/30'
+              ? '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/20 text-orange-700 dark:text-orange-300 border-orange-300 dark:border-orange-600 hover:bg-orange-100 dark:hover:bg-orange-900/30'
-                : 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-600 hover:bg-blue-100 dark:hover:bg-blue-900/30'
+                ? '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-2">
+        <div className="flex items-center gap-1.5">
          <div
-            className={`w-2 h-2 rounded-full ${
+            className={`w-1.5 h-1.5 rounded-full ${
              permissionMode === 'default'
-                ? 'bg-gray-500'
+                ? 'bg-muted-foreground'
                : permissionMode === 'acceptEdits'
                  ? 'bg-green-500'
                  : permissionMode === 'bypassPermissions'
                    ? 'bg-orange-500'
-                    : 'bg-blue-500'
+                    : 'bg-primary'
            }`}
          />
          <span>
@@ -83,10 +83,10 @@ export default function ChatInputControls({
      <button
        type="button"
        onClick={onToggleCommandMenu}
-        className="relative w-8 h-8 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-full flex items-center justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:ring-offset-gray-800"
+        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-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <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"
@@ -96,8 +96,7 @@ export default function ChatInputControls({
        </svg>
        {slashCommandsCount > 0 && (
          <span
-            className="absolute -top-1 -right-1 bg-blue-600 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center"
-            style={{ fontSize: '10px' }}
+            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>
@@ -108,11 +107,11 @@ export default function ChatInputControls({
        <button
          type="button"
          onClick={onClearInput}
-          className="w-8 h-8 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-full flex items-center justify-center transition-all duration-200 group shadow-sm"
+          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-4 h-4 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100 transition-colors"
+            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"
@@ -125,10 +124,10 @@ export default function ChatInputControls({
      {isUserScrolledUp && hasMessages && (
        <button
          onClick={onScrollToBottom}
-          className="w-8 h-8 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-200 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:ring-offset-gray-800"
+          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-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <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>
--- a/src/components/chat/view/subcomponents/ChatMessagesPane.tsx
+++ b/src/components/chat/view/subcomponents/ChatMessagesPane.tsx
@@ -37,6 +37,11 @@ interface ChatMessagesPaneProps {
  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;
@@ -76,6 +81,11 @@ export default function ChatMessagesPane({
  visibleMessageCount,
  visibleMessages,
  loadEarlierMessages,
+  loadAllMessages,
+  allMessagesLoaded,
+  isLoadingAllMessages,
+  loadAllJustFinished,
+  showLoadAllOverlay,
  createDiff,
  onFileOpen,
  onShowSettings,
@@ -149,7 +159,8 @@ export default function ChatMessagesPane({
        />
      ) : (
        <>
-          {isLoadingMoreMessages && (
+          {/* 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" />
@@ -158,23 +169,69 @@ export default function ChatMessagesPane({
            </div>
          )}

-          {hasMoreMessages && !isLoadingMoreMessages && (
+          {/* 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 })} |
+                  {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>
          )}

--- a/src/components/chat/view/subcomponents/MessageComponent.tsx
+++ b/src/components/chat/view/subcomponents/MessageComponent.tsx
@@ -127,6 +127,14 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
            </div>
          )}
        </div>
+      ) : message.isTaskNotification ? (
+        /* Compact task notification on the left */
+        <div className="w-full">
+          <div className="flex items-center gap-2 py-0.5">
+            <span className={`inline-block w-1.5 h-1.5 rounded-full flex-shrink-0 ${message.taskStatus === 'completed' ? 'bg-green-400 dark:bg-green-500' : 'bg-amber-400 dark:bg-amber-500'}`} />
+            <span className="text-xs text-gray-500 dark:text-gray-400">{message.content}</span>
+          </div>
+        </div>
      ) : (
        /* Claude/Error/Tool messages on the left */
        <div className="w-full">
@@ -176,6 +184,8 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
                    autoExpandTools={autoExpandTools}
                    showRawParameters={showRawParameters}
                    rawToolInput={typeof message.toolInput === 'string' ? message.toolInput : undefined}
+                    isSubagentContainer={message.isSubagentContainer}
+                    subagentState={message.subagentState}
                  />
                )}
                
--- a/src/components/chat/view/subcomponents/PermissionRequestsBanner.tsx
+++ b/src/components/chat/view/subcomponents/PermissionRequestsBanner.tsx
@@ -2,6 +2,10 @@ import React from 'react';
 import type { PendingPermissionRequest } from '../../types/types';
 import { buildClaudeToolPermissionEntry, formatToolInputForDisplay } from '../../utils/chatPermissions';
 import { getClaudeSettings } from '../../utils/chatStorage';
+import { getPermissionPanel, registerPermissionPanel } from '../../tools/configs/permissionPanelRegistry';
+import { AskUserQuestionPanel } from '../../tools/components/InteractiveRenderers';
+
+registerPermissionPanel('AskUserQuestion', AskUserQuestionPanel);

 interface PermissionRequestsBannerProps {
  pendingPermissionRequests: PendingPermissionRequest[];
@@ -24,6 +28,17 @@ export default function PermissionRequestsBanner({
  return (
    <div className="mb-3 space-y-2">
      {pendingPermissionRequests.map((request) => {
+        const CustomPanel = getPermissionPanel(request.toolName);
+        if (CustomPanel) {
+          return (
+            <CustomPanel
+              key={request.requestId}
+              request={request}
+              onDecision={handlePermissionDecision}
+            />
+          );
+        }
+
        const rawInput = formatToolInputForDisplay(request.input);
        const permissionEntry = buildClaudeToolPermissionEntry(request.toolName, rawInput);
        const settings = getClaudeSettings();
--- a/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
+++ b/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Check, ChevronDown } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import SessionProviderLogo from '../../../SessionProviderLogo';
 import NextTaskBanner from '../../../NextTaskBanner.jsx';
@@ -23,6 +24,54 @@ interface ProviderSelectionEmptyStateProps {
  setInput: React.Dispatch<React.SetStateAction<string>>;
 }

+type ProviderDef = {
+  id: SessionProvider;
+  name: string;
+  infoKey: string;
+  accent: string;
+  ring: string;
+  check: string;
+};
+
+const PROVIDERS: ProviderDef[] = [
+  {
+    id: 'claude',
+    name: 'Claude Code',
+    infoKey: 'providerSelection.providerInfo.anthropic',
+    accent: 'border-primary',
+    ring: 'ring-primary/15',
+    check: 'bg-primary text-primary-foreground',
+  },
+  {
+    id: 'cursor',
+    name: 'Cursor',
+    infoKey: 'providerSelection.providerInfo.cursorEditor',
+    accent: 'border-violet-500 dark:border-violet-400',
+    ring: 'ring-violet-500/15',
+    check: 'bg-violet-500 text-white',
+  },
+  {
+    id: 'codex',
+    name: 'Codex',
+    infoKey: 'providerSelection.providerInfo.openai',
+    accent: 'border-emerald-600 dark:border-emerald-400',
+    ring: 'ring-emerald-600/15',
+    check: 'bg-emerald-600 dark:bg-emerald-500 text-white',
+  },
+];
+
+function getModelConfig(p: SessionProvider) {
+  if (p === 'claude') return CLAUDE_MODELS;
+  if (p === 'codex') return CODEX_MODELS;
+  return CURSOR_MODELS;
+}
+
+function getModelValue(p: SessionProvider, c: string, cu: string, co: string) {
+  if (p === 'claude') return c;
+  if (p === 'codex') return co;
+  return cu;
+}
+
 export default function ProviderSelectionEmptyState({
  selectedSession,
  currentSessionId,
@@ -41,185 +90,133 @@ export default function ProviderSelectionEmptyState({
  setInput,
 }: ProviderSelectionEmptyStateProps) {
  const { t } = useTranslation('chat');
-  // Reuse one translated prompt so task-start behavior stays consistent across empty and session states.
  const nextTaskPrompt = t('tasks.nextTaskPrompt', { defaultValue: 'Start the next task' });

-  const selectProvider = (nextProvider: SessionProvider) => {
-    setProvider(nextProvider);
-    localStorage.setItem('selected-provider', nextProvider);
+  const selectProvider = (next: SessionProvider) => {
+    setProvider(next);
+    localStorage.setItem('selected-provider', next);
    setTimeout(() => textareaRef.current?.focus(), 100);
  };

-  return (
-    <div className="flex items-center justify-center h-full">
-      {!selectedSession && !currentSessionId && (
-        <div className="text-center px-6 sm:px-4 py-8">
-          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">{t('providerSelection.title')}</h2>
-          <p className="text-gray-600 dark:text-gray-400 mb-8">{t('providerSelection.description')}</p>
+  const handleModelChange = (value: string) => {
+    if (provider === 'claude') { setClaudeModel(value); localStorage.setItem('claude-model', value); }
+    else if (provider === 'codex') { setCodexModel(value); localStorage.setItem('codex-model', value); }
+    else { setCursorModel(value); localStorage.setItem('cursor-model', value); }
+  };

-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
-            <button
-              onClick={() => selectProvider('claude')}
-              className={`group relative w-64 h-32 bg-white dark:bg-gray-800 rounded-xl border-2 transition-all duration-200 hover:scale-105 hover:shadow-xl ${
-                provider === 'claude'
-                  ? 'border-blue-500 shadow-lg ring-2 ring-blue-500/20'
-                  : 'border-gray-200 dark:border-gray-700 hover:border-blue-400'
-              }`}
-            >
-              <div className="flex flex-col items-center justify-center h-full gap-3">
-                <SessionProviderLogo provider="claude" className="w-10 h-10" />
-                <div>
-                  <p className="font-semibold text-gray-900 dark:text-white">Claude Code</p>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('providerSelection.providerInfo.anthropic')}</p>
-                </div>
-              </div>
-              {provider === 'claude' && (
-                <div className="absolute top-2 right-2">
-                  <div className="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center">
-                    <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
-                    </svg>
-                  </div>
-                </div>
-              )}
-            </button>
+  const modelConfig = getModelConfig(provider);
+  const currentModel = getModelValue(provider, claudeModel, cursorModel, codexModel);

-            <button
-              onClick={() => selectProvider('cursor')}
-              className={`group relative w-64 h-32 bg-white dark:bg-gray-800 rounded-xl border-2 transition-all duration-200 hover:scale-105 hover:shadow-xl ${
-                provider === 'cursor'
-                  ? 'border-purple-500 shadow-lg ring-2 ring-purple-500/20'
-                  : 'border-gray-200 dark:border-gray-700 hover:border-purple-400'
-              }`}
-            >
-              <div className="flex flex-col items-center justify-center h-full gap-3">
-                <SessionProviderLogo provider="cursor" className="w-10 h-10" />
-                <div>
-                  <p className="font-semibold text-gray-900 dark:text-white">Cursor</p>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('providerSelection.providerInfo.cursorEditor')}</p>
-                </div>
-              </div>
-              {provider === 'cursor' && (
-                <div className="absolute top-2 right-2">
-                  <div className="w-5 h-5 bg-purple-500 rounded-full flex items-center justify-center">
-                    <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
-                    </svg>
-                  </div>
-                </div>
-              )}
-            </button>
-
-            <button
-              onClick={() => selectProvider('codex')}
-              className={`group relative w-64 h-32 bg-white dark:bg-gray-800 rounded-xl border-2 transition-all duration-200 hover:scale-105 hover:shadow-xl ${
-                provider === 'codex'
-                  ? 'border-gray-800 dark:border-gray-300 shadow-lg ring-2 ring-gray-800/20 dark:ring-gray-300/20'
-                  : 'border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-400'
-              }`}
-            >
-              <div className="flex flex-col items-center justify-center h-full gap-3">
-                <SessionProviderLogo provider="codex" className="w-10 h-10" />
-                <div>
-                  <p className="font-semibold text-gray-900 dark:text-white">Codex</p>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('providerSelection.providerInfo.openai')}</p>
-                </div>
-              </div>
-              {provider === 'codex' && (
-                <div className="absolute top-2 right-2">
-                  <div className="w-5 h-5 bg-gray-800 dark:bg-gray-300 rounded-full flex items-center justify-center">
-                    <svg className="w-3 h-3 text-white dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
-                    </svg>
-                  </div>
-                </div>
-              )}
-            </button>
+  /* ── New session — provider picker ── */
+  if (!selectedSession && !currentSessionId) {
+    return (
+      <div className="flex items-center justify-center h-full px-4">
+        <div className="w-full max-w-md">
+          {/* Heading */}
+          <div className="text-center mb-8">
+            <h2 className="text-lg sm:text-xl font-semibold text-foreground tracking-tight">
+              {t('providerSelection.title')}
+            </h2>
+            <p className="text-[13px] text-muted-foreground mt-1">
+              {t('providerSelection.description')}
+            </p>
          </div>

-          <div className={`mb-6 transition-opacity duration-200 ${provider ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{t('providerSelection.selectModel')}</label>
-            {provider === 'claude' ? (
-              <select
-                value={claudeModel}
-                onChange={(e) => {
-                  const newModel = e.target.value;
-                  setClaudeModel(newModel);
-                  localStorage.setItem('claude-model', newModel);
-                }}
-                className="pl-4 pr-10 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 min-w-[140px]"
-              >
-                {CLAUDE_MODELS.OPTIONS.map(({ value, label }) => (
-                  <option key={value} value={value}>
-                    {label}
-                  </option>
-                ))}
-              </select>
-            ) : provider === 'codex' ? (
-              <select
-                value={codexModel}
-                onChange={(e) => {
-                  const newModel = e.target.value;
-                  setCodexModel(newModel);
-                  localStorage.setItem('codex-model', newModel);
-                }}
-                className="pl-4 pr-10 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-gray-500 min-w-[140px]"
-              >
-                {CODEX_MODELS.OPTIONS.map(({ value, label }) => (
-                  <option key={value} value={value}>
-                    {label}
-                  </option>
-                ))}
-              </select>
-            ) : (
-              <select
-                value={cursorModel}
-                onChange={(e) => {
-                  const newModel = e.target.value;
-                  setCursorModel(newModel);
-                  localStorage.setItem('cursor-model', newModel);
-                }}
-                className="pl-4 pr-10 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 min-w-[140px]"
-                disabled={provider !== 'cursor'}
-              >
-                {CURSOR_MODELS.OPTIONS.map(({ value, label }) => (
-                  <option key={value} value={value}>
-                    {label}
-                  </option>
-                ))}
-              </select>
-            )}
+          {/* Provider cards — horizontal row, equal width */}
+          <div className="grid grid-cols-3 gap-2 sm:gap-2.5 mb-6">
+            {PROVIDERS.map((p) => {
+              const active = provider === p.id;
+              return (
+                <button
+                  key={p.id}
+                  onClick={() => selectProvider(p.id)}
+                  className={`
+                    relative flex flex-col items-center gap-2.5 pt-5 pb-4 px-2
+                    rounded-xl border-[1.5px] transition-all duration-150
+                    active:scale-[0.97]
+                    ${active
+                      ? `${p.accent} ${p.ring} ring-2 bg-card shadow-sm`
+                      : 'border-border bg-card/60 hover:bg-card hover:border-border/80'
+                    }
+                  `}
+                >
+                  <SessionProviderLogo
+                    provider={p.id}
+                    className={`w-9 h-9 transition-transform duration-150 ${active ? 'scale-110' : ''}`}
+                  />
+                  <div className="text-center">
+                    <p className="text-[13px] font-semibold text-foreground leading-none">{p.name}</p>
+                    <p className="text-[10px] text-muted-foreground mt-1 leading-tight">{t(p.infoKey)}</p>
+                  </div>
+                  {/* Check badge */}
+                  {active && (
+                    <div className={`absolute -top-1 -right-1 w-[18px] h-[18px] rounded-full ${p.check} flex items-center justify-center shadow-sm`}>
+                      <Check className="w-2.5 h-2.5" strokeWidth={3} />
+                    </div>
+                  )}
+                </button>
+              );
+            })}
          </div>

-          <p className="text-sm text-gray-500 dark:text-gray-400">
-            {provider === 'claude'
-              ? t('providerSelection.readyPrompt.claude', { model: claudeModel })
-              : provider === 'cursor'
-                ? t('providerSelection.readyPrompt.cursor', { model: cursorModel })
-                : provider === 'codex'
-                  ? t('providerSelection.readyPrompt.codex', { model: codexModel })
-                  : t('providerSelection.readyPrompt.default')}
-          </p>
+          {/* Model picker — appears after provider is chosen */}
+          <div className={`transition-all duration-200 ${provider ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-1 pointer-events-none'}`}>
+            <div className="flex items-center justify-center gap-2 mb-5">
+              <span className="text-sm text-muted-foreground">{t('providerSelection.selectModel')}</span>
+              <div className="relative">
+                <select
+                  value={currentModel}
+                  onChange={(e) => handleModelChange(e.target.value)}
+                  tabIndex={-1}
+                  className="appearance-none pl-3 pr-7 py-1.5 text-sm font-medium bg-muted/50 border border-border/60 rounded-lg text-foreground cursor-pointer hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-primary/20"
+                >
+                  {modelConfig.OPTIONS.map(({ value, label }: { value: string; label: string }) => (
+                    <option key={value} value={value}>{label}</option>
+                  ))}
+                </select>
+                <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 w-3 h-3 text-muted-foreground pointer-events-none" />
+              </div>
+            </div>

+            <p className="text-center text-sm text-muted-foreground/70">
+              {provider === 'claude'
+                ? t('providerSelection.readyPrompt.claude', { model: claudeModel })
+                : provider === 'cursor'
+                  ? t('providerSelection.readyPrompt.cursor', { model: cursorModel })
+                  : provider === 'codex'
+                    ? t('providerSelection.readyPrompt.codex', { model: codexModel })
+                    : t('providerSelection.readyPrompt.default')}
+            </p>
+          </div>
+
+          {/* Task banner */}
          {provider && tasksEnabled && isTaskMasterInstalled && (
-            <div className="mt-4 px-4 sm:px-0">
+            <div className="mt-5">
              <NextTaskBanner onStartTask={() => setInput(nextTaskPrompt)} onShowAllTasks={onShowAllTasks} />
            </div>
          )}
        </div>
-      )}
-      {selectedSession && (
-        <div className="text-center text-gray-500 dark:text-gray-400 px-6 sm:px-4">
-          <p className="font-bold text-lg sm:text-xl mb-3">{t('session.continue.title')}</p>
-          <p className="text-sm sm:text-base leading-relaxed">{t('session.continue.description')}</p>
+      </div>
+    );
+  }
+
+  /* ── Existing session — continue prompt ── */
+  if (selectedSession) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center px-6 max-w-md">
+          <p className="text-lg font-semibold text-foreground mb-1.5">{t('session.continue.title')}</p>
+          <p className="text-sm text-muted-foreground leading-relaxed">{t('session.continue.description')}</p>

          {tasksEnabled && isTaskMasterInstalled && (
-            <div className="mt-4 px-4 sm:px-0">
+            <div className="mt-5">
              <NextTaskBanner onStartTask={() => setInput(nextTaskPrompt)} onShowAllTasks={onShowAllTasks} />
            </div>
          )}
        </div>
-      )}
-    </div>
-  );
+      </div>
+    );
+  }
+
+  return null;
 }
--- a/src/components/main-content/types/types.ts
+++ b/src/components/main-content/types/types.ts
@@ -100,6 +100,7 @@ export interface EditorSidebarProps {
  onCloseEditor: () => void;
  onToggleEditorExpand: () => void;
  projectPath?: string;
+  fillSpace?: boolean;
 }

 export interface TaskMasterPanelProps {
--- a/src/components/main-content/view/MainContent.tsx
+++ b/src/components/main-content/view/MainContent.tsx
@@ -109,7 +109,7 @@ function MainContent({
      />

      <div className="flex-1 flex min-h-0 overflow-hidden">
-        <div className={`flex-1 flex flex-col min-h-0 overflow-hidden ${editorExpanded ? 'hidden' : ''}`}>
+        <div className={`flex flex-col min-h-0 overflow-hidden ${editorExpanded ? 'hidden' : ''} ${activeTab === 'files' && editingFile ? 'w-[280px] flex-shrink-0' : 'flex-1'}`}>
          <div className={`h-full ${activeTab === 'chat' ? 'block' : 'hidden'}`}>
            <ErrorBoundary showDetails>
              <ChatInterface
@@ -141,7 +141,7 @@ function MainContent({

          {activeTab === 'files' && (
            <div className="h-full overflow-hidden">
-              <FileTree selectedProject={selectedProject} />
+              <FileTree selectedProject={selectedProject} onFileOpen={handleFileOpen} />
            </div>
          )}

@@ -172,6 +172,7 @@ function MainContent({
          onCloseEditor={handleCloseEditor}
          onToggleEditorExpand={handleToggleEditorExpand}
          projectPath={selectedProject.path}
+          fillSpace={activeTab === 'files'}
        />
      </div>
    </div>
--- a/src/components/main-content/view/subcomponents/EditorSidebar.tsx
+++ b/src/components/main-content/view/subcomponents/EditorSidebar.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import CodeEditor from '../../../CodeEditor';
 import type { EditorSidebarProps } from '../../types/types';

@@ -13,22 +14,30 @@ export default function EditorSidebar({
  onCloseEditor,
  onToggleEditorExpand,
  projectPath,
+  fillSpace,
 }: EditorSidebarProps) {
+  const [poppedOut, setPoppedOut] = useState(false);
+
  if (!editingFile) {
    return null;
  }

-  if (isMobile) {
+  if (isMobile || poppedOut) {
    return (
      <AnyCodeEditor
        file={editingFile}
-        onClose={onCloseEditor}
+        onClose={() => {
+          setPoppedOut(false);
+          onCloseEditor();
+        }}
        projectPath={projectPath}
        isSidebar={false}
      />
    );
  }

+  const useFlex = editorExpanded || fillSpace;
+
  return (
    <>
      {!editorExpanded && (
@@ -43,8 +52,8 @@ export default function EditorSidebar({
      )}

      <div
-        className={`flex-shrink-0 border-l border-gray-200 dark:border-gray-700 h-full overflow-hidden ${editorExpanded ? 'flex-1' : ''}`}
-        style={editorExpanded ? undefined : { width: `${editorWidth}px` }}
+        className={`flex-shrink-0 border-l border-gray-200 dark:border-gray-700 h-full overflow-hidden ${useFlex ? 'flex-1' : ''}`}
+        style={useFlex ? undefined : { width: `${editorWidth}px` }}
      >
        <AnyCodeEditor
          file={editingFile}
@@ -53,6 +62,7 @@ export default function EditorSidebar({
          isSidebar
          isExpanded={editorExpanded}
          onToggleExpand={onToggleEditorExpand}
+          onPopOut={() => setPoppedOut(true)}
        />
      </div>
    </>
--- a/src/components/main-content/view/subcomponents/MainContentHeader.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentHeader.tsx
@@ -13,9 +13,9 @@ export default function MainContentHeader({
  onMenuClick,
 }: MainContentHeaderProps) {
  return (
-    <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">
+    <div className="bg-background border-b border-border/60 px-3 py-1.5 sm:px-4 sm:py-2 pwa-header-safe flex-shrink-0">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2 min-w-0 flex-1">
          {isMobile && <MobileMenuButton onMenuClick={onMenuClick} />}
          <MainContentTitle
            activeTab={activeTab}
--- a/src/components/main-content/view/subcomponents/MainContentStateView.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentStateView.tsx
@@ -1,3 +1,4 @@
+import { Folder } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import MobileMenuButton from './MobileMenuButton';
 import type { MainContentStateViewProps } from '../../types/types';
@@ -10,17 +11,17 @@ export default function MainContentStateView({ mode, isMobile, onMenuClick }: Ma
  return (
    <div className="h-full flex flex-col">
      {isMobile && (
-        <div className="bg-background border-b border-border p-2 sm:p-3 pwa-header-safe flex-shrink-0">
+        <div className="bg-background/80 backdrop-blur-sm border-b border-border/50 p-2 sm:p-3 pwa-header-safe flex-shrink-0">
          <MobileMenuButton onMenuClick={onMenuClick} compact />
        </div>
      )}

      {isLoading ? (
        <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="text-center text-muted-foreground">
+            <div className="w-10 h-10 mx-auto mb-4">
              <div
-                className="w-full h-full rounded-full border-4 border-gray-200 border-t-blue-500"
+                className="w-full h-full rounded-full border-[3px] border-muted border-t-primary"
                style={{
                  animation: 'spin 1s linear infinite',
                  WebkitAnimation: 'spin 1s linear infinite',
@@ -28,22 +29,20 @@ export default function MainContentStateView({ mode, isMobile, onMenuClick }: Ma
                }}
              />
            </div>
-            <h2 className="text-xl font-semibold mb-2">{t('mainContent.loading')}</h2>
-            <p>{t('mainContent.settingUpWorkspace')}</p>
+            <h2 className="text-lg font-semibold text-foreground mb-1">{t('mainContent.loading')}</h2>
+            <p className="text-sm">{t('mainContent.settingUpWorkspace')}</p>
          </div>
        </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 className="text-center max-w-md mx-auto px-6">
+            <div className="w-14 h-14 mx-auto mb-5 bg-muted/50 rounded-2xl flex items-center justify-center">
+              <Folder className="w-7 h-7 text-muted-foreground" />
            </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">
+            <h2 className="text-xl font-semibold mb-2 text-foreground">{t('mainContent.chooseProject')}</h2>
+            <p className="text-sm text-muted-foreground mb-5 leading-relaxed">{t('mainContent.selectProjectDescription')}</p>
+            <div className="bg-primary/5 rounded-xl p-3.5 border border-primary/10">
+              <p className="text-sm text-primary">
                <strong>{t('mainContent.tip')}:</strong> {isMobile ? t('mainContent.createProjectMobile') : t('mainContent.createProjectDesktop')}
              </p>
            </div>
--- a/src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx
@@ -1,3 +1,4 @@
+import { MessageSquare, Terminal, Folder, GitBranch, ClipboardCheck, type LucideIcon } from 'lucide-react';
 import Tooltip from '../../../Tooltip';
 import type { AppTab } from '../../../../types/app';
 import type { Dispatch, SetStateAction } from 'react';
@@ -12,50 +13,22 @@ type MainContentTabSwitcherProps = {
 type TabDefinition = {
  id: AppTab;
  labelKey: string;
-  iconPath: string;
+  icon: LucideIcon;
 };

 const BASE_TABS: TabDefinition[] = [
-  {
-    id: 'chat',
-    labelKey: 'tabs.chat',
-    iconPath:
-      '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',
-  },
-  {
-    id: 'shell',
-    labelKey: 'tabs.shell',
-    iconPath: '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',
-  },
-  {
-    id: 'files',
-    labelKey: 'tabs.files',
-    iconPath: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-5l-2-2H5a2 2 0 00-2 2z',
-  },
-  {
-    id: 'git',
-    labelKey: 'tabs.git',
-    iconPath: 'M13 10V3L4 14h7v7l9-11h-7z',
-  },
+  { id: 'chat', labelKey: 'tabs.chat', icon: MessageSquare },
+  { id: 'shell', labelKey: 'tabs.shell', icon: Terminal },
+  { id: 'files', labelKey: 'tabs.files', icon: Folder },
+  { id: 'git', labelKey: 'tabs.git', icon: GitBranch },
 ];

 const TASKS_TAB: TabDefinition = {
  id: 'tasks',
  labelKey: 'tabs.tasks',
-  iconPath:
-    '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',
+  icon: ClipboardCheck,
 };

-function getButtonClasses(tabId: AppTab, activeTab: AppTab) {
-  const base = 'relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-all duration-200';
-
-  if (tabId === activeTab) {
-    return `${base} bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm`;
-  }
-
-  return `${base} text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-700`;
-}
-
 export default function MainContentTabSwitcher({
  activeTab,
  setActiveTab,
@@ -66,19 +39,27 @@ export default function MainContentTabSwitcher({
  const tabs = shouldShowTasksTab ? [...BASE_TABS, TASKS_TAB] : BASE_TABS;

  return (
-    <div className="relative flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1">
-      {tabs.map((tab) => (
-        <Tooltip key={tab.id} content={t(tab.labelKey)} position="bottom">
-          <button onClick={() => setActiveTab(tab.id)} className={getButtonClasses(tab.id, activeTab)}>
-            <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={tab.iconPath} />
-              </svg>
-              <span className="hidden md:hidden lg:inline">{t(tab.labelKey)}</span>
-            </span>
-          </button>
-        </Tooltip>
-      ))}
+    <div className="inline-flex items-center bg-muted/60 rounded-lg p-[3px] gap-[2px]">
+      {tabs.map((tab) => {
+        const Icon = tab.icon;
+        const isActive = tab.id === activeTab;
+
+        return (
+          <Tooltip key={tab.id} content={t(tab.labelKey)} position="bottom">
+            <button
+              onClick={() => setActiveTab(tab.id)}
+              className={`relative flex items-center gap-1.5 px-2.5 py-[5px] text-sm font-medium rounded-md transition-all duration-150 ${
+                isActive
+                  ? 'bg-background text-foreground shadow-sm'
+                  : 'text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              <Icon className="w-3.5 h-3.5" strokeWidth={isActive ? 2.2 : 1.8} />
+              <span className="hidden lg:inline">{t(tab.labelKey)}</span>
+            </button>
+          </Tooltip>
+        );
+      })}
    </div>
  );
 }
--- a/src/components/main-content/view/subcomponents/MainContentTitle.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentTitle.tsx
@@ -55,22 +55,22 @@ export default function MainContentTitle({
      <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">
+            <h2 className="text-sm font-semibold text-foreground whitespace-nowrap overflow-x-auto scrollbar-hide leading-tight">
              {getSessionTitle(selectedSession)}
            </h2>
-            <div className="text-xs text-gray-500 dark:text-gray-400 truncate">{selectedProject.displayName}</div>
+            <div className="text-[11px] text-muted-foreground truncate leading-tight">{selectedProject.displayName}</div>
          </div>
        ) : showChatNewSession ? (
          <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>
+            <h2 className="text-base font-semibold text-foreground leading-tight">{t('mainContent.newSession')}</h2>
+            <div className="text-xs text-muted-foreground truncate leading-tight">{selectedProject.displayName}</div>
          </div>
        ) : (
          <div className="min-w-0">
-            <h2 className="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
+            <h2 className="text-sm font-semibold text-foreground leading-tight">
              {getTabTitle(activeTab, shouldShowTasksTab, t)}
            </h2>
-            <div className="text-xs text-gray-500 dark:text-gray-400 truncate">{selectedProject.displayName}</div>
+            <div className="text-[11px] text-muted-foreground truncate leading-tight">{selectedProject.displayName}</div>
          </div>
        )}
      </div>
--- a/src/components/main-content/view/subcomponents/MobileMenuButton.tsx
+++ b/src/components/main-content/view/subcomponents/MobileMenuButton.tsx
@@ -5,8 +5,8 @@ export default function MobileMenuButton({ onMenuClick, compact = false }: Mobil
  const { handleMobileMenuClick, handleMobileMenuTouchEnd } = useMobileMenuHandlers(onMenuClick);

  const buttonClasses = compact
-    ? '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'
-    : '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';
+    ? 'p-1.5 text-muted-foreground hover:text-foreground rounded-lg hover:bg-accent/60 pwa-menu-button'
+    : 'p-1.5 text-muted-foreground hover:text-foreground rounded-lg hover:bg-accent/60 touch-manipulation active:scale-95 pwa-menu-button flex-shrink-0';

  return (
    <button
--- a/src/components/modals/VersionUpgradeModal.tsx
+++ b/src/components/modals/VersionUpgradeModal.tsx
@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { authenticatedFetch } from "../../utils/api";
 import { ReleaseInfo } from "../../types/sharedTypes";
+import type { InstallMode } from "../../hooks/useVersionCheck";

 interface VersionUpgradeModalProps {
    isOpen: boolean;
@@ -9,6 +10,7 @@ interface VersionUpgradeModalProps {
    releaseInfo: ReleaseInfo | null;
    currentVersion: string;
    latestVersion: string | null;
+    installMode: InstallMode;
 }

 export default function VersionUpgradeModal({
@@ -16,9 +18,13 @@ export default function VersionUpgradeModal({
    onClose,
    releaseInfo,
    currentVersion,
-    latestVersion
+    latestVersion,
+    installMode
 }: VersionUpgradeModalProps) {
    const { t } = useTranslation('common');
+    const upgradeCommand = installMode === 'npm'
+        ? t('versionUpdate.npmUpgradeCommand')
+        : 'git checkout main && git pull && npm install';
    const [isUpdating, setIsUpdating] = useState(false);
    const [updateOutput, setUpdateOutput] = useState('');
    const [updateError, setUpdateError] = useState('');
@@ -150,7 +156,7 @@ export default function VersionUpgradeModal({
                        <h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('versionUpdate.manualUpgrade')}</h3>
                        <div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 border">
                            <code className="text-sm text-gray-800 dark:text-gray-200 font-mono">
-                                git checkout main && git pull && npm install
+                                {upgradeCommand}
                            </code>
                        </div>
                        <p className="text-xs text-gray-600 dark:text-gray-400">
@@ -171,7 +177,7 @@ export default function VersionUpgradeModal({
                        <>
                            <button
                                onClick={() => {
-                                    navigator.clipboard.writeText('git checkout main && git pull && npm install');
+                                    navigator.clipboard.writeText(upgradeCommand);
                                }}
                                className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors"
                            >
--- a/src/components/sidebar/hooks/useSidebarController.ts
+++ b/src/components/sidebar/hooks/useSidebarController.ts
@@ -90,7 +90,7 @@ export function useSidebarController({
  }, [projects]);

  useEffect(() => {
-    if (selectedSession && selectedProject) {
+    if (selectedProject) {
      setExpandedProjects((prev) => {
        if (prev.has(selectedProject.name)) {
          return prev;
--- a/src/components/sidebar/view/Sidebar.tsx
+++ b/src/components/sidebar/view/Sidebar.tsx
@@ -38,7 +38,7 @@ function Sidebar({
 }: SidebarProps) {
  const { t } = useTranslation(['sidebar', 'common']);
  const { isPWA } = useDeviceSettings({ trackMobile: false });
-  const { updateAvailable, latestVersion, currentVersion, releaseInfo } = useVersionCheck(
+  const { updateAvailable, latestVersion, currentVersion, releaseInfo, installMode } = useVersionCheck(
    'siteboon',
    'claudecodeui',
  );
@@ -200,6 +200,7 @@ function Sidebar({
        releaseInfo={releaseInfo}
        currentVersion={currentVersion}
        latestVersion={latestVersion}
+        installMode={installMode}
        t={t}
      />

--- a/src/components/sidebar/view/subcomponents/SidebarCollapsed.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarCollapsed.tsx
@@ -1,4 +1,4 @@
-import { Settings, Sparkles } from 'lucide-react';
+import { Settings, Sparkles, PanelLeftOpen } from 'lucide-react';
 import type { TFunction } from 'i18next';

 type SidebarCollapsedProps = {
@@ -17,41 +17,39 @@ export default function SidebarCollapsed({
  t,
 }: SidebarCollapsedProps) {
  return (
-    <div className="h-full flex flex-col items-center py-4 gap-4 bg-card">
+    <div className="h-full flex flex-col items-center py-3 gap-1 bg-background/80 backdrop-blur-sm w-12">
+      {/* Expand button with brand logo */}
      <button
        onClick={onExpand}
-        className="p-2 hover:bg-accent rounded-md transition-colors duration-200 group"
+        className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors group"
        aria-label={t('common:versionUpdate.ariaLabels.showSidebar')}
        title={t('common:versionUpdate.ariaLabels.showSidebar')}
      >
-        <svg
-          className="w-5 h-5 text-foreground group-hover:scale-110 transition-transform"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7M5 5l7 7-7 7" />
-        </svg>
+        <PanelLeftOpen className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors" />
      </button>

+      <div className="nav-divider w-6 my-1" />
+
+      {/* Settings */}
      <button
        onClick={onShowSettings}
-        className="p-2 hover:bg-accent rounded-md transition-colors duration-200"
+        className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors group"
        aria-label={t('actions.settings')}
        title={t('actions.settings')}
      >
-        <Settings className="w-5 h-5 text-muted-foreground hover:text-foreground transition-colors" />
+        <Settings className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors" />
      </button>

+      {/* Update indicator */}
      {updateAvailable && (
        <button
          onClick={onShowVersionModal}
-          className="relative p-2 hover:bg-accent rounded-md transition-colors duration-200"
+          className="relative w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors"
          aria-label={t('common:versionUpdate.ariaLabels.updateAvailable')}
          title={t('common:versionUpdate.ariaLabels.updateAvailable')}
        >
-          <Sparkles className="w-5 h-5 text-blue-500" />
-          <span className="absolute top-1 right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
+          <Sparkles className="w-4 h-4 text-blue-500" />
+          <span className="absolute top-1.5 right-1.5 w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" />
        </button>
      )}
    </div>
--- a/src/components/sidebar/view/subcomponents/SidebarContent.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarContent.tsx
@@ -49,8 +49,8 @@ export default function SidebarContent({
 }: SidebarContentProps) {
  return (
    <div
-      className="h-full flex flex-col bg-card md:select-none md:w-80"
-      style={isPWA && isMobile ? { paddingTop: '44px' } : {}}
+      className="h-full flex flex-col bg-background/80 backdrop-blur-sm md:select-none md:w-72"
+      style={{}}
    >
      <SidebarHeader
        isPWA={isPWA}
@@ -67,7 +67,7 @@ export default function SidebarContent({
        t={t}
      />

-      <ScrollArea className="flex-1 md:px-2 md:py-3 overflow-y-auto overscroll-contain">
+      <ScrollArea className="flex-1 md:px-1.5 md:py-2 overflow-y-auto overscroll-contain">
        <SidebarProjectList {...projectListProps} />
      </ScrollArea>

--- a/src/components/sidebar/view/subcomponents/SidebarFooter.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarFooter.tsx
@@ -1,7 +1,6 @@
-import { Settings } from 'lucide-react';
+import { Settings, ArrowUpCircle } from 'lucide-react';
 import type { TFunction } from 'i18next';
 import type { ReleaseInfo } from '../../../../types/sharedTypes';
-import { Button } from '../../../ui/button';

 type SidebarFooterProps = {
  updateAvailable: boolean;
@@ -21,74 +20,81 @@ export default function SidebarFooter({
  t,
 }: SidebarFooterProps) {
  return (
-    <>
+    <div className="flex-shrink-0" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0)' }}>
+      {/* Update banner */}
      {updateAvailable && (
-        <div className="md:p-2 border-t border-border/50 flex-shrink-0">
-          <div className="hidden md:block">
-            <Button
-              variant="ghost"
-              className="w-full justify-start gap-3 p-3 h-auto font-normal text-left hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors duration-200 border border-blue-200 dark:border-blue-700 rounded-lg mb-2"
+        <>
+          <div className="nav-divider" />
+          {/* Desktop update */}
+          <div className="hidden md:block px-2 py-1.5">
+            <button
+              className="w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-left hover:bg-blue-50/80 dark:hover:bg-blue-900/15 transition-colors group"
              onClick={onShowVersionModal}
            >
-              <div className="relative">
-                <svg className="w-4 h-4 text-blue-600 dark:text-blue-400" 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.9M9 19l3 3m0 0l3-3m-3 3V10" />
-                </svg>
-                <div className="absolute -top-1 -right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
+              <div className="relative flex-shrink-0">
+                <ArrowUpCircle className="w-4 h-4 text-blue-500 dark:text-blue-400" />
+                <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" />
              </div>
              <div className="min-w-0 flex-1">
-                <div className="text-sm font-medium text-blue-700 dark:text-blue-300">
-                  {releaseInfo?.title || `Version ${latestVersion}`}
-                </div>
-                <div className="text-xs text-blue-600 dark:text-blue-400">{t('version.updateAvailable')}</div>
-              </div>
-            </Button>
-          </div>
-
-          <div className="md:hidden p-3 pb-2">
-            <button
-              className="w-full h-12 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-xl flex items-center justify-start gap-3 px-4 active:scale-[0.98] transition-all duration-150"
-              onClick={onShowVersionModal}
-            >
-              <div className="relative">
-                <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" 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.9M9 19l3 3m0 0l3-3m-3 3V10" />
-                </svg>
-                <div className="absolute -top-1 -right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
-              </div>
-              <div className="min-w-0 flex-1 text-left">
-                <div className="text-sm font-medium text-blue-700 dark:text-blue-300">
-                  {releaseInfo?.title || `Version ${latestVersion}`}
-                </div>
-                <div className="text-xs text-blue-600 dark:text-blue-400">{t('version.updateAvailable')}</div>
+                <span className="text-sm font-medium text-blue-600 dark:text-blue-300 truncate block">
+                  {releaseInfo?.title || `v${latestVersion}`}
+                </span>
+                <span className="text-[10px] text-blue-500/70 dark:text-blue-400/60">
+                  {t('version.updateAvailable')}
+                </span>
              </div>
            </button>
          </div>
-        </div>
+
+          {/* Mobile update */}
+          <div className="md:hidden px-3 py-2">
+            <button
+              className="w-full h-11 bg-blue-50/80 dark:bg-blue-900/15 border border-blue-200/60 dark:border-blue-700/40 rounded-xl flex items-center gap-3 px-3.5 active:scale-[0.98] transition-all"
+              onClick={onShowVersionModal}
+            >
+              <div className="relative flex-shrink-0">
+                <ArrowUpCircle className="w-4.5 h-4.5 text-blue-500 dark:text-blue-400" />
+                <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" />
+              </div>
+              <div className="min-w-0 flex-1 text-left">
+                <span className="text-sm font-medium text-blue-600 dark:text-blue-300 truncate block">
+                  {releaseInfo?.title || `v${latestVersion}`}
+                </span>
+                <span className="text-xs text-blue-500/70 dark:text-blue-400/60">
+                  {t('version.updateAvailable')}
+                </span>
+              </div>
+            </button>
+          </div>
+        </>
      )}

-      <div className="md:p-2 md:border-t md:border-border flex-shrink-0">
-        <div className="md:hidden p-4 pb-20 border-t border-border/50">
-          <button
-            className="w-full h-14 bg-muted/50 hover:bg-muted/70 rounded-2xl flex items-center justify-start gap-4 px-4 active:scale-[0.98] transition-all duration-150"
-            onClick={onShowSettings}
-          >
-            <div className="w-10 h-10 rounded-2xl bg-background/80 flex items-center justify-center">
-              <Settings className="w-5 h-5 text-muted-foreground" />
-            </div>
-            <span className="text-lg font-medium text-foreground">{t('actions.settings')}</span>
-          </button>
-        </div>
+      {/* Settings */}
+      <div className="nav-divider" />

-        <Button
-          variant="ghost"
-          className="hidden md:flex w-full justify-start gap-2 p-2 h-auto font-normal text-muted-foreground hover:text-foreground hover:bg-accent transition-colors duration-200"
+      {/* Desktop settings */}
+      <div className="hidden md:block px-2 py-1.5">
+        <button
+          className="w-full flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent/60 transition-colors"
          onClick={onShowSettings}
        >
-          <Settings className="w-3 h-3" />
-          <span className="text-xs">{t('actions.settings')}</span>
-        </Button>
+          <Settings className="w-3.5 h-3.5" />
+          <span className="text-sm">{t('actions.settings')}</span>
+        </button>
      </div>
-    </>
+
+      {/* Mobile settings */}
+      <div className="md:hidden p-3 pb-20">
+        <button
+          className="w-full h-12 bg-muted/40 hover:bg-muted/60 rounded-xl flex items-center gap-3.5 px-4 active:scale-[0.98] transition-all"
+          onClick={onShowSettings}
+        >
+          <div className="w-8 h-8 rounded-xl bg-background/80 flex items-center justify-center">
+            <Settings className="w-4.5 h-4.5 text-muted-foreground" />
+          </div>
+          <span className="text-base font-medium text-foreground">{t('actions.settings')}</span>
+        </button>
+      </div>
+    </div>
  );
 }
--- a/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
@@ -1,4 +1,4 @@
-import { FolderPlus, MessageSquare, RefreshCw, Search, X } from 'lucide-react';
+import { FolderPlus, Plus, RefreshCw, Search, X, PanelLeftClose } from 'lucide-react';
 import type { TFunction } from 'i18next';
 import { Button } from '../../../ui/button';
 import { Input } from '../../../ui/input';
@@ -33,155 +33,159 @@ export default function SidebarHeader({
  onCollapseSidebar,
  t,
 }: SidebarHeaderProps) {
+  const LogoBlock = () => (
+    <div className="flex items-center gap-2.5 min-w-0">
+      <div className="w-7 h-7 bg-primary/90 rounded-lg flex items-center justify-center shadow-sm flex-shrink-0">
+        <svg className="w-3.5 h-3.5 text-primary-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+        </svg>
+      </div>
+      <h1 className="text-sm font-semibold text-foreground tracking-tight truncate">{t('app.title')}</h1>
+    </div>
+  );
+
  return (
-    <>
+    <div className="flex-shrink-0">
+      {/* Desktop header */}
      <div
-        className="md:p-4 md:border-b md:border-border"
-        style={isPWA && isMobile ? { paddingTop: '44px' } : {}}
+        className="hidden md:block px-3 pt-3 pb-2"
+        style={{}}
      >
-        <div className="hidden md:flex items-center justify-between">
+        <div className="flex items-center justify-between gap-2">
          {IS_PLATFORM ? (
            <a
              href="https://cloudcli.ai/dashboard"
-              className="flex items-center gap-3 hover:opacity-80 transition-opacity group"
+              className="flex items-center gap-2.5 min-w-0 hover:opacity-80 transition-opacity"
              title={t('tooltips.viewEnvironments')}
            >
-              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-sm group-hover:shadow-md transition-shadow">
-                <MessageSquare className="w-4 h-4 text-primary-foreground" />
-              </div>
-              <div>
-                <h1 className="text-lg font-bold text-foreground">{t('app.title')}</h1>
-                <p className="text-sm text-muted-foreground">{t('app.subtitle')}</p>
-              </div>
+              <LogoBlock />
            </a>
          ) : (
-            <div className="flex items-center gap-3">
-              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-sm">
-                <MessageSquare className="w-4 h-4 text-primary-foreground" />
-              </div>
-              <div>
-                <h1 className="text-lg font-bold text-foreground">{t('app.title')}</h1>
-                <p className="text-sm text-muted-foreground">{t('app.subtitle')}</p>
-              </div>
-            </div>
+            <LogoBlock />
          )}

-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-8 w-8 px-0 hover:bg-accent transition-colors duration-200"
-            onClick={onCollapseSidebar}
-            title={t('tooltips.hideSidebar')}
-          >
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-            </svg>
-          </Button>
-        </div>
-
-        <div
-          className="md:hidden p-3 border-b border-border"
-          style={isPWA && isMobile ? { paddingTop: '16px' } : {}}
-        >
-          <div className="flex items-center justify-between">
-            {IS_PLATFORM ? (
-              <a
-                href="https://cloudcli.ai/dashboard"
-                className="flex items-center gap-3 active:opacity-70 transition-opacity"
-                title={t('tooltips.viewEnvironments')}
-              >
-                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                  <MessageSquare className="w-4 h-4 text-primary-foreground" />
-                </div>
-                <div>
-                  <h1 className="text-lg font-semibold text-foreground">{t('app.title')}</h1>
-                  <p className="text-sm text-muted-foreground">{t('projects.title')}</p>
-                </div>
-              </a>
-            ) : (
-              <div className="flex items-center gap-3">
-                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                  <MessageSquare className="w-4 h-4 text-primary-foreground" />
-                </div>
-                <div>
-                  <h1 className="text-lg font-semibold text-foreground">{t('app.title')}</h1>
-                  <p className="text-sm text-muted-foreground">{t('projects.title')}</p>
-                </div>
-              </div>
-            )}
-
-            <div className="flex gap-2">
-              <button
-                className="w-8 h-8 rounded-md bg-background border border-border flex items-center justify-center active:scale-95 transition-all duration-150"
-                onClick={onRefresh}
-                disabled={isRefreshing}
-              >
-                <RefreshCw className={`w-4 h-4 text-foreground ${isRefreshing ? 'animate-spin' : ''}`} />
-              </button>
-              <button
-                className="w-8 h-8 rounded-md bg-primary text-primary-foreground flex items-center justify-center active:scale-95 transition-all duration-150"
-                onClick={onCreateProject}
-              >
-                <FolderPlus className="w-4 h-4" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {!isLoading && !isMobile && (
-        <div className="px-3 md:px-4 py-2 border-b border-border">
-          <div className="flex gap-2">
+          <div className="flex items-center gap-0.5 flex-shrink-0">
            <Button
-              variant="default"
+              variant="ghost"
              size="sm"
-              className="flex-1 h-8 text-xs bg-primary hover:bg-primary/90 transition-all duration-200"
-              onClick={onCreateProject}
-              title={t('tooltips.createProject')}
-            >
-              <FolderPlus className="w-3.5 h-3.5 mr-1.5" />
-              {t('projects.newProject')}
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-8 w-8 px-0 hover:bg-accent transition-colors duration-200 group"
+              className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground hover:bg-accent/80 rounded-lg"
              onClick={onRefresh}
              disabled={isRefreshing}
              title={t('tooltips.refresh')}
            >
              <RefreshCw
                className={`w-3.5 h-3.5 ${
-                  isRefreshing ? 'animate-spin' : 'group-hover:rotate-180 transition-transform duration-300'
+                  isRefreshing ? 'animate-spin' : ''
                }`}
              />
            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground hover:bg-accent/80 rounded-lg"
+              onClick={onCreateProject}
+              title={t('tooltips.createProject')}
+            >
+              <Plus className="w-3.5 h-3.5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground hover:bg-accent/80 rounded-lg"
+              onClick={onCollapseSidebar}
+              title={t('tooltips.hideSidebar')}
+            >
+              <PanelLeftClose className="w-3.5 h-3.5" />
+            </Button>
          </div>
        </div>
-      )}

-      {projectsCount > 0 && !isLoading && (
-        <div className="px-3 md:px-4 py-2 border-b border-border">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+        {/* Search bar */}
+        {projectsCount > 0 && !isLoading && (
+          <div className="relative mt-2.5">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground/50 pointer-events-none" />
            <Input
              type="text"
              placeholder={t('projects.searchPlaceholder')}
              value={searchFilter}
              onChange={(event) => onSearchFilterChange(event.target.value)}
-              className="pl-9 h-9 text-sm bg-muted/50 border-0 focus:bg-background focus:ring-1 focus:ring-primary/20"
+              className="nav-search-input pl-9 pr-8 h-9 text-sm rounded-xl border-0 placeholder:text-muted-foreground/40 focus-visible:ring-0 focus-visible:ring-offset-0 transition-all duration-200"
            />
            {searchFilter && (
              <button
                onClick={onClearSearchFilter}
-                className="absolute right-2 top-1/2 transform -translate-y-1/2 p-1 hover:bg-accent rounded"
+                className="absolute right-2.5 top-1/2 -translate-y-1/2 p-0.5 hover:bg-accent rounded-md"
              >
                <X className="w-3 h-3 text-muted-foreground" />
              </button>
            )}
          </div>
+        )}
+      </div>
+
+      {/* Desktop divider */}
+      <div className="hidden md:block nav-divider" />
+
+      {/* Mobile header */}
+      <div
+        className="md:hidden p-3 pb-2"
+        style={isPWA && isMobile ? { paddingTop: '16px' } : {}}
+      >
+        <div className="flex items-center justify-between">
+          {IS_PLATFORM ? (
+            <a
+              href="https://cloudcli.ai/dashboard"
+              className="flex items-center gap-2.5 active:opacity-70 transition-opacity min-w-0"
+              title={t('tooltips.viewEnvironments')}
+            >
+              <LogoBlock />
+            </a>
+          ) : (
+            <LogoBlock />
+          )}
+
+          <div className="flex gap-1.5 flex-shrink-0">
+            <button
+              className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center active:scale-95 transition-all"
+              onClick={onRefresh}
+              disabled={isRefreshing}
+            >
+              <RefreshCw className={`w-4 h-4 text-muted-foreground ${isRefreshing ? 'animate-spin' : ''}`} />
+            </button>
+            <button
+              className="w-8 h-8 rounded-lg bg-primary/90 text-primary-foreground flex items-center justify-center active:scale-95 transition-all"
+              onClick={onCreateProject}
+            >
+              <FolderPlus className="w-4 h-4" />
+            </button>
+          </div>
        </div>
-      )}
-    </>
+
+        {/* Mobile search */}
+        {projectsCount > 0 && !isLoading && (
+          <div className="relative mt-2.5">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 pointer-events-none" />
+            <Input
+              type="text"
+              placeholder={t('projects.searchPlaceholder')}
+              value={searchFilter}
+              onChange={(event) => onSearchFilterChange(event.target.value)}
+              className="nav-search-input pl-10 pr-9 h-10 text-sm rounded-xl border-0 placeholder:text-muted-foreground/40 focus-visible:ring-0 focus-visible:ring-offset-0 transition-all duration-200"
+            />
+            {searchFilter && (
+              <button
+                onClick={onClearSearchFilter}
+                className="absolute right-2.5 top-1/2 -translate-y-1/2 p-1 hover:bg-accent rounded-md"
+              >
+                <X className="w-3.5 h-3.5 text-muted-foreground" />
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Mobile divider */}
+      <div className="md:hidden nav-divider" />
+    </div>
  );
 }
--- a/src/components/sidebar/view/subcomponents/SidebarModals.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarModals.tsx
@@ -8,6 +8,7 @@ import Settings from '../../../Settings';
 import VersionUpgradeModal from '../../../modals/VersionUpgradeModal';
 import type { Project } from '../../../../types/app';
 import type { ReleaseInfo } from '../../../../types/sharedTypes';
+import type { InstallMode } from '../../../../hooks/useVersionCheck';
 import { normalizeProjectForSettings } from '../../utils/utils';
 import type { DeleteProjectConfirmation, SessionDeleteConfirmation, SettingsProject } from '../../types/types';

@@ -30,6 +31,7 @@ type SidebarModalsProps = {
  releaseInfo: ReleaseInfo | null;
  currentVersion: string;
  latestVersion: string | null;
+  installMode: InstallMode;
  t: TFunction;
 };

@@ -65,6 +67,7 @@ export default function SidebarModals({
  releaseInfo,
  currentVersion,
  latestVersion,
+  installMode,
  t,
 }: SidebarModalsProps) {
  // Settings expects project identity/path fields to be present for dropdown labels and local-scope MCP config.
@@ -84,12 +87,16 @@ export default function SidebarModals({
          document.body,
        )}

-      <TypedSettings
-        isOpen={showSettings}
-        onClose={onCloseSettings}
-        projects={settingsProjects}
-        initialTab={settingsInitialTab}
-      />
+      {showSettings &&
+        ReactDOM.createPortal(
+          <TypedSettings
+            isOpen={showSettings}
+            onClose={onCloseSettings}
+            projects={settingsProjects}
+            initialTab={settingsInitialTab}
+          />,
+          document.body,
+        )}

      {deleteConfirmation &&
        ReactDOM.createPortal(
@@ -195,6 +202,7 @@ export default function SidebarModals({
        releaseInfo={releaseInfo}
        currentVersion={currentVersion}
        latestVersion={latestVersion}
+        installMode={installMode}
      />
    </>
  );
--- a/src/hooks/useProjectsState.ts
+++ b/src/hooks/useProjectsState.ts
@@ -153,6 +153,13 @@ export function useProjectsState({
    void fetchProjects();
  }, [fetchProjects]);

+  // Auto-select the project when there is only one, so the user lands on the new session page
+  useEffect(() => {
+    if (!isLoadingProjects && projects.length === 1 && !selectedProject && !sessionId) {
+      setSelectedProject(projects[0]);
+    }
+  }, [isLoadingProjects, projects, selectedProject, sessionId]);
+
  useEffect(() => {
    if (!latestMessage) {
      return;
--- a/src/hooks/useVersionCheck.ts
+++ b/src/hooks/useVersionCheck.ts
@@ -21,10 +21,28 @@ const compareVersions = (v1: string, v2: string) => {
  return 0;
 };

+export type InstallMode = 'git' | 'npm';
+
 export const useVersionCheck = (owner: string, repo: string) => {
  const [updateAvailable, setUpdateAvailable] = useState(false);
  const [latestVersion, setLatestVersion] = useState<string | null>(null);
  const [releaseInfo, setReleaseInfo] = useState<ReleaseInfo | null>(null);
+  const [installMode, setInstallMode] = useState<InstallMode>('git');
+
+  useEffect(() => {
+    const fetchInstallMode = async () => {
+      try {
+        const response = await fetch('/health');
+        const data = await response.json();
+        if (data.installMode === 'npm' || data.installMode === 'git') {
+          setInstallMode(data.installMode);
+        }
+      } catch {
+        // Default to git on error
+      }
+    };
+    fetchInstallMode();
+  }, []);

  useEffect(() => {
    const checkVersion = async () => {
@@ -66,5 +84,5 @@ export const useVersionCheck = (owner: string, repo: string) => {
    return () => clearInterval(interval);
  }, [owner, repo]);

-  return { updateAvailable, latestVersion, currentVersion: version, releaseInfo };
+  return { updateAvailable, latestVersion, currentVersion: version, releaseInfo, installMode };
 }; 
--- a/src/i18n/config.js
+++ b/src/i18n/config.js
@@ -20,6 +20,7 @@ import enAuth from './locales/en/auth.json';
 import enSidebar from './locales/en/sidebar.json';
 import enChat from './locales/en/chat.json';
 import enCodeEditor from './locales/en/codeEditor.json';
+import enTasks from './locales/en/tasks.json';

 import koCommon from './locales/ko/common.json';
 import koSettings from './locales/ko/settings.json';
@@ -35,6 +36,14 @@ import zhSidebar from './locales/zh-CN/sidebar.json';
 import zhChat from './locales/zh-CN/chat.json';
 import zhCodeEditor from './locales/zh-CN/codeEditor.json';

+import jaCommon from './locales/ja/common.json';
+import jaSettings from './locales/ja/settings.json';
+import jaAuth from './locales/ja/auth.json';
+import jaSidebar from './locales/ja/sidebar.json';
+import jaChat from './locales/ja/chat.json';
+import jaCodeEditor from './locales/ja/codeEditor.json';
+import jaTasks from './locales/ja/tasks.json';
+
 // Import supported languages configuration
 import { languages } from './languages.js';

@@ -66,6 +75,7 @@ i18n
        sidebar: enSidebar,
        chat: enChat,
        codeEditor: enCodeEditor,
+        tasks: enTasks,
      },
      ko: {
        common: koCommon,
@@ -83,6 +93,15 @@ i18n
        chat: zhChat,
        codeEditor: zhCodeEditor,
      },
+      ja: {
+        common: jaCommon,
+        settings: jaSettings,
+        auth: jaAuth,
+        sidebar: jaSidebar,
+        chat: jaChat,
+        codeEditor: jaCodeEditor,
+        tasks: jaTasks,
+      },
    },

    // Default language
@@ -95,7 +114,7 @@ i18n
    debug: import.meta.env.DEV,

    // Namespaces - load only what's needed
-    ns: ['common', 'settings', 'auth', 'sidebar', 'chat', 'codeEditor'],
+    ns: ['common', 'settings', 'auth', 'sidebar', 'chat', 'codeEditor', 'tasks'],
    defaultNS: 'common',

    // Key separator for nested keys (default: '.')
--- a/src/i18n/languages.js
+++ b/src/i18n/languages.js
@@ -24,6 +24,11 @@ export const languages = [
    label: 'Simplified Chinese',
    nativeName: '简体中文',
  },
+  {
+    value: 'ja',
+    label: 'Japanese',
+    nativeName: '日本語',
+  },
 ];

 /**
--- a/src/i18n/locales/en/chat.json
+++ b/src/i18n/locales/en/chat.json
@@ -175,7 +175,11 @@
      "showingOf": "Showing {{shown}} of {{total}} messages",
      "scrollToLoad": "Scroll up to load more",
      "showingLast": "Showing last {{count}} messages ({{total}} total)",
-      "loadEarlier": "Load earlier messages"
+      "loadEarlier": "Load earlier messages",
+      "loadAll": "Load all messages",
+      "loadingAll": "Loading all messages...",
+      "allLoaded": "All messages loaded",
+      "perfWarning": "All messages loaded — scrolling may be slower. Click \"Scroll to bottom\" to restore performance."
    }
  },
  "shell": {
--- a/src/i18n/locales/en/codeEditor.json
+++ b/src/i18n/locales/en/codeEditor.json
@@ -20,7 +20,9 @@
    "saved": "Saved!",
    "exitFullscreen": "Exit fullscreen",
    "fullscreen": "Fullscreen",
-    "close": "Close"
+    "close": "Close",
+    "previewMarkdown": "Preview markdown",
+    "editMarkdown": "Edit markdown"
  },
  "footer": {
    "lines": "Lines:",
--- a/src/i18n/locales/en/common.json
+++ b/src/i18n/locales/en/common.json
@@ -200,6 +200,7 @@
    "viewFullRelease": "View full release",
    "updateProgress": "Update Progress:",
    "manualUpgrade": "Manual upgrade:",
+    "npmUpgradeCommand": "npm install -g @siteboon/claude-code-ui@latest",
    "manualUpgradeHint": "Or click \"Update Now\" to run the update automatically.",
    "updateCompleted": "Update completed successfully!",
    "restartServer": "Please restart the server to apply changes.",
--- a/src/i18n/locales/en/tasks.json
+++ b/src/i18n/locales/en/tasks.json
@@ -0,0 +1,142 @@
+{
+  "notConfigured": {
+    "title": "TaskMaster AI is not configured",
+    "description": "TaskMaster helps break down complex projects into manageable tasks with AI-powered assistance",
+    "whatIsTitle": "🎯 What is TaskMaster?",
+    "features": {
+      "aiPowered": "AI-Powered Task Management: Break complex projects into manageable subtasks",
+      "prdTemplates": "PRD Templates: Generate tasks from Product Requirements Documents",
+      "dependencyTracking": "Dependency Tracking: Understand task relationships and execution order",
+      "progressVisualization": "Progress Visualization: Kanban boards and detailed task analytics",
+      "cliIntegration": "CLI Integration: Use taskmaster commands for advanced workflows"
+    },
+    "initializeButton": "Initialize TaskMaster AI"
+  },
+  "gettingStarted": {
+    "title": "Getting Started with TaskMaster",
+    "subtitle": "TaskMaster is initialized! Here's what to do next:",
+    "steps": {
+      "createPRD": {
+        "title": "Create a Product Requirements Document (PRD)",
+        "description": "Discuss your project idea and create a PRD that describes what you want to build.",
+        "addButton": "Add PRD",
+        "existingPRDs": "Existing PRDs:"
+      },
+      "generateTasks": {
+        "title": "Generate Tasks from PRD",
+        "description": "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."
+      },
+      "analyzeTasks": {
+        "title": "Analyze & Expand Tasks",
+        "description": "Ask your AI assistant to analyze task complexity and expand them into detailed subtasks for easier implementation."
+      },
+      "startBuilding": {
+        "title": "Start Building",
+        "description": "Ask your AI assistant to begin working on tasks, update their status, and add new tasks as your project evolves."
+      }
+    },
+    "tip": "💡 Tip: Start with a PRD to get the most out of TaskMaster's AI-powered task generation"
+  },
+  "setupModal": {
+    "title": "TaskMaster Setup",
+    "subtitle": "Interactive CLI for {{projectName}}",
+    "willStart": "TaskMaster initialization will start automatically",
+    "completed": "TaskMaster setup completed! You can now close this window.",
+    "closeButton": "Close",
+    "closeContinueButton": "Close & Continue"
+  },
+  "helpGuide": {
+    "title": "Getting Started with TaskMaster",
+    "subtitle": "Your guide to productive task management",
+    "examples": {
+      "parsePRD": "💬 Example:\n\"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?\"",
+      "expandTask": "💬 Example:\n\"Task 5 seems complex. Can you break it down into subtasks?\"",
+      "addTask": "💬 Example:\n\"Please add a new task to implement user profile image uploads using Cloudinary, research the best approach.\""
+    },
+    "moreExamples": "View more examples and usage patterns →",
+    "proTips": {
+      "title": "💡 Pro Tips",
+      "search": "Use the search bar to quickly find specific tasks",
+      "views": "Switch between Kanban, List, and Grid views using the view toggles",
+      "filters": "Use filters to focus on specific task statuses or priorities",
+      "details": "Click on any task to view detailed information and manage subtasks"
+    },
+    "learnMore": {
+      "title": "📚 Learn More",
+      "description": "TaskMaster AI is an advanced task management system built for developers. Get documentation, examples, and contribute to the project.",
+      "githubButton": "View on GitHub"
+    }
+  },
+  "search": {
+    "placeholder": "Search tasks..."
+  },
+  "filters": {
+    "button": "Filters",
+    "status": "Status",
+    "priority": "Priority",
+    "sortBy": "Sort By",
+    "allStatuses": "All Statuses",
+    "allPriorities": "All Priorities",
+    "showing": "Showing {{filtered}} of {{total}} tasks",
+    "clearFilters": "Clear Filters"
+  },
+  "sort": {
+    "id": "ID",
+    "status": "Status",
+    "priority": "Priority",
+    "idAsc": "ID (Ascending)",
+    "idDesc": "ID (Descending)",
+    "titleAsc": "Title (A-Z)",
+    "titleDesc": "Title (Z-A)",
+    "statusAsc": "Status (Pending First)",
+    "statusDesc": "Status (Done First)",
+    "priorityAsc": "Priority (High First)",
+    "priorityDesc": "Priority (Low First)"
+  },
+  "views": {
+    "kanban": "Kanban view",
+    "list": "List view",
+    "grid": "Grid view"
+  },
+  "kanban": {
+    "pending": "📋 To Do",
+    "inProgress": "🚀 In Progress",
+    "done": "✅ Done",
+    "blocked": "🚫 Blocked",
+    "deferred": "⏳ Deferred",
+    "cancelled": "❌ Cancelled",
+    "noTasksYet": "No tasks yet",
+    "tasksWillAppear": "Tasks will appear here",
+    "moveTasksHere": "Move tasks here when started",
+    "completedTasksHere": "Completed tasks appear here",
+    "statusTasksHere": "Tasks with this status will appear here"
+  },
+  "buttons": {
+    "help": "TaskMaster Getting Started Guide",
+    "prds": "PRDs",
+    "addPRD": "Add PRD",
+    "addTask": "Add Task",
+    "createNewPRD": "Create New PRD",
+    "prdsAvailable": "{{count}} PRD(s) available"
+  },
+  "prd": {
+    "modified": "Modified: {{date}}"
+  },
+  "statuses": {
+    "pending": "Pending",
+    "in-progress": "In Progress",
+    "done": "Done",
+    "blocked": "Blocked",
+    "deferred": "Deferred",
+    "cancelled": "Cancelled"
+  },
+  "priorities": {
+    "high": "High",
+    "medium": "Medium",
+    "low": "Low"
+  },
+  "noMatchingTasks": {
+    "title": "No tasks match your filters",
+    "description": "Try adjusting your search or filter criteria."
+  }
+}
--- a/src/i18n/locales/ja/auth.json
+++ b/src/i18n/locales/ja/auth.json
@@ -0,0 +1,37 @@
+{
+  "login": {
+    "title": "おかえりなさい",
+    "description": "Claude Code UIアカウントにサインイン",
+    "username": "ユーザー名",
+    "password": "パスワード",
+    "submit": "サインイン",
+    "loading": "サインイン中...",
+    "errors": {
+      "invalidCredentials": "ユーザー名またはパスワードが正しくありません",
+      "requiredFields": "すべての項目を入力してください",
+      "networkError": "ネットワークエラー。もう一度お試しください。"
+    },
+    "placeholders": {
+      "username": "ユーザー名を入力",
+      "password": "パスワードを入力"
+    }
+  },
+  "register": {
+    "title": "アカウント作成",
+    "username": "ユーザー名",
+    "password": "パスワード",
+    "confirmPassword": "パスワードの確認",
+    "submit": "アカウントを作成",
+    "loading": "アカウントを作成中...",
+    "errors": {
+      "passwordMismatch": "パスワードが一致しません",
+      "usernameTaken": "このユーザー名は既に使用されています",
+      "weakPassword": "パスワードが弱すぎます"
+    }
+  },
+  "logout": {
+    "title": "サインアウト",
+    "confirm": "サインアウトしてもよろしいですか？",
+    "button": "サインアウト"
+  }
+}
--- a/src/i18n/locales/ja/chat.json
+++ b/src/i18n/locales/ja/chat.json
@@ -0,0 +1,205 @@
+{
+  "codeBlock": {
+    "copy": "コピー",
+    "copied": "コピーしました",
+    "copyCode": "コードをコピー"
+  },
+  "messageTypes": {
+    "user": "U",
+    "error": "エラー",
+    "tool": "ツール",
+    "claude": "Claude",
+    "cursor": "Cursor",
+    "codex": "Codex"
+  },
+  "tools": {
+    "settings": "ツール設定",
+    "error": "ツールエラー",
+    "result": "ツール結果",
+    "viewParams": "入力パラメータを表示",
+    "viewRawParams": "生パラメータを表示",
+    "viewDiff": "編集差分を表示:",
+    "creatingFile": "新規ファイルを作成:",
+    "updatingTodo": "Todoリストを更新中",
+    "read": "読み取り",
+    "readFile": "ファイルを読み取り",
+    "updateTodo": "Todoリストを更新",
+    "readTodo": "Todoリストを読み取り",
+    "searchResults": "件の結果"
+  },
+  "search": {
+    "found": "{{count}}件の{{type}}が見つかりました",
+    "file": "ファイル",
+    "files": "ファイル",
+    "pattern": "パターン:",
+    "in": "場所:"
+  },
+  "fileOperations": {
+    "updated": "ファイルを更新しました",
+    "created": "ファイルを作成しました",
+    "written": "ファイルを書き込みました",
+    "diff": "差分",
+    "newFile": "新規ファイル",
+    "viewContent": "ファイルの内容を表示",
+    "viewFullOutput": "全出力を表示（{{count}}文字）",
+    "contentDisplayed": "ファイルの内容は上の差分ビューに表示されています"
+  },
+  "interactive": {
+    "title": "インタラクティブプロンプト",
+    "waiting": "CLIでの応答を待っています",
+    "instruction": "Claudeが実行されているターミナルでオプションを選択してください。",
+    "selectedOption": "✓ Claudeがオプション{{number}}を選択しました",
+    "instructionDetail": "CLIでは、矢印キーまたは番号を入力してオプションを選択します。"
+  },
+  "thinking": {
+    "title": "思考中...",
+    "emoji": "💭 思考中..."
+  },
+  "json": {
+    "response": "JSONレスポンス"
+  },
+  "permissions": {
+    "grant": "{{tool}}に権限を付与",
+    "added": "権限を追加しました",
+    "addTo": "{{entry}}を許可されたツールに追加します。",
+    "retry": "権限を保存しました。ツールを使用するにはリクエストを再試行してください。",
+    "error": "権限を更新できませんでした。もう一度お試しください。",
+    "openSettings": "設定を開く"
+  },
+  "todo": {
+    "updated": "Todoリストを更新しました",
+    "current": "現在のTodoリスト"
+  },
+  "plan": {
+    "viewPlan": "📋 実装プランを表示",
+    "title": "実装プラン"
+  },
+  "usageLimit": {
+    "resetAt": "Claudeの使用制限に達しました。制限は**{{time}} {{timezone}}** - {{date}}にリセットされます"
+  },
+  "codex": {
+    "permissionMode": "権限モード",
+    "modes": {
+      "default": "デフォルトモード",
+      "acceptEdits": "編集を許可",
+      "bypassPermissions": "権限をバイパス",
+      "plan": "プランモード"
+    },
+    "descriptions": {
+      "default": "信頼されたコマンド（ls、cat、grep、git statusなど）のみ自動実行。その他のコマンドはスキップ。ワークスペースへの書き込みは可能。",
+      "acceptEdits": "ワークスペース内ですべてのコマンドを自動実行。サンドボックス環境での完全自動モード。",
+      "bypassPermissions": "制限なしの完全なシステムアクセス。すべてのコマンドがディスクとネットワークへの完全なアクセスで自動実行されます。注意して使用してください。",
+      "plan": "プランニングモード - コマンドは実行されません"
+    },
+    "technicalDetails": "技術的な詳細"
+  },
+  "input": {
+    "placeholder": "/ でコマンド、@ でファイル指定、または {{provider}} に何でも聞いてください...",
+    "placeholderDefault": "メッセージを入力...",
+    "disabled": "入力無効",
+    "attachFiles": "ファイルを添付",
+    "attachImages": "画像を添付",
+    "send": "送信",
+    "stop": "停止",
+    "hintText": {
+      "ctrlEnter": "Ctrl+Enterで送信 • Shift+Enterで改行 • Tabでモード切替 • / でスラッシュコマンド",
+      "enter": "Enterで送信 • Shift+Enterで改行 • Tabでモード切替 • / でスラッシュコマンド"
+    },
+    "clickToChangeMode": "クリックで権限モードを変更（または入力欄でTab）",
+    "showAllCommands": "すべてのコマンドを表示"
+  },
+  "thinkingMode": {
+    "selector": {
+      "title": "思考モード",
+      "description": "拡張思考によりClaudeがより多くの選択肢を検討できます",
+      "active": "有効",
+      "tip": "高い思考モードは時間がかかりますが、より深い分析が得られます"
+    },
+    "modes": {
+      "none": {
+        "name": "標準",
+        "description": "通常のClaudeの応答",
+        "prefix": ""
+      },
+      "think": {
+        "name": "Think",
+        "description": "基本的な拡張思考",
+        "prefix": "think"
+      },
+      "thinkHard": {
+        "name": "Think Hard",
+        "description": "より深い検討",
+        "prefix": "think hard"
+      },
+      "thinkHarder": {
+        "name": "Think Harder",
+        "description": "代替案を含む深い分析",
+        "prefix": "think harder"
+      },
+      "ultrathink": {
+        "name": "Ultrathink",
+        "description": "最大限の思考予算",
+        "prefix": "ultrathink"
+      }
+    },
+    "buttonTitle": "思考モード: {{mode}}"
+  },
+  "providerSelection": {
+    "title": "AIアシスタントを選択",
+    "description": "新しい会話を始めるプロバイダーを選択してください",
+    "selectModel": "モデルを選択",
+    "providerInfo": {
+      "anthropic": "by Anthropic",
+      "openai": "by OpenAI",
+      "cursorEditor": "AIコードエディタ"
+    },
+    "readyPrompt": {
+      "claude": "{{model}}でClaudeを使用する準備ができました。下にメッセージを入力してください。",
+      "cursor": "{{model}}でCursorを使用する準備ができました。下にメッセージを入力してください。",
+      "codex": "{{model}}でCodexを使用する準備ができました。下にメッセージを入力してください。",
+      "default": "上からプロバイダーを選択して開始してください"
+    }
+  },
+  "session": {
+    "continue": {
+      "title": "会話を続ける",
+      "description": "コードについて質問したり、変更をリクエストしたり、開発タスクのサポートを受けられます"
+    },
+    "loading": {
+      "olderMessages": "過去のメッセージを読み込んでいます...",
+      "sessionMessages": "セッションメッセージを読み込んでいます..."
+    },
+    "messages": {
+      "showingOf": "{{total}}件中{{shown}}件を表示",
+      "scrollToLoad": "上にスクロールしてさらに読み込む",
+      "showingLast": "最新{{count}}件を表示（全{{total}}件）",
+      "loadEarlier": "過去のメッセージを読み込む"
+    }
+  },
+  "shell": {
+    "selectProject": {
+      "title": "プロジェクトを選択",
+      "description": "プロジェクトを選択してそのディレクトリでシェルを開きます"
+    },
+    "status": {
+      "newSession": "新しいセッション",
+      "initializing": "初期化中...",
+      "restarting": "再起動中..."
+    },
+    "actions": {
+      "disconnect": "切断",
+      "disconnectTitle": "シェルから切断",
+      "restart": "再起動",
+      "restartTitle": "シェルを再起動（先に切断してください）",
+      "connect": "シェルで続行",
+      "connectTitle": "シェルに接続"
+    },
+    "loading": "ターミナルを読み込んでいます...",
+    "connecting": "シェルに接続しています...",
+    "startSession": "新しいClaudeセッションを開始",
+    "resumeSession": "セッションを再開: {{displayName}}...",
+    "runCommand": "{{projectName}}で{{command}}を実行",
+    "startCli": "{{projectName}}でClaude CLIを起動しています",
+    "defaultCommand": "コマンド"
+  }
+}
--- a/src/i18n/locales/ja/codeEditor.json
+++ b/src/i18n/locales/ja/codeEditor.json
@@ -0,0 +1,30 @@
+{
+  "toolbar": {
+    "changes": "件の変更",
+    "previousChange": "前の変更",
+    "nextChange": "次の変更",
+    "hideDiff": "差分ハイライトを非表示",
+    "showDiff": "差分ハイライトを表示",
+    "settings": "エディタ設定",
+    "collapse": "エディタを折りたたむ",
+    "expand": "エディタを全幅に展開"
+  },
+  "loading": "{{fileName}}を読み込んでいます...",
+  "header": {
+    "showingChanges": "変更を表示中"
+  },
+  "actions": {
+    "download": "ファイルをダウンロード",
+    "save": "保存",
+    "saving": "保存中...",
+    "saved": "保存しました！",
+    "exitFullscreen": "全画面を終了",
+    "fullscreen": "全画面",
+    "close": "閉じる"
+  },
+  "footer": {
+    "lines": "行数:",
+    "characters": "文字数:",
+    "shortcuts": "Ctrl+Sで保存 • Escで閉じる"
+  }
+}
--- a/src/i18n/locales/ja/common.json
+++ b/src/i18n/locales/ja/common.json
@@ -0,0 +1,223 @@
+{
+  "buttons": {
+    "save": "保存",
+    "cancel": "キャンセル",
+    "delete": "削除",
+    "create": "作成",
+    "edit": "編集",
+    "close": "閉じる",
+    "confirm": "確認",
+    "submit": "送信",
+    "retry": "再試行",
+    "refresh": "更新",
+    "search": "検索",
+    "clear": "クリア",
+    "copy": "コピー",
+    "download": "ダウンロード",
+    "upload": "アップロード",
+    "browse": "参照"
+  },
+  "tabs": {
+    "chat": "チャット",
+    "shell": "シェル",
+    "files": "ファイル",
+    "git": "ソース管理",
+    "tasks": "タスク"
+  },
+  "status": {
+    "loading": "読み込み中...",
+    "success": "成功",
+    "error": "エラー",
+    "failed": "失敗",
+    "pending": "保留中",
+    "completed": "完了",
+    "inProgress": "進行中"
+  },
+  "messages": {
+    "savedSuccessfully": "保存しました",
+    "deletedSuccessfully": "削除しました",
+    "updatedSuccessfully": "更新しました",
+    "operationFailed": "操作に失敗しました",
+    "networkError": "ネットワークエラー。接続を確認してください。",
+    "unauthorized": "認証されていません。ログインしてください。",
+    "notFound": "見つかりません",
+    "invalidInput": "入力が無効です",
+    "requiredField": "この項目は必須です",
+    "unknownError": "不明なエラーが発生しました"
+  },
+  "navigation": {
+    "settings": "設定",
+    "home": "ホーム",
+    "back": "戻る",
+    "next": "次へ",
+    "previous": "前へ",
+    "logout": "ログアウト"
+  },
+  "common": {
+    "language": "言語",
+    "theme": "テーマ",
+    "darkMode": "ダークモード",
+    "lightMode": "ライトモード",
+    "name": "名前",
+    "description": "説明",
+    "enabled": "有効",
+    "disabled": "無効",
+    "optional": "任意",
+    "version": "バージョン",
+    "select": "選択",
+    "selectAll": "すべて選択",
+    "deselectAll": "すべて解除"
+  },
+  "time": {
+    "justNow": "たった今",
+    "minutesAgo": "{{count}}分前",
+    "hoursAgo": "{{count}}時間前",
+    "daysAgo": "{{count}}日前",
+    "yesterday": "昨日"
+  },
+  "fileOperations": {
+    "newFile": "新規ファイル",
+    "newFolder": "新規フォルダ",
+    "rename": "名前の変更",
+    "move": "移動",
+    "copyPath": "パスをコピー",
+    "openInEditor": "エディタで開く"
+  },
+  "mainContent": {
+    "loading": "Claude Code UI を読み込んでいます",
+    "settingUpWorkspace": "ワークスペースを準備しています...",
+    "chooseProject": "プロジェクトを選択",
+    "selectProjectDescription": "サイドバーからプロジェクトを選択して、Claudeとコーディングを始めましょう。各プロジェクトにはチャットセッションとファイル履歴が含まれています。",
+    "tip": "ヒント",
+    "createProjectMobile": "上部のメニューボタンからプロジェクトにアクセスできます",
+    "createProjectDesktop": "サイドバーのフォルダアイコンをクリックして新しいプロジェクトを作成できます",
+    "newSession": "新しいセッション",
+    "untitledSession": "無題のセッション",
+    "projectFiles": "プロジェクトファイル"
+  },
+  "fileTree": {
+    "loading": "ファイルを読み込んでいます...",
+    "files": "ファイル",
+    "simpleView": "シンプル表示",
+    "compactView": "コンパクト表示",
+    "detailedView": "詳細表示",
+    "searchPlaceholder": "ファイルやフォルダを検索...",
+    "clearSearch": "検索をクリア",
+    "name": "名前",
+    "size": "サイズ",
+    "modified": "更新日時",
+    "permissions": "権限",
+    "noFilesFound": "ファイルが見つかりません",
+    "checkProjectPath": "プロジェクトのパスがアクセス可能か確認してください",
+    "noMatchesFound": "一致するものが見つかりません",
+    "tryDifferentSearch": "別の検索語を試すか、検索をクリアしてください",
+    "justNow": "たった今",
+    "minAgo": "{{count}}分前",
+    "hoursAgo": "{{count}}時間前",
+    "daysAgo": "{{count}}日前"
+  },
+  "projectWizard": {
+    "title": "新規プロジェクトを作成",
+    "steps": {
+      "type": "種類",
+      "configure": "設定",
+      "confirm": "確認"
+    },
+    "step1": {
+      "question": "既存のワークスペースがありますか？それとも新しく作成しますか？",
+      "existing": {
+        "title": "既存のワークスペース",
+        "description": "サーバー上に既存のワークスペースがあり、プロジェクト一覧に追加したい"
+      },
+      "new": {
+        "title": "新しいワークスペース",
+        "description": "新しいワークスペースを作成し、必要に応じてGitHubリポジトリからクローンする"
+      }
+    },
+    "step2": {
+      "existingPath": "ワークスペースのパス",
+      "newPath": "ワークスペースのパス",
+      "existingPlaceholder": "/path/to/existing/workspace",
+      "newPlaceholder": "/path/to/new/workspace",
+      "existingHelp": "既存のワークスペースディレクトリのフルパス",
+      "newHelp": "ワークスペースディレクトリのフルパス",
+      "githubUrl": "GitHub URL（任意）",
+      "githubPlaceholder": "https://github.com/username/repository",
+      "githubHelp": "任意: リポジトリをクローンするためのGitHub URLを入力してください",
+      "githubAuth": "GitHub認証（任意）",
+      "githubAuthHelp": "プライベートリポジトリの場合のみ必要です。パブリックリポジトリは認証なしでクローンできます。",
+      "loadingTokens": "保存済みトークンを読み込んでいます...",
+      "storedToken": "保存済みトークン",
+      "newToken": "新しいトークン",
+      "nonePublic": "なし（パブリック）",
+      "selectToken": "トークンを選択",
+      "selectTokenPlaceholder": "-- トークンを選択 --",
+      "tokenPlaceholder": "ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
+      "tokenHelp": "このトークンはこの操作にのみ使用されます",
+      "publicRepoInfo": "パブリックリポジトリには認証は不要です。パブリックリポジトリをクローンする場合、トークンは省略できます。",
+      "noTokensHelp": "保存済みトークンがありません。設定 → APIキーでトークンを追加すると再利用が簡単になります。",
+      "optionalTokenPublic": "GitHubトークン（パブリックリポジトリの場合は任意）",
+      "tokenPublicPlaceholder": "ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx（パブリックリポジトリの場合は空欄可）"
+    },
+    "step3": {
+      "reviewConfig": "設定の確認",
+      "workspaceType": "ワークスペースの種類:",
+      "existingWorkspace": "既存のワークスペース",
+      "newWorkspace": "新しいワークスペース",
+      "path": "パス:",
+      "cloneFrom": "クローン元:",
+      "authentication": "認証:",
+      "usingStoredToken": "保存済みトークンを使用:",
+      "usingProvidedToken": "入力されたトークンを使用",
+      "noAuthentication": "認証なし",
+      "sshKey": "SSHキー",
+      "existingInfo": "ワークスペースがプロジェクト一覧に追加され、Claude/Cursorセッションで使用できるようになります。",
+      "newWithClone": "このフォルダからリポジトリがクローンされます。",
+      "newEmpty": "ワークスペースがプロジェクト一覧に追加され、Claude/Cursorセッションで使用できるようになります。",
+      "cloningRepository": "リポジトリをクローンしています..."
+    },
+    "buttons": {
+      "cancel": "キャンセル",
+      "back": "戻る",
+      "next": "次へ",
+      "createProject": "プロジェクトを作成",
+      "creating": "作成中...",
+      "cloning": "クローン中..."
+    },
+    "errors": {
+      "selectType": "既存のワークスペースか新規作成かを選択してください",
+      "providePath": "ワークスペースのパスを入力してください",
+      "failedToCreate": "ワークスペースの作成に失敗しました",
+      "failedToCreateFolder": "フォルダの作成に失敗しました"
+    }
+  },
+  "versionUpdate": {
+    "title": "アップデートのお知らせ",
+    "newVersionReady": "新しいバージョンが利用可能です",
+    "currentVersion": "現在のバージョン",
+    "latestVersion": "最新バージョン",
+    "whatsNew": "変更点:",
+    "viewFullRelease": "リリース全文を見る",
+    "updateProgress": "アップデートの進捗:",
+    "manualUpgrade": "手動アップグレード:",
+    "npmUpgradeCommand": "npm install -g @siteboon/claude-code-ui@latest",
+    "manualUpgradeHint": "または「今すぐ更新」をクリックして自動的にアップデートを実行できます。",
+    "updateCompleted": "アップデートが完了しました！",
+    "restartServer": "変更を適用するにはサーバーを再起動してください。",
+    "updateFailed": "アップデートに失敗しました",
+    "buttons": {
+      "close": "閉じる",
+      "later": "後で",
+      "copyCommand": "コマンドをコピー",
+      "updateNow": "今すぐ更新",
+      "updating": "更新中..."
+    },
+    "ariaLabels": {
+      "closeModal": "バージョンアップグレードモーダルを閉じる",
+      "showSidebar": "サイドバーを表示",
+      "settings": "設定",
+      "updateAvailable": "アップデートあり",
+      "closeSidebar": "サイドバーを閉じる"
+    }
+  }
+}
--- a/src/i18n/locales/ja/settings.json
+++ b/src/i18n/locales/ja/settings.json
@@ -0,0 +1,418 @@
+{
+  "title": "設定",
+  "tabs": {
+    "account": "アカウント",
+    "permissions": "権限",
+    "mcpServers": "MCPサーバー",
+    "appearance": "外観"
+  },
+  "account": {
+    "title": "アカウント",
+    "language": "言語",
+    "languageLabel": "表示言語",
+    "languageDescription": "インターフェースの表示言語を選択してください",
+    "username": "ユーザー名",
+    "email": "メールアドレス",
+    "profile": "プロフィール",
+    "changePassword": "パスワードを変更"
+  },
+  "mcp": {
+    "title": "MCPサーバー",
+    "addServer": "サーバーを追加",
+    "editServer": "サーバーを編集",
+    "deleteServer": "サーバーを削除",
+    "serverName": "サーバー名",
+    "serverType": "サーバーの種類",
+    "config": "設定",
+    "testConnection": "接続テスト",
+    "status": "状態",
+    "connected": "接続済み",
+    "disconnected": "未接続",
+    "scope": {
+      "label": "スコープ",
+      "user": "ユーザー",
+      "project": "プロジェクト"
+    }
+  },
+  "appearance": {
+    "title": "外観",
+    "theme": "テーマ",
+    "codeEditor": "コードエディタ",
+    "editorTheme": "エディタのテーマ",
+    "wordWrap": "折り返し",
+    "showMinimap": "ミニマップを表示",
+    "lineNumbers": "行番号",
+    "fontSize": "フォントサイズ"
+  },
+  "actions": {
+    "saveChanges": "変更を保存",
+    "resetToDefaults": "デフォルトに戻す",
+    "cancelChanges": "変更をキャンセル"
+  },
+  "quickSettings": {
+    "title": "クイック設定",
+    "sections": {
+      "appearance": "外観",
+      "toolDisplay": "ツール表示",
+      "viewOptions": "表示オプション",
+      "inputSettings": "入力設定",
+      "whisperDictation": "Whisper音声入力"
+    },
+    "darkMode": "ダークモード",
+    "autoExpandTools": "ツールを自動展開",
+    "showRawParameters": "生パラメータを表示",
+    "showThinking": "思考を表示",
+    "autoScrollToBottom": "自動スクロール",
+    "sendByCtrlEnter": "Ctrl+Enterで送信",
+    "sendByCtrlEnterDescription": "有効にすると、Enterではなく Ctrl+Enter でメッセージを送信します。IMEユーザーの誤送信防止に便利です。",
+    "dragHandle": {
+      "dragging": "ドラッグ中",
+      "closePanel": "設定パネルを閉じる",
+      "openPanel": "設定パネルを開く",
+      "draggingStatus": "ドラッグ中...",
+      "toggleAndMove": "クリックで切替、ドラッグで移動"
+    },
+    "whisper": {
+      "modes": {
+        "default": "標準モード",
+        "defaultDescription": "音声をそのまま文字起こしします",
+        "prompt": "プロンプト強化",
+        "promptDescription": "ラフなアイデアを明確で詳細なAIプロンプトに変換します",
+        "vibe": "バイブモード",
+        "vibeDescription": "アイデアを明確なエージェント指示に整形します"
+      }
+    }
+  },
+  "mainTabs": {
+    "agents": "エージェント",
+    "appearance": "外観",
+    "git": "Git",
+    "apiTokens": "API & トークン",
+    "tasks": "タスク"
+  },
+  "appearanceSettings": {
+    "darkMode": {
+      "label": "ダークモード",
+      "description": "ライトテーマとダークテーマを切り替えます"
+    },
+    "projectSorting": {
+      "label": "プロジェクトの並び順",
+      "description": "サイドバーでのプロジェクトの並び順を設定します",
+      "alphabetical": "アルファベット順",
+      "recentActivity": "最近のアクティビティ順"
+    },
+    "codeEditor": {
+      "title": "コードエディタ",
+      "theme": {
+        "label": "エディタのテーマ",
+        "description": "コードエディタのデフォルトテーマ"
+      },
+      "wordWrap": {
+        "label": "折り返し",
+        "description": "エディタでデフォルトで折り返しを有効にします"
+      },
+      "showMinimap": {
+        "label": "ミニマップを表示",
+        "description": "差分ビューでナビゲーション用のミニマップを表示します"
+      },
+      "lineNumbers": {
+        "label": "行番号を表示",
+        "description": "エディタに行番号を表示します"
+      },
+      "fontSize": {
+        "label": "フォントサイズ",
+        "description": "エディタのフォントサイズ（ピクセル）"
+      }
+    }
+  },
+  "mcpForm": {
+    "title": {
+      "add": "MCPサーバーを追加",
+      "edit": "MCPサーバーを編集"
+    },
+    "importMode": {
+      "form": "フォーム入力",
+      "json": "JSONインポート"
+    },
+    "scope": {
+      "label": "スコープ",
+      "userGlobal": "ユーザー（グローバル）",
+      "projectLocal": "プロジェクト（ローカル）",
+      "userDescription": "ユーザースコープ: すべてのプロジェクトで利用可能",
+      "projectDescription": "ローカルスコープ: 選択したプロジェクトでのみ利用可能",
+      "cannotChange": "既存のサーバーを編集する場合、スコープは変更できません"
+    },
+    "fields": {
+      "serverName": "サーバー名",
+      "transportType": "トランスポートの種類",
+      "command": "コマンド",
+      "arguments": "引数（1行に1つ）",
+      "jsonConfig": "JSON設定",
+      "url": "URL",
+      "envVars": "環境変数（KEY=value、1行に1つ）",
+      "headers": "ヘッダー（KEY=value、1行に1つ）",
+      "selectProject": "プロジェクトを選択..."
+    },
+    "placeholders": {
+      "serverName": "my-server"
+    },
+    "validation": {
+      "missingType": "必須フィールドがありません: type",
+      "stdioRequiresCommand": "stdioタイプにはcommandフィールドが必要です",
+      "httpRequiresUrl": "{{type}}タイプにはurlフィールドが必要です",
+      "invalidJson": "無効なJSON形式です",
+      "jsonHelp": "MCPサーバー設定をJSON形式で貼り付けてください。例:",
+      "jsonExampleStdio": "• stdio: {\"type\":\"stdio\",\"command\":\"npx\",\"args\":[\"@upstash/context7-mcp\"]}",
+      "jsonExampleHttp": "• http/sse: {\"type\":\"http\",\"url\":\"https://api.example.com/mcp\"}"
+    },
+    "configDetails": "設定の詳細（{{configFile}}より）",
+    "projectPath": "パス: {{path}}",
+    "actions": {
+      "cancel": "キャンセル",
+      "saving": "保存中...",
+      "addServer": "サーバーを追加",
+      "updateServer": "サーバーを更新"
+    }
+  },
+  "saveStatus": {
+    "success": "設定を保存しました！",
+    "error": "設定の保存に失敗しました",
+    "saving": "保存中..."
+  },
+  "footerActions": {
+    "save": "設定を保存",
+    "cancel": "キャンセル"
+  },
+  "git": {
+    "title": "Git設定",
+    "description": "コミット用のGit IDを設定します。この設定は git config --global で適用されます",
+    "name": {
+      "label": "Git名前",
+      "help": "コミットに使用する名前"
+    },
+    "email": {
+      "label": "Gitメールアドレス",
+      "help": "コミットに使用するメールアドレス"
+    },
+    "actions": {
+      "save": "設定を保存",
+      "saving": "保存中..."
+    },
+    "status": {
+      "success": "保存しました"
+    }
+  },
+  "apiKeys": {
+    "title": "APIキー",
+    "description": "外部APIにアクセスするためのAPIキーを生成します。",
+    "newKey": {
+      "alertTitle": "⚠️ APIキーを保存してください",
+      "alertMessage": "このキーが表示されるのは今回限りです。安全な場所に保管してください。",
+      "iveSavedIt": "保存しました"
+    },
+    "form": {
+      "placeholder": "APIキーの名前（例: 本番サーバー）",
+      "createButton": "作成",
+      "cancelButton": "キャンセル"
+    },
+    "newButton": "新しいAPIキー",
+    "empty": "APIキーはまだ作成されていません。",
+    "list": {
+      "created": "作成日:",
+      "lastUsed": "最終使用日:"
+    },
+    "confirmDelete": "このAPIキーを削除してもよろしいですか？",
+    "status": {
+      "active": "有効",
+      "inactive": "無効"
+    },
+    "github": {
+      "title": "GitHubトークン",
+      "description": "外部APIからプライベートリポジトリをクローンするためのGitHubパーソナルアクセストークンを追加します。",
+      "descriptionAlt": "プライベートリポジトリをクローンするためのGitHubパーソナルアクセストークンを追加します。保存せずにAPIリクエストで直接トークンを渡すこともできます。",
+      "addButton": "トークンを追加",
+      "form": {
+        "namePlaceholder": "トークンの名前（例: 個人リポジトリ）",
+        "tokenPlaceholder": "GitHubパーソナルアクセストークン（ghp_...）",
+        "descriptionPlaceholder": "説明（任意）",
+        "addButton": "トークンを追加",
+        "cancelButton": "キャンセル",
+        "howToCreate": "GitHubパーソナルアクセストークンの作成方法 →"
+      },
+      "empty": "GitHubトークンはまだ追加されていません。",
+      "added": "追加日:",
+      "confirmDelete": "このGitHubトークンを削除してもよろしいですか？"
+    },
+    "apiDocsLink": "APIドキュメント",
+    "documentation": {
+      "title": "外部APIドキュメント",
+      "description": "外部APIを使用してアプリケーションからClaude/Cursorセッションを起動する方法を学びます。",
+      "viewLink": "APIドキュメントを見る →"
+    },
+    "loading": "読み込み中...",
+    "version": {
+      "updateAvailable": "アップデートあり: v{{version}}"
+    }
+  },
+  "tasks": {
+    "checking": "TaskMasterのインストールを確認しています...",
+    "notInstalled": {
+      "title": "TaskMaster AI CLIがインストールされていません",
+      "description": "タスク管理機能を使用するにはTaskMaster CLIが必要です。以下のコマンドでインストールしてください:",
+      "installCommand": "npm install -g task-master-ai",
+      "viewOnGitHub": "GitHubで見る",
+      "afterInstallation": "インストール後:",
+      "steps": {
+        "restart": "このアプリケーションを再起動してください",
+        "autoAvailable": "TaskMaster機能が自動的に利用可能になります",
+        "initCommand": "プロジェクトディレクトリで task-master init を実行してください"
+      }
+    },
+    "settings": {
+      "enableLabel": "TaskMaster統合を有効にする",
+      "enableDescription": "インターフェース全体でTaskMasterのタスク、バナー、サイドバーインジケータを表示します"
+    }
+  },
+  "agents": {
+    "authStatus": {
+      "checking": "確認中...",
+      "connected": "接続済み",
+      "notConnected": "未接続",
+      "disconnected": "切断",
+      "checkingAuth": "認証状態を確認しています...",
+      "loggedInAs": "{{email}}でログイン中",
+      "authenticatedUser": "認証済みユーザー"
+    },
+    "account": {
+      "claude": {
+        "description": "Anthropic Claude AIアシスタント"
+      },
+      "cursor": {
+        "description": "Cursor AI搭載コードエディタ"
+      },
+      "codex": {
+        "description": "OpenAI Codex AIアシスタント"
+      }
+    },
+    "connectionStatus": "接続状態",
+    "login": {
+      "title": "ログイン",
+      "reAuthenticate": "再認証",
+      "description": "{{agent}}アカウントにサインインしてAI機能を有効にします",
+      "reAuthDescription": "別のアカウントでサインインするか、認証情報を更新します",
+      "button": "ログイン",
+      "reLoginButton": "再ログイン"
+    },
+    "error": "エラー: {{error}}"
+  },
+  "permissions": {
+    "title": "権限設定",
+    "skipPermissions": {
+      "label": "権限プロンプトをスキップ（注意して使用）",
+      "claudeDescription": "--dangerously-skip-permissions フラグに相当",
+      "cursorDescription": "Cursor CLIの -f フラグに相当"
+    },
+    "allowedTools": {
+      "title": "許可されたツール",
+      "description": "権限の確認なしに自動的に許可されるツール",
+      "placeholder": "例: \"Bash(git log:*)\" または \"Write\"",
+      "quickAdd": "よく使うツールを追加:",
+      "empty": "許可されたツールはありません"
+    },
+    "blockedTools": {
+      "title": "ブロックされたツール",
+      "description": "権限の確認なしに自動的にブロックされるツール",
+      "placeholder": "例: \"Bash(rm:*)\"",
+      "empty": "ブロックされたツールはありません"
+    },
+    "allowedCommands": {
+      "title": "許可されたシェルコマンド",
+      "description": "権限の確認なしに自動的に許可されるシェルコマンド",
+      "placeholder": "例: \"Shell(ls)\" または \"Shell(git status)\"",
+      "quickAdd": "よく使うコマンドを追加:",
+      "empty": "許可されたコマンドはありません"
+    },
+    "blockedCommands": {
+      "title": "ブロックされたシェルコマンド",
+      "description": "自動的にブロックされるシェルコマンド",
+      "placeholder": "例: \"Shell(rm -rf)\" または \"Shell(sudo)\"",
+      "empty": "ブロックされたコマンドはありません"
+    },
+    "toolExamples": {
+      "title": "ツールパターンの例:",
+      "bashGitLog": "- すべてのgit logコマンドを許可",
+      "bashGitDiff": "- すべてのgit diffコマンドを許可",
+      "write": "- すべてのWriteツールの使用を許可",
+      "bashRm": "- すべてのrmコマンドをブロック（危険）"
+    },
+    "shellExamples": {
+      "title": "シェルコマンドの例:",
+      "ls": "- lsコマンドを許可",
+      "gitStatus": "- git statusを許可",
+      "npmInstall": "- npm installを許可",
+      "rmRf": "- 再帰的削除をブロック"
+    },
+    "codex": {
+      "permissionMode": "権限モード",
+      "description": "Codexがファイルの変更やコマンドの実行を処理する方法を制御します",
+      "modes": {
+        "default": {
+          "title": "デフォルト",
+          "description": "信頼されたコマンド（ls、cat、grep、git statusなど）のみ自動実行。その他のコマンドはスキップ。ワークスペースへの書き込みは可能。"
+        },
+        "acceptEdits": {
+          "title": "編集を許可",
+          "description": "ワークスペース内ですべてのコマンドを自動実行。サンドボックス環境での完全自動モード。"
+        },
+        "bypassPermissions": {
+          "title": "権限をバイパス",
+          "description": "制限なしの完全なシステムアクセス。すべてのコマンドがディスクとネットワークへの完全なアクセスで自動実行されます。注意して使用してください。"
+        }
+      },
+      "technicalDetails": "技術的な詳細",
+      "technicalInfo": {
+        "default": "sandboxMode=workspace-write, approvalPolicy=untrusted。信頼されたコマンド: cat, cd, grep, head, ls, pwd, tail, git status/log/diff/show, find（-execなし）など。",
+        "acceptEdits": "sandboxMode=workspace-write, approvalPolicy=never。すべてのコマンドがプロジェクトディレクトリ内で自動実行。",
+        "bypassPermissions": "sandboxMode=danger-full-access, approvalPolicy=never。完全なシステムアクセス。信頼された環境でのみ使用してください。",
+        "overrideNote": "チャットインターフェースのモードボタンを使用してセッションごとに上書きできます。"
+      }
+    },
+    "actions": {
+      "add": "追加"
+    }
+  },
+  "mcpServers": {
+    "title": "MCPサーバー",
+    "description": {
+      "claude": "Model Context Protocolサーバーは、Claudeに追加のツールやデータソースを提供します",
+      "cursor": "Model Context Protocolサーバーは、Cursorに追加のツールやデータソースを提供します",
+      "codex": "Model Context Protocolサーバーは、Codexに追加のツールやデータソースを提供します"
+    },
+    "addButton": "MCPサーバーを追加",
+    "empty": "MCPサーバーは設定されていません",
+    "serverType": "種類",
+    "scope": {
+      "local": "ローカル",
+      "user": "ユーザー"
+    },
+    "config": {
+      "command": "コマンド",
+      "url": "URL",
+      "args": "引数",
+      "environment": "環境変数"
+    },
+    "tools": {
+      "title": "ツール",
+      "count": "（{{count}}）:",
+      "more": "他{{count}}件"
+    },
+    "actions": {
+      "edit": "サーバーを編集",
+      "delete": "サーバーを削除"
+    },
+    "help": {
+      "title": "Codex MCPについて",
+      "description": "Codexはstdioベースのツールサーバーをサポートしています。追加のツールやリソースでCodexの機能を拡張するサーバーを追加できます。"
+    }
+  }
+}
--- a/src/i18n/locales/ja/sidebar.json
+++ b/src/i18n/locales/ja/sidebar.json
@@ -0,0 +1,111 @@
+{
+  "projects": {
+    "title": "プロジェクト",
+    "newProject": "新規プロジェクト",
+    "deleteProject": "プロジェクトを削除",
+    "renameProject": "プロジェクト名を変更",
+    "noProjects": "プロジェクトが見つかりません",
+    "loadingProjects": "プロジェクトを読み込んでいます...",
+    "searchPlaceholder": "プロジェクトを検索...",
+    "projectNamePlaceholder": "プロジェクト名",
+    "starred": "お気に入り",
+    "all": "すべて",
+    "untitledSession": "無題のセッション",
+    "newSession": "新しいセッション",
+    "codexSession": "Codexセッション",
+    "fetchingProjects": "Claudeのプロジェクトとセッションを取得しています",
+    "projects": "プロジェクト",
+    "noMatchingProjects": "一致するプロジェクトがありません",
+    "tryDifferentSearch": "検索語を変えてお試しください",
+    "runClaudeCli": "プロジェクトディレクトリでClaude CLIを実行して始めましょう"
+  },
+  "app": {
+    "title": "Claude Code UI",
+    "subtitle": "AIコーディングアシスタント"
+  },
+  "sessions": {
+    "title": "セッション",
+    "newSession": "新しいセッション",
+    "deleteSession": "セッションを削除",
+    "renameSession": "セッション名を変更",
+    "noSessions": "セッションはまだありません",
+    "loadingSessions": "セッションを読み込んでいます...",
+    "unnamed": "名称未設定",
+    "loading": "読み込み中...",
+    "showMore": "さらにセッションを表示"
+  },
+  "tooltips": {
+    "viewEnvironments": "環境を表示",
+    "hideSidebar": "サイドバーを隠す",
+    "createProject": "新しいプロジェクトを作成",
+    "refresh": "プロジェクトとセッションを更新 (Ctrl+R)",
+    "renameProject": "プロジェクト名を変更 (F2)",
+    "deleteProject": "空のプロジェクトを削除 (Delete)",
+    "addToFavorites": "お気に入りに追加",
+    "removeFromFavorites": "お気に入りから削除",
+    "editSessionName": "セッション名を手動で編集",
+    "deleteSession": "このセッションを完全に削除",
+    "save": "保存",
+    "cancel": "キャンセル"
+  },
+  "navigation": {
+    "chat": "チャット",
+    "files": "ファイル",
+    "git": "Git",
+    "terminal": "ターミナル",
+    "tasks": "タスク"
+  },
+  "actions": {
+    "refresh": "更新",
+    "settings": "設定",
+    "collapseAll": "すべて折りたたむ",
+    "expandAll": "すべて展開",
+    "cancel": "キャンセル",
+    "save": "保存",
+    "delete": "削除",
+    "rename": "名前の変更"
+  },
+  "status": {
+    "active": "アクティブ",
+    "inactive": "非アクティブ",
+    "thinking": "思考中...",
+    "error": "エラー",
+    "aborted": "中断",
+    "unknown": "不明"
+  },
+  "time": {
+    "justNow": "たった今",
+    "oneMinuteAgo": "1分前",
+    "minutesAgo": "{{count}}分前",
+    "oneHourAgo": "1時間前",
+    "hoursAgo": "{{count}}時間前",
+    "oneDayAgo": "1日前",
+    "daysAgo": "{{count}}日前"
+  },
+  "messages": {
+    "deleteConfirm": "本当に削除しますか？",
+    "renameSuccess": "名前を変更しました",
+    "deleteSuccess": "削除しました",
+    "errorOccurred": "エラーが発生しました",
+    "deleteSessionConfirm": "このセッションを削除してもよろしいですか？この操作は取り消せません。",
+    "deleteProjectConfirm": "この空のプロジェクトを削除してもよろしいですか？この操作は取り消せません。",
+    "enterProjectPath": "プロジェクトのパスを入力してください",
+    "deleteSessionFailed": "セッションの削除に失敗しました。もう一度お試しください。",
+    "deleteSessionError": "セッションの削除でエラーが発生しました。もう一度お試しください。",
+    "deleteProjectFailed": "プロジェクトの削除に失敗しました。もう一度お試しください。",
+    "deleteProjectError": "プロジェクトの削除でエラーが発生しました。もう一度お試しください。",
+    "createProjectFailed": "プロジェクトの作成に失敗しました。もう一度お試しください。",
+    "createProjectError": "プロジェクトの作成でエラーが発生しました。もう一度お試しください。"
+  },
+  "version": {
+    "updateAvailable": "アップデートあり"
+  },
+  "deleteConfirmation": {
+    "deleteProject": "プロジェクトを削除",
+    "deleteSession": "セッションを削除",
+    "confirmDelete": "本当に削除しますか？",
+    "sessionCount": "このプロジェクトには{{count}}件の会話があります。",
+    "allConversationsDeleted": "すべての会話が完全に削除されます。",
+    "cannotUndo": "この操作は取り消せません。"
+  }
+}
--- a/src/i18n/locales/ja/tasks.json
+++ b/src/i18n/locales/ja/tasks.json
@@ -0,0 +1,142 @@
+{
+  "notConfigured": {
+    "title": "TaskMaster AIが設定されていません",
+    "description": "TaskMasterは、AIを活用した支援により、複雑なプロジェクトを管理しやすいタスクに分解するのに役立ちます",
+    "whatIsTitle": "🎯 TaskMasterとは？",
+    "features": {
+      "aiPowered": "AIを活用したタスク管理：複雑なプロジェクトを管理しやすいサブタスクに分解",
+      "prdTemplates": "PRDテンプレート：Product Requirements Documentからタスクを生成",
+      "dependencyTracking": "依存関係の追跡：タスクの関係性と実行順序を理解",
+      "progressVisualization": "進捗の可視化：カンバンボードと詳細なタスク分析",
+      "cliIntegration": "CLI統合：高度なワークフローのためにtaskmasterコマンドを使用"
+    },
+    "initializeButton": "TaskMaster AIを初期化"
+  },
+  "gettingStarted": {
+    "title": "TaskMasterを始める",
+    "subtitle": "TaskMasterが初期化されました！次にすることは:",
+    "steps": {
+      "createPRD": {
+        "title": "Product Requirements Document (PRD) を作成",
+        "description": "プロジェクトのアイデアについて話し合い、構築したい内容を説明するPRDを作成します。",
+        "addButton": "PRDを追加",
+        "existingPRDs": "既存のPRD:"
+      },
+      "generateTasks": {
+        "title": "PRDからタスクを生成",
+        "description": "PRDができたら、AIアシスタントに解析を依頼してください。TaskMasterが自動的に実装の詳細を含む管理しやすいタスクに分解します。"
+      },
+      "analyzeTasks": {
+        "title": "タスクの分析と展開",
+        "description": "AIアシスタントにタスクの複雑さを分析してもらい、より簡単に実装できる詳細なサブタスクに展開します。"
+      },
+      "startBuilding": {
+        "title": "開発を始める",
+        "description": "AIアシスタントにタスクの作業を開始してもらい、ステータスを更新し、プロジェクトの進行に応じて新しいタスクを追加します。"
+      }
+    },
+    "tip": "💡 ヒント：TaskMasterのAIを活用したタスク生成を最大限に活用するには、PRDから始めましょう"
+  },
+  "setupModal": {
+    "title": "TaskMasterのセットアップ",
+    "subtitle": "{{projectName}}のインタラクティブCLI",
+    "willStart": "TaskMasterの初期化が自動的に開始されます",
+    "completed": "TaskMasterのセットアップが完了しました！このウィンドウを閉じることができます。",
+    "closeButton": "閉じる",
+    "closeContinueButton": "閉じて続ける"
+  },
+  "helpGuide": {
+    "title": "TaskMasterを始める",
+    "subtitle": "生産的なタスク管理のガイド",
+    "examples": {
+      "parsePRD": "💬 例：\n「Claude Task Masterで新しいプロジェクトを初期化しました。.taskmaster/docs/prd.txtにPRDがあります。解析して初期タスクを設定するのを手伝ってもらえますか？」",
+      "expandTask": "💬 例：\n「タスク5は複雑そうです。サブタスクに分解してもらえますか？」",
+      "addTask": "💬 例：\n「Cloudinaryを使用してユーザープロフィール画像のアップロードを実装する新しいタスクを追加してください。最適なアプローチを調査してください。」"
+    },
+    "moreExamples": "さらなる例と使用パターンを見る →",
+    "proTips": {
+      "title": "💡 プロのヒント",
+      "search": "検索バーを使用して特定のタスクをすばやく見つける",
+      "views": "ビュー切替を使用してカンバン、リスト、グリッドビューを切り替える",
+      "filters": "フィルターを使用して特定のタスクステータスや優先度に焦点を当てる",
+      "details": "任意のタスクをクリックして詳細情報を表示し、サブタスクを管理する"
+    },
+    "learnMore": {
+      "title": "📚 詳細を見る",
+      "description": "TaskMaster AIは開発者向けに構築された高度なタスク管理システムです。ドキュメント、例を入手し、プロジェクトに貢献できます。",
+      "githubButton": "GitHubで見る"
+    }
+  },
+  "search": {
+    "placeholder": "タスクを検索..."
+  },
+  "filters": {
+    "button": "フィルター",
+    "status": "ステータス",
+    "priority": "優先度",
+    "sortBy": "並び替え",
+    "allStatuses": "すべてのステータス",
+    "allPriorities": "すべての優先度",
+    "showing": "{{filtered}}件のタスクを表示中（全{{total}}件）",
+    "clearFilters": "フィルターをクリア"
+  },
+  "sort": {
+    "id": "ID",
+    "status": "ステータス",
+    "priority": "優先度",
+    "idAsc": "ID（昇順）",
+    "idDesc": "ID（降順）",
+    "titleAsc": "タイトル（A-Z）",
+    "titleDesc": "タイトル（Z-A）",
+    "statusAsc": "ステータス（保留中が先）",
+    "statusDesc": "ステータス（完了が先）",
+    "priorityAsc": "優先度（高が先）",
+    "priorityDesc": "優先度（低が先）"
+  },
+  "views": {
+    "kanban": "カンバンビュー",
+    "list": "リストビュー",
+    "grid": "グリッドビュー"
+  },
+  "kanban": {
+    "pending": "📋 やること",
+    "inProgress": "🚀 進行中",
+    "done": "✅ 完了",
+    "blocked": "🚫 ブロック中",
+    "deferred": "⏳ 延期",
+    "cancelled": "❌ キャンセル",
+    "noTasksYet": "まだタスクはありません",
+    "tasksWillAppear": "タスクはここに表示されます",
+    "moveTasksHere": "開始したらタスクをここに移動",
+    "completedTasksHere": "完了したタスクはここに表示されます",
+    "statusTasksHere": "このステータスのタスクはここに表示されます"
+  },
+  "buttons": {
+    "help": "TaskMaster入門ガイド",
+    "prds": "PRD",
+    "addPRD": "PRDを追加",
+    "addTask": "タスクを追加",
+    "createNewPRD": "新しいPRDを作成",
+    "prdsAvailable": "{{count}}件のPRDがあります"
+  },
+  "prd": {
+    "modified": "更新日: {{date}}"
+  },
+  "statuses": {
+    "pending": "保留中",
+    "in-progress": "進行中",
+    "done": "完了",
+    "blocked": "ブロック中",
+    "deferred": "延期",
+    "cancelled": "キャンセル"
+  },
+  "priorities": {
+    "high": "高",
+    "medium": "中",
+    "low": "低"
+  },
+  "noMatchingTasks": {
+    "title": "フィルターに一致するタスクがありません",
+    "description": "検索条件またはフィルター基準を調整してみてください。"
+  }
+}
--- a/src/i18n/locales/ko/chat.json
+++ b/src/i18n/locales/ko/chat.json
@@ -175,7 +175,11 @@
      "showingOf": "{{total}}개 중 {{shown}}개 표시",
      "scrollToLoad": "위로 스크롤하여 더 로드",
      "showingLast": "마지막 {{count}}개 메시지 표시 (총 {{total}}개)",
-      "loadEarlier": "이전 메시지 로드"
+      "loadEarlier": "이전 메시지 로드",
+      "loadAll": "모든 메시지 로드",
+      "loadingAll": "모든 메시지 로딩 중...",
+      "allLoaded": "모든 메시지 로드 완료",
+      "perfWarning": "모든 메시지가 로드됨 - 스크롤이 느려질 수 있습니다. \"맨 아래로 스크롤\"을 클릭하면 성능이 복구됩니다."
    }
  },
  "shell": {
--- a/src/i18n/locales/ko/common.json
+++ b/src/i18n/locales/ko/common.json
@@ -200,6 +200,7 @@
    "viewFullRelease": "전체 릴리스 보기",
    "updateProgress": "업데이트 진행 상황:",
    "manualUpgrade": "수동 업그레이드:",
+    "npmUpgradeCommand": "npm install -g @siteboon/claude-code-ui@latest",
    "manualUpgradeHint": "또는 \"지금 업데이트\"를 클릭하여 자동으로 업데이트합니다.",
    "updateCompleted": "업데이트가 완료되었습니다!",
    "restartServer": "변경사항을 적용하려면 서버를 재시작하세요.",
--- a/src/i18n/locales/zh-CN/chat.json
+++ b/src/i18n/locales/zh-CN/chat.json
@@ -175,7 +175,11 @@
      "showingOf": "显示 {{shown}} / {{total}} 条消息",
      "scrollToLoad": "向上滚动以加载更多",
      "showingLast": "显示最近 {{count}} 条消息（共 {{total}} 条）",
-      "loadEarlier": "加载更早的消息"
+      "loadEarlier": "加载更早的消息",
+      "loadAll": "加载全部消息",
+      "loadingAll": "正在加载全部消息...",
+      "allLoaded": "全部消息已加载",
+      "perfWarning": "已加载全部消息 - 滚动可能变慢。点击「滚动到底部」恢复性能。"
    }
  },
  "shell": {
--- a/src/i18n/locales/zh-CN/common.json
+++ b/src/i18n/locales/zh-CN/common.json
@@ -200,6 +200,7 @@
    "viewFullRelease": "查看完整发布",
    "updateProgress": "更新进度：",
    "manualUpgrade": "手动升级：",
+    "npmUpgradeCommand": "npm install -g @siteboon/claude-code-ui@latest",
    "manualUpgradeHint": "或点击'立即更新'以自动运行更新。",
    "updateCompleted": "更新成功完成！",
    "restartServer": "请重启服务器以应用更改。",
--- a/src/index.css
+++ b/src/index.css
@@ -43,7 +43,19 @@
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
-    
+
+    /* Nav design tokens */
+    --nav-glass-bg: 0 0% 100% / 0.7;
+    --nav-glass-blur: 20px;
+    --nav-glass-saturate: 1.8;
+    --nav-tab-glow: 221.2 83.2% 53.3% / 0.18;
+    --nav-tab-ring: 221.2 83.2% 53.3% / 0.10;
+    --nav-float-shadow: 0 0% 0% / 0.06;
+    --nav-float-ring: 214.3 31.8% 91.4% / 0.5;
+    --nav-divider-color: 214.3 31.8% 91.4% / 0.5;
+    --nav-input-bg: 210 40% 96.1% / 0.5;
+    --nav-input-focus-ring: 221.2 83.2% 53.3% / 0.22;
+
    /* Safe area CSS variables */
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-right: env(safe-area-inset-right);
@@ -51,9 +63,10 @@
    --safe-area-inset-left: env(safe-area-inset-left);

    /* Mobile navigation dimensions - Single source of truth */
-    --mobile-nav-height: 60px;
-    --mobile-nav-padding: 12px;
-    --mobile-nav-total: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
+    /* Floating nav: ~52px bar + 8px bottom margin + 12px px-3 top spacing */
+    --mobile-nav-height: 52px;
+    --mobile-nav-padding: 20px;
+    --mobile-nav-total: calc(var(--mobile-nav-height) + var(--mobile-nav-padding) + env(safe-area-inset-bottom, 0px));

    /* Header safe area dimensions */
    --header-safe-area-top: env(safe-area-inset-top, 0px);
@@ -91,6 +104,18 @@
    --border: 217.2 32.6% 17.5%;
    --input: 220 13% 46%;
    --ring: 217.2 91.2% 59.8%;
+
+    /* Nav design tokens — dark overrides */
+    --nav-glass-bg: 217.2 91.2% 8% / 0.55;
+    --nav-glass-blur: 24px;
+    --nav-glass-saturate: 1.6;
+    --nav-tab-glow: 217.2 91.2% 59.8% / 0.25;
+    --nav-tab-ring: 217.2 91.2% 59.8% / 0.15;
+    --nav-float-shadow: 0 0% 0% / 0.35;
+    --nav-float-ring: 217.2 32.6% 17.5% / 0.3;
+    --nav-divider-color: 217.2 32.6% 17.5% / 0.5;
+    --nav-input-bg: 217.2 32.6% 17.5% / 0.5;
+    --nav-input-focus-ring: 217.2 91.2% 59.8% / 0.25;
  }
 }

@@ -134,14 +159,7 @@
  }

  /* PWA mode detected by JavaScript - more reliable */
-  html.pwa-mode,
-  body.pwa-mode {
-    height: 100%;
-    overflow: hidden;
-  }
-
  body.pwa-mode #root {
-    padding-top: var(--header-total-padding);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
    height: 100vh;
@@ -240,6 +258,42 @@
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 300ms ease-in-out;
  }
+
+  /* Nav glass surface — uses theme tokens */
+  .nav-glass {
+    background: hsl(var(--nav-glass-bg));
+    backdrop-filter: blur(var(--nav-glass-blur)) saturate(var(--nav-glass-saturate));
+    -webkit-backdrop-filter: blur(var(--nav-glass-blur)) saturate(var(--nav-glass-saturate));
+  }
+
+  /* Nav tab active pill glow — uses theme tokens */
+  .nav-tab-active {
+    box-shadow: 0 1px 8px hsl(var(--nav-tab-glow)),
+                0 0 0 1px hsl(var(--nav-tab-ring));
+  }
+
+  /* Floating mobile nav bar — uses theme tokens */
+  .mobile-nav-float {
+    box-shadow: 0 -1px 20px hsl(var(--nav-float-shadow)),
+                0 0 0 1px hsl(var(--nav-float-ring));
+  }
+
+  /* Subtle sidebar divider — uses theme tokens */
+  .nav-divider {
+    height: 1px;
+    background: linear-gradient(90deg, transparent, hsl(var(--nav-divider-color)) 20%, hsl(var(--nav-divider-color)) 80%, transparent);
+  }
+
+  /* Nav search input surface — uses theme tokens */
+  .nav-search-input {
+    background: hsl(var(--nav-input-bg));
+    border: none;
+  }
+
+  .nav-search-input:focus-within {
+    background: hsl(var(--background));
+    box-shadow: 0 0 0 2px hsl(var(--nav-input-focus-ring));
+  }
  
  /* Modal and dropdown transitions */
  .modal-transition {
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,20 +4,26 @@ import react from '@vitejs/plugin-react'
 export default defineConfig(({ command, mode }) => {
  // Load env file based on `mode` in the current working directory.
  const env = loadEnv(mode, process.cwd(), '')
-  
-  
+
+  const host = env.HOST || '0.0.0.0'
+  // When binding to all interfaces (0.0.0.0), proxy should connect to localhost
+  // Otherwise, proxy to the specific host the backend is bound to
+  const proxyHost = host === '0.0.0.0' ? 'localhost' : host
+  const port = env.PORT || 3001
+
  return {
    plugins: [react()],
    server: {
+      host,
      port: parseInt(env.VITE_PORT) || 5173,
      proxy: {
-        '/api': `http://localhost:${env.PORT || 3001}`,
+        '/api': `http://${proxyHost}:${port}`,
        '/ws': {
-          target: `ws://localhost:${env.PORT || 3001}`,
+          target: `ws://${proxyHost}:${port}`,
          ws: true
        },
        '/shell': {
-          target: `ws://localhost:${env.PORT || 3001}`,
+          target: `ws://${proxyHost}:${port}`,
          ws: true
        }
      }
Author	SHA1	Message	Date
Matthew Lloyd	23801e9cc1	fix: add support for Codex in the shell (#424 ) * fix: add support for Codex in the shell * fix: harden codex shell session resume command	2026-02-23 23:36:58 +01:00
simosmik	4f6ff9260d	Release 1.20.1	2026-02-23 22:23:33 +00:00
viper151	49061bc7a3	Update DEFAULT model version to gpt-5.3-codex (#426 )	2026-02-23 23:13:50 +01:00
simosmik	50e097d4ac	feat: migrate legacy database to new location and improve last login update handling	2026-02-23 22:12:00 +00:00
simosmik	f986004319	feat: implement install mode detection and update commands in version upgrade process	2026-02-23 21:55:53 +00:00
simosmik	f488a346ef	Release 1.19.1	2026-02-23 21:29:06 +00:00
simosmik	82efac4704	fix: add prepublishOnly script to build before publishing	2026-02-23 21:27:45 +00:00
viper151	81697d0e73	Update DEFAULT model version to gpt-5.3-codex (#417 )	2026-02-23 16:51:29 +01:00
simosmik	27bf09b0c1	Release 1.19.0	2026-02-23 11:56:33 +00:00
Haileyesus	7ccbc8d92d	chore: update @anthropic-ai/claude-agent-sdk to version 0.1.77 in package-lock.json (#410 )	2026-02-23 07:09:07 +01:00
Vadim Trunov	597e9c54b7	fix: slash commands with arguments bypass command execution (#392 ) * fix: intercept slash commands in handleSubmit to pass arguments correctly When a user types a slash command with arguments (e.g. `/feature implement dark mode`) and presses Enter, the command was not being intercepted as a slash command. Instead, the raw text was sent as a regular message to the Claude API, which responded with "Unknown skill: feature". Root cause: the command autocomplete menu (useSlashCommands) detects commands via the regex `/(^\|\s)\/(\S)$/` which only matches when the cursor is right after the command name with no spaces. As soon as the user types a space to add arguments, the pattern stops matching, the menu closes, and pressing Enter falls through to handleSubmit which sends the text as a plain message — completely bypassing command execution. This fix adds a slash command interceptor at the top of handleSubmit: - Checks if the trimmed input starts with `/` - Extracts the command name (text before the first space) - Looks up the command in the loaded slashCommands list - If found, delegates to executeCommand() which properly extracts arguments via regex and sends them to the backend /api/commands/execute endpoint - The backend then replaces $ARGUMENTS, $1, $2 etc. in the command template Changes: - Added `slashCommands` to the destructured return of useSlashCommands hook - Added slash command interception logic in handleSubmit before message dispatch - Added `executeCommand` and `slashCommands` to handleSubmit dependency array Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> fix: address review — pass rawInput param and cleanup UI state - Pass trimmedInput to executeCommand to avoid stale closure reads - Add UI cleanup (images, command menu, textarea) before early return - Update executeCommand signature to accept optional rawInput parameter Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-22 16:25:02 +03:00
mjfork	cccd915c33	feat: add HOST environment variable for configurable bind address (#360 ) * feat: add HOST environment variable for configurable bind address Allow users to specify which host/IP address the servers should bind to via the HOST environment variable. Defaults to 0.0.0.0 (all interfaces) to maintain backward compatibility. This enables users to restrict the server to localhost only (127.0.0.1) for security purposes or bind to a specific network interface. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix: use correct proxy host when HOST is set to specific interface When HOST is set to a specific interface (e.g., 192.168.1.100), the Vite proxy needs to connect to that same host, not localhost. This fix: - Adds proxyHost logic that uses localhost when HOST=0.0.0.0, otherwise uses the specific HOST value for proxy targets - Adds DISPLAY_HOST to show a user-friendly URL in console output (0.0.0.0 isn't a connectable address) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Michael Fork <mjfork@users.noreply.github.com> Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com> Co-authored-by: Haileyesus <118998054+blackmammoth@users.noreply.github.com>	2026-02-20 21:23:10 +03:00
viper151	0207a1f3a3	Feat: subagent tool grouping (#398 ) * fix(mobile): prevent bottom padding removal on input focus * fix: change subagent rendering * fix: subagent task name	2026-02-19 17:32:45 +01:00
Feraudet Cyril	38a593c97f	fix(macos): fix node-pty posix_spawnp error with postinstall script (#347 ) * fix(macos): fix node-pty posix_spawnp error with postinstall script Add postinstall script that fixes spawn-helper permissions on macOS. The node-pty package ships spawn-helper without execute permissions (644), causing "posix_spawnp failed" errors when spawning terminal processes. Closes #284	2026-02-18 12:21:00 +01:00
simosmik	fc369d047e	refactor(releases): Create a contributing guide and proper release notes using a release-it plugin	2026-02-18 09:45:14 +00:00
simosmik	9d8e92b5a4	Release 1.18.2	2026-02-18 07:35:25 +00:00
simosmik	07f1d9a4a8	fix: pwa mode and mobile safe area padding	2026-02-18 07:32:39 +00:00
simosmik	e853d29584	feat: add japanese readme	2026-02-17 22:01:06 +00:00
simosmik	09af23bcaf	Release 1.18.1	2026-02-17 21:56:27 +00:00
simosmik	520e3f2280	fix: login for unauthenticated users would not work	2026-02-16 19:12:46 +00:00
Iván Yepes	151e8ee808	FEAT: improve conversation history loading for long sessions (#371 ) * feat: add "Load all messages" button for long conversations Scrolling up through long conversations requires many "load more" cycles. This adds a "Load all messages" floating button that fetches the entire conversation history in one shot. - Floating overlay pill appears after each batch finishes loading, persists 2s - Shows loading spinner while fetching all messages - Shows green "All messages loaded" confirmation for 1s before disappearing - Preserves scroll position when bulk-loading (no viewport jump) - Ref-based guards prevent scroll handler from re-fetching after load-all - Performance warning shown; "Scroll to bottom" resets visible cap - Clean state reset on session switch - i18n keys for en and zh-CN Note: default page size (20) and visible cap (100) are unchanged. These could be increased in a follow-up or made configurable via settings. * re-implement load-all feature for new TS architecture	2026-02-16 21:20:28 +03:00
Wondoo Kang	2cfcae049b	fix: update codex sdk and add codex model IDs (#385 )	2026-02-16 21:07:44 +03:00
Hinata Oishi	8723393b66	feat(i18n): add Japanese language support #384	2026-02-16 20:56:24 +03:00
vadymtrunov	29b80b1905	fix: parse serialized JSON content in subagent Task results Subagent (Task/Explore) results were rendered as raw JSON `[{"type":"text","text":"..."}]` with literal `\n` instead of formatted markdown. The root cause was that the API sometimes returns content blocks as a serialized JSON string rather than a parsed array. The existing `Array.isArray()` check missed this case and fell through to `String()`, displaying raw JSON. Now the Task tool result handler tries to JSON.parse string content before checking for array structure, matching the pattern already used by exit_plan_mode. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-16 20:31:33 +03:00
simosmik	c55e996f3a	fix: small rebrand fixes	2026-02-16 14:17:54 +00:00
simosmik	e7800c494f	Release 1.18.0	2026-02-16 14:15:21 +00:00
simosmik	374fe35915	fix: editor toolbar mobile visibility	2026-02-16 14:14:10 +00:00
simosmik	33b0ea4c4a	feature: swap default code editor to sidebar and make the modal optional	2026-02-16 14:02:18 +00:00
simosmik	412102c531	feat: show .env syntax highlighting and markdown viewer	2026-02-16 13:48:11 +00:00
simosmik	afe1be7fca	Feat: Refine design language and use theme tokens across most pages.	2026-02-16 13:17:47 +00:00
simosmik	42f13e151c	feature: Ask User Question implementation for Claude Code & upgrade claude agent sdk to 0.1.71 to support the tool	2026-02-16 12:14:51 +00:00
				`@@ -0,0 +1 @@`
				`export { AskUserQuestionPanel } from './AskUserQuestionPanel';`