Combobox/Select review fixes: open-on-chevron race, snug popup, full-height hit area, dev auto-load

From the live review of the dropdown work:
- `ui/Combobox`: stop hand-controlling `open`. Ark's machine owns it via `openOnClick` (click text opens, chevron toggles, typing opens). The old focus-driven `open` raced the trigger's own toggle (the trigger focuses the input, which reopened it just as the toggle closed it), so the first chevron click flashed the list shut.
- The loading spinner is now a non-interactive overlay (`position: absolute` + `pointer-events: none`) instead of a flex child, so a click on it falls through to the input and still opens the list on the first try.
- The chevron `Trigger` stretches to full height with wider padding: the whole right side is the hit area, not just the icon.
- Tighten the popup gutter to 2px on both `ui/Select` and `ui/Combobox` so the list sits snug under the field (was Ark's 8px default).
- `AiCloudSection` on-open model load now fires in dev and prod, suppressed only in automated E2E (was prod-only, so dev needed a manual "Test connection"). Cache hits still serve everywhere.
- `CloudProviderSetup.test.ts`: focus the model input for real (`.focus()` + `focusin`) before typing; the combobox machine only processes input once focused, and a synthetic `focus` event doesn't drive it there like a user does.

Author: vdavid

apps/desktop/src/lib/onboarding/CloudProviderSetup.test.ts

@@ -346,7 +346,11 @@ describe('CloudProviderSetup', () => {
     await advanceTimers(1500)
     const modelInput = mounted.target.querySelector<HTMLInputElement>('input[aria-label="Model"]')
     if (!modelInput) throw new Error('model input missing')
-    modelInput.dispatchEvent(new Event('focus', { bubbles: true }))
+    // Focus for real (not a bare `focus` Event): the combobox's machine only processes input
+    // changes once focused, and a synthetic `focus` event doesn't drive it there like a user click
+    // does. `.focus()` + `focusin` mirrors the real focus path the user takes before typing.
+    modelInput.focus()
+    modelInput.dispatchEvent(new Event('focusin', { bubbles: true }))
     await settle()
     modelInput.value = 'gpt-4o'
     modelInput.dispatchEvent(new Event('input', { bubbles: true }))

apps/desktop/src/lib/settings/sections/AiCloudSection.svelte

@@ -162,11 +162,9 @@
 
     /**
      * On open, serve the model list from the session cache instantly, or kick off a check that
-     * fills it. Gated so it only fires a real request in prod: for no-key providers
-     * (`custom`/`ollama`/`lm-studio`) `hasCheckableConfig` is true with the preset base URL, so a
-     * mount-trigger would otherwise hit a live endpoint in dev/E2E. A warm cache hit still works in
-     * dev/E2E (no network). Also skips when a check is already scheduled (for example from a
-     * just-handled provider switch) so we don't double-fire.
+     * fills it (dev and prod both auto-load; only automated E2E is suppressed, since it has no real
+     * provider). A warm cache hit still works everywhere, including E2E. Also skips when a check is
+     * already scheduled (for example from a just-handled provider switch) so we don't double-fire.
      */
     async function populateModelsOnOpen(): Promise<void> {
         if (!hasCheckableConfig) return
@@ -177,9 +175,10 @@
             connectionStatus = 'connected'
             return
         }
-        // No mount-triggered network in dev/E2E (the auto-check is the only request that fires
-        // without a user action). Cache hits above still work everywhere.
-        if (getAppMode() !== 'prod') return
+        // Auto-loading the list is the only request that fires without a user action; suppress it
+        // only in automated E2E (no real provider there, so it'd just add network flakiness). Dev and
+        // prod both auto-load. Cache hits above still work everywhere, including E2E.
+        if (getAppMode() === 'e2e') return
         if (connectionCheckTimer || connectionStatus === 'checking') return
         scheduleConnectionCheck()
     }

apps/desktop/src/lib/ui/Combobox.svelte

@@ -22,9 +22,12 @@
      * - `allowCustomValue` accepts the custom value on close.
      * - `value` is intentionally left uncontrolled / unused: a typed custom value persists.
      *
-     * Open-on-focus is wired via a controlled `open` state (Ark has no `openOnFocus` prop). `loading`
-     * is OUR in-field spinner overlay (Ark has no loading prop). No `Portal` (keeps the viewer's
-     * restricted capability set unaffected). No entrance animation by default.
+     * Open state is owned entirely by Ark (uncontrolled) with `openOnClick`: clicking the text opens
+     * it, the chevron `Trigger` toggles it, typing opens it (`openOnChange`). Don't reintroduce a
+     * controlled `open` driven from the input's focus: the `Trigger` focuses the input on click, so a
+     * focus-open handler races the trigger's own toggle and flashes the popup shut. `loading` is OUR
+     * in-field spinner overlay (Ark has no loading prop). No `Portal` (keeps the viewer's restricted
+     * capability set unaffected). No entrance animation by default.
      */
     import { Combobox, createListCollection } from '@ark-ui/svelte/combobox'
     import IconChevronDown from '~icons/lucide/chevron-down'
@@ -62,37 +65,24 @@
         }),
     )
 
-    let open = $state(false)
-
     function handleInputValueChange(details: { inputValue: string }): void {
         onInputValueChange(details.inputValue)
     }
-
-    function handleOpenChange(details: { open: boolean }): void {
-        open = details.open
-    }
 </script>
 
 <div class="combobox-wrapper">
     <Combobox.Root
         {collection}
         {inputValue}
-        {open}
         {disabled}
+        openOnClick
+        positioning={{ gutter: 2 }}
         selectionBehavior="preserve"
         allowCustomValue
         onInputValueChange={handleInputValueChange}
-        onOpenChange={handleOpenChange}
     >
         <Combobox.Control class="combobox-control">
-            <Combobox.Input
-                class="combobox-input"
-                {placeholder}
-                aria-label={ariaLabel}
-                onfocus={() => {
-                    open = true
-                }}
-            />
+            <Combobox.Input class="combobox-input" {placeholder} aria-label={ariaLabel} />
             {#if loading}
                 <span class="spinner spinner-sm combobox-spinner" aria-label="Loading suggestions" role="status"
                 ></span>
@@ -136,14 +126,14 @@
     }
 
     :global(.combobox-control) {
+        position: relative;
         display: flex;
         align-items: center;
         gap: var(--spacing-xs);
         width: 100%;
         border: 1px solid var(--color-border);
         border-radius: var(--radius-sm);
         background: var(--color-bg-primary);
-        padding-right: var(--spacing-xs);
     }
 
     :global(.combobox-control:focus-within) {
@@ -171,16 +161,22 @@
         opacity: 0.5;
     }
 
+    /* Decorative overlay, not a flex child: floats just left of the chevron and passes clicks
+       through to the input beneath, so a click on the spinner still opens the suggestions. */
     .combobox-spinner {
-        align-self: center;
+        position: absolute;
+        right: 28px;
+        pointer-events: none;
     }
 
+    /* Full-height, padded hit area: the whole right side toggles the list, not just the icon. */
     :global(.combobox-trigger) {
         display: inline-flex;
         align-items: center;
         justify-content: center;
+        align-self: stretch;
         flex-shrink: 0;
-        padding: 0;
+        padding: 0 var(--spacing-sm);
         border: none;
         background: transparent;
         cursor: default;

apps/desktop/src/lib/ui/Select.svelte

@@ -94,6 +94,7 @@
     value={value ? [value] : []}
     onValueChange={handleValueChange}
     onHighlightChange={handleHighlightChange}
+    positioning={{ gutter: 2 }}
     {disabled}
 >
     <Select.Control>