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-06 21:25:34 +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
73 changed files with 3568 additions and 398 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
@@ -6,7 +6,7 @@

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

-<div align="right"><i><a href="./README.md">English</a> · <a href="./README.zh-CN.md">中文</a></i></div>
+<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>

 ## 스크린샷

@@ -288,31 +288,7 @@ Claude Code, Cursor 또는 Codex 세션을 사용할 수 있을 때 자동으로

 ### 기여하기

-기여를 환영합니다! 다음 가이드라인을 따라주세요:
-
-#### 시작하기
-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 변경 시 스크린샷
-   - 해당되는 경우 테스트 결과
-
-#### 기여 내용
- **버그 수정** - 안정성 향상에 도움
- **새로운 기능** - 기능 향상 (먼저 이슈에서 논의)
- **문서** - 가이드 및 API 문서 개선
- **UI/UX 개선** - 더 나은 사용자 경험
- **성능 최적화** - 더 빠르게 만들기
+기여를 환영합니다! 커밋 규칙, 개발 워크플로우, 릴리스 프로세스에 대한 자세한 내용은 [Contributing Guide](CONTRIBUTING.md)를 참조해주세요.

 ## 문제 해결

--- 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. 

-<div align="right"><i><b>English</b> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a></i></div>
+<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 中的活跃项目和会话,并从任何地方(移动端或桌面端)对它们进行修改。这为您提供了一个在任何地方都能正常使用的合适界面。

-<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ko.md">한국어</a></i></div>
+<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,12 +1,13 @@
 {
  "name": "@siteboon/claude-code-ui",
-  "version": "1.18.0",
+  "version": "1.20.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@siteboon/claude-code-ui",
-      "version": "1.18.0",
+      "version": "1.20.1",
+      "hasInstallScript": true,
      "license": "GPL-3.0",
      "dependencies": {
        "@anthropic-ai/claude-agent-sdk": "^0.1.71",
@@ -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",
@@ -69,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",
@@ -112,9 +114,9 @@
      }
    },
    "node_modules/@anthropic-ai/claude-agent-sdk": {
-      "version": "0.1.71",
-      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk/-/claude-agent-sdk-0.1.71.tgz",
-      "integrity": "sha512-O34SQCEsdU11Z2uy30GaJGRLdRbEwEvaQs8APywHVOW/EdIGE0rS/AE4V6p9j45/j5AFwh2USZWlbz5NTlLnrw==",
+      "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"
@@ -130,7 +132,7 @@
        "@img/sharp-win32-x64": "^0.33.5"
      },
      "peerDependencies": {
-        "zod": "^3.24.1 || ^4.0.0"
+        "zod": "^3.25.0 || ^4.0.0"
      }
    },
    "node_modules/@anthropic-ai/claude-agent-sdk/node_modules/@img/sharp-libvips-linuxmusl-arm64": {
@@ -689,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",
@@ -2510,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",
@@ -2543,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",
@@ -2856,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",
@@ -2997,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",
@@ -3337,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",
@@ -4249,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",
@@ -4344,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",
@@ -4639,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",
@@ -5165,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",
@@ -5931,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",
@@ -6413,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",
@@ -7190,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",
@@ -8387,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",
@@ -10761,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",
@@ -12088,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",
@@ -12260,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",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@siteboon/claude-code-ui",
-  "version": "1.18.0",
+  "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,7 +42,7 @@
    "ui",
    "mobile"
  ],
-  "author": "Claude Code UI Contributors",
+  "author": "CloudCLI UI Contributors",
  "license": "GPL-3.0",
  "dependencies": {
    "@anthropic-ai/claude-agent-sdk": "^0.1.71",
@@ -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",
@@ -98,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
@@ -250,7 +250,13 @@ function getAllSessions() {
 * @returns {Object} Transformed message ready for WebSocket
 */
 function transformMessage(sdkMessage) {
-  // Pass-through; SDK messages match frontend format.
+  // 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;
 }

--- 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
        });

