openchamber/packages/ui/src/components/model-picker/ModelPickerList.tsx

import React from 'react';
import {
  DndContext,
  MouseSensor,
  PointerSensor,
  closestCenter,
  useSensor,
  useSensors,
  type DragEndEvent,
} from '@dnd-kit/core';
import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { CSS as DndCSS } from '@dnd-kit/utilities';
import { Icon } from '@/components/icon/Icon';
import { Input } from '@/components/ui/input';
import { ProviderLogo } from '@/components/ui/ProviderLogo';
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { getCurrentIntlLocale } from '@/lib/i18n';
import { mergeModelMetadataWithLiveModel } from '@/lib/modelMetadata';
import { getModelDisplayName as getSharedModelDisplayName } from '@/lib/modelDisplay';
import { cn } from '@/lib/utils';
import { useModelPickerSectionsStore } from '@/stores/useModelPickerSectionsStore';
import type { ModelMetadata } from '@/types';

type ProviderModel = Record<string, unknown> & { id?: string; name?: string };

export type ModelPickerProvider = {
  id: string;
  name?: string;
  models?: ProviderModel[];
};

export type ModelPickerEntry = {
  model: ProviderModel;
  providerID: string;
  modelID: string;
};

type ModelPickerFavoriteEntry = ModelPickerEntry;

type HiddenModel = { providerID: string; modelID: string };

type IndexSelectionStore = {
  getSnapshot: () => number;
  subscribe: (listener: () => void) => () => void;
  subscribeIndex: (index: number, listener: () => void) => () => void;
  set: (value: number) => void;
};

const formatCompactNumber = (value: number) => new Intl.NumberFormat(getCurrentIntlLocale(), {
  notation: 'compact',
  compactDisplay: 'short',
  maximumFractionDigits: 1,
  minimumFractionDigits: 0,
}).format(value);

const formatUsdCurrency = (value: number) => new Intl.NumberFormat(getCurrentIntlLocale(), {
  style: 'currency',
  currency: 'USD',
  maximumFractionDigits: 4,
  minimumFractionDigits: 2,
}).format(value);

const getModelDisplayName = (model: Record<string, unknown>) => {
  return getSharedModelDisplayName(model, undefined, { maxLength: 40 });
};

const formatModelContextTokens = (value?: number | null) => {
  if (typeof value !== 'number' || Number.isNaN(value)) return '';
  if (value === 0) return '0';
  const formatted = formatCompactNumber(value);
  return formatted.endsWith('.0') ? formatted.slice(0, -2) : formatted;
};

const formatCost = (value?: number | null) => {
  if (typeof value !== 'number' || !Number.isFinite(value)) return '—';
  return formatUsdCurrency(value);
};

const hasTooltipMetadata = (metadata?: ModelMetadata) => {
  if (!metadata) return false;
  return Boolean(
    metadata.tool_call ||
    metadata.reasoning ||
    metadata.cost?.input !== undefined ||
    metadata.cost?.output !== undefined ||
    (metadata.modalities?.input?.length ?? 0) > 0 ||
    (metadata.modalities?.output?.length ?? 0) > 0,
  );
};

