@flowuent-org/diagramming-core 1.0.5 → 1.0.7

package/packages/diagrams/project.json

@@ -1,38 +1,42 @@
-{
-  "name": "diagrams",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "packages/diagrams/src",
-  "projectType": "library",
-  "tags": [],
-  "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/packages/diagrams",
-        "tsConfig": "packages/diagrams/tsconfig.lib.json",
-        "project": "packages/diagrams/package.json",
-        "entryFile": "packages/diagrams/src/index.ts",
-        "external": ["react", "react-dom", "react/jsx-runtime"],
-        "rollupConfig": "packages/diagrams/rollup.config.js",
-        "compiler": "swc",
-        "skipTypeCheck": false,
-        "assets": [
-          {
-            "glob": "packages/diagrams/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ],
-        "buildableProjectDepsInPackageJsonType": "peerDependencies"
-      },
-      "configurations": {
-        "production": {
-          "optimization": true,
-          "extractLicenses": true,
-          "inspect": false
-        }
-      }
-    }
-  }
-}
+{
+  "name": "diagrams",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/diagrams/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/rollup:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/diagrams",
+        "tsConfig": "packages/diagrams/tsconfig.lib.json",
+        "project": "packages/diagrams/package.json",
+        "entryFile": "packages/diagrams/src/index.ts",
+        "external": ["react", "react-dom", "react/jsx-runtime"],
+        "rollupConfig": "packages/diagrams/rollup.config.js",
+        "compiler": "babel",
+        "assets": [
+          {
+            "glob": "packages/diagrams/README.md",
+            "input": ".",
+            "output": "."
+          },
+          {
+            "glob": "**/*",
+            "input": "packages/diagrams/locales",
+            "output": "locales"
+          }
+        ],
+        "buildableProjectDepsInPackageJsonType": "peerDependencies"
+      },
+      "configurations": {
+        "production": {
+          "optimization": true,
+          "extractLicenses": true,
+          "inspect": false
+        }
+      }
+    }
+  }
+}

package/packages/diagrams/rollup.config.js