@@ -1133,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`;
@@ -1169,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';
@@ -1886,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() {
@@ -1905,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('');
@@ -1913,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/FileTree.jsx
+++ b/src/components/FileTree.jsx
@@ -520,13 +520,13 @@ function FileTree({ selectedProject, onFileOpen }) {
                {item.name}
              </span>
            </div>
-            <div className="col-span-2 text-xs text-muted-foreground tabular-nums">
+            <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-xs text-muted-foreground">
+            <div className="col-span-3 text-sm text-muted-foreground">
              {formatRelativeTime(item.modified)}
            </div>
-            <div className="col-span-2 text-xs text-muted-foreground font-mono">
+            <div className="col-span-2 text-sm text-muted-foreground font-mono">
              {item.permissionsRwx || ''}
            </div>
          </div>
@@ -573,7 +573,7 @@ function FileTree({ selectedProject, onFileOpen }) {
                {item.name}
              </span>
            </div>
-            <div className="flex items-center gap-3 text-xs text-muted-foreground flex-shrink-0 ml-2">
+            <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>
@@ -615,7 +615,7 @@ function FileTree({ selectedProject, onFileOpen }) {
      {/* 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-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          <h3 className="text-sm font-medium text-foreground">
            {t('fileTree.files')}
          </h3>
          <div className="flex gap-0.5">
@@ -657,7 +657,7 @@ function FileTree({ selectedProject, onFileOpen }) {
            placeholder={t('fileTree.searchPlaceholder')}
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-7 pr-7 h-7 text-xs"
+            className="pl-8 pr-8 h-8 text-sm"
          />
          {searchQuery && (
            <Button
--- a/src/components/GitPanel.jsx
+++ b/src/components/GitPanel.jsx
@@ -656,11 +656,11 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                <p className="text-sm font-medium text-foreground truncate">
                  {commit.message}
                </p>
-                <p className="text-xs text-muted-foreground mt-1">
+                <p className="text-sm text-muted-foreground mt-1">
                  {commit.author} • {commit.date}
                </p>
              </div>
-              <span className="text-xs font-mono text-muted-foreground/60 flex-shrink-0">
+              <span className="text-sm font-mono text-muted-foreground/60 flex-shrink-0">
                {commit.hash.substring(0, 7)}
              </span>
            </div>
@@ -669,7 +669,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
        {isExpanded && diff && (
          <div className="bg-muted/50">
            <div className="max-h-96 overflow-y-auto p-2">
-              <div className="text-xs font-mono text-muted-foreground 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} />
@@ -792,7 +792,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                    e.stopPropagation();
                    setWrapText(!wrapText);
                  }}
-                  className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  title={wrapText ? "Switch to horizontal scroll" : "Switch to text wrap"}
                >
                  {wrapText ? '↔️ Scroll' : '↩️ Wrap'}
@@ -898,7 +898,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                    message: `Publish branch "${currentBranch}" to ${remoteStatus.remoteName}?`
                  })}
                  disabled={isPublishing}
-                  className="px-2.5 py-1 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 flex items-center gap-1 transition-colors"
+                  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' : ''}`} />
@@ -917,7 +917,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                        message: `Pull ${remoteStatus.behind} commit${remoteStatus.behind !== 1 ? 's' : ''} from ${remoteStatus.remoteName}?`
                      })}
                      disabled={isPulling}
-                      className="px-2.5 py-1 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 flex items-center gap-1 transition-colors"
+                      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' : ''}`} />
@@ -933,7 +933,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                        message: `Push ${remoteStatus.ahead} commit${remoteStatus.ahead !== 1 ? 's' : ''} to ${remoteStatus.remoteName}?`
                      })}
                      disabled={isPushing}
-                      className="px-2.5 py-1 text-xs bg-orange-600 text-white rounded-lg hover:bg-orange-700 disabled:opacity-50 flex items-center gap-1 transition-colors"
+                      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' : ''}`} />
@@ -946,7 +946,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                    <button
                      onClick={handleFetch}
                      disabled={isFetching}
-                      className="px-2.5 py-1 text-xs bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 flex items-center gap-1 transition-colors"
+                      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' : ''}`} />
@@ -1098,7 +1098,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                      </div>
                    </div>
                    <div className="flex items-center justify-between mt-2">
-                      <span className="text-xs text-muted-foreground">
+                      <span className="text-sm text-muted-foreground">
                        {selectedFiles.size} file{selectedFiles.size !== 1 ? 's' : ''} selected
                      </span>
                      <button
@@ -1127,7 +1127,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                ? 'max-h-16 opacity-100 translate-y-0'
                : 'max-h-0 opacity-0 -translate-y-2 overflow-hidden'
            }`}>
-              <span className="text-xs text-muted-foreground">
+              <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'}`}>
@@ -1141,14 +1141,14 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                    ]);
                    setSelectedFiles(allFiles);
                  }}
-                  className="text-xs text-primary hover:text-primary/80 transition-colors"
+                  className="text-sm text-primary hover:text-primary/80 transition-colors"
                >
                  {isMobile ? 'All' : 'Select All'}
                </button>
                <span className="text-border">|</span>
                <button
                  onClick={() => setSelectedFiles(new Set())}
-                  className="text-xs text-primary hover:text-primary/80 transition-colors"
+                  className="text-sm text-primary hover:text-primary/80 transition-colors"
                >
                  {isMobile ? 'None' : 'Deselect All'}
                </button>
@@ -1161,7 +1161,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
            <div className="border-b border-border/60">
              <button
                onClick={() => setShowLegend(!showLegend)}
-                className="w-full px-4 py-2 bg-muted/30 hover:bg-muted/50 text-xs text-muted-foreground flex items-center justify-center gap-1 transition-colors"
+                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>
@@ -1169,7 +1169,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
              </button>

              {showLegend && (
-                <div className="px-4 py-3 bg-muted/30 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/40 dark:text-yellow-300 rounded border border-yellow-200 dark:border-yellow-800/50 font-bold text-[10px]">
@@ -1298,7 +1298,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
                  autoFocus
                />
              </div>
-              <div className="text-xs text-muted-foreground 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">
--- 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/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
@@ -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, QuestionAnswerContent } 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 {
@@ -50,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;

--- 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/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,5 +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/toolConfigs.ts
+++ b/src/components/chat/tools/configs/toolConfigs.ts
@@ -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') };
--- 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;
 }

--- 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,
        });
      });
    }
