@inkeep/agents-manage-ui 0.18.0 → 0.19.0

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

@@ -1,13 +1,13 @@
 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 { GraphMetadata } from '@/components/graph/configuration/graph-types';
-import { NodeType } from '@/components/graph/configuration/node-types';
-import type { AgentToolConfigLookup } from '@/components/graph/graph';
+import type { AgentToolConfigLookup } from '@/components/agent/agent';
+import type { AgentMetadata } from '@/components/agent/configuration/agent-types';
+import type { A2AEdgeData } from '@/components/agent/configuration/edge-types';
+import { EdgeType } from '@/components/agent/configuration/edge-types';
+import { NodeType } from '@/components/agent/configuration/node-types';
 import type { ArtifactComponent } from '@/lib/api/artifact-components';
 import type { DataComponent } from '@/lib/api/data-components';
-import type { FullGraphDefinition, InternalAgentDefinition } from '@/lib/types/graph-full';
+import type { FullAgentDefinition, InternalAgentDefinition } from '@/lib/types/agent-full';
 
 // Use the exported InternalAgentDefinition from core
 type InternalAgent = InternalAgentDefinition;
@@ -26,19 +26,19 @@ export type ExtendedAgent =
   | (InternalAgent & {
       dataComponents: string[];
       artifactComponents: string[];
-      models?: GraphMetadata['models'];
+      models?: AgentMetadata['models'];
       type: 'internal';
     })
   | ExternalAgent;
 
 // Type guard to check if an agent is an internal agent
 function isInternalAgent(
-  agent: ExtendedAgent | FullGraphDefinition['subAgents'][string]
+  agent: ExtendedAgent | FullAgentDefinition['subAgents'][string]
 ): agent is InternalAgent {
   return agent.type === 'internal' && 'canUse' in agent;
 }
 
-// Note: Tools are now project-scoped, not part of FullGraphDefinition
+// Note: Tools are now project-scoped, not part of FullAgentDefinition
 
 /**
  * Safely parse a JSON string, returning undefined if parsing fails or input is falsy
@@ -53,7 +53,7 @@ function safeJsonParse(jsonString: string | undefined | null): any {
     return undefined;
   }
 }
-function processModels(modelsData: GraphMetadata['models']): GraphMetadata['models'] | undefined {
+function processModels(modelsData: AgentMetadata['models']): AgentMetadata['models'] | undefined {
   if (modelsData && typeof modelsData === 'object') {
     const hasNonEmptyValue = Object.values(modelsData).some(
       (value) => value !== null && value !== undefined && String(value).trim() !== ''
@@ -87,24 +87,24 @@ function processModels(modelsData: GraphMetadata['models']): GraphMetadata['mode
 /**
  * Transforms React Flow nodes and edges back into the API data structure
  */
