feat: recorder revamp ui changes

src/components/browser/BrowserWindow.tsx

@@ -5,13 +5,14 @@ import Canvas from "../recorder/Canvas";
 import { Highlighter } from "../recorder/Highlighter";
 import { GenericModal } from '../ui/GenericModal';
 import { useActionContext } from '../../context/browserActions';
-import { useBrowserSteps, TextStep } from '../../context/browserSteps';
+import { useBrowserSteps, TextStep, ListStep } from '../../context/browserSteps';
 import { useGlobalInfoStore } from '../../context/globalInfo';
 import { useTranslation } from 'react-i18next';
 import { AuthContext } from '../../context/auth';
 import { coordinateMapper } from '../../helpers/coordinateMapper';
 import { useBrowserDimensionsStore } from '../../context/browserDimensions';
 import { clientSelectorGenerator, ElementFingerprint } from "../../helpers/clientSelectorGenerator";
+import { capturedElementHighlighter } from "../../helpers/capturedElementHighlighter";
 import DatePicker from "../pickers/DatePicker";
 import Dropdown from "../pickers/Dropdown";
 import TimePicker from "../pickers/TimePicker";
@@ -182,10 +183,13 @@ export const BrowserWindow = () => {
         count?: number;
     } | null>(null);
 
+    const [initialAutoFieldIds, setInitialAutoFieldIds] = useState<Set<number>>(new Set());
+    const [manuallyAddedFieldIds, setManuallyAddedFieldIds] = useState<Set<number>>(new Set());
+
     const { socket } = useSocketStore();
     const { notify, currentTextActionId, currentListActionId, updateDOMMode, isDOMMode, currentSnapshot } = useGlobalInfoStore();
     const { getText, getList, paginationMode, paginationType, limitMode, captureStage } = useActionContext();
