+ 
+
+
+
+[Claude Code](https://docs.anthropic.com/en/docs/claude-code)、[Cursor CLI](https://docs.cursor.com/en/cli/overview) 和 [Codex](https://developers.openai.com/codex) 的桌面端和移动端界面。您可以在本地或远程使用它来查看 Claude Code、Cursor 或 Codex 中的活跃项目和会话,并从任何地方(移动端或桌面端)对它们进行修改。这为您提供了一个在任何地方都能正常使用的合适界面。
+
+ [English](./README.md) | [中文](./README.zh-CN.md)
+
+## 截图
+
+
+ Cloud CLI (又名 Claude Code UI)
+
+
+
+
+
+
+
+
+
+## 功能特性
+
+- **响应式设计** - 在桌面、平板和移动设备上无缝运行,您也可以在移动端使用 Claude Code、Cursor 或 Codex
+- **交互式聊天界面** - 内置聊天界面,与 Claude Code、Cursor 或 Codex 无缝通信
+- **集成 Shell 终端** - 通过内置 shell 功能直接访问 Claude Code、Cursor CLI 或 Codex
+- **文件浏览器** - 交互式文件树,支持语法高亮和实时编辑
+- **Git 浏览器** - 查看、暂存和提交您的更改。您还可以切换分支
+- **会话管理** - 恢复对话、管理多个会话并跟踪历史记录
+- **TaskMaster AI 集成** *(可选)* - 通过 AI 驱动的任务规划、PRD 解析和工作流自动化实现高级项目管理
+- **模型兼容性** - 适用于 Claude Sonnet 4.5、Opus 4.5 和 GPT-5.2
+
+
+## 快速开始
+
+### 前置要求
+
+- [Node.js](https://nodejs.org/) v20 或更高版本
+- 已安装并配置 [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code),和/或
+- 已安装并配置 [Cursor CLI](https://docs.cursor.com/en/cli/overview),和/或
+- 已安装并配置 [Codex](https://developers.openai.com/codex)
+
+### 一键操作(推荐)
+
+无需安装,直接运行:
+
+```bash
+npx @siteboon/claude-code-ui
+```
+
+服务器将启动并可通过 `http://localhost:3001`(或您配置的 PORT)访问。
+
+**重启**: 停止服务器后只需再次运行相同的 `npx` 命令
+
+### 全局安装(供常规使用)
+
+为了频繁使用,一次性全局安装:
+
+```bash
+npm install -g @siteboon/claude-code-ui
+```
+
+然后使用简单命令启动:
+
+```bash
+claude-code-ui
+```
+
+
+**重启**: 使用 Ctrl+C 停止,然后再次运行 `claude-code-ui`。
+
+**更新**:
+```bash
+cloudcli update
+```
+
+### CLI 使用方法
+
+全局安装后,您可以访问 `claude-code-ui` 和 `cloudcli` 命令:
+
+| 命令 / 选项 | 简写 | 描述 |
+|------------------|-------|-------------|
+| `cloudcli` 或 `claude-code-ui` | | 启动服务器(默认) |
+| `cloudcli start` | | 显式启动服务器 |
+| `cloudcli status` | | 显示配置和数据位置 |
+| `cloudcli update` | | 更新到最新版本 |
+| `cloudcli help` | | 显示帮助信息 |
+| `cloudcli version` | | 显示版本信息 |
+| `--port
+桌面视图+
++显示项目概览和聊天界面的主界面 + |
+
+移动端体验+
++具有触摸导航的响应式移动设计 + |
+
+CLI 选择+
++在 Claude Code、Cursor CLI 和 Codex 之间选择 + |
+|
+
+
+*工具设置界面 - 仅启用您需要的内容*
+
+
+
+**推荐方法**: 首先启用基本工具,然后根据需要添加更多。您可以随时调整这些设置。
+
+## TaskMaster AI 集成 *(可选)*
+
+Claude Code UI 支持 **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)**(aka claude-task-master)集成,用于高级项目管理和 AI 驱动的任务规划。
+
+它提供
+- 从 PRD(产品需求文档)生成 AI 驱动的任务
+- 智能任务分解和依赖管理
+- 可视化任务板和进度跟踪
+
+**设置与文档**: 访问 [TaskMaster AI GitHub 仓库](https://github.com/eyaltoledano/claude-task-master)获取安装说明、配置指南和使用示例。
+安装后,您应该能够从设置中启用它
+
+
+## 使用指南
+
+### 核心功能
+
+#### 项目管理
+当可用时,它会自动发现 Claude Code、Cursor 或 Codex 会话并将它们分组到项目中
+- **项目操作** - 重命名、删除和组织项目
+- **智能导航** - 快速访问最近的项目和会话
+- **MCP 支持** - 通过 UI 添加您自己的 MCP 服务器
+
+#### 聊天界面
+- **使用响应式聊天或 Claude Code/Cursor CLI/Codex CLI** - 您可以使用自适应聊天界面或使用 shell 按钮连接到您选择的 CLI
+- **实时通信** - 通过 WebSocket 连接从您选择的 CLI(Claude Code/Cursor/Codex)流式传输响应
+- **会话管理** - 恢复之前的对话或启动新会话
+- **消息历史** - 带有时间戳和元数据的完整对话历史
+- **多格式支持** - 文本、代码块和文件引用
+
+#### 文件浏览器与编辑器
+- **交互式文件树** - 使用展开/折叠导航浏览项目结构
+- **实时文件编辑** - 直接在界面中读取、修改和保存文件
+- **语法高亮** - 支持多种编程语言
+- **文件操作** - 创建、重命名、删除文件和目录
+
+#### Git 浏览器
+
+
+#### TaskMaster AI 集成 *(可选)*
+- **可视化任务板** - 用于管理开发任务的看板风格界面
+- **PRD 解析器** - 创建产品需求文档并将其解析为结构化任务
+- **进度跟踪** - 实时状态更新和完成跟踪
+
+#### 会话管理
+- **会话持久化** - 所有对话自动保存
+- **会话组织** - 按项目和 timestamp 分组会话
+- **会话操作** - 重命名、删除和导出对话历史
+- **跨设备同步** - 从任何设备访问会话
+
+### 移动应用
+- **响应式设计** - 针对所有屏幕尺寸进行优化
+- **触摸友好界面** - 滑动手势和触摸导航
+- **移动导航** - 底部选项卡栏,方便拇指导航
+- **自适应布局** - 可折叠侧边栏和智能内容优先级
+- **添加到主屏幕快捷方式** - 添加快捷方式到主屏幕,应用程序将像 PWA 一样运行
+
+## 架构
+
+### 系统概览
+
+```
+┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
+│ Frontend │ │ Backend │ │ Agent │
+│ (React/Vite) │◄──►│ (Express/WS) │◄──►│ Integration │
+│ │ │ │ │ │
+└─────────────────┘ └─────────────────┘ └─────────────────┘
+```
+
+### 后端 (Node.js + Express)
+- **Express 服务器** - 具有静态文件服务的 RESTful API
+- **WebSocket 服务器** - 用于聊天和项目刷新的通信
+- **Agent 集成 (Claude Code / Cursor CLI / Codex)** - 进程生成和管理
+- **文件系统 API** - 为项目公开文件浏览器
+
+### 前端 (React + Vite)
+- **React 18** - 带有 hooks 的现代组件架构
+- **CodeMirror** - 具有语法高亮的高级代码编辑器
+
+
+
+
+### 贡献
+
+我们欢迎贡献!请遵循以下指南:
+
+#### 入门
+1. **Fork** 仓库
+2. **克隆** 您的 fork: `git clone
+ 为 Claude Code、Cursor 和 Codex 社区精心打造。
+
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index b7ab7c0..109cf7d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,8 @@
"express": "^4.18.2",
"fuse.js": "^7.0.0",
"gray-matter": "^4.0.3",
+ "i18next": "^25.7.4",
+ "i18next-browser-languagedetector": "^8.2.0",
"jsonwebtoken": "^9.0.2",
"katex": "^0.16.25",
"lucide-react": "^0.515.0",
@@ -49,8 +51,10 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
+ "react-i18next": "^16.5.3",
"react-markdown": "^10.1.0",
"react-router-dom": "^6.8.1",
+ "react-syntax-highlighter": "^15.6.1",
"rehype-katex": "^7.0.1",
"remark-gfm": "^4.0.0",
"remark-math": "^6.0.0",
@@ -359,9 +363,9 @@
}
},
"node_modules/@babel/runtime": {
- "version": "7.27.6",
- "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
- "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+ "version": "7.28.6",
+ "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.28.6.tgz",
+ "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
"license": "MIT",
"engines": {
"node": ">=6.9.0"
@@ -5057,6 +5061,19 @@
"reusify": "^1.0.4"
}
},
+ "node_modules/fault": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+ "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+ "license": "MIT",
+ "dependencies": {
+ "format": "^0.2.0"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
"node_modules/file-selector": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz",
@@ -5136,6 +5153,14 @@
"url": "https://github.com/sponsors/isaacs"
}
},
+ "node_modules/format": {
+ "version": "0.2.2",
+ "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+ "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+ "engines": {
+ "node": ">=0.4.x"
+ }
+ },
"node_modules/forwarded": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -5756,6 +5781,30 @@
"url": "https://opencollective.com/unified"
}
},
+ "node_modules/highlight.js": {
+ "version": "10.7.3",
+ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+ "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+ "license": "BSD-3-Clause",
+ "engines": {
+ "node": "*"
+ }
+ },
+ "node_modules/highlightjs-vue": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
+ "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
+ "license": "CC0-1.0"
+ },
+ "node_modules/html-parse-stringify": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmmirror.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+ "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+ "license": "MIT",
+ "dependencies": {
+ "void-elements": "3.1.0"
+ }
+ },
"node_modules/html-url-attributes": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -5837,6 +5886,46 @@
"ms": "^2.0.0"
}
},
+ "node_modules/i18next": {
+ "version": "25.7.4",
+ "resolved": "https://registry.npmmirror.com/i18next/-/i18next-25.7.4.tgz",
+ "integrity": "sha512-hRkpEblXXcXSNbw8mBNq9042OEetgyB/ahc/X17uV/khPwzV+uB8RHceHh3qavyrkPJvmXFKXME2Sy1E0KjAfw==",
+ "funding": [
+ {
+ "type": "individual",
+ "url": "https://locize.com"
+ },
+ {
+ "type": "individual",
+ "url": "https://locize.com/i18next.html"
+ },
+ {
+ "type": "individual",
+ "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "@babel/runtime": "^7.28.4"
+ },
+ "peerDependencies": {
+ "typescript": "^5"
+ },
+ "peerDependenciesMeta": {
+ "typescript": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/i18next-browser-languagedetector": {
+ "version": "8.2.0",
+ "resolved": "https://registry.npmmirror.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.0.tgz",
+ "integrity": "sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==",
+ "license": "MIT",
+ "dependencies": {
+ "@babel/runtime": "^7.23.2"
+ }
+ },
"node_modules/iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -6569,6 +6658,20 @@
"loose-envify": "cli.js"
}
},
+ "node_modules/lowlight": {
+ "version": "1.20.0",
+ "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+ "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+ "license": "MIT",
+ "dependencies": {
+ "fault": "^1.0.0",
+ "highlight.js": "~10.7.0"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
"node_modules/lru-cache": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -8101,9 +8204,9 @@
}
},
"node_modules/node-pty": {
- "version": "1.1.0-beta9",
- "resolved": "https://registry.npmjs.org/node-pty/-/node-pty-1.1.0-beta9.tgz",
- "integrity": "sha512-/Ue38pvXJdgRZ3+me1FgfglLd301GhJN0NStiotdt61tm43N5htUyR/IXOUzOKuNaFmCwIhy6nwb77Ky41LMbw==",
+ "version": "1.1.0",
+ "resolved": "https://registry.npmmirror.com/node-pty/-/node-pty-1.1.0.tgz",
+ "integrity": "sha512-20JqtutY6JPXTUnL0ij1uad7Qe1baT46lyolh2sSENDd4sTzKZ4nmAFkeAARDKwmlLjPx6XKRlwRUxwjOy+lUg==",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
@@ -8840,6 +8943,15 @@
"node": ">=10"
}
},
+ "node_modules/prismjs": {
+ "version": "1.30.0",
+ "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+ "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/proc-log": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.2.0.tgz",
@@ -9086,6 +9198,33 @@
"react": ">= 16.8 || 18.0.0"
}
},
+ "node_modules/react-i18next": {
+ "version": "16.5.3",
+ "resolved": "https://registry.npmmirror.com/react-i18next/-/react-i18next-16.5.3.tgz",
+ "integrity": "sha512-fo+/NNch37zqxOzlBYrWMx0uy/yInPkRfjSuy4lqKdaecR17nvCHnEUt3QyzA8XjQ2B/0iW/5BhaHR3ZmukpGw==",
+ "license": "MIT",
+ "dependencies": {
+ "@babel/runtime": "^7.28.4",
+ "html-parse-stringify": "^3.0.1",
+ "use-sync-external-store": "^1.6.0"
+ },
+ "peerDependencies": {
+ "i18next": ">= 25.6.2",
+ "react": ">= 16.8.0",
+ "typescript": "^5"
+ },
+ "peerDependenciesMeta": {
+ "react-dom": {
+ "optional": true
+ },
+ "react-native": {
+ "optional": true
+ },
+ "typescript": {
+ "optional": true
+ }
+ }
+ },
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -9161,6 +9300,23 @@
"react-dom": ">=16.8"
}
},
+ "node_modules/react-syntax-highlighter": {
+ "version": "15.6.6",
+ "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.6.6.tgz",
+ "integrity": "sha512-DgXrc+AZF47+HvAPEmn7Ua/1p10jNoVZVI/LoPiYdtY+OM+/nG5yefLHKJwdKqY1adMuHFbeyBaG9j64ML7vTw==",
+ "license": "MIT",
+ "dependencies": {
+ "@babel/runtime": "^7.3.1",
+ "highlight.js": "^10.4.1",
+ "highlightjs-vue": "^1.0.0",
+ "lowlight": "^1.17.0",
+ "prismjs": "^1.30.0",
+ "refractor": "^3.6.0"
+ },
+ "peerDependencies": {
+ "react": ">= 0.14.0"
+ }
+ },
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -9197,6 +9353,197 @@
"url": "https://paulmillr.com/funding/"
}
},
+ "node_modules/refractor": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
+ "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
+ "license": "MIT",
+ "dependencies": {
+ "hastscript": "^6.0.0",
+ "parse-entities": "^2.0.0",
+ "prismjs": "~1.27.0"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
+ "node_modules/refractor/node_modules/@types/hast": {
+ "version": "2.3.10",
+ "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+ "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+ "license": "MIT",
+ "dependencies": {
+ "@types/unist": "^2"
+ }
+ },
+ "node_modules/refractor/node_modules/@types/unist": {
+ "version": "2.0.11",
+ "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+ "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+ "license": "MIT"
+ },
+ "node_modules/refractor/node_modules/character-entities": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+ "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
+ "node_modules/refractor/node_modules/character-entities-legacy": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+ "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
+ "node_modules/refractor/node_modules/character-reference-invalid": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+ "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
+ "node_modules/refractor/node_modules/comma-separated-tokens": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+ "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
+ "node_modules/refractor/node_modules/hast-util-parse-selector": {
+ "version": "2.2.5",
+ "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+ "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
+ "license": "MIT",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/unified"
+ }
+ },
+ "node_modules/refractor/node_modules/hastscript": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
+ "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+ "license": "MIT",
+ "dependencies": {
+ "@types/hast": "^2.0.0",
+ "comma-separated-tokens": "^1.0.0",
+ "hast-util-parse-selector": "^2.0.0",
+ "property-information": "^5.0.0",
+ "space-separated-tokens": "^1.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/unified"
+ }
+ },
+ "node_modules/refractor/node_modules/is-alphabetical": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+ "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
+ "node_modules/refractor/node_modules/is-alphanumerical": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+ "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+ "license": "MIT",
+ "dependencies": {
+ "is-alphabetical": "^1.0.0",
+ "is-decimal": "^1.0.0"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
+ "node_modules/refractor/node_modules/is-decimal": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+ "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
+ "node_modules/refractor/node_modules/is-hexadecimal": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+ "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
+ "node_modules/refractor/node_modules/parse-entities": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+ "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+ "license": "MIT",
+ "dependencies": {
+ "character-entities": "^1.0.0",
+ "character-entities-legacy": "^1.0.0",
+ "character-reference-invalid": "^1.0.0",
+ "is-alphanumerical": "^1.0.0",
+ "is-decimal": "^1.0.0",
+ "is-hexadecimal": "^1.0.0"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
+ "node_modules/refractor/node_modules/prismjs": {
+ "version": "1.27.0",
+ "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+ "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/refractor/node_modules/property-information": {
+ "version": "5.6.0",
+ "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
+ "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
+ "license": "MIT",
+ "dependencies": {
+ "xtend": "^4.0.0"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
+ "node_modules/refractor/node_modules/space-separated-tokens": {
+ "version": "1.1.5",
+ "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+ "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
"node_modules/rehype-katex": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/rehype-katex/-/rehype-katex-7.0.1.tgz",
@@ -11536,6 +11883,15 @@
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
}
},
+ "node_modules/use-sync-external-store": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+ "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+ "license": "MIT",
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -11708,6 +12064,15 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
+ "node_modules/void-elements": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmmirror.com/void-elements/-/void-elements-3.1.0.tgz",
+ "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/w3c-keyname": {
"version": "2.2.8",
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
diff --git a/package.json b/package.json
index 81c8ded..4cb1f1a 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,8 @@
"express": "^4.18.2",
"fuse.js": "^7.0.0",
"gray-matter": "^4.0.3",
+ "i18next": "^25.7.4",
+ "i18next-browser-languagedetector": "^8.2.0",
"jsonwebtoken": "^9.0.2",
"katex": "^0.16.25",
"lucide-react": "^0.515.0",
@@ -81,8 +83,10 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
+ "react-i18next": "^16.5.3",
"react-markdown": "^10.1.0",
"react-router-dom": "^6.8.1",
+ "react-syntax-highlighter": "^15.6.1",
"rehype-katex": "^7.0.1",
"remark-gfm": "^4.0.0",
"remark-math": "^6.0.0",
diff --git a/server/index.js b/server/index.js
index 25b25fd..2f19dcd 100755
--- a/server/index.js
+++ b/server/index.js
@@ -80,6 +80,20 @@ import { validateApiKey, authenticateToken, authenticateWebSocket } from './midd
// File system watcher for projects folder
let projectsWatcher = null;
const connectedClients = new Set();
+let isGetProjectsRunning = false; // Flag to prevent reentrant calls
+
+// Broadcast progress to all connected WebSocket clients
+function broadcastProgress(progress) {
+ const message = JSON.stringify({
+ type: 'loading_progress',
+ ...progress
+ });
+ connectedClients.forEach(client => {
+ if (client.readyState === WebSocket.OPEN) {
+ client.send(message);
+ }
+ });
+}
// Setup file system watcher for Claude projects folder using chokidar
async function setupProjectsWatcher() {
@@ -117,13 +131,19 @@ async function setupProjectsWatcher() {
const debouncedUpdate = async (eventType, filePath) => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(async () => {
+ // Prevent reentrant calls
+ if (isGetProjectsRunning) {
+ return;
+ }
+
try {
+ isGetProjectsRunning = true;
// Clear project directory cache when files change
clearProjectDirectoryCache();
// Get updated projects list
- const updatedProjects = await getProjects();
+ const updatedProjects = await getProjects(broadcastProgress);
// Notify all connected clients about the project changes
const updateMessage = JSON.stringify({
@@ -142,6 +162,8 @@ async function setupProjectsWatcher() {
} catch (error) {
console.error('[ERROR] Error handling project changes:', error);
+ } finally {
+ isGetProjectsRunning = false;
}
}, 300); // 300ms debounce (slightly faster than before)
};
@@ -366,7 +388,7 @@ app.post('/api/system/update', authenticateToken, async (req, res) => {
app.get('/api/projects', authenticateToken, async (req, res) => {
try {
- const projects = await getProjects();
+ const projects = await getProjects(broadcastProgress);
res.json(projects);
} catch (error) {
res.status(500).json({ error: error.message });
@@ -433,11 +455,12 @@ app.delete('/api/projects/:projectName/sessions/:sessionId', authenticateToken,
}
});
-// Delete project endpoint (only if empty)
+// Delete project endpoint (force=true to delete with sessions)
app.delete('/api/projects/:projectName', authenticateToken, async (req, res) => {
try {
const { projectName } = req.params;
- await deleteProject(projectName);
+ const force = req.query.force === 'true';
+ await deleteProject(projectName, force);
res.json({ success: true });
} catch (error) {
res.status(500).json({ error: error.message });
@@ -496,7 +519,13 @@ app.get('/api/browse-filesystem', authenticateToken, async (req, res) => {
name: item.name,
type: 'directory'
}))
- .slice(0, 20); // Limit results
+ .sort((a, b) => {
+ const aHidden = a.name.startsWith('.');
+ const bHidden = b.name.startsWith('.');
+ if (aHidden && !bHidden) return 1;
+ if (!aHidden && bHidden) return -1;
+ return a.name.localeCompare(b.name);
+ });
// Add common directories if browsing home directory
const suggestions = [];
diff --git a/server/projects.js b/server/projects.js
index ff7a8d1..b4606f8 100755
--- a/server/projects.js
+++ b/server/projects.js
@@ -379,22 +379,46 @@ async function extractProjectDirectory(projectName) {
}
}
-async function getProjects() {
+async function getProjects(progressCallback = null) {
const claudeDir = path.join(os.homedir(), '.claude', 'projects');
const config = await loadProjectConfig();
const projects = [];
const existingProjects = new Set();
-
+ let totalProjects = 0;
+ let processedProjects = 0;
+ let directories = [];
+
try {
// Check if the .claude/projects directory exists
await fs.access(claudeDir);
-
+
// First, get existing Claude projects from the file system
const entries = await fs.readdir(claudeDir, { withFileTypes: true });
-
- for (const entry of entries) {
- if (entry.isDirectory()) {
- existingProjects.add(entry.name);
+ directories = entries.filter(e => e.isDirectory());
+
+ // Build set of existing project names for later
+ directories.forEach(e => existingProjects.add(e.name));
+
+ // Count manual projects not already in directories
+ const manualProjectsCount = Object.entries(config)
+ .filter(([name, cfg]) => cfg.manuallyAdded && !existingProjects.has(name))
+ .length;
+
+ totalProjects = directories.length + manualProjectsCount;
+
+ for (const entry of directories) {
+ processedProjects++;
+
+ // Emit progress
+ if (progressCallback) {
+ progressCallback({
+ phase: 'loading',
+ current: processedProjects,
+ total: totalProjects,
+ currentProject: entry.name
+ });
+ }
+
const projectPath = path.join(claudeDir, entry.name);
// Extract actual project directory from JSONL sessions
@@ -460,20 +484,35 @@ async function getProjects() {
status: 'error'
};
}
-
- projects.push(project);
- }
+
+ projects.push(project);
}
} catch (error) {
// If the directory doesn't exist (ENOENT), that's okay - just continue with empty projects
if (error.code !== 'ENOENT') {
console.error('Error reading projects directory:', error);
}
+ // Calculate total for manual projects only (no directories exist)
+ totalProjects = Object.entries(config)
+ .filter(([name, cfg]) => cfg.manuallyAdded)
+ .length;
}
// Add manually configured projects that don't exist as folders yet
for (const [projectName, projectConfig] of Object.entries(config)) {
if (!existingProjects.has(projectName) && projectConfig.manuallyAdded) {
+ processedProjects++;
+
+ // Emit progress for manual projects
+ if (progressCallback) {
+ progressCallback({
+ phase: 'loading',
+ current: processedProjects,
+ total: totalProjects,
+ currentProject: projectName
+ });
+ }
+
// Use the original path if available, otherwise extract from potential sessions
let actualProjectDir = projectConfig.originalPath;
@@ -541,7 +580,16 @@ async function getProjects() {
projects.push(project);
}
}
-
+
+ // Emit completion after all projects (including manual) are processed
+ if (progressCallback) {
+ progressCallback({
+ phase: 'complete',
+ current: totalProjects,
+ total: totalProjects
+ });
+ }
+
return projects;
}
@@ -978,25 +1026,56 @@ async function isProjectEmpty(projectName) {
}
}
-// Delete an empty project
-async function deleteProject(projectName) {
+// Delete a project (force=true to delete even with sessions)
+async function deleteProject(projectName, force = false) {
const projectDir = path.join(os.homedir(), '.claude', 'projects', projectName);
-
+
try {
- // First check if the project is empty
const isEmpty = await isProjectEmpty(projectName);
- if (!isEmpty) {
+ if (!isEmpty && !force) {
throw new Error('Cannot delete project with existing sessions');
}
-
- // Remove the project directory
- await fs.rm(projectDir, { recursive: true, force: true });
-
- // Remove from project config
+
const config = await loadProjectConfig();
+ let projectPath = config[projectName]?.path || config[projectName]?.originalPath;
+
+ // Fallback to extractProjectDirectory if projectPath is not in config
+ if (!projectPath) {
+ projectPath = await extractProjectDirectory(projectName);
+ }
+
+ // Remove the project directory (includes all Claude sessions)
+ await fs.rm(projectDir, { recursive: true, force: true });
+
+ // Delete all Codex sessions associated with this project
+ if (projectPath) {
+ try {
+ const codexSessions = await getCodexSessions(projectPath, { limit: 0 });
+ for (const session of codexSessions) {
+ try {
+ await deleteCodexSession(session.id);
+ } catch (err) {
+ console.warn(`Failed to delete Codex session ${session.id}:`, err.message);
+ }
+ }
+ } catch (err) {
+ console.warn('Failed to delete Codex sessions:', err.message);
+ }
+
+ // Delete Cursor sessions directory if it exists
+ try {
+ const hash = crypto.createHash('md5').update(projectPath).digest('hex');
+ const cursorProjectDir = path.join(os.homedir(), '.cursor', 'chats', hash);
+ await fs.rm(cursorProjectDir, { recursive: true, force: true });
+ } catch (err) {
+ // Cursor dir may not exist, ignore
+ }
+ }
+
+ // Remove from project config
delete config[projectName];
await saveProjectConfig(config);
-
+
return true;
} catch (error) {
console.error(`Error deleting project ${projectName}:`, error);
@@ -1007,17 +1086,17 @@ async function deleteProject(projectName) {
// Add a project manually to the config (without creating folders)
async function addProjectManually(projectPath, displayName = null) {
const absolutePath = path.resolve(projectPath);
-
+
try {
// Check if the path exists
await fs.access(absolutePath);
} catch (error) {
throw new Error(`Path does not exist: ${absolutePath}`);
}
-
+
// Generate project name (encode path for use as directory name)
const projectName = absolutePath.replace(/\//g, '-');
-
+
// Check if project already exists in config
const config = await loadProjectConfig();
const projectDir = path.join(os.homedir(), '.claude', 'projects', projectName);
@@ -1028,13 +1107,13 @@ async function addProjectManually(projectPath, displayName = null) {
// Allow adding projects even if the directory exists - this enables tracking
// existing Claude Code or Cursor projects in the UI
-
+
// Add to config as manually added project
config[projectName] = {
manuallyAdded: true,
originalPath: absolutePath
};
-
+
if (displayName) {
config[projectName].displayName = displayName;
}
@@ -1166,7 +1245,8 @@ async function getCursorSessions(projectPath) {
// Fetch Codex sessions for a given project path
-async function getCodexSessions(projectPath) {
+async function getCodexSessions(projectPath, options = {}) {
+ const { limit = 5 } = options;
try {
const codexSessionsDir = path.join(os.homedir(), '.codex', 'sessions');
const sessions = [];
@@ -1231,8 +1311,8 @@ async function getCodexSessions(projectPath) {
// Sort sessions by last activity (newest first)
sessions.sort((a, b) => new Date(b.lastActivity) - new Date(a.lastActivity));
- // Return only the first 5 sessions for performance
- return sessions.slice(0, 5);
+ // Return limited sessions for performance (0 = unlimited for deletion)
+ return limit > 0 ? sessions.slice(0, limit) : sessions;
} catch (error) {
console.error('Error fetching Codex sessions:', error);
diff --git a/src/App.jsx b/src/App.jsx
index ed0ef58..371d490 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -18,7 +18,7 @@
* Handles both existing sessions (with real IDs) and new sessions (with temporary IDs).
*/
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
import { BrowserRouter as Router, Routes, Route, useNavigate, useParams } from 'react-router-dom';
import { Settings as SettingsIcon, Sparkles } from 'lucide-react';
import Sidebar from './components/Sidebar';
@@ -36,12 +36,15 @@ import ProtectedRoute from './components/ProtectedRoute';
import { useVersionCheck } from './hooks/useVersionCheck';
import useLocalStorage from './hooks/useLocalStorage';
import { api, authenticatedFetch } from './utils/api';
+import { I18nextProvider, useTranslation } from 'react-i18next';
+import i18n from './i18n/config.js';
// Main App component with routing
function AppContent() {
const navigate = useNavigate();
const { sessionId } = useParams();
+ const { t } = useTranslation('common');
const { updateAvailable, latestVersion, currentVersion, releaseInfo } = useVersionCheck('siteboon', 'claudecodeui');
const [showVersionModal, setShowVersionModal] = useState(false);
@@ -53,6 +56,7 @@ function AppContent() {
const [isMobile, setIsMobile] = useState(false);
const [sidebarOpen, setSidebarOpen] = useState(false);
const [isLoadingProjects, setIsLoadingProjects] = useState(true);
+ const [loadingProgress, setLoadingProgress] = useState(null); // { phase, current, total, currentProject }
const [isInputFocused, setIsInputFocused] = useState(false);
const [showSettings, setShowSettings] = useState(false);
const [settingsInitialTab, setSettingsInitialTab] = useState('agents');
@@ -78,7 +82,10 @@ function AppContent() {
const [externalMessageUpdate, setExternalMessageUpdate] = useState(0);
const { ws, sendMessage, messages } = useWebSocketContext();
-
+
+ // Ref to track loading progress timeout for cleanup
+ const loadingProgressTimeoutRef = useRef(null);
+
// Detect if running as PWA
const [isPWA, setIsPWA] = useState(false);
@@ -170,7 +177,23 @@ function AppContent() {
useEffect(() => {
if (messages.length > 0) {
const latestMessage = messages[messages.length - 1];
-
+
+ // Handle loading progress updates
+ if (latestMessage.type === 'loading_progress') {
+ if (loadingProgressTimeoutRef.current) {
+ clearTimeout(loadingProgressTimeoutRef.current);
+ loadingProgressTimeoutRef.current = null;
+ }
+ setLoadingProgress(latestMessage);
+ if (latestMessage.phase === 'complete') {
+ loadingProgressTimeoutRef.current = setTimeout(() => {
+ setLoadingProgress(null);
+ loadingProgressTimeoutRef.current = null;
+ }, 500);
+ }
+ return;
+ }
+
if (latestMessage.type === 'projects_updated') {
// External Session Update Detection: Check if the changed file is the current session's JSONL
@@ -247,6 +270,13 @@ function AppContent() {
}
}
}
+
+ return () => {
+ if (loadingProgressTimeoutRef.current) {
+ clearTimeout(loadingProgressTimeoutRef.current);
+ loadingProgressTimeoutRef.current = null;
+ }
+ };
}, [messages, selectedProject, selectedSession, activeSessions]);
const fetchProjects = async () => {
@@ -550,6 +580,7 @@ function AppContent() {
// Version Upgrade Modal Component
const VersionUpgradeModal = () => {
+ const { t } = useTranslation('common');
const [isUpdating, setIsUpdating] = useState(false);
const [updateOutput, setUpdateOutput] = useState('');
const [updateError, setUpdateError] = useState('');
@@ -610,7 +641,7 @@ function AppContent() {