@inkeep/agents-manage-ui 0.18.0 → 0.19.0

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

@@ -1,19 +1,20 @@
 import {
   ArrowRight,
   ArrowUpRight,
-  CheckCircle,
   ChevronDown,
   ChevronRight,
   Cpu,
   Database,
   Hammer,
+  Library,
   Settings,
   Sparkles,
   User,
 } from 'lucide-react';
+import dynamic from 'next/dynamic';
 import { Streamdown } from 'streamdown';
 import { formatDateTime } from '@/app/utils/format-date';
-import { Bubble, CodeBubble } from '@/components/traces/timeline/bubble';
+import { Bubble } from '@/components/traces/timeline/bubble';
 import { Flow } from '@/components/traces/timeline/flow';
 import { TagRow } from '@/components/traces/timeline/tag-row';
 import {
@@ -24,19 +25,25 @@ import {
 } from '@/components/traces/timeline/types';
 import { Badge } from '@/components/ui/badge';
 
+const JsonEditorWithCopy = dynamic(
+  () =>
+    import('@/components/traces/editors/json-editor-with-copy').then(
+      (mod) => mod.JsonEditorWithCopy
+    ),
+  { ssr: false } // ensures it only loads on the client side
+);
+
 function truncateWords(s: string, nWords: number) {
   const words = s.split(/\s+/);
   return words.length > nWords ? `${words.slice(0, nWords).join(' ')}...` : s;
 }
-function truncateChars(s: string, n: number) {
-  return s.length > n ? `${s.slice(0, n)}...` : s;
-}
 
-function _isAiMessage(activity: ActivityItem): boolean {
-  return (
-    activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE ||
-    activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
-  );
+function formatJsonSafely(content: string): string {
+  try {
+    return JSON.stringify(JSON.parse(content), null, 2);
+  } catch {
+    return content;
+  }
 }
 
 function statusIcon(
@@ -56,6 +63,7 @@ function statusIcon(
     transfer: { Icon: ArrowRight, cls: 'text-indigo-500' },
     generic_tool: { Icon: Hammer, cls: 'text-muted-foreground' },
     tool_purpose: { Icon: Hammer, cls: 'text-muted-foreground' },
+    artifact_processing: { Icon: Library, cls: 'text-emerald-600' },
   };
 
   const map = base[type] || base.tool_call;
@@ -203,12 +211,16 @@ export function TimelineItem({
 
           {/* context fetch url */}
           {activity.type === 'context_fetch' && activity.toolResult && (
-            <Bubble className="break-all">{truncateChars(activity.toolResult, 50)}</Bubble>
+            <div className="mb-1">
+              <Badge variant="code" className="break-all">{activity.toolResult}</Badge>
+            </div>
           )}
 
           {/* context resolution URL */}
           {activity.type === 'context_resolution' && activity.contextUrl && (
-            <CodeBubble className=" break-all">{truncateChars(activity.contextUrl, 50)}</CodeBubble>
+            <div className="mb-1">
+              <Badge variant="code" className="break-all">{activity.contextUrl}</Badge>
+            </div>
           )}
 
           {/* delegation flow */}
@@ -245,143 +257,43 @@ export function TimelineItem({
               <Bubble className="line-clamp-2">{activity.toolPurpose}</Bubble>
             )}
 
-          {/* save_tool_result summary */}
-          {activity.type === ACTIVITY_TYPES.TOOL_CALL &&
-            activity.toolName === 'save_tool_result' &&
-            activity.saveResultSaved && (
-              <div className="mt-2 p-3 bg-emerald-50 border border-emerald-200 dark:bg-emerald-900/20 dark:border-emerald-800 rounded-lg max-w-4xl">
-                <div className="flex flex-col gap-2 text-sm text-emerald-900 dark:text-emerald-300">
-                  <div className="flex items-center gap-2 mb-2">
-                    <CheckCircle className="h-4 w-4 text-emerald-600" />
-                    <span className="font-semibold text-emerald-800 dark:text-emerald-400">
-                      Artifact Saved Successfully
-                    </span>
-                  </div>
+          {/* artifact processing */}
+          {activity.type === ACTIVITY_TYPES.ARTIFACT_PROCESSING && (
+            <div className="mt-2 p-3 bg-emerald-50 border border-emerald-200 dark:bg-emerald-900/20 dark:border-emerald-800 rounded-lg max-w-4xl">
+              <div className="flex flex-col gap-2 text-sm text-emerald-900 dark:text-emerald-300">
 
-                  {/* Basic artifact info */}
-                  <div className="space-y-1">
-                    {activity.saveArtifactType &&
-                      TagRow('Type', activity.saveArtifactType, 'emerald')}
-                    {activity.saveArtifactName && (
-                      <div className="flex items-center gap-2">
-                        <span className="font-medium">Name:</span>
-                        <span className="text-emerald-900 dark:text-emerald-300">
-                          {activity.saveArtifactName}
-                        </span>
-                      </div>
-                    )}
-                    {activity.saveArtifactDescription && (
-                      <div className="flex items-start gap-2">
-                        <span className="font-medium">Description:</span>
-                        <span className="text-emerald-900 dark:text-emerald-300">
-                          {activity.saveArtifactDescription}
-                        </span>
-                      </div>
-                    )}
-                    {activity.saveTotalArtifacts && (
-                      <div className="flex items-center gap-2">
-                        <span className="font-medium">Total Artifacts:</span>
-                        <span className="text-emerald-900 dark:text-emerald-300">
-                          {activity.saveTotalArtifacts}
-                        </span>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Technical details */}
-                  {(activity.saveOperationId ||
-                    activity.saveToolCallId ||
-                    activity.saveFunctionId) && (
-                    <div className="mt-2 p-2 bg-white/50 border border-emerald-200 rounded text-xs dark:bg-emerald-950/30 dark:border-emerald-800">
-                      <div className="font-medium text-emerald-800 mb-1 dark:text-emerald-400">
-                        Technical Details:
-                      </div>
-                      <div className="space-y-0.5 text-emerald-700 dark:text-emerald-300">
-                        {activity.saveOperationId && (
-                          <div className="flex items-center gap-2">
-                            <span className="font-medium">Operation ID:</span>
-                            <code className="bg-emerald-100 px-1 rounded dark:bg-emerald-900/50 dark:text-emerald-200">
-                              {activity.saveOperationId}
-                            </code>
-                          </div>
-                        )}
-                        {activity.saveToolCallId && (
-                          <div className="flex items-center gap-2">
-                            <span className="font-medium">Tool Call ID:</span>
-                            <code className="bg-emerald-100 px-1 rounded dark:bg-emerald-900/50 dark:text-emerald-200">
-                              {activity.saveToolCallId}
-                            </code>
-                          </div>
-                        )}
-                        {activity.saveFunctionId && (
-                          <div className="flex items-center gap-2">
-                            <span className="font-medium">Function ID:</span>
-                            <code className="bg-emerald-100 px-1 rounded dark:bg-emerald-900/50 dark:text-emerald-200">
-                              {activity.saveFunctionId}
-                            </code>
-                          </div>
-                        )}
-                      </div>
+                {/* Basic artifact info */}
+                <div className="space-y-1">
+                  {activity.artifactType && TagRow('Type', activity.artifactType, 'emerald')}
+                  {activity.artifactName && (
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium">Name:</span>
+                      <span className="text-emerald-900 dark:text-emerald-300">
+                        {activity.artifactName}
+                      </span>
                     </div>
                   )}
-
-                  {/* Summary data */}
-                  {activity.saveSummaryData && (
-                    <div className="mt-2 p-2 bg-white/70 border border-emerald-200 rounded text-xs dark:bg-emerald-950/30 dark:border-emerald-800">
-                      <div className="font-medium text-emerald-800 mb-1 dark:text-emerald-400">
-                        Summary Data:
-                      </div>
-                      <div className="space-y-0.5 text-emerald-900 dark:text-emerald-300">
-                        {Object.entries(activity.saveSummaryData).map(([k, v]) => (
-                          <div key={k} className="flex items-start gap-2">
-                            <span className="font-medium capitalize">{k}:</span>
-                            <span className="break-all">{String(v)}</span>
-                          </div>
-                        ))}
-                      </div>
+                  {activity.artifactDescription && (
+                    <div className="flex items-start gap-2">
+                      <span className="font-medium">Description:</span>
+                      <span className="text-emerald-900 dark:text-emerald-300">
+                        {activity.artifactDescription}
+                      </span>
                     </div>
                   )}
-
-                  {/* Tool arguments */}
-                  {activity.saveToolArgs && Object.keys(activity.saveToolArgs).length > 0 && (
-                    <div className="mt-2 p-2 bg-white/70 border border-emerald-200 rounded text-xs">
-                      <div className="font-medium text-emerald-800 mb-1">Tool Arguments:</div>
-                      <div className="space-y-0.5 text-emerald-900">
-                        {Object.entries(activity.saveToolArgs).map(([k, v]) => (
-                          <div key={k} className="flex items-start gap-2">
-                            <span className="font-medium">{k}:</span>
-                            <span className="break-all">
-                              {typeof v === 'object' ? JSON.stringify(v, null, 1) : String(v)}
-                            </span>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-
-                  {/* Facts if available */}
-                  {activity.saveFacts && (
-                    <div className="mt-2 p-2 bg-white/70 border border-emerald-200 rounded text-xs dark:bg-emerald-950/30 dark:border-emerald-800">
-                      <div className="font-medium text-emerald-800 mb-1 dark:text-emerald-400">
-                        Facts:
-                      </div>
-                      <div className="text-emerald-900 break-all dark:text-emerald-300">
-                        {activity.saveFacts}
-                      </div>
+                  {activity.artifactData && (
+                    <div className="mt-2">
+                      <JsonEditorWithCopy
+                        value={formatJsonSafely(activity.artifactData)}
+                        title="Artifact data"
+                        uri={`artifact-data-${activity.id}.json`}
+                      />
                     </div>
                   )}
                 </div>
               </div>
-            )}
-
-          {/* save_tool_result not saved */}
-          {activity.type === ACTIVITY_TYPES.TOOL_CALL &&
-            activity.toolName === 'save_tool_result' &&
-            activity.saveResultSaved === false && (
-              <CodeBubble className="bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300">
-                Artifact not saved
-              </CodeBubble>
-            )}
+            </div>
+          )}
 
           {/* agent name for AI generation */}
           {activity.type === ACTIVITY_TYPES.AI_GENERATION && activity.agentName && (

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

@@ -45,6 +45,8 @@ function panelTitle(selected: SelectedPanel) {
       return 'AI Streaming text details';
     case 'mcp_tool_error':
       return 'MCP tool error details';
+    case 'artifact_processing':
+      return 'Artifact details';
     default:
       return 'Details';
   }
@@ -90,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

@@ -21,6 +21,7 @@ export const ACTIVITY_TYPES = {
   USER_MESSAGE: 'user_message',
   AI_ASSISTANT_MESSAGE: 'ai_assistant_message',
   AI_MODEL_STREAMED_TEXT: 'ai_model_streamed_text',
+  ARTIFACT_PROCESSING: 'artifact_processing',
 } as const;
 
 export type ActivityKind = (typeof ACTIVITY_TYPES)[keyof typeof ACTIVITY_TYPES];
@@ -64,7 +65,7 @@ export interface ActivityItem {
   toolType?: string;
   toolPurpose?: string;
   contextConfigId?: string;
-  contextAgentGraphId?: string;
+  contextAgentId?: string;
   contextRequestKeys?: string[];
   contextTrigger?: string;
   contextStatusDescription?: string;
@@ -85,6 +86,14 @@ export interface ActivityItem {
   otelStatusCode?: string;
   otelStatusDescription?: string;
   aiTelemetryFunctionId?: string;
+  // Artifact processing fields
+  artifactId?: string;
+  artifactType?: string;
+  artifactName?: string;
+  artifactDescription?: string;
+  artifactData?: string;
+  artifactAgentId?: string;
+  artifactToolCallId?: string;
 }
 
 export interface ToolCall {
@@ -131,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;

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