From 2d587a1ad730f111980edef2098d4f39f80a9485 Mon Sep 17 00:00:00 2001
From: Devanshu Rajesh Chicholikar <chicholikar.d@northeastern.edu>
Date: Mon, 5 Jan 2026 16:33:53 -0500
Subject: [PATCH 1/2] feat(frontend): WebSocket real-time indexing progress
 (#115)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🚀 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
---
 .../components/playground/HeroPlayground.tsx  | 306 +++++++++----
 .../playground/IndexingComplete.tsx           | 260 +++++++++++
 .../playground/IndexingProgress.tsx           | 368 ++++++++++++---
 frontend/src/components/playground/index.ts   |   4 +-
 frontend/src/hooks/useIndexingWebSocket.ts    | 420 ++++++++++++++++++
 5 files changed, 1192 insertions(+), 166 deletions(-)
 create mode 100644 frontend/src/components/playground/IndexingComplete.tsx
 create mode 100644 frontend/src/hooks/useIndexingWebSocket.ts

diff --git a/frontend/src/components/playground/HeroPlayground.tsx b/frontend/src/components/playground/HeroPlayground.tsx
index 85e078f..279e614 100644
--- a/frontend/src/components/playground/HeroPlayground.tsx
+++ b/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;
diff --git a/frontend/src/components/playground/IndexingComplete.tsx b/frontend/src/components/playground/IndexingComplete.tsx
new file mode 100644
index 0000000..82c6ab4
--- /dev/null
+++ b/frontend/src/components/playground/IndexingComplete.tsx
@@ -0,0 +1,260 @@
+/**
+ * IndexingComplete
+ * 
+ * Celebration screen shown when repository indexing finishes.
+ * Premium animations with confetti effect and stats showcase.
+ */
+
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+interface IndexingCompleteProps {
+  repoName: string;
+  stats: {
+    files_processed: number;
+    functions_indexed: number;
+    indexing_time_seconds: number;
+  };
+  onStartSearching: () => void;
+  onIndexAnother?: () => void;
+}
+
+// Confetti particle component
+function Confetti() {
+  const [particles] = useState(() =>
+    Array.from({ length: 50 }, (_, i) => ({
+      id: i,
+      x: Math.random() * 100,
+      delay: Math.random() * 0.5,
+      duration: 2 + Math.random() * 2,
+      color: ['#818cf8', '#34d399', '#fbbf24', '#f472b6', '#60a5fa'][Math.floor(Math.random() * 5)],
+    }))
+  );
+
+  return (
+    <div className="absolute inset-0 overflow-hidden pointer-events-none">
+      {particles.map((p) => (
+        <motion.div
+          key={p.id}
+          className="absolute w-2 h-2 rounded-full"
+          style={{ 
+            left: `${p.x}%`, 
+            top: '-10px',
+            backgroundColor: p.color,
+          }}
+          initial={{ y: 0, opacity: 1, scale: 1 }}
+          animate={{ 
+            y: '120vh', 
+            opacity: [1, 1, 0],
+            scale: [1, 0.8, 0.5],
+            rotate: [0, 360, 720],
+          }}
+          transition={{
+            duration: p.duration,
+            delay: p.delay,
+            ease: 'easeOut',
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+// Animated stat display
+function StatDisplay({ 
+  label, 
+  value, 
+  suffix = '', 
+  delay = 0,
+  highlight = false 
+}: { 
+  label: string; 
+  value: number; 
+  suffix?: string;
+  delay?: number;
+  highlight?: boolean;
+}) {
+  const [displayValue, setDisplayValue] = useState(0);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      const duration = 1500;
+      const steps = 30;
+      const increment = value / steps;
+      let current = 0;
+      
+      const interval = setInterval(() => {
+        current += increment;
+        if (current >= value) {
+          setDisplayValue(value);
+          clearInterval(interval);
+        } else {
+          setDisplayValue(Math.floor(current));
+        }
+      }, duration / steps);
+
+      return () => clearInterval(interval);
+    }, delay);
+
+    return () => clearTimeout(timeout);
+  }, [value, delay]);
+
+  return (
+    <motion.div
+      className="text-center"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: delay / 1000, duration: 0.5 }}
+    >
+      <div className={cn(
+        'text-4xl font-bold mb-1',
+        highlight ? 'text-indigo-400' : 'text-white'
+      )}>
+        {displayValue.toLocaleString()}{suffix}
+      </div>
+      <div className="text-zinc-400 text-sm">{label}</div>
+    </motion.div>
+  );
+}
+
+export function IndexingComplete({ 
+  repoName, 
+  stats, 
+  onStartSearching,
+  onIndexAnother 
+}: IndexingCompleteProps) {
+  const [showConfetti, setShowConfetti] = useState(true);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setShowConfetti(false), 4000);
+    return () => clearTimeout(timeout);
+  }, []);
+
+  return (
+    <motion.div
+      className="relative rounded-2xl bg-zinc-900/90 border border-zinc-800 overflow-hidden backdrop-blur-sm"
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ type: 'spring', stiffness: 300, damping: 25 }}
+    >
+      {/* Confetti */}
+      {showConfetti && <Confetti />}
+
+      {/* Success glow */}
+      <motion.div
+        className="absolute inset-0 bg-gradient-to-b from-emerald-500/10 via-transparent to-transparent"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: [0, 1, 0.5] }}
+        transition={{ duration: 1.5 }}
+      />
+
+      {/* Content */}
+      <div className="relative z-10 p-8">
+        {/* Success icon */}
+        <motion.div
+          className="w-20 h-20 mx-auto mb-6 rounded-full bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center"
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ 
+            type: 'spring', 
+            stiffness: 400, 
+            damping: 15,
+            delay: 0.2 
+          }}
+        >
+          <motion.span
+            className="text-4xl"
+            initial={{ opacity: 0, rotate: -180 }}
+            animate={{ opacity: 1, rotate: 0 }}
+            transition={{ delay: 0.4 }}
+          >
+            ✓
+          </motion.span>
+        </motion.div>
+
+        {/* Title */}
+        <motion.div
+          className="text-center mb-8"
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+        >
+          <h3 className="text-2xl font-bold text-white mb-2">
+            Ready to Search!
+          </h3>
+          <p className="text-zinc-400">
+            <span className="text-indigo-400 font-medium">{repoName}</span> has been indexed
+          </p>
+        </motion.div>
+
+        {/* Stats */}
+        <div className="grid grid-cols-3 gap-6 mb-8">
+          <StatDisplay 
+            label="Files Processed" 
+            value={stats.files_processed}
+            delay={500}
+          />
+          <StatDisplay 
+            label="Functions Found" 
+            value={stats.functions_indexed}
+            delay={700}
+            highlight
+          />
+          <StatDisplay 
+            label="Seconds" 
+            value={Math.round(stats.indexing_time_seconds * 10) / 10}
+            suffix="s"
+            delay={900}
+          />
+        </div>
+
+        {/* Actions */}
+        <div className="flex flex-col sm:flex-row gap-3">
+          <Button
+            onClick={onStartSearching}
+            className={cn(
+              'flex-1 py-6 text-lg font-semibold rounded-xl',
+              'bg-gradient-to-r from-indigo-600 to-indigo-500',
+              'hover:from-indigo-500 hover:to-indigo-400',
+              'shadow-lg shadow-indigo-500/25',
+              'transition-all duration-200'
+            )}
+          >
+            <span className="mr-2">🔍</span>
+            Start Searching
+          </Button>
+          
+          {onIndexAnother && (
+            <Button
+              onClick={onIndexAnother}
+              variant="outline"
+              className={cn(
+                'py-6 px-6 text-lg font-semibold rounded-xl',
+                'bg-zinc-800/50 border-zinc-700 text-zinc-300',
+                'hover:bg-zinc-700/50 hover:text-white',
+                'transition-all duration-200'
+              )}
+            >
+              <span className="mr-2">+</span>
+              Index Another
+            </Button>
+          )}
+        </div>
+
+        {/* Pro tip */}
+        <motion.div
+          className="mt-6 text-center text-xs text-zinc-500"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 1.5 }}
+        >
+          💡 Pro tip: Try searching for "authentication", "error handling", or "database"
+        </motion.div>
+      </div>
+    </motion.div>
+  );
+}
+
+export default IndexingComplete;
diff --git a/frontend/src/components/playground/IndexingProgress.tsx b/frontend/src/components/playground/IndexingProgress.tsx
index 05e7e3d..deb2eb7 100644
--- a/frontend/src/components/playground/IndexingProgress.tsx
+++ b/frontend/src/components/playground/IndexingProgress.tsx
@@ -1,13 +1,26 @@
 /**
- * IndexingProgress
+ * IndexingProgress (v2 - WebSocket Enhanced)
  * 
- * Displays real-time progress during repository indexing.
- * Shows progress bar, file stats, and current file being processed.
+ * Displays real-time progress during repository indexing with
+ * streaming file list that shows each file as it's processed.
+ * 
+ * Features:
+ * - Phase indicators (cloning → indexing → completed)
+ * - Streaming file list with staggered animations
+ * - Progress bar with gradient glow
+ * - Real-time stats
+ * - Premium animations
  */
 
