feat(frontend): add SearchBox component with glass styling

[DevanshuNEU]

Overview

New standalone SearchBox component with v2 design system styling. First visual component using the design tokens from #110.

Changes

New: frontend/src/components/search/SearchBox.tsx

Reusable search input with:

• Glass morphism - Uses .glass class from design tokens
• Keyboard shortcut - ⌘K / Ctrl+K to focus, Esc to blur
• Animated placeholder - Typewriter effect cycling through examples
• Loading state - Spinner replaces search icon
• Focus glow - Indigo accent glow on focus

Updated: frontend/src/components/SearchPanel.tsx

• Now uses SearchBox component
• Updated to use v2 design tokens (.card, .badge-*, .btn-*)
• Cleaner code, consistent styling

Features

<SearchBox
  value={query}
  onChange={setQuery}
  onSubmit={handleSearch}
  loading={isLoading}
  autoFocus
/>

Feature	Implementation
Glass effect	glass class with backdrop blur
Focus state	border-accent shadow-glow
Shortcut hint	⌘K badge, hidden on focus
Typewriter	Cycles through 5 example queries

Testing

• Build passes
• Component renders
• Keyboard shortcut works
• Visual testing (need to run dev server)

Related

Closes #111
Part of Epic #109

[vercel]

@DevanshuNEU is attempting to deploy a commit to the Dev's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
opencodeintel	Ready	Preview, Comment	Dec 23, 2025 10:07pm