@inkeep/agents-manage-ui 0.31.7 → 0.32.0

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

@@ -1,5 +1,5 @@
 import { Info } from 'lucide-react';
-import { forwardRef } from 'react';
+import type { ChangeEvent, FC, Ref } from 'react';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -11,7 +11,7 @@ interface BaseFieldProps {
   name: string;
   label: string;
   value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  onChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
   placeholder?: string;
   error?: string;
   className?: string;
@@ -23,115 +23,112 @@ interface BaseFieldProps {
 
 interface InputFieldProps extends BaseFieldProps {
   type?: 'text' | 'email' | 'password' | 'url';
+  ref?: Ref<HTMLInputElement>;
 }
 
 interface TextareaFieldProps extends BaseFieldProps {
   maxHeight?: string;
+  ref?: Ref<HTMLTextAreaElement>;
 }
 
-export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
-  (
-    {
-      id,
-      name,
-      label,
-      value,
-      onChange,
-      placeholder,
-      error,
-      className = '',
-      description,
-      tooltip,
-      type = 'text',
-      isRequired = false,
-      disabled = false,
-    },
-    ref
-  ) => {
-    return (
-      <div className="space-y-2">
-        <Label htmlFor={id} className={cn(error ? 'text-red-600' : '', 'gap-1')}>
-          {label}
-          {isRequired && <span className="text-red-500">*</span>}
-          {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}`}
-          disabled={disabled}
-        />
-        {error && <p className="text-sm text-red-600">{error}</p>}
-        {description && <p className="text-xs text-muted-foreground">{description}</p>}
-      </div>
-    );
-  }
-);
+export const InputField: FC<InputFieldProps> = ({
+  id,
+  name,
+  label,
+  value,
+  onChange,
+  placeholder,
+  error,
+  className,
+  description,
+  tooltip,
+  type = 'text',
+  isRequired,
+  disabled,
+  ref,
+}) => {
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={id} className={cn(error && 'text-red-600', 'gap-1')}>
+        {label}
+        {isRequired && <span className="text-red-500">*</span>}
+        {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}
+        aria-invalid={error ? 'true' : undefined}
+        className={cn(
+          'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+          className
+        )}
+        disabled={disabled}
+      />
+      {error && <p className="text-sm text-red-600">{error}</p>}
+      {description && <p className="text-xs text-muted-foreground">{description}</p>}
+    </div>
+  );
+};
 
-InputField.displayName = 'InputField';
-
-export const TextareaField = forwardRef<HTMLTextAreaElement, TextareaFieldProps>(
-  (
-    {
-      id,
-      name,
-      label,
-      value,
-      onChange,
-      placeholder,
-      error,
-      className = '',
-      description,
-      tooltip,
-      maxHeight = 'max-h-96',
-      isRequired = false,
-      disabled = false,
-    },
-    ref
-  ) => {
-    return (
-      <div className="space-y-2">
-        <Label htmlFor={id} className={cn(error ? 'text-red-600' : '', 'gap-1')}>
-          {label}
-          {isRequired && <span className="text-red-500">*</span>}
-          {tooltip && (
-            <Tooltip>
-              <TooltipTrigger>
-                <Info className="w-3 h-3 text-muted-foreground ml-1" />
-              </TooltipTrigger>
-              <TooltipContent className="break-words">{tooltip}</TooltipContent>
-            </Tooltip>
-          )}
-        </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}`}
-          disabled={disabled}
-        />
-        {error && <p className="text-sm text-red-600">{error}</p>}
-        {description && <p className="text-xs text-muted-foreground">{description}</p>}
-      </div>
-    );
-  }
-);
-
-TextareaField.displayName = 'TextareaField';
+export const TextareaField: FC<TextareaFieldProps> = ({
+  id,
+  name,
+  label,
+  value,
+  onChange,
+  placeholder,
+  error,
+  className,
+  description,
+  tooltip,
+  maxHeight = 'max-h-96',
+  isRequired,
+  disabled,
+  ref,
+}) => {
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={id} className={cn(error && 'text-red-600', 'gap-1')}>
+        {label}
+        {isRequired && <span className="text-red-500">*</span>}
+        {tooltip && (
+          <Tooltip>
+            <TooltipTrigger>
+              <Info className="w-3 h-3 text-muted-foreground ml-1" />
+            </TooltipTrigger>
+            <TooltipContent className="break-words">{tooltip}</TooltipContent>
+          </Tooltip>
+        )}
+      </Label>
+      <Textarea
+        ref={ref}
+        id={id}
+        name={name}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        aria-invalid={error ? 'true' : undefined}
+        className={cn(
+          'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+          maxHeight,
+          className
+        )}
+        disabled={disabled}
+      />
+      {error && <p className="text-sm text-red-600">{error}</p>}
+      {description && <p className="text-xs text-muted-foreground">{description}</p>}
+    </div>
+  );
+};

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

