@inkeep/agents-manage-ui 0.18.0 → 0.19.0

package/src/features/{graph → agent}/commands/commands.ts

@@ -1,8 +1,8 @@
 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 { graphStore } from '@/features/graph/state/use-graph-store';
+import { EdgeType } from '@/components/agent/configuration/edge-types';
+import type { AgentMetadata } from '@/components/agent/configuration/agent-types';
+import { agentStore } from '@/features/agent/state/use-agent-store';
 import { eventBus } from '@/lib/events';
 import type { Command } from './command-manager';
 
@@ -13,11 +13,11 @@ export class AddNodeCommand implements Command {
     this.node = node;
   }
   execute() {
-    const { actions } = graphStore.getState();
+    const { actions } = agentStore.getState();
     actions.setNodes((prev) => prev.concat(this.node));
   }
   undo() {
-    const { actions } = graphStore.getState();
+    const { actions } = agentStore.getState();
     actions.setNodes((prev) => prev.filter((n) => n.id !== this.node.id));
   }
 }
@@ -25,12 +25,12 @@ export class AddNodeCommand implements Command {
 export class DeleteSelectionCommand implements Command {
   readonly name = 'DeleteSelection';
   execute() {
-    const { actions } = graphStore.getState();
+    const { actions } = agentStore.getState();
     actions.deleteSelected();
   }
   undo() {
     // relies on store history; in a richer system we'd capture diffs
-    const { actions } = graphStore.getState();
+    const { actions } = agentStore.getState();
     actions.undo();
   }
 }
@@ -43,7 +43,7 @@ export class ConnectEdgeCommand implements Command {
     this.connection = connection;
   }
   execute() {
-    const { actions } = graphStore.getState();
+    const { actions } = agentStore.getState();
     actions.setEdges((eds) => {
       const newEdges = addEdge(this.connection as any, eds);
       const last = newEdges[newEdges.length - 1];
@@ -53,7 +53,7 @@ export class ConnectEdgeCommand implements Command {
   }
   undo() {
     if (!this.createdEdgeId) return;
-    const { actions } = graphStore.getState();
+    const { actions } = agentStore.getState();
     const id = this.createdEdgeId;
     actions.setEdges((eds) => eds.filter((e) => e.id !== id));
   }
@@ -61,20 +61,20 @@ export class ConnectEdgeCommand implements Command {
 
 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]) {
+  private field: keyof AgentMetadata;
+  private value: AgentMetadata[keyof AgentMetadata];
+  private prev: AgentMetadata[keyof AgentMetadata] | undefined;
+  constructor(field: keyof AgentMetadata, value: AgentMetadata[keyof AgentMetadata]) {
     this.field = field;
     this.value = value;
   }
   execute() {
-    const { metadata, actions } = graphStore.getState();
+    const { metadata, actions } = agentStore.getState();
     this.prev = metadata[this.field];
     actions.setMetadata(this.field, this.value);
   }
   undo() {
-    const { actions } = graphStore.getState();
+    const { actions } = agentStore.getState();
     actions.setMetadata(this.field, this.prev as any);
   }
 }
@@ -82,7 +82,7 @@ export class UpdateMetadataCommand implements Command {
 export class ClearSelectionCommand implements Command {
   readonly name = 'ClearSelection';
   execute() {
-    const { actions } = graphStore.getState();
+    const { actions } = agentStore.getState();
     actions.clearSelection();
   }
   undo() {
@@ -99,7 +99,7 @@ export class AddPreparedEdgeCommand implements Command {
     this.deselectOtherEdgesIfA2A = Boolean(options?.deselectOtherEdgesIfA2A);
   }
   execute() {
-    const { actions } = graphStore.getState();
+    const { actions } = agentStore.getState();
     if (this.edge.type === EdgeType.A2A) {
       // deselect nodes when creating an A2A edge
       actions.setNodes((nds) => nds.map((n) => ({ ...n, selected: false })));
@@ -116,7 +116,7 @@ export class AddPreparedEdgeCommand implements Command {
     });
   }
   undo() {
-    const { actions } = graphStore.getState();
+    const { actions } = agentStore.getState();
     const id = this.edge.id;
     actions.setEdges((eds) => eds.filter((e) => e.id !== id));
   }

package/src/features/{graph → agent}/domain/__tests__/roundtrip.test.ts

@@ -1,15 +1,15 @@
 import type { Edge, Node } from '@xyflow/react';
-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';
+import { EdgeType } from '@/components/agent/configuration/edge-types';
+import { NodeType } from '@/components/agent/configuration/node-types';
+import { deserializeAgentData } from '@/features/agent/domain/deserialize';
+import { serializeAgentData } from '@/features/agent/domain/serialize';
 
-describe('graph serialize/deserialize', () => {
+describe('agent serialize/deserialize', () => {
   it('handles self-referencing agents correctly', () => {
     const nodes: Node[] = [
       {
         id: 'goodbye-agent',
-        type: NodeType.Agent,
+        type: NodeType.SubAgent,
         position: { x: 0, y: 0 },
         data: {
           id: 'goodbye-agent',
@@ -19,7 +19,7 @@ describe('graph serialize/deserialize', () => {
       },
       {
         id: 'hello-agent',
-        type: NodeType.Agent,
+        type: NodeType.SubAgent,
         position: { x: 0, y: 100 },
         data: {
           id: 'hello-agent',
@@ -47,10 +47,10 @@ describe('graph serialize/deserialize', () => {
       } as Edge,
     ];
 
-    const serialized = serializeGraphData(nodes, edges, {
-      id: 'test-graph',
-      name: 'Test Graph',
-      description: 'Graph with self-referencing agent',
+    const serialized = serializeAgentData(nodes, edges, {
+      id: 'test-agent',
+      name: 'Test Agent',
+      description: 'Agent with self-referencing agent',
       contextConfig: {
         id: '',
         contextVariables: '',
@@ -67,7 +67,7 @@ describe('graph serialize/deserialize', () => {
       expect(goodbyeAgent.canDelegateTo).toContain('goodbye-agent');
     }
 
-    const deserialized = deserializeGraphData(serialized);
+    const deserialized = deserializeAgentData(serialized);
 
     // Should have the self-loop edge
     const selfLoopEdge = deserialized.edges.find(
@@ -90,14 +90,14 @@ describe('graph serialize/deserialize', () => {
     const nodes: Node[] = [
       {
         id: 'a1',
-        type: NodeType.Agent,
+        type: NodeType.SubAgent,
         position: { x: 0, y: 0 },
         data: { id: 'a1', name: 'A1', isDefault: true, prompt: 'i' },
         deletable: false,
       },
       {
         id: 'a2',
-        type: NodeType.Agent,
+        type: NodeType.SubAgent,
         position: { x: 0, y: 0 },
         data: { id: 'a2', name: 'A2', prompt: 'i' },
       },
@@ -131,7 +131,7 @@ describe('graph serialize/deserialize', () => {
       } as Edge,
     ];
 
-    const serialized = serializeGraphData(nodes, edges, {
+    const serialized = serializeAgentData(nodes, edges, {
       id: 'g1',
       name: 'G',
       description: 'D',
@@ -142,7 +142,7 @@ describe('graph serialize/deserialize', () => {
     });
     expect(serialized.id).toBe('g1');
     expect(serialized.subAgents.a1).toBeDefined();
-    // Note: Tools are now project-scoped and not included in graph serialization
+    // Note: Tools are now project-scoped and not included in agent serialization
     // expect(serialized.tools.t1).toBeDefined();
     const a1 = serialized.subAgents.a1;
     if ('tools' in a1) {
@@ -152,7 +152,7 @@ describe('graph serialize/deserialize', () => {
       expect(a1.canTransferTo).toContain('a2');
     }
 
-    const deserialized = deserializeGraphData(serialized);
+    const deserialized = deserializeAgentData(serialized);
     expect(deserialized.nodes.length).toBeGreaterThan(0);
     expect(deserialized.edges.length).toBeGreaterThan(0);
   });

package/src/features/{graph → agent}/domain/__tests__/serialize.test.ts

@@ -1,16 +1,16 @@
 import type { Edge, Node } from '@xyflow/react';
-import { EdgeType } from '@/components/graph/configuration/edge-types';
-import type { AgentNodeData, MCPNodeData } from '@/components/graph/configuration/node-types';
-import { NodeType } from '@/components/graph/configuration/node-types';
-import { serializeGraphData } from '../serialize';
+import { EdgeType } from '@/components/agent/configuration/edge-types';
+import type { AgentNodeData, MCPNodeData } from '@/components/agent/configuration/node-types';
+import { NodeType } from '@/components/agent/configuration/node-types';
+import { serializeAgentData } from '../serialize';
 
-describe('serializeGraphData', () => {
+describe('serializeAgentData', () => {
   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,
+          type: NodeType.SubAgent,
           position: { x: 0, y: 0 },
           data: {
             id: 'agent1',
@@ -26,7 +26,7 @@ describe('serializeGraphData', () => {
       ];
       const edges: Edge[] = [];
 
-      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
+      const result = serializeAgentData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.subAgents.agent1 as any).models).toBeUndefined();
     });
@@ -35,7 +35,7 @@ describe('serializeGraphData', () => {
       const nodes: Node<AgentNodeData>[] = [
         {
           id: 'agent1',
-          type: NodeType.Agent,
+          type: NodeType.SubAgent,
           position: { x: 0, y: 0 },
           data: {
             id: 'agent1',
@@ -51,7 +51,7 @@ describe('serializeGraphData', () => {
       ];
       const edges: Edge[] = [];
 
-      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
+      const result = serializeAgentData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.subAgents.agent1 as any).models).toBeUndefined();
     });
@@ -60,7 +60,7 @@ describe('serializeGraphData', () => {
       const nodes: Node<AgentNodeData>[] = [
         {
           id: 'agent1',
-          type: NodeType.Agent,
+          type: NodeType.SubAgent,
           position: { x: 0, y: 0 },
           data: {
             id: 'agent1',
@@ -76,7 +76,7 @@ describe('serializeGraphData', () => {
       ];
       const edges: Edge[] = [];
 
-      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
+      const result = serializeAgentData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.subAgents.agent1 as any).models).toEqual({
         base: { model: 'gpt-4' },
@@ -89,7 +89,7 @@ describe('serializeGraphData', () => {
       const nodes: Node<AgentNodeData>[] = [
         {
           id: 'agent1',
-          type: NodeType.Agent,
+          type: NodeType.SubAgent,
           position: { x: 0, y: 0 },
           data: {
             id: 'agent1',
@@ -105,7 +105,7 @@ describe('serializeGraphData', () => {
       ];
       const edges: Edge[] = [];
 
-      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
+      const result = serializeAgentData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.subAgents.agent1 as any).models).toEqual({
         base: undefined,
@@ -118,7 +118,7 @@ describe('serializeGraphData', () => {
       const nodes: Node<AgentNodeData>[] = [
         {
           id: 'agent1',
-          type: NodeType.Agent,
+          type: NodeType.SubAgent,
           position: { x: 0, y: 0 },
           data: {
             id: 'agent1',
@@ -134,7 +134,7 @@ describe('serializeGraphData', () => {
       ];
       const edges: Edge[] = [];
 
-      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
+      const result = serializeAgentData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.subAgents.agent1 as any).models).toEqual({
         base: undefined,
@@ -147,7 +147,7 @@ describe('serializeGraphData', () => {
       const nodes: Node<AgentNodeData>[] = [
         {
           id: 'agent1',
-          type: NodeType.Agent,
+          type: NodeType.SubAgent,
           position: { x: 0, y: 0 },
           data: {
             id: 'agent1',
@@ -163,7 +163,7 @@ describe('serializeGraphData', () => {
       ];
       const edges: Edge[] = [];
 
-      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
+      const result = serializeAgentData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.subAgents.agent1 as any).models).toEqual({
         base: { model: 'gpt-4' },
@@ -176,7 +176,7 @@ describe('serializeGraphData', () => {
       const nodes: Node<AgentNodeData>[] = [
         {
           id: 'agent1',
-          type: NodeType.Agent,
+          type: NodeType.SubAgent,
           position: { x: 0, y: 0 },
           data: {
             id: 'agent1',
@@ -188,7 +188,7 @@ describe('serializeGraphData', () => {
       ];
       const edges: Edge[] = [];
 
-      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
+      const result = serializeAgentData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.subAgents.agent1 as any).models).toBeUndefined();
     });
@@ -199,7 +199,7 @@ describe('serializeGraphData', () => {
       const nodes: Node[] = [
         {
           id: 'agent1',
-          type: NodeType.Agent,
+          type: NodeType.SubAgent,
           position: { x: 0, y: 0 },
           data: {
             id: 'agent1',
@@ -228,7 +228,7 @@ describe('serializeGraphData', () => {
         },
       ];
 
-      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
+      const result = serializeAgentData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.subAgents.agent1 as any).canUse).toBeDefined();
       expect((result.subAgents.agent1 as any).canUse).toHaveLength(1);
@@ -243,7 +243,7 @@ describe('serializeGraphData', () => {
       const nodes: Node[] = [
         {
           id: 'agent1',
-          type: NodeType.Agent,
+          type: NodeType.SubAgent,
           position: { x: 0, y: 0 },
           data: {
             id: 'agent1',
@@ -273,7 +273,7 @@ describe('serializeGraphData', () => {
         },
       ];
 
-      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
+      const result = serializeAgentData(nodes, edges, undefined, {}, {}, {});
 
       // When tempSelectedTools is null, all tools should be selected (toolSelection: null)
       expect((result.subAgents.agent1 as any).canUse).toBeDefined();
@@ -289,7 +289,7 @@ describe('serializeGraphData', () => {
       const nodes: Node[] = [
         {
           id: 'agent1',
-          type: NodeType.Agent,
+          type: NodeType.SubAgent,
           position: { x: 0, y: 0 },
           data: {
             id: 'agent1',
@@ -318,7 +318,7 @@ describe('serializeGraphData', () => {
         },
       ];
 
-      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
+      const result = serializeAgentData(nodes, edges, undefined, {}, {}, {});
 
       expect((result.subAgents.agent1 as any).canUse).toBeDefined();
       expect((result.subAgents.agent1 as any).canUse).toHaveLength(1);
@@ -333,7 +333,7 @@ describe('serializeGraphData', () => {
       const nodes: Node[] = [
         {
           id: 'agent1',
-          type: NodeType.Agent,
+          type: NodeType.SubAgent,
           position: { x: 0, y: 0 },
           data: {
             id: 'agent1',
@@ -362,7 +362,7 @@ describe('serializeGraphData', () => {
         },
       ];
 
-      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
+      const result = serializeAgentData(nodes, edges, undefined, {}, {}, {});
 
       // selectedTools should not be created if tempSelectedTools is undefined
       expect((result.subAgents.agent1 as any).selectedTools).toBeUndefined();
@@ -372,7 +372,7 @@ describe('serializeGraphData', () => {
       const nodes: Node[] = [
         {
           id: 'agent1',
-          type: NodeType.Agent,
+          type: NodeType.SubAgent,
           position: { x: 0, y: 0 },
           data: {
             id: 'agent1',
@@ -403,7 +403,7 @@ describe('serializeGraphData', () => {
         },
       ];
 
-      const result = serializeGraphData(nodes, edges, undefined, {}, {}, {});
+      const result = serializeAgentData(nodes, edges, undefined, {}, {}, {});
 
       // When tempSelectedTools is undefined and there's an edge to MCP tool,
       // the toolSelection will be null (all tools selected by default)

package/src/features/agent/domain/agent-initializer-helpers.ts

@@ -0,0 +1,61 @@
+import type { ContextConfig, AgentMetadata } from '@/components/agent/configuration/agent-types';
+import type { FullAgentDefinition } from '@/lib/types/agent-full';
+import { formatJsonField } from '@/lib/utils';
+
+export type ExtendedFullAgentDefinition = FullAgentDefinition & {
+  contextConfig?: Partial<Pick<ContextConfig, 'id'>> & {
+    contextVariables?: Record<string, any>;
+    headersSchema?: Record<string, any>;
+  };
+};
+
+/**
+ * Extracts and formats agent metadata from a FullAgentDefinition object.
+ * This helper function handles the complex transformation of the agent data
+ * into the format expected by the AgentMetadata type, including proper
+ * JSON field formatting for form compatibility.
+ */
+export function extractAgentMetadata(
+  agent: ExtendedFullAgentDefinition | null | undefined
+): AgentMetadata {
+  return {
+    id: agent?.id,
+    name: agent?.name ?? '',
+    description: agent?.description ?? '',
+    agentPrompt: agent?.agentPrompt,
+    models: agent?.models
+      ? {
+          base: agent.models.base
+            ? {
+                model: agent.models.base.model,
+                providerOptions: formatJsonField(agent.models.base.providerOptions),
+              }
+            : undefined,
+          structuredOutput: agent.models.structuredOutput
+            ? {
+                model: agent.models.structuredOutput.model,
+                providerOptions: formatJsonField(agent.models.structuredOutput.providerOptions),
+              }
+            : undefined,
+          summarizer: agent.models.summarizer
+            ? {
+                model: agent.models.summarizer.model,
+                providerOptions: formatJsonField(agent.models.summarizer.providerOptions),
+              }
+            : undefined,
+        }
+      : undefined,
+    stopWhen: agent?.stopWhen,
+    statusUpdates: agent?.statusUpdates
+      ? {
+          ...agent.statusUpdates,
+          statusComponents: formatJsonField(agent.statusUpdates.statusComponents) || '',
+        }
+      : undefined,
+    contextConfig: {
+      id: agent?.contextConfig?.id ?? '',
+      contextVariables: formatJsonField(agent?.contextConfig?.contextVariables) || '',
+      headersSchema: formatJsonField(agent?.contextConfig?.headersSchema) || '',
+    },
+  };
+}

package/src/features/{graph → agent}/domain/deserialize.ts

@@ -1,7 +1,7 @@
 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 { EdgeType } from '@/components/agent/configuration/edge-types';
 import {
   agentNodeSourceHandleId,
   agentNodeTargetHandleId,
@@ -9,12 +9,12 @@ import {
   functionToolNodeHandleId,
   mcpNodeHandleId,
   NodeType,
-} from '@/components/graph/configuration/node-types';
+} from '@/components/agent/configuration/node-types';
 import type {
   ExternalAgentDefinition,
-  FullGraphDefinition,
+  FullAgentDefinition,
   InternalAgentDefinition,
-} from '@/lib/types/graph-full';
+} from '@/lib/types/agent-full';
 import { formatJsonField } from '@/lib/utils';
 
 interface TransformResult {
@@ -31,7 +31,7 @@ function calculateNodeHeight(node: Node): number {
   let height = MIN_NODE_HEIGHT;
 
   // Agent and External Agent nodes have dynamic height
-  if (node.type === NodeType.Agent || node.type === NodeType.ExternalAgent) {
+  if (node.type === NodeType.SubAgent || node.type === NodeType.ExternalAgent) {
     const data = node.data as any;
 
     // Add height for description if it exists
@@ -101,7 +101,7 @@ export function applyDagreLayout(nodes: Node[], edges: Edge[]): Node[] {
   });
 }
 
-export function deserializeGraphData(data: FullGraphDefinition): TransformResult {
+export function deserializeAgentData(data: FullAgentDefinition): TransformResult {
   const nodes: Node[] = [];
   const edges: Edge[] = [];
 
@@ -111,7 +111,7 @@ export function deserializeGraphData(data: FullGraphDefinition): TransformResult
     const isDefault = subAgentId === data.defaultSubAgentId;
     const isExternal = agent.type === 'external';
 
-    const nodeType = isExternal ? NodeType.ExternalAgent : NodeType.Agent;
+    const nodeType = isExternal ? NodeType.ExternalAgent : NodeType.SubAgent;
     const agentNodeData = isExternal
       ? {
           id: agent.id,

package/src/features/{graph → agent}/domain/index.ts

@@ -1,3 +1,3 @@
 export * from './deserialize';
-export * from './graph-initializer-helpers';
+export * from './agent-initializer-helpers';
 export * from './serialize';