fix(agents): focus model catalog search when the picker opens

apps/web/src/lib/core/component/AI/component/input/ModelCatalogPicker.test.tsx

@@ -0,0 +1,146 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@solidjs/testing-library';
+import { createSignal, type JSX } from 'solid-js';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { ModelCatalogPicker } from './ModelCatalogPicker';
+import type { CatalogModelOption } from './modelCatalog';
+
+vi.mock('@ui', () => {
+  const cn = (...args: unknown[]) =>
+    args.flat(Infinity).filter(Boolean).join(' ');
+
+  let onOpenAutoFocus: ((event: Event) => void) | undefined;
+
+  const Dropdown: any = (props: { children?: JSX.Element }) => (
+    <div>{props.children}</div>
+  );
+  Dropdown.Trigger = (props: {
+    children?: JSX.Element;
+    'aria-label'?: string;
+  }) => (
+    <button
+      type="button"
+      aria-label={props['aria-label']}
+      onClick={() => {
+        const event = new Event('focusScope.autoFocusOnMount', {
+          cancelable: true,
+        });
+        onOpenAutoFocus?.(event);
+        // Kobalte's selectable list still autofocuses the collection on a
+        // deferred timeout after onOpenAutoFocus is prevented.
+        setTimeout(() => {
+          document.getElementById('model-catalog-menu')?.focus();
+        }, 0);
+      }}
+    >
+      {props.children}
+    </button>
+  );
+  Dropdown.Content = (props: {
+    children?: JSX.Element;
+    onOpenAutoFocus?: (event: Event) => void;
+  }) => {
+    onOpenAutoFocus = props.onOpenAutoFocus;
+    return (
+      <div id="model-catalog-menu" role="menu" tabIndex={-1}>
+        {props.children}
+      </div>
+    );
+  };
+  Dropdown.Group = (props: { children?: JSX.Element }) => (
+    <div>{props.children}</div>
+  );
+  Dropdown.GroupLabel = (props: { children?: JSX.Element }) => (
+    <div>{props.children}</div>
+  );
+  Dropdown.Item = (props: {
+    children?: JSX.Element;
+    onSelect?: () => void;
+  }) => (
+    <div role="menuitem" onClick={() => props.onSelect?.()}>
+      {props.children}
+    </div>
+  );
+  Dropdown.Separator = () => <hr />;
+  Dropdown.Sub = (props: { children?: JSX.Element }) => (
+    <div>{props.children}</div>
+  );
+  Dropdown.SubTrigger = (props: { children?: JSX.Element }) => (
+    <div>{props.children}</div>
+  );
+  Dropdown.SubContent = (props: { children?: JSX.Element }) => (
+    <div>{props.children}</div>
+  );
+
+  return { cn, Dropdown };
+});
+
+const OPTIONS: CatalogModelOption[] = [
+  { id: 'auto', label: 'Auto', group: 'Auto' },
+  { id: 'grok', label: 'Cursor Grok 4.6 High Fast' },
+  { id: 'opus', label: 'Claude Opus 5 High' },
+  { id: 'sonnet', label: 'Claude Sonnet 5 High' },
+  { id: 'sol', label: 'GPT-5.6 Sol High' },
+  { id: 'gemini', label: 'Gemini 3.8 Flash High' },
+];
+
+afterEach(() => {
+  cleanup();
+});
+
+function mountPicker() {
+  render(() => {
+    const [value, setValue] = createSignal('auto');
+    return (
+      <ModelCatalogPicker
+        value={value()}
+        options={OPTIONS}
+        onSelect={setValue}
+        ariaLabel="Agent model"
+      />
+    );
+  });
+}
+
+describe('ModelCatalogPicker search focus', () => {
+  it('puts caret in the search field when the menu opens', async () => {
+    mountPicker();
+    fireEvent.click(screen.getByRole('button', { name: 'Agent model' }));
+    const search = screen.getByRole('textbox', { name: 'Search models' });
+    await waitFor(() => {
+      expect(document.activeElement).toBe(search);
+    });
+  });
+
+  it('puts caret in the search field when the menu is opened again', async () => {
+    mountPicker();
+    const trigger = screen.getByRole('button', { name: 'Agent model' });
+    fireEvent.click(trigger);
+    await waitFor(() => {
+      expect(document.activeElement).toBe(
+        screen.getByRole('textbox', { name: 'Search models' })
+      );
+    });
+
+    document.getElementById('model-catalog-menu')?.focus();
+    expect(document.activeElement).not.toBe(
+      screen.getByRole('textbox', { name: 'Search models' })
+    );
+
+    fireEvent.click(trigger);
+    await waitFor(() => {
+      expect(document.activeElement).toBe(
+        screen.getByRole('textbox', { name: 'Search models' })
+      );
+    });
+  });
+});

apps/web/src/lib/core/component/AI/component/input/ModelCatalogPicker.tsx

@@ -54,6 +54,21 @@ function ModelRow(props: {
   );
 }
 
+/**
+ * Kobalte menus still autofocus the collection on a deferred `setTimeout(0)`
+ * (`deferAutoFocus` in createSelectableList) after `onOpenAutoFocus` is
+ * prevented. A microtask loses that race; wait past the timeout so typing
+ * lands in search.
+ */
+function focusSearchAfterMenuOpen(input: () => HTMLInputElement | undefined) {
+  setTimeout(() => {
+    requestAnimationFrame(() => {
+      const search = input();
+      if (search?.isConnected) search.focus();
+    });
+  });
+}
+
 export function ModelCatalogPicker(props: ModelCatalogPickerProps) {
   const [query, setQuery] = createSignal('');
   let searchRef: HTMLInputElement | undefined;
@@ -100,7 +115,7 @@ export function ModelCatalogPicker(props: ModelCatalogPickerProps) {
         )}
         onOpenAutoFocus={(event) => {
           event.preventDefault();
-          queueMicrotask(() => searchRef?.focus());
+          focusSearchAfterMenuOpen(() => searchRef);
         }}
       >
         <div class="border-b border-edge-muted bg-menu p-1.5">

docs/AGENT_GUIDE/ai-chat.md

@@ -395,7 +395,8 @@ Reopening or resuming the session must retain that selection and logo.
 
 Both AI composers display their model trigger label at the input text size
 (15px), using the softer secondary text color. This includes the agent model
-catalog trigger and mobile model sheet trigger.
+catalog trigger and mobile model sheet trigger. Opening the agent model
+catalog focuses the `Search models` field so you can type immediately.
 
 Soup and recent-chat icons recognize the provider in the saved model ID even
 when that model is no longer selectable. For example, `openai/gpt-5.5` retains