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

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

@@ -1,7 +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, useRef, 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  applyNodeChanges,\n  applyEdgeChanges,\n  Connection,\n  NodeChange,\n  EdgeChange,\n  ConnectionMode,\n  MarkerType,\n} from '@xyflow/react'\nimport {StartNode, EndNode, UserTaskNode, AutomatedNode, SubWorkflowNode, WaitForSignalNode, WaitForTimerNode, ParallelForkNode, ParallelJoinNode} 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?: (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\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] = useNodesState(initialNodes)\n  const [edges, setEdges] = useEdgesState(initialEdges)\n\n  // Track the latest committed graph so the change reducers can run inside the\n  // lazy boundary (#3169) and forward the already-applied arrays to the parent,\n  // keeping React Flow's runtime out of the editor page chunk.\n  const latestNodesRef = useRef(nodes)\n  latestNodesRef.current = nodes\n  const latestEdgesRef = useRef(edges)\n  latestEdgesRef.current = edges\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: NodeChange[]) => {\n      const nextNodes = applyNodeChanges(changes, latestNodesRef.current)\n      setNodes(nextNodes)\n      if (onNodesChangeProp) {\n        onNodesChangeProp(nextNodes)\n      }\n    },\n    [setNodes, onNodesChangeProp]\n  )\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const nextEdges = applyEdgeChanges(changes, latestEdgesRef.current)\n      setEdges(nextEdges)\n      if (onEdgesChangeProp) {\n        onEdgesChangeProp(nextEdges)\n      }\n    },\n    [setEdges, 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      parallelFork: ParallelForkNode,\n      parallelJoin: ParallelJoinNode,\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 status=\"information\" icon={<Edit3 aria-hidden=\"true\" />} className=\"max-w-sm\">\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": []
+  "sourcesContent": ["'use client'\n\nimport '@xyflow/react/dist/style.css'\n\nimport { useCallback, useMemo, useEffect, useRef, 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  applyNodeChanges,\n  applyEdgeChanges,\n  Connection,\n  NodeChange,\n  EdgeChange,\n  ConnectionMode,\n  ConnectionLineType,\n  MarkerType,\n  type ReactFlowInstance,\n} from '@xyflow/react'\nimport {StartNode, EndNode, UserTaskNode, AutomatedNode, SubWorkflowNode, WaitForSignalNode, WaitForTimerNode, WaitForConditionNode, ParallelForkNode, ParallelJoinNode, InvokeAgentNode, IfElseNode, SwitchNode, StickyNoteNode, AnnotationGroupNode} from './nodes'\nimport { ANNOTATION_GROUP_NODE_TYPE, ANNOTATION_NOTE_NODE_TYPE } from '../lib/editor-annotations'\nimport {\n  buildTriggerNodeModel,\n  type TriggerLike,\n} from '../lib/trigger-node'\nimport { WorkflowTransitionEdge } from './WorkflowTransitionEdge'\nimport { WorkflowDataMappingEdge } from './WorkflowDataMappingEdge'\nimport { WorkflowCompensationGhostEdge } from './WorkflowCompensationGhostEdge'\nimport {\n  buildCompensationGhostEdges,\n  compensatingStepIds,\n  WORKFLOW_COMPENSATION_GHOST_EDGE_TYPE,\n} from '../lib/compensation-ghosts'\nimport { buildAgentOutcomeRows } from '../lib/node-outcome-rows'\nimport { WORKFLOW_TRANSITION_EDGE_TYPE } from '../lib/route-edge'\nimport { filterOwnedNodeChanges } from '../lib/owned-node-changes'\nimport { isRouteTaken, resolveNodeRunStatus, type RunExecution } from '../lib/run-execution'\nimport {\n  presentationToWorkflowStatus,\n  readNodeAgentId,\n  resolveStepPresentation,\n} from '../lib/step-presentation'\nimport { EDGE_COLORS, STATUS_COLORS, toWorkflowStatus } from '../lib/status-colors'\nimport { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'\nimport { Edit3 } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\n/**\n * Arrowhead every control-flow route ends in. Sized against the 1.5px wire it\n * caps \u2014 xyflow's 16px default reads top-heavy on a hairline stroke \u2014 and\n * painted in the same derived colour as the route itself, so head and stroke\n * are one mark rather than two weights. Declared once because the connection\n * fallback below and `defaultEdgeOptions` both need it and used to carry\n * separate copies that could drift.\n */\nconst ROUTE_MARKER_END = {\n  type: MarkerType.ArrowClosed,\n  width: 10,\n  height: 10,\n  color: EDGE_COLORS.pending.stroke,\n} as const\n\nexport interface WorkflowGraphFocusTarget {\n  nodeId?: string\n  edgeId?: string\n  requestId: number\n}\n\n/**\n * What a node-change batch means for persistence (#4248). React Flow reports a\n * position change on every drag frame plus one final frame with `dragging:\n * false`; selection and measurement changes carry no arrangement at all. The\n * parent only commits an arrangement when `persistable` is true, so a drag\n * persists once \u2014 on drag end \u2014 and clicking a node never writes anything.\n */\nexport interface WorkflowGraphNodesChangeMeta {\n  dragging: boolean\n  /**\n   * An annotation resize is in flight. Resizing behaves exactly like dragging:\n   * many frames, one persisted arrangement at the end.\n   */\n  resizing: boolean\n  persistable: boolean\n}\n\nfunction describeNodeChanges(changes: NodeChange[]): WorkflowGraphNodesChangeMeta {\n  const dragging = changes.some((change) => change.type === 'position' && change.dragging === true)\n  const resizing = changes.some((change) => change.type === 'dimensions' && change.resizing === true)\n  if (dragging || resizing) return { dragging, resizing, persistable: false }\n  const persistable = changes.some((change) => {\n    if (change.type === 'select') return false\n    // React Flow's own measurement carries no `resizing` flag; only the resizer's\n    // final frame reports `false`, and that is the arrangement worth saving.\n    if (change.type === 'dimensions') return change.resizing === false\n    if (change.type === 'position') return change.dragging !== true\n    return true\n  })\n  return { dragging, resizing, persistable }\n}\n\n/**\n * A drop onto the canvas (spec section 4.2). The graph resolves the two things\n * only it can know \u2014 the flow-space position under the cursor\n * (`screenToFlowPosition`) and which route, if any, the cursor was over \u2014 and\n * hands the parent plain data, so the drop EFFECT stays out of the React Flow\n * boundary (#3169).\n */\nexport interface WorkflowGraphDropEvent {\n  dataTransfer: DataTransfer\n  position: { x: number; y: number }\n  edgeId: string | null\n}\n\n/**\n * Resolve which route the cursor is over. React Flow renders each edge as a\n * `<g class=\"react-flow__edge\" data-id=\"\u2026\">` carrying a wide invisible\n * interaction path, so hit-testing the DOM is exact where geometry over a\n * bezier curve would only be an approximation.\n */\nfunction edgeIdAtPoint(clientX: number, clientY: number): string | null {\n  if (typeof document === 'undefined' || typeof document.elementsFromPoint !== 'function') return null\n  for (const element of document.elementsFromPoint(clientX, clientY)) {\n    const edgeElement = (element as Element).closest?.('.react-flow__edge')\n    const edgeId = edgeElement?.getAttribute('data-id')\n    if (edgeId) return edgeId\n  }\n  return null\n}\n\nexport interface WorkflowGraphImplProps {\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). React Flow calls this when an existing edge\n   * endpoint is dropped on another node; the parent decides whether to accept\n   * the new endpoints. Leaving the committed edges untouched snaps back.\n   */\n  onReconnect?: (oldEdge: Edge, connection: Connection) => void\n  /** Drag-from-palette (spec section 4.2). Absent \u2192 the canvas accepts no drops. */\n  onCanvasDrop?: (event: WorkflowGraphDropEvent) => void\n  editable?: boolean\n  className?: string\n  height?: string\n  focusTarget?: WorkflowGraphFocusTarget | null\n  nodeErrorCounts?: Record<string, number>\n  /**\n   * Compensation ghosts (spec section 4.4). Display-only: the dashed reverse\n   * edges are minted at render time and never enter the editor's edge state, so\n   * they can never reach `graphToDefinition`.\n   */\n  showCompensation?: boolean\n  /**\n   * \"Show last run\" execution overlay (spec \u00A78.3). Applied at render time \u2014 the\n   * same rule the compensation ghosts and the outcome-row footers follow \u2014 so\n   * the painted statuses and taken routes never enter the document, the undo\n   * stack, an autosave, or `graphToDefinition`.\n   */\n  runOverlay?: RunExecution | null\n  /**\n   * Agent id \u2192 label for the overlay's reason line, from the OPTIONAL\n   * `agent_orchestrator` peer. Rides alongside `runOverlay` so the Studio names\n   * an agent exactly the way the run detail page does \u2014 use the agent's LABEL,\n   * never its definition key.\n   */\n  runAgentLabels?: ReadonlyMap<string, string> | null\n  /**\n   * The definition's event triggers, for the canvas trigger node (fidelity gap\n   * #5). Display-only and minted at RENDER time, the same rule the compensation\n   * ghosts and the last-run overlay follow, so the pill never enters the\n   * editor's node state, the undo stack, an autosave or `graphToDefinition`.\n   *\n   * `undefined` / `null` renders nothing at all, so every existing caller (the\n   * read-only viewers) is untouched. An ARRAY opts in \u2014 including an EMPTY one,\n   * which still renders the pill: a definition with no triggers is not a\n   * definition with no way in, it is one started manually or through the API,\n   * and saying so is the point of the node.\n   */\n  triggers?: TriggerLike[] | null\n  /**\n   * The definition's own enabled flag. `startWorkflow` throws\n   * `DEFINITION_DISABLED` before it looks at triggers, so the pill must not list\n   * entry points that cannot fire.\n   */\n  definitionEnabled?: boolean\n  /** Opens the definition drawer on its triggers section. */\n  onOpenTriggers?: () => void\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  onReconnect: onReconnectProp,\n  onCanvasDrop: onCanvasDropProp,\n  editable = false,\n  className = '',\n  height = '600px',\n  focusTarget = null,\n  nodeErrorCounts,\n  showCompensation = false,\n  runOverlay = null,\n  runAgentLabels = null,\n  triggers = null,\n  definitionEnabled = true,\n  onOpenTriggers,\n}: WorkflowGraphImplProps) {\n  const t = useT()\n  const [nodes, setNodes] = useNodesState(initialNodes)\n  const [edges, setEdges] = useEdgesState(initialEdges)\n\n  // Track the latest committed graph so the change reducers can run inside the\n  // lazy boundary (#3169) and forward the already-applied arrays to the parent,\n  // keeping React Flow's runtime out of the editor page chunk.\n  const latestNodesRef = useRef(nodes)\n  latestNodesRef.current = nodes\n  const latestEdgesRef = useRef(edges)\n  latestEdgesRef.current = edges\n\n  // A 16px dot grid on a large canvas reads as moir\u00E9 while each dot is nearly\n  // invisible. A 24px grid (the 4px-scale step nearest the design's 22px) at a\n  // low mix of `--muted-foreground` gives the plane a texture you can read\n  // depth from without competing with the graph.\n  const backgroundDotColor = 'color-mix(in oklab, var(--muted-foreground) 22%, transparent)'\n  const backgroundDotGap = 24\n  const [isCompactViewport, setIsCompactViewport] = useState(false)\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const reactFlowInstanceRef = useRef<ReactFlowInstance | null>(null)\n\n  // Let a small graph zoom in to actually use the canvas, but never magnify so\n  // far that a tall workflow overflows. A wide graph stays width-limited.\n  const fitViewOptions = useMemo(\n    () => ({ padding: 0.1, maxZoom: isCompactViewport ? 0.9 : 1.5 }),\n    [isCompactViewport]\n  )\n\n  // Re-fit whenever the canvas itself resizes (e.g. the author hides the\n  // metadata panel or toggles Focus mode, which grows the canvas). ReactFlow's\n  // declarative `fitView` only fits on first render, so without this the graph\n  // stays small in the newly enlarged canvas \u2014 the \"wasted space\" symptom.\n  useEffect(() => {\n    const el = containerRef.current\n    if (!el || typeof ResizeObserver === 'undefined') return\n    let frame: number | null = null\n    const observer = new ResizeObserver(() => {\n      if (frame) cancelAnimationFrame(frame)\n      frame = requestAnimationFrame(() => {\n        reactFlowInstanceRef.current?.fitView(fitViewOptions)\n      })\n    })\n    observer.observe(el)\n    return () => {\n      if (frame) cancelAnimationFrame(frame)\n      observer.disconnect()\n    }\n  }, [fitViewOptions])\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\n  const onConnect = useCallback(\n    (connection: Connection) => {\n      if (onConnectProp) {\n        onConnectProp(connection)\n      } else {\n        const newEdge = {\n          ...connection,\n          type: WORKFLOW_TRANSITION_EDGE_TYPE,\n          animated: false,\n          markerEnd: ROUTE_MARKER_END,\n        }\n        setEdges((eds) => addEdge(newEdge, eds))\n      }\n    },\n    [setEdges, onConnectProp]\n  )\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      // Render-only overlay nodes (the trigger pill, fidelity gap #5) are minted\n      // in `canvasNodes` at render time and are NOT part of the editor's node\n      // state. ReactFlow still measures them and emits a `dimensions` change on\n      // every render; applying that here would setNodes \u2192 re-render \u2192 re-mint the\n      // overlay \u2192 ReactFlow re-measures it \u2192 an unbounded loop that pins the CPU\n      // and starves node dragging, so a dragged card never visibly tracks the\n      // cursor and only lands at the drop point (the \"teleport\" bug). Keep only\n      // changes for nodes we own; if nothing is left, this batch is pure overlay\n      // churn \u2014 do nothing so no re-render is scheduled.\n      const ownedIds = new Set(latestNodesRef.current.map((node) => node.id))\n      const ownedChanges = filterOwnedNodeChanges(changes, ownedIds)\n      if (ownedChanges.length === 0) return\n      const nextNodes = applyNodeChanges(ownedChanges, latestNodesRef.current)\n      setNodes(nextNodes)\n      if (onNodesChangeProp) {\n        onNodesChangeProp(nextNodes, describeNodeChanges(ownedChanges))\n      }\n    },\n    [setNodes, onNodesChangeProp]\n  )\n\n  const acceptsDrop = editable && !!onCanvasDropProp\n\n  const handleDragOver = useCallback(\n    (event: React.DragEvent<HTMLDivElement>) => {\n      if (!acceptsDrop) return\n      event.preventDefault()\n      event.dataTransfer.dropEffect = 'copy'\n    },\n    [acceptsDrop],\n  )\n\n  const handleDrop = useCallback(\n    (event: React.DragEvent<HTMLDivElement>) => {\n      if (!acceptsDrop) return\n      const instance = reactFlowInstanceRef.current\n      if (!instance) return\n      event.preventDefault()\n      onCanvasDropProp?.({\n        dataTransfer: event.dataTransfer,\n        position: instance.screenToFlowPosition({ x: event.clientX, y: event.clientY }),\n        edgeId: edgeIdAtPoint(event.clientX, event.clientY),\n      })\n    },\n    [acceptsDrop, onCanvasDropProp],\n  )\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const nextEdges = applyEdgeChanges(changes, latestEdgesRef.current)\n      setEdges(nextEdges)\n      if (onEdgesChangeProp) {\n        onEdgesChangeProp(nextEdges)\n      }\n    },\n    [setEdges, onEdgesChangeProp]\n  )\n\n  useEffect(() => {\n    if (!focusTarget) return\n    const instance = reactFlowInstanceRef.current\n    if (!instance) return\n    const focusOptions = { zoom: 1, duration: 300 }\n    if (focusTarget.nodeId) {\n      const node = latestNodesRef.current.find((candidate) => candidate.id === focusTarget.nodeId)\n      if (!node) return\n      const width = node.measured?.width ?? 0\n      const height = node.measured?.height ?? 0\n      void instance.setCenter(node.position.x + width / 2, node.position.y + height / 2, focusOptions)\n      // Through the change handler, never `setNodes` directly: that is the ONE\n      // path that also tells the parent, and the parent's copy of the nodes is\n      // what the Enter binding reads to open the inspector for the selection.\n      // Selecting only inside the graph left \"Go to step\" visually selected and\n      // keyboard-dead (TC-WF-037). A `select` change is classified\n      // non-persistable, so this still never reaches an autosave.\n      handleNodesChange(\n        latestNodesRef.current.map((candidate) => ({\n          id: candidate.id,\n          type: 'select' as const,\n          selected: candidate.id === focusTarget.nodeId,\n        })),\n      )\n    } else if (focusTarget.edgeId) {\n      const edge = latestEdgesRef.current.find((candidate) => candidate.id === focusTarget.edgeId)\n      if (!edge) return\n      const source = latestNodesRef.current.find((candidate) => candidate.id === edge.source)\n      const target = latestNodesRef.current.find((candidate) => candidate.id === edge.target)\n      if (!source || !target) return\n      void instance.setCenter(\n        (source.position.x + target.position.x) / 2,\n        (source.position.y + target.position.y) / 2,\n        focusOptions\n      )\n      handleEdgesChange(\n        latestEdgesRef.current.map((candidate) => ({\n          id: candidate.id,\n          type: 'select' as const,\n          selected: candidate.id === focusTarget.edgeId,\n        })),\n      )\n    }\n  }, [focusTarget, handleNodesChange, handleEdgesChange])\n\n  // Decorate nodes with validation-error state at render time only, so the\n  // error flags never enter the committed graph state or the saved definition.\n  const displayNodes = useMemo(() => {\n    if (!nodeErrorCounts) return nodes\n    return nodes.map((node) => {\n      const errorCount = nodeErrorCounts[node.id]\n      if (!errorCount) return node\n      return { ...node, data: { ...node.data, hasError: true, errorCount } }\n    })\n  }, [nodes, nodeErrorCounts])\n\n  // Compensation ghosts + their node badges, both derived from the committed\n  // edges at render time only (spec section 4.4). Read-only visualization: no\n  // engine change, and nothing here is part of the document.\n  const compensationBadgeIds = useMemo(\n    () => (showCompensation ? new Set(compensatingStepIds(edges)) : null),\n    [showCompensation, edges],\n  )\n\n  const compensationNodes = useMemo(() => {\n    if (!compensationBadgeIds || compensationBadgeIds.size === 0) return displayNodes\n    return displayNodes.map((node) => (\n      compensationBadgeIds.has(node.id)\n        ? { ...node, data: { ...node.data, hasCompensation: true } }\n        : node\n    ))\n  }, [displayNodes, compensationBadgeIds])\n\n  // Outcome-row footers on agent nodes (spec \u00A77.2 / fidelity gap #4). Which\n  // outcomes a node shows depends on which are WIRED, so it is a fact about the\n  // edges, not about the node \u2014 derived at render time exactly like the\n  // compensation badges above, so it never enters the document or the save.\n  const outcomeRowTransitions = useMemo(\n    () =>\n      edges.map((edge) => {\n        const data = (edge.data ?? {}) as { kind?: string; outcomeKind?: string }\n        return { fromStepId: edge.source, kind: data.kind, outcomeKind: data.outcomeKind }\n      }),\n    [edges],\n  )\n\n  const decoratedNodes = useMemo(\n    () =>\n      compensationNodes.map((node) =>\n        node.type === 'invokeAgent'\n          ? {\n              ...node,\n              data: {\n                ...node.data,\n                outcomeRows: buildAgentOutcomeRows(outcomeRowTransitions, node.id),\n              },\n            }\n          : node,\n      ),\n    [compensationNodes, outcomeRowTransitions],\n  )\n\n  // \"Show last run\" (spec \u00A78.3). Derived at render time from the SAME\n  // `RunExecution` the run detail page paints from, so the Studio and the run\n  // view can never disagree about which path executed.\n  const overlaidNodes = useMemo(() => {\n    if (!runOverlay) return decoratedNodes\n    return decoratedNodes.map((node) => {\n      const runStatus = resolveNodeRunStatus(runOverlay, { id: node.id, type: node.type })\n      // `pending` is the editor's own look, so an un-run node is left exactly\n      // as it was rather than being repainted into a third state.\n      if (runStatus === 'pending') return node\n      // Spec Part 2 \u2014 the SAME resolver the run detail page uses, so the Studio\n      // and the run view cannot disagree about whether a step is working or\n      // waiting, or about what it is waiting for.\n      const presentation = resolveStepPresentation(\n        runOverlay,\n        { id: node.id, status: runStatus },\n        { agentLabels: runAgentLabels ?? undefined, agentId: readNodeAgentId(node.data) },\n      )\n      return {\n        ...node,\n        data: {\n          ...node.data,\n          status: presentationToWorkflowStatus(presentation.state),\n          runReason: presentation.reason,\n          runStartedAt: presentation.startedAt,\n        },\n      }\n    })\n  }, [decoratedNodes, runOverlay, runAgentLabels])\n\n  // Triggers (fidelity gap #5, Direction A). Derived at render time from the\n  // definition's triggers and folded into the START node as a clickable cap \u2014\n  // NOT a separate overlay node with a dashed connector. The old overlay node\n  // was minted fresh every render and, being outside the node state, was\n  // re-measured by ReactFlow on every render in an unbounded loop (the canvas\n  // \"teleport\" bug). Injecting the cap into the OWNED START node avoids that:\n  // its measurement is persisted to state like any real node. The model stays\n  // out of the document, undo, autosave, the per-user draft and the subgraph\n  // clipboard because it lives only in the render-time `data`, never in the\n  // definition (`graphToDefinition` reads steps/edges, not this key).\n  const triggerModel = useMemo(\n    () => (triggers ? buildTriggerNodeModel(triggers, { definitionEnabled }) : null),\n    [triggers, definitionEnabled],\n  )\n\n  const canvasNodes = useMemo(() => {\n    if (!triggerModel) return overlaidNodes\n    return overlaidNodes.map((node) =>\n      node.type === 'start'\n        ? { ...node, data: { ...node.data, trigger: triggerModel, onOpenTriggers } }\n        : node,\n    )\n  }, [overlaidNodes, triggerModel, onOpenTriggers])\n\n  const displayEdges = useMemo(() => {\n    const withGhosts = showCompensation ? [...edges, ...buildCompensationGhostEdges(edges)] : edges\n    if (!runOverlay) return withGhosts\n    return withGhosts.map((edge) =>\n      isRouteTaken(runOverlay, { transitionId: edge.id, fromStepId: edge.source, toStepId: edge.target })\n        ? { ...edge, data: { ...edge.data, state: 'completed' } }\n        : edge,\n    )\n  }, [showCompensation, edges, runOverlay])\n\n  const handleNodeClick = useCallback(\n    (event: React.MouseEvent, node: Node) => {\n      onNodeClickProp?.(event, node)\n    },\n    [onNodeClickProp],\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      waitForCondition: WaitForConditionNode,\n      parallelFork: ParallelForkNode,\n      parallelJoin: ParallelJoinNode,\n      invokeAgent: InvokeAgentNode,\n      ifElse: IfElseNode,\n      switch: SwitchNode,\n      [ANNOTATION_NOTE_NODE_TYPE]: StickyNoteNode,\n      [ANNOTATION_GROUP_NODE_TYPE]: AnnotationGroupNode,\n    }),\n    []\n  )\n\n  const edgeTypes = useMemo(\n    () => ({\n      [WORKFLOW_TRANSITION_EDGE_TYPE]: WorkflowTransitionEdge,\n      workflowDataMapping: WorkflowDataMappingEdge,\n      [WORKFLOW_COMPENSATION_GHOST_EDGE_TYPE]: WorkflowCompensationGhostEdge,\n    }),\n    []\n  )\n\n  return (\n    <div\n      ref={containerRef}\n      className={`workflow-graph-container ${className}`}\n      onDragOver={handleDragOver}\n      onDrop={handleDrop}\n      style={{\n        height,\n        // Edge colour tokens mapped to DS palette roles: control transitions vs\n        // drag-authored data-mapping edges (consumed by WorkflowDataMappingEdge).\n        ['--edge-control' as string]: 'var(--primary)',\n        ['--edge-data' as string]: 'var(--muted-foreground)',\n      } as React.CSSProperties}\n    >\n      <ReactFlow\n        nodes={canvasNodes}\n        edges={displayEdges}\n        nodeTypes={nodeTypes}\n        edgeTypes={edgeTypes}\n        onNodesChange={handleNodesChange}\n        onEdgesChange={handleEdgesChange}\n        onConnect={editable ? onConnect : undefined}\n        onReconnect={editable ? onReconnectProp : undefined}\n        edgesReconnectable={editable && !!onReconnectProp}\n        onNodeClick={handleNodeClick}\n        onEdgeClick={onEdgeClickProp}\n        onInit={(instance) => {\n          reactFlowInstanceRef.current = instance\n        }}\n        connectionMode={ConnectionMode.Loose}\n        connectionLineType={ConnectionLineType.Bezier}\n        fitView\n        fitViewOptions={fitViewOptions}\n        minZoom={0.1}\n        maxZoom={2}\n        defaultEdgeOptions={{\n          type: WORKFLOW_TRANSITION_EDGE_TYPE,\n          animated: false,\n          markerEnd: ROUTE_MARKER_END,\n        }}\n        nodesDraggable={editable}\n        nodesConnectable={editable}\n        elementsSelectable={editable}\n        proOptions={{ hideAttribution: true }}\n      >\n        <Background\n          variant={BackgroundVariant.Dots}\n          gap={backgroundDotGap}\n          size={1}\n          color={backgroundDotColor}\n        />\n\n        {/* Tools bottom-left, minimap bottom-right. Top-right put the canvas\n            controls directly under the editor's own header actions, so two\n            unrelated button clusters stacked on the same corner. */}\n        <Controls\n          showZoom={true}\n          showFitView={true}\n          showInteractive={false}\n          position=\"bottom-left\"\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-left' : ''}`}\n        />\n\n        {!isCompactViewport && (\n          <MiniMap\n            nodeStrokeWidth={3}\n            nodeColor={(node) => {\n              const status = toWorkflowStatus(node.data?.status as string | undefined)\n              return STATUS_COLORS[status]?.hex || STATUS_COLORS.not_started.hex\n            }}\n            maskColor=\"rgba(0, 0, 0, 0.1)\"\n            position=\"bottom-right\"\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 status=\"information\" icon={<Edit3 aria-hidden=\"true\" />} className=\"max-w-sm\">\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": ["height"]
 }

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

