@flowdrop/flowdrop 1.0.1 → 1.2.0

package/dist/components/WorkflowEditor.svelte

@@ -5,949 +5,1004 @@
 -->
 
 <script lang="ts">
-	import {
-		SvelteFlow,
-		ConnectionLineType,
-		Controls,
-		Background,
-		BackgroundVariant,
-		MiniMap,
-		SvelteFlowProvider,
-		type ColorMode
-	} from '@xyflow/svelte';
-	import '@xyflow/svelte/dist/style.css';
-	import {
-		getResolvedTheme,
-		getEditorSettings,
-		getBehaviorSettings
-	} from '../stores/settingsStore.svelte.js';
-	import type {
-		WorkflowNode as WorkflowNodeType,
-		NodeMetadata,
-		Workflow,
-		WorkflowEdge
-	} from '../types/index.js';
-	import CanvasBanner from './CanvasBanner.svelte';
-	import FlowDropZone from './FlowDropZone.svelte';
-	import EdgeRefresher from './EdgeRefresher.svelte';
-	import { tick, untrack } from 'svelte';
-	import type { EndpointConfig } from '../config/endpoints.js';
-	import ConnectionLine from './ConnectionLine.svelte';
-	import FlowDropEdge from './FlowDropEdge.svelte';
-	import { getWorkflowStore, workflowActions } from '../stores/workflowStore.svelte.js';
-	import { historyActions, setOnRestoreCallback } from '../stores/historyStore.svelte.js';
-	import UniversalNode from './UniversalNode.svelte';
-	import {
-		EdgeStylingHelper,
-		NodeOperationsHelper,
-		WorkflowOperationsHelper,
-		ConfigurationHelper
-	} from '../helpers/workflowEditorHelper.js';
-	import type { NodeExecutionInfo } from '../types/index.js';
-	import { Toaster } from 'svelte-5-french-toast';
-	import {
-		flowdropToastOptions,
-		FLOWDROP_TOASTER_CLASS,
-		apiToasts
-	} from '../services/toastService.js';
-	import {
-		ProximityConnectHelper,
-		type ProximityEdgeCandidate
-	} from '../helpers/proximityConnect.js';
-	import PortCoordinateTracker from './PortCoordinateTracker.svelte';
-	import { getPortCoordinateSnapshot } from '../stores/portCoordinateStore.svelte.js';
-	import { logger } from '../utils/logger.js';
-	import { validateWorkflowData } from '../utils/validation.js';
-	import { createEditorStateMachine } from '../stores/editorStateMachine.svelte.js';
-
-	interface Props {
-		nodes?: NodeMetadata[];
-		endpointConfig?: EndpointConfig;
-		height?: string | number;
-		width?: string | number;
-		isConfigSidebarOpen?: boolean;
-		selectedNodeForConfig?: WorkflowNodeType | null;
-		openConfigSidebar?: (node: WorkflowNodeType) => void;
-		closeConfigSidebar?: () => void;
-		// New configuration options for pipeline status mode
-		lockWorkflow?: boolean;
-		readOnly?: boolean;
-		nodeStatuses?: Record<string, 'pending' | 'running' | 'completed' | 'error'>;
-		// Pipeline ID for fetching node execution info from jobs
-		pipelineId?: string;
-	}
-
-	let props: Props = $props();
-
-	// ---------------------------------------------------------------------------
-	// Editor State Machine
-	// Centralizes reactive guards — replaces scattered boolean flags
-	// (isDraggingNode, lastEditorStoreValue identity checks, etc.)
-	// ---------------------------------------------------------------------------
-	const machine = createEditorStateMachine();
-
-	// Dev-mode transition logging
-	if (import.meta.env?.DEV) {
-		machine.onTransition((from, event, to) => {
-			logger.debug(`[EditorFSM] ${from} --${event}--> ${to}`);
-		});
-	}
-
-	// Proximity connect state
-	let currentProximityCandidates = $state<ProximityEdgeCandidate[]>([]);
-
-	// Port coordinate tracker state
-	let portCoordNodeToUpdate = $state<WorkflowNodeType | null>(null);
-	let portCoordRebuildTrigger = $state(0);
-
-	// ---------------------------------------------------------------------------
-	// Flow state — bound to SvelteFlow via bind:nodes / bind:edges
-	// These are $state.raw to prevent deep proxy leaking (SvelteFlow mutates
-	// node internals during drag which would cause infinite loops with $state).
-	// ---------------------------------------------------------------------------
-	let flowNodes = $state.raw<WorkflowNodeType[]>([]);
-	let flowEdges = $state.raw<WorkflowEdge[]>([]);
-
-	// Execution info loading state
-	let loadExecutionInfoTimeout: number | null = null;
-	let executionInfoAbortController: AbortController | null = null;
-
-	/**
-	 * Key for SvelteFlow component — changes when workflow ID changes.
-	 * Forces SvelteFlow to remount with fresh state, allowing fitView to work correctly.
-	 */
-	let svelteFlowKey = $derived(getWorkflowStore()?.id ?? 'default');
-
-	/**
-	 * Derive snap grid configuration from editor settings
-	 */
-	let snapGrid = $derived(
-		getEditorSettings().snapToGrid
-			? ([getEditorSettings().gridSize, getEditorSettings().gridSize] as [number, number])
-			: undefined
-	);
-
-	/**
-	 * Derive initial viewport configuration from editor settings
-	 */
-	let initialViewport = $derived({
-		zoom: getEditorSettings().defaultZoom,
-		x: 0,
-		y: 0
-	});
-
-	// ---------------------------------------------------------------------------
-	// Helper: derive flowNodes/flowEdges from a Workflow object
-	// ---------------------------------------------------------------------------
-	function buildFlowNodesFromStore(workflow: Workflow): {
-		nodes: WorkflowNodeType[];
-		edges: WorkflowEdge[];
-	} {
-		const nodesWithCallbacks = workflow.nodes.map((node) => ({
-			...node,
-			data: {
-				...node.data,
-				onConfigOpen: props.openConfigSidebar
-			}
-		}));
-		const styledEdges = EdgeStylingHelper.updateEdgeStyles(workflow.edges, nodesWithCallbacks);
-		return { nodes: nodesWithCallbacks, edges: styledEdges };
-	}
-
-	// ---------------------------------------------------------------------------
-	// Helper: sync current flowNodes/flowEdges back to the global store
-	// ---------------------------------------------------------------------------
-	function syncFlowToStore(): void {
-		const storeValue = untrack(() => getWorkflowStore());
-		if (!storeValue) return;
-		const updatedWorkflow = WorkflowOperationsHelper.updateWorkflow(
-			storeValue,
-			flowNodes,
-			flowEdges
-		);
-		workflowActions.updateWorkflow(updatedWorkflow);
-	}
-
-	// ---------------------------------------------------------------------------
-	// Single sync effect: workflowStore → flowNodes / flowEdges
-	// Replaces the old Effect A (store→currentWorkflow) + Effect B (currentWorkflow→flow).
-	// Suppressed during operations via state machine; handlers update flowNodes directly.
-	// ---------------------------------------------------------------------------
-	let previousSyncedWorkflowId: string | null = null;
-
-	$effect(() => {
-		const storeValue = getWorkflowStore();
-
-		// Suppressed during operations — handlers write to flowNodes directly
-		if (untrack(() => machine.permissions.suppressEffect)) return;
-
-		if (!storeValue) {
-			if (flowNodes.length > 0 || flowEdges.length > 0) {
-				flowNodes = [];
-				flowEdges = [];
-				previousSyncedWorkflowId = null;
-				untrack(() => machine.send('WORKFLOW_CLEARED'));
-			}
-			return;
-		}
-
-		const isNewWorkflow = storeValue.id !== previousSyncedWorkflowId;
-
-		if (isNewWorkflow) {
-			untrack(() =>
-				machine.send(previousSyncedWorkflowId ? 'WORKFLOW_SWITCHED' : 'WORKFLOW_LOADED')
-			);
-		}
-
-		// Derive flowNodes/flowEdges from store
-		const derived = buildFlowNodesFromStore(storeValue);
-		flowNodes = derived.nodes;
-		flowEdges = derived.edges;
-		previousSyncedWorkflowId = storeValue.id;
-
-		// Trigger port coordinate rebuild after workflow load
-		if (getEditorSettings().proximityConnect) {
-			portCoordRebuildTrigger = Date.now();
-		}
-
-		if (isNewWorkflow) {
-			untrack(() => machine.send('LOAD_COMPLETE'));
-		}
-	});
-
-	// ---------------------------------------------------------------------------
-	// Execution info effect (separate — async, depends on workflow + pipeline ID)
-	// ---------------------------------------------------------------------------
-	let previousExecWorkflowId: string | null = null;
-	let previousExecPipelineId: string | undefined = undefined;
-
-	$effect(() => {
-		const storeValue = getWorkflowStore();
-		const pipelineId = props.pipelineId;
-
-		if (!storeValue || !pipelineId) return;
-
-		const workflowChanged = storeValue.id !== previousExecWorkflowId;
-		const pipelineChanged = pipelineId !== previousExecPipelineId;
-
-		if (!workflowChanged && !pipelineChanged) return;
-
-		previousExecWorkflowId = storeValue.id;
-		previousExecPipelineId = pipelineId;
-
-		// Cancel any pending timeout / in-flight request
-		if (loadExecutionInfoTimeout) {
-			clearTimeout(loadExecutionInfoTimeout);
-			loadExecutionInfoTimeout = null;
-		}
-		if (executionInfoAbortController) {
-			executionInfoAbortController.abort();
-			executionInfoAbortController = null;
-		}
-
-		// Schedule loading with requestIdleCallback (falls back to setTimeout)
-		if (typeof requestIdleCallback !== 'undefined') {
-			loadExecutionInfoTimeout = requestIdleCallback(
-				() => {
-					loadNodeExecutionInfo();
-				},
-				{ timeout: 500 }
-			) as unknown as number;
-		} else {
-			loadExecutionInfoTimeout = setTimeout(() => {
-				loadNodeExecutionInfo();
-			}, 300) as unknown as number;
-		}
-	});
-
-	// ---------------------------------------------------------------------------
-	// History restore callback
-	// ---------------------------------------------------------------------------
-	$effect(() => {
-		setOnRestoreCallback((restoredWorkflow: Workflow) => {
-			machine.send('START_RESTORE');
-			// Update the store (effect is suppressed during 'restoring')
-			workflowActions.restoreFromHistory(restoredWorkflow);
-			// Derive flowNodes/flowEdges directly for immediate visual update
-			const derived = buildFlowNodesFromStore(restoredWorkflow);
-			flowNodes = derived.nodes;
-			flowEdges = derived.edges;
-			machine.send('RESTORE_COMPLETE');
-			// After RESTORE_COMPLETE → idle, the sync effect runs but produces
-			// the same data (no-op re-derive).
-		});
-
-		return () => {
-			setOnRestoreCallback(null);
-		};
-	});
-
-	/**
-	 * Load node execution information for all nodes in the workflow
-	 */
-	async function loadNodeExecutionInfo(): Promise<void> {
-		const workflow = untrack(() => getWorkflowStore());
-		if (!workflow?.nodes || !props.pipelineId) return;
-
-		try {
-			executionInfoAbortController = new AbortController();
-
-			const executionInfo = await NodeOperationsHelper.loadNodeExecutionInfo(
-				workflow,
-				props.pipelineId
-			);
-
-			if (executionInfoAbortController?.signal.aborted) return;
-
-			const defaultExecutionInfo: NodeExecutionInfo = {
-				status: 'idle' as const,
-				executionCount: 0,
-				isExecuting: false
-			};
-
-			// Update flowNodes with execution info (visual-only, no store sync needed)
-			flowNodes = flowNodes.map((node) => ({
-				...node,
-				data: {
-					...node.data,
-					executionInfo: executionInfo[node.id] || defaultExecutionInfo
-				}
-			}));
-
-			executionInfoAbortController = null;
-		} catch (error) {
-			if (error instanceof Error && error.name !== 'AbortError') {
-				logger.error('Failed to load node execution info:', error);
-			}
-		}
-	}
-
-	// The global store should be initialized by the parent App component
-
-	// Sidebar is now always visible - removed toggle functionality
-
-	// Node types for Svelte Flow - using UniversalNode for all node types
-	// All nodes use 'universalNode' type, and UniversalNode handles internal switching
-	const nodeTypes = {
-		universalNode: UniversalNode
-	};
-
-	// Use custom edge that shortens the path so the stroke ends at the arrow base
-	const edgeTypes = {
-		default: FlowDropEdge
-	};
-
-	// Handle arrows in our custom connection handler
-	const defaultEdgeOptions = {};
-
-	/**
-	 * Handle node drag start
-	 *
-	 * Transitions the state machine to 'dragging', which suppresses
-	 * the sync effect to prevent reactive loops during high-frequency
-	 * position updates. SvelteFlow mutates flowNodes directly via bind:nodes.
-	 */
-	function handleNodeDragStart(): void {
-		machine.send('START_DRAG');
-		// Clear any leftover proximity previews
-		currentProximityCandidates = [];
-	}
-
-	/**
-	 * Handle node drag - compute proximity connect preview edges
-	 * Called continuously during drag if proximity connect is enabled.
-	 * Uses port-to-port distance via the port coordinate store.
-	 */
-	function handleNodeDrag({
-		targetNode
-	}: {
-		targetNode: WorkflowNodeType | null;
-		nodes: WorkflowNodeType[];
-		event: MouseEvent | TouchEvent;
-	}): void {
-		if (
-			!getEditorSettings().proximityConnect ||
-			!targetNode ||
-			props.readOnly ||
-			props.lockWorkflow
-		) {
-			if (currentProximityCandidates.length > 0) {
-				flowEdges = ProximityConnectHelper.removePreviewEdges(flowEdges);
-				currentProximityCandidates = [];
-			}
-			portCoordNodeToUpdate = null;
-			return;
-		}
-
-		// Update the dragged node's port coordinates (position changed during drag)
-		portCoordNodeToUpdate = targetNode;
-
-		// Remove previous preview edges
-		const baseEdges = ProximityConnectHelper.removePreviewEdges(flowEdges);
-
-		// Find the best compatible edge using port-to-port distance
-		const portCoordinates = getPortCoordinateSnapshot();
-		const candidates =
-			portCoordinates.size > 0
-				? ProximityConnectHelper.findCompatibleEdgesByPortCoordinates(
-						targetNode.id,
-						portCoordinates,
-						baseEdges,
-						getEditorSettings().proximityConnectDistance
-					)
-				: ProximityConnectHelper.findCompatibleEdges(
-						targetNode,
-						flowNodes,
-						baseEdges,
-						getEditorSettings().proximityConnectDistance
-					);
-
-		// Create preview edges
-		const previews = ProximityConnectHelper.createPreviewEdges(candidates);
-
-		// Update state
-		currentProximityCandidates = candidates;
-		flowEdges = [...baseEdges, ...previews];
-	}
-
-	/**
-	 * Handle node drag stop
-	 *
-	 * Still in 'dragging' state — sync effect suppressed.
-	 * Syncs final positions to store, pushes history, then transitions to idle.
-	 */
-	function handleNodeDragStop(): void {
-		portCoordNodeToUpdate = null;
-
-		// Finalize proximity connect if there are candidates
-		if (getEditorSettings().proximityConnect && currentProximityCandidates.length > 0) {
-			const baseEdges = ProximityConnectHelper.removePreviewEdges(flowEdges);
-			const permanentEdges = ProximityConnectHelper.createPermanentEdges(
-				currentProximityCandidates
-			);
-
-			for (const edge of permanentEdges) {
-				const sourceNode = flowNodes.find((n) => n.id === edge.source);
-				const targetNode = flowNodes.find((n) => n.id === edge.target);
-				if (sourceNode && targetNode) {
-					EdgeStylingHelper.applyConnectionStyling(edge, sourceNode, targetNode);
-				}
-			}
-
-			flowEdges = [...baseEdges, ...permanentEdges];
-			currentProximityCandidates = [];
-		}
-
-		// Sync flowNodes/flowEdges → store
-		syncFlowToStore();
-
-		// Push history AFTER the drag completed
-		const storeValue = getWorkflowStore();
-		if (storeValue) {
-			workflowActions.pushHistory('Move node', storeValue);
-		}
-
-		// Transition to idle — sync effect is now unblocked
-		machine.send('STOP_DRAG');
-	}
-
-	/**
-	 * Handle new connections between nodes
-	 */
-	async function handleConnect(connection: {
-		source: string;
-		target: string;
-		sourceHandle?: string;
-		targetHandle?: string;
-	}): Promise<void> {
-		machine.send('START_CONNECT');
-
-		// SvelteFlow auto-creates the edge via bind:edges — wait for DOM update
-		await tick();
-
-		// Apply styling to all edges (including the new one)
-		flowEdges = EdgeStylingHelper.updateEdgeStyles(flowEdges, flowNodes);
-
-		// Sync to store
-		syncFlowToStore();
-
-		const storeValue = getWorkflowStore();
-		if (storeValue) {
-			workflowActions.pushHistory('Add connection', storeValue);
-		}
-
-		machine.send('CONNECTION_MADE');
-	}
-
-	/**
-	 * Handle before delete - show confirmation dialog if enabled in settings
-	 *
-	 * This callback is called before nodes/edges are deleted.
-	 * Return true to proceed with deletion, false to cancel.
-	 *
-	 * @param params - Object containing nodes and edges to be deleted
-	 * @returns Promise resolving to true if deletion should proceed, false to cancel
-	 */
-	async function handleBeforeDelete(params: {
-		nodes: WorkflowNodeType[];
-		edges: WorkflowEdge[];
-	}): Promise<boolean> {
-		// If confirmDelete setting is enabled, show confirmation dialog
-		if (getBehaviorSettings().confirmDelete) {
-			const nodeCount = params.nodes.length;
-			const edgeCount = params.edges.length;
-
-			// Build a descriptive message
-			let message = 'Are you sure you want to delete ';
-			const parts: string[] = [];
-
-			if (nodeCount > 0) {
-				parts.push(`${nodeCount} node${nodeCount > 1 ? 's' : ''}`);
-			}
-			if (edgeCount > 0) {
-				parts.push(`${edgeCount} connection${edgeCount > 1 ? 's' : ''}`);
-			}
-
-			message += parts.join(' and ') + '?';
-
-			// Show native confirmation dialog
-			const confirmed = window.confirm(message);
-			if (!confirmed) {
-				return false;
-			}
-		}
-
-		// Don't push to history here - we'll push AFTER deletion in handleNodesDelete
-		// This ensures undo will restore the state before deletion
-		return true;
-	}
-
-	/**
-	 * Handle node deletion - automatically remove connected edges and push to history
-	 */
-	function handleNodesDelete(params: { nodes: WorkflowNodeType[]; edges: WorkflowEdge[] }): void {
-		machine.send('START_DELETE');
-
-		const deletedNodeIds = new Set(params.nodes.map((node) => node.id));
-
-		// Filter out edges connected to deleted nodes
-		flowEdges = flowEdges.filter(
-			(edge) => !deletedNodeIds.has(edge.source) && !deletedNodeIds.has(edge.target)
-		);
-
-		// Sync to store
-		syncFlowToStore();
-
-		// Push to history AFTER the deletion so undo restores the previous state
-		const nodeCount = params.nodes.length;
-		const edgeCount = params.edges.length;
-		let description = 'Delete';
-		if (nodeCount > 0 && edgeCount > 0) {
-			description = `Delete ${nodeCount} node${nodeCount > 1 ? 's' : ''} and ${edgeCount} connection${edgeCount > 1 ? 's' : ''}`;
-		} else if (nodeCount > 0) {
-			description = `Delete ${nodeCount} node${nodeCount > 1 ? 's' : ''}`;
-		} else if (edgeCount > 0) {
-			description = `Delete ${edgeCount} connection${edgeCount > 1 ? 's' : ''}`;
-		}
-		const storeValue = getWorkflowStore();
-		if (storeValue) {
-			workflowActions.pushHistory(description, storeValue);
-		}
-
-		machine.send('DELETE_COMPLETE');
-	}
-
-	// Edge styling will be handled when edges are first created or manually updated
-
-	// Configure endpoints when props change
-	$effect(() => {
-		if (props.endpointConfig) {
-			ConfigurationHelper.configureEndpoints(props.endpointConfig);
-		}
-	});
-
-	/**
-	 * Check if workflow has cycles
-	 */
-	function checkWorkflowCycles(): boolean {
-		return WorkflowOperationsHelper.checkWorkflowCycles(flowNodes, flowEdges);
-	}
-
-	/**
-	 * Handle drop event and add new node to canvas
-	 */
-	async function handleNodeDrop(
-		nodeTypeData: string,
-		position: { x: number; y: number }
-	): Promise<void> {
-		machine.send('START_DROP');
-
-		const newNode = NodeOperationsHelper.createNodeFromDrop(nodeTypeData, position, flowNodes);
-
-		if (newNode) {
-			// Add onConfigOpen callback and append to flowNodes for immediate visual feedback
-			const nodeWithCallback = {
-				...newNode,
-				data: { ...newNode.data, onConfigOpen: props.openConfigSidebar }
-			};
-			flowNodes = [...flowNodes, nodeWithCallback];
-
-			// Sync to store
-			syncFlowToStore();
-
-			await tick();
-
-			const storeValue = getWorkflowStore();
-			if (storeValue) {
-				workflowActions.pushHistory('Add node', storeValue);
-			}
-		} else {
-			logger.warn('Failed to create node from drop data');
-		}
-
-		machine.send('DROP_COMPLETE');
-	}
-
-	/**
-	 * Handle a workflow JSON file dropped directly onto the canvas.
-	 *
-	 * Validates the JSON against the minimum required Workflow fields and, if valid,
-	 * loads it into the workflow store. Shows a toast on validation failure or read error.
-	 */
-	function handleWorkflowFileDrop(file: File): void {
-		const reader = new FileReader();
-		reader.onload = (event) => {
-			try {
-				const text = event.target?.result;
-				if (typeof text !== 'string') {
-					throw new Error('Could not read file contents.');
-				}
-				const data = JSON.parse(text);
-				const validation = validateWorkflowData(data);
-				if (!validation.valid) {
-					apiToasts.error('Import workflow', validation.error ?? 'Invalid workflow JSON');
-					logger.warn('Workflow file drop validation failed:', validation.error);
-					return;
-				}
-				workflowActions.initialize(data as Workflow);
-			} catch (error) {
-				const errorObj = error instanceof Error ? error : new Error('Unknown error occurred');
-				logger.error('Workflow file drop import failed:', errorObj);
-				apiToasts.error('Import workflow', errorObj.message);
-			}
-		};
-		reader.onerror = () => {
-			const message = 'Failed to read the dropped file.';
-			logger.error(message);
-			apiToasts.error('Import workflow', message);
-		};
-		reader.readAsText(file);
-	}
-
-	/**
-	 * Node ID that needs edge refresh - used to trigger EdgeRefresher component
-	 */
-	let nodeIdToRefresh = $state<string | null>(null);
-
-	/**
-	 * Update a node's data in the local editor state.
-	 * Called by App.svelte AFTER it has already updated the global store via
-	 * workflowActions.updateNode(). We only need to update flowNodes for
-	 * immediate visual feedback — no store sync needed.
-	 *
-	 * @param nodeId - The ID of the node to update
-	 * @param dataUpdates - Partial data updates to merge into the node's data
-	 */
-	export function updateNodeData(
-		nodeId: string,
-		dataUpdates: Partial<WorkflowNodeType['data']>
-	): void {
-		machine.send('START_NODE_UPDATE');
-
-		flowNodes = flowNodes.map((node) => {
-			if (node.id === nodeId) {
-				return {
-					...node,
-					data: {
-						...node.data,
-						...dataUpdates
-					}
-				};
-			}
-			return node;
-		});
-
-		machine.send('UPDATE_COMPLETE');
-	}
-
-	/**
-	 * Force edge position recalculation after node config changes
-	 * This should be called after saving gateway/switch node configs where branches are reordered
-	 * Svelte Flow doesn't automatically recalculate edge paths when handle positions change
-	 * @param nodeId - The ID of the node whose handles have changed position
-	 */
-	export async function refreshEdgePositions(nodeId: string): Promise<void> {
-		// Wait for DOM to update with new handle positions
-		await tick();
-
-		// Trigger the EdgeRefresher component to call updateNodeInternals
-		nodeIdToRefresh = nodeId;
-	}
-
-	/**
-	 * Callback when edge refresh is complete
-	 */
-	function handleEdgeRefreshComplete(): void {
-		nodeIdToRefresh = null;
-	}
-
-	/**
-	 * Handle keyboard shortcuts for undo/redo
-	 *
-	 * - Ctrl+Z (or Cmd+Z on Mac): Undo
-	 * - Ctrl+Shift+Z (or Cmd+Shift+Z): Redo
-	 * - Ctrl+Y (or Cmd+Y): Redo (Windows convention)
-	 */
-	function handleKeydown(event: KeyboardEvent): void {
-		// Check for Ctrl (Windows/Linux) or Cmd (Mac)
-		const isModifierPressed = event.ctrlKey || event.metaKey;
-
-		if (!isModifierPressed) {
-			return;
-		}
-
-		// Don't handle shortcuts if user is typing in an input, textarea, or contenteditable
-		const target = event.target as HTMLElement;
-		const isInputElement =
-			target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
-
-		if (isInputElement) {
-			return;
-		}
-
-		// Undo: Ctrl+Z (without Shift)
-		if (event.key === 'z' && !event.shiftKey) {
-			event.preventDefault();
-			historyActions.undo();
-			return;
-		}
-
-		// Redo: Ctrl+Shift+Z or Ctrl+Y
-		if ((event.key === 'z' && event.shiftKey) || event.key === 'y') {
-			event.preventDefault();
-			historyActions.redo();
-			return;
-		}
-	}
+  import {
+    SvelteFlow,
+    ConnectionLineType,
+    Controls,
+    Background,
+    BackgroundVariant,
+    MiniMap,
+    SvelteFlowProvider,
+    type ColorMode,
+  } from "@xyflow/svelte";
+  import "@xyflow/svelte/dist/style.css";
+  import {
+    getResolvedTheme,
+    getEditorSettings,
+    getBehaviorSettings,
+  } from "../stores/settingsStore.svelte.js";
+  import type {
+    WorkflowNode as WorkflowNodeType,
+    NodeMetadata,
+    Workflow,
+    WorkflowEdge,
+  } from "../types/index.js";
+  import CanvasBanner from "./CanvasBanner.svelte";
+  import FlowDropZone from "./FlowDropZone.svelte";
+  import EdgeRefresher from "./EdgeRefresher.svelte";
+  import { tick, untrack } from "svelte";
+  import type { EndpointConfig } from "../config/endpoints.js";
+  import ConnectionLine from "./ConnectionLine.svelte";
+  import FlowDropEdge from "./FlowDropEdge.svelte";
+  import {
+    getWorkflowStore,
+    workflowActions,
+  } from "../stores/workflowStore.svelte.js";
+  import {
+    historyActions,
+    setOnRestoreCallback,
+  } from "../stores/historyStore.svelte.js";
+  import UniversalNode from "./UniversalNode.svelte";
+  import {
+    EdgeStylingHelper,
+    NodeOperationsHelper,
+    WorkflowOperationsHelper,
+    ConfigurationHelper,
+  } from "../helpers/workflowEditorHelper.js";
+  import type { NodeExecutionInfo } from "../types/index.js";
+  import { Toaster } from "svelte-5-french-toast";
+  import {
+    flowdropToastOptions,
+    FLOWDROP_TOASTER_CLASS,
+    apiToasts,
+  } from "../services/toastService.js";
+  import {
+    ProximityConnectHelper,
+    type ProximityEdgeCandidate,
+  } from "../helpers/proximityConnect.js";
+  import PortCoordinateTracker from "./PortCoordinateTracker.svelte";
+  import { getPortCoordinateSnapshot } from "../stores/portCoordinateStore.svelte.js";
+  import { logger } from "../utils/logger.js";
+  import { validateWorkflowData } from "../utils/validation.js";
+  import { createEditorStateMachine } from "../stores/editorStateMachine.svelte.js";
+
+  interface Props {
+    nodes?: NodeMetadata[];
+    endpointConfig?: EndpointConfig;
+    height?: string | number;
+    width?: string | number;
+    isConfigSidebarOpen?: boolean;
+    selectedNodeForConfig?: WorkflowNodeType | null;
+    openConfigSidebar?: (node: WorkflowNodeType) => void;
+    closeConfigSidebar?: () => void;
+    // New configuration options for pipeline status mode
+    lockWorkflow?: boolean;
+    readOnly?: boolean;
+    nodeStatuses?: Record<
+      string,
+      "pending" | "running" | "completed" | "error"
+    >;
+    // Pipeline ID for fetching node execution info from jobs
+    pipelineId?: string;
+  }
+
+  let props: Props = $props();
+
+  // ---------------------------------------------------------------------------
+  // Editor State Machine
+  // Centralizes reactive guards — replaces scattered boolean flags
+  // (isDraggingNode, lastEditorStoreValue identity checks, etc.)
+  // ---------------------------------------------------------------------------
+  const machine = createEditorStateMachine();
+
+  // Dev-mode transition logging
+  if (import.meta.env?.DEV) {
+    machine.onTransition((from, event, to) => {
+      logger.debug(`[EditorFSM] ${from} --${event}--> ${to}`);
+    });
+  }
+
+  // Proximity connect state
+  let currentProximityCandidates = $state<ProximityEdgeCandidate[]>([]);
+
+  // Port coordinate tracker state
+  let portCoordNodeToUpdate = $state<WorkflowNodeType | null>(null);
+  let portCoordRebuildTrigger = $state(0);
+
+  // ---------------------------------------------------------------------------
+  // Flow state — bound to SvelteFlow via bind:nodes / bind:edges
+  // These are $state.raw to prevent deep proxy leaking (SvelteFlow mutates
+  // node internals during drag which would cause infinite loops with $state).
+  // ---------------------------------------------------------------------------
+  let flowNodes = $state.raw<WorkflowNodeType[]>([]);
+  let flowEdges = $state.raw<WorkflowEdge[]>([]);
+
+  // Execution info loading state
+  let loadExecutionInfoTimeout: number | null = null;
+  let executionInfoAbortController: AbortController | null = null;
+
+  /**
+   * Key for SvelteFlow component — changes when workflow ID changes.
+   * Forces SvelteFlow to remount with fresh state, allowing fitView to work correctly.
+   */
+  let svelteFlowKey = $derived(getWorkflowStore()?.id ?? "default");
+
+  /**
+   * Derive snap grid configuration from editor settings
+   */
+  let snapGrid = $derived(
+    getEditorSettings().snapToGrid
+      ? ([getEditorSettings().gridSize, getEditorSettings().gridSize] as [
+          number,
+          number,
+        ])
+      : undefined,
+  );
+
+  /**
+   * Derive initial viewport configuration from editor settings
+   */
+  let initialViewport = $derived({
+    zoom: getEditorSettings().defaultZoom,
+    x: 0,
+    y: 0,
+  });
+
+  // ---------------------------------------------------------------------------
+  // Helper: derive flowNodes/flowEdges from a Workflow object
+  // ---------------------------------------------------------------------------
+  function buildFlowNodesFromStore(workflow: Workflow): {
+    nodes: WorkflowNodeType[];
+    edges: WorkflowEdge[];
+  } {
+    const nodesWithCallbacks = workflow.nodes.map((node) => ({
+      ...node,
+      data: {
+        ...node.data,
+        onConfigOpen: props.openConfigSidebar,
+      },
+    }));
+    const styledEdges = EdgeStylingHelper.updateEdgeStyles(
+      workflow.edges,
+      nodesWithCallbacks,
+    );
+    return { nodes: nodesWithCallbacks, edges: styledEdges };
+  }
+
+  // ---------------------------------------------------------------------------
+  // Helper: sync current flowNodes/flowEdges back to the global store
+  // ---------------------------------------------------------------------------
+  function syncFlowToStore(): void {
+    const storeValue = untrack(() => getWorkflowStore());
+    if (!storeValue) return;
+    const updatedWorkflow = WorkflowOperationsHelper.updateWorkflow(
+      storeValue,
+      flowNodes,
+      flowEdges,
+    );
+    workflowActions.updateWorkflow(updatedWorkflow);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Single sync effect: workflowStore → flowNodes / flowEdges
+  // Replaces the old Effect A (store→currentWorkflow) + Effect B (currentWorkflow→flow).
+  // Suppressed during operations via state machine; handlers update flowNodes directly.
+  // ---------------------------------------------------------------------------
+  let previousSyncedWorkflowId: string | null = null;
+
+  $effect(() => {
+    const storeValue = getWorkflowStore();
+
+    // Suppressed during operations — handlers write to flowNodes directly
+    if (untrack(() => machine.permissions.suppressEffect)) return;
+
+    if (!storeValue) {
+      if (flowNodes.length > 0 || flowEdges.length > 0) {
+        flowNodes = [];
+        flowEdges = [];
+        previousSyncedWorkflowId = null;
+        untrack(() => machine.send("WORKFLOW_CLEARED"));
+      }
+      return;
+    }
+
+    const isNewWorkflow = storeValue.id !== previousSyncedWorkflowId;
+
+    if (isNewWorkflow) {
+      untrack(() =>
+        machine.send(
+          previousSyncedWorkflowId ? "WORKFLOW_SWITCHED" : "WORKFLOW_LOADED",
+        ),
+      );
+    }
+
+    // Derive flowNodes/flowEdges from store
+    const derived = buildFlowNodesFromStore(storeValue);
+    flowNodes = derived.nodes;
+    flowEdges = derived.edges;
+    previousSyncedWorkflowId = storeValue.id;
+
+    // Trigger port coordinate rebuild after workflow load
+    if (getEditorSettings().proximityConnect) {
+      portCoordRebuildTrigger = Date.now();
+    }
+
+    if (isNewWorkflow) {
+      untrack(() => machine.send("LOAD_COMPLETE"));
+    }
+  });
+
+  // ---------------------------------------------------------------------------
+  // Execution info effect (separate — async, depends on workflow + pipeline ID)
+  // ---------------------------------------------------------------------------
+  let previousExecWorkflowId: string | null = null;
+  let previousExecPipelineId: string | undefined = undefined;
+
+  $effect(() => {
+    const storeValue = getWorkflowStore();
+    const pipelineId = props.pipelineId;
+
+    if (!storeValue || !pipelineId) return;
+
+    const workflowChanged = storeValue.id !== previousExecWorkflowId;
+    const pipelineChanged = pipelineId !== previousExecPipelineId;
+
+    if (!workflowChanged && !pipelineChanged) return;
+
+    previousExecWorkflowId = storeValue.id;
+    previousExecPipelineId = pipelineId;
+
+    // Cancel any pending timeout / in-flight request
+    if (loadExecutionInfoTimeout) {
+      clearTimeout(loadExecutionInfoTimeout);
+      loadExecutionInfoTimeout = null;
+    }
+    if (executionInfoAbortController) {
+      executionInfoAbortController.abort();
+      executionInfoAbortController = null;
+    }
+
+    // Schedule loading with requestIdleCallback (falls back to setTimeout)
+    if (typeof requestIdleCallback !== "undefined") {
+      loadExecutionInfoTimeout = requestIdleCallback(
+        () => {
+          loadNodeExecutionInfo();
+        },
+        { timeout: 500 },
+      ) as unknown as number;
+    } else {
+      loadExecutionInfoTimeout = setTimeout(() => {
+        loadNodeExecutionInfo();
+      }, 300) as unknown as number;
+    }
+  });
+
+  // ---------------------------------------------------------------------------
+  // History restore callback
+  // ---------------------------------------------------------------------------
+  $effect(() => {
+    setOnRestoreCallback((restoredWorkflow: Workflow) => {
+      machine.send("START_RESTORE");
+      // Update the store (effect is suppressed during 'restoring')
+      workflowActions.restoreFromHistory(restoredWorkflow);
+      // Derive flowNodes/flowEdges directly for immediate visual update
+      const derived = buildFlowNodesFromStore(restoredWorkflow);
+      flowNodes = derived.nodes;
+      flowEdges = derived.edges;
+      machine.send("RESTORE_COMPLETE");
+      // After RESTORE_COMPLETE → idle, the sync effect runs but produces
+      // the same data (no-op re-derive).
+    });
+
+    return () => {
+      setOnRestoreCallback(null);
+    };
+  });
+
+  /**
+   * Load node execution information for all nodes in the workflow
+   */
+  async function loadNodeExecutionInfo(): Promise<void> {
+    const workflow = untrack(() => getWorkflowStore());
+    if (!workflow?.nodes || !props.pipelineId) return;
+
+    try {
+      executionInfoAbortController = new AbortController();
+
+      const executionInfo = await NodeOperationsHelper.loadNodeExecutionInfo(
+        workflow,
+        props.pipelineId,
+      );
+
+      if (executionInfoAbortController?.signal.aborted) return;
+
+      const defaultExecutionInfo: NodeExecutionInfo = {
+        status: "idle" as const,
+        executionCount: 0,
+        isExecuting: false,
+      };
+
+      // Update flowNodes with execution info (visual-only, no store sync needed)
+      flowNodes = flowNodes.map((node) => ({
+        ...node,
+        data: {
+          ...node.data,
+          executionInfo: executionInfo[node.id] || defaultExecutionInfo,
+        },
+      }));
+
+      executionInfoAbortController = null;
+    } catch (error) {
+      if (error instanceof Error && error.name !== "AbortError") {
+        logger.error("Failed to load node execution info:", error);
+      }
+    }
+  }
+
+  // The global store should be initialized by the parent App component
+
+  // Sidebar is now always visible - removed toggle functionality
+
+  // Node types for Svelte Flow - using UniversalNode for all node types
+  // All nodes use 'universalNode' type, and UniversalNode handles internal switching
+  const nodeTypes = {
+    universalNode: UniversalNode,
+  };
+
+  // Use custom edge that shortens the path so the stroke ends at the arrow base
+  const edgeTypes = {
+    default: FlowDropEdge,
+  };
+
+  // Handle arrows in our custom connection handler
+  const defaultEdgeOptions = {};
+
+  /**
+   * Handle node drag start
+   *
+   * Transitions the state machine to 'dragging', which suppresses
+   * the sync effect to prevent reactive loops during high-frequency
+   * position updates. SvelteFlow mutates flowNodes directly via bind:nodes.
+   */
+  function handleNodeDragStart(): void {
+    machine.send("START_DRAG");
+    // Clear any leftover proximity previews
+    currentProximityCandidates = [];
+  }
+
+  /**
+   * Handle node drag - compute proximity connect preview edges
+   * Called continuously during drag if proximity connect is enabled.
+   * Uses port-to-port distance via the port coordinate store.
+   */
+  function handleNodeDrag({
+    targetNode,
+  }: {
+    targetNode: WorkflowNodeType | null;
+    nodes: WorkflowNodeType[];
+    event: MouseEvent | TouchEvent;
+  }): void {
+    if (
+      !getEditorSettings().proximityConnect ||
+      !targetNode ||
+      props.readOnly ||
+      props.lockWorkflow
+    ) {
+      if (currentProximityCandidates.length > 0) {
+        flowEdges = ProximityConnectHelper.removePreviewEdges(flowEdges);
+        currentProximityCandidates = [];
+      }
+      portCoordNodeToUpdate = null;
+      return;
+    }
+
+    // Update the dragged node's port coordinates (position changed during drag)
+    portCoordNodeToUpdate = targetNode;
+
+    // Remove previous preview edges
+    const baseEdges = ProximityConnectHelper.removePreviewEdges(flowEdges);
+
+    // Find the best compatible edge using port-to-port distance
+    const portCoordinates = getPortCoordinateSnapshot();
+    const candidates =
+      portCoordinates.size > 0
+        ? ProximityConnectHelper.findCompatibleEdgesByPortCoordinates(
+            targetNode.id,
+            portCoordinates,
+            baseEdges,
+            getEditorSettings().proximityConnectDistance,
+          )
+        : ProximityConnectHelper.findCompatibleEdges(
+            targetNode,
+            flowNodes,
+            baseEdges,
+            getEditorSettings().proximityConnectDistance,
+          );
+
+    // Create preview edges
+    const previews = ProximityConnectHelper.createPreviewEdges(candidates);
+
+    // Update state
+    currentProximityCandidates = candidates;
+    flowEdges = [...baseEdges, ...previews];
+  }
+
+  /**
+   * Handle node drag stop
+   *
+   * Still in 'dragging' state — sync effect suppressed.
+   * Syncs final positions to store, pushes history, then transitions to idle.
+   */
+  function handleNodeDragStop(): void {
+    portCoordNodeToUpdate = null;
+
+    // Finalize proximity connect if there are candidates
+    if (
+      getEditorSettings().proximityConnect &&
+      currentProximityCandidates.length > 0
+    ) {
+      const baseEdges = ProximityConnectHelper.removePreviewEdges(flowEdges);
+      const permanentEdges = ProximityConnectHelper.createPermanentEdges(
+        currentProximityCandidates,
+      );
+
+      for (const edge of permanentEdges) {
+        const sourceNode = flowNodes.find((n) => n.id === edge.source);
+        const targetNode = flowNodes.find((n) => n.id === edge.target);
+        if (sourceNode && targetNode) {
+          EdgeStylingHelper.applyConnectionStyling(
+            edge,
+            sourceNode,
+            targetNode,
+          );
+        }
+      }
+
+      flowEdges = [...baseEdges, ...permanentEdges];
+      currentProximityCandidates = [];
+    }
+
+    // Sync flowNodes/flowEdges → store
+    syncFlowToStore();
+
+    // Push history AFTER the drag completed
+    const storeValue = getWorkflowStore();
+    if (storeValue) {
+      workflowActions.pushHistory("Move node", storeValue);
+    }
+
+    // Transition to idle — sync effect is now unblocked
+    machine.send("STOP_DRAG");
+  }
+
+  /**
+   * Handle new connections between nodes
+   */
+  async function handleConnect(connection: {
+    source: string;
+    target: string;
+    sourceHandle?: string;
+    targetHandle?: string;
+  }): Promise<void> {
+    machine.send("START_CONNECT");
+
+    // SvelteFlow auto-creates the edge via bind:edges — wait for DOM update
+    await tick();
+
+    // Apply styling to all edges (including the new one)
+    flowEdges = EdgeStylingHelper.updateEdgeStyles(flowEdges, flowNodes);
+
+    // Sync to store
+    syncFlowToStore();
+
+    const storeValue = getWorkflowStore();
+    if (storeValue) {
+      workflowActions.pushHistory("Add connection", storeValue);
+    }
+
+    machine.send("CONNECTION_MADE");
+  }
+
+  /**
+   * Handle before delete - show confirmation dialog if enabled in settings
+   *
+   * This callback is called before nodes/edges are deleted.
+   * Return true to proceed with deletion, false to cancel.
+   *
+   * @param params - Object containing nodes and edges to be deleted
+   * @returns Promise resolving to true if deletion should proceed, false to cancel
+   */
+  async function handleBeforeDelete(params: {
+    nodes: WorkflowNodeType[];
+    edges: WorkflowEdge[];
+  }): Promise<boolean> {
+    // If confirmDelete setting is enabled, show confirmation dialog
+    if (getBehaviorSettings().confirmDelete) {
+      const nodeCount = params.nodes.length;
+      const edgeCount = params.edges.length;
+
+      // Build a descriptive message
+      let message = "Are you sure you want to delete ";
+      const parts: string[] = [];
+
+      if (nodeCount > 0) {
+        parts.push(`${nodeCount} node${nodeCount > 1 ? "s" : ""}`);
+      }
+      if (edgeCount > 0) {
+        parts.push(`${edgeCount} connection${edgeCount > 1 ? "s" : ""}`);
+      }
+
+      message += parts.join(" and ") + "?";
+
+      // Show native confirmation dialog
+      const confirmed = window.confirm(message);
+      if (!confirmed) {
+        return false;
+      }
+    }
+
+    // Don't push to history here - we'll push AFTER deletion in handleNodesDelete
+    // This ensures undo will restore the state before deletion
+    return true;
+  }
+
+  /**
+   * Handle node deletion - automatically remove connected edges and push to history
+   */
+  function handleNodesDelete(params: {
+    nodes: WorkflowNodeType[];
+    edges: WorkflowEdge[];
+  }): void {
+    machine.send("START_DELETE");
+
+    const deletedNodeIds = new Set(params.nodes.map((node) => node.id));
+
+    // Filter out edges connected to deleted nodes
+    flowEdges = flowEdges.filter(
+      (edge) =>
+        !deletedNodeIds.has(edge.source) && !deletedNodeIds.has(edge.target),
+    );
+
+    // Sync to store
+    syncFlowToStore();
+
+    // Push to history AFTER the deletion so undo restores the previous state
+    const nodeCount = params.nodes.length;
+    const edgeCount = params.edges.length;
+    let description = "Delete";
+    if (nodeCount > 0 && edgeCount > 0) {
+      description = `Delete ${nodeCount} node${nodeCount > 1 ? "s" : ""} and ${edgeCount} connection${edgeCount > 1 ? "s" : ""}`;
+    } else if (nodeCount > 0) {
+      description = `Delete ${nodeCount} node${nodeCount > 1 ? "s" : ""}`;
+    } else if (edgeCount > 0) {
+      description = `Delete ${edgeCount} connection${edgeCount > 1 ? "s" : ""}`;
+    }
+    const storeValue = getWorkflowStore();
+    if (storeValue) {
+      workflowActions.pushHistory(description, storeValue);
+    }
+
+    machine.send("DELETE_COMPLETE");
+  }
+
+  // Edge styling will be handled when edges are first created or manually updated
+
+  // Configure endpoints when props change
+  $effect(() => {
+    if (props.endpointConfig) {
+      ConfigurationHelper.configureEndpoints(props.endpointConfig);
+    }
+  });
+
+  /**
+   * Check if workflow has cycles
+   */
+  function checkWorkflowCycles(): boolean {
+    return WorkflowOperationsHelper.checkWorkflowCycles(flowNodes, flowEdges);
+  }
+
+  /**
+   * Handle drop event and add new node to canvas
+   */
+  async function handleNodeDrop(
+    nodeTypeData: string,
+    position: { x: number; y: number },
+  ): Promise<void> {
+    machine.send("START_DROP");
+
+    const newNode = NodeOperationsHelper.createNodeFromDrop(
+      nodeTypeData,
+      position,
+      flowNodes,
+    );
+
+    if (newNode) {
+      // Add onConfigOpen callback and append to flowNodes for immediate visual feedback
+      const nodeWithCallback = {
+        ...newNode,
+        data: { ...newNode.data, onConfigOpen: props.openConfigSidebar },
+      };
+      flowNodes = [...flowNodes, nodeWithCallback];
+
+      // Sync to store
+      syncFlowToStore();
+
+      await tick();
+
+      const storeValue = getWorkflowStore();
+      if (storeValue) {
+        workflowActions.pushHistory("Add node", storeValue);
+      }
+    } else {
+      logger.warn("Failed to create node from drop data");
+    }
+
+    machine.send("DROP_COMPLETE");
+  }
+
+  /**
+   * Handle a workflow JSON file dropped directly onto the canvas.
+   *
+   * Validates the JSON against the minimum required Workflow fields and, if valid,
+   * loads it into the workflow store. Shows a toast on validation failure or read error.
+   */
+  function handleWorkflowFileDrop(file: File): void {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      try {
+        const text = event.target?.result;
+        if (typeof text !== "string") {
+          throw new Error("Could not read file contents.");
+        }
+        const data = JSON.parse(text);
+        const validation = validateWorkflowData(data);
+        if (!validation.valid) {
+          apiToasts.error(
+            "Import workflow",
+            validation.error ?? "Invalid workflow JSON",
+          );
+          logger.warn(
+            "Workflow file drop validation failed:",
+            validation.error,
+          );
+          return;
+        }
+        workflowActions.initialize(data as Workflow);
+      } catch (error) {
+        const errorObj =
+          error instanceof Error ? error : new Error("Unknown error occurred");
+        logger.error("Workflow file drop import failed:", errorObj);
+        apiToasts.error("Import workflow", errorObj.message);
+      }
+    };
+    reader.onerror = () => {
+      const message = "Failed to read the dropped file.";
+      logger.error(message);
+      apiToasts.error("Import workflow", message);
+    };
+    reader.readAsText(file);
+  }
+
+  /**
+   * Node ID that needs edge refresh - used to trigger EdgeRefresher component
+   */
+  let nodeIdToRefresh = $state<string | null>(null);
+
+  /**
+   * Update a node's data in the local editor state.
+   * Called by App.svelte AFTER it has already updated the global store via
+   * workflowActions.updateNode(). We only need to update flowNodes for
+   * immediate visual feedback — no store sync needed.
+   *
+   * @param nodeId - The ID of the node to update
+   * @param dataUpdates - Partial data updates to merge into the node's data
+   */
+  export function updateNodeData(
+    nodeId: string,
+    dataUpdates: Partial<WorkflowNodeType["data"]>,
+  ): void {
+    machine.send("START_NODE_UPDATE");
+
+    flowNodes = flowNodes.map((node) => {
+      if (node.id === nodeId) {
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            ...dataUpdates,
+          },
+        };
+      }
+      return node;
+    });
+
+    machine.send("UPDATE_COMPLETE");
+  }
+
+  /**
+   * Force edge position recalculation after node config changes
+   * This should be called after saving gateway/switch node configs where branches are reordered
+   * Svelte Flow doesn't automatically recalculate edge paths when handle positions change
+   * @param nodeId - The ID of the node whose handles have changed position
+   */
+  export async function refreshEdgePositions(nodeId: string): Promise<void> {
+    // Wait for DOM to update with new handle positions
+    await tick();
+
+    // Trigger the EdgeRefresher component to call updateNodeInternals
+    nodeIdToRefresh = nodeId;
+  }
+
+  /**
+   * Callback when edge refresh is complete
+   */
+  function handleEdgeRefreshComplete(): void {
+    nodeIdToRefresh = null;
+  }
+
+  /**
+   * Handle keyboard shortcuts for undo/redo
+   *
+   * - Ctrl+Z (or Cmd+Z on Mac): Undo
+   * - Ctrl+Shift+Z (or Cmd+Shift+Z): Redo
+   * - Ctrl+Y (or Cmd+Y): Redo (Windows convention)
+   */
+  function handleKeydown(event: KeyboardEvent): void {
+    // Check for Ctrl (Windows/Linux) or Cmd (Mac)
+    const isModifierPressed = event.ctrlKey || event.metaKey;
+
+    if (!isModifierPressed) {
+      return;
+    }
+
+    // Don't handle shortcuts if user is typing in an input, textarea, or contenteditable
+    const target = event.target as HTMLElement;
+    const isInputElement =
+      target.tagName === "INPUT" ||
+      target.tagName === "TEXTAREA" ||
+      target.isContentEditable;
+
+    if (isInputElement) {
+      return;
+    }
+
+    // Undo: Ctrl+Z (without Shift)
+    if (event.key === "z" && !event.shiftKey) {
+      event.preventDefault();
+      historyActions.undo();
+      return;
+    }
+
+    // Redo: Ctrl+Shift+Z or Ctrl+Y
+    if ((event.key === "z" && event.shiftKey) || event.key === "y") {
+      event.preventDefault();
+      historyActions.redo();
+      return;
+    }
+  }
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
 <SvelteFlowProvider>
