Restructure automate

frontend/src/components/tools/automate/AutomationRun.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { 
+import {
-  Button, 
+  Button,
-  Text, 
+  Text,
-  Title, 
+  Title,
-  Stack, 
+  Stack,
-  Group, 
+  Group,
   ActionIcon,
   Progress,
   Card,
@@ -17,7 +17,7 @@ import CheckIcon from '@mui/icons-material/Check';
 import ErrorIcon from '@mui/icons-material/Error';
 import { useFileContext } from '../../../contexts/FileContext';
 
-interface ToolSequenceProps {
+interface AutomationRunProps {
   automation: any;
   onBack: () => void;
   onComplete: () => void;
@@ -31,7 +31,7 @@ interface ExecutionStep {
   error?: string;
 }
 
-export default function ToolSequence({ automation, onBack, onComplete }: ToolSequenceProps) {
+export default function AutomationRun({ automation, onBack, onComplete }: AutomationRunProps) {
   const { t } = useTranslation();
   const { activeFiles } = useFileContext();
   const [isExecuting, setIsExecuting] = useState(false);
@@ -63,28 +63,28 @@ export default function ToolSequence({ automation, onBack, onComplete }: ToolSeq
     try {
       for (let i = 0; i < executionSteps.length; i++) {
         setCurrentStepIndex(i);
-        
+
         // Update step status to running
-        setExecutionSteps(prev => prev.map((step, idx) => 
+        setExecutionSteps(prev => prev.map((step, idx) =>
           idx === i ? { ...step, status: 'running' } : step
         ));
 
         // Simulate step execution (replace with actual tool execution)
         await new Promise(resolve => setTimeout(resolve, 2000));
-        
+
         // Update step status to completed
-        setExecutionSteps(prev => prev.map((step, idx) => 
+        setExecutionSteps(prev => prev.map((step, idx) =>
           idx === i ? { ...step, status: 'completed' } : step
         ));
       }
 
       setCurrentStepIndex(-1);
       setIsExecuting(false);
-      
+
       // All steps completed - show success
     } catch (error) {
       // Handle error
-      setExecutionSteps(prev => prev.map((step, idx) => 
+      setExecutionSteps(prev => prev.map((step, idx) =>
         idx === currentStepIndex ? { ...step, status: 'error', error: error?.toString() } : step
       ));
       setIsExecuting(false);
@@ -114,15 +114,6 @@ export default function ToolSequence({ automation, onBack, onComplete }: ToolSeq
 
   return (
     <div>
-      <Group justify="space-between" align="center" mb="md">
-        <Title order={3} size="h4" fw={600} style={{ color: 'var(--mantine-color-text)' }}>
-          {t('automate.sequence.title', 'Tool Sequence')}
-        </Title>
-        <ActionIcon variant="subtle" onClick={onBack}>
-          <ArrowBackIcon />
-        </ActionIcon>
-      </Group>
-
       <Stack gap="md">
         {/* Automation Info */}
         <Card padding="md" withBorder>
@@ -145,9 +136,9 @@ export default function ToolSequence({ automation, onBack, onComplete }: ToolSeq
         {isExecuting && (
           <div>
             <Text size="sm" mb="xs">
-              {t('automate.sequence.progress', 'Progress: {{current}}/{{total}}', { 
+              {t('automate.sequence.progress', 'Progress: {{current}}/{{total}}', {
-                current: currentStepIndex + 1, 
+                current: currentStepIndex + 1,
-                total: executionSteps.length 
+                total: executionSteps.length
               })}
             </Text>
             <Progress value={getProgress()} size="lg" />
@@ -161,11 +152,11 @@ export default function ToolSequence({ automation, onBack, onComplete }: ToolSeq
               <Text size="xs" c="dimmed" style={{ minWidth: '1rem', textAlign: 'center' }}>
                 {index + 1}
               </Text>
-              
+
               {getStepIcon(step)}
-              
+
               <div style={{ flex: 1 }}>
-                <Text size="sm" style={{ 
+                <Text size="sm" style={{
                   color: step.status === 'running' ? 'var(--mantine-color-blue-6)' : 'var(--mantine-color-text)',
                   fontWeight: step.status === 'running' ? 500 : 400
                 }}>
@@ -189,8 +180,8 @@ export default function ToolSequence({ automation, onBack, onComplete }: ToolSeq
             disabled={isExecuting || !activeFiles || activeFiles.length === 0}
             loading={isExecuting}
           >
-            {isExecuting 
+            {isExecuting
-              ? t('automate.sequence.running', 'Running Automation...') 
+              ? t('automate.sequence.running', 'Running Automation...')
               : t('automate.sequence.run', 'Run Automation')
             }
           </Button>
@@ -216,4 +207,4 @@ export default function ToolSequence({ automation, onBack, onComplete }: ToolSeq
       </style>
     </div>
   );
-}
+}

frontend/src/tools/Automate.tsx

@@ -6,7 +6,7 @@ import { useToolFileSelection } from "../contexts/FileSelectionContext";
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 import AutomationSelection from "../components/tools/automate/AutomationSelection";
 import AutomationCreation, { AutomationMode } from "../components/tools/automate/AutomationCreation";
-import ToolSequence from "../components/tools/automate/ToolSequence";
+import AutomationRun from "../components/tools/automate/AutomationRun";
 
 import { useAutomateOperation } from "../hooks/tools/automate/useAutomateOperation";
 import { BaseToolProps } from "../types/tool";
@@ -18,11 +18,12 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { setCurrentMode } = useFileContext();
   const { selectedFiles } = useToolFileSelection();
 
-  const [currentStep, setCurrentStep] = useState<'selection' | 'creation' | 'sequence'>('selection');
+  const [currentStep, setCurrentStep] = useState<'selection' | 'creation' | 'run'>('selection');
   const [stepData, setStepData] = useState<any>({});
 
   const automateOperation = useAutomateOperation();
   const toolRegistry = useFlatToolRegistry();
+  const hasResults = automateOperation.files.length > 0 || automateOperation.downloadUrl !== null;
   const { savedAutomations, deleteAutomation } = useSavedAutomations();
 
   const handleStepChange = (data: any) => {
@@ -44,7 +45,7 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
           <AutomationSelection
             savedAutomations={savedAutomations}
             onCreateNew={() => handleStepChange({ step: 'creation', mode: AutomationMode.CREATE })}
-            onRun={(automation: any) => handleStepChange({ step: 'sequence', automation })}
+            onRun={(automation: any) => handleStepChange({ step: 'run', automation })}
             onEdit={(automation: any) => handleStepChange({ step: 'creation', mode: AutomationMode.EDIT, automation })}
             onDelete={async (automation: any) => {
               try {
@@ -63,16 +64,16 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
             mode={stepData.mode}
             existingAutomation={stepData.automation}
             onBack={() => handleStepChange({ step: 'selection' })}
-            onComplete={(automation: any) => handleStepChange({ step: 'sequence', automation })}
+            onComplete={() => handleStepChange({ step: 'selection' })}
             toolRegistry={toolRegistry}
           />
         );
 
-      case 'sequence':
+      case 'run':
         return (
-          <ToolSequence
+          <AutomationRun
             automation={stepData.automation}
-            onBack={() => handleStepChange({ step: 'creation', mode: stepData.mode, automation: stepData.automation })}
+            onBack={() => handleStepChange({ step: 'selection'})}
             onComplete={handleComplete}
           />
         );
@@ -85,24 +86,33 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   return createToolFlow({
     files: {
       selectedFiles: [],
-      isCollapsed: true, // Hide files step for automate tool
+      isCollapsed: hasResults, // Hide files step for automate tool
-      placeholder: t('automate.filesHidden', 'Files will be selected during automation execution')
     },
     steps: [
       {
-        title: t('automate.stepTitle', 'Automations'),
+        title: t('automate.selection.title', 'Automation Selection'),
         isVisible: true,
-        onCollapsedClick: ()=> setCurrentStep('selection'),
+        isCollapsed: currentStep !== 'selection',
+        onCollapsedClick: () => setCurrentStep('selection'),
         content: currentStep === 'selection' ? renderCurrentStep() : null
       },
       {
-        title: t('automate.sequenceTitle', 'Tool Sequence'),
+        title: stepData.mode === AutomationMode.EDIT
-        isVisible: currentStep === 'creation' || currentStep === 'sequence',
+          ? t('automate.creation.editTitle', 'Edit Automation')
-        content: currentStep === 'creation' || currentStep === 'sequence' ? renderCurrentStep() : null
+          : t('automate.creation.createTitle', 'Create Automation'),
+        isVisible: currentStep === 'creation',
+        isCollapsed: false,
+        content: currentStep === 'creation' ? renderCurrentStep() : null
+      },
+      {
+        title: t('automate.run.title', 'Run Automation'),
+        isVisible: currentStep === 'run',
+        isCollapsed: false,
+        content: currentStep === 'run' ? renderCurrentStep() : null
       }
     ],
     review: {
-      isVisible: false, // Hide review step for automate tool
+      isVisible: hasResults, // Hide review step for automate tool
       operation: automateOperation,
       title: t('automate.reviewTitle', 'Automation Results')
     }