@inkeep/agents-manage-ui 0.18.0 → 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-sandbox-section.tsx

@@ -17,8 +17,7 @@ interface ProjectSandboxSectionProps {
 
 const providerOptions = [
   { value: 'local', label: 'Local' },
-  { value: 'vercel', label: 'Vercel' },
-  { value: 'daytona', label: 'Daytona' },
+  // { value: 'vercel', label: 'Vercel' },
 ];
 
 const runtimeOptions = [
@@ -122,14 +121,10 @@ export function ProjectSandboxSection({ control }: ProjectSandboxSectionProps) {
                 <strong>Local:</strong> Functions run in your local environment with full access to
                 system resources.
               </p>
-              <p>
+              {/* <p>
                 <strong>Vercel:</strong> Functions run on Vercel's serverless platform with
                 automatic scaling.
-              </p>
-              <p>
-                <strong>Daytona:</strong> Functions run in isolated development environments with
-                persistent storage.
-              </p>
+              </p> */}
             </div>
           </InfoCard>
         </CollapsibleContent>

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,10 +154,10 @@ export function renderPanelContent({
       return (
         <>
           <Section>
-            <LabeledBlock label="Message content">
-              <Bubble>{a.messageContent || 'Message content not available'}</Bubble>
-            </LabeledBlock>
-            <Info label="Message length" value={`${a.messageContent?.length || 0} characters`} />
+            <Info
+              label="Message content"
+              value={a.messageContent || 'Message content not available'}
+            />
             <StatusBadge status={a.status} />
             <Info label="Timestamp" value={formatDateTime(a.timestamp)} />
           </Section>
@@ -179,7 +179,6 @@ export function renderPanelContent({
             <Info label="Agent" value={a.agentName || 'Unknown'} />
             <StatusBadge status={a.status} />
             <Info label="Activity timestamp" value={formatDateTime(a.timestamp)} />
-            <Info label="Message id" value={<Badge variant="code">{a.id}</Badge>} />
           </Section>
           <Divider />
           {SignozButton}
@@ -202,9 +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} />}
@@ -233,18 +232,8 @@ export function renderPanelContent({
       return (
         <>
           <Section>
-            <LabeledBlock label="From agent">
-              <Badge variant="code">
-                {a.delegationFromAgentId || a.agentName || 'Unknown Agent'}
-              </Badge>
-            </LabeledBlock>
-            <LabeledBlock label="To agent">
-              <Badge variant="code">
-                {a.delegationToAgentId ||
-                  a.toolName?.replace('delegate_to_', '') ||
-                  'Unknown Target'}
-              </Badge>
-            </LabeledBlock>
+            <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>}
@@ -328,9 +317,7 @@ export function renderPanelContent({
                 </Badge>
               </LabeledBlock>
             )}
-            <LabeledBlock label="Purpose">
-              <Bubble className="b">{a.toolPurpose || 'No purpose information available'}</Bubble>
-            </LabeledBlock>
+            <Info label="Purpose" value={a.toolPurpose || 'No purpose information available'} />
             <Info label="Agent" value={a.agentName || 'Unknown agent'} />
             <StatusBadge status={a.status} />
             {a.toolCallArgs && (
@@ -413,6 +400,41 @@ export function renderPanelContent({
         </>
       );
 
+    case 'artifact_processing':
+      return (
+        <>
+          <Section>
+            {a.artifactName && <Info label="Name" value={a.artifactName} />}
+            {a.artifactType && <Info label="Type" value={a.artifactType} />}
+            {a.artifactDescription && <Info label="Description" value={a.artifactDescription} />}
+            {a.artifactData && (
+              <JsonEditorWithCopy
+                value={formatJsonSafely(a.artifactData)}
+                title="Artifact data"
+                uri="artifact-data.json"
+              />
+            )}
+            <StatusBadge status={a.status} />
+            {a.artifactAgentId && (
+              <Info label="Agent" value={a.artifactAgentId || 'Unknown Agent'} />
+            )}
+            {a.artifactId && (
+              <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>}
+              />
+            )}
+            <Info label="Timestamp" value={formatDateTime(a.timestamp)} />
+          </Section>
+          <Divider />
+          {SignozButton}
+          {AdvancedBlock}
+        </>
+      );
+
     default:
       return null;
   }

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;