-export function serializeGraphData(
+export function serializeAgentData(
   nodes: Node[],
   edges: Edge[],
-  metadata?: GraphMetadata,
+  metadata?: AgentMetadata,
   dataComponentLookup?: Record<string, DataComponent>,
   artifactComponentLookup?: Record<string, ArtifactComponent>,
   agentToolConfigLookup?: AgentToolConfigLookup
-): FullGraphDefinition {
+): FullAgentDefinition {
   const subAgents: Record<string, ExtendedAgent> = {};
   const functionTools: Record<string, any> = {};
   const functions: Record<string, any> = {};
-  // Note: Tools are now project-scoped and not included in graph serialization
+  // Note: Tools are now project-scoped and not included in agent serialization
   const usedDataComponents = new Set<string>();
   const usedArtifactComponents = new Set<string>();
   let defaultSubAgentId = '';
 
   for (const node of nodes) {
-    if (node.type === NodeType.Agent) {
+    if (node.type === NodeType.SubAgent) {
       const subAgentId = (node.data.id as string) || node.id;
       const subAgentDataComponents = (node.data.dataComponents as string[]) || [];
       const subAgentArtifactComponents = (node.data.artifactComponents as string[]) || [];
@@ -116,7 +116,7 @@ export function serializeGraphData(
         usedArtifactComponents.add(componentId);
       });
       // Process models - only include if it has non-empty, non-whitespace values
-      const modelsData = node.data.models as GraphMetadata['models'] | undefined;
+      const modelsData = node.data.models as AgentMetadata['models'] | undefined;
       const processedModels = processModels(modelsData);
 
       const stopWhen = (node.data as any).stopWhen;
@@ -383,20 +383,20 @@ export function serializeGraphData(
     });
   }
 
-  const result: FullGraphDefinition = {
+  const result: FullAgentDefinition = {
     id: metadata?.id || nanoid(),
-    name: metadata?.name || 'Untitled Graph',
+    name: metadata?.name || 'Untitled Agent',
     description: metadata?.description || undefined,
     defaultSubAgentId,
     subAgents: subAgents,
     ...(Object.keys(functionTools).length > 0 && { functionTools }),
     ...(Object.keys(functions).length > 0 && { functions }),
-    // Note: Tools are now project-scoped and not included in FullGraphDefinition
+    // Note: Tools are now project-scoped and not included in FullAgentDefinition
     // ...(Object.keys(dataComponents).length > 0 && { dataComponents }),
     // ...(Object.keys(artifactComponents).length > 0 && { artifactComponents }),
   };
 
-  // Add new graph-level fields
+  // Add new agent-level fields
   if (metadata?.models) {
     (result as any).models = {
       base: metadata.models.base
@@ -424,8 +424,8 @@ export function serializeGraphData(
     (result as any).stopWhen = metadata.stopWhen;
   }
 
-  if (metadata?.graphPrompt) {
-    (result as any).graphPrompt = metadata.graphPrompt;
+  if (metadata?.agentPrompt) {
+    (result as any).agentPrompt = metadata.agentPrompt;
   }
 
   if (metadata?.statusUpdates) {
@@ -459,7 +459,7 @@ interface StructuredValidationError {
 }
 
 export function validateSerializedData(
-  data: FullGraphDefinition,
+  data: FullAgentDefinition,
   functionToolNodeMap?: Map<string, string>
 ): StructuredValidationError[] {
   const errors: StructuredValidationError[] = [];

package/src/features/{graph/state/use-graph-store.ts → agent/state/use-agent-store.ts}

@@ -3,20 +3,20 @@ import { addEdge, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 import { useShallow } from 'zustand/react/shallow';
-import type { GraphMetadata } from '@/components/graph/configuration/graph-types';
-import { mcpNodeHandleId, NodeType } from '@/components/graph/configuration/node-types';
-import type { AgentToolConfigLookup } from '@/components/graph/graph';
+import type { AgentMetadata } from '@/components/agent/configuration/agent-types';
+import { mcpNodeHandleId, NodeType } from '@/components/agent/configuration/node-types';
+import type { AgentToolConfigLookup } from '@/components/agent/agent';
 import type { ArtifactComponent } from '@/lib/api/artifact-components';
 import type { DataComponent } from '@/lib/api/data-components';
 import type { MCPTool } from '@/lib/types/tools';
-import type { GraphErrorSummary } from '@/lib/utils/graph-error-parser';
+import type { AgentErrorSummary } from '@/lib/utils/agent-error-parser';
 
 type HistoryEntry = { nodes: Node[]; edges: Edge[] };
 
-type GraphStateData = {
+type AgentStateData = {
   nodes: Node[];
   edges: Edge[];
-  metadata: GraphMetadata;
+  metadata: AgentMetadata;
   dataComponentLookup: Record<string, DataComponent>;
   artifactComponentLookup: Record<string, ArtifactComponent>;
   toolLookup: Record<string, MCPTool>;
@@ -24,15 +24,15 @@ type GraphStateData = {
   dirty: boolean;
   history: HistoryEntry[];
   future: HistoryEntry[];
-  errors: GraphErrorSummary | null;
+  errors: AgentErrorSummary | null;
   showErrors: boolean;
 };
 
-type GraphActions = {
+type AgentActions = {
   setInitial(
     nodes: Node[],
     edges: Edge[],
-    metadata: GraphMetadata,
+    metadata: AgentMetadata,
     dataComponentLookup?: Record<string, DataComponent>,
     artifactComponentLookup?: Record<string, ArtifactComponent>,
     toolLookup?: Record<string, MCPTool>,
@@ -47,7 +47,7 @@ type GraphActions = {
   onNodesChange(changes: NodeChange[]): void;
   onEdgesChange(changes: EdgeChange[]): void;
   onConnect(connection: Connection): void;
-  setMetadata<K extends keyof GraphMetadata>(field: K, value: GraphMetadata[K]): void;
+  setMetadata<K extends keyof AgentMetadata>(field: K, value: AgentMetadata[K]): void;
   push(nodes: Node[], edges: Edge[]): void;
   undo(): void;
   redo(): void;
@@ -55,19 +55,19 @@ type GraphActions = {
   markUnsaved(): void;
   clearSelection(): void;
   deleteSelected(): void;
-  setErrors(errors: GraphErrorSummary | null): void;
+  setErrors(errors: AgentErrorSummary | null): void;
   clearErrors(): void;
   setShowErrors(show: boolean): void;
   hasErrors(): boolean;
-  getNodeErrors(nodeId: string): GraphErrorSummary['allErrors'];
-  getEdgeErrors(edgeId: string): GraphErrorSummary['allErrors'];
+  getNodeErrors(nodeId: string): AgentErrorSummary['allErrors'];
+  getEdgeErrors(edgeId: string): AgentErrorSummary['allErrors'];
 };
 
-type GraphState = GraphStateData & {
-  actions: GraphActions;
+type AgentState = AgentStateData & {
+  actions: AgentActions;
 };
 
-export const graphStore = create<GraphState>()(
+export const agentStore = create<AgentState>()(
   devtools((set, get) => ({
     nodes: [],
     edges: [],
@@ -81,7 +81,7 @@ export const graphStore = create<GraphState>()(
       },
       models: undefined,
       stopWhen: undefined,
-      graphPrompt: undefined,
+      agentPrompt: undefined,
       statusUpdates: undefined,
     },
     dataComponentLookup: {},
@@ -144,7 +144,7 @@ export const graphStore = create<GraphState>()(
         }));
       },
       onNodesChange(changes) {
-        // Check if any change type would modify the graph (not just selection changes)
+        // Check if any change type would modify the agent (not just selection changes)
         const hasModifyingChange = changes.some(
           // Don't trigger `position` as modified change, since when the nodes are repositioned,
           // they'll be re-laid out during the initial load anyway
@@ -158,7 +158,7 @@ export const graphStore = create<GraphState>()(
         }));
       },
       onEdgesChange(changes) {
-        // Check if any change type would modify the graph (not just selection changes)
+        // Check if any change type would modify the agent (not just selection changes)
         const hasModifyingChange = changes.some(
           (change) => change.type === 'remove' || change.type === 'add' || change.type === 'replace'
         );
@@ -284,15 +284,15 @@ export const graphStore = create<GraphState>()(
  *
  * @see https://tkdodo.eu/blog/working-with-zustand#separate-actions-from-state
  */
-export const useGraphActions = () => graphStore((state) => state.actions);
+export const useAgentActions = () => agentStore((state) => state.actions);
 
 /**
- * Select values from the graph store (excluding actions).
+ * Select values from the agent store (excluding actions).
  *
- * We explicitly use `GraphStateData` instead of `GraphState`,
- * which includes actions, to encourage using `useGraphActions`
+ * We explicitly use `AgentStateData` instead of `AgentState`,
+ * which includes actions, to encourage using `useAgentActions`
  * when accessing or calling actions.
  */
-export function useGraphStore<T>(selector: (state: GraphStateData) => T): T {
-  return graphStore(useShallow(selector));
+export function useAgentStore<T>(selector: (state: AgentStateData) => T): T {
+  return agentStore(useShallow(selector));
 }

package/src/features/{graph/ui/use-graph-shortcuts.ts → agent/ui/use-agent-shortcuts.ts}

@@ -1,8 +1,8 @@
 import { useCallback, useEffect } from 'react';
-import { useGraphActions } from '@/features/graph/state/use-graph-store';
+import { useAgentActions } from '@/features/agent/state/use-agent-store';
 
-export function useGraphShortcuts() {
-  const { undo, redo, deleteSelected } = useGraphActions();
+export function useAgentShortcuts() {
+  const { undo, redo, deleteSelected } = useAgentActions();
 
   const onKeyDown = useCallback(
     (e: KeyboardEvent) => {

package/src/hooks/{use-graph-errors.ts → use-agent-errors.ts}

@@ -1,9 +1,9 @@
 /**
- * Hook for accessing graph error state and utilities
+ * Hook for accessing agent error state and utilities
  */
 
 import { useCallback } from 'react';
-import { useGraphStore, useGraphActions } from '@/features/graph/state/use-graph-store';
+import { useAgentStore, useAgentActions } from '@/features/agent/state/use-agent-store';
 
 export interface ErrorHelpers {
   hasFieldError: (fieldName: string) => boolean;
@@ -11,13 +11,13 @@ export interface ErrorHelpers {
   getFirstErrorField: () => string | undefined;
 }
 
-export function useGraphErrors() {
-  const { errors, showErrors } = useGraphStore((state) => ({
+export function useAgentErrors() {
+  const { errors, showErrors } = useAgentStore((state) => ({
     errors: state.errors,
     showErrors: state.showErrors,
   }));
   const { hasErrors, getNodeErrors, getEdgeErrors, setErrors, clearErrors, setShowErrors } =
-    useGraphActions();
+    useAgentActions();
 
   const getNodeErrorCount = (nodeId: string): number => {
     return getNodeErrors(nodeId).length;

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

@@ -9,7 +9,7 @@ export type TimeRange = (typeof timeRanges)[number];
  * Provides type-safe query parameter management for:
  * - Time range selection (24h, 7d, 15d, custom)
  * - Custom date range (start/end dates)
- * - Graph filtering
+ * - Agent filtering
  * - Model filtering
  */
 export function useAICallsQueryState() {
@@ -22,7 +22,7 @@ export function useAICallsQueryState() {
     customEndDate: parseAsString.withDefault(''),
 
     // Filtering options
-    selectedGraph: parseAsString.withDefault('all'),
+    selectedAgent: parseAsString.withDefault('all'),
     selectedModel: parseAsString.withDefault('all'),
   });
 
@@ -31,7 +31,7 @@ export function useAICallsQueryState() {
     timeRange: queryState.timeRange,
     customStartDate: queryState.customStartDate,
     customEndDate: queryState.customEndDate,
-    selectedGraph: queryState.selectedGraph,
+    selectedAgent: queryState.selectedAgent,
     selectedModel: queryState.selectedModel,
 
     // State setters
@@ -41,11 +41,11 @@ export function useAICallsQueryState() {
     setTimeRange: (timeRange: TimeRange) => setQueryState({ timeRange }),
     setCustomDateRange: (start: string, end: string) =>
       setQueryState({ customStartDate: start, customEndDate: end }),
-    setGraphFilter: (graph: string) => setQueryState({ selectedGraph: graph }),
+    setAgentFilter: (agent: string) => setQueryState({ selectedAgent: agent }),
     setModelFilter: (model: string) => setQueryState({ selectedModel: model }),
     clearFilters: () =>
       setQueryState({
-        selectedGraph: 'all',
+        selectedAgent: 'all',
         selectedModel: 'all',
         timeRange: '15d',
         customStartDate: '',

package/src/hooks/use-auto-prefill-id-zustand.ts

@@ -30,7 +30,7 @@ export function useAutoPrefillIdZustand({
     currentIdValue.current = idValue;
   }, [onIdChange, idValue]);
 
-  // Reset manual edit tracking when switching between graphs
+  // Reset manual edit tracking when switching between agent
   useEffect(() => {
     if (isEditing) {
       hasManuallyEditedId.current = false;

package/src/hooks/use-node-editor.ts

@@ -1,7 +1,7 @@
 import { useReactFlow } from '@xyflow/react';
 import { useCallback, useRef } from 'react';
-import { useGraphActions } from '@/features/graph/state/use-graph-store';
-import type { ErrorHelpers } from './use-graph-errors';
+import { useAgentActions } from '@/features/agent/state/use-agent-store';
+import type { ErrorHelpers } from './use-agent-errors';
 
 interface UseNodeEditorOptions {
   selectedNodeId: string;
@@ -10,7 +10,7 @@ interface UseNodeEditorOptions {
 
 export function useNodeEditor({ selectedNodeId, errorHelpers }: UseNodeEditorOptions) {
   const { updateNodeData } = useReactFlow();
-  const { markUnsaved } = useGraphActions();
+  const { markUnsaved } = useAgentActions();
 
   // Focus management for error fields
   const fieldRefs = useRef<Record<string, HTMLElement>>({});

package/src/hooks/use-side-pane.ts

@@ -1,6 +1,6 @@
 import { parseAsString, parseAsStringLiteral, useQueryStates } from 'nuqs';
 
-const paneType = ['graph', 'node', 'edge'] as const;
+const paneType = ['agent', 'node', 'edge'] as const;
 
 export function useSidePane() {
   const [queryState, setQueryState] = useQueryStates({
@@ -15,6 +15,6 @@ export function useSidePane() {
     edgeId: queryState.edgeId,
     isOpen: Boolean(queryState.pane),
     setQueryState,
-    openGraphPane: () => setQueryState({ pane: 'graph', nodeId: null, edgeId: null }),
+    openAgentPane: () => setQueryState({ pane: 'agent', nodeId: null, edgeId: null }),
   };
 }

package/src/hooks/use-traces.ts

@@ -38,7 +38,7 @@ export interface UseConversationStatsOptions {
     pageSize?: number;
   };
   searchQuery?: string;
-  graphId?: string;
+  agentId?: string;
 }
 
 export function useConversationStats(
@@ -77,7 +77,7 @@ export function useConversationStats(
           options?.projectId,
           paginationParams,
           options?.searchQuery,
-          options?.graphId
+          options?.agentId
         );
 
         if (paginationEnabled && typeof result === 'object' && 'data' in result) {
@@ -105,7 +105,7 @@ export function useConversationStats(
       options?.filters,
       options?.projectId,
       options?.searchQuery,
-      options?.graphId,
+      options?.agentId,
       paginationEnabled,
       pageSize,
       currentPage,
@@ -187,7 +187,7 @@ export function useAggregateStats(options?: {
   endTime?: number;
   filters?: SpanFilterOptions;
   projectId?: string;
-  graphId?: string;
+  agentId?: string;
 }) {
   const [aggregateStats, setAggregateStats] = useState({
     totalToolCalls: 0,
@@ -213,7 +213,7 @@ export function useAggregateStats(options?: {
         currentEndTime,
         options?.filters,
         options?.projectId,
-        options?.graphId
+        options?.agentId
       );
 
       setAggregateStats(stats);
@@ -229,7 +229,7 @@ export function useAggregateStats(options?: {
     options?.endTime,
     options?.filters,
     options?.projectId,
-    options?.graphId,
+    options?.agentId,
   ]);
 
   useEffect(() => {

package/src/lib/README.md

@@ -28,13 +28,13 @@ import {
 } from '@/lib';
 ```
 
-### Create a new graph
+### Create a new agent
 
 ```typescript
 const result = await createFullGraphAction('tenant-123', {
-  id: 'my-graph',
-  name: 'My Customer Service Graph',
-  description: 'A graph for customer service operations',
+  id: 'my-agent',
+  name: 'My Customer Service Agent',
+  description: 'A agent for customer service operations',
   defaultSubAgentId: 'support-agent',
   agents: {
     'support-agent': {
@@ -55,55 +55,55 @@ const result = await createFullGraphAction('tenant-123', {
 });
 
 if (result.success) {
-  console.log('Graph created:', result.data);
+  console.log('Agent created:', result.data);
 } else {
   console.error('Error:', result.error);
 }
 ```
 
-### Get an existing graph
+### Get an existing agent
 
 ```typescript
-const result = await getFullGraphAction('tenant-123', 'my-graph');
+const result = await getFullGraphAction('tenant-123', 'my-agent');
 
 if (result.success) {
-  console.log('Graph retrieved:', result.data);
+  console.log('Agent retrieved:', result.data);
 } else {
   console.error('Error:', result.error);
 }
 ```
 
-### Update a graph
+### Update an agent
 
 ```typescript
 const updatedGraph = {
-  id: 'my-graph',
-  name: 'Updated Customer Service Graph',
+  id: 'my-agent',
+  name: 'Updated Customer Service Agent',
   // ... other properties
 };
 
-const result = await updateFullGraphAction('tenant-123', 'my-graph', updatedGraph);
+const result = await updateFullGraphAction('tenant-123', 'my-agent', updatedGraph);
 
 if (result.success) {
-  console.log('Graph updated:', result.data);
+  console.log('Agent updated:', result.data);
 } else {
   console.error('Error:', result.error);
 }
 ```
 
-### Delete a graph
+### Delete an agent
 
 ```typescript
-const result = await deleteFullGraphAction('tenant-123', 'my-graph');
+const result = await deleteFullGraphAction('tenant-123', 'my-agent');
 
 if (result.success) {
-  console.log('Graph deleted successfully');
+  console.log('Agent deleted successfully');
 } else {
   console.error('Error:', result.error);
 }
 ```
 
-### Validate graph data
+### Validate agent data
 
 Use this for form validation before submitting:
 
@@ -138,9 +138,9 @@ type ActionResult<T = void> = {
 
 The API may return the following error codes:
 
-- `not_found`: Graph not found
+- `not_found`: Agent not found
 - `bad_request`: Invalid request data
 - `internal_server_error`: Server error
-- `conflict`: Graph already exists (on create)
+- `conflict`: Agent already exists (on create)
 - `validation_error`: Client-side validation failed
 - `unknown_error`: Unexpected error occurred