Function ProviderCombobox

ui/src/components/ProviderCombobox.tsx:45–160

({
  providers,
  value,
  onChange,
  disabled = false,
  loading = false,
}: ProviderComboboxProps)

}

export function ProviderCombobox({
  providers,
  value,
  onChange,
  disabled = false,
  loading = false,
}: ProviderComboboxProps) {
  const [open, setOpen] = useState(false);

  const groupedProviders = useMemo(() => {
    const stock = providers.filter(p => p.source === 'stock' || !p.source).sort((a, b) => a.name.localeCompare(b.name));
    const configured = providers.filter(p => p.source === 'configured').sort((a, b) => a.name.localeCompare(b.name));
    return { stock, configured };
  }, [providers]);

  const hasProviders = groupedProviders.stock.length > 0 || groupedProviders.configured.length > 0;

  const triggerContent = useMemo(() => {
    if (loading) return "Loading providers...";
    if (value) {
      return (
        <>
          {getProviderIcon(value.type)}
          {value.name}
        </>
      );
    }
    if (!hasProviders) return "No providers available";
    return "Select provider...";
  }, [loading, value, hasProviders]);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className={cn(
            "w-full justify-between",
            !value && !loading && "text-muted-foreground"
          )}
          disabled={disabled || loading || !hasProviders}
        >
          <span className="flex items-center truncate">
            {triggerContent}
          </span>
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
        <Command>
          <CommandInput placeholder="Search providers..." />
          <CommandList>
            <CommandEmpty>No provider found.</CommandEmpty>

            {/* Configured Providers (shown first) */}
            {groupedProviders.configured.length > 0 && (