@stigmer/react 3.12.1 → 3.12.3

package/src/workflow/WorkflowVersionTimeline.tsx

@@ -6,6 +6,7 @@ import { useWorkflowVersions } from "./useWorkflowVersions.js";
 import { WorkflowVersionBadge } from "./WorkflowVersionBadge.js";
 import type { VersionEntry } from "../version-history/types.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
+import { formatRelativeTime } from "../activity/format-relative-time.js";
 
 /** Props for {@link WorkflowVersionTimeline}. */
 export interface WorkflowVersionTimelineProps {
@@ -250,31 +251,6 @@ function EmptyState({ className }: { readonly className?: string }) {
   );
 }
 
-// ---------------------------------------------------------------------------
-// Utilities
-// ---------------------------------------------------------------------------
-
-function formatRelativeTime(date: Date): string {
-  const now = Date.now();
-  const diffMs = now - date.getTime();
-  const diffSec = Math.floor(diffMs / 1000);
-  const diffMin = Math.floor(diffSec / 60);
-  const diffHr = Math.floor(diffMin / 60);
-  const diffDays = Math.floor(diffHr / 24);
-
-  if (diffSec < 60) return "just now";
-  if (diffMin < 60) return `${diffMin}m ago`;
-  if (diffHr < 24) return `${diffHr}h ago`;
-  if (diffDays < 7) return `${diffDays}d ago`;
-  if (diffDays < 30) return `${Math.floor(diffDays / 7)}w ago`;
-
-  return date.toLocaleDateString(undefined, {
-    month: "short",
-    day: "numeric",
-    year: date.getFullYear() !== new Date().getFullYear() ? "numeric" : undefined,
-  });
-}
-
 // ---------------------------------------------------------------------------
 // Icons
 // ---------------------------------------------------------------------------

package/src/workflow/__tests__/panelNegotiation.test.tsx

