@inkeep/agents-manage-ui 0.12.0 → 0.13.0

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

@@ -0,0 +1,245 @@
+import { type FC, type RefObject, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { autocompletion, type CompletionSource, startCompletion } from '@codemirror/autocomplete';
+import { Decoration, ViewPlugin, EditorView, type DecorationSet } from '@codemirror/view';
+import { linter, type Diagnostic } from '@codemirror/lint';
+import { duotoneDark, duotoneLight } from '@uiw/codemirror-theme-duotone';
+import CodeMirror, {
+  type ReactCodeMirrorProps,
+  type Range,
+  type ReactCodeMirrorRef,
+} from '@uiw/react-codemirror';
+import { useTheme } from 'next-themes';
+import { cn } from '@/lib/utils';
+import { getContextSuggestions } from '@/lib/context-suggestions';
+import { useGraphStore } from '@/features/graph/state/use-graph-store';
+
+// Decoration for template variables
+const templateVariableDecoration = Decoration.mark({
+  class: 'cm-template-variable',
+});
+
+// Plugin to highlight template variables
+const templateVariablePlugin = ViewPlugin.fromClass(
+  class {
+    decorations: DecorationSet;
+
+    constructor(view: EditorView) {
+      this.decorations = this.buildDecorations(view);
+    }
+
+    update(update: any) {
+      if (update.docChanged) {
+        this.decorations = this.buildDecorations(update.view);
+      }
+    }
+
+    buildDecorations(view: EditorView): DecorationSet {
+      const decorations: Range<Decoration>[] = [];
+      const regex = /\{\{([^}]+)}}/g;
+
+      for (let i = 0; i < view.state.doc.lines; i++) {
+        const line = view.state.doc.line(i + 1);
+        let match: RegExpExecArray | null;
+
+        while ((match = regex.exec(line.text)) !== null) {
+          const from = line.from + match.index;
+          const to = line.from + match.index + match[0].length;
+          decorations.push(templateVariableDecoration.range(from, to));
+        }
+      }
+
+      return Decoration.set(decorations);
+    }
+  },
+  {
+    decorations: (v) => v.decorations,
+  }
+);
+
+// Theme for template variables
+const templateVariableTheme = EditorView.theme({
+  '& .cm-template-variable': {
+    color: '#e67e22', // Orange color for variables
+    fontWeight: 'bold',
+  },
+  '&.cm-dark .cm-template-variable': {
+    color: '#f39c12', // Lighter orange for dark theme
+  },
+});
+
+const RESERVED_KEYS = new Set(['$time', '$date', '$timestamp', '$now']);
+
+function isJMESPathExpressions(key: string): boolean {
+  if (key.startsWith('length(')) {
+    return true;
+  }
+  return key.includes('[?') || key.includes('[*]');
+}
+
+// Create linter for template variable validation
+function createTemplateVariableLinter(suggestions: string[]) {
+  return linter((view) => {
+    const diagnostics: Diagnostic[] = [];
+    const validVariables = new Set(suggestions);
+    const regex = /\{\{([^}]+)}}/g;
+
+    for (let i = 0; i < view.state.doc.lines; i++) {
+      const line = view.state.doc.line(i + 1);
+      let match: RegExpExecArray | null;
+
+      while ((match = regex.exec(line.text)) !== null) {
+        const from = line.from + match.index;
+        const to = line.from + match.index + match[0].length;
+        const variableName = match[1];
+
+        // Check if variable is valid (in suggestions) or reserved
+        const isValid =
+          validVariables.has(variableName) ||
+          RESERVED_KEYS.has(variableName) ||
+          variableName.startsWith('$env.') ||
+          // Exclude arrays from linting, as they are indicated with [*] in the suggestions
+          variableName.includes('[') ||
+          isJMESPathExpressions(variableName);
+
+        if (!isValid) {
+          diagnostics.push({
+            from,
+            to,
+            severity: 'error',
+            message: `Unknown variable: ${variableName}`,
+          });
+        }
+      }
+    }
+
+    return diagnostics;
+  });
+}
+
+// Create autocomplete source for context variables
+function createContextAutocompleteSource(suggestions: string[]): CompletionSource {
+  return (context) => {
+    const { state, pos } = context;
+    const line = state.doc.lineAt(pos);
+    const to = pos - line.from;
+    const textBefore = line.text.slice(0, to);
+    // Check if we're after a { character
+    const match = textBefore.match(/\{([^}]*)$/);
+    if (!match) return null;
+
+    const query = match[1].toLowerCase();
+    const filteredSuggestions = suggestions.filter((s) => s.toLowerCase().includes(query));
+    const nextChar = line.text[to];
+    return {
+      from: pos - match[1].length,
+      to: pos,
+      options: ['$env.', ...RESERVED_KEYS, ...filteredSuggestions].map((suggestion) => ({
+        label: suggestion,
+        apply: `{${suggestion}${nextChar === '}' ? '}' : '}}'}`, // insert `}}` at the end if next character is not `}`
+      })),
+    };
+  };
+}
+
+export interface TextareaWithSuggestionsProps extends Omit<ReactCodeMirrorProps, 'onChange'> {
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  ref?: RefObject<{ insertTemplateVariable: () => void }>;
+}
+
+function tryJsonParse(json: string): object {
+  if (!json.trim()) {
+    return {};
+  }
+  try {
+    return JSON.parse(json);
+  } catch {}
+  return {};
+}
+
+export const PromptEditor: FC<TextareaWithSuggestionsProps> = ({
+  className,
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  readOnly,
+  ref,
+  ...rest
+}) => {
+  const editorRef = useRef<ReactCodeMirrorRef | null>(null);
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === 'dark';
+  useEffect(() => {
+    editorRef.current = new EditorView();
+  }, []);
+
+  useImperativeHandle(ref, () => ({
+    insertTemplateVariable() {
+      const view = editorRef.current?.view;
+      if (!view) {
+        return;
+      }
+      const { doc, selection } = view.state;
+      // If there's a caret, insert at caret; otherwise, fall back to end of the current line.
+      const insertPos = selection.main.empty ? selection.main.head : doc.line(doc.lines).to;
+      // Insert "{}" and put the cursor between
+      view.dispatch({
+        changes: { from: insertPos, to: insertPos, insert: '{}' },
+        selection: { anchor: insertPos + 1 },
+        scrollIntoView: true,
+      });
+      startCompletion(view);
+    },
+  }));
+
+  const contextConfig = useGraphStore((state) => state.metadata.contextConfig);
+
+  const extensions = useMemo(() => {
+    const contextVariables = tryJsonParse(contextConfig.contextVariables);
+    const requestContextSchema = tryJsonParse(contextConfig.requestContextSchema);
+    const suggestions = getContextSuggestions({
+      requestContextSchema,
+      // @ts-expect-error -- todo: improve type
+      contextVariables,
+    });
+    return [
+      autocompletion({
+        override: [createContextAutocompleteSource(suggestions)],
+        compareCompletions(_a, _b) {
+          // Disable default localCompare sorting
+          return -1;
+        },
+      }),
+      templateVariablePlugin,
+      templateVariableTheme,
+      createTemplateVariableLinter(suggestions),
+    ];
+  }, [contextConfig]);
+
+  return (
+    <CodeMirror
+      ref={editorRef}
+      {...rest}
+      value={value || ''}
+      onChange={onChange}
+      extensions={extensions}
+      theme={isDark ? duotoneDark : duotoneLight}
+      placeholder={placeholder}
+      editable={!disabled && !readOnly}
+      basicSetup={{
+        lineNumbers: false,
+        foldGutter: false,
+        highlightActiveLine: false,
+      }}
+      data-disabled={disabled ? '' : undefined}
+      data-read-only={readOnly ? '' : undefined}
+      className={cn(
+        'h-full [&>.cm-editor]:max-h-[inherit] [&>.cm-editor]:!bg-transparent dark:[&>.cm-editor]:!bg-input/30 [&>.cm-editor]:!outline-none [&>.cm-editor]:rounded-[7px] [&>.cm-editor]:px-3 [&>.cm-editor]:py-2 leading-2 text-xs font-mono rounded-md border border-input shadow-xs transition-[color,box-shadow] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:bg-muted data-invalid:border-destructive has-[.cm-focused]:border-ring has-[.cm-focused]:ring-ring/50 has-[.cm-focused]:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className
+      )}
+    />
+  );
+};

