@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,694 +1,694 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { createRoot } from 'react-dom/client';
-import { Handle, Position, useNodeId } from '@xyflow/react';
-import {
-  Box,
-  Typography,
-  Chip,
-  IconButton,
-  Card,
-  Button,
-  CircularProgress,
-  Tooltip,
-  LinearProgress,
-} from '@mui/material';
-import {
-  Chat as ChatIcon,
-  Send as SendIcon,
-  Forum as ForumIcon,
-  Notifications as NotificationsIcon,
-  AccessTime as AccessTimeIcon,
-  CheckCircle as CheckCircleIcon,
-  Error as ErrorIcon,
-} from '@mui/icons-material';
-import { RiCloseLine } from 'react-icons/ri';
-import { SiSlack } from 'react-icons/si';
-import ReactJson from 'react-json-view';
-import { useDiagram } from '../../contexts/DiagramProvider';
-import { useSearch } from '../../contexts/SearchContext';
-import { NodeActionButtons } from './NodeActionButtons';
-import { getStatusColor } from './statusColors';
-
-// ========================
-// Types
-// ========================
-
-export type SlackOperationType =
-  | 'send-message'
-  | 'post-to-channel'
-  | 'send-dm'
-  | 'update-message'
-  | 'upload-file'
-  | 'create-channel'
-  | 'invite-users';
-
-export interface SlackTokenData {
-  accessToken: string;
-  expiresAt?: number;
-  teamId?: string;
-  teamName?: string;
-  userId?: string;
-  userName?: string;
-}
-
-export interface AutomationSlackNodeData {
-  label: string;
-  description: string;
-  operationType?: SlackOperationType;
-  status: 'Ready' | 'Running' | 'Completed' | 'Failed' | 'Need to Config' | 'authenticated';
-  parameters?: {
-    // Message operations
-    channel?: string;
-    message?: string;
-    threadTs?: string;
-    blocks?: any[];
-    attachments?: any[];
-    
-    // DM operations
-    userId?: string;
-    userName?: string;
-    
-    // File operations
-    filePath?: string;
-    fileName?: string;
-    fileContent?: string;
-    fileType?: string;
-    
-    // Channel operations
-    channelName?: string;
-    channelTopic?: string;
-    isPrivate?: boolean;
-    
-    // User operations
-    userIds?: string[];
-    
-    // Token data
-    slackAccessToken?: string;
-    slackTokenExpiresAt?: number;
-    slackTeamId?: string;
-    slackTeamName?: string;
-    slackUserId?: string;
-    slackUserName?: string;
-
-    [key: string]: any;
-  };
-  slackAuth?: {
-    clientId?: string;
-    scopes?: string[];
-    isAuthenticated?: boolean;
-    isLoading?: boolean;
-    teamName?: string;
-    userName?: string;
-  };
-  formData?: {
-    nodeId?: string;
-    title?: string;
-    type?: string;
-    operationType?: string;
-    [key: string]: any;
-  };
-  lastRun?: string;
-  duration?: string;
-  executionResult?: {
-    success: boolean;
-    data?: any;
-    error?: string;
-  };
-  onSlackLogin?: () => void;
-  onSlackDisconnect?: () => void;
-}
-
-export interface AutomationSlackNodeProps {
-  data: AutomationSlackNodeData;
-  selected?: boolean;
-}
-
-// ========================
-// Operation Configuration
-// ========================
-
-const OPERATION_CONFIG: Record<
-  SlackOperationType,
-  {
-    icon: React.ElementType;
-    label: string;
-    color: string;
-    description: string;
-  }
-> = {
-  'send-message': {
-    icon: SendIcon,
-    label: 'Send Message',
-    color: '#4A154B',
-    description: 'Send a message to a channel',
-  },
-  'post-to-channel': {
-    icon: ForumIcon,
-    label: 'Post to Channel',
-    color: '#36C5F0',
-    description: 'Post a message to a specific channel',
-  },
-  'send-dm': {
-    icon: ChatIcon,
-    label: 'Send DM',
-    color: '#2EB67D',
-    description: 'Send a direct message to a user',
-  },
-  'update-message': {
-    icon: SendIcon,
-    label: 'Update Message',
-    color: '#ECB22E',
-    description: 'Update an existing message',
-  },
-  'upload-file': {
-    icon: SendIcon,
-    label: 'Upload File',
-    color: '#E01E5A',
-    description: 'Upload a file to Slack',
-  },
-  'create-channel': {
-    icon: ForumIcon,
-    label: 'Create Channel',
-    color: '#4A154B',
-    description: 'Create a new channel',
-  },
-  'invite-users': {
-    icon: NotificationsIcon,
-    label: 'Invite Users',
-    color: '#36C5F0',
-    description: 'Invite users to a channel',
-  },
-};
-
-// ========================
-// Helper Functions
-// ========================
-
-const isTokenExpired = (expiresAt?: number): boolean => {
-  if (!expiresAt) return false; // Slack tokens don't always expire
-  return Date.now() > expiresAt;
-};
-
-const getTimeUntilExpiry = (expiresAt?: number): string => {
-  if (!expiresAt) return 'No expiry';
-  const diff = expiresAt - Date.now();
-  if (diff <= 0) return 'Expired';
-  const minutes = Math.floor(diff / 60000);
-  if (minutes < 60) return `${minutes}m`;
-  const hours = Math.floor(minutes / 60);
-  return `${hours}h ${minutes % 60}m`;
-};
-
-// ========================
-// Main Component
-// ========================
-
-export const AutomationSlackNode: React.FC<AutomationSlackNodeProps> = ({
-  data,
-  selected,
-}) => {
-  const { highlightText } = useSearch();
-  const [isJsonOpen, setIsJsonOpen] = useState(false);
-  const rootRef = useRef<any>(null);
-  const portalRef = useRef<HTMLDivElement | null>(null);
-  const nodeId = useNodeId();
-  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
-  const enableJson = useDiagram((state) => state.enableNodeJsonPopover ?? true);
-
-  // Get operation configuration
-  const operationType = data.operationType || data.formData?.operationType || 'send-message';
-  const operationConfig = OPERATION_CONFIG[operationType] || OPERATION_CONFIG['send-message'];
-  const OperationIcon = operationConfig.icon;
-
-  // Auth state
-  const isAuthenticated = data.slackAuth?.isAuthenticated || !!data.parameters?.slackAccessToken;
-  const isAuthLoading = data.slackAuth?.isLoading || false;
-  const teamName = data.slackAuth?.teamName || data.parameters?.slackTeamName;
-  const userName = data.slackAuth?.userName || data.parameters?.slackUserName;
-  const tokenExpired = isTokenExpired(data.parameters?.slackTokenExpiresAt);
-
-  // Execution state
-  const status = data.status || 'Ready';
-  const executionProgress = status === 'Running' ? 50 : 0;
-
-  // Status configuration - using centralized status colors
-  const statusConfig = getStatusColor(status, status === 'authenticated' ? 'authenticated' : 'ready');
-
-  // Handle JSON view
-  const handleJsonClick = () => {
-    if (nodeId) setSelectedNode(nodeId);
-    if (!enableJson) return;
-    setIsJsonOpen(!isJsonOpen);
-  };
-
-  const handleClose = () => {
-    setIsJsonOpen(false);
-    if (rootRef.current) {
-      rootRef.current.unmount();
-      rootRef.current = null;
-    }
-    if (portalRef.current) {
-      document.body.removeChild(portalRef.current);
-      portalRef.current = null;
-    }
-  };
-
-  // Click outside handler
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (isJsonOpen && !(event.target as Element).closest('#automation-json-popover')) {
-        handleClose();
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isJsonOpen]);
-
-  // JSON popover portal
-  useEffect(() => {
-    if (isJsonOpen) {
-      const portalRoot = document.createElement('div');
-      document.body.appendChild(portalRoot);
-      portalRef.current = portalRoot;
-
-      const root = createRoot(portalRoot);
-      rootRef.current = root;
-
-      root.render(
-        <Card
-          id="automation-json-popover"
-          sx={{
-            position: 'fixed',
-            top: 0,
-            right: 0,
-            zIndex: 9999,
-            width: '400px',
-            height: '100vh',
-            overflow: 'auto',
-            bgcolor: '#242424',
-            color: '#fff',
-            border: '1px solid #333',
-          }}
-        >
-          <Box
-            sx={{
-              p: 2,
-              borderBottom: '1px solid #333',
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-            }}
-          >
-            <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
-              Slack Configuration
-            </Typography>
-            <IconButton size="small" onClick={handleClose} sx={{ color: '#fff' }}>
-              <RiCloseLine />
-            </IconButton>
-          </Box>
-          <Box sx={{ p: 2 }}>
-            <ReactJson
-              src={data}
-              theme="monokai"
-              collapsed={1}
-              displayDataTypes={false}
-              enableClipboard={false}
-              style={{
-                backgroundColor: 'transparent',
-                fontSize: '12px',
-              }}
-            />
-          </Box>
-        </Card>
-      );
-    }
-    return () => {
-      if (rootRef.current) {
-        rootRef.current.unmount();
-        rootRef.current = null;
-      }
-      if (portalRef.current && portalRef.current.parentNode) {
-        document.body.removeChild(portalRef.current);
-        portalRef.current = null;
-      }
-    };
-  }, [isJsonOpen, data]);
-
-  // Render status badge
-  const renderStatusBadge = () => (
-    <Chip
-      size="small"
-      label={
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-          {(status === 'Completed' || status === 'success') && <CheckCircleIcon sx={{ fontSize: 12 }} />}
-          {(status === 'Failed' || status === 'error') && <ErrorIcon sx={{ fontSize: 12 }} />}
-          <span>{statusConfig.label}</span>
-        </Box>
-      }
-      sx={{
-        height: 20,
-        fontSize: '10px',
-        fontWeight: 600,
-        color: statusConfig.color,
-        bgcolor: statusConfig.bgColor,
-        border: `1px solid ${statusConfig.color}20`,
-        '& .MuiChip-label': { px: 1 },
-      }}
-    />
-  );
-
-  // Render Slack Auth Button
-  const renderSlackAuthButton = () => {
-    if (isAuthenticated && !tokenExpired) {
-      return (
-        <Button
-          onClick={data.onSlackDisconnect}
-          disabled={isAuthLoading}
-          fullWidth
-          sx={{
-            backgroundColor: '#2EB67D',
-            borderRadius: '8px',
-            padding: '8px 12px',
-            gap: '8px',
-            color: '#FFFFFF',
-            textTransform: 'none',
-            fontSize: '13px',
-            fontWeight: 500,
-            '&:hover': {
-              backgroundColor: '#1e8e5e',
-            },
-          }}
-        >
-          <SiSlack size={18} />
-          {teamName ? `${teamName}${userName ? ` • ${userName}` : ''}` : 'Connected'}
-        </Button>
-      );
-    }
-
-    return (
-      <Button
-        onClick={data.onSlackLogin}
-        disabled={isAuthLoading}
-        fullWidth
-        sx={{
-          backgroundColor: '#171C29',
-          border: '1px solid #FFFFFF1A',
-          borderRadius: '8px',
-          padding: '8px 12px',
-          gap: '8px',
-          color: '#B2BCD8',
-          textTransform: 'none',
-          fontSize: '13px',
-          fontWeight: 400,
-          '&:hover': {
-            backgroundColor: '#1e293b',
-            borderColor: '#4A154B',
-          },
-          '&:disabled': {
-            opacity: 0.6,
-          },
-        }}
-      >
-        {isAuthLoading ? (
-          <>
-            <CircularProgress size={16} sx={{ color: '#B2BCD8' }} />
-            Connecting...
-          </>
-        ) : (
-          <>
-            <SiSlack size={18} />
-            Connect Slack
-          </>
-        )}
-      </Button>
-    );
-  };
-
-  // ========================
-  // Render
-  // ========================
-  return (
-    <Box
-      sx={{
-        bgcolor: '#1E1E2E',
-        borderRadius: 2,
-        border: selected ? '2px solid rgba(59, 130, 246, 0.5)' : '1px solid #374151',
-        minWidth: 280,
-        maxWidth: 320,
-        overflow: 'hidden',
-        boxShadow: selected ? '0 0 0 2px rgba(59, 130, 246, 0.5)' : '0 4px 8px rgba(0, 0, 0, 0.3)',
-        transition: 'all 0.2s ease',
-        ...(status === 'Running' && {
-          animation: 'pulse-glow 2s ease-in-out infinite',
-          '@keyframes pulse-glow': {
-            '0%, 100%': {
-              boxShadow: '0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2)',
-              borderColor: 'rgba(59, 130, 246, 0.6)',
-            },
-            '50%': {
-              boxShadow: '0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.3)',
-              borderColor: 'rgba(59, 130, 246, 0.9)',
-            },
-          },
-        }),
-      }}
-      onClick={() => setSelectedNode(nodeId || '')}
-    >
-      {/* Input Handle */}
-      <Handle
-        type="target"
-        position={Position.Left}
-        style={{
-          background: operationConfig.color,
-          width: 10,
-          height: 10,
-          border: '2px solid #1E1E2E',
-        }}
-      />
-
-      {/* 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>
-
-      {/* Header */}
-      <Box
-        sx={{
-          bgcolor: "rgba(67, 93, 132, 0.1)",
-          borderBottom: `1px solid rgba(67, 93, 132, 0.2)`,
-          px: 2,
-          py: 1.5,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-          <Box
-            sx={{
-              width: '32px',
-              height: '32px',
-              minWidth: '32px',
-              backgroundColor: '#1E3A8A',
-              borderRadius: '50%',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              flexShrink: 0,
-            }}
-          >
-            <OperationIcon sx={{ fontSize: 18, color: '#fff' }} />
-          </Box>
-          <Box>
-            <Typography
-              variant="subtitle2"
-              sx={{ color: '#fff', fontWeight: 600, fontSize: 13 }}
-            >
-              {highlightText(data.label || operationConfig.label)}
-            </Typography>
-          </Box>
-        </Box>
-        {renderStatusBadge()}
-      </Box>
-
-      {/* Content */}
-      <Box sx={{ px: 2, py: 1.5 }}>
-        {/* Slack Auth Button */}
-        <Box sx={{ mb: 1.5 }}>
-          {renderSlackAuthButton()}
-          {!isAuthenticated && (
-            <Typography
-              variant="caption"
-              sx={{
-                color: '#6B7280',
-                fontSize: 10,
-                display: 'block',
-                textAlign: 'center',
-                mt: 0.5,
-              }}
-            >
-              Click to authenticate with Slack
-            </Typography>
-          )}
-        </Box>
-
-        {/* Progress Bar (when running) */}
-        {status === 'Running' && (
-          <Box sx={{ mb: 1.5 }}>
-            <LinearProgress
-              variant="determinate"
-              value={executionProgress}
-              sx={{
-                height: 4,
-                borderRadius: 2,
-                bgcolor: 'rgba(59, 130, 246, 0.1)',
-                '& .MuiLinearProgress-bar': {
-                  bgcolor: operationConfig.color,
-                },
-              }}
-            />
-          </Box>
-        )}
-
-        {/* Token Expiry Info */}
-        {isAuthenticated && data.parameters?.slackTokenExpiresAt && (
-          <Box sx={{ mb: 1.5 }}>
-            <Tooltip title={`Token expires in ${getTimeUntilExpiry(data.parameters.slackTokenExpiresAt)}`}>
-              <Chip
-                size="small"
-                label={getTimeUntilExpiry(data.parameters.slackTokenExpiresAt)}
-                sx={{
-                  height: 18,
-                  fontSize: '9px',
-                  backgroundColor: tokenExpired ? '#EF4444' : '#2EB67D',
-                  color: '#FFFFFF',
-                  fontWeight: 500,
-                }}
-              />
-            </Tooltip>
-          </Box>
-        )}
-
-        {/* Operation-specific Parameters Display */}
-        <Box sx={{ mb: 1.5 }}>
-          {operationType === 'send-message' && data.parameters?.channel && (
-            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
-              Channel: #{data.parameters.channel}
-            </Typography>
-          )}
-          {operationType === 'post-to-channel' && data.parameters?.channel && (
-            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
-              Channel: #{data.parameters.channel}
-            </Typography>
-          )}
-          {operationType === 'send-dm' && data.parameters?.userName && (
-            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
-              User: @{data.parameters.userName}
-            </Typography>
-          )}
-          {operationType === 'create-channel' && data.parameters?.channelName && (
-            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
-              Channel: #{data.parameters.channelName}
-            </Typography>
-          )}
-          {data.parameters?.message && (
-            <Typography 
-              variant="caption" 
-              sx={{ 
-                color: '#9CA3AF', 
-                fontSize: 10,
-                display: 'block',
-                mt: 0.5,
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-              }}
-            >
-              Message: {data.parameters.message}
-            </Typography>
-          )}
-        </Box>
-
-        {/* Execution Result */}
-        {data.executionResult && (
-          <Box
-            sx={{
-              bgcolor: data.executionResult.success
-                ? 'rgba(16, 185, 129, 0.1)'
-                : 'rgba(239, 68, 68, 0.1)',
-              borderRadius: 1,
-              p: 1,
-              mb: 1.5,
-              border: `1px solid ${
-                data.executionResult.success
-                  ? 'rgba(16, 185, 129, 0.3)'
-                  : 'rgba(239, 68, 68, 0.3)'
-              }`,
-            }}
-          >
-            <Typography
-              variant="caption"
-              sx={{
-                color: data.executionResult.success ? '#10B981' : '#EF4444',
-                fontSize: 10,
-              }}
-            >
-              {data.executionResult.success
-                ? '✓ Operation completed'
-                : `✗ ${data.executionResult.error || 'Operation failed'}`}
-            </Typography>
-          </Box>
-        )}
-
-        {/* Last Run Info */}
-        {data.lastRun && (
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 0.5,
-              justifyContent: 'center',
-            }}
-          >
-            <AccessTimeIcon sx={{ fontSize: 10, color: '#6B7280' }} />
-            <Typography variant="caption" sx={{ color: '#6B7280', fontSize: 9 }}>
-              Last run: {data.lastRun}
-              {data.duration && ` · ${data.duration}`}
-            </Typography>
-          </Box>
-        )}
-      </Box>
-
-      {/* Node Action Buttons */}
-      <NodeActionButtons selected={selected} />
-
-      {/* Output Handle */}
-      <Handle
-        type="source"
-        position={Position.Right}
-        style={{
-          background: operationConfig.color,
-          width: 10,
-          height: 10,
-          border: '2px solid #1E1E2E',
-        }}
-      />
-    </Box>
-  );
-};
-
-export default AutomationSlackNode;
-
-
+import React, { useState, useEffect, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Handle, Position, useNodeId } from '@xyflow/react';
+import {
+  Box,
+  Typography,
+  Chip,
+  IconButton,
+  Card,
+  Button,
+  CircularProgress,
+  Tooltip,
+  LinearProgress,
+} from '@mui/material';
+import {
+  Chat as ChatIcon,
+  Send as SendIcon,
+  Forum as ForumIcon,
+  Notifications as NotificationsIcon,
+  AccessTime as AccessTimeIcon,
+  CheckCircle as CheckCircleIcon,
+  Error as ErrorIcon,
+} from '@mui/icons-material';
+import { RiCloseLine } from 'react-icons/ri';
+import { SiSlack } from 'react-icons/si';
+import ReactJson from 'react-json-view';
+import { useDiagram } from '../../contexts/DiagramProvider';
+import { useSearch } from '../../contexts/SearchContext';
+import { NodeActionButtons } from './NodeActionButtons';
+import { getStatusColor } from './statusColors';
+
+// ========================
+// Types
+// ========================
+
+export type SlackOperationType =
+  | 'send-message'
+  | 'post-to-channel'
+  | 'send-dm'
+  | 'update-message'
+  | 'upload-file'
+  | 'create-channel'
+  | 'invite-users';
+
+export interface SlackTokenData {
+  accessToken: string;
+  expiresAt?: number;
+  teamId?: string;
+  teamName?: string;
+  userId?: string;
+  userName?: string;
+}
+
+export interface AutomationSlackNodeData {
+  label: string;
+  description: string;
+  operationType?: SlackOperationType;
+  status: 'Ready' | 'Running' | 'Completed' | 'Failed' | 'Need to Config' | 'authenticated';
+  parameters?: {
+    // Message operations
+    channel?: string;
+    message?: string;
+    threadTs?: string;
+    blocks?: any[];
+    attachments?: any[];
+    
+    // DM operations
+    userId?: string;
+    userName?: string;
+    
+    // File operations
+    filePath?: string;
+    fileName?: string;
+    fileContent?: string;
+    fileType?: string;
+    
+    // Channel operations
+    channelName?: string;
+    channelTopic?: string;
+    isPrivate?: boolean;
+    
+    // User operations
+    userIds?: string[];
+    
+    // Token data
+    slackAccessToken?: string;
+    slackTokenExpiresAt?: number;
+    slackTeamId?: string;
+    slackTeamName?: string;
+    slackUserId?: string;
+    slackUserName?: string;
+
+    [key: string]: any;
+  };
+  slackAuth?: {
+    clientId?: string;
+    scopes?: string[];
+    isAuthenticated?: boolean;
+    isLoading?: boolean;
+    teamName?: string;
+    userName?: string;
+  };
+  formData?: {
+    nodeId?: string;
+    title?: string;
+    type?: string;
+    operationType?: string;
+    [key: string]: any;
+  };
+  lastRun?: string;
+  duration?: string;
+  executionResult?: {
+    success: boolean;
+    data?: any;
+    error?: string;
+  };
+  onSlackLogin?: () => void;
+  onSlackDisconnect?: () => void;
+}
+
+export interface AutomationSlackNodeProps {
+  data: AutomationSlackNodeData;
+  selected?: boolean;
+}
+
+// ========================
+// Operation Configuration
+// ========================
+
+const OPERATION_CONFIG: Record<
+  SlackOperationType,
+  {
+    icon: React.ElementType;
+    label: string;
+    color: string;
+    description: string;
+  }
+> = {
+  'send-message': {
+    icon: SendIcon,
+    label: 'Send Message',
+    color: '#4A154B',
+    description: 'Send a message to a channel',
+  },
+  'post-to-channel': {
+    icon: ForumIcon,
+    label: 'Post to Channel',
+    color: '#36C5F0',
+    description: 'Post a message to a specific channel',
+  },
+  'send-dm': {
+    icon: ChatIcon,
+    label: 'Send DM',
+    color: '#2EB67D',
+    description: 'Send a direct message to a user',
+  },
+  'update-message': {
+    icon: SendIcon,
+    label: 'Update Message',
+    color: '#ECB22E',
+    description: 'Update an existing message',
+  },
+  'upload-file': {
+    icon: SendIcon,
+    label: 'Upload File',
+    color: '#E01E5A',
+    description: 'Upload a file to Slack',
+  },
+  'create-channel': {
+    icon: ForumIcon,
+    label: 'Create Channel',
+    color: '#4A154B',
+    description: 'Create a new channel',
+  },
+  'invite-users': {
+    icon: NotificationsIcon,
+    label: 'Invite Users',
+    color: '#36C5F0',
+    description: 'Invite users to a channel',
+  },
+};
+
+// ========================
+// Helper Functions
+// ========================
+
+const isTokenExpired = (expiresAt?: number): boolean => {
+  if (!expiresAt) return false; // Slack tokens don't always expire
+  return Date.now() > expiresAt;
+};
+
+const getTimeUntilExpiry = (expiresAt?: number): string => {
+  if (!expiresAt) return 'No expiry';
+  const diff = expiresAt - Date.now();
+  if (diff <= 0) return 'Expired';
+  const minutes = Math.floor(diff / 60000);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h ${minutes % 60}m`;
+};
+
+// ========================
+// Main Component
+// ========================
+
+export const AutomationSlackNode: React.FC<AutomationSlackNodeProps> = ({
+  data,
+  selected,
+}) => {
+  const { highlightText } = useSearch();
+  const [isJsonOpen, setIsJsonOpen] = useState(false);
+  const rootRef = useRef<any>(null);
+  const portalRef = useRef<HTMLDivElement | null>(null);
+  const nodeId = useNodeId();
+  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+  const enableJson = useDiagram((state) => state.enableNodeJsonPopover ?? true);
+
+  // Get operation configuration
+  const operationType = data.operationType || data.formData?.operationType || 'send-message';
+  const operationConfig = OPERATION_CONFIG[operationType] || OPERATION_CONFIG['send-message'];
+  const OperationIcon = operationConfig.icon;
+
+  // Auth state
+  const isAuthenticated = data.slackAuth?.isAuthenticated || !!data.parameters?.slackAccessToken;
+  const isAuthLoading = data.slackAuth?.isLoading || false;
+  const teamName = data.slackAuth?.teamName || data.parameters?.slackTeamName;
+  const userName = data.slackAuth?.userName || data.parameters?.slackUserName;
+  const tokenExpired = isTokenExpired(data.parameters?.slackTokenExpiresAt);
+
+  // Execution state
+  const status = data.status || 'Ready';
+  const executionProgress = status === 'Running' ? 50 : 0;
+
+  // Status configuration - using centralized status colors
+  const statusConfig = getStatusColor(status, status === 'authenticated' ? 'authenticated' : 'ready');
+
+  // Handle JSON view
+  const handleJsonClick = () => {
+    if (nodeId) setSelectedNode(nodeId);
+    if (!enableJson) return;
+    setIsJsonOpen(!isJsonOpen);
+  };
+
+  const handleClose = () => {
+    setIsJsonOpen(false);
+    if (rootRef.current) {
+      rootRef.current.unmount();
+      rootRef.current = null;
+    }
+    if (portalRef.current) {
+      document.body.removeChild(portalRef.current);
+      portalRef.current = null;
+    }
+  };
+
+  // Click outside handler
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (isJsonOpen && !(event.target as Element).closest('#automation-json-popover')) {
+        handleClose();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isJsonOpen]);
+
+  // JSON popover portal
+  useEffect(() => {
+    if (isJsonOpen) {
+      const portalRoot = document.createElement('div');
+      document.body.appendChild(portalRoot);
+      portalRef.current = portalRoot;
+
+      const root = createRoot(portalRoot);
+      rootRef.current = root;
+
+      root.render(
+        <Card
+          id="automation-json-popover"
+          sx={{
+            position: 'fixed',
+            top: 0,
+            right: 0,
+            zIndex: 9999,
+            width: '400px',
+            height: '100vh',
+            overflow: 'auto',
+            bgcolor: '#242424',
+            color: '#fff',
+            border: '1px solid #333',
+          }}
+        >
+          <Box
+            sx={{
+              p: 2,
+              borderBottom: '1px solid #333',
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+              Slack Configuration
+            </Typography>
+            <IconButton size="small" onClick={handleClose} sx={{ color: '#fff' }}>
+              <RiCloseLine />
+            </IconButton>
+          </Box>
+          <Box sx={{ p: 2 }}>
+            <ReactJson
+              src={data}
+              theme="monokai"
+              collapsed={1}
+              displayDataTypes={false}
+              enableClipboard={false}
+              style={{
+                backgroundColor: 'transparent',
+                fontSize: '12px',
+              }}
+            />
+          </Box>
+        </Card>
+      );
+    }
+    return () => {
+      if (rootRef.current) {
+        rootRef.current.unmount();
+        rootRef.current = null;
+      }
+      if (portalRef.current && portalRef.current.parentNode) {
+        document.body.removeChild(portalRef.current);
+        portalRef.current = null;
+      }
+    };
+  }, [isJsonOpen, data]);
+
+  // Render status badge
+  const renderStatusBadge = () => (
+    <Chip
+      size="small"
+      label={
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+          {(status === 'Completed' || status === 'success') && <CheckCircleIcon sx={{ fontSize: 12 }} />}
+          {(status === 'Failed' || status === 'error') && <ErrorIcon sx={{ fontSize: 12 }} />}
+          <span>{statusConfig.label}</span>
+        </Box>
+      }
+      sx={{
+        height: 20,
+        fontSize: '10px',
+        fontWeight: 600,
+        color: statusConfig.color,
+        bgcolor: statusConfig.bgColor,
+        border: `1px solid ${statusConfig.color}20`,
+        '& .MuiChip-label': { px: 1 },
+      }}
+    />
+  );
+
+  // Render Slack Auth Button
+  const renderSlackAuthButton = () => {
+    if (isAuthenticated && !tokenExpired) {
+      return (
+        <Button
+          onClick={data.onSlackDisconnect}
+          disabled={isAuthLoading}
+          fullWidth
+          sx={{
+            backgroundColor: '#2EB67D',
+            borderRadius: '8px',
+            padding: '8px 12px',
+            gap: '8px',
+            color: '#FFFFFF',
+            textTransform: 'none',
+            fontSize: '13px',
+            fontWeight: 500,
+            '&:hover': {
+              backgroundColor: '#1e8e5e',
+            },
+          }}
+        >
+          <SiSlack size={18} />
+          {teamName ? `${teamName}${userName ? ` • ${userName}` : ''}` : 'Connected'}
+        </Button>
+      );
+    }
+
+    return (
+      <Button
+        onClick={data.onSlackLogin}
+        disabled={isAuthLoading}
+        fullWidth
+        sx={{
+          backgroundColor: '#171C29',
+          border: '1px solid #FFFFFF1A',
+          borderRadius: '8px',
+          padding: '8px 12px',
+          gap: '8px',
+          color: '#B2BCD8',
+          textTransform: 'none',
+          fontSize: '13px',
+          fontWeight: 400,
+          '&:hover': {
+            backgroundColor: '#1e293b',
+            borderColor: '#4A154B',
+          },
+          '&:disabled': {
+            opacity: 0.6,
+          },
+        }}
+      >
+        {isAuthLoading ? (
+          <>
+            <CircularProgress size={16} sx={{ color: '#B2BCD8' }} />
+            Connecting...
+          </>
+        ) : (
+          <>
+            <SiSlack size={18} />
+            Connect Slack
+          </>
+        )}
+      </Button>
+    );
+  };
+
+  // ========================
+  // Render
+  // ========================
+  return (
+    <Box
+      sx={{
+        bgcolor: '#1E1E2E',
+        borderRadius: 2,
+        border: selected ? '2px solid rgba(59, 130, 246, 0.5)' : '1px solid #374151',
+        minWidth: 280,
+        maxWidth: 320,
+        overflow: 'hidden',
+        boxShadow: selected ? '0 0 0 2px rgba(59, 130, 246, 0.5)' : '0 4px 8px rgba(0, 0, 0, 0.3)',
+        transition: 'all 0.2s ease',
+        ...(status === 'Running' && {
+          animation: 'pulse-glow 2s ease-in-out infinite',
+          '@keyframes pulse-glow': {
+            '0%, 100%': {
+              boxShadow: '0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2)',
+              borderColor: 'rgba(59, 130, 246, 0.6)',
+            },
+            '50%': {
+              boxShadow: '0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.3)',
+              borderColor: 'rgba(59, 130, 246, 0.9)',
+            },
+          },
+        }),
+      }}
+      onClick={() => setSelectedNode(nodeId || '')}
+    >
+      {/* Input Handle */}
+      <Handle
+        type="target"
+        position={Position.Left}
+        style={{
+          background: operationConfig.color,
+          width: 10,
+          height: 10,
+          border: '2px solid #1E1E2E',
+        }}
+      />
+
+      {/* 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>
+
+      {/* Header */}
+      <Box
+        sx={{
+          bgcolor: "rgba(67, 93, 132, 0.1)",
+          borderBottom: `1px solid rgba(67, 93, 132, 0.2)`,
+          px: 2,
+          py: 1.5,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+          <Box
+            sx={{
+              width: '32px',
+              height: '32px',
+              minWidth: '32px',
+              backgroundColor: '#1E3A8A',
+              borderRadius: '50%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+            }}
+          >
+            <OperationIcon sx={{ fontSize: 18, color: '#fff' }} />
+          </Box>
+          <Box>
+            <Typography
+              variant="subtitle2"
+              sx={{ color: '#fff', fontWeight: 600, fontSize: 13 }}
+            >
+              {highlightText(data.label || operationConfig.label)}
+            </Typography>
+          </Box>
+        </Box>
+        {renderStatusBadge()}
+      </Box>
+
+      {/* Content */}
+      <Box sx={{ px: 2, py: 1.5 }}>
+        {/* Slack Auth Button */}
+        <Box sx={{ mb: 1.5 }}>
+          {renderSlackAuthButton()}
+          {!isAuthenticated && (
+            <Typography
+              variant="caption"
+              sx={{
+                color: '#6B7280',
+                fontSize: 10,
+                display: 'block',
+                textAlign: 'center',
+                mt: 0.5,
+              }}
+            >
+              Click to authenticate with Slack
+            </Typography>
+          )}
+        </Box>
+
+        {/* Progress Bar (when running) */}
+        {status === 'Running' && (
+          <Box sx={{ mb: 1.5 }}>
+            <LinearProgress
+              variant="determinate"
+              value={executionProgress}
+              sx={{
+                height: 4,
+                borderRadius: 2,
+                bgcolor: 'rgba(59, 130, 246, 0.1)',
+                '& .MuiLinearProgress-bar': {
+                  bgcolor: operationConfig.color,
+                },
+              }}
+            />
+          </Box>
+        )}
+
+        {/* Token Expiry Info */}
+        {isAuthenticated && data.parameters?.slackTokenExpiresAt && (
+          <Box sx={{ mb: 1.5 }}>
+            <Tooltip title={`Token expires in ${getTimeUntilExpiry(data.parameters.slackTokenExpiresAt)}`}>
+              <Chip
+                size="small"
+                label={getTimeUntilExpiry(data.parameters.slackTokenExpiresAt)}
+                sx={{
+                  height: 18,
+                  fontSize: '9px',
+                  backgroundColor: tokenExpired ? '#EF4444' : '#2EB67D',
+                  color: '#FFFFFF',
+                  fontWeight: 500,
+                }}
+              />
+            </Tooltip>
+          </Box>
+        )}
+
+        {/* Operation-specific Parameters Display */}
+        <Box sx={{ mb: 1.5 }}>
+          {operationType === 'send-message' && data.parameters?.channel && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
+              Channel: #{data.parameters.channel}
+            </Typography>
+          )}
+          {operationType === 'post-to-channel' && data.parameters?.channel && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
+              Channel: #{data.parameters.channel}
+            </Typography>
+          )}
+          {operationType === 'send-dm' && data.parameters?.userName && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
+              User: @{data.parameters.userName}
+            </Typography>
+          )}
+          {operationType === 'create-channel' && data.parameters?.channelName && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
+              Channel: #{data.parameters.channelName}
+            </Typography>
+          )}
+          {data.parameters?.message && (
+            <Typography 
+              variant="caption" 
+              sx={{ 
+                color: '#9CA3AF', 
+                fontSize: 10,
+                display: 'block',
+                mt: 0.5,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              Message: {data.parameters.message}
+            </Typography>
+          )}
+        </Box>
+
+        {/* Execution Result */}
+        {data.executionResult && (
+          <Box
+            sx={{
+              bgcolor: data.executionResult.success
+                ? 'rgba(16, 185, 129, 0.1)'
+                : 'rgba(239, 68, 68, 0.1)',
+              borderRadius: 1,
+              p: 1,
+              mb: 1.5,
+              border: `1px solid ${
+                data.executionResult.success
+                  ? 'rgba(16, 185, 129, 0.3)'
+                  : 'rgba(239, 68, 68, 0.3)'
+              }`,
+            }}
+          >
+            <Typography
+              variant="caption"
+              sx={{
+                color: data.executionResult.success ? '#10B981' : '#EF4444',
+                fontSize: 10,
+              }}
+            >
+              {data.executionResult.success
+                ? '✓ Operation completed'
+                : `✗ ${data.executionResult.error || 'Operation failed'}`}
+            </Typography>
+          </Box>
+        )}
+
+        {/* Last Run Info */}
+        {data.lastRun && (
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.5,
+              justifyContent: 'center',
+            }}
+          >
+            <AccessTimeIcon sx={{ fontSize: 10, color: '#6B7280' }} />
+            <Typography variant="caption" sx={{ color: '#6B7280', fontSize: 9 }}>
+              Last run: {data.lastRun}
+              {data.duration && ` · ${data.duration}`}
+            </Typography>
+          </Box>
+        )}
+      </Box>
+
+      {/* Node Action Buttons */}
+      <NodeActionButtons selected={selected} />
+
+      {/* Output Handle */}
+      <Handle
+        type="source"
+        position={Position.Right}
+        style={{
+          background: operationConfig.color,
+          width: 10,
+          height: 10,
+          border: '2px solid #1E1E2E',
+        }}
+      />
+    </Box>
+  );
+};
+
+export default AutomationSlackNode;
+
+