@stigmer/react 3.12.0 → 3.12.2

package/src/workflow/__tests__/useWorkflowExecutionPanel.test.ts

@@ -16,6 +16,7 @@ import {
 import {
   useWorkflowExecutionPanel,
   workflowArtifactTabPath,
+  type UseWorkflowExecutionPanelOptions,
 } from "../useWorkflowExecutionPanel";
 
 function artifact(id: string, displayName: string) {
@@ -238,3 +239,102 @@ describe("useWorkflowExecutionPanel openDiagnosis", () => {
     );
   });
 });
+
+// ---------------------------------------------------------------------------
+// The controlled/observable open-state seam — the #651 contract mirrored from
+// useSessionPanel (#654). The panel opens ITSELF (Diagnose, artifact/change
+// opens), so onOpenChange fires in BOTH modes; controlled mode surfaces
+// requests without applying them, and a declined request stays re-fireable.
+// ---------------------------------------------------------------------------
+
+function renderSeamPanel(initial?: UseWorkflowExecutionPanelOptions) {
+  return renderHook(
+    (opts: UseWorkflowExecutionPanelOptions) => useWorkflowExecutionPanel(opts),
+    { initialProps: { ...initial } as UseWorkflowExecutionPanelOptions },
+  );
+}
+
+describe("useWorkflowExecutionPanel — observed open state (uncontrolled + onOpenChange)", () => {
+  it("reports the chip toggle without taking control", () => {
+    const seen: boolean[] = [];
+    const { result } = renderSeamPanel({ onOpenChange: (o) => seen.push(o) });
+    act(() => result.current.openPanel());
+    expect(result.current.isOpen).toBe(true);
+    act(() => result.current.closePanel());
+    expect(result.current.isOpen).toBe(false);
+    expect(seen).toEqual([true, false]);
+  });
+
+  it("reports internal open intents (openDiagnosis, openArtifact), once per actual transition", () => {
+    const seen: boolean[] = [];
+    const { result } = renderSeamPanel({ onOpenChange: (o) => seen.push(o) });
+    act(() => result.current.openDiagnosis());
+    // Already open — further open intents are not transitions.
+    act(() => result.current.openArtifact(artifact("art_1", "report.json")));
+    act(() => result.current.openPanel());
+    expect(seen).toEqual([true]);
+  });
+
+  it("starts open when defaultOpen is set, without a spurious notification", () => {
+    const seen: boolean[] = [];
+    const { result } = renderSeamPanel({
+      defaultOpen: true,
+      onOpenChange: (o) => seen.push(o),
+    });
+    expect(result.current.isOpen).toBe(true);
+    expect(seen).toEqual([]);
+  });
+});
+
+describe("useWorkflowExecutionPanel — controlled open state", () => {
+  it("follows the host's open value and ignores defaultOpen", () => {
+    const { result, rerender } = renderSeamPanel({ open: false, defaultOpen: true });
+    expect(result.current.isOpen).toBe(false);
+    rerender({ open: true, defaultOpen: true });
+    expect(result.current.isOpen).toBe(true);
+  });
+
+  it("surfaces intents through onOpenChange without flipping state itself", () => {
+    const seen: boolean[] = [];
+    const onOpenChange = (o: boolean) => seen.push(o);
+    const { result, rerender } = renderSeamPanel({ open: false, onOpenChange });
+    act(() => result.current.openPanel());
+    expect(seen).toEqual([true]);
+    expect(result.current.isOpen).toBe(false);
+    // The host grants the request.
+    rerender({ open: true, onOpenChange });
+    expect(result.current.isOpen).toBe(true);
+    act(() => result.current.closePanel());
+    expect(seen).toEqual([true, false]);
+    expect(result.current.isOpen).toBe(true);
+  });
+
+  it("re-fires a declined request (once per request, not per transition)", () => {
+    const seen: boolean[] = [];
+    const onOpenChange = (o: boolean) => seen.push(o);
+    const { result } = renderSeamPanel({ open: false, onOpenChange });
+    act(() => result.current.openArtifact(artifact("art_1", "a.json")));
+    // The host declined (open stayed false) — a later intent must re-fire,
+    // not be swallowed by a stale "already requested" memory.
+    act(() => result.current.openFileChange(fileChange("src/a.ts")));
+    expect(seen).toEqual([true, true]);
+  });
+
+  it("Diagnose is reported, not applied — but the tab is pinned and ready", () => {
+    const seen: boolean[] = [];
+    const onOpenChange = (o: boolean) => seen.push(o);
+    const { result } = renderSeamPanel({ open: false, onOpenChange });
+    act(() => result.current.openDiagnosis());
+    expect(seen).toEqual([true]);
+    expect(result.current.isOpen).toBe(false);
+    // Tab state stays SDK-owned: the diagnosis tab is pinned regardless, so
+    // the moment the host opens the panel the conversation greets the user.
+    expect(result.current.editorsStore.getSnapshot().editors).toEqual([
+      {
+        entryId: DIAGNOSIS_DOCUMENT_ENTRY_ID,
+        path: DIAGNOSIS_DOCUMENT_PATH,
+        preview: false,
+      },
+    ]);
+  });
+});

