@open-mercato/core 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7195.1.b5efd1d51a

package/dist/modules/workflows/backend/definitions/visual-editor/page.js

@@ -1,16 +1,93 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { WorkflowGraph } from "../../../components/WorkflowGraph.js";
+import { useLastRunOverlay } from "../../../components/run/useLastRunOverlay.js";
 import { NodeEditDialog } from "../../../components/NodeEditDialog.js";
 import { EdgeEditDialog } from "../../../components/EdgeEditDialog.js";
 import { NodeEditDialogCrudForm } from "../../../components/NodeEditDialogCrudForm.js";
 import { EdgeEditDialogCrudForm } from "../../../components/EdgeEditDialogCrudForm.js";
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useMemo, useRef } from "react";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { graphToDefinition, definitionToGraph, validateWorkflowGraph, generateStepId, generateTransitionId, appendWorkflowEdge } from "../../../lib/graph-utils.js";
+import { graphToDefinition, definitionToGraph, applyAutoLayout, validateWorkflowGraph, generateStepId, generateTransitionId, appendWorkflowEdge, getBadgeForNodeType } from "../../../lib/graph-utils.js";
+import { convertStepType } from "../../../lib/step-type-conversion.js";
+import { collectValidationIssues, countIssuesBySeverity } from "../../../lib/collect-validation-issues.js";
+import { formatWorkflowValidationError } from "../../../lib/format-validation-error.js";
+import { resolveNewNodePlacement } from "../../../lib/node-placement.js";
+import {
+  commitEditorHistory,
+  createEditorHistory,
+  redoEditorHistory,
+  undoEditorHistory
+} from "../../../lib/editor-history.js";
+import {
+  parseWorkflowSubgraph,
+  pasteWorkflowSubgraph,
+  serializeWorkflowSubgraph,
+  stringifyWorkflowSubgraph
+} from "../../../lib/subgraph-clipboard.js";
+import {
+  annotationsFromNodes,
+  annotationsToNodes,
+  createGroupNode,
+  createNoteNode,
+  isAnnotationNode,
+  readEditorAnnotations,
+  removeAnnotationNode,
+  updateAnnotationNode
+} from "../../../lib/editor-annotations.js";
+import { WORKFLOW_GROUP_TOGGLE_EVENT } from "../../../lib/annotation-events.js";
+import { AnnotationEditDialog } from "../../../components/AnnotationEditDialog.js";
+import { WorkflowCodeView } from "../../../components/WorkflowCodeView.js";
+import { DefinitionMetadataDrawer } from "../../../components/DefinitionMetadataDrawer.js";
+import { TriggersDialog } from "../../../components/TriggersDialog.js";
+import { describeCodeViewDraft, evaluateCodeViewDraft } from "../../../lib/code-view-apply.js";
+import {
+  WorkflowAiDraftDialog
+} from "../../../components/WorkflowAiDraftDialog.js";
+import { buildAiCheckpointLabel } from "../../../lib/ai-authoring.js";
+import {
+  locateDefinitionJsonEntities,
+  locateIssues,
+  severityByLine
+} from "../../../lib/definition-json-locations.js";
+import { WorkflowCommandPalette } from "../../../components/WorkflowCommandPalette.js";
+import { buildWorkflowEditorCommands } from "../../../lib/editor-commands.js";
+import { NUDGE_COMMIT_DELAY_MS, nudgeOffset, nudgeSelectedNodes, resolveNudgeDirection, selectedNodeIds } from "../../../lib/node-nudge.js";
+import { canRedoEditorHistory, canUndoEditorHistory } from "../../../lib/editor-history.js";
+import { readPaletteDragItem, writePaletteDragPayload } from "../../../lib/palette-drag.js";
+import { appendActivityToRoute, insertStepOnRoute } from "../../../lib/palette-drop.js";
+import { useActivityTypeOptions } from "../../../components/fields/useActivityTypeOptions.js";
+import { resolveActivityIcon } from "../../../components/WorkflowRouteChips.js";
 import { performDeleteEdgeFlow, performDeleteNodeFlow } from "../../../lib/visual-editor-delete-flow.js";
-import { humanizeDefinitionIssuePath } from "../../../lib/format-validation-error.js";
+import { resolveCrudFormDialogsEnabled } from "../../../lib/crud-form-dialogs-flag.js";
+import { decideDraftRestore, isServerDraftEligible, stableSerializeDefinition } from "../../../lib/draft-restore.js";
+import { buildDefinitionPayload, buildMetadataPayload } from "../../../lib/definition-payload.js";
+import { resolveDefinitionInterpolationMode } from "../../../lib/interpolation-pipeline.js";
+import { findRouteKindDescriptorForHandle } from "../../../lib/route-kinds.js";
+import { buildWorkflowRouteEdge } from "../../../lib/route-edge.js";
+import { isDecisionSourceHandle } from "../../../lib/node-outcome-rows.js";
+import { STRUCTURAL_EDIT_CONFLICT_CODE } from "../../../lib/definition-edit-safety.js";
+import { WORKFLOW_NODE_DELETE_EVENT } from "../../../components/WorkflowNodeCard.js";
+import { WORKFLOW_ROUTE_CHIP_EVENT, WORKFLOW_ROUTE_ACTIVITY_EVENT } from "../../../lib/route-chip-events.js";
+import { ActivityEditDialog } from "../../../components/ActivityEditDialog.js";
+import { applyRouteOrder, canNormalizeRoutePriorities, normalizeRoutePriorities, readRouteOrder } from "../../../lib/route-priority.js";
+import { classifyConnection, applyInputMappingToNodes, buildDataMappingEdge } from "../../../lib/data-edge-mapping.js";
+import { reattachWorkflowEdge } from "../../../lib/edge-reattachment.js";
 import { workflowDefinitionDataSchema } from "../../../data/validators.js";
+import { collectActivityConfigWarnings } from "../../../data/activity-config-warnings.js";
+import {
+  applyIfElseRoutes,
+  applySwitchRoutes,
+  isBranchingNodeType,
+  readBranchingRoutes,
+  readSwitchField
+} from "../../../lib/branching-routes.js";
+import {
+  buildTriggerPayloadContracts,
+  computeContextLedger
+} from "../../../lib/context-ledger.js";
+import { useAvailableEvents } from "@open-mercato/ui/backend/inputs/EventSelect";
+import { toUnresolvedContextRefIssues } from "../../../lib/definition-evaluation.js";
 import { Page } from "@open-mercato/ui/backend/Page";
 import { Button } from "@open-mercato/ui/primitives/button";
 import { Input } from "@open-mercato/ui/primitives/input";
@@ -18,37 +95,92 @@ import { Textarea } from "@open-mercato/ui/primitives/textarea";
 import { Label } from "@open-mercato/ui/primitives/label";
 import { Switch } from "@open-mercato/ui/primitives/switch";
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from "@open-mercato/ui/primitives/dialog";
-import { TagsInput } from "@open-mercato/ui/backend/inputs/TagsInput";
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle
+} from "@open-mercato/ui/primitives/drawer";
 import { LoadingMessage } from "@open-mercato/ui/backend/detail";
