@inkeep/agents-manage-ui 0.11.2 → 0.12.0

package/.next/standalone/agents-manage-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-manage-ui",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "index.js",
   "types": "index.d.ts",

package/.next/standalone/packages/agents-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-core",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Agents Core contains the database schema, types, and validation schemas for Inkeep Agent Framework, along with core components.",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE.md",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-manage-ui",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "index.js",
   "types": "index.d.ts",
@@ -81,9 +81,9 @@
     "use-stick-to-bottom": "^1.1.1",
     "zod": "^4.1.5",
     "zustand": "^5.0.7",
-    "@inkeep/agents-core": "^0.11.2",
-    "@inkeep/agents-manage-api": "^0.11.2",
-    "@inkeep/agents-run-api": "^0.11.2"
+    "@inkeep/agents-core": "^0.12.0",
+    "@inkeep/agents-manage-api": "^0.12.0",
+    "@inkeep/agents-run-api": "^0.12.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/new/page.tsx

@@ -1,4 +1,4 @@
-import { MCPServerForm } from '@/components/mcp-servers/form/mcp-server-form';
+import { MCPServerSelection } from '@/components/mcp-servers/selection/mcp-server-selection';
 import { type Credential, fetchCredentials } from '@/lib/api/credentials';
 
 async function NewMCPServerPage({
@@ -14,11 +14,7 @@ async function NewMCPServerPage({
     console.error('Failed to load credentials:', error);
   }
 
-  return (
-    <div className="max-w-2xl mx-auto py-4">
-      <MCPServerForm credentials={credentials} tenantId={tenantId} projectId={projectId} />
-    </div>
-  );
+  return <MCPServerSelection credentials={credentials} tenantId={tenantId} projectId={projectId} />;
 }
 
 export default NewMCPServerPage;

package/src/app/api/signoz/conversations/[conversationId]/route.ts

@@ -356,9 +356,8 @@ function buildConversationListPayload(
           ]
         ),
 
-        // error categories
-        contextErrors: listQuery(
-          QUERY_EXPRESSIONS.CONTEXT_ERRORS,
+        agentGenerations: listQuery(
+          QUERY_EXPRESSIONS.AGENT_GENERATIONS,
           [
             {
               key: {
@@ -366,15 +365,7 @@ function buildConversationListPayload(
                 ...QUERY_FIELD_CONFIGS.STRING_TAG_COLUMN,
               },
               op: OPERATORS.EQUALS,
-              value: SPAN_NAMES.CONTEXT_HANDLE,
-            },
-            {
-              key: {
-                key: SPAN_KEYS.HAS_ERROR,
-                ...QUERY_FIELD_CONFIGS.BOOL_TAG_COLUMN,
-              },
-              op: OPERATORS.EQUALS,
-              value: true,
+              value: SPAN_NAMES.AGENT_GENERATION,
             },
           ],
           [
@@ -386,6 +377,10 @@ function buildConversationListPayload(
               key: SPAN_KEYS.TIMESTAMP,
               ...QUERY_FIELD_CONFIGS.INT64_TAG_COLUMN,
             },
+            {
+              key: SPAN_KEYS.HAS_ERROR,
+              ...QUERY_FIELD_CONFIGS.BOOL_TAG_COLUMN,
+            },
             {
               key: SPAN_KEYS.STATUS_MESSAGE,
               ...QUERY_FIELD_CONFIGS.STRING_TAG,
@@ -396,17 +391,11 @@ function buildConversationListPayload(
             },
           ]
         ),
-        agentGenerationErrors: listQuery(
-          QUERY_EXPRESSIONS.AGENT_GENERATION_ERRORS,
+
+        // Count spans with errors
+        spansWithErrors: listQuery(
+          QUERY_EXPRESSIONS.SPANS_WITH_ERRORS,
           [
-            {
-              key: {
-                key: SPAN_KEYS.NAME,
-                ...QUERY_FIELD_CONFIGS.STRING_TAG_COLUMN,
-              },
-              op: OPERATORS.EQUALS,
-              value: SPAN_NAMES.AGENT_GENERATION,
-            },
             {
               key: {
                 key: SPAN_KEYS.HAS_ERROR,
@@ -422,16 +411,8 @@ function buildConversationListPayload(
               ...QUERY_FIELD_CONFIGS.STRING_TAG_COLUMN,
             },
             {
-              key: SPAN_KEYS.TIMESTAMP,
-              ...QUERY_FIELD_CONFIGS.INT64_TAG_COLUMN,
-            },
-            {
-              key: SPAN_KEYS.STATUS_MESSAGE,
-              ...QUERY_FIELD_CONFIGS.STRING_TAG,
-            },
-            {
-              key: SPAN_KEYS.OTEL_STATUS_DESCRIPTION,
-              ...QUERY_FIELD_CONFIGS.STRING_TAG,
+              key: SPAN_KEYS.NAME,
+              ...QUERY_FIELD_CONFIGS.STRING_TAG_COLUMN,
             },
           ]
         ),
@@ -587,6 +568,14 @@ function buildConversationListPayload(
               key: SPAN_KEYS.AI_RESPONSE_TEXT,
               ...QUERY_FIELD_CONFIGS.STRING_TAG,
             },
+            {
+              key: SPAN_KEYS.AI_RESPONSE_TOOL_CALLS,
+              ...QUERY_FIELD_CONFIGS.STRING_TAG,
+            },
+            {
+              key: SPAN_KEYS.AI_PROMPT_MESSAGES,
+              ...QUERY_FIELD_CONFIGS.STRING_TAG,
+            },
           ]
         ),
 
@@ -750,8 +739,8 @@ export async function GET(
     const toolCallSpans = parseList(resp, QUERY_EXPRESSIONS.TOOL_CALLS);
     const contextResolutionSpans = parseList(resp, QUERY_EXPRESSIONS.CONTEXT_RESOLUTION);
     const contextHandleSpans = parseList(resp, QUERY_EXPRESSIONS.CONTEXT_HANDLE);
-    const contextErrorSpans = parseList(resp, QUERY_EXPRESSIONS.CONTEXT_ERRORS);
-    const agentGenErrorSpans = parseList(resp, QUERY_EXPRESSIONS.AGENT_GENERATION_ERRORS);
+    const agentGenerationSpans = parseList(resp, QUERY_EXPRESSIONS.AGENT_GENERATIONS);
+    const spansWithErrorsList = parseList(resp, QUERY_EXPRESSIONS.SPANS_WITH_ERRORS);
     const userMessageSpans = parseList(resp, QUERY_EXPRESSIONS.USER_MESSAGES);
     const aiAssistantSpans = parseList(resp, QUERY_EXPRESSIONS.AI_ASSISTANT_MESSAGES);
     const aiGenerationSpans = parseList(resp, QUERY_EXPRESSIONS.AI_GENERATIONS);
@@ -759,6 +748,33 @@ export async function GET(
     const contextFetcherSpans = parseList(resp, QUERY_EXPRESSIONS.CONTEXT_FETCHERS);
     const durationSpans = parseList(resp, QUERY_EXPRESSIONS.DURATION_SPANS);
 
+    // Categorize spans with errors into critical errors vs warnings
+    const CRITICAL_ERROR_SPAN_NAMES = [
+      'execution_handler.execute',
+      'agent.load_tools',
+      'context.handle_context_resolution',
+      'context.resolve',
+      'agent.generate',
+      'context-resolver.resolve_single_fetch_definition',
+      'graph_session.generate_structured_update',
+      'graph_session.process_artifact',
+      'graph_session.generate_artifact_metadata',
+      'response.format_object_response',
+      'response.format_response',
+    ];
+
+    let errorCount = 0;
+    let warningCount = 0;
+
+    for (const span of spansWithErrorsList) {
+      const spanName = getString(span, SPAN_KEYS.NAME, '');
+      if (CRITICAL_ERROR_SPAN_NAMES.includes(spanName)) {
+        errorCount++;
+      } else {
+        warningCount++;
+      }
+    }
+
     let graphId: string | null = null;
     let graphName: string | null = null;
     for (const s of userMessageSpans) {
@@ -772,6 +788,7 @@ export async function GET(
       type:
         | 'tool_call'
         | 'ai_generation'
+        | 'agent_generation'
         | 'context_fetch'
         | 'context_resolution'
         | 'user_message'
@@ -815,6 +832,9 @@ export async function GET(
       aiStreamTextContent?: string;
       aiStreamTextModel?: string;
       aiStreamTextOperationId?: string;
+      // ai generation specifics
+      aiResponseToolCalls?: string;
+      aiPromptMessages?: string;
       // save_tool_result specifics
       saveResultSaved?: boolean;
       saveArtifactType?: string;
@@ -828,6 +848,9 @@ export async function GET(
       saveFacts?: string;
       saveToolArgs?: Record<string, any>;
       saveFullResult?: Record<string, any>;
+      hasError?: boolean;
+      otelStatusCode?: string;
+      otelStatusDescription?: string;
     };
 
     const activities: Activity[] = [];
@@ -983,24 +1006,6 @@ export async function GET(
       });
     }
 
-    const contextErrors = contextErrorSpans.map((s) => ({
-      spanId: getString(s, SPAN_KEYS.SPAN_ID, ''),
-      timestamp: s.timestamp,
-      statusDescription:
-        getString(s, SPAN_KEYS.STATUS_MESSAGE) ||
-        getString(s, SPAN_KEYS.OTEL_STATUS_DESCRIPTION, '') ||
-        'No description available',
-    }));
-    const agentGenerationErrors = agentGenErrorSpans.map((s) => ({
-      spanId: getString(s, SPAN_KEYS.SPAN_ID, ''),
-      timestamp: s.timestamp,
-      statusDescription:
-        getString(s, SPAN_KEYS.STATUS_MESSAGE) ||
-        getString(s, SPAN_KEYS.OTEL_STATUS_DESCRIPTION, '') ||
-        'No description available',
-    }));
-    const errorCount = contextErrors.length + agentGenerationErrors.length;
-
     // user messages
     for (const span of userMessageSpans) {
       const hasError = getField(span, SPAN_KEYS.HAS_ERROR) === true;
@@ -1046,6 +1051,11 @@ export async function GET(
     for (const span of aiGenerationSpans) {
       const hasError = getField(span, SPAN_KEYS.HAS_ERROR) === true;
       const durMs = getNumber(span, SPAN_KEYS.DURATION_NANO) / 1e6;
+      
+      // Extract ai.response.toolCalls and ai.prompt.messages for ai.generateText.doGenerate spans
+      const aiResponseToolCalls = getString(span, SPAN_KEYS.AI_RESPONSE_TOOL_CALLS, '');
+      const aiPromptMessages = getString(span, SPAN_KEYS.AI_PROMPT_MESSAGES, '');
+      
       activities.push({
         id: getString(span, SPAN_KEYS.SPAN_ID, ''),
         type: ACTIVITY_TYPES.AI_GENERATION,
@@ -1062,6 +1072,32 @@ export async function GET(
         inputTokens: getNumber(span, SPAN_KEYS.GEN_AI_USAGE_INPUT_TOKENS, 0),
         outputTokens: getNumber(span, SPAN_KEYS.GEN_AI_USAGE_OUTPUT_TOKENS, 0),
         aiResponseText: getString(span, SPAN_KEYS.AI_RESPONSE_TEXT, '') || undefined,
+        aiResponseToolCalls: aiResponseToolCalls || undefined,
+        aiPromptMessages: aiPromptMessages || undefined,
+      });
+    }
+
+    for (const span of agentGenerationSpans) {
+      const hasError = getField(span, SPAN_KEYS.HAS_ERROR) === true;
+      const statusMessage =
+        getString(span, SPAN_KEYS.STATUS_MESSAGE) ||
+        getString(span, SPAN_KEYS.OTEL_STATUS_DESCRIPTION, '');
+      const otelStatusCode = getString(span, SPAN_KEYS.OTEL_STATUS_CODE, '');
+      const otelStatusDescription = getString(span, SPAN_KEYS.OTEL_STATUS_DESCRIPTION, '');
+
+      activities.push({
+        id: getString(span, SPAN_KEYS.SPAN_ID, ''),
+        type: ACTIVITY_TYPES.AGENT_GENERATION,
+        name: 'agent.generate',
+        description: hasError ? 'Agent generation failed' : 'Agent generation',
+        timestamp: span.timestamp,
+        status: hasError ? ACTIVITY_STATUS.ERROR : ACTIVITY_STATUS.SUCCESS,
+        result: hasError
+          ? statusMessage || 'Agent generation failed'
+          : 'Agent generation completed',
+        hasError,
+        otelStatusCode: hasError ? otelStatusCode : undefined,
+        otelStatusDescription: hasError ? otelStatusDescription || statusMessage : undefined,
       });
     }
 
@@ -1192,7 +1228,7 @@ export async function GET(
         return count;
       })(),
       totalToolCalls: activities.filter((a) => a.type === ACTIVITY_TYPES.TOOL_CALL).length,
-      totalErrors: errorCount,
+      totalErrors: 0,
       totalOpenAICalls: openAICallsCount,
     };
 
@@ -1215,11 +1251,12 @@ export async function GET(
       totalInputTokens,
       totalOutputTokens,
       mcpToolErrors: [],
-      contextErrors,
-      agentGenerationErrors,
       graphId,
       graphName,
       allSpanAttributes,
+      spansWithErrorsCount: spansWithErrorsList.length,
+      errorCount,
+      warningCount,
     });
   } catch (error) {
     const logger = getLogger('conversation-details');

package/src/components/mcp-servers/mcp-tool-image.tsx

@@ -53,7 +53,10 @@ export function MCPToolImage({
 
   // Handle regular URLs with Next.js Image component for optimization
   return (
-    <div className={cn('relative', className)} style={{ width: size, height: size }}>
+    <div
+      className={cn('relative flex items-center justify-center', className)}
+      style={{ width: size, height: size }}
+    >
       {imageLoading && provider && (
         <ProviderIcon provider={provider} size={size} className="absolute inset-0" />
       )}

package/src/components/mcp-servers/mcp-tool-item.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Lock, LockOpen, MoreVertical, Trash2 } from 'lucide-react';
+import { MoreVertical, Trash2 } from 'lucide-react';
 import { useParams } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'sonner';
@@ -23,7 +23,8 @@ import {
   ItemCardTitle,
 } from '@/components/ui/item-card';
 import { deleteToolAction } from '@/lib/actions/tools';
-import type { MCPTool } from "@/lib/types/tools";;
+import type { MCPTool } from '@/lib/types/tools';
+
 import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
 import { Badge } from '../ui/badge';
 import { CardTitle } from '../ui/card';
@@ -136,7 +137,7 @@ export function MCPToolItem({
       <ItemCardHeader>
         <ItemCardLink href={linkPath}>
           <ItemCardTitle className="text-md">
-            <div className="flex items-start gap-3">
+            <div className="flex items-center gap-3">
               <MCPToolImage
                 imageUrl={tool.imageUrl}
                 name={tool.name}
@@ -163,21 +164,15 @@ export function MCPToolItem({
             {(tool.status === 'unhealthy' || tool.status === 'unknown') && (
               <Badge variant="error">{tool.status}</Badge>
             )}
-            {tool.status === 'needs_auth' ? (
+
+            {tool.status === 'healthy' && <Badge variant="success">{tool.status}</Badge>}
+
+            {tool.status === 'needs_auth' && (
               <div className="flex items-center gap-2">
                 <Badge variant="warning">Needs Login</Badge>
               </div>
-            ) : tool.credentialReferenceId ? (
-              <Badge variant="success">
-                <Lock className="w-3 h-3 mr-1" />
-                Secured
-              </Badge>
-            ) : (
-              <Badge variant="warning">
-                <LockOpen className="w-3 h-3 mr-1" />
-                Unsecured
-              </Badge>
             )}
+
             <Badge variant="code" className="uppercase bg-transparent">
               {activeTools?.length ?? 0} Active tool
               {activeTools?.length !== 1 ? 's' : ''}

package/src/components/mcp-servers/selection/mcp-server-selection.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { nanoid } from 'nanoid';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { PageHeader } from '@/components/layout/page-header';
+import { MCPServerForm } from '@/components/mcp-servers/form/mcp-server-form';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useOAuthLogin } from '@/hooks/use-oauth-login';
+import type { Credential } from '@/lib/api/credentials';
+import { createMCPTool } from '@/lib/api/tools';
+import type { PrebuiltMCPServer } from '@/lib/data/prebuilt-mcp-servers';
+import { PrebuiltServersGrid } from './prebuilt-servers-grid';
+
+interface MCPServerSelectionProps {
+  credentials: Credential[];
+  tenantId: string;
+  projectId: string;
+}
+
+type SelectionMode = 'popular' | 'custom';
+
+export function MCPServerSelection({ credentials, tenantId, projectId }: MCPServerSelectionProps) {
+  const [loadingServerId, setLoadingServerId] = useState<string>();
+  const [selectedMode, setSelectedMode] = useState<SelectionMode>('popular');
+  const [searchQuery, setSearchQuery] = useState('');
+  const router = useRouter();
+
+  const { handleOAuthLogin } = useOAuthLogin({
+    tenantId,
+    projectId,
+    onError: () => {
+      setLoadingServerId(undefined);
+    },
+  });
+
+  const handleSelectPrebuiltServer = async (server: PrebuiltMCPServer) => {
+    setLoadingServerId(server.id);
+
+    try {
+      // Transform prebuilt server data to MCPToolFormData format
+      const mcpToolData = {
+        id: nanoid(),
+        name: server.name,
+        config: {
+          type: 'mcp' as const,
+          mcp: {
+            server: {
+              url: server.url,
+            },
+            transport: {
+              type: server.transport,
+            },
+          },
+        },
+        credentialReferenceId: null, // OAuth servers typically don't need pre-configured credentials
+        imageUrl: server.imageUrl,
+      };
+
+      const newTool = await createMCPTool(tenantId, projectId, mcpToolData);
+
+      if (server.isOpen) {
+        toast.success(`${server.name} MCP server created successfully`);
+        router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${newTool.id}`);
+      } else {
+        handleOAuthLogin(newTool.id);
+      }
+    } catch (error) {
+      console.error('Failed to create prebuilt MCP server:', error);
+      toast.error(`Failed to create ${server.name} server. Please try again.`);
+      setLoadingServerId(undefined);
+    }
+  };
+
+  return (
+    <>
+      <PageHeader
+        className="gap-2 items-start"
+        title={selectedMode === 'popular' ? 'Popular MCP Servers' : 'Custom MCP Server'}
+        description={
+          selectedMode === 'popular'
+            ? 'Connect to popular services with pre-configured servers. Click any server to set up with OAuth authentication.'
+            : 'Configure a custom MCP server by providing the server URL and transport details.'
+        }
+        action={
+          <div className="flex bg-muted p-1 rounded-lg">
+            <Button
+              variant={selectedMode === 'popular' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => setSelectedMode('popular')}
+            >
+              Popular Servers
+            </Button>
+            <Button
+              variant={selectedMode === 'custom' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => setSelectedMode('custom')}
+            >
+              Custom Server
+            </Button>
+          </div>
+        }
+      />
+
+      {/* Content */}
+      {selectedMode === 'popular' ? (
+        <div className="space-y-6">
+          <div className="max-w-sm">
+            <Input
+              placeholder="Search servers..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+          <PrebuiltServersGrid
+            onSelectServer={handleSelectPrebuiltServer}
+            loadingServerId={loadingServerId}
+            searchQuery={searchQuery}
+          />
+        </div>
+      ) : (
+        <div className="max-w-2xl mx-auto">
+          <MCPServerForm credentials={credentials} tenantId={tenantId} projectId={projectId} />
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/mcp-servers/selection/prebuilt-server-card.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { MCPToolImage } from '@/components/mcp-servers/mcp-tool-image';
+import { CardTitle } from '@/components/ui/card';
+import {
+  ItemCardContent,
+  ItemCardHeader,
+  ItemCardRoot,
+  ItemCardTitle,
+} from '@/components/ui/item-card';
+import type { PrebuiltMCPServer } from '@/lib/data/prebuilt-mcp-servers';
+
+// URL Display Component with ellipsis
+function URLDisplay({ url }: { url: string }) {
+  return (
+    <div className="rounded py-1 min-w-0">
+      <code className="text-sm text-muted-foreground block truncate">{url}</code>
+    </div>
+  );
+}
+
+interface PrebuiltServerCardProps {
+  server: PrebuiltMCPServer;
+  onSelect: (server: PrebuiltMCPServer) => void;
+  isLoading?: boolean;
+  disabled?: boolean;
+}
+
+export function PrebuiltServerCard({
+  server,
+  onSelect,
+  isLoading = false,
+  disabled = false,
+}: PrebuiltServerCardProps) {
+  const handleClick = () => {
+    if (!isLoading && !disabled) {
+      onSelect(server);
+    }
+  };
+
+  return (
+    <ItemCardRoot
+      className={`h-full min-w-0 transition-shadow ${
+        disabled
+          ? 'opacity-50 cursor-not-allowed'
+          : 'cursor-pointer hover:shadow-md hover:bg-accent/50'
+      }`}
+      onClick={handleClick}
+    >
+      <ItemCardHeader>
+        <ItemCardTitle className="text-md">
+          <div className="flex items-center gap-3">
+            <MCPToolImage
+              imageUrl={server.imageUrl}
+              name={server.name}
+              provider={server.name}
+              size={24}
+              className="mt-0.5 flex-shrink-0"
+            />
+            <div className="flex-1 min-w-0">
+              <CardTitle className="text-base truncate font-medium">{server.name}</CardTitle>
+            </div>
+          </div>
+        </ItemCardTitle>
+      </ItemCardHeader>
+
+      <ItemCardContent>
+        <div className="space-y-3 min-w-0">
+          <URLDisplay url={server.url} />
+        </div>
+      </ItemCardContent>
+    </ItemCardRoot>
+  );
+}

package/src/components/mcp-servers/selection/prebuilt-servers-grid.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { type PrebuiltMCPServer, usePrebuiltMCPServers } from '@/lib/data/prebuilt-mcp-servers';
+import { PrebuiltServerCard } from './prebuilt-server-card';
+
+interface PrebuiltServersGridProps {
+  onSelectServer: (server: PrebuiltMCPServer) => void;
+  loadingServerId?: string;
+  searchQuery?: string;
+}
+
+export function PrebuiltServersGrid({
+  onSelectServer,
+  loadingServerId,
+  searchQuery = '',
+}: PrebuiltServersGridProps) {
+  const prebuiltMCPServers = usePrebuiltMCPServers();
+  const filteredServers = prebuiltMCPServers.filter(
+    (server) =>
+      server.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      server.url.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  if (filteredServers.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-muted-foreground">No servers found matching "{searchQuery}".</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {filteredServers.map((server) => (
+        <PrebuiltServerCard
+          key={server.id}
+          server={server}
+          onSelect={onSelectServer}
+          isLoading={loadingServerId === server.id}
+          disabled={!!loadingServerId && loadingServerId !== server.id}
+        />
+      ))}
+    </div>
+  );
+}