feat(frontend): WebSocket real-time indexing progress (#115)

🚀 Features:
- useIndexingWebSocket hook with auto-reconnect & polling fallback
- Streaming file list - shows files appearing in real-time
- Enhanced IndexingProgress with phase indicators & glow effects
- IndexingComplete celebration screen with confetti & animated stats
- Integrated WebSocket into HeroPlayground component

📁 Files:
- NEW: hooks/useIndexingWebSocket.ts (WebSocket state machine)
- NEW: components/playground/IndexingComplete.tsx (celebration UI)
- UPDATED: components/playground/IndexingProgress.tsx (streaming file list)
- UPDATED: components/playground/HeroPlayground.tsx (WS integration)
- UPDATED: components/playground/index.ts (exports)

🎨 UX Highlights:
- Files stream in real-time as they're processed
- Phase indicator: Clone → Index → Done
- Glowing progress bar
- Confetti on completion
- Animated stat counters

Connects to backend WebSocket endpoint from PR #150

Author: DevanshuNEU

frontend/src/components/playground/HeroPlayground.tsx

@@ -1,21 +1,32 @@
 /**
- * HeroPlayground
+ * HeroPlayground (v2 - WebSocket Enhanced)
  * 
  * Combined demo + custom repo experience for the landing page hero.
- * Handles mode switching, URL validation, indexing, and search.
+ * Now with real-time WebSocket progress updates and streaming file list.
+ * 
+ * Features:
+ * - Mode switching (demo/custom)
+ * - URL validation
+ * - Real-time indexing progress via WebSocket
+ * - Streaming file list (the "holy shit" moment)
+ * - Celebration screen on completion
  */
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
 import { Button } from '@/components/ui/button';
 import { 
   RepoModeSelector, 
   RepoUrlInput, 
   ValidationStatus, 
   IndexingProgress,
-  type RepoMode 
+  IndexingComplete,
+  type RepoMode,
+  type IndexingPhase,
 } from '@/components/playground';
 import { useAnonymousSession } from '@/hooks/useAnonymousSession';
+import { useIndexingWebSocket } from '@/hooks/useIndexingWebSocket';
 import { cn } from '@/lib/utils';
 
 // Demo repos config
@@ -62,18 +73,46 @@ export function HeroPlayground({
   const [selectedDemo, setSelectedDemo] = useState(DEMO_REPOS[0].id);
   const [customUrl, setCustomUrl] = useState('');
   const [query, setQuery] = useState('');
+  const [showCelebration, setShowCelebration] = useState(false);
 
-  // Anonymous session hook for custom repos
-  const { state, validateUrl, startIndexing, reset, session } = useAnonymousSession();
+  // Anonymous session hook for validation and job creation
+  const { state, validateUrl, startIndexing, reset: resetSession, session } = useAnonymousSession();
+
+  // Extract jobId for WebSocket connection
+  const jobId = state.status === 'indexing' ? state.jobId : null;
+  const repoName = customUrl.split('/').pop()?.replace('.git', '') || 'repository';
+
+  // WebSocket hook for real-time progress
+  const wsState = useIndexingWebSocket(jobId, {
+    maxRecentFiles: 12,
+    onCompleted: (repoId, stats) => {
+      console.log('[HeroPlayground] Indexing completed:', repoId, stats);
+      setShowCelebration(true);
+    },
+    onError: (error, recoverable) => {
+      console.error('[HeroPlayground] Indexing error:', error, recoverable);
+    },
+  });
+
+  // Map WebSocket phase to IndexingProgress phase
+  const getIndexingPhase = (): IndexingPhase => {
+    if (wsState.phase === 'cloning') return 'cloning';
+    if (wsState.phase === 'indexing') return 'indexing';
+    if (wsState.phase === 'completed') return 'completed';
+    if (wsState.phase === 'error') return 'error';
+    return 'connecting';
+  };
 
   // Handle mode change
   const handleModeChange = useCallback((newMode: RepoMode) => {
     setMode(newMode);
     if (newMode === 'demo') {
-      reset();
+      resetSession();
+      wsState.reset();
       setCustomUrl('');
+      setShowCelebration(false);
     }
-  }, [reset]);
+  }, [resetSession, wsState]);
 
   // Handle search submit
   const handleSearch = useCallback((e?: React.FormEvent) => {
@@ -84,8 +123,24 @@ export function HeroPlayground({
       onSearch(query, selectedDemo, false);
     } else if (state.status === 'ready') {
       onSearch(query, state.repoId, true);
+    } else if (wsState.isCompleted && wsState.repoId) {
+      // Search using repo from completed WebSocket state
+      onSearch(query, wsState.repoId, true);
     }
-  }, [query, mode, selectedDemo, state, loading, onSearch]);
+  }, [query, mode, selectedDemo, state, wsState, loading, onSearch]);
+
+  // Start searching after celebration
+  const handleStartSearching = useCallback(() => {
+    setShowCelebration(false);
+  }, []);
+
+  // Index another repo
+  const handleIndexAnother = useCallback(() => {
+    resetSession();
+    wsState.reset();
+    setCustomUrl('');
+    setShowCelebration(false);
+  }, [resetSession, wsState]);
 
   // Get validation state for ValidationStatus component
   const getValidationState = () => {
@@ -96,44 +151,44 @@ export function HeroPlayground({
     return { type: 'idle' as const };
   };
 
+  // Determine visibility states
+  const showDemoSelector = mode === 'demo';
+  const showUrlInput = mode === 'custom' && !['indexing', 'ready'].includes(state.status) && !showCelebration && !wsState.isCompleted;
+  const showValidation = mode === 'custom' && ['validating', 'valid', 'invalid'].includes(state.status) && !showCelebration;
+  const showIndexing = mode === 'custom' && state.status === 'indexing' && !showCelebration && !wsState.isCompleted;
+  const showReady = (mode === 'custom' && state.status === 'ready') || (wsState.isCompleted && !showCelebration);
+  const isSearchDisabled = mode === 'custom' && state.status !== 'ready' && !wsState.isCompleted;
+
   // Can search?
   const canSearch = mode === 'demo' 
     ? remaining > 0 && query.trim().length > 0
-    : state.status === 'ready' && remaining > 0 && query.trim().length > 0;
-
-  // Determine what to show based on state
-  const showDemoSelector = mode === 'demo';
-  const showUrlInput = mode === 'custom' && !['indexing', 'ready'].includes(state.status);
-  const showValidation = mode === 'custom' && ['validating', 'valid', 'invalid'].includes(state.status);
-  const showIndexing = mode === 'custom' && state.status === 'indexing';
-  // Always show search - in custom mode it's disabled until repo is indexed
-  const showSearch = true;
-  const isSearchDisabled = mode === 'custom' && state.status !== 'ready';
+    : (state.status === 'ready' || wsState.isCompleted) && remaining > 0 && query.trim().length > 0;
 
   // Get contextual placeholder text
   const getPlaceholder = () => {
     if (mode === 'demo') {
       return "Search for authentication, error handling...";
     }
-    // Custom mode placeholders based on state
-    switch (state.status) {
-      case 'idle':
-        return "Enter a GitHub URL above to start...";
-      case 'validating':
-        return "Validating repository...";
-      case 'valid':
-        return "Click 'Index Repository' to continue...";
-      case 'invalid':
-        return "Fix the URL above to continue...";
-      case 'indexing':
-        return "Indexing in progress...";
-      case 'ready':
-        return `Search in ${state.repoName}...`;
-      default:
-        return "Enter a GitHub URL to search...";
-    }
+    if (state.status === 'idle') return "Enter a GitHub URL above to start...";
+    if (state.status === 'validating') return "Validating repository...";
+    if (state.status === 'valid') return "Click 'Index Repository' to continue...";
+    if (state.status === 'invalid') return "Fix the URL above to continue...";
+    if (state.status === 'indexing') return "Indexing in progress...";
+    if (state.status === 'ready' || wsState.isCompleted) return `Search in ${repoName}...`;
+    return "Enter a GitHub URL to search...";
   };
 
+  // Compute ready state info
+  const readyInfo = wsState.isCompleted && wsState.completedStats ? {
+    repoName,
+    fileCount: wsState.completedStats.files_processed,
+    functionsFound: wsState.completedStats.functions_indexed,
+  } : state.status === 'ready' ? {
+    repoName: state.repoName,
+    fileCount: state.fileCount,
+    functionsFound: state.functionsFound,
+  } : null;
+
   return (
     <div className="w-full max-w-2xl mx-auto">
       {/* Mode Selector */}
@@ -174,65 +229,114 @@ export function HeroPlayground({
       )}
 
       {/* Custom URL Input */}
-      {showUrlInput && (
-        <div className="mb-4">
-          <RepoUrlInput
-            value={customUrl}
-            onChange={setCustomUrl}
-            onValidate={validateUrl}
-            placeholder="https://github.com/owner/repo"
-            disabled={state.status === 'validating'}
-          />
-        </div>
-      )}
+      <AnimatePresence mode="wait">
+        {showUrlInput && (
+          <motion.div
+            key="url-input"
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 10 }}
+            className="mb-4"
+          >
+            <RepoUrlInput
+              value={customUrl}
+              onChange={setCustomUrl}
+              onValidate={validateUrl}
+              placeholder="https://github.com/owner/repo"
+              disabled={state.status === 'validating'}
+            />
+          </motion.div>
+        )}
 
-      {/* Validation Status */}
-      {showValidation && (
-        <div className="mb-4">
-          <ValidationStatus 
-            state={getValidationState()}
-            onStartIndexing={state.status === 'valid' ? startIndexing : undefined}
-          />
-        </div>
-      )}
+        {/* Validation Status */}
+        {showValidation && (
+          <motion.div
+            key="validation"
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 10 }}
+            className="mb-4"
+          >
+            <ValidationStatus 
+              state={getValidationState()}
+              onStartIndexing={state.status === 'valid' ? startIndexing : undefined}
+            />
+          </motion.div>
+        )}
 
