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

package/src/app/[tenantId]/projects/[projectId]/external-agents/[externalAgentId]/edit/page.tsx

@@ -0,0 +1,86 @@
+import FullPageError from '@/components/errors/full-page-error';
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+import { ExternalAgentForm } from '@/components/external-agents/form/external-agent-form';
+import type { ExternalAgentFormData } from '@/components/external-agents/form/validation';
+import { type Credential, fetchCredentials } from '@/lib/api/credentials';
+import { fetchExternalAgent } from '@/lib/api/external-agents';
+import type { ExternalAgent } from '@/lib/types/external-agents';
+
+interface EditExternalAgentPageProps {
+  params: Promise<{ externalAgentId: string; tenantId: string; projectId: string }>;
+}
+
+async function EditExternalAgentPage({ params }: EditExternalAgentPageProps) {
+  const { externalAgentId, tenantId, projectId } = await params;
+
+  // Fetch both in parallel with individual error handling
+  const [externalAgentResult, credentialsResult] = await Promise.allSettled([
+    fetchExternalAgent(tenantId, projectId, externalAgentId),
+    fetchCredentials(tenantId, projectId),
+  ]);
+
+  // Handle external agent result (required)
+  let externalAgent: ExternalAgent;
+  if (externalAgentResult.status === 'fulfilled') {
+    externalAgent = externalAgentResult.value;
+  } else {
+    console.error('Failed to load external agent:', externalAgentResult.reason);
+    return (
+      <FullPageError
+        error={externalAgentResult.reason as Error}
+        link={`/${tenantId}/projects/${projectId}/external-agents`}
+        linkText="Back to external agents"
+        context="External agent"
+      />
+    );
+  }
+
+  // Handle credentials result (optional - fallback to empty array)
+  let credentials: Credential[] = [];
+  if (credentialsResult.status === 'fulfilled') {
+    credentials = credentialsResult.value;
+  } else {
+    console.error('Failed to load credentials:', credentialsResult.reason);
+    // Continue without credentials
+  }
+
+  // Convert ExternalAgent to ExternalAgentFormData format
+  const initialFormData: ExternalAgentFormData = {
+    name: externalAgent.name,
+    description: externalAgent.description || '',
+    baseUrl: externalAgent.baseUrl,
+    credentialReferenceId: externalAgent.credentialReferenceId || 'none',
+  };
+
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        {
+          label: 'External agents',
+          href: `/${tenantId}/projects/${projectId}/external-agents`,
+        },
+        {
+          label: externalAgent.name,
+          href: `/${tenantId}/projects/${projectId}/external-agents/${externalAgentId}`,
+        },
+        { label: 'Edit' },
+      ]}
+    >
+      <MainContent>
+        <div className="max-w-2xl mx-auto py-4">
+          <ExternalAgentForm
+            initialData={initialFormData}
+            mode="update"
+            externalAgent={externalAgent}
+            credentials={credentials}
+            tenantId={tenantId}
+            projectId={projectId}
+          />
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default EditExternalAgentPage;

package/src/app/[tenantId]/projects/[projectId]/external-agents/[externalAgentId]/page.tsx

@@ -0,0 +1,52 @@
+import FullPageError from '@/components/errors/full-page-error';
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+import { ViewExternalAgentDetails } from '@/components/external-agents/view-external-agent-details';
+import { fetchExternalAgent } from '@/lib/api/external-agents';
+
+interface ExternalAgentPageProps {
+  params: Promise<{ externalAgentId: string; tenantId: string; projectId: string }>;
+}
+
+async function ExternalAgentPage({ params }: ExternalAgentPageProps) {
+  const { externalAgentId, tenantId, projectId } = await params;
+
+  let externalAgent: Awaited<ReturnType<typeof fetchExternalAgent>>;
+  try {
+    externalAgent = await fetchExternalAgent(tenantId, projectId, externalAgentId);
+  } catch (error) {
+    return (
+      <FullPageError
+        error={error as Error}
+        link={`/${tenantId}/projects/${projectId}/external-agents`}
+        linkText="Back to external agents"
+        context="External agent"
+      />
+    );
+  }
+
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        {
+          label: 'External agents',
+          href: `/${tenantId}/projects/${projectId}/external-agents`,
+        },
+        {
+          label: externalAgent.name,
+          href: `/${tenantId}/projects/${projectId}/external-agents/${externalAgentId}`,
+        },
+      ]}
+    >
+      <MainContent>
+        <ViewExternalAgentDetails
+          externalAgent={externalAgent}
+          tenantId={tenantId}
+          projectId={projectId}
+        />
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default ExternalAgentPage;