-    const { addTextStep, addListStep } = useBrowserSteps();
+    const { addTextStep, addListStep, browserSteps } = useBrowserSteps();
 
     const [currentGroupInfo, setCurrentGroupInfo] = useState<{
         isGroupElement: boolean;
@@ -1159,6 +1163,7 @@ export const BrowserWindow = () => {
 
                 if (Object.keys(autoFields).length > 0) {
                   setFields(autoFields);
+                  setInitialAutoFieldIds(new Set(Object.keys(autoFields).map(id => parseInt(id))));
 
                   addListStep(
                     listSelector,
@@ -1195,6 +1200,11 @@ export const BrowserWindow = () => {
       cachedListSelector,
       pendingNotification,
       notify,
+      createFieldsFromChildSelectors,
+      currentListId,
+      currentListActionId,
+      paginationSelector,
+      addListStep
     ]);
 
     useEffect(() => {
@@ -1203,6 +1213,77 @@ export const BrowserWindow = () => {
         }
     }, [listSelector]);
 
+    useEffect(() => {
+      if (!getList || !listSelector || initialAutoFieldIds.size === 0 || !currentListActionId) return;
+
+      const currentListStep = browserSteps.find(
+        step => step.type === 'list' && step.actionId === currentListActionId
+      );
+
+      if (!currentListStep || currentListStep.type !== 'list' || !currentListStep.fields) return;
+
+      const currentFieldIds = new Set(Object.keys(currentListStep.fields).map(id => parseInt(id)));
+      const newManualIds = new Set<number>();
+
+      currentFieldIds.forEach(fieldId => {
+        if (!initialAutoFieldIds.has(fieldId)) {
+          newManualIds.add(fieldId);
+        }
+      });
+
+      if (newManualIds.size !== manuallyAddedFieldIds.size ||
+        ![...newManualIds].every(id => manuallyAddedFieldIds.has(id))) {
+        setManuallyAddedFieldIds(newManualIds);
+      }
+    }, [browserSteps, getList, listSelector, initialAutoFieldIds, currentListActionId, manuallyAddedFieldIds]);
+
+    useEffect(() => {
+      if (!isDOMMode) {
+        capturedElementHighlighter.clearHighlights();
+        return;
+      }
+
+      const capturedSelectors: Array<{ selector: string }> = [];
+
+      if (getText && currentTextActionId) {
+        const textSteps = browserSteps.filter(
+          (step): step is TextStep => step.type === 'text' && step.actionId === currentTextActionId
+        );
+
+        textSteps.forEach(step => {
+          if (step.selectorObj?.selector) {
+            capturedSelectors.push({
+              selector: step.selectorObj.selector,
+            });
+          }
+        });
+      }
+
+      if (getList && listSelector && currentListActionId && manuallyAddedFieldIds.size > 0) {
+        const listSteps = browserSteps.filter(
+          step => step.type === 'list' && step.actionId === currentListActionId
+        ) as ListStep[];
+
+        listSteps.forEach(listStep => {
+          if (listStep.fields) {
+            Object.entries(listStep.fields).forEach(([fieldId, field]: [string, any]) => {
+              if (manuallyAddedFieldIds.has(parseInt(fieldId)) && field.selectorObj?.selector) {
+                capturedSelectors.push({
+                  selector: field.selectorObj.selector,
+                });
+              }
+            });
+          }
+        });
+      }
+
+      if (capturedSelectors.length > 0) {
+        capturedElementHighlighter.applyHighlights(capturedSelectors);
+      } else {
+        capturedElementHighlighter.clearHighlights();
+      }
+    }, [browserSteps, getText, getList, listSelector, currentTextActionId, currentListActionId, isDOMMode, manuallyAddedFieldIds]);
+
     useEffect(() => {
         coordinateMapper.updateDimensions(dimensions.width, dimensions.height, viewportInfo.width, viewportInfo.height);
     }, [viewportInfo, dimensions.width, dimensions.height]);
@@ -1216,7 +1297,6 @@ export const BrowserWindow = () => {
     useEffect(() => {
         const storedListSelector = sessionStorage.getItem('recordingListSelector');
         
-        // Only restore state if it exists in sessionStorage
         if (storedListSelector && !listSelector) {
           setListSelector(storedListSelector);
         }
@@ -1225,7 +1305,6 @@ export const BrowserWindow = () => {
     const onMouseMove = (e: MouseEvent) => {
         if (canvasRef && canvasRef.current && highlighterData) {
             const canvasRect = canvasRef.current.getBoundingClientRect();
-            // mousemove outside the browser window
             if (
                 e.pageX < canvasRect.left
                 || e.pageX > canvasRect.right
@@ -1242,6 +1321,8 @@ export const BrowserWindow = () => {
         setFields({});
         setCurrentListId(null);
         setCachedChildSelectors([]);
+        setInitialAutoFieldIds(new Set());
+        setManuallyAddedFieldIds(new Set());
     }, []);
 
     useEffect(() => {
@@ -1262,7 +1343,7 @@ export const BrowserWindow = () => {
                 }
             }
         }
-    }, [screenShot, user?.id]);
+    }, [user?.id]);
 
     useEffect(() => {
         if (socket) {
@@ -1456,7 +1537,6 @@ export const BrowserWindow = () => {
         }
         highlighterUpdateRef.current = now;
         
-        // Map the incoming DOMRect from browser coordinates to canvas coordinates
         const mappedRect = new DOMRect(
             data.rect.x,
             data.rect.y,
@@ -1477,17 +1557,14 @@ export const BrowserWindow = () => {
                 if (limitMode) {
                     setHighlighterData(null);
                 } else if (paginationMode) {
-                    // Only set highlighterData if type is not empty, 'none', 'scrollDown', or 'scrollUp'
                     if (paginationType !== '' && !['none', 'scrollDown', 'scrollUp'].includes(paginationType)) {
                         setHighlighterData(mappedData);
                     } else {
                         setHighlighterData(null);
                     }
                 } else if (mappedData.childSelectors && mappedData.childSelectors.includes(mappedData.selector)) {
-                    // Highlight only valid child elements within the listSelector
                     setHighlighterData(mappedData);
                 } else if (mappedData.elementInfo?.isIframeContent && mappedData.childSelectors) {
-                    // Handle iframe elements
                     const isIframeChild = mappedData.childSelectors.some(childSelector =>
                         mappedData.selector.includes(':>>') && 
                         childSelector.split(':>>').some(part =>
@@ -1496,7 +1573,6 @@ export const BrowserWindow = () => {
                     );
                     setHighlighterData(isIframeChild ? mappedData : null);
                 } else if (mappedData.selector.includes(':>>') && hasValidChildSelectors) {
-                    // Handle mixed DOM cases with iframes
                     const selectorParts = mappedData.selector.split(':>>').map(part => part.trim());
                     const isValidMixedSelector = selectorParts.some(part =>
                         mappedData.childSelectors!.some(childSelector =>
@@ -1505,7 +1581,6 @@ export const BrowserWindow = () => {
                     );
                     setHighlighterData(isValidMixedSelector ? mappedData : null);
                 } else if (mappedData.elementInfo?.isShadowRoot && mappedData.childSelectors) {
-                    // Handle Shadow DOM elements
                     const isShadowChild = mappedData.childSelectors.some(childSelector =>
                         mappedData.selector.includes('>>') &&
                         childSelector.split('>>').some(part =>
@@ -1514,7 +1589,6 @@ export const BrowserWindow = () => {
                     );
                     setHighlighterData(isShadowChild ? mappedData : null);
                 } else if (mappedData.selector.includes('>>') && hasValidChildSelectors) {
-                    // Handle mixed DOM cases
                     const selectorParts = mappedData.selector.split('>>').map(part => part.trim());
                     const isValidMixedSelector = selectorParts.some(part =>
                         mappedData.childSelectors!.some(childSelector =>
@@ -1523,15 +1597,12 @@ export const BrowserWindow = () => {
                     );
                     setHighlighterData(isValidMixedSelector ? mappedData : null);
                 } else {
-                    // If not a valid child in normal mode, clear the highlighter
                     setHighlighterData(null);
                 }
             } else {
-                // Set highlighterData for the initial listSelector selection
                 setHighlighterData(mappedData);
             }
         } else {
-            // For non-list steps
             setHighlighterData(mappedData);
         }
     }, [getList, socket, listSelector, paginationMode, paginationType, limitMode]);
@@ -2114,7 +2185,7 @@ export const BrowserWindow = () => {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
           }
-        `}</style>
+        `}</style>j
 
           {(getText === true || getList === true) &&
             !showAttributeModal &&

src/components/recorder/RightSidePanel.tsx

@@ -1,19 +1,13 @@
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { Button, Paper, Box, TextField, IconButton, Tooltip } from "@mui/material";
-import EditIcon from '@mui/icons-material/Edit';
-import TextFieldsIcon from '@mui/icons-material/TextFields';
-import DocumentScannerIcon from '@mui/icons-material/DocumentScanner';
 import { WorkflowFile } from "maxun-core";
 import Typography from "@mui/material/Typography";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { PaginationType, useActionContext, LimitType } from '../../context/browserActions';
 import { BrowserStep, useBrowserSteps } from '../../context/browserSteps';
 import { useSocketStore } from '../../context/socket';
-import { ScreenshotSettings } from '../../shared/types';
-import InputAdornment from '@mui/material/InputAdornment';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import { getActiveWorkflow } from "../../api/workflow";
@@ -49,13 +43,9 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const [showCaptureList, setShowCaptureList] = useState(true);
   const [showCaptureScreenshot, setShowCaptureScreenshot] = useState(true);
   const [showCaptureText, setShowCaptureText] = useState(true);
-  const [hoverStates, setHoverStates] = useState<{ [id: string]: boolean }>({});
-  const [browserStepIdList, setBrowserStepIdList] = useState<number[]>([]);
-  const [isCaptureTextConfirmed, setIsCaptureTextConfirmed] = useState(false);
-  const [isCaptureListConfirmed, setIsCaptureListConfirmed] = useState(false);
   const { panelHeight } = useBrowserDimensionsStore();
 
-  const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog, currentListActionId, setCurrentListActionId, currentTextActionId, setCurrentTextActionId, currentScreenshotActionId, setCurrentScreenshotActionId, isDOMMode, setIsDOMMode, currentSnapshot, setCurrentSnapshot, updateDOMMode, initialUrl, setRecordingUrl } = useGlobalInfoStore();  
+  const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog, currentListActionId, setCurrentListActionId, currentTextActionId, setCurrentTextActionId, currentScreenshotActionId, setCurrentScreenshotActionId, isDOMMode, setIsDOMMode, currentSnapshot, setCurrentSnapshot, updateDOMMode, initialUrl, setRecordingUrl, currentTextGroupName } = useGlobalInfoStore();  
   const { 
     getText, startGetText, stopGetText, 
     getList, startGetList, stopGetList, 
@@ -72,7 +62,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     startAction, finishAction 
   } = useActionContext();
   
-  const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep, updateListTextFieldLabel, removeListTextField, updateListStepLimit, deleteStepsByActionId, updateListStepData, updateScreenshotStepData } = useBrowserSteps();
+  const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep, updateListTextFieldLabel, removeListTextField, updateListStepLimit, deleteStepsByActionId, updateListStepData, updateScreenshotStepData, emitActionForStep } = useBrowserSteps();
   const { id, socket } = useSocketStore();
   const { t } = useTranslation();
 
@@ -183,6 +173,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
         if (screenshotSteps.length > 0) {
           const latestStep = screenshotSteps[screenshotSteps.length - 1];          
           updateScreenshotStepData(latestStep.id, data.screenshot);
+          emitActionForStep(latestStep);
         }
         
         setCurrentScreenshotActionId('');
@@ -194,7 +185,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
         socket.off('directScreenshotCaptured', handleDirectScreenshot);
       };
     }
-  }, [socket, id, notify, t, currentScreenshotActionId, updateScreenshotStepData, setCurrentScreenshotActionId]);
+  }, [socket, id, notify, t, currentScreenshotActionId, updateScreenshotStepData, setCurrentScreenshotActionId, emitActionForStep, browserSteps]);
 
   const extractDataClientSide = useCallback(
     (
@@ -271,26 +262,41 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
         }
       }
     },
-    [isDOMMode, currentSnapshot, updateListStepData, socket, notify]
+    [isDOMMode, currentSnapshot, updateListStepData, socket, notify, currentWorkflowActionsState]
   );
 
-  const handleMouseEnter = (id: number) => {
+  useEffect(() => {
-    setHoverStates(prev => ({ ...prev, [id]: true }));
+    if (!getList) return;
-  };
 
-  const handleMouseLeave = (id: number) => {
+    const currentListStep = browserSteps.find(
-    setHoverStates(prev => ({ ...prev, [id]: false }));
+      step => step.type === 'list' && step.actionId === currentListActionId
-  };
+    ) as (BrowserStep & { type: 'list'; listSelector?: string; fields?: Record<string, any> }) | undefined;
+
+    if (!currentListStep || !currentListStep.listSelector || !currentListStep.fields) return;
+
+    const fieldCount = Object.keys(currentListStep.fields).length;
+
+    if (fieldCount > 0) {
+      extractDataClientSide(
+        currentListStep.listSelector,
+        currentListStep.fields,
+        currentListStep.id
+      );
+
+      setCurrentWorkflowActionsState({
+        ...currentWorkflowActionsState,
+        hasScrapeListAction: true
+      });
+    }
+  }, [browserSteps, currentListActionId, getList, extractDataClientSide, setCurrentWorkflowActionsState, currentWorkflowActionsState]);
 
   const handleStartGetText = () => {
-    setIsCaptureTextConfirmed(false);
     const newActionId = `text-${crypto.randomUUID()}`;
     setCurrentTextActionId(newActionId);
     startGetText();
   }
 
   const handleStartGetList = () => {
-    setIsCaptureListConfirmed(false);
     const newActionId = `list-${crypto.randomUUID()}`;
     setCurrentListActionId(newActionId);
     startGetList();
@@ -302,230 +308,24 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     startGetScreenshot();
   };
 
-  const handleTextLabelChange = (id: number, label: string, listId?: number, fieldKey?: string) => {
-    if (listId !== undefined && fieldKey !== undefined) {
-      // Prevent editing if the field is confirmed
-      if (confirmedListTextFields[listId]?.[fieldKey]) {
-        return;
-      }
-      updateListTextFieldLabel(listId, fieldKey, label);
-    } else {
-      setTextLabels(prevLabels => ({ ...prevLabels, [id]: label }));
-    }
-    if (!label.trim()) {
-      setErrors(prevErrors => ({ ...prevErrors, [id]: t('right_panel.errors.label_required') }));
-    } else {
-      setErrors(prevErrors => ({ ...prevErrors, [id]: '' }));
-    }
-  };
-
-  const handleTextStepConfirm = (id: number) => {
-    const label = textLabels[id]?.trim();
-    if (!label) {
-      setErrors(prevErrors => ({ ...prevErrors, [id]: t('right_panel.errors.label_required') }));
-      return;
-    }
-
-    const existingLabels = browserSteps
-      .filter(step => 
-        step.type === 'text' && 
-        step.id !== id &&
-        confirmedTextSteps[step.id] &&
-        'label' in step &&
-        step.label
-      )
-      .map(step => (step as any).label);
-
-    if (existingLabels.includes(label)) {
-      setErrors(prevErrors => ({ 
-        ...prevErrors, 
-        [id]: t('right_panel.errors.duplicate_label') || `Label "${label}" already exists. Please use a unique label.`
-      }));
-      return;
-    }
-
-    updateBrowserTextStepLabel(id, label);
-    setConfirmedTextSteps(prev => ({ ...prev, [id]: true }));
-    setErrors(prevErrors => ({ ...prevErrors, [id]: '' }));
-  };
-
-  const handleTextStepDiscard = (id: number) => {
-    deleteBrowserStep(id);
-    setTextLabels(prevLabels => {
-      const { [id]: _, ...rest } = prevLabels;
-      return rest;
-    });
-    setErrors(prevErrors => {
-      const { [id]: _, ...rest } = prevErrors;
-      return rest;
-    });
-  };
-
-  const handleTextStepDelete = (id: number) => {
-    deleteBrowserStep(id);
-    setTextLabels(prevLabels => {
-      const { [id]: _, ...rest } = prevLabels;
-      return rest;
-    });
-    setConfirmedTextSteps(prev => {
-      const { [id]: _, ...rest } = prev;
-      return rest;
-    });
-    setErrors(prevErrors => {
-      const { [id]: _, ...rest } = prevErrors;
-      return rest;
-    });
-  };
-
-  const handleListTextFieldConfirm = (listId: number, fieldKey: string) => {
-    setConfirmedListTextFields(prev => ({
-      ...prev,
-      [listId]: {
-        ...(prev[listId] || {}),
-        [fieldKey]: true
-      }
-    }));
-  };
-
-  const handleListTextFieldDiscard = (listId: number, fieldKey: string) => {
-    removeListTextField(listId, fieldKey);
-    setConfirmedListTextFields(prev => {
-      const updatedListFields = { ...(prev[listId] || {}) };
-      delete updatedListFields[fieldKey];
-      return {
-        ...prev,
-        [listId]: updatedListFields
-      };
-    });
-    setErrors(prev => {
-      const { [fieldKey]: _, ...rest } = prev;
-      return rest;
-    });
-  };
-
-  const handleListTextFieldDelete = (listId: number, fieldKey: string) => {
-    removeListTextField(listId, fieldKey);
-    setConfirmedListTextFields(prev => {
-      const updatedListFields = { ...(prev[listId] || {}) };
-      delete updatedListFields[fieldKey];
-      return {
-        ...prev,
-        [listId]: updatedListFields
-      };
-    });
-    setErrors(prev => {
-      const { [fieldKey]: _, ...rest } = prev;
-      return rest;
-    });
-  };
-
-  const getTextSettingsObject = useCallback(() => {
-    const settings: Record<string, { 
-      selector: string; 
-      tag?: string;
-      [key: string]: any 
-    }> = {};
-
-    browserSteps.forEach(step => {
-      if (browserStepIdList.includes(step.id)) {
-        return;
-      }
-
-      if (step.type === 'text' && step.label && step.selectorObj?.selector) {
-        settings[step.label] = {
-          ...step.selectorObj,
-          selector: step.selectorObj.selector
-        };
-      }
-      setBrowserStepIdList(prevList => [...prevList, step.id]);
-    });
-
-    return settings;
-  }, [browserSteps, browserStepIdList]);
-
   const stopCaptureAndEmitGetTextSettings = useCallback(() => {
-    const hasTextStepsForCurrentAction = browserSteps.some(step => step.type === 'text' && step.actionId === currentTextActionId);
+    const currentTextActionStep = browserSteps.find(step => step.type === 'text' && step.actionId === currentTextActionId);
-    if (!hasTextStepsForCurrentAction) {
+    if (!currentTextActionStep) {
       notify('error', t('right_panel.errors.no_text_captured'));
       return;
     }
     
-    const hasUnconfirmedTextStepsForCurrentAction = browserSteps.some(step => 
-      step.type === 'text' && 
-      step.actionId === currentTextActionId && 
-      !confirmedTextSteps[step.id]
-    );
-    if (hasUnconfirmedTextStepsForCurrentAction) {
-      notify('error', t('right_panel.errors.confirm_text_fields'));
-      return;
-    }
     stopGetText();
-    const settings = getTextSettingsObject();
+    if (currentTextActionStep) {
-    if (hasTextStepsForCurrentAction) {
+      emitActionForStep(currentTextActionStep);
-      socket?.emit('action', { action: 'scrapeSchema', settings });
     }
-    setIsCaptureTextConfirmed(true);
     setCurrentTextActionId('');
     resetInterpretationLog();
     finishAction('text'); 
     onFinishCapture();
     clientSelectorGenerator.cleanup();
-  }, [stopGetText, getTextSettingsObject, socket, browserSteps, confirmedTextSteps, resetInterpretationLog, finishAction, notify, onFinishCapture, t]);
+  }, [stopGetText, socket, browserSteps, resetInterpretationLog, finishAction, notify, onFinishCapture, t, currentTextActionId, currentTextGroupName, emitActionForStep]);
 
-  const getListSettingsObject = useCallback(() => {
-    let settings: {
-      listSelector?: string;
-      fields?: Record<string, { 
-        selector: string; 
-        tag?: string;
-        [key: string]: any;
-        isShadow?: boolean;
-      }>;
-      pagination?: { 
-        type: string; 
-        selector?: string;
-        isShadow?: boolean;
-      };
-      limit?: number;
-      isShadow?: boolean;
-    } = {};
-
-    browserSteps.forEach(step => {
-      if (step.type === 'list' && step.listSelector && Object.keys(step.fields).length > 0) {
-        const fields: Record<string, { 
-          selector: string; 
-          tag?: string;
-          [key: string]: any;
-          isShadow?: boolean;
-        }> = {};
-
-        Object.entries(step.fields).forEach(([id, field]) => {
-          if (field.selectorObj?.selector) {
-            fields[field.label] = {
-              selector: field.selectorObj.selector,
-              tag: field.selectorObj.tag,
-              attribute: field.selectorObj.attribute,
-              isShadow: field.selectorObj.isShadow
-            };
-          }
-        });
-
-        settings = {
-          listSelector: step.listSelector,
-          fields: fields,
-          pagination: { 
-            type: paginationType, 
-            selector: step.pagination?.selector,
-            isShadow: step.isShadow
-          },
-          limit: parseInt(limitType === 'custom' ? customLimit : limitType),
-          isShadow: step.isShadow
-        };
-      }
-    });
-
-    return settings;
-  }, [browserSteps, paginationType, limitType, customLimit]);
 
   const resetListState = useCallback(() => {
     setShowPaginationOptions(false);
@@ -541,32 +341,33 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   }, [stopGetList, resetListState]);
 
   const stopCaptureAndEmitGetListSettings = useCallback(() => {
-    const settings = getListSettingsObject();
-    
     const latestListStep = getLatestListStep(browserSteps);
-    if (latestListStep && settings) {
+    if (latestListStep) {
       extractDataClientSide(latestListStep.listSelector!, latestListStep.fields, latestListStep.id);
+
+      setCurrentWorkflowActionsState({
+        ...currentWorkflowActionsState,
+        hasScrapeListAction: true
+      });
       
-      socket?.emit('action', { action: 'scrapeList', settings });
+      emitActionForStep(latestListStep);
+
+      handleStopGetList();
+      setCurrentListActionId('');
+      resetInterpretationLog();
+      finishAction('list');
+      onFinishCapture();
+      clientSelectorGenerator.cleanup();
     } else {
       notify('error', t('right_panel.errors.unable_create_settings'));
+      handleStopGetList();
+      setCurrentListActionId('');
+      resetInterpretationLog();
+      finishAction('list');
+      onFinishCapture();
+      clientSelectorGenerator.cleanup();
     }
-    
+  }, [socket, notify, handleStopGetList, resetInterpretationLog, finishAction, onFinishCapture, t, browserSteps, extractDataClientSide, setCurrentWorkflowActionsState, currentWorkflowActionsState, emitActionForStep]);
-    handleStopGetList();
-    setCurrentListActionId('');
-    resetInterpretationLog();
-    finishAction('list');
-    onFinishCapture();
-    clientSelectorGenerator.cleanup();
-  }, [getListSettingsObject, socket, notify, handleStopGetList, resetInterpretationLog, finishAction, onFinishCapture, t, browserSteps, extractDataClientSide]);
-
-  const hasUnconfirmedListTextFields = browserSteps.some(step =>
-    step.type === 'list' &&
-    step.actionId === currentListActionId &&
-    Object.entries(step.fields).some(([fieldKey]) =>
-      !confirmedListTextFields[step.id]?.[fieldKey]
-    )
-  );
 
   const getLatestListStep = (steps: BrowserStep[]) => {
     const listSteps = steps.filter(step => step.type === 'list');
@@ -590,19 +391,6 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
           return;
         }
         
-        const hasUnconfirmedListTextFieldsForCurrentAction = browserSteps.some(step =>
-          step.type === 'list' &&
-          step.actionId === currentListActionId &&
-          Object.entries(step.fields).some(([fieldKey]) =>
-            !confirmedListTextFields[step.id]?.[fieldKey]
-          )
-        );
-        
-        if (hasUnconfirmedListTextFieldsForCurrentAction) {
-          notify('error', t('right_panel.errors.confirm_all_list_fields'));
-          return;
-        }
-        
         startPaginationMode();
         setShowPaginationOptions(true);
         setCaptureStage('pagination');
@@ -613,11 +401,17 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
           notify('error', t('right_panel.errors.select_pagination'));
           return;
         }
