Enhances workflow editor with connection handling and improves PRD documentation

Adds connection creation functionality to the workflow editor, enabling users to link nodes in the visual DAG builder through drag-and-drop interactions.

Implements branch strategy selection and enhanced webhook configuration options in the node config modal, providing more granular control over workflow behavior.

Updates extensive PRD documentation across multiple components including queue health monitoring, error tracking integration, GitHub Actions workflows, and performance optimization features to reflect current project state and implementation details.

Modifies issue PRD generation script to completely replace issue bodies with PRD content rather than appending, improving documentation consistency and reducing clutter while preserving original content in generated files.

Author: ralyodio

apps/web/src/lib/components/NodeConfigModal.svelte

@@ -37,6 +37,7 @@
 		branch: {
 			fields: [
 				{ name: 'branches', label: 'Number of Branches', type: 'number', required: true, placeholder: '2', min: 2, max: 10 },
+				{ name: 'strategy', label: 'Branch Strategy', type: 'select', required: true, options: ['parallel', 'sequential'] },
 				{ name: 'description', label: 'Description', type: 'text', placeholder: 'Branch description (e.g., "Broadcast to Discord and Slack")' }
 			]
 		},
@@ -48,7 +49,10 @@
 		},
 		webhook: {
 			fields: [
-				{ name: 'path', label: 'Webhook Path', type: 'text', required: true, placeholder: '/hooks/my-workflow' },
+				{ name: 'url', label: 'Webhook URL', type: 'text', required: true, placeholder: 'https://api.example.com/webhook' },
+				{ name: 'method', label: 'HTTP Method', type: 'select', required: true, options: ['POST', 'PUT', 'PATCH'] },
+				{ name: 'headers', label: 'Headers (JSON)', type: 'textarea', placeholder: '{"Content-Type": "application/json", "Authorization": "Bearer {{token}}"}' },
+				{ name: 'bodyTemplate', label: 'Body Template', type: 'textarea', required: true, placeholder: '{\n  "title": "{{title}}",\n  "content": "{{content}}",\n  "timestamp": "{{timestamp}}"\n}', rows: 8 },
 				{ name: 'description', label: 'Description', type: 'text', placeholder: 'Webhook description' }
 			]
 		},
@@ -133,7 +137,7 @@
 							bind:value={config[field.name]}
 							placeholder={field.placeholder || ''}
 							required={field.required}
-							rows="4"
+							rows={field.rows || 4}
 						></textarea>
 					{:else if field.type === 'select'}
 						<select id={field.name} bind:value={config[field.name]} required={field.required}>

apps/web/src/lib/components/WorkflowEditor.svelte

@@ -9,6 +9,25 @@
 	let reactFlowWrapper = $state(null);
 	let selectedNodeId = $state(null);
 
