@inkeep/agents-manage-ui 0.0.0-dev-20251023144626 → 0.0.0-dev-20251023185028

package/.next/standalone/agents-manage-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-manage-ui",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "index.js",
   "types": "index.d.ts",
@@ -48,9 +48,9 @@
     "@inkeep/agents-run-api": "workspace:^",
     "@inkeep/agents-ui": "^0.14.17",
     "@lezer/highlight": "^1.2.1",
-    "@nangohq/frontend": "^0.69.3",
-    "@nangohq/node": "^0.69.3",
-    "@nangohq/types": "^0.69.3",
+    "@nangohq/frontend": "^0.69.5",
+    "@nangohq/node": "^0.69.5",
+    "@nangohq/types": "^0.69.5",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-collapsible": "^1.1.12",

package/.next/standalone/packages/agents-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-core",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "Agents Core contains the database schema, types, and validation schemas for Inkeep Agent Framework, along with core components.",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -46,8 +46,8 @@
     "@hono/zod-openapi": "^1.0.2",
     "@libsql/client": "^0.15.7",
     "@modelcontextprotocol/sdk": "^1.17.2",
-    "@nangohq/node": "^0.69.3",
-    "@nangohq/types": "^0.69.3",
+    "@nangohq/node": "^0.69.5",
+    "@nangohq/types": "^0.69.5",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/auto-instrumentations-node": "^0.62.0",
     "@opentelemetry/baggage-span-processor": "^0.4.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-manage-ui",
-  "version": "0.0.0-dev-20251023144626",
+  "version": "0.0.0-dev-20251023185028",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "index.js",
   "types": "index.d.ts",
@@ -31,9 +31,9 @@
     "@hookform/resolvers": "^5.2.1",
     "@inkeep/agents-ui": "^0.14.17",
     "@lezer/highlight": "^1.2.1",
-    "@nangohq/frontend": "^0.69.3",
-    "@nangohq/node": "^0.69.3",
-    "@nangohq/types": "^0.69.3",
+    "@nangohq/frontend": "^0.69.5",
+    "@nangohq/node": "^0.69.5",
+    "@nangohq/types": "^0.69.5",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-collapsible": "^1.1.12",
@@ -83,9 +83,9 @@
     "use-stick-to-bottom": "^1.1.1",
     "zod": "^4.1.11",
     "zustand": "^5.0.7",
-    "@inkeep/agents-core": "^0.0.0-dev-20251023144626",
-    "@inkeep/agents-manage-api": "^0.0.0-dev-20251023144626",
-    "@inkeep/agents-run-api": "^0.0.0-dev-20251023144626"
+    "@inkeep/agents-core": "^0.0.0-dev-20251023185028",
+    "@inkeep/agents-manage-api": "^0.0.0-dev-20251023185028",
+    "@inkeep/agents-run-api": "^0.0.0-dev-20251023185028"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

package/src/app/[tenantId]/projects/[projectId]/credentials/[credentialId]/page.tsx

@@ -19,7 +19,7 @@ async function credentialToFormData(credential: Credential): Promise<EditCredent
   }
 
   return {
-    name: credential.id,
+    name: credential.name,
     metadata: connectionMetadata,
   };
 }

package/src/app/[tenantId]/projects/[projectId]/credentials/new/providers/[providerId]/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { CredentialStoreType, generateIdFromName } from '@inkeep/agents-core/client-exports';
+import { CredentialStoreType } from '@inkeep/agents-core/client-exports';
 import type { ApiProvider } from '@nangohq/types';
 import { useRouter } from 'next/navigation';
 import { use, useCallback, useEffect, useState } from 'react';
@@ -15,6 +15,7 @@ import { useNangoProviders } from '@/hooks/use-nango-providers';
 import { createProviderConnectSession } from '@/lib/mcp-tools/nango';
 import { NangoError } from '@/lib/mcp-tools/nango-types';
 import { findOrCreateCredential } from '@/lib/utils/credentials-utils';
