@inkeep/agents-manage-ui 0.39.3 → 0.39.5

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

@@ -4,7 +4,6 @@ import { DataComponentsList } from '@/components/data-components/data-components
 import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
 import EmptyState from '@/components/layout/empty-state';
-import { MainContent } from '@/components/layout/main-content';
 import { PageHeader } from '@/components/layout/page-header';
 import { Button } from '@/components/ui/button';
 import { dataComponentDescription } from '@/constants/page-descriptions';
@@ -18,49 +17,43 @@ async function DataComponentsPage({
 }: PageProps<'/[tenantId]/projects/[projectId]/components'>) {
   const { tenantId, projectId } = await params;
 
-  let dataComponents: Awaited<ReturnType<typeof fetchDataComponents>>;
   try {
-    dataComponents = await fetchDataComponents(tenantId, projectId);
+    const dataComponents = await fetchDataComponents(tenantId, projectId);
+    const content = dataComponents.data.length ? (
+      <>
+        <PageHeader
+          title="Components"
+          description={dataComponentDescription}
+          action={
+            <Button asChild>
+              <Link
+                href={`/${tenantId}/projects/${projectId}/components/new`}
+                className="flex items-center gap-2"
+              >
+                <Plus className="size-4" />
+                New component
+              </Link>
+            </Button>
+          }
+        />
+        <DataComponentsList
+          tenantId={tenantId}
+          projectId={projectId}
+          dataComponents={dataComponents.data}
+        />
+      </>
+    ) : (
+      <EmptyState
+        title="No components yet."
+        description={dataComponentDescription}
+        link={`/${tenantId}/projects/${projectId}/components/new`}
+        linkText="Create component"
+      />
+    );
+    return <BodyTemplate breadcrumbs={['Components']}>{content}</BodyTemplate>;
   } catch (error) {
     return <FullPageError errorCode={getErrorCode(error)} context="components" />;
   }
-  return (
-    <BodyTemplate breadcrumbs={[{ label: 'Components' }]}>
-      <MainContent className="min-h-full">
-        {dataComponents.data.length > 0 ? (
-          <>
-            <PageHeader
-              title="Components"
-              description={dataComponentDescription}
-              action={
-                <Button asChild>
-                  <Link
-                    href={`/${tenantId}/projects/${projectId}/components/new`}
-                    className="flex items-center gap-2"
-                  >
-                    <Plus className="size-4" />
-                    New component
-                  </Link>
-                </Button>
-              }
-            />
-            <DataComponentsList
-              tenantId={tenantId}
-              projectId={projectId}
-              dataComponents={dataComponents.data}
-            />
-          </>
-        ) : (
-          <EmptyState
-            title="No components yet."
-            description={dataComponentDescription}
-            link={`/${tenantId}/projects/${projectId}/components/new`}
-            linkText="Create component"
-          />
-        )}
-      </MainContent>
-    </BodyTemplate>
-  );
 }
 
 export default DataComponentsPage;

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

@@ -4,7 +4,6 @@ import {
 } from '@/components/credentials/views/edit-credential-form';
 import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
 import { type Credential, fetchCredential } from '@/lib/api/credentials';
 import { getNangoConnectionMetadata } from '@/lib/mcp-tools/nango';
 import { getErrorCode } from '@/lib/utils/error-serialization';
