fix: improve llm dropdown list

ui/components/ui/llm-model-select.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useVirtualizer } from '@tanstack/react-virtual'
-import { CheckIcon, ChevronDownIcon } from 'lucide-react'
+import { CheckIcon, ChevronDownIcon, SearchIcon } from 'lucide-react'
 import { useCallback, useMemo, useRef, useState } from 'react'
 
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
@@ -33,9 +33,7 @@ type LlmModelSelectProps = {
 }
 
 /**
- * Model picker styled like `FontSelect` — a popover with a search input
- * and a virtualized list. Designed for medium-sized model catalogs (tens
- * to a few hundred entries) where a native `<select>` becomes unwieldy.
+ * Model picker with a search input and a virtualized list.
  */
 export function LlmModelSelect({
   value,
@@ -101,31 +99,36 @@ export function LlmModelSelect({
         disabled={disabled}
         data-testid={props['data-testid']}
         className={cn(
-          "flex h-7 w-full items-center justify-between gap-1.5 rounded-md border border-input bg-transparent px-2 py-1 text-xs whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 dark:hover:bg-input/50 [&_svg:not([class*='text-'])]:text-muted-foreground",
+          "flex h-7 w-full items-center justify-between gap-1.5 rounded-md border border-input bg-transparent px-2 py-1 text-xs whitespace-nowrap shadow-xs transition-colors outline-none hover:border-primary/40 hover:bg-primary/[0.03] focus-visible:border-primary/60 focus-visible:ring-[3px] focus-visible:ring-primary/25 disabled:cursor-not-allowed disabled:opacity-50 data-[state=open]:border-primary/60 data-[state=open]:ring-[3px] data-[state=open]:ring-primary/25 dark:bg-input/30 dark:hover:bg-input/50 [&_svg:not([class*='text-'])]:text-muted-foreground",
           triggerClassName,
         )}
       >
         <TriggerLabel selected={selected} placeholder={placeholder} />
-        <ChevronDownIcon className='size-3.5 shrink-0 opacity-50' />
+        <ChevronDownIcon className='size-3.5 shrink-0 opacity-60' />
       </PopoverTrigger>
       <PopoverContent
-        // Wider than the trigger (which is squeezed next to the
-        // Load/Unload button) but narrower than the enclosing LLM
-        // popover (w-[280px]).
-        className={cn('w-64 min-w-(--radix-popover-trigger-width) p-0', className)}
+        // Matches the enclosing LLM popover (w-64) — keep compact and
+        // rely on the badge + short-name rules to stay legible.
+        className={cn(
+          'w-64 min-w-(--radix-popover-trigger-width) overflow-hidden border-primary/15 p-0 shadow-lg',
+          className,
+        )}
         align='start'
         onOpenAutoFocus={(e) => {
           e.preventDefault()
           inputRef.current?.focus()
         }}
       >
-        <input
-          ref={inputRef}
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          placeholder='Search models…'
-          className='w-full border-b bg-transparent px-2 py-1.5 text-xs outline-none placeholder:text-muted-foreground'
-        />
+        <div className='relative border-b border-primary/10 bg-gradient-to-b from-primary/[0.04] to-transparent'>
+          <SearchIcon className='pointer-events-none absolute top-1/2 left-2 size-3 -translate-y-1/2 text-muted-foreground' />
+          <input
+            ref={inputRef}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder='Search models…'
+            className='w-full bg-transparent py-1.5 pr-2 pl-7 text-xs outline-none placeholder:text-muted-foreground/70'
+          />
+        </div>
         <ScrollArea className='relative' style={{ height: listHeight }} viewportRef={viewportRef}>
           <div
             style={{
@@ -156,7 +159,7 @@ export function LlmModelSelect({
         {filtered.length === 0 && (
           <div
             data-testid='llm-model-empty'
-            className='px-2 py-4 text-center text-xs text-muted-foreground'
+            className='px-2 py-6 text-center text-xs text-muted-foreground'
           >
             No models found
           </div>
@@ -166,6 +169,18 @@ export function LlmModelSelect({
   )
 }
 
+/** Last path segment — strips vendor prefixes like `anthropic/claude-…`. */
+function shortModelName(name: string): string {
+  const idx = name.lastIndexOf('/')
+  return idx >= 0 && idx < name.length - 1 ? name.slice(idx + 1) : name
+}
+
+/** Provider badge label. Collapse `openai-compatible` to a short `compat`. */
+function providerBadgeLabel(provider: LlmProviderCatalog): string {
+  if (provider.id === 'openai-compatible') return 'compat'
+  return provider.name
+}
+
 function TriggerLabel({
   selected,
   placeholder,
@@ -180,9 +195,9 @@ function TriggerLabel({
   }
   const { model, provider } = selected
   return (
-    <span className='flex min-w-0 items-center gap-1.5'>
-      {provider && <ProviderBadge name={provider.name} />}
-      <span className='truncate'>{model.name}</span>
+    <span className='flex min-w-0 items-center gap-1.5' title={model.name}>
+      {provider && <ProviderBadge label={providerBadgeLabel(provider)} />}
+      <span className='truncate'>{shortModelName(model.name)}</span>
     </span>
   )
 }
@@ -202,26 +217,29 @@ function ModelRow({
   return (
     <button
       type='button'
+      title={model.name}
       className={cn(
-        'absolute left-0 flex w-full cursor-default items-center gap-1.5 rounded-sm px-2 text-xs select-none hover:bg-accent hover:text-accent-foreground',
-        selected && 'bg-accent',
+        'absolute left-0 flex w-full cursor-default items-center gap-1.5 px-2 pr-7 text-left text-xs transition-colors select-none',
+        selected
+          ? 'bg-accent text-accent-foreground ring-1 ring-primary/30 ring-inset'
+          : 'hover:bg-accent/60 hover:text-accent-foreground',
       )}
       style={style}
       onClick={onClick}
     >
-      <span className='flex size-3 shrink-0 items-center justify-center'>
-        {selected && <CheckIcon className='size-3' />}
-      </span>
-      {provider && <ProviderBadge name={provider.name} />}
-      <span className='truncate'>{model.name}</span>
+      {provider && <ProviderBadge label={providerBadgeLabel(provider)} />}
+      <span className='truncate'>{shortModelName(model.name)}</span>
+      {selected && (
+        <CheckIcon className='absolute top-1/2 right-2 size-3 -translate-y-1/2 text-primary' />
+      )}
     </button>
   )
 }
 
-function ProviderBadge({ name }: { name: string }) {
+function ProviderBadge({ label }: { label: string }) {
   return (
-    <span className='shrink-0 rounded bg-primary/10 px-1 py-0.5 text-[9px] leading-none font-semibold text-primary uppercase'>
-      {name}
+    <span className='shrink-0 rounded-sm border border-primary/20 bg-primary/10 px-1 py-0.5 text-[9px] leading-none font-semibold tracking-wide text-primary uppercase'>
+      {label}
     </span>
   )
 }