-      {/* Indexing Progress */}
-      {showIndexing && (
-        <div className="mb-4">
-          <IndexingProgress
-            progress={state.progress}
-            repoName={customUrl.split('/').pop()?.replace('.git', '')}
-            onCancel={reset}
-          />
-        </div>
-      )}
+        {/* Indexing Progress with WebSocket streaming */}
+        {showIndexing && (
+          <motion.div
+            key="indexing"
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            className="mb-4"
+          >
+            <IndexingProgress
+              progress={wsState.progress}
+              phase={getIndexingPhase()}
+              repoName={repoName}
+              recentFiles={wsState.recentFiles}
+              onCancel={() => {
+                resetSession();
+                wsState.reset();
+              }}
+            />
+          </motion.div>
+        )}
 
-      {/* Ready State Banner */}
-      {mode === 'custom' && state.status === 'ready' && (
-        <div className="mb-4 px-4 py-3 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <span className="text-emerald-400">✓</span>
-            <span className="text-emerald-300 text-sm">
-              <strong>{state.repoName}</strong> indexed · {state.fileCount} files · {state.functionsFound} functions
-            </span>
-          </div>
-          <button 
-            type="button"
-            onClick={reset}
-            className="text-xs text-zinc-500 hover:text-zinc-300"
+        {/* Celebration Screen */}
+        {showCelebration && wsState.completedStats && (
+          <motion.div
+            key="celebration"
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.9 }}
+            className="mb-4"
           >
-            Index different repo
-          </button>
-        </div>
-      )}
+            <IndexingComplete
+              repoName={repoName}
+              stats={wsState.completedStats}
+              onStartSearching={handleStartSearching}
+              onIndexAnother={handleIndexAnother}
+            />
+          </motion.div>
+        )}
+
+        {/* Ready State Banner */}
+        {showReady && !showCelebration && readyInfo && (
+          <motion.div
+            key="ready"
+            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-emerald-500/10 border border-emerald-500/20 flex items-center justify-between"
+          >
+            <div className="flex items-center gap-2">
+              <span className="text-emerald-400">✓</span>
+              <span className="text-emerald-300 text-sm">
+                <strong>{readyInfo.repoName}</strong> indexed · {readyInfo.fileCount} files · {readyInfo.functionsFound.toLocaleString()} functions
+              </span>
+            </div>
+            <button 
+              type="button"
+              onClick={handleIndexAnother}
+              className="text-xs text-zinc-500 hover:text-zinc-300 transition-colors"
+            >
+              Index different repo
+            </button>
+          </motion.div>
+        )}
+      </AnimatePresence>
 
       {/* Search Box */}
