Prd 4966

.changeset/perky-ends-fix.md

@@ -0,0 +1,5 @@
+---
+"@inkeep/agents-manage-ui": minor
+---
+
+setup react compiler for all dashboard components and pages

agents-manage-ui/next.config.ts

@@ -19,7 +19,6 @@ const nextConfig: NextConfig = {
   },
   output: 'standalone',
   reactCompiler: {
-    compilationMode: 'annotation',
     // Fail the build on any compiler diagnostic
     panicThreshold: 'all_errors',
   },

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/agents/[agentId]/layout.tsx

@@ -28,7 +28,7 @@ const Layout: FC<LayoutProps<'/[tenantId]/projects/[projectId]/agents/[agentId]'
     return () => {
       setSidebarOpen({ isSidebarSessionOpen: true });
     };
-  }, [setSidebarOpen]);
+  }, []);
 
   // Generate suggestions from context config
   useEffect(() => {
@@ -40,7 +40,7 @@ const Layout: FC<LayoutProps<'/[tenantId]/projects/[projectId]/agents/[agentId]'
       contextVariables,
     });
     setVariableSuggestions(variables);
-  }, [contextConfig, setVariableSuggestions]);
+  }, [contextConfig]);
 
   return (
     <ReactFlowProvider>

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/agents/[agentId]/page.client.tsx

@@ -432,7 +432,7 @@ export const Agent: FC<AgentProps> = ({
 
     // Workaround for a React Compiler limitation.
     // Todo: Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
-    async function doRequest(): Promise<void> {
+    async function doRequest() {
       const [fullProjectResult, toolsResult] = await Promise.all([
         getFullProjectAction(tenantId, projectId),
         options?.fetchTools ? fetchToolsAction(tenantId, projectId) : Promise.resolve(null),
@@ -913,7 +913,6 @@ export const Agent: FC<AgentProps> = ({
     return false;
   };
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: only on mount
   useEffect(() => {
     const onCompletion = () => {
       // @ts-expect-error

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/credentials/new/providers/[providerId]/page.tsx

@@ -3,7 +3,7 @@
 import { CredentialStoreType, DEFAULT_NANGO_STORE_ID } from '@inkeep/agents-core/client-exports';
 import type { ApiProvider } from '@nangohq/types';
 import { useRouter } from 'next/navigation';
-import { use, useCallback, useEffect, useState } from 'react';
+import { use, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import { requiresCredentialForm } from '@/components/credentials/views/auth-form-config';
 import { GenericAuthForm } from '@/components/credentials/views/generic-auth-form';
@@ -32,103 +32,110 @@ function ProviderSetupPage({
 
   const provider = providers?.find((p: ApiProvider) => encodeURIComponent(p.name) === providerId);
 
-  const handleNangoConnect = useCallback(
-    async (event: any) => {
-      if (!provider || event.type !== 'connect') return;
+  const handleNangoConnect = async (event: any) => {
+    if (!provider || event.type !== 'connect') return;
 
-      if (!event.payload?.connectionId || !event.payload?.providerConfigKey) {
-        console.error('Missing required connection data:', event.payload);
-        toast.error('Invalid connection data received');
-        return;
-      }
+    if (!event.payload?.connectionId || !event.payload?.providerConfigKey) {
+      console.error('Missing required connection data:', event.payload);
+      toast.error('Invalid connection data received');
+      return;
+    }
+    // Workaround for a React Compiler limitation.
+    // Todo: Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
+    function doRequest(provider: ApiProvider) {
+      return findOrCreateCredential(tenantId, projectId, {
+        id: generateId(),
+        name: provider.name,
+        type: CredentialStoreType.nango,
+        createdBy: user?.email ?? undefined,
+        credentialStoreId: DEFAULT_NANGO_STORE_ID,
+        retrievalParams: {
+          connectionId: event.payload.connectionId,
+          providerConfigKey: event.payload.providerConfigKey,
+          provider: provider.name,
+          authMode: provider.auth_mode,
+        },
+      });
+    }
 
-      try {
-        await findOrCreateCredential(tenantId, projectId, {
-          id: generateId(),
-          name: provider.name,
-          type: CredentialStoreType.nango,
-          createdBy: user?.email ?? undefined,
-          credentialStoreId: DEFAULT_NANGO_STORE_ID,
-          retrievalParams: {
-            connectionId: event.payload.connectionId,
-            providerConfigKey: event.payload.providerConfigKey,
-            provider: provider.name,
-            authMode: provider.auth_mode,
-          },
-        });
-
-        toast.success('Credential created successfully');
-        router.push(`/${tenantId}/projects/${projectId}/credentials`);
-      } catch (credentialError) {
-        console.error('Failed to create credential record:', credentialError);
-        if (credentialError instanceof Error && credentialError.message?.includes('database')) {
-          toast.error('Failed to save credential. Please check your connection and try again.');
-        } else {
-          toast.error('Failed to save credential. Please try again.');
-        }
+    try {
+      await doRequest(provider);
+      toast.success('Credential created successfully');
+      router.push(`/${tenantId}/projects/${projectId}/credentials`);
+    } catch (credentialError) {
+      console.error('Failed to create credential record:', credentialError);
+      if (credentialError instanceof Error && credentialError.message?.includes('database')) {
+        toast.error('Failed to save credential. Please check your connection and try again.');
+      } else {
+        toast.error('Failed to save credential. Please try again.');
       }
-    },
-    [provider, tenantId, projectId, router, user?.email]
-  );
+    }
+  };
 
-  const handleCreateCredential = useCallback(
-    async (credentials?: Record<string, any>) => {
-      if (!provider) return;
-
-      const { data: organizationData } = await authClient.organization.getFullOrganization();
-
-      setLoading(true);
-      setHasAttempted(true);
-      try {
-        const connectToken = await createProviderConnectSession({
-          providerName: provider.name,
-          uniqueKey: provider.name,
-          displayName: provider.name,
-          credentials:
-            credentials && provider.auth_mode
-              ? ({
-                  ...credentials,
-                  type: provider.auth_mode,
-                } as any)
-              : undefined,
-          endUserId: user?.id,
-          endUserEmail: user?.email,
-          endUserDisplayName: user?.name,
-          organizationId: organizationData?.id,
-          organizationDisplayName: organizationData?.name,
-        });
-
-        openNangoConnect({
-          sessionToken: connectToken,
-          onEvent: handleNangoConnect,
-        });
-      } catch (error) {
-        console.error('Failed to create credential:', error);
-
-        if (error instanceof NangoError) {
-          if (error.operation === 'createConnectSession') {
-            toast.error('Failed to start authentication flow. Please try again.');
-          } else {
-            toast.error('Service temporarily unavailable. Please try again later.');
-          }
-        } else if (error instanceof Error && error.message?.includes('NANGO_SECRET_KEY')) {
-          toast.error('Configuration error. Please contact support.');
+  const handleCreateCredential = async (credentials?: Record<string, any>) => {
+    if (!provider) return;
+
+    const { data: organizationData } = await authClient.organization.getFullOrganization();
+
+    setLoading(true);
+    setHasAttempted(true);
+    // Workaround for a React Compiler limitation.
+    // Todo: Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
+    async function doRequest(provider: ApiProvider) {
+      const connectToken = await createProviderConnectSession({
+        providerName: provider.name,
+        uniqueKey: provider.name,
+        displayName: provider.name,
+        credentials:
+          credentials && provider.auth_mode
+            ? ({
+                ...credentials,
+                type: provider.auth_mode,
+              } as any)
+            : undefined,
+        endUserId: user?.id,
+        endUserEmail: user?.email,
+        endUserDisplayName: user?.name,
+        organizationId: organizationData?.id,
+        organizationDisplayName: organizationData?.name,
+      });
+      openNangoConnect({
+        sessionToken: connectToken,
+        onEvent: handleNangoConnect,
+      });
+    }
+    try {
+      await doRequest(provider);
+    } catch (error) {
+      console.error('Failed to create credential:', error);
+
+      if (error instanceof NangoError) {
+        if (error.operation === 'createConnectSession') {
+          toast.error('Failed to start authentication flow. Please try again.');
         } else {
-          toast.error('Failed to create credential. Please try again.');
+          toast.error('Service temporarily unavailable. Please try again later.');
         }
-      } finally {
-        setLoading(false);
+      } else if (error instanceof Error && error.message?.includes('NANGO_SECRET_KEY')) {
+        toast.error('Configuration error. Please contact support.');
+      } else {
+        toast.error('Failed to create credential. Please try again.');
       }
-    },
-    [provider, openNangoConnect, handleNangoConnect, user?.id, user?.email, user?.name, authClient]
-  );
+    }
+    setLoading(false);
+  };
 
   // Auto-connect when no credential form is required
   useEffect(() => {
     if (provider && !requiresCredentialForm(provider.auth_mode) && !loading && !hasAttempted) {
       handleCreateCredential();
     }
-  }, [provider, loading, hasAttempted, handleCreateCredential]);
+  }, [
+    provider,
+    loading,
+    hasAttempted,
+    // biome-ignore lint/correctness/useExhaustiveDependencies: false positive, variable is stable and optimized by the React Compiler
+    handleCreateCredential,
+  ]);
 
   const handleBack = () => {
     router.push(`/${tenantId}/projects/${projectId}/credentials/new/providers`);

agents-manage-ui/src/app/[tenantId]/settings/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useParams } from 'next/navigation';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ErrorContent } from '@/components/errors/full-page-error';
 import { MembersTable } from '@/components/settings/members-table';
 import { CopyableSingleLineCode } from '@/components/ui/copyable-single-line-code';
@@ -16,6 +16,12 @@ type FullOrganization = NonNullable<
 
 type Member = FullOrganization['members'][number];
 
+// Workaround for a React Compiler limitation.
+// Todo: Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : 'Failed to fetch organization';
+}
+
 export default function SettingsPage() {
   const authClient = useAuthClient();
   const { tenantId } = useParams<{ tenantId: string }>();
@@ -24,10 +30,11 @@ export default function SettingsPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  const fetchOrganization = useCallback(async () => {
+  const fetchOrganization = async () => {
     if (!tenantId) return;
-
-    try {
+    // Workaround for a React Compiler limitation.
+    // Todo: Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
+    async function doRequest() {
       const [orgResult, memberResult] = await Promise.all([
         authClient.organization.getFullOrganization({
           query: {
@@ -50,16 +57,21 @@ export default function SettingsPage() {
       if (memberResult.data) {
         setCurrentMember(memberResult.data as Member);
       }
+    }
+    try {
+      await doRequest();
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to fetch organization');
-    } finally {
-      setLoading(false);
+      setError(getErrorMessage(err));
     }
-  }, [tenantId, authClient]);
+    setLoading(false);
+  };
 
   useEffect(() => {
     fetchOrganization();
-  }, [fetchOrganization]);
+  }, [
+    // biome-ignore lint/correctness/useExhaustiveDependencies: false positive, variable is stable and optimized by the React Compiler
+    fetchOrganization,
+  ]);
 
   if (loading) {
     return <SettingsLoadingSkeleton />;

agents-manage-ui/src/app/accept-invitation/[invitationId]/page.tsx

@@ -34,8 +34,9 @@ export default function AcceptInvitationPage() {
         setIsLoading(false);
         return;
       }
-
-      try {
+      // Workaround for a React Compiler limitation.
+      // Todo: Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
+      async function doRequest() {
         const result = await authClient.organization.getInvitation({
           query: { id: invitationId },
         });
@@ -49,11 +50,13 @@ export default function AcceptInvitationPage() {
         if ('data' in result && result.data) {
           setInvitation(result.data);
         }
+      }
+      try {
+        await doRequest();
       } catch {
         setError('Failed to load invitation');
-      } finally {
-        setIsLoading(false);
       }
+      setIsLoading(false);
     }
 
     fetchInvitation();
@@ -69,7 +72,9 @@ export default function AcceptInvitationPage() {
     setIsAccepting(true);
     setError(null);
 
-    try {
+    // Workaround for a React Compiler limitation.
+    // Todo: Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
+    async function doRequest() {
       const result = await authClient.organization.acceptInvitation({
         invitationId,
       });
@@ -101,6 +106,10 @@ export default function AcceptInvitationPage() {
           router.push('/');
         }
       }, 2000);
+    }
+
+    try {
+      await doRequest();
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to accept invitation');
       setIsAccepting(false);