@inkeep/agents-manage-ui 0.8.7 → 0.10.1

package/src/components/graph/graph.tsx

@@ -41,40 +41,20 @@ import { detectOrphanedToolsAndGetWarning } from '@/lib/utils/orphaned-tools-det
 
 // Type for agent tool configuration lookup including both selection and headers
 export type AgentToolConfig = {
+  toolId: string;
   toolSelection?: string[];
   headers?: Record<string, string>;
 };
 
+// AgentToolConfigLookup: agentId -> relationshipId -> config
 export type AgentToolConfigLookup = Record<string, Record<string, AgentToolConfig>>;
 
-// Utility function to derive selectedToolsLookup from agentToolConfigLookup
-export function getSelectedToolsLookup(
-  agentToolConfigLookup: AgentToolConfigLookup
-): Record<string, Record<string, string[]>> {
-  const selectedToolsLookup: Record<string, Record<string, string[]>> = {};
-
-  Object.entries(agentToolConfigLookup).forEach(([agentId, toolsMap]) => {
-    const selectedToolsMap: Record<string, string[]> = {};
-
-    Object.entries(toolsMap).forEach(([toolId, config]) => {
-      if (config.toolSelection) {
-        selectedToolsMap[toolId] = config.toolSelection;
-      }
-    });
-
-    if (Object.keys(selectedToolsMap).length > 0) {
-      selectedToolsLookup[agentId] = selectedToolsMap;
-    }
-  });
-
-  return selectedToolsLookup;
-}
-
 import { EdgeType, edgeTypes, initialEdges } from './configuration/edge-types';
 import {
   agentNodeSourceHandleId,
   agentNodeTargetHandleId,
   externalAgentNodeTargetHandleId,
+  type MCPNodeData,
   mcpNodeHandleId,
   NodeType,
   newNodeDefaults,
@@ -175,19 +155,20 @@ function Flow({
       if ('canUse' in agentData && agentData.canUse) {
         const toolsMap: Record<string, AgentToolConfig> = {};
         agentData.canUse.forEach((tool) => {
-          const config: AgentToolConfig = {};
+          if (tool.agentToolRelationId) {
+            const config: AgentToolConfig = {
+              toolId: tool.toolId,
+            };
 
-          if (tool.toolSelection) {
-            config.toolSelection = tool.toolSelection;
-          }
+            if (tool.toolSelection) {
+              config.toolSelection = tool.toolSelection;
+            }
 
-          if (tool.headers) {
-            config.headers = tool.headers;
-          }
+            if (tool.headers) {
+              config.headers = tool.headers;
+            }
 
-          // Only add to map if we have either toolSelection or headers
-          if (config.toolSelection || config.headers) {
-            toolsMap[tool.toolId] = config;
+            toolsMap[tool.agentToolRelationId] = config;
           }
         });
         if (Object.keys(toolsMap).length > 0) {
@@ -198,7 +179,7 @@ function Flow({
     return lookup;
   }, [graph?.agents]);
 
-  const { screenToFlowPosition } = useReactFlow();
+  const { screenToFlowPosition, updateNodeData, fitView } = useReactFlow();
   const {
     nodes: storeNodes,
     edges,
@@ -212,7 +193,6 @@ function Flow({
     markSaved,
     clearSelection,
     markUnsaved,
-    selectedToolsLookup,
   } = useGraphStore();
 
   // Always use enriched nodes for ReactFlow
@@ -229,7 +209,7 @@ function Flow({
       dataComponentLookup,
       artifactComponentLookup,
       toolLookup,
-      getSelectedToolsLookup(agentToolConfigLookup)
+      agentToolConfigLookup
     );
   }, []);
 
@@ -279,6 +259,28 @@ function Flow({
     }
   }, []);
 
+  // Auto-center graph when sidepane opens/closes
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we want to trigger on isOpen changes
+  useEffect(() => {
+    // Delay to allow CSS transition to complete (300ms transition + 50ms buffer)
+    const timer = setTimeout(() => {
+      fitView({ maxZoom: 1, duration: 200 });
+    }, 350);
+
+    return () => clearTimeout(timer);
+  }, [isOpen, fitView]);
+
+  // Auto-center graph when playground opens/closes
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we want to trigger on showPlayground changes
+  useEffect(() => {
+    // Delay to allow CSS transition to complete
+    const timer = setTimeout(() => {
+      fitView({ maxZoom: 1, duration: 200 });
+    }, 350);
+
+    return () => clearTimeout(timer);
+  }, [showPlayground, fitView]);
+
   // biome-ignore lint/correctness/useExhaustiveDependencies: we only want to add/connect edges once
   const onConnectWrapped = useCallback((params: Connection) => {
     markUnsaved();
@@ -337,6 +339,22 @@ function Flow({
       };
     }
 
+    // Update MCP node agentId when connecting agent to MCP tool
+    if (
+      targetHandle === mcpNodeHandleId &&
+      (sourceHandle === agentNodeSourceHandleId || sourceHandle === agentNodeTargetHandleId)
+    ) {
+      const targetNode = nodes.find((n) => n.id === params.target);
+      if (targetNode && targetNode.type === NodeType.MCP) {
+        const agentId = params.source;
+        updateNodeData(targetNode.id, {
+          ...targetNode.data,
+          agentId,
+          relationshipId: null, // Will be set after saving to database
+        });
+      }
+    }
+
     requestAnimationFrame(() => {
       commandManager.execute(
         new AddPreparedEdgeCommand(newEdge, { deselectOtherEdgesIfA2A: true })
@@ -494,7 +512,11 @@ function Flow({
 
   const onSubmit = useCallback(async () => {
     // Check for orphaned tools before saving
-    const warningMessage = detectOrphanedToolsAndGetWarning(nodes, selectedToolsLookup, toolLookup);
+    const warningMessage = detectOrphanedToolsAndGetWarning(
+      nodes,
+      agentToolConfigLookup,
+      toolLookup
+    );
 
     if (warningMessage) {
       toast.warning(warningMessage, {
@@ -526,6 +548,54 @@ function Flow({
         closeButton: true,
       });
       markSaved();
+
+      // Update MCP nodes with new relationshipIds from backend response
+      if (res.data) {
+        // Create a map to track which relationships were processed
+        const processedRelationships = new Set<string>();
+
+        // Update nodes with the new relationshipIds
+        setNodes((currentNodes) =>
+          currentNodes.map((node) => {
+            if (node.type === NodeType.MCP) {
+              const mcpNode = node as Node & { data: MCPNodeData };
+              if (mcpNode.data.agentId && mcpNode.data.toolId) {
+                // If node already has a relationshipId, keep it (it's an existing relationship)
+                if (mcpNode.data.relationshipId) {
+                  return node;
+                }
+
+                // For new nodes (relationshipId is null), find the first unprocessed relationship
+                // that matches this agent and tool
+                const agentId = mcpNode.data.agentId;
+                const toolId = mcpNode.data.toolId;
+
+                if ('canUse' in res.data.agents[agentId] && res.data.agents[agentId].canUse) {
+                  const matchingRelationship = res.data.agents[agentId].canUse.find(
+                    (tool: any) =>
+                      tool.toolId === toolId &&
+                      tool.agentToolRelationId &&
+                      !processedRelationships.has(tool.agentToolRelationId)
+                  );
+
+                  if (matchingRelationship?.agentToolRelationId) {
+                    processedRelationships.add(matchingRelationship.agentToolRelationId);
+                    return {
+                      ...node,
+                      data: {
+                        ...node.data,
+                        relationshipId: matchingRelationship.agentToolRelationId,
+                      },
+                    };
+                  }
+                }
+              }
+            }
+            return node;
+          })
+        );
+      }
+
       if (!graph?.id && res.data?.id) {
         setMetadata('id', res.data.id);
         router.push(`/${tenantId}/projects/${projectId}/graphs/${res.data.id}`);
@@ -553,13 +623,13 @@ function Flow({
     artifactComponentLookup,
     markSaved,
     setMetadata,
+    setNodes,
     router,
     graph?.id,
     tenantId,
     projectId,
     clearErrors,
     setErrors,
-    selectedToolsLookup,
     agentToolConfigLookup,
     toolLookup,
   ]);
@@ -636,6 +706,7 @@ function Flow({
           projectId={projectId}
           tenantId={tenantId}
           setShowPlayground={setShowPlayground}
+          closeSidePane={closeSidePane}
         />
       )}
     </div>

package/src/components/graph/nodes/mcp-node.tsx

@@ -11,7 +11,8 @@ import { Handle } from './handle';
 export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
   const { data, selected } = props;
   const toolLookup = useGraphStore((state) => state.toolLookup);
-  const selectedToolsLookup = useGraphStore((state) => state.selectedToolsLookup);
+  const agentToolConfigLookup = useGraphStore((state) => state.agentToolConfigLookup);
+  const edges = useGraphStore((state) => state.edges);
 
   const name = data.name || `Tool: ${data.toolId}`;
   const imageUrl = data.imageUrl;
@@ -25,7 +26,7 @@ export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
     activeTools: toolData?.config?.mcp?.activeTools,
   });
 
-  const selectedTools = getCurrentSelectedToolsForNode(props, selectedToolsLookup);
+  const selectedTools = getCurrentSelectedToolsForNode(props, agentToolConfigLookup, edges);
 
   // Format the tool display
   const getToolDisplay = () => {

package/src/components/graph/playground/custom-headers-dialog.tsx

@@ -85,7 +85,7 @@ function CustomHeadersDialog({ customHeaders, setCustomHeaders }: CustomHeadersD
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <Button variant="outline">
+        <Button variant="ghost" size="sm" className="h-6">
           {numHeaders > 0 ? <Pencil className="w-4 h-4" /> : <Plus className="w-4 h-4" />}
           Custom Headers
           {numHeaders > 0 && <Badge variant="code">{numHeaders}</Badge>}

package/src/components/graph/playground/playground.tsx

@@ -1,4 +1,4 @@
-import { ArrowLeft } from 'lucide-react';
+import { Bug, X } from 'lucide-react';
 import { nanoid } from 'nanoid';
 import { useState } from 'react';
 import { TimelineWrapper } from '@/components/traces/timeline/timeline-wrapper';
@@ -13,16 +13,19 @@ interface PlaygroundProps {
   projectId: string;
   tenantId: string;
   setShowPlayground: (show: boolean) => void;
+  closeSidePane: () => void;
 }
 
 export const Playground = ({
   graphId,
   projectId,
   tenantId,
+  closeSidePane,
   setShowPlayground,
 }: PlaygroundProps) => {
   const [conversationId, setConversationId] = useState<string>(nanoid());
   const [customHeaders, setCustomHeaders] = useState<Record<string, string>>({});
+  const [showTraces, setShowTraces] = useState<boolean>(false);
   const {
     chatActivities,
     isPolling,
@@ -36,13 +39,36 @@ export const Playground = ({
   });
 
   return (
-    <div className="bg-background h-full w-full z-10 flex flex-col">
+    <div
+      className={`bg-background z-10 flex flex-col border-l ${showTraces ? 'w-full' : 'w-1/3 min-w-96'}`}
+    >
       <div className="flex min-h-0 items-center justify-between py-2 px-4 border-b flex-shrink-0">
-        <Button variant="ghost" size="sm" className="h-6" onClick={() => setShowPlayground(false)}>
-          <ArrowLeft className="h-4 w-4" />
-          <span>Back to graph</span>
-        </Button>
         <CustomHeadersDialog customHeaders={customHeaders} setCustomHeaders={setCustomHeaders} />
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6"
+            onClick={() => {
+              setShowTraces(!showTraces);
+              if (!showTraces) {
+                closeSidePane();
+              }
+            }}
+          >
+            <Bug className="h-4 w-4" />
+            {showTraces ? 'Hide debug' : 'Debug'}
+          </Button>
+
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6"
+            onClick={() => setShowPlayground(false)}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
       </div>
       <div className="flex-1 min-h-0 w-full">
         <ResizablePanelGroup direction="horizontal">
@@ -59,17 +85,22 @@ export const Playground = ({
               key={JSON.stringify(customHeaders)}
             />
           </ResizablePanel>
-          <ResizableHandle />
-          <TimelineWrapper
-            isPolling={isPolling}
-            conversation={chatActivities}
-            enableAutoScroll={true}
-            error={error}
-            retryConnection={retryConnection}
-            refreshOnce={refreshOnce}
-            showConversationTracesLink={true}
-            conversationId={conversationId}
-          />
+
+          {showTraces && (
+            <>
+              <ResizableHandle />
+              <TimelineWrapper
+                isPolling={isPolling}
+                conversation={chatActivities}
+                enableAutoScroll={true}
+                error={error}
+                retryConnection={retryConnection}
+                refreshOnce={refreshOnce}
+                showConversationTracesLink={true}
+                conversationId={conversationId}
+              />
+            </>
+          )}
         </ResizablePanelGroup>
       </div>
     </div>

package/src/components/graph/sidepane/nodes/mcp-node-editor.tsx

@@ -12,7 +12,10 @@ import { Label } from '@/components/ui/label';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useGraphStore } from '@/features/graph/state/use-graph-store';
 import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
-import { getCurrentSelectedToolsForNode } from '@/lib/utils/orphaned-tools-detector';
+import {
+  getCurrentHeadersForNode,
+  getCurrentSelectedToolsForNode,
+} from '@/lib/utils/orphaned-tools-detector';
 import type { MCPNodeData } from '../../configuration/node-types';
 import type { AgentToolConfigLookup } from '../../graph';
 
@@ -32,35 +35,24 @@ export function MCPServerNodeEditor({
   }>();
   const markUnsaved = useGraphStore((state) => state.markUnsaved);
 
-  // Get current headers for this tool from all agents
-  const getCurrentHeaders = useCallback((): Record<string, string> => {
-    // First check if we have temporary headers stored on the node
-    if ((selectedNode.data as any).tempHeaders !== undefined) {
-      return (selectedNode.data as any).tempHeaders;
-    }
+  // Only use toolLookup - single source of truth
+  const toolLookup = useGraphStore((state) => state.toolLookup);
+  const edges = useGraphStore((state) => state.edges);
 
-    // Otherwise, get from the database/initial state - find any agent that has headers for this tool
-    for (const agentId in agentToolConfigLookup) {
-      const toolConfig = agentToolConfigLookup[agentId]?.[selectedNode.data.toolId];
-      if (toolConfig?.headers) {
-        return toolConfig.headers;
-      }
-    }
-    return {};
-  }, [agentToolConfigLookup, selectedNode.data]);
+  const getCurrentHeaders = useCallback((): Record<string, string> => {
+    return getCurrentHeadersForNode(selectedNode, agentToolConfigLookup, edges);
+  }, [selectedNode, agentToolConfigLookup, edges]);
 
   // Local state for headers input (allows invalid JSON while typing)
   const [headersInputValue, setHeadersInputValue] = useState('{}');
 
-  // Sync input value when external headers change
+  // Sync input value when node changes (but not on every data change)
+  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally omit getCurrentHeaders to prevent reset loops
   useEffect(() => {
     const newHeaders = getCurrentHeaders();
     setHeadersInputValue(JSON.stringify(newHeaders, null, 2));
-  }, [getCurrentHeaders]);
+  }, [selectedNode.id]);
 
-  // Only use toolLookup - single source of truth
-  const toolLookup = useGraphStore((state) => state.toolLookup);
-  const selectedToolsLookup = useGraphStore((state) => state.selectedToolsLookup);
   const toolData = toolLookup[selectedNode.data.toolId];
 
   const availableTools = toolData?.availableTools;
@@ -80,7 +72,7 @@ export function MCPServerNodeEditor({
       </div>
     );
   }
-  const selectedTools = getCurrentSelectedToolsForNode(selectedNode, selectedToolsLookup);
+  const selectedTools = getCurrentSelectedToolsForNode(selectedNode, agentToolConfigLookup, edges);
 
   // Find orphaned tools - tools that are selected but no longer available in activeTools
   const orphanedTools =

package/src/components/graph/sidepane/nodes/mcp-selector/mcp-selector.tsx

@@ -57,7 +57,7 @@ export function MCPSelector({ selectedNode }: { selectedNode: Node }) {
   const handleSelect = (mcp: MCPTool) => {
     updateNode(selectedNode.id, {
       type: NodeType.MCP,
-      data: { toolId: mcp.id },
+      data: { toolId: mcp.id, agentId: null, relationshipId: null },
     });
   };
 

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

@@ -4,11 +4,13 @@ import type { ActivityItem } from '@/components/traces/timeline/types';
 export function ActivityTimeline({
   activities,
   onSelect,
+  selectedActivityId,
   collapsedAiMessages,
   onToggleAiMessageCollapse,
 }: {
   activities: ActivityItem[];
   onSelect: (a: ActivityItem) => void;
+  selectedActivityId?: string | null;
   collapsedAiMessages?: Set<string>;
   onToggleAiMessageCollapse?: (activityId: string) => void;
 }) {
@@ -21,6 +23,7 @@ export function ActivityTimeline({
             activity={activity}
             isLast={index === activities.length - 1}
             onSelect={() => onSelect(activity)}
+            isSelected={selectedActivityId === activity.id}
             isAiMessageCollapsed={collapsedAiMessages?.has(activity.id) || false}
             onToggleAiMessageCollapse={onToggleAiMessageCollapse}
           />

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

@@ -88,6 +88,13 @@ export function renderPanelContent({
             <Info label="Input tokens" value={a.inputTokens?.toLocaleString() || '0'} />
             <Info label="Output tokens" value={a.outputTokens?.toLocaleString() || '0'} />
             <Info label="Agent" value={a.agentName || '-'} />
+            {a.aiResponseText && (
+              <LabeledBlock label="Response text">
+                <Bubble className="whitespace-pre-wrap break-words max-h-96 overflow-y-auto">
+                  {a.aiResponseText}
+                </Bubble>
+              </LabeledBlock>
+            )}
             <StatusBadge status={a.status} />
             <Info label="Timestamp" value={formatDateTime(a.timestamp)} />
           </Section>
@@ -221,7 +228,20 @@ export function renderPanelContent({
               }
             />
             <StatusBadge status={a.status} />
-            <Info label="Result" value={a.toolResult || 'No result available'} />
+            {a.toolCallArgs && (
+              <LabeledBlock label="Tool arguments">
+                <CodeBubble className="max-h-60 overflow-y-auto">
+                  <Streamdown>{`\`\`\`json\n${a.toolCallArgs}\n\`\`\``}</Streamdown>
+                </CodeBubble>
+              </LabeledBlock>
+            )}
+            {a.toolCallResult && (
+              <LabeledBlock label="Tool result">
+                <CodeBubble className="max-h-60 overflow-y-auto">
+                  <Streamdown>{`\`\`\`json\n${a.toolCallResult}\n\`\`\``}</Streamdown>
+                </CodeBubble>
+              </LabeledBlock>
+            )}
             <Info label="Timestamp" value={formatDateTime(a.timestamp)} />
           </Section>
           <Divider />
@@ -253,7 +273,20 @@ export function renderPanelContent({
               }
             />
             <StatusBadge status={a.status} />
-            <Info label="Result" value={a.toolResult || 'No result available'} />
+            {a.toolCallArgs && (
+              <LabeledBlock label="Tool arguments">
+                <CodeBubble className="max-h-60 overflow-y-auto">
+                  <Streamdown>{`\`\`\`json\n${a.toolCallArgs}\n\`\`\``}</Streamdown>
+                </CodeBubble>
+              </LabeledBlock>
+            )}
+            {a.toolCallResult && (
+              <LabeledBlock label="Tool result">
+                <CodeBubble className="max-h-60 overflow-y-auto">
+                  <Streamdown>{`\`\`\`json\n${a.toolCallResult}\n\`\`\``}</Streamdown>
+                </CodeBubble>
+              </LabeledBlock>
+            )}
             <Info label="Timestamp" value={formatDateTime(a.timestamp)} />
           </Section>
           <Divider />
@@ -286,7 +319,20 @@ export function renderPanelContent({
             </LabeledBlock>
             <Info label="Agent" value={a.agentName || 'Unknown agent'} />
             <StatusBadge status={a.status} />
-            <Info label="Result" value={a.toolResult || 'No result available'} />
+            {a.toolCallArgs && (
+              <LabeledBlock label="Tool arguments">
+                <CodeBubble className="max-h-60 overflow-y-auto">
+                  <Streamdown>{`\`\`\`json\n${a.toolCallArgs}\n\`\`\``}</Streamdown>
+                </CodeBubble>
+              </LabeledBlock>
+            )}
+            {a.toolCallResult && (
+              <LabeledBlock label="Tool result">
+                <CodeBubble className="max-h-60 overflow-y-auto">
+                  <Streamdown>{`\`\`\`json\n${a.toolCallResult}\n\`\`\``}</Streamdown>
+                </CodeBubble>
+              </LabeledBlock>
+            )}
             <Info label="Timestamp" value={formatDateTime(a.timestamp)} />
           </Section>
           <Divider />
@@ -315,7 +361,20 @@ export function renderPanelContent({
               </LabeledBlock>
             )}
             <StatusBadge status={a.status} />
-            <Info label="Result" value={a.toolResult || 'No result available'} />
+            {a.toolCallArgs && (
+              <LabeledBlock label="Tool arguments">
+                <CodeBubble className="max-h-60 overflow-y-auto">
+                  <Streamdown>{`\`\`\`json\n${a.toolCallArgs}\n\`\`\``}</Streamdown>
+                </CodeBubble>
+              </LabeledBlock>
+            )}
+            {a.toolCallResult && (
+              <LabeledBlock label="Tool result">
+                <CodeBubble className="max-h-60 overflow-y-auto">
+                  <Streamdown>{`\`\`\`json\n${a.toolCallResult}\n\`\`\``}</Streamdown>
+                </CodeBubble>
+              </LabeledBlock>
+            )}
             <Info label="Timestamp" value={formatDateTime(a.timestamp)} />
           </Section>
           <Divider />
@@ -341,11 +400,6 @@ export function renderPanelContent({
             <Info label="Output tokens" value={a.outputTokens?.toLocaleString() || '0'} />
             <StatusBadge status={a.status} />
             <Info label="Timestamp" value={formatDateTime(a.timestamp)} />
-            <LabeledBlock label="Streamed text content">
-              <Bubble className="whitespace-pre-wrap break-words max-h-96 overflow-y-auto">
-                {a.aiStreamTextContent || 'No content available'}
-              </Bubble>
-            </LabeledBlock>
           </Section>
           <Divider />
           {SignozButton}

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

@@ -21,6 +21,7 @@ import {
   type ActivityKind,
   TOOL_TYPES,
 } from '@/components/traces/timeline/types';
+import { Badge } from '@/components/ui/badge';
 
 function truncateWords(s: string, nWords: number) {
   const words = s.split(/\s+/);
@@ -72,6 +73,7 @@ interface TimelineItemProps {
   activity: ActivityItem;
   isLast: boolean;
   onSelect: () => void;
+  isSelected?: boolean;
   isAiMessageCollapsed?: boolean;
   onToggleAiMessageCollapse?: (activityId: string) => void;
 }
@@ -80,6 +82,7 @@ export function TimelineItem({
   activity,
   isLast,
   onSelect,
+  isSelected = false,
   isAiMessageCollapsed = false,
   onToggleAiMessageCollapse,
 }: TimelineItemProps) {
@@ -99,7 +102,13 @@ export function TimelineItem({
   const isoDateTime = new Date(activity.timestamp).toISOString();
 
   return (
-    <div className="flex flex-col text-muted-foreground relative text-xs">
+    <div 
+      className={`flex flex-col text-muted-foreground relative text-xs transition-all duration-200 rounded-lg ${
+        isSelected 
+          ? 'bg-primary/5 dark:bg-primary/15 px-3 py-2 ring-2 ring-primary/20 dark:ring-primary/40' 
+          : 'py-2'
+      }`}
+    >
       <div className="flex items-start">
         <div className="mr-4 pt-[1px]">
           <Icon className={`w-4 h-4 ${className}`} />
@@ -368,6 +377,15 @@ export function TimelineItem({
               </CodeBubble>
             )}
 
+          {/* agent name for AI generation */}
+          {activity.type === ACTIVITY_TYPES.AI_GENERATION && activity.agentName && (
+            <div className="mb-1">
+              <Badge variant="code">
+                {activity.agentName}
+              </Badge>
+            </div>
+          )}
+
           <time
             className="text-xs mb-2 inline-block text-gray-500 dark:text-white/50"
             dateTime={isoDateTime}