@inkeep/agents-manage-ui 0.1.0

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

@@ -0,0 +1,44 @@
+import { ArtifactComponentForm } from '@/components/artifact-components/form/artifact-component-form';
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+import { fetchArtifactComponent } from '@/lib/api/artifact-components';
+
+export const dynamic = 'force-dynamic';
+
+interface ArtifactComponentPageProps {
+  params: Promise<{ tenantId: string; projectId: string; artifactComponentId: string }>;
+}
+
+export default async function ArtifactComponentPage({ params }: ArtifactComponentPageProps) {
+  const { artifactComponentId, tenantId, projectId } = await params;
+  const artifactComponent = await fetchArtifactComponent(tenantId, projectId, artifactComponentId);
+  const { name, description, summaryProps, fullProps } = artifactComponent;
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        {
+          label: 'Artifact components',
+          href: `/${tenantId}/projects/${projectId}/artifact-components`,
+        },
+        { label: artifactComponent.name },
+      ]}
+    >
+      <MainContent>
+        <div className="max-w-2xl mx-auto py-4">
+          <ArtifactComponentForm
+            tenantId={tenantId}
+            projectId={projectId}
+            id={artifactComponentId}
+            initialData={{
+              id: artifactComponentId,
+              name,
+              description: description ?? '',
+              summaryProps,
+              fullProps,
+            }}
+          />
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
+}

package/src/app/[tenantId]/projects/[projectId]/artifact-components/error.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import FullPageError from '@/components/errors/full-page-error';
+
+export default function ArtifactComponentsError() {
+  return <FullPageError description="Something went wrong." />;
+}

package/src/app/[tenantId]/projects/[projectId]/artifact-components/loading.tsx

@@ -0,0 +1,20 @@
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+import { PageHeader } from '@/components/layout/page-header';
+import { Skeleton } from '@/components/ui/skeleton';
+import { artifactDescription } from '@/constants/page-descriptions';
+
+export default function Loading() {
+  return (
+    <BodyTemplate breadcrumbs={[{ label: 'Artifact components' }]}>
+      <MainContent>
+        <PageHeader title="Artifact components" description={artifactDescription} />
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={`loading-artifact-${i}`} className="h-36 w-full rounded-lg" />
+          ))}
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
+}

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

@@ -0,0 +1,30 @@
+import { ArtifactComponentForm } from '@/components/artifact-components/form/artifact-component-form';
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+
+interface NewArtifactComponentPageProps {
+  params: Promise<{ tenantId: string; projectId: string }>;
+}
+
+async function NewArtifactComponentPage({ params }: NewArtifactComponentPageProps) {
+  const { tenantId, projectId } = await params;
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        {
+          label: 'Artifact components',
+          href: `/${tenantId}/projects/${projectId}/artifact-components`,
+        },
+        { label: 'New Artifact Component' },
+      ]}
+    >
+      <MainContent>
+        <div className="max-w-2xl mx-auto py-4">
+          <ArtifactComponentForm tenantId={tenantId} projectId={projectId} />
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default NewArtifactComponentPage;

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

@@ -0,0 +1,69 @@
+import { Plus } from 'lucide-react';
+import Link from 'next/link';
+import { ArtifactComponentsList } from '@/components/artifact-components/artifact-component-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 { artifactDescription } from '@/constants/page-descriptions';
+import { type ArtifactComponent, fetchArtifactComponents } from '@/lib/api/artifact-components';
+
+export const dynamic = 'force-dynamic';
+
+interface ArtifactComponentsPageProps {
+  params: Promise<{ tenantId: string; projectId: string }>;
+}
+
+async function ArtifactComponentsPage({ params }: ArtifactComponentsPageProps) {
+  const { tenantId, projectId } = await params;
+  let artifacts: { data: ArtifactComponent[] } = { data: [] };
+  try {
+    const response = await fetchArtifactComponents(tenantId, projectId);
+    artifacts = response;
+  } catch (_error) {
+    throw new Error('Failed to fetch artifacts components');
+  }
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        {
+          label: 'Artifact components',
+          href: `/${tenantId}/projects/${projectId}/artifact-components`,
+        },
+      ]}
+    >
+      <MainContent className="min-h-full">
+        {artifacts.data.length > 0 ? (
+          <>
+            <PageHeader
+              title="Artifact components"
+              description={artifactDescription}
+              action={
+                <Button asChild>
+                  <Link href={`/${tenantId}/projects/${projectId}/artifact-components/new`}>
+                    <Plus className="size-4" /> New artifact component
+                  </Link>
+                </Button>
+              }
+            />
+            <ArtifactComponentsList
+              tenantId={tenantId}
+              projectId={projectId}
+              artifacts={artifacts.data}
+            />
+          </>
+        ) : (
+          <EmptyState
+            title="No artifact components yet."
+            description={artifactDescription}
+            link={`/${tenantId}/projects/${projectId}/artifact-components/new`}
+            linkText="Create artifact component"
+          />
+        )}
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default ArtifactComponentsPage;

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

