Problem
packages/web/src/components/search/SearchBox.js is 2,692 lines handling at least 6 distinct responsibilities:
- Search input management (value, focus, blur, keyboard)
- Suggestion rendering (8+ types: popular, recent, FAQ, featured, document, index, endpoint, predictive)
- AI Answer mode (full chat UI with session management)
- Voice/mic input
- Image search with camera
- URL param sync
The render method alone spans hundreds of lines with deeply nested ternaries.
Suggested Fix
Extract these as additive subcomponents (non-breaking, each can be a separate PR):
AISection.js — The entire AI answer screen (~L1870-1988)
SuggestionsSection.js — All 8 suggestion types rendering (~L1990-2180)
SearchInput.js — The input element with mic, camera, and autofill addons
Each extraction is verifiable by existing snapshot tests since the composite output is unchanged.
Severity
High — maintainability bottleneck
Problem
packages/web/src/components/search/SearchBox.jsis 2,692 lines handling at least 6 distinct responsibilities:The render method alone spans hundreds of lines with deeply nested ternaries.
Suggested Fix
Extract these as additive subcomponents (non-breaking, each can be a separate PR):
AISection.js— The entire AI answer screen (~L1870-1988)SuggestionsSection.js— All 8 suggestion types rendering (~L1990-2180)SearchInput.js— The input element with mic, camera, and autofill addonsEach extraction is verifiable by existing snapshot tests since the composite output is unchanged.
Severity
High — maintainability bottleneck