package/src/app/[tenantId]/projects/[projectId]/external-agents/new/page.tsx

@@ -0,0 +1,43 @@
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+import { ExternalAgentForm } from '@/components/external-agents/form/external-agent-form';
+import { type Credential, fetchCredentials } from '@/lib/api/credentials';
+
+async function NewExternalAgentPage({
+  params,
+}: {
+  params: Promise<{ tenantId: string; projectId: string }>;
+}) {
+  const { tenantId, projectId } = await params;
+  let credentials: Credential[] = [];
+  try {
+    credentials = await fetchCredentials(tenantId, projectId);
+  } catch (error) {
+    console.error('Failed to load credentials:', error);
+  }
+
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        {
+          label: 'External agents',
+          href: `/${tenantId}/projects/${projectId}/external-agents`,
+        },
+        { label: 'New' },
+      ]}
+    >
+      <MainContent>
+        <div className="max-w-2xl mx-auto py-4">
+          <ExternalAgentForm
+            mode="create"
+            credentials={credentials}
+            tenantId={tenantId}
+            projectId={projectId}
+          />
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default NewExternalAgentPage;

package/src/app/[tenantId]/projects/[projectId]/external-agents/page.tsx

@@ -0,0 +1,64 @@
+import { Plus } from 'lucide-react';
+import Link from 'next/link';
+import FullPageError from '@/components/errors/full-page-error';
+import { BodyTemplate } from '@/components/layout/body-template';
+import EmptyState from '@/components/layout/empty-state';
+import { MainContent } from '@/components/layout/main-content';
+import { PageHeader } from '@/components/layout/page-header';
+import { ExternalAgentsList } from '@/components/external-agents/external-agents-list';
+import { Button } from '@/components/ui/button';
+import { fetchExternalAgents } from '@/lib/api/external-agents';
+
+const externalAgentsDescription =
+  'Create external agents that can be delegated to from your internal agents.';
+
+async function ExternalAgentsPage({
+  params,
+}: {
+  params: Promise<{ tenantId: string; projectId: string }>;
+}) {
+  const { tenantId, projectId } = await params;
+
+  let externalAgents: Awaited<ReturnType<typeof fetchExternalAgents>>;
+  try {
+    externalAgents = await fetchExternalAgents(tenantId, projectId);
+  } catch (error) {
+    return <FullPageError error={error as Error} context="External agents" />;
+  }
+
+  return (
+    <BodyTemplate breadcrumbs={[{ label: 'External agents' }]}>
+      <MainContent className="min-h-full">
+        {externalAgents.length > 0 ? (
+          <>
+            <PageHeader
+              title="External agents"
+              description={externalAgentsDescription}
+              action={
+                <Button asChild>
+                  <Link
+                    href={`/${tenantId}/projects/${projectId}/external-agents/new`}
+                    className="flex items-center gap-2"
+                  >
+                    <Plus className="size-4" />
+                    New external agent
+                  </Link>
+                </Button>
+              }
+            />
+            <ExternalAgentsList externalAgents={externalAgents} />
+          </>
+        ) : (
+          <EmptyState
+            title="No external agents yet."
+            description={externalAgentsDescription}
+            link={`/${tenantId}/projects/${projectId}/external-agents/new`}
+            linkText="Create external agent"
+          />
+        )}
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default ExternalAgentsPage;

package/src/components/agent/agent.tsx

@@ -48,9 +48,21 @@ export type AgentToolConfig = {
   headers?: Record<string, string>;
 };
 
+export type SubAgentExternalAgentConfig = {
+  externalAgentId: string;
+  headers?: Record<string, string>;
+};
+
 // AgentToolConfigLookup: subAgentId -> relationshipId -> config
 export type AgentToolConfigLookup = Record<string, Record<string, AgentToolConfig>>;
 
+// SubAgentExternalAgentConfigLookup: subAgentId -> relationshipId -> config
+export type SubAgentExternalAgentConfigLookup = Record<
+  string,
+  Record<string, SubAgentExternalAgentConfig>
+>;
+
+import type { ExternalAgent } from '@/lib/api/external-agents';
 import { EdgeType, edgeTypes, initialEdges } from './configuration/edge-types';
 import {
   agentNodeSourceHandleId,
@@ -81,6 +93,7 @@ interface AgentProps {
   artifactComponentLookup?: Record<string, ArtifactComponent>;
   toolLookup?: Record<string, MCPTool>;
   credentialLookup?: Record<string, Credential>;
+  externalAgentLookup?: Record<string, ExternalAgent>;
 }
 
 function Flow({
@@ -89,6 +102,7 @@ function Flow({
   artifactComponentLookup = {},
   toolLookup = {},
   credentialLookup = {},
+  externalAgentLookup = {},
 }: AgentProps) {
   const [showPlayground, setShowPlayground] = useState(false);
   const router = useRouter();
@@ -193,6 +207,28 @@ function Flow({
     return lookup;
   }, [agent?.subAgents]);
 
+  const subAgentExternalAgentConfigLookup = useMemo((): SubAgentExternalAgentConfigLookup => {
+    if (!agent?.subAgents) return {} as SubAgentExternalAgentConfigLookup;
+    const lookup: SubAgentExternalAgentConfigLookup = {};
+    Object.entries(agent.subAgents).forEach(([subAgentId, agentData]) => {
+      if ('canDelegateTo' in agentData && agentData.canDelegateTo) {
+        const externalAgentConfigs: Record<string, SubAgentExternalAgentConfig> = {};
+        agentData.canDelegateTo
+          .filter((delegate) => typeof delegate === 'object' && 'externalAgentId' in delegate)
+          .forEach((delegate) => {
+            externalAgentConfigs[delegate.externalAgentId] = {
+              externalAgentId: delegate.externalAgentId,
+              headers: delegate.headers ?? undefined,
+            };
+          });
+        if (Object.keys(externalAgentConfigs).length > 0) {
+          lookup[subAgentId] = externalAgentConfigs;
+        }
+      }
+    });
+    return lookup;
+  }, [agent?.subAgents]);
+
   const {
     screenToFlowPosition,
     updateNodeData,
@@ -564,7 +600,8 @@ function Flow({
       metadata,
       dataComponentLookup,
       artifactComponentLookup,
-      agentToolConfigLookup
+      agentToolConfigLookup,
+      subAgentExternalAgentConfigLookup
     );
 
     const functionToolNodeMap = new Map<string, string>();
@@ -691,6 +728,8 @@ function Flow({
     setErrors,
     agentToolConfigLookup,
     toolLookup,
+    subAgentExternalAgentConfigLookup,
+    externalAgentLookup,
   ]);
 
   useEffect(() => {
@@ -928,6 +967,7 @@ function Flow({
         dataComponentLookup={dataComponentLookup}
         artifactComponentLookup={artifactComponentLookup}
         agentToolConfigLookup={agentToolConfigLookup}
+        subAgentExternalAgentConfigLookup={subAgentExternalAgentConfigLookup}
         credentialLookup={credentialLookup}
       />
       {showPlayground && agent?.id && (
@@ -950,6 +990,7 @@ export function Agent({
   artifactComponentLookup,
   toolLookup,
   credentialLookup,
+  externalAgentLookup,
 }: AgentProps) {
   return (
     <ReactFlowProvider>
@@ -959,6 +1000,7 @@ export function Agent({
         artifactComponentLookup={artifactComponentLookup}
         toolLookup={toolLookup}
         credentialLookup={credentialLookup}
+        externalAgentLookup={externalAgentLookup}
       />
     </ReactFlowProvider>
   );

package/src/components/agent/configuration/node-types.tsx

@@ -1,8 +1,8 @@
-import { Bot, BotMessageSquare, Code, Hammer } from 'lucide-react';
+import { Bot, Code, Globe, Hammer } from 'lucide-react';
 import { ExternalAgentNode } from '../nodes/external-agent-node';
 import { FunctionToolNode } from '../nodes/function-tool-node';
 import { MCPNode } from '../nodes/mcp-node';
-import { MCPPlaceholderNode } from '../nodes/mcp-placeholder-node';
+import { PlaceholderNode } from '../nodes/placeholder-node';
 import { SubAgentNode } from '../nodes/sub-agent-node';
 import type { AgentModels } from './agent-types';
 
@@ -11,6 +11,7 @@ interface NodeData {
   isDefault?: boolean;
   subAgentId?: string | null; // Optional for MCP nodes
   relationshipId?: string | null; // Optional for MCP nodes
+  type?: 'mcp-placeholder' | 'external-agent-placeholder'; // Optional for placeholder nodes
 }
 
 import type { SubAgentStopWhen } from '@inkeep/agents-core/client-exports';
@@ -48,7 +49,7 @@ export interface ExternalAgentNodeData extends Record<string, unknown> {
   name: string;
   description?: string;
   baseUrl: string;
-  headers: string;
+  relationshipId?: string | null;
   credentialReferenceId?: string | null;
 }
 
@@ -69,6 +70,7 @@ export interface FunctionToolNodeData extends Record<string, unknown> {
 export enum NodeType {
   SubAgent = 'agent',
   ExternalAgent = 'external-agent',
+  ExternalAgentPlaceholder = 'external-agent-placeholder',
   MCP = 'mcp',
   MCPPlaceholder = 'mcp-placeholder',
   FunctionTool = 'function-tool',
@@ -77,8 +79,9 @@ export enum NodeType {
 export const nodeTypes = {
   [NodeType.SubAgent]: SubAgentNode,
   [NodeType.ExternalAgent]: ExternalAgentNode,
+  [NodeType.ExternalAgentPlaceholder]: PlaceholderNode,
   [NodeType.MCP]: MCPNode,
-  [NodeType.MCPPlaceholder]: MCPPlaceholderNode,
+  [NodeType.MCPPlaceholder]: PlaceholderNode,
   [NodeType.FunctionTool]: FunctionToolNode,
 };
 
@@ -95,6 +98,10 @@ export const newNodeDefaults: Record<keyof typeof nodeTypes, NodeData> = {
   [NodeType.ExternalAgent]: {
     name: '',
   },
+  [NodeType.ExternalAgentPlaceholder]: {
+    name: 'Select external agent',
+    type: 'external-agent-placeholder',
+  },
   [NodeType.MCP]: {
     name: 'MCP',
     subAgentId: null,
@@ -102,6 +109,7 @@ export const newNodeDefaults: Record<keyof typeof nodeTypes, NodeData> = {
   },
   [NodeType.MCPPlaceholder]: {
     name: 'Select MCP server',
+    type: 'mcp-placeholder',
   },
   [NodeType.FunctionTool]: {
     name: 'Function Tool',
@@ -118,7 +126,12 @@ export const nodeTypeMap = {
   [NodeType.ExternalAgent]: {
     type: NodeType.ExternalAgent,
     name: 'External Agent',
-    Icon: BotMessageSquare,
+    Icon: Globe,
+  },
+  [NodeType.ExternalAgentPlaceholder]: {
+    type: NodeType.ExternalAgentPlaceholder,
+    name: 'External Agent',
+    Icon: Globe,
   },
   [NodeType.MCPPlaceholder]: {
     type: NodeType.MCPPlaceholder,

package/src/components/agent/node-library/node-library.tsx

@@ -5,7 +5,7 @@ import { NodeItem } from './node-item';
 
 const nodeTypes: NodeItem[] = [
   nodeTypeMap[NodeType.SubAgent],
-  nodeTypeMap[NodeType.ExternalAgent],
+  nodeTypeMap[NodeType.ExternalAgentPlaceholder],
   nodeTypeMap[NodeType.MCPPlaceholder],
   nodeTypeMap[NodeType.FunctionTool],
 ];

package/src/components/agent/nodes/external-agent-node.tsx

@@ -1,19 +1,19 @@
 import { type NodeProps, Position } from '@xyflow/react';
-import { BotMessageSquare } from 'lucide-react';
+import { Globe } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { NODE_WIDTH } from '@/features/agent/domain/deserialize';
 import { useAgentErrors } from '@/hooks/use-agent-errors';
-import type { AgentNodeData } from '../configuration/node-types';
+import { cn } from '@/lib/utils';
+import type { ExternalAgentNodeData } from '../configuration/node-types';
 import { externalAgentNodeTargetHandleId } from '../configuration/node-types';
 import { ErrorIndicator } from '../error-display/error-indicator';
 import { BaseNode, BaseNodeContent, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
 import { Handle } from './handle';
 import { NodeTab } from './node-tab';
-import { cn } from '@/lib/utils';
 
-export function ExternalAgentNode(props: NodeProps & { data: AgentNodeData }) {
+export function ExternalAgentNode(props: NodeProps & { data: ExternalAgentNodeData }) {
   const { data, selected, id } = props;
-  const { name, description, isExecuting } = data;
+  const { name, description } = data;
   const { getNodeErrors, hasNodeErrors } = useAgentErrors();
 
   // Use the agent ID from node data if available, otherwise fall back to React Flow node ID
@@ -25,17 +25,13 @@ export function ExternalAgentNode(props: NodeProps & { data: AgentNodeData }) {
     <div className="relative">
       <NodeTab isSelected={selected}>External</NodeTab>
       <BaseNode
-        isSelected={selected || data.isDelegating}
-        className={cn(
-          'rounded-tl-none',
-          hasErrors && 'ring-2 ring-red-300 border-red-300',
-          isExecuting && 'node-executing'
-        )}
+        isSelected={selected}
+        className={cn('rounded-tl-none', hasErrors && 'ring-2 ring-red-300 border-red-300')}
         style={{ width: NODE_WIDTH }}
       >
         <BaseNodeHeader className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-2 min-w-0">
-            <BotMessageSquare className="size-4 text-muted-foreground" />
+            <Globe className="size-4 text-muted-foreground" />
             <BaseNodeHeaderTitle>{name || 'External Agent'}</BaseNodeHeaderTitle>
           </div>
           <Badge variant="primary" className="text-xs uppercase">

package/src/components/agent/nodes/{mcp-placeholder-node.tsx → placeholder-node.tsx}

@@ -1,12 +1,13 @@
 import type { NodeProps } from '@xyflow/react';
-import { Hammer } from 'lucide-react';
+import { Globe, Hammer } from 'lucide-react';
 import { BaseNode, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
 
-type MCPPlaceholderNodeData = {
+type PlaceholderNodeData = {
   name: string;
+  type: 'mcp-placeholder' | 'external-agent-placeholder';
 };
 
-export function MCPPlaceholderNode(props: NodeProps & { data: MCPPlaceholderNodeData }) {
+export function PlaceholderNode(props: NodeProps & { data: PlaceholderNodeData }) {
   const { data, selected } = props;
   const { name } = data;
   return (
@@ -15,7 +16,10 @@ export function MCPPlaceholderNode(props: NodeProps & { data: MCPPlaceholderNode
       className={`rounded-4xl border-dashed min-w-40 min-h-13 flex items-center justify-center max-w-3xs ${selected ? 'outline-dashed outline-2 outline-gray-700 hover:outline-gray-700 ring-0 hover:ring-0' : ''}`}
     >
       <BaseNodeHeader className="mb-0 py-3">
-        <Hammer className="size-4 text-muted-foreground/65" />
+        {data.type === 'mcp-placeholder' && <Hammer className="size-4 text-muted-foreground/65" />}
+        {data.type === 'external-agent-placeholder' && (
+          <Globe className="size-4 text-muted-foreground/65" />
+        )}
         <BaseNodeHeaderTitle className="text-muted-foreground">{name}</BaseNodeHeaderTitle>
       </BaseNodeHeader>
     </BaseNode>

package/src/components/agent/sidepane/edges/edge-editor.tsx

@@ -1,9 +1,12 @@
 import { type Edge, useNodesData, useReactFlow } from '@xyflow/react';
-import { Spline } from 'lucide-react';
+import { Spline, Trash2 } from 'lucide-react';
+import { useCallback } from 'react';
 import { DashedSplineIcon } from '@/components/icons/dashed-spline';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
 import { useAgentActions } from '@/features/agent/state/use-agent-store';
 import type { A2AEdgeData } from '../../configuration/edge-types';
 
@@ -76,7 +79,12 @@ interface EdgeEditorProps {
 }
 
 function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
-  const { updateEdgeData, setEdges } = useReactFlow();
+  const { updateEdgeData, setEdges, deleteElements } = useReactFlow();
+
+  const deleteEdge = useCallback(() => {
+    deleteElements({ edges: [{ id: selectedEdge.id }] });
+  }, [selectedEdge.id, deleteElements]);
+
   const sourceNode = useNodesData(selectedEdge.source);
   const targetNode = useNodesData(selectedEdge.target);
   const { markUnsaved } = useAgentActions();
@@ -216,7 +224,7 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
               </Badge>{' '}
               can delegate to{' '}
               <Badge variant="code" className="my-0.5">
-                {sourceNode?.data.name as string}
+                {sourceName}
               </Badge>
             </div>
           ),
@@ -242,6 +250,13 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
         onCheckedChange={handleCheckboxChange}
         checkedValues={selectedEdge.data?.relationships as A2AEdgeData['relationships']}
       />
+      <Separator />
+      <div className="flex justify-end">
+        <Button variant="destructive-outline" size="sm" onClick={deleteEdge}>
+          <Trash2 className="size-4" />
+          Delete
+        </Button>
+      </div>
     </div>
   );
 }