feat: group actions by type

src/components/robot/pages/RobotEditPage.tsx

@@ -536,48 +536,87 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
   };
 
   const renderActionNameFields = () => {
-    if (!robot || !robot.recording || !robot.recording.workflow) return null;
+  if (!robot || !robot.recording || !robot.recording.workflow) return null;
 
-    const editableActions = new Set(['screenshot', 'scrapeList', 'scrapeSchema']);
-    const inputs: JSX.Element[] = [];
+  const editableActions = new Set(['screenshot', 'scrapeList', 'scrapeSchema']);
+  const textInputs: JSX.Element[] = [];
+  const screenshotInputs: JSX.Element[] = [];
+  const listInputs: JSX.Element[] = [];
 
-    robot.recording.workflow.forEach((pair, pairIndex) => {
-      if (!pair.what) return;
+  robot.recording.workflow.forEach((pair, pairIndex) => {
+    if (!pair.what) return;
 
-      pair.what.forEach((action, actionIndex) => {
-        // Only show editable name inputs for meaningful action types
-        if (!editableActions.has(String(action.action))) return;
+    pair.what.forEach((action, actionIndex) => {
+      if (!editableActions.has(String(action.action))) return;
 
-        // derive current name from possible fields
-        const currentName =
-          action.name ||
-          (action.args && action.args[0] && typeof action.args[0] === 'object' && action.args[0].__name) ||
-          '';
+      const currentName =
+        action.name ||
+        (action.args && action.args[0] && typeof action.args[0] === 'object' && action.args[0].__name) ||
+        '';
 
-        inputs.push(
-          <TextField
-            key={`action-name-${pairIndex}-${actionIndex}`}
-            type="text"
-            value={currentName}
-            onChange={(e) => handleActionNameChange(pairIndex, actionIndex, e.target.value)}
-            style={{ marginBottom: '12px' }}
-            fullWidth
-          />
-        );
-      });
+      const textField = (
+        <TextField
+          key={`action-name-${pairIndex}-${actionIndex}`}
+          type="text"
+          value={currentName}
+          onChange={(e) => handleActionNameChange(pairIndex, actionIndex, e.target.value)}
+          style={{ marginBottom: '12px' }}
+          fullWidth
+        />
+      );
+
+      switch (action.action) {
+        case 'scrapeSchema':
+          textInputs.push(textField);
+          break;
+        case 'screenshot':
+          screenshotInputs.push(textField);
+          break;
+        case 'scrapeList':
+          listInputs.push(textField);
+          break;
+      }
     });
+  });
 
-    if (inputs.length === 0) return null;
+  const hasAnyInputs = textInputs.length > 0 || screenshotInputs.length > 0 || listInputs.length > 0;
+  if (!hasAnyInputs) return null;
 
-    return (
-      <>
-        <Typography variant="body1" style={{ marginBottom: '10px', marginTop: '20px' }}>
-          {t('Actions')}
-        </Typography>
-        {inputs}
-      </>
-    );
-  };
+  return (
+    <>
+      <Typography variant="body1" style={{ marginBottom: '10px', marginTop: '20px' }}>
+        {t('Actions')}
+      </Typography>
+      
+      {textInputs.length > 0 && (
+        <>
+          <Typography variant="subtitle1" style={{ marginBottom: '8px' }}>
+            Texts
+          </Typography>
+          {textInputs}
+        </>
+      )}
+
+      {screenshotInputs.length > 0 && (
+        <>
+          <Typography variant="subtitle1" style={{ marginBottom: '8px', marginTop: textInputs.length > 0 ? '16px' : '0' }}>
+            Screenshots
+          </Typography>
+          {screenshotInputs}
+        </>
+      )}
+
+      {listInputs.length > 0 && (
+        <>
+          <Typography variant="subtitle1" style={{ marginBottom: '8px', marginTop: (textInputs.length > 0 || screenshotInputs.length > 0) ? '16px' : '0' }}>
+            Lists
+          </Typography>
+          {listInputs}
+        </>
+      )}
+    </>
+  );
+};
 
   const renderCredentialFields = (
     selectors: string[],