- Add overflow-y-auto to both textarea and visual display layers
- Implement scroll synchronization between layers
- Maintain spell checking functionality during scrolling
- Enable writing and editing of long text content
- Preserve all interactive features (selection, spell check, tooltips)
- Increase visual display layer z-index from 1 to 3 (above textarea)
- Increase misspelled word z-index from z-10 to z-50 for proper layering
- Ensure misspelled words receive mouse events even in multi-line content
- Maintain proper event handling hierarchy for text selection and spell checking
- Implement intelligent tooltip positioning to avoid window edges
- Automatically adjust horizontal alignment (left, center, right) based on available space
- Switch to below-word positioning when insufficient vertical space above
- Add 10px margin from window edges for better visibility
- Use timeout to ensure tooltip renders before calculating position
- Maintain proper transform origins for different alignment modes
- Replace hardcoded colors with Tailwind CSS semantic color classes
- Add proper dark mode support with dark: variants
- Maintain text selection capability (userSelect: 'text')
- Use consistent design system colors for borders, backgrounds, and text
- Ensure accessibility across light and dark themes
- Add click support for misspelled words to show tooltip
- Implement keyboard navigation (arrow keys, numbers 1-5, Enter, Escape)
- Improve visual styling with hover effects and transitions
- Add proper click detection to prevent tooltip from closing when interacting
- Enhanced tooltip positioning and visual feedback
- Add keyboard shortcuts hints at bottom of tooltip
- Replace hardcoded dictionary with native OS spell checkers
- Use aspell on macOS/Linux and hunspell on Windows
- Add IPC handlers for spell-check and spell-suggestions
- Integrate spell checking into RichChatInput component
- Add proper error handling and fallbacks for missing utilities
- Implement inline spell checking with pattern-based detection for keyboard mashing, excessive consonants, and very long words
- Add hover tooltips positioned 1px above misspelled words with suggestions
- Include tooltip hover persistence to allow user interaction
- Add visual highlighting with bright red background for clear visibility
- Use textarea-based hover detection for cross-platform compatibility
- Integrate spell checking into dual-layer rich text input architecture
- Calculate static X position based on word start character position
- Position tooltip just 2px above the input component (y: rect.top - 2)
- Use character width estimation to align tooltip with word start
- Remove floating behavior - tooltip now stays in fixed position
- Account for textarea padding in position calculations
- Replace visual layer hover with textarea onMouseMove detection
- Map mouse coordinates to character positions in text
- Check if mouse position overlaps with misspelled word boundaries
- Show tooltip when hovering over misspelled words via textarea
- Bypasses CSS pointer-events issues with dual-layer architecture
- Uses caretRangeFromPoint API for precise character position detection
- Create SpellCheckTooltip component with hover-based interaction
- Replace right-click context menu with more intuitive hover tooltip
- Position tooltip above misspelled words for better UX
- Add smooth hover enter/leave interactions with delay
- More uniform across platforms (no right-click issues on Mac)
- Compact design showing up to 5 suggestions with numbers
- Maintains all functionality: suggestion selection, add to dictionary, ignore
- Replace hardcoded word list with intelligent pattern detection
- Detect keyboard mashing patterns (qwerty, asdf, zxcv)
- Catch very long words (>15 chars) as likely gibberish
- Identify words with excessive consonant clusters
- Skip common correct words to reduce false positives
- Should now catch words like 'dasfasg' and 'saddsdafhaoihsodiahsdoahd'
- Maintains specific suggestions for known misspellings
- Create SpellCheckContextMenu component with professional styling
- Add right-click handler to misspelled words
- Implement suggestion selection with automatic word replacement
- Add 'Add to dictionary' and 'Ignore' functionality (ready for implementation)
- Include smart suggestions for common misspellings (hellwo->hello, recieve->receive, etc.)
- Support keyboard navigation (Escape to close)
- Proper click-outside-to-close behavior
- Prevent default browser context menu on misspelled words
- Add 'hellwo' to test misspellings list
- Use proper regex for word boundary detection
- Add detailed logging for each word checked
- Show whether each word is marked as correct or misspelling
- This should definitely catch 'hellwo' and show detailed debug info
- Replace Typo.js integration with simple hardcoded spell checker
- Should catch 'gasdd2', 'recieve', 'seperate', 'definately', etc.
- Add detailed logging to debug spell check process
- This will help identify if issue is with Typo.js or the highlighting system
- If this works, we know the highlighting is fine and can fix Typo.js separately
- Fix import conflicts between local and imported checkSpelling functions
- Add @ts-ignore for typo-js import compatibility
- Add extensive console logging throughout spell check process
- Add fallback spell checker for testing if Typo.js fails
- Install @types/typo-js for better TypeScript support
- This should help identify why spell check highlighting isn't working
- Install typo-js library for real dictionary-based spell checking
- Download US English dictionaries (50,000+ words) from Hunspell/LibreOffice
- Create realSpellCheck.ts with professional spell checking capabilities
- Add spell suggestions functionality for future use
- Replace heuristic spell checker with real dictionary-based checking
- Maintain technical term filtering for developer context
- Singleton pattern for performance optimization
- Graceful fallback handling for dictionary loading
- Create smartSpellCheck.ts utility with pattern-based spell checking
- Replace hardcoded word list with intelligent heuristics
- Skip technical terms (API, JSON, React, etc.) and short words
- Detect common misspelling patterns (reciev*, seperat*, definat*)
- Check for unusual letter combinations and invalid patterns
- Much more accurate and context-aware for developer environment
- Extensible pattern system instead of static word lists
- Add 'sdd', 'asdf', 'qwerty', 'test', 'xyz' to misspellings list for testing
- Add many more common misspellings for better coverage
- Add detailed console logging to debug spell check word processing
- This should now detect 'sdd' as a misspelling and show bright red styling
- Add console.log statements to debug spell check functionality
- Make spell check styling ultra-visible with bright red background
- Use #fecaca background color that should be impossible to miss
- Add thick border, bold text, padding, and shadow
- This will help identify if it's a logic or styling issue
- Disable browser spellCheck={false} to prevent interference with custom styling
- Make custom spell check much more visible with:
- Thick red border (3px solid)
- Strong red background (20% opacity)
- Bold dark red text
- Red shadow for emphasis
- More padding for better appearance
- Fixes issue where browser's faint dotted line was overriding custom styling
- Replace faint text-decoration with solid red border
- Add subtle red background tint for extra emphasis
- Use borderBottom: '2px solid #ef4444' for reliable visibility
- Add rounded corners and proper padding
- Fixes issue where text-decoration was barely visible (same issue we had with highlight component)
- Change from dotted to wavy underline (like Microsoft Word)
- Add fallback border for browser compatibility
- Increase underline offset and add padding
- Use brighter red color for better visibility
- Addresses issue where spell check lines were barely visible
- Enable browser spell check on hidden textarea with spellCheck={true}
- Implement custom spell checking system with red dotted underlines
- Add checkSpelling function with common misspellings detection
- Integrate spell check with existing pill rendering system
- Handle overlapping matches (pills take priority over spell check)
- Add debounced spell checking (500ms delay) for performance
- Style misspelled words with red dotted underline and tooltips
- Maintain accessibility with proper title attributes
- Add cc = "1.0.106" to workspace dependencies to resolve transitive dependency conflicts
- Update Cargo.lock to ensure consistent cc version across all crates
- Fixes CI build failure caused by conflicting cc version requirements from cmake and blake3
- Removed all temporary Python debugging scripts from root directory
- Cleaned up debug console.log statements from ChatInput.tsx and RichChatInput.tsx
- Kept only the core implementation files for the rich text input feature
- Implement RichChatInput component with visual pill rendering
- Add ActionPill component with blue circle icons for actions
- Add MentionPill component with blue diamond icons for files
- Support for /action and @filename pill creation
- Inline pill display in both input and message history
- Proper text selection, highlighting, and cursor positioning
- Backspace removal of entire pills
- Theme-aware styling for light/dark modes
- Consistent white pill backgrounds with blue accent icons
- Fixed line-breaking issues for natural text flow
Components added:
- RichChatInput.tsx: Main rich text input with pill rendering
- ActionPill.tsx: Blue circle pills for actions
- MentionPill.tsx: Blue diamond pills for file mentions
- MessageContent.tsx: Enhanced message display with pills
Features:
- Visual pills replace [Action] and @filename text
- Click and drag text selection works normally
- Double/triple click for word/all selection
- Pills flow inline with text content
- Proper cursor positioning and blinking
- Backspace removes entire pills as units
- Remove small circle indicator from Action icon for cleaner plus symbol
- Fix button padding conflicts by using !px-0 to override default padding:
- Action button: Remove left/right padding for tighter spacing
- Attach button: Remove left/right padding for tighter spacing
- Ensure buttons render without horizontal padding as intended
UI improvements:
- Cleaner, more minimal plus icon design
- Consistent compact button spacing
- Better visual alignment in bottom bar
- Add consistent text labels to all bottom bar components:
- Action button: now shows 'Actions' text
- Attach button: now shows 'Attach' text
- Goosehints button: now shows 'Hints' text
- All components now follow icon + text pattern
- Standardize spacing across all bottom bar components:
- Display components (Directory, Cost, Model, Mode): px-1 padding
- Action buttons (Actions, Attach, Hints): px-0 padding
- Consistent visual hierarchy based on component behavior
- Add responsive design at 1050px breakpoint:
- Under 1050px: Show icons only for compact mobile/tablet view
- 1050px and above: Show icons + text for desktop view
- Smooth transitions with proper icon spacing adjustments
- Improve visual consistency:
- Uniform hover states and transitions
- Consistent icon sizing (w-4 h-4) and spacing (mr-1)
- Professional appearance across all screen sizes
Components updated:
- ChatInput.tsx - Action, Attach, and Hints buttons
- DirSwitcher.tsx - Directory display
- CostTracker.tsx - Cost display
- ModelsBottomBar.tsx - Model selector
- BottomMenuModeSelection.tsx - Mode selector
spencrmartin