@inkeep/agents-manage-ui 0.1.0

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

@@ -0,0 +1,18 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import FullPageError from '@/components/errors/full-page-error';
+
+export default function DataComponentError() {
+  const { tenantId, projectId } = useParams<{
+    tenantId: string;
+    projectId: string;
+  }>();
+  return (
+    <FullPageError
+      description="Something went wrong."
+      link={`/${tenantId}/projects/${projectId}/data-components`}
+      linkText="Go back to data components"
+    />
+  );
+}

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

@@ -0,0 +1,40 @@
+import { DataComponentForm } from '@/components/data-components/form/data-component-form';
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+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) {
+  const { tenantId, projectId, dataComponentId } = await params;
+  const dataComponent = await fetchDataComponent(tenantId, projectId, dataComponentId);
+  const { name, description, props } = dataComponent;
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        { label: 'Data components', href: `/${tenantId}/projects/${projectId}/data-components` },
+        { label: dataComponent.name },
+      ]}
+    >
+      <MainContent>
+        <div className="max-w-2xl mx-auto py-4">
+          <DataComponentForm
+            tenantId={tenantId}
+            projectId={projectId}
+            id={dataComponentId}
+            initialData={{
+              id: dataComponentId,
+              name,
+              description: description ?? '',
+              props,
+            }}
+          />
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
+}

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

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