-        const settings = getListSettingsObject();
+        
-        const paginationSelector = settings.pagination?.selector;
+        const currentListStepForPagination = browserSteps.find(
-        if (['clickNext', 'clickLoadMore'].includes(paginationType) && !paginationSelector) {
+          step => step.type === 'list' && step.actionId === currentListActionId
-          notify('error', t('right_panel.errors.select_pagination_element'));
+        ) as (BrowserStep & { type: 'list' }) | undefined;
-          return;
+
+        if (currentListStepForPagination) {
+          const paginationSelector = currentListStepForPagination.pagination?.selector;
+          if (['clickNext', 'clickLoadMore'].includes(paginationType) && !paginationSelector) {
+            notify('error', t('right_panel.errors.select_pagination_element'));
+            return;
+          }
         }
         stopPaginationMode();
         setShowPaginationOptions(false);
@@ -644,7 +438,6 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
 
         stopLimitMode();
         setShowLimitOptions(false);
-        setIsCaptureListConfirmed(true);
         stopCaptureAndEmitGetListSettings();
         setCaptureStage('complete');
         break;
@@ -653,7 +446,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
         setCaptureStage('initial');
         break;
     }
-  }, [captureStage, paginationType, limitType, customLimit, startPaginationMode, setShowPaginationOptions, setCaptureStage, getListSettingsObject, notify, stopPaginationMode, startLimitMode, setShowLimitOptions, stopLimitMode, setIsCaptureListConfirmed, stopCaptureAndEmitGetListSettings, t, browserSteps, currentListActionId, confirmedListTextFields]);
+  }, [captureStage, paginationType, limitType, customLimit, startPaginationMode, setShowPaginationOptions, setCaptureStage, notify, stopPaginationMode, startLimitMode, setShowLimitOptions, stopLimitMode, stopCaptureAndEmitGetListSettings, t, browserSteps, currentListActionId, updateListStepLimit]);
 
   const handleBackCaptureList = useCallback(() => {
     switch (captureStage) {
@@ -679,61 +472,28 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const discardGetText = useCallback(() => {
     stopGetText();
     
-    if (currentTextActionId) {
+    if (currentTextActionId) {     
-      const stepsToDelete = browserSteps
-        .filter(step => step.type === 'text' && step.actionId === currentTextActionId)
-        .map(step => step.id);
-      
       deleteStepsByActionId(currentTextActionId);
       
-      setTextLabels(prevLabels => {
+      if (socket) {
-        const newLabels = { ...prevLabels };
+        socket.emit('removeAction', { actionId: currentTextActionId });
-        stepsToDelete.forEach(id => {
+      }
-          delete newLabels[id];
-        });
-        return newLabels;
-      });
-      
-      setErrors(prevErrors => {
-        const newErrors = { ...prevErrors };
-        stepsToDelete.forEach(id => {
-          delete newErrors[id];
-        });
-        return newErrors;
-      });
-      
-      setConfirmedTextSteps(prev => {
-        const newConfirmed = { ...prev };
-        stepsToDelete.forEach(id => {
-          delete newConfirmed[id];
-        });
-        return newConfirmed;
-      });
     }
     
     setCurrentTextActionId('');
-    setIsCaptureTextConfirmed(false);
     clientSelectorGenerator.cleanup();
     notify('error', t('right_panel.errors.capture_text_discarded'));
-  }, [currentTextActionId, browserSteps, stopGetText, deleteStepsByActionId, notify, t]);
+  }, [currentTextActionId, browserSteps, stopGetText, deleteStepsByActionId, notify, t, socket]);
 
   const discardGetList = useCallback(() => {
     stopGetList();
     
     if (currentListActionId) {
-      const listStepsToDelete = browserSteps
-        .filter(step => step.type === 'list' && step.actionId === currentListActionId)
-        .map(step => step.id);
-      
       deleteStepsByActionId(currentListActionId);
       
-      setConfirmedListTextFields(prev => {
+      if (socket) {
-        const newConfirmed = { ...prev };
+        socket.emit('removeAction', { actionId: currentListActionId });
-        listStepsToDelete.forEach(id => {
+      }
-          delete newConfirmed[id];
-        });
-        return newConfirmed;
-      });
     }
     
     resetListState();
@@ -743,12 +503,14 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     setShowLimitOptions(false);
     setCaptureStage('initial');
     setCurrentListActionId('');
-    setIsCaptureListConfirmed(false);
     clientSelectorGenerator.cleanup();
     notify('error', t('right_panel.errors.capture_list_discarded'));
-  }, [currentListActionId, browserSteps, stopGetList, deleteStepsByActionId, resetListState, setShowPaginationOptions, setShowLimitOptions, setCaptureStage, notify, t]);
+  }, [currentListActionId, browserSteps, stopGetList, deleteStepsByActionId, resetListState, setShowPaginationOptions, setShowLimitOptions, setCaptureStage, notify, t, stopPaginationMode, stopLimitMode, socket]);
 
   const captureScreenshot = (fullPage: boolean) => {
+    const screenshotCount = browserSteps.filter(s => s.type === 'screenshot').length + 1;
+    const screenshotName = `Screenshot ${screenshotCount}`;
+    
     const screenshotSettings = {
       fullPage,
       type: 'png' as const,
@@ -756,38 +518,18 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
       animations: 'allow' as const,
       caret: 'hide' as const,
       scale: 'device' as const,
+      name: screenshotName,
+      actionId: currentScreenshotActionId
     };
     socket?.emit('captureDirectScreenshot', screenshotSettings);   
-    socket?.emit('action', { action: 'screenshot', settings: screenshotSettings });
     addScreenshotStep(fullPage, currentScreenshotActionId);
     stopGetScreenshot();
     resetInterpretationLog();
     finishAction('screenshot');
-    clientSelectorGenerator.cleanup();
     onFinishCapture();
+    clientSelectorGenerator.cleanup();
   };
 
-  const isConfirmCaptureDisabled = useMemo(() => {
-    if (captureStage !== 'initial') return false;
-
-    const hasValidListSelectorForCurrentAction = browserSteps.some(step =>
-      step.type === 'list' &&
-      step.actionId === currentListActionId &&
-      step.listSelector &&
-      Object.keys(step.fields).length > 0
-    );
-
-    const hasUnconfirmedListTextFieldsForCurrentAction = browserSteps.some(step =>
-      step.type === 'list' &&
-      step.actionId === currentListActionId &&
-      Object.entries(step.fields).some(([fieldKey]) =>
-        !confirmedListTextFields[step.id]?.[fieldKey]
-      )
-    );
-
-    return !hasValidListSelectorForCurrentAction || hasUnconfirmedListTextFieldsForCurrentAction;
-  }, [captureStage, browserSteps, currentListActionId, confirmedListTextFields]);
-
   const theme = useThemeMode();
   const isDarkMode = theme.darkMode;
 
@@ -842,33 +584,20 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
                   {t('right_panel.buttons.back')}
                 </Button>
               )}
-              <Tooltip
+              <Button
-                title={
+                variant="outlined"
-                  captureStage !== 'initial' && hasUnconfirmedListTextFields
+                onClick={handleConfirmListCapture}
-                    ? t('right_panel.tooltips.confirm_all_list_fields')
+                sx={{
-                    : ''
+                  color: '#ff00c3 !important',
-                }
+                  borderColor: '#ff00c3 !important',
-                placement="top"
+                  backgroundColor: 'whitesmoke !important',
-                arrow
+                }}
               >
-                <span>
-                  <Button
-                    variant="outlined"
-                    onClick={handleConfirmListCapture}
-                    disabled={captureStage !== 'initial' && hasUnconfirmedListTextFields}
-                    sx={{
-                      color: '#ff00c3 !important',
-                      borderColor: '#ff00c3 !important',
-                      backgroundColor: 'whitesmoke !important',
-                    }}
-                  >
                 {captureStage === 'initial' ? t('right_panel.buttons.confirm_capture') :
                   captureStage === 'pagination' ? t('right_panel.buttons.confirm_pagination') :
                     captureStage === 'limit' ? t('right_panel.buttons.confirm_limit') :
                       t('right_panel.buttons.finish_capture')}
-                  </Button>
+              </Button>
-                </span>
-              </Tooltip>
               <Button
                 variant="outlined"
                 color="error"
@@ -1056,137 +785,6 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
           </Box>
         )}
       </Box>
