@saltcorn/workflow-editor 1.6.0-alpha.9 → 1.6.0-beta.10

package/src/WorkflowEditor.jsx

@@ -6,6 +6,7 @@ import React, {
   useLayoutEffect,
   useMemo,
 } from "react";
+import { createPortal } from "react-dom";
 import {
   Background,
   Controls,
@@ -302,6 +303,11 @@ const buildGraph = (
   const allStepNames = steps.map((s) => s.name).filter(Boolean);
   const orderIndex = new Map(steps.map((s, idx) => [String(s.id), idx]));
 
+  const hasAnyWorkflowPosition = steps.some(
+    (s) => s?.configuration?.workflow_position
+  );
+  const shouldIndentLoopBodies = steps.length > 0 && !hasAnyWorkflowPosition;
+
   const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 
   const extractNextStepNames = (rawNextStep) => {
@@ -415,6 +421,9 @@ const buildGraph = (
         width: DEFAULT_NODE_WIDTH,
         height: DEFAULT_NODE_HEIGHT,
       };
+      const bodyX = shouldIndentLoopBodies
+        ? (loopPos.x || 0) + (loopSize.width || DEFAULT_NODE_WIDTH) + H_GAP
+        : loopPos.x;
       let yCursor = loopPos.y + loopSize.height + V_GAP;
 
       body.forEach((s) => {
@@ -424,7 +433,7 @@ const buildGraph = (
           height: DEFAULT_NODE_HEIGHT,
         };
         positionOverrides[String(s.id)] = {
-          x: loopPos.x,
+          x: bodyX,
           y: yCursor,
         };
         yCursor += bodySize.height + V_GAP;
@@ -487,9 +496,16 @@ const buildGraph = (
       id: `e-start-${initial.id}`,
       source: "start",
       target: String(initial.id),
-      type: "smoothstep",
+      type: "workflow-main",
       animated: true,
       markerEnd: makeMarker(),
+      data: {
+        startLabel: strings.start,
+        sourceStepName: "start",
+        sourceId: "start",
+        targetId: String(initial.id),
+        canInsertBetween: true,
+      },
     });
   else {
     const addId = "add-start";
@@ -620,7 +636,7 @@ const buildGraph = (
   });
 
   const addNodes = [];
-  if (!steps.length) {
+  if (!initial) {
     const addId = "add-start";
     addNodes.push({
       id: addId,
@@ -706,10 +722,25 @@ const StepDrawer = ({
   error,
   data,
   onDelete,
+  onCopy,
   drawerWidth,
   onResizeStart,
 }) => {
   const isOpen = !!modal;
+  const stopDrawerKeyPropagation = useCallback((e) => {
+    e.stopPropagation();
+    if (e?.nativeEvent?.stopImmediatePropagation)
+      e.nativeEvent.stopImmediatePropagation();
+  }, []);
+  const handleSaveClick = useCallback(() => {
+    const form = innerRef?.current?.querySelector("form");
+    if (!form) return;
+    if (typeof form.requestSubmit === "function") form.requestSubmit();
+    else
+      form.dispatchEvent(
+        new Event("submit", { cancelable: true, bubbles: true })
+      );
+  }, [innerRef]);
   return (
     <div
       ref={outerRef}
@@ -719,6 +750,8 @@ const StepDrawer = ({
       aria-hidden={!isOpen}
       aria-label={modal?.title || data?.strings?.configure}
       style={{ "--wf-drawer-width": `${drawerWidth}px` }}
+      onKeyDown={stopDrawerKeyPropagation}
+      onKeyUp={stopDrawerKeyPropagation}
     >
       {modal ? (
         <>
@@ -743,27 +776,34 @@ const StepDrawer = ({
             ) : null}
           </div>
           <div className="wf-drawer__footer d-flex justify-content-end gap-2">
-            <button
-              className="btn btn-sm btn-outline-danger"
-              onClick={(e) => {
-                e.stopPropagation();
-                onDelete(modal.stepId);
-              }}
-            >
-              {data.strings.deleteStep}
-            </button>
+            {modal.stepId && (
+              <button
+                className="btn btn-sm btn-outline-danger"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete(modal.stepId);
+                }}
+              >
+                {data.strings.deleteStep}
+              </button>
+            )}
+            {modal.stepId ? (
+              <button
+                className="btn btn-sm btn-outline-secondary"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onCopy(modal.stepId);
+                }}
+              >
+                {data.strings.copyStep || "Copy"}
+              </button>
+            ) : null}
             <button className="btn btn-secondary" onClick={onClose}>
               Close
             </button>
             <button
               className="btn btn-primary"
-              onClick={() =>
-                innerRef.current
-                  ?.querySelector("form")
-                  ?.dispatchEvent(
-                    new Event("submit", { cancelable: true, bubbles: true })
-                  )
-              }
+              onClick={handleSaveClick}
               disabled={submitting}
             >
               {submitting ? "Saving..." : "Save"}
@@ -807,6 +847,15 @@ const WorkflowEditor = ({ data }) => {
   const resizingRef = useRef(false);
   const connectSourceRef = useRef(null);
   const [selectedEdgeId, setSelectedEdgeId] = useState(null);
+  const autoSaveTimerRef = useRef(null);
+  const autoSavingRef = useRef(false);
+  const lastAutosaveSnapshotRef = useRef("");
+  const pendingAutosaveSnapshotRef = useRef("");
+  const nodesRef = useRef([]);
+  const [headerHost, setHeaderHost] = useState(null);
+  const [shellHeight, setShellHeight] = useState(null);
+  const lastHeightRef = useRef(null);
+  const heightDebounceRef = useRef(null);
 
   const drawerStorageKey = useMemo(
     () => `wf-drawer:${data?.trigger?.id || "default"}`,
@@ -819,6 +868,57 @@ const WorkflowEditor = ({ data }) => {
   );
 
   const rfInstanceRef = useRef(null);
+  const headerHtmlRef = useRef("");
+
+  const recomputeShellHeight = useCallback(() => {
+    if (typeof window === "undefined") return;
+    const shellEl = shellRef.current;
+    if (!shellEl) return;
+
+    const wrapperEl = shellEl.closest(".workflow-editor-wrapper");
+    if (!wrapperEl) return;
+
+    const afterEl = wrapperEl.nextElementSibling;
+    const cardBodyEl = shellEl.closest(".card-body");
+    if (!cardBodyEl) return;
+
+    const minHeight = 400;
+    const bottomMargin = 28;
+
+    const cardBodyRect = cardBodyEl.getBoundingClientRect();
+    const styles = window.getComputedStyle(cardBodyEl);
+    const cardBodyPaddingTop = parseFloat(styles.paddingTop) || 0;
+    const cardBodyPaddingBottom = parseFloat(styles.paddingBottom) || 0;
+
+    const effectiveTop = Math.max(0, cardBodyRect.top);
+
+    let footerHeight = 0;
+    if (afterEl && typeof afterEl.getBoundingClientRect === "function") {
+      const afterRect = afterEl.getBoundingClientRect();
+      const afterStyles = window.getComputedStyle(afterEl);
+      const mt = parseFloat(afterStyles.marginTop) || 0;
+      const mb = parseFloat(afterStyles.marginBottom) || 0;
+      footerHeight = afterRect.height + mt + mb;
+    }
+
+    const availableHeight =
+      window.innerHeight -
+      effectiveTop -
+      bottomMargin -
+      cardBodyPaddingTop -
+      cardBodyPaddingBottom -
+      footerHeight;
+
+    const wrapperHeight = Math.max(minHeight, availableHeight);
+
+    if (lastHeightRef.current !== wrapperHeight) {
+      lastHeightRef.current = wrapperHeight;
+      if (wrapperEl) {
+        wrapperEl.style.height = `${wrapperHeight}px`;
+      }
+      if (Number.isFinite(wrapperHeight)) setShellHeight(wrapperHeight);
+    }
+  }, []);
 
   const persistDrawerState = useCallback(
     (payload) => {
@@ -888,6 +988,24 @@ const WorkflowEditor = ({ data }) => {
     [viewportStorageKey]
   );
 
+  const serializeForm = useCallback((formEl) => {
+    if (!formEl) return "";
+    const fd = new FormData(formEl);
+    const entries = [];
+    for (const [key, value] of fd.entries()) {
+      if (value instanceof File) {
+        entries.push([key, `file:${value.name}:${value.size}`]);
+      } else {
+        entries.push([key, `${value}`]);
+      }
+    }
+    entries.sort((a, b) => {
+      if (a[0] === b[0]) return a[1].localeCompare(b[1]);
+      return a[0].localeCompare(b[0]);
+    });
+    return JSON.stringify(entries);
+  }, []);
+
   const onInit = useCallback((instance) => {
     rfInstanceRef.current = instance;
   }, []);
@@ -914,10 +1032,12 @@ const WorkflowEditor = ({ data }) => {
       )
         return;
       if (e.key !== "Delete" && e.key !== "Backspace") return;
-      const stepNode = selectedNodes.find((n) => n.type === "step");
-      if (!stepNode) return;
+      const stepIds = selectedNodes
+        .filter((n) => n.type === "step")
+        .map((n) => n.id);
+      if (!stepIds.length) return;
       e.preventDefault();
-      onDelete(stepNode.id);
+      onDelete(stepIds);
     },
     [modal, onDelete, selectedNodes]
   );
@@ -953,6 +1073,10 @@ const WorkflowEditor = ({ data }) => {
     refreshGraph(steps);
   }, [steps, refreshGraph]);
 
+  useEffect(() => {
+    nodesRef.current = nodes;
+  }, [nodes]);
+
   useEffect(() => {
     if (!rfInstanceRef.current) return;
     if (!pendingViewportRef.current) return;
@@ -1070,25 +1194,33 @@ const WorkflowEditor = ({ data }) => {
     setError("");
     try {
       let fresh = await fetchJson(data.urls.data);
+      let updatedSteps = null;
 
       // If a step was just added via an adder node, wire up next_step
       if (pendingAddRef.current) {
-        const { afterStepId, prevIds, insertBetween } = pendingAddRef.current;
+        const { afterStepId, prevIds, insertBetween, fromStart } =
+          pendingAddRef.current;
         const newSteps = (fresh.steps || []).filter(
           (s) => !prevIds.has(String(s.id))
         );
         if (newSteps.length === 1) {
           const newStep = newSteps[0];
           if (insertBetween && insertBetween.originalTargetName) {
-            // Insert new step between source and its former target
-            await updateConnection({
-              step_id: newStep.id,
-              next_step: insertBetween.originalTargetName,
-            });
-            await updateConnection({
-              step_id: afterStepId,
-              next_step: newStep.name,
-            });
+            if (fromStart) {
+              await updateConnection({
+                step_id: newStep.id,
+                initial_step: true,
+              });
+            } else {
+              await updateConnection({
+                step_id: newStep.id,
+                next_step: insertBetween.originalTargetName,
+              });
+              await updateConnection({
+                step_id: afterStepId,
+                next_step: newStep.name,
+              });
+            }
           } else {
             await updateConnection({
               step_id: afterStepId,
@@ -1098,20 +1230,38 @@ const WorkflowEditor = ({ data }) => {
 
           // Re-fetch so we get the updated connections reflected in steps
           fresh = await fetchJson(data.urls.data);
+
+          if (insertBetween && insertBetween.originalTargetName) {
+            updatedSteps = await applyInsertBetweenLayout(fresh.steps || [], {
+              newStep,
+              afterStepId,
+              targetName: insertBetween.originalTargetName,
+              targetId: insertBetween.targetId,
+              snapshot: insertBetween.positionsSnapshot,
+            });
+          }
         }
         pendingAddRef.current = null;
       }
 
-      setSteps(fresh.steps || []);
+      const nextSteps = updatedSteps || fresh.steps || [];
+      setSteps(nextSteps);
 
       setMessage(strings.refresh);
       setTimeout(() => setMessage(""), 1200);
+      return nextSteps;
     } catch (e) {
       setError(e.message);
     } finally {
       setLoading(false);
     }
-  }, [data.urls.data, fetchJson, strings.refresh, updateConnection]);
+  }, [
+    applyInsertBetweenLayout,
+    data.urls.data,
+    fetchJson,
+    strings.refresh,
+    updateConnection,
+  ]);
 
   const persistPositions = useCallback(
     async (positions = []) => {
@@ -1165,6 +1315,104 @@ const WorkflowEditor = ({ data }) => {
     [persistPositions]
   );
 
+  const applyLocalPositionUpdates = useCallback(
+    (updates = []) => {
+      if (!updates.length) return;
+      setNodes((nds) =>
+        nds.map((n) => {
+          const hit = updates.find((u) => String(u.id) === String(n.id));
+          return hit
+            ? { ...n, position: { ...(n.position || {}), x: hit.x, y: hit.y } }
+            : n;
+        })
+      );
+    },
+    [setNodes]
+  );
+
+  const applyInsertBetweenLayout = useCallback(
+    async (
+      freshSteps,
+      { newStep, afterStepId, targetName, targetId, snapshot }
+    ) => {
+      if (!newStep || !snapshot) return null;
+      const snap = snapshot || {};
+      const newStepSize = getWorkflowSize(newStep) || {
+        width: DEFAULT_NODE_WIDTH,
+        height: DEFAULT_NODE_HEIGHT,
+      };
+      const sourceSnap = snap[String(afterStepId)];
+      const resolvedTargetId =
+        targetId || freshSteps.find((s) => s.name === targetName)?.id;
+      const targetSnap = resolvedTargetId
+        ? snap[String(resolvedTargetId)]
+        : null;
+      const shiftAmount = newStepSize.height + V_GAP;
+      const fallbackY = sourceSnap?.y ?? 0;
+      const fallbackX = sourceSnap?.x ?? targetSnap?.x ?? 0;
+      const newY = targetSnap?.y ?? fallbackY;
+      const newX =
+        sourceSnap && targetSnap
+          ? (sourceSnap.x + targetSnap.x) / 2
+          : (targetSnap?.x ?? sourceSnap?.x ?? fallbackX);
+
+      const newHalfWidth = (newStepSize.width || DEFAULT_NODE_WIDTH) / 2;
+      const bandPadding = H_GAP / 2;
+      const bandMinX = newX - newHalfWidth - bandPadding;
+      const bandMaxX = newX + newHalfWidth + bandPadding;
+
+      const updates = [];
+      freshSteps.forEach((step) => {
+        const idStr = String(step.id);
+        const nodeSnap = snap[idStr];
+
+        if (idStr === String(newStep.id)) {
+          updates.push({ id: idStr, x: newX, y: newY });
+          return;
+        }
+
+        if (!nodeSnap) return;
+
+        const nodeWidth = nodeSnap.width || DEFAULT_NODE_WIDTH;
+        const nodeHalfWidth = nodeWidth / 2;
+        const nodeMinX = nodeSnap.x - nodeHalfWidth;
+        const nodeMaxX = nodeSnap.x + nodeHalfWidth;
+        const overlapsBand = !(nodeMaxX < bandMinX || nodeMinX > bandMaxX);
+        const shouldShift =
+          nodeSnap.y >= newY && idStr !== String(afterStepId) && overlapsBand;
+
+        if (shouldShift) {
+          updates.push({
+            id: idStr,
+            x: nodeSnap.x,
+            y: nodeSnap.y + shiftAmount,
+          });
+        } else {
+          updates.push({ id: idStr, x: nodeSnap.x, y: nodeSnap.y });
+        }
+      });
+      if (!updates.length) return freshSteps;
+
+      applyLocalPositionUpdates(updates);
+
+      const stepsWithPositions = freshSteps.map((s) => {
+        const hit = updates.find((u) => String(u.id) === String(s.id));
+        if (!hit) return s;
+        return {
+          ...s,
+          configuration: {
+            ...(s.configuration || {}),
+            workflow_position: { x: hit.x, y: hit.y },
+          },
+        };
+      });
+
+      await persistPositions(updates);
+      return stepsWithPositions;
+    },
+    [applyLocalPositionUpdates, persistPositions]
+  );
+
   useEffect(() => {
     return () => {
       if (positionDebounceRef.current)
@@ -1220,6 +1468,7 @@ const WorkflowEditor = ({ data }) => {
         const base = `${data.urls.stepForm}${stepId ? `/${stepId}` : ""}`;
         const url = new URL(base, window.location.origin);
         url.searchParams.set("render", "dialog");
+        url.searchParams.set("vw", window.innerWidth);
         if (initial_step) url.searchParams.set("initial_step", "true");
         if (after_step) url.searchParams.set("after_step", after_step);
         const res = await fetchJson(url.toString());
@@ -1232,8 +1481,8 @@ const WorkflowEditor = ({ data }) => {
     [clearDrawerState, data.urls.stepForm, fetchJson, persistDrawerState]
   );
 
-  const handleModalSubmit = useCallback(
-    async (formEl) => {
+  const submitStepForm = useCallback(
+    async (formEl, { closeOnSuccess = true } = {}) => {
       if (!formEl) return;
       setSavingModal(true);
       setError("");
@@ -1249,9 +1498,12 @@ const WorkflowEditor = ({ data }) => {
       });
       const json = await res.json();
       if (json.error) throw new Error(json.error);
-      setModal(null);
-      clearDrawerState();
+      if (closeOnSuccess) {
+        setModal(null);
+        clearDrawerState();
+      }
       await reload();
+      setSavingModal(false);
     },
     [clearDrawerState, data.csrfToken, data.urls.stepForm, reload]
   );
@@ -1260,6 +1512,8 @@ const WorkflowEditor = ({ data }) => {
     if (!modal) return undefined;
     const formEl = modalRef.current?.querySelector("form");
     if (!formEl) return undefined;
+    lastAutosaveSnapshotRef.current = serializeForm(formEl);
+    pendingAutosaveSnapshotRef.current = "";
     // Re-run show-if logic so action-specific fields render correctly
     setTimeout(() => {
       if (typeof window !== "undefined") {
@@ -1270,17 +1524,74 @@ const WorkflowEditor = ({ data }) => {
     }, 0);
 
     const actionSelect = formEl.querySelector('[name="wf_action_name"]');
+    const allowAutoSave = !!modal?.stepId; // avoid auto-save for brand new steps to prevent insert errors
+
+    const shouldAutoSaveForAction = () => !!allowAutoSave;
+
+    const cancelPendingAutoSave = () => {
+      if (autoSaveTimerRef.current) {
+        clearTimeout(autoSaveTimerRef.current);
+        autoSaveTimerRef.current = null;
+      }
+      pendingAutosaveSnapshotRef.current = "";
+    };
+
     const handleActionChange = () => {
       if (typeof window !== "undefined" && window.apply_showif)
         window.apply_showif();
+      if (!shouldAutoSaveForAction()) cancelPendingAutoSave();
     };
     if (actionSelect)
       actionSelect.addEventListener("change", handleActionChange);
 
+    const scheduleAutoSave = allowAutoSave
+      ? () => {
+          if (!shouldAutoSaveForAction()) return;
+          if (autoSavingRef.current) return;
+          const snapshot = serializeForm(formEl);
+          if (!snapshot) return;
+          if (snapshot === lastAutosaveSnapshotRef.current) return;
+          if (snapshot === pendingAutosaveSnapshotRef.current) return;
+          if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
+          pendingAutosaveSnapshotRef.current = snapshot;
+          autoSaveTimerRef.current = setTimeout(async () => {
+            pendingAutosaveSnapshotRef.current = "";
+            const currentSnapshot = serializeForm(formEl);
+            if (!currentSnapshot) return;
+            if (currentSnapshot === lastAutosaveSnapshotRef.current) return;
+            autoSavingRef.current = true;
+            try {
+              await submitStepForm(formEl, { closeOnSuccess: false });
+              lastAutosaveSnapshotRef.current = currentSnapshot;
+            } catch (err) {
+              setError(err.message);
+            } finally {
+              autoSavingRef.current = false;
+              setSavingModal(false);
+            }
+          }, 800);
+        }
+      : null;
+
     const submitHandler = async (e) => {
       e.preventDefault();
+      const currentSnapshot = serializeForm(formEl);
+      const alreadySaved =
+        shouldAutoSaveForAction() &&
+        !!lastAutosaveSnapshotRef.current &&
+        currentSnapshot === lastAutosaveSnapshotRef.current;
+
+      if (alreadySaved) {
+        setModal(null);
+        clearDrawerState();
+        setSavingModal(false);
+        return;
+      }
+
       try {
-        await handleModalSubmit(formEl);
+        cancelPendingAutoSave();
+        await submitStepForm(formEl);
+        lastAutosaveSnapshotRef.current = currentSnapshot;
       } catch (err) {
         setError(err.message);
       } finally {
@@ -1288,12 +1599,22 @@ const WorkflowEditor = ({ data }) => {
       }
     };
     formEl.addEventListener("submit", submitHandler);
+    if (scheduleAutoSave) {
+      formEl.addEventListener("input", scheduleAutoSave);
+      formEl.addEventListener("change", scheduleAutoSave);
+    }
     return () => {
+      cancelPendingAutoSave();
       formEl.removeEventListener("submit", submitHandler);
+      if (scheduleAutoSave) {
+        formEl.removeEventListener("input", scheduleAutoSave);
+        formEl.removeEventListener("change", scheduleAutoSave);
+      }
       if (actionSelect)
         actionSelect.removeEventListener("change", handleActionChange);
+      lastAutosaveSnapshotRef.current = "";
     };
-  }, [handleModalSubmit, modal]);
+  }, [modal, serializeForm, submitStepForm, clearDrawerState, setModal]);
 
   useEffect(() => {
     if (typeof window === "undefined") return undefined;
@@ -1400,16 +1721,32 @@ const WorkflowEditor = ({ data }) => {
       if (targetEl?.classList?.contains("react-flow__pane")) {
         // Dropped on empty space: clear next_step mark as final/unconnected
         if (pending.nodeId && pending.handleId !== "loop-out") {
-          onClearNext(pending.nodeId);
+          if (pending.nodeId === "start") {
+            const currentInitial = steps.find((s) => s.initial_step);
+            if (currentInitial) {
+              updateConnection({
+                step_id: currentInitial.id,
+                initial_step: false,
+              })
+                .then(() => reload())
+                .catch((e) => setError(e.message));
+            }
+          } else {
+            onClearNext(pending.nodeId);
+          }
         }
       }
     },
-    [onClearNext]
+    [onClearNext, reload, steps, updateConnection]
   );
 
   const onEdgesChange = useCallback(
     (changes) => {
-      const removed = changes.filter((c) => c.type === "remove");
+      // Block edge deletions while a modal is open so ReactFlow cannot remove links under dialogs
+      const safeChanges = modal
+        ? changes.filter((c) => c.type !== "remove")
+        : changes;
+      const removed = safeChanges.filter((c) => c.type === "remove");
       if (removed.length) {
         const updates = [];
         removed.forEach((chg) => {
@@ -1438,13 +1775,18 @@ const WorkflowEditor = ({ data }) => {
           .then(() => reload())
           .catch((e) => setError(e.message));
       }
-      rfOnEdgesChange(changes);
+      rfOnEdgesChange(safeChanges);
     },
-    [edges, reload, rfOnEdgesChange, updateConnection]
+    [edges, modal, reload, rfOnEdgesChange, updateConnection]
   );
 
   const onNodesChangeWrapped = useCallback(
     (changes) => {
+      // Prevent node deletion by reactflow while drawer is open
+      const safeChanges = modal
+        ? changes.filter((c) => c.type !== "remove")
+        : changes;
+
       const finishedPositions = changes
         .filter((c) => c.type === "position" && c.position && c.dragging)
         .map((c) => ({ id: c.id, x: c.position.x, y: c.position.y }));
@@ -1472,9 +1814,15 @@ const WorkflowEditor = ({ data }) => {
         );
         if (stepPositions.length) schedulePersistPositions(stepPositions);
       }
-      onNodesChange(changes);
+      onNodesChange(safeChanges);
     },
-    [onNodesChange, schedulePersistPositions, setAddPositions, setStartPosition]
+    [
+      modal,
+      onNodesChange,
+      schedulePersistPositions,
+      setAddPositions,
+      setStartPosition,
+    ]
   );
 
   const onAddAfter = useCallback(
@@ -1494,15 +1842,45 @@ const WorkflowEditor = ({ data }) => {
 
   const onInsertBetween = useCallback(
     ({ source, target }) => {
-      if (!source || !target || source === "start") return;
+      if (!source || !target) return;
       const originalTargetName = nameById[target];
       if (!originalTargetName) return;
+      const fromStart = source === "start";
+      const sizeById = new Map(
+        steps.map((s) => [
+          String(s.id),
+          getWorkflowSize(s) || {
+            width: DEFAULT_NODE_WIDTH,
+            height: DEFAULT_NODE_HEIGHT,
+          },
+        ])
+      );
+      const positionsSnapshot = {};
+      nodesRef.current
+        .filter((n) => n.type === "step")
+        .forEach((n) => {
+          const size = sizeById.get(String(n.id)) || {
+            width: DEFAULT_NODE_WIDTH,
+            height: DEFAULT_NODE_HEIGHT,
+          };
+          positionsSnapshot[String(n.id)] = {
+            x: n.position?.x ?? 0,
+            y: n.position?.y ?? 0,
+            width: size.width || DEFAULT_NODE_WIDTH,
+            height: size.height || DEFAULT_NODE_HEIGHT,
+          };
+        });
       pendingAddRef.current = {
-        afterStepId: source,
+        afterStepId: fromStart ? "start" : source,
         prevIds: new Set(steps.map((s) => String(s.id))),
-        insertBetween: { originalTargetName },
+        fromStart,
+        insertBetween: {
+          originalTargetName,
+          targetId: target,
+          positionsSnapshot,
+        },
       };
-      openStepForm({ after_step: source });
+      openStepForm(fromStart ? { initial_step: true } : { after_step: source });
     },
     [nameById, openStepForm, steps]
   );
@@ -1515,6 +1893,127 @@ const WorkflowEditor = ({ data }) => {
     [reload, updateConnection]
   );
 
+  const onCopy = useCallback(
+    async (id) => {
+      try {
+        setError("");
+        const res = await fetchJson(data.urls.copy, {
+          method: "POST",
+          body: JSON.stringify({ step_id: id }),
+          headers: {
+            "X-CSRF-Token": data.csrfToken || "",
+          },
+        });
+
+        if (!res || res.success !== "ok" || !res.step) {
+          await reload();
+          return;
+        }
+
+        const copiedStep = res.step;
+        const copiedName = copiedStep.name;
+
+        // Reload full workflow data so the new step has
+        // the same serialized shape as all other steps
+        const freshSteps = (await reload()) || [];
+        if (!freshSteps.length) return;
+
+        const sourceStep = freshSteps.find((s) => String(s.id) === String(id));
+        const newStep = freshSteps.find((s) => s.name === copiedName);
+
+        if (!sourceStep || !newStep || !newStep.id) return;
+
+        const sourceSize = getWorkflowSize(sourceStep) || {
+          width: DEFAULT_NODE_WIDTH,
+          height: DEFAULT_NODE_HEIGHT,
+        };
+        const newSize = getWorkflowSize(newStep) || {
+          width: DEFAULT_NODE_WIDTH,
+          height: DEFAULT_NODE_HEIGHT,
+        };
+
+        const sourcePos = sourceStep.configuration?.workflow_position || {
+          x: 0,
+          y: 0,
+        };
+
+        // Desired location: directly to the right of the source step
+        const targetX = sourcePos.x + sourceSize.width + ADD_GAP;
+        const targetY = sourcePos.y;
+
+        const updates = [];
+
+        // Push steps that are to the right of the insertion band
+        const bandMinX = targetX - newSize.width * 0.25;
+        const shiftX = newSize.width + ADD_GAP;
+        const newHalfHeight = (newSize.height || DEFAULT_NODE_HEIGHT) / 2;
+        const bandPaddingY = V_GAP / 2;
+        const bandMinY = targetY - newHalfHeight - bandPaddingY;
+        const bandMaxY = targetY + newHalfHeight + bandPaddingY;
+
+        freshSteps.forEach((s) => {
+          const cfgPos = s.configuration?.workflow_position;
+          if (!cfgPos) return;
+          if (String(s.id) === String(newStep.id)) return;
+          const stepSize = getWorkflowSize(s) || {
+            width: DEFAULT_NODE_WIDTH,
+            height: DEFAULT_NODE_HEIGHT,
+          };
+          const halfHeight = (stepSize.height || DEFAULT_NODE_HEIGHT) / 2;
+          const nodeMinY = cfgPos.y - halfHeight;
+          const nodeMaxY = cfgPos.y + halfHeight;
+          const overlapsBandY = !(nodeMaxY < bandMinY || nodeMinY > bandMaxY);
+
+          if (cfgPos.x >= bandMinX && overlapsBandY) {
+            updates.push({
+              id: String(s.id),
+              x: cfgPos.x + shiftX,
+              y: cfgPos.y,
+            });
+          }
+        });
+
+        // Position for the new copied step
+        updates.push({
+          id: String(newStep.id),
+          x: targetX,
+          y: targetY,
+        });
+
+        if (!updates.length) return;
+
+        // Move nodes immediately in the UI
+        applyLocalPositionUpdates(updates);
+
+        // Update local steps state with new positions
+        const stepsWithPositions = freshSteps.map((s) => {
+          const hit = updates.find((u) => u.id === String(s.id));
+          if (!hit) return s;
+          return {
+            ...s,
+            configuration: {
+              ...(s.configuration || {}),
+              workflow_position: { x: hit.x, y: hit.y },
+            },
+          };
+        });
+
+        setSteps(stepsWithPositions);
+        await persistPositions(updates);
+      } catch (e) {
+        setError(e.message);
+      }
+    },
+    [
+      data.csrfToken,
+      data.urls.copy,
+      fetchJson,
+      applyLocalPositionUpdates,
+      persistPositions,
+      reload,
+    ]
+  );
+
   const onClearNext = useCallback(
     async (id) => {
       await updateConnection({ step_id: id, next_step: "" });
@@ -1524,15 +2023,29 @@ const WorkflowEditor = ({ data }) => {
   );
 
   const onDelete = useCallback(
-    async (id) => {
-      if (!window.confirm(strings.confirmDelete)) return;
+    async (ids) => {
+      const normalizedIds = Array.isArray(ids) ? ids : [ids];
+      const uniqueIds = [...new Set(normalizedIds.map((id) => String(id)))];
+      if (!uniqueIds.length) return;
+
+      const singleConfirm = strings.confirmDelete || "Delete step?";
+      const confirmMessage =
+        uniqueIds.length > 1
+          ? strings.confirmDeleteMany ||
+            `${singleConfirm} (${uniqueIds.length} steps)`
+          : singleConfirm;
+
+      if (!window.confirm(confirmMessage)) return;
+
       try {
-        const formData = new FormData();
-        formData.append("_csrf", data.csrfToken || "");
-        await fetchJson(`${data.urls.deleteStep}/${id}`, {
-          method: "POST",
-          body: formData,
-        });
+        for (const id of uniqueIds) {
+          const formData = new FormData();
+          formData.append("_csrf", data.csrfToken || "");
+          await fetchJson(`${data.urls.deleteStep}/${id}`, {
+            method: "POST",
+            body: formData,
+          });
+        }
         setModal(null);
         setError("");
         clearDrawerState();
@@ -1541,7 +2054,14 @@ const WorkflowEditor = ({ data }) => {
         setError(e.message);
       }
     },
-    [clearDrawerState, data.csrfToken, fetchJson, reload, strings.confirmDelete]
+    [
+      clearDrawerState,
+      data.csrfToken,
+      fetchJson,
+      reload,
+      strings.confirmDelete,
+      strings.confirmDeleteMany,
+    ]
   );
 
   useEffect(() => {
@@ -1607,7 +2127,11 @@ const WorkflowEditor = ({ data }) => {
 
   const hasSteps = steps.length > 0;
   const shellClass = modal ? "wf-shell wf-shell--drawer-open" : "wf-shell";
-  const shellStyle = { "--wf-drawer-width": `${drawerWidth}px` };
+  const shellStyle = {
+    "--wf-drawer-width": `${drawerWidth}px`,
+    height: shellHeight ? `${shellHeight}px` : undefined,
+    maxHeight: shellHeight ? `${shellHeight}px` : undefined,
+  };
   const showMiniMap = !modal;
   const shouldFitView = !pendingViewportRef.current;
 
@@ -1704,84 +2228,132 @@ const WorkflowEditor = ({ data }) => {
     };
   }, [drawerWidth, modal]);
 
-  return (
-    <div className={shellClass} style={shellStyle} ref={shellRef}>
-      <div className="wf-toolbar">
-        <div className="wf-toolbar__left">
-          <strong>{strings.configure}</strong>
-          {message ? (
-            <span className="text-success ms-2">{message}</span>
-          ) : null}
-          {error ? <span className="text-danger ms-2">{error}</span> : null}
-          {/* {savingPositions ? (
-            <span className="text-muted ms-2">
-              {strings.loading || "Saving positions..."}
-            </span>
-          ) : null} */}
-        </div>
-        <div className="wf-toolbar__actions">
-          <button
-            className="btn btn-sm btn-outline-primary"
-            onClick={() => openStepForm({ initial_step: !hasSteps })}
-          >
-            {strings.addStep}
-          </button>
-          <button
-            className="btn btn-sm btn-outline-secondary"
-            onClick={reload}
-            disabled={loading}
-          >
-            {loading ? strings.loading : strings.refresh}
-          </button>
-          <a className="btn btn-sm btn-outline-info" href={data.urls.runs}>
-            {strings.runs}
-          </a>
-        </div>
+  useEffect(() => {
+    const shellEl = shellRef.current;
+    if (!shellEl) return;
+    const cardEl = shellEl.closest(".card");
+    const headerEl = cardEl?.querySelector?.(".card-header");
+    if (headerEl && headerEl !== headerHost) {
+      headerHtmlRef.current = headerEl.innerHTML || "";
+      headerEl.dataset.wfHeaderInjected = "true";
+      headerEl.classList.add("d-flex", "align-items-center");
+      headerEl.innerHTML = "";
+      setHeaderHost(headerEl);
+    }
+    // recalc height once we know our real position
+    requestAnimationFrame(() => recomputeShellHeight());
+  }, [headerHost, recomputeShellHeight]);
+
+  useLayoutEffect(() => {
+    recomputeShellHeight();
+
+    // Debounce resize events to avoid jumpiness
+    const handleResize = () => {
+      if (heightDebounceRef.current) clearTimeout(heightDebounceRef.current);
+      heightDebounceRef.current = setTimeout(() => {
+        recomputeShellHeight();
+      }, 100);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      if (heightDebounceRef.current) clearTimeout(heightDebounceRef.current);
+    };
+  }, [recomputeShellHeight]);
+
+  useLayoutEffect(() => {
+    requestAnimationFrame(() => recomputeShellHeight());
+  }, [steps.length, recomputeShellHeight]);
+
+  const headerContent = (
+    <div className="d-flex align-items-center w-100">
+      <div className="d-flex align-items-center flex-wrap">
+        {headerHtmlRef.current ? (
+          <span
+            className="d-flex align-items-center flex-wrap text-muted"
+            dangerouslySetInnerHTML={{ __html: headerHtmlRef.current }}
+          />
+        ) : (
+          <h5 className="m-0 fw-bold text-primary d-inline">
+            {strings.configure}
+          </h5>
+        )}
+        {message ? <span className="text-success ms-2">{message}</span> : null}
+        {error ? <span className="text-danger ms-2">{error}</span> : null}
       </div>
-      {!hasSteps ? <div className="wf-empty">{strings.empty}</div> : null}
-      <div className="wf-canvas">
-        <ReactFlow
-          nodesFocusable={true}
-          edgesFocusable={true}
-          disableKeyboardA11y={false}
-          nodes={nodes}
-          edges={edges}
-          onNodesChange={onNodesChangeWrapped}
-          onEdgesChange={onEdgesChange}
-          onConnect={onConnect}
-          onConnectStart={onConnectStart}
-          onConnectEnd={onConnectEnd}
-          onEdgeClick={onEdgeClick}
-          onSelectionChange={handleSelectionChange}
-          nodeTypes={nodeTypes}
-          edgeTypes={edgeTypes}
-          onInit={onInit}
-          defaultViewport={pendingViewportRef.current || undefined}
-          fitView={shouldFitView}
-          proOptions={{ hideAttribution: true }}
-          defaultEdgeOptions={{ animated: true }}
-          colorMode={window._sc_lightmode || "light"}
-          onMoveEnd={(_, viewport) => persistViewport(viewport)}
+      <div className="wf-toolbar__actions ms-auto d-flex flex-wrap">
+        <button
+          className="btn btn-sm btn-outline-primary"
+          onClick={() => openStepForm({ initial_step: !hasSteps })}
         >
-          {showMiniMap && <MiniMap pannable zoomable />}
-          <Controls />
-          <Background gap={16} />
-        </ReactFlow>
+          {strings.addStep}
+        </button>
+        <button
+          className="btn btn-sm btn-outline-secondary ms-2"
+          onClick={reload}
+          disabled={loading}
+        >
+          {loading ? strings.loading : strings.refresh}
+        </button>
       </div>
-      <StepDrawer
-        modal={modal}
-        innerRef={modalRef}
-        outerRef={drawerRef}
-        onClose={closeModal}
-        submitting={savingModal}
-        error={error && modal ? error : ""}
-        data={data}
-        onDelete={onDelete}
-        drawerWidth={drawerWidth}
-        onResizeStart={startResize}
-      />
     </div>
   );
+
+  return (
+    <>
+      {headerHost ? (
+        createPortal(headerContent, headerHost)
+      ) : (
+        <div className="wf-toolbar">{headerContent}</div>
+      )}
+      <div className={shellClass} style={shellStyle} ref={shellRef}>
+        {!hasSteps ? <div className="wf-empty">{strings.empty}</div> : null}
+        <div className="wf-canvas">
+          <ReactFlow
+            nodesFocusable={true}
+            edgesFocusable={true}
+            disableKeyboardA11y={false}
+            nodes={nodes}
+            edges={edges}
+            onNodesChange={onNodesChangeWrapped}
+            onEdgesChange={onEdgesChange}
+            onConnect={onConnect}
+            onConnectStart={onConnectStart}
+            onConnectEnd={onConnectEnd}
+            onEdgeClick={onEdgeClick}
+            onSelectionChange={handleSelectionChange}
+            nodeTypes={nodeTypes}
+            edgeTypes={edgeTypes}
+            onInit={onInit}
+            defaultViewport={pendingViewportRef.current || undefined}
+            fitView={shouldFitView}
+            proOptions={{ hideAttribution: true }}
+            defaultEdgeOptions={{ animated: true }}
+            colorMode={window._sc_lightmode || "light"}
+            onMoveEnd={(_, viewport) => persistViewport(viewport)}
+          >
+            {showMiniMap && <MiniMap pannable zoomable />}
+            <Controls />
+            <Background gap={16} />
+          </ReactFlow>
+        </div>
+        <StepDrawer
+          modal={modal}
+          innerRef={modalRef}
+          outerRef={drawerRef}
+          onClose={closeModal}
+          submitting={savingModal}
+          error={error && modal ? error : ""}
+          data={data}
+          onDelete={onDelete}
+          onCopy={onCopy}
+          drawerWidth={drawerWidth}
+          onResizeStart={startResize}
+        />
+      </div>
+    </>
+  );
 };
 
 export default WorkflowEditor;