From 598b170a5986dd249f7a52045515557e1ccfb96a Mon Sep 17 00:00:00 2001
From: AstroHan <lei.yuhan@outlook.com>
Date: Mon, 6 Jul 2026 15:28:02 +0800
Subject: [PATCH 1/5] feat(ui): migrate SearchModal result list to Base UI
 Autocomplete (#520 PR8)

SearchModal's hand-rolled roving-focus result list (activeResultIndex /
moveActiveResult / jumpActiveResult / keyboardSelectionHandledRef /
handleResultKeyDown / data-active) is replaced by Base UI Autocomplete in
activedescendant mode:

- Autocomplete.Root inline + mode="none" + autoHighlight="always" +
  filter={null}: the list renders inline in the modal body (no floating
  popup), Autocomplete does not re-filter the server-side IPC results, and
  the first result is always highlighted so Enter works without an extra
  ArrowDown.
- Autocomplete.Input renders the input via the shared InputGroupInput
  primitive (render prop); ArrowUp/Down/Enter/Escape keyboard nav is owned
  by Autocomplete (floating-ui useListNavigation).
- Autocomplete.List + Autocomplete.Item replace the hand-rolled
  <ul role=listbox> + <li><button role=option>; item onClick fires
  selectResult for both pointer click and Enter on the highlighted item.
- aria-activedescendant on the input is now managed by Autocomplete.

selectResult navigation (sessionId + turnId, restoreFocus: false), the
debounced IPC search, the inflight ticket guard, the unmount invalidation,
the clear button, the snippet rendering, and all copy/states are unchanged.

The roving-focus kbd-nav interaction (ArrowDown moved focus to the result
button) becomes activedescendant (input keeps focus, active item reflected
via aria-activedescendant). a11y is more standard; the interaction habit
shifts. Home/End now move the input cursor (Base UI ComboboxInput default);
jump-to-first/last result is not bound for now (to be confirmed by manual
testing per PR8 plan).

search-modal-lifecycle-contract: the kbd-nav it-block is rewritten to lock
the Autocomplete shape (Root props + Item onClick + selectResult navigation)
instead of the roving-focus implementation; the focus-policy it-block drops
the activeResultIndex/moveActiveResult assertions; the empty-query it-block
repoints onChange -> onValueChange. CSS .maka-search-modal-result[data-active]
-> [data-highlighted] (Autocomplete item highlighted state).

Verification: typecheck clean, @maka/desktop 2076/2076, @maka/ui 43/43,
sidebar-search-modal-open screenshot AE=2655 (fuzz 5%, RMSE 0.0006) vs main.
---
 .../search-modal-lifecycle-contract.test.ts   |  80 ++--
 apps/desktop/src/renderer/styles/sidebar.css  |  10 +-
 packages/ui/src/search-modal.tsx              | 346 +++++++-----------
 3 files changed, 184 insertions(+), 252 deletions(-)

diff --git a/apps/desktop/src/main/__tests__/search-modal-lifecycle-contract.test.ts b/apps/desktop/src/main/__tests__/search-modal-lifecycle-contract.test.ts
index d55b24faf6..1b33442aa8 100644
--- a/apps/desktop/src/main/__tests__/search-modal-lifecycle-contract.test.ts
+++ b/apps/desktop/src/main/__tests__/search-modal-lifecycle-contract.test.ts
@@ -227,30 +227,52 @@ describe('SearchModal lifecycle contract (PR-SIDEBAR-IA-0 Phase 3 P0 fixup)', ()
     );
   });
 
