@inkeep/agents-manage-ui 0.33.1 → 0.34.0

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

@@ -0,0 +1,25 @@
+'use client';
+
+import { type FC, type ReactNode, useState } from 'react';
+import { AppSidebar } from '@/components/sidebar-nav/app-sidebar';
+import { SidebarProvider } from '@/components/ui/sidebar';
+
+export const AppSidebarProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [isSidebarHoverOpen, setIsSidebarHoverOpen] = useState(false);
+  const isOpen = isSidebarOpen || isSidebarHoverOpen;
+
+  return (
+    <SidebarProvider
+      style={{
+        '--sidebar-width': 'calc(var(--spacing) * 62)',
+        '--header-height': 'calc(var(--spacing) * 12)',
+      }}
+      open={isOpen}
+      onOpenChange={setIsSidebarOpen}
+    >
+      <AppSidebar open={isOpen} setOpen={setIsSidebarHoverOpen} />
+      {children}
+    </SidebarProvider>
+  );
+};

package/src/components/sidebar-nav/{sidebar-nav.tsx → app-sidebar.tsx}

@@ -15,7 +15,7 @@ import {
 } from 'lucide-react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
-import type * as React from 'react';
+import { type ComponentProps, type Dispatch, type FC, useCallback } from 'react';
 import { MCPIcon } from '@/components/icons/mcp-icon';
 import { NavGroup } from '@/components/sidebar-nav/nav-group';
 import { ProjectSwitcher } from '@/components/sidebar-nav/project-switcher';
@@ -25,12 +25,11 @@ import {
   SidebarFooter,
   SidebarHeader,
   SidebarMenuButton,
-  SidebarRail,
-  useSidebar,
 } from '@/components/ui/sidebar';
 import { DOCS_BASE_URL } from '@/constants/page-descriptions';
 import { InkeepLogo } from '@/icons';
 import { cn } from '@/lib/utils';
+import { throttle } from '@/lib/utils/throttle';
 import type { NavItemProps } from './nav-item';
 
 const bottomNavItems: NavItemProps[] = [
@@ -47,9 +46,13 @@ const bottomNavItems: NavItemProps[] = [
   },
 ];
 
-export function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
+interface AppSidebarProps extends ComponentProps<typeof Sidebar> {
+  open: boolean;
+  setOpen: Dispatch<boolean>;
+}
+
+export const AppSidebar: FC<AppSidebarProps> = ({ open, setOpen, ...props }) => {
   const { tenantId, projectId } = useParams<{ tenantId: string; projectId?: string }>();
-  const { open } = useSidebar();
 
   const topNavItems: NavItemProps[] = projectId
     ? [
@@ -107,8 +110,21 @@ export function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
         },
       ];
 
+  const handleHover: NonNullable<ComponentProps<'div'>['onMouseEnter']> = useCallback(
+    throttle(200, (event) => {
+      setOpen(event.type === 'mouseenter');
+    }),
+    []
+  );
+
   return (
-    <Sidebar collapsible="icon" variant="inset" {...props}>
+    <Sidebar
+      collapsible="icon"
+      variant="inset"
+      onMouseEnter={handleHover}
+      onMouseLeave={handleHover}
+      {...props}
+    >
       <SidebarHeader>
         <SidebarMenuButton asChild>
           <Link href={`/${tenantId}/projects`}>
@@ -132,7 +148,6 @@ export function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
           <ProjectSwitcher />
         </SidebarFooter>
       )}
-      <SidebarRail />
     </Sidebar>
   );
-}
+};

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

@@ -97,7 +97,7 @@ export const ProjectSwitcher: FC = () => {
           </DropdownMenuItem>
         ))}
         <DropdownMenuSeparator />
-        <DropdownMenuItem onSelect={handleCreateProject}>
+        <DropdownMenuItem className="font-mono uppercase" onSelect={handleCreateProject}>
           <Plus />
           Create Project
         </DropdownMenuItem>

package/src/components/theme-toggle.tsx

