- Replace DOM queries during resize with cached parent width using useRef
- Fix asymmetric resize logic that only affected 2 containers
- Implement proper constraint validation with total width preservation
- Improve resize constraints: 5% min, 80% max (more flexible than 10%/90%)
- Add array-based width management for consistent container ordering
- Ensure total width always stays at 100% with 0.1% tolerance
- Add data-bento-container attribute for reliable DOM queries
- Optimize performance by eliminating DOM queries during mouse moves
Resolves issue where resizing BentoBox containers was janky in one direction due to performance bottlenecks and asymmetric constraint logic. Resizing should now be smooth and consistent in both directions.
- Replace hardcoded min-[1050px] breakpoints with dynamic shouldShowIconOnly logic
- Update ChatInput.tsx to pass shouldShowIconOnly prop to all bottom bar components
- Fix DirSwitcher: directory path text now properly condenses
- Fix ModelsBottomBar: model name text now properly condenses
- Fix BottomMenuModeSelection: mode name text now properly condenses
- Fix CostTracker: cost display text now properly condenses
- All bottom bar elements now use consistent responsive behavior based on container width
- Responsive layout works properly when sidecars are added/removed
Resolves issue where only Actions, Attach, and Hints buttons were condensing while other bottom bar elements still used hardcoded breakpoints.
- Add ResizeHandleBento component with blue visual indicators
- Implement percentage-based width calculation for responsive resizing
- Add minimum/maximum width constraints (10%-90% per container)
- Support real-time drag-to-resize between adjacent containers
- Include hover effects and active state visual feedback
- Add data-container-id attributes for DOM element identification
- Maintain automatic width distribution when adding/removing containers
- Provide smooth resize experience with cursor change indicators
Enables users to manually adjust container widths within the BentoBox layout.
- Replace complex individual container system with single BentoBox component
- Fix window rescaling issues where containers didn't fill available width
- Add working X button removal functionality with proper event handling
- Implement responsive layout that automatically distributes container widths
- Simplify state management with hasBentoBox and bentoBoxContainers
- Ensure containers always fill window width without empty space
- Add master X button to close entire bento box
- Add hover-triggered + button to add more containers
Fixes sidecar layout window rescaling and empty space issues.
- Add support for multiple horizontal sidecar containers
- Containers expand to fill available space equally
- Chat area is full width when no containers exist
- SidecarInvoker creates containers directly (localhost, file, sidecar)
- Hover plus buttons on container edges for adding more
- Clean UI with no empty space - sidecars fill containers completely
- Event-based communication between AppLayout and MainPanelLayout
- Resizable chat panel and containers with drag handles
- Remove containers with X button on hover
- Add LocalhostViewer.tsx for iframe-based localhost viewing with navigation controls
- Add SpecsViewer.tsx for viewing markdown spec files with file browser
- Fixes import errors in SidecarTabs.tsx that were preventing build
These components are required dependencies for the SidecarTabs component
to function properly in the multi-container sidecar system.
- Add SidecarLayout with context provider for managing multiple sidecar views
- Add SidecarInvoker for hover-triggered sidecar activation
- Add SidecarTabs for localhost/URL viewing with tab management
- Add FileViewer component for displaying files in sidecar
- Update MainPanelLayout with horizontal/vertical resizing and multi-container support
- Update AppLayout to integrate sidecar system with proper context providers
- Support for diff viewer, localhost viewer, and file viewer in sidecars
- Resizable panels with drag handles and hover zones for adding containers
Brings multi-container functionality from PR #4385 to enable side-by-side
viewing of localhost apps, files, and other content alongside the main chat.
- Update built-in command badges to use grey styling matching ActionPopover
- Add blur effect to disabled edit/copy/delete buttons for built-in commands
- Position built-in pill as overlay on top of disabled action buttons
- Center align action buttons within their container space
- Add 8px left spacing to built-in pill overlay for better visual balance
Changed keyboard selection to use the same subtle gray background as mouse hover
instead of the bright blue. This creates a unified visual experience where:
- Mouse hover: Light gray background
- Keyboard selection: Same light gray background
- Both states look identical and use the system's natural hover styling
Removed the complex text color overrides since we're now using the same
background for both hover and selection states. This creates a more
subtle and consistent user experience.
Changed hover background from subtle 'hover:bg-background-muted' to more
visible 'hover:bg-gray-100 dark:hover:bg-gray-700' so users can clearly
see which item they're hovering over with their mouse.
Now both mouse and keyboard interactions have clear visual feedback:
- Mouse hover: Light gray background (gray-100/gray-700)
- Keyboard selection: Bright blue background (blue-500)
- Both provide clear indication of what will be selected
Updated both ActionPopover and MentionPopover to use more visible selection styling:
- Changed selected background from bgProminent to bright blue-500
- Added proper text color overrides for selected state
- Icon colors change to white when selected
- Description text uses blue-100 for better contrast on blue background
- Custom badge gets blue-400 background when parent is selected
This makes it crystal clear which item is selected when navigating with arrow keys.
Users can now easily see what they're about to select with both mouse hover
and keyboard navigation.
Fixed the issue where arrow up/down keys weren't working when the ActionPopover
was open after typing '/'. The problem was in the synthetic event creation in
RichChatInput's handleTextareaKeyDown function.
Changes:
- Properly preserve all keyboard event properties (key, code, keyCode, etc.)
- Bind event methods correctly to maintain proper context
- Ensure target/currentTarget reference the display div for positioning
- Maintain all event properties needed by ChatInput's handleKeyDown
This fixes the keyboard navigation for both ActionPopover (/) and MentionPopover (@)
when using the new RichChatInput component with pills and spell checking.
- Apply consistent hover styling from settings to both popovers
- Use hover:bg-background-muted for better visual feedback
- Change border-radius from rounded-md to rounded-lg for consistency
- Update transition from transition-colors to transition-all for smoother animations
- Maintain selected state styling with bg-bgProminent
This creates a consistent hover experience across the application where users
can clearly see what they're about to select in both @ and / popovers.
- Add search functionality to ActionPopover when typing / + text
- Show starred commands first, then all commands during search
- Add 'Create Command' button in empty states with modal integration
- Implement visual action pills in both input and user messages
- Hide expanded 'what AI sees' text from UI while sending full prompts to AI
- Add dynamic action mapping from localStorage for custom commands
- Implement action pill expansion in useMessageStream before API calls
- Add proper keyboard navigation and modal state management
- Include usage tracking for custom commands
Files modified:
- ChatInput.tsx: Query passing, modal integration, keyboard navigation
- ActionPopover.tsx: Search functionality and empty state enhancements
- RichChatInput.tsx: Dynamic action mapping from localStorage
- MessageContent.tsx: Dynamic action mapping from localStorage
- useMessageStream.ts: Action pill expansion before API calls
- Add CustomCommandsSettings component with row-based design matching Mode section
- Integrate AddCustomCommandModal using proper Dialog components for consistent styling
- Remove category filtering and inline editing for cleaner UX
- Update modal to use proper Dialog background instead of dark overlay
- Remove category field from modal form for simplified command creation
- Apply subtle text colors to form helper text for better visual hierarchy
- Remove preview section from modal to reduce height and improve usability
- Add proper header styling with CardTitle and CardDescription
- Update command icons to display without background circles
- Implement proper padding and spacing throughout the interface
- Connect modal functionality to Plus button and edit actions
- Preserve existing command categories while preventing new category assignment
- Remove header and description from Custom Commands card
- Convert card-style layout to row-based design matching mode section
- Update styling to use proper text-* and background-* classes
- Remove unused onClose parameter
- Make commands display as compact rows with inline actions
- Improve empty state styling and sizing
- Add comprehensive custom slash commands system
- Users can create /command shortcuts that expand to full prompts
- ActionPopover now only shows user-created custom commands
- Add custom commands management in Settings → Chat
- Implement pill rendering: users see [Command Label], AI gets full prompt
- Add localStorage-based storage with upgrade path to API
- Include example commands: document, review, explain, optimize, test
- Add complete type system with validation and categories
- Support usage tracking, favorites, and command management
- Fix pill expansion to use proper labels instead of IDs
Components added:
- CustomCommandsSettings: Full CRUD interface for command management
- AddCustomCommandModal: Modal for creating/editing commands
- useCustomCommands: Hook for command state management
- customCommands types: Complete type system with validation
Components modified:
- ActionPopover: Filtered to show only custom commands
- ChatInput: Fixed handleActionSelect for proper pill rendering
- ChatSettingsSection: Added custom commands card
- Added UI components: label, textarea for form inputs
- Force complete height reset to 0px before measuring scrollHeight
- Add reflow trigger to ensure accurate measurements
- Prevents input from staying large when content is removed
- Update SpellCheckTooltip styling to match commit 663c921 design
- Add numbered suggestions with hover highlighting and blue selection states
- Include keyboard hints and improved action buttons with icons
- Fix tooltip positioning to appear directly above words with minimal gap
- Remove translateY(-100%) transform that was pushing tooltip too far away
- Position tooltip 5px above word with only horizontal centering
- Maintain viewport boundary detection to prevent cutoff on edges
- Improve overall tooltip UX with professional styling and close proximity
- Add back SpellCheckTooltip component with custom styling and suggestions
- Restore custom spell checking logic in RichChatInput component
- Add back IPC spell-check and spell-suggestions handlers in main process
- Re-enable custom misspelled word highlighting with red background
- Restore hover/click popover tooltips with spell suggestions
- Disable native browser spell checking (spellCheck={false}) to use custom implementation
- Add back all spell checking state management and event handlers
This provides the custom spell checking UI with highlighting and popovers as requested.
- Remove custom spell checking logic from RichChatInput component
- Remove SpellCheckTooltip and SpellCheckContextMenu components
- Remove IPC spell-check and spell-suggestions handlers from main process
- Enable native browser spell checking with spellCheck={true} on textarea
- Simplify component by removing misspelled word highlighting and tooltip state
- Users now get familiar OS-native spell check with right-click context menus
This provides better UX with system dictionary integration and familiar behavior.
- Changed cursor transform from translateY(-0.1em) to translateY(0.1em)
- Cursor now appears properly centered with text instead of floating above
- Applied fix to all cursor instances throughout RichChatInput component
spencrmartin