@@ -484,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: '',
@@ -491,6 +508,7 @@ export const convertSessionMessages = (rawMessages: any[]): ChatMessage[] => {
              isToolUse: true,
              toolName: part.name,
              toolInput: normalizeToolInput(part.input),
+              toolId: part.id,
              toolResult: toolResult
                ? {
                    content:
@@ -503,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,
@@ -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,
@@ -162,8 +164,13 @@ export default function ChatComposer({
    (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={`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
--- a/src/components/chat/view/subcomponents/ChatInputControls.tsx
+++ b/src/components/chat/view/subcomponents/ChatInputControls.tsx
@@ -42,7 +42,7 @@ export default function ChatInputControls({
      <button
        type="button"
        onClick={onModeSwitch}
-        className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-lg text-xs sm: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-muted/50 text-muted-foreground border-border/60 hover:bg-muted'
            : permissionMode === 'acceptEdits'
--- 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
@@ -184,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/ProviderSelectionEmptyState.tsx
+++ b/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
@@ -162,13 +162,13 @@ export default function ProviderSelectionEmptyState({
          {/* 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-xs text-muted-foreground">{t('providerSelection.selectModel')}</span>
+              <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-xs 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"
+                  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>
@@ -178,7 +178,7 @@ export default function ProviderSelectionEmptyState({
              </div>
            </div>

-            <p className="text-center text-xs text-muted-foreground/70">
+            <p className="text-center text-sm text-muted-foreground/70">
              {provider === 'claude'
                ? t('providerSelection.readyPrompt.claude', { model: claudeModel })
                : provider === 'cursor'
--- a/src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx
@@ -48,7 +48,7 @@ export default function MainContentTabSwitcher({
          <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-xs font-medium rounded-md transition-all duration-150 ${
+              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'
--- a/src/components/main-content/view/subcomponents/MainContentTitle.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentTitle.tsx
@@ -62,8 +62,8 @@ export default function MainContentTitle({
          </div>
        ) : showChatNewSession ? (
          <div className="min-w-0">
-            <h2 className="text-sm font-semibold text-foreground leading-tight">{t('mainContent.newSession')}</h2>
-            <div className="text-[11px] text-muted-foreground truncate leading-tight">{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">
--- 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/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/SidebarContent.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarContent.tsx
@@ -50,7 +50,7 @@ export default function SidebarContent({
  return (
    <div
      className="h-full flex flex-col bg-background/80 backdrop-blur-sm md:select-none md:w-72"
-      style={isPWA && isMobile ? { paddingTop: '44px' } : {}}
+      style={{}}
    >
      <SidebarHeader
        isPWA={isPWA}
--- a/src/components/sidebar/view/subcomponents/SidebarFooter.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarFooter.tsx
@@ -20,7 +20,7 @@ export default function SidebarFooter({
  t,
 }: SidebarFooterProps) {
  return (
-    <div className="flex-shrink-0">
+    <div className="flex-shrink-0" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0)' }}>
      {/* Update banner */}
      {updateAvailable && (
        <>
@@ -36,7 +36,7 @@ export default function SidebarFooter({
                <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">
-                <span className="text-xs font-medium text-blue-600 dark:text-blue-300 truncate block">
+                <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">
@@ -79,7 +79,7 @@ export default function SidebarFooter({
          onClick={onShowSettings}
        >
          <Settings className="w-3.5 h-3.5" />
-          <span className="text-xs">{t('actions.settings')}</span>
+          <span className="text-sm">{t('actions.settings')}</span>
        </button>
      </div>

--- a/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
@@ -49,7 +49,7 @@ export default function SidebarHeader({
      {/* Desktop header */}
      <div
        className="hidden md:block px-3 pt-3 pb-2"
-        style={isPWA && isMobile ? { paddingTop: '44px' } : {}}
+        style={{}}
      >
        <div className="flex items-center justify-between gap-2">
          {IS_PLATFORM ? (
@@ -109,7 +109,7 @@ export default function SidebarHeader({
              placeholder={t('projects.searchPlaceholder')}
              value={searchFilter}
              onChange={(event) => onSearchFilterChange(event.target.value)}
-              className="nav-search-input pl-9 pr-8 h-9 text-xs rounded-xl border-0 placeholder:text-muted-foreground/40 focus-visible:ring-0 focus-visible:ring-offset-0 transition-all duration-200"
+              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
--- 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.
@@ -199,6 +202,7 @@ export default function SidebarModals({
        releaseInfo={releaseInfo}
        currentVersion={currentVersion}
        latestVersion={latestVersion}
+        installMode={installMode}
      />
    </>
  );
--- 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/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
@@ -159,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;
--- 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