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

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

package/src/components/credentials/views/credential-form-validation.ts

@@ -12,6 +12,7 @@ export const credentialFormSchema = z.object({
   credentialStoreId: z.string().min(1, 'Please select a credential store'),
   credentialStoreType: z.enum(CredentialStoreType),
   selectedTool: z.string().optional(),
+  selectedExternalAgent: z.string().optional(),
 });
 
 export type CredentialFormData = z.output<typeof credentialFormSchema>;

package/src/components/credentials/views/credential-form.tsx

@@ -12,11 +12,10 @@ import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Form } from '@/components/ui/form';
 import { InfoCard } from '@/components/ui/info-card';
-import {
-  type CredentialStoreStatus,
-  listCredentialStores,
-} from '@/lib/api/credentialStores';
+import { type CredentialStoreStatus, listCredentialStores } from '@/lib/api/credentialStores';
+import { fetchExternalAgents } from '@/lib/api/external-agents';
 import { fetchMCPTools } from '@/lib/api/tools';
+import type { ExternalAgent } from '@/lib/types/external-agents';
 import type { MCPTool } from '@/lib/types/tools';
 import { type CredentialFormData, credentialFormSchema } from './credential-form-validation';
 
@@ -36,12 +35,16 @@ const defaultValues: CredentialFormData = {
   credentialStoreId: '',
   credentialStoreType: 'nango',
   selectedTool: undefined,
+  selectedExternalAgent: undefined,
 };
 
 export function CredentialForm({ onCreateCredential, tenantId, projectId }: CredentialFormProps) {
   const [availableMCPServers, setAvailableMCPServers] = useState<MCPTool[]>([]);
   const [toolsLoading, setToolsLoading] = useState(true);
   const [shouldLinkToServer, setShouldLinkToServer] = useState(false);
+  const [availableExternalAgents, setAvailableExternalAgents] = useState<ExternalAgent[]>([]);
+  const [externalAgentsLoading, setExternalAgentsLoading] = useState(true);
+  const [shouldLinkToExternalAgent, setShouldLinkToExternalAgent] = useState(false);
   const [credentialStores, setCredentialStores] = useState<CredentialStoreStatus[]>([]);
   const [storesLoading, setStoresLoading] = useState(true);
 
@@ -68,6 +71,24 @@ export function CredentialForm({ onCreateCredential, tenantId, projectId }: Cred
     loadAvailableTools();
   }, [tenantId, projectId]);
 
