feat: delete individual repos via three-dot menu + confirmation dialog (OPE-159)

Each repo card now has a three-dot menu (visible on hover) with 'Delete repository'.
Clicking shows confirmation dialog: 'This will permanently remove [name] and all
its indexed data. This action cannot be undone.'

Flow: hover card -> click ... -> click Delete -> confirm -> DELETE /repos/{id}
- Toast notification on success/failure
- Repo list refreshes automatically
- If deleted repo was selected, clears selection

Props chain: DashboardHome (handler) -> RepoListView -> RepoList -> RepoCard

Closes OPE-159

Author: DevanshuNEU

frontend/src/components/RepoList.tsx

@@ -1,14 +1,30 @@
 import { useState, useRef, useMemo } from 'react'
 import { motion } from 'framer-motion'
-import { FolderGit2, Plus, Files, FunctionSquare, Clock } from 'lucide-react'
+import { FolderGit2, Plus, Files, FunctionSquare, Clock, MoreVertical, Trash2 } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog'
+import { Button } from './ui/button'
 import type { Repository } from '../types'
 import { RepoGridSkeleton } from './ui/Skeleton'
 
 interface RepoListProps {
   repos: Repository[]
   selectedRepo: string | null
   onSelect: (repoId: string) => void
+  onDelete?: (repoId: string) => void
   onAddClick?: () => void
   loading?: boolean
 }
@@ -60,10 +76,11 @@ const StatusDot = ({ status }: { status: string }) => {
   )
 }
 
-const RepoCard = ({ repo, index, onSelect }: {
+const RepoCard = ({ repo, index, onSelect, onDeleteClick }: {
   repo: Repository
   index: number
   onSelect: () => void
+  onDeleteClick?: () => void
 }) => {
   const cardRef = useRef<HTMLButtonElement>(null)
   const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
@@ -100,12 +117,35 @@ const RepoCard = ({ repo, index, onSelect }: {
       )}
 
       <div className="relative">
-        {/* Top row: icon + status */}
+        {/* Top row: icon + status + menu */}
         <div className="flex items-start justify-between mb-3">
           <div className="w-10 h-10 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center group-hover:bg-primary/15 transition-colors">
             <FolderGit2 className="w-5 h-5 text-primary" />
           </div>
-          <StatusDot status={repo.status} />
+          <div className="flex items-center gap-1">
+            <StatusDot status={repo.status} />
+            {onDeleteClick && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    onClick={(e) => e.stopPropagation()}
+                    className="w-6 h-6 flex items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors opacity-0 group-hover:opacity-100"
+                  >
+                    <MoreVertical className="w-3.5 h-3.5" />
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem
+                    onClick={(e) => { e.stopPropagation(); onDeleteClick() }}
+                    className="text-destructive focus:text-destructive"
+                  >
+                    <Trash2 className="w-3.5 h-3.5 mr-2" />
+                    Delete repository
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </div>
         </div>
 
         {/* Repo name + slug */}
@@ -158,8 +198,9 @@ const SortTab = ({ label, active, onClick }: {
   </button>
 )
 
-export function RepoList({ repos, selectedRepo, onSelect, onAddClick, loading }: RepoListProps) {
+export function RepoList({ repos, selectedRepo, onSelect, onDelete, onAddClick, loading }: RepoListProps) {
   const [sortMode, setSortMode] = useState<SortMode>('recent')
+  const [deleteTarget, setDeleteTarget] = useState<Repository | null>(null)
 
   const sortedRepos = useMemo(() => {
     const sorted = [...repos]
@@ -222,9 +263,36 @@ export function RepoList({ repos, selectedRepo, onSelect, onAddClick, loading }:
             repo={repo}
             index={index}
             onSelect={() => onSelect(repo.id)}
+            onDeleteClick={onDelete ? () => setDeleteTarget(repo) : undefined}
           />
         ))}
       </div>
+
+      {/* Delete confirmation dialog */}
+      <Dialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete repository</DialogTitle>
+            <DialogDescription>
+              This will permanently remove <strong>{deleteTarget?.name}</strong> and all its indexed data. This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2">
+            <Button variant="outline" onClick={() => setDeleteTarget(null)}>Cancel</Button>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                if (deleteTarget && onDelete) {
+                  onDelete(deleteTarget.id)
+                  setDeleteTarget(null)
+                }
+              }}
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }

frontend/src/components/dashboard/DashboardHome.tsx

@@ -212,6 +212,23 @@ export function DashboardHome() {
   }
 
   const selectedRepoData = repos.find((r) => r.id === selectedRepo)
+  const handleDeleteRepo = async (repoId: string) => {
+    try {
+      const response = await fetch(`${API_URL}/repos/${repoId}`, {
+        method: 'DELETE',
+        headers: { Authorization: `Bearer ${session?.access_token}` },
+      })
+      if (!response.ok) throw new Error('Failed to delete')
+      toast.success('Repository deleted')
+      refreshRepos()
+      if (selectedRepo === repoId) setSelectedRepo(null)
+    } catch (error) {
+      toast.error('Failed to delete repository', {
+        description: error instanceof Error ? error.message : 'Please try again',
+      })
+    }
+  }
+
   const isRepoView = selectedRepo && selectedRepoData
 
   return (
@@ -226,6 +243,7 @@ export function DashboardHome() {
             selectedRepo={selectedRepo}
             maxRepos={maxRepos}
             onSelectRepo={(id) => { setSelectedRepo(id); setActiveTab('overview') }}
+            onDeleteRepo={handleDeleteRepo}
             onAddClick={() => setShowAddForm(true)}
             onGitHubClick={() => setShowGitHubSelector(true)}
           />

frontend/src/components/dashboard/RepoListView.tsx

@@ -15,6 +15,7 @@ interface RepoListViewProps {
   selectedRepo: string | null
   maxRepos: number
   onSelectRepo: (id: string) => void
+  onDeleteRepo: (id: string) => void
   onAddClick: () => void
   onGitHubClick: () => void
 }
@@ -26,6 +27,7 @@ export function RepoListView({
   selectedRepo,
   maxRepos,
   onSelectRepo,
+  onDeleteRepo,
   onAddClick,
   onGitHubClick,
 }: RepoListViewProps) {
@@ -74,6 +76,7 @@ export function RepoListView({
         selectedRepo={selectedRepo}
         loading={reposLoading}
         onSelect={onSelectRepo}
+        onDelete={onDeleteRepo}
         onAddClick={onAddClick}
       />
     </motion.div>