-      
-      <Box>
-        {browserSteps.map(step => (
-          <Box key={step.id} onMouseEnter={() => handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)} sx={{ padding: '10px', margin: '11px', borderRadius: '5px', position: 'relative', background: isDarkMode ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }}>
-            {
-              step.type === 'text' && (
-                <>
-                  <TextField
-                    label={t('right_panel.fields.label')}
-                    value={textLabels[step.id] || step.label || ''}
-                    onChange={(e) => handleTextLabelChange(step.id, e.target.value)}
-                    fullWidth
-                    size="small"
-                    margin="normal"
-                    error={!!errors[step.id]}
-                    helperText={errors[step.id]}
-                    InputProps={{
-                      readOnly: confirmedTextSteps[step.id],
-                      startAdornment: (
-                        <InputAdornment position="start">
-                          <EditIcon />
-                        </InputAdornment>
-                      )
-                    }}
-                    sx={{ background: isDarkMode ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }}
-                  />
-                  <TextField
-                    label={t('right_panel.fields.data')}
-                    value={step.data}
-                    fullWidth
-                    margin="normal"
-                    InputProps={{
-                      readOnly: confirmedTextSteps[step.id],
-                      startAdornment: (
-                        <InputAdornment position="start">
-                          <TextFieldsIcon />
-                        </InputAdornment>
-                      )
-                    }}
-                  />
-                  {!confirmedTextSteps[step.id] ? (
-                    <Box display="flex" justifyContent="space-between" gap={2}>
-                      <Button variant="contained" onClick={() => handleTextStepConfirm(step.id)} disabled={!textLabels[step.id]?.trim()}>{t('right_panel.buttons.confirm')}</Button>
-                      <Button variant="contained" color="error" onClick={() => handleTextStepDiscard(step.id)}>{t('right_panel.buttons.discard')}</Button>
-                    </Box>
-                  ) : !isCaptureTextConfirmed && (
-                    <Box display="flex" justifyContent="flex-end" gap={2}>
-                      <Button
-                        variant="contained"
-                        color="error"
-                        onClick={() => handleTextStepDelete(step.id)}
-                      >
-                        {t('right_panel.buttons.delete')}
-                      </Button>
-                    </Box>
-                  )}
-                </>
-              )}
-            {step.type === 'screenshot' && (
-              <Box display="flex" alignItems="center">
-                <DocumentScannerIcon sx={{ mr: 1 }} />
-                <Typography>
-                  {step.fullPage ?
-                    t('right_panel.screenshot.display_fullpage') :
-                    t('right_panel.screenshot.display_visible')}
-                </Typography>
-              </Box>
-            )}
-            {step.type === 'list' && (
-              Object.entries(step.fields).length === 0 ? (
-                <Typography>{t('right_panel.messages.list_empty')}</Typography>
-              ) : (
-                <>
-                  <Typography>{t('right_panel.messages.list_selected')}</Typography>
-                  {Object.entries(step.fields).map(([key, field]) => (
-                    <Box key={key}>
-                      <TextField
-                        label={t('right_panel.fields.field_label')}
-                        value={field.label || ''}
-                        onChange={(e) => handleTextLabelChange(field.id, e.target.value, step.id, key)}
-                        fullWidth
-                        margin="normal"
-                        InputProps={{
-                          readOnly: confirmedListTextFields[field.id]?.[key],
-                          startAdornment: (
-                            <InputAdornment position="start">
-                              <EditIcon />
-                            </InputAdornment>
-                          )
-                        }}
-                      />
-                      <TextField
-                        label={t('right_panel.fields.field_data')}
-                        value={field.data || ''}
-                        fullWidth
-                        margin="normal"
-                        InputProps={{
-                          readOnly: true,
-                          startAdornment: (
-                            <InputAdornment position="start">
-                              <TextFieldsIcon />
-                            </InputAdornment>
-                          )
-                        }}
-                      />
-                      {!confirmedListTextFields[step.id]?.[key] && (
-                        <Box display="flex" justifyContent="space-between" gap={2}>
-                          <Button
-                            variant="contained"
-                            onClick={() => handleListTextFieldConfirm(step.id, key)}
-                            disabled={!field.label?.trim()}
-                          >
-                            {t('right_panel.buttons.confirm')}
-                          </Button>
-                          <Button
-                            variant="contained"
-                            color="error"
-                            onClick={() => handleListTextFieldDiscard(step.id, key)}
-                          >
-                            {t('right_panel.buttons.discard')}
-                          </Button>
-                        </Box>
-                      )}
-                    </Box>
-                  ))}
-                </>
-              )
-            )}
-          </Box>
-        ))}
-      </Box>
     </Paper>
   );
 };

src/components/run/RunContent.tsx

@@ -8,16 +8,13 @@ import {
   CircularProgress,
   Accordion,
   AccordionSummary,
-  AccordionDetails,
+  AccordionDetails
-  ButtonGroup
 } from "@mui/material";
 import Highlight from "react-highlight";
 import * as React from "react";
 import { Data } from "./RunsTable";
 import { TabPanel, TabContext } from "@mui/lab";
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { useEffect, useState } from "react";
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -43,21 +40,25 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
 
   const [schemaData, setSchemaData] = useState<any[]>([]);
   const [schemaColumns, setSchemaColumns] = useState<string[]>([]);
+  const [schemaKeys, setSchemaKeys] = useState<string[]>([]);
+  const [schemaDataByKey, setSchemaDataByKey] = useState<Record<string, any[]>>({});
+  const [schemaColumnsByKey, setSchemaColumnsByKey] = useState<Record<string, string[]>>({});
   const [isSchemaTabular, setIsSchemaTabular] = useState<boolean>(false);
 
   const [listData, setListData] = useState<any[][]>([]);
   const [listColumns, setListColumns] = useState<string[][]>([]);
+  const [listKeys, setListKeys] = useState<string[]>([]);
   const [currentListIndex, setCurrentListIndex] = useState<number>(0);
 
   const [screenshotKeys, setScreenshotKeys] = useState<string[]>([]);
+  const [screenshotKeyMap, setScreenshotKeyMap] = useState<Record<string, string>>({});
   const [currentScreenshotIndex, setCurrentScreenshotIndex] = useState<number>(0);
+  const [currentSchemaIndex, setCurrentSchemaIndex] = useState<number>(0);
 
   const [legacyData, setLegacyData] = useState<any[]>([]);
   const [legacyColumns, setLegacyColumns] = useState<string[]>([]);
   const [isLegacyData, setIsLegacyData] = useState<boolean>(false);
 
-  const { darkMode } = useThemeMode();
-
   useEffect(() => {
     setTab(tab);
   }, [interpretationInProgress]);