package/src/components/graph/graph.tsx

@@ -26,7 +26,7 @@ import {
   extractGraphMetadata,
   serializeGraphData,
 } from '@/features/graph/domain';
-import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { useGraphActions, useGraphStore } from '@/features/graph/state/use-graph-store';
 import { useGraphShortcuts } from '@/features/graph/ui/use-graph-shortcuts';
 import { useGraphErrors } from '@/hooks/use-graph-errors';
 import { useSidePane } from '@/hooks/use-side-pane';
@@ -180,20 +180,22 @@ function Flow({
   }, [graph?.agents]);
 
   const { screenToFlowPosition, updateNodeData, fitView } = useReactFlow();
+  const { storeNodes, edges, metadata } = useGraphStore((state) => ({
+    storeNodes: state.nodes,
+    edges: state.edges,
+    metadata: state.metadata,
+  }));
   const {
-    nodes: storeNodes,
-    edges,
     setNodes,
     setEdges,
     onNodesChange,
     onEdgesChange,
-    metadata,
     setMetadata,
     setInitial,
     markSaved,
     clearSelection,
     markUnsaved,
-  } = useGraphStore();
+  } = useGraphActions();
 
   // Always use enriched nodes for ReactFlow
   const nodes = useMemo(() => enrichNodes(storeNodes), [storeNodes, enrichNodes]);

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