@@ -30,12 +29,28 @@ async function EditCredentialsPage({
 }: PageProps<'/[tenantId]/projects/[projectId]/credentials/[credentialId]'>) {
   const { tenantId, projectId, credentialId } = await params;
 
-  let credential: Credential;
-  let initialFormData: EditCredentialFormData;
-
   try {
-    credential = await fetchCredential(tenantId, projectId, credentialId);
-    initialFormData = await credentialToFormData(credential);
+    const credential = await fetchCredential(tenantId, projectId, credentialId);
+    const initialFormData = await credentialToFormData(credential);
+    return (
+      <BodyTemplate
+        breadcrumbs={[
+          {
+            label: 'Credentials',
+            href: `/${tenantId}/projects/${projectId}/credentials`,
+          },
+          'Edit',
+        ]}
+        className="max-w-2xl mx-auto"
+      >
+        <EditCredentialForm
+          tenantId={tenantId}
+          projectId={projectId}
+          credential={credential}
+          initialFormData={initialFormData}
+        />
+      </BodyTemplate>
+    );
   } catch (error) {
     return (
       <FullPageError
@@ -46,29 +61,6 @@ async function EditCredentialsPage({
       />
     );
   }
-
-  return (
-    <BodyTemplate
-      breadcrumbs={[
-        {
-          label: 'Credentials',
-          href: `/${tenantId}/projects/${projectId}/credentials`,
-        },
-        { label: 'Edit' },
-      ]}
-    >
-      <MainContent>
-        <div className="max-w-2xl mx-auto py-4">
-          <EditCredentialForm
-            tenantId={tenantId}
-            projectId={projectId}
-            credential={credential}
-            initialFormData={initialFormData}
-          />
-        </div>
-      </MainContent>
-    </BodyTemplate>
-  );
 }
 
 export default EditCredentialsPage;

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

@@ -1,6 +1,5 @@
 import { NewCredentialForm } from '@/components/credentials/views/new-credential-form';
 import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
 
 async function NewBearerCredentialsPage({
   params,
@@ -17,14 +16,11 @@ async function NewBearerCredentialsPage({
           label: 'New credential',
           href: `/${tenantId}/projects/${projectId}/credentials/new`,
         },
-        { label: 'Bearer' },
+        'Bearer',
       ]}
+      className="max-w-2xl mx-auto"
     >
-      <MainContent>
-        <div className="max-w-2xl mx-auto py-4">
-          <NewCredentialForm />
-        </div>
-      </MainContent>
+      <NewCredentialForm />
     </BodyTemplate>
   );
 }

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

@@ -1,7 +1,6 @@
 import { KeyRound, Search } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
 import {
   PageHeader,
   PageHeaderContent,
@@ -102,20 +101,18 @@ async function NewCredentialsPage({
           label: 'Credentials',
           href: `/${tenantId}/projects/${projectId}/credentials`,
         },
-        { label: 'New credential' },
+        'New credential',
       ]}
     >
-      <MainContent>
-        {pageHeaderComponent}
-        <ItemCardGrid
-          items={credentialOptions}
-          getKey={(option) => option.id}
-          getHref={(option) => option.href}
-          renderHeader={renderCredentialHeader}
-          renderContent={renderCredentialContent}
-          isDisabled={(option) => option.isDisabled ?? false}
-        />
-      </MainContent>
+      {pageHeaderComponent}
+      <ItemCardGrid
+        items={credentialOptions}
+        getKey={(option) => option.id}
+        getHref={(option) => option.href}
+        renderHeader={renderCredentialHeader}
+        renderContent={renderCredentialContent}
+        isDisabled={(option) => option.isDisabled ?? false}
+      />
     </BodyTemplate>
   );
 }

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

@@ -8,7 +8,6 @@ import { toast } from 'sonner';
 import { requiresCredentialForm } from '@/components/credentials/views/auth-form-config';
 import { GenericAuthForm } from '@/components/credentials/views/generic-auth-form';
 import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
 import { Button } from '@/components/ui/button';
 import { useAuthSession } from '@/hooks/use-auth';
 import { useNangoConnect } from '@/hooks/use-nango-connect';
@@ -184,19 +183,16 @@ function ProviderSetupPage({
           label: 'Providers',
           href: `/${tenantId}/projects/${projectId}/credentials/new/providers`,
         },
-        { label: provider.display_name },
+        provider.display_name,
       ]}
+      className="max-w-2xl mx-auto"
     >
-      <MainContent>
-        <div className="max-w-2xl mx-auto py-4">
-          <GenericAuthForm
-            provider={provider}
-            onBack={handleBack}
-            onSubmit={handleCreateCredential}
-            loading={loading}
-          />
-        </div>
-      </MainContent>
+      <GenericAuthForm
+        provider={provider}
+        onBack={handleBack}
+        onSubmit={handleCreateCredential}
+        loading={loading}
+      />
     </BodyTemplate>
   );
 }

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

@@ -2,7 +2,6 @@ import type { ApiProvider, AuthModeType } from '@nangohq/types';
 import { NangoProvidersGrid } from '@/components/credentials/views/nango-providers-grid';
 import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
 import { fetchNangoProviders } from '@/lib/mcp-tools/nango';
 
 // Supported authentication modes (add new modes here as you implement them)