-import { Alert, AlertTitle } from "@open-mercato/ui/primitives/alert";
-import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
+import { Alert, AlertDescription, AlertTitle } from "@open-mercato/ui/primitives/alert";
+import { ConfirmDialog, useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
-import { FormHeader } from "@open-mercato/ui/backend/forms";
+import { formatRelativeTime } from "@open-mercato/shared/lib/time";
+import { FormHeader, ActionsDropdown } from "@open-mercato/ui/backend/forms";
 import { apiCall, withScopedApiRequestHeaders } from "@open-mercato/ui/backend/utils/apiCall";
+import { apiFetch } from "@open-mercato/ui/backend/utils/api";
 import { buildOptimisticLockHeader } from "@open-mercato/ui/backend/utils/optimisticLock";
 import { surfaceRecordConflict } from "@open-mercato/ui/backend/conflicts";
 import { buildRecordInjectionContext, useSetCurrentRecordInjectionContext } from "@open-mercato/ui/backend/injection/recordContext";
+import { readJsonSafe } from "@open-mercato/ui/backend/utils/serverErrors";
+import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
+import { Spinner } from "@open-mercato/ui/primitives/spinner";
+import {
+  listStartFixtures,
+  removeStartFixture,
+  upsertStartFixture
+} from "../../../lib/start-fixtures.js";
 import { flash } from "@open-mercato/ui/backend/FlashMessages";
-import { CircleQuestionMark, PanelTopClose, PanelTopOpen, Play, Save, Trash2 } from "lucide-react";
+import { ChevronDown, ChevronRight, CircleAlert, CircleQuestionMark, Code, Command, Group, History, Maximize2, Minimize2, Network, PanelLeftClose, PanelLeftOpen, PanelRightOpen, Play, Save, ShieldMinus, Sparkles, StickyNote, Trash2, TriangleAlert, X } from "lucide-react";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { usePersistedBooleanFlag } from "@open-mercato/ui/backend/crud/usePersistedBooleanFlag";
+import { useSidebarCollapse } from "@open-mercato/ui/backend/AppShell";
 import { NODE_TYPE_ICONS, NODE_TYPE_COLORS, NODE_TYPE_LABELS } from "../../../lib/node-type-icons.js";
-import { DefinitionTriggersEditor } from "../../../components/DefinitionTriggersEditor.js";
+import { TemplateGalleryDialog } from "../../../components/TemplateGalleryDialog.js";
 import { MobileVisualEditor } from "../../../components/mobile/MobileVisualEditor.js";
 import { useIsMobile } from "@open-mercato/ui/hooks/useIsMobile";
+import * as React from "react";
 import { createLogger } from "@open-mercato/shared/lib/logger";
 const logger = createLogger("workflows");
+const DRAFT_AUTOSAVE_DEBOUNCE_MS = 2e3;
+const DRAFT_SAVED_LABEL_REFRESH_MS = 3e4;
+function computeClientContextLedger(definitionData, triggerPayloadContracts) {
+  return computeContextLedger(definitionData, {
+    resolveOutputContract: () => "unknown",
+    triggerPayloadContracts
+  });
+}
+function collectContextRefWarnings(definitionData, translate, triggerPayloadContracts) {
+  const ledger = computeClientContextLedger(definitionData, triggerPayloadContracts);
+  return toUnresolvedContextRefIssues(definitionData, ledger, translate);
+}
+async function loadSubWorkflowContracts(definition) {
+  const contracts = /* @__PURE__ */ new Map();
+  const subWorkflowIds = Array.from(
+    new Set(
+      (definition?.steps || []).filter((step) => step?.stepType === "SUB_WORKFLOW" && step?.config?.subWorkflowId).map((step) => step.config.subWorkflowId)
+    )
+  );
+  await Promise.all(
+    subWorkflowIds.map(async (workflowId) => {
+      try {
+        const res = await apiCall(
+          `/api/workflows/definitions?workflowId=${encodeURIComponent(workflowId)}&limit=1`
+        );
+        const io = res.ok ? res.result?.data?.[0]?.definition?.io : void 0;
+        if (io) contracts.set(workflowId, io);
+      } catch {
+      }
+    })
+  );
+  return contracts;
+}
+const PALETTE_NODE_TYPES = ["start", "userTask", "automated", "invokeAgent", "ifElse", "switch", "waitForSignal", "waitForTimer", "waitForCondition", "subWorkflow", "end"];
+function readStructuralEditConflictCount(status, body) {
+  if (status !== 409) return null;
+  const record = body && typeof body === "object" ? body : null;
+  if (!record || record.code !== STRUCTURAL_EDIT_CONFLICT_CODE) return null;
+  return typeof record.activeInstanceCount === "number" ? record.activeInstanceCount : 0;
+}
 function VisualEditorPage() {
   const t = useT();
   const router = useRouter();
   const searchParams = useSearchParams();
   const pathname = usePathname();
   const definitionId = searchParams.get("id");
+  const templateId = searchParams.get("template");
   const isMobile = useIsMobile();
   const { confirm, ConfirmDialogElement } = useConfirmDialog();
   const [isLoading, setIsLoading] = useState(!!definitionId);
@@ -57,15 +189,56 @@ function VisualEditorPage() {
   const [edges, setEdges] = useState([]);
   const [selectedNode, setSelectedNode] = useState(null);
   const [selectedEdge, setSelectedEdge] = useState(null);
-  const [showMetadata, setShowMetadata] = useState(true);
+  const [edgeDialogFocusFieldId, setEdgeDialogFocusFieldId] = useState(null);
+  const edgesRef = React.useRef([]);
+  edgesRef.current = edges;
+  const nodesRef = React.useRef([]);
+  nodesRef.current = nodes;
+  const [metadataOpen, setMetadataOpen] = useState(false);
+  const [metadataFocusSection, setMetadataFocusSection] = useState(null);
+  const [triggersDialogOpen, setTriggersDialogOpen] = useState(false);
+  const [activityEdit, setActivityEdit] = useState(null);
+  const handleOpenTriggers = useCallback(() => {
+    setTriggersDialogOpen(true);
+  }, []);
+  const handleMetadataOpenChange = useCallback((open) => {
+    if (!open) setMetadataFocusSection(null);
+    setMetadataOpen(open);
+  }, []);
   const [isCompactViewport, setIsCompactViewport] = useState(false);
+  const [autosaveState, setAutosaveState] = useState("idle");
+  const [structuralConflict, setStructuralConflict] = useState(null);
+  const [isCreatingVersion, setIsCreatingVersion] = useState(false);
+  const autosaveTimerRef = React.useRef(null);
+  const performAutosaveRef = React.useRef(async () => {
+  });
+  const lastAutosavedBodyRef = React.useRef(null);
+  const { value: paletteCollapsed, toggle: togglePaletteCollapsed, setValue: setPaletteCollapsed } = usePersistedBooleanFlag("om:wf-editor-palette", false);
+  const [showPaletteHowTo, setShowPaletteHowTo] = useState(false);
+  const { value: focusMode, setValue: setFocusMode, toggle: toggleFocus } = usePersistedBooleanFlag("om:wf-editor-focus", false);
+  const { value: showCompensation, toggle: toggleCompensation } = usePersistedBooleanFlag("om:wf-editor-compensation", false);
+  const { value: showLastRun, toggle: toggleLastRun } = usePersistedBooleanFlag("om:wf-editor-last-run", false);
+  const { requestCollapse, releaseRequest } = useSidebarCollapse();
+  const priorPaletteCollapsedRef = React.useRef(null);
+  useEffect(() => {
+    if (focusMode) {
+      if (priorPaletteCollapsedRef.current === null) priorPaletteCollapsedRef.current = paletteCollapsed;
+      requestCollapse(true);
+      setPaletteCollapsed(true);
+    } else {
+      releaseRequest();
+      if (priorPaletteCollapsedRef.current !== null) {
+        setPaletteCollapsed(priorPaletteCollapsedRef.current);
+        priorPaletteCollapsedRef.current = null;
+      }
+    }
+  }, [focusMode]);
+  useEffect(() => () => releaseRequest(), [releaseRequest]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(max-width: 1279px)");
     const applyViewportMode = () => {
-      const compact = mediaQuery.matches;
-      setIsCompactViewport(compact);
-      setShowMetadata(!compact);
+      setIsCompactViewport(mediaQuery.matches);
     };
     applyViewportMode();
     mediaQuery.addEventListener("change", applyViewportMode);
@@ -75,8 +248,29 @@ function VisualEditorPage() {
   }, []);
   const [showNodeDialog, setShowNodeDialog] = useState(false);
   const [showEdgeDialog, setShowEdgeDialog] = useState(false);
+  const crudFormDialogsEnabled = resolveCrudFormDialogsEnabled(process.env.NEXT_PUBLIC_WORKFLOW_CRUDFORM_ENABLED);
+  const inspectorsDocked = crudFormDialogsEnabled && !isMobile && !isCompactViewport;
+  const [selectedAnnotation, setSelectedAnnotation] = useState(null);
+  const [showAnnotationDialog, setShowAnnotationDialog] = useState(false);
+  const [showCommandPalette, setShowCommandPalette] = useState(false);
+  const [showCodeView, setShowCodeView] = useState(false);
   const [showClearConfirm, setShowClearConfirm] = useState(false);
+  const [showTemplateGallery, setShowTemplateGallery] = useState(false);
+  const [problems, setProblems] = useState([]);
+  const [showProblems, setShowProblems] = useState(false);
+  const [problemsCollapsed, setProblemsCollapsed] = useState(false);
+  const [focusTarget, setFocusTarget] = useState(null);
+  const focusRequestRef = React.useRef(0);
+  const nodeErrorCounts = React.useMemo(() => {
+    const counts = {};
+    for (const issue of problems) {
+      if (issue.severity !== "error" || !issue.nodeId) continue;
+      counts[issue.nodeId] = (counts[issue.nodeId] ?? 0) + 1;
+    }
+    return counts;
+  }, [problems]);
   const [workflowId, setWorkflowId] = useState("");
+  const lastRunOverlay = useLastRunOverlay({ workflowId, enabled: showLastRun && !!definitionId });
   const [workflowName, setWorkflowName] = useState("");
   const [description, setDescription] = useState("");
   const [version, setVersion] = useState(1);
@@ -87,13 +281,101 @@ function VisualEditorPage() {
   const [effectiveFrom, setEffectiveFrom] = useState("");
   const [effectiveTo, setEffectiveTo] = useState("");
   const [triggers, setTriggers] = useState([]);
+  const [contextSchema, setContextSchema] = useState(void 0);
+  const [definitionIo, setDefinitionIo] = useState(void 0);
+  const [interpolation, setInterpolation] = useState(void 0);
+  const [errorHandler, setErrorHandler] = useState(void 0);
+  const [loadedMetadata, setLoadedMetadata] = useState(null);
   const [source, setSource] = useState(null);
   const [updatedAt, setUpdatedAt] = useState(null);
+  const [startOpen, setStartOpen] = useState(false);
+  const [startContext, setStartContext] = useState("{}");
+  const [starting, setStarting] = useState(false);
+  const [startDryRun, setStartDryRun] = useState(false);
+  const [startStepThrough, setStartStepThrough] = useState(false);
+  const [fixtureName, setFixtureName] = useState("");
+  const [history, setHistory] = useState(createEditorHistory);
+  const historyRef = React.useRef(history);
+  historyRef.current = history;
+  const loadedMetadataRef = React.useRef(null);
+  loadedMetadataRef.current = loadedMetadata;
+  const historyLabels = useMemo(() => ({
+    addStep: t("workflows.visualEditor.history.addStep", "Add step"),
+    editStep: t("workflows.visualEditor.history.editStep", "Edit step"),
+    editRoute: t("workflows.visualEditor.history.editRoute", "Edit route"),
+    deleteStep: t("workflows.visualEditor.history.deleteStep", "Delete step"),
+    deleteRoute: t("workflows.visualEditor.history.deleteRoute", "Delete route"),
+    connect: t("workflows.visualEditor.history.connect", "Connect steps"),
+    reattach: t("workflows.visualEditor.history.reattach", "Re-target route"),
+    move: t("workflows.visualEditor.history.move", "Move steps"),
+    convert: t("workflows.visualEditor.history.convert", "Change step type"),
+    branchRoutes: t("workflows.visualEditor.history.branchRoutes", "Edit branch routes"),
+    routeOrder: t("workflows.visualEditor.history.routeOrder", "Reorder routes"),
+    pinSample: t("workflows.visualEditor.history.pinSample", "Pin sample"),
+    unpinSample: t("workflows.visualEditor.history.unpinSample", "Unpin sample"),
+    tidy: t("workflows.visualEditor.history.tidy", "Tidy layout"),
+    paste: t("workflows.visualEditor.history.paste", "Paste"),
+    duplicate: t("workflows.visualEditor.history.duplicate", "Duplicate"),
+    insertOnRoute: t("workflows.visualEditor.history.insertOnRoute", "Insert step on route"),
+    addActivity: t("workflows.visualEditor.history.addActivity", "Add action to route"),
+    addNote: t("workflows.visualEditor.history.addNote", "Add note"),
+    addGroup: t("workflows.visualEditor.history.addGroup", "Add group"),
+    editAnnotation: t("workflows.visualEditor.history.editAnnotation", "Edit annotation"),
+    deleteAnnotation: t("workflows.visualEditor.history.deleteAnnotation", "Delete annotation"),
+    toggleGroup: t("workflows.visualEditor.history.toggleGroup", "Collapse group"),
+    saveFixture: t("workflows.visualEditor.history.saveFixture", "Save start fixture"),
+    deleteFixture: t("workflows.visualEditor.history.deleteFixture", "Delete start fixture"),
+    applyCode: t("workflows.visualEditor.history.applyCode", "Apply JSON from Code view")
+  }), [t]);
+  const panelStateRef = React.useRef({
+    triggers: [],
+    contextSchema: void 0,
+    io: void 0,
+    interpolation: void 0,
+    errorHandler: void 0
+  });
+  useEffect(() => {
+    panelStateRef.current = {
+      triggers,
+      contextSchema,
+      io: definitionIo,
+      interpolation,
+      errorHandler
+    };
+  }, [triggers, contextSchema, definitionIo, interpolation, errorHandler]);
+  const captureDocument = useCallback(() => ({
+    nodes: nodesRef.current,
+    edges: edgesRef.current,
+    metadata: loadedMetadataRef.current,
+    panel: panelStateRef.current
+  }), []);
+  const commitCapturedDocument = useCallback((document2, label) => {
+    setHistory((current) => commitEditorHistory(current, document2, label));
+  }, []);
+  const commitHistory = useCallback((label) => {
+    commitCapturedDocument(captureDocument(), label);
+  }, [captureDocument, commitCapturedDocument]);
+  const resetHistory = useCallback(() => {
+    setHistory(createEditorHistory());
+  }, []);
+  const mutationContextId = `workflows.definitions.visual-editor:${definitionId ?? "unknown"}`;
+  const { runMutation, retryLastMutation } = useGuardedMutation({
+    contextId: mutationContextId
+  });
   const isCodeOnly = source === "code";
   const isCodeOverride = source === "code_override";
+  const draftEligible = isServerDraftEligible(definitionId) && !isCodeOnly;
+  const [pendingDraft, setPendingDraft] = useState(null);
+  const [draftAutosaveReady, setDraftAutosaveReady] = useState(false);
+  const [draftSavedAt, setDraftSavedAt] = useState(null);
+  const [draftSaveFailed, setDraftSaveFailed] = useState(false);
+  const [draftClock, setDraftClock] = useState(0);
+  const lastPersistedDraftRef = useRef(null);
+  const draftSuspendedRef = useRef(false);
   useEffect(() => {
     const loadDefinition = async () => {
       if (!definitionId) {
+        setInterpolation("strict");
         setIsLoading(false);
         return;
       }
@@ -115,12 +397,64 @@ function VisualEditorPage() {
         setIcon(definition.metadata?.icon || "");
         setEffectiveFrom(definition.effectiveFrom || "");
         setEffectiveTo(definition.effectiveTo || "");
-        const graph = definitionToGraph(definition.definition);
-        setNodes(graph.nodes);
+        const childContracts = await loadSubWorkflowContracts(definition.definition);
+        const graph = definitionToGraph(definition.definition, { childContracts });
+        const loadedMetadataBag = definition.metadata && typeof definition.metadata === "object" ? definition.metadata : null;
+        const annotationNodes = annotationsToNodes(readEditorAnnotations(loadedMetadataBag));
+        setNodes([...graph.nodes, ...annotationNodes]);
         setEdges(graph.edges);
-        setTriggers(definition.definition?.triggers || []);
-        setSource(definition.source ?? null);
-        setUpdatedAt(typeof definition.updatedAt === "string" ? definition.updatedAt : null);
+        const loadedTriggers = definition.definition?.triggers || [];
+        setTriggers(loadedTriggers);
+        const loadedContextSchema = definition.definition?.contextSchema ?? void 0;
+        setContextSchema(loadedContextSchema);
+        const loadedIo = definition.definition?.io ?? void 0;
+        setDefinitionIo(loadedIo);
+        const loadedInterpolation = resolveDefinitionInterpolationMode(definition.definition);
+        setInterpolation(loadedInterpolation);
+        const loadedErrorHandler = definition.definition?.errorHandler ?? void 0;
+        setErrorHandler(loadedErrorHandler);
+        const loadedMetadataObject = loadedMetadataBag ? { ...loadedMetadataBag } : null;
+        setLoadedMetadata(loadedMetadataObject);
+        const loadedSource = definition.source ?? null;
+        setSource(loadedSource);
+        const loadedUpdatedAt = typeof definition.updatedAt === "string" ? definition.updatedAt : null;
+        setUpdatedAt(loadedUpdatedAt);
+        const comparableDefinition = buildDefinitionPayload({
+          graphDefinition: graphToDefinition(graph.nodes, graph.edges, { includePositions: true }),
+          triggers: loadedTriggers,
+          contextSchema: loadedContextSchema,
+          io: loadedIo,
+          interpolation: loadedInterpolation,
+          errorHandler: loadedErrorHandler
+        });
+        const loadedDraftMetadata = buildMetadataPayload({
+          loadedMetadata: loadedMetadataObject,
+          category: definition.metadata?.category || "",
+          tags: definition.metadata?.tags || [],
+          icon: definition.metadata?.icon || "",
+          annotations: annotationsFromNodes(annotationNodes)
+        });
+        lastPersistedDraftRef.current = stableSerializeDefinition({
+          definition: comparableDefinition,
+          metadata: loadedDraftMetadata
+        });
+        if (loadedSource !== "code" && isServerDraftEligible(definitionId)) {
+          const draftResult = await apiCall(
+            `/api/workflows/definitions/${definitionId}/draft`
+          );
+          const draft = draftResult.ok ? draftResult.result?.data : void 0;
+          const decision = draft ? decideDraftRestore({
+            draftDefinition: draft.definition,
+            draftBaseUpdatedAt: draft.baseUpdatedAt,
+            loadedDefinition: comparableDefinition,
+            definitionUpdatedAt: loadedUpdatedAt
+          }) : { offerRestore: false };
+          if (draft && decision.offerRestore) {
+            setPendingDraft({ draft, baseMismatch: decision.baseMismatch });
+          } else {
+            setDraftAutosaveReady(true);
+          }
+        }
       } catch (error) {
         logger.error("Error loading workflow definition", { err: error });
         flash("Failed to load workflow definition", "error");
@@ -130,62 +464,475 @@ function VisualEditorPage() {
     };
     loadDefinition();
   }, [definitionId]);
-  const handleNodesChange = useCallback((nextNodes) => {
+  const annotations = useMemo(() => annotationsFromNodes(nodes), [nodes]);
+  const draftMetadata = useMemo(
+    () => buildMetadataPayload({ loadedMetadata, tags, category, icon, annotations }),
+    [loadedMetadata, tags, category, icon, annotations]
+  );
+  useEffect(() => {
+    if (!draftAutosaveReady || !draftEligible || !definitionId) return;
+    if (draftSuspendedRef.current) return;
+    let payload;
+    try {
+      payload = {
+        definition: buildDefinitionPayload({
+          graphDefinition: graphToDefinition(nodes, edges, { includePositions: true }),
+          triggers,
+          contextSchema,
+          io: definitionIo,
+          interpolation,
+          errorHandler
+        }),
+        metadata: draftMetadata,
+        baseUpdatedAt: updatedAt
+      };
+    } catch {
+      return;
+    }
+    const serialized = stableSerializeDefinition({ definition: payload.definition, metadata: payload.metadata });
+    if (serialized === lastPersistedDraftRef.current) return;
+    const timer = window.setTimeout(async () => {
+      if (draftSuspendedRef.current) return;
+      try {
+        const result = await apiCall(
+          `/api/workflows/definitions/${definitionId}/draft`,
+          {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload)
+          }
+        );
+        if (result.ok) {
+          lastPersistedDraftRef.current = serialized;
+          setDraftSavedAt((/* @__PURE__ */ new Date()).toISOString());
+          setDraftSaveFailed(false);
+        } else {
+          setDraftSaveFailed(true);
+        }
+      } catch {
+        setDraftSaveFailed(true);
+      }
+    }, DRAFT_AUTOSAVE_DEBOUNCE_MS);
+    return () => window.clearTimeout(timer);
+  }, [draftAutosaveReady, draftEligible, definitionId, nodes, edges, triggers, contextSchema, definitionIo, interpolation, errorHandler, draftMetadata, updatedAt, workflowName, description, version, enabled, effectiveFrom, effectiveTo]);
+  useEffect(() => {
+    if (!draftSavedAt) return;
+    const interval = window.setInterval(() => setDraftClock((tick) => tick + 1), DRAFT_SAVED_LABEL_REFRESH_MS);
+    return () => window.clearInterval(interval);
+  }, [draftSavedAt]);
+  const draftSavedLabel = useMemo(() => {
+    if (!draftSavedAt) return null;
+    return formatRelativeTime(draftSavedAt, { translate: t });
+  }, [draftSavedAt, draftClock, t]);
+  const handleRestoreDraft = useCallback(() => {
+    if (!pendingDraft) return;
+    try {
+      const draftDefinition = pendingDraft.draft.definition;
+      const graph = definitionToGraph(draftDefinition);
+      setNodes([...graph.nodes, ...annotationsToNodes(readEditorAnnotations(pendingDraft.draft.metadata ?? null))]);
+      setEdges(graph.edges);
+      const draftTriggers = pendingDraft.draft.definition.triggers;
+      setTriggers(Array.isArray(draftTriggers) ? draftTriggers : []);
+      const draftContextSchema = pendingDraft.draft.definition.contextSchema;
+      setContextSchema(draftContextSchema ? draftContextSchema : void 0);
+      const draftIo = pendingDraft.draft.definition.io;
+      setDefinitionIo(draftIo ?? void 0);
+      setInterpolation(resolveDefinitionInterpolationMode(pendingDraft.draft.definition));
+      const draftErrorHandler = pendingDraft.draft.definition.errorHandler;
+      setErrorHandler(draftErrorHandler ?? void 0);
+      const restoredMetadata = pendingDraft.draft.metadata ?? null;
+      setLoadedMetadata(restoredMetadata);
+      if (restoredMetadata) {
+        setCategory(typeof restoredMetadata.category === "string" ? restoredMetadata.category : "");
+        setTags(Array.isArray(restoredMetadata.tags) ? restoredMetadata.tags.filter((tag) => typeof tag === "string") : []);
+        setIcon(typeof restoredMetadata.icon === "string" ? restoredMetadata.icon : "");
+      }
+      lastPersistedDraftRef.current = stableSerializeDefinition({
+        definition: pendingDraft.draft.definition,
+        metadata: pendingDraft.draft.metadata ?? null
+      });
+      resetHistory();
+      flash(t("workflows.visualEditor.draft.restored", "Draft restored"), "success");
+    } catch (error) {
+      logger.error("Error restoring workflow definition draft", { err: error });
+      flash(t("workflows.visualEditor.draft.restoreFailed", "Failed to restore draft"), "error");
+    } finally {
+      setPendingDraft(null);
+      setDraftAutosaveReady(true);
+    }
+  }, [pendingDraft, resetHistory, t]);
+  const handleDiscardDraft = useCallback(async () => {
+    setPendingDraft(null);
+    setDraftAutosaveReady(true);
+    if (!definitionId) return;
+    try {
+      await apiCall(`/api/workflows/definitions/${definitionId}/draft`, { method: "DELETE" });
+    } catch (error) {
+      logger.error("Error discarding workflow definition draft", { err: error });
+    }
+  }, [definitionId]);
+  const scheduleAutosave = useCallback(() => {
+    if (!definitionId || isCodeOnly) return;
+    if (autosaveTimerRef.current) clearTimeout(autosaveTimerRef.current);
+    autosaveTimerRef.current = setTimeout(() => {
+      autosaveTimerRef.current = null;
+      void performAutosaveRef.current();
+    }, 900);
+  }, [definitionId, isCodeOnly]);
+  useEffect(() => () => {
+    if (autosaveTimerRef.current) clearTimeout(autosaveTimerRef.current);
+  }, []);
+  const applyHistoryDocument = useCallback((document2) => {
+    setNodes(document2.nodes);
+    setEdges(document2.edges);
+    setLoadedMetadata(document2.metadata);
+    if (document2.panel) {
+      setTriggers(document2.panel.triggers);
+      setContextSchema(document2.panel.contextSchema);
+      setDefinitionIo(document2.panel.io);
+      setInterpolation(document2.panel.interpolation);
+      setErrorHandler(document2.panel.errorHandler);
+    }
+    scheduleAutosave();
+  }, [scheduleAutosave]);
+  const handleUndo = useCallback(() => {
     if (isCodeOnly) return;
+    const step = undoEditorHistory(historyRef.current, captureDocument());
+    if (!step) {
+      flash(t("workflows.visualEditor.history.nothingToUndo", "Nothing to undo"), "info");
+      return;
+    }
+    setHistory(step.state);
+    applyHistoryDocument(step.document);
+    flash(t("workflows.visualEditor.history.undone", "Undone: {label}", { label: step.label }), "success");
+  }, [isCodeOnly, captureDocument, applyHistoryDocument, t]);
+  const handleRedo = useCallback(() => {
+    if (isCodeOnly) return;
+    const step = redoEditorHistory(historyRef.current, captureDocument());
+    if (!step) {
+      flash(t("workflows.visualEditor.history.nothingToRedo", "Nothing to redo"), "info");
+      return;
+    }
+    setHistory(step.state);
+    applyHistoryDocument(step.document);
+    flash(t("workflows.visualEditor.history.redone", "Redone: {label}", { label: step.label }), "success");
+  }, [isCodeOnly, captureDocument, applyHistoryDocument, t]);
+  const localClipboardRef = React.useRef(null);
+  const selectedSubgraph = useCallback(() => {
+    const selectedIds = nodesRef.current.filter((node) => node.selected).map((node) => node.id);
+    return serializeWorkflowSubgraph(nodesRef.current, edgesRef.current, selectedIds);
+  }, []);
+  const handleCopySelection = useCallback(async () => {
+    const payload = selectedSubgraph();
+    if (!payload) {
+      flash(t("workflows.visualEditor.clipboard.nothingSelected", "Select one or more steps first"), "info");
+      return;
+    }
+    const serialized = stringifyWorkflowSubgraph(payload);
+    localClipboardRef.current = serialized;
+    try {
+      await navigator.clipboard.writeText(serialized);
+      flash(
+        t("workflows.visualEditor.clipboard.copied", "Copied {count} step(s)", { count: String(payload.steps.length) }),
+        "success"
+      );
+    } catch (error) {
+      logger.warn("Workflow subgraph copy fell back to the in-page buffer", { err: error });
+      flash(
+        t(
+          "workflows.visualEditor.clipboard.copyUnavailable",
+          "The browser blocked clipboard access, so the selection was kept in this editor only \u2014 pasting into another tab will not work."
+        ),
+        "warning"
+      );
+    }
+  }, [selectedSubgraph, t]);
+  const describeClipboardFailure = useCallback((code) => {
+    switch (code) {
+      case "invalidJson":
+        return t("workflows.visualEditor.clipboard.invalidJson", "The clipboard does not contain valid JSON.");
+      case "empty":
+        return t("workflows.visualEditor.clipboard.empty", "The copied selection contains no steps.");
+      default:
+        return t("workflows.visualEditor.clipboard.unsupportedFormat", "The clipboard does not contain a copied workflow selection.");
+    }
+  }, [t]);
+  const spliceSubgraph = useCallback((payload, label) => {
+    const result = pasteWorkflowSubgraph(nodesRef.current, edgesRef.current, payload);
+    commitHistory(label);
+    setNodes(result.nodes);
+    setEdges(result.edges);
+    scheduleAutosave();
+    flash(
+      t("workflows.visualEditor.clipboard.pasted", "Pasted {count} step(s)", { count: String(result.pastedNodeIds.length) }),
+      "success"
+    );
+  }, [commitHistory, scheduleAutosave, t]);
+  const handlePaste = useCallback(async () => {
+    if (isCodeOnly) return;
+    let text = null;
+    try {
+      text = await navigator.clipboard.readText();
+    } catch (error) {
+      logger.warn("Workflow subgraph paste fell back to the in-page buffer", { err: error });
+      text = localClipboardRef.current;
+      if (!text) {
+        flash(
+          t(
+            "workflows.visualEditor.clipboard.pasteUnavailable",
+            "The browser blocked clipboard access, so there is nothing to paste. Copy a selection in this editor first."
+          ),
+          "error"
+        );
+        return;
+      }
+    }
+    const parsed = parseWorkflowSubgraph(text ?? "");
+    if (!parsed.ok) {
+      flash(describeClipboardFailure(parsed.code), "error");
+      return;
+    }
+    spliceSubgraph(parsed.payload, historyLabels.paste);
+  }, [isCodeOnly, describeClipboardFailure, spliceSubgraph, historyLabels.paste, t]);
+  const handleDuplicateSelection = useCallback(() => {
+    if (isCodeOnly) return;
+    const payload = selectedSubgraph();
+    if (!payload) {
+      flash(t("workflows.visualEditor.clipboard.nothingSelected", "Select one or more steps first"), "info");
+      return;
+    }
+    spliceSubgraph(payload, historyLabels.duplicate);
+  }, [isCodeOnly, selectedSubgraph, spliceSubgraph, historyLabels.duplicate, t]);
+  const dragBaselineRef = React.useRef(null);
+  const handleNodesChange = useCallback((nextNodes, meta) => {
+    if (isCodeOnly) return;
+    if ((meta?.dragging || meta?.resizing) && !dragBaselineRef.current) dragBaselineRef.current = captureDocument();
+    const baseline = dragBaselineRef.current ?? captureDocument();
     setNodes(nextNodes);
-  }, [isCodeOnly]);
+    if (meta && !meta.persistable) return;
+    dragBaselineRef.current = null;
+    commitCapturedDocument(baseline, historyLabels.move);
+    scheduleAutosave();
+  }, [isCodeOnly, captureDocument, commitCapturedDocument, historyLabels.move, scheduleAutosave]);
+  const handleAutoArrange = useCallback(() => {
+    if (isCodeOnly) return;
+    commitHistory(historyLabels.tidy);
+    setNodes((nds) => applyAutoLayout(nds, edges));
+    scheduleAutosave();
+  }, [isCodeOnly, edges, commitHistory, historyLabels.tidy, scheduleAutosave]);
   const handleEdgesChange = useCallback((nextEdges) => {
     if (isCodeOnly) return;
     setEdges(nextEdges);
   }, [isCodeOnly]);
-  const handleAddNode = useCallback((nodeType) => {
+  const buildPaletteNode = useCallback((nodeType, dropPosition) => ({
+    id: generateStepId(nodeType),
+    type: nodeType,
+    position: resolveNewNodePlacement(nodesRef.current, { dropPosition }),
+    data: {
+      label: getDefaultLabel(nodeType),
+      description: "",
+      badge: getDefaultBadge(nodeType),
+      status: "pending"
+    }
+  }), []);
+  const handleAddNode = useCallback((nodeType, dropPosition) => {
     if (isCodeOnly) return;
-    const newNode = {
-      id: generateStepId(nodeType),
-      type: nodeType,
-      position: {
-        x: 250 + nodes.length * 50,
-        y: 100 + nodes.length * 150
-      },
-      data: {
-        label: getDefaultLabel(nodeType),
-        description: "",
-        badge: getDefaultBadge(nodeType),
-        status: "pending"
-      }
-    };
+    const newNode = buildPaletteNode(nodeType, dropPosition);
+    commitHistory(historyLabels.addStep);
     setNodes((nds) => [...nds, newNode]);
-  }, [nodes.length, isCodeOnly]);
+    scheduleAutosave();
+  }, [isCodeOnly, buildPaletteNode, commitHistory, historyLabels.addStep, scheduleAutosave]);
+  const handleAddAnnotation = useCallback((kind) => {
+    if (isCodeOnly) return;
+    const position = resolveNewNodePlacement(nodesRef.current, {});
+    const node = kind === "note" ? createNoteNode(position, "") : createGroupNode(position, t("workflows.annotations.group.untitled", "Untitled group"));
+    commitHistory(kind === "note" ? historyLabels.addNote : historyLabels.addGroup);
+    setNodes((nds) => [...nds, node]);
+    setSelectedAnnotation(node);
+    setShowAnnotationDialog(true);
+    scheduleAutosave();
+  }, [isCodeOnly, commitHistory, historyLabels.addNote, historyLabels.addGroup, scheduleAutosave, t]);
+  const activityTypeOptions = useActivityTypeOptions();
+  const describePaletteDropRejection = useCallback((code) => {
+    switch (code) {
+      case "dataMappingRoute":
+        return t("workflows.visualEditor.palette.rejected.dataMappingRoute", "Data mapping links are edited in the step configuration, not on the canvas.");
+      default:
+        return t("workflows.visualEditor.palette.rejected.unknownRoute", "That route no longer exists.");
+    }
+  }, [t]);
+  const handleCanvasDrop = useCallback((event) => {
+    if (isCodeOnly) return;
+    const item = readPaletteDragItem(event.dataTransfer);
+    if (!item) return;
+    if (item.kind === "step") {
+      if (!event.edgeId) {
+        handleAddNode(item.nodeType, event.position);
+        return;
+      }
+      const result2 = insertStepOnRoute(
+        nodesRef.current,
+        edgesRef.current,
+        event.edgeId,
+        buildPaletteNode(item.nodeType, event.position)
+      );
+      if (!result2.ok) {
+        flash(describePaletteDropRejection(result2.code), "error");
+        return;
+      }
+      commitHistory(historyLabels.insertOnRoute);
+      setNodes(result2.nodes);
+      setEdges(result2.edges);
+      scheduleAutosave();
+      flash(t("workflows.visualEditor.palette.insertedOnRoute", "Step inserted on the route"), "success");
+      return;
+    }
+    if (!event.edgeId) {
+      flash(t("workflows.visualEditor.palette.dragActionHint", "Drop an action onto a route to add it there"), "info");
+      return;
+    }
+    const activityLabel = activityTypeOptions.find((option) => option.value === item.activityType)?.label ?? item.activityType;
+    const result = appendActivityToRoute(edgesRef.current, event.edgeId, {
+      activityId: `activity_${Date.now()}`,
+      activityName: activityLabel,
+      activityType: item.activityType,
+      config: {}
+    });
+    if (!result.ok) {
+      flash(describePaletteDropRejection(result.code), "error");
+      return;
+    }
+    commitHistory(historyLabels.addActivity);
+    setEdges(result.edges);
+    scheduleAutosave();
+    flash(t("workflows.visualEditor.palette.activityAdded", "{activity} added to the route", { activity: activityLabel }), "success");
+  }, [
+    isCodeOnly,
+    handleAddNode,
+    buildPaletteNode,
+    activityTypeOptions,
+    describePaletteDropRejection,
+    commitHistory,
+    historyLabels.insertOnRoute,
+    historyLabels.addActivity,
+    scheduleAutosave,
+    t
+  ]);
+  const handlePaletteStepDragStart = useCallback((event, nodeType) => {
+    writePaletteDragPayload(event.dataTransfer, { kind: "step", nodeType }, NODE_TYPE_LABELS[nodeType]?.title ?? nodeType);
+  }, []);
+  const handlePaletteActivityDragStart = useCallback((event, activityType, label) => {
+    writePaletteDragPayload(event.dataTransfer, { kind: "activity", activityType }, label);
+  }, []);
   const handleNodeClick = useCallback((_event, node) => {
     if (isCodeOnly) return;
+    if (isAnnotationNode(node)) {
+      setSelectedAnnotation(node);
+      setSelectedNode(null);
+      setSelectedEdge(null);
+      setShowAnnotationDialog(true);
+      return;
+    }
     setSelectedNode(node);
     setSelectedEdge(null);
+    setShowEdgeDialog(false);
     setShowNodeDialog(true);
   }, [isCodeOnly]);
   const handleEdgeClick = useCallback((_event, edge) => {
     if (isCodeOnly) return;
     setSelectedEdge(edge);
     setSelectedNode(null);
+    setEdgeDialogFocusFieldId(null);
+    setShowNodeDialog(false);
+    setShowEdgeDialog(true);
+  }, [isCodeOnly]);
+  const handleRouteChipOpen = useCallback((edgeId, section) => {
+    if (isCodeOnly) return;
+    const edge = edgesRef.current.find((candidate) => candidate.id === edgeId);
+    if (!edge) return;
+    setSelectedEdge(edge);
+    setSelectedNode(null);
+    setEdgeDialogFocusFieldId(section === "condition" ? "condition" : "activities");
     setShowEdgeDialog(true);
   }, [isCodeOnly]);
   const handleSaveNode = useCallback((nodeId, updates) => {
+    commitHistory(historyLabels.editStep);
+    if (Object.prototype.hasOwnProperty.call(updates, "decisions")) {
+      const previousNode = nodesRef.current.find((node) => node.id === nodeId);
+      const previousDecisions = previousNode?.data.decisions;
+      const nextDecisions = updates.decisions;
+      const previousIds = new Set(
+        (previousDecisions ?? []).flatMap(
+          (decision) => typeof decision.transitionId === "string" ? [decision.transitionId] : []
+        )
+      );
+      const nextIds = new Set(
+        (nextDecisions ?? []).flatMap(
+          (decision) => typeof decision.transitionId === "string" ? [decision.transitionId] : []
+        )
+      );
+      setEdges(
+        (currentEdges) => currentEdges.map((edge) => {
+          if (edge.source !== nodeId) return edge;
+          if (nextIds.has(edge.id)) return { ...edge, sourceHandle: edge.id };
+          if (previousIds.has(edge.id) && edge.sourceHandle === edge.id) {
+            const { sourceHandle: _removed, ...remainingEdge } = edge;
+            return remainingEdge;
+          }
+          return edge;
+        })
+      );
+    }
     setNodes(
       (nds) => nds.map(
         (node) => node.id === nodeId ? { ...node, data: { ...node.data, ...updates } } : node
       )
     );
     flash("Node updated successfully", "success");
-  }, []);
+  }, [commitHistory, historyLabels.editStep]);
+  const branchingRoutesValue = useMemo(() => {
+    if (!selectedNode || !isBranchingNodeType(selectedNode.type)) return void 0;
+    return {
+      field: readSwitchField(edges, selectedNode.id),
+      routes: readBranchingRoutes(edges, selectedNode.id)
+    };
+  }, [selectedNode, edges]);
+  const handleSaveBranchingRoutes = useCallback((nodeId, value) => {
+    const nodeType = nodes.find((node) => node.id === nodeId)?.type;
+    commitHistory(historyLabels.branchRoutes);
+    setEdges((eds) => nodeType === "switch" ? applySwitchRoutes(eds, nodeId, value) : applyIfElseRoutes(eds, nodeId, value.routes));
+    scheduleAutosave();
+  }, [nodes, commitHistory, historyLabels.branchRoutes, scheduleAutosave]);
+  const routeOrderValue = useMemo(() => {
+    if (!selectedNode || isBranchingNodeType(selectedNode.type)) return void 0;
+    return readRouteOrder(edges, selectedNode.id);
+  }, [selectedNode, edges]);
+  const normalizedRouteNodesRef = React.useRef(/* @__PURE__ */ new Set());
+  const normalizeRoutesOnFirstEdit = useCallback((nodeId) => {
+    if (!canNormalizeRoutePriorities(source)) return;
+    if (normalizedRouteNodesRef.current.has(nodeId)) return;
+    normalizedRouteNodesRef.current.add(nodeId);
+    setEdges((eds) => normalizeRoutePriorities(eds, nodeId));
+  }, [source]);
+  const handleSaveRouteOrder = useCallback((nodeId, entries) => {
+    if (isCodeOnly) return;
+    commitHistory(historyLabels.routeOrder);
+    normalizeRoutesOnFirstEdit(nodeId);
+    setEdges((eds) => applyRouteOrder(eds, nodeId, entries));
+    scheduleAutosave();
+  }, [isCodeOnly, normalizeRoutesOnFirstEdit, commitHistory, historyLabels.routeOrder, scheduleAutosave]);
   const handleSaveEdge = useCallback((edgeId, updates) => {
+    commitHistory(historyLabels.editRoute);
     setEdges(
       (eds) => eds.map(
         (edge) => edge.id === edgeId ? { ...edge, data: { ...edge.data, ...updates } } : edge
       )
     );
     flash("Transition updated successfully", "success");
-  }, []);
+  }, [commitHistory, historyLabels.editRoute]);
   const handleDeleteEdge = useCallback(async (edgeId) => {
-    await performDeleteEdgeFlow(edgeId, {
+    const before = captureDocument();
+    const deleted = await performDeleteEdgeFlow(edgeId, {
       confirm,
       t,
       setShowEdgeDialog,
@@ -193,9 +940,54 @@ function VisualEditorPage() {
       setEdges,
       notifyDeleted: () => flash("Transition deleted successfully", "success")
     });
-  }, [confirm, t]);
+    if (deleted) commitCapturedDocument(before, historyLabels.deleteRoute);
+  }, [confirm, t, captureDocument, commitCapturedDocument, historyLabels.deleteRoute]);
+  const handleSaveAnnotation = useCallback((nodeId, updates) => {
+    if (isCodeOnly) return;
+    commitHistory(historyLabels.editAnnotation);
+    setNodes((nds) => updateAnnotationNode(nds, nodeId, updates));
+    scheduleAutosave();
+  }, [isCodeOnly, commitHistory, historyLabels.editAnnotation, scheduleAutosave]);
+  const handleDeleteAnnotation = useCallback(async (nodeId) => {
+    if (isCodeOnly) return;
+    const before = captureDocument();
+    setShowAnnotationDialog(false);
+    setSelectedAnnotation(null);
+    const confirmed = await confirm({
+      title: t("workflows.annotations.confirmDeleteTitle", "Delete annotation?"),
+      text: t("workflows.annotations.confirmDeleteText", "The note or group is removed from the canvas. Nothing the workflow executes changes."),
+      variant: "destructive"
+    });
+    if (!confirmed) return;
+    commitCapturedDocument(before, historyLabels.deleteAnnotation);
+    setNodes((nds) => removeAnnotationNode(nds, nodeId));
+    scheduleAutosave();
+  }, [isCodeOnly, captureDocument, commitCapturedDocument, historyLabels.deleteAnnotation, confirm, scheduleAutosave, t]);
+  const handleToggleGroupCollapsed = useCallback((nodeId) => {
+    if (isCodeOnly) return;
+    const node = nodesRef.current.find((candidate) => candidate.id === nodeId);
+    if (!node) return;
+    const collapsed = node.data?.collapsed === true;
+    commitHistory(historyLabels.toggleGroup);
+    setNodes((nds) => updateAnnotationNode(nds, nodeId, { collapsed: !collapsed }));
+    scheduleAutosave();
+  }, [isCodeOnly, commitHistory, historyLabels.toggleGroup, scheduleAutosave]);
+  useEffect(() => {
+    const onToggle = (event) => {
+      const nodeId = event.detail?.nodeId;
+      if (typeof nodeId === "string") handleToggleGroupCollapsed(nodeId);
+    };
+    window.addEventListener(WORKFLOW_GROUP_TOGGLE_EVENT, onToggle);
+    return () => window.removeEventListener(WORKFLOW_GROUP_TOGGLE_EVENT, onToggle);
+  }, [handleToggleGroupCollapsed]);
   const handleDeleteNode = useCallback(async (nodeId) => {
-    await performDeleteNodeFlow(nodeId, {
+    const annotation = nodesRef.current.find((candidate) => candidate.id === nodeId && isAnnotationNode(candidate));
+    if (annotation) {
+      await handleDeleteAnnotation(nodeId);
+      return;
+    }
+    const before = captureDocument();
+    const deleted = await performDeleteNodeFlow(nodeId, {
       nodes,
       confirm,
       t,
@@ -205,100 +997,569 @@ function VisualEditorPage() {
       setEdges,
       notifyDeleted: () => flash("Step deleted successfully", "success")
     });
-  }, [confirm, nodes, t]);
+    if (deleted) commitCapturedDocument(before, historyLabels.deleteStep);
+  }, [confirm, nodes, t, captureDocument, commitCapturedDocument, historyLabels.deleteStep, handleDeleteAnnotation]);
+  const handleConvertNodeType = useCallback(async (nodeId, targetType) => {
+    if (isCodeOnly) return;
+    const node = nodesRef.current.find((candidate) => candidate.id === nodeId);
+    if (!node) return;
+    const before = captureDocument();
+    const result = convertStepType({ type: node.type, data: node.data }, targetType);
+    if (!result.ok) {
+      flash(t("workflows.stepConversion.unavailable", "This step type cannot be changed."), "error");
+      return;
+    }
+    setShowNodeDialog(false);
+    setSelectedNode(null);
+    const confirmed = await confirm({
+      title: t("workflows.stepConversion.confirmTitle", "Change step type?"),
+      text: result.quarantined.length > 0 ? t(
+        "workflows.stepConversion.confirmWithQuarantine",
+        "The step keeps its name, position and routes. {count} setting(s) the new type cannot execute move to Unmapped configuration: {keys}",
+        { count: String(result.quarantined.length), keys: result.quarantined.join(", ") }
+      ) : t("workflows.stepConversion.confirm", "The step keeps its name, position and routes.")
+    });
+    if (!confirmed) return;
+    commitCapturedDocument(before, historyLabels.convert);
+    setNodes(
+      (nds) => nds.map(
+        (candidate) => candidate.id === nodeId ? { ...candidate, type: result.type, data: { ...result.data, badge: getBadgeForNodeType(result.type) } } : candidate
+      )
+    );
+    scheduleAutosave();
+    flash(
+      result.quarantined.length > 0 ? t("workflows.stepConversion.convertedWithQuarantine", "Step type changed; {count} setting(s) parked as unmapped configuration", { count: String(result.quarantined.length) }) : t("workflows.stepConversion.converted", "Step type changed"),
+      result.quarantined.length > 0 ? "warning" : "success"
+    );
+  }, [isCodeOnly, confirm, captureDocument, commitCapturedDocument, historyLabels.convert, scheduleAutosave, t]);
+  useEffect(() => {
+    if (isCodeOnly) return;
+    const onNodeDelete = (event) => {
+      const nodeId = event.detail?.nodeId;
+      if (typeof nodeId === "string") void handleDeleteNode(nodeId);
+    };
+    window.addEventListener(WORKFLOW_NODE_DELETE_EVENT, onNodeDelete);
+    return () => window.removeEventListener(WORKFLOW_NODE_DELETE_EVENT, onNodeDelete);
+  }, [isCodeOnly, handleDeleteNode]);
+  useEffect(() => {
+    const onChipOpen = (event) => {
+      const detail = event.detail;
+      if (detail?.edgeId) handleRouteChipOpen(detail.edgeId, detail.section);
+    };
+    window.addEventListener(WORKFLOW_ROUTE_CHIP_EVENT, onChipOpen);
+    return () => window.removeEventListener(WORKFLOW_ROUTE_CHIP_EVENT, onChipOpen);
+  }, [handleRouteChipOpen]);
+  useEffect(() => {
+    const onActivityOpen = (event) => {
+      if (isCodeOnly) return;
+      const detail = event.detail;
+      if (detail?.edgeId && detail?.activityId) {
+        setActivityEdit({ edgeId: detail.edgeId, activityId: detail.activityId });
+      }
+    };
+    window.addEventListener(WORKFLOW_ROUTE_ACTIVITY_EVENT, onActivityOpen);
+    return () => window.removeEventListener(WORKFLOW_ROUTE_ACTIVITY_EVENT, onActivityOpen);
+  }, [isCodeOnly]);
   const handleConnect = useCallback((connection) => {
-    const newEdge = {
-      id: generateTransitionId(connection.source, connection.target),
+    const classification = classifyConnection(connection);
+    if (classification.kind === "data-ignored") {
+      return;
+    }
+    if (classification.kind === "data-mapping") {
+      const { targetNodeId, childPortKey, parentPath } = classification;
+      commitHistory(historyLabels.connect);
+      setNodes((nds) => applyInputMappingToNodes(nds, targetNodeId, childPortKey, parentPath));
+      const dataEdge = buildDataMappingEdge(connection, childPortKey);
+      setEdges((eds) => appendWorkflowEdge(eds.filter((e) => e.id !== dataEdge.id), dataEdge));
+      return;
+    }
+    const routeKind = findRouteKindDescriptorForHandle(connection.sourceHandle);
+    const sourceNode = nodesRef.current.find((node) => node.id === connection.source);
+    const decisions = sourceNode?.data.decisions;
+    const decisionTransitionId = isDecisionSourceHandle(decisions, connection.sourceHandle) ? connection.sourceHandle : null;
+    if (decisionTransitionId && edgesRef.current.some(
+      (edge) => edge.source === connection.source && (edge.id === decisionTransitionId || edge.sourceHandle === decisionTransitionId)
+    )) {
+      return;
+    }
+    const routeData = routeKind ? {
+      kind: routeKind.kind,
+      ...routeKind.discriminatorFields({
+        sourceHandle: connection.sourceHandle
+      })
+    } : {};
+    const newEdge = buildWorkflowRouteEdge({
+      id: decisionTransitionId ?? generateTransitionId(),
       source: connection.source,
       target: connection.target,
-      type: "smoothstep",
+      sourceHandle: routeKind ? connection.sourceHandle : decisionTransitionId,
       data: {
         trigger: "auto",
         preConditions: [],
         postConditions: [],
         activities: [],
-        label: ""
+        label: "",
+        ...routeData
       }
-    };
+    });
+    commitHistory(historyLabels.connect);
     setEdges((eds) => appendWorkflowEdge(eds, newEdge));
-  }, []);
-  const handleValidate = useCallback(() => {
+  }, [commitHistory, historyLabels.connect]);
+  const describeReattachRejection = useCallback((rejection) => {
+    switch (rejection.code) {
+      case "selfLoop":
+        return t("workflows.reattach.rejected.selfLoop", "A route cannot start and end on the same step.");
+      case "duplicateRoute":
+        return t("workflows.reattach.rejected.duplicateRoute", "A route already connects those two steps.");
+      case "dataMappingRoute":
+        return t("workflows.reattach.rejected.dataMappingRoute", "Data mapping links are edited in the step configuration, not on the canvas.");
+      case "errorHandleUnsupported":
+        return t("workflows.reattach.rejected.errorHandleUnsupported", "An error route can only start at a step that can fail.");
+      case "kindHandleUnsupported":
+        return t("workflows.reattach.rejected.kindHandleUnsupported", "This route cannot start at that type of step.");
+      case "graphInvalid":
+        return t("workflows.reattach.rejected.graphInvalid", "That target would break the workflow: {reason}", { reason: rejection.detail ?? "" });
+      case "forkJoinInvalid":
+        return t("workflows.reattach.rejected.forkJoinInvalid", "That target would break the parallel branch structure: {reason}", { reason: rejection.detail ?? "" });
+      default:
+        return t("workflows.reattach.rejected.unsupported", "That route cannot be re-targeted.");
+    }
+  }, [t]);
+  const handleReconnect = useCallback((oldEdge, connection) => {
+    if (isCodeOnly) return;
+    const result = reattachWorkflowEdge(nodesRef.current, edgesRef.current, oldEdge.id, connection);
+    if (!result.ok) {
+      flash(describeReattachRejection(result), "error");
+      return;
+    }
+    commitHistory(historyLabels.reattach);
+    setEdges(result.edges);
+    scheduleAutosave();
+    flash(t("workflows.reattach.retargeted", "Route re-targeted"), "success");
+  }, [isCodeOnly, describeReattachRejection, commitHistory, historyLabels.reattach, scheduleAutosave, t]);
+  const errorHandlerStepOptions = useMemo(
+    () => nodes.filter((node) => node.type !== "start" && node.type !== "end").map((node) => ({
+      stepId: node.id,
+      label: typeof node.data?.label === "string" && node.data.label ? node.data.label : node.id
+    })),
+    [nodes]
+  );
+  const { events: availableEvents } = useAvailableEvents();
+  const triggerPayloadContracts = useMemo(
+    () => buildTriggerPayloadContracts(triggers, availableEvents),
+    [triggers, availableEvents]
+  );
+  const dialogLedger = useMemo(() => {
+    if (!showNodeDialog && !showEdgeDialog) return null;
+    try {
+      const definitionData = buildDefinitionPayload({
+        graphDefinition: graphToDefinition(nodes, edges),
+        triggers,
+        contextSchema,
+        io: definitionIo
+      });
+      return computeClientContextLedger(definitionData, triggerPayloadContracts);
+    } catch {
+      return null;
+    }
+  }, [showNodeDialog, showEdgeDialog, nodes, edges, triggers, contextSchema, definitionIo, triggerPayloadContracts]);
+  const nodeDialogLedgerEntries = useMemo(() => {
+    if (!dialogLedger || !selectedNode) return void 0;
+    const stepEntries = dialogLedger.steps[selectedNode.id]?.entries;
+    if (stepEntries && stepEntries.length > 0) return stepEntries;
+    const startNode = nodes.find((candidate) => candidate.type === "start");
+    const startEntries = startNode ? dialogLedger.steps[startNode.id]?.entries : void 0;
+    return startEntries && startEntries.length > 0 ? startEntries : stepEntries;
+  }, [dialogLedger, nodes, selectedNode]);
+  const editorSamples = useMemo(() => {
+    const editorValue = loadedMetadata?.editor;
+    if (!editorValue || typeof editorValue !== "object" || Array.isArray(editorValue)) return void 0;
+    const samplesValue = editorValue.samples;
+    if (!samplesValue || typeof samplesValue !== "object" || Array.isArray(samplesValue)) return void 0;
+    return samplesValue;
+  }, [loadedMetadata]);
+  const handlePinSample = useCallback((stepId, data) => {
+    commitHistory(historyLabels.pinSample);
+    setLoadedMetadata((previous) => {
+      const base = { ...previous ?? {} };
+      const editorValue = base.editor;
+      const editor = editorValue && typeof editorValue === "object" && !Array.isArray(editorValue) ? { ...editorValue } : {};
+      const samplesValue = editor.samples;
+      const samples = samplesValue && typeof samplesValue === "object" && !Array.isArray(samplesValue) ? { ...samplesValue } : {};
+      samples[stepId] = { pinnedAt: (/* @__PURE__ */ new Date()).toISOString(), source: "test", data };
+      editor.samples = samples;
+      base.editor = editor;
+      return base;
+    });
+    flash(t("workflows.testStep.pinnedFlash", "Sample pinned \u2014 it is stored with the definition on save"), "success");
+  }, [commitHistory, historyLabels.pinSample, t]);
+  const handleUnpinSample = useCallback((stepId) => {
+    commitHistory(historyLabels.unpinSample);
+    setLoadedMetadata((previous) => {
+      if (!previous) return previous;
+      const editorValue = previous.editor;
+      if (!editorValue || typeof editorValue !== "object" || Array.isArray(editorValue)) return previous;
+      const editor = { ...editorValue };
+      const samplesValue = editor.samples;
+      if (!samplesValue || typeof samplesValue !== "object" || Array.isArray(samplesValue)) return previous;
+      const samples = { ...samplesValue };
+      if (!(stepId in samples)) return previous;
+      delete samples[stepId];
+      if (Object.keys(samples).length > 0) editor.samples = samples;
+      else delete editor.samples;
+      const base = { ...previous };
+      if (Object.keys(editor).length > 0) base.editor = editor;
+      else delete base.editor;
+      return Object.keys(base).length > 0 ? base : null;
+    });
+  }, [commitHistory, historyLabels.unpinSample]);
+  const startFixtures = useMemo(() => {
+    const editorValue = loadedMetadata?.editor;
+    if (!editorValue || typeof editorValue !== "object" || Array.isArray(editorValue)) return void 0;
+    const fixturesValue = editorValue.fixtures;
+    if (!fixturesValue || typeof fixturesValue !== "object" || Array.isArray(fixturesValue)) return void 0;
+    return fixturesValue;
+  }, [loadedMetadata]);
+  const startFixtureList = useMemo(() => listStartFixtures(startFixtures), [startFixtures]);
+  const handleSaveFixture = useCallback(() => {
+    let context;
+    try {
+      const parsed = startContext.trim() ? JSON.parse(startContext) : {};
+      if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+        throw new Error("[internal] context must be a JSON object");
+      }
+      context = parsed;
+    } catch {
+      flash(t("workflows.startInstance.invalidJson"), "error");
+      return;
+    }
+    const result = upsertStartFixture(startFixtures, fixtureName, context, (/* @__PURE__ */ new Date()).toISOString());
+    if (!result.ok) {
+      flash(t(`workflows.fixtures.errors.${result.reason}`), "error");
+      return;
+    }
+    commitHistory(historyLabels.saveFixture);
+    setLoadedMetadata((previous) => {
+      const base = { ...previous ?? {} };
+      const editorValue = base.editor;
+      const editor = editorValue && typeof editorValue === "object" && !Array.isArray(editorValue) ? { ...editorValue } : {};
+      editor.fixtures = result.fixtures;
+      base.editor = editor;
+      return base;
+    });
+    setFixtureName("");
+    flash(t("workflows.fixtures.saved"), "success");
+  }, [startContext, startFixtures, fixtureName, commitHistory, historyLabels.saveFixture, t]);
+  const handleApplyFixture = useCallback((name) => {
+    const fixture = startFixtures?.[name];
+    if (!fixture) return;
+    setStartContext(JSON.stringify(fixture.context, null, 2));
+    setFixtureName(fixture.name);
+  }, [startFixtures]);
+  const handleDeleteFixture = useCallback((name) => {
+    commitHistory(historyLabels.deleteFixture);
+    setLoadedMetadata((previous) => {
+      if (!previous) return previous;
+      const editorValue = previous.editor;
+      if (!editorValue || typeof editorValue !== "object" || Array.isArray(editorValue)) return previous;
+      const editor = { ...editorValue };
+      const next = removeStartFixture(editor.fixtures, name);
+      if (Object.keys(next).length > 0) editor.fixtures = next;
+      else delete editor.fixtures;
+      const base = { ...previous };
+      if (Object.keys(editor).length > 0) base.editor = editor;
+      else delete base.editor;
+      return Object.keys(base).length > 0 ? base : null;
+    });
+  }, [commitHistory, historyLabels.deleteFixture]);
+  const edgeDialogLedgerEntries = useMemo(
+    () => dialogLedger && selectedEdge ? dialogLedger.steps[selectedEdge.target]?.entries : void 0,
+    [dialogLedger, selectedEdge]
+  );
+  const translateIssue = useCallback(
+    (key, fallback, params) => t(key, fallback, params),
+    [t]
+  );
+  const evaluateWorkflowIssues = useCallback(() => {
     const graphErrors = validateWorkflowGraph(nodes, edges);
-    const allErrors = [...graphErrors];
+    let zodIssues = [];
+    let configWarnings = [];
+    let schemaFailureMessage = null;
+    let flowLogicDefinition = null;
+    let flowLogicLedger;
     try {
       const definitionData = graphToDefinition(nodes, edges, { includePositions: true });
       const result = workflowDefinitionDataSchema.safeParse(definitionData);
       if (!result.success) {
-        result.error.issues.forEach((issue) => {
-          allErrors.push({
-            type: "error",
-            message: `Schema validation: ${issue.path.join(".")} - ${issue.message}`
-          });
-        });
+        zodIssues = result.error.issues;
       }
+      const ledgerDefinition = buildDefinitionPayload({ graphDefinition: definitionData, triggers, contextSchema, io: definitionIo, interpolation, errorHandler });
+      flowLogicDefinition = ledgerDefinition;
+      flowLogicLedger = computeClientContextLedger(ledgerDefinition, triggerPayloadContracts);
+      configWarnings = [
+        ...collectActivityConfigWarnings(definitionData),
+        ...collectContextRefWarnings(ledgerDefinition, t, triggerPayloadContracts)
+      ];
     } catch (error) {
-      allErrors.push({
-        type: "error",
-        message: `Schema validation failed: ${error instanceof Error ? error.message : "Unknown error"}`
+      schemaFailureMessage = error instanceof Error ? error.message : String(error);
+    }
+    const issues = collectValidationIssues({
+      graphErrors,
+      zodIssues,
+      configWarnings,
+      nodes,
+      edges,
+      definition: flowLogicDefinition,
+      ledger: flowLogicLedger,
+      translate: translateIssue
+    });
+    if (schemaFailureMessage) {
+      issues.unshift({
+        id: "schema-exception",
+        severity: "error",
+        message: t("workflows.visualEditor.problems.schemaValidationFailed", "Schema validation failed: {message}", { message: schemaFailureMessage })
       });
     }
-    if (allErrors.length === 0) {
-      flash("Validation passed! Your workflow is valid and ready to save.", "success");
+    return issues;
+  }, [nodes, edges, triggers, contextSchema, definitionIo, interpolation, errorHandler, triggerPayloadContracts, translateIssue, t]);
+  const runProblemsPass = useCallback(() => {
+    const issues = evaluateWorkflowIssues();
+    setProblems(issues);
+    if (issues.length === 0) {
+      setShowProblems(false);
+      flash(t("workflows.visualEditor.problems.validationPassed", "Validation passed! Your workflow is valid and ready to save."), "success");
     } else {
-      const firstError = allErrors[0];
-      const errorCount = allErrors.length;
-      const message = errorCount > 1 ? `${firstError.message} (and ${errorCount - 1} more ${errorCount === 2 ? "issue" : "issues"})` : firstError.message;
-      flash(message, firstError.type === "error" ? "error" : "warning");
+      setShowProblems(true);
+      setProblemsCollapsed(false);
+      const { errors, warnings } = countIssuesBySeverity(issues);
+      flash(
+        t("workflows.visualEditor.problems.summary", "Validation found {errors} error(s) and {warnings} warning(s).", { errors, warnings }),
+        errors > 0 ? "error" : "warning"
+      );
     }
-  }, [nodes, edges]);
+  }, [evaluateWorkflowIssues, t]);
+  const handleValidate = runProblemsPass;
+  const codeViewJson = useMemo(() => {
+    if (!showCodeView) return "";
+    try {
+      const definitionData = buildDefinitionPayload({
+        graphDefinition: graphToDefinition(nodes, edges, { includePositions: true }),
+        triggers,
+        contextSchema,
+        io: definitionIo,
+        interpolation,
+        errorHandler
+      });
+      return JSON.stringify(definitionData, null, 2);
+    } catch (error) {
+      return t(
+        "workflows.visualEditor.codeView.assemblyFailed",
+        "The definition could not be assembled: {message}",
+        { message: error instanceof Error ? error.message : String(error) }
+      );
+    }
+  }, [showCodeView, nodes, edges, triggers, contextSchema, definitionIo, interpolation, errorHandler, t]);
+  const codeViewIssues = useMemo(
+    () => showCodeView ? evaluateWorkflowIssues() : [],
+    [showCodeView, evaluateWorkflowIssues]
+  );
+  const [codeDraft, setCodeDraft] = useState(null);
+  const codeDraftText = codeDraft ?? codeViewJson;
+  const definitionApplyGate = useMemo(() => ({
+    parseDefinition: (parsed) => {
+      const result = workflowDefinitionDataSchema.safeParse(parsed);
+      if (result.success) return { ok: true, definition: result.data };
+      return {
+        ok: false,
+        messages: result.error.issues.map((issue) => `${issue.path.join(".") || "(root)"}: ${issue.message}`)
+      };
+    },
+    // Warnings never block, exactly as they never block a Save; only graph
+    // ERRORS do, because a canvas holding a graph the engine rejects is worse
+    // than no apply — the author has lost the text they typed.
+    // `autoLayout: false` on purpose: whether a definition is VALID cannot
+    // depend on running a layout engine over it, and skipping dagre keeps this
+    // memo cheap enough to run on every keystroke.
+    validateGraph: (definition) => {
+      const graph = definitionToGraph(definition, { autoLayout: false });
+      return validateWorkflowGraph(graph.nodes, graph.edges).filter((issue) => issue.type === "error").map((issue) => issue.message);
+    }
+  }), []);
+  const codeApplyDecision = useMemo(
+    () => evaluateCodeViewDraft({
+      draftText: codeDraftText,
+      canvasText: codeViewJson,
+      ...definitionApplyGate
+    }),
+    [codeDraftText, codeViewJson, definitionApplyGate]
+  );
+  const codeDraftStatus = useMemo(() => describeCodeViewDraft(codeApplyDecision), [codeApplyDecision]);
+  const codeIssueLocations = useMemo(() => {
+    if (!showCodeView) return { severityByLine: /* @__PURE__ */ new Map(), lineByIssueId: /* @__PURE__ */ new Map() };
+    let parsed;
+    try {
+      parsed = JSON.parse(codeDraftText);
+    } catch {
+      return { severityByLine: /* @__PURE__ */ new Map(), lineByIssueId: /* @__PURE__ */ new Map() };
+    }
+    const locations = locateDefinitionJsonEntities(codeDraftText, parsed);
+    const located = locateIssues(codeViewIssues, locations);
+    return {
+      severityByLine: severityByLine(located),
+      lineByIssueId: new Map(located.map((issue) => [issue.issueId, issue.line]))
+    };
+  }, [showCodeView, codeDraftText, codeViewIssues]);
+  const applyDefinitionDocument = useCallback((definition, label) => {
+    commitHistory(label);
+    const graph = definitionToGraph(definition, { autoLayout: true });
+    setNodes(graph.nodes);
+    setEdges(graph.edges);
+    setTriggers(definition.triggers ?? []);
+    setContextSchema(definition.contextSchema);
+    setDefinitionIo(definition.io);
+    setInterpolation(definition.interpolation);
+    setErrorHandler(definition.errorHandler);
+    scheduleAutosave();
+  }, [commitHistory, scheduleAutosave]);
+  const handleApplyCodeDraft = useCallback(() => {
+    if (!codeApplyDecision.ok) return;
+    applyDefinitionDocument(codeApplyDecision.definition, historyLabels.applyCode);
+    setCodeDraft(null);
+    flash(t("workflows.visualEditor.codeView.applied"), "success");
+  }, [codeApplyDecision, applyDefinitionDocument, historyLabels.applyCode, t]);
+  const [showAiDraft, setShowAiDraft] = useState(false);
+  const [problemsPassToken, setProblemsPassToken] = useState(0);
+  const runProblemsPassRef = React.useRef(runProblemsPass);
+  runProblemsPassRef.current = runProblemsPass;
+  useEffect(() => {
+    if (problemsPassToken === 0) return;
+    runProblemsPassRef.current();
+  }, [problemsPassToken]);
+  const handleApplyAiDraft = useCallback((input) => {
+    const decision = evaluateCodeViewDraft({
+      // Serialized so the AI path and the Code view path are literally the same
+      // call. It also proves the draft survives the JSON round trip the Code
+      // view and every save will put it through.
+      draftText: JSON.stringify(input.definition, null, 2),
+      ...definitionApplyGate
+    });
+    if (!decision.ok) {
+      switch (decision.reason) {
+        case "parseError":
+          return { reason: "parseError", messages: [decision.message] };
+        case "schemaError":
+        case "graphError":
+          return { reason: decision.reason, messages: decision.messages };
+        default:
+          return {
+            reason: "schemaError",
+            messages: [t("workflows.aiDraft.refusedUnknown", "The generated definition was refused.")]
+          };
+      }
+    }
+    applyDefinitionDocument(
+      decision.definition,
+      buildAiCheckpointLabel(input.prompt, {
+        prefix: t("workflows.visualEditor.history.aiDraft", "AI draft")
+      })
+    );
+    setProblemsPassToken((token) => token + 1);
+    flash(
+      t("workflows.aiDraft.applied", "AI draft applied. Review the problems, then save when you are happy with it."),
+      "success"
+    );
+    return null;
+  }, [definitionApplyGate, applyDefinitionDocument, t]);
+  const handleRevertCodeDraft = useCallback(() => {
+    setCodeDraft(null);
+  }, []);
+  const handleCloseCodeView = useCallback(() => {
+    setCodeDraft(null);
+    setShowCodeView(false);
+  }, []);
+  const handleCopyDefinitionJson = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(codeViewJson);
+      flash(t("workflows.visualEditor.codeView.copied", "Definition JSON copied"), "success");
+    } catch (error) {
+      logger.warn("Workflow definition JSON copy was blocked by the browser", { err: error });
+      flash(
+        t(
+          "workflows.visualEditor.codeView.copyUnavailable",
+          "The browser blocked clipboard access, so nothing was copied \u2014 select the JSON and copy it manually."
+        ),
+        "warning"
+      );
+    }
+  }, [codeViewJson, t]);
+  const handleProblemClick = useCallback((issue) => {
+    if (!issue.nodeId && !issue.edgeId) return;
+    focusRequestRef.current += 1;
+    setFocusTarget({
+      ...issue.nodeId ? { nodeId: issue.nodeId } : { edgeId: issue.edgeId },
+      requestId: focusRequestRef.current
+    });
+  }, []);
   const handleSave = useCallback(async () => {
     if (!workflowId || !workflowName) {
-      flash("Workflow ID and Name are required fields", "error");
-      return;
-    }
-    const errors = validateWorkflowGraph(nodes, edges);
-    const criticalErrors = errors.filter((e) => e.type === "error");
-    if (criticalErrors.length > 0) {
-      flash(`Cannot save: ${criticalErrors.length} validation error(s) found. Please fix them first.`, "error");
+      setMetadataOpen(true);
+      flash(t("workflows.visualEditor.metadata.requiredFields", "Workflow ID and name are required."), "error");
       return;
     }
-    const graphDefinition = graphToDefinition(nodes, edges, { includePositions: true });
-    const definitionData = {
-      ...graphDefinition,
-      triggers: triggers.length > 0 ? triggers : void 0
-    };
+    const graphErrors = validateWorkflowGraph(nodes, edges);
+    const definitionData = buildDefinitionPayload({
+      graphDefinition: graphToDefinition(nodes, edges, { includePositions: true }),
+      triggers,
+      contextSchema,
+      io: definitionIo,
+      interpolation,
+      errorHandler
+    });
     const schemaResult = workflowDefinitionDataSchema.safeParse(definitionData);
-    if (!schemaResult.success) {
-      const issues = schemaResult.error.issues;
-      const described = issues.slice(0, 3).map((issue) => `${humanizeDefinitionIssuePath(issue.path)}: ${issue.message}`);
-      const suffix = issues.length > described.length ? ` (+${issues.length - described.length} more)` : "";
-      flash(`Cannot save \u2014 ${described.join("; ")}${suffix}`, "error");
+    const issues = collectValidationIssues({
+      graphErrors,
+      zodIssues: schemaResult.success ? [] : schemaResult.error.issues,
+      configWarnings: [
+        ...collectActivityConfigWarnings(definitionData),
+        ...collectContextRefWarnings(definitionData, t, triggerPayloadContracts)
+      ],
+      nodes,
+      edges,
+      definition: definitionData,
+      ledger: computeClientContextLedger(definitionData, triggerPayloadContracts),
+      translate: translateIssue
+    });
+    setProblems(issues);
+    const { errors } = countIssuesBySeverity(issues);
+    if (errors > 0) {
+      setShowProblems(true);
+      setProblemsCollapsed(false);
+      flash(t("workflows.visualEditor.problems.saveBlocked", "Cannot save: {count} validation error(s) found. Please fix them first.", { count: errors }), "error");
       return;
     }
     setIsSaving(true);
     try {
-      const metadata2 = {};
-      if (category) metadata2.category = category;
-      if (tags.length > 0) metadata2.tags = tags;
-      if (icon) metadata2.icon = icon;
+      const metadataPayload = buildMetadataPayload({ loadedMetadata, tags, category, icon, definition: definitionData, annotations });
       const isUpdate = !!definitionId;
       let result;
+      let updateBody = null;
       if (isUpdate) {
+        updateBody = {
+          workflowName,
+          description: description || null,
+          version,
+          definition: definitionData,
+          metadata: metadataPayload,
+          enabled,
+          effectiveFrom: effectiveFrom || null,
+          effectiveTo: effectiveTo || null
+        };
         result = await withScopedApiRequestHeaders(
           buildOptimisticLockHeader(updatedAt),
           () => apiCall(`/api/workflows/definitions/${definitionId}`, {
             method: "PUT",
             headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              workflowName,
-              description: description || null,
-              version,
-              definition: definitionData,
-              metadata: Object.keys(metadata2).length > 0 ? metadata2 : null,
-              enabled,
-              effectiveFrom: effectiveFrom || null,
-              effectiveTo: effectiveTo || null
-            })
+            body: JSON.stringify(updateBody)
           })
         );
       } else {
@@ -311,7 +1572,7 @@ function VisualEditorPage() {
             description: description || null,
             version,
             definition: definitionData,
-            metadata: Object.keys(metadata2).length > 0 ? metadata2 : null,
+            metadata: metadataPayload,
             enabled,
             effectiveFrom: effectiveFrom || null,
             effectiveTo: effectiveTo || null
@@ -319,27 +1580,424 @@ function VisualEditorPage() {
         });
       }
       if (!result.ok) {
+        const activeInstanceCount = readStructuralEditConflictCount(result.status, result.result);
+        if (activeInstanceCount !== null && updateBody) {
+          setStructuralConflict({ activeInstanceCount, payload: updateBody });
+          return;
+        }
         const conflictError = Object.assign(new Error(t("workflows.messages.saveFailed", "Failed to save")), {
           status: result.status,
           ...result.result && typeof result.result === "object" ? result.result : {}
         });
         if (!surfaceRecordConflict(conflictError, t)) {
-          flash(`Failed to save: ${result.result?.error || "Unknown error"}`, "error");
+          flash(formatWorkflowValidationError(result.result, t("workflows.messages.saveFailed", "Failed to save")), "error");
         }
         return;
       }
+      setStructuralConflict(null);
+      if (updateBody) lastAutosavedBodyRef.current = stableSerializeDefinition(updateBody);
       const savedDefinition = result.result?.data;
-      flash(`Workflow ${isUpdate ? "updated" : "created"} successfully!`, "success");
-      setTimeout(() => {
-        router.push(`/backend/definitions/${savedDefinition.id}`);
-      }, 1500);
+      draftSuspendedRef.current = true;
+      setPendingDraft(null);
+      setDraftSavedAt(null);
+      setDraftSaveFailed(false);
+      if (isUpdate && isServerDraftEligible(definitionId)) {
+        void apiCall(`/api/workflows/definitions/${definitionId}/draft`, { method: "DELETE" }).catch(() => void 0);
+      }
+      flash(
+        isUpdate ? t("workflows.messages.workflowUpdated", "Workflow updated successfully") : t("workflows.messages.workflowCreated", "Workflow created successfully"),
+        "success"
+      );
+      if (isUpdate) {
+        if (typeof savedDefinition?.updatedAt === "string") {
+          setUpdatedAt(savedDefinition.updatedAt);
+        }
+      } else if (savedDefinition?.id) {
+        router.replace(`/backend/definitions/visual-editor?id=${encodeURIComponent(savedDefinition.id)}`);
+      }
     } catch (error) {
       logger.error("Error saving workflow definition", { err: error });
-      flash("Failed to save workflow definition. Please try again.", "error");
+      flash(t("workflows.messages.saveFailed", "Failed to save"), "error");
     } finally {
       setIsSaving(false);
     }
-  }, [nodes, edges, workflowId, workflowName, description, version, enabled, category, tags, icon, effectiveFrom, effectiveTo, triggers, definitionId, updatedAt, router]);
+  }, [nodes, edges, workflowId, workflowName, description, version, enabled, category, tags, icon, effectiveFrom, effectiveTo, triggers, contextSchema, definitionIo, interpolation, errorHandler, loadedMetadata, annotations, definitionId, updatedAt, router, t]);
+  const focusNode = useCallback((nodeId) => {
+    focusRequestRef.current += 1;
+    setFocusTarget({ nodeId, requestId: focusRequestRef.current });
+  }, []);
+  const openSelectedInspector = useCallback(() => {
+    const selected = nodesRef.current.find((node) => node.selected);
+    if (!selected) {
+      const selectedEdgeNode = edgesRef.current.find((edge) => edge.selected);
+      if (!selectedEdgeNode || isCodeOnly) return;
+      setSelectedEdge(selectedEdgeNode);
+      setSelectedNode(null);
+      setEdgeDialogFocusFieldId(null);
+      setShowEdgeDialog(true);
+      return;
+    }
+    handleNodeClick({}, selected);
+  }, [isCodeOnly, handleNodeClick]);
+  const handleDeleteSelection = useCallback(async () => {
+    if (isCodeOnly) return;
+    const nodeIds = selectedNodeIds(nodesRef.current);
+    const edgeIds = edgesRef.current.filter((edge) => edge.selected).map((edge) => edge.id);
+    if (nodeIds.length === 0 && edgeIds.length === 0) {
+      flash(t("workflows.visualEditor.keyboard.nothingSelected", "Select a step or a route first"), "info");
+      return;
+    }
+    for (const edgeId of edgeIds) await handleDeleteEdge(edgeId);
+    for (const nodeId of nodeIds) await handleDeleteNode(nodeId);
+  }, [isCodeOnly, handleDeleteEdge, handleDeleteNode, t]);
+  const nudgeBaselineRef = React.useRef(null);
+  const nudgeCommitTimerRef = React.useRef(null);
+  const handleNudge = useCallback((key, coarse) => {
+    if (isCodeOnly) return false;
+    const direction = resolveNudgeDirection(key);
+    if (!direction) return false;
+    if (selectedNodeIds(nodesRef.current).length === 0) return false;
+    if (!nudgeBaselineRef.current) nudgeBaselineRef.current = captureDocument();
+    setNodes((nds) => nudgeSelectedNodes(nds, nudgeOffset(direction, coarse)));
+    if (nudgeCommitTimerRef.current) clearTimeout(nudgeCommitTimerRef.current);
+    nudgeCommitTimerRef.current = setTimeout(() => {
+      nudgeCommitTimerRef.current = null;
+      const baseline = nudgeBaselineRef.current;
+      nudgeBaselineRef.current = null;
+      if (baseline) commitCapturedDocument(baseline, historyLabels.move);
+      scheduleAutosave();
+    }, NUDGE_COMMIT_DELAY_MS);
+    return true;
+  }, [isCodeOnly, captureDocument, commitCapturedDocument, historyLabels.move, scheduleAutosave]);
+  useEffect(() => () => {
+    if (nudgeCommitTimerRef.current) clearTimeout(nudgeCommitTimerRef.current);
+  }, []);
+  const commandPaletteCommands = useMemo(() => buildWorkflowEditorCommands({
+    readOnly: isCodeOnly,
+    canUndo: canUndoEditorHistory(history),
+    canRedo: canRedoEditorHistory(history),
+    hasNodes: nodes.length > 0,
+    hasSelection: nodes.some((node) => node.selected) || edges.some((edge) => edge.selected),
+    canRunTest: !!definitionId,
+    stepTypes: PALETTE_NODE_TYPES.map((nodeType) => ({
+      nodeType,
+      typeLabel: NODE_TYPE_LABELS[nodeType]?.title ?? nodeType
+    })),
+    steps: nodes.filter((node) => !isAnnotationNode(node)).map((node) => ({
+      id: node.id,
+      label: typeof node.data?.label === "string" && node.data.label ? node.data.label : node.id,
+      typeLabel: NODE_TYPE_LABELS[node.type ?? ""]?.title ?? node.type ?? ""
+    })),
+    labels: {
+      undo: t("workflows.commandPalette.undo", "Undo"),
+      redo: t("workflows.commandPalette.redo", "Redo"),
+      deleteSelection: t("workflows.commandPalette.delete", "Delete selection"),
+      copy: t("workflows.commandPalette.copy", "Copy selection"),
+      paste: t("workflows.commandPalette.paste", "Paste"),
+      duplicate: t("workflows.commandPalette.duplicate", "Duplicate selection"),
+      addStep: (typeLabel) => t("workflows.commandPalette.addStep", "Add step: {type}", { type: typeLabel }),
+      addNote: t("workflows.commandPalette.addNote", "Add note"),
+      addGroup: t("workflows.commandPalette.addGroup", "Add group"),
+      goToStep: t("workflows.commandPalette.goToStep", "Go to step"),
+      tidy: t("workflows.visualEditor.autoArrange"),
+      togglePalette: t("workflows.commandPalette.togglePalette", "Toggle the step palette"),
+      toggleMetadata: t("workflows.commandPalette.toggleMetadata", "Toggle the workflow details panel"),
+      toggleFocus: t("workflows.commandPalette.toggleFocus", "Toggle focus mode"),
+      toggleProblems: t("workflows.commandPalette.toggleProblems", "Toggle the Problems panel"),
+      toggleCodeView: t("workflows.commandPalette.toggleCodeView", "Toggle the Code view"),
+      toggleCompensation: t("workflows.commandPalette.toggleCompensation", "Toggle compensation paths"),
+      validate: t("workflows.visualEditor.validate"),
+      runTest: t("workflows.actions.startInstance"),
+      save: t("workflows.common.save"),
+      aiDraft: t("workflows.aiDraft.open", "Draft this workflow with AI")
+    },
+    actions: {
+      undo: handleUndo,
+      redo: handleRedo,
+      deleteSelection: () => {
+        void handleDeleteSelection();
+      },
+      copy: () => {
+        void handleCopySelection();
+      },
+      paste: () => {
+        void handlePaste();
+      },
+      duplicate: handleDuplicateSelection,
+      addStep: (nodeType) => handleAddNode(nodeType),
+      addNote: () => handleAddAnnotation("note"),
+      addGroup: () => handleAddAnnotation("group"),
+      goToStep: focusNode,
+      tidy: handleAutoArrange,
+      togglePalette: togglePaletteCollapsed,
+      toggleMetadata: () => setMetadataOpen((open) => !open),
+      toggleFocus,
+      toggleProblems: () => setShowProblems((visible) => !visible),
+      toggleCodeView: () => setShowCodeView((visible) => !visible),
+      toggleCompensation,
+      validate: handleValidate,
+      runTest: () => setStartOpen(true),
+      save: () => {
+        void handleSave();
+      },
+      aiDraft: () => setShowAiDraft(true)
+    }
+  }), [
+    isCodeOnly,
+    history,
+    nodes,
+    edges,
+    definitionId,
+    t,
+    handleUndo,
+    handleRedo,
+    handleDeleteSelection,
+    handleCopySelection,
+    handlePaste,
+    handleDuplicateSelection,
+    handleAddNode,
+    handleAddAnnotation,
+    focusNode,
+    handleAutoArrange,
+    togglePaletteCollapsed,
+    toggleFocus,
+    toggleCompensation,
+    handleValidate,
+    handleSave
+  ]);
+  useEffect(() => {
+    if (isMobile) return;
+    const onKeyDown = (event) => {
+      const active = document.activeElement;
+      const tag = (active?.tagName || "").toLowerCase();
+      const isEditing = tag === "input" || tag === "textarea" || tag === "select" || !!active?.isContentEditable;
+      const isInspectorOpen = showNodeDialog || showEdgeDialog;
+      const isDialogOpen = isInspectorOpen || showAnnotationDialog || showClearConfirm || startOpen || showCodeView;
+      const isOverlayOpen = isDialogOpen || metadataOpen || showAiDraft;
+      const isCommandKey = (event.metaKey || event.ctrlKey) && !event.altKey;
+      if (isCommandKey && (event.key === "k" || event.key === "K")) {
+        if (isOverlayOpen) return;
+        event.preventDefault();
+        setShowCommandPalette((open) => !open);
+        return;
+      }
+      if (isCommandKey && !event.shiftKey && (event.key === "s" || event.key === "S")) {
+        if (isDialogOpen || isCodeOnly) return;
+        event.preventDefault();
+        void handleSave();
+        return;
+      }
+      if (isEditing || showCommandPalette) return;
+      if (isCommandKey && (event.key === "z" || event.key === "Z")) {
+        if (isOverlayOpen) return;
+        event.preventDefault();
+        if (event.shiftKey) handleRedo();
+        else handleUndo();
+        return;
+      }
+      if (isCommandKey && !event.shiftKey && !isOverlayOpen) {
+        if (event.key === "c" || event.key === "C") {
+          event.preventDefault();
+          void handleCopySelection();
+          return;
+        }
+        if (event.key === "v" || event.key === "V") {
+          event.preventDefault();
+          void handlePaste();
+          return;
+        }
+        if (event.key === "d" || event.key === "D") {
+          event.preventDefault();
+          handleDuplicateSelection();
+          return;
+        }
+      }
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+      if (event.key === "Escape") {
+        if (inspectorsDocked && isInspectorOpen) {
+          event.preventDefault();
+          setShowNodeDialog(false);
+          setShowEdgeDialog(false);
+          return;
+        }
+        if (focusMode && !isOverlayOpen) {
+          event.preventDefault();
+          setFocusMode(false);
+        }
+        return;
+      }
+      if (isOverlayOpen) return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        openSelectedInspector();
+        return;
+      }
+      if (event.key === "Delete" || event.key === "Backspace") {
+        event.preventDefault();
+        void handleDeleteSelection();
+        return;
+      }
+      if (resolveNudgeDirection(event.key)) {
+        if (handleNudge(event.key, event.shiftKey)) event.preventDefault();
+        return;
+      }
+      if (event.key === "f" || event.key === "F") {
+        event.preventDefault();
+        toggleFocus();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [
+    isMobile,
+    focusMode,
+    inspectorsDocked,
+    showNodeDialog,
+    showEdgeDialog,
+    showAnnotationDialog,
+    showClearConfirm,
+    startOpen,
+    showCodeView,
+    metadataOpen,
+    showAiDraft,
+    showCommandPalette,
+    toggleFocus,
+    setFocusMode,
+    handleUndo,
+    handleRedo,
+    handleCopySelection,
+    handlePaste,
+    handleDuplicateSelection,
+    openSelectedInspector,
+    handleDeleteSelection,
+    handleNudge,
+    handleSave,
+    isCodeOnly
+  ]);
+  performAutosaveRef.current = async () => {
+    if (!definitionId || isCodeOnly) return;
+    if (!workflowId || !workflowName) return;
+    const criticalErrors = validateWorkflowGraph(nodes, edges).filter((e) => e.type === "error");
+    if (criticalErrors.length > 0) return;
+    const definitionData = buildDefinitionPayload({
+      graphDefinition: graphToDefinition(nodes, edges, { includePositions: true }),
+      triggers,
+      contextSchema,
+      io: definitionIo,
+      interpolation,
+      errorHandler
+    });
+    if (!workflowDefinitionDataSchema.safeParse(definitionData).success) return;
+    const metadataPayload = buildMetadataPayload({ loadedMetadata, tags, category, icon, definition: definitionData, annotations });
+    const updateBody = {
+      workflowName,
+      description: description || null,
+      version,
+      definition: definitionData,
+      metadata: metadataPayload,
+      enabled,
+      effectiveFrom: effectiveFrom || null,
+      effectiveTo: effectiveTo || null
+    };
+    const serializedBody = stableSerializeDefinition(updateBody);
+    if (serializedBody === lastAutosavedBodyRef.current) return;
+    lastAutosavedBodyRef.current = serializedBody;
+    setAutosaveState("saving");
+    try {
+      const result = await withScopedApiRequestHeaders(
+        buildOptimisticLockHeader(updatedAt),
+        () => apiCall(`/api/workflows/definitions/${definitionId}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(updateBody)
+        })
+      );
+      if (!result.ok) {
+        setAutosaveState("idle");
+        lastAutosavedBodyRef.current = null;
+        const activeInstanceCount = readStructuralEditConflictCount(result.status, result.result);
+        if (activeInstanceCount !== null) {
+          setStructuralConflict({ activeInstanceCount, payload: updateBody });
+          return;
+        }
+        const conflictError = Object.assign(new Error("[internal] workflow autosave failed"), {
+          status: result.status,
+          ...result.result && typeof result.result === "object" ? result.result : {}
+        });
+        surfaceRecordConflict(conflictError, t);
+        return;
+      }
+      setStructuralConflict(null);
+      const savedDefinition = result.result?.data;
+      if (typeof savedDefinition?.updatedAt === "string") {
+        setUpdatedAt(savedDefinition.updatedAt);
+      }
+      setAutosaveState("saved");
+    } catch (error) {
+      logger.error("workflow autosave failed", {
+        error: error instanceof Error ? error.message : String(error)
+      });
+      lastAutosavedBodyRef.current = null;
+      setAutosaveState("idle");
+    }
+  };
+  useEffect(() => {
+    if (autosaveState !== "saved") return;
+    const timer = setTimeout(() => setAutosaveState("idle"), 2e3);
+    return () => clearTimeout(timer);
+  }, [autosaveState]);
+  const handleCreateVersion = useCallback(async () => {
+    if (!definitionId || !structuralConflict) return;
+    setIsCreatingVersion(true);
+    try {
+      const publishResult = await apiCall(
+        `/api/workflows/definitions/${definitionId}/publish`,
+        { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({}) }
+      );
+      const mintedVersion = publishResult.result?.data;
+      if (!publishResult.ok || !mintedVersion?.id) {
+        flash(
+          publishResult.result?.error || t("workflows.visualEditor.editSafety.createVersionFailed", "Could not create a new version."),
+          "error"
+        );
+        return;
+      }
+      const nextVersion = mintedVersion.version ?? version;
+      const saveResult = await withScopedApiRequestHeaders(
+        buildOptimisticLockHeader(mintedVersion.updatedAt ?? null),
+        () => apiCall(
+          `/api/workflows/definitions/${mintedVersion.id}`,
+          {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ ...structuralConflict.payload, version: nextVersion })
+          }
+        )
+      );
+      if (!saveResult.ok) {
+        flash(
+          formatWorkflowValidationError(
+            saveResult.result,
+            t("workflows.visualEditor.editSafety.createVersionFailed", "Could not create a new version.")
+          ),
+          "error"
+        );
+        return;
+      }
+      setStructuralConflict(null);
+      setVersion(nextVersion);
+      setUpdatedAt(saveResult.result?.data?.updatedAt ?? null);
+      flash(
+        t("workflows.visualEditor.editSafety.createVersionSucceeded", "Version {version} created. Your changes were saved there.", {
+          version: String(nextVersion)
+        }),
+        "success"
+      );
+      router.replace(`/backend/definitions/visual-editor?id=${encodeURIComponent(mintedVersion.id)}`);
+    } finally {
+      setIsCreatingVersion(false);
+    }
+  }, [definitionId, structuralConflict, version, router, t]);
   const handleCustomize = useCallback(async () => {
     if (!definitionId) return;
     setIsSaving(true);
@@ -387,90 +2045,106 @@ function VisualEditorPage() {
       setIsSaving(false);
     }
   }, [definitionId, workflowId, router, confirm, t]);
-  const handleTest = useCallback(() => {
-    const errors = validateWorkflowGraph(nodes, edges);
-    const criticalErrors = errors.filter((e) => e.type === "error");
-    if (criticalErrors.length > 0) {
-      flash(`Cannot test: ${criticalErrors.length} validation error(s) found. Please fix them first.`, "error");
+  const handleStartInstance = useCallback(async () => {
+    let initialContext;
+    try {
+      const parsed = startContext.trim() ? JSON.parse(startContext) : {};
+      if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+        throw new Error("[internal] context must be a JSON object");
+      }
+      initialContext = parsed;
+    } catch {
+      flash(t("workflows.startInstance.invalidJson"), "error");
       return;
     }
-    flash("Test functionality will be implemented next", "info");
-  }, [nodes, edges]);
-  const handleLoadExample = useCallback(() => {
-    setWorkflowId("approval_workflow");
-    setWorkflowName("Simple Approval Workflow");
-    setDescription("A basic approval workflow for reviewing and approving requests");
-    setVersion(1);
-    setEnabled(true);
-    setCategory("Approvals");
-    setTags(["approval", "review"]);
-    const exampleNodes = [
-      {
-        id: "start",
-        type: "start",
-        position: { x: 250, y: 50 },
-        data: {
-          label: "Start",
-          description: "Workflow begins",
-          status: "pending",
-          badge: "Start"
-        }
-      },
-      {
-        id: "step1",
-        type: "userTask",
-        position: { x: 250, y: 250 },
-        data: {
-          label: "Review Request",
-          description: "User reviews the incoming request",
-          status: "pending",
-          stepNumber: 1,
-          badge: "User Task",
-          assignedToRoles: ["Reviewer"]
-        }
-      },
-      {
-        id: "end",
-        type: "end",
-        position: { x: 250, y: 450 },
-        data: {
-          label: "Complete",
-          description: "Workflow ends",
-          status: "pending",
-          badge: "End"
-        }
-      }
-    ];
-    const exampleEdges = [
-      {
-        id: "e-start-step1",
-        source: "start",
-        target: "step1",
-        type: "smoothstep",
-        data: {
-          trigger: "auto",
-          preConditions: [],
-          postConditions: [],
-          activities: []
-        }
-      },
-      {
-        id: "e-step1-end",
-        source: "step1",
-        target: "end",
-        type: "smoothstep",
-        data: {
-          trigger: "auto",
-          preConditions: [],
-          postConditions: [],
-          activities: []
+    setStarting(true);
+    try {
+      const result = await runMutation({
+        operation: async () => {
+          const response = await apiFetch("/api/workflows/instances", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              workflowId,
+              version,
+              initialContext,
+              ...startDryRun ? { dryRun: true } : {},
+              ...startStepThrough ? { stepThrough: true } : {}
+            })
+          });
+          if (!response.ok) {
+            const errorBody = await readJsonSafe(response, null);
+            throw new Error(errorBody?.error || t("workflows.startInstance.failed"));
+          }
+          return readJsonSafe(response, null);
+        },
+        mutationPayload: { resourceId: definitionId, operation: "start-instance" },
+        context: {
+          formId: mutationContextId,
+          resourceKind: "workflows.instance",
+          resourceId: definitionId,
+          operation: "start-instance",
+          retryLastMutation
         }
+      });
+      flash(t("workflows.startInstance.started"), "success");
+      setStartOpen(false);
+      const instanceId = result?.data?.instance?.id;
+      if (instanceId) {
+        router.push(`/backend/instances/${instanceId}`);
+        router.refresh();
       }
-    ];
-    setNodes(exampleNodes);
-    setEdges(exampleEdges);
-    flash("Example workflow loaded", "success");
+    } catch (error) {
+      flash(error instanceof Error ? error.message : t("workflows.startInstance.failed"), "error");
+    } finally {
+      setStarting(false);
+    }
+  }, [startContext, startDryRun, startStepThrough, workflowId, version, definitionId, mutationContextId, retryLastMutation, router, t]);
+  const applyTemplate = useCallback((template) => {
+    setWorkflowId(template.id.replace(/-/g, "_"));
+    setWorkflowName(t(template.nameKey));
+    setDescription(t(template.descriptionKey));
+    setVersion(1);
+    setEnabled(true);
+    setCategory(template.category);
+    setTags([]);
+    setIcon(template.icon);
+    const graph = definitionToGraph(template.definition);
+    setNodes(graph.nodes);
+    setEdges(graph.edges);
+    setTriggers(template.definition.triggers || []);
+    setContextSchema(template.definition.contextSchema ?? void 0);
+    setDefinitionIo(template.definition.io ?? void 0);
+    setInterpolation(resolveDefinitionInterpolationMode(template.definition) ?? "strict");
+    setErrorHandler(template.definition.errorHandler ?? void 0);
+    setLoadedMetadata(null);
+    resetHistory();
+    flash(t("workflows.visualEditor.templateLoaded", "Template loaded"), "success");
+  }, [resetHistory, t]);
+  const handleOpenTemplateGallery = useCallback(() => {
+    setShowTemplateGallery(true);
   }, []);
+  const handleTemplateSelect = useCallback((template) => {
+    if (template) applyTemplate(template);
+  }, [applyTemplate]);
+  useEffect(() => {
+    if (definitionId || !templateId) return;
+    let cancelled = false;
+    const loadTemplate = async () => {
+      const result = await apiCall("/api/workflows/templates");
+      if (cancelled) return;
+      const template = result.ok ? (result.result?.items || []).find((item) => item.id === templateId) : void 0;
+      if (template) {
+        applyTemplate(template);
+      } else {
+        flash(t("workflows.templates.gallery.notFound", "Template not found"), "error");
+      }
+    };
+    void loadTemplate();
+    return () => {
+      cancelled = true;
+    };
+  }, [definitionId, templateId, applyTemplate, t]);
   const handleClear = useCallback(() => {
     if (nodes.length > 0 || edges.length > 0 || workflowId || workflowName) {
       setShowClearConfirm(true);
@@ -490,9 +2164,13 @@ function VisualEditorPage() {
     setEffectiveFrom("");
     setEffectiveTo("");
     setTriggers([]);
+    setContextSchema(void 0);
+    setDefinitionIo(void 0);
+    setLoadedMetadata(null);
     setShowClearConfirm(false);
+    resetHistory();
     flash("Canvas cleared", "success");
-  }, []);
+  }, [resetHistory]);
   useSetCurrentRecordInjectionContext(
     buildRecordInjectionContext({
       resourceKind: "workflows.definition",
@@ -515,7 +2193,10 @@ function VisualEditorPage() {
     icon,
     effectiveFrom,
     effectiveTo,
-    triggers
+    triggers,
+    contextSchema,
+    interpolation,
+    errorHandler
   };
   const metadataHandlers = {
     setWorkflowId,
@@ -528,24 +2209,345 @@ function VisualEditorPage() {
     setIcon,
     setEffectiveFrom,
     setEffectiveTo,
-    setTriggers
+    setTriggers,
+    setContextSchema,
+    setInterpolation,
+    setErrorHandler: (next) => setErrorHandler(next ?? void 0)
   };
+  const metadataIncomplete = !isCodeOnly && (!workflowId || !workflowName);
+  const inspectorPanels = /* @__PURE__ */ jsxs(Fragment, { children: [
+    crudFormDialogsEnabled ? (
+      // Both forms are dense (Invoke-Agent, timeout, sub-editors on the step;
+      // condition, mapping and activities on the route) and the 384px docked
+      // rail made them unusable, so each opens as the wide overlay Drawer that
+      // mirrors the definition metadata drawer, with its ledger in a sticky
+      // side column.
+      /* @__PURE__ */ jsx(NodeEditDialogCrudForm, { node: selectedNode, isOpen: showNodeDialog, onClose: () => setShowNodeDialog(false), onSave: handleSaveNode, onDelete: handleDeleteNode, ledgerEntries: nodeDialogLedgerEntries, definitionId, samples: editorSamples, onPinSample: handlePinSample, onUnpinSample: handleUnpinSample, branchingRoutes: branchingRoutesValue, onSaveBranchingRoutes: handleSaveBranchingRoutes, routeOrder: routeOrderValue, onSaveRouteOrder: handleSaveRouteOrder, onConvertType: handleConvertNodeType, variant: "overlay", wide: true })
+    ) : /* @__PURE__ */ jsx(NodeEditDialog, { node: selectedNode, isOpen: showNodeDialog, onClose: () => setShowNodeDialog(false), onSave: handleSaveNode, onDelete: handleDeleteNode }),
+    crudFormDialogsEnabled ? /* @__PURE__ */ jsx(EdgeEditDialogCrudForm, { edge: selectedEdge, isOpen: showEdgeDialog, onClose: () => setShowEdgeDialog(false), onSave: handleSaveEdge, onDelete: handleDeleteEdge, ledgerEntries: edgeDialogLedgerEntries, focusFieldId: edgeDialogFocusFieldId, variant: "overlay", wide: true }) : /* @__PURE__ */ jsx(EdgeEditDialog, { edge: selectedEdge, isOpen: showEdgeDialog, onClose: () => setShowEdgeDialog(false), onSave: handleSaveEdge, onDelete: handleDeleteEdge })
+  ] });
   const sharedDialogs = /* @__PURE__ */ jsxs(Fragment, { children: [
-    process.env.NEXT_PUBLIC_WORKFLOW_CRUDFORM_ENABLED === "true" ? /* @__PURE__ */ jsx(NodeEditDialogCrudForm, { node: selectedNode, isOpen: showNodeDialog, onClose: () => setShowNodeDialog(false), onSave: handleSaveNode, onDelete: handleDeleteNode }) : /* @__PURE__ */ jsx(NodeEditDialog, { node: selectedNode, isOpen: showNodeDialog, onClose: () => setShowNodeDialog(false), onSave: handleSaveNode, onDelete: handleDeleteNode }),
-    process.env.NEXT_PUBLIC_WORKFLOW_CRUDFORM_ENABLED === "true" ? /* @__PURE__ */ jsx(EdgeEditDialogCrudForm, { edge: selectedEdge, isOpen: showEdgeDialog, onClose: () => setShowEdgeDialog(false), onSave: handleSaveEdge, onDelete: handleDeleteEdge }) : /* @__PURE__ */ jsx(EdgeEditDialog, { edge: selectedEdge, isOpen: showEdgeDialog, onClose: () => setShowEdgeDialog(false), onSave: handleSaveEdge, onDelete: handleDeleteEdge }),
-    /* @__PURE__ */ jsx(Dialog, { open: showClearConfirm, onOpenChange: setShowClearConfirm, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
-      /* @__PURE__ */ jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsx(DialogTitle, { children: t("workflows.visualEditor.clearTitle") }),
-        /* @__PURE__ */ jsx(DialogDescription, { children: t("workflows.visualEditor.clearDescription") })
-      ] }),
-      /* @__PURE__ */ jsxs(DialogFooter, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setShowClearConfirm(false), children: t("common.cancel", "Cancel") }),
-        /* @__PURE__ */ jsx(Button, { variant: "destructive-solid", onClick: confirmClear, children: t("common.clear", "Clear") })
-      ] })
-    ] }) })
+    inspectorsDocked ? null : inspectorPanels,
+    /* @__PURE__ */ jsx(
+      WorkflowCommandPalette,
+      {
+        open: showCommandPalette,
+        onOpenChange: setShowCommandPalette,
+        commands: commandPaletteCommands
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DefinitionMetadataDrawer,
+      {
+        open: metadataOpen,
+        onOpenChange: handleMetadataOpenChange,
+        focusSection: metadataFocusSection,
+        definitionId,
+        readOnly: isCodeOnly,
+        metadata,
+        handlers: metadataHandlers,
+        errorHandlerStepOptions,
+        onSave: () => {
+          void handleSave();
+        },
+        isSaving
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TriggersDialog,
+      {
+        open: triggersDialogOpen,
+        onOpenChange: setTriggersDialogOpen,
+        triggers,
+        onSave: setTriggers
+      }
+    ),
+    (() => {
+      const edge = activityEdit ? edges.find((candidate) => candidate.id === activityEdit.edgeId) ?? null : null;
+      const activities = edge?.data?.activities ?? [];
+      const activity = activityEdit ? activities.find((item) => item.activityId === activityEdit.activityId) ?? null : null;
+      const labelFor = (nodeId) => nodes.find((node) => node.id === nodeId)?.data?.label ?? nodeId;
+      const routeLabel = edge ? `${labelFor(edge.source)} \u2192 ${labelFor(edge.target)}` : void 0;
+      return /* @__PURE__ */ jsx(
+        ActivityEditDialog,
+        {
+          open: !!activity,
+          onOpenChange: (open) => {
+            if (!open) setActivityEdit(null);
+          },
+          activity,
+          routeLabel,
+          onSave: (updated) => {
+            if (!activityEdit) return;
+            handleSaveEdge(activityEdit.edgeId, {
+              activities: activities.map((item) => item.activityId === updated.activityId ? updated : item)
+            });
+          },
+          onRemove: () => {
+            if (!activityEdit) return;
+            handleSaveEdge(activityEdit.edgeId, {
+              activities: activities.filter((item) => item.activityId !== activityEdit.activityId)
+            });
+          },
+          onOpenFullTransition: () => {
+            if (activityEdit) handleRouteChipOpen(activityEdit.edgeId, "activities");
+          }
+        }
+      );
+    })(),
+    /* @__PURE__ */ jsx(
+      WorkflowCodeView,
+      {
+        isOpen: showCodeView,
+        onClose: handleCloseCodeView,
+        definitionJson: codeViewJson,
+        issues: codeViewIssues,
+        onCopy: () => {
+          void handleCopyDefinitionJson();
+        },
+        onPasteSubgraph: () => {
+          void handlePaste();
+        },
+        canPaste: !isCodeOnly,
+        onIssueClick: handleProblemClick,
+        draftText: codeDraftText,
+        onDraftChange: setCodeDraft,
+        onApply: handleApplyCodeDraft,
+        onRevert: handleRevertCodeDraft,
+        draftStatus: codeDraftStatus,
+        severityByLine: codeIssueLocations.severityByLine,
+        lineByIssueId: codeIssueLocations.lineByIssueId
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      WorkflowAiDraftDialog,
+      {
+        open: showAiDraft,
+        onOpenChange: setShowAiDraft,
+        onApply: handleApplyAiDraft,
+        canvasHasContent: nodes.length > 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AnnotationEditDialog,
+      {
+        node: selectedAnnotation,
+        isOpen: showAnnotationDialog,
+        onClose: () => setShowAnnotationDialog(false),
+        onSave: handleSaveAnnotation,
+        onDelete: handleDeleteAnnotation
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TemplateGalleryDialog,
+      {
+        open: showTemplateGallery,
+        onOpenChange: setShowTemplateGallery,
+        onSelect: handleTemplateSelect
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: showClearConfirm,
+        onOpenChange: setShowClearConfirm,
+        title: t("workflows.visualEditor.clearTitle"),
+        text: t("workflows.visualEditor.clearDescription"),
+        confirmText: t("common.clear", "Clear"),
+        cancelText: t("common.cancel", "Cancel"),
+        variant: "destructive",
+        onConfirm: confirmClear
+      }
+    ),
+    /* @__PURE__ */ jsx(Drawer, { open: startOpen, onOpenChange: setStartOpen, children: /* @__PURE__ */ jsxs(
+      DrawerContent,
+      {
+        "data-testid": "workflow-start-instance-drawer",
+        closeAriaLabel: t("workflows.startInstance.close"),
+        onKeyDown: (event) => {
+          if (!(event.metaKey || event.ctrlKey) || event.key !== "Enter") return;
+          event.preventDefault();
+          event.stopPropagation();
+          if (starting) return;
+          void handleStartInstance();
+        },
+        children: [
+          /* @__PURE__ */ jsxs(DrawerHeader, { children: [
+            /* @__PURE__ */ jsx(DrawerTitle, { children: t("workflows.startInstance.title") }),
+            /* @__PURE__ */ jsx(DrawerDescription, { children: t("workflows.startInstance.description") })
+          ] }),
+          /* @__PURE__ */ jsxs(DrawerBody, { className: "space-y-3 py-2", children: [
+            startFixtureList.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-overline text-muted-foreground", children: t("workflows.fixtures.label") }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: startFixtureList.map((fixture) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-border bg-muted px-2 py-1", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "text-xs font-medium hover:underline",
+                    onClick: () => handleApplyFixture(fixture.name),
+                    children: fixture.name
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "text-xs text-muted-foreground hover:text-foreground",
+                    "aria-label": t("workflows.fixtures.delete", { name: fixture.name }),
+                    onClick: () => handleDeleteFixture(fixture.name),
+                    children: "\xD7"
+                  }
+                )
+              ] }, fixture.name)) })
+            ] }) : null,
+            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", htmlFor: "workflow-start-context", children: t("workflows.startInstance.contextLabel") }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                id: "workflow-start-context",
+                value: startContext,
+                onChange: (e) => setStartContext(e.target.value),
+                rows: 9,
+                spellCheck: false,
+                className: "font-mono text-sm"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: "workflow-fixture-name", className: "text-xs", children: t("workflows.fixtures.nameLabel") }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "workflow-fixture-name",
+                    value: fixtureName,
+                    onChange: (e) => setFixtureName(e.target.value),
+                    placeholder: t("workflows.fixtures.namePlaceholder")
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleSaveFixture, disabled: !fixtureName.trim(), children: t("workflows.fixtures.save") })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("workflows.fixtures.storageWarning") }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-md border border-border p-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: "workflow-start-dry-run", className: "text-sm font-medium", children: t("workflows.startInstance.dryRunLabel") }),
+                /* @__PURE__ */ jsx(
+                  Switch,
+                  {
+                    id: "workflow-start-dry-run",
+                    checked: startDryRun,
+                    onCheckedChange: (checked) => setStartDryRun(checked === true)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("workflows.startInstance.dryRunHint") }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: "workflow-start-step-through", className: "text-sm font-medium", children: t("workflows.startInstance.stepThroughLabel") }),
+                /* @__PURE__ */ jsx(
+                  Switch,
+                  {
+                    id: "workflow-start-step-through",
+                    checked: startStepThrough,
+                    onCheckedChange: (checked) => setStartStepThrough(checked === true)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("workflows.startInstance.stepThroughHint") })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(DrawerFooter, { children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setStartOpen(false), disabled: starting, children: t("workflows.startInstance.cancel") }),
+            /* @__PURE__ */ jsx(Button, { onClick: () => void handleStartInstance(), disabled: starting, children: starting ? /* @__PURE__ */ jsx(Spinner, { className: "h-4 w-4" }) : t("workflows.startInstance.start") })
+          ] })
+        ]
+      }
+    ) })
   ] });
+  const structuralConflictBanner = structuralConflict ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-border bg-background px-3 py-2 md:px-6 md:py-3", children: /* @__PURE__ */ jsxs(Alert, { variant: "warning", children: [
+    /* @__PURE__ */ jsx(AlertTitle, { children: t("workflows.visualEditor.editSafety.bannerTitle", "This change needs a new version") }),
+    /* @__PURE__ */ jsx(AlertDescription, { children: t(
+      "workflows.visualEditor.editSafety.bannerDescription",
+      "{count} instance(s) are still running on this version. Changing the steps or routes would re-point them mid-flight, so the change is saved to a new version instead.",
+      { count: String(structuralConflict.activeInstanceCount) }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleCreateVersion, disabled: isCreatingVersion, className: "h-8 text-xs", children: t("workflows.visualEditor.editSafety.createVersion", "Create version") }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "outline",
+          onClick: () => setStructuralConflict(null),
+          disabled: isCreatingVersion,
+          className: "h-8 text-xs",
+          children: t("workflows.visualEditor.editSafety.keepEditing", "Keep editing")
+        }
+      )
+    ] })
+  ] }) }) : null;
+  const draftRestoreBanner = pendingDraft ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-border bg-background px-3 py-2 md:px-6 md:py-3", children: /* @__PURE__ */ jsxs(Alert, { variant: "info", children: [
+    /* @__PURE__ */ jsx(AlertTitle, { children: t("workflows.visualEditor.draft.bannerTitle", "You have an unsaved draft from {time}", {
+      time: formatRelativeTime(pendingDraft.draft.updatedAt, { translate: t }) ?? ""
+    }) }),
+    pendingDraft.baseMismatch && /* @__PURE__ */ jsx(AlertDescription, { children: t("workflows.visualEditor.draft.bannerConflict", "The workflow definition has changed since this draft was made. Restoring will apply your draft over the newer version.") }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleRestoreDraft, className: "h-8 text-xs", children: t("workflows.visualEditor.draft.restore", "Restore draft") }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: handleDiscardDraft, className: "h-8 text-xs", children: t("workflows.visualEditor.draft.discard", "Discard") })
+    ] })
+  ] }) }) : null;
+  const { errors: problemErrorCount, warnings: problemWarningCount } = countIssuesBySeverity(problems);
+  const problemsPanel = showProblems && problems.length > 0 ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border bg-background px-3 py-2 md:px-6 md:py-3", children: /* @__PURE__ */ jsxs("div", { className: `rounded-lg border bg-card ${problemErrorCount > 0 ? "border-status-error-border" : "border-status-warning-border"}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => setProblemsCollapsed((collapsed) => !collapsed),
+          "aria-expanded": !problemsCollapsed,
+          className: "h-auto gap-2 p-0 text-sm font-semibold text-foreground hover:bg-transparent",
+          children: [
+            problemsCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" }),
+            t("workflows.visualEditor.problems.title", "Problems"),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-muted-foreground", children: t("workflows.visualEditor.problems.counts", "{errors} error(s) \xB7 {warnings} warning(s)", { errors: problemErrorCount, warnings: problemWarningCount }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => setShowProblems(false),
+          "aria-label": t("workflows.visualEditor.problems.dismiss", "Dismiss problems"),
+          className: "h-7 w-7 p-0",
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": "true" })
+        }
+      )
+    ] }),
+    !problemsCollapsed && /* @__PURE__ */ jsx("ul", { className: "max-h-56 overflow-y-auto border-t border-border", children: problems.map((issue) => {
+      const isNavigable = Boolean(issue.nodeId || issue.edgeId);
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          onClick: () => handleProblemClick(issue),
+          disabled: !isNavigable,
+          className: `flex h-auto w-full items-start justify-start gap-2 rounded-none px-3 py-1.5 text-left text-sm font-normal ${isNavigable ? "hover:bg-muted" : "cursor-default hover:bg-transparent"}`,
+          children: [
+            issue.severity === "error" ? /* @__PURE__ */ jsx(CircleAlert, { className: "mt-0.5 h-4 w-4 shrink-0 text-status-error-text", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(TriangleAlert, { className: "mt-0.5 h-4 w-4 shrink-0 text-status-warning-text", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-foreground", children: issue.message }),
+            issue.nodeLabel && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: issue.nodeLabel })
+          ]
+        }
+      ) }, issue.id);
+    }) })
+  ] }) }) : null;
   if (isMobile) {
     return /* @__PURE__ */ jsxs(Page, { className: "flex h-[100svh] flex-col space-y-0 overflow-hidden", children: [
+      structuralConflictBanner,
+      draftRestoreBanner,
       /* @__PURE__ */ jsx(
         MobileVisualEditor,
         {
@@ -558,500 +2560,419 @@ function VisualEditorPage() {
           onNodeClick: handleNodeClick,
           onEdgeClick: handleEdgeClick,
           onConnect: handleConnect,
+          onReconnect: handleReconnect,
           onAddNode: handleAddNode,
           onSave: handleSave,
           onValidate: handleValidate,
-          onTest: handleTest,
-          onLoadExample: handleLoadExample,
+          onStartInstance: () => setStartOpen(true),
+          onLoadExample: handleOpenTemplateGallery,
           onClear: handleClear,
           metadata,
-          metadataHandlers
+          onMetadataOpenChange: handleMetadataOpenChange
         }
       ),
       sharedDialogs,
       ConfirmDialogElement
     ] });
   }
-  return /* @__PURE__ */ jsxs(Page, { className: "space-y-0 overflow-x-hidden", children: [
-    /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-border bg-background px-3 py-2 md:px-6 md:py-3", children: /* @__PURE__ */ jsx(
-      FormHeader,
-      {
-        mode: "detail",
-        backHref: "/backend/definitions",
-        backLabel: t("workflows.definitions.backToList", "Back to definitions"),
-        title: definitionId ? workflowName || t("workflows.definitions.singular") : t("workflows.backend.definitions.visual_editor.title"),
-        subtitle: definitionId ? t("workflows.definitions.detail.summary", "Editing workflow definition") : t("workflows.definitions.create.summary", "Create and edit workflow definitions visually with a drag-and-drop interface"),
-        actionsContent: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-1 md:gap-2", children: [
-          /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              onClick: () => setShowMetadata(!showMetadata),
-              disabled: isSaving,
-              className: "h-8 px-2 text-xs",
-              "aria-label": showMetadata ? t("workflows.visualEditor.hideMetadata") : t("workflows.visualEditor.showMetadata"),
-              children: [
-                showMetadata ? /* @__PURE__ */ jsx(PanelTopClose, { className: "mr-1.5 h-4 w-4" }) : /* @__PURE__ */ jsx(PanelTopOpen, { className: "mr-1.5 h-4 w-4" }),
-                showMetadata ? t("workflows.visualEditor.hideMetadata") : t("workflows.visualEditor.showMetadata")
-              ]
-            }
-          ),
-          !isCodeOnly && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              onClick: handleLoadExample,
-              disabled: isSaving,
-              className: "h-8 text-xs",
-              children: t("workflows.visualEditor.loadExample")
-            }
-          ),
-          !isCodeOnly && /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "destructive",
-              size: "sm",
-              onClick: handleClear,
-              disabled: isSaving,
-              className: "h-8 px-2 text-xs",
-              "aria-label": t("workflows.visualEditor.clear"),
-              children: [
-                /* @__PURE__ */ jsx(Trash2, { className: "mr-1.5 h-4 w-4" }),
-                t("workflows.visualEditor.clear")
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              onClick: handleValidate,
-              disabled: isSaving,
-              className: "h-8 px-2 text-xs",
-              "aria-label": t("workflows.visualEditor.validate"),
-              children: [
-                /* @__PURE__ */ jsx(CircleQuestionMark, { className: "mr-1.5 h-4 w-4" }),
-                t("workflows.visualEditor.validate")
-              ]
-            }
-          ),
-          !isCodeOnly && /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              onClick: handleTest,
-              disabled: isSaving,
-              className: "h-8 text-xs",
-              children: [
-                /* @__PURE__ */ jsx(Play, { className: "mr-1.5 h-4 w-4" }),
-                t("workflows.visualEditor.runTest")
-              ]
-            }
-          ),
-          isCodeOverride && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              onClick: handleResetToCode,
-              disabled: isSaving,
-              className: "h-8 text-xs",
-              children: t("workflows.actions.resetToCode")
-            }
-          ),
-          isCodeOnly ? /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "sm",
-              onClick: handleCustomize,
-              disabled: isSaving,
-              className: "h-8 px-2 text-xs md:px-3",
-              children: t("workflows.actions.customize")
-            }
-          ) : /* @__PURE__ */ jsxs(
-            Button,
-            {
-              size: "sm",
-              onClick: handleSave,
-              disabled: isSaving,
-              className: "h-8 px-2 text-xs md:px-3",
-              "aria-label": isSaving ? t("workflows.mobile.saving") : definitionId ? t("workflows.common.update") : t("workflows.common.save"),
-              children: [
-                /* @__PURE__ */ jsx(Save, { className: "mr-1.5 h-4 w-4" }),
-                isSaving ? t("workflows.mobile.saving") : definitionId ? t("workflows.common.update") : t("workflows.common.save")
-              ]
-            }
-          )
-        ] })
-      }
-    ) }),
-    (isCodeOnly || isCodeOverride) && /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-b border-border bg-background px-3 py-2 md:px-6 md:py-3", children: [
-      isCodeOnly && /* @__PURE__ */ jsx(Alert, { status: "information", children: /* @__PURE__ */ jsx(AlertTitle, { children: t("workflows.source.code.readonlyBanner") }) }),
-      isCodeOverride && /* @__PURE__ */ jsx(Alert, { status: "warning", children: /* @__PURE__ */ jsx(AlertTitle, { children: t("workflows.source.code_override.banner") }) })
-    ] }),
-    showMetadata && /* @__PURE__ */ jsxs("div", { className: isCompactViewport ? "shrink-0 border-b border-border bg-background px-3 py-2 max-h-[60svh] overflow-y-auto overscroll-contain md:px-6 md:py-3" : "shrink-0 border-b border-border bg-background px-3 py-2 md:px-6 md:py-3", children: [
-      /* @__PURE__ */ jsxs("fieldset", { disabled: isCodeOnly, className: "rounded-lg border bg-card p-3 disabled:opacity-70 md:p-4", children: [
-        /* @__PURE__ */ jsx("h2", { className: "mb-3 text-xs font-semibold uppercase text-muted-foreground", children: t("workflows.visualEditor.workflowMetadata") }),
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 md:gap-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsxs(Label, { htmlFor: "workflowId", className: "text-xs", children: [
-              t("workflows.form.workflowId"),
-              " *"
-            ] }),
-            /* @__PURE__ */ jsx(
-              Input,
+  const fullBleedSideMargin = "calc(-1 * (max(0px, (100vw - var(--app-content-offset, 0px) - 1536px) / 2) + 24px))";
+  const fullBleedStyle = !isCompactViewport ? {
+    width: "calc(100vw - var(--app-content-offset, 0px))",
+    marginLeft: fullBleedSideMargin,
+    marginRight: fullBleedSideMargin
+  } : {};
+  return /* @__PURE__ */ jsxs(
+    Page,
+    {
+      className: "flex min-h-[calc(100svh-7rem)] flex-col space-y-0 overflow-x-hidden",
+      style: fullBleedStyle,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `shrink-0 border-b border-border bg-background ${focusMode ? "px-3 py-1.5 md:px-4" : "px-3 py-2 md:px-6 md:py-3"}`, children: /* @__PURE__ */ jsx(
+          FormHeader,
+          {
+            mode: "detail",
+            backHref: "/backend/definitions",
+            backLabel: t("workflows.definitions.backToList", "Back to definitions"),
+            title: definitionId ? workflowName || t("workflows.definitions.singular") : t("workflows.backend.definitions.visual_editor.title"),
+            subtitle: focusMode ? void 0 : definitionId ? t("workflows.definitions.detail.summary", "Editing workflow definition") : t("workflows.definitions.create.summary", "Create and edit workflow definitions visually with a drag-and-drop interface"),
+            actionsContent: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-1 md:gap-2", children: [
+              draftEligible && (draftSaveFailed || draftSavedLabel) && /* @__PURE__ */ jsx("span", { role: "status", className: "text-xs text-muted-foreground", children: draftSaveFailed ? t("workflows.visualEditor.draft.saveFailed", "Draft not saved") : t("workflows.visualEditor.draft.saved", "Draft saved {time}", { time: draftSavedLabel ?? "" }) }),
+              !isCodeOnly && definitionId && autosaveState !== "idle" && /* @__PURE__ */ jsx("span", { className: "mr-1 text-xs text-muted-foreground", "aria-live": "polite", children: autosaveState === "saving" ? t("workflows.visualEditor.autosaving") : t("workflows.visualEditor.autosaved") }),
+              focusMode ? (
+                // Focus mode collapses the toolbar to the essentials; the toggle
+                // stays reachable so the author can leave, and Cmd+K still opens
+                // every command.
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: toggleFocus,
+                    disabled: isSaving,
+                    className: "h-8 px-2 text-xs",
+                    "aria-label": t("workflows.visualEditor.exitFocusMode"),
+                    children: [
+                      /* @__PURE__ */ jsx(Minimize2, { className: "mr-1.5 h-4 w-4" }),
+                      t("workflows.visualEditor.exitFocusMode")
+                    ]
+                  }
+                )
+              ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: handleValidate,
+                    disabled: isSaving,
+                    className: "h-8 px-2 text-xs",
+                    "aria-label": problemErrorCount > 0 ? t("workflows.visualEditor.validateWithErrors", "{count} validation errors", { count: problemErrorCount }) : t("workflows.visualEditor.validate"),
+                    children: [
+                      problemErrorCount > 0 ? /* @__PURE__ */ jsx(CircleAlert, { className: "mr-1.5 h-4 w-4 text-destructive", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(CircleQuestionMark, { className: "mr-1.5 h-4 w-4", "aria-hidden": "true" }),
+                      t("workflows.visualEditor.validate"),
+                      problemErrorCount > 0 && /* @__PURE__ */ jsx("span", { className: "ml-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-xs font-semibold text-white", children: problemErrorCount })
+                    ]
+                  }
+                ),
+                (() => {
+                  const moreActions = [];
+                  moreActions.push({ id: "group-tools", header: t("workflows.visualEditor.menuGroups.tools", "Tools") });
+                  moreActions.push({ id: "commands", label: t("workflows.commandPalette.buttonLabel", "Commands"), icon: Command, onSelect: () => setShowCommandPalette(true) });
+                  if (!isCodeOnly) moreActions.push({ id: "ai-draft", label: t("workflows.aiDraft.toggleShort", "AI draft"), icon: Sparkles, onSelect: () => setShowAiDraft(true) });
+                  moreActions.push({ id: "group-view", header: t("workflows.visualEditor.menuGroups.view", "View") });
+                  moreActions.push({ id: "focus", label: t("workflows.visualEditor.enterFocusMode"), icon: Maximize2, onSelect: toggleFocus, disabled: isSaving });
+                  moreActions.push({ id: "settings", label: t("workflows.visualEditor.metadata.buttonLabel", "Settings"), icon: metadataIncomplete ? TriangleAlert : PanelRightOpen, onSelect: () => setMetadataOpen(true), disabled: isSaving });
+                  moreActions.push({ id: "code", label: t("workflows.visualEditor.codeView.title", "Code"), icon: Code, onSelect: () => setShowCodeView(true) });
+                  moreActions.push({ id: "group-canvas", header: t("workflows.visualEditor.menuGroups.canvas", "Canvas") });
+                  if (!isCodeOnly) moreActions.push({ id: "load-example", label: t("workflows.visualEditor.loadExample"), onSelect: handleOpenTemplateGallery, disabled: isSaving });
+                  if (!isCodeOnly) moreActions.push({ id: "auto-arrange", label: t("workflows.visualEditor.autoArrange"), icon: Network, onSelect: handleAutoArrange, disabled: isSaving || nodes.length === 0 });
+                  moreActions.push({ id: "compensation", label: t("workflows.compensation.toggleShort", "Compensation"), icon: ShieldMinus, onSelect: toggleCompensation });
+                  if (isCodeOverride) moreActions.push({ id: "reset-to-code", label: t("workflows.actions.resetToCode"), onSelect: handleResetToCode, disabled: isSaving });
+                  if (!isCodeOnly) {
+                    moreActions.push({ separator: true, id: "sep-destructive" });
+                    moreActions.push({ id: "clear", label: t("workflows.visualEditor.clear"), icon: Trash2, onSelect: handleClear, disabled: isSaving, destructive: true });
+                  }
+                  return /* @__PURE__ */ jsx(
+                    ActionsDropdown,
+                    {
+                      items: moreActions,
+                      label: t("workflows.visualEditor.more", "More"),
+                      ariaLabel: t("workflows.visualEditor.more", "More"),
+                      triggerClassName: "h-8 px-2 text-xs",
+                      triggerIcon: false,
+                      attention: metadataIncomplete
+                    }
+                  );
+                })(),
+                definitionId && /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: toggleLastRun,
+                    "aria-pressed": showLastRun,
+                    className: "h-8 px-2 text-xs",
+                    "aria-label": t("workflows.lastRun.toggle", "Show the last run on the canvas"),
+                    children: [
+                      /* @__PURE__ */ jsx(History, { className: "mr-1.5 h-4 w-4", "aria-hidden": "true" }),
+                      t("workflows.lastRun.toggleShort", "Last run"),
+                      showLastRun && lastRunOverlay.isUnavailable ? /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-muted-foreground", children: t("workflows.lastRun.never", "(never run)") }) : null
+                    ]
+                  }
+                ),
+                definitionId && /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: () => setStartOpen(true),
+                    disabled: isSaving,
+                    className: "h-8 text-xs",
+                    children: [
+                      /* @__PURE__ */ jsx(Play, { className: "mr-1.5 h-4 w-4" }),
+                      t("workflows.actions.startInstance")
+                    ]
+                  }
+                )
+              ] }),
+              isCodeOnly ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  onClick: handleCustomize,
+                  disabled: isSaving,
+                  className: "h-8 px-2 text-xs md:px-3",
+                  children: t("workflows.actions.customize")
+                }
+              ) : /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  size: "sm",
+                  onClick: handleSave,
+                  disabled: isSaving,
+                  className: "h-8 px-2 text-xs md:px-3",
+                  "aria-label": isSaving ? t("workflows.mobile.saving") : definitionId ? t("workflows.common.update") : t("workflows.common.save"),
+                  children: [
+                    /* @__PURE__ */ jsx(Save, { className: "mr-1.5 h-4 w-4" }),
+                    isSaving ? t("workflows.mobile.saving") : definitionId ? t("workflows.common.update") : t("workflows.common.save")
+                  ]
+                }
+              )
+            ] })
+          }
+        ) }),
+        (isCodeOnly || isCodeOverride) && /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-b border-border bg-background px-3 py-2 md:px-6 md:py-3", children: [
+          isCodeOnly && /* @__PURE__ */ jsx(Alert, { status: "information", children: /* @__PURE__ */ jsx(AlertTitle, { children: t("workflows.source.code.readonlyBanner") }) }),
+          isCodeOverride && /* @__PURE__ */ jsx(Alert, { status: "warning", children: /* @__PURE__ */ jsx(AlertTitle, { children: t("workflows.source.code_override.banner") }) })
+        ] }),
+        structuralConflictBanner,
+        draftRestoreBanner,
+        isCompactViewport ? /* @__PURE__ */ jsxs("div", { className: "px-3 py-3 md:px-6 md:py-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-[64svh] min-h-[360px] rounded-lg border bg-card", children: /* @__PURE__ */ jsx(
+              WorkflowGraph,
               {
-                id: "workflowId",
-                value: workflowId,
-                onChange: (e) => setWorkflowId(e.target.value),
-                placeholder: "checkout_workflow",
-                disabled: !!definitionId,
-                className: "h-8 text-sm"
+                initialNodes: nodes,
+                initialEdges: edges,
+                onNodesChange: handleNodesChange,
+                onEdgesChange: handleEdgesChange,
+                onNodeClick: handleNodeClick,
+                onEdgeClick: handleEdgeClick,
+                onConnect: handleConnect,
+                onReconnect: handleReconnect,
+                onCanvasDrop: handleCanvasDrop,
+                editable: !isCodeOnly,
+                height: "100%",
+                focusTarget,
+                nodeErrorCounts,
+                showCompensation,
+                runOverlay: lastRunOverlay.execution,
+                runAgentLabels: lastRunOverlay.agentLabels,
+                triggers,
+                definitionEnabled: enabled,
+                onOpenTriggers: handleOpenTriggers
               }
-            ),
-            definitionId && /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: t("workflows.visualEditor.readOnly") })
+            ) }),
+            nodes.length === 0 && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center px-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx("h2", { className: "mb-2 text-lg font-semibold text-foreground", children: t("workflows.visualEditor.startBuilding") }),
+              /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: t("workflows.visualEditor.tapToAddBelow") }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleOpenTemplateGallery,
+                  className: "pointer-events-auto text-sm text-primary hover:underline",
+                  children: t("workflows.visualEditor.loadExampleWorkflow")
+                }
+              )
+            ] }) })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsxs(Label, { htmlFor: "workflowName", className: "text-xs", children: [
-              t("workflows.form.workflowName"),
-              " *"
+          !isCodeOnly && /* @__PURE__ */ jsxs("div", { className: "mt-3 rounded-lg border bg-card p-3", children: [
+            /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xs font-semibold uppercase text-muted-foreground", children: t("workflows.visualEditor.stepPalette") }),
+            /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-muted-foreground", children: t("workflows.visualEditor.tapToAdd") }),
+            /* @__PURE__ */ jsx("div", { className: "flex gap-2 overflow-x-auto pb-1", children: ["start", "userTask", "automated", "invokeAgent", "waitForSignal", "waitForTimer", "subWorkflow", "end"].map((nodeType) => {
+              const Icon = NODE_TYPE_ICONS[nodeType];
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  draggable: true,
+                  onDragStart: (event) => handlePaletteStepDragStart(event, nodeType),
+                  onClick: () => handleAddNode(nodeType),
+                  className: "flex shrink-0 items-center gap-1 rounded-md border bg-background px-2 py-1 text-xs hover:bg-muted active:bg-muted/50",
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
+                    /* @__PURE__ */ jsx("span", { children: NODE_TYPE_LABELS[nodeType].title })
+                  ]
+                },
+                nodeType
+              );
+            }) })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs("div", { "data-testid": "workflow-editor-row", className: "flex min-h-0 min-w-0 flex-1 border-t border-border pl-3 md:pl-6", children: [
+          !isCodeOnly && /* @__PURE__ */ jsxs("div", { className: `${paletteCollapsed ? "w-14" : "w-48"} shrink-0 overflow-y-auto border-r border-border bg-background p-2`, children: [
+            /* @__PURE__ */ jsxs("div", { className: `mb-2 flex items-center ${paletteCollapsed ? "justify-center" : "justify-between"}`, children: [
+              !paletteCollapsed && /* @__PURE__ */ jsx("h2", { className: "px-1 text-xs font-semibold uppercase text-muted-foreground", children: t("workflows.visualEditor.stepPalette") }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: togglePaletteCollapsed,
+                  title: paletteCollapsed ? t("workflows.visualEditor.expandPalette") : t("workflows.visualEditor.collapsePalette"),
+                  "aria-label": paletteCollapsed ? t("workflows.visualEditor.expandPalette") : t("workflows.visualEditor.collapsePalette"),
+                  children: paletteCollapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
+                }
+              )
             ] }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "workflowName",
-                value: workflowName,
-                onChange: (e) => setWorkflowName(e.target.value),
-                placeholder: "Checkout Process",
-                className: "h-8 text-sm"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "category", className: "text-xs", children: t("workflows.form.category") }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "category",
-                value: category,
-                onChange: (e) => setCategory(e.target.value),
-                placeholder: "E-Commerce",
-                className: "h-8 text-sm"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1 sm:col-span-2 lg:col-span-3", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "description", className: "text-xs", children: t("workflows.form.description") }),
-            /* @__PURE__ */ jsx(
-              Textarea,
-              {
-                id: "description",
-                value: description,
-                onChange: (e) => setDescription(e.target.value),
-                placeholder: t("workflows.form.placeholders.description"),
-                rows: 2,
-                className: "min-h-[60px] text-sm"
+            !paletteCollapsed && /* @__PURE__ */ jsx("p", { className: "mb-2 px-1 text-xs text-muted-foreground", children: t("workflows.visualEditor.clickToAdd") }),
+            /* @__PURE__ */ jsx("div", { className: `flex flex-col gap-1 ${paletteCollapsed ? "items-center" : ""}`, children: PALETTE_NODE_TYPES.map((nodeType) => {
+              const Icon = NODE_TYPE_ICONS[nodeType];
+              const label = NODE_TYPE_LABELS[nodeType];
+              const tooltip = `${label.title} \u2014 ${label.description}`;
+              if (paletteCollapsed) {
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    draggable: true,
+                    onDragStart: (event) => handlePaletteStepDragStart(event, nodeType),
+                    onClick: () => handleAddNode(nodeType),
+                    title: tooltip,
+                    "aria-label": tooltip,
+                    className: "flex h-9 w-9 items-center justify-center rounded-md border hover:bg-muted",
+                    children: /* @__PURE__ */ jsx(Icon, { className: `h-4 w-4 ${NODE_TYPE_COLORS[nodeType]}` })
+                  },
+                  nodeType
+                );
               }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsxs(Label, { htmlFor: "version", className: "text-xs", children: [
-              t("workflows.form.version"),
-              " *"
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  draggable: true,
+                  onDragStart: (event) => handlePaletteStepDragStart(event, nodeType),
+                  onClick: () => handleAddNode(nodeType),
+                  title: label.description,
+                  className: "flex w-full items-center gap-2 rounded-md border px-2 py-1.5 text-left text-xs hover:bg-muted",
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { className: `h-4 w-4 shrink-0 ${NODE_TYPE_COLORS[nodeType]}` }),
+                    /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-foreground", children: label.title })
+                  ]
+                },
+                nodeType
+              );
+            }) }),
+            !paletteCollapsed && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+              /* @__PURE__ */ jsx("h2", { className: "mb-1 px-1 text-xs font-semibold uppercase text-muted-foreground", children: t("workflows.visualEditor.palette.actionsTitle", "Actions") }),
+              /* @__PURE__ */ jsx("p", { className: "mb-2 px-1 text-xs text-muted-foreground", children: t("workflows.visualEditor.palette.dragActionHint", "Drop an action onto a route to add it there") }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: activityTypeOptions.map((option) => {
+                const ActionIcon = resolveActivityIcon(option.value);
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    draggable: true,
+                    onDragStart: (event) => handlePaletteActivityDragStart(event, option.value, option.label),
+                    onClick: () => flash(t("workflows.visualEditor.palette.dragActionHint", "Drop an action onto a route to add it there"), "info"),
+                    title: t("workflows.visualEditor.palette.dragActionHint", "Drop an action onto a route to add it there"),
+                    className: "flex w-full items-center gap-2 rounded-md border px-2 py-1.5 text-left text-xs hover:bg-muted",
+                    children: [
+                      /* @__PURE__ */ jsx(ActionIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+                      /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-foreground", children: option.label })
+                    ]
+                  },
+                  option.value
+                );
+              }) })
             ] }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "version",
-                type: "number",
-                value: version,
-                onChange: (e) => setVersion(parseInt(e.target.value) || 1),
-                min: 1,
-                disabled: !!definitionId,
-                className: "h-8 text-sm"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { className: "text-xs", children: t("common.enabled", "Enabled") }),
-            /* @__PURE__ */ jsxs("div", { className: "flex h-8 items-center gap-2", children: [
-              /* @__PURE__ */ jsx(
-                Switch,
+            !paletteCollapsed && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+              /* @__PURE__ */ jsx("h2", { className: "mb-1 px-1 text-xs font-semibold uppercase text-muted-foreground", children: t("workflows.annotations.paletteTitle", "Annotations") }),
+              /* @__PURE__ */ jsx("p", { className: "mb-2 px-1 text-xs text-muted-foreground", children: t("workflows.annotations.paletteHint", "Documentation only \u2014 never executed") }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleAddAnnotation("note"),
+                    title: t("workflows.annotations.note.addHint", "Add a markdown sticky note to the canvas"),
+                    className: "flex w-full items-center gap-2 rounded-md border px-2 py-1.5 text-left text-xs hover:bg-muted",
+                    children: [
+                      /* @__PURE__ */ jsx(StickyNote, { className: "h-4 w-4 shrink-0 text-status-warning-text", "aria-hidden": "true" }),
+                      /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-foreground", children: t("workflows.annotations.note.add", "Note") })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleAddAnnotation("group"),
+                    title: t("workflows.annotations.group.addHint", "Add a named region around part of the canvas"),
+                    className: "flex w-full items-center gap-2 rounded-md border px-2 py-1.5 text-left text-xs hover:bg-muted",
+                    children: [
+                      /* @__PURE__ */ jsx(Group, { className: "h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+                      /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-foreground", children: t("workflows.annotations.group.add", "Group") })
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            !paletteCollapsed && /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
                 {
-                  id: "enabled",
-                  checked: enabled,
-                  onCheckedChange: setEnabled
+                  type: "button",
+                  onClick: () => setShowPaletteHowTo((prev) => !prev),
+                  "aria-expanded": showPaletteHowTo,
+                  className: "flex w-full items-center gap-1.5 rounded-md px-1 py-1 text-xs text-muted-foreground hover:text-foreground",
+                  children: [
+                    /* @__PURE__ */ jsx(CircleQuestionMark, { className: "h-3.5 w-3.5" }),
+                    /* @__PURE__ */ jsx("span", { children: t("workflows.visualEditor.howToUse", "How to use:") })
+                  ]
                 }
               ),
-              /* @__PURE__ */ jsx(Label, { htmlFor: "enabled", className: "cursor-pointer text-xs font-normal", children: enabled ? t("common.on", "On") : t("common.off", "Off") })
+              showPaletteHowTo && /* @__PURE__ */ jsxs(Alert, { variant: "info", className: "mt-2", children: [
+                /* @__PURE__ */ jsx(AlertTitle, { className: "text-xs", children: t("workflows.visualEditor.howToUse", "How to use:") }),
+                /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxs("ul", { className: "list-inside list-disc space-y-1 text-xs", children: [
+                  /* @__PURE__ */ jsx("li", { children: t("workflows.visualEditor.hint.addSteps", "Click step types to add them") }),
+                  /* @__PURE__ */ jsx("li", { children: t("workflows.visualEditor.hint.dragFromPalette", "Drag a step onto the canvas, or onto a route to insert it there") }),
+                  /* @__PURE__ */ jsx("li", { children: t("workflows.visualEditor.hint.dragSteps", "Drag steps to position them") }),
+                  /* @__PURE__ */ jsx("li", { children: t("workflows.visualEditor.hint.connectSteps", "Connect steps by dragging from handles") }),
+                  /* @__PURE__ */ jsx("li", { children: t("workflows.visualEditor.hint.editSteps", "Click steps and transitions to edit them") }),
+                  /* @__PURE__ */ jsx("li", { children: t("workflows.visualEditor.hint.copyPaste", "Select steps and copy, paste or duplicate them with Cmd/Ctrl+C, +V and +D") }),
+                  /* @__PURE__ */ jsx("li", { children: t("workflows.visualEditor.hint.commandPalette", "Press Cmd/Ctrl+K for every command without the mouse") }),
+                  /* @__PURE__ */ jsx("li", { children: t("workflows.visualEditor.hint.keyboardCanvas", "With a step selected: Enter opens it, Del removes it, arrows nudge it (hold Shift for bigger steps)") }),
+                  /* @__PURE__ */ jsx("li", { children: t("workflows.visualEditor.hint.validate", "Validate before saving") })
+                ] }) })
+              ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { className: "text-xs", children: t("workflows.form.tags") }),
-            /* @__PURE__ */ jsx(
-              TagsInput,
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 p-6", children: /* @__PURE__ */ jsxs("div", { className: "relative h-full min-h-[480px]", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-full rounded-lg border bg-card", children: /* @__PURE__ */ jsx(
+              WorkflowGraph,
               {
-                value: tags,
-                onChange: setTags,
-                placeholder: t("workflows.form.placeholders.tags")
+                initialNodes: nodes,
+                initialEdges: edges,
+                onNodesChange: handleNodesChange,
+                onEdgesChange: handleEdgesChange,
+                onNodeClick: handleNodeClick,
+                onEdgeClick: handleEdgeClick,
+                onConnect: handleConnect,
+                onReconnect: handleReconnect,
+                onCanvasDrop: handleCanvasDrop,
+                editable: !isCodeOnly,
+                height: "100%",
+                focusTarget,
+                nodeErrorCounts,
+                showCompensation,
+                runOverlay: lastRunOverlay.execution,
+                runAgentLabels: lastRunOverlay.agentLabels,
+                triggers,
+                definitionEnabled: enabled,
+                onOpenTriggers: handleOpenTriggers
               }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "icon", className: "text-xs", children: t("workflows.form.icon") }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "icon",
-                value: icon,
-                onChange: (e) => setIcon(e.target.value),
-                placeholder: "ShoppingCart",
-                className: "h-8 text-sm"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "effectiveFrom", className: "text-xs", children: t("workflows.form.effectiveFrom") }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "effectiveFrom",
-                type: "date",
-                value: effectiveFrom,
-                onChange: (e) => setEffectiveFrom(e.target.value),
-                className: "h-8 text-sm"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "effectiveTo", className: "text-xs", children: t("workflows.form.effectiveTo") }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "effectiveTo",
-                type: "date",
-                value: effectiveTo,
-                onChange: (e) => setEffectiveTo(e.target.value),
-                className: "h-8 text-sm"
-              }
-            )
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("fieldset", { disabled: isCodeOnly, className: "mt-3 disabled:opacity-70", children: /* @__PURE__ */ jsx(
-        DefinitionTriggersEditor,
-        {
-          value: triggers,
-          onChange: setTriggers
-        }
-      ) })
-    ] }),
-    isCompactViewport ? /* @__PURE__ */ jsxs("div", { className: "px-3 py-3 md:px-6 md:py-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative min-w-0", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-[64svh] min-h-[360px] rounded-lg border bg-card", children: /* @__PURE__ */ jsx(
-          WorkflowGraph,
-          {
-            initialNodes: nodes,
-            initialEdges: edges,
-            onNodesChange: handleNodesChange,
-            onEdgesChange: handleEdgesChange,
-            onNodeClick: handleNodeClick,
-            onEdgeClick: handleEdgeClick,
-            onConnect: handleConnect,
-            editable: !isCodeOnly,
-            height: "100%"
-          }
-        ) }),
-        nodes.length === 0 && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center px-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx("h2", { className: "mb-2 text-lg font-semibold text-foreground", children: t("workflows.visualEditor.startBuilding") }),
-          /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: t("workflows.visualEditor.tapToAddBelow") }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: handleLoadExample,
-              className: "pointer-events-auto text-sm text-primary hover:underline",
-              children: t("workflows.visualEditor.loadExampleWorkflow")
-            }
-          )
-        ] }) })
-      ] }),
-      !isCodeOnly && /* @__PURE__ */ jsxs("div", { className: "mt-3 rounded-lg border bg-card p-3", children: [
-        /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xs font-semibold uppercase text-muted-foreground", children: t("workflows.visualEditor.stepPalette") }),
-        /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-muted-foreground", children: t("workflows.visualEditor.tapToAdd") }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-2 overflow-x-auto pb-1", children: ["start", "userTask", "automated", "waitForSignal", "waitForTimer", "subWorkflow", "end"].map((nodeType) => {
-          const Icon = NODE_TYPE_ICONS[nodeType];
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => handleAddNode(nodeType),
-              className: "flex shrink-0 items-center gap-1 rounded-md border bg-background px-2 py-1 text-xs hover:bg-muted active:bg-muted/50",
-              children: [
-                /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
-                /* @__PURE__ */ jsx("span", { children: NODE_TYPE_LABELS[nodeType].title })
-              ]
-            },
-            nodeType
-          );
-        }) })
-      ] })
-    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex min-h-[72svh] min-w-0 flex-1 border-t border-border", children: [
-      !isCodeOnly && /* @__PURE__ */ jsx("div", { className: "w-[24rem] shrink-0 overflow-y-auto border-r border-border bg-background p-6", children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
-        /* @__PURE__ */ jsx("h2", { className: "mb-2 text-sm font-semibold uppercase text-muted-foreground", children: t("workflows.visualEditor.stepPalette") }),
-        /* @__PURE__ */ jsx("p", { className: "mb-4 text-xs text-muted-foreground", children: t("workflows.visualEditor.clickToAdd") }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => handleAddNode("start"),
-              className: "group relative w-full cursor-pointer rounded-xl border-2 border-border bg-background px-4 py-3 text-left transition-all hover:border-muted-foreground/30 hover:shadow-md",
-              children: [
-                /* @__PURE__ */ jsx("div", { className: `absolute right-2 top-2 ${NODE_TYPE_COLORS.start} opacity-60 transition-opacity group-hover:opacity-100`, children: (() => {
-                  const Icon = NODE_TYPE_ICONS.start;
-                  return /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" });
-                })() }),
-                /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: NODE_TYPE_LABELS.start.title }),
-                /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: NODE_TYPE_LABELS.start.description })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => handleAddNode("userTask"),
-              className: "group relative w-full cursor-pointer rounded-xl border-2 border-border bg-background px-4 py-3 text-left transition-all hover:border-muted-foreground/30 hover:shadow-md",
-              children: [
-                /* @__PURE__ */ jsx("div", { className: `absolute right-2 top-2 ${NODE_TYPE_COLORS.userTask} opacity-60 transition-opacity group-hover:opacity-100`, children: (() => {
-                  const Icon = NODE_TYPE_ICONS.userTask;
-                  return /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" });
-                })() }),
-                /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: NODE_TYPE_LABELS.userTask.title }),
-                /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: NODE_TYPE_LABELS.userTask.description })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => handleAddNode("automated"),
-              className: "group relative w-full cursor-pointer rounded-xl border-2 border-border bg-background px-4 py-3 text-left transition-all hover:border-muted-foreground/30 hover:shadow-md",
-              children: [
-                /* @__PURE__ */ jsx("div", { className: `absolute right-2 top-2 ${NODE_TYPE_COLORS.automated} opacity-60 transition-opacity group-hover:opacity-100`, children: (() => {
-                  const Icon = NODE_TYPE_ICONS.automated;
-                  return /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" });
-                })() }),
-                /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: NODE_TYPE_LABELS.automated.title }),
-                /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: NODE_TYPE_LABELS.automated.description })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => handleAddNode("waitForSignal"),
-              className: "group relative w-full cursor-pointer rounded-xl border-2 border-border bg-background px-4 py-3 text-left transition-all hover:border-muted-foreground/30 hover:shadow-md",
-              children: [
-                /* @__PURE__ */ jsx("div", { className: `absolute right-2 top-2 ${NODE_TYPE_COLORS.waitForSignal} opacity-60 transition-opacity group-hover:opacity-100`, children: (() => {
-                  const Icon = NODE_TYPE_ICONS.waitForSignal;
-                  return /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" });
-                })() }),
-                /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: NODE_TYPE_LABELS.waitForSignal.title }),
-                /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: NODE_TYPE_LABELS.waitForSignal.description })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => handleAddNode("waitForTimer"),
-              className: "group relative w-full cursor-pointer rounded-xl border-2 border-border bg-background px-4 py-3 text-left transition-all hover:border-muted-foreground/30 hover:shadow-md",
-              children: [
-                /* @__PURE__ */ jsx("div", { className: `absolute right-2 top-2 ${NODE_TYPE_COLORS.waitForTimer} opacity-60 transition-opacity group-hover:opacity-100`, children: (() => {
-                  const Icon = NODE_TYPE_ICONS.waitForTimer;
-                  return /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" });
-                })() }),
-                /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: NODE_TYPE_LABELS.waitForTimer.title }),
-                /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: NODE_TYPE_LABELS.waitForTimer.description })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => handleAddNode("subWorkflow"),
-              className: "group relative w-full cursor-pointer rounded-xl border-2 border-border bg-background px-4 py-3 text-left transition-all hover:border-muted-foreground/30 hover:shadow-md",
-              children: [
-                /* @__PURE__ */ jsx("div", { className: `absolute right-2 top-2 ${NODE_TYPE_COLORS.subWorkflow} opacity-60 transition-opacity group-hover:opacity-100`, children: (() => {
-                  const Icon = NODE_TYPE_ICONS.subWorkflow;
-                  return /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" });
-                })() }),
-                /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: NODE_TYPE_LABELS.subWorkflow.title }),
-                /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: NODE_TYPE_LABELS.subWorkflow.description })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => handleAddNode("end"),
-              className: "group relative w-full cursor-pointer rounded-xl border-2 border-border bg-background px-4 py-3 text-left transition-all hover:border-muted-foreground/30 hover:shadow-md",
-              children: [
-                /* @__PURE__ */ jsx("div", { className: `absolute right-2 top-2 ${NODE_TYPE_COLORS.end} opacity-60 transition-opacity group-hover:opacity-100`, children: (() => {
-                  const Icon = NODE_TYPE_ICONS.end;
-                  return /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" });
-                })() }),
-                /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: NODE_TYPE_LABELS.end.title }),
-                /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: NODE_TYPE_LABELS.end.description })
-              ]
-            }
-          )
+            ) }),
+            nodes.length === 0 && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center px-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xl font-semibold text-foreground", children: t("workflows.visualEditor.startBuilding") }),
+              /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: t("workflows.visualEditor.clickToAddFromPalette") }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleOpenTemplateGallery,
+                  className: "pointer-events-auto text-sm text-primary hover:underline",
+                  children: t("workflows.visualEditor.loadExampleWorkflow")
+                }
+              )
+            ] }) })
+          ] }) }),
+          inspectorsDocked ? inspectorPanels : null
         ] }),
