@inkeep/agents-manage-ui 0.12.1 → 0.13.0

package/src/components/projects/form/validation.ts

@@ -1,19 +1,28 @@
-import { StopWhenSchema } from '@inkeep/agents-core/client-exports';
 import { z } from 'zod';
 
 const modelSettingsSchema = z.object({
   model: z.string().optional(), // Allow empty model - system will fall back to defaults
-  providerOptions: z.record(z.string(), z.any()).optional(),
+  providerOptions: z.record(z.string(), z.any()).optional().nullable(),
+});
+
+const baseModelSettingsSchema = z.object({
+  model: z.string().min(1, 'Base model is required'),
+  providerOptions: z.record(z.string(), z.any()).optional().nullable(),
 });
 
 const projectModelsSchema = z.object({
-  base: modelSettingsSchema,
+  base: baseModelSettingsSchema,
   structuredOutput: modelSettingsSchema.optional(),
   summarizer: modelSettingsSchema.optional(),
 });
 
 // Use the shared StopWhen schema with optional and nullable modifiers
-const projectStopWhenSchema = StopWhenSchema.optional().nullable();
+const projectStopWhenSchema = z
+  .object({
+    transferCountIs: z.number().min(1).max(100).optional().nullable(),
+    stepCountIs: z.number().min(1).max(1000).optional().nullable(),
+  })
+  .optional();
 
 export const projectSchema = z.object({
   id: z

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

@@ -11,6 +11,7 @@ import {
   ItemCardTitle,
 } from '@/components/ui/item-card';
 import type { Project } from '@/lib/types/project';
+import type { ProjectFormData } from './form/validation';
 import { ProjectItemMenu } from './project-item-menu';
 
 export interface ProjectItemProps extends Project {
@@ -38,7 +39,7 @@ export function ProjectItem({
         </ItemCardLink>
         <ProjectItemMenu
           projectName={name}
-          projectData={{ id: projectId, name, description, models, stopWhen }}
+          projectData={{ id: projectId, name, description, models, stopWhen } as ProjectFormData}
           tenantId={tenantId}
         />
       </ItemCardHeader>

package/src/features/graph/commands/commands.ts

@@ -2,7 +2,7 @@ import type { Connection, Edge, Node } from '@xyflow/react';
 import { addEdge } from '@xyflow/react';
 import { EdgeType } from '@/components/graph/configuration/edge-types';
 import type { GraphMetadata } from '@/components/graph/configuration/graph-types';
-import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { graphStore } from '@/features/graph/state/use-graph-store';
 import { eventBus } from '@/lib/events';
 import type { Command } from './command-manager';
 
@@ -13,25 +13,25 @@ export class AddNodeCommand implements Command {
     this.node = node;
   }
   execute() {
-    const { setNodes } = useGraphStore.getState();
-    setNodes((prev) => prev.concat(this.node));
+    const { actions } = graphStore.getState();
+    actions.setNodes((prev) => prev.concat(this.node));
   }
   undo() {
-    const { setNodes } = useGraphStore.getState();
-    setNodes((prev) => prev.filter((n) => n.id !== this.node.id));
+    const { actions } = graphStore.getState();
+    actions.setNodes((prev) => prev.filter((n) => n.id !== this.node.id));
   }
 }
 
 export class DeleteSelectionCommand implements Command {
   readonly name = 'DeleteSelection';
   execute() {
-    const { deleteSelected } = useGraphStore.getState();
-    deleteSelected();
+    const { actions } = graphStore.getState();
+    actions.deleteSelected();
   }
   undo() {
     // relies on store history; in a richer system we'd capture diffs
-    const { undo } = useGraphStore.getState();
-    undo();
+    const { actions } = graphStore.getState();
+    actions.undo();
   }
 }
 
@@ -43,8 +43,8 @@ export class ConnectEdgeCommand implements Command {
     this.connection = connection;
   }
   execute() {
-    const { setEdges } = useGraphStore.getState();
-    setEdges((eds) => {
+    const { actions } = graphStore.getState();
+    actions.setEdges((eds) => {
       const newEdges = addEdge(this.connection as any, eds);
       const last = newEdges[newEdges.length - 1];
       this.createdEdgeId = last?.id ?? null;
@@ -53,9 +53,9 @@ export class ConnectEdgeCommand implements Command {
   }
   undo() {
     if (!this.createdEdgeId) return;
-    const { setEdges } = useGraphStore.getState();
+    const { actions } = graphStore.getState();
     const id = this.createdEdgeId;
-    setEdges((eds) => eds.filter((e) => e.id !== id));
+    actions.setEdges((eds) => eds.filter((e) => e.id !== id));
   }
 }
 
@@ -69,21 +69,21 @@ export class UpdateMetadataCommand implements Command {
     this.value = value;
   }
   execute() {
-    const { metadata, setMetadata } = useGraphStore.getState();
+    const { metadata, actions } = graphStore.getState();
     this.prev = metadata[this.field];
-    setMetadata(this.field, this.value);
+    actions.setMetadata(this.field, this.value);
   }
   undo() {
-    const { setMetadata } = useGraphStore.getState();
-    setMetadata(this.field, this.prev as any);
+    const { actions } = graphStore.getState();
+    actions.setMetadata(this.field, this.prev as any);
   }
 }
 
 export class ClearSelectionCommand implements Command {
   readonly name = 'ClearSelection';
   execute() {
-    const { clearSelection } = useGraphStore.getState();
-    clearSelection();
+    const { actions } = graphStore.getState();
+    actions.clearSelection();
   }
   undo() {
     // no-op for now
@@ -99,12 +99,12 @@ export class AddPreparedEdgeCommand implements Command {
     this.deselectOtherEdgesIfA2A = Boolean(options?.deselectOtherEdgesIfA2A);
   }
   execute() {
-    const { setEdges, setNodes } = useGraphStore.getState();
+    const { actions } = graphStore.getState();
     if (this.edge.type === EdgeType.A2A) {
       // deselect nodes when creating an A2A edge
-      setNodes((nds) => nds.map((n) => ({ ...n, selected: false })));
+      actions.setNodes((nds) => nds.map((n) => ({ ...n, selected: false })));
     }
-    setEdges((eds) => {
+    actions.setEdges((eds) => {
       if (eds.some((e) => e.id === this.edge.id)) return eds;
       const base =
         this.deselectOtherEdgesIfA2A && this.edge.type === EdgeType.A2A
@@ -116,8 +116,8 @@ export class AddPreparedEdgeCommand implements Command {
     });
   }
   undo() {
-    const { setEdges } = useGraphStore.getState();
+    const { actions } = graphStore.getState();
     const id = this.edge.id;
-    setEdges((eds) => eds.filter((e) => e.id !== id));
+    actions.setEdges((eds) => eds.filter((e) => e.id !== id));
   }
 }

package/src/features/graph/state/use-graph-store.ts

@@ -9,6 +9,7 @@ import type { ArtifactComponent } from '@/lib/api/artifact-components';
 import type { DataComponent } from '@/lib/api/data-components';
 import type { MCPTool } from '@/lib/types/tools';
 import type { GraphErrorSummary } from '@/lib/utils/graph-error-parser';
+import { useShallow } from 'zustand/react/shallow';
 
 type HistoryEntry = { nodes: Node[]; edges: Edge[] };
 
@@ -27,7 +28,7 @@ type GraphStateData = {
   showErrors: boolean;
 };
 
-type GraphState = GraphStateData & {
+type GraphActions = {
   setInitial(
     nodes: Node[],
     edges: Edge[],
@@ -62,7 +63,11 @@ type GraphState = GraphStateData & {
   getEdgeErrors(edgeId: string): GraphErrorSummary['allErrors'];
 };
 
-export const useGraphStore = create<GraphState>()(
+type GraphState = GraphStateData & {
+  actions: GraphActions;
+};
+
+export const graphStore = create<GraphState>()(
   devtools((set, get) => ({
     nodes: [],
     edges: [],
@@ -90,186 +95,208 @@ export const useGraphStore = create<GraphState>()(
     future: [],
     errors: null,
     showErrors: false,
-    setInitial(
-      nodes,
-      edges,
-      metadata,
-      dataComponentLookup = {},
-      artifactComponentLookup = {},
-      toolLookup = {},
-      agentToolConfigLookup = {}
-    ) {
-      set({
+    // Separate "namespace" for actions
+    actions: {
+      setInitial(
         nodes,
         edges,
         metadata,
-        dataComponentLookup,
-        artifactComponentLookup,
-        toolLookup,
-        agentToolConfigLookup,
-        dirty: false,
-        history: [],
-        future: [],
-        errors: null,
-        showErrors: false,
-      });
-    },
-    setDataComponentLookup(dataComponentLookup) {
-      set({ dataComponentLookup });
-    },
-    setArtifactComponentLookup(artifactComponentLookup) {
-      set({ artifactComponentLookup });
-    },
-    setToolLookup(toolLookup) {
-      set({ toolLookup });
-    },
-    setAgentToolConfigLookup(agentToolConfigLookup) {
-      set({ agentToolConfigLookup });
-    },
-    setNodes(updater) {
-      set((state) => ({ nodes: updater(state.nodes) }));
-    },
-    setEdges(updater) {
-      set((state) => ({ edges: updater(state.edges) }));
-    },
-    push(nodes, edges) {
-      set((state) => ({
-        history: [...state.history, { nodes, edges }],
-        future: [],
-      }));
-    },
-    onNodesChange(changes) {
-      // Check if any change type would modify the graph (not just selection changes)
-      const hasModifyingChange = changes.some(
-        (change) =>
-          change.type === 'remove' ||
-          change.type === 'add' ||
-          change.type === 'replace' ||
-          change.type === 'position'
-      );
+        dataComponentLookup = {},
+        artifactComponentLookup = {},
+        toolLookup = {},
+        agentToolConfigLookup = {}
+      ) {
+        set({
+          nodes,
+          edges,
+          metadata,
+          dataComponentLookup,
+          artifactComponentLookup,
+          toolLookup,
+          agentToolConfigLookup,
+          dirty: false,
+          history: [],
+          future: [],
+          errors: null,
+          showErrors: false,
+        });
+      },
+      setDataComponentLookup(dataComponentLookup) {
+        set({ dataComponentLookup });
+      },
+      setArtifactComponentLookup(artifactComponentLookup) {
+        set({ artifactComponentLookup });
+      },
+      setToolLookup(toolLookup) {
+        set({ toolLookup });
+      },
+      setAgentToolConfigLookup(agentToolConfigLookup) {
+        set({ agentToolConfigLookup });
+      },
+      setNodes(updater) {
+        set((state) => ({ nodes: updater(state.nodes) }));
+      },
+      setEdges(updater) {
+        set((state) => ({ edges: updater(state.edges) }));
+      },
+      push(nodes, edges) {
+        set((state) => ({
+          history: [...state.history, { nodes, edges }],
+          future: [],
+        }));
+      },
+      onNodesChange(changes) {
+        // Check if any change type would modify the graph (not just selection changes)
+        const hasModifyingChange = changes.some(
+          (change) =>
+            change.type === 'remove' ||
+            change.type === 'add' ||
+            change.type === 'replace' ||
+            change.type === 'position'
+        );
 
-      set((state) => ({
-        history: [...state.history, { nodes: state.nodes, edges: state.edges }],
-        nodes: applyNodeChanges(changes, state.nodes),
-        dirty: hasModifyingChange ? true : state.dirty,
-      }));
-    },
-    onEdgesChange(changes) {
-      // Check if any change type would modify the graph (not just selection changes)
-      const hasModifyingChange = changes.some(
-        (change) => change.type === 'remove' || change.type === 'add' || change.type === 'replace'
-      );
+        set((state) => ({
+          history: [...state.history, { nodes: state.nodes, edges: state.edges }],
+          nodes: applyNodeChanges(changes, state.nodes),
+          dirty: hasModifyingChange ? true : state.dirty,
+        }));
+      },
+      onEdgesChange(changes) {
+        // Check if any change type would modify the graph (not just selection changes)
+        const hasModifyingChange = changes.some(
+          (change) => change.type === 'remove' || change.type === 'add' || change.type === 'replace'
+        );
 
-      set((state) => {
-        // Check for edge removals that disconnect agent from MCP node
-        const removeChanges = changes.filter((change) => change.type === 'remove');
-        let updatedNodes = state.nodes;
+        set((state) => {
+          // Check for edge removals that disconnect agent from MCP node
+          const removeChanges = changes.filter((change) => change.type === 'remove');
+          let updatedNodes = state.nodes;
 
-        for (const removeChange of removeChanges) {
-          const edgeToRemove = state.edges.find((e) => e.id === removeChange.id);
-          if (edgeToRemove && edgeToRemove.targetHandle === mcpNodeHandleId) {
-            // Find the target MCP node and clear its agentId
-            const mcpNode = state.nodes.find((n) => n.id === edgeToRemove.target);
-            if (mcpNode && mcpNode.type === NodeType.MCP) {
-              updatedNodes = updatedNodes.map((n) =>
-                n.id === mcpNode.id
-                  ? { ...n, data: { ...n.data, agentId: null, relationshipId: null } }
-                  : n
-              );
+          for (const removeChange of removeChanges) {
+            const edgeToRemove = state.edges.find((e) => e.id === removeChange.id);
+            if (edgeToRemove && edgeToRemove.targetHandle === mcpNodeHandleId) {
+              // Find the target MCP node and clear its agentId
+              const mcpNode = state.nodes.find((n) => n.id === edgeToRemove.target);
+              if (mcpNode && mcpNode.type === NodeType.MCP) {
+                updatedNodes = updatedNodes.map((n) =>
+                  n.id === mcpNode.id
+                    ? { ...n, data: { ...n.data, agentId: null, relationshipId: null } }
+                    : n
+                );
+              }
             }
           }
-        }
 
-        return {
-          history: [...state.history, { nodes: state.nodes, edges: state.edges }],
-          nodes: updatedNodes,
-          edges: applyEdgeChanges(changes, state.edges),
-          dirty: hasModifyingChange ? true : state.dirty,
-        };
-      });
-    },
-    onConnect(connection) {
-      set((state) => ({ edges: addEdge(connection as any, state.edges) }));
-    },
-    setMetadata(field, value) {
-      set((state) => ({ metadata: { ...state.metadata, [field]: value } }));
-    },
-    undo() {
-      const { history } = get();
-      if (history.length === 0) return;
-      const prev = history[history.length - 1];
-      set((state) => ({
-        nodes: prev.nodes,
-        edges: prev.edges,
-        history: state.history.slice(0, -1),
-        future: [{ nodes: state.nodes, edges: state.edges }, ...state.future],
-        dirty: state.dirty,
-      }));
-    },
-    redo() {
-      const { future } = get();
-      if (future.length === 0) return;
-      const next = future[0];
-      set((state) => ({
-        nodes: next.nodes,
-        edges: next.edges,
-        future: state.future.slice(1),
-        history: [...state.history, { nodes: state.nodes, edges: state.edges }],
-        dirty: state.dirty,
-      }));
-    },
-    markSaved() {
-      set({ dirty: false });
-    },
-    markUnsaved() {
-      set({ dirty: true });
-    },
-    clearSelection() {
-      set((state) => ({
-        nodes: state.nodes.map((n) => ({ ...n, selected: false })),
-        edges: state.edges.map((e) => ({ ...e, selected: false })),
-        dirty: state.dirty,
-      }));
-    },
-    deleteSelected() {
-      set((state) => {
-        const nodesToDelete = new Set(
-          state.nodes.filter((n) => n.selected && (n.deletable ?? true)).map((n) => n.id)
-        );
-        const edgesRemaining = state.edges.filter(
-          (e) => !e.selected && !nodesToDelete.has(e.source) && !nodesToDelete.has(e.target)
-        );
-        const nodesRemaining = state.nodes.filter((n) => !nodesToDelete.has(n.id));
-        return {
+          return {
+            history: [...state.history, { nodes: state.nodes, edges: state.edges }],
+            nodes: updatedNodes,
+            edges: applyEdgeChanges(changes, state.edges),
+            dirty: hasModifyingChange ? true : state.dirty,
+          };
+        });
+      },
+      onConnect(connection) {
+        set((state) => ({ edges: addEdge(connection as any, state.edges) }));
+      },
+      setMetadata(field, value) {
+        set((state) => ({ metadata: { ...state.metadata, [field]: value } }));
+      },
+      undo() {
+        const { history } = get();
+        if (history.length === 0) return;
+        const prev = history[history.length - 1];
+        set((state) => ({
+          nodes: prev.nodes,
+          edges: prev.edges,
+          history: state.history.slice(0, -1),
+          future: [{ nodes: state.nodes, edges: state.edges }, ...state.future],
+          dirty: state.dirty,
+        }));
+      },
+      redo() {
+        const { future } = get();
+        if (future.length === 0) return;
+        const next = future[0];
+        set((state) => ({
+          nodes: next.nodes,
+          edges: next.edges,
+          future: state.future.slice(1),
           history: [...state.history, { nodes: state.nodes, edges: state.edges }],
-          nodes: nodesRemaining,
-          edges: edgesRemaining,
-          dirty: true,
-        };
-      });
-    },
-    setErrors(errors) {
-      set({ errors, showErrors: errors !== null });
-    },
-    clearErrors() {
-      set({ errors: null, showErrors: false });
-    },
-    setShowErrors(show) {
-      set({ showErrors: show });
-    },
-    hasErrors() {
-      const { errors } = get();
-      return errors !== null && errors.totalErrors > 0;
-    },
-    getNodeErrors(nodeId) {
-      const { errors } = get();
-      if (!errors || !errors.nodeErrors[nodeId]) return [];
-      return errors.nodeErrors[nodeId];
-    },
-    getEdgeErrors(edgeId) {
-      const { errors } = get();
-      if (!errors || !errors.edgeErrors[edgeId]) return [];
-      return errors.edgeErrors[edgeId];
+          dirty: state.dirty,
+        }));
+      },
+      markSaved() {
+        set({ dirty: false });
+      },
+      markUnsaved() {
+        set({ dirty: true });
+      },
+      clearSelection() {
+        set((state) => ({
+          nodes: state.nodes.map((n) => ({ ...n, selected: false })),
+          edges: state.edges.map((e) => ({ ...e, selected: false })),
+          dirty: state.dirty,
+        }));
+      },
+      deleteSelected() {
+        set((state) => {
+          const nodesToDelete = new Set(
+            state.nodes.filter((n) => n.selected && (n.deletable ?? true)).map((n) => n.id)
+          );
+          const edgesRemaining = state.edges.filter(
+            (e) => !e.selected && !nodesToDelete.has(e.source) && !nodesToDelete.has(e.target)
+          );
+          const nodesRemaining = state.nodes.filter((n) => !nodesToDelete.has(n.id));
+          return {
+            history: [...state.history, { nodes: state.nodes, edges: state.edges }],
+            nodes: nodesRemaining,
+            edges: edgesRemaining,
+            dirty: true,
+          };
+        });
+      },
+      setErrors(errors) {
+        set({ errors, showErrors: errors !== null });
+      },
+      clearErrors() {
+        set({ errors: null, showErrors: false });
+      },
+      setShowErrors(show) {
+        set({ showErrors: show });
+      },
+      hasErrors() {
+        const { errors } = get();
+        return errors !== null && errors.totalErrors > 0;
+      },
+      getNodeErrors(nodeId) {
+        const { errors } = get();
+        if (!errors || !errors.nodeErrors[nodeId]) return [];
+        return errors.nodeErrors[nodeId];
+      },
+      getEdgeErrors(edgeId) {
+        const { errors } = get();
+        if (!errors || !errors.edgeErrors[edgeId]) return [];
+        return errors.edgeErrors[edgeId];
+      },
     },
   }))
 );
+
+/**
+ * Actions are functions that update values in your store.
+ * These are static and do not change between renders.
+ *
+ * @see https://tkdodo.eu/blog/working-with-zustand#separate-actions-from-state
+ */
+export const useGraphActions = () => graphStore((state) => state.actions);
+
+/**
+ * Select values from the graph store (excluding actions).
+ *
+ * We explicitly use `GraphStateData` instead of `GraphState`,
+ * which includes actions, to encourage using `useGraphActions`
+ * when accessing or calling actions.
+ */
+export function useGraphStore<T>(selector: (state: GraphStateData) => T): T {
+  return graphStore(useShallow(selector));
+}

package/src/features/graph/ui/use-graph-shortcuts.ts

@@ -1,8 +1,8 @@
 import { useCallback, useEffect } from 'react';
-import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { useGraphActions } from '@/features/graph/state/use-graph-store';
 
 export function useGraphShortcuts() {
-  const { undo, redo, deleteSelected } = useGraphStore();
+  const { undo, redo, deleteSelected } = useGraphActions();
 
   const onKeyDown = useCallback(
     (e: KeyboardEvent) => {

package/src/hooks/use-graph-errors.ts

@@ -3,7 +3,7 @@
  */
 
 import { useCallback } from 'react';
-import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { useGraphStore, useGraphActions } from '@/features/graph/state/use-graph-store';
 
 export interface ErrorHelpers {
   hasFieldError: (fieldName: string) => boolean;
@@ -12,14 +12,12 @@ export interface ErrorHelpers {
 }
 
 export function useGraphErrors() {
-  const errors = useGraphStore((state) => state.errors);
-  const showErrors = useGraphStore((state) => state.showErrors);
-  const hasErrors = useGraphStore((state) => state.hasErrors);
-  const getNodeErrors = useGraphStore((state) => state.getNodeErrors);
-  const getEdgeErrors = useGraphStore((state) => state.getEdgeErrors);
-  const setErrors = useGraphStore((state) => state.setErrors);
-  const clearErrors = useGraphStore((state) => state.clearErrors);
-  const setShowErrors = useGraphStore((state) => state.setShowErrors);
+  const { errors, showErrors } = useGraphStore((state) => ({
+    errors: state.errors,
+    showErrors: state.showErrors,
+  }));
+  const { hasErrors, getNodeErrors, getEdgeErrors, setErrors, clearErrors, setShowErrors } =
+    useGraphActions();
 
   const getNodeErrorCount = (nodeId: string): number => {
     return getNodeErrors(nodeId).length;

package/src/hooks/use-node-editor.ts

@@ -1,6 +1,6 @@
 import { useReactFlow } from '@xyflow/react';
 import { useCallback, useRef } from 'react';
-import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { useGraphActions } from '@/features/graph/state/use-graph-store';
 import type { ErrorHelpers } from './use-graph-errors';
 
 interface UseNodeEditorOptions {
@@ -10,7 +10,7 @@ interface UseNodeEditorOptions {
 
 export function useNodeEditor({ selectedNodeId, errorHelpers }: UseNodeEditorOptions) {
   const { updateNodeData } = useReactFlow();
-  const markUnsaved = useGraphStore((state) => state.markUnsaved);
+  const { markUnsaved } = useGraphActions();
 
   // Focus management for error fields
   const fieldRefs = useRef<Record<string, HTMLElement>>({});
@@ -107,8 +107,8 @@ export function useNodeEditor({ selectedNodeId, errorHelpers }: UseNodeEditorOpt
         const finalKey = nestedPath[nestedPath.length - 1];
         if (value === undefined || value === null || value === '') {
           delete current[finalKey];
-          // If the parent object becomes empty, clean it up
-          if (Object.keys(updatedParent).length === 0 || Object.keys(current).length === 0) {
+          // Check if the parent object becomes empty after deletion
+          if (Object.keys(updatedParent).length === 0) {
             updateField(parentField, null);
             return;
           }