Function ModelWizard

src/components/ModelWizard.tsx:25–744

({ onClose }: ModelWizardProps)

}

export function ModelWizard({ onClose }: ModelWizardProps) {
  const [step, setStep] = useState(1);
  const [useCase, setUseCase] = useState<'coding' | 'chat' | 'agents'>('chat');
  const [recommendations, setRecommendations] = useState<ModelRecommendation[]>([]);
  const [selectedModel, setSelectedModel] = useState<ModelRecommendation | null>(null);
  const [availableFiles, setAvailableFiles] = useState<HfModelFile[]>([]);
  const [selectedFile, setSelectedFile] = useState<HfModelFile | null>(null);
  const [loadingRecs, setLoadingRecs] = useState(false);
  const [recError, setRecError] = useState<string | null>(null);
  const [loadingFiles, setLoadingFiles] = useState(false);
  const [filesError, setFilesError] = useState<string | null>(null);
  const [downloading, setDownloading] = useState(false);
  const [downloadProgress, setDownloadProgress] = useState<DownloadProgress | null>(null);
  const [activeDownloadModelName, setActiveDownloadModelName] = useState<string | null>(null);
  const [wizardStage, setWizardStage] = useState<string | null>(null);
  const { hardwareInfo, isDetecting, redetect } = useHardwareInfo();
  const { openRouterApiKey, claudeApiKey, openAiApiKey, recommendationApiKey, hfToken } = useAppStore();
  const hasAnyApiKey = !!(openRouterApiKey || recommendationApiKey || claudeApiKey || openAiApiKey);
  const recommendationRequestRef = useRef(0);
  const filesRequestRef = useRef(0);
  const lastAutoFetchKeyRef = useRef<string | null>(null);

  const useCaseDescriptions = {
    coding: 'Optimized for code generation, refactoring, and technical tasks',
    chat: 'Best for conversational AI and general-purpose interactions',
    agents: 'Specialized for tool-calling and autonomous task execution',
  };

  const availableMemory = useMemo(
    () => hardwareInfo ? Math.max(hardwareInfo.ram_gb, hardwareInfo.vram_gb) : 8,
    [hardwareInfo],
  );

  const recommendedFilename = useMemo(() => {
    if (!selectedModel || availableFiles.length === 0) {
      return null;
    }

    return (
      availableFiles.find((file) => file.filename === selectedModel.filename)?.filename
      || availableFiles.find((file) => file.quantization === selectedModel.quantization)?.filename
      || availableFiles[0]?.filename
      || null
    );
  }, [availableFiles, selectedModel]);

  useEffect(() => {
    const autoFetchKey = step === 3 && hardwareInfo
      ? `${useCase}:${hardwareInfo.ram_gb}:${hardwareInfo.vram_gb}:${hasAnyApiKey}`
      : null;

    if (
      step === 3
      && hardwareInfo
      && recommendations.length === 0
      && !loadingRecs
      && hasAnyApiKey
      && autoFetchKey