@@ -46,8 +46,10 @@ export function AgentNode(props: NodeProps & { data: AgentNodeData }) {
   const { name, isDefault, description, models } = data;
   const modelName = models?.base?.model;
 
-  const dataComponentLookup = useGraphStore((state) => state.dataComponentLookup);
-  const artifactComponentLookup = useGraphStore((state) => state.artifactComponentLookup);
+  const { dataComponentLookup, artifactComponentLookup } = useGraphStore((state) => ({
+    dataComponentLookup: state.dataComponentLookup,
+    artifactComponentLookup: state.artifactComponentLookup,
+  }));
   const { getNodeErrors, hasNodeErrors } = useGraphErrors();
 
   // Use the agent ID from node data if available, otherwise fall back to React Flow node ID

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

@@ -12,9 +12,11 @@ const TOOLS_SHOWN_LIMIT = 4;
 
 export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
   const { data, selected } = props;
-  const toolLookup = useGraphStore((state) => state.toolLookup);
-  const agentToolConfigLookup = useGraphStore((state) => state.agentToolConfigLookup);
-  const edges = useGraphStore((state) => state.edges);
+  const { toolLookup, agentToolConfigLookup, edges } = useGraphStore((state) => ({
+    toolLookup: state.toolLookup,
+    agentToolConfigLookup: state.agentToolConfigLookup,
+    edges: state.edges,
+  }));
 
   const name = data.name || `Tool: ${data.toolId}`;
   const imageUrl = data.imageUrl;

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

@@ -3,7 +3,7 @@ import { Spline } from 'lucide-react';
 import { DashedSplineIcon } from '@/components/icons/dashed-spline';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
-import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { useGraphActions } from '@/features/graph/state/use-graph-store';
 import type { A2AEdgeData } from '../../configuration/edge-types';
 
 type RelationshipOptionProps = {
@@ -75,7 +75,7 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
   const { updateEdgeData, setEdges } = useReactFlow();
   const sourceNode = useNodesData(selectedEdge.source);
   const targetNode = useNodesData(selectedEdge.target);
-  const markUnsaved = useGraphStore((state) => state.markUnsaved);
+  const { markUnsaved } = useGraphActions();
 
   // Check if this is a self-loop (source and target are the same)
   const isSelfLoop = selectedEdge.source === selectedEdge.target;

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

@@ -19,7 +19,7 @@ import { Separator } from '@/components/ui/separator';
 import { Textarea } from '@/components/ui/textarea';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useRuntimeConfig } from '@/contexts/runtime-config-context';
-import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { useGraphActions, useGraphStore } from '@/features/graph/state/use-graph-store';
 import { useAutoPrefillIdZustand } from '@/hooks/use-auto-prefill-id-zustand';
 import { useProjectData } from '@/hooks/use-project-data';
 import { CollapsibleSettings } from '../collapsible-settings';
@@ -64,7 +64,7 @@ function MetadataEditor() {
   // Fetch project data for inheritance indicators
   const { project } = useProjectData();
 
-  const { markUnsaved, setMetadata } = useGraphStore();
+  const { markUnsaved, setMetadata } = useGraphActions();
 
   const updateMetadata: typeof setMetadata = useCallback(
     (...attrs) => {
@@ -148,10 +148,9 @@ function MetadataEditor() {
       <div className="space-y-2">
         <ExpandableTextArea
           id="graph-prompt"
-          name="graph-prompt"
           label="Graph prompt"
           value={graphPrompt || ''}
-          onChange={(e) => updateMetadata('graphPrompt', e.target.value)}
+          onChange={(value) => updateMetadata('graphPrompt', value)}
           placeholder="System-level instructions for this graph..."
           className="max-h-96"
         />

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

@@ -135,11 +135,9 @@ export function AgentNodeEditor({
 
       <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)}
+          onChange={(value) => updatePath('prompt', 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"
@@ -159,7 +157,7 @@ export function AgentNodeEditor({
       />
       <Separator />
       {/* Agent Execution Limits */}
-      <div className="space-y-8 ">
+      <div className="space-y-8">
         <SectionHeader
           title="Execution limits"
           description="Configure agent-level execution limits for steps within this agent."

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

@@ -1,32 +1,72 @@
+import { type FC, type RefObject, useRef, type ComponentProps } from 'react';
 import { ExpandableField } from '@/components/form/expandable-field';
-import { Textarea } from '@/components/ui/textarea';
-import { useCursorToEnd } from '@/hooks/use-cursor-to-end';
+import { Button } from '@/components/ui/button';
+import { Braces } from 'lucide-react';
+import { TooltipTrigger, Tooltip, TooltipContent } from '@/components/ui/tooltip';
+import { PromptEditor } from '@/components/form/prompt-editor';
+import { cn } from '@/lib/utils';
 
-function ExpandedTextArea({ ...props }) {
-  const textareaRef = useCursorToEnd<HTMLTextAreaElement>();
+// Extract inner type from RefObject<T>
+type RefValue<T> = T extends RefObject<infer R> ? R : never;
 
+const PromptEditorWithAddVariables: FC<
+  ComponentProps<typeof PromptEditor> & {
+    tooltipClassName: string;
+  }
+> = ({ tooltipClassName, ...props }) => {
+  const codemirrorRef = useRef<RefValue<typeof props.ref>>(null!);
+  const variablesText = 'Add variables';
   return (
-    <Textarea
-      {...props}
-      ref={textareaRef}
-      className="w-full max-h-full resize-none h-full"
-      autoFocus
-    />
+    <div className="h-full relative">
+      <PromptEditor ref={codemirrorRef} {...props} />
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className={cn(
+              'absolute bottom-2.5 h-6 w-6 hover:text-foreground transition-all backdrop-blur-sm bg-white/90 hover:bg-white/95 dark:bg-card dark:hover:bg-accent border border-border shadow-md dark:shadow-lg',
+              tooltipClassName
+            )}
+            type="button"
+            onClick={() => {
+              codemirrorRef.current.insertTemplateVariable();
+            }}
+          >
+            <Braces className="h-4 w-4 text-muted-foreground" />
+            <span className="sr-only">{variablesText}</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          {variablesText}
+        </TooltipContent>
+      </Tooltip>
+    </div>
   );
-}
+};
 
 export function ExpandableTextArea({
   label,
   isRequired = false,
   ...props
-}: { label: string; isRequired?: boolean } & React.ComponentProps<typeof Textarea>) {
+}: {
+  label: string;
+  isRequired?: boolean;
+} & React.ComponentProps<typeof PromptEditor>) {
   return (
     <ExpandableField
       name={props.id || 'expandable-textarea'}
       label={label}
       isRequired={isRequired}
-      compactView={<Textarea {...props} />}
-      expandedView={<ExpandedTextArea {...props} />}
+      compactView={<PromptEditorWithAddVariables {...props} tooltipClassName="right-10" />}
+      expandedView={
+        <PromptEditorWithAddVariables
+          {...props}
+          autoFocus
+          className="[&>.cm-editor]:h-full"
+          tooltipClassName="right-2.5"
+        />
+      }
     />
   );
 }

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

@@ -10,7 +10,7 @@ import { ExternalLink } from '@/components/ui/external-link';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { useGraphActions, useGraphStore } from '@/features/graph/state/use-graph-store';
 import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
 import {
   getCurrentHeadersForNode,
@@ -33,11 +33,13 @@ export function MCPServerNodeEditor({
     tenantId: string;
     projectId: string;
   }>();
-  const markUnsaved = useGraphStore((state) => state.markUnsaved);
+  const { markUnsaved } = useGraphActions();
 
   // Only use toolLookup - single source of truth
-  const toolLookup = useGraphStore((state) => state.toolLookup);
-  const edges = useGraphStore((state) => state.edges);
+  const { toolLookup, edges } = useGraphStore((state) => ({
+    toolLookup: state.toolLookup,
+    edges: state.edges,
+  }));
 
   const getCurrentHeaders = useCallback((): Record<string, string> => {
     return getCurrentHeadersForNode(selectedNode, agentToolConfigLookup, edges);

package/src/components/projects/form/form-configuration.ts

@@ -12,7 +12,7 @@ export const defaultValues: ProjectFormData = {
   models: {
     base: {
       model: DEFAULT_ANTHROPIC_BASE_MODEL,
-      providerOptions: {},
+      providerOptions: undefined,
     },
     structuredOutput: {
       model: DEFAULT_ANTHROPIC_STRUCTURED_OUTPUT_MODEL,

package/src/components/projects/form/project-form.tsx

@@ -34,9 +34,9 @@ const serializeData = (data: ProjectFormData) => {
   };
 
   const cleanStopWhen = (stopWhen: any) => {
-    // If stopWhen is null, undefined, or empty object, return undefined
+    // If stopWhen is null, undefined, or empty object, return empty object (undefined will not update the field)
     if (!stopWhen || (typeof stopWhen === 'object' && Object.keys(stopWhen).length === 0)) {
-      return undefined;
+      return {};
     }
 
     // Clean the individual properties - remove null/undefined values
@@ -48,9 +48,9 @@ const serializeData = (data: ProjectFormData) => {
       cleaned.stepCountIs = stopWhen.stepCountIs;
     }
 
-    // If no valid properties, return undefined
+    // If no valid properties, return empty object (undefined will not update the field)
     if (Object.keys(cleaned).length === 0) {
-      return undefined;
+      return {};
     }
 
     return cleaned;
@@ -81,6 +81,15 @@ const serializeData = (data: ProjectFormData) => {
   };
 };
 
+const createDefaultValues = (initialData?: ProjectFormData) => {
+  return {
+    ...initialData,
+    // Handle null values from database - if an object field is null, validation will fail so we need to set it to an empty object
+    stopWhen: initialData?.stopWhen || {},
+    models: initialData?.models || { base: { model: '', providerOptions: null } },
+  };
+};
+
 export function ProjectForm({
   tenantId,
   projectId,
@@ -90,10 +99,7 @@ export function ProjectForm({
 }: ProjectFormProps) {
   const form = useForm<ProjectFormData>({
     resolver: zodResolver(projectSchema),
-    defaultValues: {
-      ...defaultValues,
-      ...initialData,
-    },
+    defaultValues: initialData ? createDefaultValues(initialData) : { ...defaultValues },
   });
 
   const { isSubmitting } = form.formState;

package/src/components/projects/form/project-models-section.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { ChevronRight, Info } from 'lucide-react';
-import { type Control, useController, useWatch } from 'react-hook-form';
+import { useEffect, useState } from 'react';
+import { type Control, useController, useFormState, useWatch } from 'react-hook-form';
 import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
 import { FormFieldWrapper } from '@/components/form/form-field-wrapper';
 import { ModelSelector } from '@/components/graph/sidepane/nodes/model-selector';
@@ -179,6 +180,25 @@ function SummarizerModelSection({ control }: { control: Control<ProjectFormData>
 }
 
 export function ProjectModelsSection({ control }: ProjectModelsSectionProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const { errors } = useFormState({ control });
+
+  const hasModelsErrors = !!(
+    errors.models?.base?.model ||
+    errors.models?.base?.providerOptions ||
+    errors.models?.structuredOutput?.model ||
+    errors.models?.structuredOutput?.providerOptions ||
+    errors.models?.summarizer?.model ||
+    errors.models?.summarizer?.providerOptions
+  );
+
+  // Auto-open the collapsible when there are errors in the models section
+  useEffect(() => {
+    if (hasModelsErrors) {
+      setIsOpen(true);
+    }
+  }, [hasModelsErrors]);
+
   return (
     <div className="space-y-4">
       <div>
@@ -188,7 +208,11 @@ export function ProjectModelsSection({ control }: ProjectModelsSectionProps) {
         </p>
       </div>
 
-      <Collapsible defaultOpen={false} className="border rounded-md bg-background">
+      <Collapsible
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        className="border rounded-md bg-background"
+      >
         <CollapsibleTrigger asChild>
           <Button
             type="button"

package/src/components/projects/form/project-stopwhen-section.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { ChevronRight, Info } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import type { Control } from 'react-hook-form';
-import { useWatch } from 'react-hook-form';
+import { useFormState, useWatch } from 'react-hook-form';
 import { GenericInput } from '@/components/form/generic-input';
 import { Button } from '@/components/ui/button';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
@@ -18,6 +19,17 @@ export function ProjectStopWhenSection({ control }: ProjectStopWhenSectionProps)
   // Check if any stopWhen values are configured to determine default open state
   const stopWhen = useWatch({ control, name: 'stopWhen' });
   const hasConfiguredStopWhen = !!(stopWhen?.transferCountIs || stopWhen?.stepCountIs);
+  const [isOpen, setIsOpen] = useState(hasConfiguredStopWhen);
+
+  const { errors } = useFormState({ control });
+  const hasStopWhenErrors = !!(errors.stopWhen?.transferCountIs || errors.stopWhen?.stepCountIs);
+
+  // Auto-open the collapsible when there are errors in the stopWhen section
+  useEffect(() => {
+    if (hasStopWhenErrors) {
+      setIsOpen(true);
+    }
+  }, [hasStopWhenErrors]);
 
   return (
     <div className="space-y-4">
@@ -28,7 +40,11 @@ export function ProjectStopWhenSection({ control }: ProjectStopWhenSectionProps)
         </p>
       </div>
 
-      <Collapsible defaultOpen={hasConfiguredStopWhen} className="border rounded-md bg-background">
+      <Collapsible
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        className="border rounded-md bg-background"
+      >
         <CollapsibleTrigger asChild>
           <Button
             type="button"