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
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.
* fix: intercept slash commands in handleSubmit to pass arguments correctly
When a user types a slash command with arguments (e.g. `/feature implement dark mode`)
and presses Enter, the command was not being intercepted as a slash command. Instead,
the raw text was sent as a regular message to the Claude API, which responded with
"Unknown skill: feature".
Root cause: the command autocomplete menu (useSlashCommands) detects commands via the
regex `/(^|\s)\/(\S*)$/` which only matches when the cursor is right after the command
name with no spaces. As soon as the user types a space to add arguments, the pattern
stops matching, the menu closes, and pressing Enter falls through to handleSubmit which
sends the text as a plain message — completely bypassing command execution.
This fix adds a slash command interceptor at the top of handleSubmit:
- Checks if the trimmed input starts with `/`
- Extracts the command name (text before the first space)
- Looks up the command in the loaded slashCommands list
- If found, delegates to executeCommand() which properly extracts arguments
via regex and sends them to the backend /api/commands/execute endpoint
- The backend then replaces $ARGUMENTS, $1, $2 etc. in the command template
Changes:
- Added `slashCommands` to the destructured return of useSlashCommands hook
- Added slash command interception logic in handleSubmit before message dispatch
- Added `executeCommand` and `slashCommands` to handleSubmit dependency array
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* fix: address review — pass rawInput param and cleanup UI state
- Pass trimmedInput to executeCommand to avoid stale closure reads
- Add UI cleanup (images, command menu, textarea) before early return
- Update executeCommand signature to accept optional rawInput parameter
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
* feat: add HOST environment variable for configurable bind address
Allow users to specify which host/IP address the servers should bind to
via the HOST environment variable. Defaults to 0.0.0.0 (all interfaces)
to maintain backward compatibility.
This enables users to restrict the server to localhost only (127.0.0.1)
for security purposes or bind to a specific network interface.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* fix: use correct proxy host when HOST is set to specific interface
When HOST is set to a specific interface (e.g., 192.168.1.100), the Vite
proxy needs to connect to that same host, not localhost. This fix:
- Adds proxyHost logic that uses localhost when HOST=0.0.0.0, otherwise
uses the specific HOST value for proxy targets
- Adds DISPLAY_HOST to show a user-friendly URL in console output
(0.0.0.0 isn't a connectable address)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---------
Co-authored-by: Michael Fork <mjfork@users.noreply.github.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Haileyesus <118998054+blackmammoth@users.noreply.github.com>
* feat: add "Load all messages" button for long conversations
Scrolling up through long conversations requires many "load more" cycles.
This adds a "Load all messages" floating button that fetches the entire
conversation history in one shot.
- Floating overlay pill appears after each batch finishes loading, persists 2s
- Shows loading spinner while fetching all messages
- Shows green "All messages loaded" confirmation for 1s before disappearing
- Preserves scroll position when bulk-loading (no viewport jump)
- Ref-based guards prevent scroll handler from re-fetching after load-all
- Performance warning shown; "Scroll to bottom" resets visible cap
- Clean state reset on session switch
- i18n keys for en and zh-CN
Note: default page size (20) and visible cap (100) are unchanged.
These could be increased in a follow-up or made configurable via settings.
* re-implement load-all feature for new TS architecture
Subagent (Task/Explore) results were rendered as raw JSON
`[{"type":"text","text":"..."}]` with literal `\n` instead of
formatted markdown. The root cause was that the API sometimes
returns content blocks as a serialized JSON string rather than
a parsed array. The existing `Array.isArray()` check missed this
case and fell through to `String()`, displaying raw JSON.
Now the Task tool result handler tries to JSON.parse string content
before checking for array structure, matching the pattern already
used by exit_plan_mode.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