const ModelPickerRowTooltip: React.FC<{
  metadata?: ModelMetadata;
  active: boolean;
  labels: ModelPickerListProps['labels'];
  children: React.ReactElement;
}> = ({ metadata, active, labels, children }) => {
  const [delayedActive, setDelayedActive] = React.useState(false);

  React.useEffect(() => {
    if (!active) {
      setDelayedActive(false);
      return;
    }
    const timeout = window.setTimeout(() => setDelayedActive(true), 450);
    return () => window.clearTimeout(timeout);
  }, [active]);

  if (!hasTooltipMetadata(metadata)) return children;

  const inputModalities = metadata?.modalities?.input ?? [];
  const outputModalities = metadata?.modalities?.output ?? [];
  const capabilities = [
    metadata?.tool_call ? labels.capabilityToolCalling : null,
    metadata?.reasoning ? labels.capabilityReasoning : null,
  ].filter(Boolean);

  return (
    <Tooltip delayDuration={0} open={active && delayedActive} onOpenChange={() => {}}>
      <TooltipTrigger asChild>{children}</TooltipTrigger>
      {active && delayedActive ? (
        <TooltipContent side="right" sideOffset={8} className="max-w-xs text-left transition-none data-[starting-style]:opacity-100 data-[starting-style]:scale-100 data-[ending-style]:opacity-100 data-[ending-style]:scale-100">
          <div className="flex flex-col gap-2 text-left text-xs">
            {capabilities.length > 0 ? (
              <div className="flex items-center justify-between gap-3 text-muted-foreground">
                <span className="typography-meta font-medium">{labels.capabilities}</span>
                <span className="typography-meta text-foreground">{capabilities.join(', ')}</span>
              </div>
            ) : null}
            {inputModalities.length > 0 ? (
              <div className="flex items-center justify-between gap-3 text-muted-foreground">
                <span className="typography-meta font-medium">{labels.input}</span>
                <span className="typography-meta text-foreground">{inputModalities.join(', ')}</span>
              </div>
            ) : null}
            {outputModalities.length > 0 ? (
              <div className="flex items-center justify-between gap-3 text-muted-foreground">
                <span className="typography-meta font-medium">{labels.output}</span>
                <span className="typography-meta text-foreground">{outputModalities.join(', ')}</span>
              </div>
            ) : null}
            {(metadata?.cost?.input !== undefined || metadata?.cost?.output !== undefined) ? (
              <div className="flex items-center justify-between gap-3 text-muted-foreground">
                <span className="typography-meta font-medium">{labels.costPerMillion}</span>
                <span className="typography-meta text-foreground">In {formatCost(metadata?.cost?.input)} · Out {formatCost(metadata?.cost?.output)}</span>
              </div>
            ) : null}
          </div>
        </TooltipContent>
      ) : null}
    </Tooltip>
  );
};

const createIndexSelectionStore = (): IndexSelectionStore => {
  let value = 0;
  const listeners = new Set<() => void>();
  const listenersByIndex = new Map<number, Set<() => void>>();
  const notify = (index: number) => {
    const listeners = listenersByIndex.get(index);
    if (!listeners) return;
    for (const listener of listeners) listener();
  };

  return {
    getSnapshot: () => value,
    subscribe: (listener) => {
      listeners.add(listener);
      return () => listeners.delete(listener);
    },
    subscribeIndex: (index, listener) => {
      let listeners = listenersByIndex.get(index);
      if (!listeners) {
        listeners = new Set();
        listenersByIndex.set(index, listeners);
      }
      listeners.add(listener);
      return () => {
        listeners.delete(listener);
        if (listeners.size === 0) listenersByIndex.delete(index);
      };
    },
    set: (nextValue) => {
      if (value === nextValue) return;
      const previousValue = value;
      value = nextValue;
      notify(previousValue);
      notify(nextValue);
      for (const listener of listeners) listener();
    },
  };
};

const ModelPickerRowHighlight: React.FC<{
  store: IndexSelectionStore;
  index: number;
  renderVersion?: number;
  children: (isHighlighted: boolean) => React.ReactNode;
}> = React.memo(({ store, index, children }) => {
  const [isHighlighted, setIsHighlighted] = React.useState(() => store.getSnapshot() === index);

  React.useEffect(() => {
    const sync = () => setIsHighlighted(store.getSnapshot() === index);
    sync();
    return store.subscribeIndex(index, sync);
  }, [index, store]);

  return <>{children(isHighlighted)}</>;
});

const ModelPickerFooter: React.FC<{
  store: IndexSelectionStore;
  flatModelList: ModelPickerEntry[];
  footerContent: ModelPickerListProps['footerContent'];
  fallback: React.ReactNode;
}> = ({ store, flatModelList, footerContent, fallback }) => {
  const [selectedIndex, setSelectedIndex] = React.useState(() => store.getSnapshot());

  React.useEffect(() => store.subscribe(() => setSelectedIndex(store.getSnapshot())), [store]);

  const activeEntry = flatModelList[selectedIndex];
  return <>{typeof footerContent === 'function' ? footerContent(activeEntry) : (footerContent ?? fallback)}</>;
};

type SortableFavoriteHandleProps = {
  attributes: ReturnType<typeof useSortable>['attributes'];
  listeners: ReturnType<typeof useSortable>['listeners'];
  setActivatorNodeRef: ReturnType<typeof useSortable>['setActivatorNodeRef'];
  isDragging: boolean;
};

const SortableFavoriteModelRow: React.FC<{
  id: string;
  disabled?: boolean;
  children: (dragHandleProps: SortableFavoriteHandleProps) => React.ReactNode;
}> = ({ id, disabled = false, children }) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    setActivatorNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id, disabled });

  return (
    <div
      ref={setNodeRef}
      style={{
        transform: DndCSS.Transform.toString(transform),
        transition,
      }}
      className={cn(isDragging && 'opacity-60')}
    >
      {children({ attributes, listeners, setActivatorNodeRef, isDragging })}
    </div>
  );
};

