@open-mercato/core 0.6.6-develop.6094.1.28b081ea16 → 0.6.6-develop.6126.1.0b9392fdae

package/src/modules/workflows/components/WorkflowGraphImpl.tsx

@@ -2,7 +2,7 @@
 
 import '@xyflow/react/dist/style.css'
 
-import { useCallback, useMemo, useEffect, useState } from 'react'
+import { useCallback, useMemo, useEffect, useRef, useState } from 'react'
 import {
   ReactFlow,
   Node,
@@ -15,7 +15,11 @@ import {
   useNodesState,
   useEdgesState,
   addEdge,
+  applyNodeChanges,
+  applyEdgeChanges,
   Connection,
+  NodeChange,
+  EdgeChange,
   ConnectionMode,
   MarkerType,
 } from '@xyflow/react'
@@ -30,8 +34,8 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 export interface WorkflowGraphImplProps {
   initialNodes?: Node[]
   initialEdges?: Edge[]
-  onNodesChange?: (changes: any[]) => void
-  onEdgesChange?: (changes: any[]) => void
+  onNodesChange?: (nodes: Node[]) => void
+  onEdgesChange?: (edges: Edge[]) => void
   onNodeClick?: (event: React.MouseEvent, node: Node) => void
   onEdgeClick?: (event: React.MouseEvent, edge: Edge) => void
   onConnect?: (connection: Connection) => void
@@ -53,8 +57,16 @@ export default function WorkflowGraphImpl({
   height = '600px',
 }: WorkflowGraphImplProps) {
   const t = useT()
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
+  const [nodes, setNodes] = useNodesState(initialNodes)
+  const [edges, setEdges] = useEdgesState(initialEdges)
+
+  // Track the latest committed graph so the change reducers can run inside the
+  // lazy boundary (#3169) and forward the already-applied arrays to the parent,
+  // keeping React Flow's runtime out of the editor page chunk.
+  const latestNodesRef = useRef(nodes)
+  latestNodesRef.current = nodes
+  const latestEdgesRef = useRef(edges)
+  latestEdgesRef.current = edges
 
   const { resolvedTheme } = useTheme()
   const isDark = resolvedTheme === 'dark'
@@ -105,23 +117,25 @@ export default function WorkflowGraphImpl({
   )
 
   const handleNodesChange = useCallback(
-    (changes: any) => {
-      onNodesChange(changes)
+    (changes: NodeChange[]) => {
+      const nextNodes = applyNodeChanges(changes, latestNodesRef.current)
+      setNodes(nextNodes)
       if (onNodesChangeProp) {
-        onNodesChangeProp(changes)
+        onNodesChangeProp(nextNodes)
       }
     },
-    [onNodesChange, onNodesChangeProp]
+    [setNodes, onNodesChangeProp]
   )
 
   const handleEdgesChange = useCallback(
-    (changes: any) => {
-      onEdgesChange(changes)
+    (changes: EdgeChange[]) => {
+      const nextEdges = applyEdgeChanges(changes, latestEdgesRef.current)
+      setEdges(nextEdges)
       if (onEdgesChangeProp) {
-        onEdgesChangeProp(changes)
+        onEdgesChangeProp(nextEdges)
       }
     },
-    [onEdgesChange, onEdgesChangeProp]
+    [setEdges, onEdgesChangeProp]
   )
 
   const nodeTypes = useMemo(

package/src/modules/workflows/components/mobile/MobileVisualEditor.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import type { Node, Edge, NodeChange, EdgeChange, Connection } from '@xyflow/react'
+import type { Node, Edge, Connection } from '@xyflow/react'
 import { Button } from '@open-mercato/ui/primitives/button'
 import {
   Dialog,
@@ -21,8 +21,8 @@ export interface MobileVisualEditorProps {
   isSaving: boolean
   nodes: Node[]
   edges: Edge[]
-  onNodesChange: (changes: NodeChange[]) => void
-  onEdgesChange: (changes: EdgeChange[]) => void
+  onNodesChange: (nodes: Node[]) => void
+  onEdgesChange: (edges: Edge[]) => void
   onNodeClick: (event: React.MouseEvent, node: Node) => void
   onEdgeClick: (event: React.MouseEvent, edge: Edge) => void
   onConnect: (connection: Connection) => void

package/src/modules/workflows/frontend/checkout-demo/deriveCurrentStep.ts

@@ -0,0 +1,12 @@
+/**
+ * Derives the current workflow step from the running instance's `currentStepId`
+ * and the available workflow steps. This is a pure function of its inputs so the
+ * checkout demo can compute it during render instead of mirroring it into state.
+ */
+export function deriveCurrentStep<TStep extends { stepId: string }>(
+  currentStepId: string | undefined,
+  steps: TStep[],
+): TStep | null {
+  if (!currentStepId) return null
+  return steps.find((step) => step.stepId === currentStepId) ?? null
+}

package/src/modules/workflows/frontend/checkout-demo/page.tsx

@@ -14,6 +14,7 @@ import {
 import Link from 'next/link'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { deriveCurrentStep } from './deriveCurrentStep'
 
 interface CartItem {
   id: string // Product UUID
@@ -62,8 +63,6 @@ export default function CheckoutDemoPage() {
   const [advancing, setAdvancing] = useState(false)
   const [result, setResult] = useState<WorkflowResult | null>(null)
   const [error, setError] = useState<string | null>(null)
-  const [currentStep, setCurrentStep] = useState<StepInfo | null>(null)
-  const [availableSteps, setAvailableSteps] = useState<StepInfo[]>([])
   const [formData, setFormData] = useState<Record<string, any>>({})
   const [submittingTask, setSubmittingTask] = useState(false)
   const [taskError, setTaskError] = useState<string | null>(null)
@@ -270,21 +269,8 @@ export default function CheckoutDemoPage() {
     { stepId: 'end', stepName: 'Complete', stepType: 'END', description: 'Checkout completed' },
   ]
 
-  // Update current step and available steps when result changes
-  useEffect(() => {
-    if (result?.currentStepId) {
-      const current = workflowSteps.find(s => s.stepId === result.currentStepId)
-      setCurrentStep(current || null)
-
-      // Find next available steps (simple - just show next step)
-      const currentIndex = workflowSteps.findIndex(s => s.stepId === result.currentStepId)
-      if (currentIndex >= 0 && currentIndex < workflowSteps.length - 1) {
-        setAvailableSteps([workflowSteps[currentIndex + 1]])
-      } else {
-        setAvailableSteps([])
-      }
-    }
-  }, [result])
+  // Current step derived from the running instance and the workflow steps
+  const currentStep = deriveCurrentStep(result?.currentStepId, workflowSteps)
 
   // Add initial delay before polling for user tasks when workflow becomes PAUSED
   // This reduces race condition where API returns before background execution completes
@@ -1490,8 +1476,6 @@ export default function CheckoutDemoPage() {
                     onClick={() => {
                       setResult(null)
                       setError(null)
-                      setCurrentStep(null)
-                      setAvailableSteps([])
                     }}
                     variant="outline"
                     className="w-full"
@@ -1515,8 +1499,6 @@ export default function CheckoutDemoPage() {
                   onClick={() => {
                     setResult(null)
                     setError(null)
-                    setCurrentStep(null)
-                    setAvailableSteps([])
                   }}
                   className="w-full mt-6"
                 >
@@ -1773,8 +1755,6 @@ export default function CheckoutDemoPage() {
                     onClick={() => {
                       setResult(null)
                       setError(null)
-                      setCurrentStep(null)
-                      setAvailableSteps([])
                     }}
                     variant="outline"
                     className="w-full"

package/src/modules/workflows/lib/graph-utils.ts

@@ -1,4 +1,4 @@
-import { Node, Edge } from '@xyflow/react'
+import type { Node, Edge } from '@xyflow/react'
 import type { WorkflowDefinition } from '../data/entities'
 
 /**
@@ -659,3 +659,23 @@ export function generateTransitionId(fromStepId: string, toStepId: string): stri
   const id = `e_${fromStepId}_${toStepId}`
   return sanitizeId(id)
 }
+
+/**
+ * Append a new edge to the list, skipping duplicate connections.
+ *
+ * A plain-data replacement for React Flow's `addEdge` so the visual editor
+ * page does not pull the `@xyflow/react` runtime out of its lazy boundary
+ * (#3169). Mirrors `addEdge`'s dedup rule: an edge is dropped when one with
+ * the same source/target endpoints (and handles) already exists.
+ */
+export function appendWorkflowEdge(edges: Edge[], edge: Edge): Edge[] {
+  const isDuplicate = edges.some(
+    (existing) =>
+      existing.source === edge.source &&
+      existing.target === edge.target &&
+      // Match addEdge: empty-string and nullish handles are equivalent.
+      (existing.sourceHandle || null) === (edge.sourceHandle || null) &&
+      (existing.targetHandle || null) === (edge.targetHandle || null),
+  )
+  return isDuplicate ? edges : [...edges, edge]
+}