@@ -144,7 +144,8 @@ export function SubAgentNodeEditor({
 
       <div className="space-y-2">
         <ExpandablePromptEditor
-          id="prompt"
+          key={selectedNode.id}
+          name="prompt"
           value={selectedNode.data.prompt}
           onChange={(value) => updatePath('prompt', value)}
           placeholder="You are a helpful assistant..."

package/src/components/agent/sidepane/sidepane.tsx

@@ -2,6 +2,7 @@ import type { Edge, Node } from '@xyflow/react';
 import { useEdges, useNodesData } from '@xyflow/react';
 import { type LucideIcon, Workflow } from 'lucide-react';
 import { useMemo } from 'react';
+import { useAgentStore } from '@/features/agent/state/use-agent-store';
 import { useAgentErrors } from '@/hooks/use-agent-errors';
 import type { ArtifactComponent } from '@/lib/api/artifact-components';
 import type { Credential } from '@/lib/api/credentials';
@@ -64,6 +65,7 @@ export function SidePane({
   const selectedNode = useNodesData(selectedNodeId || '');
   const edges = useEdges();
   const { hasFieldError, getFieldErrorMessage, getFirstErrorField } = useAgentErrors();
+  const errors = useAgentStore((state) => state.errors);
 
   const selectedEdge = useMemo(
     () => (selectedEdgeId ? edges.find((edge) => edge.id === selectedEdgeId) : null),
@@ -183,6 +185,8 @@ export function SidePane({
     credentialLookup,
     subAgentExternalAgentConfigLookup,
     subAgentTeamAgentConfigLookup,
+    // Rerender sidepane when errors changes
+    errors,
   ]);
 
   const showBackButton = selectedNode || selectedEdge;

package/src/components/editors/code-editor.tsx

@@ -10,10 +10,21 @@ interface CodeEditorProps extends Omit<ComponentProps<typeof MonacoEditor>, 'uri
 export const CodeEditor: FC<CodeEditorProps> = ({
   uri,
   placeholder = 'Enter code...',
+  editorOptions,
   ...props
 }) => {
   const id = useId();
   uri ??= `${id}.jsx`;
 
-  return <MonacoEditor uri={uri} placeholder={placeholder} {...props} />;
+  return (
+    <MonacoEditor
+      uri={uri}
+      placeholder={placeholder}
+      editorOptions={{
+        ariaLabel: 'Code editor',
+        ...editorOptions,
+      }}
+      {...props}
+    />
+  );
 };

package/src/components/editors/expandable-code-editor.tsx

@@ -29,26 +29,30 @@ export function ExpandableCodeEditor({
   isRequired,
 }: ExpandableCodeEditorProps) {
   const [open, setOpen] = useState(false);
-
+  const uri = `${open ? 'expanded-' : ''}${name}.jsx` as const;
+  const id = `${name}-label`;
   return (
     <ExpandableField
+      id={id}
       open={open}
       onOpenChange={setOpen}
-      name={name}
+      uri={uri}
       label={label}
       className={className}
       isRequired={isRequired}
+      hasError={!!error}
     >
       <CodeEditor
-        id={name}
+        uri={uri}
         value={value}
         onChange={onChange}
         placeholder={placeholder}
-        aria-invalid={!!error}
+        aria-invalid={error ? 'true' : undefined}
         hasDynamicHeight={!open}
         className={cn(!open && error && 'max-h-96')}
+        aria-labelledby={id}
       />
-      {error && <p className="text-sm mt-1 text-destructive">{error}</p>}
+      {error && <p className="text-sm text-red-600">{error}</p>}
     </ExpandableField>
   );
 }

package/src/components/editors/expandable-json-editor.tsx

@@ -67,16 +67,18 @@ export function ExpandableJsonEditor({
     !!(externalError || internalError)
   );
   const [open, setOpen] = useState(false);
-
+  const uri = `${open ? 'expanded-' : ''}${name}.json` as const;
   const error = externalError || internalError;
-
+  const id = `${name}-label`;
   return (
     <ExpandableField
+      id={id}
       open={open}
       onOpenChange={setOpen}
-      name={name}
+      uri={uri}
       label={label}
       className={className}
+      hasError={!!error}
       actions={
         <Button
           type="button"
@@ -91,15 +93,16 @@ export function ExpandableJsonEditor({
       }
     >
       <JsonEditor
-        id={name}
+        uri={uri}
         value={value}
         onChange={onChange}
         placeholder={placeholder}
-        aria-invalid={!!error}
+        aria-invalid={error ? 'true' : undefined}
         className={cn(!open && error && 'max-h-96')}
         hasDynamicHeight={!open}
+        aria-labelledby={id}
       />
-      {error && <p className="text-sm mt-1 text-destructive absolute -bottom-6">{error}</p>}
+      {error && <p className="text-sm text-red-600">{error}</p>}
     </ExpandableField>
   );
 }

package/src/components/editors/expandable-prompt-editor.tsx

@@ -7,13 +7,16 @@ import { Button } from '@/components/ui/button';
 import { useMonacoStore } from '@/features/agent/state/use-monaco-store';
 import { cn } from '@/lib/utils';
 
-type PromptEditorProps = ComponentProps<typeof PromptEditor>;
+type PromptEditorProps = ComponentProps<typeof PromptEditor> & {
+  name: string;
+};
 
 export function ExpandablePromptEditor({
   label,
   isRequired = false,
   className,
   error,
+  name,
   ...props
 }: {
   label: string;
@@ -22,7 +25,7 @@ export function ExpandablePromptEditor({
 } & PromptEditorProps) {
   const [open, onOpenChange] = useState(false);
   const monaco = useMonacoStore((state) => state.monaco);
-  const uri = `${open ? 'small' : 'full'}-${props.id}.template` as const;
+  const uri = `${open ? 'expanded-' : ''}${name}.template` as const;
 
   const handleAddVariable = useCallback(() => {
     if (!monaco) {
@@ -45,13 +48,17 @@ export function ExpandablePromptEditor({
     editor.trigger('insert-template-variable', 'editor.action.triggerSuggest', {});
   }, [monaco, uri]);
 
+  const id = `${name}-label`;
+
   return (
     <ExpandableField
+      id={id}
       open={open}
       onOpenChange={onOpenChange}
-      name={props.id || 'expandable-textarea'}
+      uri={uri}
       label={label}
       isRequired={isRequired}
+      hasError={!!error}
       actions={
         <Button
           size="sm"
@@ -68,12 +75,13 @@ export function ExpandablePromptEditor({
       <PromptEditor
         uri={uri}
         autoFocus={open}
-        aria-invalid={!!error}
+        aria-invalid={error ? 'true' : undefined}
         className={cn(!open && 'max-h-96', className)}
         hasDynamicHeight={!open}
+        aria-labelledby={id}
         {...props}
       />
-      {error && <p className="text-sm mt-1 text-destructive absolute -bottom-6">{error}</p>}
+      {error && <p className="text-sm text-red-600">{error}</p>}
     </ExpandableField>
   );
 }

package/src/components/editors/json-editor.tsx

@@ -7,8 +7,17 @@ interface JsonEditorProps extends Omit<ComponentProps<typeof MonacoEditor>, 'uri
   uri?: `${string}.json`;
 }
 
-export const JsonEditor: FC<JsonEditorProps> = ({ uri, ...props }) => {
+export const JsonEditor: FC<JsonEditorProps> = ({ uri, editorOptions, ...props }) => {
   const id = useId();
   uri ??= `${id}.json`;
-  return <MonacoEditor uri={uri} {...props} />;
+  return (
+    <MonacoEditor
+      uri={uri}
+      editorOptions={{
+        ariaLabel: 'JSON editor',
+        ...editorOptions,
+      }}
+      {...props}
+    />
+  );
 };

package/src/components/editors/monaco-editor.tsx

@@ -91,7 +91,7 @@ export const MonacoEditor: FC<MonacoEditorProps> = ({
         '[--vscode-editor-background:transparent]!',
         '[--vscode-editorGutter-background:transparent]!',
         '[--vscode-focusBorder:transparent]!',
-      ].join('\n'),
+      ].join(' '),
       automaticLayout: true,
       minimap: { enabled: false }, // disable the minimap
       overviewRulerLanes: 0, // remove unnecessary error highlight on the scroll

package/src/components/editors/prompt-editor.tsx

@@ -85,6 +85,7 @@ export const PromptEditor: FC<PromptEditorProps> = ({ uri, editorOptions, onMoun
       editorOptions={{
         autoClosingBrackets: 'never',
         renderLineHighlight: 'none', // disable active line highlight
+        ariaLabel: 'Prompt input editor',
         ...editorOptions,
       }}
       {...props}

package/src/components/form/expandable-field.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Maximize } from 'lucide-react';
-import type { ComponentProps, ReactNode } from 'react';
+import { type ComponentProps, type ReactNode, useCallback } from 'react';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -11,12 +11,13 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
+import { useMonacoStore } from '@/features/agent/state/use-monaco-store';
 import { cn } from '@/lib/utils';
 
 type DialogProps = Required<ComponentProps<typeof Dialog>>;
 
 interface ExpandableFieldProps {
-  name: string;
+  uri: string;
   label: string;
   className?: string;
   children: ReactNode;
@@ -24,21 +25,36 @@ interface ExpandableFieldProps {
   isRequired?: boolean;
   open: DialogProps['open'];
   onOpenChange: DialogProps['onOpenChange'];
+  hasError?: boolean;
+  id: string;
 }
 
 export function ExpandableField({
-  name,
+  id,
+  uri,
   label,
   children,
   actions,
   isRequired = false,
   open,
   onOpenChange,
+  hasError,
 }: ExpandableFieldProps) {
+  const monaco = useMonacoStore((state) => state.monaco);
+
+  const handleClick = useCallback(() => {
+    if (!monaco) {
+      return;
+    }
+    const model = monaco.editor.getModel(monaco.Uri.parse(uri));
+    const [editor] = monaco.editor.getEditors().filter((editor) => editor.getModel() === model);
+    editor?.focus();
+  }, [monaco, uri]);
+
   const content = (
     <>
       <div className="flex items-center justify-between">
-        <Label className="gap-1" htmlFor={name}>
+        <Label id={id} className={cn(hasError && 'text-red-600', 'gap-1')} onClick={handleClick}>
           {label}
           {isRequired && <span className="text-red-500">*</span>}
         </Label>
@@ -54,7 +70,7 @@ export function ExpandableField({
           )}
         </div>
       </div>
-      <div className={cn('relative', open && 'grow')}>{children}</div>
+      <div className={cn('relative space-y-2', open && 'grow')}>{children}</div>
     </>
   );
 

package/src/env.d.ts

@@ -1,6 +1,8 @@
 declare namespace globalThis {
   import type * as Monaco from 'monaco-editor';
   var MonacoEnvironment: Monaco.Environment;
+  // For cypress
+  var monaco: Monaco;
 }
 
 declare module '*.svg?svgr' {

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

@@ -2,7 +2,7 @@ import type { Edge, Node } from '@xyflow/react';
 import { EdgeType } from '@/components/agent/configuration/edge-types';
 import type { AgentNodeData, MCPNodeData } from '@/components/agent/configuration/node-types';
 import { NodeType } from '@/components/agent/configuration/node-types';
-import { serializeAgentData } from '../serialize';
+import { isContextConfigParseError, serializeAgentData } from '../serialize';
 
 describe('serializeAgentData', () => {
   describe('models object processing', () => {
@@ -416,4 +416,71 @@ describe('serializeAgentData', () => {
       });
     });
   });
+
+  describe('`contextConfig` parsing', () => {
+    const baseNodes: Node<AgentNodeData>[] = [];
+    const edges: Edge[] = [];
+
+    it('throws when `contextVariables` contains invalid JSON', () => {
+      try {
+        serializeAgentData(
+          baseNodes,
+          edges,
+          {
+            // @ts-expect-error -- ignore
+            contextConfig: { contextVariables: '{' },
+          },
+          {},
+          {},
+          {}
+        );
+        throw new Error('Expected `serializeAgentData` to throw');
+      } catch (error) {
+        expect(isContextConfigParseError(error)).toBe(true);
+        if (isContextConfigParseError(error)) {
+          expect(error.field).toBe('contextVariables');
+        }
+      }
+    });
+
+    it('throws when `headersSchema` contains invalid JSON', () => {
+      try {
+        serializeAgentData(
+          baseNodes,
+          edges,
+          {
+            // @ts-expect-error -- ignore
+            contextConfig: { headersSchema: '{' },
+          },
+          {},
+          {},
+          {}
+        );
+        throw new Error('Expected `serializeAgentData` to throw');
+      } catch (error) {
+        expect(isContextConfigParseError(error)).toBe(true);
+        if (isContextConfigParseError(error)) {
+          expect(error.field).toBe('headersSchema');
+        }
+      }
+    });
+
+    it('allows valid JSON payloads', () => {
+      const result = serializeAgentData(
+        baseNodes,
+        edges,
+        // @ts-expect-error -- ignore
+        {
+          contextConfig: {
+            contextVariables: '{"foo":"bar"}',
+            headersSchema: '{"type":"object"}',
+          },
+        },
+        {},
+        {},
+        {}
+      );
+      expect(result).toBeTruthy();
+    });
+  });
 });