@inkeep/agents-manage-ui 0.24.1 → 0.24.2

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

@@ -3,6 +3,7 @@
 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';
@@ -10,10 +11,13 @@ import { CredentialToolsList } from '@/components/credentials/credential-tools-l
 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,115 @@ 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>
             )}
+
+            {/* MCP Servers Using This Credential */}
+            <CredentialToolsList
+              tools={credential.tools}
+              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/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);
       }

package/src/components/data-components/form/data-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 { ExternalLink } from '@/components/ui/external-link';
 import { Form } from '@/components/ui/form';
 import { useAutoPrefillId } from '@/hooks/use-auto-prefill-id';
@@ -17,6 +19,7 @@ import {
 } from '@/lib/actions/data-components';
 import type { DataComponent } from '@/lib/api/data-components';
 import { formatJsonField } from '@/lib/utils';
+import { DeleteDataComponentConfirmation } from '../delete-data-component-confirmation';
 import { ComponentPreviewGenerator } from '../preview/component-preview-generator';
 import { defaultValues } from './form-configuration';
 import { type DataComponentFormData, dataComponentSchema } from './validation';
@@ -44,6 +47,7 @@ export function DataComponentForm({
   id,
   initialData,
 }: DataComponentFormProps) {
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const form = useForm<DataComponentFormData>({
     resolver: zodResolver(dataComponentSchema),
     defaultValues: formatFormData(initialData),
@@ -87,71 +91,90 @@ export function DataComponentForm({
   };
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <GenericInput
-          control={form.control}
-          name="name"
-          label="Name"
-          placeholder="ListOrders"
-          description={
-            <>
-              This name is used to identify the component in chat widget integration.{' '}
-              <ExternalLink
-                href="https://docs.inkeep.com/typescript-sdk/structured-outputs/data-components#frontend-integration"
-                target="_blank"
-              >
-                Learn more
-              </ExternalLink>
-            </>
-          }
-          isRequired
-        />
-        <GenericInput
-          control={form.control}
-          name="id"
-          label="Id"
-          placeholder="my-data-component"
-          disabled={!!id}
-          description={
-            id
-              ? ''
-              : 'Choose a unique identifier for this component. Using an existing id will replace that component.'
-          }
-          isRequired
-        />
-        <GenericTextarea
-          control={form.control}
-          name="description"
-          label="Description"
-          placeholder="Display a list of user orders with interactive options"
-          className="min-h-[80px]"
-          isRequired
-        />
-        <JsonSchemaInput
-          control={form.control}
-          name="props"
-          label="Props (JSON schema)"
-          placeholder="Enter a valid JSON Schema..."
-          isRequired
-        />
-
-        {id && (
-          <ComponentPreviewGenerator
-            tenantId={tenantId}
-            projectId={projectId}
-            dataComponentId={id}
-            existingPreview={initialData?.preview || null}
-            onPreviewChanged={(preview) => {
-              form.setValue('preview', preview);
-            }}
+    <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="ListOrders"
+            description={
+              <>
+                This name is used to identify the component in chat widget integration.{' '}
+                <ExternalLink
+                  href="https://docs.inkeep.com/typescript-sdk/structured-outputs/data-components#frontend-integration"
+                  target="_blank"
+                >
+                  Learn more
+                </ExternalLink>
+              </>
+            }
+            isRequired
+          />
+          <GenericInput
+            control={form.control}
+            name="id"
+            label="Id"
+            placeholder="my-data-component"
+            disabled={!!id}
+            description={
+              id
+                ? ''
+                : 'Choose a unique identifier for this component. Using an existing id will replace that component.'
+            }
+            isRequired
+          />
+          <GenericTextarea
+            control={form.control}
+            name="description"
+            label="Description"
+            placeholder="Display a list of user orders with interactive options"
+            className="min-h-[80px]"
+            isRequired
+          />
+          <JsonSchemaInput
+            control={form.control}
+            name="props"
+            label="Props (JSON schema)"
+            placeholder="Enter a valid JSON Schema..."
+            isRequired
           />
-        )}
 
-        <Button type="submit" disabled={isSubmitting}>
-          Save
-        </Button>
-      </form>
-    </Form>
+          {id && (
+            <ComponentPreviewGenerator
+              tenantId={tenantId}
+              projectId={projectId}
+              dataComponentId={id}
+              existingPreview={initialData?.preview || null}
+              onPreviewChanged={(preview) => {
+                form.setValue('preview', preview);
+              }}
+            />
+          )}
+
+          <div className="flex w-full justify-between">
+            <Button type="submit" disabled={isSubmitting}>
+              Save
+            </Button>
+            {id && (
+              <DialogTrigger asChild>
+                <Button type="button" variant="secondary">
+                  Delete Component
+                </Button>
+              </DialogTrigger>
+            )}
+          </div>
+        </form>
+      </Form>
+      {isDeleteOpen && id && (
+        <DeleteDataComponentConfirmation
+          dataComponentId={id}
+          dataComponentName={form.getValues('name')}
+          setIsOpen={setIsDeleteOpen}
+          redirectOnDelete={true}
+        />
+      )}
+    </Dialog>
   );
 }

package/src/components/data-components/preview/component-preview-generator.tsx

@@ -8,6 +8,7 @@ import { CodeEditor } from '@/components/form/code-editor';
 import { JsonEditor } from '@/components/form/json-editor';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
+import { InfoCard } from '@/components/ui/info-card';
 import { Label } from '@/components/ui/label';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -317,6 +318,12 @@ export function ComponentPreviewGenerator({
           </TabsContent>
         </Tabs>
       )}
+
+      {!hasPreview && !isGenerating && !isComplete && (
+        <InfoCard>
+          <p className="text-sm text-muted-foreground">No preview generated</p>
+        </InfoCard>
+      )}
     </div>
   );
 }

