mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-02-15 13:17:32 +00:00
f891316ec0ef6735646e6ed8e2f47f0fb5a486e7
25 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Haileyesus
|
f891316ec0 |
Refactor/app content main content and chat interface (#374)
* feat: improve version comparison logic in useVersionCheck hook
* refactor: useVersionCheck.js to typescript
* refactor: move VersionUpgradeModal component to its own file and remove it from AppContent component
* refactor: improve VersionUpgradeModal props and extract ReleaseInfo type
Using useVersionCheck hook in 2 places caused github requests to be made twice, which is not ideal.
* refactor: handleUpdateNow function with useCallback and error display in VersionUpgradeModal
* refactor: move isOpen check to the correct position in VersionUpgradeModal
* refactor: move VersionUpgradeModal and collapsed sidebar to Sidebar component from App.jsx
* refactor: remove unused SettingsIcon import from App.jsx
* refactor: move formatTimeAgo function to dateUtils.ts
* refactor: replace useLocalStorage with useUiPreferences for better state management in AppContent
* refactor: use shared props for Sidebar props in AppContent
* refactor: remove showQuickSettings state and toggle from AppContent, manage isOpen state directly in QuickSettingsPanel
* refactor: move preference props directly to QuickSettingsPanel and MainContent
* refactor: remove unused isPWA prop
* refactor: remove unused isPWA prop from AppContent
* refactor: remove unused generatingSummary state from Sidebar component
* refactor: remove unused isPWA prop from MainContent component
* refactor: use usePrefrences for sidebar visibility in Sidebar component
* refactor: extract device detection into hook and localize PWA handling to Sidebar
- Add new `useDeviceSettings` hook (`src/hooks/useDeviceSettings.ts`) to centralize
device-related state:
- exposes `isMobile` and `isPWA`
- supports options: `mobileBreakpoint`, `trackMobile`, `trackPWA`
- listens to window resize for mobile updates
- listens to `display-mode: standalone` changes for PWA updates
- includes `matchMedia.addListener/removeListener` fallback for older environments
- Update `AppContent` (`src/App.jsx`) to consume `isMobile` from
`useDeviceSettings({ trackPWA: false })`:
- remove local `isMobile` state/effect
- remove local `isPWA` state/effect
- keep existing `isMobile` behavior for layout and mobile sidebar flow
- stop passing `isPWA` into `Sidebar` props
- Update `Sidebar` (`src/components/Sidebar.jsx`) to own PWA detection:
- consume `isPWA` from `useDeviceSettings({ trackMobile: false })`
- add effect to toggle `pwa-mode` class on `document.documentElement` and `document.body`
- retain use of `isMobile` prop from `App` for sidebar/mobile rendering decisions
Why:
- removes duplicated device-detection logic from `AppContent`
- makes device-state logic reusable and easier to maintain
- keeps PWA-specific behavior where it is actually used (`Sidebar`)
* chore(to-remove): comment todo's
* refactor: remove unused createNewProject and cancelNewProject functions from Sidebar component
* refactor(sidebar): extract typed app/sidebar architecture and split Sidebar into modular components
- Replace `src/App.jsx` with `src/App.tsx` and move route-level UI orchestration into `src/components/app/AppContent.tsx`.
This separates provider/bootstrap concerns from runtime app layout logic, keeps route definitions minimal, and improves readability of the root app entry.
- Introduce `src/hooks/useProjectsState.ts` to centralize project/session/sidebar state management previously embedded in `App.jsx`.
This keeps the existing behavior for:
project loading,
Cursor session hydration,
WebSocket `loading_progress` handling,
additive-update protection for active sessions,
URL-based session selection,
sidebar refresh/delete/new-session flows.
The hook now exposes a typed `sidebarSharedProps` contract and typed handlers used by `AppContent`.
- Introduce `src/hooks/useSessionProtection.ts` for active/processing session lifecycle logic.
This preserves session-protection behavior while isolating `activeSessions`, `processingSessions`, and temporary-session replacement into a dedicated reusable hook.
- Replace monolithic `src/components/Sidebar.jsx` with typed `src/components/Sidebar.tsx` as a thin orchestrator.
`Sidebar.tsx` now focuses on wiring controller state/actions, modal visibility, collapsed mode, and version modal behavior instead of rendering every UI branch inline.
- Add `src/hooks/useSidebarController.ts` to encapsulate sidebar interaction/state logic.
This includes expand/collapse state, inline project/session editing state, project starring/sorting/filtering, lazy session pagination, delete confirmations, rename/delete actions, refresh state, and mobile touch click handling.
- Add strongly typed sidebar domain models in `src/components/sidebar/types.ts` and move sidebar-derived helpers into `src/components/sidebar/utils.ts`.
Utility coverage now includes:
session provider normalization,
session view-model creation (name/time/activity/message count),
project sorting/filtering,
task indicator status derivation,
starred-project persistence and readbacks.
- Split sidebar rendering into focused components under `src/components/sidebar/`:
`SidebarContent.tsx` for top-level sidebar layout composition.
`SidebarProjectList.tsx` for project-state branching and project iteration.
`SidebarProjectsState.tsx` for loading/empty/no-search-result placeholders.
`SidebarProjectItem.tsx` for per-project desktop/mobile header rendering and actions.
`SidebarProjectSessions.tsx` for expanded session area, skeletons, pagination, and new-session controls.
`SidebarSessionItem.tsx` for per-session desktop/mobile item rendering and session actions.
`SessionProviderIcon.tsx` for provider icon normalization.
`SidebarHeader.tsx`, `SidebarFooter.tsx`, `SidebarCollapsed.tsx`, and `SidebarModals.tsx` as dedicated typed UI surfaces.
This keeps rendering responsibilities local and significantly improves traceability.
- Convert shared UI primitives from JSX to TSX:
`src/components/ui/button.tsx`,
`src/components/ui/input.tsx`,
`src/components/ui/badge.tsx`,
`src/components/ui/scroll-area.tsx`.
These now provide typed props/variants (`forwardRef` where appropriate) while preserving existing class/behavior.
- Add shared app typings in `src/types/app.ts` for projects/sessions/websocket/loading contracts used by new hooks/components.
- Add global window declarations in `src/types/global.d.ts` for `__ROUTER_BASENAME__`, `refreshProjects`, and `openSettings`, removing implicit `any` usage for global integration points.
- Update `src/main.jsx` to import `App.tsx` and keep app bootstrap consistent with the TS migration.
- Update `src/components/QuickSettingsPanel.jsx` to self-resolve mobile state via `useDeviceSettings` (remove `isMobile` prop dependency), and update `src/components/ChatInterface.jsx` to render `QuickSettingsPanel` directly.
This reduces prop drilling and keeps quick settings colocated with chat UI concerns.
* refactor(sidebar): integrate settings modal into SidebarModals and update props
* fix(mobile): prevent menu tap from triggering unintended dashboard navigation
The mobile sidebar menu button redirects users to `cloudcli.ai/dashboard` when a
session was active. The redirect happened because
the menu was opened on `touchstart`, which mounted the sidebar before the touch
sequence completed; the follow-up tap/click then landed on the sidebar header
anchor.
This change rewrites mobile menu interaction handling in `MainContent.jsx` to
eliminate touch/click event leakage and ghost-click behavior.
Key changes:
- Added `suppressNextMenuClickRef` to guard against synthetic click events that
fire after a touch interaction.
- Added `openMobileMenu(event)` helper to centralize `preventDefault`,
`stopPropagation`, and `onMenuClick()` invocation.
- Added `handleMobileMenuTouchEnd(event)`:
- opens the menu on `touchend` instead of `touchstart`
- sets a short suppression window (350ms) for the next click.
- Added `handleMobileMenuClick(event)`:
- ignores/suppresses click events during the suppression window
- otherwise opens the menu normally.
- Updated all mobile menu button instances in `MainContent.jsx` (loading state,
no-project state, active header state) to use:
- `onTouchEnd={handleMobileMenuTouchEnd}`
- `onClick={handleMobileMenuClick}`
- Removed the previous `onTouchStart` path that caused premature DOM mutation.
Behavioral impact:
- Mobile sidebar still opens reliably with one tap.
- Tap no longer leaks to newly-mounted sidebar header links.
- Prevents accidental redirects while preserving existing menu UX.
* refactor(main-content): migrate MainContent to TypeScript and modularize UI/state boundaries
Replace the previous monolithic MainContent.jsx with a typed one and
extract focused subcomponents/hooks to improve readability, local state ownership,
and maintainability while keeping runtime behavior unchanged.
Key changes:
- Replace `src/components/MainContent.jsx` with `src/components/MainContent.tsx`.
- Add typed contracts for main-content domain in `src/components/main-content/types.ts`.
- Extract header composition into:
- `MainContentHeader.tsx`
- `MainContentTitle.tsx`
- `MainContentTabSwitcher.tsx`
- `MobileMenuButton.tsx`
- Extract loading/empty project views into `MainContentStateView.tsx`.
- Extract editor presentation into `EditorSidebar.tsx`.
- Move editor file-open + resize behavior into `useEditorSidebar.ts`.
- Move mobile menu touch/click suppression logic into `useMobileMenuHandlers.ts`.
- Extract TaskMaster-specific concerns into `TaskMasterPanel.tsx`:
- task detail modal state
- PRD editor modal state
- PRD list loading/refresh
- PRD save notification lifecycle
Behavior/compatibility notes:
- Preserve existing tab behavior, session passthrough props, and Chat/Git/File flows.
- Keep interop with existing JS components via boundary `as any` casts where needed.
- No intentional functional changes; this commit is structural/type-oriented refactor.
Validation:
- `npm run typecheck` passes.
- `npm run build` passes (existing unrelated CSS minify warnings remain).
* refactor(chat): split monolithic chat interface into typed modules and hooks
Replace the legacy monolithic ChatInterface.jsx implementation with a modular TypeScript architecture centered around a small orchestration component (ChatInterface.tsx).
Core architecture changes:
- Remove src/components/ChatInterface.jsx and add src/components/ChatInterface.tsx as a thin coordinator that wires provider state, session state, realtime WebSocket handlers, and composer behavior via dedicated hooks.
- Update src/components/MainContent.tsx to use typed ChatInterface directly (remove AnyChatInterface cast).
State ownership and hook extraction:
- Add src/hooks/chat/useChatProviderState.ts to centralize provider/model/permission-mode state, provider/session synchronization, cursor model bootstrap from backend config, and pending permission request scoping.
- Add src/hooks/chat/useChatSessionState.ts to own chat/session lifecycle state: session loading, cursor/claude/codex history loading, pagination, scroll restoration, visible-window slicing, token budget loading, persisted chat hydration, and processing-state restoration.
- Add src/hooks/chat/useChatRealtimeHandlers.ts to isolate WebSocket event processing for Claude/Cursor/Codex, including session filtering, streaming chunk buffering, session-created/pending-session transitions, permission request queueing/cancellation, completion/error handling, and session status updates.
- Add src/hooks/chat/useChatComposerState.ts to own composer-local state and interactions: input/draft persistence, textarea sizing and keyboard behavior, slash command execution, file mentions, image attachment/drop/paste workflow, submit/abort flows, permission decision responses, and transcript insertion.
UI modularization under src/components/chat:
- Add view/ChatMessagesPane.tsx for message list rendering, loading/empty states, pagination affordances, and thinking indicator.
- Add view/ChatComposer.tsx for composer shell layout and input area composition.
- Add view/ChatInputControls.tsx for mode toggles, token display, command launcher, clear-input, and scroll-to-bottom controls.
- Add view/PermissionRequestsBanner.tsx for explicit tool-permission review actions (allow once / allow & remember / deny).
- Add view/ProviderSelectionEmptyState.tsx for provider and model selection UX plus task starter integration.
- Add messages/MessageComponent.tsx and markdown/Markdown.tsx to isolate message rendering concerns, markdown/code rendering, and rich tool-output presentation.
- Add input/ImageAttachment.tsx for attachment previews/removal/progress/error overlay rendering.
Shared chat typing and utilities:
- Add src/components/chat/types.ts with shared types for providers, permission mode, message/tool payloads, pending permission requests, and ChatInterfaceProps.
- Add src/components/chat/utils/chatFormatting.ts for html decoding, code fence normalization, regex escaping, math-safe unescaping, and usage-limit text formatting.
- Add src/components/chat/utils/chatPermissions.ts for permission rule derivation, suggestion generation, and grant flow.
- Add src/components/chat/utils/chatStorage.ts for resilient localStorage access, quota handling, and normalized Claude settings retrieval.
- Add src/components/chat/utils/messageTransforms.ts for session message normalization (Claude/Codex/Cursor) and cached diff computation utilities.
Command/file input ergonomics:
- Add src/hooks/chat/useSlashCommands.ts for slash command fetching, usage-based ranking, fuzzy filtering, keyboard navigation, and command history persistence.
- Add src/hooks/chat/useFileMentions.tsx for project file flattening, @mention suggestions, mention highlighting, and keyboard/file insertion behavior.
TypeScript support additions:
- Add src/types/react-syntax-highlighter.d.ts module declarations to type-check markdown code highlighting imports.
Behavioral intent:
- Preserve existing chat behavior and provider flows while improving readability, separation of concerns, and future refactorability.
- Move state closer to the components/hooks that own it, reducing cross-cutting concerns in the top-level chat component.
* perf(project-loading): eliminate repeated Codex session rescans and duplicate cursor fetches
The staged changes remove the main source of project-load latency by avoiding repeated full scans of ~/.codex/sessions for every project and by removing redundant client-side cursor session refetches.
Server changes (server/projects.js):\n- Add a per-request Codex index reference in getProjects so Codex metadata is built once and reused across all projects, including manually added ones.\n- Introduce normalizeComparablePath() to canonicalize project paths (including Windows long-path prefixes and case-insensitive matching on Windows).\n- Introduce findCodexJsonlFiles() + buildCodexSessionsIndex() to perform a single recursive Codex scan and group sessions by normalized cwd.\n- Update getCodexSessions() to accept indexRef and read from the prebuilt index, with fallback index construction when no ref is provided.\n- Preserve existing session limiting behavior (limit=5 default, limit=0 returns all).
Client changes (src/hooks/useProjectsState.ts):\n- Remove loadCursorSessionsForProjects(), which previously triggered one extra /api/cursor/sessions request per project after /api/projects.\n- Use /api/projects response directly during initial load and refresh.\n- Expand projectsHaveChanges() to treat both cursorSessions and codexSessions as external session deltas.\n- Keep refresh comparison aligned with external session updates by using includeExternalSessions=true in sidebar refresh path.
Impact:\n- Reduces backend work from roughly O(projects * codex_session_files) to O(codex_session_files + projects) for Codex discovery during a project load cycle.\n- Removes an additional client-side O(projects) network fan-out for Cursor session fetches.\n- Improves perceived and actual sidebar project-loading time, especially in large session datasets.
* fix(chat): make Stop and Esc reliably abort active sessions
Problem
Stop requests were unreliable because aborting depended on currentSessionId being set, Esc had no actual global abort binding, stale pending session ids could be reused, and abort failures were surfaced as successful interruptions. Codex sessions also used a soft abort flag without wiring SDK cancellation.
Changes
- Add global Escape key handler in chat while a run is loading/cancellable to trigger the same abort path as the Stop button.
- Harden abort session target selection in composer by resolving from multiple active session id sources (current, pending view, pending storage, cursor storage, selected session) and ignoring temporary new-session-* ids.
- Clear stale pendingSessionId when launching a brand-new session to prevent aborting an old run.
- Update realtime abort handling to respect backend success=false responses: keep loading state when abort fails and emit an explicit failure message instead of pretending interruption succeeded.
- Improve websocket send reliability by checking socket.readyState === WebSocket.OPEN directly before send.
- Implement real Codex cancellation via AbortController + runStreamed(..., { signal }), propagate aborted status, and suppress expected abort-error noise.
Impact
This makes both UI Stop and Esc-to-stop materially more reliable across Claude/Cursor/Codex flows, especially during early-session windows before currentSessionId is finalized, and prevents false-positive interrupted states when backend cancellation fails.
Validation
- npm run -s typecheck
- npm run -s build
- node --check server/openai-codex.js
* refactor: tool components
* refactor: tool components
* fix: remove one-line logic from messagecomponent
* refactor(design): change the design of bash
* refactor(design): fix bash design and config
* refactor(design): change the design of tools and introduce todo list and task list.
* refactor(improvement):add memo on diffviewer, cleanup messsagecomponent
* refactor: update readme and remove unusedfiles.
* refactor(sidebar): remove duplicate loading message in SidebarProjectsState
* refactor(sidebar): move VersionUpgradeModal into SidebarModals
* refactor: replace individual provider logos with a unified SessionProviderLogo component
* fix(commands): restore /cost slash command and improve command execution errors
The /cost command was listed as built-in but had no handler, causing execution to
fall through to custom command logic and return 400 ("command path is required").
- Add a built-in /cost handler in server/routes/commands.js
- Return the expected payload shape for the chat UI (`action: "cost"`, token usage,
estimated cost, model)
- Normalize token usage inputs and compute usage percentage
- Add provider-based default pricing for cost estimation
- Fix model selection in command execution context so codex uses `codexModel`
instead of `claudeModel`
- Improve frontend command error handling by parsing backend error responses and
showing meaningful error messages instead of a generic failure
* fix(command-menu): correct slash command selection with frequent commands
When the “Frequently Used” section is visible, command clicks/hover could use a
UI-local index instead of the canonical `filteredCommands` index, causing the
wrong command to execute (e.g. clicking `/help` running `/clear`).
- map rendered menu items back to canonical command indices using a stable key
(`name + namespace/type + path`)
- use canonical index for hover/click selection callbacks
- deduplicate frequent commands from other grouped sections to avoid duplicate
rows and selection ambiguity
- keep and restore original inline comments, with clarifications where needed
* refactor(sidebar): update sessionMeta handling for session loading logic
- This fixes an issue where the sidebar was showing 6+ even when there were only 5 sessions, due to the hasMore logic not accounting for the case where there are exactly 6 sessions.
It was also showing "Show more sessions" even where there were no more sessions to load.
- This was because `hasMore` was sometimes `undefined` and the logic checked for hasMore !== false, which treated undefined as true.
Now we explicitly check for hasMore === true to determine if there are more sessions to load.
* refactor(project-watcher): add codex and cursor file watchers
* fix: chat session scroll to bottom error even when scrolled up
* fix(chat): clear stuck loading state across realtime lifecycle events
The chat UI could remain in a stale "Thinking/Processing" state when session IDs
did not line up exactly between view state (`currentSessionId`), selected route
session, pending session IDs, and provider lifecycle events. This was most visible
with Codex completion/abort flows, but the same mismatch risk existed in shared
handlers.
Unify lifecycle cleanup behavior in realtime handlers and make processing tracking
key off the active viewed session identity.
Changes:
- src/hooks/chat/useChatRealtimeHandlers.ts
- src/components/ChatInterface.tsx
- src/hooks/chat/useChatSessionState.ts
What changed:
- Added shared helpers in realtime handling:
- `collectSessionIds(...)` to normalize and dedupe candidate session IDs.
- `clearLoadingIndicators()` to consistently clear `isLoading`, abort UI, and status.
- `markSessionsAsCompleted(...)` to consistently notify inactive/not-processing state.
- Updated lifecycle branches to use shared cleanup logic:
- `cursor-result`
- `claude-complete`
- `codex-response` (`turn_complete` and `turn_failed`)
- `codex-complete`
- `session-aborted`
- Expanded completion/abort cleanup to include all relevant session IDs
(`latestMessage.sessionId`, `currentSessionId`, `selectedSession?.id`,
`pendingSessionId`, and Codex `actualSessionId` when present).
- Switched processing-session marking in `ChatInterface` to use
`selectedSession?.id || currentSessionId` instead of `currentSessionId` alone.
- Switched processing-session rehydration in `useChatSessionState` to use
the same active-view session identity fallback.
Result:
- Prevents stale loading indicators after completion/abort when IDs differ.
- Keeps processing session bookkeeping aligned with the currently viewed session.
- Reduces provider-specific drift by using one lifecycle cleanup pattern.
* fix(chat): stabilize long-history scroll-up pagination behavior
- fix top-pagination lockups by only locking when older messages are actually fetched
- make fetched older messages visible immediately by increasing `visibleMessageCount` on prepend
- prevent unintended auto-scroll-to-bottom during older-message loading and scroll restore
- replace state-based pagination offset with a ref to avoid stale offset/reload side effects
- ensure initial auto-scroll runs only after initial session load completes
- reset top-load lock/restore state and visible window when switching sessions
- loosen top-lock release near the top to avoid requiring a full down/up cycle
* refactor: Restructure files and folders to better mimic feature-based architecture
* refactor: reorganize chat view components and types
* feat(chat): move thinking modes, token usage pie, and related logic into chat folder
* refactor(tools): add agent category for Task tool
Add visual distinction for the Task tool (subagent invocation) by
introducing a new 'agent' category with purple border styling. This
separates subagent tasks from regular task management tools
(TaskCreate, TaskUpdate, etc.) for clearer user feedback.
Also refactor terminal command layout in OneLineDisplay to properly
nest flex containers, fixing copy button alignment issues.
* refactor(tools): improve Task tool display formatting
Update Task tool config to show cleaner subagent information in the UI.
Simplifies the input display by showing only the prompt when no
optional fields are present, reducing visual clutter. Updates title
format to "Subagent / {type}" for better categorization. Enhances
result display to better handle complex agent response structures with
array content types, extracting text blocks for cleaner presentation.
* fix: show auth url panel in shell only on mobile
- use static url: https://auth.openai.com/codex/device, for codex login.
- add an option for hiding the panel
* fix(chat): escape command name in regex to prevent unintended matches
* fix(chat): handle JSON parsing errors for saved chat messages
* refactor(chat): replace localStorage provider retrieval with prop usage in MessageComponent
* fix(chat): handle potential null content in message before splitting lines
* refactor(todo): update TodoListContentProps to include optional id and priority fields that are used in TodoList.jsx
* fix(watcher): ensure provider folders exist before creating watchers to maintain active watching
* refactor(chat): improve message handling by cloning state updates and improving structured message parsing
* refactor(chat): exclude currentSessionId from dependency array to prevent unnecessary reloading of messages
* refactor(useFileMentions): implement abort controller for fetch requests
* refactor(MessageComponent): add types
* refactor(calculateDiff): optimize LCS algorithm for improved diff calculation
* refactor(createCachedDiffCalculator): use both newStr and oldStr as cache keys
* refactor(useSidebarController): manage project session overrides in local state
* refactor(ScrollArea): adjust ref placement and className order
* fix: type annotations
* refactor(ChatInputControls): update import statement for ThinkingModeSelector
* refactor(dateUtils): update type annotation for formatTimeAgo function
* refactor(ToolRenderer): ensure stable hook order
* refactor(useProjectsState): normalize refreshed session metadata to maintain provider stability; use getProjectSessions helper for session retrieval.
* refactor(useChatComposerState): improve input handling and command execution flow
* refactor(useChatRealtimeHandlers): normalize interactive prompt content to string for consistent ChatMessage shape
* refactor(OneLineDisplay): improve clipboard functionality with fallback for unsupported environments
* refactor(QuickSettingsPanel): simplify state management by removing localIsOpen and using isOpen directly
* refactor(ChatMessagesPane): use stable message key
* refactor:: move AssistantThinkingIndicator component to its own file
* refactor(ChatMessagesPane): extract message key generation logic to a utility function
* refactor(SidebarModals): move normalizeProjectForSettings into utils file
* refactor(ToolConfigs): use optional chaining for content retrieval
* fix(chat): stabilize provider/message handling and complete chat i18n coverage
Unify provider typing, harden realtime message effects, normalize tool input
serialization, and finish i18n/a11y updates across chat UI components.
- tighten provider contracts from `Provider | string` to `SessionProvider` in:
- `useChatProviderState`
- `useChatComposerState`
- `useChatRealtimeHandlers`
- `ChatMessagesPane`
- `ProviderSelectionEmptyState`
- refactor `AssistantThinkingIndicator` to accept `selectedProvider` via props
instead of reading provider from local storage during render
- fix stale-closure risk in `useChatRealtimeHandlers` by:
- adding missing effect dependencies
- introducing `lastProcessedMessageRef` to prevent duplicate processing when
dependencies change without a new message object
- standardize `toolInput` shape in `messageTransforms`:
- add `normalizeToolInput(...)`
- ensure all conversion paths produce consistent string output
- remove mixed `null`/raw/stringified variants across cursor/session branches
- harden tool display fallback in `CollapsibleDisplay`:
- default border class now falls back safely for unknown categories
- improve chat i18n consistency:
- localize hardcoded strings in `MessageComponent`
(`permissions.*`, `interactive.*`, `thinking.emoji`, `json.response`,
`messageTypes.error`)
- localize button titles in `ChatInputControls`
(`input.clearInput`, `input.scrollToBottom`)
- localize provider-specific empty-project prompt in `ChatInterface`
(`projectSelection.startChatWithProvider`)
- localize repeated “Start the next task” prompt in
`ProviderSelectionEmptyState` (`tasks.nextTaskPrompt`)
- add missing translation keys in all supported chat locales:
- `src/i18n/locales/en/chat.json`
- `src/i18n/locales/ko/chat.json`
- `src/i18n/locales/zh-CN/chat.json`
- new keys:
- `input.clearInput`
- `input.scrollToBottom`
- `projectSelection.startChatWithProvider`
- `tasks.nextTaskPrompt`
- improve attachment remove-button accessibility in `ImageAttachment`:
- add `type="button"` and `aria-label`
- make control visible on touch/small screens and focusable states
- preserve hover behavior on larger screens
Validation:
- `npm run typecheck`
* fix(chat): sync quick settings state and stabilize thinking toggle
Synchronize useUiPreferences instances via custom sync events and storage listeners so Quick Settings updates apply across UI consumers immediately.
Also hide standalone thinking messages when showThinking is disabled, while preserving hook order to avoid Rendered fewer hooks runtime errors.
* refactor(validateGitRepository): improve directory validation for git work tree
* refactor(GitPanel): clear stale state on project change and improve error handling
* refactor(git): use spawnAsync for command execution and improve commit log retrieval
* fix: iOS pwa bottom margin
* fix: pass diff information to code editor
* refactor(sidebar): remove touch event handlers from project and session items
* bumping node to v22
* Release 1.17.0
---------
Co-authored-by: Haileyesus <something@gmail.com>
Co-authored-by: simosmik <simosmik@gmail.com>
|
||
|
Eric Blanquer
|
36094fb73f |
fix: encode Windows paths correctly in addProjectManually
The regex only replaced forward slashes, causing Windows paths like C:\Users\Eric\my_project to remain unchanged instead of being encoded to C--Users-Eric-my-project. This caused API routes to fail. |
||
|
Eric Blanquer
|
74640a7f31 |
feat: allow deleting projects with sessions and add styled confirmation modal
- Add force delete option to delete projects with existing sessions - Add styled confirmation modal with session count warning - Add deletingProjects state to show loading indicator during deletion - Delete associated Codex sessions when deleting a project (with limit: 0) - Delete associated Cursor sessions directory when deleting a project - Add fallback to extractProjectDirectory when projectPath undefined - Use finally block for deletingProjects cleanup - Add fallback name in delete modal |
||
|
Eric Blanquer
|
9e03acb0db |
Add loading progress indicator
Adds real-time progress feedback when loading projects: - Server broadcasts progress updates via WebSocket - Sidebar shows current project being loaded with progress bar - Fixed progress counter to show correct current/total - Completion event now fires after all projects (including manual) are processed - Race condition fix for timeout cleanup using ref - Added cleanup function to prevent state update on unmounted component |
||
|
Haileyesus Dessie
|
9efe433d99 | fix: get codex sessions in windows; improve message counting logic; fix session navigation in ChatInterface | ||
|
simosmik
|
b315360f8a | fix: replace HOME env variable with os.homedir() to support windows | ||
|
simosmik
|
8186c4039f | fix: path improvement of projects added via config. | ||
|
simosmik
|
fbbf7465fb | feat: Introducing Codex to the Claude code UI project. Improve the Settings and Onboarding UX to accomodate more agents. | ||
|
simos
|
eda89ef147 |
feat(api): add API for one-shot prompt generatio, key authentication system and git commit message generation
Implement comprehensive API key management functionality including generation, validation, and CRUD operations. Changes: - Add API key database schema and operations (create, validate, delete, toggle) - Generating a commit message will now work properly with claude sdk and cursor cli and return a suggested commit message - Implement crypto-based key generation with 'ck_' prefix - Add session ID tracking in claude-sdk.js and cursor-cli.js - Update database layer with API key validation and last_used tracking - Support multi-user API key management with user association This enables secure programmatic access to the agent service |
||
|
Josh Wilhelmi
|
44c88ec15f |
feat: Implement slash command menu with fixed positioning and dark mode (#211)
* feat: Add token budget tracking and multiple improvements ## Features - **Token Budget Visualization**: Added real-time token usage tracking with pie chart display showing percentage used (blue < 50%, orange < 75%, red ≥ 75%) - **Show Thinking Toggle**: Added quick settings option to show/hide reasoning sections in messages - **Cache Clearing Utility**: Added `/clear-cache.html` page for clearing service workers, caches, and storage ## Improvements - **Package Upgrades**: Migrated from deprecated `xterm` to `@xterm/*` scoped packages - **Testing Setup**: Added Playwright for end-to-end testing - **Build Optimization**: Implemented code splitting for React, CodeMirror, and XTerm vendors to improve initial load time - **Deployment Scripts**: Added `scripts/start.sh` and `scripts/stop.sh` for cleaner server management with automatic port conflict resolution - **Vite Update**: Upgraded Vite from 7.0.5 to 7.1.8 ## Bug Fixes - Fixed static file serving to properly handle routes vs assets - Fixed session state reset to preserve token budget on initial load - Updated default Vite dev server port to 5173 (Vite's standard) ## Technical Details - Token budget is parsed from Claude CLI `modelUsage` field in result messages - Budget updates are sent via WebSocket as `token-budget` events - Calculation includes input, output, cache read, and cache creation tokens - Token budget state persists during active sessions but resets on session switch * feat: Add session processing state persistence Fixes issue where "Thinking..." banner and stop button disappear when switching between sessions. Users can now navigate freely while Claude is processing without losing the ability to monitor or stop the session. Features: - Processing state tracked in processingSessions Set (App.jsx) - Backend session status queries via check-session-status WebSocket message - UI state (banner + stop button) restored when returning to processing sessions - Works after page reload by querying backend's authoritative process maps - Proper cleanup when sessions complete in background Backend Changes: - Added sessionId to claude-complete, cursor-result, session-aborted messages - Exported isClaudeSessionActive, isCursorSessionActive helper functions - Exported getActiveClaudeSessions, getActiveCursorSessions for status queries - Added check-session-status and get-active-sessions WebSocket handlers Frontend Changes: - processingSessions state tracking in App.jsx - onSessionProcessing/onSessionNotProcessing callbacks - Session status check on session load and switch - Completion handlers only update UI if message is for current session - Always clean up processing state regardless of which session is active * feat: Make context window size configurable via environment variables Removes hardcoded 160k token limit and makes it configurable through environment variables. This allows easier adjustment for different Claude models or use cases. Changes: - Added CONTEXT_WINDOW env var for backend (default: 160000) - Added VITE_CONTEXT_WINDOW env var for frontend (default: 160000) - Updated .env.example with documentation - Replaced hardcoded values in token usage calculations - Replaced hardcoded values in pie chart display Why 160k? Claude Code reserves ~40k tokens for auto-compact feature, leaving 160k available for actual usage from the 200k context window. * fix: Decode HTML entities in chat message display HTML entities like < and > were showing as-is instead of being decoded to < and > characters. Added decodeHtmlEntities helper function to properly display angle brackets and other special characters. Applied to: - Regular message content - Streaming content deltas - Session history loading - Both string and array content types * refactor: Align package.json with main branch standards - Revert to main branch's package.json scripts structure - Remove custom scripts/start.sh and scripts/stop.sh - Update xterm dependencies to scoped @xterm packages (required for code compatibility) - Replace xterm with @xterm/xterm - Replace xterm-addon-fit with @xterm/addon-fit 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: Replace CLI implementation with Claude Agents SDK This commit completes the migration to the Claude Agents SDK, removing the legacy CLI-based implementation and making the SDK the exclusive integration method. Changes: - Remove claude-cli.js legacy implementation - Add claude-sdk.js with full SDK integration - Remove CLAUDE_USE_SDK feature flag (SDK is now always used) - Update server/index.js to use SDK functions directly - Add .serena/ to .gitignore for AI assistant cache Benefits: - Better performance (no child process overhead) - Native session management with interrupt support - Cleaner codebase without CLI/SDK branching - Full feature parity with previous CLI implementation - Maintains compatibility with Cursor integration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Update server/claude-sdk.js Whoops. This is correct. Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update server/index.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/components/ChatInterface.jsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/components/ChatInterface.jsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/components/ChatInterface.jsx Left my test code in, but that's fixed. Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: Prevent stale token-usage data from updating state on session switch - Add AbortController to cancel in-flight token-usage requests when session/project changes - Capture session/project IDs before fetch and verify they match before updating state - Handle AbortError gracefully without logging as error - Prevents race condition where old session data overwrites current session's token budget 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Update src/components/TokenUsagePie.jsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat: Implement slash command menu with fixed positioning and dark mode support - Add CommandMenu component with grouped command display - Implement command routes for listing, loading, and executing commands - Add command parser utility for argument and file processing - Fix menu positioning using fixed positioning relative to viewport - Add dark mode support with proper text contrast - Preserve metadata badge colors in dark mode - Support built-in, project, and user-level commands - Add keyboard navigation and selection 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Update server/index.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update server/utils/commandParser.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/components/ChatInterface.jsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/components/ChatInterface.jsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update server/routes/commands.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/components/ChatInterface.jsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update server/index.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update server/utils/commandParser.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: Add responsive width constraints to CommandMenu - Use min() function to cap width at viewport - 32px - Add maxWidth constraint for better mobile support - Update package-lock.json with new dependencies 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Security and stability improvements for command execution and file operations Security Fixes: - Replace blocking fs.existsSync/readFileSync with async fs.promises.readFile in token usage endpoint - Implement comprehensive command injection protection using shell-quote parser - Validate commands against exact allowlist matches (no dangerous prefix matching) - Detect and block shell operators (&&, ||, |, ;, etc.) and metacharacters - Execute commands with execFile (shell: false) to prevent shell interpretation - Add argument validation to reject dangerous characters Bug Fixes: - Remove premature handleCommandSelect call from selectCommand to prevent double-counting usage - Add block scoping to 'session-aborted' switch case to prevent variable conflicts - Fix case fall-through by properly scoping const declarations with braces Technical Details: - server/index.js: Replace sync file ops with await fsPromises.readFile() - server/utils/commandParser.js: Complete security overhaul with shell-quote integration - src/components/ChatInterface.jsx: Command selection now only inserts text, execution happens on send 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Wrap orphaned token-usage endpoint code in proper async handler - Fixed syntax error caused by orphaned code at lines 1097-1114 - Added proper app.get endpoint definition for token-usage API - Wrapped code in async (req, res) handler with authentication middleware - Preserves all security features (async file reads, path validation) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * security: Add path traversal protection to file operation endpoints - Constrain file reads to project root directory - Constrain binary file serving to project root - Constrain file writes to project root - Use extractProjectDirectory to get actual project path - Validate resolved paths start with normalized project root - Prevent authenticated users from accessing files outside their projects Fixes path traversal vulnerability in: - GET /api/projects/:projectName/file (read endpoint) - GET /api/projects/:projectName/files/content (binary serve endpoint) - PUT /api/projects/:projectName/file (save endpoint) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Use WebSocket.OPEN constant instead of instance properties - Import WebSocket from 'ws' library - Change all instances from client.OPEN/ws.OPEN to WebSocket.OPEN - Fixed 4 occurrences: lines 111, 784, 831, 868 - Ensures correct WebSocket state checking using library constant Addresses CodeRabbit security review feedback. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Improve token usage tracking and fix race conditions - Use cumulative tokens from SDK instead of per-request tokens for accurate session totals - Add configurable context window budget via CONTEXT_WINDOW env var (default 160000) - Fix race condition where stale token usage data could overwrite current session data - Replace polling with one-time fetch on session load + post-message update - Add comprehensive debug logging for token budget flow - Show token percentage on all screen sizes (remove sm:inline hiding) - Add .mcp.json to .gitignore - Add ARCHITECTURE.md and slash-command-tasks.md documentation Technical improvements: - Token budget now fetched after message completion instead of WebSocket - Removed interval polling that could conflict with WebSocket updates - Added session/project validation before updating state - Improved input placeholder to wrap on small screens 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Improve CommandMenu positioning for mobile devices - Add responsive positioning logic that detects mobile screens (< 640px) - On mobile: Position menu from bottom (80px above input) with full width - On desktop: Use calculated top position with boundary checks - Ensure menu stays within viewport on all screen sizes - Use Math.max/min to prevent menu from going off-screen - Apply consistent positioning to both empty and populated menu states Technical changes: - Add getMenuPosition() function to calculate responsive styles - Mobile: bottom-anchored, full-width with 16px margins - Desktop: top-anchored with viewport boundary constraints - Spread menuPosition styles into both menu render cases 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Add click-outside detection and improve CommandMenu positioning - Add useEffect hook to detect clicks outside the menu and close it - Fix mobile positioning to use calculated position from textarea instead of hardcoded bottom value - Ensure menu appears just above the input on mobile with proper spacing - Keep full-width layout on mobile screens (< 640px) - Maintain viewport boundary checks on both mobile and desktop Technical changes: - Add mousedown event listener to document when menu is open - Check if click target is outside menuRef and call onClose - Remove hardcoded `bottom: '80px'` in favor of calculated `top` position - Use Math.max to ensure menu stays at least 16px from top edge 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * debug: Add console logging and improve mobile positioning logic - Add console logs to debug positioning and rendering - Improve mobile positioning with better space calculations - Check if there's enough space above textarea before positioning - Position from top of viewport if insufficient space above input - Ensure menu stays within visible viewport boundaries Debugging additions: - Log isOpen, commandsLength, position, and menuPosition - Log mobile positioning calculations 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Use bottom positioning for CommandMenu on mobile - Change mobile positioning from top-based to bottom-based (90px from bottom) - This ensures menu always appears just above input, regardless of keyboard state - Add maxHeight: '50vh' to prevent menu from taking up too much space - Remove complex position calculations that didn't work well with mobile keyboard - Remove debug console.log statements - Menu now correctly appears above input on all mobile screen sizes Technical changes: - Mobile: Use fixed bottom positioning instead of calculated top - Desktop: Continue using top positioning for consistency - Simplified positioning logic for better maintainability 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Filter Invalid API key messages from session titles API error messages were appearing as session titles because they come from assistant messages with isApiErrorMessage flag, but the filter only checked user messages. Updated assistant message handling to: - Skip messages with isApiErrorMessage: true flag - Filter messages starting with "Invalid API key" Also improved session title logic to prefer last user message over last assistant message for better context. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Fix Temporal Dead Zone error by reordering function declarations Reordered function declarations in ChatInterface.jsx to resolve ReferenceError where executeCommand tried to call handleBuiltInCommand and handleCustomCommand before they were initialized. - Moved handleBuiltInCommand before executeCommand (now at line 1441) - Moved handleCustomCommand before executeCommand (now at line 1533) - executeCommand now at line 1564, after its dependencies This fixes the "cannot access uninitialized variable" error that was preventing the chat interface from loading. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Improve session handling, message routing, and mobile UX Session Handling: - Fix new session message routing by allowing messages through when currentSessionId is null - Improve claude-complete event handling to update UI state for new sessions - Add session loading ref to prevent duplicate scroll triggers during session switches - Add extensive debug logging in claude-sdk.js to track session lifecycle Mobile UX: - Only close sidebar on mobile when switching between different projects - Keep sidebar open when clicking sessions within the same project - Add project context to session objects for better tracking Command Execution: - Auto-submit commands to Claude for processing after selection - Set command content in input and programmatically submit form Scroll Behavior: - Fix scroll behavior during session loading with isLoadingSessionRef - Prevent double-scroll effect when switching sessions - Ensure smooth scroll to bottom after messages fully render Message Filtering: - Update global message types to include 'claude-complete' - Allow messages through for new sessions (when currentSessionId is null) - Improve session-specific message filtering logic Dependencies: - Update @esbuild/darwin-arm64 to direct dependency 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Improve session handling, message routing, and mobile UX - Remove stale Playwright debug files (.playwright-mcp/) - Clean up slash-command-fix-progress.md tracking file - Improve session switching stability in ClaudeStatus component - Fix message routing to ensure responses go to correct session - Enhance mobile UX for CommandMenu with better positioning - Stabilize sidebar session management - Fix Temporal Dead Zone errors in ChatInterface 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Filter sessions containing Task Master subtask JSON from session list - Change filtering from startsWith to includes for {"subtasks": pattern - Apply filtering in parseJsonlSessions (line 781) for JSONL parsing - Apply filtering in getSessions (line 630) before returning to API - Fix inconsistent filter logic - use OR pattern for both user and assistant messages - Add filtering for "CRITICAL: You MUST respond with ONLY a JSON" messages - Prevents Task Master JSON responses from appearing as session titles in sidebar 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Filter JSON response sessions from session list - Change session filtering to use general pattern `startsWith('{ "')` - Catches all Task Master JSON responses (subtasks, complexity analysis, tasks) - Apply filter in both parseJsonlSessions() and getSessions() functions - Prevents JSON responses from appearing as session titles in UI 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Update websocket.js * Update projects.js * Update CommandMenu.jsx --------- Co-authored-by: viper151 <simosmik@gmail.com> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> |
||
|
simos
|
79981693f3 | Fix : mobile issues and git diff in the git panel | ||
|
simos
|
b3498932e1 |
Feat: Add login to claude code and cursor CLI through the settings
Feat: Group sessions based on first uuid |
||
|
simos
|
06bb5feb09 | Feat: [Beta] Merging claudecode sessions on the sessions list based on whether it's a continuation or not - Trying to bypass https://github.com/anthropics/claude-code/issues/2354 | ||
|
simos
|
75e8161213 | Integration with TaskMaster AI | ||
|
simos
|
13f06ed241 | modified: server/projects.js | ||
|
simos
|
59e4c11a67 | fix: A bug where creation error when there is no .claude directory | ||
|
simos
|
0a39079c5c | feat: Implement Cursor session fetching and enhance message parsing in ChatInterface | ||
|
simos
|
4e5aa50505 | feat: Add pagination support for session messages and enhance loading logic in ChatInterface | ||
|
Aëldrin Sagë
|
7fd63d83ac | fix(sidebar): display only folder name instead of full path in project list | ||
|
simos
|
9f65756e2c | Removing some console logs | ||
|
simos
|
fc2a94a2e5 |
- Upgrading to Vite 7
- Refactor to use es modules - Added permission mode - Switched to better sqlite3 - several UX enhancements |
||
|
simos
|
1bdc75e37b | Enhance project directory handling by integrating extractProjectDirectory and clearProjectDirectoryCache functions. Adjust git route handlers to utilize the new directory extraction logic for improved project path resolution. | ||
|
simos
|
c5e3bd0633 | Enhance project directory handling by adding extractProjectDirectory function. Update generateDisplayName to utilize actual project directory when available. Adjust getProjects and addProjectManually to incorporate new directory extraction logic for improved project path resolution. | ||
|
Simos
|
845d5346eb | Update file permissions to executable for multiple files and add Dark Mode toggle functionality with theme context management. Introduce Quick Settings Panel for user preferences and enhance project display name generation in server logic. | ||
|
caraction
|
5ea0e36207 | first commit |