revamp repo page (#220)

* wip repo table

* new repo page

* add indicator for when feedback is applied in repo page

* add repo button

* fetch connection data in one query

* fix styling

packages/web/src/actions.ts

@@ -147,7 +147,7 @@ export const completeOnboarding = async (domain: string): Promise<{ success: boo
             }
         })
     );
-        
+
 export const getSecrets = (domain: string): Promise<{ createdAt: Date; key: string; }[] | ServiceError> =>
     withAuth((session) =>
         withOrgMembership(session, domain, async ({ orgId }) => {
@@ -321,7 +321,11 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
                     } : {}),
                 },
                 include: {
-                    connections: true,
+                    connections: {
+                        include: {
+                            connection: true,
+                        }
+                    }
                 }
             });
 
@@ -330,7 +334,10 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
                 repoId: repo.id,
                 repoName: repo.name,
                 repoCloneUrl: repo.cloneUrl,
-                linkedConnections: repo.connections.map((connection) => connection.connectionId),
+                linkedConnections: repo.connections.map(({ connection }) => ({
+                    id: connection.id,
+                    name: connection.name,
+                })),
                 imageUrl: repo.imageUrl ?? undefined,
                 indexedAt: repo.indexedAt ?? undefined,
                 repoIndexingStatus: repo.repoIndexingStatus,
@@ -883,7 +890,7 @@ export const createOnboardingSubscription = async (domain: string) =>
                         save_default_payment_method: 'on_subscription',
                     },
                 });
-                
+
                 if (!subscription) {
                     return {
                         statusCode: StatusCodes.INTERNAL_SERVER_ERROR,

packages/web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx

@@ -67,7 +67,7 @@ export default function SharedConnectionCreationForm<T>({
                 return checkIfSecretExists(secretKey, domain);
             }, { message: "Secret not found" }),
         });
-    }, [schema, domain]);
+    }, [schema, domain, additionalConfigValidation]);
 
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),

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

@@ -97,7 +97,7 @@ export const ErrorNavIndicator = () => {
                                     .slice(0, 10)
                                     .map(repo => (
                                         // Link to the first connection for the repo
-                                        <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0]}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
+                                        <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0].id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
                                             <div className="flex items-center justify-between px-3 py-2 
                                                             bg-red-50 dark:bg-red-900/20 rounded-md
                                                             border border-red-200/50 dark:border-red-800/50

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

@@ -50,7 +50,7 @@ export const ProgressNavIndicator = () => {
                         <div className="flex flex-col gap-2 pl-4">
                             {inProgressRepos.slice(0, 10).map(item => (
                                 // Link to the first connection for the repo
-                                <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0]}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
+                                <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0].id}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
                                     <div className="flex items-center gap-2 px-3 py-2 bg-green-50 dark:bg-green-900/20 
                                                 rounded-md text-sm text-green-700 dark:text-green-300 
                                                 border border-green-200/50 dark:border-green-800/50

packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx

