wip on new & improved repos table

packages/web/src/app/[domain]/components/header.tsx

@@ -1,22 +0,0 @@
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/lib/utils";
-import clsx from "clsx";
-
-interface HeaderProps {
-    children: React.ReactNode;
-    withTopMargin?: boolean;
-    className?: string;
-}
-
-export const Header = ({
-    children,
-    withTopMargin = true,
-    className,
-}: HeaderProps) => {
-    return (
-        <div className={cn("mb-16", className)}>
-            {children}
-            <Separator className={clsx("absolute left-0 right-0", { "mt-12": withTopMargin })} />
-        </div>
-    )
-}

packages/web/src/app/[domain]/repos/[id]/page.tsx

@@ -0,0 +1,140 @@
+import { Suspense } from "react"
+import { notFound } from "next/navigation"
+import Link from "next/link"
+import { ChevronLeft, ExternalLink } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+import { RepoJobsTable } from "../components/repo-jobs-table"
+import { SINGLE_TENANT_ORG_DOMAIN } from "@/lib/constants"
+import { sew } from "@/actions"
+import { withOptionalAuthV2 } from "@/withAuthV2"
+import { ServiceErrorException } from "@/lib/serviceError"
+import { cn, getCodeHostInfoForRepo, isServiceError } from "@/lib/utils"
+import Image from "next/image"
+
+function formatDate(date: Date | null) {
+    if (!date) return "Never"
+    return new Intl.DateTimeFormat("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+    }).format(date)
+}
+
+export default async function RepoDetailPage({ params }: { params: Promise<{ id: string }> }) {
+    const { id } = await params
+    const repo = await getRepoWithJobs(Number.parseInt(id))
+    if (isServiceError(repo)) {
+        throw new ServiceErrorException(repo);
+    }
+
+    const codeHostInfo = getCodeHostInfoForRepo({
+        codeHostType: repo.external_codeHostType,
+        name: repo.name,
+        displayName: repo.displayName ?? undefined,
+        webUrl: repo.webUrl ?? undefined,
+    });
+
+    return (
+        <div className="container mx-auto py-10">
+            <div className="mb-6">
+                <Button variant="ghost" asChild className="mb-4">
+                    <Link href={`/${SINGLE_TENANT_ORG_DOMAIN}/repos`}>
+                        <ChevronLeft className="mr-2 h-4 w-4" />
+                        Back to repositories
+                    </Link>
+                </Button>
+
+                <div className="flex items-start justify-between">
+                    <div>
+                        <h1 className="text-3xl font-semibold">{repo.displayName || repo.name}</h1>
+                        <p className="text-muted-foreground mt-2">{repo.name}</p>
+                    </div>
+                    {(codeHostInfo && codeHostInfo.repoLink) && (
+                        <Button variant="outline" asChild>
+                            <Link href={codeHostInfo.repoLink} target="_blank" rel="noopener noreferrer" className="flex items-center">
+                                <Image
+                                    src={codeHostInfo.icon}
+                                    alt={codeHostInfo.codeHostName}
+                                    className={cn("w-4 h-4 flex-shrink-0", codeHostInfo.iconClassName)}
+                                />
+                                Open in {codeHostInfo.codeHostName}
+                                <ExternalLink className="ml-2 h-4 w-4" />
+                            </Link>
+                        </Button>
+                    )}
+                </div>
+
+                <div className="flex gap-2 mt-4">
+                    {repo.isArchived && <Badge variant="secondary">Archived</Badge>}
+                    {repo.isPublic && <Badge variant="outline">Public</Badge>}
+                </div>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-3 mb-8">
+                <Card>
+                    <CardHeader className="pb-3">
+                        <CardTitle className="text-sm font-medium">Last Indexed</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="text-2xl font-semibold">{repo.indexedAt ? formatDate(repo.indexedAt) : "Never"}</div>
+                    </CardContent>
+                </Card>
+
+                <Card>
+                    <CardHeader className="pb-3">
+                        <CardTitle className="text-sm font-medium">Created</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="text-2xl font-semibold">{formatDate(repo.createdAt)}</div>
+                    </CardContent>
+                </Card>
+
+                <Card>
+                    <CardHeader className="pb-3">
+                        <CardTitle className="text-sm font-medium">Last Updated</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="text-2xl font-semibold">{formatDate(repo.updatedAt)}</div>
+                    </CardContent>
+                </Card>
+            </div>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>Indexing Jobs</CardTitle>
+                    <CardDescription>History of all indexing and cleanup jobs for this repository</CardDescription>
+                </CardHeader>
+                <CardContent>
+                    <Suspense fallback={<Skeleton className="h-96 w-full" />}>
+                        <RepoJobsTable data={repo.jobs} />
+                    </Suspense>
+                </CardContent>
+            </Card>
+        </div>
+    )
+}
+
+const getRepoWithJobs = async (repoId: number) => sew(() =>
+    withOptionalAuthV2(async ({ prisma }) => {
+
+        const repo = await prisma.repo.findUnique({
+            where: {
+                id: repoId,
+            },
+            include: {
+                jobs: true,
+            }
+        });
+
+        if (!repo) {
+            return notFound();
+        }
+
+        return repo;
+    })
+);

packages/web/src/app/[domain]/repos/components/repo-jobs-table.tsx

@@ -0,0 +1,281 @@
+"use client"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import {
+    type ColumnDef,
+    type ColumnFiltersState,
+    type SortingState,
+    type VisibilityState,
+    flexRender,
+    getCoreRowModel,
+    getFilteredRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    useReactTable,
+} from "@tanstack/react-table"
+import { cva } from "class-variance-authority"
+import { AlertCircle, ArrowUpDown } from "lucide-react"
+import * as React from "react"
+import { CopyIconButton } from "../../components/copyIconButton"
+
+export type RepoIndexingJob = {
+    id: string
+    type: "INDEX" | "CLEANUP"
+    status: "PENDING" | "IN_PROGRESS" | "COMPLETED" | "FAILED"
+    createdAt: Date
+    updatedAt: Date
+    completedAt: Date | null
+    errorMessage: string | null
+}
+
+const statusBadgeVariants = cva("", {
+    variants: {
+        status: {
+            PENDING: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            IN_PROGRESS: "bg-primary text-primary-foreground hover:bg-primary/90",
+            COMPLETED: "bg-green-600 text-white hover:bg-green-700",
+            FAILED: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        },
+    },
+})
+
+const getStatusBadge = (status: RepoIndexingJob["status"]) => {
+    const labels = {
+        PENDING: "Pending",
+        IN_PROGRESS: "In Progress",
+        COMPLETED: "Completed",
+        FAILED: "Failed",
+    }
+
+    return <Badge className={statusBadgeVariants({ status })}>{labels[status]}</Badge>
+}
+
+const getTypeBadge = (type: RepoIndexingJob["type"]) => {
+    return (
+        <Badge variant="outline" className="font-mono">
+            {type}
+        </Badge>
+    )
+}
+
+const formatDate = (date: Date | null) => {
+    if (!date) return "-"
+    return new Intl.DateTimeFormat("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+    }).format(date)
+}
+
+const getDuration = (start: Date, end: Date | null) => {
+    if (!end) return "-"
+    const diff = end.getTime() - start.getTime()
+    const minutes = Math.floor(diff / 60000)
+    const seconds = Math.floor((diff % 60000) / 1000)
+    return `${minutes}m ${seconds}s`
+}
+
+export const columns: ColumnDef<RepoIndexingJob>[] = [
+    {
+        accessorKey: "type",
+        header: "Type",
+        cell: ({ row }) => getTypeBadge(row.getValue("type")),
+        filterFn: (row, id, value) => {
+            return value.includes(row.getValue(id))
+        },
+    },
+    {
+        accessorKey: "status",
+        header: "Status",
+        cell: ({ row }) => {
+            const job = row.original
+            return (
+                <div className="flex items-center gap-2">
+                    {getStatusBadge(row.getValue("status"))}
+                    {job.errorMessage && (
+                        <TooltipProvider>
+                            <Tooltip>
+                                <TooltipTrigger>
+                                    <AlertCircle className="h-4 w-4 text-destructive" />
+                                </TooltipTrigger>
+                                <TooltipContent className="max-w-sm">
+                                    <p className="text-sm">{job.errorMessage}</p>
+                                </TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
+                    )}
+                </div>
+            )
+        },
+        filterFn: (row, id, value) => {
+            return value.includes(row.getValue(id))
+        },
+    },
+    {
+        accessorKey: "createdAt",
+        header: ({ column }) => {
+            return (
+                <Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+                    Started
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => formatDate(row.getValue("createdAt")),
+    },
+    {
+        accessorKey: "completedAt",
+        header: ({ column }) => {
+            return (
+                <Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+                    Completed
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => formatDate(row.getValue("completedAt")),
+    },
+    {
+        id: "duration",
+        header: "Duration",
+        cell: ({ row }) => {
+            const job = row.original
+            return getDuration(job.createdAt, job.completedAt)
+        },
+    },
+    {
+        accessorKey: "id",
+        header: "Job ID",
+        cell: ({ row }) => {
+            const id = row.getValue("id") as string
+            return (
+                <div className="flex items-center gap-2">
+                    <code className="text-xs text-muted-foreground">{id}</code>
+                    <CopyIconButton onCopy={() => {
+                        navigator.clipboard.writeText(id);
+                        return true;
+                    }} />
+                </div>
+            )
+        },
+    },
+]
+
+export const RepoJobsTable = ({ data }: { data: RepoIndexingJob[] }) => {
+    const [sorting, setSorting] = React.useState<SortingState>([{ id: "createdAt", desc: true }])
+    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
+    const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
+
+    const table = useReactTable({
+        data,
+        columns,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        onColumnVisibilityChange: setColumnVisibility,
+        state: {
+            sorting,
+            columnFilters,
+            columnVisibility,
+        },
+    })
+
+    return (
+        <div className="w-full">
+            <div className="flex items-center gap-4 py-4">
+                <Select
+                    value={(table.getColumn("status")?.getFilterValue() as string) ?? "all"}
+                    onValueChange={(value) => table.getColumn("status")?.setFilterValue(value === "all" ? "" : value)}
+                >
+                    <SelectTrigger className="w-[180px]">
+                        <SelectValue placeholder="Filter by status" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="all">All statuses</SelectItem>
+                        <SelectItem value="PENDING">Pending</SelectItem>
+                        <SelectItem value="IN_PROGRESS">In Progress</SelectItem>
+                        <SelectItem value="COMPLETED">Completed</SelectItem>
+                        <SelectItem value="FAILED">Failed</SelectItem>
+                    </SelectContent>
+                </Select>
+
+                <Select
+                    value={(table.getColumn("type")?.getFilterValue() as string) ?? "all"}
+                    onValueChange={(value) => table.getColumn("type")?.setFilterValue(value === "all" ? "" : value)}
+                >
+                    <SelectTrigger className="w-[180px]">
+                        <SelectValue placeholder="Filter by type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="all">All types</SelectItem>
+                        <SelectItem value="INDEX">Index</SelectItem>
+                        <SelectItem value="CLEANUP">Cleanup</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+
+            <div className="rounded-md border">
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                                        </TableHead>
+                                    )
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow key={row.id}>
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    No indexing jobs found.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+
+            <div className="flex items-center justify-end space-x-2 py-4">
+                <div className="flex-1 text-sm text-muted-foreground">
+                    {table.getFilteredRowModel().rows.length} job(s) total
+                </div>
+                <div className="space-x-2">
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => table.previousPage()}
+                        disabled={!table.getCanPreviousPage()}
+                    >
+                        Previous
+                    </Button>
+                    <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+                        Next
+                    </Button>
+                </div>
+            </div>
+        </div>
+    )
+}

packages/web/src/app/[domain]/repos/components/repos-table.tsx

@@ -0,0 +1,283 @@
+"use client"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { SINGLE_TENANT_ORG_DOMAIN } from "@/lib/constants"
+import { getRepoImageSrc } from "@/lib/utils"
+import {
+    type ColumnDef,
+    type ColumnFiltersState,
+    type SortingState,
+    type VisibilityState,
+    flexRender,
+    getCoreRowModel,
+    getFilteredRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    useReactTable,
+} from "@tanstack/react-table"
+import { cva } from "class-variance-authority"
+import { ArrowUpDown, ExternalLink, MoreHorizontal } from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+import * as React from "react"
+
+export type Repo = {
+    id: number
+    name: string
+    displayName: string | null
+    isArchived: boolean
+    isPublic: boolean
+    indexedAt: Date | null
+    createdAt: Date
+    webUrl: string | null
+    imageUrl: string | null
+    latestJobStatus: "PENDING" | "IN_PROGRESS" | "COMPLETED" | "FAILED" | null
+}
+
+const statusBadgeVariants = cva("", {
+    variants: {
+        status: {
+            PENDING: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            IN_PROGRESS: "bg-primary text-primary-foreground hover:bg-primary/90",
+            COMPLETED: "bg-green-600 text-white hover:bg-green-700",
+            FAILED: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            NO_JOBS: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        },
+    },
+})
+
+const getStatusBadge = (status: Repo["latestJobStatus"]) => {
+    if (!status) {
+        return <Badge className={statusBadgeVariants({ status: "NO_JOBS" })}>No Jobs</Badge>
+    }
+
+    const labels = {
+        PENDING: "Pending",
+        IN_PROGRESS: "In Progress",
+        COMPLETED: "Completed",
+        FAILED: "Failed",
+    }
+
+    return <Badge className={statusBadgeVariants({ status })}>{labels[status]}</Badge>
+}
+
+const formatDate = (date: Date | null) => {
+    if (!date) return "Never"
+    return new Intl.DateTimeFormat("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+    }).format(date)
+}
+
+export const columns: ColumnDef<Repo>[] = [
+    {
+        accessorKey: "displayName",
+        header: ({ column }) => {
+            return (
+                <Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+                    Repository
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const repo = row.original
+            return (
+                <div className="flex flex-row gap-2 items-center">
+                    {repo.imageUrl ? (
+                        <Image
+                            src={getRepoImageSrc(repo.imageUrl, repo.id) || "/placeholder.svg"}
+                            alt={`${repo.displayName} logo`}
+                            width={32}
+                            height={32}
+                            className="object-cover"
+                        />
+                    ) : (
+                        <div className="flex h-full w-full items-center justify-center bg-muted text-xs font-medium uppercase text-muted-foreground">
+                            {repo.displayName?.charAt(0) ?? repo.name.charAt(0)}
+                        </div>
+                    )}
+                    <Link href={`/repos/${repo.id}`} className="font-medium hover:underline">
+                        {repo.displayName || repo.name}
+                    </Link>
+                </div>
+            )
+        },
+    },
+    {
+        accessorKey: "latestJobStatus",
+        header: "Status",
+        cell: ({ row }) => getStatusBadge(row.getValue("latestJobStatus")),
+    },
+    {
+        accessorKey: "indexedAt",
+        header: ({ column }) => {
+            return (
+                <Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+                    Last Indexed
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => formatDate(row.getValue("indexedAt")),
+    },
+    {
+        id: "actions",
+        enableHiding: false,
+        cell: ({ row }) => {
+            const repo = row.original
+
+            return (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" className="h-8 w-8 p-0">
+                            <span className="sr-only">Open menu</span>
+                            <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                        <DropdownMenuItem asChild>
+                            <Link href={`/${SINGLE_TENANT_ORG_DOMAIN}/repos/${repo.id}`}>View details</Link>
+                        </DropdownMenuItem>
+                        {repo.webUrl && (
+                            <>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem asChild>
+                                    <a href={repo.webUrl} target="_blank" rel="noopener noreferrer" className="flex items-center">
+                                        Open in GitHub
+                                        <ExternalLink className="ml-2 h-3 w-3" />
+                                    </a>
+                                </DropdownMenuItem>
+                            </>
+                        )}
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            )
+        },
+    },
+]
+
+export const ReposTable = ({ data }: { data: Repo[] }) => {
+    const [sorting, setSorting] = React.useState<SortingState>([])
+    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
+    const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
+    const [rowSelection, setRowSelection] = React.useState({})
+
+    const table = useReactTable({
+        data,
+        columns,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        onColumnVisibilityChange: setColumnVisibility,
+        onRowSelectionChange: setRowSelection,
+        state: {
+            sorting,
+            columnFilters,
+            columnVisibility,
+            rowSelection,
+        },
+    })
+
+    return (
+        <div className="w-full">
+            <div className="flex items-center gap-4 py-4">
+                <Input
+                    placeholder="Filter repositories..."
+                    value={(table.getColumn("displayName")?.getFilterValue() as string) ?? ""}
+                    onChange={(event) => table.getColumn("displayName")?.setFilterValue(event.target.value)}
+                    className="max-w-sm"
+                />
+                <Select
+                    value={(table.getColumn("latestJobStatus")?.getFilterValue() as string) ?? "all"}
+                    onValueChange={(value) => {
+                        table.getColumn("latestJobStatus")?.setFilterValue(value === "all" ? "" : value)
+                    }}
+                >
+                    <SelectTrigger className="w-[180px]">
+                        <SelectValue placeholder="Filter by status" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="all">All Statuses</SelectItem>
+                        <SelectItem value="COMPLETED">Completed</SelectItem>
+                        <SelectItem value="IN_PROGRESS">In Progress</SelectItem>
+                        <SelectItem value="PENDING">Pending</SelectItem>
+                        <SelectItem value="FAILED">Failed</SelectItem>
+                        <SelectItem value="null">No Jobs</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+            <div className="rounded-md border">
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                                        </TableHead>
+                                    )
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+            <div className="flex items-center justify-end space-x-2 py-4">
+                <div className="flex-1 text-sm text-muted-foreground">
+                    {table.getFilteredRowModel().rows.length} {data.length > 1 ? 'repositories' : 'repository'} total
+                </div>
+                <div className="space-x-2">
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => table.previousPage()}
+                        disabled={!table.getCanPreviousPage()}
+                    >
+                        Previous
+                    </Button>
+                    <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+                        Next
+                    </Button>
+                </div>
+            </div>
+        </div>
+    )
+}

packages/web/src/app/[domain]/repos/page.tsx

@@ -1,65 +1,49 @@
-import { env } from "@/env.mjs";
-import { RepoIndexingJob } from "@sourcebot/db";
-import { Header } from "../components/header";
-import { RepoStatus } from "./columns";
-import { RepositoryTable } from "./repositoryTable";
 import { sew } from "@/actions";
-import { withOptionalAuthV2 } from "@/withAuthV2";
-import { isServiceError } from "@/lib/utils";
 import { ServiceErrorException } from "@/lib/serviceError";
+import { isServiceError } from "@/lib/utils";
+import { withOptionalAuthV2 } from "@/withAuthV2";
+import { ReposTable } from "./components/repos-table";
 
-function getRepoStatus(repo: { indexedAt: Date | null, jobs: RepoIndexingJob[] }): RepoStatus {
-    const latestJob = repo.jobs[0];
-    
-    if (latestJob?.status === 'PENDING' || latestJob?.status === 'IN_PROGRESS') {
-        return 'syncing';
-    }
-    
-    return repo.indexedAt ? 'indexed' : 'not-indexed';
-}
+export default async function ReposPage() {
 
-export default async function ReposPage(props: { params: Promise<{ domain: string }> }) {
-    const params = await props.params;
-
-    const {
-        domain
-    } = params;
-
-    const repos = await getReposWithJobs();
+    const repos = await getReposWithLatestJob();
     if (isServiceError(repos)) {
         throw new ServiceErrorException(repos);
     }
 
     return (
-        <div>
-            <Header>
-                <h1 className="text-3xl">Repositories</h1>
-            </Header>
-            <div className="px-6 py-6">
-                <RepositoryTable 
-                    repos={repos.map((repo) => ({
-                        repoId: repo.id,
-                        repoName: repo.name,
-                        repoDisplayName: repo.displayName ?? repo.name,
-                        imageUrl: repo.imageUrl ?? undefined,
-                        indexedAt: repo.indexedAt ?? undefined,
-                        status: getRepoStatus(repo),
-                    }))}
-                    domain={domain}
-                    isAddReposButtonVisible={env.EXPERIMENT_SELF_SERVE_REPO_INDEXING_ENABLED === 'true'}
-                />
+        <div className="container mx-auto py-10">
+            <div className="mb-6">
+                <h1 className="text-3xl font-semibold">Repositories</h1>
+                <p className="text-muted-foreground mt-2">View and manage your code repositories and their indexing status.</p>
             </div>
+            <ReposTable data={repos.map((repo) => ({
+                id: repo.id,
+                name: repo.name,
+                displayName: repo.displayName ?? repo.name,
+                isArchived: repo.isArchived,
+                isPublic: repo.isPublic,
+                indexedAt: repo.indexedAt,
+                createdAt: repo.createdAt,
+                webUrl: repo.webUrl,
+                imageUrl: repo.imageUrl,
+                latestJobStatus: repo.jobs.length > 0 ? repo.jobs[0].status : null
+            }))} />
         </div>
     )
 }
 
-const getReposWithJobs = async () => sew(() =>
+const getReposWithLatestJob = async () => sew(() =>
     withOptionalAuthV2(async ({ prisma }) => {
         const repos = await prisma.repo.findMany({
             include: {
-                jobs: true,
+                jobs: {
+                    orderBy: {
+                        createdAt: 'desc'
+                    },
+                    take: 1
+                }
             }
         });
-
         return repos;
     }));

packages/web/src/lib/utils.ts

@@ -17,6 +17,7 @@ import { ErrorCode } from "./errorCodes";
 import { NextRequest } from "next/server";
 import { Org } from "@sourcebot/db";
 import { OrgMetadata, orgMetadataSchema } from "@/types";
+import { SINGLE_TENANT_ORG_DOMAIN } from "./constants";
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
@@ -440,7 +441,7 @@ export const measure = async <T>(cb: () => Promise<T>, measureName: string, outp
 export const unwrapServiceError = async <T>(promise: Promise<ServiceError | T>): Promise<T> => {    
     const data = await promise;
     if (isServiceError(data)) {
-        throw new Error(data.message);
+        throw new Error(data);
     }
 
     return data;
@@ -458,7 +459,7 @@ export const requiredQueryParamGuard = (request: NextRequest, param: string): Se
     return value;
 }
 
-export const getRepoImageSrc = (imageUrl: string | undefined, repoId: number, domain: string): string | undefined => {
+export const getRepoImageSrc = (imageUrl: string | undefined, repoId: number): string | undefined => {
     if (!imageUrl) return undefined;
     
     try {
@@ -478,7 +479,7 @@ export const getRepoImageSrc = (imageUrl: string | undefined, repoId: number, do
             return imageUrl;
         } else {
             // Use the proxied route for self-hosted instances
-            return `/api/${domain}/repos/${repoId}/image`;
+            return `/api/${SINGLE_TENANT_ORG_DOMAIN}/repos/${repoId}/image`;
         }
     } catch {
         // If URL parsing fails, use the original URL