@inkeep/agents-manage-ui 0.1.0

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

@@ -0,0 +1,314 @@
+import type { Edge, Node } from '@xyflow/react';
+import { nanoid } from 'nanoid';
+import type { A2AEdgeData } from '@/components/graph/configuration/edge-types';
+import { EdgeType } from '@/components/graph/configuration/edge-types';
+import type { ContextConfig, GraphMetadata } from '@/components/graph/configuration/graph-types';
+import { NodeType } from '@/components/graph/configuration/node-types';
+import type { ArtifactComponent } from '@/lib/api/artifact-components';
+import type { DataComponent } from '@/lib/api/data-components';
+import type { FullGraphDefinition } from '@/lib/types/graph-full';
+
+// Extract the internal agent type from the union
+type InternalAgent = Extract<FullGraphDefinition['agents'][string], { tools: string[] }>;
+
+type ExternalAgent = {
+  id: string;
+  name: string;
+  description: string;
+  baseUrl: string;
+  type: 'external';
+};
+
+export type ExtendedAgent =
+  | (InternalAgent & {
+      dataComponents: string[];
+      artifactComponents: string[];
+      models?: GraphMetadata['models'];
+      type: 'internal';
+    })
+  | ExternalAgent;
+
+type Tool = FullGraphDefinition['tools'][string];
+
+/**
+ * Safely parse a JSON string, returning undefined if parsing fails or input is falsy
+ */
+function safeJsonParse(jsonString: string | undefined | null): any {
+  if (!jsonString) return undefined;
+
+  try {
+    return JSON.parse(jsonString);
+  } catch (error) {
+    console.error('Error parsing JSON:', error);
+    return undefined;
+  }
+}
+
+
+/**
+ * Transforms React Flow nodes and edges back into the API data structure
+ */
+export function serializeGraphData(
+  nodes: Node[],
+  edges: Edge[],
+  metadata?: GraphMetadata,
+  dataComponentLookup?: Record<string, DataComponent>,
+  artifactComponentLookup?: Record<string, ArtifactComponent>
+): FullGraphDefinition {
+  const agents: Record<string, ExtendedAgent> = {};
+  const tools: Record<string, Tool> = {};
+  const usedDataComponents = new Set<string>();
+  const usedArtifactComponents = new Set<string>();
+  let defaultAgentId = '';
+
+  for (const node of nodes) {
+    if (node.type === NodeType.Agent) {
+      const agentId = (node.data.id as string) || node.id;
+      const agentDataComponents = (node.data.dataComponents as string[]) || [];
+      const agentArtifactComponents = (node.data.artifactComponents as string[]) || [];
+
+      agentDataComponents.forEach((componentId) => usedDataComponents.add(componentId));
+      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;
+      
+      if (modelsData && typeof modelsData === 'object') {
+        const hasNonEmptyValue = Object.values(modelsData).some(value => 
+          value !== null && value !== undefined && String(value).trim() !== ''
+        );
+        
+        if (hasNonEmptyValue) {
+          processedModels = modelsData;
+        }
+      }
+
+      const stopWhen = (node.data as any).stopWhen;
+      const agent: ExtendedAgent = {
+        id: agentId,
+        name: node.data.name as string,
+        description: (node.data.description as string) || '',
+        prompt: node.data.prompt as string,
+        tools: [],
+        canTransferTo: [],
+        canDelegateTo: [],
+        dataComponents: agentDataComponents,
+        artifactComponents: agentArtifactComponents,
+        ...(processedModels && { models: processedModels }),
+        type: 'internal',
+        ...(stopWhen && { stopWhen }),
+      };
+
+      if ((node.data as any).isDefault) {
+        defaultAgentId = agentId;
+      }
+
+      agents[agentId] = agent;
+    } else if (node.type === NodeType.ExternalAgent) {
+      const agentId = (node.data.id as string) || node.id;
+      const agent: ExternalAgent = {
+        id: agentId,
+        name: node.data.name as string,
+        description: (node.data.description as string) || '',
+        baseUrl: node.data.baseUrl as string,
+        type: 'external',
+      };
+
+      if ((node.data as any).isDefault) {
+        defaultAgentId = agentId;
+      }
+
+      agents[agentId] = agent;
+    } else if (node.type === NodeType.MCP) {
+      const { ...toolData } = node.data as any;
+      const tool: Tool = {
+        id: (toolData.id as string) || node.id,
+        type: 'mcp',
+        name: toolData.name as string,
+        config: toolData.config as Tool['config'],
+      };
+      // Include imageUrl if it exists
+      if (toolData.imageUrl) {
+        (tool as any).imageUrl = toolData.imageUrl;
+      }
+      tools[(toolData.id as string) || node.id] = tool;
+    }
+  }
+
+  for (const edge of edges) {
+    if (edge.type === EdgeType.A2A || edge.type === EdgeType.A2AExternal) {
+      // edge.source and edge.target are the ids of the nodes (since we allow editing the agent ids we need to use node ids since those are stable)
+      // we need to find the agents based on the node ids and then update the agents canTransferTo and canDelegateTo with the agent ids not the node ids
+
+      const sourceAgentNode = nodes.find((node) => node.id === edge.source);
+      const targetAgentNode = nodes.find((node) => node.id === edge.target);
+
+      const sourceAgentId = (sourceAgentNode?.data.id || sourceAgentNode?.id) as string;
+      const targetAgentId = (targetAgentNode?.data.id || targetAgentNode?.id) as string;
+      const sourceAgent: ExtendedAgent = agents[sourceAgentId];
+      const targetAgent: ExtendedAgent = agents[targetAgentId];
+
+      if (sourceAgent && targetAgent && (edge.data as any)?.relationships) {
+        const relationships = (edge.data as any).relationships as A2AEdgeData['relationships'];
+
+        // Helper function to safely add relationship to internal agent
+        const addRelationship = (
+          agent: ExtendedAgent,
+          relationshipType: 'canTransferTo' | 'canDelegateTo',
+          targetId: string
+        ) => {
+          if ('tools' in agent) {
+            if (!agent[relationshipType]) agent[relationshipType] = [];
+            const agentRelationships = agent[relationshipType];
+            if (agentRelationships && !agentRelationships.includes(targetId)) {
+              agentRelationships.push(targetId);
+            }
+          }
+        };
+
+        // Process transfer relationships
+        if (relationships.transferSourceToTarget) {
+          addRelationship(sourceAgent, 'canTransferTo', targetAgentId);
+        }
+        if (relationships.transferTargetToSource) {
+          addRelationship(targetAgent, 'canTransferTo', sourceAgentId);
+        }
+
+        // Process delegation relationships
+        if (relationships.delegateSourceToTarget) {
+          addRelationship(sourceAgent, 'canDelegateTo', targetAgentId);
+        }
+        if (relationships.delegateTargetToSource) {
+          addRelationship(targetAgent, 'canDelegateTo', sourceAgentId);
+        }
+      }
+    } else if (edge.type === EdgeType.Default) {
+      const sourceAgentNode = nodes.find((node) => node.id === edge.source);
+      const sourceAgentId = (sourceAgentNode?.data.id || sourceAgentNode?.id) as string;
+      const sourceAgent: ExtendedAgent = agents[sourceAgentId];
+      const targetToolNode = nodes.find((node) => node.id === edge.target);
+      if (sourceAgent && targetToolNode && 'tools' in sourceAgent) {
+        if (!sourceAgent.tools.includes((targetToolNode.data as any).id as string)) {
+          sourceAgent.tools.push((targetToolNode.data as any).id as string);
+        }
+      }
+    }
+  }
+
+  const parsedContextVariables = safeJsonParse(metadata?.contextConfig?.contextVariables);
+
+  const parsedRequestContextSchema = safeJsonParse(metadata?.contextConfig?.requestContextSchema);
+
+  const hasContextConfig =
+    metadata?.contextConfig &&
+    ((metadata.contextConfig.name && metadata.contextConfig.name.trim() !== '') ||
+      (metadata.contextConfig.description && metadata.contextConfig.description.trim() !== '') ||
+      (parsedContextVariables &&
+        typeof parsedContextVariables === 'object' &&
+        parsedContextVariables !== null &&
+        Object.keys(parsedContextVariables).length > 0) ||
+      (parsedRequestContextSchema &&
+        typeof parsedRequestContextSchema === 'object' &&
+        parsedRequestContextSchema !== null &&
+        Object.keys(parsedRequestContextSchema).length > 0));
+
+  const dataComponents: Record<string, DataComponent> = {};
+  if (dataComponentLookup) {
+    usedDataComponents.forEach((componentId) => {
+      const component = dataComponentLookup[componentId];
+      if (component) {
+        dataComponents[componentId] = component;
+      }
+    });
+  }
+
+  const artifactComponents: Record<string, ArtifactComponent> = {};
+  if (artifactComponentLookup) {
+    usedArtifactComponents.forEach((componentId) => {
+      const component = artifactComponentLookup[componentId];
+      if (component) {
+        artifactComponents[componentId] = component;
+      }
+    });
+  }
+
+  const result: FullGraphDefinition = {
+    id: metadata?.id || nanoid(),
+    name: metadata?.name || 'Untitled Graph',
+    description: metadata?.description || undefined,
+    defaultAgentId,
+    agents,
+    tools,
+    ...(Object.keys(dataComponents).length > 0 && { dataComponents }),
+    ...(Object.keys(artifactComponents).length > 0 && { artifactComponents }),
+  };
+
+  // Add new graph-level fields
+  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;
+  }
+
+  // Add contextConfig if there's meaningful data
+  if (hasContextConfig && metadata?.contextConfig) {
+    const contextConfigId = metadata.contextConfig.id || nanoid();
+    (result as any).contextConfigId = contextConfigId;
+    (result as any).contextConfig = {
+      id: contextConfigId,
+      name: metadata.contextConfig.name || '',
+      description: metadata.contextConfig.description || '',
+      requestContextSchema: parsedRequestContextSchema,
+      contextVariables: parsedContextVariables,
+    };
+  }
+
+  return result;
+}
+
+export function validateSerializedData(data: FullGraphDefinition): string[] {
+  const errors: string[] = [];
+
+  if (data.defaultAgentId && !data.agents[data.defaultAgentId]) {
+    errors.push(`Default agent ID '${data.defaultAgentId}' not found in agents`);
+  }
+
+  for (const [agentId, agent] of Object.entries(data.agents)) {
+    // Only validate tools for internal agents (external agents don't have tools)
+    if ('tools' in agent && agent.tools) {
+      for (const toolId of agent.tools) {
+        if (!data.tools[toolId]) {
+          errors.push(`Tool '${toolId}' referenced by agent '${agentId}' not found in tools`);
+        }
+      }
+    }
+
+    // Only validate relationships for internal agents (external agents don't have these properties)
+    if ('canTransferTo' in agent) {
+      for (const targetId of agent.canTransferTo ?? []) {
+        if (!data.agents[targetId]) {
+          errors.push(`Transfer target '${targetId}' for agent '${agentId}' not found in agents`);
+        }
+      }
+    }
+    if ('canDelegateTo' in agent) {
+      for (const targetId of agent.canDelegateTo ?? []) {
+        if (!data.agents[targetId]) {
+          errors.push(`Delegate target '${targetId}' for agent '${agentId}' not found in agents`);
+        }
+      }
+    }
+  }
+
+  return errors;
+}

