@agentforge4j/workflow-builder-react 0.2.1

package/dist/index.js

@@ -0,0 +1,3538 @@
+// src/api/WorkflowBuilder.tsx
+import { useCallback as useCallback5, useEffect as useEffect3, useMemo as useMemo4, useRef, useState as useState6 } from "react";
+
+// src/canvas/WorkflowCanvas.tsx
+import "@xyflow/react/dist/style.css";
+
+// src/copy/workflow-terminology.ts
+var NODE_LABELS = {
+  ASK_USER: "Ask a Question",
+  AI_STEP: "AI Step",
+  AI_DEBATE: "AI with Tools",
+  DECISION: "Decision",
+  REPEAT: "Loop / Repeat",
+  REUSE_WORKFLOW: "Reuse Existing Workflow",
+  LOAD_RESOURCE: "Load External Resource",
+  STOP: "Stop with Error",
+  RETRY: "Retry Previous Step",
+  SAVE_RESULT: "Save Result"
+};
+var NODE_DESCRIPTIONS = {
+  ASK_USER: "Collect input from the person running the workflow.",
+  AI_STEP: "Run an AI prompt and capture its output.",
+  AI_DEBATE: "Run an AI step that can call tools and external resources.",
+  DECISION: "Choose a path based on a condition.",
+  REPEAT: "Repeat a section of the workflow.",
+  REUSE_WORKFLOW: "Run another workflow as a step.",
+  LOAD_RESOURCE: "Reference an external resource (data, API, document).",
+  STOP: "Stop the workflow with an error message.",
+  RETRY: "Retry an earlier step.",
+  SAVE_RESULT: "Save the workflow's result."
+};
+var ACTION_LABELS = {
+  validate: "Check Workflow",
+  validating: "Checking...",
+  clientValidation: "Workflow Problems",
+  serverValidation: "Server Problems",
+  reuseWorkflow: "Reuse Existing Workflow",
+  saveDraft: "Save draft",
+  save: "Save",
+  saving: "Saving\u2026",
+  run: "Run",
+  running: "Running\u2026",
+  publish: "Publish",
+  publishing: "Publishing\u2026",
+  import: "Import",
+  importing: "Importing\u2026",
+  export: "Export",
+  exporting: "Exporting\u2026",
+  install: "Install",
+  downloadBundle: "Download bundle",
+  looksGood: "Looks good",
+  thingsToFix: (count) => count === 1 ? "1 thing to fix" : `${count} things to fix`,
+  unsavedChanges: "Unsaved changes",
+  upToDate: "Up to date",
+  validationIssues: "Validation issues",
+  builderTitle: "Workflow Builder",
+  aiAssist: "Build with AI",
+  guidedMode: "Guided",
+  advancedMode: "Advanced",
+  deleteNode: "Delete node",
+  selectStartStep: "Select start step",
+  fixIssue: "Fix",
+  workflowLooksGood: "Workflow looks good",
+  configureStepClose: "Configure this step and close when done.",
+  nameField: "Name",
+  typeField: "Type",
+  descriptionField: "Description",
+  questionField: "Question",
+  agentField: "Agent",
+  agentPlaceholder: "Agent id",
+  instructionsField: "Instructions",
+  approvalField: "Approval",
+  approvalAutomatic: "Automatic",
+  approvalReview: "Requires human review",
+  approvalRequired: "Requires human approval",
+  approvalHelp: "When set to 'Requires human approval', the workflow pauses here for a person to review before continuing.",
+  basicsSection: "Basics",
+  inputsOutputsSection: "Inputs / Outputs",
+  behaviorSection: "Behavior",
+  advancedSection: "Advanced",
+  addField: "Add field",
+  resultNameField: "Result name",
+  resourcePathField: "Resource path",
+  resultContextKeyField: "Result name (context key)",
+  reasonField: "Reason",
+  targetStepField: "Target step",
+  fallbackTargetField: "Fallback target",
+  maxRetriesField: "Max retries",
+  maxAttemptsField: "Max attempts",
+  primaryAgentField: "Primary agent",
+  challengerAgentField: "Challenger agent",
+  maxRoundsField: "Max rounds",
+  resolutionInstructionsField: "Resolution instructions",
+  contextKeyField: "Context key",
+  contextKeyHint: "Use the key of a value the previous step stored in context.",
+  caseLabelPlaceholder: "Case label",
+  caseValuePlaceholder: "Case value",
+  connectsToField: "Connects to",
+  addCase: "Add case",
+  defaultBranchTargetField: "Default branch target",
+  loopModeField: "Mode",
+  maxIterationsField: "Max iterations",
+  listContextKeyField: "List context key",
+  evaluatorAgentField: "Evaluator agent",
+  maxIterationsActionField: "When max iterations reached",
+  loopBodyReadOnly: "This step is inside a loop body. Nested editing is not ready yet, so its fields are read-only.",
+  advancedStepsGuided: "Advanced steps (for power users)",
+  advancedSteps: "Advanced steps",
+  addStep: "Add step",
+  chooseStepDescription: "Choose a step to add to your workflow.",
+  selectPlaceholder: "Select\u2026",
+  unsupportedBannerTitle: "Some advanced workflow parts are shown read-only because editing support is not ready yet.",
+  builderTipsTitle: "Builder tips",
+  builderTipSelect: "Select a step to configure it in the side panel.",
+  builderTipConnect: "Drag from a connection port to link steps \u2014 arrows show execution order.",
+  builderTipLibrary: "Open the step library on the left to add more steps.",
+  dismissTips: "Dismiss builder tips",
+  otherwiseBranch: "Otherwise",
+  loopBodyTitle: "Loop body",
+  loopBodyEmpty: "Connect steps inside this loop.",
+  workflowIdLabel: "Workflow id",
+  workflowNameLabel: "Workflow name",
+  workflowNamePlaceholder: "Workflow name",
+  workflowIdPlaceholder: "workflow-id",
+  modePickerTitle: "How would you like to build?",
+  modePickerGuidedHint: "A simple checklist places each step on the canvas for you.",
+  modePickerAdvancedHint: "Full step library and every setting from the start.",
+  validationDetailsDescription: "Review problems and jump to the step that needs a fix.",
+  formFieldsHint: "Form fields are listed below; each needs a label and key.",
+  fixedCountMode: "Fixed count",
+  forEachMode: "For each item",
+  agentSignalMode: "Until AI says done",
+  evaluatorMode: "Evaluator says done",
+  awaitUserAction: "Ask user",
+  failAction: "Stop with error",
+  okShort: "OK",
+  checkmarkOk: "\u2713 OK"
+};
+var BUILDER_COPY = {
+  startHere: "Start here \u2014 this step collects input from whoever runs the workflow.",
+  useTemplate: "Use a template",
+  templateHint: "Browse starter templates on the home page.",
+  modePickerTitle: ACTION_LABELS.modePickerTitle,
+  modePickerGuided: ACTION_LABELS.guidedMode,
+  modePickerGuidedHint: ACTION_LABELS.modePickerGuidedHint,
+  modePickerAdvanced: ACTION_LABELS.advancedMode,
+  modePickerAdvancedHint: ACTION_LABELS.modePickerAdvancedHint,
+  paletteTitle: "Steps",
+  expandPalette: "Expand step library",
+  collapsePalette: "Collapse step library",
+  validationDetails: "Validation details",
+  stepLibrary: "Step library"
+};
+var EDGE_LABELS = {
+  approvalGate: "Approval",
+  reviewGate: "Review"
+};
+var NODE_STATUS_LABELS = {
+  valid: "Ready",
+  hasIssues: "Needs attention",
+  needsApproval: "Approval required"
+};
+var ISSUE_REWRITES = {
+  "workflow id is required": "Add a workflow ID before validating.",
+  "workflow name is required": "Give your workflow a name.",
+  "at least one step is required": "Add at least one step to the workflow.",
+  "step name is required": "Name this step so it is easier to understand.",
+  "must be >= 1": "Use a value of 1 or more."
+};
+var GUIDED_STAGE_LABELS = {
+  addInput: "Add input",
+  configureInput: "Configure input",
+  addAiStep: "Add AI step",
+  addApproval: "Add approval",
+  requireApproval: "Require approval",
+  generateResult: "Generate result",
+  addSaveStep: "Add save step"
+};
+
+// src/canvas/edges/FlowEdge.tsx
+import { BaseEdge, EdgeLabelRenderer, getBezierPath } from "@xyflow/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function edgeStroke(transition) {
+  if (transition === "HUMAN_APPROVAL") {
+    return "var(--builder-color-edge-approval)";
+  }
+  if (transition === "HUMAN_REVIEW") {
+    return "var(--builder-color-edge-review)";
+  }
+  return "var(--builder-color-edge)";
+}
+function edgeDash(transition) {
+  if (transition === "HUMAN_REVIEW") {
+    return "6 4";
+  }
+  return void 0;
+}
+function FlowEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  selected,
+  markerEnd,
+  data
+}) {
+  const transition = data?.transition ?? null;
+  const [path, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  const stroke = edgeStroke(transition);
+  const label = transition === "HUMAN_APPROVAL" ? EDGE_LABELS.approvalGate : transition === "HUMAN_REVIEW" ? EDGE_LABELS.reviewGate : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BaseEdge,
+      {
+        id,
+        path,
+        style: {
+          strokeWidth: selected ? 2.75 : 2,
+          stroke,
+          strokeDasharray: edgeDash(transition)
+        },
+        markerEnd
+      }
+    ),
+    label ? /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "wf-edge-label nodrag nopan",
+        style: {
+          transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`
+        },
+        children: label
+      }
+    ) }) : null
+  ] });
+}
+
+// src/canvas/empty/EmptyState.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  primaryAction,
+  secondaryAction,
+  className
+}) {
+  const resolvedAction = action ?? (primaryAction || secondaryAction ? /* @__PURE__ */ jsxs2("div", { className: "wf-empty-state__actions", children: [
+    primaryAction ? /* @__PURE__ */ jsx2("button", { type: "button", className: "wf-button wf-button--primary", onClick: primaryAction.onClick, children: primaryAction.label }) : null,
+    secondaryAction ? /* @__PURE__ */ jsx2("button", { type: "button", className: "wf-button wf-button--secondary", onClick: secondaryAction.onClick, children: secondaryAction.label }) : null
+  ] }) : null);
+  return /* @__PURE__ */ jsxs2("div", { className: ["wf-empty-state", className].filter(Boolean).join(" "), children: [
+    icon ?? null,
+    /* @__PURE__ */ jsx2("p", { className: "wf-empty-state__title", children: title }),
+    description ? /* @__PURE__ */ jsx2("p", { className: "wf-empty-state__description", children: description }) : null,
+    resolvedAction
+  ] });
+}
+
+// src/model/nodeKinds.ts
+var NODE_KIND_META = {
+  ASK_USER: {
+    label: NODE_LABELS.ASK_USER,
+    description: NODE_DESCRIPTIONS.ASK_USER,
+    iconGlyph: "?"
+  },
+  AI_STEP: {
+    label: NODE_LABELS.AI_STEP,
+    description: NODE_DESCRIPTIONS.AI_STEP,
+    iconGlyph: "AI"
+  },
+  AI_DEBATE: {
+    label: NODE_LABELS.AI_DEBATE,
+    description: NODE_DESCRIPTIONS.AI_DEBATE,
+    iconGlyph: "DB",
+    advanced: true
+  },
+  DECISION: {
+    label: NODE_LABELS.DECISION,
+    description: NODE_DESCRIPTIONS.DECISION,
+    iconGlyph: "IF"
+  },
+  REPEAT: {
+    label: NODE_LABELS.REPEAT,
+    description: NODE_DESCRIPTIONS.REPEAT,
+    iconGlyph: "\u21BB"
+  },
+  REUSE_WORKFLOW: {
+    label: NODE_LABELS.REUSE_WORKFLOW,
+    description: NODE_DESCRIPTIONS.REUSE_WORKFLOW,
+    iconGlyph: "WF"
+  },
+  LOAD_RESOURCE: {
+    label: NODE_LABELS.LOAD_RESOURCE,
+    description: NODE_DESCRIPTIONS.LOAD_RESOURCE,
+    iconGlyph: "LD",
+    advanced: true
+  },
+  STOP: {
+    label: NODE_LABELS.STOP,
+    description: NODE_DESCRIPTIONS.STOP,
+    iconGlyph: "!",
+    advanced: true
+  },
+  RETRY: {
+    label: NODE_LABELS.RETRY,
+    description: NODE_DESCRIPTIONS.RETRY,
+    iconGlyph: "RT",
+    advanced: true
+  },
+  SAVE_RESULT: {
+    label: NODE_LABELS.SAVE_RESULT,
+    description: NODE_DESCRIPTIONS.SAVE_RESULT,
+    iconGlyph: "SV"
+  }
+};
+var LIBRARY_COMMON_KINDS = [
+  "ASK_USER",
+  "AI_STEP",
+  "DECISION",
+  "REPEAT",
+  "SAVE_RESULT",
+  "REUSE_WORKFLOW"
+];
+var LIBRARY_ADVANCED_KINDS = ["AI_DEBATE", "LOAD_RESOURCE", "STOP", "RETRY"];
+
+// src/canvas/nodes/NodeChrome.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function StatusBadge({ issueCount, needsApproval }) {
+  if (issueCount > 0) {
+    return /* @__PURE__ */ jsxs3("span", { className: "wf-node-badge wf-node-badge--error", children: [
+      /* @__PURE__ */ jsx3("span", { className: "wf-node-badge__glyph", "aria-hidden": true, children: "!" }),
+      NODE_STATUS_LABELS.hasIssues
+    ] });
+  }
+  if (needsApproval) {
+    return /* @__PURE__ */ jsxs3("span", { className: "wf-node-badge wf-node-badge--warning", children: [
+      /* @__PURE__ */ jsx3("span", { className: "wf-node-badge__glyph", "aria-hidden": true, children: "A" }),
+      NODE_STATUS_LABELS.needsApproval
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3("span", { className: "wf-node-badge wf-node-badge--success", children: [
+    /* @__PURE__ */ jsx3("span", { className: "wf-node-badge__glyph", "aria-hidden": true, children: "\u2713" }),
+    NODE_STATUS_LABELS.valid
+  ] });
+}
+function NodeChrome({
+  kind,
+  variant = "step",
+  title,
+  subtitle: subtitle2,
+  selected,
+  issueCount = 0,
+  needsApproval = false,
+  children,
+  className
+}) {
+  const meta = NODE_KIND_META[kind];
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: [
+        "wf-node",
+        `wf-node--${variant}`,
+        selected ? "wf-node--selected" : "",
+        className ?? ""
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "wf-node__header", children: [
+          /* @__PURE__ */ jsx3("span", { className: "wf-node__icon", "aria-hidden": true, children: meta.iconGlyph }),
+          /* @__PURE__ */ jsxs3("div", { className: "wf-node__titles", children: [
+            /* @__PURE__ */ jsx3("p", { className: "wf-node__kind", children: meta.label }),
+            /* @__PURE__ */ jsx3("p", { className: "wf-node__title", children: title })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "wf-node__body", children: [
+          /* @__PURE__ */ jsx3("p", { className: "wf-node__subtitle", children: subtitle2 }),
+          /* @__PURE__ */ jsx3(StatusBadge, { issueCount, needsApproval: needsApproval && issueCount === 0 })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+
+// src/canvas/nodes/DecisionNode.tsx
+import { Handle, Position } from "@xyflow/react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function DecisionNode({ data }) {
+  const { canvasNode: node, selected, issueCount = 0 } = data;
+  if (node.kind !== "DECISION") {
+    return null;
+  }
+  const d = node.data;
+  const meta = NODE_KIND_META.DECISION;
+  const title = d.name?.trim() || meta.label;
+  const handleClass = ["wf-handle", "wf-handle--decision", selected ? "wf-handle--selected" : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs4("div", { className: "wf-flow-node", children: [
+    /* @__PURE__ */ jsx4(Handle, { type: "target", position: Position.Top, className: handleClass }),
+    /* @__PURE__ */ jsx4(
+      NodeChrome,
+      {
+        kind: "DECISION",
+        variant: "decision",
+        title,
+        subtitle: d.contextKey?.trim() || meta.description,
+        selected,
+        issueCount,
+        children: /* @__PURE__ */ jsxs4("div", { className: "wf-node__branches", children: [
+          d.cases.map((c) => /* @__PURE__ */ jsxs4("div", { className: "wf-node__branch", children: [
+            /* @__PURE__ */ jsx4("span", { className: "wf-node__branch-label", children: c.label || c.value }),
+            /* @__PURE__ */ jsx4(Handle, { type: "source", position: Position.Right, id: c.value, className: handleClass })
+          ] }, c.value)),
+          /* @__PURE__ */ jsxs4("div", { className: "wf-node__branch", children: [
+            /* @__PURE__ */ jsx4("span", { className: "wf-node__branch-label", children: ACTION_LABELS.otherwiseBranch }),
+            /* @__PURE__ */ jsx4(Handle, { type: "source", position: Position.Right, id: "default", className: handleClass })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/canvas/nodes/LoopNode.tsx
+import { Handle as Handle2, Position as Position2 } from "@xyflow/react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function LoopNode({ data }) {
+  const { canvasNode: node, selected, issueCount = 0, loopBodyLabels } = data;
+  if (node.kind !== "REPEAT") {
+    return null;
+  }
+  const d = node.data;
+  const meta = NODE_KIND_META.REPEAT;
+  const title = d.name?.trim() || meta.label;
+  const handleClass = ["wf-handle", "wf-handle--loop", selected ? "wf-handle--selected" : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs5("div", { className: "wf-flow-node", children: [
+    /* @__PURE__ */ jsx5(Handle2, { type: "target", position: Position2.Top, className: handleClass }),
+    /* @__PURE__ */ jsx5(
+      NodeChrome,
+      {
+        kind: "REPEAT",
+        variant: "loop",
+        title,
+        subtitle: `${d.strategy} \xB7 up to ${d.maxIterations} iteration${d.maxIterations === 1 ? "" : "s"}`,
+        selected,
+        issueCount,
+        className: "wf-node--loop-wide",
+        children: /* @__PURE__ */ jsxs5("div", { className: "wf-node__loop-body", children: [
+          /* @__PURE__ */ jsx5("p", { className: "wf-node__loop-body-title", children: ACTION_LABELS.loopBodyTitle }),
+          loopBodyLabels && loopBodyLabels.length > 0 ? /* @__PURE__ */ jsx5("ul", { className: "wf-node__loop-body-list", children: loopBodyLabels.map((label, i) => /* @__PURE__ */ jsxs5("li", { className: "wf-node__loop-body-item", children: [
+            /* @__PURE__ */ jsx5("span", { className: "wf-node__loop-body-bullet", "aria-hidden": true }),
+            /* @__PURE__ */ jsx5("span", { children: label })
+          ] }, `${label}-${i}`)) }) : /* @__PURE__ */ jsx5("p", { className: "wf-node__loop-body-empty", children: ACTION_LABELS.loopBodyEmpty })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx5(Handle2, { type: "source", position: Position2.Bottom, className: handleClass })
+  ] });
+}
+
+// src/canvas/nodes/StepNode.tsx
+import { Handle as Handle3, Position as Position3 } from "@xyflow/react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function subtitle(node) {
+  switch (node.kind) {
+    case "ASK_USER": {
+      const q = node.data.question?.trim() ?? "";
+      return q.length > 48 ? `${q.slice(0, 48)}\u2026` : q || NODE_KIND_META.ASK_USER.description;
+    }
+    case "AI_STEP":
+      return node.data.agentRef?.trim() || NODE_KIND_META.AI_STEP.description;
+    case "AI_DEBATE":
+      return node.data.primaryAgentRef?.trim() || NODE_KIND_META.AI_DEBATE.description;
+    case "DECISION":
+      return node.data.contextKey?.trim() || NODE_KIND_META.DECISION.description;
+    case "REPEAT":
+      return `${node.data.strategy} \xB7 max ${node.data.maxIterations}`;
+    case "REUSE_WORKFLOW":
+      return node.data.workflowRef?.trim() || NODE_KIND_META.REUSE_WORKFLOW.description;
+    case "LOAD_RESOURCE":
+      return node.data.resourcePath?.trim() || NODE_KIND_META.LOAD_RESOURCE.description;
+    case "STOP":
+      return node.data.reason?.trim() || NODE_KIND_META.STOP.description;
+    case "RETRY":
+      return NODE_KIND_META.RETRY.description;
+    case "SAVE_RESULT":
+      return node.data.resultName?.trim() || NODE_KIND_META.SAVE_RESULT.description;
+    default:
+      return "";
+  }
+}
+function StepNode({ data }) {
+  const { canvasNode: node, selected, issueCount = 0, needsApproval = false } = data;
+  const meta = NODE_KIND_META[node.kind];
+  const title = node.data.name?.trim() || meta.label;
+  return /* @__PURE__ */ jsxs6("div", { className: "wf-flow-node", children: [
+    /* @__PURE__ */ jsx6(Handle3, { type: "target", position: Position3.Top, className: ["wf-handle", selected ? "wf-handle--selected" : ""].filter(Boolean).join(" ") }),
+    /* @__PURE__ */ jsx6(
+      NodeChrome,
+      {
+        kind: node.kind,
+        variant: "step",
+        title,
+        subtitle: subtitle(node),
+        selected,
+        issueCount,
+        needsApproval
+      }
+    ),
+    /* @__PURE__ */ jsx6(Handle3, { type: "source", position: Position3.Bottom, className: ["wf-handle", selected ? "wf-handle--selected" : ""].filter(Boolean).join(" ") })
+  ] });
+}
+
+// src/canvas/WorkflowCanvas.tsx
+import {
+  Background,
+  BackgroundVariant,
+  Controls,
+  MarkerType,
+  MiniMap,
+  NodeToolbar,
+  Position as Position4,
+  ReactFlow,
+  ReactFlowProvider,
+  applyEdgeChanges,
+  applyNodeChanges,
+  useNodesInitialized,
+  useReactFlow
+} from "@xyflow/react";
+import { useCallback, useEffect, useMemo } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var SNAP = 16;
+function nodeTransition(node) {
+  const data = node.data;
+  return data.transition ?? null;
+}
+function nodeNeedsApproval(node) {
+  return nodeTransition(node) === "HUMAN_APPROVAL";
+}
+function isStarterCanvas(model) {
+  if (model.nodes.length !== 1 || model.edges.length > 0) {
+    return false;
+  }
+  const only = model.nodes[0];
+  return only?.kind === "ASK_USER";
+}
+function toFlowNodes(model, selectedId, issueCountByBackendStepId) {
+  return model.nodes.map((n) => {
+    const loopBodyLabels = n.kind === "REPEAT" ? model.nodes.filter((c) => c.parentNode === n.id).map((c) => c.data.name?.trim() ? c.data.name.trim() : NODE_KIND_META[c.kind].label) : void 0;
+    const issueCount = n.backendStepId ? issueCountByBackendStepId[n.backendStepId] ?? 0 : 0;
+    return {
+      id: n.id,
+      type: n.kind === "DECISION" ? "decision" : n.kind === "REPEAT" ? "loop" : "step",
+      position: n.position,
+      parentId: n.parentNode,
+      extent: n.parentNode ? "parent" : void 0,
+      data: {
+        canvasNode: n,
+        selected: selectedId === n.id,
+        loopBodyLabels,
+        issueCount,
+        needsApproval: nodeNeedsApproval(n)
+      },
+      draggable: true
+    };
+  });
+}
+function toFlowEdges(model) {
+  const byId = new Map(model.nodes.map((n) => [n.id, n]));
+  return model.edges.map((e) => {
+    const source = byId.get(e.source);
+    return {
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      sourceHandle: e.sourceHandle ?? void 0,
+      type: "flow",
+      data: { transition: source ? nodeTransition(source) : null },
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        width: 16,
+        height: 16,
+        color: "var(--builder-color-edge)"
+      }
+    };
+  });
+}
+var nodeTypes = { step: StepNode, decision: DecisionNode, loop: LoopNode };
+var edgeTypes = { flow: FlowEdge };
+function WorkflowCanvasInner({
+  model,
+  onModelChange,
+  onSelectNode,
+  selectedId,
+  onAppend,
+  issueCountByBackendStepId
+}) {
+  const { screenToFlowPosition, setCenter } = useReactFlow();
+  const nodesInitialized = useNodesInitialized();
+  const showStarterHint = isStarterCanvas(model);
+  const flowNodes = useMemo(
+    () => toFlowNodes(model, selectedId, issueCountByBackendStepId),
+    [issueCountByBackendStepId, model, selectedId]
+  );
+  const flowEdges = useMemo(() => toFlowEdges(model), [model]);
+  useEffect(() => {
+    if (!selectedId || !nodesInitialized) {
+      return;
+    }
+    const node = flowNodes.find((entry) => entry.id === selectedId);
+    if (!node) {
+      return;
+    }
+    const x = node.position.x + 120;
+    const y = node.position.y + 60;
+    void setCenter(x, y, { zoom: 1.05, duration: 250 });
+  }, [flowNodes, nodesInitialized, selectedId, setCenter]);
+  const onNodesChange = useCallback(
+    (changes) => {
+      const nextFlow = applyNodeChanges(changes, flowNodes);
+      const ids = new Set(nextFlow.map((flowNode) => flowNode.id));
+      const nextNodes = model.nodes.filter((n) => ids.has(n.id)).map((n) => {
+        const fn = nextFlow.find((flowNode) => flowNode.id === n.id);
+        return {
+          ...n,
+          position: fn.position,
+          parentNode: fn.parentId
+        };
+      });
+      onModelChange({ ...model, nodes: nextNodes });
+    },
+    [flowNodes, model, onModelChange]
+  );
+  const onEdgesChange = useCallback(
+    (changes) => {
+      const nextFlow = applyEdgeChanges(changes, flowEdges);
+      onModelChange({
+        ...model,
+        edges: nextFlow.map((e) => ({
+          id: e.id,
+          source: e.source,
+          target: e.target,
+          sourceHandle: e.sourceHandle ?? null,
+          label: null
+        }))
+      });
+    },
+    [flowEdges, model, onModelChange]
+  );
+  const onNodesDelete = useCallback(
+    (deletedNodes) => {
+      if (deletedNodes.length === 0) {
+        return;
+      }
+      const deletedIds = new Set(deletedNodes.map((node) => node.id));
+      onModelChange({
+        ...model,
+        nodes: model.nodes.filter((node) => !deletedIds.has(node.id)),
+        edges: model.edges.filter((edge) => !deletedIds.has(edge.source) && !deletedIds.has(edge.target))
+      });
+      if (selectedId && deletedIds.has(selectedId)) {
+        onSelectNode(null);
+      }
+    },
+    [model, onModelChange, onSelectNode, selectedId]
+  );
+  const onEdgesDelete = useCallback(
+    (deletedEdges) => {
+      if (deletedEdges.length === 0) {
+        return;
+      }
+      const deletedIds = new Set(deletedEdges.map((edge) => edge.id));
+      onModelChange({
+        ...model,
+        edges: model.edges.filter((edge) => !deletedIds.has(edge.id))
+      });
+    },
+    [model, onModelChange]
+  );
+  const deleteSelectedNode = useCallback(() => {
+    if (!selectedId) {
+      return;
+    }
+    onModelChange({
+      ...model,
+      nodes: model.nodes.filter((node) => node.id !== selectedId),
+      edges: model.edges.filter((edge) => edge.source !== selectedId && edge.target !== selectedId)
+    });
+    onSelectNode(null);
+  }, [model, onModelChange, onSelectNode, selectedId]);
+  const onConnect = useCallback(
+    (conn) => {
+      if (!conn.source || !conn.target) {
+        return;
+      }
+      const id = `e-${conn.source}-${conn.target}-${conn.sourceHandle ?? "src"}`;
+      if (model.edges.some(
+        (e) => e.source === conn.source && e.target === conn.target && (e.sourceHandle ?? "") === (conn.sourceHandle ?? "")
+      )) {
+        return;
+      }
+      onModelChange({
+        ...model,
+        edges: [
+          ...model.edges,
+          {
+            id,
+            source: conn.source,
+            target: conn.target,
+            sourceHandle: conn.sourceHandle ?? null,
+            label: null
+          }
+        ]
+      });
+    },
+    [model, onModelChange]
+  );
+  const onDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+  }, []);
+  const onDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      const kind = e.dataTransfer.getData("application/agentforge-node-kind");
+      if (!kind) {
+        return;
+      }
+      const pos = screenToFlowPosition({ x: e.clientX, y: e.clientY });
+      onAppend(kind, pos);
+    },
+    [onAppend, screenToFlowPosition]
+  );
+  const startNode = model.nodes.find((n) => n.id === model.startNodeId) ?? model.nodes[0];
+  return /* @__PURE__ */ jsxs7("div", { className: "wf-canvas", onDragOver, onDrop, children: [
+    /* @__PURE__ */ jsxs7(
+      ReactFlow,
+      {
+        className: "wf-canvas__flow",
+        nodes: flowNodes,
+        edges: flowEdges,
+        nodeTypes,
+        edgeTypes,
+        onNodesChange,
+        onEdgesChange,
+        onNodesDelete,
+        onEdgesDelete,
+        onConnect,
+        onNodeClick: (_event, flowNode) => onSelectNode(flowNode.id),
+        onPaneClick: () => onSelectNode(null),
+        snapToGrid: true,
+        snapGrid: [SNAP, SNAP],
+        fitView: true,
+        panOnDrag: true,
+        zoomOnPinch: true,
+        panOnScroll: false,
+        zoomOnDoubleClick: true,
+        proOptions: { hideAttribution: true },
+        children: [
+          selectedId ? /* @__PURE__ */ jsx7(NodeToolbar, { nodeId: selectedId, isVisible: true, position: Position4.Top, align: "end", offset: 10, children: /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              className: "wf-button wf-button--icon wf-button--secondary",
+              "aria-label": ACTION_LABELS.deleteNode,
+              title: ACTION_LABELS.deleteNode,
+              onClick: deleteSelectedNode,
+              children: "\xD7"
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsx7(Background, { variant: BackgroundVariant.Dots, gap: SNAP, size: 1, color: "var(--builder-color-canvas-dot)" }),
+          /* @__PURE__ */ jsx7(Controls, { className: "wf-canvas__controls" }),
+          /* @__PURE__ */ jsx7(MiniMap, { pannable: true, zoomable: true, className: "wf-canvas__minimap" })
+        ]
+      }
+    ),
+    showStarterHint && startNode ? /* @__PURE__ */ jsx7("div", { className: "wf-canvas__starter-overlay", children: /* @__PURE__ */ jsxs7("div", { className: "wf-canvas__starter-card", children: [
+      /* @__PURE__ */ jsx7(
+        EmptyState,
+        {
+          icon: /* @__PURE__ */ jsx7("span", { className: "wf-canvas__starter-icon", "aria-hidden": true, children: "\u25CE" }),
+          title: BUILDER_COPY.startHere,
+          description: NODE_KIND_META.ASK_USER.description,
+          primaryAction: {
+            label: ACTION_LABELS.selectStartStep,
+            onClick: () => onSelectNode(startNode.id)
+          },
+          secondaryAction: {
+            label: BUILDER_COPY.useTemplate,
+            onClick: () => {
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx7("p", { className: "wf-canvas__starter-hint", children: /* @__PURE__ */ jsx7("button", { type: "button", className: "wf-link-button", onClick: () => {
+      }, children: BUILDER_COPY.templateHint }) })
+    ] }) }) : null
+  ] });
+}
+function WorkflowCanvas({ issueCountByBackendStepId = {}, ...props }) {
+  return /* @__PURE__ */ jsx7(ReactFlowProvider, { children: /* @__PURE__ */ jsx7(WorkflowCanvasInner, { ...props, issueCountByBackendStepId }) });
+}
+
+// src/guided/GuidedStepper.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function GuidedStepper({ stages, activeIndex, onStageAction }) {
+  return /* @__PURE__ */ jsx8("section", { className: "wf-guided-stepper wf-panel", children: /* @__PURE__ */ jsx8("ol", { className: "wf-guided-stepper__list", children: stages.map((stage, index) => {
+    const isActive = index === activeIndex && !stage.complete;
+    return /* @__PURE__ */ jsxs8("li", { className: "wf-guided-stepper__item", children: [
+      /* @__PURE__ */ jsx8(
+        "span",
+        {
+          className: [
+            "wf-guided-stepper__marker",
+            stage.complete ? "wf-guided-stepper__marker--done" : "",
+            isActive ? "wf-guided-stepper__marker--active" : ""
+          ].filter(Boolean).join(" "),
+          "aria-hidden": true,
+          children: stage.complete ? "\u2713" : "\u25CB"
+        }
+      ),
+      /* @__PURE__ */ jsx8("div", { className: "wf-guided-stepper__label", children: /* @__PURE__ */ jsxs8(
+        "span",
+        {
+          className: [
+            "wf-guided-stepper__text",
+            stage.complete ? "wf-guided-stepper__text--done" : ""
+          ].filter(Boolean).join(" "),
+          children: [
+            index + 1,
+            ". ",
+            stage.label
+          ]
+        }
+      ) }),
+      isActive && stage.actionLabel && onStageAction ? /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          className: "wf-button wf-button--secondary wf-guided-stepper__action",
+          onClick: () => onStageAction(index),
+          children: stage.actionLabel
+        }
+      ) : null
+    ] }, stage.label);
+  }) }) });
+}
+
+// src/model/mapper.ts
+import { customAlphabet } from "nanoid";
+var nanoid = customAlphabet("abcdefghijklmnopqrstuvwxyz0123456789", 10);
+function findStep(workflow, stepId) {
+  const t = stepId.trim();
+  return workflow.steps.find((s) => s.stepId.trim() === t);
+}
+function retryPolicyNone() {
+  return {
+    allowRetry: false,
+    allowRetryFromPrevious: false,
+    allowAgentSwap: false,
+    allowPromptOverride: false,
+    maxAttempts: 0
+  };
+}
+function retryPolicySimple(maxAttempts) {
+  return {
+    allowRetry: true,
+    allowRetryFromPrevious: false,
+    allowAgentSwap: false,
+    allowPromptOverride: false,
+    maxAttempts
+  };
+}
+function exportStepJson(workflow, step) {
+  return serializeStepExecutable(workflow, step);
+}
+function serializeStepExecutable(workflow, step) {
+  const cm = step.contextMapping ?? { inputKeys: [], outputKeys: [] };
+  const body = {
+    kind: "STEP",
+    stepId: step.stepId,
+    name: step.name,
+    behaviour: serializeBehaviour(workflow, step),
+    contextMapping: {
+      inputKeys: cm.inputKeys,
+      outputKeys: cm.outputKeys
+    }
+  };
+  if (step.stepPrompt?.trim()) {
+    body.stepPrompt = step.stepId;
+  }
+  return body;
+}
+function serializeBehaviour(workflow, step) {
+  switch (step.behaviourType) {
+    case "INPUT": {
+      const config = step.config;
+      return {
+        type: "INPUT",
+        artifactId: config.artifactId,
+        transition: config.transition
+      };
+    }
+    case "AGENT": {
+      const config = step.config;
+      const max = config.maxRetries ?? 0;
+      return {
+        type: "AGENT",
+        agentRef: config.agentRef,
+        transition: config.transition,
+        retryPolicy: max > 0 ? retryPolicySimple(max) : retryPolicyNone()
+      };
+    }
+    case "SPAR": {
+      const config = step.config;
+      return {
+        type: "SPAR",
+        agentRef: config.agentRef,
+        transition: config.transition,
+        retryPolicy: retryPolicyNone(),
+        sparConfig: {
+          challengerAgentId: config.challengerAgentId,
+          maxRounds: config.maxRounds,
+          resolutionPrompt: config.resolutionPrompt
+        }
+      };
+    }
+    case "BRANCH": {
+      const config = step.config;
+      const branches = {};
+      for (const [value, targetId] of Object.entries(config.branches)) {
+        const target = findStep(workflow, targetId);
+        if (!target) {
+          throw new Error(`Branch target missing: ${targetId}`);
+        }
+        branches[value] = serializeStepExecutable(workflow, target);
+      }
+      const def = findStep(workflow, config.defaultBranch);
+      if (!def) {
+        throw new Error(`Default branch target missing: ${config.defaultBranch}`);
+      }
+      return {
+        type: "BRANCH",
+        contextKey: config.contextKey,
+        branches,
+        defaultBranch: serializeStepExecutable(workflow, def)
+      };
+    }
+    case "WORKFLOW_BEHAVIOUR": {
+      const config = step.config;
+      return {
+        type: "WORKFLOW",
+        workflowRef: config.workflowRef,
+        transition: config.transition
+      };
+    }
+    case "RESOURCE": {
+      const config = step.config;
+      return {
+        type: "RESOURCE",
+        resourcePath: config.resourcePath,
+        contextKey: config.contextKey,
+        transition: config.transition
+      };
+    }
+    case "FAIL": {
+      const config = step.config;
+      return { type: "FAIL", reason: config.reason };
+    }
+    case "RETRY_PREVIOUS": {
+      const config = step.config;
+      const fallbackStep = config.fallback.trim() ? findStep(workflow, config.fallback) : void 0;
+      const fallback = fallbackStep != null ? serializeStepExecutable(workflow, fallbackStep) : serializeStepExecutable(workflow, {
+        stepId: `${step.stepId}-fallback-missing`,
+        name: "Missing fallback",
+        behaviourType: "FAIL",
+        config: { reason: "Retry fallback step was not configured." }
+      });
+      return {
+        type: "RETRY_PREVIOUS",
+        retryStepId: config.retryStepId,
+        retryMode: config.retryMode,
+        maxAttempts: config.maxAttempts,
+        fallback
+      };
+    }
+  }
+}
+function newStepId(prefix) {
+  return `${prefix}-${nanoid()}`;
+}
+function defaultNodeData(kind) {
+  switch (kind) {
+    case "ASK_USER":
+      return {
+        name: "",
+        question: "",
+        artifactItems: [
+          { id: newStepId("item"), type: "TEXT", label: "Response", key: "value", required: true }
+        ]
+      };
+    case "AI_STEP":
+      return {
+        name: "",
+        agentRef: "",
+        instructions: "",
+        transition: "AUTO",
+        maxRetries: 0
+      };
+    case "AI_DEBATE":
+      return {
+        name: "",
+        primaryAgentRef: "",
+        challengerAgentRef: "",
+        maxRounds: 2,
+        resolutionPrompt: "",
+        transition: "AUTO"
+      };
+    case "DECISION":
+      return {
+        name: "",
+        contextKey: "",
+        cases: [{ label: "Yes", value: "yes", targetNodeId: "" }],
+        defaultTargetNodeId: ""
+      };
+    case "REPEAT":
+      return {
+        name: "",
+        strategy: "FIXED_COUNT",
+        maxIterations: 3,
+        maxIterationsAction: "AWAIT_USER",
+        bodyNodeIds: []
+      };
+    case "SAVE_RESULT":
+      return { name: "", resultName: "" };
+    case "REUSE_WORKFLOW":
+      return { name: "", workflowRef: "", transition: "AUTO" };
+    case "LOAD_RESOURCE":
+      return { name: "", resourcePath: "/schema/", resultName: "", transition: "AUTO" };
+    case "STOP":
+      return { name: "", reason: "" };
+    case "RETRY":
+      return {
+        name: "",
+        targetNodeId: "",
+        maxAttempts: 3,
+        fallbackTargetNodeId: "",
+        retryMode: "SINGLE_STEP"
+      };
+  }
+}
+function nodeById(model) {
+  return new Map(model.nodes.map((n) => [n.id, n]));
+}
+function outgoing(edges, source, sourceHandle) {
+  return edges.filter((e) => e.source === source && (sourceHandle == null ? true : e.sourceHandle === sourceHandle));
+}
+function loopBodyNodeIds(model) {
+  const ids = /* @__PURE__ */ new Set();
+  for (const n of model.nodes) {
+    if (n.parentNode) {
+      const parent = model.nodes.find((p) => p.id === n.parentNode);
+      if (parent?.kind === "REPEAT") {
+        ids.add(n.id);
+      }
+    }
+  }
+  return ids;
+}
+function collectBranchNestedIds(model) {
+  const nested = /* @__PURE__ */ new Set();
+  for (const n of model.nodes) {
+    if (n.kind !== "DECISION") {
+      continue;
+    }
+    const d = n.data;
+    const mergeId = d.defaultTargetNodeId?.trim();
+    if (!mergeId) {
+      continue;
+    }
+    const visit = (start) => {
+      const q = [start];
+      const seen = /* @__PURE__ */ new Set();
+      while (q.length) {
+        const cur = q.pop();
+        if (cur === mergeId || seen.has(cur)) {
+          continue;
+        }
+        seen.add(cur);
+        nested.add(cur);
+        for (const e of outgoing(model.edges, cur)) {
+          q.push(e.target);
+        }
+      }
+    };
+    for (const c of d.cases) {
+      if (c.targetNodeId.trim()) {
+        visit(c.targetNodeId.trim());
+      }
+    }
+  }
+  return nested;
+}
+function topoMainNodeOrder(model, skip) {
+  const start = model.startNodeId;
+  if (!start || skip.has(start)) {
+    return [];
+  }
+  const nodes = model.nodes.filter((n) => !skip.has(n.id) && !n.parentNode);
+  const ids = new Set(nodes.map((n) => n.id));
+  const indeg = /* @__PURE__ */ new Map();
+  for (const id of ids) {
+    indeg.set(id, 0);
+  }
+  const adj = /* @__PURE__ */ new Map();
+  for (const id of ids) {
+    adj.set(id, []);
+  }
+  for (const e of model.edges) {
+    if (!ids.has(e.source) || !ids.has(e.target)) {
+      continue;
+    }
+    indeg.set(e.target, (indeg.get(e.target) ?? 0) + 1);
+    adj.get(e.source).push(e.target);
+  }
+  const q = [];
+  for (const [id, d] of indeg) {
+    if (d === 0) {
+      q.push(id);
+    }
+  }
+  if (!q.includes(start)) {
+    q.unshift(start);
+  }
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  while (q.length) {
+    const cur = q.shift();
+    if (seen.has(cur)) {
+      continue;
+    }
+    seen.add(cur);
+    out.push(cur);
+    for (const nxt of adj.get(cur) ?? []) {
+      const next = (indeg.get(nxt) ?? 0) - 1;
+      indeg.set(nxt, next);
+      if (next === 0) {
+        q.push(nxt);
+      }
+    }
+  }
+  for (const id of ids) {
+    if (!seen.has(id)) {
+      out.push(id);
+    }
+  }
+  return out;
+}
+function artifactFromAskUser(node, artifactId) {
+  const d = node.data;
+  const items = (d.artifactItems ?? []).map((it) => ({
+    id: it.key?.trim() || it.id,
+    type: it.type,
+    label: it.label,
+    required: it.required,
+    options: it.options
+  }));
+  return { id: artifactId, items };
+}
+function canvasNodeToStep(node, ctx) {
+  const base = (name) => ({
+    stepId: ctx.stepId,
+    name: name || "Step",
+    behaviourType: "INPUT",
+    config: { artifactId: "", transition: "AUTO" },
+    stepPrompt: "",
+    contextMapping: { inputKeys: [], outputKeys: [] }
+  });
+  switch (node.kind) {
+    case "ASK_USER": {
+      const d = node.data;
+      const artifactId = ctx.artifactIdForAsk ?? node.id;
+      return {
+        stepId: ctx.stepId,
+        name: d.name || NODE_LABELS.ASK_USER,
+        behaviourType: "INPUT",
+        config: { artifactId, transition: "AUTO" },
+        stepPrompt: "",
+        contextMapping: { inputKeys: [], outputKeys: [] }
+      };
+    }
+    case "AI_STEP": {
+      const d = node.data;
+      return {
+        stepId: ctx.stepId,
+        name: d.name || NODE_LABELS.AI_STEP,
+        behaviourType: "AGENT",
+        config: {
+          agentRef: d.agentRef,
+          transition: d.transition,
+          maxRetries: d.maxRetries
+        },
+        stepPrompt: d.instructions,
+        contextMapping: { inputKeys: [], outputKeys: [] }
+      };
+    }
+    case "AI_DEBATE": {
+      const d = node.data;
+      return {
+        stepId: ctx.stepId,
+        name: d.name || NODE_LABELS.AI_DEBATE,
+        behaviourType: "SPAR",
+        config: {
+          agentRef: d.primaryAgentRef,
+          challengerAgentId: d.challengerAgentRef,
+          maxRounds: d.maxRounds,
+          resolutionPrompt: d.resolutionPrompt,
+          transition: d.transition
+        },
+        stepPrompt: "",
+        contextMapping: { inputKeys: [], outputKeys: [] }
+      };
+    }
+    case "DECISION": {
+      const d = node.data;
+      const branches = {};
+      for (const c of d.cases) {
+        if (c.value.trim() && c.targetNodeId.trim()) {
+          branches[c.value.trim()] = c.targetNodeId.trim();
+        }
+      }
+      return {
+        stepId: ctx.stepId,
+        name: d.name || "Decision",
+        behaviourType: "BRANCH",
+        config: {
+          contextKey: d.contextKey,
+          branches,
+          defaultBranch: d.defaultTargetNodeId.trim()
+        },
+        stepPrompt: "",
+        contextMapping: { inputKeys: [], outputKeys: [] }
+      };
+    }
+    case "REUSE_WORKFLOW": {
+      const d = node.data;
+      return {
+        stepId: ctx.stepId,
+        name: d.name || NODE_LABELS.REUSE_WORKFLOW,
+        behaviourType: "WORKFLOW_BEHAVIOUR",
+        config: { workflowRef: d.workflowRef, transition: d.transition },
+        stepPrompt: "",
+        contextMapping: { inputKeys: [], outputKeys: [] }
+      };
+    }
+    case "LOAD_RESOURCE": {
+      const d = node.data;
+      return {
+        stepId: ctx.stepId,
+        name: d.name || NODE_LABELS.LOAD_RESOURCE,
+        behaviourType: "RESOURCE",
+        config: {
+          resourcePath: d.resourcePath,
+          contextKey: d.resultName,
+          transition: d.transition
+        },
+        stepPrompt: "",
+        contextMapping: { inputKeys: [], outputKeys: [] }
+      };
+    }
+    case "STOP": {
+      const d = node.data;
+      return {
+        stepId: ctx.stepId,
+        name: d.name || NODE_LABELS.STOP,
+        behaviourType: "FAIL",
+        config: { reason: d.reason },
+        stepPrompt: "",
+        contextMapping: { inputKeys: [], outputKeys: [] }
+      };
+    }
+    case "RETRY": {
+      const d = node.data;
+      return {
+        stepId: ctx.stepId,
+        name: d.name || NODE_LABELS.RETRY,
+        behaviourType: "RETRY_PREVIOUS",
+        config: {
+          retryStepId: d.targetNodeId,
+          retryMode: d.retryMode,
+          maxAttempts: d.maxAttempts,
+          fallback: d.fallbackTargetNodeId
+        },
+        stepPrompt: "",
+        contextMapping: { inputKeys: [], outputKeys: [] }
+      };
+    }
+    case "SAVE_RESULT":
+    case "REPEAT":
+      return base(node.data.name);
+    default:
+      return base("Step");
+  }
+}
+function buildCanvasToStepIdMap(model) {
+  const map = /* @__PURE__ */ new Map();
+  const prefixFor = {
+    ASK_USER: "ask-user",
+    AI_STEP: "ai-step",
+    AI_DEBATE: "ai-debate",
+    DECISION: "decision",
+    REPEAT: "repeat",
+    SAVE_RESULT: "save-result",
+    REUSE_WORKFLOW: "reuse-wf",
+    LOAD_RESOURCE: "load-res",
+    STOP: "stop",
+    RETRY: "retry"
+  };
+  for (const n of model.nodes) {
+    map.set(n.id, n.backendStepId ?? newStepId(prefixFor[n.kind] ?? "step"));
+  }
+  return map;
+}
+function buildBlueprintJsonForRepeat(model, repeatNode, canvasToStepId, artifacts) {
+  const d = repeatNode.data;
+  const byId = nodeById(model);
+  const ordered = (d.bodyNodeIds?.length ? d.bodyNodeIds : model.nodes.filter((n) => n.parentNode === repeatNode.id).map((n) => n.id)).map((id) => byId.get(id)).filter((n) => Boolean(n));
+  const innerEditable = [];
+  for (const inner of ordered) {
+    const sid = canvasToStepId.get(inner.id) ?? newStepId("inner");
+    let artifactIdForAsk;
+    if (inner.kind === "ASK_USER") {
+      artifactIdForAsk = `artifact-${sid}`;
+      artifacts[artifactIdForAsk] = artifactFromAskUser(inner, artifactIdForAsk);
+    }
+    innerEditable.push(canvasNodeToStep(inner, { stepId: sid, artifactIdForAsk }));
+  }
+  const wfInner = {
+    id: "inline",
+    name: "",
+    description: "",
+    steps: innerEditable,
+    artifacts
+  };
+  const innerSteps = innerEditable.map((s) => exportStepJson(wfInner, s));
+  const loopConfig = {
+    terminationStrategy: d.strategy,
+    maxIterations: d.maxIterations,
+    maxIterationsAction: d.maxIterationsAction
+  };
+  if (d.strategy === "FOR_EACH" && d.forEachKey?.trim()) {
+    loopConfig.forEachContextKey = d.forEachKey.trim();
+  }
+  if (d.strategy === "EVALUATOR" && d.evaluatorAgentId?.trim()) {
+    loopConfig.evaluatorAgentId = d.evaluatorAgentId.trim();
+  }
+  const blueprintId = canvasToStepId.get(repeatNode.id) ?? newStepId("repeat");
+  return {
+    kind: "BLUEPRINT",
+    blueprintId,
+    name: d.name || "Repeat",
+    behaviour: {
+      loopConfig,
+      transition: "AUTO"
+    },
+    steps: innerSteps
+  };
+}
+function canvasToWorkflow(model) {
+  const canvasToStepId = buildCanvasToStepIdMap(model);
+  const loopBodies = loopBodyNodeIds(model);
+  const branchNested = collectBranchNestedIds(model);
+  const skipForMainTopo = /* @__PURE__ */ new Set([...loopBodies, ...branchNested]);
+  const mainOrder = topoMainNodeOrder(model, skipForMainTopo);
+  const artifacts = { ...model.artifacts };
+  const steps = [];
+  const blueprintBodies = { ...model.blueprints };
+  const topLevelSchedule = [];
+  const pushStepForNode = (node) => {
+    const sid = canvasToStepId.get(node.id);
+    let artifactIdForAsk;
+    if (node.kind === "ASK_USER") {
+      artifactIdForAsk = `artifact-${sid}`;
+      artifacts[artifactIdForAsk] = artifactFromAskUser(node, artifactIdForAsk);
+    }
+    const st = canvasNodeToStep(node, { stepId: sid, artifactIdForAsk });
+    if (node.kind === "SAVE_RESULT") {
+      const prev = steps[steps.length - 1];
+      const d = node.data;
+      if (prev && d.resultName.trim()) {
+        prev.contextMapping = {
+          inputKeys: prev.contextMapping?.inputKeys ?? [],
+          outputKeys: [d.resultName.trim()]
+        };
+      }
+      return;
+    }
+    steps.push(st);
+  };
+  for (const nid of mainOrder) {
+    const node = model.nodes.find((n) => n.id === nid);
+    if (!node) {
+      continue;
+    }
+    if (node.kind === "REPEAT") {
+      const bpId = canvasToStepId.get(node.id);
+      blueprintBodies[bpId] = buildBlueprintJsonForRepeat(model, node, canvasToStepId, artifacts);
+      topLevelSchedule.push({ kind: "BLUEPRINT_REF", blueprintId: bpId });
+      continue;
+    }
+    if (node.kind === "SAVE_RESULT") {
+      pushStepForNode(node);
+      continue;
+    }
+    const idx = steps.length;
+    pushStepForNode(node);
+    topLevelSchedule.push({ kind: "STEP", stepIndex: idx });
+  }
+  for (const nid of branchNested) {
+    const node = model.nodes.find((n) => n.id === nid);
+    if (!node || node.kind === "SAVE_RESULT") {
+      continue;
+    }
+    pushStepForNode(node);
+  }
+  for (const st of steps) {
+    if (st.behaviourType === "BRANCH") {
+      const c = st.config;
+      const mapBranches = {};
+      for (const [k, targetCanvas] of Object.entries(c.branches)) {
+        const tid = canvasToStepId.get(targetCanvas);
+        mapBranches[k] = tid ?? targetCanvas;
+      }
+      const defTid = canvasToStepId.get(c.defaultBranch.trim()) ?? c.defaultBranch.trim();
+      st.config = { ...c, branches: mapBranches, defaultBranch: defTid };
+    }
+    if (st.behaviourType === "RETRY_PREVIOUS") {
+      const c = st.config;
+      const fb = canvasToStepId.get(c.fallback.trim()) ?? c.fallback.trim();
+      const rt = canvasToStepId.get(c.retryStepId.trim()) ?? c.retryStepId.trim();
+      st.config = { ...c, retryStepId: rt, fallback: fb };
+    }
+  }
+  return {
+    id: model.workflowId.trim(),
+    name: model.workflowName.trim(),
+    description: model.description.trim(),
+    steps,
+    artifacts,
+    blueprintBodies,
+    topLevelSchedule
+  };
+}
+function workflowToCanvas(workflow) {
+  const nodes = [];
+  const edges = [];
+  let y = 0;
+  const gap = 120;
+  const stepToNode = /* @__PURE__ */ new Map();
+  workflow.steps.forEach((s, i) => {
+    stepToNode.set(s.stepId, `n-${i}`);
+  });
+  for (let i = 0; i < workflow.steps.length; i++) {
+    const st = workflow.steps[i];
+    const cid = `n-${i}`;
+    let kind = "AI_STEP";
+    let data = defaultNodeData("AI_STEP");
+    if (st.behaviourType === "INPUT") {
+      kind = "ASK_USER";
+      const cfg = st.config;
+      const art = workflow.artifacts[cfg.artifactId];
+      data = {
+        name: st.name,
+        question: "",
+        artifactItems: art?.items.map((it) => ({
+          id: it.id,
+          type: it.type,
+          label: it.label,
+          key: it.id,
+          required: it.required,
+          options: it.options
+        })) ?? []
+      };
+    } else if (st.behaviourType === "AGENT") {
+      const cfg = st.config;
+      data = {
+        name: st.name,
+        agentRef: cfg.agentRef,
+        instructions: st.stepPrompt ?? "",
+        transition: cfg.transition,
+        maxRetries: cfg.maxRetries ?? 0
+      };
+    } else if (st.behaviourType === "BRANCH") {
+      kind = "DECISION";
+      const cfg = st.config;
+      data = {
+        name: st.name,
+        contextKey: cfg.contextKey,
+        cases: Object.entries(cfg.branches).map(([value, targetNodeId]) => ({
+          label: value,
+          value,
+          targetNodeId: stepToNode.get(targetNodeId) ?? ""
+        })),
+        defaultTargetNodeId: stepToNode.get(cfg.defaultBranch) ?? ""
+      };
+    } else if (st.behaviourType === "WORKFLOW_BEHAVIOUR") {
+      kind = "REUSE_WORKFLOW";
+      const cfg = st.config;
+      data = { name: st.name, workflowRef: cfg.workflowRef, transition: cfg.transition };
+    } else if (st.behaviourType === "RESOURCE") {
+      kind = "LOAD_RESOURCE";
+      const cfg = st.config;
+      data = {
+        name: st.name,
+        resourcePath: cfg.resourcePath,
+        resultName: cfg.contextKey,
+        transition: cfg.transition
+      };
+    } else if (st.behaviourType === "FAIL") {
+      kind = "STOP";
+      const cfg = st.config;
+      data = { name: st.name, reason: cfg.reason };
+    } else if (st.behaviourType === "RETRY_PREVIOUS") {
+      kind = "RETRY";
+      const cfg = st.config;
+      data = {
+        name: st.name,
+        targetNodeId: stepToNode.get(cfg.retryStepId) ?? cfg.retryStepId,
+        maxAttempts: cfg.maxAttempts,
+        fallbackTargetNodeId: stepToNode.get(cfg.fallback) ?? cfg.fallback,
+        retryMode: cfg.retryMode
+      };
+    } else if (st.behaviourType === "SPAR") {
+      kind = "AI_DEBATE";
+      const cfg = st.config;
+      data = {
+        name: st.name,
+        primaryAgentRef: cfg.agentRef,
+        challengerAgentRef: cfg.challengerAgentId,
+        maxRounds: cfg.maxRounds,
+        resolutionPrompt: cfg.resolutionPrompt,
+        transition: cfg.transition
+      };
+    }
+    nodes.push({ id: cid, backendStepId: st.stepId, kind, position: { x: 200, y }, data });
+    y += gap;
+    if (i > 0) {
+      edges.push({
+        id: `e-${i - 1}-${i}`,
+        source: `n-${i - 1}`,
+        target: cid
+      });
+    }
+  }
+  const blueprintKeys = workflow.blueprintBodies ? Object.keys(workflow.blueprintBodies) : [];
+  const unsupported = blueprintKeys.length > 0;
+  const unsupportedReasons = unsupported ? [
+    `${blueprintKeys.length} blueprint definition(s) are kept for export. The loop body is read-only here until nested editing is supported.`
+  ] : void 0;
+  return {
+    workflowId: workflow.id,
+    workflowName: workflow.name,
+    description: workflow.description,
+    startNodeId: nodes[0]?.id ?? null,
+    nodes,
+    edges,
+    artifacts: workflow.artifacts,
+    blueprints: {},
+    unsupported,
+    unsupportedReasons
+  };
+}
+
+// src/hooks/useCanvasState.ts
+import { useCallback as useCallback2, useState } from "react";
+function createInitialCanvasModel() {
+  const backendStepId = newStepId("ask-user");
+  const id = `c-${backendStepId}`;
+  return {
+    workflowId: "",
+    workflowName: "",
+    description: "",
+    startNodeId: id,
+    nodes: [
+      {
+        id,
+        backendStepId,
+        kind: "ASK_USER",
+        position: { x: 80, y: 120 },
+        data: defaultNodeData("ASK_USER")
+      }
+    ],
+    edges: [],
+    artifacts: {},
+    blueprints: {}
+  };
+}
+function useCanvasState(initialModel) {
+  const [model, setModel] = useState(initialModel);
+  const [selectedId, setSelectedId] = useState(null);
+  const [isDirty2, setIsDirty] = useState(false);
+  const markDirty = useCallback2(() => {
+    setIsDirty(true);
+  }, []);
+  const markClean = useCallback2(() => {
+    setIsDirty(false);
+  }, []);
+  const setModelFromLoad = useCallback2((next) => {
+    setModel((current) => typeof next === "function" ? next(current) : next);
+    setIsDirty(false);
+  }, []);
+  const setModelDirty = useCallback2((next) => {
+    setModel((current) => typeof next === "function" ? next(current) : next);
+    setIsDirty(true);
+  }, []);
+  const updateNodeData = useCallback2(
+    (id, partial) => {
+      setModelDirty((m) => ({
+        ...m,
+        nodes: m.nodes.map((n) => {
+          if (n.id !== id) {
+            return n;
+          }
+          return { ...n, data: { ...n.data, ...partial } };
+        })
+      }));
+    },
+    [setModelDirty]
+  );
+  const appendNode = useCallback2(
+    (kind, position) => {
+      const prefix = {
+        ASK_USER: "ask-user",
+        AI_STEP: "ai-step",
+        AI_DEBATE: "ai-debate",
+        DECISION: "decision",
+        REPEAT: "repeat",
+        SAVE_RESULT: "save-result",
+        REUSE_WORKFLOW: "reuse-wf",
+        LOAD_RESOURCE: "load-res",
+        STOP: "stop",
+        RETRY: "retry"
+      };
+      const backendStepId = newStepId(prefix[kind]);
+      const id = `c-${backendStepId}`;
+      const node = {
+        id,
+        backendStepId,
+        kind,
+        position,
+        data: defaultNodeData(kind)
+      };
+      setModelDirty((m) => ({
+        ...m,
+        nodes: [...m.nodes, node],
+        startNodeId: m.startNodeId ?? id
+      }));
+      setSelectedId(id);
+    },
+    [setModelDirty]
+  );
+  return {
+    model,
+    setModel: setModelDirty,
+    setModelFromLoad,
+    selectedId,
+    setSelectedId,
+    isDirty: isDirty2,
+    markDirty,
+    markClean,
+    updateNodeData,
+    appendNode
+  };
+}
+
+// src/hooks/useBuilderMode.ts
+import { useCallback as useCallback3, useState as useState2 } from "react";
+var BUILDER_MODE_KEY = "agentforge_builder_mode";
+function isUntouchedStarter(model) {
+  if (model.nodes.length !== 1) {
+    return false;
+  }
+  const starter = model.nodes[0];
+  if (starter.kind !== "ASK_USER") {
+    return false;
+  }
+  return !model.workflowId.trim() && !model.workflowName.trim() && !model.description.trim() && !starter.data.name.trim() && !starter.data.question.trim();
+}
+function readStoredBuilderMode() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const value = window.localStorage.getItem(BUILDER_MODE_KEY);
+  if (value === "guided" || value === "advanced") {
+    return value;
+  }
+  return null;
+}
+function useBuilderMode(model, isNewRoute) {
+  const [mode, setMode] = useState2(() => {
+    const stored = readStoredBuilderMode();
+    if (stored) {
+      return stored;
+    }
+    if (isNewRoute && isUntouchedStarter(model)) {
+      return "guided";
+    }
+    return "advanced";
+  });
+  const setAndPersistMode = useCallback3((nextMode) => {
+    setMode(nextMode);
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem(BUILDER_MODE_KEY, nextMode);
+    }
+  }, []);
+  return { mode, setMode: setAndPersistMode };
+}
+
+// src/validation/validateWorkflow.ts
+var ID_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+function hasOptions(item) {
+  if (item.type !== "SINGLE_CHOICE" && item.type !== "MULTI_CHOICE") {
+    return true;
+  }
+  return Boolean(item.options?.some((o) => o.trim().length > 0));
+}
+function collectNestedOnlyStepIds(workflow) {
+  const nested = /* @__PURE__ */ new Set();
+  for (const step of workflow.steps) {
+    if (step.behaviourType === "BRANCH") {
+      const c = step.config;
+      Object.values(c.branches).forEach((id) => {
+        if (id.trim()) {
+          nested.add(id.trim());
+        }
+      });
+      if (c.defaultBranch.trim()) {
+        nested.add(c.defaultBranch.trim());
+      }
+    }
+    if (step.behaviourType === "RETRY_PREVIOUS") {
+      const c = step.config;
+      if (c.fallback.trim()) {
+        nested.add(c.fallback.trim());
+      }
+    }
+  }
+  return nested;
+}
+function validateEditableWorkflow(workflow) {
+  const errors = {
+    workflow: {},
+    steps: {},
+    artifacts: {},
+    global: []
+  };
+  if (!workflow.id.trim()) {
+    errors.workflow.id = "Workflow id is required.";
+  } else if (!ID_PATTERN.test(workflow.id.trim())) {
+    errors.workflow.id = "Workflow id must use lowercase letters, numbers, and dashes.";
+  }
+  if (!workflow.name.trim()) {
+    errors.workflow.name = "Workflow name is required.";
+  }
+  if (workflow.steps.length === 0) {
+    errors.global.push("At least one step is required.");
+  }
+  if (workflow.topLevelSchedule && workflow.topLevelSchedule.length > 0) {
+    const nestedOnly = collectNestedOnlyStepIds(workflow);
+    workflow.topLevelSchedule.forEach((entry, scheduleIndex) => {
+      if (entry.kind === "STEP") {
+        if (!Number.isInteger(entry.stepIndex) || entry.stepIndex < 0 || entry.stepIndex >= workflow.steps.length) {
+          errors.global.push(`Top-level schedule entry ${scheduleIndex}: invalid step index ${entry.stepIndex}.`);
+        } else {
+          const st = workflow.steps[entry.stepIndex];
+          if (st && nestedOnly.has(st.stepId.trim())) {
+            errors.global.push(
+              `Top-level schedule entry ${scheduleIndex}: step "${st.stepId}" is nested-only and cannot appear in the main schedule.`
+            );
+          }
+        }
+      } else if (entry.kind === "BLUEPRINT_REF") {
+        if (!entry.blueprintId?.trim()) {
+          errors.global.push(`Top-level schedule entry ${scheduleIndex}: blueprint id is required.`);
+        }
+      }
+    });
+  }
+  const seenStepIds = /* @__PURE__ */ new Set();
+  workflow.steps.forEach((step, index) => {
+    const stepErrors = {};
+    if (!step.stepId.trim()) {
+      stepErrors.stepId = "Step id is required.";
+    } else if (!ID_PATTERN.test(step.stepId.trim())) {
+      stepErrors.stepId = "Step id must use lowercase letters, numbers, and dashes.";
+    } else if (seenStepIds.has(step.stepId.trim())) {
+      stepErrors.stepId = "Step id must be unique.";
+    } else {
+      seenStepIds.add(step.stepId.trim());
+    }
+    if (!step.name.trim()) {
+      stepErrors.name = "Step name is required.";
+    }
+    if (step.behaviourType === "INPUT") {
+      const config = step.config;
+      if (!config.artifactId.trim()) {
+        stepErrors.artifactId = "Artifact id is required for INPUT steps.";
+      } else if (!workflow.artifacts[config.artifactId]) {
+        stepErrors.artifactId = `Artifact "${config.artifactId}" does not exist.`;
+      }
+    }
+    if (step.behaviourType === "AGENT") {
+      const config = step.config;
+      if (!config.agentRef.trim()) {
+        stepErrors.agentRef = "agentRef is required.";
+      }
+    }
+    if (step.behaviourType === "SPAR") {
+      const config = step.config;
+      if (!config.agentRef.trim()) {
+        stepErrors.agentRef = "agentRef is required.";
+      }
+      if (!config.challengerAgentId.trim()) {
+        stepErrors.challengerAgentId = "challengerAgentId is required.";
+      }
+      if (!config.resolutionPrompt.trim()) {
+        stepErrors.resolutionPrompt = "resolutionPrompt is required.";
+      }
+      if (!Number.isFinite(config.maxRounds) || config.maxRounds < 1) {
+        stepErrors.maxRounds = "maxRounds must be >= 1.";
+      }
+    }
+    if (step.behaviourType === "RESOURCE") {
+      const config = step.config;
+      if (!config.resourcePath.startsWith("/schema/")) {
+        stepErrors.resourcePath = "resourcePath must start with /schema/.";
+      }
+      if (!config.contextKey.trim()) {
+        stepErrors.contextKey = "contextKey is required.";
+      }
+    }
+    if (step.behaviourType === "WORKFLOW_BEHAVIOUR") {
+      const config = step.config;
+      if (!config.workflowRef.trim()) {
+        stepErrors.workflowRef = "workflowRef is required.";
+      }
+    }
+    if (step.behaviourType === "FAIL") {
+      const config = step.config;
+      if (!config.reason.trim()) {
+        stepErrors.reason = "reason is required.";
+      }
+    }
+    if (step.behaviourType === "BRANCH") {
+      const config = step.config;
+      if (!config.contextKey.trim()) {
+        stepErrors.contextKey = "Branch context key is required.";
+      }
+      const resolveId = (id) => workflow.steps.some((s) => s.stepId.trim() === id.trim());
+      for (const [key, targetId] of Object.entries(config.branches)) {
+        if (!targetId.trim()) {
+          stepErrors[`branch-${key}`] = "Branch target step id is required.";
+        } else if (!resolveId(targetId)) {
+          stepErrors[`branch-${key}`] = `No step with id "${targetId}".`;
+        }
+      }
+      if (!config.defaultBranch.trim()) {
+        stepErrors.defaultBranch = "Default branch target step id is required.";
+      } else if (!resolveId(config.defaultBranch)) {
+        stepErrors.defaultBranch = `No step with id "${config.defaultBranch}".`;
+      }
+    }
+    if (step.behaviourType === "RETRY_PREVIOUS") {
+      const config = step.config;
+      if (!config.retryStepId.trim()) {
+        stepErrors.retryStepId = "retryStepId is required.";
+      }
+      if (!Number.isFinite(config.maxAttempts) || config.maxAttempts < 1) {
+        stepErrors.maxAttempts = "maxAttempts must be >= 1.";
+      }
+      if (config.fallback.trim() && !workflow.steps.some((s) => s.stepId.trim() === config.fallback.trim())) {
+        stepErrors.fallback = `No step with id "${config.fallback}".`;
+      }
+    }
+    if (Object.keys(stepErrors).length > 0) {
+      errors.steps[index] = stepErrors;
+    }
+  });
+  for (const [artifactId, artifact] of Object.entries(workflow.artifacts)) {
+    const artifactErrors = {};
+    if (!artifactId.trim()) {
+      artifactErrors.id = "Artifact id is required.";
+    }
+    if (artifact.items.length === 0) {
+      artifactErrors.items = "Artifact must contain at least one item.";
+    }
+    artifact.items.forEach((item, index) => {
+      if (!item.id.trim()) {
+        artifactErrors[`item-${index}-id`] = "Item id is required.";
+      }
+      if (!item.label.trim()) {
+        artifactErrors[`item-${index}-label`] = "Item label is required.";
+      }
+      if (!hasOptions(item)) {
+        artifactErrors[`item-${index}-options`] = "Choice items must include at least one option.";
+      }
+    });
+    if (Object.keys(artifactErrors).length > 0) {
+      errors.artifacts[artifactId] = artifactErrors;
+    }
+  }
+  return errors;
+}
+function toValidationResult(errors) {
+  const issues = [];
+  for (const [field, message] of Object.entries(errors.workflow)) {
+    if (message) {
+      issues.push({ path: `workflow.${field}`, message, severity: "error" });
+    }
+  }
+  for (const [index, stepErrors] of Object.entries(errors.steps)) {
+    for (const [field, message] of Object.entries(stepErrors)) {
+      if (message) {
+        issues.push({ path: `steps[${index}].${field}`, message, severity: "error" });
+      }
+    }
+  }
+  for (const [artifactId, artifactErrors] of Object.entries(errors.artifacts)) {
+    for (const [field, message] of Object.entries(artifactErrors)) {
+      if (message) {
+        issues.push({ path: `artifacts.${artifactId}.${field}`, message, severity: "error" });
+      }
+    }
+  }
+  for (const message of errors.global) {
+    issues.push({ path: "global", message, severity: "error" });
+  }
+  return { valid: issues.length === 0, issues };
+}
+function validateWorkflow(draft) {
+  return toValidationResult(validateEditableWorkflow(draft));
+}
+function validateWorkflowEditor(draft) {
+  return validateEditableWorkflow(draft);
+}
+
+// src/hooks/useWorkflowDraft.ts
+import { useCallback as useCallback4, useState as useState3 } from "react";
+function parseStepIdFromMessage(message) {
+  const m = message.match(/stepId[=:'\s]+([a-z0-9-]+)/i) ?? message.match(/step\s+['"]?([a-z0-9-]+)['"]?/i);
+  return m?.[1];
+}
+function validationToIssues(model, validation) {
+  const issues = [];
+  for (const message of Object.values(validation.workflow)) {
+    if (message) {
+      issues.push({ code: "workflow", message, stepId: parseStepIdFromMessage(message) });
+    }
+  }
+  for (const [idx, stepErrors] of Object.entries(validation.steps)) {
+    for (const message of Object.values(stepErrors)) {
+      if (message) {
+        issues.push({
+          code: "field",
+          message: `Step ${idx}: ${message}`,
+          stepId: model.nodes[Number(idx)]?.backendStepId
+        });
+      }
+    }
+  }
+  for (const message of validation.global) {
+    issues.push({ code: "global", message, stepId: void 0 });
+  }
+  return issues;
+}
+function useWorkflowDraft() {
+  const [issues, setIssues] = useState3([]);
+  const buildFromCanvas = useCallback4((model) => {
+    const workflow = canvasToWorkflow(model);
+    const validation = validateWorkflowEditor(workflow);
+    return { workflow, validation };
+  }, []);
+  const validateOnly = useCallback4(
+    (model) => {
+      const { workflow, validation } = buildFromCanvas(model);
+      const nextIssues = validationToIssues(model, validation);
+      setIssues(nextIssues);
+      return { workflow, validation, valid: nextIssues.length === 0 };
+    },
+    [buildFromCanvas]
+  );
+  return {
+    issues,
+    setIssues,
+    buildFromCanvas,
+    validateOnly
+  };
+}
+
+// src/inspector/StepConfigPanel.tsx
+import { useMemo as useMemo2 } from "react";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function TransitionField({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+    /* @__PURE__ */ jsx9("span", { className: "wf-field__label", title: ACTION_LABELS.approvalHelp, children: ACTION_LABELS.approvalField }),
+    /* @__PURE__ */ jsxs9("select", { className: "wf-input wf-select", value, onChange: (e) => onChange(e.target.value), children: [
+      /* @__PURE__ */ jsx9("option", { value: "AUTO", children: ACTION_LABELS.approvalAutomatic }),
+      /* @__PURE__ */ jsx9("option", { value: "HUMAN_REVIEW", children: ACTION_LABELS.approvalReview }),
+      /* @__PURE__ */ jsx9("option", { value: "HUMAN_APPROVAL", children: ACTION_LABELS.approvalRequired })
+    ] })
+  ] });
+}
+function Section({ title, children }) {
+  return /* @__PURE__ */ jsxs9("section", { className: "wf-inspector__section", children: [
+    /* @__PURE__ */ jsx9("h3", { className: "wf-inspector__section-title", children: title }),
+    children
+  ] });
+}
+function StepConfigPanel({
+  model,
+  selectedId,
+  mode,
+  onClose,
+  onUpdateNodeData,
+  agentCatalog
+}) {
+  const node = useMemo2(() => model.nodes.find((n) => n.id === selectedId) ?? null, [model.nodes, selectedId]);
+  const hasAgentCatalog = Boolean(agentCatalog && agentCatalog.length > 0);
+  const otherNodes = useMemo2(
+    () => model.nodes.filter((n) => n.id !== node?.id).map((n) => ({ id: n.id, label: n.data.name || NODE_KIND_META[n.kind].label })),
+    [model.nodes, node]
+  );
+  if (!node || !selectedId) {
+    return null;
+  }
+  const title = NODE_KIND_META[node.kind].label;
+  const insideLoopBody = Boolean(node.parentNode) && model.nodes.some((p) => p.id === node.parentNode && p.kind === "REPEAT");
+  const behaviorOpen = mode === "advanced";
+  const advancedOpen = mode === "advanced";
+  return /* @__PURE__ */ jsxs9("aside", { className: "wf-panel wf-inspector", role: "dialog", "aria-label": title, children: [
+    /* @__PURE__ */ jsxs9("header", { className: "wf-panel__header wf-inspector__header", children: [
+      /* @__PURE__ */ jsx9("h2", { className: "wf-panel__title", children: title }),
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          className: "wf-button wf-button--ghost wf-button--icon",
+          "aria-label": ACTION_LABELS.configureStepClose,
+          onClick: onClose,
+          children: "\xD7"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "wf-panel__body wf-inspector__body", children: [
+      insideLoopBody ? /* @__PURE__ */ jsx9("p", { className: "wf-inspector__banner", children: ACTION_LABELS.loopBodyReadOnly }) : null,
+      /* @__PURE__ */ jsxs9("fieldset", { disabled: insideLoopBody, className: "wf-inspector__fieldset", children: [
+        /* @__PURE__ */ jsxs9(Section, { title: ACTION_LABELS.basicsSection, children: [
+          /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+            /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.nameField }),
+            /* @__PURE__ */ jsx9(
+              "input",
+              {
+                className: "wf-input",
+                value: node.data.name,
+                onChange: (e) => onUpdateNodeData(node.id, { name: e.target.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs9("div", { className: "wf-inspector__grid", children: [
+            /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+              /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.typeField }),
+              /* @__PURE__ */ jsx9("input", { className: "wf-input", value: title, disabled: true })
+            ] }),
+            /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+              /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.descriptionField }),
+              /* @__PURE__ */ jsx9("input", { className: "wf-input", value: NODE_KIND_META[node.kind].description, disabled: true })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs9(Section, { title: ACTION_LABELS.inputsOutputsSection, children: [
+          node.kind === "ASK_USER" ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
+            /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+              /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.questionField }),
+              /* @__PURE__ */ jsx9(
+                "textarea",
+                {
+                  className: "wf-input wf-textarea",
+                  value: node.data.question,
+                  onChange: (e) => onUpdateNodeData(node.id, { question: e.target.value })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx9("p", { className: "wf-field__hint", children: ACTION_LABELS.formFieldsHint }),
+            node.data.artifactItems.map((item, idx) => /* @__PURE__ */ jsxs9("div", { className: "wf-inspector__card", children: [
+              /* @__PURE__ */ jsx9(
+                "select",
+                {
+                  className: "wf-input wf-select",
+                  value: item.type,
+                  onChange: (e) => {
+                    const next = [...node.data.artifactItems];
+                    next[idx] = { ...item, type: e.target.value };
+                    onUpdateNodeData(node.id, { artifactItems: next });
+                  },
+                  children: ["TEXT", "TEXT_AREA", "SINGLE_CHOICE", "MULTI_CHOICE", "BOOLEAN", "NUMBER", "DATE"].map(
+                    (t) => /* @__PURE__ */ jsx9("option", { value: t, children: t }, t)
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx9(
+                "input",
+                {
+                  className: "wf-input",
+                  placeholder: "Label",
+                  value: item.label,
+                  onChange: (e) => {
+                    const next = [...node.data.artifactItems];
+                    next[idx] = { ...item, label: e.target.value };
+                    onUpdateNodeData(node.id, { artifactItems: next });
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx9(
+                "input",
+                {
+                  className: "wf-input",
+                  placeholder: "Key",
+                  value: item.key,
+                  onChange: (e) => {
+                    const next = [...node.data.artifactItems];
+                    next[idx] = { ...item, key: e.target.value };
+                    onUpdateNodeData(node.id, { artifactItems: next });
+                  }
+                }
+              )
+            ] }, item.id)),
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                className: "wf-button wf-button--secondary",
+                onClick: () => onUpdateNodeData(node.id, {
+                  artifactItems: [
+                    ...node.data.artifactItems,
+                    {
+                      id: `item-${node.data.artifactItems.length}`,
+                      type: "TEXT",
+                      label: "",
+                      key: "",
+                      required: false
+                    }
+                  ]
+                }),
+                children: ACTION_LABELS.addField
+              }
+            )
+          ] }) : null,
+          node.kind === "SAVE_RESULT" ? /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+            /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.resultNameField }),
+            /* @__PURE__ */ jsx9(
+              "input",
+              {
+                className: "wf-input",
+                value: node.data.resultName,
+                onChange: (e) => onUpdateNodeData(node.id, { resultName: e.target.value })
+              }
+            )
+          ] }) : null,
+          node.kind === "LOAD_RESOURCE" ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
+            /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+              /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.resourcePathField }),
+              /* @__PURE__ */ jsx9(
+                "input",
+                {
+                  className: "wf-input",
+                  value: node.data.resourcePath,
+                  onChange: (e) => onUpdateNodeData(node.id, { resourcePath: e.target.value })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+              /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.resultContextKeyField }),
+              /* @__PURE__ */ jsx9(
+                "input",
+                {
+                  className: "wf-input",
+                  value: node.data.resultName,
+                  onChange: (e) => onUpdateNodeData(node.id, { resultName: e.target.value })
+                }
+              )
+            ] })
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs9("details", { className: "wf-inspector__details", open: behaviorOpen, children: [
+          /* @__PURE__ */ jsx9("summary", { className: "wf-inspector__details-summary", children: ACTION_LABELS.behaviorSection }),
+          /* @__PURE__ */ jsxs9("div", { className: "wf-inspector__details-body", children: [
+            node.kind === "AI_STEP" ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
+              /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+                /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.agentField }),
+                hasAgentCatalog ? /* @__PURE__ */ jsxs9(
+                  "select",
+                  {
+                    className: "wf-input wf-select",
+                    value: node.data.agentRef,
+                    onChange: (e) => onUpdateNodeData(node.id, { agentRef: e.target.value }),
+                    children: [
+                      /* @__PURE__ */ jsx9("option", { value: "", children: ACTION_LABELS.selectPlaceholder }),
+                      agentCatalog.map((a) => /* @__PURE__ */ jsx9("option", { value: a.id, children: a.name }, a.id))
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx9(
+                  "input",
+                  {
+                    className: "wf-input",
+                    value: node.data.agentRef,
+                    placeholder: ACTION_LABELS.agentPlaceholder,
+                    onChange: (e) => onUpdateNodeData(node.id, { agentRef: e.target.value })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+                /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.instructionsField }),
+                /* @__PURE__ */ jsx9(
+                  "textarea",
+                  {
+                    className: "wf-input wf-textarea wf-textarea--tall",
+                    value: node.data.instructions,
+                    onChange: (e) => onUpdateNodeData(node.id, { instructions: e.target.value })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx9(
+                TransitionField,
+                {
+                  value: node.data.transition,
+                  onChange: (value) => onUpdateNodeData(node.id, { transition: value })
+                }
+              )
+            ] }) : null,
+            node.kind === "AI_DEBATE" ? /* @__PURE__ */ jsx9(DebateForm, { node, agentCatalog, onUpdate: onUpdateNodeData }) : null,
+            node.kind === "DECISION" ? /* @__PURE__ */ jsx9(DecisionForm, { node, otherNodes, onUpdate: onUpdateNodeData }) : null,
+            node.kind === "REPEAT" ? /* @__PURE__ */ jsx9(RepeatForm, { node, onUpdate: onUpdateNodeData }) : null,
+            node.kind === "REUSE_WORKFLOW" ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
+              /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+                /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.reuseWorkflow }),
+                /* @__PURE__ */ jsx9(
+                  "input",
+                  {
+                    className: "wf-input",
+                    value: node.data.workflowRef,
+                    placeholder: ACTION_LABELS.workflowIdPlaceholder,
+                    onChange: (e) => onUpdateNodeData(node.id, { workflowRef: e.target.value })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx9(
+                TransitionField,
+                {
+                  value: node.data.transition,
+                  onChange: (value) => onUpdateNodeData(node.id, { transition: value })
+                }
+              )
+            ] }) : null,
+            node.kind === "STOP" ? /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+              /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.reasonField }),
+              /* @__PURE__ */ jsx9(
+                "textarea",
+                {
+                  className: "wf-input wf-textarea",
+                  value: node.data.reason,
+                  onChange: (e) => onUpdateNodeData(node.id, { reason: e.target.value })
+                }
+              )
+            ] }) : null,
+            node.kind === "RETRY" ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
+              /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+                /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.targetStepField }),
+                /* @__PURE__ */ jsxs9(
+                  "select",
+                  {
+                    className: "wf-input wf-select",
+                    value: node.data.targetNodeId,
+                    onChange: (e) => onUpdateNodeData(node.id, { targetNodeId: e.target.value }),
+                    children: [
+                      /* @__PURE__ */ jsx9("option", { value: "", children: ACTION_LABELS.selectPlaceholder }),
+                      otherNodes.map((o) => /* @__PURE__ */ jsx9("option", { value: o.id, children: o.label }, o.id))
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+                /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.fallbackTargetField }),
+                /* @__PURE__ */ jsxs9(
+                  "select",
+                  {
+                    className: "wf-input wf-select",
+                    value: node.data.fallbackTargetNodeId,
+                    onChange: (e) => onUpdateNodeData(node.id, { fallbackTargetNodeId: e.target.value }),
+                    children: [
+                      /* @__PURE__ */ jsx9("option", { value: "", children: ACTION_LABELS.selectPlaceholder }),
+                      otherNodes.map((o) => /* @__PURE__ */ jsx9("option", { value: o.id, children: o.label }, o.id))
+                    ]
+                  }
+                )
+              ] })
+            ] }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs9("details", { className: "wf-inspector__details", open: advancedOpen, children: [
+          /* @__PURE__ */ jsx9("summary", { className: "wf-inspector__details-summary", children: ACTION_LABELS.advancedSection }),
+          /* @__PURE__ */ jsxs9("div", { className: "wf-inspector__details-body", children: [
+            node.kind === "AI_STEP" ? /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+              /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.maxRetriesField }),
+              /* @__PURE__ */ jsx9(
+                "input",
+                {
+                  className: "wf-input",
+                  type: "number",
+                  min: 0,
+                  value: node.data.maxRetries,
+                  onChange: (e) => onUpdateNodeData(node.id, { maxRetries: Number(e.target.value || 0) })
+                }
+              )
+            ] }) : null,
+            node.kind === "RETRY" ? /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+              /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.maxAttemptsField }),
+              /* @__PURE__ */ jsx9(
+                "input",
+                {
+                  className: "wf-input",
+                  type: "number",
+                  min: 1,
+                  value: node.data.maxAttempts,
+                  onChange: (e) => onUpdateNodeData(node.id, { maxAttempts: Number(e.target.value || 1) })
+                }
+              )
+            ] }) : null
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function DebateForm({
+  node,
+  agentCatalog,
+  onUpdate
+}) {
+  if (node.kind !== "AI_DEBATE") {
+    return null;
+  }
+  const d = node.data;
+  const hasCatalog = Boolean(agentCatalog && agentCatalog.length > 0);
+  const agentControl = (field) => hasCatalog ? /* @__PURE__ */ jsxs9(
+    "select",
+    {
+      className: "wf-input wf-select",
+      value: d[field],
+      onChange: (e) => onUpdate(node.id, { [field]: e.target.value }),
+      children: [
+        /* @__PURE__ */ jsx9("option", { value: "", children: ACTION_LABELS.selectPlaceholder }),
+        agentCatalog.map((a) => /* @__PURE__ */ jsx9("option", { value: a.id, children: a.name }, a.id))
+      ]
+    }
+  ) : /* @__PURE__ */ jsx9(
+    "input",
+    {
+      className: "wf-input",
+      value: d[field],
+      placeholder: ACTION_LABELS.agentPlaceholder,
+      onChange: (e) => onUpdate(node.id, { [field]: e.target.value })
+    }
+  );
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+    /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+      /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.primaryAgentField }),
+      agentControl("primaryAgentRef")
+    ] }),
+    /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+      /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.challengerAgentField }),
+      agentControl("challengerAgentRef")
+    ] }),
+    /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+      /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.maxRoundsField }),
+      /* @__PURE__ */ jsx9(
+        "input",
+        {
+          className: "wf-input",
+          type: "number",
+          min: 1,
+          value: d.maxRounds,
+          onChange: (e) => onUpdate(node.id, { maxRounds: Number(e.target.value || 1) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+      /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.resolutionInstructionsField }),
+      /* @__PURE__ */ jsx9(
+        "textarea",
+        {
+          className: "wf-input wf-textarea",
+          value: d.resolutionPrompt,
+          onChange: (e) => onUpdate(node.id, { resolutionPrompt: e.target.value })
+        }
+      )
+    ] })
+  ] });
+}
+function DecisionForm({
+  node,
+  otherNodes,
+  onUpdate
+}) {
+  if (node.kind !== "DECISION") {
+    return null;
+  }
+  const d = node.data;
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+    /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+      /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.contextKeyField }),
+      /* @__PURE__ */ jsx9(
+        "input",
+        {
+          className: "wf-input",
+          value: d.contextKey,
+          onChange: (e) => onUpdate(node.id, { contextKey: e.target.value })
+        }
+      ),
+      /* @__PURE__ */ jsx9("span", { className: "wf-field__hint", children: ACTION_LABELS.contextKeyHint })
+    ] }),
+    d.cases.map((c, idx) => /* @__PURE__ */ jsxs9("div", { className: "wf-inspector__card", children: [
+      /* @__PURE__ */ jsx9(
+        "input",
+        {
+          className: "wf-input",
+          placeholder: ACTION_LABELS.caseLabelPlaceholder,
+          value: c.label,
+          onChange: (e) => {
+            const next = [...d.cases];
+            next[idx] = { ...c, label: e.target.value };
+            onUpdate(node.id, { cases: next });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        "input",
+        {
+          className: "wf-input",
+          placeholder: ACTION_LABELS.caseValuePlaceholder,
+          value: c.value,
+          onChange: (e) => {
+            const next = [...d.cases];
+            next[idx] = { ...c, value: e.target.value };
+            onUpdate(node.id, { cases: next });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+        /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.connectsToField }),
+        /* @__PURE__ */ jsxs9(
+          "select",
+          {
+            className: "wf-input wf-select",
+            value: c.targetNodeId,
+            onChange: (e) => {
+              const next = [...d.cases];
+              next[idx] = { ...c, targetNodeId: e.target.value };
+              onUpdate(node.id, { cases: next });
+            },
+            children: [
+              /* @__PURE__ */ jsx9("option", { value: "", children: ACTION_LABELS.selectPlaceholder }),
+              otherNodes.map((o) => /* @__PURE__ */ jsx9("option", { value: o.id, children: o.label }, o.id))
+            ]
+          }
+        )
+      ] })
+    ] }, `${c.value}-${idx}`)),
+    /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        className: "wf-button wf-button--secondary",
+        onClick: () => onUpdate(node.id, {
+          cases: [...d.cases, { label: "New case", value: `case-${d.cases.length + 1}`, targetNodeId: "" }]
+        }),
+        children: ACTION_LABELS.addCase
+      }
+    ),
+    /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+      /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.defaultBranchTargetField }),
+      /* @__PURE__ */ jsxs9(
+        "select",
+        {
+          className: "wf-input wf-select",
+          value: d.defaultTargetNodeId,
+          onChange: (e) => onUpdate(node.id, { defaultTargetNodeId: e.target.value }),
+          children: [
+            /* @__PURE__ */ jsx9("option", { value: "", children: ACTION_LABELS.selectPlaceholder }),
+            otherNodes.map((o) => /* @__PURE__ */ jsx9("option", { value: o.id, children: o.label }, o.id))
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function RepeatForm({ node, onUpdate }) {
+  if (node.kind !== "REPEAT") {
+    return null;
+  }
+  const d = node.data;
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+    /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+      /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.loopModeField }),
+      /* @__PURE__ */ jsxs9(
+        "select",
+        {
+          className: "wf-input wf-select",
+          value: d.strategy,
+          onChange: (e) => onUpdate(node.id, { strategy: e.target.value }),
+          children: [
+            /* @__PURE__ */ jsx9("option", { value: "FIXED_COUNT", children: ACTION_LABELS.fixedCountMode }),
+            /* @__PURE__ */ jsx9("option", { value: "FOR_EACH", children: ACTION_LABELS.forEachMode }),
+            /* @__PURE__ */ jsx9("option", { value: "AGENT_SIGNAL", children: ACTION_LABELS.agentSignalMode }),
+            /* @__PURE__ */ jsx9("option", { value: "EVALUATOR", children: ACTION_LABELS.evaluatorMode })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+      /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.maxIterationsField }),
+      /* @__PURE__ */ jsx9(
+        "input",
+        {
+          className: "wf-input",
+          type: "number",
+          min: 1,
+          value: d.maxIterations,
+          onChange: (e) => onUpdate(node.id, { maxIterations: Number(e.target.value || 1) })
+        }
+      )
+    ] }),
+    d.strategy === "FOR_EACH" ? /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+      /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.listContextKeyField }),
+      /* @__PURE__ */ jsx9(
+        "input",
+        {
+          className: "wf-input",
+          value: d.forEachKey ?? "",
+          onChange: (e) => onUpdate(node.id, { forEachKey: e.target.value })
+        }
+      )
+    ] }) : null,
+    d.strategy === "EVALUATOR" ? /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+      /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.evaluatorAgentField }),
+      /* @__PURE__ */ jsx9(
+        "input",
+        {
+          className: "wf-input",
+          value: d.evaluatorAgentId ?? "",
+          onChange: (e) => onUpdate(node.id, { evaluatorAgentId: e.target.value })
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxs9("label", { className: "wf-field", children: [
+      /* @__PURE__ */ jsx9("span", { className: "wf-field__label", children: ACTION_LABELS.maxIterationsActionField }),
+      /* @__PURE__ */ jsxs9(
+        "select",
+        {
+          className: "wf-input wf-select",
+          value: d.maxIterationsAction,
+          onChange: (e) => onUpdate(node.id, { maxIterationsAction: e.target.value }),
+          children: [
+            /* @__PURE__ */ jsx9("option", { value: "AWAIT_USER", children: ACTION_LABELS.awaitUserAction }),
+            /* @__PURE__ */ jsx9("option", { value: "FAIL", children: ACTION_LABELS.failAction })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/palette/StepPalette.tsx
+import { useEffect as useEffect2, useState as useState4 } from "react";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function StepPalette({ mode, onAddStep, defaultCollapsed = true }) {
+  const [expanded, setExpanded] = useState4(!defaultCollapsed);
+  const [advancedOpen, setAdvancedOpen] = useState4(mode === "advanced");
+  const [isMobile, setIsMobile] = useState4(false);
+  const [mobileOpen, setMobileOpen] = useState4(false);
+  useEffect2(() => {
+    setAdvancedOpen(mode === "advanced");
+  }, [mode]);
+  useEffect2(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const media = window.matchMedia("(max-width: 767px)");
+    const update = () => setIsMobile(media.matches);
+    update();
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, []);
+  const renderKind = (kind, compact) => {
+    const meta = NODE_KIND_META[kind];
+    return /* @__PURE__ */ jsxs10(
+      "button",
+      {
+        type: "button",
+        draggable: true,
+        title: meta.description,
+        onDragStart: (e) => {
+          e.dataTransfer.setData("application/agentforge-node-kind", kind);
+          e.dataTransfer.effectAllowed = "copy";
+        },
+        onClick: () => {
+          onAddStep(kind);
+          if (isMobile) {
+            setMobileOpen(false);
+          }
+        },
+        className: ["wf-palette__item", compact ? "wf-palette__item--compact" : ""].filter(Boolean).join(" "),
+        "aria-label": meta.label,
+        children: [
+          /* @__PURE__ */ jsx10("span", { className: "wf-palette__item-icon", "aria-hidden": true, children: meta.iconGlyph }),
+          !compact ? /* @__PURE__ */ jsxs10("span", { className: "wf-palette__item-text", children: [
+            /* @__PURE__ */ jsx10("span", { className: "wf-palette__item-label", children: meta.label }),
+            /* @__PURE__ */ jsx10("span", { className: "wf-palette__item-description", children: meta.description })
+          ] }) : null
+        ]
+      },
+      kind
+    );
+  };
+  const panelContent = /* @__PURE__ */ jsxs10(Fragment3, { children: [
+    /* @__PURE__ */ jsxs10("div", { className: "wf-palette__header", children: [
+      /* @__PURE__ */ jsx10("span", { className: "wf-palette__title", children: BUILDER_COPY.stepLibrary }),
+      !isMobile ? /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          className: "wf-button wf-button--icon wf-button--ghost",
+          "aria-label": expanded ? BUILDER_COPY.collapsePalette : BUILDER_COPY.expandPalette,
+          onClick: () => setExpanded((v) => !v),
+          children: expanded ? "\u2039" : "\u203A"
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: "wf-palette__body", children: [
+      /* @__PURE__ */ jsx10("p", { className: "wf-palette__section-label", children: "Common" }),
+      /* @__PURE__ */ jsx10("div", { className: "wf-palette__list", children: LIBRARY_COMMON_KINDS.map((kind) => renderKind(kind, !expanded && !isMobile)) }),
+      expanded || isMobile ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
+        /* @__PURE__ */ jsxs10(
+          "button",
+          {
+            type: "button",
+            className: "wf-palette__advanced-toggle",
+            onClick: () => setAdvancedOpen((o) => !o),
+            children: [
+              /* @__PURE__ */ jsx10("span", { "aria-hidden": true, children: advancedOpen ? "\u25BE" : "\u25B8" }),
+              mode === "guided" ? ACTION_LABELS.advancedStepsGuided : ACTION_LABELS.advancedSteps
+            ]
+          }
+        ),
+        advancedOpen ? /* @__PURE__ */ jsx10("div", { className: "wf-palette__list", children: LIBRARY_ADVANCED_KINDS.map((kind) => renderKind(kind, false)) }) : null
+      ] }) : null
+    ] })
+  ] });
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs10("div", { className: "wf-palette wf-palette--mobile", children: [
+      /* @__PURE__ */ jsxs10(
+        "button",
+        {
+          type: "button",
+          className: "wf-button wf-button--primary wf-palette__mobile-trigger",
+          "aria-label": ACTION_LABELS.addStep,
+          "aria-expanded": mobileOpen,
+          onClick: () => setMobileOpen((o) => !o),
+          children: [
+            "+ ",
+            ACTION_LABELS.addStep
+          ]
+        }
+      ),
+      mobileOpen ? /* @__PURE__ */ jsxs10("div", { className: "wf-palette__mobile-sheet", role: "dialog", "aria-label": BUILDER_COPY.stepLibrary, children: [
+        /* @__PURE__ */ jsx10("p", { className: "wf-palette__mobile-description", children: ACTION_LABELS.chooseStepDescription }),
+        /* @__PURE__ */ jsx10("div", { className: "wf-palette__mobile-content", children: panelContent })
+      ] }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs10(
+    "aside",
+    {
+      className: ["wf-palette", expanded ? "wf-palette--expanded" : "wf-palette--collapsed"].join(" "),
+      onMouseEnter: () => {
+        if (!expanded) {
+          setExpanded(true);
+        }
+      },
+      onMouseLeave: () => {
+        if (defaultCollapsed) {
+          setExpanded(false);
+        }
+      },
+      children: [
+        !expanded ? /* @__PURE__ */ jsx10("div", { className: "wf-palette__collapsed-header", children: /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            className: "wf-button wf-button--icon wf-button--ghost",
+            "aria-label": BUILDER_COPY.expandPalette,
+            onClick: () => setExpanded(true),
+            children: "\u2630"
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsx10("div", { className: ["wf-palette__panel", !expanded ? "wf-palette__panel--hidden" : ""].filter(Boolean).join(" "), children: panelContent }),
+        !expanded ? /* @__PURE__ */ jsx10("div", { className: "wf-palette__collapsed-list", children: LIBRARY_COMMON_KINDS.map((kind) => renderKind(kind, true)) }) : null
+      ]
+    }
+  );
+}
+
+// src/state/useBuilderState.ts
+import { useMemo as useMemo3, useReducer } from "react";
+
+// src/api/types.ts
+function emptyWorkflow() {
+  return {
+    id: "",
+    name: "",
+    description: "",
+    steps: [],
+    artifacts: {}
+  };
+}
+
+// src/state/reducer.ts
+var initialValidation = { valid: true, issues: [] };
+var initialImportMeta = { source: null, importedAt: null };
+function createInitialState(workflow = emptyWorkflow()) {
+  return {
+    draft: workflow,
+    baseline: workflow,
+    selection: { nodeId: null, edgeId: null },
+    validation: initialValidation,
+    importMeta: initialImportMeta
+  };
+}
+function isDirty(state) {
+  return JSON.stringify(state.draft) !== JSON.stringify(state.baseline);
+}
+function builderReducer(state, action) {
+  switch (action.type) {
+    case "SET_DRAFT":
+      return { ...state, draft: action.draft };
+    case "SET_BASELINE":
+      return { ...state, baseline: action.baseline };
+    case "SELECT_NODE":
+      return {
+        ...state,
+        selection: { ...state.selection, nodeId: action.nodeId, edgeId: null }
+      };
+    case "SELECT_EDGE":
+      return {
+        ...state,
+        selection: { ...state.selection, edgeId: action.edgeId, nodeId: null }
+      };
+    case "SET_VALIDATION":
+      return { ...state, validation: action.validation };
+    case "SET_IMPORT_META":
+      return { ...state, importMeta: action.importMeta };
+    default:
+      return state;
+  }
+}
+
+// src/state/useBuilderState.ts
+function useBuilderState(initialWorkflow) {
+  const [state, dispatch] = useReducer(
+    builderReducer,
+    initialWorkflow,
+    (workflow) => createInitialState(workflow)
+  );
+  const dirty = useMemo3(() => isDirty(state), [state]);
+  return { state, dispatch, dirty };
+}
+
+// src/validation-ui/ValidationPanel.tsx
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function rewriteIssue(message) {
+  const normalized = message.trim().toLowerCase();
+  const matched = Object.entries(ISSUE_REWRITES).find(([key]) => normalized.includes(key));
+  return matched?.[1] ?? message;
+}
+function severityGlyph(issue) {
+  if (issue.code.toLowerCase().includes("warning")) {
+    return "\u26A0";
+  }
+  return "!";
+}
+function groupIssues(model, issues) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const issue of issues) {
+    const stepId = issue.stepId?.trim();
+    if (!stepId) {
+      const fallback = grouped.get("workflow") ?? { key: "workflow", title: "Workflow", issues: [] };
+      fallback.issues.push(issue);
+      grouped.set("workflow", fallback);
+      continue;
+    }
+    const node = model.nodes.find((entry2) => entry2.backendStepId === stepId);
+    const defaultTitle = node ? `${NODE_KIND_META[node.kind].label} \xB7 ${node.data.name?.trim() || "Untitled step"}` : stepId;
+    const entry = grouped.get(stepId) ?? { key: stepId, title: defaultTitle, issues: [] };
+    entry.issues.push(issue);
+    grouped.set(stepId, entry);
+  }
+  return [...grouped.values()];
+}
+function Section2({
+  title,
+  groups,
+  onFix
+}) {
+  if (groups.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs11("div", { className: "wf-validation-panel__section", children: [
+    /* @__PURE__ */ jsx11("h4", { className: "wf-validation-panel__section-title", children: title }),
+    groups.map((group) => /* @__PURE__ */ jsxs11("details", { className: "wf-validation-panel__group", open: true, children: [
+      /* @__PURE__ */ jsx11("summary", { className: "wf-validation-panel__group-summary", children: group.title }),
+      /* @__PURE__ */ jsx11("ul", { className: "wf-validation-panel__issue-list", children: group.issues.map((issue, index) => /* @__PURE__ */ jsxs11("li", { className: "wf-validation-panel__issue", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "wf-validation-panel__issue-content", children: [
+          /* @__PURE__ */ jsx11("span", { className: "wf-validation-panel__issue-glyph", "aria-hidden": true, children: severityGlyph(issue) }),
+          /* @__PURE__ */ jsx11("span", { className: "wf-validation-panel__issue-message", children: rewriteIssue(issue.message) })
+        ] }),
+        /* @__PURE__ */ jsx11(
+          "button",
+          {
+            type: "button",
+            className: "wf-button wf-button--secondary wf-validation-panel__fix-button",
+            disabled: !issue.stepId,
+            onClick: () => {
+              if (!issue.stepId) {
+                console.info("Validation issue has no stepId; cannot focus specific step.", issue);
+              }
+              onFix(issue.stepId);
+            },
+            children: ACTION_LABELS.fixIssue
+          }
+        )
+      ] }, `${group.key}-${issue.code}-${index}`)) })
+    ] }, group.key))
+  ] });
+}
+function ValidationPanel({ model, clientIssues, serverIssues = [], onFix }) {
+  const clientGroups = groupIssues(model, clientIssues);
+  const serverGroups = groupIssues(model, serverIssues);
+  const totalIssues = clientIssues.length + serverIssues.length;
+  return /* @__PURE__ */ jsxs11("details", { className: "wf-validation-panel", open: totalIssues > 0, children: [
+    /* @__PURE__ */ jsxs11("summary", { className: "wf-validation-panel__summary", children: [
+      /* @__PURE__ */ jsx11("span", { className: "wf-validation-panel__summary-mobile", children: totalIssues === 0 ? ACTION_LABELS.workflowLooksGood : ACTION_LABELS.thingsToFix(totalIssues) }),
+      /* @__PURE__ */ jsx11("span", { className: "wf-validation-panel__summary-desktop", children: ACTION_LABELS.clientValidation }),
+      /* @__PURE__ */ jsx11("span", { className: "wf-validation-panel__chevron", "aria-hidden": true, children: "\u25BE" })
+    ] }),
+    /* @__PURE__ */ jsx11("div", { className: "wf-validation-panel__body", children: totalIssues === 0 ? /* @__PURE__ */ jsx11("p", { className: "wf-validation-panel__ok", children: ACTION_LABELS.checkmarkOk }) : /* @__PURE__ */ jsxs11(Fragment4, { children: [
+      /* @__PURE__ */ jsx11("p", { className: "wf-validation-panel__count", children: ACTION_LABELS.thingsToFix(totalIssues) }),
+      /* @__PURE__ */ jsx11(Section2, { title: ACTION_LABELS.clientValidation, groups: clientGroups, onFix }),
+      /* @__PURE__ */ jsx11(Section2, { title: ACTION_LABELS.serverValidation, groups: serverGroups, onFix })
+    ] }) })
+  ] });
+}
+
+// src/validation-ui/ValidationPill.tsx
+import { useState as useState5 } from "react";
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+function ValidationPill({
+  model,
+  clientIssues,
+  serverIssues = [],
+  onFix,
+  className
+}) {
+  const [open, setOpen] = useState5(false);
+  const totalIssues = clientIssues.length + serverIssues.length;
+  const looksGood = totalIssues === 0;
+  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
+    /* @__PURE__ */ jsxs12(
+      "button",
+      {
+        type: "button",
+        className: ["wf-button wf-button--secondary wf-validation-pill", className].filter(Boolean).join(" "),
+        onClick: () => setOpen(true),
+        "aria-label": looksGood ? ACTION_LABELS.looksGood : ACTION_LABELS.thingsToFix(totalIssues),
+        children: [
+          /* @__PURE__ */ jsx12("span", { className: "wf-validation-pill__glyph", "aria-hidden": true, children: looksGood ? "\u2713" : "!" }),
+          /* @__PURE__ */ jsx12("span", { className: "wf-validation-pill__label-desktop", children: looksGood ? `\u2713 ${ACTION_LABELS.looksGood}` : ACTION_LABELS.thingsToFix(totalIssues) }),
+          /* @__PURE__ */ jsx12("span", { className: "wf-validation-pill__label-mobile", children: looksGood ? ACTION_LABELS.okShort : String(totalIssues) })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx12("div", { className: "wf-validation-pill__overlay", role: "presentation", onClick: () => setOpen(false), children: /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        className: "wf-panel wf-validation-pill__drawer",
+        role: "dialog",
+        "aria-label": ACTION_LABELS.clientValidation,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsxs12("header", { className: "wf-panel__header", children: [
+            /* @__PURE__ */ jsx12("h2", { className: "wf-panel__title", children: ACTION_LABELS.clientValidation }),
+            /* @__PURE__ */ jsx12("p", { className: "wf-panel__description", children: ACTION_LABELS.validationDetailsDescription }),
+            /* @__PURE__ */ jsx12(
+              "button",
+              {
+                type: "button",
+                className: "wf-button wf-button--icon wf-button--ghost wf-panel__close",
+                "aria-label": "Close",
+                onClick: () => setOpen(false),
+                children: "\xD7"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx12("div", { className: "wf-panel__body", children: /* @__PURE__ */ jsx12(
+            ValidationPanel,
+            {
+              model,
+              clientIssues,
+              serverIssues,
+              onFix: (stepId) => {
+                onFix(stepId);
+                setOpen(false);
+              }
+            }
+          ) })
+        ]
+      }
+    ) }) : null
+  ] });
+}
+
+// src/io/core.ts
+var STRIP_KEYS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+var WorkflowParseError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "WorkflowParseError";
+  }
+};
+function assertNoProtoKey(value, path = "root") {
+  if (value === null || typeof value !== "object") {
+    return;
+  }
+  if (Array.isArray(value)) {
+    value.forEach((item, index) => assertNoProtoKey(item, `${path}[${index}]`));
+    return;
+  }
+  for (const key of Object.keys(value)) {
+    if (key === "__proto__") {
+      throw new WorkflowParseError(`Forbidden key "__proto__" at ${path}`);
+    }
+    assertNoProtoKey(value[key], `${path}.${key}`);
+  }
+}
+function stripDangerousKeys(value) {
+  if (value === null || typeof value !== "object") {
+    return value;
+  }
+  if (Array.isArray(value)) {
+    return value.map(stripDangerousKeys);
+  }
+  const result = {};
+  for (const [key, child] of Object.entries(value)) {
+    if (STRIP_KEYS.has(key)) {
+      continue;
+    }
+    result[key] = stripDangerousKeys(child);
+  }
+  return result;
+}
+function serializeWorkflowJson(workflow) {
+  return JSON.stringify(workflow, null, 2);
+}
+function parseWorkflowJson(text) {
+  let parsed;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    throw new WorkflowParseError("Invalid JSON");
+  }
+  if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+    throw new WorkflowParseError("Workflow JSON must be an object");
+  }
+  assertNoProtoKey(parsed);
+  return stripDangerousKeys(parsed);
+}
+
+// src/io/browser/download.ts
+function downloadWorkflowJson(draft, filename = "workflow.json") {
+  const blob = new Blob([serializeWorkflowJson(draft)], {
+    type: "application/json"
+  });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+async function exportWorkflowBundle(draft, format) {
+  if (format !== "json") {
+    throw new Error(`Unsupported export format: ${format}`);
+  }
+  const name = typeof draft.name === "string" && draft.name.length > 0 ? `${draft.name}.json` : "workflow.json";
+  downloadWorkflowJson(draft, name);
+}
+
+// src/io/browser/upload.ts
+function readWorkflowJsonFile(file) {
+  return file.text().then(parseWorkflowJson);
+}
+async function importWorkflowFromFilePicker() {
+  return new Promise((resolve, reject) => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "application/json,.json";
+    input.onchange = () => {
+      const file = input.files?.[0];
+      if (!file) {
+        reject(new Error("No file selected"));
+        return;
+      }
+      readWorkflowJsonFile(file).then(resolve).catch(reject);
+    };
+    input.click();
+  });
+}
+
+// src/api/WorkflowBuilder.tsx
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+function flattenClientIssues(model, validation) {
+  const safe = (value) => value ?? "";
+  return [
+    ...Object.entries(validation.workflow).map(([field, message]) => ({
+      code: `workflow.${field}`,
+      message: safe(message),
+      stepId: void 0
+    })),
+    ...Object.entries(validation.steps).flatMap(
+      ([idx, errs]) => Object.entries(errs).map(([field, message]) => ({
+        code: `step.${field}`,
+        message: safe(message),
+        stepId: model.nodes[Number(idx)]?.backendStepId
+      }))
+    ),
+    ...Object.entries(validation.artifacts).flatMap(
+      ([artifactId, errs]) => Object.entries(errs).map(([field, message]) => ({
+        code: `artifact.${artifactId}.${field}`,
+        message: safe(message),
+        stepId: void 0
+      }))
+    ),
+    ...validation.global.map((message) => ({ code: "global", message: safe(message), stepId: void 0 }))
+  ];
+}
+function hasApprovalTransition(node) {
+  const data = node.data;
+  return data.transition === "HUMAN_APPROVAL";
+}
+function hasConfiguredInput(node) {
+  if (node.kind !== "ASK_USER") {
+    return false;
+  }
+  return Boolean(node.data.name?.trim() || node.data.question?.trim());
+}
+function nextLibraryStepPosition(model, selectedId) {
+  const GAP_X = 280;
+  const GAP_Y = 140;
+  const byId = new Map(model.nodes.map((node) => [node.id, node]));
+  const outgoing2 = /* @__PURE__ */ new Map();
+  const incomingCount = /* @__PURE__ */ new Map();
+  for (const node of model.nodes) {
+    outgoing2.set(node.id, []);
+    incomingCount.set(node.id, 0);
+  }
+  for (const edge of model.edges) {
+    outgoing2.set(edge.source, [...outgoing2.get(edge.source) ?? [], edge.target]);
+    incomingCount.set(edge.target, (incomingCount.get(edge.target) ?? 0) + 1);
+  }
+  const selectedNode = selectedId ? byId.get(selectedId) ?? null : null;
+  if (selectedNode) {
+    return {
+      position: { x: selectedNode.position.x + GAP_X, y: selectedNode.position.y },
+      afterNodeId: selectedNode.id
+    };
+  }
+  const start = model.startNodeId && byId.has(model.startNodeId) ? model.startNodeId : model.nodes[0]?.id ?? null;
+  if (!start) {
+    return { position: { x: 80, y: 120 }, afterNodeId: null };
+  }
+  let cursor = start;
+  const visited = /* @__PURE__ */ new Set([cursor]);
+  while (true) {
+    const next = (outgoing2.get(cursor) ?? []).find((target) => (incomingCount.get(target) ?? 0) <= 1);
+    if (!next || visited.has(next)) {
+      break;
+    }
+    visited.add(next);
+    cursor = next;
+  }
+  const anchor = byId.get(cursor);
+  if (!anchor) {
+    return { position: { x: 80, y: 120 }, afterNodeId: null };
+  }
+  return {
+    position: {
+      x: anchor.position.x + GAP_X,
+      y: anchor.position.y + (anchor.kind === "DECISION" ? GAP_Y : 0)
+    },
+    afterNodeId: anchor.id
+  };
+}
+function WorkflowBuilder({
+  capabilities,
+  adapters,
+  actions,
+  theme,
+  initialWorkflow,
+  agentCatalog = []
+}) {
+  const seed = initialWorkflow ?? emptyWorkflow();
+  const { state, dispatch, dirty } = useBuilderState(seed);
+  const [pending, setPending] = useState6({});
+  const [errors, setErrors] = useState6({});
+  const skipDraftSync = useRef(false);
+  const initialCanvas = useMemo4(
+    () => seed.steps.length > 0 ? workflowToCanvas(seed) : createInitialCanvasModel(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- canvas seed is mount-only
+    []
+  );
+  const {
+    model,
+    setModel,
+    setModelFromLoad,
+    selectedId,
+    setSelectedId,
+    markClean,
+    updateNodeData,
+    appendNode
+  } = useCanvasState(initialCanvas);
+  const { mode, setMode } = useBuilderMode(model, !initialWorkflow?.id);
+  const { buildFromCanvas } = useWorkflowDraft();
+  const resolvedAdapters = useMemo4(
+    () => ({
+      validateWorkflow: adapters?.validateWorkflow ?? validateWorkflow,
+      importBundle: adapters?.importBundle ?? importWorkflowFromFilePicker,
+      exportBundle: adapters?.exportBundle ?? exportWorkflowBundle
+    }),
+    [adapters]
+  );
+  useEffect3(() => {
+    if (skipDraftSync.current) {
+      skipDraftSync.current = false;
+      return;
+    }
+    const draft = canvasToWorkflow(model);
+    dispatch({ type: "SET_DRAFT", draft });
+  }, [model, dispatch]);
+  useEffect3(() => {
+    let cancelled = false;
+    void Promise.resolve(resolvedAdapters.validateWorkflow(state.draft)).then((result) => {
+      if (!cancelled) {
+        dispatch({ type: "SET_VALIDATION", validation: result });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [state.draft, resolvedAdapters, dispatch]);
+  const clientValidation = useMemo4(() => buildFromCanvas(model).validation, [buildFromCanvas, model]);
+  const clientIssues = useMemo4(() => flattenClientIssues(model, clientValidation), [clientValidation, model]);
+  const issueCountByBackendStepId = useMemo4(() => {
+    const counts = {};
+    for (const issue of clientIssues) {
+      if (!issue.stepId) {
+        continue;
+      }
+      counts[issue.stepId] = (counts[issue.stepId] ?? 0) + 1;
+    }
+    return counts;
+  }, [clientIssues]);
+  const runAction = useCallback5(async (key, fn) => {
+    setPending((prev) => ({ ...prev, [key]: true }));
+    setErrors((prev) => ({ ...prev, [key]: null }));
+    try {
+      await fn();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Action failed";
+      setErrors((prev) => ({ ...prev, [key]: message }));
+    } finally {
+      setPending((prev) => ({ ...prev, [key]: false }));
+    }
+  }, []);
+  const handleImport = () => runAction("import", async () => {
+    const imported = await resolvedAdapters.importBundle();
+    skipDraftSync.current = true;
+    setModelFromLoad(workflowToCanvas(imported));
+    dispatch({ type: "SET_DRAFT", draft: imported });
+    dispatch({ type: "SET_BASELINE", baseline: imported });
+    dispatch({
+      type: "SET_IMPORT_META",
+      importMeta: { source: "file", importedAt: (/* @__PURE__ */ new Date()).toISOString() }
+    });
+  });
+  const handleExport = () => runAction("export", async () => {
+    await resolvedAdapters.exportBundle(state.draft, "json");
+  });
+  const handleSave = () => runAction("save", async () => {
+    if (!actions?.save) {
+      throw new Error("Save action is not configured");
+    }
+    await actions.save(state.draft);
+    dispatch({ type: "SET_BASELINE", baseline: state.draft });
+    markClean();
+  });
+  const handleRun = () => runAction("run", async () => {
+    if (!actions?.run) {
+      throw new Error("Run action is not configured");
+    }
+    await actions.run(state.draft);
+  });
+  const handlePublish = () => runAction("publish", async () => {
+    if (!actions?.publish) {
+      throw new Error("Publish action is not configured");
+    }
+    await actions.publish(state.draft);
+  });
+  const onAddStepFromLibrary = useCallback5(
+    (kind, options) => {
+      const { position, afterNodeId } = nextLibraryStepPosition(model, selectedId);
+      const prefix = {
+        ASK_USER: "ask-user",
+        AI_STEP: "ai-step",
+        AI_DEBATE: "ai-debate",
+        DECISION: "decision",
+        REPEAT: "repeat",
+        SAVE_RESULT: "save-result",
+        REUSE_WORKFLOW: "reuse-wf",
+        LOAD_RESOURCE: "load-res",
+        STOP: "stop",
+        RETRY: "retry"
+      };
+      const backendStepId = newStepId(prefix[kind]);
+      const id = `c-${backendStepId}`;
+      const node = {
+        id,
+        backendStepId,
+        kind,
+        position,
+        data: { ...defaultNodeData(kind), ...options?.patch }
+      };
+      setModel((m) => {
+        const edge = afterNodeId && !m.edges.some((e) => e.source === afterNodeId && e.target === id) ? [
+          {
+            id: `e-${afterNodeId}-${id}-auto`,
+            source: afterNodeId,
+            target: id,
+            sourceHandle: null,
+            label: null
+          }
+        ] : [];
+        return {
+          ...m,
+          nodes: [...m.nodes, node],
+          edges: [...m.edges, ...edge],
+          startNodeId: m.startNodeId ?? id
+        };
+      });
+      setSelectedId(id);
+    },
+    [model, selectedId, setModel, setSelectedId]
+  );
+  const focusIssue = useCallback5(
+    (stepId) => {
+      if (!stepId) {
+        return;
+      }
+      const node = model.nodes.find((n) => n.backendStepId === stepId);
+      if (node) {
+        setSelectedId(node.id);
+      }
+    },
+    [model.nodes, setSelectedId]
+  );
+  const askUserNode = model.nodes.find((n) => n.kind === "ASK_USER");
+  const guidedStages = useMemo4(
+    () => [
+      {
+        label: GUIDED_STAGE_LABELS.addInput,
+        complete: model.nodes.some((node) => node.kind === "ASK_USER" && hasConfiguredInput(node)),
+        actionLabel: GUIDED_STAGE_LABELS.configureInput
+      },
+      {
+        label: GUIDED_STAGE_LABELS.addAiStep,
+        complete: model.nodes.some((node) => node.kind === "AI_STEP" || node.kind === "AI_DEBATE"),
+        actionLabel: GUIDED_STAGE_LABELS.addAiStep
+      },
+      {
+        label: GUIDED_STAGE_LABELS.addApproval,
+        complete: model.nodes.some((node) => hasApprovalTransition(node)),
+        actionLabel: GUIDED_STAGE_LABELS.requireApproval
+      },
+      {
+        label: GUIDED_STAGE_LABELS.generateResult,
+        complete: model.nodes.some((node) => node.kind === "SAVE_RESULT" || node.kind === "STOP"),
+        actionLabel: GUIDED_STAGE_LABELS.addSaveStep
+      }
+    ],
+    [model.nodes]
+  );
+  const activeGuidedIndex = guidedStages.findIndex((stage) => !stage.complete);
+  const onGuidedStageAction = useCallback5(
+    (index) => {
+      switch (index) {
+        case 0:
+          if (askUserNode) {
+            setSelectedId(askUserNode.id);
+          }
+          break;
+        case 1:
+          onAddStepFromLibrary("AI_STEP");
+          break;
+        case 2: {
+          const aiNode = model.nodes.find((n) => n.kind === "AI_STEP");
+          if (aiNode) {
+            updateNodeData(aiNode.id, { transition: "HUMAN_APPROVAL" });
+            setSelectedId(aiNode.id);
+          } else {
+            onAddStepFromLibrary("AI_STEP", { patch: { transition: "HUMAN_APPROVAL" } });
+          }
+          break;
+        }
+        case 3:
+          onAddStepFromLibrary("SAVE_RESULT");
+          break;
+        default:
+          break;
+      }
+    },
+    [askUserNode, model.nodes, onAddStepFromLibrary, setSelectedId, updateNodeData]
+  );
+  const rootStyle = theme?.variables ? { style: theme.variables } : void 0;
+  const rootClass = ["workflow-builder", theme?.className].filter(Boolean).join(" ");
+  const activeError = Object.values(errors).find((value) => value) ?? null;
+  const subtitle2 = [
+    dirty ? ACTION_LABELS.unsavedChanges : ACTION_LABELS.upToDate,
+    state.validation.valid ? null : ACTION_LABELS.validationIssues
+  ].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs13("div", { className: rootClass, "data-testid": "workflow-builder", ...rootStyle, children: [
+    /* @__PURE__ */ jsxs13("header", { className: "workflow-builder__header", children: [
+      /* @__PURE__ */ jsx13(
+        "input",
+        {
+          className: "workflow-builder__name-input",
+          value: model.workflowName,
+          placeholder: ACTION_LABELS.workflowNamePlaceholder,
+          "aria-label": ACTION_LABELS.workflowNameLabel,
+          onChange: (e) => setModel((m) => ({ ...m, workflowName: e.target.value }))
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        "input",
+        {
+          className: "workflow-builder__id-input",
+          value: model.workflowId,
+          placeholder: ACTION_LABELS.workflowIdPlaceholder,
+          "aria-label": ACTION_LABELS.workflowIdLabel,
+          onChange: (e) => setModel((m) => ({ ...m, workflowId: e.target.value }))
+        }
+      ),
+      /* @__PURE__ */ jsxs13("div", { className: "workflow-builder__mode-toggle", role: "group", "aria-label": "Builder mode", children: [
+        /* @__PURE__ */ jsx13(
+          "button",
+          {
+            type: "button",
+            className: ["wf-button", mode === "guided" ? "wf-button--primary" : "wf-button--ghost"].join(" "),
+            onClick: () => setMode("guided"),
+            children: ACTION_LABELS.guidedMode
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "button",
+          {
+            type: "button",
+            className: ["wf-button", mode === "advanced" ? "wf-button--primary" : "wf-button--ghost"].join(" "),
+            onClick: () => setMode("advanced"),
+            children: ACTION_LABELS.advancedMode
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx13(ValidationPill, { model, clientIssues, onFix: focusIssue }),
+      capabilities.export ? /* @__PURE__ */ jsx13(
+        "button",
+        {
+          type: "button",
+          className: "wf-button wf-button--ghost",
+          disabled: pending.export,
+          "data-testid": "workflow-builder-export",
+          onClick: () => void handleExport(),
+          children: pending.export ? ACTION_LABELS.exporting : ACTION_LABELS.export
+        }
+      ) : null,
+      capabilities.save ? /* @__PURE__ */ jsx13(
+        "button",
+        {
+          type: "button",
+          className: "wf-button wf-button--primary",
+          disabled: pending.save,
+          "data-testid": "workflow-builder-save",
+          onClick: () => void handleSave(),
+          children: pending.save ? ACTION_LABELS.saving : ACTION_LABELS.save
+        }
+      ) : null,
+      capabilities.run ? /* @__PURE__ */ jsx13(
+        "button",
+        {
+          type: "button",
+          className: "wf-button wf-button--secondary",
+          disabled: pending.run,
+          "data-testid": "workflow-builder-run",
+          onClick: () => void handleRun(),
+          children: pending.run ? ACTION_LABELS.running : ACTION_LABELS.run
+        }
+      ) : null,
+      capabilities.publish ? /* @__PURE__ */ jsx13(
+        "button",
+        {
+          type: "button",
+          className: "wf-button wf-button--primary",
+          disabled: pending.publish,
+          "data-testid": "workflow-builder-publish",
+          onClick: () => void handlePublish(),
+          children: pending.publish ? ACTION_LABELS.publishing : ACTION_LABELS.publish
+        }
+      ) : null,
+      capabilities.aiAssist ? /* @__PURE__ */ jsx13(
+        "button",
+        {
+          type: "button",
+          className: "wf-button wf-button--secondary",
+          "data-testid": "workflow-builder-ai",
+          "aria-label": ACTION_LABELS.aiAssist,
+          children: ACTION_LABELS.aiAssist
+        }
+      ) : null,
+      /* @__PURE__ */ jsx13("p", { className: "workflow-builder__subtitle", children: subtitle2 })
+    ] }),
+    model.unsupported ? /* @__PURE__ */ jsxs13("div", { className: "workflow-builder__banner workflow-builder__banner--warning", role: "status", children: [
+      /* @__PURE__ */ jsx13("p", { className: "workflow-builder__banner-title", children: ACTION_LABELS.unsupportedBannerTitle }),
+      model.unsupportedReasons?.length ? /* @__PURE__ */ jsx13("ul", { className: "workflow-builder__banner-list", children: model.unsupportedReasons.map((reason, index) => /* @__PURE__ */ jsx13("li", { children: reason }, index)) }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxs13("div", { className: "workflow-builder__workspace", children: [
+      mode === "guided" ? /* @__PURE__ */ jsx13("div", { className: "workflow-builder__guided", children: /* @__PURE__ */ jsx13(
+        GuidedStepper,
+        {
+          stages: guidedStages,
+          activeIndex: activeGuidedIndex === -1 ? guidedStages.length - 1 : activeGuidedIndex,
+          onStageAction: onGuidedStageAction
+        }
+      ) }) : null,
+      /* @__PURE__ */ jsx13(
+        StepPalette,
+        {
+          mode,
+          onAddStep: (kind) => onAddStepFromLibrary(kind),
+          defaultCollapsed: mode !== "advanced"
+        }
+      ),
+      /* @__PURE__ */ jsx13("div", { className: "workflow-builder__canvas", "data-testid": "workflow-builder-canvas", children: /* @__PURE__ */ jsx13(
+        WorkflowCanvas,
+        {
+          model,
+          onModelChange: setModel,
+          onSelectNode: setSelectedId,
+          selectedId,
+          onAppend: appendNode,
+          issueCountByBackendStepId
+        }
+      ) }),
+      /* @__PURE__ */ jsx13(
+        StepConfigPanel,
+        {
+          model,
+          selectedId,
+          mode,
+          onClose: () => setSelectedId(null),
+          onUpdateNodeData: updateNodeData,
+          agentCatalog
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx13("div", { className: "workflow-builder__actions", children: capabilities.import ? /* @__PURE__ */ jsx13(
+      "button",
+      {
+        type: "button",
+        className: "workflow-builder__button",
+        "data-testid": "workflow-builder-import",
+        disabled: pending.import,
+        onClick: () => void handleImport(),
+        children: pending.import ? ACTION_LABELS.importing : ACTION_LABELS.import
+      }
+    ) : null }),
+    activeError ? /* @__PURE__ */ jsx13("p", { className: "workflow-builder__status workflow-builder__status--error", role: "alert", children: activeError }) : null
+  ] });
+}
+export {
+  WorkflowBuilder,
+  WorkflowParseError,
+  builderReducer,
+  WorkflowBuilder as default,
+  parseWorkflowJson,
+  serializeWorkflowJson,
+  useBuilderState,
+  validateWorkflow
+};
+//# sourceMappingURL=index.js.map