+import { generateId } from '@/lib/utils/id-utils';
 
 function ProviderSetupPage({
   params,
@@ -39,11 +40,10 @@ function ProviderSetupPage({
         return;
       }
 
-      const credentialId = generateIdFromName(`${provider.name}-${event.payload.connectionId}`);
-
       try {
         await findOrCreateCredential(tenantId, projectId, {
-          id: credentialId,
+          id: generateId(),
+          name: provider.name,
           type: CredentialStoreType.nango,
           credentialStoreId: 'nango-default',
           retrievalParams: {

package/src/app/[tenantId]/projects/[projectId]/credentials/page.tsx

@@ -52,6 +52,7 @@ async function CredentialsPage({
                 <CredentialItem
                   key={cred.id}
                   id={cred.id}
+                  name={cred.name}
                   createdAt={cred.createdAt}
                   tenantId={tenantId}
                   projectId={projectId}

package/src/components/agent/agent.tsx

@@ -788,7 +788,25 @@ function Flow({
     externalAgentLookup,
   ]);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: ignore agentToolConfigLookup
   useEffect(() => {
+    function hasRelationWithSubAgent({
+      relationshipId,
+      subAgentId,
+    }: {
+      relationshipId: unknown;
+      subAgentId: string;
+    }): boolean {
+      if (typeof relationshipId !== 'string') {
+        return false;
+      }
+      const config = agentToolConfigLookup[subAgentId];
+      if (!config) {
+        return false;
+      }
+      return Object.keys(config).includes(relationshipId);
+    }
+
     const onDataOperation: EventListenerOrEventListenerObject = (event) => {
       // @ts-expect-error -- improve types
       const data = event.detail;
@@ -822,17 +840,27 @@ function Flow({
           break;
         }
         case 'delegation_returned': {
-          const { targetSubAgent } = data.details.data;
+          const { targetSubAgent, fromSubAgent } = data.details.data;
           setEdges((prevEdges) =>
             prevEdges.map((edge) => ({
               ...edge,
-              data: { ...edge.data, delegating: false },
+              data: {
+                ...edge.data,
+                delegating:
+                  edge.source === targetSubAgent && edge.target === fromSubAgent
+                    ? 'inverted'
+                    : false,
+              },
             }))
           );
           setNodes((prevNodes) =>
             prevNodes.map((node) => ({
               ...node,
-              data: { ...node.data, isExecuting: node.id === targetSubAgent, isDelegating: false },
+              data: {
+                ...node.data,
+                isExecuting: false,
+                isDelegating: node.id === targetSubAgent || node.id === fromSubAgent,
+              },
             }))
           );
           break;
@@ -855,9 +883,6 @@ function Flow({
               })
             );
             return prevNodes.map((node) => {
-              const toolId = node.data.toolId as string;
-              const toolData = toolLookup[toolId];
-
               return {
                 ...node,
                 data: {
@@ -865,7 +890,10 @@ function Flow({
                   isExecuting: false,
                   isDelegating:
                     node.data.id === subAgentId ||
-                    toolData?.availableTools?.some((tool) => tool.name === toolName),
+                    hasRelationWithSubAgent({
+                      relationshipId: node.data.relationshipId,
+                      subAgentId,
+                    }),
                 },
               };
             });
@@ -893,14 +921,15 @@ function Flow({
               })
             );
             return prevNodes.map((node) => {
-              const toolId = node.data.toolId as string;
-              const toolData = toolLookup[toolId];
               return {
                 ...node,
                 data: {
                   ...node.data,
                   isDelegating: node.id === subAgentId,
-                  isExecuting: toolData?.availableTools?.some((tool) => tool.name === toolName),
+                  isExecuting: hasRelationWithSubAgent({
+                    subAgentId,
+                    relationshipId: node.data.relationshipId,
+                  }),
                 },
               };
             });

package/src/components/agent/edges/default-edge.tsx

@@ -25,6 +25,7 @@ export const AnimatedCircle: FC<{ edgePath: string; inverted: boolean }> = ({
         ref={ref}
         dur="2s"
         path={edgePath}
+        fill="freeze"
         {...(inverted && {
           pathLength: '1',
           keyPoints: '1;0',

package/src/components/credentials/credential-item.tsx

@@ -96,11 +96,13 @@ function CredentialDialogMenu({ credentialId, credentialName }: CredentialDialog
 
 export function CredentialItem({
   id,
+  name,
   createdAt,
   tenantId,
   projectId,
 }: {
   id: Credential['id'];
+  name: Credential['name'];
   createdAt: Credential['createdAt'];
   tenantId: string;
   projectId: string;
@@ -113,12 +115,12 @@ export function CredentialItem({
         <ItemCardLink href={linkPath}>
           <ItemCardTitle className="text-md">
             <div className="flex items-center gap-3 min-w-0">
-              <ProviderIcon provider={id} size={24} className="flex-shrink-0" />
-              <span className="truncate">{id}</span>
+              <ProviderIcon provider={name} size={24} className="flex-shrink-0" />
+              <span className="truncate">{name}</span>
             </div>
           </ItemCardTitle>
         </ItemCardLink>
-        <CredentialDialogMenu credentialId={id} credentialName={id} />
+        <CredentialDialogMenu credentialId={id} credentialName={name} />
       </ItemCardHeader>
       <ItemCardContent>
         {/* <ItemCardDescription hasContent={!!description} className="line-clamp-2">

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

@@ -40,16 +40,34 @@ interface EditCredentialFormProps {
   initialFormData: EditCredentialFormData;
 }
 
-function getCredentialType(credential: Credential) {
-  if (credential.retrievalParams?.provider === 'private-api-bearer') {
-    return 'Bearer Auth';
+function getCredentialAuthenticationType(credential: Credential): string | undefined {
+  if (
+    credential.type === CredentialStoreType.nango &&
+    credential.retrievalParams?.provider === 'private-api-bearer'
+  ) {
+    return 'Bearer authentication';
   }
 
-  if (credential.retrievalParams && 'authMode' in credential.retrievalParams) {
-    return credential.retrievalParams.authMode as string;
+  if (
+    credential.type === CredentialStoreType.nango &&
+    credential.retrievalParams?.provider === 'mcp-generic'
+  ) {
+    return 'OAuth';
   }
 
-  return credential.type;
+  if (
+    credential.type === CredentialStoreType.keychain &&
+    credential.retrievalParams?.key &&
+    typeof credential.retrievalParams?.key === 'string'
+  ) {
+    if (credential.retrievalParams?.key.startsWith('oauth_token_')) {
+      return 'OAuth';
+    }
+
+    return 'Bearer authentication';
+  }
+
+  return undefined;
 }
 
 export function EditCredentialForm({
@@ -72,10 +90,7 @@ export function EditCredentialForm({
   const handleUpdateCredential = async (formData: EditCredentialFormData) => {
     try {
       await updateCredential(tenantId, projectId, credential.id, {
-        retrievalParams: {
-          ...credential.retrievalParams,
-          ...formData.metadata,
-        },
+        name: formData.name.trim(),
       });
 
       if (
@@ -119,6 +134,8 @@ export function EditCredentialForm({
     }
   };
 
+  const credentialAuthenticationType = getCredentialAuthenticationType(credential);
+
   return (
     <Dialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
       <Form {...form}>
@@ -130,14 +147,21 @@ export function EditCredentialForm({
               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' && (
+              <Input
+                type="text"
+                disabled={true}
+                value={
+                  credentialAuthenticationType
+                    ? `${credentialAuthenticationType} (${credential.type})`
+                    : credential.type
+                }
+              />
+              {credentialAuthenticationType === 'Bearer authentication' && (
                 <InfoCard title="How this works">
                   <p>
                     When your agent connects to the MCP server, this API key will be automatically

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

@@ -8,8 +8,8 @@ import type { CredentialFormData } from '@/components/credentials/views/credenti
 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';
+import { generateId } from '@/lib/utils/id-utils';
 import { CredentialForm } from './credential-form';
 
 export function NewCredentialForm() {
@@ -21,51 +21,61 @@ export function NewCredentialForm() {
 
   const handleCreateCredential = async (data: CredentialFormData) => {
     try {
-      const idFromName = generateIdFromName(data.name.trim());
-
+      const newCredentialId = generateId();
+      
       let newCredential: Credential | undefined;
+      let credentialKeyToSet: string;
+      let credentialValueToSet: string;
+      let retrievalParams: Record<string, string>;
 
-      if (data.credentialStoreType === CredentialStoreType.nango) {
-        const { integration } = await createNangoApiKeyConnection({
-          name: idFromName,
-          apiKeyToSet: data.apiKeyToSet,
-          metadata: data.metadata as Record<string, string>,
-        });
-
-        newCredential = await findOrCreateCredential(tenantId, projectId, {
-          id: idFromName,
-          type: data.credentialStoreType,
-          credentialStoreId: data.credentialStoreId,
-          retrievalParams: {
-            connectionId: idFromName,
-            providerConfigKey: integration.unique_key,
-            provider: integration.provider,
+      switch (data.credentialStoreType) {
+        case CredentialStoreType.nango: {
+          credentialKeyToSet = JSON.stringify({
+            connectionId: newCredentialId,
+            providerConfigKey: newCredentialId,
+            integrationDisplayName: data.name.trim(),
+          });
+          credentialValueToSet = data.apiKeyToSet;
+          retrievalParams = {
+            connectionId: newCredentialId,
+            providerConfigKey: newCredentialId,
+            provider: 'private-api-bearer',
             authMode: 'API_KEY',
-          },
-        });
-      } else if (data.credentialStoreType === CredentialStoreType.keychain) {
-        const keychainStoreValueToSet = JSON.stringify({
-          access_token: data.apiKeyToSet,
-        });
-        
-        await createCredentialInStore(
-          tenantId,
-          projectId,
-          data.credentialStoreId,
-          idFromName,
-          keychainStoreValueToSet
-        );
-
-        newCredential = await findOrCreateCredential(tenantId, projectId, {
-          id: idFromName,
-          type: data.credentialStoreType,
-          credentialStoreId: data.credentialStoreId,
-          retrievalParams: {
+          };
+          break;
+        }
+        case CredentialStoreType.keychain: {
+          const idFromName = generateIdFromName(data.name.trim());
+          credentialKeyToSet = idFromName;
+          credentialValueToSet = JSON.stringify({
+            access_token: data.apiKeyToSet,
+          });
+          retrievalParams = {
             key: idFromName,
-          },
-        });
+          };
+          break;
+        }
+        default:
+          throw new Error(`Unsupported credential store type: ${data.credentialStoreType}`);
       }
 
+      await createCredentialInStore({
+        tenantId,
+        projectId,
+        storeId: data.credentialStoreId,
+        key: credentialKeyToSet,
+        value: credentialValueToSet,
+        metadata: data.metadata as Record<string, string>,
+      });
+
+      newCredential = await findOrCreateCredential(tenantId, projectId, {
+        id: newCredentialId,
+        name: data.name.trim(),
+        type: data.credentialStoreType,
+        credentialStoreId: data.credentialStoreId,
+        retrievalParams,
+      });
+
       if (data.selectedTool && newCredential) {
         const updatedTool = {
           credentialReferenceId: newCredential.id,

package/src/hooks/use-oauth-login.ts

@@ -6,6 +6,7 @@ import { useRuntimeConfig } from '@/contexts/runtime-config-context';
 import { listCredentialStores } from '@/lib/api/credentialStores';
 import { updateMCPTool } from '@/lib/api/tools';
 import { findOrCreateCredential } from '@/lib/utils/credentials-utils';
+import { generateId } from '@/lib/utils/id-utils';
 import { getOAuthLoginUrl } from '@/lib/utils/mcp-urls';
 import { useNangoConnect } from './use-nango-connect';
 
@@ -155,7 +156,8 @@ export function useOAuthLogin({
       });
 
       const newCredentialData = {
-        id: generateIdFromName(toolName),
+        id: generateId(),
+        name: `${toolName} OAuth Credential`,
         type: CredentialStoreType.nango,
         credentialStoreId: 'nango-default',
         retrievalParams: {

package/src/lib/api/credentialStores.ts

@@ -18,6 +18,7 @@ export interface CredentialStoresListResponse {
 export interface CreateCredentialInStoreRequest {
   key: string;
   value: string;
+  metadata?: Record<string, string>;
 }
 
 export interface CreateCredentialInStoreResponse {
@@ -48,13 +49,21 @@ export async function listCredentialStores(
 /**
  * Create a credential in a specific credential store
  */
-export async function createCredentialInStore(
-  tenantId: string,
-  projectId: string,
-  storeId: string,
-  key: string,
-  value: string
-): Promise<CreateCredentialInStoreResponse['data']> {
+export async function createCredentialInStore({
+  tenantId,
+  projectId,
+  storeId,
+  key,
+  value,
+  metadata,
+}: {
+  tenantId: string;
+  projectId: string;
+  storeId: string;
+  key: string;
+  value: string;
+  metadata?: Record<string, string>;
+}): Promise<CreateCredentialInStoreResponse['data']> {
   validateTenantId(tenantId);
   validateProjectId(projectId);
 
@@ -62,7 +71,7 @@ export async function createCredentialInStore(
     `tenants/${tenantId}/projects/${projectId}/credential-stores/${storeId}/credentials`,
     {
       method: 'POST',
-      body: JSON.stringify({ key, value }),
+      body: JSON.stringify({ key, value, metadata }),
     }
   );