docs: update project documentation with UI refinements

- Add UI/UX refinements section to .cursorrules with message display, button layout, scrollbar, pill animations, and Create New button details
- Update CLAUDE.md with message display formatting and top button layout information
- Update README.md key features with polished UI and custom agents information

.cursorrules

@@ -382,6 +382,34 @@ localStorage.getItem('selected-agent')
 
 ---
 
-**Last Updated**: 2025-11-15
+## UI/UX Refinements (2025-11-15)
-**Version**: 1.0
+
+### Message Display
+- User messages limited to 75% max-width with proper text wrapping
+- Messages positioned on right but text is left-aligned (natural flow)
+- Code blocks in messages have overflow handling with horizontal scrolling
+- Inline code and block code properly contained within message bubbles
+
+### Button Layout
+- "New chat" button positioned on left side of manuscript panel
+- Bookmark/pinned agents button positioned on right side
+- Buttons use `ml-auto` flex layout for proper spacing
+
+### Scrollbar Styling
+- Changed from orange to neutral gray (`#9ca3af` light mode, `#6b7280` dark mode)
+- Scrollbars hidden by default, show on hover
+- Maintains consistency with minimalist design
+
+### Pill Animations
+- Fixed flicker by initializing `pinnedAgents` from localStorage in state initializer
+- Added 0.2s base delay to all pills for staggered reveal effect
+- Each pill staggered 60ms apart for smooth cascade animation
+
+### "Create New" Button
+- Enhanced animation with bouncy scale: `[1, 1.1, 0.95, 1.05, 1]`
+- Duration: 0.6s with `easeInOut` easing
+- Provides clear visual feedback before selecting Morgan and populating input
+
+**Last Updated**: 2025-11-15
+**Version**: 1.1
 

CLAUDE.md

@@ -133,11 +133,19 @@ The route handles multiple n8n response formats:
 - Enter to send, Shift+Enter for new line
 - Paperclip icon for image attachments
 
+### Top Button Layout
+- "Start new chat" button positioned on left side of manuscript panel
+- "View pinned agents" bookmark button positioned on right side
+- Uses flex layout with `ml-auto` to push bookmark to the right
+
 ### Message Display
-- User messages: right-aligned with glass bubble styling
+- User messages: positioned on right with glass bubble styling, text left-aligned within bubble (natural flow)
+- Message content limited to 75% max-width with word-wrapping for long text
+- Code blocks in messages have horizontal scrolling with proper overflow handling
 - Assistant messages: markdown-rendered with copy button and syntax highlighting
 - Error messages: red text, optional hint field displayed below
 - Loading state: animated shimmer bar
+- Scrollbars: gray color (neutral), hidden by default, shown on hover
 
 ## Feature Flag System
 

README.md

@@ -76,6 +76,8 @@ Multi-agent chat interface that enables users to select from configured AI agent
 - **Session persistence:** Agent-specific conversation history in localStorage
 - **Mobile-optimized:** Glass-morphism design with mobile-first responsiveness
 - **Feature flags:** Runtime-configurable features for controlled rollouts
+- **Polished UI:** Message formatting with proper wrapping, smooth animations, and refined scrollbars
+- **Custom agents:** Create and pin custom agents via Morgan (Agent Architect)
 
 <p align="right"><a href="#readme-top">back to top ↑</a></p>