@inkeep/agents-manage-ui 0.6.6 → 0.7.1

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>
+  );
+}

package/src/features/graph/domain/__tests__/serialize.test.ts

@@ -27,7 +27,7 @@ describe('serializeGraphData', () => {
       ];
       const edges: Edge[] = [];
 
-      const result = serializeGraphData(nodes, edges);
+      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.agents.agent1 as any).models).toBeUndefined();
     });
@@ -52,7 +52,7 @@ describe('serializeGraphData', () => {
       ];
       const edges: Edge[] = [];
 
-      const result = serializeGraphData(nodes, edges);
+      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.agents.agent1 as any).models).toBeUndefined();
     });
@@ -77,7 +77,7 @@ describe('serializeGraphData', () => {
       ];
       const edges: Edge[] = [];
 
-      const result = serializeGraphData(nodes, edges);
+      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.agents.agent1 as any).models).toEqual({
         base: { model: 'gpt-4' },
@@ -106,7 +106,7 @@ describe('serializeGraphData', () => {
       ];
       const edges: Edge[] = [];
 
-      const result = serializeGraphData(nodes, edges);
+      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.agents.agent1 as any).models).toEqual({
         base: undefined,
@@ -135,7 +135,7 @@ describe('serializeGraphData', () => {
       ];
       const edges: Edge[] = [];
 
-      const result = serializeGraphData(nodes, edges);
+      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.agents.agent1 as any).models).toEqual({
         base: undefined,
@@ -164,7 +164,7 @@ describe('serializeGraphData', () => {
       ];
       const edges: Edge[] = [];
 
-      const result = serializeGraphData(nodes, edges);
+      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.agents.agent1 as any).models).toEqual({
         base: { model: 'gpt-4' },
@@ -189,7 +189,7 @@ describe('serializeGraphData', () => {
       ];
       const edges: Edge[] = [];
 
-      const result = serializeGraphData(nodes, edges);
+      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.agents.agent1 as any).models).toBeUndefined();
     });
@@ -213,15 +213,9 @@ describe('serializeGraphData', () => {
           type: NodeType.MCP,
           position: { x: 200, y: 0 },
           data: {
-            id: 'mcp1',
+            toolId: 'mcp1',
             name: 'Test MCP Server',
-            config: { type: 'mcp', mcp: { server: { url: 'test://server' } } },
             tempSelectedTools: ['tool1', 'tool2'],
-            tenantId: 'test-tenant',
-            projectId: 'test-project',
-            status: 'unknown',
-            createdAt: new Date(),
-            updatedAt: new Date(),
           } as MCPNodeData,
         },
       ];
@@ -235,13 +229,13 @@ describe('serializeGraphData', () => {
         },
       ];
 
-      const result = serializeGraphData(nodes, edges);
+      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.agents.agent1 as any).canUse).toBeDefined();
       expect((result.agents.agent1 as any).canUse).toHaveLength(1);
       expect((result.agents.agent1 as any).canUse[0]).toEqual({
         toolId: 'mcp1',
-        toolSelection: ['tool1', 'tool2']
+        toolSelection: ['tool1', 'tool2'],
       });
     });
 
@@ -263,15 +257,9 @@ describe('serializeGraphData', () => {
           type: NodeType.MCP,
           position: { x: 200, y: 0 },
           data: {
-            id: 'mcp1',
+            toolId: 'mcp1',
             name: 'Test MCP Server',
-            config: { type: 'mcp', mcp: { server: { url: 'test://server' } } },
             tempSelectedTools: null, // null means all tools selected
-            tenantId: 'test-tenant',
-            projectId: 'test-project',
-            status: 'unknown',
-            createdAt: new Date(),
-            updatedAt: new Date(),
           } as MCPNodeData,
         },
       ];
@@ -285,14 +273,14 @@ describe('serializeGraphData', () => {
         },
       ];
 
-      const result = serializeGraphData(nodes, edges);
+      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
 
       // When tempSelectedTools is null, all tools should be selected (toolSelection: null)
       expect((result.agents.agent1 as any).canUse).toBeDefined();
       expect((result.agents.agent1 as any).canUse).toHaveLength(1);
       expect((result.agents.agent1 as any).canUse[0]).toEqual({
         toolId: 'mcp1',
-        toolSelection: null
+        toolSelection: null,
       });
     });
 
@@ -313,15 +301,9 @@ describe('serializeGraphData', () => {
           type: NodeType.MCP,
           position: { x: 200, y: 0 },
           data: {
-            id: 'mcp1',
+            toolId: 'mcp1',
             name: 'Test MCP Server',
-            config: { type: 'mcp', mcp: { server: { url: 'test://server' } } },
             tempSelectedTools: [], // empty array means no tools selected
-            tenantId: 'test-tenant',
-            projectId: 'test-project',
-            status: 'unknown',
-            createdAt: new Date(),
-            updatedAt: new Date(),
           } as MCPNodeData,
         },
       ];
