feat(ux): add topbar quick-filter clear button

src/components/studio/topbar.test.tsx

@@ -5,7 +5,7 @@ vi.mock('lucide-react', () => {
   const Icon = ({ className }: { className?: string }) => (
     <span data-testid="icon" className={className} />
   )
-  return { Menu: Icon, Plus: Icon, Search: Icon }
+  return { Menu: Icon, Plus: Icon, Search: Icon, X: Icon }
 })
 
 vi.mock('@/lib/utils', () => ({
@@ -176,4 +176,27 @@ describe('Topbar', () => {
     render(<Topbar />)
     expect(screen.getByLabelText('Search')).toBeDefined()
   })
+
+  it('renders input with type="search"', () => {
+    render(<Topbar />)
+    const input = screen.getByLabelText('Search') as HTMLInputElement
+    expect(input.type).toBe('search')
+  })
+
+  it('renders clear search button when searchQuery is non-empty and handles click', () => {
+    searchQuery = 'test query'
+    render(<Topbar />)
+    const clearButton = screen.getByLabelText('Clear quick filter')
+    expect(clearButton).toBeDefined()
+    expect(clearButton.getAttribute('title')).toBe('Clear quick filter')
+    fireEvent.click(clearButton)
+    expect(mockSetSearchQuery).toHaveBeenCalledWith('')
+  })
+
+  it('clears searchQuery on Escape key in search input when searchQuery is non-empty', () => {
+    searchQuery = 'test query'
+    render(<Topbar />)
+    fireEvent.keyDown(screen.getByLabelText('Search'), { key: 'Escape' })
+    expect(mockSetSearchQuery).toHaveBeenCalledWith('')
+  })
 })

src/components/studio/topbar.tsx

@@ -3,7 +3,7 @@
 import { useStudioStore } from '@/lib/studio/store'
 import type { ViewId } from '@/lib/studio/types'
 import { translate as timelineT } from '@/lib/i18n/messages/timeline'
-import { Menu, Plus, Search } from 'lucide-react'
+import { Menu, Plus, Search, X } from 'lucide-react'
 import type { KeyboardEvent } from 'react'
 
 /** View title metadata keyed by ViewId (bounded Map retrieval — no dynamic indexing). */
@@ -25,27 +25,30 @@
 const getViewMeta = (view: ViewId): { title: string; subtitle: string } =>
   VIEW_TITLES.get(view) ?? { title: 'Studio', subtitle: 'Your knowledge base at a glance' }
 
 /** Top header bar with view title, inline search, offline badge, and new entity button. */
 export const Topbar = () => {
   const currentView = useStudioStore((s) => s.currentView)
   const searchQuery = useStudioStore((s) => s.searchQuery)
   const startNew = useStudioStore((s) => s.startNew)
   const setCommandOpen = useStudioStore((s) => s.setCommandOpen)
   const setSearchQuery = useStudioStore((s) => s.setSearchQuery)
   const setMobileDrawerOpen = useStudioStore((s) => s.setMobileDrawerOpen)
   const setMobilePanelView = useStudioStore((s) => s.setMobilePanelView)
   const meta = getViewMeta(currentView)
 
   // Inline input doubles as a quick filter for the Library + right-panel SearchPanel,
   // and as a launcher for the command palette (via ⌘K or the kbd chip).
   const isLibraryView = currentView === 'library'
   const placeholder = isLibraryView ? 'Filter library…' : 'Search…'
   const inputAriaLabel = isLibraryView ? 'Filter library' : 'Search'
 
   const handleSearchKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
       e.preventDefault()
       setCommandOpen(true)
+    } else if (e.key === 'Escape' && searchQuery) {
+      e.preventDefault()
+      setSearchQuery('')
     }
   }
 
@@ -96,14 +99,25 @@
           aria-hidden
         />
         <input
-          type="text"
+          type="search"
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
           onKeyDown={handleSearchKeyDown}
           placeholder={placeholder}
           aria-label={inputAriaLabel}
-          className="min-h-[44px] w-full rounded-md border border-border bg-background pl-9 pr-12 text-[13px] text-ink placeholder:text-ink-faint transition-colors focus:border-saffron focus:outline-none focus:ring-2 focus:ring-saffron/40"
+          className="min-h-[44px] w-full rounded-md border border-border bg-background pl-9 pr-20 text-[13px] text-ink placeholder:text-ink-faint transition-colors focus:border-saffron focus:outline-none focus:ring-2 focus:ring-saffron/40"
         />
+        {searchQuery ? (
+          <button
+            type="button"
+            onClick={() => setSearchQuery('')}
+            aria-label="Clear quick filter"
+            title="Clear quick filter"
+            className="absolute right-[3.25rem] top-1/2 flex min-h-[44px] min-w-[44px] items-center justify-center -translate-y-1/2 rounded text-ink-faint transition-colors hover:bg-muted hover:text-ink focus-ring"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
+        ) : null}
         <button
           type="button"
           onClick={() => setCommandOpen(true)}