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

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

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

@@ -0,0 +1,114 @@
+import { type Node, useReactFlow } from '@xyflow/react';
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { fetchExternalAgents } from '@/lib/api/external-agents';
+import type { ExternalAgent } from '@/lib/types/external-agents';
+import { NodeType } from '../../../configuration/node-types';
+import { EmptyState } from '../empty-state';
+import { ExternalAgentItem } from './external-agent-item';
+import { ExternalAgentSelectorLoading } from './loading';
+
+interface ExternalAgentSelectorState {
+  externalAgents: ExternalAgent[];
+  isLoading: boolean;
+  error: string | null;
+}
+
+const useFetchAvailableExternalAgents = (): ExternalAgentSelectorState => {
+  const [externalAgents, setExternalAgents] = useState<ExternalAgent[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const { tenantId, projectId } = useParams<{
+    tenantId: string;
+    projectId: string;
+  }>();
+
+  useEffect(() => {
+    const loadExternalAgents = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const agents = await fetchExternalAgents(tenantId, projectId);
+        setExternalAgents(agents);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to load external agents';
+        setError(errorMessage);
+        toast.error(errorMessage);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadExternalAgents();
+  }, [tenantId, projectId]);
+
+  return { externalAgents, isLoading, error };
+};
+
+export function ExternalAgentSelector({ selectedNode }: { selectedNode: Node }) {
+  const { updateNode } = useReactFlow();
+  const { tenantId, projectId } = useParams<{
+    tenantId: string;
+    projectId: string;
+  }>();
+  const { externalAgents, isLoading, error } = useFetchAvailableExternalAgents();
+
+  const handleSelect = (externalAgent: ExternalAgent) => {
+    updateNode(selectedNode.id, {
+      type: NodeType.ExternalAgent,
+      data: {
+        id: externalAgent.id,
+        name: externalAgent.name,
+        description: externalAgent.description,
+        baseUrl: externalAgent.baseUrl,
+        createdAt: externalAgent.createdAt,
+        updatedAt: externalAgent.updatedAt,
+        credentialReferenceId: externalAgent.credentialReferenceId,
+        relationshipId: null, // Will be set after saving to database
+        tempHeaders: null,
+      },
+    });
+  };
+
+  if (isLoading) {
+    return <ExternalAgentSelectorLoading title="Select external agent" />;
+  }
+
+  if (error) {
+    return (
+      <EmptyState
+        message="Something went wrong."
+        actionText="Create external agent"
+        actionHref={`/${tenantId}/projects/${projectId}/external-agents/new`}
+      />
+    );
+  }
+
+  if (!externalAgents?.length) {
+    return (
+      <EmptyState
+        message="No external agents found."
+        actionText="Create external agent"
+        actionHref={`/${tenantId}/projects/${projectId}/external-agents/new`}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium mb-2">Select external agent</h3>
+        <div className="flex flex-col gap-2 min-w-0 min-h-0">
+          {externalAgents.map((externalAgent: ExternalAgent) => (
+            <ExternalAgentItem
+              key={externalAgent.id}
+              externalAgent={externalAgent}
+              onClick={handleSelect}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface ExternalAgentSelectorLoadingProps {
+  title: string;
+}
+
+export function ExternalAgentSelectorLoading({ title }: ExternalAgentSelectorLoadingProps) {
+  return (
+    <div className="space-y-2">
+      <h3 className="text-sm font-medium mb-2">{title}</h3>
+      <div className="flex flex-col gap-2">
+        {[...Array(3)].map((_, index) => (
+          <div key={index} className="w-full p-3 rounded-lg border border-border">
+            <div className="flex items-start gap-3">
+              <Skeleton className="size-8 rounded flex-shrink-0" />
+              <div className="flex-1 min-w-0 space-y-2">
+                <Skeleton className="h-4 w-3/4" />
+                <Skeleton className="h-3 w-1/2" />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -1,6 +1,9 @@
 import type { Node } from '@xyflow/react';
+import { Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { StandaloneJsonEditor } from '@/components/form/standalone-json-editor';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
 import { useNodeEditor } from '@/hooks/use-node-editor';
 import type { FunctionToolNodeData } from '../../configuration/node-types';
 import { ExpandableTextArea } from './expandable-text-area';
@@ -11,7 +14,7 @@ interface FunctionToolNodeEditorProps {
 }
 
 export function FunctionToolNodeEditor({ selectedNode }: FunctionToolNodeEditorProps) {
-  const { getFieldError, setFieldRef, updatePath } = useNodeEditor({
+  const { getFieldError, setFieldRef, updatePath, deleteNode } = useNodeEditor({
     selectedNodeId: selectedNode.id,
   });
 
@@ -198,6 +201,13 @@ export function FunctionToolNodeEditor({ selectedNode }: FunctionToolNodeEditorP
           <p className="text-sm text-red-600">{getFieldError('dependencies')}</p>
         )}
       </div>
+      <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/mcp-node-editor.tsx

@@ -1,16 +1,19 @@
 import { type Node, useReactFlow } from '@xyflow/react';
-import { Check, CircleAlert } from 'lucide-react';
+import { Check, CircleAlert, Trash2 } from 'lucide-react';
 import { useParams } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
 import { getActiveTools } from '@/app/utils/active-tools';
 import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
 import { MCPToolImage } from '@/components/mcp-servers/mcp-tool-image';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { ExternalLink } from '@/components/ui/external-link';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useAgentActions, useAgentStore } from '@/features/agent/state/use-agent-store';
+import { useNodeEditor } from '@/hooks/use-node-editor';
 import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
 import {
   getCurrentHeadersForNode,
@@ -28,7 +31,11 @@ export function MCPServerNodeEditor({
   selectedNode,
   agentToolConfigLookup,
 }: MCPServerNodeEditorProps) {
+  const { deleteNode } = useNodeEditor({
+    selectedNodeId: selectedNode.id,
+  });
   const { updateNodeData } = useReactFlow();
+
   const { tenantId, projectId } = useParams<{
     tenantId: string;
     projectId: string;
@@ -309,6 +316,13 @@ export function MCPServerNodeEditor({
       >
         Edit MCP Server
       </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/sub-agent-node-editor.tsx

@@ -1,6 +1,8 @@
 import type { Node } from '@xyflow/react';
+import { Trash2 } from 'lucide-react';
 import { useParams } from 'next/navigation';
 import { useCallback } from 'react';
+import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
   getExecutionLimitInheritanceStatus,
@@ -70,11 +72,17 @@ export function SubAgentNodeEditor({
   const { project } = useProjectData();
   const metadata = useAgentStore((state) => state.metadata);
 
-  const { updatePath, updateNestedPath, getFieldError, setFieldRef, updateDefaultSubAgent } =
-    useNodeEditor({
-      selectedNodeId: selectedNode.id,
-      errorHelpers,
-    });
+  const {
+    updatePath,
+    updateNestedPath,
+    getFieldError,
+    setFieldRef,
+    updateDefaultSubAgent,
+    deleteNode,
+  } = useNodeEditor({
+    selectedNodeId: selectedNode.id,
+    errorHelpers,
+  });
 
   const updateModelPath = useCallback(
     (path: string, value: any) => {
@@ -243,6 +251,17 @@ export function SubAgentNodeEditor({
         emptyStateActionHref={`/${tenantId}/projects/${projectId}/artifacts/new`}
         placeholder="Select artifacts..."
       />
+      {!isDefaultSubAgent && (
+        <>
+          <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/sidepane.tsx

@@ -7,7 +7,7 @@ import type { ArtifactComponent } from '@/lib/api/artifact-components';
 import type { Credential } from '@/lib/api/credentials';
 import type { DataComponent } from '@/lib/api/data-components';
 import { SidePane as SidePaneLayout } from '../../layout/sidepane';
-import type { AgentToolConfigLookup } from '../agent';
+import type { AgentToolConfigLookup, SubAgentExternalAgentConfigLookup } from '../agent';
 import { edgeTypeMap } from '../configuration/edge-types';
 import {
   type AgentNodeData,
@@ -22,6 +22,7 @@ import { EditorLoadingSkeleton } from './editor-loading-skeleton';
 import { Heading } from './heading';
 import MetadataEditor from './metadata/metadata-editor';
 import { ExternalAgentNodeEditor } from './nodes/external-agent-node-editor';
+import { ExternalAgentSelector } from './nodes/external-agent-selector/external-agent-selector';
 import { FunctionToolNodeEditor } from './nodes/function-tool-node-editor';
 import { MCPServerNodeEditor } from './nodes/mcp-node-editor';
 import { MCPSelector } from './nodes/mcp-selector/mcp-selector';
@@ -36,6 +37,7 @@ interface SidePaneProps {
   dataComponentLookup: Record<string, DataComponent>;
   artifactComponentLookup: Record<string, ArtifactComponent>;
   agentToolConfigLookup: AgentToolConfigLookup;
+  subAgentExternalAgentConfigLookup: SubAgentExternalAgentConfigLookup;
   credentialLookup: Record<string, Credential>;
 }
 
@@ -48,6 +50,7 @@ export function SidePane({
   dataComponentLookup,
   artifactComponentLookup,
   agentToolConfigLookup,
+  subAgentExternalAgentConfigLookup,
   credentialLookup,
 }: SidePaneProps) {
   const selectedNode = useNodesData(selectedNodeId || '');
@@ -114,10 +117,14 @@ export function SidePane({
             <ExternalAgentNodeEditor
               selectedNode={selectedNode as Node<ExternalAgentNodeData>}
               credentialLookup={credentialLookup}
+              subAgentExternalAgentConfigLookup={subAgentExternalAgentConfigLookup}
               errorHelpers={errorHelpers}
             />
           );
         }
+        case NodeType.ExternalAgentPlaceholder: {
+          return <ExternalAgentSelector selectedNode={selectedNode as Node} />;
+        }
         case NodeType.MCPPlaceholder: {
           return <MCPSelector selectedNode={selectedNode as Node} />;
         }
@@ -154,6 +161,7 @@ export function SidePane({
     getFirstErrorField,
     agentToolConfigLookup,
     credentialLookup,
+    subAgentExternalAgentConfigLookup,
   ]);
 
   const showBackButton = useMemo(() => {

package/src/components/credentials/credential-resources-list.tsx

@@ -0,0 +1,146 @@
+import type { ExternalAgentApiSelect, McpTool } from '@inkeep/agents-core';
+import Link from 'next/link';
+import { Label } from '@/components/ui/label';
+
+interface CredentialResourcesListProps {
+  tools?: McpTool[];
+  externalAgents?: ExternalAgentApiSelect[];
+  label?: string;
+  tenantId?: string;
+  projectId?: string;
+}
+
+interface ToolItemProps {
+  tool: McpTool;
+  tenantId?: string;
+  projectId?: string;
+}
+
+interface ExternalAgentItemProps {
+  externalAgent: ExternalAgentApiSelect;
+  tenantId?: string;
+  projectId?: string;
+}
+
+function ToolItem({ tool, tenantId, projectId }: ToolItemProps) {
+  const canNavigate = tenantId && projectId;
+  const href = canNavigate
+    ? `/${tenantId}/projects/${projectId}/mcp-servers/${tool.id}`
+    : undefined;
+
+  const content = (
+    <>
+      <div className="flex items-center gap-3">
+        <div>
+          <p className="font-medium text-sm">{tool.name}</p>
+          <p className="text-xs text-muted-foreground">
+            {tool.config.type === 'mcp' ? tool.config.mcp.server.url : ''}
+          </p>
+        </div>
+      </div>
+    </>
+  );
+
+  if (canNavigate && href) {
+    return (
+      <Link
+        href={href}
+        className="flex items-center justify-between p-3 bg-background border rounded-md hover:bg-muted/50 transition-colors cursor-pointer"
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-between p-3 bg-background border rounded-md">
+      {content}
+    </div>
+  );
+}
+
+function ExternalAgentItem({ externalAgent, tenantId, projectId }: ExternalAgentItemProps) {
+  const canNavigate = tenantId && projectId;
+  const href = canNavigate
+    ? `/${tenantId}/projects/${projectId}/external-agents/${externalAgent.id}`
+    : undefined;
+
+  const content = (
+    <>
+      <div className="flex items-center gap-3">
+        <div>
+          <p className="font-medium text-sm">{externalAgent.name}</p>
+          <p className="text-xs text-muted-foreground">{externalAgent.baseUrl}</p>
+        </div>
+      </div>
+    </>
+  );
+
+  if (canNavigate && href) {
+    return (
+      <Link
+        href={href}
+        className="flex items-center justify-between p-3 bg-background border rounded-md hover:bg-muted/50 transition-colors cursor-pointer"
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-between p-3 bg-background border rounded-md">
+      {content}
+    </div>
+  );
+}
+
+export function CredentialResourcesList({
+  tools,
+  externalAgents,
+  label = 'Resources using this credential',
+  tenantId,
+  projectId,
+}: CredentialResourcesListProps) {
+  const hasTools = tools && tools.length > 0;
+  const hasExternalAgents = externalAgents && externalAgents.length > 0;
+  const hasAnyResources = hasTools || hasExternalAgents;
+
+  return (
+    <div className="space-y-3">
+      <Label>{label}</Label>
+      {hasAnyResources ? (
+        <div className="space-y-4">
+          {hasTools && (
+            <div className="space-y-2">
+              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                MCP Servers
+              </p>
+              {tools.map((tool) => (
+                <ToolItem key={tool.id} tool={tool} tenantId={tenantId} projectId={projectId} />
+              ))}
+            </div>
+          )}
+          {hasExternalAgents && (
+            <div className="space-y-2">
+              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                External Agents
+              </p>
+              {externalAgents.map((agent) => (
+                <ExternalAgentItem
+                  key={agent.id}
+                  externalAgent={agent}
+                  tenantId={tenantId}
+                  projectId={projectId}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="text-sm text-muted-foreground p-3 py-2 bg-gray-100/80 dark:bg-sidebar rounded-md">
+          No resources are currently using this credential
+        </div>
+      )}
+    </div>
+  );
+}