@flowuent-org/diagramming-core 1.2.3 → 1.2.5

package/apps/diagramming/src/AutomationDiagramData.ts

@@ -534,20 +534,23 @@ export const automationDefaultNodes = [
     position: { x: 100, y: 450 },
     data: {
       label: 'Create Report',
-      description: 'Google Docs document එකක් create කරන්න',
+      description: 'Create a Google Docs document',
       serviceType: 'docs',
       status: 'idle',
+      isFirstGoogleNode: true, // Only first Google node shows Connect button
       parameters: {
         documentTitle: 'Automation Report',
         operation: 'create',
         content: 'Report content will be generated here...',
       },
       googleAuth: {
-        clientId: '', // Will be set from environment
+        clientId: '',
         scopes: [
           'https://www.googleapis.com/auth/documents',
           'https://www.googleapis.com/auth/drive',
         ],
+        isAuthenticated: false,
+        isLoading: false,
       },
       formData: {
         nodeId: 'google-docs-node',
@@ -566,9 +569,10 @@ export const automationDefaultNodes = [
     position: { x: 450, y: 450 },
     data: {
       label: 'Send Email',
-      description: 'Gmail හරහා email එකක් send කරන්න',
+      description: 'Send email via Gmail',
       serviceType: 'gmail',
       status: 'idle',
+      isFirstGoogleNode: false, // Not first, no Connect button
       parameters: {
         to: ['recipient@example.com'],
         subject: 'Automation Report',
@@ -580,6 +584,8 @@ export const automationDefaultNodes = [
           'https://www.googleapis.com/auth/gmail.send',
           'https://www.googleapis.com/auth/gmail.compose',
         ],
+        isAuthenticated: false,
+        isLoading: false,
       },
       formData: {
         nodeId: 'gmail-node',
@@ -598,9 +604,10 @@ export const automationDefaultNodes = [
     position: { x: 800, y: 450 },
     data: {
       label: 'Create Meeting',
-      description: 'Google Meet link එකක් create කරන්න',
+      description: 'Create a Google Meet link',
       serviceType: 'meet',
       status: 'idle',
+      isFirstGoogleNode: false, // Not first, no Connect button
       parameters: {
         meetingTitle: 'Project Discussion',
         attendees: ['team@example.com'],
@@ -608,6 +615,8 @@ export const automationDefaultNodes = [
       googleAuth: {
         clientId: '',
         scopes: ['https://www.googleapis.com/auth/meetings.space.created'],
+        isAuthenticated: false,
+        isLoading: false,
       },
       formData: {
         nodeId: 'google-meet-node',
@@ -620,68 +629,6 @@ export const automationDefaultNodes = [
     height: 200,
     measured: { width: 300, height: 200 },
   },
-  {
-    id: 'google-slides-node',
-    type: 'AutomationGoogleSlidesNode',
-    position: { x: 100, y: 700 },
-    data: {
-      label: 'Create Presentation',
-      description: 'Google Slides presentation එකක් create කරන්න',
-      serviceType: 'slides',
-      status: 'idle',
-      parameters: {
-        presentationTitle: 'Monthly Report',
-        slideContent: 'Slide content here...',
-      },
-      googleAuth: {
-        clientId: '',
-        scopes: [
-          'https://www.googleapis.com/auth/presentations',
-          'https://www.googleapis.com/auth/drive',
-        ],
-      },
-      formData: {
-        nodeId: 'google-slides-node',
-        title: 'Create Presentation',
-        type: 'navigation',
-        serviceType: 'slides',
-      },
-    },
-    width: 300,
-    height: 200,
-    measured: { width: 300, height: 200 },
-  },
-  {
-    id: 'google-calendar-node',
-    type: 'AutomationGoogleCalendarNode',
-    position: { x: 450, y: 700 },
-    data: {
-      label: 'Create Event',
-      description: 'Google Calendar event එකක් create කරන්න',
-      serviceType: 'calendar',
-      status: 'idle',
-      parameters: {
-        calendarId: 'primary',
-        eventTitle: 'Team Meeting',
-        eventDescription: 'Weekly sync up',
-        startTime: new Date().toISOString(),
-        endTime: new Date(Date.now() + 3600000).toISOString(),
-      },
-      googleAuth: {
-        clientId: '',
-        scopes: ['https://www.googleapis.com/auth/calendar'],
-      },
-      formData: {
-        nodeId: 'google-calendar-node',
-        title: 'Create Event',
-        type: 'navigation',
-        serviceType: 'calendar',
-      },
-    },
-    width: 300,
-    height: 200,
-    measured: { width: 300, height: 200 },
-  },
 ];
 
 // Default edges for the automation diagram
@@ -810,7 +757,7 @@ export const automationDefaultEdges = [
     sourceHandle: 'right',
     targetHandle: 'left',
     data: {
-      label: 'Schedule Meet',
+      label: 'Schedule Meeting',
       type: 'flow',
     },
     style: {
@@ -822,23 +769,4 @@ export const automationDefaultEdges = [
       color: '#EA4335',
     },
   },
-  {
-    id: 'edge-slides-to-calendar',
-    source: 'google-slides-node',
-    target: 'google-calendar-node',
-    sourceHandle: 'right',
-    targetHandle: 'left',
-    data: {
-      label: 'Add to Calendar',
-      type: 'flow',
-    },
-    style: {
-      stroke: '#FBBC04',
-      strokeWidth: 2,
-    },
-    markerEnd: {
-      type: MarkerType.ArrowClosed,
-      color: '#FBBC04',
-    },
-  },
 ];

package/package.json

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

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

@@ -66,11 +66,17 @@ export interface AutomationGoogleServicesNodeData {
   status?: NodeStatus;
   iconName?: string;
 
+  // Flag to indicate if this is the first Google node (show auth button)
+  isFirstGoogleNode?: boolean;
+
   // Google Auth config
   googleAuth?: {
     clientId?: string;
     scopes?: string[];
     tokens?: GoogleTokenData;
+    isAuthenticated?: boolean;
+    isLoading?: boolean;
+    userEmail?: string;
   };
 
   // Service-specific parameters
@@ -131,10 +137,9 @@ export interface AutomationGoogleServicesNodeData {
     executionTime?: number;
   };
 
-  // Callbacks
-  onExecute?: (tokens: GoogleTokenData) => Promise<any>;
-  onAuthSuccess?: (tokens: GoogleTokenData) => void;
-  onAuthError?: (error: Error) => void;
+  // Callbacks - passed from parent workflow
+  onGoogleLogin?: () => void;
+  onGoogleDisconnect?: () => void;
 }
 
 export interface AutomationGoogleServicesNodeProps {
@@ -164,7 +169,7 @@ const SERVICE_CONFIG: Record<
       'https://www.googleapis.com/auth/documents',
       'https://www.googleapis.com/auth/drive',
     ],
-    description: 'Document එකක් create/edit කරන්න',
+    description: 'Create or edit a document',
   },
   slides: {
     icon: SlidesIcon,
@@ -174,14 +179,14 @@ const SERVICE_CONFIG: Record<
       'https://www.googleapis.com/auth/presentations',
       'https://www.googleapis.com/auth/drive',
     ],
-    description: 'Presentation එකක් create/edit කරන්න',
+    description: 'Create or edit a presentation',
   },
   meet: {
     icon: MeetIcon,
     label: 'Google Meet',
     color: '#34A853',
     scopes: ['https://www.googleapis.com/auth/meetings.space.created'],
-    description: 'Meeting එකක් create කරන්න',
+    description: 'Create a meeting link',
   },
   gmail: {
     icon: GmailIcon,
@@ -191,21 +196,21 @@ const SERVICE_CONFIG: Record<
       'https://www.googleapis.com/auth/gmail.send',
       'https://www.googleapis.com/auth/gmail.compose',
     ],
-    description: 'Email එකක් send කරන්න',
+    description: 'Send an email',
   },
   sheets: {
     icon: SheetsIcon,
     label: 'Google Sheets',
     color: '#0F9D58',
     scopes: ['https://www.googleapis.com/auth/spreadsheets'],
-    description: 'Spreadsheet එකක් read/write කරන්න',
+    description: 'Read or write spreadsheet data',
   },
   calendar: {
     icon: CalendarIcon,
     label: 'Google Calendar',
     color: '#4285F4',
     scopes: ['https://www.googleapis.com/auth/calendar'],
-    description: 'Calendar event එකක් create කරන්න',
+    description: 'Create a calendar event',
   },
 };
 
@@ -222,7 +227,7 @@ const isTokenExpired = (expiresAt?: number): boolean => {
 const getTimeUntilExpiry = (expiresAt?: number): string => {
   if (!expiresAt) return 'N/A';
   const remaining = expiresAt - Date.now();
-  if (remaining <= 0) return 'කල් ඉකුත් වී ඇත';
+  if (remaining <= 0) return 'Expired';
   const minutes = Math.floor(remaining / 60000);
   if (minutes < 60) return `${minutes} min`;
   const hours = Math.floor(minutes / 60);
@@ -247,203 +252,23 @@ export const AutomationGoogleServicesNode: React.FC<
   // State
   // ========================
   const [status, setStatus] = useState<NodeStatus>(data.status || 'idle');
-  const [tokens, setTokens] = useState<GoogleTokenData | null>(null);
   const [isExecuting, setIsExecuting] = useState(false);
   const [executionProgress, setExecutionProgress] = useState(0);
   const [error, setError] = useState<string | null>(null);
   const [result, setResult] = useState<any>(null);
 
-  const googleClientRef = useRef<any>(null);
   const serviceType = data.serviceType || 'docs';
   const serviceConfig = SERVICE_CONFIG[serviceType];
   const ServiceIcon = serviceConfig.icon;
 
-  // ========================
-  // Initialize tokens from data
-  // ========================
-  useEffect(() => {
-    if (data.parameters?.googleAccessToken) {
-      const savedTokens: GoogleTokenData = {
-        accessToken: data.parameters.googleAccessToken,
-        expiresAt: data.parameters.googleTokenExpiresAt || 0,
-        email: data.parameters.googleUserEmail,
-      };
-
-      if (!isTokenExpired(savedTokens.expiresAt)) {
-        setTokens(savedTokens);
-        setStatus('authenticated');
-      } else {
-        setStatus('idle');
-      }
-    }
-  }, [data.parameters?.googleAccessToken]);
-
-  // ========================
-  // Google OAuth Login
-  // ========================
-  const handleGoogleLogin = useCallback(async () => {
-    setStatus('authenticating');
-    setError(null);
-
-    try {
-      // Load Google Identity Services if not loaded
-      if (!(window as any).google?.accounts?.oauth2) {
-        await new Promise<void>((resolve, reject) => {
-          const script = document.createElement('script');
-          script.src = 'https://accounts.google.com/gsi/client';
-          script.async = true;
-          script.defer = true;
-          script.onload = () => resolve();
-          script.onerror = () => reject(new Error('Failed to load Google Identity Services'));
-          document.head.appendChild(script);
-        });
-      }
-
-      // Initialize OAuth client
-      const clientId = data.googleAuth?.clientId || process.env.REACT_APP_GOOGLE_CLIENT_ID;
-      
-      if (!clientId) {
-        throw new Error('Google Client ID not configured');
-      }
-
-      const tokenClient = (window as any).google.accounts.oauth2.initTokenClient({
-        client_id: clientId,
-        scope: serviceConfig.scopes.join(' '),
-        callback: (response: any) => {
-          if (response.error) {
-            setError(response.error_description || 'Authentication failed');
-            setStatus('error');
-            data.onAuthError?.(new Error(response.error_description));
-            return;
-          }
-
-          const newTokens: GoogleTokenData = {
-            accessToken: response.access_token,
-            expiresAt: Date.now() + response.expires_in * 1000,
-            scope: response.scope,
-          };
-
-          // Get user email
-          fetch('https://www.googleapis.com/oauth2/v2/userinfo', {
-            headers: { Authorization: `Bearer ${response.access_token}` },
-          })
-            .then((res) => res.json())
-            .then((userInfo) => {
-              newTokens.email = userInfo.email;
-              setTokens(newTokens);
-              setStatus('authenticated');
-              data.onAuthSuccess?.(newTokens);
-
-              // Save tokens to node data
-              updateNodeData({
-                parameters: {
-                  ...data.parameters,
-                  useUserAccount: true,
-                  googleAccessToken: newTokens.accessToken,
-                  googleTokenExpiresAt: newTokens.expiresAt,
-                  googleUserEmail: newTokens.email,
-                },
-              });
-            })
-            .catch(() => {
-              setTokens(newTokens);
-              setStatus('authenticated');
-              data.onAuthSuccess?.(newTokens);
-            });
-        },
-      });
-
-      googleClientRef.current = tokenClient;
-      tokenClient.requestAccessToken();
-    } catch (err: any) {
-      setError(err.message || 'Authentication failed');
-      setStatus('error');
-      data.onAuthError?.(err);
-    }
-  }, [data, serviceConfig.scopes]);
+  // Check if authenticated from data
+  const isAuthenticated = data.googleAuth?.isAuthenticated || 
+    (data.parameters?.googleAccessToken && !isTokenExpired(data.parameters?.googleTokenExpiresAt));
+  const isAuthLoading = data.googleAuth?.isLoading || false;
+  const userEmail = data.googleAuth?.userEmail || data.parameters?.googleUserEmail;
 
-  // ========================
-  // Disconnect Google Account
-  // ========================
-  const handleDisconnect = useCallback(() => {
-    setTokens(null);
-    setStatus('idle');
-    setResult(null);
-    setError(null);
-
-    // Clear tokens from node data
-    updateNodeData({
-      parameters: {
-        ...data.parameters,
-        useUserAccount: false,
-        googleAccessToken: undefined,
-        googleTokenExpiresAt: undefined,
-        googleUserEmail: undefined,
-      },
-    });
-  }, [data.parameters]);
-
-  // ========================
-  // Execute Node
-  // ========================
-  const handleExecute = useCallback(async () => {
-    // Check if authenticated
-    if (!tokens || isTokenExpired(tokens.expiresAt)) {
-      // Need to authenticate first
-      handleGoogleLogin();
-      return;
-    }
-
-    setIsExecuting(true);
-    setStatus('running');
-    setExecutionProgress(0);
-    setError(null);
-
-    try {
-      // Simulate progress
-      const progressInterval = setInterval(() => {
-        setExecutionProgress((prev) => Math.min(prev + 10, 90));
-      }, 200);
-
-      // Execute the actual operation
-      let executionResult: any;
-
-      if (data.onExecute) {
-        executionResult = await data.onExecute(tokens);
-      } else {
-        // Default execution based on service type
-        executionResult = await executeGoogleService(serviceType, tokens, data.parameters);
-      }
-
-      clearInterval(progressInterval);
-      setExecutionProgress(100);
-      setResult(executionResult);
-      setStatus('completed');
-
-      // Update node data with result
-      updateNodeData({
-        executionResult: {
-          success: true,
-          data: executionResult,
-          timestamp: new Date().toISOString(),
-        },
-      });
-    } catch (err: any) {
-      setError(err.message || 'Execution failed');
-      setStatus('error');
-
-      // Update node data with error
-      updateNodeData({
-        executionResult: {
-          success: false,
-          error: err.message,
-          timestamp: new Date().toISOString(),
-        },
-      });
-    } finally {
-      setIsExecuting(false);
-    }
-  }, [tokens, data, serviceType, handleGoogleLogin]);
+  // Show Google Auth button only on first Google node
+  const showGoogleAuthButton = data.isFirstGoogleNode === true;
 
   // ========================
   // Update Node Data
@@ -470,157 +295,6 @@ export const AutomationGoogleServicesNode: React.FC<
     [nodeId, nodes, setNodes]
   );
 
-  // ========================
-  // Execute Google Service
-  // ========================
-  const executeGoogleService = async (
-    service: GoogleServiceType,
-    tokenData: GoogleTokenData,
-    params?: any
-  ): Promise<any> => {
-    const headers = {
-      Authorization: `Bearer ${tokenData.accessToken}`,
-      'Content-Type': 'application/json',
-    };
-
-    switch (service) {
-      case 'docs': {
-        // Create or update Google Doc
-        const docTitle = params?.documentTitle || 'New Document';
-        const response = await fetch(
-          'https://docs.googleapis.com/v1/documents',
-          {
-            method: 'POST',
-            headers,
-            body: JSON.stringify({ title: docTitle }),
-          }
-        );
-        return response.json();
-      }
-
-      case 'slides': {
-        // Create Google Slides presentation
-        const slideTitle = params?.presentationTitle || 'New Presentation';
-        const response = await fetch(
-          'https://slides.googleapis.com/v1/presentations',
-          {
-            method: 'POST',
-            headers,
-            body: JSON.stringify({ title: slideTitle }),
-          }
-        );
-        return response.json();
-      }
-
-      case 'meet': {
-        // Create Google Meet link
-        const response = await fetch(
-          'https://meet.googleapis.com/v2/spaces',
-          {
-            method: 'POST',
-            headers,
-            body: JSON.stringify({
-              config: {
-                accessType: 'OPEN',
-                entryPointAccess: 'ALL',
-              },
-            }),
-          }
-        );
-        return response.json();
-      }
-
-      case 'gmail': {
-        // Send Gmail
-        const to = params?.to?.join(', ') || '';
-        const subject = params?.subject || 'No Subject';
-        const body = params?.body || '';
-
-        const email = [
-          `To: ${to}`,
-          `Subject: ${subject}`,
-          '',
-          body,
-        ].join('\n');
-
-        const encodedEmail = btoa(unescape(encodeURIComponent(email)))
-          .replace(/\+/g, '-')
-          .replace(/\//g, '_')
-          .replace(/=+$/, '');
-
-        const response = await fetch(
-          'https://gmail.googleapis.com/gmail/v1/users/me/messages/send',
-          {
-            method: 'POST',
-            headers,
-            body: JSON.stringify({ raw: encodedEmail }),
-          }
-        );
-        return response.json();
-      }
-
-      case 'sheets': {
-        // Read/Write Google Sheets
-        const spreadsheetId = params?.spreadsheetId;
-        const range = params?.range || 'Sheet1!A1:Z100';
-
-        if (!spreadsheetId) {
-          // Create new spreadsheet
-          const response = await fetch(
-            'https://sheets.googleapis.com/v4/spreadsheets',
-            {
-              method: 'POST',
-              headers,
-              body: JSON.stringify({
-                properties: {
-                  title: params?.sheetName || 'New Spreadsheet',
-                },
-              }),
-            }
-          );
-          return response.json();
-        }
-
-        // Read existing spreadsheet
-        const response = await fetch(
-          `https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${range}`,
-          { headers }
-        );
-        return response.json();
-      }
-
-      case 'calendar': {
-        // Create calendar event
-        const calendarId = params?.calendarId || 'primary';
-        const response = await fetch(
-          `https://www.googleapis.com/calendar/v3/calendars/${calendarId}/events`,
-          {
-            method: 'POST',
-            headers,
-            body: JSON.stringify({
-              summary: params?.eventTitle || 'New Event',
-              description: params?.eventDescription,
-              start: {
-                dateTime: params?.startTime || new Date().toISOString(),
-                timeZone: 'UTC',
-              },
-              end: {
-                dateTime:
-                  params?.endTime ||
-                  new Date(Date.now() + 3600000).toISOString(),
-                timeZone: 'UTC',
-              },
-            }),
-          }
-        );
-        return response.json();
-      }
-
-      default:
-        throw new Error(`Unsupported service: ${service}`);
-    }
-  };
-
   // ========================
   // Render Status Badge
   // ========================
@@ -632,41 +306,42 @@ export const AutomationGoogleServicesNode: React.FC<
       idle: {
         color: '#6B7280',
         bgColor: 'rgba(107, 114, 128, 0.1)',
-        label: 'සූදානම්',
+        label: 'Ready',
       },
       authenticating: {
         color: '#F59E0B',
         bgColor: 'rgba(245, 158, 11, 0.1)',
-        label: 'සත්‍යාපනය...',
+        label: 'Authenticating...',
         icon: <CircularProgress size={12} color="inherit" />,
       },
       authenticated: {
         color: '#10B981',
         bgColor: 'rgba(16, 185, 129, 0.1)',
-        label: 'සම්බන්ධයි',
+        label: 'Connected',
         icon: <CheckCircleIcon sx={{ fontSize: 12 }} />,
       },
       running: {
         color: '#3B82F6',
         bgColor: 'rgba(59, 130, 246, 0.1)',
-        label: 'ක්‍රියාත්මක...',
+        label: 'Running...',
         icon: <CircularProgress size={12} color="inherit" />,
       },
       completed: {
         color: '#10B981',
         bgColor: 'rgba(16, 185, 129, 0.1)',
-        label: 'සාර්ථකයි',
+        label: 'Success',
         icon: <CheckCircleIcon sx={{ fontSize: 12 }} />,
       },
       error: {
         color: '#EF4444',
         bgColor: 'rgba(239, 68, 68, 0.1)',
-        label: 'දෝෂය',
+        label: 'Error',
         icon: <ErrorIcon sx={{ fontSize: 12 }} />,
       },
     };
 
-    const config = statusConfig[status];
+    const currentStatus = isAuthenticated ? 'authenticated' : status;
+    const config = statusConfig[currentStatus];
 
     return (
       <Chip
@@ -690,6 +365,81 @@ export const AutomationGoogleServicesNode: React.FC<
     );
   };
 
+  // ========================
+  // Render Google Auth Button
+  // ========================
+  const renderGoogleAuthButton = () => {
+    if (!showGoogleAuthButton) return null;
+
+    if (isAuthenticated) {
+      return (
+        <Button
+          onClick={data.onGoogleDisconnect}
+          disabled={isAuthLoading}
+          fullWidth
+          sx={{
+            backgroundColor: '#10B981',
+            border: '1px solid #10B981',
+            borderRadius: '8px',
+            padding: '8px 12px',
+            gap: '8px',
+            color: '#FFFFFF',
+            textTransform: 'none',
+            fontSize: '13px',
+            fontWeight: 500,
+            '&:hover': {
+              backgroundColor: '#059669',
+            },
+            '&:disabled': {
+              opacity: 0.6,
+            },
+          }}
+        >
+          <FcGoogle size={18} />
+          {userEmail ? userEmail.split('@')[0] : 'Connected'}
+        </Button>
+      );
+    }
+
+    return (
+      <Button
+        onClick={data.onGoogleLogin}
+        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: '#3B82F6',
+          },
+          '&:disabled': {
+            opacity: 0.6,
+          },
+        }}
+      >
+        {isAuthLoading ? (
+          <>
+            <CircularProgress size={16} sx={{ color: '#B2BCD8' }} />
+            Connecting...
+          </>
+        ) : (
+          <>
+            <FcGoogle size={18} />
+            Connect Google
+          </>
+        )}
+      </Button>
+    );
+  };
+
   // ========================
   // Render
   // ========================
@@ -757,7 +507,7 @@ export const AutomationGoogleServicesNode: React.FC<
               variant="caption"
               sx={{ color: '#9CA3AF', fontSize: 10 }}
             >
-              {serviceConfig.description}
+              {data.description || serviceConfig.description}
             </Typography>
           </Box>
         </Box>
@@ -766,92 +516,63 @@ export const AutomationGoogleServicesNode: React.FC<
 
       {/* Content */}
       <Box sx={{ px: 2, py: 1.5 }}>
-        {/* Authentication Status */}
-        <Box
-          sx={{
-            bgcolor: tokens ? 'rgba(16, 185, 129, 0.1)' : 'rgba(107, 114, 128, 0.1)',
-            borderRadius: 1,
-            p: 1.5,
-            mb: 1.5,
-          }}
-        >
-          {tokens ? (
-            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                <FcGoogle size={20} />
-                <Box>
-                  <Typography
-                    variant="caption"
-                    sx={{ color: '#10B981', display: 'block', fontWeight: 600 }}
-                  >
-                    සම්බන්ධයි
-                  </Typography>
+        {/* Google Auth Button - Only on first Google node */}
+        {showGoogleAuthButton && (
+          <Box sx={{ mb: 1.5 }}>
+            {renderGoogleAuthButton()}
+            {!isAuthenticated && (
+              <Typography
+                variant="caption"
+                sx={{
+                  color: '#6B7280',
+                  fontSize: 10,
+                  display: 'block',
+                  textAlign: 'center',
+                  mt: 0.5,
+                }}
+              >
+                Click to authenticate with Google
+              </Typography>
+            )}
+          </Box>
+        )}
+
+        {/* Authentication Status for non-first nodes */}
+        {!showGoogleAuthButton && (
+          <Box
+            sx={{
+              bgcolor: isAuthenticated ? 'rgba(16, 185, 129, 0.1)' : 'rgba(107, 114, 128, 0.1)',
+              borderRadius: 1,
+              p: 1.5,
+              mb: 1.5,
+            }}
+          >
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <FcGoogle size={18} style={{ opacity: isAuthenticated ? 1 : 0.5 }} />
+              <Box>
+                <Typography
+                  variant="caption"
+                  sx={{ 
+                    color: isAuthenticated ? '#10B981' : '#6B7280', 
+                    display: 'block', 
+                    fontWeight: 600,
+                    fontSize: 11,
+                  }}
+                >
+                  {isAuthenticated ? 'Google Connected' : 'Google Not Connected'}
+                </Typography>
+                {isAuthenticated && userEmail && (
                   <Typography
                     variant="caption"
                     sx={{ color: '#9CA3AF', fontSize: 10 }}
                   >
-                    {tokens.email || 'Google Account'}
+                    {userEmail}
                   </Typography>
-                </Box>
+                )}
               </Box>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                <Tooltip title={`කල් ඉකුත් වන්නේ: ${getTimeUntilExpiry(tokens.expiresAt)}`}>
-                  <Typography
-                    variant="caption"
-                    sx={{
-                      color: isTokenExpired(tokens.expiresAt) ? '#EF4444' : '#9CA3AF',
-                      fontSize: 10,
-                    }}
-                  >
-                    {getTimeUntilExpiry(tokens.expiresAt)}
-                  </Typography>
-                </Tooltip>
-                <IconButton
-                  size="small"
-                  onClick={handleDisconnect}
-                  sx={{ color: '#EF4444', p: 0.5 }}
-                >
-                  <LinkOffIcon sx={{ fontSize: 14 }} />
-                </IconButton>
-              </Box>
-            </Box>
-          ) : (
-            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                <FcGoogle size={20} style={{ opacity: 0.5 }} />
-                <Typography variant="caption" sx={{ color: '#6B7280' }}>
-                  Google ගිණුම සම්බන්ධ කර නැත
-                </Typography>
-              </Box>
-              <Button
-                size="small"
-                variant="outlined"
-                onClick={handleGoogleLogin}
-                disabled={status === 'authenticating'}
-                startIcon={
-                  status === 'authenticating' ? (
-                    <CircularProgress size={12} color="inherit" />
-                  ) : (
-                    <LinkIcon sx={{ fontSize: 14 }} />
-                  )
-                }
-                sx={{
-                  fontSize: 10,
-                  py: 0.25,
-                  px: 1,
-                  borderColor: '#374151',
-                  color: '#9CA3AF',
-                  '&:hover': {
-                    borderColor: serviceConfig.color,
-                    color: serviceConfig.color,
-                  },
-                }}
-              >
-                සම්බන්ධ කරන්න
-              </Button>
             </Box>
-          )}
-        </Box>
+          </Box>
+        )}
 
         {/* Progress Bar (when running) */}
         {status === 'running' && (
@@ -872,7 +593,7 @@ export const AutomationGoogleServicesNode: React.FC<
               variant="caption"
               sx={{ color: '#9CA3AF', fontSize: 10, mt: 0.5, display: 'block' }}
             >
-              ක්‍රියාත්මක වෙමින්... {executionProgress}%
+              Executing... {executionProgress}%
             </Typography>
           </Box>
         )}
@@ -912,7 +633,7 @@ export const AutomationGoogleServicesNode: React.FC<
               variant="caption"
               sx={{ color: '#10B981', fontSize: 10, display: 'block', fontWeight: 600 }}
             >
-              ✓ සාර්ථකව ක්‍රියාත්මක විය
+              ✓ Executed successfully
             </Typography>
             {result.documentId && (
               <Typography
@@ -941,58 +662,55 @@ export const AutomationGoogleServicesNode: React.FC<
           </Box>
         )}
 
-        {/* Execute Button */}
-        <Button
-          fullWidth
-          variant="contained"
-          onClick={handleExecute}
-          disabled={isExecuting}
-          startIcon={
-            isExecuting ? (
-              <CircularProgress size={16} color="inherit" />
-            ) : tokens ? (
-              <PlayIcon />
-            ) : (
-              <FcGoogle size={16} />
-            )
-          }
+        {/* Service-specific details */}
+        <Box
           sx={{
-            bgcolor: tokens ? serviceConfig.color : '#374151',
-            color: '#fff',
-            fontWeight: 600,
-            fontSize: 12,
-            py: 1,
-            '&:hover': {
-              bgcolor: tokens ? `${serviceConfig.color}CC` : '#4B5563',
-            },
-            '&:disabled': {
-              bgcolor: '#374151',
-              color: '#6B7280',
-            },
+            bgcolor: 'rgba(255, 255, 255, 0.03)',
+            borderRadius: 1,
+            p: 1,
           }}
         >
-          {isExecuting
-            ? 'ක්‍රියාත්මක වෙමින්...'
-            : tokens
-            ? 'ක්‍රියාත්මක කරන්න'
-            : 'Google සමඟ ක්‍රියාත්මක කරන්න'}
-        </Button>
-
-        {/* Hint Text */}
-        {!tokens && (
-          <Typography
-            variant="caption"
-            sx={{
-              color: '#6B7280',
-              fontSize: 9,
-              display: 'block',
-              textAlign: 'center',
-              mt: 1,
-            }}
-          >
-            බොත්තම ඔබන්න → Google සත්‍යාපනය → ක්‍රියාත්මක වීම
-          </Typography>
-        )}
+          {serviceType === 'docs' && data.parameters?.documentTitle && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
+              Document: {data.parameters.documentTitle}
+            </Typography>
+          )}
+          {serviceType === 'gmail' && data.parameters?.subject && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
+              Subject: {data.parameters.subject}
+            </Typography>
+          )}
+          {serviceType === 'meet' && data.parameters?.meetingTitle && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
+              Meeting: {data.parameters.meetingTitle}
+            </Typography>
+          )}
+          {serviceType === 'slides' && data.parameters?.presentationTitle && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
+              Presentation: {data.parameters.presentationTitle}
+            </Typography>
+          )}
+          {serviceType === 'calendar' && data.parameters?.eventTitle && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
+              Event: {data.parameters.eventTitle}
+            </Typography>
+          )}
+          {serviceType === 'sheets' && data.parameters?.sheetName && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
+              Sheet: {data.parameters.sheetName}
+            </Typography>
+          )}
+          {!data.parameters?.documentTitle && 
+           !data.parameters?.subject && 
+           !data.parameters?.meetingTitle &&
+           !data.parameters?.presentationTitle &&
+           !data.parameters?.eventTitle &&
+           !data.parameters?.sheetName && (
+            <Typography variant="caption" sx={{ color: '#6B7280', fontSize: 10, fontStyle: 'italic' }}>
+              Configure node parameters
+            </Typography>
+          )}
+        </Box>
       </Box>
 
       {/* Node Action Buttons */}

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

