@inkeep/agents-manage-ui 0.0.0-dev-20251018033935 → 0.0.0-dev-20251020213442

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

@@ -12,7 +12,9 @@ export enum A2AEdgeType {
 export enum EdgeType {
   A2A = 'a2a',
   A2AExternal = 'a2a-external',
-  Default = 'default',
+  // Built-in 'default' edges ignore the `data` prop.
+  // Use a custom edge type instead to access `data` in rendering.
+  Default = 'custom',
   SelfLoop = 'self-loop',
 }
 
@@ -23,6 +25,10 @@ export type A2AEdgeData = {
     delegateTargetToSource: boolean;
     delegateSourceToTarget: boolean;
   };
+  /**
+   * Indicates whether this node delegates its task to another node.
+   */
+  delegating: boolean | 'inverted';
 };
 
 export const edgeTypes = {

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

@@ -22,6 +22,8 @@ export interface MCPNodeData extends Record<string, unknown> {
   name?: string;
   imageUrl?: string;
   provider?: string;
+  isExecuting?: boolean;
+  isDelegating?: boolean;
 }
 
 // Re-export the shared type for consistency
@@ -36,6 +38,9 @@ export interface AgentNodeData extends Record<string, unknown> {
   artifactComponents?: string[];
   models?: AgentModels; // Use same structure as agent
   stopWhen?: SubAgentStopWhen;
+  isDefault?: boolean;
+  isExecuting?: boolean;
+  isDelegating?: boolean;
 }
 
 export interface ExternalAgentNodeData extends Record<string, unknown> {
@@ -57,6 +62,8 @@ export interface FunctionToolNodeData extends Record<string, unknown> {
   code?: string;
   inputSchema?: Record<string, unknown>;
   dependencies?: Record<string, unknown>;
+  isExecuting?: boolean;
+  isDelegating?: boolean;
 }
 
 export enum NodeType {

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

@@ -1,5 +1,6 @@
 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';
 
 interface AgentToAgentEdgeProps extends EdgeProps {
@@ -22,6 +23,7 @@ export function AgentToAgentEdge({
     delegateTargetToSource: false,
     delegateSourceToTarget: false,
   };
+  const delegating = data?.delegating;
 
   const hasDelegate = relationships.delegateTargetToSource || relationships.delegateSourceToTarget;
   const hasTransfer = relationships.transferTargetToSource || relationships.transferSourceToTarget;
@@ -86,16 +88,20 @@ export function AgentToAgentEdge({
   const delegateMarkerEnd =
     hasDelegate && relationships.delegateSourceToTarget ? getMarker(!!selected) : undefined;
 
+  const className =
+    selected || delegating ? '!stroke-primary' : '!stroke-border dark:!stroke-muted-foreground';
+
   return (
     <>
+      {/* Animated circles based on delegating direction */}
+      {delegating && <AnimatedCircle edgePath={edgePath} inverted={delegating === 'inverted'} />}
+
       {/* Render transfer path (solid line) */}
       {hasTransfer && (
         <BaseEdge
-          className={`${selected ? '!stroke-primary' : '!stroke-border dark:!stroke-muted-foreground'}`}
+          className={className}
           path={hasDelegate ? calculateOffsetPath(-3)[0] : edgePath}
-          style={{
-            strokeWidth: 2,
-          }}
+          style={{ strokeWidth: 2 }}
           markerEnd={transferMarkerEnd}
           markerStart={transferMarkerStart}
         />
@@ -104,7 +110,7 @@ export function AgentToAgentEdge({
       {/* Render delegate path (dashed line) */}
       {hasDelegate && (
         <BaseEdge
-          className={`${selected ? '!stroke-primary' : '!stroke-border dark:!stroke-muted-foreground'}`}
+          className={className}
           path={hasTransfer ? calculateOffsetPath(3)[0] : edgePath}
           style={{
             strokeDasharray: '5,5',

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

@@ -1,6 +1,39 @@
 import { BaseEdge, type EdgeProps, getBezierPath } from '@xyflow/react';
+import { type FC, useRef, useEffect } from 'react';
 
-type DefaultEdgeProps = EdgeProps;
+type DefaultEdgeProps = EdgeProps & {
+  data?: {
+    delegating: boolean | 'inverted';
+  };
+};
+
+export const AnimatedCircle: FC<{ edgePath: string; inverted: boolean }> = ({
+  edgePath,
+  inverted,
+}) => {
+  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]);
+
+  return (
+    <circle fill="var(--primary)" r="6">
+      <animateMotion
+        ref={ref}
+        dur="2s"
+        path={edgePath}
+        {...(inverted && {
+          pathLength: '1',
+          keyPoints: '1;0',
+          keyTimes: '0;1',
+        })}
+      />
+    </circle>
+  );
+};
 
 export function DefaultEdge({
   id,
@@ -13,6 +46,7 @@ export function DefaultEdge({
   label,
   selected,
   markerEnd,
+  data,
 }: DefaultEdgeProps) {
   const [edgePath] = getBezierPath({
     sourceX,
@@ -23,16 +57,25 @@ export function DefaultEdge({
     targetPosition,
   });
 
+  const className =
+    selected || data?.delegating
+      ? '!stroke-primary'
+      : '!stroke-border dark:!stroke-muted-foreground';
+
   return (
-    <BaseEdge
-      id={id}
-      path={edgePath}
-      label={label}
-      markerEnd={markerEnd}
-      style={{
-        strokeWidth: 2,
-      }}
-      className={`${selected ? '!stroke-primary' : '!stroke-border dark:!stroke-muted-foreground'}`}
-    />
+    <>
+      {/* Animated circles based on delegating direction */}
+      {data?.delegating && (
+        <AnimatedCircle edgePath={edgePath} inverted={data.delegating === 'inverted'} />
+      )}
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        label={label}
+        markerEnd={markerEnd}
+        style={{ strokeWidth: 2 }}
+        className={className}
+      />
+    </>
   );
 }

package/src/components/agent/node-library/node-item.tsx

@@ -23,7 +23,7 @@ export function NodeItem({ node }: NodeItemProps) {
       role="button"
       tabIndex={disabled ? -1 : 0}
       aria-label={`Drag ${name} node`}
-      className="border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 flex font-medium items-center text-sm rounded-md p-2 justify-between gap-2 text-left h-auto w-full group group-hover:bg-muted/50 transition-all ease-in-out duration-200 cursor-grab active:cursor-grabbing"
+      className="backdrop-blur-3xl border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 flex font-medium items-center text-sm rounded-md p-2 justify-between gap-2 text-left h-auto w-full group group-hover:bg-muted/50 transition-all ease-in-out duration-200 cursor-grab active:cursor-grabbing"
       draggable={!disabled}
       onDragStart={(e) => onDragStart(e, node)}
     >

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

@@ -1,30 +1,25 @@
-import { forwardRef, type HTMLAttributes } from 'react';
+import { type FC, forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '@/lib/utils';
 
 interface BaseNodeProps extends HTMLAttributes<HTMLDivElement> {
   isSelected?: boolean;
 }
 
-export const BaseNode = forwardRef<HTMLDivElement, BaseNodeProps>(
-  ({ className, isSelected, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'relative rounded-lg border bg-card text-card-foreground',
-        'hover:ring-2 hover:ring-gray-700/5',
-        // React Flow displays node elements inside of a `NodeWrapper` component,
-        // which compiles down to a div with a the 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-primary',
-        className
-      )}
-      // tabIndex={0}
-      {...props}
-    />
-  )
+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`.
+      // 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',
+      className
+    )}
+    // tabIndex={0}
+    {...props}
+  />
 );
-BaseNode.displayName = 'BaseNode';
 
 /**
  * A container for a consistent header layout intended to be used inside the

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

@@ -9,10 +9,11 @@ import { ErrorIndicator } from '../error-display/error-indicator';
 import { BaseNode, BaseNodeContent, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
 import { Handle } from './handle';
 import { NodeTab } from './node-tab';
+import { cn } from '@/lib/utils';
 
 export function ExternalAgentNode(props: NodeProps & { data: AgentNodeData }) {
   const { data, selected, id } = props;
-  const { name, description } = data;
+  const { name, description, isExecuting } = data;
   const { getNodeErrors, hasNodeErrors } = useAgentErrors();
 
   // Use the agent ID from node data if available, otherwise fall back to React Flow node ID
@@ -22,10 +23,14 @@ export function ExternalAgentNode(props: NodeProps & { data: AgentNodeData }) {
 
   return (
     <div className="relative">
-      <NodeTab selected={selected}>External</NodeTab>
+      <NodeTab isSelected={selected}>External</NodeTab>
       <BaseNode
-        isSelected={selected}
-        className={`rounded-tl-none ${hasErrors ? 'ring-2 ring-red-300 border-red-300' : ''}`}
+        isSelected={selected || data.isDelegating}
+        className={cn(
+          'rounded-tl-none',
+          hasErrors && 'ring-2 ring-red-300 border-red-300',
+          isExecuting && 'node-executing'
+        )}
         style={{ width: NODE_WIDTH }}
       >
         <BaseNodeHeader className="flex items-center justify-between gap-2">

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

@@ -5,6 +5,7 @@ import { type FunctionToolNodeData, functionToolNodeHandleId } from '../configur
 import { ErrorIndicator } from '../error-display/error-indicator';
 import { BaseNode, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
 import { Handle } from './handle';
+import { cn } from '@/lib/utils';
 
 export function FunctionToolNode(props: NodeProps & { data: FunctionToolNodeData }) {
   const { data, selected, id } = props;
@@ -21,8 +22,12 @@ export function FunctionToolNode(props: NodeProps & { data: FunctionToolNodeData
   return (
     <div className="relative">
       <BaseNode
-        isSelected={selected}
-        className={`rounded-4xl min-w-40 max-w-xs ${hasErrors ? 'ring-2 ring-red-300 border-red-300' : ''}`}
+        isSelected={selected || data.isDelegating}
+        className={cn(
+          'rounded-4xl min-w-40 max-w-xs',
+          hasErrors && 'ring-2 ring-red-300 border-red-300',
+          data.isExecuting && 'node-executing'
+        )}
       >
         <BaseNodeHeader className="mb-0 py-3">
           <div className="flex flex-col gap-1.5">

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

@@ -5,8 +5,9 @@ import { Badge } from '@/components/ui/badge';
 import { useAgentStore } from '@/features/agent/state/use-agent-store';
 import { getCurrentSelectedToolsForNode } from '@/lib/utils/orphaned-tools-detector';
 import { type MCPNodeData, mcpNodeHandleId } from '../configuration/node-types';
-import { BaseNode, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
+import { BaseNode, BaseNodeContent, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
 import { Handle } from './handle';
+import { cn } from '@/lib/utils';
 
 const TOOLS_SHOWN_LIMIT = 4;
 
@@ -78,32 +79,34 @@ export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
   const toolBadges = getToolDisplay();
 
   return (
-    <BaseNode isSelected={selected} className="rounded-4xl min-w-40 min-h-13 max-w-3xs">
-      <BaseNodeHeader className="mb-0 py-3">
-        <div className="flex items-center flex-wrap gap-1">
-          <div className="flex items-center gap-2 flex-shrink-0 mr-4">
-            <MCPToolImage
-              imageUrl={imageUrl}
-              name={name}
-              provider={provider || undefined}
-              size={24}
-              className="mt-[1px] flex-shrink-0"
-            />
-            <BaseNodeHeaderTitle className="flex-shrink-0">{name}</BaseNodeHeaderTitle>
-          </div>
-          <div className="flex items-center flex-wrap gap-1">
-            {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>
-            ))}
-          </div>
-        </div>
+    <BaseNode
+      isSelected={selected || data.isDelegating}
+      className={cn(
+        'rounded-4xl min-w-40 min-h-13 max-w-3xs',
+        data.isExecuting && 'node-executing'
+      )}
+    >
+      <BaseNodeHeader className="flex items-center justify-between gap-2">
+          <MCPToolImage
+            imageUrl={imageUrl}
+            name={name}
+            provider={provider || undefined}
+            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>
       <Handle id={mcpNodeHandleId} type="target" position={Position.Top} isConnectable />
     </BaseNode>
   );

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

@@ -1,16 +1,17 @@
+import type { FC, ReactNode } from 'react';
 import { cn } from '@/lib/utils';
 
 interface NodeTabProps {
-  selected: boolean;
-  children: React.ReactNode;
+  isSelected?: boolean;
+  children: ReactNode;
 }
 
-export function NodeTab({ selected, children }: NodeTabProps) {
+export const NodeTab: FC<NodeTabProps> = ({ isSelected, children }) => {
   return (
     <div
       className={cn(
-        ' px-2 py-0.5 rounded-t-md flex items-center gap-2 w-fit border border-b-0 font-medium font-mono text-xs uppercase',
-        selected
+        'px-2 py-0.5 rounded-t-md flex items-center gap-2 w-fit border border-b-0 font-medium font-mono text-xs uppercase',
+        isSelected
           ? 'bg-primary border-primary text-white ring-2 ring-primary'
           : 'bg-muted text-muted-foreground border-border'
       )}
@@ -18,4 +19,4 @@ export function NodeTab({ selected, children }: NodeTabProps) {
       {children}
     </div>
   );
-}
+};

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

@@ -14,6 +14,7 @@ import { ErrorIndicator } from '../error-display/error-indicator';
 import { BaseNode, BaseNodeContent, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
 import { Handle } from './handle';
 import { NodeTab } from './node-tab';
+import { cn } from '@/lib/utils';
 
 const ListSection = ({
   title,
@@ -73,10 +74,14 @@ export function SubAgentNode(props: NodeProps & { data: AgentNodeData }) {
 
   return (
     <div className="relative">
-      {isDefault ? <NodeTab selected={selected}>Default</NodeTab> : null}
+      {isDefault && <NodeTab isSelected={selected || data.isDelegating}>Default</NodeTab>}
       <BaseNode
-        isSelected={selected}
-        className={`${isDefault ? 'rounded-tl-none' : ''} ${hasErrors ? 'ring-2 ring-red-300 border-red-300' : ''}`}
+        isSelected={selected || data.isDelegating}
+        className={cn(
+          isDefault && 'rounded-tl-none',
+          hasErrors && 'ring-2 ring-red-300 border-red-300',
+          data.isExecuting && 'node-executing'
+        )}
         style={{ width: NODE_WIDTH }}
       >
         <BaseNodeHeader className="flex items-center justify-between gap-2">

package/src/components/agent/toolbar/toolbar.tsx

@@ -1,5 +1,5 @@
 import { Play, Settings } from 'lucide-react';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, type ComponentProps } from 'react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useAgentStore } from '@/features/agent/state/use-agent-store';
@@ -20,14 +20,20 @@ export function Toolbar({
 }: ToolbarProps) {
   const dirty = useAgentStore((state) => state.dirty);
   const saveButtonRef = useRef<HTMLButtonElement>(null);
+
+  const commonProps: ComponentProps<typeof Button> = {
+    className: 'backdrop-blur-3xl',
+    type: 'button',
+    variant: 'outline',
+  };
+
   const PreviewButton = (
     <Button
+      {...commonProps}
       disabled={dirty || inPreviewDisabled}
-      variant="outline"
-      type="button"
       onClick={() => setShowPlayground(true)}
     >
-      <Play className="w-4 h-4 text-muted-foreground" />
+      <Play className="size-4 text-muted-foreground" />
       Try it
     </Button>
   );
@@ -48,10 +54,14 @@ export function Toolbar({
   }, []);
 
   return (
-    <div className="flex gap-2">
+    <div className="flex gap-2 flex-wrap justify-end content-start">
       {dirty || inPreviewDisabled ? (
         <Tooltip>
           <TooltipTrigger asChild>
+            {/**
+             * Wrap the disabled button in a <div> that can receive hover events since disabled <button> elements
+             * don’t trigger pointer events in the browser
+             **/}
             <div>{PreviewButton}</div>
           </TooltipTrigger>
           <TooltipContent>
@@ -64,6 +74,7 @@ export function Toolbar({
         PreviewButton
       )}
       <Button
+        {...commonProps}
         onClick={onSubmit}
         variant={dirty ? 'default' : 'outline'}
         disabled={!dirty && !inPreviewDisabled}
@@ -71,8 +82,8 @@ export function Toolbar({
       >
         {inPreviewDisabled ? 'Save' : 'Save changes'}
       </Button>
-      <Button type="button" variant="outline" onClick={toggleSidePane}>
-        <Settings className="w-4 h-4" />
+      <Button {...commonProps} onClick={toggleSidePane}>
+        <Settings className="size-4" />
         Agent Settings
       </Button>
     </div>

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

@@ -259,7 +259,7 @@ export function serializeAgentData(
         ...(stopWhen && { stopWhen }),
       };
 
-      if ((node.data as any).isDefault) {
+      if (node.data.isDefault) {
         defaultSubAgentId = subAgentId;
       }
 
@@ -280,7 +280,7 @@ export function serializeAgentData(
         credentialReferenceId: (node.data.credentialReferenceId as string) || null,
       };
 
-      if ((node.data as any).isDefault) {
+      if (node.data.isDefault) {
         defaultSubAgentId = subAgentId;
       }
 

package/.next/standalone/agents-manage-ui/.next/server/chunks/1213.js

@@ -1 +0,0 @@
-"use strict";exports.id=1213,exports.ids=[1213],exports.modules={25498:(a,b,c)=>{c.r(b),c.d(b,{"40dcefeb381a5213090206da357ef95ff10446057d":()=>d.bW,"6075560ff8b706329b9472cd9ba11dfcbfd45223b6":()=>d.qf,"609d043dec93e6bdcdea2e716cd9ae1e482e2366da":()=>d.gL,"60bd5203c8bca4853e6eeb937b011d9c1e4e9d63fb":()=>d.Dv,"60d8914a16ea8e574f99e1c01192972ad4b5709393":()=>p,"7035be8f2ca98959c6f8d0cb8a2aa3281d4763fbef":()=>q,"7071f7f69d35912805a385ac5a910f6ab45e66cc96":()=>d.Tg,"70ce184243b59224f4a8c4d6da522a40c570f046c6":()=>r,"70f59614abb2d675176ed45033918b0efc090d4a1c":()=>s});var d=c(72025),e=c(29991);c(58415);var f=c(83248),g=c(8703),h=c(45796),i=c(33451);async function j(a,b){return(0,h.M2)(a),(0,h.nt)(b),await (0,g.J)(`tenants/${a}/projects/${b}/artifact-components`)}async function k(a,b,c){return(0,h.M2)(a),(0,h.nt)(b),(await (0,g.J)(`tenants/${a}/projects/${b}/artifact-components/${c}`)).data}async function l(a,b,c){return(0,h.M2)(a),(0,h.nt)(b),(await (0,g.J)(`tenants/${a}/projects/${b}/artifact-components`,{method:"POST",body:JSON.stringify(c)})).data}async function m(a,b,c){return(0,h.M2)(a),(0,h.nt)(b),(await (0,g.J)(`tenants/${a}/projects/${b}/artifact-components/${c.id}`,{method:"PUT",body:JSON.stringify(c)})).data}async function n(a,b,c){(0,h.M2)(a),(0,h.nt)(b),await (0,g.J)(`tenants/${a}/projects/${b}/artifact-components/${c}`,{method:"DELETE"})}(0,i.D)([j,k,l,m,n]),(0,e.A)(j,"60a9ea07cb0b745ddfbe5900068e3f1ff21d912a4b",null),(0,e.A)(k,"708a7dc847fe4b3e77e18aabc4ee3f54f911c04cc9",null),(0,e.A)(l,"709a0d0d4c5be6e15c53cf1340f939f2d904294c65",null),(0,e.A)(m,"704be9598808f9944c78b0730bf6e78de7f5084803",null),(0,e.A)(n,"70ea5711c7d43ac6daf61568dcfd27e195f30f20da",null);var o=c(36608);async function p(a,b){try{let c=await j(a,b);return{success:!0,data:c.data}}catch(a){if(a instanceof o.h)return{success:!1,error:a.message,code:a.error.code};return{success:!1,error:a instanceof Error?a.message:"Unknown error occurred",code:"unknown_error"}}}async function q(a,b,c){try{let d=await l(a,b,c);return(0,f.revalidatePath)(`/${a}/projects/${b}/artifacts`),{success:!0,data:d}}catch(a){if(a instanceof o.h)return{success:!1,error:a.message,code:a.error.code};return{success:!1,error:a instanceof Error?a.message:"Unknown error occurred",code:"unknown_error"}}}async function r(a,b,c){try{let d=await m(a,b,c);return(0,f.revalidatePath)(`/${a}/projects/${b}/artifacts`),(0,f.revalidatePath)(`/${a}/projects/${b}/artifacts/${c.id}`),{success:!0,data:d}}catch(a){if(a instanceof o.h)return{success:!1,error:a.message,code:a.error.code};return{success:!1,error:a instanceof Error?a.message:"Unknown error occurred",code:"unknown_error"}}}async function s(a,b,c){try{return await n(a,b,c),(0,f.revalidatePath)(`/${a}/projects/${b}/artifacts`),(0,f.revalidatePath)(`/${a}/projects/${b}/artifacts/${c}`),{success:!0}}catch(a){if(a instanceof o.h)return{success:!1,error:a.message,code:a.error.code};return{success:!1,error:a instanceof Error?a.message:"Unknown error occurred",code:"unknown_error"}}}(0,i.D)([p,q,r,s]),(0,e.A)(p,"60d8914a16ea8e574f99e1c01192972ad4b5709393",null),(0,e.A)(q,"7035be8f2ca98959c6f8d0cb8a2aa3281d4763fbef",null),(0,e.A)(r,"70ce184243b59224f4a8c4d6da522a40c570f046c6",null),(0,e.A)(s,"70f59614abb2d675176ed45033918b0efc090d4a1c",null)},29160:(a,b,c)=>{c.r(b),c.d(b,{default:()=>h,dynamic:()=>g});var d=c(72669),e=c(45907),f=c(54637);let g="force-dynamic";async function h({children:a,params:b}){let{tenantId:c,projectId:g}=await b;try{await (0,f.Sw)(c,g)}catch(a){return(0,d.jsx)(e.default,{error:a,context:"project"})}return(0,d.jsx)(d.Fragment,{children:a})}},32582:(a,b,c)=>{c.d(b,{ArtifactComponentForm:()=>x});var d=c(59111),e=c(6614),f=c(485),g=c(75823),h=c(68156),i=c(17130),j=c(16426),k=c(56019),l=c(2856),m=c(93622),n=c(35283),o=c(90147);let p=(0,o.createServerReference)("70ce184243b59224f4a8c4d6da522a40c570f046c6",o.callServer,void 0,o.findSourceMapURL,"updateArtifactComponentAction"),q=(0,o.createServerReference)("7035be8f2ca98959c6f8d0cb8a2aa3281d4763fbef",o.callServer,void 0,o.findSourceMapURL,"createArtifactComponentAction");var r=c(42723);let s={id:"",name:"",description:"",props:void 0};var t=c(34576),u=c(80974),v=c(62503);let w=t.object({id:v.f,name:t.string().min(1,"Name is required."),description:t.string().min(1,"Description is required."),props:t.union([t.string(),t.null(),t.undefined()]).transform((a,b)=>{if(a&&""!==a&&null!==a)try{let c=JSON.parse(a),d=(0,u._O)(a);if(!d.isValid){let a=d.errors[0]?.message||"Invalid JSON schema";return b.addIssue({code:t.ZodIssueCode.custom,message:a}),t.NEVER}return c}catch(a){return b.addIssue({code:t.ZodIssueCode.custom,message:(0,u.SR)(a)}),t.NEVER}}).optional()});function x({id:a,tenantId:b,projectId:c,initialData:o}){let t=(0,g.mN)({resolver:(0,e.u)(w),defaultValues:(a=>{if(!a)return s;let b={...a};return b.props&&(b.props=(0,r.S_)(b.props)),b})(o)}),{isSubmitting:u}=t.formState,v=(0,f.useRouter)();(0,n.S)({form:t,nameField:"name",idField:"id",isEditing:!!a});let x=async d=>{try{let e={...d};if(void 0===e.props&&(e.props=null),a){let a=await p(b,c,e);if(!a.success)return void h.oR.error(a.error||"Failed to update artifact.");h.oR.success("Artifact updated.")}else{let a=await q(b,c,e);if(!a.success)return void h.oR.error(a.error||"Failed to create artifact");h.oR.success("Artifact created."),v.push(`/${b}/projects/${c}/artifacts`)}}catch(b){console.error("Error submitting artifact:",b);let a=b instanceof Error?b.message:"An unexpected error occurred.";h.oR.error(a)}};return(0,d.jsx)(m.lV,{...t,children:(0,d.jsxs)("form",{onSubmit:t.handleSubmit(x),className:"space-y-8",children:[(0,d.jsx)(i.a,{control:t.control,name:"name",label:"Name",placeholder:"Document Artifact",isRequired:!0}),(0,d.jsx)(i.a,{control:t.control,name:"id",label:"Id",placeholder:"my-artifact",disabled:!!a,isRequired:!0,description:a?"":"Choose a unique identifier for this artifact. Using an existing id will replace that artifact."}),(0,d.jsx)(j.K,{control:t.control,name:"description",label:"Description",placeholder:"Structured factual information extracted from search results",className:"min-h-[80px]",isRequired:!0}),(0,d.jsx)(k.S,{control:t.control,name:"props",label:"Props (JSON schema with inPreview indicators)",placeholder:"Enter a valid JSON Schema with inPreview flags, or leave empty to save entire tool result...",description:"Optional: Define specific fields with inPreview flags, or leave empty to capture the complete tool response."}),(0,d.jsx)(l.$,{type:"submit",disabled:u,children:"Save"})]})})}},39878:(a,b,c)=>{c.d(b,{$:()=>i});var d=c(59111),e=c(2856),f=c(80974),g=c(42723),h=c(67466);function i(a){return(0,d.jsxs)("div",{"data-slot":"json-editor",className:`space-y-3 relative overflow-hidden p-1 ${a.className||""}`,children:[(0,d.jsxs)("div",{className:"flex items-center gap-2 absolute top-3 right-3 z-10",children:[!a.value?.trim()&&(0,d.jsx)(e.$,{type:"button",onClick:()=>{let b=(0,f.Qj)();a.onChange(b)},variant:"outline",size:"sm",className:"h-6 px-2 text-xs rounded-sm",children:"Template"}),(0,d.jsx)(e.$,{type:"button",onClick:()=>{let b=a.value;if(b?.trim()){let c=(0,g.IB)(b);a.onChange(c)}},variant:"outline",size:"sm",className:"h-6 px-2 text-xs rounded-sm",disabled:!a.value?.trim(),children:"Format"})]}),(0,d.jsx)(h.i,{value:a.value||"",onChange:a.onChange,placeholder:a.placeholder,disabled:a.disabled,readOnly:a.readOnly})]})}},44733:(a,b,c)=>{c.d(b,{ArtifactComponentForm:()=>d});let d=(0,c(60241).registerClientReference)(function(){throw Error("Attempted to call ArtifactComponentForm() from the server but ArtifactComponentForm is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.")},"/home/runner/work/agents/agents/agents-manage-ui/src/components/artifact-components/form/artifact-component-form.tsx","ArtifactComponentForm")},56019:(a,b,c)=>{c.d(b,{S:()=>g});var d=c(59111),e=c(71771),f=c(39878);function g({control:a,name:b,label:c="JSON Schema",placeholder:g,disabled:h,description:i,readOnly:j,isRequired:k=!1}){return(0,d.jsx)(e.u,{control:a,name:b,label:c,description:i,isRequired:k,children:a=>(0,d.jsx)(f.$,{placeholder:g,...a,onChange:a.onChange,readOnly:j,disabled:h})})}},62503:(a,b,c)=>{c.d(b,{f:()=>d});let d=c(34576).string().min(1,"Id is required.").max(64,"Id must be less than 64 characters.").regex(/^[a-zA-Z0-9_-]+$/,"Id must contain only alphanumeric characters, underscores, and dashes. No spaces allowed.")},80974:(a,b,c)=>{c.d(b,{Qj:()=>k,SR:()=>l,_O:()=>j});var d=c(7352),e=c(43381);let f=d.ZU.Object({type:d.ZU.Union([d.ZU.Literal("string"),d.ZU.Literal("number"),d.ZU.Literal("integer"),d.ZU.Literal("boolean"),d.ZU.Literal("array"),d.ZU.Literal("object"),d.ZU.Literal("null")]),description:d.ZU.String({minLength:1}),format:d.ZU.Optional(d.ZU.String()),pattern:d.ZU.Optional(d.ZU.String()),minimum:d.ZU.Optional(d.ZU.Number()),maximum:d.ZU.Optional(d.ZU.Number()),minLength:d.ZU.Optional(d.ZU.Number()),maxLength:d.ZU.Optional(d.ZU.Number()),items:d.ZU.Optional(d.ZU.Any()),properties:d.ZU.Optional(d.ZU.Any()),enum:d.ZU.Optional(d.ZU.Array(d.ZU.Any())),const:d.ZU.Optional(d.ZU.Any()),default:d.ZU.Optional(d.ZU.Any())}),g=d.ZU.Object({type:d.ZU.Literal("object"),properties:d.ZU.Record(d.ZU.String(),f),required:d.ZU.Array(d.ZU.String(),{minItems:1}),additionalProperties:d.ZU.Optional(d.ZU.Boolean()),description:d.ZU.Optional(d.ZU.String())}),h=e.gv.Compile(f),i=e.gv.Compile(g);function j(a){let b=[],{parsed:c,errors:d}=function(a){let b=[],c=null;if(!a?.trim())return{parsed:null,errors:b};try{c=JSON.parse(a)}catch(a){b.push({path:"root",message:a instanceof Error?a.message:"Invalid JSON syntax",type:"syntax"})}return{parsed:c,errors:b}}(a);if(d.length>0)return{isValid:!1,errors:d,warnings:b};if(!c)return{isValid:!0,errors:[],warnings:["Empty schema provided"]};let e=[...function(a){let b=[];return a&&"object"==typeof a?!i.Check(a)&&(a.type&&"object"===a.type||b.push({path:"type",message:'Schema must have type: "object" for LLM compatibility',type:"llm_requirement"}),a.properties&&"object"==typeof a.properties||b.push({path:"properties",message:'Schema must have a "properties" object',type:"schema"}),a.required&&Array.isArray(a.required)||b.push({path:"required",message:'Schema must have a "required" array (can be empty)',type:"llm_requirement"}),a.properties&&"object"==typeof a.properties&&Object.entries(a.properties).forEach(([a,c])=>{h.Check(c)||[...h.Errors(c)].forEach(c=>{let d=c.message;"/description"===c.path?d='Each property must have a "description" for LLM compatibility':"/type"===c.path&&(d='Each property must have a valid "type"'),b.push({path:`properties.${a}${c.path}`,message:d,type:"/description"===c.path?"llm_requirement":"schema"})})})):b.push({path:"root",message:"Schema must be an object",type:"schema"}),b}(c),...function(a){let b=[];return a&&"object"==typeof a&&(a.required&&Array.isArray(a.required)&&a.properties&&a.required.forEach(c=>{a.properties[c]||b.push({path:"required",message:`Required property "${c}" must exist in properties`,type:"schema"})}),a.properties&&"object"==typeof a.properties&&Object.entries(a.properties).forEach(([a,c])=>{c.description&&"string"==typeof c.description&&0!==c.description.trim().length||b.push({path:`properties.${a}.description`,message:"Each property must have a non-empty description for LLM compatibility",type:"llm_requirement"})})),b}(c)];return{isValid:0===e.length,errors:e,warnings:b}}function k(){return JSON.stringify({type:"object",properties:{example_property:{type:"string",description:"Description of what this property represents"}},required:["example_property"]},null,2)}function l(a){if(a instanceof SyntaxError){let b=a.message.toLowerCase();return b.includes("unexpected end of json input")?"Incomplete JSON - missing closing brackets or quotes":b.includes("unexpected token")?"Invalid character in JSON - check for missing commas, quotes, or brackets":b.includes("expected property name")||b.includes("expected ':' after property name")?"Property names must be in double quotes":b.includes("duplicate keys")?"Duplicate property names are not allowed":"Invalid JSON syntax - check structure and formatting"}return"Unable to parse JSON"}},93056:(a,b,c)=>{c.r(b),c.d(b,{default:()=>j});var d=c(72669),e=c(17932),f=c(96737),g=c(39885),h=c(3687),i=c(43461);function j(){return(0,d.jsx)(e.H,{breadcrumbs:[{label:"Artifacts"}],children:(0,d.jsxs)(f.D,{children:[(0,d.jsx)(g.zY,{title:"Artifacts",description:i.lh}),(0,d.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4",children:Array.from({length:6}).map((a,b)=>(0,d.jsx)(h.E,{className:"h-36 w-full rounded-lg"},`loading-artifact-${b}`))})]})})}}};