@inkeep/agents-manage-ui 0.1.1 → 0.1.3

package/src/constants/page-descriptions.tsx

@@ -1,7 +1,6 @@
 import { ExternalLink } from '@/components/ui/external-link';
 
-export const DOCS_BASE_URL =
-  process.env.NEXT_PUBLIC_DOCS_BASE_URL || 'https://docs.inkeep.com';
+export const DOCS_BASE_URL = process.env.NEXT_PUBLIC_DOCS_BASE_URL || 'https://docs.inkeep.com';
 
 export const artifactDescription = (
   <>
@@ -18,9 +17,7 @@ export const dataComponentDescription = (
   <>
     Data components are structured components that agents can use to display rich data.
     {'\n'}
-    <ExternalLink href={`${DOCS_BASE_URL}/visual-builder/data-components`}>
-      Learn more
-    </ExternalLink>
+    <ExternalLink href={`${DOCS_BASE_URL}/visual-builder/data-components`}>Learn more</ExternalLink>
   </>
 );
 

package/src/constants/signoz.ts

@@ -21,13 +21,13 @@ export const SPAN_KEYS = {
   HAS_ERROR: 'hasError',
   STATUS_MESSAGE: 'status_message',
   OTEL_STATUS_DESCRIPTION: 'otel.status_description',
-  
+
   // Graph attributes
   GRAPH_ID: 'graph.id',
   GRAPH_NAME: 'graph.name',
   TENANT_ID: 'tenant.id',
   PROJECT_ID: 'project.id',
-  
+
   // AI/Agent attributes
   AI_AGENT_NAME: 'ai.agentName',
   AI_AGENT_NAME_ALT: 'ai.agent.name',
@@ -39,7 +39,7 @@ export const SPAN_KEYS = {
   AI_MODEL_PROVIDER: 'ai.model.provider',
   AI_TELEMETRY_FUNCTION_ID: 'ai.telemetry.functionId',
   AI_MODEL_ID: 'ai.model.id',
-  
+
   // Tool attributes
   AI_TOOL_CALL_NAME: 'ai.toolCall.name',
   AI_TOOL_CALL_RESULT: 'ai.toolCall.result',
@@ -47,37 +47,37 @@ export const SPAN_KEYS = {
   AI_TOOL_CALL_ID: 'ai.toolCall.id',
   AI_TOOL_TYPE: 'ai.toolType',
   TOOL_PURPOSE: 'tool.purpose',
-  
+
   // Agent attributes
   AGENT_ID: 'agent.id',
   AGENT_NAME: 'agent.name',
-  
+
   // Token usage
   GEN_AI_USAGE_INPUT_TOKENS: 'gen_ai.usage.input_tokens',
   GEN_AI_USAGE_OUTPUT_TOKENS: 'gen_ai.usage.output_tokens',
-  
+
   // Context attributes
   CONTEXT_URL: 'context.url',
   CONTEXT_CONFIG_ID: 'context.context_config_id',
   CONTEXT_AGENT_GRAPH_ID: 'context.agent_graph_id',
   CONTEXT_REQUEST_KEYS: 'context.request_context_keys',
-  
+
   // Message attributes
   MESSAGE_CONTENT: 'message.content',
   MESSAGE_TIMESTAMP: 'message.timestamp',
   MCP_TOOL_DESCRIPTION: 'mcp.tool.description',
-  
+
   // Delegation/Transfer attributes
   DELEGATION_FROM_AGENT_ID: 'delegation.from_agent_id',
   DELEGATION_TO_AGENT_ID: 'delegation.to_agent_id',
   TRANSFER_FROM_AGENT_ID: 'transfer.from_agent_id',
   TRANSFER_TO_AGENT_ID: 'transfer.to_agent_id',
-  
+
   // HTTP attributes
   HTTP_URL: 'http.url',
   HTTP_STATUS_CODE: 'http.status_code',
   HTTP_RESPONSE_BODY_SIZE: 'http.response.body_size',
-  
+
   // Core attributes
   NAME: 'name',
   PARENT_SPAN_ID: 'parentSpanID',
@@ -103,19 +103,18 @@ export const QUERY_FIELD_CONFIGS = {
   // String tag fields
   STRING_TAG: { dataType: DATA_TYPES.STRING, type: FIELD_TYPES.TAG, isColumn: false },
   STRING_TAG_COLUMN: { dataType: DATA_TYPES.STRING, type: FIELD_TYPES.TAG, isColumn: true },
-  
+
   // Numeric tag fields
   INT64_TAG: { dataType: DATA_TYPES.INT64, type: FIELD_TYPES.TAG, isColumn: false },
   INT64_TAG_COLUMN: { dataType: DATA_TYPES.INT64, type: FIELD_TYPES.TAG, isColumn: true },
   FLOAT64_TAG: { dataType: DATA_TYPES.FLOAT64, type: FIELD_TYPES.TAG, isColumn: false },
   FLOAT64_TAG_COLUMN: { dataType: DATA_TYPES.FLOAT64, type: FIELD_TYPES.TAG, isColumn: true },
-  
+
   // Boolean tag fields
   BOOL_TAG: { dataType: DATA_TYPES.BOOL, type: FIELD_TYPES.TAG, isColumn: false },
   BOOL_TAG_COLUMN: { dataType: DATA_TYPES.BOOL, type: FIELD_TYPES.TAG, isColumn: true },
 } as const;
 
-
 export const UNKNOWN_VALUE = 'unknown' as const;
 
 /** Activity Types */
@@ -174,15 +173,15 @@ export const OPERATORS = {
   GREATER_THAN: '>',
   LESS_THAN_OR_EQUAL: '<=',
   GREATER_THAN_OR_EQUAL: '>=',
-  
+
   // String operators
   LIKE: 'like',
   NOT_LIKE: 'nlike',
-  
+
   // Existence operators
   EXISTS: 'exists',
   NOT_EXISTS: 'nexists',
-  
+
   // Logical operators
   AND: 'AND',
   OR: 'OR',
@@ -276,5 +275,3 @@ export const QUERY_DEFAULTS = {
   LIMIT_1000: 1000,
   EMPTY_GROUP_BY: [],
 } as const;
-
-

package/src/features/graph/domain/__tests__/roundtrip.test.ts

@@ -46,16 +46,16 @@ describe('graph serialize/deserialize', () => {
       } as Edge,
     ];
 
-    const serialized = serializeGraphData(nodes, edges, { 
-      id: 'g1', 
-      name: 'G', 
+    const serialized = serializeGraphData(nodes, edges, {
+      id: 'g1',
+      name: 'G',
       description: 'D',
       contextConfig: {
         name: 'Context',
         description: 'Context description',
         contextVariables: '{}',
-        requestContextSchema: '{}'
-      }
+        requestContextSchema: '{}',
+      },
     });
     expect(serialized.id).toBe('g1');
     expect(serialized.agents['a1']).toBeDefined();

package/src/features/graph/domain/serialize.ts

@@ -44,7 +44,6 @@ function safeJsonParse(jsonString: string | undefined | null): any {
   }
 }
 
-
 /**
  * Transforms React Flow nodes and edges back into the API data structure
  */
@@ -71,13 +70,13 @@ export function serializeGraphData(
       agentArtifactComponents.forEach((componentId) => usedArtifactComponents.add(componentId));
       // Process models - only include if it has non-empty, non-whitespace values
       const modelsData = node.data.models as GraphMetadata['models'] | undefined;
-      let processedModels: GraphMetadata['models'] | undefined = undefined;
-      
+      let processedModels: GraphMetadata['models'] | undefined;
+
       if (modelsData && typeof modelsData === 'object') {
-        const hasNonEmptyValue = Object.values(modelsData).some(value => 
-          value !== null && value !== undefined && String(value).trim() !== ''
+        const hasNonEmptyValue = Object.values(modelsData).some(
+          (value) => value !== null && value !== undefined && String(value).trim() !== ''
         );
-        
+
         if (hasNonEmptyValue) {
           processedModels = modelsData;
         }
@@ -247,15 +246,15 @@ export function serializeGraphData(
   if (metadata?.models) {
     (result as any).models = metadata.models;
   }
-  
+
   if (metadata?.stopWhen) {
     (result as any).stopWhen = metadata.stopWhen;
   }
-  
+
   if (metadata?.graphPrompt) {
     (result as any).graphPrompt = metadata.graphPrompt;
   }
-  
+
   if (metadata?.statusUpdates) {
     (result as any).statusUpdates = metadata.statusUpdates;
   }

package/src/hooks/use-auto-prefill-id-zustand.ts

@@ -0,0 +1,68 @@
+import { useEffect, useRef } from 'react';
+import { generateId } from '@/lib/utils/generate-id';
+
+interface UseAutoPrefillIdZustandOptions {
+  nameValue: string | undefined;
+  idValue: string | undefined;
+  onIdChange: (id: string) => void;
+  isEditing?: boolean;
+}
+
+/**
+ * Custom hook to auto-prefill an ID field based on a name field for Zustand state
+ * Only prefills when creating new items (not editing) and when the ID field hasn't been manually edited
+ */
+export function useAutoPrefillIdZustand({
+  nameValue,
+  idValue,
+  onIdChange,
+  isEditing = false,
+}: UseAutoPrefillIdZustandOptions) {
+  // Track if user has manually edited the ID field
+  const hasManuallyEditedId = useRef(false);
+  const lastGeneratedId = useRef('');
+  const onIdChangeRef = useRef(onIdChange);
+  const currentIdValue = useRef(idValue);
+
+  // Keep refs up to date
+  useEffect(() => {
+    onIdChangeRef.current = onIdChange;
+    currentIdValue.current = idValue;
+  }, [onIdChange, idValue]);
+
+  // Reset manual edit tracking when switching between graphs
+  useEffect(() => {
+    if (isEditing) {
+      hasManuallyEditedId.current = false;
+      lastGeneratedId.current = '';
+    }
+  }, [isEditing]);
+
+  // Track manual edits to ID field
+  useEffect(() => {
+    if (!isEditing) {
+      if (!idValue) {
+        // If ID field is empty, reset manual edit flag to allow auto-generation
+        hasManuallyEditedId.current = false;
+        lastGeneratedId.current = '';
+      } else if (idValue !== lastGeneratedId.current) {
+        // Consider it a manual edit if user typed something different from our generated value
+        // This includes typing into an empty field (when lastGeneratedId is empty)
+        hasManuallyEditedId.current = true;
+      }
+    }
+  }, [idValue, isEditing]);
+
+  // Auto-prefill ID based on name field
+  useEffect(() => {
+    if (!isEditing && nameValue && !hasManuallyEditedId.current) {
+      const generatedId = generateId(nameValue);
+
+      // Only update if the generated ID is different from current ID
+      if (generatedId !== currentIdValue.current) {
+        lastGeneratedId.current = generatedId;
+        onIdChangeRef.current(generatedId);
+      }
+    }
+  }, [nameValue, isEditing]);
+}

package/src/hooks/use-auto-prefill-id.ts

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { type UseFormReturn, type FieldValues, useWatch } from 'react-hook-form';
+import { generateId } from '@/lib/utils/generate-id';
+
+interface UseAutoPrefillIdOptions<T extends FieldValues> {
+  form: UseFormReturn<T>;
+  nameField: keyof T;
+  idField: keyof T;
+  isEditing?: boolean;
+}
+
+/**
+ * Custom hook to auto-prefill an ID field based on a name field
+ * Only prefills when creating new items (not editing) and when the ID field hasn't been manually edited
+ */
+export function useAutoPrefillId<T extends FieldValues>({
+  form,
+  nameField,
+  idField,
+  isEditing = false,
+}: UseAutoPrefillIdOptions<T>) {
+  const nameValue = useWatch({
+    control: form.control,
+    name: nameField as any,
+  });
+
+  const isIdFieldModified = (form.formState.dirtyFields as any)[idField];
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we don't want to re-run this effect when the isIdFieldModified changes since that means the user has manually edited the ID field
+  useEffect(() => {
+    if (!isEditing && nameValue && !isIdFieldModified) {
+      const generatedId = generateId(nameValue);
+      form.setValue(idField as any, generatedId as any, { shouldValidate: true });
+    }
+  }, [nameValue, idField, isEditing]);
+}

package/src/hooks/use-chat-activities-polling.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { ConversationDetail } from '@/components/traces/timeline/types';
 
 interface UseChatActivitiesPollingOptions {
@@ -12,6 +12,8 @@ interface UseChatActivitiesPollingReturn {
   error: string | null;
   startPolling: () => void;
   stopPolling: () => void;
+  retryConnection: () => void;
+  refreshOnce: () => Promise<{ hasNewActivity: boolean }>;
 }
 
 export const useChatActivitiesPolling = ({
@@ -27,15 +29,10 @@ export const useChatActivitiesPolling = ({
   const isComponentMountedRef = useRef(true);
   const abortControllerRef = useRef<AbortController | null>(null);
 
-  const fetchChatActivities = useCallback(async () => {
+  const fetchChatActivities = useCallback(async (): Promise<ConversationDetail | null> => {
     try {
       setError(null);
 
-      // Cancel any previous request
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
-      }
-
       // Create new abort controller for this request
       abortControllerRef.current = new AbortController();
       const currentConversationId = conversationId; // Capture current ID
@@ -46,7 +43,9 @@ export const useChatActivitiesPolling = ({
 
       if (!response.ok) {
         // If conversation doesn't exist yet, that's fine - just return
-        if (response.status === 404) return;
+        if (response.status === 404) {
+          return null;
+        }
         throw new Error('Failed to fetch chat activities');
       }
 
@@ -61,16 +60,29 @@ export const useChatActivitiesPolling = ({
           setLastActivityCount(newCount);
         }
       }
+
+      return data;
     } catch (err) {
       // Don't log abort errors as they are expected when cancelling requests
       if (err instanceof Error && err.name === 'AbortError') {
-        return;
+        return null;
       }
 
       if (isComponentMountedRef.current) {
-        console.warn('Error fetching chat activities:', err);
         setError(err instanceof Error ? err.message : 'An error occurred');
+        // Stop polling on error to prevent repeated failed requests
+        setIsPolling(false);
+        if (pollingIntervalRef.current) {
+          clearInterval(pollingIntervalRef.current);
+          pollingIntervalRef.current = null;
+        }
+        // Cancel any pending requests
+        if (abortControllerRef.current) {
+          abortControllerRef.current.abort();
+          abortControllerRef.current = null;
+        }
       }
+      throw err;
     }
   }, [conversationId, lastActivityCount]);
 
@@ -81,11 +93,15 @@ export const useChatActivitiesPolling = ({
     setIsPolling(true);
 
     // Initial fetch
-    fetchChatActivities();
+    fetchChatActivities().catch(() => {
+      // Error handling is already done in fetchChatActivities
+    });
 
     // Set up polling interval
     pollingIntervalRef.current = setInterval(() => {
-      fetchChatActivities();
+      fetchChatActivities().catch(() => {
+        // Error handling is already done in fetchChatActivities
+      });
     }, pollingInterval);
   }, [fetchChatActivities, pollingInterval]);
 
@@ -103,6 +119,21 @@ export const useChatActivitiesPolling = ({
     }
   }, []);
 
+  // Retry connection - clears error and restarts polling
+  const retryConnection = useCallback(() => {
+    setError(null);
+    stopPolling();
+    startPolling();
+  }, [startPolling, stopPolling]);
+
+  // Refresh once - makes a single request without starting polling
+  const refreshOnce = useCallback(async (): Promise<{ hasNewActivity: boolean }> => {
+    const currentCount = chatActivities?.activities?.length || 0;
+    const data = await fetchChatActivities();
+    const newCount = data?.activities?.length || 0;
+    return { hasNewActivity: newCount > currentCount };
+  }, [fetchChatActivities, chatActivities?.activities?.length]);
+
   // Cleanup on unmount
   useEffect(() => {
     isComponentMountedRef.current = true;
@@ -141,5 +172,7 @@ export const useChatActivitiesPolling = ({
     error,
     startPolling,
     stopPolling,
+    retryConnection,
+    refreshOnce,
   };
 };

package/src/hooks/use-graph-errors.ts

@@ -1,8 +1,9 @@
 /**
  * Hook for accessing graph error state and utilities
  */
-import { useGraphStore } from '@/features/graph/state/use-graph-store';
+
 import { useCallback } from 'react';
+import { useGraphStore } from '@/features/graph/state/use-graph-store';
 
 export interface ErrorHelpers {
   hasFieldError: (fieldName: string) => boolean;

package/src/hooks/use-project-data.ts

@@ -1,9 +1,9 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
-import type { Project } from '@/lib/types/project';
+import { useEffect, useState } from 'react';
 import { fetchProjectAction } from '@/lib/actions/projects';
+import type { Project } from '@/lib/types/project';
 
 export function useProjectData() {
   const params = useParams();

package/src/lib/actions/graph-full.ts

@@ -12,11 +12,15 @@ import {
   ApiError,
   createFullGraph as apiCreateFullGraph,
   deleteFullGraph as apiDeleteFullGraph,
+  fetchGraphs as apiFetchGraphs,
   getFullGraph as apiGetFullGraph,
   updateFullGraph as apiUpdateFullGraph,
-  fetchGraphs as apiFetchGraphs,
 } from '../api/graph-full-client';
-import { type FullGraphDefinition, FullGraphDefinitionSchema, Graph } from '../types/graph-full';
+import {
+  type FullGraphDefinition,
+  FullGraphDefinitionSchema,
+  type Graph,
+} from '../types/graph-full';
 
 /**
  * Result type for server actions - follows a consistent pattern

package/src/lib/actions/projects.ts

@@ -1,6 +1,7 @@
 'use server';
 
 import { revalidatePath } from 'next/cache';
+import type { ProjectFormData } from '@/components/projects/form/validation';
 import {
   createProject,
   deleteProject,
@@ -11,7 +12,6 @@ import {
 import { ApiError } from '../types/errors';
 import type { Project } from '../types/project';
 import type { ActionResult } from './types';
-import type { ProjectFormData } from '@/components/projects/form/validation';
 
 /**
  * Fetch all projects

package/src/lib/api/api-config.ts

@@ -10,23 +10,23 @@ const DEFAULT_MANAGEMENT_API_BASE_URL = 'http://localhost:3002';
 const DEFAULT_EXECUTION_API_BASE_URL = 'http://localhost:3003';
 
 // Management API (CRUD operations, configuration)
-if (!process.env.NEXT_PUBLIC_INKEEP_MANAGEMENT_API_URL) {
+if (!process.env.NEXT_PUBLIC_INKEEP_AGENTS_MANAGE_API_URL) {
   console.warn(
-    `NEXT_PUBLIC_INKEEP_MANAGEMENT_API_URL is not set, falling back to: ${DEFAULT_MANAGEMENT_API_BASE_URL}`
+    `NEXT_PUBLIC_INKEEP_AGENTS_MANAGE_API_URL is not set, falling back to: ${DEFAULT_MANAGEMENT_API_BASE_URL}`
   );
 }
 
 // Execution API (chat completions, agent execution)
-if (!process.env.NEXT_PUBLIC_INKEEP_EXECUTION_API_URL) {
+if (!process.env.NEXT_PUBLIC_INKEEP_AGENTS_RUN_API_URL) {
   console.warn(
-    `NEXT_PUBLIC_INKEEP_EXECUTION_API_URL is not set, falling back to: ${DEFAULT_EXECUTION_API_BASE_URL}`
+    `NEXT_PUBLIC_INKEEP_AGENTS_RUN_API_URL is not set, falling back to: ${DEFAULT_EXECUTION_API_BASE_URL}`
   );
 }
 
 export const MANAGEMENT_API_BASE_URL =
-  process.env.NEXT_PUBLIC_INKEEP_MANAGEMENT_API_URL || DEFAULT_MANAGEMENT_API_BASE_URL;
+  process.env.NEXT_PUBLIC_INKEEP_AGENTS_MANAGE_API_URL || DEFAULT_MANAGEMENT_API_BASE_URL;
 export const EXECUTION_API_BASE_URL =
-  process.env.NEXT_PUBLIC_INKEEP_EXECUTION_API_URL || DEFAULT_EXECUTION_API_BASE_URL;
+  process.env.NEXT_PUBLIC_INKEEP_AGENTS_RUN_API_URL || DEFAULT_EXECUTION_API_BASE_URL;
 
 async function makeApiRequestInternal<T>(
   baseUrl: string,

package/src/lib/api/api-keys.ts

@@ -7,7 +7,10 @@
 
 'use server';
 
-import type { ApiKeyApiSelect, ApiKeyApiCreationResponse } from '@inkeep/agents-core/client-exports';
+import type {
+  ApiKeyApiCreationResponse,
+  ApiKeyApiSelect,
+} from '@inkeep/agents-core/client-exports';
 import type { ListResponse, SingleResponse } from '../types/response';
 import { makeManagementApiRequest } from './api-config';
 import { validateProjectId, validateTenantId } from './resource-validation';

package/src/lib/api/credentials.ts

@@ -1,8 +1,8 @@
 'use server';
 
 import type {
-  CredentialReferenceApiSelect,
   CredentialReferenceApiInsert,
+  CredentialReferenceApiSelect,
   McpTool,
 } from '@inkeep/agents-core';
 import type { ListResponse, SingleResponse } from '../types/response';

package/src/lib/api/data-components.ts

@@ -8,8 +8,8 @@
 'use server';
 
 import type {
-  DataComponentApiSelect,
   DataComponentApiInsert,
+  DataComponentApiSelect,
   DataComponentApiUpdate,
 } from '@inkeep/agents-core';
 import type { ListResponse, SingleResponse } from '../types/response';

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

@@ -100,9 +100,12 @@ export async function deleteFullGraph(
   validateTenantId(tenantId);
   validateProjectId(projectId);
 
-  await makeManagementApiRequest(`tenants/${tenantId}/crud/projects/${projectId}/graph/${graphId}`, {
-    method: 'DELETE',
-  });
+  await makeManagementApiRequest(
+    `tenants/${tenantId}/crud/projects/${projectId}/graph/${graphId}`,
+    {
+      method: 'DELETE',
+    }
+  );
 }
 
 // Export the error class for use in server actions

package/src/lib/api/projects.ts

@@ -1,8 +1,8 @@
 'use server';
 
+import type { ProjectFormData } from '@/components/projects/form/validation';
 import type { Project } from '../types/project';
 import type { ListResponse, SingleResponse } from '../types/response';
-import type { ProjectFormData } from '@/components/projects/form/validation';
 import { makeManagementApiRequest } from './api-config';
 import { validateTenantId } from './resource-validation';
 

package/src/lib/api/signoz-sql.ts

@@ -2,7 +2,7 @@ import axios from 'axios';
 import axiosRetry from 'axios-retry';
 
 // Configure axios retry
-axiosRetry(axios, { 
+axiosRetry(axios, {
   retries: 3,
   retryDelay: axiosRetry.exponentialDelay,
 });