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

[DevanshuNEU]

Frontend WebSocket Implementation for Real-Time Indexing Progress

Closes #115

What This PR Does

Implements the frontend WebSocket integration for real-time indexing progress, building on the backend WebSocket endpoint from PR #150.

Key Features

1. useIndexingWebSocket Hook

const wsState = useIndexingWebSocket(jobId, {
  maxRecentFiles: 12,
  onCompleted: (repoId, stats) => { ... },
  onError: (error, recoverable) => { ... },
});

• Type-safe WebSocket state machine
• Auto-reconnect with exponential backoff (max 3 attempts)
• Fallback to HTTP polling if WebSocket fails
• Streaming file list buffer

2. Enhanced IndexingProgress Component

• Streaming file list - Files appear in real-time as processed 🎬
• Phase indicators: Clone → Index → Done
• Glowing progress bar with animation
• Language-aware file icons ( Python, React, etc.)
• Staggered entry animations using Framer Motion

3. IndexingComplete Celebration Screen

• Confetti animation on success
• Animated stat counters (count up effect)
• Success glow gradient
• CTA buttons: "Start Searching" / "Index Another"

4. Updated HeroPlayground

• Integrated WebSocket for custom repo indexing
• AnimatePresence for smooth state transitions
• Shows celebration screen on completion
• Error handling with retry option

Files Changed

File	Change
hooks/useIndexingWebSocket.ts	NEW - WebSocket state machine
components/playground/IndexingComplete.tsx	NEW - Celebration UI
components/playground/IndexingProgress.tsx	Enhanced with streaming
components/playground/HeroPlayground.tsx	WS integration
components/playground/index.ts	Updated exports

The "Holy Shit" Moment

The streaming file list was identified in our team meeting as the key differentiator vs polling:

Polling: Updates chunk every 2s (feels slow)
WebSocket: Files stream in real-time (feels ALIVE)

📄 src/auth/login.py       ← processing
📄 src/auth/oauth.py
📄 src/models/user.py
📄 src/routes/api.py
+8 more files processed

Testing

• Build passes (npm run build)
• TypeScript types check
• Manual testing with live backend (pending backend PR merge)

Event Flow

Backend Job → Redis Pub/Sub → WS Endpoint → Browser
                              ↓
           connected → cloning → progress (streaming) → completed

Dependencies

Requires backend PR #150 to be merged first for full E2E functionality.

[vercel]

@DevanshuNEU is attempting to deploy a commit to the Dev's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
opencodeintel	Ready	Preview, Comment	Jan 6, 2026 1:52am