mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-03-11 08:57:38 +00:00
a77f213dd5
* fix(shell): copy terminal selections from xterm buffer
The shell was delegating Cmd/Ctrl+C to document.execCommand('copy'),
which copied the rendered DOM selection instead of xterm's logical
buffer text. Wrapped values like login URLs could pick up row
whitespace or line breaks and break when pasted.
Route keyboard copy through terminal.getSelection() and the shared
clipboard helper. Also intercept native copy events on the terminal
container so mouse selection and browser copy actions use the same
normalized terminal text.
Remove the copy listener during teardown to avoid leaking handlers
across terminal reinitialization.
* fix(shell): restore terminal focus when switching to the shell tab
Pass shell activity state from MainContent through StandaloneShell and use it
inside Shell to explicitly focus the xterm instance once the terminal is both
initialized and connected.
Previously, switching to the Shell tab left focus on the tab button because
isActive was being ignored and the terminal never called focus() after the tab
activation lifecycle completed. As a result, users had to click inside the
terminal before keyboard input would be accepted.
This change wires isActive through the shell stack, removes the unused prop
handling in Shell, and adds a focus effect that runs when the shell becomes
active and ready. The effect uses both requestAnimationFrame and a zero-delay
timeout so focus is applied reliably after rendering and connection state
updates settle.
This restores immediate typing when opening the shell tab and also improves the
reconnect path by re-focusing the terminal after the shell connection is ready.
* fix(shell): remove fallback command for codex and claude session resumes
The `|| claude` and `|| codex` fallback commands were causing errors as they are not valid commands.
* fix: use fallback while resuming codex and claude sessions for linux and windows
* feat(git): add revert latest local commit action in git panel
Add a complete revert-local-commit flow so users can undo the most recent
local commit directly from the Git header, placed before the refresh icon.
Backend
- add POST /api/git/revert-local-commit endpoint in server/routes/git.js
- validate project input and repository state before executing git operations
- revert latest commit with `git reset --soft HEAD~1` to keep changes staged
- handle initial-commit edge case by deleting HEAD ref when no parent exists
- return clear success and error responses for UI consumption
Frontend
- add useRevertLocalCommit hook to encapsulate API call and loading state
- wire hook into GitPanel and refresh git data after successful revert
- add new toolbar action in GitPanelHeader before refresh icon
- route action through existing confirmation modal flow
- disable action while request is in flight and show activity indicator
Shared UI and typing updates
- extend ConfirmActionType with `revertLocalCommit`
- add confirmation title, label, and style mappings for new action
- render RotateCcw icon for revert action in ConfirmActionModal
Result
- users can safely undo the latest local commit from the UI
- reverted commit changes remain staged for immediate recommit/edit workflows
* fix: run cursor with --trust if workspace trust prompt is detected, and retry once
* fix(git): handle repositories without commits across status and remote flows
Improve git route behavior for repositories initialized with `git init` but with
no commits yet. Previously, several routes called `git rev-parse --abbrev-ref HEAD`,
which fails before the first commit and caused noisy console errors plus a broken
Git panel state.
What changed
- add `getGitErrorDetails` helper to normalize git process failure text
- add `isMissingHeadRevisionError` helper to detect no-HEAD/no-revision cases
- add `getCurrentBranchName` helper:
- uses `git symbolic-ref --short HEAD` first (works before first commit)
- falls back to `git rev-parse --abbrev-ref HEAD` for detached HEAD and edge cases
- add `repositoryHasCommits` helper using `git rev-parse --verify HEAD`
Status route improvements
- replace inline branch/HEAD error handling with shared helpers
- keep returning valid branch + `hasCommits: false` for fresh repositories
Remote status improvements
- avoid hard failure when repository has no commits
- return a safe, non-error payload with:
- `hasUpstream: false`
- `ahead: 0`, `behind: 0`
- detected remote name when remotes exist
- message: "Repository has no commits yet"
- preserve existing upstream detection behavior for repositories with commits
Consistency updates
- switch fetch/pull/push/publish branch lookup to shared `getCurrentBranchName`
to ensure the same branch-resolution behavior everywhere
Result
- `git init` repositories no longer trigger `rev-parse HEAD` ambiguity failures
- Git panel remains usable before the first commit
- backend branch detection is centralized and consistent across git operations
* fix(git): resolve file paths against repo root for paths with spaces
Fix path resolution for git file operations when project directories include spaces
or when API calls are issued from subdirectories inside a repository.
Problem
- operations like commit/discard/diff could receive file paths that were valid from
repo root but were executed from a nested cwd
- this produced pathspec errors like:
- warning: could not open directory '4/4/'
- fatal: pathspec '4/hello_world.ts' did not match any files
Root cause
- file arguments were passed directly to git commands using the project cwd
- inconsistent path forms (repo-root-relative vs cwd-relative) were not normalized
Changes
- remove unsafe fallback decode in `getActualProjectPath`; fail explicitly when the
real project path cannot be resolved
- add repository/file-path helpers:
- `getRepositoryRootPath`
- `normalizeRepositoryRelativeFilePath`
- `parseStatusFilePaths`
- `buildFilePathCandidates`
- `resolveRepositoryFilePath`
- update file-based git endpoints to resolve paths before executing commands:
- GET `/diff`
- GET `/file-with-diff`
- POST `/commit`
- POST `/generate-commit-message`
- POST `/discard`
- POST `/delete-untracked`
- stage/restore/reset operations now use `--` before pathspecs for safer argument
separation
Behavioral impact
- git operations now work reliably for repositories under directories containing spaces
- file operations are consistent even when project cwd is a subdirectory of repo root
- endpoint responses continue to preserve existing payload shapes
Verification
- syntax check: `node --check server/routes/git.js`
- typecheck: `npm run typecheck`
- reproduced failing scenario in a temp path with spaces; confirmed root-resolved
path staging succeeds where subdir-cwd pathspec previously failed
* fix(git-ui): prevent large commit diffs from freezing the history tab
Harden commit diff loading/rendering so opening a very large commit no longer hangs
the browser tab.
Problem
- commit history diff viewer rendered every diff line as a React node
- very large commits could create thousands of nodes and lock the UI thread
- backend always returned full commit patch payloads, amplifying frontend pressure
Backend safeguards
- add `COMMIT_DIFF_CHARACTER_LIMIT` (500,000 chars) in git routes
- update GET `/api/git/commit-diff` to truncate oversized diff payloads
- include `isTruncated` flag in response for observability/future UI handling
- append truncation marker text when server-side limit is applied
Frontend safeguards
- update `GitDiffViewer` to use bounded preview rendering:
- character cap: 200,000
- line cap: 1,500
- move diff preprocessing into `useMemo` for stable, one-pass preview computation
- show a clear "Large diff preview" notice when truncation is active
Impact
- commit diff expansion remains responsive even for high-change commits
- UI still shows useful diff content while avoiding tab lockups
- changes apply to shared diff viewer usage and improve resilience broadly
Validation
- `node --check server/routes/git.js`
- `npm run typecheck`
- `npx eslint src/components/git-panel/view/shared/GitDiffViewer.tsx`
* fix(cursor-chat): stabilize first-run UX and clean cursor message rendering
Fix three Cursor chat regressions observed on first message runs:
1. Full-screen UI refresh/flicker after first response.
2. Internal wrapper tags rendered in user messages.
3. Duplicate assistant message on response finalization.
Root causes
- Project refresh from chat completion used the global loading path,
toggling app-level loading UI.
- Cursor history conversion rendered raw internal wrapper payloads
as user-visible message text.
- Cursor response handling could finalize through overlapping stream/
result paths, and stdout chunk parsing could split JSON lines.
Changes
- Added non-blocking project refresh plumbing for chat/session flows.
- Introduced fetch options in useProjectsState (showLoadingState flag).
- Added refreshProjectsSilently() to update metadata without global loading UI.
- Wired window.refreshProjects to refreshProjectsSilently in AppContent.
- Added Cursor user-message sanitization during history conversion.
- Added extractCursorUserQuery() to keep only <user_query> payload.
- Added sanitizeCursorUserMessageText() to strip internal wrappers:
<user_info>, <agent_skills>, <available_skills>,
<environment_context>, <environment_info>.
- Applied sanitization only for role === 'user' in
convertCursorSessionMessages().
- Hardened Cursor backend stream parsing and finalization.
- Added line-buffered stdout parser for chunk-split JSON payloads.
- Flushed trailing unterminated stdout line on process close.
- Removed redundant content_block_stop emission on Cursor result.
- Added frontend duplicate guard in cursor-result handling.
- Skips a second assistant bubble when final result text equals
already-rendered streamed content.
Code comments
- Added focused comments describing silent refresh behavior,
tag stripping rationale, duplicate guard behavior, and line buffering.
Validation
- ESLint passes for touched files.
- Production build succeeds.
Files
- server/cursor-cli.js
- src/components/app/AppContent.tsx
- src/components/chat/hooks/useChatRealtimeHandlers.ts
- src/components/chat/utils/messageTransforms.ts
- src/hooks/useProjectsState.ts
---------
Co-authored-by: Haileyesus <something@gmail.com>
Co-authored-by: Simos Mikelatos <simosmik@gmail.com>
Cloud CLI (aka Claude Code UI)
A desktop and mobile UI for Claude Code, Cursor CLI, Codex, and Gemini-CLI.
Use it locally or remotely to view your active projects and sessions from everywhere.
CloudCLI Cloud · Documentation · Discord · Bug Reports · Contributing
Screenshots
Desktop View
Main interface showing project overview and chat |
Mobile Experience
Responsive mobile design with touch navigation |
CLI Selection
Select between Claude Code, Gemini, Cursor CLI and Codex |
|
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 →
- 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.jsfor 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
Self-Hosted (Open source)
Try CloudCLI UI instantly with npx (requires Node.js v22+):
npx @siteboon/claude-code-ui
Or install globally for regular use:
npm install -g @siteboon/claude-code-ui
cloudcli
Open http://localhost:3001 — all your existing sessions are discovered automatically.
Visit the documentation → 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 @siteboon/claude-code-ui |
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:
- Open Tools Settings - Click the gear icon in the sidebar
- Enable Selectively - Turn on only the tools you need
- Apply Settings - Your preferences are saved locally
Tools Settings interface - enable only what you need
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 | Shows file counts, lines of code, file-type breakdown, largest files, and recently modified files for your current project |
Build Your Own
Plugin Starter Template → — 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 → — full guide to the plugin API, manifest format, security model, and more.
FAQ
How is this different from Claude Code Remote Control?
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
~/.claudefolder. 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.
Do I need to pay for an AI subscription separately?
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.
Can I use CloudCLI UI on my phone?
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.
Will changes I make in the UI affect my local Claude Code setup?
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.
Community & Support
- Documentation — installation, configuration, features, and troubleshooting
- Discord — get help and connect with other users
- GitHub Issues — bug reports and feature requests
- Contributing Guide — how to contribute to the project
License
GNU General Public License v3.0 - see LICENSE file for details.
This project is open source and free to use, modify, and distribute under the GPL v3 license.
Acknowledgments
Built With
- Claude Code - Anthropic's official CLI
- Cursor CLI - Cursor's official CLI
- Codex - OpenAI Codex
- Gemini-CLI - Google Gemini CLI
- React - User interface library
- Vite - Fast build tool and dev server
- Tailwind CSS - Utility-first CSS framework
- CodeMirror - Advanced code editor
- TaskMaster AI (Optional) - AI-powered project management and task planning
Sponsors
Made with care for the Claude Code, Cursor and Codex community.