@@ -8,16 +8,11 @@ module.exports = (options) => {
   // Enable tree shaking
   nxRollupOptions.treeshake = true; // Explicitly enable tree shaking
 
-  // Filter out rollup-plugin-typescript2 (rpt2) which has path issues on Windows
-  // But keep @rollup/plugin-typescript if it exists
-  nxRollupOptions.plugins = (Array.isArray(nxRollupOptions.plugins) ? nxRollupOptions.plugins : [])
-    .filter(plugin => {
-      // Remove rollup-plugin-typescript2 (rpt2) - it has cross-platform path issues
-      return !(plugin && plugin.name === 'rpt2');
-    });
-
-  // Add the preserveDirectives plugin  
-  nxRollupOptions.plugins.push(preserveDirectives());
+  // Add the preserveDirectives plugin to the existing plugins
+  nxRollupOptions.plugins = [
+    ...(Array.isArray(nxRollupOptions.plugins) ? nxRollupOptions.plugins : []),
+    preserveDirectives(),
+  ];
 
   // Externalize MUI packages
   nxRollupOptions.external = [

package/packages/diagrams/src/index.ts

@@ -1,113 +1,116 @@
-export * from './lib/externals';
-export * from './lib/templates/systemFlow';
-export * from './lib/theme';
-export * from './lib/atoms/AddNodeAnchor';
-export * from './lib/atoms/AddParallelColButton';
-export * from './lib/atoms/BendpointNode';
-export * from './lib/atoms/CardBlockTypeSelector';
-export * from './lib/atoms/CardMainContent';
-export * from './lib/atoms/FloatingConnectionLine';
-export * from './lib/atoms/MarkerSelector';
-export * from './lib/atoms/PropertyInput';
-export * from './lib/atoms/StyledBox';
-export * from './lib/contexts/CardDataProvider';
-export * from './lib/contexts/DiagramProvider';
-export * from './lib/contexts/diagramStoreTypes';
-export * from './lib/contexts/onConnect';
-export * from './lib/contexts/onDragStart';
-export * from './lib/contexts/onNodeDragEnd';
-export * from './lib/contexts/onNodesChange';
-export * from './lib/contexts/setContentHeight';
-export * from './lib/contexts/setDiagramType';
-export * from './lib/contexts/setEdges';
-export * from './lib/contexts/setEdgeShapeType';
-export * from './lib/contexts/setNodes';
-export * from './lib/contexts/setNodeSetting';
-export * from './lib/contexts/setPannable';
-export * from './lib/contexts/setSelectedEdge';
-export * from './lib/contexts/setSelectedNode';
-export * from './lib/contexts/undo';
-export * from './lib/contexts/updateNodeSetting';
-export * from './lib/hooks/customUseReactFlow';
-export * from './lib/hooks/updateNodes';
-export * from './lib/hooks/useDragCallbacks';
-export * from './lib/hooks/useModalControls';
-export * from './lib/hooks/useWorkflowNodeActiont';
-export * from './lib/hooks/useAutoRegisterFunctions';
-export * from './lib/molecules/AddingBlock';
-export * from './lib/molecules/animated-add-button';
-export * from './lib/molecules/Block';
-export * from './lib/molecules/BlockProvider';
-export * from './lib/molecules/BlockWrapper';
-export * from './lib/molecules/DraggablePane';
-export * from './lib/molecules/EntityNodeBlocks';
-export * from './lib/molecules/json-viewer';
-export * from './lib/molecules/SideHandles';
-export * from './lib/molecules/StencilItem';
-export * from './lib/molecules/WorkflowNodeActionButtons';
-export * from './lib/organisms/AddNodeView';
-export * from './lib/organisms/DownloadPanel';
-export * from './lib/organisms/EdgeModal';
-export * from './lib/organisms/NodeContextMenu';
-export * from './lib/organisms/SmartDynamicForm';
-export * from './lib/organisms/Stencil';
-export * from './lib/organisms/UseDiagramStore';
-export * from './lib/organisms/ConditionRuleGroup';
-export * from './lib/organisms/WorkflowNode';
-export * from './lib/templates/DiagramContainer';
-export * from './lib/templates/DiagramContent';
-export * from './lib/templates/Diagramming';
-export type { DiagrammingPageRef } from './lib/templates/Diagramming';
-export * from './lib/templates/PageLinks';
-export * from './lib/types/card-node';
-export * from './lib/types/collaboration-types';
-export * from './lib/types/colors';
-export * from './lib/types/edge-types';
-export * from './lib/types/hooks.types';
-export * from './lib/types/node-types';
-export * from './lib/types/SmartDynamicFormField';
-export * from './lib/types/stencil-item';
-export * from './lib/types/structures';
-export * from './lib/types/workflow-content-dynamic-form-type';
-export * from './lib/types/FunctionSignature';
-export * from './lib/utils/add-new-block';
-export * from './lib/utils/add-new-node';
-export * from './lib/utils/addToHistory';
-export * from './lib/utils/closestPoint';
-export * from './lib/utils/color-options';
-export * from './lib/utils/compress-img';
-export * from './lib/utils/constant-lengths';
-export * from './lib/utils/create-updated';
-export * from './lib/utils/createHistoryChange';
-export * from './lib/utils/edge-hooks';
-export * from './lib/utils/elkLayout';
-export * from './lib/utils/event-hooks';
-export * from './lib/utils/event-store';
-export * from './lib/utils/flow-node-hooks';
-export * from './lib/utils/flow-to-js';
-export * from './lib/utils/helpers.types';
-export * from './lib/utils/logger';
-export * from './lib/utils/model-hooks';
-export * from './lib/utils/node-hooks';
-export { useHistory, useHistoryIndex } from './lib/contexts/DiagramProvider';
-export * from './lib/utils/object';
-export * from './lib/utils/nodeutils';
-export * from './lib/utils/utilities';
-export * from './lib/utils/vhToPixels';
-export * from './lib/assets/markers/markers.param';
-export * from './lib/assets/markers/markers.type';
-export * from './lib/organisms/Card/card.params';
-export * from './lib/organisms/Card/card.types';
-export * from './lib/organisms/Card/EntityNode';
-export * from './lib/organisms/CustomEdge/custom-edge-generator';
-export * from './lib/organisms/CustomEdge/custom-edge.params';
-export * from './lib/organisms/CustomEdge/custom-edge.type';
-export * from './lib/organisms/PropertiesPane';
-export * from './lib/organisms/HistoryPane';
-//export * from './lib/types/workflow-node-data-types';
-export * from './lib/templates/node-forms/NodeForm';
-export { AutomationExecutionEngine } from './lib/utils/AutomationExecutionEngine';
-export type {
-  AutomationLog,
-  AutomationResult,
-} from './lib/utils/AutomationExecutionEngine';
+export * from './lib/externals';
+export * from './lib/i18n';
+export * from './lib/templates/systemFlow';
+export * from './lib/theme';
+export * from './lib/atoms/AddNodeAnchor';
+export * from './lib/atoms/AddParallelColButton';
+export * from './lib/atoms/BendpointNode';
+export * from './lib/atoms/CardBlockTypeSelector';
+export * from './lib/atoms/CardMainContent';
+export * from './lib/atoms/FloatingConnectionLine';
+export * from './lib/atoms/MarkerSelector';
+export * from './lib/atoms/PropertyInput';
+export * from './lib/atoms/StyledBox';
+export * from './lib/contexts/CardDataProvider';
+export * from './lib/contexts/DiagramProvider';
+export * from './lib/contexts/diagramStoreTypes';
+export * from './lib/contexts/onConnect';
+export * from './lib/contexts/onDragStart';
+export * from './lib/contexts/onNodeDragEnd';
+export * from './lib/contexts/onNodesChange';
+export * from './lib/contexts/setContentHeight';
+export * from './lib/contexts/setDiagramType';
+export * from './lib/contexts/setEdges';
+export * from './lib/contexts/setEdgeShapeType';
+export * from './lib/contexts/setNodes';
+export * from './lib/contexts/setNodeSetting';
+export * from './lib/contexts/setPannable';
+export * from './lib/contexts/setSelectedEdge';
+export * from './lib/contexts/setSelectedNode';
+export * from './lib/contexts/undo';
+export * from './lib/contexts/updateNodeSetting';
+export * from './lib/hooks/customUseReactFlow';
+export * from './lib/hooks/updateNodes';
+export * from './lib/hooks/useDragCallbacks';
+export * from './lib/hooks/useModalControls';
+export * from './lib/hooks/useWorkflowNodeActiont';
+export * from './lib/hooks/useAutoRegisterFunctions';
+export * from './lib/molecules/AddingBlock';
+export * from './lib/molecules/animated-add-button';
+export * from './lib/molecules/Block';
+export * from './lib/molecules/BlockProvider';
+export * from './lib/molecules/BlockWrapper';
+export * from './lib/molecules/DraggablePane';
+export * from './lib/molecules/EntityNodeBlocks';
+export * from './lib/molecules/json-viewer';
+export * from './lib/molecules/SideHandles';
+export * from './lib/molecules/StencilItem';
+export * from './lib/molecules/WorkflowNodeActionButtons';
+export * from './lib/organisms/AddNodeView';
+export * from './lib/organisms/DownloadPanel';
+export * from './lib/organisms/EdgeModal';
+export * from './lib/organisms/NodeContextMenu';
+export * from './lib/organisms/SmartDynamicForm';
+export * from './lib/organisms/Stencil';
+export * from './lib/organisms/UseDiagramStore';
+export * from './lib/organisms/ConditionRuleGroup';
+export * from './lib/organisms/WorkflowNode';
+export * from './lib/templates/DiagramContainer';
+export * from './lib/templates/DiagramContent';
+export * from './lib/templates/Diagramming';
+export type { DiagrammingPageRef } from './lib/templates/Diagramming';
+export * from './lib/templates/PageLinks';
+export * from './lib/types/card-node';
+export * from './lib/types/collaboration-types';
+export * from './lib/types/colors';
+export * from './lib/types/edge-types';
+export * from './lib/types/hooks.types';
+export * from './lib/types/node-types';
+export * from './lib/types/SmartDynamicFormField';
+export * from './lib/types/stencil-item';
+export * from './lib/types/structures';
+export * from './lib/types/workflow-content-dynamic-form-type';
+export * from './lib/types/FunctionSignature';
+export * from './lib/utils/add-new-block';
+export * from './lib/utils/add-new-node';
+export * from './lib/utils/addToHistory';
+export * from './lib/utils/closestPoint';
+export * from './lib/utils/color-options';
+export * from './lib/utils/compress-img';
+export * from './lib/utils/constant-lengths';
+export * from './lib/utils/create-updated';
+export * from './lib/utils/createHistoryChange';
+export * from './lib/utils/edge-hooks';
+export * from './lib/utils/elkLayout';
+export * from './lib/utils/event-hooks';
+export * from './lib/utils/event-store';
+export * from './lib/utils/flow-node-hooks';
+export * from './lib/utils/flow-to-js';
+export * from './lib/utils/helpers.types';
+export * from './lib/utils/logger';
+export * from './lib/utils/model-hooks';
+export * from './lib/utils/node-hooks';
+export { useHistory, useHistoryIndex } from './lib/contexts/DiagramProvider';
+export * from './lib/utils/object';
+export * from './lib/utils/nodeutils';
+export * from './lib/utils/utilities';
+export * from './lib/utils/vhToPixels';
+export * from './lib/assets/markers/markers.param';
+export * from './lib/assets/markers/markers.type';
+export * from './lib/organisms/Card/card.params';
+export * from './lib/organisms/Card/card.types';
+export * from './lib/organisms/Card/EntityNode';
+export * from './lib/organisms/CustomEdge/custom-edge-generator';
+export * from './lib/organisms/CustomEdge/custom-edge.params';
+export * from './lib/organisms/CustomEdge/custom-edge.type';
+export * from './lib/organisms/PropertiesPane';
+export * from './lib/organisms/HistoryPane';
+//export * from './lib/types/workflow-node-data-types';
+export * from './lib/templates/node-forms/NodeForm';
+export { AutomationExecutionEngine } from './lib/utils/AutomationExecutionEngine';
+export type {
+  AutomationLog,
+  AutomationResult,
+} from './lib/utils/AutomationExecutionEngine';
+export * from './lib/components/automation';
+export * from './lib/types/automation-node-data-types';

package/packages/diagrams/src/lib/atoms/CardEditableTitle.tsx

@@ -1,76 +1,76 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Box, TextField } from '@mui/material';
-import { ICardNode } from '../types/card-node';
-import { useCustomReactFlow } from '../hooks/customUseReactFlow';
-import { useNodeId, useNodeTitle } from '../contexts/CardDataProvider';
-
-export const CardEditableTitle = React.memo(() => {
-  const title = useNodeTitle()
-  const nodeId = useNodeId()
-  const { getNodes, setNodes } = useCustomReactFlow();
-  const [text, setText] = useState(title);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (title !== text) setText(title);
-  }, [title]);
-
-  const changeTitle = useCallback(
-    (val: string) => {
-      const prevNodes = [...getNodes()] as ICardNode[];
-      const newNodes: ICardNode[] = prevNodes.map((node) => {
-        if (node.id === nodeId) {
-          return {
-            ...node,
-            data: { ...node.data, title: val },
-          };
-        } else return node;
-      });
-      setNodes(newNodes);
-    },
-    [getNodes, setNodes, nodeId],
-  );
-
-  const handleSave = useCallback(() => {
-    changeTitle(text ?? '');
-  }, [text, changeTitle]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter') {
-        handleSave();
-      } else if (e.key === 'Escape') {
-        setText(title);
-      }
-    },
-    [handleSave, title],
-  );
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'center',
-        width: '100%',
-        my: 1,
-        backgroundColor: '#6B04F1',
-        borderRadius: '3px',
-      }}
-    >
-      <TextField
-        size={'small'}
-        inputProps={{
-          style: { fontSize: '18px', fontWeight: 'bold', textAlign: 'center', color: '#fff' },
-        }}
-        variant="outlined"
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        onKeyDown={handleKeyDown}
-        inputRef={inputRef}
-        fullWidth
-      />
-    </Box>
-  );
-});
-
-export default CardEditableTitle;
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Box, TextField } from '@mui/material';
+import { ICardNode } from '../types/card-node';
+import { useCustomReactFlow } from '../hooks/customUseReactFlow';
+import { useNodeId, useNodeTitle } from '@flowuent-labs/diagrams';
+
+export const CardEditableTitle = React.memo(() => {
+  const title = useNodeTitle()
+  const nodeId = useNodeId()
+  const { getNodes, setNodes } = useCustomReactFlow();
+  const [text, setText] = useState(title);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (title !== text) setText(title);
+  }, [title]);
+
+  const changeTitle = useCallback(
+    (val: string) => {
+      const prevNodes = [...getNodes()] as ICardNode[];
+      const newNodes: ICardNode[] = prevNodes.map((node) => {
+        if (node.id === nodeId) {
+          return {
+            ...node,
+            data: { ...node.data, title: val },
+          };
+        } else return node;
+      });
+      setNodes(newNodes);
+    },
+    [getNodes, setNodes, nodeId],
+  );
+
+  const handleSave = useCallback(() => {
+    changeTitle(text ?? '');
+  }, [text, changeTitle]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        handleSave();
+      } else if (e.key === 'Escape') {
+        setText(title);
+      }
+    },
+    [handleSave, title],
+  );
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        width: '100%',
+        my: 1,
+        backgroundColor: '#6B04F1',
+        borderRadius: '3px',
+      }}
+    >
+      <TextField
+        size={'small'}
+        inputProps={{
+          style: { fontSize: '18px', fontWeight: 'bold', textAlign: 'center', color: '#fff' },
+        }}
+        variant="outlined"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        inputRef={inputRef}
+        fullWidth
+      />
+    </Box>
+  );
+});
+
+export default CardEditableTitle;

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

