feat: redesign repo cards with owner/repo, timestamps, sort tabs (OPE-157)

Repo cards now show:
- owner/repo slug extracted from git_url (e.g. Effect-TS/effect)
- File count + function count side by side
- 'Indexed 2h ago' relative timestamp from last_indexed_at
- Status dot instead of full badge (cleaner)

Sort bar above the grid:
- Recent (default): sorted by last_indexed_at descending
- Name: alphabetical
- Size: largest file count first
- Repo count shown on right side

Repository type updated with function_count, created_at, last_indexed_at.
These fields already exist in the backend (select *), just weren't typed.

230 lines, same glow effect, premium feel.

Author: DevanshuNEU

frontend/src/components/RepoList.tsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useMemo } from 'react'
 import { motion } from 'framer-motion'
-import { FolderGit2, Plus } from 'lucide-react'
+import { FolderGit2, Plus, Files, FunctionSquare, Clock } from 'lucide-react'
+import { cn } from '@/lib/utils'
 import type { Repository } from '../types'
 import { RepoGridSkeleton } from './ui/Skeleton'
 
@@ -12,38 +13,71 @@ interface RepoListProps {
   loading?: boolean
 }
 
-const StatusBadge = ({ status }: { status: string }) => {
+type SortMode = 'recent' | 'name' | 'size'
+
+/** Extract "owner/repo" from a GitHub URL */
+function parseRepoSlug(gitUrl: string): string {
+  try {
+    const cleaned = gitUrl.replace(/\.git$/, '')
+    const match = cleaned.match(/github\.com\/([^/]+\/[^/]+)/)
+    return match ? match[1] : ''
+  } catch {
+    return ''
+  }
+}
+
+/** Relative time: "2h ago", "3d ago", "just now" */
+function timeAgo(dateStr?: string): string {
+  if (!dateStr) return ''
+  const now = Date.now()
+  const then = new Date(dateStr).getTime()
+  const diff = now - then
+  if (diff < 0) return ''
+
+  const mins = Math.floor(diff / 60_000)
+  if (mins < 1) return 'just now'
+  if (mins < 60) return `${mins}m ago`
+  const hrs = Math.floor(mins / 60)
+  if (hrs < 24) return `${hrs}h ago`
+  const days = Math.floor(hrs / 24)
+  if (days < 30) return `${days}d ago`
+  return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+
+const StatusDot = ({ status }: { status: string }) => {
   const isIndexed = status === 'indexed'
-  
   return (
-    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full border
-      ${isIndexed 
-        ? 'bg-primary/10 text-primary border-primary/20' 
-        : 'bg-muted text-muted-foreground border-border'
-      }`}
-    >
-      <span className={`w-1.5 h-1.5 rounded-full ${isIndexed ? 'bg-primary' : 'bg-muted-foreground animate-pulse'}`} />
+    <span className={cn(
+      'inline-flex items-center gap-1.5 text-xs',
+      isIndexed ? 'text-primary' : 'text-muted-foreground',
+    )}>
+      <span className={cn(
+        'w-1.5 h-1.5 rounded-full',
+        isIndexed ? 'bg-primary' : 'bg-muted-foreground animate-pulse',
+      )} />
       {isIndexed ? 'Indexed' : 'Pending'}
     </span>
   )
 }
 
-const RepoCard = ({ repo, index, onSelect }: { 
+const RepoCard = ({ repo, index, onSelect }: {
   repo: Repository
   index: number
-  onSelect: () => void 
+  onSelect: () => void
 }) => {
   const cardRef = useRef<HTMLButtonElement>(null)
   const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
   const [hovering, setHovering] = useState(false)
+  const slug = parseRepoSlug(repo.git_url)
+  const indexed = timeAgo(repo.last_indexed_at)
 
   return (
     <motion.button
       ref={cardRef}
-      initial={{ opacity: 0, y: 20 }}
+      initial={{ opacity: 0, y: 12 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{ delay: index * 0.05, duration: 0.3 }}
-      whileHover={{ y: -3 }}
+      transition={{ delay: index * 0.04, duration: 0.25 }}
+      whileHover={{ y: -2 }}
       onClick={onSelect}
       onMouseMove={(e) => {
         if (!cardRef.current) return
@@ -56,7 +90,6 @@ const RepoCard = ({ repo, index, onSelect }: {
         bg-card border border-border hover:border-primary/40
         focus:outline-none focus:ring-2 focus:ring-primary/50 p-5 transition-colors"
     >
-      {/* Mouse glow effect */}
       {hovering && (
         <div
           className="pointer-events-none absolute inset-0"
@@ -65,45 +98,84 @@ const RepoCard = ({ repo, index, onSelect }: {
           }}
         />
       )}
-      
+
       <div className="relative">
-        {/* Header */}
-        <div className="flex items-start justify-between mb-4">
-          <div className="w-11 h-11 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center group-hover:bg-primary/15 transition-colors">
+        {/* Top row: icon + status */}
+        <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>
-          <StatusBadge status={repo.status} />
+          <StatusDot status={repo.status} />
         </div>
 
-        {/* Title */}
-        <h3 className="text-lg font-semibold text-foreground mb-0.5 group-hover:text-primary transition-colors">
+        {/* Repo name + slug */}
+        <h3 className="text-base font-semibold text-foreground group-hover:text-primary transition-colors truncate">
           {repo.name}
         </h3>
-        <p className="text-xs text-muted-foreground font-mono mb-5">{repo.branch}</p>
-
-        {/* Stats */}
-        <div className="pt-4 border-t border-border">
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-muted-foreground">Files</span>
-            <span className="text-2xl font-bold text-primary">
-              {(repo.file_count || 0).toLocaleString()}
+        {slug && (
+          <p className="text-xs text-muted-foreground truncate mt-0.5">{slug}</p>
+        )}
+
+        {/* Stats row */}
+        <div className="flex items-center gap-3 mt-4 pt-3 border-t border-border text-xs text-muted-foreground">
+          <span className="flex items-center gap-1">
+            <Files className="w-3 h-3" />
+            {(repo.file_count || 0).toLocaleString()}
+          </span>
+          {repo.function_count != null && repo.function_count > 0 && (
+            <span className="flex items-center gap-1">
+              <FunctionSquare className="w-3 h-3" />
+              {repo.function_count.toLocaleString()}
             </span>
-          </div>
+          )}
+          {indexed && (
+            <span className="flex items-center gap-1 ml-auto">
+              <Clock className="w-3 h-3" />
+              {indexed}
+            </span>
+          )}
         </div>
       </div>
     </motion.button>
   )
 }
 
+const SortTab = ({ label, active, onClick }: {
+  label: string
+  active: boolean
+  onClick: () => void
+}) => (
+  <button
+    onClick={onClick}
+    className={cn(
+      'text-xs px-3 py-1 rounded-full transition-colors',
+      active
+        ? 'bg-primary/10 text-primary font-medium'
+        : 'text-muted-foreground hover:text-foreground',
+    )}
+  >
+    {label}
+  </button>
+)
+
 export function RepoList({ repos, selectedRepo, onSelect, onAddClick, loading }: RepoListProps) {
-  // Hooks must be called before any conditional returns
+  const [sortMode, setSortMode] = useState<SortMode>('recent')
+
   const sortedRepos = useMemo(() => {
-    return [...repos].sort((a, b) => {
-      if (a.status === 'indexed' && b.status !== 'indexed') return -1
-      if (b.status === 'indexed' && a.status !== 'indexed') return 1
-      return (b.file_count || 0) - (a.file_count || 0)
-    })
-  }, [repos])
+    const sorted = [...repos]
+    if (sortMode === 'recent') {
+      sorted.sort((a, b) => {
+        const aTime = a.last_indexed_at || a.created_at || ''
+        const bTime = b.last_indexed_at || b.created_at || ''
+        return bTime.localeCompare(aTime)
+      })
+    } else if (sortMode === 'name') {
+      sorted.sort((a, b) => a.name.localeCompare(b.name))
+    } else {
+      sorted.sort((a, b) => (b.file_count || 0) - (a.file_count || 0))
+    }
+    return sorted
+  }, [repos, sortMode])
 
   if (loading) return <RepoGridSkeleton count={3} />
 
@@ -133,15 +205,26 @@ export function RepoList({ repos, selectedRepo, onSelect, onAddClick, loading }:
   }
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      {sortedRepos.map((repo, index) => (
-        <RepoCard 
-          key={repo.id}
-          repo={repo} 
-          index={index}
-          onSelect={() => onSelect(repo.id)}
-        />
-      ))}
+    <div className="space-y-4">
+      {/* Sort bar */}
+      <div className="flex items-center gap-1">
+        <SortTab label="Recent" active={sortMode === 'recent'} onClick={() => setSortMode('recent')} />
+        <SortTab label="Name" active={sortMode === 'name'} onClick={() => setSortMode('name')} />
+        <SortTab label="Size" active={sortMode === 'size'} onClick={() => setSortMode('size')} />
+        <span className="ml-auto text-xs text-muted-foreground">{repos.length} repos</span>
+      </div>
+
+      {/* Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {sortedRepos.map((repo, index) => (
+          <RepoCard
+            key={repo.id}
+            repo={repo}
+            index={index}
+            onSelect={() => onSelect(repo.id)}
+          />
+        ))}
+      </div>
     </div>
   )
 }

frontend/src/types.ts

@@ -5,6 +5,9 @@ export interface Repository {
   branch: string
   status: string
   file_count: number
+  function_count?: number
+  created_at?: string
+  last_indexed_at?: string
 }
 
 export interface SearchResult {