package/src/app/[tenantId]/projects/[projectId]/data-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 { dataComponentDescription } from '@/constants/page-descriptions';
+
+export default function Loading() {
+  return (
+    <BodyTemplate breadcrumbs={[{ label: 'Data components' }]}>
+      <MainContent>
+        <PageHeader title="Data components" description={dataComponentDescription} />
+        <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-skeleton-${i}`} className="h-36 w-full rounded-lg" />
+          ))}
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { DataComponentForm } from '@/components/data-components/form/data-component-form';
+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) {
+  const { tenantId, projectId } = await params;
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        { label: 'Data components', href: `/${tenantId}/projects/${projectId}/data-components` },
+        { label: 'New Data Component' },
+      ]}
+    >
+      <MainContent>
+        <div className="max-w-2xl mx-auto py-4">
+          <DataComponentForm tenantId={tenantId} projectId={projectId} />
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default NewDataComponentPage;

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

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

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

@@ -0,0 +1,21 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { useEffect } from 'react';
+import FullPageError from '@/components/errors/full-page-error';
+
+export default function GraphError({ error }: { error: Error & { digest?: string } }) {
+  const { tenantId, projectId } = useParams();
+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }, [error]);
+
+  return (
+    <FullPageError
+      description="Something went wrong."
+      link={`/${tenantId}/projects/${projectId}/graphs`}
+      linkText="Go back to graphs"
+    />
+  );
+}

package/src/app/[tenantId]/projects/[projectId]/graphs/[graphId]/loading.tsx

@@ -0,0 +1,29 @@
+import { BodyTemplate } from '@/components/layout/body-template';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function Loading() {
+  return (
+    <BodyTemplate breadcrumbs={[{ label: 'Graphs' }, { label: '' }]}>
+      <div className="flex h-screen bg-muted/20 dark:bg-background p-4">
+        {/* node library */}
+        <div className="w-52">
+          <div className="space-y-2">
+            <Skeleton className="h-12 w-full rounded-lg" />
+            <Skeleton className="h-12 w-full rounded-lg" />
+          </div>
+        </div>
+        <div className="flex-1 flex flex-col">
+          {/* save / try it buttons */}
+          <div className="flex justify-end gap-3">
+            <Skeleton className="h-9 w-20" />
+            <Skeleton className="h-9 w-16" />
+          </div>
+          {/* workflow */}
+          <div className="w-64 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+            <Skeleton className="h-24 w-full rounded-lg" />
+          </div>
+        </div>
+      </div>
+    </BodyTemplate>
+  );
+}

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

@@ -0,0 +1,52 @@
+import { Graph } from '@/components/graph/graph';
+import { BodyTemplate } from '@/components/layout/body-template';
+import { fetchArtifactComponentsAction } from '@/lib/actions/artifact-components';
+import { fetchDataComponentsAction } from '@/lib/actions/data-components';
+import { getFullGraphAction } from '@/lib/actions/graph-full';
+import { createLookup } from '@/lib/utils';
+
+export const dynamic = 'force-dynamic';
+
+interface GraphPageProps {
+  params: Promise<{ graphId: string; tenantId: string; projectId: string }>;
+}
+
+async function GraphPage({ params }: GraphPageProps) {
+  const { graphId, tenantId, projectId } = await params;
+
+  const [graph, dataComponents, artifactComponents] = await Promise.all([
+    getFullGraphAction(tenantId, projectId, graphId),
+    fetchDataComponentsAction(tenantId, projectId),
+    fetchArtifactComponentsAction(tenantId, projectId),
+  ]);
+
+  if (!graph.success) throw new Error(graph.error);
+  if (!dataComponents.success || !artifactComponents.success) {
+    console.error('Failed to fetch components:', dataComponents.error, artifactComponents.error);
+  }
+
+  const dataComponentLookup = createLookup(
+    dataComponents.success ? dataComponents.data : undefined
+  );
+
+  const artifactComponentLookup = createLookup(
+    artifactComponents.success ? artifactComponents.data : undefined
+  );
+
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        { label: 'Graphs', href: `/${tenantId}/projects/${projectId}/graphs` },
+        { label: graph.data.name },
+      ]}
+    >
+      <Graph
+        graph={graph?.data}
+        dataComponentLookup={dataComponentLookup}
+        artifactComponentLookup={artifactComponentLookup}
+      />
+    </BodyTemplate>
+  );
+}
+
+export default GraphPage;

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

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

package/src/app/[tenantId]/projects/[projectId]/graphs/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 { graphDescription } from '@/constants/page-descriptions';
+
+export default function Loading() {
+  return (
+    <BodyTemplate breadcrumbs={[{ label: 'Graphs' }]}>
+      <MainContent>
+        <PageHeader title="Graphs" description={graphDescription} />
+        <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-skeleton-${i}`} className="h-36 w-full rounded-lg" />
+          ))}
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { Graph } from '@/components/graph/graph';
+import { BodyTemplate } from '@/components/layout/body-template';
+import { fetchArtifactComponentsAction } from '@/lib/actions/artifact-components';
+import { fetchDataComponentsAction } from '@/lib/actions/data-components';
+import { createLookup } from '@/lib/utils';
+
+async function NewGraphPage({
+  params,
+}: {
+  params: Promise<{ tenantId: string; projectId: string }>;
+}) {
+  const { tenantId, projectId } = await params;
+  const [dataComponents, artifactComponents] = await Promise.all([
+    fetchDataComponentsAction(tenantId, projectId),
+    fetchArtifactComponentsAction(tenantId, projectId),
+  ]);
+
+  if (!dataComponents.success || !artifactComponents.success) {
+    console.error('Failed to fetch components:', dataComponents.error, artifactComponents.error);
+  }
+
+  const dataComponentLookup = createLookup(
+    dataComponents.success ? dataComponents.data : undefined
+  );
+
+  const artifactComponentLookup = createLookup(
+    artifactComponents.success ? artifactComponents.data : undefined
+  );
+
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        { label: 'Graphs', href: `/${tenantId}/projects/${projectId}/graphs` },
+        { label: 'New Graph' },
+      ]}
+    >
+      <Graph
+        dataComponentLookup={dataComponentLookup}
+        artifactComponentLookup={artifactComponentLookup}
+      />
+    </BodyTemplate>
+  );
+}
+
+export default NewGraphPage;

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

