@inkeep/agents-manage-ui 0.6.5 → 0.7.0

package/src/components/graph/sidepane/nodes/mcp-selector/mcp-selector.tsx

@@ -1,68 +1,68 @@
-import { type Node, useReactFlow } from '@xyflow/react'
-import { useParams } from 'next/navigation'
-import { useEffect, useState } from 'react'
-import { toast } from 'sonner'
-import { fetchMCPTools } from "@/lib/api/tools"
-import type { MCPTool } from "@/lib/types/tools";
-import { NodeType } from '../../../configuration/node-types'
-import { EmptyState } from '../empty-state'
-import { MCPSelectorLoading } from './loading'
-import { MCPServerItem } from './mcp-server-item'
+import { type Node, useReactFlow } from '@xyflow/react';
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { fetchMCPTools } from '@/lib/api/tools';
+import type { MCPTool } from '@/lib/types/tools';
+import { NodeType } from '../../../configuration/node-types';
+import { EmptyState } from '../empty-state';
+import { MCPSelectorLoading } from './loading';
+import { MCPServerItem } from './mcp-server-item';
 
 interface MCPSelectorState {
-  tools: MCPTool[]
-  isLoading: boolean
-  error: string | null
+  tools: MCPTool[];
+  isLoading: boolean;
+  error: string | null;
 }
 
 const useFetchAvailableMCPs = (): MCPSelectorState => {
-  const [tools, setTools] = useState<MCPTool[]>([])
-  const [isLoading, setIsLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
+  const [tools, setTools] = useState<MCPTool[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
   const { tenantId, projectId } = useParams<{
-    tenantId: string
-    projectId: string
-  }>()
+    tenantId: string;
+    projectId: string;
+  }>();
 
   useEffect(() => {
     const loadTools = async () => {
       try {
-        setIsLoading(true)
-        setError(null)
-        const mcpTools = await fetchMCPTools(tenantId, projectId)
-        setTools(mcpTools)
+        setIsLoading(true);
+        setError(null);
+        const mcpTools = await fetchMCPTools(tenantId, projectId);
+        setTools(mcpTools);
       } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : 'Failed to load MCP tools'
-        setError(errorMessage)
-        toast.error(errorMessage)
+        const errorMessage = err instanceof Error ? err.message : 'Failed to load MCP tools';
+        setError(errorMessage);
+        toast.error(errorMessage);
       } finally {
-        setIsLoading(false)
+        setIsLoading(false);
       }
-    }
+    };
 
-    loadTools()
-  }, [tenantId, projectId])
+    loadTools();
+  }, [tenantId, projectId]);
 
-  return { tools, isLoading, error }
-}
+  return { tools, isLoading, error };
+};
 
 export function MCPSelector({ selectedNode }: { selectedNode: Node }) {
-  const { updateNode } = useReactFlow()
+  const { updateNode } = useReactFlow();
   const { tenantId, projectId } = useParams<{
-    tenantId: string
-    projectId: string
-  }>()
-  const { tools, isLoading, error } = useFetchAvailableMCPs()
+    tenantId: string;
+    projectId: string;
+  }>();
+  const { tools, isLoading, error } = useFetchAvailableMCPs();
 
   const handleSelect = (mcp: MCPTool) => {
     updateNode(selectedNode.id, {
       type: NodeType.MCP,
-      data: { ...mcp },
-    })
-  }
+      data: { toolId: mcp.id },
+    });
+  };
 
   if (isLoading) {
-    return <MCPSelectorLoading title="Select MCP server" />
+    return <MCPSelectorLoading title="Select MCP server" />;
   }
 
   if (error) {
@@ -72,7 +72,7 @@ export function MCPSelector({ selectedNode }: { selectedNode: Node }) {
         actionText="Create MCP server"
         actionHref={`/${tenantId}/projects/${projectId}/mcp-servers/new`}
       />
-    )
+    );
   }
 
   if (!tools?.length) {
@@ -82,7 +82,7 @@ export function MCPSelector({ selectedNode }: { selectedNode: Node }) {
         actionText="Create MCP server"
         actionHref={`/${tenantId}/projects/${projectId}/mcp-servers/new`}
       />
-    )
+    );
   }
 
   return (
@@ -96,5 +96,5 @@ export function MCPSelector({ selectedNode }: { selectedNode: Node }) {
         </div>
       </div>
     </div>
-  )
+  );
 }

package/src/components/graph/sidepane/sidepane.tsx