package/src/workflow/execution-comparison/ExecutionComparisonPicker.tsx

@@ -6,6 +6,7 @@ import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/workflowexecu
 import { useWorkflowExecutionList } from "../useWorkflowExecutionList.js";
 import { WorkflowExecutionPhaseBadge } from "../WorkflowExecutionPhaseBadge.js";
 import { formatDuration } from "../format-utils.js";
+import { formatRelativeTime } from "../../activity/format-relative-time.js";
 
 /** Props for {@link ExecutionComparisonPicker}. */
 export interface ExecutionComparisonPickerProps {
@@ -119,7 +120,7 @@ export const ExecutionComparisonPicker = memo(function ExecutionComparisonPicker
       ref={dialogRef}
       className={cn(
         "stgm stg:m-auto stg:max-h-[70vh] stg:w-full stg:max-w-md stg:rounded-lg stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-background,#fff)] stg:p-0 stg:shadow-xl",
-        "stg:backdrop:bg-black/40",
+        "stg:backdrop:bg-backdrop",
       )}
       onClick={handleBackdropClick}
       aria-label="Select execution to compare"
@@ -183,7 +184,7 @@ export const ExecutionComparisonPicker = memo(function ExecutionComparisonPicker
                     {name}
                   </span>
                   <span className="stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
-                    {startedAt ? formatRelative(startedAt) : "—"}
+                    {startedAt ? formatStartedAt(startedAt) : "—"}
                     {durationMs != null && ` · ${formatDuration(durationMs)}`}
                   </span>
                 </div>
@@ -228,13 +229,8 @@ function getDurationMs(startedAt: string | undefined, completedAt: string | unde
   return e - s;
 }
 
-function formatRelative(iso: string): string {
-  const d = new Date(iso);
-  if (Number.isNaN(d.getTime())) return iso;
-  const now = Date.now();
-  const diff = now - d.getTime();
-  if (diff < 60_000) return "just now";
-  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
-  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
-  return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+/** ISO wire value → the shared compact stamp; unparseable renders as absent. */
+function formatStartedAt(iso: string): string {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? "—" : formatRelativeTime(date);
 }

package/src/workflow/execution-history/ExecutionHistoryTable.tsx

@@ -12,6 +12,7 @@ import {
 } from "./derive-execution-row.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../internal/tooltip.js";
 import { TruncatedText } from "../../internal/truncated-text.js";
+import { formatRelativeTime } from "../../activity/format-relative-time.js";
 
 // ---------------------------------------------------------------------------
 // Column definitions
@@ -436,28 +437,3 @@ function LoadingSkeleton({
     </div>
   );
 }
-
-// ---------------------------------------------------------------------------
-// Relative time formatter
-// ---------------------------------------------------------------------------
-
-function formatRelativeTime(date: Date): string {
-  const now = Date.now();
-  const diff = now - date.getTime();
-
-  if (diff < 0) return date.toLocaleString();
-  if (diff < 60_000) return "just now";
-  if (diff < 3_600_000) {
-    const mins = Math.floor(diff / 60_000);
-    return `${mins}m ago`;
-  }
-  if (diff < 86_400_000) {
-    const hours = Math.floor(diff / 3_600_000);
-    return `${hours}h ago`;
-  }
-  if (diff < 604_800_000) {
-    const days = Math.floor(diff / 86_400_000);
-    return `${days}d ago`;
-  }
-  return date.toLocaleDateString();
-}

package/src/workflow/index.ts

@@ -177,6 +177,7 @@ export {
 export {
   WorkflowExecutionViewer,
   type WorkflowExecutionViewerProps,
+  type WorkflowExecutionPanelMode,
 } from "./WorkflowExecutionViewer.js";
 
 export {

package/src/workflow/instance/CreateWorkflowInstanceDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useId, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import type { WorkflowInstance } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/api_pb";
@@ -42,6 +42,15 @@ export function CreateWorkflowInstanceDialog({
   const dialogRef = useRef<HTMLDialogElement>(null);
   const { create, isCreating, error, clearError } = useCreateWorkflowInstance();
 
+  // Instance-scoped element ids (oss#571): a reusable component must not
+  // hardcode DOM ids — hosts legitimately mount this dialog more than once
+  // per page (e.g. zone-cached detail pages), and duplicate ids silently
+  // break the label→input association for every copy after the first.
+  const baseId = useId();
+  const titleId = `${baseId}-title`;
+  const nameId = `${baseId}-name`;
+  const descriptionId = `${baseId}-description`;
+
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [environmentRefs, setEnvironmentRefs] = useState<ResourceRef[]>([]);
@@ -106,14 +115,14 @@ export function CreateWorkflowInstanceDialog({
       onClose={handleClose}
       className={cn(
         "stg:fixed stg:inset-0 stg:m-auto stg:w-full stg:max-w-lg stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
-        "stg:backdrop:bg-black/50",
+        "stg:backdrop:bg-backdrop",
       )}
-      aria-labelledby="create-instance-title"
+      aria-labelledby={titleId}
     >
       <form onSubmit={handleSubmit} className="stg:flex stg:flex-col">
         {/* Header */}
         <div className="stg:flex stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-6 stg:py-4">
-          <h2 id="create-instance-title" className="stg:text-base stg:font-semibold stg:text-foreground">
+          <h2 id={titleId} className="stg:text-base stg:font-semibold stg:text-foreground">
             Create Workflow Instance
           </h2>
           <button
@@ -134,11 +143,11 @@ export function CreateWorkflowInstanceDialog({
         <div className="stg:space-y-5 stg:px-6 stg:py-5">
           {/* Name */}
           <div>
-            <label htmlFor="instance-name" className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
+            <label htmlFor={nameId} className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
               Name <span className="stg:text-destructive">*</span>
             </label>
             <input
-              id="instance-name"
+              id={nameId}
               type="text"
               required
               value={name}
@@ -160,11 +169,11 @@ export function CreateWorkflowInstanceDialog({
 
           {/* Description */}
           <div>
-            <label htmlFor="instance-description" className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
+            <label htmlFor={descriptionId} className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
               Description
             </label>
             <textarea
-              id="instance-description"
+              id={descriptionId}
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               placeholder="What is this instance used for?"

package/src/workflow/instance/WorkflowInstanceDetailPanel.tsx

@@ -296,7 +296,8 @@ export function WorkflowInstanceDetailPanel({
             ) : (
               <div className="stg:space-y-2 stg:rounded-md stg:border stg:border-destructive/30 stg:p-3 stg:bg-destructive/5">
                 <p className="stg:text-xs stg:text-destructive stg:font-medium">
-                  This will permanently delete this instance and all its execution history.
+                  This permanently removes the instance and its environment bindings. Executions
+                  already run against it are preserved in the workflow&apos;s execution history.
                   This action cannot be undone.
                 </p>
                 {deleteError && (

package/src/workflow/instance/useDeleteWorkflowInstance.ts

@@ -10,8 +10,11 @@ export interface UseDeleteWorkflowInstanceReturn {
   /**
    * Delete a workflow instance by ID. Returns the deleted resource.
    *
-   * WARNING: Deleting an instance cascades — all executions belonging
-   * to this instance are permanently removed.
+   * Deletion does NOT cascade to executions: runs already created
+   * against the instance are preserved and stay visible in the parent
+   * workflow's execution history (every execution carries a
+   * denormalized workflow reference). Only the instance itself — its
+   * environment bindings and configuration — is removed.
    */
   readonly deleteInstance: (id: string) => Promise<WorkflowInstance>;
   /** `true` while the delete request is in flight. */
@@ -29,8 +32,10 @@ export interface UseDeleteWorkflowInstanceReturn {
  * The caller is responsible for handling post-delete UI updates
  * (e.g., refreshing the instance list, closing a detail panel).
  *
- * Deletion cascades to all WorkflowExecution resources that belong
- * to the instance. The confirmation UI should warn the user about this.
+ * Deletion is instance-only on both editions — executions are NOT
+ * cascaded (deliberate platform posture: they keep a denormalized
+ * workflow reference and remain in the workflow's execution history).
+ * Confirmation UI must not claim execution history is deleted.
  *
  * @example
  * ```tsx

package/src/workflow/layout/registry-dimensions.ts

@@ -1,6 +1,5 @@
 import { getVisualSpec } from "../task-type-visual-registry.js";
-import { taskKindToString } from "../workflow-graph-conversions.js";
-import { START_NODE_ID, END_NODE_ID } from "../workflow-graph-model.js";
+import { graphNodeKindString } from "../workflow-graph-conversions.js";
 import type { WorkflowGraphNode } from "../workflow-graph-model.js";
 import type { NodeDimensions } from "./types.js";
 
@@ -23,8 +22,6 @@ import type { NodeDimensions } from "./types.js";
  * wrapping in `useCallback` (DD-010).
  */
 export function registryNodeDimensions(node: WorkflowGraphNode): NodeDimensions {
-  const isSentinel = node.id === START_NODE_ID || node.id === END_NODE_ID;
-  const kindKey = isSentinel ? node.id : taskKindToString(node.kind);
-  const spec = getVisualSpec(kindKey);
+  const spec = getVisualSpec(graphNodeKindString(node));
   return { width: spec.defaultWidth, height: spec.defaultHeight + spec.captionHeight };
 }

package/src/workflow/node-shell/NodeShell.tsx

@@ -185,6 +185,10 @@ function SvgShell({
           height={shapeHeight}
           viewBox={`0 0 ${width} ${shapeHeight}`}
           aria-hidden="true"
+          // The stable hook for "this node renders an SVG shape
+          // background" — kind icons are also <svg>s, so a bare svg
+          // selector cannot distinguish shaped shells from task cards.
+          data-cursor-target="node-shape"
         >
           <path
             d={pathD ?? ""}

package/src/workflow/picker/BranchAddPopover.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useState, useCallback, useRef, useEffect } from "react";
+import { memo, useState, useCallback, useId, useRef, useEffect } from "react";
 import { Popover } from "@base-ui/react/popover";
 import { cn } from "@stigmer/theme";
 import { useStigmerPortalContainer } from "../../portal-container.js";
@@ -76,6 +76,7 @@ export const BranchAddPopover = memo(function BranchAddPopover({
   side = "bottom",
   align = "start",
 }: BranchAddPopoverProps) {
+  const errorId = useId();
   const portalContainer = useStigmerPortalContainer();
   const config = MODE_CONFIG[mode];
   const nameRef = useRef<HTMLInputElement>(null);
@@ -175,11 +176,11 @@ export const BranchAddPopover = memo(function BranchAddPopover({
                       nameError ? "stg:border-[var(--stgm-destructive,#ef4444)]" : "stg:border-border",
                     )}
                     aria-invalid={!!nameError}
-                    aria-describedby={nameError ? "branch-name-error" : undefined}
+                    aria-describedby={nameError ? errorId : undefined}
                   />
                   {nameError && (
                     <p
-                      id="branch-name-error"
+                      id={errorId}
                       className="stg:mt-0.5 stg:text-[10px] stg:text-[var(--stgm-destructive,#ef4444)]"
                     >
                       {nameError}

package/src/workflow/task-type-visual-registry.ts

@@ -4,6 +4,7 @@ import {
   SENTINEL_NODE_WIDTH,
   SENTINEL_NODE_HEIGHT,
 } from "./canvas-constants.js";
+import { START_NODE_ID, END_NODE_ID } from "./workflow-graph-model.js";
 
 /**
  * Semantic shape identifier for workflow nodes.
@@ -203,9 +204,10 @@ export const VISUAL_REGISTRY: ReadonlyMap<string, TaskTypeVisualSpec> = Object.f
     ["notification", EVENT_CIRCLE],
     ["raise_error", EVENT_CIRCLE],
 
-    // sentinels
-    ["__start__", TERMINAL_PILL],
-    ["__end__", TERMINAL_PILL_END],
+    // Sentinel pseudo-kinds: keyed by the sentinel node ids, which double
+    // as the sentinels' kindString (see graphNodeKindString).
+    [START_NODE_ID, TERMINAL_PILL],
+    [END_NODE_ID, TERMINAL_PILL_END],
   ]),
 );
 

package/src/workflow/templates/WorkflowTemplatePreview.tsx

@@ -83,7 +83,7 @@ export function WorkflowTemplatePreview({
       ref={dialogRef}
       className={cn(
         "stgm stg:m-auto stg:max-h-[85vh] stg:w-full stg:max-w-3xl stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-0 stg:shadow-lg",
-        "stg:backdrop:bg-black/50",
+        "stg:backdrop:bg-backdrop",
       )}
     >
       <div className="stg:flex stg:flex-col">

package/src/workflow/useApprovalBoundary.ts

@@ -29,7 +29,7 @@ export interface ApprovalBoundaryCrossing {
  * the decision surface (the panel's Inspect Approval tab) is never hidden
  * while the run is blocked.
  *
- * Same diffing shape as {@link useExecutionAnnouncements} (prev-map ref,
+ * Same diffing shape as `useExecutionAnnouncements` (prev-map ref,
  * diff on each map commit). A task first observed already in
  * `waiting_approval` counts as entered — with rAF-coalesced commits the
  * running→waiting transition can collapse into the task's first appearance.

package/src/workflow/useCanvasKeyboardShortcuts.ts

@@ -19,6 +19,14 @@ export interface UseCanvasKeyboardShortcutsOptions {
   readonly copySelection?: () => void;
   readonly pasteAtCenter?: () => void;
   readonly cutSelection?: () => void;
+  /**
+   * Undo/redo MUST be the orchestrator's canvas-syncing wrappers
+   * (`useWorkflowCanvas.undo`/`redo`), never `useGraphHistory`'s raw
+   * mutations — a model mutation that skips the React Flow sync leaves
+   * the inspector editing a node the canvas doesn't show (oss#588).
+   */
+  readonly undo?: () => void;
+  readonly redo?: () => void;
 }
 
 function isTextInput(target: EventTarget | null): boolean {
@@ -39,12 +47,15 @@ function isFocusInsideContainer(container: HTMLElement): boolean {
  * Canvas-scoped keyboard shortcuts for the workflow editor.
  *
  * Binds shortcuts that are only active when focus is inside the canvas
- * container, using the same capture-phase listener pattern as
- * {@link useGraphHistory} (undo/redo). Bare-key shortcuts (N, Escape)
- * are suppressed when a text input has focus.
+ * container, using a capture-phase document listener. Shortcuts that
+ * collide with native text-editing (undo/redo, copy/paste/cut, bare
+ * keys) are suppressed when a text input has focus, so inspector
+ * fields keep their native behavior.
  *
  * | Shortcut          | Action                                |
  * |-------------------|---------------------------------------|
+ * | `Ctrl/Cmd+Z`      | Undo (canvas-synced, see oss#588)     |
+ * | `Ctrl/Cmd+Shift+Z`| Redo                                  |
  * | `Ctrl/Cmd+D`      | Duplicate selected node               |
  * | `Ctrl/Cmd+A`      | Select all non-sentinel nodes         |
  * | `Ctrl/Cmd+C`      | Copy selected node(s) to clipboard    |
@@ -66,6 +77,8 @@ export function useCanvasKeyboardShortcuts({
   copySelection,
   pasteAtCenter,
   cutSelection,
+  undo,
+  redo,
 }: UseCanvasKeyboardShortcutsOptions): void {
   useEffect(() => {
     const container = containerRef.current;
@@ -76,6 +89,21 @@ export function useCanvasKeyboardShortcuts({
 
       const isMod = e.metaKey || e.ctrlKey;
 
+      // Ctrl/Cmd+Z / Ctrl/Cmd+Shift+Z — undo/redo. Text inputs keep
+      // their native text undo (deliberate change with oss#588: the old
+      // binding hijacked Cmd+Z while typing in inspector fields).
+      if (isMod && !e.altKey && e.key.toLowerCase() === "z") {
+        if (isTextInput(e.target)) return;
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.shiftKey) {
+          redo?.();
+        } else {
+          undo?.();
+        }
+        return;
+      }
+
       // Ctrl/Cmd+D — duplicate selected node
       if (isMod && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "d") {
         e.preventDefault();
@@ -169,5 +197,7 @@ export function useCanvasKeyboardShortcuts({
     copySelection,
     pasteAtCenter,
     cutSelection,
+    undo,
+    redo,
   ]);
 }

package/src/workflow/useGraphHistory.ts

@@ -1,7 +1,6 @@
 "use client";
 
-import { useState, useCallback, useRef, useEffect } from "react";
-import type { RefObject } from "react";
+import { useState, useCallback, useRef } from "react";
 import type { WorkflowGraphModel } from "./workflow-graph-model.js";
 import type { GraphCommand } from "./graph-commands.js";
 import { GraphHistory } from "./graph-commands.js";
@@ -12,27 +11,34 @@ export interface UseGraphHistoryReturn {
   readonly canUndo: boolean;
   readonly canRedo: boolean;
   readonly dispatch: (command: GraphCommand) => WorkflowGraphModel;
-  readonly undo: () => void;
-  readonly redo: () => void;
+  readonly undo: () => WorkflowGraphModel | null;
+  readonly redo: () => WorkflowGraphModel | null;
   readonly reset: (model: WorkflowGraphModel) => void;
 }
 
 /**
  * React wrapper around {@link GraphHistory} providing undo/redo state
- * management and keyboard shortcut binding.
+ * management.
  *
- * Keyboard shortcuts (Ctrl/Cmd+Z, Ctrl/Cmd+Shift+Z) are only active
- * when the referenced container element contains the active focus target,
- * preventing conflicts with other editors on the page.
+ * Every mutation (`dispatch`, `undo`, `redo`) returns the resulting model
+ * SYNCHRONOUSLY so callers can derive dependent state (React Flow
+ * elements) in the same event handler. `currentModel` is a render-time
+ * snapshot — inside a callback it may be stale, so consumers reacting to
+ * a mutation must use the returned model, never `currentModel`
+ * (oss#588 was exactly that stale read).
+ *
+ * This hook deliberately owns NO DOM listeners: it cannot sync the canvas,
+ * so letting it mutate the model from a keyboard shortcut would desync
+ * model and canvas. Keyboard undo/redo binding lives with the other
+ * canvas shortcuts in `useCanvasKeyboardShortcuts`, wired to the
+ * orchestrator's syncing wrappers (`useWorkflowCanvas.undo`/`redo`).
  *
  * @param initialModel - The starting graph model (from YAML parse).
- * @param containerRef - Ref to the DOM element that scopes keyboard shortcuts.
  *
  * @since T15 Batch 2 (Node Authoring)
  */
 export function useGraphHistory(
   initialModel: WorkflowGraphModel | null,
-  containerRef: RefObject<HTMLDivElement | null>,
 ): UseGraphHistoryReturn {
   const historyRef = useRef<GraphHistory | null>(null);
   const [model, setModel] = useState<WorkflowGraphModel | null>(null);
@@ -61,20 +67,22 @@ export function useGraphHistory(
     [forceUpdate],
   );
 
-  const undo = useCallback(() => {
+  const undo = useCallback((): WorkflowGraphModel | null => {
     const history = historyRef.current;
-    if (!history?.canUndo) return;
+    if (!history?.canUndo) return null;
     const next = history.undo();
     setModel(next);
     forceUpdate();
+    return next;
   }, [forceUpdate]);
 
-  const redo = useCallback(() => {
+  const redo = useCallback((): WorkflowGraphModel | null => {
     const history = historyRef.current;
-    if (!history?.canRedo) return;
+    if (!history?.canRedo) return null;
     const next = history.redo();
     setModel(next);
     forceUpdate();
+    return next;
   }, [forceUpdate]);
 
   const reset = useCallback(
@@ -90,33 +98,6 @@ export function useGraphHistory(
     [forceUpdate],
   );
 
-  // Keyboard shortcuts: Ctrl/Cmd+Z (undo), Ctrl/Cmd+Shift+Z (redo)
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    function handleKeyDown(e: KeyboardEvent) {
-      if (!container?.contains(document.activeElement) && document.activeElement !== container) {
-        return;
-      }
-
-      const isMod = e.metaKey || e.ctrlKey;
-      if (!isMod || e.key.toLowerCase() !== "z") return;
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (e.shiftKey) {
-        redo();
-      } else {
-        undo();
-      }
-    }
-
-    document.addEventListener("keydown", handleKeyDown, true);
-    return () => document.removeEventListener("keydown", handleKeyDown, true);
-  }, [containerRef, undo, redo]);
-
   const canUndo = historyRef.current?.canUndo ?? false;
   const canRedo = historyRef.current?.canRedo ?? false;