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

package/dist/modules/workflows/components/WorkflowCompensationGhostEdge.js

@@ -0,0 +1,70 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { BaseEdge, EdgeLabelRenderer, getBezierPath } from "@xyflow/react";
+import { ShieldMinus } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+function WorkflowCompensationGhostEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data
+}) {
+  const t = useT();
+  const ghostData = data;
+  const compensated = (ghostData?.compensatedActivityNames ?? []).filter((name) => name.length > 0);
+  const title = t("workflows.compensation.ghostLabel", "Compensation");
+  const ariaLabel = compensated.length > 0 ? t("workflows.compensation.ghostAriaLabel", "Compensation path for {activities}", {
+    activities: compensated.join(", ")
+  }) : title;
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BaseEdge,
+      {
+        id,
+        path: edgePath,
+        role: "img",
+        "aria-label": ariaLabel,
+        style: {
+          stroke: "var(--status-warning-icon)",
+          strokeWidth: 2,
+          strokeDasharray: "10,4,2,4",
+          opacity: 0.85
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": "workflow-compensation-ghost-label",
+        title: ariaLabel,
+        style: {
+          position: "absolute",
+          transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+          pointerEvents: "none",
+          zIndex: 1500
+        },
+        className: "nodrag nopan inline-flex items-center gap-1 rounded-full border border-status-warning-border bg-status-warning-bg px-2 py-0.5 text-overline font-semibold uppercase tracking-wide text-status-warning-text",
+        children: [
+          /* @__PURE__ */ jsx(ShieldMinus, { className: "h-3 w-3 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: title })
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  WorkflowCompensationGhostEdge
+};
+//# sourceMappingURL=WorkflowCompensationGhostEdge.js.map

package/dist/modules/workflows/components/WorkflowCompensationGhostEdge.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/workflows/components/WorkflowCompensationGhostEdge.tsx"],
+  "sourcesContent": ["'use client'\n\nimport { BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath } from '@xyflow/react'\nimport { ShieldMinus } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport type { CompensationGhostEdgeData } from '../lib/compensation-ghosts'\n\n/**\n * A compensation ghost (spec section 4.4: \"dashed reverse, behind a toggle\").\n *\n * It renders the undo path a failure would walk: the reverse of a route whose\n * activities declare `compensation`. It is display-only \u2014 non-interactive, never\n * part of the saved definition \u2014 and it is deliberately unmistakable next to a\n * real route: its own dash-dot pattern, the warning token, AND a permanent\n * icon + label chip, because status is never colour-only (spec section 4.6).\n */\nexport function WorkflowCompensationGhostEdge({\n  id,\n  sourceX,\n  sourceY,\n  targetX,\n  targetY,\n  sourcePosition,\n  targetPosition,\n  data,\n}: EdgeProps) {\n  const t = useT()\n  const ghostData = data as CompensationGhostEdgeData | undefined\n  const compensated = (ghostData?.compensatedActivityNames ?? []).filter((name) => name.length > 0)\n  const title = t('workflows.compensation.ghostLabel', 'Compensation')\n  const ariaLabel = compensated.length > 0\n    ? t('workflows.compensation.ghostAriaLabel', 'Compensation path for {activities}', {\n        activities: compensated.join(', '),\n      })\n    : title\n\n  const [edgePath, labelX, labelY] = getBezierPath({\n    sourceX,\n    sourceY,\n    sourcePosition,\n    targetX,\n    targetY,\n    targetPosition,\n  })\n\n  return (\n    <>\n      <BaseEdge\n        id={id}\n        path={edgePath}\n        role=\"img\"\n        aria-label={ariaLabel}\n        style={{\n          stroke: 'var(--status-warning-icon)',\n          strokeWidth: 2,\n          strokeDasharray: '10,4,2,4',\n          opacity: 0.85,\n        }}\n      />\n      <EdgeLabelRenderer>\n        <div\n          data-testid=\"workflow-compensation-ghost-label\"\n          title={ariaLabel}\n          style={{\n            position: 'absolute',\n            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,\n            pointerEvents: 'none',\n            zIndex: 1500,\n          }}\n          className=\"nodrag nopan inline-flex items-center gap-1 rounded-full border border-status-warning-border bg-status-warning-bg px-2 py-0.5 text-overline font-semibold uppercase tracking-wide text-status-warning-text\"\n        >\n          <ShieldMinus className=\"h-3 w-3 shrink-0\" aria-hidden=\"true\" />\n          <span>{title}</span>\n        </div>\n      </EdgeLabelRenderer>\n    </>\n  )\n}\n"],
+  "mappings": ";AA8CI,mBACE,KAaE,YAdJ;AA5CJ,SAAS,UAAU,mBAA8B,qBAAqB;AACtE,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AAYd,SAAS,8BAA8B;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAc;AACZ,QAAM,IAAI,KAAK;AACf,QAAM,YAAY;AAClB,QAAM,eAAe,WAAW,4BAA4B,CAAC,GAAG,OAAO,CAAC,SAAS,KAAK,SAAS,CAAC;AAChG,QAAM,QAAQ,EAAE,qCAAqC,cAAc;AACnE,QAAM,YAAY,YAAY,SAAS,IACnC,EAAE,yCAAyC,sCAAsC;AAAA,IAC/E,YAAY,YAAY,KAAK,IAAI;AAAA,EACnC,CAAC,IACD;AAEJ,QAAM,CAAC,UAAU,QAAQ,MAAM,IAAI,cAAc;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,aAAa;AAAA,UACb,iBAAiB;AAAA,UACjB,SAAS;AAAA,QACX;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,qBACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,OAAO;AAAA,QACP,OAAO;AAAA,UACL,UAAU;AAAA,UACV,WAAW,mCAAmC,MAAM,MAAM,MAAM;AAAA,UAChE,eAAe;AAAA,UACf,QAAQ;AAAA,QACV;AAAA,QACA,WAAU;AAAA,QAEV;AAAA,8BAAC,eAAY,WAAU,oBAAmB,eAAY,QAAO;AAAA,UAC7D,oBAAC,UAAM,iBAAM;AAAA;AAAA;AAAA,IACf,GACF;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/modules/workflows/components/WorkflowDataMappingEdge.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { BaseEdge, Position, getBezierPath } from "@xyflow/react";
+function WorkflowDataMappingEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition
+}) {
+  const [edgePath] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition: sourcePosition ?? Position.Bottom,
+    targetPosition: targetPosition ?? Position.Top
+  });
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      id,
+      path: edgePath,
+      style: {
+        stroke: "var(--edge-data)",
+        strokeWidth: 2,
+        strokeDasharray: "2,3"
+      }
+    }
+  );
+}
+export {
+  WorkflowDataMappingEdge
+};
+//# sourceMappingURL=WorkflowDataMappingEdge.js.map

