@flowuent-org/diagramming-core 1.4.4 → 1.4.5

package/apps/diagramming/src/AutomationDiagramData.ts

@@ -459,6 +459,125 @@ export const automationDefaultNodes = [
     measured: { width: 300, height: 200 },
   },
   // =====================================
+  // Gmail Integration Node
+  // =====================================
+  {
+    id: 'gmail-node',
+    type: 'AutomationGmailNode',
+    position: { x: 1500, y: 700 },
+    data: {
+      label: 'Send Gmail',
+      description: 'Send an email via Gmail',
+      headerText: 'Gmail integration',
+      serviceType: 'gmail',
+      operationType: 'send-email',
+      status: 'Need to Config',
+      parameters: {
+        to: 'team@example.com',
+        subject: 'Workflow Update',
+        message: 'Your automation workflow completed successfully.',
+      },
+      formData: {
+        nodeId: 'gmail-node',
+        title: 'Send Gmail',
+        type: 'gmail',
+        operationType: 'send-email',
+      },
+      lastRun: 'Never',
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
+  // =====================================
+  // Google Docs Integration Node
+  // =====================================
+  {
+    id: 'google-docs-node',
+    type: 'AutomationGoogleDocsNode',
+    position: { x: 1850, y: 700 },
+    data: {
+      label: 'Create Google Doc',
+      description: 'Create or update a Google Document',
+      headerText: 'Google Docs integration',
+      serviceType: 'docs',
+      operationType: 'create-document',
+      status: 'Need to Config',
+      parameters: {
+        documentTitle: 'Workflow Report',
+      },
+      formData: {
+        nodeId: 'google-docs-node',
+        title: 'Create Google Doc',
+        type: 'google-docs',
+        operationType: 'create-document',
+      },
+      lastRun: 'Never',
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
+  // =====================================
+  // Google Slides Integration Node
+  // =====================================
+  {
+    id: 'google-slides-node',
+    type: 'AutomationGoogleSlidesNode',
+    position: { x: 2200, y: 700 },
+    data: {
+      label: 'Create Presentation',
+      description: 'Create or update a Google Slides deck',
+      headerText: 'Google Slides integration',
+      serviceType: 'slides',
+      operationType: 'create-presentation',
+      status: 'Need to Config',
+      parameters: {
+        presentationTitle: 'Workflow Summary Deck',
+      },
+      formData: {
+        nodeId: 'google-slides-node',
+        title: 'Create Presentation',
+        type: 'google-slides',
+        operationType: 'create-presentation',
+      },
+      lastRun: 'Never',
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
+  // =====================================
+  // Google Meet Integration Node
+  // =====================================
+  {
+    id: 'google-meet-node',
+    type: 'AutomationGoogleMeetNode',
+    position: { x: 2550, y: 700 },
+    data: {
+      label: 'Schedule Meet',
+      description: 'Create or schedule a Google Meet session',
+      headerText: 'Google Meet integration',
+      serviceType: 'meet',
+      operationType: 'schedule-meeting',
+      status: 'Need to Config',
+      parameters: {
+        meetingTitle: 'Workflow Review Meeting',
+        meetingLink: '',
+      },
+      formData: {
+        nodeId: 'google-meet-node',
+        title: 'Schedule Meet',
+        type: 'google-meet',
+        operationType: 'schedule-meeting',
+      },
+      lastRun: 'Never',
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
+  // =====================================
   // Interaction Node
   // =====================================
   {
@@ -848,6 +967,85 @@ export const automationDefaultEdges = [
     },
   },
   // =====================================
+  // Google Nodes Edges
+  // =====================================
+  {
+    id: 'edge-telegram-to-gmail',
+    source: 'telegram-node',
+    target: 'gmail-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: 'Email Report',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#EA4335',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#EA4335',
+    },
+  },
+  {
+    id: 'edge-gmail-to-docs',
+    source: 'gmail-node',
+    target: 'google-docs-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: 'Create Doc',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#4285F4',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#4285F4',
+    },
+  },
+  {
+    id: 'edge-docs-to-slides',
+    source: 'google-docs-node',
+    target: 'google-slides-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: 'Build Deck',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#FBBC04',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#FBBC04',
+    },
+  },
+  {
+    id: 'edge-slides-to-meet',
+    source: 'google-slides-node',
+    target: 'google-meet-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: 'Schedule Meet',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#00897B',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#00897B',
+    },
+  },
+  // =====================================
   // Monitoring Node Edge
   // =====================================
   {

package/apps/diagramming/src/main.tsx

@@ -453,9 +453,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
             onChange={onChange}
             availableFunctions={[]}
             id={8}
-          >
-            {/* {automationChildren} */}
-          </DiagrammingPage>
+          />
         }
       />
     </Routes>

package/apps/workflow/locales/en/translation.json

@@ -649,9 +649,13 @@
     "formattingNode": {
       "headerDescription": "AI-powered content analysis",
       "aiReasoning": "AI Reasoning",
-      "aiReasoningDefault": "Analyzed the selected headline for key components and promises",
       "formattedData": "Formatted Data"
     },
+    "googleAuth": {
+      "connectGoogle": "Connect Google",
+      "connecting": "Connecting...",
+      "signOut": "Sign out"
+    },
     "endNode": {
       "headerDescription": "Workflow completion and results display",
       "finalOutput": "Final Output"

package/package.json

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

package/packages/diagrams/locales/en/translation.json

@@ -649,9 +649,13 @@
     "formattingNode": {
       "headerDescription": "AI-powered content analysis",
       "aiReasoning": "AI Reasoning",
-      "aiReasoningDefault": "Analyzed the selected headline for key components and promises",
       "formattedData": "Formatted Data"
     },
+    "googleAuth": {
+      "connectGoogle": "Connect Google",
+      "connecting": "Connecting...",
+      "signOut": "Sign out"
+    },
     "endNode": {
       "headerDescription": "Workflow completion and results display",
       "finalOutput": "Final Output"

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

@@ -0,0 +1,680 @@
+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 {
+  AccessTime as AccessTimeIcon,
+  CheckCircle as CheckCircleIcon,
+  Error as ErrorIcon,
+} from '@mui/icons-material';
+import { RiCloseLine } from 'react-icons/ri';
+import ReactJson from 'react-json-view';
+import { useTranslation } from 'react-i18next';
+import { useDiagram } from '../../contexts/DiagramProvider';
+import { useSearch } from '../../contexts/SearchContext';
+import { NodeActionButtons } from './NodeActionButtons';
+import { getStatusColor } from './statusColors';
+import { AutomationNodeHeaderSection } from './AutomationNodeHeader';
+import {
+  GOOGLE_SERVICE_CONFIGS,
+  GoogleServiceConfig,
+  GoogleServiceType,
+} from './googleServiceNodeConfig';
+
+const getGoogleUserEmail = (data: AutomationGoogleServiceNodeData): string | undefined => {
+  const formData = data.formData || {};
+  const parameters = data.parameters || {};
+
+  return (
+    (formData.googleUserEmail as string | undefined) ||
+    parameters.googleUserEmail ||
+    (formData.googleEmail as string | undefined) ||
+    parameters.googleEmail ||
+    data.googleAuth?.email
+  );
+};
+
+const isGoogleAuthenticated = (data: AutomationGoogleServiceNodeData): boolean => {
+  const formData = data.formData || {};
+  const parameters = data.parameters || {};
+
+  return !!(
+    formData.googleAccessToken ||
+    parameters.googleAccessToken ||
+    getGoogleUserEmail(data)
+  );
+};
+
+export interface AutomationGoogleServiceNodeData {
+  label: string;
+  description: string;
+  headerText?: string;
+  serviceType: GoogleServiceType;
+  operationType?: string;
+  status:
+    | 'Ready'
+    | 'Running'
+    | 'Completed'
+    | 'Failed'
+    | 'Need to Config'
+    | 'authenticated'
+    | 'idle';
+  parameters?: {
+    useUserAccount?: boolean;
+    googleAccessToken?: string;
+    googleRefreshToken?: string;
+    googleTokenExpiresAt?: number;
+    googleUserEmail?: string;
+    googleEmail?: string;
+    googleUserName?: string;
+    googleUserId?: string;
+    to?: string;
+    subject?: string;
+    message?: string;
+    documentId?: string;
+    documentTitle?: string;
+    presentationId?: string;
+    presentationTitle?: string;
+    meetingTitle?: string;
+    meetingLink?: string;
+    [key: string]: unknown;
+  };
+  googleAuth?: {
+    isLoading?: boolean;
+    email?: string;
+    userName?: string;
+  };
+  formData?: {
+    nodeId?: string;
+    title?: string;
+    type?: string;
+    operationType?: string;
+    [key: string]: unknown;
+  };
+  lastRun?: string;
+  duration?: string;
+  executionResult?: {
+    success: boolean;
+    data?: unknown;
+    error?: string;
+  };
+  onGoogleConnect?: () => void;
+  onGoogleDisconnect?: () => void;
+}
+
+export interface AutomationGoogleServiceNodeProps {
+  data: AutomationGoogleServiceNodeData;
+  selected?: boolean;
+  config: GoogleServiceConfig;
+}
+
+const isTokenExpired = (expiresAt?: number): boolean => {
+  if (!expiresAt) return false;
+  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`;
+};
+
+export const AutomationGoogleServiceNode: React.FC<AutomationGoogleServiceNodeProps> = ({
+  data,
+  selected,
+  config,
+}) => {
+  const { t } = useTranslation();
+  const { highlightText } = useSearch();
+  const [isJsonOpen, setIsJsonOpen] = useState(false);
+  const rootRef = useRef<ReturnType<typeof createRoot> | null>(null);
+  const portalRef = useRef<HTMLDivElement | null>(null);
+  const nodeId = useNodeId();
+  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+
+  const operationType =
+    data.operationType || data.formData?.operationType || config.defaultOperation;
+  const operationConfig =
+    config.operations[operationType] || config.operations[config.defaultOperation];
+  const OperationIcon = operationConfig.icon;
+  const BrandIcon = config.BrandIcon;
+
+  const isAuthenticated = isGoogleAuthenticated(data);
+  const isAuthLoading = data.googleAuth?.isLoading || false;
+  const userEmail = getGoogleUserEmail(data);
+  const userName = data.googleAuth?.userName || data.parameters?.googleUserName;
+  const tokenExpiresAt =
+    data.parameters?.googleTokenExpiresAt ||
+    (data.formData?.googleTokenExpiresAt as number | undefined);
+  const tokenExpired = isTokenExpired(tokenExpiresAt);
+
+  const status = data.status || 'Ready';
+  const executionProgress = status === 'Running' ? 50 : 0;
+  const statusConfig = getStatusColor(
+    status,
+    status === 'authenticated' ? 'authenticated' : 'ready',
+  );
+
+  const handleClose = () => {
+    setIsJsonOpen(false);
+    if (rootRef.current) {
+      rootRef.current.unmount();
+      rootRef.current = null;
+    }
+    if (portalRef.current) {
+      document.body.removeChild(portalRef.current);
+      portalRef.current = null;
+    }
+  };
+
+  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]);
+
+  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 }}>
+              {config.serviceLabel} 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;
+      }
+    };
+  }, [config.serviceLabel, data, isJsonOpen]);
+
+  const renderStatusBadge = () => (
+    <Chip
+      size="small"
+      label={
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+          {status === 'Completed' && (
+            <CheckCircleIcon sx={{ fontSize: 12 }} />
+          )}
+          {status === 'Failed' && <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 },
+      }}
+    />
+  );
+
+  const renderGoogleAuthButton = () => {
+    if (isAuthenticated && !tokenExpired) {
+      return (
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+          <Button
+            onClick={(event) => event.stopPropagation()}
+            disabled={isAuthLoading}
+            fullWidth
+            sx={{
+              backgroundColor: config.brandColor,
+              borderRadius: '8px',
+              padding: '8px 12px',
+              gap: '8px',
+              color: '#FFFFFF',
+              textTransform: 'none',
+              fontSize: '13px',
+              fontWeight: 500,
+              justifyContent: 'flex-start',
+              '&:hover': {
+                backgroundColor: config.iconBgColor,
+              },
+            }}
+          >
+            <BrandIcon size={18} />
+            {userEmail || userName || 'Connected'}
+          </Button>
+          <Button
+            onClick={(event) => {
+              event.stopPropagation();
+              data.onGoogleDisconnect?.();
+            }}
+            disabled={isAuthLoading || !data.onGoogleDisconnect}
+            fullWidth
+            sx={{
+              backgroundColor: 'transparent',
+              border: '1px solid #FFFFFF1A',
+              borderRadius: '8px',
+              padding: '6px 12px',
+              color: '#FCA5A5',
+              textTransform: 'none',
+              fontSize: '12px',
+              fontWeight: 500,
+              '&:hover': {
+                backgroundColor: 'rgba(239, 68, 68, 0.12)',
+              },
+            }}
+          >
+            {t('automation.googleAuth.signOut')}
+          </Button>
+        </Box>
+      );
+    }
+
+    return (
+      <Button
+        onClick={(event) => {
+          event.stopPropagation();
+          data.onGoogleConnect?.();
+        }}
+        disabled={isAuthLoading || !data.onGoogleConnect}
+        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: config.brandColor,
+          },
+          '&:disabled': {
+            opacity: 0.6,
+          },
+        }}
+      >
+        {isAuthLoading ? (
+          <>
+            <CircularProgress size={16} sx={{ color: '#B2BCD8' }} />
+            {t('automation.googleAuth.connecting')}
+          </>
+        ) : (
+          <>
+            <BrandIcon size={18} />
+            {t('automation.googleAuth.connectGoogle')}
+          </>
+        )}
+      </Button>
+    );
+  };
+
+  const renderParameterSummary = () => {
+    if (config.serviceType === 'gmail') {
+      return (
+        <>
+          {data.parameters?.to && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10, display: 'block' }}>
+              To: {data.parameters.to}
+            </Typography>
+          )}
+          {data.parameters?.subject && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10, display: 'block' }}>
+              Subject: {data.parameters.subject}
+            </Typography>
+          )}
+        </>
+      );
+    }
+
+    if (config.serviceType === 'docs') {
+      return (
+        <>
+          {data.parameters?.documentTitle && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10, display: 'block' }}>
+              Document: {data.parameters.documentTitle}
+            </Typography>
+          )}
+          {data.parameters?.documentId && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10, display: 'block' }}>
+              ID: {data.parameters.documentId}
+            </Typography>
+          )}
+        </>
+      );
+    }
+
+    if (config.serviceType === 'slides') {
+      return (
+        <>
+          {data.parameters?.presentationTitle && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10, display: 'block' }}>
+              Presentation: {data.parameters.presentationTitle}
+            </Typography>
+          )}
+          {data.parameters?.presentationId && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10, display: 'block' }}>
+              ID: {data.parameters.presentationId}
+            </Typography>
+          )}
+        </>
+      );
+    }
+
+    return (
+      <>
+        {data.parameters?.meetingTitle && (
+          <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10, display: 'block' }}>
+            Meeting: {data.parameters.meetingTitle}
+          </Typography>
+        )}
+        {data.parameters?.meetingLink && (
+          <Typography
+            variant="caption"
+            sx={{
+              color: '#9CA3AF',
+              fontSize: 10,
+              display: 'block',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            Link: {data.parameters.meetingLink}
+          </Typography>
+        )}
+      </>
+    );
+  };
+
+  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 || '')}
+    >
+      <Handle
+        type="target"
+        position={Position.Left}
+        style={{
+          background: operationConfig.color,
+          width: 10,
+          height: 10,
+          border: '2px solid #1E1E2E',
+        }}
+      />
+
+      <AutomationNodeHeaderSection data={data} highlightText={highlightText} />
+
+      <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: config.iconBgColor,
+              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>
+
+      <Box sx={{ px: 2, py: 1.5 }}>
+        <Box sx={{ mb: 1.5 }}>
+          {renderGoogleAuthButton()}
+        </Box>
+
+        {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>
+        )}
+
+        {isAuthenticated && tokenExpiresAt && (
+          <Box sx={{ mb: 1.5 }}>
+            <Tooltip
+              title={`Token expires in ${getTimeUntilExpiry(tokenExpiresAt)}`}
+            >
+              <Chip
+                size="small"
+                label={getTimeUntilExpiry(tokenExpiresAt)}
+                sx={{
+                  height: 18,
+                  fontSize: '9px',
+                  backgroundColor: tokenExpired ? '#EF4444' : config.brandColor,
+                  color: '#FFFFFF',
+                  fontWeight: 500,
+                }}
+              />
+            </Tooltip>
+          </Box>
+        )}
+
+        <Box sx={{ mb: 1.5 }}>{renderParameterSummary()}</Box>
+
+        {data.parameters?.message && (
+          <Typography
+            variant="caption"
+            sx={{
+              color: '#9CA3AF',
+              fontSize: 10,
+              display: 'block',
+              mb: 1.5,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            Message: {data.parameters.message}
+          </Typography>
+        )}
+
+        {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>
+        )}
+
+        {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>
+
+      <NodeActionButtons selected={selected} />
+
+      <Handle
+        type="source"
+        position={Position.Right}
+        style={{
+          background: operationConfig.color,
+          width: 10,
+          height: 10,
+          border: '2px solid #1E1E2E',
+        }}
+      />
+    </Box>
+  );
+};
+
+const createGoogleServiceNode = (serviceType: GoogleServiceType) => {
+  const config = GOOGLE_SERVICE_CONFIGS[serviceType];
+
+  const GoogleServiceNode: React.FC<Omit<AutomationGoogleServiceNodeProps, 'config'>> = (
+    props,
+  ) => <AutomationGoogleServiceNode {...props} config={config} />;
+
+  GoogleServiceNode.displayName = `Automation${config.serviceLabel.replace(/\s+/g, '')}Node`;
+  return GoogleServiceNode;
+};
+
+export const AutomationGmailNode = createGoogleServiceNode('gmail');
+export const AutomationGoogleDocsNode = createGoogleServiceNode('docs');
+export const AutomationGoogleSlidesNode = createGoogleServiceNode('slides');
+export const AutomationGoogleMeetNode = createGoogleServiceNode('meet');
+
+export default AutomationGoogleServiceNode;

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

@@ -0,0 +1,158 @@
+import React from 'react';
+import {
+  Send as SendIcon,
+  Email as EmailIcon,
+  Search as SearchIcon,
+  Description as DescriptionIcon,
+  Edit as EditIcon,
+  Slideshow as SlideshowIcon,
+  VideoCall as VideoCallIcon,
+  Event as EventIcon,
+  Link as LinkIcon,
+} from '@mui/icons-material';
+import { SiGmail, SiGoogledocs, SiGoogleslides, SiGooglemeet } from 'react-icons/si';
+
+export type GoogleServiceType = 'gmail' | 'docs' | 'slides' | 'meet';
+
+export interface GoogleOperationConfig {
+  icon: React.ElementType;
+  label: string;
+  color: string;
+  description: string;
+}
+
+export interface GoogleServiceConfig {
+  serviceType: GoogleServiceType;
+  serviceLabel: string;
+  brandColor: string;
+  iconBgColor: string;
+  BrandIcon: React.ComponentType<{ size?: number }>;
+  scopes: string[];
+  defaultOperation: string;
+  operations: Record<string, GoogleOperationConfig>;
+}
+
+export const GOOGLE_SERVICE_CONFIGS: Record<GoogleServiceType, GoogleServiceConfig> = {
+  gmail: {
+    serviceType: 'gmail',
+    serviceLabel: 'Gmail',
+    brandColor: '#EA4335',
+    iconBgColor: '#B31412',
+    BrandIcon: SiGmail,
+    scopes: [
+      'https://www.googleapis.com/auth/gmail.send',
+      'https://www.googleapis.com/auth/gmail.readonly',
+    ],
+    defaultOperation: 'send-email',
+    operations: {
+      'send-email': {
+        icon: SendIcon,
+        label: 'Send Email',
+        color: '#EA4335',
+        description: 'Send an email via Gmail',
+      },
+      'read-email': {
+        icon: EmailIcon,
+        label: 'Read Email',
+        color: '#4285F4',
+        description: 'Read messages from inbox',
+      },
+      'search-emails': {
+        icon: SearchIcon,
+        label: 'Search Emails',
+        color: '#34A853',
+        description: 'Search emails by query',
+      },
+    },
+  },
+  docs: {
+    serviceType: 'docs',
+    serviceLabel: 'Google Docs',
+    brandColor: '#4285F4',
+    iconBgColor: '#1967D2',
+    BrandIcon: SiGoogledocs,
+    scopes: ['https://www.googleapis.com/auth/documents'],
+    defaultOperation: 'create-document',
+    operations: {
+      'create-document': {
+        icon: DescriptionIcon,
+        label: 'Create Document',
+        color: '#4285F4',
+        description: 'Create a new Google Doc',
+      },
+      'read-document': {
+        icon: DescriptionIcon,
+        label: 'Read Document',
+        color: '#34A853',
+        description: 'Read content from a document',
+      },
+      'update-document': {
+        icon: EditIcon,
+        label: 'Update Document',
+        color: '#FBBC04',
+        description: 'Update document content',
+      },
+    },
+  },
+  slides: {
+    serviceType: 'slides',
+    serviceLabel: 'Google Slides',
+    brandColor: '#FBBC04',
+    iconBgColor: '#F29900',
+    BrandIcon: SiGoogleslides,
+    scopes: ['https://www.googleapis.com/auth/presentations'],
+    defaultOperation: 'create-presentation',
+    operations: {
+      'create-presentation': {
+        icon: SlideshowIcon,
+        label: 'Create Presentation',
+        color: '#FBBC04',
+        description: 'Create a new Google Slides deck',
+      },
+      'read-presentation': {
+        icon: SlideshowIcon,
+        label: 'Read Presentation',
+        color: '#4285F4',
+        description: 'Read slides from a presentation',
+      },
+      'update-slides': {
+        icon: EditIcon,
+        label: 'Update Slides',
+        color: '#EA4335',
+        description: 'Update slide content',
+      },
+    },
+  },
+  meet: {
+    serviceType: 'meet',
+    serviceLabel: 'Google Meet',
+    brandColor: '#00897B',
+    iconBgColor: '#00796B',
+    BrandIcon: SiGooglemeet,
+    scopes: [
+      'https://www.googleapis.com/auth/calendar',
+      'https://www.googleapis.com/auth/calendar.events',
+    ],
+    defaultOperation: 'create-meeting',
+    operations: {
+      'create-meeting': {
+        icon: VideoCallIcon,
+        label: 'Create Meeting',
+        color: '#00897B',
+        description: 'Create an instant Google Meet link',
+      },
+      'schedule-meeting': {
+        icon: EventIcon,
+        label: 'Schedule Meeting',
+        color: '#4285F4',
+        description: 'Schedule a calendar event with Meet',
+      },
+      'get-meeting-link': {
+        icon: LinkIcon,
+        label: 'Get Meeting Link',
+        color: '#34A853',
+        description: 'Retrieve an existing Meet link',
+      },
+    },
+  },
+};

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

@@ -25,6 +25,20 @@ export type {
   AutomationTelegramNodeData,
   AutomationTelegramNodeProps,
 } from './AutomationTelegramNode';
+// Google Integration Nodes
+export {
+  AutomationGmailNode,
+  AutomationGoogleDocsNode,
+  AutomationGoogleSlidesNode,
+  AutomationGoogleMeetNode,
+  AutomationGoogleServiceNode,
+} from './AutomationGoogleServiceNode';
+export type {
+  AutomationGoogleServiceNodeData,
+  AutomationGoogleServiceNodeProps,
+} from './AutomationGoogleServiceNode';
+export type { GoogleServiceType } from './googleServiceNodeConfig';
+export { GOOGLE_SERVICE_CONFIGS } from './googleServiceNodeConfig';
 // Interaction Node
 export { AutomationInteractionNode } from './AutomationInteractionNode';
 export type {

package/packages/diagrams/src/lib/services/GoogleAuthService.ts

@@ -0,0 +1,149 @@
+// Google Identity Services OAuth helper for automation nodes
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const google: any;
+
+export interface GoogleAuthResult {
+  accessToken: string;
+  expiresAt?: number;
+  email?: string;
+  userName?: string;
+  userId?: string;
+  scopes: string[];
+}
+
+export class GoogleAuthService {
+  private gisLoaded = false;
+  private hasRequestedConsent = false;
+  private accessToken: string | null = null;
+  private expiresAt: number | undefined;
+  private requestedScopes = new Set<string>();
+
+  async connect(clientId: string, scopes: string[]): Promise<GoogleAuthResult> {
+    if (typeof window === 'undefined') {
+      throw new Error('Google OAuth is only available in browser environments');
+    }
+
+    await this.ensureGisLoaded();
+    const token = await this.requestAccessToken(clientId, scopes);
+    const userInfo = await this.fetchUserInfo(token);
+
+    return {
+      accessToken: token,
+      expiresAt: this.expiresAt,
+      email: userInfo.email,
+      userName: userInfo.name,
+      userId: userInfo.id,
+      scopes,
+    };
+  }
+
+  disconnect(): void {
+    if (this.accessToken && typeof google !== 'undefined') {
+      try {
+        google.accounts.oauth2.revoke(this.accessToken, () => undefined);
+      } catch {
+        // Ignore revoke failures in demo environments
+      }
+    }
+
+    this.accessToken = null;
+    this.expiresAt = undefined;
+  }
+
+  private async ensureGisLoaded(): Promise<void> {
+    if (this.gisLoaded) return;
+
+    await new Promise<void>((resolve, reject) => {
+      const existing = document.querySelector(
+        'script[src="https://accounts.google.com/gsi/client"]',
+      );
+      if (existing) {
+        this.gisLoaded = true;
+        resolve();
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.src = 'https://accounts.google.com/gsi/client';
+      script.async = true;
+      script.defer = true;
+      script.onload = () => {
+        this.gisLoaded = true;
+        resolve();
+      };
+      script.onerror = () => reject(new Error('Failed to load Google Identity Services'));
+      document.head.appendChild(script);
+    });
+  }
+
+  private async requestAccessToken(
+    clientId: string,
+    scopes: string[],
+    forceConsent = false,
+  ): Promise<string> {
+    await this.ensureGisLoaded();
+
+    const token = await new Promise<string>((resolve, reject) => {
+      try {
+        const tokenClient = google.accounts.oauth2.initTokenClient({
+          client_id: clientId,
+          scope: scopes.join(' '),
+          callback: (response: {
+            access_token?: string;
+            expires_in?: number;
+            error?: string;
+            error_description?: string;
+          }) => {
+            if (response?.access_token) {
+              this.hasRequestedConsent = true;
+              scopes.forEach((scope) => this.requestedScopes.add(scope));
+              if (response.expires_in) {
+                this.expiresAt = Date.now() + response.expires_in * 1000;
+              }
+              resolve(response.access_token);
+              return;
+            }
+
+            const err = response?.error || 'unknown_error';
+            const desc = response?.error_description || 'No description';
+            reject(new Error(`OAuth token error: ${err} - ${desc}`));
+          },
+        });
+
+        tokenClient.requestAccessToken({
+          prompt: forceConsent
+            ? 'consent'
+            : this.hasRequestedConsent
+              ? ''
+              : 'consent',
+        });
+      } catch (error) {
+        reject(error);
+      }
+    });
+
+    this.accessToken = token;
+    return token;
+  }
+
+  private async fetchUserInfo(accessToken: string): Promise<{
+    email?: string;
+    name?: string;
+    id?: string;
+  }> {
+    const response = await fetch('https://www.googleapis.com/oauth2/v2/userinfo', {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    if (!response.ok) {
+      return {};
+    }
+
+    return response.json();
+  }
+}
+
+export const googleAuthService = new GoogleAuthService();

package/packages/diagrams/src/lib/templates/DiagramContent.tsx

@@ -566,9 +566,6 @@ export const DiagramContent: React.FC<DiagramContentProps> = ({
               ref={setNodeRef}
               sx={{ height: '100svh', width: '100svw', position: 'relative' }}
             >
-              {/* Redo Toolbar */}
-             
-                 
               <ReactFlow
                 panOnDrag={isPannable}
                 nodesDraggable={isPannable}

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

@@ -12,6 +12,10 @@ import {
   AutomationNavigationNode,
   AutomationSlackNode,
   AutomationTelegramNode,
+  AutomationGmailNode,
+  AutomationGoogleDocsNode,
+  AutomationGoogleSlidesNode,
+  AutomationGoogleMeetNode,
   AutomationInteractionNode,
   AutomationMonitoringNode,
   AutomationDecisionNode,
@@ -34,6 +38,10 @@ const nodeTypes = {
   AutomationNavigationNode,
   AutomationSlackNode,
   AutomationTelegramNode,
+  AutomationGmailNode,
+  AutomationGoogleDocsNode,
+  AutomationGoogleSlidesNode,
+  AutomationGoogleMeetNode,
   AutomationInteractionNode,
   AutomationMonitoringNode,
   AutomationDecisionNode,