@inkeep/agents-manage-ui 0.24.1 → 0.25.0

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

@@ -1,6 +1,7 @@
+import type { McpTool } from '@inkeep/agents-core';
 import Link from 'next/link';
 import { Label } from '@/components/ui/label';
-import type { McpTool } from '@inkeep/agents-core';
+import { InfoCard } from '../ui/info-card';
 
 interface CredentialToolsListProps {
   tools?: McpTool[];
@@ -68,9 +69,9 @@ export function CredentialToolsList({
           ))}
         </div>
       ) : (
-        <div className="text-sm text-muted-foreground p-3 py-2 bg-gray-100/80 dark:bg-sidebar rounded-md">
-          No MCP servers are currently using this credential
-        </div>
+        <InfoCard>
+          <p>No MCP servers are currently using this credential</p>
+        </InfoCard>
       )}
     </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 [
@@ -239,7 +300,7 @@ export function CredentialForm({ onCreateCredential, tenantId, projectId }: Cred
                 keyPlaceholder="Header name (e.g., X-API-Key)"
                 valuePlaceholder="Header value"
               />
-              <InfoCard title="Additional headers">
+              <InfoCard title="How this works">
                 <p className="mb-2">
                   Add extra headers to be included with authentication requests.
                 </p>
@@ -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

@@ -3,17 +3,21 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { CredentialStoreType } from '@inkeep/agents-core/client-exports';
 import { useRouter } from 'next/navigation';
+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';
+import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
+import { Dialog, DialogTrigger } from '@/components/ui/dialog';
 import { Form } from '@/components/ui/form';
 import { InfoCard } from '@/components/ui/info-card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { deleteCredentialAction } from '@/lib/actions/credentials';
 import { type Credential, updateCredential } from '@/lib/api/credentials';
 import { setNangoConnectionMetadata } from '@/lib/mcp-tools/nango';
 
@@ -55,6 +59,8 @@ export function EditCredentialForm({
   initialFormData,
 }: EditCredentialFormProps) {
   const router = useRouter();
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
 
   const form = useForm({
     resolver: zodResolver(editCredentialFormSchema),
@@ -97,79 +103,116 @@ export function EditCredentialForm({
     await handleUpdateCredential(data);
   };
 
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      const result = await deleteCredentialAction(tenantId, projectId, credential.id);
+      if (result.success) {
+        setIsDeleteOpen(false);
+        toast.success('Credential deleted.');
+        router.push(`/${tenantId}/projects/${projectId}/credentials`);
+      } else {
+        toast.error(result.error);
+      }
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        {/* Credential Details Section */}
-        <div className="space-y-8">
-          <GenericInput
-            control={form.control}
-            name="name"
-            label="Name"
-            placeholder="e.g., production-api-key"
-            disabled={true}
-          />
-
-          {/* Credential Type Display */}
-          <div className="space-y-3">
-            <Label>Credential type</Label>
-            <Input type="text" disabled={true} value={getCredentialType(credential)} />
-            {getCredentialType(credential) === 'Bearer Auth' && (
-              <InfoCard title="How this works">
-                <p>
-                  When your agent connects to the MCP server, this API key will be automatically
-                  sent as an authentication header:
-                </p>
-                <p className="my-2">
-                  <code className="bg-background px-1.5 py-0.5 rounded border">
-                    Authorization: Bearer your-api-key-here
-                  </code>
-                </p>
-                <p>This ensures secure access to the server's tools and data.</p>
-              </InfoCard>
+    <Dialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          {/* Credential Details Section */}
+          <div className="space-y-8">
+            <GenericInput
+              control={form.control}
+              name="name"
+              label="Name"
+              placeholder="e.g., production-api-key"
+              disabled={true}
+            />
+
+            {/* Credential Type Display */}
+            <div className="space-y-3">
+              <Label>Credential type</Label>
+              <Input type="text" disabled={true} value={getCredentialType(credential)} />
+              {getCredentialType(credential) === 'Bearer Auth' && (
+                <InfoCard title="How this works">
+                  <p>
+                    When your agent connects to the MCP server, this API key will be automatically
+                    sent as an authentication header:
+                  </p>
+                  <p className="my-2">
+                    <code className="bg-background px-1.5 py-0.5 rounded border">
+                      Authorization: Bearer your-api-key-here
+                    </code>
+                  </p>
+                  <p>This ensures secure access to the server's tools and data.</p>
+                </InfoCard>
+              )}
+            </div>
+
+            {/* Metadata / Headers Section */}
+            {credential.type === CredentialStoreType.nango && (
+              <div className="space-y-3">
+                <GenericKeyValueInput
+                  control={form.control}
+                  name="metadata"
+                  label="Headers (optional)"
+                  keyPlaceholder="Header name (e.g., X-API-Key)"
+                  valuePlaceholder="Header value"
+                />
+                <InfoCard title="How this works">
+                  <p className="mb-2">
+                    Add extra headers to be included with authentication requests.
+                  </p>
+                  <p>
+                    Examples:{' '}
+                    <code className="bg-background px-1.5 py-0.5 rounded border mx-1">
+                      User-Agent
+                    </code>
+                    <code className="bg-background px-1.5 py-0.5 rounded border mx-1">
+                      X-API-Key
+                    </code>
+                    <code className="bg-background px-1.5 py-0.5 rounded border mx-1">
+                      Content-Type
+                    </code>
+                  </p>
+                </InfoCard>
+              </div>
             )}
+
+            {/* Resources Using This Credential */}
+            <CredentialResourcesList
+              tools={credential.tools}
+              externalAgents={credential.externalAgents}
+              tenantId={tenantId}
+              projectId={projectId}
+            />
           </div>
 
-          {/* Metadata Section */}
-          {credential.type === CredentialStoreType.nango && (
-            <div className="space-y-3">
-              <GenericKeyValueInput
-                control={form.control}
-                name="metadata"
-                label="Metadata (optional)"
-                keyPlaceholder="Header name (e.g., X-API-Key)"
-                valuePlaceholder="Header value"
-              />
-              <div className="text-xs text-muted-foreground p-3 bg-muted/30 rounded-md">
-                <p className="mb-2">
-                  Add extra headers to be included with authentication requests.
-                </p>
-                <p>
-                  Examples:{' '}
-                  <code className="bg-background px-1.5 py-0.5 rounded border mx-1">
-                    User-Agent
-                  </code>
-                  <code className="bg-background px-1.5 py-0.5 rounded border mx-1">X-API-Key</code>
-                  <code className="bg-background px-1.5 py-0.5 rounded border mx-1">
-                    Content-Type
-                  </code>
-                </p>
-              </div>
-            </div>
-          )}
-
-          {/* MCP Servers Using This Credential */}
-          <CredentialToolsList tools={credential.tools} tenantId={tenantId} projectId={projectId} />
-        </div>
-
-        <div className="flex gap-3 pt-4">
-          {credential.type === CredentialStoreType.nango && (
-            <Button type="submit" disabled={isSubmitting}>
-              Save
-            </Button>
-          )}
-        </div>
-      </form>
-    </Form>
+          <div className="flex w-full justify-between">
+            {credential.type === CredentialStoreType.nango && (
+              <Button type="submit" disabled={isSubmitting}>
+                Save
+              </Button>
+            )}
+            <DialogTrigger asChild>
+              <Button type="button" variant="secondary">
+                Delete Credential
+              </Button>
+            </DialogTrigger>
+          </div>
+        </form>
+      </Form>
+      {isDeleteOpen && (
+        <DeleteConfirmation
+          itemName={credential.id || 'this credential'}
+          isSubmitting={isDeleting}
+          onDelete={handleDelete}
+        />
+      )}
+    </Dialog>
   );
 }

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) {

package/src/components/data-components/delete-data-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,17 +10,20 @@ interface DeleteDataComponentConfirmationProps {
   dataComponentId: string;
   dataComponentName?: string;
   setIsOpen: (isOpen: boolean) => void;
+  redirectOnDelete?: boolean;
 }
 
 export function DeleteDataComponentConfirmation({
   dataComponentId,
   dataComponentName,
   setIsOpen,
+  redirectOnDelete = false,
 }: DeleteDataComponentConfirmationProps) {
   const { tenantId, projectId } = useParams<{
     tenantId: string;
     projectId: string;
   }>();
+  const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleDelete = async () => {
@@ -30,6 +33,9 @@ export function DeleteDataComponentConfirmation({
       if (result.success) {
         setIsOpen(false);
         toast.success('Component deleted.');
+        if (redirectOnDelete) {
+          router.push(`/${tenantId}/projects/${projectId}/components`);
+        }
       } else {
         toast.error(result.error);
       }