@inkeep/agents-manage-ui 0.12.1 → 0.14.0

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"

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/components/traces/timeline/timeline-wrapper.tsx

@@ -101,9 +101,9 @@ function EmptyTimeline({
                 <ExternalLink
                   className="text-amber-700 dark:text-amber-300 dark:hover:text-amber-200 ml-0 mt-1"
                   iconClassName="text-amber-700 dark:text-amber-300 dark:group-hover/link:text-amber-200"
-                  href={`${DOCS_BASE_URL}/quick-start/observability`}
+                  href={`${DOCS_BASE_URL}/quick-start/traces`}
                 >
-                  View observability setup guide
+                  View traces setup guide
                 </ExternalLink>
               </div>
             )}

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) => {