@flowuent-org/diagramming-core 1.4.1 → 1.4.3

package/apps/diagramming/src/AutomationDiagramData.ts

@@ -10,6 +10,7 @@ export const automationDefaultNodes = [
       // Display data for the node UI
       label: 'Workflow Trigger',
       description: 'Workflow entry point. Triggered manually or on schedule.',
+      headerText: 'Workflow entry point',
       status: 'Ready',
       lastRun: 'Never',
       duration: '0.0s',
@@ -19,6 +20,7 @@ export const automationDefaultNodes = [
       formData: {
         nodeId: 'start-node',
         title: 'Workflow Trigger',
+        headerText: 'Workflow entry point',
         type: 'start',
         triggerType: 'manual',
         scheduleConfig: {
@@ -67,6 +69,7 @@ export const automationDefaultNodes = [
       label: 'Discover Headlines',
       description:
         "This node extracts all news headlines from CNN's homepage using web scraping techniques.",
+      headerText: 'Get all CNN headlines',
       status: 'Ready',
       lastRun: 'Never',
       duration: '0.8s',
@@ -76,6 +79,7 @@ export const automationDefaultNodes = [
       formData: {
         nodeId: 'api-call-node',
         title: 'Discover Headlines',
+        headerText: 'Get all CNN headlines',
         type: 'api',
         method: 'GET',
         url: 'https://jsonplaceholder.typicode.com/posts',
@@ -157,6 +161,7 @@ export const automationDefaultNodes = [
       // Display data for the node UI
       label: 'Navigate to Website',
       description: 'Navigate to the target website and wait for page load',
+      headerText: 'Web navigation action',
       status: 'Ready',
       navigationType: 'navigate',
       url: 'https://example.com',
@@ -203,6 +208,7 @@ export const automationDefaultNodes = [
       label: 'Article Analyzer',
       description:
         'Extract and analyze article content, generate summaries and topic classifications.',
+      headerText: 'AI-powered content analysis',
       status: 'Ready',
       lastRun: '2 minutes ago',
       duration: '1.2s',
@@ -212,6 +218,7 @@ export const automationDefaultNodes = [
       formData: {
         nodeId: 'data-formatting-node',
         title: 'Article Analyzer',
+        headerText: 'AI-powered content analysis',
         type: 'formatting',
         inputVariable: 'postsResponse',
         formattingType: 'ai-powered',
@@ -269,6 +276,42 @@ export const automationDefaultNodes = [
     height: 150,
     measured: { width: 336, height: 150 },
   },
+  // =====================================
+  // Loop Node
+  // =====================================
+  {
+    id: 'loop-node',
+    type: 'AutomationLoopNode',
+    position: { x: 1100, y: 200 },
+    data: {
+      label: 'For Each Item',
+      description: 'Iterate over array items and run body steps for each',
+      headerText: 'For-each loop over array',
+      status: 'Ready',
+      parameters: {
+        arraySource: { type: 'previousStep' },
+        maxIterations: 100,
+        currentItemVariable: 'currentItem',
+        loopIndexVariable: 'loopIndex',
+      },
+      formData: {
+        nodeId: 'loop-node',
+        title: 'For Each Item',
+        type: 'loop',
+        arraySource: { type: 'previousStep' },
+        maxIterations: 100,
+        currentItemVariable: 'currentItem',
+        loopIndexVariable: 'loopIndex',
+      },
+      lastRun: 'Never',
+      backgroundColor: '#181C25',
+      textColor: '#ffffff',
+      borderColor: '#1e293b',
+    },
+    width: 336,
+    height: 150,
+    measured: { width: 336, height: 150 },
+  },
   {
     id: 'end-node',
     type: 'AutomationEndNode',
@@ -277,6 +320,7 @@ export const automationDefaultNodes = [
       // Display data for the node UI
       label: 'Results Display',
       description: 'Display analyzed article results to the user.',
+      headerText: 'Workflow completion and results display',
       status: 'Ready',
       lastRun: '1 minute ago',
       duration: '0.3s',
@@ -487,6 +531,7 @@ export const automationDefaultNodes = [
     data: {
       label: 'Route by Condition',
       description: 'Conditional branching / routing',
+      headerText: 'Conditional branching / routing',
       routingType: 'condition',
       status: 'Need to Config',
       parameters: {
@@ -524,6 +569,7 @@ export const automationDefaultNodes = [
     data: {
       label: 'Send SMS',
       description: 'Send SMS (recipientPhone)',
+      headerText: 'Send SMS (recipientPhone)',
       status: 'Need to Config',
       parameters: {
         recipientPhone: '+1 (555) 123-4567',
@@ -559,6 +605,7 @@ export const automationDefaultNodes = [
     data: {
       label: 'Voice Call',
       description: 'Voice calls with spoken content',
+      headerText: 'Voice calls with spoken content',
       status: 'Need to Config',
       parameters: {
         recipientPhone: '+1 (555) 987-6543',
@@ -594,6 +641,7 @@ export const automationDefaultNodes = [
     data: {
       label: 'Run Sub-Workflow',
       description: 'Run/embed another workflow (workflowId)',
+      headerText: 'Run/embed another workflow (workflowId)',
       status: 'Need to Config',
       parameters: {
         workflowId: 'wf-notification-pipeline',
@@ -683,11 +731,11 @@ export const automationDefaultEdges = [
     },
   },
   {
-    id: 'edge-formatting-to-end',
+    id: 'edge-formatting-to-loop',
     source: 'data-formatting-node',
-    target: 'end-node',
-    sourceHandle: 'right',
-    targetHandle: 'left',
+    target: 'loop-node',
+    sourceHandle: 'right-source',
+    targetHandle: 'left-target',
     data: {
       label: '',
       type: 'flow',
@@ -701,6 +749,64 @@ export const automationDefaultEdges = [
       color: '#ffffff',
     },
   },
+  {
+    id: 'edge-loop-to-slack',
+    source: 'loop-node',
+    target: 'slack-node',
+    sourceHandle: 'loop',
+    targetHandle: 'left-target',
+    data: {
+      label: 'Loop body',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#86EFAC',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#86EFAC',
+    },
+  },
+  {
+    id: 'edge-slack-back-to-loop',
+    source: 'slack-node',
+    target: 'loop-node',
+    sourceHandle: 'right-source',
+    targetHandle: 'left-target',
+    data: {
+      label: 'Back to loop',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#86EFAC',
+      strokeWidth: 2,
+      strokeDasharray: '5 5',
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#86EFAC',
+    },
+  },
+  {
+    id: 'edge-loop-done-to-end',
+    source: 'loop-node',
+    target: 'end-node',
+    sourceHandle: 'done',
+    targetHandle: 'left-target',
+    data: {
+      label: 'Done',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#9CA3AF',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#9CA3AF',
+    },
+  },
   // =====================================
   // Slack Node Edge
   // =====================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowuent-org/diagramming-core",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/packages/diagrams/src/lib/components/automation/AutomationApiNode.tsx

@@ -23,11 +23,13 @@ import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
 import { useSearch } from '../../contexts/SearchContext';
 import { getStatusColor } from './statusColors';
 import { ApiNodeIcon } from '../../icons';
+import { AutomationNodeHeaderSection } from './AutomationNodeHeader';
 
 interface AutomationApiNodeProps {
     data: {
         label: string;
         description: string;
+        headerText?: string;
         status: 'Ready' | 'Running' | 'Completed' | 'Error';
         method: 'GET' | 'POST' | 'PUT' | 'DELETE';
         url: string;
@@ -313,19 +315,7 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
                 onClick={handleJsonClick}
             >
             {/* Top Header Section */}
-            <Box sx={{
-                backgroundColor: "rgba(67, 93, 132, 0.1)",
-                padding: '8px 16px',
-                borderRadius: '12px 12px 0 0'
-            }}>
-                <Typography variant="body2" sx={{
-                    color: '#ffffff',
-                    fontSize: '12px',
-                    fontWeight: 500
-                }}>
-                    {data.formData?.description || t('automation.apiNode.headerDescription')}
-                </Typography>
-            </Box>
+            <AutomationNodeHeaderSection data={data} />
 
             {/* Main Content */}
             <Box sx={{ padding: '16px' }}>

package/packages/diagrams/src/lib/components/automation/AutomationDecisionNode.tsx

@@ -44,7 +44,6 @@ export const AutomationDecisionNode: React.FC<AutomationDecisionNodeProps> = ({
       data={data}
       selected={selected}
       icon={<DecisionNodeIcon />}
-      headerText="Conditional branching / routing"
       aiAssistantTitle="Decision Node"
       branchHandles
       descriptionContent={

package/packages/diagrams/src/lib/components/automation/AutomationEndNode.tsx

@@ -14,11 +14,13 @@ import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
 import { useSearch } from '../../contexts/SearchContext';
 import { getStatusColor } from './statusColors';
 import { EndNodeIcon } from '../../icons';
+import { AutomationNodeHeaderSection } from './AutomationNodeHeader';
 
 interface AutomationEndNodeProps {
     data: {
         label: string;
         description: string;
+        headerText?: string;
         status: 'Ready' | 'Running' | 'Completed' | 'Error';
         outputType: 'display' | 'store' | 'send';
         outputConfig?: {
@@ -244,19 +246,7 @@ export const AutomationEndNode: React.FC<AutomationEndNodeProps> = ({ data, sele
                 onClick={handleJsonClick}
             >
             {/* Top Header Section */}
-            <Box sx={{
-                backgroundColor: "rgba(67, 93, 132, 0.1)",
-                padding: '8px 16px',
-                borderRadius: '12px 12px 0 0'
-            }}>
-                <Typography variant="body2" sx={{
-                    color: '#ffffff',
-                    fontSize: '12px',
-                    fontWeight: 500
-                }}>
-                    {data.formData?.description || t('automation.endNode.headerDescription')}
-                </Typography>
-            </Box>
+            <AutomationNodeHeaderSection data={data} highlightText={highlightText} />
 
             {/* Main Content */}
             <Box sx={{ padding: '16px' }}>

package/packages/diagrams/src/lib/components/automation/AutomationFormattingNode.tsx

@@ -23,11 +23,13 @@ import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
 import { useSearch } from '../../contexts/SearchContext';
 import { getStatusColor } from './statusColors';
 import { ArticleAnalyzerIcon, FormattingNodeIcon } from '../../icons';
+import { AutomationNodeHeaderSection } from './AutomationNodeHeader';
 
 interface AutomationFormattingNodeProps {
     data: {
         label: string;
         description: string;
+        headerText?: string;
         status: 'Ready' | 'Running' | 'Completed' | 'Error';
         inputVariable: string;
         formattingType: 'basic' | 'ai-powered';
@@ -319,19 +321,7 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
                 onClick={handleJsonClick}
             >
             {/* Top Header Section */}
-            <Box sx={{
-                backgroundColor: "rgba(67, 93, 132, 0.1)",
-                padding: '8px 16px',
-                borderRadius: '12px 12px 0 0'
-            }}>
-                <Typography variant="body2" sx={{
-                    color: '#ffffff',
-                    fontSize: '12px',
-                    fontWeight: 500
-                }}>
-                    {data.formData?.description || t('automation.formattingNode.headerDescription')}
-                </Typography>
-            </Box>
+            <AutomationNodeHeaderSection data={data} />
 
             {/* Main Content */}
             <Box sx={{ padding: '16px' }}>

package/packages/diagrams/src/lib/components/automation/AutomationInteractionNode.tsx

@@ -27,6 +27,7 @@ import { useSearch } from '../../contexts/SearchContext';
 import { NodeActionButtons } from './NodeActionButtons';
 import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
 import { getStatusColor } from './statusColors';
+import { AutomationNodeHeaderSection } from './AutomationNodeHeader';
 
 // ========================
 // Types
@@ -49,6 +50,7 @@ export type InteractionType =
 export interface AutomationInteractionNodeData {
   label: string;
   description: string;
+  headerText?: string;
   interactionType?: InteractionType;
   status: 'Ready' | 'Running' | 'Completed' | 'Error';
   parameters?: {
@@ -424,19 +426,7 @@ export const AutomationInteractionNode: React.FC<AutomationInteractionNodeProps>
         onClick={handleJsonClick}
       >
         {/* Top Header Section */}
-        <Box sx={{
-          backgroundColor: "rgba(67, 93, 132, 0.1)",
-          padding: '8px 16px',
-          borderRadius: '12px 12px 0 0'
-        }}>
-          <Typography variant="body2" sx={{
-            color: '#ffffff',
-            fontSize: '12px',
-            fontWeight: 500
-          }}>
-            {highlightText(data.description || interactionConfig.description)}
-          </Typography>
-        </Box>
+        <AutomationNodeHeaderSection data={data} highlightText={highlightText} />
 
         {/* Main Content */}
         <Box sx={{ padding: '16px' }}>

package/packages/diagrams/src/lib/components/automation/AutomationLoopNode.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Box, Typography, Chip } from '@mui/material';
+import { LoopNodeIcon } from '../../icons';
+import {
+  AutomationNodeCard,
+  AutomationNodeCardData,
+} from './AutomationNodeCard';
+import { AutomationLoopNodeForm } from '../../types/automation-node-data-types';
+
+export interface AutomationLoopNodeData extends AutomationNodeCardData {
+  parameters?: {
+    arraySource?: AutomationLoopNodeForm['arraySource'];
+    maxIterations?: number;
+    currentItemVariable?: string;
+    loopIndexVariable?: string;
+    [key: string]: unknown;
+  };
+}
+
+export interface AutomationLoopNodeProps {
+  data: AutomationLoopNodeData;
+  selected?: boolean;
+}
+
+export const AutomationLoopNode: React.FC<AutomationLoopNodeProps> = ({
+  data,
+  selected,
+}) => {
+  const formData = (data.formData ?? {}) as Partial<AutomationLoopNodeForm>;
+  const arraySource =
+    data.parameters?.arraySource ?? formData.arraySource;
+  const maxIterations =
+    data.parameters?.maxIterations ?? formData.maxIterations ?? 100;
+  const currentItemVariable =
+    data.parameters?.currentItemVariable ??
+    formData.currentItemVariable ??
+    'currentItem';
+  const loopIndexVariable =
+    data.parameters?.loopIndexVariable ??
+    formData.loopIndexVariable ??
+    'loopIndex';
+
+  const sourceLabel =
+    arraySource?.type === 'variable'
+      ? arraySource.variableName ?? 'Unnamed variable'
+      : arraySource?.type === 'previousStep'
+        ? 'Previous step'
+        : 'Not configured';
+
+  return (
+    <AutomationNodeCard
+      data={data}
+      selected={selected}
+      icon={<LoopNodeIcon />}
+      aiAssistantTitle="Loop Node"
+      loopHandles
+      descriptionContent={
+        <Box sx={{ width: '100%' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1 }}>
+            <Chip
+              size="small"
+              label={sourceLabel.toUpperCase()}
+              sx={{
+                height: 20,
+                fontSize: '10px',
+                fontWeight: 600,
+                color: '#86EFAC',
+                bgcolor: 'rgba(134, 239, 172, 0.12)',
+              }}
+            />
+            <Chip
+              size="small"
+              label={`MAX ${maxIterations}`}
+              sx={{
+                height: 20,
+                fontSize: '10px',
+                fontWeight: 600,
+                color: '#9CA3AF',
+                bgcolor: 'rgba(156, 163, 175, 0.12)',
+              }}
+            />
+          </Box>
+          <Typography
+            variant="body2"
+            sx={{ color: '#9CA3AF', fontSize: '12px', lineHeight: 1.4, mb: 0.5 }}
+          >
+            {arraySource
+              ? `For each item → ${currentItemVariable}, index → ${loopIndexVariable}`
+              : data.description}
+          </Typography>
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 1.5, px: 0.5 }}>
+            <Typography variant="caption" sx={{ color: '#86EFAC', fontSize: '10px', fontWeight: 600 }}>
+              LOOP →
+            </Typography>
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: '10px', fontWeight: 600 }}>
+              DONE →
+            </Typography>
+          </Box>
+        </Box>
+      }
+    />
+  );
+};
+
+export default AutomationLoopNode;

package/packages/diagrams/src/lib/components/automation/AutomationNavigationNode.tsx

@@ -15,11 +15,13 @@ import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
 import { useSearch } from '../../contexts/SearchContext';
 import { getStatusColor } from './statusColors';
 import { NavigationIcon } from '../../icons';
+import { AutomationNodeHeaderSection } from './AutomationNodeHeader';
 
 interface AutomationNavigationNodeProps {
     data: {
         label: string;
         description: string;
+        headerText?: string;
         status: 'Ready' | 'Running' | 'Completed' | 'Error';
         navigationType: 'navigate' | 'click' | 'scroll' | 'wait' | 'extract';
         url?: string;
@@ -276,19 +278,7 @@ export const AutomationNavigationNode: React.FC<AutomationNavigationNodeProps> =
                 onClick={handleJsonClick}
             >
                 {/* Top Header Section */}
-                <Box sx={{
-                    backgroundColor: "rgba(67, 93, 132, 0.1)",
-                    padding: '8px 16px',
-                    borderRadius: '12px 12px 0 0'
-                }}>
-                    <Typography variant="body2" sx={{
-                        color: '#ffffff',
-                        fontSize: '12px',
-                        fontWeight: 500
-                    }}>
-                        {data.formData?.description || data.description || 'Web navigation action'}
-                    </Typography>
-                </Box>
+                <AutomationNodeHeaderSection data={data} highlightText={highlightText} />
 
                 {/* Main Content */}
                 <Box sx={{ padding: '16px' }}>

package/packages/diagrams/src/lib/components/automation/AutomationNodeCard.tsx

@@ -11,10 +11,12 @@ import { NodeActionButtons } from './NodeActionButtons';
 import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
 import { useSearch } from '../../contexts/SearchContext';
 import { getStatusColor } from './statusColors';
+import { AutomationNodeHeaderSection } from './AutomationNodeHeader';
 
 export interface AutomationNodeCardData {
   label: string;
   description: string;
+  headerText?: string;
   status?: string;
   lastRun?: string;
   formData?: Record<string, unknown>;
@@ -28,6 +30,7 @@ export interface AutomationNodeCardProps {
   headerText?: string;
   aiAssistantTitle?: string;
   branchHandles?: boolean;
+  loopHandles?: boolean;
   descriptionContent?: React.ReactNode;
 }
 
@@ -62,6 +65,7 @@ export const AutomationNodeCard: React.FC<AutomationNodeCardProps> = ({
   headerText,
   aiAssistantTitle,
   branchHandles = false,
+  loopHandles = false,
   descriptionContent,
 }) => {
   const { t } = useTranslation();
@@ -246,6 +250,29 @@ export const AutomationNodeCard: React.FC<AutomationNodeCardProps> = ({
             style={handleTargetStyle('right', selected)}
           />
         </>
+      ) : loopHandles ? (
+        <>
+          <Handle
+            type="source"
+            position={Position.Right}
+            id="loop"
+            className="connection-handle"
+            style={{ ...handleSourceStyle(selected), right: '-8px', top: '35%' }}
+          />
+          <Handle
+            type="source"
+            position={Position.Right}
+            id="done"
+            className="connection-handle"
+            style={{ ...handleSourceStyle(selected), right: '-8px', top: '65%' }}
+          />
+          <Handle
+            type="target"
+            position={Position.Right}
+            id="right-target"
+            style={handleTargetStyle('right', selected)}
+          />
+        </>
       ) : (
         <>
           <Handle
@@ -300,17 +327,11 @@ export const AutomationNodeCard: React.FC<AutomationNodeCardProps> = ({
         }}
         onClick={handleJsonClick}
       >
-        <Box
-          sx={{
-            backgroundColor: 'rgba(67, 93, 132, 0.1)',
-            padding: '8px 16px',
-            borderRadius: '12px 12px 0 0',
-          }}
-        >
-          <Typography variant="body2" sx={{ color: '#ffffff', fontSize: '12px', fontWeight: 500 }}>
-            {highlightText(headerText || data.description)}
-          </Typography>
-        </Box>
+        <AutomationNodeHeaderSection
+          data={data}
+          headerText={headerText}
+          highlightText={highlightText}
+        />
 
         <Box sx={{ padding: '16px' }}>
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>

package/packages/diagrams/src/lib/components/automation/AutomationNodeHeader.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+
+export interface AutomationNodeHeaderData {
+  headerText?: string;
+  formData?: Record<string, unknown>;
+}
+
+export const getAutomationNodeHeaderText = (
+  data: AutomationNodeHeaderData,
+  override?: string,
+): string | undefined => {
+  const text = override ?? data.headerText ?? (data.formData?.headerText as string | undefined);
+  const trimmed = text?.trim();
+  return trimmed || undefined;
+};
+
+interface AutomationNodeHeaderSectionProps {
+  data: AutomationNodeHeaderData;
+  headerText?: string;
+  highlightText?: (text: string) => React.ReactNode;
+}
+
+export const AutomationNodeHeaderSection: React.FC<AutomationNodeHeaderSectionProps> = ({
+  data,
+  headerText,
+  highlightText,
+}) => {
+  const text = getAutomationNodeHeaderText(data, headerText);
+  if (!text) return null;
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: 'rgba(67, 93, 132, 0.1)',
+        padding: '8px 16px',
+        borderRadius: '12px 12px 0 0',
+      }}
+    >
+      <Typography variant="body2" sx={{ color: '#ffffff', fontSize: '12px', fontWeight: 500 }}>
+        {highlightText ? highlightText(text) : text}
+      </Typography>
+    </Box>
+  );
+};

package/packages/diagrams/src/lib/components/automation/AutomationSlackNode.tsx

@@ -28,6 +28,7 @@ import { useDiagram } from '../../contexts/DiagramProvider';
 import { useSearch } from '../../contexts/SearchContext';
 import { NodeActionButtons } from './NodeActionButtons';
 import { getStatusColor } from './statusColors';
+import { AutomationNodeHeaderSection } from './AutomationNodeHeader';
 
 // ========================
 // Types
@@ -54,6 +55,7 @@ export interface SlackTokenData {
 export interface AutomationSlackNodeData {
   label: string;
   description: string;
+  headerText?: string;
   operationType?: SlackOperationType;
   status: 'Ready' | 'Running' | 'Completed' | 'Failed' | 'Need to Config' | 'authenticated';
   parameters?: {
@@ -469,19 +471,7 @@ export const AutomationSlackNode: React.FC<AutomationSlackNodeProps> = ({
       />
 
       {/* Top Header Section */}
-      <Box sx={{
-        backgroundColor: "rgba(67, 93, 132, 0.1)",
-        padding: '8px 16px',
-        borderRadius: '12px 12px 0 0'
-      }}>
-        <Typography variant="body2" sx={{
-          color: '#ffffff',
-          fontSize: '12px',
-          fontWeight: 500
-        }}>
-          {data.description || operationConfig.description}
-        </Typography>
-      </Box>
+      <AutomationNodeHeaderSection data={data} highlightText={highlightText} />
 
       {/* Header */}
       <Box