@inkeep/agents-manage-ui 0.33.2 → 0.34.0

package/src/app/layout.tsx

@@ -1,10 +1,9 @@
 import type { Metadata } from 'next';
 import { Inter, JetBrains_Mono } from 'next/font/google';
-import './globals.css';
 import { ThemeProvider } from 'next-themes';
 import { NuqsAdapter } from 'nuqs/adapters/next/app';
-import { AppSidebar } from '@/components/sidebar-nav/sidebar-nav';
-import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
+import { AppSidebarProvider } from '@/components/sidebar-nav/app-sidebar-provider';
+import { SidebarInset } from '@/components/ui/sidebar';
 import { Toaster } from '@/components/ui/sonner';
 import { RuntimeConfigProvider } from '@/contexts/runtime-config-context';
 import {
@@ -16,6 +15,7 @@ import {
 } from '@/lib/runtime-config/defaults';
 import type { RuntimeConfig } from '@/lib/runtime-config/types';
 import { cn } from '@/lib/utils';
+import './globals.css';
 
 const jetBrainsMono = JetBrains_Mono({
   variable: '--font-jetbrains-mono',
@@ -63,15 +63,9 @@ export default function RootLayout({ children }: LayoutProps<'/'>) {
         >
           <NuqsAdapter>
             <RuntimeConfigProvider value={runtimeConfig}>
-              <SidebarProvider
-                style={{
-                  '--sidebar-width': 'calc(var(--spacing) * 62)',
-                  '--header-height': 'calc(var(--spacing) * 12)',
-                }}
-              >
-                <AppSidebar />
+              <AppSidebarProvider>
                 <SidebarInset>{children}</SidebarInset>
-              </SidebarProvider>
+              </AppSidebarProvider>
               <Toaster />
             </RuntimeConfigProvider>
           </NuqsAdapter>

package/src/components/agent/configuration/edge-types.tsx

@@ -19,18 +19,21 @@ export enum EdgeType {
   SelfLoop = 'self-loop',
 }
 
-export type A2AEdgeData = {
+export interface AnimatedEdge {
+  /**
+   * Indicates whether this node delegates its task to another node.
+   */
+  status?: 'delegating' | 'inverted-delegating' | null;
+}
+
+export interface A2AEdgeData {
   relationships: {
     transferTargetToSource: boolean;
     transferSourceToTarget: boolean;
     delegateTargetToSource: boolean;
     delegateSourceToTarget: boolean;
   };
-  /**
-   * Indicates whether this node delegates its task to another node.
-   */
-  delegating: boolean | 'inverted';
-};
+}
 
 export const edgeTypes = {
   [EdgeType.A2A]: AgentToAgentEdge,

package/src/components/agent/configuration/model-options.tsx

@@ -40,6 +40,10 @@ export const modelOptions = {
     },
   ],
   openai: [
+    {
+      value: OPENAI_MODELS.GPT_5_1,
+      label: 'GPT-5.1',
+    },
     {
       value: OPENAI_MODELS.GPT_4_1,
       label: 'GPT-4.1',
@@ -66,6 +70,10 @@ export const modelOptions = {
     },
   ],
   google: [
+    {
+      value: GOOGLE_MODELS.GEMINI_3_PRO_PREVIEW,
+      label: 'Gemini 3 Pro Preview',
+    },
     {
       value: GOOGLE_MODELS.GEMINI_2_5_PRO,
       label: 'Gemini 2.5 Pro',

package/src/components/agent/configuration/node-types.tsx

@@ -1,3 +1,4 @@
+import type { SubAgentStopWhen } from '@inkeep/agents-core';
 import { Bot, Code, Globe, Hammer, Users } from 'lucide-react';
 import { ExternalAgentNode } from '../nodes/external-agent-node';
 import { FunctionToolNode } from '../nodes/function-tool-node';
@@ -15,10 +16,8 @@ interface NodeData {
   type?: 'mcp-placeholder' | 'external-agent-placeholder' | 'team-agent-placeholder'; // Optional for placeholder nodes
 }
 
-import type { SubAgentStopWhen } from '@inkeep/agents-core/client-exports';
-
 export interface AnimatedNode {
-  status?: 'delegating' | 'executing' | 'error' | null;
+  status?: 'delegating' | 'inverted-delegating' | 'executing' | 'error' | null;
 }
 
 export interface MCPNodeData extends Record<string, unknown>, AnimatedNode {

package/src/components/agent/edges/agent-to-agent-edge.tsx

@@ -1,10 +1,11 @@
 import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getBezierPath } from '@xyflow/react';
 import { ArrowRight, ArrowRightLeft } from 'lucide-react';
 import { AnimatedCircle } from '@/components/agent/edges/default-edge';
-import type { A2AEdgeData } from '../configuration/edge-types';
+import { cn } from '@/lib/utils';
+import type { A2AEdgeData, AnimatedEdge } from '../configuration/edge-types';
 
-interface AgentToAgentEdgeProps extends EdgeProps {
-  data?: A2AEdgeData;
+interface AgentToAgentEdgeProps extends Omit<EdgeProps, 'data'> {
+  data: AnimatedEdge & A2AEdgeData;
 }
 
 export function AgentToAgentEdge({
@@ -17,13 +18,12 @@ export function AgentToAgentEdge({
   data,
   selected,
 }: AgentToAgentEdgeProps) {
-  const relationships = data?.relationships || {
+  const relationships = data.relationships || {
     transferTargetToSource: false,
     transferSourceToTarget: false,
     delegateTargetToSource: false,
     delegateSourceToTarget: false,
   };
-  const delegating = data?.delegating;
 
   const hasDelegate = relationships.delegateTargetToSource || relationships.delegateSourceToTarget;
   const hasTransfer = relationships.transferTargetToSource || relationships.transferSourceToTarget;
@@ -88,13 +88,14 @@ export function AgentToAgentEdge({
   const delegateMarkerEnd =
     hasDelegate && relationships.delegateSourceToTarget ? getMarker(!!selected) : undefined;
 
-  const className =
-    selected || delegating ? '!stroke-primary' : '!stroke-border dark:!stroke-muted-foreground';
-
+  const className = cn(
+    data.status && 'edge-delegating',
+    data.status === 'inverted-delegating' && 'edge-delegating-inverted'
+  );
   return (
     <>
       {/* Animated circles based on delegating direction */}
-      {delegating && <AnimatedCircle edgePath={edgePath} inverted={delegating === 'inverted'} />}
+      <AnimatedCircle edgePath={edgePath} status={data.status} />
 
       {/* Render transfer path (solid line) */}
       {hasTransfer && (

package/src/components/agent/edges/default-edge.tsx

@@ -2,24 +2,23 @@
 
 import { BaseEdge, type EdgeProps, getBezierPath } from '@xyflow/react';
 import { type FC, useEffect, useRef } from 'react';
+import { cn } from '@/lib/utils';
+import type { AnimatedEdge } from '../configuration/edge-types';
 
-type DefaultEdgeProps = EdgeProps & {
-  data?: {
-    delegating: boolean | 'inverted';
-  };
-};
-
-export const AnimatedCircle: FC<{ edgePath: string; inverted: boolean }> = ({
-  edgePath,
-  inverted,
-}) => {
+export const AnimatedCircle: FC<{ edgePath: string } & AnimatedEdge> = ({ edgePath, status }) => {
   const ref = useRef<SVGAnimateElement>(null);
 
   // Without this useEffect, the animation won't start when this component is rendered dynamically.
   // biome-ignore lint/correctness/useExhaustiveDependencies: We need restart animation when invert is changed
   useEffect(() => {
     ref.current?.beginElement();
-  }, [inverted]);
+  }, [status]);
+
+  if (!status) {
+    return;
+  }
+
+  const isInvertedDelegating = status === 'inverted-delegating';
 
   return (
     <circle fill="var(--primary)" r="6">
@@ -27,9 +26,8 @@ export const AnimatedCircle: FC<{ edgePath: string; inverted: boolean }> = ({
         ref={ref}
         dur="2s"
         path={edgePath}
-        fill="freeze"
-        {...(inverted && {
-          pathLength: '1',
+        fill={isInvertedDelegating ? 'remove' : 'freeze'}
+        {...(isInvertedDelegating && {
           keyPoints: '1;0',
           keyTimes: '0;1',
         })}
@@ -38,6 +36,10 @@ export const AnimatedCircle: FC<{ edgePath: string; inverted: boolean }> = ({
   );
 };
 
+interface DefaultEdgeProps extends Omit<EdgeProps, 'data'> {
+  data?: AnimatedEdge;
+}
+
 export function DefaultEdge({
   id,
   sourceX,
@@ -47,9 +49,8 @@ export function DefaultEdge({
   sourcePosition,
   targetPosition,
   label,
-  selected,
   markerEnd,
-  data,
+  data = {},
 }: DefaultEdgeProps) {
   const [edgePath] = getBezierPath({
     sourceX,
@@ -60,24 +61,20 @@ export function DefaultEdge({
     targetPosition,
   });
 
-  const className =
-    selected || data?.delegating
-      ? '!stroke-primary'
-      : '!stroke-border dark:!stroke-muted-foreground';
-
   return (
     <>
       {/* Animated circles based on delegating direction */}
-      {data?.delegating && (
-        <AnimatedCircle edgePath={edgePath} inverted={data.delegating === 'inverted'} />
-      )}
+      <AnimatedCircle edgePath={edgePath} status={data.status} />
       <BaseEdge
         id={id}
         path={edgePath}
         label={label}
         markerEnd={markerEnd}
         style={{ strokeWidth: 2 }}
-        className={className}
+        className={cn(
+          data.status && 'edge-delegating',
+          data.status === 'inverted-delegating' && 'edge-delegating-inverted'
+        )}
       />
     </>
   );

package/src/components/agent/edges/self-loop-edge.tsx

@@ -2,8 +2,8 @@ import { BaseEdge, EdgeLabelRenderer, type EdgeProps, type Node, useStore } from
 import { RefreshCw } from 'lucide-react';
 import type { A2AEdgeData } from '../configuration/edge-types';
 
-interface SelfLoopEdgeProps extends EdgeProps {
-  data?: A2AEdgeData;
+interface SelfLoopEdgeProps extends Omit<EdgeProps, 'data'> {
+  data: A2AEdgeData;
 }
 
 const getNodePositionById = (nodeId: string): ((state: { nodes: Node[] }) => Node | undefined) => {
@@ -15,7 +15,7 @@ export function SelfLoopEdge({ source, data, selected }: SelfLoopEdgeProps) {
 
   if (!sourceNode) return null;
 
-  const relationships = data?.relationships || {
+  const relationships = data.relationships || {
     transferTargetToSource: false,
     transferSourceToTarget: false,
     delegateTargetToSource: false,
@@ -75,7 +75,6 @@ export function SelfLoopEdge({ source, data, selected }: SelfLoopEdgeProps) {
       {/* Render transfer path (solid line) */}
       {hasTransfer && (
         <BaseEdge
-          className={`${selected ? '!stroke-primary' : '!stroke-border dark:!stroke-muted-foreground'}`}
           path={transferPath}
           style={{
             strokeWidth: 2,
@@ -88,7 +87,6 @@ export function SelfLoopEdge({ source, data, selected }: SelfLoopEdgeProps) {
       {/* Render delegate path (dashed line) */}
       {hasDelegate && (
         <BaseEdge
-          className={`${selected ? '!stroke-primary' : '!stroke-border dark:!stroke-muted-foreground'}`}
           path={hasTransfer ? delegatePath : transferPath}
           style={{
             strokeDasharray: '5,5',

package/src/components/agent/nodes/base-node.tsx

@@ -9,11 +9,11 @@ export const BaseNode: FC<BaseNodeProps> = ({ className, isSelected, ...props })
   <div
     className={cn(
       'relative rounded-lg border bg-card text-card-foreground',
-      // React Flow displays node elements inside of a `NodeWrapper` component,
-      // which compiles down to a div with a the class `react-flow__node`.
+      // React Flow displays node elements inside a `NodeWrapper` component,
+      // which compiles down to a div with a class `react-flow__node`.
       // When a node is selected, the class `selected` is added to the
       // `react-flow__node` element. This allows us to style the node when it
-      isSelected ? 'ring-2 ring-primary' : 'hover:ring-2 hover:ring-gray-700/5',
+      isSelected && 'ring-2 ring-primary',
       className
     )}
     // tabIndex={0}

package/src/components/agent/nodes/function-tool-node.tsx

@@ -19,6 +19,7 @@ export function FunctionToolNode(props: NodeProps & { data: FunctionToolNodeData
   const nodeErrors = getNodeErrors(functionToolId);
   const hasErrors = hasNodeErrors(functionToolId);
   const isDelegating = data.status === 'delegating';
+  const isInvertedDelegating = data.status === 'inverted-delegating';
   const isExecuting = data.status === 'executing';
   return (
     <div className="relative">
@@ -27,7 +28,8 @@ export function FunctionToolNode(props: NodeProps & { data: FunctionToolNodeData
         className={cn(
           'rounded-4xl min-w-40 max-w-xs',
           hasErrors && 'ring-2 ring-red-300 border-red-300',
-          isExecuting && 'node-executing'
+          isExecuting && 'node-executing',
+          isInvertedDelegating && 'node-delegating-inverted'
         )}
       >
         <BaseNodeHeader className="mb-0 py-3">
@@ -38,9 +40,9 @@ export function FunctionToolNode(props: NodeProps & { data: FunctionToolNodeData
               </div>
               <BaseNodeHeaderTitle className="flex-1 truncate">{name}</BaseNodeHeaderTitle>
             </div>
-            {description?.trim() ? (
+            {description && (
               <p className="text-xs text-muted-foreground line-clamp-2 pl-7">{description}</p>
-            ) : null}
+            )}
           </div>
           {hasErrors && (
             <ErrorIndicator errors={nodeErrors} className="absolute -top-2 -right-2 w-6 h-6" />

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

@@ -1,4 +1,5 @@
 import { type NodeProps, Position } from '@xyflow/react';
+import type { FC, ReactNode } from 'react';
 import { getActiveTools } from '@/app/utils/active-tools';
 import { MCPToolImage } from '@/components/mcp-servers/mcp-tool-image';
 import { Badge } from '@/components/ui/badge';
@@ -11,6 +12,21 @@ import { Handle } from './handle';
 
 const TOOLS_SHOWN_LIMIT = 4;
 
+export const TruncateBadge: FC<{ children: ReactNode }> = ({ children }) => {
+  return (
+    <Badge
+      variant="code"
+      className={cn(
+        'text-2xs text-gray-700 dark:text-gray-300',
+        // Add ellipsis for long names
+        'truncate block max-w-full'
+      )}
+    >
+      {children}
+    </Badge>
+  );
+};
+
 export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
   const { data, selected } = props;
   const { toolLookup, agentToolConfigLookup, edges } = useAgentStore((state) => ({
@@ -77,6 +93,7 @@ export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
 
   const toolBadges = getToolDisplay();
   const isDelegating = data.status === 'delegating';
+  const isInvertedDelegating = data.status === 'inverted-delegating';
   const isExecuting = data.status === 'executing';
   const hasErrors = data.status === 'error';
   return (
@@ -85,22 +102,17 @@ export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
       className={cn(
         'rounded-4xl min-w-40 min-h-13 max-w-3xs',
         hasErrors && 'ring-2 ring-red-300 border-red-300',
-        isExecuting && 'node-executing'
+        isExecuting && 'node-executing',
+        isInvertedDelegating && 'node-delegating-inverted'
       )}
     >
       <BaseNodeHeader className="flex items-center justify-between gap-2">
         <MCPToolImage imageUrl={imageUrl} name={name} size={24} className="flex-shrink-0" />
         <BaseNodeHeaderTitle>{name}</BaseNodeHeaderTitle>
       </BaseNodeHeader>
-      <BaseNodeContent>
-        {toolBadges.map((label, index) => (
-          <Badge
-            key={index}
-            variant="code"
-            className="px-2 text-2xs text-gray-700 dark:text-gray-300 flex-shrink-0"
-          >
-            {label}
-          </Badge>
+      <BaseNodeContent className="flex-row gap-2 flex-wrap">
+        {toolBadges.map((label) => (
+          <TruncateBadge key={label}>{label}</TruncateBadge>
         ))}
       </BaseNodeContent>
       <Handle id={mcpNodeHandleId} type="target" position={Position.Top} isConnectable />

package/src/components/agent/nodes/sub-agent-node.tsx

@@ -1,6 +1,7 @@
 import { type NodeProps, Position } from '@xyflow/react';
 import { Bot, Component, Library, type LucideIcon } from 'lucide-react';
 import { useMemo } from 'react';
+import { TruncateBadge } from '@/components/agent/nodes/mcp-node';
 import { AnthropicIcon } from '@/components/icons/anthropic';
 import { GoogleIcon } from '@/components/icons/google';
 import { OpenAIIcon } from '@/components/icons/openai';
@@ -33,9 +34,7 @@ const ListSection = ({
       </div>
       <div className="flex flex-wrap gap-2">
         {items?.map((name) => (
-          <Badge key={name} className="text-xs" variant="code">
-            {name}
-          </Badge>
+          <TruncateBadge key={name}>{name}</TruncateBadge>
         ))}
       </div>
     </div>
@@ -72,6 +71,7 @@ export function SubAgentNode(props: NodeProps & { data: AgentNodeData }) {
     [data?.artifactComponents, artifactComponentLookup]
   );
   const isDelegating = status === 'delegating';
+  const isInvertedDelegating = status === 'inverted-delegating';
   const isExecuting = status === 'executing';
   return (
     <div className="relative">
@@ -81,7 +81,8 @@ export function SubAgentNode(props: NodeProps & { data: AgentNodeData }) {
         className={cn(
           isDefault && 'rounded-tl-none',
           hasErrors && 'ring-2 ring-red-300 border-red-300',
-          isExecuting && 'node-executing'
+          isExecuting && 'node-executing',
+          isInvertedDelegating && 'node-delegating-inverted'
         )}
         style={{ width: NODE_WIDTH }}
       >

package/src/components/agent/ship/ship-modal.tsx

@@ -82,8 +82,7 @@ const shipModalTabItems: TabItem[] = [
 ];
 
 export const ShipModal: FC<{ buttonClassName: string }> = ({ buttonClassName }) => {
-  const params = useParams();
-  const { tenantId, projectId } = params;
+  const { tenantId, projectId } = useParams();
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -92,7 +91,13 @@ export const ShipModal: FC<{ buttonClassName: string }> = ({ buttonClassName })
           Ship
         </Button>
       </DialogTrigger>
-      <DialogContent className="max-w-full! w-7xl" position="top" showCloseButton={false}>
+      <DialogContent
+        className="max-w-full! w-7xl"
+        position="top"
+        showCloseButton={false}
+        onWheel={(e) => e.stopPropagation()} // to make scroll work on the widgets
+        onTouchMove={(e) => e.stopPropagation()} // to make scroll work on the widgets
+      >
         <DialogHeader>
           <div className="flex items-center justify-between w-full gap-2">
             <DialogTitle>Talk to your agent</DialogTitle>

package/src/components/agent/sidepane/edges/edge-editor.tsx

@@ -20,6 +20,8 @@ type RelationshipOptionProps = {
   checked: boolean;
 };
 
+const REMOVE_DELEGATION_OPTION_ID = 'none';
+
 function RelationshipOption({ id, label, onCheckedChange, checked }: RelationshipOptionProps) {
   return (
     <div className="flex items-start gap-3">
@@ -47,6 +49,7 @@ type RelationshipSectionProps = {
   checkedValues: A2AEdgeData['relationships'];
   useRadio?: boolean;
   onRadioChange?: (value: string) => void;
+  defaultRadioValue?: string;
 };
 
 function RelationshipSection({
@@ -58,12 +61,23 @@ function RelationshipSection({
   checkedValues,
   useRadio = false,
   onRadioChange,
+  defaultRadioValue,
 }: RelationshipSectionProps) {
   const getRadioValue = () => {
     const checkedOption = options.find(
-      (opt) => checkedValues?.[opt.id as keyof A2AEdgeData['relationships']]
+      (opt) =>
+        (!defaultRadioValue || opt.id !== defaultRadioValue) &&
+        checkedValues?.[opt.id as keyof A2AEdgeData['relationships']]
     );
-    return checkedOption?.id || '';
+    if (checkedOption) {
+      return checkedOption.id;
+    }
+    // If no option is checked, return defaultRadioValue if it exists in options
+    if (defaultRadioValue) {
+      const defaultOption = options.find((opt) => opt.id === defaultRadioValue);
+      return defaultOption ? defaultRadioValue : '';
+    }
+    return '';
   };
 
   return (
@@ -210,7 +224,10 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
       delegateTargetToSource: false,
     };
 
-    if (value) {
+    if (value === REMOVE_DELEGATION_OPTION_ID) {
+      newRelationships.delegateSourceToTarget = false;
+      newRelationships.delegateTargetToSource = false;
+    } else if (value) {
       if (isSelfLoop && value === 'delegateSourceToTarget') {
         newRelationships.delegateSourceToTarget = true;
         newRelationships.delegateTargetToSource = true;
@@ -218,7 +235,6 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
         newRelationships[value as keyof A2AEdgeData['relationships']] = true;
       }
     }
-
     updateRelationships(newRelationships);
   };
 
@@ -285,6 +301,10 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
             </div>
           ),
         },
+        {
+          id: REMOVE_DELEGATION_OPTION_ID,
+          label: <div className="my-0.5 leading-[22px]">None</div>,
+        },
       ]
     : [
         {
@@ -315,6 +335,10 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
             </div>
           ),
         },
+        {
+          id: REMOVE_DELEGATION_OPTION_ID,
+          label: <div className="my-0.5 leading-[22px]">None</div>,
+        },
       ];
 
   return (
@@ -337,6 +361,7 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
         checkedValues={selectedEdge.data?.relationships as A2AEdgeData['relationships']}
         useRadio={true}
         onRadioChange={handleDelegateRadioChange}
+        defaultRadioValue={REMOVE_DELEGATION_OPTION_ID}
       />
       <Separator />
       <div className="flex justify-end">

package/src/components/agent/sidepane/metadata/metadata-editor.tsx

@@ -53,9 +53,8 @@ const ExecutionLimitInheritanceInfo = () => {
 };
 
 function MetadataEditor() {
-  const params = useParams();
+  const { agentId, tenantId, projectId } = useParams();
   const metadata = useAgentStore((state) => state.metadata);
-  const { agentId, tenantId, projectId } = params;
   const { id, name, description, contextConfig, models, stopWhen, prompt, statusUpdates } =
     metadata;
   const { PUBLIC_INKEEP_AGENTS_RUN_API_URL } = useRuntimeConfig();