@@ -278,6 +278,19 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
                 transition: 'all 0.2s ease',
                 cursor: 'pointer',
                 overflow: 'hidden',
+                ...(data.status === 'Running' && {
+                    animation: 'pulse-glow 2s ease-in-out infinite',
+                    '@keyframes pulse-glow': {
+                        '0%, 100%': {
+                            boxShadow: '0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2)',
+                            borderColor: 'rgba(251, 191, 36, 0.6)',
+                        },
+                        '50%': {
+                            boxShadow: '0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3)',
+                            borderColor: 'rgba(251, 191, 36, 0.9)',
+                        },
+                    },
+                }),
             }}
             onClick={handleJsonClick}
         >
@@ -322,8 +335,16 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
                         label={data.status}
                         size="small"
                         sx={{
-                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
-                            color: '#86EFAC',
+                            backgroundColor: data.status === 'Completed'
+                                ? 'rgba(37, 99, 235, 0.1)'
+                                : data.status === 'Running'
+                                    ? 'rgba(251, 191, 36, 0.1)'
+                                    : 'rgba(16, 185, 129, 0.1)',
+                            color: data.status === 'Completed'
+                                ? '#93C5FD'
+                                : data.status === 'Running'
+                                    ? '#FCD34D'
+                                    : '#86EFAC',
                             fontWeight: 500,
                             fontSize: '12px',
                             height: '24px',
@@ -370,7 +391,7 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
                     {t('automation.apiNode.additionalInfo')}
                 </Typography>
 
-                {(data.formData?.executionResult || data.formData?.schemaMatch) && (
+                {data.status === 'Completed' && (data.formData?.executionResult || data.formData?.schemaMatch) && (
                     <>
                         {/* Schema Row */}
                         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>

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

@@ -207,6 +207,19 @@ export const AutomationEndNode: React.FC<AutomationEndNodeProps> = ({ data, sele
                 transition: 'all 0.2s ease',
                 cursor: 'pointer',
                 overflow: 'hidden',
+                ...(data.status === 'Running' && {
+                    animation: 'pulse-glow 2s ease-in-out infinite',
+                    '@keyframes pulse-glow': {
+                        '0%, 100%': {
+                            boxShadow: '0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2)',
+                            borderColor: 'rgba(251, 191, 36, 0.6)',
+                        },
+                        '50%': {
+                            boxShadow: '0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3)',
+                            borderColor: 'rgba(251, 191, 36, 0.9)',
+                        },
+                    },
+                }),
             }}
             onClick={handleJsonClick}
         >
@@ -251,8 +264,16 @@ export const AutomationEndNode: React.FC<AutomationEndNodeProps> = ({ data, sele
                         label={data.status}
                         size="small"
                         sx={{
-                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
-                            color: '#86EFAC',
+                            backgroundColor: data.status === 'Completed'
+                                ? 'rgba(37, 99, 235, 0.1)'
+                                : data.status === 'Running'
+                                    ? 'rgba(251, 191, 36, 0.1)'
+                                    : 'rgba(16, 185, 129, 0.1)',
+                            color: data.status === 'Completed'
+                                ? '#93C5FD'
+                                : data.status === 'Running'
+                                    ? '#FCD34D'
+                                    : '#86EFAC',
                             fontWeight: 500,
                             fontSize: '12px',
                             height: '24px',

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

@@ -282,6 +282,19 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
                 transition: 'all 0.2s ease',
                 cursor: 'pointer',
                 overflow: 'hidden',
+                ...(data.status === 'Running' && {
+                    animation: 'pulse-glow 2s ease-in-out infinite',
+                    '@keyframes pulse-glow': {
+                        '0%, 100%': {
+                            boxShadow: '0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2)',
+                            borderColor: 'rgba(251, 191, 36, 0.6)',
+                        },
+                        '50%': {
+                            boxShadow: '0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3)',
+                            borderColor: 'rgba(251, 191, 36, 0.9)',
+                        },
+                    },
+                }),
             }}
             onClick={handleJsonClick}
         >
@@ -326,8 +339,16 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
                         label={data.status}
                         size="small"
                         sx={{
-                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
-                            color: '#86EFAC',
+                            backgroundColor: data.status === 'Completed'
+                                ? 'rgba(37, 99, 235, 0.1)'
+                                : data.status === 'Running'
+                                    ? 'rgba(251, 191, 36, 0.1)'
+                                    : 'rgba(16, 185, 129, 0.1)',
+                            color: data.status === 'Completed'
+                                ? '#93C5FD'
+                                : data.status === 'Running'
+                                    ? '#FCD34D'
+                                    : '#86EFAC',
                             fontWeight: 500,
                             fontSize: '12px',
                             height: '24px',
@@ -408,7 +429,7 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
                     </Box>
                 </Box>
 
-                {(data.formData?.executionResult || data.formData?.schemaMatch) && (
+                {data.status === 'Completed' && (data.formData?.executionResult || data.formData?.schemaMatch) && (
                     <>
                         {/* Schema Row */}
                         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>