claude-code/packages/remote-control-server/web/components/model-selector/ModelSelectorPicker.tsx

import { useState, useMemo } from "react";
import { Check } from "lucide-react";
import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
} from "../ui/command";
import type { ModelInfo } from "../../src/acp/types";
import { cn } from "../../src/lib/utils";

interface ModelSelectorPickerProps {
  models: ModelInfo[];
  currentModelId: string | null;
  onSelect: (model: ModelInfo) => void;
  /** Whether to show the search input (default: true) */
  showSearch?: boolean;
  /** Whether we're on a mobile device (disables auto-selection) */
  isMobile?: boolean;
}

/**
 * Fuzzy search implementation for model filtering.
 * Reference: Zed's fuzzy_search() in model_selector.rs
 */
function fuzzyMatch(query: string, text: string): boolean {
  if (!query) return true;
  const lowerQuery = query.toLowerCase();
  const lowerText = text.toLowerCase();

  // Simple fuzzy match - check if all query chars appear in order
  let queryIdx = 0;
  for (let i = 0; i < lowerText.length && queryIdx < lowerQuery.length; i++) {
    if (lowerText[i] === lowerQuery[queryIdx]) {
      queryIdx++;
    }
  }
  return queryIdx === lowerQuery.length;
}

/**
 * Model picker using cmdk Command component.
 * Reference: Zed's AcpModelPickerDelegate with fuzzy search support.
 */
export function ModelSelectorPicker({
  models,
  currentModelId,
  onSelect,
  showSearch = true,
  isMobile = false,
}: ModelSelectorPickerProps) {
  const [search, setSearch] = useState("");
  // On mobile, don't auto-select first item (no keyboard navigation needed)
  // Use a non-existent value to prevent any item from being selected
  const [selectedValue, setSelectedValue] = useState(isMobile ? "__none__" : undefined);

  // Filter models using fuzzy search
  const filteredModels = useMemo(() => {
    if (!search) return models;
    return models.filter((model) =>
      fuzzyMatch(search, model.name) ||
      fuzzyMatch(search, model.modelId)
    );
  }, [models, search]);

  return (
    <Command shouldFilter={false} value={selectedValue} onValueChange={setSelectedValue}>
      {showSearch && (
        <CommandInput
          placeholder="Select a model…"
          value={search}
          onValueChange={setSearch}
        />
      )}
      <CommandList>
        <CommandEmpty>No models found.</CommandEmpty>
        <CommandGroup>
          {filteredModels.map((model) => (
            <CommandItem
              key={model.modelId}
              value={model.modelId}
              onSelect={() => onSelect(model)}
              className="flex items-center justify-between gap-2"
            >
              <div className="flex flex-col gap-0.5 min-w-0">
                <span className="truncate font-medium">{model.name}</span>
                {model.description && (
                  <span className="text-xs text-muted-foreground truncate">
                    {model.description}
                  </span>
                )}
              </div>
              <Check
                className={cn(
                  "h-4 w-4 shrink-0",
                  currentModelId === model.modelId ? "opacity-100" : "opacity-0"
                )}
              />
            </CommandItem>
          ))}
        </CommandGroup>
      </CommandList>
    </Command>
  );
}