Function OpenRouterModelSelector

packages/web/src/routes/settings.tsx:497–591

({ onSelectModel, currentModel }: OpenRouterModelSelectorProps)

};

function OpenRouterModelSelector({ onSelectModel, currentModel }: OpenRouterModelSelectorProps) {
  const { openRouterModels, isLoadingOpenRouterModels, refreshOpenRouterModels } = useSettings();

  // Format model ID for display - show just the model name, not the full provider/model path
  function formatModelName(modelId: string): string {
    // Validate input to ensure we never return undefined
    if (typeof modelId !== 'string' || modelId.length === 0) {
      return '';
    }

    // Split by / and take the last part if it exists
    const parts = modelId.split('/');
    if (parts.length > 1) {
      // @ts-expect-error - We know this is valid based on the length check
      return parts[parts.length - 1];
    }

    // Return the original value
    return modelId;
  }

  // Get model display name with helpful context
  const getModelDisplayName = (model: OpenRouterModel): string => {
    // model.id is defined as string in OpenRouterModel type
    const baseName = model.name || formatModelName(model.id);
    const contextLength = model.context_length
      ? ` (${Math.floor(model.context_length / 1000)}k ctx)`
      : '';
    return `${baseName}${contextLength}`;
  };

  return (
    <div className="space-y-2">
      <div className="flex items-center gap-2">
        <span className="text-sm opacity-70">Select an OpenRouter model:</span>
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                size="icon"
                variant="ghost"
                className="h-6 w-6"
                onClick={refreshOpenRouterModels}
                disabled={isLoadingOpenRouterModels}
                aria-label="Refresh model list"
              >
                <RefreshCw size={16} className={isLoadingOpenRouterModels ? 'animate-spin' : ''} />
              </Button>
            </TooltipTrigger>
            <TooltipContent>
              <p>Refresh model list</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      </div>

      {isLoadingOpenRouterModels ? (
        <div className="flex items-center gap-2 text-sm opacity-70">