@inkeep/agents-manage-ui 0.1.0

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

@@ -0,0 +1,196 @@
+import type { Node } from '@xyflow/react';
+import { useParams } from 'next/navigation';
+import { useCallback } from 'react';
+import type { ErrorHelpers } from '@/hooks/use-graph-errors';
+import { useNodeEditor } from '@/hooks/use-node-editor';
+import { useProjectData } from '@/hooks/use-project-data';
+import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import type { ArtifactComponent } from '@/lib/api/artifact-components';
+import type { DataComponent } from '@/lib/api/data-components';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  InheritanceIndicator,
+  getExecutionLimitInheritanceStatus,
+} from '@/components/ui/inheritance-indicator';
+import type { AgentNodeData } from '../../configuration/node-types';
+import { ComponentSelector } from './component-selector/component-selector';
+import { ExpandableTextArea } from './expandable-text-area';
+import { InputField, TextareaField } from './form-fields';
+import { ModelSection } from './model-section';
+
+interface AgentNodeEditorProps {
+  selectedNode: Node<AgentNodeData>;
+  dataComponentLookup: Record<string, DataComponent>;
+  artifactComponentLookup: Record<string, ArtifactComponent>;
+  errorHelpers?: ErrorHelpers;
+}
+
+export function AgentNodeEditor({
+  selectedNode,
+  dataComponentLookup,
+  artifactComponentLookup,
+  errorHelpers,
+}: AgentNodeEditorProps) {
+  const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
+  const selectedDataComponents = selectedNode.data?.dataComponents || [];
+  const selectedArtifactComponents = selectedNode.data?.artifactComponents || [];
+  
+  // Get project and graph data for inheritance indicators
+  const { project } = useProjectData();
+  const metadata = useGraphStore((state) => state.metadata);
+
+  const { updatePath, updateNestedPath, getFieldError, setFieldRef } = useNodeEditor({
+    selectedNodeId: selectedNode.id,
+    errorHelpers,
+  });
+
+  // Create a wrapper function that provides the current node data for nested updates
+  const updateModelPath = useCallback(
+    (path: string, value: any) => {
+      updateNestedPath(path, value, selectedNode.data);
+    },
+    [updateNestedPath, selectedNode.data]
+  );
+
+  return (
+    <div className="space-y-8 flex flex-col">
+      <InputField
+        ref={(el) => setFieldRef('id', el)}
+        id="id"
+        name="id"
+        label="Id"
+        value={selectedNode.data.id || ''}
+        onChange={(e) => updatePath('id', e.target.value)}
+        placeholder="my-agent"
+        error={getFieldError('id')}
+        description="Choose a unique identifier for this agent. Using an existing id will replace that agent."
+      />
+
+      <InputField
+        ref={(el) => setFieldRef('name', el)}
+        id="name"
+        name="name"
+        label="Name"
+        value={selectedNode.data.name || ''}
+        onChange={(e) => updatePath('name', e.target.value)}
+        placeholder="Support agent"
+        error={getFieldError('name')}
+      />
+
+      <TextareaField
+        ref={(el) => setFieldRef('description', el)}
+        id="description"
+        name="description"
+        label="Description"
+        value={selectedNode.data.description || ''}
+        onChange={(e) => updatePath('description', e.target.value)}
+        placeholder="This agent is responsible for..."
+        error={getFieldError('description')}
+      />
+
+      <div className="space-y-2">
+        <ExpandableTextArea
+          ref={(el) => setFieldRef('prompt', el)}
+          id="prompt"
+          name="prompt"
+          value={selectedNode.data.prompt || ''}
+          onChange={(e) => updatePath('prompt', e.target.value)}
+          placeholder="You are a helpful assistant..."
+          data-invalid={errorHelpers?.hasFieldError('prompt') ? '' : undefined}
+          className="w-full max-h-96 data-invalid:border-red-300 data-invalid:focus-visible:border-red-300 data-invalid:focus-visible:ring-red-300"
+          label="Prompt"
+        />
+        {getFieldError('prompt') && (
+          <p className="text-sm text-red-600">{getFieldError('prompt')}</p>
+        )}
+      </div>
+
+      <ModelSection 
+        models={selectedNode.data.models} 
+        updatePath={updateModelPath}
+        projectModels={project?.models}
+        graphModels={metadata?.models}
+      />
+
+      {/* Agent Execution Limits */}
+      <div className="space-y-4">
+        <div>
+          <h3 className="text-sm font-medium">Execution Limits</h3>
+          <p className="text-xs text-muted-foreground mt-1">
+            Configure agent-level execution limits for steps within this agent.
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Label htmlFor="step-count">Max Steps</Label>
+            <InheritanceIndicator
+              {...getExecutionLimitInheritanceStatus(
+                'agent',
+                'stepCountIs',
+                selectedNode.data.stopWhen?.stepCountIs,
+                project?.stopWhen?.stepCountIs
+              )}
+              size="sm"
+            />
+          </div>
+          <Input
+            id="step-count"
+            type="number"
+            min="1"
+            max="1000"
+            value={selectedNode.data.stopWhen?.stepCountIs || ''}
+            onChange={(e) => {
+              const value = e.target.value ? parseInt(e.target.value, 10) : undefined;
+              updatePath('stopWhen', {
+                ...(selectedNode.data.stopWhen || {}),
+                stepCountIs: value,
+              });
+            }}
+            placeholder="50"
+          />
+          <p className="text-xs text-muted-foreground">
+            Maximum number of execution steps for this agent (defaults to 50 if not set)
+          </p>
+        </div>
+
+        <div className="text-xs text-muted-foreground p-3 bg-blue-50 dark:bg-blue-950/20 rounded-md border border-blue-200 dark:border-blue-800">
+          <p className="font-medium text-blue-900 dark:text-blue-100 mb-2">How execution limit inheritance works:</p>
+          <ul className="space-y-1 text-blue-800 dark:text-blue-200">
+            <li>• <strong>stepCountIs</strong>: Project → Agent only (agent-level execution limit)</li>
+            <li>• <strong>Explicit settings</strong> always take precedence over inherited values</li>
+            <li>• <strong>Agent scope</strong>: This limit applies only to this specific agent's execution steps</li>
+            <li>• <strong>Independent from transfers</strong>: Steps are counted per agent, transfers are counted per conversation</li>
+          </ul>
+        </div>
+      </div>
+
+      <ComponentSelector
+        label="Data components"
+        componentLookup={dataComponentLookup}
+        selectedComponents={selectedDataComponents}
+        onSelectionChange={(newSelection) => {
+          updatePath('dataComponents', newSelection);
+        }}
+        emptyStateMessage="No data components found."
+        emptyStateActionText="Create data component"
+        emptyStateActionHref={`/${tenantId}/projects/${projectId}/data-components/new`}
+        placeholder="Select data components..."
+      />
+
+      <ComponentSelector
+        label="Artifact components"
+        componentLookup={artifactComponentLookup}
+        selectedComponents={selectedArtifactComponents}
+        onSelectionChange={(newSelection) => {
+          updatePath('artifactComponents', newSelection);
+        }}
+        emptyStateMessage="No artifact components found."
+        emptyStateActionText="Create artifact component"
+        emptyStateActionHref={`/${tenantId}/projects/${projectId}/artifact-components/new`}
+        placeholder="Select artifact components..."
+      />
+    </div>
+  );
+}