package/src/features/graph/state/use-graph-store.ts

@@ -0,0 +1,208 @@
+import type { Connection, Edge, EdgeChange, Node, NodeChange } from '@xyflow/react';
+import { addEdge, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import type { GraphMetadata } from '@/components/graph/configuration/graph-types';
+import type { ArtifactComponent } from '@/lib/api/artifact-components';
+import type { DataComponent } from '@/lib/api/data-components';
+import type { GraphErrorSummary } from '@/lib/utils/graph-error-parser';
+
+type HistoryEntry = { nodes: Node[]; edges: Edge[] };
+
+type GraphStateData = {
+  nodes: Node[];
+  edges: Edge[];
+  metadata: GraphMetadata;
+  dataComponentLookup: Record<string, DataComponent>;
+  artifactComponentLookup: Record<string, ArtifactComponent>;
+  dirty: boolean;
+  history: HistoryEntry[];
+  future: HistoryEntry[];
+  errors: GraphErrorSummary | null;
+  showErrors: boolean;
+};
+
+type GraphState = GraphStateData & {
+  setInitial(
+    nodes: Node[],
+    edges: Edge[],
+    metadata: GraphMetadata,
+    dataComponentLookup?: Record<string, DataComponent>,
+    artifactComponentLookup?: Record<string, ArtifactComponent>
+  ): void;
+  setDataComponentLookup(dataComponentLookup: Record<string, DataComponent>): void;
+  setArtifactComponentLookup(artifactComponentLookup: Record<string, ArtifactComponent>): void;
+  setNodes(updater: (prev: Node[]) => Node[]): void;
+  setEdges(updater: (prev: Edge[]) => Edge[]): void;
+  onNodesChange(changes: NodeChange[]): void;
+  onEdgesChange(changes: EdgeChange[]): void;
+  onConnect(connection: Connection): void;
+  setMetadata<K extends keyof GraphMetadata>(field: K, value: GraphMetadata[K]): void;
+  push(nodes: Node[], edges: Edge[]): void;
+  undo(): void;
+  redo(): void;
+  markSaved(): void;
+  markUnsaved(): void;
+  clearSelection(): void;
+  deleteSelected(): void;
+  setErrors(errors: GraphErrorSummary | null): void;
+  clearErrors(): void;
+  setShowErrors(show: boolean): void;
+  hasErrors(): boolean;
+  getNodeErrors(nodeId: string): GraphErrorSummary['allErrors'];
+  getEdgeErrors(edgeId: string): GraphErrorSummary['allErrors'];
+};
+
+export const useGraphStore = create<GraphState>()(
+  devtools((set, get) => ({
+    nodes: [],
+    edges: [],
+    metadata: {
+      id: undefined,
+      name: '',
+      description: '',
+      contextConfig: {
+        name: '',
+        description: '',
+        contextVariables: '',
+        requestContextSchema: '',
+      },
+      models: undefined,
+      stopWhen: undefined,
+      graphPrompt: undefined,
+      statusUpdates: undefined,
+    },
+    dataComponentLookup: {},
+    artifactComponentLookup: {},
+    dirty: false,
+    history: [],
+    future: [],
+    errors: null,
+    showErrors: false,
+    setInitial(nodes, edges, metadata, dataComponentLookup = {}, artifactComponentLookup = {}) {
+      set({
+        nodes,
+        edges,
+        metadata,
+        dataComponentLookup,
+        artifactComponentLookup,
+        dirty: false,
+        history: [],
+        future: [],
+        errors: null,
+        showErrors: false,
+      });
+    },
+    setDataComponentLookup(dataComponentLookup) {
+      set({ dataComponentLookup });
+    },
+    setArtifactComponentLookup(artifactComponentLookup) {
+      set({ artifactComponentLookup });
+    },
+    setNodes(updater) {
+      set((state) => ({ nodes: updater(state.nodes) }));
+    },
+    setEdges(updater) {
+      set((state) => ({ edges: updater(state.edges) }));
+    },
+    push(nodes, edges) {
+      set((state) => ({ history: [...state.history, { nodes, edges }], future: [] }));
+    },
+    onNodesChange(changes) {
+      set((state) => ({
+        history: [...state.history, { nodes: state.nodes, edges: state.edges }],
+        nodes: applyNodeChanges(changes, state.nodes),
+      }));
+    },
+    onEdgesChange(changes) {
+      set((state) => ({ history: [...state.history, { nodes: state.nodes, edges: state.edges }] }));
+      set((state) => ({
+        history: [...state.history, { nodes: state.nodes, edges: state.edges }],
+        edges: applyEdgeChanges(changes, state.edges),
+      }));
+    },
+    onConnect(connection) {
+      set((state) => ({ edges: addEdge(connection as any, state.edges) }));
+    },
+    setMetadata(field, value) {
+      set((state) => ({ metadata: { ...state.metadata, [field]: value } }));
+    },
+    undo() {
+      const { history } = get();
+      if (history.length === 0) return;
+      const prev = history[history.length - 1];
+      set((state) => ({
+        nodes: prev.nodes,
+        edges: prev.edges,
+        history: state.history.slice(0, -1),
+        future: [{ nodes: state.nodes, edges: state.edges }, ...state.future],
+        dirty: state.dirty,
+      }));
+    },
+    redo() {
+      const { future } = get();
+      if (future.length === 0) return;
+      const next = future[0];
+      set((state) => ({
+        nodes: next.nodes,
+        edges: next.edges,
+        future: state.future.slice(1),
+        history: [...state.history, { nodes: state.nodes, edges: state.edges }],
+        dirty: state.dirty,
+      }));
+    },
+    markSaved() {
+      set({ dirty: false });
+    },
+    markUnsaved() {
+      set({ dirty: true });
+    },
+    clearSelection() {
+      set((state) => ({
+        nodes: state.nodes.map((n) => ({ ...n, selected: false })),
+        edges: state.edges.map((e) => ({ ...e, selected: false })),
+        dirty: state.dirty,
+      }));
+    },
+    deleteSelected() {
+      set((state) => {
+        const nodesToDelete = new Set(
+          state.nodes.filter((n) => n.selected && (n.deletable ?? true)).map((n) => n.id)
+        );
+        const edgesRemaining = state.edges.filter(
+          (e) => !e.selected && !nodesToDelete.has(e.source) && !nodesToDelete.has(e.target)
+        );
+        const nodesRemaining = state.nodes.filter((n) => !nodesToDelete.has(n.id));
+        return {
+          history: [...state.history, { nodes: state.nodes, edges: state.edges }],
+          nodes: nodesRemaining,
+          edges: edgesRemaining,
+          dirty: true,
+        };
+      });
+    },
+    setErrors(errors) {
+      set({ errors, showErrors: errors !== null });
+    },
+    clearErrors() {
+      set({ errors: null, showErrors: false });
+    },
+    setShowErrors(show) {
+      set({ showErrors: show });
+    },
+    hasErrors() {
+      const { errors } = get();
+      return errors !== null && errors.totalErrors > 0;
+    },
+    getNodeErrors(nodeId) {
+      const { errors } = get();
+      if (!errors || !errors.nodeErrors[nodeId]) return [];
+      return errors.nodeErrors[nodeId];
+    },
+    getEdgeErrors(edgeId) {
+      const { errors } = get();
+      if (!errors || !errors.edgeErrors[edgeId]) return [];
+      return errors.edgeErrors[edgeId];
+    },
+  }))
+);

package/src/features/graph/ui/use-graph-shortcuts.ts

@@ -0,0 +1,41 @@
+import { useCallback, useEffect } from 'react';
+import { useGraphStore } from '@/features/graph/state/use-graph-store';
+
+export function useGraphShortcuts() {
+  const { undo, redo, deleteSelected } = useGraphStore();
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!(e.target as HTMLElement)?.classList.contains('react-flow__node')) return;
+      const meta = e.metaKey || e.ctrlKey;
+      if (meta && e.key.toLowerCase() === 'z') {
+        e.preventDefault();
+        if (e.shiftKey) {
+          redo();
+        } else {
+          undo();
+        }
+        return;
+      }
+      if (e.key === 'Delete' || e.key === 'Backspace') {
+        // Let inputs handle backspace/delete
+        const target = e.target as HTMLElement | null;
+        const isEditable =
+          target &&
+          (target.tagName === 'INPUT' ||
+            target.tagName === 'TEXTAREA' ||
+            (target as any).isContentEditable);
+        if (!isEditable) {
+          e.preventDefault();
+          deleteSelected();
+        }
+      }
+    },
+    [undo, redo, deleteSelected]
+  );
+
+  useEffect(() => {
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onKeyDown]);
+}