@@ -0,0 +1,230 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import { WorkflowExecutionSchema } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/api_pb";
+import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
+import type { DerivedCostSummary } from "../../internal/store/workflow-execution-event-store";
+import { useWorkflowExecution } from "../useWorkflowExecution";
+import { useWorkflowExecutionEventStream } from "../useWorkflowExecutionEventStream";
+import { useWorkflowExecutionArtifacts } from "../useWorkflowExecutionArtifacts";
+import { useWorkflowExecutionFileChanges } from "../useWorkflowExecutionFileChanges";
+import { useWorkflowExecutionActions } from "../useWorkflowExecutionActions";
+import { WorkflowExecutionViewer } from "../WorkflowExecutionViewer";
+
+// ---------------------------------------------------------------------------
+// Wiring-contract tests for the execution panel's host-negotiation surface
+// (issue #654): `panel="none"` omission, `defaultPanelOpen`, and the
+// controlled/observed `panelOpen` + `onPanelOpenChange` pair — the workflow
+// mirror of the session organisms' #651 contract (see the session
+// panelNegotiation suite). Workflow-specific beat: Diagnose gates on the
+// panel too, because its conversation renders inside the panel.
+//
+// Same probe/stub setup as the approvals suite: data hooks are stubbed to a
+// loaded, task-less execution; the graph and comparison picker are inert.
+// ---------------------------------------------------------------------------
+
+vi.mock("../useWorkflowExecution", () => ({
+  useWorkflowExecution: vi.fn(),
+}));
+vi.mock("../useWorkflowExecutionEventStream", () => ({
+  useWorkflowExecutionEventStream: vi.fn(),
+}));
+vi.mock("../useWorkflowExecutionArtifacts", () => ({
+  useWorkflowExecutionArtifacts: vi.fn(),
+}));
+vi.mock("../useWorkflowExecutionFileChanges", () => ({
+  useWorkflowExecutionFileChanges: vi.fn(),
+}));
+vi.mock("../useWorkflowExecutionActions", () => ({
+  useWorkflowExecutionActions: vi.fn(),
+}));
+vi.mock("../WorkflowExecutionGraph", () => ({
+  WorkflowExecutionGraph: () => <div data-testid="graph-stub" />,
+}));
+vi.mock("../execution-comparison/ExecutionComparisonPicker", () => ({
+  ExecutionComparisonPicker: () => null,
+}));
+
+const mockedUseWorkflowExecution = vi.mocked(useWorkflowExecution);
+const mockedUseEventStream = vi.mocked(useWorkflowExecutionEventStream);
+const mockedUseArtifacts = vi.mocked(useWorkflowExecutionArtifacts);
+const mockedUseFileChanges = vi.mocked(useWorkflowExecutionFileChanges);
+const mockedUseActions = vi.mocked(useWorkflowExecutionActions);
+
+const COST_SUMMARY: DerivedCostSummary = {
+  costConsumedMicros: 0n,
+  costRemainingMicros: -1n,
+  tokensConsumed: 0n,
+  tokensRemaining: -1n,
+  thresholdBreached: false,
+};
+
+function arrange(phase: ExecutionPhase = ExecutionPhase.EXECUTION_IN_PROGRESS) {
+  mockedUseWorkflowExecution.mockReturnValue({
+    execution: create(WorkflowExecutionSchema, {
+      metadata: { id: "wex_1", name: "nightly-report" },
+      spec: { workflowId: "wf_1" },
+      status: { phase, startedAt: "2026-07-15T00:00:00Z", tasks: [] },
+    }),
+    isLoading: false,
+    error: null,
+    refetch: vi.fn(),
+  } as unknown as ReturnType<typeof useWorkflowExecution>);
+  mockedUseEventStream.mockReturnValue({
+    events: [],
+    taskStates: new Map(),
+    costSummary: COST_SUMMARY,
+    streamState: { stage: "streaming" },
+    totalTasks: 0,
+    error: null,
+    reconnect: vi.fn(),
+  } as unknown as ReturnType<typeof useWorkflowExecutionEventStream>);
+  mockedUseArtifacts.mockReturnValue({
+    artifacts: [],
+  } as unknown as ReturnType<typeof useWorkflowExecutionArtifacts>);
+  mockedUseFileChanges.mockReturnValue({
+    fileChanges: [],
+    fileChangeCount: 0,
+    isLoading: false,
+    isRefetching: false,
+    error: null,
+    refetch: vi.fn(),
+  } as unknown as ReturnType<typeof useWorkflowExecutionFileChanges>);
+  mockedUseActions.mockReturnValue({
+    cancel: vi.fn(),
+    terminate: vi.fn(),
+    pause: vi.fn(),
+    resume: vi.fn(),
+    recover: vi.fn(),
+    submitApproval: vi.fn(),
+    submitTaskApproval: vi.fn(),
+    submitFileDecision: vi.fn(),
+    isSubmitting: false,
+    error: null,
+    clearError: vi.fn(),
+    approvalSubmittingToolCallIds: new Set<string>(),
+    approvalErrorsByToolCallId: new Map<string, Error>(),
+    taskApprovalSubmittingTaskNames: new Set<string>(),
+    taskApprovalErrorsByTaskName: new Map<string, Error>(),
+    fileDecisionSubmittingKeys: new Set<string>(),
+    fileDecisionErrorsByKey: new Map<string, Error>(),
+  } as unknown as ReturnType<typeof useWorkflowExecutionActions>);
+}
+
+function chipButton(): HTMLElement | null {
+  return (
+    screen.queryByRole("button", { name: "Show panel" }) ??
+    screen.queryByRole("button", { name: "Hide panel" })
+  );
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  localStorage.clear();
+});
+
+afterEach(cleanup);
+
+describe('WorkflowExecutionViewer — panel="none"', () => {
+  it("removes the chip and never renders the panel", () => {
+    arrange();
+    render(<WorkflowExecutionViewer executionId="wex_1" panel="none" />);
+    expect(chipButton()).toBeNull();
+  });
+
+  it("withholds Diagnose — its conversation renders inside the panel", () => {
+    arrange(ExecutionPhase.EXECUTION_FAILED);
+    render(
+      <WorkflowExecutionViewer executionId="wex_1" org="acme" panel="none" />,
+    );
+    expect(screen.queryByRole("button", { name: "Diagnose" })).toBeNull();
+    // The failed-state actions that live OUTSIDE the panel are untouched.
+    expect(screen.getByRole("button", { name: "Recover" })).toBeDefined();
+  });
+
+  it("keeps controlled props inert — panelOpen cannot force a surface that does not exist", () => {
+    arrange();
+    const onPanelOpenChange = vi.fn();
+    render(
+      <WorkflowExecutionViewer
+        executionId="wex_1"
+        panel="none"
+        panelOpen={true}
+        onPanelOpenChange={onPanelOpenChange}
+      />,
+    );
+    expect(chipButton()).toBeNull();
+    expect(onPanelOpenChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("WorkflowExecutionViewer — Diagnose in the default panel mode", () => {
+  it("offers Diagnose on a failed execution (the contrast for the none-mode withholding)", () => {
+    arrange(ExecutionPhase.EXECUTION_FAILED);
+    render(<WorkflowExecutionViewer executionId="wex_1" org="acme" />);
+    expect(screen.getByRole("button", { name: "Diagnose" })).toBeDefined();
+  });
+});
+
+describe("WorkflowExecutionViewer — observed panel state (uncontrolled + onPanelOpenChange)", () => {
+  it("reports chip toggles without taking control", () => {
+    arrange();
+    const seen: boolean[] = [];
+    render(
+      <WorkflowExecutionViewer
+        executionId="wex_1"
+        onPanelOpenChange={(open) => seen.push(open)}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Show panel" }));
+    expect(seen).toEqual([true]);
+    fireEvent.click(screen.getByRole("button", { name: "Hide panel" }));
+    expect(seen).toEqual([true, false]);
+  });
+
+  it("starts open with defaultPanelOpen, without a spurious notification", () => {
+    arrange();
+    const onPanelOpenChange = vi.fn();
+    render(
+      <WorkflowExecutionViewer
+        executionId="wex_1"
+        defaultPanelOpen
+        onPanelOpenChange={onPanelOpenChange}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "Hide panel" })).toBeDefined();
+    expect(onPanelOpenChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("WorkflowExecutionViewer — controlled panel state", () => {
+  it("follows panelOpen and surfaces the chip's request without applying it", () => {
+    arrange();
+    const seen: boolean[] = [];
+    const onPanelOpenChange = (open: boolean) => seen.push(open);
+    const { rerender } = render(
+      <WorkflowExecutionViewer
+        executionId="wex_1"
+        panelOpen={false}
+        onPanelOpenChange={onPanelOpenChange}
+      />,
+    );
+
+    // The chip requests; the host owns the state — nothing moves yet.
+    fireEvent.click(screen.getByRole("button", { name: "Show panel" }));
+    expect(seen).toEqual([true]);
+    expect(screen.getByRole("button", { name: "Show panel" })).toBeDefined();
+
+    // The host grants the request: the panel opens and the chip flips.
+    rerender(
+      <WorkflowExecutionViewer
+        executionId="wex_1"
+        panelOpen={true}
+        onPanelOpenChange={onPanelOpenChange}
+      />,
+    );
+    expect(screen.getByRole("button", { name: "Hide panel" })).toBeDefined();
+  });
+});

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);
+  });
+});