package/dist/modules/workflows/components/WorkflowDataMappingEdge.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/workflows/components/WorkflowDataMappingEdge.tsx"],
+  "sourcesContent": ["import { BaseEdge, EdgeProps, Position, getBezierPath } from '@xyflow/react'\n\n/**\n * WorkflowDataMappingEdge \u2014 a drag-authored SUB_WORKFLOW field mapping.\n *\n * Visually distinct from control-flow transitions: it uses the `--edge-data`\n * design token (defined on the graph container) and a dotted stroke, so a data\n * binding reads differently from a control edge at a glance. Carries no\n * transition semantics \u2014 the binding itself lives in the target step's\n * `config.inputMapping`.\n *\n * Under the horizontal flow, sub-workflow data ports live on the node's\n * Bottom (out) / Top (in) edges. React Flow supplies the connected handles'\n * positions via props; we fall back to those edges so the bezier still meets the\n * relocated ports if a position is ever missing.\n */\nexport function WorkflowDataMappingEdge({\n  id,\n  sourceX,\n  sourceY,\n  targetX,\n  targetY,\n  sourcePosition,\n  targetPosition,\n}: EdgeProps) {\n  const [edgePath] = getBezierPath({\n    sourceX,\n    sourceY,\n    targetX,\n    targetY,\n    sourcePosition: sourcePosition ?? Position.Bottom,\n    targetPosition: targetPosition ?? Position.Top,\n  })\n\n  return (\n    <BaseEdge\n      id={id}\n      path={edgePath}\n      style={{\n        stroke: 'var(--edge-data)',\n        strokeWidth: 2,\n        strokeDasharray: '2,3',\n      }}\n    />\n  )\n}\n"],
+  "mappings": "AAmCI;AAnCJ,SAAS,UAAqB,UAAU,qBAAqB;AAgBtD,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAc;AACZ,QAAM,CAAC,QAAQ,IAAI,cAAc;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,kBAAkB,SAAS;AAAA,IAC3C,gBAAgB,kBAAkB,SAAS;AAAA,EAC7C,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,iBAAiB;AAAA,MACnB;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/dist/modules/workflows/components/WorkflowGraph.js

