Style Autocomplete dropdowns to match the rest of the app

Two fixes so the completion dropdowns on prompt-argument and
resource-template inputs look like every other dropdown in the app:

- App.css: the dark-mode dropdown / option-hover rules used to target
  .mantine-Select-* only, so the Autocomplete dropdowns shipped with
  Mantine's default surface color and a different hover background.
  Re-scoped to .mantine-Combobox-* so every Combobox-built input
  (Select, Autocomplete, MultiSelect, …) inherits the same styling.
- theme/Autocomplete.ts: new theme module setting `radius: "md"` so
  Autocomplete matches the default Select / TextInput corner radius.
  Wired through theme/index.ts and theme/theme.ts.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: cliffhall

clients/web/src/App.css

@@ -110,13 +110,20 @@
   background-color: var(--mantine-primary-color-light);
 }
 
-/* ── Select dropdown / option (dark mode) ──────────────────────── */
-
-[data-mantine-color-scheme="dark"] .mantine-Select-dropdown {
+/* ── Combobox dropdown / option (dark mode) ──────────────────────
+ *
+ * Targets `.mantine-Combobox-*` so the same dark-mode dropdown
+ * background + hover apply to every Combobox-built input (Select,
+ * Autocomplete, MultiSelect, TagsInput, …). Earlier this scoped to
+ * `.mantine-Select-*` only and the argument-completion Autocompletes
+ * shipped an unstyled dropdown that looked nothing like the rest of
+ * the app's filter dropdowns. */
+
+[data-mantine-color-scheme="dark"] .mantine-Combobox-dropdown {
   background-color: var(--mantine-color-gray-8);
 }
 
-[data-mantine-color-scheme="dark"] .mantine-Select-option:hover {
+[data-mantine-color-scheme="dark"] .mantine-Combobox-option:hover {
   background-color: var(--mantine-primary-color-light);
 }
 

clients/web/src/theme/Autocomplete.ts

@@ -0,0 +1,7 @@
+import { Autocomplete } from "@mantine/core";
+
+export const ThemeAutocomplete = Autocomplete.extend({
+  defaultProps: {
+    radius: "md",
+  },
+});

clients/web/src/theme/index.ts

@@ -1,6 +1,7 @@
 export { ThemeActionIcon } from "./ActionIcon";
 export { ThemeAlert } from "./Alert";
 export { ThemeAppShell } from "./AppShell";
+export { ThemeAutocomplete } from "./Autocomplete";
 export { ThemeBadge } from "./Badge";
 export { ThemeButton } from "./Button";
 export { ThemeCard } from "./Card";

clients/web/src/theme/theme.ts

@@ -3,6 +3,7 @@ import {
   ThemeActionIcon,
   ThemeAlert,
   ThemeAppShell,
+  ThemeAutocomplete,
   ThemeBadge,
   ThemeButton,
   ThemeCard,
@@ -55,6 +56,7 @@ export const theme = createTheme({
     ActionIcon: ThemeActionIcon,
     Alert: ThemeAlert,
     AppShell: ThemeAppShell,
+    Autocomplete: ThemeAutocomplete,
     Badge: ThemeBadge,
     Button: ThemeButton,
     Card: ThemeCard,