package/src/components/graph/sidepane/nodes/component-selector/component-dropdown.tsx

@@ -0,0 +1,100 @@
+import { ChevronsUpDown } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { EmptyState } from '../empty-state';
+
+interface ComponentItem {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+interface ComponentDropdownProps<T extends ComponentItem> {
+  selectedComponents: string[];
+  handleToggle: (componentId: string) => void;
+  availableComponents: T[];
+  emptyStateMessage?: string;
+  emptyStateActionText?: string;
+  emptyStateActionHref?: string;
+  placeholder?: string;
+}
+
+export function ComponentDropdown<T extends ComponentItem>({
+  selectedComponents,
+  handleToggle,
+  availableComponents,
+  emptyStateMessage,
+  emptyStateActionText,
+  emptyStateActionHref,
+  placeholder = 'Select components...',
+}: ComponentDropdownProps<T>) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="flex w-full">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-full justify-between bg-transparent text-gray-700"
+          >
+            {selectedComponents.length === 0 ? (
+              <div className="text-muted-foreground">{placeholder}</div>
+            ) : (
+              `${selectedComponents.length} selected`
+            )}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+          <Command>
+            <CommandInput placeholder="Search components..." />
+            <CommandEmpty>
+              <EmptyState
+                message={emptyStateMessage || 'No components found.'}
+                actionText={emptyStateActionText}
+                actionHref={emptyStateActionHref}
+              />
+            </CommandEmpty>
+            <CommandList className="max-h-64">
+              <CommandGroup>
+                {availableComponents.map(({ id, name, description }) => (
+                  <CommandItem
+                    key={id}
+                    onSelect={() => handleToggle(id)}
+                    className="flex items-start gap-3 p-3 group cursor-pointer"
+                  >
+                    <Checkbox
+                      checked={selectedComponents.includes(id)}
+                      className="mt-0.5 [&_svg]:!text-primary-foreground"
+                    />
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <span className="font-medium">{name}</span>
+                      </div>
+                      {description && (
+                        <p className="text-xs text-muted-foreground">{description}</p>
+                      )}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/src/components/graph/sidepane/nodes/component-selector/component-header.tsx

@@ -0,0 +1,18 @@
+import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
+
+interface ComponentHeaderProps {
+  label: string;
+  count: number;
+}
+
+export function ComponentHeader({ label, count }: ComponentHeaderProps) {
+  return (
+    <div className="flex gap-2">
+      <Label>{label}</Label>
+      <Badge variant="code" className="border-none px-2 text-[10px] text-gray-700">
+        {count}
+      </Badge>
+    </div>
+  );
+}

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

@@ -0,0 +1,62 @@
+import { ComponentDropdown } from './component-dropdown';
+import { ComponentHeader } from './component-header';
+import { SelectedComponents } from './selected-components';
+
+interface ComponentItem {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+interface ComponentSelectorProps<T extends ComponentItem> {
+  label: string;
+  componentLookup: Record<string, T>;
+  selectedComponents: string[];
+  onSelectionChange: (newSelection: string[]) => void;
+  emptyStateMessage?: string;
+  emptyStateActionText?: string;
+  emptyStateActionHref?: string;
+  placeholder?: string;
+}
+
+export function ComponentSelector<T extends ComponentItem>({
+  label,
+  componentLookup,
+  selectedComponents,
+  onSelectionChange,
+  emptyStateMessage,
+  emptyStateActionText,
+  emptyStateActionHref,
+  placeholder = 'Select components...',
+}: ComponentSelectorProps<T>) {
+  const handleToggle = (componentId: string) => {
+    const newSelection = selectedComponents.includes(componentId)
+      ? selectedComponents.filter((id) => id !== componentId)
+      : [...selectedComponents, componentId];
+    onSelectionChange(newSelection);
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-2">
+        <ComponentHeader label={label} count={selectedComponents.length} />
+        {selectedComponents.length > 0 && (
+          <SelectedComponents
+            selectedComponents={selectedComponents}
+            componentLookup={componentLookup}
+            handleToggle={handleToggle}
+          />
+        )}
+      </div>
+      <ComponentDropdown
+        selectedComponents={selectedComponents}
+        handleToggle={handleToggle}
+        availableComponents={Object.values(componentLookup)}
+        emptyStateMessage={emptyStateMessage}
+        emptyStateActionText={emptyStateActionText}
+        emptyStateActionHref={emptyStateActionHref}
+        placeholder={placeholder}
+      />
+    </div>
+  );
+}

package/src/components/graph/sidepane/nodes/component-selector/selected-components.tsx

@@ -0,0 +1,44 @@
+import { X } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+
+interface ComponentItem {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+interface SelectedComponentsProps<T extends ComponentItem> {
+  selectedComponents: string[];
+  componentLookup: Record<string, T>;
+  handleToggle: (componentId: string) => void;
+}
+
+export function SelectedComponents<T extends ComponentItem>({
+  selectedComponents,
+  componentLookup,
+  handleToggle,
+}: SelectedComponentsProps<T>) {
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap gap-2">
+        {selectedComponents.map((componentId) => {
+          const component = componentLookup[componentId];
+          return (
+            <Badge key={componentId} variant="code" className="text-xs">
+              {component?.name || componentId}
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className=" size-3 ml-1"
+                onClick={() => handleToggle(componentId)}
+              >
+                <X className="size-3" />
+              </Button>
+            </Badge>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/graph/sidepane/nodes/empty-state.tsx

@@ -0,0 +1,29 @@
+import { ArrowUpRight } from 'lucide-react';
+import Link from 'next/link';
+
+interface EmptyStateProps {
+  message: string;
+  actionText?: string;
+  actionHref?: string;
+}
+
+export function EmptyState({ message, actionText, actionHref }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col gap-2 h-full justify-center items-center">
+      <p className="text-sm text-gray-400 dark:text-white/50">{message}</p>
+      <div className="inline-block">
+        {actionHref && (
+          <Link
+            target="_blank"
+            rel="noopener noreferrer"
+            href={actionHref}
+            className="font-mono gap-2 text-xs flex items-center uppercase font-medium text-gray-500 hover:text-gray-700"
+          >
+            {actionText}
+            <ArrowUpRight className="w-4 h-4" />
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/graph/sidepane/nodes/expandable-text-area.tsx

@@ -0,0 +1,30 @@
+import { ExpandableField } from '@/components/form/expandable-field';
+import { Textarea } from '@/components/ui/textarea';
+import { useCursorToEnd } from '@/hooks/use-cursor-to-end';
+
+function ExpandedTextArea({ ...props }) {
+  const textareaRef = useCursorToEnd<HTMLTextAreaElement>();
+
+  return (
+    <Textarea
+      {...props}
+      ref={textareaRef}
+      className="w-full max-h-full resize-none h-full"
+      autoFocus
+    />
+  );
+}
+
+export function ExpandableTextArea({
+  label,
+  ...props
+}: { label: string } & React.ComponentProps<typeof Textarea>) {
+  return (
+    <ExpandableField
+      name={props.id || 'expandable-textarea'}
+      label={label}
+      compactView={<Textarea {...props} />}
+      expandedView={<ExpandedTextArea {...props} />}
+    />
+  );
+}

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

@@ -0,0 +1,76 @@
+import type { Node } from '@xyflow/react';
+import type { ErrorHelpers } from '@/hooks/use-graph-errors';
+import { useNodeEditor } from '@/hooks/use-node-editor';
+import type { ExternalAgentNodeData } from '../../configuration/node-types';
+import { InputField, TextareaField } from './form-fields';
+
+interface ExternalAgentNodeEditorProps {
+  selectedNode: Node<ExternalAgentNodeData>;
+  errorHelpers?: ErrorHelpers;
+}
+
+export function ExternalAgentNodeEditor({
+  selectedNode,
+  errorHelpers,
+}: ExternalAgentNodeEditorProps) {
+  const { handleInputChange, getFieldError, setFieldRef } = useNodeEditor({
+    selectedNodeId: selectedNode.id,
+    errorHelpers,
+  });
+
+  return (
+    <div className="space-y-8 flex flex-col">
+      <p className="text-sm text-muted-foreground">
+        External agents are agents external to a graph that can communicate using the A2A
+        (Agent-to-Agent) protocol. External agents enable you to delegate tasks between graphs
+        within the agent framework or to third-party services.
+      </p>
+
+      <InputField
+        ref={(el) => setFieldRef('id', el)}
+        id="id"
+        name="id"
+        label="Id"
+        value={selectedNode.data.id || ''}
+        onChange={handleInputChange}
+        placeholder="my-external-agent"
+        error={getFieldError('id')}
+        description="Choose a unique identifier for this agent. Using an existing id will replace that agent."
+      />
+
+      <InputField
+        ref={(el) => setFieldRef('name', el)}
+        id="name"
+        name="name"
+        label="Name"
+        value={selectedNode.data.name || ''}
+        onChange={handleInputChange}
+        placeholder="Support agent"
+        error={getFieldError('name')}
+      />
+
+      <TextareaField
+        ref={(el) => setFieldRef('description', el)}
+        id="description"
+        name="description"
+        label="Description"
+        value={selectedNode.data.description || ''}
+        onChange={handleInputChange}
+        placeholder="This agent is responsible for..."
+        error={getFieldError('description')}
+      />
+
+      <InputField
+        ref={(el) => setFieldRef('baseUrl', el)}
+        id="baseUrl"
+        name="baseUrl"
+        label="Host URL"
+        value={selectedNode.data.baseUrl || ''}
+        onChange={handleInputChange}
+        placeholder="https://api.example.com/agent"
+        error={getFieldError('baseUrl')}
+        tooltip="This URL is used to discover the agent's capabilities and communicate with it using the A2A protocol. For locally hosted graphs defined with the agent-framework this would be: http://localhost:3002/tenants/:tenantId/projects/:projectId/agents/:graphId"
+      />
+    </div>
+  );
+}

package/src/components/graph/sidepane/nodes/form-fields.tsx

@@ -0,0 +1,117 @@
+import { Info } from 'lucide-react';
+import { forwardRef } from 'react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+interface BaseFieldProps {
+  id: string;
+  name: string;
+  label: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  placeholder?: string;
+  error?: string;
+  className?: string;
+  description?: string;
+  tooltip?: string;
+}
+
+interface InputFieldProps extends BaseFieldProps {
+  type?: 'text' | 'email' | 'password' | 'url';
+}
+
+interface TextareaFieldProps extends BaseFieldProps {
+  maxHeight?: string;
+}
+
+export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
+  (
+    {
+      id,
+      name,
+      label,
+      value,
+      onChange,
+      placeholder,
+      error,
+      className = '',
+      description,
+      tooltip,
+      type = 'text',
+    },
+    ref
+  ) => {
+    return (
+      <div className="space-y-2">
+        <Label htmlFor={id} className={error ? 'text-red-600' : ''}>
+          {label}
+          {tooltip && (
+            <Tooltip>
+              <TooltipTrigger>
+                <Info className="w-3 h-3 text-muted-foreground ml-1" />
+              </TooltipTrigger>
+              <TooltipContent className="break-words">{tooltip}</TooltipContent>
+            </Tooltip>
+          )}
+        </Label>
+        <Input
+          ref={ref}
+          id={id}
+          name={name}
+          type={type}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          data-invalid={error ? '' : undefined}
+          className={`w-full data-invalid:border-red-300 data-invalid:focus-visible:border-red-300 data-invalid:focus-visible:ring-red-300 ${className}`}
+        />
+        {error && <p className="text-sm text-red-600">{error}</p>}
+        {description && <p className="text-sm text-muted-foreground">{description}</p>}
+      </div>
+    );
+  }
+);
+
+InputField.displayName = 'InputField';
+
+export const TextareaField = forwardRef<HTMLTextAreaElement, TextareaFieldProps>(
+  (
+    {
+      id,
+      name,
+      label,
+      value,
+      onChange,
+      placeholder,
+      error,
+      className = '',
+      description,
+      maxHeight = 'max-h-96',
+    },
+    ref
+  ) => {
+    return (
+      <div className="space-y-2">
+        <Label htmlFor={id} className={error ? 'text-red-600' : ''}>
+          {label}
+        </Label>
+        <Textarea
+          ref={ref}
+          id={id}
+          name={name}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          data-invalid={error ? '' : undefined}
+          className={`w-full ${maxHeight} data-invalid:border-red-300 data-invalid:focus-visible:border-red-300 data-invalid:focus-visible:ring-red-300 ${className}`}
+        />
+        {error && <p className="text-sm text-red-600">{error}</p>}
+        {description && <p className="text-sm text-muted-foreground">{description}</p>}
+      </div>
+    );
+  }
+);
+
+TextareaField.displayName = 'TextareaField';