first commit

ui/app/workspace/mcp-registry/page.tsx

@@ -0,0 +1,79 @@
+import FullPageLoader from "@/components/fullPageLoader";
+import { useToast } from "@/hooks/use-toast";
+import { useDebouncedValue } from "@/hooks/useDebounce";
+import { getErrorMessage, useGetMCPClientsQuery } from "@/lib/store";
+import { useEffect, useState } from "react";
+import MCPClientsTable from "./views/mcpClientsTable";
+
+const POLLING_INTERVAL = 5000;
+const PAGE_SIZE = 25;
+
+export default function MCPServersPage() {
+	const [search, setSearch] = useState("");
+	const [offset, setOffset] = useState(0);
+	const debouncedSearch = useDebouncedValue(search, 300);
+
+	// Reset to first page when search changes
+	useEffect(() => {
+		setOffset(0);
+	}, [debouncedSearch]);
+
+	const {
+		data: mcpClientsData,
+		error,
+		isLoading,
+		refetch,
+	} = useGetMCPClientsQuery(
+		{
+			limit: PAGE_SIZE,
+			offset,
+			search: debouncedSearch || undefined,
+		},
+		{
+			pollingInterval: POLLING_INTERVAL,
+		},
+	);
+
+	const mcpClients = mcpClientsData?.clients || [];
+	const totalCount = mcpClientsData?.total_count || 0;
+
+	// Snap offset back when total shrinks past current page (e.g. delete last item on last page)
+	useEffect(() => {
+		if (!mcpClientsData || offset < totalCount) return;
+		setOffset(totalCount === 0 ? 0 : Math.floor((totalCount - 1) / PAGE_SIZE) * PAGE_SIZE);
+	}, [totalCount, offset]);
+
+	const { toast } = useToast();
+
+	useEffect(() => {
+		if (error) {
+			const message = getErrorMessage(error);
+			if (message.toLowerCase().includes("mcp is not configured in this bifrost instance")) return;
+			toast({
+				title: "Error",
+				description: message,
+				variant: "destructive",
+			});
+		}
+	}, [error, toast]);
+
+	if (isLoading) {
+		return <FullPageLoader />;
+	}
+
+	return (
+		<div className="mx-auto w-full max-w-7xl">
+			<MCPClientsTable
+				mcpClients={mcpClients}
+				totalCount={totalCount}
+				refetch={refetch}
+				search={search}
+				debouncedSearch={debouncedSearch}
+				onSearchChange={setSearch}
+				offset={offset}
+				limit={PAGE_SIZE}
+				onOffsetChange={setOffset}
+			/>
+		</div>
+	);
+}