feat(dashboard): Overview V2 - Codebase Intelligence

frontend/src/App.tsx

@@ -14,8 +14,8 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
 
   if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-[#0a0a0b]">
-        <div className="text-lg text-white">Loading...</div>
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="text-lg text-foreground">Loading...</div>
       </div>
     );
   }

frontend/src/components/AddRepoForm.tsx

@@ -1,6 +1,9 @@
 import { useState } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
-import { Package, Plus, X } from 'lucide-react'
+import { Package, Plus, X, Loader2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 
 interface AddRepoFormProps {
   onAdd: (gitUrl: string, branch: string) => Promise<void>
@@ -23,47 +26,45 @@ export function AddRepoForm({ onAdd, loading }: AddRepoFormProps) {
 
   return (
     <>
-      <motion.button
-        whileHover={{ scale: 1.02 }}
-        whileTap={{ scale: 0.98 }}
+      <Button
         onClick={() => setShowForm(true)}
-        className="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white text-sm font-medium rounded-xl transition-all shadow-lg shadow-blue-500/20 flex items-center gap-2"
         disabled={loading}
+        className="bg-primary hover:bg-primary/90 text-primary-foreground gap-2"
       >
-        <span className="text-lg">+</span>
-        <span>Add Repository</span>
-      </motion.button>
+        <Plus className="w-4 h-4" />
+        Add Repository
+      </Button>
 
       <AnimatePresence>
         {showForm && (
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50"
+            className="fixed inset-0 bg-background/80 backdrop-blur-md flex items-center justify-center z-50"
             onClick={() => !loading && setShowForm(false)}
           >
             <motion.div
               initial={{ opacity: 0, scale: 0.95, y: 20 }}
               animate={{ opacity: 1, scale: 1, y: 0 }}
               exit={{ opacity: 0, scale: 0.95, y: 20 }}
               onClick={e => e.stopPropagation()}
-              className="bg-gradient-to-br from-[#111113] to-[#0a0a0c] border border-white/10 rounded-2xl shadow-2xl w-full max-w-md mx-4"
+              className="bg-card border border-border rounded-xl shadow-2xl w-full max-w-md mx-4"
             >
               {/* Header */}
-              <div className="flex items-center justify-between p-6 border-b border-white/5">
+              <div className="flex items-center justify-between p-6 border-b border-border">
                 <div className="flex items-center gap-3">
-                  <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center">
-                    <Package className="w-5 h-5 text-blue-400" />
+                  <div className="w-10 h-10 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center">
+                    <Package className="w-5 h-5 text-primary" />
                   </div>
                   <div>
-                    <h3 className="text-lg font-semibold text-white">Add Repository</h3>
-                    <p className="text-sm text-gray-500">Clone and index with AI</p>
+                    <h3 className="text-lg font-semibold text-foreground">Add Repository</h3>
+                    <p className="text-sm text-muted-foreground">Clone and index with AI</p>
                   </div>
                 </div>
                 <button
                   onClick={() => setShowForm(false)}
-                  className="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:text-white hover:bg-white/10 transition-colors"
+                  className="w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
                   disabled={loading}
                 >
                   <X className="w-4 h-4" />
@@ -72,63 +73,62 @@ export function AddRepoForm({ onAdd, loading }: AddRepoFormProps) {
 
               {/* Form */}
               <form onSubmit={handleSubmit} className="p-6 space-y-5">
-                <div>
-                  <label className="block text-sm font-medium mb-2 text-gray-300">Git URL</label>
-                  <input
+                <div className="space-y-2">
+                  <Label htmlFor="gitUrl">Git URL</Label>
+                  <Input
+                    id="gitUrl"
                     type="url"
                     value={gitUrl}
                     onChange={(e) => setGitUrl(e.target.value)}
                     placeholder="https://github.com/username/repo"
-                    className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/20 transition-all"
                     required
                     disabled={loading}
                     autoFocus
                   />
                 </div>
 
-                <div>
-                  <label className="block text-sm font-medium mb-2 text-gray-300">Branch</label>
-                  <input
+                <div className="space-y-2">
+                  <Label htmlFor="branch">Branch</Label>
+                  <Input
+                    id="branch"
                     type="text"
                     value={branch}
                     onChange={(e) => setBranch(e.target.value)}
                     placeholder="main"
-                    className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/20 transition-all"
                     required
                     disabled={loading}
                   />
-                  <p className="mt-2 text-xs text-gray-500">Repository will be cloned and automatically indexed</p>
+                  <p className="text-xs text-muted-foreground">Repository will be cloned and automatically indexed</p>
                 </div>
 
                 {/* Actions */}
                 <div className="flex gap-3 pt-2">
-                  <button
+                  <Button
                     type="button"
+                    variant="outline"
                     onClick={() => { setShowForm(false); setGitUrl(''); setBranch('main') }}
-                    className="flex-1 px-4 py-3 bg-white/5 border border-white/10 text-gray-300 font-medium rounded-xl hover:bg-white/10 transition-colors disabled:opacity-50"
                     disabled={loading}
+                    className="flex-1"
                   >
                     Cancel
-                  </button>
-                  <motion.button
-                    whileHover={{ scale: 1.02 }}
-                    whileTap={{ scale: 0.98 }}
+                  </Button>
+                  <Button
                     type="submit"
-                    className="flex-1 px-4 py-3 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-medium rounded-xl transition-all disabled:opacity-50 flex items-center justify-center gap-2 shadow-lg shadow-blue-500/20"
                     disabled={loading}
+                    className="flex-1 bg-primary hover:bg-primary/90 text-primary-foreground"
                   >
                     {loading ? (
                       <>
-                        <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                        <span>Adding...</span>
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                        Adding...
                       </>
                     ) : (
                       <>
                         <Plus className="w-4 h-4" />
-                        <span>Add & Index</span>
+                        Add & Index
                       </>
                     )}
-                  </motion.button>
+                  </Button>
                 </div>
               </form>
             </motion.div>