@inkeep/agents-manage-ui 0.22.7 → 0.22.9

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

@@ -1,13 +1,14 @@
 import { Plus } from 'lucide-react';
 import Link from 'next/link';
 import { DataComponentsList } from '@/components/data-components/data-components-list';
+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';
-import { type DataComponent, fetchDataComponents } from '@/lib/api/data-components';
+import { fetchDataComponents } from '@/lib/api/data-components';
 
 export const dynamic = 'force-dynamic';
 
@@ -17,12 +18,12 @@ interface DataComponentsPageProps {
 
 async function DataComponentsPage({ params }: DataComponentsPageProps) {
   const { tenantId, projectId } = await params;
-  let dataComponents: { data: DataComponent[] } = { data: [] };
+
+  let dataComponents: Awaited<ReturnType<typeof fetchDataComponents>>;
   try {
-    const response = await fetchDataComponents(tenantId, projectId);
-    dataComponents = response;
-  } catch (_error) {
-    throw new Error('Failed to fetch components');
+    dataComponents = await fetchDataComponents(tenantId, projectId);
+  } catch (error) {
+    return <FullPageError error={error as Error} context="components" />;
   }
   return (
     <BodyTemplate breadcrumbs={[{ label: 'Components' }]}>

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

@@ -1,8 +1,8 @@
-import { notFound } from 'next/navigation';
 import {
   EditCredentialForm,
   type EditCredentialFormData,
 } 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';
@@ -35,37 +35,45 @@ async function EditCredentialsPage({
 }) {
   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);
+  let credential: Credential;
+  let initialFormData: EditCredentialFormData;
 
+  try {
+    credential = await fetchCredential(tenantId, projectId, credentialId);
+    initialFormData = await credentialToFormData(credential);
+  } catch (error) {
     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>
+      <FullPageError
+        error={error as Error}
+        link={`/${tenantId}/projects/${projectId}/credentials`}
+        linkText="Back to credentials"
+        context="credential"
+      />
     );
-  } catch (error) {
-    console.error('Failed to fetch credential:', error);
-    notFound();
   }
+
+  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/page.tsx

@@ -1,13 +1,13 @@
 import { Plus } from 'lucide-react';
 import Link from 'next/link';
 import { CredentialsList } from '@/components/credentials/credentials-list';
+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 type { Credential } from '@/lib/api/credentials';
 import { fetchCredentials } from '@/lib/api/credentials';
 
 export const dynamic = 'force-dynamic';
@@ -21,11 +21,12 @@ async function CredentialsPage({
   params: Promise<{ tenantId: string; projectId: string }>;
 }) {
   const { tenantId, projectId } = await params;
-  let credentials: Credential[] = [];
+
+  let credentials: Awaited<ReturnType<typeof fetchCredentials>>;
   try {
     credentials = await fetchCredentials(tenantId, projectId);
-  } catch (_error) {
-    throw new Error('Failed to fetch credentials');
+  } catch (error) {
+    return <FullPageError error={error as Error} context="credentials" />;
   }
 
   return (

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

@@ -1,5 +1,5 @@
-import { notFound } from 'next/navigation';
 import type { ReactNode } from 'react';
+import FullPageError from '@/components/errors/full-page-error';
 import { fetchProject } from '@/lib/api/projects';
 
 export const dynamic = 'force-dynamic';
@@ -16,8 +16,7 @@ export default async function ProjectLayout({ children, params }: ProjectLayoutP
     // Verify project exists
     await fetchProject(tenantId, projectId);
   } catch (_error) {
-    // If project doesn't exist, show 404 page
-    notFound();
+    return <FullPageError error={_error as Error} context="project" />;
   }
 
   return <>{children}</>;

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

@@ -1,41 +1,48 @@
-import { MCPTransportType } from '@inkeep/agents-core/client-exports'
-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 } from '@/lib/api/tools'
-import type { MCPTool } from '@/lib/types/tools'
+import { MCPTransportType } from '@inkeep/agents-core/client-exports';
+import FullPageError from '@/components/errors/full-page-error';
+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 } from '@/lib/api/tools';
+import type { MCPTool } from '@/lib/types/tools';
 
 interface EditMCPPageProps {
-  params: Promise<{ mcpServerId: string; tenantId: string; projectId: string }>
+  params: Promise<{ mcpServerId: string; tenantId: string; projectId: string }>;
 }
 
 async function EditMCPPage({ params }: EditMCPPageProps) {
-  const { mcpServerId, tenantId, projectId } = await params
+  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
+  let mcpTool: MCPTool;
   if (mcpToolResult.status === 'fulfilled') {
-    mcpTool = mcpToolResult.value
+    mcpTool = mcpToolResult.value;
   } else {
-    console.error('Failed to load MCP tool:', mcpToolResult.reason)
-    notFound()
+    console.error('Failed to load MCP tool:', mcpToolResult.reason);
+    return (
+      <FullPageError
+        error={mcpToolResult.reason as Error}
+        link={`/${tenantId}/projects/${projectId}/mcp-servers`}
+        linkText="Back to MCP servers"
+        context="MCP server"
+      />
+    );
   }
 
   // Handle credentials result (optional - fallback to empty array)
-  let credentials: Credential[] = []
+  let credentials: Credential[] = [];
   if (credentialsResult.status === 'fulfilled') {
-    credentials = credentialsResult.value
+    credentials = credentialsResult.value;
   } else {
-    console.error('Failed to load credentials:', credentialsResult.reason)
+    console.error('Failed to load credentials:', credentialsResult.reason);
     // Continue without credentials
   }
 
@@ -67,7 +74,7 @@ async function EditMCPPage({ params }: EditMCPPageProps) {
     },
     credentialReferenceId: mcpTool.credentialReferenceId || 'none',
     imageUrl: mcpTool.imageUrl?.trim() || undefined,
-  }
+  };
 
   // MCPServerForm handles all the form logic
 
@@ -98,7 +105,7 @@ async function EditMCPPage({ params }: EditMCPPageProps) {
         </div>
       </MainContent>
     </BodyTemplate>
-  )
+  );
 }
 