+	// Handle connection creation
+	function handleConnect(connection) {
+		const newEdge = {
+			id: `edge-${connection.source}-${connection.target}-${Date.now()}`,
+			source: connection.source,
+			target: connection.target,
+			sourceHandle: connection.sourceHandle,
+			targetHandle: connection.targetHandle,
+			type: 'smoothstep',
+			animated: true
+		};
+		
+		edges = [...edges, newEdge];
+		
+		if (onEdgesChange) {
+			onEdgesChange(edges);
+		}
+	}
+
 	// Handle drag over (required to enable drop)
 	function handleDragOver(event) {
 		event.preventDefault();
@@ -83,6 +102,7 @@
 		{nodes}
 		{edges}
 		fitView
+		onconnect={handleConnect}
 		defaultEdgeOptions={{ type: 'smoothstep', animated: true }}
 	>
 		<Background gap={12} size={1} />

apps/web/src/lib/utils/template-processor.js

@@ -0,0 +1,147 @@
+/**
+ * Template processor for webhook body templates
+ * Supports {{ variable }} syntax for field mapping
+ * Uses JMESPath for complex expressions
+ */
+
+import jmespath from 'jmespath';
+
+/**
+ * Process a template string with data using {{ }} syntax
+ * @param {string} template - Template string with {{ }} placeholders
+ * @param {object} data - Data object to extract values from
+ * @returns {string} Processed template with values replaced
+ */
+export function processTemplate(template, data) {
+	if (!template || typeof template !== 'string') {
+		return template;
+	}
+
+	// Match {{ expression }} patterns
+	const regex = /\{\{([^}]+)\}\}/g;
+	
+	return template.replace(regex, (match, expression) => {
+		const trimmedExpr = expression.trim();
+		
+		try {
+			// Use JMESPath to evaluate the expression
+			const result = jmespath.search(data, trimmedExpr);
+			
+			// Handle different result types
+			if (result === null || result === undefined) {
+				return '';
+			}
+			
+			if (typeof result === 'object') {
+				return JSON.stringify(result);
+			}
+			
+			return String(result);
+		} catch (error) {
+			console.error(`Template processing error for expression "${trimmedExpr}":`, error);
+			return match; // Return original placeholder on error
+		}
+	});
+}
+
+/**
+ * Process a template object (like headers or body JSON)
+ * @param {object|string} template - Template object or string
+ * @param {object} data - Data object to extract values from
+ * @returns {object|string} Processed template with values replaced
+ */
+export function processTemplateObject(template, data) {
+	if (typeof template === 'string') {
+		try {
+			// Try to parse as JSON first
+			const parsed = JSON.parse(template);
+			return processTemplateObject(parsed, data);
+		} catch {
+			// If not JSON, process as string template
+			return processTemplate(template, data);
+		}
+	}
+	
+	if (Array.isArray(template)) {
+		return template.map(item => processTemplateObject(item, data));
+	}
+	
+	if (template && typeof template === 'object') {
+		const result = {};
+		for (const [key, value] of Object.entries(template)) {
+			const processedKey = processTemplate(key, data);
+			result[processedKey] = processTemplateObject(value, data);
+		}
+		return result;
+	}
+	
+	return template;
+}
+
+/**
+ * Validate a template string for syntax errors
+ * @param {string} template - Template string to validate
+ * @returns {object} Validation result with { valid: boolean, errors: string[] }
+ */
+export function validateTemplate(template) {
+	const errors = [];
+	
+	if (!template || typeof template !== 'string') {
+		return { valid: true, errors: [] };
+	}
+	
+	// Check for unmatched braces
+	const openBraces = (template.match(/\{\{/g) || []).length;
+	const closeBraces = (template.match(/\}\}/g) || []).length;
+	
+	if (openBraces !== closeBraces) {
+		errors.push('Unmatched template braces {{ }}');
+	}
+	
+	// Extract all expressions and validate them
+	const regex = /\{\{([^}]+)\}\}/g;
+	let match;
+	
+	while ((match = regex.exec(template)) !== null) {
+		const expression = match[1].trim();
+		
+		if (!expression) {
+			errors.push('Empty template expression found');
+			continue;
+		}
+		
+		// Basic JMESPath syntax validation
+		// We'll validate by attempting to search with empty data
+		try {
+			jmespath.search({}, expression);
+		} catch (error) {
+			errors.push(`Invalid JMESPath expression "${expression}": ${error.message}`);
+		}
+	}
+	
+	return {
+		valid: errors.length === 0,
+		errors
+	};
+}
+
+/**
+ * Extract all template variables from a template string
+ * @param {string} template - Template string
+ * @returns {string[]} Array of variable expressions found
+ */
+export function extractTemplateVariables(template) {
+	if (!template || typeof template !== 'string') {
+		return [];
+	}
+	
+	const variables = [];
+	const regex = /\{\{([^}]+)\}\}/g;
+	let match;
+	
+	while ((match = regex.exec(template)) !== null) {
+		variables.push(match[1].trim());
+	}
+	
+	return variables;
+}