@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,439 +1,439 @@
-import React, { useState, useEffect, useRef } from 'react';
-import {
-    Box,
-    Typography,
-    Button,
-    Card,
-    CardContent,
-    List,
-    ListItem,
-    ListItemText,
-    ListItemIcon,
-    Chip,
-    Divider,
-    IconButton,
-    Collapse,
-    TextField,
-    Paper,
-} from '@mui/material';
-import {
-    PlayArrow as PlayArrowIcon,
-    Stop as StopIcon,
-    ExpandMore as ExpandMoreIcon,
-    ExpandLess as ExpandLessIcon,
-    CheckCircle as CheckCircleIcon,
-    Error as ErrorIcon,
-    Warning as WarningIcon,
-    Info as InfoIcon,
-    AccessTime as AccessTimeIcon,
-} from '@mui/icons-material';
-import { Node, Edge } from '@xyflow/react';
-import { AutomationExecutionEngine, AutomationLog, AutomationResult } from '../../utils/AutomationExecutionEngine';
-import { useTranslation } from 'react-i18next';
-
-interface AutomationExecutionPanelProps {
-    nodes: Node[];
-    edges: Edge[];
-    workflowId: string;
-    onNodeUpdate?: (nodeId: string, updatedData: any) => void;
-}
-
-export const AutomationExecutionPanel: React.FC<AutomationExecutionPanelProps> = ({
-    nodes,
-    edges,
-    workflowId,
-    onNodeUpdate,
-}) => {
-    const { t } = useTranslation();
-    const [isRunning, setIsRunning] = useState(false);
-    const [executionResult, setExecutionResult] = useState<AutomationResult | null>(null);
-    const [logs, setLogs] = useState<AutomationLog[]>([]);
-    // Logs are always visible; no collapse toggle anymore
-    const [expandedPanel, setExpandedPanel] = useState(false); // Main panel expand/collapse
-    const [executionHistory, setExecutionHistory] = useState<AutomationResult[]>([]);
-    const logsScrollRef = useRef<HTMLDivElement | null>(null);
-
-    const getLogIcon = (level: string) => {
-        switch (level) {
-            case 'success':
-                return <CheckCircleIcon sx={{ color: '#10b981', fontSize: '16px' }} />;
-            case 'error':
-                return <ErrorIcon sx={{ color: '#ef4444', fontSize: '16px' }} />;
-            case 'warning':
-                return <WarningIcon sx={{ color: '#f59e0b', fontSize: '16px' }} />;
-            default:
-                return <InfoIcon sx={{ color: '#3b82f6', fontSize: '16px' }} />;
-        }
-    };
-
-    const getLogColor = (level: string) => {
-        switch (level) {
-            case 'success':
-                return '#10b981';
-            case 'error':
-                return '#ef4444';
-            case 'warning':
-                return '#f59e0b';
-            default:
-                return '#3b82f6';
-        }
-    };
-
-    const executeWorkflow = async () => {
-        setIsRunning(true);
-        setLogs([]);
-        setExpandedPanel(true); // Auto-expand when execution starts
-
-        try {
-            const engine = new AutomationExecutionEngine(
-                nodes,
-                edges,
-                onNodeUpdate,
-                (entry) => {
-                    // Stream logs in real time
-                    setLogs((prev) => [...prev, entry]);
-                }
-            );
-            const result = await engine.executeWorkflow();
-
-            setExecutionResult(result);
-            // final logs already streamed; ensure we reflect any engine buffer
-            setLogs(engine.getLogs());
-
-            // Add to execution history
-            setExecutionHistory(prev => [result, ...prev.slice(0, 9)]); // Keep last 10 executions
-
-        } catch (error) {
-            console.error('Workflow execution failed:', error);
-            setExecutionResult({
-                success: false,
-                context: {
-                    runId: `error_${Date.now()}`,
-                    startTime: new Date(),
-                    variables: {},
-                    logs: [],
-                },
-                error: error instanceof Error ? error.message : String(error),
-            });
-        } finally {
-            setIsRunning(false);
-        }
-    };
-
-    const stopExecution = () => {
-        setIsRunning(false);
-        setExecutionResult({
-            success: false,
-            context: {
-                runId: `stopped_${Date.now()}`,
-                startTime: new Date(),
-                variables: {},
-                logs: [],
-            },
-            error: 'Execution stopped by user',
-        });
-    };
-
-    // Logs persist between runs; reset only on explicit new run inside executeWorkflow()
-
-    const formatTimestamp = (timestamp: Date) => {
-        return timestamp.toLocaleTimeString();
-    };
-
-    const formatDuration = (startTime: Date, endTime?: Date) => {
-        const end = endTime || new Date();
-        const duration = end.getTime() - startTime.getTime();
-        return `${duration}ms`;
-    };
-
-    // Auto-scroll logs to bottom when new entries arrive
-    useEffect(() => {
-        if (logsScrollRef.current) {
-            logsScrollRef.current.scrollTop = logsScrollRef.current.scrollHeight;
-        }
-    }, [logs]);
-
-    return (
-        <Box
-            sx={{
-                position: 'fixed',
-                bottom: 0,
-                left: 0,
-                right: 0,
-                height: expandedPanel ? '300px' : '60px', // Collapsible height
-                backgroundColor: '#1f2937',
-                borderTop: '1px solid #374151',
-                zIndex: 1000,
-                display: 'flex',
-                flexDirection: 'column',
-                transition: 'height 0.3s ease-in-out', // Smooth transition
-            }}
-        >
-            {/* Header */}
-            <Box
-                sx={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    p: 2,
-                    borderBottom: '1px solid #374151',
-                }}
-            >
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                    <Typography variant="h6" sx={{ color: 'white', fontWeight: 600 }}>
-                        {t('automation.executionPanel.title')}
-                    </Typography>
-                    <Chip
-                        label={isRunning ? t('automation.executionPanel.running') : t('automation.executionPanel.ready')}
-                        sx={{
-                            backgroundColor: isRunning ? '#3b82f6' : '#10b981',
-                            color: 'white',
-                            fontWeight: 500,
-                        }}
-                    />
-                </Box>
-
-                <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
-                    {!isRunning ? (
-                        <Button
-                            variant="contained"
-                            startIcon={<PlayArrowIcon />}
-                            onClick={executeWorkflow}
-                            sx={{ backgroundColor: '#10b981' }}
-                        >
-                            {t('automation.executionPanel.runWorkflow')}
-                        </Button>
-                    ) : (
-                        <Button
-                            variant="contained"
-                            startIcon={<StopIcon />}
-                            onClick={stopExecution}
-                            sx={{ backgroundColor: '#ef4444' }}
-                        >
-                            {t('automation.executionPanel.stop')}
-                        </Button>
-                    )}
-                    {/* Logs persist; no Clear button */}
-                    <IconButton
-                        onClick={() => setExpandedPanel(!expandedPanel)}
-                        sx={{
-                            color: 'white',
-                            backgroundColor: 'rgba(255, 255, 255, 0.1)',
-                            '&:hover': {
-                                backgroundColor: 'rgba(255, 255, 255, 0.2)',
-                            }
-                        }}
-                    >
-                        {expandedPanel ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-                    </IconButton>
-                </Box>
-            </Box>
-
-            {/* Compact Status (when collapsed) */}
-            {!expandedPanel && (
-                <Box sx={{
-                    px: 2,
-                    py: 1,
-                    borderTop: '1px solid #374151',
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center'
-                }}>
-                    <Typography variant="body2" sx={{ color: '#9ca3af', fontSize: '12px' }}>
-                        {isRunning ? t('automation.executionPanel.executionInProgress') :
-                            executionResult ?
-                                `${t('automation.executionPanel.lastRunSummary')}: ${executionResult.success ? t('automation.common.success') : t('automation.common.failed')} (${formatDuration(executionResult.context.startTime)})` :
-                                t('automation.executionPanel.readyToExecute')
-                        }
-                    </Typography>
-                    {executionResult && (
-                        <Chip
-                            label={executionResult.success ? t('automation.common.success') : t('automation.common.failed')}
-                            size="small"
-                            sx={{
-                                backgroundColor: executionResult.success ? '#10b981' : '#ef4444',
-                                color: 'white',
-                                fontSize: '10px',
-                                height: '20px',
-                            }}
-                        />
-                    )}
-                </Box>
-            )}
-
-            {/* Content */}
-            <Collapse in={expandedPanel} timeout="auto" unmountOnExit>
-                <Box sx={{ flex: 1, overflow: 'hidden', p: 2, display: 'flex', gap: 2 }}>
-                    {/* Left: Always-visible Logs */}
-                    <Box sx={{ width: '50%', minWidth: 320, display: 'flex', flexDirection: 'column' }}>
-                        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
-                            <Typography variant="h6" sx={{ color: 'white' }}>
-                                {t('automation.executionPanel.logsTitle')} ({logs.length})
-                            </Typography>
-                        </Box>
-                        <Paper
-                            sx={{
-                                backgroundColor: '#1f2937',
-                                border: '1px solid #4b5563',
-                                flex: 1,
-                                overflow: 'auto',
-                                maxHeight: '200px',
-                            }}
-                            ref={logsScrollRef}
-                        >
-                            {logs.length === 0 ? (
-                                <Box sx={{ p: 2, textAlign: 'center' }}>
-                                    <Typography variant="body2" sx={{ color: '#9ca3af' }}>
-                                        {t('automation.executionPanel.logsEmpty')}
-                                    </Typography>
-                                </Box>
-                            ) : (
-                                <List dense>
-                                    {logs.map((log, index) => (
-                                        <ListItem key={index} sx={{ py: 0.5 }}>
-                                            <ListItemIcon sx={{ minWidth: '32px' }}>
-                                                {getLogIcon(log.level)}
-                                            </ListItemIcon>
-                                            <ListItemText
-                                                primary={
-                                                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                                                        <Typography
-                                                            variant="body2"
-                                                            sx={{ color: 'white', fontSize: '12px' }}
-                                                        >
-                                                            [{formatTimestamp(log.timestamp)}] {log.nodeType}
-                                                        </Typography>
-                                                        <Chip
-                                                            label={log.level}
-                                                            size="small"
-                                                            sx={{
-                                                                backgroundColor: getLogColor(log.level),
-                                                                color: 'white',
-                                                                fontSize: '10px',
-                                                                height: '16px',
-                                                            }}
-                                                        />
-                                                    </Box>
-                                                }
-                                                secondary={
-                                                    <Typography
-                                                        variant="body2"
-                                                        sx={{ color: '#9ca3af', fontSize: '11px' }}
-                                                    >
-                                                        {log.message}
-                                                    </Typography>
-                                                }
-                                            />
-                                        </ListItem>
-                                    ))}
-                                </List>
-                            )}
-                        </Paper>
-                    </Box>
-
-                    {/* Right: Summary and Errors */}
-                    <Box sx={{ flex: 1, minWidth: 0, overflow: 'auto' }}>
-                        {executionResult && (
-                            <Card sx={{ mb: 2, backgroundColor: '#374151', border: '1px solid #4b5563' }}>
-                                <CardContent>
-                                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
-                                    <Typography variant="h6" sx={{ color: 'white' }}>
-                                        {t('automation.executionPanel.summaryTitle')}
-                                    </Typography>
-                                        <Chip
-                                        label={executionResult.success ? t('automation.common.success') : t('automation.common.failed')}
-                                            sx={{
-                                                backgroundColor: executionResult.success ? '#10b981' : '#ef4444',
-                                                color: 'white',
-                                            }}
-                                        />
-                                    </Box>
-                                    <Box sx={{ display: 'flex', gap: 2, mb: 1 }}>
-                                        <Typography variant="body2" sx={{ color: '#9ca3af' }}>
-                                            {t('automation.executionPanel.runId')}: {executionResult.context.runId}
-                                        </Typography>
-                                        <Typography variant="body2" sx={{ color: '#9ca3af' }}>
-                                            {t('automation.executionPanel.duration')}: {formatDuration(executionResult.context.startTime)}
-                                        </Typography>
-                                    </Box>
-                                    {executionResult.error && (
-                                        <Typography variant="body2" sx={{ color: '#ef4444' }}>
-                                            {t('automation.common.error')}: {executionResult.error}
-                                        </Typography>
-                                    )}
-                                    {executionResult.finalOutput && (
-                                        <Box sx={{ mt: 1 }}>
-                                            <Typography variant="body2" sx={{ color: '#9ca3af', mb: 1 }}>
-                                                {t('automation.executionPanel.finalOutput')}:
-                                            </Typography>
-                                            <Paper
-                                                sx={{
-                                                    p: 1,
-                                                    backgroundColor: '#1f2937',
-                                                    border: '1px solid #4b5563',
-                                                    maxHeight: '100px',
-                                                    overflow: 'auto',
-                                                }}
-                                            >
-                                                <Typography
-                                                    variant="body2"
-                                                    sx={{ color: '#d1d5db', fontFamily: 'monospace', fontSize: '12px' }}
-                                                >
-                                                    {JSON.stringify(executionResult.finalOutput, null, 2)}
-                                                </Typography>
-                                            </Paper>
-                                        </Box>
-                                    )}
-                                </CardContent>
-                            </Card>
-                        )}
-
-                        {executionHistory.length > 0 && (
-                            <Box sx={{ mt: 2 }}>
-                                <Typography variant="h6" sx={{ color: 'white', mb: 1 }}>
-                                    {t('automation.executionPanel.recentExecutions')}
-                                </Typography>
-                                <Box sx={{ display: 'flex', gap: 1, overflow: 'auto' }}>
-                                    {executionHistory.slice(0, 5).map((result, index) => (
-                                        <Card
-                                            key={index}
-                                            sx={{
-                                                minWidth: '200px',
-                                                backgroundColor: '#374151',
-                                                border: '1px solid #4b5563',
-                                                cursor: 'pointer',
-                                                '&:hover': { backgroundColor: '#4b5563' },
-                                            }}
-                                            onClick={() => setExecutionResult(result)}
-                                        >
-                                            <CardContent sx={{ p: 1 }}>
-                                                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
-                                                <Typography variant="body2" sx={{ color: 'white', fontSize: '12px' }}>
-                                                    {t('automation.executionPanel.runNumber')} #{index + 1}
-                                                </Typography>
-                                                    <Chip
-                                                    label={result.success ? t('automation.common.success') : t('automation.common.failed')}
-                                                        size="small"
-                                                        sx={{
-                                                            backgroundColor: result.success ? '#10b981' : '#ef4444',
-                                                            color: 'white',
-                                                            fontSize: '10px',
-                                                            height: '16px',
-                                                        }}
-                                                    />
-                                                </Box>
-                                                <Typography variant="body2" sx={{ color: '#9ca3af', fontSize: '10px' }}>
-                                                    {formatDuration(result.context.startTime)}
-                                                </Typography>
-                                            </CardContent>
-                                        </Card>
-                                    ))}
-                                </Box>
-                            </Box>
-                        )}
-                    </Box>
-                </Box>
-            </Collapse>
-        </Box>
-    );
-};
+import React, { useState, useEffect, useRef } from 'react';
+import {
+    Box,
+    Typography,
+    Button,
+    Card,
+    CardContent,
+    List,
+    ListItem,
+    ListItemText,
+    ListItemIcon,
+    Chip,
+    Divider,
+    IconButton,
+    Collapse,
+    TextField,
+    Paper,
+} from '@mui/material';
+import {
+    PlayArrow as PlayArrowIcon,
+    Stop as StopIcon,
+    ExpandMore as ExpandMoreIcon,
+    ExpandLess as ExpandLessIcon,
+    CheckCircle as CheckCircleIcon,
+    Error as ErrorIcon,
+    Warning as WarningIcon,
+    Info as InfoIcon,
+    AccessTime as AccessTimeIcon,
+} from '@mui/icons-material';
+import { Node, Edge } from '@xyflow/react';
+import { AutomationExecutionEngine, AutomationLog, AutomationResult } from '../../utils/AutomationExecutionEngine';
+import { useTranslation } from 'react-i18next';
+
+interface AutomationExecutionPanelProps {
+    nodes: Node[];
+    edges: Edge[];
+    workflowId: string;
+    onNodeUpdate?: (nodeId: string, updatedData: any) => void;
+}
+
+export const AutomationExecutionPanel: React.FC<AutomationExecutionPanelProps> = ({
+    nodes,
+    edges,
+    workflowId,
+    onNodeUpdate,
+}) => {
+    const { t } = useTranslation();
+    const [isRunning, setIsRunning] = useState(false);
+    const [executionResult, setExecutionResult] = useState<AutomationResult | null>(null);
+    const [logs, setLogs] = useState<AutomationLog[]>([]);
+    // Logs are always visible; no collapse toggle anymore
+    const [expandedPanel, setExpandedPanel] = useState(false); // Main panel expand/collapse
+    const [executionHistory, setExecutionHistory] = useState<AutomationResult[]>([]);
+    const logsScrollRef = useRef<HTMLDivElement | null>(null);
+
+    const getLogIcon = (level: string) => {
+        switch (level) {
+            case 'success':
+                return <CheckCircleIcon sx={{ color: '#10b981', fontSize: '16px' }} />;
+            case 'error':
+                return <ErrorIcon sx={{ color: '#ef4444', fontSize: '16px' }} />;
+            case 'warning':
+                return <WarningIcon sx={{ color: '#f59e0b', fontSize: '16px' }} />;
+            default:
+                return <InfoIcon sx={{ color: '#3b82f6', fontSize: '16px' }} />;
+        }
+    };
+
+    const getLogColor = (level: string) => {
+        switch (level) {
+            case 'success':
+                return '#10b981';
+            case 'error':
+                return '#ef4444';
+            case 'warning':
+                return '#f59e0b';
+            default:
+                return '#3b82f6';
+        }
+    };
+
+    const executeWorkflow = async () => {
+        setIsRunning(true);
+        setLogs([]);
+        setExpandedPanel(true); // Auto-expand when execution starts
+
+        try {
+            const engine = new AutomationExecutionEngine(
+                nodes,
+                edges,
+                onNodeUpdate,
+                (entry) => {
+                    // Stream logs in real time
+                    setLogs((prev) => [...prev, entry]);
+                }
+            );
+            const result = await engine.executeWorkflow();
+
+            setExecutionResult(result);
+            // final logs already streamed; ensure we reflect any engine buffer
+            setLogs(engine.getLogs());
+
+            // Add to execution history
+            setExecutionHistory(prev => [result, ...prev.slice(0, 9)]); // Keep last 10 executions
+
+        } catch (error) {
+            console.error('Workflow execution failed:', error);
+            setExecutionResult({
+                success: false,
+                context: {
+                    runId: `error_${Date.now()}`,
+                    startTime: new Date(),
+                    variables: {},
+                    logs: [],
+                },
+                error: error instanceof Error ? error.message : String(error),
+            });
+        } finally {
+            setIsRunning(false);
+        }
+    };
+
+    const stopExecution = () => {
+        setIsRunning(false);
+        setExecutionResult({
+            success: false,
+            context: {
+                runId: `stopped_${Date.now()}`,
+                startTime: new Date(),
+                variables: {},
+                logs: [],
+            },
+            error: 'Execution stopped by user',
+        });
+    };
+
+    // Logs persist between runs; reset only on explicit new run inside executeWorkflow()
+
+    const formatTimestamp = (timestamp: Date) => {
+        return timestamp.toLocaleTimeString();
+    };
+
+    const formatDuration = (startTime: Date, endTime?: Date) => {
+        const end = endTime || new Date();
+        const duration = end.getTime() - startTime.getTime();
+        return `${duration}ms`;
+    };
+
+    // Auto-scroll logs to bottom when new entries arrive
+    useEffect(() => {
+        if (logsScrollRef.current) {
+            logsScrollRef.current.scrollTop = logsScrollRef.current.scrollHeight;
+        }
+    }, [logs]);
+
+    return (
+        <Box
+            sx={{
+                position: 'fixed',
+                bottom: 0,
+                left: 0,
+                right: 0,
+                height: expandedPanel ? '300px' : '60px', // Collapsible height
+                backgroundColor: '#1f2937',
+                borderTop: '1px solid #374151',
+                zIndex: 1000,
+                display: 'flex',
+                flexDirection: 'column',
+                transition: 'height 0.3s ease-in-out', // Smooth transition
+            }}
+        >
+            {/* Header */}
+            <Box
+                sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    p: 2,
+                    borderBottom: '1px solid #374151',
+                }}
+            >
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                    <Typography variant="h6" sx={{ color: 'white', fontWeight: 600 }}>
+                        {t('automation.executionPanel.title')}
+                    </Typography>
+                    <Chip
+                        label={isRunning ? t('automation.executionPanel.running') : t('automation.executionPanel.ready')}
+                        sx={{
+                            backgroundColor: isRunning ? '#3b82f6' : '#10b981',
+                            color: 'white',
+                            fontWeight: 500,
+                        }}
+                    />
+                </Box>
+
+                <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+                    {!isRunning ? (
+                        <Button
+                            variant="contained"
+                            startIcon={<PlayArrowIcon />}
+                            onClick={executeWorkflow}
+                            sx={{ backgroundColor: '#10b981' }}
+                        >
+                            {t('automation.executionPanel.runWorkflow')}
+                        </Button>
+                    ) : (
+                        <Button
+                            variant="contained"
+                            startIcon={<StopIcon />}
+                            onClick={stopExecution}
+                            sx={{ backgroundColor: '#ef4444' }}
+                        >
+                            {t('automation.executionPanel.stop')}
+                        </Button>
+                    )}
+                    {/* Logs persist; no Clear button */}
+                    <IconButton
+                        onClick={() => setExpandedPanel(!expandedPanel)}
+                        sx={{
+                            color: 'white',
+                            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                            '&:hover': {
+                                backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                            }
+                        }}
+                    >
+                        {expandedPanel ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+                    </IconButton>
+                </Box>
+            </Box>
+
+            {/* Compact Status (when collapsed) */}
+            {!expandedPanel && (
+                <Box sx={{
+                    px: 2,
+                    py: 1,
+                    borderTop: '1px solid #374151',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center'
+                }}>
+                    <Typography variant="body2" sx={{ color: '#9ca3af', fontSize: '12px' }}>
+                        {isRunning ? t('automation.executionPanel.executionInProgress') :
+                            executionResult ?
+                                `${t('automation.executionPanel.lastRunSummary')}: ${executionResult.success ? t('automation.common.success') : t('automation.common.failed')} (${formatDuration(executionResult.context.startTime)})` :
+                                t('automation.executionPanel.readyToExecute')
+                        }
+                    </Typography>
+                    {executionResult && (
+                        <Chip
+                            label={executionResult.success ? t('automation.common.success') : t('automation.common.failed')}
+                            size="small"
+                            sx={{
+                                backgroundColor: executionResult.success ? '#10b981' : '#ef4444',
+                                color: 'white',
+                                fontSize: '10px',
+                                height: '20px',
+                            }}
+                        />
+                    )}
+                </Box>
+            )}
+
+            {/* Content */}
+            <Collapse in={expandedPanel} timeout="auto" unmountOnExit>
+                <Box sx={{ flex: 1, overflow: 'hidden', p: 2, display: 'flex', gap: 2 }}>
+                    {/* Left: Always-visible Logs */}
+                    <Box sx={{ width: '50%', minWidth: 320, display: 'flex', flexDirection: 'column' }}>
+                        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
+                            <Typography variant="h6" sx={{ color: 'white' }}>
+                                {t('automation.executionPanel.logsTitle')} ({logs.length})
+                            </Typography>
+                        </Box>
+                        <Paper
+                            sx={{
+                                backgroundColor: '#1f2937',
+                                border: '1px solid #4b5563',
+                                flex: 1,
+                                overflow: 'auto',
+                                maxHeight: '200px',
+                            }}
+                            ref={logsScrollRef}
+                        >
+                            {logs.length === 0 ? (
+                                <Box sx={{ p: 2, textAlign: 'center' }}>
+                                    <Typography variant="body2" sx={{ color: '#9ca3af' }}>
+                                        {t('automation.executionPanel.logsEmpty')}
+                                    </Typography>
+                                </Box>
+                            ) : (
+                                <List dense>
+                                    {logs.map((log, index) => (
+                                        <ListItem key={index} sx={{ py: 0.5 }}>
+                                            <ListItemIcon sx={{ minWidth: '32px' }}>
+                                                {getLogIcon(log.level)}
+                                            </ListItemIcon>
+                                            <ListItemText
+                                                primary={
+                                                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                                                        <Typography
+                                                            variant="body2"
+                                                            sx={{ color: 'white', fontSize: '12px' }}
+                                                        >
+                                                            [{formatTimestamp(log.timestamp)}] {log.nodeType}
+                                                        </Typography>
+                                                        <Chip
+                                                            label={log.level}
+                                                            size="small"
+                                                            sx={{
+                                                                backgroundColor: getLogColor(log.level),
+                                                                color: 'white',
+                                                                fontSize: '10px',
+                                                                height: '16px',
+                                                            }}
+                                                        />
+                                                    </Box>
+                                                }
+                                                secondary={
+                                                    <Typography
+                                                        variant="body2"
+                                                        sx={{ color: '#9ca3af', fontSize: '11px' }}
+                                                    >
+                                                        {log.message}
+                                                    </Typography>
+                                                }
+                                            />
+                                        </ListItem>
+                                    ))}
+                                </List>
+                            )}
+                        </Paper>
+                    </Box>
+
+                    {/* Right: Summary and Errors */}
+                    <Box sx={{ flex: 1, minWidth: 0, overflow: 'auto' }}>
+                        {executionResult && (
+                            <Card sx={{ mb: 2, backgroundColor: '#374151', border: '1px solid #4b5563' }}>
+                                <CardContent>
+                                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
+                                    <Typography variant="h6" sx={{ color: 'white' }}>
+                                        {t('automation.executionPanel.summaryTitle')}
+                                    </Typography>
+                                        <Chip
+                                        label={executionResult.success ? t('automation.common.success') : t('automation.common.failed')}
+                                            sx={{
+                                                backgroundColor: executionResult.success ? '#10b981' : '#ef4444',
+                                                color: 'white',
+                                            }}
+                                        />
+                                    </Box>
+                                    <Box sx={{ display: 'flex', gap: 2, mb: 1 }}>
+                                        <Typography variant="body2" sx={{ color: '#9ca3af' }}>
+                                            {t('automation.executionPanel.runId')}: {executionResult.context.runId}
+                                        </Typography>
+                                        <Typography variant="body2" sx={{ color: '#9ca3af' }}>
+                                            {t('automation.executionPanel.duration')}: {formatDuration(executionResult.context.startTime)}
+                                        </Typography>
+                                    </Box>
+                                    {executionResult.error && (
+                                        <Typography variant="body2" sx={{ color: '#ef4444' }}>
+                                            {t('automation.common.error')}: {executionResult.error}
+                                        </Typography>
+                                    )}
+                                    {executionResult.finalOutput && (
+                                        <Box sx={{ mt: 1 }}>
+                                            <Typography variant="body2" sx={{ color: '#9ca3af', mb: 1 }}>
+                                                {t('automation.executionPanel.finalOutput')}:
+                                            </Typography>
+                                            <Paper
+                                                sx={{
+                                                    p: 1,
+                                                    backgroundColor: '#1f2937',
+                                                    border: '1px solid #4b5563',
+                                                    maxHeight: '100px',
+                                                    overflow: 'auto',
+                                                }}
+                                            >
+                                                <Typography
+                                                    variant="body2"
+                                                    sx={{ color: '#d1d5db', fontFamily: 'monospace', fontSize: '12px' }}
+                                                >
+                                                    {JSON.stringify(executionResult.finalOutput, null, 2)}
+                                                </Typography>
+                                            </Paper>
+                                        </Box>
+                                    )}
+                                </CardContent>
+                            </Card>
+                        )}
+
+                        {executionHistory.length > 0 && (
+                            <Box sx={{ mt: 2 }}>
+                                <Typography variant="h6" sx={{ color: 'white', mb: 1 }}>
+                                    {t('automation.executionPanel.recentExecutions')}
+                                </Typography>
+                                <Box sx={{ display: 'flex', gap: 1, overflow: 'auto' }}>
+                                    {executionHistory.slice(0, 5).map((result, index) => (
+                                        <Card
+                                            key={index}
+                                            sx={{
+                                                minWidth: '200px',
+                                                backgroundColor: '#374151',
+                                                border: '1px solid #4b5563',
+                                                cursor: 'pointer',
+                                                '&:hover': { backgroundColor: '#4b5563' },
+                                            }}
+                                            onClick={() => setExecutionResult(result)}
+                                        >
+                                            <CardContent sx={{ p: 1 }}>
+                                                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
+                                                <Typography variant="body2" sx={{ color: 'white', fontSize: '12px' }}>
+                                                    {t('automation.executionPanel.runNumber')} #{index + 1}
+                                                </Typography>
+                                                    <Chip
+                                                    label={result.success ? t('automation.common.success') : t('automation.common.failed')}
+                                                        size="small"
+                                                        sx={{
+                                                            backgroundColor: result.success ? '#10b981' : '#ef4444',
+                                                            color: 'white',
+                                                            fontSize: '10px',
+                                                            height: '16px',
+                                                        }}
+                                                    />
+                                                </Box>
+                                                <Typography variant="body2" sx={{ color: '#9ca3af', fontSize: '10px' }}>
+                                                    {formatDuration(result.context.startTime)}
+                                                </Typography>
+                                            </CardContent>
+                                        </Card>
+                                    ))}
+                                </Box>
+                            </Box>
+                        )}
+                    </Box>
+                </Box>
+            </Collapse>
+        </Box>
+    );
+};