@inkeep/agents-manage-ui 0.0.0-dev-20251021164445 → 0.0.0-dev-20251021181503

package/src/components/external-agents/form/external-agent-form.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+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 { GenericTextarea } from '@/components/form/generic-textarea';
+import { Button } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import { InfoCard } from '@/components/ui/info-card';
+import type { Credential } from '@/lib/api/credentials';
+import { createExternalAgent, updateExternalAgent } from '@/lib/api/external-agents';
+import type { ExternalAgent } from '@/lib/types/external-agents';
+import { type ExternalAgentFormData, externalAgentSchema } from './validation';
+
+interface ExternalAgentFormProps {
+  initialData?: ExternalAgentFormData;
+  mode?: 'create' | 'update';
+  externalAgent?: ExternalAgent;
+  credentials: Credential[];
+  tenantId: string;
+  projectId: string;
+}
+
+const defaultValues: ExternalAgentFormData = {
+  name: '',
+  description: '',
+  baseUrl: '',
+  credentialReferenceId: 'none',
+};
+
+export function ExternalAgentForm({
+  initialData,
+  mode = 'create',
+  externalAgent,
+  credentials,
+  tenantId,
+  projectId,
+}: ExternalAgentFormProps) {
+  const router = useRouter();
+
+  const form = useForm({
+    resolver: zodResolver(externalAgentSchema),
+    defaultValues: {
+      ...defaultValues,
+      ...initialData,
+    },
+  });
+
+  const { isSubmitting } = form.formState;
+
+  const onSubmit = async (data: ExternalAgentFormData) => {
+    try {
+      // Transform form data to API format
+      const transformedData = {
+        ...data,
+        description: data.description || '',
+        credentialReferenceId:
+          data.credentialReferenceId === 'none' ? null : data.credentialReferenceId,
+      };
+
+      if (mode === 'update' && externalAgent) {
+        await updateExternalAgent(tenantId, projectId, externalAgent.id, transformedData);
+        toast.success('External agent updated successfully');
+        router.push(`/${tenantId}/projects/${projectId}/external-agents/${externalAgent.id}`);
+      } else {
+        const newExternalAgent = await createExternalAgent(tenantId, projectId, {
+          ...transformedData,
+          id: nanoid(),
+        });
+        toast.success('External agent created successfully');
+        router.push(`/${tenantId}/projects/${projectId}/external-agents/${newExternalAgent.id}`);
+      }
+    } catch (error) {
+      console.error(`Failed to ${mode} external agent:`, error);
+      toast.error(`Failed to ${mode} external agent. Please try again.`);
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <GenericInput
+          control={form.control}
+          name="name"
+          label="Name"
+          placeholder="My External Agent"
+          isRequired
+        />
+        <GenericTextarea
+          control={form.control}
+          name="description"
+          label="Description (optional)"
+          placeholder="A brief description of what this external agent does..."
+        />
+        <GenericInput
+          control={form.control}
+          name="baseUrl"
+          label="Base URL"
+          placeholder="https://api.example.com"
+          isRequired
+        />
+
+        <div className="space-y-3">
+          <GenericSelect
+            control={form.control}
+            selectTriggerClassName="w-full"
+            name="credentialReferenceId"
+            label="Credential"
+            placeholder="Select a credential"
+            options={[
+              { value: 'none', label: 'No Authentication' },
+              ...credentials.map((credential) => ({
+                value: credential.id,
+                label: credential.id,
+              })),
+            ]}
+          />
+          <InfoCard title="How this works">
+            <div className="space-y-2">
+              <p>
+                Select{' '}
+                <code className="bg-background px-1.5 py-0.5 rounded border">
+                  No Authentication
+                </code>{' '}
+                if the external agent does not require authentication, or if you want to add a
+                credential later.
+              </p>
+              <p>
+                Otherwise, select from the existing credentials you have already created. The
+                credential will be used when communicating with this external agent.
+              </p>
+            </div>
+          </InfoCard>
+        </div>
+
+        <Button type="submit" disabled={isSubmitting}>
+          {mode === 'update' ? 'Save' : 'Create'}
+        </Button>
+      </form>
+    </Form>
+  );
+}

package/src/components/external-agents/form/validation.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export const externalAgentSchema = z.object({
+  name: z.string().min(1, 'Name is required.'),
+  description: z.string().optional(),
+  baseUrl: z.string().url('Must be a valid URL.'),
+  credentialReferenceId: z.string().nullish(),
+});
+
+export type ExternalAgentFormData = z.infer<typeof externalAgentSchema>;

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/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: {