feat(ui): migrate SearchModal + CommandPalette onto Base UI Autocomplete (#520 PR8)

[Astro-Han]

Summary

Migrate the two hand-rolled search/command result lists onto Base UI Autocomplete (activedescendant mode), converging the last hand-rolled listbox surfaces in the app onto the Base UI primitive.

• SearchModal (packages/ui/src/search-modal.tsx): the roving-focus result list (activeResultIndex / moveActiveResult / jumpActiveResult / keyboardSelectionHandledRef / handleResultKeyDown / data-active) is replaced by Autocomplete.Root inline mode="none" autoHighlight="always" filter={null} + Autocomplete.Input (render InputGroupInput) + Autocomplete.List + Autocomplete.Item.
• CommandPalette (apps/desktop/src/renderer/command-palette.tsx): the hand-rolled activedescendant list (highlight state + onInputKeyDown + reset useEffect + <div role=listbox> + <Button role=option data-active>) is replaced by the same Autocomplete shape, using Autocomplete.Group + Autocomplete.GroupLabel for the grouped command sections.

Why

Closes #520 (item: combobox/search-palette convergence onto Base UI). This is the last hand-rolled listbox surface in the app; PR7 already moved the Dialog shells onto Base UI Dialog, and PR9/PR10 converged card/badge/input primitives. PR8 closes the loop on the in-modal search/command lists.

Scope

Changed:

• packages/ui/src/search-modal.tsx — rewritten onto Autocomplete; roving-focus machinery deleted.
• apps/desktop/src/renderer/command-palette.tsx — rewritten onto Autocomplete; highlight state + onInputKeyDown + reset useEffect deleted; Button import dropped (rows are Autocomplete.Item).
• apps/desktop/src/renderer/styles/sidebar.css — .maka-search-modal-result[data-active="true"] → [data-highlighted]; :focus-visible row rule dropped (input keeps focus in activedescendant mode).
• apps/desktop/src/renderer/styles/chat-header.css — .maka-palette-item[data-active="true"] → [data-highlighted] (item + icon); .maka-palette-cursor visibility driven by [data-highlighted] (replaces the JS !cmd.hint && active conditional for the CornerDownLeft cursor hint).
• Contract tests rewritten to lock the Autocomplete shape instead of the roving-focus/hand-rolled implementation:
  • search-modal-lifecycle-contract.test.ts — kbd-nav it-block → Autocomplete shape; focus-policy it-block drops activeResultIndex; empty-query it-block repoints onChange → onValueChange.
  • command-palette-a11y-copy-contract.test.ts — listbox it-block → Autocomplete shape; import regex drops Button; CSS data-active → data-highlighted; commit-gate block boundary is commit() (onInputKeyDown gone); highlight-reset it-block is now autoHighlight="always".
  • renderer-utility-primitives-contract.test.ts — row assert repoints <Button role=option> → <Autocomplete.Item>; adds Autocomplete import assertion.

Not included:

• Home/End jump-to-first/last-result binding (see Reviewer notes).
• CommandPalette content-search / fuzzy-filter logic (unchanged — mode="none" + filter={null} preserves the palette's own filtering).
• SearchModal debounce / ticket guard / unmount invalidation / snippet rendering / copy (unchanged).

Verification

• npm run typecheck — clean.
• npm run -w @maka/ui test — 43/43 pass.
• npm run -w @maka/desktop test — 2076/2076 pass.
• Screenshots vs main (fuzz 5%):
  • sidebar-search-modal-open: AE=2655, RMSE 0.0006 (seed has no query → placeholder state; diff is anti-alias-level from the render-prop input).
  • command-palette-open: AE=7250, RMSE 0.0017 (diff from <div role=option> vs <button> default + data-highlighted bg on the first item).

User-facing impact

Keyboard navigation in both modals shifts from roving-focus / hand-rolled activedescendant to Base UI Autocomplete activedescendant:

• The input keeps focus; the active item is reflected via aria-activedescendant (managed by Autocomplete). Previously SearchModal moved focus to the result button on ArrowDown.
• ArrowUp/Down/Enter/Escape are owned by Autocomplete (floating-ui useListNavigation).
• autoHighlight="always": the first result is always highlighted, so Enter on a fresh result set activates the top item without an extra ArrowDown.
• Home/End now move the input cursor (Base UI ComboboxInput default; the query is editable text). Previously Home/End jumped highlight to the first/last result. Decision (P2-c): accept the Base UI input-cursor behavior — matches the input-first mental model; recovering the jump needs deep-path Base UI internal imports (upgrade risk). Locked by contract.

a11y is more standard (listbox/option/activedescendant owned by the primitive). No CHANGELOG/docs/migration needed (in-app UI, no persisted state).

Reviewer notes

Review follow-up (keepHighlight + empty-state, commit 81743dce):

• keepHighlight added to both Roots. Source analysis: keepHighlight=false (default) sets resetOnPointerLeave=true (AriaCombobox.js:855), so pointer leave clears activeIndex, then autoHighlight="always" (line 678-682) re-highlights the first item → hover item[2] → leave → Enter ran the first item. keepHighlight makes pointer leave preserve the hovered item. Verified by source + Base UI docs; CDP hover-leave probe could not reliably trigger floating-ui useListNavigation's hover highlight (synthesized pointermove does not fire its hover detection), so pointer-leave preservation is source-guaranteed rather than probe-verified — the manual checklist covers it.
• CommandPalette empty state unified into Autocomplete.List. Previously a standalone <div> for empty + <Autocomplete.List> only when non-empty → input lost its listbox reference with no matches. Now Autocomplete.List always renders, with the Empty primitive inside. Autocomplete.Empty is not used: filter={null} + mode="none" keeps filteredItems non-empty (the palette's fuzzy filter is external), so Autocomplete.Empty would never trigger.
• Note: SearchModal's empty state (showEmpty → <p> outside List) has the same shape and was not in this review's scope — flagging for awareness; can unify in a follow-up if wanted.

Review fixes (P1 + P2-a + P2-b + P2-c, commit aec3258f):

• P1 (blocker) — added open to both Autocomplete.Root. Per Base UI docs, inline requires open so the list is treated as visible. Without it, defaultOpen=false → input not data-popup-open, keyboard nav / activedescendant break. Verified via CDP probe: input has data-popup-open + aria-controls + aria-activedescendant; first item data-highlighted; ArrowDown 0→1→2, ArrowUp 2→1.
• P2-a — added itemToStringValue + onValueChange item-press guard. Object items (result/cmd) now serialize to title/label; onValueChange skips details.reason === 'item-press' so selection never writes the object back into the query. Defensive (inline mode's shouldFillInput is currently false because popupRef.current is null), but correct regardless of future Popup changes.
• P2-b — contract tests lock open + itemToStringValue + onValueChange item-press filter (catches P1/P2-a regressions), plus the existing inline/mode/autoHighlight/List/Item shape. Keyboard event simulation needs happy-dom (not in maka's test infra — its DOM tests use a hand-rolled FakeElement without an event system), so keyboard nav is covered by the CDP probe + the manual checklist below rather than automated tests.
• P2-c — Home/End decision: accept Base UI input-cursor behavior. Locked by contract (no jumpActive / onInputKeyDown).

Manual checklist (please confirm by hand, both SearchModal and CommandPalette):

• Type a query → results appear, first item highlighted.
• ArrowDown / ArrowUp moves highlight (input keeps focus).
• Enter on highlighted item activates it once (no double-commit).
• Escape closes the modal (Escape with a query in SearchModal clears the query first).
• Home / End — input cursor moves to start/end, highlight does NOT jump.
• Click an item activates it; query is NOT overwritten with [object Object] or the item label.
• CommandPalette: grouped sections still render with group labels.
• Hover an item, move the pointer off the list, press Enter — the hovered item runs, not the first.
• Type a query with no matches — empty state shows inside the list; input still references a listbox.

Four commits: SearchModal (598b170a), CommandPalette (63e93427), review fixes (aec3258f), keepHighlight + empty-state (81743dce). Each independently revertable.

Checklist

• Scope matches the PR title and excludes unrelated changes
• Verification lists commands/results, or explains why they were not run
• User-facing impact, docs, changelog, migrations, and breaking changes are noted, or marked none
• Risk, rollback, or review focus is called out for non-trivial changes
• UI changes include screenshots/video, or explain why not applicable