@@ -66,8 +67,12 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
     if (row.status === 'running' || row.status === 'queued' || row.status === 'scheduled') {
       setSchemaData([]);
       setSchemaColumns([]);
+      setSchemaKeys([]);
+      setSchemaDataByKey({});
+      setSchemaColumnsByKey({});
       setListData([]);
       setListColumns([]);
+      setListKeys([]);
       setLegacyData([]);
       setLegacyColumns([]);
       setIsLegacyData(false);
@@ -77,10 +82,11 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
 
     if (!row.serializableOutput) return;
 
-    if (!row.serializableOutput.scrapeSchema &&
+    const hasLegacySchema = row.serializableOutput.scrapeSchema && Array.isArray(row.serializableOutput.scrapeSchema);
-      !row.serializableOutput.scrapeList &&
+    const hasLegacyList = row.serializableOutput.scrapeList && Array.isArray(row.serializableOutput.scrapeList);
-      Object.keys(row.serializableOutput).length > 0) {
+    const hasOldFormat = !row.serializableOutput.scrapeSchema && !row.serializableOutput.scrapeList && Object.keys(row.serializableOutput).length > 0;
 
+    if (hasLegacySchema || hasLegacyList || hasOldFormat) {
       setIsLegacyData(true);
       processLegacyData(row.serializableOutput);
       return;
@@ -100,44 +106,106 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
   useEffect(() => {
     if (row.status === 'running' || row.status === 'queued' || row.status === 'scheduled') {
       setScreenshotKeys([]);
+      setScreenshotKeyMap({});
       setCurrentScreenshotIndex(0);
       return;
     }
 
     if (row.binaryOutput && Object.keys(row.binaryOutput).length > 0) {
-      setScreenshotKeys(Object.keys(row.binaryOutput));
+      const rawKeys = Object.keys(row.binaryOutput);
+
+      const isLegacyPattern = rawKeys.every(key => /^item-\d+-\d+$/.test(key));
+
+      if (isLegacyPattern) {
+        const renamedKeys = rawKeys.map((_, index) => `Screenshot ${index + 1}`);
+        const keyMap: Record<string, string> = {};
+
+        renamedKeys.forEach((displayName, index) => {
+          keyMap[displayName] = rawKeys[index];
+        });
+
+        setScreenshotKeys(renamedKeys);
+        setScreenshotKeyMap(keyMap);
+      } else {
+        const keyMap: Record<string, string> = {};
+        rawKeys.forEach(key => {
+          keyMap[key] = key;
+        });
+
+        setScreenshotKeys(rawKeys);
+        setScreenshotKeyMap(keyMap);
+      }
+
       setCurrentScreenshotIndex(0);
     } else {
       setScreenshotKeys([]);
+      setScreenshotKeyMap({});
       setCurrentScreenshotIndex(0);
     }
   }, [row.binaryOutput, row.status]);
 
   const processLegacyData = (legacyOutput: Record<string, any>) => {
-    let allData: any[] = [];
+    const convertedSchema: Record<string, any[]> = {};
+    const convertedList: Record<string, any[]> = {};
 
-    Object.keys(legacyOutput).forEach(key => {
+    const keys = Object.keys(legacyOutput);
+
+    keys.forEach((key) => {
       const data = legacyOutput[key];
+
       if (Array.isArray(data)) {
-        const filteredData = data.filter(row =>
+        const isNestedArray = data.length > 0 && Array.isArray(data[0]);
-          Object.values(row).some(value => value !== undefined && value !== "")
+
-        );
+        if (isNestedArray) {
-        allData = [...allData, ...filteredData];
+          data.forEach((subArray, index) => {
+            if (Array.isArray(subArray) && subArray.length > 0) {
+              const filteredData = subArray.filter(row =>
+                row && typeof row === 'object' && Object.values(row).some(value => value !== undefined && value !== "")
+              );
+
+              if (filteredData.length > 0) {
+                const autoName = `List ${Object.keys(convertedList).length + 1}`;
+                convertedList[autoName] = filteredData;
+              }
+            }
+          });
+        } else {
+          const filteredData = data.filter(row =>
+            row && typeof row === 'object' && Object.values(row).some(value => value !== undefined && value !== "")
+          );
+
+          if (filteredData.length > 0) {
+            const schemaCount = Object.keys(convertedSchema).length;
+            const autoName = `Text ${schemaCount + 1}`;
+            convertedSchema[autoName] = filteredData;
+          }
+        }
       }
     });
 
-    if (allData.length > 0) {
+    if (Object.keys(convertedSchema).length === 1) {
-      const allColumns = new Set<string>();
+      const singleKey = Object.keys(convertedSchema)[0];
-      allData.forEach(item => {
+      const singleData = convertedSchema[singleKey];
-        Object.keys(item).forEach(key => allColumns.add(key));
+      delete convertedSchema[singleKey];
-      });
+      convertedSchema["Texts"] = singleData;
+    }
 
-      setLegacyData(allData);
+    if (Object.keys(convertedSchema).length > 0) {
-      setLegacyColumns(Array.from(allColumns));
+      processSchemaData(convertedSchema);
+    }
+
+    if (Object.keys(convertedList).length > 0) {
+      processScrapeList(convertedList);
     }
   };
 
   const processSchemaData = (schemaOutput: any) => {
+    const keys = Object.keys(schemaOutput);
+    setSchemaKeys(keys);
+
+    const dataByKey: Record<string, any[]> = {};
+    const columnsByKey: Record<string, string[]> = {};
+
     if (Array.isArray(schemaOutput)) {
       const filteredData = schemaOutput.filter(row =>
         row && Object.values(row).some(value => value !== undefined && value !== "")
@@ -156,41 +224,32 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
       }
     }
 
-    if (schemaOutput['schema-tabular']) {
-      const tabularData = schemaOutput['schema-tabular'];
-      if (Array.isArray(tabularData) && tabularData.length > 0) {
-        const filteredData = tabularData.filter(row =>
-          Object.values(row).some(value => value !== undefined && value !== "")
-        );
-
-        if (filteredData.length > 0) {
-          const allColumns = new Set<string>();
-          filteredData.forEach(item => {
-            Object.keys(item).forEach(key => allColumns.add(key));
-          });
-
-          setSchemaData(filteredData);
-          setSchemaColumns(Array.from(allColumns));
-          setIsSchemaTabular(true);
-          return;
-        }
-      }
-    }
-
     let allData: any[] = [];
     let hasMultipleEntries = false;
 
-    Object.keys(schemaOutput).forEach(key => {
+    keys.forEach(key => {
       const data = schemaOutput[key];
       if (Array.isArray(data)) {
         const filteredData = data.filter(row =>
           Object.values(row).some(value => value !== undefined && value !== "")
         );
+
+        dataByKey[key] = filteredData;
+
+        const columnsForKey = new Set<string>();
+        filteredData.forEach(item => {
+          Object.keys(item).forEach(col => columnsForKey.add(col));
+        });
+        columnsByKey[key] = Array.from(columnsForKey);
+
         allData = [...allData, ...filteredData];
         if (filteredData.length > 1) hasMultipleEntries = true;
       }
     });
 
+    setSchemaDataByKey(dataByKey);
+    setSchemaColumnsByKey(columnsByKey);
+
     if (allData.length > 0) {
       const allColumns = new Set<string>();
       allData.forEach(item => {
@@ -206,42 +265,22 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
   const processScrapeList = (scrapeListData: any) => {
     const tablesList: any[][] = [];
     const columnsList: string[][] = [];
+    const keys: string[] = [];
 
-    if (Array.isArray(scrapeListData)) {
+    if (typeof scrapeListData === 'object') {
-      scrapeListData.forEach(tableData => {
-        if (Array.isArray(tableData) && tableData.length > 0) {
-          const filteredData = tableData.filter(row =>
-            Object.values(row).some(value => value !== undefined && value !== "")
-          );
-
-          if (filteredData.length > 0) {
-            tablesList.push(filteredData);
-
-            const tableColumns = new Set<string>();
-            filteredData.forEach(item => {
-              Object.keys(item).forEach(key => tableColumns.add(key));
-            });
-
-            columnsList.push(Array.from(tableColumns));
-          }
-        }
-      });
-    } else if (typeof scrapeListData === 'object') {
       Object.keys(scrapeListData).forEach(key => {
         const tableData = scrapeListData[key];
         if (Array.isArray(tableData) && tableData.length > 0) {
           const filteredData = tableData.filter(row =>
             Object.values(row).some(value => value !== undefined && value !== "")
           );
-
           if (filteredData.length > 0) {
             tablesList.push(filteredData);
-
+            keys.push(key);
             const tableColumns = new Set<string>();
             filteredData.forEach(item => {
               Object.keys(item).forEach(key => tableColumns.add(key));
             });
-
             columnsList.push(Array.from(tableColumns));
           }
         }
@@ -250,6 +289,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
 
     setListData(tablesList);
     setListColumns(columnsList);
+    setListKeys(keys);
     setCurrentListIndex(0);
   };
 
@@ -308,21 +348,6 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
     }, 100);
   };
 
-  const navigateListTable = (direction: 'next' | 'prev') => {
-    if (direction === 'next' && currentListIndex < listData.length - 1) {
-      setCurrentListIndex(currentListIndex + 1);
-    } else if (direction === 'prev' && currentListIndex > 0) {
-      setCurrentListIndex(currentListIndex - 1);
-    }
-  };
-
-  const navigateScreenshots = (direction: 'next' | 'prev') => {
-    if (direction === 'next' && currentScreenshotIndex < screenshotKeys.length - 1) {
-      setCurrentScreenshotIndex(currentScreenshotIndex + 1);
-    } else if (direction === 'prev' && currentScreenshotIndex > 0) {
-      setCurrentScreenshotIndex(currentScreenshotIndex - 1);
-    }
-  };
 
   const renderDataTable = (
     data: any[],
@@ -333,15 +358,127 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
     isPaginatedList: boolean = false,
     isSchemaData: boolean = false
   ) => {
-    if (!isPaginatedList && data.length === 0) return null;
+    if (data.length === 0) return null;
-    if (isPaginatedList && (listData.length === 0 || currentListIndex >= listData.length)) return null;
 
-    const currentData = isPaginatedList ? listData[currentListIndex] : data;
+    const shouldShowAsKeyValue = isSchemaData && !isSchemaTabular && data.length === 1;
-    const currentColumns = isPaginatedList ? listColumns[currentListIndex] : columns;
 
-    if (!currentData || currentData.length === 0) return null;
+    if (title === '') {
+      return (
+        <>
+          <Box sx={{ mb: 2 }}>
+            <TableContainer component={Paper} sx={{ maxHeight: 320 }}>
+              <Table stickyHeader aria-label="sticky table">
+                <TableHead>
+                  <TableRow>
+                    {shouldShowAsKeyValue ? (
+                      <>
+                        <TableCell
+                          sx={{
+                            backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#11111' : '#f8f9fa'
+                          }}
+                        >
+                          Label
+                        </TableCell>
+                        <TableCell
+                          sx={{
+                            backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#11111' : '#f8f9fa'
+                          }}
+                        >
+                          Value
+                        </TableCell>
+                      </>
+                    ) : (
+                      columns.map((column) => (
+                        <TableCell
+                          key={column}
+                          sx={{
+                            backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#11111' : '#f8f9fa'
+                          }}
+                        >
+                          {column}
+                        </TableCell>
+                      ))
+                    )}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {shouldShowAsKeyValue ? (
+                    columns.map((column) => (
+                      <TableRow key={column}>
+                        <TableCell sx={{ fontWeight: 500 }}>
+                          {column}
+                        </TableCell>
+                        <TableCell>
+                          {data[0][column] === undefined || data[0][column] === ""
+                            ? "-"
+                            : (typeof data[0][column] === 'object'
+                              ? JSON.stringify(data[0][column])
+                              : String(data[0][column]))}
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  ) : (
+                    data.map((row, index) => (
+                      <TableRow key={index}>
+                        {columns.map((column) => (
+                          <TableCell key={column}>
+                            {row[column] === undefined || row[column] === ""
+                              ? "-"
+                              : (typeof row[column] === 'object'
+                                ? JSON.stringify(row[column])
+                                : String(row[column]))}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
+            <Box>
+              <Button
+                component="a"
+                onClick={() => downloadJSON(data, jsonFilename)}
+                sx={{
+                  color: '#FF00C3',
+                  textTransform: 'none',
+                  mr: 2,
+                  p: 0,
+                  minWidth: 'auto',
+                  backgroundColor: 'transparent',
+                  '&:hover': {
+                    backgroundColor: 'transparent',
+                    textDecoration: 'underline'
+                  }
+                }}
+              >
+                {t('run_content.captured_data.download_json', 'Download as JSON')}
+              </Button>
 
-    const shouldShowAsKeyValue = isSchemaData && !isSchemaTabular && currentData.length === 1;
+              <Button
+                component="a"
+                onClick={() => downloadCSV(data, columns, csvFilename, isSchemaData, isSchemaTabular)}
+                sx={{
+                  color: '#FF00C3',
+                  textTransform: 'none',
+                  p: 0,
+                  minWidth: 'auto',
+                  backgroundColor: 'transparent',
+                  '&:hover': {
+                    backgroundColor: 'transparent',
+                    textDecoration: 'underline'
+                  }
+                }}
+              >
+                {t('run_content.captured_data.download_csv', 'Download as CSV')}
+              </Button>
+            </Box>
+          </Box>
+        </>
+      );
+    }
 
     return (
       <Accordion defaultExpanded sx={{ mb: 2 }}>
@@ -359,11 +496,11 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
         <AccordionDetails>
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
             <Box>
-              <Button 
+              <Button
                 component="a"
-                onClick={() => downloadJSON(currentData, jsonFilename)}
+                onClick={() => downloadJSON(data, jsonFilename)}
-                sx={{ 
+                sx={{
-                  color: '#FF00C3', 
+                  color: '#FF00C3',
                   textTransform: 'none',
                   mr: 2,
                   p: 0,
@@ -378,11 +515,11 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
                 {t('run_content.captured_data.download_json', 'Download as JSON')}
               </Button>
 
-              <Button 
+              <Button
                 component="a"
-                onClick={() => downloadCSV(currentData, currentColumns, csvFilename, isSchemaData, isSchemaTabular)}
+                onClick={() => downloadCSV(data, columns, csvFilename, isSchemaData, isSchemaTabular)}
-                sx={{ 
+                sx={{
-                  color: '#FF00C3', 
+                  color: '#FF00C3',
                   textTransform: 'none',
                   p: 0,
                   minWidth: 'auto',
@@ -396,37 +533,6 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
                 {t('run_content.captured_data.download_csv', 'Download as CSV')}
               </Button>
             </Box>
-
-            {isPaginatedList && listData.length > 1 && (
-              <ButtonGroup size="small">
-                <Button
-                  onClick={() => navigateListTable('prev')}
-                  disabled={currentListIndex === 0}
-                  sx={{
-                    borderColor: '#FF00C3',
-                    color: currentListIndex === 0 ? 'gray' : '#FF00C3',
-                    '&.Mui-disabled': {
-                      borderColor: 'rgba(0, 0, 0, 0.12)'
-                    }
-                  }}
-                >
-                  <ArrowBackIcon />
-                </Button>
-                <Button
-                  onClick={() => navigateListTable('next')}
-                  disabled={currentListIndex === listData.length - 1}
-                  sx={{
-                    borderColor: '#FF00C3',
-                    color: currentListIndex === listData.length - 1 ? 'gray' : '#FF00C3',
-                    '&.Mui-disabled': {
-                      borderColor: 'rgba(0, 0, 0, 0.12)'
-                    }
-                  }}
-                >
-                  <ArrowForwardIcon />
-                </Button>
-              </ButtonGroup>
-            )}
           </Box>
           <TableContainer component={Paper} sx={{ maxHeight: 320 }}>
             <Table stickyHeader aria-label="sticky table">
@@ -434,33 +540,27 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
                 <TableRow>
                   {shouldShowAsKeyValue ? (
                     <>
-                      <TableCell 
+                      <TableCell
-                        sx={{ 
+                        sx={{
-                          borderBottom: '1px solid',
+                          backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#11111' : '#f8f9fa'
-                          borderColor: darkMode ? '#3a4453' : '#dee2e6',
-                          backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
                         }}
                       >
                         Label
                       </TableCell>
-                      <TableCell 
+                      <TableCell
-                        sx={{ 
+                        sx={{
-                          borderBottom: '1px solid',
+                          backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#11111' : '#f8f9fa'
-                          borderColor: darkMode ? '#3a4453' : '#dee2e6',
-                          backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
                         }}
                       >
                         Value
                       </TableCell>
                     </>
                   ) : (
-                    (isPaginatedList ? currentColumns : columns).map((column) => (
+                    columns.map((column) => (
-                      <TableCell 
+                      <TableCell
                         key={column}
-                        sx={{ 
+                        sx={{
-                          borderBottom: '1px solid',
+                          backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#11111' : '#f8f9fa'
-                          borderColor: darkMode ? '#3a4453' : '#dee2e6',
-                          backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
                         }}
                       >
                         {column}
@@ -471,24 +571,30 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
               </TableHead>
               <TableBody>
                 {shouldShowAsKeyValue ? (
-                  // Single schema entry - show as key-value pairs
+                  columns.map((column) => (
-                  currentColumns.map((column) => (
                     <TableRow key={column}>
                       <TableCell sx={{ fontWeight: 500 }}>
                         {column}
                       </TableCell>
                       <TableCell>
-                        {currentData[0][column] === undefined || currentData[0][column] === "" ? "-" : currentData[0][column]}
+                        {data[0][column] === undefined || data[0][column] === ""
+                          ? "-"
+                          : (typeof data[0][column] === 'object'
+                            ? JSON.stringify(data[0][column])
+                            : String(data[0][column]))}
                       </TableCell>
                     </TableRow>
                   ))
                 ) : (
-                  // Multiple entries or list data - show as table
+                  data.map((row, index) => (
-                  currentData.map((row, index) => (
                     <TableRow key={index}>
-                      {(isPaginatedList ? currentColumns : columns).map((column) => (
+                      {columns.map((column) => (
                         <TableCell key={column}>
-                          {row[column] === undefined || row[column] === "" ? "-" : row[column]}
+                          {row[column] === undefined || row[column] === ""
+                            ? "-"
+                            : (typeof row[column] === 'object'
+                              ? JSON.stringify(row[column])
+                              : String(row[column]))}
                         </TableCell>
                       ))}
                     </TableRow>
@@ -601,23 +707,201 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
 
               {!isLegacyData && (
                 <>
-                  {renderDataTable(
+                  {schemaData.length > 0 && (
-                    schemaData,
+                    <Accordion defaultExpanded sx={{ mb: 2 }}>
-                    schemaColumns,
+                      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                    t('run_content.captured_data.schema_title', 'Captured Texts'),
+                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                    'schema_data.csv',
+                          <Typography variant='h6'>
-                    'schema_data.json',
+                            {t('run_content.captured_data.schema_title', 'Captured Texts')}
-                    false,
+                          </Typography>
-                    true
+                        </Box>
+                      </AccordionSummary>
+                      <AccordionDetails>
+                        {schemaKeys.length > 0 && (
+                          <Box
+                            sx={{
+                              display: 'flex',
+                              borderBottom: '1px solid',
+                              borderColor: 'divider',
+                              mb: 2,
+                            }}
+                          >
+                            {schemaKeys.map((key, idx) => (
+                              <Box
+                                key={key}
+                                onClick={() => setCurrentSchemaIndex(idx)}
+                                sx={{
+                                  px: 3,
+                                  py: 1,
+                                  cursor: 'pointer',
+                                  backgroundColor:
+                                    currentSchemaIndex === idx
+                                      ? (theme) => theme.palette.mode === 'dark'
+                                        ? '#121111ff'
+                                        : '#e9ecef'
+                                      : 'transparent',
+                                  fontWeight: currentSchemaIndex === idx ? 600 : 400,
+                                  color: (theme) => theme.palette.mode === 'dark' ? '#fff' : '#000',
+                                }}
+                              >
+                                {key}
+                              </Box>
+                            ))}
+                          </Box>
+                        )}
+
+                        {renderDataTable(
+                          schemaDataByKey[schemaKeys[currentSchemaIndex]] || schemaData,
+                          schemaColumnsByKey[schemaKeys[currentSchemaIndex]] || schemaColumns,
+                          '',
+                          `${schemaKeys[currentSchemaIndex] || 'schema_data'}.csv`,
+                          `${schemaKeys[currentSchemaIndex] || 'schema_data'}.json`,
+                          false,
+                          true
+                        )}
+                      </AccordionDetails>
+                    </Accordion>
                   )}
 
-                  {listData.length > 0 && renderDataTable(
+                  {listData.length > 0 && (
-                    [],
+                    <Accordion defaultExpanded sx={{ mb: 2 }}>
-                    [],
+                      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                    t('run_content.captured_data.list_title', 'Captured Lists'),
+                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                    'list_data.csv',
+                          <Typography variant='h6'>
-                    'list_data.json',
+                            {t('run_content.captured_data.list_title', 'Captured Lists')}
-                    true
+                          </Typography>
+                        </Box>
+                      </AccordionSummary>
+                      <AccordionDetails>
+                        <Box
+                          sx={{
+                            display: 'flex',
+                            borderBottom: '1px solid',
+                            borderColor: 'divider',
+                            mb: 2,
+                          }}
+                        >
+                          {listKeys.map((key, idx) => (
+                            <Box
+                              key={key}
+                              onClick={() => setCurrentListIndex(idx)}
+                              sx={{
+                                px: 3,
+                                py: 1,
+                                cursor: 'pointer',
+                                backgroundColor:
+                                  currentListIndex === idx
+                                    ? (theme) => theme.palette.mode === 'dark'
+                                      ? '#121111ff'
+                                      : '#e9ecef'
+                                    : 'transparent',
+                                fontWeight: currentListIndex === idx ? 600 : 400,
+                                color: (theme) => theme.palette.mode === 'dark' ? '#fff' : '#000',
+                              }}
+                            >
+                              {key}
+                            </Box>
+                          ))}
+                        </Box>
+
+                        <TableContainer component={Paper} sx={{ maxHeight: 320 }}>
+                          <Table stickyHeader aria-label="captured-list-table">
+                            <TableHead>
+                              <TableRow>
+                                {(listColumns[currentListIndex] || []).map((column) => (
+                                  <TableCell
+                                    key={column}
+                                    sx={{
+                                      backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#11111' : '#f8f9fa'
+                                    }}
+                                  >
+                                    {column}
+                                  </TableCell>
+                                ))}
+                              </TableRow>
+                            </TableHead>
+
+                            <TableBody>
+                              {(listData[currentListIndex] || []).map((rowItem, idx) => (
+                                <TableRow key={idx}>
+                                  {(listColumns[currentListIndex] || []).map((column) => (
+                                    <TableCell key={column}>
+                                      {rowItem[column] === undefined || rowItem[column] === ''
+                                        ? '-'
+                                        : typeof rowItem[column] === 'object'
+                                        ? JSON.stringify(rowItem[column])
+                                        : String(rowItem[column])}
+                                    </TableCell>
+                                  ))}
+                                </TableRow>
+                              ))}
+                            </TableBody>
+                          </Table>
+                        </TableContainer>
+
+                        <Box
+                          sx={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            mb: 2,
+                            mt: 2
+                          }}
+                        >
+                          <Box>
+                            <Button
+                              component="a"
+                              onClick={() =>
+                                downloadJSON(
+                                  listData[currentListIndex],
+                                  `${listKeys[currentListIndex] || 'list_data'}.json`
+                                )
+                              }
+                              sx={{
+                                color: '#FF00C3',
+                                textTransform: 'none',
+                                mr: 2,
+                                p: 0,
+                                minWidth: 'auto',
+                                backgroundColor: 'transparent',
+                                '&:hover': {
+                                  backgroundColor: 'transparent',
+                                  textDecoration: 'underline',
+                                },
+                              }}
+                            >
+                              {t('run_content.captured_data.download_json', 'Download as JSON')}
+                            </Button>
+
+                            <Button
+                              component="a"
+                              onClick={() =>
+                                downloadCSV(
+                                  listData[currentListIndex],
+                                  listColumns[currentListIndex] || [],
+                                  `${listKeys[currentListIndex] || 'list_data'}.csv`,
+                                  false,
+                                  false
+                                )
+                              }
+                              sx={{
+                                color: '#FF00C3',
+                                textTransform: 'none',
+                                p: 0,
+                                minWidth: 'auto',
+                                backgroundColor: 'transparent',
+                                '&:hover': {
+                                  backgroundColor: 'transparent',
+                                  textDecoration: 'underline',
+                                },
+                              }}
+                            >
+                              {t('run_content.captured_data.download_csv', 'Download as CSV')}
+                            </Button>
+                          </Box>
+                        </Box>
+                      </AccordionDetails>
+                    </Accordion>
                   )}
                 </>
               )}
@@ -625,102 +909,73 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
           )}
 
           {hasScreenshots && (
-            <>
+            <Accordion defaultExpanded sx={{ mb: 2 }}>
-              <Accordion defaultExpanded sx={{ mb: 2 }}>
+              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                <AccordionSummary
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                  expandIcon={<ExpandMoreIcon />}
+                  <Typography variant='h6'>
-                  aria-controls="screenshot-content"
+                    {t('run_content.captured_screenshot.title', 'Captured Screenshots')}
-                  id="screenshot-header"
+                  </Typography>
+                </Box>
+              </AccordionSummary>
+              <AccordionDetails>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    mb: 2,
+                  }}
                 >
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  {screenshotKeys.length > 0 && (
-                    <Typography variant='h6'>
+                    <Box
-                      {t('run_content.captured_screenshot.title', 'Screenshots')}
+                      sx={{
-                    </Typography>
+                        display: 'flex',
-                  </Box>
+                        borderBottom: '1px solid',
-                </AccordionSummary>
+                        borderColor: 'divider',
-                <AccordionDetails>
+                        mb: 2,
-                  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
-                    <Button
-                      onClick={() => {
-                        fetch(row.binaryOutput[screenshotKeys[currentScreenshotIndex]])
-                          .then(response => response.blob())
-                          .then(blob => {
-                            const url = window.URL.createObjectURL(blob);
-                            const a = document.createElement('a');
-                            a.style.display = 'none';
-                            a.href = url;
-                            a.download = screenshotKeys[currentScreenshotIndex];
-                            document.body.appendChild(a);
-                            a.click();
-                            document.body.removeChild(a);
-                            window.URL.revokeObjectURL(url);
-                          })
-                          .catch(err => console.error('Download failed:', err));
-                      }}
-                      sx={{ 
-                        color: '#FF00C3', 
-                        textTransform: 'none',
-                        p: 0,
-                        minWidth: 'auto',
-                        backgroundColor: 'transparent',
-                        '&:hover': {
-                          backgroundColor: 'transparent',
-                          textDecoration: 'underline'
-                        }
                       }}
                     >
-                      {t('run_content.captured_screenshot.download', 'Download')}
+                      {screenshotKeys.map((key, idx) => (
-                    </Button>
+                        <Box
-                    
+                          key={key}
-                    {screenshotKeys.length > 1 && (
+                          onClick={() => setCurrentScreenshotIndex(idx)}
-                      <ButtonGroup size="small">
-                        <Button
-                          onClick={() => navigateScreenshots('prev')}
-                          disabled={currentScreenshotIndex === 0}
                           sx={{
-                            borderColor: '#FF00C3',
+                            px: 3,
-                            color: currentScreenshotIndex === 0 ? 'gray' : '#FF00C3',
+                            py: 1,
-                            '&.Mui-disabled': {
+                            cursor: 'pointer',
-                              borderColor: 'rgba(0, 0, 0, 0.12)'
+                            backgroundColor:
-                            }
+                              currentScreenshotIndex === idx
+                                ? (theme) => theme.palette.mode === 'dark'
+                                  ? '#121111ff'
+                                  : '#e9ecef'
+                                : 'transparent',
+                            fontWeight: currentScreenshotIndex === idx ? 600 : 400,
+                            color: (theme) => theme.palette.mode === 'dark' ? '#fff' : '#000',
                           }}
                         >
-                          <ArrowBackIcon />
+                          {key}
-                        </Button>
+                        </Box>
-                        <Button
+                      ))}
-                          onClick={() => navigateScreenshots('next')}
-                          disabled={currentScreenshotIndex === screenshotKeys.length - 1}
-                          sx={{
-                            borderColor: '#FF00C3',
-                            color: currentScreenshotIndex === screenshotKeys.length - 1 ? 'gray' : '#FF00C3',
-                            '&.Mui-disabled': {
-                              borderColor: 'rgba(0, 0, 0, 0.12)'
-                            }
-                          }}
-                        >
-                          <ArrowForwardIcon />
-                        </Button>
-                      </ButtonGroup>
-                    )}
-                  </Box>
-                  
-                  <Box sx={{ mt: 1 }}>
-                    <Box>
-                      <img
-                        src={row.binaryOutput[screenshotKeys[currentScreenshotIndex]]}
-                        alt={`Screenshot ${screenshotKeys[currentScreenshotIndex]}`}
-                        style={{
-                          maxWidth: '100%',
-                          height: 'auto',
-                          border: '1px solid #e0e0e0',
-                          borderRadius: '4px'
-                        }}
-                      />
                     </Box>
-                  </Box>
+                  )}
-                </AccordionDetails>
+                </Box>
-              </Accordion>
+
-            </>
+                <Box sx={{ mt: 1 }}>
+                  {screenshotKeys.length > 0 && (
+                    <img
+                      src={row.binaryOutput[screenshotKeyMap[screenshotKeys[currentScreenshotIndex]]]}
+                      alt={`Screenshot ${screenshotKeys[currentScreenshotIndex]}`}
+                      style={{
+                        maxWidth: '100%',
+                        height: 'auto',
+                        border: '1px solid #e0e0e0',
+                        borderRadius: '4px'
+                      }}
+                    />
+                  )}
+                </Box>
+              </AccordionDetails>
+            </Accordion>
           )}
         </TabPanel>
       </TabContext>

src/context/browserSteps.tsx

@@ -1,4 +1,6 @@
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { useSocketStore } from "./socket";
+import { useGlobalInfoStore } from "./globalInfo";
 
 export interface TextStep {
     id: number;
@@ -8,11 +10,13 @@ export interface TextStep {
     isShadow?: boolean;
     selectorObj: SelectorObject;
     actionId?: string;
+    name?: string;
 }
 
-interface ScreenshotStep {
+export interface ScreenshotStep {
     id: number;
     type: 'screenshot';
+    name?: string;
     fullPage: boolean;
     actionId?: string;
     screenshotData?: string;
@@ -21,6 +25,7 @@ interface ScreenshotStep {
 export interface ListStep {
     id: number;
     type: 'list';
+    name?: string;
     listSelector: string;
     isShadow?: boolean;
     fields: { [key: string]: TextStep };
@@ -31,112 +36,331 @@ export interface ListStep {
     };
     limit?: number;
     actionId?: string;
+    data?: any[];
 }
 
 export type BrowserStep = TextStep | ScreenshotStep | ListStep;
 
 export interface SelectorObject {
     selector: string;
+    isShadow?: boolean;
     tag?: string;
     attribute?: string;
-    isShadow?: boolean;
     [key: string]: any;
 }
 
 interface BrowserStepsContextType {
     browserSteps: BrowserStep[];
-    addTextStep: (label: string, data: string, selectorObj: SelectorObject, actionId: string) => void;
+    addTextStep: (
-    addListStep: (listSelector: string, fields: { [key: string]: TextStep }, listId: number, actionId: string, pagination?: { type: string; selector: string, isShadow?: boolean }, limit?: number, isShadow?: boolean) => void
+        label: string,
+        data: string,
+        selectorObj: SelectorObject,
+        actionId: string
+    ) => void;
+    addListStep: (
+        listSelector: string,
+        fields: { [key: string]: TextStep },
+        listId: number,
+        actionId: string,
+        pagination?: {
+            type: string;
+            selector: string;
+            isShadow?: boolean;
+        },
+        limit?: number,
+        isShadow?: boolean
+    ) => void;
     addScreenshotStep: (fullPage: boolean, actionId: string) => void;
     deleteBrowserStep: (id: number) => void;
     updateBrowserTextStepLabel: (id: number, newLabel: string) => void;
-    updateListTextFieldLabel: (listId: number, fieldKey: string, newLabel: string) => void;
+    updateListTextFieldLabel: (
+        listId: number,
+        fieldKey: string,
+        newLabel: string
+    ) => void;
     updateListStepLimit: (listId: number, limit: number) => void;
     updateListStepData: (listId: number, extractedData: any[]) => void;
+    updateListStepName: (listId: number, name: string) => void;
+    updateScreenshotStepName: (id: number, name: string) => void;
     removeListTextField: (listId: number, fieldKey: string) => void;
     deleteStepsByActionId: (actionId: string) => void;
     updateScreenshotStepData: (id: number, screenshotData: string) => void;
+    emitActionForStep: (step: BrowserStep) => void;
+    emitForStepId: (actionId: string, nameOverride?: string) => void;
 }
 
 const BrowserStepsContext = createContext<BrowserStepsContextType | undefined>(undefined);
 
 export const BrowserStepsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const { socket } = useSocketStore();
+    const { currentTextGroupName } = useGlobalInfoStore();
     const [browserSteps, setBrowserSteps] = useState<BrowserStep[]>([]);
     const [discardedFields, setDiscardedFields] = useState<Set<string>>(new Set());
 
+    const browserStepsRef = useRef<BrowserStep[]>(browserSteps);
+    useEffect(() => {
+        browserStepsRef.current = browserSteps;
+    }, [browserSteps]);
+
+    const currentTextGroupNameRef = useRef(currentTextGroupName);
+
+    useEffect(() => {
+        currentTextGroupNameRef.current = currentTextGroupName;
+    }, [currentTextGroupName]);
+
+    const getListSettingsObject = (listStep: ListStep) => {
+        const fields: Record<string, {
+            selector: string;
+            tag?: string;
+            [key: string]: any;
+            isShadow?: boolean;
+        }> = {};
+
+        Object.entries(listStep.fields).forEach(([id, field]) => {
+            if (field.selectorObj?.selector) {
+                fields[field.label] = {
+                    selector: field.selectorObj.selector,
+                    tag: field.selectorObj.tag,
+                    attribute: field.selectorObj.attribute,
+                    isShadow: field.selectorObj.isShadow
+                };
+            }
+        });
+
+        return {
+            listSelector: listStep.listSelector,
+            fields: fields,
+            pagination: {
+                type: listStep.pagination?.type || "",
+                selector: listStep.pagination?.selector,
+                isShadow: listStep.isShadow
+            },
+            limit: listStep.limit,
+            isShadow: listStep.isShadow
+        };
+    };
+
+    const emitActionForStep = (step: BrowserStep) => {
+        if (!socket) return;
+        if (!step.actionId) return;
+        if (!socket.connected) return;
+
+        let action = "";
+        let settings: any = {};
+
+        // Always read the latest steps from the ref to prevent stale data
+        const latestSteps = browserStepsRef.current;
+
+        if (step.type === "list") {
+            action = "scrapeList";
+            const baseSettings = getListSettingsObject(step);
+            settings = {
+                ...baseSettings,
+                name: step.name || `List Data ${latestSteps.filter(s => s.type === "list").length}`,
+            };
+
+        } else if (step.type === "text") {
+            action = "scrapeSchema";
+
+            const freshTextSteps = latestSteps.filter(
+                (s): s is TextStep => s.type === "text" && s.actionId === step.actionId
+            );
+
+            // Build schema settings from text steps
+            const fieldSettings: Record<
+                string,
+                {
+                    selector: string;
+                    tag?: string;
+                    [key: string]: any;
+                }
+            > = {};
+
+            freshTextSteps.forEach((textStep) => {
+                if (textStep.selectorObj?.selector && textStep.label) {
+                    fieldSettings[textStep.label] = {
+                        selector: textStep.selectorObj.selector,
+                        tag: textStep.selectorObj.tag,
+                        attribute: textStep.selectorObj.attribute,
+                        isShadow: textStep.selectorObj.isShadow,
+                    };
+                }
+            });
+
+            settings = {
+                ...fieldSettings,
+                name: currentTextGroupNameRef.current || "Text Data",
+            };
+
+        } else if (step.type === "screenshot") {
+            action = "screenshot";
+
+            const freshScreenshot = latestSteps.find(
+                (s) => s.type === "screenshot" && s.actionId === step.actionId
+            ) as ScreenshotStep | undefined;
+
+            settings = {
+                name:
+                    step.name ||
+                    freshScreenshot?.name ||
+                    `Screenshot ${latestSteps.filter((s) => s.type === "screenshot").length}`,
+                type: "png",
+                caret: "hide",
+                scale: "device",
+                timeout: 30000,
+                fullPage: freshScreenshot?.fullPage ?? step.fullPage ?? true,
+                animations: "allow",
+            };
+        }
+
+        socket.emit("action", { action, actionId: step.actionId, settings });
+    };
+
+    const emitForStepId = (actionId: string, nameOverride?: string) => {
+        const step = browserStepsRef.current.find(s => s.actionId === actionId);
+        if (!step) return;
+
+        let enrichedStep = { ...step };
+
+        if (step.type === "text") {
+            enrichedStep = { ...step, name: currentTextGroupNameRef.current };
+        }
+
+        if (step.type === "screenshot") {
+            const freshScreenshot = browserStepsRef.current.find(
+                s => s.type === "screenshot" && s.actionId === actionId
+            ) as ScreenshotStep | undefined;
+
+            if (freshScreenshot) {
+                enrichedStep = { ...freshScreenshot };
+
+                if (nameOverride && freshScreenshot.name !== nameOverride) {
+                    enrichedStep.name = nameOverride;
+                    browserStepsRef.current = browserStepsRef.current.map(s =>
+                        s.id === freshScreenshot.id ? { ...s, name: nameOverride } : s
+                    );
+                    setBrowserSteps(prev =>
+                        prev.map(s =>
+                            s.id === freshScreenshot.id ? { ...s, name: nameOverride } : s
+                        )
+                    );
+                }
+            }
+        }
+
+        if (step.type === "list") {
+            const freshList = browserStepsRef.current.find(
+                s => s.type === "list" && s.actionId === actionId
+            ) as ListStep | undefined;
+
+            if (freshList) {
+                enrichedStep = { ...freshList };
+            }
+        }
+
+        emitActionForStep(enrichedStep);
+    };
+
     const addTextStep = (label: string, data: string, selectorObj: SelectorObject, actionId: string) => {
-        setBrowserSteps(prevSteps => [
+        setBrowserSteps((prevSteps) => {
-            ...prevSteps,
+            const textCount = prevSteps.filter(s => s.type === 'text').length + 1;
-            { id: Date.now(), type: 'text', label, data, selectorObj, actionId }
+            const generatedLabel = label || `Label ${textCount}`;
-        ]);
+            return [
+                ...prevSteps,
+                {
+                    id: Date.now(),
+                    type: "text",
+                    label: generatedLabel,
+                    data,
+                    selectorObj,
+                    actionId,
+                },
+            ];
+        });
     };
 
     const addListStep = (
-        listSelector: string, 
+        listSelector: string,
-        newFields: { [key: string]: TextStep }, 
+        newFields: { [key: string]: TextStep },
-        listId: number, 
+        listId: number,
-        actionId: string, 
+        actionId: string,
-        pagination?: { type: string; selector: string; isShadow?: boolean }, 
+        pagination?: {
+            type: string;
+            selector: string;
+            isShadow?: boolean;
+        },
         limit?: number,
         isShadow?: boolean
     ) => {
-        setBrowserSteps(prevSteps => {
+        setBrowserSteps((prevSteps) => {
-            const existingListStepIndex = prevSteps.findIndex(step => step.type === 'list' && step.id === listId);
+            const existingListStepIndex = prevSteps.findIndex(
-            
+                (step) => step.type === "list" && step.id === listId
+            );
+
             if (existingListStepIndex !== -1) {
                 const updatedSteps = [...prevSteps];
-                const existingListStep = updatedSteps[existingListStepIndex] as ListStep;
+                const existingListStep = updatedSteps[
+                    existingListStepIndex
+                ] as ListStep;
 
                 // Preserve existing labels for fields
-                const mergedFields = Object.entries(newFields).reduce((acc, [key, field]) => {
+                const mergedFields = Object.entries(newFields).reduce(
-                    if (!discardedFields.has(`${listId}-${key}`)) {
+                    (acc, [key, field]) => {
-                        // If field exists, preserve its label
+                        if (!discardedFields.has(`${listId}-${key}`)) {
-                        if (existingListStep.fields[key]) {
+                            // If field exists, preserve its label
-                            acc[key] = {
+                            if (existingListStep.fields[key]) {
-                                ...field,
+                                acc[key] = {
-                                label: existingListStep.fields[key].label,
+                                    ...field,
-                                actionId
+                                    label: existingListStep.fields[key].label,
-                            };
+                                    actionId,
-                        } else {
+                                };
-                            acc[key] = {
+                            } else {
-                                ...field,
+                                acc[key] = {
-                                actionId
+                                    ...field,
-                            };
+                                    actionId,
+                                };
+                            }
                         }
-                    }
+                        return acc;
-                    return acc;
+                    },
-                }, {} as { [key: string]: TextStep });
+                    {} as { [key: string]: TextStep }
+                );
 
                 updatedSteps[existingListStepIndex] = {
                     ...existingListStep,
+                    listSelector,
                     fields: mergedFields,
                     pagination: pagination || existingListStep.pagination,
                     limit: limit,
+                    isShadow: isShadow !== undefined ? isShadow : existingListStep.isShadow,
                     actionId,
-                    isShadow: isShadow !== undefined ? isShadow : existingListStep.isShadow
                 };
                 return updatedSteps;
             } else {
-                const fieldsWithActionId = Object.entries(newFields).reduce((acc, [key, field]) => {
+                const fieldsWithActionId = Object.entries(newFields).reduce(
-                    acc[key] = {
+                    (acc, [key, field]) => {
-                        ...field,
+                        acc[key] = {
-                        actionId
+                            ...field,
-                    };
+                            actionId,
-                    return acc;
+                        };
-                }, {} as { [key: string]: TextStep });
+                        return acc;
+                    },
+                    {} as { [key: string]: TextStep }
+                );
 
+                const listCount = prevSteps.filter(s => s.type === 'list').length + 1;
                 return [
                     ...prevSteps,
-                    { 
+                    {
-                        id: listId, 
+                        id: listId,
-                        type: 'list', 
+                        type: "list",
-                        listSelector, 
+                        name: `List Data ${listCount}`,
-                        fields: fieldsWithActionId, 
+                        listSelector,
-                        pagination, 
+                        fields: fieldsWithActionId,
-                        limit, 
+                        pagination,
+                        limit,
                         actionId,
-                        isShadow
+                    },
-                    }
                 ];
             }
         });
@@ -165,22 +389,39 @@ export const BrowserStepsProvider: React.FC<{ children: React.ReactNode }> = ({
         );
     };
 
-    const updateListTextFieldLabel = (listId: number, fieldKey: string, newLabel: string) => {
+    const updateListTextFieldLabel = (
-        setBrowserSteps(prevSteps =>
+        listId: number,
-            prevSteps.map(step => {
+        fieldKey: string,
-                if (step.type === 'list' && step.id === listId) {
+        newLabel: string
-                    // Ensure deep copy of the fields object
+    ) => {
+        setBrowserSteps((prevSteps) =>
+            prevSteps.map((step) => {
+                if (step.type === "list" && step.id === listId) {
+                    const oldLabel = step.fields[fieldKey].label;
+
                     const updatedFields = {
                         ...step.fields,
                         [fieldKey]: {
                             ...step.fields[fieldKey],
-                            label: newLabel
+                            label: newLabel,
-                        }
+                        },
                     };
 
+                    const updatedData = step.data?.map((row: any) => {
+                        if (row[oldLabel] !== undefined) {
+                            const { [oldLabel]: value, ...rest } = row;
+                            return {
+                                ...rest,
+                                [newLabel]: value,
+                            };
+                        }
+                        return row;
+                    });
+
                     return {
                         ...step,
-                        fields: updatedFields
+                        fields: updatedFields,
+                        data: updatedData,
                     };
                 }
                 return step;
@@ -194,7 +435,7 @@ export const BrowserStepsProvider: React.FC<{ children: React.ReactNode }> = ({
             if (step.type === 'list' && step.id === listId) {
               return {
                 ...step,
-                data: extractedData  // Add the extracted data to the step
+                data: extractedData
               };
             }
             return step;
@@ -217,49 +458,83 @@ export const BrowserStepsProvider: React.FC<{ children: React.ReactNode }> = ({
     };
 
     const updateListStepLimit = (listId: number, limit: number) => {
-        setBrowserSteps(prevSteps =>
-          prevSteps.map(step => {
-            if (step.type === 'list' && step.id === listId) {
-              return {
-                ...step,
-                limit: limit
-              };
-            }
-            return step;
-          })
-        );
-    };
-
-    const removeListTextField = (listId: number, fieldKey: string) => {
         setBrowserSteps(prevSteps =>
             prevSteps.map(step => {
                 if (step.type === 'list' && step.id === listId) {
-                    const { [fieldKey]: _, ...remainingFields } = step.fields;
                     return {
                         ...step,
-                        fields: remainingFields
+                        limit: limit
                     };
                 }
                 return step;
             })
         );
-        setDiscardedFields(prevDiscarded => new Set(prevDiscarded).add(`${listId}-${fieldKey}`));
+    };
+
+    const updateListStepName = (listId: number, name: string) => {
+        setBrowserSteps((prevSteps) =>
+            prevSteps.map((step) => {
+                if (step.type === "list" && step.id === listId) {
+                    return {
+                        ...step,
+                        name: name,
+                    };
+                }
+                return step;
+            })
+        );
+    };
+
+    const updateScreenshotStepName = (id: number, name: string) => {
+        setBrowserSteps(prevSteps => {
+            const updated = prevSteps.map(step =>
+                step.id === id && step.type === 'screenshot'
+                    ? { ...step, name }
+                    : step
+            );
+            browserStepsRef.current = updated;
+            return updated;
+        });
+    };
+
+    const removeListTextField = (listId: number, fieldKey: string) => {
+        setBrowserSteps((prevSteps) =>
+            prevSteps.map((step) => {
+                if (step.type === "list" && step.id === listId) {
+                    const { [fieldKey]: _, ...remainingFields } = step.fields;
+                    return {
+                        ...step,
+                        fields: remainingFields,
+                    };
+                }
+                return step;
+            })
+        );
+        setDiscardedFields((prevDiscarded) =>
+            new Set(prevDiscarded).add(`${listId}-${fieldKey}`)
+        );
     };
     return (
-        <BrowserStepsContext.Provider value={{
+        <BrowserStepsContext.Provider
-            browserSteps,
+            value={{
-            addTextStep,
+                browserSteps,
-            addListStep,
+                addTextStep,
-            addScreenshotStep,
+                addListStep,
-            deleteBrowserStep,
+                addScreenshotStep,
-            updateBrowserTextStepLabel,
+                deleteBrowserStep,
-            updateListTextFieldLabel,
+                updateBrowserTextStepLabel,
-            updateListStepLimit,
+                updateListTextFieldLabel,
-            updateListStepData,
+                updateListStepLimit,
-            removeListTextField,
+                updateListStepData,
-            deleteStepsByActionId,
+                updateListStepName,
-            updateScreenshotStepData,
+                updateScreenshotStepName,
-        }}>
+                removeListTextField,
+                deleteStepsByActionId,
+                updateScreenshotStepData,
+                emitActionForStep,
+                emitForStepId
+            }}
+        >
             {children}
         </BrowserStepsContext.Provider>
     );

src/context/globalInfo.tsx

@@ -139,6 +139,8 @@ interface GlobalInfo {
   setCurrentListActionId: (actionId: string) => void;
   currentScreenshotActionId: string;
   setCurrentScreenshotActionId: (actionId: string) => void;
+  currentTextGroupName: string;
+  setCurrentTextGroupName: (name: string) => void;
   isDOMMode: boolean;
   setIsDOMMode: (isDOMMode: boolean) => void;
   currentSnapshot: ProcessedSnapshot | null;
@@ -173,6 +175,7 @@ class GlobalInfoStore implements Partial<GlobalInfo> {
   currentTextActionId = '';
   currentListActionId = '';
   currentScreenshotActionId = '';
+  currentTextGroupName = 'Text Data';
   isDOMMode = false;
   currentSnapshot = null;
 };
@@ -282,6 +285,7 @@ export const GlobalInfoProvider = ({ children }: { children: JSX.Element }) => {
   const [currentTextActionId, setCurrentTextActionId] = useState<string>('');
   const [currentListActionId, setCurrentListActionId] = useState<string>('');
   const [currentScreenshotActionId, setCurrentScreenshotActionId] = useState<string>('');
+  const [currentTextGroupName, setCurrentTextGroupName] = useState<string>('Text Data');
   const [isDOMMode, setIsDOMMode] = useState<boolean>(globalInfoStore.isDOMMode);
   const [currentSnapshot, setCurrentSnapshot] = useState<ProcessedSnapshot | null>(globalInfoStore.currentSnapshot);
 
@@ -363,6 +367,8 @@ export const GlobalInfoProvider = ({ children }: { children: JSX.Element }) => {
         setCurrentListActionId,
         currentScreenshotActionId,
         setCurrentScreenshotActionId,
+        currentTextGroupName,
+        setCurrentTextGroupName,
         isDOMMode,
         setIsDOMMode,
         currentSnapshot,

src/helpers/capturedElementHighlighter.ts

@@ -0,0 +1,85 @@
+/**
+ * Helper class for managing persistent highlights of captured elements.
+ * Shows dotted highlights for elements that have been captured but not yet confirmed.
+ */
+class CapturedElementHighlighter {
+  private static readonly STYLE_ID = 'maxun-captured-elements-style';
+
+  /**
+   * Apply persistent dotted highlights to captured elements in the DOM iframe
+   * @param selectors Array of captured element selectors
+   */
+  public applyHighlights(selectors: Array<{ selector: string }>): void {
+    const iframeDoc = this.getIframeDocument();
+    if (!iframeDoc) return;
+
+    // Remove existing highlights
+    this.clearHighlights();
+
+    // Create CSS rules for each captured selector
+    const cssRules: string[] = [];
+
+    selectors.forEach(({ selector }) => {
+      const cssSelector = this.getCSSSelector(selector);
+
+      if (cssSelector) {
+        cssRules.push(`
+          ${cssSelector} {
+            outline: 2px dotted #ff00c3 !important;
+            outline-offset: 2px !important;
+            background-color: rgba(255, 0, 195, 0.08) !important;
+            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
+          }
+        `);
+      }
+    });
+
+    // Inject style element
+    if (cssRules.length > 0) {
+      const styleElement = iframeDoc.createElement('style');
+      styleElement.id = CapturedElementHighlighter.STYLE_ID;
+      styleElement.textContent = cssRules.join('\n');
+      iframeDoc.head.appendChild(styleElement);
+    }
+  }
+
+  /**
+   * Clear all persistent highlights from the DOM iframe
+   */
+  public clearHighlights(): void {
+    const iframeDoc = this.getIframeDocument();
+    if (!iframeDoc) return;
+
+    const existingStyle = iframeDoc.getElementById(CapturedElementHighlighter.STYLE_ID);
+    if (existingStyle) {
+      existingStyle.remove();
+    }
+  }
+
+  /**
+   * Get the iframe document
+   */
+  private getIframeDocument(): Document | null {
+    const iframeElement = document.querySelector('#dom-browser-iframe') as HTMLIFrameElement;
+    return iframeElement?.contentDocument || null;
+  }
+
+  /**
+   * Convert selector to CSS format for highlighting
+   */
+  private getCSSSelector(selector: string): string {
+    // Handle XPath selectors by extracting data-mx-id
+    if (selector.startsWith('//') || selector.startsWith('(//')) {
+      const mxIdMatch = selector.match(/data-mx-id='([^']+)'/);
+      if (mxIdMatch) {
+        return `[data-mx-id='${mxIdMatch[1]}']`;
+      }
+      return '';
+    }
+
+    // Already a CSS selector
+    return selector;
+  }
+}
+
+export const capturedElementHighlighter = new CapturedElementHighlighter();