@inkeep/agents-manage-ui 0.18.1 → 0.19.0

package/src/components/traces/traces-overview.tsx

@@ -14,7 +14,7 @@ import { AreaChartCard } from './charts/area-chart-card';
 import { StatCard } from './charts/stat-card';
 import { ConversationStatsCard } from './conversation-stats/conversation-stats-card';
 import { CUSTOM, DatePickerWithPresets } from './filters/date-picker';
-import { GraphFilter } from './filters/graph-filter';
+import { AgentFilter } from './filters/agent-filter';
 import { SpanFilters } from './filters/span-filters';
 import { DOCS_BASE_URL } from '@/constants/page-descriptions';
 
@@ -48,14 +48,14 @@ export function TracesOverview({ refreshKey }: TracesOverviewProps) {
   // Check if Signoz is configured
   const { isLoading: isSignozConfigLoading, configError: signozConfigError } = useSignozConfig();
 
-  const [selectedGraph, setSelectedGraph] = useState<string | undefined>(undefined);
+  const [selectedAgent, setSelectedAgent] = useState<string | undefined>(undefined);
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [debouncedSearchQuery, setDebouncedSearchQuery] = useState<string>('');
   const [availableSpanNames, setAvailableSpanNames] = useState<string[]>([]);
   const [spanNamesLoading, setSpanNamesLoading] = useState(false);
   // Aggregate stats now come from useAggregateStats hook
-  const [aiCallsByGraph, setAiCallsByGraph] = useState<
-    Array<{ graphId: string; totalCalls: number }>
+  const [aiCallsByAgent, setAiCallsByAgent] = useState<
+    Array<{ agentId: string; totalCalls: number }>
   >([]);
   const [_aiCallsLoading, setAiCallsLoading] = useState(true);
   const [activityData, setActivityData] = useState<Array<{ date: string; count: number }>>([]);
@@ -133,7 +133,7 @@ export function TracesOverview({ refreshKey }: TracesOverviewProps) {
     endTime,
     filters: spanFilters,
     projectId: projectId as string,
-    graphId: selectedGraph,
+    agentId: selectedAgent,
   });
 
   // Get paginated conversations for the list display
@@ -144,7 +144,7 @@ export function TracesOverview({ refreshKey }: TracesOverviewProps) {
     projectId: projectId as string,
     searchQuery: debouncedSearchQuery,
     pagination: { enabled: true, pageSize: 10 },
-    graphId: selectedGraph,
+    agentId: selectedAgent,
   });
 
   // Server-side pagination is now handled by the hook