@@ -36,35 +35,30 @@ async function ProvidersPage({
   params,
 }: PageProps<'/[tenantId]/projects/[projectId]/credentials/new/providers'>) {
   const { tenantId, projectId } = await params;
-  let providers: ApiProvider[];
-
   try {
     const nangoProviders = await fetchNangoProviders();
-    providers = filterSupportedProviders(nangoProviders);
+    const providers = filterSupportedProviders(nangoProviders);
+    return (
+      <BodyTemplate
+        breadcrumbs={[
+          {
+            label: 'Credentials',
+            href: `/${tenantId}/projects/${projectId}/credentials`,
+          },
+          {
+            label: 'New credential',
+            href: `/${tenantId}/projects/${projectId}/credentials/new`,
+          },
+          'Providers',
+        ]}
+      >
+        <NangoProvidersGrid providers={providers} />
+      </BodyTemplate>
+    );
   } catch (err) {
     const error = err instanceof Error ? err.message : 'Failed to load providers';
     return <FullPageError title="Failed to load providers" description={error} />;
   }
-
-  return (
-    <BodyTemplate
-      breadcrumbs={[
-        {
-          label: 'Credentials',
-          href: `/${tenantId}/projects/${projectId}/credentials`,
-        },
-        {
-          label: 'New credential',
-          href: `/${tenantId}/projects/${projectId}/credentials/new`,
-        },
-        { label: 'Providers' },
-      ]}
-    >
-      <MainContent>
-        <NangoProvidersGrid providers={providers} />
-      </MainContent>
-    </BodyTemplate>
-  );
 }
 
 export default ProvidersPage;

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

@@ -5,7 +5,6 @@ import FullPageError from '@/components/errors/full-page-error';
 import { CredentialsIcon } from '@/components/icons/empty-state/credentials';
 import { BodyTemplate } from '@/components/layout/body-template';
 import EmptyState from '@/components/layout/empty-state';
-import { MainContent } from '@/components/layout/main-content';
 import { PageHeader } from '@/components/layout/page-header';
 import { Button } from '@/components/ui/button';
 import { fetchCredentials } from '@/lib/api/credentials';
@@ -21,59 +20,52 @@ async function CredentialsPage({
 }: PageProps<'/[tenantId]/projects/[projectId]/credentials'>) {
   const { tenantId, projectId } = await params;
 
-  let credentials: Awaited<ReturnType<typeof fetchCredentials>>;
   try {
-    credentials = await fetchCredentials(tenantId, projectId);
+    const credentials = await fetchCredentials(tenantId, projectId);
+    const content = credentials.length ? (
+      <>
+        <PageHeader
+          title="Credentials"
+          description={credentialDescription}
+          action={
+            <Button asChild>
+              <Link
+                href={`/${tenantId}/projects/${projectId}/credentials/new`}
+                className="flex items-center gap-2"
+              >
+                <Plus className="size-4" />
+                New credential
+              </Link>
+            </Button>
+          }
+        />
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
+          {credentials?.map((cred) => (
+            <CredentialItem
+              key={cred.id}
+              id={cred.id}
+              name={cred.name}
+              createdAt={cred.createdAt}
+              createdBy={cred.createdBy}
+              tenantId={tenantId}
+              projectId={projectId}
+            />
+          ))}
+        </div>
+      </>
+    ) : (
+      <EmptyState
+        title="No credentials yet."
+        description={credentialDescription}
+        link={`/${tenantId}/projects/${projectId}/credentials/new`}
+        linkText="Create credential"
+        icon={<CredentialsIcon />}
+      />
+    );
+    return <BodyTemplate breadcrumbs={['Credentials']}>{content}</BodyTemplate>;
   } catch (error) {
     return <FullPageError errorCode={getErrorCode(error)} context="credentials" />;
   }
-
-  return (
-    <BodyTemplate breadcrumbs={[{ label: 'Credentials' }]}>
-      <MainContent className="min-h-full">
-        {credentials.length > 0 ? (
-          <>
-            <PageHeader
-              title="Credentials"
-              description={credentialDescription}
-              action={
-                <Button asChild>
-                  <Link
-                    href={`/${tenantId}/projects/${projectId}/credentials/new`}
-                    className="flex items-center gap-2"
-                  >
-                    <Plus className="size-4" />
-                    New credential
-                  </Link>
-                </Button>
-              }
-            />
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
-              {credentials?.map((cred) => (
-                <CredentialItem
-                  key={cred.id}
-                  id={cred.id}
-                  name={cred.name}
-                  createdAt={cred.createdAt}
-                  createdBy={cred.createdBy}
-                  tenantId={tenantId}
-                  projectId={projectId}
-                />
-              ))}
-            </div>
-          </>
-        ) : (
-          <EmptyState
-            title="No credentials yet."
-            description={credentialDescription}
-            link={`/${tenantId}/projects/${projectId}/credentials/new`}
-            linkText="Create credential"
-            icon={<CredentialsIcon />}
-          />
-        )}
-      </MainContent>
-    </BodyTemplate>
-  );
 }
 
 export default CredentialsPage;

