@stigmer/react 3.12.0 → 3.12.2

package/src/workflow/__tests__/useCanvasKeyboardShortcuts.undo.test.ts

@@ -0,0 +1,115 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { useCanvasKeyboardShortcuts } from "../useCanvasKeyboardShortcuts";
+import type { UseCanvasKeyboardShortcutsOptions } from "../useCanvasKeyboardShortcuts";
+
+// Keyboard undo/redo binding (moved here from useGraphHistory with the
+// oss#588 fix so the shortcut routes through the orchestrator's
+// canvas-syncing undo/redo instead of a raw model mutation).
+
+let container: HTMLDivElement;
+
+function makeOptions(
+  overrides: Partial<UseCanvasKeyboardShortcutsOptions> = {},
+): UseCanvasKeyboardShortcutsOptions {
+  return {
+    containerRef: { current: container },
+    selection: null,
+    duplicateNode: vi.fn(),
+    selectAll: vi.fn(),
+    clearSelection: vi.fn(),
+    onRequestTaskPicker: vi.fn(),
+    onDismiss: vi.fn(),
+    undo: vi.fn(),
+    redo: vi.fn(),
+    ...overrides,
+  };
+}
+
+function pressModZ(target: EventTarget, shiftKey = false) {
+  target.dispatchEvent(
+    new KeyboardEvent("keydown", {
+      key: "z",
+      metaKey: true,
+      shiftKey,
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+}
+
+beforeEach(() => {
+  container = document.createElement("div");
+  container.tabIndex = -1;
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  container.remove();
+});
+
+describe("useCanvasKeyboardShortcuts — undo/redo", () => {
+  it("Mod+Z triggers undo when focus is inside the container", () => {
+    const options = makeOptions();
+    renderHook(() => useCanvasKeyboardShortcuts(options));
+
+    container.focus();
+    pressModZ(container);
+
+    expect(options.undo).toHaveBeenCalledTimes(1);
+    expect(options.redo).not.toHaveBeenCalled();
+  });
+
+  it("Mod+Shift+Z triggers redo when focus is inside the container", () => {
+    const options = makeOptions();
+    renderHook(() => useCanvasKeyboardShortcuts(options));
+
+    container.focus();
+    pressModZ(container, true);
+
+    expect(options.redo).toHaveBeenCalledTimes(1);
+    expect(options.undo).not.toHaveBeenCalled();
+  });
+
+  it("Mod+Z does nothing when focus is outside the container", () => {
+    const options = makeOptions();
+    renderHook(() => useCanvasKeyboardShortcuts(options));
+
+    const outside = document.createElement("button");
+    document.body.appendChild(outside);
+    outside.focus();
+    pressModZ(outside);
+
+    expect(options.undo).not.toHaveBeenCalled();
+    outside.remove();
+  });
+
+  it("Mod+Z in a text input inside the container keeps native text undo", () => {
+    const options = makeOptions();
+    renderHook(() => useCanvasKeyboardShortcuts(options));
+
+    const input = document.createElement("input");
+    container.appendChild(input);
+    input.focus();
+    pressModZ(input);
+
+    expect(options.undo).not.toHaveBeenCalled();
+  });
+
+  it("Ctrl+Z (non-Mac modifier) also triggers undo", () => {
+    const options = makeOptions();
+    renderHook(() => useCanvasKeyboardShortcuts(options));
+
+    container.focus();
+    container.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "z",
+        ctrlKey: true,
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    expect(options.undo).toHaveBeenCalledTimes(1);
+  });
+});

package/src/workflow/__tests__/useWorkflowCanvas.dirty.test.tsx

@@ -0,0 +1,178 @@
+import { describe, it, expect } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { ReactFlowProvider } from "@xyflow/react";
+import type { Node } from "@xyflow/react";
+import { useWorkflowCanvas } from "../useWorkflowCanvas";
+
+// Regression tests for oss#609: isDirty was a model-reference comparison
+// while graphToYaml serializes no positions. A position-only edit session
+// (drag, auto-layout) armed Save and showed "Modified", but saving
+// round-tripped byte-identical YAML — and because hosts reset the baseline
+// by feeding saved YAML back through the `yaml` prop (string-change gated),
+// the flag could never clear. Dirty now means "saving would change the
+// document": position-only sessions never arm, content saves still clear
+// through the yaml-prop feedback loop.
+
+const FIXTURE_YAML = `apiVersion: agentic.stigmer.ai/v1
+kind: Workflow
+metadata:
+  name: dirty-fixture
+spec:
+  document:
+    dsl: "1.0.0"
+    namespace: test
+    name: dirty-fixture
+    version: "0.0.1"
+  tasks:
+    - name: step_1
+      kind: agent_call
+      task_config:
+        agent: "org/agent-slug"
+        message: "first"
+      flow:
+        then: step_2
+    - name: step_2
+      kind: agent_call
+      task_config:
+        agent: "org/agent-slug"
+        message: "second"
+      flow:
+        then: end
+`;
+
+function wrapper({ children }: { children: ReactNode }) {
+  return <ReactFlowProvider>{children}</ReactFlowProvider>;
+}
+
+function renderCanvas() {
+  return renderHook(({ yaml }: { yaml: string }) => useWorkflowCanvas(yaml), {
+    initialProps: { yaml: FIXTURE_YAML },
+    wrapper,
+  });
+}
+
+type CanvasResult = ReturnType<typeof renderCanvas>["result"];
+
+const DRAG_EVENT = {} as React.MouseEvent;
+
+/** Drives one full drag gesture the way React Flow produces it. */
+function drag(result: CanvasResult, id: string, to: { x: number; y: number }) {
+  const startNode = result.current.nodes.find((n) => n.id === id);
+  expect(startNode).toBeDefined();
+
+  act(() => {
+    result.current.onNodeDragStart(DRAG_EVENT, startNode!, [startNode!]);
+  });
+  act(() => {
+    result.current.onNodesChange([{ id, type: "position", position: to, dragging: true }]);
+    result.current.onNodesChange([{ id, type: "position", position: to, dragging: false }]);
+  });
+  const stopped: Node = { ...startNode!, position: to };
+  act(() => {
+    result.current.onNodeDragStop(DRAG_EVENT, stopped, [stopped]);
+  });
+}
+
+describe("useWorkflowCanvas — dirty semantics (oss#609)", () => {
+  it("a drag-only session is NOT dirty — saving it would change nothing", () => {
+    const { result } = renderCanvas();
+    expect(result.current.isDirty).toBe(false);
+
+    drag(result, "step_2", { x: 640, y: 480 });
+
+    // The drag IS in the model and undoable (oss#602)…
+    expect(result.current.canUndo).toBe(true);
+    // …but positions don't serialize, so the document is unchanged.
+    expect(result.current.isDirty).toBe(false);
+  });
+
+  it("an auto-layout-only session is NOT dirty", async () => {
+    const { result } = renderCanvas();
+
+    // Nudge a node off its dagre position first so auto-layout has real
+    // work to do (a no-op layout wouldn't even dispatch).
+    drag(result, "step_2", { x: 640, y: 480 });
+    await act(async () => {
+      await result.current.autoLayout();
+    });
+
+    expect(result.current.canUndo).toBe(true);
+    expect(result.current.isDirty).toBe(false);
+  });
+
+  it("a content edit IS dirty", () => {
+    const { result } = renderCanvas();
+
+    act(() => {
+      result.current.renameNode("step_1", "step_1_renamed");
+    });
+
+    expect(result.current.isDirty).toBe(true);
+  });
+
+  it("a content edit that is undone is NOT dirty again", () => {
+    const { result } = renderCanvas();
+
+    act(() => {
+      result.current.renameNode("step_1", "step_1_renamed");
+    });
+    expect(result.current.isDirty).toBe(true);
+
+    act(() => {
+      result.current.undo();
+    });
+    expect(result.current.isDirty).toBe(false);
+  });
+
+  it("the save feedback loop clears dirty: edit → serialize → feed back through the yaml prop", () => {
+    const { result, rerender } = renderCanvas();
+
+    act(() => {
+      result.current.renameNode("step_1", "step_1_renamed");
+    });
+    expect(result.current.isDirty).toBe(true);
+
+    // WorkflowEditorView's handleCanvasSave: serializeToYaml() → setYaml()
+    // → the string re-enters through the `yaml` prop and resets the baseline.
+    const saved = result.current.serializeToYaml();
+    expect(saved).not.toBeNull();
+    rerender({ yaml: saved! });
+
+    expect(result.current.isDirty).toBe(false);
+  });
+
+  it("drag + content edit is dirty; the save loop clears it even though positions never persist", () => {
+    const { result, rerender } = renderCanvas();
+
+    drag(result, "step_2", { x: 640, y: 480 });
+    act(() => {
+      result.current.renameNode("step_1", "step_1_renamed");
+    });
+    expect(result.current.isDirty).toBe(true);
+
+    const saved = result.current.serializeToYaml();
+    expect(saved).not.toBeNull();
+    rerender({ yaml: saved! });
+
+    // Pre-#609 this was the trap: the position delta kept the model
+    // reference unequal forever, so dirty survived its own save.
+    expect(result.current.isDirty).toBe(false);
+  });
+
+  it("cosmetic YAML formatting differences do not read as dirty", () => {
+    // Host YAML with extra blank lines / comments parses to the same model;
+    // the baseline is the canonical re-serialization, so the comparison is
+    // canonical-vs-canonical from the first render.
+    const cosmetic = `${FIXTURE_YAML}\n# trailing comment\n`;
+    const { result } = renderHook(({ yaml }: { yaml: string }) => useWorkflowCanvas(yaml), {
+      initialProps: { yaml: cosmetic },
+      wrapper,
+    });
+
+    expect(result.current.isDirty).toBe(false);
+
+    drag(result, "step_2", { x: 640, y: 480 });
+    expect(result.current.isDirty).toBe(false);
+  });
+});

package/src/workflow/__tests__/useWorkflowCanvas.drag.test.tsx

@@ -0,0 +1,224 @@
+import { describe, it, expect } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { ReactFlowProvider } from "@xyflow/react";
+import type { Node } from "@xyflow/react";
+import { useWorkflowCanvas } from "../useWorkflowCanvas";
+
+// Regression tests for oss#602: node drags updated only React Flow's copy
+// of positions — nothing wrote them back to the WorkflowGraphModel. Any
+// later dispatch's syncFromModel snapped dragged nodes back to stale model
+// positions, and drags were invisible to undo (inconsistent with
+// auto-layout, which records a MoveNodesCommand). These tests drive the
+// hook through the same event sequence React Flow produces: position
+// changes stream through onNodesChange during the drag, then
+// onNodeDragStop fires with the dragged nodes' final positions.
+
+const FIXTURE_YAML = `apiVersion: agentic.stigmer.ai/v1
+kind: Workflow
+metadata:
+  name: drag-fixture
+spec:
+  document:
+    dsl: "1.0.0"
+    namespace: test
+    name: drag-fixture
+    version: "0.0.1"
+  tasks:
+    - name: step_1
+      kind: agent_call
+      task_config:
+        agent: "org/agent-slug"
+        message: "first"
+      flow:
+        then: step_2
+    - name: step_2
+      kind: agent_call
+      task_config:
+        agent: "org/agent-slug"
+        message: "second"
+      flow:
+        then: end
+`;
+
+function wrapper({ children }: { children: ReactNode }) {
+  return <ReactFlowProvider>{children}</ReactFlowProvider>;
+}
+
+function renderCanvas() {
+  return renderHook(() => useWorkflowCanvas(FIXTURE_YAML), { wrapper });
+}
+
+type CanvasResult = ReturnType<typeof renderCanvas>["result"];
+
+const DRAG_EVENT = {} as React.MouseEvent;
+
+function canvasPosition(result: CanvasResult, id: string): { x: number; y: number } {
+  const node = result.current.nodes.find((n) => n.id === id);
+  expect(node).toBeDefined();
+  return { x: node!.position.x, y: node!.position.y };
+}
+
+function modelPosition(result: CanvasResult, id: string): { x: number; y: number } {
+  const node = result.current.graph?.nodes.find((n) => n.id === id);
+  expect(node).toBeDefined();
+  return { x: node!.position.x, y: node!.position.y };
+}
+
+/**
+ * Drives one full drag gesture the way React Flow does: dragStart with the
+ * node at its current position, position changes streamed through
+ * onNodesChange, then dragStop with the final positions.
+ */
+function drag(result: CanvasResult, moves: readonly { id: string; to: { x: number; y: number } }[]) {
+  const startNodes = moves.map(({ id }) => {
+    const node = result.current.nodes.find((n) => n.id === id);
+    expect(node).toBeDefined();
+    return node!;
+  });
+
+  act(() => {
+    result.current.onNodeDragStart(DRAG_EVENT, startNodes[0], startNodes);
+  });
+  act(() => {
+    result.current.onNodesChange(
+      moves.map(({ id, to }) => ({ id, type: "position" as const, position: to, dragging: true })),
+    );
+    result.current.onNodesChange(
+      moves.map(({ id, to }) => ({ id, type: "position" as const, position: to, dragging: false })),
+    );
+  });
+
+  const stoppedNodes: Node[] = moves.map(({ id, to }, i) => ({
+    ...startNodes[i],
+    id,
+    position: to,
+  }));
+  act(() => {
+    result.current.onNodeDragStop(DRAG_EVENT, stoppedNodes[0], stoppedNodes);
+  });
+}
+
+describe("useWorkflowCanvas — drag → model sync (oss#602)", () => {
+  it("writes the dragged position into the graph model", () => {
+    const { result } = renderCanvas();
+    const target = { x: 640, y: 480 };
+
+    drag(result, [{ id: "step_2", to: target }]);
+
+    expect(modelPosition(result, "step_2")).toEqual(target);
+    expect(canvasPosition(result, "step_2")).toEqual(target);
+  });
+
+  it("a dragged position survives a later dispatch (the snap-back repro)", () => {
+    const { result } = renderCanvas();
+    const target = { x: 640, y: 480 };
+
+    drag(result, [{ id: "step_2", to: target }]);
+
+    // Any dispatch triggers syncFromModel, which rebuilds the canvas from
+    // the model — on main this snapped step_2 back to its stale position.
+    act(() => {
+      result.current.renameNode("step_1", "step_1_renamed");
+    });
+
+    expect(result.current.nodes.map((n) => n.id)).toContain("step_1_renamed");
+    expect(canvasPosition(result, "step_2")).toEqual(target);
+    expect(modelPosition(result, "step_2")).toEqual(target);
+  });
+
+  it("undo restores pre-drag positions on model AND canvas; redo reapplies", () => {
+    const { result } = renderCanvas();
+    const before = canvasPosition(result, "step_2");
+    const target = { x: 640, y: 480 };
+
+    drag(result, [{ id: "step_2", to: target }]);
+    expect(result.current.canUndo).toBe(true);
+
+    act(() => {
+      result.current.undo();
+    });
+    expect(modelPosition(result, "step_2")).toEqual(before);
+    expect(canvasPosition(result, "step_2")).toEqual(before);
+
+    act(() => {
+      result.current.redo();
+    });
+    expect(modelPosition(result, "step_2")).toEqual(target);
+    expect(canvasPosition(result, "step_2")).toEqual(target);
+  });
+
+  it("a multi-select drag is ONE history entry — a single undo restores the group", () => {
+    const { result } = renderCanvas();
+    const before1 = canvasPosition(result, "step_1");
+    const before2 = canvasPosition(result, "step_2");
+
+    drag(result, [
+      { id: "step_1", to: { x: 100, y: 700 } },
+      { id: "step_2", to: { x: 300, y: 700 } },
+    ]);
+    expect(modelPosition(result, "step_1")).toEqual({ x: 100, y: 700 });
+    expect(modelPosition(result, "step_2")).toEqual({ x: 300, y: 700 });
+
+    act(() => {
+      result.current.undo();
+    });
+    expect(modelPosition(result, "step_1")).toEqual(before1);
+    expect(modelPosition(result, "step_2")).toEqual(before2);
+    expect(result.current.canUndo).toBe(false);
+  });
+
+  it("a zero-delta drag records no history entry", () => {
+    const { result } = renderCanvas();
+    const before = canvasPosition(result, "step_2");
+
+    drag(result, [{ id: "step_2", to: before }]);
+
+    expect(result.current.canUndo).toBe(false);
+  });
+
+  it("selection survives a drag (record-only dispatch: no canvas rebuild)", () => {
+    const { result } = renderCanvas();
+
+    act(() => {
+      result.current.onNodesChange([{ id: "step_2", type: "select", selected: true }]);
+    });
+    expect(result.current.nodes.find((n) => n.id === "step_2")?.selected).toBe(true);
+
+    drag(result, [{ id: "step_2", to: { x: 640, y: 480 } }]);
+
+    // A syncing dispatch would rebuild the node array from the model and
+    // wipe React Flow's `selected` flags — the record-only invariant
+    // keeps the just-dragged node selected. Pinned so a refactor to the
+    // syncing dispatch() fails here.
+    expect(result.current.nodes.find((n) => n.id === "step_2")?.selected).toBe(true);
+  });
+
+  it("a drag invalidated by a mid-drag model mutation records nothing", () => {
+    const { result } = renderCanvas();
+    const startNode = result.current.nodes.find((n) => n.id === "step_2")!;
+
+    act(() => {
+      result.current.onNodeDragStart(DRAG_EVENT, startNode, [startNode]);
+    });
+    // A mutation lands while the mouse is still down (keyboard undo and
+    // the host's YAML prop are both reachable mid-drag). syncFromModel
+    // already rebuilt the canvas, so the drag has nothing valid to record.
+    act(() => {
+      result.current.renameNode("step_1", "step_1_renamed");
+    });
+    act(() => {
+      result.current.onNodeDragStop(DRAG_EVENT, { ...startNode, position: { x: 640, y: 480 } }, [
+        { ...startNode, position: { x: 640, y: 480 } },
+      ]);
+    });
+
+    expect(modelPosition(result, "step_2")).not.toEqual({ x: 640, y: 480 });
+
+    // Only the rename is in history: one undo drains it.
+    act(() => {
+      result.current.undo();
+    });
+    expect(result.current.canUndo).toBe(false);
+  });
+});

package/src/workflow/__tests__/useWorkflowCanvas.undo.test.tsx

@@ -0,0 +1,133 @@
+import { describe, it, expect } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { ReactFlowProvider } from "@xyflow/react";
+import { useWorkflowCanvas } from "../useWorkflowCanvas";
+
+// Regression tests for oss#588: undoing a node deletion restored the graph
+// MODEL (inspector rebinds, history entry consumed) but the React Flow
+// nodes array was synced from a stale pre-undo snapshot, so the canvas
+// node never reappeared. These tests exercise the hook composition — the
+// exact layer the bug lived in; the pure command stack is covered in
+// graph-history.test.ts.
+
+const FIXTURE_YAML = `apiVersion: agentic.stigmer.ai/v1
+kind: Workflow
+metadata:
+  name: undo-fixture
+spec:
+  document:
+    dsl: "1.0.0"
+    namespace: test
+    name: undo-fixture
+    version: "0.0.1"
+  tasks:
+    - name: step_1
+      kind: agent_call
+      task_config:
+        agent: "org/agent-slug"
+        message: "first"
+      flow:
+        then: step_2
+    - name: step_2
+      kind: agent_call
+      task_config:
+        agent: "org/agent-slug"
+        message: "second"
+      flow:
+        then: end
+`;
+
+function wrapper({ children }: { children: ReactNode }) {
+  return <ReactFlowProvider>{children}</ReactFlowProvider>;
+}
+
+function renderCanvas() {
+  return renderHook(() => useWorkflowCanvas(FIXTURE_YAML), { wrapper });
+}
+
+function canvasNodeIds(result: { current: { nodes: readonly { id: string }[] } }): string[] {
+  return result.current.nodes.map((n) => n.id);
+}
+
+describe("useWorkflowCanvas — undo/redo canvas sync (oss#588)", () => {
+  it("parses the fixture into canvas nodes", () => {
+    const { result } = renderCanvas();
+    expect(canvasNodeIds(result)).toEqual(
+      expect.arrayContaining(["step_1", "step_2"]),
+    );
+  });
+
+  it("undo after a node delete restores the node on the CANVAS, not just the model", () => {
+    const { result } = renderCanvas();
+
+    const target = result.current.nodes.find((n) => n.id === "step_2");
+    expect(target).toBeDefined();
+
+    act(() => {
+      result.current.onNodesDelete([target!]);
+    });
+    expect(canvasNodeIds(result)).not.toContain("step_2");
+    expect(result.current.canUndo).toBe(true);
+
+    act(() => {
+      result.current.undo();
+    });
+
+    // The model restores (this always worked — the inspector saw it) …
+    expect(result.current.graph?.nodes.map((n) => n.id)).toContain("step_2");
+    // … and the canvas must restore with it (the oss#588 gap).
+    expect(canvasNodeIds(result)).toContain("step_2");
+    expect(result.current.canUndo).toBe(false);
+    expect(result.current.canRedo).toBe(true);
+  });
+
+  it("undo restores the deleted node's edges on the canvas", () => {
+    const { result } = renderCanvas();
+    const edgeCountBefore = result.current.edges.length;
+
+    const target = result.current.nodes.find((n) => n.id === "step_2");
+    act(() => {
+      result.current.onNodesDelete([target!]);
+    });
+    expect(result.current.edges.length).toBeLessThan(edgeCountBefore);
+
+    act(() => {
+      result.current.undo();
+    });
+    expect(result.current.edges.length).toBe(edgeCountBefore);
+  });
+
+  it("redo after an undo removes the node from the canvas again", () => {
+    const { result } = renderCanvas();
+
+    const target = result.current.nodes.find((n) => n.id === "step_2");
+    act(() => {
+      result.current.onNodesDelete([target!]);
+    });
+    act(() => {
+      result.current.undo();
+    });
+    expect(canvasNodeIds(result)).toContain("step_2");
+
+    act(() => {
+      result.current.redo();
+    });
+
+    expect(result.current.graph?.nodes.map((n) => n.id)).not.toContain("step_2");
+    expect(canvasNodeIds(result)).not.toContain("step_2");
+    expect(result.current.canUndo).toBe(true);
+    expect(result.current.canRedo).toBe(false);
+  });
+
+  it("undo with an empty history leaves the canvas untouched", () => {
+    const { result } = renderCanvas();
+    const before = canvasNodeIds(result);
+
+    act(() => {
+      result.current.undo();
+    });
+
+    expect(canvasNodeIds(result)).toEqual(before);
+  });
+});