@@ -159,22 +159,22 @@ export function TracesOverview({ refreshKey }: TracesOverviewProps) {
 
   // Aggregate stats now come directly from server-side aggregation
 
-  // Fetch AI calls by graph
+  // Fetch AI calls by agent
   useEffect(() => {
-    const fetchAICallsByGraph = async () => {
+    const fetchAICallsByAgent = async () => {
       try {
         setAiCallsLoading(true);
         const client = getSigNozStatsClient();
-        const aiCallsData = await client.getAICallsByGraph(startTime, endTime, projectId as string);
-        setAiCallsByGraph(aiCallsData);
+        const aiCallsData = await client.getAICallsByAgent(startTime, endTime, projectId as string);
+        setAiCallsByAgent(aiCallsData);
       } catch (err) {
-        console.error('Error fetching AI calls by graph:', err);
+        console.error('Error fetching AI calls by agent:', err);
       } finally {
         setAiCallsLoading(false);
       }
     };
 
-    fetchAICallsByGraph();
+    fetchAICallsByAgent();
   }, [startTime, endTime, projectId]);
 
   // Fetch conversations per day activity
@@ -183,17 +183,17 @@ export function TracesOverview({ refreshKey }: TracesOverviewProps) {
       try {
         setActivityLoading(true);
         const client = getSigNozStatsClient();
-        const graphId = selectedGraph ? selectedGraph : undefined;
+        const agentId = selectedAgent ? selectedAgent : undefined;
         console.log('🔍 Fetching activity data:', {
           startTime,
           endTime,
-          graphId,
-          selectedGraph,
+          agentId,
+          selectedAgent,
         });
         const data = await client.getConversationsPerDay(
           startTime,
           endTime,
-          graphId,
+          agentId,
           projectId as string
         );
         console.log('🔍 Activity data received:', data);
@@ -208,9 +208,9 @@ export function TracesOverview({ refreshKey }: TracesOverviewProps) {
     if (startTime && endTime) {
       fetchActivity();
     }
-  }, [startTime, endTime, selectedGraph, projectId]);
+  }, [startTime, endTime, selectedAgent, projectId]);
 
-  // Fetch available span names when time range or selected graph changes
+  // Fetch available span names when time range or selected agent changes
   useEffect(() => {
     const fetchSpanNames = async () => {
       if (!startTime || !endTime) return;
@@ -221,7 +221,7 @@ export function TracesOverview({ refreshKey }: TracesOverviewProps) {
         const spanNames = await client.getAvailableSpanNames(
           startTime,
           endTime,
-          selectedGraph,
+          selectedAgent,
           projectId as string
         );
         setAvailableSpanNames(spanNames);
@@ -237,19 +237,19 @@ export function TracesOverview({ refreshKey }: TracesOverviewProps) {
     if (startTime && endTime) {
       fetchSpanNames();
     }
-  }, [startTime, endTime, selectedGraph, projectId]);
+  }, [startTime, endTime, selectedAgent, projectId]);
 
-  // Filter stats based on selected graph (for aggregate calculations)
+  // Filter stats based on selected agent (for aggregate calculations)
   // Server-side pagination and filtering is now handled by the hooks
 
-  // Get AI calls for selected graph
-  const selectedGraphAICalls = useMemo(() => {
-    if (!selectedGraph) {
+  // Get AI calls for selected agent
+  const selectedAgentAICalls = useMemo(() => {
+    if (!selectedAgent) {
       return aggregateStats.totalAICalls;
     }
-    const graphAICalls = aiCallsByGraph.find((ac) => ac.graphId === selectedGraph);
-    return graphAICalls?.totalCalls || 0;
-  }, [selectedGraph, aiCallsByGraph, aggregateStats.totalAICalls]);
+    const agentAICalls = aiCallsByAgent.find((ac) => ac.agentId === selectedAgent);
+    return agentAICalls?.totalCalls || 0;
+  }, [selectedAgent, aiCallsByAgent, aggregateStats.totalAICalls]);
 
   if (error) {
     return (
@@ -324,8 +324,8 @@ export function TracesOverview({ refreshKey }: TracesOverviewProps) {
       )}
 
       <div className="flex items-center gap-4">
-        {/* Graph Filter */}
-        <GraphFilter onSelect={setSelectedGraph} selectedValue={selectedGraph} />
+        {/* Agent Filter */}
+        <AgentFilter onSelect={setSelectedAgent} selectedValue={selectedAgent} />
         {/* Time Range Filter */}
         <DatePickerWithPresets
           label="Time range"
@@ -356,7 +356,7 @@ export function TracesOverview({ refreshKey }: TracesOverviewProps) {
           updateAttribute={updateAttribute}
           isNumeric={isNumeric}
           spanNamesLoading={spanNamesLoading}
-          selectedGraph={selectedGraph}
+          selectedAgent={selectedAgent}
         />
       </div>
 
@@ -427,7 +427,7 @@ export function TracesOverview({ refreshKey }: TracesOverviewProps) {
             {/* AI Usage */}
             <StatCard
               title="AI calls"
-              stat={selectedGraphAICalls}
+              stat={selectedAgentAICalls}
               statDescription={`Over ${aggregateStats.totalConversations} conversations`}
               isLoading={aggregateLoading}
               Icon={SparklesIcon}

package/src/components/ui/inheritance-indicator.tsx

@@ -7,7 +7,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 export interface InheritanceIndicatorProps {
   /** Whether this value is explicitly set (not inherited) */
   isExplicit?: boolean;
-  /** The source of inheritance (e.g., "Project", "Graph") */
+  /** The source of inheritance (e.g., "Project", "Agent") */
   inheritedFrom?: string;
   /** Additional tooltip information */
   tooltip?: string;
@@ -104,7 +104,7 @@ export function InheritanceIndicator({
 
 // Helper function to determine inheritance status for models
 export function getModelInheritanceStatus(
-  currentLevel: 'project' | 'graph' | 'agent',
+  currentLevel: 'project' | 'agent' | 'subagent',
   currentValue: any,
   parentValue: any,
   grandparentValue?: any
@@ -123,7 +123,7 @@ export function getModelInheritanceStatus(
   // This handles the case where the builder resolves inheritance and stores the actual values
   if (currentLevel !== 'project') {
     if (hasCurrentValue && hasParentValue && currentValue === parentValue) {
-      const inheritedFromLevel = currentLevel === 'agent' ? 'Graph' : 'Project';
+      const inheritedFromLevel = currentLevel === 'agent' ? 'Agent' : 'Project';
       return {
         isExplicit: false,
         inheritedFrom: inheritedFromLevel,
@@ -131,7 +131,7 @@ export function getModelInheritanceStatus(
       };
     }
 
-    // For agent level: also check if it matches grandparent (when graph doesn't have it set)
+    // For agent level: also check if it matches grandparent (when agent doesn't have it set)
     if (
       currentLevel === 'agent' &&
       hasCurrentValue &&
@@ -157,12 +157,12 @@ export function getModelInheritanceStatus(
 
   // No current value - show what would be inherited
   switch (currentLevel) {
-    case 'agent':
+    case 'subagent':
       if (hasParentValue) {
         return {
           isExplicit: false,
-          inheritedFrom: 'Graph',
-          tooltip: 'Will inherit from the graph level',
+          inheritedFrom: 'Agent',
+          tooltip: 'Will inherit from the agent level',
         };
       }
       if (hasGrandparentValue) {
@@ -173,8 +173,7 @@ export function getModelInheritanceStatus(
         };
       }
       break;
-
-    case 'graph':
+    case 'agent':
       if (hasParentValue) {
         return {
           isExplicit: false,
@@ -198,7 +197,7 @@ export function getModelInheritanceStatus(
 
 // Helper function for execution limits inheritance
 export function getExecutionLimitInheritanceStatus(
-  currentLevel: 'project' | 'graph' | 'agent',
+  currentLevel: 'project' | 'agent' | 'agent',
   limitType: 'transferCountIs' | 'stepCountIs',
   currentValue: any,
   parentValue: any
@@ -213,7 +212,7 @@ export function getExecutionLimitInheritanceStatus(
   // Check if current value matches parent value (indicating inheritance after builder resolution)
   if (hasCurrentValue && hasParentValue && currentValue === parentValue) {
     // Inheritance rules for execution limits
-    if (limitType === 'transferCountIs' && currentLevel === 'graph') {
+    if (limitType === 'transferCountIs' && currentLevel === 'agent') {
       return {
         isExplicit: false,
         inheritedFrom: 'Project',
@@ -239,8 +238,8 @@ export function getExecutionLimitInheritanceStatus(
 
   // No current value - check what would be inherited
   if (limitType === 'transferCountIs') {
-    // transferCountIs: Project → Graph only
-    if (currentLevel === 'graph' && hasParentValue) {
+    // transferCountIs: Project → Agent only
+    if (currentLevel === 'agent' && hasParentValue) {
       return {
         isExplicit: false,
         inheritedFrom: 'Project',

package/src/constants/page-descriptions.tsx

@@ -21,18 +21,18 @@ export const dataComponentDescription = (
   </>
 );
 
-export const graphDescription = (
+export const agentDescription = (
   <>
-    Graphs are visual representations of the data flow between agents and tools.
+    Agents are visual representations of the data flow between agents and tools.
     {'\n'}
-    <ExternalLink href={`${DOCS_BASE_URL}/visual-builder/graphs`}>Learn more</ExternalLink>
+    <ExternalLink href={`${DOCS_BASE_URL}/visual-builder/agent`}>Learn more</ExternalLink>
   </>
 );
 
 export const apiKeyDescription = (
   <>
     API keys are use to authenticate against the Inkeep Agents Run API. They are associated with a
-    graph and can be used to chat with the graph programmatically.
+    agent and can be used to chat with the agent programmatically.
     {'\n'}
   </>
 );

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);
   });