@@ -14,8 +14,8 @@ import {
 type ThemeValue = 'dark' | 'light' | 'system';
 
 const ThemeMap: Record<ThemeValue, FC<ComponentProps<'svg'>>> = {
-  dark: Moon,
   light: Sun,
+  dark: Moon,
   system: Monitor,
 };
 

package/src/components/traces/filters/agent-filter.tsx

@@ -8,15 +8,15 @@ import { getAllAgentsAction } from '@/lib/actions/agent-full';
 import { FilterTriggerComponent } from './filter-trigger';
 
 interface AgentFilterProps {
-  onSelect: (value: string | undefined) => void;
+  onSelect: (value?: string) => void;
   selectedValue: string | undefined;
 }
 
 export const AgentFilter = ({ onSelect, selectedValue }: AgentFilterProps) => {
-  const { tenantId, projectId } = useParams() as {
+  const { tenantId, projectId } = useParams<{
     tenantId: string;
     projectId: string;
-  };
+  }>();
   const [agentOptions, setAgentOptions] = useState<OptionType[]>([]);
   const [loading, setLoading] = useState(true);
   useEffect(() => {

package/src/components/traces/traces-overview.tsx

@@ -31,8 +31,7 @@ interface TracesOverviewProps {
 
 export function TracesOverview({ refreshKey }: TracesOverviewProps) {
   const router = useRouter();
-  const params = useParams();
-  const projectId = params.projectId;
+  const { tenantId, projectId } = useParams();
   const searchParams = useSearchParams();
   const {
     timeRange: selectedTimeRange,
@@ -49,8 +48,8 @@ export function TracesOverview({ refreshKey }: TracesOverviewProps) {
   const { isLoading: isSignozConfigLoading, configError: signozConfigError } = useSignozConfig();
 
   const [selectedAgent, setSelectedAgent] = useState<string | undefined>(undefined);
-  const [searchQuery, setSearchQuery] = useState<string>('');
-  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState<string>('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
   const [availableSpanNames, setAvailableSpanNames] = useState<string[]>([]);
   const [spanNamesLoading, setSpanNamesLoading] = useState(false);
   const [activityData, setActivityData] = useState<Array<{ date: string; count: number }>>([]);
@@ -397,7 +396,7 @@ export function TracesOverview({ refreshKey }: TracesOverviewProps) {
               Icon={SparklesIcon}
               onClick={() => {
                 const current = new URLSearchParams(searchParams.toString());
-                const href = `/${params.tenantId}/projects/${projectId}/traces/ai-calls?${current.toString()}`;
+                const href = `/${tenantId}/projects/${projectId}/traces/ai-calls?${current.toString()}`;
                 router.push(href);
               }}
             />

package/src/components/ui/dropdown-menu.tsx

@@ -61,7 +61,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}

package/src/components/ui/radio-group.tsx

@@ -21,7 +21,7 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-item"
       className={cn(
-        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-full border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        'peer border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary',
         className
       )}
       {...props}
@@ -30,7 +30,7 @@ function RadioGroupItem({
         data-slot="radio-indicator"
         className="flex items-center justify-center"
       >
-        <Circle className="size-2.5 fill-current text-current" />
+        <Circle className="size-2.5 fill-primary text-current" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );

package/src/features/agent/domain/serialize.ts

@@ -378,8 +378,8 @@ export function serializeAgentData(
         agent: ExtendedAgent,
         relationshipType: 'canTransferTo' | 'canDelegateTo',
         targetId: string,
-        isExternal: boolean = false,
-        isTeamAgent: boolean = false,
+        isExternal = false,
+        isTeamAgent = false,
         headers?: Record<string, string>,
         relationshipId?: string
       ) => {

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

@@ -10,6 +10,7 @@ import type {
   SubAgentExternalAgentConfigLookup,
 } from '@/components/agent/agent';
 import type { AgentMetadata } from '@/components/agent/configuration/agent-types';
+import type { AnimatedEdge } from '@/components/agent/configuration/edge-types';
 import {
   type AnimatedNode,
   mcpNodeHandleId,
@@ -324,34 +325,28 @@ const agentState: StateCreator<AgentState> = (set, get) => ({
       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']) {
+        function updateNodeStatus(
+          cb: (node: Node<AnimatedNode & Record<string, unknown>>) => AnimatedNode['status']
+        ) {
           return prevNodes.map((node) => {
-            if (node.data.status === 'error') {
-              return node;
-            }
-
+            return {
+              ...node,
+              data: {
+                ...node.data,
+                status: cb(node),
+              },
+            };
+          });
+        }
+        function updateEdgeStatus(
+          cb: (edge: Edge<AnimatedEdge & Record<string, unknown>>) => AnimatedEdge['status']
+        ) {
+          return prevEdges.map((node) => {
             return {
               ...node,
               data: {
@@ -364,138 +359,123 @@ const agentState: StateCreator<AgentState> = (set, get) => ({
 
         switch (data.type) {
           case 'agent_initializing': {
-            // TODO
-            break;
+            return {
+              nodes: updateNodeStatus((node) => {
+                if (node.data.isDefault) {
+                  return 'delegating';
+                }
+                return node.data.status;
+              }),
+            };
           }
           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
+              edges: updateEdgeStatus((edge) =>
+                edge.source === fromSubAgent && edge.target === targetSubAgent
+                  ? 'delegating'
+                  : edge.data?.status
+              ),
+              nodes: updateNodeStatus((node) =>
+                node.id === fromSubAgent || node.id === targetSubAgent
+                  ? 'delegating'
+                  : node.data.status
               ),
             };
           }
           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
+              edges: updateEdgeStatus((edge) =>
+                edge.source === targetSubAgent && edge.target === fromSubAgent
+                  ? 'inverted-delegating'
+                  : edge.data?.status
               ),
+              nodes: updateNodeStatus((node) => {
+                if (node.id === targetSubAgent) {
+                  return 'delegating';
+                }
+                return node.id === fromSubAgent ? 'inverted-delegating' : node.data.status;
+              }),
             };
           }
           case 'tool_call': {
-            const { toolName } = data.details.data;
+            const { relationshipId } = data.details.data;
             const { subAgentId } = data.details;
+            if (!relationshipId) {
+              console.warn('[type: tool_call] relationshipId is missing');
+            }
             return {
-              edges: prevEdges.map((edge) => {
+              edges: updateEdgeStatus((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 },
-                };
+                return !!relationshipId && relationshipId === node?.data.relationshipId
+                  ? 'delegating'
+                  : edge.data?.status;
               }),
-              nodes: changeNodeStatus((node) =>
+              nodes: updateNodeStatus((node) =>
                 node.data.id === subAgentId ||
-                hasRelationWithSubAgent({
-                  relationshipId: node.data.relationshipId,
-                  subAgentId,
-                })
+                (relationshipId && relationshipId === node.data.relationshipId)
                   ? 'delegating'
-                  : null
+                  : node.data.status
               ),
             };
           }
           case 'error': {
-            const { subAgentId } = data.details;
+            const { relationshipId } = data.details;
+            if (!relationshipId) {
+              console.warn('[type: error] relationshipId is missing');
+            }
             return {
-              nodes: changeNodeStatus((node) =>
-                hasRelationWithSubAgent({
-                  relationshipId: node.data.relationshipId,
-                  subAgentId,
-                })
+              nodes: updateNodeStatus((node) =>
+                relationshipId && relationshipId === node.data.relationshipId
                   ? 'error'
-                  : null
+                  : node.data.status
               ),
             };
           }
           case 'tool_result': {
-            const { toolName, error } = data.details.data;
+            const { error, relationshipId } = data.details.data;
             const { subAgentId } = data.details;
+            if (!relationshipId) {
+              console.warn('[type: tool_result] relationshipId is missing');
+            }
             return {
-              edges: prevEdges.map((edge) => {
+              edges: updateEdgeStatus((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,
-                  },
-                };
+                return subAgentId === edge.source &&
+                  relationshipId &&
+                  relationshipId === node?.data.relationshipId
+                  ? 'inverted-delegating'
+                  : edge.data?.status;
               }),
-              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';
+              nodes: updateNodeStatus((node) => {
+                if (relationshipId && relationshipId === node.data.relationshipId) {
+                  return error ? 'error' : 'inverted-delegating';
+                }
+                if (node.id === subAgentId) {
+                  return 'delegating';
                 }
 
-                return status;
+                return node.data.status;
               }),
             };
           }
           case 'completion': {
             return {
-              edges: prevEdges.map((edge) => ({
-                ...edge,
-                data: { ...edge.data, delegating: false },
-              })),
-              nodes: prevNodes.map((node) => ({
-                ...node,
-                data: { ...node.data, status: null },
-              })),
+              edges: updateEdgeStatus(() => null),
+              nodes: updateNodeStatus(() => null),
             };
           }
+          case 'agent_reasoning':
           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)),
+              nodes: updateNodeStatus((node) =>
+                node.id === subAgentId ? 'executing' : node.data.status
+              ),
             };
           }
         }