-      {showSearch && (
+      {!showCelebration && (
         <>
           <div className="relative mb-4">
             <div className="absolute inset-0 bg-gradient-to-r from-indigo-500/20 to-cyan-500/20 rounded-2xl blur-xl opacity-50" />
             <div className={cn(
-              "relative bg-zinc-900/80 rounded-2xl border border-zinc-800 p-3",
+              "relative bg-zinc-900/80 rounded-2xl border border-zinc-800 p-3 transition-opacity duration-300",
               isSearchDisabled && "opacity-60"
             )}>
               <form onSubmit={handleSearch} className="flex items-center gap-3">
@@ -282,19 +386,23 @@ export function HeroPlayground({
       )}
 
       {/* Error State */}
-      {state.status === 'error' && (
-        <div className="mt-4 px-4 py-3 rounded-lg bg-red-500/10 border border-red-500/20">
-          <p className="text-red-300 text-sm">{state.message}</p>
-          {state.canRetry && (
-            <button 
-              type="button"
-              onClick={reset}
-              className="mt-2 text-xs text-red-400 hover:text-red-300"
-            >
-              Try again
-            </button>
-          )}
-        </div>
+      {(state.status === 'error' || wsState.hasError) && (
+        <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 : wsState.error}
+          </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) */}
@@ -312,3 +420,5 @@ export function HeroPlayground({
     </div>
   );
 }
+
+export default HeroPlayground;