@iblai/web-containers 1.52.0 → 1.52.1

package/dist/esm/components/workflows/workflow-canvas.js

@@ -0,0 +1,1026 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { useLazyGetMentorSettingsQuery } from '@iblai/data-layer';
+import { useT } from '../../i18n/context.js';
+import '../../packages/i18n/dist/index.esm.js';
+import { MentorSelectionGrid } from '../mentors/mentor-selection-grid.js';
+import { Button } from '../ui/button.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/dialog.js';
+import { Textarea } from '../ui/textarea.js';
+import { ActionTooltip } from './action-tooltip.js';
+import { NodeConfigPanel } from './node-config-panel.js';
+import { canReceiveConnection, edgeIdFor, collectWorkflowVariables, collectVariableUsages, WHILE_LOOP_HANDLE, WHILE_DONE_HANDLE, getConditionCount, reindexConditionEdges, getConditions } from './workflow-definition.js';
+import X from '../../node_modules/.pnpm/lucide-react@0.528.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/x.js';
+import Trash2 from '../../node_modules/.pnpm/lucide-react@0.528.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/trash-2.js';
+import Play from '../../node_modules/.pnpm/lucide-react@0.528.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/play.js';
+import RefreshCw from '../../node_modules/.pnpm/lucide-react@0.528.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/refresh-cw.js';
+import GitBranch from '../../node_modules/.pnpm/lucide-react@0.528.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/git-branch.js';
+import ThumbsUp from '../../node_modules/.pnpm/lucide-react@0.528.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/thumbs-up.js';
+import Bot from '../../node_modules/.pnpm/lucide-react@0.528.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/bot.js';
+import Pencil from '../../node_modules/.pnpm/lucide-react@0.528.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/pencil.js';
+import Hand from '../../node_modules/.pnpm/lucide-react@0.528.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/hand.js';
+import MousePointer from '../../node_modules/.pnpm/lucide-react@0.528.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/mouse-pointer.js';
+import Undo from '../../node_modules/.pnpm/lucide-react@0.528.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/undo.js';
+import Redo from '../../node_modules/.pnpm/lucide-react@0.528.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/redo.js';
+import ZoomOut from '../../node_modules/.pnpm/lucide-react@0.528.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/zoom-out.js';
+import ZoomIn from '../../node_modules/.pnpm/lucide-react@0.528.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/zoom-in.js';
+
+const DEFAULT_MENTOR_LABELS = new Set([
+    'my agent',
+    'agent',
+    'agent node',
+    'my mentor',
+    'mentor',
+    'mentor node',
+]);
+const isDefaultMentorLabel = (label) => {
+    if (!label)
+        return true;
+    return DEFAULT_MENTOR_LABELS.has(label.trim().toLowerCase());
+};
+// API may use 'conditional' as the node type key for if-else nodes
+const isConditionalType = (type) => type === 'if-else' || type === 'conditional';
+// Cards with one labelled row per outgoing branch.
+const isBranchingType = (type) => isConditionalType(type) || type === 'while' || type === 'user-approval';
+// Branch rows sit under a 68px header, 44px tall with an 8px gap.
+const branchRowCenter = (index) => 90 + index * 52;
+const branchCardHeight = (rows) => 76 + rows * 52;
+// Rendered card sizes, for placing new steps and for box selection.
+const nodeSize = (node) => {
+    if (isConditionalType(node.type)) {
+        const conditions = node.data ? getConditionCount(node.data) : 1;
+        return { width: 280, height: branchCardHeight(conditions + 1) };
+    }
+    if (isBranchingType(node.type)) {
+        return { width: 280, height: branchCardHeight(2) };
+    }
+    if (node.type === 'note') {
+        return { width: node.width || 200, height: node.height || 120 };
+    }
+    return { width: 140, height: 50 };
+};
+const SIDE_HANDLES = new Set(['left', 'right', 'top', 'bottom']);
+// If/Else rows, While Loop/Done and Approve/Reject, as opposed to a plain
+// step's side points.
+const isBranchHandle = (handle) => !SIDE_HANDLES.has(handle);
+// The only steps the backend runs that write to step_results.
+const STEPS_WITH_RESULTS = new Set(['mentor', 'transform', 'set-state', 'while']);
+const NODE_PANEL_SELECTOR = '[data-testid="workflow-node-panel"]';
+// The floating zoom/undo toolbar covers the bottom of the canvas.
+const TOOLBAR_CLEARANCE = 80;
+const isDeletableNode = (node) => node.type !== 'start' && node.deletable !== false;
+// Helper to strip UI-only properties from nodes for comparison/saving
+function stripUiProperties(nodes) {
+    return nodes.map(({ selected, dragging, hidden, ...rest }) => rest);
+}
+// Helper to strip UI-only properties from edges for comparison/saving
+function stripEdgeUiProperties(edges) {
+    return edges.map(({ selected, hidden, ...rest }) => rest);
+}
+// Default nodes for new workflows
+const DEFAULT_NODES = [
+    {
+        id: 'start',
+        type: 'start',
+        position: { x: 300, y: 250 },
+        data: { label: 'Start' },
+        draggable: true,
+        selectable: true,
+        connectable: true,
+    },
+    {
+        id: 'mentor-1',
+        type: 'mentor',
+        position: { x: 550, y: 250 },
+        data: { label: 'My agent', subtitle: 'Agent', color: 'chart-1' },
+        draggable: true,
+        selectable: true,
+        connectable: true,
+    },
+];
+const DEFAULT_EDGES = [
+    {
+        id: 'e-start-mentor-1',
+        source: 'start',
+        target: 'mentor-1',
+        sourceHandle: 'right',
+        targetHandle: 'left',
+    },
+];
+function WorkflowCanvas({ onDraggedItem: _onDraggedItem, onClickedItem, previewMode = false, initialNodes, initialEdges, initialViewport, onStateChange, org, defaultMentorId, username, onOpenAgentSettings, agentSettings, }) {
+    var _a;
+    const t = useT();
+    // Use initialNodes if provided (from API), otherwise use defaults for new workflows
+    const [nodes, setNodes] = useState(initialNodes && initialNodes.length > 0 ? initialNodes : DEFAULT_NODES);
+    const [edges, setEdges] = useState(initialEdges ? initialEdges : DEFAULT_EDGES);
+    const [tool, setTool] = useState('hand');
+    const [zoom, setZoom] = useState((initialViewport === null || initialViewport === void 0 ? void 0 : initialViewport.zoom) || 1);
+    const [history, setHistory] = useState([
+        { nodes: [...nodes], edges: [...edges] },
+    ]);
+    const [historyIndex, setHistoryIndex] = useState(0);
+    // Saves can run after an await (mentor prefill); a closed-over index would
+    // cut off entries added in the meantime.
+    const historyIndexRef = useRef(0);
+    const [draggedNode, setDraggedNode] = useState(null);
+    const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+    const [isPanning, setIsPanning] = useState(false);
+    const [panOffset, setPanOffset] = useState(initialViewport ? { x: initialViewport.x, y: initialViewport.y } : { x: 0, y: 0 });
+    const [panStart, setPanStart] = useState({ x: 0, y: 0 });
+    const [hoveredNode, setHoveredNode] = useState(null);
+    const [connectingFrom, setConnectingFrom] = useState(null);
+    const [tempConnectionPos, setTempConnectionPos] = useState(null);
+    const [editingNote, setEditingNote] = useState(null);
+    const [resizingNote, setResizingNote] = useState(null);
+    const [selectionBox, setSelectionBox] = useState(null);
+    const [selectedNodeForConfig, setSelectedNodeForConfig] = useState(null);
+    const [selectedEdgeId, setSelectedEdgeId] = useState(null);
+    const [hoveredEdgeId, setHoveredEdgeId] = useState(null);
+    const processedClickRef = useRef(null);
+    const [showMentorModal, setShowMentorModal] = useState(false);
+    const [mentorSearchQuery, setMentorSearchQuery] = useState('');
+    const [activeMentorNodeId, setActiveMentorNodeId] = useState(null);
+    const rootRef = useRef(null);
+    // False once the user clicks into a settings panel or a dialog, so a
+    // Delete meant for a dropdown or button there never removes the step.
+    const canvasHasPointerRef = useRef(true);
+    const canvasRef = useRef(null);
+    // Read by callbacks that run after an await (mentor prefill), which must
+    // not write back a stale copy of the graph.
+    const nodesRef = useRef(nodes);
+    const edgesRef = useRef(edges);
+    nodesRef.current = nodes;
+    edgesRef.current = edges;
+    const dragStartRef = useRef(null);
+    const dragMovedRef = useRef(false);
+    const suppressMentorClickRef = useRef(false);
+    // Track if we've loaded initial data from props
+    const hasLoadedInitialData = useRef(false);
+    // Track last emitted state to avoid duplicate onStateChange calls
+    const lastEmittedStateRef = useRef(null);
+    const [fetchMentorSettings] = useLazyGetMentorSettingsQuery();
+    // Sync nodes and edges when initialNodes/initialEdges change
+    // This handles both preview mode updates and initial data load
+    useEffect(() => {
+        // In preview mode, always sync when props change
+        if (previewMode) {
+            if (initialNodes && initialNodes.length > 0) {
+                setNodes(initialNodes);
+            }
+            if (initialEdges) {
+                setEdges(initialEdges);
+            }
+            return;
+        }
+        // In edit mode, only sync on first load (when data comes from API)
+        if (!hasLoadedInitialData.current && initialNodes && initialNodes.length > 0) {
+            setNodes(initialNodes);
+            if (initialEdges) {
+                setEdges(initialEdges);
+            }
+            // Reset history with loaded data
+            setHistory([{ nodes: initialNodes, edges: initialEdges || [] }]);
+            historyIndexRef.current = 0;
+            setHistoryIndex(0);
+            hasLoadedInitialData.current = true;
+        }
+    }, [previewMode, initialNodes, initialEdges]);
+    useEffect(() => {
+        if (previewMode && initialViewport) {
+            setZoom(initialViewport.zoom);
+            setPanOffset({ x: initialViewport.x, y: initialViewport.y });
+        }
+    }, [previewMode, initialViewport]);
+    const saveToHistory = useCallback((newNodes, newEdges) => {
+        const index = historyIndexRef.current;
+        setHistory((prev) => {
+            const newHistory = prev.slice(0, index + 1);
+            newHistory.push({ nodes: [...newNodes], edges: [...newEdges] });
+            return newHistory.slice(-50); // Keep last 50 states
+        });
+        historyIndexRef.current = Math.min(index + 1, 49);
+        setHistoryIndex(historyIndexRef.current);
+    }, []);
+    const restoreHistory = (newIndex) => {
+        historyIndexRef.current = newIndex;
+        setHistoryIndex(newIndex);
+        setNodes(history[newIndex].nodes);
+        setEdges(history[newIndex].edges);
+        setSelectedEdgeId(null);
+        setHoveredEdgeId(null);
+    };
+    const handleUndo = () => {
+        if (historyIndex > 0)
+            restoreHistory(historyIndex - 1);
+    };
+    const handleRedo = () => {
+        if (historyIndex < history.length - 1)
+            restoreHistory(historyIndex + 1);
+    };
+    const handleZoomIn = () => {
+        setZoom((prev) => Math.min(prev + 0.1, 2));
+    };
+    const handleZoomOut = () => {
+        setZoom((prev) => Math.max(prev - 0.1, 0.5));
+    };
+    const handleUpdateNode = useCallback((nodeId, updates) => {
+        const target = nodesRef.current.find((node) => node.id === nodeId);
+        if (!target)
+            return;
+        const shouldSyncMentorId = target.type === 'mentor' &&
+            updates.entry_mentor_id !== undefined &&
+            updates.mentor_id === undefined;
+        const normalizedUpdates = shouldSyncMentorId
+            ? { ...updates, mentor_id: updates.entry_mentor_id }
+            : updates;
+        const applyUpdate = (node) => node.id === nodeId ? { ...node, data: { ...node.data, ...normalizedUpdates } } : node;
+        const { conditions } = updates;
+        const moveBranchEdges = (current) => isConditionalType(target.type) && conditions
+            ? reindexConditionEdges(current, nodeId, getConditions(target.data), conditions)
+            : current;
+        const newNodes = nodesRef.current.map(applyUpdate);
+        const newEdges = moveBranchEdges(edgesRef.current);
+        nodesRef.current = newNodes;
+        edgesRef.current = newEdges;
+        setNodes((prev) => prev.map(applyUpdate));
+        setEdges(moveBranchEdges);
+        saveToHistory(newNodes, newEdges);
+    }, [saveToHistory]);
+    const prefillMentorNode = useCallback(async (nodeId, mentorId, existingData) => {
+        if (!mentorId || !org || !username)
+            return;
+        try {
+            const settings = (await fetchMentorSettings({
+                mentor: mentorId,
+                org,
+            }).unwrap());
+            const mentorLabel = settings.display_name || settings.mentor_name;
+            const mentorInstructions = settings.system_prompt;
+            const mentorModel = settings.llm_name;
+            const updates = {};
+            if (mentorLabel && isDefaultMentorLabel(existingData === null || existingData === void 0 ? void 0 : existingData.label)) {
+                updates.label = mentorLabel;
+            }
+            if (mentorInstructions && !(existingData === null || existingData === void 0 ? void 0 : existingData.instructions)) {
+                updates.instructions = mentorInstructions;
+            }
+            if (mentorModel && !(existingData === null || existingData === void 0 ? void 0 : existingData.model)) {
+                updates.model = mentorModel;
+            }
+            if (Object.keys(updates).length > 0) {
+                handleUpdateNode(nodeId, updates);
+            }
+        }
+        catch (error) {
+            console.error('Failed to prefill mentor node data:', error);
+        }
+    }, [fetchMentorSettings, handleUpdateNode, org, username]);
+    useEffect(() => {
+        if (!defaultMentorId || previewMode)
+            return;
+        const mentorNodesMissingId = nodes.filter((node) => node.type === 'mentor' && !node.data.entry_mentor_id && !node.data.mentor_id);
+        if (mentorNodesMissingId.length === 0)
+            return;
+        setNodes((prev) => prev.map((node) => {
+            if (node.type !== 'mentor')
+                return node;
+            if (node.data.entry_mentor_id || node.data.mentor_id)
+                return node;
+            return {
+                ...node,
+                data: {
+                    ...node.data,
+                    entry_mentor_id: defaultMentorId,
+                    mentor_id: defaultMentorId,
+                },
+            };
+        }));
+        mentorNodesMissingId.forEach((node) => {
+            prefillMentorNode(node.id, defaultMentorId, node.data);
+        });
+    }, [defaultMentorId, previewMode, nodes, prefillMentorNode]);
+    const closeMentorModal = useCallback(() => {
+        setShowMentorModal(false);
+        setMentorSearchQuery('');
+        setActiveMentorNodeId(null);
+    }, []);
+    const handleMentorSelect = useCallback(async (mentor) => {
+        var _a;
+        if (!activeMentorNodeId)
+            return;
+        const mentorId = mentor.unique_id;
+        if (!mentorId)
+            return;
+        const activeNode = nodes.find((node) => node.id === activeMentorNodeId);
+        const currentData = activeNode === null || activeNode === void 0 ? void 0 : activeNode.data;
+        let updates = {
+            entry_mentor_id: mentorId,
+            mentor_id: mentorId,
+            subtitle: (_a = currentData === null || currentData === void 0 ? void 0 : currentData.subtitle) !== null && _a !== void 0 ? _a : 'Agent',
+        };
+        try {
+            if (org && username) {
+                const settings = (await fetchMentorSettings({
+                    mentor: mentorId,
+                    org,
+                }).unwrap());
+                updates = {
+                    ...updates,
+                    label: settings.display_name ||
+                        settings.mentor_name ||
+                        mentor.name ||
+                        (currentData === null || currentData === void 0 ? void 0 : currentData.label) ||
+                        'Agent',
+                    instructions: settings.system_prompt || (currentData === null || currentData === void 0 ? void 0 : currentData.instructions),
+                    model: settings.llm_name || (currentData === null || currentData === void 0 ? void 0 : currentData.model),
+                };
+            }
+            else if (mentor.name) {
+                updates = { ...updates, label: mentor.name };
+            }
+        }
+        catch (error) {
+            console.error('Failed to load mentor settings for workflow node:', error);
+            if (mentor.name) {
+                updates = { ...updates, label: mentor.name };
+            }
+        }
+        handleUpdateNode(activeMentorNodeId, updates);
+        closeMentorModal();
+    }, [
+        activeMentorNodeId,
+        closeMentorModal,
+        fetchMentorSettings,
+        handleUpdateNode,
+        nodes,
+        org,
+        username,
+    ]);
+    const handleMentorChangeClick = useCallback((nodeId) => {
+        if (previewMode)
+            return;
+        setActiveMentorNodeId(nodeId);
+        setMentorSearchQuery('');
+        setShowMentorModal(true);
+    }, [previewMode]);
+    const findNonOverlappingPosition = useCallback((baseX, baseY, nodeType, view) => {
+        var _a, _b, _c;
+        const { width: nodeWidth, height: nodeHeight } = nodeSize({
+            type: nodeType,
+        });
+        const SPACING = 20; // Minimum spacing between nodes
+        const hasOverlap = ({ x, y }) => nodes.some((node) => {
+            const existing = nodeSize(node);
+            return !(x + nodeWidth + SPACING < node.position.x ||
+                x > node.position.x + existing.width + SPACING ||
+                y + nodeHeight + SPACING < node.position.y ||
+                y > node.position.y + existing.height + SPACING);
+        });
+        // A step placed past the canvas edge hides its connection points.
+        const isVisible = ({ x, y }) => !view ||
+            (x >= view.left &&
+                y >= view.top &&
+                x + nodeWidth <= view.right &&
+                y + nodeHeight <= view.bottom);
+        const stepX = nodeWidth + SPACING * 2;
+        const stepY = nodeHeight + SPACING * 2;
+        const candidates = [
+            { x: baseX, y: baseY },
+            { x: baseX + stepX, y: baseY }, // Right
+            { x: baseX, y: baseY + stepY }, // Below
+            { x: baseX - stepX, y: baseY }, // Left
+            { x: baseX, y: baseY - stepY }, // Above
+            { x: baseX + stepX, y: baseY + stepY }, // Bottom-right
+            { x: baseX - stepX, y: baseY + stepY }, // Bottom-left
+            { x: baseX + stepX, y: baseY - stepY }, // Top-right
+            { x: baseX - stepX, y: baseY - stepY }, // Top-left
+        ];
+        // The top-left corner wins when the card is bigger than the view.
+        const clampToView = ({ x, y }) => view
+            ? {
+                x: Math.max(view.left, Math.min(x, view.right - nodeWidth)),
+                y: Math.max(view.top, Math.min(y, view.bottom - nodeHeight)),
+            }
+            : { x, y };
+        return ((_c = (_b = (_a = candidates.find((pos) => !hasOverlap(pos) && isVisible(pos))) !== null && _a !== void 0 ? _a : candidates.map(clampToView).find((pos) => !hasOverlap(pos))) !== null && _b !== void 0 ? _b : candidates.find((pos) => !hasOverlap(pos))) !== null && _c !== void 0 ? _c : {
+            x: baseX + (nodeWidth + SPACING) * 2,
+            y: baseY + (nodeHeight + SPACING) * 2,
+        });
+    }, [nodes]);
+    const visibleBounds = (rect) => {
+        // `|| 0` keeps an unpanned edge at 0 rather than -0.
+        const left = -panOffset.x / zoom || 0;
+        const top = -panOffset.y / zoom || 0;
+        return {
+            left,
+            top,
+            right: left + rect.width / zoom,
+            bottom: top + Math.max(0, rect.height - TOOLBAR_CLEARANCE) / zoom,
+        };
+    };
+    useEffect(() => {
+        if (previewMode)
+            return; // Don't add nodes in preview mode
+        if (onClickedItem && canvasRef.current) {
+            // Prevent duplicate additions - skip if we already processed this exact click object
+            if (processedClickRef.current === onClickedItem) {
+                return;
+            }
+            processedClickRef.current = onClickedItem;
+            const rect = canvasRef.current.getBoundingClientRect();
+            const centerX = (rect.width / 2 - panOffset.x) / zoom;
+            const centerY = (rect.height / 2 - panOffset.y) / zoom;
+            const size = nodeSize({ type: onClickedItem.id });
+            const { x, y } = findNonOverlappingPosition(centerX - size.width / 2, centerY - size.height / 2, onClickedItem.id, visibleBounds(rect));
+            const newNode = {
+                id: `${onClickedItem.id}-${Date.now()}`,
+                type: onClickedItem.id,
+                position: { x, y },
+                data: {
+                    label: onClickedItem.label,
+                    ...(onClickedItem.id === 'mentor' && {
+                        subtitle: 'Agent',
+                        color: 'chart-1',
+                        entry_mentor_id: defaultMentorId,
+                        mentor_id: defaultMentorId,
+                    }),
+                    ...(onClickedItem.id === 'note' && { content: 'Sticky Note' }),
+                },
+                ...(onClickedItem.id === 'note' && { width: 200, height: 120 }),
+                draggable: true,
+                selectable: true,
+                connectable: true,
+            };
+            const newNodes = [...nodes, newNode];
+            setNodes(newNodes);
+            saveToHistory(newNodes, edges);
+            if (onClickedItem.id === 'mentor' && defaultMentorId) {
+                prefillMentorNode(newNode.id, defaultMentorId, newNode.data);
+            }
+        }
+    }, [onClickedItem, defaultMentorId, edges, prefillMentorNode]);
+    const handleNodeMouseDown = (e, nodeId) => {
+        if (previewMode)
+            return; // Prevent node dragging in preview mode
+        if (e.button !== 0)
+            return;
+        e.stopPropagation();
+        const node = nodes.find((n) => n.id === nodeId);
+        if (!node)
+            return;
+        setSelectedEdgeId(null);
+        if (e.ctrlKey || e.metaKey) {
+            setNodes((prev) => prev.map((n) => (n.id === nodeId ? { ...n, selected: !n.selected } : n)));
+            if (node.type === 'mentor') {
+                setSelectedNodeForConfig(null);
+            }
+            suppressMentorClickRef.current = true;
+        }
+        else {
+            setNodes((prev) => prev.map((n) => ({ ...n, selected: n.id === nodeId })));
+            if (node.type !== 'mentor') {
+                setSelectedNodeForConfig(nodeId);
+            }
+            else {
+                setSelectedNodeForConfig(null);
+            }
+            suppressMentorClickRef.current = false;
+        }
+        dragStartRef.current = { x: e.clientX, y: e.clientY };
+        dragMovedRef.current = false;
+        setDraggedNode(nodeId);
+        setDragOffset({
+            x: e.clientX / zoom - node.position.x,
+            y: e.clientY / zoom - node.position.y,
+        });
+    };
+    const handleConnectionStart = (e, nodeId, handle) => {
+        if (previewMode)
+            return; // Prevent connection creation in preview mode
+        e.stopPropagation();
+        setConnectingFrom({ nodeId, handle });
+    };
+    const handleResizeStart = (e, nodeId, corner) => {
+        if (previewMode)
+            return; // Prevent resizing in preview mode
+        e.stopPropagation();
+        const node = nodes.find((n) => n.id === nodeId);
+        if (!node)
+            return;
+        setResizingNote({
+            nodeId,
+            corner,
+            startX: e.clientX,
+            startY: e.clientY,
+            startWidth: node.width || 200,
+            startHeight: node.height || 120,
+        });
+    };
+    const handleCanvasMouseDown = (e) => {
+        var _a, _b;
+        if (e.button !== 0 || draggedNode || connectingFrom)
+            return;
+        // Dialogs render in portals, so their backdrop's mousedown still bubbles
+        // here through the React tree.
+        if (!((_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)))
+            return;
+        const target = e.target;
+        const isCanvasClick = target === e.currentTarget || target.tagName === 'svg' || target.tagName === 'rect';
+        if (isCanvasClick && !previewMode) {
+            setSelectedNodeForConfig(null);
+            setSelectedEdgeId(null);
+        }
+        if (tool === 'hand') {
+            setIsPanning(true);
+            setPanStart({ x: e.clientX - panOffset.x, y: e.clientY - panOffset.y });
+        }
+        else if (tool === 'pointer' && !previewMode) {
+            const rect = (_b = canvasRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            if (!rect)
+                return;
+            const x = (e.clientX - rect.left - panOffset.x) / zoom;
+            const y = (e.clientY - rect.top - panOffset.y) / zoom;
+            setSelectionBox({ startX: x, startY: y, currentX: x, currentY: y });
+            setNodes((prev) => prev.map((n) => ({ ...n, selected: false })));
+        }
+    };
+    const handleMouseMove = useCallback((e) => {
+        if (draggedNode) {
+            if (dragStartRef.current) {
+                const movedX = Math.abs(e.clientX - dragStartRef.current.x);
+                const movedY = Math.abs(e.clientY - dragStartRef.current.y);
+                if (movedX > 3 || movedY > 3) {
+                    dragMovedRef.current = true;
+                }
+            }
+            const draggedNodeData = nodes.find((n) => n.id === draggedNode);
+            if (!draggedNodeData)
+                return;
+            const deltaX = e.clientX / zoom - dragOffset.x - draggedNodeData.position.x;
+            const deltaY = e.clientY / zoom - dragOffset.y - draggedNodeData.position.y;
+            setNodes((prev) => prev.map((node) => {
+                if (node.selected) {
+                    return {
+                        ...node,
+                        position: {
+                            x: node.position.x + deltaX,
+                            y: node.position.y + deltaY,
+                        },
+                        dragging: true,
+                    };
+                }
+                return node;
+            }));
+        }
+        else if (isPanning) {
+            setPanOffset({
+                x: e.clientX - panStart.x,
+                y: e.clientY - panStart.y,
+            });
+        }
+        else if (connectingFrom && canvasRef.current) {
+            const rect = canvasRef.current.getBoundingClientRect();
+            setTempConnectionPos({
+                x: (e.clientX - rect.left - panOffset.x) / zoom,
+                y: (e.clientY - rect.top - panOffset.y) / zoom,
+            });
+        }
+        else if (resizingNote) {
+            const deltaX = (e.clientX - resizingNote.startX) / zoom;
+            const deltaY = (e.clientY - resizingNote.startY) / zoom;
+            setNodes((prev) => prev.map((node) => {
+                if (node.id === resizingNote.nodeId) {
+                    let newWidth = resizingNote.startWidth;
+                    let newHeight = resizingNote.startHeight;
+                    if (resizingNote.corner.includes('right')) {
+                        newWidth = Math.max(150, resizingNote.startWidth + deltaX);
+                    }
+                    if (resizingNote.corner.includes('bottom')) {
+                        newHeight = Math.max(80, resizingNote.startHeight + deltaY);
+                    }
+                    return { ...node, width: newWidth, height: newHeight };
+                }
+                return node;
+            }));
+        }
+        else if (selectionBox && canvasRef.current) {
+            const rect = canvasRef.current.getBoundingClientRect();
+            const currentX = (e.clientX - rect.left - panOffset.x) / zoom;
+            const currentY = (e.clientY - rect.top - panOffset.y) / zoom;
+            setSelectionBox((prev) => (prev ? { ...prev, currentX, currentY } : null));
+            const minX = Math.min(selectionBox.startX, currentX);
+            const maxX = Math.max(selectionBox.startX, currentX);
+            const minY = Math.min(selectionBox.startY, currentY);
+            const maxY = Math.max(selectionBox.startY, currentY);
+            setNodes((prev) => prev.map((node) => {
+                const { width, height } = nodeSize(node);
+                const nodeInBox = node.position.x + width > minX &&
+                    node.position.x < maxX &&
+                    node.position.y + height > minY &&
+                    node.position.y < maxY;
+                return { ...node, selected: nodeInBox };
+            }));
+        }
+    }, [
+        draggedNode,
+        dragOffset,
+        isPanning,
+        panStart,
+        connectingFrom,
+        panOffset,
+        resizingNote,
+        selectionBox,
+        nodes,
+        zoom,
+    ]);
+    const handleMouseUp = useCallback(() => {
+        var _a;
+        const targetNode = hoveredNode ? nodes.find((n) => n.id === hoveredNode) : undefined;
+        if (connectingFrom &&
+            targetNode &&
+            connectingFrom.nodeId !== targetNode.id &&
+            canReceiveConnection(targetNode.type)) {
+            const { nodeId, handle } = connectingFrom;
+            const fromSameOutput = (edge) => edge.source === nodeId && (edge.sourceHandle || 'right') === handle;
+            const existing = edges.find((edge) => fromSameOutput(edge) && edge.target === targetNode.id);
+            const connection = existing !== null && existing !== void 0 ? existing : {
+                id: edgeIdFor(nodeId, handle, targetNode.id),
+                source: nodeId,
+                target: targetNode.id,
+                sourceHandle: handle,
+                targetHandle: 'left',
+            };
+            // The backend routes each branch output to a single step and keeps
+            // only the last connection, so drawing one replaces the others - even
+            // when it repeats a connection an older save already had.
+            const newEdges = isBranchHandle(handle)
+                ? [...edges.filter((edge) => !fromSameOutput(edge)), connection]
+                : existing
+                    ? edges
+                    : [...edges, connection];
+            if (existing ? newEdges.length !== edges.length : true) {
+                setEdges(newEdges);
+                saveToHistory(nodes, newEdges);
+            }
+        }
+        if (draggedNode) {
+            setNodes((prev) => prev.map((n) => ({ ...n, dragging: false })));
+            saveToHistory(nodes, edges);
+            if (!previewMode && !dragMovedRef.current && !suppressMentorClickRef.current) {
+                const clickedNode = nodes.find((node) => node.id === draggedNode);
+                if ((clickedNode === null || clickedNode === void 0 ? void 0 : clickedNode.type) === 'mentor') {
+                    onOpenAgentSettings === null || onOpenAgentSettings === void 0 ? void 0 : onOpenAgentSettings((_a = clickedNode.data.mentor_id) !== null && _a !== void 0 ? _a : clickedNode.data.entry_mentor_id);
+                }
+            }
+        }
+        dragMovedRef.current = false;
+        dragStartRef.current = null;
+        suppressMentorClickRef.current = false;
+        setDraggedNode(null);
+        setIsPanning(false);
+        setConnectingFrom(null);
+        setTempConnectionPos(null);
+        setResizingNote(null);
+        setSelectionBox(null);
+    }, [
+        connectingFrom,
+        hoveredNode,
+        draggedNode,
+        nodes,
+        edges,
+        saveToHistory,
+        onOpenAgentSettings,
+        previewMode,
+        defaultMentorId,
+    ]);
+    useEffect(() => {
+        if (draggedNode || isPanning || connectingFrom || resizingNote || selectionBox) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                window.removeEventListener('mousemove', handleMouseMove);
+                window.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+    }, [
+        draggedNode,
+        isPanning,
+        connectingFrom,
+        resizingNote,
+        selectionBox,
+        handleMouseMove,
+        handleMouseUp,
+    ]);
+    const handleDrop = (e) => {
+        if (previewMode)
+            return; // Prevent dropping in preview mode
+        e.preventDefault();
+        if (!canvasRef.current)
+            return;
+        const rect = canvasRef.current.getBoundingClientRect();
+        const baseX = (e.clientX - rect.left - panOffset.x) / zoom;
+        const baseY = (e.clientY - rect.top - panOffset.y) / zoom;
+        try {
+            const data = JSON.parse(e.dataTransfer.getData('application/json'));
+            const { x, y } = findNonOverlappingPosition(baseX, baseY, data.id, visibleBounds(rect));
+            const newNode = {
+                id: `${data.id}-${Date.now()}`,
+                type: data.id,
+                position: { x, y },
+                data: {
+                    label: data.label,
+                    ...(data.id === 'mentor' && {
+                        subtitle: 'Agent',
+                        color: 'chart-1',
+                        entry_mentor_id: defaultMentorId,
+                        mentor_id: defaultMentorId,
+                    }),
+                    ...(data.id === 'note' && { content: 'Sticky Note' }),
+                },
+                ...(data.id === 'note' && { width: 200, height: 120 }),
+                draggable: true,
+                selectable: true,
+                connectable: true,
+            };
+            const newNodes = [...nodes, newNode];
+            setNodes(newNodes);
+            saveToHistory(newNodes, edges);
+            if (data.id === 'mentor' && defaultMentorId) {
+                prefillMentorNode(newNode.id, defaultMentorId, newNode.data);
+            }
+        }
+        catch (error) {
+            console.error('Failed to parse dropped data:', error);
+        }
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+    };
+    const getHandlePosition = (node, handle) => {
+        let nodeWidth = 140;
+        let nodeHeight = 50;
+        if (node.type === 'start') {
+            nodeWidth = 100;
+            nodeHeight = 50;
+        }
+        else if (node.type === 'while' || node.type === 'user-approval') {
+            nodeWidth = 280;
+            nodeHeight = branchCardHeight(2);
+        }
+        else if (isConditionalType(node.type)) {
+            nodeWidth = 280;
+            nodeHeight = branchCardHeight(getConditionCount(node.data) + 1);
+        }
+        else if (node.type === 'note') {
+            nodeWidth = node.width || 200;
+            nodeHeight = node.height || 120;
+        }
+        const HANDLE_OFFSET = 8;
+        switch (handle) {
+            case 'left':
+                return {
+                    x: node.position.x - HANDLE_OFFSET,
+                    y: node.position.y + nodeHeight / 2,
+                };
+            case 'right':
+                return {
+                    x: node.position.x + nodeWidth + HANDLE_OFFSET,
+                    y: node.position.y + nodeHeight / 2,
+                };
+            case 'top':
+                return {
+                    x: node.position.x + nodeWidth / 2,
+                    y: node.position.y - HANDLE_OFFSET,
+                };
+            case 'bottom':
+                return {
+                    x: node.position.x + nodeWidth / 2,
+                    y: node.position.y + nodeHeight + HANDLE_OFFSET,
+                };
+            case 'else':
+                return {
+                    x: node.position.x + nodeWidth + HANDLE_OFFSET,
+                    y: node.position.y + branchRowCenter(getConditionCount(node.data)),
+                };
+            case WHILE_LOOP_HANDLE:
+            case 'approve':
+                return {
+                    x: node.position.x + nodeWidth + HANDLE_OFFSET,
+                    y: node.position.y + branchRowCenter(0),
+                };
+            case WHILE_DONE_HANDLE:
+            case 'reject':
+                return {
+                    x: node.position.x + nodeWidth + HANDLE_OFFSET,
+                    y: node.position.y + branchRowCenter(1),
+                };
+            default:
+                if (handle.startsWith('condition-')) {
+                    const index = Number.parseInt(handle.split('-')[1]);
+                    return {
+                        x: node.position.x + nodeWidth + HANDLE_OFFSET,
+                        y: node.position.y + branchRowCenter(index),
+                    };
+                }
+                return { x: node.position.x, y: node.position.y };
+        }
+    };
+    const getConnectionPath = (from, to) => {
+        const dx = to.x - from.x;
+        const dy = to.y - from.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const controlPointOffset = Math.min(distance * 0.5, 100);
+        return `M ${from.x} ${from.y} C ${from.x + controlPointOffset} ${from.y}, ${to.x - controlPointOffset} ${to.y}, ${to.x} ${to.y}`;
+    };
+    const deleteNodes = useCallback((nodeIds) => {
+        const ids = new Set(nodes
+            .filter((node) => nodeIds.includes(node.id) && isDeletableNode(node))
+            .map((node) => node.id));
+        if (ids.size === 0)
+            return;
+        const newNodes = nodes.filter((node) => !ids.has(node.id));
+        const newEdges = edges.filter((edge) => !ids.has(edge.source) && !ids.has(edge.target));
+        setNodes(newNodes);
+        setEdges(newEdges);
+        setSelectedNodeForConfig((current) => (current && ids.has(current) ? null : current));
+        const keepsEdge = (current) => current && newEdges.some((edge) => edge.id === current) ? current : null;
+        setSelectedEdgeId(keepsEdge);
+        setHoveredEdgeId(keepsEdge);
+        saveToHistory(newNodes, newEdges);
+    }, [nodes, edges, saveToHistory]);
+    const deleteEdge = useCallback((edgeId) => {
+        const newEdges = edges.filter((edge) => edge.id !== edgeId);
+        if (newEdges.length === edges.length)
+            return;
+        setEdges(newEdges);
+        setSelectedEdgeId(null);
+        setHoveredEdgeId(null);
+        saveToHistory(nodes, newEdges);
+    }, [nodes, edges, saveToHistory]);
+    const selectEdge = (edgeId) => {
+        setSelectedEdgeId(edgeId);
+        setSelectedNodeForConfig(null);
+        setNodes((prev) => prev.map((n) => ({ ...n, selected: false })));
+    };
+    const handleDeleteSelection = useCallback(() => {
+        if (selectedEdgeId && edges.some((edge) => edge.id === selectedEdgeId)) {
+            deleteEdge(selectedEdgeId);
+            return;
+        }
+        deleteNodes(nodes.filter((node) => node.selected).map((node) => node.id));
+    }, [selectedEdgeId, edges, deleteEdge, deleteNodes, nodes]);
+    useEffect(() => {
+        if (previewMode)
+            return;
+        const handleKeyDown = (e) => {
+            var _a, _b;
+            if (e.key !== 'Delete' && e.key !== 'Backspace')
+                return;
+            const target = e.target;
+            if (target.tagName === 'INPUT' ||
+                target.tagName === 'TEXTAREA' ||
+                target.isContentEditable ||
+                ((_a = target.closest) === null || _a === void 0 ? void 0 : _a.call(target, NODE_PANEL_SELECTOR)) ||
+                !canvasHasPointerRef.current) {
+                return;
+            }
+            // Dialogs and menus (Edit Agent, Add State Variable, selects) render in
+            // portals; a key pressed there must not delete the step behind them.
+            const active = document.activeElement;
+            if (active && active !== document.body && !((_b = rootRef.current) === null || _b === void 0 ? void 0 : _b.contains(active))) {
+                return;
+            }
+            e.preventDefault();
+            handleDeleteSelection();
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [previewMode, handleDeleteSelection]);
+    useEffect(() => {
+        if (onStateChange && !previewMode) {
+            // Strip UI-only properties for comparison to avoid triggering on selection changes
+            const strippedNodes = stripUiProperties(nodes);
+            const strippedEdges = stripEdgeUiProperties(edges);
+            const stateKey = JSON.stringify({
+                nodes: strippedNodes,
+                edges: strippedEdges,
+            });
+            // Only trigger onStateChange if actual data changed (not just selection/dragging)
+            if (stateKey !== lastEmittedStateRef.current) {
+                lastEmittedStateRef.current = stateKey;
+                const reactFlowData = {
+                    nodes: strippedNodes,
+                    edges: strippedEdges,
+                    viewport: { x: panOffset.x, y: panOffset.y, zoom },
+                };
+                onStateChange(reactFlowData);
+            }
+        }
+    }, [nodes, edges, zoom, panOffset, previewMode, onStateChange]);
+    const workflowVariables = useMemo(() => collectWorkflowVariables(nodes), [nodes]);
+    const variableUsages = useMemo(() => collectVariableUsages(nodes), [nodes]);
+    const edgeGeometry = edges.flatMap((edge) => {
+        const fromNode = nodes.find((n) => n.id === edge.source);
+        const toNode = nodes.find((n) => n.id === edge.target);
+        if (!fromNode || !toNode)
+            return [];
+        const from = getHandlePosition(fromNode, edge.sourceHandle || 'right');
+        const to = getHandlePosition(toNode, edge.targetHandle || 'left');
+        // getConnectionPath's control points mirror each other, so the curve
+        // passes through the plain midpoint of its ends.
+        const midpoint = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
+        return [{ edge, path: getConnectionPath(from, to), midpoint }];
+    });
+    const activeMentorNode = activeMentorNodeId
+        ? nodes.find((node) => node.id === activeMentorNodeId)
+        : undefined;
+    const activeMentorId = (_a = activeMentorNode === null || activeMentorNode === void 0 ? void 0 : activeMentorNode.data.mentor_id) !== null && _a !== void 0 ? _a : activeMentorNode === null || activeMentorNode === void 0 ? void 0 : activeMentorNode.data.entry_mentor_id;
+    const selectedMentorIds = activeMentorId ? [activeMentorId] : [];
+    return (jsxs("div", { ref: rootRef, onMouseDownCapture: (e) => {
+            var _a;
+            const target = e.target;
+            canvasHasPointerRef.current =
+                !!((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) && !target.closest(NODE_PANEL_SELECTOR);
+        }, "data-testid": "workflow-canvas", className: "bg-background relative h-full w-full overflow-hidden select-none", children: [jsxs("div", { ref: canvasRef, className: `absolute inset-0 ${tool === 'hand' ? (isPanning ? 'cursor-grabbing' : 'cursor-grab') : 'cursor-default'}`, onMouseDown: handleCanvasMouseDown, onDrop: handleDrop, onDragOver: handleDragOver, children: [jsxs("svg", { className: "pointer-events-none h-full w-full", children: [jsx("defs", { children: jsx("pattern", { id: "grid", width: "20", height: "20", patternUnits: "userSpaceOnUse", children: jsx("circle", { cx: "1", cy: "1", r: "0.5", fill: "hsl(var(--muted-foreground) / 0.2)" }) }) }), jsx("rect", { width: "100%", height: "100%", fill: "url(#grid)" }), jsxs("g", { transform: `translate(${panOffset.x}, ${panOffset.y}) scale(${zoom})`, children: [edgeGeometry.map(({ edge, path }) => {
+                                        const isActive = !previewMode && (edge.id === selectedEdgeId || edge.id === hoveredEdgeId);
+                                        return (jsxs("g", { children: [jsx("path", { d: path, stroke: isActive ? '#1D7FC0' : '#38A1E5', strokeWidth: isActive ? 3 : 2, fill: "none", strokeLinecap: "round" }), !previewMode && (jsx("path", { "data-testid": `workflow-edge-${edge.id}`, d: path, stroke: "transparent", strokeWidth: 16, fill: "none", className: "cursor-pointer", style: { pointerEvents: 'stroke' }, onMouseDown: (e) => {
+                                                        if (e.button !== 0)
+                                                            return;
+                                                        e.stopPropagation();
+                                                        selectEdge(edge.id);
+                                                    }, onMouseEnter: () => setHoveredEdgeId(edge.id), onMouseLeave: () => setHoveredEdgeId(null) }))] }, edge.id));
+                                    }), connectingFrom &&
+                                        tempConnectionPos &&
+                                        (() => {
+                                            const fromNode = nodes.find((n) => n.id === connectingFrom.nodeId);
+                                            if (!fromNode)
+                                                return null;
+                                            const fromPos = getHandlePosition(fromNode, connectingFrom.handle);
+                                            return (jsx("path", { d: getConnectionPath(fromPos, tempConnectionPos), stroke: "#38A1E5", strokeWidth: "2", strokeDasharray: "5,5", fill: "none", strokeLinecap: "round" }));
+                                        })(), selectionBox && (jsx("rect", { x: Math.min(selectionBox.startX, selectionBox.currentX), y: Math.min(selectionBox.startY, selectionBox.currentY), width: Math.abs(selectionBox.currentX - selectionBox.startX), height: Math.abs(selectionBox.currentY - selectionBox.startY), fill: "rgba(56, 161, 229, 0.1)", stroke: "#38A1E5", strokeWidth: "1", strokeDasharray: "4,4" }))] })] }), jsxs("div", { className: "pointer-events-none absolute inset-0", style: {
+                            transform: `translate(${panOffset.x}px, ${panOffset.y}px) scale(${zoom})`,
+                            transformOrigin: '0 0',
+                        }, children: [!previewMode &&
+                                edgeGeometry.map(({ edge, midpoint }) => edge.id === selectedEdgeId || edge.id === hoveredEdgeId ? (jsx(ActionTooltip, { label: t('workflowsWorkflowCanvas.deleteConnection'), children: jsx("button", { type: "button", "aria-label": t('workflowsWorkflowCanvas.deleteConnection'), "data-testid": `workflow-edge-delete-${edge.id}`, className: "bg-card border-border text-muted-foreground hover:text-destructive pointer-events-auto absolute z-10 flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border shadow-sm", style: { left: `${midpoint.x}px`, top: `${midpoint.y}px` }, onMouseDown: (e) => e.stopPropagation(), onMouseEnter: () => setHoveredEdgeId(edge.id), onMouseLeave: () => setHoveredEdgeId(null), onClick: (e) => {
+                                            e.stopPropagation();
+                                            deleteEdge(edge.id);
+                                        }, children: jsx(X, { className: "h-3.5 w-3.5" }) }) }, edge.id)) : null), nodes.map((node) => (jsxs("div", { "data-testid": `workflow-node-${node.id}`, "data-node-type": node.type, className: `group pointer-events-auto absolute ${node.selected ? 'ring-offset-background rounded-xl ring-2 ring-[#38A1E5] ring-offset-2' : ''}`, style: {
+                                    left: `${node.position.x}px`,
+                                    top: `${node.position.y}px`,
+                                }, onMouseDown: (e) => {
+                                    if (node.type !== 'note' || !editingNote) {
+                                        handleNodeMouseDown(e, node.id);
+                                    }
+                                }, onMouseEnter: () => setHoveredNode(node.id), onMouseLeave: () => setHoveredNode(null), children: [!previewMode && isDeletableNode(node) && (jsx(ActionTooltip, { label: t('workflowsWorkflowCanvas.deleteNode', { label: node.data.label }), children: jsx("button", { type: "button", "aria-label": t('workflowsWorkflowCanvas.deleteNode', { label: node.data.label }), className: `bg-card border-border text-muted-foreground hover:text-destructive absolute -top-3 -right-3 z-10 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-opacity group-hover:opacity-100 focus-visible:opacity-100 ${node.selected ? 'opacity-100' : 'opacity-0'}`, onMouseDown: (e) => e.stopPropagation(), onClick: (e) => {
+                                                e.stopPropagation();
+                                                deleteNodes([node.id]);
+                                            }, children: jsx(Trash2, { className: "h-3.5 w-3.5" }) }) })), node.type === 'start' ? (jsxs("div", { className: "bg-card border-border relative flex cursor-grab items-center gap-3 rounded-xl border px-4 py-3 transition-colors hover:border-[#38A1E5] active:cursor-grabbing", children: [jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded", style: { backgroundColor: 'rgba(56, 161, 229, 0.2)' }, children: jsx(Play, { className: "h-4 w-4", style: { color: '#38A1E5' } }) }), jsx("span", { className: "text-foreground font-medium", children: node.data.label }), jsx("div", { className: "border-background absolute top-1/2 -right-2 h-3 w-3 -translate-y-1/2 cursor-crosshair rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' }, onMouseDown: (e) => handleConnectionStart(e, node.id, 'right') })] })) : node.type === 'while' ? (jsxs("div", { className: "border-border bg-card relative cursor-grab rounded-2xl border transition-colors hover:border-[#38A1E5] active:cursor-grabbing", style: { width: '280px' }, children: [jsxs("div", { className: "flex items-center gap-3 p-4 pb-3", children: [jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg", style: { backgroundColor: 'rgba(56, 161, 229, 0.2)' }, children: jsx(RefreshCw, { className: "h-5 w-5", style: { color: '#38A1E5' } }) }), jsx("span", { className: "text-foreground font-medium", children: node.data.label })] }), jsx("div", { className: "space-y-2 px-4 pb-4", children: [
+                                                    { handle: WHILE_LOOP_HANDLE, label: t('workflowsWorkflowCanvas.whileLoop') },
+                                                    { handle: WHILE_DONE_HANDLE, label: t('workflowsWorkflowCanvas.whileDone') },
+                                                ].map(({ handle, label }) => (jsxs("div", { className: "bg-muted/50 relative flex items-center justify-between rounded-lg px-4 py-3", children: [jsx("span", { className: "text-muted-foreground text-sm", children: label }), jsx("div", { "data-testid": `workflow-handle-${node.id}-${handle}`, className: "border-background absolute top-1/2 -right-[18px] h-3 w-3 -translate-y-1/2 cursor-crosshair rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' }, onMouseDown: (e) => handleConnectionStart(e, node.id, handle) })] }, handle))) }), jsx("div", { className: "border-background absolute top-1/2 -left-2 h-3 w-3 -translate-y-1/2 rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' } })] })) : isConditionalType(node.type) ? ((() => {
+                                        const conditionCount = getConditionCount(node.data);
+                                        const nodeHeight = branchCardHeight(conditionCount + 1);
+                                        return (jsxs("div", { className: "border-border bg-card relative cursor-grab rounded-2xl border transition-colors hover:border-[#38A1E5] active:cursor-grabbing", style: { width: '280px', minHeight: `${nodeHeight}px` }, children: [jsxs("div", { className: "flex items-center gap-3 p-4 pb-3", children: [jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg", style: { backgroundColor: 'rgba(56, 161, 229, 0.2)' }, children: jsx(GitBranch, { className: "h-5 w-5", style: { color: '#38A1E5' } }) }), jsx("span", { className: "text-foreground font-medium", children: node.data.label })] }), jsxs("div", { className: "space-y-2 px-4 pb-4", children: [Array.from({ length: conditionCount }).map((_, index) => (jsxs("div", { className: "bg-muted/50 relative flex items-center justify-between rounded-lg px-4 py-3", children: [jsx("span", { className: "text-muted-foreground text-sm", children: index === 0
+                                                                        ? t('workflowsWorkflowCanvas.ifCondition')
+                                                                        : t('workflowsWorkflowCanvas.elseIf', { index }) }), jsx("div", { "data-testid": `workflow-handle-${node.id}-condition-${index}`, className: "border-background absolute top-1/2 -right-[18px] h-3 w-3 -translate-y-1/2 cursor-crosshair rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' }, onMouseDown: (e) => handleConnectionStart(e, node.id, `condition-${index}`) })] }, index))), jsxs("div", { className: "bg-muted/50 relative flex items-center justify-between rounded-lg px-4 py-3", children: [jsx("span", { className: "text-muted-foreground text-sm", children: t('workflowsWorkflowCanvas.elseCondition') }), jsx("div", { "data-testid": `workflow-handle-${node.id}-else`, className: "border-background absolute top-1/2 -right-[18px] h-3 w-3 -translate-y-1/2 cursor-crosshair rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' }, onMouseDown: (e) => handleConnectionStart(e, node.id, 'else') })] })] }), jsx("div", { className: "border-background absolute top-1/2 -left-2 h-3 w-3 -translate-y-1/2 rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' } })] }));
+                                    })()) : node.type === 'user-approval' ? (jsxs("div", { className: "border-border bg-card relative cursor-grab rounded-2xl border transition-colors hover:border-[#38A1E5] active:cursor-grabbing", style: { width: '280px' }, children: [jsxs("div", { className: "flex items-center gap-3 p-4 pb-3", children: [jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg", style: { backgroundColor: 'rgba(56, 161, 229, 0.2)' }, children: jsx(ThumbsUp, { className: "h-5 w-5", style: { color: '#38A1E5' } }) }), jsx("span", { className: "text-foreground font-medium", children: node.data.label })] }), jsxs("div", { className: "space-y-2 px-4 pb-4", children: [jsxs("div", { className: "bg-muted/50 relative flex items-center justify-between rounded-lg px-4 py-3", children: [jsx("span", { className: "text-muted-foreground text-sm", children: t('workflowsWorkflowCanvas.approve') }), jsx("div", { className: "border-background absolute top-1/2 -right-[18px] h-3 w-3 -translate-y-1/2 cursor-crosshair rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' }, onMouseDown: (e) => handleConnectionStart(e, node.id, 'approve') })] }), jsxs("div", { className: "bg-muted/50 relative flex items-center justify-between rounded-lg px-4 py-3", children: [jsx("span", { className: "text-muted-foreground text-sm", children: t('workflowsWorkflowCanvas.reject') }), jsx("div", { className: "border-background absolute top-1/2 -right-[18px] h-3 w-3 -translate-y-1/2 cursor-crosshair rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' }, onMouseDown: (e) => handleConnectionStart(e, node.id, 'reject') })] })] }), jsx("div", { className: "border-background absolute top-1/2 -left-2 h-3 w-3 -translate-y-1/2 rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' } })] })) : node.type === 'transform' ||
+                                        node.type === 'set-state' ||
+                                        node.type === 'guardrails' ||
+                                        node.type === 'file-search' ||
+                                        node.type === 'mcp' ? (jsxs("div", { className: "bg-card border-border relative min-w-[140px] cursor-grab rounded-xl border px-4 py-3 transition-colors hover:border-[#38A1E5] active:cursor-grabbing", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded", style: { backgroundColor: 'rgba(56, 161, 229, 0.2)' }, children: jsx(Bot, { className: "h-3 w-3", style: { color: '#38A1E5' } }) }), jsx("span", { className: "text-foreground text-sm font-medium", children: node.data.label })] }), jsx("div", { className: "border-background absolute top-1/2 -left-2 h-3 w-3 -translate-y-1/2 rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' } }), jsx("div", { className: "border-background absolute top-1/2 -right-2 h-3 w-3 -translate-y-1/2 cursor-crosshair rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' }, onMouseDown: (e) => handleConnectionStart(e, node.id, 'right') }), jsx("div", { className: "border-background absolute -top-2 left-1/2 h-3 w-3 -translate-x-1/2 cursor-crosshair rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' }, onMouseDown: (e) => handleConnectionStart(e, node.id, 'top') }), jsx("div", { className: "border-background absolute -bottom-2 left-1/2 h-3 w-3 -translate-x-1/2 cursor-crosshair rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' }, onMouseDown: (e) => handleConnectionStart(e, node.id, 'bottom') })] })) : node.type === 'note' ? (jsxs("div", { className: "border-border relative cursor-grab rounded-lg border bg-amber-50 transition-colors hover:border-[#38A1E5] active:cursor-grabbing dark:bg-amber-950/20", style: {
+                                            width: `${node.width || 200}px`,
+                                            height: `${node.height || 120}px`,
+                                        }, onClick: (e) => {
+                                            e.stopPropagation();
+                                            setEditingNote(node.id);
+                                        }, children: [editingNote === node.id ? (jsx(Textarea, { autoFocus: true, className: "h-full w-full resize-none border-0 bg-transparent text-sm focus-visible:ring-0", value: node.data.content || '', onChange: (e) => {
+                                                    setNodes((prev) => prev.map((n) => n.id === node.id
+                                                        ? {
+                                                            ...n,
+                                                            data: { ...n.data, content: e.target.value },
+                                                        }
+                                                        : n));
+                                                }, onBlur: () => setEditingNote(null) })) : (jsx("div", { className: "text-foreground p-3 text-sm whitespace-pre-wrap", children: node.data.content || t('workflowsWorkflowCanvas.stickyNote') })), jsx("div", { className: "border-background absolute -right-1 -bottom-1 h-4 w-4 cursor-nwse-resize rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' }, onMouseDown: (e) => handleResizeStart(e, node.id, 'bottom-right') })] })) : (jsxs("div", { className: "bg-card border-border relative min-w-[140px] cursor-grab rounded-xl border px-4 py-3 transition-colors hover:border-[#38A1E5] active:cursor-grabbing", children: [jsxs("div", { className: "mb-1 flex items-center gap-2", children: [jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded", style: { backgroundColor: 'rgba(56, 161, 229, 0.2)' }, children: jsx(Bot, { className: "h-3 w-3", style: { color: '#38A1E5' } }) }), jsx("span", { className: "text-foreground text-sm font-medium", children: node.data.label }), node.type === 'mentor' && !previewMode && (jsx(ActionTooltip, { label: t('workflowsWorkflowCanvas.changeAgent'), children: jsx("button", { type: "button", "aria-label": t('workflowsWorkflowCanvas.changeAgent'), className: "text-muted-foreground hover:text-foreground ml-auto cursor-pointer p-1 transition-colors", onMouseDown: (e) => e.stopPropagation(), onClick: (e) => {
+                                                                e.stopPropagation();
+                                                                handleMentorChangeClick(node.id);
+                                                            }, children: jsx(Pencil, { className: "h-3.5 w-3.5" }) }) }))] }), node.data.subtitle && (jsx("p", { className: "text-muted-foreground ml-7 text-xs", children: node.data.subtitle })), jsx("div", { className: "border-background absolute top-1/2 -left-2 h-3 w-3 -translate-y-1/2 rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' } }), jsx("div", { className: "border-background absolute top-1/2 -right-2 h-3 w-3 -translate-y-1/2 cursor-crosshair rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' }, onMouseDown: (e) => handleConnectionStart(e, node.id, 'right') }), jsx("div", { className: "border-background absolute -top-2 left-1/2 h-3 w-3 -translate-x-1/2 cursor-crosshair rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' }, onMouseDown: (e) => handleConnectionStart(e, node.id, 'top') }), jsx("div", { className: "border-background absolute -bottom-2 left-1/2 h-3 w-3 -translate-x-1/2 cursor-crosshair rounded-full border-2 opacity-0 transition-opacity group-hover:opacity-100", style: { backgroundColor: '#38A1E5' }, onMouseDown: (e) => handleConnectionStart(e, node.id, 'bottom') })] }))] }, node.id)))] }), !previewMode &&
+                        selectedNodeForConfig &&
+                        (() => {
+                            const node = nodes.find((n) => n.id === selectedNodeForConfig);
+                            return node && node.type !== 'mentor' ? (jsx(NodeConfigPanel, { nodeId: node.id, nodeType: node.type || '', nodeData: node.data, onClose: () => setSelectedNodeForConfig(null), onUpdateNode: handleUpdateNode, onDeleteNode: isDeletableNode(node) ? () => deleteNodes([node.id]) : undefined, workflowVariables: workflowVariables, variableUsages: variableUsages, stepReferences: nodes
+                                    .filter((other) => { var _a; return other.id !== node.id && STEPS_WITH_RESULTS.has((_a = other.type) !== null && _a !== void 0 ? _a : ''); })
+                                    .map((other) => ({ id: other.id, label: other.data.label })), org: org, defaultMentorId: defaultMentorId, username: username, agentSettings: agentSettings }, node.id)) : null;
+                        })(), !previewMode && (jsx(Dialog, { open: showMentorModal, onOpenChange: (open) => {
+                            if (open) {
+                                setShowMentorModal(true);
+                            }
+                            else {
+                                closeMentorModal();
+                            }
+                        }, children: jsxs(DialogContent, { className: "w-[calc(100%-2rem)] max-w-3xl rounded-lg", children: [jsx(DialogHeader, { children: jsx(DialogTitle, { children: t('workflowsWorkflowCanvas.changeAgent') }) }), jsx(MentorSelectionGrid, { tenantKey: org !== null && org !== void 0 ? org : '', selectedMentorIds: selectedMentorIds, onMentorSelect: handleMentorSelect, searchQuery: mentorSearchQuery, onSearchChange: setMentorSearchQuery, minHeight: "360px" })] }) }))] }), !previewMode && (jsx("div", { className: "pointer-events-auto absolute bottom-6 left-1/2 -translate-x-1/2 transform", children: jsxs("div", { className: "bg-card border-border flex items-center gap-2 rounded-full border px-3 py-2 shadow-lg", children: [jsx(ActionTooltip, { label: t('workflowsWorkflowCanvas.panTool'), children: jsx(Button, { variant: tool === 'hand' ? 'default' : 'ghost', "aria-label": t('workflowsWorkflowCanvas.panTool'), size: "icon", className: `h-8 w-8 ${tool === 'hand' ? 'bg-[#38A1E5] text-white hover:bg-[#38A1E5]' : ''}`, onClick: () => setTool('hand'), children: jsx(Hand, { className: "h-4 w-4" }) }) }), jsx(ActionTooltip, { label: t('workflowsWorkflowCanvas.selectTool'), children: jsx(Button, { variant: tool === 'pointer' ? 'default' : 'ghost', "aria-label": t('workflowsWorkflowCanvas.selectTool'), size: "icon", className: `h-8 w-8 ${tool === 'pointer' ? 'bg-[#38A1E5] text-white hover:bg-[#38A1E5]' : ''}`, onClick: () => setTool('pointer'), children: jsx(MousePointer, { className: "h-4 w-4" }) }) }), jsx("div", { className: "bg-border mx-1 h-6 w-px" }), jsx(ActionTooltip, { label: t('workflowsWorkflowCanvas.undo'), children: jsx(Button, { variant: "ghost", size: "icon", className: "text-muted-foreground hover:text-foreground h-8 w-8 disabled:opacity-30", onClick: handleUndo, "aria-label": t('workflowsWorkflowCanvas.undo'), disabled: historyIndex <= 0, children: jsx(Undo, { className: "h-4 w-4" }) }) }), jsx(ActionTooltip, { label: t('workflowsWorkflowCanvas.redo'), children: jsx(Button, { variant: "ghost", size: "icon", className: "text-muted-foreground hover:text-foreground h-8 w-8 disabled:opacity-30", onClick: handleRedo, "aria-label": t('workflowsWorkflowCanvas.redo'), disabled: historyIndex >= history.length - 1, children: jsx(Redo, { className: "h-4 w-4" }) }) }), jsx("div", { className: "bg-border mx-1 h-6 w-px" }), jsx(ActionTooltip, { label: t('workflowsWorkflowCanvas.zoomOut'), children: jsx(Button, { variant: "ghost", size: "icon", className: "text-muted-foreground hover:text-foreground h-8 w-8", onClick: handleZoomOut, "aria-label": t('workflowsWorkflowCanvas.zoomOut'), children: jsx(ZoomOut, { className: "h-4 w-4" }) }) }), jsxs("span", { className: "text-muted-foreground min-w-[3ch] text-center text-xs", children: [Math.round(zoom * 100), "%"] }), jsx(ActionTooltip, { label: t('workflowsWorkflowCanvas.zoomIn'), children: jsx(Button, { variant: "ghost", size: "icon", className: "text-muted-foreground hover:text-foreground h-8 w-8", onClick: handleZoomIn, "aria-label": t('workflowsWorkflowCanvas.zoomIn'), children: jsx(ZoomIn, { className: "h-4 w-4" }) }) })] }) }))] }));
+}
+
+export { WorkflowCanvas };
+//# sourceMappingURL=workflow-canvas.js.map