@inkeep/agents-manage-ui 0.31.2 → 0.31.4

package/src/components/ui/chart.tsx

@@ -193,12 +193,10 @@ function ChartTooltipContent({
                             'my-0.5': nestLabel && indicator === 'dashed',
                           }
                         )}
-                        style={
-                          {
-                            '--color-bg': indicatorColor,
-                            '--color-border': indicatorColor,
-                          } as React.CSSProperties
-                        }
+                        style={{
+                          '--color-bg': indicatorColor,
+                          '--color-border': indicatorColor,
+                        }}
                       />
                     )
                   )}

package/src/components/ui/sidebar.tsx

@@ -122,13 +122,11 @@ function SidebarProvider({
       <TooltipProvider delayDuration={0}>
         <div
           data-slot="sidebar-wrapper"
-          style={
-            {
-              '--sidebar-width': SIDEBAR_WIDTH,
-              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-              ...style,
-            } as React.CSSProperties
-          }
+          style={{
+            '--sidebar-width': SIDEBAR_WIDTH,
+            '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+            ...style,
+          }}
           className={cn(
             'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
             className
@@ -179,11 +177,9 @@ function Sidebar({
           data-slot="sidebar"
           data-mobile="true"
           className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
-          style={
-            {
-              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
-            } as React.CSSProperties
-          }
+          style={{
+            '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+          }}
           side={side}
         >
           <SheetHeader className="sr-only">
@@ -599,11 +595,9 @@ function SidebarMenuSkeleton({
       <Skeleton
         className="h-4 max-w-(--skeleton-width) flex-1"
         data-sidebar="menu-skeleton-text"
-        style={
-          {
-            '--skeleton-width': width,
-          } as React.CSSProperties
-        }
+        style={{
+          '--skeleton-width': width,
+        }}
       />
     </div>
   );

package/src/components/ui/sonner.tsx

@@ -10,13 +10,11 @@ const Toaster = ({ ...props }: ToasterProps) => {
     <Sonner
       theme={resolvedTheme as ToasterProps['theme']}
       className="toaster group"
-      style={
-        {
-          '--normal-bg': 'var(--popover)',
-          '--normal-text': 'var(--popover-foreground)',
-          '--normal-border': 'var(--border)',
-        } as React.CSSProperties
-      }
+      style={{
+        '--normal-bg': 'var(--popover)',
+        '--normal-text': 'var(--popover-foreground)',
+        '--normal-border': 'var(--border)',
+      }}
       {...props}
     />
   );

package/src/env.d.ts

@@ -9,3 +9,9 @@ declare module '*.svg?svgr' {
 
   export default ReactComponent;
 }
+
+declare namespace React {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number;
+  }
+}

package/src/features/agent/state/use-agent-store.ts

@@ -8,7 +8,11 @@ import type {
   SubAgentExternalAgentConfigLookup,
 } from '@/components/agent/agent';
 import type { AgentMetadata } from '@/components/agent/configuration/agent-types';
-import { mcpNodeHandleId, NodeType } from '@/components/agent/configuration/node-types';
+import {
+  type AnimatedNode,
+  mcpNodeHandleId,
+  NodeType,
+} from '@/components/agent/configuration/node-types';
 import type { ArtifactComponent } from '@/lib/api/artifact-components';
 import type { DataComponent } from '@/lib/api/data-components';
 import type { ExternalAgent } from '@/lib/types/external-agents';
@@ -82,6 +86,8 @@ type AgentActions = {
    * Setter for `jsonSchemaMode` field.
    */
   setJsonSchemaMode(jsonSchemaMode: boolean): void;
+
+  animateGraph: EventListenerOrEventListenerObject;
 };
 
 type AgentState = AgentStateData & {
@@ -315,6 +321,185 @@ const agentState: StateCreator<AgentState> = (set, get) => ({
     setJsonSchemaMode(jsonSchemaMode) {
       set({ jsonSchemaMode });
     },
+    animateGraph(event) {
+      function hasRelationWithSubAgent({
+        relationshipId,
+        subAgentId,
+      }: {
+        relationshipId: unknown;
+        subAgentId: string;
+      }): boolean {
+        if (typeof relationshipId !== 'string') {
+          return false;
+        }
+        const config = get().agentToolConfigLookup[subAgentId];
+        if (!config) {
+          return false;
+        }
+        return Object.keys(config).includes(relationshipId);
+      }
+      // @ts-expect-error -- improve types
+      const data = event.detail;
+      set((state) => {
+        const { edges: prevEdges, nodes: prevNodes } = state;
+
+        /** Wrapper function to always keep error state */
+        function changeNodeStatus(cb: (node: Node) => AnimatedNode['status']) {
+          return prevNodes.map((node) => {
+            if (node.data.status === 'error') {
+              return node;
+            }
+
+            return {
+              ...node,
+              data: {
+                ...node.data,
+                status: cb(node),
+              },
+            };
+          });
+        }
+
+        switch (data.type) {
+          case 'agent_initializing': {
+            // TODO
+            break;
+          }
+          case 'delegation_sent':
+          case 'transfer': {
+            const { fromSubAgent, targetSubAgent } = data.details.data;
+
+            return {
+              edges: prevEdges.map((edge) => ({
+                ...edge,
+                data: {
+                  ...edge.data,
+                  delegating: edge.source === fromSubAgent && edge.target === targetSubAgent,
+                },
+              })),
+              nodes: changeNodeStatus((node) =>
+                node.id === fromSubAgent || node.id === targetSubAgent ? 'delegating' : null
+              ),
+            };
+          }
+          case 'delegation_returned': {
+            const { targetSubAgent, fromSubAgent } = data.details.data;
+            return {
+              edges: prevEdges.map((edge) => ({
+                ...edge,
+                data: {
+                  ...edge.data,
+                  delegating:
+                    edge.source === targetSubAgent && edge.target === fromSubAgent
+                      ? 'inverted'
+                      : false,
+                },
+              })),
+              nodes: changeNodeStatus((node) =>
+                node.id === targetSubAgent || node.id === fromSubAgent ? 'delegating' : null
+              ),
+            };
+          }
+          case 'tool_call': {
+            const { toolName } = data.details.data;
+            const { subAgentId } = data.details;
+            return {
+              edges: prevEdges.map((edge) => {
+                const node = prevNodes.find((node) => node.id === edge.target);
+                const toolId = node?.data.toolId as string;
+                const toolData = get().toolLookup[toolId];
+                const hasTool = toolData?.availableTools?.some((tool) => tool.name === toolName);
+                const hasDots = edge.source === subAgentId && hasTool;
+                return {
+                  ...edge,
+                  data: { ...edge.data, delegating: hasDots },
+                };
+              }),
+              nodes: changeNodeStatus((node) =>
+                node.data.id === subAgentId ||
+                hasRelationWithSubAgent({
+                  relationshipId: node.data.relationshipId,
+                  subAgentId,
+                })
+                  ? 'delegating'
+                  : null
+              ),
+            };
+          }
+          case 'error': {
+            const { subAgentId } = data.details;
+            return {
+              nodes: changeNodeStatus((node) =>
+                hasRelationWithSubAgent({
+                  relationshipId: node.data.relationshipId,
+                  subAgentId,
+                })
+                  ? 'error'
+                  : null
+              ),
+            };
+          }
+          case 'tool_result': {
+            const { toolName, error } = data.details.data;
+            const { subAgentId } = data.details;
+            return {
+              edges: prevEdges.map((edge) => {
+                const node = prevNodes.find((node) => node.id === edge.target);
+                const toolId = node?.data.toolId as string;
+                const toolData = get().toolLookup[toolId];
+                const hasTool = toolData?.availableTools?.some((tool) => tool.name === toolName);
+
+                return {
+                  ...edge,
+                  data: {
+                    ...edge.data,
+                    delegating: subAgentId === edge.source && hasTool ? 'inverted' : false,
+                  },
+                };
+              }),
+              nodes: changeNodeStatus((node) => {
+                let status: AnimatedNode['status'] = null;
+                if (
+                  hasRelationWithSubAgent({
+                    subAgentId,
+                    relationshipId: node.data.relationshipId,
+                  })
+                ) {
+                  status = error ? 'error' : 'executing';
+                } else if (node.id === subAgentId) {
+                  status = 'delegating';
+                }
+
+                return status;
+              }),
+            };
+          }
+          case 'completion': {
+            return {
+              edges: prevEdges.map((edge) => ({
+                ...edge,
+                data: { ...edge.data, delegating: false },
+              })),
+              nodes: prevNodes.map((node) => ({
+                ...node,
+                data: { ...node.data, status: null },
+              })),
+            };
+          }
+          case 'agent_generate': {
+            const { subAgentId } = data.details;
+            return {
+              edges: prevEdges.map((node) => ({
+                ...node,
+                data: { ...node.data, delegating: false },
+              })),
+              nodes: changeNodeStatus((node) => (node.id === subAgentId ? 'executing' : null)),
+            };
+          }
+        }
+        return state;
+      });
+    },
   },
 });
 

package/src/hooks/use-traces.ts

@@ -15,7 +15,7 @@ export interface UseConversationStatsResult {
   loading: boolean;
   error: string | null;
   refresh: () => void;
-  pagination?: {
+  pagination: {
     page: number;
     limit: number;
     total: number;
@@ -34,7 +34,6 @@ export interface UseConversationStatsOptions {
   filters?: SpanFilterOptions;
   projectId?: string;
   pagination?: {
-    enabled: boolean;
     pageSize?: number;
   };
   searchQuery?: string;
@@ -53,7 +52,6 @@ export function useConversationStats(
   >(null);
 
   // Extract stable values to avoid object recreation issues
-  const paginationEnabled = options?.pagination?.enabled;
   const pageSize = options?.pagination?.pageSize || 50;
 
   const fetchData = useCallback(
@@ -68,28 +66,18 @@ export function useConversationStats(
         const currentEndTime = Math.min(options?.endTime || Date.now() - 1);
         const currentStartTime = options?.startTime || new Date('2020-01-01T00:00:00Z').getTime();
 
-        const paginationParams = paginationEnabled ? { page, limit: pageSize } : undefined;
-
         const result = await client.getConversationStats(
           currentStartTime,
           currentEndTime,
           options?.filters,
           options?.projectId,
-          paginationParams,
+          { page, limit: pageSize },
           options?.searchQuery,
           options?.agentId
         );
 
-        if (paginationEnabled && typeof result === 'object' && 'data' in result) {
-          // Paginated result
-          setStats(result.data);
-          setPaginationInfo(result.pagination);
-          // Don't set currentPage here to avoid infinite loops - it should be managed by navigation functions
-        } else {
-          // Non-paginated result (backward compatibility)
-          setStats(result as ConversationStats[]);
-          setPaginationInfo(null);
-        }
+        setStats(result.data);
+        setPaginationInfo(result.pagination);
       } catch (err) {
         console.error('Error fetching conversation stats:', err);
         const errorMessage =
@@ -106,7 +94,6 @@ export function useConversationStats(
       options?.projectId,
       options?.searchQuery,
       options?.agentId,
-      paginationEnabled,
       pageSize,
       currentPage,
     ]
@@ -149,16 +136,11 @@ export function useConversationStats(
   );
 
   // Fetch when component mounts or time range changes
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-
   // Reset to page 1 when filters or time range change
   useEffect(() => {
-    if (paginationEnabled) {
-      setCurrentPage(1);
-    }
-  }, [paginationEnabled]);
+    setCurrentPage(1);
+    fetchData(1);
+  }, [fetchData]);
 
   return {
     stats,
@@ -177,7 +159,17 @@ export function useConversationStats(
           previousPage,
           goToPage,
         }
-      : undefined,
+      : {
+          page: 1,
+          limit: pageSize,
+          total: 0,
+          totalPages: 0,
+          hasNextPage: false,
+          hasPreviousPage: false,
+          nextPage,
+          previousPage,
+          goToPage,
+        },
   };
 }