@@ -0,0 +1,64 @@
+import { notFound } from 'next/navigation';
+import {
+  EditCredentialForm,
+  type EditCredentialFormData,
+} from '@/components/credentials/views/edit-credential-form';
+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';
+
+async function credentialToFormData(credential: Credential): Promise<EditCredentialFormData> {
+  let connectionMetadata: Record<string, string> = {};
+  if (credential.retrievalParams?.providerConfigKey && credential.retrievalParams?.connectionId) {
+    connectionMetadata =
+      (await getNangoConnectionMetadata({
+        providerConfigKey: credential.retrievalParams.providerConfigKey as string,
+        connectionId: credential.retrievalParams.connectionId as string,
+      })) || {};
+  }
+
+  return {
+    name: credential.id,
+    metadata: connectionMetadata,
+  };
+}
+
+async function EditCredentialsPage({
+  params,
+}: {
+  params: Promise<{ tenantId: string; projectId: string; credentialId: string }>;
+}) {
+  const { tenantId, projectId, credentialId } = await params;
+
+  try {
+    // Fetch credential data on the server
+    const credential = await fetchCredential(tenantId, projectId, credentialId);
+    const initialFormData = await credentialToFormData(credential);
+
+    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>
+    );
+  } catch (error) {
+    console.error('Failed to fetch credential:', error);
+    notFound();
+  }
+}
+
+export default EditCredentialsPage;

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

@@ -0,0 +1,7 @@
+'use client';
+
+import FullPageError from '@/components/errors/full-page-error';
+
+export default function CredentialsError() {
+  return <FullPageError description="Something went wrong." />;
+}

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

@@ -0,0 +1,28 @@
+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,
+}: {
+  params: Promise<{ tenantId: string; projectId: string }>;
+}) {
+  const { tenantId, projectId } = await params;
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        { label: 'Credentials', href: `/${tenantId}/projects/${projectId}/credentials` },
+        { label: 'New Credential', href: `/${tenantId}/projects/${projectId}/credentials/new` },
+        { label: 'Bearer' },
+      ]}
+    >
+      <MainContent>
+        <div className="max-w-2xl mx-auto py-4">
+          <NewCredentialForm />
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default NewBearerCredentialsPage;

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

