Integrate problem space validation warnings directly into page selector controls with visual indicators and tooltips.
**Visual Indicators:**
- Color-coded dots on page buttons (1-3) and dropdown trigger (4+)
- Yellow dot for low/medium risk, red dot for high/extreme risk
- Consistent styling across all page selection controls
**Tooltips:**
- Hover over page buttons shows detailed validation warnings
- Hover over dropdown trigger shows warnings for selected page
- Hover over dropdown menu items shows warnings for that page count
- Instant show/hide with no delays (delayDuration=0, disableHoverableContent)
**Dropdown Indicator:**
- Trigger button shows mildest (most severe) warning among all items (4, 10, 25, 50, 100)
- Alerts user to warnings before opening dropdown
**Single Source of Truth:**
- All validation uses validateProblemSpace() from utils/validateProblemSpace.ts
- No duplicated logic - banner and page selector share same validation function
- Risk mapping: none → no indicator, low/medium → yellow, high/extreme → red
**UX Improvements:**
- Tooltip closes immediately when dropdown opens (tracked with state)
- Dropdown menu items show inline warning dots before page count
- All tooltips close instantly on mouseout (no hoverable content)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
1d8dceb55b