@@ -49,13 +49,19 @@ export const RepoListItem = ({
             className="flex flex-row items-center p-4 border rounded-lg bg-background justify-between"
         >
             <div className="flex flex-row items-center gap-2">
-                <Image
-                    src={imageUrl ?? ""}
-                    alt={name}
-                    width={40}
-                    height={40}
-                    className="rounded-full"
-                />
+                {imageUrl ? (
+                    <Image
+                        src={imageUrl}
+                        alt={name}
+                        width={32}
+                        height={32}
+                        className="object-cover"
+                    />
+                ) : (
+                    <div className="h-8 w-8 flex items-center justify-center bg-muted text-xs font-medium uppercase text-muted-foreground rounded-md">
+                        {name.charAt(0)}
+                    </div>
+                )}
                 <p className="font-medium">{name}</p>
             </div>
             <div className="flex flex-row items-center gap-4">

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

@@ -0,0 +1,57 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { PlusCircle } from "lucide-react"
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+    DialogClose,
+    DialogFooter,
+} from "@/components/ui/dialog"
+import { useState } from "react"
+import { ConnectionList } from "../connections/components/connectionList"
+import { useDomain } from "@/hooks/useDomain"
+import Link from "next/link";
+
+export function AddRepoButton() {
+    const [isOpen, setIsOpen] = useState(false)
+    const domain = useDomain()
+
+    return (
+        <>
+          <Button
+            onClick={() => setIsOpen(true)}
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 ml-2 text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <PlusCircle className="h-4 w-4" />
+          </Button>
+    
+          <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            <DialogContent className="sm:max-w-[800px] max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
+              <DialogHeader className="px-6 py-4 border-b">
+                <DialogTitle className="text-xl font-semibold">Add a New Repository</DialogTitle>
+                <DialogDescription className="text-sm text-muted-foreground mt-1">
+                  Repositories are added to Sourcebot using <span className="text-primary">connections</span>. To add a new repo, add it to an existing connection or create a new one.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="flex-1 overflow-y-auto p-6">
+                <ConnectionList className="w-full" />
+              </div>
+              <DialogFooter className="flex justify-between items-center border-t p-4 px-6">
+                <Button asChild variant="default" className="bg-primary hover:bg-primary/90">
+                  <Link href={`/${domain}/connections`}>Add new connection</Link>
+                </Button>
+                <DialogClose asChild>
+                  <Button variant="outline">Close</Button>
+                </DialogClose>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </>
+      )
+} 

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

@@ -1,141 +1,265 @@
-'use client';
+"use client"
 
-import { Button } from "@/components/ui/button";
-import { Column, ColumnDef } from "@tanstack/react-table"
-import { ArrowUpDown } from "lucide-react"
-import prettyBytes from "pretty-bytes";
+import { Button } from "@/components/ui/button"
+import type { ColumnDef } from "@tanstack/react-table"
+import { ArrowUpDown, ExternalLink, Clock, Loader2, CheckCircle2, XCircle, Trash2, Check, ListFilter } from "lucide-react"
+import Image from "next/image"
+import { Badge } from "@/components/ui/badge"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { RepoIndexingStatus } from "@sourcebot/db";
+import { useDomain } from "@/hooks/useDomain"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { AddRepoButton } from "./addRepoButton"
 
 export type RepositoryColumnInfo = {
-    name: string;
-    branches: {
-        name: string,
-        version: string,
-    }[];
-    repoSizeBytes: number;
-    indexedFiles: number;
-    indexSizeBytes: number;
-    shardCount: number;
-    lastIndexed: string;
-    latestCommit: string;
-    commitUrlTemplate: string;
-    url: string;
+    name: string
+    imageUrl?: string
+    connections: {
+        id: number
+        name: string
+    }[]
+    repoIndexingStatus: RepoIndexingStatus
+    lastIndexed: string
+    url: string
 }
 
-export const columns: ColumnDef<RepositoryColumnInfo>[] = [
+const statusLabels = {
+    [RepoIndexingStatus.NEW]: "Queued",
+    [RepoIndexingStatus.IN_INDEX_QUEUE]: "Queued",
+    [RepoIndexingStatus.INDEXING]: "Indexing",
+    [RepoIndexingStatus.INDEXED]: "Indexed",
+    [RepoIndexingStatus.FAILED]: "Failed",
+    [RepoIndexingStatus.IN_GC_QUEUE]: "Deleting",
+    [RepoIndexingStatus.GARBAGE_COLLECTING]: "Deleting",
+    [RepoIndexingStatus.GARBAGE_COLLECTION_FAILED]: "Deletion Failed"
+};
+
+const StatusIndicator = ({ status }: { status: RepoIndexingStatus }) => {
+    let icon = null
+    let description = ""
+    let className = ""
+
+    switch (status) {
+        case RepoIndexingStatus.NEW:
+        case RepoIndexingStatus.IN_INDEX_QUEUE:
+            icon = <Clock className="h-3.5 w-3.5" />
+            description = "Repository is queued for indexing"
+            className = "text-yellow-600 bg-yellow-50 dark:bg-yellow-900/20 dark:text-yellow-400"
+            break
+        case RepoIndexingStatus.INDEXING:
+            icon = <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            description = "Repository is being indexed"
+            className = "text-blue-600 bg-blue-50 dark:bg-blue-900/20 dark:text-blue-400"
+            break
+        case RepoIndexingStatus.INDEXED:
+            icon = <CheckCircle2 className="h-3.5 w-3.5" />
+            description = "Repository has been successfully indexed"
+            className = "text-green-600 bg-green-50 dark:bg-green-900/20 dark:text-green-400"
+            break
+        case RepoIndexingStatus.FAILED:
+            icon = <XCircle className="h-3.5 w-3.5" />
+            description = "Repository indexing failed"
+            className = "text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400"
+            break
+        case RepoIndexingStatus.IN_GC_QUEUE:
+        case RepoIndexingStatus.GARBAGE_COLLECTING:
+            icon = <Trash2 className="h-3.5 w-3.5" />
+            description = "Repository is being deleted"
+            className = "text-gray-600 bg-gray-50 dark:bg-gray-900/20 dark:text-gray-400"
+            break
+        case RepoIndexingStatus.GARBAGE_COLLECTION_FAILED:
+            icon = <XCircle className="h-3.5 w-3.5" />
+            description = "Repository deletion failed"
+            className = "text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400"
+            break
+    }
+
+    return (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <div
+                        className={cn("flex items-center gap-1.5 text-xs font-medium px-2.5 py-0.5 rounded-full w-fit", className)}
+                    >
+                        {icon}
+                        {statusLabels[status]}
+                    </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p className="text-sm">{description}</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    )
+}
+
+export const columns = (domain: string): ColumnDef<RepositoryColumnInfo>[] => [
     {
         accessorKey: "name",
-        header: "Name",
+        header: () => (
+            <div className="flex items-center w-[400px]">
+                <span>Repository</span>
+                <AddRepoButton />
+            </div>
+        ),
         cell: ({ row }) => {
-            const repo = row.original;
-            const url = repo.url;
-            // local repositories will have a url of 0 length
-            const isRemoteRepo = url.length === 0;
-            return (
-                <div className="flex flex-row items-center gap-2">
-                    <span
-                        className={!isRemoteRepo ? "cursor-pointer text-blue-500 hover:underline": ""}
-                        onClick={() => {
-                            if (!isRemoteRepo) {
-                                window.open(url, "_blank");
-                            }
-                        }}
-                    >
-                        {repo.name}
-                    </span>
-                </div>
-            );
-        }
-    },
-    {
-        accessorKey: "branches",
-        header: "Branches",
-        cell: ({ row }) => {
-            const branches = row.original.branches;
-
-            if (branches.length === 0) {
-                return <div>N/A</div>;
-            }
+            const repo = row.original
+            const url = repo.url
+            const isRemoteRepo = url.length > 0
 
             return (
-                <div className="flex flex-col gap-2 max-h-32 overflow-scroll scrollbar-hide">
-                    {branches.map(({ name, version }, index) => {
-                        const shortVersion = version.substring(0, 8);
-                        return (
-                            <span key={index}>
-                                {name}
-                                @
-                                <span
-                                    className="cursor-pointer text-blue-500 hover:underline"
-                                    onClick={() => {
-                                        const url = row.original.commitUrlTemplate.replace("{{.Version}}", version);
-                                        window.open(url, "_blank");
-                                    }}
-                                >
-                                    {shortVersion}
-                                </span>
-                            </span>
-                        )
-                    })}
+                <div className="flex flex-row items-center gap-3 py-2">
+                    <div className="relative h-8 w-8 overflow-hidden rounded-md border bg-muted">
+                        {repo.imageUrl ? (
+                            <Image
+                                src={repo.imageUrl || "/placeholder.svg"}
+                                alt={`${repo.name} 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.name.charAt(0)}
+                            </div>
+                        )}
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <span
+                            className={isRemoteRepo ? "font-medium text-primary hover:underline cursor-pointer" : "font-medium"}
+                            onClick={() => {
+                                if (isRemoteRepo) {
+                                    window.open(url, "_blank")
+                                }
+                            }}
+                        >
+                            {repo.name}
+                        </span>
+                        {isRemoteRepo && <ExternalLink className="h-3.5 w-3.5 text-muted-foreground" />}
+                    </div>
                 </div>
-            );
+            )
         },
     },
     {
-        accessorKey: "shardCount",
-        header: ({ column }) => createSortHeader("Shard Count", column),
-        cell: ({ row }) => (
-            <div className="text-right">{row.original.shardCount}</div>
-        )
-    },
-    {
-        accessorKey: "indexedFiles",
-        header: ({ column }) => createSortHeader("Indexed Files", column),
-        cell: ({ row }) => (
-            <div className="text-right">{row.original.indexedFiles}</div>
-        )
-    },
-    {
-        accessorKey: "indexSizeBytes",
-        header: ({ column }) => createSortHeader("Index Size", column),
+        accessorKey: "connections",
+        header: () => <div className="w-[200px]">Connections</div>,
         cell: ({ row }) => {
-            const size = prettyBytes(row.original.indexSizeBytes);
-            return <div className="text-right">{size}</div>;
-        }
+            const connections = row.original.connections
+            
+            if (!connections || connections.length === 0) {
+                return <div className="text-muted-foreground text-sm">—</div>
+            }
+
+            return (
+                <div className="flex flex-wrap gap-1.5">
+                    {connections.map((connection) => (
+                        <Badge
+                            key={connection.id}
+                            variant="outline"
+                            className="text-xs px-2 py-0.5 hover:bg-muted cursor-pointer group flex items-center gap-1"
+                            onClick={() => {
+                                window.location.href = `/${domain}/connections/${connection.id}`
+                            }}
+                        >
+                            {connection.name}
+                            <ExternalLink className="h-3 w-3 text-muted-foreground opacity-50 group-hover:opacity-100 transition-opacity" />
+                        </Badge>
+                    ))}
+                </div>
+            )
+        },
     },
     {
-        accessorKey: "repoSizeBytes",
-        header: ({ column }) => createSortHeader("Repository Size", column),
+        accessorKey: "repoIndexingStatus",
+        header: ({ column }) => {
+            const uniqueLabels = Array.from(new Set(Object.values(statusLabels)));
+            const currentFilter = column.getFilterValue() as string | undefined;
+
+            return (
+                <div className="w-[150px]">
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button 
+                                variant={currentFilter ? "secondary" : "ghost"}
+                                className="font-medium"
+                            >
+                                Status
+                                <ListFilter className={cn(
+                                    "ml-2 h-3.5 w-3.5",
+                                    currentFilter ? "text-primary" : "text-muted-foreground"
+                                )} />
+                                {currentFilter && (
+                                    <div className="absolute -top-1 -right-1 w-2.5 h-2.5 rounded-full bg-primary animate-pulse" />
+                                )}
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start">
+                            <DropdownMenuItem onClick={() => column.setFilterValue(undefined)}>
+                                <Check className={cn("mr-2 h-4 w-4", !column.getFilterValue() ? "opacity-100" : "opacity-0")} />
+                                All
+                            </DropdownMenuItem>
+                            {uniqueLabels.map((label) => (
+                                <DropdownMenuItem key={label} onClick={() => column.setFilterValue(label)}>
+                                    <Check className={cn("mr-2 h-4 w-4", column.getFilterValue() === label ? "opacity-100" : "opacity-0")} />
+                                    {label}
+                                </DropdownMenuItem>
+                            ))}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </div>
+            )
+        },
         cell: ({ row }) => {
-            const size = prettyBytes(row.original.repoSizeBytes);
-            return <div className="text-right">{size}</div>;
-        }
+            return <StatusIndicator status={row.original.repoIndexingStatus} />
+        },
+        filterFn: (row, id, value) => {
+            if (value === undefined) return true;
+            
+            const status = row.getValue(id) as RepoIndexingStatus;
+            return statusLabels[status] === value;
+        },
     },
     {
         accessorKey: "lastIndexed",
-        header: ({ column }) => createSortHeader("Last Indexed", column),
+        header: ({ column }) => (
+            <div className="w-[150px]">
+                <Button
+                    variant="ghost"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                    className="font-medium"
+                >
+                    Last Indexed
+                    <ArrowUpDown className="ml-2 h-3.5 w-3.5 text-muted-foreground" />
+                </Button>
+            </div>
+        ),
         cell: ({ row }) => {
-            const date = new Date(row.original.lastIndexed);
-            return date.toISOString();
-        }
+            if (!row.original.lastIndexed) {
+                return <div>-</div>;
+            }
+            const date = new Date(row.original.lastIndexed)
+            return (
+                <div>
+                    <div className="font-medium">
+                        {date.toLocaleDateString("en-US", {
+                            month: "short",
+                            day: "numeric",
+                            year: "numeric",
+                        })}
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                        {date
+                            .toLocaleTimeString("en-US", {
+                                hour: "2-digit",
+                                minute: "2-digit",
+                                hour12: false,
+                            })
+                            .toLowerCase()}
+                    </div>
+                </div>
+            )
+        },
     },
-    {
-        accessorKey: "latestCommit",
-        header: ({ column }) => createSortHeader("Latest Commit", column),
-        cell: ({ row }) => {
-            const date = new Date(row.original.latestCommit);
-            return date.toISOString();
-        }
-    }
 ]
-
-const createSortHeader = (name: string, column: Column<RepositoryColumnInfo, unknown>) => {
-    return (
-        <Button
-            variant="ghost"
-            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-        >
-            {name}
-            <ArrowUpDown className="ml-2 h-4 w-4" />
-        </Button>
-    )
-}

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

@@ -0,0 +1,19 @@
+import { NavigationMenu } from "../components/navigationMenu";
+
+export default function Layout({
+    children,
+    params: { domain },
+}: Readonly<{
+    children: React.ReactNode;
+    params: { domain: string };
+}>) {
+
+    return (
+        <div className="min-h-screen flex flex-col">
+            <NavigationMenu domain={domain} />
+            <main className="flex-grow flex justify-center p-4 bg-backgroundSecondary relative">
+                <div className="w-full max-w-6xl rounded-lg p-6">{children}</div>
+            </main>
+        </div>
+    )
+}

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

@@ -1,23 +1,24 @@
-import { Suspense } from "react";
 import { NavigationMenu } from "../components/navigationMenu";
 import { RepositoryTable } from "./repositoryTable";
 import { getOrgFromDomain } from "@/data/org";
 import { PageNotFound } from "../components/pageNotFound";
-
+import { Header } from "../components/header";
 export default async function ReposPage({ params: { domain } }: { params: { domain: string } }) {
     const org = await getOrgFromDomain(domain);
     if (!org) {
         return <PageNotFound />
     }
-    
+
     return (
-        <div className="h-screen flex flex-col items-center">
-            <NavigationMenu domain={domain} />
-            <Suspense fallback={<div>Loading...</div>}>
-                <div className="max-w-[90%]">
-                    <RepositoryTable orgId={ org.id }/>
+        <div>
+            <Header>
+                <h1 className="text-3xl">Repositories</h1>
+            </Header>
+            <div className="h-screen flex flex-col items-center">
+                <div className="w-full">
+                    <RepositoryTable />
                 </div>
-            </Suspense>
+            </div>
         </div>
     )
-}
+}

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

@@ -1,41 +1,88 @@
+"use client";
+
 import { DataTable } from "@/components/ui/data-table";
 import { columns, RepositoryColumnInfo } from "./columns";
-import { listRepositories } from "@/lib/server/searchService";
-import { isServiceError } from "@/lib/utils";
+import { unwrapServiceError } from "@/lib/utils";
+import { getRepos } from "@/actions";
+import { useQuery } from "@tanstack/react-query";
+import { NEXT_PUBLIC_POLLING_INTERVAL_MS } from "@/lib/environment.client";
+import { useDomain } from "@/hooks/useDomain";
+import { RepoIndexingStatus } from "@sourcebot/db";
+import { useMemo } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
 
-export const RepositoryTable = async ({ orgId }: { orgId: number }) => {
-    const _repos = await listRepositories(orgId);
-
-    if (isServiceError(_repos)) {
-        return <div>Error fetching repositories</div>;
-    }
-
-    const repos = _repos.List.Repos.map((repo): RepositoryColumnInfo => {
-        return {
-            name: repo.Repository.Name,
-            branches: (repo.Repository.Branches ?? []).map((branch) => {
-                return {
-                    name: branch.Name,
-                    version: branch.Version,
-                }
-            }),
-            repoSizeBytes: repo.Stats.ContentBytes,
-            indexSizeBytes: repo.Stats.IndexBytes,
-            shardCount: repo.Stats.Shards,
-            lastIndexed: repo.IndexMetadata.IndexTime,
-            latestCommit: repo.Repository.LatestCommitDate,
-            indexedFiles: repo.Stats.Documents,
-            commitUrlTemplate: repo.Repository.CommitURLTemplate,
-            url: repo.Repository.URL,
-        }
-    }).sort((a, b) => {
-        return new Date(b.lastIndexed).getTime() -  new Date(a.lastIndexed).getTime();
+export const RepositoryTable = () => {
+    const domain = useDomain();
+    const { data: repos, isLoading: reposLoading, error: reposError } = useQuery({
+        queryKey: ['repos', domain],
+        queryFn: async () => {
+            return await unwrapServiceError(getRepos(domain));
+        },
+        refetchInterval: NEXT_PUBLIC_POLLING_INTERVAL_MS,
+        refetchIntervalInBackground: true,
     });
 
+    const tableRepos = useMemo(() => {
+        if (reposLoading) return Array(4).fill(null).map(() => ({
+            name: "",
+            connections: [],
+            repoIndexingStatus: RepoIndexingStatus.NEW,
+            lastIndexed: "",
+            url: "",
+            imageUrl: "",
+        }));
+
+        if (!repos) return [];
+        return repos.map((repo): RepositoryColumnInfo => ({
+            name: repo.repoName.split('/').length > 2 ? repo.repoName.split('/').slice(-2).join('/') : repo.repoName,
+            imageUrl: repo.imageUrl,
+            connections: repo.linkedConnections,
+            repoIndexingStatus: repo.repoIndexingStatus as RepoIndexingStatus,
+            lastIndexed: repo.indexedAt?.toISOString() ?? "",
+            url: repo.repoCloneUrl,
+        })).sort((a, b) => {
+            return new Date(b.lastIndexed).getTime() - new Date(a.lastIndexed).getTime();
+        });
+    }, [repos, reposLoading]);
+
+    const tableColumns = useMemo(() => {
+        if (reposLoading) {
+            return columns(domain).map((column) => {
+                if ('accessorKey' in column && column.accessorKey === "name") {
+                  return {
+                    ...column,
+                    cell: () => (
+                      <div className="flex flex-row items-center gap-3 py-2">
+                        <Skeleton className="h-8 w-8 rounded-md" /> {/* Avatar skeleton */}
+                        <Skeleton className="h-4 w-48" /> {/* Repository name skeleton */}
+                      </div>
+                    ),
+                  }
+                }
+        
+                return {
+                  ...column,
+                  cell: () => (
+                    <div className="flex flex-wrap gap-1.5">
+                      <Skeleton className="h-5 w-24 rounded-full" />
+                    </div>
+                  ),
+                }
+              })
+        }
+
+        return columns(domain);
+    }, [reposLoading, domain]);
+
+
+    if (reposError) {
+        return <div>Error loading repositories</div>;
+    }
+
     return (
         <DataTable
-            columns={columns}
-            data={repos}
+            columns={tableColumns}
+            data={tableRepos}
             searchKey="name"
             searchPlaceholder="Search repositories..."
         />

packages/web/src/lib/schemas.ts

@@ -167,7 +167,10 @@ export const repositoryQuerySchema = z.object({
     repoId: z.number(),
     repoName: z.string(),
     repoCloneUrl: z.string(),
-    linkedConnections: z.array(z.number()),
+    linkedConnections: z.array(z.object({
+        id: z.number(),
+        name: z.string(),
+    })),
     imageUrl: z.string().optional(),
     indexedAt: z.date().optional(),
     repoIndexingStatus: z.nativeEnum(RepoIndexingStatus),