perf: Optimize recommendation system and improve error handling

- Fix N+1 query problem in preset package fetching
  * Search with limit 5 to find best matches
  * Case-insensitive package name matching
  * Fallback to most popular when no exact match

- Improve category filtering accuracy
  * Update category mapping to match database schema
  * Remove duplicate packages in category fetching
  * Better distribution across categories

- Add version control for localStorage profile
  * Support future schema migrations
  * Auto-migrate old profiles to new version
  * Persist version in localStorage

- Enhance error handling
  * Specific error messages for 400/500/404 responses
  * Network error detection
  * User-friendly error messages in UI

- Fix OS detection fallback
  * Default to ubuntu when detection returns unknown
  * Prevent empty OS selection in onboarding

- Add better API validation
  * Explicit limit range validation (1-50)
  * Clear error messages for invalid inputs

src/components/OnboardingModal.tsx

@@ -38,7 +38,10 @@ export function OnboardingModal({
     const { t } = useLocale()
     const [step, setStep] = useState(1)
     const [selectedCategories, setSelectedCategories] = useState<UserCategory[]>([])
-    const [selectedOS, setSelectedOS] = useState<string>(detectedOS)
+    // Default to ubuntu if OS detection fails
+    const [selectedOS, setSelectedOS] = useState<string>(
+        detectedOS !== 'unknown' ? detectedOS : 'ubuntu'
+    )
     const [experienceLevel, setExperienceLevel] = useState<ExperienceLevel>('beginner')
 
     if (!isOpen) return null

src/components/RecommendationsSection.tsx

@@ -49,14 +49,30 @@ export function RecommendationsSection({
             })
 
             if (!response.ok) {
-                throw new Error('Failed to fetch recommendations')
+                const errorData = await response.json().catch(() => ({}))
+                
+                if (response.status === 400) {
+                    throw new Error(errorData.error || 'Invalid request parameters')
+                } else if (response.status === 500) {
+                    throw new Error('Server error. Please try again later.')
+                } else if (response.status === 404) {
+                    throw new Error('Recommendation service not available')
+                } else {
+                    throw new Error(`Request failed: ${response.statusText}`)
+                }
             }
 
             const data = await response.json()
             setRecommendations(data.recommendations || [])
         } catch (err) {
             console.error('Error fetching recommendations:', err)
-            setError(err instanceof Error ? err.message : 'Unknown error')
+            
+            // User-friendly error messages
+            if (err instanceof TypeError && err.message.includes('fetch')) {
+                setError('Network error. Please check your internet connection.')
+            } else {
+                setError(err instanceof Error ? err.message : 'Failed to load recommendations')
+            }
         } finally {
             setLoading(false)
         }