@flowuent-org/diagramming-core 1.4.1 → 1.4.2

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',
@@ -277,6 +284,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 +495,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 +533,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 +569,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 +605,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',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowuent-org/diagramming-core",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "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/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>;
@@ -300,17 +302,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

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

@@ -43,7 +43,6 @@ export const AutomationSmsNode: React.FC<AutomationSmsNodeProps> = ({
       data={{ ...data, description: descriptionText }}
       selected={selected}
       icon={<SmsNodeIcon />}
-      headerText="Send SMS (recipientPhone)"
       aiAssistantTitle="SMS Node"
       descriptionContent={
         <>

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

@@ -12,11 +12,13 @@ import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
 import { useSearch } from '../../contexts/SearchContext';
 import { getStatusColor } from './statusColors';
 import { StartNodeIcon } from '../../icons';
+import { AutomationNodeHeaderSection } from './AutomationNodeHeader';
 
 interface AutomationStartNodeProps {
     data: {
         label: string;
         description: string;
+        headerText?: string;
         status: 'Ready' | 'Running' | 'Completed' | 'Error';
         triggerType: 'manual' | 'scheduled';
         scheduleConfig?: {
@@ -235,19 +237,7 @@ export const AutomationStartNode: React.FC<AutomationStartNodeProps> = ({ data,
             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.formData?.description || t('automation.startNode.headerDescription'))}
-                </Typography>
-            </Box>
+            <AutomationNodeHeaderSection data={data} highlightText={highlightText} />
 
             {/* Main Content */}
             <Box sx={{ padding: '16px' }}>

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

@@ -31,6 +31,7 @@ import { useDiagram } from '../../contexts/DiagramProvider';
 import { useSearch } from '../../contexts/SearchContext';
 import { NodeActionButtons } from './NodeActionButtons';
 import { getStatusColor } from './statusColors';
+import { AutomationNodeHeaderSection } from './AutomationNodeHeader';
 
 // ========================
 // Types
@@ -57,6 +58,7 @@ export interface TelegramTokenData {
 export interface AutomationTelegramNodeData {
   label: string;
   description: string;
+  headerText?: string;
   operationType?: TelegramOperationType;
   status: 'Ready' | 'Running' | 'Completed' | 'Failed' | 'Need to Config' | 'authenticated';
   parameters?: {
@@ -462,19 +464,7 @@ export const AutomationTelegramNode: React.FC<AutomationTelegramNodeProps> = ({
       />
 
       {/* 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

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

@@ -43,7 +43,6 @@ export const AutomationVoiceCallNode: React.FC<AutomationVoiceCallNodeProps> = (
       data={data}
       selected={selected}
       icon={<VoiceCallNodeIcon />}
-      headerText="Voice calls with spoken content"
       aiAssistantTitle="Voice Call Node"
       descriptionContent={
         <>

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

@@ -43,7 +43,6 @@ export const AutomationWorkflowNode: React.FC<AutomationWorkflowNodeProps> = ({
       data={data}
       selected={selected}
       icon={<SubWorkflowNodeIcon />}
-      headerText="Run/embed another workflow (workflowId)"
       aiAssistantTitle="Workflow Node"
       descriptionContent={
         <>

package/packages/diagrams/src/lib/components/automation/index.ts

@@ -69,6 +69,11 @@ export type {
   AutomationWorkflowNodeData,
   AutomationWorkflowNodeProps,
 } from './AutomationWorkflowNode';
+export {
+    getAutomationNodeHeaderText,
+    AutomationNodeHeaderSection,
+} from './AutomationNodeHeader';
+export type { AutomationNodeHeaderData } from './AutomationNodeHeader';
 export { AutomationNodeCard } from './AutomationNodeCard';
 export type {
   AutomationNodeCardData,

package/packages/diagrams/src/lib/types/automation-node-data-types.ts

@@ -2,6 +2,7 @@
 export interface AutomationNodeFormData {
   nodeId: string;
   title: string;
+  headerText?: string;
   type: 'start' | 'api' | 'formatting' | 'end' | 'navigation' | 'decision' | 'sms' | 'voice-call' | 'workflow';
   isPinned?: boolean;
   isBlock?: boolean;