@@ -0,0 +1,78 @@
+import { Search, Settings } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+import { PageHeader } from '@/components/layout/page-header';
+import { CardDescription, CardTitle } from '@/components/ui/card';
+import { ItemCardGrid } from '@/components/ui/item-card-grid';
+
+interface CredentialOption {
+  id: string;
+  icon: ReactNode;
+  title: string;
+  description: string;
+  href: string;
+}
+
+async function NewCredentialsPage({
+  params,
+}: {
+  params: Promise<{ tenantId: string; projectId: string }>;
+}) {
+  const { tenantId, projectId } = await params;
+  const credentialOptions: CredentialOption[] = [
+    {
+      id: 'providers',
+      icon: <Search className="w-6 h-6 mt-0.5 flex-shrink-0" />,
+      title: 'Browse Providers',
+      description:
+        'Connect to popular providers like GitHub, Google Drive, Slack, and more. This is useful when you want to give MCP Servers access to your providers.',
+      href: `/${tenantId}/projects/${projectId}/credentials/new/providers`,
+    },
+    {
+      id: 'bearer',
+      icon: <Settings className="w-6 h-6 mt-0.5 flex-shrink-0" />,
+      title: 'Bearer Authentication',
+      description:
+        'Create a bearer token for API authentication. Useful when you need to provide secure access tokens to your MCP Servers.',
+      href: `/${tenantId}/projects/${projectId}/credentials/new/bearer`,
+    },
+  ];
+
+  const renderCredentialHeader = (option: CredentialOption) => (
+    <div className="flex items-start gap-3">
+      {option.icon}
+      <div className="flex-1 min-w-0">
+        <CardTitle className="text-base truncate">{option.title}</CardTitle>
+      </div>
+    </div>
+  );
+
+  const renderCredentialContent = (option: CredentialOption) => (
+    <CardDescription className="text-sm text-muted-foreground">
+      {option.description}
+    </CardDescription>
+  );
+
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        { label: 'Credentials', href: `/${tenantId}/projects/${projectId}/credentials` },
+        { label: 'New Credential' },
+      ]}
+    >
+      <MainContent>
+        <PageHeader title="New Credential" description="Create credentials for your MCP servers" />
+        <ItemCardGrid
+          items={credentialOptions}
+          getKey={(option) => option.id}
+          getHref={(option) => option.href}
+          renderHeader={renderCredentialHeader}
+          renderContent={renderCredentialContent}
+        />
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default NewCredentialsPage;

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

@@ -0,0 +1,192 @@
+'use client';
+
+import { generateIdFromName } 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 { 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 { useNangoConnect } from '@/hooks/use-nango-connect';
+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';
+
+interface ProviderSetupPageProps {
+  params: Promise<{
+    providerId: string;
+    tenantId: string;
+    projectId: string;
+  }>;
+}
+
+function ProviderSetupPage({ params }: ProviderSetupPageProps) {
+  const router = useRouter();
+  const { providers, loading: providersLoading } = useNangoProviders();
+  const [loading, setLoading] = useState(false);
+  const [hasAttempted, setHasAttempted] = useState(false);
+  const openNangoConnect = useNangoConnect();
+
+  const { providerId, tenantId, projectId } = use(params);
+
+  const provider = providers?.find((p: ApiProvider) => encodeURIComponent(p.name) === providerId);
+
+  const handleNangoConnect = useCallback(
+    async (event: any) => {
+      if (!provider || event.type !== 'connect') return;
+
+      // Validate required payload data
+      if (!event.payload?.connectionId || !event.payload?.providerConfigKey) {
+        console.error('Missing required connection data:', event.payload);
+        toast.error('Invalid connection data received');
+        return;
+      }
+
+      const credentialId = generateIdFromName(`${provider.name}-${event.payload.connectionId}`);
+
+      try {
+        await findOrCreateCredential(tenantId, projectId, {
+          id: credentialId,
+          type: 'nango',
+          credentialStoreId: 'nango-default',
+          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.');
+        }
+      }
+    },
+    [provider, tenantId, projectId, router]
+  );
+
+  const handleCreateCredential = useCallback(
+    async (credentials?: Record<string, any>) => {
+      if (!provider) return;
+
+      setLoading(true);
+      setHasAttempted(true);
+      try {
+        const connectToken = await createProviderConnectSession({
+          providerName: provider.name,
+          credentials:
+            credentials && provider.auth_mode
+              ? ({
+                  ...credentials,
+                  type: provider.auth_mode,
+                } as any)
+              : undefined,
+        });
+
+        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.');
+        } else {
+          toast.error('Failed to create credential. Please try again.');
+        }
+      } finally {
+        setLoading(false);
+      }
+    },
+    [provider, openNangoConnect, handleNangoConnect]
+  );
+
+  // Auto-connect when no credential form is required
+  useEffect(() => {
+    if (provider && !requiresCredentialForm(provider.auth_mode) && !loading && !hasAttempted) {
+      handleCreateCredential();
+    }
+  }, [provider, loading, hasAttempted, handleCreateCredential]);
+
+  const handleBack = () => {
+    router.push(`/${tenantId}/projects/${projectId}/credentials/new/providers`);
+  };
+
+  if (providersLoading) {
+    return <div className="flex items-center justify-center h-64">Loading provider...</div>;
+  }
+
+  if (!provider) {
+    return (
+      <div className="flex flex-col items-center justify-center h-64 space-y-4">
+        <h2 className="text-xl font-semibold">Provider not found</h2>
+        <p className="text-muted-foreground">
+          The provider "{decodeURIComponent(providerId)}" was not found.
+        </p>
+        <button type="button" onClick={handleBack} className="text-primary hover:underline">
+          ← Back to providers
+        </button>
+      </div>
+    );
+  }
+
+  const isCredentialFormRequired = requiresCredentialForm(provider.auth_mode);
+
+  if (!isCredentialFormRequired) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="flex flex-col items-center justify-center space-y-4">
+          <h2 className="text-xl font-semibold">Connecting to {provider.name}...</h2>
+          <p className="text-muted-foreground">
+            Please wait while we connect to {provider.name}...
+          </p>
+          <Button onClick={handleBack}>Back to providers</Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        { label: 'Credentials', href: `/${tenantId}/projects/${projectId}/credentials` },
+        { label: 'New Credential', href: `/${tenantId}/projects/${projectId}/credentials/new` },
+        {
+          label: 'Providers',
+          href: `/${tenantId}/projects/${projectId}/credentials/new/providers`,
+        },
+        { label: provider.display_name },
+      ]}
+    >
+      <MainContent>
+        <div className="max-w-2xl mx-auto py-4">
+          <GenericAuthForm
+            provider={provider}
+            onBack={handleBack}
+            onSubmit={handleCreateCredential}
+            loading={loading}
+          />
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default ProviderSetupPage;

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

