- Introduce a new feature-based auth module under src/components/auth with clear separation of concerns:\n - context/AuthContext.tsx for session lifecycle, onboarding status checks, token persistence, and auth actions\n - view/* components for loading, route guarding, form layout, input fields, and error display\n - shared auth constants, utility helpers, and type aliases (no interfaces)\n- Convert login and setup UIs to TypeScript and keep form state local to each component for readability and component-level ownership\n- Add explicit API payload typing and safe JSON parsing helpers to improve resilience when backend responses are malformed or incomplete\n- Centralize error fallback handling for auth requests to reduce repeated logic
- Replace legacy auth entrypoints with the new feature module in app wiring:\n - App now imports AuthProvider and ProtectedRoute from src/components/auth\n - WebSocketContext, TaskMasterContext, and Onboarding now consume useAuth from the new typed auth context\n- Remove duplicated legacy auth screens (LoginForm.jsx, SetupForm.jsx, ProtectedRoute.jsx)\n- Keep backward compatibility by turning src/contexts/AuthContext.jsx into a thin re-export of the new provider/hook
Result: auth code now follows a feature/domain structure, is fully typed, easier to navigate, and cleaner to extend without touching unrelated UI areas.
- introduce a new feature-oriented TaskMaster domain under src/components/task-master
- add typed TaskMaster context/provider with explicit project, task, MCP, and loading state handling
- split task UI into focused components (panel, board, toolbar, content, card, detail modal, setup/help modals, banner)
- move task board filtering/sorting/kanban derivation into dedicated hooks and utilities
- relocate CreateTaskModal into the feature module and keep task views modular/readable
- remove legacy monolithic TaskList/TaskDetail/TaskCard files and route main task panel to the new feature panel
- replace contexts/TaskMasterContext.jsx with a typed contexts/TaskMasterContext.ts re-export to the feature context
- update MainContent project sync logic to compare by project name to avoid state churn
- validation: npm run typecheck, npm run build
Break the legacy PRDEditor.jsx monolith into a feature-based TypeScript architecture under src/components/prd-editor while keeping behavior parity and readability.
Key changes:
- Replace PRDEditor.jsx with a typed orchestrator component and a compatibility export bridge at src/components/PRDEditor.tsx.
- Split responsibilities into dedicated hooks: document loading/init, existing PRD registry fetching, save workflow with overwrite detection, and keyboard shortcuts.
- Split UI into focused view components: header, editor/preview body, footer stats, loading state, generate-tasks modal, and overwrite-confirm modal.
- Move filename concerns into utility helpers (sanitize, extension handling, default naming) and centralize template/constants.
- Keep component-local state close to the UI that owns it (workspace controls/modal toggles), while shared workflow state remains in the feature container.
- Reuse the existing MarkdownPreview component for safer markdown rendering instead of ad-hoc HTML conversion.
- Update TaskMasterPanel integration to consume typed PRDEditor directly (remove any-cast) and pass isExisting metadata for correct overwrite behavior.
- Keep all new/changed files below 300 lines and add targeted comments where behavior needs clarification.
Validation:
- npm run typecheck
- npm run build
Refactor QuickSettingsPanel from a single JSX component into a modular TypeScript feature structure while preserving behavior and translations.
Highlights:
- Replace legacy src/components/QuickSettingsPanel.jsx with a typed entrypoint (src/components/QuickSettingsPanel.tsx).
- Introduce src/components/quick-settings-panel/ with clear separation of concerns:
- view/: panel shell, header, handle, section wrappers, toggle rows, and content sections.
- hooks/: drag interactions and whisper mode persistence.
- constants.ts and types.ts for shared config and strict local typing.
- Move drag logic into useQuickSettingsDrag with explicit touch/mouse handling, drag threshold detection, click suppression after drag, position clamping, and localStorage persistence.
- Keep user-visible behavior intact:
- same open/close panel interactions.
- same mobile/desktop drag behavior and persisted handle position.
- same quick preference toggles and wiring to useUiPreferences.
- same hidden whisper section behavior and localStorage/event updates.
- Improve readability and maintainability by extracting repetitive setting rows and section scaffolding into reusable components.
- Add focused comments around non-obvious behavior (drag click suppression, touch scroll lock, hidden whisper section intent).
- Keep files small and reviewable (all new/changed files are under 300 lines).
Validation:
- npm run typecheck
- npm run build
* feat: add clickable overlay buttons for CLI prompt selection
Detect numbered selection prompts in the xterm.js terminal buffer
and display clickable overlay buttons, allowing users to respond
by tapping instead of typing numbers. Useful on mobile/tablet devices.
Closes#427
* fix: address CodeRabbit review feedback
- Remove fallback option scanning without footer anchor to prevent
false positives on regular numbered lists in conversation output
- Cancel pending prompt check timer on disconnect to prevent stale
options from reappearing after reconnection
* fix: require contiguous option block above footer anchor
Stop collecting numbered options as soon as a non-matching line is
encountered, preventing false matches from non-contiguous numbered
text above the prompt.
Addresses CodeRabbit review feedback on PR #480.
* revert: allow non-contiguous option lines for multi-line labels
CLI prompts may wrap options across multiple terminal rows or include
blank separators. Revert contiguous-block requirement and document
why non-matching lines are tolerated during upward scan.
* Add support for ANTHROPIC_API_KEY environment variable authentication detection
This commit enhances Claude authentication detection to support both the
ANTHROPIC_API_KEY environment variable and the OAuth credentials file,
matching the authentication priority order used by the Claude Agent SDK.
- Updated checkClaudeCredentials() function in server/routes/cli-auth.js
to check ANTHROPIC_API_KEY environment variable first, then fall back
to ~/.claude/.credentials.json OAuth tokens
- Modified /api/cli-auth/claude/status endpoint to return authentication
method indicator ('api_key' or 'credentials_file')
- Added comprehensive JSDoc documentation with priority order explanation
and official Claude documentation citations
1. ANTHROPIC_API_KEY environment variable (highest priority)
2. ~/.claude/.credentials.json OAuth tokens (fallback)
This priority order matches the Claude Agent SDK's authentication behavior,
ensuring consistency between how we detect authentication and how the SDK
actually authenticates.
The /api/cli-auth/claude/status endpoint now returns:
- method: 'api_key' when using ANTHROPIC_API_KEY environment variable
- method: 'credentials_file' when using OAuth credentials file
- method: null when not authenticated
This is backward compatible as existing code checking the 'authenticated'
field will continue to work.
- https://support.claude.com/en/articles/12304248-managing-api-key-environment-variables-in-claude-code
Claude Agent SDK prioritizes environment variables over subscriptions
- https://platform.claude.com/docs/en/agent-sdk/overview
Official Claude Agent SDK authentication documentation
When ANTHROPIC_API_KEY is set, API calls are charged via pay-as-you-go
rates instead of subscription rates, even if the user is logged in with
a claude.ai subscription.
* UI: hide Claude login when API key auth is used
An API key overrides anything else with Claude SDK (and claude-code). There is no need to show this button in API key cases.
* feat: add terminal shortcuts panel for mobile users
Slide-out panel providing touch-friendly shortcut buttons (Esc, Tab,
Shift+Tab, Arrow Up/Down) and scroll-to-bottom for the terminal.
Integrates into the new modular shell architecture by exposing
terminalRef and wsRef from useShellRuntime hook and reusing the
existing sendSocketMessage utility.
Includes localization keys for en, ja, ko, and zh-CN.
* fix: replace dual touch/click handlers with unified pointer events
Prevents double-fire on touch devices by removing onTouchEnd handlers
and using a single onClick for all interactions (mouse, touch, keyboard).
onPointerDown with preventDefault handles focus steal prevention.
Also clears pending close timer before scheduling a new one to avoid
stale timeout overlap.
Addresses CodeRabbit review feedback on PR #411.
---------
Co-authored-by: Haileyesus <118998054+blackmammoth@users.noreply.github.com>
* fix: preserve pending permission requests across WebSocket reconnections
- Store WebSocketWriter reference in active sessions for reconnection
- Add reconnectSessionWriter() to swap writer when client reconnects
- Add getPendingApprovalsForSession() to query pending permissions by session
- Add get-pending-permissions WebSocket message handler on server
- Add pending-permissions-response handler on frontend
- Query pending permissions on WebSocket reconnect and session change
- Reconnect SDK output writer when client resumes an active session
* fix: address CodeRabbit review feedback for websocket-permission PR
- Use consistent session matching in pending-permissions-response handler,
checking both currentSessionId and selectedSession.id (matching the
session-status handler pattern)
- Guard get-pending-permissions with isClaudeSDKSessionActive check to
prevent returning permissions for inactive sessions
* fix: prevent React 18 batching from losing messages during session sync
- Add lastLoadedSessionIdRef to skip redundant session reloads
- Add length-based guards to sessionMessages -> chatMessages sync effect
- Track whether chat is actively processing to prevent stale overwrites
- Re-enable sessionMessages sync with proper guards that only fire when
server data actually grew (new messages from server), not during re-renders
* fix: reset message sync refs on session switch
Reset prevSessionMessagesLengthRef and isInitialLoadRef when
selectedSession changes to ensure correct message sync behavior
when switching between sessions. Move ref declarations before
their first usage for clarity.
* fix: address CodeRabbit review — composite cache key and empty sync
- Use composite key (sessionId:projectName:provider) for session load
deduplication instead of sessionId alone, preventing stale cache hits
when switching projects or providers with the same session ID
- Allow zero-length sessionMessages to sync to chatMessages, so server
clearing a session's messages is correctly reflected in the UI
# Features
- File drag and drop upload: Support uploading files and folders via drag and drop
- Binary file handling: Detect binary files and display a friendly message instead of trying to edit them
- Folder download: Download folders as ZIP files (using JSZip library)
- Context menu integration: Full right-click context menu for file operations (rename, delete, copy path, download, new file/folder)
The modelUsage debug log ran on every streamed SDK message, but
modelUsage is only populated on result messages. This produced
repeated "Model was sent using: []" console output for every
non-result message during streaming.
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Show dynamic browser tab title based on selected project's name, post-fixed with "CloudCLI UI" when a project is selected, improving navigation across tabs.
fix wrong regex replace of Claude project path
related #447, reopen due to forced-push
to reproduce error steps, let's try
Create a folder with @ in name like @test
Add this folder as new project in CloudCLI
Choose Claude tool in new Session
Star by typing sth 'hi'
In the dev tools, you will see errors ajax response said that session does not find for 'some-session-id'
The main problem is current encode path doesn't encode '@' to '-' as Claude did
I reversed code Claude-SDK, file 'cli.js' to find exactly regex (using in PR) that used to encode path under ~/.claude/projects/<encoded-project-name-path/<session-id>.jsonl
* feat: add copy icon for user messages
Expose a copy control on user chat bubbles so previous content can be reused quickly.
* fix: Copy control is effectively hidden on touch devices
* fix: copyTextToClipboard doesn't need timer
---------
Co-authored-by: dev <dev@host.local>
Co-authored-by: Haileyesus <118998054+blackmammoth@users.noreply.github.com>
* feat: integrate Gemini AI agent provider
- Core Backend: Ported gemini-cli.js and gemini-response-handler.js to establish the CLI bridge. Registered 'gemini' as an active provider within index.js.
- Core Frontend: Extended QuickSettingsPanel.jsx, Settings.jsx, and AgentListItem.jsx to render the Gemini provider option, models (gemini-pro, gemini-flash, etc.), and handle OAuth states.
- WebSocket Pipeline: Added support for gemini-command executions in backend and payload processing of gemini-response and gemini-error streams in useChatRealtimeHandlers.ts. Resolved JSON double-stringification and sessionId stripping issues in the transmission handler.
- Platform Compatibility: Added scripts/fix-node-pty.js postinstall script and modified posix_spawnp calls with sh -c wrapper to prevent ENOEXEC and MacOS permission errors when spawning the gemini headless binary.
- UX & Design: Imported official Google Gemini branding via GeminiLogo.jsx and gemini-ai-icon.svg. Updated translations (chat.json) for en, zh-CN, and ko locales.
* fix: propagate gemini permission mode from settings to cli
- Added Gemini Permissions UI in Settings to toggle Auto Edit and YOLO modes
- Synced gemini permission mode to localStorage
- Passed permissionMode in useChatComposerState for Gemini commands
- Mapped frontend permission modes to --yolo and --approval-mode options in gemini-cli.js
* feat(gemini): Refactor Gemini CLI integration to use stream-json
- Replaced regex buffering text-system with NDJSON stream parsing
- Added fallback for restricted models like gemini-3.1-pro-preview
* feat(gemini): Render tool_use and tool_result UI bubbles
- Forwarded gemini tool NDJSON objects to the websocket
- Added React state handlers in useChatRealtimeHandlers to match Claude's tool UI behavior
* feat(gemini): Add native session resumption and UI token tracking
- Captured cliSessionId from init events to map ClaudeCodeUI's chat sessionId directly into Gemini's internal session manager.
- Updated gemini-cli.js spawn arguments to append the --resume proxy flag instead of naively dumping the accumulated chat history into the command prompt.
- Handled result stream objects by proxying total_tokens back into the frontend's claude-status tracker to natively populate the UI label.
- Eliminated gemini-3 model proxy filter entirely.
* fix(gemini): Fix static 'Claude' name rendering in chat UI header
- Added "gemini": "Gemini" translation strings to messageTypes across English, Korean, and Chinese loc dictionaries.
- Updated AssistantThinkingIndicator and MessageComponent ternary checks to identify provider === 'gemini' and render the appropriate brand label instead of statically defaulting to Claude.
* feat: Add Gemini session persistence API mapping and Sidebar UI
* fix(gemini): Watch ~/.gemini/sessions for live UI updates
Added the .gemini/sessions directory to PROVIDER_WATCH_PATHS so that Chokidar emits projects_updated websocket events when new Gemini sessions are created or modified, fixing live sidebar updates.
* fix(gemini): Fix Gemini authentication status display in Settings UI
- Injected 'checkGeminiAuthStatus' into the Settings.jsx React effect hook so that the UI can poll and render the 'geminiAuthStatus' state.
- Updated 'checkGeminiCredentials()' inside server/routes/cli-auth.js to read from '~/.gemini/oauth_creds.json' and '~/.gemini/google_accounts.json', resolving the email address correctly.
* Use logo-only icon for gemini
* feat(gemini): Add Gemini 3 preview models to UI selection list
* Fix Gemini CLI session resume bug and PR #422 review nitpicks
* Fix Gemini tool calls disappearing from UI after completion
* fix(gemini): resolve outstanding PR #422 feedback and stabilize gemini CLI timeouts
* fix(gemini): resolve resume flag and shell session initialization issues
This commit addresses the remaining PR comments for the Gemini CLI integration:
- Moves the `--resume` flag logic outside the prompt command block, ensuring Gemini sessions correctly resume even when a new prompt isn't passed.
- Updates `handleShellConnection` to correctly lookup the native `cliSessionId` from the internal `sessionId` when spawning Gemini sessions in a plain shell.
- Refactors dynamic import of `sessionManager.js` back to a native static import for code consistency.
* chore: fix TypeScript errors and remove gemini CLI dependency
* fix: use cross-spawn on Windows to resolve gemini.cmd correctly
---------
Co-authored-by: Haileyesus <118998054+blackmammoth@users.noreply.github.com>
* feat: persist active tab across reloads via localStorage (closes#387)
Remember the last active tab in localStorage instead of always resetting
to 'chat'. Also stop force-switching to chat tab on session change,
so users stay on their preferred tab (shell, git, etc.).
* fix: validate localStorage tab value and add try-catch for restricted contexts
Address CodeRabbit feedback: validate stored activeTab against known
tab IDs before using it, and wrap localStorage access in try-catch
to prevent crashes in restricted environments.