+  useEffect(() => {
+    const loadAvailableExternalAgents = async () => {
+      try {
+        const allExternalAgents = await fetchExternalAgents(tenantId, projectId);
+        const externalAgentsWithoutCredentials = allExternalAgents.filter(
+          (agent) => !agent.credentialReferenceId
+        );
+        setAvailableExternalAgents(externalAgentsWithoutCredentials);
+      } catch (err) {
+        console.error('Failed to load external agents:', err);
+      } finally {
+        setExternalAgentsLoading(false);
+      }
+    };
+
+    loadAvailableExternalAgents();
+  }, [tenantId, projectId]);
+
   useEffect(() => {
     const loadCredentialStores = async () => {
       try {
@@ -87,7 +108,9 @@ export function CredentialForm({ onCreateCredential, tenantId, projectId }: Cred
           const currentStoreId = form.getValues('credentialStoreId');
           if (!currentStoreId) {
             form.setValue('credentialStoreId', preferredStore.id, { shouldValidate: true });
-            form.setValue('credentialStoreType', preferredStore.type as 'keychain' | 'nango', { shouldValidate: true });
+            form.setValue('credentialStoreType', preferredStore.type as 'keychain' | 'nango', {
+              shouldValidate: true,
+            });
           }
         }
       } catch (err) {
@@ -108,6 +131,13 @@ export function CredentialForm({ onCreateCredential, tenantId, projectId }: Cred
     }
   }, [shouldLinkToServer, form]);
 
+  useEffect(() => {
+    if (!shouldLinkToExternalAgent) {
+      // Clear the selectedExternalAgent field when not linking to external agent
+      form.setValue('selectedExternalAgent', undefined);
+    }
+  }, [shouldLinkToExternalAgent, form]);
+
   useEffect(() => {
     const subscription = form.watch((value: any, { name }: any) => {
       if (name === 'credentialStoreId' && value.credentialStoreId) {
@@ -126,6 +156,10 @@ export function CredentialForm({ onCreateCredential, tenantId, projectId }: Cred
     setShouldLinkToServer(checked === true);
   };
 
+  const handleLinkToExternalAgentChange = (checked: boolean | 'indeterminate') => {
+    setShouldLinkToExternalAgent(checked === true);
+  };
+
   const onSubmit = async (data: CredentialFormData) => {
     try {
       if (
@@ -136,6 +170,14 @@ export function CredentialForm({ onCreateCredential, tenantId, projectId }: Cred
         return;
       }
 
+      if (
+        shouldLinkToExternalAgent &&
+        (data.selectedExternalAgent === 'loading' || data.selectedExternalAgent === 'error')
+      ) {
+        toast('Please select a valid external agent');
+        return;
+      }
+
       await onCreateCredential(data);
     } catch (err) {
       console.error('Failed to create credential:', err);
@@ -162,6 +204,25 @@ export function CredentialForm({ onCreateCredential, tenantId, projectId }: Cred
     [availableMCPServers, toolsLoading]
   );
 
+  const externalAgentOptions = useMemo(
+    () => [
+      ...(externalAgentsLoading
+        ? [
+            {
+              value: 'loading',
+              label: 'Loading external agents...',
+              disabled: true,
+            },
+          ]
+        : []),
+      ...availableExternalAgents.map((agent) => ({
+        value: agent.id,
+        label: `${agent.name} - ${agent.baseUrl}`,
+      })),
+    ],
+    [availableExternalAgents, externalAgentsLoading]
+  );
+
   const credentialStoreOptions = useMemo(() => {
     if (storesLoading) {
       return [
@@ -298,6 +359,36 @@ export function CredentialForm({ onCreateCredential, tenantId, projectId }: Cred
               )}
             </div>
           )}
+
+          {/* External Agent Selection Section */}
+          {availableExternalAgents.length > 0 && (
+            <div className="space-y-4">
+              <div className="flex items-center space-x-3 relative">
+                <Checkbox
+                  id="linkToExternalAgent"
+                  checked={shouldLinkToExternalAgent}
+                  onCheckedChange={handleLinkToExternalAgentChange}
+                />
+                <label
+                  htmlFor="linkToExternalAgent"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  Link this credential to an external agent
+                </label>
+              </div>
+
+              {shouldLinkToExternalAgent && (
+                <GenericSelect
+                  control={form.control}
+                  name="selectedExternalAgent"
+                  label=""
+                  options={externalAgentOptions}
+                  selectTriggerClassName="w-full"
+                  placeholder="Choose an external agent"
+                />
+              )}
+            </div>
+          )}
         </div>
 
         <div className="flex gap-3 pt-4">

package/src/components/credentials/views/edit-credential-form.tsx

@@ -7,7 +7,7 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
-import { CredentialToolsList } from '@/components/credentials/credential-tools-list';
+import { CredentialResourcesList } from '@/components/credentials/credential-resources-list';
 import { GenericInput } from '@/components/form/generic-input';
 import { GenericKeyValueInput } from '@/components/form/generic-key-value-input';
 import { Button } from '@/components/ui/button';
@@ -183,9 +183,10 @@ export function EditCredentialForm({
               </div>
             )}
 
-            {/* MCP Servers Using This Credential */}
-            <CredentialToolsList
+            {/* Resources Using This Credential */}
+            <CredentialResourcesList
               tools={credential.tools}
+              externalAgents={credential.externalAgents}
               tenantId={tenantId}
               projectId={projectId}
             />

package/src/components/credentials/views/new-credential-form.tsx

@@ -6,6 +6,7 @@ import { useParams, useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 import type { CredentialFormData } from '@/components/credentials/views/credential-form-validation';
 import { createCredentialInStore } from '@/lib/api/credentialStores';
+import { updateExternalAgent } from '@/lib/api/external-agents';
 import { updateMCPTool } from '@/lib/api/tools';
 import { createNangoApiKeyConnection } from '@/lib/mcp-tools/nango';
 import { findOrCreateCredential } from '@/lib/utils/credentials-utils';
@@ -72,6 +73,18 @@ export function NewCredentialForm() {
         await updateMCPTool(tenantId, projectId, data.selectedTool, updatedTool);
       }
 
+      if (data.selectedExternalAgent && newCredential) {
+        const updatedExternalAgent = {
+          credentialReferenceId: newCredential.id,
+        };
+        await updateExternalAgent(
+          tenantId,
+          projectId,
+          data.selectedExternalAgent,
+          updatedExternalAgent
+        );
+      }
+
       toast.success('Credential created successfully');
       router.push(`/${tenantId}/projects/${projectId}/credentials`);
     } catch (error) {