@inkeep/agents-manage-ui 0.0.0-dev-20251021164445 → 0.0.0-dev-20251021181503

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

@@ -12,11 +12,9 @@ import { fetchArtifactComponents } from '@/lib/api/artifact-components';
 
 export const dynamic = 'force-dynamic';
 
-interface ArtifactComponentsPageProps {
-  params: Promise<{ tenantId: string; projectId: string }>;
-}
-
-async function ArtifactComponentsPage({ params }: ArtifactComponentsPageProps) {
+async function ArtifactComponentsPage({
+  params,
+}: PageProps<'/[tenantId]/projects/[projectId]/artifacts'>) {
   const { tenantId, projectId } = await params;
 
   let artifacts: Awaited<ReturnType<typeof fetchArtifactComponents>>;

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

@@ -6,15 +6,9 @@ import { fetchDataComponent } from '@/lib/api/data-components';
 
 export const dynamic = 'force-dynamic';
 
-interface DataComponentPageProps {
-  params: Promise<{
-    tenantId: string;
-    projectId: string;
-    dataComponentId: string;
-  }>;
-}
-
-export default async function DataComponentPage({ params }: DataComponentPageProps) {
+export default async function DataComponentPage({
+  params,
+}: PageProps<'/[tenantId]/projects/[projectId]/components/[dataComponentId]'>) {
   const { tenantId, projectId, dataComponentId } = await params;
 
   let dataComponent: Awaited<ReturnType<typeof fetchDataComponent>>;

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

@@ -2,11 +2,9 @@ import { DataComponentForm } from '@/components/data-components/form/data-compon
 import { BodyTemplate } from '@/components/layout/body-template';
 import { MainContent } from '@/components/layout/main-content';
 
-interface NewDataComponentPageProps {
-  params: Promise<{ tenantId: string; projectId: string }>;
-}
-
-async function NewDataComponentPage({ params }: NewDataComponentPageProps) {
+async function NewDataComponentPage({
+  params,
+}: PageProps<'/[tenantId]/projects/[projectId]/components/new'>) {
   const { tenantId, projectId } = await params;
   return (
     <BodyTemplate

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

@@ -12,11 +12,9 @@ import { fetchDataComponents } from '@/lib/api/data-components';
 
 export const dynamic = 'force-dynamic';
 
-interface DataComponentsPageProps {
-  params: Promise<{ tenantId: string; projectId: string }>;
-}
-
-async function DataComponentsPage({ params }: DataComponentsPageProps) {
+async function DataComponentsPage({
+  params,
+}: PageProps<'/[tenantId]/projects/[projectId]/components'>) {
   const { tenantId, projectId } = await params;
 
   let dataComponents: Awaited<ReturnType<typeof fetchDataComponents>>;

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

@@ -26,13 +26,7 @@ async function credentialToFormData(credential: Credential): Promise<EditCredent
 
 async function EditCredentialsPage({
   params,
-}: {
-  params: Promise<{
-    tenantId: string;
-    projectId: string;
-    credentialId: string;
-  }>;
-}) {
+}: PageProps<'/[tenantId]/projects/[projectId]/credentials/[credentialId]'>) {
   const { tenantId, projectId, credentialId } = await params;
 
   let credential: Credential;

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

@@ -4,9 +4,7 @@ import { MainContent } from '@/components/layout/main-content';
 
 async function NewBearerCredentialsPage({
   params,
-}: {
-  params: Promise<{ tenantId: string; projectId: string }>;
-}) {
+}: PageProps<'/[tenantId]/projects/[projectId]/credentials/new/bearer'>) {
   const { tenantId, projectId } = await params;
   return (
     <BodyTemplate

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

@@ -26,9 +26,7 @@ interface CredentialOption {
 
 async function NewCredentialsPage({
   params,
-}: {
-  params: Promise<{ tenantId: string; projectId: string }>;
-}) {
+}: PageProps<'/[tenantId]/projects/[projectId]/credentials/new'>) {
   const { tenantId, projectId } = await params;
 
   const credentialStoresStatus = await listCredentialStores(tenantId, projectId);
@@ -86,7 +84,8 @@ async function NewCredentialsPage({
         <div className="text-muted-foreground text-sm font-normal space-y-2">
           <p className="mb-8">Create credentials for your MCP servers.</p>
           <p>
-            Nango Store is recommended to create credentials. Otherwise, make sure Keychain Store is available.
+            Nango Store is recommended to create credentials. Otherwise, make sure Keychain Store is
+            available.
             <ExternalLink href={`${DOCS_BASE_URL}/get-started/credentials`}>
               Learn more
             </ExternalLink>

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

@@ -16,15 +16,9 @@ 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) {
+function ProviderSetupPage({
+  params,
+}: PageProps<'/[tenantId]/projects/[projectId]/credentials/new/providers/[providerId]'>) {
   const router = useRouter();
   const { providers, loading: providersLoading } = useNangoProviders();
   const [loading, setLoading] = useState(false);

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

@@ -27,9 +27,7 @@ function filterSupportedProviders(providers: ApiProvider[]): ApiProvider[] {
 
 async function ProvidersPage({
   params,
-}: {
-  params: Promise<{ tenantId: string; projectId: string }>;
-}) {
+}: PageProps<'/[tenantId]/projects/[projectId]/credentials/new/providers'>) {
   const { tenantId, projectId } = await params;
   let providers: ApiProvider[];
   let error = null;

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

@@ -17,9 +17,7 @@ const credentialDescription =
 
 async function CredentialsPage({
   params,
-}: {
-  params: Promise<{ tenantId: string; projectId: string }>;
-}) {
+}: PageProps<'/[tenantId]/projects/[projectId]/credentials'>) {
   const { tenantId, projectId } = await params;
 
   let credentials: Awaited<ReturnType<typeof fetchCredentials>>;

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

@@ -0,0 +1,86 @@
+import FullPageError from '@/components/errors/full-page-error';
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+import { ExternalAgentForm } from '@/components/external-agents/form/external-agent-form';
+import type { ExternalAgentFormData } from '@/components/external-agents/form/validation';
+import { type Credential, fetchCredentials } from '@/lib/api/credentials';
+import { fetchExternalAgent } from '@/lib/api/external-agents';
+import type { ExternalAgent } from '@/lib/types/external-agents';
+
+interface EditExternalAgentPageProps {
+  params: Promise<{ externalAgentId: string; tenantId: string; projectId: string }>;
+}
+
+async function EditExternalAgentPage({ params }: EditExternalAgentPageProps) {
+  const { externalAgentId, tenantId, projectId } = await params;
+
+  // Fetch both in parallel with individual error handling
+  const [externalAgentResult, credentialsResult] = await Promise.allSettled([
+    fetchExternalAgent(tenantId, projectId, externalAgentId),
+    fetchCredentials(tenantId, projectId),
+  ]);
+
+  // Handle external agent result (required)
+  let externalAgent: ExternalAgent;
+  if (externalAgentResult.status === 'fulfilled') {
+    externalAgent = externalAgentResult.value;
+  } else {
+    console.error('Failed to load external agent:', externalAgentResult.reason);
+    return (
+      <FullPageError
+        error={externalAgentResult.reason as Error}
+        link={`/${tenantId}/projects/${projectId}/external-agents`}
+        linkText="Back to external agents"
+        context="External agent"
+      />
+    );
+  }
+
+  // Handle credentials result (optional - fallback to empty array)
+  let credentials: Credential[] = [];
+  if (credentialsResult.status === 'fulfilled') {
+    credentials = credentialsResult.value;
+  } else {
+    console.error('Failed to load credentials:', credentialsResult.reason);
+    // Continue without credentials
+  }
+
+  // Convert ExternalAgent to ExternalAgentFormData format
+  const initialFormData: ExternalAgentFormData = {
+    name: externalAgent.name,
+    description: externalAgent.description || '',
+    baseUrl: externalAgent.baseUrl,
+    credentialReferenceId: externalAgent.credentialReferenceId || 'none',
+  };
+
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        {
+          label: 'External agents',
+          href: `/${tenantId}/projects/${projectId}/external-agents`,
+        },
+        {
+          label: externalAgent.name,
+          href: `/${tenantId}/projects/${projectId}/external-agents/${externalAgentId}`,
+        },
+        { label: 'Edit' },
+      ]}
+    >
+      <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>
+    </BodyTemplate>
+  );
+}
+
+export default EditExternalAgentPage;

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

@@ -0,0 +1,52 @@
+import FullPageError from '@/components/errors/full-page-error';
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+import { ViewExternalAgentDetails } from '@/components/external-agents/view-external-agent-details';
+import { fetchExternalAgent } from '@/lib/api/external-agents';
+
+interface ExternalAgentPageProps {
+  params: Promise<{ externalAgentId: string; tenantId: string; projectId: string }>;
+}
+
+async function ExternalAgentPage({ params }: ExternalAgentPageProps) {
+  const { externalAgentId, tenantId, projectId } = await params;
+
+  let externalAgent: Awaited<ReturnType<typeof fetchExternalAgent>>;
+  try {
+    externalAgent = await fetchExternalAgent(tenantId, projectId, externalAgentId);
+  } catch (error) {
+    return (
+      <FullPageError
+        error={error as Error}
+        link={`/${tenantId}/projects/${projectId}/external-agents`}
+        linkText="Back to external agents"
+        context="External agent"
+      />
+    );
+  }
+
+  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

@@ -0,0 +1,43 @@
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+import { ExternalAgentForm } from '@/components/external-agents/form/external-agent-form';
+import { type Credential, fetchCredentials } from '@/lib/api/credentials';
+
+async function NewExternalAgentPage({
+  params,
+}: {
+  params: Promise<{ tenantId: string; projectId: string }>;
+}) {
+  const { tenantId, projectId } = await params;
+  let credentials: Credential[] = [];
+  try {
+    credentials = await fetchCredentials(tenantId, projectId);
+  } catch (error) {
+    console.error('Failed to load credentials:', error);
+  }
+
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        {
+          label: 'External agents',
+          href: `/${tenantId}/projects/${projectId}/external-agents`,
+        },
+        { label: 'New' },
+      ]}
+    >
+      <MainContent>
+        <div className="max-w-2xl mx-auto py-4">
+          <ExternalAgentForm
+            mode="create"
+            credentials={credentials}
+            tenantId={tenantId}
+            projectId={projectId}
+          />
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default NewExternalAgentPage;

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

@@ -0,0 +1,64 @@
+import { Plus } from 'lucide-react';
+import Link from 'next/link';
+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 { ExternalAgentsList } from '@/components/external-agents/external-agents-list';
+import { Button } from '@/components/ui/button';
+import { fetchExternalAgents } from '@/lib/api/external-agents';
+
+const externalAgentsDescription =
+  'Create external agents that can be delegated to from your internal agents.';
+
+async function ExternalAgentsPage({
+  params,
+}: {
+  params: Promise<{ tenantId: string; projectId: string }>;
+}) {
+  const { tenantId, projectId } = await params;
+
+  let externalAgents: Awaited<ReturnType<typeof fetchExternalAgents>>;
+  try {
+    externalAgents = await fetchExternalAgents(tenantId, projectId);
+  } catch (error) {
+    return <FullPageError error={error as 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;

package/src/app/[tenantId]/projects/[projectId]/layout.tsx

@@ -1,15 +1,12 @@
-import type { ReactNode } from 'react';
 import FullPageError from '@/components/errors/full-page-error';
 import { fetchProject } from '@/lib/api/projects';
 
 export const dynamic = 'force-dynamic';
 
-interface ProjectLayoutProps {
-  children: ReactNode;
-  params: Promise<{ tenantId: string; projectId: string }>;
-}
-
-export default async function ProjectLayout({ children, params }: ProjectLayoutProps) {
+export default async function ProjectLayout({
+  children,
+  params,
+}: LayoutProps<'/[tenantId]/projects/[projectId]'>) {
   const { tenantId, projectId } = await params;
 
   try {

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/[mcpServerId]/edit/page.tsx

@@ -8,11 +8,9 @@ import { type Credential, fetchCredentials } from '@/lib/api/credentials';
 import { fetchMCPTool } from '@/lib/api/tools';
 import type { MCPTool } from '@/lib/types/tools';
 
-interface EditMCPPageProps {
-  params: Promise<{ mcpServerId: string; tenantId: string; projectId: string }>;
-}
-
-async function EditMCPPage({ params }: EditMCPPageProps) {
+async function EditMCPPage({
+  params,
+}: PageProps<'/[tenantId]/projects/[projectId]/mcp-servers/[mcpServerId]/edit'>) {
   const { mcpServerId, tenantId, projectId } = await params;
 
   // Fetch both in parallel with individual error handling

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/[mcpServerId]/page.tsx

@@ -4,11 +4,9 @@ import { MainContent } from '@/components/layout/main-content';
 import { ViewMCPServerDetails } from '@/components/mcp-servers/view-mcp-server-details';
 import { fetchMCPTool } from '@/lib/api/tools';
 
-interface MCPPageProps {
-  params: Promise<{ mcpServerId: string; tenantId: string; projectId: string }>;
-}
-
-async function MCPPage({ params }: MCPPageProps) {
+async function MCPPage({
+  params,
+}: PageProps<'/[tenantId]/projects/[projectId]/mcp-servers/[mcpServerId]'>) {
   const { mcpServerId, tenantId, projectId } = await params;
 
   let tool: Awaited<ReturnType<typeof fetchMCPTool>>;

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/new/layout.tsx

@@ -4,10 +4,7 @@ import { MainContent } from '@/components/layout/main-content';
 export default async function NewMCPServerLayout({
   children,
   params,
-}: {
-  children: React.ReactNode;
-  params: Promise<{ tenantId: string; projectId: string }>;
-}) {
+}: LayoutProps<'/[tenantId]/projects/[projectId]/mcp-servers/new'>) {
   const { tenantId, projectId } = await params;
   return (
     <BodyTemplate

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/new/page.tsx

@@ -3,9 +3,7 @@ import { type Credential, fetchCredentials } from '@/lib/api/credentials';
 
 async function NewMCPServerPage({
   params,
-}: {
-  params: Promise<{ tenantId: string; projectId: string }>;
-}) {
+}: PageProps<'/[tenantId]/projects/[projectId]/mcp-servers/new'>) {
   const { tenantId, projectId } = await params;
   let credentials: Credential[] = [];
   try {

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/page.tsx

@@ -13,9 +13,7 @@ const mcpServerDescription = 'Create MCP servers that agents can use to access e
 
 async function MCPServersPage({
   params,
-}: {
-  params: Promise<{ tenantId: string; projectId: string }>;
-}) {
+}: PageProps<'/[tenantId]/projects/[projectId]/mcp-servers'>) {
   const { tenantId, projectId } = await params;
 
   let tools: Awaited<ReturnType<typeof fetchMCPTools>>;

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

@@ -7,14 +7,9 @@ import { fetchProject } from '@/lib/api/projects';
 
 export const dynamic = 'force-dynamic';
 
-interface SettingsPageProps {
-  params: Promise<{
-    tenantId: string;
-    projectId: string;
-  }>;
-}
-
-export default async function SettingsPage({ params }: SettingsPageProps) {
+export default async function SettingsPage({
+  params,
+}: PageProps<'/[tenantId]/projects/[projectId]/settings'>) {
   const { tenantId, projectId } = await params;
 
   let projectData: Awaited<ReturnType<typeof fetchProject>>;

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

@@ -10,7 +10,7 @@ import { Button } from '@/components/ui/button';
 import { emptyStateProjectDescription, projectDescription } from '@/constants/page-descriptions';
 import { fetchProjects } from '@/lib/api/projects';
 
-async function ProjectsPage({ params }: { params: Promise<{ tenantId: string }> }) {
+async function ProjectsPage({ params }: PageProps<'/[tenantId]/projects'>) {
   const { tenantId } = await params;
 
   let projects: Awaited<ReturnType<typeof fetchProjects>>;

package/src/app/api/data-components/[dataComponentId]/generate-preview/route.ts

@@ -1,12 +1,9 @@
 import type { NextRequest } from 'next/server';
 
-interface RouteContext {
-  params: Promise<{
-    dataComponentId: string;
-  }>;
-}
-
-export async function POST(request: NextRequest, context: RouteContext) {
+export async function POST(
+  request: NextRequest,
+  context: RouteContext<'/api/data-components/[dataComponentId]/generate-preview'>
+) {
   try {
     const { dataComponentId } = await context.params;
     const body = await request.json();

package/src/app/api/signoz/conversations/[conversationId]/route.ts

@@ -851,10 +851,9 @@ function buildConversationListPayload(
 
 export async function GET(
   _req: NextRequest,
-  context: { params: Promise<{ conversationId: string }> }
+  context: RouteContext<'/api/signoz/conversations/[conversationId]'>
 ) {
-  const params = await context.params;
-  const { conversationId } = params;
+  const { conversationId } = await context.params;
   if (!conversationId) {
     return NextResponse.json({ error: 'Conversation ID is required' }, { status: 400 });
   }
@@ -1287,9 +1286,7 @@ export async function GET(
         timestamp: span.timestamp,
         status: hasError ? ACTIVITY_STATUS.ERROR : ACTIVITY_STATUS.SUCCESS,
         subAgentName: getString(span, SPAN_KEYS.ARTIFACT_SUB_AGENT_ID, '') || 'Unknown Agent',
-        result: hasError
-          ? 'Artifact processing failed'
-          : 'Artifact processed successfully',
+        result: hasError ? 'Artifact processing failed' : 'Artifact processed successfully',
         artifactId: getString(span, SPAN_KEYS.ARTIFACT_ID, '') || undefined,
         artifactType: artifactType || undefined,
         artifactName: artifactName || undefined,