const SortableProviderSection: React.FC<{
  id: string;
  disabled?: boolean;
  children: (dragHandleProps: SortableFavoriteHandleProps) => React.ReactNode;
}> = ({ id, disabled = false, children }) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    setActivatorNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id, disabled });

  return (
    <div
      ref={setNodeRef}
      style={{
        transform: DndCSS.Translate.toString(transform),
        transition,
      }}
      className={cn(isDragging && 'opacity-60')}
    >
      {children({ attributes, listeners, setActivatorNodeRef, isDragging })}
    </div>
  );
};

const STICKY_HEADER_OFFSET = 32;

const scrollIntoView = (container: HTMLElement | null, node: HTMLElement | null) => {
  if (!node) return;
  if (!container) {
    node.scrollIntoView({ block: 'nearest' });
    return;
  }

  const containerRect = container.getBoundingClientRect();
  const nodeRect = node.getBoundingClientRect();
  const top = nodeRect.top - containerRect.top + container.scrollTop;
  const bottom = top + nodeRect.height;
  const viewTop = container.scrollTop;
  const viewBottom = viewTop + container.clientHeight;
  const viewTopWithHeader = viewTop + STICKY_HEADER_OFFSET;
  const target = top < viewTopWithHeader
    ? top - STICKY_HEADER_OFFSET
    : bottom > viewBottom
      ? bottom - container.clientHeight
      : viewTop;
  const max = Math.max(0, container.scrollHeight - container.clientHeight);
  container.scrollTop = Math.max(0, Math.min(target, max));
};

interface ModelPickerListProps {
  providers: ModelPickerProvider[];
  favoriteModels: ModelPickerFavoriteEntry[];
  recentModels: ModelPickerFavoriteEntry[];
  modelsMetadata: Map<string, ModelMetadata>;
  searchQuery: string;
  onSearchQueryChange: (value: string) => void;
  onSelect: (entry: ModelPickerEntry) => void;
  labels: {
    searchPlaceholder: string;
    noResults: string;
    favorites: string;
    recent: string;
    keyboardHint: string;
    notSelected?: string;
    favorite?: string;
    unfavorite?: string;
    capabilities?: string;
    capabilityToolCalling?: string;
    capabilityReasoning?: string;
    input?: string;
    output?: string;
    costPerMillion?: string;
  };
  selectedModel?: { providerID: string; modelID: string } | null;
  hiddenModels?: HiddenModel[];
  allowedProviderIds?: string[];
  /**
   * Per-model gate, for callers whose feature needs a capability rather than a
   * provider (e.g. structured output). Applied on top of `allowedProviderIds`.
   */
  isModelAllowed?: (providerID: string, modelID: string) => boolean;
  includeNotSelected?: boolean;
  onSelectNone?: () => void;
  selectionCount?: (entry: ModelPickerEntry) => number;
  disabled?: boolean;
  maxHeightClassName?: string;
  maxHeightStyle?: React.CSSProperties;
  sectionHeaderClassName?: string;
  rowClassName?: string;
  stickyHeaders?: boolean;
  autoFocus?: boolean;
  onEscape?: () => void;
  isFavorite?: (entry: ModelPickerEntry) => boolean;
  onToggleFavorite?: (entry: ModelPickerEntry) => void;
  renderRowEnd?: (entry: ModelPickerEntry, state: { isHighlighted: boolean; isSelected: boolean }) => React.ReactNode;
  onActiveKeyDown?: (event: React.KeyboardEvent, entry: ModelPickerEntry | undefined) => void;
  onActiveEntryChange?: (entry: ModelPickerEntry | undefined) => void;
  onVariantKey?: (event: React.KeyboardEvent, entry: ModelPickerEntry) => boolean;
  onReorderFavorite?: (active: ModelPickerEntry, over: ModelPickerEntry) => void;
  reorderFavoriteAriaLabel?: string;
  reorderFavoriteTitle?: string;
  providerOrder?: string[];
  onReorderProvider?: (orderedProviderIDs: string[]) => void;
  reorderProviderTitle?: string;
  footerContent?: React.ReactNode | ((activeEntry: ModelPickerEntry | undefined) => React.ReactNode);
  renderVersion?: number;
  tooltipsEnabled?: boolean;
}

