@d34dman/flowdrop 0.0.33 → 0.0.35

package/dist/components/WorkflowEditor.svelte

@@ -620,4 +620,26 @@
 		stroke: var(--flowdrop-edge-data-color-selected);
 		stroke-width: 2;
 	}
+
+	/* Loopback Edge: Dashed gray line for loop iteration connections */
+	:global(.flowdrop--edge--loopback path.svelte-flow__edge-path) {
+		stroke: var(--flowdrop-edge-loopback-color);
+		stroke-width: var(--flowdrop-edge-loopback-width);
+		stroke-dasharray: var(--flowdrop-edge-loopback-dasharray);
+		opacity: var(--flowdrop-edge-loopback-opacity);
+	}
+
+	:global(.flowdrop--edge--loopback:hover path.svelte-flow__edge-path) {
+		stroke: var(--flowdrop-edge-loopback-color-hover);
+		stroke-width: var(--flowdrop-edge-loopback-width-hover);
+		opacity: 1;
+	}
+
+	:global(.flowdrop--edge--loopback.selected path.svelte-flow__edge-path) {
+		stroke: var(--flowdrop-edge-loopback-color-selected);
+		stroke-width: var(--flowdrop-edge-loopback-width-hover);
+		stroke-dasharray: var(--flowdrop-edge-loopback-dasharray);
+		filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.4));
+		opacity: 1;
+	}
 </style>

package/dist/components/playground/ChatPanel.svelte

@@ -240,11 +240,6 @@
 					onkeydown={handleKeydown}
 					oninput={handleInput}
 				></textarea>
-
-				<!-- Attachment button placeholder -->
-				<button type="button" class="chat-panel__attachment-btn" title="Attach file" disabled>
-					<Icon icon="mdi:image-outline" />
-				</button>
 			</div>
 
 			{#if $sessionStatus === 'running' || $isExecuting}
@@ -277,12 +272,14 @@
 		display: flex;
 		flex-direction: column;
 		height: 100%;
+		min-height: 0; /* Critical: allows flexbox to shrink properly */
 		background-color: #ffffff;
 	}
 
-	/* Messages Container */
+	/* Messages Container - Scrollable area that takes remaining space */
 	.chat-panel__messages {
 		flex: 1;
+		min-height: 0; /* Critical: allows overflow to work in flex container */
 		overflow-y: auto;
 		padding: 1.5rem;
 		scroll-behavior: smooth;
@@ -380,10 +377,12 @@
 		color: #6b7280;
 	}
 
-	/* Input Area */
+	/* Input Area - Always stays at bottom, never shrinks */
 	.chat-panel__input-area {
+		flex-shrink: 0;
 		padding: 1rem 1.5rem 1.5rem;
 		background-color: #ffffff;
+		border-top: 1px solid #f3f4f6;
 	}
 
 	.chat-panel__input-container {
@@ -434,31 +433,6 @@
 		opacity: 0.6;
 	}
 
-	.chat-panel__attachment-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 2rem;
-		height: 2rem;
-		border: none;
-		border-radius: 0.375rem;
-		background: transparent;
-		color: #9ca3af;
-		cursor: pointer;
-		transition: all 0.15s ease;
-		flex-shrink: 0;
-	}
-
-	.chat-panel__attachment-btn:hover:not(:disabled) {
-		color: #6b7280;
-		background-color: #f3f4f6;
-	}
-
-	.chat-panel__attachment-btn:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
 	.chat-panel__send-btn {
 		display: flex;
 		align-items: center;

package/dist/components/playground/Playground.svelte

@@ -533,6 +533,7 @@
 		display: flex;
 		flex-direction: column;
 		height: 100%;
+		overflow: hidden; /* Prevent playground-level scrolling */
 		background-color: #f8fafc;
 		font-family:
 			-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -744,6 +745,8 @@
 		display: flex;
 		flex-direction: column;
 		min-width: 0;
+		min-height: 0; /* Allow proper flex shrinking */
+		overflow: hidden; /* Prevent scrolling - ChatPanel handles it */
 		background-color: #ffffff;
 	}
 

package/dist/core/index.d.ts

