feat(dashboard): Notify users to enter custom headers if required in chat or if custom headers are invalid

.changeset/custom-headers-validation.md

@@ -0,0 +1,6 @@
+---
+"@inkeep/agents-manage-ui": patch
+"@inkeep/agents-core": patch
+---
+
+Add custom headers validation in playground chat. Users are now notified when custom headers are invalid or required based on the agent's headers schema configuration.

agents-api/src/domains/run/agents/Agent.ts

@@ -14,6 +14,7 @@ import {
   getLedgerArtifacts,
   isGithubWorkAppTool,
   JsonTransformer,
+  jsonSchemaToZod,
   listTaskIdsByContextId,
   MCPServerType,
   type MCPToolConfig,
@@ -69,7 +70,6 @@ import { toolApprovalUiBus } from '../services/ToolApprovalUiBus';
 import type { SandboxConfig } from '../types/executionContext';
 import { generateToolId } from '../utils/agent-operations';
 import { ArtifactCreateSchema, ArtifactReferenceSchema } from '../utils/artifact-component-schema';
-import { jsonSchemaToZod } from '../utils/data-component-schema';
 import { withJsonPostProcessing } from '../utils/json-postprocessor';
 import { getCompressionConfigForModel } from '../utils/model-context-utils';
 import type { StreamHelper } from '../utils/stream-helpers';

agents-api/src/domains/run/agents/versions/v1/Phase1Config.ts

@@ -1,6 +1,10 @@
-import type { Artifact, McpTool } from '@inkeep/agents-core';
-import { V1_BREAKDOWN_SCHEMA } from '@inkeep/agents-core';
-import { convertZodToJsonSchema, isZodSchema } from '@inkeep/agents-core/utils/schema-conversion';
+import {
+  type Artifact,
+  convertZodToJsonSchema,
+  isZodSchema,
+  type McpTool,
+  V1_BREAKDOWN_SCHEMA,
+} from '@inkeep/agents-core';
 import systemPromptTemplate from '../../../../../../templates/v1/phase1/system-prompt.xml?raw';
 import thinkingPreparationTemplate from '../../../../../../templates/v1/phase1/thinking-preparation.xml?raw';
 import toolTemplate from '../../../../../../templates/v1/phase1/tool.xml?raw';

agents-api/src/domains/run/utils/artifact-component-schema.ts

@@ -1,11 +1,11 @@
 import { z } from '@hono/zod-openapi';
-import type {
-  ArtifactComponentApiInsert,
-  ArtifactComponentApiSelect,
-  DataComponentInsert,
+import {
+  type ArtifactComponentApiInsert,
+  type ArtifactComponentApiSelect,
+  type DataComponentInsert,
+  jsonSchemaToZod,
 } from '@inkeep/agents-core';
 import { getLogger } from '../../../logger';
-import { jsonSchemaToZod } from './data-component-schema';
 import { SchemaProcessor } from './SchemaProcessor';
 import type { ExtendedJsonSchema } from './schema-validation';
 

agents-api/src/domains/run/utils/schema-validation.ts

@@ -1,29 +1,3 @@
-import { z } from '@hono/zod-openapi';
-import { convertZodToJsonSchemaWithPreview } from '@inkeep/agents-core/utils/schema-conversion';
-import Ajv from 'ajv';
-import { getLogger } from '../../../logger';
-
-const logger = getLogger('SchemaValidation');
-const ajv = new Ajv({ allErrors: true, strict: false });
-
-// Cache for compiled AJV validators to improve performance
-const validatorCache = new Map<string, any>();
-
-/**
- * Clear the validator cache to free memory
- * Useful for testing or when memory usage becomes a concern
- */
-export function clearValidatorCache(): void {
-  validatorCache.clear();
-}
-
-/**
- * Get the current cache size for monitoring
- */
-export function getValidatorCacheSize(): number {
-  return validatorCache.size;
-}
-
 /**
  * Extended JSON Schema that includes preview field indicators
  */
@@ -41,69 +15,6 @@ export interface ExtendedJsonSchemaProperty {
   [key: string]: any;
 }
 
-/**
- * Validate that a schema is valid (either JSON Schema or Zod)
- * Following the same pattern as context validation
- */
-export function validateComponentSchema(
-  schema: any,
-  componentName: string
-): {
-  isValid: boolean;
-  error?: string;
-  validatedSchema?: ExtendedJsonSchema;
-} {
-  try {
-    // Check if it's a Zod schema
-    if (schema instanceof z.ZodType) {
-      // Convert Zod to JSON Schema with preview metadata
-      const jsonSchema = convertZodToJsonSchemaWithPreview(schema);
-      return {
-        isValid: true,
-        validatedSchema: jsonSchema as ExtendedJsonSchema,
-      };
-    }
-
-    // Check if it's a JSON Schema
-    if (!schema || typeof schema !== 'object' || Array.isArray(schema)) {
-      return {
-        isValid: false,
-        error: 'Schema must be a valid JSON Schema object or Zod schema',
-      };
-    }
-
-    // Create a cache key based on the schema content
-    const schemaKey = JSON.stringify(schema);
-
-    // Check if we already have a compiled validator for this schema
-    let validator = validatorCache.get(schemaKey);
-    if (!validator) {
-      // Compile and cache the validator
-      validator = ajv.compile(schema);
-      validatorCache.set(schemaKey, validator);
-    }
-
-    // If it compiled successfully, it's a valid JSON Schema
-    return {
-      isValid: true,
-      validatedSchema: schema as ExtendedJsonSchema,
-    };
-  } catch (error) {
-    logger.error(
-      {
-        componentName,
-        error: error instanceof Error ? error.message : 'Unknown error',
-      },
-      'Invalid component schema'
-    );
-
-    return {
-      isValid: false,
-      error: error instanceof Error ? error.message : 'Invalid JSON Schema',
-    };
-  }
-}
-
 /**
  * Extract preview fields from a schema (fields marked with inPreview: true)
  */

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/agents/[agentId]/page.client.tsx

@@ -315,7 +315,7 @@ export const Agent: FC<AgentProps> = ({
     };
     clearSelection();
     markUnsaved();
-    commandManager.execute(new AddNodeCommand(newNode as Node));
+    commandManager.execute(new AddNodeCommand(newNode));
     // Wait for sidebar to open (350ms for CSS transition) then center the node
     setTimeout(() => {
       fitView({

agents-manage-ui/src/app/layout.tsx

@@ -4,6 +4,7 @@ import { ThemeProvider } from 'next-themes';
 import { NuqsAdapter } from 'nuqs/adapters/next/app';
 import { QueryProvider } from '@/components/providers/query-provider';
 import { Toaster } from '@/components/ui/sonner';
+import { INKEEP_BRAND_COLOR } from '@/constants/theme';
 import { AuthClientProvider } from '@/contexts/auth-client';
 import { PostHogProvider } from '@/contexts/posthog';
 import { RuntimeConfigProvider } from '@/contexts/runtime-config';
@@ -44,7 +45,7 @@ export const metadata: Metadata = {
     title: APP_NAME,
   },
   other: {
-    'msapplication-TileColor': '#69a3ff',
+    'msapplication-TileColor': INKEEP_BRAND_COLOR,
   },
   twitter: {
     creator: process.env.METADATA_TWITTER_CREATOR || '@inkeep',

agents-manage-ui/src/components/agent/configuration/resolve-collisions.ts

@@ -9,9 +9,7 @@ interface CollisionAlgorithmOptions {
   margin?: number;
 }
 
-interface CollisionAlgorithm {
-  (nodes: Node[], options?: CollisionAlgorithmOptions): Node[];
-}
+type CollisionAlgorithm = (nodes: Node[], options?: CollisionAlgorithmOptions) => Node[];
 
 interface Box {
   x: number;

agents-manage-ui/src/components/agent/copilot/copilot-chat.tsx

@@ -1,16 +1,17 @@
 'use client';
 
 import { InkeepSidebarChat } from '@inkeep/agents-ui';
-import type { InkeepCallbackEvent } from '@inkeep/agents-ui/types';
 import { Loader2, RefreshCw } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
+import { INKEEP_BRAND_COLOR } from '@/constants/theme';
 import { useCopilotContext } from '@/contexts/copilot';
 import { useRuntimeConfig } from '@/contexts/runtime-config';
 import { useCopilotToken } from '@/hooks/use-copilot-token';
 import { useOAuthLogin } from '@/hooks/use-oauth-login';
 import { sentry } from '@/lib/sentry';
+import { css } from '@/lib/utils';
 import { generateId } from '@/lib/utils/id-utils';
 import { IkpMessage } from './message-parts/message';
 
@@ -21,7 +22,7 @@ interface CopilotChatProps {
   refreshAgentGraph: (options?: { fetchTools?: boolean }) => Promise<void>;
 }
 
-const styleOverrides = `
+const styleOverrides = css`
 .ikp-markdown-code {
   background-color: var(--ikp-color-gray-100);
   color: var(--ikp-color-gray-900);
@@ -147,7 +148,7 @@ export function CopilotChat({ agentId, tenantId, projectId, refreshAgentGraph }:
           }}
           position="left"
           baseSettings={{
-            onEvent: async (event: InkeepCallbackEvent) => {
+            async onEvent(event) {
               if (event.eventName === 'user_message_submitted') {
                 setIsStreaming(true);
               }
@@ -165,13 +166,12 @@ export function CopilotChat({ agentId, tenantId, projectId, refreshAgentGraph }:
                 });
               }
             },
-            primaryBrandColor: '#3784ff',
+            primaryBrandColor: INKEEP_BRAND_COLOR,
             colorMode: {
               sync: {
                 target: document.documentElement,
                 attributes: ['class'],
-                isDarkMode: (attributes: Record<string, string | null>) =>
-                  !!attributes?.class?.includes('dark'),
+                isDarkMode: (attributes) => !!attributes?.class?.includes('dark'),
               },
             },
             theme: {