package/src/app/[tenantId]/projects/[projectId]/external-agents/[externalAgentId]/edit/page.tsx

@@ -2,7 +2,6 @@ import FullPageError from '@/components/errors/full-page-error';
 import { ExternalAgentForm } from '@/components/external-agents/form/external-agent-form';
 import type { ExternalAgentFormData } from '@/components/external-agents/form/validation';
 import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
 import { type Credential, fetchCredentials } from '@/lib/api/credentials';
 import { fetchExternalAgent } from '@/lib/api/external-agents';
 import type { ExternalAgent } from '@/lib/types/external-agents';
@@ -63,21 +62,18 @@ async function EditExternalAgentPage({
           label: externalAgent.name,
           href: `/${tenantId}/projects/${projectId}/external-agents/${externalAgentId}`,
         },
-        { label: 'Edit' },
+        'Edit',
       ]}
+      className="max-w-2xl mx-auto"
     >
-      <MainContent>
-        <div className="max-w-2xl mx-auto py-4">
-          <ExternalAgentForm
-            initialData={initialFormData}
-            mode="update"
-            externalAgent={externalAgent}
-            credentials={credentials}
-            tenantId={tenantId}
-            projectId={projectId}
-          />
-        </div>
-      </MainContent>
+      <ExternalAgentForm
+        initialData={initialFormData}
+        mode="update"
+        externalAgent={externalAgent}
+        credentials={credentials}
+        tenantId={tenantId}
+        projectId={projectId}
+      />
     </BodyTemplate>
   );
 }

package/src/app/[tenantId]/projects/[projectId]/external-agents/[externalAgentId]/page.tsx

@@ -1,7 +1,6 @@
 import FullPageError from '@/components/errors/full-page-error';
 import { ViewExternalAgentDetails } from '@/components/external-agents/view-external-agent-details';
 import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
 import { fetchExternalAgent } from '@/lib/api/external-agents';
 import { getErrorCode } from '@/lib/utils/error-serialization';
 
