@inkeep/agents-manage-ui 0.1.0

package/src/components/graph/graph.tsx

@@ -0,0 +1,540 @@
+'use client';
+
+import {
+  Background,
+  type Connection,
+  ConnectionMode,
+  Controls,
+  type Edge,
+  type IsValidConnection,
+  type Node,
+  Panel,
+  ReactFlow,
+  ReactFlowProvider,
+  useOnSelectionChange,
+  useReactFlow,
+} from '@xyflow/react';
+import { nanoid } from 'nanoid';
+import { useParams, useRouter } from 'next/navigation';
+import { useCallback, useState, useEffect, useMemo } from 'react';
+import { toast } from 'sonner';
+import { commandManager } from '@/features/graph/commands/command-manager';
+import { AddNodeCommand, AddPreparedEdgeCommand } from '@/features/graph/commands/commands';
+import { deserializeGraphData, serializeGraphData } from '@/features/graph/domain';
+import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { useGraphShortcuts } from '@/features/graph/ui/use-graph-shortcuts';
+import { useGraphErrors } from '@/hooks/use-graph-errors';
+import { useSidePane } from '@/hooks/use-side-pane';
+import type { ArtifactComponent } from '@/lib/api/artifact-components';
+import type { DataComponent } from '@/lib/api/data-components';
+import { saveGraph } from '@/lib/services/save-graph';
+import type { FullGraphDefinition } from '@/lib/types/graph-full';
+import { formatJsonField } from '@/lib/utils';
+import { getErrorSummaryMessage, parseGraphValidationErrors } from '@/lib/utils/graph-error-parser';
+import { Playground } from './playground/playground';
+import { EdgeType, edgeTypes, initialEdges } from './configuration/edge-types';
+import type { ContextConfig } from './configuration/graph-types';
+import {
+  agentNodeSourceHandleId,
+  agentNodeTargetHandleId,
+  externalAgentNodeTargetHandleId,
+  mcpNodeHandleId,
+  NodeType,
+  newNodeDefaults,
+  nodeTypes,
+} from './configuration/node-types';
+import { GraphErrorSummary } from './error-display/graph-error-summary';
+import { DefaultMarker } from './markers/default-marker';
+import { SelectedMarker } from './markers/selected-marker';
+import NodeLibrary from './node-library/node-library';
+import { SidePane } from './sidepane/sidepane';
+import { Toolbar } from './toolbar/toolbar';
+
+
+function getEdgeId(a: string, b: string) {
+  const [low, high] = [a, b].sort();
+  return `edge-${low}-${high}`;
+}
+
+interface GraphProps {
+  graph?: FullGraphDefinition & {
+    contextConfig?: Partial<Pick<ContextConfig, 'id' | 'name' | 'description'>> & {
+      contextVariables?: Record<string, any>;
+      requestContextSchema?: Record<string, any>;
+    };
+  };
+  dataComponentLookup?: Record<string, DataComponent>;
+  artifactComponentLookup?: Record<string, ArtifactComponent>;
+}
+
+function Flow({ graph, dataComponentLookup = {}, artifactComponentLookup = {} }: GraphProps) {
+  const [showPlayground, setShowPlayground] = useState(false);
+  const router = useRouter();
+  const initialNodes = useMemo<Node[]>(
+    () => [
+      {
+        id: nanoid(),
+        type: NodeType.Agent,
+        position: { x: 0, y: 0 },
+        data: { name: 'Agent', isDefault: true },
+        deletable: false,
+      },
+    ],
+    []
+  );
+
+  const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
+  const { nodes: graphNodes, edges: graphEdges } = graph
+    ? deserializeGraphData(graph)
+    : { nodes: initialNodes, edges: initialEdges };
+
+  const { screenToFlowPosition } = useReactFlow();
+  const {
+    nodes,
+    edges,
+    setNodes,
+    setEdges,
+    onNodesChange,
+    onEdgesChange,
+    metadata,
+    setMetadata,
+    setInitial,
+    markSaved,
+    clearSelection,
+    markUnsaved,
+  } = useGraphStore();
+  const { nodeId, edgeId, setQueryState, openGraphPane, isOpen } = useSidePane();
+  const { errors, showErrors, setErrors, clearErrors, setShowErrors } = useGraphErrors();
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we only want to run this effect on first render
+  useEffect(() => {
+    setInitial(
+      graphNodes,
+      graphEdges,
+      {
+        id: graph?.id,
+        name: graph?.name ?? '',
+        description: graph?.description ?? '',
+        graphPrompt: graph?.graphPrompt,
+        models: graph?.models,
+        stopWhen: graph?.stopWhen,
+        statusUpdates: graph?.statusUpdates,
+        contextConfig: {
+          id: graph?.contextConfig?.id ?? '',
+          name: graph?.contextConfig?.name ?? '',
+          description: graph?.contextConfig?.description ?? '',
+          contextVariables: formatJsonField(graph?.contextConfig?.contextVariables) || '',
+          requestContextSchema: formatJsonField(graph?.contextConfig?.requestContextSchema) || '',
+        },
+      },
+      dataComponentLookup,
+      artifactComponentLookup
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we only want to run this effect on first render
+  useEffect(() => {
+    if (!graph) {
+      openGraphPane();
+      return;
+    }
+
+    if (!nodeId && !edgeId) {
+      openGraphPane();
+    }
+
+    if (nodeId) {
+      setNodes((nodes) =>
+        nodes.map((node) => ({
+          ...node,
+          selected: node.id === nodeId,
+        }))
+      );
+    }
+
+    if (edgeId) {
+      setEdges((edges) =>
+        edges.map((edge) => ({
+          ...edge,
+          selected: edge.id === edgeId,
+        }))
+      );
+    }
+
+    // If the nodeId or edgeId in URL doesn't exist in the graph, clear it
+    if (nodeId && !graphNodes.some((node) => node.id === nodeId)) {
+      setQueryState((prev) => ({
+        ...prev,
+        nodeId: null,
+        pane: 'graph',
+      }));
+    }
+    if (edgeId && !graphEdges.some((edge) => edge.id === edgeId)) {
+      setQueryState((prev) => ({
+        ...prev,
+        edgeId: null,
+        pane: 'graph',
+      }));
+    }
+  }, []);
+
+  const generateUniqueName = useCallback(
+    (type: string) => {
+      if (type !== NodeType.Agent && type !== NodeType.ExternalAgent)
+        return newNodeDefaults[type as keyof typeof newNodeDefaults].name;
+
+      const agentNodes = nodes.filter(
+        (node) => node.type === NodeType.Agent || node.type === NodeType.ExternalAgent
+      );
+      const existingNames = new Set(agentNodes.map((node) => node.data.name));
+      let counter = 1;
+
+      while (existingNames.has(`Agent ${counter}`)) {
+        counter++;
+      }
+
+      return `Agent ${counter}`;
+    },
+    [nodes]
+  );
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we only want to add/connect edges once
+  const onConnectWrapped = useCallback((params: Connection) => {
+    markUnsaved();
+    const id = getEdgeId(params.source, params.target);
+    let newEdge: Edge = { id, ...params };
+    const { sourceHandle, targetHandle } = params;
+    if (
+      (sourceHandle === agentNodeSourceHandleId || sourceHandle === agentNodeTargetHandleId) &&
+      (targetHandle === agentNodeTargetHandleId || targetHandle === agentNodeSourceHandleId)
+    ) {
+      newEdge = {
+        ...newEdge,
+        type: EdgeType.A2A,
+        selected: true,
+        data: {
+          relationships: {
+            transferTargetToSource: false,
+            transferSourceToTarget: true,
+            delegateTargetToSource: false,
+            delegateSourceToTarget: false,
+          },
+        },
+      };
+    } else if (
+      (sourceHandle === agentNodeSourceHandleId || sourceHandle === agentNodeTargetHandleId) &&
+      targetHandle === externalAgentNodeTargetHandleId
+    ) {
+      newEdge = {
+        ...newEdge,
+        type: EdgeType.A2AExternal,
+        data: {
+          relationships: {
+            transferTargetToSource: false,
+            transferSourceToTarget: false,
+            delegateTargetToSource: false,
+            delegateSourceToTarget: true, // this is the only valid option for external agents to connect to internal agents
+          },
+        },
+      };
+    }
+
+    requestAnimationFrame(() => {
+      commandManager.execute(
+        new AddPreparedEdgeCommand(newEdge, { deselectOtherEdgesIfA2A: true })
+      );
+    });
+  }, []);
+
+  const isValidConnection: IsValidConnection = useCallback(({ sourceHandle, targetHandle }) => {
+    // we don't want to allow connections between MCP nodes
+    if (sourceHandle === mcpNodeHandleId && targetHandle === mcpNodeHandleId) {
+      return false;
+    }
+    return true;
+  }, []);
+
+  const onDragOver = useCallback((event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const onDrop = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      const node = event.dataTransfer.getData('application/reactflow');
+      if (!node) {
+        return;
+      }
+      const nodeData = JSON.parse(node);
+      const position = screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+      const nodeId = nanoid();
+      const newNode = {
+        id: nodeId,
+        type: nodeData.type,
+        position,
+        selected: true,
+        data: {
+          ...newNodeDefaults[nodeData.type as keyof typeof newNodeDefaults],
+          name: generateUniqueName(nodeData.type),
+        },
+      };
+
+      clearSelection();
+      commandManager.execute(new AddNodeCommand(newNode as Node));
+    },
+    [screenToFlowPosition, generateUniqueName, clearSelection]
+  );
+
+  const onSelectionChange = useCallback(
+    ({ nodes, edges }: { nodes: Node[]; edges: Edge[] }) => {
+      const node = nodes.length === 1 ? nodes[0] : null;
+      const edge = edges.length === 1 && edges[0]?.type === EdgeType.A2A ? edges[0] : null;
+      const defaultPane = isOpen ? 'graph' : null;
+
+      setQueryState(
+        {
+          pane: node ? 'node' : edge ? 'edge' : defaultPane,
+          nodeId: node ? node.id : null,
+          edgeId: edge ? edge.id : null,
+        },
+        { history: 'replace' }
+      );
+    },
+    [setQueryState, isOpen]
+  );
+
+  useOnSelectionChange({
+    onChange: onSelectionChange,
+  });
+
+  useGraphShortcuts();
+
+  const closeSidePane = useCallback(() => {
+    setEdges((edges) => edges.map((edge) => ({ ...edge, selected: false })));
+    setNodes((nodes) => nodes.map((node) => ({ ...node, selected: false })));
+    setQueryState({
+      pane: null,
+      nodeId: null,
+      edgeId: null,
+    });
+  }, [setQueryState, setEdges, setNodes]);
+
+  const backToGraph = useCallback(() => {
+    setEdges((edges) => edges.map((edge) => ({ ...edge, selected: false })));
+    setNodes((nodes) => nodes.map((node) => ({ ...node, selected: false })));
+    setQueryState({
+      pane: 'graph',
+      nodeId: null,
+      edgeId: null,
+    });
+  }, [setQueryState, setEdges, setNodes]);
+
+  const handleNavigateToNode = useCallback(
+    (nodeId: string) => {
+      // The nodeId parameter is actually the agent ID from error parsing
+      // We need to find the React Flow node that has this agent ID
+      const targetNode = nodes.find(
+        (node) =>
+          node.id === nodeId || // Direct match (no custom ID set)
+          (node.data as any)?.id === nodeId // Custom agent ID match
+      );
+
+      if (targetNode) {
+        // Clear selection and select the target node
+        setNodes((nodes) =>
+          nodes.map((node) => ({
+            ...node,
+            selected: node.id === targetNode.id,
+          }))
+        );
+        setEdges((edges) => edges.map((edge) => ({ ...edge, selected: false })));
+
+        // Open the sidepane for the selected node
+        setQueryState({
+          pane: 'node',
+          nodeId: targetNode.id,
+          edgeId: null,
+        });
+      }
+    },
+    [setNodes, setEdges, nodes, setQueryState]
+  );
+
+  const handleNavigateToEdge = useCallback(
+    (edgeId: string) => {
+      // The edgeId parameter is from error parsing
+      // We need to find the React Flow edge that has this ID
+      const targetEdge = edges.find((edge) => edge.id === edgeId);
+
+      if (targetEdge) {
+        // Clear selection and select the target edge
+        setEdges((edges) =>
+          edges.map((edge) => ({
+            ...edge,
+            selected: edge.id === targetEdge.id,
+          }))
+        );
+        setNodes((nodes) => nodes.map((node) => ({ ...node, selected: false })));
+
+        // Open the sidepane for the selected edge
+        setQueryState({
+          pane: 'edge',
+          nodeId: null,
+          edgeId: targetEdge.id,
+        });
+      }
+    },
+    [setEdges, setNodes, edges, setQueryState]
+  );
+
+  const onSubmit = useCallback(async () => {
+    const serializedData = serializeGraphData(
+      nodes,
+      edges,
+      metadata,
+      dataComponentLookup,
+      artifactComponentLookup
+    );
+
+
+    const res = await saveGraph(
+      tenantId,
+      projectId,
+      serializedData,
+      graph?.id // graphid is required and added to the serialized data if it does not exist so we need to pass is separately to know whether to create or update
+    );
+
+    if (res.success) {
+      // Clear any existing errors on successful save
+      clearErrors();
+      toast.success('Graph saved', {
+        closeButton: true,
+      });
+      markSaved();
+      if (!graph?.id && res.data?.id) {
+        setMetadata('id', res.data.id);
+        router.push(`/${tenantId}/projects/${projectId}/graphs/${res.data.id}`);
+      }
+    } else {
+      try {
+        const errorSummary = parseGraphValidationErrors(res.error);
+        setErrors(errorSummary);
+
+        const summaryMessage = getErrorSummaryMessage(errorSummary);
+        toast.error(summaryMessage || 'Failed to save graph - validation errors found');
+      } catch (parseError) {
+        // Fallback for unparseable errors
+        console.error('Failed to parse validation errors:', parseError);
+        toast.error('Failed to save graph', {
+          closeButton: true,
+        });
+      }
+    }
+  }, [
+    nodes,
+    edges,
+    metadata,
+    dataComponentLookup,
+    artifactComponentLookup,
+    markSaved,
+    setMetadata,
+    router,
+    graph?.id,
+    tenantId,
+    projectId,
+    clearErrors,
+    setErrors,
+  ]);
+
+  return (
+    <div className="w-full h-full relative bg-muted/20 dark:bg-background flex rounded-b-[14px] overflow-hidden">
+      <div className={`flex-1 h-full relative transition-all duration-300 ease-in-out`}>
+        <DefaultMarker />
+        <SelectedMarker />
+        <ReactFlow
+          defaultEdgeOptions={{
+            type: 'default',
+          }}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnectWrapped}
+          onDrop={onDrop}
+          onDragOver={onDragOver}
+          fitView
+          snapToGrid
+          snapGrid={[20, 20]}
+          fitViewOptions={{
+            maxZoom: 1,
+          }}
+          connectionMode={ConnectionMode.Loose}
+          isValidConnection={isValidConnection}
+        >
+          <Background color="#a8a29e" gap={20} />
+          <Controls className="text-foreground" showInteractive={false} />
+          <Panel position="top-left">
+            <NodeLibrary />
+          </Panel>
+          <Panel position="top-right">
+            <Toolbar
+              onSubmit={onSubmit}
+              isPreviewDisabled={!graph?.id}
+              toggleSidePane={isOpen ? closeSidePane : openGraphPane}
+              setShowPlayground={() => {
+                closeSidePane();
+                setShowPlayground(true);
+              }}
+            />
+          </Panel>
+          {errors && showErrors && (
+            <Panel position="bottom-left" className="max-w-sm !left-8 mb-4">
+              <GraphErrorSummary
+                errorSummary={errors}
+                onClose={() => setShowErrors(false)}
+                onNavigateToNode={handleNavigateToNode}
+                onNavigateToEdge={handleNavigateToEdge}
+              />
+            </Panel>
+          )}
+        </ReactFlow>
+      </div>
+      <SidePane
+        selectedNodeId={nodeId}
+        selectedEdgeId={edgeId}
+        isOpen={isOpen}
+        onClose={closeSidePane}
+        backToGraph={backToGraph}
+        dataComponentLookup={dataComponentLookup}
+        artifactComponentLookup={artifactComponentLookup}
+      />
+      {showPlayground && graph?.id && (
+        <Playground
+          graphId={graph?.id}
+          projectId={projectId}
+          tenantId={tenantId}
+          setShowPlayground={setShowPlayground}
+        />
+      )}
+    </div>
+  );
+}
+
+export function Graph({ graph, dataComponentLookup, artifactComponentLookup }: GraphProps) {
+  return (
+    <ReactFlowProvider>
+      <Flow
+        graph={graph}
+        dataComponentLookup={dataComponentLookup}
+        artifactComponentLookup={artifactComponentLookup}
+      />
+    </ReactFlowProvider>
+  );
+}

package/src/components/graph/markers/default-marker.tsx

@@ -0,0 +1,28 @@
+export function DefaultMarker() {
+  return (
+    <svg style={{ position: 'absolute', top: 0, left: 0 }}>
+      <title>arrow</title>
+      <defs>
+        <marker
+          className="react-flow__arrowhead !stroke-border dark:!stroke-muted-foreground"
+          id="marker-default"
+          markerWidth="12.5"
+          markerHeight="12.5"
+          viewBox="-10 -10 20 20"
+          markerUnits="strokeWidth"
+          orient="auto-start-reverse"
+          refX="0"
+          refY="0"
+        >
+          <polyline
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+            points="-5,-4 0,0 -5,4"
+            strokeWidth={1.5}
+          />
+        </marker>
+      </defs>
+    </svg>
+  );
+}

package/src/components/graph/markers/selected-marker.tsx

@@ -0,0 +1,28 @@
+export function SelectedMarker() {
+  return (
+    <svg style={{ position: 'absolute', top: 0, left: 0 }}>
+      <title>arrow</title>
+      <defs>
+        <marker
+          className="react-flow__arrowhead !stroke-primary"
+          id="marker-selected"
+          markerWidth="12.5"
+          markerHeight="12.5"
+          viewBox="-10 -10 20 20"
+          markerUnits="strokeWidth"
+          orient="auto-start-reverse"
+          refX="0"
+          refY="0"
+        >
+          <polyline
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+            points="-5,-4 0,0 -5,4"
+            strokeWidth={1.5}
+          />
+        </marker>
+      </defs>
+    </svg>
+  );
+}

package/src/components/graph/node-library/node-item.tsx

@@ -0,0 +1,39 @@
+import { GripVertical, type LucideIcon } from 'lucide-react';
+
+export type NodeItem = {
+  type: string;
+  name: string;
+  Icon: LucideIcon;
+  disabled?: boolean;
+};
+
+interface NodeItemProps {
+  node: NodeItem;
+}
+
+export function NodeItem({ node }: NodeItemProps) {
+  const { type, name, Icon, disabled } = node;
+  const onDragStart = (event: React.DragEvent<HTMLDivElement>, node: NodeItem) => {
+    event.dataTransfer.setData('application/reactflow', JSON.stringify(node));
+    event.dataTransfer.effectAllowed = 'move';
+  };
+  return (
+    <div
+      key={type}
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      aria-label={`Drag ${name} node`}
+      className="border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 flex font-medium items-center text-sm rounded-md p-2 justify-between gap-2 text-left h-auto w-full group group-hover:bg-muted/50 transition-all ease-in-out duration-200 cursor-grab active:cursor-grabbing"
+      draggable={!disabled}
+      onDragStart={(e) => onDragStart(e, node)}
+    >
+      <div className="flex items-center gap-2">
+        <Icon className="h-4 w-4 text-muted-foreground" />
+        <div className="flex flex-col items-start min-w-0">
+          <span className="truncate w-full inline-block">{name}</span>
+        </div>
+      </div>
+      <GripVertical className="h-4 w-4 text-muted-foreground/30 opacity-0 group-hover:opacity-100 transition-all ease-in-out duration-200" />
+    </div>
+  );
+}

package/src/components/graph/node-library/node-library.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { NodeType, nodeTypeMap } from '../configuration/node-types';
+import { NodeItem } from './node-item';
+
+const nodeTypes: NodeItem[] = [
+  nodeTypeMap[NodeType.Agent],
+  nodeTypeMap[NodeType.ExternalAgent],
+  nodeTypeMap[NodeType.MCPPlaceholder],
+];
+
+export default function NodeLibrary() {
+  return (
+    <div className="flex flex-col gap-2 max-w-72 w-52 min-w-0">
+      {nodeTypes.map((node) => (
+        <NodeItem key={node.type} node={node} />
+      ))}
+    </div>
+  );
+}