@inkeep/agents-manage-ui 0.24.1 → 0.25.0

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,9 @@
 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,
   InheritanceIndicator,
@@ -64,11 +67,19 @@ export function SubAgentNodeEditor({
   }>();
   const selectedDataComponents = selectedNode.data?.dataComponents || [];
   const selectedArtifactComponents = selectedNode.data?.artifactComponents || [];
+  const isDefaultSubAgent = selectedNode.data?.isDefault || false;
 
   const { project } = useProjectData();
   const metadata = useAgentStore((state) => state.metadata);
 
-  const { updatePath, updateNestedPath, getFieldError, setFieldRef } = useNodeEditor({
+  const {
+    updatePath,
+    updateNestedPath,
+    getFieldError,
+    setFieldRef,
+    updateDefaultSubAgent,
+    deleteNode,
+  } = useNodeEditor({
     selectedNodeId: selectedNode.id,
     errorHelpers,
   });
@@ -146,6 +157,21 @@ export function SubAgentNodeEditor({
           <p className="text-sm text-red-600">{getFieldError('prompt')}</p>
         )}
       </div>
+      <div className="space-y-2">
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="is-default-sub-agent"
+            checked={isDefaultSubAgent}
+            onCheckedChange={(checked) => {
+              updateDefaultSubAgent(checked === true);
+            }}
+          />
+          <Label htmlFor="is-default-sub-agent">Is default sub agent</Label>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          The default sub agent is the initial entry point for conversations.
+        </p>
+      </div>
       <Separator />
       <ModelSection
         models={selectedNode.data.models}
@@ -225,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/artifact-components/delete-artifact-component-confirmation.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useParams } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'sonner';
 import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
@@ -10,14 +10,17 @@ interface DeleteArtifactComponentConfirmationProps {
   artifactComponentId: string;
   artifactComponentName?: string;
   setIsOpen: (isOpen: boolean) => void;
+  redirectOnDelete?: boolean;
 }
 
 export function DeleteArtifactComponentConfirmation({
   artifactComponentId,
   artifactComponentName,
   setIsOpen,
+  redirectOnDelete = false,
 }: DeleteArtifactComponentConfirmationProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const router = useRouter();
   const { tenantId, projectId } = useParams<{
     tenantId: string;
     projectId: string;
@@ -30,6 +33,9 @@ export function DeleteArtifactComponentConfirmation({
       if (result.success) {
         setIsOpen(false);
         toast.success('Artifact deleted.');
+        if (redirectOnDelete) {
+          router.push(`/${tenantId}/projects/${projectId}/artifacts`);
+        }
       } else {
         toast.error(result.error);
       }

package/src/components/artifact-components/form/artifact-component-form.tsx

@@ -2,12 +2,14 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { GenericInput } from '@/components/form/generic-input';
 import { GenericTextarea } from '@/components/form/generic-textarea';
 import { JsonSchemaInput } from '@/components/form/json-schema-input';
 import { Button } from '@/components/ui/button';
+import { Dialog, DialogTrigger } from '@/components/ui/dialog';
 import { Form } from '@/components/ui/form';
 import { useAutoPrefillId } from '@/hooks/use-auto-prefill-id';
 import {
@@ -16,6 +18,7 @@ import {
 } from '@/lib/actions/artifact-components';
 import type { ArtifactComponent } from '@/lib/api/artifact-components';
 import { formatJsonField } from '@/lib/utils';
+import { DeleteArtifactComponentConfirmation } from '../delete-artifact-component-confirmation';
 import { defaultValues } from './form-configuration';
 import { type ArtifactComponentFormData, artifactComponentSchema } from './validation';
 
@@ -43,6 +46,7 @@ export function ArtifactComponentForm({
   projectId,
   initialData,
 }: ArtifactComponentFormProps) {
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const form = useForm<ArtifactComponentFormData>({
     resolver: zodResolver(artifactComponentSchema),
     defaultValues: formatFormData(initialData),
@@ -92,47 +96,66 @@ export function ArtifactComponentForm({
   };
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <GenericInput
-          control={form.control}
-          name="name"
-          label="Name"
-          placeholder="Document Artifact"
-          isRequired
+    <Dialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          <GenericInput
+            control={form.control}
+            name="name"
+            label="Name"
+            placeholder="Document Artifact"
+            isRequired
+          />
+          <GenericInput
+            control={form.control}
+            name="id"
+            label="Id"
+            placeholder="my-artifact"
+            disabled={!!id}
+            isRequired
+            description={
+              id
+                ? ''
+                : 'Choose a unique identifier for this artifact. Using an existing id will replace that artifact.'
+            }
+          />
+          <GenericTextarea
+            control={form.control}
+            name="description"
+            label="Description"
+            placeholder="Structured factual information extracted from search results"
+            className="min-h-[80px]"
+            isRequired
+          />
+          <JsonSchemaInput
+            control={form.control}
+            name="props"
+            label="Props (JSON schema with inPreview indicators)"
+            placeholder="Enter a valid JSON Schema with inPreview flags, or leave empty to save entire tool result..."
+            description="Optional: Define specific fields with inPreview flags, or leave empty to capture the complete tool response."
+          />
+          <div className="flex w-full justify-between">
+            <Button type="submit" disabled={isSubmitting}>
+              Save
+            </Button>
+            {id && (
+              <DialogTrigger asChild>
+                <Button type="button" variant="secondary">
+                  Delete Artifact
+                </Button>
+              </DialogTrigger>
+            )}
+          </div>
+        </form>
+      </Form>
+      {isDeleteOpen && id && (
+        <DeleteArtifactComponentConfirmation
+          artifactComponentId={id}
+          artifactComponentName={form.getValues('name')}
+          setIsOpen={setIsDeleteOpen}
+          redirectOnDelete={true}
         />
-        <GenericInput
-          control={form.control}
-          name="id"
-          label="Id"
-          placeholder="my-artifact"
-          disabled={!!id}
-          isRequired
-          description={
-            id
-              ? ''
-              : 'Choose a unique identifier for this artifact. Using an existing id will replace that artifact.'
-          }
-        />
-        <GenericTextarea
-          control={form.control}
-          name="description"
-          label="Description"
-          placeholder="Structured factual information extracted from search results"
-          className="min-h-[80px]"
-          isRequired
-        />
-        <JsonSchemaInput
-          control={form.control}
-          name="props"
-          label="Props (JSON schema with inPreview indicators)"
-          placeholder="Enter a valid JSON Schema with inPreview flags, or leave empty to save entire tool result..."
-          description="Optional: Define specific fields with inPreview flags, or leave empty to capture the complete tool response."
-        />
-        <Button type="submit" disabled={isSubmitting}>
-          Save
-        </Button>
-      </form>
-    </Form>
+      )}
+    </Dialog>
   );
 }

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