@@ -277,6 +277,9 @@ export interface AutomationGoogleServicesNodeForm extends AutomationNodeFormData
   type: 'start' | 'api' | 'formatting' | 'sheets' | 'end' | 'navigation';
   serviceType: GoogleServiceType;
   
+  // Flag to show Google auth button only on first node
+  isFirstGoogleNode?: boolean;
+  
   // Google Auth Configuration
   googleAuth?: {
     clientId?: string;
@@ -284,6 +287,8 @@ export interface AutomationGoogleServicesNodeForm extends AutomationNodeFormData
     accessToken?: string;
     expiresAt?: number;
     userEmail?: string;
+    isAuthenticated?: boolean;
+    isLoading?: boolean;
   };
   
   // Service-specific Parameters
@@ -325,6 +330,10 @@ export interface AutomationGoogleServicesNodeForm extends AutomationNodeFormData
   
   // Output
   outputVariable?: string;
+  
+  // Callbacks
+  onGoogleLogin?: () => void;
+  onGoogleDisconnect?: () => void;
 }
 
 export type AutomationNodeForm =

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

@@ -29,7 +29,7 @@ export default {
   AutomationNoteNode,
   AutomationNavigationNode,
   AutomationAISuggestionNode,
-  // Google Services Nodes (Docs, Slides, Meet, Gmail, Sheets, Calendar)
+  // Google Services Nodes
   AutomationGoogleServicesNode,
   AutomationGoogleDocsNode: AutomationGoogleServicesNode,
   AutomationGoogleSlidesNode: AutomationGoogleServicesNode,