@inkeep/agents-manage-ui 0.1.0

package/src/features/graph/commands/commands.ts

@@ -0,0 +1,123 @@
+import type { Connection, Edge, Node } from '@xyflow/react';
+import { addEdge } from '@xyflow/react';
+import { EdgeType } from '@/components/graph/configuration/edge-types';
+import type { GraphMetadata } from '@/components/graph/configuration/graph-types';
+import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { eventBus } from '@/lib/events';
+import type { Command } from './command-manager';
+
+export class AddNodeCommand implements Command {
+  readonly name = 'AddNode';
+  private node: Node;
+  constructor(node: Node) {
+    this.node = node;
+  }
+  execute() {
+    const { setNodes } = useGraphStore.getState();
+    setNodes((prev) => prev.concat(this.node));
+  }
+  undo() {
+    const { setNodes } = useGraphStore.getState();
+    setNodes((prev) => prev.filter((n) => n.id !== this.node.id));
+  }
+}
+
+export class DeleteSelectionCommand implements Command {
+  readonly name = 'DeleteSelection';
+  execute() {
+    const { deleteSelected } = useGraphStore.getState();
+    deleteSelected();
+  }
+  undo() {
+    // relies on store history; in a richer system we'd capture diffs
+    const { undo } = useGraphStore.getState();
+    undo();
+  }
+}
+
+export class ConnectEdgeCommand implements Command {
+  readonly name = 'ConnectEdge';
+  private connection: Connection;
+  private createdEdgeId: string | null = null;
+  constructor(connection: Connection) {
+    this.connection = connection;
+  }
+  execute() {
+    const { setEdges } = useGraphStore.getState();
+    setEdges((eds) => {
+      const newEdges = addEdge(this.connection as any, eds);
+      const last = newEdges[newEdges.length - 1];
+      this.createdEdgeId = last?.id ?? null;
+      return newEdges;
+    });
+  }
+  undo() {
+    if (!this.createdEdgeId) return;
+    const { setEdges } = useGraphStore.getState();
+    const id = this.createdEdgeId;
+    setEdges((eds) => eds.filter((e) => e.id !== id));
+  }
+}
+
+export class UpdateMetadataCommand implements Command {
+  readonly name = 'UpdateMetadata';
+  private field: keyof GraphMetadata;
+  private value: GraphMetadata[keyof GraphMetadata];
+  private prev: GraphMetadata[keyof GraphMetadata] | undefined;
+  constructor(field: keyof GraphMetadata, value: GraphMetadata[keyof GraphMetadata]) {
+    this.field = field;
+    this.value = value;
+  }
+  execute() {
+    const { metadata, setMetadata } = useGraphStore.getState();
+    this.prev = metadata[this.field];
+    setMetadata(this.field, this.value);
+  }
+  undo() {
+    const { setMetadata } = useGraphStore.getState();
+    setMetadata(this.field, this.prev as any);
+  }
+}
+
+export class ClearSelectionCommand implements Command {
+  readonly name = 'ClearSelection';
+  execute() {
+    const { clearSelection } = useGraphStore.getState();
+    clearSelection();
+  }
+  undo() {
+    // no-op for now
+  }
+}
+
+export class AddPreparedEdgeCommand implements Command {
+  readonly name = 'AddPreparedEdge';
+  private edge: Edge;
+  private deselectOtherEdgesIfA2A: boolean;
+  constructor(edge: Edge, options?: { deselectOtherEdgesIfA2A?: boolean }) {
+    this.edge = edge;
+    this.deselectOtherEdgesIfA2A = Boolean(options?.deselectOtherEdgesIfA2A);
+  }
+  execute() {
+    const { setEdges, setNodes } = useGraphStore.getState();
+    if (this.edge.type === EdgeType.A2A) {
+      // deselect nodes when creating an A2A edge
+      setNodes((nds) => nds.map((n) => ({ ...n, selected: false })));
+    }
+    setEdges((eds) => {
+      if (eds.some((e) => e.id === this.edge.id)) return eds;
+      const base =
+        this.deselectOtherEdgesIfA2A && this.edge.type === EdgeType.A2A
+          ? eds.map((e) => ({ ...e, selected: false }))
+          : eds;
+      const withNew = addEdge(this.edge as any, base);
+      eventBus.emit('edgeConnected', { edgeId: this.edge.id });
+      return withNew;
+    });
+  }
+  undo() {
+    const { setEdges } = useGraphStore.getState();
+    const id = this.edge.id;
+    setEdges((eds) => eds.filter((e) => e.id !== id));
+  }
+}

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