-        /* @__PURE__ */ jsxs(Alert, { status: "information", className: "mt-6", children: [
-          /* @__PURE__ */ jsx(AlertTitle, { className: "text-xs", children: t("workflows.visualEditor.howToUse", "How to use:") }),
-          /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxs("ul", { className: "list-inside list-disc space-y-1 text-xs", children: [
-            /* @__PURE__ */ jsx("li", { children: t("workflows.visualEditor.hint.addSteps", "Click step types to add them") }),
-            /* @__PURE__ */ jsx("li", { children: t("workflows.visualEditor.hint.dragSteps", "Drag steps to position them") }),
-            /* @__PURE__ */ jsx("li", { children: t("workflows.visualEditor.hint.connectSteps", "Connect steps by dragging from handles") }),
-            /* @__PURE__ */ jsx("li", { children: t("workflows.visualEditor.hint.editSteps", "Click steps and transitions to edit them") }),
-            /* @__PURE__ */ jsx("li", { children: t("workflows.visualEditor.hint.validate", "Validate before saving") })
-          ] }) })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 p-6", children: /* @__PURE__ */ jsxs("div", { className: "relative h-[72svh] min-h-[640px]", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-full rounded-lg border bg-card", children: /* @__PURE__ */ jsx(
-          WorkflowGraph,
-          {
-            initialNodes: nodes,
-            initialEdges: edges,
-            onNodesChange: handleNodesChange,
-            onEdgesChange: handleEdgesChange,
-            onNodeClick: handleNodeClick,
-            onEdgeClick: handleEdgeClick,
-            onConnect: handleConnect,
-            editable: !isCodeOnly,
-            height: "100%"
-          }
-        ) }),
-        nodes.length === 0 && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center px-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xl font-semibold text-foreground", children: t("workflows.visualEditor.startBuilding") }),
-          /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: t("workflows.visualEditor.clickToAddFromPalette") }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: handleLoadExample,
-              className: "pointer-events-auto text-sm text-primary hover:underline",
-              children: t("workflows.visualEditor.loadExampleWorkflow")
-            }
-          )
-        ] }) })
-      ] }) })
-    ] }),
-    sharedDialogs,
-    ConfirmDialogElement
-  ] });
+        problemsPanel,
+        sharedDialogs,
+        ConfirmDialogElement
+      ]
+    }
+  );
 }
 function getDefaultLabel(nodeType) {
   const labels = {
@@ -1061,7 +2982,11 @@ function getDefaultLabel(nodeType) {
     automated: "New Automated Task",
     decision: "Decision Point",
     waitForSignal: "Wait for Signal",
-    waitForTimer: "Wait for Timer"
+    waitForTimer: "Wait for Timer",
+    waitForCondition: "Wait for Condition",
+    invokeAgent: "Invoke Agent",
+    ifElse: "If / Else",
+    switch: "Switch"
   };
   return labels[nodeType] || "New Step";
 }
@@ -1073,7 +2998,11 @@ function getDefaultBadge(nodeType) {
     automated: "Automated",
     decision: "Decision",
     waitForSignal: "Wait for Signal",
-    waitForTimer: "Wait for Timer"
+    waitForTimer: "Wait for Timer",
+    waitForCondition: "Wait for Condition",
+    invokeAgent: "Invoke Agent",
+    ifElse: "If / Else",
+    switch: "Switch"
   };
   return badges[nodeType] || "Task";
 }