@@ -36,7 +36,8 @@ function WorkflowGraphReadOnly({
   nodes,
   edges,
   className = "",
-  height = "500px"
+  height = "500px",
+  onNodeClick
 }) {
   return /* @__PURE__ */ jsx(
     WorkflowGraph,
@@ -45,7 +46,8 @@ function WorkflowGraphReadOnly({
       initialEdges: edges,
       editable: false,
       className,
-      height
+      height,
+      onNodeClick
     }
   );
 }

package/dist/modules/workflows/components/WorkflowGraph.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/modules/workflows/components/WorkflowGraph.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport dynamic from 'next/dynamic'\nimport type { Node, Edge, Connection } from '@xyflow/react'\nimport { Spinner } from '@open-mercato/ui/primitives/spinner'\n\nexport interface WorkflowGraphProps {\n  initialNodes?: Node[]\n  initialEdges?: Edge[]\n  onNodesChange?: (nodes: Node[]) => void\n  onEdgesChange?: (edges: Edge[]) => void\n  onNodeClick?: (event: React.MouseEvent, node: Node) => void\n  onEdgeClick?: (event: React.MouseEvent, edge: Edge) => void\n  onConnect?: (connection: Connection) => void\n  editable?: boolean\n  className?: string\n  height?: string\n}\n\nconst WorkflowGraphImpl = dynamic(() => import('./WorkflowGraphImpl'), {\n  ssr: false,\n  loading: () => null,\n})\n\nfunction WorkflowGraphPlaceholder({ height }: { height: string }) {\n  return (\n    <div\n      className=\"workflow-graph-container flex items-center justify-center rounded-lg border border-border bg-muted/30\"\n      style={{ height }}\n    >\n      <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n    </div>\n  )\n}\n\n/**\n * WorkflowGraph \u2014 lazy-loaded ReactFlow wrapper.\n *\n * @xyflow/react is loaded via next/dynamic({ ssr: false }) so the ~12 MB\n * package only enters the Turbopack module graph when this component\n * actually renders.\n */\nexport function WorkflowGraph(props: WorkflowGraphProps) {\n  const { height = '600px' } = props\n  // Track impl-chunk readiness so the loading placeholder respects the\n  // caller's `height` prop (next/dynamic's `loading` cannot access props).\n  // The browser caches the module, so the duplicate `import()` is free.\n  const [isImplReady, setIsImplReady] = React.useState(false)\n  React.useEffect(() => {\n    let cancelled = false\n    void import('./WorkflowGraphImpl').then(() => {\n      if (!cancelled) setIsImplReady(true)\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [])\n\n  if (!isImplReady) return <WorkflowGraphPlaceholder height={height} />\n  return <WorkflowGraphImpl {...props} />\n}\n\n/**\n * WorkflowGraphReadOnly \u2014 read-only viewer that reuses WorkflowGraph.\n */\nexport function WorkflowGraphReadOnly({\n  nodes,\n  edges,\n  className = '',\n  height = '500px',\n}: {\n  nodes: Node[]\n  edges: Edge[]\n  className?: string\n  height?: string\n}) {\n  return (\n    <WorkflowGraph\n      initialNodes={nodes}\n      initialEdges={edges}\n      editable={false}\n      className={className}\n      height={height}\n    />\n  )\n}\n"],
-  "mappings": ";AA+BM;AA7BN,YAAY,WAAW;AACvB,OAAO,aAAa;AAEpB,SAAS,eAAe;AAexB,MAAM,oBAAoB,QAAQ,MAAM,OAAO,qBAAqB,GAAG;AAAA,EACrE,KAAK;AAAA,EACL,SAAS,MAAM;AACjB,CAAC;AAED,SAAS,yBAAyB,EAAE,OAAO,GAAuB;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,OAAO;AAAA,MAEhB,8BAAC,WAAQ,WAAU,iCAAgC;AAAA;AAAA,EACrD;AAEJ;AASO,SAAS,cAAc,OAA2B;AACvD,QAAM,EAAE,SAAS,QAAQ,IAAI;AAI7B,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,KAAK;AAC1D,QAAM,UAAU,MAAM;AACpB,QAAI,YAAY;AAChB,SAAK,OAAO,qBAAqB,EAAE,KAAK,MAAM;AAC5C,UAAI,CAAC,UAAW,gBAAe,IAAI;AAAA,IACrC,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,YAAa,QAAO,oBAAC,4BAAyB,QAAgB;AACnE,SAAO,oBAAC,qBAAmB,GAAG,OAAO;AACvC;AAKO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,SAAS;AACX,GAKG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,cAAc;AAAA,MACd,UAAU;AAAA,MACV;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport dynamic from 'next/dynamic'\nimport type { Node, Edge, Connection } from '@xyflow/react'\nimport type { WorkflowGraphDropEvent, WorkflowGraphNodesChangeMeta } from './WorkflowGraphImpl'\nimport { Spinner } from '@open-mercato/ui/primitives/spinner'\nimport type { RunExecution } from '../lib/run-execution'\nimport type { TriggerLike } from '../lib/trigger-node'\n\nexport type { WorkflowGraphDropEvent, WorkflowGraphNodesChangeMeta } from './WorkflowGraphImpl'\n\nexport interface WorkflowGraphFocusTarget {\n  nodeId?: string\n  edgeId?: string\n  requestId: number\n}\n\nexport interface WorkflowGraphProps {\n  initialNodes?: Node[]\n  initialEdges?: Edge[]\n  onNodesChange?: (nodes: Node[], meta: WorkflowGraphNodesChangeMeta) => void\n  onEdgesChange?: (edges: Edge[]) => void\n  onNodeClick?: (event: React.MouseEvent, node: Node) => void\n  onEdgeClick?: (event: React.MouseEvent, edge: Edge) => void\n  onConnect?: (connection: Connection) => void\n  /**\n   * Route reattachment (#4233): fired when an existing edge endpoint is dropped\n   * on another node. Leaving the edge list unchanged snaps the endpoint back.\n   */\n  onReconnect?: (oldEdge: Edge, connection: Connection) => void\n  /**\n   * Drag-from-palette (spec section 4.2): fired when something is dropped on the\n   * canvas, carrying the flow-space cursor position and the route under it.\n   */\n  onCanvasDrop?: (event: WorkflowGraphDropEvent) => void\n  editable?: boolean\n  className?: string\n  height?: string\n  focusTarget?: WorkflowGraphFocusTarget | null\n  nodeErrorCounts?: Record<string, number>\n  /** Render the dashed reverse compensation ghosts (spec section 4.4). */\n  showCompensation?: boolean\n  /**\n   * \"Show last run\" execution overlay (spec \u00A78.3). Display-only: node statuses\n   * and taken routes are applied at render time and never enter the editor's\n   * node/edge state, so they cannot reach `graphToDefinition`, the undo stack or\n   * an autosave.\n   */\n  runOverlay?: RunExecution | null\n  /**\n   * Agent id \u2192 label for the overlay's reason line (spec Part 2). Display-only,\n   * like `runOverlay` itself.\n   */\n  runAgentLabels?: ReadonlyMap<string, string> | null\n  /**\n   * The definition's event triggers (fidelity gap #5). Display-only: the pill is\n   * minted at render time and never enters the editor's node state, so it cannot\n   * reach `graphToDefinition`, the undo stack or an autosave. `undefined`/`null`\n   * renders nothing; an ARRAY opts in, and an EMPTY array still renders \u2014 a\n   * definition with no triggers is started manually or by API, which is exactly\n   * what the pill then says.\n   */\n  triggers?: TriggerLike[] | null\n  /** The definition's enabled flag \u2014 a disabled definition starts from nothing. */\n  definitionEnabled?: boolean\n  /** Opens the definition drawer on its triggers section. */\n  onOpenTriggers?: () => void\n}\n\nconst WorkflowGraphImpl = dynamic(() => import('./WorkflowGraphImpl'), {\n  ssr: false,\n  loading: () => null,\n})\n\nfunction WorkflowGraphPlaceholder({ height }: { height: string }) {\n  return (\n    <div\n      className=\"workflow-graph-container flex items-center justify-center rounded-lg border border-border bg-muted/30\"\n      style={{ height }}\n    >\n      <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n    </div>\n  )\n}\n\n/**\n * WorkflowGraph \u2014 lazy-loaded ReactFlow wrapper.\n *\n * @xyflow/react is loaded via next/dynamic({ ssr: false }) so the ~12 MB\n * package only enters the Turbopack module graph when this component\n * actually renders.\n */\nexport function WorkflowGraph(props: WorkflowGraphProps) {\n  const { height = '600px' } = props\n  // Track impl-chunk readiness so the loading placeholder respects the\n  // caller's `height` prop (next/dynamic's `loading` cannot access props).\n  // The browser caches the module, so the duplicate `import()` is free.\n  const [isImplReady, setIsImplReady] = React.useState(false)\n  React.useEffect(() => {\n    let cancelled = false\n    void import('./WorkflowGraphImpl').then(() => {\n      if (!cancelled) setIsImplReady(true)\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [])\n\n  if (!isImplReady) return <WorkflowGraphPlaceholder height={height} />\n  return <WorkflowGraphImpl {...props} />\n}\n\n/**\n * WorkflowGraphReadOnly \u2014 read-only viewer that reuses WorkflowGraph.\n */\nexport function WorkflowGraphReadOnly({\n  nodes,\n  edges,\n  className = '',\n  height = '500px',\n  onNodeClick,\n}: {\n  nodes: Node[]\n  edges: Edge[]\n  className?: string\n  height?: string\n  onNodeClick?: (event: React.MouseEvent, node: Node) => void\n}) {\n  return (\n    <WorkflowGraph\n      initialNodes={nodes}\n      initialEdges={edges}\n      editable={false}\n      className={className}\n      height={height}\n      onNodeClick={onNodeClick}\n    />\n  )\n}\n"],
+  "mappings": ";AAiFM;AA/EN,YAAY,WAAW;AACvB,OAAO,aAAa;AAGpB,SAAS,eAAe;AAgExB,MAAM,oBAAoB,QAAQ,MAAM,OAAO,qBAAqB,GAAG;AAAA,EACrE,KAAK;AAAA,EACL,SAAS,MAAM;AACjB,CAAC;AAED,SAAS,yBAAyB,EAAE,OAAO,GAAuB;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,OAAO;AAAA,MAEhB,8BAAC,WAAQ,WAAU,iCAAgC;AAAA;AAAA,EACrD;AAEJ;AASO,SAAS,cAAc,OAA2B;AACvD,QAAM,EAAE,SAAS,QAAQ,IAAI;AAI7B,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,KAAK;AAC1D,QAAM,UAAU,MAAM;AACpB,QAAI,YAAY;AAChB,SAAK,OAAO,qBAAqB,EAAE,KAAK,MAAM;AAC5C,UAAI,CAAC,UAAW,gBAAe,IAAI;AAAA,IACrC,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,YAAa,QAAO,oBAAC,4BAAyB,QAAgB;AACnE,SAAO,oBAAC,qBAAmB,GAAG,OAAO;AACvC;AAKO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,cAAc;AAAA,MACd,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/modules/workflows/components/WorkflowGraphImpl.js

@@ -15,15 +15,62 @@ import {
   applyNodeChanges,
   applyEdgeChanges,
   ConnectionMode,
+  ConnectionLineType,
   MarkerType
 } from "@xyflow/react";
-import { StartNode, EndNode, UserTaskNode, AutomatedNode, SubWorkflowNode, WaitForSignalNode, WaitForTimerNode, ParallelForkNode, ParallelJoinNode } from "./nodes/index.js";
+import { StartNode, EndNode, UserTaskNode, AutomatedNode, SubWorkflowNode, WaitForSignalNode, WaitForTimerNode, WaitForConditionNode, ParallelForkNode, ParallelJoinNode, InvokeAgentNode, IfElseNode, SwitchNode, StickyNoteNode, AnnotationGroupNode } from "./nodes/index.js";
+import { ANNOTATION_GROUP_NODE_TYPE, ANNOTATION_NOTE_NODE_TYPE } from "../lib/editor-annotations.js";
+import {
+  buildTriggerNodeModel
+} from "../lib/trigger-node.js";
 import { WorkflowTransitionEdge } from "./WorkflowTransitionEdge.js";
-import { STATUS_COLORS } from "../lib/status-colors.js";
+import { WorkflowDataMappingEdge } from "./WorkflowDataMappingEdge.js";
+import { WorkflowCompensationGhostEdge } from "./WorkflowCompensationGhostEdge.js";
+import {
+  buildCompensationGhostEdges,
+  compensatingStepIds,
+  WORKFLOW_COMPENSATION_GHOST_EDGE_TYPE
+} from "../lib/compensation-ghosts.js";
+import { buildAgentOutcomeRows } from "../lib/node-outcome-rows.js";
+import { WORKFLOW_TRANSITION_EDGE_TYPE } from "../lib/route-edge.js";
+import { filterOwnedNodeChanges } from "../lib/owned-node-changes.js";
+import { isRouteTaken, resolveNodeRunStatus } from "../lib/run-execution.js";
+import {
+  presentationToWorkflowStatus,
+  readNodeAgentId,
+  resolveStepPresentation
+} from "../lib/step-presentation.js";
+import { EDGE_COLORS, STATUS_COLORS, toWorkflowStatus } from "../lib/status-colors.js";
 import { Alert, AlertDescription } from "@open-mercato/ui/primitives/alert";
 import { Edit3 } from "lucide-react";
-import { useTheme } from "@open-mercato/ui/theme";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
+const ROUTE_MARKER_END = {
+  type: MarkerType.ArrowClosed,
+  width: 10,
+  height: 10,
+  color: EDGE_COLORS.pending.stroke
+};
+function describeNodeChanges(changes) {
+  const dragging = changes.some((change) => change.type === "position" && change.dragging === true);
+  const resizing = changes.some((change) => change.type === "dimensions" && change.resizing === true);
+  if (dragging || resizing) return { dragging, resizing, persistable: false };
+  const persistable = changes.some((change) => {
+    if (change.type === "select") return false;
+    if (change.type === "dimensions") return change.resizing === false;
+    if (change.type === "position") return change.dragging !== true;
+    return true;
+  });
+  return { dragging, resizing, persistable };
+}
+function edgeIdAtPoint(clientX, clientY) {
+  if (typeof document === "undefined" || typeof document.elementsFromPoint !== "function") return null;
+  for (const element of document.elementsFromPoint(clientX, clientY)) {
+    const edgeElement = element.closest?.(".react-flow__edge");
+    const edgeId = edgeElement?.getAttribute("data-id");
+    if (edgeId) return edgeId;
+  }
+  return null;
+}
 function WorkflowGraphImpl({
   initialNodes = [],
   initialEdges = [],
@@ -32,9 +79,19 @@ function WorkflowGraphImpl({
   onNodeClick: onNodeClickProp,
   onEdgeClick: onEdgeClickProp,
   onConnect: onConnectProp,
+  onReconnect: onReconnectProp,
+  onCanvasDrop: onCanvasDropProp,
   editable = false,
   className = "",
-  height = "600px"
+  height = "600px",
+  focusTarget = null,
+  nodeErrorCounts,
+  showCompensation = false,
+  runOverlay = null,
+  runAgentLabels = null,
+  triggers = null,
+  definitionEnabled = true,
+  onOpenTriggers
 }) {
   const t = useT();
   const [nodes, setNodes] = useNodesState(initialNodes);
@@ -43,10 +100,31 @@ function WorkflowGraphImpl({
   latestNodesRef.current = nodes;
   const latestEdgesRef = useRef(edges);
   latestEdgesRef.current = edges;
-  const { resolvedTheme } = useTheme();
-  const isDark = resolvedTheme === "dark";
-  const backgroundDotColor = isDark ? "#374151" : "#e5e7eb";
+  const backgroundDotColor = "color-mix(in oklab, var(--muted-foreground) 22%, transparent)";
+  const backgroundDotGap = 24;
   const [isCompactViewport, setIsCompactViewport] = useState(false);
+  const containerRef = useRef(null);
+  const reactFlowInstanceRef = useRef(null);
+  const fitViewOptions = useMemo(
+    () => ({ padding: 0.1, maxZoom: isCompactViewport ? 0.9 : 1.5 }),
+    [isCompactViewport]
+  );
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    let frame = null;
+    const observer = new ResizeObserver(() => {
+      if (frame) cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        reactFlowInstanceRef.current?.fitView(fitViewOptions);
+      });
+    });
+    observer.observe(el);
+    return () => {
+      if (frame) cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  }, [fitViewOptions]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(max-width: 1279px)");
@@ -70,14 +148,9 @@ function WorkflowGraphImpl({
       } else {
         const newEdge = {
           ...connection,
-          type: "workflowTransition",
+          type: WORKFLOW_TRANSITION_EDGE_TYPE,
           animated: false,
-          markerEnd: {
-            type: MarkerType.ArrowClosed,
-            width: 16,
-            height: 16,
-            color: "#9ca3af"
-          }
+          markerEnd: ROUTE_MARKER_END
         };
         setEdges((eds) => addEdge(newEdge, eds));
       }
@@ -86,14 +159,40 @@ function WorkflowGraphImpl({
   );
   const handleNodesChange = useCallback(
     (changes) => {
-      const nextNodes = applyNodeChanges(changes, latestNodesRef.current);
+      const ownedIds = new Set(latestNodesRef.current.map((node) => node.id));
+      const ownedChanges = filterOwnedNodeChanges(changes, ownedIds);
+      if (ownedChanges.length === 0) return;
+      const nextNodes = applyNodeChanges(ownedChanges, latestNodesRef.current);
       setNodes(nextNodes);
       if (onNodesChangeProp) {
-        onNodesChangeProp(nextNodes);
+        onNodesChangeProp(nextNodes, describeNodeChanges(ownedChanges));
       }
     },
     [setNodes, onNodesChangeProp]
   );
+  const acceptsDrop = editable && !!onCanvasDropProp;
+  const handleDragOver = useCallback(
+    (event) => {
+      if (!acceptsDrop) return;
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "copy";
+    },
+    [acceptsDrop]
+  );
+  const handleDrop = useCallback(
+    (event) => {
+      if (!acceptsDrop) return;
+      const instance = reactFlowInstanceRef.current;
+      if (!instance) return;
+      event.preventDefault();
+      onCanvasDropProp?.({
+        dataTransfer: event.dataTransfer,
+        position: instance.screenToFlowPosition({ x: event.clientX, y: event.clientY }),
+        edgeId: edgeIdAtPoint(event.clientX, event.clientY)
+      });
+    },
+    [acceptsDrop, onCanvasDropProp]
+  );
   const handleEdgesChange = useCallback(
     (changes) => {
       const nextEdges = applyEdgeChanges(changes, latestEdgesRef.current);
@@ -104,6 +203,123 @@ function WorkflowGraphImpl({
     },
     [setEdges, onEdgesChangeProp]
   );
+  useEffect(() => {
+    if (!focusTarget) return;
+    const instance = reactFlowInstanceRef.current;
+    if (!instance) return;
+    const focusOptions = { zoom: 1, duration: 300 };
+    if (focusTarget.nodeId) {
+      const node = latestNodesRef.current.find((candidate) => candidate.id === focusTarget.nodeId);
+      if (!node) return;
+      const width = node.measured?.width ?? 0;
+      const height2 = node.measured?.height ?? 0;
+      void instance.setCenter(node.position.x + width / 2, node.position.y + height2 / 2, focusOptions);
+      handleNodesChange(
+        latestNodesRef.current.map((candidate) => ({
+          id: candidate.id,
+          type: "select",
+          selected: candidate.id === focusTarget.nodeId
+        }))
+      );
+    } else if (focusTarget.edgeId) {
+      const edge = latestEdgesRef.current.find((candidate) => candidate.id === focusTarget.edgeId);
+      if (!edge) return;
+      const source = latestNodesRef.current.find((candidate) => candidate.id === edge.source);
+      const target = latestNodesRef.current.find((candidate) => candidate.id === edge.target);
+      if (!source || !target) return;
+      void instance.setCenter(
+        (source.position.x + target.position.x) / 2,
+        (source.position.y + target.position.y) / 2,
+        focusOptions
+      );
+      handleEdgesChange(
+        latestEdgesRef.current.map((candidate) => ({
+          id: candidate.id,
+          type: "select",
+          selected: candidate.id === focusTarget.edgeId
+        }))
+      );
+    }
+  }, [focusTarget, handleNodesChange, handleEdgesChange]);
+  const displayNodes = useMemo(() => {
+    if (!nodeErrorCounts) return nodes;
+    return nodes.map((node) => {
+      const errorCount = nodeErrorCounts[node.id];
+      if (!errorCount) return node;
+      return { ...node, data: { ...node.data, hasError: true, errorCount } };
+    });
+  }, [nodes, nodeErrorCounts]);
+  const compensationBadgeIds = useMemo(
+    () => showCompensation ? new Set(compensatingStepIds(edges)) : null,
+    [showCompensation, edges]
+  );
+  const compensationNodes = useMemo(() => {
+    if (!compensationBadgeIds || compensationBadgeIds.size === 0) return displayNodes;
+    return displayNodes.map((node) => compensationBadgeIds.has(node.id) ? { ...node, data: { ...node.data, hasCompensation: true } } : node);
+  }, [displayNodes, compensationBadgeIds]);
+  const outcomeRowTransitions = useMemo(
+    () => edges.map((edge) => {
+      const data = edge.data ?? {};
+      return { fromStepId: edge.source, kind: data.kind, outcomeKind: data.outcomeKind };
+    }),
+    [edges]
+  );
+  const decoratedNodes = useMemo(
+    () => compensationNodes.map(
+      (node) => node.type === "invokeAgent" ? {
+        ...node,
+        data: {
+          ...node.data,
+          outcomeRows: buildAgentOutcomeRows(outcomeRowTransitions, node.id)
+        }
+      } : node
+    ),
+    [compensationNodes, outcomeRowTransitions]
+  );
+  const overlaidNodes = useMemo(() => {
+    if (!runOverlay) return decoratedNodes;
+    return decoratedNodes.map((node) => {
+      const runStatus = resolveNodeRunStatus(runOverlay, { id: node.id, type: node.type });
+      if (runStatus === "pending") return node;
+      const presentation = resolveStepPresentation(
+        runOverlay,
+        { id: node.id, status: runStatus },
+        { agentLabels: runAgentLabels ?? void 0, agentId: readNodeAgentId(node.data) }
+      );
+      return {
+        ...node,
+        data: {
+          ...node.data,
+          status: presentationToWorkflowStatus(presentation.state),
+          runReason: presentation.reason,
+          runStartedAt: presentation.startedAt
+        }
+      };
+    });
+  }, [decoratedNodes, runOverlay, runAgentLabels]);
+  const triggerModel = useMemo(
+    () => triggers ? buildTriggerNodeModel(triggers, { definitionEnabled }) : null,
+    [triggers, definitionEnabled]
+  );
+  const canvasNodes = useMemo(() => {
+    if (!triggerModel) return overlaidNodes;
+    return overlaidNodes.map(
+      (node) => node.type === "start" ? { ...node, data: { ...node.data, trigger: triggerModel, onOpenTriggers } } : node
+    );
+  }, [overlaidNodes, triggerModel, onOpenTriggers]);
+  const displayEdges = useMemo(() => {
+    const withGhosts = showCompensation ? [...edges, ...buildCompensationGhostEdges(edges)] : edges;
+    if (!runOverlay) return withGhosts;
+    return withGhosts.map(
+      (edge) => isRouteTaken(runOverlay, { transitionId: edge.id, fromStepId: edge.source, toStepId: edge.target }) ? { ...edge, data: { ...edge.data, state: "completed" } } : edge
+    );
+  }, [showCompensation, edges, runOverlay]);
+  const handleNodeClick = useCallback(
+    (event, node) => {
+      onNodeClickProp?.(event, node);
+    },
+    [onNodeClickProp]
+  );
   const nodeTypes = useMemo(
     () => ({
       start: StartNode,
@@ -113,89 +329,111 @@ function WorkflowGraphImpl({
       subWorkflow: SubWorkflowNode,
       waitForSignal: WaitForSignalNode,
       waitForTimer: WaitForTimerNode,
+      waitForCondition: WaitForConditionNode,
       parallelFork: ParallelForkNode,
-      parallelJoin: ParallelJoinNode
+      parallelJoin: ParallelJoinNode,
+      invokeAgent: InvokeAgentNode,
+      ifElse: IfElseNode,
+      switch: SwitchNode,
+      [ANNOTATION_NOTE_NODE_TYPE]: StickyNoteNode,
+      [ANNOTATION_GROUP_NODE_TYPE]: AnnotationGroupNode
     }),
     []
   );
   const edgeTypes = useMemo(
     () => ({
-      workflowTransition: WorkflowTransitionEdge
+      [WORKFLOW_TRANSITION_EDGE_TYPE]: WorkflowTransitionEdge,
+      workflowDataMapping: WorkflowDataMappingEdge,
+      [WORKFLOW_COMPENSATION_GHOST_EDGE_TYPE]: WorkflowCompensationGhostEdge
     }),
     []
   );
-  return /* @__PURE__ */ jsx("div", { className: `workflow-graph-container ${className}`, style: { height }, children: /* @__PURE__ */ jsxs(
-    ReactFlow,
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      nodes,
-      edges,
-      nodeTypes,
-      edgeTypes,
-      onNodesChange: handleNodesChange,
-      onEdgesChange: handleEdgesChange,
-      onConnect: editable ? onConnect : void 0,
-      onNodeClick: onNodeClickProp,
-      onEdgeClick: onEdgeClickProp,
-      connectionMode: ConnectionMode.Loose,
-      fitView: true,
-      fitViewOptions: {
-        padding: 0.2,
-        maxZoom: isCompactViewport ? 0.9 : 1
+      ref: containerRef,
+      className: `workflow-graph-container ${className}`,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      style: {
+        height,
+        // Edge colour tokens mapped to DS palette roles: control transitions vs
+        // drag-authored data-mapping edges (consumed by WorkflowDataMappingEdge).
+        ["--edge-control"]: "var(--primary)",
+        ["--edge-data"]: "var(--muted-foreground)"
       },
-      minZoom: 0.1,
-      maxZoom: 2,
-      defaultEdgeOptions: {
-        type: "workflowTransition",
-        animated: false,
-        markerEnd: {
-          type: MarkerType.ArrowClosed,
-          width: 16,
-          height: 16,
-          color: "#9ca3af"
+      children: /* @__PURE__ */ jsxs(
+        ReactFlow,
+        {
+          nodes: canvasNodes,
+          edges: displayEdges,
+          nodeTypes,
+          edgeTypes,
+          onNodesChange: handleNodesChange,
+          onEdgesChange: handleEdgesChange,
+          onConnect: editable ? onConnect : void 0,
+          onReconnect: editable ? onReconnectProp : void 0,
+          edgesReconnectable: editable && !!onReconnectProp,
+          onNodeClick: handleNodeClick,
+          onEdgeClick: onEdgeClickProp,
+          onInit: (instance) => {
+            reactFlowInstanceRef.current = instance;
+          },
+          connectionMode: ConnectionMode.Loose,
+          connectionLineType: ConnectionLineType.Bezier,
+          fitView: true,
+          fitViewOptions,
+          minZoom: 0.1,
+          maxZoom: 2,
+          defaultEdgeOptions: {
+            type: WORKFLOW_TRANSITION_EDGE_TYPE,
+            animated: false,
+            markerEnd: ROUTE_MARKER_END
+          },
+          nodesDraggable: editable,
+          nodesConnectable: editable,
+          elementsSelectable: editable,
+          proOptions: { hideAttribution: true },
+          children: [
+            /* @__PURE__ */ jsx(
+              Background,
+              {
+                variant: BackgroundVariant.Dots,
+                gap: backgroundDotGap,
+                size: 1,
+                color: backgroundDotColor
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Controls,
+              {
+                showZoom: true,
+                showFitView: true,
+                showInteractive: false,
+                position: "bottom-left",
+                className: `!bg-card !border-border !shadow-md [&>button]:!bg-card [&>button]:!border-border [&>button]:!fill-foreground [&>button:hover]:!bg-muted ${isCompactViewport ? "scale-90 origin-bottom-left" : ""}`
+              }
+            ),
+            !isCompactViewport && /* @__PURE__ */ jsx(
+              MiniMap,
+              {
+                nodeStrokeWidth: 3,
+                nodeColor: (node) => {
+                  const status = toWorkflowStatus(node.data?.status);
+                  return STATUS_COLORS[status]?.hex || STATUS_COLORS.not_started.hex;
+                },
+                maskColor: "rgba(0, 0, 0, 0.1)",
+                position: "bottom-right",
+                className: "!bg-card !border !border-border !rounded-lg"
+              }
+            ),
+            !editable && !isCompactViewport && /* @__PURE__ */ jsx(Panel, { position: "top-left", style: { margin: 10 }, children: /* @__PURE__ */ jsx("div", { className: "bg-card rounded-lg shadow-sm border border-border px-4 py-2", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-medium", children: t("workflows.graph.visualization") }) }) }),
+            editable && !isCompactViewport && /* @__PURE__ */ jsx(Panel, { position: "top-left", style: { margin: 10 }, children: /* @__PURE__ */ jsx(Alert, { status: "information", icon: /* @__PURE__ */ jsx(Edit3, { "aria-hidden": "true" }), className: "max-w-sm", children: /* @__PURE__ */ jsx(AlertDescription, { className: "font-medium", children: t("workflows.graph.editModeInfo") }) }) })
+          ]
         }
-      },
-      nodesDraggable: editable,
-      nodesConnectable: editable,
-      elementsSelectable: editable,
-      proOptions: { hideAttribution: true },
-      children: [
-        /* @__PURE__ */ jsx(
-          Background,
-          {
-            variant: BackgroundVariant.Dots,
-            gap: 16,
-            size: 1,
-            color: backgroundDotColor
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Controls,
-          {
-            showZoom: true,
-            showFitView: true,
-            showInteractive: false,
-            position: isCompactViewport ? "bottom-right" : "top-right",
-            className: `!bg-card !border-border !shadow-md [&>button]:!bg-card [&>button]:!border-border [&>button]:!fill-foreground [&>button:hover]:!bg-muted ${isCompactViewport ? "scale-90 origin-bottom-right" : ""}`
-          }
-        ),
-        !isCompactViewport && /* @__PURE__ */ jsx(
-          MiniMap,
-          {
-            nodeStrokeWidth: 3,
-            nodeColor: (node) => {
-              const status = node.data?.status || "not_started";
-              return STATUS_COLORS[status]?.hex || STATUS_COLORS.not_started.hex;
-            },
-            maskColor: "rgba(0, 0, 0, 0.1)",
-            position: "bottom-left",
-            className: "!bg-card !border !border-border !rounded-lg"
-          }
-        ),
-        !editable && !isCompactViewport && /* @__PURE__ */ jsx(Panel, { position: "top-left", style: { margin: 10 }, children: /* @__PURE__ */ jsx("div", { className: "bg-card rounded-lg shadow-sm border border-border px-4 py-2", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-medium", children: t("workflows.graph.visualization") }) }) }),
-        editable && !isCompactViewport && /* @__PURE__ */ jsx(Panel, { position: "top-left", style: { margin: 10 }, children: /* @__PURE__ */ jsx(Alert, { status: "information", icon: /* @__PURE__ */ jsx(Edit3, { "aria-hidden": "true" }), className: "max-w-sm", children: /* @__PURE__ */ jsx(AlertDescription, { className: "font-medium", children: t("workflows.graph.editModeInfo") }) }) })
-      ]
+      )
     }
-  ) });
+  );
 }
 export {
   WorkflowGraphImpl as default