@@ -335,13 +317,13 @@ describe('serializeGraphData', () => {
         },
       ];
 
-      const result = serializeGraphData(nodes, edges);
+      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.agents.agent1 as any).canUse).toBeDefined();
       expect((result.agents.agent1 as any).canUse).toHaveLength(1);
       expect((result.agents.agent1 as any).canUse[0]).toEqual({
         toolId: 'mcp1',
-        toolSelection: []
+        toolSelection: [],
       });
     });
 
@@ -362,15 +344,9 @@ describe('serializeGraphData', () => {
           type: NodeType.MCP,
           position: { x: 200, y: 0 },
           data: {
-            id: 'mcp1',
+            toolId: 'mcp1',
             name: 'Test MCP Server',
-            config: { type: 'mcp', mcp: { server: { url: 'test://server' } } },
             // no tempSelectedTools property
-            tenantId: 'test-tenant',
-            projectId: 'test-project',
-            status: 'unknown',
-            createdAt: new Date(),
-            updatedAt: new Date(),
           } as MCPNodeData,
         },
       ];
@@ -384,7 +360,7 @@ describe('serializeGraphData', () => {
         },
       ];
 
-      const result = serializeGraphData(nodes, edges);
+      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
 
       // selectedTools should not be created if tempSelectedTools is undefined
       expect((result.agents.agent1 as any).selectedTools).toBeUndefined();
@@ -409,15 +385,9 @@ describe('serializeGraphData', () => {
           type: NodeType.MCP,
           position: { x: 200, y: 0 },
           data: {
-            id: 'mcp1',
+            toolId: 'mcp1',
             name: 'Test MCP Server',
-            config: { type: 'mcp', mcp: { server: { url: 'test://server' } } },
             // tempSelectedTools is undefined (user didn't interact with UI)
-            tenantId: 'test-tenant',
-            projectId: 'test-project',
-            status: 'unknown',
-            createdAt: new Date(),
-            updatedAt: new Date(),
           } as MCPNodeData,
         },
       ];
@@ -431,7 +401,7 @@ describe('serializeGraphData', () => {
         },
       ];
 
-      const result = serializeGraphData(nodes, edges);
+      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
 
       // When tempSelectedTools is undefined and there's an edge to MCP tool,
       // the toolSelection will be null (all tools selected by default)
@@ -439,7 +409,7 @@ describe('serializeGraphData', () => {
       expect((result.agents.agent1 as any).canUse).toHaveLength(1);
       expect((result.agents.agent1 as any).canUse[0]).toEqual({
         toolId: 'mcp1',
-        toolSelection: null  // null means all tools are selected
+        toolSelection: null, // null means all tools are selected
       });
     });
   });

package/src/features/graph/domain/deserialize.ts

@@ -14,7 +14,7 @@ import type {
   FullGraphDefinition,
   InternalAgentDefinition,
 } from '@/lib/types/graph-full';
-import type { MCPTool } from '@/lib/types/tools';
+
 import { formatJsonField } from '@/lib/utils';
 
 interface TransformResult {
@@ -101,10 +101,7 @@ function applyDagreLayout(nodes: Node[], edges: Edge[]): Node[] {
   });
 }
 
-export function deserializeGraphData(
-  data: FullGraphDefinition,
-  toolLookup?: Record<string, MCPTool>
-): TransformResult {
+export function deserializeGraphData(data: FullGraphDefinition): TransformResult {
   const nodes: Node[] = [];
   const edges: Edge[] = [];
 
@@ -213,7 +210,7 @@ export function deserializeGraphData(
             id: toolNodeId,
             type: NodeType.MCP,
             position: { x: 0, y: 0 },
-            data: { id: tool.id, ...tool },
+            data: { toolId: tool.id },
           };
           nodes.push(toolNode);
 
@@ -228,33 +225,15 @@ export function deserializeGraphData(
           edges.push(agentToToolEdge);
         }
       } else {
-        // Tools are project-scoped, use the tool lookup if available
+        // Tools are project-scoped - just store the tool ID
         for (const canUseItem of agent.canUse) {
           const toolId = canUseItem.toolId;
-          const tool = toolLookup?.[toolId];
           const toolNodeId = nanoid();
           const toolNode: Node = {
             id: toolNodeId,
             type: NodeType.MCP,
             position: { x: 0, y: 0 },
-            data: tool
-              ? {
-                  id: tool.id,
-                  name: tool.name,
-                  description: '', // MCPTool doesn't have a description field at top level
-                  type: 'mcp',
-                  config: tool.config || {},
-                  status: tool.status,
-                  availableTools: tool.availableTools,
-                  selectedTools: canUseItem.toolSelection, // Use toolSelection from canUseItem
-                }
-              : {
-                  id: toolId,
-                  name: toolId,
-                  description: 'Project-scoped tool',
-                  type: 'project-scoped',
-                  config: {},
-                },
+            data: { toolId },
           };
           nodes.push(toolNode);