@@ -10,9 +9,29 @@ async function ExternalAgentPage({
 }: PageProps<'/[tenantId]/projects/[projectId]/external-agents/[externalAgentId]'>) {
   const { externalAgentId, tenantId, projectId } = await params;
 
-  let externalAgent: Awaited<ReturnType<typeof fetchExternalAgent>>;
   try {
-    externalAgent = await fetchExternalAgent(tenantId, projectId, externalAgentId);
+    const externalAgent = await fetchExternalAgent(tenantId, projectId, externalAgentId);
+    return (
+      <BodyTemplate
+        breadcrumbs={[
+          {
+            label: 'External agents',
+            href: `/${tenantId}/projects/${projectId}/external-agents`,
+          },
+          {
+            label: externalAgent.name,
+            href: `/${tenantId}/projects/${projectId}/external-agents/${externalAgentId}`,
+          },
+        ]}
+        className="max-w-2xl mx-auto"
+      >
+        <ViewExternalAgentDetails
+          externalAgent={externalAgent}
+          tenantId={tenantId}
+          projectId={projectId}
+        />
+      </BodyTemplate>
+    );
   } catch (error) {
     return (
       <FullPageError
@@ -23,29 +42,6 @@ async function ExternalAgentPage({
       />
     );
   }
-
-  return (
-    <BodyTemplate
-      breadcrumbs={[
-        {
-          label: 'External agents',
-          href: `/${tenantId}/projects/${projectId}/external-agents`,
-        },
-        {
-          label: externalAgent.name,
-          href: `/${tenantId}/projects/${projectId}/external-agents/${externalAgentId}`,
-        },
-      ]}
-    >
-      <MainContent>
-        <ViewExternalAgentDetails
-          externalAgent={externalAgent}
-          tenantId={tenantId}
-          projectId={projectId}
-        />
-      </MainContent>
-    </BodyTemplate>
-  );
 }
 
 export default ExternalAgentPage;

package/src/app/[tenantId]/projects/[projectId]/external-agents/new/page.tsx

@@ -1,6 +1,5 @@
 import { ExternalAgentForm } from '@/components/external-agents/form/external-agent-form';
 import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
 import { type Credential, fetchCredentials } from '@/lib/api/credentials';
 
 async function NewExternalAgentPage({
@@ -21,19 +20,16 @@ async function NewExternalAgentPage({
           label: 'External agents',
           href: `/${tenantId}/projects/${projectId}/external-agents`,
         },
-        { label: 'New' },
+        'New',
       ]}
+      className="max-w-2xl mx-auto"
     >
-      <MainContent>
-        <div className="max-w-2xl mx-auto py-4">
-          <ExternalAgentForm
-            mode="create"
-            credentials={credentials}
-            tenantId={tenantId}
-            projectId={projectId}
-          />
-        </div>
-      </MainContent>
+      <ExternalAgentForm
+        mode="create"
+        credentials={credentials}
+        tenantId={tenantId}
+        projectId={projectId}
+      />
     </BodyTemplate>
   );
 }

package/src/app/[tenantId]/projects/[projectId]/external-agents/page.tsx

@@ -4,7 +4,6 @@ import FullPageError from '@/components/errors/full-page-error';
 import { ExternalAgentsList } from '@/components/external-agents/external-agents-list';
 import { BodyTemplate } from '@/components/layout/body-template';
 import EmptyState from '@/components/layout/empty-state';
-import { MainContent } from '@/components/layout/main-content';
 import { PageHeader } from '@/components/layout/page-header';
 import { Button } from '@/components/ui/button';
 import { fetchExternalAgents } from '@/lib/api/external-agents';
@@ -18,46 +17,39 @@ async function ExternalAgentsPage({
 }: PageProps<'/[tenantId]/projects/[projectId]/external-agents'>) {
   const { tenantId, projectId } = await params;
 
-  let externalAgents: Awaited<ReturnType<typeof fetchExternalAgents>>;
   try {
-    externalAgents = await fetchExternalAgents(tenantId, projectId);
+    const externalAgents = await fetchExternalAgents(tenantId, projectId);
+    const content = externalAgents.length ? (
+      <>
+        <PageHeader
+          title="External agents"
+          description={externalAgentsDescription}
+          action={
+            <Button asChild>
+              <Link
+                href={`/${tenantId}/projects/${projectId}/external-agents/new`}
+                className="flex items-center gap-2"
+              >
+                <Plus className="size-4" />
+                New external agent
+              </Link>
+            </Button>
+          }
+        />
+        <ExternalAgentsList externalAgents={externalAgents} />
+      </>
+    ) : (
+      <EmptyState
+        title="No external agents yet."
+        description={externalAgentsDescription}
+        link={`/${tenantId}/projects/${projectId}/external-agents/new`}
+        linkText="Create external agent"
+      />
+    );
+    return <BodyTemplate breadcrumbs={['External agents']}>{content}</BodyTemplate>;
   } catch (error) {
     return <FullPageError errorCode={getErrorCode(error)} context="external agents" />;
   }
-
-  return (
-    <BodyTemplate breadcrumbs={[{ label: 'External agents' }]}>
-      <MainContent className="min-h-full">
-        {externalAgents.length > 0 ? (
-          <>
-            <PageHeader
-              title="External agents"
-              description={externalAgentsDescription}
-              action={
-                <Button asChild>
-                  <Link
-                    href={`/${tenantId}/projects/${projectId}/external-agents/new`}
-                    className="flex items-center gap-2"
-                  >
-                    <Plus className="size-4" />
-                    New external agent
-                  </Link>
-                </Button>
-              }
-            />
-            <ExternalAgentsList externalAgents={externalAgents} />
-          </>
-        ) : (
-          <EmptyState
-            title="No external agents yet."
-            description={externalAgentsDescription}
-            link={`/${tenantId}/projects/${projectId}/external-agents/new`}
-            linkText="Create external agent"
-          />
-        )}
-      </MainContent>
-    </BodyTemplate>
-  );
 }
 
 export default ExternalAgentsPage;