fix(frontend): NaN errors and AnimatePresence warnings (#154)

Bug fixes:
1. NaN/division by zero - Added safe value guards in IndexingProgress
   - safePercent, safeFilesProcessed, safeFilesTotal, safeFunctionsFound
   - Shows 'Starting...' when filesTotal is 0
   - Stats show '—' instead of NaN/0/0

2. AnimatePresence warnings - Moved error state inside AnimatePresence
   - Error state now has proper key and exit animation
   - Visibility conditions properly exclude simultaneous renders
   - Changed error styling from red to amber (friendlier)

3. Session state - Error states now properly clear other states
   - showUrlInput excludes error state
   - showValidation excludes error state
   - showIndexing excludes wsHasError

Closes #154

Author: DevanshuNEU

frontend/src/components/playground/HeroPlayground.tsx

@@ -169,11 +169,13 @@ export function HeroPlayground({
   }, [state]);
 
   // Determine visibility states
+  const hasError = state.status === 'error' || wsHasError;
   const showDemoSelector = mode === 'demo';
-  const showUrlInput = mode === 'custom' && !['indexing', 'ready'].includes(state.status) && !showCelebration && !wsIsCompleted;
-  const showValidation = mode === 'custom' && ['validating', 'valid', 'invalid'].includes(state.status) && !showCelebration;
-  const showIndexing = mode === 'custom' && state.status === 'indexing' && !showCelebration && !wsIsCompleted;
+  const showUrlInput = mode === 'custom' && !['indexing', 'ready', 'error'].includes(state.status) && !showCelebration && !wsIsCompleted && !wsHasError;
+  const showValidation = mode === 'custom' && ['validating', 'valid', 'invalid'].includes(state.status) && !showCelebration && !hasError;
+  const showIndexing = mode === 'custom' && state.status === 'indexing' && !showCelebration && !wsIsCompleted && !wsHasError;
   const showReady = (mode === 'custom' && state.status === 'ready') || (wsIsCompleted && !showCelebration);
+  const showError = mode === 'custom' && hasError && !showCelebration;
   const isSearchDisabled = mode === 'custom' && state.status !== 'ready' && !wsIsCompleted;
 
   // Can search?
@@ -350,6 +352,34 @@ export function HeroPlayground({
             </button>
           </motion.div>
         )}
+
+        {/* Error State - Inside AnimatePresence to prevent simultaneous renders */}
+        {showError && (
+          <motion.div
+            key="error"
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            className="mb-4 px-4 py-3 rounded-xl bg-amber-500/10 border border-amber-500/20"
+          >
+            <div className="flex items-start gap-3">
+              <span className="text-amber-400 text-lg">⚠️</span>
+              <div className="flex-1">
+                <p className="text-amber-200 text-sm font-medium mb-1">Something went wrong</p>
+                <p className="text-zinc-400 text-sm">
+                  {state.status === 'error' ? state.message : wsError || 'An unexpected error occurred'}
+                </p>
+                <button 
+                  type="button"
+                  onClick={handleIndexAnother}
+                  className="mt-3 text-sm text-amber-400 hover:text-amber-300 transition-colors font-medium"
+                >
+                  ← Try again with a different repository
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        )}
       </AnimatePresence>
 
       {/* Search Box */}
@@ -407,26 +437,6 @@ export function HeroPlayground({
         </>
       )}
 
-      {/* Error State */}
-      {(state.status === 'error' || wsHasError) && (
-        <motion.div
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="mt-4 px-4 py-3 rounded-xl bg-red-500/10 border border-red-500/20"
-        >
-          <p className="text-red-300 text-sm">
-            {state.status === 'error' ? state.message : wsError}
-          </p>
-          <button 
-            type="button"
-            onClick={handleIndexAnother}
-            className="mt-2 text-xs text-red-400 hover:text-red-300 transition-colors"
-          >
-            Try again
-          </button>
-        </motion.div>
-      )}
-
       {/* Upgrade CTA (when limit reached) */}
       {remaining <= 0 && (
         <div className="mt-6 p-4 rounded-xl bg-gradient-to-r from-indigo-600/20 to-purple-600/20 border border-indigo-500/30 text-center">

frontend/src/components/playground/IndexingProgress.tsx

@@ -267,10 +267,19 @@ export function IndexingProgress({
 }: IndexingProgressProps) {
   const { percent, filesProcessed, filesTotal, currentFile, functionsFound } = progress;
 
-  // Estimate remaining time
+  // Safe values to prevent NaN/division by zero
+  const safePercent = Number.isFinite(percent) ? Math.max(0, Math.min(100, percent)) : 0;
+  const safeFilesProcessed = Number.isFinite(filesProcessed) ? Math.max(0, filesProcessed) : 0;
+  const safeFilesTotal = Number.isFinite(filesTotal) ? Math.max(0, filesTotal) : 0;
+  const safeFunctionsFound = Number.isFinite(functionsFound) ? Math.max(0, functionsFound) : 0;
+  
+  // Is this the initial "starting" state?
+  const isStarting = safeFilesTotal === 0 || (safePercent === 0 && safeFilesProcessed === 0);
+  
+  // Estimate remaining time (only when we have real data)
   const estimatedRemaining = (() => {
-    if (percent <= 0 || filesProcessed <= 0) return null;
-    const remainingFiles = Math.ceil((filesProcessed / percent) * (100 - percent));
+    if (isStarting || safePercent <= 0 || safeFilesProcessed <= 0) return null;
+    const remainingFiles = Math.ceil((safeFilesProcessed / safePercent) * (100 - safePercent));
     return Math.max(1, Math.ceil(remainingFiles * 0.15));
   })();
 
@@ -287,7 +296,7 @@ export function IndexingProgress({
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       role="status"
-      aria-label={`Indexing ${repoName || 'repository'}: ${percent}% complete`}
+      aria-label={`Indexing ${repoName || 'repository'}: ${safePercent}% complete`}
     >
       {/* Header */}
       <div className="px-5 py-4 border-b border-zinc-800/50 bg-gradient-to-r from-zinc-900 to-zinc-900/50">
@@ -308,12 +317,12 @@ export function IndexingProgress({
           </div>
           <motion.span 
             className="text-3xl font-bold text-indigo-400"
-            key={percent}
+            key={safePercent}
             initial={{ scale: 1.3 }}
             animate={{ scale: 1 }}
             transition={{ type: 'spring', stiffness: 300 }}
           >
-            {percent}%
+            {safePercent}%
           </motion.span>
         </div>
 
@@ -323,16 +332,29 @@ export function IndexingProgress({
 
       {/* Progress bar */}
       <div className="px-5 py-4">
-        <GlowingProgress value={percent} />
+        <GlowingProgress value={safePercent} />
       </div>
 
       {/* Stats grid */}
       <div className="px-5 py-4 bg-zinc-900/50 border-t border-b border-zinc-800/50">
         <div className="grid grid-cols-4 gap-4">
-          <StatCard label="Files" value={`${filesProcessed}/${filesTotal}`} />
-          <StatCard label="Functions" value={functionsFound} highlight />
-          <StatCard label="Remaining" value={estimatedRemaining ? `~${estimatedRemaining}s` : '—'} />
-          <StatCard label="Speed" value={filesProcessed > 0 ? `${Math.round(functionsFound / filesProcessed)}/file` : '—'} />
+          <StatCard 
+            label="Files" 
+            value={isStarting ? 'Starting...' : `${safeFilesProcessed}/${safeFilesTotal}`} 
+          />
+          <StatCard 
+            label="Functions" 
+            value={isStarting ? '—' : safeFunctionsFound} 
+            highlight={!isStarting && safeFunctionsFound > 0} 
+          />
+          <StatCard 
+            label="Remaining" 
+            value={estimatedRemaining ? `~${estimatedRemaining}s` : '—'} 
+          />
+          <StatCard 
+            label="Speed" 
+            value={safeFilesProcessed > 0 ? `${Math.round(safeFunctionsFound / safeFilesProcessed)}/file` : '—'} 
+          />
         </div>
       </div>