@open-mercato/core 0.6.4-develop.3944.1.4100aa7fbe → 0.6.4-develop.3949.1.adc3d0b3b1

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-[build:core] found 2634 entry points
+[build:core] found 2636 entry points
 [build:core] built successfully
 [build:core:generated] found 172 entry points
 [build:core:generated] built successfully

package/dist/global.d.js

@@ -0,0 +1 @@
+//# sourceMappingURL=global.d.js.map

package/dist/global.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

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

@@ -1,193 +1,36 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useEffect, useState } from "react";
-import {
-  ReactFlow,
-  Controls,
-  Background,
-  BackgroundVariant,
-  MiniMap,
-  Panel,
-  useNodesState,
-  useEdgesState,
-  addEdge,
-  ConnectionMode,
-  MarkerType
-} from "@xyflow/react";
-import { StartNode, EndNode, UserTaskNode, AutomatedNode, SubWorkflowNode, WaitForSignalNode, WaitForTimerNode } from "./nodes/index.js";
-import { WorkflowTransitionEdge } from "./WorkflowTransitionEdge.js";
-import { STATUS_COLORS } 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";
-function WorkflowGraph({
-  initialNodes = [],
-  initialEdges = [],
-  onNodesChange: onNodesChangeProp,
-  onEdgesChange: onEdgesChangeProp,
-  onNodeClick: onNodeClickProp,
-  onEdgeClick: onEdgeClickProp,
-  onConnect: onConnectProp,
-  editable = false,
-  className = "",
-  height = "600px"
-}) {
-  const t = useT();
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const { resolvedTheme } = useTheme();
-  const isDark = resolvedTheme === "dark";
-  const backgroundDotColor = isDark ? "#374151" : "#e5e7eb";
-  const [isCompactViewport, setIsCompactViewport] = useState(false);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const mediaQuery = window.matchMedia("(max-width: 1279px)");
-    const updateViewportMode = () => setIsCompactViewport(mediaQuery.matches);
-    updateViewportMode();
-    mediaQuery.addEventListener("change", updateViewportMode);
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import dynamic from "next/dynamic";
+import { Spinner } from "@open-mercato/ui/primitives/spinner";
+const WorkflowGraphImpl = dynamic(() => import("./WorkflowGraphImpl.js"), {
+  ssr: false,
+  loading: () => null
+});
+function WorkflowGraphPlaceholder({ height }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "workflow-graph-container flex items-center justify-center rounded-lg border border-border bg-muted/30",
+      style: { height },
+      children: /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6 text-muted-foreground" })
+    }
+  );
+}
+function WorkflowGraph(props) {
+  const { height = "600px" } = props;
+  const [isImplReady, setIsImplReady] = React.useState(false);
+  React.useEffect(() => {
+    let cancelled = false;
+    void import("./WorkflowGraphImpl.js").then(() => {
+      if (!cancelled) setIsImplReady(true);
+    });
     return () => {
-      mediaQuery.removeEventListener("change", updateViewportMode);
+      cancelled = true;
     };
   }, []);
-  useEffect(() => {
-    setNodes(initialNodes);
-  }, [initialNodes, setNodes]);
-  useEffect(() => {
-    setEdges(initialEdges);
-  }, [initialEdges, setEdges]);
-  const onConnect = useCallback(
-    (connection) => {
-      if (onConnectProp) {
-        onConnectProp(connection);
-      } else {
-        const newEdge = {
-          ...connection,
-          type: "workflowTransition",
-          animated: false,
-          markerEnd: {
-            type: MarkerType.ArrowClosed,
-            width: 16,
-            height: 16,
-            color: "#9ca3af"
-          }
-        };
-        setEdges((eds) => addEdge(newEdge, eds));
-      }
-    },
-    [setEdges, onConnectProp]
-  );
-  const handleNodesChange = useCallback(
-    (changes) => {
-      onNodesChange(changes);
-      if (onNodesChangeProp) {
-        onNodesChangeProp(changes);
-      }
-    },
-    [onNodesChange, onNodesChangeProp]
-  );
-  const handleEdgesChange = useCallback(
-    (changes) => {
-      onEdgesChange(changes);
-      if (onEdgesChangeProp) {
-        onEdgesChangeProp(changes);
-      }
-    },
-    [onEdgesChange, onEdgesChangeProp]
-  );
-  const nodeTypes = useMemo(
-    () => ({
-      start: StartNode,
-      end: EndNode,
-      userTask: UserTaskNode,
-      automated: AutomatedNode,
-      subWorkflow: SubWorkflowNode,
-      waitForSignal: WaitForSignalNode,
-      waitForTimer: WaitForTimerNode
-    }),
-    []
-  );
-  const edgeTypes = useMemo(
-    () => ({
-      workflowTransition: WorkflowTransitionEdge
-    }),
-    []
-  );
-  return /* @__PURE__ */ jsx("div", { className: `workflow-graph-container ${className}`, style: { height }, children: /* @__PURE__ */ jsxs(
-    ReactFlow,
-    {
-      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
-      },
-      minZoom: 0.1,
-      maxZoom: 2,
-      defaultEdgeOptions: {
-        type: "workflowTransition",
-        animated: false,
-        markerEnd: {
-          type: MarkerType.ArrowClosed,
-          width: 16,
-          height: 16,
-          color: "#9ca3af"
-        }
-      },
-      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__ */ jsxs(Alert, { variant: "info", className: "max-w-sm", children: [
-          /* @__PURE__ */ jsx(Edit3, { className: "size-4" }),
-          /* @__PURE__ */ jsx(AlertDescription, { className: "font-medium", children: t("workflows.graph.editModeInfo") })
-        ] }) })
-      ]
-    }
-  ) });
+  if (!isImplReady) return /* @__PURE__ */ jsx(WorkflowGraphPlaceholder, { height });
+  return /* @__PURE__ */ jsx(WorkflowGraphImpl, { ...props });
 }
 function WorkflowGraphReadOnly({
   nodes,

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 { useCallback, useMemo, useEffect, useState } from 'react'\nimport {\n  ReactFlow,\n  Node,\n  Edge,\n  Controls,\n  Background,\n  BackgroundVariant,\n  MiniMap,\n  Panel,\n  useNodesState,\n  useEdgesState,\n  addEdge,\n  Connection,\n  ConnectionMode,\n  MarkerType,\n} from '@xyflow/react'\nimport {StartNode, EndNode, UserTaskNode, AutomatedNode, SubWorkflowNode, WaitForSignalNode, WaitForTimerNode} from './nodes'\nimport { WorkflowTransitionEdge } from './WorkflowTransitionEdge'\nimport { STATUS_COLORS } from '../lib/status-colors'\nimport { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'\nimport { Edit3 } from 'lucide-react'\nimport { useTheme } from '@open-mercato/ui/theme'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\n// NOTE: ReactFlow styles should be imported in the page that uses this component\n// or in a global CSS file. Import: '@xyflow/react/dist/style.css'\n\nexport interface WorkflowGraphProps {\n  initialNodes?: Node[]\n  initialEdges?: Edge[]\n  onNodesChange?: (changes: any[]) => void\n  onEdgesChange?: (changes: any[]) => 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\n/**\n * WorkflowGraph - ReactFlow wrapper component for workflow visualization\n *\n * Provides a graph-based view of workflow definitions with:\n * - Pan and zoom controls\n * - Background grid\n * - Mini-map for navigation\n * - Optional editing capabilities\n */\nexport function WorkflowGraph({\n  initialNodes = [],\n  initialEdges = [],\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  onNodeClick: onNodeClickProp,\n  onEdgeClick: onEdgeClickProp,\n  onConnect: onConnectProp,\n  editable = false,\n  className = '',\n  height = '600px',\n}: WorkflowGraphProps) {\n  const t = useT()\n  // Use ReactFlow hooks for node and edge state management\n  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)\n  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)\n\n  // Get theme for dark mode support\n  const { resolvedTheme } = useTheme()\n  const isDark = resolvedTheme === 'dark'\n  const backgroundDotColor = isDark ? '#374151' : '#e5e7eb'\n  const [isCompactViewport, setIsCompactViewport] = useState(false)\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n    const mediaQuery = window.matchMedia('(max-width: 1279px)')\n    const updateViewportMode = () => setIsCompactViewport(mediaQuery.matches)\n\n    updateViewportMode()\n    mediaQuery.addEventListener('change', updateViewportMode)\n\n    return () => {\n      mediaQuery.removeEventListener('change', updateViewportMode)\n    }\n  }, [])\n\n  // Sync internal state when external state changes (e.g., when parent adds nodes)\n  useEffect(() => {\n    setNodes(initialNodes)\n  }, [initialNodes, setNodes])\n\n  useEffect(() => {\n    setEdges(initialEdges)\n  }, [initialEdges, setEdges])\n\n  // Handle connection between nodes (when user drags from one node to another)\n  const onConnect = useCallback(\n    (connection: Connection) => {\n      if (onConnectProp) {\n        // Let parent handle the connection\n        onConnectProp(connection)\n      } else {\n        // Fallback: handle internally if no parent callback\n        const newEdge = {\n          ...connection,\n          type: 'workflowTransition',\n          animated: false,\n          markerEnd: {\n            type: MarkerType.ArrowClosed,\n            width: 16,\n            height: 16,\n            color: '#9ca3af',\n          },\n        }\n        setEdges((eds) => addEdge(newEdge, eds))\n      }\n    },\n    [setEdges, onConnectProp]\n  )\n\n  // Notify parent when nodes change\n  const handleNodesChange = useCallback(\n    (changes: any) => {\n      onNodesChange(changes)\n      if (onNodesChangeProp) {\n        onNodesChangeProp(changes)\n      }\n    },\n    [onNodesChange, onNodesChangeProp]\n  )\n\n  // Notify parent when edges change\n  const handleEdgesChange = useCallback(\n    (changes: any) => {\n      onEdgesChange(changes)\n      if (onEdgesChangeProp) {\n        onEdgesChangeProp(changes)\n      }\n    },\n    [onEdgesChange, onEdgesChangeProp]\n  )\n\n  // Register custom node types\n  const nodeTypes = useMemo(\n    () => ({\n      start: StartNode,\n      end: EndNode,\n      userTask: UserTaskNode,\n      automated: AutomatedNode,\n      subWorkflow: SubWorkflowNode,\n      waitForSignal: WaitForSignalNode,\n      waitForTimer: WaitForTimerNode,\n    }),\n    []\n  )\n\n  // Register custom edge types\n  const edgeTypes = useMemo(\n    () => ({\n      workflowTransition: WorkflowTransitionEdge,\n    }),\n    []\n  )\n\n  return (\n    <div className={`workflow-graph-container ${className}`} style={{ height }}>\n      <ReactFlow\n        nodes={nodes}\n        edges={edges}\n        nodeTypes={nodeTypes}\n        edgeTypes={edgeTypes}\n        onNodesChange={handleNodesChange}\n        onEdgesChange={handleEdgesChange}\n        onConnect={editable ? onConnect : undefined}\n        onNodeClick={onNodeClickProp}\n        onEdgeClick={onEdgeClickProp}\n        connectionMode={ConnectionMode.Loose}\n        fitView\n        fitViewOptions={{\n          padding: 0.2,\n          maxZoom: isCompactViewport ? 0.9 : 1,\n        }}\n        minZoom={0.1}\n        maxZoom={2}\n        defaultEdgeOptions={{\n          type: 'workflowTransition',\n          animated: false,\n          markerEnd: {\n            type: MarkerType.ArrowClosed,\n            width: 16,\n            height: 16,\n            color: '#9ca3af',\n          },\n        }}\n        nodesDraggable={editable}\n        nodesConnectable={editable}\n        elementsSelectable={editable}\n        proOptions={{ hideAttribution: true }}\n      >\n        {/* Background grid for visual reference */}\n        <Background\n          variant={BackgroundVariant.Dots}\n          gap={16}\n          size={1}\n          color={backgroundDotColor}\n        />\n\n        {/* Zoom and pan controls */}\n        <Controls\n          showZoom={true}\n          showFitView={true}\n          showInteractive={false}\n          position={isCompactViewport ? 'bottom-right' : 'top-right'}\n          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' : ''}`}\n        />\n\n        {/* Mini-map for navigation in large workflows */}\n        {!isCompactViewport && (\n          <MiniMap\n            nodeStrokeWidth={3}\n            nodeColor={(node) => {\n              // Color nodes by status - using status-based colors\n              const status = (node.data?.status || 'not_started') as keyof typeof STATUS_COLORS\n              return STATUS_COLORS[status]?.hex || STATUS_COLORS.not_started.hex\n            }}\n            maskColor=\"rgba(0, 0, 0, 0.1)\"\n            position=\"bottom-left\"\n            className=\"!bg-card !border !border-border !rounded-lg\"\n          />\n        )}\n\n        {/* Info panel */}\n        {!editable && !isCompactViewport && (\n          <Panel position=\"top-left\" style={{ margin: 10 }}>\n            <div className=\"bg-card rounded-lg shadow-sm border border-border px-4 py-2\">\n              <p className=\"text-sm text-muted-foreground font-medium\">\n                {t('workflows.graph.visualization')}\n              </p>\n            </div>\n          </Panel>\n        )}\n\n        {editable && !isCompactViewport && (\n          <Panel position=\"top-left\" style={{ margin: 10 }}>\n            <Alert variant=\"info\" className=\"max-w-sm\">\n              <Edit3 className=\"size-4\" />\n              <AlertDescription className=\"font-medium\">\n                {t('workflows.graph.editModeInfo')}\n              </AlertDescription>\n            </Alert>\n          </Panel>\n        )}\n      </ReactFlow>\n    </div>\n  )\n}\n\n/**\n * WorkflowGraphReadOnly - Read-only version for viewing workflow execution\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": "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",
+  "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?: (changes: any[]) => void\n  onEdgesChange?: (changes: any[]) => 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;",
   "names": []
 }

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

@@ -0,0 +1,196 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "@xyflow/react/dist/style.css";
+import { useCallback, useMemo, useEffect, useState } from "react";
+import {
+  ReactFlow,
+  Controls,
+  Background,
+  BackgroundVariant,
+  MiniMap,
+  Panel,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  ConnectionMode,
+  MarkerType
+} from "@xyflow/react";
+import { StartNode, EndNode, UserTaskNode, AutomatedNode, SubWorkflowNode, WaitForSignalNode, WaitForTimerNode } from "./nodes/index.js";
+import { WorkflowTransitionEdge } from "./WorkflowTransitionEdge.js";
+import { STATUS_COLORS } 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";
+function WorkflowGraphImpl({
+  initialNodes = [],
+  initialEdges = [],
+  onNodesChange: onNodesChangeProp,
+  onEdgesChange: onEdgesChangeProp,
+  onNodeClick: onNodeClickProp,
+  onEdgeClick: onEdgeClickProp,
+  onConnect: onConnectProp,
+  editable = false,
+  className = "",
+  height = "600px"
+}) {
+  const t = useT();
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === "dark";
+  const backgroundDotColor = isDark ? "#374151" : "#e5e7eb";
+  const [isCompactViewport, setIsCompactViewport] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(max-width: 1279px)");
+    const updateViewportMode = () => setIsCompactViewport(mediaQuery.matches);
+    updateViewportMode();
+    mediaQuery.addEventListener("change", updateViewportMode);
+    return () => {
+      mediaQuery.removeEventListener("change", updateViewportMode);
+    };
+  }, []);
+  useEffect(() => {
+    setNodes(initialNodes);
+  }, [initialNodes, setNodes]);
+  useEffect(() => {
+    setEdges(initialEdges);
+  }, [initialEdges, setEdges]);
+  const onConnect = useCallback(
+    (connection) => {
+      if (onConnectProp) {
+        onConnectProp(connection);
+      } else {
+        const newEdge = {
+          ...connection,
+          type: "workflowTransition",
+          animated: false,
+          markerEnd: {
+            type: MarkerType.ArrowClosed,
+            width: 16,
+            height: 16,
+            color: "#9ca3af"
+          }
+        };
+        setEdges((eds) => addEdge(newEdge, eds));
+      }
+    },
+    [setEdges, onConnectProp]
+  );
+  const handleNodesChange = useCallback(
+    (changes) => {
+      onNodesChange(changes);
+      if (onNodesChangeProp) {
+        onNodesChangeProp(changes);
+      }
+    },
+    [onNodesChange, onNodesChangeProp]
+  );
+  const handleEdgesChange = useCallback(
+    (changes) => {
+      onEdgesChange(changes);
+      if (onEdgesChangeProp) {
+        onEdgesChangeProp(changes);
+      }
+    },
+    [onEdgesChange, onEdgesChangeProp]
+  );
+  const nodeTypes = useMemo(
+    () => ({
+      start: StartNode,
+      end: EndNode,
+      userTask: UserTaskNode,
+      automated: AutomatedNode,
+      subWorkflow: SubWorkflowNode,
+      waitForSignal: WaitForSignalNode,
+      waitForTimer: WaitForTimerNode
+    }),
+    []
+  );
+  const edgeTypes = useMemo(
+    () => ({
+      workflowTransition: WorkflowTransitionEdge
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx("div", { className: `workflow-graph-container ${className}`, style: { height }, children: /* @__PURE__ */ jsxs(
+    ReactFlow,
+    {
+      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
+      },
+      minZoom: 0.1,
+      maxZoom: 2,
+      defaultEdgeOptions: {
+        type: "workflowTransition",
+        animated: false,
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+          width: 16,
+          height: 16,
+          color: "#9ca3af"
+        }
+      },
+      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__ */ jsxs(Alert, { variant: "info", className: "max-w-sm", children: [
+          /* @__PURE__ */ jsx(Edit3, { className: "size-4" }),
+          /* @__PURE__ */ jsx(AlertDescription, { className: "font-medium", children: t("workflows.graph.editModeInfo") })
+        ] }) })
+      ]
+    }
+  ) });
+}
+export {
+  WorkflowGraphImpl as default
+};
+//# sourceMappingURL=WorkflowGraphImpl.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/workflows/components/WorkflowGraphImpl.tsx"],
+  "sourcesContent": ["'use client'\n\nimport '@xyflow/react/dist/style.css'\n\nimport { useCallback, useMemo, useEffect, useState } from 'react'\nimport {\n  ReactFlow,\n  Node,\n  Edge,\n  Controls,\n  Background,\n  BackgroundVariant,\n  MiniMap,\n  Panel,\n  useNodesState,\n  useEdgesState,\n  addEdge,\n  Connection,\n  ConnectionMode,\n  MarkerType,\n} from '@xyflow/react'\nimport {StartNode, EndNode, UserTaskNode, AutomatedNode, SubWorkflowNode, WaitForSignalNode, WaitForTimerNode} from './nodes'\nimport { WorkflowTransitionEdge } from './WorkflowTransitionEdge'\nimport { STATUS_COLORS } from '../lib/status-colors'\nimport { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'\nimport { Edit3 } from 'lucide-react'\nimport { useTheme } from '@open-mercato/ui/theme'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\nexport interface WorkflowGraphImplProps {\n  initialNodes?: Node[]\n  initialEdges?: Edge[]\n  onNodesChange?: (changes: any[]) => void\n  onEdgesChange?: (changes: any[]) => 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\nexport default function WorkflowGraphImpl({\n  initialNodes = [],\n  initialEdges = [],\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  onNodeClick: onNodeClickProp,\n  onEdgeClick: onEdgeClickProp,\n  onConnect: onConnectProp,\n  editable = false,\n  className = '',\n  height = '600px',\n}: WorkflowGraphImplProps) {\n  const t = useT()\n  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)\n  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)\n\n  const { resolvedTheme } = useTheme()\n  const isDark = resolvedTheme === 'dark'\n  const backgroundDotColor = isDark ? '#374151' : '#e5e7eb'\n  const [isCompactViewport, setIsCompactViewport] = useState(false)\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n    const mediaQuery = window.matchMedia('(max-width: 1279px)')\n    const updateViewportMode = () => setIsCompactViewport(mediaQuery.matches)\n\n    updateViewportMode()\n    mediaQuery.addEventListener('change', updateViewportMode)\n\n    return () => {\n      mediaQuery.removeEventListener('change', updateViewportMode)\n    }\n  }, [])\n\n  useEffect(() => {\n    setNodes(initialNodes)\n  }, [initialNodes, setNodes])\n\n  useEffect(() => {\n    setEdges(initialEdges)\n  }, [initialEdges, setEdges])\n\n  const onConnect = useCallback(\n    (connection: Connection) => {\n      if (onConnectProp) {\n        onConnectProp(connection)\n      } else {\n        const newEdge = {\n          ...connection,\n          type: 'workflowTransition',\n          animated: false,\n          markerEnd: {\n            type: MarkerType.ArrowClosed,\n            width: 16,\n            height: 16,\n            color: '#9ca3af',\n          },\n        }\n        setEdges((eds) => addEdge(newEdge, eds))\n      }\n    },\n    [setEdges, onConnectProp]\n  )\n\n  const handleNodesChange = useCallback(\n    (changes: any) => {\n      onNodesChange(changes)\n      if (onNodesChangeProp) {\n        onNodesChangeProp(changes)\n      }\n    },\n    [onNodesChange, onNodesChangeProp]\n  )\n\n  const handleEdgesChange = useCallback(\n    (changes: any) => {\n      onEdgesChange(changes)\n      if (onEdgesChangeProp) {\n        onEdgesChangeProp(changes)\n      }\n    },\n    [onEdgesChange, onEdgesChangeProp]\n  )\n\n  const nodeTypes = useMemo(\n    () => ({\n      start: StartNode,\n      end: EndNode,\n      userTask: UserTaskNode,\n      automated: AutomatedNode,\n      subWorkflow: SubWorkflowNode,\n      waitForSignal: WaitForSignalNode,\n      waitForTimer: WaitForTimerNode,\n    }),\n    []\n  )\n\n  const edgeTypes = useMemo(\n    () => ({\n      workflowTransition: WorkflowTransitionEdge,\n    }),\n    []\n  )\n\n  return (\n    <div className={`workflow-graph-container ${className}`} style={{ height }}>\n      <ReactFlow\n        nodes={nodes}\n        edges={edges}\n        nodeTypes={nodeTypes}\n        edgeTypes={edgeTypes}\n        onNodesChange={handleNodesChange}\n        onEdgesChange={handleEdgesChange}\n        onConnect={editable ? onConnect : undefined}\n        onNodeClick={onNodeClickProp}\n        onEdgeClick={onEdgeClickProp}\n        connectionMode={ConnectionMode.Loose}\n        fitView\n        fitViewOptions={{\n          padding: 0.2,\n          maxZoom: isCompactViewport ? 0.9 : 1,\n        }}\n        minZoom={0.1}\n        maxZoom={2}\n        defaultEdgeOptions={{\n          type: 'workflowTransition',\n          animated: false,\n          markerEnd: {\n            type: MarkerType.ArrowClosed,\n            width: 16,\n            height: 16,\n            color: '#9ca3af',\n          },\n        }}\n        nodesDraggable={editable}\n        nodesConnectable={editable}\n        elementsSelectable={editable}\n        proOptions={{ hideAttribution: true }}\n      >\n        <Background\n          variant={BackgroundVariant.Dots}\n          gap={16}\n          size={1}\n          color={backgroundDotColor}\n        />\n\n        <Controls\n          showZoom={true}\n          showFitView={true}\n          showInteractive={false}\n          position={isCompactViewport ? 'bottom-right' : 'top-right'}\n          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' : ''}`}\n        />\n\n        {!isCompactViewport && (\n          <MiniMap\n            nodeStrokeWidth={3}\n            nodeColor={(node) => {\n              const status = (node.data?.status || 'not_started') as keyof typeof STATUS_COLORS\n              return STATUS_COLORS[status]?.hex || STATUS_COLORS.not_started.hex\n            }}\n            maskColor=\"rgba(0, 0, 0, 0.1)\"\n            position=\"bottom-left\"\n            className=\"!bg-card !border !border-border !rounded-lg\"\n          />\n        )}\n\n        {!editable && !isCompactViewport && (\n          <Panel position=\"top-left\" style={{ margin: 10 }}>\n            <div className=\"bg-card rounded-lg shadow-sm border border-border px-4 py-2\">\n              <p className=\"text-sm text-muted-foreground font-medium\">\n                {t('workflows.graph.visualization')}\n              </p>\n            </div>\n          </Panel>\n        )}\n\n        {editable && !isCompactViewport && (\n          <Panel position=\"top-left\" style={{ margin: 10 }}>\n            <Alert variant=\"info\" className=\"max-w-sm\">\n              <Edit3 className=\"size-4\" />\n              <AlertDescription className=\"font-medium\">\n                {t('workflows.graph.editModeInfo')}\n              </AlertDescription>\n            </Alert>\n          </Panel>\n        )}\n      </ReactFlow>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/core",
-  "version": "0.6.4-develop.3944.1.4100aa7fbe",
+  "version": "0.6.4-develop.3949.1.adc3d0b3b1",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -243,16 +243,16 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@open-mercato/ai-assistant": "0.6.4-develop.3944.1.4100aa7fbe",
-    "@open-mercato/shared": "0.6.4-develop.3944.1.4100aa7fbe",
-    "@open-mercato/ui": "0.6.4-develop.3944.1.4100aa7fbe",
+    "@open-mercato/ai-assistant": "0.6.4-develop.3949.1.adc3d0b3b1",
+    "@open-mercato/shared": "0.6.4-develop.3949.1.adc3d0b3b1",
+    "@open-mercato/ui": "0.6.4-develop.3949.1.adc3d0b3b1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@open-mercato/ai-assistant": "0.6.4-develop.3944.1.4100aa7fbe",
-    "@open-mercato/shared": "0.6.4-develop.3944.1.4100aa7fbe",
-    "@open-mercato/ui": "0.6.4-develop.3944.1.4100aa7fbe",
+    "@open-mercato/ai-assistant": "0.6.4-develop.3949.1.adc3d0b3b1",
+    "@open-mercato/shared": "0.6.4-develop.3949.1.adc3d0b3b1",
+    "@open-mercato/ui": "0.6.4-develop.3949.1.adc3d0b3b1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/global.d.ts

@@ -0,0 +1,9 @@
+// Ambient module declarations for the @open-mercato/core TypeScript context.
+//
+// Next.js apps get these declarations via `next-env.d.ts`, but workspace
+// packages need them locally because they may import CSS side-effects from
+// .tsx files (e.g. `import 'pkg/dist/style.css'` inside a lazy-loaded
+// client component).
+
+declare module '*.css'
+declare module '*.scss'

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

@@ -1,32 +1,9 @@
 'use client'
 
-import { useCallback, useMemo, useEffect, useState } from 'react'
-import {
-  ReactFlow,
-  Node,
-  Edge,
-  Controls,
-  Background,
-  BackgroundVariant,
-  MiniMap,
-  Panel,
-  useNodesState,
-  useEdgesState,
-  addEdge,
-  Connection,
-  ConnectionMode,
-  MarkerType,
-} from '@xyflow/react'
-import {StartNode, EndNode, UserTaskNode, AutomatedNode, SubWorkflowNode, WaitForSignalNode, WaitForTimerNode} from './nodes'
-import { WorkflowTransitionEdge } from './WorkflowTransitionEdge'
-import { STATUS_COLORS } from '../lib/status-colors'
-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'
-
-// NOTE: ReactFlow styles should be imported in the page that uses this component
-// or in a global CSS file. Import: '@xyflow/react/dist/style.css'
+import * as React from 'react'
+import dynamic from 'next/dynamic'
+import type { Node, Edge, Connection } from '@xyflow/react'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
 
 export interface WorkflowGraphProps {
   initialNodes?: Node[]
@@ -41,224 +18,51 @@ export interface WorkflowGraphProps {
   height?: string
 }
 
+const WorkflowGraphImpl = dynamic(() => import('./WorkflowGraphImpl'), {
+  ssr: false,
+  loading: () => null,
+})
+
+function WorkflowGraphPlaceholder({ height }: { height: string }) {
+  return (
+    <div
+      className="workflow-graph-container flex items-center justify-center rounded-lg border border-border bg-muted/30"
+      style={{ height }}
+    >
+      <Spinner className="h-6 w-6 text-muted-foreground" />
+    </div>
+  )
+}
+
 /**
- * WorkflowGraph - ReactFlow wrapper component for workflow visualization
+ * WorkflowGraph — lazy-loaded ReactFlow wrapper.
  *
- * Provides a graph-based view of workflow definitions with:
- * - Pan and zoom controls
- * - Background grid
- * - Mini-map for navigation
- * - Optional editing capabilities
+ * @xyflow/react is loaded via next/dynamic({ ssr: false }) so the ~12 MB
+ * package only enters the Turbopack module graph when this component
+ * actually renders.
  */
-export function WorkflowGraph({
-  initialNodes = [],
-  initialEdges = [],
-  onNodesChange: onNodesChangeProp,
-  onEdgesChange: onEdgesChangeProp,
-  onNodeClick: onNodeClickProp,
-  onEdgeClick: onEdgeClickProp,
-  onConnect: onConnectProp,
-  editable = false,
-  className = '',
-  height = '600px',
-}: WorkflowGraphProps) {
-  const t = useT()
-  // Use ReactFlow hooks for node and edge state management
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
-
-  // Get theme for dark mode support
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-  const backgroundDotColor = isDark ? '#374151' : '#e5e7eb'
-  const [isCompactViewport, setIsCompactViewport] = useState(false)
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-    const mediaQuery = window.matchMedia('(max-width: 1279px)')
-    const updateViewportMode = () => setIsCompactViewport(mediaQuery.matches)
-
-    updateViewportMode()
-    mediaQuery.addEventListener('change', updateViewportMode)
-
+export function WorkflowGraph(props: WorkflowGraphProps) {
+  const { height = '600px' } = props
+  // Track impl-chunk readiness so the loading placeholder respects the
+  // caller's `height` prop (next/dynamic's `loading` cannot access props).
+  // The browser caches the module, so the duplicate `import()` is free.
+  const [isImplReady, setIsImplReady] = React.useState(false)
+  React.useEffect(() => {
+    let cancelled = false
+    void import('./WorkflowGraphImpl').then(() => {
+      if (!cancelled) setIsImplReady(true)
+    })
     return () => {
-      mediaQuery.removeEventListener('change', updateViewportMode)
+      cancelled = true
     }
   }, [])
 
-  // Sync internal state when external state changes (e.g., when parent adds nodes)
-  useEffect(() => {
-    setNodes(initialNodes)
-  }, [initialNodes, setNodes])
-
-  useEffect(() => {
-    setEdges(initialEdges)
-  }, [initialEdges, setEdges])
-
-  // Handle connection between nodes (when user drags from one node to another)
-  const onConnect = useCallback(
-    (connection: Connection) => {
-      if (onConnectProp) {
-        // Let parent handle the connection
-        onConnectProp(connection)
-      } else {
-        // Fallback: handle internally if no parent callback
-        const newEdge = {
-          ...connection,
-          type: 'workflowTransition',
-          animated: false,
-          markerEnd: {
-            type: MarkerType.ArrowClosed,
-            width: 16,
-            height: 16,
-            color: '#9ca3af',
-          },
-        }
-        setEdges((eds) => addEdge(newEdge, eds))
-      }
-    },
-    [setEdges, onConnectProp]
-  )
-
-  // Notify parent when nodes change
-  const handleNodesChange = useCallback(
-    (changes: any) => {
-      onNodesChange(changes)
-      if (onNodesChangeProp) {
-        onNodesChangeProp(changes)
-      }
-    },
-    [onNodesChange, onNodesChangeProp]
-  )
-
-  // Notify parent when edges change
-  const handleEdgesChange = useCallback(
-    (changes: any) => {
-      onEdgesChange(changes)
-      if (onEdgesChangeProp) {
-        onEdgesChangeProp(changes)
-      }
-    },
-    [onEdgesChange, onEdgesChangeProp]
-  )
-
-  // Register custom node types
-  const nodeTypes = useMemo(
-    () => ({
-      start: StartNode,
-      end: EndNode,
-      userTask: UserTaskNode,
-      automated: AutomatedNode,
-      subWorkflow: SubWorkflowNode,
-      waitForSignal: WaitForSignalNode,
-      waitForTimer: WaitForTimerNode,
-    }),
-    []
-  )
-
-  // Register custom edge types
-  const edgeTypes = useMemo(
-    () => ({
-      workflowTransition: WorkflowTransitionEdge,
-    }),
-    []
-  )
-
-  return (
-    <div className={`workflow-graph-container ${className}`} style={{ height }}>
-      <ReactFlow
-        nodes={nodes}
-        edges={edges}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        onNodesChange={handleNodesChange}
-        onEdgesChange={handleEdgesChange}
-        onConnect={editable ? onConnect : undefined}
-        onNodeClick={onNodeClickProp}
-        onEdgeClick={onEdgeClickProp}
-        connectionMode={ConnectionMode.Loose}
-        fitView
-        fitViewOptions={{
-          padding: 0.2,
-          maxZoom: isCompactViewport ? 0.9 : 1,
-        }}
-        minZoom={0.1}
-        maxZoom={2}
-        defaultEdgeOptions={{
-          type: 'workflowTransition',
-          animated: false,
-          markerEnd: {
-            type: MarkerType.ArrowClosed,
-            width: 16,
-            height: 16,
-            color: '#9ca3af',
-          },
-        }}
-        nodesDraggable={editable}
-        nodesConnectable={editable}
-        elementsSelectable={editable}
-        proOptions={{ hideAttribution: true }}
-      >
-        {/* Background grid for visual reference */}
-        <Background
-          variant={BackgroundVariant.Dots}
-          gap={16}
-          size={1}
-          color={backgroundDotColor}
-        />
-
-        {/* Zoom and pan controls */}
-        <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' : ''}`}
-        />
-
-        {/* Mini-map for navigation in large workflows */}
-        {!isCompactViewport && (
-          <MiniMap
-            nodeStrokeWidth={3}
-            nodeColor={(node) => {
-              // Color nodes by status - using status-based colors
-              const status = (node.data?.status || 'not_started') as keyof typeof STATUS_COLORS
-              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"
-          />
-        )}
-
-        {/* Info panel */}
-        {!editable && !isCompactViewport && (
-          <Panel position="top-left" style={{ margin: 10 }}>
-            <div className="bg-card rounded-lg shadow-sm border border-border px-4 py-2">
-              <p className="text-sm text-muted-foreground font-medium">
-                {t('workflows.graph.visualization')}
-              </p>
-            </div>
-          </Panel>
-        )}
-
-        {editable && !isCompactViewport && (
-          <Panel position="top-left" style={{ margin: 10 }}>
-            <Alert variant="info" className="max-w-sm">
-              <Edit3 className="size-4" />
-              <AlertDescription className="font-medium">
-                {t('workflows.graph.editModeInfo')}
-              </AlertDescription>
-            </Alert>
-          </Panel>
-        )}
-      </ReactFlow>
-    </div>
-  )
+  if (!isImplReady) return <WorkflowGraphPlaceholder height={height} />
+  return <WorkflowGraphImpl {...props} />
 }
 
 /**
- * WorkflowGraphReadOnly - Read-only version for viewing workflow execution
+ * WorkflowGraphReadOnly — read-only viewer that reuses WorkflowGraph.
  */
 export function WorkflowGraphReadOnly({
   nodes,

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

@@ -0,0 +1,233 @@
+'use client'
+
+import '@xyflow/react/dist/style.css'
+
+import { useCallback, useMemo, useEffect, useState } from 'react'
+import {
+  ReactFlow,
+  Node,
+  Edge,
+  Controls,
+  Background,
+  BackgroundVariant,
+  MiniMap,
+  Panel,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  Connection,
+  ConnectionMode,
+  MarkerType,
+} from '@xyflow/react'
+import {StartNode, EndNode, UserTaskNode, AutomatedNode, SubWorkflowNode, WaitForSignalNode, WaitForTimerNode} from './nodes'
+import { WorkflowTransitionEdge } from './WorkflowTransitionEdge'
+import { STATUS_COLORS } from '../lib/status-colors'
+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'
+
+export interface WorkflowGraphImplProps {
+  initialNodes?: Node[]
+  initialEdges?: Edge[]
+  onNodesChange?: (changes: any[]) => void
+  onEdgesChange?: (changes: any[]) => void
+  onNodeClick?: (event: React.MouseEvent, node: Node) => void
+  onEdgeClick?: (event: React.MouseEvent, edge: Edge) => void
+  onConnect?: (connection: Connection) => void
+  editable?: boolean
+  className?: string
+  height?: string
+}
+
+export default function WorkflowGraphImpl({
+  initialNodes = [],
+  initialEdges = [],
+  onNodesChange: onNodesChangeProp,
+  onEdgesChange: onEdgesChangeProp,
+  onNodeClick: onNodeClickProp,
+  onEdgeClick: onEdgeClickProp,
+  onConnect: onConnectProp,
+  editable = false,
+  className = '',
+  height = '600px',
+}: WorkflowGraphImplProps) {
+  const t = useT()
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
+
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === 'dark'
+  const backgroundDotColor = isDark ? '#374151' : '#e5e7eb'
+  const [isCompactViewport, setIsCompactViewport] = useState(false)
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    const mediaQuery = window.matchMedia('(max-width: 1279px)')
+    const updateViewportMode = () => setIsCompactViewport(mediaQuery.matches)
+
+    updateViewportMode()
+    mediaQuery.addEventListener('change', updateViewportMode)
+
+    return () => {
+      mediaQuery.removeEventListener('change', updateViewportMode)
+    }
+  }, [])
+
+  useEffect(() => {
+    setNodes(initialNodes)
+  }, [initialNodes, setNodes])
+
+  useEffect(() => {
+    setEdges(initialEdges)
+  }, [initialEdges, setEdges])
+
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      if (onConnectProp) {
+        onConnectProp(connection)
+      } else {
+        const newEdge = {
+          ...connection,
+          type: 'workflowTransition',
+          animated: false,
+          markerEnd: {
+            type: MarkerType.ArrowClosed,
+            width: 16,
+            height: 16,
+            color: '#9ca3af',
+          },
+        }
+        setEdges((eds) => addEdge(newEdge, eds))
+      }
+    },
+    [setEdges, onConnectProp]
+  )
+
+  const handleNodesChange = useCallback(
+    (changes: any) => {
+      onNodesChange(changes)
+      if (onNodesChangeProp) {
+        onNodesChangeProp(changes)
+      }
+    },
+    [onNodesChange, onNodesChangeProp]
+  )
+
+  const handleEdgesChange = useCallback(
+    (changes: any) => {
+      onEdgesChange(changes)
+      if (onEdgesChangeProp) {
+        onEdgesChangeProp(changes)
+      }
+    },
+    [onEdgesChange, onEdgesChangeProp]
+  )
+
+  const nodeTypes = useMemo(
+    () => ({
+      start: StartNode,
+      end: EndNode,
+      userTask: UserTaskNode,
+      automated: AutomatedNode,
+      subWorkflow: SubWorkflowNode,
+      waitForSignal: WaitForSignalNode,
+      waitForTimer: WaitForTimerNode,
+    }),
+    []
+  )
+
+  const edgeTypes = useMemo(
+    () => ({
+      workflowTransition: WorkflowTransitionEdge,
+    }),
+    []
+  )
+
+  return (
+    <div className={`workflow-graph-container ${className}`} style={{ height }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        onNodesChange={handleNodesChange}
+        onEdgesChange={handleEdgesChange}
+        onConnect={editable ? onConnect : undefined}
+        onNodeClick={onNodeClickProp}
+        onEdgeClick={onEdgeClickProp}
+        connectionMode={ConnectionMode.Loose}
+        fitView
+        fitViewOptions={{
+          padding: 0.2,
+          maxZoom: isCompactViewport ? 0.9 : 1,
+        }}
+        minZoom={0.1}
+        maxZoom={2}
+        defaultEdgeOptions={{
+          type: 'workflowTransition',
+          animated: false,
+          markerEnd: {
+            type: MarkerType.ArrowClosed,
+            width: 16,
+            height: 16,
+            color: '#9ca3af',
+          },
+        }}
+        nodesDraggable={editable}
+        nodesConnectable={editable}
+        elementsSelectable={editable}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background
+          variant={BackgroundVariant.Dots}
+          gap={16}
+          size={1}
+          color={backgroundDotColor}
+        />
+
+        <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 && (
+          <MiniMap
+            nodeStrokeWidth={3}
+            nodeColor={(node) => {
+              const status = (node.data?.status || 'not_started') as keyof typeof STATUS_COLORS
+              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 && (
+          <Panel position="top-left" style={{ margin: 10 }}>
+            <div className="bg-card rounded-lg shadow-sm border border-border px-4 py-2">
+              <p className="text-sm text-muted-foreground font-medium">
+                {t('workflows.graph.visualization')}
+              </p>
+            </div>
+          </Panel>
+        )}
+
+        {editable && !isCompactViewport && (
+          <Panel position="top-left" style={{ margin: 10 }}>
+            <Alert variant="info" className="max-w-sm">
+              <Edit3 className="size-4" />
+              <AlertDescription className="font-medium">
+                {t('workflows.graph.editModeInfo')}
+              </AlertDescription>
+            </Alert>
+          </Panel>
+        )}
+      </ReactFlow>
+    </div>
+  )
+}