@inkeep/agents-manage-ui 0.24.1 → 0.25.0

package/src/components/agent/agent.tsx

@@ -14,7 +14,6 @@ import {
   useOnSelectionChange,
   useReactFlow,
 } from '@xyflow/react';
-import { nanoid } from 'nanoid';
 import { useParams, useRouter } from 'next/navigation';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
@@ -38,6 +37,7 @@ import type { DataComponent } from '@/lib/api/data-components';
 import { saveAgent } from '@/lib/services/save-agent';
 import type { MCPTool } from '@/lib/types/tools';
 import { getErrorSummaryMessage, parseAgentValidationErrors } from '@/lib/utils/agent-error-parser';
+import { generateId } from '@/lib/utils/id-utils';
 import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
 import { detectOrphanedToolsAndGetWarning } from '@/lib/utils/orphaned-tools-detector';
 
@@ -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();
@@ -103,7 +117,7 @@ function Flow({
   const initialNodes = useMemo<Node[]>(
     () => [
       {
-        id: nanoid(),
+        id: generateId(),
         type: NodeType.SubAgent,
         position: { x: 0, y: 0 },
         data: { name: '', isDefault: true },
@@ -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,
@@ -422,7 +458,7 @@ function Flow({
         x: event.clientX,
         y: event.clientY,
       });
-      const nodeId = nanoid();
+      const nodeId = generateId();
       const newNode = {
         id: nodeId,
         type: nodeData.type,
@@ -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/playground/chat-widget.tsx

@@ -1,12 +1,12 @@
 'use client';
 import { InkeepEmbeddedChat } from '@inkeep/agents-ui';
 import type { ComponentsConfig, InkeepCallbackEvent } from '@inkeep/agents-ui/types';
-import { nanoid } from 'nanoid';
 import { useCallback, useEffect, useRef } from 'react';
 import { DynamicComponentRenderer } from '@/components/data-components/preview/dynamic-component-renderer';
 import type { ConversationDetail } from '@/components/traces/timeline/types';
 import { useRuntimeConfig } from '@/contexts/runtime-config-context';
 import type { DataComponent } from '@/lib/api/data-components';
+import { generateId } from '@/lib/utils/id-utils';
 import { IkpMessage as IkpMessageComponent } from './ikp-message';
 
 interface ChatWidgetProps {
@@ -205,7 +205,7 @@ export function ChatWidget({
                   stopPollingTimeoutRef.current = null;
                 }
                 stopPolling();
-                setConversationId(nanoid());
+                setConversationId(generateId());
               }
             },
             primaryBrandColor: '#3784ff',

package/src/components/agent/playground/playground.tsx

@@ -1,5 +1,4 @@
 import { Bug, X } from 'lucide-react';
-import { nanoid } from 'nanoid';
 import { useState } from 'react';
 import { toast } from 'sonner';
 import { TimelineWrapper } from '@/components/traces/timeline/timeline-wrapper';
@@ -7,6 +6,7 @@ import { Button } from '@/components/ui/button';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
 import { useChatActivitiesPolling } from '@/hooks/use-chat-activities-polling';
 import type { DataComponent } from '@/lib/api/data-components';
+import { generateId } from '@/lib/utils/id-utils';
 import { copyTraceToClipboard } from '@/lib/utils/trace-formatter';
 import { ChatWidget } from './chat-widget';
 import CustomHeadersDialog from './custom-headers-dialog';
@@ -28,7 +28,7 @@ export const Playground = ({
   setShowPlayground,
   dataComponentLookup = {},
 }: PlaygroundProps) => {
-  const [conversationId, setConversationId] = useState<string>(nanoid());
+  const [conversationId, setConversationId] = useState<string>(generateId());
   const [customHeaders, setCustomHeaders] = useState<Record<string, string>>({});
   const [showTraces, setShowTraces] = useState<boolean>(false);
   const [isCopying, setIsCopying] = useState(false);

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

package/src/components/agent/sidepane/metadata/metadata-editor.tsx

@@ -459,7 +459,7 @@ function MetadataEditor() {
                       <Checkbox
                         id="event-based-updates"
                         className="bg-background"
-                        checked={!!statusUpdates?.numEvents}
+                        checked={statusUpdates && 'numEvents' in statusUpdates}
                         onCheckedChange={(checked) => {
                           if (checked) {
                             updateMetadata('statusUpdates', {
@@ -480,7 +480,7 @@ function MetadataEditor() {
                       <Checkbox
                         id="time-based-updates"
                         className="bg-background"
-                        checked={!!statusUpdates?.timeInSeconds}
+                        checked={statusUpdates && 'timeInSeconds' in statusUpdates}
                         onCheckedChange={(checked) => {
                           if (checked) {
                             updateMetadata('statusUpdates', {
@@ -499,7 +499,7 @@ function MetadataEditor() {
                   </div>
                 </div>
 
-                {statusUpdates?.numEvents && (
+                {statusUpdates && 'numEvents' in statusUpdates && (
                   <div className="space-y-2">
                     <Label htmlFor="num-events">Number of events</Label>
                     <Input
@@ -524,7 +524,7 @@ function MetadataEditor() {
                   </div>
                 )}
 
-                {statusUpdates?.timeInSeconds && (
+                {statusUpdates && 'timeInSeconds' in statusUpdates && (
                   <div className="space-y-2">
                     <Label htmlFor="time-in-seconds">Time interval (seconds)</Label>
                     <Input

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

@@ -1,29 +1,71 @@
-import type { Node } from '@xyflow/react';
-import { useCallback } from 'react';
+import { type Node, useReactFlow } from '@xyflow/react';
+import { Trash2 } from 'lucide-react';
+import { useParams } from 'next/navigation';
+import { useCallback, useEffect, useState } from 'react';
 import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
+import { Button } from '@/components/ui/button';
+import { ExternalLink } from '@/components/ui/external-link';
+import { Separator } from '@/components/ui/separator';
+import { useAgentActions, useAgentStore } from '@/features/agent/state/use-agent-store';
 import type { ErrorHelpers } from '@/hooks/use-agent-errors';
 import { useAutoPrefillIdZustand } from '@/hooks/use-auto-prefill-id-zustand';
 import { useNodeEditor } from '@/hooks/use-node-editor';
 import type { Credential } from '@/lib/api/credentials';
+import { getCurrentHeadersForExternalAgentNode } from '@/lib/utils/external-agent-utils';
+import type { SubAgentExternalAgentConfigLookup } from '../../agent';
 import type { ExternalAgentNodeData } from '../../configuration/node-types';
-import { CredentialSelector } from './credential-selector';
 import { InputField, TextareaField } from './form-fields';
 
 interface ExternalAgentNodeEditorProps {
   selectedNode: Node<ExternalAgentNodeData>;
   credentialLookup: Record<string, Credential>;
+  subAgentExternalAgentConfigLookup: SubAgentExternalAgentConfigLookup;
   errorHelpers?: ErrorHelpers;
 }
 
 export function ExternalAgentNodeEditor({
   selectedNode,
-  credentialLookup,
+  subAgentExternalAgentConfigLookup,
   errorHelpers,
 }: ExternalAgentNodeEditorProps) {
-  const { handleInputChange, getFieldError, setFieldRef, updateField } = useNodeEditor({
+  const { updateNodeData } = useReactFlow();
+  const { markUnsaved } = useAgentActions();
+  const { handleInputChange, getFieldError, setFieldRef, updateField, deleteNode } = useNodeEditor({
     selectedNodeId: selectedNode.id,
     errorHelpers,
   });
+  const { tenantId, projectId } = useParams<{
+    tenantId: string;
+    projectId: string;
+  }>();
+  const handleHeadersChange = (value: string) => {
+    // Always update the input state (allows user to type invalid JSON)
+    setHeadersInputValue(value);
+
+    // Only save to node data if the JSON is valid
+    try {
+      const parsedHeaders = value.trim() === '' ? {} : JSON.parse(value);
+      if (
+        typeof parsedHeaders === 'object' &&
+        parsedHeaders !== null &&
+        !Array.isArray(parsedHeaders)
+      ) {
+        // Valid format - save to node data
+        updateNodeData(selectedNode.id, {
+          ...selectedNode.data,
+          tempHeaders: parsedHeaders,
+        });
+        markUnsaved();
+      }
+    } catch {
+      // Invalid JSON - don't save, but allow user to continue typing
+      // The ExpandableJsonEditor will show the validation error
+    }
+  };
+
+  const { edges } = useAgentStore((state) => ({
+    edges: state.edges,
+  }));
 
   const handleIdChange = useCallback(
     (generatedId: string) => {
@@ -40,6 +82,24 @@ export function ExternalAgentNodeEditor({
     isEditing: false,
   });
 
+  const getCurrentHeaders = useCallback((): Record<string, string> => {
+    return getCurrentHeadersForExternalAgentNode(
+      selectedNode,
+      subAgentExternalAgentConfigLookup,
+      edges
+    );
+  }, [selectedNode, subAgentExternalAgentConfigLookup, edges]);
+
+  // Local state for headers input (allows invalid JSON while typing)
+  const [headersInputValue, setHeadersInputValue] = useState('{}');
+
+  // Sync input value when node changes (but not on every data change)
+  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally omit getCurrentHeaders to prevent reset loops
+  useEffect(() => {
+    const newHeaders = getCurrentHeaders();
+    setHeadersInputValue(JSON.stringify(newHeaders, null, 2));
+  }, [selectedNode.id]);
+
   return (
     <div className="space-y-8 flex flex-col">
       <p className="text-sm text-muted-foreground">
@@ -56,6 +116,7 @@ export function ExternalAgentNodeEditor({
         value={selectedNode.data.name || ''}
         onChange={handleInputChange}
         placeholder="Support agent"
+        disabled
         error={getFieldError('name')}
       />
 
@@ -68,6 +129,7 @@ export function ExternalAgentNodeEditor({
         onChange={handleInputChange}
         placeholder="my-external-agent"
         error={getFieldError('id')}
+        disabled
         description="Choose a unique identifier for this agent. Using an existing id will replace that agent."
         isRequired
       />
@@ -81,6 +143,7 @@ export function ExternalAgentNodeEditor({
         onChange={handleInputChange}
         placeholder="This agent is responsible for..."
         error={getFieldError('description')}
+        disabled
       />
 
       <InputField
@@ -93,26 +156,28 @@ export function ExternalAgentNodeEditor({
         placeholder="https://api.example.com/agent"
         error={getFieldError('baseUrl')}
         tooltip="This URL is used to discover the agent's capabilities and communicate with it using the A2A protocol. For locally hosted agent defined with the agent-framework this would be: http://localhost:3002/tenants/:tenantId/projects/:projectId/agents/:agentId"
+        disabled
       />
       <ExpandableJsonEditor
         name="headers"
         label="Headers"
-        value={selectedNode.data.headers}
-        onChange={(value) => updateField('headers', value)}
+        value={headersInputValue}
+        onChange={handleHeadersChange}
         placeholder="{}"
         className=""
       />
-      <CredentialSelector
-        label="Credential"
-        credentialLookup={credentialLookup}
-        value={
-          typeof selectedNode.data.credentialReferenceId === 'string'
-            ? selectedNode.data.credentialReferenceId
-            : null
-        }
-        onValueChange={(value) => updateField('credentialReferenceId', value || '')}
-        placeholder="Select a credential"
-      />
+      <ExternalLink
+        href={`/${tenantId}/projects/${projectId}/external-agents/${selectedNode.data.id}/edit`}
+      >
+        Edit External Agent
+      </ExternalLink>
+      <Separator />
+      <div className="flex justify-end">
+        <Button variant="destructive-outline" size="sm" onClick={deleteNode}>
+          <Trash2 className="size-4" />
+          Delete
+        </Button>
+      </div>
     </div>
   );
 }

package/src/components/agent/sidepane/nodes/external-agent-selector/external-agent-item.tsx

@@ -0,0 +1,39 @@
+import { Globe } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import type { ExternalAgent } from '@/lib/types/external-agents';
+
+interface ExternalAgentItemProps {
+  externalAgent: ExternalAgent;
+  onClick: (externalAgent: ExternalAgent) => void;
+}
+
+export function ExternalAgentItem({ externalAgent, onClick }: ExternalAgentItemProps) {
+  const { id, name, description, baseUrl } = externalAgent;
+
+  return (
+    <Button
+      variant="unstyled"
+      size="unstyled"
+      type="button"
+      key={id}
+      className="w-full p-3 rounded-lg border cursor-pointer transition-colors border-border hover:bg-muted/50 text-left inline-block"
+      id={id}
+      onClick={() => onClick(externalAgent)}
+    >
+      <div className="flex items-start gap-3">
+        <div className="flex-shrink-0 mt-0.5 size-8 rounded bg-muted flex items-center justify-center">
+          <Globe className="size-4 text-muted-foreground" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between mb-1 gap-2 min-w-0 truncate">
+            <span className="font-medium text-sm truncate">{name}</span>
+          </div>
+          {description && (
+            <p className="text-xs text-muted-foreground truncate mb-1">{description}</p>
+          )}
+          <p className="text-xs text-muted-foreground/70 truncate">{baseUrl}</p>
+        </div>
+      </div>
+    </Button>
+  );
+}