@inkeep/agents-manage-ui 0.18.1 → 0.19.0

package/src/components/projects/form/project-models-section.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react';
 import { type Control, useController, useFormState, useWatch } from 'react-hook-form';
 import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
 import { FormFieldWrapper } from '@/components/form/form-field-wrapper';
-import { ModelSelector } from '@/components/graph/sidepane/nodes/model-selector';
+import { ModelSelector } from '@/components/agent/sidepane/nodes/model-selector';
 import { Button } from '@/components/ui/button';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { InfoCard } from '@/components/ui/info-card';
@@ -204,7 +204,7 @@ export function ProjectModelsSection({ control }: ProjectModelsSectionProps) {
       <div>
         <Label className="text-sm font-medium">Default models</Label>
         <p className="text-sm text-muted-foreground mt-1">
-          Set default models that will be inherited by graphs and agents in this project
+          Set default models that will be inherited by agent and agents in this project
         </p>
       </div>
 

package/src/components/projects/form/project-stopwhen-section.tsx

@@ -36,7 +36,7 @@ export function ProjectStopWhenSection({ control }: ProjectStopWhenSectionProps)
       <div>
         <Label className="text-sm font-medium">Execution limits</Label>
         <p className="text-sm text-muted-foreground mt-1">
-          Set default execution limits that will be inherited by graphs and agents in this project
+          Set default execution limits that will be inherited by agent and agents in this project
         </p>
       </div>
 
@@ -63,7 +63,7 @@ export function ProjectStopWhenSection({ control }: ProjectStopWhenSectionProps)
               <GenericInput
                 control={control}
                 name="stopWhen.transferCountIs"
-                description="Maximum number of agent transfers per conversation (graph-level, default: 10)"
+                description="Maximum number of agent transfers per conversation (agent-level, default: 10)"
                 label="Max transfers"
                 type="number"
                 placeholder="10"
@@ -87,8 +87,8 @@ export function ProjectStopWhenSection({ control }: ProjectStopWhenSectionProps)
           <InfoCard title="How inheritance works:" Icon={Info}>
             <ul className="space-y-1.5 list-disc list-outside pl-4">
               <li>
-                <span className="font-medium">transferCountIs</span>: Project → Graph only
-                (graph-level limit)
+                <span className="font-medium">transferCountIs</span>: Project → Agent only
+                (agent-level limit)
               </li>
               <li>
                 <span className="font-medium">stepCountIs</span>: Project → Agent only (agent-level

package/src/components/projects/new-project-dialog.tsx

@@ -37,7 +37,7 @@ export function NewProjectDialog({
 
   const handleSuccess = (projectId: string) => {
     setOpen(false);
-    router.push(`/${tenantId}/projects/${projectId}/graphs`);
+    router.push(`/${tenantId}/projects/${projectId}/agents`);
   };
 
   return (

package/src/components/sidebar-nav/sidebar-nav.tsx

@@ -55,8 +55,8 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
     projectId && projectId !== 'undefined'
       ? [
           {
-            title: 'Graphs',
-            url: `/${tenantId}/projects/${projectId}/graphs`,
+            title: 'Agents',
+            url: `/${tenantId}/projects/${projectId}/agents`,
             icon: Workflow,
           },
           {

package/src/components/traces/ai-calls-breakdown.tsx

@@ -39,17 +39,17 @@ export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
     timeRange,
     customStartDate,
     customEndDate,
-    selectedGraph,
+    selectedAgent,
     selectedModel,
     setTimeRange,
     setCustomDateRange,
-    setGraphFilter,
+    setAgentFilter,
     setModelFilter,
   } = useAICallsQueryState();
   const [agentCalls, setAgentCalls] = useState<
     Array<{
       subAgentId: string;
-      graphId: string;
+      agentId: string;
       modelId: string;
       totalCalls: number;
     }>
@@ -57,7 +57,7 @@ export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
   const [modelCalls, setModelCalls] = useState<Array<{ modelId: string; totalCalls: number }>>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [graphs, setGraphs] = useState<string[]>([]);
+  const [agent, setAgents] = useState<string[]>([]);
   const [models, setModels] = useState<string[]>([]);
 
   // Handle filter changes with nuqs
@@ -123,26 +123,26 @@ export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
 
         const client = getSigNozStatsClient();
 
-        const graphId = selectedGraph === 'all' ? undefined : selectedGraph;
+        const agentId = selectedAgent === 'all' ? undefined : selectedAgent;
         const modelId = selectedModel === 'all' ? undefined : selectedModel;
 
         // Fetch all data in parallel using SigNoz aggregations
-        const [agentData, modelData, uniqueGraphs, uniqueModels] = await Promise.all([
-          client.getAICallsByAgent(
+        const [agentData, modelData, uniqueAgents, uniqueModels] = await Promise.all([
+          client.getAICallsBySubAgent(
             startTime,
             endTime,
-            graphId,
+            agentId,
             modelId,
             params.projectId as string
           ),
-          client.getAICallsByModel(startTime, endTime, graphId, params.projectId as string),
-          client.getUniqueGraphs(startTime, endTime, params.projectId as string),
+          client.getAICallsByModel(startTime, endTime, agentId, params.projectId as string),
+          client.getUniqueAgents(startTime, endTime, params.projectId as string),
           client.getUniqueModels(startTime, endTime, params.projectId as string),
         ]);
 
         setAgentCalls(agentData);
         setModelCalls(modelData);
-        setGraphs(uniqueGraphs);
+        setAgents(uniqueAgents);
         setModels(uniqueModels);
       } catch (err) {
         console.error('Error fetching AI calls data:', err);
@@ -153,7 +153,7 @@ export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
     };
 
     fetchData();
-  }, [selectedGraph, selectedModel, startTime, endTime, params.projectId]);
+  }, [selectedAgent, selectedModel, startTime, endTime, params.projectId]);
 
   const totalAICalls = agentCalls.reduce((sum, item) => sum + item.totalCalls, 0);
 
@@ -196,20 +196,20 @@ export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
         </CardHeader>
         <CardContent className="pt-0">
           <div className="flex flex-col md:flex-row gap-2 md:gap-4 max-w-4xl">
-            {/* Graph Filter */}
+            {/* Agent Filter */}
             <div className="space-y-1 flex-1">
-              <Label htmlFor="graph-filter" className="text-sm">
-                Graph
+              <Label htmlFor="agent-filter" className="text-sm">
+                Agent
               </Label>
-              <Select value={selectedGraph} onValueChange={setGraphFilter}>
-                <SelectTrigger id="graph-filter">
-                  <SelectValue placeholder="Select graph" />
+              <Select value={selectedAgent} onValueChange={setAgentFilter}>
+                <SelectTrigger id="agent-filter">
+                  <SelectValue placeholder="Select agent" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="all">All Graphs</SelectItem>
-                  {graphs.map((graph) => (
-                    <SelectItem key={graph} value={graph}>
-                      {graph}
+                  <SelectItem value="all">All Agent</SelectItem>
+                  {agent.map((agent) => (
+                    <SelectItem key={agent} value={agent}>
+                      {agent}
                     </SelectItem>
                   ))}
                 </SelectContent>
@@ -292,13 +292,13 @@ export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
           {!loading && (
             <div className="mt-3 space-y-1 text-sm text-muted-foreground">
               <div>
-                {selectedGraph === 'all' && selectedModel === 'all'
-                  ? `Showing ${agentCalls.length} agents across all graphs and models`
-                  : selectedGraph === 'all'
-                    ? `Showing agents for all graphs, model: ${selectedModel}`
+                {selectedAgent === 'all' && selectedModel === 'all'
+                  ? `Showing ${agentCalls.length} agents across all agent and models`
+                  : selectedAgent === 'all'
+                    ? `Showing agents for all agent, model: ${selectedModel}`
                     : selectedModel === 'all'
-                      ? `Showing agents for ${selectedGraph}, all models`
-                      : `Showing agents for ${selectedGraph}, model: ${selectedModel}`}
+                      ? `Showing agents for ${selectedAgent}, all models`
+                      : `Showing agents for ${selectedAgent}, model: ${selectedModel}`}
               </div>
               <div className="flex items-center gap-1 text-xs">
                 <Calendar className="h-3 w-3" />
@@ -330,9 +330,9 @@ export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
             </div>
           )}
           <p className="text-xs text-muted-foreground">
-            {selectedGraph === 'all'
+            {selectedAgent === 'all'
               ? `AI calls within conversations across ${agentCalls.length} agents`
-              : `AI calls within conversations for selected graph`}
+              : `AI calls within conversations for selected agent`}
           </p>
         </CardContent>
       </Card>
@@ -369,9 +369,9 @@ export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
                         {agent.subAgentId === UNKNOWN_VALUE ? 'Unknown Agent' : agent.subAgentId}
                       </span>
                       <div className="flex flex-col gap-0.5">
-                        {agent.graphId !== UNKNOWN_VALUE && (
+                        {agent.agentId !== UNKNOWN_VALUE && (
                           <span className="text-xs text-muted-foreground">
-                            Graph: {agent.graphId}
+                            Agent: {agent.agentId}
                           </span>
                         )}
                         {agent.modelId !== UNKNOWN_VALUE && (
@@ -396,9 +396,9 @@ export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
               <Brain className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
               <p className="text-sm text-muted-foreground">No AI calls found</p>
               <p className="text-xs text-muted-foreground/70 mt-1">
-                {selectedGraph === 'all'
+                {selectedAgent === 'all'
                   ? 'No AI calls detected in the selected time range'
-                  : 'No AI calls found for the selected graph'}
+                  : 'No AI calls found for the selected agent'}
               </p>
             </div>
           )}
@@ -454,9 +454,9 @@ export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
               <Cpu className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
               <p className="text-sm text-muted-foreground">No model data found</p>
               <p className="text-xs text-muted-foreground/70 mt-1">
-                {selectedGraph === 'all'
+                {selectedAgent === 'all'
                   ? 'No model data detected in the selected time range'
-                  : 'No model data found for the selected graph'}
+                  : 'No model data found for the selected agent'}
               </p>
             </div>
           )}

package/src/components/traces/conversation-detail.tsx

@@ -108,11 +108,11 @@ export function ConversationDetail({ conversationId, onBack }: ConversationDetai
           </div>
         </div>
         <div className="flex items-center gap-2">
-          {(conversation.graphId || conversation.graphName) && (
+          {(conversation.agentId || conversation.agentName) && (
             <ExternalLink
-              href={`/${tenantId}/projects/${projectId}/graphs/${conversation.graphId}`}
+              href={`/${tenantId}/projects/${projectId}/agents/${conversation.agentId}`}
             >
-              {conversation.graphName ? `${conversation.graphName}` : conversation.graphId}
+              {conversation.agentName ? `${conversation.agentName}` : conversation.agentId}
             </ExternalLink>
           )}
           <SignozLink conversationId={conversationId} />

package/src/components/traces/conversation-stats/conversation-list-item.tsx

@@ -14,8 +14,8 @@ export function ConversationListItem({ conversation, projectId }: ConversationLi
     conversationId,
     firstUserMessage,
     tenantId,
-    graphId,
-    graphName,
+    agentId,
+    agentName,
     hasErrors,
     totalErrors,
     toolsUsed,
@@ -92,7 +92,7 @@ export function ConversationListItem({ conversation, projectId }: ConversationLi
               </Badge>
             )}
             <Badge variant="code" className="text-xs">
-              {graphName ? `${graphName} (${graphId})` : graphId}
+              {agentName ? `${agentName} (${agentId})` : agentId}
             </Badge>
           </div>
         </div>

package/src/components/traces/filters/{graph-filter.tsx → agent-filter.tsx}

@@ -4,47 +4,47 @@ import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import type { OptionType } from '@/components/ui/combobox';
 import { Combobox } from '@/components/ui/combobox';
-import { getAllGraphsAction } from '@/lib/actions/graph-full';
+import { getAllAgentsAction } from '@/lib/actions/agent-full';
 import { FilterTriggerComponent } from './filter-trigger';
 
-interface GraphFilterProps {
+interface AgentFilterProps {
   onSelect: (value: string | undefined) => void;
   selectedValue: string | undefined;
 }
 
-export const GraphFilter = ({ onSelect, selectedValue }: GraphFilterProps) => {
+export const AgentFilter = ({ onSelect, selectedValue }: AgentFilterProps) => {
   const { tenantId, projectId } = useParams() as {
     tenantId: string;
     projectId: string;
   };
-  const [graphOptions, setGraphOptions] = useState<OptionType[]>([]);
+  const [agentOptions, setAgentOptions] = useState<OptionType[]>([]);
   const [loading, setLoading] = useState(true);
   useEffect(() => {
     let cancelled = false;
-    const fetchGraphs = async () => {
+    const fetchAgents = async () => {
       try {
         setLoading(true);
-        const response = await getAllGraphsAction(tenantId, projectId);
+        const response = await getAllAgentsAction(tenantId, projectId);
         if (!cancelled && response.success) {
-          setGraphOptions(
-            response.data?.map((graph) => ({
-              value: graph.id,
-              label: graph.name,
-              searchBy: graph.name,
+          setAgentOptions(
+            response.data?.map((agent) => ({
+              value: agent.id,
+              label: agent.name,
+              searchBy: agent.name,
             })) || []
           );
         }
       } catch (error) {
         if (!cancelled) {
-          console.error('Failed to fetch graphs:', error);
-          setGraphOptions([]);
+          console.error('Failed to fetch agent:', error);
+          setAgentOptions([]);
         }
       } finally {
         if (!cancelled) setLoading(false);
       }
     };
 
-    fetchGraphs();
+    fetchAgents();
     return () => {
       cancelled = true;
     };
@@ -52,21 +52,21 @@ export const GraphFilter = ({ onSelect, selectedValue }: GraphFilterProps) => {
   return (
     <Combobox
       defaultValue={selectedValue}
-      notFoundMessage={'No graphs found'}
+      notFoundMessage={'No agent found'}
       onSelect={(value) => {
         onSelect(value);
       }}
-      options={graphOptions}
+      options={agentOptions}
       TriggerComponent={
         <FilterTriggerComponent
           disabled={loading}
-          filterLabel={'Graph'}
+          filterLabel={'Agent'}
           isRemovable={true}
           onDeleteFilter={() => {
             onSelect(undefined);
           }}
           multipleCheckboxValues={selectedValue ? [selectedValue] : []}
-          options={graphOptions}
+          options={agentOptions}
         />
       }
     />

package/src/components/traces/filters/span-filters.tsx

@@ -23,7 +23,7 @@ interface SpanFiltersProps {
   updateAttribute: (index: number, field: 'key' | 'value' | 'operator', value: string) => void;
   isNumeric: (value: string) => boolean;
   spanNamesLoading: boolean;
-  selectedGraph?: string;
+  selectedAgent?: string;
 }
 
 export function SpanFilters({
@@ -36,7 +36,7 @@ export function SpanFilters({
   updateAttribute,
   isNumeric,
   spanNamesLoading,
-  selectedGraph,
+  selectedAgent,
 }: SpanFiltersProps) {
   const totalFilters = attributes.length + (spanName ? 1 : 0);
   return (
@@ -100,13 +100,13 @@ export function SpanFilters({
               )}
               {!spanNamesLoading && availableSpanNames.length === 0 && (
                 <p className="text-xs text-muted-foreground">
-                  No span names found in {selectedGraph ? `graph "${selectedGraph}"` : 'any graph'}.
+                  No span names found in {selectedAgent ? `agent "${selectedAgent}"` : 'any agent'}.
                   You can type a custom span name above.
                 </p>
               )}
-              {!spanNamesLoading && availableSpanNames.length > 0 && selectedGraph && (
+              {!spanNamesLoading && availableSpanNames.length > 0 && selectedAgent && (
                 <p className="text-xs text-muted-foreground">
-                  Showing span names from graph "{selectedGraph}" only
+                  Showing span names from agent "{selectedAgent}" only
                 </p>
               )}
             </div>

package/src/components/traces/timeline/render-panel-content.tsx

@@ -10,8 +10,8 @@ import {
   StatusBadge,
 } from '@/components/traces/timeline/blocks';
 import { Bubble, CodeBubble } from '@/components/traces/timeline/bubble';
-import type { ConversationDetail, SelectedPanel } from '@/components/traces/timeline/types';
 import { SpanAttributes } from '@/components/traces/timeline/span-attributes';
+import type { ConversationDetail, SelectedPanel } from '@/components/traces/timeline/types';
 import { Badge } from '@/components/ui/badge';
 
 const JsonEditorWithCopy = dynamic(
@@ -154,7 +154,10 @@ export function renderPanelContent({
       return (
         <>
           <Section>
-            <Info label="Message content" value={a.messageContent || 'Message content not available'} />
+            <Info
+              label="Message content"
+              value={a.messageContent || 'Message content not available'}
+            />
             <StatusBadge status={a.status} />
             <Info label="Timestamp" value={formatDateTime(a.timestamp)} />
           </Section>
@@ -198,11 +201,9 @@ export function renderPanelContent({
       return (
         <>
           <Section>
-            {a.contextAgentGraphId && (
-              <LabeledBlock label="Agent graph id">
-                <Badge variant="code">
-                  {a.contextAgentGraphId}
-                </Badge>
+            {a.contextAgentId && (
+              <LabeledBlock label="Agent id">
+                <Badge variant="code">{a.contextAgentId}</Badge>
               </LabeledBlock>
             )}
             {a.contextTrigger && <Info label="Trigger" value={a.contextTrigger} />}
@@ -231,8 +232,8 @@ export function renderPanelContent({
       return (
         <>
           <Section>
-              <Info label="From agent" value={a.delegationFromAgentId || 'Unknown Agent'} />
-              <Info label="To agent" value={a.delegationToAgentId || 'Unknown Agent'} />
+            <Info label="From agent" value={a.delegationFromAgentId || 'Unknown Agent'} />
+            <Info label="To agent" value={a.delegationToAgentId || 'Unknown Agent'} />
             <Info
               label="Tool name"
               value={<Badge variant="code">{a.toolName || 'Unknown Tool'}</Badge>}
@@ -414,25 +415,16 @@ export function renderPanelContent({
               />
             )}
             <StatusBadge status={a.status} />
-            {a.artifactAgentId && <Info label="Agent" value={a.artifactAgentId || 'Unknown Agent'} />}
+            {a.artifactAgentId && (
+              <Info label="Agent" value={a.artifactAgentId || 'Unknown Agent'} />
+            )}
             {a.artifactId && (
-              <Info
-                label="Artifact ID"
-                value={
-                  <Badge variant="code">
-                    {a.artifactId}
-                  </Badge>
-                }
-              />
+              <Info label="Artifact ID" value={<Badge variant="code">{a.artifactId}</Badge>} />
             )}
             {a.artifactToolCallId && (
               <Info
                 label="Tool call ID"
-                value={
-                  <Badge variant="code">
-                    {a.artifactToolCallId}
-                  </Badge>
-                }
+                value={<Badge variant="code">{a.artifactToolCallId}</Badge>}
               />
             )}
             <Info label="Timestamp" value={formatDateTime(a.timestamp)} />

package/src/components/traces/timeline/span-attributes.tsx

@@ -20,7 +20,7 @@ const PINNED_ATTRIBUTE_KEYS = [
   'traceID',
   'tenant.id',
   'project.id',
-  'graph.id',
+  'agent.id',
   'conversation.id',
 ] as const;
 

package/src/components/traces/timeline/timeline-wrapper.tsx

@@ -92,7 +92,7 @@ function EmptyTimeline({
                 <ExternalLink
                   className="text-amber-700 dark:text-amber-300 dark:hover:text-amber-200 ml-0 mt-1"
                   iconClassName="text-amber-700 dark:text-amber-300 dark:group-hover/link:text-amber-200"
-                  href={`${DOCS_BASE_URL}/visual-builder/graphs`}
+                  href={`${DOCS_BASE_URL}/visual-builder/agent`}
                 >
                   Learn more
                 </ExternalLink>

package/src/components/traces/timeline/types.ts

@@ -65,7 +65,7 @@ export interface ActivityItem {
   toolType?: string;
   toolPurpose?: string;
   contextConfigId?: string;
-  contextAgentGraphId?: string;
+  contextAgentId?: string;
   contextRequestKeys?: string[];
   contextTrigger?: string;
   contextStatusDescription?: string;
@@ -140,8 +140,8 @@ export interface ConversationDetail {
   totalInputTokens?: number;
   totalOutputTokens?: number;
   traceId?: string;
-  graphId?: string;
-  graphName?: string;
+  agentId?: string;
+  agentName?: string;
   spansWithErrorsCount?: number;
   errorCount?: number;
   warningCount?: number;