-export default EditMCPPage
+export default EditMCPPage;

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

@@ -1,4 +1,4 @@
-import { notFound } from 'next/navigation';
+import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
 import { MainContent } from '@/components/layout/main-content';
 import { ViewMCPServerDetails } from '@/components/mcp-servers/view-mcp-server-details';
@@ -11,31 +11,38 @@ interface MCPPageProps {
 async function MCPPage({ params }: MCPPageProps) {
   const { mcpServerId, tenantId, projectId } = await params;
 
+  let tool: Awaited<ReturnType<typeof fetchMCPTool>>;
   try {
-    const tool = await fetchMCPTool(tenantId, projectId, mcpServerId);
-
+    tool = await fetchMCPTool(tenantId, projectId, mcpServerId);
+  } catch (error) {
     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>
+      <FullPageError
+        error={error as Error}
+        link={`/${tenantId}/projects/${projectId}/mcp-servers`}
+        linkText="Back to MCP servers"
+        context="MCP server"
+      />
     );
-  } catch (error) {
-    console.error('Failed to load MCP server:', error);
-    notFound();
   }
+
+  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>
+  );
 }
 
 export default MCPPage;

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

@@ -1,27 +1,28 @@
-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 } from '@/lib/api/tools'
-import type { MCPTool } from '@/lib/types/tools'
+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 { MCPToolsList } from '@/components/mcp-servers/mcp-tools-list';
+import { Button } from '@/components/ui/button';
+import { fetchMCPTools } from '@/lib/api/tools';
 
-const mcpServerDescription = 'Create MCP servers that agents can use to access external services.'
+const mcpServerDescription = 'Create MCP servers that agents can use to access external services.';
 
 async function MCPServersPage({
   params,
 }: {
-  params: Promise<{ tenantId: string; projectId: string }>
+  params: Promise<{ tenantId: string; projectId: string }>;
 }) {
-  const { tenantId, projectId } = await params
-  let tools: MCPTool[] = []
+  const { tenantId, projectId } = await params;
+
+  let tools: Awaited<ReturnType<typeof fetchMCPTools>>;
   try {
-    tools = await fetchMCPTools(tenantId, projectId)
+    tools = await fetchMCPTools(tenantId, projectId);
   } catch (error) {
-    console.error('Failed to load MCP tools:', error)
+    return <FullPageError error={error as Error} context="MCP servers" />;
   }
 
   return (
@@ -56,7 +57,7 @@ async function MCPServersPage({
         )}
       </MainContent>
     </BodyTemplate>
-  )
+  );
 }
 
-export default MCPServersPage
+export default MCPServersPage;

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

@@ -1,3 +1,4 @@
+import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
 import { MainContent } from '@/components/layout/main-content';
 import { ProjectForm } from '@/components/projects/form/project-form';
