Merge branch 'main' into refactor/remove-token-usage-logic

The information given was not accurate for the model providers

.env.example

@@ -17,7 +17,7 @@
 
 # Backend server port (Express API + WebSocket server)
 #API server
-PORT=3001
+SERVER_PORT=3001
 #Frontend port
 VITE_PORT=5173
 
@@ -42,4 +42,4 @@ HOST=0.0.0.0
 VITE_CONTEXT_WINDOW=160000
 CONTEXT_WINDOW=160000
 
-# VITE_IS_PLATFORM=false
+

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,41 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+type: Bug
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Error message**
+If applicable, add the error message you see to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: "[Feature]"
+labels: ''
+assignees: ''
+type: Feature
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/discord-release.yml

@@ -0,0 +1,22 @@
+name: Discord Release Notification
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  github-releases-to-discord:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Github Releases To Discord
+        uses: SethCohen/github-releases-to-discord@v1.19.0
+        with:
+          webhook_url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          color: "2105893"
+          username: "Release Changelog"
+          avatar_url: "https://cdn.discordapp.com/avatars/487431320314576937/bd64361e4ba6313d561d54e78c9e7171.png"
+          content: "||@everyone||"
+          footer_title: "Changelog"
+          reduce_headings: true

.github/workflows/release.yml

@@ -0,0 +1,50 @@
+name: Release
+
+on:
+  workflow_dispatch:
+    inputs:
+      increment:
+        description: 'Version bump: patch, minor, major, or explicit (e.g. 1.27.0)'
+        required: true
+        default: 'patch'
+        type: string
+      release_name:
+        description: 'Custom release name (optional, defaults to "CloudCLI UI vX.Y.Z")'
+        required: false
+        type: string
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          token: ${{ secrets.RELEASE_PAT }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org
+
+      - name: git config
+        run: |
+          git config user.name "${GITHUB_ACTOR}"
+          git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
+
+      - run: npm ci
+
+      - name: Release
+        run: |
+          ARGS="--ci --increment=${{ inputs.increment }}"
+          if [ -n "${{ inputs.release_name }}" ]; then
+            ARGS="$ARGS --github.releaseName=\"${{ inputs.release_name }}\""
+          fi
+          npx release-it $ARGS
+        env:
+          GITHUB_TOKEN: ${{ secrets.RELEASE_PAT }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -108,7 +108,7 @@ temp/
 .serena/
 CLAUDE.md
 .mcp.json
-
+.gemini/
 
 # Database files
 *.db
@@ -130,3 +130,12 @@ dev-debug.log
 # Task files
 tasks.json
 tasks/ 
+
+# Translations
+!src/i18n/locales/en/tasks.json
+!src/i18n/locales/ja/tasks.json
+!src/i18n/locales/ru/tasks.json
+!src/i18n/locales/de/tasks.json
+
+# Git worktrees
+.worktrees/

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "plugins/starter"]
+	path = plugins/starter
+	url = https://github.com/cloudcli-ai/cloudcli-plugin-starter.git

.husky/commit-msg

@@ -0,0 +1 @@
+npx commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.release-it.json

@@ -1,12 +1,13 @@
 {
   "git": {
-    "commitMessage": "Release ${version}",
+    "commitMessage": "chore(release): v${version}",
     "tagName": "v${version}",
     "requireBranch": "main",
     "requireCleanWorkingDir": true
   },
   "npm": {
-    "publish": true
+    "publish": true,
+    "publishArgs": ["--access public"]
   },
   "github": {
     "release": true,

CHANGELOG.md

@@ -3,6 +3,165 @@
 All notable changes to CloudCLI UI will be documented in this file.
 
 
+## [1.28.0](https://github.com/siteboon/claudecodeui/compare/v1.27.1...v1.28.0) (2026-04-03)
+
+### New Features
+
+* adding session resume in the api ([8f1042c](https://github.com/siteboon/claudecodeui/commit/8f1042cf256be282f009adcceeb55ab2dddf3fba))
+* moving new session button higher ([1628868](https://github.com/siteboon/claudecodeui/commit/16288684702dec894cf054291ca3d545ddb8214b))
+
+### Maintenance
+
+* changing package name to @cloudcli-ai/cloudcli ([ef51de2](https://github.com/siteboon/claudecodeui/commit/ef51de259ea2b963bc15f058b084e11220bc216a))
+
+## [1.27.1](https://github.com/siteboon/claudecodeui/compare/v1.26.3...v1.27.1) (2026-03-29)
+
+### Bug Fixes
+
+* prevent split on undefined（[#491](https://github.com/siteboon/claudecodeui/issues/491)） ([#563](https://github.com/siteboon/claudecodeui/issues/563)) ([b54cdf8](https://github.com/siteboon/claudecodeui/commit/b54cdf8168fc224e9907796e4229ae8ed34e6885))
+
+### Maintenance
+
+* add release-it github action ([42a1313](https://github.com/siteboon/claudecodeui/commit/42a131389a6954df0d2c3bedd2cb6d3406c5ebc1))
+* add terminal plugin in the plugins list ([004135e](https://github.com/siteboon/claudecodeui/commit/004135ef0187023e1da29c4a7137a28a42ebf9af))
+* release tokens ([f1063fd](https://github.com/siteboon/claudecodeui/commit/f1063fd33964ccb517f5ebcdd14526ed162e1138))
+* relicense to AGPL-3.0-or-later ([27cd124](https://github.com/siteboon/claudecodeui/commit/27cd12432b7d3237981f86acd9cc99532d843d4a))
+
+## [1.26.3](https://github.com/siteboon/claudecodeui/compare/v1.26.2...v1.26.3) (2026-03-22)
+
+## [1.26.2](https://github.com/siteboon/claudecodeui/compare/v1.26.0...v1.26.2) (2026-03-21)
+
+### Bug Fixes
+
+* change SW cache mechanism ([17d6ec5](https://github.com/siteboon/claudecodeui/commit/17d6ec54af18d333c8b04d2ffc64793e688d996e))
+* claude auth changes and adding copy on mobile ([a41d2c7](https://github.com/siteboon/claudecodeui/commit/a41d2c713e87d56f23d5884585b4bb43c43a250a))
+
+## [1.26.0](https://github.com/siteboon/claudecodeui/compare/v1.25.2...v1.26.0) (2026-03-20)
+
+### New Features
+
+* add German (Deutsch) language support ([#525](https://github.com/siteboon/claudecodeui/issues/525)) ([a7299c6](https://github.com/siteboon/claudecodeui/commit/a7299c68237908c752d504c2e8eea91570a30203))
+* add WebSocket proxy for plugin backends ([#553](https://github.com/siteboon/claudecodeui/issues/553)) ([88c60b7](https://github.com/siteboon/claudecodeui/commit/88c60b70b031798d51ce26c8f080a0f64d824b05))
+* Browser autofill support for login form ([#521](https://github.com/siteboon/claudecodeui/issues/521)) ([72ff134](https://github.com/siteboon/claudecodeui/commit/72ff134b315b7a1d602f3cc7dd60d47c1c1c34af))
+* git panel redesign ([#535](https://github.com/siteboon/claudecodeui/issues/535)) ([adb3a06](https://github.com/siteboon/claudecodeui/commit/adb3a06d7e66a6d2dbcdfb501615e617178314af))
+* introduce notification system and claude notifications ([#450](https://github.com/siteboon/claudecodeui/issues/450)) ([45e71a0](https://github.com/siteboon/claudecodeui/commit/45e71a0e73b368309544165e4dcf8b7fd014e8dd))
+* **refactor:** move plugins to typescript ([#557](https://github.com/siteboon/claudecodeui/issues/557)) ([612390d](https://github.com/siteboon/claudecodeui/commit/612390db536417e2f68c501329bfccf5c6795e45))
+* unified message architecture with provider adapters and session store ([#558](https://github.com/siteboon/claudecodeui/issues/558)) ([a4632dc](https://github.com/siteboon/claudecodeui/commit/a4632dc4cec228a8febb7c5bae4807c358963678))
+
+### Bug Fixes
+
+* detect Claude auth from settings env ([#527](https://github.com/siteboon/claudecodeui/issues/527)) ([95bcee0](https://github.com/siteboon/claudecodeui/commit/95bcee0ec459f186d52aeffe100ac1a024e92909))
+* remove /exit command from claude login flow during onboarding ([#552](https://github.com/siteboon/claudecodeui/issues/552)) ([4de8b78](https://github.com/siteboon/claudecodeui/commit/4de8b78c6db5d8c2c402afce0f0b4cc16d5b6496))
+
+### Documentation
+
+* add German language link to all README files ([#534](https://github.com/siteboon/claudecodeui/issues/534)) ([1d31c3e](https://github.com/siteboon/claudecodeui/commit/1d31c3ec8309b433a041f3099955addc8c136c35))
+* **readme:** hotfix and improve for README.jp.md ([#550](https://github.com/siteboon/claudecodeui/issues/550)) ([7413c2c](https://github.com/siteboon/claudecodeui/commit/7413c2c78422c308ac949e6a83c3e9216b24b649))
+* **README:** update translations with CloudCLI branding and feature restructuring ([#544](https://github.com/siteboon/claudecodeui/issues/544)) ([14aef73](https://github.com/siteboon/claudecodeui/commit/14aef73cc6085fbb519fe64aea7cac80b7d51285))
+
+## [1.25.2](https://github.com/siteboon/claudecodeui/compare/v1.25.0...v1.25.2) (2026-03-11)
+
+### New Features
+
+* **i18n:** localize plugin settings for all languages ([#515](https://github.com/siteboon/claudecodeui/issues/515)) ([621853c](https://github.com/siteboon/claudecodeui/commit/621853cbfb4233b34cb8cc2e1ed10917ba424352))
+
+### Bug Fixes
+
+* codeql user value provided path validation ([aaa14b9](https://github.com/siteboon/claudecodeui/commit/aaa14b9fc0b9b51c4fb9d1dba40fada7cbbe0356))
+* numerous bugs ([#528](https://github.com/siteboon/claudecodeui/issues/528)) ([a77f213](https://github.com/siteboon/claudecodeui/commit/a77f213dd5d0b2538dea091ab8da6e55d2002f2f))
+* **security:** disable executable gray-matter frontmatter in commands ([b9c902b](https://github.com/siteboon/claudecodeui/commit/b9c902b016f411a942c8707dd07d32b60bad087c))
+* session reconnect catch-up, always-on input, frozen session recovery ([#524](https://github.com/siteboon/claudecodeui/issues/524)) ([4d8fb6e](https://github.com/siteboon/claudecodeui/commit/4d8fb6e30aa03d7cdb92bd62b7709422f9d08e32))
+
+### Refactoring
+
+* new settings page design and new pill component ([8ddeeb0](https://github.com/siteboon/claudecodeui/commit/8ddeeb0ce8d0642560bd3fa149236011dc6e3707))
+
+## [1.25.0](https://github.com/siteboon/claudecodeui/compare/v1.24.0...v1.25.0) (2026-03-10)
+
+### New Features
+
+* add copy as text or markdown feature for assistant messages ([#519](https://github.com/siteboon/claudecodeui/issues/519)) ([1dc2a20](https://github.com/siteboon/claudecodeui/commit/1dc2a205dc2a3cbf960625d7669c7c63a2b6905f))
+* add full Russian language support; update Readme.md files, and .gitignore update ([#514](https://github.com/siteboon/claudecodeui/issues/514)) ([c7dcba8](https://github.com/siteboon/claudecodeui/commit/c7dcba8d9117e84db8aac7d8a7bf6a3aa683e115))
+* new plugin system ([#489](https://github.com/siteboon/claudecodeui/issues/489)) ([8afb46a](https://github.com/siteboon/claudecodeui/commit/8afb46af2e5514c9284030367281793fbb014e4f))
+
+### Bug Fixes
+
+* resolve duplicate key issue when rendering model options ([#520](https://github.com/siteboon/claudecodeui/issues/520)) ([9bceab9](https://github.com/siteboon/claudecodeui/commit/9bceab9e1a6e063b0b4f934ed2d9f854fcc9c6a4))
+
+### Maintenance
+
+* add plugins section in readme ([e581a0e](https://github.com/siteboon/claudecodeui/commit/e581a0e1ccd59fd7ec7306ca76a13e73d7c674c1))
+
+## [1.24.0](https://github.com/siteboon/claudecodeui/compare/v1.23.2...v1.24.0) (2026-03-09)
+
+### New Features
+
+* add full-text search across conversations ([#482](https://github.com/siteboon/claudecodeui/issues/482)) ([3950c0e](https://github.com/siteboon/claudecodeui/commit/3950c0e47f41e93227af31494690818d45c8bc7a))
+
+### Bug Fixes
+
+* **git:** prevent shell injection in git routes ([86c33c1](https://github.com/siteboon/claudecodeui/commit/86c33c1c0cb34176725a38f46960213714fc3e04))
+* replace getDatabase with better-sqlite3 db in getGithubTokenById ([#501](https://github.com/siteboon/claudecodeui/issues/501)) ([cb4fd79](https://github.com/siteboon/claudecodeui/commit/cb4fd795c938b1cc86d47f401973bfccdd68fdee))
+
+## [1.23.2](https://github.com/siteboon/claudecodeui/compare/v1.22.1...v1.23.2) (2026-03-06)
+
+### New Features
+
+* add clickable overlay buttons for CLI prompts in Shell terminal ([#480](https://github.com/siteboon/claudecodeui/issues/480)) ([2444209](https://github.com/siteboon/claudecodeui/commit/2444209723701dda2b881cea2501b239e64e51c1)), closes [#427](https://github.com/siteboon/claudecodeui/issues/427)
+* add terminal shortcuts panel for mobile ([#411](https://github.com/siteboon/claudecodeui/issues/411)) ([b0a3fdf](https://github.com/siteboon/claudecodeui/commit/b0a3fdf95ffdb961261194d10400267251e42f17))
+* implement session rename with SQLite storage ([#413](https://github.com/siteboon/claudecodeui/issues/413)) ([198e3da](https://github.com/siteboon/claudecodeui/commit/198e3da89b353780f53a91888384da9118995e81)), closes [#72](https://github.com/siteboon/claudecodeui/issues/72) [#358](https://github.com/siteboon/claudecodeui/issues/358)
+
+### Bug Fixes
+
+* **chat:** finalize terminal lifecycle to prevent stuck processing/thinking UI ([#483](https://github.com/siteboon/claudecodeui/issues/483)) ([0590c5c](https://github.com/siteboon/claudecodeui/commit/0590c5c178f4791e2b039d525ecca4d220c3dcae))
+* **codex-history:** prevent AGENTS.md/internal prompt leakage when reloading Codex sessions ([#488](https://github.com/siteboon/claudecodeui/issues/488)) ([64a96b2](https://github.com/siteboon/claudecodeui/commit/64a96b24f853acb802f700810b302f0f5cf00898))
+* preserve pending permission requests across WebSocket reconnections ([#462](https://github.com/siteboon/claudecodeui/issues/462)) ([4ee88f0](https://github.com/siteboon/claudecodeui/commit/4ee88f0eb0c648b54b05f006c6796fb7b09b0fae))
+* prevent React 18 batching from losing messages during session sync ([#461](https://github.com/siteboon/claudecodeui/issues/461)) ([688d734](https://github.com/siteboon/claudecodeui/commit/688d73477a50773e43c85addc96212aa6290aea5))
+* release it script ([dcea8a3](https://github.com/siteboon/claudecodeui/commit/dcea8a329c7d68437e1e72c8c766cf33c74637e9))
+
+### Styling
+
+* improve UI for processing banner ([#477](https://github.com/siteboon/claudecodeui/issues/477)) ([2320e1d](https://github.com/siteboon/claudecodeui/commit/2320e1d74b59c65b5b7fc4fa8b05fd9208f4898c))
+
+### Maintenance
+
+* remove logging of received WebSocket messages in production ([#487](https://github.com/siteboon/claudecodeui/issues/487)) ([9193feb](https://github.com/siteboon/claudecodeui/commit/9193feb6dc83041f3c365204648a88468bdc001b))
+
+## [1.22.0](https://github.com/siteboon/claudecodeui/compare/v1.21.0...v1.22.0) (2026-03-03)
+
+### New Features
+
+* add community button in the app ([84d4634](https://github.com/siteboon/claudecodeui/commit/84d4634735f9ee13ac1c20faa0e7e31f1b77cae8))
+* Advanced file editor and file tree improvements ([#444](https://github.com/siteboon/claudecodeui/issues/444)) ([9768958](https://github.com/siteboon/claudecodeui/commit/97689588aa2e8240ba4373da5f42ab444c772e72))
+* update document title based on selected project ([#448](https://github.com/siteboon/claudecodeui/issues/448)) ([9e22f42](https://github.com/siteboon/claudecodeui/commit/9e22f42a3d3a781f448ddac9d133292fe103bb8c))
+
+### Bug Fixes
+
+* **claude:** correct project encoded path ([#451](https://github.com/siteboon/claudecodeui/issues/451)) ([9c0e864](https://github.com/siteboon/claudecodeui/commit/9c0e864532dcc5ce7ee890d3b4db722872db2b54)), closes [#447](https://github.com/siteboon/claudecodeui/issues/447)
+* **claude:** move model usage log to result message only ([#454](https://github.com/siteboon/claudecodeui/issues/454)) ([506d431](https://github.com/siteboon/claudecodeui/commit/506d43144b3ec3155c3e589e7e803862c4a8f83a))
+* missing translation label ([855e22f](https://github.com/siteboon/claudecodeui/commit/855e22f9176a71daa51de716370af7f19d55bfb4))
+
+### Maintenance
+
+* add Gemini-CLI support to README ([#453](https://github.com/siteboon/claudecodeui/issues/453)) ([503c384](https://github.com/siteboon/claudecodeui/commit/503c3846850fb843781979b0c0e10a24b07e1a4b))
+
+## [1.21.0](https://github.com/siteboon/claudecodeui/compare/v1.20.1...v1.21.0) (2026-02-27)
+
+### New Features
+
+* add copy icon for user messages ([#449](https://github.com/siteboon/claudecodeui/issues/449)) ([b359c51](https://github.com/siteboon/claudecodeui/commit/b359c515277b4266fde2fb9a29b5356949c07c4f))
+* Google's gemini-cli integration ([#422](https://github.com/siteboon/claudecodeui/issues/422)) ([a367edd](https://github.com/siteboon/claudecodeui/commit/a367edd51578608b3281373cb4a95169dbf17f89))
+* persist active tab across reloads via localStorage ([#414](https://github.com/siteboon/claudecodeui/issues/414)) ([e3b6892](https://github.com/siteboon/claudecodeui/commit/e3b689214f11d549ffe1b3a347476d58f25c5aca)), closes [#387](https://github.com/siteboon/claudecodeui/issues/387)
+
+### Bug Fixes
+
+* add support for Codex in the shell ([#424](https://github.com/siteboon/claudecodeui/issues/424)) ([23801e9](https://github.com/siteboon/claudecodeui/commit/23801e9cc15d2b8d1bfc6e39aee2fae93226d1ad))
+
+### Maintenance
+
+* upgrade @anthropic-ai/claude-agent-sdk to version 0.2.59 and add model usage logging ([#446](https://github.com/siteboon/claudecodeui/issues/446)) ([917c353](https://github.com/siteboon/claudecodeui/commit/917c353115653ee288bf97be01f62fad24123cbc))
+* upgrade better-sqlite to latest version to support node 25 ([#445](https://github.com/siteboon/claudecodeui/issues/445)) ([4ab94fc](https://github.com/siteboon/claudecodeui/commit/4ab94fce4257e1e20370fa83fa4c0f6fadbb8a2b))
+
 ## [1.20.1](https://github.com/siteboon/claudecodeui/compare/v1.19.1...v1.20.1) (2026-02-23)
 
 ### New Features

CONTRIBUTING.md

@@ -153,4 +153,4 @@ This automatically:
 
 ## License
 
-By contributing, you agree that your contributions will be licensed under the [GPL-3.0 License](LICENSE).
+By contributing, you agree that your contributions will be licensed under the [AGPL-3.0-or-later License](LICENSE), including the additional terms specified in Section 7 of the LICENSE file.

NOTICE

@@ -0,0 +1,13 @@
+CloudCLI UI
+Copyright 2025-2026 Siteboon AI B.V. and contributors
+
+This software is licensed under the GNU Affero General Public License v3.0
+or later (AGPL-3.0-or-later). See the LICENSE file for the full license text,
+including additional terms under Section 7.
+
+Originally developed by Siteboon AI B.V. (https://github.com/siteboon/claudecodeui).
+
+Contributions by Siteboon AI B.V. prior to commit 004135ef were originally
+published under GPL-3.0 and are hereby relicensed to AGPL-3.0-or-later.
+Contributions by other authors prior to that commit remain under GPL-3.0
+and are incorporated into this work as permitted by GPL-3.0 Section 13.

README.de.md

@@ -0,0 +1,239 @@
+<div align="center">
+  <img src="public/logo.svg" alt="CloudCLI UI" width="64" height="64">
+  <h1>Cloud CLI (auch bekannt als Claude Code UI)</h1>
+  <p>Eine Desktop- und Mobile-Oberfläche für <a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>, <a href="https://docs.cursor.com/en/cli/overview">Cursor CLI</a>, <a href="https://developers.openai.com/codex">Codex</a> und <a href="https://geminicli.com/">Gemini-CLI</a>.<br>Lokal oder remote nutzbar – verwalte deine aktiven Projekte und Sitzungen von überall.</p>
+</div>
+
+<p align="center">
+  <a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://cloudcli.ai/docs">Dokumentation</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">Fehler melden</a> · <a href="CONTRIBUTING.md">Mitwirken</a>
+</p>
+
+<p align="center">
+  <a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Try_Now-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a>
+  <a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join_Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Join Community"></a>
+  <br><br>
+  <a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</p>
+
+<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <b>Deutsch</b> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
+
+---
+
+## Screenshots
+
+<div align="center">
+
+<table>
+<tr>
+<td align="center">
+<h3>Desktop-Ansicht</h3>
+<img src="public/screenshots/desktop-main.png" alt="Desktop-Oberfläche" width="400">
+<br>
+<em>Hauptoberfläche mit Projektübersicht und Chat</em>
+</td>
+<td align="center">
+<h3>Mobile-Erfahrung</h3>
+<img src="public/screenshots/mobile-chat.png" alt="Mobile-Oberfläche" width="250">
+<br>
+<em>Responsives mobiles Design mit Touch-Navigation</em>
+</td>
+</tr>
+<tr>
+<td align="center" colspan="2">
+<h3>CLI-Auswahl</h3>
+<img src="public/screenshots/cli-selection.png" alt="CLI-Auswahl" width="400">
+<br>
+<em>Wähle zwischen Claude Code, Gemini, Cursor CLI und Codex</em>
+</td>
+</tr>
+</table>
+
+
+
+</div>
+
+## Funktionen
+
+- **Responsives Design** – Funktioniert nahtlos auf Desktop, Tablet und Mobilgerät, sodass du Agents auch vom Smartphone aus nutzen kannst
+- **Interaktives Chat-Interface** – Eingebaute Chat-Oberfläche für die reibungslose Kommunikation mit den Agents
+- **Integriertes Shell-Terminal** – Direkter Zugriff auf die Agents CLI über die eingebaute Shell-Funktionalität
+- **Datei-Explorer** – Interaktiver Dateibaum mit Syntaxhervorhebung und Live-Bearbeitung
+- **Git-Explorer** – Änderungen anzeigen, stagen und committen. Branches wechseln ebenfalls möglich
+- **Sitzungsverwaltung** – Gespräche fortsetzen, mehrere Sitzungen verwalten und Verlauf nachverfolgen
+- **Plugin-System** – CloudCLI mit eigenen Plugins erweitern – neue Tabs, Backend-Dienste und Integrationen hinzufügen. [Eigenes Plugin erstellen →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)
+- **TaskMaster AI Integration** *(Optional)* – Erweitertes Projektmanagement mit KI-gestützter Aufgabenplanung, PRD-Parsing und Workflow-Automatisierung
+- **Modell-Kompatibilität** – Funktioniert mit Claude, GPT und Gemini (vollständige Liste unterstützter Modelle in [`shared/modelConstants.js`](shared/modelConstants.js))
+
+
+## Schnellstart
+
+### CloudCLI Cloud (Empfohlen)
+
+Der schnellste Einstieg – keine lokale Einrichtung erforderlich. Erhalte eine vollständig verwaltete, containerisierte Entwicklungsumgebung, die über Web, Mobile App, API oder deine bevorzugte IDE erreichbar ist.
+
+**[Mit CloudCLI Cloud starten](https://cloudcli.ai)**
+
+
+### Self-Hosted (Open Source)
+
+CloudCLI UI sofort mit **npx** ausprobieren (erfordert **Node.js** v22+):
+
+```bash
+npx @cloudcli-ai/cloudcli
+```
+
+Oder **global** installieren für regelmäßige Nutzung:
+
+```bash
+npm install -g @cloudcli-ai/cloudcli
+cloudcli
+```
+
+Öffne `http://localhost:3001` – alle vorhandenen Sitzungen werden automatisch erkannt.
+
+Die **[Dokumentation →](https://cloudcli.ai/docs)** enthält weitere Konfigurationsoptionen, PM2, Remote-Server-Einrichtung und mehr.
+
+
+---
+
+## Welche Option passt zu dir?
+
+CloudCLI UI ist die Open-Source-UI-Schicht, die CloudCLI Cloud antreibt. Du kannst es auf deinem eigenen Rechner selbst hosten oder CloudCLI Cloud nutzen, das darauf aufbaut und eine vollständig verwaltete Cloud-Umgebung, Team-Funktionen und tiefere Integrationen bietet.
+
+| | CloudCLI UI (Self-hosted) | CloudCLI Cloud |
+|---|---|---|
+| **Am besten für** | Entwickler:innen, die eine vollständige UI für lokale Agent-Sitzungen auf ihrem eigenen Rechner möchten | Teams und Entwickler:innen, die Agents in der Cloud betreiben möchten, überall erreichbar |
+| **Zugriff** | Browser via `[deineIP]:port` | Browser, jede IDE, REST API, n8n |
+| **Einrichtung** | `npx @cloudcli-ai/cloudcli` | Keine Einrichtung erforderlich |
+| **Rechner muss laufen** | Ja | Nein |
+| **Mobiler Zugriff** | Jeder Browser im Netzwerk | Jedes Gerät, native App in Entwicklung |
+| **Verfügbare Sitzungen** | Alle Sitzungen automatisch aus `~/.claude` erkannt | Alle Sitzungen in deiner Cloud-Umgebung |
+| **Unterstützte Agents** | Claude Code, Cursor CLI, Codex, Gemini CLI | Claude Code, Cursor CLI, Codex, Gemini CLI |
+| **Datei-Explorer und Git** | Ja, direkt in der UI | Ja, direkt in der UI |
+| **MCP-Konfiguration** | Über UI verwaltet, synchronisiert mit lokalem `~/.claude` | Über UI verwaltet |
+| **IDE-Zugriff** | Deine lokale IDE | Jede IDE, die mit deiner Cloud-Umgebung verbunden ist |
+| **REST API** | Ja | Ja |
+| **n8n-Node** | Nein | Ja |
+| **Team-Sharing** | Nein | Ja |
+| **Plattformkosten** | Kostenlos, Open Source | Ab $7/Monat |
+
+> Beide Optionen verwenden deine eigenen KI-Abonnements (Claude, Cursor usw.) – CloudCLI stellt die Umgebung bereit, nicht die KI.
+
+---
+
+## Sicherheit & Tool-Konfiguration
+
+**🔒 Wichtiger Hinweis**: Alle Claude Code Tools sind **standardmäßig deaktiviert**. Dies verhindert, dass potenziell schädliche Operationen automatisch ausgeführt werden.
+
+### Tools aktivieren
+
+Um den vollen Funktionsumfang von Claude Code zu nutzen, müssen Tools manuell aktiviert werden:
+
+1. **Tool-Einstellungen öffnen** – Klicke auf das Zahnrad-Symbol in der Seitenleiste
+2. **Selektiv aktivieren** – Nur die benötigten Tools einschalten
+3. **Einstellungen übernehmen** – Deine Einstellungen werden lokal gespeichert
+
+<div align="center">
+
+![Tool-Einstellungen Modal](public/screenshots/tools-modal.png)
+*Tool-Einstellungen – nur aktivieren, was benötigt wird*
+
+</div>
+
+**Empfohlene Vorgehensweise**: Mit grundlegenden Tools starten und bei Bedarf weitere hinzufügen. Die Einstellungen können jederzeit angepasst werden.
+
+---
+
+## Plugins
+
+CloudCLI verfügt über ein Plugin-System, mit dem benutzerdefinierte Tabs mit eigener Frontend-UI und optionalem Node.js-Backend hinzugefügt werden können. Plugins können direkt in **Einstellungen > Plugins** aus Git-Repos installiert oder selbst entwickelt werden.
+
+### Verfügbare Plugins
+
+| Plugin | Beschreibung |
+|---|---|
+| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | Zeigt Dateianzahl, Codezeilen, Dateityp-Aufschlüsselung, größte Dateien und zuletzt geänderte Dateien des aktuellen Projekts |
+
+### Eigenes Plugin erstellen
+
+**[Plugin-Starter-Vorlage →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** – Forke dieses Repository, um ein eigenes Plugin zu erstellen. Es enthält ein funktionierendes Beispiel mit Frontend-Rendering, Live-Kontext-Updates und RPC-Kommunikation zu einem Backend-Server.
+
+**[Plugin-Dokumentation →](https://cloudcli.ai/docs/plugin-overview)** – Vollständige Anleitung zur Plugin-API, zum Manifest-Format, zum Sicherheitsmodell und mehr.
+
+---
+## FAQ
+
+<details>
+<summary>Wie unterscheidet sich das von Claude Code Remote Control?</summary>
+
+Claude Code Remote Control ermöglicht es, Nachrichten an eine bereits im lokalen Terminal laufende Sitzung zu senden. Der Rechner muss eingeschaltet bleiben, das Terminal muss offen bleiben, und Sitzungen laufen nach etwa 10 Minuten ohne Netzwerkverbindung ab.
+
+CloudCLI UI und CloudCLI Cloud erweitern Claude Code, anstatt neben ihm zu laufen – MCP-Server, Berechtigungen, Einstellungen und Sitzungen sind exakt dieselben, die Claude Code nativ verwendet. Nichts wird dupliziert oder separat verwaltet.
+
+Das bedeutet in der Praxis:
+
+- **Alle Sitzungen, nicht nur eine** – CloudCLI UI erkennt automatisch jede Sitzung aus dem `~/.claude`-Ordner. Remote Control stellt nur die einzelne aktive Sitzung bereit, um sie in der Claude Mobile App verfügbar zu machen.
+- **Deine Einstellungen sind deine Einstellungen** – MCP-Server, Tool-Berechtigungen und Projektkonfiguration, die in CloudCLI UI geändert werden, werden direkt in die Claude Code-Konfiguration geschrieben und treten sofort in Kraft – und umgekehrt.
+- **Funktioniert mit mehr Agents** – Claude Code, Cursor CLI, Codex und Gemini CLI, nicht nur Claude Code.
+- **Vollständige UI, nicht nur ein Chat-Fenster** – Datei-Explorer, Git-Integration, MCP-Verwaltung und ein Shell-Terminal sind alle eingebaut.
+- **CloudCLI Cloud läuft in der Cloud** – Laptop zuklappen, der Agent läuft weiter. Kein Terminal zu überwachen, kein Rechner, der laufen muss.
+
+</details>
+
+<details>
+<summary>Muss ich ein KI-Abonnement separat bezahlen?</summary>
+
+Ja. CloudCLI stellt die Umgebung bereit, nicht die KI. Du bringst dein eigenes Claude-, Cursor-, Codex- oder Gemini-Abonnement mit. CloudCLI Cloud beginnt bei $7/Monat für die gehostete Umgebung zusätzlich dazu.
+
+</details>
+
+<details>
+<summary>Kann ich CloudCLI UI auf meinem Smartphone nutzen?</summary>
+
+Ja. Bei Self-Hosted: Server auf dem eigenen Rechner starten und `[deineIP]:port` in einem beliebigen Browser im Netzwerk öffnen. Bei CloudCLI Cloud: Von jedem Gerät aus öffnen – kein VPN, keine Portweiterleitung, keine Einrichtung. Eine native App ist ebenfalls in Entwicklung.
+
+</details>
+
+<details>
+<summary>Wirken sich Änderungen in der UI auf mein lokales Claude Code-Setup aus?</summary>
+
+Ja, bei Self-Hosted. CloudCLI UI liest aus und schreibt in dieselbe `~/.claude`-Konfiguration, die Claude Code nativ verwendet. MCP-Server, die über die UI hinzugefügt werden, erscheinen sofort in Claude Code und umgekehrt.
+
+</details>
+
+---
+
+## Community & Support
+
+- **[Dokumentation](https://cloudcli.ai/docs)** — Installation, Konfiguration, Funktionen und Fehlerbehebung
+- **[Discord](https://discord.gg/buxwujPNRE)** — Hilfe erhalten und mit anderen Nutzer:innen in Kontakt treten
+- **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — Fehlerberichte und Feature-Anfragen
+- **[Beitragsrichtlinien](CONTRIBUTING.md)** — So kannst du zum Projekt beitragen
+
+## Lizenz
+
+GNU General Public License v3.0 – siehe [LICENSE](LICENSE)-Datei für Details.
+
+Dieses Projekt ist Open Source und kann unter der GPL v3-Lizenz kostenlos genutzt, modifiziert und verteilt werden.
+
+## Danksagungen
+
+### Erstellt mit
+- **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropics offizielle CLI
+- **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursors offizielle CLI
+- **[Codex](https://developers.openai.com/codex)** - OpenAI Codex
+- **[Gemini-CLI](https://geminicli.com/)** - Google Gemini CLI
+- **[React](https://react.dev/)** - UI-Bibliothek
+- **[Vite](https://vitejs.dev/)** - Schnelles Build-Tool und Dev-Server
+- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS-Framework
+- **[CodeMirror](https://codemirror.net/)** - Erweiterter Code-Editor
+- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(Optional)* - KI-gestütztes Projektmanagement und Aufgabenplanung
+
+
+### Sponsoren
+- [Siteboon - KI-gestützter Website-Builder](https://siteboon.ai)
+---
+
+<div align="center">
+  <strong>Mit Sorgfalt für die Claude Code-, Cursor- und Codex-Community erstellt.</strong>
+</div>

README.ja.md

@@ -1,12 +1,23 @@
 <div align="center">
-  <img src="public/logo.svg" alt="Claude Code UI" width="64" height="64">
-  <h1>Cloud CLI (別名 Claude Code UI)</h1>
+  <img src="public/logo.svg" alt="CloudCLI UI" width="64" height="64">
+  <h1>Cloud CLI（別名 Claude Code UI）</h1>
+  <p><a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>、<a href="https://docs.cursor.com/en/cli/overview">Cursor CLI</a>、<a href="https://developers.openai.com/codex">Codex</a>、<a href="https://geminicli.com/">Gemini-CLI</a> のためのデスクトップ／モバイル UI。<br>ローカルでもリモートでも使え、アクティブなプロジェクトとセッションをどこからでも閲覧できます。</p>
 </div>
 
+<p align="center">
+  <a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://cloudcli.ai/docs">ドキュメント</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">バグ報告</a> · <a href="CONTRIBUTING.md">コントリビュート</a>
+</p>
 
-[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 のアクティブなプロジェクトやセッションを確認し、どこからでも（モバイルやデスクトップから）変更を加えることができます。どこでも使える適切なインターフェースを提供します。
+<p align="center">
+  <a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Try_Now-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a>
+  <a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Discord コミュニティに参加"></a>
+  <br><br>
+  <a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</p>
 
-<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a></i></div>
+<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.de.md">Deutsch</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <b>日本語</b></i></div>
+
+---
 
 ## スクリーンショット
 
@@ -16,23 +27,23 @@
 <tr>
 <td align="center">
 <h3>デスクトップビュー</h3>
-<img src="public/screenshots/desktop-main.png" alt="Desktop Interface" width="400">
+<img src="public/screenshots/desktop-main.png" alt="デスクトップインターフェース" width="400">
 <br>
-<em>プロジェクト概要とチャットを表示するメインインターフェース</em>
+<em>プロジェクト概要とチャットを表示するメイン画面</em>
 </td>
 <td align="center">
 <h3>モバイル体験</h3>
-<img src="public/screenshots/mobile-chat.png" alt="Mobile Interface" width="250">
+<img src="public/screenshots/mobile-chat.png" alt="モバイルインターフェース" width="250">
 <br>
-<em>タッチナビゲーション対応のレスポンシブモバイルデザイン</em>
+<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">
+<img src="public/screenshots/cli-selection.png" alt="CLI 選択" width="400">
 <br>
-<em>Claude Code、Cursor CLI、Codex から選択</em>
+<em>Claude Code、Gemini、Cursor CLI、Codex から選択</em>
 </td>
 </tr>
 </table>
@@ -43,302 +54,176 @@
 
 ## 機能
 
-- **レスポンシブデザイン** - デスクトップ、タブレット、モバイルでシームレスに動作し、モバイルからも Claude Code、Cursor、Codex を使用可能
-- **インタラクティブチャットインターフェース** - Claude Code、Cursor、Codex とシームレスに通信する組み込みチャットインターフェース
-- **統合シェルターミナル** - 組み込みシェル機能による Claude Code、Cursor CLI、Codex への直接アクセス
-- **ファイルエクスプローラー** - シンタックスハイライトとライブ編集対応のインタラクティブファイルツリー
-- **Git エクスプローラー** - 変更の確認、ステージング、コミット。ブランチの切り替えも可能
+- **レスポンシブデザイン** - デスクトップ／タブレット／モバイルでシームレスに動作し、モバイルからも Agents を利用可能
+- **インタラクティブチャット UI** - Agents とスムーズにやり取りできる内蔵チャット UI
+- **統合シェルターミナル** - 内蔵シェル機能で Agents の CLI に直接アクセス
+- **ファイルエクスプローラー** - シンタックスハイライトとライブ編集に対応したインタラクティブなファイルツリー
+- **Git エクスプローラー** - 変更の表示、ステージ、コミット。ブランチ切り替えも可能
 - **セッション管理** - 会話の再開、複数セッションの管理、履歴の追跡
-- **TaskMaster AI 統合** *（オプション）* - AI 駆動のタスク計画、PRD 解析、ワークフロー自動化による高度なプロジェクト管理
-- **モデル互換性** - Claude Sonnet 4.5、Opus 4.5、GPT-5.2 に対応
-
+- **プラグインシステム** - カスタムプラグインで CloudCLI を拡張 — 新しいタブ、バックエンドサービス、連携を追加できます。[自分で構築する →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)
 
 ## クイックスタート
 
-### 前提条件
+### CloudCLI Cloud（推奨）
 
-- [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) のインストールと設定
+最速で始める方法 — ローカルのセットアップは不要です。Web、モバイルアプリ、API、またはお気に入りの IDE からアクセスできる、フルマネージドでコンテナ化された開発環境を利用できます。
 
-### ワンクリック実行（推奨）
+**[CloudCLI Cloud を始める](https://cloudcli.ai)**
 
-インストール不要、直接実行：
+### セルフホスト（オープンソース）
+
+**npx** で今すぐ CloudCLI UI を試せます（**Node.js** v22+ が必要）：
 
 ```bash
-npx @siteboon/claude-code-ui
+npx @cloudcli-ai/cloudcli
 ```
 
-サーバーが起動し、`http://localhost:3001`（または設定した PORT）でアクセスできます。
-
-**再起動**: サーバーを停止した後、同じ `npx` コマンドを再度実行するだけです
-### グローバルインストール（定期的に使用する場合）
-
-頻繁に使用する場合は、一度だけグローバルインストール：
+または、普段使いするなら **グローバル** にインストール：
 
 ```bash
-npm install -g @siteboon/claude-code-ui
+npm install -g @cloudcli-ai/cloudcli
+cloudcli
 ```
 
-シンプルなコマンドで起動：
+`http://localhost:3001` を開いてください — 既存のセッションは自動的に検出されます。
 
-```bash
-claude-code-ui
-```
+より詳細な設定オプション、PM2、リモートサーバー設定などについては **[ドキュメントはこちら →](https://cloudcli.ai/docs)** を参照してください。
 
 
-**再起動**: Ctrl+C で停止し、`claude-code-ui` を再度実行します。
+---
 
-**アップデート**:
-```bash
-cloudcli update
-```
+## どちらの選択肢が適していますか？
 
-### CLI の使い方
+CloudCLI UI は、CloudCLI Cloud を支えるオープンソースの UI レイヤーです。自分のマシンにセルフホストすることも、フルマネージドのクラウド環境、チーム機能、より深い統合を備えた CloudCLI Cloud を使うこともできます。
 
-グローバルインストール後、`claude-code-ui` と `cloudcli` コマンドが使用できます：
+| | CloudCLI UI（セルフホスト） | CloudCLI Cloud |
+|---|---|---|
+| **対象ユーザー** | 自分のマシン上でローカルの agent セッションに対してフル UI を使いたい開発者 | クラウド上で動く agents をどこからでも利用したいチーム／開発者 |
+| **アクセス方法** | ブラウザ（`[yourip]:port`） | ブラウザ、任意の IDE、REST API、n8n |
+| **セットアップ** | `npx @cloudcli-ai/cloudcli` | セットアップ不要 |
+| **マシンの稼働継続** | はい | いいえ |
+| **モバイルアクセス** | 同一ネットワーク内の任意のブラウザ | 任意のデバイス（ネイティブアプリも準備中） |
+| **利用可能なセッション** | `~/.claude` から全セッションを自動検出 | クラウド環境内の全セッション |
+| **対応エージェント** | Claude Code、Cursor CLI、Codex、Gemini CLI | Claude Code、Cursor CLI、Codex、Gemini CLI |
+| **ファイルエクスプローラとGit** | はい（UI に内蔵） | はい（UI に内蔵） |
+| **MCP設定** | UI で管理し、ローカルの `~/.claude` 設定と同期 | UI で管理 |
+| **IDEアクセス** | ローカル IDE | クラウド環境に接続された任意の IDE |
+| **REST API** | はい | はい |
+| **n8n ノード** | いいえ | はい |
+| **チーム共有** | いいえ | はい |
+| **料金プラン** | 無料（オープンソース） | 月 $7〜 |
 
-| コマンド / オプション | 短縮形 | 説明 |
-|------------------|-------|-------------|
-| `cloudcli` または `claude-code-ui` | | サーバーを起動（デフォルト） |
-| `cloudcli start` | | サーバーを明示的に起動 |
-| `cloudcli status` | | 設定とデータの場所を表示 |
-| `cloudcli update` | | 最新バージョンに更新 |
-| `cloudcli help` | | ヘルプ情報を表示 |
-| `cloudcli version` | | バージョン情報を表示 |
-| `--port <port>` | `-p` | サーバーポートを設定（デフォルト: 3001） |
-| `--database-path <path>` | | カスタムデータベースの場所を設定 |
+> どちらの選択肢でも、AI のサブスクリプション（Claude、Cursor など）はご自身のものを使用します — CloudCLI が提供するのは環境であり、AI そのものではありません。
 
-**例:**
-```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 ツールは **デフォルトで無効** です。これにより、潜在的に有害な操作が自動的に実行されることを防ぎます。
 
 ### ツールの有効化
 
-Claude Code の全機能を使用するには、手動でツールを有効にする必要があります：
-
 1. **ツール設定を開く** - サイドバーの歯車アイコンをクリック
-3. **選択的に有効化** - 必要なツールのみを有効にする
-4. **設定を適用** - 環境設定はローカルに保存されます
+2. **必要なツールだけを選んで有効化** - 本当に使うものだけをオンにする
+3. **設定を適用** - 設定内容はローカルに保存されます
 
 <div align="center">
 
 ![ツール設定モーダル](public/screenshots/tools-modal.png)
-*ツール設定インターフェース - 必要なものだけを有効にしましょう*
+*Tools 設定画面 - 必要なものだけを有効にしてください*
 
 </div>
 
-**推奨アプローチ**: 基本的なツールから有効にし、必要に応じて追加してください。これらの設定はいつでも調整できます。
+**推奨アプローチ**: まずは基本ツールだけを有効にし、必要に応じて追加してください。これらの設定は後からいつでも調整できます。
 
-## TaskMaster AI 統合 *（オプション）*
+---
 
-Claude Code UI は、高度なプロジェクト管理と AI 駆動のタスク計画のための **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)**（別名 claude-task-master）統合をサポートしています。
+## プラグイン
 
-提供機能
-- PRD（製品要件ドキュメント）からの AI 駆動タスク生成
-- スマートなタスク分解と依存関係管理
-- ビジュアルタスクボードと進捗追跡
+CloudCLI にはプラグインシステムがあり、独自のフロントエンド UI と（必要に応じて）Node.js バックエンドを持つカスタムタブを追加できます。プラグインは **Settings > Plugins** から git リポジトリを直接指定してインストールするか、自作できます。
 
-**セットアップとドキュメント**: インストール手順、設定ガイド、使用例は [TaskMaster AI GitHub リポジトリ](https://github.com/eyaltoledano/claude-task-master)をご覧ください。
-インストール後、設定から有効にできます
+### 利用可能なプラグイン
 
+| プラグイン | 説明 |
+|---|---|
+| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | 現在のプロジェクトについて、ファイル数、コード行数、ファイル種別の内訳、最大ファイル、最近変更されたファイルを表示 |
 
-## 使用ガイド
+### 自作する
 
-### 主要機能
+**[Plugin Starter Template →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** — このリポジトリを fork して独自プラグインを作れます。フロントエンド描画、ライブコンテキスト更新、バックエンドサーバーへの RPC 通信を含む動作例が入っています。
 
-#### プロジェクト管理
-Claude Code、Cursor、Codex のセッションが利用可能な場合、自動的に検出しプロジェクトとしてグループ化します
-- **プロジェクト操作** - プロジェクトの名前変更、削除、整理
-- **スマートナビゲーション** - 最近のプロジェクトやセッションへのクイックアクセス
-- **MCP サポート** - UI から独自の MCP サーバーを追加
+**[プラグインのドキュメント →](https://cloudcli.ai/docs/plugin-overview)** — プラグイン API、manifest 形式、セキュリティモデルなどの完全ガイド。
 
-#### チャットインターフェース
-- **レスポンシブチャットまたは Claude Code/Cursor CLI/Codex CLI を使用** - アダプティブチャットインターフェースを使用するか、シェルボタンで選択した CLI に接続できます
-- **リアルタイム通信** - WebSocket 接続で選択した CLI（Claude Code/Cursor/Codex）からレスポンスをストリーミング
-- **セッション管理** - 以前の会話を再開、または新しいセッションを開始
-- **メッセージ履歴** - タイムスタンプとメタデータ付きの完全な会話履歴
-- **マルチフォーマット対応** - テキスト、コードブロック、ファイル参照
+---
+## FAQ
 
-#### ファイルエクスプローラーとエディター
-- **インタラクティブファイルツリー** - 展開/折りたたみナビゲーションでプロジェクト構造を閲覧
-- **ライブファイル編集** - インターフェースで直接ファイルの読み取り、変更、保存
-- **シンタックスハイライト** - 複数のプログラミング言語に対応
-- **ファイル操作** - ファイルやディレクトリの作成、名前変更、削除
+<details>
+<summary>Claude Code Remote Control とはどう違いますか？</summary>
 
-#### Git エクスプローラー
+Claude Code Remote Control は、ローカル端末で既に動作しているセッションへメッセージを送れる仕組みです。マシンを起動したままにし、端末も開いたままにする必要があり、ネットワーク接続がない状態が約 10 分続くとセッションがタイムアウトします。
 
+CloudCLI UI と CloudCLI Cloud は、Claude Code の横に別物として存在するのではなく、Claude Code を拡張します — MCP サーバー、権限、設定、セッションは Claude Code がネイティブに使うものと完全に同一です。複製したり、別系統で管理したりしません。
 
-#### TaskMaster AI 統合 *（オプション）*
-- **ビジュアルタスクボード** - 開発タスク管理のためのカンバンスタイルインターフェース
-- **PRD パーサー** - 製品要件ドキュメントを作成し、構造化されたタスクに変換
-- **進捗追跡** - リアルタイムのステータス更新と完了追跡
+- **すべてのセッションにアクセス** — CloudCLI UI は `~/.claude` フォルダのすべてのセッションを自動検出します。Remote Control は、Claude モバイルアプリで利用可能にするため、1つのアクティブセッションだけを公開します。
+- **設定はあなたの設定** — CloudCLI UI で変更した MCP サーバー、ツール権限、プロジェクト構成は、Claude Code の設定に直接書き込まれて即座に反映され、その逆（Claude Code での変更が UI に反映）も同様です。
+- **対応エージェントがさらに充実** — Claude Code に加えて Cursor CLI、Codex、Gemini CLI にも対応しています。
+- **チャット窓だけではない完全な UI** — ファイルエクスプローラー、Git 統合、MCP 管理、シェル端末などがすべて組み込まれています。
+- **CloudCLI Cloud はクラウド上で稼働** — ノートパソコンを閉じてもエージェントは動き続けます。監視が要る端末も、スリープ防止も不要です。
 
-#### セッション管理
-- **セッション永続化** - すべての会話を自動保存
-- **セッション整理** - プロジェクトとタイムスタンプでセッションをグループ化
-- **セッション操作** - 会話履歴の名前変更、削除、エクスポート
-- **クロスデバイス同期** - どのデバイスからでもセッションにアクセス
+</details>
 
-### モバイルアプリ
-- **レスポンシブデザイン** - すべての画面サイズに最適化
-- **タッチフレンドリーインターフェース** - スワイプジェスチャーとタッチナビゲーション
-- **モバイルナビゲーション** - 親指で操作しやすいボトムタブバー
-- **アダプティブレイアウト** - 折りたたみ可能なサイドバーとスマートコンテンツ優先順位
-- **ホーム画面にショートカットを追加** - ホーム画面にショートカットを追加すると、アプリが PWA のように動作します
+<details>
+<summary>AI のサブスクリプションは別途支払いが必要ですか？</summary>
 
-## アーキテクチャ
+はい。CloudCLI は環境を提供するものであり、AI は含まれません。Claude、Cursor、Codex、または Gemini のサブスクリプションはご自身でご用意ください。CloudCLI Cloud のホスティング環境はそれに加えて月額 $7 から提供されます。
 
-### システム概要
+</details>
 
-```
-┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
-│   Frontend      │    │   Backend       │    │  Agent     │
-│   (React/Vite)  │◄──►│ (Express/WS)    │◄──►│  Integration    │
-│                 │    │                 │    │                │
-└─────────────────┘    └─────────────────┘    └─────────────────┘
-```
+<details>
+<summary>CloudCLI UI をスマホで使えますか？</summary>
 
-### バックエンド (Node.js + Express)
-- **Express サーバー** - 静的ファイル配信付きの RESTful API
-- **WebSocket サーバー** - チャットとプロジェクト更新のための通信
-- **エージェント統合 (Claude Code / Cursor CLI / Codex)** - プロセスの生成と管理
-- **ファイルシステム API** - プロジェクト向けファイルブラウザの公開
+はい。セルフホストの場合は、自身のマシンでサーバーを起動し、ネットワーク内のブラウザで `[yourip]:port` を開いてください。CloudCLI Cloud を使う場合は、任意のデバイスからアクセスできます。VPN もポートフォワーディングも不要で、セットアップも不要です。ネイティブアプリも開発中です。
 
-### フロントエンド (React + Vite)
-- **React 18** - hooks を使用したモダンなコンポーネントアーキテクチャ
-- **CodeMirror** - シンタックスハイライト対応の高度なコードエディター
+</details>
 
+<details>
+<summary>UI で加えた変更はローカルの Claude Code 設定に影響しますか？</summary>
 
+はい、セルフホストの場合です。CloudCLI UI は Claude Code がネイティブに使う `~/.claude` 設定を読み書きします。UI から追加した MCP サーバーは即座に Claude Code に反映され、その逆も同様です。
 
+</details>
 
-### コントリビューション
+---
 
-コントリビューションを歓迎します！コミット規約、開発ワークフロー、リリースプロセスの詳細は [Contributing Guide](CONTRIBUTING.md) をご覧ください。
-
-## トラブルシューティング
-
-### よくある問題と解決方法
-
-
-#### 「Claude プロジェクトが見つかりません」
-**問題**: UI にプロジェクトが表示されない、またはプロジェクトリストが空
-**解決方法**:
-- [Claude Code](https://docs.anthropic.com/en/docs/claude-code) が正しくインストールされていることを確認
-- 少なくとも1つのプロジェクトディレクトリで `claude` コマンドを実行して初期化
-- `~/.claude/projects/` ディレクトリが存在し、適切な権限があることを確認
-
-#### ファイルエクスプローラーの問題
-**問題**: ファイルが読み込まれない、権限エラー、空のディレクトリ
-**解決方法**:
-- プロジェクトディレクトリの権限を確認（ターミナルで `ls -la`）
-- プロジェクトパスが存在しアクセス可能であることを確認
-- 詳細なエラーメッセージについてはサーバーコンソールログを確認
-- プロジェクト範囲外のシステムディレクトリにアクセスしていないことを確認
+## コミュニティとサポート
 
+- **[ドキュメント](https://cloudcli.ai/docs)** — インストール、設定、機能、トラブルシューティング
+- **[Discord](https://discord.gg/buxwujPNRE)** — ヘルプを得たり、ユーザー同士で交流したりできます
+- **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — バグ報告と機能要望
+- **[コントリビューションガイド](CONTRIBUTING.md)** — プロジェクトへの貢献方法
 
 ## ライセンス
 
-GNU General Public License v3.0 - 詳細は [LICENSE](LICENSE) ファイルをご覧ください。
+GNU General Public License v3.0 - 詳細は [LICENSE](LICENSE) ファイルを参照してください。
 
-このプロジェクトはオープンソースであり、GPL v3 ライセンスの下で自由に使用、変更、配布できます。
+このプロジェクトはオープンソースであり、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
+- **[Gemini-CLI](https://geminicli.com/)** - Google Gemini CLI
 - **[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 駆動のプロジェクト管理とタスク計画
+- **[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)
+## スポンサー
+- [Siteboon - AI を活用したウェブサイトビルダー](https://siteboon.ai)
 ---
 
 <div align="center">

README.ko.md

@@ -1,12 +1,23 @@
 <div align="center">
-  <img src="public/logo.svg" alt="Claude Code UI" width="64" height="64">
+  <img src="public/logo.svg" alt="CloudCLI UI" width="64" height="64">
   <h1>Cloud CLI (일명 Claude Code UI)</h1>
+  <p><a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>, <a href="https://docs.cursor.com/en/cli/overview">Cursor CLI</a>, <a href="https://developers.openai.com/codex">Codex</a>, <a href="https://geminicli.com/">Gemini-CLI</a> 용 데스크톱 및 모바일 UI입니다.<br>로컬 또는 원격에서 실행하여 어디서나 활성 프로젝트와 세션을 확인하세요.</p>
 </div>
 
+<p align="center">
+  <a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://cloudcli.ai/docs">문서</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">버그 신고</a> · <a href="CONTRIBUTING.md">기여 안내</a>
+</p>
 
-[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의 활성 프로젝트와 세션을 확인하고, 어디서든(모바일 또는 데스크톱) 변경할 수 있습니다. 어디서든 작동하는 적절한 인터페이스를 제공합니다.
+<p align="center">
+  <a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Try_Now-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a>
+  <a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Discord 커뮤니티"></a>
+  <br><br>
+  <a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</p>
 
-<div align="right"><i><a href="./README.md">English</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
+<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.de.md">Deutsch</a> · <b>한국어</b> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
+
+---
 
 ## 스크린샷
 
@@ -15,14 +26,14 @@
 <table>
 <tr>
 <td align="center">
-<h3>데스크톱 뷰</h3>
-<img src="public/screenshots/desktop-main.png" alt="Desktop Interface" width="400">
+<h3>데스크톱 보기</h3>
+<img src="public/screenshots/desktop-main.png" alt="데스크톱 인터페이스" width="400">
 <br>
 <em>프로젝트 개요와 채팅을 보여주는 메인 인터페이스</em>
 </td>
 <td align="center">
 <h3>모바일 경험</h3>
-<img src="public/screenshots/mobile-chat.png" alt="Mobile Interface" width="250">
+<img src="public/screenshots/mobile-chat.png" alt="모바일 인터페이스" width="250">
 <br>
 <em>터치 내비게이션이 포함된 반응형 모바일 디자인</em>
 </td>
@@ -30,316 +41,190 @@
 <tr>
 <td align="center" colspan="2">
 <h3>CLI 선택</h3>
-<img src="public/screenshots/cli-selection.png" alt="CLI Selection" width="400">
+<img src="public/screenshots/cli-selection.png" alt="CLI 선택" width="400">
 <br>
-<em>Claude Code, Cursor CLI, Codex 중 선택</em>
+<em>Claude Code, Gemini, 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 지원
-
+- **반응형 디자인** - 데스크톱, 태블릿, 모바일을 아우르는 매끄러운 경험으로 어디서든 Agents를 사용할 수 있습니다
+- **대화형 채팅 인터페이스** - 내장된 채팅 UI를 통해 에이전트와 자연스럽게 소통
+- **통합 셸 터미널** - 셸 기능을 통해 Agents CLI에 직접 접근
+- **파일 탐색기** - 구문 강조 및 실시간 편집을 갖춘 인터랙티브 파일 트리
+- **Git 탐색기** - 변경 사항 보기, 스테이징 및 커밋. 브랜치 전환 기능 포함
+- **세션 관리** - 대화를 재개하고, 여러 세션을 관리하며 기록을 추적
+- **플러그인 시스템** - 커스텀 탭, 백엔드 서비스, 통합을 추가하여 CloudCLI 확장. [직접 빌드 →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)
+- **TaskMaster AI 통합** *(선택사항)* - AI 중심의 작업 계획, PRD 파싱, 워크플로 자동화를 통한 고급 프로젝트 관리
+- **모델 호환성** - Claude, GPT, Gemini 모델 계열에서 작동 (`shared/modelConstants.js`에서 전체 지원 모델 확인)
 
 ## 빠른 시작
 
-### 사전 요구사항
+### CloudCLI Cloud (추천)
 
-- [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) 설치 및 구성
+가장 빠르게 시작하는 방법 — 로컬 설정 없이도 가능합니다. 웹, 모바일 앱, API 또는 선호하는 IDE에서 이용할 수 있는 완전 관리형 컨테이너화된 개발 환경을 제공합니다.
 
-### 원클릭 실행 (권장)
+**[CloudCLI Cloud 시작하기](https://cloudcli.ai)**
 
-설치 없이 바로 실행:
+### 셀프 호스트 (오픈 소스)
+
+**npx**로 즉시 CloudCLI UI를 실행하세요 (Node.js v22+ 필요):
 
 ```bash
-npx @siteboon/claude-code-ui
+npx @cloudcli-ai/cloudcli
 ```
 
-서버가 시작되면 `http://localhost:3001` (또는 설정한 PORT)에서 접근할 수 있습니다.
-
-**재시작**: 서버를 중지한 후 동일한 `npx` 명령을 다시 실행하면 됩니다
-### 전역 설치 (정기적 사용 시)
-
-자주 사용하는 경우 한 번만 전역 설치:
+**정기적으로 사용한다면 전역 설치:**
 
 ```bash
-npm install -g @siteboon/claude-code-ui
+npm install -g @cloudcli-ai/cloudcli
+cloudcli
 ```
 
-간단한 명령으로 시작:
+`http://localhost:3001`을 열면 기존 세션이 자동으로 발견됩니다.
 
-```bash
-claude-code-ui
-```
+자세한 구성 옵션, PM2, 원격 서버 설정 등은 **[문서 →](https://cloudcli.ai/docs)**를 참고하세요
 
+---
 
-**재시작**: Ctrl+C로 중지한 후 `claude-code-ui`를 다시 실행합니다.
+## 어느 옵션이 적합한가요?
 
-**업데이트**:
-```bash
-cloudcli update
-```
+CloudCLI UI는 CloudCLI Cloud를 구동하는 오픈 소스 UI 계층입니다. 로컬 머신에서 직접 셀프 호스트하거나, CloudCLI Cloud(완전 관리형 클라우드 환경, 팀 기능, 심화 통합 제공)를 사용할 수 있습니다.
 
-### CLI 사용법
+| | CloudCLI UI (셀프 호스트) | CloudCLI Cloud |
+|---|---|---|
+| **적합한 대상** | 로컬 에이전트 세션을 위한 전체 UI가 필요한 개발자 | 어디서든 접근 가능한 클라우드에서 에이전트를 운영하고자 하는 팀 및 개발자 |
+| **접근 방법** | `[yourip]:port`를 통해 브라우저 접속 | 브라우저, IDE, REST API, n8n |
+| **설정** | `npx @cloudcli-ai/cloudcli` | 설정 불필요 |
+| **기기 유지 필요 여부** | 예 (머신 켜둬야 함) | 아니오 |
+| **모바일 접근** | 네트워크 내 브라우저 | 모든 기기 (네이티브 앱 예정) |
+| **세션 접근** | `~/.claude`에서 자동 발견 | 클라우드 환경 내 세션 |
+| **지원 에이전트** | Claude Code, Cursor CLI, Codex, Gemini CLI | Claude Code, Cursor CLI, Codex, Gemini CLI |
+| **파일 탐색기 및 Git** | UI에 통합됨 | UI에 통합됨 |
+| **MCP 구성** | UI에서 관리, 로컬 `~/.claude` 설정과 동기화됨 | UI에서 관리 |
+| **IDE 접근** | 로컬 IDE | 클라우드 환경에 연결된 모든 IDE |
+| **REST API** | 예 | 예 |
+| **n8n 노드** | 아니오 | 예 |
+| **팀 공유** | 아니오 | 예 |
+| **플랫폼 비용** | 무료, 오픈 소스 | 월 $7부터 |
 
-전역 설치 후 `claude-code-ui`와 `cloudcli` 명령을 사용할 수 있습니다:
+> 둘 다 자체 AI 구독(Claude, Cursor 등)을 그대로 사용합니다 — 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 도구는 **기본적으로 비활성화**되어 있습니다. 이는 잠재적인 유해 작업이 자동 실행되는 것을 방지하기 위한 조치입니다.
 
 ### 도구 활성화
 
-Claude Code의 전체 기능을 사용하려면 수동으로 도구를 활성화해야 합니다:
-
-1. **도구 설정 열기** - 사이드바의 톱니바퀴 아이콘을 클릭
-3. **선택적으로 활성화** - 필요한 도구만 활성화
-4. **설정 적용** - 환경설정은 로컬에 저장됩니다
+1. **도구 설정 열기** - 사이드바의 톱니바퀴 아이콘 클릭
+2. **선택적으로 활성화** - 필요한 도구만 켜기
+3. **설정 적용** - 선호도는 로컬에 저장됨
 
 <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 기반 작업 생성
-- 스마트 작업 분해 및 의존성 관리
-- 시각적 작업 보드 및 진행 상황 추적
+CloudCLI는 커스텀 탭과 선택적 Node.js 백엔드가 포함된 플러그인 시스템을 제공합니다. Settings > Plugins에서 Git 저장소에서 플러그인을 설치하거나 직접 빌드할 수 있습니다.
 
-**설정 및 문서**: 설치 지침, 구성 가이드 및 사용 예시는 [TaskMaster AI GitHub 리포지토리](https://github.com/eyaltoledano/claude-task-master)를 방문하세요.
-설치 후 설정에서 활성화할 수 있습니다
+### 이용 가능한 플러그인
 
+| 플러그인 | 설명 |
+|---|---|
+| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | 현재 프로젝트의 파일 수, 코드 줄 수, 파일 유형 분포, 가장 큰 파일, 최근 수정 파일을 표시 |
 
-## 사용 가이드
+### 직접 만들기
 
-### 핵심 기능
+**[Plugin Starter Template →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** — 이 저장소를 포크하여 플러그인 구축. 프런트엔드 렌더링, 실시간 컨텍스트 업데이트, RPC 통신 예제 포함.
 
-#### 프로젝트 관리
-Claude Code, Cursor 또는 Codex 세션을 사용할 수 있을 때 자동으로 발견하고 프로젝트로 그룹화합니다
-- **프로젝트 작업** - 프로젝트 이름 변경, 삭제 및 정리
-- **스마트 내비게이션** - 최근 프로젝트 및 세션에 빠르게 접근
-- **MCP 지원** - UI를 통해 자체 MCP 서버 추가
+**[플러그인 문서 →](https://cloudcli.ai/docs/plugin-overview)** — 플러그인 API, 매니페스트 포맷, 보안 모델 등을 설명.
 
-#### 채팅 인터페이스
-- **반응형 채팅 또는 Claude Code/Cursor CLI/Codex CLI 사용** - 적응형 채팅 인터페이스를 사용하거나 셸 버튼을 사용하여 선택한 CLI에 연결할 수 있습니다
-- **실시간 통신** - WebSocket 연결을 통해 선택한 CLI(Claude Code/Cursor/Codex)에서 응답 스트리밍
-- **세션 관리** - 이전 대화 재개 또는 새 세션 시작
-- **메시지 기록** - 타임스탬프 및 메타데이터가 포함된 전체 대화 기록
-- **다중 형식 지원** - 텍스트, 코드 블록 및 파일 참조
+---
 
-#### 파일 탐색기 및 편집기
-- **대화형 파일 트리** - 확장/축소 내비게이션으로 프로젝트 구조 탐색
-- **실시간 파일 편집** - 인터페이스에서 직접 파일 읽기, 수정 및 저장
-- **구문 강조** - 다양한 프로그래밍 언어 지원
-- **파일 작업** - 파일 및 디렉토리 생성, 이름 변경, 삭제
+## FAQ
 
-#### Git 탐색기
+<details>
+<summary>Claude Code Remote Control과 어떻게 다른가요?</summary>
 
+Claude Code Remote Control은 이미 로컬 터미널에서 실행 중인 세션으로 메시지를 전송합니다. 이 경우 기계가 켜져 있어야 하고 터미널을 열어 둬야 하며, 네트워크 연결 없이 약 10분 후 타임아웃됩니다.
 
-#### TaskMaster AI 통합 *(선택사항)*
-- **시각적 작업 보드** - 개발 작업 관리를 위한 칸반 스타일 인터페이스
-- **PRD 파서** - 제품 요구사항 문서를 생성하고 구조화된 작업으로 변환
-- **진행 상황 추적** - 실시간 상태 업데이트 및 완료 추적
+CloudCLI UI와 CloudCLI Cloud는 Claude Code를 확장하며 별도로 존재하지 않습니다 — MCP 서버, 권한, 설정, 세션은 Claude Code에서 그대로 사용됩니다.
 
-#### 세션 관리
-- **세션 지속성** - 모든 대화 자동 저장
-- **세션 정리** - 프로젝트 및 타임스탬프별 세션 그룹화
-- **세션 작업** - 대화 기록 이름 변경, 삭제 및 내보내기
-- **크로스 디바이스 동기화** - 모든 기기에서 세션 접근
+- **모든 세션을 다룬다** — CloudCLI UI는 `~/.claude` 폴더에서 모든 세션을 자동 발견합니다. Remote Control은 단일 활성 세션만 노출합니다.
+- **설정은 그대로** — CloudCLI UI에서 변경한 MCP, 도구 권한, 프로젝트 설정은 Claude Code에 즉시 반영됩니다.
+- **지원 에이전트가 더 많음** — Claude Code, Cursor CLI, Codex, Gemini CLI 지원.
+- **전체 UI 제공** — 단일 채팅 창이 아닌 파일 탐색기, Git 통합, MCP 관리 및 셸 터미널 포함.
+- **CloudCLI Cloud는 클라우드에서 실행** — 노트북을 닫아도 에이전트가 실행됩니다. 터미널을 계속 확인할 필요 없음.
 
-### 모바일 앱
-- **반응형 디자인** - 모든 화면 크기에 최적화
-- **터치 친화적 인터페이스** - 스와이프 제스처 및 터치 내비게이션
-- **모바일 내비게이션** - 엄지 내비게이션을 위한 하단 탭 바
-- **적응형 레이아웃** - 접을 수 있는 사이드바 및 스마트 콘텐츠 우선순위
-- **홈 화면 바로가기 추가** - 홈 화면에 바로가기를 추가하면 앱이 PWA처럼 작동합니다
+</details>
 
-## 아키텍처
+<details>
+<summary>AI 구독을 별도로 결제해야 하나요?</summary>
 
-### 시스템 개요
+네. CloudCLI는 환경만 제공합니다. Claude, Cursor, Codex, Gemini 구독 비용은 별도로 부과됩니다. CloudCLI Cloud는 관리형 환경을 월 $7부터 제공합니다.
 
-```
-┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
-│   Frontend      │    │   Backend       │    │  Agent     │
-│   (React/Vite)  │◄──►│ (Express/WS)    │◄──►│  Integration    │
-│                 │    │                 │    │                │
-└─────────────────┘    └─────────────────┘    └─────────────────┘
-```
+</details>
 
-### 백엔드 (Node.js + Express)
-- **Express 서버** - 정적 파일 제공이 포함된 RESTful API
-- **WebSocket 서버** - 채팅 및 프로젝트 새로고침을 위한 통신
-- **에이전트 통합 (Claude Code / Cursor CLI / Codex)** - 프로세스 생성 및 관리
-- **파일 시스템 API** - 프로젝트를 위한 파일 브라우저 노출
+<details>
+<summary>CloudCLI UI를 휴대폰에서 사용할 수 있나요?</summary>
 
-### 프론트엔드 (React + Vite)
-- **React 18** - hooks를 사용한 현대적 컴포넌트 아키텍처
-- **CodeMirror** - 구문 강조를 지원하는 고급 코드 편집기
+네. 셀프 호스트인 경우 기계에서 서버를 실행하고 네트워크의 아무 브라우저에서 `[yourip]:port`를 열면 됩니다. CloudCLI Cloud는 어떤 기기에서도 열 수 있으며, 네이티브 앱도 준비 중입니다.
 
+</details>
 
+<details>
+<summary>UI에서 변경하면 로컬 Claude Code 설정에 영향을 주나요?</summary>
 
-### 기여하기
+네, 셀프 호스트에서는 그렇습니다. CloudCLI UI는 Claude Code가 사용하는 동일한 `~/.claude` 설정을 읽고 씁니다. UI에서 추가한 MCP 서버가 Claude Code에 즉시 나타납니다.
 
-기여를 환영합니다! 커밋 규칙, 개발 워크플로우, 릴리스 프로세스에 대한 자세한 내용은 [Contributing Guide](CONTRIBUTING.md)를 참조해주세요.
+</details>
 
-## 문제 해결
+---
 
-### 일반적인 문제 및 해결 방법
-
-
-#### "Claude 프로젝트를 찾을 수 없음"
-**문제**: UI에 프로젝트가 없거나 프로젝트 목록이 비어 있음
-**해결 방법**:
-- [Claude Code](https://docs.anthropic.com/en/docs/claude-code)가 올바르게 설치되었는지 확인
-- 초기화를 위해 최소 하나의 프로젝트 디렉토리에서 `claude` 명령 실행
-- `~/.claude/projects/` 디렉토리가 존재하고 적절한 권한이 있는지 확인
-
-#### 파일 탐색기 문제
-**문제**: 파일이 로드되지 않음, 권한 오류, 빈 디렉토리
-**해결 방법**:
-- 프로젝트 디렉토리 권한 확인 (터미널에서 `ls -la`)
-- 프로젝트 경로가 존재하고 접근 가능한지 확인
-- 자세한 오류 메시지는 서버 콘솔 로그 검토
-- 프로젝트 범위 밖의 시스템 디렉토리에 접근하지 않는지 확인
+## 커뮤니티 및 지원
 
+- **[문서](https://cloudcli.ai/docs)** — 설치, 구성, 기능, 문제 해결 안내
+- **[Discord](https://discord.gg/buxwujPNRE)** — 도움 및 커뮤니티 참여
+- **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — 버그 보고 및 기능 요청
+- **[기여 안내](CONTRIBUTING.md)** — 프로젝트 참여 방법
 
 ## 라이선스
 
-GNU General Public License v3.0 - 자세한 내용은 [LICENSE](LICENSE) 파일을 참조하세요.
+GNU General Public License v3.0 - 자세한 내용은 [LICENSE](LICENSE) 파일 참조.
 
-이 프로젝트는 오픈 소스이며 GPL v3 라이선스에 따라 자유롭게 사용, 수정 및 배포할 수 있습니다.
+이 프로젝트는 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
+- **[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
+- **[Gemini-CLI](https://geminicli.com/)** - Google Gemini CLI
 - **[React](https://react.dev/)** - 사용자 인터페이스 라이브러리
 - **[Vite](https://vitejs.dev/)** - 빠른 빌드 도구 및 개발 서버
 - **[Tailwind CSS](https://tailwindcss.com/)** - 유틸리티 우선 CSS 프레임워크
-- **[CodeMirror](https://codemirror.net/)** - 고급 코드 편집기
+- **[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>
+  <strong>Claude Code, Cursor, Codex 커뮤니티를 위해 정성껏 제작되었습니다.</strong>
 </div>

README.md

@@ -1,13 +1,23 @@
 <div align="center">
-  <img src="public/logo.svg" alt="Claude Code UI" width="64" height="64">
+  <img src="public/logo.svg" alt="CloudCLI UI" width="64" height="64">
   <h1>Cloud CLI (aka Claude Code UI)</h1>
+  <p>A desktop and mobile UI for <a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>, <a href="https://docs.cursor.com/en/cli/overview">Cursor CLI</a>, <a href="https://developers.openai.com/codex">Codex</a>, and <a href="https://geminicli.com/">Gemini-CLI</a>.<br>Use it locally or remotely to view your active projects and sessions from everywhere.</p>
 </div>
 
+<p align="center">
+  <a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://cloudcli.ai/docs">Documentation</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">Bug Reports</a> · <a href="CONTRIBUTING.md">Contributing</a>
+</p>
 
-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. 
+<p align="center">
+  <a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Try_Now-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a>
+  <a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Join our Discord"></a>
+  <br><br>
+  <a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</p>
 
-<a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
-<div align="right"><i><b>English</b> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
+<div align="right"><i><b>English</b> · <a href="./README.ru.md">Русский</a> · <a href="./README.de.md">Deutsch</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
+
+---
 
 ## Screenshots
 
@@ -33,7 +43,7 @@ A desktop and mobile UI for [Claude Code](https://docs.anthropic.com/en/docs/cla
 <h3>CLI Selection</h3>
 <img src="public/screenshots/cli-selection.png" alt="CLI Selection" width="400">
 <br>
-<em>Select between Claude Code, Cursor CLI and Codex</em>
+<em>Select between Claude Code, Gemini, Cursor CLI and Codex</em>
 </td>
 </tr>
 </table>
@@ -44,146 +54,72 @@ A desktop and mobile UI for [Claude Code](https://docs.anthropic.com/en/docs/cla
 
 ## Features
 
-- **Responsive Design** - Works seamlessly across desktop, tablet, and mobile so you can also use Claude Code, Cursor, or Codex from mobile 
-- **Interactive Chat Interface** - Built-in chat interface for seamless communication with Claude Code, Cursor, or Codex
-- **Integrated Shell Terminal** - Direct access to Claude Code, Cursor CLI, or Codex through built-in shell functionality
+- **Responsive Design** - Works seamlessly across desktop, tablet, and mobile so you can also use Agents from mobile 
+- **Interactive Chat Interface** - Built-in chat interface for seamless communication with the Agents
+- **Integrated Shell Terminal** - Direct access to the Agents CLI through built-in shell functionality
 - **File Explorer** - Interactive file tree with syntax highlighting and live editing
 - **Git Explorer** - View, stage and commit your changes. You can also switch branches 
 - **Session Management** - Resume conversations, manage multiple sessions, and track history
+- **Plugin System** - Extend CloudCLI with custom plugins — add new tabs, backend services, and integrations. [Build your own →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)
 - **TaskMaster AI Integration** *(Optional)* - Advanced project management with AI-powered task planning, PRD parsing, and workflow automation
-- **Model Compatibility** - Works with Claude Sonnet 4.5, Opus 4.5, and GPT-5.2 
+- **Model Compatibility** - Works with Claude, GPT, and Gemini model families (see [`shared/modelConstants.js`](shared/modelConstants.js) for the full list of supported models)
 
 
 ## Quick Start
 
-### Prerequisites
+### CloudCLI Cloud (Recommended)
 
-- [Node.js](https://nodejs.org/) v22 or higher
-- [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) installed and configured, and/or
-- [Cursor CLI](https://docs.cursor.com/en/cli/overview) installed and configured, and/or
-- [Codex](https://developers.openai.com/codex) installed and configured
+The fastest way to get started — no local setup required. Get a fully managed, containerized development environment accessible from the web, mobile app, API, or your favorite IDE.
 
-### One-click Operation (Recommended)
-
-No installation required, direct operation:
-
-```bash
-npx @siteboon/claude-code-ui
-```
-
-The server will start and be accessible at `http://localhost:3001` (or your configured PORT).
-
-**To restart**: Simply run the same `npx` command again after stopping the server
-### Global Installation (For Regular Use)
-
-For frequent use, install globally once:
-
-```bash
-npm install -g @siteboon/claude-code-ui
-```
-
-Then start with a simple command:
-
-```bash
-claude-code-ui
-```
+**[Get started with CloudCLI Cloud](https://cloudcli.ai)**
 
 
-**To restart**: Stop with Ctrl+C and run `claude-code-ui` again.
+### Self-Hosted (Open source)
 
-**To update**:
-```bash
-cloudcli update
-```
-
-### CLI Usage
-
-After global installation, you have access to both `claude-code-ui` and `cloudcli` commands:
-
-| Command / Option | Short | Description |
-|------------------|-------|-------------|
-| `cloudcli` or `claude-code-ui` | | Start the server (default) |
-| `cloudcli start` | | Start the server explicitly |
-| `cloudcli status` | | Show configuration and data locations |
-| `cloudcli update` | | Update to the latest version |
-| `cloudcli help` | | Show help information |
-| `cloudcli version` | | Show version information |
-| `--port <port>` | `-p` | Set server port (default: 3001) |
-| `--database-path <path>` | | Set custom database location |
-
-**Examples:**
-```bash
-cloudcli                          # Start with defaults
-cloudcli -p 8080              # Start on custom port
-cloudcli status                   # Show current configuration
-```
-
-### Run as Background Service (Recommended for Production)
-
-For production use, run Claude Code UI as a background service using PM2 (Process Manager 2):
-
-#### Install PM2
-
-```bash
-npm install -g pm2
-```
-
-#### Start as Background Service
-
-```bash
-# Start the server in background
-pm2 start claude-code-ui --name "claude-code-ui"
-
-# Or using the shorter alias
-pm2 start cloudcli --name "claude-code-ui"
-
-# Start on a custom port
-pm2 start cloudcli --name "claude-code-ui" -- --port 8080
-```
-
-
-#### Auto-Start on System Boot
-
-To make Claude Code UI start automatically when your system boots:
-
-```bash
-# Generate startup script for your platform
-pm2 startup
-
-# Save current process list
-pm2 save
-```
-
-
-### Local Development Installation
-
-1. **Clone the repository:**
-```bash
-git clone https://github.com/siteboon/claudecodeui.git
-cd claudecodeui
-```
-
-2. **Install dependencies:**
-```bash
-npm install
-```
-
-3. **Configure environment:**
-```bash
-cp .env.example .env
-# Edit .env with your preferred settings
-```
-
-4. **Start the application:**
-```bash
-# Development mode (with hot reload)
-npm run dev
+Try CloudCLI UI instantly with **npx** (requires **Node.js** v22+):
 
 ```
-The application will start at the port you specified in your .env
+npx @cloudcli-ai/cloudcli
+```
 
-5. **Open your browser:**
-   - Development: `http://localhost:3001`
+Or install **globally** for regular use:
+
+```
+npm install -g @cloudcli-ai/cloudcli
+cloudcli
+```
+
+Open `http://localhost:3001` — all your existing sessions are discovered automatically.
+
+Visit the **[documentation →](https://cloudcli.ai/docs)** for more full configuration options, PM2, remote server setup and more
+
+
+---
+
+## Which option is right for you?
+
+CloudCLI UI is the open source UI layer that powers CloudCLI Cloud. You can self-host it on your own machine, or use CloudCLI Cloud which builds on top of it with a full managed cloud environment, team features, and deeper integrations.
+
+| | CloudCLI UI (Self-hosted) | CloudCLI Cloud |
+|---|---|---|
+| **Best for** | Developers who want a full UI for local agent sessions on their own machine | Teams and developers who want agents running in the cloud, accessible from anywhere |
+| **How you access it** | Browser via `[yourip]:port` | Browser, any IDE, REST API, n8n |
+| **Setup** | `npx @cloudcli-ai/cloudcli` | No setup required |
+| **Machine needs to stay on** | Yes | No |
+| **Mobile access** | Any browser on your network | Any device, native app coming |
+| **Sessions available** | All sessions auto-discovered from `~/.claude` | All sessions within your cloud environment |
+| **Agents supported** | Claude Code, Cursor CLI, Codex, Gemini CLI | Claude Code, Cursor CLI, Codex, Gemini CLI |
+| **File explorer and Git** | Yes, built into the UI | Yes, built into the UI |
+| **MCP configuration** | Managed via UI, synced with your local `~/.claude` config | Managed via UI |
+| **IDE access** | Your local IDE | Any IDE connected to your cloud environment |
+| **REST API** | Yes | Yes |
+| **n8n node** | No | Yes |
+| **Team sharing** | No | Yes |
+| **Platform cost** | Free, open source | Starts at $7/month |
+
+> Both options use your own AI subscriptions (Claude, Cursor, etc.) — CloudCLI provides the environment, not the AI.
+
+---
 
 ## Security & Tools Configuration
 
@@ -194,8 +130,8 @@ The application will start at the port you specified in your .env
 To use Claude Code's full functionality, you'll need to manually enable tools:
 
 1. **Open Tools Settings** - Click the gear icon in the sidebar
-3. **Enable Selectively** - Turn on only the tools you need
-4. **Apply Settings** - Your preferences are saved locally
+2. **Enable Selectively** - Turn on only the tools you need
+3. **Apply Settings** - Your preferences are saved locally
 
 <div align="center">
 
@@ -206,120 +142,82 @@ To use Claude Code's full functionality, you'll need to manually enable tools:
 
 **Recommended approach**: Start with basic tools enabled and add more as needed. You can always adjust these settings later.
 
-## TaskMaster AI Integration *(Optional)*
+---
 
-Claude Code UI supports **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** (aka claude-task-master) integration for advanced project management and AI-powered task planning.
+## Plugins
 
-It provides
-- AI-powered task generation from PRDs (Product Requirements Documents)
-- Smart task breakdown and dependency management  
-- Visual task boards and progress tracking
+CloudCLI has a plugin system that lets you add custom tabs with their own frontend UI and optional Node.js backend. Install plugins from git repos directly in **Settings > Plugins**, or build your own.
 
-**Setup & Documentation**: Visit the [TaskMaster AI GitHub repository](https://github.com/eyaltoledano/claude-task-master) for installation instructions, configuration guides, and usage examples.
-After installing it you should be able to enable it from the Settings
+### Available Plugins
 
+| Plugin | Description |
+|---|---|
+| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | Shows file counts, lines of code, file-type breakdown, largest files, and recently modified files for your current project |
+| **[Web Terminal](https://github.com/cloudcli-ai/cloudcli-plugin-terminal)** | Full xterm.js terminal with multi-tab support|
 
-## Usage Guide
+### Build Your Own
 
-### Core Features
+**[Plugin Starter Template →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** — fork this repo to create your own plugin. It includes a working example with frontend rendering, live context updates, and RPC communication to a backend server.
 
-#### Project Management
-It automatically discovers Claude Code, Cursor or Codex sessions when available and groups them together into projects
-session counts
-- **Project Actions** - Rename, delete, and organize projects
-- **Smart Navigation** - Quick access to recent projects and sessions
-- **MCP support** - Add your own MCP servers through the UI 
+**[Plugin Documentation →](https://cloudcli.ai/docs/plugin-overview)** — full guide to the plugin API, manifest format, security model, and more.
 
-#### Chat Interface
-- **Use responsive chat or Claude Code/Cursor CLI/Codex CLI** - You can either use the adapted chat interface or use the shell button to connect to your selected CLI. 
-- **Real-time Communication** - Stream responses from your selected CLI (Claude Code/Cursor/Codex) with WebSocket connection
-- **Session Management** - Resume previous conversations or start fresh sessions
-- **Message History** - Complete conversation history with timestamps and metadata
-- **Multi-format Support** - Text, code blocks, and file references
+---
+## FAQ
 
-#### File Explorer & Editor
-- **Interactive File Tree** - Browse project structure with expand/collapse navigation
-- **Live File Editing** - Read, modify, and save files directly in the interface
-- **Syntax Highlighting** - Support for multiple programming languages
-- **File Operations** - Create, rename, delete files and directories
+<details>
+<summary>How is this different from Claude Code Remote Control?</summary>
 
-#### Git Explorer
+Claude Code Remote Control lets you send messages to a session already running in your local terminal. Your machine has to stay on, your terminal has to stay open, and sessions time out after roughly 10 minutes without a network connection.
 
+CloudCLI UI and CloudCLI Cloud extend Claude Code rather than sit alongside it — your MCP servers, permissions, settings, and sessions are the exact same ones Claude Code uses natively. Nothing is duplicated or managed separately.
 
-#### TaskMaster AI Integration *(Optional)*
-- **Visual Task Board** - Kanban-style interface for managing development tasks
-- **PRD Parser** - Create Product Requirements Documents and parse them into structured tasks
-- **Progress Tracking** - Real-time status updates and completion tracking
+Here's what that means in practice:
 
-#### Session Management
-- **Session Persistence** - All conversations automatically saved
-- **Session Organization** - Group sessions by project and timestamp
-- **Session Actions** - Rename, delete, and export conversation history
-- **Cross-device Sync** - Access sessions from any device
+- **All your sessions, not just one** — CloudCLI UI auto-discovers every session from your `~/.claude` folder. Remote Control only exposes the single active session to make it available in the Claude mobile app.
+- **Your settings are your settings** — MCP servers, tool permissions, and project config you change in CloudCLI UI are written directly to your Claude Code config and take effect immediately, and vice versa.
+- **Works with more agents** — Claude Code, Cursor CLI, Codex, and Gemini CLI, not just Claude Code.
+- **Full UI, not just a chat window** — file explorer, Git integration, MCP management, and a shell terminal are all built in.
+- **CloudCLI Cloud runs in the cloud** — close your laptop, the agent keeps running. No terminal to babysit, no machine to keep awake.
 
-### Mobile App
-- **Responsive Design** - Optimized for all screen sizes
-- **Touch-friendly Interface** - Swipe gestures and touch navigation
-- **Mobile Navigation** - Bottom tab bar for easy thumb navigation
-- **Adaptive Layout** - Collapsible sidebar and smart content prioritization
-- **Add shortcut to Home Screen** - Add a shortcut to your home screen and the app will behave like a PWA
+</details>
 
-## Architecture
+<details>
+<summary>Do I need to pay for an AI subscription separately?</summary>
 
-### System Overview
+Yes. CloudCLI provides the environment, not the AI. You bring your own Claude, Cursor, Codex, or Gemini subscription. CloudCLI Cloud starts at $7/month for the hosted environment on top of that.
 
-```
-┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
-│   Frontend      │    │   Backend       │    │  Agent     │
-│   (React/Vite)  │◄──►│ (Express/WS)    │◄──►│  Integration    │
-│                 │    │                 │    │                │
-└─────────────────┘    └─────────────────┘    └─────────────────┘
-```
+</details>
 
-### Backend (Node.js + Express)
-- **Express Server** - RESTful API with static file serving
-- **WebSocket Server** - Communication for chats and project refresh
-- **Agent Integration (Claude Code / Cursor CLI / Codex)** - Process spawning and management
-- **File System API** - Exposing file browser for projects
+<details>
+<summary>Can I use CloudCLI UI on my phone?</summary>
 
-### Frontend (React + Vite)
-- **React 18** - Modern component architecture with hooks
-- **CodeMirror** - Advanced code editor with syntax highlighting
+Yes. For self-hosted, run the server on your machine and open `[yourip]:port` in any browser on your network. For CloudCLI Cloud, open it from any device — no VPN, no port forwarding, no setup. A native app is also in the works.
 
+</details>
 
+<details>
+<summary>Will changes I make in the UI affect my local Claude Code setup?</summary>
 
+Yes, for self-hosted. CloudCLI UI reads from and writes to the same `~/.claude` config that Claude Code uses natively. MCP servers you add via the UI show up in Claude Code immediately and vice versa.
 
+</details>
 
-### Contributing
+---
 
-We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details on commit conventions, development workflow, and release process.
-
-## Troubleshooting
-
-### Common Issues & Solutions
-
-
-#### "No Claude projects found"
-**Problem**: The UI shows no projects or empty project list
-**Solutions**:
-- Ensure [Claude Code](https://docs.anthropic.com/en/docs/claude-code) is properly installed
-- Run `claude` command in at least one project directory to initialize
-- Verify `~/.claude/projects/` directory exists and has proper permissions
-
-#### File Explorer Issues
-**Problem**: Files not loading, permission errors, empty directories
-**Solutions**:
-- Check project directory permissions (`ls -la` in terminal)
-- Verify the project path exists and is accessible
-- Review server console logs for detailed error messages
-- Ensure you're not trying to access system directories outside project scope
+## Community & Support
 
+- **[Documentation](https://cloudcli.ai/docs)** — installation, configuration, features, and troubleshooting
+- **[Discord](https://discord.gg/buxwujPNRE)** — get help and connect with other users
+- **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — bug reports and feature requests
+- **[Contributing Guide](CONTRIBUTING.md)** — how to contribute to the project
 
 ## License
 
-GNU General Public License v3.0 - see [LICENSE](LICENSE) file for details.
+GNU Affero General Public License v3.0 or later (AGPL-3.0-or-later) — see [LICENSE](LICENSE) for the full text, including additional terms under Section 7.
 
-This project is open source and free to use, modify, and distribute under the GPL v3 license.
+This project is open source and free to use, modify, and distribute under the AGPL-3.0-or-later license. If you modify this software and run it as a network service, you must make your modified source code available to users of that service.
+
+CloudCLI UI  - (https://cloudcli.ai).
 
 ## Acknowledgments
 
@@ -327,18 +225,13 @@ This project is open source and free to use, modify, and distribute under the GP
 - **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic's official CLI
 - **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursor's official CLI
 - **[Codex](https://developers.openai.com/codex)** - OpenAI Codex
+- **[Gemini-CLI](https://geminicli.com/)** - Google Gemini CLI
 - **[React](https://react.dev/)** - User interface library
 - **[Vite](https://vitejs.dev/)** - Fast build tool and dev server
 - **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
 - **[CodeMirror](https://codemirror.net/)** - Advanced code editor
 - **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(Optional)* - AI-powered project management and task planning
 
-## Support & Community
-
-### Stay Updated
-- **Star** this repository to show support
-- **Watch** for updates and new releases
-- **Follow** the project for announcements
 
 ### Sponsors
 - [Siteboon - AI powered website builder](https://siteboon.ai)

README.ru.md

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

README.zh-CN.md

@@ -1,12 +1,23 @@
 <div align="center">
-  <img src="public/logo.svg" alt="Claude Code UI" width="64" height="64">
-  <h1>Cloud CLI (又名 Claude Code UI)</h1>
+  <img src="public/logo.svg" alt="CloudCLI UI" width="64" height="64">
+  <h1>Cloud CLI（又名 Claude Code UI）</h1>
+  <p><a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>、<a href="https://docs.cursor.com/en/cli/overview">Cursor CLI</a>、<a href="https://developers.openai.com/codex">Codex</a> 和 <a href="https://geminicli.com/">Gemini-CLI</a> 的桌面和移动端 UI。可在本地或远程使用，从任何地方查看激活的项目与会话。</p>
 </div>
 
+<p align="center">
+  <a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://cloudcli.ai/docs">文档</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">Bug 报告</a> · <a href="CONTRIBUTING.md">贡献指南</a>
+</p>
 
-[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 中的活跃项目和会话,并从任何地方(移动端或桌面端)对它们进行修改。这为您提供了一个在任何地方都能正常使用的合适界面。
+<p align="center">
+  <a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Try_Now-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a>
+  <a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="加入 Discord 社区"></a>
+  <br><br>
+  <a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</p>
 
-<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.ja.md">日本語</a></i></div>
+<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.de.md">Deutsch</a> · <a href="./README.ko.md">한국어</a> · <b>中文</b> · <a href="./README.ja.md">日本語</a></i></div>
+
+---
 
 ## 截图
 
@@ -16,327 +27,199 @@
 <tr>
 <td align="center">
 <h3>桌面视图</h3>
-<img src="public/screenshots/desktop-main.png" alt="Desktop Interface" width="400">
+<img src="public/screenshots/desktop-main.png" alt="桌面界面" width="400">
 <br>
-<em>显示项目概览和聊天界面的主界面</em>
+<em>显示项目概览和聊天的主界面</em>
 </td>
 <td align="center">
-<h3>移动端体验</h3>
-<img src="public/screenshots/mobile-chat.png" alt="Mobile Interface" width="250">
+<h3>移动体验</h3>
+<img src="public/screenshots/mobile-chat.png" alt="移动界面" width="250">
 <br>
-<em>具有触摸导航的响应式移动设计</em>
+<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">
+<img src="public/screenshots/cli-selection.png" alt="CLI 选择" width="400">
 <br>
-<em>在 Claude Code、Cursor CLI 和 Codex 之间选择</em>
+<em>在 Claude Code、Gemini、Cursor CLI 与 Codex 之间进行选择</em>
 </td>
 </tr>
 </table>
 
-
-
 </div>
 
-## 功能特性
+## 功能
 
-- **响应式设计** - 在桌面、平板和移动设备上无缝运行,您也可以在移动端使用 Claude Code、Cursor 或 Codex
-- **交互式聊天界面** - 内置聊天界面,与 Claude Code、Cursor 或 Codex 无缝通信
-- **集成 Shell 终端** - 通过内置 shell 功能直接访问 Claude Code、Cursor CLI 或 Codex
-- **文件浏览器** - 交互式文件树,支持语法高亮和实时编辑
-- **Git 浏览器** - 查看、暂存和提交您的更改。您还可以切换分支
+- **响应式设计** - 在桌面、平板和移动设备上无缝运行，让您随时随地使用 Agents
+- **交互聊天界面** - 内置聊天 UI，轻松与 Agents 交流
+- **集成 Shell 终端** - 通过内置 shell 功能直接访问 Agents CLI
+- **文件浏览器** - 交互式文件树，支持语法高亮与实时编辑
+- **Git 浏览器** - 查看、暂存并提交更改，还可切换分支
 - **会话管理** - 恢复对话、管理多个会话并跟踪历史记录
-- **TaskMaster AI 集成** *(可选)* - 通过 AI 驱动的任务规划、PRD 解析和工作流自动化实现高级项目管理
-- **模型兼容性** - 适用于 Claude Sonnet 4.5、Opus 4.5 和 GPT-5.2
-
+- **插件系统** - 通过自定义选项卡、后端服务与集成扩展 CloudCLI。 [开始构建 →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)
+- **TaskMaster AI 集成** *(可选)* - 结合 AI 任务规划、PRD 分析与工作流自动化，实现高级项目管理
+- **模型兼容性** - 支持 Claude、GPT、Gemini 模型家族（完整支持列表见 [`shared/modelConstants.js`](shared/modelConstants.js)）
 
 ## 快速开始
 
-### 前置要求
+### CloudCLI Cloud（推荐）
 
-- [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)
+无需本地设置即可快速启动。提供可通过网络浏览器、移动应用、API 或喜欢的 IDE 访问的完全集装式托管开发环境。
 
-### 一键操作(推荐)
+**[立即开始 CloudCLI Cloud](https://cloudcli.ai)**
 
-无需安装,直接运行:
+### 自托管（开源）
+
+启动 CloudCLI UI，只需一行 `npx`（需要 Node.js v22+）：
 
 ```bash
-npx @siteboon/claude-code-ui
+npx @cloudcli-ai/cloudcli
 ```
 
-服务器将启动并可通过 `http://localhost:3001`(或您配置的 PORT)访问。
-
-**重启**: 停止服务器后只需再次运行相同的 `npx` 命令
-
-### 全局安装(供常规使用)
-
-为了频繁使用,一次性全局安装:
+或进行全局安装，便于日常使用：
 
 ```bash
-npm install -g @siteboon/claude-code-ui
+npm install -g @cloudcli-ai/cloudcli
+cloudcli
 ```
 
-然后使用简单命令启动:
+打开 `http://localhost:3001`，系统会自动发现所有现有会话。
 
-```bash
-claude-code-ui
-```
+更多配置选项、PM2、远程服务器设置等，请参阅 **[文档 →](https://cloudcli.ai/docs)**
 
+---
 
-**重启**: 使用 Ctrl+C 停止,然后再次运行 `claude-code-ui`。
+## 哪个选项更适合你？
 
-**更新**:
-```bash
-cloudcli update
-```
+CloudCLI UI 是 CloudCLI Cloud 的开源 UI 层。你可以在本地机器上自托管它，也可以使用提供团队功能与深入集成的 CloudCLI Cloud。
 
-### CLI 使用方法
+| | CloudCLI UI（自托管） | CloudCLI Cloud |
+|---|---|---|
+| **适合对象** | 需要为本地代理会话提供完整 UI 的开发者 | 需要部署在云端，随时从任何地方访问代理的团队与开发者 |
+| **访问方式** | 通过 `[yourip]:port` 在浏览器中访问 | 浏览器、任意 IDE、REST API、n8n |
+| **设置** | `npx @cloudcli-ai/cloudcli` | 无需设置 |
+| **机器需保持开机吗** | 是 | 否 |
+| **移动端访问** | 网络内任意浏览器 | 任意设备（原生应用即将推出） |
+| **可用会话** | 自动发现 `~/.claude` 中的所有会话 | 云端环境内的会话 |
+| **支持的 Agents** | Claude Code、Cursor CLI、Codex、Gemini CLI | Claude Code、Cursor CLI、Codex、Gemini CLI |
+| **文件浏览与 Git** | 内置于 UI | 内置于 UI |
+| **MCP 配置** | UI 管理，与本地 `~/.claude` 配置同步 | UI 管理 |
+| **IDE 访问** | 本地 IDE | 任何连接到云环境的 IDE |
+| **REST API** | 是 | 是 |
+| **n8n 节点** | 否 | 是 |
+| **团队共享** | 否 | 是 |
+| **平台费用** | 免费开源 | 起价 $7/月 |
 
-全局安装后,您可以访问 `claude-code-ui` 和 `cloudcli` 命令:
+> 两种方式都使用你自己的 AI 订阅（Claude、Cursor 等）— CloudCLI 提供环境，而非 AI。
 
-| 命令 / 选项 | 简写 | 描述 |
-|------------------|-------|-------------|
-| `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 工具默认**禁用**，可防止潜在的有害操作自动运行。
 
 ### 启用工具
 
-要使用 Claude Code 的完整功能,您需要手动启用工具:
-
-1. **打开工具设置** - 点击侧边栏中的齿轮图标
-3. **选择性启用** - 仅打开您需要的工具
-4. **应用设置** - 您的偏好设置将保存在本地
+1. **打开工具设置** - 点击侧边栏齿轮图标
+2. **选择性启用** - 仅启用所需工具
+3. **应用设置** - 偏好设置保存在本地
 
 <div align="center">
 
-![工具设置模态框](public/screenshots/tools-modal.png)
-*工具设置界面 - 仅启用您需要的内容*
+![工具设置弹窗](public/screenshots/tools-modal.png)
+*工具设置界面 - 只启用你需要的内容*
 
 </div>
 
-**推荐方法**: 首先启用基本工具,然后根据需要添加更多。您可以随时调整这些设置。
+**推荐做法**: 先启用基础工具，再根据需要添加其他工具。随时可以调整。
 
-## TaskMaster AI 集成 *(可选)*
+---
 
-Claude Code UI 支持 **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)**(aka claude-task-master)集成,用于高级项目管理和 AI 驱动的任务规划。
+## 插件
 
-它提供
-- 从 PRD(产品需求文档)生成 AI 驱动的任务
-- 智能任务分解和依赖管理
-- 可视化任务板和进度跟踪
+CloudCLI 配备插件系统，允许你添加带自定义前端 UI 和可选 Node.js 后端的选项卡。在 Settings > Plugins 中直接从 Git 仓库安装插件，或自行开发。
 
-**设置与文档**: 访问 [TaskMaster AI GitHub 仓库](https://github.com/eyaltoledano/claude-task-master)获取安装说明、配置指南和使用示例。
-安装后,您应该能够从设置中启用它
+### 可用插件
 
+| 插件 | 描述 |
+|---|---|
+| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | 展示当前项目的文件数、代码行数、文件类型分布、最大文件以及最近修改的文件 |
 
-## 使用指南
+### 自行构建
 
-### 核心功能
+**[Plugin Starter Template →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** — Fork 该仓库以构建自己的插件。示例包括前端渲染、实时上下文更新和 RPC 通信。
 
-#### 项目管理
-当可用时,它会自动发现 Claude Code、Cursor 或 Codex 会话并将它们分组到项目中
-- **项目操作** - 重命名、删除和组织项目
-- **智能导航** - 快速访问最近的项目和会话
-- **MCP 支持** - 通过 UI 添加您自己的 MCP 服务器
+**[插件文档 →](https://cloudcli.ai/docs/plugin-overview)** — 提供插件 API、清单格式、安全模型等完整指南。
 
-#### 聊天界面
-- **使用响应式聊天或 Claude Code/Cursor CLI/Codex CLI** - 您可以使用自适应聊天界面或使用 shell 按钮连接到您选择的 CLI
-- **实时通信** - 通过 WebSocket 连接从您选择的 CLI(Claude Code/Cursor/Codex)流式传输响应
-- **会话管理** - 恢复之前的对话或启动新会话
-- **消息历史** - 带有时间戳和元数据的完整对话历史
-- **多格式支持** - 文本、代码块和文件引用
+---
 
-#### 文件浏览器与编辑器
-- **交互式文件树** - 使用展开/折叠导航浏览项目结构
-- **实时文件编辑** - 直接在界面中读取、修改和保存文件
-- **语法高亮** - 支持多种编程语言
-- **文件操作** - 创建、重命名、删除文件和目录
+## 常见问题
 
-#### Git 浏览器
+<details>
+<summary>与 Claude Code Remote Control 有何不同？</summary>
 
+Claude Code Remote Control 让你发送消息到本地终端中已经运行的会话。该方式要求你的机器保持开机，终端保持开启，断开网络后约 10 分钟会话会超时。
 
-#### TaskMaster AI 集成 *(可选)*
-- **可视化任务板** - 用于管理开发任务的看板风格界面
-- **PRD 解析器** - 创建产品需求文档并将其解析为结构化任务
-- **进度跟踪** - 实时状态更新和完成跟踪
+CloudCLI UI 与 CloudCLI Cloud 是对 Claude Code 的扩展，而非旁观 — MCP 服务器、权限、设置、会话与 Claude Code 完全一致。
 
-#### 会话管理
-- **会话持久化** - 所有对话自动保存
-- **会话组织** - 按项目和 timestamp 分组会话
-- **会话操作** - 重命名、删除和导出对话历史
-- **跨设备同步** - 从任何设备访问会话
+- **覆盖全部会话** — CloudCLI UI 会自动扫描 `~/.claude` 文件夹中的每个会话。Remote Control 只暴露当前活动的会话。
+- **设置统一** — 在 CloudCLI UI 中修改的 MCP、工具权限等设置会立即写入 Claude Code。
+- **支持更多 Agents** — Claude Code、Cursor CLI、Codex、Gemini CLI。
+- **完整 UI** — 除了聊天界面，还包括文件浏览器、Git 集成、MCP 管理和 Shell 终端。
+- **CloudCLI Cloud 保持运行于云端** — 关闭本地设备也不会中断代理运行，无需监控终端。
 
-### 移动应用
-- **响应式设计** - 针对所有屏幕尺寸进行优化
-- **触摸友好界面** - 滑动手势和触摸导航
-- **移动导航** - 底部选项卡栏,方便拇指导航
-- **自适应布局** - 可折叠侧边栏和智能内容优先级
-- **添加到主屏幕快捷方式** - 添加快捷方式到主屏幕,应用程序将像 PWA 一样运行
+</details>
 
-## 架构
+<details>
+<summary>需要额外购买 AI 订阅吗？</summary>
 
-### 系统概览
+需要。CloudCLI 只提供环境。你仍需自行获取 Claude、Cursor、Codex 或 Gemini 订阅。CloudCLI Cloud 从 $7/月起提供托管环境。
 
-```
-┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
-│   Frontend      │    │   Backend       │    │  Agent     │
-│   (React/Vite)  │◄──►│ (Express/WS)    │◄──►│  Integration    │
-│                 │    │                 │    │                │
-└─────────────────┘    └─────────────────┘    └─────────────────┘
-```
+</details>
 
-### 后端 (Node.js + Express)
-- **Express 服务器** - 具有静态文件服务的 RESTful API
-- **WebSocket 服务器** - 用于聊天和项目刷新的通信
-- **Agent 集成 (Claude Code / Cursor CLI / Codex)** - 进程生成和管理
-- **文件系统 API** - 为项目公开文件浏览器
+<details>
+<summary>能在手机上使用 CloudCLI UI 吗？</summary>
 
-### 前端 (React + Vite)
-- **React 18** - 带有 hooks 的现代组件架构
-- **CodeMirror** - 具有语法高亮的高级代码编辑器
+可以。自托管时，在你的设备上运行服务器，然后在网络中的任意浏览器打开 `[yourip]:port`。CloudCLI Cloud 可从任意设备访问，内置原生应用也在开发中。
 
+</details>
 
+<details>
+<summary>UI 中的更改会影响本地 Claude Code 配置吗？</summary>
 
+会的。自托管模式下，CloudCLI UI 读取并写入 Claude Code 使用的 `~/.claude` 配置。通过 UI 添加的 MCP 服务器会立即在 Claude Code 中可见。
 
-### 贡献
+</details>
 
-我们欢迎贡献！有关提交规范、开发流程和发布流程的详细信息,请参阅 [Contributing Guide](CONTRIBUTING.md)。
+---
 
-## 故障排除
-
-### 常见问题与解决方案
-
-
-#### "未找到 Claude 项目"
-**问题**: UI 显示没有项目或项目列表为空
-**解决方案**:
-- 确保已正确安装 [Claude Code](https://docs.anthropic.com/en/docs/claude-code)
-- 至少在一个项目目录中运行 `claude` 命令以进行初始化
-- 验证 `~/.claude/projects/` 目录存在并具有适当的权限
-
-#### 文件浏览器问题
-**问题**: 文件无法加载、权限错误、空目录
-**解决方案**:
-- 检查项目目录权限(在终端中使用 `ls -la`)
-- 验证项目路径存在且可访问
-- 查看服务器控制台日志以获取详细错误消息
-- 确保您未尝试访问项目范围之外的系统目录
+## 社区与支持
 
+- **[文档](https://cloudcli.ai/docs)** — 安装、配置、功能与故障排除指南
+- **[Discord](https://discord.gg/buxwujPNRE)** — 获取帮助并与社区交流
+- **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — 报告 Bug 与建议功能
+- **[贡献指南](CONTRIBUTING.md)** — 如何参与项目贡献
 
 ## 许可证
 
-GNU General Public License v3.0 - 详见 [LICENSE](LICENSE) 文件。
+GNU 通用公共许可证 v3.0 - 详见 [LICENSE](LICENSE) 文件。
 
-本项目是开源的,在 GPL v3 许可下可自由使用、修改和分发。
+该项目为开源软件，在 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
+### 使用技术
+- **[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
+- **[Gemini-CLI](https://geminicli.com/)** - Google Gemini CLI
 - **[React](https://react.dev/)** - 用户界面库
-- **[Vite](https://vitejs.dev/)** - 快速构建工具和开发服务器
-- **[Tailwind CSS](https://tailwindcss.com/)** - 实用优先的 CSS 框架
+- **[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** 项目以获取公告
+- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(可选)* - AI 驱动的项目管理与任务规划
 
 ### 赞助商
 - [Siteboon - AI powered website builder](https://siteboon.ai)
@@ -344,4 +227,4 @@ GNU General Public License v3.0 - 详见 [LICENSE](LICENSE) 文件。
 
 <div align="center">
   <strong>为 Claude Code、Cursor 和 Codex 社区精心打造。</strong>
-</div>
+</div>

commitlint.config.js

@@ -0,0 +1,3 @@
+export default {
+  extends: ["@commitlint/config-conventional"],
+};

docker/README.md

@@ -0,0 +1,89 @@
+# CloudCLI — Docker Sandbox Templates
+
+Run AI coding agents with a full web IDE inside [Docker Sandboxes](https://docs.docker.com/ai/sandboxes/).
+
+Instead of a terminal-only experience, get a browser-based interface with chat, file explorer, git panel, shell, and MCP configuration — all running safely inside an isolated sandbox.
+
+## Available Templates
+
+| Template | Base Image | Agent |
+|----------|-----------|-------|
+| `cloudcli-ai/sandbox:claude-code` | `docker/sandbox-templates:claude-code` | Claude Code |
+| `cloudcli-ai/sandbox:codex` | `docker/sandbox-templates:codex` | OpenAI Codex |
+| `cloudcli-ai/sandbox:gemini` | `docker/sandbox-templates:gemini` | Gemini CLI |
+
+## Quick Start
+
+### 1. Start a sandbox with the template
+
+```bash
+sbx run --template docker.io/cloudcli-ai/sandbox:claude-code claude ~/my-project
+```
+
+### 2. Forward the UI port
+
+```bash
+sbx ports <sandbox-name> --publish 3001:3001
+```
+
+### 3. Open the browser
+
+```
+http://localhost:3001
+```
+
+On first visit you'll set a password — this protects the UI if the port is ever exposed beyond localhost.
+
+## What You Get
+
+- **Chat** — Rich conversation UI with markdown rendering, code blocks, and message history
+- **Files** — Visual file tree with syntax-highlighted editor
+- **Git** — Diff viewer, staging, branch switching, and commit — all visual
+- **Shell** — Built-in terminal emulator
+- **MCP** — Configure Model Context Protocol servers through the UI
+- **Mobile** — Works on tablet and phone browsers
+
+## Building Locally
+
+All Dockerfiles share scripts from `shared/`. Build with the `docker/` directory as context:
+
+```bash
+# Claude Code variant
+docker build -f docker/claude-code/Dockerfile -t cloudcli-sandbox:claude-code docker/
+
+# Codex variant
+docker build -f docker/codex/Dockerfile -t cloudcli-sandbox:codex docker/
+
+# Gemini variant
+docker build -f docker/gemini/Dockerfile -t cloudcli-sandbox:gemini docker/
+```
+
+## How It Works
+
+Each template extends Docker's official sandbox base image and adds:
+
+1. **Node.js 22** — Runtime for CloudCLI
+2. **CloudCLI** — Installed globally via `npm install -g @cloudcli-ai/cloudcli`
+3. **Auto-start** — The UI server starts in the background when the sandbox shell opens (port 3001)
+
+The agent (Claude Code, Codex, or Gemini) comes from the base image. CloudCLI connects to it and provides the web interface on top.
+
+## Configuration
+
+| Environment Variable | Default | Description |
+|---------------------|---------|-------------|
+| `SERVER_PORT` | `3001` | Port for the web UI |
+| `HOST` | `0.0.0.0` | Bind address |
+| `DATABASE_PATH` | `~/.cloudcli/auth.db` | SQLite database location |
+
+## Network Policies
+
+If your sandbox uses restricted network policies, allow the UI port:
+
+```bash
+sbx policy allow network "localhost:3001"
+```
+
+## License
+
+These templates are free and open-source under the same license as CloudCLI (AGPL-3.0-or-later).

docker/claude-code/Dockerfile

@@ -0,0 +1,11 @@
+FROM docker/sandbox-templates:claude-code
+
+USER root
+COPY shared/install-cloudcli.sh /tmp/install-cloudcli.sh
+RUN chmod +x /tmp/install-cloudcli.sh && /tmp/install-cloudcli.sh
+
+USER agent
+RUN npm install -g @cloudcli-ai/cloudcli
+
+COPY shared/start-cloudcli.sh /home/agent/.cloudcli-start.sh
+RUN echo '. ~/.cloudcli-start.sh' >> /home/agent/.bashrc

docker/codex/Dockerfile

@@ -0,0 +1,11 @@
+FROM docker/sandbox-templates:codex
+
+USER root
+COPY shared/install-cloudcli.sh /tmp/install-cloudcli.sh
+RUN chmod +x /tmp/install-cloudcli.sh && /tmp/install-cloudcli.sh
+
+USER agent
+RUN npm install -g @cloudcli-ai/cloudcli
+
+COPY shared/start-cloudcli.sh /home/agent/.cloudcli-start.sh
+RUN echo '. ~/.cloudcli-start.sh' >> /home/agent/.bashrc

docker/gemini/Dockerfile

@@ -0,0 +1,11 @@
+FROM docker/sandbox-templates:gemini
+
+USER root
+COPY shared/install-cloudcli.sh /tmp/install-cloudcli.sh
+RUN chmod +x /tmp/install-cloudcli.sh && /tmp/install-cloudcli.sh
+
+USER agent
+RUN npm install -g @cloudcli-ai/cloudcli
+
+COPY shared/start-cloudcli.sh /home/agent/.cloudcli-start.sh
+RUN echo '. ~/.cloudcli-start.sh' >> /home/agent/.bashrc

docker/shared/install-cloudcli.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+set -e
+
+# Install Node.js 22 LTS
+curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
+
+# Install Node.js + build tools needed for native modules (node-pty, better-sqlite3, bcrypt)
+# Node.js + build tools for native modules + common dev tools
+apt-get install -y --no-install-recommends \
+  nodejs build-essential python3 python3-setuptools \
+  jq ripgrep sqlite3 zip unzip tree vim-tiny
+
+# Clean up apt cache to reduce image size
+rm -rf /var/lib/apt/lists/*

docker/shared/start-cloudcli.sh

@@ -0,0 +1,23 @@
+#!/bin/bash
+
+# Auto-start CloudCLI server in background if not already running.
+# This script is sourced from ~/.bashrc on sandbox shell open.
+
+if ! pgrep -f "server/index.js" > /dev/null 2>&1; then
+  # Start the pre-installed version immediately
+  nohup cloudcli start --port 3001 > /tmp/cloudcli-ui.log 2>&1 &
+  disown
+
+  # Check for updates in the background (non-blocking)
+  nohup npm update -g @cloudcli-ai/cloudcli > /tmp/cloudcli-update.log 2>&1 &
+  disown
+
+  echo ""
+  echo "  CloudCLI is starting on port 3001..."
+  echo ""
+  echo "  To access the web UI, forward the port:"
+  echo "    sbx ports \$(hostname) --publish 3001:3001"
+  echo ""
+  echo "  Then open: http://localhost:3001"
+  echo ""
+fi

eslint.config.js

@@ -0,0 +1,102 @@
+import js from "@eslint/js";
+import tseslint from "typescript-eslint";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import importX from "eslint-plugin-import-x";
+import tailwindcss from "eslint-plugin-tailwindcss";
+import unusedImports from "eslint-plugin-unused-imports";
+import globals from "globals";
+
+export default tseslint.config(
+  {
+    ignores: ["dist/**", "node_modules/**", "public/**"],
+  },
+  {
+    files: ["src/**/*.{ts,tsx,js,jsx}"],
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    plugins: {
+      react,
+      "react-hooks": reactHooks, // for following React rules such as dependencies in hooks, keys in lists, etc.
+      "react-refresh": reactRefresh, // for Vite HMR compatibility
+      "import-x": importX, // for import order/sorting. It also detercts circular dependencies and duplicate imports.
+      tailwindcss, // for detecting invalid Tailwind classnames and enforcing classname order
+      "unused-imports": unusedImports, // for detecting unused imports
+    },
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      },
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    settings: {
+      react: { version: "detect" },
+    },
+    rules: {
+      // --- Unused imports/vars ---
+      "unused-imports/no-unused-imports": "warn",
+      "unused-imports/no-unused-vars": [
+        "warn",
+        {
+          vars: "all",
+          varsIgnorePattern: "^_",
+          args: "after-used",
+          argsIgnorePattern: "^_",
+        },
+      ],
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+
+      // --- React ---
+      "react/jsx-key": "warn",
+      "react/jsx-no-duplicate-props": "error",
+      "react/jsx-no-undef": "error",
+      "react/no-children-prop": "warn",
+      "react/no-danger-with-children": "error",
+      "react/no-direct-mutation-state": "error",
+      "react/no-unknown-property": "warn",
+      "react/react-in-jsx-scope": "off",
+
+      // --- React Hooks ---
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+
+      // --- React Refresh (Vite HMR) ---
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+
+      // --- Import ordering & hygiene ---
+      "import-x/no-duplicates": "warn",
+      "import-x/order": [
+        "warn",
+        {
+          groups: [
+            "builtin",
+            "external",
+            "internal",
+            "parent",
+            "sibling",
+            "index",
+          ],
+          "newlines-between": "never",
+        },
+      ],
+
+      // --- Tailwind CSS ---
+      "tailwindcss/classnames-order": "warn",
+      "tailwindcss/no-contradicting-classname": "warn",
+      "tailwindcss/no-unnecessary-arbitrary-value": "warn",
+
+      // --- Disabled base rules ---
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-require-imports": "off",
+      "no-case-declarations": "off",
+      "no-control-regex": "off",
+      "no-useless-escape": "off",
+    },
+  }
+);

index.html

@@ -8,7 +8,7 @@
     <title>CloudCLI UI</title>
     
     <!-- PWA Manifest -->
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials"  />
     
     <!-- iOS Safari PWA Meta Tags -->
     <meta name="mobile-web-app-capable" content="yes" />
@@ -45,4 +45,4 @@
       }
     </script>
   </body>
-</html>
+</html>

package.json

@@ -1,11 +1,10 @@
 {
-  "name": "@siteboon/claude-code-ui",
-  "version": "1.20.1",
+  "name": "@cloudcli-ai/cloudcli",
+  "version": "1.28.0",
   "description": "A web-based UI for Claude Code CLI",
   "type": "module",
   "main": "server/index.js",
   "bin": {
-    "claude-code-ui": "server/cli.js",
     "cloudcli": "server/cli.js"
   },
   "files": [
@@ -26,26 +25,40 @@
   "scripts": {
     "dev": "concurrently --kill-others \"npm run server\" \"npm run client\"",
     "server": "node server/index.js",
-    "client": "vite --host",
+    "client": "vite",
     "build": "vite build",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit -p tsconfig.json",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
     "start": "npm run build && npm run server",
     "release": "./release.sh",
     "prepublishOnly": "npm run build",
-    "postinstall": "node scripts/fix-node-pty.js"
+    "postinstall": "node scripts/fix-node-pty.js",
+    "prepare": "husky"
   },
   "keywords": [
     "claude code",
-    "ai",
+    "claude-code",
+    "claude-code-ui",
+    "cloudcli",
+    "codex",
+    "gemini",
+    "gemini-cli",
+    "cursor",
+    "cursor-cli",
     "anthropic",
+    "openai",
+    "google",
+    "coding-agent",
+    "web-ui",
     "ui",
-    "mobile"
+    "mobile IDE"
   ],
   "author": "CloudCLI UI Contributors",
-  "license": "GPL-3.0",
+  "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@anthropic-ai/claude-agent-sdk": "^0.1.71",
+    "@anthropic-ai/claude-agent-sdk": "^0.2.59",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.4",
@@ -66,7 +79,7 @@
     "@xterm/addon-webgl": "^0.18.0",
     "@xterm/xterm": "^5.5.0",
     "bcrypt": "^6.0.0",
-    "better-sqlite3": "^12.2.0",
+    "better-sqlite3": "^12.6.2",
     "chokidar": "^4.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -78,6 +91,7 @@
     "i18next": "^25.7.4",
     "i18next-browser-languagedetector": "^8.2.0",
     "jsonwebtoken": "^9.0.2",
+    "jszip": "^3.10.1",
     "katex": "^0.16.25",
     "lucide-react": "^0.515.0",
     "mime-types": "^3.0.1",
@@ -99,9 +113,13 @@
     "sqlite": "^5.1.1",
     "sqlite3": "^5.1.7",
     "tailwind-merge": "^3.3.1",
+    "web-push": "^3.6.7",
     "ws": "^8.14.2"
   },
   "devDependencies": {
+    "@commitlint/cli": "^20.4.3",
+    "@commitlint/config-conventional": "^20.4.3",
+    "@eslint/js": "^9.39.3",
     "@release-it/conventional-changelog": "^10.0.5",
     "@types/node": "^22.19.7",
     "@types/react": "^18.2.43",
@@ -110,12 +128,26 @@
     "auto-changelog": "^2.5.0",
     "autoprefixer": "^10.4.16",
     "concurrently": "^8.2.2",
+    "eslint": "^9.39.3",
+    "eslint-plugin-import-x": "^4.16.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "eslint-plugin-tailwindcss": "^3.18.2",
+    "eslint-plugin-unused-imports": "^4.4.1",
+    "globals": "^17.4.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.3.2",
     "node-gyp": "^10.0.0",
     "postcss": "^8.4.32",
     "release-it": "^19.0.5",
     "sharp": "^0.34.2",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.9.3",
+    "typescript-eslint": "^8.56.1",
     "vite": "^7.0.4"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx,js,jsx}": "eslint"
   }
 }

public/api-docs.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Claude Code UI - API Documentation</title>
+    <title>CloudCLI - API Documentation</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     
@@ -418,7 +418,7 @@
                     </svg>
                 </div>
                 <div class="brand-text">
-                    <h1>Claude Code UI</h1>
+                    <h1>CloudCLI</h1>
                     <div class="subtitle">API Documentation</div>
                 </div>
             </div>
@@ -585,7 +585,7 @@
                             <p>Server-sent events (SSE) format with real-time updates. Content-Type: <code>text/event-stream</code></p>
 
                             <h4>Response (Non-Streaming)</h4>
-                            <p>JSON object containing session details, assistant messages only (filtered), and token usage summary. Content-Type: <code>application/json</code></p>
+                            <p>JSON object containing session details and assistant messages only (filtered). Content-Type: <code>application/json</code></p>
 
                             <h4>Error Response</h4>
                             <p>Returns error details with appropriate HTTP status code.</p>
@@ -674,21 +674,10 @@ data: {"type":"done"}</code></pre>
             "type": "text",
             "text": "I've completed the task..."
           }
-        ],
-        "usage": {
-          "input_tokens": 150,
-          "output_tokens": 50
-        }
+        ]
       }
     }
   ],
-  "tokens": {
-    "inputTokens": 150,
-    "outputTokens": 50,
-    "cacheReadTokens": 0,
-    "cacheCreationTokens": 0,
-    "totalTokens": 200
-  },
   "projectPath": "/path/to/project",
   "branch": {
     "name": "fix-authentication-bug-abc123",

public/icons/gemini-ai-icon.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Gemini</title><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="#3186FF"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-0)"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-1)"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-2)"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-0" x1="7" x2="11" y1="15.5" y2="12"><stop stop-color="#08B962"></stop><stop offset="1" stop-color="#08B962" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-1" x1="8" x2="11.5" y1="5.5" y2="11"><stop stop-color="#F94543"></stop><stop offset="1" stop-color="#F94543" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-2" x1="3.5" x2="17.5" y1="13.5" y2="12"><stop stop-color="#FABC12"></stop><stop offset=".46" stop-color="#FABC12" stop-opacity="0"></stop></linearGradient></defs></svg>

public/sw.js

@@ -1,8 +1,8 @@
-// Service Worker for Claude Code UI PWA
-const CACHE_NAME = 'claude-ui-v1';
+// Service Worker for CloudCLI PWA
+// Cache only manifest (needed for PWA install). HTML and JS are never pre-cached
+// so a rebuild + refresh always picks up the latest assets.
+const CACHE_NAME = 'claude-ui-v2';
 const urlsToCache = [
-  '/',
-  '/index.html',
   '/manifest.json'
 ];
 
@@ -10,40 +10,115 @@ const urlsToCache = [
 self.addEventListener('install', event => {
   event.waitUntil(
     caches.open(CACHE_NAME)
-      .then(cache => {
-        return cache.addAll(urlsToCache);
-      })
+      .then(cache => cache.addAll(urlsToCache))
   );
   self.skipWaiting();
 });
 
-// Fetch event
+// Fetch event — network-first for everything except hashed assets
 self.addEventListener('fetch', event => {
-  event.respondWith(
-    caches.match(event.request)
-      .then(response => {
-        // Return cached response if found
-        if (response) {
+  const url = event.request.url;
+
+  // Never intercept API requests or WebSocket upgrades
+  if (url.includes('/api/') || url.includes('/ws')) {
+    return;
+  }
+
+  // Navigation requests (HTML) — always go to network, no caching
+  if (event.request.mode === 'navigate') {
+    event.respondWith(
+      fetch(event.request).catch(() => caches.match('/manifest.json').then(() =>
+        new Response('<h1>Offline</h1><p>Please check your connection.</p>', {
+          headers: { 'Content-Type': 'text/html' }
+        })
+      ))
+    );
+    return;
+  }
+
+  // Hashed assets (JS/CSS in /assets/) — cache-first since filenames change per build
+  if (url.includes('/assets/')) {
+    event.respondWith(
+      caches.match(event.request).then(cached => {
+        if (cached) return cached;
+        return fetch(event.request).then(response => {
+          const clone = response.clone();
+          caches.open(CACHE_NAME).then(cache => cache.put(event.request, clone));
           return response;
-        }
-        // Otherwise fetch from network
-        return fetch(event.request);
-      }
-    )
+        });
+      })
+    );
+    return;
+  }
+
+  // Everything else — network-first
+  event.respondWith(
+    fetch(event.request).catch(() => caches.match(event.request))
   );
 });
 
-// Activate event
+// Activate event — purge old caches
 self.addEventListener('activate', event => {
   event.waitUntil(
-    caches.keys().then(cacheNames => {
-      return Promise.all(
-        cacheNames.map(cacheName => {
-          if (cacheName !== CACHE_NAME) {
-            return caches.delete(cacheName);
-          }
-        })
-      );
+    caches.keys().then(cacheNames =>
+      Promise.all(
+        cacheNames
+          .filter(name => name !== CACHE_NAME)
+          .map(name => caches.delete(name))
+      )
+    )
+  );
+  self.clients.claim();
+});
+
+// Push notification event
+self.addEventListener('push', event => {
+  if (!event.data) return;
+
+  let payload;
+  try {
+    payload = event.data.json();
+  } catch {
+    payload = { title: 'CloudCLI', body: event.data.text() };
+  }
+
+  const options = {
+    body: payload.body || '',
+    icon: '/logo-256.png',
+    badge: '/logo-128.png',
+    data: payload.data || {},
+    tag: payload.data?.tag || `${payload.data?.sessionId || 'global'}:${payload.data?.code || 'default'}`,
+    renotify: true
+  };
+
+  event.waitUntil(
+    self.registration.showNotification(payload.title || 'CloudCLI', options)
+  );
+});
+
+// Notification click event
+self.addEventListener('notificationclick', event => {
+  event.notification.close();
+
+  const sessionId = event.notification.data?.sessionId;
+  const provider = event.notification.data?.provider || null;
+  const urlPath = sessionId ? `/session/${sessionId}` : '/';
+
+  event.waitUntil(
+    self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then(async clientList => {
+      for (const client of clientList) {
+        if (client.url.includes(self.location.origin)) {
+          await client.focus();
+          client.postMessage({
+            type: 'notification:navigate',
+            sessionId: sessionId || null,
+            provider,
+            urlPath
+          });
+          return;
+        }
+      }
+      return self.clients.openWindow(urlPath);
     })
   );
-});
+});

redirect-package/README.md

@@ -0,0 +1,248 @@
+<div align="center">
+
+> ## This package has moved to [`@cloudcli-ai/cloudcli`](https://www.npmjs.com/package/@cloudcli-ai/cloudcli)
+>
+> ```bash
+> npm install -g @cloudcli-ai/cloudcli
+> ```
+>
+> This package (`@siteboon/claude-code-ui`) is now a thin wrapper that installs the new package automatically.
+> For new installations, use `@cloudcli-ai/cloudcli` directly.
+
+</div>
+
+---
+
+<div align="center">
+  <img src="https://raw.githubusercontent.com/siteboon/claudecodeui/main/public/logo.svg" alt="CloudCLI UI" width="64" height="64">
+  <h1>Cloud CLI (aka Claude Code UI)</h1>
+  <p>A desktop and mobile UI for <a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>, <a href="https://docs.cursor.com/en/cli/overview">Cursor CLI</a>, <a href="https://developers.openai.com/codex">Codex</a>, and <a href="https://geminicli.com/">Gemini-CLI</a>.<br>Use it locally or remotely to view your active projects and sessions from everywhere.</p>
+</div>
+
+<p align="center">
+  <a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://cloudcli.ai/docs">Documentation</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">Bug Reports</a> · <a href="https://github.com/siteboon/claudecodeui/blob/main/CONTRIBUTING.md">Contributing</a>
+</p>
+
+<p align="center">
+  <a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Try_Now-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a>
+  <a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Join our Discord"></a>
+  <br><br>
+  <a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</p>
+
+---
+
+## Screenshots
+
+<div align="center">
+
+<table>
+<tr>
+<td align="center">
+<h3>Desktop View</h3>
+<img src="https://raw.githubusercontent.com/siteboon/claudecodeui/main/public/screenshots/desktop-main.png" alt="Desktop Interface" width="400">
+<br>
+<em>Main interface showing project overview and chat</em>
+</td>
+<td align="center">
+<h3>Mobile Experience</h3>
+<img src="https://raw.githubusercontent.com/siteboon/claudecodeui/main/public/screenshots/mobile-chat.png" alt="Mobile Interface" width="250">
+<br>
+<em>Responsive mobile design with touch navigation</em>
+</td>
+</tr>
+<tr>
+<td align="center" colspan="2">
+<h3>CLI Selection</h3>
+<img src="https://raw.githubusercontent.com/siteboon/claudecodeui/main/public/screenshots/cli-selection.png" alt="CLI Selection" width="400">
+<br>
+<em>Select between Claude Code, Gemini, Cursor CLI and Codex</em>
+</td>
+</tr>
+</table>
+
+
+
+</div>
+
+## Features
+
+- **Responsive Design** - Works seamlessly across desktop, tablet, and mobile so you can also use Agents from mobile
+- **Interactive Chat Interface** - Built-in chat interface for seamless communication with the Agents
+- **Integrated Shell Terminal** - Direct access to the Agents CLI through built-in shell functionality
+- **File Explorer** - Interactive file tree with syntax highlighting and live editing
+- **Git Explorer** - View, stage and commit your changes. You can also switch branches
+- **Session Management** - Resume conversations, manage multiple sessions, and track history
+- **Plugin System** - Extend CloudCLI with custom plugins — add new tabs, backend services, and integrations. [Build your own →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)
+- **TaskMaster AI Integration** *(Optional)* - Advanced project management with AI-powered task planning, PRD parsing, and workflow automation
+- **Model Compatibility** - Works with Claude, GPT, and Gemini model families (see [`shared/modelConstants.js`](https://github.com/siteboon/claudecodeui/blob/main/shared/modelConstants.js) for the full list of supported models)
+
+
+## Quick Start
+
+### CloudCLI Cloud (Recommended)
+
+The fastest way to get started — no local setup required. Get a fully managed, containerized development environment accessible from the web, mobile app, API, or your favorite IDE.
+
+**[Get started with CloudCLI Cloud](https://cloudcli.ai)**
+
+
+### Self-Hosted (Open source)
+
+Try CloudCLI UI instantly with **npx** (requires **Node.js** v22+):
+
+```
+npx @cloudcli-ai/cloudcli
+```
+
+Or install **globally** for regular use:
+
+```
+npm install -g @cloudcli-ai/cloudcli
+cloudcli
+```
+
+Open `http://localhost:3001` — all your existing sessions are discovered automatically.
+
+Visit the **[documentation →](https://cloudcli.ai/docs)** for more full configuration options, PM2, remote server setup and more
+
+
+---
+
+## Which option is right for you?
+
+CloudCLI UI is the open source UI layer that powers CloudCLI Cloud. You can self-host it on your own machine, or use CloudCLI Cloud which builds on top of it with a full managed cloud environment, team features, and deeper integrations.
+
+| | CloudCLI UI (Self-hosted) | CloudCLI Cloud |
+|---|---|---|
+| **Best for** | Developers who want a full UI for local agent sessions on their own machine | Teams and developers who want agents running in the cloud, accessible from anywhere |
+| **How you access it** | Browser via `[yourip]:port` | Browser, any IDE, REST API, n8n |
+| **Setup** | `npx @cloudcli-ai/cloudcli` | No setup required |
+| **Machine needs to stay on** | Yes | No |
+| **Mobile access** | Any browser on your network | Any device, native app coming |
+| **Sessions available** | All sessions auto-discovered from `~/.claude` | All sessions within your cloud environment |
+| **Agents supported** | Claude Code, Cursor CLI, Codex, Gemini CLI | Claude Code, Cursor CLI, Codex, Gemini CLI |
+| **File explorer and Git** | Yes, built into the UI | Yes, built into the UI |
+| **MCP configuration** | Managed via UI, synced with your local `~/.claude` config | Managed via UI |
+| **IDE access** | Your local IDE | Any IDE connected to your cloud environment |
+| **REST API** | Yes | Yes |
+| **n8n node** | No | Yes |
+| **Team sharing** | No | Yes |
+| **Platform cost** | Free, open source | Starts at $7/month |
+
+> Both options use your own AI subscriptions (Claude, Cursor, etc.) — CloudCLI provides the environment, not the AI.
+
+---
+
+## Security & Tools Configuration
+
+**Important Notice**: All Claude Code tools are **disabled by default**. This prevents potentially harmful operations from running automatically.
+
+### Enabling Tools
+
+To use Claude Code's full functionality, you'll need to manually enable tools:
+
+1. **Open Tools Settings** - Click the gear icon in the sidebar
+2. **Enable Selectively** - Turn on only the tools you need
+3. **Apply Settings** - Your preferences are saved locally
+
+**Recommended approach**: Start with basic tools enabled and add more as needed. You can always adjust these settings later.
+
+---
+
+## Plugins
+
+CloudCLI has a plugin system that lets you add custom tabs with their own frontend UI and optional Node.js backend. Install plugins from git repos directly in **Settings > Plugins**, or build your own.
+
+### Available Plugins
+
+| Plugin | Description |
+|---|---|
+| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | Shows file counts, lines of code, file-type breakdown, largest files, and recently modified files for your current project |
+| **[Web Terminal](https://github.com/cloudcli-ai/cloudcli-plugin-terminal)** | Full xterm.js terminal with multi-tab support|
+
+### Build Your Own
+
+**[Plugin Starter Template →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** — fork this repo to create your own plugin. It includes a working example with frontend rendering, live context updates, and RPC communication to a backend server.
+
+**[Plugin Documentation →](https://cloudcli.ai/docs/plugin-overview)** — full guide to the plugin API, manifest format, security model, and more.
+
+---
+## FAQ
+
+<details>
+<summary>How is this different from Claude Code Remote Control?</summary>
+
+Claude Code Remote Control lets you send messages to a session already running in your local terminal. Your machine has to stay on, your terminal has to stay open, and sessions time out after roughly 10 minutes without a network connection.
+
+CloudCLI UI and CloudCLI Cloud extend Claude Code rather than sit alongside it — your MCP servers, permissions, settings, and sessions are the exact same ones Claude Code uses natively. Nothing is duplicated or managed separately.
+
+Here's what that means in practice:
+
+- **All your sessions, not just one** — CloudCLI UI auto-discovers every session from your `~/.claude` folder. Remote Control only exposes the single active session to make it available in the Claude mobile app.
+- **Your settings are your settings** — MCP servers, tool permissions, and project config you change in CloudCLI UI are written directly to your Claude Code config and take effect immediately, and vice versa.
+- **Works with more agents** — Claude Code, Cursor CLI, Codex, and Gemini CLI, not just Claude Code.
+- **Full UI, not just a chat window** — file explorer, Git integration, MCP management, and a shell terminal are all built in.
+- **CloudCLI Cloud runs in the cloud** — close your laptop, the agent keeps running. No terminal to babysit, no machine to keep awake.
+
+</details>
+
+<details>
+<summary>Do I need to pay for an AI subscription separately?</summary>
+
+Yes. CloudCLI provides the environment, not the AI. You bring your own Claude, Cursor, Codex, or Gemini subscription. CloudCLI Cloud starts at $7/month for the hosted environment on top of that.
+
+</details>
+
+<details>
+<summary>Can I use CloudCLI UI on my phone?</summary>
+
+Yes. For self-hosted, run the server on your machine and open `[yourip]:port` in any browser on your network. For CloudCLI Cloud, open it from any device — no VPN, no port forwarding, no setup. A native app is also in the works.
+
+</details>
+
+<details>
+<summary>Will changes I make in the UI affect my local Claude Code setup?</summary>
+
+Yes, for self-hosted. CloudCLI UI reads from and writes to the same `~/.claude` config that Claude Code uses natively. MCP servers you add via the UI show up in Claude Code immediately and vice versa.
+
+</details>
+
+---
+
+## Community & Support
+
+- **[Documentation](https://cloudcli.ai/docs)** — installation, configuration, features, and troubleshooting
+- **[Discord](https://discord.gg/buxwujPNRE)** — get help and connect with other users
+- **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — bug reports and feature requests
+- **[Contributing Guide](https://github.com/siteboon/claudecodeui/blob/main/CONTRIBUTING.md)** — how to contribute to the project
+
+## License
+
+GNU Affero General Public License v3.0 or later (AGPL-3.0-or-later) — see [LICENSE](https://github.com/siteboon/claudecodeui/blob/main/LICENSE) for the full text, including additional terms under Section 7.
+
+This project is open source and free to use, modify, and distribute under the AGPL-3.0-or-later license. If you modify this software and run it as a network service, you must make your modified source code available to users of that service.
+
+CloudCLI UI  - (https://cloudcli.ai).
+
+## Acknowledgments
+
+### Built With
+- **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic's official CLI
+- **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursor's official CLI
+- **[Codex](https://developers.openai.com/codex)** - OpenAI Codex
+- **[Gemini-CLI](https://geminicli.com/)** - Google Gemini CLI
+- **[React](https://react.dev/)** - User interface library
+- **[Vite](https://vitejs.dev/)** - Fast build tool and dev server
+- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
+- **[CodeMirror](https://codemirror.net/)** - Advanced code editor
+- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(Optional)* - AI-powered project management and task planning
+
+
+### Sponsors
+- [Siteboon - AI powered website builder](https://siteboon.ai)
+---
+
+<div align="center">
+  <strong>Made with care for the Claude Code, Cursor and Codex community.</strong>
+</div>

redirect-package/bin.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import('@cloudcli-ai/cloudcli/server/cli.js');

redirect-package/index.js

@@ -0,0 +1,2 @@
+export * from '@cloudcli-ai/cloudcli';
+export { default } from '@cloudcli-ai/cloudcli';

redirect-package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@siteboon/claude-code-ui",
+  "version": "2.0.0",
+  "description": "This package has moved to @cloudcli-ai/cloudcli",
+  "type": "module",
+  "main": "index.js",
+  "bin": {
+    "claude-code-ui": "./bin.js",
+    "cloudcli": "./bin.js"
+  },
+  "homepage": "https://cloudcli.ai",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/siteboon/claudecodeui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/siteboon/claudecodeui/issues"
+  },
+  "keywords": [
+    "claude code",
+    "claude-code",
+    "claude-code-ui",
+    "cloudcli",
+    "codex",
+    "gemini",
+    "gemini-cli",
+    "cursor",
+    "cursor-cli",
+    "anthropic",
+    "openai",
+    "google",
+    "coding-agent",
+    "web-ui",
+    "ui",
+    "mobile IDE"
+  ],
+  "author": "CloudCLI UI Contributors",
+  "dependencies": {
+    "@cloudcli-ai/cloudcli": "*"
+  },
+  "deprecated": "This package has been renamed to @cloudcli-ai/cloudcli. Please install @cloudcli-ai/cloudcli instead.",
+  "license": "AGPL-3.0-or-later"
+}

server/claude-sdk.js

@@ -18,6 +18,14 @@ import { promises as fs } from 'fs';
 import path from 'path';
 import os from 'os';
 import { CLAUDE_MODELS } from '../shared/modelConstants.js';
+import {
+  createNotificationEvent,
+  notifyRunFailed,
+  notifyRunStopped,
+  notifyUserIfEnabled
+} from './services/notification-orchestrator.js';
+import { claudeAdapter } from './providers/claude/adapter.js';
+import { createNormalizedMessage } from './providers/types.js';
 
 const activeSessions = new Map();
 const pendingToolApprovals = new Map();
@@ -34,7 +42,7 @@ function createRequestId() {
 }
 
 function waitForToolApproval(requestId, options = {}) {
-  const { timeoutMs = TOOL_APPROVAL_TIMEOUT_MS, signal, onCancel } = options;
+  const { timeoutMs = TOOL_APPROVAL_TIMEOUT_MS, signal, onCancel, metadata } = options;
 
   return new Promise(resolve => {
     let settled = false;
@@ -78,9 +86,14 @@ function waitForToolApproval(requestId, options = {}) {
       signal.addEventListener('abort', abortHandler, { once: true });
     }
 
-    pendingToolApprovals.set(requestId, (decision) => {
+    const resolver = (decision) => {
       finalize(decision);
-    });
+    };
+    // Attach metadata for getPendingApprovalsForSession lookup
+    if (metadata) {
+      Object.assign(resolver, metadata);
+    }
+    pendingToolApprovals.set(requestId, resolver);
   });
 }
 
@@ -131,7 +144,7 @@ function matchesToolPermission(entry, toolName, input) {
  * @returns {Object} SDK-compatible options
  */
 function mapCliOptionsToSDK(options = {}) {
-  const { sessionId, cwd, toolsSettings, permissionMode, images } = options;
+  const { sessionId, cwd, toolsSettings, permissionMode } = options;
 
   const sdkOptions = {};
 
@@ -182,7 +195,7 @@ function mapCliOptionsToSDK(options = {}) {
   // Map model (default to sonnet)
   // Valid models: sonnet, opus, haiku, opusplan, sonnet[1m]
   sdkOptions.model = options.model || CLAUDE_MODELS.DEFAULT;
-  console.log(`Using model: ${sdkOptions.model}`);
+  // Model logged at query start below
 
   // Map system prompt configuration
   sdkOptions.systemPrompt = {
@@ -209,13 +222,14 @@ function mapCliOptionsToSDK(options = {}) {
  * @param {Array<string>} tempImagePaths - Temp image file paths for cleanup
  * @param {string} tempDir - Temp directory for cleanup
  */
-function addSession(sessionId, queryInstance, tempImagePaths = [], tempDir = null) {
+function addSession(sessionId, queryInstance, tempImagePaths = [], tempDir = null, writer = null) {
   activeSessions.set(sessionId, {
     instance: queryInstance,
     startTime: Date.now(),
     status: 'active',
     tempImagePaths,
-    tempDir
+    tempDir,
+    writer
   });
 }
 
@@ -260,46 +274,6 @@ function transformMessage(sdkMessage) {
   return sdkMessage;
 }
 
-/**
- * Extracts token usage from SDK result messages
- * @param {Object} resultMessage - SDK result message
- * @returns {Object|null} Token budget object or null
- */
-function extractTokenBudget(resultMessage) {
-  if (resultMessage.type !== 'result' || !resultMessage.modelUsage) {
-    return null;
-  }
-
-  // Get the first model's usage data
-  const modelKey = Object.keys(resultMessage.modelUsage)[0];
-  const modelData = resultMessage.modelUsage[modelKey];
-
-  if (!modelData) {
-    return null;
-  }
-
-  // Use cumulative tokens if available (tracks total for the session)
-  // Otherwise fall back to per-request tokens
-  const inputTokens = modelData.cumulativeInputTokens || modelData.inputTokens || 0;
-  const outputTokens = modelData.cumulativeOutputTokens || modelData.outputTokens || 0;
-  const cacheReadTokens = modelData.cumulativeCacheReadInputTokens || modelData.cacheReadInputTokens || 0;
-  const cacheCreationTokens = modelData.cumulativeCacheCreationInputTokens || modelData.cacheCreationInputTokens || 0;
-
-  // Total used = input + output + cache tokens
-  const totalUsed = inputTokens + outputTokens + cacheReadTokens + cacheCreationTokens;
-
-  // Use configured context window budget from environment (default 160000)
-  // This is the user's budget limit, not the model's context window
-  const contextWindow = parseInt(process.env.CONTEXT_WINDOW) || 160000;
-
-  console.log(`Token calculation: input=${inputTokens}, output=${outputTokens}, cache=${cacheReadTokens + cacheCreationTokens}, total=${totalUsed}/${contextWindow}`);
-
-  return {
-    used: totalUsed,
-    total: contextWindow
-  };
-}
-
 /**
  * Handles image processing for SDK queries
  * Saves base64 images to temporary files and returns modified prompt with file paths
@@ -348,7 +322,7 @@ async function handleImages(command, images, cwd) {
       modifiedCommand = command + imageNote;
     }
 
-    console.log(`Processed ${tempImagePaths.length} images to temp directory: ${tempDir}`);
+    // Images processed
     return { modifiedCommand, tempImagePaths, tempDir };
   } catch (error) {
     console.error('Error processing images for SDK:', error);
@@ -381,7 +355,7 @@ async function cleanupTempFiles(tempImagePaths, tempDir) {
       );
     }
 
-    console.log(`Cleaned up ${tempImagePaths.length} temp image files`);
+    // Temp files cleaned
   } catch (error) {
     console.error('Error during temp file cleanup:', error);
   }
@@ -401,7 +375,7 @@ async function loadMcpConfig(cwd) {
       await fs.access(claudeConfigPath);
     } catch (error) {
       // File doesn't exist, return null
-      console.log('No ~/.claude.json found, proceeding without MCP servers');
+      // No config file
       return null;
     }
 
@@ -421,7 +395,7 @@ async function loadMcpConfig(cwd) {
     // Add global MCP servers
     if (claudeConfig.mcpServers && typeof claudeConfig.mcpServers === 'object') {
       mcpServers = { ...claudeConfig.mcpServers };
-      console.log(`Loaded ${Object.keys(mcpServers).length} global MCP servers`);
+      // Global MCP servers loaded
     }
 
     // Add/override with project-specific MCP servers
@@ -429,17 +403,14 @@ async function loadMcpConfig(cwd) {
       const projectConfig = claudeConfig.claudeProjects[cwd];
       if (projectConfig && projectConfig.mcpServers && typeof projectConfig.mcpServers === 'object') {
         mcpServers = { ...mcpServers, ...projectConfig.mcpServers };
-        console.log(`Loaded ${Object.keys(projectConfig.mcpServers).length} project-specific MCP servers`);
+        // Project MCP servers merged
       }
     }
 
     // Return null if no servers found
     if (Object.keys(mcpServers).length === 0) {
-      console.log('No MCP servers configured');
       return null;
     }
-
-    console.log(`Total MCP servers loaded: ${Object.keys(mcpServers).length}`);
     return mcpServers;
   } catch (error) {
     console.error('Error loading MCP config:', error.message);
@@ -455,12 +426,20 @@ async function loadMcpConfig(cwd) {
  * @returns {Promise<void>}
  */
 async function queryClaudeSDK(command, options = {}, ws) {
-  const { sessionId } = options;
+  const { sessionId, sessionSummary } = options;
   let capturedSessionId = sessionId;
   let sessionCreatedSent = false;
   let tempImagePaths = [];
   let tempDir = null;
 
+  const emitNotification = (event) => {
+    notifyUserIfEnabled({
+      userId: ws?.userId || null,
+      writer: ws,
+      event
+    });
+  };
+
   try {
     // Map CLI options to SDK format
     const sdkOptions = mapCliOptionsToSDK(options);
@@ -477,6 +456,26 @@ async function queryClaudeSDK(command, options = {}, ws) {
     tempImagePaths = imageResult.tempImagePaths;
     tempDir = imageResult.tempDir;
 
+    sdkOptions.hooks = {
+      Notification: [{
+        matcher: '',
+        hooks: [async (input) => {
+          const message = typeof input?.message === 'string' ? input.message : 'Claude requires your attention.';
+          emitNotification(createNotificationEvent({
+            provider: 'claude',
+            sessionId: capturedSessionId || sessionId || null,
+            kind: 'action_required',
+            code: 'agent.notification',
+            meta: { message, sessionName: sessionSummary },
+            severity: 'warning',
+            requiresUserAction: true,
+            dedupeKey: `claude:hook:notification:${capturedSessionId || sessionId || 'none'}:${message}`
+          }));
+          return {};
+        }]
+      }]
+    };
+
     sdkOptions.canUseTool = async (toolName, input, context) => {
       const requiresInteraction = TOOLS_REQUIRING_INTERACTION.has(toolName);
 
@@ -501,24 +500,29 @@ async function queryClaudeSDK(command, options = {}, ws) {
       }
 
       const requestId = createRequestId();
-      ws.send({
-        type: 'claude-permission-request',
-        requestId,
-        toolName,
-        input,
-        sessionId: capturedSessionId || sessionId || null
-      });
+      ws.send(createNormalizedMessage({ kind: 'permission_request', requestId, toolName, input, sessionId: capturedSessionId || sessionId || null, provider: 'claude' }));
+      emitNotification(createNotificationEvent({
+        provider: 'claude',
+        sessionId: capturedSessionId || sessionId || null,
+        kind: 'action_required',
+        code: 'permission.required',
+        meta: { toolName, sessionName: sessionSummary },
+        severity: 'warning',
+        requiresUserAction: true,
+        dedupeKey: `claude:permission:${capturedSessionId || sessionId || 'none'}:${requestId}`
+      }));
 
       const decision = await waitForToolApproval(requestId, {
         timeoutMs: requiresInteraction ? 0 : undefined,
         signal: context?.signal,
+        metadata: {
+          _sessionId: capturedSessionId || sessionId || null,
+          _toolName: toolName,
+          _input: input,
+          _receivedAt: new Date(),
+        },
         onCancel: (reason) => {
-          ws.send({
-            type: 'claude-permission-cancelled',
-            requestId,
-            reason,
-            sessionId: capturedSessionId || sessionId || null
-          });
+          ws.send(createNormalizedMessage({ kind: 'permission_cancelled', requestId, reason, sessionId: capturedSessionId || sessionId || null, provider: 'claude' }));
         }
       });
       if (!decision) {
@@ -548,10 +552,22 @@ async function queryClaudeSDK(command, options = {}, ws) {
     const prevStreamTimeout = process.env.CLAUDE_CODE_STREAM_CLOSE_TIMEOUT;
     process.env.CLAUDE_CODE_STREAM_CLOSE_TIMEOUT = '300000';
 
-    const queryInstance = query({
-      prompt: finalCommand,
-      options: sdkOptions
-    });
+    let queryInstance;
+    try {
+      queryInstance = query({
+        prompt: finalCommand,
+        options: sdkOptions
+      });
+    } catch (hookError) {
+      // Older/newer SDK versions may not accept hook shapes yet.
+      // Keep notification behavior operational via runtime events even if hook registration fails.
+      console.warn('Failed to initialize Claude query with hooks, retrying without hooks:', hookError?.message || hookError);
+      delete sdkOptions.hooks;
+      queryInstance = query({
+        prompt: finalCommand,
+        options: sdkOptions
+      });
+    }
 
     // Restore immediately — Query constructor already captured the value
     if (prevStreamTimeout !== undefined) {
@@ -562,7 +578,7 @@ async function queryClaudeSDK(command, options = {}, ws) {
 
     // Track the query instance for abort capability
     if (capturedSessionId) {
-      addSession(capturedSessionId, queryInstance, tempImagePaths, tempDir);
+      addSession(capturedSessionId, queryInstance, tempImagePaths, tempDir, ws);
     }
 
     // Process streaming messages
@@ -572,7 +588,7 @@ async function queryClaudeSDK(command, options = {}, ws) {
       if (message.session_id && !capturedSessionId) {
 
         capturedSessionId = message.session_id;
-        addSession(capturedSessionId, queryInstance, tempImagePaths, tempDir);
+        addSession(capturedSessionId, queryInstance, tempImagePaths, tempDir, ws);
 
         // Set session ID on writer
         if (ws.setSessionId && typeof ws.setSessionId === 'function') {
@@ -582,36 +598,24 @@ async function queryClaudeSDK(command, options = {}, ws) {
         // Send session-created event only once for new sessions
         if (!sessionId && !sessionCreatedSent) {
           sessionCreatedSent = true;
-          ws.send({
-            type: 'session-created',
-            sessionId: capturedSessionId
-          });
-        } else {
-          console.log('Not sending session-created. sessionId:', sessionId, 'sessionCreatedSent:', sessionCreatedSent);
+          ws.send(createNormalizedMessage({ kind: 'session_created', newSessionId: capturedSessionId, sessionId: capturedSessionId, provider: 'claude' }));
         }
       } else {
-        console.log('No session_id in message or already captured. message.session_id:', message.session_id, 'capturedSessionId:', capturedSessionId);
+        // session_id already captured
       }
 
-      // Transform and send message to WebSocket
+      // Transform and normalize message via adapter
       const transformedMessage = transformMessage(message);
-      ws.send({
-        type: 'claude-response',
-        data: transformedMessage,
-        sessionId: capturedSessionId || sessionId || null
-      });
+      const sid = capturedSessionId || sessionId || null;
 
-      // Extract and send token budget updates from result messages
-      if (message.type === 'result') {
-        const tokenBudget = extractTokenBudget(message);
-        if (tokenBudget) {
-          console.log('Token budget from modelUsage:', tokenBudget);
-          ws.send({
-            type: 'token-budget',
-            data: tokenBudget,
-            sessionId: capturedSessionId || sessionId || null
-          });
+      // Use adapter to normalize SDK events into NormalizedMessage[]
+      const normalized = claudeAdapter.normalizeMessage(transformedMessage, sid);
+      for (const msg of normalized) {
+        // Preserve parentToolUseId from SDK wrapper for subagent tool grouping
+        if (transformedMessage.parentToolUseId && !msg.parentToolUseId) {
+          msg.parentToolUseId = transformedMessage.parentToolUseId;
         }
+        ws.send(msg);
       }
     }
 
@@ -624,14 +628,15 @@ async function queryClaudeSDK(command, options = {}, ws) {
     await cleanupTempFiles(tempImagePaths, tempDir);
 
     // Send completion event
-    console.log('Streaming complete, sending claude-complete event');
-    ws.send({
-      type: 'claude-complete',
-      sessionId: capturedSessionId,
-      exitCode: 0,
-      isNewSession: !sessionId && !!command
+    ws.send(createNormalizedMessage({ kind: 'complete', exitCode: 0, isNewSession: !sessionId && !!command, sessionId: capturedSessionId, provider: 'claude' }));
+    notifyRunStopped({
+      userId: ws?.userId || null,
+      provider: 'claude',
+      sessionId: capturedSessionId || sessionId || null,
+      sessionName: sessionSummary,
+      stopReason: 'completed'
     });
-    console.log('claude-complete event sent');
+    // Complete
 
   } catch (error) {
     console.error('SDK query error:', error);
@@ -645,10 +650,13 @@ async function queryClaudeSDK(command, options = {}, ws) {
     await cleanupTempFiles(tempImagePaths, tempDir);
 
     // Send error to WebSocket
-    ws.send({
-      type: 'claude-error',
-      error: error.message,
-      sessionId: capturedSessionId || sessionId || null
+    ws.send(createNormalizedMessage({ kind: 'error', content: error.message, sessionId: capturedSessionId || sessionId || null, provider: 'claude' }));
+    notifyRunFailed({
+      userId: ws?.userId || null,
+      provider: 'claude',
+      sessionId: capturedSessionId || sessionId || null,
+      sessionName: sessionSummary,
+      error
     });
 
     throw error;
@@ -708,11 +716,50 @@ function getActiveClaudeSDKSessions() {
   return getAllSessions();
 }
 
+/**
+ * Get pending tool approvals for a specific session.
+ * @param {string} sessionId - The session ID
+ * @returns {Array} Array of pending permission request objects
+ */
+function getPendingApprovalsForSession(sessionId) {
+  const pending = [];
+  for (const [requestId, resolver] of pendingToolApprovals.entries()) {
+    if (resolver._sessionId === sessionId) {
+      pending.push({
+        requestId,
+        toolName: resolver._toolName || 'UnknownTool',
+        input: resolver._input,
+        context: resolver._context,
+        sessionId,
+        receivedAt: resolver._receivedAt || new Date(),
+      });
+    }
+  }
+  return pending;
+}
+
+/**
+ * Reconnect a session's WebSocketWriter to a new raw WebSocket.
+ * Called when client reconnects (e.g. page refresh) while SDK is still running.
+ * @param {string} sessionId - The session ID
+ * @param {Object} newRawWs - The new raw WebSocket connection
+ * @returns {boolean} True if writer was successfully reconnected
+ */
+function reconnectSessionWriter(sessionId, newRawWs) {
+  const session = getSession(sessionId);
+  if (!session?.writer?.updateWebSocket) return false;
+  session.writer.updateWebSocket(newRawWs);
+  console.log(`[RECONNECT] Writer swapped for session ${sessionId}`);
+  return true;
+}
+
 // Export public API
 export {
   queryClaudeSDK,
   abortClaudeSDKSession,
   isClaudeSDKSessionActive,
   getActiveClaudeSDKSessions,
-  resolveToolApproval
+  resolveToolApproval,
+  getPendingApprovalsForSession,
+  reconnectSessionWriter
 };

server/cli.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 /**
- * Claude Code UI CLI
+ * CloudCLI CLI
  *
- * Provides command-line utilities for managing Claude Code UI
+ * Provides command-line utilities for managing CloudCLI
  *
  * Commands:
  *   (no args)     - Start the server (default)
@@ -84,7 +84,7 @@ function getInstallDir() {
 
 // Show status command
 function showStatus() {
-    console.log(`\n${c.bright('Claude Code UI - Status')}\n`);
+    console.log(`\n${c.bright('CloudCLI UI - Status')}\n`);
     console.log(c.dim('═'.repeat(60)));
 
     // Version info
@@ -110,7 +110,7 @@ function showStatus() {
 
     // Environment variables
     console.log(`\n${c.info('[INFO]')} Configuration:`);
-    console.log(`       PORT: ${c.bright(process.env.PORT || '3001')} ${c.dim(process.env.PORT ? '' : '(default)')}`);
+    console.log(`       SERVER_PORT: ${c.bright(process.env.SERVER_PORT || process.env.PORT || '3001')} ${c.dim(process.env.SERVER_PORT || process.env.PORT ? '' : '(default)')}`);
     console.log(`       DATABASE_PATH: ${c.dim(process.env.DATABASE_PATH || '(using default location)')}`);
     console.log(`       CLAUDE_CLI_PATH: ${c.dim(process.env.CLAUDE_CLI_PATH || 'claude (default)')}`);
     console.log(`       CONTEXT_WINDOW: ${c.dim(process.env.CONTEXT_WINDOW || '160000 (default)')}`);
@@ -134,14 +134,14 @@ function showStatus() {
     console.log(`      ${c.dim('>')} Use ${c.bright('cloudcli --port 8080')} to run on a custom port`);
     console.log(`      ${c.dim('>')} Use ${c.bright('cloudcli --database-path /path/to/db')} for custom database`);
     console.log(`      ${c.dim('>')} Run ${c.bright('cloudcli help')} for all options`);
-    console.log(`      ${c.dim('>')} Access the UI at http://localhost:${process.env.PORT || '3001'}\n`);
+    console.log(`      ${c.dim('>')} Access the UI at http://localhost:${process.env.SERVER_PORT || process.env.PORT || '3001'}\n`);
 }
 
 // Show help
 function showHelp() {
     console.log(`
 ╔═══════════════════════════════════════════════════════════════╗
-║              Claude Code UI - Command Line Tool               ║
+║              CloudCLI - Command Line Tool               ║
 ╚═══════════════════════════════════════════════════════════════╝
 
 Usage:
@@ -149,7 +149,7 @@ Usage:
   cloudcli [command] [options]
 
 Commands:
-  start          Start the Claude Code UI server (default)
+  start          Start the CloudCLI server (default)
   status         Show configuration and data locations
   update         Update to the latest version
   help           Show this help information
@@ -169,7 +169,8 @@ Examples:
   $ cloudcli status                 # Show configuration
 
 Environment Variables:
-  PORT                Set server port (default: 3001)
+  SERVER_PORT         Set server port (default: 3001)
+  PORT                Set server port (default: 3001) (LEGACY)
   DATABASE_PATH       Set custom database location
   CLAUDE_CLI_PATH     Set custom Claude CLI path
   CONTEXT_WINDOW      Set context window size (default: 160000)
@@ -202,7 +203,7 @@ function isNewerVersion(v1, v2) {
 async function checkForUpdates(silent = false) {
     try {
         const { execSync } = await import('child_process');
-        const latestVersion = execSync('npm show @siteboon/claude-code-ui version', { encoding: 'utf8' }).trim();
+        const latestVersion = execSync('npm show @cloudcli-ai/cloudcli version', { encoding: 'utf8' }).trim();
         const currentVersion = packageJson.version;
 
         if (isNewerVersion(latestVersion, currentVersion)) {
@@ -235,11 +236,11 @@ async function updatePackage() {
         }
 
         console.log(`${c.info('[INFO]')} Updating from ${currentVersion} to ${latestVersion}...`);
-        execSync('npm update -g @siteboon/claude-code-ui', { stdio: 'inherit' });
+        execSync('npm update -g @cloudcli-ai/cloudcli', { stdio: 'inherit' });
         console.log(`${c.ok('[OK]')} Update complete! Restart cloudcli to use the new version.`);
     } catch (e) {
         console.error(`${c.error('[ERROR]')} Update failed: ${e.message}`);
-        console.log(`${c.tip('[TIP]')} Try running manually: npm update -g @siteboon/claude-code-ui`);
+        console.log(`${c.tip('[TIP]')} Try running manually: npm update -g @cloudcli-ai/cloudcli`);
     }
 }
 
@@ -260,9 +261,9 @@ function parseArgs(args) {
         const arg = args[i];
 
         if (arg === '--port' || arg === '-p') {
-            parsed.options.port = args[++i];
+            parsed.options.serverPort = args[++i];
         } else if (arg.startsWith('--port=')) {
-            parsed.options.port = arg.split('=')[1];
+            parsed.options.serverPort = arg.split('=')[1];
         } else if (arg === '--database-path') {
             parsed.options.databasePath = args[++i];
         } else if (arg.startsWith('--database-path=')) {
@@ -285,8 +286,10 @@ async function main() {
     const { command, options } = parseArgs(args);
 
     // Apply CLI options to environment variables
-    if (options.port) {
-        process.env.PORT = options.port;
+    if (options.serverPort) {
+        process.env.SERVER_PORT = options.serverPort;
+    } else if (!process.env.SERVER_PORT && process.env.PORT) {
+        process.env.SERVER_PORT = process.env.PORT;
     }
     if (options.databasePath) {
         process.env.DATABASE_PATH = options.databasePath;

server/cursor-cli.js

@@ -1,84 +1,156 @@
 import { spawn } from 'child_process';
 import crossSpawn from 'cross-spawn';
-import { promises as fs } from 'fs';
-import path from 'path';
-import os from 'os';
+import { notifyRunFailed, notifyRunStopped } from './services/notification-orchestrator.js';
+import { cursorAdapter } from './providers/cursor/adapter.js';
+import { createNormalizedMessage } from './providers/types.js';
 
 // Use cross-spawn on Windows for better command execution
 const spawnFunction = process.platform === 'win32' ? crossSpawn : spawn;
 
 let activeCursorProcesses = new Map(); // Track active processes by session ID
 
+const WORKSPACE_TRUST_PATTERNS = [
+  /workspace trust required/i,
+  /do you trust the contents of this directory/i,
+  /working with untrusted contents/i,
+  /pass --trust,\s*--yolo,\s*or -f/i
+];
+
+function isWorkspaceTrustPrompt(text = '') {
+  if (!text || typeof text !== 'string') {
+    return false;
+  }
+
+  return WORKSPACE_TRUST_PATTERNS.some((pattern) => pattern.test(text));
+}
+
 async function spawnCursor(command, options = {}, ws) {
   return new Promise(async (resolve, reject) => {
-    const { sessionId, projectPath, cwd, resume, toolsSettings, skipPermissions, model, images } = options;
+    const { sessionId, projectPath, cwd, resume, toolsSettings, skipPermissions, model, sessionSummary } = options;
     let capturedSessionId = sessionId; // Track session ID throughout the process
     let sessionCreatedSent = false; // Track if we've already sent session-created event
-    let messageBuffer = ''; // Buffer for accumulating assistant messages
-    
+    let hasRetriedWithTrust = false;
+    let settled = false;
+
     // Use tools settings passed from frontend, or defaults
     const settings = toolsSettings || {
       allowedShellCommands: [],
       skipPermissions: false
     };
-    
+
     // Build Cursor CLI command
-    const args = [];
-    
+    const baseArgs = [];
+
     // Build flags allowing both resume and prompt together (reply in existing session)
     // Treat presence of sessionId as intention to resume, regardless of resume flag
     if (sessionId) {
-      args.push('--resume=' + sessionId);
+      baseArgs.push('--resume=' + sessionId);
     }
 
     if (command && command.trim()) {
       // Provide a prompt (works for both new and resumed sessions)
-      args.push('-p', command);
+      baseArgs.push('-p', command);
 
       // Add model flag if specified (only meaningful for new sessions; harmless on resume)
       if (!sessionId && model) {
-        args.push('--model', model);
+        baseArgs.push('--model', model);
       }
 
       // Request streaming JSON when we are providing a prompt
-      args.push('--output-format', 'stream-json');
+      baseArgs.push('--output-format', 'stream-json');
     }
-    
+
     // Add skip permissions flag if enabled
     if (skipPermissions || settings.skipPermissions) {
-      args.push('-f');
-      console.log('⚠️  Using -f flag (skip permissions)');
+      baseArgs.push('-f');
+      console.log('Using -f flag (skip permissions)');
     }
-    
+
     // Use cwd (actual project directory) instead of projectPath
     const workingDir = cwd || projectPath || process.cwd();
-    
-    console.log('Spawning Cursor CLI:', 'cursor-agent', args.join(' '));
-    console.log('Working directory:', workingDir);
-    console.log('Session info - Input sessionId:', sessionId, 'Resume:', resume);
-    
-    const cursorProcess = spawnFunction('cursor-agent', args, {
-      cwd: workingDir,
-      stdio: ['pipe', 'pipe', 'pipe'],
-      env: { ...process.env } // Inherit all environment variables
-    });
-    
+
     // Store process reference for potential abort
     const processKey = capturedSessionId || Date.now().toString();
-    activeCursorProcesses.set(processKey, cursorProcess);
-    
-    // Handle stdout (streaming JSON responses)
-    cursorProcess.stdout.on('data', (data) => {
-      const rawOutput = data.toString();
-      console.log('📤 Cursor CLI stdout:', rawOutput);
-      
-      const lines = rawOutput.split('\n').filter(line => line.trim());
-      
-      for (const line of lines) {
+
+    const settleOnce = (callback) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      callback();
+    };
+
+    const runCursorProcess = (args, runReason = 'initial') => {
+      const isTrustRetry = runReason === 'trust-retry';
+      let runSawWorkspaceTrustPrompt = false;
+      let stdoutLineBuffer = '';
+      let terminalNotificationSent = false;
+
+      const notifyTerminalState = ({ code = null, error = null } = {}) => {
+        if (terminalNotificationSent) {
+          return;
+        }
+
+        terminalNotificationSent = true;
+
+        const finalSessionId = capturedSessionId || sessionId || processKey;
+        if (code === 0 && !error) {
+          notifyRunStopped({
+            userId: ws?.userId || null,
+            provider: 'cursor',
+            sessionId: finalSessionId,
+            sessionName: sessionSummary,
+            stopReason: 'completed'
+          });
+          return;
+        }
+
+        notifyRunFailed({
+          userId: ws?.userId || null,
+          provider: 'cursor',
+          sessionId: finalSessionId,
+          sessionName: sessionSummary,
+          error: error || `Cursor CLI exited with code ${code}`
+        });
+      };
+
+      if (isTrustRetry) {
+        console.log('Retrying Cursor CLI with --trust after workspace trust prompt');
+      }
+
+      console.log('Spawning Cursor CLI:', 'cursor-agent', args.join(' '));
+      console.log('Working directory:', workingDir);
+      console.log('Session info - Input sessionId:', sessionId, 'Resume:', resume);
+
+      const cursorProcess = spawnFunction('cursor-agent', args, {
+        cwd: workingDir,
+        stdio: ['pipe', 'pipe', 'pipe'],
+        env: { ...process.env } // Inherit all environment variables
+      });
+
+      activeCursorProcesses.set(processKey, cursorProcess);
+
+      const shouldSuppressForTrustRetry = (text) => {
+        if (hasRetriedWithTrust || args.includes('--trust')) {
+          return false;
+        }
+        if (!isWorkspaceTrustPrompt(text)) {
+          return false;
+        }
+
+        runSawWorkspaceTrustPrompt = true;
+        return true;
+      };
+
+      const processCursorOutputLine = (line) => {
+        if (!line || !line.trim()) {
+          return;
+        }
+
         try {
           const response = JSON.parse(line);
-          console.log('📄 Parsed JSON response:', response);
-          
+          console.log('Parsed JSON response:', response);
+
           // Handle different message types
           switch (response.type) {
             case 'system':
@@ -86,14 +158,14 @@ async function spawnCursor(command, options = {}, ws) {
                 // Capture session ID
                 if (response.session_id && !capturedSessionId) {
                   capturedSessionId = response.session_id;
-                  console.log('📝 Captured session ID:', capturedSessionId);
-                  
+                  console.log('Captured session ID:', capturedSessionId);
+
                   // Update process key with captured session ID
                   if (processKey !== capturedSessionId) {
                     activeCursorProcesses.delete(processKey);
                     activeCursorProcesses.set(capturedSessionId, cursorProcess);
                   }
-                  
+
                   // Set session ID on writer (for API endpoint compatibility)
                   if (ws.setSessionId && typeof ws.setSessionId === 'function') {
                     ws.setSessionId(capturedSessionId);
@@ -102,156 +174,144 @@ async function spawnCursor(command, options = {}, ws) {
                   // Send session-created event only once for new sessions
                   if (!sessionId && !sessionCreatedSent) {
                     sessionCreatedSent = true;
-                    ws.send({
-                      type: 'session-created',
-                      sessionId: capturedSessionId,
-                      model: response.model,
-                      cwd: response.cwd
-                    });
+                    ws.send(createNormalizedMessage({ kind: 'session_created', newSessionId: capturedSessionId, model: response.model, cwd: response.cwd, sessionId: capturedSessionId, provider: 'cursor' }));
                   }
                 }
-                
-                // Send system info to frontend
-                ws.send({
-                  type: 'cursor-system',
-                  data: response,
-                  sessionId: capturedSessionId || sessionId || null
-                });
+
+                // System info — no longer needed by the frontend (session-lifecycle 'created' handles nav).
               }
               break;
-              
+
             case 'user':
-              // Forward user message
-              ws.send({
-                type: 'cursor-user',
-                data: response,
-                sessionId: capturedSessionId || sessionId || null
-              });
+              // User messages are not displayed in the UI — skip.
               break;
-              
+
             case 'assistant':
               // Accumulate assistant message chunks
               if (response.message && response.message.content && response.message.content.length > 0) {
-                const textContent = response.message.content[0].text;
-                messageBuffer += textContent;
-                
-                // Send as Claude-compatible format for frontend
-                ws.send({
-                  type: 'claude-response',
-                  data: {
-                    type: 'content_block_delta',
-                    delta: {
-                      type: 'text_delta',
-                      text: textContent
-                    }
-                  },
-                  sessionId: capturedSessionId || sessionId || null
-                });
+                const normalized = cursorAdapter.normalizeMessage(response, capturedSessionId || sessionId || null);
+                for (const msg of normalized) ws.send(msg);
               }
               break;
-              
-            case 'result':
-              // Session complete
+
+            case 'result': {
+              // Session complete — send stream end + lifecycle complete with result payload
               console.log('Cursor session result:', response);
-              
-              // Send final message if we have buffered content
-              if (messageBuffer) {
-                ws.send({
-                  type: 'claude-response',
-                  data: {
-                    type: 'content_block_stop'
-                  },
-                  sessionId: capturedSessionId || sessionId || null
-                });
-              }
-              
-              // Send completion event
-              ws.send({
-                type: 'cursor-result',
-                sessionId: capturedSessionId || sessionId,
-                data: response,
-                success: response.subtype === 'success'
-              });
+              const resultText = typeof response.result === 'string' ? response.result : '';
+              ws.send(createNormalizedMessage({
+                kind: 'complete',
+                exitCode: response.subtype === 'success' ? 0 : 1,
+                resultText,
+                isError: response.subtype !== 'success',
+                sessionId: capturedSessionId || sessionId, provider: 'cursor',
+              }));
               break;
-              
+            }
+
             default:
-              // Forward any other message types
-              ws.send({
-                type: 'cursor-response',
-                data: response,
-                sessionId: capturedSessionId || sessionId || null
-              });
+              // Unknown message types — ignore.
           }
         } catch (parseError) {
-          console.log('📄 Non-JSON response:', line);
-          // If not JSON, send as raw text
-          ws.send({
-            type: 'cursor-output',
-            data: line,
-            sessionId: capturedSessionId || sessionId || null
-          });
+          console.log('Non-JSON response:', line);
+
+          if (shouldSuppressForTrustRetry(line)) {
+            return;
+          }
+
+          // If not JSON, send as stream delta via adapter
+          const normalized = cursorAdapter.normalizeMessage(line, capturedSessionId || sessionId || null);
+          for (const msg of normalized) ws.send(msg);
         }
-      }
-    });
-    
-    // Handle stderr
-    cursorProcess.stderr.on('data', (data) => {
-      console.error('Cursor CLI stderr:', data.toString());
-      ws.send({
-        type: 'cursor-error',
-        error: data.toString(),
-        sessionId: capturedSessionId || sessionId || null
-      });
-    });
-    
-    // Handle process completion
-    cursorProcess.on('close', async (code) => {
-      console.log(`Cursor CLI process exited with code ${code}`);
-      
-      // Clean up process reference
-      const finalSessionId = capturedSessionId || sessionId || processKey;
-      activeCursorProcesses.delete(finalSessionId);
+      };
 
-      ws.send({
-        type: 'claude-complete',
-        sessionId: finalSessionId,
-        exitCode: code,
-        isNewSession: !sessionId && !!command // Flag to indicate this was a new session
-      });
-      
-      if (code === 0) {
-        resolve();
-      } else {
-        reject(new Error(`Cursor CLI exited with code ${code}`));
-      }
-    });
-    
-    // Handle process errors
-    cursorProcess.on('error', (error) => {
-      console.error('Cursor CLI process error:', error);
-      
-      // Clean up process reference on error
-      const finalSessionId = capturedSessionId || sessionId || processKey;
-      activeCursorProcesses.delete(finalSessionId);
+      // Handle stdout (streaming JSON responses)
+      cursorProcess.stdout.on('data', (data) => {
+        const rawOutput = data.toString();
+        console.log('Cursor CLI stdout:', rawOutput);
 
-      ws.send({
-        type: 'cursor-error',
-        error: error.message,
-        sessionId: capturedSessionId || sessionId || null
+        // Stream chunks can split JSON objects across packets; keep trailing partial line.
+        stdoutLineBuffer += rawOutput;
+        const completeLines = stdoutLineBuffer.split(/\r?\n/);
+        stdoutLineBuffer = completeLines.pop() || '';
+
+        completeLines.forEach((line) => {
+          processCursorOutputLine(line.trim());
+        });
       });
 
-      reject(error);
-    });
-    
-    // Close stdin since Cursor doesn't need interactive input
-    cursorProcess.stdin.end();
+      // Handle stderr
+      cursorProcess.stderr.on('data', (data) => {
+        const stderrText = data.toString();
+        console.error('Cursor CLI stderr:', stderrText);
+
+        if (shouldSuppressForTrustRetry(stderrText)) {
+          return;
+        }
+
+        ws.send(createNormalizedMessage({ kind: 'error', content: stderrText, sessionId: capturedSessionId || sessionId || null, provider: 'cursor' }));
+      });
+
+      // Handle process completion
+      cursorProcess.on('close', async (code) => {
+        console.log(`Cursor CLI process exited with code ${code}`);
+
+        const finalSessionId = capturedSessionId || sessionId || processKey;
+        activeCursorProcesses.delete(finalSessionId);
+
+        // Flush any final unterminated stdout line before completion handling.
+        if (stdoutLineBuffer.trim()) {
+          processCursorOutputLine(stdoutLineBuffer.trim());
+          stdoutLineBuffer = '';
+        }
+
+        if (
+          runSawWorkspaceTrustPrompt &&
+          code !== 0 &&
+          !hasRetriedWithTrust &&
+          !args.includes('--trust')
+        ) {
+          hasRetriedWithTrust = true;
+          runCursorProcess([...args, '--trust'], 'trust-retry');
+          return;
+        }
+
+        ws.send(createNormalizedMessage({ kind: 'complete', exitCode: code, isNewSession: !sessionId && !!command, sessionId: finalSessionId, provider: 'cursor' }));
+
+        if (code === 0) {
+          notifyTerminalState({ code });
+          settleOnce(() => resolve());
+        } else {
+          notifyTerminalState({ code });
+          settleOnce(() => reject(new Error(`Cursor CLI exited with code ${code}`)));
+        }
+      });
+
+      // Handle process errors
+      cursorProcess.on('error', (error) => {
+        console.error('Cursor CLI process error:', error);
+
+        // Clean up process reference on error
+        const finalSessionId = capturedSessionId || sessionId || processKey;
+        activeCursorProcesses.delete(finalSessionId);
+
+        ws.send(createNormalizedMessage({ kind: 'error', content: error.message, sessionId: capturedSessionId || sessionId || null, provider: 'cursor' }));
+        notifyTerminalState({ error });
+
+        settleOnce(() => reject(error));
+      });
+
+      // Close stdin since Cursor doesn't need interactive input
+      cursorProcess.stdin.end();
+    };
+
+    runCursorProcess(baseArgs, 'initial');
   });
 }
 
 function abortCursorSession(sessionId) {
   const process = activeCursorProcesses.get(sessionId);
   if (process) {
-    console.log(`🛑 Aborting Cursor session: ${sessionId}`);
+    console.log(`Aborting Cursor session: ${sessionId}`);
     process.kill('SIGTERM');
     activeCursorProcesses.delete(sessionId);
     return true;

server/database/db.js

@@ -59,6 +59,15 @@ if (DB_PATH !== LEGACY_DB_PATH && !fs.existsSync(DB_PATH) && fs.existsSync(LEGAC
 // Create database connection
 const db = new Database(DB_PATH);
 
+// app_config must exist before any other module imports (auth.js reads the JWT secret at load time).
+// runMigrations() also creates this table, but it runs too late for existing installations
+// where auth.js is imported before initializeDatabase() is called.
+db.exec(`CREATE TABLE IF NOT EXISTS app_config (
+  key TEXT PRIMARY KEY,
+  value TEXT NOT NULL,
+  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+)`);
+
 // Show app installation path prominently
 const appInstallPath = path.join(__dirname, '../..');
 console.log('');
@@ -91,6 +100,54 @@ const runMigrations = () => {
       db.exec('ALTER TABLE users ADD COLUMN has_completed_onboarding BOOLEAN DEFAULT 0');
     }
 
+    db.exec(`
+      CREATE TABLE IF NOT EXISTS user_notification_preferences (
+        user_id INTEGER PRIMARY KEY,
+        preferences_json TEXT NOT NULL,
+        updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+      )
+    `);
+
+    db.exec(`
+      CREATE TABLE IF NOT EXISTS vapid_keys (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        public_key TEXT NOT NULL,
+        private_key TEXT NOT NULL,
+        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+      )
+    `);
+
+    db.exec(`
+      CREATE TABLE IF NOT EXISTS push_subscriptions (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        user_id INTEGER NOT NULL,
+        endpoint TEXT NOT NULL UNIQUE,
+        keys_p256dh TEXT NOT NULL,
+        keys_auth TEXT NOT NULL,
+        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+      )
+    `);
+    // Create app_config table if it doesn't exist (for existing installations)
+    db.exec(`CREATE TABLE IF NOT EXISTS app_config (
+      key TEXT PRIMARY KEY,
+      value TEXT NOT NULL,
+      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+    )`);
+
+    // Create session_names table if it doesn't exist (for existing installations)
+    db.exec(`CREATE TABLE IF NOT EXISTS session_names (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      session_id TEXT NOT NULL,
+      provider TEXT NOT NULL DEFAULT 'claude',
+      custom_name TEXT NOT NULL,
+      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+      updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+      UNIQUE(session_id, provider)
+    )`);
+    db.exec('CREATE INDEX IF NOT EXISTS idx_session_names_lookup ON session_names(session_id, provider)');
+
     console.log('Database migrations completed successfully');
   } catch (error) {
     console.error('Error running migrations:', error.message);
@@ -348,6 +405,197 @@ const credentialsDb = {
   }
 };
 
+const DEFAULT_NOTIFICATION_PREFERENCES = {
+  channels: {
+    inApp: false,
+    webPush: false
+  },
+  events: {
+    actionRequired: true,
+    stop: true,
+    error: true
+  }
+};
+
+const normalizeNotificationPreferences = (value) => {
+  const source = value && typeof value === 'object' ? value : {};
+
+  return {
+    channels: {
+      inApp: source.channels?.inApp === true,
+      webPush: source.channels?.webPush === true
+    },
+    events: {
+      actionRequired: source.events?.actionRequired !== false,
+      stop: source.events?.stop !== false,
+      error: source.events?.error !== false
+    }
+  };
+};
+
+const notificationPreferencesDb = {
+  getPreferences: (userId) => {
+    try {
+      const row = db.prepare('SELECT preferences_json FROM user_notification_preferences WHERE user_id = ?').get(userId);
+      if (!row) {
+        const defaults = normalizeNotificationPreferences(DEFAULT_NOTIFICATION_PREFERENCES);
+        db.prepare(
+          'INSERT INTO user_notification_preferences (user_id, preferences_json, updated_at) VALUES (?, ?, CURRENT_TIMESTAMP)'
+        ).run(userId, JSON.stringify(defaults));
+        return defaults;
+      }
+
+      let parsed;
+      try {
+        parsed = JSON.parse(row.preferences_json);
+      } catch {
+        parsed = DEFAULT_NOTIFICATION_PREFERENCES;
+      }
+      return normalizeNotificationPreferences(parsed);
+    } catch (err) {
+      throw err;
+    }
+  },
+
+  updatePreferences: (userId, preferences) => {
+    try {
+      const normalized = normalizeNotificationPreferences(preferences);
+      db.prepare(
+        `INSERT INTO user_notification_preferences (user_id, preferences_json, updated_at)
+         VALUES (?, ?, CURRENT_TIMESTAMP)
+         ON CONFLICT(user_id) DO UPDATE SET
+           preferences_json = excluded.preferences_json,
+           updated_at = CURRENT_TIMESTAMP`
+      ).run(userId, JSON.stringify(normalized));
+      return normalized;
+    } catch (err) {
+      throw err;
+    }
+  }
+};
+
+const pushSubscriptionsDb = {
+  saveSubscription: (userId, endpoint, keysP256dh, keysAuth) => {
+    try {
+      db.prepare(
+        `INSERT INTO push_subscriptions (user_id, endpoint, keys_p256dh, keys_auth)
+         VALUES (?, ?, ?, ?)
+         ON CONFLICT(endpoint) DO UPDATE SET
+           user_id = excluded.user_id,
+           keys_p256dh = excluded.keys_p256dh,
+           keys_auth = excluded.keys_auth`
+      ).run(userId, endpoint, keysP256dh, keysAuth);
+    } catch (err) {
+      throw err;
+    }
+  },
+
+  getSubscriptions: (userId) => {
+    try {
+      return db.prepare('SELECT endpoint, keys_p256dh, keys_auth FROM push_subscriptions WHERE user_id = ?').all(userId);
+    } catch (err) {
+      throw err;
+    }
+  },
+
+  removeSubscription: (endpoint) => {
+    try {
+      db.prepare('DELETE FROM push_subscriptions WHERE endpoint = ?').run(endpoint);
+    } catch (err) {
+      throw err;
+    }
+  },
+
+  removeAllForUser: (userId) => {
+    try {
+      db.prepare('DELETE FROM push_subscriptions WHERE user_id = ?').run(userId);
+    } catch (err) {
+      throw err;
+    }
+  }
+};
+
+// Session custom names database operations
+const sessionNamesDb = {
+  // Set (insert or update) a custom session name
+  setName: (sessionId, provider, customName) => {
+    db.prepare(`
+      INSERT INTO session_names (session_id, provider, custom_name)
+      VALUES (?, ?, ?)
+      ON CONFLICT(session_id, provider)
+      DO UPDATE SET custom_name = excluded.custom_name, updated_at = CURRENT_TIMESTAMP
+    `).run(sessionId, provider, customName);
+  },
+
+  // Get a single custom session name
+  getName: (sessionId, provider) => {
+    const row = db.prepare(
+      'SELECT custom_name FROM session_names WHERE session_id = ? AND provider = ?'
+    ).get(sessionId, provider);
+    return row?.custom_name || null;
+  },
+
+  // Batch lookup — returns Map<sessionId, customName>
+  getNames: (sessionIds, provider) => {
+    if (!sessionIds.length) return new Map();
+    const placeholders = sessionIds.map(() => '?').join(',');
+    const rows = db.prepare(
+      `SELECT session_id, custom_name FROM session_names
+       WHERE session_id IN (${placeholders}) AND provider = ?`
+    ).all(...sessionIds, provider);
+    return new Map(rows.map(r => [r.session_id, r.custom_name]));
+  },
+
+  // Delete a custom session name
+  deleteName: (sessionId, provider) => {
+    return db.prepare(
+      'DELETE FROM session_names WHERE session_id = ? AND provider = ?'
+    ).run(sessionId, provider).changes > 0;
+  },
+};
+
+// Apply custom session names from the database (overrides CLI-generated summaries)
+function applyCustomSessionNames(sessions, provider) {
+  if (!sessions?.length) return;
+  try {
+    const ids = sessions.map(s => s.id);
+    const customNames = sessionNamesDb.getNames(ids, provider);
+    for (const session of sessions) {
+      const custom = customNames.get(session.id);
+      if (custom) session.summary = custom;
+    }
+  } catch (error) {
+    console.warn(`[DB] Failed to apply custom session names for ${provider}:`, error.message);
+  }
+}
+
+// App config database operations
+const appConfigDb = {
+  get: (key) => {
+    try {
+      const row = db.prepare('SELECT value FROM app_config WHERE key = ?').get(key);
+      return row?.value || null;
+    } catch (err) {
+      return null;
+    }
+  },
+
+  set: (key, value) => {
+    db.prepare(
+      'INSERT INTO app_config (key, value) VALUES (?, ?) ON CONFLICT(key) DO UPDATE SET value = excluded.value'
+    ).run(key, value);
+  },
+
+  getOrCreateJwtSecret: () => {
+    let secret = appConfigDb.get('jwt_secret');
+    if (!secret) {
+      secret = crypto.randomBytes(64).toString('hex');
+      appConfigDb.set('jwt_secret', secret);
+    }
+    return secret;
+  }
+};
+
 // Backward compatibility - keep old names pointing to new system
 const githubTokensDb = {
   createGithubToken: (userId, tokenName, githubToken, description = null) => {
@@ -373,5 +621,10 @@ export {
   userDb,
   apiKeysDb,
   credentialsDb,
+  notificationPreferencesDb,
+  pushSubscriptionsDb,
+  sessionNamesDb,
+  applyCustomSessionNames,
+  appConfigDb,
   githubTokensDb // Backward compatibility
-};
+};

server/database/init.sql

@@ -49,4 +49,51 @@ CREATE TABLE IF NOT EXISTS user_credentials (
 
 CREATE INDEX IF NOT EXISTS idx_user_credentials_user_id ON user_credentials(user_id);
 CREATE INDEX IF NOT EXISTS idx_user_credentials_type ON user_credentials(credential_type);
-CREATE INDEX IF NOT EXISTS idx_user_credentials_active ON user_credentials(is_active);
+CREATE INDEX IF NOT EXISTS idx_user_credentials_active ON user_credentials(is_active);
+
+-- User notification preferences (backend-owned, provider-agnostic)
+CREATE TABLE IF NOT EXISTS user_notification_preferences (
+    user_id INTEGER PRIMARY KEY,
+    preferences_json TEXT NOT NULL,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+);
+
+-- VAPID key pair for Web Push notifications
+CREATE TABLE IF NOT EXISTS vapid_keys (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    public_key TEXT NOT NULL,
+    private_key TEXT NOT NULL,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Browser push subscriptions
+CREATE TABLE IF NOT EXISTS push_subscriptions (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id INTEGER NOT NULL,
+    endpoint TEXT NOT NULL UNIQUE,
+    keys_p256dh TEXT NOT NULL,
+    keys_auth TEXT NOT NULL,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+);
+
+-- Session custom names (provider-agnostic display name overrides)
+CREATE TABLE IF NOT EXISTS session_names (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    session_id TEXT NOT NULL,
+    provider TEXT NOT NULL DEFAULT 'claude',
+    custom_name TEXT NOT NULL,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE(session_id, provider)
+);
+
+CREATE INDEX IF NOT EXISTS idx_session_names_lookup ON session_names(session_id, provider);
+
+-- App configuration table (auto-generated secrets, settings, etc.)
+CREATE TABLE IF NOT EXISTS app_config (
+    key TEXT PRIMARY KEY,
+    value TEXT NOT NULL,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);

server/gemini-cli.js

@@ -0,0 +1,453 @@
+import { spawn } from 'child_process';
+import crossSpawn from 'cross-spawn';
+
+// Use cross-spawn on Windows for correct .cmd resolution (same pattern as cursor-cli.js)
+const spawnFunction = process.platform === 'win32' ? crossSpawn : spawn;
+import { promises as fs } from 'fs';
+import path from 'path';
+import os from 'os';
+import sessionManager from './sessionManager.js';
+import GeminiResponseHandler from './gemini-response-handler.js';
+import { notifyRunFailed, notifyRunStopped } from './services/notification-orchestrator.js';
+import { createNormalizedMessage } from './providers/types.js';
+
+let activeGeminiProcesses = new Map(); // Track active processes by session ID
+
+async function spawnGemini(command, options = {}, ws) {
+    const { sessionId, projectPath, cwd, toolsSettings, permissionMode, images, sessionSummary } = options;
+    let capturedSessionId = sessionId; // Track session ID throughout the process
+    let sessionCreatedSent = false; // Track if we've already sent session-created event
+    let assistantBlocks = []; // Accumulate the full response blocks including tools
+
+    // Use tools settings passed from frontend, or defaults
+    const settings = toolsSettings || {
+        allowedTools: [],
+        disallowedTools: [],
+        skipPermissions: false
+    };
+
+    // Build Gemini CLI command - start with print/resume flags first
+    const args = [];
+
+    // Add prompt flag with command if we have a command
+    if (command && command.trim()) {
+        args.push('--prompt', command);
+    }
+
+    // If we have a sessionId, we want to resume
+    if (sessionId) {
+        const session = sessionManager.getSession(sessionId);
+        if (session && session.cliSessionId) {
+            args.push('--resume', session.cliSessionId);
+        }
+    }
+
+    // Use cwd (actual project directory) instead of projectPath (Gemini's metadata directory)
+    // Clean the path by removing any non-printable characters
+    const cleanPath = (cwd || projectPath || process.cwd()).replace(/[^\x20-\x7E]/g, '').trim();
+    const workingDir = cleanPath;
+
+    // Handle images by saving them to temporary files and passing paths to Gemini
+    const tempImagePaths = [];
+    let tempDir = null;
+    if (images && images.length > 0) {
+        try {
+            // Create temp directory in the project directory so Gemini can access it
+            tempDir = path.join(workingDir, '.tmp', 'images', Date.now().toString());
+            await fs.mkdir(tempDir, { recursive: true });
+
+            // Save each image to a temp file
+            for (const [index, image] of images.entries()) {
+                // Extract base64 data and mime type
+                const matches = image.data.match(/^data:([^;]+);base64,(.+)$/);
+                if (!matches) {
+                    continue;
+                }
+
+                const [, mimeType, base64Data] = matches;
+                const extension = mimeType.split('/')[1] || 'png';
+                const filename = `image_${index}.${extension}`;
+                const filepath = path.join(tempDir, filename);
+
+                // Write base64 data to file
+                await fs.writeFile(filepath, Buffer.from(base64Data, 'base64'));
+                tempImagePaths.push(filepath);
+            }
+
+            // Include the full image paths in the prompt for Gemini to reference
+            // Gemini CLI can read images from file paths in the prompt
+            if (tempImagePaths.length > 0 && command && command.trim()) {
+                const imageNote = `\n\n[Images given: ${tempImagePaths.length} images are located at the following paths:]\n${tempImagePaths.map((p, i) => `${i + 1}. ${p}`).join('\n')}`;
+                const modifiedCommand = command + imageNote;
+
+                // Update the command in args
+                const promptIndex = args.indexOf('--prompt');
+                if (promptIndex !== -1 && args[promptIndex + 1] === command) {
+                    args[promptIndex + 1] = modifiedCommand;
+                } else if (promptIndex !== -1) {
+                    // If we're using context, update the full prompt
+                    args[promptIndex + 1] = args[promptIndex + 1] + imageNote;
+                }
+            }
+        } catch (error) {
+            console.error('Error processing images for Gemini:', error);
+        }
+    }
+
+    // Add basic flags for Gemini
+    if (options.debug) {
+        args.push('--debug');
+    }
+
+    // Add MCP config flag only if MCP servers are configured
+    try {
+        const geminiConfigPath = path.join(os.homedir(), '.gemini.json');
+        let hasMcpServers = false;
+
+        try {
+            await fs.access(geminiConfigPath);
+            const geminiConfigRaw = await fs.readFile(geminiConfigPath, 'utf8');
+            const geminiConfig = JSON.parse(geminiConfigRaw);
+
+            // Check global MCP servers
+            if (geminiConfig.mcpServers && Object.keys(geminiConfig.mcpServers).length > 0) {
+                hasMcpServers = true;
+            }
+
+            // Check project-specific MCP servers
+            if (!hasMcpServers && geminiConfig.geminiProjects) {
+                const currentProjectPath = process.cwd();
+                const projectConfig = geminiConfig.geminiProjects[currentProjectPath];
+                if (projectConfig && projectConfig.mcpServers && Object.keys(projectConfig.mcpServers).length > 0) {
+                    hasMcpServers = true;
+                }
+            }
+        } catch (e) {
+            // Ignore if file doesn't exist or isn't parsable
+        }
+
+        if (hasMcpServers) {
+            args.push('--mcp-config', geminiConfigPath);
+        }
+    } catch (error) {
+        // Ignore outer errors
+    }
+
+    // Add model for all sessions (both new and resumed)
+    let modelToUse = options.model || 'gemini-2.5-flash';
+    args.push('--model', modelToUse);
+    args.push('--output-format', 'stream-json');
+
+    // Handle approval modes and allowed tools
+    if (settings.skipPermissions || options.skipPermissions || permissionMode === 'yolo') {
+        args.push('--yolo');
+    } else if (permissionMode === 'auto_edit') {
+        args.push('--approval-mode', 'auto_edit');
+    } else if (permissionMode === 'plan') {
+        args.push('--approval-mode', 'plan');
+    }
+
+    if (settings.allowedTools && settings.allowedTools.length > 0) {
+        args.push('--allowed-tools', settings.allowedTools.join(','));
+    }
+
+    // Try to find gemini in PATH first, then fall back to environment variable
+    const geminiPath = process.env.GEMINI_PATH || 'gemini';
+    console.log('Spawning Gemini CLI:', geminiPath, args.join(' '));
+    console.log('Working directory:', workingDir);
+
+    let spawnCmd = geminiPath;
+    let spawnArgs = args;
+
+    // On non-Windows platforms, wrap the execution in a shell to avoid ENOEXEC
+    // which happens when the target is a script lacking a shebang.
+    if (os.platform() !== 'win32') {
+        spawnCmd = 'sh';
+        // Use exec to replace the shell process, ensuring signals hit gemini directly
+        spawnArgs = ['-c', 'exec "$0" "$@"', geminiPath, ...args];
+    }
+
+    return new Promise((resolve, reject) => {
+        const geminiProcess = spawnFunction(spawnCmd, spawnArgs, {
+            cwd: workingDir,
+            stdio: ['pipe', 'pipe', 'pipe'],
+            env: { ...process.env } // Inherit all environment variables
+        });
+        let terminalNotificationSent = false;
+        let terminalFailureReason = null;
+
+        const notifyTerminalState = ({ code = null, error = null } = {}) => {
+            if (terminalNotificationSent) {
+                return;
+            }
+
+            terminalNotificationSent = true;
+
+            const finalSessionId = capturedSessionId || sessionId || processKey;
+            if (code === 0 && !error) {
+                notifyRunStopped({
+                    userId: ws?.userId || null,
+                    provider: 'gemini',
+                    sessionId: finalSessionId,
+                    sessionName: sessionSummary,
+                    stopReason: 'completed'
+                });
+                return;
+            }
+
+            notifyRunFailed({
+                userId: ws?.userId || null,
+                provider: 'gemini',
+                sessionId: finalSessionId,
+                sessionName: sessionSummary,
+                error: error || terminalFailureReason || `Gemini CLI exited with code ${code}`
+            });
+        };
+
+        // Attach temp file info to process for cleanup later
+        geminiProcess.tempImagePaths = tempImagePaths;
+        geminiProcess.tempDir = tempDir;
+
+        // Store process reference for potential abort
+        const processKey = capturedSessionId || sessionId || Date.now().toString();
+        activeGeminiProcesses.set(processKey, geminiProcess);
+
+        // Store sessionId on the process object for debugging
+        geminiProcess.sessionId = processKey;
+
+        // Close stdin to signal we're done sending input
+        geminiProcess.stdin.end();
+
+        // Add timeout handler
+        const timeoutMs = 120000; // 120 seconds for slower models
+        let timeout;
+
+        const startTimeout = () => {
+            if (timeout) clearTimeout(timeout);
+            timeout = setTimeout(() => {
+                const socketSessionId = typeof ws.getSessionId === 'function' ? ws.getSessionId() : (capturedSessionId || sessionId || processKey);
+                terminalFailureReason = `Gemini CLI timeout - no response received for ${timeoutMs / 1000} seconds`;
+                ws.send(createNormalizedMessage({ kind: 'error', content: terminalFailureReason, sessionId: socketSessionId, provider: 'gemini' }));
+                try {
+                    geminiProcess.kill('SIGTERM');
+                } catch (e) { }
+            }, timeoutMs);
+        };
+
+        startTimeout();
+
+        // Save user message to session when starting
+        if (command && capturedSessionId) {
+            sessionManager.addMessage(capturedSessionId, 'user', command);
+        }
+
+        // Create response handler for NDJSON buffering
+        let responseHandler;
+        if (ws) {
+            responseHandler = new GeminiResponseHandler(ws, {
+                onContentFragment: (content) => {
+                    if (assistantBlocks.length > 0 && assistantBlocks[assistantBlocks.length - 1].type === 'text') {
+                        assistantBlocks[assistantBlocks.length - 1].text += content;
+                    } else {
+                        assistantBlocks.push({ type: 'text', text: content });
+                    }
+                },
+                onToolUse: (event) => {
+                    assistantBlocks.push({
+                        type: 'tool_use',
+                        id: event.tool_id,
+                        name: event.tool_name,
+                        input: event.parameters
+                    });
+                },
+                onToolResult: (event) => {
+                    if (capturedSessionId) {
+                        if (assistantBlocks.length > 0) {
+                            sessionManager.addMessage(capturedSessionId, 'assistant', [...assistantBlocks]);
+                            assistantBlocks = [];
+                        }
+                        sessionManager.addMessage(capturedSessionId, 'user', [{
+                            type: 'tool_result',
+                            tool_use_id: event.tool_id,
+                            content: event.output === undefined ? null : event.output,
+                            is_error: event.status === 'error'
+                        }]);
+                    }
+                },
+                onInit: (event) => {
+                    if (capturedSessionId) {
+                        const sess = sessionManager.getSession(capturedSessionId);
+                        if (sess && !sess.cliSessionId) {
+                            sess.cliSessionId = event.session_id;
+                            sessionManager.saveSession(capturedSessionId);
+                        }
+                    }
+                }
+            });
+        }
+
+        // Handle stdout
+        geminiProcess.stdout.on('data', (data) => {
+            const rawOutput = data.toString();
+            startTimeout(); // Re-arm the timeout
+
+            // For new sessions, create a session ID FIRST
+            if (!sessionId && !sessionCreatedSent && !capturedSessionId) {
+                capturedSessionId = `gemini_${Date.now()}`;
+                sessionCreatedSent = true;
+
+                // Create session in session manager
+                sessionManager.createSession(capturedSessionId, cwd || process.cwd());
+
+                // Save the user message now that we have a session ID
+                if (command) {
+                    sessionManager.addMessage(capturedSessionId, 'user', command);
+                }
+
+                // Update process key with captured session ID
+                if (processKey !== capturedSessionId) {
+                    activeGeminiProcesses.delete(processKey);
+                    activeGeminiProcesses.set(capturedSessionId, geminiProcess);
+                }
+
+                ws.setSessionId && typeof ws.setSessionId === 'function' && ws.setSessionId(capturedSessionId);
+
+                ws.send(createNormalizedMessage({ kind: 'session_created', newSessionId: capturedSessionId, sessionId: capturedSessionId, provider: 'gemini' }));
+            }
+
+            if (responseHandler) {
+                responseHandler.processData(rawOutput);
+            } else if (rawOutput) {
+                // Fallback to direct sending for raw CLI mode without WS
+                if (assistantBlocks.length > 0 && assistantBlocks[assistantBlocks.length - 1].type === 'text') {
+                    assistantBlocks[assistantBlocks.length - 1].text += rawOutput;
+                } else {
+                    assistantBlocks.push({ type: 'text', text: rawOutput });
+                }
+                const socketSessionId = typeof ws.getSessionId === 'function' ? ws.getSessionId() : (capturedSessionId || sessionId);
+                ws.send(createNormalizedMessage({ kind: 'stream_delta', content: rawOutput, sessionId: socketSessionId, provider: 'gemini' }));
+            }
+        });
+
+        // Handle stderr
+        geminiProcess.stderr.on('data', (data) => {
+            const errorMsg = data.toString();
+
+            // Filter out deprecation warnings and "Loaded cached credentials" message
+            if (errorMsg.includes('[DEP0040]') ||
+                errorMsg.includes('DeprecationWarning') ||
+                errorMsg.includes('--trace-deprecation') ||
+                errorMsg.includes('Loaded cached credentials')) {
+                return;
+            }
+
+            const socketSessionId = typeof ws.getSessionId === 'function' ? ws.getSessionId() : (capturedSessionId || sessionId);
+            ws.send(createNormalizedMessage({ kind: 'error', content: errorMsg, sessionId: socketSessionId, provider: 'gemini' }));
+        });
+
+        // Handle process completion
+        geminiProcess.on('close', async (code) => {
+            clearTimeout(timeout);
+
+            // Flush any remaining buffered content
+            if (responseHandler) {
+                responseHandler.forceFlush();
+                responseHandler.destroy();
+            }
+
+            // Clean up process reference
+            const finalSessionId = capturedSessionId || sessionId || processKey;
+            activeGeminiProcesses.delete(finalSessionId);
+
+            // Save assistant response to session if we have one
+            if (finalSessionId && assistantBlocks.length > 0) {
+                sessionManager.addMessage(finalSessionId, 'assistant', assistantBlocks);
+            }
+
+            ws.send(createNormalizedMessage({ kind: 'complete', exitCode: code, isNewSession: !sessionId && !!command, sessionId: finalSessionId, provider: 'gemini' }));
+
+            // Clean up temporary image files if any
+            if (geminiProcess.tempImagePaths && geminiProcess.tempImagePaths.length > 0) {
+                for (const imagePath of geminiProcess.tempImagePaths) {
+                    await fs.unlink(imagePath).catch(err => { });
+                }
+                if (geminiProcess.tempDir) {
+                    await fs.rm(geminiProcess.tempDir, { recursive: true, force: true }).catch(err => { });
+                }
+            }
+
+            if (code === 0) {
+                notifyTerminalState({ code });
+                resolve();
+            } else {
+                notifyTerminalState({
+                    code,
+                    error: code === null ? 'Gemini CLI process was terminated or timed out' : null
+                });
+                reject(new Error(code === null ? 'Gemini CLI process was terminated or timed out' : `Gemini CLI exited with code ${code}`));
+            }
+        });
+
+        // Handle process errors
+        geminiProcess.on('error', (error) => {
+            // Clean up process reference on error
+            const finalSessionId = capturedSessionId || sessionId || processKey;
+            activeGeminiProcesses.delete(finalSessionId);
+
+            const errorSessionId = typeof ws.getSessionId === 'function' ? ws.getSessionId() : finalSessionId;
+            ws.send(createNormalizedMessage({ kind: 'error', content: error.message, sessionId: errorSessionId, provider: 'gemini' }));
+            notifyTerminalState({ error });
+
+            reject(error);
+        });
+
+    });
+}
+
+function abortGeminiSession(sessionId) {
+    let geminiProc = activeGeminiProcesses.get(sessionId);
+    let processKey = sessionId;
+
+    if (!geminiProc) {
+        for (const [key, proc] of activeGeminiProcesses.entries()) {
+            if (proc.sessionId === sessionId) {
+                geminiProc = proc;
+                processKey = key;
+                break;
+            }
+        }
+    }
+
+    if (geminiProc) {
+        try {
+            geminiProc.kill('SIGTERM');
+            setTimeout(() => {
+                if (activeGeminiProcesses.has(processKey)) {
+                    try {
+                        geminiProc.kill('SIGKILL');
+                    } catch (e) { }
+                }
+            }, 2000); // Wait 2 seconds before force kill
+
+            return true;
+        } catch (error) {
+            return false;
+        }
+    }
+    return false;
+}
+
+function isGeminiSessionActive(sessionId) {
+    return activeGeminiProcesses.has(sessionId);
+}
+
+function getActiveGeminiSessions() {
+    return Array.from(activeGeminiProcesses.keys());
+}
+
+export {
+    spawnGemini,
+    abortGeminiSession,
+    isGeminiSessionActive,
+    getActiveGeminiSessions
+};

server/gemini-response-handler.js

@@ -0,0 +1,79 @@
+// Gemini Response Handler - JSON Stream processing
+import { geminiAdapter } from './providers/gemini/adapter.js';
+
+class GeminiResponseHandler {
+  constructor(ws, options = {}) {
+    this.ws = ws;
+    this.buffer = '';
+    this.onContentFragment = options.onContentFragment || null;
+    this.onInit = options.onInit || null;
+    this.onToolUse = options.onToolUse || null;
+    this.onToolResult = options.onToolResult || null;
+  }
+
+  // Process incoming raw data from Gemini stream-json
+  processData(data) {
+    this.buffer += data;
+
+    // Split by newline
+    const lines = this.buffer.split('\n');
+
+    // Keep the last incomplete line in the buffer
+    this.buffer = lines.pop() || '';
+
+    for (const line of lines) {
+      if (!line.trim()) continue;
+
+      try {
+        const event = JSON.parse(line);
+        this.handleEvent(event);
+      } catch (err) {
+        // Not a JSON line, probably debug output or CLI warnings
+      }
+    }
+  }
+
+  handleEvent(event) {
+    const sid = typeof this.ws.getSessionId === 'function' ? this.ws.getSessionId() : null;
+
+    if (event.type === 'init') {
+      if (this.onInit) {
+        this.onInit(event);
+      }
+      return;
+    }
+
+    // Invoke per-type callbacks for session tracking
+    if (event.type === 'message' && event.role === 'assistant') {
+      const content = event.content || '';
+      if (this.onContentFragment && content) {
+        this.onContentFragment(content);
+      }
+    } else if (event.type === 'tool_use' && this.onToolUse) {
+      this.onToolUse(event);
+    } else if (event.type === 'tool_result' && this.onToolResult) {
+      this.onToolResult(event);
+    }
+
+    // Normalize via adapter and send all resulting messages
+    const normalized = geminiAdapter.normalizeMessage(event, sid);
+    for (const msg of normalized) {
+      this.ws.send(msg);
+    }
+  }
+
+  forceFlush() {
+    if (this.buffer.trim()) {
+      try {
+        const event = JSON.parse(this.buffer);
+        this.handleEvent(event);
+      } catch (err) { }
+    }
+  }
+
+  destroy() {
+    this.buffer = '';
+  }
+}
+
+export default GeminiResponseHandler;

server/middleware/auth.js

@@ -1,9 +1,9 @@
 import jwt from 'jsonwebtoken';
-import { userDb } from '../database/db.js';
+import { userDb, appConfigDb } from '../database/db.js';
 import { IS_PLATFORM } from '../constants/config.js';
 
-// Get JWT secret from environment or use default (for development)
-const JWT_SECRET = process.env.JWT_SECRET || 'claude-ui-dev-secret-change-in-production';
+// Use env var if set, otherwise auto-generate a unique secret per installation
+const JWT_SECRET = process.env.JWT_SECRET || appConfigDb.getOrCreateJwtSecret();
 
 // Optional API key middleware
 const validateApiKey = (req, res, next) => {
@@ -58,6 +58,16 @@ const authenticateToken = async (req, res, next) => {
       return res.status(401).json({ error: 'Invalid token. User not found.' });
     }
 
+    // Auto-refresh: if token is past halfway through its lifetime, issue a new one
+    if (decoded.exp && decoded.iat) {
+      const now = Math.floor(Date.now() / 1000);
+      const halfLife = (decoded.exp - decoded.iat) / 2;
+      if (now > decoded.iat + halfLife) {
+        const newToken = generateToken(user);
+        res.setHeader('X-Refreshed-Token', newToken);
+      }
+    }
+
     req.user = user;
     next();
   } catch (error) {
@@ -66,15 +76,15 @@ const authenticateToken = async (req, res, next) => {
   }
 };
 
-// Generate JWT token (never expires)
+// Generate JWT token
 const generateToken = (user) => {
   return jwt.sign(
-    { 
-      userId: user.id, 
-      username: user.username 
+    {
+      userId: user.id,
+      username: user.username
     },
-    JWT_SECRET
-    // No expiration - token lasts forever
+    JWT_SECRET,
+    { expiresIn: '7d' }
   );
 };
 
@@ -85,7 +95,7 @@ const authenticateWebSocket = (token) => {
     try {
       const user = userDb.getFirstUser();
       if (user) {
-        return { userId: user.id, username: user.username };
+        return { id: user.id, userId: user.id, username: user.username };
       }
       return null;
     } catch (error) {
@@ -101,7 +111,12 @@ const authenticateWebSocket = (token) => {
 
   try {
     const decoded = jwt.verify(token, JWT_SECRET);
-    return decoded;
+    // Verify user actually exists in database (matches REST authenticateToken behavior)
+    const user = userDb.getUserById(decoded.userId);
+    if (!user) {
+      return null;
+    }
+    return { userId: user.id, username: user.username };
   } catch (error) {
     console.error('WebSocket token verification error:', error);
     return null;
@@ -114,4 +129,4 @@ export {
   generateToken,
   authenticateWebSocket,
   JWT_SECRET
-};
+};

server/openai-codex.js

@@ -14,6 +14,9 @@
  */
 
 import { Codex } from '@openai/codex-sdk';
+import { notifyRunFailed, notifyRunStopped } from './services/notification-orchestrator.js';
+import { codexAdapter } from './providers/codex/adapter.js';
+import { createNormalizedMessage } from './providers/types.js';
 
 // Track active sessions
 const activeCodexSessions = new Map();
@@ -126,8 +129,7 @@ function transformCodexEvent(event) {
 
     case 'turn.completed':
       return {
-        type: 'turn_complete',
-        usage: event.usage
+        type: 'turn_complete'
       };
 
     case 'turn.failed':
@@ -191,6 +193,7 @@ function mapPermissionModeToCodexOptions(permissionMode) {
 export async function queryCodex(command, options = {}, ws) {
   const {
     sessionId,
+    sessionSummary,
     cwd,
     projectPath,
     model,
@@ -203,6 +206,7 @@ export async function queryCodex(command, options = {}, ws) {
   let codex;
   let thread;
   let currentSessionId = sessionId;
+  let terminalFailure = null;
   const abortController = new AbortController();
 
   try {
@@ -238,11 +242,7 @@ export async function queryCodex(command, options = {}, ws) {
     });
 
     // Send session created event
-    sendMessage(ws, {
-      type: 'session-created',
-      sessionId: currentSessionId,
-      provider: 'codex'
-    });
+    sendMessage(ws, createNormalizedMessage({ kind: 'session_created', newSessionId: currentSessionId, sessionId: currentSessionId, provider: 'codex' }));
 
     // Execute with streaming
     const streamedTurn = await thread.runStreamed(command, {
@@ -262,32 +262,35 @@ export async function queryCodex(command, options = {}, ws) {
 
       const transformed = transformCodexEvent(event);
 
-      sendMessage(ws, {
-        type: 'codex-response',
-        data: transformed,
-        sessionId: currentSessionId
-      });
+      // Normalize the transformed event into NormalizedMessage(s) via adapter
+      const normalizedMsgs = codexAdapter.normalizeMessage(transformed, currentSessionId);
+      for (const msg of normalizedMsgs) {
+        sendMessage(ws, msg);
+      }
 
-      // Extract and send token usage if available (normalized to match Claude format)
-      if (event.type === 'turn.completed' && event.usage) {
-        const totalTokens = (event.usage.input_tokens || 0) + (event.usage.output_tokens || 0);
-        sendMessage(ws, {
-          type: 'token-budget',
-          data: {
-            used: totalTokens,
-            total: 200000 // Default context window for Codex models
-          },
-          sessionId: currentSessionId
+      if (event.type === 'turn.failed' && !terminalFailure) {
+        terminalFailure = event.error || new Error('Turn failed');
+        notifyRunFailed({
+          userId: ws?.userId || null,
+          provider: 'codex',
+          sessionId: currentSessionId,
+          sessionName: sessionSummary,
+          error: terminalFailure
         });
       }
     }
 
     // Send completion event
-    sendMessage(ws, {
-      type: 'codex-complete',
-      sessionId: currentSessionId,
-      actualSessionId: thread.id
-    });
+    if (!terminalFailure) {
+      sendMessage(ws, createNormalizedMessage({ kind: 'complete', actualSessionId: thread.id, sessionId: currentSessionId, provider: 'codex' }));
+      notifyRunStopped({
+        userId: ws?.userId || null,
+        provider: 'codex',
+        sessionId: currentSessionId,
+        sessionName: sessionSummary,
+        stopReason: 'completed'
+      });
+    }
 
   } catch (error) {
     const session = currentSessionId ? activeCodexSessions.get(currentSessionId) : null;
@@ -298,11 +301,16 @@ export async function queryCodex(command, options = {}, ws) {
 
     if (!wasAborted) {
       console.error('[Codex] Error:', error);
-      sendMessage(ws, {
-        type: 'codex-error',
-        error: error.message,
-        sessionId: currentSessionId
-      });
+      sendMessage(ws, createNormalizedMessage({ kind: 'error', content: error.message, sessionId: currentSessionId, provider: 'codex' }));
+      if (!terminalFailure) {
+        notifyRunFailed({
+          userId: ws?.userId || null,
+          provider: 'codex',
+          sessionId: currentSessionId,
+          sessionName: sessionSummary,
+          error
+        });
+      }
     }
 
   } finally {

server/providers/claude/adapter.js

@@ -0,0 +1,278 @@
+/**
+ * Claude provider adapter.
+ *
+ * Normalizes Claude SDK session history into NormalizedMessage format.
+ * @module adapters/claude
+ */
+
+import { getSessionMessages } from '../../projects.js';
+import { createNormalizedMessage, generateMessageId } from '../types.js';
+import { isInternalContent } from '../utils.js';
+
+const PROVIDER = 'claude';
+
+/**
+ * Normalize a raw JSONL message or realtime SDK event into NormalizedMessage(s).
+ * Handles both history entries (JSONL `{ message: { role, content } }`) and
+ * realtime streaming events (`content_block_delta`, `content_block_stop`, etc.).
+ * @param {object} raw - A single entry from JSONL or a live SDK event
+ * @param {string} sessionId
+ * @returns {import('../types.js').NormalizedMessage[]}
+ */
+export function normalizeMessage(raw, sessionId) {
+  // ── Streaming events (realtime) ──────────────────────────────────────────
+  if (raw.type === 'content_block_delta' && raw.delta?.text) {
+    return [createNormalizedMessage({ kind: 'stream_delta', content: raw.delta.text, sessionId, provider: PROVIDER })];
+  }
+  if (raw.type === 'content_block_stop') {
+    return [createNormalizedMessage({ kind: 'stream_end', sessionId, provider: PROVIDER })];
+  }
+
+  // ── History / full-message events ────────────────────────────────────────
+  const messages = [];
+  const ts = raw.timestamp || new Date().toISOString();
+  const baseId = raw.uuid || generateMessageId('claude');
+
+  // User message
+  if (raw.message?.role === 'user' && raw.message?.content) {
+    if (Array.isArray(raw.message.content)) {
+      // Handle tool_result parts
+      for (const part of raw.message.content) {
+        if (part.type === 'tool_result') {
+          messages.push(createNormalizedMessage({
+            id: `${baseId}_tr_${part.tool_use_id}`,
+            sessionId,
+            timestamp: ts,
+            provider: PROVIDER,
+            kind: 'tool_result',
+            toolId: part.tool_use_id,
+            content: typeof part.content === 'string' ? part.content : JSON.stringify(part.content),
+            isError: Boolean(part.is_error),
+            subagentTools: raw.subagentTools,
+            toolUseResult: raw.toolUseResult,
+          }));
+        } else if (part.type === 'text') {
+          // Regular text parts from user
+          const text = part.text || '';
+          if (text && !isInternalContent(text)) {
+            messages.push(createNormalizedMessage({
+              id: `${baseId}_text`,
+              sessionId,
+              timestamp: ts,
+              provider: PROVIDER,
+              kind: 'text',
+              role: 'user',
+              content: text,
+            }));
+          }
+        }
+      }
+
+      // If no text parts were found, check if it's a pure user message
+      if (messages.length === 0) {
+        const textParts = raw.message.content
+          .filter(p => p.type === 'text')
+          .map(p => p.text)
+          .filter(Boolean)
+          .join('\n');
+        if (textParts && !isInternalContent(textParts)) {
+          messages.push(createNormalizedMessage({
+            id: `${baseId}_text`,
+            sessionId,
+            timestamp: ts,
+            provider: PROVIDER,
+            kind: 'text',
+            role: 'user',
+            content: textParts,
+          }));
+        }
+      }
+    } else if (typeof raw.message.content === 'string') {
+      const text = raw.message.content;
+      if (text && !isInternalContent(text)) {
+        messages.push(createNormalizedMessage({
+          id: baseId,
+          sessionId,
+          timestamp: ts,
+          provider: PROVIDER,
+          kind: 'text',
+          role: 'user',
+          content: text,
+        }));
+      }
+    }
+    return messages;
+  }
+
+  // Thinking message
+  if (raw.type === 'thinking' && raw.message?.content) {
+    messages.push(createNormalizedMessage({
+      id: baseId,
+      sessionId,
+      timestamp: ts,
+      provider: PROVIDER,
+      kind: 'thinking',
+      content: raw.message.content,
+    }));
+    return messages;
+  }
+
+  // Tool use result (codex-style in Claude)
+  if (raw.type === 'tool_use' && raw.toolName) {
+    messages.push(createNormalizedMessage({
+      id: baseId,
+      sessionId,
+      timestamp: ts,
+      provider: PROVIDER,
+      kind: 'tool_use',
+      toolName: raw.toolName,
+      toolInput: raw.toolInput,
+      toolId: raw.toolCallId || baseId,
+    }));
+    return messages;
+  }
+
+  if (raw.type === 'tool_result') {
+    messages.push(createNormalizedMessage({
+      id: baseId,
+      sessionId,
+      timestamp: ts,
+      provider: PROVIDER,
+      kind: 'tool_result',
+      toolId: raw.toolCallId || '',
+      content: raw.output || '',
+      isError: false,
+    }));
+    return messages;
+  }
+
+  // Assistant message
+  if (raw.message?.role === 'assistant' && raw.message?.content) {
+    if (Array.isArray(raw.message.content)) {
+      let partIndex = 0;
+      for (const part of raw.message.content) {
+        if (part.type === 'text' && part.text) {
+          messages.push(createNormalizedMessage({
+            id: `${baseId}_${partIndex}`,
+            sessionId,
+            timestamp: ts,
+            provider: PROVIDER,
+            kind: 'text',
+            role: 'assistant',
+            content: part.text,
+          }));
+        } else if (part.type === 'tool_use') {
+          messages.push(createNormalizedMessage({
+            id: `${baseId}_${partIndex}`,
+            sessionId,
+            timestamp: ts,
+            provider: PROVIDER,
+            kind: 'tool_use',
+            toolName: part.name,
+            toolInput: part.input,
+            toolId: part.id,
+          }));
+        } else if (part.type === 'thinking' && part.thinking) {
+          messages.push(createNormalizedMessage({
+            id: `${baseId}_${partIndex}`,
+            sessionId,
+            timestamp: ts,
+            provider: PROVIDER,
+            kind: 'thinking',
+            content: part.thinking,
+          }));
+        }
+        partIndex++;
+      }
+    } else if (typeof raw.message.content === 'string') {
+      messages.push(createNormalizedMessage({
+        id: baseId,
+        sessionId,
+        timestamp: ts,
+        provider: PROVIDER,
+        kind: 'text',
+        role: 'assistant',
+        content: raw.message.content,
+      }));
+    }
+    return messages;
+  }
+
+  return messages;
+}
+
+/**
+ * @type {import('../types.js').ProviderAdapter}
+ */
+export const claudeAdapter = {
+  normalizeMessage,
+
+  /**
+   * Fetch session history from JSONL files, returning normalized messages.
+   */
+  async fetchHistory(sessionId, opts = {}) {
+    const { projectName, limit = null, offset = 0 } = opts;
+    if (!projectName) {
+      return { messages: [], total: 0, hasMore: false, offset: 0, limit: null };
+    }
+
+    let result;
+    try {
+      result = await getSessionMessages(projectName, sessionId, limit, offset);
+    } catch (error) {
+      console.warn(`[ClaudeAdapter] Failed to load session ${sessionId}:`, error.message);
+      return { messages: [], total: 0, hasMore: false, offset: 0, limit: null };
+    }
+
+    // getSessionMessages returns either an array (no limit) or { messages, total, hasMore }
+    const rawMessages = Array.isArray(result) ? result : (result.messages || []);
+    const total = Array.isArray(result) ? rawMessages.length : (result.total || 0);
+    const hasMore = Array.isArray(result) ? false : Boolean(result.hasMore);
+
+    // First pass: collect tool results for attachment to tool_use messages
+    const toolResultMap = new Map();
+    for (const raw of rawMessages) {
+      if (raw.message?.role === 'user' && Array.isArray(raw.message?.content)) {
+        for (const part of raw.message.content) {
+          if (part.type === 'tool_result') {
+            toolResultMap.set(part.tool_use_id, {
+              content: part.content,
+              isError: Boolean(part.is_error),
+              timestamp: raw.timestamp,
+              subagentTools: raw.subagentTools,
+              toolUseResult: raw.toolUseResult,
+            });
+          }
+        }
+      }
+    }
+
+    // Second pass: normalize all messages
+    const normalized = [];
+    for (const raw of rawMessages) {
+      const entries = normalizeMessage(raw, sessionId);
+      normalized.push(...entries);
+    }
+
+    // Attach tool results to their corresponding tool_use messages
+    for (const msg of normalized) {
+      if (msg.kind === 'tool_use' && msg.toolId && toolResultMap.has(msg.toolId)) {
+        const tr = toolResultMap.get(msg.toolId);
+        msg.toolResult = {
+          content: typeof tr.content === 'string' ? tr.content : JSON.stringify(tr.content),
+          isError: tr.isError,
+          toolUseResult: tr.toolUseResult,
+        };
+        msg.subagentTools = tr.subagentTools;
+      }
+    }
+
+    return {
+      messages: normalized,
+      total,
+      hasMore,
+      offset,
+      limit,
+    };
+  },
+};

server/providers/codex/adapter.js

@@ -0,0 +1,246 @@
+/**
+ * Codex (OpenAI) provider adapter.
+ *
+ * Normalizes Codex SDK session history into NormalizedMessage format.
+ * @module adapters/codex
+ */
+
+import { getCodexSessionMessages } from '../../projects.js';
+import { createNormalizedMessage, generateMessageId } from '../types.js';
+
+const PROVIDER = 'codex';
+
+/**
+ * Normalize a raw Codex JSONL message into NormalizedMessage(s).
+ * @param {object} raw - A single parsed message from Codex JSONL
+ * @param {string} sessionId
+ * @returns {import('../types.js').NormalizedMessage[]}
+ */
+function normalizeCodexHistoryEntry(raw, sessionId) {
+  const ts = raw.timestamp || new Date().toISOString();
+  const baseId = raw.uuid || generateMessageId('codex');
+
+  // User message
+  if (raw.message?.role === 'user') {
+    const content = typeof raw.message.content === 'string'
+      ? raw.message.content
+      : Array.isArray(raw.message.content)
+        ? raw.message.content.map(p => typeof p === 'string' ? p : p?.text || '').filter(Boolean).join('\n')
+        : String(raw.message.content || '');
+    if (!content.trim()) return [];
+    return [createNormalizedMessage({
+      id: baseId,
+      sessionId,
+      timestamp: ts,
+      provider: PROVIDER,
+      kind: 'text',
+      role: 'user',
+      content,
+    })];
+  }
+
+  // Assistant message
+  if (raw.message?.role === 'assistant') {
+    const content = typeof raw.message.content === 'string'
+      ? raw.message.content
+      : Array.isArray(raw.message.content)
+        ? raw.message.content.map(p => typeof p === 'string' ? p : p?.text || '').filter(Boolean).join('\n')
+        : '';
+    if (!content.trim()) return [];
+    return [createNormalizedMessage({
+      id: baseId,
+      sessionId,
+      timestamp: ts,
+      provider: PROVIDER,
+      kind: 'text',
+      role: 'assistant',
+      content,
+    })];
+  }
+
+  // Thinking/reasoning
+  if (raw.type === 'thinking' || raw.isReasoning) {
+    return [createNormalizedMessage({
+      id: baseId,
+      sessionId,
+      timestamp: ts,
+      provider: PROVIDER,
+      kind: 'thinking',
+      content: raw.message?.content || '',
+    })];
+  }
+
+  // Tool use
+  if (raw.type === 'tool_use' || raw.toolName) {
+    return [createNormalizedMessage({
+      id: baseId,
+      sessionId,
+      timestamp: ts,
+      provider: PROVIDER,
+      kind: 'tool_use',
+      toolName: raw.toolName || 'Unknown',
+      toolInput: raw.toolInput,
+      toolId: raw.toolCallId || baseId,
+    })];
+  }
+
+  // Tool result
+  if (raw.type === 'tool_result') {
+    return [createNormalizedMessage({
+      id: baseId,
+      sessionId,
+      timestamp: ts,
+      provider: PROVIDER,
+      kind: 'tool_result',
+      toolId: raw.toolCallId || '',
+      content: raw.output || '',
+      isError: Boolean(raw.isError),
+    })];
+  }
+
+  return [];
+}
+
+/**
+ * Normalize a raw Codex event (history JSONL or transformed SDK event) into NormalizedMessage(s).
+ * @param {object} raw - A history entry (has raw.message.role) or transformed SDK event (has raw.type)
+ * @param {string} sessionId
+ * @returns {import('../types.js').NormalizedMessage[]}
+ */
+export function normalizeMessage(raw, sessionId) {
+  // History format: has message.role
+  if (raw.message?.role) {
+    return normalizeCodexHistoryEntry(raw, sessionId);
+  }
+
+  const ts = raw.timestamp || new Date().toISOString();
+  const baseId = raw.uuid || generateMessageId('codex');
+
+  // SDK event format (output of transformCodexEvent)
+  if (raw.type === 'item') {
+    switch (raw.itemType) {
+      case 'agent_message':
+        return [createNormalizedMessage({
+          id: baseId, sessionId, timestamp: ts, provider: PROVIDER,
+          kind: 'text', role: 'assistant', content: raw.message?.content || '',
+        })];
+      case 'reasoning':
+        return [createNormalizedMessage({
+          id: baseId, sessionId, timestamp: ts, provider: PROVIDER,
+          kind: 'thinking', content: raw.message?.content || '',
+        })];
+      case 'command_execution':
+        return [createNormalizedMessage({
+          id: baseId, sessionId, timestamp: ts, provider: PROVIDER,
+          kind: 'tool_use', toolName: 'Bash', toolInput: { command: raw.command },
+          toolId: baseId,
+          output: raw.output, exitCode: raw.exitCode, status: raw.status,
+        })];
+      case 'file_change':
+        return [createNormalizedMessage({
+          id: baseId, sessionId, timestamp: ts, provider: PROVIDER,
+          kind: 'tool_use', toolName: 'FileChanges', toolInput: raw.changes,
+          toolId: baseId, status: raw.status,
+        })];
+      case 'mcp_tool_call':
+        return [createNormalizedMessage({
+          id: baseId, sessionId, timestamp: ts, provider: PROVIDER,
+          kind: 'tool_use', toolName: raw.tool || 'MCP', toolInput: raw.arguments,
+          toolId: baseId, server: raw.server, result: raw.result,
+          error: raw.error, status: raw.status,
+        })];
+      case 'web_search':
+        return [createNormalizedMessage({
+          id: baseId, sessionId, timestamp: ts, provider: PROVIDER,
+          kind: 'tool_use', toolName: 'WebSearch', toolInput: { query: raw.query },
+          toolId: baseId,
+        })];
+      case 'todo_list':
+        return [createNormalizedMessage({
+          id: baseId, sessionId, timestamp: ts, provider: PROVIDER,
+          kind: 'tool_use', toolName: 'TodoList', toolInput: { items: raw.items },
+          toolId: baseId,
+        })];
+      case 'error':
+        return [createNormalizedMessage({
+          id: baseId, sessionId, timestamp: ts, provider: PROVIDER,
+          kind: 'error', content: raw.message?.content || 'Unknown error',
+        })];
+      default:
+        // Unknown item type — pass through as generic tool_use
+        return [createNormalizedMessage({
+          id: baseId, sessionId, timestamp: ts, provider: PROVIDER,
+          kind: 'tool_use', toolName: raw.itemType || 'Unknown',
+          toolInput: raw.item || raw, toolId: baseId,
+        })];
+    }
+  }
+
+  if (raw.type === 'turn_complete') {
+    return [createNormalizedMessage({
+      id: baseId, sessionId, timestamp: ts, provider: PROVIDER,
+      kind: 'complete',
+    })];
+  }
+  if (raw.type === 'turn_failed') {
+    return [createNormalizedMessage({
+      id: baseId, sessionId, timestamp: ts, provider: PROVIDER,
+      kind: 'error', content: raw.error?.message || 'Turn failed',
+    })];
+  }
+
+  return [];
+}
+
+/**
+ * @type {import('../types.js').ProviderAdapter}
+ */
+export const codexAdapter = {
+  normalizeMessage,
+  /**
+   * Fetch session history from Codex JSONL files.
+   */
+  async fetchHistory(sessionId, opts = {}) {
+    const { limit = null, offset = 0 } = opts;
+
+    let result;
+    try {
+      result = await getCodexSessionMessages(sessionId, limit, offset);
+    } catch (error) {
+      console.warn(`[CodexAdapter] Failed to load session ${sessionId}:`, error.message);
+      return { messages: [], total: 0, hasMore: false, offset: 0, limit: null };
+    }
+
+    const rawMessages = Array.isArray(result) ? result : (result.messages || []);
+    const total = Array.isArray(result) ? rawMessages.length : (result.total || 0);
+    const hasMore = Array.isArray(result) ? false : Boolean(result.hasMore);
+
+    const normalized = [];
+    for (const raw of rawMessages) {
+      const entries = normalizeCodexHistoryEntry(raw, sessionId);
+      normalized.push(...entries);
+    }
+
+    // Attach tool results to tool_use messages
+    const toolResultMap = new Map();
+    for (const msg of normalized) {
+      if (msg.kind === 'tool_result' && msg.toolId) {
+        toolResultMap.set(msg.toolId, msg);
+      }
+    }
+    for (const msg of normalized) {
+      if (msg.kind === 'tool_use' && msg.toolId && toolResultMap.has(msg.toolId)) {
+        const tr = toolResultMap.get(msg.toolId);
+        msg.toolResult = { content: tr.content, isError: tr.isError };
+      }
+    }
+
+    return {
+      messages: normalized,
+      total,
+      hasMore,
+      offset,
+      limit,
+    };
+  },
+};

server/providers/cursor/adapter.js

@@ -0,0 +1,353 @@
+/**
+ * Cursor provider adapter.
+ *
+ * Normalizes Cursor CLI session history into NormalizedMessage format.
+ * @module adapters/cursor
+ */
+
+import path from 'path';
+import os from 'os';
+import crypto from 'crypto';
+import { createNormalizedMessage, generateMessageId } from '../types.js';
+
+const PROVIDER = 'cursor';
+
+/**
+ * Load raw blobs from Cursor's SQLite store.db, parse the DAG structure,
+ * and return sorted message blobs in chronological order.
+ * @param {string} sessionId
+ * @param {string} projectPath - Absolute project path (used to compute cwdId hash)
+ * @returns {Promise<Array<{id: string, sequence: number, rowid: number, content: object}>>}
+ */
+async function loadCursorBlobs(sessionId, projectPath) {
+  // Lazy-import sqlite so the module doesn't fail if sqlite3 is unavailable
+  const { default: sqlite3 } = await import('sqlite3');
+  const { open } = await import('sqlite');
+
+  const cwdId = crypto.createHash('md5').update(projectPath || process.cwd()).digest('hex');
+  const storeDbPath = path.join(os.homedir(), '.cursor', 'chats', cwdId, sessionId, 'store.db');
+
+  const db = await open({
+    filename: storeDbPath,
+    driver: sqlite3.Database,
+    mode: sqlite3.OPEN_READONLY,
+  });
+
+  try {
+    const allBlobs = await db.all('SELECT rowid, id, data FROM blobs');
+
+    const blobMap = new Map();
+    const parentRefs = new Map();
+    const childRefs = new Map();
+    const jsonBlobs = [];
+
+    for (const blob of allBlobs) {
+      blobMap.set(blob.id, blob);
+
+      if (blob.data && blob.data[0] === 0x7B) {
+        try {
+          const parsed = JSON.parse(blob.data.toString('utf8'));
+          jsonBlobs.push({ ...blob, parsed });
+        } catch {
+          // skip unparseable blobs
+        }
+      } else if (blob.data) {
+        const parents = [];
+        let i = 0;
+        while (i < blob.data.length - 33) {
+          if (blob.data[i] === 0x0A && blob.data[i + 1] === 0x20) {
+            const parentHash = blob.data.slice(i + 2, i + 34).toString('hex');
+            if (blobMap.has(parentHash)) {
+              parents.push(parentHash);
+            }
+            i += 34;
+          } else {
+            i++;
+          }
+        }
+        if (parents.length > 0) {
+          parentRefs.set(blob.id, parents);
+          for (const parentId of parents) {
+            if (!childRefs.has(parentId)) childRefs.set(parentId, []);
+            childRefs.get(parentId).push(blob.id);
+          }
+        }
+      }
+    }
+
+    // Topological sort (DFS)
+    const visited = new Set();
+    const sorted = [];
+    function visit(nodeId) {
+      if (visited.has(nodeId)) return;
+      visited.add(nodeId);
+      for (const pid of (parentRefs.get(nodeId) || [])) visit(pid);
+      const b = blobMap.get(nodeId);
+      if (b) sorted.push(b);
+    }
+    for (const blob of allBlobs) {
+      if (!parentRefs.has(blob.id)) visit(blob.id);
+    }
+    for (const blob of allBlobs) visit(blob.id);
+
+    // Order JSON blobs by DAG appearance
+    const messageOrder = new Map();
+    let orderIndex = 0;
+    for (const blob of sorted) {
+      if (blob.data && blob.data[0] !== 0x7B) {
+        for (const jb of jsonBlobs) {
+          try {
+            const idBytes = Buffer.from(jb.id, 'hex');
+            if (blob.data.includes(idBytes) && !messageOrder.has(jb.id)) {
+              messageOrder.set(jb.id, orderIndex++);
+            }
+          } catch { /* skip */ }
+        }
+      }
+    }
+
+    const sortedJsonBlobs = jsonBlobs.sort((a, b) => {
+      const oa = messageOrder.get(a.id) ?? Number.MAX_SAFE_INTEGER;
+      const ob = messageOrder.get(b.id) ?? Number.MAX_SAFE_INTEGER;
+      return oa !== ob ? oa - ob : a.rowid - b.rowid;
+    });
+
+    const messages = [];
+    for (let idx = 0; idx < sortedJsonBlobs.length; idx++) {
+      const blob = sortedJsonBlobs[idx];
+      const parsed = blob.parsed;
+      if (!parsed) continue;
+      const role = parsed?.role || parsed?.message?.role;
+      if (role === 'system') continue;
+      messages.push({
+        id: blob.id,
+        sequence: idx + 1,
+        rowid: blob.rowid,
+        content: parsed,
+      });
+    }
+
+    return messages;
+  } finally {
+    await db.close();
+  }
+}
+
+/**
+ * Normalize a realtime NDJSON event from Cursor CLI into NormalizedMessage(s).
+ * History uses normalizeCursorBlobs (SQLite DAG), this handles streaming NDJSON.
+ * @param {object|string} raw - A parsed NDJSON event or a raw text line
+ * @param {string} sessionId
+ * @returns {import('../types.js').NormalizedMessage[]}
+ */
+export function normalizeMessage(raw, sessionId) {
+  // Structured assistant message with content array
+  if (raw && typeof raw === 'object' && raw.type === 'assistant' && raw.message?.content?.[0]?.text) {
+    return [createNormalizedMessage({ kind: 'stream_delta', content: raw.message.content[0].text, sessionId, provider: PROVIDER })];
+  }
+  // Plain string line (non-JSON output)
+  if (typeof raw === 'string' && raw.trim()) {
+    return [createNormalizedMessage({ kind: 'stream_delta', content: raw, sessionId, provider: PROVIDER })];
+  }
+  return [];
+}
+
+/**
+ * @type {import('../types.js').ProviderAdapter}
+ */
+export const cursorAdapter = {
+  normalizeMessage,
+  /**
+   * Fetch session history for Cursor from SQLite store.db.
+   */
+  async fetchHistory(sessionId, opts = {}) {
+    const { projectPath = '', limit = null, offset = 0 } = opts;
+
+    try {
+      const blobs = await loadCursorBlobs(sessionId, projectPath);
+      const allNormalized = cursorAdapter.normalizeCursorBlobs(blobs, sessionId);
+
+      // Apply pagination
+      if (limit !== null && limit > 0) {
+        const start = offset;
+        const page = allNormalized.slice(start, start + limit);
+        return {
+          messages: page,
+          total: allNormalized.length,
+          hasMore: start + limit < allNormalized.length,
+          offset,
+          limit,
+        };
+      }
+
+      return {
+        messages: allNormalized,
+        total: allNormalized.length,
+        hasMore: false,
+        offset: 0,
+        limit: null,
+      };
+    } catch (error) {
+      // DB doesn't exist or is unreadable — return empty
+      console.warn(`[CursorAdapter] Failed to load session ${sessionId}:`, error.message);
+      return { messages: [], total: 0, hasMore: false, offset: 0, limit: null };
+    }
+  },
+
+  /**
+   * Normalize raw Cursor blob messages into NormalizedMessage[].
+   * @param {any[]} blobs - Raw cursor blobs from store.db ({id, sequence, rowid, content})
+   * @param {string} sessionId
+   * @returns {import('../types.js').NormalizedMessage[]}
+   */
+  normalizeCursorBlobs(blobs, sessionId) {
+    const messages = [];
+    const toolUseMap = new Map();
+
+    // Use a fixed base timestamp so messages have stable, monotonically-increasing
+    // timestamps based on their sequence number rather than wall-clock time.
+    const baseTime = Date.now();
+
+    for (let i = 0; i < blobs.length; i++) {
+      const blob = blobs[i];
+      const content = blob.content;
+      const ts = new Date(baseTime + (blob.sequence ?? i) * 100).toISOString();
+      const baseId = blob.id || generateMessageId('cursor');
+
+      try {
+        if (!content?.role || !content?.content) {
+          // Try nested message format
+          if (content?.message?.role && content?.message?.content) {
+            if (content.message.role === 'system') continue;
+            const role = content.message.role === 'user' ? 'user' : 'assistant';
+            let text = '';
+            if (Array.isArray(content.message.content)) {
+              text = content.message.content
+                .map(p => typeof p === 'string' ? p : p?.text || '')
+                .filter(Boolean)
+                .join('\n');
+            } else if (typeof content.message.content === 'string') {
+              text = content.message.content;
+            }
+            if (text?.trim()) {
+              messages.push(createNormalizedMessage({
+                id: baseId,
+                sessionId,
+                timestamp: ts,
+                provider: PROVIDER,
+                kind: 'text',
+                role,
+                content: text,
+                sequence: blob.sequence,
+                rowid: blob.rowid,
+              }));
+            }
+          }
+          continue;
+        }
+
+        if (content.role === 'system') continue;
+
+        // Tool results
+        if (content.role === 'tool') {
+          const toolItems = Array.isArray(content.content) ? content.content : [];
+          for (const item of toolItems) {
+            if (item?.type !== 'tool-result') continue;
+            const toolCallId = item.toolCallId || content.id;
+            messages.push(createNormalizedMessage({
+              id: `${baseId}_tr`,
+              sessionId,
+              timestamp: ts,
+              provider: PROVIDER,
+              kind: 'tool_result',
+              toolId: toolCallId,
+              content: item.result || '',
+              isError: false,
+            }));
+          }
+          continue;
+        }
+
+        const role = content.role === 'user' ? 'user' : 'assistant';
+
+        if (Array.isArray(content.content)) {
+          for (let partIdx = 0; partIdx < content.content.length; partIdx++) {
+            const part = content.content[partIdx];
+
+            if (part?.type === 'text' && part?.text) {
+              messages.push(createNormalizedMessage({
+                id: `${baseId}_${partIdx}`,
+                sessionId,
+                timestamp: ts,
+                provider: PROVIDER,
+                kind: 'text',
+                role,
+                content: part.text,
+                sequence: blob.sequence,
+                rowid: blob.rowid,
+              }));
+            } else if (part?.type === 'reasoning' && part?.text) {
+              messages.push(createNormalizedMessage({
+                id: `${baseId}_${partIdx}`,
+                sessionId,
+                timestamp: ts,
+                provider: PROVIDER,
+                kind: 'thinking',
+                content: part.text,
+              }));
+            } else if (part?.type === 'tool-call' || part?.type === 'tool_use') {
+              const toolName = (part.toolName || part.name || 'Unknown Tool') === 'ApplyPatch'
+                ? 'Edit' : (part.toolName || part.name || 'Unknown Tool');
+              const toolId = part.toolCallId || part.id || `tool_${i}_${partIdx}`;
+              messages.push(createNormalizedMessage({
+                id: `${baseId}_${partIdx}`,
+                sessionId,
+                timestamp: ts,
+                provider: PROVIDER,
+                kind: 'tool_use',
+                toolName,
+                toolInput: part.args || part.input,
+                toolId,
+              }));
+              toolUseMap.set(toolId, messages[messages.length - 1]);
+            }
+          }
+        } else if (typeof content.content === 'string' && content.content.trim()) {
+          messages.push(createNormalizedMessage({
+            id: baseId,
+            sessionId,
+            timestamp: ts,
+            provider: PROVIDER,
+            kind: 'text',
+            role,
+            content: content.content,
+            sequence: blob.sequence,
+            rowid: blob.rowid,
+          }));
+        }
+      } catch (error) {
+        console.warn('Error normalizing cursor blob:', error);
+      }
+    }
+
+    // Attach tool results to tool_use messages
+    for (const msg of messages) {
+      if (msg.kind === 'tool_result' && msg.toolId && toolUseMap.has(msg.toolId)) {
+        const toolUse = toolUseMap.get(msg.toolId);
+        toolUse.toolResult = {
+          content: msg.content,
+          isError: msg.isError,
+        };
+      }
+    }
+
+    // Sort by sequence/rowid
+    messages.sort((a, b) => {
+      if (a.sequence !== undefined && b.sequence !== undefined) return a.sequence - b.sequence;
+      if (a.rowid !== undefined && b.rowid !== undefined) return a.rowid - b.rowid;
+      return new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime();
+    });
+
+    return messages;
+  },
+};

server/providers/gemini/adapter.js

@@ -0,0 +1,179 @@
+/**
+ * Gemini provider adapter.
+ *
+ * Normalizes Gemini CLI session history into NormalizedMessage format.
+ * @module adapters/gemini
+ */
+
+import sessionManager from '../../sessionManager.js';
+import { getGeminiCliSessionMessages } from '../../projects.js';
+import { createNormalizedMessage, generateMessageId } from '../types.js';
+
+const PROVIDER = 'gemini';
+
+/**
+ * Normalize a realtime NDJSON event from Gemini CLI into NormalizedMessage(s).
+ * Handles: message (delta/final), tool_use, tool_result, result, error.
+ * @param {object} raw - A parsed NDJSON event
+ * @param {string} sessionId
+ * @returns {import('../types.js').NormalizedMessage[]}
+ */
+export function normalizeMessage(raw, sessionId) {
+  const ts = raw.timestamp || new Date().toISOString();
+  const baseId = raw.uuid || generateMessageId('gemini');
+
+  if (raw.type === 'message' && raw.role === 'assistant') {
+    const content = raw.content || '';
+    const msgs = [];
+    if (content) {
+      msgs.push(createNormalizedMessage({ id: baseId, sessionId, timestamp: ts, provider: PROVIDER, kind: 'stream_delta', content }));
+    }
+    // If not a delta, also send stream_end
+    if (raw.delta !== true) {
+      msgs.push(createNormalizedMessage({ sessionId, timestamp: ts, provider: PROVIDER, kind: 'stream_end' }));
+    }
+    return msgs;
+  }
+
+  if (raw.type === 'tool_use') {
+    return [createNormalizedMessage({
+      id: baseId, sessionId, timestamp: ts, provider: PROVIDER,
+      kind: 'tool_use', toolName: raw.tool_name, toolInput: raw.parameters || {},
+      toolId: raw.tool_id || baseId,
+    })];
+  }
+
+  if (raw.type === 'tool_result') {
+    return [createNormalizedMessage({
+      id: baseId, sessionId, timestamp: ts, provider: PROVIDER,
+      kind: 'tool_result', toolId: raw.tool_id || '',
+      content: raw.output === undefined ? '' : String(raw.output),
+      isError: raw.status === 'error',
+    })];
+  }
+
+  if (raw.type === 'result') {
+    return [createNormalizedMessage({ sessionId, timestamp: ts, provider: PROVIDER, kind: 'stream_end' })];
+  }
+
+  if (raw.type === 'error') {
+    return [createNormalizedMessage({
+      id: baseId, sessionId, timestamp: ts, provider: PROVIDER,
+      kind: 'error', content: raw.error || raw.message || 'Unknown Gemini streaming error',
+    })];
+  }
+
+  return [];
+}
+
+/**
+ * @type {import('../types.js').ProviderAdapter}
+ */
+export const geminiAdapter = {
+  normalizeMessage,
+  /**
+   * Fetch session history for Gemini.
+   * First tries in-memory session manager, then falls back to CLI sessions on disk.
+   */
+  async fetchHistory(sessionId, opts = {}) {
+    let rawMessages;
+    try {
+      rawMessages = sessionManager.getSessionMessages(sessionId);
+
+      // Fallback to Gemini CLI sessions on disk
+      if (rawMessages.length === 0) {
+        rawMessages = await getGeminiCliSessionMessages(sessionId);
+      }
+    } catch (error) {
+      console.warn(`[GeminiAdapter] Failed to load session ${sessionId}:`, error.message);
+      return { messages: [], total: 0, hasMore: false, offset: 0, limit: null };
+    }
+
+    const normalized = [];
+    for (let i = 0; i < rawMessages.length; i++) {
+      const raw = rawMessages[i];
+      const ts = raw.timestamp || new Date().toISOString();
+      const baseId = raw.uuid || generateMessageId('gemini');
+
+      // sessionManager format: { type: 'message', message: { role, content }, timestamp }
+      // CLI format: { role: 'user'|'gemini'|'assistant', content: string|array }
+      const role = raw.message?.role || raw.role;
+      const content = raw.message?.content || raw.content;
+
+      if (!role || !content) continue;
+
+      const normalizedRole = (role === 'user') ? 'user' : 'assistant';
+
+      if (Array.isArray(content)) {
+        for (let partIdx = 0; partIdx < content.length; partIdx++) {
+          const part = content[partIdx];
+          if (part.type === 'text' && part.text) {
+            normalized.push(createNormalizedMessage({
+              id: `${baseId}_${partIdx}`,
+              sessionId,
+              timestamp: ts,
+              provider: PROVIDER,
+              kind: 'text',
+              role: normalizedRole,
+              content: part.text,
+            }));
+          } else if (part.type === 'tool_use') {
+            normalized.push(createNormalizedMessage({
+              id: `${baseId}_${partIdx}`,
+              sessionId,
+              timestamp: ts,
+              provider: PROVIDER,
+              kind: 'tool_use',
+              toolName: part.name,
+              toolInput: part.input,
+              toolId: part.id || generateMessageId('gemini_tool'),
+            }));
+          } else if (part.type === 'tool_result') {
+            normalized.push(createNormalizedMessage({
+              id: `${baseId}_${partIdx}`,
+              sessionId,
+              timestamp: ts,
+              provider: PROVIDER,
+              kind: 'tool_result',
+              toolId: part.tool_use_id || '',
+              content: part.content === undefined ? '' : String(part.content),
+              isError: Boolean(part.is_error),
+            }));
+          }
+        }
+      } else if (typeof content === 'string' && content.trim()) {
+        normalized.push(createNormalizedMessage({
+          id: baseId,
+          sessionId,
+          timestamp: ts,
+          provider: PROVIDER,
+          kind: 'text',
+          role: normalizedRole,
+          content,
+        }));
+      }
+    }
+
+    // Attach tool results to tool_use messages
+    const toolResultMap = new Map();
+    for (const msg of normalized) {
+      if (msg.kind === 'tool_result' && msg.toolId) {
+        toolResultMap.set(msg.toolId, msg);
+      }
+    }
+    for (const msg of normalized) {
+      if (msg.kind === 'tool_use' && msg.toolId && toolResultMap.has(msg.toolId)) {
+        const tr = toolResultMap.get(msg.toolId);
+        msg.toolResult = { content: tr.content, isError: tr.isError };
+      }
+    }
+
+    return {
+      messages: normalized,
+      total: normalized.length,
+      hasMore: false,
+      offset: 0,
+      limit: null,
+    };
+  },
+};

server/providers/registry.js

@@ -0,0 +1,44 @@
+/**
+ * Provider Registry
+ *
+ * Centralizes provider adapter lookup. All code that needs a provider adapter
+ * should go through this registry instead of importing individual adapters directly.
+ *
+ * @module providers/registry
+ */
+
+import { claudeAdapter } from './claude/adapter.js';
+import { cursorAdapter } from './cursor/adapter.js';
+import { codexAdapter } from './codex/adapter.js';
+import { geminiAdapter } from './gemini/adapter.js';
+
+/**
+ * @typedef {import('./types.js').ProviderAdapter} ProviderAdapter
+ * @typedef {import('./types.js').SessionProvider} SessionProvider
+ */
+
+/** @type {Map<string, ProviderAdapter>} */
+const providers = new Map();
+
+// Register built-in providers
+providers.set('claude', claudeAdapter);
+providers.set('cursor', cursorAdapter);
+providers.set('codex', codexAdapter);
+providers.set('gemini', geminiAdapter);
+
+/**
+ * Get a provider adapter by name.
+ * @param {string} name - Provider name (e.g., 'claude', 'cursor', 'codex', 'gemini')
+ * @returns {ProviderAdapter | undefined}
+ */
+export function getProvider(name) {
+  return providers.get(name);
+}
+
+/**
+ * Get all registered provider names.
+ * @returns {string[]}
+ */
+export function getAllProviders() {
+  return Array.from(providers.keys());
+}

server/providers/types.js

@@ -0,0 +1,118 @@
+/**
+ * Provider Types & Interface
+ *
+ * Defines the normalized message format and the provider adapter interface.
+ * All providers normalize their native formats into NormalizedMessage
+ * before sending over REST or WebSocket.
+ *
+ * @module providers/types
+ */
+
+// ─── Session Provider ────────────────────────────────────────────────────────
+
+/**
+ * @typedef {'claude' | 'cursor' | 'codex' | 'gemini'} SessionProvider
+ */
+
+// ─── Message Kind ────────────────────────────────────────────────────────────
+
+/**
+ * @typedef {'text' | 'tool_use' | 'tool_result' | 'thinking' | 'stream_delta' | 'stream_end'
+ *   | 'error' | 'complete' | 'status' | 'permission_request' | 'permission_cancelled'
+ *   | 'session_created' | 'interactive_prompt' | 'task_notification'} MessageKind
+ */
+
+// ─── NormalizedMessage ───────────────────────────────────────────────────────
+
+/**
+ * @typedef {Object} NormalizedMessage
+ * @property {string} id - Unique message id (for dedup between server + realtime)
+ * @property {string} sessionId
+ * @property {string} timestamp - ISO 8601
+ * @property {SessionProvider} provider
+ * @property {MessageKind} kind
+ *
+ * Additional fields depending on kind:
+ * - text:                 role ('user'|'assistant'), content, images?
+ * - tool_use:             toolName, toolInput, toolId
+ * - tool_result:          toolId, content, isError
+ * - thinking:             content
+ * - stream_delta:         content
+ * - stream_end:           (no extra fields)
+ * - error:                content
+ * - complete:             (no extra fields)
+ * - status:               text, canInterrupt?
+ * - permission_request:   requestId, toolName, input, context?
+ * - permission_cancelled: requestId
+ * - session_created:      newSessionId
+ * - interactive_prompt:   content
+ * - task_notification:    status, summary
+ */
+
+// ─── Fetch History ───────────────────────────────────────────────────────────
+
+/**
+ * @typedef {Object} FetchHistoryOptions
+ * @property {string} [projectName] - Project name (required for Claude)
+ * @property {string} [projectPath] - Absolute project path (required for Cursor cwdId hash)
+ * @property {number|null} [limit] - Page size (null = all messages)
+ * @property {number} [offset] - Pagination offset (default: 0)
+ */
+
+/**
+ * @typedef {Object} FetchHistoryResult
+ * @property {NormalizedMessage[]} messages - Normalized messages
+ * @property {number} total - Total number of messages in the session
+ * @property {boolean} hasMore - Whether more messages exist before the current page
+ * @property {number} offset - Current offset
+ * @property {number|null} limit - Page size used
+ */
+
+// ─── Provider Adapter Interface ──────────────────────────────────────────────
+
+/**
+ * Every provider adapter MUST implement this interface.
+ *
+ * @typedef {Object} ProviderAdapter
+ *
+ * @property {(sessionId: string, opts?: FetchHistoryOptions) => Promise<FetchHistoryResult>} fetchHistory
+ *   Read persisted session messages from disk/database and return them as NormalizedMessage[].
+ *   The backend calls this from the unified GET /api/sessions/:id/messages endpoint.
+ *
+ *   Provider implementations:
+ *   - Claude: reads ~/.claude/projects/{projectName}/*.jsonl
+ *   - Cursor: reads from SQLite store.db (via normalizeCursorBlobs helper)
+ *   - Codex:  reads ~/.codex/sessions/*.jsonl
+ *   - Gemini: reads from in-memory sessionManager or ~/.gemini/tmp/ JSON files
+ *
+ * @property {(raw: any, sessionId: string) => NormalizedMessage[]} normalizeMessage
+ *   Normalize a provider-specific event (JSONL entry or live SDK event) into NormalizedMessage[].
+ *   Used by provider files to convert both history and realtime events.
+ */
+
+// ─── Runtime Helpers ─────────────────────────────────────────────────────────
+
+/**
+ * Generate a unique message ID.
+ * Uses crypto.randomUUID() to avoid collisions across server restarts and workers.
+ * @param {string} [prefix='msg'] - Optional prefix
+ * @returns {string}
+ */
+export function generateMessageId(prefix = 'msg') {
+  return `${prefix}_${crypto.randomUUID()}`;
+}
+
+/**
+ * Create a NormalizedMessage with common fields pre-filled.
+ * @param {Partial<NormalizedMessage> & {kind: MessageKind, provider: SessionProvider}} fields
+ * @returns {NormalizedMessage}
+ */
+export function createNormalizedMessage(fields) {
+  return {
+    ...fields,
+    id: fields.id || generateMessageId(fields.kind),
+    sessionId: fields.sessionId || '',
+    timestamp: fields.timestamp || new Date().toISOString(),
+    provider: fields.provider,
+  };
+}

server/providers/utils.js

@@ -0,0 +1,29 @@
+/**
+ * Shared provider utilities.
+ *
+ * @module providers/utils
+ */
+
+/**
+ * Prefixes that indicate internal/system content which should be hidden from the UI.
+ * @type {readonly string[]}
+ */
+export const INTERNAL_CONTENT_PREFIXES = Object.freeze([
+  '<command-name>',
+  '<command-message>',
+  '<command-args>',
+  '<local-command-stdout>',
+  '<system-reminder>',
+  'Caveat:',
+  'This session is being continued from a previous',
+  '[Request interrupted',
+]);
+
+/**
+ * Check if user text content is internal/system that should be skipped.
+ * @param {string} content
+ * @returns {boolean}
+ */
+export function isInternalContent(content) {
+  return INTERNAL_CONTENT_PREFIXES.some(prefix => content.startsWith(prefix));
+}

server/routes/agent.js

@@ -9,6 +9,7 @@ import { addProjectManually } from '../projects.js';
 import { queryClaudeSDK } from '../claude-sdk.js';
 import { spawnCursor } from '../cursor-cli.js';
 import { queryCodex } from '../openai-codex.js';
+import { spawnGemini } from '../gemini-cli.js';
 import { Octokit } from '@octokit/rest';
 import { CLAUDE_MODELS, CURSOR_MODELS, CODEX_MODELS } from '../../shared/modelConstants.js';
 import { IS_PLATFORM } from '../constants/config.js';
@@ -449,9 +450,10 @@ async function cleanupProject(projectPath, sessionId = null) {
  * SSE Stream Writer - Adapts SDK/CLI output to Server-Sent Events
  */
 class SSEStreamWriter {
-  constructor(res) {
+  constructor(res, userId = null) {
     this.res = res;
     this.sessionId = null;
+    this.userId = userId;
     this.isSSEStreamWriter = true;  // Marker for transport detection
   }
 
@@ -473,6 +475,7 @@ class SSEStreamWriter {
 
   setSessionId(sessionId) {
     this.sessionId = sessionId;
+    this.send({ type: 'session-id', sessionId });
   }
 
   getSessionId() {
@@ -484,9 +487,10 @@ class SSEStreamWriter {
  * Non-streaming response collector
  */
 class ResponseCollector {
-  constructor() {
+  constructor(userId = null) {
     this.messages = [];
     this.sessionId = null;
+    this.userId = userId;
   }
 
   send(data) {
@@ -542,7 +546,12 @@ class ResponseCollector {
           const parsed = JSON.parse(msg);
           // Only include claude-response messages with assistant type
           if (parsed.type === 'claude-response' && parsed.data && parsed.data.type === 'assistant') {
-            assistantMessages.push(parsed.data);
+            const assistantMessage = { ...parsed.data };
+            if (assistantMessage.message?.usage) {
+              assistantMessage.message = { ...assistantMessage.message };
+              delete assistantMessage.message.usage;
+            }
+            assistantMessages.push(assistantMessage);
           }
         } catch (e) {
           // Not JSON, skip
@@ -552,49 +561,6 @@ class ResponseCollector {
 
     return assistantMessages;
   }
-
-  /**
-   * Calculate total tokens from all messages
-   */
-  getTotalTokens() {
-    let totalInput = 0;
-    let totalOutput = 0;
-    let totalCacheRead = 0;
-    let totalCacheCreation = 0;
-
-    for (const msg of this.messages) {
-      let data = msg;
-
-      // Parse if string
-      if (typeof msg === 'string') {
-        try {
-          data = JSON.parse(msg);
-        } catch (e) {
-          continue;
-        }
-      }
-
-      // Extract usage from claude-response messages
-      if (data && data.type === 'claude-response' && data.data) {
-        const msgData = data.data;
-        if (msgData.message && msgData.message.usage) {
-          const usage = msgData.message.usage;
-          totalInput += usage.input_tokens || 0;
-          totalOutput += usage.output_tokens || 0;
-          totalCacheRead += usage.cache_read_input_tokens || 0;
-          totalCacheCreation += usage.cache_creation_input_tokens || 0;
-        }
-      }
-    }
-
-    return {
-      inputTokens: totalInput,
-      outputTokens: totalOutput,
-      cacheReadTokens: totalCacheRead,
-      cacheCreationTokens: totalCacheCreation,
-      totalTokens: totalInput + totalOutput + totalCacheRead + totalCacheCreation
-    };
-  }
 }
 
 // ===============================
@@ -629,7 +595,7 @@ class ResponseCollector {
  *                          - Source for auto-generated branch names (if createBranch=true and no branchName)
  *                          - Fallback for PR title if no commits are made
  *
- * @param {string} provider - (Optional) AI provider to use. Options: 'claude' | 'cursor'
+ * @param {string} provider - (Optional) AI provider to use. Options: 'claude' | 'cursor' | 'codex' | 'gemini'
  *                           Default: 'claude'
  *
  * @param {boolean} stream - (Optional) Enable Server-Sent Events (SSE) streaming for real-time updates.
@@ -747,7 +713,7 @@ class ResponseCollector {
  * Input Validations (400 Bad Request):
  *   - Either githubUrl OR projectPath must be provided (not neither)
  *   - message must be non-empty string
- *   - provider must be 'claude' or 'cursor'
+ *   - provider must be 'claude', 'cursor', 'codex', or 'gemini'
  *   - createBranch/createPR requires githubUrl OR projectPath (not neither)
  *   - branchName must pass Git naming rules (if provided)
  *
@@ -785,13 +751,6 @@ class ResponseCollector {
  *     success: true,
  *     sessionId: "session-123",
  *     messages: [...],        // Assistant messages only (filtered)
- *     tokens: {
- *       inputTokens: 150,
- *       outputTokens: 50,
- *       cacheReadTokens: 0,
- *       cacheCreationTokens: 0,
- *       totalTokens: 200
- *     },
  *     projectPath: "/path/to/project",
  *     branch: {               // Only if createBranch=true
  *       name: "feature/xyz",
@@ -836,7 +795,7 @@ class ResponseCollector {
  *   }
  */
 router.post('/', validateExternalApiKey, async (req, res) => {
-  const { githubUrl, projectPath, message, provider = 'claude', model, githubToken, branchName } = req.body;
+  const { githubUrl, projectPath, message, provider = 'claude', model, githubToken, branchName, sessionId } = req.body;
 
   // Parse stream and cleanup as booleans (handle string "true"/"false" from curl)
   const stream = req.body.stream === undefined ? true : (req.body.stream === true || req.body.stream === 'true');
@@ -855,8 +814,8 @@ router.post('/', validateExternalApiKey, async (req, res) => {
     return res.status(400).json({ error: 'message is required' });
   }
 
-  if (!['claude', 'cursor', 'codex'].includes(provider)) {
-    return res.status(400).json({ error: 'provider must be "claude", "cursor", or "codex"' });
+  if (!['claude', 'cursor', 'codex', 'gemini'].includes(provider)) {
+    return res.status(400).json({ error: 'provider must be "claude", "cursor", "codex", or "gemini"' });
   }
 
   // Validate GitHub branch/PR creation requirements
@@ -919,7 +878,7 @@ router.post('/', validateExternalApiKey, async (req, res) => {
       res.setHeader('Connection', 'keep-alive');
       res.setHeader('X-Accel-Buffering', 'no'); // Disable nginx buffering
 
-      writer = new SSEStreamWriter(res);
+      writer = new SSEStreamWriter(res, req.user.id);
 
       // Send initial status
       writer.send({
@@ -929,7 +888,7 @@ router.post('/', validateExternalApiKey, async (req, res) => {
       });
     } else {
       // Non-streaming mode: collect messages
-      writer = new ResponseCollector();
+      writer = new ResponseCollector(req.user.id);
 
       // Collect initial status message
       writer.send({
@@ -946,7 +905,7 @@ router.post('/', validateExternalApiKey, async (req, res) => {
       await queryClaudeSDK(message.trim(), {
         projectPath: finalProjectPath,
         cwd: finalProjectPath,
-        sessionId: null, // New session
+        sessionId: sessionId || null,
         model: model,
         permissionMode: 'bypassPermissions' // Bypass all permissions for API calls
       }, writer);
@@ -957,7 +916,7 @@ router.post('/', validateExternalApiKey, async (req, res) => {
       await spawnCursor(message.trim(), {
         projectPath: finalProjectPath,
         cwd: finalProjectPath,
-        sessionId: null, // New session
+        sessionId: sessionId || null,
         model: model || undefined,
         skipPermissions: true // Bypass permissions for Cursor
       }, writer);
@@ -967,10 +926,20 @@ router.post('/', validateExternalApiKey, async (req, res) => {
       await queryCodex(message.trim(), {
         projectPath: finalProjectPath,
         cwd: finalProjectPath,
-        sessionId: null,
+        sessionId: sessionId || null,
         model: model || CODEX_MODELS.DEFAULT,
         permissionMode: 'bypassPermissions'
       }, writer);
+    } else if (provider === 'gemini') {
+      console.log('✨ Starting Gemini CLI session');
+
+      await spawnGemini(message.trim(), {
+        projectPath: finalProjectPath,
+        cwd: finalProjectPath,
+        sessionId: sessionId || null,
+        model: model,
+        skipPermissions: true // CLI mode bypasses permissions
+      }, writer);
     }
 
     // Handle GitHub branch and PR creation after successful agent completion
@@ -1111,7 +1080,7 @@ router.post('/', validateExternalApiKey, async (req, res) => {
           } else {
             prBody += `Agent task: ${message}`;
           }
-          prBody += '\n\n---\n*This pull request was automatically created by Claude Code UI Agent.*';
+          prBody += '\n\n---\n*This pull request was automatically created by CloudCLI.ai Agent.*';
 
           console.log(`📝 PR Title: ${prTitle}`);
 
@@ -1159,15 +1128,13 @@ router.post('/', validateExternalApiKey, async (req, res) => {
       // Streaming mode: end the SSE stream
       writer.end();
     } else {
-      // Non-streaming mode: send filtered messages and token summary as JSON
+      // Non-streaming mode: send filtered messages as JSON
       const assistantMessages = writer.getAssistantMessages();
-      const tokenSummary = writer.getTotalTokens();
 
       const response = {
         success: true,
         sessionId: writer.getSessionId(),
         messages: assistantMessages,
-        tokens: tokenSummary,
         projectPath: finalProjectPath
       };
 
@@ -1208,7 +1175,7 @@ router.post('/', validateExternalApiKey, async (req, res) => {
         res.setHeader('Cache-Control', 'no-cache');
         res.setHeader('Connection', 'keep-alive');
         res.setHeader('X-Accel-Buffering', 'no');
-        writer = new SSEStreamWriter(res);
+        writer = new SSEStreamWriter(res, req.user.id);
       }
 
       if (!res.writableEnded) {

server/routes/cli-auth.js

@@ -14,13 +14,14 @@ router.get('/claude/status', async (req, res) => {
       return res.json({
         authenticated: true,
         email: credentialsResult.email || 'Authenticated',
-        method: 'credentials_file'
+        method: credentialsResult.method  // 'api_key' or 'credentials_file'
       });
     }
 
     return res.json({
       authenticated: false,
       email: null,
+      method: null,
       error: credentialsResult.error || 'Not authenticated'
     });
 
@@ -29,6 +30,7 @@ router.get('/claude/status', async (req, res) => {
     res.status(500).json({
       authenticated: false,
       email: null,
+      method: null,
       error: error.message
     });
   }
@@ -74,7 +76,99 @@ router.get('/codex/status', async (req, res) => {
   }
 });
 
+router.get('/gemini/status', async (req, res) => {
+  try {
+    const result = await checkGeminiCredentials();
+
+    res.json({
+      authenticated: result.authenticated,
+      email: result.email,
+      error: result.error
+    });
+
+  } catch (error) {
+    console.error('Error checking Gemini auth status:', error);
+    res.status(500).json({
+      authenticated: false,
+      email: null,
+      error: error.message
+    });
+  }
+});
+
+async function loadClaudeSettingsEnv() {
+  try {
+    const settingsPath = path.join(os.homedir(), '.claude', 'settings.json');
+    const content = await fs.readFile(settingsPath, 'utf8');
+    const settings = JSON.parse(content);
+
+    if (settings?.env && typeof settings.env === 'object') {
+      return settings.env;
+    }
+  } catch (error) {
+    // Ignore missing or malformed settings and fall back to other auth sources.
+  }
+
+  return {};
+}
+
+/**
+ * Checks Claude authentication credentials using two methods with priority order:
+ *
+ * Priority 1: ANTHROPIC_API_KEY environment variable
+ * Priority 1b: ~/.claude/settings.json env values
+ * Priority 2: ~/.claude/.credentials.json OAuth tokens
+ *
+ * The Claude Agent SDK prioritizes environment variables over authenticated subscriptions.
+ * This matching behavior ensures consistency with how the SDK authenticates.
+ *
+ * References:
+ * - https://support.claude.com/en/articles/12304248-managing-api-key-environment-variables-in-claude-code
+ *   "Claude Code prioritizes environment variable API keys over authenticated subscriptions"
+ * - https://platform.claude.com/docs/en/agent-sdk/overview
+ *   SDK authentication documentation
+ *
+ * @returns {Promise<Object>} Authentication status with { authenticated, email, method }
+ *   - authenticated: boolean indicating if valid credentials exist
+ *   - email: user email or auth method identifier
+ *   - method: 'api_key' for env var, 'credentials_file' for OAuth tokens
+ */
 async function checkClaudeCredentials() {
+  // Priority 1: Check for ANTHROPIC_API_KEY environment variable
+  // The SDK checks this first and uses it if present, even if OAuth tokens exist.
+  // When set, API calls are charged via pay-as-you-go rates instead of subscription.
+  if (process.env.ANTHROPIC_API_KEY && process.env.ANTHROPIC_API_KEY.trim()) {
+    return {
+      authenticated: true,
+      email: 'API Key Auth',
+      method: 'api_key'
+    };
+  }
+
+  // Priority 1b: Check ~/.claude/settings.json env values.
+  // Claude Code can read proxy/auth values from settings.json even when the
+  // CloudCLI server process itself was not started with those env vars exported.
+  const settingsEnv = await loadClaudeSettingsEnv();
+
+  if (typeof settingsEnv.ANTHROPIC_API_KEY === 'string' && settingsEnv.ANTHROPIC_API_KEY.trim()) {
+    return {
+      authenticated: true,
+      email: 'API Key Auth',
+      method: 'api_key'
+    };
+  }
+
+  if (typeof settingsEnv.ANTHROPIC_AUTH_TOKEN === 'string' && settingsEnv.ANTHROPIC_AUTH_TOKEN.trim()) {
+    return {
+      authenticated: true,
+      email: 'Configured via settings.json',
+      method: 'api_key'
+    };
+  }
+
+  // Priority 2: Check ~/.claude/.credentials.json for OAuth tokens
+  // This is the standard authentication method used by Claude CLI after running
+  // 'claude /login' or 'claude setup-token' commands.
   try {
     const credPath = path.join(os.homedir(), '.claude', '.credentials.json');
     const content = await fs.readFile(credPath, 'utf8');
@@ -87,19 +181,22 @@ async function checkClaudeCredentials() {
       if (!isExpired) {
         return {
           authenticated: true,
-          email: creds.email || creds.user || null
+          email: creds.email || creds.user || null,
+          method: 'credentials_file'
         };
       }
     }
 
     return {
       authenticated: false,
-      email: null
+      email: null,
+      method: null
     };
   } catch (error) {
     return {
       authenticated: false,
-      email: null
+      email: null,
+      method: null
     };
   }
 }
@@ -260,4 +357,78 @@ async function checkCodexCredentials() {
   }
 }
 
+async function checkGeminiCredentials() {
+  if (process.env.GEMINI_API_KEY && process.env.GEMINI_API_KEY.trim()) {
+    return {
+      authenticated: true,
+      email: 'API Key Auth'
+    };
+  }
+
+  try {
+    const credsPath = path.join(os.homedir(), '.gemini', 'oauth_creds.json');
+    const content = await fs.readFile(credsPath, 'utf8');
+    const creds = JSON.parse(content);
+
+    if (creds.access_token) {
+      let email = 'OAuth Session';
+
+      try {
+        // Validate token against Google API
+        const tokenRes = await fetch(`https://oauth2.googleapis.com/tokeninfo?access_token=${creds.access_token}`);
+        if (tokenRes.ok) {
+          const tokenInfo = await tokenRes.json();
+          if (tokenInfo.email) {
+            email = tokenInfo.email;
+          }
+        } else if (!creds.refresh_token) {
+          // Token invalid and no refresh token available
+          return {
+            authenticated: false,
+            email: null,
+            error: 'Access token invalid and no refresh token found'
+          };
+        } else {
+          // Token might be expired but we have a refresh token, so CLI will refresh it
+          try {
+            const accPath = path.join(os.homedir(), '.gemini', 'google_accounts.json');
+            const accContent = await fs.readFile(accPath, 'utf8');
+            const accounts = JSON.parse(accContent);
+            if (accounts.active) {
+              email = accounts.active;
+            }
+          } catch (e) { }
+        }
+      } catch (e) {
+        // Network error, fallback to checking local accounts file
+        try {
+          const accPath = path.join(os.homedir(), '.gemini', 'google_accounts.json');
+          const accContent = await fs.readFile(accPath, 'utf8');
+          const accounts = JSON.parse(accContent);
+          if (accounts.active) {
+            email = accounts.active;
+          }
+        } catch (err) { }
+      }
+
+      return {
+        authenticated: true,
+        email: email
+      };
+    }
+
+    return {
+      authenticated: false,
+      email: null,
+      error: 'No valid tokens found in oauth_creds'
+    };
+  } catch (error) {
+    return {
+      authenticated: false,
+      email: null,
+      error: 'Gemini CLI not configured'
+    };
+  }
+}
+
 export default router;

server/routes/codex.js

@@ -4,7 +4,8 @@ import { promises as fs } from 'fs';
 import path from 'path';
 import os from 'os';
 import TOML from '@iarna/toml';
-import { getCodexSessions, getCodexSessionMessages, deleteCodexSession } from '../projects.js';
+import { getCodexSessions, deleteCodexSession } from '../projects.js';
+import { applyCustomSessionNames, sessionNamesDb } from '../database/db.js';
 
 const router = express.Router();
 
@@ -59,6 +60,7 @@ router.get('/sessions', async (req, res) => {
     }
 
     const sessions = await getCodexSessions(projectPath);
+    applyCustomSessionNames(sessions, 'codex');
     res.json({ success: true, sessions });
   } catch (error) {
     console.error('Error fetching Codex sessions:', error);
@@ -66,28 +68,11 @@ router.get('/sessions', async (req, res) => {
   }
 });
 
-router.get('/sessions/:sessionId/messages', async (req, res) => {
-  try {
-    const { sessionId } = req.params;
-    const { limit, offset } = req.query;
-
-    const result = await getCodexSessionMessages(
-      sessionId,
-      limit ? parseInt(limit, 10) : null,
-      offset ? parseInt(offset, 10) : 0
-    );
-
-    res.json({ success: true, ...result });
-  } catch (error) {
-    console.error('Error fetching Codex session messages:', error);
-    res.status(500).json({ success: false, error: error.message });
-  }
-});
-
 router.delete('/sessions/:sessionId', async (req, res) => {
   try {
     const { sessionId } = req.params;
     await deleteCodexSession(sessionId);
+    sessionNamesDb.deleteName(sessionId, 'codex');
     res.json({ success: true });
   } catch (error) {
     console.error(`Error deleting Codex session ${req.params.sessionId}:`, error);

server/routes/commands.js

@@ -3,8 +3,8 @@ import { promises as fs } from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import os from 'os';
-import matter from 'gray-matter';
 import { CLAUDE_MODELS, CURSOR_MODELS, CODEX_MODELS } from '../../shared/modelConstants.js';
+import { parseFrontmatter } from '../utils/frontmatter.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -38,7 +38,7 @@ async function scanCommandsDirectory(dir, baseDir, namespace) {
         // Parse markdown file for metadata
         try {
           const content = await fs.readFile(fullPath, 'utf8');
-          const { data: frontmatter, content: commandContent } = matter(content);
+          const { data: frontmatter, content: commandContent } = parseFrontmatter(content);
 
           // Calculate relative path from baseDir for command name
           const relativePath = path.relative(baseDir, fullPath);
@@ -97,12 +97,6 @@ const builtInCommands = [
     namespace: 'builtin',
     metadata: { type: 'builtin' }
   },
-  {
-    name: '/cost',
-    description: 'Display token usage and cost information',
-    namespace: 'builtin',
-    metadata: { type: 'builtin' }
-  },
   {
     name: '/memory',
     description: 'Open CLAUDE.md memory file for editing',
@@ -209,86 +203,6 @@ Custom commands can be created in:
     };
   },
 
-  '/cost': async (args, context) => {
-    const tokenUsage = context?.tokenUsage || {};
-    const provider = context?.provider || 'claude';
-    const model =
-      context?.model ||
-      (provider === 'cursor'
-        ? CURSOR_MODELS.DEFAULT
-        : provider === 'codex'
-          ? CODEX_MODELS.DEFAULT
-          : CLAUDE_MODELS.DEFAULT);
-
-    const used = Number(tokenUsage.used ?? tokenUsage.totalUsed ?? tokenUsage.total_tokens ?? 0) || 0;
-    const total =
-      Number(
-        tokenUsage.total ??
-          tokenUsage.contextWindow ??
-          parseInt(process.env.CONTEXT_WINDOW || '160000', 10),
-      ) || 160000;
-    const percentage = total > 0 ? Number(((used / total) * 100).toFixed(1)) : 0;
-
-    const inputTokensRaw =
-      Number(
-        tokenUsage.inputTokens ??
-          tokenUsage.input ??
-          tokenUsage.cumulativeInputTokens ??
-          tokenUsage.promptTokens ??
-          0,
-      ) || 0;
-    const outputTokens =
-      Number(
-        tokenUsage.outputTokens ??
-          tokenUsage.output ??
-          tokenUsage.cumulativeOutputTokens ??
-          tokenUsage.completionTokens ??
-          0,
-      ) || 0;
-    const cacheTokens =
-      Number(
-        tokenUsage.cacheReadTokens ??
-          tokenUsage.cacheCreationTokens ??
-          tokenUsage.cacheTokens ??
-          tokenUsage.cachedTokens ??
-          0,
-      ) || 0;
-
-    // If we only have total used tokens, treat them as input for display/estimation.
-    const inputTokens =
-      inputTokensRaw > 0 || outputTokens > 0 || cacheTokens > 0 ? inputTokensRaw + cacheTokens : used;
-
-    // Rough default rates by provider (USD / 1M tokens).
-    const pricingByProvider = {
-      claude: { input: 3, output: 15 },
-      cursor: { input: 3, output: 15 },
-      codex: { input: 1.5, output: 6 },
-    };
-    const rates = pricingByProvider[provider] || pricingByProvider.claude;
-
-    const inputCost = (inputTokens / 1_000_000) * rates.input;
-    const outputCost = (outputTokens / 1_000_000) * rates.output;
-    const totalCost = inputCost + outputCost;
-
-    return {
-      type: 'builtin',
-      action: 'cost',
-      data: {
-        tokenUsage: {
-          used,
-          total,
-          percentage,
-        },
-        cost: {
-          input: inputCost.toFixed(4),
-          output: outputCost.toFixed(4),
-          total: totalCost.toFixed(4),
-        },
-        model,
-      },
-    };
-  },
-
   '/status': async (args, context) => {
     // Read version from package.json
     const packageJsonPath = path.join(path.dirname(__dirname), '..', 'package.json');
@@ -475,7 +389,7 @@ router.post('/load', async (req, res) => {
 
     // Read and parse the command file
     const content = await fs.readFile(commandPath, 'utf8');
-    const { data: metadata, content: commandContent } = matter(content);
+    const { data: metadata, content: commandContent } = parseFrontmatter(content);
 
     res.json({
       path: commandPath,
@@ -560,7 +474,7 @@ router.post('/execute', async (req, res) => {
       }
     }
     const content = await fs.readFile(commandPath, 'utf8');
-    const { data: metadata, content: commandContent } = matter(content);
+    const { data: metadata, content: commandContent } = parseFrontmatter(content);
     // Basic argument replacement (will be enhanced in command parser utility)
     let processedContent = commandContent;
 

server/routes/cursor.js

@@ -7,6 +7,7 @@ import sqlite3 from 'sqlite3';
 import { open } from 'sqlite';
 import crypto from 'crypto';
 import { CURSOR_MODELS } from '../../shared/modelConstants.js';
+import { applyCustomSessionNames } from '../database/db.js';
 
 const router = express.Router();
 
@@ -560,8 +561,10 @@ router.get('/sessions', async (req, res) => {
       return new Date(b.createdAt) - new Date(a.createdAt);
     });
     
-    res.json({ 
-      success: true, 
+    applyCustomSessionNames(sessions, 'cursor');
+
+    res.json({
+      success: true,
       sessions: sessions,
       cwdId: cwdId,
       path: cursorChatsPath

server/routes/gemini.js

@@ -0,0 +1,24 @@
+import express from 'express';
+import sessionManager from '../sessionManager.js';
+import { sessionNamesDb } from '../database/db.js';
+
+const router = express.Router();
+
+router.delete('/sessions/:sessionId', async (req, res) => {
+    try {
+        const { sessionId } = req.params;
+
+        if (!sessionId || typeof sessionId !== 'string' || !/^[a-zA-Z0-9_.-]{1,100}$/.test(sessionId)) {
+            return res.status(400).json({ success: false, error: 'Invalid session ID format' });
+        }
+
+        await sessionManager.deleteSession(sessionId);
+        sessionNamesDb.deleteName(sessionId, 'gemini');
+        res.json({ success: true });
+    } catch (error) {
+        console.error(`Error deleting Gemini session ${req.params.sessionId}:`, error);
+        res.status(500).json({ success: false, error: error.message });
+    }
+});
+
+export default router;

server/routes/git.js

@@ -1,6 +1,5 @@
 import express from 'express';
-import { exec, spawn } from 'child_process';
-import { promisify } from 'util';
+import { spawn } from 'child_process';
 import path from 'path';
 import { promises as fs } from 'fs';
 import { extractProjectDirectory } from '../projects.js';
@@ -8,7 +7,7 @@ import { queryClaudeSDK } from '../claude-sdk.js';
 import { spawnCursor } from '../cursor-cli.js';
 
 const router = express.Router();
-const execAsync = promisify(exec);
+const COMMIT_DIFF_CHARACTER_LIMIT = 500_000;
 
 function spawnAsync(command, args, options = {}) {
   return new Promise((resolve, reject) => {
@@ -47,15 +46,71 @@ function spawnAsync(command, args, options = {}) {
   });
 }
 
+// Input validation helpers (defense-in-depth)
+function validateCommitRef(commit) {
+  // Allow hex hashes, HEAD, HEAD~N, HEAD^N, tag names, branch names
+  if (!/^[a-zA-Z0-9._~^{}@\/-]+$/.test(commit)) {
+    throw new Error('Invalid commit reference');
+  }
+  return commit;
+}
+
+function validateBranchName(branch) {
+  if (!/^[a-zA-Z0-9._\/-]+$/.test(branch)) {
+    throw new Error('Invalid branch name');
+  }
+  return branch;
+}
+
+function validateFilePath(file, projectPath) {
+  if (!file || file.includes('\0')) {
+    throw new Error('Invalid file path');
+  }
+  // Prevent path traversal: resolve the file relative to the project root
+  // and ensure the result stays within the project directory
+  if (projectPath) {
+    const resolved = path.resolve(projectPath, file);
+    const normalizedRoot = path.resolve(projectPath) + path.sep;
+    if (!resolved.startsWith(normalizedRoot) && resolved !== path.resolve(projectPath)) {
+      throw new Error('Invalid file path: path traversal detected');
+    }
+  }
+  return file;
+}
+
+function validateRemoteName(remote) {
+  if (!/^[a-zA-Z0-9._-]+$/.test(remote)) {
+    throw new Error('Invalid remote name');
+  }
+  return remote;
+}
+
+function validateProjectPath(projectPath) {
+  if (!projectPath || projectPath.includes('\0')) {
+    throw new Error('Invalid project path');
+  }
+  const resolved = path.resolve(projectPath);
+  // Must be an absolute path after resolution
+  if (!path.isAbsolute(resolved)) {
+    throw new Error('Invalid project path: must be absolute');
+  }
+  // Block obviously dangerous paths
+  if (resolved === '/' || resolved === path.sep) {
+    throw new Error('Invalid project path: root directory not allowed');
+  }
+  return resolved;
+}
+
 // Helper function to get the actual project path from the encoded project name
 async function getActualProjectPath(projectName) {
+  let projectPath;
   try {
-    return await extractProjectDirectory(projectName);
+    projectPath = await extractProjectDirectory(projectName);
   } catch (error) {
     console.error(`Error extracting project directory for ${projectName}:`, error);
-    // Fallback to the old method
-    return projectName.replace(/-/g, '/');
+    throw new Error(`Unable to resolve project path for "${projectName}"`);
   }
+  return validateProjectPath(projectPath);
 }
 
 // Helper function to strip git diff headers
@@ -98,19 +153,140 @@ async function validateGitRepository(projectPath) {
 
   try {
     // Allow any directory that is inside a work tree (repo root or nested folder).
-    const { stdout: insideWorkTreeOutput } = await execAsync('git rev-parse --is-inside-work-tree', { cwd: projectPath });
+    const { stdout: insideWorkTreeOutput } = await spawnAsync('git', ['rev-parse', '--is-inside-work-tree'], { cwd: projectPath });
     const isInsideWorkTree = insideWorkTreeOutput.trim() === 'true';
     if (!isInsideWorkTree) {
       throw new Error('Not inside a git work tree');
     }
 
     // Ensure git can resolve the repository root for this directory.
-    await execAsync('git rev-parse --show-toplevel', { cwd: projectPath });
+    await spawnAsync('git', ['rev-parse', '--show-toplevel'], { cwd: projectPath });
   } catch {
     throw new Error('Not a git repository. This directory does not contain a .git folder. Initialize a git repository with "git init" to use source control features.');
   }
 }
 
+function getGitErrorDetails(error) {
+  return `${error?.message || ''} ${error?.stderr || ''} ${error?.stdout || ''}`;
+}
+
+function isMissingHeadRevisionError(error) {
+  const errorDetails = getGitErrorDetails(error).toLowerCase();
+  return errorDetails.includes('unknown revision')
+    || errorDetails.includes('ambiguous argument')
+    || errorDetails.includes('needed a single revision')
+    || errorDetails.includes('bad revision');
+}
+
+async function getCurrentBranchName(projectPath) {
+  try {
+    // symbolic-ref works even when the repository has no commits.
+    const { stdout } = await spawnAsync('git', ['symbolic-ref', '--short', 'HEAD'], { cwd: projectPath });
+    const branchName = stdout.trim();
+    if (branchName) {
+      return branchName;
+    }
+  } catch (error) {
+    // Fall back to rev-parse for detached HEAD and older git edge cases.
+  }
+
+  const { stdout } = await spawnAsync('git', ['rev-parse', '--abbrev-ref', 'HEAD'], { cwd: projectPath });
+  return stdout.trim();
+}
+
+async function repositoryHasCommits(projectPath) {
+  try {
+    await spawnAsync('git', ['rev-parse', '--verify', 'HEAD'], { cwd: projectPath });
+    return true;
+  } catch (error) {
+    if (isMissingHeadRevisionError(error)) {
+      return false;
+    }
+    throw error;
+  }
+}
+
+async function getRepositoryRootPath(projectPath) {
+  const { stdout } = await spawnAsync('git', ['rev-parse', '--show-toplevel'], { cwd: projectPath });
+  return stdout.trim();
+}
+
+function normalizeRepositoryRelativeFilePath(filePath) {
+  return String(filePath)
+    .replace(/\\/g, '/')
+    .replace(/^\.\/+/, '')
+    .replace(/^\/+/, '')
+    .trim();
+}
+
+function parseStatusFilePaths(statusOutput) {
+  return statusOutput
+    .split('\n')
+    .map((line) => line.trimEnd())
+    .filter((line) => line.trim())
+    .map((line) => {
+      const statusPath = line.substring(3);
+      const renamedFilePath = statusPath.split(' -> ')[1];
+      return normalizeRepositoryRelativeFilePath(renamedFilePath || statusPath);
+    })
+    .filter(Boolean);
+}
+
+function buildFilePathCandidates(projectPath, repositoryRootPath, filePath) {
+  const normalizedFilePath = normalizeRepositoryRelativeFilePath(filePath);
+  const projectRelativePath = normalizeRepositoryRelativeFilePath(path.relative(repositoryRootPath, projectPath));
+  const candidates = [normalizedFilePath];
+
+  if (
+    projectRelativePath
+    && projectRelativePath !== '.'
+    && !normalizedFilePath.startsWith(`${projectRelativePath}/`)
+  ) {
+    candidates.push(`${projectRelativePath}/${normalizedFilePath}`);
+  }
+
+  return Array.from(new Set(candidates.filter(Boolean)));
+}
+
+async function resolveRepositoryFilePath(projectPath, filePath) {
+  validateFilePath(filePath);
+
+  const repositoryRootPath = await getRepositoryRootPath(projectPath);
+  const candidateFilePaths = buildFilePathCandidates(projectPath, repositoryRootPath, filePath);
+
+  for (const candidateFilePath of candidateFilePaths) {
+    const { stdout } = await spawnAsync('git', ['status', '--porcelain', '--', candidateFilePath], { cwd: repositoryRootPath });
+    if (stdout.trim()) {
+      return {
+        repositoryRootPath,
+        repositoryRelativeFilePath: candidateFilePath,
+      };
+    }
+  }
+
+  // If the caller sent a bare filename (e.g. "hello.ts"), recover it from changed files.
+  const normalizedFilePath = normalizeRepositoryRelativeFilePath(filePath);
+  if (!normalizedFilePath.includes('/')) {
+    const { stdout: repositoryStatusOutput } = await spawnAsync('git', ['status', '--porcelain'], { cwd: repositoryRootPath });
+    const changedFilePaths = parseStatusFilePaths(repositoryStatusOutput);
+    const suffixMatches = changedFilePaths.filter(
+      (changedFilePath) => changedFilePath === normalizedFilePath || changedFilePath.endsWith(`/${normalizedFilePath}`),
+    );
+
+    if (suffixMatches.length === 1) {
+      return {
+        repositoryRootPath,
+        repositoryRelativeFilePath: suffixMatches[0],
+      };
+    }
+  }
+
+  return {
+    repositoryRootPath,
+    repositoryRelativeFilePath: candidateFilePaths[0],
+  };
+}
+
 // Get git status for a project
 router.get('/status', async (req, res) => {
   const { project } = req.query;
@@ -125,24 +301,11 @@ router.get('/status', async (req, res) => {
     // Validate git repository
     await validateGitRepository(projectPath);
 
-    // Get current branch - handle case where there are no commits yet
-    let branch = 'main';
-    let hasCommits = true;
-    try {
-      const { stdout: branchOutput } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
-      branch = branchOutput.trim();
-    } catch (error) {
-      // No HEAD exists - repository has no commits yet
-      if (error.message.includes('unknown revision') || error.message.includes('ambiguous argument')) {
-        hasCommits = false;
-        branch = 'main';
-      } else {
-        throw error;
-      }
-    }
+    const branch = await getCurrentBranchName(projectPath);
+    const hasCommits = await repositoryHasCommits(projectPath);
 
     // Get git status
-    const { stdout: statusOutput } = await execAsync('git status --porcelain', { cwd: projectPath });
+    const { stdout: statusOutput } = await spawnAsync('git', ['status', '--porcelain'], { cwd: projectPath });
 
     const modified = [];
     const added = [];
@@ -200,44 +363,65 @@ router.get('/diff', async (req, res) => {
     
     // Validate git repository
     await validateGitRepository(projectPath);
-    
+
+    const {
+      repositoryRootPath,
+      repositoryRelativeFilePath,
+    } = await resolveRepositoryFilePath(projectPath, file);
+
     // Check if file is untracked or deleted
-    const { stdout: statusOutput } = await execAsync(`git status --porcelain "${file}"`, { cwd: projectPath });
+    const { stdout: statusOutput } = await spawnAsync(
+      'git',
+      ['status', '--porcelain', '--', repositoryRelativeFilePath],
+      { cwd: repositoryRootPath },
+    );
     const isUntracked = statusOutput.startsWith('??');
     const isDeleted = statusOutput.trim().startsWith('D ') || statusOutput.trim().startsWith(' D');
 
     let diff;
     if (isUntracked) {
       // For untracked files, show the entire file content as additions
-      const filePath = path.join(projectPath, file);
+      const filePath = path.join(repositoryRootPath, repositoryRelativeFilePath);
       const stats = await fs.stat(filePath);
 
       if (stats.isDirectory()) {
         // For directories, show a simple message
-        diff = `Directory: ${file}\n(Cannot show diff for directories)`;
+        diff = `Directory: ${repositoryRelativeFilePath}\n(Cannot show diff for directories)`;
       } else {
         const fileContent = await fs.readFile(filePath, 'utf-8');
         const lines = fileContent.split('\n');
-        diff = `--- /dev/null\n+++ b/${file}\n@@ -0,0 +1,${lines.length} @@\n` +
+        diff = `--- /dev/null\n+++ b/${repositoryRelativeFilePath}\n@@ -0,0 +1,${lines.length} @@\n` +
                lines.map(line => `+${line}`).join('\n');
       }
     } else if (isDeleted) {
       // For deleted files, show the entire file content from HEAD as deletions
-      const { stdout: fileContent } = await execAsync(`git show HEAD:"${file}"`, { cwd: projectPath });
+      const { stdout: fileContent } = await spawnAsync(
+        'git',
+        ['show', `HEAD:${repositoryRelativeFilePath}`],
+        { cwd: repositoryRootPath },
+      );
       const lines = fileContent.split('\n');
-      diff = `--- a/${file}\n+++ /dev/null\n@@ -1,${lines.length} +0,0 @@\n` +
+      diff = `--- a/${repositoryRelativeFilePath}\n+++ /dev/null\n@@ -1,${lines.length} +0,0 @@\n` +
              lines.map(line => `-${line}`).join('\n');
     } else {
       // Get diff for tracked files
       // First check for unstaged changes (working tree vs index)
-      const { stdout: unstagedDiff } = await execAsync(`git diff -- "${file}"`, { cwd: projectPath });
+      const { stdout: unstagedDiff } = await spawnAsync(
+        'git',
+        ['diff', '--', repositoryRelativeFilePath],
+        { cwd: repositoryRootPath },
+      );
 
       if (unstagedDiff) {
         // Show unstaged changes if they exist
         diff = stripDiffHeaders(unstagedDiff);
       } else {
         // If no unstaged changes, check for staged changes (index vs HEAD)
-        const { stdout: stagedDiff } = await execAsync(`git diff --cached -- "${file}"`, { cwd: projectPath });
+        const { stdout: stagedDiff } = await spawnAsync(
+          'git',
+          ['diff', '--cached', '--', repositoryRelativeFilePath],
+          { cwd: repositoryRootPath },
+        );
         diff = stripDiffHeaders(stagedDiff) || '';
       }
     }
@@ -263,8 +447,17 @@ router.get('/file-with-diff', async (req, res) => {
     // Validate git repository
     await validateGitRepository(projectPath);
 
+    const {
+      repositoryRootPath,
+      repositoryRelativeFilePath,
+    } = await resolveRepositoryFilePath(projectPath, file);
+
     // Check file status
-    const { stdout: statusOutput } = await execAsync(`git status --porcelain "${file}"`, { cwd: projectPath });
+    const { stdout: statusOutput } = await spawnAsync(
+      'git',
+      ['status', '--porcelain', '--', repositoryRelativeFilePath],
+      { cwd: repositoryRootPath },
+    );
     const isUntracked = statusOutput.startsWith('??');
     const isDeleted = statusOutput.trim().startsWith('D ') || statusOutput.trim().startsWith(' D');
 
@@ -273,12 +466,16 @@ router.get('/file-with-diff', async (req, res) => {
 
     if (isDeleted) {
       // For deleted files, get content from HEAD
-      const { stdout: headContent } = await execAsync(`git show HEAD:"${file}"`, { cwd: projectPath });
+      const { stdout: headContent } = await spawnAsync(
+        'git',
+        ['show', `HEAD:${repositoryRelativeFilePath}`],
+        { cwd: repositoryRootPath },
+      );
       oldContent = headContent;
       currentContent = headContent; // Show the deleted content in editor
     } else {
       // Get current file content
-      const filePath = path.join(projectPath, file);
+      const filePath = path.join(repositoryRootPath, repositoryRelativeFilePath);
       const stats = await fs.stat(filePath);
 
       if (stats.isDirectory()) {
@@ -291,7 +488,11 @@ router.get('/file-with-diff', async (req, res) => {
       if (!isUntracked) {
         // Get the old content from HEAD for tracked files
         try {
-          const { stdout: headContent } = await execAsync(`git show HEAD:"${file}"`, { cwd: projectPath });
+          const { stdout: headContent } = await spawnAsync(
+            'git',
+            ['show', `HEAD:${repositoryRelativeFilePath}`],
+            { cwd: repositoryRootPath },
+          );
           oldContent = headContent;
         } catch (error) {
           // File might be newly added to git (staged but not committed)
@@ -328,17 +529,17 @@ router.post('/initial-commit', async (req, res) => {
 
     // Check if there are already commits
     try {
-      await execAsync('git rev-parse HEAD', { cwd: projectPath });
+      await spawnAsync('git', ['rev-parse', 'HEAD'], { cwd: projectPath });
       return res.status(400).json({ error: 'Repository already has commits. Use regular commit instead.' });
     } catch (error) {
       // No HEAD - this is good, we can create initial commit
     }
 
     // Add all files
-    await execAsync('git add .', { cwd: projectPath });
+    await spawnAsync('git', ['add', '.'], { cwd: projectPath });
 
     // Create initial commit
-    const { stdout } = await execAsync('git commit -m "Initial commit"', { cwd: projectPath });
+    const { stdout } = await spawnAsync('git', ['commit', '-m', 'Initial commit'], { cwd: projectPath });
 
     res.json({ success: true, output: stdout, message: 'Initial commit created successfully' });
   } catch (error) {
@@ -369,14 +570,16 @@ router.post('/commit', async (req, res) => {
     
     // Validate git repository
     await validateGitRepository(projectPath);
+    const repositoryRootPath = await getRepositoryRootPath(projectPath);
     
     // Stage selected files
     for (const file of files) {
-      await execAsync(`git add "${file}"`, { cwd: projectPath });
+      const { repositoryRelativeFilePath } = await resolveRepositoryFilePath(projectPath, file);
+      await spawnAsync('git', ['add', '--', repositoryRelativeFilePath], { cwd: repositoryRootPath });
     }
-    
+
     // Commit with message
-    const { stdout } = await execAsync(`git commit -m "${message.replace(/"/g, '\\"')}"`, { cwd: projectPath });
+    const { stdout } = await spawnAsync('git', ['commit', '-m', message], { cwd: repositoryRootPath });
     
     res.json({ success: true, output: stdout });
   } catch (error) {
@@ -385,6 +588,53 @@ router.post('/commit', async (req, res) => {
   }
 });
 
+// Revert latest local commit (keeps changes staged)
+router.post('/revert-local-commit', async (req, res) => {
+  const { project } = req.body;
+
+  if (!project) {
+    return res.status(400).json({ error: 'Project name is required' });
+  }
+
+  try {
+    const projectPath = await getActualProjectPath(project);
+    await validateGitRepository(projectPath);
+
+    try {
+      await spawnAsync('git', ['rev-parse', '--verify', 'HEAD'], { cwd: projectPath });
+    } catch (error) {
+      return res.status(400).json({
+        error: 'No local commit to revert',
+        details: 'This repository has no commit yet.',
+      });
+    }
+
+    try {
+      // Soft reset rewinds one commit while preserving all file changes in the index.
+      await spawnAsync('git', ['reset', '--soft', 'HEAD~1'], { cwd: projectPath });
+    } catch (error) {
+      const errorDetails = `${error.stderr || ''} ${error.message || ''}`;
+      const isInitialCommit = errorDetails.includes('HEAD~1') &&
+        (errorDetails.includes('unknown revision') || errorDetails.includes('ambiguous argument'));
+
+      if (!isInitialCommit) {
+        throw error;
+      }
+
+      // Initial commit has no parent; deleting HEAD uncommits it and keeps files staged.
+      await spawnAsync('git', ['update-ref', '-d', 'HEAD'], { cwd: projectPath });
+    }
+
+    res.json({
+      success: true,
+      output: 'Latest local commit reverted successfully. Changes were kept staged.',
+    });
+  } catch (error) {
+    console.error('Git revert local commit error:', error);
+    res.status(500).json({ error: error.message });
+  }
+});
+
 // Get list of branches
 router.get('/branches', async (req, res) => {
   const { project } = req.query;
@@ -400,27 +650,29 @@ router.get('/branches', async (req, res) => {
     await validateGitRepository(projectPath);
     
     // Get all branches
-    const { stdout } = await execAsync('git branch -a', { cwd: projectPath });
-    
-    // Parse branches
-    const branches = stdout
+    const { stdout } = await spawnAsync('git', ['branch', '-a'], { cwd: projectPath });
+
+    const rawLines = stdout
       .split('\n')
-      .map(branch => branch.trim())
-      .filter(branch => branch && !branch.includes('->')) // Remove empty lines and HEAD pointer
-      .map(branch => {
-        // Remove asterisk from current branch
-        if (branch.startsWith('* ')) {
-          return branch.substring(2);
-        }
-        // Remove remotes/ prefix
-        if (branch.startsWith('remotes/origin/')) {
-          return branch.substring(15);
-        }
-        return branch;
-      })
-      .filter((branch, index, self) => self.indexOf(branch) === index); // Remove duplicates
-    
-    res.json({ branches });
+      .map(b => b.trim())
+      .filter(b => b && !b.includes('->'));
+
+    // Local branches (may start with '* ' for current)
+    const localBranches = rawLines
+      .filter(b => !b.startsWith('remotes/'))
+      .map(b => (b.startsWith('* ') ? b.substring(2) : b));
+
+    // Remote branches — strip 'remotes/<remote>/' prefix
+    const remoteBranches = rawLines
+      .filter(b => b.startsWith('remotes/'))
+      .map(b => b.replace(/^remotes\/[^/]+\//, ''))
+      .filter(name => !localBranches.includes(name)); // skip if already a local branch
+
+    // Backward-compat flat list (local + unique remotes, deduplicated)
+    const branches = [...localBranches, ...remoteBranches]
+      .filter((b, i, arr) => arr.indexOf(b) === i);
+
+    res.json({ branches, localBranches, remoteBranches });
   } catch (error) {
     console.error('Git branches error:', error);
     res.json({ error: error.message });
@@ -439,7 +691,8 @@ router.post('/checkout', async (req, res) => {
     const projectPath = await getActualProjectPath(project);
     
     // Checkout the branch
-    const { stdout } = await execAsync(`git checkout "${branch}"`, { cwd: projectPath });
+    validateBranchName(branch);
+    const { stdout } = await spawnAsync('git', ['checkout', branch], { cwd: projectPath });
     
     res.json({ success: true, output: stdout });
   } catch (error) {
@@ -460,7 +713,8 @@ router.post('/create-branch', async (req, res) => {
     const projectPath = await getActualProjectPath(project);
     
     // Create and checkout new branch
-    const { stdout } = await execAsync(`git checkout -b "${branch}"`, { cwd: projectPath });
+    validateBranchName(branch);
+    const { stdout } = await spawnAsync('git', ['checkout', '-b', branch], { cwd: projectPath });
     
     res.json({ success: true, output: stdout });
   } catch (error) {
@@ -469,6 +723,32 @@ router.post('/create-branch', async (req, res) => {
   }
 });
 
+// Delete a local branch
+router.post('/delete-branch', async (req, res) => {
+  const { project, branch } = req.body;
+
+  if (!project || !branch) {
+    return res.status(400).json({ error: 'Project name and branch name are required' });
+  }
+
+  try {
+    const projectPath = await getActualProjectPath(project);
+    await validateGitRepository(projectPath);
+
+    // Safety: cannot delete the currently checked-out branch
+    const { stdout: currentBranch } = await spawnAsync('git', ['branch', '--show-current'], { cwd: projectPath });
+    if (currentBranch.trim() === branch) {
+      return res.status(400).json({ error: 'Cannot delete the currently checked-out branch' });
+    }
+
+    const { stdout } = await spawnAsync('git', ['branch', '-d', branch], { cwd: projectPath });
+    res.json({ success: true, output: stdout });
+  } catch (error) {
+    console.error('Git delete branch error:', error);
+    res.status(500).json({ error: error.message });
+  }
+});
+
 // Get recent commits
 router.get('/commits', async (req, res) => {
   const { project, limit = 10 } = req.query;
@@ -488,7 +768,7 @@ router.get('/commits', async (req, res) => {
     // Get commit log with stats
     const { stdout } = await spawnAsync(
       'git',
-      ['log', '--pretty=format:%H|%an|%ae|%ad|%s', '--date=relative', '-n', String(safeLimit)],
+      ['log', '--pretty=format:%H|%an|%ae|%ad|%s', '--date=iso-strict', '-n', String(safeLimit)],
       { cwd: projectPath },
     );
     
@@ -509,8 +789,8 @@ router.get('/commits', async (req, res) => {
     // Get stats for each commit
     for (const commit of commits) {
       try {
-        const { stdout: stats } = await execAsync(
-          `git show --stat --format='' ${commit.hash}`,
+        const { stdout: stats } = await spawnAsync(
+          'git', ['show', '--stat', '--format=', commit.hash],
           { cwd: projectPath }
         );
         commit.stats = stats.trim().split('\n').pop(); // Get the summary line
@@ -536,14 +816,22 @@ router.get('/commit-diff', async (req, res) => {
 
   try {
     const projectPath = await getActualProjectPath(project);
-    
+
+    // Validate commit reference (defense-in-depth)
+    validateCommitRef(commit);
+
     // Get diff for the commit
-    const { stdout } = await execAsync(
-      `git show ${commit}`,
+    const { stdout } = await spawnAsync(
+      'git', ['show', commit],
       { cwd: projectPath }
     );
-    
-    res.json({ diff: stdout });
+
+    const isTruncated = stdout.length > COMMIT_DIFF_CHARACTER_LIMIT;
+    const diff = isTruncated
+      ? `${stdout.slice(0, COMMIT_DIFF_CHARACTER_LIMIT)}\n\n... Diff truncated to keep the UI responsive ...`
+      : stdout;
+
+    res.json({ diff, isTruncated });
   } catch (error) {
     console.error('Git commit diff error:', error);
     res.json({ error: error.message });
@@ -565,17 +853,20 @@ router.post('/generate-commit-message', async (req, res) => {
 
   try {
     const projectPath = await getActualProjectPath(project);
+    await validateGitRepository(projectPath);
+    const repositoryRootPath = await getRepositoryRootPath(projectPath);
 
     // Get diff for selected files
     let diffContext = '';
     for (const file of files) {
       try {
-        const { stdout } = await execAsync(
-          `git diff HEAD -- "${file}"`,
-          { cwd: projectPath }
+        const { repositoryRelativeFilePath } = await resolveRepositoryFilePath(projectPath, file);
+        const { stdout } = await spawnAsync(
+          'git', ['diff', 'HEAD', '--', repositoryRelativeFilePath],
+          { cwd: repositoryRootPath }
         );
         if (stdout) {
-          diffContext += `\n--- ${file} ---\n${stdout}`;
+          diffContext += `\n--- ${repositoryRelativeFilePath} ---\n${stdout}`;
         }
       } catch (error) {
         console.error(`Error getting diff for ${file}:`, error);
@@ -587,14 +878,15 @@ router.post('/generate-commit-message', async (req, res) => {
       // Try to get content of untracked files
       for (const file of files) {
         try {
-          const filePath = path.join(projectPath, file);
+          const { repositoryRelativeFilePath } = await resolveRepositoryFilePath(projectPath, file);
+          const filePath = path.join(repositoryRootPath, repositoryRelativeFilePath);
           const stats = await fs.stat(filePath);
 
           if (!stats.isDirectory()) {
             const content = await fs.readFile(filePath, 'utf-8');
-            diffContext += `\n--- ${file} (new file) ---\n${content.substring(0, 1000)}\n`;
+            diffContext += `\n--- ${repositoryRelativeFilePath} (new file) ---\n${content.substring(0, 1000)}\n`;
           } else {
-            diffContext += `\n--- ${file} (new directory) ---\n`;
+            diffContext += `\n--- ${repositoryRelativeFilePath} (new directory) ---\n`;
           }
         } catch (error) {
           console.error(`Error reading file ${file}:`, error);
@@ -763,44 +1055,51 @@ router.get('/remote-status', async (req, res) => {
     const projectPath = await getActualProjectPath(project);
     await validateGitRepository(projectPath);
 
-    // Get current branch
-    const { stdout: currentBranch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
-    const branch = currentBranch.trim();
+    const branch = await getCurrentBranchName(projectPath);
+    const hasCommits = await repositoryHasCommits(projectPath);
+
+    const { stdout: remoteOutput } = await spawnAsync('git', ['remote'], { cwd: projectPath });
+    const remotes = remoteOutput.trim().split('\n').filter(r => r.trim());
+    const hasRemote = remotes.length > 0;
+    const fallbackRemoteName = hasRemote
+      ? (remotes.includes('origin') ? 'origin' : remotes[0])
+      : null;
+
+    // Repositories initialized with `git init` can have a branch but no commits.
+    // Return a non-error state so the UI can show the initial-commit workflow.
+    if (!hasCommits) {
+      return res.json({
+        hasRemote,
+        hasUpstream: false,
+        branch,
+        remoteName: fallbackRemoteName,
+        ahead: 0,
+        behind: 0,
+        isUpToDate: false,
+        message: 'Repository has no commits yet'
+      });
+    }
 
     // Check if there's a remote tracking branch (smart detection)
     let trackingBranch;
     let remoteName;
     try {
-      const { stdout } = await execAsync(`git rev-parse --abbrev-ref ${branch}@{upstream}`, { cwd: projectPath });
+      const { stdout } = await spawnAsync('git', ['rev-parse', '--abbrev-ref', `${branch}@{upstream}`], { cwd: projectPath });
       trackingBranch = stdout.trim();
       remoteName = trackingBranch.split('/')[0]; // Extract remote name (e.g., "origin/main" -> "origin")
     } catch (error) {
-      // No upstream branch configured - but check if we have remotes
-      let hasRemote = false;
-      let remoteName = null;
-      try {
-        const { stdout } = await execAsync('git remote', { cwd: projectPath });
-        const remotes = stdout.trim().split('\n').filter(r => r.trim());
-        if (remotes.length > 0) {
-          hasRemote = true;
-          remoteName = remotes.includes('origin') ? 'origin' : remotes[0];
-        }
-      } catch (remoteError) {
-        // No remotes configured
-      }
-      
-      return res.json({ 
+      return res.json({
         hasRemote,
         hasUpstream: false,
         branch,
-        remoteName,
+        remoteName: fallbackRemoteName,
         message: 'No remote tracking branch configured'
       });
     }
 
     // Get ahead/behind counts
-    const { stdout: countOutput } = await execAsync(
-      `git rev-list --count --left-right ${trackingBranch}...HEAD`,
+    const { stdout: countOutput } = await spawnAsync(
+      'git', ['rev-list', '--count', '--left-right', `${trackingBranch}...HEAD`],
       { cwd: projectPath }
     );
     
@@ -835,20 +1134,20 @@ router.post('/fetch', async (req, res) => {
     await validateGitRepository(projectPath);
 
     // Get current branch and its upstream remote
-    const { stdout: currentBranch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
-    const branch = currentBranch.trim();
+    const branch = await getCurrentBranchName(projectPath);
 
     let remoteName = 'origin'; // fallback
     try {
-      const { stdout } = await execAsync(`git rev-parse --abbrev-ref ${branch}@{upstream}`, { cwd: projectPath });
+      const { stdout } = await spawnAsync('git', ['rev-parse', '--abbrev-ref', `${branch}@{upstream}`], { cwd: projectPath });
       remoteName = stdout.trim().split('/')[0]; // Extract remote name
     } catch (error) {
       // No upstream, try to fetch from origin anyway
       console.log('No upstream configured, using origin as fallback');
     }
 
-    const { stdout } = await execAsync(`git fetch ${remoteName}`, { cwd: projectPath });
-    
+    validateRemoteName(remoteName);
+    const { stdout } = await spawnAsync('git', ['fetch', remoteName], { cwd: projectPath });
+
     res.json({ success: true, output: stdout || 'Fetch completed successfully', remoteName });
   } catch (error) {
     console.error('Git fetch error:', error);
@@ -876,13 +1175,12 @@ router.post('/pull', async (req, res) => {
     await validateGitRepository(projectPath);
 
     // Get current branch and its upstream remote
-    const { stdout: currentBranch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
-    const branch = currentBranch.trim();
+    const branch = await getCurrentBranchName(projectPath);
 
     let remoteName = 'origin'; // fallback
     let remoteBranch = branch; // fallback
     try {
-      const { stdout } = await execAsync(`git rev-parse --abbrev-ref ${branch}@{upstream}`, { cwd: projectPath });
+      const { stdout } = await spawnAsync('git', ['rev-parse', '--abbrev-ref', `${branch}@{upstream}`], { cwd: projectPath });
       const tracking = stdout.trim();
       remoteName = tracking.split('/')[0]; // Extract remote name
       remoteBranch = tracking.split('/').slice(1).join('/'); // Extract branch name
@@ -891,17 +1189,19 @@ router.post('/pull', async (req, res) => {
       console.log('No upstream configured, using origin/branch as fallback');
     }
 
-    const { stdout } = await execAsync(`git pull ${remoteName} ${remoteBranch}`, { cwd: projectPath });
-    
-    res.json({ 
-      success: true, 
-      output: stdout || 'Pull completed successfully', 
+    validateRemoteName(remoteName);
+    validateBranchName(remoteBranch);
+    const { stdout } = await spawnAsync('git', ['pull', remoteName, remoteBranch], { cwd: projectPath });
+
+    res.json({
+      success: true,
+      output: stdout || 'Pull completed successfully',
       remoteName,
       remoteBranch
     });
   } catch (error) {
     console.error('Git pull error:', error);
-    
+
     // Enhanced error handling for common pull scenarios
     let errorMessage = 'Pull failed';
     let details = error.message;
@@ -943,13 +1243,12 @@ router.post('/push', async (req, res) => {
     await validateGitRepository(projectPath);
 
     // Get current branch and its upstream remote
-    const { stdout: currentBranch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
-    const branch = currentBranch.trim();
+    const branch = await getCurrentBranchName(projectPath);
 
     let remoteName = 'origin'; // fallback
     let remoteBranch = branch; // fallback
     try {
-      const { stdout } = await execAsync(`git rev-parse --abbrev-ref ${branch}@{upstream}`, { cwd: projectPath });
+      const { stdout } = await spawnAsync('git', ['rev-parse', '--abbrev-ref', `${branch}@{upstream}`], { cwd: projectPath });
       const tracking = stdout.trim();
       remoteName = tracking.split('/')[0]; // Extract remote name
       remoteBranch = tracking.split('/').slice(1).join('/'); // Extract branch name
@@ -958,11 +1257,13 @@ router.post('/push', async (req, res) => {
       console.log('No upstream configured, using origin/branch as fallback');
     }
 
-    const { stdout } = await execAsync(`git push ${remoteName} ${remoteBranch}`, { cwd: projectPath });
-    
-    res.json({ 
-      success: true, 
-      output: stdout || 'Push completed successfully', 
+    validateRemoteName(remoteName);
+    validateBranchName(remoteBranch);
+    const { stdout } = await spawnAsync('git', ['push', remoteName, remoteBranch], { cwd: projectPath });
+
+    res.json({
+      success: true,
+      output: stdout || 'Push completed successfully',
       remoteName,
       remoteBranch
     });
@@ -1012,35 +1313,38 @@ router.post('/publish', async (req, res) => {
     const projectPath = await getActualProjectPath(project);
     await validateGitRepository(projectPath);
 
+    // Validate branch name
+    validateBranchName(branch);
+
     // Get current branch to verify it matches the requested branch
-    const { stdout: currentBranch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
-    const currentBranchName = currentBranch.trim();
-    
+    const currentBranchName = await getCurrentBranchName(projectPath);
+
     if (currentBranchName !== branch) {
-      return res.status(400).json({ 
-        error: `Branch mismatch. Current branch is ${currentBranchName}, but trying to publish ${branch}` 
+      return res.status(400).json({
+        error: `Branch mismatch. Current branch is ${currentBranchName}, but trying to publish ${branch}`
       });
     }
 
     // Check if remote exists
     let remoteName = 'origin';
     try {
-      const { stdout } = await execAsync('git remote', { cwd: projectPath });
+      const { stdout } = await spawnAsync('git', ['remote'], { cwd: projectPath });
       const remotes = stdout.trim().split('\n').filter(r => r.trim());
       if (remotes.length === 0) {
-        return res.status(400).json({ 
-          error: 'No remote repository configured. Add a remote with: git remote add origin <url>' 
+        return res.status(400).json({
+          error: 'No remote repository configured. Add a remote with: git remote add origin <url>'
         });
       }
       remoteName = remotes.includes('origin') ? 'origin' : remotes[0];
     } catch (error) {
-      return res.status(400).json({ 
-        error: 'No remote repository configured. Add a remote with: git remote add origin <url>' 
+      return res.status(400).json({
+        error: 'No remote repository configured. Add a remote with: git remote add origin <url>'
       });
     }
 
     // Publish the branch (set upstream and push)
-    const { stdout } = await execAsync(`git push --set-upstream ${remoteName} ${branch}`, { cwd: projectPath });
+    validateRemoteName(remoteName);
+    const { stdout } = await spawnAsync('git', ['push', '--set-upstream', remoteName, branch], { cwd: projectPath });
     
     res.json({ 
       success: true, 
@@ -1087,10 +1391,18 @@ router.post('/discard', async (req, res) => {
   try {
     const projectPath = await getActualProjectPath(project);
     await validateGitRepository(projectPath);
+    const {
+      repositoryRootPath,
+      repositoryRelativeFilePath,
+    } = await resolveRepositoryFilePath(projectPath, file);
 
     // Check file status to determine correct discard command
-    const { stdout: statusOutput } = await execAsync(`git status --porcelain "${file}"`, { cwd: projectPath });
-    
+    const { stdout: statusOutput } = await spawnAsync(
+      'git',
+      ['status', '--porcelain', '--', repositoryRelativeFilePath],
+      { cwd: repositoryRootPath },
+    );
+
     if (!statusOutput.trim()) {
       return res.status(400).json({ error: 'No changes to discard for this file' });
     }
@@ -1099,7 +1411,7 @@ router.post('/discard', async (req, res) => {
 
     if (status === '??') {
       // Untracked file or directory - delete it
-      const filePath = path.join(projectPath, file);
+      const filePath = path.join(repositoryRootPath, repositoryRelativeFilePath);
       const stats = await fs.stat(filePath);
 
       if (stats.isDirectory()) {
@@ -1109,13 +1421,13 @@ router.post('/discard', async (req, res) => {
       }
     } else if (status.includes('M') || status.includes('D')) {
       // Modified or deleted file - restore from HEAD
-      await execAsync(`git restore "${file}"`, { cwd: projectPath });
+      await spawnAsync('git', ['restore', '--', repositoryRelativeFilePath], { cwd: repositoryRootPath });
     } else if (status.includes('A')) {
       // Added file - unstage it
-      await execAsync(`git reset HEAD "${file}"`, { cwd: projectPath });
+      await spawnAsync('git', ['reset', 'HEAD', '--', repositoryRelativeFilePath], { cwd: repositoryRootPath });
     }
     
-    res.json({ success: true, message: `Changes discarded for ${file}` });
+    res.json({ success: true, message: `Changes discarded for ${repositoryRelativeFilePath}` });
   } catch (error) {
     console.error('Git discard error:', error);
     res.status(500).json({ error: error.message });
@@ -1133,9 +1445,17 @@ router.post('/delete-untracked', async (req, res) => {
   try {
     const projectPath = await getActualProjectPath(project);
     await validateGitRepository(projectPath);
+    const {
+      repositoryRootPath,
+      repositoryRelativeFilePath,
+    } = await resolveRepositoryFilePath(projectPath, file);
 
     // Check if file is actually untracked
-    const { stdout: statusOutput } = await execAsync(`git status --porcelain "${file}"`, { cwd: projectPath });
+    const { stdout: statusOutput } = await spawnAsync(
+      'git',
+      ['status', '--porcelain', '--', repositoryRelativeFilePath],
+      { cwd: repositoryRootPath },
+    );
     
     if (!statusOutput.trim()) {
       return res.status(400).json({ error: 'File is not untracked or does not exist' });
@@ -1148,16 +1468,16 @@ router.post('/delete-untracked', async (req, res) => {
     }
 
     // Delete the untracked file or directory
-    const filePath = path.join(projectPath, file);
+    const filePath = path.join(repositoryRootPath, repositoryRelativeFilePath);
     const stats = await fs.stat(filePath);
 
     if (stats.isDirectory()) {
       // Use rm with recursive option for directories
       await fs.rm(filePath, { recursive: true, force: true });
-      res.json({ success: true, message: `Untracked directory ${file} deleted successfully` });
+      res.json({ success: true, message: `Untracked directory ${repositoryRelativeFilePath} deleted successfully` });
     } else {
       await fs.unlink(filePath);
-      res.json({ success: true, message: `Untracked file ${file} deleted successfully` });
+      res.json({ success: true, message: `Untracked file ${repositoryRelativeFilePath} deleted successfully` });
     }
   } catch (error) {
     console.error('Git delete untracked error:', error);

server/routes/messages.js

@@ -0,0 +1,61 @@
+/**
+ * Unified messages endpoint.
+ *
+ * GET /api/sessions/:sessionId/messages?provider=claude&projectName=foo&limit=50&offset=0
+ *
+ * Replaces the four provider-specific session message endpoints with a single route
+ * that delegates to the appropriate adapter via the provider registry.
+ *
+ * @module routes/messages
+ */
+
+import express from 'express';
+import { getProvider, getAllProviders } from '../providers/registry.js';
+
+const router = express.Router();
+
+/**
+ * GET /api/sessions/:sessionId/messages
+ *
+ * Auth: authenticateToken applied at mount level in index.js
+ *
+ * Query params:
+ *   provider    - 'claude' | 'cursor' | 'codex' | 'gemini' (default: 'claude')
+ *   projectName - required for claude provider
+ *   projectPath - required for cursor provider (absolute path used for cwdId hash)
+ *   limit       - page size (omit or null for all)
+ *   offset      - pagination offset (default: 0)
+ */
+router.get('/:sessionId/messages', async (req, res) => {
+  try {
+    const { sessionId } = req.params;
+    const provider = req.query.provider || 'claude';
+    const projectName = req.query.projectName || '';
+    const projectPath = req.query.projectPath || '';
+    const limitParam = req.query.limit;
+    const limit = limitParam !== undefined && limitParam !== null && limitParam !== ''
+      ? parseInt(limitParam, 10)
+      : null;
+    const offset = parseInt(req.query.offset || '0', 10);
+
+    const adapter = getProvider(provider);
+    if (!adapter) {
+      const available = getAllProviders().join(', ');
+      return res.status(400).json({ error: `Unknown provider: ${provider}. Available: ${available}` });
+    }
+
+    const result = await adapter.fetchHistory(sessionId, {
+      projectName,
+      projectPath,
+      limit,
+      offset,
+    });
+
+    return res.json(result);
+  } catch (error) {
+    console.error('Error fetching unified messages:', error);
+    return res.status(500).json({ error: 'Failed to fetch messages' });
+  }
+});
+
+export default router;

server/routes/plugins.js

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

server/routes/projects.js

@@ -311,13 +311,11 @@ router.post('/create-workspace', async (req, res) => {
  * Helper function to get GitHub token from database
  */
 async function getGithubTokenById(tokenId, userId) {
-  const { getDatabase } = await import('../database/db.js');
-  const db = await getDatabase();
+  const { db } = await import('../database/db.js');
 
-  const credential = await db.get(
-    'SELECT * FROM user_credentials WHERE id = ? AND user_id = ? AND credential_type = ? AND is_active = 1',
-    [tokenId, userId, 'github_token']
-  );
+  const credential = db.prepare(
+    'SELECT * FROM user_credentials WHERE id = ? AND user_id = ? AND credential_type = ? AND is_active = 1'
+  ).get(tokenId, userId, 'github_token');
 
   // Return in the expected format (github_token field for compatibility)
   if (credential) {

server/routes/settings.js

@@ -1,5 +1,7 @@
 import express from 'express';
-import { apiKeysDb, credentialsDb } from '../database/db.js';
+import { apiKeysDb, credentialsDb, notificationPreferencesDb, pushSubscriptionsDb } from '../database/db.js';
+import { getPublicKey } from '../services/vapid-keys.js';
+import { createNotificationEvent, notifyUserIfEnabled } from '../services/notification-orchestrator.js';
 
 const router = express.Router();
 
@@ -175,4 +177,100 @@ router.patch('/credentials/:credentialId/toggle', async (req, res) => {
   }
 });
 
+// ===============================
+// Notification Preferences
+// ===============================
+
+router.get('/notification-preferences', async (req, res) => {
+  try {
+    const preferences = notificationPreferencesDb.getPreferences(req.user.id);
+    res.json({ success: true, preferences });
+  } catch (error) {
+    console.error('Error fetching notification preferences:', error);
+    res.status(500).json({ error: 'Failed to fetch notification preferences' });
+  }
+});
+
+router.put('/notification-preferences', async (req, res) => {
+  try {
+    const preferences = notificationPreferencesDb.updatePreferences(req.user.id, req.body || {});
+    res.json({ success: true, preferences });
+  } catch (error) {
+    console.error('Error saving notification preferences:', error);
+    res.status(500).json({ error: 'Failed to save notification preferences' });
+  }
+});
+
+// ===============================
+// Push Subscription Management
+// ===============================
+
+router.get('/push/vapid-public-key', async (req, res) => {
+  try {
+    const publicKey = getPublicKey();
+    res.json({ publicKey });
+  } catch (error) {
+    console.error('Error fetching VAPID public key:', error);
+    res.status(500).json({ error: 'Failed to fetch VAPID public key' });
+  }
+});
+
+router.post('/push/subscribe', async (req, res) => {
+  try {
+    const { endpoint, keys } = req.body;
+    if (!endpoint || !keys?.p256dh || !keys?.auth) {
+      return res.status(400).json({ error: 'Missing subscription fields' });
+    }
+    pushSubscriptionsDb.saveSubscription(req.user.id, endpoint, keys.p256dh, keys.auth);
+
+    // Enable webPush in preferences so the confirmation goes through the full pipeline
+    const currentPrefs = notificationPreferencesDb.getPreferences(req.user.id);
+    if (!currentPrefs?.channels?.webPush) {
+      notificationPreferencesDb.updatePreferences(req.user.id, {
+        ...currentPrefs,
+        channels: { ...currentPrefs?.channels, webPush: true },
+      });
+    }
+
+    res.json({ success: true });
+
+    // Send a confirmation push through the full notification pipeline
+    const event = createNotificationEvent({
+      provider: 'system',
+      kind: 'info',
+      code: 'push.enabled',
+      meta: { message: 'Push notifications are now enabled!' },
+      severity: 'info'
+    });
+    notifyUserIfEnabled({ userId: req.user.id, event });
+  } catch (error) {
+    console.error('Error saving push subscription:', error);
+    res.status(500).json({ error: 'Failed to save push subscription' });
+  }
+});
+
+router.post('/push/unsubscribe', async (req, res) => {
+  try {
+    const { endpoint } = req.body;
+    if (!endpoint) {
+      return res.status(400).json({ error: 'Missing endpoint' });
+    }
+    pushSubscriptionsDb.removeSubscription(endpoint);
+
+    // Disable webPush in preferences to match subscription state
+    const currentPrefs = notificationPreferencesDb.getPreferences(req.user.id);
+    if (currentPrefs?.channels?.webPush) {
+      notificationPreferencesDb.updatePreferences(req.user.id, {
+        ...currentPrefs,
+        channels: { ...currentPrefs.channels, webPush: false },
+      });
+    }
+
+    res.json({ success: true });
+  } catch (error) {
+    console.error('Error removing push subscription:', error);
+    res.status(500).json({ error: 'Failed to remove push subscription' });
+  }
+});
+
 export default router;

server/routes/taskmaster.js

@@ -529,7 +529,7 @@ router.get('/next/:projectName', async (req, res) => {
             
             // Fallback to loading tasks and finding next one locally
             // Use localhost to bypass proxy for internal server-to-server calls
-            const tasksResponse = await fetch(`http://localhost:${process.env.PORT || 3001}/api/taskmaster/tasks/${encodeURIComponent(projectName)}`, {
+            const tasksResponse = await fetch(`http://localhost:${process.env.SERVER_PORT || process.env.PORT || '3001'}/api/taskmaster/tasks/${encodeURIComponent(projectName)}`, {
                 headers: {
                     'Authorization': req.headers.authorization
                 }
@@ -1960,4 +1960,4 @@ Brief description of what this web application will do and why it's needed.
     ];
 }
 
-export default router;
+export default router;

server/routes/user.js

@@ -2,12 +2,29 @@ import express from 'express';
 import { userDb } from '../database/db.js';
 import { authenticateToken } from '../middleware/auth.js';
 import { getSystemGitConfig } from '../utils/gitConfig.js';
-import { exec } from 'child_process';
-import { promisify } from 'util';
+import { spawn } from 'child_process';
 
-const execAsync = promisify(exec);
 const router = express.Router();
 
+function spawnAsync(command, args, options = {}) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, { ...options, shell: false });
+    let stdout = '';
+    let stderr = '';
+    child.stdout.on('data', (data) => { stdout += data.toString(); });
+    child.stderr.on('data', (data) => { stderr += data.toString(); });
+    child.on('error', (error) => { reject(error); });
+    child.on('close', (code) => {
+      if (code === 0) { resolve({ stdout, stderr }); return; }
+      const error = new Error(`Command failed: ${command} ${args.join(' ')}`);
+      error.code = code;
+      error.stdout = stdout;
+      error.stderr = stderr;
+      reject(error);
+    });
+  });
+}
+
 router.get('/git-config', authenticateToken, async (req, res) => {
   try {
     const userId = req.user.id;
@@ -55,8 +72,8 @@ router.post('/git-config', authenticateToken, async (req, res) => {
     userDb.updateGitConfig(userId, gitName, gitEmail);
 
     try {
-      await execAsync(`git config --global user.name "${gitName.replace(/"/g, '\\"')}"`);
-      await execAsync(`git config --global user.email "${gitEmail.replace(/"/g, '\\"')}"`);
+      await spawnAsync('git', ['config', '--global', 'user.name', gitName]);
+      await spawnAsync('git', ['config', '--global', 'user.email', gitEmail]);
       console.log(`Applied git config globally: ${gitName} <${gitEmail}>`);
     } catch (gitError) {
       console.error('Error applying git config:', gitError);

server/services/notification-orchestrator.js

@@ -0,0 +1,227 @@
+import webPush from 'web-push';
+import { notificationPreferencesDb, pushSubscriptionsDb, sessionNamesDb } from '../database/db.js';
+
+const KIND_TO_PREF_KEY = {
+  action_required: 'actionRequired',
+  stop: 'stop',
+  error: 'error'
+};
+
+const PROVIDER_LABELS = {
+  claude: 'Claude',
+  cursor: 'Cursor',
+  codex: 'Codex',
+  gemini: 'Gemini',
+  system: 'System'
+};
+
+const recentEventKeys = new Map();
+const DEDUPE_WINDOW_MS = 20000;
+
+const cleanupOldEventKeys = () => {
+  const now = Date.now();
+  for (const [key, timestamp] of recentEventKeys.entries()) {
+    if (now - timestamp > DEDUPE_WINDOW_MS) {
+      recentEventKeys.delete(key);
+    }
+  }
+};
+
+function shouldSendPush(preferences, event) {
+  const webPushEnabled = Boolean(preferences?.channels?.webPush);
+  const prefEventKey = KIND_TO_PREF_KEY[event.kind];
+  const eventEnabled = prefEventKey ? Boolean(preferences?.events?.[prefEventKey]) : true;
+
+  return webPushEnabled && eventEnabled;
+}
+
+function isDuplicate(event) {
+  cleanupOldEventKeys();
+  const key = event.dedupeKey || `${event.provider}:${event.kind || 'info'}:${event.code || 'generic'}:${event.sessionId || 'none'}`;
+  if (recentEventKeys.has(key)) {
+    return true;
+  }
+  recentEventKeys.set(key, Date.now());
+  return false;
+}
+
+function createNotificationEvent({
+  provider,
+  sessionId = null,
+  kind = 'info',
+  code = 'generic.info',
+  meta = {},
+  severity = 'info',
+  dedupeKey = null,
+  requiresUserAction = false
+}) {
+  return {
+    provider,
+    sessionId,
+    kind,
+    code,
+    meta,
+    severity,
+    requiresUserAction,
+    dedupeKey,
+    createdAt: new Date().toISOString()
+  };
+}
+
+function normalizeErrorMessage(error) {
+  if (typeof error === 'string') {
+    return error;
+  }
+
+  if (error && typeof error.message === 'string') {
+    return error.message;
+  }
+
+  if (error == null) {
+    return 'Unknown error';
+  }
+
+  return String(error);
+}
+
+function normalizeSessionName(sessionName) {
+  if (typeof sessionName !== 'string') {
+    return null;
+  }
+
+  const normalized = sessionName.replace(/\s+/g, ' ').trim();
+  if (!normalized) {
+    return null;
+  }
+
+  return normalized.length > 80 ? `${normalized.slice(0, 77)}...` : normalized;
+}
+
+function resolveSessionName(event) {
+  const explicitSessionName = normalizeSessionName(event.meta?.sessionName);
+  if (explicitSessionName) {
+    return explicitSessionName;
+  }
+
+  if (!event.sessionId || !event.provider) {
+    return null;
+  }
+
+  return normalizeSessionName(sessionNamesDb.getName(event.sessionId, event.provider));
+}
+
+function buildPushBody(event) {
+  const CODE_MAP = {
+    'permission.required': event.meta?.toolName
+      ? `Action Required: Tool "${event.meta.toolName}" needs approval`
+      : 'Action Required: A tool needs your approval',
+    'run.stopped': event.meta?.stopReason || 'Run Stopped: The run has stopped',
+    'run.failed': event.meta?.error ? `Run Failed: ${event.meta.error}` : 'Run Failed: The run encountered an error',
+    'agent.notification': event.meta?.message ? String(event.meta.message) : 'You have a new notification',
+    'push.enabled': 'Push notifications are now enabled!'
+  };
+  const providerLabel = PROVIDER_LABELS[event.provider] || 'Assistant';
+  const sessionName = resolveSessionName(event);
+  const message = CODE_MAP[event.code] || 'You have a new notification';
+
+  return {
+    title: sessionName || 'CloudCLI',
+    body: `${providerLabel}: ${message}`,
+    data: {
+      sessionId: event.sessionId || null,
+      code: event.code,
+      provider: event.provider || null,
+      sessionName,
+      tag: `${event.provider || 'assistant'}:${event.sessionId || 'none'}:${event.code}`
+    }
+  };
+}
+
+async function sendWebPush(userId, event) {
+  const subscriptions = pushSubscriptionsDb.getSubscriptions(userId);
+  if (!subscriptions.length) return;
+
+  const payload = JSON.stringify(buildPushBody(event));
+
+  const results = await Promise.allSettled(
+    subscriptions.map((sub) =>
+      webPush.sendNotification(
+        {
+          endpoint: sub.endpoint,
+          keys: {
+            p256dh: sub.keys_p256dh,
+            auth: sub.keys_auth
+          }
+        },
+        payload
+      )
+    )
+  );
+
+  // Clean up gone subscriptions (410 Gone or 404)
+  results.forEach((result, index) => {
+    if (result.status === 'rejected') {
+      const statusCode = result.reason?.statusCode;
+      if (statusCode === 410 || statusCode === 404) {
+        pushSubscriptionsDb.removeSubscription(subscriptions[index].endpoint);
+      }
+    }
+  });
+}
+
+function notifyUserIfEnabled({ userId, event }) {
+  if (!userId || !event) {
+    return;
+  }
+
+  const preferences = notificationPreferencesDb.getPreferences(userId);
+  if (!shouldSendPush(preferences, event)) {
+    return;
+  }
+  if (isDuplicate(event)) {
+    return;
+  }
+
+  sendWebPush(userId, event).catch((err) => {
+    console.error('Web push send error:', err);
+  });
+}
+
+function notifyRunStopped({ userId, provider, sessionId = null, stopReason = 'completed', sessionName = null }) {
+  notifyUserIfEnabled({
+    userId,
+    event: createNotificationEvent({
+      provider,
+      sessionId,
+      kind: 'stop',
+      code: 'run.stopped',
+      meta: { stopReason, sessionName },
+      severity: 'info',
+      dedupeKey: `${provider}:run:stop:${sessionId || 'none'}:${stopReason}`
+    })
+  });
+}
+
+function notifyRunFailed({ userId, provider, sessionId = null, error, sessionName = null }) {
+  const errorMessage = normalizeErrorMessage(error);
+
+  notifyUserIfEnabled({
+    userId,
+    event: createNotificationEvent({
+      provider,
+      sessionId,
+      kind: 'error',
+      code: 'run.failed',
+      meta: { error: errorMessage, sessionName },
+      severity: 'error',
+      dedupeKey: `${provider}:run:error:${sessionId || 'none'}:${errorMessage}`
+    })
+  });
+}
+
+export {
+  createNotificationEvent,
+  notifyUserIfEnabled,
+  notifyRunStopped,
+  notifyRunFailed
+};

server/services/vapid-keys.js

@@ -0,0 +1,35 @@
+import webPush from 'web-push';
+import { db } from '../database/db.js';
+
+let cachedKeys = null;
+
+function ensureVapidKeys() {
+  if (cachedKeys) return cachedKeys;
+
+  const row = db.prepare('SELECT public_key, private_key FROM vapid_keys ORDER BY id DESC LIMIT 1').get();
+  if (row) {
+    cachedKeys = { publicKey: row.public_key, privateKey: row.private_key };
+    return cachedKeys;
+  }
+
+  const keys = webPush.generateVAPIDKeys();
+  db.prepare('INSERT INTO vapid_keys (public_key, private_key) VALUES (?, ?)').run(keys.publicKey, keys.privateKey);
+  cachedKeys = keys;
+  return cachedKeys;
+}
+
+function getPublicKey() {
+  return ensureVapidKeys().publicKey;
+}
+
+function configureWebPush() {
+  const keys = ensureVapidKeys();
+  webPush.setVapidDetails(
+    'mailto:noreply@claudecodeui.local',
+    keys.publicKey,
+    keys.privateKey
+  );
+  console.log('Web Push notifications configured');
+}
+
+export { ensureVapidKeys, getPublicKey, configureWebPush };

server/sessionManager.js

@@ -0,0 +1,226 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+import os from 'os';
+
+class SessionManager {
+  constructor() {
+    // Store sessions in memory with conversation history
+    this.sessions = new Map();
+    this.maxSessions = 100;
+    this.sessionsDir = path.join(os.homedir(), '.gemini', 'sessions');
+    this.ready = this.init();
+  }
+
+  async init() {
+    await this.initSessionsDir();
+    await this.loadSessions();
+  }
+
+  async initSessionsDir() {
+    try {
+      await fs.mkdir(this.sessionsDir, { recursive: true });
+    } catch (error) {
+      // console.error('Error creating sessions directory:', error);
+    }
+  }
+
+  // Create a new session
+  createSession(sessionId, projectPath) {
+    const session = {
+      id: sessionId,
+      projectPath: projectPath,
+      messages: [],
+      createdAt: new Date(),
+      lastActivity: new Date()
+    };
+
+    // Evict oldest session from memory if we exceed limit
+    if (this.sessions.size >= this.maxSessions) {
+      const oldestKey = this.sessions.keys().next().value;
+      if (oldestKey) this.sessions.delete(oldestKey);
+    }
+
+    this.sessions.set(sessionId, session);
+    this.saveSession(sessionId);
+
+    return session;
+  }
+
+  // Add a message to session
+  addMessage(sessionId, role, content) {
+    let session = this.sessions.get(sessionId);
+
+    if (!session) {
+      // Create session if it doesn't exist
+      session = this.createSession(sessionId, '');
+    }
+
+    const message = {
+      role: role, // 'user' or 'assistant'
+      content: content,
+      timestamp: new Date()
+    };
+
+    session.messages.push(message);
+    session.lastActivity = new Date();
+
+    this.saveSession(sessionId);
+
+    return session;
+  }
+
+  // Get session by ID
+  getSession(sessionId) {
+    return this.sessions.get(sessionId);
+  }
+
+  // Get all sessions for a project
+  getProjectSessions(projectPath) {
+    const sessions = [];
+
+    for (const [id, session] of this.sessions) {
+      if (session.projectPath === projectPath) {
+        sessions.push({
+          id: session.id,
+          summary: this.getSessionSummary(session),
+          messageCount: session.messages.length,
+          lastActivity: session.lastActivity
+        });
+      }
+    }
+
+    return sessions.sort((a, b) =>
+      new Date(b.lastActivity) - new Date(a.lastActivity)
+    );
+  }
+
+  // Get session summary
+  getSessionSummary(session) {
+    if (session.messages.length === 0) {
+      return 'New Session';
+    }
+
+    // Find first user message
+    const firstUserMessage = session.messages.find(m => m.role === 'user');
+    if (firstUserMessage) {
+      const content = firstUserMessage.content;
+      return content.length > 50 ? content.substring(0, 50) + '...' : content;
+    }
+
+    return 'New Session';
+  }
+
+  // Build conversation context for Gemini
+  buildConversationContext(sessionId, maxMessages = 10) {
+    const session = this.sessions.get(sessionId);
+
+    if (!session || session.messages.length === 0) {
+      return '';
+    }
+
+    // Get last N messages for context
+    const recentMessages = session.messages.slice(-maxMessages);
+
+    let context = 'Here is the conversation history:\n\n';
+
+    for (const msg of recentMessages) {
+      if (msg.role === 'user') {
+        context += `User: ${msg.content}\n`;
+      } else {
+        context += `Assistant: ${msg.content}\n`;
+      }
+    }
+
+    context += '\nBased on the conversation history above, please answer the following:\n';
+
+    return context;
+  }
+
+  // Prevent path traversal
+  _safeFilePath(sessionId) {
+    const safeId = String(sessionId).replace(/[/\\]|\.\./g, '');
+    return path.join(this.sessionsDir, `${safeId}.json`);
+  }
+
+  // Save session to disk
+  async saveSession(sessionId) {
+    const session = this.sessions.get(sessionId);
+    if (!session) return;
+
+    try {
+      const filePath = this._safeFilePath(sessionId);
+      await fs.writeFile(filePath, JSON.stringify(session, null, 2));
+    } catch (error) {
+      // console.error('Error saving session:', error);
+    }
+  }
+
+  // Load sessions from disk
+  async loadSessions() {
+    try {
+      const files = await fs.readdir(this.sessionsDir);
+
+      for (const file of files) {
+        if (file.endsWith('.json')) {
+          try {
+            const filePath = path.join(this.sessionsDir, file);
+            const data = await fs.readFile(filePath, 'utf8');
+            const session = JSON.parse(data);
+
+            // Convert dates
+            session.createdAt = new Date(session.createdAt);
+            session.lastActivity = new Date(session.lastActivity);
+            session.messages.forEach(msg => {
+              msg.timestamp = new Date(msg.timestamp);
+            });
+
+            this.sessions.set(session.id, session);
+          } catch (error) {
+            // console.error(`Error loading session ${file}:`, error);
+          }
+        }
+      }
+
+      // Enforce eviction after loading to prevent massive memory usage
+      while (this.sessions.size > this.maxSessions) {
+        const oldestKey = this.sessions.keys().next().value;
+        if (oldestKey) this.sessions.delete(oldestKey);
+      }
+    } catch (error) {
+      // console.error('Error loading sessions:', error);
+    }
+  }
+
+  // Delete a session
+  async deleteSession(sessionId) {
+    this.sessions.delete(sessionId);
+
+    try {
+      const filePath = this._safeFilePath(sessionId);
+      await fs.unlink(filePath);
+    } catch (error) {
+      // console.error('Error deleting session file:', error);
+    }
+  }
+
+  // Get session messages for display
+  getSessionMessages(sessionId) {
+    const session = this.sessions.get(sessionId);
+    if (!session) return [];
+
+    return session.messages.map(msg => ({
+      type: 'message',
+      message: {
+        role: msg.role,
+        content: msg.content
+      },
+      timestamp: msg.timestamp.toISOString()
+    }));
+  }
+}
+
+// Singleton instance
+const sessionManager = new SessionManager();
+
+export const ready = sessionManager.ready;
+export default sessionManager;

server/utils/commandParser.js

@@ -1,9 +1,9 @@
-import matter from 'gray-matter';
 import { promises as fs } from 'fs';
 import path from 'path';
 import { execFile } from 'child_process';
 import { promisify } from 'util';
 import { parse as parseShellCommand } from 'shell-quote';
+import { parseFrontmatter } from './frontmatter.js';
 
 const execFileAsync = promisify(execFile);
 
@@ -32,7 +32,7 @@ const BASH_COMMAND_ALLOWLIST = [
  */
 export function parseCommand(content) {
   try {
-    const parsed = matter(content);
+    const parsed = parseFrontmatter(content);
     return {
       data: parsed.data || {},
       content: parsed.content || '',

server/utils/frontmatter.js

@@ -0,0 +1,18 @@
+import matter from 'gray-matter';
+
+const disabledFrontmatterEngine = () => ({});
+
+const frontmatterOptions = {
+  language: 'yaml',
+  // Disable JS/JSON frontmatter parsing to avoid executable project content.
+  // Mirrors Gatsby's mitigation for gray-matter.
+  engines: {
+    js: disabledFrontmatterEngine,
+    javascript: disabledFrontmatterEngine,
+    json: disabledFrontmatterEngine
+  }
+};
+
+export function parseFrontmatter(content) {
+  return matter(content, frontmatterOptions);
+}

server/utils/gitConfig.js

@@ -1,7 +1,17 @@
-import { exec } from 'child_process';
-import { promisify } from 'util';
+import { spawn } from 'child_process';
 
-const execAsync = promisify(exec);
+function spawnAsync(command, args) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, { shell: false });
+    let stdout = '';
+    child.stdout.on('data', (data) => { stdout += data.toString(); });
+    child.on('error', (error) => { reject(error); });
+    child.on('close', (code) => {
+      if (code === 0) { resolve({ stdout }); return; }
+      reject(new Error(`Command failed with code ${code}`));
+    });
+  });
+}
 
 /**
  * Read git configuration from system's global git config
@@ -10,8 +20,8 @@ const execAsync = promisify(exec);
 export async function getSystemGitConfig() {
   try {
     const [nameResult, emailResult] = await Promise.all([
-      execAsync('git config --global user.name').catch(() => ({ stdout: '' })),
-      execAsync('git config --global user.email').catch(() => ({ stdout: '' }))
+      spawnAsync('git', ['config', '--global', 'user.name']).catch(() => ({ stdout: '' })),
+      spawnAsync('git', ['config', '--global', 'user.email']).catch(() => ({ stdout: '' }))
     ]);
 
     return {

server/utils/plugin-loader.js

@@ -0,0 +1,457 @@
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+import { spawn } from 'child_process';
+
+const PLUGINS_DIR = path.join(os.homedir(), '.claude-code-ui', 'plugins');
+const PLUGINS_CONFIG_PATH = path.join(os.homedir(), '.claude-code-ui', 'plugins.json');
+
+const REQUIRED_MANIFEST_FIELDS = ['name', 'displayName', 'entry'];
+
+/** Strip embedded credentials from a repo URL before exposing it to the client. */
+function sanitizeRepoUrl(raw) {
+  try {
+    const u = new URL(raw);
+    u.username = '';
+    u.password = '';
+    return u.toString().replace(/\/$/, '');
+  } catch {
+    // Not a parseable URL (e.g. SSH shorthand) — strip user:pass@ segment
+    return raw.replace(/\/\/[^@/]+@/, '//');
+  }
+}
+const ALLOWED_TYPES = ['react', 'module'];
+const ALLOWED_SLOTS = ['tab'];
+
+export function getPluginsDir() {
+  if (!fs.existsSync(PLUGINS_DIR)) {
+    fs.mkdirSync(PLUGINS_DIR, { recursive: true });
+  }
+  return PLUGINS_DIR;
+}
+
+export function getPluginsConfig() {
+  try {
+    if (fs.existsSync(PLUGINS_CONFIG_PATH)) {
+      return JSON.parse(fs.readFileSync(PLUGINS_CONFIG_PATH, 'utf-8'));
+    }
+  } catch {
+    // Corrupted config, start fresh
+  }
+  return {};
+}
+
+export function savePluginsConfig(config) {
+  const dir = path.dirname(PLUGINS_CONFIG_PATH);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true, mode: 0o700 });
+  }
+  fs.writeFileSync(PLUGINS_CONFIG_PATH, JSON.stringify(config, null, 2), { mode: 0o600 });
+}
+
+export function validateManifest(manifest) {
+  if (!manifest || typeof manifest !== 'object') {
+    return { valid: false, error: 'Manifest must be a JSON object' };
+  }
+
+  for (const field of REQUIRED_MANIFEST_FIELDS) {
+    if (!manifest[field] || typeof manifest[field] !== 'string') {
+      return { valid: false, error: `Missing or invalid required field: ${field}` };
+    }
+  }
+
+  // Sanitize name — only allow alphanumeric, hyphens, underscores
+  if (!/^[a-zA-Z0-9_-]+$/.test(manifest.name)) {
+    return { valid: false, error: 'Plugin name must only contain letters, numbers, hyphens, and underscores' };
+  }
+
+  if (manifest.type && !ALLOWED_TYPES.includes(manifest.type)) {
+    return { valid: false, error: `Invalid plugin type: ${manifest.type}. Must be one of: ${ALLOWED_TYPES.join(', ')}` };
+  }
+
+  if (manifest.slot && !ALLOWED_SLOTS.includes(manifest.slot)) {
+    return { valid: false, error: `Invalid plugin slot: ${manifest.slot}. Must be one of: ${ALLOWED_SLOTS.join(', ')}` };
+  }
+
+  // Validate entry is a relative path without traversal
+  if (manifest.entry.includes('..') || path.isAbsolute(manifest.entry)) {
+    return { valid: false, error: 'Entry must be a relative path without ".."' };
+  }
+
+  if (manifest.server !== undefined && manifest.server !== null) {
+    if (typeof manifest.server !== 'string' || manifest.server.includes('..') || path.isAbsolute(manifest.server)) {
+      return { valid: false, error: 'Server entry must be a relative path string without ".."' };
+    }
+  }
+
+  if (manifest.permissions !== undefined) {
+    if (!Array.isArray(manifest.permissions) || !manifest.permissions.every(p => typeof p === 'string')) {
+      return { valid: false, error: 'Permissions must be an array of strings' };
+    }
+  }
+
+  return { valid: true };
+}
+
+const BUILD_TIMEOUT_MS = 60_000;
+
+/** Run `npm run build` if the plugin's package.json declares a build script. */
+function runBuildIfNeeded(dir, packageJsonPath, onSuccess, onError) {
+  try {
+    const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+    if (!pkg.scripts?.build) {
+      return onSuccess();
+    }
+  } catch {
+    return onSuccess(); // Unreadable package.json — skip build
+  }
+
+  const buildProcess = spawn('npm', ['run', 'build'], {
+    cwd: dir,
+    stdio: ['ignore', 'pipe', 'pipe'],
+  });
+
+  let stderr = '';
+  let settled = false;
+
+  const timer = setTimeout(() => {
+    if (settled) return;
+    settled = true;
+    buildProcess.removeAllListeners();
+    buildProcess.kill();
+    onError(new Error('npm run build timed out'));
+  }, BUILD_TIMEOUT_MS);
+
+  buildProcess.stderr.on('data', (data) => { stderr += data.toString(); });
+
+  buildProcess.on('close', (code) => {
+    if (settled) return;
+    settled = true;
+    clearTimeout(timer);
+    if (code !== 0) {
+      return onError(new Error(`npm run build failed (exit code ${code}): ${stderr.trim()}`));
+    }
+    onSuccess();
+  });
+
+  buildProcess.on('error', (err) => {
+    if (settled) return;
+    settled = true;
+    clearTimeout(timer);
+    onError(new Error(`Failed to spawn build: ${err.message}`));
+  });
+}
+
+export function scanPlugins() {
+  const pluginsDir = getPluginsDir();
+  const config = getPluginsConfig();
+  const plugins = [];
+
+  let entries;
+  try {
+    entries = fs.readdirSync(pluginsDir, { withFileTypes: true });
+  } catch {
+    return plugins;
+  }
+
+  const seenNames = new Set();
+
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+    // Skip transient temp directories from in-progress installs
+    if (entry.name.startsWith('.tmp-')) continue;
+
+    const manifestPath = path.join(pluginsDir, entry.name, 'manifest.json');
+    if (!fs.existsSync(manifestPath)) continue;
+
+    try {
+      const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+      const validation = validateManifest(manifest);
+      if (!validation.valid) {
+        console.warn(`[Plugins] Skipping ${entry.name}: ${validation.error}`);
+        continue;
+      }
+
+      // Skip duplicate manifest names
+      if (seenNames.has(manifest.name)) {
+        console.warn(`[Plugins] Skipping ${entry.name}: duplicate plugin name "${manifest.name}"`);
+        continue;
+      }
+      seenNames.add(manifest.name);
+
+      // Try to read git remote URL
+      let repoUrl = null;
+      try {
+        const gitConfigPath = path.join(pluginsDir, entry.name, '.git', 'config');
+        if (fs.existsSync(gitConfigPath)) {
+          const gitConfig = fs.readFileSync(gitConfigPath, 'utf-8');
+          const match = gitConfig.match(/url\s*=\s*(.+)/);
+          if (match) {
+            repoUrl = match[1].trim().replace(/\.git$/, '');
+            // Convert SSH URLs to HTTPS
+            if (repoUrl.startsWith('git@')) {
+              repoUrl = repoUrl.replace(/^git@([^:]+):/, 'https://$1/');
+            }
+            // Strip embedded credentials (e.g. https://user:pass@host/...)
+            repoUrl = sanitizeRepoUrl(repoUrl);
+          }
+        }
+      } catch { /* ignore */ }
+
+      plugins.push({
+        name: manifest.name,
+        displayName: manifest.displayName,
+        version: manifest.version || '0.0.0',
+        description: manifest.description || '',
+        author: manifest.author || '',
+        icon: manifest.icon || 'Puzzle',
+        type: manifest.type || 'module',
+        slot: manifest.slot || 'tab',
+        entry: manifest.entry,
+        server: manifest.server || null,
+        permissions: manifest.permissions || [],
+        enabled: config[manifest.name]?.enabled !== false, // enabled by default
+        dirName: entry.name,
+        repoUrl,
+      });
+    } catch (err) {
+      console.warn(`[Plugins] Failed to read manifest for ${entry.name}:`, err.message);
+    }
+  }
+
+  return plugins;
+}
+
+export function getPluginDir(name) {
+  const plugins = scanPlugins();
+  const plugin = plugins.find(p => p.name === name);
+  if (!plugin) return null;
+  return path.join(getPluginsDir(), plugin.dirName);
+}
+
+export function resolvePluginAssetPath(name, assetPath) {
+  const pluginDir = getPluginDir(name);
+  if (!pluginDir) return null;
+
+  const resolved = path.resolve(pluginDir, assetPath);
+
+  // Prevent path traversal — canonicalize via realpath to defeat symlink bypasses
+  if (!fs.existsSync(resolved)) return null;
+
+  const realResolved = fs.realpathSync(resolved);
+  const realPluginDir = fs.realpathSync(pluginDir);
+  if (!realResolved.startsWith(realPluginDir + path.sep) && realResolved !== realPluginDir) {
+    return null;
+  }
+
+  return realResolved;
+}
+
+export function installPluginFromGit(url) {
+  return new Promise((resolve, reject) => {
+    if (typeof url !== 'string' || !url.trim()) {
+      return reject(new Error('Invalid URL: must be a non-empty string'));
+    }
+    if (url.startsWith('-')) {
+      return reject(new Error('Invalid URL: must not start with "-"'));
+    }
+
+    // Extract repo name from URL for directory name
+    const urlClean = url.replace(/\.git$/, '').replace(/\/$/, '');
+    const repoName = urlClean.split('/').pop();
+
+    if (!repoName || !/^[a-zA-Z0-9_.-]+$/.test(repoName)) {
+      return reject(new Error('Could not determine a valid directory name from the URL'));
+    }
+
+    const pluginsDir = getPluginsDir();
+    const targetDir = path.resolve(pluginsDir, repoName);
+
+    // Ensure the resolved target directory stays within the plugins directory
+    if (!targetDir.startsWith(pluginsDir + path.sep)) {
+      return reject(new Error('Invalid plugin directory path'));
+    }
+
+    if (fs.existsSync(targetDir)) {
+      return reject(new Error(`Plugin directory "${repoName}" already exists`));
+    }
+
+    // Clone into a temp directory so scanPlugins() never sees a partially-installed plugin
+    const tempDir = fs.mkdtempSync(path.join(pluginsDir, `.tmp-${repoName}-`));
+
+    const cleanupTemp = () => {
+      try { fs.rmSync(tempDir, { recursive: true, force: true }); } catch {}
+    };
+
+    const finalize = (manifest) => {
+      try {
+        fs.renameSync(tempDir, targetDir);
+      } catch (err) {
+        cleanupTemp();
+        return reject(new Error(`Failed to move plugin into place: ${err.message}`));
+      }
+      resolve(manifest);
+    };
+
+    const gitProcess = spawn('git', ['clone', '--depth', '1', '--', url, tempDir], {
+      stdio: ['ignore', 'pipe', 'pipe'],
+    });
+
+    let stderr = '';
+    gitProcess.stderr.on('data', (data) => { stderr += data.toString(); });
+
+    gitProcess.on('close', (code) => {
+      if (code !== 0) {
+        cleanupTemp();
+        return reject(new Error(`git clone failed (exit code ${code}): ${stderr.trim()}`));
+      }
+
+      // Validate manifest exists
+      const manifestPath = path.join(tempDir, 'manifest.json');
+      if (!fs.existsSync(manifestPath)) {
+        cleanupTemp();
+        return reject(new Error('Cloned repository does not contain a manifest.json'));
+      }
+
+      let manifest;
+      try {
+        manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+      } catch {
+        cleanupTemp();
+        return reject(new Error('manifest.json is not valid JSON'));
+      }
+
+      const validation = validateManifest(manifest);
+      if (!validation.valid) {
+        cleanupTemp();
+        return reject(new Error(`Invalid manifest: ${validation.error}`));
+      }
+
+      // Reject if another installed plugin already uses this name
+      const existing = scanPlugins().find(p => p.name === manifest.name);
+      if (existing) {
+        cleanupTemp();
+        return reject(new Error(`A plugin named "${manifest.name}" is already installed (in "${existing.dirName}")`));
+      }
+
+      // Run npm install if package.json exists.
+      // --ignore-scripts prevents postinstall hooks from executing arbitrary code.
+      const packageJsonPath = path.join(tempDir, 'package.json');
+      if (fs.existsSync(packageJsonPath)) {
+        const npmProcess = spawn('npm', ['install', '--ignore-scripts'], {
+          cwd: tempDir,
+          stdio: ['ignore', 'pipe', 'pipe'],
+        });
+
+        npmProcess.on('close', (npmCode) => {
+          if (npmCode !== 0) {
+            cleanupTemp();
+            return reject(new Error(`npm install for ${repoName} failed (exit code ${npmCode})`));
+          }
+          runBuildIfNeeded(tempDir, packageJsonPath, () => finalize(manifest), (err) => { cleanupTemp(); reject(err); });
+        });
+
+        npmProcess.on('error', (err) => {
+          cleanupTemp();
+          reject(err);
+        });
+      } else {
+        finalize(manifest);
+      }
+    });
+
+    gitProcess.on('error', (err) => {
+      cleanupTemp();
+      reject(new Error(`Failed to spawn git: ${err.message}`));
+    });
+  });
+}
+
+export function updatePluginFromGit(name) {
+  return new Promise((resolve, reject) => {
+    const pluginDir = getPluginDir(name);
+    if (!pluginDir) {
+      return reject(new Error(`Plugin "${name}" not found`));
+    }
+
+    // Only fast-forward to avoid silent divergence
+    const gitProcess = spawn('git', ['pull', '--ff-only', '--'], {
+      cwd: pluginDir,
+      stdio: ['ignore', 'pipe', 'pipe'],
+    });
+
+    let stderr = '';
+    gitProcess.stderr.on('data', (data) => { stderr += data.toString(); });
+
+    gitProcess.on('close', (code) => {
+      if (code !== 0) {
+        return reject(new Error(`git pull failed (exit code ${code}): ${stderr.trim()}`));
+      }
+
+      // Re-validate manifest after update
+      const manifestPath = path.join(pluginDir, 'manifest.json');
+      let manifest;
+      try {
+        manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+      } catch {
+        return reject(new Error('manifest.json is not valid JSON after update'));
+      }
+
+      const validation = validateManifest(manifest);
+      if (!validation.valid) {
+        return reject(new Error(`Invalid manifest after update: ${validation.error}`));
+      }
+
+      // Re-run npm install if package.json exists
+      const packageJsonPath = path.join(pluginDir, 'package.json');
+      if (fs.existsSync(packageJsonPath)) {
+        const npmProcess = spawn('npm', ['install', '--ignore-scripts'], {
+          cwd: pluginDir,
+          stdio: ['ignore', 'pipe', 'pipe'],
+        });
+        npmProcess.on('close', (npmCode) => {
+          if (npmCode !== 0) {
+            return reject(new Error(`npm install for ${name} failed (exit code ${npmCode})`));
+          }
+          runBuildIfNeeded(pluginDir, packageJsonPath, () => resolve(manifest), (err) => reject(err));
+        });
+        npmProcess.on('error', (err) => reject(err));
+      } else {
+        resolve(manifest);
+      }
+    });
+
+    gitProcess.on('error', (err) => {
+      reject(new Error(`Failed to spawn git: ${err.message}`));
+    });
+  });
+}
+
+export async function uninstallPlugin(name) {
+  const pluginDir = getPluginDir(name);
+  if (!pluginDir) {
+    throw new Error(`Plugin "${name}" not found`);
+  }
+
+  // On Windows, file handles may be released slightly after process exit.
+  // Retry a few times with a short delay before giving up.
+  const MAX_RETRIES = 5;
+  const RETRY_DELAY_MS = 500;
+  for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+    try {
+      fs.rmSync(pluginDir, { recursive: true, force: true });
+      break;
+    } catch (err) {
+      if (err.code === 'EBUSY' && attempt < MAX_RETRIES) {
+        await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY_MS));
+      } else {
+        throw err;
+      }
+    }
+  }
+
+  // Remove from config
+  const config = getPluginsConfig();
+  delete config[name];
+  savePluginsConfig(config);
+}

server/utils/plugin-process-manager.js

@@ -0,0 +1,184 @@
+import { spawn } from 'child_process';
+import path from 'path';
+import { scanPlugins, getPluginsConfig, getPluginDir } from './plugin-loader.js';
+
+// Map<pluginName, { process, port }>
+const runningPlugins = new Map();
+// Map<pluginName, Promise<port>> — in-flight start operations
+const startingPlugins = new Map();
+
+/**
+ * Start a plugin's server subprocess.
+ * The plugin's server entry must print a JSON line with { ready: true, port: <number> }
+ * to stdout within 10 seconds.
+ */
+export function startPluginServer(name, pluginDir, serverEntry) {
+  if (runningPlugins.has(name)) {
+    return Promise.resolve(runningPlugins.get(name).port);
+  }
+
+  // Coalesce concurrent starts for the same plugin
+  if (startingPlugins.has(name)) {
+    return startingPlugins.get(name);
+  }
+
+  const startPromise = new Promise((resolve, reject) => {
+
+    const serverPath = path.join(pluginDir, serverEntry);
+
+    // Restricted env — only essentials, no host secrets
+    const pluginProcess = spawn('node', [serverPath], {
+      cwd: pluginDir,
+      env: {
+        PATH: process.env.PATH,
+        HOME: process.env.HOME,
+        NODE_ENV: process.env.NODE_ENV || 'production',
+        PLUGIN_NAME: name,
+      },
+      stdio: ['ignore', 'pipe', 'pipe'],
+    });
+
+    let resolved = false;
+    let stdout = '';
+
+    const timeout = setTimeout(() => {
+      if (!resolved) {
+        resolved = true;
+        pluginProcess.kill();
+        reject(new Error('Plugin server did not report ready within 10 seconds'));
+      }
+    }, 10000);
+
+    pluginProcess.stdout.on('data', (data) => {
+      if (resolved) return;
+      stdout += data.toString();
+
+      // Look for the JSON ready line
+      const lines = stdout.split('\n');
+      for (const line of lines) {
+        try {
+          const msg = JSON.parse(line.trim());
+          if (msg.ready && typeof msg.port === 'number') {
+            clearTimeout(timeout);
+            resolved = true;
+            runningPlugins.set(name, { process: pluginProcess, port: msg.port });
+
+            pluginProcess.on('exit', () => {
+              runningPlugins.delete(name);
+            });
+
+            console.log(`[Plugins] Server started for "${name}" on port ${msg.port}`);
+            resolve(msg.port);
+          }
+        } catch {
+          // Not JSON yet, keep buffering
+        }
+      }
+    });
+
+    pluginProcess.stderr.on('data', (data) => {
+      console.warn(`[Plugin:${name}] ${data.toString().trim()}`);
+    });
+
+    pluginProcess.on('error', (err) => {
+      clearTimeout(timeout);
+      if (!resolved) {
+        resolved = true;
+        reject(new Error(`Failed to start plugin server: ${err.message}`));
+      }
+    });
+
+    pluginProcess.on('exit', (code) => {
+      clearTimeout(timeout);
+      runningPlugins.delete(name);
+      if (!resolved) {
+        resolved = true;
+        reject(new Error(`Plugin server exited with code ${code} before reporting ready`));
+      }
+    });
+  }).finally(() => {
+    startingPlugins.delete(name);
+  });
+
+  startingPlugins.set(name, startPromise);
+  return startPromise;
+}
+
+/**
+ * Stop a plugin's server subprocess.
+ * Returns a Promise that resolves when the process has fully exited.
+ */
+export function stopPluginServer(name) {
+  const entry = runningPlugins.get(name);
+  if (!entry) return Promise.resolve();
+
+  return new Promise((resolve) => {
+    const cleanup = () => {
+      clearTimeout(forceKillTimer);
+      runningPlugins.delete(name);
+      resolve();
+    };
+
+    entry.process.once('exit', cleanup);
+
+    entry.process.kill('SIGTERM');
+
+    // Force kill after 5 seconds if still running
+    const forceKillTimer = setTimeout(() => {
+      if (runningPlugins.has(name)) {
+        entry.process.kill('SIGKILL');
+        cleanup();
+      }
+    }, 5000);
+
+    console.log(`[Plugins] Server stopped for "${name}"`);
+  });
+}
+
+/**
+ * Get the port a running plugin server is listening on.
+ */
+export function getPluginPort(name) {
+  return runningPlugins.get(name)?.port ?? null;
+}
+
+/**
+ * Check if a plugin's server is running.
+ */
+export function isPluginRunning(name) {
+  return runningPlugins.has(name);
+}
+
+/**
+ * Stop all running plugin servers (called on host shutdown).
+ */
+export function stopAllPlugins() {
+  const stops = [];
+  for (const [name] of runningPlugins) {
+    stops.push(stopPluginServer(name));
+  }
+  return Promise.all(stops);
+}
+
+/**
+ * Start servers for all enabled plugins that have a server entry.
+ * Called once on host server boot.
+ */
+export async function startEnabledPluginServers() {
+  const plugins = scanPlugins();
+  const config = getPluginsConfig();
+
+  for (const plugin of plugins) {
+    if (!plugin.server) continue;
+    if (config[plugin.name]?.enabled === false) continue;
+
+    const pluginDir = getPluginDir(plugin.name);
+    if (!pluginDir) continue;
+
+    try {
+      await startPluginServer(plugin.name, pluginDir, plugin.server);
+    } catch (err) {
+      console.error(`[Plugins] Failed to start server for "${plugin.name}":`, err.message);
+    }
+  }
+}

shared/modelConstants.js

@@ -13,14 +13,14 @@
 export const CLAUDE_MODELS = {
   // Models in SDK format (what the actual SDK accepts)
   OPTIONS: [
-    { value: 'sonnet', label: 'Sonnet' },
-    { value: 'opus', label: 'Opus' },
-    { value: 'haiku', label: 'Haiku' },
-    { value: 'opusplan', label: 'Opus Plan' },
-    { value: 'sonnet[1m]', label: 'Sonnet [1M]' }
+    { value: "sonnet", label: "Sonnet" },
+    { value: "opus", label: "Opus" },
+    { value: "haiku", label: "Haiku" },
+    { value: "opusplan", label: "Opus Plan" },
+    { value: "sonnet[1m]", label: "Sonnet [1M]" },
   ],
 
-  DEFAULT: 'sonnet'
+  DEFAULT: "sonnet",
 };
 
 /**
@@ -28,26 +28,28 @@ export const CLAUDE_MODELS = {
  */
 export const CURSOR_MODELS = {
   OPTIONS: [
-    { value: 'gpt-5.2-high', label: 'GPT-5.2 High' },
-    { value: 'gemini-3-pro', label: 'Gemini 3 Pro' },
-    { value: 'opus-4.5-thinking', label: 'Claude 4.5 Opus (Thinking)' },
-    { value: 'gpt-5.2', label: 'GPT-5.2' },
-    { value: 'gpt-5.1', label: 'GPT-5.1' },
-    { value: 'gpt-5.1-high', label: 'GPT-5.1 High' },
-    { value: 'composer-1', label: 'Composer 1' },
-    { value: 'auto', label: 'Auto' },
-    { value: 'sonnet-4.5', label: 'Claude 4.5 Sonnet' },
-    { value: 'sonnet-4.5-thinking', label: 'Claude 4.5 Sonnet (Thinking)' },
-    { value: 'opus-4.5', label: 'Claude 4.5 Opus' },
-    { value: 'gpt-5.1-codex', label: 'GPT-5.1 Codex' },
-    { value: 'gpt-5.1-codex-high', label: 'GPT-5.1 Codex High' },
-    { value: 'gpt-5.1-codex-max', label: 'GPT-5.1 Codex Max' },
-    { value: 'gpt-5.1-codex-max-high', label: 'GPT-5.1 Codex Max High' },
-    { value: 'opus-4.1', label: 'Claude 4.1 Opus' },
-    { value: 'grok', label: 'Grok' }
+    { value: "opus-4.6-thinking", label: "Claude 4.6 Opus (Thinking)" },
+    { value: "gpt-5.3-codex", label: "GPT-5.3" },
+    { value: "gpt-5.2-high", label: "GPT-5.2 High" },
+    { value: "gemini-3-pro", label: "Gemini 3 Pro" },
+    { value: "opus-4.5-thinking", label: "Claude 4.5 Opus (Thinking)" },
+    { value: "gpt-5.2", label: "GPT-5.2" },
+    { value: "gpt-5.1", label: "GPT-5.1" },
+    { value: "gpt-5.1-high", label: "GPT-5.1 High" },
+    { value: "composer-1", label: "Composer 1" },
+    { value: "auto", label: "Auto" },
+    { value: "sonnet-4.5", label: "Claude 4.5 Sonnet" },
+    { value: "sonnet-4.5-thinking", label: "Claude 4.5 Sonnet (Thinking)" },
+    { value: "opus-4.5", label: "Claude 4.5 Opus" },
+    { value: "gpt-5.1-codex", label: "GPT-5.1 Codex" },
+    { value: "gpt-5.1-codex-high", label: "GPT-5.1 Codex High" },
+    { value: "gpt-5.1-codex-max", label: "GPT-5.1 Codex Max" },
+    { value: "gpt-5.1-codex-max-high", label: "GPT-5.1 Codex Max High" },
+    { value: "opus-4.1", label: "Claude 4.1 Opus" },
+    { value: "grok", label: "Grok" },
   ],
 
-  DEFAULT: 'gpt-5'
+  DEFAULT: "gpt-5-3-codex",
 };
 
 /**
@@ -55,13 +57,36 @@ export const CURSOR_MODELS = {
  */
 export const CODEX_MODELS = {
   OPTIONS: [
-    { value: 'gpt-5.3-codex', label: 'GPT-5.3 Codex' },
-    { value: 'gpt-5.2-codex', label: 'GPT-5.2 Codex' },
-    { value: 'gpt-5.2', label: 'GPT-5.2' },
-    { value: 'gpt-5.1-codex-max', label: 'GPT-5.1 Codex Max' },
-    { value: 'o3', label: 'O3' },
-    { value: 'o4-mini', label: 'O4-mini' }
+    { value: "gpt-5.4", label: "GPT-5.4" },
+    { value: "gpt-5.3-codex", label: "GPT-5.3 Codex" },
+    { value: "gpt-5.2-codex", label: "GPT-5.2 Codex" },
+    { value: "gpt-5.2", label: "GPT-5.2" },
+    { value: "gpt-5.1-codex-max", label: "GPT-5.1 Codex Max" },
+    { value: "o3", label: "O3" },
+    { value: "o4-mini", label: "O4-mini" },
   ],
 
-  DEFAULT: 'gpt-5.3-codex'
+  DEFAULT: "gpt-5.4",
+};
+
+/**
+ * Gemini Models
+ */
+export const GEMINI_MODELS = {
+  OPTIONS: [
+    { value: "gemini-3.1-pro-preview", label: "Gemini 3.1 Pro Preview" },
+    { value: "gemini-3-pro-preview", label: "Gemini 3 Pro Preview" },
+    { value: "gemini-3-flash-preview", label: "Gemini 3 Flash Preview" },
+    { value: "gemini-2.5-flash", label: "Gemini 2.5 Flash" },
+    { value: "gemini-2.5-pro", label: "Gemini 2.5 Pro" },
+    { value: "gemini-2.0-flash-lite", label: "Gemini 2.0 Flash Lite" },
+    { value: "gemini-2.0-flash", label: "Gemini 2.0 Flash" },
+    { value: "gemini-2.0-pro-exp", label: "Gemini 2.0 Pro Experimental" },
+    {
+      value: "gemini-2.0-flash-thinking-exp",
+      label: "Gemini 2.0 Flash Thinking",
+    },
+  ],
+
+  DEFAULT: "gemini-2.5-flash",
 };

shared/networkHosts.js

@@ -0,0 +1,22 @@
+export function isWildcardHost(host) {
+  return host === '0.0.0.0' || host === '::';
+}
+
+export function isLoopbackHost(host) {
+  return host === 'localhost' || host === '127.0.0.1' || host === '::1' || host === '[::1]';
+}
+
+export function normalizeLoopbackHost(host) {
+  if (!host) {
+    return host;
+  }
+  return isLoopbackHost(host) ? 'localhost' : host;
+}
+
+// Use localhost for connectable loopback and wildcard addresses in browser-facing URLs.
+export function getConnectableHost(host) {
+  if (!host) {
+    return 'localhost';
+  }
+  return isWildcardHost(host) || isLoopbackHost(host) ? 'localhost' : host;
+}

src/App.tsx

@@ -1,11 +1,11 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { I18nextProvider } from 'react-i18next';
 import { ThemeProvider } from './contexts/ThemeContext';
-import { AuthProvider } from './contexts/AuthContext';
+import { AuthProvider, ProtectedRoute } from './components/auth';
 import { TaskMasterProvider } from './contexts/TaskMasterContext';
 import { TasksSettingsProvider } from './contexts/TasksSettingsContext';
 import { WebSocketProvider } from './contexts/WebSocketContext';
-import ProtectedRoute from './components/ProtectedRoute';
+import { PluginsProvider } from './contexts/PluginsContext';
 import AppContent from './components/app/AppContent';
 import i18n from './i18n/config.js';
 
@@ -15,8 +15,9 @@ export default function App() {
       <ThemeProvider>
         <AuthProvider>
           <WebSocketProvider>
-            <TasksSettingsProvider>
-              <TaskMasterProvider>
+            <PluginsProvider>
+              <TasksSettingsProvider>
+                <TaskMasterProvider>
                 <ProtectedRoute>
                   <Router basename={window.__ROUTER_BASENAME__ || ''}>
                     <Routes>
@@ -25,8 +26,9 @@ export default function App() {
                     </Routes>
                   </Router>
                 </ProtectedRoute>
-              </TaskMasterProvider>
-            </TasksSettingsProvider>
+                </TaskMasterProvider>
+              </TasksSettingsProvider>
+            </PluginsProvider>
           </WebSocketProvider>
         </AuthProvider>
       </ThemeProvider>

src/components/CreateTaskModal.jsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import { X, Sparkles } from 'lucide-react';
-
-const CreateTaskModal = ({ currentProject, onClose, onTaskCreated }) => {
-
-  return (
-    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md border border-gray-200 dark:border-gray-700">
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
-          <div className="flex items-center gap-3">
-            <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-            </div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Create AI-Generated Task</h3>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
-          >
-            <X className="w-5 h-5" />
-          </button>
-        </div>
-
-        {/* Content */}
-        <div className="p-6 space-y-6">
-          {/* AI-First Approach */}
-          <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
-            <div className="flex items-start gap-3">
-              <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
-                <Sparkles className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-              </div>
-              <div className="flex-1">
-                <h4 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">
-                  💡 Pro Tip: Ask Claude Code Directly!
-                </h4>
-                <p className="text-sm text-blue-800 dark:text-blue-200 mb-3">
-                  You can simply ask Claude Code in the chat to create tasks for you. 
-                  The AI assistant will automatically generate detailed tasks with research-backed insights.
-                </p>
-                
-                <div className="bg-white dark:bg-gray-800 rounded border border-blue-200 dark:border-blue-700 p-3 mb-3">
-                  <p className="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Example:</p>
-                  <p className="text-sm text-gray-900 dark:text-white font-mono">
-                    "Please add a new task to implement user profile image uploads using Cloudinary, research the best approach."
-                  </p>
-                </div>
-                
-                <p className="text-xs text-blue-700 dark:text-blue-300">
-                  <strong>This runs:</strong> <code className="bg-blue-100 dark:bg-blue-900/50 px-1 rounded text-xs">
-                    task-master add-task --prompt="Implement user profile image uploads using Cloudinary" --research
-                  </code>
-                </p>
-              </div>
-            </div>
-          </div>
-
-          {/* Learn More Link */}
-          <div className="text-center pt-4 border-t border-gray-200 dark:border-gray-700">
-            <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
-              For more examples and advanced usage patterns:
-            </p>
-            <a
-              href="https://github.com/eyaltoledano/claude-task-master/blob/main/docs/examples.md"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-block text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline font-medium"
-            >
-              View TaskMaster Documentation →
-            </a>
-          </div>
-
-          {/* Footer */}
-          <div className="pt-4">
-            <button
-              onClick={onClose}
-              className="w-full px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
-            >
-              Got it, I'll ask Claude Code directly
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CreateTaskModal;

src/components/DarkModeToggle.tsx

@@ -1,48 +0,0 @@
-import { Moon, Sun } from 'lucide-react';
-import { useTheme } from '../contexts/ThemeContext';
-
-type DarkModeToggleProps = {
-  checked?: boolean;
-  onToggle?: (nextValue: boolean) => void;
-  ariaLabel?: string;
-};
-
-function DarkModeToggle({ checked, onToggle, ariaLabel = 'Toggle dark mode' }: DarkModeToggleProps) {
-  const { isDarkMode, toggleDarkMode } = useTheme();
-  const isControlled = typeof checked === 'boolean' && typeof onToggle === 'function';
-  const isEnabled = isControlled ? checked : isDarkMode;
-
-  const handleToggle = () => {
-    if (isControlled) {
-      onToggle(!isEnabled);
-      return;
-    }
-
-    toggleDarkMode();
-  };
-
-  return (
-    <button
-      onClick={handleToggle}
-      className="relative inline-flex h-8 w-14 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
-      role="switch"
-      aria-checked={isEnabled}
-      aria-label={ariaLabel}
-    >
-      <span className="sr-only">{ariaLabel}</span>
-      <span
-        className={`${
-          isEnabled ? 'translate-x-7' : 'translate-x-1'
-        } h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform duration-200 flex items-center justify-center`}
-      >
-        {isEnabled ? (
-          <Moon className="h-3.5 w-3.5 text-gray-700" />
-        ) : (
-          <Sun className="h-3.5 w-3.5 text-yellow-500" />
-        )}
-      </span>
-    </button>
-  );
-}
-
-export default DarkModeToggle;

src/components/DiffViewer.jsx

@@ -1,41 +0,0 @@
-import React from 'react';
-
-function DiffViewer({ diff, fileName, isMobile, wrapText }) {
-  if (!diff) {
-    return (
-      <div className="p-4 text-center text-muted-foreground text-sm">
-        No diff available
-      </div>
-    );
-  }
-
-  const renderDiffLine = (line, index) => {
-    const isAddition = line.startsWith('+') && !line.startsWith('+++');
-    const isDeletion = line.startsWith('-') && !line.startsWith('---');
-    const isHeader = line.startsWith('@@');
-
-    return (
-      <div
-        key={index}
-        className={`font-mono text-xs px-3 py-0.5 ${
-          isMobile && wrapText ? 'whitespace-pre-wrap break-all' : 'whitespace-pre overflow-x-auto'
-        } ${
-          isAddition ? 'bg-green-50 dark:bg-green-950/50 text-green-700 dark:text-green-300' :
-          isDeletion ? 'bg-red-50 dark:bg-red-950/50 text-red-700 dark:text-red-300' :
-          isHeader ? 'bg-primary/5 text-primary' :
-          'text-muted-foreground/70'
-        }`}
-      >
-        {line}
-      </div>
-    );
-  };
-
-  return (
-    <div className="diff-viewer">
-      {diff.split('\n').map((line, index) => renderDiffLine(line, index))}
-    </div>
-  );
-}
-
-export default DiffViewer;

src/components/ErrorBoundary.jsx

@@ -1,77 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
-
-function ErrorFallback({ error, resetErrorBoundary, showDetails, componentStack }) {
-  return (
-    <div className="flex flex-col items-center justify-center p-8 text-center">
-      <div className="bg-red-50 border border-red-200 rounded-lg p-6 max-w-md">
-        <div className="flex items-center mb-4">
-          <div className="flex-shrink-0">
-            <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
-              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
-            </svg>
-          </div>
-          <h3 className="ml-3 text-sm font-medium text-red-800">
-            Something went wrong
-          </h3>
-        </div>
-        <div className="text-sm text-red-700">
-          <p className="mb-2">An error occurred while loading the chat interface.</p>
-          {showDetails && error && (
-            <details className="mt-4">
-              <summary className="cursor-pointer text-xs font-mono">Error Details</summary>
-              <pre className="mt-2 text-xs bg-red-100 p-2 rounded overflow-auto max-h-40">
-                {error.toString()}
-                {componentStack}
-              </pre>
-            </details>
-          )}
-        </div>
-        <div className="mt-4">
-          <button
-            onClick={resetErrorBoundary}
-            className="bg-red-600 text-white px-4 py-2 rounded text-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500"
-          >
-            Try Again
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function ErrorBoundary({ children, showDetails = false, onRetry = undefined, resetKeys = undefined }) {
-  const [componentStack, setComponentStack] = useState(null);
-
-  const handleError = useCallback((error, errorInfo) => {
-    console.error('ErrorBoundary caught an error:', error, errorInfo);
-    setComponentStack(errorInfo?.componentStack || null);
-  }, []);
-
-  const handleReset = useCallback(() => {
-    setComponentStack(null);
-    onRetry?.();
-  }, [onRetry]);
-
-  const renderFallback = useCallback(({ error, resetErrorBoundary }) => (
-    <ErrorFallback
-      error={error}
-      resetErrorBoundary={resetErrorBoundary}
-      showDetails={showDetails}
-      componentStack={componentStack}
-    />
-  ), [showDetails, componentStack]);
-
-  return (
-    <ReactErrorBoundary
-      fallbackRender={renderFallback}
-      onError={handleError}
-      onReset={handleReset}
-      resetKeys={resetKeys}
-    >
-      {children}
-    </ReactErrorBoundary>
-  );
-}
-
-export default ErrorBoundary;

src/components/LanguageSelector.jsx

@@ -1,74 +0,0 @@
-/**
- * Language Selector Component
- *
- * A dropdown component for selecting the application language.
- * Automatically updates the i18n language and persists to localStorage.
- *
- * Props:
- * @param {boolean} compact - If true, uses compact style (default: false)
- */
-
-import { useTranslation } from 'react-i18next';
-import { Languages } from 'lucide-react';
-import { languages } from '../i18n/languages';
-
-function LanguageSelector({ compact = false }) {
-  const { i18n, t } = useTranslation('settings');
-
-  const handleLanguageChange = (event) => {
-    const newLanguage = event.target.value;
-    i18n.changeLanguage(newLanguage);
-  };
-
-  // Compact style for QuickSettingsPanel
-  if (compact) {
-    return (
-      <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-        <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-          <Languages className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-          {t('account.language')}
-        </span>
-        <select
-          value={i18n.language}
-          onChange={handleLanguageChange}
-          className="w-[100px] text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
-        >
-          {languages.map((lang) => (
-            <option key={lang.value} value={lang.value}>
-              {lang.nativeName}
-            </option>
-          ))}
-        </select>
-      </div>
-    );
-  }
-
-  // Full style for Settings page
-  return (
-    <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <div className="font-medium text-gray-900 dark:text-gray-100 mb-1">
-            {t('account.languageLabel')}
-          </div>
-          <div className="text-sm text-gray-600 dark:text-gray-400">
-            {t('account.languageDescription')}
-          </div>
-        </div>
-        <select
-          value={i18n.language}
-          onChange={handleLanguageChange}
-          className="text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2 w-36"
-        >
-          {languages.map((lang) => (
-            <option key={lang.value} value={lang.value}>
-              {lang.nativeName}
-            </option>
-          ))}
-        </select>
-      </div>
-    </div>
-  );
-}
-
-export default LanguageSelector;

src/components/LoginForm.jsx

@@ -1,112 +0,0 @@
-import React, { useState } from 'react';
-import { useAuth } from '../contexts/AuthContext';
-import { MessageSquare } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-
-const LoginForm = () => {
-  const { t } = useTranslation('auth');
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-
-  const { login } = useAuth();
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError('');
-
-    if (!username || !password) {
-      setError(t('errors.requiredFields'));
-      return;
-    }
-
-    setIsLoading(true);
-
-    const result = await login(username, password);
-
-    if (!result.success) {
-      setError(result.error);
-    }
-
-    setIsLoading(false);
-  };
-
-  return (
-    <div className="min-h-screen bg-background flex items-center justify-center p-4">
-      <div className="w-full max-w-md">
-        <div className="bg-card rounded-lg shadow-lg border border-border p-8 space-y-6">
-          {/* Logo and Title */}
-          <div className="text-center">
-            <div className="flex justify-center mb-4">
-              <div className="w-16 h-16 bg-primary rounded-lg flex items-center justify-center shadow-sm">
-                <MessageSquare className="w-8 h-8 text-primary-foreground" />
-              </div>
-            </div>
-            <h1 className="text-2xl font-bold text-foreground">{t('login.title')}</h1>
-            <p className="text-muted-foreground mt-2">
-              {t('login.description')}
-            </p>
-          </div>
-
-          {/* Login Form */}
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label htmlFor="username" className="block text-sm font-medium text-foreground mb-1">
-                {t('login.username')}
-              </label>
-              <input
-                type="text"
-                id="username"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder={t('login.placeholders.username')}
-                required
-                disabled={isLoading}
-              />
-            </div>
-
-            <div>
-              <label htmlFor="password" className="block text-sm font-medium text-foreground mb-1">
-                {t('login.password')}
-              </label>
-              <input
-                type="password"
-                id="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder={t('login.placeholders.password')}
-                required
-                disabled={isLoading}
-              />
-            </div>
-
-            {error && (
-              <div className="p-3 bg-red-100 dark:bg-red-900/20 border border-red-300 dark:border-red-800 rounded-md">
-                <p className="text-sm text-red-700 dark:text-red-400">{error}</p>
-              </div>
-            )}
-
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200"
-            >
-              {isLoading ? t('login.loading') : t('login.submit')}
-            </button>
-          </form>
-
-          <div className="text-center">
-            <p className="text-sm text-muted-foreground">
-              Enter your credentials to access Claude Code UI
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LoginForm;

src/components/LoginModal.jsx

@@ -1,92 +0,0 @@
-import { X } from 'lucide-react';
-import StandaloneShell from './standalone-shell/view/StandaloneShell';
-import { IS_PLATFORM } from '../constants/config';
-
-/**
- * Reusable login modal component for Claude, Cursor, and Codex CLI authentication
- *
- * @param {Object} props
- * @param {boolean} props.isOpen - Whether the modal is visible
- * @param {Function} props.onClose - Callback when modal is closed
- * @param {'claude'|'cursor'|'codex'} props.provider - Which CLI provider to authenticate with
- * @param {Object} props.project - Project object containing name and path information
- * @param {Function} props.onComplete - Callback when login process completes (receives exitCode)
- * @param {string} props.customCommand - Optional custom command to override defaults
- * @param {boolean} props.isAuthenticated - Whether user is already authenticated (for re-auth flow)
- */
-function LoginModal({
-  isOpen,
-  onClose,
-  provider = 'claude',
-  project,
-  onComplete,
-  customCommand,
-  isAuthenticated = false,
-  isOnboarding = false
-}) {
-  if (!isOpen) return null;
-
-  const getCommand = () => {
-    if (customCommand) return customCommand;
-
-    switch (provider) {
-      case 'claude':
-        return isAuthenticated ? 'claude setup-token --dangerously-skip-permissions' : isOnboarding ? 'claude /exit --dangerously-skip-permissions' : 'claude /login --dangerously-skip-permissions';
-      case 'cursor':
-        return 'cursor-agent login';
-      case 'codex':
-        return IS_PLATFORM ? 'codex login --device-auth' : 'codex login';
-      default:
-        return isAuthenticated ? 'claude setup-token --dangerously-skip-permissions' : isOnboarding ? 'claude /exit --dangerously-skip-permissions' : 'claude /login --dangerously-skip-permissions';
-    }
-  };
-
-  const getTitle = () => {
-    switch (provider) {
-      case 'claude':
-        return 'Claude CLI Login';
-      case 'cursor':
-        return 'Cursor CLI Login';
-      case 'codex':
-        return 'Codex CLI Login';
-      default:
-        return 'CLI Login';
-    }
-  };
-
-  const handleComplete = (exitCode) => {
-    if (onComplete) {
-      onComplete(exitCode);
-    }
-    // Keep modal open so users can read login output and close explicitly.
-  };
-
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[9999] max-md:items-stretch max-md:justify-stretch">
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-4xl h-3/4 flex flex-col md:max-w-4xl md:h-3/4 md:rounded-lg md:m-4 max-md:max-w-none max-md:h-full max-md:rounded-none max-md:m-0">
-        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-            {getTitle()}
-          </h3>
-          <button
-            onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
-            aria-label="Close login modal"
-          >
-            <X className="w-6 h-6" />
-          </button>
-        </div>
-        <div className="flex-1 overflow-hidden">
-          <StandaloneShell
-            project={project}
-            command={getCommand()}
-            onComplete={handleComplete}
-            minimal={true}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default LoginModal;

src/components/MobileNav.jsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import { MessageSquare, Folder, Terminal, GitBranch, ClipboardCheck } from 'lucide-react';
-import { useTasksSettings } from '../contexts/TasksSettingsContext';
-import { useTaskMaster } from '../contexts/TaskMasterContext';
-
-function MobileNav({ activeTab, setActiveTab, isInputFocused }) {
-  const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings();
-  const shouldShowTasksTab = Boolean(tasksEnabled && isTaskMasterInstalled);
-
-  const navItems = [
-    {
-      id: 'chat',
-      icon: MessageSquare,
-      label: 'Chat',
-      onClick: () => setActiveTab('chat')
-    },
-    {
-      id: 'shell',
-      icon: Terminal,
-      label: 'Shell',
-      onClick: () => setActiveTab('shell')
-    },
-    {
-      id: 'files',
-      icon: Folder,
-      label: 'Files',
-      onClick: () => setActiveTab('files')
-    },
-    {
-      id: 'git',
-      icon: GitBranch,
-      label: 'Git',
-      onClick: () => setActiveTab('git')
-    },
-    ...(shouldShowTasksTab ? [{
-      id: 'tasks',
-      icon: ClipboardCheck,
-      label: 'Tasks',
-      onClick: () => setActiveTab('tasks')
-    }] : [])
-  ];
-
-  return (
-    <div
-      className={`fixed bottom-0 left-0 right-0 z-50 px-3 pb-[max(8px,env(safe-area-inset-bottom))] transform transition-transform duration-300 ease-in-out ${
-        isInputFocused ? 'translate-y-full' : 'translate-y-0'
-      }`}
-    >
-      <div className="nav-glass mobile-nav-float rounded-2xl border border-border/30">
-        <div className="flex items-center justify-around px-1 py-1.5 gap-0.5">
-          {navItems.map((item) => {
-            const Icon = item.icon;
-            const isActive = activeTab === item.id;
-
-            return (
-              <button
-                key={item.id}
-                onClick={item.onClick}
-                onTouchStart={(e) => {
-                  e.preventDefault();
-                  item.onClick();
-                }}
-                className={`flex flex-col items-center justify-center gap-0.5 px-3 py-2 rounded-xl flex-1 relative touch-manipulation transition-all duration-200 active:scale-95 ${
-                  isActive
-                    ? 'text-primary'
-                    : 'text-muted-foreground hover:text-foreground'
-                }`}
-                aria-label={item.label}
-                aria-current={isActive ? 'page' : undefined}
-              >
-                {isActive && (
-                  <div className="absolute inset-0 bg-primary/8 dark:bg-primary/12 rounded-xl" />
-                )}
-                <Icon
-                  className={`relative z-10 transition-all duration-200 ${isActive ? 'w-5 h-5' : 'w-[18px] h-[18px]'}`}
-                  strokeWidth={isActive ? 2.4 : 1.8}
-                />
-                <span className={`relative z-10 text-[10px] font-medium transition-all duration-200 ${isActive ? 'opacity-100' : 'opacity-60'}`}>
-                  {item.label}
-                </span>
-              </button>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default MobileNav;

src/components/NextTaskBanner.jsx

@@ -1,695 +0,0 @@
-import React, { useState } from 'react';
-import { ArrowRight, List, Clock, Flag, CheckCircle, Circle, AlertCircle, Pause, ChevronDown, ChevronUp, Plus, FileText, Settings, X, Terminal, Eye, Play, Zap, Target } from 'lucide-react';
-import { cn } from '../lib/utils';
-import { useTaskMaster } from '../contexts/TaskMasterContext';
-import { api } from '../utils/api';
-import Shell from './shell/view/Shell';
-import TaskDetail from './TaskDetail';
-
-const NextTaskBanner = ({ onShowAllTasks, onStartTask, className = '' }) => {
-  const { nextTask, tasks, currentProject, isLoadingTasks, projectTaskMaster, refreshTasks, refreshProjects } = useTaskMaster();
-  const [showDetails, setShowDetails] = useState(false);
-  const [showTaskOptions, setShowTaskOptions] = useState(false);
-  const [showCreateTaskModal, setShowCreateTaskModal] = useState(false);
-  const [showTemplateSelector, setShowTemplateSelector] = useState(false);
-  const [showCLI, setShowCLI] = useState(false);
-  const [showTaskDetail, setShowTaskDetail] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  // Handler functions
-  const handleInitializeTaskMaster = async () => {
-    if (!currentProject) return;
-    
-    setIsLoading(true);
-    try {
-      const response = await api.taskmaster.init(currentProject.name);
-      if (response.ok) {
-        await refreshProjects();
-        setShowTaskOptions(false);
-      } else {
-        const error = await response.json();
-        console.error('Failed to initialize TaskMaster:', error);
-        alert(`Failed to initialize TaskMaster: ${error.message}`);
-      }
-    } catch (error) {
-      console.error('Error initializing TaskMaster:', error);
-      alert('Error initializing TaskMaster. Please try again.');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCreateManualTask = () => {
-    setShowCreateTaskModal(true);
-    setShowTaskOptions(false);
-  };
-
-  const handleParsePRD = () => {
-    setShowTemplateSelector(true);
-    setShowTaskOptions(false);
-  };
-
-  // Don't show if no project or still loading
-  if (!currentProject || isLoadingTasks) {
-    return null;
-  }
-
-  let bannerContent;
-
-  // Show setup message only if no tasks exist AND TaskMaster is not configured
-  if ((!tasks || tasks.length === 0) && !projectTaskMaster?.hasTaskmaster) {
-    bannerContent = (
-      <div className={cn(
-        'bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg p-3 mb-4',
-        className
-      )}>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <List className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-            <div>
-              <div className="text-sm font-medium text-gray-900 dark:text-white">
-                TaskMaster AI is not configured
-              </div>
-              <div className="text-xs text-gray-600 dark:text-gray-400 mt-0.5">
-              </div>
-            </div>
-          </div>
-          <div className="flex items-center gap-1">
-            <button
-              onClick={() => setShowTaskOptions(!showTaskOptions)}
-              className="text-xs px-2 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors flex items-center gap-1"
-            >
-              <Settings className="w-3 h-3" />
-              Initialize TaskMaster AI
-            </button>
-          </div>
-        </div>
-        
-        {showTaskOptions && (
-          <div className="mt-3 pt-3 border-t border-blue-200 dark:border-blue-800">
-            {!projectTaskMaster?.hasTaskmaster && (
-              <div className="mb-3 p-3 bg-blue-50 dark:bg-blue-900/50 rounded-lg">
-                <h4 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">
-                  🎯 What is TaskMaster?
-                </h4>
-                <div className="text-xs text-blue-800 dark:text-blue-200 space-y-1">
-                  <p>• <strong>AI-Powered Task Management:</strong> Break complex projects into manageable subtasks</p>
-                  <p>• <strong>PRD Templates:</strong> Generate tasks from Product Requirements Documents</p>
-                  <p>• <strong>Dependency Tracking:</strong> Understand task relationships and execution order</p>
-                  <p>• <strong>Progress Visualization:</strong> Kanban boards and detailed task analytics</p>
-                  <p>• <strong>CLI Integration:</strong> Use taskmaster commands for advanced workflows</p>
-                </div>
-              </div>
-            )}
-            <div className="flex flex-col gap-2">
-              {!projectTaskMaster?.hasTaskmaster ? (
-                <button
-                  className="text-xs px-3 py-2 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-200 rounded transition-colors text-left flex items-center gap-2"
-                  onClick={() => setShowCLI(true)}
-                >
-                  <Terminal className="w-3 h-3" />
-                  Initialize TaskMaster
-                </button>
-              ) : (
-                <>
-                  <div className="mb-2 p-2 bg-green-50 dark:bg-green-900/30 rounded text-xs text-green-800 dark:text-green-200">
-                    <strong>Add more tasks:</strong> Create additional tasks manually or generate them from a PRD template
-                  </div>
-                  <button
-                    className="text-xs px-3 py-2 bg-green-100 dark:bg-green-900 hover:bg-green-200 dark:hover:bg-green-800 text-green-800 dark:text-green-200 rounded transition-colors text-left flex items-center gap-2 disabled:opacity-50"
-                    onClick={handleCreateManualTask}
-                    disabled={isLoading}
-                  >
-                    <Plus className="w-3 h-3" />
-                    Create a new task manually
-                  </button>
-                  <button
-                    className="text-xs px-3 py-2 bg-purple-100 dark:bg-purple-900 hover:bg-purple-200 dark:hover:bg-purple-800 text-purple-800 dark:text-purple-200 rounded transition-colors text-left flex items-center gap-2 disabled:opacity-50"
-                    onClick={handleParsePRD}
-                    disabled={isLoading}
-                  >
-                    <FileText className="w-3 h-3" />
-                    {isLoading ? 'Parsing...' : 'Generate tasks from PRD template'}
-                  </button>
-                </>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  } else if (nextTask) {
-    // Show next task if available
-    bannerContent = (
-      <div className={cn(
-        'bg-slate-50 dark:bg-slate-900/30 border border-slate-200 dark:border-slate-700 rounded-lg p-3 mb-4',
-        className
-      )}>
-        <div className="flex items-center justify-between gap-3">
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 mb-1">
-              <div className="w-5 h-5 bg-blue-100 dark:bg-blue-900/50 rounded-full flex items-center justify-center flex-shrink-0">
-                <Target className="w-3 h-3 text-blue-600 dark:text-blue-400" />
-              </div>
-              <span className="text-xs text-slate-600 dark:text-slate-400 font-medium">Task {nextTask.id}</span>
-              {nextTask.priority === 'high' && (
-                <div className="w-4 h-4 rounded bg-red-100 dark:bg-red-900/50 flex items-center justify-center" title="High Priority">
-                  <Zap className="w-2.5 h-2.5 text-red-600 dark:text-red-400" />
-                </div>
-              )}
-              {nextTask.priority === 'medium' && (
-                <div className="w-4 h-4 rounded bg-amber-100 dark:bg-amber-900/50 flex items-center justify-center" title="Medium Priority">
-                  <Flag className="w-2.5 h-2.5 text-amber-600 dark:text-amber-400" />
-                </div>
-              )}
-              {nextTask.priority === 'low' && (
-                <div className="w-4 h-4 rounded bg-gray-100 dark:bg-gray-800 flex items-center justify-center" title="Low Priority">
-                  <Circle className="w-2.5 h-2.5 text-gray-400 dark:text-gray-500" />
-                </div>
-              )}
-            </div>
-            <p className="text-sm font-medium text-slate-900 dark:text-slate-100 line-clamp-1">
-              {nextTask.title}
-            </p>
-          </div>
-          
-          <div className="flex items-center gap-1 flex-shrink-0">
-            <button
-              onClick={() => onStartTask?.()}
-              className="text-xs px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-md font-medium transition-colors shadow-sm flex items-center gap-1"
-            >
-              <Play className="w-3 h-3" />
-              Start Task
-            </button>
-            <button
-              onClick={() => setShowTaskDetail(true)}
-              className="text-xs px-2 py-1.5 border border-slate-300 dark:border-slate-600 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300 rounded-md transition-colors flex items-center gap-1"
-              title="View task details"
-            >
-              <Eye className="w-3 h-3" />
-            </button>
-            {onShowAllTasks && (
-              <button
-                onClick={onShowAllTasks}
-                className="text-xs px-2 py-1.5 border border-slate-300 dark:border-slate-600 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300 rounded-md transition-colors flex items-center gap-1"
-                title="View all tasks"
-              >
-                <List className="w-3 h-3" />
-              </button>
-            )}
-          </div>
-        </div>
-        
-      </div>
-    );
-  } else if (tasks && tasks.length > 0) {
-    // Show completion message only if there are tasks and all are done
-    const completedTasks = tasks.filter(task => task.status === 'done').length;
-    const totalTasks = tasks.length;
-    
-    bannerContent = (
-    <div className={cn(
-      'bg-purple-50 dark:bg-purple-950 border border-purple-200 dark:border-purple-800 rounded-lg p-3 mb-4',
-      className
-    )}>
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <CheckCircle className="w-4 h-4 text-purple-600 dark:text-purple-400" />
-          <span className="text-sm font-medium text-gray-900 dark:text-white">
-            {completedTasks === totalTasks ? "All done! 🎉" : "No pending tasks"}
-          </span>
-        </div>
-        <div className="flex items-center gap-2">
-          <span className="text-xs text-gray-600 dark:text-gray-400">
-            {completedTasks}/{totalTasks}
-          </span>
-          <button
-            onClick={onShowAllTasks}
-            className="text-xs px-2 py-1 bg-purple-600 hover:bg-purple-700 text-white rounded transition-colors"
-          >
-            Review
-          </button>
-        </div>
-      </div>
-    </div>
-    );
-  } else {
-    // TaskMaster is configured but no tasks exist - don't show anything in chat
-    bannerContent = null;
-  }
-
-  return (
-    <>
-      {bannerContent}
-      
-      {/* Create Task Modal */}
-      {showCreateTaskModal && (
-        <CreateTaskModal
-          currentProject={currentProject}
-          onClose={() => setShowCreateTaskModal(false)}
-          onTaskCreated={() => {
-            refreshTasks();
-            setShowCreateTaskModal(false);
-          }}
-        />
-      )}
-      
-      {/* Template Selector Modal */}
-      {showTemplateSelector && (
-        <TemplateSelector
-          currentProject={currentProject}
-          onClose={() => setShowTemplateSelector(false)}
-          onTemplateApplied={() => {
-            refreshTasks();
-            setShowTemplateSelector(false);
-          }}
-        />
-      )}
-      
-      {/* TaskMaster CLI Setup Modal */}
-      {showCLI && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
-          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 w-full max-w-4xl h-[600px] flex flex-col">
-            {/* Modal Header */}
-            <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-              <div className="flex items-center gap-3">
-                <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
-                  <Terminal className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-                </div>
-                <div>
-                  <h2 className="text-lg font-semibold text-gray-900 dark:text-white">TaskMaster Setup</h2>
-                  <p className="text-sm text-gray-500 dark:text-gray-400">Interactive CLI for {currentProject?.displayName}</p>
-                </div>
-              </div>
-              <button
-                onClick={() => setShowCLI(false)}
-                className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
-              >
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-            
-            {/* Terminal Container */}
-            <div className="flex-1 p-4">
-              <div className="h-full bg-black rounded-lg overflow-hidden">
-                <Shell 
-                  selectedProject={currentProject}
-                  selectedSession={null}
-                  isActive={true}
-                  initialCommand="npx task-master init"
-                  isPlainShell={true}
-                />
-              </div>
-            </div>
-            
-            {/* Modal Footer */}
-            <div className="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
-              <div className="flex items-center justify-between">
-                <div className="text-sm text-gray-600 dark:text-gray-400">
-                  TaskMaster initialization will start automatically
-                </div>
-                <button
-                  onClick={() => setShowCLI(false)}
-                  className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
-                >
-                  Close
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Task Detail Modal */}
-      {showTaskDetail && nextTask && (
-        <TaskDetail
-          task={nextTask}
-          isOpen={showTaskDetail}
-          onClose={() => setShowTaskDetail(false)}
-          onStatusChange={() => refreshTasks?.()}
-          onTaskClick={null} // Disable dependency navigation in NextTaskBanner for now
-        />
-      )}
-    </>
-  );
-};
-
-// Simple Create Task Modal Component
-const CreateTaskModal = ({ currentProject, onClose, onTaskCreated }) => {
-  const [formData, setFormData] = useState({
-    title: '',
-    description: '',
-    priority: 'medium',
-    useAI: false,
-    prompt: ''
-  });
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!currentProject) return;
-
-    setIsSubmitting(true);
-    try {
-      const taskData = formData.useAI 
-        ? { prompt: formData.prompt, priority: formData.priority }
-        : { title: formData.title, description: formData.description, priority: formData.priority };
-
-      const response = await api.taskmaster.addTask(currentProject.name, taskData);
-      
-      if (response.ok) {
-        onTaskCreated();
-      } else {
-        const error = await response.json();
-        console.error('Failed to create task:', error);
-        alert(`Failed to create task: ${error.message}`);
-      }
-    } catch (error) {
-      console.error('Error creating task:', error);
-      alert('Error creating task. Please try again.');
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md">
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Create New Task</h3>
-          <button
-            onClick={onClose}
-            className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded"
-          >
-            <X className="w-4 h-4" />
-          </button>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-              <input
-                type="checkbox"
-                checked={formData.useAI}
-                onChange={(e) => setFormData(prev => ({ ...prev, useAI: e.target.checked }))}
-              />
-              Use AI to generate task details
-            </label>
-          </div>
-
-          {formData.useAI ? (
-            <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Task Description (AI will generate details)
-              </label>
-              <textarea
-                value={formData.prompt}
-                onChange={(e) => setFormData(prev => ({ ...prev, prompt: e.target.value }))}
-                className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-                rows="3"
-                placeholder="Describe what you want to accomplish..."
-                required
-              />
-            </div>
-          ) : (
-            <>
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  Task Title
-                </label>
-                <input
-                  type="text"
-                  value={formData.title}
-                  onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
-                  className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-                  placeholder="Enter task title..."
-                  required
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  Description
-                </label>
-                <textarea
-                  value={formData.description}
-                  onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
-                  className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-                  rows="3"
-                  placeholder="Describe the task..."
-                  required
-                />
-              </div>
-            </>
-          )}
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-              Priority
-            </label>
-            <select
-              value={formData.priority}
-              onChange={(e) => setFormData(prev => ({ ...prev, priority: e.target.value }))}
-              className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-            >
-              <option value="low">Low</option>
-              <option value="medium">Medium</option>
-              <option value="high">High</option>
-            </select>
-          </div>
-
-          <div className="flex gap-2 pt-4">
-            <button
-              type="button"
-              onClick={onClose}
-              className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
-              disabled={isSubmitting}
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded disabled:opacity-50"
-              disabled={isSubmitting || (formData.useAI && !formData.prompt.trim()) || (!formData.useAI && (!formData.title.trim() || !formData.description.trim()))}
-            >
-              {isSubmitting ? 'Creating...' : 'Create Task'}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};
-
-// Template Selector Modal Component
-const TemplateSelector = ({ currentProject, onClose, onTemplateApplied }) => {
-  const [templates, setTemplates] = useState([]);
-  const [selectedTemplate, setSelectedTemplate] = useState(null);
-  const [customizations, setCustomizations] = useState({});
-  const [fileName, setFileName] = useState('prd.txt');
-  const [isLoading, setIsLoading] = useState(true);
-  const [isApplying, setIsApplying] = useState(false);
-  const [step, setStep] = useState('select'); // 'select', 'customize', 'generate'
-
-  useEffect(() => {
-    const loadTemplates = async () => {
-      try {
-        const response = await api.taskmaster.getTemplates();
-        if (response.ok) {
-          const data = await response.json();
-          setTemplates(data.templates);
-        }
-      } catch (error) {
-        console.error('Error loading templates:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    
-    loadTemplates();
-  }, []);
-
-  const handleSelectTemplate = (template) => {
-    setSelectedTemplate(template);
-    // Find placeholders in template content
-    const placeholders = template.content.match(/\[([^\]]+)\]/g) || [];
-    const uniquePlaceholders = [...new Set(placeholders.map(p => p.slice(1, -1)))];
-    
-    const initialCustomizations = {};
-    uniquePlaceholders.forEach(placeholder => {
-      initialCustomizations[placeholder] = '';
-    });
-    
-    setCustomizations(initialCustomizations);
-    setStep('customize');
-  };
-
-  const handleApplyTemplate = async () => {
-    if (!selectedTemplate || !currentProject) return;
-
-    setIsApplying(true);
-    try {
-      // Apply template
-      const applyResponse = await api.taskmaster.applyTemplate(currentProject.name, {
-        templateId: selectedTemplate.id,
-        fileName,
-        customizations
-      });
-
-      if (!applyResponse.ok) {
-        const error = await applyResponse.json();
-        throw new Error(error.message || 'Failed to apply template');
-      }
-
-      // Parse PRD to generate tasks
-      const parseResponse = await api.taskmaster.parsePRD(currentProject.name, {
-        fileName,
-        numTasks: 10
-      });
-
-      if (!parseResponse.ok) {
-        const error = await parseResponse.json();
-        throw new Error(error.message || 'Failed to generate tasks');
-      }
-
-      setStep('generate');
-      setTimeout(() => {
-        onTemplateApplied();
-      }, 2000);
-
-    } catch (error) {
-      console.error('Error applying template:', error);
-      alert(`Error: ${error.message}`);
-      setIsApplying(false);
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-        <div className="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md">
-          <div className="flex items-center gap-3">
-            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
-            <span className="text-gray-900 dark:text-white">Loading templates...</span>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto">
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-            {step === 'select' ? 'Select PRD Template' : 
-             step === 'customize' ? 'Customize Template' : 
-             'Generating Tasks'}
-          </h3>
-          <button
-            onClick={onClose}
-            className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded"
-          >
-            <X className="w-4 h-4" />
-          </button>
-        </div>
-
-        {step === 'select' && (
-          <div className="space-y-3">
-            {templates.map((template) => (
-              <div
-                key={template.id}
-                className="p-4 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors"
-                onClick={() => handleSelectTemplate(template)}
-              >
-                <div className="flex items-start justify-between">
-                  <div className="flex-1">
-                    <h4 className="font-medium text-gray-900 dark:text-white">{template.name}</h4>
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">{template.description}</p>
-                    <span className="inline-block text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded mt-2">
-                      {template.category}
-                    </span>
-                  </div>
-                  <ArrowRight className="w-4 h-4 text-gray-400 mt-1" />
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {step === 'customize' && selectedTemplate && (
-          <div className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                File Name
-              </label>
-              <input
-                type="text"
-                value={fileName}
-                onChange={(e) => setFileName(e.target.value)}
-                className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-                placeholder="prd.txt"
-              />
-            </div>
-
-            {Object.keys(customizations).length > 0 && (
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  Customize Template
-                </label>
-                <div className="space-y-3">
-                  {Object.entries(customizations).map(([key, value]) => (
-                    <div key={key}>
-                      <label className="block text-xs text-gray-600 dark:text-gray-400 mb-1">
-                        {key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}
-                      </label>
-                      <input
-                        type="text"
-                        value={value}
-                        onChange={(e) => setCustomizations(prev => ({ ...prev, [key]: e.target.value }))}
-                        className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-                        placeholder={`Enter ${key.toLowerCase()}`}
-                      />
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            <div className="flex gap-2 pt-4">
-              <button
-                onClick={() => setStep('select')}
-                className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
-              >
-                Back
-              </button>
-              <button
-                onClick={handleApplyTemplate}
-                className="flex-1 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded disabled:opacity-50"
-                disabled={isApplying}
-              >
-                {isApplying ? 'Applying...' : 'Apply & Generate Tasks'}
-              </button>
-            </div>
-          </div>
-        )}
-
-        {step === 'generate' && (
-          <div className="text-center py-8">
-            <div className="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-4">
-              <CheckCircle className="w-8 h-8 text-green-600 dark:text-green-400" />
-            </div>
-            <h4 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
-              Template Applied Successfully!
-            </h4>
-            <p className="text-gray-600 dark:text-gray-400">
-              Your PRD has been created and tasks are being generated...
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default NextTaskBanner;

src/components/Onboarding.jsx

@@ -1,585 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { ChevronRight, ChevronLeft, Check, GitBranch, User, Mail, LogIn, ExternalLink, Loader2 } from 'lucide-react';
-import SessionProviderLogo from './llm-logo-provider/SessionProviderLogo';
-import LoginModal from './LoginModal';
-import { authenticatedFetch } from '../utils/api';
-import { useAuth } from '../contexts/AuthContext';
-import { IS_PLATFORM } from '../constants/config';
-
-const Onboarding = ({ onComplete }) => {
-  const [currentStep, setCurrentStep] = useState(0);
-  const [gitName, setGitName] = useState('');
-  const [gitEmail, setGitEmail] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [error, setError] = useState('');
-
-  const [activeLoginProvider, setActiveLoginProvider] = useState(null);
-  const [selectedProject] = useState({ name: 'default', fullPath: IS_PLATFORM ? '/workspace' : '' });
-
-  const [claudeAuthStatus, setClaudeAuthStatus] = useState({
-    authenticated: false,
-    email: null,
-    loading: true,
-    error: null
-  });
-
-  const [cursorAuthStatus, setCursorAuthStatus] = useState({
-    authenticated: false,
-    email: null,
-    loading: true,
-    error: null
-  });
-
-  const [codexAuthStatus, setCodexAuthStatus] = useState({
-    authenticated: false,
-    email: null,
-    loading: true,
-    error: null
-  });
-
-  const { user } = useAuth();
-
-  const prevActiveLoginProviderRef = useRef(undefined);
-
-  useEffect(() => {
-    loadGitConfig();
-  }, []);
-
-  const loadGitConfig = async () => {
-    try {
-      const response = await authenticatedFetch('/api/user/git-config');
-      if (response.ok) {
-        const data = await response.json();
-        if (data.gitName) setGitName(data.gitName);
-        if (data.gitEmail) setGitEmail(data.gitEmail);
-      }
-    } catch (error) {
-      console.error('Error loading git config:', error);
-    }
-  };
-
-  useEffect(() => {
-    const prevProvider = prevActiveLoginProviderRef.current;
-    prevActiveLoginProviderRef.current = activeLoginProvider;
-
-    const isInitialMount = prevProvider === undefined;
-    const isModalClosing = prevProvider !== null && activeLoginProvider === null;
-
-    if (isInitialMount || isModalClosing) {
-      checkClaudeAuthStatus();
-      checkCursorAuthStatus();
-      checkCodexAuthStatus();
-    }
-  }, [activeLoginProvider]);
-
-  const checkClaudeAuthStatus = async () => {
-    try {
-      const response = await authenticatedFetch('/api/cli/claude/status');
-      if (response.ok) {
-        const data = await response.json();
-        setClaudeAuthStatus({
-          authenticated: data.authenticated,
-          email: data.email,
-          loading: false,
-          error: data.error || null
-        });
-      } else {
-        setClaudeAuthStatus({
-          authenticated: false,
-          email: null,
-          loading: false,
-          error: 'Failed to check authentication status'
-        });
-      }
-    } catch (error) {
-      console.error('Error checking Claude auth status:', error);
-      setClaudeAuthStatus({
-        authenticated: false,
-        email: null,
-        loading: false,
-        error: error.message
-      });
-    }
-  };
-
-  const checkCursorAuthStatus = async () => {
-    try {
-      const response = await authenticatedFetch('/api/cli/cursor/status');
-      if (response.ok) {
-        const data = await response.json();
-        setCursorAuthStatus({
-          authenticated: data.authenticated,
-          email: data.email,
-          loading: false,
-          error: data.error || null
-        });
-      } else {
-        setCursorAuthStatus({
-          authenticated: false,
-          email: null,
-          loading: false,
-          error: 'Failed to check authentication status'
-        });
-      }
-    } catch (error) {
-      console.error('Error checking Cursor auth status:', error);
-      setCursorAuthStatus({
-        authenticated: false,
-        email: null,
-        loading: false,
-        error: error.message
-      });
-    }
-  };
-
-  const checkCodexAuthStatus = async () => {
-    try {
-      const response = await authenticatedFetch('/api/cli/codex/status');
-      if (response.ok) {
-        const data = await response.json();
-        setCodexAuthStatus({
-          authenticated: data.authenticated,
-          email: data.email,
-          loading: false,
-          error: data.error || null
-        });
-      } else {
-        setCodexAuthStatus({
-          authenticated: false,
-          email: null,
-          loading: false,
-          error: 'Failed to check authentication status'
-        });
-      }
-    } catch (error) {
-      console.error('Error checking Codex auth status:', error);
-      setCodexAuthStatus({
-        authenticated: false,
-        email: null,
-        loading: false,
-        error: error.message
-      });
-    }
-  };
-
-  const handleClaudeLogin = () => setActiveLoginProvider('claude');
-  const handleCursorLogin = () => setActiveLoginProvider('cursor');
-  const handleCodexLogin = () => setActiveLoginProvider('codex');
-
-  const handleLoginComplete = (exitCode) => {
-    if (exitCode === 0) {
-      if (activeLoginProvider === 'claude') {
-        checkClaudeAuthStatus();
-      } else if (activeLoginProvider === 'cursor') {
-        checkCursorAuthStatus();
-      } else if (activeLoginProvider === 'codex') {
-        checkCodexAuthStatus();
-      }
-    }
-  };
-
-  const handleNextStep = async () => {
-    setError('');
-
-    // Step 0: Git config validation and submission
-    if (currentStep === 0) {
-      if (!gitName.trim() || !gitEmail.trim()) {
-        setError('Both git name and email are required');
-        return;
-      }
-
-      // Validate email format
-      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      if (!emailRegex.test(gitEmail)) {
-        setError('Please enter a valid email address');
-        return;
-      }
-
-      setIsSubmitting(true);
-      try {
-        // Save git config to backend (which will also apply git config --global)
-        const response = await authenticatedFetch('/api/user/git-config', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ gitName, gitEmail })
-        });
-
-        if (!response.ok) {
-          const data = await response.json();
-          throw new Error(data.error || 'Failed to save git configuration');
-        }
-
-        setCurrentStep(currentStep + 1);
-      } catch (err) {
-        setError(err.message);
-      } finally {
-        setIsSubmitting(false);
-      }
-      return;
-    }
-
-    setCurrentStep(currentStep + 1);
-  };
-
-  const handlePrevStep = () => {
-    setError('');
-    setCurrentStep(currentStep - 1);
-  };
-
-  const handleFinish = async () => {
-    setIsSubmitting(true);
-    setError('');
-
-    try {
-      const response = await authenticatedFetch('/api/user/complete-onboarding', {
-        method: 'POST'
-      });
-
-      if (!response.ok) {
-        const data = await response.json();
-        throw new Error(data.error || 'Failed to complete onboarding');
-      }
-
-      if (onComplete) {
-        onComplete();
-      }
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const steps = [
-    {
-      title: 'Git Configuration',
-      description: 'Set up your git identity for commits',
-      icon: GitBranch,
-      required: true
-    },
-    {
-      title: 'Connect Agents',
-      description: 'Connect your AI coding assistants',
-      icon: LogIn,
-      required: false
-    }
-  ];
-
-  const renderStepContent = () => {
-    switch (currentStep) {
-      case 0:
-        return (
-          <div className="space-y-6">
-            <div className="text-center mb-8">
-              <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
-                <GitBranch className="w-8 h-8 text-blue-600 dark:text-blue-400" />
-              </div>
-              <h2 className="text-2xl font-bold text-foreground mb-2">Git Configuration</h2>
-              <p className="text-muted-foreground">
-                Configure your git identity to ensure proper attribution for your commits
-              </p>
-            </div>
-
-            <div className="space-y-4">
-              <div>
-                <label htmlFor="gitName" className="flex items-center gap-2 text-sm font-medium text-foreground mb-2">
-                  <User className="w-4 h-4" />
-                  Git Name <span className="text-red-500">*</span>
-                </label>
-                <input
-                  type="text"
-                  id="gitName"
-                  value={gitName}
-                  onChange={(e) => setGitName(e.target.value)}
-                  className="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                  placeholder="John Doe"
-                  required
-                  disabled={isSubmitting}
-                />
-                <p className="mt-1 text-xs text-muted-foreground">
-                  This will be used as: git config --global user.name
-                </p>
-              </div>
-
-              <div>
-                <label htmlFor="gitEmail" className="flex items-center gap-2 text-sm font-medium text-foreground mb-2">
-                  <Mail className="w-4 h-4" />
-                  Git Email <span className="text-red-500">*</span>
-                </label>
-                <input
-                  type="email"
-                  id="gitEmail"
-                  value={gitEmail}
-                  onChange={(e) => setGitEmail(e.target.value)}
-                  className="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                  placeholder="john@example.com"
-                  required
-                  disabled={isSubmitting}
-                />
-                <p className="mt-1 text-xs text-muted-foreground">
-                  This will be used as: git config --global user.email
-                </p>
-              </div>
-            </div>
-          </div>
-        );
-
-      case 1:
-        return (
-          <div className="space-y-6">
-            <div className="text-center mb-6">
-              <h2 className="text-2xl font-bold text-foreground mb-2">Connect Your AI Agents</h2>
-              <p className="text-muted-foreground">
-                Login to one or more AI coding assistants. All are optional.
-              </p>
-            </div>
-
-            {/* Agent Cards Grid */}
-            <div className="space-y-3">
-              {/* Claude */}
-              <div className={`border rounded-lg p-4 transition-colors ${
-                claudeAuthStatus.authenticated
-                  ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
-                  : 'border-border bg-card'
-              }`}>
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center">
-                      <SessionProviderLogo provider="claude" className="w-5 h-5" />
-                    </div>
-                    <div>
-                      <div className="font-medium text-foreground flex items-center gap-2">
-                        Claude Code
-                        {claudeAuthStatus.authenticated && <Check className="w-4 h-4 text-green-500" />}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {claudeAuthStatus.loading ? 'Checking...' :
-                         claudeAuthStatus.authenticated ? claudeAuthStatus.email || 'Connected' : 'Not connected'}
-                      </div>
-                    </div>
-                  </div>
-                  {!claudeAuthStatus.authenticated && !claudeAuthStatus.loading && (
-                    <button
-                      onClick={handleClaudeLogin}
-                      className="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-4 rounded-lg transition-colors"
-                    >
-                      Login
-                    </button>
-                  )}
-                </div>
-              </div>
-
-              {/* Cursor */}
-              <div className={`border rounded-lg p-4 transition-colors ${
-                cursorAuthStatus.authenticated
-                  ? 'bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800'
-                  : 'border-border bg-card'
-              }`}>
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center">
-                      <SessionProviderLogo provider="cursor" className="w-5 h-5" />
-                    </div>
-                    <div>
-                      <div className="font-medium text-foreground flex items-center gap-2">
-                        Cursor
-                        {cursorAuthStatus.authenticated && <Check className="w-4 h-4 text-green-500" />}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {cursorAuthStatus.loading ? 'Checking...' :
-                         cursorAuthStatus.authenticated ? cursorAuthStatus.email || 'Connected' : 'Not connected'}
-                      </div>
-                    </div>
-                  </div>
-                  {!cursorAuthStatus.authenticated && !cursorAuthStatus.loading && (
-                    <button
-                      onClick={handleCursorLogin}
-                      className="bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium py-2 px-4 rounded-lg transition-colors"
-                    >
-                      Login
-                    </button>
-                  )}
-                </div>
-              </div>
-
-              {/* Codex */}
-              <div className={`border rounded-lg p-4 transition-colors ${
-                codexAuthStatus.authenticated
-                  ? 'bg-gray-100 dark:bg-gray-800/50 border-gray-300 dark:border-gray-600'
-                  : 'border-border bg-card'
-              }`}>
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-                      <SessionProviderLogo provider="codex" className="w-5 h-5" />
-                    </div>
-                    <div>
-                      <div className="font-medium text-foreground flex items-center gap-2">
-                        OpenAI Codex
-                        {codexAuthStatus.authenticated && <Check className="w-4 h-4 text-green-500" />}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {codexAuthStatus.loading ? 'Checking...' :
-                         codexAuthStatus.authenticated ? codexAuthStatus.email || 'Connected' : 'Not connected'}
-                      </div>
-                    </div>
-                  </div>
-                  {!codexAuthStatus.authenticated && !codexAuthStatus.loading && (
-                    <button
-                      onClick={handleCodexLogin}
-                      className="bg-gray-800 hover:bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600 text-white text-sm font-medium py-2 px-4 rounded-lg transition-colors"
-                    >
-                      Login
-                    </button>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            <div className="text-center text-sm text-muted-foreground pt-2">
-              <p>You can configure these later in Settings.</p>
-            </div>
-          </div>
-        );
-
-      default:
-        return null;
-    }
-  };
-
-  const isStepValid = () => {
-    switch (currentStep) {
-      case 0:
-        return gitName.trim() && gitEmail.trim() && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(gitEmail);
-      case 1:
-        return true; 
-      default:
-        return false;
-    }
-  };
-
-  return (
-    <>
-      <div className="min-h-screen bg-background flex items-center justify-center p-4">
-        <div className="w-full max-w-2xl">
-          {/* Progress Steps */}
-          <div className="mb-8">
-            <div className="flex items-center justify-between">
-              {steps.map((step, index) => (
-                <React.Fragment key={index}>
-                  <div className="flex flex-col items-center flex-1">
-                    <div className={`w-12 h-12 rounded-full flex items-center justify-center border-2 transition-colors duration-200 ${
-                      index < currentStep ? 'bg-green-500 border-green-500 text-white' :
-                      index === currentStep ? 'bg-blue-600 border-blue-600 text-white' :
-                      'bg-background border-border text-muted-foreground'
-                    }`}>
-                      {index < currentStep ? (
-                        <Check className="w-6 h-6" />
-                      ) : typeof step.icon === 'function' ? (
-                        <step.icon />
-                      ) : (
-                        <step.icon className="w-6 h-6" />
-                      )}
-                    </div>
-                    <div className="mt-2 text-center">
-                      <p className={`text-sm font-medium ${
-                        index === currentStep ? 'text-foreground' : 'text-muted-foreground'
-                      }`}>
-                        {step.title}
-                      </p>
-                      {step.required && (
-                        <span className="text-xs text-red-500">Required</span>
-                      )}
-                    </div>
-                  </div>
-                  {index < steps.length - 1 && (
-                    <div className={`flex-1 h-0.5 mx-2 transition-colors duration-200 ${
-                      index < currentStep ? 'bg-green-500' : 'bg-border'
-                    }`} />
-                  )}
-                </React.Fragment>
-              ))}
-            </div>
-          </div>
-
-          {/* Main Card */}
-          <div className="bg-card rounded-lg shadow-lg border border-border p-8">
-            {renderStepContent()}
-
-            {/* Error Message */}
-            {error && (
-              <div className="mt-6 p-4 bg-red-100 dark:bg-red-900/20 border border-red-300 dark:border-red-800 rounded-lg">
-                <p className="text-sm text-red-700 dark:text-red-400">{error}</p>
-              </div>
-            )}
-
-            {/* Navigation Buttons */}
-            <div className="flex items-center justify-between mt-8 pt-6 border-t border-border">
-              <button
-                onClick={handlePrevStep}
-                disabled={currentStep === 0 || isSubmitting}
-                className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
-              >
-                <ChevronLeft className="w-4 h-4" />
-                Previous
-              </button>
-
-              <div className="flex items-center gap-3">
-                {currentStep < steps.length - 1 ? (
-                  <button
-                    onClick={handleNextStep}
-                    disabled={!isStepValid() || isSubmitting}
-                    className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors duration-200"
-                  >
-                    {isSubmitting ? (
-                      <>
-                        <Loader2 className="w-4 h-4 animate-spin" />
-                        Saving...
-                      </>
-                    ) : (
-                      <>
-                        Next
-                        <ChevronRight className="w-4 h-4" />
-                      </>
-                    )}
-                  </button>
-                ) : (
-                  <button
-                    onClick={handleFinish}
-                    disabled={isSubmitting}
-                    className="flex items-center gap-2 px-6 py-3 bg-green-600 hover:bg-green-700 disabled:bg-green-400 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors duration-200"
-                  >
-                    {isSubmitting ? (
-                      <>
-                        <Loader2 className="w-4 h-4 animate-spin" />
-                        Completing...
-                      </>
-                    ) : (
-                      <>
-                        <Check className="w-4 h-4" />
-                        Complete Setup
-                      </>
-                    )}
-                  </button>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {activeLoginProvider && (
-        <LoginModal
-          isOpen={!!activeLoginProvider}
-          onClose={() => setActiveLoginProvider(null)}
-          provider={activeLoginProvider}
-          project={selectedProject}
-          onComplete={handleLoginComplete}
-          isOnboarding={true}
-        />
-      )}
-    </>
-  );
-};
-
-export default Onboarding;

src/components/PRDEditor.jsx

@@ -1,871 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import CodeMirror from '@uiw/react-codemirror';
-import { markdown } from '@codemirror/lang-markdown';
-import { oneDark } from '@codemirror/theme-one-dark';
-import { EditorView } from '@codemirror/view';
-import { X, Save, Download, Maximize2, Minimize2, Eye, FileText, Sparkles, AlertTriangle } from 'lucide-react';
-import { cn } from '../lib/utils';
-import { api, authenticatedFetch } from '../utils/api';
-
-const PRDEditor = ({ 
-  file, 
-  onClose, 
-  projectPath,
-  project, // Add project object
-  initialContent = '',
-  isNewFile = false,
-  onSave
-}) => {
-  const [content, setContent] = useState(initialContent);
-  const [loading, setLoading] = useState(!isNewFile);
-  const [saving, setSaving] = useState(false);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const [isDarkMode, setIsDarkMode] = useState(true);
-  const [saveSuccess, setSaveSuccess] = useState(false);
-  const [previewMode, setPreviewMode] = useState(false);
-  const [wordWrap, setWordWrap] = useState(true); // Default to true for markdown
-  const [fileName, setFileName] = useState('');
-  const [showGenerateModal, setShowGenerateModal] = useState(false);
-  const [showOverwriteConfirm, setShowOverwriteConfirm] = useState(false);
-  const [existingPRDs, setExistingPRDs] = useState([]);
-  
-  const editorRef = useRef(null);
-
-  const PRD_TEMPLATE = `# Product Requirements Document - Example Project
-
-## 1. Overview
-**Product Name:** AI-Powered Task Manager
-**Version:** 1.0
-**Date:** 2024-12-27
-**Author:** Development Team
-
-This document outlines the requirements for building an AI-powered task management application that integrates with development workflows and provides intelligent task breakdown and prioritization.
-
-## 2. Objectives
-- Create an intuitive task management system that works seamlessly with developer tools
-- Provide AI-powered task generation from high-level requirements
-- Enable real-time collaboration and progress tracking
-- Integrate with popular development environments (VS Code, Cursor, etc.)
-
-### Success Metrics
-- User adoption rate > 80% within development teams
-- Task completion rate improvement of 25%
-- Time-to-delivery reduction of 15%
-
-## 3. User Stories
-
-### Core Functionality
-- As a project manager, I want to create PRDs that automatically generate detailed tasks so I can save time on project planning
-- As a developer, I want to see my next task clearly highlighted so I can maintain focus
-- As a team lead, I want to track progress across multiple projects so I can provide accurate status updates
-- As a developer, I want tasks to be broken down into implementable subtasks so I can work more efficiently
-
-### AI Integration
-- As a user, I want to describe a feature in natural language and get detailed implementation tasks so I can start working immediately
-- As a project manager, I want the AI to analyze task complexity and suggest appropriate time estimates
-- As a developer, I want intelligent task prioritization based on dependencies and deadlines
-
-### Collaboration
-- As a team member, I want to see real-time updates when tasks are completed so I can coordinate my work
-- As a stakeholder, I want to view project progress through intuitive dashboards
-- As a developer, I want to add implementation notes to tasks for future reference
-
-## 4. Functional Requirements
-
-### Task Management
-- Create, edit, and delete tasks with rich metadata (priority, status, dependencies, estimates)
-- Hierarchical task structure with subtasks and sub-subtasks
-- Real-time status updates and progress tracking
-- Dependency management with circular dependency detection
-- Bulk operations (move, update status, assign)
-
-### AI Features
-- Natural language PRD parsing to generate structured tasks
-- Intelligent task breakdown with complexity analysis
-- Automated subtask generation with implementation details
-- Smart dependency suggestion
-- Progress prediction based on historical data
-
-### Integration Features
-- VS Code/Cursor extension for in-editor task management
-- Git integration for linking commits to tasks
-- API for third-party tool integration
-- Webhook support for external notifications
-- CLI tool for command-line task management
-
-### User Interface
-- Responsive web application (desktop and mobile)
-- Multiple view modes (Kanban, list, calendar)
-- Dark/light theme support
-- Drag-and-drop task organization
-- Advanced filtering and search capabilities
-- Keyboard shortcuts for power users
-
-## 5. Technical Requirements
-
-### Frontend
-- React.js with TypeScript for type safety
-- Modern UI framework (Tailwind CSS)
-- State management (Context API or Redux)
-- Real-time updates via WebSockets
-- Progressive Web App (PWA) support
-- Accessibility compliance (WCAG 2.1 AA)
-
-### Backend
-- Node.js with Express.js framework
-- RESTful API design with OpenAPI documentation
-- Real-time communication via Socket.io
-- Background job processing
-- Rate limiting and security middleware
-
-### AI Integration
-- Integration with multiple AI providers (OpenAI, Anthropic, etc.)
-- Fallback model support
-- Context-aware prompt engineering
-- Token usage optimization
-- Model response caching
-
-### Database
-- Primary: PostgreSQL for relational data
-- Cache: Redis for session management and real-time features
-- Full-text search capabilities
-- Database migrations and seeding
-- Backup and recovery procedures
-
-### Infrastructure
-- Docker containerization
-- Cloud deployment (AWS/GCP/Azure)
-- Auto-scaling capabilities
-- Monitoring and logging (structured logging)
-- CI/CD pipeline with automated testing
-
-## 6. Non-Functional Requirements
-
-### Performance
-- Page load time < 2 seconds
-- API response time < 500ms for 95% of requests
-- Support for 1000+ concurrent users
-- Efficient handling of large task lists (10,000+ tasks)
-
-### Security
-- JWT-based authentication with refresh tokens
-- Role-based access control (RBAC)
-- Data encryption at rest and in transit
-- Regular security audits and penetration testing
-- GDPR and privacy compliance
-
-### Reliability
-- 99.9% uptime SLA
-- Graceful error handling and recovery
-- Data backup every 6 hours with point-in-time recovery
-- Disaster recovery plan with RTO < 4 hours
-
-### Scalability
-- Horizontal scaling for both frontend and backend
-- Database read replicas for query optimization
-- CDN for static asset delivery
-- Microservices architecture for future expansion
-
-## 7. User Experience Design
-
-### Information Architecture
-- Intuitive navigation with breadcrumbs
-- Context-aware menus and actions
-- Progressive disclosure of complex features
-- Consistent design patterns throughout
-
-### Interaction Design
-- Smooth animations and transitions
-- Immediate feedback for user actions
-- Undo/redo functionality for critical operations
-- Smart defaults and auto-save features
-
-### Visual Design
-- Modern, clean interface with plenty of whitespace
-- Consistent color scheme and typography
-- Clear visual hierarchy with proper contrast ratios
-- Iconography that supports comprehension
-
-## 8. Integration Requirements
-
-### Development Tools
-- VS Code extension with task panel and quick actions
-- Cursor IDE integration with AI task suggestions
-- Terminal CLI for command-line workflow
-- Browser extension for web-based tools
-
-### Third-Party Services
-- GitHub/GitLab integration for issue sync
-- Slack/Discord notifications
-- Calendar integration (Google Calendar, Outlook)
-- Time tracking tools (Toggl, Harvest)
-
-### APIs and Webhooks
-- RESTful API with comprehensive documentation
-- GraphQL endpoint for complex queries
-- Webhook system for external integrations
-- SDK development for major programming languages
-
-## 9. Implementation Phases
-
-### Phase 1: Core MVP (8-10 weeks)
-- Basic task management (CRUD operations)
-- Simple AI task generation
-- Web interface with essential features
-- User authentication and basic permissions
-
-### Phase 2: Enhanced Features (6-8 weeks)
-- Advanced AI features (complexity analysis, subtask generation)
-- Real-time collaboration
-- Mobile-responsive design
-- Integration with one development tool (VS Code)
-
-### Phase 3: Enterprise Features (4-6 weeks)
-- Advanced user management and permissions
-- API and webhook system
-- Performance optimization
-- Comprehensive testing and security audit
-
-### Phase 4: Ecosystem Expansion (4-6 weeks)
-- Additional tool integrations
-- Mobile app development
-- Advanced analytics and reporting
-- Third-party marketplace preparation
-
-## 10. Risk Assessment
-
-### Technical Risks
-- AI model reliability and cost management
-- Real-time synchronization complexity
-- Database performance with large datasets
-- Integration complexity with multiple tools
-
-### Business Risks
-- User adoption in competitive market
-- AI provider dependency
-- Data privacy and security concerns
-- Feature scope creep and timeline delays
-
-### Mitigation Strategies
-- Implement robust error handling and fallback systems
-- Develop comprehensive testing strategy
-- Create detailed documentation and user guides
-- Establish clear project scope and change management process
-
-## 11. Success Criteria
-
-### Development Milestones
-- Alpha version with core features completed
-- Beta version with selected user group feedback
-- Production-ready version with full feature set
-- Post-launch iterations based on user feedback
-
-### Business Metrics
-- User engagement and retention rates
-- Task completion and productivity metrics
-- Customer satisfaction scores (NPS > 50)
-- Revenue targets and subscription growth
-
-## 12. Appendices
-
-### Glossary
-- **PRD**: Product Requirements Document
-- **AI**: Artificial Intelligence
-- **CRUD**: Create, Read, Update, Delete
-- **API**: Application Programming Interface
-- **CI/CD**: Continuous Integration/Continuous Deployment
-
-### References
-- Industry best practices for task management
-- AI integration patterns and examples
-- Security and compliance requirements
-- Performance benchmarking data
-
----
-
-**Document Control:**
-- Version: 1.0
-- Last Updated: December 27, 2024
-- Next Review: January 15, 2025
-- Approved By: Product Owner, Technical Lead`;
-
-  // Initialize filename and load content
-  useEffect(() => {
-    const initializeEditor = async () => {
-      // Set initial filename
-      if (file?.name) {
-        setFileName(file.name.replace(/\.(txt|md)$/, '')); // Remove extension for editing
-      } else if (isNewFile) {
-        // Generate default filename based on current date
-        const now = new Date();
-        const dateStr = now.toISOString().split('T')[0]; // YYYY-MM-DD
-        setFileName(`prd-${dateStr}`);
-      }
-
-      // Load content
-      if (isNewFile) {
-        setContent(PRD_TEMPLATE);
-        setLoading(false);
-        return;
-      }
-
-      // If content is directly provided (for existing PRDs loaded from API)
-      if (file.content) {
-        setContent(file.content);
-        setLoading(false);
-        return;
-      }
-
-      // Fallback to loading from file path (legacy support)
-      try {
-        setLoading(true);
-        
-        const response = await api.readFile(file.projectName, file.path);
-        
-        if (!response.ok) {
-          throw new Error(`Failed to load file: ${response.status} ${response.statusText}`);
-        }
-        
-        const data = await response.json();
-        setContent(data.content || PRD_TEMPLATE);
-      } catch (error) {
-        console.error('Error loading PRD file:', error);
-        setContent(`# Error Loading PRD\n\nError: ${error.message}\n\nFile: ${file?.name || 'New PRD'}\nPath: ${file?.path || 'Not saved yet'}\n\n${PRD_TEMPLATE}`);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    initializeEditor();
-  }, [file, projectPath, isNewFile]);
-
-  // Fetch existing PRDs to check for conflicts
-  useEffect(() => {
-    const fetchExistingPRDs = async () => {
-      if (!project?.name) {
-        console.log('No project name available:', project);
-        return;
-      }
-      
-      try {
-        console.log('Fetching PRDs for project:', project.name);
-        const response = await api.get(`/taskmaster/prd/${encodeURIComponent(project.name)}`);
-        if (response.ok) {
-          const data = await response.json();
-          console.log('Fetched existing PRDs:', data.prds);
-          setExistingPRDs(data.prds || []);
-        } else {
-          console.log('Failed to fetch PRDs:', response.status, response.statusText);
-        }
-      } catch (error) {
-        console.error('Error fetching existing PRDs:', error);
-      }
-    };
-
-    fetchExistingPRDs();
-  }, [project?.name]);
-
-  const handleSave = async () => {
-    if (!content.trim()) {
-      alert('Please add content before saving.');
-      return;
-    }
-
-    if (!fileName.trim()) {
-      alert('Please provide a filename for the PRD.');
-      return;
-    }
-
-    // Check if file already exists
-    const fullFileName = fileName.endsWith('.txt') || fileName.endsWith('.md') ? fileName : `${fileName}.txt`;
-    const existingFile = existingPRDs.find(prd => prd.name === fullFileName);
-    
-    console.log('Save check:', {
-      fullFileName,
-      existingPRDs,
-      existingFile,
-      isExisting: file?.isExisting,
-      fileObject: file,
-      shouldShowModal: existingFile && !file?.isExisting
-    });
-    
-    if (existingFile && !file?.isExisting) {
-      console.log('Showing overwrite confirmation modal');
-      // Show confirmation modal for overwrite
-      setShowOverwriteConfirm(true);
-      return;
-    }
-
-    await performSave();
-  };
-
-  const performSave = async () => {
-    setSaving(true);
-    try {
-      // Ensure filename has .txt extension
-      const fullFileName = fileName.endsWith('.txt') || fileName.endsWith('.md') ? fileName : `${fileName}.txt`;
-      
-      const response = await authenticatedFetch(`/api/taskmaster/prd/${encodeURIComponent(project?.name)}`, {
-        method: 'POST',
-        body: JSON.stringify({
-          fileName: fullFileName,
-          content
-        })
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.message || `Save failed: ${response.status}`);
-      }
-      
-      // Show success feedback
-      setSaveSuccess(true);
-      setTimeout(() => setSaveSuccess(false), 2000);
-      
-      // Update existing PRDs list
-      const response2 = await api.get(`/taskmaster/prd/${encodeURIComponent(project.name)}`);
-      if (response2.ok) {
-        const data = await response2.json();
-        setExistingPRDs(data.prds || []);
-      }
-      
-      // Call the onSave callback if provided (for UI updates)
-      if (onSave) {
-        await onSave();
-      }
-      
-    } catch (error) {
-      console.error('Error saving PRD:', error);
-      alert(`Error saving PRD: ${error.message}`);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleDownload = () => {
-    const blob = new Blob([content], { type: 'text/markdown' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    const downloadFileName = fileName ? `${fileName}.txt` : 'prd.txt';
-    a.download = downloadFileName;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
-
-  const handleGenerateTasks = async () => {
-    if (!content.trim()) {
-      alert('Please add content to the PRD before generating tasks.');
-      return;
-    }
-
-    // Show AI-first modal instead of simple confirm
-    setShowGenerateModal(true);
-  };
-
-
-  const toggleFullscreen = () => {
-    setIsFullscreen(!isFullscreen);
-  };
-
-  // Handle keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (e.ctrlKey || e.metaKey) {
-        if (e.key === 's') {
-          e.preventDefault();
-          handleSave();
-        } else if (e.key === 'Escape') {
-          e.preventDefault();
-          onClose();
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [content]);
-
-  // Simple markdown to HTML converter for preview
-  const renderMarkdown = (markdown) => {
-    return markdown
-      .replace(/^### (.*$)/gim, '<h3>$1</h3>')
-      .replace(/^## (.*$)/gim, '<h2>$1</h2>')
-      .replace(/^# (.*$)/gim, '<h1>$1</h1>')
-      .replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
-      .replace(/\*(.*)\*/gim, '<em>$1</em>')
-      .replace(/^\- (.*$)/gim, '<li>$1</li>')
-      .replace(/(<li>.*<\/li>)/gims, '<ul>$1</ul>')
-      .replace(/\n\n/gim, '</p><p>')
-      .replace(/^(?!<[h|u|l])(.*$)/gim, '<p>$1</p>')
-      .replace(/<\/ul>\s*<ul>/gim, '');
-  };
-
-  if (loading) {
-    return (
-      <div className="fixed inset-0 z-[200] md:bg-black/50 md:flex md:items-center md:justify-center">
-        <div className="w-full h-full md:rounded-lg md:w-auto md:h-auto p-8 flex items-center justify-center bg-white dark:bg-gray-900">
-          <div className="flex items-center gap-3">
-            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
-            <span className="text-gray-900 dark:text-white">Loading PRD...</span>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`fixed inset-0 z-[200] ${
-      'md:bg-black/50 md:flex md:items-center md:justify-center md:p-4'
-    } ${isFullscreen ? 'md:p-0' : ''}`}>
-      <div className={cn(
-        'bg-white dark:bg-gray-900 shadow-2xl flex flex-col',
-        'w-full h-full md:rounded-lg md:shadow-2xl',
-        isFullscreen 
-          ? 'md:w-full md:h-full md:rounded-none' 
-          : 'md:w-full md:max-w-6xl md:h-[85vh] md:max-h-[85vh]'
-      )}>
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0 min-w-0">
-          <div className="flex items-center gap-3 min-w-0 flex-1">
-            <div className="w-8 h-8 bg-purple-600 rounded flex items-center justify-center flex-shrink-0">
-              <FileText className="w-4 h-4 text-white" />
-            </div>
-            <div className="min-w-0 flex-1">
-              {/* Mobile: Stack filename and tags vertically for more space */}
-              <div className="flex flex-col sm:flex-row sm:items-center gap-2 min-w-0">
-                {/* Filename input row - full width on mobile */}
-                <div className="flex items-center gap-1 min-w-0 flex-1">
-                  <div className="flex items-center min-w-0 flex-1 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-md px-3 py-2 focus-within:ring-2 focus-within:ring-purple-500 focus-within:border-purple-500 dark:focus-within:ring-purple-400 dark:focus-within:border-purple-400">
-                    <input
-                      type="text"
-                      value={fileName}
-                      onChange={(e) => {
-                        // Remove invalid filename characters
-                        const sanitizedValue = e.target.value.replace(/[<>:"/\\|?*]/g, '');
-                        setFileName(sanitizedValue);
-                      }}
-                      className="font-medium text-gray-900 dark:text-white bg-transparent border-none outline-none min-w-0 flex-1 text-base sm:text-sm placeholder-gray-400 dark:placeholder-gray-500"
-                      placeholder="Enter PRD filename"
-                      maxLength={100}
-                    />
-                    <span className="text-sm sm:text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap ml-1">.txt</span>
-                  </div>
-                  <button
-                    onClick={() => document.querySelector('input[placeholder="Enter PRD filename"]')?.focus()}
-                    className="p-1 text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors"
-                    title="Click to edit filename"
-                  >
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-                    </svg>
-                  </button>
-                </div>
-                
-                {/* Tags row - moves to second line on mobile for more filename space */}
-                <div className="flex items-center gap-2 flex-shrink-0">
-                  <span className="text-xs bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 px-2 py-1 rounded whitespace-nowrap">
-                    📋 PRD
-                  </span>
-                  {isNewFile && (
-                    <span className="text-xs bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300 px-2 py-1 rounded whitespace-nowrap">
-                      ✨ New
-                    </span>
-                  )}
-                </div>
-              </div>
-              
-              {/* Description - smaller on mobile */}
-              <p className="text-xs sm:text-sm text-gray-500 dark:text-gray-400 truncate mt-1">
-                Product Requirements Document
-              </p>
-            </div>
-          </div>
-          
-          <div className="flex items-center gap-1 md:gap-2 flex-shrink-0">
-            <button
-              onClick={() => setPreviewMode(!previewMode)}
-              className={cn(
-                'p-2 md:p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800',
-                'min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center',
-                previewMode 
-                  ? 'text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900' 
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-              )}
-              title={previewMode ? 'Switch to edit mode' : 'Preview markdown'}
-            >
-              <Eye className="w-5 h-5 md:w-4 md:h-4" />
-            </button>
-            
-            <button
-              onClick={() => setWordWrap(!wordWrap)}
-              className={cn(
-                'p-2 md:p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800',
-                'min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center',
-                wordWrap 
-                  ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900' 
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-              )}
-              title={wordWrap ? 'Disable word wrap' : 'Enable word wrap'}
-            >
-              <span className="text-sm md:text-xs font-mono font-bold">↵</span>
-            </button>
-            
-            <button
-              onClick={() => setIsDarkMode(!isDarkMode)}
-              className="p-2 md:p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
-              title="Toggle theme"
-            >
-              <span className="text-lg md:text-base">{isDarkMode ? '☀️' : '🌙'}</span>
-            </button>
-            
-            <button
-              onClick={handleDownload}
-              className="p-2 md:p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
-              title="Download PRD"
-            >
-              <Download className="w-5 h-5 md:w-4 md:h-4" />
-            </button>
-            
-            <button
-              onClick={handleGenerateTasks}
-              disabled={!content.trim()}
-              className={cn(
-                'px-3 py-2 rounded-md disabled:opacity-50 flex items-center gap-2 transition-colors text-sm font-medium',
-                'bg-purple-600 hover:bg-purple-700 text-white',
-                'min-h-[44px] md:min-h-0'
-              )}
-              title="Generate tasks from PRD content"
-            >
-              <Sparkles className="w-4 h-4" />
-              <span className="hidden md:inline">Generate Tasks</span>
-            </button>
-            
-            <button
-              onClick={handleSave}
-              disabled={saving}
-              className={cn(
-                'px-3 py-2 text-white rounded-md disabled:opacity-50 flex items-center gap-2 transition-colors',
-                'min-h-[44px] md:min-h-0',
-                saveSuccess 
-                  ? 'bg-green-600 hover:bg-green-700' 
-                  : 'bg-purple-600 hover:bg-purple-700'
-              )}
-            >
-              {saveSuccess ? (
-                <>
-                  <svg className="w-5 h-5 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                  </svg>
-                  <span className="hidden sm:inline">Saved!</span>
-                </>
-              ) : (
-                <>
-                  <Save className="w-5 h-5 md:w-4 md:h-4" />
-                  <span className="hidden sm:inline">{saving ? 'Saving...' : 'Save PRD'}</span>
-                </>
-              )}
-            </button>
-            
-            <button
-              onClick={toggleFullscreen}
-              className="hidden md:flex p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 items-center justify-center"
-              title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
-            >
-              {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
-            </button>
-            
-            <button
-              onClick={onClose}
-              className="p-2 md:p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
-              title="Close"
-            >
-              <X className="w-6 h-6 md:w-4 md:h-4" />
-            </button>
-          </div>
-        </div>
-
-        {/* Editor/Preview Content */}
-        <div className="flex-1 overflow-hidden">
-          {previewMode ? (
-            <div className="h-full overflow-y-auto p-6 prose prose-gray dark:prose-invert max-w-none">
-              <div 
-                className="markdown-preview"
-                dangerouslySetInnerHTML={{ __html: renderMarkdown(content) }}
-              />
-            </div>
-          ) : (
-            <CodeMirror
-              ref={editorRef}
-              value={content}
-              onChange={setContent}
-              extensions={[
-                markdown(),
-                ...(wordWrap ? [EditorView.lineWrapping] : [])
-              ]}
-              theme={isDarkMode ? oneDark : undefined}
-              height="100%"
-              style={{
-                fontSize: '14px',
-                height: '100%',
-              }}
-              basicSetup={{
-                lineNumbers: true,
-                foldGutter: true,
-                dropCursor: false,
-                allowMultipleSelections: false,
-                indentOnInput: true,
-                bracketMatching: true,
-                closeBrackets: true,
-                autocompletion: true,
-                highlightSelectionMatches: true,
-                searchKeymap: true,
-              }}
-            />
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="flex items-center justify-between p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex-shrink-0">
-          <div className="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
-            <span>Lines: {content.split('\n').length}</span>
-            <span>Characters: {content.length}</span>
-            <span>Words: {content.split(/\s+/).filter(word => word.length > 0).length}</span>
-            <span>Format: Markdown</span>
-          </div>
-          
-          <div className="text-sm text-gray-500 dark:text-gray-400">
-            Press Ctrl+S to save • Esc to close
-          </div>
-        </div>
-      </div>
-
-      {/* Generate Tasks Modal */}
-      {showGenerateModal && (
-        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md border border-gray-200 dark:border-gray-700">
-            {/* Header */}
-            <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
-              <div className="flex items-center gap-3">
-                <div className="w-8 h-8 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center">
-                  <Sparkles className="w-4 h-4 text-purple-600 dark:text-purple-400" />
-                </div>
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Generate Tasks from PRD</h3>
-              </div>
-              <button
-                onClick={() => setShowGenerateModal(false)}
-                className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
-              >
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-
-            {/* Content */}
-            <div className="p-6 space-y-4">
-              {/* AI-First Approach */}
-              <div className="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-4 border border-purple-200 dark:border-purple-800">
-                <div className="flex items-start gap-3">
-                  <div className="w-8 h-8 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
-                    <Sparkles className="w-4 h-4 text-purple-600 dark:text-purple-400" />
-                  </div>
-                  <div className="flex-1">
-                    <h4 className="font-semibold text-purple-900 dark:text-purple-100 mb-2">
-                      💡 Pro Tip: Ask Claude Code Directly!
-                    </h4>
-                    <p className="text-sm text-purple-800 dark:text-purple-200 mb-3">
-                      You can simply ask Claude Code in the chat to parse your PRD and generate tasks. 
-                      The AI assistant will automatically save your PRD and create detailed tasks with implementation details.
-                    </p>
-                    
-                    <div className="bg-white dark:bg-gray-800 rounded border border-purple-200 dark:border-purple-700 p-3 mb-3">
-                      <p className="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">💬 Example:</p>
-                      <p className="text-xs text-gray-900 dark:text-white font-mono">
-                        "I've just initialized a new project with Claude Task Master. I have a PRD at .taskmaster/docs/{fileName.endsWith('.txt') || fileName.endsWith('.md') ? fileName : `${fileName}.txt`}. Can you help me parse it and set up the initial tasks?"
-                      </p>
-                    </div>
-                    
-                    <p className="text-xs text-purple-700 dark:text-purple-300">
-                      <strong>This will:</strong> Save your PRD, analyze its content, and generate structured tasks with subtasks, dependencies, and implementation details.
-                    </p>
-                  </div>
-                </div>
-              </div>
-
-              {/* Learn More Link */}
-              <div className="text-center pt-4 border-t border-gray-200 dark:border-gray-700">
-                <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
-                  For more examples and advanced usage patterns:
-                </p>
-                <a
-                  href="https://github.com/eyaltoledano/claude-task-master/blob/main/docs/examples.md"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-block text-sm text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 underline font-medium"
-                >
-                  View TaskMaster Documentation →
-                </a>
-              </div>
-
-              {/* Footer */}
-              <div className="pt-4">
-                <button
-                  onClick={() => setShowGenerateModal(false)}
-                  className="w-full px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
-                >
-                  Got it, I'll ask Claude Code directly
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Overwrite Confirmation Modal */}
-      {showOverwriteConfirm && (
-        <div className="fixed inset-0 z-[300] flex items-center justify-center p-4">
-          <div className="fixed inset-0 bg-black bg-opacity-50" onClick={() => setShowOverwriteConfirm(false)} />
-          <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full border border-gray-200 dark:border-gray-700">
-            <div className="p-6">
-              <div className="flex items-center mb-4">
-                <div className="p-2 rounded-full mr-3 bg-yellow-100 dark:bg-yellow-900">
-                  <AlertTriangle className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />
-                </div>
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                  File Already Exists
-                </h3>
-              </div>
-              
-              <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
-                A PRD file named "{fileName.endsWith('.txt') || fileName.endsWith('.md') ? fileName : `${fileName}.txt`}" already exists. 
-                Do you want to overwrite it with the current content?
-              </p>
-              
-              <div className="flex justify-end space-x-3">
-                <button
-                  onClick={() => setShowOverwriteConfirm(false)}
-                  className="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={async () => {
-                    setShowOverwriteConfirm(false);
-                    await performSave();
-                  }}
-                  className="px-4 py-2 text-sm text-white bg-yellow-600 hover:bg-yellow-700 rounded-md flex items-center space-x-2 transition-colors"
-                >
-                  <Save className="w-4 h-4" />
-                  <span>Overwrite</span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default PRDEditor;

src/components/ProjectCreationWizard.jsx

@@ -1,875 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { X, FolderPlus, GitBranch, Key, ChevronRight, ChevronLeft, Check, Loader2, AlertCircle, FolderOpen, Eye, EyeOff, Plus } from 'lucide-react';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { api } from '../utils/api';
-import { useTranslation } from 'react-i18next';
-
-const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
-  const { t } = useTranslation();
-  // Wizard state
-  const [step, setStep] = useState(1); // 1: Choose type, 2: Configure, 3: Confirm
-  const [workspaceType, setWorkspaceType] = useState('existing'); // 'existing' or 'new' - default to 'existing'
-
-  // Form state
-  const [workspacePath, setWorkspacePath] = useState('');
-  const [githubUrl, setGithubUrl] = useState('');
-  const [selectedGithubToken, setSelectedGithubToken] = useState('');
-  const [tokenMode, setTokenMode] = useState('stored'); // 'stored' | 'new' | 'none'
-  const [newGithubToken, setNewGithubToken] = useState('');
-
-  // UI state
-  const [isCreating, setIsCreating] = useState(false);
-  const [error, setError] = useState(null);
-  const [availableTokens, setAvailableTokens] = useState([]);
-  const [loadingTokens, setLoadingTokens] = useState(false);
-  const [pathSuggestions, setPathSuggestions] = useState([]);
-  const [showPathDropdown, setShowPathDropdown] = useState(false);
-  const [showFolderBrowser, setShowFolderBrowser] = useState(false);
-  const [browserCurrentPath, setBrowserCurrentPath] = useState('~');
-  const [browserFolders, setBrowserFolders] = useState([]);
-  const [loadingFolders, setLoadingFolders] = useState(false);
-  const [showHiddenFolders, setShowHiddenFolders] = useState(false);
-  const [showNewFolderInput, setShowNewFolderInput] = useState(false);
-  const [newFolderName, setNewFolderName] = useState('');
-  const [creatingFolder, setCreatingFolder] = useState(false);
-  const [cloneProgress, setCloneProgress] = useState('');
-
-  // Load available GitHub tokens when needed
-  useEffect(() => {
-    if (step === 2 && workspaceType === 'new' && githubUrl) {
-      loadGithubTokens();
-    }
-  }, [step, workspaceType, githubUrl]);
-
-  // Load path suggestions
-  useEffect(() => {
-    if (workspacePath.length > 2) {
-      loadPathSuggestions(workspacePath);
-    } else {
-      setPathSuggestions([]);
-      setShowPathDropdown(false);
-    }
-  }, [workspacePath]);
-
-  const loadGithubTokens = async () => {
-    try {
-      setLoadingTokens(true);
-      const response = await api.get('/settings/credentials?type=github_token');
-      const data = await response.json();
-
-      const activeTokens = (data.credentials || []).filter(t => t.is_active);
-      setAvailableTokens(activeTokens);
-
-      // Auto-select first token if available
-      if (activeTokens.length > 0 && !selectedGithubToken) {
-        setSelectedGithubToken(activeTokens[0].id.toString());
-      }
-    } catch (error) {
-      console.error('Error loading GitHub tokens:', error);
-    } finally {
-      setLoadingTokens(false);
-    }
-  };
-
-  const loadPathSuggestions = async (inputPath) => {
-    try {
-      // Extract the directory to browse (parent of input)
-      const lastSlash = inputPath.lastIndexOf('/');
-      const dirPath = lastSlash > 0 ? inputPath.substring(0, lastSlash) : '~';
-
-      const response = await api.browseFilesystem(dirPath);
-      const data = await response.json();
-
-      if (data.suggestions) {
-        // Filter suggestions based on the input, excluding exact match
-        const filtered = data.suggestions.filter(s =>
-          s.path.toLowerCase().startsWith(inputPath.toLowerCase()) &&
-          s.path.toLowerCase() !== inputPath.toLowerCase()
-        );
-        setPathSuggestions(filtered.slice(0, 5));
-        setShowPathDropdown(filtered.length > 0);
-      }
-    } catch (error) {
-      console.error('Error loading path suggestions:', error);
-    }
-  };
-
-  const handleNext = () => {
-    setError(null);
-
-    if (step === 1) {
-      if (!workspaceType) {
-        setError(t('projectWizard.errors.selectType'));
-        return;
-      }
-      setStep(2);
-    } else if (step === 2) {
-      if (!workspacePath.trim()) {
-        setError(t('projectWizard.errors.providePath'));
-        return;
-      }
-
-      // No validation for GitHub token - it's optional (only needed for private repos)
-      setStep(3);
-    }
-  };
-
-  const handleBack = () => {
-    setError(null);
-    setStep(step - 1);
-  };
-
-  const handleCreate = async () => {
-    setIsCreating(true);
-    setError(null);
-    setCloneProgress('');
-
-    try {
-      if (workspaceType === 'new' && githubUrl) {
-        const params = new URLSearchParams({
-          path: workspacePath.trim(),
-          githubUrl: githubUrl.trim(),
-        });
-
-        if (tokenMode === 'stored' && selectedGithubToken) {
-          params.append('githubTokenId', selectedGithubToken);
-        } else if (tokenMode === 'new' && newGithubToken) {
-          params.append('newGithubToken', newGithubToken.trim());
-        }
-
-        const token = localStorage.getItem('auth-token');
-        const url = `/api/projects/clone-progress?${params}${token ? `&token=${token}` : ''}`;
-
-        await new Promise((resolve, reject) => {
-          const eventSource = new EventSource(url);
-
-          eventSource.onmessage = (event) => {
-            try {
-              const data = JSON.parse(event.data);
-
-              if (data.type === 'progress') {
-                setCloneProgress(data.message);
-              } else if (data.type === 'complete') {
-                eventSource.close();
-                if (onProjectCreated) {
-                  onProjectCreated(data.project);
-                }
-                onClose();
-                resolve();
-              } else if (data.type === 'error') {
-                eventSource.close();
-                reject(new Error(data.message));
-              }
-            } catch (e) {
-              console.error('Error parsing SSE event:', e);
-            }
-          };
-
-          eventSource.onerror = () => {
-            eventSource.close();
-            reject(new Error('Connection lost during clone'));
-          };
-        });
-        return;
-      }
-
-      const payload = {
-        workspaceType,
-        path: workspacePath.trim(),
-      };
-
-      const response = await api.createWorkspace(payload);
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.details || data.error || t('projectWizard.errors.failedToCreate'));
-      }
-
-      if (onProjectCreated) {
-        onProjectCreated(data.project);
-      }
-
-      onClose();
-    } catch (error) {
-      console.error('Error creating workspace:', error);
-      setError(error.message || t('projectWizard.errors.failedToCreate'));
-    } finally {
-      setIsCreating(false);
-    }
-  };
-
-  const selectPathSuggestion = (suggestion) => {
-    setWorkspacePath(suggestion.path);
-    setShowPathDropdown(false);
-  };
-
-  const openFolderBrowser = async () => {
-    setShowFolderBrowser(true);
-    await loadBrowserFolders('~');
-  };
-
-  const loadBrowserFolders = async (path) => {
-    try {
-      setLoadingFolders(true);
-      const response = await api.browseFilesystem(path);
-      const data = await response.json();
-      setBrowserCurrentPath(data.path || path);
-      setBrowserFolders(data.suggestions || []);
-    } catch (error) {
-      console.error('Error loading folders:', error);
-    } finally {
-      setLoadingFolders(false);
-    }
-  };
-
-  const selectFolder = (folderPath, advanceToConfirm = false) => {
-    setWorkspacePath(folderPath);
-    setShowFolderBrowser(false);
-    if (advanceToConfirm) {
-      setStep(3);
-    }
-  };
-
-  const navigateToFolder = async (folderPath) => {
-    await loadBrowserFolders(folderPath);
-  };
-
-  const createNewFolder = async () => {
-    if (!newFolderName.trim()) return;
-    setCreatingFolder(true);
-    setError(null);
-    try {
-      const separator = browserCurrentPath.includes('\\') ? '\\' : '/';
-      const folderPath = `${browserCurrentPath}${separator}${newFolderName.trim()}`;
-      const response = await api.createFolder(folderPath);
-      const data = await response.json();
-      if (!response.ok) {
-        throw new Error(data.error || t('projectWizard.errors.failedToCreateFolder', 'Failed to create folder'));
-      }
-      setNewFolderName('');
-      setShowNewFolderInput(false);
-      await loadBrowserFolders(data.path || folderPath);
-    } catch (error) {
-      console.error('Error creating folder:', error);
-      setError(error.message || t('projectWizard.errors.failedToCreateFolder', 'Failed to create folder'));
-    } finally {
-      setCreatingFolder(false);
-    }
-  };
-
-  return (
-    <div className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[60] p-0 sm:p-4">
-      <div className="bg-white dark:bg-gray-800 rounded-none sm:rounded-lg shadow-xl w-full h-full sm:h-auto sm:max-w-2xl border-0 sm:border border-gray-200 dark:border-gray-700 overflow-y-auto">
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
-          <div className="flex items-center gap-3">
-            <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
-              <FolderPlus className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-            </div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-              {t('projectWizard.title')}
-            </h3>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
-            disabled={isCreating}
-          >
-            <X className="w-5 h-5" />
-          </button>
-        </div>
-
-        {/* Progress Indicator */}
-        <div className="px-6 pt-4 pb-2">
-          <div className="flex items-center justify-between">
-            {[1, 2, 3].map((s) => (
-              <React.Fragment key={s}>
-                <div className="flex items-center gap-2">
-                  <div
-                    className={`w-8 h-8 rounded-full flex items-center justify-center font-medium text-sm ${
-                      s < step
-                        ? 'bg-green-500 text-white'
-                        : s === step
-                        ? 'bg-blue-500 text-white'
-                        : 'bg-gray-200 dark:bg-gray-700 text-gray-500'
-                    }`}
-                  >
-                    {s < step ? <Check className="w-4 h-4" /> : s}
-                  </div>
-                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300 hidden sm:inline">
-                    {s === 1 ? t('projectWizard.steps.type') : s === 2 ? t('projectWizard.steps.configure') : t('projectWizard.steps.confirm')}
-                  </span>
-                </div>
-                {s < 3 && (
-                  <div
-                    className={`flex-1 h-1 mx-2 rounded ${
-                      s < step ? 'bg-green-500' : 'bg-gray-200 dark:bg-gray-700'
-                    }`}
-                  />
-                )}
-              </React.Fragment>
-            ))}
-          </div>
-        </div>
-
-        {/* Content */}
-        <div className="p-6 space-y-6 min-h-[300px]">
-          {/* Error Display */}
-          {error && (
-            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 flex items-start gap-3">
-              <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
-              <div className="flex-1">
-                <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
-              </div>
-            </div>
-          )}
-
-          {/* Step 1: Choose workspace type */}
-          {step === 1 && (
-            <div className="space-y-4">
-              <div>
-                <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-                  {t('projectWizard.step1.question')}
-                </h4>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  {/* Existing Workspace */}
-                  <button
-                    onClick={() => setWorkspaceType('existing')}
-                    className={`p-4 border-2 rounded-lg text-left transition-all ${
-                      workspaceType === 'existing'
-                        ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                        : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
-                    }`}
-                  >
-                    <div className="flex items-start gap-3">
-                      <div className="w-10 h-10 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center flex-shrink-0">
-                        <FolderPlus className="w-5 h-5 text-green-600 dark:text-green-400" />
-                      </div>
-                      <div className="flex-1">
-                        <h5 className="font-semibold text-gray-900 dark:text-white mb-1">
-                          {t('projectWizard.step1.existing.title')}
-                        </h5>
-                        <p className="text-sm text-gray-600 dark:text-gray-400">
-                          {t('projectWizard.step1.existing.description')}
-                        </p>
-                      </div>
-                    </div>
-                  </button>
-
-                  {/* New Workspace */}
-                  <button
-                    onClick={() => setWorkspaceType('new')}
-                    className={`p-4 border-2 rounded-lg text-left transition-all ${
-                      workspaceType === 'new'
-                        ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                        : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
-                    }`}
-                  >
-                    <div className="flex items-start gap-3">
-                      <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center flex-shrink-0">
-                        <GitBranch className="w-5 h-5 text-purple-600 dark:text-purple-400" />
-                      </div>
-                      <div className="flex-1">
-                        <h5 className="font-semibold text-gray-900 dark:text-white mb-1">
-                          {t('projectWizard.step1.new.title')}
-                        </h5>
-                        <p className="text-sm text-gray-600 dark:text-gray-400">
-                          {t('projectWizard.step1.new.description')}
-                        </p>
-                      </div>
-                    </div>
-                  </button>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Step 2: Configure workspace */}
-          {step === 2 && (
-            <div className="space-y-4">
-              {/* Workspace Path */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  {workspaceType === 'existing' ? t('projectWizard.step2.existingPath') : t('projectWizard.step2.newPath')}
-                </label>
-                <div className="relative flex gap-2">
-                  <div className="flex-1 relative">
-                    <Input
-                      type="text"
-                      value={workspacePath}
-                      onChange={(e) => setWorkspacePath(e.target.value)}
-                      placeholder={workspaceType === 'existing' ? '/path/to/existing/workspace' : '/path/to/new/workspace'}
-                      className="w-full"
-                    />
-                    {showPathDropdown && pathSuggestions.length > 0 && (
-                      <div className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-                        {pathSuggestions.map((suggestion, index) => (
-                          <button
-                            key={index}
-                            onClick={() => selectPathSuggestion(suggestion)}
-                            className="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 text-sm"
-                          >
-                            <div className="font-medium text-gray-900 dark:text-white">{suggestion.name}</div>
-                            <div className="text-xs text-gray-500 dark:text-gray-400">{suggestion.path}</div>
-                          </button>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={openFolderBrowser}
-                    className="px-3"
-                    title="Browse folders"
-                  >
-                    <FolderOpen className="w-4 h-4" />
-                  </Button>
-                </div>
-                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                  {workspaceType === 'existing'
-                    ? t('projectWizard.step2.existingHelp')
-                    : t('projectWizard.step2.newHelp')}
-                </p>
-              </div>
-
-              {/* GitHub URL (only for new workspace) */}
-              {workspaceType === 'new' && (
-                <>
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                      {t('projectWizard.step2.githubUrl')}
-                    </label>
-                    <Input
-                      type="text"
-                      value={githubUrl}
-                      onChange={(e) => setGithubUrl(e.target.value)}
-                      placeholder="https://github.com/username/repository"
-                      className="w-full"
-                    />
-                    <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                      {t('projectWizard.step2.githubHelp')}
-                    </p>
-                  </div>
-
-                  {/* GitHub Token (only for HTTPS URLs - SSH uses SSH keys) */}
-                  {githubUrl && !githubUrl.startsWith('git@') && !githubUrl.startsWith('ssh://') && (
-                    <div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
-                      <div className="flex items-start gap-3 mb-4">
-                        <Key className="w-5 h-5 text-gray-600 dark:text-gray-400 flex-shrink-0 mt-0.5" />
-                        <div className="flex-1">
-                          <h5 className="font-medium text-gray-900 dark:text-white mb-1">
-                            {t('projectWizard.step2.githubAuth')}
-                          </h5>
-                          <p className="text-sm text-gray-600 dark:text-gray-400">
-                            {t('projectWizard.step2.githubAuthHelp')}
-                          </p>
-                        </div>
-                      </div>
-
-                      {loadingTokens ? (
-                        <div className="flex items-center gap-2 text-sm text-gray-500">
-                          <Loader2 className="w-4 h-4 animate-spin" />
-                          {t('projectWizard.step2.loadingTokens')}
-                        </div>
-                      ) : availableTokens.length > 0 ? (
-                        <>
-                          {/* Token Selection Tabs */}
-                          <div className="grid grid-cols-3 gap-2 mb-4">
-                            <button
-                              onClick={() => setTokenMode('stored')}
-                              className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
-                                tokenMode === 'stored'
-                                  ? 'bg-blue-500 text-white'
-                                  : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-                              }`}
-                            >
-                              {t('projectWizard.step2.storedToken')}
-                            </button>
-                            <button
-                              onClick={() => setTokenMode('new')}
-                              className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
-                                tokenMode === 'new'
-                                  ? 'bg-blue-500 text-white'
-                                  : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-                              }`}
-                            >
-                              {t('projectWizard.step2.newToken')}
-                            </button>
-                            <button
-                              onClick={() => {
-                                setTokenMode('none');
-                                setSelectedGithubToken('');
-                                setNewGithubToken('');
-                              }}
-                              className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
-                                tokenMode === 'none'
-                                  ? 'bg-green-500 text-white'
-                                  : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-                              }`}
-                            >
-                              {t('projectWizard.step2.nonePublic')}
-                            </button>
-                          </div>
-
-                          {tokenMode === 'stored' ? (
-                            <div>
-                              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                {t('projectWizard.step2.selectToken')}
-                              </label>
-                              <select
-                                value={selectedGithubToken}
-                                onChange={(e) => setSelectedGithubToken(e.target.value)}
-                                className="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm"
-                              >
-                                <option value="">{t('projectWizard.step2.selectTokenPlaceholder')}</option>
-                                {availableTokens.map((token) => (
-                                  <option key={token.id} value={token.id}>
-                                    {token.credential_name}
-                                  </option>
-                                ))}
-                              </select>
-                            </div>
-                          ) : tokenMode === 'new' ? (
-                            <div>
-                              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                {t('projectWizard.step2.newToken')}
-                              </label>
-                              <Input
-                                type="password"
-                                value={newGithubToken}
-                                onChange={(e) => setNewGithubToken(e.target.value)}
-                                placeholder="ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
-                                className="w-full"
-                              />
-                              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                                {t('projectWizard.step2.tokenHelp')}
-                              </p>
-                            </div>
-                          ) : null}
-                        </>
-                      ) : (
-                        <div className="space-y-4">
-                          <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3 border border-blue-200 dark:border-blue-800">
-                            <p className="text-sm text-blue-800 dark:text-blue-200">
-                              {t('projectWizard.step2.publicRepoInfo')}
-                            </p>
-                          </div>
-
-                          <div>
-                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                              {t('projectWizard.step2.optionalTokenPublic')}
-                            </label>
-                            <Input
-                              type="password"
-                              value={newGithubToken}
-                              onChange={(e) => setNewGithubToken(e.target.value)}
-                              placeholder={t('projectWizard.step2.tokenPublicPlaceholder')}
-                              className="w-full"
-                            />
-                            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                              {t('projectWizard.step2.noTokensHelp')}
-                            </p>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
-          )}
-
-          {/* Step 3: Confirm */}
-          {step === 3 && (
-            <div className="space-y-4">
-              <div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
-                <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
-                  {t('projectWizard.step3.reviewConfig')}
-                </h4>
-                <div className="space-y-2">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.workspaceType')}</span>
-                    <span className="font-medium text-gray-900 dark:text-white">
-                      {workspaceType === 'existing' ? t('projectWizard.step3.existingWorkspace') : t('projectWizard.step3.newWorkspace')}
-                    </span>
-                  </div>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.path')}</span>
-                    <span className="font-mono text-xs text-gray-900 dark:text-white break-all">
-                      {workspacePath}
-                    </span>
-                  </div>
-                  {workspaceType === 'new' && githubUrl && (
-                    <>
-                      <div className="flex justify-between text-sm">
-                        <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.cloneFrom')}</span>
-                        <span className="font-mono text-xs text-gray-900 dark:text-white break-all">
-                          {githubUrl}
-                        </span>
-                      </div>
-                      <div className="flex justify-between text-sm">
-                        <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.authentication')}</span>
-                        <span className="text-xs text-gray-900 dark:text-white">
-                          {tokenMode === 'stored' && selectedGithubToken
-                            ? `${t('projectWizard.step3.usingStoredToken')} ${availableTokens.find(t => t.id.toString() === selectedGithubToken)?.credential_name || 'Unknown'}`
-                            : tokenMode === 'new' && newGithubToken
-                            ? t('projectWizard.step3.usingProvidedToken')
-                            : (githubUrl.startsWith('git@') || githubUrl.startsWith('ssh://'))
-                            ? t('projectWizard.step3.sshKey', 'SSH Key')
-                            : t('projectWizard.step3.noAuthentication')}
-                        </span>
-                      </div>
-                    </>
-                  )}
-                </div>
-              </div>
-
-              <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
-                {isCreating && cloneProgress ? (
-                  <div className="space-y-2">
-                    <p className="text-sm font-medium text-blue-800 dark:text-blue-200">{t('projectWizard.step3.cloningRepository', 'Cloning repository...')}</p>
-                    <code className="block text-xs font-mono text-blue-700 dark:text-blue-300 whitespace-pre-wrap break-all">
-                      {cloneProgress}
-                    </code>
-                  </div>
-                ) : (
-                  <p className="text-sm text-blue-800 dark:text-blue-200">
-                    {workspaceType === 'existing'
-                      ? t('projectWizard.step3.existingInfo')
-                      : githubUrl
-                      ? t('projectWizard.step3.newWithClone')
-                      : t('projectWizard.step3.newEmpty')}
-                  </p>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="flex items-center justify-between p-6 border-t border-gray-200 dark:border-gray-700">
-          <Button
-            variant="outline"
-            onClick={step === 1 ? onClose : handleBack}
-            disabled={isCreating}
-          >
-            {step === 1 ? (
-              t('projectWizard.buttons.cancel')
-            ) : (
-              <>
-                <ChevronLeft className="w-4 h-4 mr-1" />
-                {t('projectWizard.buttons.back')}
-              </>
-            )}
-          </Button>
-
-          <Button
-            onClick={step === 3 ? handleCreate : handleNext}
-            disabled={isCreating || (step === 1 && !workspaceType)}
-          >
-            {isCreating ? (
-              <>
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                {githubUrl ? t('projectWizard.buttons.cloning', 'Cloning...') : t('projectWizard.buttons.creating')}
-              </>
-            ) : step === 3 ? (
-              <>
-                <Check className="w-4 h-4 mr-1" />
-                {t('projectWizard.buttons.createProject')}
-              </>
-            ) : (
-              <>
-                {t('projectWizard.buttons.next')}
-                <ChevronRight className="w-4 h-4 ml-1" />
-              </>
-            )}
-          </Button>
-        </div>
-      </div>
-
-      {/* Folder Browser Modal */}
-      {showFolderBrowser && (
-        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[70] p-4">
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] border border-gray-200 dark:border-gray-700 flex flex-col">
-            {/* Browser Header */}
-            <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-              <div className="flex items-center gap-3">
-                <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
-                  <FolderOpen className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-                </div>
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                  Select Folder
-                </h3>
-              </div>
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={() => setShowHiddenFolders(!showHiddenFolders)}
-                  className={`p-2 rounded-md transition-colors ${
-                    showHiddenFolders
-                      ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
-                      : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
-                  }`}
-                  title={showHiddenFolders ? 'Hide hidden folders' : 'Show hidden folders'}
-                >
-                  {showHiddenFolders ? <Eye className="w-5 h-5" /> : <EyeOff className="w-5 h-5" />}
-                </button>
-                <button
-                  onClick={() => setShowNewFolderInput(!showNewFolderInput)}
-                  className={`p-2 rounded-md transition-colors ${
-                    showNewFolderInput
-                      ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
-                      : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
-                  }`}
-                  title="Create new folder"
-                >
-                  <Plus className="w-5 h-5" />
-                </button>
-                <button
-                  onClick={() => setShowFolderBrowser(false)}
-                  className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
-                >
-                  <X className="w-5 h-5" />
-                </button>
-              </div>
-            </div>
-
-            {/* New Folder Input */}
-            {showNewFolderInput && (
-              <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-blue-50 dark:bg-blue-900/20">
-                <div className="flex items-center gap-2">
-                  <Input
-                    type="text"
-                    value={newFolderName}
-                    onChange={(e) => setNewFolderName(e.target.value)}
-                    placeholder="New folder name"
-                    className="flex-1"
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter') createNewFolder();
-                      if (e.key === 'Escape') {
-                        setShowNewFolderInput(false);
-                        setNewFolderName('');
-                      }
-                    }}
-                    autoFocus
-                  />
-                  <Button
-                    size="sm"
-                    onClick={createNewFolder}
-                    disabled={!newFolderName.trim() || creatingFolder}
-                  >
-                    {creatingFolder ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Create'}
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={() => {
-                      setShowNewFolderInput(false);
-                      setNewFolderName('');
-                    }}
-                  >
-                    Cancel
-                  </Button>
-                </div>
-              </div>
-            )}
-
-            {/* Folder List */}
-            <div className="flex-1 overflow-y-auto p-4">
-              {loadingFolders ? (
-                <div className="flex items-center justify-center py-8">
-                  <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
-                </div>
-              ) : (
-                <div className="space-y-1">
-                  {/* Parent Directory - check for Windows root (e.g., C:\) and Unix root */}
-                  {browserCurrentPath !== '~' && browserCurrentPath !== '/' && !/^[A-Za-z]:\\?$/.test(browserCurrentPath) && (
-                    <button
-                      onClick={() => {
-                        const lastSlash = Math.max(browserCurrentPath.lastIndexOf('/'), browserCurrentPath.lastIndexOf('\\'));
-                        let parentPath;
-                        if (lastSlash <= 0) {
-                          parentPath = '/';
-                        } else if (lastSlash === 2 && /^[A-Za-z]:/.test(browserCurrentPath)) {
-                          parentPath = browserCurrentPath.substring(0, 3);
-                        } else {
-                          parentPath = browserCurrentPath.substring(0, lastSlash);
-                        }
-                        navigateToFolder(parentPath);
-                      }}
-                      className="w-full px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center gap-3"
-                    >
-                      <FolderOpen className="w-5 h-5 text-gray-400" />
-                      <span className="font-medium text-gray-700 dark:text-gray-300">..</span>
-                    </button>
-                  )}
-
-                  {/* Folders */}
-                  {browserFolders.length === 0 ? (
-                    <div className="text-center py-8 text-gray-500 dark:text-gray-400">
-                      No subfolders found
-                    </div>
-                  ) : (
-                    browserFolders
-                      .filter(folder => showHiddenFolders || !folder.name.startsWith('.'))
-                      .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
-                      .map((folder, index) => (
-                      <div key={index} className="flex items-center gap-2">
-                        <button
-                          onClick={() => navigateToFolder(folder.path)}
-                          className="flex-1 px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center gap-3"
-                        >
-                          <FolderPlus className="w-5 h-5 text-blue-500" />
-                          <span className="font-medium text-gray-900 dark:text-white">{folder.name}</span>
-                        </button>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => selectFolder(folder.path, workspaceType === 'existing')}
-                          className="text-xs px-3"
-                        >
-                          Select
-                        </Button>
-                      </div>
-                    ))
-                  )}
-                </div>
-              )}
-            </div>
-
-            {/* Browser Footer with Current Path */}
-            <div className="border-t border-gray-200 dark:border-gray-700">
-              <div className="px-4 py-3 bg-gray-50 dark:bg-gray-900/50 flex items-center gap-2">
-                <span className="text-sm text-gray-600 dark:text-gray-400">Path:</span>
-                <code className="text-sm font-mono text-gray-900 dark:text-white flex-1 truncate">
-                  {browserCurrentPath}
-                </code>
-              </div>
-              <div className="flex items-center justify-end gap-2 p-4">
-                <Button
-                  variant="outline"
-                  onClick={() => {
-                    setShowFolderBrowser(false);
-                    setShowNewFolderInput(false);
-                    setNewFolderName('');
-                  }}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  variant="outline"
-                  onClick={() => selectFolder(browserCurrentPath, workspaceType === 'existing')}
-                >
-                  Use this folder
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ProjectCreationWizard;

src/components/ProtectedRoute.jsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import { useAuth } from '../contexts/AuthContext';
-import SetupForm from './SetupForm';
-import LoginForm from './LoginForm';
-import Onboarding from './Onboarding';
-import { MessageSquare } from 'lucide-react';
-import { IS_PLATFORM } from '../constants/config';
-
-const LoadingScreen = () => (
-  <div className="min-h-screen bg-background flex items-center justify-center p-4">
-    <div className="text-center">
-      <div className="flex justify-center mb-4">
-        <div className="w-16 h-16 bg-primary rounded-lg flex items-center justify-center shadow-sm">
-          <MessageSquare className="w-8 h-8 text-primary-foreground" />
-        </div>
-      </div>
-      <h1 className="text-2xl font-bold text-foreground mb-2">Claude Code UI</h1>
-      <div className="flex items-center justify-center space-x-2">
-        <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce"></div>
-        <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
-        <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
-      </div>
-      <p className="text-muted-foreground mt-2">Loading...</p>
-    </div>
-  </div>
-);
-
-const ProtectedRoute = ({ children }) => {
-  const { user, isLoading, needsSetup, hasCompletedOnboarding, refreshOnboardingStatus } = useAuth();
-
-  if (IS_PLATFORM) {
-    if (isLoading) {
-      return <LoadingScreen />;
-    }
-
-    if (!hasCompletedOnboarding) {
-      return <Onboarding onComplete={refreshOnboardingStatus} />;
-    }
-
-    return children;
-  }
-
-  if (isLoading) {
-    return <LoadingScreen />;
-  }
-
-  if (needsSetup) {
-    return <SetupForm />;
-  }
-
-  if (!user) {
-    return <LoginForm />;
-  }
-
-  if (!hasCompletedOnboarding) {
-    return <Onboarding onComplete={refreshOnboardingStatus} />;
-  }
-
-  return children;
-};
-
-export default ProtectedRoute;

src/components/QuickSettingsPanel.jsx

@@ -1,448 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import {
-  ChevronLeft,
-  ChevronRight,
-  Maximize2,
-  Eye,
-  Settings2,
-  Moon,
-  Sun,
-  ArrowDown,
-  Mic,
-  Brain,
-  Sparkles,
-  FileText,
-  Languages,
-  GripVertical
-} from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import DarkModeToggle from './DarkModeToggle';
-
-import { useUiPreferences } from '../hooks/useUiPreferences';
-import { useTheme } from '../contexts/ThemeContext';
-import LanguageSelector from './LanguageSelector';
-
-import { useDeviceSettings } from '../hooks/useDeviceSettings';
-
-
-const QuickSettingsPanel = () => {
-  const { t } = useTranslation('settings');
-  const [isOpen, setIsOpen] = useState(false);
-  const [whisperMode, setWhisperMode] = useState(() => {
-    return localStorage.getItem('whisperMode') || 'default';
-  });
-  const { isDarkMode } = useTheme();
-
-  const { isMobile } = useDeviceSettings({ trackPWA: false });
-
-  const { preferences, setPreference } = useUiPreferences();
-  const { autoExpandTools, showRawParameters, showThinking, autoScrollToBottom, sendByCtrlEnter } = preferences;
-
-  // Draggable handle state
-  const [handlePosition, setHandlePosition] = useState(() => {
-    const saved = localStorage.getItem('quickSettingsHandlePosition');
-    if (saved) {
-      try {
-        const parsed = JSON.parse(saved);
-        return parsed.y ?? 50;
-      } catch {
-        // Remove corrupted data
-        localStorage.removeItem('quickSettingsHandlePosition');
-        return 50;
-      }
-    }
-    return 50; // Default to 50% (middle of screen)
-  });
-
-  const [isDragging, setIsDragging] = useState(false);
-  const [dragStartY, setDragStartY] = useState(0);
-  const [dragStartPosition, setDragStartPosition] = useState(0);
-  const [hasMoved, setHasMoved] = useState(false); // Track if user has moved during drag
-  const handleRef = useRef(null);
-  const constraintsRef = useRef({ min: 10, max: 90 }); // Percentage constraints
-  const dragThreshold = 5; // Pixels to move before it's considered a drag
-
-  // Save handle position to localStorage when it changes
-  useEffect(() => {
-    localStorage.setItem('quickSettingsHandlePosition', JSON.stringify({ y: handlePosition }));
-  }, [handlePosition]);
-
-  // Calculate position from percentage
-  const getPositionStyle = useCallback(() => {
-    if (isMobile) {
-      // On mobile, convert percentage to pixels from bottom
-      const bottomPixels = (window.innerHeight * handlePosition) / 100;
-      return { bottom: `${bottomPixels}px` };
-    } else {
-      // On desktop, use top with percentage
-      return { top: `${handlePosition}%`, transform: 'translateY(-50%)' };
-    }
-  }, [handlePosition, isMobile]);
-
-  // Handle mouse/touch start
-  const handleDragStart = useCallback((e) => {
-    // Don't prevent default yet - we want to allow click if no drag happens
-    e.stopPropagation();
-
-    const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY;
-    setDragStartY(clientY);
-    setDragStartPosition(handlePosition);
-    setHasMoved(false);
-    setIsDragging(false); // Don't set dragging until threshold is passed
-  }, [handlePosition]);
-
-  // Handle mouse/touch move
-  const handleDragMove = useCallback((e) => {
-    if (dragStartY === 0) return; // Not in a potential drag
-
-    const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY;
-    const deltaY = Math.abs(clientY - dragStartY);
-
-    // Check if we've moved past threshold
-    if (!isDragging && deltaY > dragThreshold) {
-      setIsDragging(true);
-      setHasMoved(true);
-      document.body.style.cursor = 'grabbing';
-      document.body.style.userSelect = 'none';
-
-      // Prevent body scroll on mobile during drag
-      if (e.type.includes('touch')) {
-        document.body.style.overflow = 'hidden';
-        document.body.style.position = 'fixed';
-        document.body.style.width = '100%';
-      }
-    }
-
-    if (!isDragging) return;
-
-    // Prevent scrolling on touch move
-    if (e.type.includes('touch')) {
-      e.preventDefault();
-    }
-
-    const actualDeltaY = clientY - dragStartY;
-
-    // For top-based positioning (desktop), moving down increases top percentage
-    // For bottom-based positioning (mobile), we need to invert
-    let percentageDelta;
-    if (isMobile) {
-      // On mobile, moving down should decrease bottom position (increase percentage from top)
-      percentageDelta = -(actualDeltaY / window.innerHeight) * 100;
-    } else {
-      // On desktop, moving down should increase top position
-      percentageDelta = (actualDeltaY / window.innerHeight) * 100;
-    }
-
-    let newPosition = dragStartPosition + percentageDelta;
-
-    // Apply constraints
-    newPosition = Math.max(constraintsRef.current.min, Math.min(constraintsRef.current.max, newPosition));
-
-    setHandlePosition(newPosition);
-  }, [isDragging, dragStartY, dragStartPosition, isMobile, dragThreshold]);
-
-  // Handle mouse/touch end
-  const handleDragEnd = useCallback(() => {
-    setIsDragging(false);
-    setDragStartY(0);
-    document.body.style.cursor = '';
-    document.body.style.userSelect = '';
-
-    // Restore body scroll on mobile
-    document.body.style.overflow = '';
-    document.body.style.position = '';
-    document.body.style.width = '';
-  }, []);
-
-  // Cleanup body styles on unmount in case component unmounts while dragging
-  useEffect(() => {
-    return () => {
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-      document.body.style.overflow = '';
-      document.body.style.position = '';
-      document.body.style.width = '';
-    };
-  }, []);
-
-  // Set up global event listeners for drag
-  useEffect(() => {
-    if (dragStartY !== 0) {
-      // Mouse events
-      const handleMouseMove = (e) => handleDragMove(e);
-      const handleMouseUp = () => handleDragEnd();
-
-      // Touch events
-      const handleTouchMove = (e) => handleDragMove(e);
-      const handleTouchEnd = () => handleDragEnd();
-
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
-      document.addEventListener('touchmove', handleTouchMove, { passive: false });
-      document.addEventListener('touchend', handleTouchEnd);
-
-      return () => {
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
-        document.removeEventListener('touchmove', handleTouchMove);
-        document.removeEventListener('touchend', handleTouchEnd);
-      };
-    }
-  }, [dragStartY, handleDragMove, handleDragEnd]);
-
-  const handleToggle = (e) => {
-    // Don't toggle if user was dragging
-    if (hasMoved) {
-      e.preventDefault();
-      setHasMoved(false);
-      return;
-    }
-
-    setIsOpen((previous) => !previous);
-  };
-
-  return (
-    <>
-      {/* Pull Tab - Combined drag handle and toggle button */}
-      <button
-        ref={handleRef}
-        onClick={handleToggle}
-        onMouseDown={(e) => {
-          // Start drag on mousedown
-          handleDragStart(e);
-        }}
-        onTouchStart={(e) => {
-          // Start drag on touchstart
-          handleDragStart(e);
-        }}
-        className={`fixed ${
-          isOpen ? 'right-64' : 'right-0'
-        } z-50 ${isDragging ? '' : 'transition-all duration-150 ease-out'} bg-white dark:bg-gray-800 border ${
-          isDragging ? 'border-blue-500 dark:border-blue-400' : 'border-gray-200 dark:border-gray-700'
-        } rounded-l-md p-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors shadow-lg ${
-          isDragging ? 'cursor-grabbing' : 'cursor-pointer'
-        } touch-none`}
-        style={{ ...getPositionStyle(), touchAction: 'none', WebkitTouchCallout: 'none', WebkitUserSelect: 'none' }}
-        aria-label={isDragging ? t('quickSettings.dragHandle.dragging') : isOpen ? t('quickSettings.dragHandle.closePanel') : t('quickSettings.dragHandle.openPanel')}
-        title={isDragging ? t('quickSettings.dragHandle.draggingStatus') : t('quickSettings.dragHandle.toggleAndMove')}
-      >
-        {isDragging ? (
-          <GripVertical className="h-5 w-5 text-blue-500 dark:text-blue-400" />
-        ) : isOpen ? (
-          <ChevronRight className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-        ) : (
-          <ChevronLeft className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-        )}
-      </button>
-
-      {/* Panel */}
-      <div
-        className={`fixed top-0 right-0 h-full w-64 bg-background border-l border-border shadow-xl transform transition-transform duration-150 ease-out z-40 ${
-          isOpen ? 'translate-x-0' : 'translate-x-full'
-        } ${isMobile ? 'h-screen' : ''}`}
-      >
-        <div className="h-full flex flex-col">
-          {/* Header */}
-          <div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-              <Settings2 className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-              {t('quickSettings.title')}
-            </h3>
-          </div>
-
-          {/* Settings Content */}
-          <div className={`flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6 bg-background ${isMobile ? 'pb-mobile-nav' : ''}`}>
-            {/* Appearance Settings */}
-            <div className="space-y-2">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">{t('quickSettings.sections.appearance')}</h4>
-
-              <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  {isDarkMode ? <Moon className="h-4 w-4 text-gray-600 dark:text-gray-400" /> : <Sun className="h-4 w-4 text-gray-600 dark:text-gray-400" />}
-                  {t('quickSettings.darkMode')}
-                </span>
-                <DarkModeToggle />
-              </div>
-
-              {/* Language Selector */}
-              <div>
-                <LanguageSelector compact={true} />
-              </div>
-            </div>
-
-            {/* Tool Display Settings */}
-            <div className="space-y-2">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">{t('quickSettings.sections.toolDisplay')}</h4>
-
-              <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  <Maximize2 className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  {t('quickSettings.autoExpandTools')}
-                </span>
-                <input
-                  type="checkbox"
-                  checked={autoExpandTools}
-                  onChange={(e) => setPreference('autoExpandTools', e.target.checked)}
-                  className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600"
-                />
-              </label>
-
-              <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  <Eye className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  {t('quickSettings.showRawParameters')}
-                </span>
-                <input
-                  type="checkbox"
-                  checked={showRawParameters}
-                  onChange={(e) => setPreference('showRawParameters', e.target.checked)}
-                  className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600"
-                />
-              </label>
-
-              <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  <Brain className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  {t('quickSettings.showThinking')}
-                </span>
-                <input
-                  type="checkbox"
-                  checked={showThinking}
-                  onChange={(e) => setPreference('showThinking', e.target.checked)}
-                  className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600"
-                />
-              </label>
-            </div>
-            {/* View Options */}
-            <div className="space-y-2">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">{t('quickSettings.sections.viewOptions')}</h4>
-
-              <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  <ArrowDown className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  {t('quickSettings.autoScrollToBottom')}
-                </span>
-                <input
-                  type="checkbox"
-                  checked={autoScrollToBottom}
-                  onChange={(e) => setPreference('autoScrollToBottom', e.target.checked)}
-                  className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600"
-                />
-              </label>
-            </div>
-
-            {/* Input Settings */}
-            <div className="space-y-2">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">{t('quickSettings.sections.inputSettings')}</h4>
-
-              <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  <Languages className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  {t('quickSettings.sendByCtrlEnter')}
-                </span>
-                <input
-                  type="checkbox"
-                  checked={sendByCtrlEnter}
-                  onChange={(e) => setPreference('sendByCtrlEnter', e.target.checked)}
-                  className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600"
-                />
-              </label>
-              <p className="text-xs text-gray-500 dark:text-gray-400 ml-3">
-                {t('quickSettings.sendByCtrlEnterDescription')}
-              </p>
-            </div>
-
-            {/* Whisper Dictation Settings - HIDDEN */}
-            <div className="space-y-2" style={{ display: 'none' }}>
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">{t('quickSettings.sections.whisperDictation')}</h4>
-              
-              <div className="space-y-2">
-                <label className="flex items-start p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                  <input
-                    type="radio"
-                    name="whisperMode"
-                    value="default"
-                    checked={whisperMode === 'default'}
-                    onChange={() => {
-                      setWhisperMode('default');
-                      localStorage.setItem('whisperMode', 'default');
-                      window.dispatchEvent(new Event('whisperModeChanged'));
-                    }}
-                    className="mt-0.5 h-4 w-4 border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-800 dark:checked:bg-blue-600"
-                  />
-                  <div className="ml-3 flex-1">
-                    <span className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
-                      <Mic className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                      {t('quickSettings.whisper.modes.default')}
-                    </span>
-                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                      {t('quickSettings.whisper.modes.defaultDescription')}
-                    </p>
-                  </div>
-                </label>
-
-                <label className="flex items-start p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                  <input
-                    type="radio"
-                    name="whisperMode"
-                    value="prompt"
-                    checked={whisperMode === 'prompt'}
-                    onChange={() => {
-                      setWhisperMode('prompt');
-                      localStorage.setItem('whisperMode', 'prompt');
-                      window.dispatchEvent(new Event('whisperModeChanged'));
-                    }}
-                    className="mt-0.5 h-4 w-4 border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-800 dark:checked:bg-blue-600"
-                  />
-                  <div className="ml-3 flex-1">
-                    <span className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
-                      <Sparkles className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                      {t('quickSettings.whisper.modes.prompt')}
-                    </span>
-                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                      {t('quickSettings.whisper.modes.promptDescription')}
-                    </p>
-                  </div>
-                </label>
-
-                <label className="flex items-start p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                  <input
-                    type="radio"
-                    name="whisperMode"
-                    value="vibe"
-                    checked={whisperMode === 'vibe' || whisperMode === 'instructions' || whisperMode === 'architect'}
-                    onChange={() => {
-                      setWhisperMode('vibe');
-                      localStorage.setItem('whisperMode', 'vibe');
-                      window.dispatchEvent(new Event('whisperModeChanged'));
-                    }}
-                    className="mt-0.5 h-4 w-4 border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-800 dark:checked:bg-blue-600"
-                  />
-                  <div className="ml-3 flex-1">
-                    <span className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
-                      <FileText className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                      {t('quickSettings.whisper.modes.vibe')}
-                    </span>
-                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                      {t('quickSettings.whisper.modes.vibeDescription')}
-                    </p>
-                  </div>
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Backdrop */}
-      {isOpen && (
-        <div
-          className="fixed inset-0 bg-background/80 backdrop-blur-sm z-30 transition-opacity duration-150 ease-out"
-          onClick={handleToggle}
-        />
-      )}
-    </>
-  );
-};
-
-export default QuickSettingsPanel;

src/components/SetupForm.jsx

@@ -1,133 +0,0 @@
-import React, { useState } from 'react';
-import { useAuth } from '../contexts/AuthContext';
-const SetupForm = () => {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-  
-  const { register } = useAuth();
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError('');
-    
-    if (password !== confirmPassword) {
-      setError('Passwords do not match');
-      return;
-    }
-    
-    if (username.length < 3) {
-      setError('Username must be at least 3 characters long');
-      return;
-    }
-    
-    if (password.length < 6) {
-      setError('Password must be at least 6 characters long');
-      return;
-    }
-    
-    setIsLoading(true);
-    
-    const result = await register(username, password);
-    
-    if (!result.success) {
-      setError(result.error);
-    }
-    
-    setIsLoading(false);
-  };
-
-  return (
-    <div className="min-h-screen bg-background flex items-center justify-center p-4">
-      <div className="w-full max-w-md">
-        <div className="bg-card rounded-lg shadow-lg border border-border p-8 space-y-6">
-          {/* Logo and Title */}
-          <div className="text-center">
-            <div className="flex justify-center mb-4">
-              <img src="/logo.svg" alt="CloudCLI" className="w-16 h-16" />
-            </div>
-            <h1 className="text-2xl font-bold text-foreground">Welcome to Claude Code UI</h1>
-            <p className="text-muted-foreground mt-2">
-              Set up your account to get started
-            </p>
-          </div>
-
-          {/* Setup Form */}
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label htmlFor="username" className="block text-sm font-medium text-foreground mb-1">
-                Username
-              </label>
-              <input
-                type="text"
-                id="username"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder="Enter your username"
-                required
-                disabled={isLoading}
-              />
-            </div>
-
-            <div>
-              <label htmlFor="password" className="block text-sm font-medium text-foreground mb-1">
-                Password
-              </label>
-              <input
-                type="password"
-                id="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder="Enter your password"
-                required
-                disabled={isLoading}
-              />
-            </div>
-
-            <div>
-              <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground mb-1">
-                Confirm Password
-              </label>
-              <input
-                type="password"
-                id="confirmPassword"
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder="Confirm your password"
-                required
-                disabled={isLoading}
-              />
-            </div>
-
-            {error && (
-              <div className="p-3 bg-red-100 dark:bg-red-900/20 border border-red-300 dark:border-red-800 rounded-md">
-                <p className="text-sm text-red-700 dark:text-red-400">{error}</p>
-              </div>
-            )}
-
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200"
-            >
-              {isLoading ? 'Setting up...' : 'Create Account'}
-            </button>
-          </form>
-
-          <div className="text-center">
-            <p className="text-sm text-muted-foreground">
-              This is a single-user system. Only one account can be created.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SetupForm;

src/components/TaskCard.jsx

@@ -1,210 +0,0 @@
-import React from 'react';
-import { Clock, CheckCircle, Circle, AlertCircle, Pause, X, ArrowRight, ChevronUp, Minus, Flag } from 'lucide-react';
-import { cn } from '../lib/utils';
-import Tooltip from './Tooltip';
-
-const TaskCard = ({ 
-  task,
-  onClick,
-  showParent = false,
-  className = ''
-}) => {
-  const getStatusConfig = (status) => {
-    switch (status) {
-      case 'done':
-        return {
-          icon: CheckCircle,
-          bgColor: 'bg-green-50 dark:bg-green-950',
-          borderColor: 'border-green-200 dark:border-green-800',
-          iconColor: 'text-green-600 dark:text-green-400',
-          textColor: 'text-green-900 dark:text-green-100',
-          statusText: 'Done'
-        };
-      
-      case 'in-progress':
-        return {
-          icon: Clock,
-          bgColor: 'bg-blue-50 dark:bg-blue-950',
-          borderColor: 'border-blue-200 dark:border-blue-800',
-          iconColor: 'text-blue-600 dark:text-blue-400',
-          textColor: 'text-blue-900 dark:text-blue-100',
-          statusText: 'In Progress'
-        };
-      
-      case 'review':
-        return {
-          icon: AlertCircle,
-          bgColor: 'bg-amber-50 dark:bg-amber-950',
-          borderColor: 'border-amber-200 dark:border-amber-800',
-          iconColor: 'text-amber-600 dark:text-amber-400',
-          textColor: 'text-amber-900 dark:text-amber-100',
-          statusText: 'Review'
-        };
-      
-      case 'deferred':
-        return {
-          icon: Pause,
-          bgColor: 'bg-gray-50 dark:bg-gray-800',
-          borderColor: 'border-gray-200 dark:border-gray-700',
-          iconColor: 'text-gray-500 dark:text-gray-400',
-          textColor: 'text-gray-700 dark:text-gray-300',
-          statusText: 'Deferred'
-        };
-      
-      case 'cancelled':
-        return {
-          icon: X,
-          bgColor: 'bg-red-50 dark:bg-red-950',
-          borderColor: 'border-red-200 dark:border-red-800',
-          iconColor: 'text-red-600 dark:text-red-400',
-          textColor: 'text-red-900 dark:text-red-100',
-          statusText: 'Cancelled'
-        };
-      
-      case 'pending':
-      default:
-        return {
-          icon: Circle,
-          bgColor: 'bg-slate-50 dark:bg-slate-800',
-          borderColor: 'border-slate-200 dark:border-slate-700',
-          iconColor: 'text-slate-500 dark:text-slate-400',
-          textColor: 'text-slate-900 dark:text-slate-100',
-          statusText: 'Pending'
-        };
-    }
-  };
-
-  const config = getStatusConfig(task.status);
-  const Icon = config.icon;
-
-  const getPriorityIcon = (priority) => {
-    switch (priority) {
-      case 'high':
-        return (
-          <Tooltip content="High Priority">
-            <div className="w-4 h-4 bg-red-100 dark:bg-red-900/30 rounded flex items-center justify-center">
-              <ChevronUp className="w-2.5 h-2.5 text-red-600 dark:text-red-400" />
-            </div>
-          </Tooltip>
-        );
-      case 'medium':
-        return (
-          <Tooltip content="Medium Priority">
-            <div className="w-4 h-4 bg-amber-100 dark:bg-amber-900/30 rounded flex items-center justify-center">
-              <Minus className="w-2.5 h-2.5 text-amber-600 dark:text-amber-400" />
-            </div>
-          </Tooltip>
-        );
-      case 'low':
-        return (
-          <Tooltip content="Low Priority">
-            <div className="w-4 h-4 bg-blue-100 dark:bg-blue-900/30 rounded flex items-center justify-center">
-              <Circle className="w-1.5 h-1.5 text-blue-600 dark:text-blue-400 fill-current" />
-            </div>
-          </Tooltip>
-        );
-      default:
-        return (
-          <Tooltip content="No Priority Set">
-            <div className="w-4 h-4 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
-              <Circle className="w-1.5 h-1.5 text-gray-400 dark:text-gray-500" />
-            </div>
-          </Tooltip>
-        );
-    }
-  };
-
-  return (
-    <div
-      className={cn(
-        'bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700',
-        'hover:shadow-md hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-200 cursor-pointer',
-        'p-3 space-y-3',
-        onClick && 'hover:-translate-y-0.5',
-        className
-      )}
-      onClick={onClick}
-    >
-      {/* Header with Task ID, Title, and Priority */}
-      <div className="flex items-start justify-between gap-2 mb-2">
-        {/* Task ID and Title */}
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-1">
-            <Tooltip content={`Task ID: ${task.id}`}>
-              <span className="text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">
-                {task.id}
-              </span>
-            </Tooltip>
-          </div>
-          <h3 className="font-medium text-sm text-gray-900 dark:text-white line-clamp-2 leading-tight">
-            {task.title}
-          </h3>
-          {showParent && task.parentId && (
-            <span className="text-xs text-gray-500 dark:text-gray-400 font-medium">
-              Task {task.parentId}
-            </span>
-          )}
-        </div>
-        
-        {/* Priority Icon */}
-        <div className="flex-shrink-0">
-          {getPriorityIcon(task.priority)}
-        </div>
-      </div>
-
-      {/* Footer with Dependencies and Status */}
-      <div className="flex items-center justify-between">
-        {/* Dependencies */}
-        <div className="flex items-center">
-          {task.dependencies && Array.isArray(task.dependencies) && task.dependencies.length > 0 && (
-            <Tooltip content={`Depends on: ${task.dependencies.map(dep => `Task ${dep}`).join(', ')}`}>
-              <div className="flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400">
-                <ArrowRight className="w-3 h-3" />
-                <span>Depends on: {task.dependencies.join(', ')}</span>
-              </div>
-            </Tooltip>
-          )}
-        </div>
-
-        {/* Status Badge */}
-        <Tooltip content={`Status: ${config.statusText}`}>
-          <div className="flex items-center gap-1">
-            <div className={cn('w-2 h-2 rounded-full', config.iconColor.replace('text-', 'bg-'))} />
-            <span className={cn('text-xs font-medium', config.textColor)}>
-              {config.statusText}
-            </span>
-          </div>
-        </Tooltip>
-      </div>
-
-      {/* Subtask Progress (if applicable) */}
-      {task.subtasks && task.subtasks.length > 0 && (
-        <div className="ml-3">
-          <div className="flex items-center gap-2 mb-1">
-            <span className="text-xs text-gray-500 dark:text-gray-400">Progress:</span>
-            <Tooltip content={`${task.subtasks.filter(st => st.status === 'done').length} of ${task.subtasks.length} subtasks completed`}>
-              <div className="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
-                <div 
-                  className={cn(
-                    'h-full rounded-full transition-all duration-300',
-                    task.status === 'done' ? 'bg-green-500' : 'bg-blue-500'
-                  )}
-                  style={{
-                    width: `${Math.round((task.subtasks.filter(st => st.status === 'done').length / task.subtasks.length) * 100)}%`
-                  }}
-                />
-              </div>
-            </Tooltip>
-            <Tooltip content={`${task.subtasks.filter(st => st.status === 'done').length} completed, ${task.subtasks.filter(st => st.status === 'pending').length} pending, ${task.subtasks.filter(st => st.status === 'in-progress').length} in progress`}>
-              <span className="text-xs text-gray-500 dark:text-gray-400">
-                {task.subtasks.filter(st => st.status === 'done').length}/{task.subtasks.length}
-              </span>
-            </Tooltip>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default TaskCard;

src/components/TaskDetail.jsx

@@ -1,407 +0,0 @@
-import React, { useState } from 'react';
-import { X, Flag, User, ArrowRight, CheckCircle, Circle, AlertCircle, Pause, Edit, Save, Copy, ChevronDown, ChevronRight, Clock } from 'lucide-react';
-import { cn } from '../lib/utils';
-import TaskIndicator from './TaskIndicator';
-import { api } from '../utils/api';
-import { useTaskMaster } from '../contexts/TaskMasterContext';
-import { copyTextToClipboard } from '../utils/clipboard';
-
-const TaskDetail = ({ 
-  task, 
-  onClose, 
-  onEdit,
-  onStatusChange,
-  onTaskClick,
-  isOpen = true,
-  className = ''
-}) => {
-  const [editMode, setEditMode] = useState(false);
-  const [editedTask, setEditedTask] = useState(task || {});
-  const [isSaving, setIsSaving] = useState(false);
-  const [showDetails, setShowDetails] = useState(false);
-  const [showTestStrategy, setShowTestStrategy] = useState(false);
-  const { currentProject, refreshTasks } = useTaskMaster();
-
-  if (!isOpen || !task) return null;
-
-  const handleSave = async () => {
-    if (!currentProject) return;
-    
-    setIsSaving(true);
-    try {
-      // Only include changed fields
-      const updates = {};
-      if (editedTask.title !== task.title) updates.title = editedTask.title;
-      if (editedTask.description !== task.description) updates.description = editedTask.description;
-      if (editedTask.details !== task.details) updates.details = editedTask.details;
-      
-      if (Object.keys(updates).length > 0) {
-        const response = await api.taskmaster.updateTask(currentProject.name, task.id, updates);
-        
-        if (response.ok) {
-          // Refresh tasks to get updated data
-          refreshTasks?.();
-          onEdit?.(editedTask);
-          setEditMode(false);
-        } else {
-          const error = await response.json();
-          console.error('Failed to update task:', error);
-          alert(`Failed to update task: ${error.message}`);
-        }
-      } else {
-        setEditMode(false);
-      }
-    } catch (error) {
-      console.error('Error updating task:', error);
-      alert('Error updating task. Please try again.');
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const handleStatusChange = async (newStatus) => {
-    if (!currentProject) return;
-    
-    try {
-      const response = await api.taskmaster.updateTask(currentProject.name, task.id, { status: newStatus });
-      
-      if (response.ok) {
-        refreshTasks?.();
-        onStatusChange?.(task.id, newStatus);
-      } else {
-        const error = await response.json();
-        console.error('Failed to update task status:', error);
-        alert(`Failed to update task status: ${error.message}`);
-      }
-    } catch (error) {
-      console.error('Error updating task status:', error);
-      alert('Error updating task status. Please try again.');
-    }
-  };
-
-  const copyTaskId = () => {
-    copyTextToClipboard(task.id.toString());
-  };
-
-  const getStatusConfig = (status) => {
-    switch (status) {
-      case 'done':
-        return { icon: CheckCircle, color: 'text-green-600 dark:text-green-400', bg: 'bg-green-50 dark:bg-green-950' };
-      case 'in-progress':
-        return { icon: Clock, color: 'text-blue-600 dark:text-blue-400', bg: 'bg-blue-50 dark:bg-blue-950' };
-      case 'review':
-        return { icon: AlertCircle, color: 'text-amber-600 dark:text-amber-400', bg: 'bg-amber-50 dark:bg-amber-950' };
-      case 'deferred':
-        return { icon: Pause, color: 'text-gray-500 dark:text-gray-400', bg: 'bg-gray-50 dark:bg-gray-800' };
-      case 'cancelled':
-        return { icon: X, color: 'text-red-600 dark:text-red-400', bg: 'bg-red-50 dark:bg-red-950' };
-      default:
-        return { icon: Circle, color: 'text-slate-500 dark:text-slate-400', bg: 'bg-slate-50 dark:bg-slate-800' };
-    }
-  };
-
-  const statusConfig = getStatusConfig(task.status);
-  const StatusIcon = statusConfig.icon;
-
-
-  const getPriorityColor = (priority) => {
-    switch (priority) {
-      case 'high': return 'text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950';
-      case 'medium': return 'text-yellow-600 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-950';
-      case 'low': return 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950';
-      default: return 'text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800';
-    }
-  };
-
-  const statusOptions = [
-    { value: 'pending', label: 'Pending' },
-    { value: 'in-progress', label: 'In Progress' },
-    { value: 'review', label: 'Review' },
-    { value: 'done', label: 'Done' },
-    { value: 'deferred', label: 'Deferred' },
-    { value: 'cancelled', label: 'Cancelled' }
-  ];
-
-  return (
-    <div className="modal-backdrop fixed inset-0 flex items-center justify-center z-[100] md:p-4 bg-black/50">
-      <div className={cn(
-        'bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 md:rounded-lg shadow-xl',
-        'w-full md:max-w-4xl h-full md:h-[90vh] flex flex-col',
-        className
-      )}>
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 md:p-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
-          <div className="flex items-center gap-3 min-w-0 flex-1">
-            <StatusIcon className={cn('w-6 h-6', statusConfig.color)} />
-            <div className="min-w-0 flex-1">
-              <div className="flex items-center gap-2 mb-1">
-                <button
-                  onClick={copyTaskId}
-                  className="flex items-center gap-1 px-2 py-1 text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
-                  title="Click to copy task ID"
-                >
-                  <span>Task {task.id}</span>
-                  <Copy className="w-3 h-3" />
-                </button>
-                {task.parentId && (
-                  <span className="text-xs text-gray-500 dark:text-gray-400">
-                    Subtask of Task {task.parentId}
-                  </span>
-                )}
-              </div>
-              {editMode ? (
-                <input
-                  type="text"
-                  value={editedTask.title || ''}
-                  onChange={(e) => setEditedTask({ ...editedTask, title: e.target.value })}
-                  className="w-full text-lg font-semibold bg-transparent border-b-2 border-blue-500 focus:outline-none text-gray-900 dark:text-white"
-                  placeholder="Task title"
-                />
-              ) : (
-                <h1 className="text-lg md:text-xl font-semibold text-gray-900 dark:text-white line-clamp-2">
-                  {task.title}
-                </h1>
-              )}
-            </div>
-          </div>
-          
-          <div className="flex items-center gap-2 flex-shrink-0">
-            {editMode ? (
-              <>
-                <button
-                  onClick={handleSave}
-                  disabled={isSaving}
-                  className="p-2 text-green-600 hover:text-green-700 hover:bg-green-50 dark:hover:bg-green-950 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                  title={isSaving ? "Saving..." : "Save changes"}
-                >
-                  <Save className={cn("w-5 h-5", isSaving && "animate-spin")} />
-                </button>
-                <button
-                  onClick={() => {
-                    setEditMode(false);
-                    setEditedTask(task);
-                  }}
-                  disabled={isSaving}
-                  className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                  title="Cancel editing"
-                >
-                  <X className="w-5 h-5" />
-                </button>
-              </>
-            ) : (
-              <button
-                onClick={() => setEditMode(true)}
-                className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
-                title="Edit task"
-              >
-                <Edit className="w-5 h-5" />
-              </button>
-            )}
-            
-            <button
-              onClick={onClose}
-              className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
-              title="Close"
-            >
-              <X className="w-5 h-5" />
-            </button>
-          </div>
-        </div>
-
-        {/* Content */}
-        <div className="flex-1 overflow-y-auto p-4 md:p-6 space-y-6 min-h-0">
-          {/* Status and Metadata Row */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {/* Status */}
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Status</label>
-              <div className={cn(
-                'w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600',
-                statusConfig.bg,
-                statusConfig.color
-              )}>
-                <div className="flex items-center gap-2">
-                  <StatusIcon className="w-4 h-4" />
-                  <span className="font-medium capitalize">
-                    {statusOptions.find(option => option.value === task.status)?.label || task.status}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            {/* Priority */}
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Priority</label>
-              <div className={cn(
-                'px-3 py-2 rounded-md text-sm font-medium capitalize',
-                getPriorityColor(task.priority)
-              )}>
-                <Flag className="w-4 h-4 inline mr-2" />
-                {task.priority || 'Not set'}
-              </div>
-            </div>
-
-            {/* Dependencies */}
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Dependencies</label>
-              {task.dependencies && task.dependencies.length > 0 ? (
-                <div className="flex flex-wrap gap-1">
-                  {task.dependencies.map(depId => (
-                    <button 
-                      key={depId} 
-                      onClick={() => onTaskClick && onTaskClick({ id: depId })}
-                      className="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded text-sm hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors cursor-pointer disabled:cursor-default disabled:opacity-50"
-                      disabled={!onTaskClick}
-                      title={onTaskClick ? `Click to view Task ${depId}` : `Task ${depId}`}
-                    >
-                      <ArrowRight className="w-3 h-3 inline mr-1" />
-                      {depId}
-                    </button>
-                  ))}
-                </div>
-              ) : (
-                <span className="text-gray-500 dark:text-gray-400 text-sm">No dependencies</span>
-              )}
-            </div>
-          </div>
-
-          {/* Description */}
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
-            {editMode ? (
-              <textarea
-                value={editedTask.description || ''}
-                onChange={(e) => setEditedTask({ ...editedTask, description: e.target.value })}
-                rows={3}
-                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
-                placeholder="Task description"
-              />
-            ) : (
-              <p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
-                {task.description || 'No description provided'}
-              </p>
-            )}
-          </div>
-
-          {/* Implementation Details */}
-          {task.details && (
-            <div className="border border-gray-200 dark:border-gray-700 rounded-lg">
-              <button
-                onClick={() => setShowDetails(!showDetails)}
-                className="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-              >
-                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                  Implementation Details
-                </span>
-                {showDetails ? (
-                  <ChevronDown className="w-4 h-4 text-gray-500" />
-                ) : (
-                  <ChevronRight className="w-4 h-4 text-gray-500" />
-                )}
-              </button>
-              {showDetails && (
-                <div className="border-t border-gray-200 dark:border-gray-700 p-4">
-                  {editMode ? (
-                    <textarea
-                      value={editedTask.details || ''}
-                      onChange={(e) => setEditedTask({ ...editedTask, details: e.target.value })}
-                      rows={4}
-                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
-                      placeholder="Implementation details"
-                    />
-                  ) : (
-                    <div className="bg-gray-50 dark:bg-gray-800 rounded-md p-4">
-                      <p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
-                        {task.details}
-                      </p>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Test Strategy */}
-          {task.testStrategy && (
-            <div className="border border-gray-200 dark:border-gray-700 rounded-lg">
-              <button
-                onClick={() => setShowTestStrategy(!showTestStrategy)}
-                className="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-              >
-                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                  Test Strategy
-                </span>
-                {showTestStrategy ? (
-                  <ChevronDown className="w-4 h-4 text-gray-500" />
-                ) : (
-                  <ChevronRight className="w-4 h-4 text-gray-500" />
-                )}
-              </button>
-              {showTestStrategy && (
-                <div className="border-t border-gray-200 dark:border-gray-700 p-4">
-                  <div className="bg-blue-50 dark:bg-blue-950 rounded-md p-4">
-                    <p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
-                      {task.testStrategy}
-                    </p>
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Subtasks */}
-          {task.subtasks && task.subtasks.length > 0 && (
-            <div className="space-y-3">
-              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                Subtasks ({task.subtasks.length})
-              </label>
-              <div className="space-y-2">
-                {task.subtasks.map(subtask => {
-                  const subtaskConfig = getStatusConfig(subtask.status);
-                  const SubtaskIcon = subtaskConfig.icon;
-                  return (
-                    <div key={subtask.id} className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-md">
-                      <SubtaskIcon className={cn('w-4 h-4', subtaskConfig.color)} />
-                      <div className="flex-1 min-w-0">
-                        <h4 className="font-medium text-gray-900 dark:text-white truncate">
-                          {subtask.title}
-                        </h4>
-                        {subtask.description && (
-                          <p className="text-sm text-gray-600 dark:text-gray-400 truncate">
-                            {subtask.description}
-                          </p>
-                        )}
-                      </div>
-                      <span className="text-xs text-gray-500 dark:text-gray-400">
-                        {subtask.id}
-                      </span>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-
-        </div>
-
-        {/* Footer */}
-        <div className="flex items-center justify-between p-4 md:p-6 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
-          <div className="text-sm text-gray-500 dark:text-gray-400">
-            Task ID: {task.id}
-          </div>
-          
-          <div className="flex items-center gap-2">
-            <button
-              onClick={onClose}
-              className="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors"
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TaskDetail;