+import { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { cn } from '@/lib/utils';
 import { Progress } from '@/components/ui/progress';
 
+// =============================================================================
+// TYPES
+// =============================================================================
+
 export interface ProgressData {
   percent: number;
   filesProcessed: number;
@@ -16,121 +29,342 @@ export interface ProgressData {
   functionsFound: number;
 }
 
+export type IndexingPhase = 'connecting' | 'cloning' | 'indexing' | 'completed' | 'error';
+
 interface IndexingProgressProps {
   progress: ProgressData;
+  phase?: IndexingPhase;
   repoName?: string;
+  recentFiles?: string[];  // Streaming file list from WebSocket
   onCancel?: () => void;
 }
 
+// =============================================================================
+// SUB-COMPONENTS
+// =============================================================================
+
 function AnimatedDots() {
   return (
-    <span className="inline-flex" aria-hidden="true">
-      <span className="animate-bounce" style={{ animationDelay: '0ms' }}>.</span>
-      <span className="animate-bounce" style={{ animationDelay: '150ms' }}>.</span>
-      <span className="animate-bounce" style={{ animationDelay: '300ms' }}>.</span>
+    <span className="inline-flex ml-1" aria-hidden="true">
+      {[0, 1, 2].map(i => (
+        <motion.span
+          key={i}
+          className="text-indigo-400"
+          animate={{ opacity: [0.3, 1, 0.3] }}
+          transition={{
+            duration: 1.2,
+            repeat: Infinity,
+            delay: i * 0.2,
+          }}
+        >
+          .
+        </motion.span>
+      ))}
     </span>
   );
 }
 
+function PhaseIndicator({ phase }: { phase: IndexingPhase }) {
+  const phases: { key: IndexingPhase; label: string; icon: string }[] = [
+    { key: 'cloning', label: 'Clone', icon: '📥' },
+    { key: 'indexing', label: 'Index', icon: '⚡' },
+    { key: 'completed', label: 'Done', icon: '✓' },
+  ];
+
+  const currentIndex = phases.findIndex(p => p.key === phase);
+
+  return (
+    <div className="flex items-center gap-2 text-xs">
+      {phases.map((p, i) => {
+        const isActive = p.key === phase;
+        const isCompleted = currentIndex > i;
+        const isPending = currentIndex < i;
+
+        return (
+          <div key={p.key} className="flex items-center gap-1">
+            <motion.div
+              className={cn(
+                'w-6 h-6 rounded-full flex items-center justify-center text-xs transition-colors',
+                isActive && 'bg-indigo-600 text-white',
+                isCompleted && 'bg-emerald-600 text-white',
+                isPending && 'bg-zinc-800 text-zinc-500'
+              )}
+              animate={isActive ? { scale: [1, 1.1, 1] } : {}}
+              transition={{ duration: 1.5, repeat: Infinity }}
+            >
+              {isCompleted ? '✓' : p.icon}
+            </motion.div>
+            <span className={cn(
+              'hidden sm:inline transition-colors',
+              isActive && 'text-white',
+              isCompleted && 'text-emerald-400',
+              isPending && 'text-zinc-500'
+            )}>
+              {p.label}
+            </span>
+            {i < phases.length - 1 && (
+              <div className={cn(
+                'w-8 h-0.5 mx-1',
+                isCompleted ? 'bg-emerald-600' : 'bg-zinc-800'
+              )} />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function FileIcon({ filename }: { filename: string }) {
+  // Determine icon based on file extension
+  const ext = filename.split('.').pop()?.toLowerCase() || '';
+  
+  const iconMap: Record<string, string> = {
+    py: '🐍',
+    js: '📜',
+    ts: '💠',
+    tsx: '⚛️',
+    jsx: '⚛️',
+    go: '🔵',
+    rs: '🦀',
+    java: '☕',
+    rb: '💎',
+    php: '🐘',
+    c: '⚙️',
+    cpp: '⚙️',
+    h: '📋',
+    md: '📝',
+    json: '📦',
+    yaml: '📄',
+    yml: '📄',
+  };
+
+  return <span className="text-sm">{iconMap[ext] || '📄'}</span>;
+}
+
 /**
- * Estimate remaining time based on current progress.
- * Returns null if not enough data to estimate.
+ * Streaming file list - The "holy shit" feature
+ * Shows files appearing in real-time as they're processed
  */
-function estimateRemainingSeconds(percent: number, filesProcessed: number): number | null {
-  if (percent <= 0 || filesProcessed <= 0) return null;
-  
-  // Rough estimate: assume ~0.15s per file on average
-  const remainingFiles = Math.ceil((filesProcessed / percent) * (100 - percent));
-  return Math.max(1, Math.ceil(remainingFiles * 0.15));
+function StreamingFileList({ files, maxVisible = 8 }: { files: string[]; maxVisible?: number }) {
+  const listRef = useRef<HTMLDivElement>(null);
+  const visibleFiles = files.slice(0, maxVisible);
+  const hiddenCount = Math.max(0, files.length - maxVisible);
+
+  return (
+    <div 
+      ref={listRef}
+      className="relative overflow-hidden"
+      style={{ maxHeight: `${maxVisible * 32}px` }}
+    >
+      {/* Gradient fade at bottom if more files hidden */}
+      {hiddenCount > 0 && (
+        <div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-zinc-900 to-transparent z-10 pointer-events-none" />
+      )}
+      
+      <AnimatePresence mode="popLayout">
+        {visibleFiles.map((file, index) => (
+          <motion.div
+            key={file}
+            initial={{ opacity: 0, x: -20, height: 0 }}
+            animate={{ opacity: 1, x: 0, height: 32 }}
+            exit={{ opacity: 0, x: 20, height: 0 }}
+            transition={{
+              type: 'spring',
+              stiffness: 500,
+              damping: 30,
+              delay: index * 0.02,
+            }}
+            className="flex items-center gap-2 px-3 py-1 overflow-hidden"
+          >
+            <FileIcon filename={file} />
+            <span 
+              className={cn(
+                'font-mono text-sm truncate transition-colors duration-300',
+                index === 0 ? 'text-indigo-300' : 'text-zinc-400'
+              )}
+              title={file}
+            >
+              {file}
+            </span>
+            {index === 0 && (
+              <motion.span
+                className="ml-auto text-xs text-emerald-400 bg-emerald-400/10 px-2 py-0.5 rounded"
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+              >
+                processing
+              </motion.span>
+            )}
+          </motion.div>
+        ))}
+      </AnimatePresence>
+
+      {/* Hidden files counter */}
+      {hiddenCount > 0 && (
+        <div className="text-xs text-zinc-500 px-3 py-1">
+          +{hiddenCount} more files processed
+        </div>
+      )}
+    </div>
+  );
+}
+
+function GlowingProgress({ value }: { value: number }) {
+  return (
+    <div className="relative">
+      {/* Glow effect */}
+      <motion.div
+        className="absolute inset-0 rounded-full blur-md bg-indigo-500/30"
+        animate={{
+          opacity: [0.3, 0.6, 0.3],
+        }}
+        transition={{
+          duration: 2,
+          repeat: Infinity,
+        }}
+        style={{ width: `${value}%` }}
+      />
+      {/* Actual progress bar */}
+      <Progress 
+        value={value} 
+        className="h-2 bg-zinc-800 relative z-10"
+      />
+    </div>
+  );
 }
 
-export function IndexingProgress({ progress, repoName, onCancel }: IndexingProgressProps) {
+function StatCard({ label, value, highlight = false }: { label: string; value: string | number; highlight?: boolean }) {
+  return (
+    <div className="text-center">
+      <div className="text-zinc-500 text-xs mb-1">{label}</div>
+      <motion.div 
+        className={cn(
+          'font-bold text-lg',
+          highlight ? 'text-indigo-400' : 'text-white'
+        )}
+        key={value.toString()}
+        initial={{ scale: 1.2, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ type: 'spring', stiffness: 300 }}
+      >
+        {typeof value === 'number' ? value.toLocaleString() : value}
+      </motion.div>
+    </div>
+  );
+}
+
+// =============================================================================
+// MAIN COMPONENT
+// =============================================================================
+
+export function IndexingProgress({ 
+  progress, 
+  phase = 'indexing',
+  repoName, 
+  recentFiles = [],
+  onCancel 
+}: IndexingProgressProps) {
   const { percent, filesProcessed, filesTotal, currentFile, functionsFound } = progress;
-  const estimatedRemaining = estimateRemainingSeconds(percent, filesProcessed);
+  
+  // Estimate remaining time
+  const estimatedRemaining = (() => {
+    if (percent <= 0 || filesProcessed <= 0) return null;
+    const remainingFiles = Math.ceil((filesProcessed / percent) * (100 - percent));
+    return Math.max(1, Math.ceil(remainingFiles * 0.15));
+  })();
+
+  // Use currentFile if recentFiles is empty
+  const displayFiles = recentFiles.length > 0 
+    ? recentFiles 
+    : currentFile 
+      ? [currentFile] 
+      : [];
 
   return (
-    <div 
-      className="rounded-xl bg-zinc-900/80 border border-zinc-800 overflow-hidden"
+    <motion.div 
+      className="rounded-2xl bg-zinc-900/90 border border-zinc-800 overflow-hidden backdrop-blur-sm"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
       role="status"
       aria-label={`Indexing ${repoName || 'repository'}: ${percent}% complete`}
     >
       {/* Header */}
-      <div className="px-5 py-4 border-b border-zinc-800">
-        <div className="flex items-center justify-between">
+      <div className="px-5 py-4 border-b border-zinc-800/50 bg-gradient-to-r from-zinc-900 to-zinc-900/50">
+        <div className="flex items-center justify-between mb-3">
           <div className="flex items-center gap-2">
-            <span className="text-lg" aria-hidden="true">⚡</span>
-            <span className="text-white font-medium">
-              Indexing {repoName || 'repository'}
-              <AnimatedDots />
+            <motion.span 
+              className="text-xl"
+              animate={{ rotate: phase === 'indexing' ? [0, 360] : 0 }}
+              transition={{ duration: 2, repeat: phase === 'indexing' ? Infinity : 0, ease: 'linear' }}
+            >
+              {phase === 'cloning' ? '📥' : phase === 'completed' ? '✅' : '⚡'}
+            </motion.span>
+            <span className="text-white font-semibold">
+              {phase === 'cloning' ? 'Cloning' : phase === 'completed' ? 'Indexed' : 'Indexing'}
+              {' '}{repoName || 'repository'}
+              {phase !== 'completed' && <AnimatedDots />}
             </span>
           </div>
-          <span className="text-2xl font-bold text-indigo-400">
+          <motion.span 
+            className="text-3xl font-bold text-indigo-400"
+            key={percent}
+            initial={{ scale: 1.3 }}
+            animate={{ scale: 1 }}
+            transition={{ type: 'spring', stiffness: 300 }}
+          >
             {percent}%
-          </span>
+          </motion.span>
         </div>
+        
+        {/* Phase indicator */}
+        <PhaseIndicator phase={phase} />
       </div>
 
       {/* Progress bar */}
       <div className="px-5 py-4">
-        <Progress 
-          value={percent} 
-          className="h-2 bg-zinc-800"
-          aria-label={`${percent}% complete`}
-        />
+        <GlowingProgress value={percent} />
       </div>
 
       {/* Stats grid */}
-      <div className="px-5 py-3 bg-zinc-900/50 border-t border-zinc-800">
-        <div className="grid grid-cols-3 gap-4 text-sm">
-          <div>
-            <div className="text-zinc-500">Files</div>
-            <div className="text-white font-medium">
-              {filesProcessed} / {filesTotal}
-            </div>
-          </div>
-          <div>
-            <div className="text-zinc-500">Functions</div>
-            <div className="text-white font-medium">
-              {functionsFound.toLocaleString()}
-            </div>
-          </div>
-          <div>
-            <div className="text-zinc-500">Remaining</div>
-            <div className="text-white font-medium">
-              {estimatedRemaining !== null ? `~${estimatedRemaining}s` : '—'}
-            </div>
-          </div>
+      <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` : '—'} />
         </div>
       </div>
 
-      {/* Current file */}
-      {currentFile && (
-        <div className="px-5 py-3 border-t border-zinc-800">
-          <div className="flex items-center gap-2 text-sm">
-            <span className="text-zinc-500" aria-hidden="true">📄</span>
-            <span className="text-zinc-400 font-mono truncate" title={currentFile}>
-              {currentFile}
-            </span>
+      {/* Streaming file list - THE FEATURE */}
+      {displayFiles.length > 0 && (
+        <div className="border-t border-zinc-800/50">
+          <div className="px-4 py-2 text-xs text-zinc-500 font-medium uppercase tracking-wider">
+            Processing Files
           </div>
+          <StreamingFileList files={displayFiles} />
         </div>
       )}
 
       {/* Cancel button */}
-      {onCancel && (
-        <div className="px-5 py-3 border-t border-zinc-800">
+      {onCancel && phase !== 'completed' && (
+        <div className="px-5 py-3 border-t border-zinc-800/50">
           <button
             type="button"
             onClick={onCancel}
             className={cn(
-              'w-full py-2 px-4 rounded-lg text-sm',
-              'bg-zinc-800 hover:bg-zinc-700 text-zinc-400 hover:text-zinc-200',
-              'transition-colors duration-200'
+              'w-full py-2.5 px-4 rounded-xl text-sm font-medium',
+              'bg-zinc-800/50 hover:bg-zinc-700/50 text-zinc-400 hover:text-zinc-200',
+              'border border-zinc-700/50 hover:border-zinc-600',
+              'transition-all duration-200'
             )}
           >
-            Cancel
+            Cancel Indexing
           </button>
         </div>
       )}
-    </div>
+    </motion.div>
   );
 }
+
+export default IndexingProgress;
diff --git a/frontend/src/components/playground/index.ts b/frontend/src/components/playground/index.ts
index 2441356..180057e 100644
--- a/frontend/src/components/playground/index.ts
+++ b/frontend/src/components/playground/index.ts
@@ -3,10 +3,12 @@
  * 
  * Anonymous repo indexing UI components.
  * @see useAnonymousSession hook for state management
+ * @see useIndexingWebSocket hook for real-time progress
  */
 
 export { RepoModeSelector, type RepoMode } from './RepoModeSelector';
 export { RepoUrlInput } from './RepoUrlInput';
 export { ValidationStatus } from './ValidationStatus';
-export { IndexingProgress, type ProgressData } from './IndexingProgress';
+export { IndexingProgress, type ProgressData, type IndexingPhase } from './IndexingProgress';
+export { IndexingComplete } from './IndexingComplete';
 export { HeroPlayground } from './HeroPlayground';
diff --git a/frontend/src/hooks/useIndexingWebSocket.ts b/frontend/src/hooks/useIndexingWebSocket.ts
new file mode 100644
index 0000000..ff4fd80
--- /dev/null
+++ b/frontend/src/hooks/useIndexingWebSocket.ts
@@ -0,0 +1,420 @@
+/**
+ * useIndexingWebSocket
+ * 
+ * WebSocket hook for real-time indexing progress updates.
+ * Connects to the playground WebSocket endpoint and streams
+ * progress events as files are processed.
+ * 
+ * Features:
+ * - Auto-reconnect with exponential backoff
+ * - Fallback to polling if WS unavailable
+ * - Type-safe event handling
+ * - Connection state management
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { buildWsUrl, API_URL } from '@/config/api';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export type WSConnectionState = 'connecting' | 'connected' | 'disconnected' | 'error';
+
+export interface WSProgressEvent {
+  type: 'progress';
+  job_id: string;
+  files_processed: number;
+  files_total: number;
+  current_file: string;
+  functions_found: number;
+  percent: number;
+}
+
+export interface WSCompletedEvent {
+  type: 'completed';
+  job_id: string;
+  repo_id: string;
+  stats: {
+    files_processed: number;
+    functions_indexed: number;
+    indexing_time_seconds: number;
+  };
+}
+
+export interface WSErrorEvent {
+  type: 'error';
+  job_id: string;
+  error: string;
+  message: string;
+  recoverable: boolean;
+}
+
+export interface WSCloningEvent {
+  type: 'cloning';
+  job_id: string;
+  repo_name: string;
+  message: string;
+}
+
+export interface WSConnectedEvent {
+  type: 'connected';
+  job_id: string;
+  message: string;
+}
+
+export interface WSPingEvent {
+  type: 'ping';
+  job_id: string;
+}
+
+export type WSEvent = 
+  | WSProgressEvent 
+  | WSCompletedEvent 
+  | WSErrorEvent 
+  | WSCloningEvent 
+  | WSConnectedEvent
+  | WSPingEvent;
+
+export interface IndexingState {
+  connectionState: WSConnectionState;
+  phase: 'idle' | 'connecting' | 'cloning' | 'indexing' | 'completed' | 'error';
+  progress: {
+    percent: number;
+    filesProcessed: number;
+    filesTotal: number;
+    currentFile: string;
+    functionsFound: number;
+  };
+  recentFiles: string[];  // Last N files processed (for streaming effect)
+  completedStats: WSCompletedEvent['stats'] | null;
+  repoId: string | null;
+  error: string | null;
+  isRecoverable: boolean;
+}
+
+interface UseIndexingWebSocketOptions {
+  maxRecentFiles?: number;  // How many recent files to keep in list
+  onCompleted?: (repoId: string, stats: WSCompletedEvent['stats']) => void;
+  onError?: (error: string, recoverable: boolean) => void;
+}
+
+// =============================================================================
+// HOOK
+// =============================================================================
+
+export function useIndexingWebSocket(
+  jobId: string | null,
+  options: UseIndexingWebSocketOptions = {}
+) {
+  const { 
+    maxRecentFiles = 15, 
+    onCompleted, 
+    onError 
+  } = options;
+
+  // State
+  const [state, setState] = useState<IndexingState>({
+    connectionState: 'disconnected',
+    phase: 'idle',
+    progress: {
+      percent: 0,
+      filesProcessed: 0,
+      filesTotal: 0,
+      currentFile: '',
+      functionsFound: 0,
+    },
+    recentFiles: [],
+    completedStats: null,
+    repoId: null,
+    error: null,
+    isRecoverable: false,
+  });
+
+  // Refs
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectAttempts = useRef(0);
+  const reconnectTimeout = useRef<NodeJS.Timeout | null>(null);
+  const pollingInterval = useRef<NodeJS.Timeout | null>(null);
+
+  // Cleanup function
+  const cleanup = useCallback(() => {
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    if (reconnectTimeout.current) {
+      clearTimeout(reconnectTimeout.current);
+      reconnectTimeout.current = null;
+    }
+    if (pollingInterval.current) {
+      clearInterval(pollingInterval.current);
+      pollingInterval.current = null;
+    }
+  }, []);
+
+  // Fallback polling (if WebSocket fails)
+  const startPolling = useCallback((jid: string) => {
+    if (pollingInterval.current) return;
+
+    console.log('[WS] Falling back to polling for job:', jid);
+    
+    pollingInterval.current = setInterval(async () => {
+      try {
+        const res = await fetch(`${API_URL}/playground/job/${jid}/status`);
+        if (!res.ok) return;
+        
+        const data = await res.json();
+        
+        if (data.status === 'completed') {
+          clearInterval(pollingInterval.current!);
+          pollingInterval.current = null;
+          setState(prev => ({
+            ...prev,
+            phase: 'completed',
+            repoId: data.repo_id,
+            completedStats: {
+              files_processed: data.files_processed || 0,
+              functions_indexed: data.functions_indexed || 0,
+              indexing_time_seconds: data.indexing_time || 0,
+            },
+          }));
+          onCompleted?.(data.repo_id, {
+            files_processed: data.files_processed || 0,
+            functions_indexed: data.functions_indexed || 0,
+            indexing_time_seconds: data.indexing_time || 0,
+          });
+        } else if (data.status === 'failed') {
+          clearInterval(pollingInterval.current!);
+          pollingInterval.current = null;
+          setState(prev => ({
+            ...prev,
+            phase: 'error',
+            error: data.error || 'Indexing failed',
+            isRecoverable: false,
+          }));
+          onError?.(data.error || 'Indexing failed', false);
+        } else if (data.status === 'indexing') {
+          setState(prev => ({
+            ...prev,
+            phase: 'indexing',
+            progress: {
+              percent: data.percent || 0,
+              filesProcessed: data.files_processed || 0,
+              filesTotal: data.files_total || 0,
+              currentFile: data.current_file || '',
+              functionsFound: data.functions_found || 0,
+            },
+          }));
+        }
+      } catch (err) {
+        console.error('[Polling] Error:', err);
+      }
+    }, 2000);
+  }, [onCompleted, onError]);
+
+  // Handle WebSocket message
+  const handleMessage = useCallback((event: MessageEvent) => {
+    try {
+      const data: WSEvent = JSON.parse(event.data);
+      
+      switch (data.type) {
+        case 'connected':
+          setState(prev => ({
+            ...prev,
+            connectionState: 'connected',
+            phase: 'connecting',
+          }));
+          break;
+
+        case 'ping':
+          // Keepalive, ignore
+          break;
+
+        case 'cloning':
+          setState(prev => ({
+            ...prev,
+            phase: 'cloning',
+          }));
+          break;
+
+        case 'progress':
+          setState(prev => {
+            // Add current file to recent files list (for streaming effect)
+            const newRecentFiles = data.current_file 
+              ? [data.current_file, ...prev.recentFiles.filter(f => f !== data.current_file)].slice(0, maxRecentFiles)
+              : prev.recentFiles;
+
+            return {
+              ...prev,
+              phase: 'indexing',
+              progress: {
+                percent: data.percent,
+                filesProcessed: data.files_processed,
+                filesTotal: data.files_total,
+                currentFile: data.current_file,
+                functionsFound: data.functions_found,
+              },
+              recentFiles: newRecentFiles,
+            };
+          });
+          break;
+
+        case 'completed':
+          setState(prev => ({
+            ...prev,
+            phase: 'completed',
+            repoId: data.repo_id,
+            completedStats: data.stats,
+            progress: {
+              ...prev.progress,
+              percent: 100,
+            },
+          }));
+          onCompleted?.(data.repo_id, data.stats);
+          break;
+
+        case 'error':
+          setState(prev => ({
+            ...prev,
+            phase: 'error',
+            error: data.message,
+            isRecoverable: data.recoverable,
+          }));
+          onError?.(data.message, data.recoverable);
+          break;
+      }
+    } catch (err) {
+      console.error('[WS] Failed to parse message:', err);
+    }
+  }, [maxRecentFiles, onCompleted, onError]);
+
+  // Connect to WebSocket
+  const connect = useCallback((jid: string) => {
+    cleanup();
+    
+    setState(prev => ({
+      ...prev,
+      connectionState: 'connecting',
+      phase: 'connecting',
+      error: null,
+    }));
+
+    const wsUrl = buildWsUrl(`/ws/playground/${jid}`);
+    console.log('[WS] Connecting to:', wsUrl);
+
+    try {
+      const ws = new WebSocket(wsUrl);
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        console.log('[WS] Connected');
+        reconnectAttempts.current = 0;
+        setState(prev => ({
+          ...prev,
+          connectionState: 'connected',
+        }));
+      };
+
+      ws.onmessage = handleMessage;
+
+      ws.onerror = (error) => {
+        console.error('[WS] Error:', error);
+        setState(prev => ({
+          ...prev,
+          connectionState: 'error',
+        }));
+      };
+
+      ws.onclose = (event) => {
+        console.log('[WS] Closed:', event.code, event.reason);
+        
+        // If closed cleanly (1000) or job doesn't exist (4404), don't reconnect
+        if (event.code === 1000 || event.code === 4404) {
+          setState(prev => ({
+            ...prev,
+            connectionState: 'disconnected',
+          }));
+          return;
+        }
+
+        // Try to reconnect with exponential backoff
+        if (reconnectAttempts.current < 3) {
+          const delay = Math.min(1000 * Math.pow(2, reconnectAttempts.current), 5000);
+          console.log(`[WS] Reconnecting in ${delay}ms (attempt ${reconnectAttempts.current + 1})`);
+          
+          reconnectTimeout.current = setTimeout(() => {
+            reconnectAttempts.current++;
+            connect(jid);
+          }, delay);
+        } else {
+          // Fallback to polling after 3 failed attempts
+          console.log('[WS] Max reconnect attempts reached, falling back to polling');
+          startPolling(jid);
+        }
+      };
+    } catch (err) {
+      console.error('[WS] Failed to create WebSocket:', err);
+      startPolling(jid);
+    }
+  }, [cleanup, handleMessage, startPolling]);
+
+  // Connect when jobId changes
+  useEffect(() => {
+    if (jobId) {
+      connect(jobId);
+    } else {
+      cleanup();
+      setState({
+        connectionState: 'disconnected',
+        phase: 'idle',
+        progress: {
+          percent: 0,
+          filesProcessed: 0,
+          filesTotal: 0,
+          currentFile: '',
+          functionsFound: 0,
+        },
+        recentFiles: [],
+        completedStats: null,
+        repoId: null,
+        error: null,
+        isRecoverable: false,
+      });
+    }
+
+    return cleanup;
+  }, [jobId, connect, cleanup]);
+
+  // Reset function
+  const reset = useCallback(() => {
+    cleanup();
+    setState({
+      connectionState: 'disconnected',
+      phase: 'idle',
+      progress: {
+        percent: 0,
+        filesProcessed: 0,
+        filesTotal: 0,
+        currentFile: '',
+        functionsFound: 0,
+      },
+      recentFiles: [],
+      completedStats: null,
+      repoId: null,
+      error: null,
+      isRecoverable: false,
+    });
+  }, [cleanup]);
+
+  return {
+    ...state,
+    reset,
+    isConnected: state.connectionState === 'connected',
+    isIndexing: state.phase === 'indexing' || state.phase === 'cloning',
+    isCompleted: state.phase === 'completed',
+    hasError: state.phase === 'error',
+  };
+}
+
+export default useIndexingWebSocket;

From d57e9fbf5910f2c68625928d58e9b8a18552e0c0 Mon Sep 17 00:00:00 2001
From: Devanshu Rajesh Chicholikar <chicholikar.d@northeastern.edu>
Date: Mon, 5 Jan 2026 16:45:15 -0500
Subject: [PATCH 2/2] fix(frontend): prevent infinite re-render loop in
 WebSocket hook

Root cause: Callbacks and options object recreated on every render
caused useEffect dependencies to constantly change.

Fixes:
- Use refs for onCompleted/onError callbacks (stable across renders)
- Memoize wsOptions with useMemo in HeroPlayground
- Destructure wsState immediately to get stable references
- Fixed dependency arrays to use primitive values not objects

HeroPlayground changes:
- useCallback for handleWsCompleted, handleWsError
- useMemo for wsOptions object
- Destructure hook result instead of using wsState object in deps

useIndexingWebSocket changes:
- Store callbacks in refs (onCompletedRef, onErrorRef)
- Update refs synchronously (no useEffect needed)
- Cleaner, more compact implementation
---
 .../components/playground/HeroPlayground.tsx  | 128 ++++---
 frontend/src/hooks/useIndexingWebSocket.ts    | 320 +++++-------------
 2 files changed, 161 insertions(+), 287 deletions(-)

diff --git a/frontend/src/components/playground/HeroPlayground.tsx b/frontend/src/components/playground/HeroPlayground.tsx
index 279e614..aba209c 100644
--- a/frontend/src/components/playground/HeroPlayground.tsx
+++ b/frontend/src/components/playground/HeroPlayground.tsx
@@ -12,7 +12,7 @@
  * - Celebration screen on completion
  */
 
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useMemo, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Button } from '@/components/ui/button';
@@ -82,37 +82,54 @@ export function HeroPlayground({
   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, {
+  // Stable callbacks for WebSocket hook (MUST be memoized to prevent infinite loops!)
+  const handleWsCompleted = useCallback(() => {
+    setShowCelebration(true);
+  }, []);
+
+  const handleWsError = useCallback((error: string, recoverable: boolean) => {
+    console.error('[HeroPlayground] Indexing error:', error, recoverable);
+  }, []);
+
+  // Memoize options to prevent recreation every render
+  const wsOptions = useMemo(() => ({
     maxRecentFiles: 12,
-    onCompleted: (repoId, stats) => {
-      console.log('[HeroPlayground] Indexing completed:', repoId, stats);
-      setShowCelebration(true);
-    },
-    onError: (error, recoverable) => {
-      console.error('[HeroPlayground] Indexing error:', error, recoverable);
-    },
-  });
+    onCompleted: handleWsCompleted,
+    onError: handleWsError,
+  }), [handleWsCompleted, handleWsError]);
+
+  // WebSocket hook for real-time progress
+  const {
+    phase: wsPhase,
+    progress: wsProgress,
+    recentFiles,
+    completedStats,
+    repoId: wsRepoId,
+    error: wsError,
+    isCompleted: wsIsCompleted,
+    hasError: wsHasError,
+    reset: wsReset,
+  } = useIndexingWebSocket(jobId, wsOptions);
 
   // 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';
+  const getIndexingPhase = useCallback((): IndexingPhase => {
+    if (wsPhase === 'cloning') return 'cloning';
+    if (wsPhase === 'indexing') return 'indexing';
+    if (wsPhase === 'completed') return 'completed';
+    if (wsPhase === 'error') return 'error';
     return 'connecting';
-  };
+  }, [wsPhase]);
 
   // Handle mode change
   const handleModeChange = useCallback((newMode: RepoMode) => {
     setMode(newMode);
     if (newMode === 'demo') {
       resetSession();
-      wsState.reset();
+      wsReset();
       setCustomUrl('');
       setShowCelebration(false);
     }
-  }, [resetSession, wsState]);
+  }, [resetSession, wsReset]);
 
   // Handle search submit
   const handleSearch = useCallback((e?: React.FormEvent) => {
@@ -123,11 +140,11 @@ export function HeroPlayground({
       onSearch(query, selectedDemo, false);
     } else if (state.status === 'ready') {
       onSearch(query, state.repoId, true);
-    } else if (wsState.isCompleted && wsState.repoId) {
+    } else if (wsIsCompleted && wsRepoId) {
       // Search using repo from completed WebSocket state
-      onSearch(query, wsState.repoId, true);
+      onSearch(query, wsRepoId, true);
     }
-  }, [query, mode, selectedDemo, state, wsState, loading, onSearch]);
+  }, [query, mode, selectedDemo, state, wsIsCompleted, wsRepoId, loading, onSearch]);
 
   // Start searching after celebration
   const handleStartSearching = useCallback(() => {
@@ -137,35 +154,35 @@ export function HeroPlayground({
   // Index another repo
   const handleIndexAnother = useCallback(() => {
     resetSession();
-    wsState.reset();
+    wsReset();
     setCustomUrl('');
     setShowCelebration(false);
-  }, [resetSession, wsState]);
+  }, [resetSession, wsReset]);
 
   // Get validation state for ValidationStatus component
-  const getValidationState = () => {
+  const getValidationState = useCallback(() => {
     if (state.status === 'idle') return { type: 'idle' as const };
     if (state.status === 'validating') return { type: 'validating' as const };
     if (state.status === 'valid') return { type: 'valid' as const, validation: state.validation };
     if (state.status === 'invalid') return { type: 'invalid' as const, error: state.error, reason: state.reason };
     return { type: 'idle' as const };
-  };
+  }, [state]);
 
   // Determine visibility states
   const showDemoSelector = mode === 'demo';
-  const showUrlInput = mode === 'custom' && !['indexing', 'ready'].includes(state.status) && !showCelebration && !wsState.isCompleted;
+  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 && !wsState.isCompleted;
-  const showReady = (mode === 'custom' && state.status === 'ready') || (wsState.isCompleted && !showCelebration);
-  const isSearchDisabled = mode === 'custom' && state.status !== 'ready' && !wsState.isCompleted;
+  const showIndexing = mode === 'custom' && state.status === 'indexing' && !showCelebration && !wsIsCompleted;
+  const showReady = (mode === 'custom' && state.status === 'ready') || (wsIsCompleted && !showCelebration);
+  const isSearchDisabled = mode === 'custom' && state.status !== 'ready' && !wsIsCompleted;
 
   // Can search?
   const canSearch = mode === 'demo' 
     ? remaining > 0 && query.trim().length > 0
-    : (state.status === 'ready' || wsState.isCompleted) && remaining > 0 && query.trim().length > 0;
+    : (state.status === 'ready' || wsIsCompleted) && remaining > 0 && query.trim().length > 0;
 
   // Get contextual placeholder text
-  const getPlaceholder = () => {
+  const getPlaceholder = useCallback(() => {
     if (mode === 'demo') {
       return "Search for authentication, error handling...";
     }
@@ -174,20 +191,28 @@ export function HeroPlayground({
     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}...`;
+    if (state.status === 'ready' || wsIsCompleted) return `Search in ${repoName}...`;
     return "Enter a GitHub URL to search...";
-  };
+  }, [mode, state.status, wsIsCompleted, repoName]);
 
   // 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;
+  const readyInfo = useMemo(() => {
+    if (wsIsCompleted && completedStats) {
+      return {
+        repoName,
+        fileCount: completedStats.files_processed,
+        functionsFound: completedStats.functions_indexed,
+      };
+    }
+    if (state.status === 'ready') {
+      return {
+        repoName: state.repoName,
+        fileCount: state.fileCount,
+        functionsFound: state.functionsFound,
+      };
+    }
+    return null;
+  }, [wsIsCompleted, completedStats, state, repoName]);
 
   return (
     <div className="w-full max-w-2xl mx-auto">
@@ -274,20 +299,17 @@ export function HeroPlayground({
             className="mb-4"
           >
             <IndexingProgress
-              progress={wsState.progress}
+              progress={wsProgress}
               phase={getIndexingPhase()}
               repoName={repoName}
-              recentFiles={wsState.recentFiles}
-              onCancel={() => {
-                resetSession();
-                wsState.reset();
-              }}
+              recentFiles={recentFiles}
+              onCancel={handleIndexAnother}
             />
           </motion.div>
         )}
 
         {/* Celebration Screen */}
-        {showCelebration && wsState.completedStats && (
+        {showCelebration && completedStats && (
           <motion.div
             key="celebration"
             initial={{ opacity: 0, scale: 0.9 }}
@@ -297,7 +319,7 @@ export function HeroPlayground({
           >
             <IndexingComplete
               repoName={repoName}
-              stats={wsState.completedStats}
+              stats={completedStats}
               onStartSearching={handleStartSearching}
               onIndexAnother={handleIndexAnother}
             />
@@ -386,14 +408,14 @@ export function HeroPlayground({
       )}
 
       {/* Error State */}
-      {(state.status === 'error' || wsState.hasError) && (
+      {(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 : wsState.error}
+            {state.status === 'error' ? state.message : wsError}
           </p>
           <button 
             type="button"
diff --git a/frontend/src/hooks/useIndexingWebSocket.ts b/frontend/src/hooks/useIndexingWebSocket.ts
index ff4fd80..a8fdf80 100644
--- a/frontend/src/hooks/useIndexingWebSocket.ts
+++ b/frontend/src/hooks/useIndexingWebSocket.ts
@@ -2,23 +2,13 @@
  * useIndexingWebSocket
  * 
  * WebSocket hook for real-time indexing progress updates.
- * Connects to the playground WebSocket endpoint and streams
- * progress events as files are processed.
- * 
- * Features:
- * - Auto-reconnect with exponential backoff
- * - Fallback to polling if WS unavailable
- * - Type-safe event handling
- * - Connection state management
+ * Uses refs for callbacks to prevent infinite render loops.
  */
 
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { buildWsUrl, API_URL } from '@/config/api';
 
-// =============================================================================
-// TYPES
-// =============================================================================
-
+// Types
 export type WSConnectionState = 'connecting' | 'connected' | 'disconnected' | 'error';
 
 export interface WSProgressEvent {
@@ -50,31 +40,13 @@ export interface WSErrorEvent {
   recoverable: boolean;
 }
 
-export interface WSCloningEvent {
-  type: 'cloning';
-  job_id: string;
-  repo_name: string;
-  message: string;
-}
-
-export interface WSConnectedEvent {
-  type: 'connected';
-  job_id: string;
-  message: string;
-}
-
-export interface WSPingEvent {
-  type: 'ping';
-  job_id: string;
-}
-
 export type WSEvent = 
   | WSProgressEvent 
   | WSCompletedEvent 
   | WSErrorEvent 
-  | WSCloningEvent 
-  | WSConnectedEvent
-  | WSPingEvent;
+  | { type: 'cloning'; job_id: string; repo_name: string; message: string }
+  | { type: 'connected'; job_id: string; message: string }
+  | { type: 'ping'; job_id: string };
 
 export interface IndexingState {
   connectionState: WSConnectionState;
@@ -86,7 +58,7 @@ export interface IndexingState {
     currentFile: string;
     functionsFound: number;
   };
-  recentFiles: string[];  // Last N files processed (for streaming effect)
+  recentFiles: string[];
   completedStats: WSCompletedEvent['stats'] | null;
   repoId: string | null;
   error: string | null;
@@ -94,107 +66,76 @@ export interface IndexingState {
 }
 
 interface UseIndexingWebSocketOptions {
-  maxRecentFiles?: number;  // How many recent files to keep in list
+  maxRecentFiles?: number;
   onCompleted?: (repoId: string, stats: WSCompletedEvent['stats']) => void;
   onError?: (error: string, recoverable: boolean) => void;
 }
 
-// =============================================================================
-// HOOK
-// =============================================================================
+const INITIAL_STATE: IndexingState = {
+  connectionState: 'disconnected',
+  phase: 'idle',
+  progress: { percent: 0, filesProcessed: 0, filesTotal: 0, currentFile: '', functionsFound: 0 },
+  recentFiles: [],
+  completedStats: null,
+  repoId: null,
+  error: null,
+  isRecoverable: false,
+};
 
 export function useIndexingWebSocket(
   jobId: string | null,
   options: UseIndexingWebSocketOptions = {}
 ) {
-  const { 
-    maxRecentFiles = 15, 
-    onCompleted, 
-    onError 
-  } = options;
+  const { maxRecentFiles = 15 } = options;
+
+  // CRITICAL: Use refs for callbacks to avoid dependency loops
+  const onCompletedRef = useRef(options.onCompleted);
+  const onErrorRef = useRef(options.onError);
+  onCompletedRef.current = options.onCompleted;
+  onErrorRef.current = options.onError;
 
-  // State
-  const [state, setState] = useState<IndexingState>({
-    connectionState: 'disconnected',
-    phase: 'idle',
-    progress: {
-      percent: 0,
-      filesProcessed: 0,
-      filesTotal: 0,
-      currentFile: '',
-      functionsFound: 0,
-    },
-    recentFiles: [],
-    completedStats: null,
-    repoId: null,
-    error: null,
-    isRecoverable: false,
-  });
+  const [state, setState] = useState<IndexingState>(INITIAL_STATE);
 
-  // Refs
   const wsRef = useRef<WebSocket | null>(null);
   const reconnectAttempts = useRef(0);
-  const reconnectTimeout = useRef<NodeJS.Timeout | null>(null);
-  const pollingInterval = useRef<NodeJS.Timeout | null>(null);
+  const reconnectTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pollingInterval = useRef<ReturnType<typeof setInterval> | null>(null);
 
-  // Cleanup function
   const cleanup = useCallback(() => {
-    if (wsRef.current) {
-      wsRef.current.close();
-      wsRef.current = null;
-    }
-    if (reconnectTimeout.current) {
-      clearTimeout(reconnectTimeout.current);
-      reconnectTimeout.current = null;
-    }
-    if (pollingInterval.current) {
-      clearInterval(pollingInterval.current);
-      pollingInterval.current = null;
-    }
+    wsRef.current?.close();
+    wsRef.current = null;
+    if (reconnectTimeout.current) clearTimeout(reconnectTimeout.current);
+    if (pollingInterval.current) clearInterval(pollingInterval.current);
+    reconnectTimeout.current = null;
+    pollingInterval.current = null;
   }, []);
 
-  // Fallback polling (if WebSocket fails)
   const startPolling = useCallback((jid: string) => {
     if (pollingInterval.current) return;
-
-    console.log('[WS] Falling back to polling for job:', jid);
+    console.log('[WS] Falling back to polling');
     
     pollingInterval.current = setInterval(async () => {
       try {
         const res = await fetch(`${API_URL}/playground/job/${jid}/status`);
         if (!res.ok) return;
-        
         const data = await res.json();
         
         if (data.status === 'completed') {
           clearInterval(pollingInterval.current!);
           pollingInterval.current = null;
-          setState(prev => ({
-            ...prev,
-            phase: 'completed',
-            repoId: data.repo_id,
-            completedStats: {
-              files_processed: data.files_processed || 0,
-              functions_indexed: data.functions_indexed || 0,
-              indexing_time_seconds: data.indexing_time || 0,
-            },
-          }));
-          onCompleted?.(data.repo_id, {
+          const stats = {
             files_processed: data.files_processed || 0,
             functions_indexed: data.functions_indexed || 0,
             indexing_time_seconds: data.indexing_time || 0,
-          });
+          };
+          setState(prev => ({ ...prev, phase: 'completed', repoId: data.repo_id, completedStats: stats }));
+          onCompletedRef.current?.(data.repo_id, stats);
         } else if (data.status === 'failed') {
           clearInterval(pollingInterval.current!);
           pollingInterval.current = null;
-          setState(prev => ({
-            ...prev,
-            phase: 'error',
-            error: data.error || 'Indexing failed',
-            isRecoverable: false,
-          }));
-          onError?.(data.error || 'Indexing failed', false);
-        } else if (data.status === 'indexing') {
+          setState(prev => ({ ...prev, phase: 'error', error: data.error || 'Failed', isRecoverable: false }));
+          onErrorRef.current?.(data.error || 'Failed', false);
+        } else {
           setState(prev => ({
             ...prev,
             phase: 'indexing',
@@ -211,94 +152,57 @@ export function useIndexingWebSocket(
         console.error('[Polling] Error:', err);
       }
     }, 2000);
-  }, [onCompleted, onError]);
+  }, []);
 
-  // Handle WebSocket message
   const handleMessage = useCallback((event: MessageEvent) => {
     try {
       const data: WSEvent = JSON.parse(event.data);
       
-      switch (data.type) {
-        case 'connected':
-          setState(prev => ({
+      if (data.type === 'connected') {
+        setState(prev => ({ ...prev, connectionState: 'connected', phase: 'connecting' }));
+      } else if (data.type === 'ping') {
+        // Keepalive
+      } else if (data.type === 'cloning') {
+        setState(prev => ({ ...prev, phase: 'cloning' }));
+      } else if (data.type === 'progress') {
+        setState(prev => {
+          const newFiles = data.current_file 
+            ? [data.current_file, ...prev.recentFiles.filter(f => f !== data.current_file)].slice(0, maxRecentFiles)
+            : prev.recentFiles;
+          return {
             ...prev,
-            connectionState: 'connected',
-            phase: 'connecting',
-          }));
-          break;
-
-        case 'ping':
-          // Keepalive, ignore
-          break;
-
-        case 'cloning':
-          setState(prev => ({
-            ...prev,
-            phase: 'cloning',
-          }));
-          break;
-
-        case 'progress':
-          setState(prev => {
-            // Add current file to recent files list (for streaming effect)
-            const newRecentFiles = data.current_file 
-              ? [data.current_file, ...prev.recentFiles.filter(f => f !== data.current_file)].slice(0, maxRecentFiles)
-              : prev.recentFiles;
-
-            return {
-              ...prev,
-              phase: 'indexing',
-              progress: {
-                percent: data.percent,
-                filesProcessed: data.files_processed,
-                filesTotal: data.files_total,
-                currentFile: data.current_file,
-                functionsFound: data.functions_found,
-              },
-              recentFiles: newRecentFiles,
-            };
-          });
-          break;
-
-        case 'completed':
-          setState(prev => ({
-            ...prev,
-            phase: 'completed',
-            repoId: data.repo_id,
-            completedStats: data.stats,
+            phase: 'indexing',
             progress: {
-              ...prev.progress,
-              percent: 100,
+              percent: data.percent,
+              filesProcessed: data.files_processed,
+              filesTotal: data.files_total,
+              currentFile: data.current_file,
+              functionsFound: data.functions_found,
             },
-          }));
-          onCompleted?.(data.repo_id, data.stats);
-          break;
-
-        case 'error':
-          setState(prev => ({
-            ...prev,
-            phase: 'error',
-            error: data.message,
-            isRecoverable: data.recoverable,
-          }));
-          onError?.(data.message, data.recoverable);
-          break;
+            recentFiles: newFiles,
+          };
+        });
+      } else if (data.type === 'completed') {
+        setState(prev => ({
+          ...prev,
+          phase: 'completed',
+          repoId: data.repo_id,
+          completedStats: data.stats,
+          progress: { ...prev.progress, percent: 100 },
+        }));
+        onCompletedRef.current?.(data.repo_id, data.stats);
+      } else if (data.type === 'error') {
+        setState(prev => ({ ...prev, phase: 'error', error: data.message, isRecoverable: data.recoverable }));
+        onErrorRef.current?.(data.message, data.recoverable);
       }
     } catch (err) {
-      console.error('[WS] Failed to parse message:', err);
+      console.error('[WS] Parse error:', err);
     }
-  }, [maxRecentFiles, onCompleted, onError]);
+  }, [maxRecentFiles]);
 
-  // Connect to WebSocket
   const connect = useCallback((jid: string) => {
     cleanup();
-    
-    setState(prev => ({
-      ...prev,
-      connectionState: 'connecting',
-      phase: 'connecting',
-      error: null,
-    }));
+    setState(prev => ({ ...prev, connectionState: 'connecting', phase: 'connecting', error: null }));
 
     const wsUrl = buildWsUrl(`/ws/playground/${jid}`);
     console.log('[WS] Connecting to:', wsUrl);
@@ -310,101 +214,49 @@ export function useIndexingWebSocket(
       ws.onopen = () => {
         console.log('[WS] Connected');
         reconnectAttempts.current = 0;
-        setState(prev => ({
-          ...prev,
-          connectionState: 'connected',
-        }));
+        setState(prev => ({ ...prev, connectionState: 'connected' }));
       };
 
       ws.onmessage = handleMessage;
 
-      ws.onerror = (error) => {
-        console.error('[WS] Error:', error);
-        setState(prev => ({
-          ...prev,
-          connectionState: 'error',
-        }));
+      ws.onerror = () => {
+        setState(prev => ({ ...prev, connectionState: 'error' }));
       };
 
       ws.onclose = (event) => {
-        console.log('[WS] Closed:', event.code, event.reason);
-        
-        // If closed cleanly (1000) or job doesn't exist (4404), don't reconnect
+        console.log('[WS] Closed:', event.code);
         if (event.code === 1000 || event.code === 4404) {
-          setState(prev => ({
-            ...prev,
-            connectionState: 'disconnected',
-          }));
+          setState(prev => ({ ...prev, connectionState: 'disconnected' }));
           return;
         }
-
-        // Try to reconnect with exponential backoff
         if (reconnectAttempts.current < 3) {
           const delay = Math.min(1000 * Math.pow(2, reconnectAttempts.current), 5000);
-          console.log(`[WS] Reconnecting in ${delay}ms (attempt ${reconnectAttempts.current + 1})`);
-          
           reconnectTimeout.current = setTimeout(() => {
             reconnectAttempts.current++;
             connect(jid);
           }, delay);
         } else {
-          // Fallback to polling after 3 failed attempts
-          console.log('[WS] Max reconnect attempts reached, falling back to polling');
           startPolling(jid);
         }
       };
-    } catch (err) {
-      console.error('[WS] Failed to create WebSocket:', err);
+    } catch {
       startPolling(jid);
     }
   }, [cleanup, handleMessage, startPolling]);
 
-  // Connect when jobId changes
   useEffect(() => {
     if (jobId) {
       connect(jobId);
     } else {
       cleanup();
-      setState({
-        connectionState: 'disconnected',
-        phase: 'idle',
-        progress: {
-          percent: 0,
-          filesProcessed: 0,
-          filesTotal: 0,
-          currentFile: '',
-          functionsFound: 0,
-        },
-        recentFiles: [],
-        completedStats: null,
-        repoId: null,
-        error: null,
-        isRecoverable: false,
-      });
+      setState(INITIAL_STATE);
     }
-
     return cleanup;
   }, [jobId, connect, cleanup]);
 
-  // Reset function
   const reset = useCallback(() => {
     cleanup();
-    setState({
-      connectionState: 'disconnected',
-      phase: 'idle',
-      progress: {
-        percent: 0,
-        filesProcessed: 0,
-        filesTotal: 0,
-        currentFile: '',
-        functionsFound: 0,
-      },
-      recentFiles: [],
-      completedStats: null,
-      repoId: null,
-      error: null,
-      isRecoverable: false,
-    });
+    setState(INITIAL_STATE);
   }, [cleanup]);
 
   return {