@inkeep/agents-manage-ui 0.0.0-dev-20251016161232 → 0.0.0-dev-20251016203440

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

@@ -31,9 +31,6 @@ export function MCPServerSelection({ credentials, tenantId, projectId }: MCPServ
   const { handleOAuthLogin } = useOAuthLogin({
     tenantId,
     projectId,
-    onError: () => {
-      setLoadingServerId(undefined);
-    },
   });
 
   const handleSelectPrebuiltServer = async (server: PrebuiltMCPServer) => {
@@ -65,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(newTool.id);
+        handleOAuthLogin({toolId: newTool.id, mcpServerUrl: server.url, toolName: server.name});
       }
     } catch (error) {
       console.error('Failed to create prebuilt MCP server:', error);

package/src/components/mcp-servers/view-mcp-server-details.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Lock, LockOpen, Pencil } from 'lucide-react';
+import { AlertCircle, Lock, LockOpen, Pencil } from 'lucide-react';
 import Link from 'next/link';
 import { Badge } from '@/components/ui/badge';
 import { ExternalLink } from '@/components/ui/external-link';
@@ -69,6 +69,12 @@ export function ViewMCPServerDetails({
     });
   };
 
+  const isExpired = (expiresAt: string | Date | null | undefined): boolean => {
+    if (!expiresAt) return false;
+    const expirationDate = typeof expiresAt === 'string' ? new Date(expiresAt) : expiresAt;
+    return expirationDate < new Date();
+  };
+
   const getStatusBadgeVariant = (status: string) => {
     switch (status) {
       case 'healthy':
@@ -157,27 +163,42 @@ export function ViewMCPServerDetails({
           </div>
         </div>
 
-        <div className="space-y-2">
-          <ItemLabel>Status</ItemLabel>
-          <ItemValue className="items-center">
-            {tool.status === 'needs_auth' ? (
-              <Badge
-                variant="outline"
-                className="text-xs bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-800 cursor-pointer hover:bg-amber-100 dark:hover:bg-amber-900/30 hover:border-amber-300 dark:hover:border-amber-700 transition-colors"
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  handleOAuthLogin(tool.id);
-                }}
-              >
-                Click to Login
-              </Badge>
-            ) : (
-              <Badge className="uppercase" variant={getStatusBadgeVariant(tool.status)}>
-                {tool.status}
-              </Badge>
-            )}
-          </ItemValue>
+        {/* Status and Transport Type */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <ItemLabel>Status</ItemLabel>
+            <ItemValue className="items-center">
+              {tool.status === 'needs_auth' ? (
+                <Badge
+                  variant="outline"
+                  className="text-xs bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-800 cursor-pointer hover:bg-amber-100 dark:hover:bg-amber-900/30 hover:border-amber-300 dark:hover:border-amber-700 transition-colors"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleOAuthLogin({
+                      toolId: tool.id,
+                      mcpServerUrl: tool.config.mcp.server.url,
+                      toolName: tool.name,
+                    });
+                  }}
+                >
+                  Click to Login
+                </Badge>
+              ) : (
+                <Badge className="uppercase" variant={getStatusBadgeVariant(tool.status)}>
+                  {tool.status}
+                </Badge>
+              )}
+            </ItemValue>
+          </div>
+          {(tool.config as any).mcp.transport && (
+            <div className="space-y-2">
+              <ItemLabel>Transport Type</ItemLabel>
+              <ItemValue>
+                {<Badge variant="code">{(tool.config as any).mcp.transport.type}</Badge>}
+              </ItemValue>
+            </div>
+          )}
         </div>
 
         {/* Last Error */}
@@ -191,19 +212,13 @@ export function ViewMCPServerDetails({
         {/* Server URL */}
         <div className="space-y-2">
           <ItemLabel>Server URL</ItemLabel>
-          {tool.config.type === 'mcp' && <CopyableSingleLineCode code={tool.config.mcp.server.url} />}
+          {tool.config.type === 'mcp' && (
+            <CopyableSingleLineCode code={tool.config.mcp.server.url} />
+          )}
         </div>
 
-        {/* Transport and Credential */}
+        {/* Credential Name and Expires At */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {(tool.config as any).mcp.transport && (
-            <div className="space-y-2">
-              <ItemLabel>Transport Type</ItemLabel>
-              <ItemValue>
-                {<Badge variant="code">{(tool.config as any).mcp.transport.type}</Badge>}
-              </ItemValue>
-            </div>
-          )}
           <div className="space-y-2">
             <ItemLabel>Credential</ItemLabel>
             <ItemValue className="items-center">
@@ -228,6 +243,19 @@ export function ViewMCPServerDetails({
               )}
             </ItemValue>
           </div>
+          {tool.expiresAt && (
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <ItemLabel>Credential Expires At</ItemLabel>
+                {isExpired(tool.expiresAt) && <AlertCircle className="h-4 w-4 text-amber-500" />}
+              </div>
+              <ItemValue>
+                {formatDate(
+                  typeof tool.expiresAt === 'string' ? tool.expiresAt : tool.expiresAt.toISOString()
+                )}
+              </ItemValue>
+            </div>
+          )}
         </div>
 
         {/* Active Tools */}

package/src/hooks/use-nango-connect.ts

@@ -1,8 +1,9 @@
 'use client';
 
-import Nango, { type OnConnectEvent } from '@nangohq/frontend';
+import Nango, { type AuthOptions, type AuthSuccess, type OnConnectEvent } from '@nangohq/frontend';
 import { useCallback } from 'react';
 import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+import { createProviderConnectSession } from '@/lib/mcp-tools/nango';
 
 type OpenNangoConnectOptions = {
   sessionToken: string;
@@ -40,5 +41,43 @@ export function useNangoConnect() {
     [PUBLIC_NANGO_SERVER_URL, PUBLIC_NANGO_CONNECT_BASE_URL]
   );
 
-  return openNangoConnect;
+  const openNangoConnectHeadless = useCallback(
+    async ({ mcpServerUrl, providerUniqueKey, providerDisplayName }: { mcpServerUrl: string, providerUniqueKey: string, providerDisplayName: string }): Promise<AuthSuccess> => {
+      const providerName = 'mcp-generic';
+      const connectSessionToken = await createProviderConnectSession({
+        providerName,
+        uniqueKey: providerUniqueKey,
+        displayName: providerDisplayName,
+      });
+
+      const nango = new Nango({
+        host: PUBLIC_NANGO_SERVER_URL || undefined,
+        connectSessionToken,
+      });
+
+      try {
+        const authOptions: AuthOptions = {
+          detectClosedAuthWindow: true,
+          params: {
+            mcp_server_url: mcpServerUrl,
+          },
+        };
+
+        const result = await nango.auth(providerUniqueKey, authOptions);
+
+        return result;
+      } catch (error) {
+        if (error instanceof Error) {
+          throw new Error(`Nango headless auth failed: ${error.message}`);
+        }
+        throw error;
+      }
+    },
+    [PUBLIC_NANGO_SERVER_URL]
+  );
+
+  return {
+    openNangoConnect,
+    openNangoConnectHeadless,
+  };
 }

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

@@ -1,115 +1,227 @@
+import { CredentialStoreType, generateIdFromName } from '@inkeep/agents-core/client-exports';
 import { useRouter } from 'next/navigation';
+import { useCallback, useRef } from 'react';
 import { toast } from 'sonner';
 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 { getOAuthLoginUrl } from '@/lib/utils/mcp-urls';
+import { useNangoConnect } from './use-nango-connect';
 
 interface UseOAuthLoginProps {
   tenantId: string;
   projectId: string;
   onFinish?: (toolId: string) => void;
-  onError?: (error: Error) => void;
 }
 
-export function useOAuthLogin({ tenantId, projectId, onFinish, onError }: UseOAuthLoginProps) {
+interface OAuthLoginResult {
+  handleOAuthLogin: ({
+    toolId,
+    mcpServerUrl,
+    toolName,
+  }: {
+    toolId: string;
+    mcpServerUrl: string;
+    toolName: string;
+  }) => Promise<void>;
+}
+
+export function useOAuthLogin({
+  tenantId,
+  projectId,
+  onFinish,
+}: UseOAuthLoginProps): OAuthLoginResult {
   const router = useRouter();
   const { PUBLIC_INKEEP_AGENTS_MANAGE_API_URL } = useRuntimeConfig();
+  const { openNangoConnectHeadless } = useNangoConnect();
 
   // Track active OAuth attempts to prevent conflicts
-  const activeAttempts = new Map<string, () => void>();
-
-  const handleOAuthLogin = (toolId: string) => {
-    // Clean up any previous attempt for this toolId
-    const existingCleanup = activeAttempts.get(toolId);
-    if (existingCleanup) {
-      existingCleanup();
-      activeAttempts.delete(toolId);
-    }
-    try {
-      const oauthUrl = getOAuthLoginUrl({
-        PUBLIC_INKEEP_AGENTS_MANAGE_API_URL,
-        tenantId,
-        projectId,
-        id: toolId,
-      });
+  const activeAttemptsRef = useRef(new Map<string, () => void>());
 
-      const popup = window.open(
-        oauthUrl,
-        'oauth-popup',
-        'width=600,height=700,scrollbars=yes,resizable=yes,status=yes,location=yes'
-      );
-
-      if (!popup) {
-        console.error(`Failed to open popup for ${toolId} - blocked by browser`);
-        return;
-      }
+  const handleOAuthLoginManually = useCallback(
+    (toolId: string): Promise<void> => {
+      return new Promise((resolve, reject) => {
+        // Clean up any previous attempt for this toolId
+        const existingCleanup = activeAttemptsRef.current.get(toolId);
+        if (existingCleanup) {
+          existingCleanup();
+          activeAttemptsRef.current.delete(toolId);
+        }
 
-      // Track completion to prevent duplicate calls
-      let completed = false;
+        try {
+          const oauthUrl = getOAuthLoginUrl({
+            PUBLIC_INKEEP_AGENTS_MANAGE_API_URL,
+            tenantId,
+            projectId,
+            id: toolId,
+          });
 
-      // Listen for success PostMessage
-      const handleMessage = (event: MessageEvent) => {
-        if (event.data.type === 'oauth-success' && !completed) {
-          completed = true;
-          window.removeEventListener('message', handleMessage);
+          const popup = window.open(
+            oauthUrl,
+            'oauth-popup',
+            'width=600,height=700,scrollbars=yes,resizable=yes,status=yes,location=yes'
+          );
 
-          // Call custom success handler or default behavior
-          if (onFinish) {
-            onFinish(toolId);
-          } else {
-            router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${toolId}`);
+          if (!popup) {
+            const error = new Error(`Failed to open popup for ${toolId} - blocked by browser`);
+            console.error(error.message);
+            reject(error);
+            return;
           }
-        }
-      };
 
-      if (popup) {
-        window.addEventListener('message', handleMessage);
-
-        // Backup: Monitor popup closure (for errors or PostMessage failures)
-        // Delay backup monitoring to give PostMessage priority
-        let checkPopupClosed: NodeJS.Timeout | null = null;
-        const backupTimeout = setTimeout(() => {
-          if (!completed) {
-            checkPopupClosed = setInterval(() => {
-              try {
-                if (popup.closed && !completed) {
-                  completed = true;
-                  if (checkPopupClosed) clearInterval(checkPopupClosed);
-                  window.removeEventListener('message', handleMessage);
-                  activeAttempts.delete(toolId);
-
-                  // Call custom success handler or default behavior
-                  if (onFinish) {
-                    onFinish(toolId);
-                  } else {
-                    router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${toolId}`);
+          // Track completion to prevent duplicate calls
+          let completed = false;
+
+          const completeFlow = (success: boolean, error?: Error) => {
+            if (completed) return;
+            completed = true;
+
+            // Cleanup
+            window.removeEventListener('message', handleMessage);
+            if (checkPopupClosed) clearInterval(checkPopupClosed);
+            clearTimeout(backupTimeout);
+            activeAttemptsRef.current.delete(toolId);
+
+            if (success) {
+              // Call custom success handler or default behavior
+              if (onFinish) {
+                onFinish(toolId);
+              } else {
+                router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${toolId}`);
+              }
+              resolve();
+            } else {
+              reject(error || new Error('OAuth login failed'));
+            }
+          };
+
+          // Listen for success PostMessage
+          const handleMessage = (event: MessageEvent) => {
+            if (event.data.type === 'oauth-success') {
+              completeFlow(true);
+            } else if (event.data.type === 'oauth-error') {
+              completeFlow(false, new Error(event.data.error || 'OAuth login failed'));
+            }
+          };
+
+          window.addEventListener('message', handleMessage);
+
+          // Backup: Monitor popup closure (for errors or PostMessage failures)
+          let checkPopupClosed: NodeJS.Timeout | null = null;
+          const backupTimeout = setTimeout(() => {
+            if (!completed) {
+              checkPopupClosed = setInterval(() => {
+                try {
+                  if (popup.closed) {
+                    // Assume success if popup closed without error message
+                    completeFlow(true);
                   }
+                } catch {
+                  // Cross-origin errors are expected during OAuth redirects
                 }
-              } catch {
-                // Cross-origin errors are expected during OAuth redirects
-              }
-            }, 1000); // Check every second
-          }
-        }, 3000); // Wait 3 seconds before starting backup monitoring
-
-        // Register cleanup function for this attempt
-        const cleanup = () => {
-          clearTimeout(backupTimeout);
-          if (checkPopupClosed) clearInterval(checkPopupClosed);
-          window.removeEventListener('message', handleMessage);
-          completed = true;
-        };
-        activeAttempts.set(toolId, cleanup);
-      }
-    } catch (error) {
-      const errorObj = error instanceof Error ? error : new Error('OAuth login failed');
+              }, 1000);
+            }
+          }, 3000);
 
-      if (onError) {
-        onError(errorObj);
+          // Register cleanup function for this attempt
+          const cleanup = () => {
+            completeFlow(false, new Error('OAuth login cancelled'));
+          };
+          activeAttemptsRef.current.set(toolId, cleanup);
+        } catch (error) {
+          const errorObj = error instanceof Error ? error : new Error('OAuth login failed');
+          reject(errorObj);
+        }
+      });
+    },
+    [PUBLIC_INKEEP_AGENTS_MANAGE_API_URL, tenantId, projectId, onFinish, router]
+  );
+
+  const handleOAuthLoginWithNangoMCPGeneric = useCallback(
+    async ({
+      toolId,
+      mcpServerUrl,
+      toolName,
+    }: {
+      toolId: string;
+      mcpServerUrl: string;
+      toolName: string;
+    }): Promise<void> => {
+      const authResult = await openNangoConnectHeadless({
+        mcpServerUrl,
+        providerUniqueKey: `${generateIdFromName(toolName)}_${toolId}`,
+        providerDisplayName: toolName,
+      });
+
+      const newCredentialData = {
+        id: generateIdFromName(toolName),
+        type: CredentialStoreType.nango,
+        credentialStoreId: 'nango-default',
+        retrievalParams: {
+          connectionId: authResult.connectionId,
+          providerConfigKey: authResult.providerConfigKey,
+          provider: 'mcp-generic',
+          authMode: 'OAUTH2',
+        },
+      };
+
+      const newCredential = await findOrCreateCredential(tenantId, projectId, newCredentialData);
+
+      await updateMCPTool(tenantId, projectId, toolId, {
+        credentialReferenceId: newCredential.id,
+      });
+
+      // Call custom success handler or default behavior
+      if (onFinish) {
+        onFinish(toolId);
       } else {
-        toast.error('OAuth login failed. Please try again.');
+        router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${toolId}`);
       }
-    }
-  };
+    },
+    [openNangoConnectHeadless, onFinish, router, tenantId, projectId]
+  );
+
+  const handleOAuthLogin = useCallback(
+    async ({
+      toolId,
+      mcpServerUrl,
+      toolName,
+    }: {
+      toolId: string;
+      mcpServerUrl: string;
+      toolName: string;
+    }): Promise<void> => {
+      try {
+        // Check credential stores availability
+        const credentialStoresStatus = await listCredentialStores(tenantId, projectId);
+
+        const isNangoReady = credentialStoresStatus.some(
+          (store) => store.type === CredentialStoreType.nango && store.available
+        );
+
+        const isKeychainReady = credentialStoresStatus.some(
+          (store) => store.type === CredentialStoreType.keychain && store.available
+        );
 
-  return { handleOAuthLogin };
+        // Choose authentication method based on availability
+        if (isNangoReady) {
+          await handleOAuthLoginWithNangoMCPGeneric({ toolId, mcpServerUrl, toolName });
+        } else if (isKeychainReady) {
+          await handleOAuthLoginManually(toolId);
+        } else {
+          throw new Error('No credential store available. Please configure Nango or Keychain.');
+        }
+      } catch (error) {
+        const errorObj = error instanceof Error ? error : new Error('OAuth login failed');
+        toast.error(errorObj.message);
+        throw errorObj;
+      }
+    },
+    [tenantId, projectId, handleOAuthLoginWithNangoMCPGeneric, handleOAuthLoginManually]
+  );
+
+  return {
+    handleOAuthLogin,
+  };
 }

package/src/lib/__tests__/provider-icons-sync.test.ts

@@ -0,0 +1,47 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { getAllProviderIcons } from '../provider-icons';
+
+describe('provider-icons-sync', () => {
+  it('should have COMMON_PROVIDER_ICONS in sync with actual files in public/assets/provider-icons', () => {
+    // Read actual files from the filesystem
+    const iconsDir = path.join(process.cwd(), 'public/assets/provider-icons');
+    const actualFiles = fs.readdirSync(iconsDir);
+    const actualIcons = actualFiles
+      .filter(file => file.endsWith('.svg'))
+      .map(file => file.replace('.svg', ''))
+      .sort();
+
+    // Get the icons from our COMMON_PROVIDER_ICONS
+    const commonIcons = getAllProviderIcons();
+
+    // Compare the two lists
+    const missingInCommon = actualIcons.filter(icon => !commonIcons.includes(icon));
+    const extraInCommon = commonIcons.filter(icon => !actualIcons.includes(icon));
+
+    // Create helpful error messages
+    let errorMessage = '';
+    
+    if (missingInCommon.length > 0) {
+      errorMessage += `\nMissing in COMMON_PROVIDER_ICONS (found in filesystem but not in code):\n`;
+      errorMessage += missingInCommon.map(icon => `  - '${icon}',`).join('\n');
+    }
+    
+    if (extraInCommon.length > 0) {
+      errorMessage += `\nExtra in COMMON_PROVIDER_ICONS (found in code but not in filesystem):\n`;
+      errorMessage += extraInCommon.map(icon => `  - '${icon}' (should be removed)`).join('\n');
+    }
+
+    if (errorMessage) {
+      errorMessage = `COMMON_PROVIDER_ICONS is out of sync with public/assets/provider-icons/\n${errorMessage}\n\nPlease update the COMMON_PROVIDER_ICONS set in src/lib/provider-icons.ts`;
+    }
+
+    // The test passes only if both lists are identical
+    expect(missingInCommon).toEqual([]);
+    expect(extraInCommon).toEqual([]);
+    
+    // Also verify the counts match
+    expect(commonIcons.length).toBe(actualIcons.length);
+  });
+});

package/src/lib/mcp-tools/nango.ts

@@ -349,9 +349,13 @@ export async function createNangoApiKeyConnection({
  */
 export async function createProviderConnectSession({
   providerName,
+  uniqueKey,
+  displayName,
   credentials,
 }: {
   providerName: string;
+  uniqueKey: string;
+  displayName: string;
   credentials?: ApiPublicIntegrationCredentials;
 }): Promise<string> {
   try {
@@ -359,7 +363,7 @@ export async function createProviderConnectSession({
     let existingIntegration: (ApiPublicIntegration & { areCredentialsSet: boolean }) | null = null;
 
     try {
-      existingIntegration = await fetchNangoIntegration(providerName);
+      existingIntegration = await fetchNangoIntegration(uniqueKey);
     } catch (error) {
       if (error instanceof NangoError) {
         throw error;
@@ -374,8 +378,8 @@ export async function createProviderConnectSession({
       try {
         integration = await createNangoIntegration({
           provider: providerName,
-          uniqueKey: providerName,
-          displayName: providerName,
+          uniqueKey,
+          displayName,
           credentials,
         });
       } catch (error) {