@inkeep/agents-manage-ui 0.18.0 → 0.19.0

package/src/components/{graph/graph.tsx → agent/agent.tsx}

@@ -18,26 +18,26 @@ import { nanoid } from 'nanoid';
 import { useParams, useRouter } from 'next/navigation';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
-import { commandManager } from '@/features/graph/commands/command-manager';
-import { AddNodeCommand, AddPreparedEdgeCommand } from '@/features/graph/commands/commands';
+import { commandManager } from '@/features/agent/commands/command-manager';
+import { AddNodeCommand, AddPreparedEdgeCommand } from '@/features/agent/commands/commands';
 import {
   applyDagreLayout,
-  deserializeGraphData,
-  type ExtendedFullGraphDefinition,
-  extractGraphMetadata,
-  serializeGraphData,
+  deserializeAgentData,
+  type ExtendedFullAgentDefinition,
+  extractAgentMetadata,
+  serializeAgentData,
   validateSerializedData,
-} from '@/features/graph/domain';
-import { useGraphActions, useGraphStore } from '@/features/graph/state/use-graph-store';
-import { useGraphShortcuts } from '@/features/graph/ui/use-graph-shortcuts';
-import { useGraphErrors } from '@/hooks/use-graph-errors';
+} from '@/features/agent/domain';
+import { useAgentActions, useAgentStore } from '@/features/agent/state/use-agent-store';
+import { useAgentShortcuts } from '@/features/agent/ui/use-agent-shortcuts';
+import { useAgentErrors } from '@/hooks/use-agent-errors';
 import { useSidePane } from '@/hooks/use-side-pane';
 import type { ArtifactComponent } from '@/lib/api/artifact-components';
 import type { Credential } from '@/lib/api/credentials';
 import type { DataComponent } from '@/lib/api/data-components';
-import { saveGraph } from '@/lib/services/save-graph';
+import { saveAgent } from '@/lib/services/save-agent';
 import type { MCPTool } from '@/lib/types/tools';
-import { getErrorSummaryMessage, parseGraphValidationErrors } from '@/lib/utils/graph-error-parser';
+import { getErrorSummaryMessage, parseAgentValidationErrors } from '@/lib/utils/agent-error-parser';
 import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
 import { detectOrphanedToolsAndGetWarning } from '@/lib/utils/orphaned-tools-detector';
 
@@ -62,7 +62,7 @@ import {
   newNodeDefaults,
   nodeTypes,
 } from './configuration/node-types';
-import { GraphErrorSummary } from './error-display/graph-error-summary';
+import { AgentErrorSummary } from './error-display/agent-error-summary';
 import { DefaultMarker } from './markers/default-marker';
 import { SelectedMarker } from './markers/selected-marker';
 import NodeLibrary from './node-library/node-library';
@@ -75,8 +75,8 @@ function getEdgeId(a: string, b: string) {
   return `edge-${low}-${high}`;
 }
 