export const ModelPickerList: React.FC<ModelPickerListProps> = ({
  providers,
  favoriteModels,
  recentModels,
  modelsMetadata,
  searchQuery,
  onSearchQueryChange,
  onSelect,
  labels,
  selectedModel,
  hiddenModels = [],
  allowedProviderIds,
  isModelAllowed,
  includeNotSelected = false,
  onSelectNone,
  selectionCount,
  disabled = false,
  maxHeightClassName = 'max-h-[min(400px,calc(100dvh-12rem))] flex-1',
  maxHeightStyle,
  sectionHeaderClassName,
  rowClassName,
  stickyHeaders = true,
  autoFocus = true,
  onEscape,
  isFavorite,
  onToggleFavorite,
  renderRowEnd,
  onActiveKeyDown,
  onActiveEntryChange,
  onVariantKey,
  onReorderFavorite,
  reorderFavoriteAriaLabel,
  reorderFavoriteTitle,
  providerOrder,
  onReorderProvider,
  reorderProviderTitle,
  footerContent,
  renderVersion,
  tooltipsEnabled = true,
}) => {
  const selectionStoreRef = React.useRef<IndexSelectionStore | null>(null);
  if (!selectionStoreRef.current) selectionStoreRef.current = createIndexSelectionStore();
  const selectionStore = selectionStoreRef.current;
  const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
  const scrollRef = React.useRef<HTMLElement | null>(null);
  const keyboardOwnsSelectionRef = React.useRef(false);
  const lastMousePositionRef = React.useRef<{ x: number; y: number } | null>(null);
  const collapsedRecord = useModelPickerSectionsStore((state) => state.collapsedSections);
  const toggleSection = useModelPickerSectionsStore((state) => state.toggleSection);
  const collapsedSections = React.useMemo(
    () => new Set(Object.keys(collapsedRecord).filter((key) => collapsedRecord[key])),
    [collapsedRecord],
  );
  const favoriteRowSensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
  );
  // Desktop-only provider reordering: a MouseSensor (no TouchSensor) keeps the
  // section headers tappable/scrollable on touch devices while enabling
  // click-and-drag with a mouse.
  const providerSectionSensors = useSensors(
    useSensor(MouseSensor, { activationConstraint: { distance: 8 } }),
  );

  const allowedProviderSet = React.useMemo(() => {
    if (!allowedProviderIds || allowedProviderIds.length === 0) return null;
    return new Set(allowedProviderIds);
  }, [allowedProviderIds]);

  const providerById = React.useMemo(() => new Map(providers.map((provider) => [provider.id, provider])), [providers]);

  const isHidden = React.useCallback((providerID: string, modelID: string) => {
    return hiddenModels.some((hidden) => hidden.providerID === providerID && hidden.modelID === modelID);
  }, [hiddenModels]);

  const matchesQuery = React.useCallback((modelName: string, providerName: string) => {
    const query = searchQuery.trim().toLowerCase();
    if (!query) return true;
    return modelName.toLowerCase().includes(query) || providerName.toLowerCase().includes(query);
  }, [searchQuery]);

  const filteredFavorites = React.useMemo(() => favoriteModels.filter(({ model, providerID, modelID }) => {
    if (allowedProviderSet && !allowedProviderSet.has(providerID)) return false;
    if (isModelAllowed && !isModelAllowed(providerID, modelID)) return false;
    if (isHidden(providerID, modelID)) return false;
    const providerName = providerById.get(providerID)?.name || providerID;
    return matchesQuery(getModelDisplayName(model), providerName);
  }), [allowedProviderSet, favoriteModels, isHidden, isModelAllowed, matchesQuery, providerById]);

  const filteredRecents = React.useMemo(() => recentModels.filter(({ model, providerID, modelID }) => {
    if (allowedProviderSet && !allowedProviderSet.has(providerID)) return false;
    if (isModelAllowed && !isModelAllowed(providerID, modelID)) return false;
    if (isHidden(providerID, modelID)) return false;
    const providerName = providerById.get(providerID)?.name || providerID;
    return matchesQuery(getModelDisplayName(model), providerName);
  }), [allowedProviderSet, isHidden, isModelAllowed, matchesQuery, providerById, recentModels]);

  const orderedProviders = React.useMemo(() => {
    if (!providerOrder || providerOrder.length === 0) return providers;
    const rank = new Map(providerOrder.map((id, index) => [id, index] as const));
    const ranked = providers
      .filter((provider) => rank.has(provider.id))
      .sort((a, b) => (rank.get(a.id) ?? 0) - (rank.get(b.id) ?? 0));
    const unranked = providers.filter((provider) => !rank.has(provider.id));
    return [...ranked, ...unranked];
  }, [providerOrder, providers]);

  const filteredProviders = React.useMemo(() => orderedProviders
    .filter((provider) => !allowedProviderSet || allowedProviderSet.has(provider.id))
    .map((provider) => {
      const models = Array.isArray(provider.models) ? provider.models : [];
      const filteredModels = models.filter((model) => {
        const modelID = typeof model.id === 'string' ? model.id : '';
        if (!modelID || isHidden(provider.id, modelID)) return false;
        if (isModelAllowed && !isModelAllowed(provider.id, modelID)) return false;
        return matchesQuery(getModelDisplayName(model), provider.name || provider.id);
      });
      return { ...provider, models: filteredModels };
    })
    .filter((provider) => provider.models.length > 0), [allowedProviderSet, isHidden, isModelAllowed, matchesQuery, orderedProviders]);

  const flatModelList = React.useMemo(() => {
    const items: ModelPickerEntry[] = [];
    if (!collapsedSections.has('favorites')) filteredFavorites.forEach((entry) => items.push(entry));
    if (!collapsedSections.has('recent')) filteredRecents.forEach((entry) => items.push(entry));
    filteredProviders.forEach((provider) => {
      if (collapsedSections.has(`provider:${provider.id}`)) return;
      provider.models.forEach((model) => items.push({ model, providerID: provider.id, modelID: model.id as string }));
    });
    return items;
  }, [collapsedSections, filteredFavorites, filteredProviders, filteredRecents]);

  const hasResults = flatModelList.length > 0;
  const favoriteSortingEnabled = Boolean(onReorderFavorite) && searchQuery.trim().length === 0 && filteredFavorites.length > 1;
  const providerSortingEnabled = Boolean(onReorderProvider) && searchQuery.trim().length === 0 && !allowedProviderSet && filteredProviders.length > 1;
  const favoriteLookup: Map<string, ModelPickerEntry> = React.useMemo(() => new Map(
    filteredFavorites.map((entry) => [`${entry.providerID}:${entry.modelID}`, entry] as const),
  ), [filteredFavorites]);

  React.useEffect(() => {
    selectionStore.set(0);
  }, [searchQuery, selectionStore]);

  const selectIndex = React.useCallback((index: number) => {
    selectionStore.set(index);
    onActiveEntryChange?.(flatModelList[index]);
  }, [flatModelList, onActiveEntryChange, selectionStore]);

  const moveSelection = React.useCallback((direction: 1 | -1) => {
    const total = flatModelList.length;
    if (total === 0) return;
    keyboardOwnsSelectionRef.current = true;
    lastMousePositionRef.current = null;
    const currentIndex = selectionStore.getSnapshot();
    const nextIndex = (currentIndex + direction + total) % total;
    selectionStore.set(nextIndex);
    onActiveEntryChange?.(flatModelList[nextIndex]);
    requestAnimationFrame(() => scrollIntoView(scrollRef.current, itemRefs.current[nextIndex]));
  }, [flatModelList, onActiveEntryChange, selectionStore]);

  React.useEffect(() => {
    onActiveEntryChange?.(flatModelList[selectionStore.getSnapshot()]);
  }, [flatModelList, onActiveEntryChange, selectionStore]);

  const handleKeyDown = React.useCallback((event: React.KeyboardEvent) => {
    if (event.defaultPrevented) return;
    event.stopPropagation();
    if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
      const selected = flatModelList[selectionStore.getSnapshot()];
      if (selected && onVariantKey?.(event, selected)) return;
    }
    onActiveKeyDown?.(event, flatModelList[selectionStore.getSnapshot()]);
    if (event.defaultPrevented) return;
    if (event.key === 'ArrowDown') {
      event.preventDefault();
      moveSelection(1);
      return;
    }
    if (event.key === 'ArrowUp') {
      event.preventDefault();
      moveSelection(-1);
      return;
    }
    if (event.key === 'Enter') {
      event.preventDefault();
      const selected = flatModelList[selectionStore.getSnapshot()];
      if (selected && !disabled) onSelect(selected);
      return;
    }
    if (event.key === 'Escape') {
      event.preventDefault();
      onEscape?.();
    }
  }, [disabled, flatModelList, moveSelection, onActiveKeyDown, onEscape, onSelect, onVariantKey, selectionStore]);

  const headerClassName = cn(
    'typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 px-2 py-1.5',
    stickyHeaders && 'sticky top-0 z-10 [background:linear-gradient(var(--surface-elevated),var(--surface-elevated)),linear-gradient(var(--surface-background),var(--surface-background))]',
    sectionHeaderClassName,
  );

  let currentFlatIndex = 0;

  const renderRow = (entry: ModelPickerEntry, keyPrefix: string, showProviderLogo: boolean, rowIndex: number, dragHandleProps?: SortableFavoriteHandleProps | null) => {
    const metadata = mergeModelMetadataWithLiveModel(entry.providerID, entry.model, modelsMetadata.get(`${entry.providerID}/${entry.modelID}`));
    const contextTokens = formatModelContextTokens(metadata?.limit?.context);
    const count = selectionCount?.(entry) ?? 0;
    const isSelected = selectedModel?.providerID === entry.providerID && selectedModel.modelID === entry.modelID;
    const favorite = isFavorite?.(entry) ?? false;

    const handleMouseActivity = (event: React.MouseEvent) => {
      const nextPosition = { x: event.clientX, y: event.clientY };
      const previousPosition = lastMousePositionRef.current;
      const pointerMoved = !previousPosition || previousPosition.x !== nextPosition.x || previousPosition.y !== nextPosition.y;
      lastMousePositionRef.current = nextPosition;

      if (keyboardOwnsSelectionRef.current && !previousPosition) return;
      if (keyboardOwnsSelectionRef.current && !pointerMoved) return;
      if (keyboardOwnsSelectionRef.current && pointerMoved) keyboardOwnsSelectionRef.current = false;
      selectIndex(rowIndex);
    };

    return (
      <ModelPickerRowHighlight key={`${keyPrefix}-${entry.providerID}-${entry.modelID}`} store={selectionStore} index={rowIndex} renderVersion={renderVersion}>
        {(isHighlighted) => {
          const rowElement = (
            <div
              ref={(el) => { itemRefs.current[rowIndex] = el; }}
              role="option"
              aria-selected={isSelected}
              aria-disabled={disabled || undefined}
              tabIndex={-1}
              onClick={() => { if (!disabled) onSelect(entry); }}
              onKeyDown={(event) => {
                if (disabled) return;
                if (event.key === 'Enter' || event.key === ' ') {
                  event.preventDefault();
                  onSelect(entry);
                }
              }}
              onMouseEnter={handleMouseActivity}
              onMouseMove={handleMouseActivity}
              className={cn(
                'w-full text-left px-2 py-1.5 rounded-md typography-meta flex items-center gap-2 cursor-pointer',
                !disabled && (isHighlighted ? 'bg-interactive-selection' : 'hover:bg-interactive-hover/50'),
                disabled && 'cursor-not-allowed opacity-60',
                rowClassName,
              )}
            >
              <div className="flex items-center gap-1.5 flex-1 min-w-0">
                {dragHandleProps ? (
                  <button type="button" ref={dragHandleProps.setActivatorNodeRef} {...dragHandleProps.attributes} {...dragHandleProps.listeners} disabled={disabled} onClick={(event) => { event.preventDefault(); event.stopPropagation(); }} className="model-favorite-drag-handle flex size-4 flex-shrink-0 items-center justify-center text-muted-foreground hover:text-foreground disabled:pointer-events-none" aria-label={reorderFavoriteAriaLabel} title={reorderFavoriteTitle}>
                    <Icon name="draggable" className="size-3.5" />
                  </button>
                ) : null}
                {showProviderLogo ? <ProviderLogo providerId={entry.providerID} className="h-3.5 w-3.5 flex-shrink-0" /> : null}
                <span className="font-medium truncate">{getModelDisplayName(entry.model)}</span>
                {contextTokens ? <span className="typography-micro text-muted-foreground flex-shrink-0">{contextTokens}</span> : null}
              </div>
              {count > 0 ? <span className="typography-micro text-muted-foreground flex-shrink-0">x{count}</span> : null}
              {renderRowEnd?.(entry, { isHighlighted, isSelected })}
              {isSelected ? <Icon name="check" className="h-4 w-4 text-primary flex-shrink-0" /> : null}
              {onToggleFavorite ? (
                <button type="button" disabled={disabled} onClick={(event) => { event.preventDefault(); event.stopPropagation(); onToggleFavorite(entry); }} className={cn('model-favorite-button flex h-4 w-4 items-center justify-center hover:text-primary/80 flex-shrink-0 disabled:pointer-events-none', favorite ? 'text-primary' : 'text-muted-foreground')} aria-label={favorite ? labels.unfavorite : labels.favorite} title={favorite ? labels.unfavorite : labels.favorite}>
                  <Icon name={favorite ? 'star-fill' : 'star'} className="h-3.5 w-3.5" />
                </button>
              ) : null}
            </div>
          );

          return <ModelPickerRowTooltip metadata={metadata} active={tooltipsEnabled && isHighlighted} labels={labels}>{rowElement}</ModelPickerRowTooltip>;
        }}
      </ModelPickerRowHighlight>
    );
  };

  const handleFavoriteDragEnd = (event: DragEndEvent) => {
    if (!onReorderFavorite) return;
    const { active, over } = event;
    if (!over || active.id === over.id) return;

    const activeFavorite = favoriteLookup.get(String(active.id));
    const overFavorite = favoriteLookup.get(String(over.id));
    if (!activeFavorite || !overFavorite) return;

    onReorderFavorite(activeFavorite, overFavorite);
  };

  const handleProviderDragEnd = (event: DragEndEvent) => {
    if (!onReorderProvider) return;
    const { active, over } = event;
    if (!over || active.id === over.id) return;

    const ids = orderedProviders.map((provider) => provider.id);
    const from = ids.indexOf(String(active.id));
    const to = ids.indexOf(String(over.id));
    if (from === -1 || to === -1) return;

    onReorderProvider(arrayMove(ids, from, to));
  };

  const isSectionCollapsed = (key: string) => collapsedSections.has(key);
  const toggleSectionCollapsed = (key: string) => toggleSection(key);

  const renderSectionHeader = (key: string, icon: React.ReactNode, label: React.ReactNode, headerDragProps?: SortableFavoriteHandleProps) => {
    const collapsed = isSectionCollapsed(key);
    const toggleKeyDown = (event: React.KeyboardEvent) => {
      if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        toggleSectionCollapsed(key);
      }
    };

    // When the section is reorderable, the whole header acts as the drag
    // activator (desktop mouse, with an 8px threshold so a plain click still
    // toggles collapse). A <button> cannot be the activator because dnd-kit's
    // attributes/listeners turn it into a draggable widget, so render a div
    // with button semantics. The drag listeners are spread first so our
    // onClick/onKeyDown collapse handlers take precedence.
    if (headerDragProps) {
      return (
        <div
          ref={headerDragProps.setActivatorNodeRef}
          {...headerDragProps.attributes}
          {...headerDragProps.listeners}
          role="button"
          tabIndex={0}
          aria-expanded={!collapsed}
          title={reorderProviderTitle}
          className={cn(headerClassName, 'w-full text-left cursor-grab select-none active:cursor-grabbing')}
          onClick={() => toggleSectionCollapsed(key)}
          onKeyDown={toggleKeyDown}
        >
          <Icon name="draggable" className="size-3.5 flex-shrink-0 text-muted-foreground/70" />
          {icon}
          <span className="min-w-0 truncate">{label}</span>
          <span className="ml-auto flex size-4 flex-shrink-0 items-center justify-center text-muted-foreground">
            <Icon name={collapsed ? 'arrow-right-s' : 'arrow-down-s'} className="size-4" />
          </span>
        </div>
      );
    }

    return (
      <button
        type="button"
        className={cn(headerClassName, 'w-full text-left cursor-pointer')}
        onClick={() => toggleSectionCollapsed(key)}
        aria-expanded={!collapsed}
      >
        {icon}
        <span className="min-w-0 truncate">{label}</span>
        <span className="ml-auto flex size-4 flex-shrink-0 items-center justify-center text-muted-foreground">
          <Icon name={collapsed ? 'arrow-right-s' : 'arrow-down-s'} className="size-4" />
        </span>
      </button>
    );
  };

  const renderProviderSection = (
    provider: (typeof filteredProviders)[number],
    providerIndex: number,
    headerDragProps?: SortableFavoriteHandleProps,
  ) => (
    <>
      {providerIndex > 0 ? <div className="h-px bg-border/40 my-1" /> : null}
      {renderSectionHeader(`provider:${provider.id}`, <ProviderLogo providerId={provider.id} className="h-4 w-4 flex-shrink-0" />, provider.name || provider.id, headerDragProps)}
      {!isSectionCollapsed(`provider:${provider.id}`)
        ? provider.models.map((model) => renderRow({ model, providerID: provider.id, modelID: model.id as string }, 'provider', false, currentFlatIndex++))
        : null}
    </>
  );

  return (
    <>
      <div className="px-2 py-1 border-b border-border/40">
        <div className="relative">
          <Icon name="search" className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
          <Input
            type="text"
            placeholder={labels.searchPlaceholder}
            value={searchQuery}
            onChange={(event) => onSearchQueryChange(event.target.value)}
            onKeyDown={handleKeyDown}
            className="h-7 rounded-none bg-transparent pl-8 pr-0 typography-meta ring-0 hover:[&:not(:focus)]:bg-transparent focus:ring-0 focus-visible:ring-0"
            autoFocus={autoFocus}
          />
        </div>
      </div>

      <ScrollableOverlay ref={scrollRef} outerClassName={maxHeightClassName} className="overlay-scrollbar-target--no-gutter" style={maxHeightStyle}>
        <div className="px-1">
          {includeNotSelected ? (
            <>
              <button
                type="button"
                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 typography-meta text-muted-foreground hover:bg-interactive-hover/50"
                onClick={onSelectNone}
              >
                <Icon name="close" className="h-3.5 w-3.5" />
                <span>{labels.notSelected}</span>
                {!selectedModel ? <Icon name="check" className="h-4 w-4 text-primary ml-auto" /> : null}
              </button>
              <div className="h-px bg-border/40 my-1" />
            </>
          ) : null}

          {!hasResults ? (
            <div className="px-2 py-4 text-center typography-meta text-muted-foreground">{labels.noResults}</div>
          ) : null}

          {filteredFavorites.length > 0 ? (
            <div>
              {renderSectionHeader('favorites', <Icon name="star-fill" className="h-4 w-4 text-primary" />, labels.favorites)}
              {!isSectionCollapsed('favorites') && (favoriteSortingEnabled ? (
                <DndContext sensors={favoriteRowSensors} collisionDetection={closestCenter} onDragEnd={handleFavoriteDragEnd}>
                  <SortableContext items={filteredFavorites.map((entry) => `${entry.providerID}:${entry.modelID}`)} strategy={verticalListSortingStrategy}>
                    {filteredFavorites.map((entry) => {
                      const rowIndex = currentFlatIndex++;
                      return (
                        <SortableFavoriteModelRow key={`fav-sortable-${entry.providerID}-${entry.modelID}`} id={`${entry.providerID}:${entry.modelID}`} disabled={disabled}>
                          {(dragHandleProps) => renderRow(entry, 'fav', true, rowIndex, dragHandleProps)}
                        </SortableFavoriteModelRow>
                      );
                    })}
                  </SortableContext>
                </DndContext>
              ) : filteredFavorites.map((entry) => renderRow(entry, 'fav', true, currentFlatIndex++)))}
            </div>
          ) : null}

          {filteredRecents.length > 0 ? (
            <div>
              {filteredFavorites.length > 0 ? <div className="h-px bg-border/40 my-1" /> : null}
              {renderSectionHeader('recent', <Icon name="time" className="h-4 w-4" />, labels.recent)}
              {!isSectionCollapsed('recent') ? filteredRecents.map((entry) => renderRow(entry, 'recent', true, currentFlatIndex++)) : null}
            </div>
          ) : null}

          {(filteredFavorites.length > 0 || filteredRecents.length > 0) && filteredProviders.length > 0 ? <div className="h-px bg-border/40 my-1" /> : null}

          {providerSortingEnabled ? (
            <DndContext sensors={providerSectionSensors} collisionDetection={closestCenter} onDragEnd={handleProviderDragEnd}>
              <SortableContext items={filteredProviders.map((provider) => provider.id)} strategy={verticalListSortingStrategy}>
                {filteredProviders.map((provider, providerIndex) => (
                  <SortableProviderSection key={provider.id} id={provider.id} disabled={disabled}>
                    {(dragHandleProps) => renderProviderSection(provider, providerIndex, dragHandleProps)}
                  </SortableProviderSection>
                ))}
              </SortableContext>
            </DndContext>
          ) : (
            filteredProviders.map((provider, providerIndex) => (
              <div key={provider.id}>
                {renderProviderSection(provider, providerIndex)}
              </div>
            ))
          )}
        </div>
      </ScrollableOverlay>

      <div className="px-3 pt-1 pb-1.5 border-t border-border/40 typography-micro text-muted-foreground">
        <ModelPickerFooter store={selectionStore} flatModelList={flatModelList} footerContent={footerContent} fallback={labels.keyboardHint} />
      </div>
    </>
  );
};