feat: add feedback edges

src/lib/components/CustomEdge.svelte

@@ -2,12 +2,16 @@
 	import { BaseEdge, type EdgeProps, EdgeReconnectAnchor, getBezierPath } from '@xyflow/svelte';
 	import { getContext } from 'svelte';
 
+	import type { IREdge } from '../types.js';
+
 	type EdgeValidationStatus = {
 		hasError: boolean;
 		hasWarning: boolean;
 		isDead: boolean;
 	};
 
+	type EdgeById = () => Map<string, IREdge>;
+
 	let { id, sourceX, sourceY, targetX, targetY, selected }: EdgeProps = $props();
 
 	const getEdgeValidationById =
@@ -20,14 +24,21 @@
 	const hasWarning = $derived(!hasError && !!validationStatus?.hasWarning);
 	const isDead = $derived(!!validationStatus?.isDead);
 
+	// Delay edges represent feedback connections: previous-frame input from a Hydra output
+	const getEdgeById = getContext<EdgeById>('edgeById')!;
+	const edge = $derived(getEdgeById().get(id) ?? null);
+	const isDelayEdge = $derived(!!edge && (edge.delayFrames ?? 0) > 0);
+
 	const edgeStyle = $derived(
 		hasError
 			? 'stroke: #ef4444; stroke-width: 2px;'
 			: hasWarning
 				? 'stroke: #f59e0b; stroke-width: 2px;'
 				: isDead
 					? 'stroke: #9ca3af; stroke-width: 1.5px; stroke-dasharray: 6 4; opacity: 0.5;'
-					: undefined
+					: isDelayEdge
+						? 'stroke: #6366f1; stroke-width: 1.5px; stroke-dasharray: 4 3;'
+						: undefined
 	);
 
 	const [edgePath] = $derived(

src/lib/components/FlowEditor.svelte

@@ -106,6 +106,7 @@
 	setContext('nodeDefinitions', () => nodeDefinitions);
 	setContext('validationByNodeId', () => validationByNodeId());
 	setContext('edgeValidationById', () => edgeValidationById());
+	setContext('edgeById', () => new Map(edges.map((e: IREdge) => [e.id, e])));
 
 	let lastIssueKeys = new Set<string>();
 
@@ -265,6 +266,92 @@
 				!deletedNodeIds.has(edge.target)
 		);
 	};
+
+	function wouldCreateCycle(
+		adjacency: Map<string, string[]>,
+		source: string,
+		target: string
+	): boolean {
+		const goal = source;
+		const stack = [target];
+		/* eslint-disable-next-line svelte/prefer-svelte-reactivity */
+		const visited = new Set<string>();
+
+		while (stack.length > 0) {
+			const current = stack.pop()!;
+			if (current === goal) return true;
+			if (visited.has(current)) continue;
+			visited.add(current);
+
+			const neighbours = adjacency.get(current) ?? [];
+			for (const n of neighbours) {
+				if (!visited.has(n)) {
+					stack.push(n);
+				}
+			}
+		}
+
+		return false;
+	}
+
+	$effect(() => {
+		// Recompute delay flags from scratch whenever edges change.
+		// Algorithm: build a DAG by marking cycle-closing edges as delay edges.
+		// Existing delay edges are ignored when detecting cycles, so cycles that already
+		// pass through a delay edge are treated as intentional feedback.
+		// Note: Order-dependent - the last edge in insertion order that closes a cycle
+		// becomes the delay edge.
+
+		if (edges.length === 0) return;
+
+		/* eslint-disable-next-line svelte/prefer-svelte-reactivity */
+		const adjacency = new Map<string, string[]>();
+		const desiredDelayFlags: number[] = [];
+
+		for (const edge of edges) {
+			// Delay edges are ignored here: they break cycles but don't participate in forward traversal
+			if (edge.delayFrames && edge.delayFrames > 0) {
+				desiredDelayFlags.push(1);
+				continue;
+			}
+
+			const makesCycle = wouldCreateCycle(adjacency, edge.source, edge.target);
+
+			if (makesCycle) {
+				// Mark this edge as delay to break the cycle
+				desiredDelayFlags.push(1);
+			} else {
+				desiredDelayFlags.push(0);
+				const list = adjacency.get(edge.source) ?? [];
+				list.push(edge.target);
+				adjacency.set(edge.source, list);
+			}
+		}
+
+		// Check if anything actually changed; if not, bail to avoid infinite reactive loops
+		let anyChanged = false;
+		for (let i = 0; i < edges.length; i++) {
+			const current = edges[i].delayFrames ?? 0;
+			if (current !== desiredDelayFlags[i]) {
+				anyChanged = true;
+				break;
+			}
+		}
+		if (!anyChanged) return;
+
+		// Apply the new delay flags immutably so Svelte change detection still works
+		edges = edges.map((edge: IREdge, i: number) => {
+			const flag = desiredDelayFlags[i];
+			if (flag === 0) {
+				// Strip stale delayFrames if present
+				if (!edge.delayFrames) return edge;
+				/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+				const { delayFrames, ...rest } = edge;
+				return rest as IREdge;
+			}
+			return { ...edge, delayFrames: 1 };
+		});
+	});
 </script>
 
 <div class="flow-editor">