-	<!-- EdgeRefresher component - handles updateNodeInternals calls -->
-	<EdgeRefresher {nodeIdToRefresh} onRefreshComplete={handleEdgeRefreshComplete} />
-
-	<!-- Port Coordinate Tracker - maintains port positions for proximity connect -->
-	<PortCoordinateTracker
-		nodeToUpdate={portCoordNodeToUpdate}
-		rebuildTrigger={portCoordRebuildTrigger}
-		nodes={flowNodes}
-	/>
-
-	<div class="flowdrop-workflow-editor">
-		<!-- Main Editor Area -->
-		<div class="flowdrop-workflow-editor__main">
-			<!-- Flow Canvas -->
-			<div class="flowdrop-canvas">
-				<FlowDropZone ondrop={handleNodeDrop} onfiledrop={handleWorkflowFileDrop}>
-					{#key svelteFlowKey}
-						<SvelteFlow
-							bind:nodes={flowNodes}
-							bind:edges={flowEdges}
-							{nodeTypes}
-							{edgeTypes}
-							{defaultEdgeOptions}
-							onconnect={(connection) =>
-								void handleConnect({
-									source: connection.source,
-									target: connection.target,
-									sourceHandle: connection.sourceHandle ?? undefined,
-									targetHandle: connection.targetHandle ?? undefined
-								})}
-							onbeforedelete={handleBeforeDelete}
-							ondelete={handleNodesDelete}
-							onnodedragstart={handleNodeDragStart}
-							onnodedrag={handleNodeDrag}
-							onnodedragstop={handleNodeDragStop}
-							minZoom={0.2}
-							maxZoom={3}
-							clickConnect={true}
-							elevateEdgesOnSelect={true}
-							connectionLineType={ConnectionLineType.Bezier}
-							connectionLineComponent={ConnectionLine}
-							{snapGrid}
-							{initialViewport}
-							colorMode={getResolvedTheme() as ColorMode}
-							fitView={getEditorSettings().fitViewOnLoad}
-						>
-							<Controls />
-							<!-- Always render Background for consistent bg color in dark/light mode -->
-							<Background
-								gap={getEditorSettings().gridSize}
-								bgColor="var(--fd-background)"
-								variant={BackgroundVariant.Dots}
-								patternColor={getEditorSettings().showGrid ? undefined : 'transparent'}
-							/>
-							{#if getEditorSettings().showMinimap}
-								<MiniMap />
-							{/if}
-						</SvelteFlow>
-					{/key}
-					<!-- Drop Zone Indicator -->
-					{#if flowNodes.length === 0}
-						<CanvasBanner
-							title="Drag components here to start building"
-							description="Use the sidebar to add components to your workflow"
-							iconName="mdi:graph"
-						/>
-					{/if}
-				</FlowDropZone>
-			</div>
-
-			<!-- Status Bar: aria-live announces dynamic changes (node/edge counts, cycle warnings) -->
-			<div class="flowdrop-status-bar" aria-live="polite" aria-atomic="true">
-				<div class="flowdrop-status-bar__content">
-					<div class="flowdrop-flex flowdrop-gap--4">
-						<span class="flowdrop-text--xs flowdrop-text--gray">{flowNodes.length} nodes</span>
-						<span class="flowdrop-text--xs flowdrop-text--gray">•</span>
-						<span class="flowdrop-text--xs flowdrop-text--gray">{flowEdges.length} connections</span
-						>
-
-						{#if checkWorkflowCycles()}
-							<span class="flowdrop-text--xs flowdrop-text--gray">•</span>
-							<span class="flowdrop-text--xs flowdrop-font--medium flowdrop-text--error"
-								>⚠️ Cycles detected</span
-							>
-						{/if}
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <!-- EdgeRefresher component - handles updateNodeInternals calls -->
+  <EdgeRefresher
+    {nodeIdToRefresh}
+    onRefreshComplete={handleEdgeRefreshComplete}
+  />
+
+  <!-- Port Coordinate Tracker - maintains port positions for proximity connect -->
+  <PortCoordinateTracker
+    nodeToUpdate={portCoordNodeToUpdate}
+    rebuildTrigger={portCoordRebuildTrigger}
+    nodes={flowNodes}
+  />
+
+  <div class="flowdrop-workflow-editor">
+    <!-- Main Editor Area -->
+    <div class="flowdrop-workflow-editor__main">
+      <!-- Flow Canvas -->
+      <div class="flowdrop-canvas">
+        <FlowDropZone
+          ondrop={handleNodeDrop}
+          onfiledrop={handleWorkflowFileDrop}
+        >
+          {#key svelteFlowKey}
+            <SvelteFlow
+              bind:nodes={flowNodes}
+              bind:edges={flowEdges}
+              {nodeTypes}
+              {edgeTypes}
+              {defaultEdgeOptions}
+              onconnect={(connection) =>
+                void handleConnect({
+                  source: connection.source,
+                  target: connection.target,
+                  sourceHandle: connection.sourceHandle ?? undefined,
+                  targetHandle: connection.targetHandle ?? undefined,
+                })}
+              onbeforedelete={handleBeforeDelete}
+              ondelete={handleNodesDelete}
+              onnodedragstart={handleNodeDragStart}
+              onnodedrag={handleNodeDrag}
+              onnodedragstop={handleNodeDragStop}
+              minZoom={0.2}
+              maxZoom={3}
+              clickConnect={true}
+              elevateEdgesOnSelect={true}
+              connectionLineType={ConnectionLineType.Bezier}
+              connectionLineComponent={ConnectionLine}
+              {snapGrid}
+              {initialViewport}
+              colorMode={getResolvedTheme() as ColorMode}
+              fitView={getEditorSettings().fitViewOnLoad}
+            >
+              <Controls />
+              <!-- Always render Background for consistent bg color in dark/light mode -->
+              <Background
+                gap={getEditorSettings().gridSize}
+                bgColor="var(--fd-background)"
+                variant={BackgroundVariant.Dots}
+                patternColor={getEditorSettings().showGrid
+                  ? undefined
+                  : "transparent"}
+              />
+              {#if getEditorSettings().showMinimap}
+                <MiniMap />
+              {/if}
+            </SvelteFlow>
+          {/key}
+          <!-- Drop Zone Indicator -->
+          {#if flowNodes.length === 0}
+            <CanvasBanner
+              title="Drag components here to start building"
+              description="Use the sidebar to add components to your workflow"
+              iconName="mdi:graph"
+            />
+          {/if}
+        </FlowDropZone>
+      </div>
+
+      <!-- Status Bar: aria-live announces dynamic changes (node/edge counts, cycle warnings) -->
+      <div class="flowdrop-status-bar" aria-live="polite" aria-atomic="true">
+        <div class="flowdrop-status-bar__content">
+          <div class="flowdrop-flex flowdrop-gap--4">
+            <span class="flowdrop-text--xs flowdrop-text--gray"
+              >{flowNodes.length} nodes</span
+            >
+            <span class="flowdrop-text--xs flowdrop-text--gray">•</span>
+            <span class="flowdrop-text--xs flowdrop-text--gray"
+              >{flowEdges.length} connections</span
+            >
+
+            {#if checkWorkflowCycles()}
+              <span class="flowdrop-text--xs flowdrop-text--gray">•</span>
+              <span
+                class="flowdrop-text--xs flowdrop-font--medium flowdrop-text--error"
+                >⚠️ Cycles detected</span
+              >
+            {/if}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </SvelteFlowProvider>
 
 <!-- Toast notifications container -->
 <!-- aria-live="polite" ensures screen readers announce toast messages without interrupting -->
 <div aria-live="polite" aria-atomic="true">
-	<Toaster
-		position="bottom-center"
-		containerClassName={FLOWDROP_TOASTER_CLASS}
-		toastOptions={flowdropToastOptions}
-	/>
+  <Toaster
+    position="bottom-center"
+    containerClassName={FLOWDROP_TOASTER_CLASS}
+    toastOptions={flowdropToastOptions}
+  />
 </div>
 
 <style>
-	.flowdrop-workflow-editor {
-		display: flex;
-		flex-direction: row; /* Side by side layout */
-		height: 100%;
-		position: relative;
-	}
-
-	.flowdrop-workflow-editor__main {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-		transition: margin-left 0.3s ease-in-out;
-	}
-
-	.flowdrop-text--error {
-		color: var(--fd-error);
-	}
-
-	.flowdrop-canvas {
-		flex: 1;
-		min-height: 0;
-		position: relative;
-		background: transparent;
-	}
-
-	.flowdrop-status-bar {
-		background-color: var(--fd-backdrop);
-		backdrop-filter: var(--fd-backdrop-blur);
-		border-top: 1px solid var(--fd-border);
-		padding: 0.75rem;
-		height: 40px;
-		min-height: 40px;
-		max-height: 40px;
-		display: flex;
-		align-items: center;
-		flex-shrink: 0;
-	}
-
-	.flowdrop-status-bar__content {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	:global(.flowdrop-workflow-editor .svelte-flow__node:hover) {
-		transform: translateY(-2px);
-	}
-
-	:global(.flowdrop-workflow-editor .svelte-flow__edge) {
-		stroke-width: 2 !important;
-		cursor: pointer;
-		pointer-events: all;
-	}
-
-	:global(.flowdrop-workflow-editor .svelte-flow__edge path) {
-		stroke-width: 2 !important;
-	}
-
-	:global(.flowdrop-workflow-editor .svelte-flow__edge:hover) {
-		stroke: var(--fd-primary) !important;
-		stroke-width: 3 !important;
-	}
-
-	:global(.flowdrop-workflow-editor .svelte-flow__edge:hover path) {
-		stroke-width: 3 !important;
-	}
-
-	:global(.flowdrop-workflow-editor .svelte-flow__edge.selected) {
-		stroke: var(--fd-primary) !important;
-		stroke-width: 3 !important;
-		filter: drop-shadow(0 0 4px color-mix(in srgb, var(--fd-primary) 50%, transparent));
-	}
-
-	:global(.flowdrop-workflow-editor .svelte-flow__edge.selected path) {
-		stroke-width: 3 !important;
-	}
-
-	/* Ensure edge paths are clickable */
-	:global(.flowdrop-workflow-editor .svelte-flow__edge path) {
-		pointer-events: all;
-		cursor: pointer;
-	}
-
-	/* Handle size/position only; colors come from inline --fd-handle-fill and base.css ::before */
-	:global(.flowdrop-workflow-editor .svelte-flow__handle) {
-		width: var(--fd-handle-size);
-		height: var(--fd-handle-size);
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-		z-index: 20;
-	}
-
-	/* Ensure our custom handles are clickable */
-	:global(.flowdrop-workflow-editor .svelte-flow__handle) {
-		pointer-events: all;
-		cursor: crosshair;
-		background-color: var(--fd-handle-fill);
-		border-color: var(--fd-handle-border-color);
-	}
-
-	/**
+  .flowdrop-workflow-editor {
+    display: flex;
+    flex-direction: row; /* Side by side layout */
+    height: 100%;
+    position: relative;
+  }
+
+  .flowdrop-workflow-editor__main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    transition: margin-left 0.3s ease-in-out;
+  }
+
+  .flowdrop-text--error {
+    color: var(--fd-error);
+  }
+
+  .flowdrop-canvas {
+    flex: 1;
+    min-height: 0;
+    position: relative;
+    background: transparent;
+  }
+
+  .flowdrop-status-bar {
+    background-color: var(--fd-backdrop);
+    backdrop-filter: var(--fd-backdrop-blur);
+    border-top: 1px solid var(--fd-border);
+    padding: 0.75rem;
+    height: 40px;
+    min-height: 40px;
+    max-height: 40px;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .flowdrop-status-bar__content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  :global(.flowdrop-workflow-editor .svelte-flow__node:hover) {
+    transform: translateY(-2px);
+  }
+
+  :global(.flowdrop-workflow-editor .svelte-flow__edge) {
+    stroke-width: 2 !important;
+    cursor: pointer;
+    pointer-events: all;
+  }
+
+  :global(.flowdrop-workflow-editor .svelte-flow__edge path) {
+    stroke-width: 2 !important;
+  }
+
+  :global(.flowdrop-workflow-editor .svelte-flow__edge:hover) {
+    stroke: var(--fd-primary) !important;
+    stroke-width: 3 !important;
+  }
+
+  :global(.flowdrop-workflow-editor .svelte-flow__edge:hover path) {
+    stroke-width: 3 !important;
+  }
+
+  :global(.flowdrop-workflow-editor .svelte-flow__edge.selected) {
+    stroke: var(--fd-primary) !important;
+    stroke-width: 3 !important;
+    filter: drop-shadow(
+      0 0 4px color-mix(in srgb, var(--fd-primary) 50%, transparent)
+    );
+  }
+
+  :global(.flowdrop-workflow-editor .svelte-flow__edge.selected path) {
+    stroke-width: 3 !important;
+  }
+
+  /* Ensure edge paths are clickable */
+  :global(.flowdrop-workflow-editor .svelte-flow__edge path) {
+    pointer-events: all;
+    cursor: pointer;
+  }
+
+  /* Handle size/position only; colors come from inline --fd-handle-fill and base.css ::before */
+  :global(.flowdrop-workflow-editor .svelte-flow__handle) {
+    width: var(--fd-handle-size);
+    height: var(--fd-handle-size);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    z-index: 20;
+  }
+
+  /* Ensure our custom handles are clickable */
+  :global(.flowdrop-workflow-editor .svelte-flow__handle) {
+    pointer-events: all;
+    cursor: crosshair;
+    background-color: var(--fd-handle-fill);
+    border-color: var(--fd-handle-border-color);
+  }
+
+  /**
 	 * Edge Styling Based on Source Port Data Type
 	 * Uses CSS tokens from base.css for consistent theming
 	 * - Trigger edges: solid dark line (control flow)
@@ -955,88 +1010,88 @@
 	 * - Data edges: normal gray line (data flow)
 	 */
 
-	/* Trigger Edge: Solid dark line for control flow */
-	:global(.flowdrop--edge--trigger path.svelte-flow__edge-path) {
-		stroke: var(--fd-edge-trigger);
-		stroke-width: var(--fd-edge-trigger-width);
-	}
-
-	:global(.flowdrop--edge--trigger:hover path.svelte-flow__edge-path) {
-		stroke: var(--fd-edge-trigger-hover);
-		stroke-width: var(--fd-edge-trigger-width-hover);
-	}
-
-	:global(.flowdrop--edge--trigger.selected path.svelte-flow__edge-path) {
-		stroke: var(--fd-edge-trigger-selected);
-		stroke-width: var(--fd-edge-trigger-width-hover);
-	}
-
-	/* Tool Edge: Dashed amber line for tool connections */
-	:global(.flowdrop--edge--tool path.svelte-flow__edge-path) {
-		stroke: var(--fd-edge-tool);
-		stroke-dasharray: 5 3;
-	}
-
-	:global(.flowdrop--edge--tool:hover path.svelte-flow__edge-path) {
-		stroke: var(--fd-edge-tool-hover);
-		stroke-width: 2;
-	}
-
-	:global(.flowdrop--edge--tool.selected path.svelte-flow__edge-path) {
-		stroke: var(--fd-edge-tool-selected);
-		stroke-dasharray: 5 3;
-		stroke-width: 2;
-	}
-
-	/* Data Edge: Normal gray line for data flow (default) */
-	:global(.flowdrop--edge--data path.svelte-flow__edge-path) {
-		stroke: var(--fd-edge-data);
-	}
-
-	:global(.flowdrop--edge--data:hover path.svelte-flow__edge-path) {
-		stroke: var(--fd-edge-data-hover);
-		stroke-width: 2;
-	}
-
-	:global(.flowdrop--edge--data.selected path.svelte-flow__edge-path) {
-		stroke: var(--fd-edge-data-selected);
-		stroke-width: 2;
-	}
-
-	/* Loopback Edge: Dashed gray line for loop iteration connections */
-	:global(.flowdrop--edge--loopback path.svelte-flow__edge-path) {
-		stroke: var(--fd-edge-loopback);
-		stroke-width: var(--fd-edge-loopback-width);
-		stroke-dasharray: var(--fd-edge-loopback-dasharray);
-		opacity: var(--fd-edge-loopback-opacity);
-	}
-
-	:global(.flowdrop--edge--loopback:hover path.svelte-flow__edge-path) {
-		stroke: var(--fd-edge-loopback-hover);
-		stroke-width: var(--fd-edge-loopback-width-hover);
-		opacity: 1;
-	}
-
-	:global(.flowdrop--edge--loopback.selected path.svelte-flow__edge-path) {
-		stroke: var(--fd-edge-loopback-selected);
-		stroke-width: var(--fd-edge-loopback-width-hover);
-		stroke-dasharray: var(--fd-edge-loopback-dasharray);
-		filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.4));
-		opacity: 1;
-	}
-
-	/* Proximity Connect Preview Edge: animated dashed line */
-	:global(.flowdrop--edge--proximity-preview path.svelte-flow__edge-path) {
-		stroke: var(--fd-primary);
-		stroke-width: 2;
-		stroke-dasharray: 5 5;
-		opacity: 0.6;
-		animation: flowdrop-proximity-dash 0.5s linear infinite;
-	}
-
-	@keyframes flowdrop-proximity-dash {
-		to {
-			stroke-dashoffset: -10;
-		}
-	}
+  /* Trigger Edge: Solid dark line for control flow */
+  :global(.flowdrop--edge--trigger path.svelte-flow__edge-path) {
+    stroke: var(--fd-edge-trigger);
+    stroke-width: var(--fd-edge-trigger-width);
+  }
+
+  :global(.flowdrop--edge--trigger:hover path.svelte-flow__edge-path) {
+    stroke: var(--fd-edge-trigger-hover);
+    stroke-width: var(--fd-edge-trigger-width-hover);
+  }
+
+  :global(.flowdrop--edge--trigger.selected path.svelte-flow__edge-path) {
+    stroke: var(--fd-edge-trigger-selected);
+    stroke-width: var(--fd-edge-trigger-width-hover);
+  }
+
+  /* Tool Edge: Dashed amber line for tool connections */
+  :global(.flowdrop--edge--tool path.svelte-flow__edge-path) {
+    stroke: var(--fd-edge-tool);
+    stroke-dasharray: 5 3;
+  }
+
+  :global(.flowdrop--edge--tool:hover path.svelte-flow__edge-path) {
+    stroke: var(--fd-edge-tool-hover);
+    stroke-width: 2;
+  }
+
+  :global(.flowdrop--edge--tool.selected path.svelte-flow__edge-path) {
+    stroke: var(--fd-edge-tool-selected);
+    stroke-dasharray: 5 3;
+    stroke-width: 2;
+  }
+
+  /* Data Edge: Normal gray line for data flow (default) */
+  :global(.flowdrop--edge--data path.svelte-flow__edge-path) {
+    stroke: var(--fd-edge-data);
+  }
+
+  :global(.flowdrop--edge--data:hover path.svelte-flow__edge-path) {
+    stroke: var(--fd-edge-data-hover);
+    stroke-width: 2;
+  }
+
+  :global(.flowdrop--edge--data.selected path.svelte-flow__edge-path) {
+    stroke: var(--fd-edge-data-selected);
+    stroke-width: 2;
+  }
+
+  /* Loopback Edge: Dashed gray line for loop iteration connections */
+  :global(.flowdrop--edge--loopback path.svelte-flow__edge-path) {
+    stroke: var(--fd-edge-loopback);
+    stroke-width: var(--fd-edge-loopback-width);
+    stroke-dasharray: var(--fd-edge-loopback-dasharray);
+    opacity: var(--fd-edge-loopback-opacity);
+  }
+
+  :global(.flowdrop--edge--loopback:hover path.svelte-flow__edge-path) {
+    stroke: var(--fd-edge-loopback-hover);
+    stroke-width: var(--fd-edge-loopback-width-hover);
+    opacity: 1;
+  }
+
+  :global(.flowdrop--edge--loopback.selected path.svelte-flow__edge-path) {
+    stroke: var(--fd-edge-loopback-selected);
+    stroke-width: var(--fd-edge-loopback-width-hover);
+    stroke-dasharray: var(--fd-edge-loopback-dasharray);
+    filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.4));
+    opacity: 1;
+  }
+
+  /* Proximity Connect Preview Edge: animated dashed line */
+  :global(.flowdrop--edge--proximity-preview path.svelte-flow__edge-path) {
+    stroke: var(--fd-primary);
+    stroke-width: 2;
+    stroke-dasharray: 5 5;
+    opacity: 0.6;
+    animation: flowdrop-proximity-dash 0.5s linear infinite;
+  }
+
+  @keyframes flowdrop-proximity-dash {
+    to {
+      stroke-dashoffset: -10;
+    }
+  }
 </style>