@@ -0,0 +1,75 @@
+import type { Edge, Node } from '@xyflow/react';
+import { describe, expect, it } from 'vitest';
+import { EdgeType } from '@/components/graph/configuration/edge-types';
+import { NodeType } from '@/components/graph/configuration/node-types';
+import { deserializeGraphData } from '@/features/graph/domain/deserialize';
+import { serializeGraphData } from '@/features/graph/domain/serialize';
+
+describe('graph serialize/deserialize', () => {
+  it('round-trips a simple agent with tool and a2a edge', () => {
+    const nodes: Node[] = [
+      {
+        id: 'a1',
+        type: NodeType.Agent,
+        position: { x: 0, y: 0 },
+        data: { id: 'a1', name: 'A1', isDefault: true, prompt: 'i' },
+        deletable: false,
+      },
+      {
+        id: 'a2',
+        type: NodeType.Agent,
+        position: { x: 0, y: 0 },
+        data: { id: 'a2', name: 'A2', prompt: 'i' },
+      },
+      {
+        id: 't1node',
+        type: NodeType.MCP,
+        position: { x: 0, y: 0 },
+        data: { id: 't1', type: 'mcp', name: 'Tool1', config: {} },
+      },
+    ];
+    const edges: Edge[] = [
+      { id: 'e1', type: EdgeType.Default, source: 'a1', target: 't1node' } as Edge,
+      {
+        id: 'e2',
+        type: EdgeType.A2A,
+        source: 'a1',
+        target: 'a2',
+        data: {
+          relationships: {
+            transferSourceToTarget: true,
+            transferTargetToSource: false,
+            delegateSourceToTarget: false,
+            delegateTargetToSource: false,
+          },
+        },
+      } as Edge,
+    ];
+
+    const serialized = serializeGraphData(nodes, edges, { 
+      id: 'g1', 
+      name: 'G', 
+      description: 'D',
+      contextConfig: {
+        name: 'Context',
+        description: 'Context description',
+        contextVariables: '{}',
+        requestContextSchema: '{}'
+      }
+    });
+    expect(serialized.id).toBe('g1');
+    expect(serialized.agents['a1']).toBeDefined();
+    expect(serialized.tools['t1']).toBeDefined();
+    const a1 = serialized.agents['a1'];
+    if ('tools' in a1) {
+      expect(a1.tools).toContain('t1');
+    }
+    if ('canTransferTo' in a1) {
+      expect(a1.canTransferTo).toContain('a2');
+    }
+
+    const deserialized = deserializeGraphData(serialized);
+    expect(deserialized.nodes.length).toBeGreaterThan(0);
+    expect(deserialized.edges.length).toBeGreaterThan(0);
+  });
+});

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

@@ -0,0 +1,196 @@
+import type { Edge, Node } from '@xyflow/react';
+import { describe, expect, it } from 'vitest';
+import type { AgentNodeData } from '@/components/graph/configuration/node-types';
+import { NodeType } from '@/components/graph/configuration/node-types';
+import { serializeGraphData } from '../serialize';
+
+describe('serializeGraphData', () => {
+  describe('models object processing', () => {
+    it('should set models to undefined when models object has only empty values', () => {
+      const nodes: Node<AgentNodeData>[] = [
+        {
+          id: 'agent1',
+          type: NodeType.Agent,
+          position: { x: 0, y: 0 },
+          data: {
+            id: 'agent1',
+            name: 'Test Agent',
+            prompt: 'Test instructions',
+            models: {
+              base: undefined,
+              structuredOutput: undefined,
+              summarizer: undefined,
+            },
+          },
+        },
+      ];
+      const edges: Edge[] = [];
+
+      const result = serializeGraphData(nodes, edges);
+
+      expect((result.agents.agent1 as any).models).toBeUndefined();
+    });
+
+    it('should set models to undefined when models object has only whitespace values', () => {
+      const nodes: Node<AgentNodeData>[] = [
+        {
+          id: 'agent1',
+          type: NodeType.Agent,
+          position: { x: 0, y: 0 },
+          data: {
+            id: 'agent1',
+            name: 'Test Agent',
+            prompt: 'Test instructions',
+            models: {
+              base: undefined,
+              structuredOutput: undefined,
+              summarizer: undefined,
+            },
+          },
+        },
+      ];
+      const edges: Edge[] = [];
+
+      const result = serializeGraphData(nodes, edges);
+
+      expect((result.agents.agent1 as any).models).toBeUndefined();
+    });
+
+    it('should include models object when model field has a value', () => {
+      const nodes: Node<AgentNodeData>[] = [
+        {
+          id: 'agent1',
+          type: NodeType.Agent,
+          position: { x: 0, y: 0 },
+          data: {
+            id: 'agent1',
+            name: 'Test Agent',
+            prompt: 'Test instructions',
+            models: {
+              base: { model: 'gpt-4' },
+              structuredOutput: undefined,
+              summarizer: undefined,
+            },
+          },
+        },
+      ];
+      const edges: Edge[] = [];
+
+      const result = serializeGraphData(nodes, edges);
+
+      expect((result.agents.agent1 as any).models).toEqual({
+        base: { model: 'gpt-4' },
+        structuredOutput: undefined,
+        summarizer: undefined,
+      });
+    });
+
+    it('should include models object when structuredOutput has a value', () => {
+      const nodes: Node<AgentNodeData>[] = [
+        {
+          id: 'agent1',
+          type: NodeType.Agent,
+          position: { x: 0, y: 0 },
+          data: {
+            id: 'agent1',
+            name: 'Test Agent',
+            prompt: 'Test instructions',
+            models: {
+              base: undefined,
+              structuredOutput: { model: 'gpt-4o-2024-08-06' },
+              summarizer: undefined,
+            },
+          },
+        },
+      ];
+      const edges: Edge[] = [];
+
+      const result = serializeGraphData(nodes, edges);
+
+      expect((result.agents.agent1 as any).models).toEqual({
+        base: undefined,
+        structuredOutput: { model: 'gpt-4o-2024-08-06' },
+        summarizer: undefined,
+      });
+    });
+
+    it('should include models object when summarizer has a value', () => {
+      const nodes: Node<AgentNodeData>[] = [
+        {
+          id: 'agent1',
+          type: NodeType.Agent,
+          position: { x: 0, y: 0 },
+          data: {
+            id: 'agent1',
+            name: 'Test Agent',
+            prompt: 'Test instructions',
+            models: {
+              base: undefined,
+              structuredOutput: undefined,
+              summarizer: { model: 'gpt-3.5-turbo' },
+            },
+          },
+        },
+      ];
+      const edges: Edge[] = [];
+
+      const result = serializeGraphData(nodes, edges);
+
+      expect((result.agents.agent1 as any).models).toEqual({
+        base: undefined,
+        structuredOutput: undefined,
+        summarizer: { model: 'gpt-3.5-turbo' },
+      });
+    });
+
+    it('should include all fields when they have values', () => {
+      const nodes: Node<AgentNodeData>[] = [
+        {
+          id: 'agent1',
+          type: NodeType.Agent,
+          position: { x: 0, y: 0 },
+          data: {
+            id: 'agent1',
+            name: 'Test Agent',
+            prompt: 'Test instructions',
+            models: {
+              base: { model: 'gpt-4' },
+              structuredOutput: { model: 'gpt-4o-2024-08-06' },
+              summarizer: { model: 'gpt-3.5-turbo' },
+            },
+          },
+        },
+      ];
+      const edges: Edge[] = [];
+
+      const result = serializeGraphData(nodes, edges);
+
+      expect((result.agents.agent1 as any).models).toEqual({
+        base: { model: 'gpt-4' },
+        structuredOutput: { model: 'gpt-4o-2024-08-06' },
+        summarizer: { model: 'gpt-3.5-turbo' },
+      });
+    });
+
+    it('should set models to undefined when no models data is provided', () => {
+      const nodes: Node<AgentNodeData>[] = [
+        {
+          id: 'agent1',
+          type: NodeType.Agent,
+          position: { x: 0, y: 0 },
+          data: {
+            id: 'agent1',
+            name: 'Test Agent',
+            prompt: 'Test instructions',
+            // no models property
+          },
+        },
+      ];
+      const edges: Edge[] = [];
+
+      const result = serializeGraphData(nodes, edges);
+
+      expect((result.agents.agent1 as any).models).toBeUndefined();
+    });
+  });
+});

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

