feat: smart package recommendations with UX improvements

- Added smart recommendations section with category-based filtering
- Implemented onboarding flow with 3-step wizard (categories, OS, experience level)
- Added 'Select All/Deselect All' for recommendations
- Added 'Preferences' button in header to reopen onboarding
- Fixed script generation for recommendation-based packages (auto-detect platform)
- Fixed onboarding completion bug (removed duplicate save)
- Added comprehensive debug logging
- Enhanced ScriptPreview to work with auto-generated platform info
- Optimized recommendation API with proper validation and error handling
- Added localStorage profile management with version control

src/components/RepoHubApp.tsx

@@ -26,7 +26,6 @@ function RepoHubAppContent({ cryptomusEnabled }: { cryptomusEnabled: boolean })
     profile,
     isLoading: isProfileLoading,
     hasCompletedOnboarding,
-    completeOnboarding,
     saveProfile,
     detectedOS
   } = useRecommendationProfile()
@@ -49,13 +48,22 @@ function RepoHubAppContent({ cryptomusEnabled }: { cryptomusEnabled: boolean })
     selectedOS?: string
     experienceLevel: ExperienceLevel
   }) => {
-    saveProfile({
+    console.log('🎯 Onboarding completed with data:', data)
+
+    const success = saveProfile({
       categories: data.categories,
       selectedOS: data.selectedOS,
       experienceLevel: data.experienceLevel,
       hasCompletedOnboarding: true
     })
-    completeOnboarding()
+
+    console.log('💾 Profile save result:', success)
+
+    // Don't call completeOnboarding() - it causes a second save with empty state!
+    // completeOnboarding()
+
+    // Force close modal
+    setShowOnboarding(false)
   }
 
   const handleCustomizePreferences = () => {
@@ -89,9 +97,64 @@ function RepoHubAppContent({ cryptomusEnabled }: { cryptomusEnabled: boolean })
   }
 
   const handleGenerateScript = () => {
-    if (selectedPlatform && selectedPackages.length > 0) {
-      const script = generateScript(selectedPackages, selectedPlatform)
+    console.log('🔧 handleGenerateScript called')
+    console.log('📦 selectedPackages:', selectedPackages)
+    console.log('🖥️ selectedPlatform:', selectedPlatform)
+    console.log('✅ hasCompletedOnboarding:', hasCompletedOnboarding)
+
+    if (selectedPackages.length === 0) {
+      console.log('❌ No packages selected')
+      return
+    }
+
+    // Use selected platform, or if not selected, use the platform from recommendations profile
+    let platformToUse = selectedPlatform
+
+    if (!platformToUse && hasCompletedOnboarding) {
+      // Get effective OS from profile and find matching platform
+      const effectiveOS = profile.selectedOS || detectedOS
+      console.log('🔍 effectiveOS:', effectiveOS)
+
+      // We need to fetch the platform data - for now, create a mock platform
+      // This should ideally come from the platforms list
+      if (effectiveOS) {
+        platformToUse = {
+          id: effectiveOS,
+          name: effectiveOS.charAt(0).toUpperCase() + effectiveOS.slice(1),
+          description: '',
+          icon: '',
+          packageManager: getPackageManagerForOS(effectiveOS)
+        }
+        console.log('🎯 Created platform:', platformToUse)
+      }
+    }
+
+    if (platformToUse) {
+      console.log('✨ Generating script for platform:', platformToUse)
+      const script = generateScript(selectedPackages, platformToUse)
+      console.log('📝 Script generated:', script)
       setGeneratedScript(script)
+    } else {
+      console.log('❌ No platform available')
+    }
+  }
+
+  // Helper function to get package manager for OS
+  const getPackageManagerForOS = (os: string): string => {
+    switch (os.toLowerCase()) {
+      case 'windows':
+        return 'winget'
+      case 'macos':
+        return 'brew'
+      case 'ubuntu':
+      case 'debian':
+        return 'apt'
+      case 'fedora':
+        return 'dnf'
+      case 'arch':
+        return 'pacman'
+      default:
+        return 'unknown'
     }
   }
 
@@ -106,7 +169,11 @@ function RepoHubAppContent({ cryptomusEnabled }: { cryptomusEnabled: boolean })
 
   return (
     <div key={locale} className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
-      <Header cryptomusEnabled={cryptomusEnabled} />
+      <Header
+        cryptomusEnabled={cryptomusEnabled}
+        onResetPreferences={handleCustomizePreferences}
+        hasProfile={hasCompletedOnboarding}
+      />
 
       <div className="container mx-auto px-4 py-8">
         {/* Header */}
@@ -161,7 +228,13 @@ function RepoHubAppContent({ cryptomusEnabled }: { cryptomusEnabled: boolean })
           <ScriptPreview
             generatedScript={generatedScript}
             selectedPackages={selectedPackages}
-            selectedPlatform={selectedPlatform}
+            selectedPlatform={selectedPlatform || {
+              id: generatedScript.platform,
+              name: generatedScript.platform.charAt(0).toUpperCase() + generatedScript.platform.slice(1),
+              description: '',
+              icon: '',
+              packageManager: getPackageManagerForOS(generatedScript.platform)
+            }}
             onClose={handleCloseScriptPreview}
           />
         )}