@@ -0,0 +1,50 @@
+import { GraphList } from '@/components/graphs/graph-list';
+import { GraphsIcon } from '@/components/icons/empty-state/graphs';
+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 { graphDescription } from '@/constants/page-descriptions';
+import { fetchGraphs } from '@/lib/api/graph-full-client';
+import type { Graph } from '@/lib/types/graph-full';
+
+export const dynamic = 'force-dynamic';
+
+interface GraphsPageProps {
+  params: Promise<{ tenantId: string; projectId: string }>;
+}
+
+async function GraphsPage({ params }: GraphsPageProps) {
+  const { tenantId, projectId } = await params;
+  let graphs: { data: Graph[] } = { data: [] };
+  try {
+    const response = await fetchGraphs(tenantId, projectId);
+    graphs = response;
+  } catch (_error) {
+    throw new Error('Failed to fetch graphs');
+  }
+  return (
+    <BodyTemplate
+      breadcrumbs={[{ label: 'Graphs', href: `/${tenantId}/projects/${projectId}/graphs` }]}
+    >
+      <MainContent className="min-h-full">
+        {graphs.data.length > 0 ? (
+          <>
+            <PageHeader title="Graphs" description={graphDescription} />
+            <GraphList tenantId={tenantId} projectId={projectId} graphs={graphs.data} />
+          </>
+        ) : (
+          <EmptyState
+            title="No graphs yet."
+            description={graphDescription}
+            link={`/${tenantId}/projects/${projectId}/graphs/new`}
+            linkText="Create graph"
+            icon={<GraphsIcon />}
+          />
+        )}
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default GraphsPage;

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

@@ -0,0 +1,91 @@
+import { notFound } from 'next/navigation';
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+import { MCPServerForm } from '@/components/mcp-servers/form/mcp-server-form';
+import type { MCPToolFormData } from '@/components/mcp-servers/form/validation';
+import { type Credential, fetchCredentials } from '@/lib/api/credentials';
+import { fetchMCPTool, type MCPTool } from '@/lib/api/tools';
+
+interface EditMCPPageProps {
+  params: Promise<{ mcpServerId: string; tenantId: string; projectId: string }>;
+}
+
+async function EditMCPPage({ params }: EditMCPPageProps) {
+  const { mcpServerId, tenantId, projectId } = await params;
+
+  // Fetch both in parallel with individual error handling
+  const [mcpToolResult, credentialsResult] = await Promise.allSettled([
+    fetchMCPTool(tenantId, projectId, mcpServerId),
+    fetchCredentials(tenantId, projectId),
+  ]);
+
+  // Handle MCP tool result (required)
+  let mcpTool: MCPTool;
+  if (mcpToolResult.status === 'fulfilled') {
+    mcpTool = mcpToolResult.value;
+  } else {
+    console.error('Failed to load MCP tool:', mcpToolResult.reason);
+    notFound();
+  }
+
+  // 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 MCPTool to MCPToolFormData format
+  const initialFormData: MCPToolFormData = {
+    name: mcpTool.name,
+    config: {
+      type: 'mcp' as const,
+      mcp: {
+        server: {
+          url: mcpTool.config.mcp.server.url,
+        },
+        transport: {
+          type: mcpTool.config.mcp.transport?.type || 'streamable_http',
+        },
+        toolsConfig:
+          mcpTool.config.mcp.activeTools === undefined
+            ? { type: 'all' as const }
+            : { type: 'selective' as const, tools: mcpTool.config.mcp.activeTools },
+      },
+    },
+    credentialReferenceId: mcpTool.credentialReferenceId || 'none',
+    imageUrl: mcpTool.imageUrl?.trim() || undefined,
+  };
+
+  // MCPServerForm handles all the form logic
+
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        { label: 'MCP servers', href: `/${tenantId}/projects/${projectId}/mcp-servers` },
+        {
+          label: mcpTool.name,
+          href: `/${tenantId}/projects/${projectId}/mcp-servers/${mcpServerId}`,
+        },
+        { label: 'Edit' },
+      ]}
+    >
+      <MainContent>
+        <div className="max-w-2xl mx-auto py-4">
+          <MCPServerForm
+            initialData={initialFormData}
+            mode="update"
+            tool={mcpTool}
+            credentials={credentials}
+            tenantId={tenantId}
+            projectId={projectId}
+          />
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default EditMCPPage;

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

@@ -0,0 +1,38 @@
+import { notFound } from 'next/navigation';
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+import { ViewMCPServerDetails } from '@/components/mcp-servers/view-mcp-server-details';
+import { syncMCPTool } from '@/lib/api/tools';
+
+interface MCPPageProps {
+  params: Promise<{ mcpServerId: string; tenantId: string; projectId: string }>;
+}
+
+async function MCPPage({ params }: MCPPageProps) {
+  const { mcpServerId, tenantId, projectId } = await params;
+
+  try {
+    const tool = await syncMCPTool(tenantId, projectId, mcpServerId);
+
+    return (
+      <BodyTemplate
+        breadcrumbs={[
+          { label: 'MCP servers', href: `/${tenantId}/projects/${projectId}/mcp-servers` },
+          {
+            label: tool.name,
+            href: `/${tenantId}/projects/${projectId}/mcp-servers/${mcpServerId}`,
+          },
+        ]}
+      >
+        <MainContent>
+          <ViewMCPServerDetails tool={tool} tenantId={tenantId} projectId={projectId} />
+        </MainContent>
+      </BodyTemplate>
+    );
+  } catch (error) {
+    console.error('Failed to load MCP server:', error);
+    notFound();
+  }
+}
+
+export default MCPPage;

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

@@ -0,0 +1,22 @@
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+
+export default async function NewMCPServerLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ tenantId: string; projectId: string }>;
+}) {
+  const { tenantId, projectId } = await params;
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        { label: 'MCP servers', href: `/${tenantId}/projects/${projectId}/mcp-servers` },
+        { label: 'New MCP Server' },
+      ]}
+    >
+      <MainContent>{children}</MainContent>
+    </BodyTemplate>
+  );
+}

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