@@ -0,0 +1,266 @@
+import type { Edge, Node } from '@xyflow/react';
+import * as dagre from 'dagre';
+import { nanoid } from 'nanoid';
+import { EdgeType } from '@/components/graph/configuration/edge-types';
+import {
+  agentNodeSourceHandleId,
+  agentNodeTargetHandleId,
+  externalAgentNodeTargetHandleId,
+  mcpNodeHandleId,
+  NodeType,
+} from '@/components/graph/configuration/node-types';
+import type { FullGraphDefinition } from '@/lib/types/graph-full';
+import { formatJsonField } from '@/lib/utils';
+import type { ExtendedAgent } from './serialize';
+
+interface TransformResult {
+  nodes: Node[];
+  edges: Edge[];
+}
+
+export const NODE_WIDTH = 300;
+const NODE_HEIGHT = 150;
+
+function applyDagreLayout(nodes: Node[], edges: Edge[]): Node[] {
+  const g = new (dagre as any).graphlib.Graph();
+  g.setGraph({ rankdir: 'TB', nodesep: 150, ranksep: 120, edgesep: 80, marginx: 50, marginy: 50 });
+  g.setDefaultEdgeLabel(() => ({}));
+
+  for (const node of nodes) {
+    g.setNode(node.id, { width: NODE_WIDTH, height: NODE_HEIGHT });
+  }
+  for (const edge of edges) {
+    g.setEdge(edge.source, edge.target);
+  }
+
+  (dagre as any).layout(g);
+
+  return nodes.map((node) => {
+    const nodeWithPosition = g.node(node.id);
+    return {
+      ...node,
+      position: {
+        x: nodeWithPosition.x - NODE_WIDTH / 2,
+        y: nodeWithPosition.y - NODE_HEIGHT / 2,
+      },
+    };
+  });
+}
+
+export function deserializeGraphData(data: FullGraphDefinition): TransformResult {
+  const nodes: Node[] = [];
+  const edges: Edge[] = [];
+
+  const agentIds: string[] = Object.keys(data.agents);
+  for (const agentId of agentIds) {
+    const agent = data.agents[agentId] as ExtendedAgent;
+    const isDefault = agentId === data.defaultAgentId;
+    const isExternal = agent.type === 'external';
+
+    const nodeType = isExternal ? NodeType.ExternalAgent : NodeType.Agent;
+    const agentNodeData = isExternal
+      ? {
+          id: agent.id,
+          name: agent.name,
+          description: agent.description,
+          baseUrl: agent.baseUrl,
+          type: agent.type,
+        }
+      : {
+          id: agent.id,
+          name: agent.name,
+          isDefault,
+          prompt: agent.prompt,
+          description: agent.description,
+          dataComponents: agent.dataComponents,
+          artifactComponents: agent.artifactComponents,
+          models: agent.models
+            ? {
+                base: agent.models.base
+                  ? {
+                      model: agent.models.base.model ?? '',
+                      providerOptions: agent.models.base.providerOptions
+                        ? formatJsonField(agent.models.base.providerOptions)
+                        : undefined,
+                    }
+                  : undefined,
+                structuredOutput: agent.models.structuredOutput
+                  ? {
+                      model: agent.models.structuredOutput.model ?? '',
+                      providerOptions: agent.models.structuredOutput.providerOptions
+                        ? formatJsonField(agent.models.structuredOutput.providerOptions)
+                        : undefined,
+                    }
+                  : undefined,
+                summarizer: agent.models.summarizer
+                  ? {
+                      model: agent.models.summarizer.model ?? '',
+                      providerOptions: agent.models.summarizer.providerOptions
+                        ? formatJsonField(agent.models.summarizer.providerOptions)
+                        : undefined,
+                    }
+                  : undefined,
+              }
+            : undefined,
+          stopWhen: (agent as any).stopWhen
+            ? { stepCountIs: (agent as any).stopWhen.stepCountIs }
+            : undefined,
+          type: agent.type,
+        };
+
+    const agentNode: Node = {
+      id: agentId,
+      type: nodeType,
+      position: { x: 0, y: 0 },
+      data: agentNodeData,
+      deletable: !isDefault,
+    };
+    nodes.push(agentNode);
+  }
+
+  for (const agentId of agentIds) {
+    const agent = data.agents[agentId];
+    // Check if agent has tools property (internal agents)
+    if ('tools' in agent && agent.tools && agent.tools.length > 0) {
+      for (const toolId of agent.tools) {
+        const tool = data.tools[toolId];
+        if (!tool) {
+          // eslint-disable-next-line no-console
+          console.warn(`Tool with ID ${toolId} not found in tools object`);
+          continue;
+        }
+        const toolNodeId = nanoid();
+        const toolNode: Node = {
+          id: toolNodeId,
+          type: NodeType.MCP,
+          position: { x: 0, y: 0 },
+          data: { id: tool.id, ...tool },
+        };
+        nodes.push(toolNode);
+
+        const agentToToolEdge: Edge = {
+          id: `edge-${toolNodeId}-${agentId}`,
+          type: EdgeType.Default,
+          source: agentId,
+          sourceHandle: agentNodeSourceHandleId,
+          target: toolNodeId,
+          targetHandle: mcpNodeHandleId,
+        };
+        edges.push(agentToToolEdge);
+      }
+    }
+  }
+
+  const processedPairs = new Set<string>();
+  for (const sourceAgentId of agentIds) {
+    const sourceAgent = data.agents[sourceAgentId];
+
+    // Check if agent has relationship properties (internal agents only)
+    if ('canTransferTo' in sourceAgent && sourceAgent.canTransferTo) {
+      for (const targetAgentId of sourceAgent.canTransferTo) {
+        if (data.agents[targetAgentId]) {
+          const pairKey = [sourceAgentId, targetAgentId].sort().join('-');
+          if (!processedPairs.has(pairKey)) {
+            processedPairs.add(pairKey);
+            const targetAgent = data.agents[targetAgentId];
+
+            const sourceCanTransferToTarget =
+              ('canTransferTo' in sourceAgent &&
+                sourceAgent.canTransferTo?.includes(targetAgentId)) ||
+              false;
+            const targetCanTransferToSource =
+              ('canTransferTo' in targetAgent &&
+                targetAgent.canTransferTo?.includes(sourceAgentId)) ||
+              false;
+            const sourceCanDelegateToTarget =
+              ('canDelegateTo' in sourceAgent &&
+                sourceAgent.canDelegateTo?.includes(targetAgentId)) ||
+              false;
+            const targetCanDelegateToSource =
+              ('canDelegateTo' in targetAgent &&
+                targetAgent.canDelegateTo?.includes(sourceAgentId)) ||
+              false;
+
+            const isTargetExternal = targetAgent.type === 'external';
+
+            const edge = {
+              id: `edge-${targetAgentId}-${sourceAgentId}`,
+              type: isTargetExternal ? EdgeType.A2AExternal : EdgeType.A2A,
+              source: sourceAgentId,
+              sourceHandle: agentNodeSourceHandleId,
+              target: targetAgentId,
+              targetHandle: isTargetExternal
+                ? externalAgentNodeTargetHandleId
+                : agentNodeTargetHandleId,
+              selected: false,
+              data: {
+                relationships: {
+                  transferTargetToSource: targetCanTransferToSource,
+                  transferSourceToTarget: sourceCanTransferToTarget,
+                  delegateTargetToSource: targetCanDelegateToSource,
+                  delegateSourceToTarget: sourceCanDelegateToTarget,
+                },
+              },
+            } as Edge;
+            edges.push(edge);
+          }
+        }
+      }
+    }
+
+    if ('canDelegateTo' in sourceAgent && sourceAgent.canDelegateTo) {
+      for (const targetAgentId of sourceAgent.canDelegateTo) {
+        if (data.agents[targetAgentId]) {
+          const pairKey = [sourceAgentId, targetAgentId].sort().join('-');
+          if (!processedPairs.has(pairKey)) {
+            processedPairs.add(pairKey);
+            const targetAgent = data.agents[targetAgentId];
+
+            const sourceCanTransferToTarget =
+              ('canTransferTo' in sourceAgent &&
+                sourceAgent.canTransferTo?.includes(targetAgentId)) ||
+              false;
+            const targetCanTransferToSource =
+              ('canTransferTo' in targetAgent &&
+                targetAgent.canTransferTo?.includes(sourceAgentId)) ||
+              false;
+            const sourceCanDelegateToTarget =
+              ('canDelegateTo' in sourceAgent &&
+                sourceAgent.canDelegateTo?.includes(targetAgentId)) ||
+              false;
+            const targetCanDelegateToSource =
+              ('canDelegateTo' in targetAgent &&
+                targetAgent.canDelegateTo?.includes(sourceAgentId)) ||
+              false;
+
+            const isTargetExternal = targetAgent.type === 'external';
+
+            const edge = {
+              id: `edge-${targetAgentId}-${sourceAgentId}`,
+              type: isTargetExternal ? EdgeType.A2AExternal : EdgeType.A2A,
+              source: sourceAgentId,
+              sourceHandle: agentNodeSourceHandleId,
+              target: targetAgentId,
+              targetHandle: isTargetExternal
+                ? externalAgentNodeTargetHandleId
+                : agentNodeTargetHandleId,
+              selected: false,
+              data: {
+                relationships: {
+                  transferTargetToSource: targetCanTransferToSource,
+                  transferSourceToTarget: sourceCanTransferToTarget,
+                  delegateTargetToSource: targetCanDelegateToSource,
+                  delegateSourceToTarget: sourceCanDelegateToTarget,
+                },
+              },
+            } as Edge;
+            edges.push(edge);
+          }
+        }
+      }
+    }
+  }
+
+  const positionedNodes = applyDagreLayout(nodes, edges);
+  return { nodes: positionedNodes, edges };
+}

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

@@ -0,0 +1,2 @@
+export * from './deserialize';
+export * from './serialize';