-interface GraphProps {
-  graph?: ExtendedFullGraphDefinition;
+interface AgentProps {
+  agent?: ExtendedFullAgentDefinition;
   dataComponentLookup?: Record<string, DataComponent>;
   artifactComponentLookup?: Record<string, ArtifactComponent>;
   toolLookup?: Record<string, MCPTool>;
@@ -84,12 +84,12 @@ interface GraphProps {
 }
 
 function Flow({
-  graph,
+  agent,
   dataComponentLookup = {},
   artifactComponentLookup = {},
   toolLookup = {},
   credentialLookup = {},
-}: GraphProps) {
+}: AgentProps) {
   const [showPlayground, setShowPlayground] = useState(false);
   const router = useRouter();
 
@@ -102,7 +102,7 @@ function Flow({
     () => [
       {
         id: nanoid(),
-        type: NodeType.Agent,
+        type: NodeType.SubAgent,
         position: { x: 0, y: 0 },
         data: { name: '', isDefault: true },
         deletable: false,
@@ -138,22 +138,22 @@ function Flow({
     [toolLookup]
   );
 
-  const { nodes: graphNodes, edges: graphEdges } = useMemo(() => {
-    const result = graph
-      ? deserializeGraphData(graph)
+  const { nodes: agentNodes, edges: agentEdges } = useMemo(() => {
+    const result = agent
+      ? deserializeAgentData(agent)
       : { nodes: initialNodes, edges: initialEdges };
     return {
       ...result,
       nodes: enrichNodes(result.nodes),
     };
-  }, [graph, enrichNodes, initialNodes]);
+  }, [agent, enrichNodes, initialNodes]);
 
-  // Create agent tool configuration lookup from graph data
+  // Create agent tool configuration lookup from agent data
   const agentToolConfigLookup = useMemo((): AgentToolConfigLookup => {
-    if (!graph?.subAgents) return {} as AgentToolConfigLookup;
+    if (!agent?.subAgents) return {} as AgentToolConfigLookup;
 
     const lookup: AgentToolConfigLookup = {};
-    Object.entries(graph.subAgents).forEach(([subAgentId, agentData]) => {
+    Object.entries(agent.subAgents).forEach(([subAgentId, agentData]) => {
       if ('canUse' in agentData && agentData.canUse) {
         const toolsMap: Record<string, AgentToolConfig> = {};
         agentData.canUse.forEach((tool) => {
@@ -179,7 +179,7 @@ function Flow({
       }
     });
     return lookup;
-  }, [graph?.subAgents]);
+  }, [agent?.subAgents]);
 
   const {
     screenToFlowPosition,
@@ -189,7 +189,7 @@ function Flow({
     getEdges,
     getIntersectingNodes,
   } = useReactFlow();
-  const { storeNodes, edges, metadata } = useGraphStore((state) => ({
+  const { storeNodes, edges, metadata } = useAgentStore((state) => ({
     storeNodes: state.nodes,
     edges: state.edges,
     metadata: state.metadata,
@@ -204,15 +204,15 @@ function Flow({
     markSaved,
     clearSelection,
     markUnsaved,
-  } = useGraphActions();
+  } = useAgentActions();
 
   // Always use enriched nodes for ReactFlow
   const nodes = useMemo(() => enrichNodes(storeNodes), [storeNodes, enrichNodes]);
-  const { nodeId, edgeId, setQueryState, openGraphPane, isOpen } = useSidePane();
-  const { errors, showErrors, setErrors, clearErrors, setShowErrors } = useGraphErrors();
+  const { nodeId, edgeId, setQueryState, openAgentPane, isOpen } = useSidePane();
+  const { errors, showErrors, setErrors, clearErrors, setShowErrors } = useAgentErrors();
 
   /**
-   * Custom `onNodesChange` handler that relayouts the graph using Dagre
+   * Custom `onNodesChange` handler that relayouts the agent using Dagre
    * when a `replace` change causes node intersections.
    **/
   const onNodesChange: typeof storeOnNodesChange = useCallback(
@@ -249,9 +249,9 @@ function Flow({
   // biome-ignore lint/correctness/useExhaustiveDependencies: we only want to run this effect on first render
   useEffect(() => {
     setInitial(
-      graphNodes,
-      graphEdges,
-      extractGraphMetadata(graph),
+      agentNodes,
+      agentEdges,
+      extractAgentMetadata(agent),
       dataComponentLookup,
       artifactComponentLookup,
       toolLookup,
@@ -261,13 +261,13 @@ function Flow({
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: we only want to run this effect on first render
   useEffect(() => {
-    if (!graph) {
-      openGraphPane();
+    if (!agent) {
+      openAgentPane();
       return;
     }
 
     if (!nodeId && !edgeId) {
-      openGraphPane();
+      openAgentPane();
     }
 
     if (nodeId) {
@@ -288,24 +288,24 @@ function Flow({
       );
     }
 
-    // If the nodeId or edgeId in URL doesn't exist in the graph, clear it
-    if (nodeId && !graphNodes.some((node) => node.id === nodeId)) {
+    // If the nodeId or edgeId in URL doesn't exist in the agent, clear it
+    if (nodeId && !agentNodes.some((node) => node.id === nodeId)) {
       setQueryState((prev) => ({
         ...prev,
         nodeId: null,
-        pane: 'graph',
+        pane: 'agent',
       }));
     }
-    if (edgeId && !graphEdges.some((edge) => edge.id === edgeId)) {
+    if (edgeId && !agentEdges.some((edge) => edge.id === edgeId)) {
       setQueryState((prev) => ({
         ...prev,
         edgeId: null,
-        pane: 'graph',
+        pane: 'agent',
       }));
     }
   }, []);
 
-  // Auto-center graph when sidepane opens/closes
+  // Auto-center agent when sidepane opens/closes
   // biome-ignore lint/correctness/useExhaustiveDependencies: we want to trigger on isOpen changes
   useEffect(() => {
     // Delay to allow CSS transition to complete (300ms transition + 50ms buffer)
@@ -316,7 +316,7 @@ function Flow({
     return () => clearTimeout(timer);
   }, [isOpen, fitView]);
 
-  // Auto-center graph when playground opens/closes
+  // Auto-center agent when playground opens/closes
   // biome-ignore lint/correctness/useExhaustiveDependencies: we want to trigger on showPlayground changes
   useEffect(() => {
     // Delay to allow CSS transition to complete
@@ -458,7 +458,7 @@ function Flow({
         (edges[0]?.type === EdgeType.A2A || edges[0]?.type === EdgeType.SelfLoop)
           ? edges[0]
           : null;
-      const defaultPane = isOpen ? 'graph' : null;
+      const defaultPane = isOpen ? 'agent' : null;
 
       setQueryState(
         {
@@ -476,7 +476,7 @@ function Flow({
     onChange: onSelectionChange,
   });
 
-  useGraphShortcuts();
+  useAgentShortcuts();
 
   const closeSidePane = useCallback(() => {
     setEdges((edges) => edges.map((edge) => ({ ...edge, selected: false })));
@@ -488,11 +488,11 @@ function Flow({
     });
   }, [setQueryState, setEdges, setNodes]);
 
-  const backToGraph = useCallback(() => {
+  const backToAgent = useCallback(() => {
     setEdges((edges) => edges.map((edge) => ({ ...edge, selected: false })));
     setNodes((nodes) => nodes.map((node) => ({ ...node, selected: false })));
     setQueryState({
-      pane: 'graph',
+      pane: 'agent',
       nodeId: null,
       edgeId: null,
     });
@@ -571,7 +571,7 @@ function Flow({
       });
     }
 
-    const serializedData = serializeGraphData(
+    const serializedData = serializeAgentData(
       nodes,
       edges,
       metadata,
@@ -593,7 +593,7 @@ function Flow({
     // Validate the serialized data before saving
     const validationErrors = validateSerializedData(serializedData, functionToolNodeMap);
     if (validationErrors.length > 0) {
-      // Convert validation errors to the format expected by parseGraphValidationErrors
+      // Convert validation errors to the format expected by parseAgentValidationErrors
       const errorObjects = validationErrors.map((error) => ({
         message: error.message,
         field: error.field,
@@ -602,23 +602,23 @@ function Flow({
         functionToolId: error.functionToolId,
       }));
 
-      const errorSummary = parseGraphValidationErrors(JSON.stringify(errorObjects));
+      const errorSummary = parseAgentValidationErrors(JSON.stringify(errorObjects));
       setErrors(errorSummary);
       toast.error(`Validation failed: ${validationErrors[0].message}`);
       return;
     }
 
-    const res = await saveGraph(
+    const res = await saveAgent(
       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
+      agent?.id // agentid 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', {
+      toast.success('Agent saved', {
         closeButton: true,
       });
       markSaved();
@@ -673,21 +673,21 @@ function Flow({
         );
       }
 
-      if (!graph?.id && res.data?.id) {
+      if (!agent?.id && res.data?.id) {
         setMetadata('id', res.data.id);
-        router.push(`/${tenantId}/projects/${projectId}/graphs/${res.data.id}`);
+        router.push(`/${tenantId}/projects/${projectId}/agents/${res.data.id}`);
       }
     } else {
       try {
-        const errorSummary = parseGraphValidationErrors(res.error);
+        const errorSummary = parseAgentValidationErrors(res.error);
         setErrors(errorSummary);
 
         const summaryMessage = getErrorSummaryMessage(errorSummary);
-        toast.error(summaryMessage || 'Failed to save graph - validation errors found');
+        toast.error(summaryMessage || 'Failed to save agent - validation errors found');
       } catch (parseError) {
         // Fallback for unparseable errors
         console.error('Failed to parse validation errors:', parseError);
-        toast.error('Failed to save graph', {
+        toast.error('Failed to save agent', {
           closeButton: true,
         });
       }
@@ -702,7 +702,7 @@ function Flow({
     setMetadata,
     setNodes,
     router,
-    graph?.id,
+    agent?.id,
     tenantId,
     projectId,
     clearErrors,
@@ -746,8 +746,8 @@ function Flow({
           <Panel position="top-right">
             <Toolbar
               onSubmit={onSubmit}
-              inPreviewDisabled={!graph?.id}
-              toggleSidePane={isOpen ? backToGraph : openGraphPane}
+              inPreviewDisabled={!agent?.id}
+              toggleSidePane={isOpen ? backToAgent : openAgentPane}
               setShowPlayground={() => {
                 closeSidePane();
                 setShowPlayground(true);
@@ -756,7 +756,7 @@ function Flow({
           </Panel>
           {errors && showErrors && (
             <Panel position="bottom-left" className="max-w-sm !left-8 mb-4">
-              <GraphErrorSummary
+              <AgentErrorSummary
                 errorSummary={errors}
                 onClose={() => setShowErrors(false)}
                 onNavigateToNode={handleNavigateToNode}
@@ -771,15 +771,15 @@ function Flow({
         selectedEdgeId={edgeId}
         isOpen={isOpen}
         onClose={closeSidePane}
-        backToGraph={backToGraph}
+        backToAgent={backToAgent}
         dataComponentLookup={dataComponentLookup}
         artifactComponentLookup={artifactComponentLookup}
         agentToolConfigLookup={agentToolConfigLookup}
         credentialLookup={credentialLookup}
       />
-      {showPlayground && graph?.id && (
+      {showPlayground && agent?.id && (
         <Playground
-          graphId={graph?.id}
+          agentId={agent?.id}
           projectId={projectId}
           tenantId={tenantId}
           setShowPlayground={setShowPlayground}
@@ -790,17 +790,17 @@ function Flow({
   );
 }
 
-export function Graph({
-  graph,
+export function Agent({
+  agent,
   dataComponentLookup,
   artifactComponentLookup,
   toolLookup,
   credentialLookup,
-}: GraphProps) {
+}: AgentProps) {
   return (
     <ReactFlowProvider>
       <Flow
-        graph={graph}
+        agent={agent}
         dataComponentLookup={dataComponentLookup}
         artifactComponentLookup={artifactComponentLookup}
         toolLookup={toolLookup}

package/src/components/{graph/configuration/graph-types.tsx → agent/configuration/agent-types.tsx}

@@ -3,16 +3,16 @@ export type ModelSettings = {
   providerOptions?: string; // JSON string representation for form compatibility
 };
 
-import type { GraphStopWhen } from '@inkeep/agents-core/client-exports';
+import type { AgentStopWhen } from '@inkeep/agents-core/client-exports';
 
-export type GraphModels = {
+export type AgentModels = {
   base?: ModelSettings;
   structuredOutput?: ModelSettings;
   summarizer?: ModelSettings;
 };
 
 // Re-export the shared type for consistency
-export type { GraphStopWhen };
+export type { AgentStopWhen };
 
 export type StatusUpdateSettings = {
   enabled?: boolean;
@@ -22,14 +22,14 @@ export type StatusUpdateSettings = {
   statusComponents?: string; // JSON string representation of status components array
 };
 
-export type GraphMetadata = {
+export type AgentMetadata = {
   id?: string;
   name: string;
   description: string;
   contextConfig: ContextConfig;
-  models?: GraphModels;
-  stopWhen?: GraphStopWhen;
-  graphPrompt?: string;
+  models?: AgentModels;
+  stopWhen?: AgentStopWhen;
+  agentPrompt?: string;
   statusUpdates?: StatusUpdateSettings;
 };
 

package/src/components/agent/configuration/model-options.tsx

@@ -0,0 +1,74 @@
+import { ANTHROPIC_MODELS, OPENAI_MODELS, GOOGLE_MODELS } from '@inkeep/agents-core/constants/models';
+
+export const DEFAULT_ANTHROPIC_BASE_MODEL = ANTHROPIC_MODELS.CLAUDE_SONNET_4_5;
+export const DEFAULT_ANTHROPIC_STRUCTURED_OUTPUT_MODEL = ANTHROPIC_MODELS.CLAUDE_SONNET_4_5;
+export const DEFAULT_ANTHROPIC_SUMMARIZER_MODEL = ANTHROPIC_MODELS.CLAUDE_SONNET_4_5;
+
+export const DEFAULT_OPENAI_BASE_MODEL = OPENAI_MODELS.GPT_4_1;
+export const DEFAULT_OPENAI_STRUCTURED_OUTPUT_MODEL = OPENAI_MODELS.GPT_4_1_MINI;
+export const DEFAULT_OPENAI_SUMMARIZER_MODEL = OPENAI_MODELS.GPT_4_1_NANO;
+
+export const DEFAULT_GOOGLE_BASE_MODEL = GOOGLE_MODELS.GEMINI_2_5_FLASH;
+export const DEFAULT_GOOGLE_STRUCTURED_OUTPUT_MODEL = GOOGLE_MODELS.GEMINI_2_5_FLASH_LITE;
+export const DEFAULT_GOOGLE_SUMMARIZER_MODEL = GOOGLE_MODELS.GEMINI_2_5_FLASH_LITE;
+
+export const modelOptions = {
+  anthropic: [
+    {
+      value: ANTHROPIC_MODELS.CLAUDE_OPUS_4_1,
+      label: 'Claude Opus 4.1',
+    },
+    {
+      value: ANTHROPIC_MODELS.CLAUDE_SONNET_4_5,
+      label: 'Claude Sonnet 4.5',
+    },
+    {
+      value: ANTHROPIC_MODELS.CLAUDE_SONNET_4,
+      label: 'Claude Sonnet 4',
+    },
+    {
+      value: ANTHROPIC_MODELS.CLAUDE_3_5_HAIKU,
+      label: 'Claude 3.5 Haiku',
+    },
+  ],
+  openai: [
+    {
+      value: OPENAI_MODELS.GPT_4_1,
+      label: 'GPT-4.1',
+    },
+    {
+      value: OPENAI_MODELS.GPT_4_1_MINI,
+      label: 'GPT-4.1 Mini',
+    },
+    {
+      value: OPENAI_MODELS.GPT_4_1_NANO,
+      label: 'GPT-4.1 Nano',
+    },
+    {
+      value: OPENAI_MODELS.GPT_5,
+      label: 'GPT-5',
+    },
+    {
+      value: OPENAI_MODELS.GPT_5_MINI,
+      label: 'GPT-5 Mini',
+    },
+    {
+      value: OPENAI_MODELS.GPT_5_NANO,
+      label: 'GPT-5 Nano',
+    },
+  ],
+  google: [
+    {
+      value: GOOGLE_MODELS.GEMINI_2_5_PRO,
+      label: 'Gemini 2.5 Pro',
+    },
+    {
+      value: GOOGLE_MODELS.GEMINI_2_5_FLASH,
+      label: 'Gemini 2.5 Flash',
+    },
+    {
+      value: GOOGLE_MODELS.GEMINI_2_5_FLASH_LITE,
+      label: 'Gemini 2.5 Flash Lite',
+    },
+  ],
+};

package/src/components/{graph → agent}/configuration/node-types.tsx

@@ -1,10 +1,10 @@
 import { Bot, BotMessageSquare, Code, Hammer } from 'lucide-react';
-import { AgentNode } from '../nodes/agent-node';
 import { ExternalAgentNode } from '../nodes/external-agent-node';
 import { FunctionToolNode } from '../nodes/function-tool-node';
 import { MCPNode } from '../nodes/mcp-node';
 import { MCPPlaceholderNode } from '../nodes/mcp-placeholder-node';
-import type { GraphModels } from './graph-types';
+import { SubAgentNode } from '../nodes/sub-agent-node';
+import type { AgentModels } from './agent-types';
 
 interface NodeData {
   name: string;
@@ -13,7 +13,7 @@ interface NodeData {
   relationshipId?: string | null; // Optional for MCP nodes
 }
 
-import type { AgentStopWhen } from '@inkeep/agents-core/client-exports';
+import type { SubAgentStopWhen } from '@inkeep/agents-core/client-exports';
 
 export interface MCPNodeData extends Record<string, unknown> {
   toolId: string;
@@ -25,7 +25,7 @@ export interface MCPNodeData extends Record<string, unknown> {
 }
 
 // Re-export the shared type for consistency
-export type { AgentStopWhen };
+export type { SubAgentStopWhen };
 
 export interface AgentNodeData extends Record<string, unknown> {
   id: string;
@@ -34,8 +34,8 @@ export interface AgentNodeData extends Record<string, unknown> {
   prompt?: string;
   dataComponents?: string[];
   artifactComponents?: string[];
-  models?: GraphModels; // Use same structure as graph
-  stopWhen?: AgentStopWhen;
+  models?: AgentModels; // Use same structure as agent
+  stopWhen?: SubAgentStopWhen;
 }
 
 export interface ExternalAgentNodeData extends Record<string, unknown> {
@@ -60,7 +60,7 @@ export interface FunctionToolNodeData extends Record<string, unknown> {
 }
 
 export enum NodeType {
-  Agent = 'agent',
+  SubAgent = 'agent',
   ExternalAgent = 'external-agent',
   MCP = 'mcp',
   MCPPlaceholder = 'mcp-placeholder',
@@ -68,7 +68,7 @@ export enum NodeType {
 }
 
 export const nodeTypes = {
-  [NodeType.Agent]: AgentNode,
+  [NodeType.SubAgent]: SubAgentNode,
   [NodeType.ExternalAgent]: ExternalAgentNode,
   [NodeType.MCP]: MCPNode,
   [NodeType.MCPPlaceholder]: MCPPlaceholderNode,
@@ -82,7 +82,7 @@ export const externalAgentNodeTargetHandleId = 'target-external-agent';
 export const functionToolNodeHandleId = 'target-function-tool';
 
 export const newNodeDefaults: Record<keyof typeof nodeTypes, NodeData> = {
-  [NodeType.Agent]: {
+  [NodeType.SubAgent]: {
     name: '',
   },
   [NodeType.ExternalAgent]: {
@@ -103,9 +103,9 @@ export const newNodeDefaults: Record<keyof typeof nodeTypes, NodeData> = {
 };
 
 export const nodeTypeMap = {
-  [NodeType.Agent]: {
-    type: NodeType.Agent,
-    name: 'Agent',
+  [NodeType.SubAgent]: {
+    type: NodeType.SubAgent,
+    name: 'Sub Agent',
     Icon: Bot,
   },
   [NodeType.ExternalAgent]: {