Function NamespaceCombobox

ui/src/components/NamespaceCombobox.tsx:37–212

({
  value,
  onValueChange,
  placeholder = "Select namespace…",
  disabled = false,
  includeAllNamespaces = false,
  allNamespacesLabel = "All namespaces",
  autoSelectDefault = true,
  ariaLabel,
  id: triggerId,
  onError,
}: NamespaceComboboxProps)

}

export function NamespaceCombobox({
  value,
  onValueChange,
  placeholder = "Select namespace…",
  disabled = false,
  includeAllNamespaces = false,
  allNamespacesLabel = "All namespaces",
  autoSelectDefault = true,
  ariaLabel,
  id: triggerId,
  onError,
}: NamespaceComboboxProps) {
  const [open, setOpen] = useState(false);
  const [namespaces, setNamespaces] = useState<NamespaceResponse[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const loadNamespaces = async () => {
      try {
        setLoading(true);
        setError(null);
        const response = await listNamespaces();
  
        if (!response.error) {
          const sorted = [...(response.data || [])].sort((a, b) =>
            a.name.localeCompare(b.name, undefined, { sensitivity: "base" })
          );
          setNamespaces(sorted);
          setError(null);
          onError?.(null);
  
          // Set a default namespace if none is currently selected
          if (autoSelectDefault && !value) {
            const names = sorted.map((ns) => ns.name);
            let defaultNamespace: string | undefined;
            if (names.includes("kagent")) {
              defaultNamespace = "kagent";
            } else if (names.includes("default")) {
              defaultNamespace = "default";
            } else if (names.length > 0) {
              defaultNamespace = names[0];
            }
            if (defaultNamespace) {
              onValueChange(defaultNamespace);
            }
          }
        } else {
          const errorMsg = response.error || 'Failed to load namespaces';
          setError(errorMsg);
          onError?.(errorMsg);
        }
      } catch (err) {
        console.error('Failed to load namespaces:', err);
        const errorMsg = err instanceof Error ? err.message : 'Failed to load namespaces';
        setError(errorMsg);
        onError?.(errorMsg);
      } finally {