@inkeep/agents-manage-ui 0.0.0-dev-20251021180725 → 0.0.0-dev-20251021214723

package/src/components/external-agents/view-external-agent-details.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+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 type { ExternalAgent } from '@/lib/types/external-agents';
+import { cn } from '@/lib/utils';
+import { Button } from '../ui/button';
+import { CopyableSingleLineCode } from '../ui/copyable-single-line-code';
+
+export function ViewExternalAgentDetails({
+  externalAgent,
+  tenantId,
+  projectId,
+}: {
+  externalAgent: ExternalAgent;
+  tenantId: string;
+  projectId: string;
+}) {
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const ItemLabel = ({
+    children,
+    className,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+  }) => {
+    return <div className={cn('text-sm font-medium leading-none', className)}>{children}</div>;
+  };
+
+  const ItemValue = ({
+    children,
+    className,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+  }) => {
+    return <div className={cn('flex w-full text-sm', className)}>{children}</div>;
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto py-4 space-y-8">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div>
+            <h2 className="text-xl font-medium tracking-tight">{externalAgent.name}</h2>
+            <p className="text-sm text-muted-foreground">External agent details</p>
+          </div>
+        </div>
+        <Button asChild>
+          <Link
+            href={`/${tenantId}/projects/${projectId}/external-agents/${externalAgent.id}/edit`}
+          >
+            <Pencil className="w-4 h-4" />
+            Edit
+          </Link>
+        </Button>
+      </div>
+
+      {/* Basic Information */}
+      <div className="space-y-8">
+        {/* Description */}
+        {externalAgent.description && (
+          <div className="space-y-2">
+            <ItemLabel>Description</ItemLabel>
+            <ItemValue>
+              <p className="text-sm text-muted-foreground">{externalAgent.description}</p>
+            </ItemValue>
+          </div>
+        )}
+
+        {/* Created and Updated */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <ItemLabel>Created At</ItemLabel>
+            <ItemValue>{formatDate(externalAgent.createdAt)}</ItemValue>
+          </div>
+          <div className="space-y-2">
+            <ItemLabel>Updated At</ItemLabel>
+            <ItemValue>{formatDate(externalAgent.updatedAt)}</ItemValue>
+          </div>
+        </div>
+
+        {/* Base URL */}
+        <div className="space-y-2">
+          <ItemLabel>Base URL</ItemLabel>
+          <CopyableSingleLineCode code={externalAgent.baseUrl} />
+        </div>
+
+        {/* Credential */}
+        <div className="space-y-2">
+          <ItemLabel>Credential</ItemLabel>
+          <ItemValue className="items-center">
+            {externalAgent.credentialReferenceId ? (
+              <div className="flex items-center gap-2">
+                <Badge variant="code" className="flex items-center gap-2">
+                  <Lock className="w-4 h-4" />
+                  {externalAgent.credentialReferenceId}
+                </Badge>
+                <ExternalLink
+                  href={`/${tenantId}/projects/${projectId}/credentials/${externalAgent.credentialReferenceId}`}
+                  className="text-xs"
+                >
+                  view credential
+                </ExternalLink>
+              </div>
+            ) : (
+              <Badge variant="warning" className="flex items-center gap-2">
+                <LockOpen className="w-4 h-4" />
+                Unsecured
+              </Badge>
+            )}
+          </ItemValue>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/sidebar-nav/sidebar-nav.tsx

@@ -4,6 +4,7 @@ import {
   Activity,
   BookOpen,
   Component,
+  Globe,
   Key,
   Layers,
   Library,
@@ -69,6 +70,11 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             url: `/${tenantId}/projects/${projectId}/mcp-servers`,
             icon: MCPIcon as LucideIcon,
           },
+          {
+            title: 'External Agents',
+            url: `/${tenantId}/projects/${projectId}/external-agents`,
+            icon: Globe,
+          },
           {
             title: 'Credentials',
             url: `/${tenantId}/projects/${projectId}/credentials`,

package/src/components/ui/button.tsx

@@ -25,6 +25,8 @@ const buttonVariants = cva(
           'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 text-muted-foreground dark:text-muted-foreground font-mono uppercase',
         link: 'text-primary underline-offset-4 hover:underline font-mono uppercase',
         unstyled: 'font-inherit text-inherit text-[length:inherit] rounded-none',
+        'destructive-outline':
+          'border border-destructive/10 text-destructive bg-background shadow-xs hover:bg-destructive/5 hover:text-destructive font-mono uppercase focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:hover:bg-destructive/20 dark:border-destructive/40',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',

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

@@ -10,11 +10,7 @@ import {
   mcpNodeHandleId,
   NodeType,
 } from '@/components/agent/configuration/node-types';
-import type {
-  ExternalAgentDefinition,
-  FullAgentDefinition,
-  InternalAgentDefinition,
-} from '@/lib/types/agent-full';
+import type { FullAgentDefinition } from '@/lib/types/agent-full';
 import { formatJsonField } from '@/lib/utils';
 
 interface TransformResult {
@@ -104,91 +100,78 @@ export function applyDagreLayout(nodes: Node[], edges: Edge[]): Node[] {
 export function deserializeAgentData(data: FullAgentDefinition): TransformResult {
   const nodes: Node[] = [];
   const edges: Edge[] = [];
+  const createdExternalAgentNodes = new Set<string>();
 
   const subAgentIds: string[] = Object.keys(data.subAgents);
   for (const subAgentId of subAgentIds) {
-    const agent = data.subAgents[subAgentId];
+    const subAgent = data.subAgents[subAgentId];
     const isDefault = subAgentId === data.defaultSubAgentId;
-    const isExternal = agent.type === 'external';
-
-    const nodeType = isExternal ? NodeType.ExternalAgent : NodeType.SubAgent;
-    const agentNodeData = isExternal
-      ? {
-          id: agent.id,
-          name: agent.name,
-          description: agent.description,
-          baseUrl: (agent as ExternalAgentDefinition).baseUrl,
-          headers: formatJsonField(agent.headers) || '{}',
-          type: agent.type,
-          credentialReferenceId: agent.credentialReferenceId,
-        }
-      : (() => {
-          const internalAgent = agent as InternalAgentDefinition;
-          return {
-            id: agent.id,
-            name: agent.name,
-            isDefault,
-            prompt: internalAgent.prompt,
-            description: agent.description,
-            dataComponents: internalAgent.dataComponents,
-            artifactComponents: internalAgent.artifactComponents,
-            models: internalAgent.models
-              ? {
-                  base: internalAgent.models.base
-                    ? {
-                        model: internalAgent.models.base.model ?? '',
-                        providerOptions: internalAgent.models.base.providerOptions
-                          ? formatJsonField(internalAgent.models.base.providerOptions)
-                          : undefined,
-                      }
-                    : undefined,
-                  structuredOutput: internalAgent.models.structuredOutput
-                    ? {
-                        model: internalAgent.models.structuredOutput.model ?? '',
-                        providerOptions: internalAgent.models.structuredOutput.providerOptions
-                          ? formatJsonField(internalAgent.models.structuredOutput.providerOptions)
-                          : undefined,
-                      }
-                    : undefined,
-                  summarizer: internalAgent.models.summarizer
-                    ? {
-                        model: internalAgent.models.summarizer.model ?? '',
-                        providerOptions: internalAgent.models.summarizer.providerOptions
-                          ? formatJsonField(internalAgent.models.summarizer.providerOptions)
-                          : undefined,
-                      }
-                    : undefined,
+
+    const nodeType = NodeType.SubAgent;
+    const agentNodeData = (() => {
+      return {
+        id: subAgent.id,
+        name: subAgent.name,
+        isDefault,
+        prompt: subAgent.prompt,
+        description: subAgent.description,
+        dataComponents: subAgent.dataComponents,
+        artifactComponents: subAgent.artifactComponents,
+        models: subAgent.models
+          ? {
+              base: subAgent.models.base
+                ? {
+                    model: subAgent.models.base.model ?? '',
+                    providerOptions: subAgent.models.base.providerOptions
+                      ? formatJsonField(subAgent.models.base.providerOptions)
+                      : undefined,
+                  }
+                : undefined,
+              structuredOutput: subAgent.models.structuredOutput
+                ? {
+                    model: subAgent.models.structuredOutput.model ?? '',
+                    providerOptions: subAgent.models.structuredOutput.providerOptions
+                      ? formatJsonField(subAgent.models.structuredOutput.providerOptions)
+                      : undefined,
+                  }
+                : undefined,
+              summarizer: subAgent.models.summarizer
+                ? {
+                    model: subAgent.models.summarizer.model ?? '',
+                    providerOptions: subAgent.models.summarizer.providerOptions
+                      ? formatJsonField(subAgent.models.summarizer.providerOptions)
+                      : undefined,
+                  }
+                : undefined,
+            }
+          : undefined,
+        stopWhen: subAgent.stopWhen ? { stepCountIs: subAgent.stopWhen.stepCountIs } : undefined,
+        type: subAgent.type,
+        tools: subAgent.canUse ? subAgent.canUse.map((item) => item.toolId) : [],
+        selectedTools: subAgent.canUse
+          ? subAgent.canUse.reduce(
+              (acc, item) => {
+                if (item.toolSelection) {
+                  acc[item.toolId] = item.toolSelection;
                 }
-              : undefined,
-            stopWhen: internalAgent.stopWhen
-              ? { stepCountIs: internalAgent.stopWhen.stepCountIs }
-              : undefined,
-            type: agent.type,
-            tools: internalAgent.canUse ? internalAgent.canUse.map((item) => item.toolId) : [],
-            selectedTools: internalAgent.canUse
-              ? internalAgent.canUse.reduce(
-                  (acc, item) => {
-                    if (item.toolSelection) {
-                      acc[item.toolId] = item.toolSelection;
-                    }
-                    return acc;
-                  },
-                  {} as Record<string, string[]>
-                )
-              : undefined,
-            headers: internalAgent.canUse
-              ? internalAgent.canUse.reduce(
-                  (acc, item) => {
-                    if (item.headers) {
-                      acc[item.toolId] = item.headers;
-                    }
-                    return acc;
-                  },
-                  {} as Record<string, Record<string, string>>
-                )
-              : undefined,
-          };
-        })();
+                return acc;
+              },
+              {} as Record<string, string[]>
+            )
+          : undefined,
+        headers: subAgent.canUse
+          ? subAgent.canUse.reduce(
+              (acc, item) => {
+                if (item.headers) {
+                  acc[item.toolId] = item.headers;
+                }
+                return acc;
+              },
+              {} as Record<string, Record<string, string>>
+            )
+          : undefined,
+      };
+    })();
 
     const agentNode: Node = {
       id: subAgentId,
@@ -296,30 +279,26 @@ export function deserializeAgentData(data: FullAgentDefinition): TransformResult
               false;
             const sourceCanDelegateToTarget =
               ('canDelegateTo' in sourceAgent &&
-                sourceAgent.canDelegateTo?.includes(targetSubAgentId)) ||
+                sourceAgent.canDelegateTo?.some((item) =>
+                  typeof item === 'string' ? item === targetSubAgentId : false
+                )) ||
               false;
             const targetCanDelegateToSource =
               ('canDelegateTo' in targetAgent &&
-                targetAgent.canDelegateTo?.includes(sourceSubAgentId)) ||
+                targetAgent.canDelegateTo?.some((item) =>
+                  typeof item === 'string' ? item === sourceSubAgentId : false
+                )) ||
               false;
 
-            const isTargetExternal = targetAgent.type === 'external';
-
             const edge = {
               id: isSelfReference
                 ? `edge-self-${sourceSubAgentId}`
                 : `edge-${targetSubAgentId}-${sourceSubAgentId}`,
-              type: isSelfReference
-                ? EdgeType.SelfLoop
-                : isTargetExternal
-                  ? EdgeType.A2AExternal
-                  : EdgeType.A2A,
+              type: isSelfReference ? EdgeType.SelfLoop : EdgeType.A2A,
               source: sourceSubAgentId,
               sourceHandle: agentNodeSourceHandleId,
               target: targetSubAgentId,
-              targetHandle: isTargetExternal
-                ? externalAgentNodeTargetHandleId
-                : agentNodeTargetHandleId,
+              targetHandle: agentNodeTargetHandleId,
               selected: false,
               data: {
                 relationships: {
@@ -337,8 +316,66 @@ export function deserializeAgentData(data: FullAgentDefinition): TransformResult
     }
 
     if ('canDelegateTo' in sourceAgent && sourceAgent.canDelegateTo) {
-      for (const targetSubAgentId of sourceAgent.canDelegateTo) {
-        if (data.subAgents[targetSubAgentId]) {
+      for (const targetSubAgent of sourceAgent.canDelegateTo) {
+        let targetSubAgentId: string;
+        let isTargetExternal: boolean;
+        let headers: Record<string, string> | undefined;
+        let relationshipId: string | undefined;
+
+        if (typeof targetSubAgent === 'object' && 'externalAgentId' in targetSubAgent) {
+          targetSubAgentId = targetSubAgent.externalAgentId;
+          isTargetExternal = true;
+          headers = targetSubAgent.headers ?? undefined;
+          relationshipId = targetSubAgent.subAgentExternalAgentRelationId;
+
+          // Create external agent node if it doesn't exist
+          if (!createdExternalAgentNodes.has(targetSubAgentId)) {
+            const externalAgent = data.externalAgents?.[targetSubAgentId];
+            if (externalAgent) {
+              const externalAgentNode: Node = {
+                id: targetSubAgentId,
+                type: NodeType.ExternalAgent,
+                position: { x: 0, y: 0 },
+                data: {
+                  id: externalAgent.id,
+                  name: externalAgent.name,
+                  description: externalAgent.description || '',
+                  baseUrl: externalAgent.baseUrl,
+                  credentialReferenceId: externalAgent.credentialReferenceId,
+                  relationshipId,
+                  tempHeaders: headers,
+                },
+              };
+              nodes.push(externalAgentNode);
+              createdExternalAgentNodes.add(targetSubAgentId);
+            }
+          }
+
+          // Create edge from source agent to external agent
+          const edge: Edge = {
+            id: `edge-${sourceSubAgentId}-${targetSubAgentId}`,
+            type: EdgeType.A2AExternal,
+            source: sourceSubAgentId,
+            sourceHandle: agentNodeSourceHandleId,
+            target: targetSubAgentId,
+            targetHandle: externalAgentNodeTargetHandleId,
+            selected: false,
+            data: {
+              relationships: {
+                transferTargetToSource: false,
+                transferSourceToTarget: false,
+                delegateTargetToSource: false,
+                delegateSourceToTarget: true,
+              },
+            },
+          };
+          edges.push(edge);
+        } else {
+          targetSubAgentId = targetSubAgent;
+          isTargetExternal = false;
+        }
+
+        if (!isTargetExternal && data.subAgents[targetSubAgentId]) {
           // Special handling for self-referencing edges
           const isSelfReference = sourceSubAgentId === targetSubAgentId;
           const pairKey = isSelfReference
@@ -359,30 +396,26 @@ export function deserializeAgentData(data: FullAgentDefinition): TransformResult
               false;
             const sourceCanDelegateToTarget =
               ('canDelegateTo' in sourceAgent &&
-                sourceAgent.canDelegateTo?.includes(targetSubAgentId)) ||
+                sourceAgent.canDelegateTo?.some((item) =>
+                  typeof item === 'string' ? item === targetSubAgentId : false
+                )) ||
               false;
             const targetCanDelegateToSource =
               ('canDelegateTo' in targetAgent &&
-                targetAgent.canDelegateTo?.includes(sourceSubAgentId)) ||
+                targetAgent.canDelegateTo?.some((item) =>
+                  typeof item === 'string' ? item === sourceSubAgentId : false
+                )) ||
               false;
 
-            const isTargetExternal = targetAgent.type === 'external';
-
             const edge = {
               id: isSelfReference
                 ? `edge-self-${sourceSubAgentId}`
                 : `edge-${targetSubAgentId}-${sourceSubAgentId}`,
-              type: isSelfReference
-                ? EdgeType.SelfLoop
-                : isTargetExternal
-                  ? EdgeType.A2AExternal
-                  : EdgeType.A2A,
+              type: isSelfReference ? EdgeType.SelfLoop : EdgeType.A2A,
               source: sourceSubAgentId,
               sourceHandle: agentNodeSourceHandleId,
               target: targetSubAgentId,
-              targetHandle: isTargetExternal
-                ? externalAgentNodeTargetHandleId
-                : agentNodeTargetHandleId,
+              targetHandle: agentNodeTargetHandleId,
               selected: false,
               data: {
                 relationships: {