@inkeep/agents-manage-ui 0.22.11 → 0.23.0

package/src/components/agent/playground/chat-widget.tsx

@@ -135,7 +135,6 @@ export function ChatWidget({
   chatActivities,
   dataComponentLookup = {},
 }: ChatWidgetProps) {
-  console.log('dataComponentLookup', dataComponentLookup);
   const { PUBLIC_INKEEP_AGENTS_RUN_API_URL, PUBLIC_INKEEP_AGENTS_RUN_API_BYPASS_SECRET } =
     useRuntimeConfig();
   const stopPollingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -268,7 +267,7 @@ export function ChatWidget({
               {
                 get: (_, componentName) => {
                   const matchingComponent = Object.values(dataComponentLookup).find(
-                    (component) => component.name === componentName
+                    (component) => component.name === componentName && !!component.preview?.code
                   );
 
                   if (!matchingComponent) {

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

@@ -99,11 +99,11 @@ export function CredentialItem({
   createdAt,
   tenantId,
   projectId,
-  providerForIcon,
-}: Credential & {
+}: {
+  id: Credential['id'];
+  createdAt: Credential['createdAt'];
   tenantId: string;
   projectId: string;
-  providerForIcon: string;
 }) {
   const linkPath = `/${tenantId}/projects/${projectId}/credentials/${id}`;
 
@@ -113,7 +113,7 @@ export function CredentialItem({
         <ItemCardLink href={linkPath}>
           <ItemCardTitle className="text-md">
             <div className="flex items-center gap-3 min-w-0">
-              <ProviderIcon provider={providerForIcon} size={24} className="flex-shrink-0" />
+              <ProviderIcon provider={id} size={24} className="flex-shrink-0" />
               <span className="truncate">{id}</span>
             </div>
           </ItemCardTitle>

package/src/components/icons/provider-icon.tsx

@@ -3,6 +3,7 @@
 import Image from 'next/image';
 import { useState } from 'react';
 import type { IconComponentProps } from '@/components/ui/svg-icon';
+import { getProviderIcon } from '@/lib/provider-icons';
 
 interface ProviderIconProps extends Omit<IconComponentProps, 'children'> {
   provider: string;
@@ -16,11 +17,10 @@ interface ProviderIconProps extends Omit<IconComponentProps, 'children'> {
 /**
  * Get the local provider icon URL from assets
  */
-const getLocalIconUrl = (provider: string): string => {
-  const normalizedProvider = provider.toLowerCase().replace(/[^a-z0-9-]/g, '-');
-  // Note: In Next.js, files in src/assets need to be imported or moved to public/
-  // For now, we'll assume they're in public/assets/provider-icons/
-  return `/assets/provider-icons/${normalizedProvider}.svg`;
+const getLocalIconUrl = (provider: string): string | null => {
+  const iconName = getProviderIcon(provider);
+  if (!iconName) return null;
+  return `/assets/provider-icons/${iconName}.svg`;
 };
 
 /**
@@ -56,6 +56,18 @@ export function ProviderIcon({
   const [imageError, setImageError] = useState(false);
 
   const iconUrl = getLocalIconUrl(provider);
+  
+  // If no matching icon found, show fallback immediately
+  if (!iconUrl) {
+    return (
+      <div
+        className={`inline-flex items-center justify-center ${className || ''}`}
+        style={{ width: size, height: size }}
+      >
+        {fallback || createTextFallback(provider, size)}
+      </div>
+    );
+  }
 
   return (
     <div

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { MCPTransportType } from '@inkeep/agents-core/client-exports';
+import { detectAuthenticationRequired, MCPTransportType } from '@inkeep/agents-core/client-exports';
 import { nanoid } from 'nanoid';
 import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
@@ -10,6 +10,8 @@ import { GenericInput } from '@/components/form/generic-input';
 import { GenericSelect } from '@/components/form/generic-select';
 import { Button } from '@/components/ui/button';
 import { Form } from '@/components/ui/form';
+import { InfoCard } from '@/components/ui/info-card';
+import { useOAuthLogin } from '@/hooks/use-oauth-login';
 import type { Credential } from '@/lib/api/credentials';
 import { createMCPTool, updateMCPTool } from '@/lib/api/tools';
 import type { MCPTool } from '@/lib/types/tools';
@@ -40,7 +42,7 @@ const defaultValues: MCPToolFormData = {
     },
   },
   imageUrl: '', // Initialize as empty string to avoid uncontrolled/controlled warning
-  credentialReferenceId: 'none',
+  credentialReferenceId: 'oauth',
 };
 
 export function MCPServerForm({
@@ -61,6 +63,11 @@ export function MCPServerForm({
     },
   });
 
+  const { handleOAuthLogin } = useOAuthLogin({
+    tenantId,
+    projectId,
+  });
+
   const { isSubmitting } = form.formState;
 
   // Helper function to filter active tools against available tools
@@ -73,6 +80,51 @@ export function MCPServerForm({
 
   const onSubmit = async (data: MCPToolFormData) => {
     try {
+      // handle oauth login
+      if (data.credentialReferenceId === 'oauth') {
+        const toolId = nanoid();
+
+        const isAuthenticationRequired = await detectAuthenticationRequired({
+          serverUrl: data.config.mcp.server.url,
+          toolId,
+        });
+
+        if (!isAuthenticationRequired) {
+          toast.error(
+            'This MCP server does not support OAuth authentication. Please select a different credential.'
+          );
+          return;
+        }
+
+        const mcpToolData = {
+          id: toolId,
+          name: data.name,
+          config: {
+            type: 'mcp' as const,
+            mcp: {
+              server: {
+                url: data.config.mcp.server.url,
+              },
+              transport: {
+                type: data.config.mcp.transport.type,
+              },
+            },
+          },
+          credentialReferenceId: null,
+          imageUrl: data.imageUrl,
+        };
+
+        const newTool = await createMCPTool(tenantId, projectId, mcpToolData);
+
+        handleOAuthLogin({
+          toolId: newTool.id,
+          mcpServerUrl: data.config.mcp.server.url,
+          toolName: data.name,
+        });
+
+        return;
+      }
+
       // Transform form data to API format
       const transformedData = {
         ...data,
@@ -142,20 +194,41 @@ export function MCPServerForm({
           label="Image URL (optional)"
           placeholder="https://example.com/icon.png or data:image/png;base64,..."
         />
-        <GenericSelect
-          control={form.control}
-          selectTriggerClassName="w-full"
-          name="credentialReferenceId"
-          label="Credential"
-          placeholder="Select a credential"
-          options={[
-            { value: 'none', label: 'No Authentication' },
-            ...credentials.map((credential) => ({
-              value: credential.id,
-              label: credential.id,
-            })),
-          ]}
-        />
+
+        <div className="space-y-3">
+          <GenericSelect
+            control={form.control}
+            selectTriggerClassName="w-full"
+            name="credentialReferenceId"
+            label="Credential"
+            placeholder="Select a credential"
+            options={[
+              { value: 'oauth', label: 'OAuth' },
+              { value: 'none', label: 'No Authentication' },
+              ...credentials.map((credential) => ({
+                value: credential.id,
+                label: credential.id,
+              })),
+            ]}
+          />
+          <InfoCard title="How this works">
+            <div className="space-y-2">
+              <p>
+                Select <code className="bg-background px-1.5 py-0.5 rounded border">OAuth</code> to
+                authenticate with the MCP server's OAuth flow, which will start after you click
+                "Create".
+              </p>
+              <p>
+                Select{' '}
+                <code className="bg-background px-1.5 py-0.5 rounded border">
+                  No Authentication
+                </code>{' '}
+                to skip authentication (i.e. none required or add a credential later).
+              </p>
+              <p>Or select from the existing credentials you have already created.</p>
+            </div>
+          </InfoCard>
+        </div>
 
         {mode === 'update' && (
           <ActiveToolsSelector

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/components/traces/timeline/timeline-wrapper.tsx

@@ -107,7 +107,7 @@ function EmptyTimeline({
                 <ExternalLink
                   className="text-amber-700 dark:text-amber-300 dark:hover:text-amber-200 ml-0 mt-1"
                   iconClassName="text-amber-700 dark:text-amber-300 dark:group-hover/link:text-amber-200"
-                  href={`${DOCS_BASE_URL}/quick-start/traces`}
+                  href={`${DOCS_BASE_URL}/get-started/traces`}
                 >
                   View traces setup guide
                 </ExternalLink>

package/src/components/traces/traces-overview.tsx

@@ -310,7 +310,7 @@ export function TracesOverview({ refreshKey }: TracesOverviewProps) {
               <ExternalLink
                 className="text-amber-700 dark:text-amber-300 dark:hover:text-amber-200"
                 iconClassName="text-amber-700 dark:text-amber-300 dark:group-hover/link:text-amber-200"
-                href={`${DOCS_BASE_URL}/quick-start/traces`}
+                href={`${DOCS_BASE_URL}/get-started/traces`}
               >
                 traces setup guide
               </ExternalLink>

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