@@ -5,6 +5,7 @@ import { useMemo } from 'react';
 import { useGraphErrors } from '@/hooks/use-graph-errors';
 import type { ArtifactComponent } from '@/lib/api/artifact-components';
 import type { DataComponent } from '@/lib/api/data-components';
+import type { MCPTool } from '@/lib/types/tools';
 import { SidePane as SidePaneLayout } from '../../layout/sidepane';
 import { edgeTypeMap } from '../configuration/edge-types';
 import {
@@ -31,6 +32,7 @@ interface SidePaneProps {
   dataComponentLookup: Record<string, DataComponent>;
   artifactComponentLookup: Record<string, ArtifactComponent>;
   selectedToolsLookup: Record<string, Record<string, string[]>>;
+  toolLookup: Record<string, MCPTool>;
 }
 
 export function SidePane({
@@ -42,6 +44,7 @@ export function SidePane({
   dataComponentLookup,
   artifactComponentLookup,
   selectedToolsLookup,
+  toolLookup,
 }: SidePaneProps) {
   const selectedNode = useNodesData(selectedNodeId || '');
   const edges = useEdges();
@@ -111,6 +114,7 @@ export function SidePane({
             <MCPServerNodeEditor
               selectedNode={selectedNode as Node<MCPNodeData>}
               selectedToolsLookup={selectedToolsLookup}
+              toolLookup={toolLookup}
             />
           );
         }
@@ -131,6 +135,7 @@ export function SidePane({
     getFieldErrorMessage,
     getFirstErrorField,
     selectedToolsLookup,
+    toolLookup,
   ]);
 
   const showBackButton = useMemo(() => {

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

@@ -1,28 +1,28 @@
-'use client'
+'use client';
 
-import { zodResolver } from '@hookform/resolvers/zod'
-import { MCPTransportType } from '@inkeep/agents-core/client-exports'
-import { nanoid } from 'nanoid'
-import { useRouter } from 'next/navigation'
-import { useForm } from 'react-hook-form'
-import { toast } from 'sonner'
-import { GenericInput } from '@/components/form/generic-input'
-import { GenericSelect } from '@/components/form/generic-select'
-import { Button } from '@/components/ui/button'
-import { Form } from '@/components/ui/form'
-import type { Credential } from '@/lib/api/credentials'
-import { createMCPTool, syncMCPTool, updateMCPTool } from '@/lib/api/tools'
-import type { MCPTool } from '@/lib/types/tools'
-import { ActiveToolsSelector } from './active-tools-selector'
-import { type MCPToolFormData, mcpToolSchema } from './validation'
+import { zodResolver } from '@hookform/resolvers/zod';
+import { MCPTransportType } from '@inkeep/agents-core/client-exports';
+import { nanoid } from 'nanoid';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { GenericInput } from '@/components/form/generic-input';
+import { GenericSelect } from '@/components/form/generic-select';
+import { Button } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import type { Credential } from '@/lib/api/credentials';
+import { createMCPTool, updateMCPTool } from '@/lib/api/tools';
+import type { MCPTool } from '@/lib/types/tools';
+import { ActiveToolsSelector } from './active-tools-selector';
+import { type MCPToolFormData, mcpToolSchema } from './validation';
 
 interface MCPServerFormProps {
-  initialData?: MCPToolFormData
-  mode?: 'create' | 'update'
-  tool?: MCPTool
-  credentials: Credential[]
-  tenantId: string
-  projectId: string
+  initialData?: MCPToolFormData;
+  mode?: 'create' | 'update';
+  tool?: MCPTool;
+  credentials: Credential[];
+  tenantId: string;
+  projectId: string;
 }
 
 const defaultValues: MCPToolFormData = {
@@ -41,7 +41,7 @@ const defaultValues: MCPToolFormData = {
   },
   imageUrl: '', // Initialize as empty string to avoid uncontrolled/controlled warning
   credentialReferenceId: 'none',
-}
+};
 
 export function MCPServerForm({
   initialData,
@@ -51,7 +51,7 @@ export function MCPServerForm({
   tenantId,
   projectId,
 }: MCPServerFormProps) {
-  const router = useRouter()
+  const router = useRouter();
 
   const form = useForm({
     resolver: zodResolver(mcpToolSchema),
@@ -59,9 +59,17 @@ export function MCPServerForm({
       ...defaultValues,
       ...initialData,
     },
-  })
+  });
+
+  const { isSubmitting } = form.formState;
 
-  const { isSubmitting } = form.formState
+  // Helper function to filter active tools against available tools
+  const getActiveTools = (toolsConfig: MCPToolFormData['config']['mcp']['toolsConfig']) => {
+    if (toolsConfig.type === 'all') return undefined;
+
+    const availableToolNames = tool?.availableTools?.map((t) => t.name) || [];
+    return toolsConfig.tools.filter((toolName) => availableToolNames.includes(toolName));
+  };
 
   const onSubmit = async (data: MCPToolFormData) => {
     try {
@@ -73,36 +81,29 @@ export function MCPServerForm({
         config: {
           ...data.config,
           mcp: {
-            server: data.config.mcp.server,
-            transport: data.config.mcp.transport,
-            // Convert discriminated union to API format: type='all' → activeTools=undefined
-            activeTools:
-              data.config.mcp.toolsConfig.type === 'all'
-                ? undefined
-                : data.config.mcp.toolsConfig.tools,
+            ...data.config.mcp,
+            activeTools: getActiveTools(data.config.mcp.toolsConfig),
           },
         },
-      }
+      };
 
       if (mode === 'update' && tool) {
-        await updateMCPTool(tenantId, projectId, tool.id, transformedData)
-        await syncMCPTool(tenantId, projectId, tool.id)
-        toast.success('MCP server updated successfully')
-        router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${tool.id}`)
+        await updateMCPTool(tenantId, projectId, tool.id, transformedData);
+        toast.success('MCP server updated successfully');
+        router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${tool.id}`);
       } else {
         const newTool = await createMCPTool(tenantId, projectId, {
           ...transformedData,
           id: nanoid(),
-        })
-        await syncMCPTool(tenantId, projectId, newTool.id)
-        toast.success('MCP server created successfully')
-        router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${newTool.id}`)
+        });
+        toast.success('MCP server created successfully');
+        router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${newTool.id}`);
       }
     } catch (error) {
-      console.error(`Failed to ${mode} MCP tool:`, error)
-      toast.error(`Failed to ${mode} MCP server. Please try again.`)
+      console.error(`Failed to ${mode} MCP tool:`, error);
+      toast.error(`Failed to ${mode} MCP server. Please try again.`);
     }
-  }
+  };
 
   return (
     <Form {...form}>
@@ -171,5 +172,5 @@ export function MCPServerForm({
         </Button>
       </form>
     </Form>
-  )
+  );
 }

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

@@ -160,6 +160,9 @@ export function MCPToolItem({
 
           {/* Key metrics in a structured layout */}
           <div className="flex items-center gap-2 flex-wrap">
+            {(tool.status === 'unhealthy' || tool.status === 'unknown') && (
+              <Badge variant="error">{tool.status}</Badge>
+            )}
             {tool.status === 'needs_auth' ? (
               <div className="flex items-center gap-2">
                 <Badge variant="warning">Needs Login</Badge>

package/src/components/mcp-servers/view-mcp-server-details.tsx

@@ -4,16 +4,46 @@ import { Lock, LockOpen, Pencil } from 'lucide-react';
 import Link from 'next/link';
 import { Badge } from '@/components/ui/badge';
 import { ExternalLink } from '@/components/ui/external-link';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useRuntimeConfig } from '@/contexts/runtime-config-context';
-import type { MCPTool } from "@/lib/types/tools";;
+import type { MCPTool } from '@/lib/types/tools';
+
 import { cn } from '@/lib/utils';
 import { getOAuthLoginUrl } from '@/lib/utils/mcp-urls';
 import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
 import { Button } from '../ui/button';
+import { CopyableMultiLineCode } from '../ui/copyable-multi-line-code';
 import { CopyableSingleLineCode } from '../ui/copyable-single-line-code';
 import { AvailableToolsCard } from './available-tools-card';
 import { MCPToolImage } from './mcp-tool-image';
 
+// Helper component to render active tool badges with availability status
+function ActiveToolBadge({ toolName, isAvailable }: { toolName: string; isAvailable: boolean }) {
+  const badge = (
+    <Badge
+      variant={isAvailable ? 'primary' : 'warning'}
+      className={cn(
+        isAvailable ? '' : 'opacity-75 border-yellow-500 text-yellow-700 bg-yellow-50 normal-case'
+      )}
+    >
+      {toolName}
+    </Badge>
+  );
+
+  if (!isAvailable) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{badge}</TooltipTrigger>
+        <TooltipContent>
+          <p>This tool is not available in the MCP server.</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return badge;
+}
+
 export function ViewMCPServerDetails({
   tool,
   tenantId,
@@ -147,33 +177,7 @@ export function ViewMCPServerDetails({
 
       {/* Basic Information */}
       <div className="space-y-8">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 space-y-8">
-          <div className="space-y-2">
-            <ItemLabel>Name</ItemLabel>
-            <ItemValue>{tool.name}</ItemValue>
-          </div>
-          <div className="space-y-2">
-            <ItemLabel>Status</ItemLabel>
-            <ItemValue className="items-center">
-              {tool.status === 'needs_auth' ? (
-                <Badge
-                  variant="outline"
-                  className="text-xs bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-800 cursor-pointer hover:bg-amber-100 dark:hover:bg-amber-900/30 hover:border-amber-300 dark:hover:border-amber-700 transition-colors"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    handleOAuthLogin(tool.id);
-                  }}
-                >
-                  Click to Login
-                </Badge>
-              ) : (
-                <Badge className="uppercase" variant={getStatusBadgeVariant(tool.status)}>
-                  {tool.status}
-                </Badge>
-              )}
-            </ItemValue>
-          </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div className="space-y-2">
             <ItemLabel>Created At</ItemLabel>
             <ItemValue>
@@ -200,6 +204,37 @@ export function ViewMCPServerDetails({
           </div>
         )}
 
+        <div className="space-y-2">
+          <ItemLabel>Status</ItemLabel>
+          <ItemValue className="items-center">
+            {tool.status === 'needs_auth' ? (
+              <Badge
+                variant="outline"
+                className="text-xs bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-800 cursor-pointer hover:bg-amber-100 dark:hover:bg-amber-900/30 hover:border-amber-300 dark:hover:border-amber-700 transition-colors"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleOAuthLogin(tool.id);
+                }}
+              >
+                Click to Login
+              </Badge>
+            ) : (
+              <Badge className="uppercase" variant={getStatusBadgeVariant(tool.status)}>
+                {tool.status}
+              </Badge>
+            )}
+          </ItemValue>
+        </div>
+
+        {/* Last Error */}
+        {tool.lastError && (
+          <div className="space-y-2">
+            <ItemLabel>Last Error</ItemLabel>
+            <CopyableMultiLineCode code={tool.lastError} />
+          </div>
+        )}
+
         {/* Server URL */}
         <div className="space-y-2">
           <ItemLabel>Server URL</ItemLabel>
@@ -258,22 +293,26 @@ export function ViewMCPServerDetails({
               tool.availableTools && tool.availableTools.length > 0 ? (
                 <div className="flex flex-wrap gap-2">
                   {tool.availableTools.map((toolInfo) => (
-                    <Badge key={toolInfo.name} className="" variant="primary">
-                      {toolInfo.name}
-                    </Badge>
+                    <ActiveToolBadge
+                      key={toolInfo.name}
+                      toolName={toolInfo.name}
+                      isAvailable={true} // All available tools are shown, so they're all available
+                    />
                   ))}
                 </div>
               ) : (
                 <div className="text-sm text-muted-foreground">No tools available</div>
               )
             ) : tool.config.mcp.activeTools && tool.config.mcp.activeTools.length > 0 ? (
-              // Specific tools are active
+              // Specific tools are active - check availability
               <div className="flex flex-wrap gap-2">
-                {tool.config.mcp.activeTools.map((toolName) => (
-                  <Badge key={toolName} className="" variant="primary">
-                    {toolName}
-                  </Badge>
-                ))}
+                {tool.config.mcp.activeTools.map((toolName) => {
+                  const isAvailable =
+                    tool.availableTools?.some((t) => t.name === toolName) ?? false;
+                  return (
+                    <ActiveToolBadge key={toolName} toolName={toolName} isAvailable={isAvailable} />
+                  );
+                })}
               </div>
             ) : (
               // No tools are active (empty array)

package/src/components/ui/copyable-multi-line-code.tsx

@@ -0,0 +1,17 @@
+import { CopyButton } from '@/components/ui/copy-button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+export function CopyableMultiLineCode({ code }: { code: string }) {
+  return (
+    <div className="relative bg-muted/50 dark:bg-muted/30 rounded-md border overflow-hidden">
+      <ScrollArea className="h-20 w-full">
+        <div className="px-3 py-2 pr-8">
+          <pre className="text-sm text-foreground/90 font-mono whitespace-pre-wrap break-words leading-5">
+            {code}
+          </pre>
+        </div>
+      </ScrollArea>
+      <CopyButton className="absolute right-1 top-1 z-10" textToCopy={code} />
+    </div>
+  );
+}