@@ -14,7 +14,7 @@
  * import { getStatusColor, createDefaultExecutionInfo } from "@d34dman/flowdrop/core";
  * ```
  */
-export type { NodeCategory, NodeDataType, NodePort, DynamicPort, Branch, NodeMetadata, NodeExtensions, NodeUIExtensions, ConfigValues, WorkflowNode, WorkflowEdge, Workflow, ApiResponse, NodesResponse, WorkflowResponse, WorkflowsResponse, ExecutionStatus, ExecutionResult, FlowDropConfig, WorkflowEvents, BuiltinNodeType, PortConfig, PortCompatibilityRule, ConfigSchema, ConfigProperty, HttpMethod, DynamicSchemaEndpoint, ExternalEditLink, ConfigEditOptions } from '../types/index.js';
+export type { NodeCategory, NodeDataType, NodePort, DynamicPort, Branch, NodeMetadata, NodeExtensions, NodeUIExtensions, ConfigValues, WorkflowNode, WorkflowEdge, Workflow, ApiResponse, NodesResponse, WorkflowResponse, WorkflowsResponse, ExecutionStatus, ExecutionResult, FlowDropConfig, WorkflowEvents, BuiltinNodeType, PortConfig, PortCompatibilityRule, ConfigSchema, ConfigProperty, HttpMethod, DynamicSchemaEndpoint, ExternalEditLink, ConfigEditOptions, EdgeCategory } from '../types/index.js';
 export type { WorkflowEditorConfig, EditorFeatures, UIConfig, APIConfig, ExecutionConfig, StorageConfig } from '../types/config.js';
 export type { AuthProvider, StaticAuthConfig, CallbackAuthConfig } from '../types/auth.js';
 export type { WorkflowChangeType, FlowDropEventHandlers, FlowDropFeatures } from '../types/events.js';
@@ -35,6 +35,7 @@ export * from '../utils/colors.js';
 export * from '../utils/icons.js';
 export * from '../utils/config.js';
 export * from '../utils/nodeTypes.js';
+export { isLoopbackEdge, isValidLoopbackCycle, hasCycles, hasInvalidCycles } from '../utils/connections.js';
 export { isFieldOptionArray, normalizeOptions } from '../components/form/types.js';
 export { DEFAULT_PORT_CONFIG } from '../config/defaultPortConfig.js';
 export { defaultEndpointConfig, createEndpointConfig } from '../config/endpoints.js';

package/dist/core/index.js

@@ -38,6 +38,8 @@ export * from '../utils/icons.js';
 export * from '../utils/config.js';
 // Node type utilities
 export * from '../utils/nodeTypes.js';
+// Connection utilities (including loopback edge detection)
+export { isLoopbackEdge, isValidLoopbackCycle, hasCycles, hasInvalidCycles } from '../utils/connections.js';
 // Form type utilities
 export { isFieldOptionArray, normalizeOptions } from '../components/form/types.js';
 // ============================================================================

package/dist/helpers/workflowEditorHelper.d.ts

@@ -14,9 +14,10 @@ export declare function generateNodeId(nodeTypeId: string, existingNodes: Workfl
  * Edge category type for styling purposes
  * - trigger: For control flow connections (dataType: "trigger")
  * - tool: Dashed amber line for tool connections (dataType: "tool")
+ * - loopback: Dashed gray line for loop iteration connections (targets loop_back port)
  * - data: Normal gray line for all other data connections
  */
-export type EdgeCategory = 'trigger' | 'tool' | 'data';
+export type EdgeCategory = 'trigger' | 'tool' | 'loopback' | 'data';
 /**
  * Edge styling configuration based on source port data type
  */
@@ -49,12 +50,25 @@ export declare class EdgeStylingHelper {
     static getPortDataType(node: WorkflowNodeType, portId: string, portType: 'input' | 'output'): string | null;
     /**
      * Determine the edge category based on source port data type
+     * Note: This method does not check for loopback edges.
+     * Use getEdgeCategoryWithLoopback() for full edge categorization.
+     *
      * @param sourcePortDataType - The data type of the source output port
      * @returns The edge category for styling
      */
     static getEdgeCategory(sourcePortDataType: string | null): EdgeCategory;
     /**
-     * Apply custom styling to connection edges based on source port data type:
+     * Determine the full edge category including loopback detection
+     * Loopback edges take precedence over source port data type
+     *
+     * @param edge - The edge to categorize
+     * @param sourcePortDataType - The data type of the source output port
+     * @returns The edge category for styling
+     */
+    static getEdgeCategoryWithLoopback(edge: WorkflowEdge, sourcePortDataType: string | null): EdgeCategory;
+    /**
+     * Apply custom styling to connection edges based on edge type:
+     * - Loopback: Dashed gray line for loop iteration (targets loop_back port)
      * - Trigger ports: Solid black line with arrow
      * - Tool ports: Dashed amber line with arrow
      * - Data ports: Normal gray line with arrow
@@ -118,9 +132,24 @@ export declare class WorkflowOperationsHelper {
      */
     static exportWorkflow(workflow: Workflow | null): void;
     /**
-     * Check if workflow has cycles
+     * Check if workflow has invalid cycles (excludes valid loopback cycles)
+     * Valid loopback cycles are used for ForEach node iteration and should not
+     * trigger a warning.
+     *
+     * @param nodes - Array of workflow nodes
+     * @param edges - Array of workflow edges
+     * @returns True if there are invalid (non-loopback) cycles
      */
     static checkWorkflowCycles(nodes: WorkflowNodeType[], edges: WorkflowEdge[]): boolean;
+    /**
+     * Check if workflow has any cycles (including valid loopback cycles)
+     * Use this when you need to detect ALL cycles regardless of type.
+     *
+     * @param nodes - Array of workflow nodes
+     * @param edges - Array of workflow edges
+     * @returns True if any cycle exists
+     */
+    static checkWorkflowHasAnyCycles(nodes: WorkflowNodeType[], edges: WorkflowEdge[]): boolean;
 }
 /**
  * Configuration helper

package/dist/helpers/workflowEditorHelper.js

@@ -3,7 +3,7 @@
  * Contains business logic for workflow operations
  */
 import { MarkerType } from '@xyflow/svelte';
-import { hasCycles } from '../utils/connections.js';
+import { hasCycles, hasInvalidCycles, isLoopbackEdge } from '../utils/connections.js';
 import { workflowApi, nodeApi, setEndpointConfig } from '../services/api.js';
 import { v4 as uuidv4 } from 'uuid';
 import { workflowActions } from '../stores/workflowStore.js';
@@ -104,6 +104,9 @@ export class EdgeStylingHelper {
     }
     /**
      * Determine the edge category based on source port data type
+     * Note: This method does not check for loopback edges.
+     * Use getEdgeCategoryWithLoopback() for full edge categorization.
+     *
      * @param sourcePortDataType - The data type of the source output port
      * @returns The edge category for styling
      */
@@ -118,7 +121,25 @@ export class EdgeStylingHelper {
         return 'data';
     }
     /**
-     * Apply custom styling to connection edges based on source port data type:
+     * Determine the full edge category including loopback detection
+     * Loopback edges take precedence over source port data type
+     *
+     * @param edge - The edge to categorize
+     * @param sourcePortDataType - The data type of the source output port
+     * @returns The edge category for styling
+     */
+    static getEdgeCategoryWithLoopback(edge, sourcePortDataType) {
+        // Loopback edges are identified by their target handle
+        // Check this first as it takes precedence
+        if (isLoopbackEdge(edge)) {
+            return 'loopback';
+        }
+        // Fall back to source port data type categorization
+        return this.getEdgeCategory(sourcePortDataType);
+    }
+    /**
+     * Apply custom styling to connection edges based on edge type:
+     * - Loopback: Dashed gray line for loop iteration (targets loop_back port)
      * - Trigger ports: Solid black line with arrow
      * - Tool ports: Dashed amber line with arrow
      * - Data ports: Normal gray line with arrow
@@ -130,17 +151,30 @@ export class EdgeStylingHelper {
         const sourcePortDataType = sourcePortId
             ? this.getPortDataType(sourceNode, sourcePortId, 'output')
             : null;
-        // Determine edge category based on source port data type
-        const edgeCategory = this.getEdgeCategory(sourcePortDataType);
+        // Determine edge category (loopback takes precedence)
+        const edgeCategory = this.getEdgeCategoryWithLoopback(edge, sourcePortDataType);
         // Edge color constants (matching CSS tokens in base.css)
         const EDGE_COLORS = {
             trigger: '#111827', // --color-ref-gray-900
             tool: '#f59e0b', // --color-ref-amber-500
+            loopback: '#6b7280', // --color-ref-gray-500
             data: '#9ca3af' // --color-ref-gray-400
         };
         // Apply styling based on edge category
         // CSS classes handle styling via tokens; inline styles are fallback
         switch (edgeCategory) {
+            case 'loopback':
+                // Loopback edges: dashed gray line for loop iteration
+                edge.style =
+                    'stroke: var(--flowdrop-edge-loopback-color); stroke-dasharray: 5 5; stroke-width: var(--flowdrop-edge-loopback-width);';
+                edge.class = 'flowdrop--edge--loopback';
+                edge.markerEnd = {
+                    type: MarkerType.ArrowClosed,
+                    width: 14,
+                    height: 14,
+                    color: EDGE_COLORS.loopback
+                };
+                break;
             case 'trigger':
                 // Trigger edges: solid dark line for control flow
                 edge.style =
@@ -183,7 +217,7 @@ export class EdgeStylingHelper {
             metadata: {
                 ...(edge.data?.metadata || {}),
                 edgeType: edgeCategory,
-                sourcePortDataType: sourcePortDataType || undefined
+                sourcePortDataType: sourcePortDataType ?? undefined
             },
             targetNodeType: targetNode.type,
             targetCategory: targetNode.data.metadata.category
@@ -484,9 +518,26 @@ export class WorkflowOperationsHelper {
         URL.revokeObjectURL(url);
     }
     /**
-     * Check if workflow has cycles
+     * Check if workflow has invalid cycles (excludes valid loopback cycles)
+     * Valid loopback cycles are used for ForEach node iteration and should not
+     * trigger a warning.
+     *
+     * @param nodes - Array of workflow nodes
+     * @param edges - Array of workflow edges
+     * @returns True if there are invalid (non-loopback) cycles
      */
     static checkWorkflowCycles(nodes, edges) {
+        return hasInvalidCycles(nodes, edges);
+    }
+    /**
+     * Check if workflow has any cycles (including valid loopback cycles)
+     * Use this when you need to detect ALL cycles regardless of type.
+     *
+     * @param nodes - Array of workflow nodes
+     * @param edges - Array of workflow edges
+     * @returns True if any cycle exists
+     */
+    static checkWorkflowHasAnyCycles(nodes, edges) {
         return hasCycles(nodes, edges);
     }
 }

package/dist/stores/playgroundStore.d.ts

@@ -117,18 +117,21 @@ export declare const playgroundActions: {
     removeSession: (sessionId: string) => void;
     /**
      * Set messages for the current session
+     * Messages are automatically sorted chronologically
      *
      * @param messageList - Array of messages
      */
     setMessages: (messageList: PlaygroundMessage[]) => void;
     /**
      * Add a message to the current session
+     * Messages are automatically sorted chronologically after adding
      *
      * @param message - The message to add
      */
     addMessage: (message: PlaygroundMessage) => void;
     /**
      * Add multiple messages to the current session
+     * Messages are deduplicated and automatically sorted chronologically
      *
      * @param newMessages - Array of messages to add
      */

package/dist/stores/playgroundStore.js

@@ -138,6 +138,40 @@ export const hasChatInput = derived(inputFields, ($fields) => $fields.some((fiel
  */
 export const sessionCount = derived(sessions, ($sessions) => $sessions.length);
 // =========================================================================
+// Helper Functions
+// =========================================================================
+/**
+ * Sort messages chronologically by sequenceNumber
+ *
+ * All messages (user, assistant, log) have incrementing sequenceNumbers (1, 2, 3, ...).
+ * This provides a simple, reliable sort order for displaying messages.
+ *
+ * Sort order:
+ * 1. Primary: sequenceNumber (incrementing for all messages)
+ * 2. Secondary: timestamp (fallback for messages without sequenceNumber)
+ * 3. Tertiary: id as final tiebreaker
+ *
+ * @param messageList - Array of messages to sort
+ * @returns Sorted array of messages
+ */
+function sortMessagesChronologically(messageList) {
+    return [...messageList].sort((a, b) => {
+        // Primary: Sort by sequenceNumber
+        const seqA = a.sequenceNumber ?? 0;
+        const seqB = b.sequenceNumber ?? 0;
+        if (seqA !== seqB) {
+            return seqA - seqB;
+        }
+        // Secondary: Sort by timestamp for messages without sequenceNumber
+        const timestampCompare = a.timestamp.localeCompare(b.timestamp);
+        if (timestampCompare !== 0) {
+            return timestampCompare;
+        }
+        // Tertiary: Sort by ID as final tiebreaker
+        return a.id.localeCompare(b.id);
+    });
+}
+// =========================================================================
 // Actions
 // =========================================================================
 /**
@@ -213,22 +247,25 @@ export const playgroundActions = {
     },
     /**
      * Set messages for the current session
+     * Messages are automatically sorted chronologically
      *
      * @param messageList - Array of messages
      */
     setMessages: (messageList) => {
-        messages.set(messageList);
+        messages.set(sortMessagesChronologically(messageList));
     },
     /**
      * Add a message to the current session
+     * Messages are automatically sorted chronologically after adding
      *
      * @param message - The message to add
      */
     addMessage: (message) => {
-        messages.update(($messages) => [...$messages, message]);
+        messages.update(($messages) => sortMessagesChronologically([...$messages, message]));
     },
     /**
      * Add multiple messages to the current session
+     * Messages are deduplicated and automatically sorted chronologically
      *
      * @param newMessages - Array of messages to add
      */
@@ -239,7 +276,8 @@ export const playgroundActions = {
             // Deduplicate by message ID
             const existingIds = new Set($messages.map((m) => m.id));
             const uniqueNewMessages = newMessages.filter((m) => !existingIds.has(m.id));
-            return [...$messages, ...uniqueNewMessages];
+            // Sort the combined messages chronologically
+            return sortMessagesChronologically([...$messages, ...uniqueNewMessages]);
         });
     },
     /**

package/dist/styles/base.css

@@ -1157,6 +1157,15 @@
 	--flowdrop-edge-data-color-hover: var(--color-ref-gray-500);
 	--flowdrop-edge-data-color-selected: var(--color-ref-violet-600);
 
+	/* Loopback edge styling tokens */
+	--flowdrop-edge-loopback-color: var(--color-ref-gray-500);
+	--flowdrop-edge-loopback-color-hover: var(--color-ref-gray-600);
+	--flowdrop-edge-loopback-color-selected: var(--color-ref-violet-600);
+	--flowdrop-edge-loopback-width: 1.5px;
+	--flowdrop-edge-loopback-width-hover: 2.5px;
+	--flowdrop-edge-loopback-dasharray: 5 5;
+	--flowdrop-edge-loopback-opacity: 0.85;
+
 	/* Tool node theming tokens */
 	--flowdrop-tool-node-color: var(--color-ref-amber-500);
 	--flowdrop-tool-node-color-light: var(--color-ref-amber-50);

package/dist/types/index.d.ts

@@ -656,13 +656,14 @@ export interface WorkflowNode extends Node {
     };
 }
 /**
- * Edge category types based on source port data type
+ * Edge category types based on source port data type or target handle
  * Used for visual styling of edges on the canvas
  * - trigger: For control flow connections (dataType: "trigger")
  * - tool: Dashed amber line for tool connections (dataType: "tool")
+ * - loopback: Dashed gray line for loop iteration (targets loop_back port)
  * - data: Normal gray line for all other data connections
  */
-export type EdgeCategory = 'trigger' | 'tool' | 'data';
+export type EdgeCategory = 'trigger' | 'tool' | 'loopback' | 'data';
 /**
  * Extended edge type for workflows
  */

package/dist/types/playground.d.ts

@@ -24,6 +24,10 @@ export type PlaygroundMessageRole = 'user' | 'assistant' | 'system' | 'log';
  * Log level for log-type messages
  */
 export type PlaygroundMessageLevel = 'info' | 'warning' | 'error' | 'debug';
+/**
+ * Status of a playground message
+ */
+export type PlaygroundMessageStatus = 'pending' | 'processing' | 'completed' | 'failed';
 /**
  * Playground session representing a test conversation
  *
@@ -104,8 +108,18 @@ export interface PlaygroundMessage {
     content: string;
     /** Message timestamp (ISO 8601) */
     timestamp: string;
-    /** Associated node ID (for log messages) */
-    nodeId?: string;
+    /** Message status */
+    status?: PlaygroundMessageStatus;
+    /**
+     * Sequence number for ordering messages
+     * - User messages: incrementing numbers (1, 2, 3, ...)
+     * - Assistant/system responses: 0 (sorted after parent via parentMessageId)
+     */
+    sequenceNumber?: number;
+    /** Parent message ID (for assistant responses linked to user messages) */
+    parentMessageId?: string;
+    /** Associated node ID (for log/assistant messages) */
+    nodeId?: string | null;
     /** Additional message metadata */
     metadata?: PlaygroundMessageMetadata;
 }

package/dist/utils/connections.d.ts

@@ -2,6 +2,29 @@
  * Connection validation utilities for FlowDrop
  */
 import type { NodeMetadata, NodePort, NodeDataType, WorkflowNode, WorkflowEdge, PortConfig, PortDataTypeConfig } from '../types/index.js';
+/**
+ * Determines if an edge is a loopback edge.
+ * Loopback edges target the special `loop_back` input port on ForEach nodes.
+ * These edges are used to trigger the next iteration in a loop construct.
+ *
+ * @param edge - The edge to check
+ * @returns True if the edge is a loopback edge
+ *
+ * @example
+ * ```typescript
+ * const edge = { targetHandle: "foreach.1-input-loop_back", ... };
+ * const isLoop = isLoopbackEdge(edge); // true
+ * ```
+ */
+export declare function isLoopbackEdge(edge: WorkflowEdge): boolean;
+/**
+ * Checks if a cycle consists entirely of loopback edges.
+ * A valid loopback cycle only contains edges that target loop_back ports.
+ *
+ * @param cycleEdges - Array of edges that form a cycle
+ * @returns True if all edges in the cycle are loopback edges
+ */
+export declare function isValidLoopbackCycle(cycleEdges: WorkflowEdge[]): boolean;
 /**
  * Configurable port compatibility checker
  */
@@ -71,8 +94,31 @@ export declare function getConnectionSuggestions(nodeId: string, nodes: Workflow
 }>;
 /**
  * Check if a workflow has any cycles (prevent infinite loops)
+ * Note: This function detects ALL cycles, including valid loopback cycles.
+ * Use `hasInvalidCycles` to check only for cycles that could cause infinite execution.
+ *
+ * @param nodes - Array of workflow nodes
+ * @param edges - Array of workflow edges
+ * @returns True if any cycle exists in the workflow
  */
 export declare function hasCycles(nodes: WorkflowNode[], edges: WorkflowEdge[]): boolean;
+/**
+ * Check if a workflow has any invalid cycles (non-loopback cycles).
+ * This excludes valid loopback cycles used for ForEach iteration.
+ * Only cycles that could cause infinite execution are detected.
+ *
+ * @param nodes - Array of workflow nodes
+ * @param edges - Array of workflow edges
+ * @returns True if any invalid (non-loopback) cycle exists
+ *
+ * @example
+ * ```typescript
+ * // A cycle through a loopback edge is valid (returns false)
+ * // A cycle through regular data edges is invalid (returns true)
+ * const hasInvalid = hasInvalidCycles(nodes, edges);
+ * ```
+ */
+export declare function hasInvalidCycles(nodes: WorkflowNode[], edges: WorkflowEdge[]): boolean;
 /**
  * Get the execution order for a workflow (topological sort)
  */

package/dist/utils/connections.js

@@ -1,6 +1,39 @@
 /**
  * Connection validation utilities for FlowDrop
  */
+/**
+ * Loopback port name constant
+ * This is the standard input port name used for loop iteration triggers
+ */
+const LOOPBACK_PORT_NAME = "loop_back";
+/**
+ * Determines if an edge is a loopback edge.
+ * Loopback edges target the special `loop_back` input port on ForEach nodes.
+ * These edges are used to trigger the next iteration in a loop construct.
+ *
+ * @param edge - The edge to check
+ * @returns True if the edge is a loopback edge
+ *
+ * @example
+ * ```typescript
+ * const edge = { targetHandle: "foreach.1-input-loop_back", ... };
+ * const isLoop = isLoopbackEdge(edge); // true
+ * ```
+ */
+export function isLoopbackEdge(edge) {
+    const targetHandle = edge.targetHandle ?? "";
+    return targetHandle.includes(`-input-${LOOPBACK_PORT_NAME}`);
+}
+/**
+ * Checks if a cycle consists entirely of loopback edges.
+ * A valid loopback cycle only contains edges that target loop_back ports.
+ *
+ * @param cycleEdges - Array of edges that form a cycle
+ * @returns True if all edges in the cycle are loopback edges
+ */
+export function isValidLoopbackCycle(cycleEdges) {
+    return cycleEdges.every((edge) => isLoopbackEdge(edge));
+}
 /**
  * Configurable port compatibility checker
  */
@@ -225,6 +258,12 @@ export function getConnectionSuggestions(nodeId, nodes, nodeTypes) {
 }
 /**
  * Check if a workflow has any cycles (prevent infinite loops)
+ * Note: This function detects ALL cycles, including valid loopback cycles.
+ * Use `hasInvalidCycles` to check only for cycles that could cause infinite execution.
+ *
+ * @param nodes - Array of workflow nodes
+ * @param edges - Array of workflow edges
+ * @returns True if any cycle exists in the workflow
  */
 export function hasCycles(nodes, edges) {
     const visited = new Set();
@@ -254,6 +293,58 @@ export function hasCycles(nodes, edges) {
     }
     return false;
 }
+/**
+ * Check if a workflow has any invalid cycles (non-loopback cycles).
+ * This excludes valid loopback cycles used for ForEach iteration.
+ * Only cycles that could cause infinite execution are detected.
+ *
+ * @param nodes - Array of workflow nodes
+ * @param edges - Array of workflow edges
+ * @returns True if any invalid (non-loopback) cycle exists
+ *
+ * @example
+ * ```typescript
+ * // A cycle through a loopback edge is valid (returns false)
+ * // A cycle through regular data edges is invalid (returns true)
+ * const hasInvalid = hasInvalidCycles(nodes, edges);
+ * ```
+ */
+export function hasInvalidCycles(nodes, edges) {
+    // Filter out loopback edges - these create valid cycles for loop iteration
+    const nonLoopbackEdges = edges.filter((edge) => !isLoopbackEdge(edge));
+    // Check for cycles using only non-loopback edges
+    const visited = new Set();
+    const recursionStack = new Set();
+    /**
+     * DFS utility to detect cycles in the graph
+     * @param nodeId - Current node being visited
+     * @returns True if a cycle is found from this node
+     */
+    function hasCycleUtil(nodeId) {
+        if (recursionStack.has(nodeId))
+            return true;
+        if (visited.has(nodeId))
+            return false;
+        visited.add(nodeId);
+        recursionStack.add(nodeId);
+        // Get all outgoing non-loopback edges from this node
+        const outgoingEdges = nonLoopbackEdges.filter((e) => e.source === nodeId);
+        for (const edge of outgoingEdges) {
+            if (hasCycleUtil(edge.target))
+                return true;
+        }
+        recursionStack.delete(nodeId);
+        return false;
+    }
+    // Check each node for cycles
+    for (const node of nodes) {
+        if (!visited.has(node.id)) {
+            if (hasCycleUtil(node.id))
+                return true;
+        }
+    }
+    return false;
+}
 /**
  * Get the execution order for a workflow (topological sort)
  */

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.33",
+	"version": "0.0.35",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",