@@ -0,0 +1,24 @@
+import { MCPServerForm } from '@/components/mcp-servers/form/mcp-server-form';
+import { type Credential, fetchCredentials } from '@/lib/api/credentials';
+
+async function NewMCPServerPage({
+  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 (
+    <div className="max-w-2xl mx-auto py-4">
+      <MCPServerForm credentials={credentials} tenantId={tenantId} projectId={projectId} />
+    </div>
+  );
+}
+
+export default NewMCPServerPage;

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

@@ -0,0 +1,61 @@
+import { Plus } from 'lucide-react';
+import Link from 'next/link';
+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 { MCPToolsList } from '@/components/mcp-servers/mcp-tools-list';
+import { Button } from '@/components/ui/button';
+import { fetchMCPTools, type MCPTool } from '@/lib/api/tools';
+
+const mcpServerDescription = 'Create MCP servers that agents can use to access external services.';
+
+async function MCPServersPage({
+  params,
+}: {
+  params: Promise<{ tenantId: string; projectId: string }>;
+}) {
+  const { tenantId, projectId } = await params;
+  let tools: MCPTool[] = [];
+  try {
+    tools = await fetchMCPTools(tenantId, projectId);
+  } catch (error) {
+    console.error('Failed to load MCP tools:', error);
+  }
+
+  return (
+    <BodyTemplate breadcrumbs={[{ label: 'MCP servers' }]}>
+      <MainContent className="min-h-full">
+        {tools.length > 0 ? (
+          <>
+            <PageHeader
+              title="MCP servers"
+              description={mcpServerDescription}
+              action={
+                <Button asChild>
+                  <Link
+                    href={`/${tenantId}/projects/${projectId}/mcp-servers/new`}
+                    className="flex items-center gap-2"
+                  >
+                    <Plus className="size-4" />
+                    New MCP server
+                  </Link>
+                </Button>
+              }
+            />
+            <MCPToolsList tools={tools} />
+          </>
+        ) : (
+          <EmptyState
+            title="No MCP servers yet."
+            description={mcpServerDescription}
+            link={`/${tenantId}/projects/${projectId}/mcp-servers/new`}
+            linkText="Create MCP server"
+          />
+        )}
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default MCPServersPage;

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

@@ -0,0 +1,12 @@
+import { redirect } from 'next/navigation';
+
+async function ProjectPage({
+  params,
+}: {
+  params: Promise<{ tenantId: string; projectId: string }>;
+}) {
+  const { tenantId, projectId } = await params;
+  redirect(`/${tenantId}/projects/${projectId}/graphs`);
+}
+
+export default ProjectPage;