package/src/hooks/use-ai-calls-query-state.ts

@@ -0,0 +1,55 @@
+import { parseAsString, parseAsStringLiteral, useQueryStates } from 'nuqs';
+
+// Define the time range options as a const assertion for type safety
+const timeRanges = ['24h', '7d', '15d', 'custom'] as const;
+export type TimeRange = (typeof timeRanges)[number];
+
+/**
+ * Hook for managing AI calls breakdown query state with nuqs
+ * Provides type-safe query parameter management for:
+ * - Time range selection (24h, 7d, 15d, custom)
+ * - Custom date range (start/end dates)
+ * - Graph filtering
+ * - Model filtering
+ */
+export function useAICallsQueryState() {
+  const [queryState, setQueryState] = useQueryStates({
+    // Time range selection with default
+    timeRange: parseAsStringLiteral(timeRanges).withDefault('15d'),
+
+    // Custom date range - using descriptive names instead of 'cs'/'ce'
+    customStartDate: parseAsString.withDefault(''),
+    customEndDate: parseAsString.withDefault(''),
+
+    // Filtering options
+    selectedGraph: parseAsString.withDefault('all'),
+    selectedModel: parseAsString.withDefault('all'),
+  });
+
+  return {
+    // Current state
+    timeRange: queryState.timeRange,
+    customStartDate: queryState.customStartDate,
+    customEndDate: queryState.customEndDate,
+    selectedGraph: queryState.selectedGraph,
+    selectedModel: queryState.selectedModel,
+
+    // State setters
+    setQueryState,
+
+    // Convenience methods
+    setTimeRange: (timeRange: TimeRange) => setQueryState({ timeRange }),
+    setCustomDateRange: (start: string, end: string) =>
+      setQueryState({ customStartDate: start, customEndDate: end }),
+    setGraphFilter: (graph: string) => setQueryState({ selectedGraph: graph }),
+    setModelFilter: (model: string) => setQueryState({ selectedModel: model }),
+    clearFilters: () =>
+      setQueryState({
+        selectedGraph: 'all',
+        selectedModel: 'all',
+        timeRange: '15d',
+        customStartDate: '',
+        customEndDate: '',
+      }),
+  };
+}