@@ -0,0 +1,109 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Image as ImageIcon, X } from "lucide-react";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@open-mercato/ui/primitives/popover";
+import { LUCIDE_ICON_REGISTRY, resolveRegisteredLucideIcon } from "@open-mercato/ui/backend/icons/lucideRegistry";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { filterIconNames, normalizeIconName } from "../lib/icon-search.js";
+function WorkflowIconPicker({ id, value, onChange, disabled }) {
+  const t = useT();
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const iconNames = React.useMemo(() => Object.keys(LUCIDE_ICON_REGISTRY), []);
+  const results = React.useMemo(() => filterIconNames(iconNames, query), [iconNames, query]);
+  const normalizedValue = normalizeIconName(value);
+  const SelectedIcon = resolveRegisteredLucideIcon(value);
+  const isUnknownValue = value.trim().length > 0 && !SelectedIcon;
+  const select = React.useCallback((name) => {
+    onChange(name);
+    setOpen(false);
+  }, [onChange]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: (next) => {
+      setOpen(next);
+      if (next) setQuery("");
+    }, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          id,
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          disabled,
+          "aria-label": t("workflows.form.iconPicker.trigger", "Choose an icon"),
+          className: "h-8 min-w-0 flex-1 justify-start gap-2 px-2 text-xs font-normal",
+          children: [
+            SelectedIcon ? /* @__PURE__ */ jsx(SelectedIcon, { className: "h-4 w-4 shrink-0 text-foreground", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: value.trim().length > 0 ? value : t("workflows.form.iconPicker.none", "No icon") })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(PopoverContent, { className: "w-80 p-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: query,
+            onChange: (event) => setQuery(event.target.value),
+            placeholder: t("workflows.form.iconPicker.searchPlaceholder", "Search icons\u2026"),
+            "aria-label": t("workflows.form.iconPicker.searchLabel", "Search icons"),
+            className: "h-8 text-sm",
+            autoFocus: true
+          }
+        ),
+        results.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-1 py-4 text-center text-xs text-muted-foreground", children: t("workflows.form.iconPicker.noResults", 'No icon matches "{query}"', { query }) }) : /* @__PURE__ */ jsx("div", { role: "listbox", "aria-label": t("workflows.form.iconPicker.gridLabel", "Icons"), className: "mt-2 grid max-h-64 grid-cols-8 gap-1 overflow-y-auto", children: results.map((name) => {
+          const Icon = LUCIDE_ICON_REGISTRY[name];
+          const isSelected = name === normalizedValue;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": isSelected,
+              title: name,
+              "aria-label": name,
+              onClick: () => select(name),
+              className: `flex h-8 w-8 items-center justify-center rounded-md border text-foreground hover:bg-muted ${isSelected ? "border-primary bg-muted" : "border-transparent"}`,
+              children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4", "aria-hidden": "true" })
+            },
+            name
+          );
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-1 border-t border-border pt-2", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: `${id ?? "workflow-icon"}-custom`, className: "text-overline uppercase tracking-wide text-muted-foreground", children: t("workflows.form.iconPicker.customLabel", "Or enter a name") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: `${id ?? "workflow-icon"}-custom`,
+              value,
+              onChange: (event) => onChange(event.target.value),
+              placeholder: "shopping-cart",
+              className: "h-8 text-sm"
+            }
+          ),
+          isUnknownValue && /* @__PURE__ */ jsx("p", { className: "text-xs text-status-warning-text", children: t("workflows.form.iconPicker.unknown", "This name is not in the icon set \u2014 it is kept as written and no icon renders.") })
+        ] })
+      ] })
+    ] }),
+    value.trim().length > 0 && /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        disabled,
+        onClick: () => onChange(""),
+        "aria-label": t("workflows.form.iconPicker.clear", "Clear icon"),
+        className: "h-8 w-8 shrink-0 p-0",
+        children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": "true" })
+      }
+    )
+  ] });
+}
+export {
+  WorkflowIconPicker
+};
+//# sourceMappingURL=WorkflowIconPicker.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/workflows/components/WorkflowIconPicker.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Image as ImageIcon, X } from 'lucide-react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\nimport { LUCIDE_ICON_REGISTRY, resolveRegisteredLucideIcon } from '@open-mercato/ui/backend/icons/lucideRegistry'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { filterIconNames, normalizeIconName } from '../lib/icon-search'\n\nexport interface WorkflowIconPickerProps {\n  id?: string\n  value: string\n  onChange: (value: string) => void\n  disabled?: boolean\n}\n\n/**\n * Searchable icon grid for a definition's `metadata.icon` (spec section 4.5).\n *\n * The grid is backed by the platform's shared lucide registry, which `AppShell`\n * already loads on every backend page \u2014 so a searchable grid over ~250 icons\n * costs the editor chunk nothing, where importing `lucide-react` wholesale would\n * have been the classic bundle regression.\n *\n * Free text stays the fallback, deliberately: `metadata.icon` has always been an\n * open string, an author may reference an icon the registry has not picked up\n * yet, and a picker that silently dropped such a value would be a data-losing\n * \"improvement\". Existing values in any casing (`ShoppingCart`,\n * `lucide:shopping-cart`) load with their icon selected.\n */\nexport function WorkflowIconPicker({ id, value, onChange, disabled }: WorkflowIconPickerProps) {\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const [query, setQuery] = React.useState('')\n\n  const iconNames = React.useMemo(() => Object.keys(LUCIDE_ICON_REGISTRY), [])\n  const results = React.useMemo(() => filterIconNames(iconNames, query), [iconNames, query])\n\n  const normalizedValue = normalizeIconName(value)\n  const SelectedIcon = resolveRegisteredLucideIcon(value)\n  const isUnknownValue = value.trim().length > 0 && !SelectedIcon\n\n  const select = React.useCallback((name: string) => {\n    onChange(name)\n    setOpen(false)\n  }, [onChange])\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      <Popover open={open} onOpenChange={(next) => { setOpen(next); if (next) setQuery('') }}>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            disabled={disabled}\n            aria-label={t('workflows.form.iconPicker.trigger', 'Choose an icon')}\n            className=\"h-8 min-w-0 flex-1 justify-start gap-2 px-2 text-xs font-normal\"\n          >\n            {SelectedIcon ? (\n              <SelectedIcon className=\"h-4 w-4 shrink-0 text-foreground\" aria-hidden=\"true\" />\n            ) : (\n              <ImageIcon className=\"h-4 w-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n            )}\n            <span className=\"truncate\">\n              {value.trim().length > 0 ? value : t('workflows.form.iconPicker.none', 'No icon')}\n            </span>\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-80 p-2\">\n          <Input\n            value={query}\n            onChange={(event) => setQuery(event.target.value)}\n            placeholder={t('workflows.form.iconPicker.searchPlaceholder', 'Search icons\u2026')}\n            aria-label={t('workflows.form.iconPicker.searchLabel', 'Search icons')}\n            className=\"h-8 text-sm\"\n            autoFocus\n          />\n          {results.length === 0 ? (\n            <p className=\"px-1 py-4 text-center text-xs text-muted-foreground\">\n              {t('workflows.form.iconPicker.noResults', 'No icon matches \"{query}\"', { query })}\n            </p>\n          ) : (\n            <div role=\"listbox\" aria-label={t('workflows.form.iconPicker.gridLabel', 'Icons')} className=\"mt-2 grid max-h-64 grid-cols-8 gap-1 overflow-y-auto\">\n              {results.map((name) => {\n                const Icon = LUCIDE_ICON_REGISTRY[name]\n                const isSelected = name === normalizedValue\n                return (\n                  <button\n                    key={name}\n                    type=\"button\"\n                    role=\"option\"\n                    aria-selected={isSelected}\n                    title={name}\n                    aria-label={name}\n                    onClick={() => select(name)}\n                    className={`flex h-8 w-8 items-center justify-center rounded-md border text-foreground hover:bg-muted ${\n                      isSelected ? 'border-primary bg-muted' : 'border-transparent'\n                    }`}\n                  >\n                    <Icon className=\"h-4 w-4\" aria-hidden=\"true\" />\n                  </button>\n                )\n              })}\n            </div>\n          )}\n          <div className=\"mt-2 space-y-1 border-t border-border pt-2\">\n            <label htmlFor={`${id ?? 'workflow-icon'}-custom`} className=\"text-overline uppercase tracking-wide text-muted-foreground\">\n              {t('workflows.form.iconPicker.customLabel', 'Or enter a name')}\n            </label>\n            <Input\n              id={`${id ?? 'workflow-icon'}-custom`}\n              value={value}\n              onChange={(event) => onChange(event.target.value)}\n              placeholder=\"shopping-cart\"\n              className=\"h-8 text-sm\"\n            />\n            {isUnknownValue && (\n              <p className=\"text-xs text-status-warning-text\">\n                {t('workflows.form.iconPicker.unknown', 'This name is not in the icon set \u2014 it is kept as written and no icon renders.')}\n              </p>\n            )}\n          </div>\n        </PopoverContent>\n      </Popover>\n      {value.trim().length > 0 && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          disabled={disabled}\n          onClick={() => onChange('')}\n          aria-label={t('workflows.form.iconPicker.clear', 'Clear icon')}\n          className=\"h-8 w-8 shrink-0 p-0\"\n        >\n          <X className=\"h-4 w-4\" aria-hidden=\"true\" />\n        </Button>\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -1,43 +1,59 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, Play, Pause, Circle } from "lucide-react";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { EDGE_COLORS, STATUS_COLORS } from "../lib/status-colors.js";
+import { STATUS_ICONS } from "./WorkflowNodeCard.js";
+const STATUS_ROWS = [
+  { status: "completed", labelKey: "workflows.legend.status.completed" },
+  { status: "working", labelKey: "workflows.legend.status.working" },
+  { status: "waiting", labelKey: "workflows.legend.status.waiting" },
+  { status: "needs_attention", labelKey: "workflows.legend.status.needsAttention" },
+  { status: "failed", labelKey: "workflows.legend.status.failed" },
+  { status: "not_started", labelKey: "workflows.legend.status.notStarted" }
+];
+const EDGE_ROWS = [
+  { state: "completed", labelKey: "workflows.legend.edgeState.completed" },
+  { state: "pending", labelKey: "workflows.legend.edgeState.pending" }
+];
 function WorkflowLegend() {
   const t = useT();
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold text-foreground mb-3", children: t("workflows.legend.statusTitle") }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-4 h-4 rounded-full bg-emerald-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-emerald-600" }) }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("workflows.legend.status.completed") })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-4 h-4 rounded-full bg-blue-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(Play, { className: "w-3 h-3 text-blue-600" }) }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("workflows.legend.status.inProgress") })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-4 h-4 rounded-full bg-yellow-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(Pause, { className: "w-3 h-3 text-yellow-600" }) }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("workflows.legend.status.pending") })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-4 h-4 rounded-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "w-3 h-3 text-muted-foreground" }) }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("workflows.legend.status.notStarted") })
-        ] })
-      ] })
+      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: STATUS_ROWS.map(({ status, labelKey }) => {
+        const colors = STATUS_COLORS[status];
+        const Icon = STATUS_ICONS[status];
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `flex-shrink-0 w-4 h-4 rounded-full flex items-center justify-center ${colors.bg}`,
+              children: /* @__PURE__ */ jsx(Icon, { className: `w-3 h-3 ${colors.icon}`, "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t(labelKey) })
+        ] }, status);
+      }) })
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold text-foreground mb-3", children: t("workflows.legend.edgeStatesTitle") }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-8 h-0.5 bg-status-success-solid" }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("workflows.legend.edgeState.completed") })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-8 h-0.5 bg-muted-foreground", style: { backgroundImage: "repeating-linear-gradient(to right, currentColor 0, currentColor 4px, transparent 4px, transparent 8px)" } }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("workflows.legend.edgeState.pending") })
-        ] })
-      ] })
+      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: EDGE_ROWS.map(({ state, labelKey }) => {
+        const colors = EDGE_COLORS[state];
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex-shrink-0 w-8",
+              style: {
+                height: colors.strokeWidth,
+                backgroundColor: colors.stroke,
+                backgroundImage: colors.dashed ? `repeating-linear-gradient(to right, ${colors.stroke} 0, ${colors.stroke} 8px, transparent 8px, transparent 12px)` : void 0
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t(labelKey) })
+        ] }, state);
+      }) })
     ] })
   ] });
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/modules/workflows/components/WorkflowLegend.tsx"],
-  "sourcesContent": ["'use client'\n\nimport { Check, Play, Pause, Circle } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\nexport function WorkflowLegend() {\n  const t = useT()\n\n  return (\n    <div className=\"space-y-6\">\n      <div>\n        <h3 className=\"text-xs font-semibold text-foreground mb-3\">\n          {t('workflows.legend.statusTitle')}\n        </h3>\n        <div className=\"space-y-2\">\n          <div className=\"flex items-center gap-2\">\n            <div className=\"flex-shrink-0 w-4 h-4 rounded-full bg-emerald-100 flex items-center justify-center\">\n              <Check className=\"w-3 h-3 text-emerald-600\" />\n            </div>\n            <span className=\"text-xs text-muted-foreground\">{t('workflows.legend.status.completed')}</span>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <div className=\"flex-shrink-0 w-4 h-4 rounded-full bg-blue-100 flex items-center justify-center\">\n              <Play className=\"w-3 h-3 text-blue-600\" />\n            </div>\n            <span className=\"text-xs text-muted-foreground\">{t('workflows.legend.status.inProgress')}</span>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <div className=\"flex-shrink-0 w-4 h-4 rounded-full bg-yellow-100 flex items-center justify-center\">\n              <Pause className=\"w-3 h-3 text-yellow-600\" />\n            </div>\n            <span className=\"text-xs text-muted-foreground\">{t('workflows.legend.status.pending')}</span>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <div className=\"flex-shrink-0 w-4 h-4 rounded-full bg-muted flex items-center justify-center\">\n              <Circle className=\"w-3 h-3 text-muted-foreground\" />\n            </div>\n            <span className=\"text-xs text-muted-foreground\">{t('workflows.legend.status.notStarted')}</span>\n          </div>\n        </div>\n      </div>\n\n      <div>\n        <h3 className=\"text-xs font-semibold text-foreground mb-3\">\n          {t('workflows.legend.edgeStatesTitle')}\n        </h3>\n        <div className=\"space-y-2\">\n          <div className=\"flex items-center gap-2\">\n            <div className=\"flex-shrink-0 w-8 h-0.5 bg-status-success-solid\"></div>\n            <span className=\"text-xs text-muted-foreground\">{t('workflows.legend.edgeState.completed')}</span>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <div className=\"flex-shrink-0 w-8 h-0.5 bg-muted-foreground\" style={{ backgroundImage: 'repeating-linear-gradient(to right, currentColor 0, currentColor 4px, transparent 4px, transparent 8px)' }}></div>\n            <span className=\"text-xs text-muted-foreground\">{t('workflows.legend.edgeState.pending')}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": ";AAWQ,cAIE,YAJF;AATR,SAAS,OAAO,MAAM,OAAO,cAAc;AAC3C,SAAS,YAAY;AAEd,SAAS,iBAAiB;AAC/B,QAAM,IAAI,KAAK;AAEf,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SACC;AAAA,0BAAC,QAAG,WAAU,8CACX,YAAE,8BAA8B,GACnC;AAAA,MACA,qBAAC,SAAI,WAAU,aACb;AAAA,6BAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,SAAI,WAAU,sFACb,8BAAC,SAAM,WAAU,4BAA2B,GAC9C;AAAA,UACA,oBAAC,UAAK,WAAU,iCAAiC,YAAE,mCAAmC,GAAE;AAAA,WAC1F;AAAA,QACA,qBAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,SAAI,WAAU,mFACb,8BAAC,QAAK,WAAU,yBAAwB,GAC1C;AAAA,UACA,oBAAC,UAAK,WAAU,iCAAiC,YAAE,oCAAoC,GAAE;AAAA,WAC3F;AAAA,QACA,qBAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,SAAI,WAAU,qFACb,8BAAC,SAAM,WAAU,2BAA0B,GAC7C;AAAA,UACA,oBAAC,UAAK,WAAU,iCAAiC,YAAE,iCAAiC,GAAE;AAAA,WACxF;AAAA,QACA,qBAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,SAAI,WAAU,gFACb,8BAAC,UAAO,WAAU,iCAAgC,GACpD;AAAA,UACA,oBAAC,UAAK,WAAU,iCAAiC,YAAE,oCAAoC,GAAE;AAAA,WAC3F;AAAA,SACF;AAAA,OACF;AAAA,IAEA,qBAAC,SACC;AAAA,0BAAC,QAAG,WAAU,8CACX,YAAE,kCAAkC,GACvC;AAAA,MACA,qBAAC,SAAI,WAAU,aACb;AAAA,6BAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,SAAI,WAAU,mDAAkD;AAAA,UACjE,oBAAC,UAAK,WAAU,iCAAiC,YAAE,sCAAsC,GAAE;AAAA,WAC7F;AAAA,QACA,qBAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,SAAI,WAAU,+CAA8C,OAAO,EAAE,iBAAiB,0GAA0G,GAAG;AAAA,UACpM,oBAAC,UAAK,WAAU,iCAAiC,YAAE,oCAAoC,GAAE;AAAA,WAC3F;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["'use client'\n\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { EDGE_COLORS, STATUS_COLORS, type EdgeState, type WorkflowStatus } from '../lib/status-colors'\nimport { STATUS_ICONS } from './WorkflowNodeCard'\n\n/**\n * Legend rows are DERIVED from the same tables the canvas paints itself with\n * (`STATUS_COLORS` / `EDGE_COLORS` / `STATUS_ICONS`) rather than restating them.\n * The previous hand-written swatches used raw Tailwind shades and had drifted\n * out of sync, so the legend actively mis-described the canvas \u2014 it still showed\n * a dashed wire for the default route state after that route became solid.\n *\n * The rows are the RUN presentation vocabulary (spec Part 2), because this\n * legend renders beside the run canvas. It used to list `in_progress` and\n * `pending`, neither of which that canvas paints any more.\n */\nconst STATUS_ROWS: { status: WorkflowStatus; labelKey: string }[] = [\n  { status: 'completed', labelKey: 'workflows.legend.status.completed' },\n  { status: 'working', labelKey: 'workflows.legend.status.working' },\n  { status: 'waiting', labelKey: 'workflows.legend.status.waiting' },\n  { status: 'needs_attention', labelKey: 'workflows.legend.status.needsAttention' },\n  { status: 'failed', labelKey: 'workflows.legend.status.failed' },\n  { status: 'not_started', labelKey: 'workflows.legend.status.notStarted' },\n]\n\nconst EDGE_ROWS: { state: EdgeState; labelKey: string }[] = [\n  { state: 'completed', labelKey: 'workflows.legend.edgeState.completed' },\n  { state: 'pending', labelKey: 'workflows.legend.edgeState.pending' },\n]\n\nexport function WorkflowLegend() {\n  const t = useT()\n\n  return (\n    <div className=\"space-y-6\">\n      <div>\n        <h3 className=\"text-xs font-semibold text-foreground mb-3\">\n          {t('workflows.legend.statusTitle')}\n        </h3>\n        <div className=\"space-y-2\">\n          {STATUS_ROWS.map(({ status, labelKey }) => {\n            const colors = STATUS_COLORS[status]\n            const Icon = STATUS_ICONS[status]\n            return (\n              <div key={status} className=\"flex items-center gap-2\">\n                <div\n                  className={`flex-shrink-0 w-4 h-4 rounded-full flex items-center justify-center ${colors.bg}`}\n                >\n                  <Icon className={`w-3 h-3 ${colors.icon}`} aria-hidden=\"true\" />\n                </div>\n                <span className=\"text-xs text-muted-foreground\">{t(labelKey)}</span>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n\n      <div>\n        <h3 className=\"text-xs font-semibold text-foreground mb-3\">\n          {t('workflows.legend.edgeStatesTitle')}\n        </h3>\n        <div className=\"space-y-2\">\n          {EDGE_ROWS.map(({ state, labelKey }) => {\n            const colors = EDGE_COLORS[state]\n            return (\n              <div key={state} className=\"flex items-center gap-2\">\n                <div\n                  className=\"flex-shrink-0 w-8\"\n                  style={{\n                    height: colors.strokeWidth,\n                    backgroundColor: colors.stroke,\n                    backgroundImage: colors.dashed\n                      ? `repeating-linear-gradient(to right, ${colors.stroke} 0, ${colors.stroke} 8px, transparent 8px, transparent 12px)`\n                      : undefined,\n                  }}\n                />\n                <span className=\"text-xs text-muted-foreground\">{t(labelKey)}</span>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": ";AAqCQ,cAQM,YARN;AAnCR,SAAS,YAAY;AACrB,SAAS,aAAa,qBAA0D;AAChF,SAAS,oBAAoB;AAa7B,MAAM,cAA8D;AAAA,EAClE,EAAE,QAAQ,aAAa,UAAU,oCAAoC;AAAA,EACrE,EAAE,QAAQ,WAAW,UAAU,kCAAkC;AAAA,EACjE,EAAE,QAAQ,WAAW,UAAU,kCAAkC;AAAA,EACjE,EAAE,QAAQ,mBAAmB,UAAU,yCAAyC;AAAA,EAChF,EAAE,QAAQ,UAAU,UAAU,iCAAiC;AAAA,EAC/D,EAAE,QAAQ,eAAe,UAAU,qCAAqC;AAC1E;AAEA,MAAM,YAAsD;AAAA,EAC1D,EAAE,OAAO,aAAa,UAAU,uCAAuC;AAAA,EACvE,EAAE,OAAO,WAAW,UAAU,qCAAqC;AACrE;AAEO,SAAS,iBAAiB;AAC/B,QAAM,IAAI,KAAK;AAEf,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SACC;AAAA,0BAAC,QAAG,WAAU,8CACX,YAAE,8BAA8B,GACnC;AAAA,MACA,oBAAC,SAAI,WAAU,aACZ,sBAAY,IAAI,CAAC,EAAE,QAAQ,SAAS,MAAM;AACzC,cAAM,SAAS,cAAc,MAAM;AACnC,cAAM,OAAO,aAAa,MAAM;AAChC,eACE,qBAAC,SAAiB,WAAU,2BAC1B;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,uEAAuE,OAAO,EAAE;AAAA,cAE3F,8BAAC,QAAK,WAAW,WAAW,OAAO,IAAI,IAAI,eAAY,QAAO;AAAA;AAAA,UAChE;AAAA,UACA,oBAAC,UAAK,WAAU,iCAAiC,YAAE,QAAQ,GAAE;AAAA,aANrD,MAOV;AAAA,MAEJ,CAAC,GACH;AAAA,OACF;AAAA,IAEA,qBAAC,SACC;AAAA,0BAAC,QAAG,WAAU,8CACX,YAAE,kCAAkC,GACvC;AAAA,MACA,oBAAC,SAAI,WAAU,aACZ,oBAAU,IAAI,CAAC,EAAE,OAAO,SAAS,MAAM;AACtC,cAAM,SAAS,YAAY,KAAK;AAChC,eACE,qBAAC,SAAgB,WAAU,2BACzB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,QAAQ,OAAO;AAAA,gBACf,iBAAiB,OAAO;AAAA,gBACxB,iBAAiB,OAAO,SACpB,uCAAuC,OAAO,MAAM,OAAO,OAAO,MAAM,6CACxE;AAAA,cACN;AAAA;AAAA,UACF;AAAA,UACA,oBAAC,UAAK,WAAU,iCAAiC,YAAE,QAAQ,GAAE;AAAA,aAXrD,KAYV;AAAA,MAEJ,CAAC,GACH;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }