feat(frontend): add Supabase authentication UI with shadcn

Authentication Components:
- LoginForm: Email/password login with shadcn Card, Input, Button
- SignupForm: User registration with password confirmation
- AuthContext: Supabase client integration with session management
- UserNav: Profile dropdown with avatar, email display, logout
- LoginPage/SignupPage: Full-page auth layouts

Features:
- Protected route wrapper for authenticated pages
- Automatic redirect to /login for unauthenticated users
- Session persistence with Supabase Auth
- Beautiful gradient backgrounds and card-based forms
- User avatar with initials in navbar
- Dropdown menu with account info and logout

Routing:
- / → Dashboard (protected, requires auth)
- /login → Login page (redirects to / if authenticated)
- /signup → Signup page (redirects to / if authenticated)

Integration:
- Supabase Auth for user management
- JWT token storage in session
- Real-time auth state updates
- Clean error handling with alerts

UI: Professional shadcn components with accessibility and animations

Author: DevanshuNEU

frontend/src/App.tsx

@@ -1,281 +1,58 @@
-import { useState, useEffect } from 'react'
-import './index.css'
-import { Toaster } from '@/components/ui/sonner'
-import { toast } from 'sonner'
-import { RepoList } from './components/RepoList'
-import { AddRepoForm } from './components/AddRepoForm'
-import { SearchPanel } from './components/SearchPanel'
-import { DependencyGraph } from './components/DependencyGraph'
-import { RepoOverview } from './components/RepoOverview'
-import { StyleInsights } from './components/StyleInsights'
-import { ImpactAnalyzer } from './components/ImpactAnalyzer'
-import { PerformanceDashboard } from './components/PerformanceDashboard'
-import type { Repository } from './types'
-
-const API_URL = 'http://localhost:8000'
-const API_KEY = 'dev-secret-key'
-
-type RepoTab = 'overview' | 'search' | 'dependencies' | 'insights' | 'impact'
-
-function App() {
-  const [repos, setRepos] = useState<Repository[]>([])
-  const [selectedRepo, setSelectedRepo] = useState<string | null>(null)
-  const [activeTab, setActiveTab] = useState<RepoTab>('overview')
-  const [loading, setLoading] = useState(false)
-  const [showPerformance, setShowPerformance] = useState(false)
-
-  const fetchRepos = async () => {
-    try {
-      const response = await fetch(`${API_URL}/api/repos`, {
-        headers: { 'Authorization': `Bearer ${API_KEY}` }
-      })
-      const data = await response.json()
-      setRepos(data.repositories || [])
-    } catch (error) {
-      console.error('Error fetching repos:', error)
-    }
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { AuthProvider, useAuth } from './contexts/AuthContext';
+import { LoginPage } from './pages/LoginPage';
+import { SignupPage } from './pages/SignupPage';
+import { Dashboard } from './components/Dashboard';
+
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-lg">Loading...</div>
+      </div>
+    );
   }
 
-  useEffect(() => {
-    fetchRepos()
-    const interval = setInterval(fetchRepos, 30000)
-    return () => clearInterval(interval)
-  }, [])
-
-  const handleAddRepo = async (gitUrl: string, branch: string) => {
-    try {
-      setLoading(true)
-      const name = gitUrl.split('/').pop()?.replace('.git', '') || 'unknown'
-      
-      const response = await fetch(`${API_URL}/api/repos`, {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${API_KEY}`,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ name, git_url: gitUrl, branch })
-      })
-      
-      const data = await response.json()
-      
-      await fetch(`${API_URL}/api/repos/${data.repo_id}/index`, {
-        method: 'POST',
-        headers: { 'Authorization': `Bearer ${API_KEY}` }
-      })
-      
-      await fetchRepos()
-      toast.success('Repository added!', {
-        description: `${name} is now being indexed`
-      })
-    } catch (error) {
-      console.error('Error adding repo:', error)
-      toast.error('Failed to add repository', {
-        description: 'Please check the Git URL and try again'
-      })
-    } finally {
-      setLoading(false)
-    }
+  if (!user) {
+    return <Navigate to="/login" replace />;
   }
 
-  const handleReindex = async () => {
-    if (!selectedRepo) return
-    
-    try {
-      setLoading(true)
-      await fetch(`${API_URL}/api/repos/${selectedRepo}/index`, {
-        method: 'POST',
-        headers: { 'Authorization': `Bearer ${API_KEY}` }
-      })
-      await fetchRepos()
-      // RepoOverview component will show the toast and progress
-    } catch (error) {
-      toast.error('Re-indexing failed', {
-        description: 'Please check the console for details'
-      })
-    } finally {
-      setLoading(false)
-    }
-  }
+  return <>{children}</>;
+}
 
-  const selectedRepoData = repos.find(r => r.id === selectedRepo)
-  const isRepoView = selectedRepo && selectedRepoData
+function AppRoutes() {
+  const { user } = useAuth();
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <nav className="bg-white border-b border-gray-200">
-        <div className="max-w-7xl mx-auto px-6">
-          <div className="flex items-center justify-between h-16">
-            <div className="flex items-center gap-2">
-              <div className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
-                <span className="text-white font-bold text-sm">CI</span>
-              </div>
-              <span className="font-semibold text-gray-900">CodeIntel</span>
-              <span className="text-xs text-gray-400 ml-2">MCP Server</span>
-            </div>
-
-            <div className="flex items-center gap-4">
-              <button
-                onClick={() => setShowPerformance(!showPerformance)}
-                className={`text-xs px-3 py-1.5 rounded-md transition-colors ${
-                  showPerformance 
-                    ? 'bg-blue-100 text-blue-700 font-medium'
-                    : 'text-gray-600 hover:bg-gray-100'
-                }`}
-              >
-                📊 Performance
-              </button>
-              <div className="flex items-center gap-2 text-xs text-gray-500">
-                <div className="w-2 h-2 rounded-full bg-green-500" />
-                <span>API Connected</span>
-              </div>
-              <div className="text-xs text-gray-400 border-l border-gray-200 pl-4">
-                {repos.length} repos • {repos.filter(r => r.status === 'indexed').length} indexed
-              </div>
-            </div>
-          </div>
-        </div>
-      </nav>
-
-      <main className="max-w-7xl mx-auto px-6 py-8">
-        {/* Performance Dashboard Overlay */}
-        {showPerformance && (
-          <div className="mb-6">
-            <PerformanceDashboard apiUrl={API_URL} apiKey={API_KEY} />
-          </div>
-        )}
-
-        {!isRepoView && (
-          <div className="space-y-6">
-            <div className="flex items-center justify-between">
-              <div>
-                <h1 className="text-2xl font-semibold text-gray-900">Repositories</h1>
-                <p className="text-sm text-gray-600 mt-1">Manage and index your codebases</p>
-              </div>
-              <AddRepoForm onAdd={handleAddRepo} loading={loading} />
-            </div>
-            
-            <RepoList 
-              repos={repos} 
-              selectedRepo={selectedRepo}
-              onSelect={(id) => {
-                setSelectedRepo(id)
-                setActiveTab('overview')
-              }}
-            />
-          </div>
-        )}
-
-        {isRepoView && (
-          <div>
-            <div className="mb-6">
-              <button
-                onClick={() => {
-                  setSelectedRepo(null)
-                  setActiveTab('overview')
-                }}
-                className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 mb-4"
-              >
-                <span>←</span>
-                <span>Back to Repositories</span>
-              </button>
-
-              <div className="flex items-center justify-between">
-                <div>
-                  <h1 className="text-2xl font-semibold text-gray-900">{selectedRepoData.name}</h1>
-                  <p className="text-sm text-gray-600 mt-1 font-mono">{selectedRepoData.git_url}</p>
-                </div>
-                
-                {selectedRepoData.status === 'indexed' && (
-                  <span className="badge-success">✓ Indexed</span>
-                )}
-              </div>
-            </div>
-
-            <div className="border-b border-gray-200 mb-6">
-              <div className="flex gap-6 overflow-x-auto">
-                <button
-                  onClick={() => setActiveTab('overview')}
-                  className={`pb-3 border-b-2 transition-colors whitespace-nowrap ${
-                    activeTab === 'overview'
-                      ? 'border-blue-600 text-gray-900 font-medium'
-                      : 'border-transparent text-gray-600 hover:text-gray-900'
-                  }`}
-                >
-                  Overview
-                </button>
-                <button
-                  onClick={() => setActiveTab('search')}
-                  className={`pb-3 border-b-2 transition-colors whitespace-nowrap ${
-                    activeTab === 'search'
-                      ? 'border-blue-600 text-gray-900 font-medium'
-                      : 'border-transparent text-gray-600 hover:text-gray-900'
-                  }`}
-                >
-                  Search
-                </button>
-                <button
-                  onClick={() => setActiveTab('dependencies')}
-                  className={`pb-3 border-b-2 transition-colors whitespace-nowrap ${
-                    activeTab === 'dependencies'
-                      ? 'border-blue-600 text-gray-900 font-medium'
-                      : 'border-transparent text-gray-600 hover:text-gray-900'
-                  }`}
-                >
-                  Dependencies
-                </button>
-                <button
-                  onClick={() => setActiveTab('insights')}
-                  className={`pb-3 border-b-2 transition-colors whitespace-nowrap ${
-                    activeTab === 'insights'
-                      ? 'border-blue-600 text-gray-900 font-medium'
-                      : 'border-transparent text-gray-600 hover:text-gray-900'
-                  }`}
-                >
-                  Code Style
-                </button>
-                <button
-                  onClick={() => setActiveTab('impact')}
-                  className={`pb-3 border-b-2 transition-colors whitespace-nowrap ${
-                    activeTab === 'impact'
-                      ? 'border-blue-600 text-gray-900 font-medium'
-                      : 'border-transparent text-gray-600 hover:text-gray-900'
-                  }`}
-                >
-                  Impact
-                </button>
-              </div>
-            </div>
-
-            {activeTab === 'overview' && (
-              <RepoOverview 
-                repo={selectedRepoData} 
-                onReindex={handleReindex}
-                apiUrl={API_URL}
-                apiKey={API_KEY}
-              />
-            )}
-
-            {activeTab === 'search' && (
-              <SearchPanel repoId={selectedRepo} apiUrl={API_URL} apiKey={API_KEY} />
-            )}
-
-            {activeTab === 'dependencies' && (
-              <DependencyGraph repoId={selectedRepo} apiUrl={API_URL} apiKey={API_KEY} />
-            )}
-
-            {activeTab === 'insights' && (
-              <StyleInsights repoId={selectedRepo} apiUrl={API_URL} apiKey={API_KEY} />
-            )}
-
-            {activeTab === 'impact' && (
-              <ImpactAnalyzer repoId={selectedRepo} apiUrl={API_URL} apiKey={API_KEY} />
-            )}
-          </div>
-        )}
-      </main>
-      <Toaster />
-    </div>
-  )
+    <Routes>
+      <Route 
+        path="/login" 
+        element={user ? <Navigate to="/" replace /> : <LoginPage />} 
+      />
+      <Route 
+        path="/signup" 
+        element={user ? <Navigate to="/" replace /> : <SignupPage />} 
+      />
+      <Route
+        path="/"
+        element={
+          <ProtectedRoute>
+            <Dashboard />
+          </ProtectedRoute>
+        }
+      />
+    </Routes>
+  );
 }
 
-export default App
+export function App() {
+  return (
+    <BrowserRouter>
+      <AuthProvider>
+        <AppRoutes />
+      </AuthProvider>
+    </BrowserRouter>
+  );
+}

frontend/src/components/UserNav.tsx

@@ -0,0 +1,48 @@
+import { useAuth } from '../contexts/AuthContext';
+import { Avatar, AvatarFallback } from './ui/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+import { Button } from './ui/button';
+import { LogOut } from 'lucide-react';
+
+export function UserNav() {
+  const { user, signOut } = useAuth();
+
+  if (!user) return null;
+
+  const email = user.email || '';
+  const initials = email.split('@')[0].substring(0, 2).toUpperCase();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="relative h-10 w-10 rounded-full">
+          <Avatar className="h-10 w-10">
+            <AvatarFallback className="bg-primary text-primary-foreground">
+              {initials}
+            </AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="end">
+        <DropdownMenuLabel>
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium">Account</p>
+            <p className="text-xs text-muted-foreground">{email}</p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => signOut()}>
+          <LogOut className="mr-2 h-4 w-4" />
+          Log out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}