@@ -15,7 +16,20 @@ interface SettingsPageProps {
 
 export default async function SettingsPage({ params }: SettingsPageProps) {
   const { tenantId, projectId } = await params;
-  const projectData = await fetchProject(tenantId, projectId);
+
+  let projectData: Awaited<ReturnType<typeof fetchProject>>;
+  try {
+    projectData = await fetchProject(tenantId, projectId);
+  } catch (error) {
+    return (
+      <FullPageError
+        error={error as Error}
+        link={`/${tenantId}/projects`}
+        linkText="Back to projects"
+        context="project"
+      />
+    );
+  }
   return (
     <BodyTemplate
       breadcrumbs={[

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

@@ -2,6 +2,19 @@
 
 import FullPageError from '@/components/errors/full-page-error';
 
-export default function ProjectsError() {
-  return <FullPageError description="Something went wrong." />;
+export default function ProjectsErrorBoundary({
+  error,
+  reset,
+}: {
+  error: Error & { cause?: { code: string; status: number } & { message: string } };
+  reset: () => void;
+}) {
+  return (
+    <FullPageError
+      error={error}
+      title="Something went wrong."
+      description="An unexpected error occurred. Please try again."
+      reset={reset}
+    />
+  );
 }

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

@@ -1,4 +1,5 @@
 import { Plus } from 'lucide-react';
+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';
@@ -8,16 +9,15 @@ import { ProjectList } from '@/components/projects/project-list';
 import { Button } from '@/components/ui/button';
 import { emptyStateProjectDescription, projectDescription } from '@/constants/page-descriptions';
 import { fetchProjects } from '@/lib/api/projects';
-import type { Project } from '@/lib/types/project';
 
 async function ProjectsPage({ params }: { params: Promise<{ tenantId: string }> }) {
   const { tenantId } = await params;
-  let projects: { data: Project[] } = { data: [] };
+
+  let projects: Awaited<ReturnType<typeof fetchProjects>>;
   try {
-    const response = await fetchProjects(tenantId);
-    projects = response;
-  } catch (_error) {
-    // throw new Error('Failed to fetch projects');
+    projects = await fetchProjects(tenantId);
+  } catch (error) {
+    return <FullPageError error={error as Error} context="projects" />;
   }
 
   return (

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

@@ -524,7 +524,7 @@ function buildConversationListPayload(
             {
               key: {
                 key: SPAN_KEYS.AI_OPERATION_ID,
-                ...QUERY_FIELD_CONFIGS.STRING_TAG_COLUMN,
+                ...QUERY_FIELD_CONFIGS.STRING_TAG,
               },
               op: OPERATORS.EQUALS,
               value: AI_OPERATIONS.GENERATE_TEXT,
@@ -590,7 +590,7 @@ function buildConversationListPayload(
             {
               key: {
                 key: SPAN_KEYS.AI_OPERATION_ID,
-                ...QUERY_FIELD_CONFIGS.STRING_TAG_COLUMN,
+                ...QUERY_FIELD_CONFIGS.STRING_TAG,
               },
               op: OPERATORS.EQUALS,
               value: AI_OPERATIONS.STREAM_TEXT,
@@ -653,7 +653,7 @@ function buildConversationListPayload(
             {
               key: {
                 key: SPAN_KEYS.AI_OPERATION_ID,
-                ...QUERY_FIELD_CONFIGS.STRING_TAG_COLUMN,
+                ...QUERY_FIELD_CONFIGS.STRING_TAG,
               },
               op: OPERATORS.EQUALS,
               value: AI_OPERATIONS.STREAM_OBJECT,

package/src/app/not-found.tsx

@@ -0,0 +1,12 @@
+import FullPageError from '@/components/errors/full-page-error';
+
+export default function NotFound() {
+  return (
+    <FullPageError
+      title="Page not found"
+      description="The page you are looking for does not exist or has been moved."
+      statusCode={404}
+      showRetry={false}
+    />
+  );
+}

package/src/components/errors/full-page-error.tsx

@@ -1,33 +1,136 @@
 'use client';
 
-import { ArrowLeft } from 'lucide-react';
+import { AlertTriangle, ArrowLeft, RefreshCw } from 'lucide-react';
 import Link from 'next/link';
 import { BodyTemplate } from '@/components/layout/body-template';
 import { MainContent } from '@/components/layout/main-content';
+import { Button } from '@/components/ui/button';
+
+function hasStatusCode(obj: unknown): obj is { status: number } {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    'status' in obj &&
+    typeof (obj as { status: unknown }).status === 'number'
+  );
+}
 
 interface FullPageErrorProps {
+  error?: Error & { digest?: string };
+  reset?: () => void;
   title?: string;
   description?: string;
   link?: string;
   linkText?: string;
+  statusCode?: number;
+  showRetry?: boolean;
+  onRetry?: () => void;
+  context?: string;
 }
 
-export default function FullPageError({ title, description, link, linkText }: FullPageErrorProps) {
+export default function FullPageError({
+  error,
+  reset,
+  title: propTitle,
+  description: propDescription,
+  link,
+  linkText,
+  statusCode: propStatusCode,
+  showRetry = true,
+  onRetry,
+  context = 'resource',
+}: FullPageErrorProps) {
+  let statusCode = propStatusCode;
+
+  if (!statusCode && error) {
+    if (hasStatusCode(error.cause)) {
+      statusCode = error.cause.status;
+    } else {
+      const match = error.message.match(/^\[(\d{3})\]/);
+      if (match) {
+        statusCode = Number.parseInt(match[1], 10);
+      } else if (hasStatusCode(error)) {
+        statusCode = error.status;
+      }
+    }
+  }
+
+  let title = propTitle;
+  let description = propDescription;
+
+  if (error && !title) {
+    title = `Failed to load ${context}`;
+    let errorMessage =
+      error.message || `An unexpected error occurred while loading this ${context}.`;
+    errorMessage = errorMessage.replace(/^\[\d{3}\]\s*/, '');
+    description = errorMessage;
+
+    if (statusCode === 404) {
+      title = `${context.charAt(0).toUpperCase() + context.slice(1)} not found`;
+      description = `The ${context} you are looking for does not exist or has been deleted.`;
+    } else if (statusCode === 403) {
+      title = 'Access denied';
+      description = `You do not have permission to access this ${context}.`;
+    } else if (statusCode === 401) {
+      title = 'Authentication required';
+      description = 'Please sign in to access this resource.';
+    } else if (statusCode === 500) {
+      title = 'Server error';
+      description = 'An error occurred on the server. Please try again later.';
+    } else if (statusCode === 503) {
+      title = 'Service unavailable';
+      description = 'The service is temporarily unavailable. Please try again in a few moments.';
+    } else if (typeof navigator !== 'undefined' && !navigator.onLine) {
+      title = 'Connection error';
+      description = 'Unable to connect to the server. Please check your internet connection.';
+    }
+  }
+
+  if (!title) {
+    title = 'Something went wrong';
+  }
+  if (!description) {
+    description = 'An unexpected error occurred. Please try again.';
+  }
+
+  const handleRetry = () => {
+    if (reset) {
+      reset();
+    } else if (onRetry) {
+      onRetry();
+    } else {
+      window.location.reload();
+    }
+  };
+
   return (
-    <BodyTemplate breadcrumbs={[{ label: title ?? 'Error' }]}>
+    <BodyTemplate breadcrumbs={[{ label: statusCode ? `${statusCode} Error` : 'Error' }]}>
       <MainContent className="flex-1">
-        <div className="flex flex-col items-center justify-center h-full gap-4">
-          {title && <p className="text-lg text-foreground font-semibold">{title}</p>}
-          <div className="text-muted-foreground gap-2 flex flex-col items-center justify-center">
-            {description && <p>{description}</p>}
+        <div className="flex flex-col items-center justify-center h-full gap-10 px-4">
+          {statusCode ? (
+            <div className="text-8xl font-mono font-bold text-foreground">{statusCode}</div>
+          ) : (
+            <AlertTriangle className="w-14 h-14 text-foreground" strokeWidth={1} />
+          )}
+          <div className="flex flex-col items-center gap-2 text-center max-w-md">
+            <h1 className="text-lg text-muted-foreground font-mono uppercase">{title}</h1>
+            <p className="text-muted-foreground text-sm">{description}</p>
+          </div>
+
+          <div className="flex items-center gap-3">
+            {showRetry && (
+              <Button onClick={handleRetry} variant="outline">
+                <RefreshCw className="w-4 h-4" />
+                Try Again
+              </Button>
+            )}
             {link && linkText && (
-              <Link
-                href={link}
-                className="flex items-center gap-2 underline text-muted-foreground hover:text-foreground transition-colors"
-              >
-                <ArrowLeft className="w-4 h-4 text-muted-foreground hover:text-foreground transition-colors" />
-                {linkText}
-              </Link>
+              <Button asChild variant="outline">
+                <Link href={link} className="flex items-center gap-2">
+                  <ArrowLeft className="w-4 h-4" />
+                  {linkText}
+                </Link>
+              </Button>
             )}
           </div>
         </div>

package/src/lib/api/agent-full-client.ts

@@ -5,14 +5,14 @@
  * inkeep-chat backend AgentFull REST API endpoints.
  */
 
-import { ApiError } from '../types/errors';
 import type {
+  Agent,
   CreateAgentResponse,
   FullAgentDefinition,
   GetAgentResponse,
-  Agent,
   UpdateAgentResponse,
 } from '../types/agent-full';
+import { ApiError } from '../types/errors';
 import type { ListResponse } from '../types/response';
 import { makeManagementApiRequest } from './api-config';
 import { validateProjectId, validateTenantId } from './resource-validation';