refactor: use direct registry API call for server detail page (#490)

Replace the multi-registry Promise.all fan-out with a single direct API
call to /registry/{registryName}/v0.1/servers/{serverName}/versions/{version}.

The registry name is now threaded from the catalog list page to the
detail page via a query parameter, avoiding unnecessary API calls.
Falls back to fetching the default registry when the query param is
missing (e.g. direct URL navigation).

Also removes the unused CATALOG_ALL_REGISTRIES constant and the
"All registries" select option that was no longer needed.

Made-with: Cursor

Author: peppescg

src/app/catalog/[repoName]/[serverName]/[version]/actions.ts

@@ -1,30 +1,27 @@
 "use server";
 
+import { getRegistries } from "@/app/catalog/actions";
 import { getAuthenticatedClient } from "@/lib/api-client";
 
-export async function getServerDetails(serverName: string, version: string) {
+export async function getServerDetails(
+  registryName: string | undefined,
+  serverName: string,
+  version: string,
+) {
   const api = await getAuthenticatedClient();
 
-  const registriesResult = await api.getV1Registries({ client: api.client });
-  const registryName = registriesResult.data?.registries?.[0]?.name;
+  const resolvedRegistry = registryName || (await getRegistries()).at(0)?.name;
 
-  if (!registryName) {
+  if (!resolvedRegistry) {
     return {
       error: new Error("No registry available"),
       data: null,
       response: null,
     };
   }
 
-  const { error, data, response } =
-    await api.getRegistryByRegistryNameV01ServersByServerNameVersionsByVersion({
-      path: {
-        registryName,
-        serverName,
-        version,
-      },
-      client: api.client,
-    });
-
-  return { error, data, response };
+  return api.getRegistryByRegistryNameV01ServersByServerNameVersionsByVersion({
+    path: { registryName: resolvedRegistry, serverName, version },
+    client: api.client,
+  });
 }

src/app/catalog/[repoName]/[serverName]/[version]/not-found.tsx

@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 
 export default function NotFound() {
   return (
-    <div className="flex flex-col gap-5 px-8 pt-5 pb-8">
+    <div className="flex flex-col gap-5">
       <NavigateBackButton
         href="/catalog"
         variant="outline"

src/app/catalog/[repoName]/[serverName]/[version]/page.tsx

@@ -11,14 +11,22 @@ interface CatalogDetailPageProps {
     serverName: string;
     version: string;
   }>;
+  searchParams: Promise<{
+    registryName?: string;
+  }>;
 }
 
 export default async function CatalogDetailPage({
   params,
+  searchParams,
 }: CatalogDetailPageProps) {
   const { repoName, serverName, version } = await params;
+  const { registryName } = await searchParams;
+
+  const fullServerName = `${repoName}/${serverName}`;
   const { data: serverResponse, response } = await getServerDetails(
-    `${repoName}/${serverName}`,
+    registryName,
+    fullServerName,
     version,
   );
 

src/app/catalog/components/__tests__/servers.test.tsx

@@ -33,6 +33,7 @@ describe("Servers", () => {
       render(
         <Servers
           servers={mockServers}
+          registryName="default-registry"
           viewMode="grid"
           searchQuery=""
           onClearSearch={mockOnClearSearch}
@@ -48,6 +49,7 @@ describe("Servers", () => {
       const { container } = render(
         <Servers
           servers={mockServers}
+          registryName="default-registry"
           viewMode="grid"
           searchQuery=""
           onClearSearch={mockOnClearSearch}
@@ -64,6 +66,7 @@ describe("Servers", () => {
       render(
         <Servers
           servers={mockServers}
+          registryName="default-registry"
           viewMode="list"
           searchQuery=""
           onClearSearch={mockOnClearSearch}
@@ -79,6 +82,7 @@ describe("Servers", () => {
       render(
         <Servers
           servers={mockServers}
+          registryName="default-registry"
           viewMode="list"
           searchQuery=""
           onClearSearch={mockOnClearSearch}
@@ -95,6 +99,7 @@ describe("Servers", () => {
       render(
         <Servers
           servers={[]}
+          registryName="default-registry"
           viewMode="grid"
           searchQuery="nonexistent"
           onClearSearch={mockOnClearSearch}
@@ -114,6 +119,7 @@ describe("Servers", () => {
       render(
         <Servers
           servers={[]}
+          registryName="default-registry"
           viewMode="grid"
           searchQuery="nonexistent"
           onClearSearch={onClearSearch}
@@ -135,6 +141,7 @@ describe("Servers", () => {
       render(
         <Servers
           servers={[]}
+          registryName="default-registry"
           viewMode="grid"
           searchQuery=""
           onClearSearch={mockOnClearSearch}
@@ -151,6 +158,7 @@ describe("Servers", () => {
       render(
         <Servers
           servers={[]}
+          registryName="default-registry"
           viewMode="list"
           searchQuery=""
           onClearSearch={mockOnClearSearch}
@@ -164,6 +172,7 @@ describe("Servers", () => {
       const { container } = render(
         <Servers
           servers={[]}
+          registryName="default-registry"
           viewMode="grid"
           searchQuery=""
           onClearSearch={mockOnClearSearch}
@@ -177,6 +186,7 @@ describe("Servers", () => {
       render(
         <Servers
           servers={[]}
+          registryName="default-registry"
           viewMode="grid"
           searchQuery=""
           onClearSearch={mockOnClearSearch}

src/app/catalog/components/server-filters.tsx

@@ -12,7 +12,6 @@ import {
 } from "@/components/ui/select";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import type { GithubComStacklokToolhiveRegistryServerInternalServiceRegistryInfo } from "@/generated/types.gen";
-import { CATALOG_ALL_REGISTRIES } from "../constants";
 
 interface ServerFiltersProps {
   registries: GithubComStacklokToolhiveRegistryServerInternalServiceRegistryInfo[];
@@ -68,10 +67,9 @@ export function ServerFilters({
           className="w-38 h-9 bg-white dark:bg-card"
           aria-label="Select registry"
         >
-          <SelectValue placeholder="All registries" />
+          <SelectValue placeholder="Select registry" />
         </SelectTrigger>
         <SelectContent>
-          <SelectItem value={CATALOG_ALL_REGISTRIES}>All registries</SelectItem>
           {registries
             .filter(
               (registry): registry is typeof registry & { name: string } =>

src/app/catalog/components/servers-wrapper.tsx

@@ -48,7 +48,7 @@ export function ServersWrapper({
       <PageHeader title="MCP Server Catalog">
         <ServerFilters
           registries={registries}
-          selectedRegistry={selectedRegistry}
+          selectedRegistry={selectedRegistry || registries[0]?.name || ""}
           onRegistryChange={handleRegistryChange}
           viewMode={viewMode}
           onViewModeChange={handleViewModeChange}
@@ -63,6 +63,7 @@ export function ServersWrapper({
         ) : (
           <Servers
             servers={servers}
+            registryName={selectedRegistry || registries[0]?.name || ""}
             viewMode={viewMode}
             searchQuery={search}
             onClearSearch={handleClearSearch}

src/app/catalog/components/servers.tsx

@@ -9,6 +9,7 @@ import { ServersTable } from "./servers-table";
 
 interface ServersProps {
   servers: V0ServerJson[];
+  registryName: string;
   viewMode: "grid" | "list";
   searchQuery: string;
   onClearSearch: () => void;
@@ -20,6 +21,7 @@ interface ServersProps {
  */
 export function Servers({
   servers,
+  registryName,
   viewMode,
   searchQuery,
   onClearSearch,
@@ -29,7 +31,7 @@ export function Servers({
   const handleServerClick = (server: V0ServerJson) => {
     if (!server.name) return;
 
-    const detailUrl = `/catalog/${server.name}/${server.version || "latest"}`;
+    const detailUrl = `/catalog/${server.name}/${server.version || "latest"}?registryName=${encodeURIComponent(registryName)}`;
     router.push(detailUrl);
   };
 

src/app/catalog/constants.ts

@@ -1,4 +1,3 @@
-export const CATALOG_ALL_REGISTRIES = "all";
 export const CATALOG_VIEW_MODES = ["grid", "list"] as const;
 export const CATALOG_PREV_CURSOR_HISTORY_KEY = "catalog:prevCursors";
 export const CATALOG_PAGE_SIZE = 24;

src/app/catalog/hooks/use-catalog-filters.ts

@@ -6,11 +6,7 @@ import {
   useQueryStates,
 } from "nuqs";
 import { useTransition } from "react";
-import {
-  CATALOG_ALL_REGISTRIES,
-  CATALOG_PAGE_SIZE,
-  CATALOG_VIEW_MODES,
-} from "../constants";
+import { CATALOG_PAGE_SIZE, CATALOG_VIEW_MODES } from "../constants";
 import { useSessionStack } from "./use-session-stack";
 
 /**
@@ -61,7 +57,7 @@ export function useCatalogFilters() {
     setFilters(
       (prev) => ({
         ...prev,
-        registryName: value === CATALOG_ALL_REGISTRIES ? null : value,
+        registryName: value,
         cursor: "",
       }),
       { startTransition },
@@ -97,7 +93,7 @@ export function useCatalogFilters() {
   return {
     viewMode,
     search,
-    selectedRegistry: registryName || CATALOG_ALL_REGISTRIES,
+    selectedRegistry: registryName,
     cursor,
     limit,
     isFirstPage,