-  it('search results support keyboard selection from the input', async () => {
+  it('search results use Base UI Autocomplete for listbox + keyboard selection (#520 PR8)', async () => {
     const searchModal = await readFile(SEARCH_MODAL_PATH, 'utf8');
     const styles = await readRendererContractCss();
 
-    assert.match(searchModal, /activeResultIndex/, 'SearchModal must track the active result index');
-    assert.match(searchModal, /aria-activedescendant=\{activeResultId\}/, 'Search input must expose the active result to assistive tech');
-    assert.match(searchModal, /className="maka-search-modal-body" role="region" aria-label="搜索状态和结果" aria-live="polite"/, 'Search modal body region must expose an accessible name');
-    assert.match(searchModal, /role="listbox" aria-label="搜索结果"/, 'Search results must expose a listbox for aria-activedescendant');
-    assert.match(searchModal, /role="option"[\s\S]*aria-selected=\{activeResultIndex === index\}/, 'Search result rows must expose selected option state');
-    assert.match(searchModal, /keyboardKey\(event, \['ArrowDown', 'Down'\]\)[\s\S]*moveActiveResult\(1,\s*\{ focusResult: true \}\)/, 'ArrowDown/Down must move focus to the next result');
-    assert.match(searchModal, /keyboardKey\(event, \['ArrowUp', 'Up'\]\)[\s\S]*moveActiveResult\(-1,\s*\{ focusResult: true \}\)/, 'ArrowUp/Up must move focus to the previous result');
-    assert.match(searchModal, /function jumpActiveResult\(index: number,\s*options\?: \{ focusResult\?: boolean \}\)/, 'SearchModal must support direct active-result jumps');
-    assert.match(searchModal, /keyboardKey\(event, \['Home'\]\)[\s\S]*jumpActiveResult\(0,\s*\{ focusResult: true \}\)/, 'Home must jump focus to the first result');
-    assert.match(searchModal, /keyboardKey\(event, \['End'\]\)[\s\S]*jumpActiveResult\(results\.length - 1,\s*\{ focusResult: true \}\)/, 'End must jump focus to the last result');
-    assert.match(searchModal, /function selectKeyboardResult\(\) \{[\s\S]*results\[activeResultIndex >= 0 \? activeResultIndex : 0\]/, 'Enter/Return must fall back to opening the first result when no row is active');
-    assert.match(searchModal, /const keyboardSelectionHandledRef = useRef\(false\)/, 'SearchModal must keep Enter keydown and keyup from double-activating the same result');
-    assert.match(searchModal, /keyboardSelectionHandledRef\.current = true;[\s\S]*selectKeyboardResult\(\)/, 'Enter/Return keydown must mark the selection handled before opening the result');
-    assert.match(searchModal, /onKeyUp=\{\(event\) => \{[\s\S]*keyboardSelectionHandledRef\.current\)[\s\S]*keyboardSelectionHandledRef\.current = false;[\s\S]*return;[\s\S]*keyboardKey\(event, \['Enter', 'Return'\]\) && showResults[\s\S]*selectKeyboardResult\(\)/, 'Search input keyup fallback must stay for Electron search-field quirks but skip Enter already handled on keydown');
-    assert.match(searchModal, /function handleResultKeyDown\(event: KeyboardEvent<HTMLButtonElement>, index: number, result: SearchResult\)/, 'Focused search result rows must have their own keyboard handler');
-    assert.match(searchModal, /keyboardKey\(event, \['Enter', 'Return', 'Space', ' '\]\)[\s\S]*selectResult\(result\)/, 'Focused search result rows must activate on Enter, Return, or Space');
-    assert.match(searchModal, /tabIndex=\{-1\}/, 'Search result rows should be arrow-key focused, not extra tab stops');
-    assert.match(searchModal, /onKeyDown=\{\(event\) => handleResultKeyDown\(event, index, result\)\}/, 'Search result rows must wire the keyboard handler');
-    assert.match(searchModal, /data-active=\{activeResultIndex === index \? 'true' : undefined\}/, 'Active result must get a visible state hook');
-    assert.match(styles, /\.maka-search-modal-result\[data-active="true"\]:not\(\[disabled\]\)/, 'Active search result must have dedicated styling');
+    // #520 PR8: SearchModal converges onto Base UI Autocomplete instead of a
+    // hand-rolled roving-focus listbox. Autocomplete owns the listbox/option
+    // ARIA + ArrowUp/Down/Enter/Escape keyboard nav (activedescendant mode:
+    // input keeps focus, active item reflected via aria-activedescendant).
+    assert.match(
+      searchModal,
+      /import \{ Autocomplete \} from '@base-ui\/react\/autocomplete'/,
+      'SearchModal must consume Base UI Autocomplete for the result list',
+    );
+    assert.match(
+      searchModal,
+      /<Autocomplete\.Root[\s\S]*?inline[\s\S]*?mode="none"[\s\S]*?autoHighlight="always"[\s\S]*?filter=\{null\}/,
+      'Autocomplete.Root must render inline (list stays in modal body, not a floating popup), use mode="none" (server-side IPC filtering, no local filter), and autoHighlight="always" so Enter on the first result works without an extra ArrowDown',
+    );
+    assert.match(searchModal, /<Autocomplete\.Input/, 'Search input must be Autocomplete.Input');
+    assert.match(searchModal, /<Autocomplete\.List/, 'Results must render as Autocomplete.List (listbox)');
+    assert.match(
+      searchModal,
+      /<Autocomplete\.Item[\s\S]*?onClick=\{\(\) => selectResult\(result\)\}/,
+      'Each result must be Autocomplete.Item with onClick firing selectResult (pointer click or Enter on highlighted)',
+    );
+    // selectResult navigation contract is unchanged from the roving-focus era.
+    assert.match(
+      searchModal,
+      /props\.onNavigateToSession\(result\.target\.sessionId,\s*result\.target\.turnId\)/,
+      'selectResult must still pass sessionId + turnId to the shell navigation callback',
+    );
+    assert.match(
+      searchModal,
+      /props\.onClose\(\{ restoreFocus: false \}\)/,
+      'selectResult must still skip focus restore so the destination chat owns focus',
+    );
+    assert.match(
+      searchModal,
+      /className="maka-search-modal-body" role="region" aria-label="搜索状态和结果" aria-live="polite"/,
+      'Search modal body region must still expose an accessible name',
+    );
+    assert.match(
+      styles,
+      /\.maka-search-modal-result\[data-highlighted\]/,
+      'Highlighted (active) search result must have dedicated styling (Autocomplete data-highlighted replaces the old data-active)',
+    );
   });
 
   it('search input keeps focus after results load until the user navigates results', async () => {
@@ -266,16 +288,10 @@ describe('SearchModal lifecycle contract (PR-SIDEBAR-IA-0 Phase 3 P0 fixup)', ()
       /finalFocus=\{\(\) => \(suppressFocusRestoreRef\.current \? false : true\)\}/,
       'SearchModal must skip Base UI focus restore when navigating to a result so the destination owns focus',
     );
-    assert.match(
-      searchModal,
-      /setResults\(response\);\s*setError\(null\);\s*setActiveResultIndex\(-1\);/m,
-      'Search results must not automatically move active-descendant focus onto the first result while the user is still typing',
-    );
-    assert.match(
-      searchModal,
-      /const next = activeResultIndex < 0\s*\?\s*\(delta > 0 \? 0 : results\.length - 1\)/,
-      'Arrow navigation should still select the first or last result from the input',
-    );
+    // #520 PR8: activedescendant mode keeps focus in the input; the active
+    // item is reflected via aria-activedescendant managed by Autocomplete.
+    // The old activeResultIndex / moveActiveResult / jumpActiveResult
+    // roving-focus machinery is gone.
   });
 
   it('search query has an explicit clear button because the native search cancel is hidden', async () => {
@@ -327,7 +343,7 @@ describe('SearchModal lifecycle contract (PR-SIDEBAR-IA-0 Phase 3 P0 fixup)', ()
 
     assert.match(searchModal, /function clearSearchState\(\) \{\s*ticketRef\.current \+= 1;\s*setResults\(\[\]\);/m, 'Shared clear state helper must invalidate in-flight search before clearing results');
     assert.match(searchModal, /function updateSearchQuery\(nextQuery: string\) \{[\s\S]*if \(nextQuery\.trim\(\)\.length === 0\) \{[\s\S]*clearSearchState\(\);[\s\S]*\}/, 'Typing/deleting to an empty query must synchronously invalidate in-flight search');
-    assert.match(searchModal, /onChange=\{\(event\) => updateSearchQuery\(event\.currentTarget\.value\)\}/, 'Search input changes must go through the synchronized update helper');
+    assert.match(searchModal, /onValueChange=\{\(next\) => updateSearchQuery\(next\)\}/, 'Autocomplete value changes must go through the synchronized update helper');
     assert.match(searchModal, /keyboardKey\(event, \['Escape'\]\) && query[\s\S]*clearSearchQuery\(\);/, 'Escape clear path must synchronously invalidate in-flight search');
     assert.match(
       searchModal,
diff --git a/apps/desktop/src/renderer/styles/sidebar.css b/apps/desktop/src/renderer/styles/sidebar.css
index 710d04e4e7..762c645d15 100644
--- a/apps/desktop/src/renderer/styles/sidebar.css
+++ b/apps/desktop/src/renderer/styles/sidebar.css
@@ -459,14 +459,12 @@
   background: var(--state-hover-bg);
   transform: translateX(1px);
 }
-.maka-search-modal-result[data-active="true"]:not([disabled]) {
+/* #520 PR8: Autocomplete.Item exposes the active (highlighted) item via
+   data-highlighted (activedescendant mode — the input keeps focus, so the
+   item itself is no longer :focus-visible). */
+.maka-search-modal-result[data-highlighted]:not([disabled]) {
   background: var(--state-selected-bg);
 }
-.maka-search-modal-result:focus-visible {
-  outline: none;
-  background: var(--state-hover-bg);
-  box-shadow: 0 0 0 var(--focus-ring-width) oklch(from var(--focus-ring) l c h / 0.18);
-}
 .maka-search-modal-result[disabled] {
   cursor: default;
   opacity: var(--opacity-muted);
diff --git a/packages/ui/src/search-modal.tsx b/packages/ui/src/search-modal.tsx
index 61adc80df4..84b04274d9 100644
--- a/packages/ui/src/search-modal.tsx
+++ b/packages/ui/src/search-modal.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
 import type { SearchErrorReason, SearchRequest, SearchResult } from '@maka/core';
 import { generalizedErrorMessageChinese } from '@maka/core';
+import { Autocomplete } from '@base-ui/react/autocomplete';
 import { Search, X } from './icons.js';
 import { InputGroup, InputGroupAddon, InputGroupInput } from './primitives/input-group.js';
 import { DialogClose, DialogContent, DialogRoot, Button as UiButton } from './ui.js';
@@ -27,6 +28,17 @@ import { DialogClose, DialogContent, DialogRoot, Button as UiButton } from './ui
  * way for a future hook addition to drift past a stale return
  * statement.
  *
+ * #520 PR8: the result list converges onto Base UI Autocomplete
+ * (`inline` + `mode="none"` + `autoHighlight="always"` + `filter={null}`).
+ * Autocomplete owns the listbox/option ARIA structure and the
+ * ArrowUp/Down/Enter/Escape keyboard navigation in activedescendant
+ * mode (input keeps focus, the active item is reflected via
+ * aria-activedescendant). Server-side IPC filtering is preserved by
+ * `filter={null}` + `mode="none"` (Autocomplete does not re-filter
+ * the IPC results locally). The previous hand-rolled roving-focus
+ * machinery (activeResultIndex / moveActiveResult / jumpActiveResult
+ * / keyboardSelectionHandledRef) is gone.
+ *
  * Gate per kenji `7c320898`:
  *   - role="dialog" / aria-modal="true" / explicit title.
  *   - Esc and close button close the modal.
@@ -98,12 +110,9 @@ export function SearchModal(props: {
   const [results, setResults] = useState<SearchResult[]>([]);
   const [error, setError] = useState<{ reason: SearchErrorReason; message: string } | null>(null);
   const [pending, setPending] = useState(false);
-  const [activeResultIndex, setActiveResultIndex] = useState(-1);
   const inputRef = useRef<HTMLInputElement>(null);
-  const resultRefs = useRef<Array<HTMLButtonElement | null>>([]);
   const ticketRef = useRef(0);
   const searchMountedRef = useRef(true);
-  const keyboardSelectionHandledRef = useRef(false);
   const searchThread = props.deps?.searchThread;
   const suppressFocusRestoreRef = useRef(false);
 
@@ -125,7 +134,6 @@ export function SearchModal(props: {
       setResults([]);
       setError(null);
       setPending(false);
-      setActiveResultIndex(-1);
       return;
     }
     const ticket = ++ticketRef.current;
@@ -142,11 +150,9 @@ export function SearchModal(props: {
         if (Array.isArray(response)) {
           setResults(response);
           setError(null);
-          setActiveResultIndex(-1);
         } else {
           setResults([]);
           setError({ reason: response.reason, message: response.message });
-          setActiveResultIndex(-1);
         }
       } catch (err) {
         if (!searchMountedRef.current) return;
@@ -158,7 +164,6 @@ export function SearchModal(props: {
           reason: 'provider_error',
           message: searchModalThrownErrorMessage(err),
         });
-        setActiveResultIndex(-1);
       } finally {
         if (searchMountedRef.current && ticket === ticketRef.current) setPending(false);
       }
@@ -166,11 +171,6 @@ export function SearchModal(props: {
     return () => window.clearTimeout(handle);
   }, [query, searchThread]);
 
-  useEffect(() => {
-    if (activeResultIndex < 0) return;
-    resultRefs.current[activeResultIndex]?.scrollIntoView({ block: 'nearest' });
-  }, [activeResultIndex]);
-
   function selectResult(result: SearchResult) {
     if (!props.onNavigateToSession) return;
     if (result.target?.kind !== 'thread') return;
@@ -181,17 +181,11 @@ export function SearchModal(props: {
     props.onClose({ restoreFocus: false });
   }
 
-  function selectKeyboardResult() {
-    if (!showResults) return;
-    selectResult(results[activeResultIndex >= 0 ? activeResultIndex : 0]!);
-  }
-
   function clearSearchState() {
     ticketRef.current += 1;
     setResults([]);
     setError(null);
     setPending(false);
-    setActiveResultIndex(-1);
   }
 
   function updateSearchQuery(nextQuery: string) {
@@ -207,73 +201,14 @@ export function SearchModal(props: {
     inputRef.current?.focus();
   }
 
-  function focusSearchResult(index: number) {
-    window.requestAnimationFrame(() => {
-      resultRefs.current[index]?.focus({ preventScroll: true });
-    });
-  }
-
-  function moveActiveResult(delta: 1 | -1, options?: { focusResult?: boolean }) {
-    if (results.length === 0) return;
-    const next = activeResultIndex < 0
-      ? (delta > 0 ? 0 : results.length - 1)
-      : (activeResultIndex + delta + results.length) % results.length;
-    setActiveResultIndex(next);
-    if (options?.focusResult) focusSearchResult(next);
-  }
-
-  function jumpActiveResult(index: number, options?: { focusResult?: boolean }) {
-    if (results.length === 0) return;
-    const next = Math.max(0, Math.min(results.length - 1, index));
-    setActiveResultIndex(next);
-    if (options?.focusResult) focusSearchResult(next);
-  }
-
   function keyboardKey(event: KeyboardEvent, keys: string[]) {
     return keys.includes(event.key) || keys.includes(event.code);
   }
 
-  function handleResultKeyDown(event: KeyboardEvent<HTMLButtonElement>, index: number, result: SearchResult) {
-    if (keyboardKey(event, ['Enter', 'Return', 'Space', ' '])) {
-      event.preventDefault();
-      selectResult(result);
-      return;
-    }
-    if (keyboardKey(event, ['ArrowDown', 'Down'])) {
-      event.preventDefault();
-      moveActiveResult(1, { focusResult: true });
-      return;
-    }
-    if (keyboardKey(event, ['ArrowUp', 'Up'])) {
-      event.preventDefault();
-      moveActiveResult(-1, { focusResult: true });
-      return;
-    }
-    if (keyboardKey(event, ['Home'])) {
-      event.preventDefault();
-      jumpActiveResult(0, { focusResult: true });
-      return;
-    }
-    if (keyboardKey(event, ['End'])) {
-      event.preventDefault();
-      jumpActiveResult(results.length - 1, { focusResult: true });
-      return;
-    }
-    if (keyboardKey(event, ['Escape'])) {
-      event.preventDefault();
-      props.onClose();
-      return;
-    }
-    if (index !== activeResultIndex) {
-      setActiveResultIndex(index);
-    }
-  }
-
   const incognitoBlocked = error?.reason === 'incognito_active';
   const trimmed = query.trim();
   const showResults = !error && trimmed.length > 0 && !pending && results.length > 0;
   const showEmpty = !error && trimmed.length > 0 && !pending && results.length === 0;
-  const activeResultId = showResults && activeResultIndex >= 0 ? `maka-search-modal-result-${activeResultIndex}` : undefined;
   const resultsTruncated = showResults && results.some((result) => result.truncated === true);
 
   return (
@@ -302,139 +237,122 @@ export function SearchModal(props: {
             <X size={16} strokeWidth={1.8} aria-hidden="true" />
           </DialogClose>
         </header>
-        <InputGroup className="maka-search-modal-input-row" aria-label="搜索会话">
-          <InputGroupAddon>
-            <Search size={16} strokeWidth={1.75} aria-hidden="true" className="maka-search-modal-input-icon" />
-          </InputGroupAddon>
-          <InputGroupInput
-            ref={inputRef}
-            type="search"
-            className="maka-search-modal-input"
-            placeholder="搜索会话标题和内容…"
-            aria-label="搜索会话标题和内容"
-            aria-controls={showResults ? 'maka-search-modal-results' : undefined}
-            aria-activedescendant={activeResultId}
-            value={query}
-            onChange={(event) => updateSearchQuery(event.currentTarget.value)}
-            onKeyDown={(event) => {
-              if (keyboardKey(event, ['Escape']) && query) {
-                event.preventDefault();
-                clearSearchQuery();
-                return;
-              }
-              if (keyboardKey(event, ['ArrowDown', 'Down']) && showResults) {
-                event.preventDefault();
-                moveActiveResult(1, { focusResult: true });
-                return;
-              }
-              if (keyboardKey(event, ['ArrowUp', 'Up']) && showResults) {
-                event.preventDefault();
-                moveActiveResult(-1, { focusResult: true });
-                return;
-              }
-              if (keyboardKey(event, ['Home']) && showResults) {
-                event.preventDefault();
-                jumpActiveResult(0, { focusResult: true });
-                return;
-              }
-              if (keyboardKey(event, ['End']) && showResults) {
-                event.preventDefault();
-                jumpActiveResult(results.length - 1, { focusResult: true });
-                return;
-              }
-              if (keyboardKey(event, ['Enter', 'Return']) && showResults) {
-                event.preventDefault();
-                keyboardSelectionHandledRef.current = true;
-                selectKeyboardResult();
-              }
-            }}
-            onKeyUp={(event) => {
-              if (keyboardKey(event, ['Enter', 'Return']) && keyboardSelectionHandledRef.current) {
-                if (showResults) event.preventDefault();
-                keyboardSelectionHandledRef.current = false;
-                return;
-              }
-              if (keyboardKey(event, ['Enter', 'Return']) && showResults) {
-                event.preventDefault();
-                selectKeyboardResult();
-              }
-            }}
-            autoComplete="off"
-            spellCheck={false}
-          />
-          {query.length > 0 && (
-            <InputGroupAddon align="inline-end">
-              <UiButton
-                variant="quiet"
-                size="icon-sm"
-                type="button"
-                className="maka-search-modal-clear"
-                aria-label="清空搜索"
-                onClick={clearSearchQuery}
-              >
-                <X size={14} strokeWidth={1.8} aria-hidden="true" />
-              </UiButton>
+        {/*
+          #520 PR8: Autocomplete owns the listbox/option ARIA + ArrowUp/Down/
+          Enter/Escape keyboard nav (activedescendant mode). `inline` keeps the
+          list in the modal body (no floating popup). `mode="none"` + `filter={null}`
+          preserve server-side IPC filtering — Autocomplete does not re-filter the
+          IPC results locally. `autoHighlight="always"` so Enter on the first result
+          works without an extra ArrowDown.
+        */}
+        <Autocomplete.Root
+          inline
+          mode="none"
+          autoHighlight="always"
+          filter={null}
+          value={query}
+          onValueChange={(next) => updateSearchQuery(next)}
+          items={results}
+        >
+          <InputGroup className="maka-search-modal-input-row" aria-label="搜索会话">
+            <InputGroupAddon>
+              <Search size={16} strokeWidth={1.75} aria-hidden="true" className="maka-search-modal-input-icon" />
             </InputGroupAddon>
-          )}
-        </InputGroup>
-        <div className="maka-search-modal-body" role="region" aria-label="搜索状态和结果" aria-live="polite">
-          {!searchThread && (
-            <p className="maka-search-modal-placeholder">
-              当前环境无法连接搜索后端，请稍后重试。
-            </p>
-          )}
-          {searchThread && incognitoBlocked && (
-            <div className="maka-search-modal-state" data-tone="info">
-              <p>隐私模式已关闭搜索。</p>
-              <p className="maka-search-modal-state-detail">
-                关闭隐私模式后可以继续按关键词查找历史对话。
+            <Autocomplete.Input
+              render={
+                <InputGroupInput
+                  ref={inputRef}
+                  type="search"
+                  className="maka-search-modal-input"
+                  placeholder="搜索会话标题和内容…"
+                  aria-label="搜索会话标题和内容"
+                  autoComplete="off"
+                  spellCheck={false}
+                  onKeyDown={(event) => {
+                    // Escape with a query clears it; Escape without a query
+                    // bubbles to DialogRoot.onOpenChange and closes the modal.
+                    // Autocomplete's own Escape handler only fires when the
+                    // popup is mounted, which the inline list is not, so there
+                    // is no conflict here.
+                    if (keyboardKey(event, ['Escape']) && query) {
+                      event.preventDefault();
+                      clearSearchQuery();
+                    }
+                  }}
+                />
+              }
+            />
+            {query.length > 0 && (
+              <InputGroupAddon align="inline-end">
+                <UiButton
+                  variant="quiet"
+                  size="icon-sm"
+                  type="button"
+                  className="maka-search-modal-clear"
+                  aria-label="清空搜索"
+                  onClick={clearSearchQuery}
+                >
+                  <X size={14} strokeWidth={1.8} aria-hidden="true" />
+                </UiButton>
+              </InputGroupAddon>
+            )}
+          </InputGroup>
+          <div className="maka-search-modal-body" role="region" aria-label="搜索状态和结果" aria-live="polite">
+            {!searchThread && (
+              <p className="maka-search-modal-placeholder">
+                当前环境无法连接搜索后端，请稍后重试。
               </p>
-            </div>
-          )}
-          {searchThread && !incognitoBlocked && error && (
-            <div className="maka-search-modal-state" data-tone="warning">
-              <p>搜索暂时无法完成。</p>
-              <p className="maka-search-modal-state-detail">{error.message}</p>
-            </div>
-          )}
-          {searchThread && !error && trimmed.length === 0 && (
-            <p className="maka-search-modal-placeholder">
-              开始输入以按关键词查找历史对话。结果只包含会话标题和内容文本，不进入网络。
-            </p>
-          )}
-          {searchThread && pending && trimmed.length > 0 && (
-            <p className="maka-search-modal-placeholder" aria-live="polite">
-              正在搜索…
-            </p>
-          )}
-          {showEmpty && (
-            <p className="maka-search-modal-placeholder">
-              没有匹配的会话标题或内容。换个关键词试试。
-            </p>
-          )}
-          {showResults && (
-            <>
-              <div className="maka-search-modal-result-summary" aria-live="polite">
-                <span>找到 {results.length} 条匹配</span>
-                {resultsTruncated && <span>结果较多，已显示前 {results.length} 条</span>}
+            )}
+            {searchThread && incognitoBlocked && (
+              <div className="maka-search-modal-state" data-tone="info">
+                <p>隐私模式已关闭搜索。</p>
+                <p className="maka-search-modal-state-detail">
+                  关闭隐私模式后可以继续按关键词查找历史对话。
+                </p>
               </div>
-              <ul id="maka-search-modal-results" className="maka-search-modal-results" role="listbox" aria-label="搜索结果">
-                {results.map((result, index) => (
-                  <li key={`${result.target?.kind === 'thread' ? result.target.sessionId : index}-${index}`}>
-                    <UiButton
-                      variant="ghost"
-                      ref={(node) => { resultRefs.current[index] = node as HTMLButtonElement | null; }}
-                      id={`maka-search-modal-result-${index}`}
-                      type="button"
-                      role="option"
-                      aria-selected={activeResultIndex === index}
-                      tabIndex={-1}
-                      className="maka-search-modal-result"
-                      data-active={activeResultIndex === index ? 'true' : undefined}
+            )}
+            {searchThread && !incognitoBlocked && error && (
+              <div className="maka-search-modal-state" data-tone="warning">
+                <p>搜索暂时无法完成。</p>
+                <p className="maka-search-modal-state-detail">{error.message}</p>
+              </div>
+            )}
+            {searchThread && !error && trimmed.length === 0 && (
+              <p className="maka-search-modal-placeholder">
+                开始输入以按关键词查找历史对话。结果只包含会话标题和内容文本，不进入网络。
+              </p>
+            )}
+            {searchThread && pending && trimmed.length > 0 && (
+              <p className="maka-search-modal-placeholder" aria-live="polite">
+                正在搜索…
+              </p>
+            )}
+            {showEmpty && (
+              <p className="maka-search-modal-placeholder">
+                没有匹配的会话标题或内容。换个关键词试试。
+              </p>
+            )}
+            {showResults && (
+              <>
+                <div className="maka-search-modal-result-summary" aria-live="polite">
+                  <span>找到 {results.length} 条匹配</span>
+                  {resultsTruncated && <span>结果较多，已显示前 {results.length} 条</span>}
+                </div>
+                {/*
+                  Autocomplete.List renders a <div role="listbox">; Autocomplete.Item
+                  renders a <div role="option">. Autocomplete.Item fires onClick for
+                  both pointer click and Enter on the highlighted item, so selectResult
+                  covers both paths. aria-activedescendant on the input is managed by
+                  Autocomplete — no manual wiring.
+                */}
+                <Autocomplete.List className="maka-search-modal-results" aria-label="搜索结果">
+                  {results.map((result, index) => (
+                    <Autocomplete.Item
+                      key={`${result.target?.kind === 'thread' ? result.target.sessionId : index}-${index}`}
+                      value={result}
+                      index={index}
                       onClick={() => selectResult(result)}
-                      onKeyDown={(event) => handleResultKeyDown(event, index, result)}
-                      onFocus={() => setActiveResultIndex(index)}
-                      onMouseEnter={() => setActiveResultIndex(index)}
+                      className="maka-search-modal-result"
                       disabled={!props.onNavigateToSession || result.target?.kind !== 'thread'}
                     >
                       <div className="maka-search-modal-result-title">{result.title}</div>
@@ -446,13 +364,13 @@ export function SearchModal(props: {
                         // per kenji SEARCH gate (no path / no URL exposure).
                         <div className="maka-search-modal-result-snippet">{renderSearchSnippet(result.snippet, trimmed)}</div>
                       )}
-                    </UiButton>
-                  </li>
-                ))}
-              </ul>
-            </>
-          )}
-        </div>
+                    </Autocomplete.Item>
+                  ))}
+                </Autocomplete.List>
+              </>
+            )}
+          </div>
+        </Autocomplete.Root>
       </DialogContent>
     </DialogRoot>
   );
@@ -481,4 +399,4 @@ function renderSearchSnippet(snippet: string, query: string): ReactNode {
   }
   if (cursor < snippet.length) parts.push(snippet.slice(cursor));
   return parts.length > 0 ? parts : snippet;
-}
+}
\ No newline at end of file

From 63e93427f8ae22d7e6e2eef344cb1a4789fbddcb Mon Sep 17 00:00:00 2001
From: AstroHan <lei.yuhan@outlook.com>
Date: Mon, 6 Jul 2026 15:41:55 +0800
Subject: [PATCH 2/5] feat(ui): migrate CommandPalette to Base UI Autocomplete
 (#520 PR8)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CommandPalette's hand-rolled activedescendant result list (highlight
state + onInputKeyDown + reset useEffect + <div role=listbox> +
<Button role=option data-active>) is replaced by Base UI Autocomplete:

- Autocomplete.Root inline + mode="none" + autoHighlight="always" +
  filter={null}: the list renders inline in the modal body, Autocomplete
  does not re-filter the palette's own fuzzy + content-search combined
  list, and the first command is always highlighted so Enter works
  without an extra ArrowDown.
- Autocomplete.Input renders the input via the shared InputGroupInput
  primitive (render prop); ArrowUp/Down/Enter/Escape keyboard nav is
  owned by Autocomplete. aria-controls + aria-activedescendant are
  managed by Autocomplete — no manual wiring.
- Autocomplete.List + Autocomplete.Group + Autocomplete.GroupLabel +
  Autocomplete.Item replace the hand-rolled <div role=listbox> +
  <div group> + <Button role=option>. Autocomplete.Item fires onClick
  for both pointer click and Enter on the highlighted item, so commit()
  covers both paths.
- The CornerDownLeft cursor hint is now CSS-driven
  (.maka-palette-cursor visibility via [data-highlighted]) instead of
  the JS `!cmd.hint \&\& active` conditional, since the hand-rolled
  highlight state is gone.

commit() (commitPendingRef + committedCommandId + await run + finally
close), the fuzzy filter, useThreadSearch content-search, grouped
rendering, and all copy/states are unchanged.

The kbd-nav interaction stays activedescendant (input keeps focus,
active item reflected via aria-activedescendant) — same mode as before,
now owned by Autocomplete. Home/End now move the input cursor (Base UI
ComboboxInput default); jump-to-first/last command is not bound for now
(to be confirmed by manual testing per PR8 plan).

Contracts: command-palette-a11y-copy-contract #1 (listbox) rewritten to
lock the Autocomplete shape; #2 import regex drops Button (no longer
used); #3 CSS data-active -> data-highlighted; #6 commit-gate block
boundary is commit() (onInputKeyDown gone); #7 highlight reset is now
autoHighlight="always" (no hand-rolled state). renderer-utility-primitives
row assert repoints <Button role=option> -> <Autocomplete.Item>. CSS
.maka-palette-item[data-active] -> [data-highlighted] + .maka-palette-cursor.

Verification: typecheck clean, @maka/desktop 2076/2076, @maka/ui 43/43,
command-palette-open screenshot AE=7250 (fuzz 5%, RMSE 0.0017) vs main.
---
 ...command-palette-a11y-copy-contract.test.ts |  56 +++--
 ...nderer-utility-primitives-contract.test.ts |   5 +-
 apps/desktop/src/renderer/command-palette.tsx | 226 ++++++++----------
 .../src/renderer/styles/chat-header.css       |  17 +-
 4 files changed, 159 insertions(+), 145 deletions(-)

diff --git a/apps/desktop/src/main/__tests__/command-palette-a11y-copy-contract.test.ts b/apps/desktop/src/main/__tests__/command-palette-a11y-copy-contract.test.ts
index 6d11c60aeb..a0cb5a3757 100644
--- a/apps/desktop/src/main/__tests__/command-palette-a11y-copy-contract.test.ts
+++ b/apps/desktop/src/main/__tests__/command-palette-a11y-copy-contract.test.ts
@@ -14,17 +14,33 @@ async function readRepo(path: string): Promise<string> {
 }
 
 describe('Command palette accessibility and visible copy', () => {
-  it('names the command results listbox controlled by the search input', async () => {
+  it('uses Base UI Autocomplete for the command results listbox (#520 PR8)', async () => {
     const src = await readRepo('apps/desktop/src/renderer/command-palette.tsx');
     assert.match(
       src,
-      /aria-controls="maka-palette-list"/,
-      'palette input must keep its aria-controls link to the results list',
+      /import \{ Autocomplete \} from '@base-ui\/react\/autocomplete'/,
+      'CommandPalette must consume Base UI Autocomplete for the result list',
     );
     assert.match(
       src,
-      /<div className="maka-palette-list" id="maka-palette-list" role="listbox" aria-label="命令面板结果">/,
-      'palette results listbox must expose a name in the accessibility tree',
+      /<Autocomplete\.Root[\s\S]*?inline[\s\S]*?mode="none"[\s\S]*?autoHighlight="always"[\s\S]*?filter=\{null\}/,
+      'Autocomplete.Root must render inline, use mode="none" (palette owns fuzzy + content-search filtering), and autoHighlight="always"',
+    );
+    assert.match(src, /<Autocomplete\.Input/, 'Palette input must be Autocomplete.Input');
+    assert.match(
+      src,
+      /<Autocomplete\.List className="maka-palette-list" id="maka-palette-list" aria-label="命令面板结果">/,
+      'Palette results must render as Autocomplete.List (listbox) with an accessible name',
+    );
+    assert.match(
+      src,
+      /<Autocomplete\.Group[\s\S]*?<Autocomplete\.GroupLabel className="maka-palette-group-label">/,
+      'Palette groups must render as Autocomplete.Group + GroupLabel',
+    );
+    assert.match(
+      src,
+      /<Autocomplete\.Item[\s\S]*?onClick=\{\(\) => commit\(cmd\)\}/,
+      'Each command must be Autocomplete.Item with onClick firing commit (pointer click or Enter on highlighted)',
     );
   });
 
@@ -35,7 +51,7 @@ describe('Command palette accessibility and visible copy', () => {
 
     assert.match(
       src,
-      /import \{[^}]*\bButton\b[^}]*\bDialogContent\b[^}]*\bDialogRoot\b[^}]*\bInputGroup\b[^}]*\bInputGroupAddon\b[^}]*\bInputGroupInput\b[^}]*\bKbd\b[^}]*\bKbdGroup\b[^}]*\} from '@maka\/ui';/,
+      /import \{[^}]*\bDialogContent\b[^}]*\bDialogRoot\b[^}]*\bInputGroup\b[^}]*\bInputGroupAddon\b[^}]*\bInputGroupInput\b[^}]*\bKbd\b[^}]*\bKbdGroup\b[^}]*\} from '@maka\/ui';/,
       'CommandPalette must consume shared primitive InputGroup + Dialog primitives from @maka/ui',
     );
     assert.match(
@@ -96,7 +112,7 @@ describe('Command palette accessibility and visible copy', () => {
     assert.match(styles, /\.maka-palette-item\[data-pending="true"\]\s*\{[\s\S]*cursor:\s*progress;/);
     assert.match(
       styles,
-      /\.maka-palette-item\[data-active="true"\]\s*\{[\s\S]*background:\s*var\(--state-selected-bg\)/,
+      /\.maka-palette-item\[data-highlighted\]\s*\{[\s\S]*background:\s*var\(--state-selected-bg\)/,
       'Palette active row uses the neutral state-selected token, not a brand rail',
     );
     assert.match(styles, /\.maka-palette-icon\s*\{[\s\S]*width:\s*18px;[\s\S]*height:\s*18px;/);
@@ -127,9 +143,11 @@ describe('Command palette accessibility and visible copy', () => {
     const src = await readRepo('apps/desktop/src/renderer/command-palette.tsx');
     const mainSrc = await readRendererShellCombinedSource();
     const commandTypes = await readRepo('apps/desktop/src/renderer/command-palette-types.ts');
-    const commandPaletteBlock = src.match(/export function CommandPalette[\s\S]*?function onInputKeyDown/)?.[0] ?? '';
+    // #520 PR8: onInputKeyDown is gone (Autocomplete owns ArrowUp/Down/Enter),
+    // so the block boundary is the commit() helper now.
+    const commandPaletteBlock = src.match(/export function CommandPalette[\s\S]*?function commit/)?.[0] ?? '';
     const commitBlock = src.match(/function commit\(cmd: Command \| undefined\) \{[\s\S]*?\n  \}/)?.[0] ?? '';
-    const rowBlock = src.match(/const commandCommitPending = committedCommandId === cmd\.id;[\s\S]*?onClick=\{\(\) => commit\(cmd\)\}/)?.[0] ?? '';
+    const rowBlock = src.match(/const commandCommitPending = committedCommandId === cmd\.id;[\s\S]*?data-pending=\{commandCommitPending \? 'true' : undefined\}/)?.[0] ?? '';
 
     assert.match(commandTypes, /run\(\): void \| Promise<void>/, 'command actions may be async and must be awaited by commit()');
     assert.match(commandPaletteBlock, /const commitPendingRef = useRef\(false\)/);
@@ -153,19 +171,21 @@ describe('Command palette accessibility and visible copy', () => {
     assert.match(rowBlock, /data-pending=\{commandCommitPending \? 'true' : undefined\}/);
   });
 
-  it('resets active command to the first result when the result set changes', async () => {
+  it('resets active command to the first result when the result set changes (#520 PR8)', async () => {
     const src = await readRepo('apps/desktop/src/renderer/command-palette.tsx');
-    const highlightEffect = src.match(/useEffect\(\(\) => \{[\s\S]*?Reset highlight whenever the result set changes\.[\s\S]*?\}, \[combined\]\);/)?.[0] ?? '';
-
+    // #520 PR8: Autocomplete's autoHighlight="always" owns highlight reset —
+    // the first item is always highlighted, so Enter on a fresh result set
+    // always activates the top command. The old hand-rolled highlight state +
+    // useEffect reset is gone.
     assert.match(
-      highlightEffect,
-      /setHighlight\(0\);/,
-      'CommandPalette must reset highlight to the first new result after filtering/search results change',
+      src,
+      /autoHighlight="always"/,
+      'Autocomplete.Root must use autoHighlight="always" so the first command is always highlighted and Enter works without an extra ArrowDown',
     );
     assert.doesNotMatch(
-      highlightEffect,
-      /Math\.min\(current,\s*Math\.max\(0,\s*combined\.length - 1\)\)/,
-      'CommandPalette must not preserve a stale lower-row highlight across a new result set',
+      src,
+      /\[highlight, setHighlight\]/,
+      'CommandPalette must not keep a hand-rolled highlight state — Autocomplete owns it',
     );
   });
 
diff --git a/apps/desktop/src/main/__tests__/renderer-utility-primitives-contract.test.ts b/apps/desktop/src/main/__tests__/renderer-utility-primitives-contract.test.ts
index e7f228971a..11354aba22 100644
--- a/apps/desktop/src/main/__tests__/renderer-utility-primitives-contract.test.ts
+++ b/apps/desktop/src/main/__tests__/renderer-utility-primitives-contract.test.ts
@@ -118,14 +118,15 @@ describe('renderer utility surfaces use shared UI primitives', () => {
   it('keeps command palette search and rows on shared primitives', async () => {
     const source = await readFile(join(process.cwd(), 'src/renderer/command-palette.tsx'), 'utf8');
 
-    assert.match(source, /import \{[^}]*\bButton\b[^}]*\bDialogContent\b[^}]*\bDialogRoot\b[^}]*\bInputGroup\b[^}]*\bInputGroupAddon\b[^}]*\bInputGroupInput\b[^}]*\bKbd\b[^}]*\bKbdGroup\b[^}]*\} from '@maka\/ui';/);
+    assert.match(source, /import \{[^}]*\bDialogContent\b[^}]*\bDialogRoot\b[^}]*\bInputGroup\b[^}]*\bInputGroupAddon\b[^}]*\bInputGroupInput\b[^}]*\bKbd\b[^}]*\bKbdGroup\b[^}]*\} from '@maka\/ui';/);
+    assert.match(source, /import \{ Autocomplete \} from '@base-ui\/react\/autocomplete'/, 'CommandPalette must consume Base UI Autocomplete for the result list (#520 PR8)');
     assert.doesNotMatch(source, /<input\b/, 'Command palette search must use shared Input');
     assert.doesNotMatch(source, /<button\b/, 'Command palette rows must use shared Button');
     assert.doesNotMatch(source, /<kbd\b/, 'Command palette shortcut glyphs must use shared primitive Kbd');
     assert.match(source, /<InputGroup[\s\S]*className="maka-palette-input-wrap"[\s\S]*aria-label="命令面板搜索"[\s\S]*onMouseDown=\{\(event\) => \{/);
     assert.match(source, /<InputGroupInput[\s\S]*className="maka-palette-input"/);
     assert.match(source, /<InputGroupAddon align="inline-end" className="maka-palette-input-hint-addon">/);
-    assert.match(source, /<Button[\s\S]*role="option"[\s\S]*className="maka-palette-item"/);
+    assert.match(source, /<Autocomplete.Item[\s\S]*className="maka-palette-item"/, 'Command palette rows must be Autocomplete.Item (#520 PR8)');
     assert.match(source, /<KbdGroup className="maka-shortcut-group">[\s\S]*<Kbd className="maka-shortcut-kbd">↑<\/Kbd>[\s\S]*<Kbd className="maka-shortcut-kbd">↓<\/Kbd>/);
   });
 
diff --git a/apps/desktop/src/renderer/command-palette.tsx b/apps/desktop/src/renderer/command-palette.tsx
index 6bda557d5f..aba91fe396 100644
--- a/apps/desktop/src/renderer/command-palette.tsx
+++ b/apps/desktop/src/renderer/command-palette.tsx
@@ -6,7 +6,7 @@
 // Arrow/Enter/Esc navigation is local to the input, focus trap + restore +
 // Esc-dismiss come from DialogRoot/DialogContent (#520 PR7).
 
-import { useDeferredValue, useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react';
+import { useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
 import {
   CalendarDays,
   ChevronRight,
@@ -33,7 +33,6 @@ import {
 import type { LlmConnection, PermissionMode, SessionSummary, SettingsSection, ThemePreference } from '@maka/core';
 import type { NavSelection } from '@maka/ui';
 import {
-  Button,
   DialogContent,
   DialogRoot,
   Empty,
@@ -47,6 +46,7 @@ import {
   Kbd,
   KbdGroup,
 } from '@maka/ui';
+import { Autocomplete } from '@base-ui/react/autocomplete';
 import { SETTINGS_NAV } from './settings/settings-nav';
 import { useThreadSearch } from './use-thread-search';
 import { buildContentSearchCommands } from './command-palette-content-search';
@@ -587,7 +587,6 @@ export function CommandPalette(props: {
   const inputRef = useRef<HTMLInputElement>(null);
   const commitPendingRef = useRef(false);
   const [query, setQuery] = useState('');
-  const [highlight, setHighlight] = useState(0);
   const [committedCommandId, setCommittedCommandId] = useState<string | null>(null);
 
   // Focus + select the search input as soon as the dialog mounts.
@@ -633,11 +632,6 @@ export function CommandPalette(props: {
   // memory for cmd-K + first-letter navigation.
   const combined = useMemo(() => [...filtered, ...contentCommands], [filtered, contentCommands]);
 
-  useEffect(() => {
-    // Reset highlight whenever the result set changes.
-    setHighlight(0);
-  }, [combined]);
-
   const grouped = useMemo(() => groupCommands(combined), [combined]);
 
   function commit(cmd: Command | undefined) {
@@ -659,34 +653,6 @@ export function CommandPalette(props: {
     })().catch(() => undefined);
   }
 
-  function onInputKeyDown(event: KeyboardEvent<HTMLInputElement>) {
-    if (event.nativeEvent.isComposing || event.key === 'Process') return;
-    if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      setHighlight((current) => (combined.length === 0 ? 0 : Math.min(combined.length - 1, current + 1)));
-      return;
-    }
-    if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      setHighlight((current) => Math.max(0, current - 1));
-      return;
-    }
-    if (event.key === 'Home') {
-      event.preventDefault();
-      setHighlight(0);
-      return;
-    }
-    if (event.key === 'End') {
-      event.preventDefault();
-      setHighlight(combined.length === 0 ? 0 : combined.length - 1);
-      return;
-    }
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      commit(combined[highlight]);
-    }
-  }
-
   return (
     <DialogRoot
       open
@@ -699,98 +665,112 @@ export function CommandPalette(props: {
         aria-label="命令面板"
         initialFocus={inputRef}
       >
-        <InputGroup
-          className="maka-palette-input-wrap"
-          aria-label="命令面板搜索"
-          onMouseDown={(event) => {
-            const target = event.target as HTMLElement;
-            if (target.closest('input')) return;
-            event.preventDefault();
-            inputRef.current?.focus();
-          }}
+        {/*
+          #520 PR8: Autocomplete owns the listbox/option ARIA + ArrowUp/Down/
+          Enter/Escape keyboard nav (activedescendant mode). `inline` keeps the
+          list in the modal body. `mode="none"` + `filter={null}` preserve the
+          palette's own fuzzy + content-search filtering — Autocomplete does not
+          re-filter the combined list locally. `autoHighlight="always"` so Enter
+          on the first command works without an extra ArrowDown.
+        */}
+        <Autocomplete.Root
+          inline
+          mode="none"
+          autoHighlight="always"
+          filter={null}
+          value={query}
+          onValueChange={setQuery}
+          items={combined}
         >
-          <InputGroupInput
-            ref={inputRef}
-            className="maka-palette-input"
-            type="text"
-            value={query}
-            placeholder="搜索命令、设置项或会话…"
-            aria-label="搜索命令、设置项或会话"
-            onChange={(event) => setQuery(event.currentTarget.value)}
-            onKeyDown={onInputKeyDown}
-            autoComplete="off"
-            spellCheck={false}
-            aria-controls="maka-palette-list"
-            aria-activedescendant={combined[highlight] ? `cmd-${combined[highlight]!.id}` : undefined}
-          />
-          <InputGroupAddon align="inline-end" className="maka-palette-input-hint-addon">
-            <span className="maka-palette-input-hint" aria-hidden="true">
-              <Kbd className="maka-shortcut-kbd">↵</Kbd>
-              <span>执行</span>
-              <Kbd className="maka-shortcut-kbd">Esc</Kbd>
-              <span>关闭</span>
-            </span>
-          </InputGroupAddon>
-        </InputGroup>
-        <div className="maka-palette-list" id="maka-palette-list" role="listbox" aria-label="命令面板结果">
+          <InputGroup
+            className="maka-palette-input-wrap"
+            aria-label="命令面板搜索"
+            onMouseDown={(event) => {
+              const target = event.target as HTMLElement;
+              if (target.closest('input')) return;
+              event.preventDefault();
+              inputRef.current?.focus();
+            }}
+          >
+            <Autocomplete.Input
+              render={
+                <InputGroupInput
+                  ref={inputRef}
+                  className="maka-palette-input"
+                  type="text"
+                  placeholder="搜索命令、设置项或会话…"
+                  aria-label="搜索命令、设置项或会话"
+                  autoComplete="off"
+                  spellCheck={false}
+                />
+              }
+            />
+            <InputGroupAddon align="inline-end" className="maka-palette-input-hint-addon">
+              <span className="maka-palette-input-hint" aria-hidden="true">
+                <Kbd className="maka-shortcut-kbd">↵</Kbd>
+                <span>执行</span>
+                <Kbd className="maka-shortcut-kbd">Esc</Kbd>
+                <span>关闭</span>
+              </span>
+            </InputGroupAddon>
+          </InputGroup>
           {grouped.length === 0 ? (
-            <Empty className="maka-palette-empty py-8 md:py-10 gap-3">
-              <EmptyHeader>
-                <EmptyMedia variant="icon">
-                  <Search aria-hidden="true" />
-                </EmptyMedia>
-                <EmptyTitle>没有匹配的命令</EmptyTitle>
-                <EmptyDescription>换个关键词，或按 Esc 关闭。</EmptyDescription>
-              </EmptyHeader>
-            </Empty>
+            <div className="maka-palette-list" id="maka-palette-list">
+              <Empty className="maka-palette-empty py-8 md:py-10 gap-3">
+                <EmptyHeader>
+                  <EmptyMedia variant="icon">
+                    <Search aria-hidden="true" />
+                  </EmptyMedia>
+                  <EmptyTitle>没有匹配的命令</EmptyTitle>
+                  <EmptyDescription>换个关键词，或按 Esc 关闭。</EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            </div>
           ) : (
-            grouped.map((group) => (
-              <div key={group.label} className="maka-palette-group">
-                <div className="maka-palette-group-label">{group.label}</div>
-                {group.items.map((entry) => {
-                  const index = entry.index;
-                  const cmd = entry.command;
-                  const active = index === highlight;
-                  const commandCommitPending = committedCommandId === cmd.id;
-                  return (
-                    <Button
-                      key={cmd.id}
-                      id={`cmd-${cmd.id}`}
-                      type="button"
-                      variant="ghost"
-                      role="option"
-                      aria-selected={active}
-                      aria-disabled={cmd.disabled ? true : undefined}
-                      aria-busy={commandCommitPending ? 'true' : undefined}
-                      data-active={active}
-                      data-disabled={cmd.disabled ? true : undefined}
-                      data-pending={commandCommitPending ? 'true' : undefined}
-                      className="maka-palette-item"
-                      onMouseEnter={() => setHighlight(index)}
-                      onClick={() => commit(cmd)}
-                    >
-                      <span className="maka-palette-icon" aria-hidden="true">
-                        <cmd.Icon size={15} strokeWidth={1.5} />
-                      </span>
-                      <span className="maka-palette-label">{cmd.label}</span>
-                      {cmd.hint && (
-                        <span className="maka-palette-hint">
-                          {cmd.hint}
-                          <ChevronRight size={12} strokeWidth={1.75} aria-hidden="true" />
+            <Autocomplete.List className="maka-palette-list" id="maka-palette-list" aria-label="命令面板结果">
+              {grouped.map((group) => (
+                <Autocomplete.Group key={group.label} className="maka-palette-group">
+                  <Autocomplete.GroupLabel className="maka-palette-group-label">
+                    {group.label}
+                  </Autocomplete.GroupLabel>
+                  {group.items.map((entry) => {
+                    const cmd = entry.command;
+                    const commandCommitPending = committedCommandId === cmd.id;
+                    return (
+                      <Autocomplete.Item
+                        key={cmd.id}
+                        value={cmd}
+                        index={entry.index}
+                        onClick={() => commit(cmd)}
+                        disabled={cmd.disabled}
+                        aria-busy={commandCommitPending ? 'true' : undefined}
+                        data-disabled={cmd.disabled ? 'true' : undefined}
+                        data-pending={commandCommitPending ? 'true' : undefined}
+                        className="maka-palette-item"
+                      >
+                        <span className="maka-palette-icon" aria-hidden="true">
+                          <cmd.Icon size={15} strokeWidth={1.5} />
                         </span>
-                      )}
-                      {!cmd.hint && active && (
-                        <span className="maka-palette-hint" aria-hidden="true">
-                          <CornerDownLeft size={12} strokeWidth={1.75} />
-                        </span>
-                      )}
-                    </Button>
-                  );
-                })}
-              </div>
-            ))
+                        <span className="maka-palette-label">{cmd.label}</span>
+                        {cmd.hint && (
+                          <span className="maka-palette-hint">
+                            {cmd.hint}
+                            <ChevronRight size={12} strokeWidth={1.75} aria-hidden="true" />
+                          </span>
+                        )}
+                        {!cmd.hint && (
+                          <span className="maka-palette-hint maka-palette-cursor" aria-hidden="true">
+                            <CornerDownLeft size={12} strokeWidth={1.75} />
+                          </span>
+                        )}
+                      </Autocomplete.Item>
+                    );
+                  })}
+                </Autocomplete.Group>
+              ))}
+            </Autocomplete.List>
           )}
-        </div>
+        </Autocomplete.Root>
         <div className="maka-palette-footer">
           <span>
             <KbdGroup className="maka-shortcut-group">
diff --git a/apps/desktop/src/renderer/styles/chat-header.css b/apps/desktop/src/renderer/styles/chat-header.css
index 8b1c1e640f..6408839777 100644
--- a/apps/desktop/src/renderer/styles/chat-header.css
+++ b/apps/desktop/src/renderer/styles/chat-header.css
@@ -845,7 +845,10 @@
   background: var(--state-hover-bg);
 }
 
-.maka-palette-item[data-active="true"] {
+/* #520 PR8: Autocomplete.Item exposes the active (highlighted) item via
+   data-highlighted (activedescendant mode — the input keeps focus, so the
+   item itself is no longer :focus-visible). */
+.maka-palette-item[data-highlighted] {
   background: var(--state-selected-bg);
   color: var(--foreground);
 }
@@ -881,11 +884,21 @@
     color var(--duration-base) var(--ease-out-strong);
 }
 
-.maka-palette-item[data-active="true"] .maka-palette-icon {
+.maka-palette-item[data-highlighted] .maka-palette-icon {
   background: var(--state-selected-bg);
   color: var(--foreground);
 }
 
+/* #520 PR8: the CornerDownLeft cursor hint shows only on the highlighted
+   item (was `!cmd.hint && active` in JS; now CSS-driven via data-highlighted
+   so we don't need a hand-rolled highlight state). */
+.maka-palette-cursor {
+  visibility: hidden;
+}
+.maka-palette-item[data-highlighted] .maka-palette-cursor {
+  visibility: visible;
+}
+
 .maka-palette-label {
   overflow: hidden;
   text-overflow: ellipsis;

From aec3258ff072b6aab3e66f22ed9d3606db54d899 Mon Sep 17 00:00:00 2001
From: AstroHan <lei.yuhan@outlook.com>
Date: Mon, 6 Jul 2026 18:39:57 +0800
Subject: [PATCH 3/5] fix(ui): Autocomplete inline open + item-press guard
 (#562 review)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

P1 (blocker): both Autocomplete.Root used `inline` without `open`. Per
Base UI docs, `inline` requires `open` so the list is treated as visible:
"Specify open unconditionally in conjunction with this prop so the list is
considered visible: <Autocomplete.Root inline open>". Without `open`,
defaultOpen=false -> the input is not data-popup-open and keyboard nav /
activedescendant do not work. Add `open` to SearchModal + CommandPalette.

P2-a: object items (<Autocomplete.Item value={result/cmd}>) had no
itemToStringValue, and onValueChange did not filter item-press. Add
itemToStringValue (result.title / cmd.label) so item-press never writes
[object Object] into the query, and skip onValueChange when
details.reason === 'item-press'. In inline mode selectionMode='none' + no
Popup means shouldFillInput is currently false (popupRef.current null), so
this is defensive — but correct regardless of future Popup changes.

P2-b: contract tests now lock open + itemToStringValue + onValueChange
item-press-filter on Autocomplete.Root (catches P1/P2-a regressions), plus
the existing inline/mode/autoHighlight/List/Item shape.

Verified via CDP probe (command-palette-open fixture): input has
data-popup-open + aria-controls + aria-activedescendant; first item
data-highlighted (autoHighlight); ArrowDown 0->1->2, ArrowUp 2->1.
typecheck clean, @maka/ui 43/43, @maka/desktop 2076/2076.
command-palette-open AE=48000 (RMSE 0.011) vs main — larger than pre-fix
AE=7250 because open now correctly renders the first-item highlight bg +
input data-popup-open state (the bug state hid these). search-modal-open
AE=2655 (RMSE 0.0006, unchanged).
---
 .../command-palette-a11y-copy-contract.test.ts     | 14 ++++++++++++--
 .../search-modal-lifecycle-contract.test.ts        | 11 ++++++++---
 apps/desktop/src/renderer/command-palette.tsx      |  9 ++++++++-
 packages/ui/src/search-modal.tsx                   |  9 ++++++++-
 4 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/apps/desktop/src/main/__tests__/command-palette-a11y-copy-contract.test.ts b/apps/desktop/src/main/__tests__/command-palette-a11y-copy-contract.test.ts
index a0cb5a3757..6c4b5c7ab5 100644
--- a/apps/desktop/src/main/__tests__/command-palette-a11y-copy-contract.test.ts
+++ b/apps/desktop/src/main/__tests__/command-palette-a11y-copy-contract.test.ts
@@ -23,8 +23,18 @@ describe('Command palette accessibility and visible copy', () => {
     );
     assert.match(
       src,
-      /<Autocomplete\.Root[\s\S]*?inline[\s\S]*?mode="none"[\s\S]*?autoHighlight="always"[\s\S]*?filter=\{null\}/,
-      'Autocomplete.Root must render inline, use mode="none" (palette owns fuzzy + content-search filtering), and autoHighlight="always"',
+      /<Autocomplete\.Root[\s\S]*?inline[\s\S]*?\bopen\b[\s\S]*?mode="none"[\s\S]*?autoHighlight="always"[\s\S]*?filter=\{null\}/,
+      'Autocomplete.Root must render `inline open` — per Base UI docs, `inline` requires `open` so the list is treated as visible; without `open` the input is not aria-expanded and keyboard nav / activedescendant break. mode="none" (palette owns fuzzy + content-search filtering) + autoHighlight="always"',
+    );
+    assert.match(
+      src,
+      /<Autocomplete\.Root[\s\S]*?itemToStringValue=\{\(cmd\) => cmd\.label\}/,
+      'Autocomplete.Root must serialize object commands via itemToStringValue — without it, item-press can write [object Object] back into the query',
+    );
+    assert.match(
+      src,
+      /onValueChange=\{\(next, details\) => \{[\s\S]*?details\.reason === 'item-press'[\s\S]*?setQuery\(next\)/,
+      'Autocomplete value changes must skip item-press reasons (selection must not write the command object back into the query)',
     );
     assert.match(src, /<Autocomplete\.Input/, 'Palette input must be Autocomplete.Input');
     assert.match(
diff --git a/apps/desktop/src/main/__tests__/search-modal-lifecycle-contract.test.ts b/apps/desktop/src/main/__tests__/search-modal-lifecycle-contract.test.ts
index 1b33442aa8..6879eff1e2 100644
--- a/apps/desktop/src/main/__tests__/search-modal-lifecycle-contract.test.ts
+++ b/apps/desktop/src/main/__tests__/search-modal-lifecycle-contract.test.ts
@@ -242,8 +242,13 @@ describe('SearchModal lifecycle contract (PR-SIDEBAR-IA-0 Phase 3 P0 fixup)', ()
     );
     assert.match(
       searchModal,
-      /<Autocomplete\.Root[\s\S]*?inline[\s\S]*?mode="none"[\s\S]*?autoHighlight="always"[\s\S]*?filter=\{null\}/,
-      'Autocomplete.Root must render inline (list stays in modal body, not a floating popup), use mode="none" (server-side IPC filtering, no local filter), and autoHighlight="always" so Enter on the first result works without an extra ArrowDown',
+      /<Autocomplete\.Root[\s\S]*?inline[\s\S]*?\bopen\b[\s\S]*?mode="none"[\s\S]*?autoHighlight="always"[\s\S]*?filter=\{null\}/,
+      'Autocomplete.Root must render `inline open` — per Base UI docs, `inline` requires `open` so the list is treated as visible; without `open` the input is not aria-expanded and keyboard nav / activedescendant break. mode="none" (server-side IPC filtering, no local filter) + autoHighlight="always" so Enter on the first result works without an extra ArrowDown',
+    );
+    assert.match(
+      searchModal,
+      /<Autocomplete\.Root[\s\S]*?itemToStringValue=\{\(result\) => result\.title/,
+      'Autocomplete.Root must serialize object results via itemToStringValue — without it, item-press can write [object Object] back into the query',
     );
     assert.match(searchModal, /<Autocomplete\.Input/, 'Search input must be Autocomplete.Input');
     assert.match(searchModal, /<Autocomplete\.List/, 'Results must render as Autocomplete.List (listbox)');
@@ -343,7 +348,7 @@ describe('SearchModal lifecycle contract (PR-SIDEBAR-IA-0 Phase 3 P0 fixup)', ()
 
     assert.match(searchModal, /function clearSearchState\(\) \{\s*ticketRef\.current \+= 1;\s*setResults\(\[\]\);/m, 'Shared clear state helper must invalidate in-flight search before clearing results');
     assert.match(searchModal, /function updateSearchQuery\(nextQuery: string\) \{[\s\S]*if \(nextQuery\.trim\(\)\.length === 0\) \{[\s\S]*clearSearchState\(\);[\s\S]*\}/, 'Typing/deleting to an empty query must synchronously invalidate in-flight search');
-    assert.match(searchModal, /onValueChange=\{\(next\) => updateSearchQuery\(next\)\}/, 'Autocomplete value changes must go through the synchronized update helper');
+    assert.match(searchModal, /onValueChange=\{\(next, details\) => \{[\s\S]*?details\.reason === 'item-press'[\s\S]*?updateSearchQuery\(next\)/, 'Autocomplete value changes must go through the synchronized update helper AND skip item-press reasons (selection must not write the result object back into the query)');
     assert.match(searchModal, /keyboardKey\(event, \['Escape'\]\) && query[\s\S]*clearSearchQuery\(\);/, 'Escape clear path must synchronously invalidate in-flight search');
     assert.match(
       searchModal,
diff --git a/apps/desktop/src/renderer/command-palette.tsx b/apps/desktop/src/renderer/command-palette.tsx
index aba91fe396..76139e706e 100644
--- a/apps/desktop/src/renderer/command-palette.tsx
+++ b/apps/desktop/src/renderer/command-palette.tsx
@@ -675,11 +675,18 @@ export function CommandPalette(props: {
         */}
         <Autocomplete.Root
           inline
+          open
           mode="none"
           autoHighlight="always"
           filter={null}
           value={query}
-          onValueChange={setQuery}
+          onValueChange={(next, details) => {
+            // item-press (click / Enter on highlighted) is a selection, not
+            // input — never write the command object back into the query.
+            if (details.reason === 'item-press') return;
+            setQuery(next);
+          }}
+          itemToStringValue={(cmd) => cmd.label}
           items={combined}
         >
           <InputGroup
diff --git a/packages/ui/src/search-modal.tsx b/packages/ui/src/search-modal.tsx
index 84b04274d9..af5422c328 100644
--- a/packages/ui/src/search-modal.tsx
+++ b/packages/ui/src/search-modal.tsx
@@ -247,11 +247,18 @@ export function SearchModal(props: {
         */}
         <Autocomplete.Root
           inline
+          open
           mode="none"
           autoHighlight="always"
           filter={null}
           value={query}
-          onValueChange={(next) => updateSearchQuery(next)}
+          onValueChange={(next, details) => {
+            // item-press (click / Enter on highlighted) is a selection, not
+            // input — never write the result object back into the query.
+            if (details.reason === 'item-press') return;
+            updateSearchQuery(next);
+          }}
+          itemToStringValue={(result) => result.title ?? ''}
           items={results}
         >
           <InputGroup className="maka-search-modal-input-row" aria-label="搜索会话">

From f0c3b5fc8939c42e951ae1841586d247a1330adf Mon Sep 17 00:00:00 2001
From: AstroHan <lei.yuhan@outlook.com>
Date: Mon, 6 Jul 2026 18:43:18 +0800
Subject: [PATCH 4/5] test(ui): lock Home/End input-cursor decision (#562 P2-c)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

P2-c decision: accept Base UI ComboboxInput's default — Home/End move the
input cursor, not the highlight. The old roving-focus jumpActiveResult
(SearchModal) / hand-rolled onInputKeyDown highlight jump (CommandPalette)
must not return. Lock via doesNotMatch on jumpActive( / onInputKeyDown.
---
 .../__tests__/command-palette-a11y-copy-contract.test.ts  | 8 ++++++++
 .../__tests__/search-modal-lifecycle-contract.test.ts     | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/apps/desktop/src/main/__tests__/command-palette-a11y-copy-contract.test.ts b/apps/desktop/src/main/__tests__/command-palette-a11y-copy-contract.test.ts
index 6c4b5c7ab5..0b595fe639 100644
--- a/apps/desktop/src/main/__tests__/command-palette-a11y-copy-contract.test.ts
+++ b/apps/desktop/src/main/__tests__/command-palette-a11y-copy-contract.test.ts
@@ -52,6 +52,14 @@ describe('Command palette accessibility and visible copy', () => {
       /<Autocomplete\.Item[\s\S]*?onClick=\{\(\) => commit\(cmd\)\}/,
       'Each command must be Autocomplete.Item with onClick firing commit (pointer click or Enter on highlighted)',
     );
+    // P2-c: Home/End decision — accept Base UI ComboboxInput's input-cursor
+    // default. The old hand-rolled highlight jump (Home/End -> first/last) is
+    // gone and must not return.
+    assert.doesNotMatch(
+      src,
+      /\bjumpActive\w*\(|onInputKeyDown/,
+      'Home/End must NOT jump highlight and there must be no hand-rolled input keydown handler — Base UI input-cursor default is the decided behavior (#562 P2-c)',
+    );
   });
 
   it('uses shared primitive InputGroup for the palette input shell without restoring the old flex wrapper', async () => {
diff --git a/apps/desktop/src/main/__tests__/search-modal-lifecycle-contract.test.ts b/apps/desktop/src/main/__tests__/search-modal-lifecycle-contract.test.ts
index 6879eff1e2..3eaadde6f0 100644
--- a/apps/desktop/src/main/__tests__/search-modal-lifecycle-contract.test.ts
+++ b/apps/desktop/src/main/__tests__/search-modal-lifecycle-contract.test.ts
@@ -278,6 +278,14 @@ describe('SearchModal lifecycle contract (PR-SIDEBAR-IA-0 Phase 3 P0 fixup)', ()
       /\.maka-search-modal-result\[data-highlighted\]/,
       'Highlighted (active) search result must have dedicated styling (Autocomplete data-highlighted replaces the old data-active)',
     );
+    // P2-c: Home/End decision — accept Base UI ComboboxInput's input-cursor
+    // default. The old roving-focus jumpActiveResult (Home/End -> first/last)
+    // must not return.
+    assert.doesNotMatch(
+      searchModal,
+      /\bjumpActive\w*\(/,
+      'Home/End must NOT jump highlight — Base UI input-cursor default is the decided behavior (#562 P2-c)',
+    );
   });
 
   it('search input keeps focus after results load until the user navigates results', async () => {

From 81743dce5c2b6646a2bfd0a198203623a756c939 Mon Sep 17 00:00:00 2001
From: AstroHan <lei.yuhan@outlook.com>
Date: Mon, 6 Jul 2026 20:07:39 +0800
Subject: [PATCH 5/5] fix(ui): keepHighlight + empty-state inside
 Autocomplete.List (#562 review P2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

P2-1 (keepHighlight): both Roots had autoHighlight="always" but no
keepHighlight. keepHighlight=false (default) sets resetOnPointerLeave=true
(AriaCombobox.js:855), so pointer leave clears activeIndex, then the
autoHighlight="always" effect (line 678-682) re-highlights the first item
-> hover item[2] -> leave -> Enter ran the first item, not the hovered one.
Add keepHighlight so pointer leave preserves the hovered item.

P2-2 (empty-state): CommandPalette rendered a standalone <div> for empty
and <Autocomplete.List> only when non-empty, so the input lost its listbox
reference with no matches. Unify on Autocomplete.List always, 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.

Contracts lock keepHighlight on both Roots + empty-state-must-not-use-
standalone-div.

keepHighlight verified by source (resetOnPointerLeave = !keepHighlight) +
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,
not probe-verified. typecheck clean, 2076/2076, screenshots unchanged
(command-palette-open AE=48000, search-modal-open AE=2655 vs main — same as
prior commit, keepHighlight/empty-state don't affect non-empty visuals).
---
 .../command-palette-a11y-copy-contract.test.ts  | 11 +++++++++--
 .../search-modal-lifecycle-contract.test.ts     |  4 ++--
 apps/desktop/src/renderer/command-palette.tsx   | 17 ++++++++---------
 packages/ui/src/search-modal.tsx                |  1 +
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/apps/desktop/src/main/__tests__/command-palette-a11y-copy-contract.test.ts b/apps/desktop/src/main/__tests__/command-palette-a11y-copy-contract.test.ts
index 0b595fe639..78cae34ee3 100644
--- a/apps/desktop/src/main/__tests__/command-palette-a11y-copy-contract.test.ts
+++ b/apps/desktop/src/main/__tests__/command-palette-a11y-copy-contract.test.ts
@@ -23,8 +23,8 @@ describe('Command palette accessibility and visible copy', () => {
     );
     assert.match(
       src,
-      /<Autocomplete\.Root[\s\S]*?inline[\s\S]*?\bopen\b[\s\S]*?mode="none"[\s\S]*?autoHighlight="always"[\s\S]*?filter=\{null\}/,
-      'Autocomplete.Root must render `inline open` — per Base UI docs, `inline` requires `open` so the list is treated as visible; without `open` the input is not aria-expanded and keyboard nav / activedescendant break. mode="none" (palette owns fuzzy + content-search filtering) + autoHighlight="always"',
+      /<Autocomplete\.Root[\s\S]*?inline[\s\S]*?\bopen\b[\s\S]*?mode="none"[\s\S]*?autoHighlight="always"[\s\S]*?\bkeepHighlight\b[\s\S]*?filter=\{null\}/,
+      'Autocomplete.Root must render `inline open` + keepHighlight: `inline open` so the list is treated as visible (Base UI docs); keepHighlight so pointer leave preserves the hovered highlight (hover item -> leave -> Enter runs that item, not the first — #562 P2); mode="none" (palette owns fuzzy + content-search filtering) + autoHighlight="always"',
     );
     assert.match(
       src,
@@ -60,6 +60,13 @@ describe('Command palette accessibility and visible copy', () => {
       /\bjumpActive\w*\(|onInputKeyDown/,
       'Home/End must NOT jump highlight and there must be no hand-rolled input keydown handler — Base UI input-cursor default is the decided behavior (#562 P2-c)',
     );
+    // P2: empty state renders inside Autocomplete.List, not a standalone div,
+    // so the input always references a stable listbox container.
+    assert.doesNotMatch(
+      src,
+      /<div className="maka-palette-list"/,
+      'Empty state must render inside Autocomplete.List, not a standalone div — input must always reference a listbox container (#562 P2)',
+    );
   });
 
   it('uses shared primitive InputGroup for the palette input shell without restoring the old flex wrapper', async () => {
diff --git a/apps/desktop/src/main/__tests__/search-modal-lifecycle-contract.test.ts b/apps/desktop/src/main/__tests__/search-modal-lifecycle-contract.test.ts
index 3eaadde6f0..7f223d163b 100644
--- a/apps/desktop/src/main/__tests__/search-modal-lifecycle-contract.test.ts
+++ b/apps/desktop/src/main/__tests__/search-modal-lifecycle-contract.test.ts
@@ -242,8 +242,8 @@ describe('SearchModal lifecycle contract (PR-SIDEBAR-IA-0 Phase 3 P0 fixup)', ()
     );
     assert.match(
       searchModal,
-      /<Autocomplete\.Root[\s\S]*?inline[\s\S]*?\bopen\b[\s\S]*?mode="none"[\s\S]*?autoHighlight="always"[\s\S]*?filter=\{null\}/,
-      'Autocomplete.Root must render `inline open` — per Base UI docs, `inline` requires `open` so the list is treated as visible; without `open` the input is not aria-expanded and keyboard nav / activedescendant break. mode="none" (server-side IPC filtering, no local filter) + autoHighlight="always" so Enter on the first result works without an extra ArrowDown',
+      /<Autocomplete\.Root[\s\S]*?inline[\s\S]*?\bopen\b[\s\S]*?mode="none"[\s\S]*?autoHighlight="always"[\s\S]*?\bkeepHighlight\b[\s\S]*?filter=\{null\}/,
+      'Autocomplete.Root must render `inline open` + keepHighlight: `inline open` so the list is treated as visible (Base UI docs); keepHighlight so pointer leave preserves the hovered highlight (hover item -> leave -> Enter runs that item, not the first — #562 P2); mode="none" (server-side IPC filtering, no local filter) + autoHighlight="always" so Enter on the first result works without an extra ArrowDown',
     );
     assert.match(
       searchModal,
diff --git a/apps/desktop/src/renderer/command-palette.tsx b/apps/desktop/src/renderer/command-palette.tsx
index 76139e706e..4e04041e43 100644
--- a/apps/desktop/src/renderer/command-palette.tsx
+++ b/apps/desktop/src/renderer/command-palette.tsx
@@ -678,6 +678,7 @@ export function CommandPalette(props: {
           open
           mode="none"
           autoHighlight="always"
+          keepHighlight
           filter={null}
           value={query}
           onValueChange={(next, details) => {
@@ -721,8 +722,8 @@ export function CommandPalette(props: {
               </span>
             </InputGroupAddon>
           </InputGroup>
-          {grouped.length === 0 ? (
-            <div className="maka-palette-list" id="maka-palette-list">
+          <Autocomplete.List className="maka-palette-list" id="maka-palette-list" aria-label="命令面板结果">
+            {grouped.length === 0 ? (
               <Empty className="maka-palette-empty py-8 md:py-10 gap-3">
                 <EmptyHeader>
                   <EmptyMedia variant="icon">
@@ -732,10 +733,8 @@ export function CommandPalette(props: {
                   <EmptyDescription>换个关键词，或按 Esc 关闭。</EmptyDescription>
                 </EmptyHeader>
               </Empty>
-            </div>
-          ) : (
-            <Autocomplete.List className="maka-palette-list" id="maka-palette-list" aria-label="命令面板结果">
-              {grouped.map((group) => (
+            ) : (
+              grouped.map((group) => (
                 <Autocomplete.Group key={group.label} className="maka-palette-group">
                   <Autocomplete.GroupLabel className="maka-palette-group-label">
                     {group.label}
@@ -774,9 +773,9 @@ export function CommandPalette(props: {
                     );
                   })}
                 </Autocomplete.Group>
-              ))}
-            </Autocomplete.List>
-          )}
+              ))
+            )}
+          </Autocomplete.List>
         </Autocomplete.Root>
         <div className="maka-palette-footer">
           <span>
diff --git a/packages/ui/src/search-modal.tsx b/packages/ui/src/search-modal.tsx
index af5422c328..779fea0e55 100644
--- a/packages/ui/src/search-modal.tsx
+++ b/packages/ui/src/search-modal.tsx
@@ -250,6 +250,7 @@ export function SearchModal(props: {
           open
           mode="none"
           autoHighlight="always"
+          keepHighlight
           filter={null}
           value={query}
           onValueChange={(next, details) => {