@@ -0,0 +1,60 @@
+import type { ApiProvider, AuthModeType } from '@nangohq/types';
+import { NangoProvidersGrid } from '@/components/credentials/views/nango-providers-grid';
+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)
+const SUPPORTED_AUTH_MODES: AuthModeType[] = [
+  'OAUTH1',
+  'OAUTH2',
+  'OAUTH2_CC',
+  'API_KEY',
+  'BASIC',
+  'APP',
+  'JWT',
+  'TBA',
+  'CUSTOM',
+  'NONE',
+];
+
+/**
+ * Filter providers by supported authentication modes
+ */
+function filterSupportedProviders(providers: ApiProvider[]): ApiProvider[] {
+  return providers.filter((provider) => SUPPORTED_AUTH_MODES.includes(provider.auth_mode));
+}
+
+async function ProvidersPage({
+  params,
+}: {
+  params: Promise<{ tenantId: string; projectId: string }>;
+}) {
+  const { tenantId, projectId } = await params;
+  let providers: ApiProvider[];
+  let error = null;
+
+  try {
+    const nangoProviders = await fetchNangoProviders();
+    providers = filterSupportedProviders(nangoProviders);
+  } catch (err) {
+    error = err instanceof Error ? err.message : 'Failed to load providers';
+    providers = [];
+  }
+
+  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} error={error} />
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default ProvidersPage;

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

@@ -0,0 +1,67 @@
+import { Plus } from 'lucide-react';
+import Link from 'next/link';
+import { CredentialsList } from '@/components/credentials/credentials-list';
+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 type { Credential } from '@/lib/api/credentials';
+import { fetchCredentials } from '@/lib/api/credentials';
+
+export const dynamic = 'force-dynamic';
+
+const credentialDescription =
+  'Create credentials that MCP Servers can use to access external services.';
+
+async function CredentialsPage({
+  params,
+}: {
+  params: Promise<{ tenantId: string; projectId: string }>;
+}) {
+  const { tenantId, projectId } = await params;
+  let credentials: Credential[] = [];
+  try {
+    credentials = await fetchCredentials(tenantId, projectId);
+  } catch (_error) {
+    throw new Error('Failed to fetch 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>
+              }
+            />
+            <CredentialsList tenantId={tenantId} projectId={projectId} credentials={credentials} />
+          </>
+        ) : (
+          <EmptyState
+            title="No credentials yet."
+            description={credentialDescription}
+            link={`/${tenantId}/projects/${projectId}/credentials/new`}
+            linkText="Create credential"
+            icon={<CredentialsIcon />}
+          />
+        )}
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default CredentialsPage;