package/src/components/mcp-servers/form/mcp-server-form.tsx

@@ -1,17 +1,21 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { generateId } from '@/lib/utils/id-utils';
 import { detectAuthenticationRequired, MCPTransportType } from '@inkeep/agents-core/client-exports';
-import { nanoid } from 'nanoid';
 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 { GenericSelect } from '@/components/form/generic-select';
 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 { useOAuthLogin } from '@/hooks/use-oauth-login';
+import { deleteToolAction } from '@/lib/actions/tools';
 import type { Credential } from '@/lib/api/credentials';
 import { createMCPTool, updateMCPTool } from '@/lib/api/tools';
 import type { MCPTool } from '@/lib/types/tools';
@@ -54,6 +58,8 @@ export function MCPServerForm({
   projectId,
 }: MCPServerFormProps) {
   const router = useRouter();
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
 
   const form = useForm({
     resolver: zodResolver(mcpToolSchema),
@@ -82,7 +88,7 @@ export function MCPServerForm({
     try {
       // handle oauth login
       if (data.credentialReferenceId === 'oauth') {
-        const toolId = nanoid();
+        const toolId = generateId();
 
         const isAuthenticationRequired = await detectAuthenticationRequired({
           serverUrl: data.config.mcp.server.url,
@@ -146,7 +152,7 @@ export function MCPServerForm({
       } else {
         const newTool = await createMCPTool(tenantId, projectId, {
           ...transformedData,
-          id: nanoid(),
+          id: generateId(),
         });
         toast.success('MCP server created successfully');
         router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${newTool.id}`);
@@ -157,9 +163,29 @@ export function MCPServerForm({
     }
   };
 
+  const handleDelete = async () => {
+    if (!tool) return;
+    
+    setIsDeleting(true);
+    try {
+      // Don't revalidate to avoid Next.js trying to refetch the deleted resource on current page
+      const result = await deleteToolAction(tenantId, projectId, tool.id, false);
+      if (result.success) {
+        setIsDeleteOpen(false);
+        toast.success('MCP server deleted.');
+        router.push(`/${tenantId}/projects/${projectId}/mcp-servers`);
+      } else {
+        toast.error(result.error || 'Failed to delete MCP server.');
+      }
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+    <Dialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
         <GenericInput
           control={form.control}
           name="name"
@@ -240,10 +266,27 @@ export function MCPServerForm({
           />
         )}
 
-        <Button type="submit" disabled={isSubmitting}>
-          {mode === 'update' ? 'Save' : 'Create'}
-        </Button>
+        <div className="flex w-full justify-between">
+          <Button type="submit" disabled={isSubmitting}>
+            {mode === 'update' ? 'Save' : 'Create'}
+          </Button>
+          {mode === 'update' && tool && (
+            <DialogTrigger asChild>
+              <Button type="button" variant="secondary">
+                Delete Server
+              </Button>
+            </DialogTrigger>
+          )}
+        </div>
       </form>
     </Form>
+    {isDeleteOpen && tool && (
+      <DeleteConfirmation
+        itemName={tool.name || 'this MCP server'}
+        isSubmitting={isDeleting}
+        onDelete={handleDelete}
+      />
+    )}
+  </Dialog>
   );
 }

package/src/components/mcp-servers/selection/mcp-server-selection.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { nanoid } from 'nanoid';
+import { generateId } from '@/lib/utils/id-utils';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'sonner';
@@ -39,7 +39,7 @@ export function MCPServerSelection({ credentials, tenantId, projectId }: MCPServ
     try {
       // Transform prebuilt server data to MCPToolFormData format
       const mcpToolData = {
-        id: nanoid(),
+        id: generateId(),
         name: server.name,
         config: {
           type: 'mcp' as const,
@@ -62,7 +62,7 @@ export function MCPServerSelection({ credentials, tenantId, projectId }: MCPServ
         toast.success(`${server.name} MCP server created successfully`);
         router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${newTool.id}`);
       } else {
-        handleOAuthLogin({toolId: newTool.id, mcpServerUrl: server.url, toolName: server.name});
+        handleOAuthLogin({ toolId: newTool.id, mcpServerUrl: server.url, toolName: server.name });
       }
     } catch (error) {
       console.error('Failed to create prebuilt MCP server:', error);

package/src/components/ui/info-card.tsx

@@ -4,7 +4,7 @@ import { ChevronDown } from 'lucide-react';
 import { Button } from './button';
 
 interface InfoCardProps {
-  title: string;
+  title?: string;
   Icon?: LucideIcon;
   children: React.ReactNode;
 }
@@ -12,10 +12,12 @@ interface InfoCardProps {
 export function InfoCard({ title, Icon, children }: InfoCardProps) {
   return (
     <div className="text-xs text-gray-800 dark:text-muted-foreground p-3 bg-gray-100/80 dark:bg-sidebar rounded-md">
-      <div className="flex items-center gap-2 mb-2">
-        {Icon && <Icon className="w-3 h-3 text-muted-foreground" />}
-        <p className="font-medium text-foreground font-mono uppercase">{title}</p>
-      </div>
+      {title && (
+        <div className="flex items-center gap-2 mb-2">
+          {Icon && <Icon className="w-3 h-3 text-muted-foreground" />}
+          <p className="font-medium text-foreground font-mono uppercase">{title}</p>
+        </div>
+      )}
       {children}
     </div>
   );

package/src/features/agent/domain/deserialize.ts

@@ -1,6 +1,6 @@
+import { generateId } from '@/lib/utils/id-utils';
 import type { Edge, Node } from '@xyflow/react';
 import * as dagre from 'dagre';
-import { nanoid } from 'nanoid';
 import { EdgeType } from '@/components/agent/configuration/edge-types';
 import {
   agentNodeSourceHandleId,
@@ -205,7 +205,7 @@ export function deserializeAgentData(data: FullAgentDefinition): TransformResult
     if ('canUse' in agent && agent.canUse && agent.canUse.length > 0) {
       for (const canUseItem of agent.canUse) {
         const toolId = canUseItem.toolId;
-        const toolNodeId = nanoid();
+        const toolNodeId = generateId();
         const relationshipId = canUseItem.agentToolRelationId;
 
         const tool = data.tools?.[toolId] || data.functionTools?.[toolId];