Function CreateProjectModal

components/modals/CreateProjectModal.tsx:118–989

({ open, onClose, onCreated, onOpenGlobalSettings }: CreateProjectModalProps)

}

export default function CreateProjectModal({ open, onClose, onCreated, onOpenGlobalSettings }: CreateProjectModalProps) {
  const [projectName, setProjectName] = useState('');
  const [prompt, setPrompt] = useState('');
  const [selectedCLI, setSelectedCLI] = useState<string>('claude');
  const [selectedModel, setSelectedModel] = useState<string>(DEFAULT_MODEL_ID);
  // Fallback is removed but kept for backward compatibility
  const [fallbackEnabled, setFallbackEnabled] = useState(false);
  const [useDefaultSettings, setUseDefaultSettings] = useState(true);
  const [loading, setLoading] = useState(false);
  const [initializationStep, setInitializationStep] = useState('');
  const [showInitialization, setShowInitialization] = useState(false);
  const [initializingProjectId, setInitializingProjectId] = useState<string | null>(null);
  const [globalSettings, setGlobalSettings] = useState<GlobalSettings | null>(null);
  const [enabledCLIs, setEnabledCLIs] = useState<CLIOption[]>([]);
  const [cliStatus, setCLIStatus] = useState<CLIStatus>(() => createCliStatusFallback());
  const [imageUrl, setImageUrl] = useState('');
  const [websiteUrl, setWebsiteUrl] = useState('');
  const [imageError, setImageError] = useState('');
  const [showImageInput, setShowImageInput] = useState(false);
  const [showWebsiteInput, setShowWebsiteInput] = useState(false);
  const [showCLIDropdown, setShowCLIDropdown] = useState(false);
  const [showModelDropdown, setShowModelDropdown] = useState(false);
  const router = useRouter();

  const loadGlobalSettings = useCallback(async () => {
    try {
      const [settingsResponse, cliStatuses] = await Promise.all([
        fetch(`${API_BASE}/api/settings/global`),
        fetchCliStatusSnapshot(),
      ]);

      setCLIStatus(cliStatuses);

      let settings: GlobalSettings | null = null;
      if (settingsResponse.ok) {
        settings = await settingsResponse.json();
        if (settings?.cli_settings) {
          for (const [cli, config] of Object.entries(settings.cli_settings)) {
            if (config && typeof config === 'object' && 'model' in config && config.model) {
              config.model = sanitizeModel(cli, config.model as string);
            }
          }
        }
        setGlobalSettings(settings);
      }

      if (settings) {
        const enabled = CLI_OPTIONS.filter((cli) => {
          const isEnabled = settings.cli_settings?.[cli.id]?.enabled !== false;
          const isInstalled = cliStatuses[cli.id]?.installed !== false;
          const isAvailable = cli.enabled !== false;
          return isEnabled && isInstalled && isAvailable;
        });

        const effectiveCLIs = enabled.length > 0 ? enabled : CLI_OPTIONS.filter((cli) => cli.enabled !== false);
        setEnabledCLIs(effectiveCLIs);

        const defaultCLI = settings.default_cli || 'claude';